/*@import url(../icons/font-awesome/css/font-awesome.min.css);
@import url(spinners.css);
@import url(animate.css);*/

#notfound {
    position: relative;
    height: 100vh
}

    #notfound .notfound {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%)
    }

.notfound {
    max-width: 520px;
    width: 100%;
    line-height: 1.4;
    text-align: center
}

    .notfound .notfound-404 {
        position: relative;
        height: 200px;
        margin: 0 auto 20px;
        z-index: -1
    }

        .notfound .notfound-404 h1 {
            font-family: IRANSans,sans-serif;
            font-size: 236px;
            font-weight: 200;
            margin: 0;
            color: #211b19;
            text-transform: uppercase;
            position: absolute;
            left: 50%;
            top: 15%;
            -webkit-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%)
        }

        .notfound .notfound-404 h2 {
            font-family: IRANSans,sans-serif;
            font-size: 26px;
            font-weight: 400;
            text-transform: uppercase;
            color: #211b19;
            background: #fff;
            padding: 10px 5px;
            margin: auto;
            display: inline-block;
            position: absolute;
            bottom: -11px;
            left: 0;
            right: 0
        }

    .notfound a {
        font-family: IRANSans,sans-serif;
        display: inline-block;
        font-weight: 700;
        text-decoration: none;
        color: #fff;
        text-transform: uppercase;
        padding: 13px 23px;
        background: #ff6300;
        font-size: 18px;
        -webkit-transition: .2s all;
        transition: .2s all
    }

        .notfound a:hover {
            color: #ff6300;
            background: #211b19
        }

@media only screen and (max-width:767px) {
    .notfound .notfound-404 h1 {
        font-size: 148px
    }
}

@media only screen and (max-width:480px) {
    .notfound .notfound-404 {
        height: 148px;
        margin: 0 auto 10px
    }

        .notfound .notfound-404 h1 {
            font-size: 86px
        }

        .notfound .notfound-404 h2 {
            font-size: 16px
        }

    .notfound a {
        padding: 7px 15px;
        font-size: 14px
    }
}

@font-face {
    font-family: IRANSans-web;
    src: url(../fonts/IRANSLW.woff) format("woff"), url(../fonts/IRANSLW.woff) format("woff"), url(../fonts/IRANSLW.ttf) format("tff");
    font-weight: 300;
}
/*New*/
.x_panel {
    position: relative;
    /*width: 100%;*/
    margin-bottom: 10px;
    padding: 35px 20px;
    display: flex;
    background: rgba(233, 246, 243, 0.75);
    border: 1px solid #e6e9ed;
    opacity: 1;
    transition: all .2s ease;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: space-between;
    justify-content: space-between;
    align-items: stretch;
}

.x_title {
    border-bottom: 2px solid #e6e9ed;
    padding: 1px 5px 6px 29px;
    margin-bottom: 10px;
}

.x_content {
    padding: 0 5px 6px;
    position: relative;
    width: 100%;
    float: left;
    clear: both;
    margin-top: 5px;
}

.row-n {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-right: -15px !important;
    margin-left: -15px !important;
    justify-content: center;
    align-content: space-between;
}

.inputBox div {
    border: 1px solid #778899;
    border-radius: 20px;
    width: 100%;
    border: 0px solid;
    padding: 10px;
    background-color: #f0f0f0;
    color: #191970;
}

.inputTitle {
    color: #778899;
}

.balance-n {
    margin: 25px;
    padding: 35px;
    justify-content: center;
}

