@font-face {
    font-family: 'IRANSansWeb';
    src: url('../Fonts/Iransans/IRANSansWeb.eot') format('embedded-opentype'), url('../Fonts/Iransans/IRANSansWeb.woff2') format('woff2'), url('../Fonts/Iransans/IRANSansWeb.woff') format('woff'), url('../Fonts/Iransans/IRANSansWeb.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

a {
    text-decoration: none !important;
}

body, .tooltip {
    font-family: 'IRANSansWeb' !important;
    direction: rtl !important;
}

.noPadding {
    padding: 0 !important;
}

.noMargin {
    margin: 0 !important;
}

.box-title-dark-lg {
    font-size: 30px;
    color: #04000E;
    padding: 20px;
}

.box-title-light-lg {
    font-size: 30px;
    color: #fafafa;
    padding: 20px;
}

.box-title-md {
    font-size: 16px;
    color: #04000E;
}

.box-title-light-md {
    font-size: 16px;
    color: #fafafa;
}

.box-title-sm {
    font-size: 14px;
    color: #04000E;
}

.box-title-light-sm {
    font-size: 14px;
    color: #fafafa;
}

.mt-xxl {
    margin-top: 50px;
}

.mt-xl {
    margin-top: 25px;
}

.mt-lg {
    margin-top: 20px;
}

.mt-md {
    margin-top: 15px;
}

.mt-sm {
    margin-top: 10px;
}

.mt-xs {
    margin-top: 5px;
}

.mb-xxl {
    margin-bottom: 50px;
}

.mb-xl {
    margin-bottom: 25px;
}

.mb-lg {
    margin-bottom: 20px;
}

.mb-md {
    margin-bottom: 15px;
}

.mb-sm {
    margin-bottom: 10px;
}

.mb-xs {
    margin-bottom: 5px;
}

.scroll {
    margin-top: 20px;
    display: block;
    -webkit-animation: pulse 2s infinite;
    animation: pulse 2s infinite;
    color: #FF4081;
}

.pageBody {
    padding: 20px 0 0;
}

.pageTitle {
    border-bottom: 2px solid #04000E;
}

.navbar-inner {
    background-color: #3e3e3e;
    border-radius: 0 !important;
}
/*========== Main Page ========*/
.regesterBtn {
    position: fixed;
    right: -60px;
    top: 30%;
    transform: rotate(270deg);
    background-color: rgb(224, 8, 8);
    font-size: 18px;
    z-index: 100000000;
    padding: 10px 30px;
    border-radius: 15px 15px 0px 0px;
}

    .regesterBtn a {
        color: #fff !important;
    }

.scrolltop {
    background-color: rgba(255,255,255,0.6);
    width: 50px;
    height: 50px;
    position: fixed;
    right: 10px;
    top: 200px;
    border-radius: 30px;
    z-index: 100000;
}

    .scrolltop .object {
        animation: MoveUpDown 1.5s linear infinite;
        position: absolute;
        left: 12px;
        bottom: 0;
    }

        .scrolltop .object i {
            font-size: 30px;
            color: #4A6EAA;
        }

@keyframes MoveUpDown {
    0%, 100% {
        bottom: 2px;
    }

    50% {
        bottom: 9px;
    }
}

.fixed {
    background-color: #4A6EAA;
}

    .fixed a img {
        display: block !important;
    }

    .fixed a {
        color: #efefef !important;
    }

        .fixed a:hover {
            color: #fafafa !important;
        }

.btn-collapse {
    background-color: #04000E !important;
}

    .btn-collapse span {
        background-color: #ffffff;
    }

.Menu {
    background-color: #04000E;
}

    .Menu ul {
        list-style: none;
    }

.NavBar ul {
    margin: auto !important;
    float: none !important;
    text-align: center;
}

    .NavBar ul li {
        float: none !important;
        display: inline-grid;
    }
        /*Light style*/
        /*.NavBar ul li a {
            color: #efefef;
            font-weight: bold;
            padding: 20px;
            font-size: 16px;
        }*/

        /*Dark Style*/
        .NavBar ul li a {
            color: #04000E;
            font-weight: bold;
            padding: 28px 20px;
            font-size: 16px;
        }

            .NavBar ul li a:hover {
                background-color: transparent;
                /*color: #5378AC;*/
                color: #e2e7ff;
            }

.welcome {
    margin: 60px auto;
}

    .welcome b {
        color: rgb(0, 39, 167);
    }
    /*Light style*/
    /*.welcome span {
        color: #efefef;
        font-size: 35px;
    }*/
    /*Dark style*/
    .welcome span {
        /*color: #04000E;*/
        color: #f0eefd;
        font-size: 35px;
    }

.Banner {
    background-image: url(/Image/Banner/3333.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.Audience {
    background-color: #f7f7f7;
}
.anime {
    background-color: #f7f7f7;
}
.Feature {
    background-image: url(/Image/Banner/gebgsectin.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}





/*==============================*/


.btn-darkBlue, .btn-darkBlue:focus, .btn-darkBlue:active {
    color: #efefef;
    background-color: #021c72;
    margin: 10px auto;
}

    .btn-darkBlue.focus, .btn-darkBlue:focus {
        color: #021c72;
        background-color: #efefef;
        border-color: #255625;
    }

    .btn-darkBlue:hover {
        color: #021c72;
        background-color: #efefef;
    }

.btn-lightBlue {
    color: #efefef;
    background-color: #5E83B7;
    margin: 10px auto;
}

    .btn-lightBlue.focus, .btn-lightBlue:focus {
        color: #5E83B7;
        background-color: #efefef;
        border-color: #5E83B7;
    }

    .btn-lightBlue:hover {
        color: #021c72;
        background-color: #efefef;
        border-color: #5E83B7;
    }






.container-dark-box {
    min-height: 100px;
    padding: 30px;
}

    .container-dark-box .icon {
        font-size: 50px;
        color: #0f67e2;
    }

    .container-dark-box p {
        text-align: center;
        padding: 20px 0;
    }

    .container-dark-box img {
        width: 100%;
        height: 300px;
    }

.container-light-box {
    min-height: 205px !important;
    padding: 30px;
}

    .container-light-box .icon {
        font-size: 50px;
        /*color: rgb(74, 110, 170);*/
        color: rgb(103, 141, 193);
    }

    .container-light-box p {
        text-align: center;
        padding: 20px 0;
        color: #fafafa;
    }

    .container-light-box img {
        width: 100%;
        height: 300px;
    }

/*====== FAQ ======*/

.horizontal-box {
    background-color: #f1f1f1;
    border: 1px solid #cac9c8;
    border-radius: 10px;
    margin: 7px auto;
}

.question-box {
    color: #e82c68;
    background-color: #f4f3f3; /* #ffe7f5;*/
    border: 1px solid #e82c68;
    padding: 5px 30px;
    margin: 15px 0 0;
    line-height: 24px;
    position: relative;
    border-radius: 5px;
}

    .question-box .icon-FAQ {
        height: 40px;
        position: absolute;
        width: 40px;
        background: #e82c68;
        right: -20px;
        top: -10px;
        border-radius: 30px 0px 30px 35px;
        transform: rotate(133deg);
    }

.answer-box {
    color: #318e30;
    background-color: rgba(202, 255, 189, 0.2); /*#caffbd;*/
    border: #318e30 1px solid;
    padding: 5px 30px;
    margin: 15px 0;
    line-height: 24px;
    position: relative;
    border-radius: 5px;
}

    .answer-box .icon-FAQ {
        height: 40px;
        position: absolute;
        width: 40px;
        background: #318e30;
        right: -20px;
        top: -10px;
        border-radius: 30px 0px 30px 35px;
        transform: rotate(133deg);
    }

.icon-FAQ img {
    width: 31px;
    height: 31px;
    margin: 4px;
    transform: rotate(227deg);
}

@media only screen and (min-width: 1200px ) {
    .font-title {
         font-size: 30px !important;
    }
    .font-xxl {
        font-size: 60px !important;
    }

    .font-xl {
        font-size: 37px !important;
    }

    .font-lg {
        font-size: 18px !important;
    }

    /*.font-xs {
        font-size: 14px;
    }*/



    /*.font-md {
        font-size: 16px !important;
    }

    .font-sm {
        font-size: 14px;
    }

    .font-xs {
        font-size: 12px;
    }*/
}

@media (min-width: 992px ) and (max-width:1200px) {
    .font-title {
         font-size: 27px !important;
    }
    .font-xxl {
        font-size: 55px !important;
    }

    .font-xl {
        font-size: 30px !important;
    }

    .font-lg {
        font-size: 16px !important;
    }

    .font-md {
        font-size: 14px !important;
    }

    .font-sm {
        font-size: 12px;
    }

    .font-xs {
        font-size: 10px;
    }
}

@media (min-width: 768px ) and (max-width:992px ) {
     .font-title {
         font-size: 25px !important;
    }
    .font-xxl {
        font-size: 45px !important;
    }

    .font-xl {
        font-size: 25px !important;
    }

    .font-lg {
        font-size: 14px !important;
    }

    /*.font-md {
        font-size: 12px !important;
    }

    .font-sm {
        font-size: 10px;
    }

    .font-xs {
        font-size: 8px;
    }*/
}

@media (max-width :768px ) {
    .font-title {
         font-size: 23px !important;
    }
    .font-xxl {
        font-size: 35px !important;
    }

    .font-xl {
        font-size: 23px !important;
    }

    .font-lg {
        font-size: 12px !important;
    }

    /*.font-xs {
        font-size: 8px;
    }*/

    /*.font-md {
        font-size: 12px !important;
    }

    .font-sm {
        font-size: 10px;
    }

    .font-xs {
        font-size: 8px;
    }*/
}







/*=============== APP*/
.browser {
    background: #efefef;
    margin: 5px auto;
    padding: 10px 0;
    float: right;
    width: 100%;
    overflow: hidden;
}
/* Shine */
.brLink .figure {
    position: relative;
}

    .brLink .figure::before {
        position: absolute;
        top: 0;
        left: -75%;
        z-index: 2;
        display: block;
        content: '';
        width: 50%;
        height: 100%;
        background: -webkit-linear-gradient(left, rgba(172,172,172,0) 0%, rgba(172,172,172,.3) 100%);
        background: linear-gradient(to right, rgba(172,172,172,0) 0%, rgba(172,172,172,.3) 100%);
        -webkit-transform: skewX(-25deg);
        transform: skewX(-25deg);
    }

    .brLink .figure:hover::before {
        -webkit-animation: shine 1.75s;
        animation: shine 1.75s;
    }

@-webkit-keyframes shine {
    100% {
        left: 125%;
    }
}

@keyframes shine {
    100% {
        left: 125%;
    }
}

.icon-title {
    font-size: 30px;
    line-height: 64px;
}


.icon-br img {
    max-width: 64px;
    max-height: 64px;
}

.download-title {
    background-color: #707070;
    padding: 10px 0;
    margin: 10px auto 25px;
}

    .download-title h3 {
        color: #fefefe;
        font-size: 30px;
    }

.login-box {
    min-height: 615px;
}

.holder {
    Padding: 45px 10px 5px;
}

.btn-attach {
    margin: 20px auto;
    border: 1px solid #acacac !important;
    background-color: #e8e8e8;
    font-weight: bold !important;
    height: 50px;
}

    .btn-attach i {
        font-size: 25px;
    }

    .btn-attach span {
        font-size: 20px;
    }

.btn-login {
    background-color: #4A6EAA;
    color: #efefef;
}

.feature-box {
    /*margin: 10px auto;*/
}

    .feature-box img {
        width: 100%;
    }

    .feature-box ul li {
        list-style: none;
        background-color: transparent !important;
        color: #efefef;
        border: none;
        padding: 0;
    }

.footer {
    background-color: rgb(62, 62, 62);
    padding: 20px 0px 0px;
}

    .footer ul {
        list-style: none;
    }

        .footer ul li {
            display: list-item;
            padding: 5px 0px;
        }

            .footer ul li a {
                font-size: 16px;
                /*color: rgb(51, 122, 183);*/
                color: rgb(125, 157, 235);
                text-decoration: none !important;
            }

    .footer img {
        width: 100px;
        height: 100px;
    }

    .footer .icon {
        width: 24px;
        height: 24px;
    }

.rule {
    padding: 15px 0 20px;
    color: #d6d6d6;
}

.logo-holder {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.4;
}

    .logo-holder .log {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

        .logo-holder .log img {
            position: relative;
            width: 100%;
            height: 100%;
            opacity:0.5;
        }

.box-holder {
    position: relative;
    width: 100%;
    text-align: center;
    margin: 0 auto 20px;
    box-shadow: 0px 0px 10px -4px #333;
}

    .box-holder:hover .overlayer {
        display: block;
        transition: top 5s;
    }

        .box-holder:hover .overlayer.ol-1 {
            background: rgba(8, 204, 224, 0.75);
        }
        .box-holder:hover .overlayer.ol-2 {
            background: rgba(101, 8, 224, 0.75);
        }
        .box-holder:hover .overlayer.ol-3 {
            background: rgba(224, 118, 8, 0.75);
        }
        .box-holder:hover .overlayer.ol-4 {
            background: rgba(224, 8, 188, 0.75);
        }
        .box-holder:hover .overlayer.ol-5 {
            background: rgba(224, 8, 108, 0.75);
        }
        .box-holder:hover .overlayer.ol-6 {
            background: rgba(224, 8, 8, 0.75);
        }
        .box-holder:hover .overlayer.ol-7 {
            background: rgba(102 ,175, 208 , .80)
        }

.image {
    display: block;
    width: 250px;
    height: 250px;
    padding: 5px;
    margin: auto;
}

.overlayer {
    background: rgba(172, 172, 172,0.8);
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    display: none;
    transition: opacity 0.5s linear;
}

.text {
    color: white;
    font-size: 20px;
    position: absolute;
    overflow: hidden;
    /*top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);*/
}

    .text p {
        padding: 50px 20px;
        text-align: justify;
        font-size: 16px;
    }

.free, .Notfree {
    width: 100%;
    margin: 30px auto;
    text-align: center;
}

    .free tr th, .Notfree tr th {
        text-align: center !important;
        font-weight: bold;
        font-size: 25px;
        color: #fff;
    }

    .free tr td, .free tr th,
    .Notfree tr td, .Notfree tr th {
        /*padding: 10px;*/
        padding: 8px;
        color: #5f5f5f;
    }

    .free tr:nth-child(odd) {
        background-color: #f2f2f2;
    }

    .free tr:nth-child(even) {
        background-color: #fefefe;
    }

    .Notfree tr:nth-child(odd) {
        background-color: #f2f2f2;
    }

    .free tr:nth-child(even) {
        background-color: #fefefe;
    }

    .free .icon, .Notfree .icon {
        /*font-size: 40px;*/
        font-size: 30px;
    }

.lbl-code {
    font-size: 13px;
    float: right;
    padding: 8px 0;
    background-color: #FED000;
    border-radius: 5px;
    width: 100%;
}

.txt-code {
    float: right;
    border: 1px solid #9e9e9e;
    padding: 6px;
    width: 100%;
}

.btn-code {
    float: right;
    padding: 6px !important;
    width: 100%;
}

.bank-pay {
    border: 1px solid #acacac;
    border-radius: 5px;
    cursor:pointer;
}

    .bank-pay:hover {
        box-shadow: #acacac 0px 0px 7px 2px;
    }

.type {
    margin: auto;
}

    .type a {
    }

        .type a .tp {
            font-size: 30px;
            color: #fff;
            padding: 0 10px;
        }

        .type a img {
            height: 60px;
            margin: 10px;
        }

.version-box {
    background-color: #efefef;
    border: 2px solid #acacac;
    padding: 10px 20px;
    border-radius: 11px;
}

    .version-box label {
        padding: 20px;
        /*font-size: 20px;*/
        font-size: 17px;
    }

    .version-box .version-date {
        color: #a94442;
    }

    .version-box .version-icon {
        float: right;
    }

        .version-box .version-icon img {
            height: 50px;
            width: 50px;
            margin: 5px auto;
        }

    .version-box ul {
        list-style-type: circle;
    }

        .version-box ul li {
            color: #31708f;
            font-size: 15px;
            line-height: 30px;
        }

.SideMenu {
    list-style: none;
}

    .SideMenu li {
        list-style: none;
        float: right;
        width: 100%;
    }

        .SideMenu li a {
            border-bottom: 1px solid #efefef;
            background-color: #3b6884;
            color: #efefef;
            width: 100%;
            float: right;
        }
            .SideMenu li a:hover {
                background-color: #076eaf;
            }

            .SideMenu li a i {
                padding: 10px;
                font-size: 20px;
            }

.user {
    position: relative;
}

    .user .user-Image {
    }

        .user .user-Image .user-image-holder {
            border: 2px solid #387eaa;
            height: 120px;
            border-radius: 24px;
            width: 120px;
            overflow: hidden;
            margin: auto;
        }

            .user .user-Image .user-image-holder img {
                width: 100%;
            }

    .user .user-Info {
    }

        .user .user-Info .info-item {
            width: 100%;
            float: right;
            margin: 0px 0px 5px;
        }

            .user .user-Info .info-item label {
                float: right;
            }

            .user .user-Info .info-item h4 {
                float: right;
                margin: 2px 10px;
            }

    .user .user-item {
        /*width: 50px;*/
        width: 85px;
        margin: auto;
        height: 50px;
        border-radius: 30px;
        color: #fff;
        /*font-size: 25px;*/
        font-size: 20px;
        line-height: 55px;
    }

.bg-slider {
    background-color: rgba(58, 58, 58,0.1);
    position: absolute;
    left: 5px;
    bottom: 5px;
}

    .bg-slider ul {
        list-style: none;
    }

        .bg-slider ul li {
            float: left;
            padding: 5px 10px 0;
            font-size: 17px;
        }

            .bg-slider ul li a {
                color: #3b6884;
            }

.gray-card {
    background-color: #8e8c86;
}


.blue-card {
    background-color: #558fc8;
}


.green-card {
    background-color: #1da448;
}

.red-card {
    background-color: #d53d39;
}
.purple-card {
    background-color: #9b5fca;
}

.card {
    /*float: right;
    padding: 10px;
    color: #fff !important;*/
    display: table;
    padding: 10px;
    color: #fff !important;
    margin: auto;
}

.num-holder {
    width: 100%;
    background-color: #7ac8ea;
    padding: 10px;
    font-size: 20px;
    color: #fff;
    border-radius: 8px;
}

.inchangable {
    color: #ac2925 !important;
}

    .inchangable i {
        font-size: 25px;
    }

.changable {
    color: #398439 !important;
}

    .changable i {
        font-size: 25px;
    }

.card-code p {
    padding: 10px 10px 0;
}

.inner-logo {
    height: 60px;
    width: 60px;
    margin: 10px;
    position: absolute;
}

.inner-navbar {
    margin: auto 100px auto 0 !important;
}

    .inner-navbar .hvr-underline-reveal {
        color: #b6c6d4;
    }

    .inner-navbar li a {
        padding: 30px 15px !important;
        color: #b6c6d4;
    }

        .inner-navbar li a:hover {
            background-color: transparent !important;
            color: #fff;
        }

.chngebtn {
    width: 100%;
    height: 70px;
    font-size: 26px;
}

.free-fee {
    color: #c50404;
    font-weight: bold;
    font-size: 18px;
}

.sum {
    font-weight: bold;
    font-size: 18px;
}


.collapse-header {
    background-color: #eaf0f3;
    width: 100%;
    padding: 15px 0;
    font-weight: bold;
    border: 1px solid #a5b8ce;
    color: #357cca;
    font-size: 17px;
    text-decoration: none;
}

.search-result-item {
    background: #fff;
    border-color: #145B73;
    border-style: solid;
    border-width: 1px 2px 1px 1px;
    float: right;
    border-radius: 0 10px 0 0;
    width: 100%;
}

    .search-result-item:hover {
        box-shadow: #acacac 0px 0px 7px 2px;
    }

    .search-result-item a {
        width: 100%;
        float: right;
        min-height: 130px;
        padding: 10px;
        color: #145B73;
    }

        .search-result-item a span {
            font-weight: bold;
        }

        .search-result-item a p {
            margin: 5px auto;
            font-style: italic;
            padding: 10px 0;
        }

.breadcrumb-map {
    color: #145B73;
    font-size: 18px;
}

.btn-DarkGreen {
    background-color: #069c74;
}

.btn-MidGreen {
    background-color: #67D1A5;
}

.btn-LightGreen {
    background-color: #8BD167;
}

.btn-tag {
    color: #fff;
    height: 45px;
    width: 100%;
}

.tbl-tags {
    font-size: 14px;
    border: #7bb776 !important;
}

    .tbl-tags th {
        font-weight: bold;
        font-size: 16px;
        text-align: center;
        background-color: #2ca750;
        color: #efefef;
    }

    .tbl-tags td {
        color: #447957;
    }

    .tbl-tags tr {
        cursor: pointer;
    }

        .tbl-tags tr:nth-child(odd) {
            background-color: #c9f1b4;
        }

        .tbl-tags tr:nth-child(even) {
            background-color: #8cd466;
        }

.tag-page-title {
    background-color: #efefef;
    padding: 20px 0;
    color: #585858;
    font-weight: bold;
    border: 1px solid #585858;
}

.tagName {
    padding: 10px;
    background: #96bfe4;
    float: right;
    width: 100%;
    border-radius: 5px;
    color: #072f63;
}

.step-box {
    float: right;
    width: 100%;
    background-color: #ddf4f9;
}

    .step-box i {
        opacity: 0.5;
        font-size: 54px;
        color: #0a8ab1;
        margin: 10px 0;
    }

    .step-box h4 {
        color: #0a8ab1;
    }

    .step-box label {
        font-size: 20px;
        width: 100%;
        background-color: #1babd6;
        padding: 10px;
        float: right;
        color: #ffffff;
    }

    .step-box h5 {
        font-weight: bold;
    }

    .step-box p {
        display: block;
        color: #1babd6;
    }


        .step-box p i {
            font-style: normal;
            font-size: 18px;
            opacity: 1;
        }

    .step-box:hover {
        box-shadow: 0px 0px 10px -4px #333;
    }

.tbl-personel {
    font-size: 12px;
    text-align: center;
    vertical-align: middle;
}

    .tbl-personel tr {
        cursor: pointer;
    }

.guide {
    list-style: none;
    padding: 0;
}

    .guide li {
        line-height: 25px;
    }

    .guide i {
        padding: 0px 10px;
    }

.tbl-insuranse thead th,
.tbl-insuranse tbody td {
    font-size: 13px;
    vertical-align: middle !important;
    text-align: center;
}

    .tbl-insuranse tbody td img {
        height: 60px;
        width: 60px;
        border: 1px solid #333;
    }

.tbl-insuranse tr.unknown {
    background-color: #f9e4e4 !important;
}

.param-Title {
    background-color: #dbe9f1;
    color: #377394;
}

.param-Value {
    background-color: #ceefe8;
    color: #0a8686;
}

.param-TotalTitle {
    background-color: #f9f0f2;
    color: #9c1a5c;
}

.param-TotalValue {
    background-color: #f9f0f2;
    color: #9c1a5c;
}

.btn-disk a {
    width: 100%;
    padding: 10px;
    float: right;
    border-radius: 10px;
    color: #fff;
}

    .btn-disk a:hover {
        box-shadow: 0px 0px 10px 0px #333;
    }

.text-darkpink {
    color: #D74061;
}

.text-darkyellow {
    color: #FCB239;
}

.text-darkperpul {
    color: #6D5B97;
}

.text-darkblue {
    color: #1180AE;
}

.text-darkorange {
    color: #F37A29;
}

.text-darkgreen {
    color: #88B14B;
}

.text-lightpurple {
    color: #C589B5;
}

.text-darkred {
    color: #750D0A;
}

.text-lightred {
    color: #FF0000;
}

.text-midred {
    color: #BF0000;
}

.text-null {
    color: #758B97;
}

.filter {
    list-style: none;
    margin: auto;
}

    .filter li {
        display: inline;
        float: right;
        cursor: pointer;
    }

.icon-flt {
    width: 30px;
    height: 30px;
    border: 1px solid #cccccc;
    text-align: center;
    vertical-align: middle;
    margin-left: 3px;
    margin-bottom: 3px;
}

    .icon-flt i {
        margin: 5px;
    }

.wizard-title {
    line-height: 19px;
    font-weight: bold;
}

.nav-link i {
    font-size: 20px;
}

.cl1 {
    background-color: #9A97B4;
}

.cl2 {
    background-color: #747496;
}

.cl3 {
    background-color: #8CA0C1;
}

.cl4 {
    background-color: #47A7B3;
}

.cl5 {
    background-color: #efe735;
    color: #8F9897 !important;
}

.cl6 {
    background-color: #2E4E74;
}

.cl7 {
    background-color: #803266;
}

.cl {
    width: 100%;
    color: #ececec;
}

    .cl:hover {
        color: #ececec !important;
        box-shadow: 0px 0px 20px -4px #333;
    }

.lbl-OK {
    width: 100%;
    color: #ececec;
    background-color: #00a222;
    padding: 6px;
    border-radius: 20px;
}

.lbl-NotOK {
    width: 100%;
    color: #fff;
    padding: 6px;
    background-color: #e00707;
    border-radius: 20px;
}

.account {
    display: inline-block;
    background-color: #ececec;
    color: #7b7b7b;
    border-radius: 10px;
}

    .account:hover {
        box-shadow: 0px 0px 20px -4px #333;
    }

    .account label {
        margin: 5px auto 3px;
        font-size: 12px;
    }

        .account label.Name {
            margin: 5px auto 3px;
            font-size: 20px;
        }

    .account img {
        margin: 5px;
        width: 65%;
        max-height: 170px;
        min-height: 170px;
    }
span.leaved {
    content: '*';
    background-color: #fd405b;
    width: 30px;
    height: 30px;
    position: absolute;
    border-radius: 0 13px 0 13px;
    z-index: 1;
    cursor: no-drop;
}
    span.leaved:hover {
        background-color: black;
    }


.disabledTab {
    pointer-events: none;
    cursor: no-drop;
}

.office-state-true {
    color: #5daf33;
    font-size: 23px;
}

.office-state-false {
    color: #c10e0e;
    font-size: 23px;
}

.office-title {
}

    .office-title strong {
        font-size: 15px;
        color: #808080;
    }

    .office-title label {
        font-size: 23px;
    }

.office-item {
    border: 2px solid #acacac;
    float: right;
    width: 100%;
    padding: 20px 0;
    background-color: #fff;
}

    .office-item label {
        font-size: 20px;
    }

    .office-item i {
        font-size: 20px;
    }

.office-color-m1 {
    color: #343458;
}

.office-color-m2 {
    color: #2C3764;
}

.office-color-m3 {
    color: #223C5F;
}

.office-color-m4 {
    color: #1D3F5A;
}

.office-color-m5 {
    color: #BFD9DA;
}

.office-color-m6 {
    color: #0C474F;
}

.office-color-m7 {
    color: #004F4A;
}

/*.tab-content {
            float: right;
            width: 100%;
            border-bottom: 1px solid #ddd;
            border-right: 1px solid #ddd;
            border-left: 1px solid #ddd;
        }*/

.notic {
    margin: 7px auto 0;
    float: right;
    font-size: 12px;
    color: #fd5555;
    padding: 0 5px 0 0;
}

.lbl-pr {
    font-size: 14px;
    padding: 5px;
    font-weight: bold;
}

.text-warning {
    color: #fed000;
}

.btn-refresh {
    position: absolute;
    left: 10px;
    top: 15px;
    background-color: transparent;
    border: 1px solid #fff;
    padding: 9px;
    border-radius: 23px;
}

.report-item-employee {
    float: right;
    border: 2px solid #0f8a72;
    width: 100%;
    background-color: #efefef;
    color: #0f8a72;
    padding: 25px;
    font-size: 60px;
}

    .report-item-employee:hover i, .report-item-manager:hover i,
    .report-item-employee:hover h4, .report-item-manager:hover h4 {
        color: #333;
    }

    .report-item-manager:hover, .report-item-employee:hover {
        border: 2px solid #333;
        box-shadow: 0px 0px 10px -4px #333;
    }

.report-item-manager {
    float: right;
    border: 2px solid #a53d94;
    width: 100%;
    background-color: #efefef;
    color: #a53d94;
    padding: 25px;
    font-size: 60px;
}

.tbl-report tbody td img {
    height: 60px;
    width: 60px;
    border: 1px solid #333;
}

.btn-refresh {
    position: absolute;
    left: 10px;
    top: 15px;
    background-color: transparent;
    border: 1px solid #fff;
    padding: 9px;
    border-radius: 23px;
}

.timeline__item--left:after {
    background-image: url('../Image/Logo-medium.png') !important;
}

.PunchCard-MenuItem {
    padding: 10px 0;
    /*background: #63c2de !important;*/
    background: #045459 !important;
    height: auto;
}

    .PunchCard-MenuItem img {
        height: 40px;
        width: 40px;
        margin-left: 5px;
    }
.profile-username {
    font-size: 11px;
    color: #f9f9cc;
    font-family: sans-serif;
}
.lblConfirm {
    background-color: #0cbb70;
    display: block;
    padding: 11px;
    font-size: 14px;
    width: 100%;
    color: #fff;
}

.bg-lightgray {
    background-color:#f1f1f1 !important;
}

.red {
    color: red;
}

.blue {
    color: blue;
}

.purple {
    color: purple;
}

.lightBlue {
    color: #406d94;
}

.orange {
    color: #FF7600;
}

.pink {
    color: #CD13A5;
}

.black {
    color: #000000;
}

.white {
    color: #ffffff;
}
.darkyellow {
    color: #FED000;
}
.yellow {
    color: yellow;
}
.green {
    color: forestgreen;
}
img.reloadCaptcha {
    cursor: pointer;
    border: 1px solid #66afd0;
    border-radius: 3px;
}

.RCN-Code {
    direction: ltr;
    text-align: left;
    float: left;
    font-family: Arial,Times !important;
    color: #0a90c4;
}

#card2cardvalidations .field-validation-error {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
    background-color: #d9534f;
}



section.footer.fixme {
    position: fixed;
    left: 0px;
    bottom: 0px;
    height: 50px;
    width: 100%;
    padding-top:0;
    z-index:2;
    /*background: #999;*/
    /*
    IE 6    
    position: absolute;
    top: expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');*/
}


.badge.custom-menu-badge {
    color: white;
    background-color: #ed3b54;
    padding: 7px 11px 7px 9px;
    border-radius: 25px;
    text-align: center;
    margin-top: 5px;
    margin-left: 14px;
    font-size: 15px;
}

.myhand, .make-full-screen {
    cursor: pointer;
}


.blink_me_2 {
    animation: blinker .5s linear;
    animation-iteration-count: 2;
}

.blink_me_3 {
    animation: blinker .8s linear;
    animation-iteration-count: 3;
}

.blink_me_5 {
    animation: blinker 2s linear;
    animation-iteration-count: 5;
}

.blink_me_10 {
    animation: blinker 2s linear;
    animation-iteration-count: 10;
}

.blink_me {
    animation: blinker 1.5s linear;
    animation-iteration-count: infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}






.twPc-bg {
    background-image: url("/Assets/img/team/600x200.jpg");
    background-position: 0 50%;
    background-size: 100% auto;
    border-bottom: 1px solid #e1e8ed;
    border-radius: 4px 4px 0 0;
    /*height: 95px;*/
    width: 100%;
}

.dynamic-twPc-1 {
    background-image: url("/Assets/img/team/600x200-1.png") !important;
}

.dynamic-twPc-2 {
    background-image: url("/Assets/img/team/600x200-2.png") !important;
}

.dynamic-twPc-3 {
    background-image: url("/Assets/img/team/600x200-3.png") !important;
}

.dynamic-twPc-4 {
    background-image: url("/Assets/img/team/600x200-4.png") !important;
}

.dynamic-twPc-5 {
    background-image: url("/Assets/img/team/600x200-5.png") !important;
}

.dynamic-twPc-6 {
    background-image: url("/Assets/img/team/600x200-6.png") !important;
}

.dynamic-twPc-7 {
    background-image: url("/Assets/img/team/600x200-7.png") !important;
}

.dynamic-twPc-8 {
    background-image: url("/Assets/img/team/600x200-8.png") !important;
}

.dynamic-twPc-9 {
    background-image: url("/Assets/img/team/600x200-9.png") !important;
}

.dynamic-twPc-10 {
    background-image: url("/Assets/img/team/600x200-10.png") !important;
}

.dynamic-twPc-11 {
    background-image: url("/Assets/img/team/600x200-11.png") !important;
}

.dynamic-twPc-12 {
    background-image: url("/Assets/img/team/600x200-12.png") !important;
}

.dynamic-twPc-13 {
    background-image: url("/Assets/img/team/600x200-13.png") !important;
}

.dynamic-twPc-14 {
    background-image: url("/Assets/img/team/600x200-14.png") !important;
}

.dynamic-twPc-15 {
    background-image: url("/Assets/img/team/600x200-15.png") !important;
}

.dynamic-twPc-16 {
    background-image: url("/Assets/img/team/600x200-16.png") !important;
}

.dynamic-twPc-17 {
    background-image: url("/Assets/img/team/600x200-17.png") !important;
}

.dynamic-twPc-18 {
    background-image: url("/Assets/img/team/600x200-18.png") !important;
}

.dynamic-twPc-19 {
    background-image: url("/Assets/img/team/600x200-19.png") !important;
}

.dynamic-twPc-20 {
    background-image: url("/Assets/img/team/600x200-20.png") !important;
}

.dynamic-twPc-21 {
    background-image: url("/Assets/img/team/600x200-21.png") !important;
}

.dynamic-twPc-22 {
    background-image: url("/Assets/img/team/600x200-22.png") !important;
}

.dynamic-twPc-23 {
    background-image: url("/Assets/img/team/600x200-23.png") !important;
}

.dynamic-twPc-24 {
    background-image: url("/Assets/img/team/600x200-24.png") !important;
}

.dynamic-twPc-25 {
    background-image: url("/Assets/img/team/600x200-25.png") !important;
}

.dynamic-twPc-26 {
    background-image: url("/Assets/img/team/600x200-26.png") !important;
}

.dynamic-twPc-27 {
    background-image: url("/Assets/img/team/600x200-27.png") !important;
}

.dynamic-twPc-28 {
    background-image: url("/Assets/img/team/600x200-28.png") !important;
}

.dynamic-twPc-29 {
    background-image: url("/Assets/img/team/600x200-29.png") !important;
}

.dynamic-twPc-30 {
    background-image: url("/Assets/img/team/600x200-30.png") !important;
}

.dynamic-twPc-31 {
    background-image: url("/Assets/img/team/600x200-31.png") !important;
}

.dynamic-twPc-32 {
    background-image: url("/Assets/img/team/600x200-32.png") !important;
}

.dynamic-twPc-33 {
    background-image: url("/Assets/img/team/600x200-33.png") !important;
}

.dynamic-twPc-34 {
    background-image: url("/Assets/img/team/600x200-34.png") !important;
}

.dynamic-twPc-35 {
    background-image: url("/Assets/img/team/600x200-35.png") !important;
}

.dynamic-twPc-36 {
    background-image: url("/Assets/img/team/600x200-36.png") !important;
}

.dynamic-twPc-37 {
    background-image: url("/Assets/img/team/600x200-37.png") !important;
}

.dynamic-twPc-38 {
    background-image: url("/Assets/img/team/600x200-38.png") !important;
}



.dyna-twT-28,
.dyna-twT-29,
.dyna-twT-30,
.dyna-twT-31,
.dyna-twT-36,
.dyna-twT-26,
.dyna-twT-13,
.dyna-twT-14,
.dyna-twT-15,
.dyna-twT-16,
.dyna-twT-17,
.dyna-twT-18,
.dyna-twT-19,
.dyna-twT-20,
.dyna-twT-21,
.dyna-twT-22,
.dyna-twT-2,
.dyna-twT-3,
.dyna-twT-4,
.dyna-twT-5,
.dyna-twT-37 {
    color: yellow;
}

.dyna-twT-1,
.dyna-twT-6,
.dyna-twT-7,
.dyna-twT-8,
.dyna-twT-9,
.dyna-twT-10,
.dyna-twT-11,
.dyna-twT-12,
.dyna-twT-23,
.dyna-twT-24,
.dyna-twT-25,
.dyna-twT-27,
.dyna-twT-32,
.dyna-twT-33,
.dyna-twT-34,
.dyna-twT-35 {
    color: navy;
}

.dyna-twT- {
    color: white;
}





.ltr-text {
    direction: ltr;
    text-align: left;
}



.RCN-Code {
    direction: ltr;
    text-align: left;
    float: left;
    font-family: Arial,Times !important;
    /*color: #0a90c4;*/
}


.jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-content {
    min-height: 50px;
}


.top-curve {
    border-radius: 60px 60px 0px 0px !important;
}
.text p.top-curve {
    padding: 50px 45px
}
.overlayer.top-curve {
    background: rgba(74, 110, 170, 0.7) ;
}

div.rate-me {
    border: 0;
}
    div.rate-me span {
        padding: 6px;
        cursor: pointer;
        /*font-size: 20px;*/
        /*transition-duration: 0.2s;*/
    }
        div.rate-me span.selected {
            font-size: 30px;
        }
    div.rate-me span:after {
        content:' '
    }

#main {
    margin-bottom: 50px;
}

.ui-datepicker-today .ui-state-default {
    background: #fff1a7 !important; /*override*/
}

.anime-container {
}

.slogan {
    position: absolute;
    padding-top: 70px;
    left: 37%;
    text-align: center;
}

.anime-container .animeitem {
    position: relative;
    float: right;
    top: 36px;
    right: 100px;
}

    .anime-container .animeitem.rm {
        background: url(/assets/img/rightman2.png?v=0.4);
        width: 925px;
        height: 518px;
        right: 50px;
        zoom: 0.6;
        top: 50px;
    }

    .anime-container .animeitem.lw {
        background: url(/assets/img/leftwoman2.png?v=0.4);
        width: 825px;
        height: 519px;
        right: -80px;
        zoom: 0.6;
        float: left;
        margin-bottom: 12px;
        /*top: 48px;*/
    }



label.bg-light-purple {
    background-color: rgba(222, 170, 232, 0.3);
}
    label.bg-light-purple.small {
        background-color: rgba(222, 170, 232, 0.3);
        font-size: 90%;
    }

label.bg-light-pink {
    background-color: rgba(224, 94, 196, 0.23);
}

label.bg-light-blue {
    background-color: rgba(147, 197, 216, 0.31);
}

label.bg-light-greenblue {
    background-color: rgba(10, 161, 172, 0.21);
}

#toast-container.toast-bottom-full-width > div,
#toast-container.toast-top-full-width > div {
    width: 85% !important;
}

.bounceImage {
    animation: bounceTrans 6s .0s;
    animation-iteration-count:infinite;
    /*transform: scale(0.85);*/
}

@keyframes bounceTrans {
    0% {
        transform: scale(1.0);
        /*opacity: 1*/
    }

    25% {
        transform: scale(1.1);
        /*opacity: .7;*/
    }

    50% {
        transform: scale(1.11);
        /*opacity: .7;*/
    }

    60% {
        transform: scale(1.12);
        /*opacity: 1*/
    }

    80% {
        transform: scale(1.1)
    }

    100% {
        transform: scale(1.0)
    }
}

i.icon-circle-arrow-right {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 12px solid #800a0a;
    padding: 0;
    margin: 0;
    top: 10px;
    position: inherit;
}
    i.icon-circle-arrow-right:hover {
        border-bottom-color:blue;
    }
/* 
    https://css-tricks.com/the-shapes-of-css/ 
    https://css-tricks.com/snippets/css/css-triangle/
*/
i.icon-circle-arrow-left {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 12px solid #800a0a;
    padding: 0;
    margin: 0;
    top: 11px;
    position: inherit;
    left: 10px;
}
    i.icon-circle-arrow-left:hover {
        border-top-color: orangered;
    }

img.emoji-rate {
   max-width:20px; 
}

span.selected img.emoji-rate {
    max-width: 36px;
}


img.emoji-rate.nut {
    border: 12px solid #e0e0e0;
    border-radius: 50%;
}

    img.emoji-rate.nut:hover {
        border: 3px solid #e0e0e0;
    }


img.emoji-rate.inc {
    border: 12px solid #02c702;
    border-radius: 50%;
    
}

    img.emoji-rate.inc:hover {
        border: 3px solid #02c702;
    }

img.emoji-rate.dec {
    border: 12px solid #c70254;
    border-radius: 50%;
    
}

    img.emoji-rate.dec:hover {
        border: 3px solid #c70254;
    }


.form-control.noborder {
    border: 0;
    box-shadow: none;
}


/*.punch-chat-href {
    direction: ltr;
    float: left;
}
    .punch-chat-href:before {
        content: "\f0c1";
        font-family: 'Font Awesome 5 Free';
        margin-right: 6px;
    }*/

.panel.panel-lightBlue.Maximizer .panel-heading {
    cursor: col-resize;
}

img.thumbsrate {
    width: 24px;
    cursor: pointer;
    margin: 5px;
    /*-webkit-filter: grayscale(100%);
    filter: grayscale(100%);*/
    opacity: 0.5;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
    img.thumbsrate:hover {
        /*-webkit-filter:none;
        filter:initial;*/
        opacity: 1;
    }
    img.thumbsrate.doneRate {
        /*-webkit-filter:none;
        filter:initial;*/
        opacity: 1;
        cursor: default;
    }

.tableFixHead {
    overflow-y: auto;
    height: 100px;
    /*https://stackoverflow.com/a/47923622*/
}

    .tableFixHead thead th {
        position: sticky;
        top: 0;
        background-color: aliceblue;
        z-index: 1;
    }


.text-better-spacing {
    letter-spacing: 2px;
}
    .text-better-spacing .verry-better {
        letter-spacing: 4px;
    }