.dropdown-control {
    display: block;
    height: 34px;
    padding: 2px 12px;
    font-size: 17px;
    line-height: 1.428571429;
    color: #555555;
    vertical-align: middle;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

/*WallerRegister*/
.newPanel {
    margin: 20px;
    padding: 30px;
    -webkit-box-shadow: 0px 0px 47px -1px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 47px -1px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 47px -1px rgba(0,0,0,0.75);
    border-radius: 10px;
}

.newPanelTitle {
    color: #008080;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
}

.inputTitle {
    color: #778899;
}

.inputBox {
    /*border: 1px solid #778899;*/
    border-radius: 20px;
}

    .inputBox input {
        border: 1px solid #778899;
        border-radius: 20px;
        width: 100%;
        border: 1px solid #f0f0f0;
        padding: 10px;
        background-color: #f0f0f0;
        color: #191970;
    }

    .inputBox div {
        border: 1px solid #778899;
        border-radius: 20px;
        width: 100%;
        border: 0px solid;
        padding: 10px;
        background-color: #f0f0f0;
        color: #191970;
    }

.inputCheckList {
    border-radius: 20px;
    width: 100%;
    border: 0px solid;
    padding: 10px;
    background-color: #f0f0f0;
    color: #191970;
}

.newBox {
    margin-top: 18px;
}

.inputTitle {
    color: #008080;
}

.newButton {
    margin-top: 10px;
    color: #fff;
    text-align: center;
    border-radius: 100px;
    background-color: #008080;
    padding: 10px;
    cursor: pointer;
    border: 0px;
}

    .newButton:hover {
        background-color: #4682b4;
    }

.newButtonSecond {
    margin-top: 10px;
    color: #fff;
    text-align: center;
    border-radius: 100px;
    background-color: #deb887;
    padding: 10px;
    cursor: pointer;
}

    .newButtonSecond:hover {
        background-color: #deb887;
    }

.newPanelAlert {
    background-color: #db7093;
    padding: 10px;
    margin: 15px;
    color: #fff;
    border-radius: 10px;
}

.newPanelAlert2 {
    background-color: #3cb371;
    padding: 10px;
    margin: 15px;
    color: #fff;
    border-radius: 10px;
}

.required {
    border: 1px solid #db7093 !important;
    background-color: #fdf5e6 !important;
}

.modal-dialog-advanced {
    margin-left: auto;
    margin-right: auto;
    width: auto;
    padding: 10px;
    z-index: 1050;
}

.form-control-addamount {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555555;
    vertical-align: middle;
    background-color: transparent;
}

.bg-color-modal {
    background-color: #eff8f6 !important;
}

@media (min-width: 768px) {
    .modal-dialog-advanced {
        right: 50%;
        left: auto;
        width: 415px;
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .justify-content-n {
        align-content: center;
        flex-wrap: nowrap;
        justify-content: center;
    }

    .justify-div-row {
        margin: 2px;
        justify-content: space-between;
    }

    .modal-dialog-walletlist {
        width: 700px !important;
        margin-left: auto;
        margin-right: auto;
        padding: 10px;
        z-index: 1050;
    }
}

/*Old*/
body {
    font-family: IRANSans-web;
}
/* MOBILE style */

@media screen and (max-width: 992px) {
    /*
     * In Mobile, hide the tabs controls and undo some potential damage done by the accordion
     */
    /*.responsive-tabs .nav-tabs,
    .responsive-tabs .tab-content .collapse.active:not(.in) {
        display: none;
    }*/
    .responsive-tabs .tab-content .collapse.in,
    .responsive-tabs .tab-content .collapsing {
        display: block;
    }
}

.font-farsi-iransans {
    font-family: IRANSans !important;
}

.modal-fix-header {
    display: flex;
    justify-content: space-between;
}

@media (min-width:484px) {
    .btn-hs-with {
        flex-wrap: nowrap;
    }

    .btn-close-fix-small {
        margin-top: -77px !important;
    }
}

/* DESKTOP style */
@media screen and (min-width: 991px) {
    /*
     * In desktop, hide the accordion's controls and undo some potential damage done on the active tab
     */
    .responsive-tabs .panel-heading {
        display: none;
    }

    .responsive-tabs > .active {
        height: auto !important;
    }
}


/* To make it a bit prettier */
/*body {
    padding: 15px;
}*/

.tab-content .panel-heading {
    padding: 0;
}

.tab-content a {
    display: block;
    margin-bottom: -1px;
    padding: 10px 15px;
    border: solid #ccc;
    border-width: 1px 0;
}

.board {
    width: 75%;
    margin: 20px auto;
    /*height: 500px;*/
    background: #fff;
    /*box-shadow: 10px 10px #ccc,-10px 20px #ddd;*/
}

    .board .nav-tabs {
        position: relative;
        /* border-bottom: 0; */
        /* width: 80%; */
        margin: 40px auto;
        margin-bottom: 0;
        box-sizing: border-box;
    }

    .board > div.board-inner {
        background: #fafafa;
        /*url(http://subtlepatterns.com/patterns/geometry2.png);*/
        background-size: 30%;
    }

    .board p.narrow {
        width: 60%;
        margin: 10px auto;
    }

    .board .liner {
        height: 2px;
        background: #ddd;
        position: absolute;
        width: 70%;
        margin: 0 auto;
        left: 0;
        right: 0;
        top: 50%;
        z-index: 1;
    }

    .board .nav-tabs > li.active > a,
    .board .nav-tabs > li.active > a:hover,
    .board .nav-tabs > li.active > a:focus {
        color: #555555;
        cursor: default;
        /* background-color: #ffffff; */
        border: 0;
        border-bottom-color: transparent;
    }

    .board span.round-tabs {
        width: 70px;
        height: 70px;
        line-height: 70px;
        display: inline-block;
        border-radius: 100px;
        background: white;
        z-index: 2;
        position: absolute;
        left: 0;
        text-align: center;
        font-size: 25px;
    }

        /*.board span.round-tabs.one {*/
            /*color: rgb(34, 194, 34);
    border: 2px solid rgb(34, 194, 34);*/
            /*color: #1ea6af;
            border: 2px solid #1ea6af;
        }*/

    .board li.active span.round-tabs.one {
        background: #fff !important;
        border: 2px solid #ddd;
        color: rgb(34, 194, 34);
    }
/*
    .board span.round-tabs.two {
        color: #febe29;
        border: 2px solid #febe29;
    }*/

li.active span.round-tabs.two {
    background: #fff !important;
    border: 2px solid #ddd;
    color: #febe29;
}

.board span.round-tabs.three {
    color: #821458;
    border: 2px solid #821458;
}

.board li.active span.round-tabs.three {
    background: #fff !important;
    border: 2px solid #ddd;
    color: #3e5e9a;
}

.board span.round-tabs.four {
    color: #f1685e;
    border: 2px solid #f1685e;
}

.board li.active span.round-tabs.four {
    background: #fff !important;
    border: 2px solid #ddd;
    color: #f1685e;
}

.board span.round-tabs.five {
    color: #999;
    border: 2px solid #999;
}

.board li.active span.round-tabs.five {
    background: #fff !important;
    border: 2px solid #ddd;
    color: #999;
}

.board .nav-tabs > li.active > a span.round-tabs {
    background: #fafafa;
}

.board .nav-tabs > li {
    /*width: 20%;*/
    width: 33.33333333%;
}
    /*li.active:before {
    content: " ";
    position: absolute;
    left: 45%;
    opacity:0;
    margin: 0 auto;
    bottom: -2px;
    border: 10px solid transparent;
    border-bottom-color: #fff;
    z-index: 1;
    transition:0.2s ease-in-out;
}*/
    .board .nav-tabs > li:after {
        content: " ";
        position: absolute;
        left: 45%;
        opacity: 0;
        margin: 0 auto;
        bottom: 0px;
        border: 5px solid transparent;
        border-bottom-color: #ddd;
        transition: 0.1s ease-in-out;
    }

    .board .nav-tabs > li.active:after {
        content: " ";
        position: absolute;
        left: 47%;
        opacity: 1;
        margin: 0 auto;
        bottom: 0px;
        border: 10px solid transparent;
        border-bottom-color: #ddd;
    }

    .board .nav-tabs > li a {
        width: 70px;
        height: 70px;
        margin: 20px auto;
        border-radius: 100%;
        padding: 0;
    }

        .board .nav-tabs > li a:hover {
            background: transparent;
        }

.board .tab-content {
}

.board .tab-pane {
    position: relative;
    /* padding-top: 50px;*/
}

.board .tab-content .head {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 25px;
    text-transform: uppercase;
    padding-bottom: 10px;
}

.board .btn-outline-rounded {
    padding: 10px 40px;
    margin: 20px 0;
    border: 2px solid transparent;
    border-radius: 25px;
}

.board .btn.green {
    background-color: #5cb85c;
    /*border: 2px solid #5cb85c;*/
    color: #ffffff;
}



@media( max-width : 585px ) {

    .board {
        width: 90%;
        height: auto !important;
    }

        .board span.round-tabs {
            font-size: 16px;
            width: 50px;
            height: 50px;
            line-height: 50px;
        }

        .board .tab-content .head {
            font-size: 20px;
        }

        .board .nav-tabs > li a {
            width: 50px;
            height: 50px;
            line-height: 50px;
        }

        .board .nav-tabs > li.active:after {
            content: " ";
            position: absolute;
            left: 40%;
        }

        .board .btn-outline-rounded {
            padding: 12px 20px;
        }
}

#myTab {
    display: block;
    !important;
}

.inputGroup {
    background-color: #fff;
    display: block;
    /*margin: 10px 0;*/
    position: relative;
}

    .inputGroup label {
        padding: 12px 30px;
        width: 100%;
        display: block;
        text-align: right;
        color: #3C454C;
        cursor: pointer;
        position: relative;
        z-index: 2;
        -webkit-transition: color 200ms ease-in;
        transition: color 200ms ease-in;
        overflow: hidden;
        text-indent: 50px;
    }

        .inputGroup label:before {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            content: '';
            background-color: #5562eb;
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%, -50%) scale3d(1, 1, 1);
            transform: translate(-50%, -50%) scale3d(1, 1, 1);
            -webkit-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
            transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
            opacity: 0;
            z-index: -1;
        }

        .inputGroup label:after {
            width: 32px;
            height: 32px;
            content: '';
            border: 2px solid #D1D7DC;
            background-color: #fff;
            background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");
            background-repeat: no-repeat;
            background-position: 2px 3px;
            border-radius: 50%;
            z-index: 2;
            position: absolute;
            right: 30px;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            cursor: pointer;
            -webkit-transition: all 200ms ease-in;
            transition: all 200ms ease-in;
        }

    .inputGroup input:checked ~ label {
        color: #fff;
    }

        .inputGroup input:checked ~ label:before {
            -webkit-transform: translate(-50%, -50%) scale3d(56, 56, 1);
            transform: translate(-50%, -50%) scale3d(56, 56, 1);
            opacity: 1;
        }

        .inputGroup input:checked ~ label:after {
            background-color: #54E0C7;
            border-color: #54E0C7;
        }

    .inputGroup input {
        width: 32px;
        height: 32px;
        -webkit-box-ordinal-group: 2;
        order: 1;
        z-index: 2;
        position: absolute;
        right: 30px;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        cursor: pointer;
        visibility: hidden;
    }

.form {
    /*padding: 0 16px;*/
    max-width: 550px;
    margin: 50px auto;
    /*font-size: 18px;*/
    font-weight: 600;
    /*line-height: 36px;*/
}


*,
*::before,
*::after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
}

code {
    background-color: #9AA3AC;
    padding: 0 8px;
}

.hamrah .btn-primary {
    background-color: #49c4cc !important;
    border-color: #23959c;
}

.hamrah .inputGroup label:before {
    background-color: #49c4cc !important;
}

.hamrah .form-control:focus {
    border-color: #49c4cc;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}

.irnacell .btn-primary {
    background-color: #ffe51c !important;
    border-color: #fade04;
}

.irnacell .inputGroup label:before {
    background-color: #ffe51c !important;
}

.irnacell .form-control:focus {
    border-color: #ffe51c;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}

.talia .btn-primary {
    background-color: #992a6e !important;
    border-color: #941362;
}

.talia .inputGroup label:before {
    background-color: #992a6e !important;
}

.talia .form-control:focus {
    border-color: #992a6e;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}


.charitySelect .inputGroup label:before {
    background-color: #f1685e !important;
}


.irnacellselectpicker {
    text-align: right;
    direction: rtl;
    width: 100%;
}

.bootstrap-select {
    text-align: right;
}

    .bootstrap-select.btn-group .btn .filter-option {
        text-align: right;
        color: black
    }

    .bootstrap-select.btn-group .btn .caret {
        right: unset !important;
        left: 12px !important;
    }

    .bootstrap-select.btn-group .btn .filter-option {
        text-align: right;
    }