/* Minification failed. Returning unminified contents.
(1109,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1110,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1111,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1112,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1113,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1114,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1115,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1116,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1117,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1118,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1175,19): run-time error CSS1039: Token not allowed after unary operator: '-pading-value'
(1181,30): run-time error CSS1039: Token not allowed after unary operator: '-pading-value'
(1188,25): run-time error CSS1039: Token not allowed after unary operator: '-font-st'
(1209,27): run-time error CSS1039: Token not allowed after unary operator: '-pading-value'
(1215,31): run-time error CSS1039: Token not allowed after unary operator: '-pading-value'
(1219,25): run-time error CSS1039: Token not allowed after unary operator: '-font-st'
(1228,21): run-time error CSS1039: Token not allowed after unary operator: '-gray-color'
(1229,25): run-time error CSS1039: Token not allowed after unary operator: '-font-st'
(1241,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1242,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1250,21): run-time error CSS1039: Token not allowed after unary operator: '-width-checkmark'
(1251,22): run-time error CSS1039: Token not allowed after unary operator: '-height-checkmark'
(1262,17): run-time error CSS1039: Token not allowed after unary operator: '-width-checkmark'
(1263,18): run-time error CSS1039: Token not allowed after unary operator: '-height-checkmark'
(1297,32): run-time error CSS1039: Token not allowed after unary operator: '-color-btn-blue'
(1299,25): run-time error CSS1039: Token not allowed after unary operator: '-font-st'
(1305,22): run-time error CSS1039: Token not allowed after unary operator: '-height-btn'
(1318,25): run-time error CSS1039: Token not allowed after unary operator: '-font-lg'
(1332,20): run-time error CSS1039: Token not allowed after unary operator: '-pading-value'
(1336,29): run-time error CSS1039: Token not allowed after unary operator: '-pading-value'
(1337,30): run-time error CSS1039: Token not allowed after unary operator: '-pading-value'
(1344,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1377,34): run-time error CSS1039: Token not allowed after unary operator: '-padding-left-intput'
(1386,25): run-time error CSS1039: Token not allowed after unary operator: '-font-st'
(1403,36): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(1415,25): run-time error CSS1039: Token not allowed after unary operator: '-gray-color'
(1419,29): run-time error CSS1039: Token not allowed after unary operator: '-gray-color'
(1431,29): run-time error CSS1039: Token not allowed after unary operator: '-font-sm'
(1440,32): run-time error CSS1039: Token not allowed after unary operator: '-padding-left-intput'
(1445,32): run-time error CSS1039: Token not allowed after unary operator: '-padding-left-intput'
(1446,33): run-time error CSS1039: Token not allowed after unary operator: '-padding-left-intput'
(1455,28): run-time error CSS1039: Token not allowed after unary operator: '-padding-left-intput'
(1456,25): run-time error CSS1039: Token not allowed after unary operator: '-font-st'
(1465,25): run-time error CSS1039: Token not allowed after unary operator: '-font-sm'
(1482,30): run-time error CSS1039: Token not allowed after unary operator: '-font-st'
(1525,26): run-time error CSS1039: Token not allowed after unary operator: '-font-sm'
(1535,21): run-time error CSS1039: Token not allowed after unary operator: '-color-btn-blue'
(1547,30): run-time error CSS1039: Token not allowed after unary operator: '-font-md'
(1548,21): run-time error CSS1039: Token not allowed after unary operator: '-color-btn-blue'
(1559,26): run-time error CSS1039: Token not allowed after unary operator: '-font-md'
(1575,21): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(1576,25): run-time error CSS1039: Token not allowed after unary operator: '-font-sm'
(1584,25): run-time error CSS1039: Token not allowed after unary operator: '-font-lg'
(1609,36): run-time error CSS1039: Token not allowed after unary operator: '-color-btn-blue'
(1613,36): run-time error CSS1039: Token not allowed after unary operator: '-color-warning'
(1623,20): run-time error CSS1039: Token not allowed after unary operator: '-pading-value'
(1627,21): run-time error CSS1039: Token not allowed after unary operator: '-font-st'
(1645,26): run-time error CSS1039: Token not allowed after unary operator: '-font-st'
(1728,26): run-time error CSS1039: Token not allowed after unary operator: '-font-st'
(1737,21): run-time error CSS1039: Token not allowed after unary operator: '-color-btn-blue'
(1741,25): run-time error CSS1039: Token not allowed after unary operator: '-font-st'
(1743,21): run-time error CSS1039: Token not allowed after unary operator: '-color-btn-blue'
(1752,26): run-time error CSS1039: Token not allowed after unary operator: '-font-st'
(1757,21): run-time error CSS1039: Token not allowed after unary operator: '-color-btn-blue'
(1800,21): run-time error CSS1039: Token not allowed after unary operator: '-font-sm'
(1810,21): run-time error CSS1039: Token not allowed after unary operator: '-font-sm'
(2325,31): run-time error CSS1046: Expect comma, found '247'
(2325,38): run-time error CSS1046: Expect comma, found ')'
 */
/*top menu*/
.class-top-content {
    width: 100%;
    /*background-color: white;*/
    height: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #328ABA;
    font-size: 23px;
    font-family: 'MontserratSemiBold';
    z-index: 2;
    /*box-shadow: 0px 0px 4px 0px #101010;*/
}

.themeVideo-background {
    height: 90%;
}

#btnMenu {
    cursor: pointer;
    width: 100px;
}

div#box-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -30px;
}

/*.class-img-menu-top {
    height: 70px;
    width: 100%;
    margin-left: 4%;
    display: flex;*/
/*flex-direction: column;
    justify-content: center;*/
/*align-items: center;
}*/

.brick {
    height: 40px;
    background-color: #cccccc;
    width: 2px;
}

/*.class-img-menu-top span {
    font-size: 13px;
    font-weight: bold;
    color: #101010;
}*/

.img-homepage {
    height: 60%;
    width: auto;
    /*left: 4%;*/
    display: flex;
    position: absolute;
    cursor: pointer;
}

.img-dcr {
    height: 80%;
    width: auto;
    display: flex;
    /*position: absolute;*/
    align-items: center;
}

.img-level {
    height: 80%;
    width: auto;
    right: 2%;
    display: flex;
    position: absolute;
}

.text-level {
    position: absolute;
    top: 50%;
    left: 35%;
    transform: translate(-50%, -50%);
    color: #30BBF2;
}

.class-menu-top {
    top: -60px !important;
}

.class-menu-bottom {
    transform: translate(-50%, 0px);
    transition: 0.4s;
}

.class-menu-rotate {
    transform: rotate(180deg);
}

.text-wordInPage span {
    font-size: 15px;
}

/*-------------------- THEME-----------------------------*/
/*.content-DCRTheme {
    display: flex;
    flex-wrap: wrap;
    width: 100%;*/
/*background-color: #f1f5f8;*/
/*border-radius: 25px;
    padding: 8% 2% 3% 2%;
    max-height: calc(150vh - 70px);
    overflow-y: scroll;
}*/

.content-DCRTheme::-webkit-scrollbar {
    width: 4px;
}

.content-DCRTheme::-webkit-scrollbar-thumb {
    background: #9999997d;
    border-radius: 5px;
    margin: 20px;
}

.content-DCRTheme::-webkit-scrollbar-track {
    background: #EFEFEF;
    border-radius: 5px;
    margin: 20px;
}

.box-item-Theme {
    display: flex;
    min-height: 251px;
    padding: 1%;
}

.item-DCRTheme {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 40px;
    height: 100%;
    width: 100%;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    background-color: white;
    box-shadow: 1px 5px 4px -1px #9E9E9E;
}

.box-img-DCRTheme {
    width: 100%;
    height: 75%;
    position: relative;
    background-position: center;
    background-size: cover;
    border-radius: 30px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Level-Title-DCRTheme {
    display: flex;
    padding-top: 0.5rem;
    height: 25%;
    width: 20rem;
    justify-content: center;
}

.text-Level-DCRTheme {
    background-color: #63e1ff;
    color: white;
    font-size: 28px;
    width: 3rem;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.text-Title-DCRTheme {
    font-size: 15px;
    color: #004e9b;
    font-weight: bold;
    /* padding: 10px 10px 10px 15px; */
    text-align: center;
    font-family: 'Montserrat-Medium';
    width: 14rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
/*-------------------------------LESSON-----------------------------------------*/
.content-DCRLesson {
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    height: 70%;
    margin-top: 5rem;
    max-height: calc(150vh - 70px);
}

.item-Theme-Lesson {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f8f8f8;
    border-radius: 25px;
    padding: 5% 2%;
    height: 100%;
    width: 100%;
}

.box-img-DCRThemeLesson {
    width: 90%;
    min-height: 45%;
    background-position: center;
    background-size: cover;
    border-radius: 30px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.level-Title-DCRThemeLesson {
    background-color: #63e1ff;
    color: white;
    font-size: 28px;
    font-weight: bold;
    border-radius: 5px;
    width: 2.3rem;
    height: 2.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
}

.lesson-block {
    display: flex;
    flex-direction: column;
    background-color: white;
    border-radius: 30%;
    padding: 0;
    /* height: 18.3rem; */
    align-items: center;
    box-shadow: 0px 3px 1px 0px #c0c3c5;
}

.text-Title-DCRThemeLesson {
    font-size: 26px;
    color: #004e9b;
    font-weight: bold;
    padding: 20px 0;
}

.number-DCRLesson {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    background-color: #f8f8f8;
    border-radius: 25px;
    /*padding: 4% 5%;*/
    height: 100%;
    overflow-y: scroll;
    width: 100%;
}

    .number-DCRLesson::-webkit-scrollbar {
        width: 4px;
    }

    .number-DCRLesson::-webkit-scrollbar-thumb {
        background: #9999997d;
        border-radius: 5px;
        margin: 20px;
    }

    .number-DCRLesson::-webkit-scrollbar-track {
        background: #EFEFEF;
        border-radius: 5px;
        margin: 20px;
    }

.item-number-DCRLesson {
    padding: 2% 4%;
    cursor: pointer;
}

.item-cover-lock {
    position: absolute;
    background-color: rgba(81, 89, 89, 0.15);
    height: 97%;
    width: 98%;
    border-radius: 40px;
    top: 2%;
}

.active-lesson {
    background-color: #dfe3e6;
}


/* ------------------------- VERSION  2 ------------------------- */
.video-theme-content {
    /*background-color: #b792dd;*/
    position: relative;
}

.video-theme-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../../Content/images/VideoLesson/bg-image.png');
    background-position: center;
    background-repeat: repeat;
    background-size: cover;
}

.class-img-menu-top {
    height: 10%;
    width: 100%;
    /*margin-left: 4%;*/
    display: flex;
    align-items: center;
}

.ngangNha .class-img-menu-top {
    height: 11vh;
    width: 100%;
    /*margin-left: 4%;*/
    display: flex;
    align-items: center;
}

.button-back {
    display: flex;
    align-items: center;
    width: 45px;
    margin-right: 10px;
}

.img-back {
    width: 100%;
    height: auto
}

.title-serie-app {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92%;
}

.ngangNha .title-serie-app {
    width: 80%;
}


.name-series-text {
    font-size: 16px;
    color: white;
    font-family: 'MontserratSemiBold';
    text-shadow: 3px 3px 0 rgba(0,0,0,0.1);
}

.ngangNha .name-series-text {
    width: 20vw;
    overflow: hidden; /* make sure it hides the content that overflows */
    white-space: nowrap; /* don't break the line */
    text-overflow: ellipsis; /* give the beautiful '...' effect */
    font-size: 14px;
    color: white;
    font-family: 'MontserratSemiBold';
    text-shadow: 3px 3px 0 rgba(0,0,0,0.1);
}

.img-next-arrow {
    margin-left: 20px;
}

.ngangNha .img-next-arrow {
    margin: 3vw;
}

.name-theme-text {
    color: white;
    padding-left: 20px;
    font-size: 15px;
    font-family: 'MontserratSemiBold';
    white-space: nowrap;
    text-shadow: 3px 3px 0 rgba(0,0,0,0.1);
}




.themeVideo-content {
    display: flex;
    flex-direction: column;
    padding: 5% 4% 2% 4%;
    border-top-left-radius: unset;
    border-top-right-radius: unset;
    height: 100%;
}

.ngangNha .themeVideo-content {
    display: flex;
    flex-direction: column;
    padding: 5% 4% 2% 4%;
    border-top-left-radius: 70px;
    border-top-right-radius: 70px;
    height: 100%;
}

.themeVideo-content-list-theme {
    position: relative;
    padding: 0;
    /* overflow-y: hidden; */
    /* max-height: calc(80vh - 18px); */
    height: 100%;
    /*border: 1px solid gray;*/
    display: flex;
    align-items: center;
    justify-content: center;
}

.parent-content-DCRTheme {
    border-radius: unset;
    padding: 0;
    /*overflow-y: scroll;*/
    height: 100%;
    width: 94%;
    z-index: 3;
    /* position: absolute; */
    top: 5%;
    left: 2.5%;
}

.content-DCRTheme {
    height: 100%;
    width: 100%;
    position: relative;
    padding: 0 5%;
}

    .content-DCRTheme .img-background-gray {
        width: 100%;
        height: 100%;
        z-index: -2;
        top: 0;
        position: absolute;
        left: 0;
    }

    .content-DCRTheme .background-white {
        position: absolute;
        width: 100%;
        height: 97%;
        background-color: #F4F4F4;
        top: 0;
        left: 0;
        border-radius: 48px;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 7% 100%, 0 86%);
        z-index: -1;
    }

    /*.content-DCRTheme .img-break-paper {
        position: absolute;
        bottom: 3.4%;
        left: 0%;
        width: 7.5%;
        transform: rotate(4.4deg);
    }*/
    .content-DCRTheme .img-break-paper {
        position: absolute;
        bottom: 3.4%;
        left: 0%;
        width: 7%;
        height: 10vh;
        transform: rotate(0.5deg);
    }

.strikethrough-border {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    justify-content: space-between;
    width: 90%;
    height: 75%;
    display: flex;
    flex-direction: column;
    opacity: 0.05;
    z-index: -1;
}

.strikethrough-line {
    width: 100%;
    /*height: 40%;*/
    border-top: 1px solid black;
}

    .strikethrough-line:last-child {
        border-bottom: 1px solid black;
    }

.ngangNha .border-paperclip {
    position: absolute;
    /*top: 1%;
    left: 1.4%;*/
    /*top: -2.2%;
    left: 1.2%;*/
    top: -3.2%;
    left: 1.4%;
    z-index: 3;
}

.border-paperclip {
    position: absolute;
    top: -1.5%;
    left: 2.4%;
    z-index: 3;
}


.img-paperclip {
    /*width: auto;*/
    width: 8.5vw;
}

.decor-cart-background-top {
    width: 52%;
    height: auto;
    position: absolute;
    /*top: -2.2vw;
    left: 2%;*/
    top: -1.85vw;
    left: 2.2%;
    transform: rotate(-3.06deg);
    z-index: 1;
}

.decor-cart-background-bottom {
    width: 50%;
    height: auto;
    position: absolute;
    bottom: 14%;
    right: 2.5%;
    transform: rotate(-355.65deg);
    z-index: 2;
    max-height: 82%;
}

.lesson-col {
    display: flex;
    /* align-items: center; */
    /* justify-content: center; */
    padding: 2% 3%;
    /* border: 1px solid; */
    height: auto;
}

.lesson-item-block {
    background-color: transparent;
    /* height: 100%; */
    width: 100%;
    /* margin-bottom: 10%; */
    /*height: 20rem;*/
    /*width: 20rem;*/
    /*margin-bottom: 20px;*/
    position: relative;
    cursor: pointer;
    display: flex;
    /* flex-direction: column; */
    /*max-height: 75%;*/
}

.img-lesson-bg-white {
    width: 100%;
    height: 100%;
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    /*object-fit: contain;*/
    /*filter: drop-shadow(12px 13px 0px rgba(3,97,148, 0.2));*/
}

.img-lesson-bg-gray {
    width: 103%;
    height: 103%;
    position: absolute;
    /* transform: rotate(-2deg); */
    top: 0%;
    left: 0%;
    z-index: 1;
}

.img-lesson-bg-chosen {
    width: 110%;
    height: 110%;
    z-index: 1;
    position: absolute;
    top: -3.5%;
    left: -3.5%;
    opacity: 0;
    transition: all 0.3s;
}

.chosen-lesson {
    opacity: 1;
}

.lesson-item-block-detail {
    display: flex;
    width: 100%;
    /*height: 16.9vh;*/
    height:auto;
    background-color: transparent;
    /* position: absolute; */
    /* top: 5%; */
    left: 0;
    z-index: 4;
    padding: 4% 5% 6% 5%;
    flex-direction: column;
    justify-content: space-between;
}

/*.ngangNha .lesson-item-block-detail {
    height: 16.9vw;
}*/

.bg-item-pin {
    width: 100%;
    display: inline-block;
    padding: 1% 0;
}

.bg-pin {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #35ABEB;
    box-shadow: 5px 3px 1px 1px #e7dada00;
}

.bg-left-pin {
    float: left;
}

.bg-right-pin {
    float: right;
}

.lesson-item-name {
    width: 100%;
    text-align: center;
    /* height: 30px; */
}

.lesson-item-name-text {
    font-family: 'MontserratSemiBold';
    color: #036194;
    font-size: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-align: center;
}

.lesson-item-image {
    padding: 3% 0;
    background-color: transparent;
    /*height: 55%;*/
    /* height: 54%; */
    width: 100%;
}

.lesson-item-level-empty {
    width: 5.8vw;
    height: calc(5.8vw*31/25);
}

.ngangNha .lesson-item-level-empty {
    width: 5.8vh;
    height: calc(5.8vh*31/25);
}

.lesson-item-image-detail {
    position: relative;
    width: 100%;
    /* height: 100%; */
    overflow: hidden;
    border-radius: 10px;
}

.img-lesson-bg {
    /* position: absolute; */
    width: 100%;
    height: auto;
    /* top: 0; */
    /* left: 0; */
}

.img-lesson-theme {
    /*position: absolute;*/
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
}

.img-absolute {
    position: absolute;
}

.lesson-item-level {
    padding: 2% 0;
    width: 100%;
    height: auto;
    display: flex;
    align-items: flex-start;
}

.lesson-item-level-detail {
    position: relative;
    width: 5.8vw;
    height: calc(5.8vw*31/25);
    border-radius: 8px;
    background-color: #036194;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 3%;
}

.ngangNha .lesson-item-level-detail {
    position: relative;
    width: 5.8vh;
    height: calc(5.8vh*31/25);
    border-radius: 8px;
    background-color: #036194;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 3%;
}

.lesson-item-level-text {
    color: white;
    font-size: 18px;
    font-family: 'MontserratSemiBold';
}

.img-level-crown {
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
}

.bg-cover-lock {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    height: 104%;
    width: 103%;
    top: 0;
    left: 0;
    border-radius: 15px;
}

.img-cover-lock {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 20%;
    height: auto;
}

.content-DCRTheme-list-lesson {
    height: 97%;
    overflow-y: auto;
    border-radius: 15px;
    padding: 2% 4%;
    padding-bottom: 0;
    z-index: 999;
}
    .content-DCRTheme-list-lesson::-webkit-scrollbar {
        width: 10px;
        cursor: pointer;
    }

    .content-DCRTheme-list-lesson::-webkit-scrollbar-thumb {
        background: #036194;
        border-radius: 5px;
        height: 1px;
        cursor: pointer;
    }

    .content-DCRTheme-list-lesson::-webkit-scrollbar-track {
        background: rgba(3,97,148,0.1);
        border-radius: 5px;
        margin-bottom: 2rem;
        cursor: pointer;
        padding: 0 2px;
        margin-top: 4vw;
    }






@media only screen and (max-width: 1550px) {
    .parent-content-DCRTheme {
        top: 5%;
        left: 2.5%;
    }

    /*.content-DCRTheme {
        top: 5%;
        left: 2.6%;
    }*/

    .content-DCRTheme .background-white {
        border-radius: 48px;
    }

    /*.content-DCRTheme .img-break-paper {
        position: absolute;
        bottom: 3.4%;
        left: 0%;
        width: 7%;
        height: 10vh;
        transform: rotate(2.5deg);
    }*/
    .content-DCRTheme .img-break-paper {
        position: absolute;
        bottom: 3.4%;
        left: 0%;
        width: 7%;
        height: 10vh;
        transform: rotate(0.5deg);
    }

    /*.border-paperclip {
        top: 1%;
        left: 1.4%;
    }*/

    /*.img-paperclip {
        width: auto;
    }*/

    .decor-cart-background-bottom {
        right: 2.5%;
    }

    .lesson-item-block {
        /* height: 25rem; */
        /* width: 90%; */
    }

    .lesson-item-block-detail {
        /* height: 20rem; */
    }

    .lesson-item-image {
        /* height: 70%; */
    }
}

@media only screen and (max-width: 1380px) {
    .parent-content-DCRTheme {
        /* top: 6%; */
        left: 3%;
    }

    /*.content-DCRTheme {
        top: 5%;
        left: 3%;
    }*/

    .content-DCRTheme .background-white {
        border-radius: 14px;
        /*border-bottom-right-radius:14px;*/
    }

    .content-DCRTheme .img-break-paper {
        position: absolute;
        bottom: 3.4%;
        left: 0%;
        width: 7%;
        height: 10vh;
        transform: rotate(0.5deg);
    }

    /*.border-paperclip {
        top: 2%;
        left: 1.2%;
    }*/

    /*.img-paperclip {
        width: 60px;
    }*/

    .decor-cart-background-bottom {
        right: 1.8%;
    }

    .lesson-item-block {
        /* height: 18.5rem; */
        /* width: 95%; */
    }

    .lesson-item-block-detail {
        /* height: 16rem; */
    }

    .lesson-item-image {
        /* height: 55%; */
    }
}

@-moz-document url-prefix() {
    .decor-cart-background-bottom {
        max-height: 80%;
    }
}

.button-eduHome {
    /*padding:2%;*/
    width: 24.2vw;
    height: calc(24.2vw*40/104);
    background-color: #FFFFFF;
    color: #036194;
    font-size: 1rem;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: absolute;
    transform: translateX(-30%) translateY(30%);
    top: 0;
    right: 0;
}

.ngangNha .button-eduHome {
    width: calc(8.4vh *160/36);
    height: 8.4vh;
    background-color: #FFFFFF;
    color: #036194;
    font-size: 1rem;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: absolute;
    transform: translateX(-30%) translateY(10%);
    top: 0;
    right: 0;
}

.list-lesson {
    height: 50%;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    justify-content: center;
}


@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.ttf') format('truetype');
}

@font-face {
    font-family: sf pro display;
    font-style: normal;
    font-weight: 400;
    src: local('SF Pro Display'),url('./fonts/SFPRODISPLAYREGULAR.woff') format('woff')
}

@font-face {
    font-family: sf pro display;
    font-style: italic;
    font-weight: 100;
    src: local('SF Pro Display'),url('./fonts/SFPRODISPLAYULTRALIGHTITALIC.woff') format('woff')
}

@font-face {
    font-family: sf pro display;
    font-style: italic;
    font-weight: 200;
    src: local('SF Pro Display'),url('./fonts/SFPRODISPLAYTHINITALIC.woff') format('woff')
}

@font-face {
    font-family: sf pro display;
    font-style: italic;
    font-weight: 300;
    src: local('SF Pro Display'),url('./fonts/SFPRODISPLAYLIGHTITALIC.woff') format('woff')
}

@font-face {
    font-family: sf pro display;
    font-style: normal;
    font-weight: 500;
    src: local('SF Pro Display'),url('./fonts/SFPRODISPLAYMEDIUM.woff') format('woff')
}

@font-face {
    font-family: sf pro display;
    font-style: italic;
    font-weight: 600;
    src: local('SF Pro Display'),url('./fonts/SFPRODISPLAYSEMIBOLDITALIC.woff') format('woff')
}

@font-face {
    font-family: sf pro display;
    font-style: normal;
    font-weight: 700;
    src: local('SF Pro Display'),url('./fonts/SFPRODISPLAYBOLD.woff') format('woff')
}

@font-face {
    font-family: sf pro display;
    font-style: italic;
    font-weight: 800;
    src: local('SF Pro Display'),url('./fonts/SFPRODISPLAYHEAVYITALIC.woff') format('woff')
}

@font-face {
    font-family: sf pro display;
    font-style: italic;
    font-weight: 900;
    src: local('SF Pro Display'),url('./fonts/SFPRODISPLAYBLACKITALIC.woff') format('woff')
}

* {
}

body {
    padding: 0;
    margin: 0;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-appearance: none !important;
    transition: background-color 5000s ease-in-out 0s;
}

form {
    width:100%;
}


/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/*Turn off eye defaut browser*/
input[type=password]::-ms-reveal,
input[type=password]::-ms-clear {
    display: none;
}

.container-all {
    /*background-image: url(./images/Login_SSO/bg.svg);*/
    background-image: url(./images/Login_SSO/bg2.svg);
    background-repeat: no-repeat;
    background-size: cover;
    justify-content: center;
    width: 100%;
    display: flex;
    flex-wrap:wrap;
    position: relative;
    font-family: "SF Pro Display";
    --font-sm: 12px;
    --font-st: 16px;
    --font-md: 24px;
    --font-lg: 32px;
    --color-btn-blue: #0CA6ED;
    --color-warning: #D32F2F;
    --pading-value: 24px;
    --gray-color: #717171;
    --ratio: calc(1440 / 750);
    --height-btn: 43px;
}

.bg-epub {
    background-image: url(./images/Login_SSO/bg3.png);
}

.copyright {
    width: 100%;
    align-items: center;
    display: flex;
    justify-content: center;
}

.banner-left {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

    .banner-left img {
        height: 100%;
        width: 100%;
    }

.left-side {
    background-image: url("./images/Login_SSO/left_bg.svg");
    left:0;
    top:0;
    position:absolute;
    height:100%;
    width: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    justify-content: center;
    align-items: center;
    display: flex;
}

.right-side {
    /*background-image: url("./images/Login_SSO/right_bg.svg");*/
    min-height: calc(100vh - 20px);
    width: 50%;
    margin-left:auto;
    background-repeat: no-repeat;
    background-size: cover;
    justify-content: center;
    align-items: center;
    display: flex;
    z-index: 999;
}

.box {
    width: 480px;
    border-radius: 16px;
    background-color: white;
    padding: var(--pading-value);
    margin: 10px 0;
}

.header {
    position:relative;
    margin-bottom: calc(var(--pading-value) + 8px);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .header .group-action {
        font-size: var(--font-st);
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        font-weight: 400;
    }

    .header .logo {
        display:block;
        position:absolute;
        top:50%;
        right:0%;
        transform:translateY(-50%);
        width: 95px;
        height: 45px;
        object-fit: contain;
    }

.footer {
    margin-top: calc(var(--pading-value) + 12px);
    display: flex;
    flex-direction: column;
}

    .footer .learn-about {
        margin-top: calc(var(--pading-value) + 12px);
        display: flex;
        justify-content: flex-end;
        align-items: center;
        font-size: var(--font-st);
    }

        .footer .learn-about a {
            text-decoration: none;
            color: #0CA6ED;
        }

    .footer .text-dec-footer {
        color: var(--gray-color);
        font-size: var(--font-st);
    }

    .footer .learn-about img {
        margin-left: 10px;
    }

.wraper-text-rule {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    position: relative;
    --width-checkmark: 18px;
    --height-checkmark: 18px;
}

    .wraper-text-rule a {
        text-decoration: none;
    }

    .wraper-text-rule input[type=checkbox] {
        width: var(--width-checkmark);
        height: var(--height-checkmark);
        margin: 0;
        visibility: hidden;
        border-radius: 6px;
        overflow: hidden;
    }

.checkbox-container {
    position: absolute;
    top: 25%;
    left: 0;
    width: var(--width-checkmark);
    height: var(--height-checkmark);
    background-color: transparent;
    border-radius: 6px;
    border: 1px black solid;
}

.wraper-text-rule input:checked ~ .checkbox-container {
    background-color: #3EB44A;
    border: 1px transparent solid;
}

.checkbox-container::after {
    content: "";
    position: absolute;
    display: none;
    left: 5px;
    top: 0px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.wraper-text-rule input:checked ~ .checkbox-container::after {
    display: block;
}

.content {
}

    .content .btn {
        width: 100%;
        padding: 16px 0;
        background-color: var(--color-btn-blue);
        color: white;
        font-size: var(--font-st);
        border-radius: 6px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        height: var(--height-btn);
    }

        .content .btn:hover, .content .btn:focus, .content .btn.focus {
            color: white;
        }

    .content .step-login {
    }

    .content .title-content {
        display: block;
        /*margin-bottom: calc(var(--pading-value));*/
        font-size: var(--font-lg);
        text-align: start;
        font-weight: 500;
    }

.container-field {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    text-align: center;
    font-weight: 600;
    /*gap: var(--pading-value);*/
    gap: calc(var(--pading-value) + 8px);
}

.pd-left-16 {
    padding-left: calc(var(--pading-value) - 8px) !important;
    padding-right: calc(var(--pading-value) + 16px) !important;
}

.wraper-text-file {
    position: relative;
    width: 100%;
    height: 64px;
    --padding-left-intput: 47px;
}

    .wraper-text-file.group {
        display: flex;
        justify-content: space-between;
        width: 100%;
        gap: 12px;
    }

        .wraper-text-file.group .text-field {
            width: 100%;
        }

        .wraper-text-file.group .input-first-name {
            position: absolute;
            width: 49%;
            height: 100%;
            left: 0;
        }

        .wraper-text-file.group .input-last-name {
            position: absolute;
            width: 49%;
            height: 100%;
            right: 0;
        }

    .wraper-text-file .icon-eye {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        padding-right: calc(var(--padding-left-intput) / 4);
        cursor: pointer;
    }

        .wraper-text-file .icon-eye[data-status="on"] {
            content: url("/Content/images/Login_SSO/eye-slash.svg");
        }

    .wraper-text-file .text-field {
        font-size: var(--font-st);
        border-radius: 12px;
        border: 1px solid #D6D6D6;
        position: absolute;
        box-sizing: border-box;
        left: 0;
        right: 0;
        font-weight: 500;
        line-height: 22px;
        height: 100%;
        width: 100%;
        padding: 20px 15px 0;
    }

        .wraper-text-file .text-field[warning],
        .wraper-text-file .text-field[warning]:focus {
            outline: none !important;
            border: 1px solid var(--color-warning);
            bottom: 0;
        }

            .wraper-text-file .text-field[warning] ~ .input-label-error {
                visibility: visible;
            }

        .wraper-text-file .text-field[disable] {
            pointer-events: none;
            background: url(../Content/images/Login_SSO/account-circle.svg) no-repeat scroll 15px 19px, #0000000D !important;
            border: 1px solid #D6D6D6;
            color: var(--gray-color);
        }

            .wraper-text-file .text-field[disable] ~ .input-label-error {
                color: var(--gray-color);
            }

        .wraper-text-file .text-field:not([warning]):focus {
            outline: none !important;
            border: 1px solid #7FB539;
            bottom: 0;
        }

        .wraper-text-file .text-field:focus ~ .input-label,
        .wraper-text-file .text-field:not(:placeholder-shown) ~ .input-label {
            top: 20%;
            font-size: var(--font-sm);
        }

        .wraper-text-file .text-field:focus ~ .tooltip-password {
            display: flex;
        }

        .wraper-text-file .text-field.icon-account {
            background: url(../Content/images/Login_SSO/account-circle.svg) no-repeat scroll 15px 19px;
            padding-left: var(--padding-left-intput);
        }

        .wraper-text-file .text-field.icon-password {
            background: url(../Content/images/Login_SSO/linear_lock.svg) no-repeat scroll 15px 19px;
            padding-left: var(--padding-left-intput);
            padding-right: var(--padding-left-intput);
        }

    .wraper-text-file .input-label {
        position: absolute;
        pointer-events: none;
        top: 38%;
        left: 0;
        transform: translateY(-15%);
        padding-left: var(--padding-left-intput);
        font-size: var(--font-st);
        transition: all .2s ease-in-out;
        /*color: #717171;*/
        color: #C4C4C4;
        font-weight: 400;
    }

    .wraper-text-file .input-label-error {
        visibility: hidden;
        font-size: var(--font-sm);
        font-weight: 400;
        letter-spacing: 0.02em;
        color: #f82626;
        position: absolute;
        bottom: -25px;
        /*bottom: -40px;*/
        left: 15px;
        text-align: left;
    }

    .wraper-text-file .tooltip-password {
        display: none;
        position: absolute;
        width: 158px;
        height: 98px;
        background: #616161E5;
        font-size: calc(var(--font-st) - 6px);
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
        padding: 8px;
        border-radius: 6px;
        color: #FFFFFF;
        font-weight: 500;
        top: -160%;
        left: -13.5%;
    }

        .wraper-text-file .tooltip-password::after {
            content: '';
            position: absolute;
            bottom: -5%;
            left: 50%;
            border: 6px solid #616161E5;
            border-bottom: 0;
            border-left-color: transparent;
            border-right-color: transparent;
        }

        .wraper-text-file .tooltip-password .tooltip-check {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: left;
        }

            .wraper-text-file .tooltip-password .tooltip-check img {
                margin-right: 6px;
                content: url("/Content/images/Login_SSO/un-check.svg");
            }

                .wraper-text-file .tooltip-password .tooltip-check img[checked] {
                    content: url("/Content/images/Login_SSO/check.svg");
                }

.group-text-content {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: calc(var(--font-sm) + 2px);
    font-weight: 400;
}

    .group-text-content .text-not-have-account {
        margin-right: 6px;
    }

    .group-text-content .text-register {
        text-decoration: none;
        color: var(--color-btn-blue);
        cursor: pointer;
    }

.wrap-text-forgot {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}

    .wrap-text-forgot .text-forgot-password {
        font-size: calc(var(--font-md) - 2);
        color: var(--color-btn-blue);
        font-weight: 400;
        line-height: 24px;
        cursor: pointer;
    }

        .wrap-text-forgot .text-forgot-password a {
            text-decoration: none;
        }

.title-otp-we-send {
    font-size: calc(var(--font-md) - 2);
    font-weight: 400;
}

.group-input-otp {
    font-family: Roboto;
    display: flex;
    position: relative;
    /*justify-content: space-around;*/
    /*align-items: center;*/
}

    .group-input-otp .error-otp {
        display: none;
        position: absolute;
        bottom: -22px;
        color: var(--color-warning);
        font-size: var(--font-sm);
        font-weight: 400;
    }

    .group-input-otp .otp-input {
        border: 1px solid #0000001F;
        /*height: 100%;*/
        border-radius: 8px;
        font-size: var(--font-lg);
        text-align: center;
        margin: 0 5px;
        padding: 1%;
        width: 16.6666667%;
        height: 56px;
        /*height: calc(56px * var(--ratio));*/
    }

        .group-input-otp .otp-input:first-child {
            margin-left: 0
        }

        .group-input-otp .otp-input:last-child {
            margin-right: 0
        }

        .group-input-otp .otp-input:not(:placeholder-shown) {
            border: 1px solid #1D1D1D;
        }

        /*.group-input-otp .otp-input:hover,*/
        .group-input-otp .otp-input:active,
        .group-input-otp .otp-input:focus {
            outline: none;
            border: 1px solid var(--color-btn-blue) !important;
        }

        .group-input-otp .otp-input[warning] {
            border: 1px solid var(--color-warning);
        }

            .group-input-otp .otp-input[warning] ~ .error-otp {
                display: block;
            }

.wraper-child-content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--pading-value) + 12px);
}

.group-text-description {
    font-size: var(--font-st);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    font-weight: 400;
    height: 168px;
}

    .group-text-description span {
    }

.group-role {
    display: flex;
    font-family: Roboto;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    font-size: calc(var(--font-st) - 2px);
    font-weight: 400;
    background-color: #F5F5F5;
    border-radius: 12px;
    height: 48px;
}

    .group-role .role-item {
        display: flex;
        justify-content: center;
        align-items: center;
    }
        /* Hide the default radio button */
        .group-role .role-item input[type="radio"] {
            display: none;
        }

            /* Create a new custom radio button */
            .group-role .role-item input[type="radio"] + label {
                position: relative;
                padding-left: 35px;
                cursor: pointer;
                user-select: none;
            }

                /* Create the circle for radio button (hidden when not checked) */
                .group-role .role-item input[type="radio"] + label::before {
                    content: "";
                    position: absolute;
                    left: 0;
                    top: 0;
                    height: 20px;
                    width: 20px;
                    background-color: transparent;
                    border: 2px solid #A7A7A7;
                    border-radius: 50%;
                }

            /* Show the inner circle when checked */
            .group-role .role-item input[type="radio"]:checked + label::after {
                content: "";
                position: absolute;
                left: 4px;
                top: 4px;
                width: 12px;
                height: 12px;
                background-color: #4CAF50;
                border-radius: 50%;
            }


        /*.group-role .role-item input {
            margin: 0;
            height: 20px;
            width: 20px;
            margin-right: 8px;
            accent-color: #00a006;*/
        /*accent-color: #4CAF50;*/
        /*}*/

        .group-role .role-item label {
            margin-bottom: 0
        }

.group-text-otp {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-weight: 400;
}

    .group-text-otp .text-please-register {
        color: #717171;
    }

    .group-text-otp #type-send-otp {
    }

    .group-text-otp #data-type-otp {
        font-weight: 500;
    }

.group-text-time {
    font-size: calc(var(--font-st) - 2px);
    font-weight: 500;
    display: flex;
    flex-direction: column;
    gap: 12px;
    line-height: 24px;
}

    .group-text-time #time-otp-left {
        color: var(--color-btn-blue);
    }

    .group-text-time #text-link-resend {
        font-size: var(--font-st);
        font-weight: 500;
        color: var(--color-btn-blue);
        cursor: pointer;
    }

    .group-text-time .wraper-text-resend {
        display: none;
    }

.wrap-text-register {
    font-size: calc(var(--font-st) - 2px);
    font-weight: 400;
}

    .wrap-text-register .text-login {
        color: var(--color-btn-blue);
        cursor: pointer;
        text-decoration: none;
    }

#loading {
    display: none;
    user-select: none;
    cursor: not-allowed;
    opacity: 0.5;
    width: 100vw;
    height: 100vh;
    position: absolute;
    z-index: 99999;
    background-color: black;
}
.loading-icon-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform:translate(-50%, -50%);
}
.loading-icon {
    width: 60px;
    height: 60px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 0.5s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.error-feedback {
    color: #f82626;
    font-size: var(--font-sm);
    margin-bottom: 14px;
    margin-top: 12px;
    visibility: hidden;
    font-weight: 400;
}

.rule-feedback {
    visibility: hidden;
    color: #f82626;
    font-size: var(--font-sm);
    line-height: 18px;
    font-weight: 400;
    width: 100%;
    text-align: left;
    margin-left: 15px;
    /*margin-top: -20px;
    margin-bottom: -10px;*/
}
.d-flex{
    display:flex;
}
.d-block {
    display:block;
}
.m-t-24 {
    margin-top: 24px;
}
.m-b-24 {
    margin-bottom:24px;
}
.m-b-36 {
    margin-bottom:36px;
}
.m-auto {
    margin:auto;
}
.tablet-footer {
    display:none;
    height:10vh;
    width:100%;
    background:white;
}
.b2s-banner {
    width:100%;
    height:auto;
    margin: 0 14px;
    display: none;
}
@media only screen and (max-width: 1024px) {
    /*LAYOUT*/
    body, .container-all, .left-side, .right-side {
        height: auto;
        min-height: 100vh;
    }
    .copyright {
        display:none;
    }
    .left-side {
        display: none;
    }
    .container-all {
        flex-wrap:wrap;
    }
    .right-side {
        width:100%;
    }
    .container-all {
        background-image: url('./images/Login_SSO/right_bg.svg');
    }
    .tablet-footer {
        display: flex;
    }
    .b2s-banner {
        display: block;
    }


    .wraper-text-file {
        min-height:64px;
        height:unset;
    }
        .wraper-text-file.group {
            display:block;
        }
        .wraper-text-file.group .input-first-name, .wraper-text-file.group .input-last-name {
            position: relative;
            width: 100%;
            min-height: 64px;
        }
}
@media only screen and (max-width: 600px) {
    .container-all {
        flex-direction: column;
    }
    .right-side {
        align-items: unset;
        min-height: unset;
        flex-grow:1;
        margin-left: 0;

    }
    .box {
        margin: 0;
        border-radius: 0;
    }
    .b2s-banner {
        margin: 0;
    }
    .title-content {
        font-size: 8vw!important;
    }
}

#dialog-price-package .modal-content {
/*    background: url(./images/DialogPricePackage/dialog-bg.png) no-repeat center center;*/
/*    background-size: cover;*/
}
#dialog-price-package-content button:focus {
    outline: none;
}
#dialog-price-package-content button:active {
    transform: translateY(1px);
}
/*Set padding to keep content from hitting the edges 
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}*/

/* Set width on the form input elements since they're 100% wide by default */
/*input,
select,
textarea {
    max-width: 280px;
}*/
/*customize template*/
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'NunitoRegular';
    src: url('../fonts/Nunito-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'NunitoBold';
    src: url('../fonts/Nunito-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'NunitoBlack';
    src: url('../fonts/Nunito-Black.ttf') format('truetype');
}

@font-face {
    font-family: 'NunitoSemiBold';
    src: url('../fonts/Nunito-SemiBold.ttf') format('truetype');
}

@font-face {
    font-family: 'NunitoMedium';
    src: url('../fonts/Nunito-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'MontserratBold';
    src: url('../fonts/Montserrat-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'MontserratMedium';
    src: url('../fonts/Montserrat-Medium.otf') format('truetype');
}
@font-face {
    font-family: 'Montserrat-Medium';
    src: url('../fonts/Montserrat-Medium.otf') format('truetype');
}
@font-face {
    font-family: 'MontserratLI';
    src: url('../fonts/Montserrat-LightItalic.ttf') format('truetype');
}

@font-face {
    font-family: 'MontserratR';
    src: url('../fonts/Montserrat-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'MontserratSemiBold';
    src: url('../fonts/Montserrat-SemiBold.otf') format('truetype');
}

@font-face {
    font-family: 'BalooDaRegular';
    src: url('../fonts/BALOODA-REGULAR.TTF') format('truetype');
}

@font-face {
    font-family: 'HirukoProRegular';
    src: url('../fonts/HirukoPro-Regular.otf') format('truetype');
}

@font-face {
    font-family: 'MONTSERRAT-BOLDITALIC';
    src: url('../fonts/MONTSERRAT-BOLDITALIC.TTF') format('truetype');
}
@font-face {
    font-family: 'Montserrat-Light';
    src: url('../fonts/Montserrat-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Montserrat-Italic';
    src: url('../fonts/Montserrat-Italic.ttf') format('truetype');
}

@font-face {
    font-family: 'Montserrat-BlackItalic';
    src: url('../fonts/Montserrat-BlackItalic.ttf') format('truetype');
}
@font-face {
    font-family: 'Montserrat-MediumItalic';
    src: url('../fonts/Montserrat-MediumItalic.ttf') format('truetype');
}

html,
body {
    font-family: 'Montserrat';
}
/* styles for validation helpers */
.field-validation-error {
    color: #b94a48;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error,
select.input-validation-error,
textarea.input-validation-error,
select.select2-hidden-accessible.input-validation-error + span.select2 > span > span {
    border: 1px solid red !important;
}

.input-group .input-validation-error {
    border-right: 1px solid #d2d6de !important;
}

label.input-group-addon {
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.input-group .input-validation-error + label.input-group-addon {
    border-top: 1px solid red !important;
    border-right: 1px solid red !important;
    border-bottom: 1px solid red !important;
}

select.select2-hidden-accessible + span.select2 > span > span {
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #b94a48;
}

.validation-summary-valid {
    display: none;
}

table > thead > tr {
    background-color: #dddde4;
}

.form-group {
    margin-bottom: 15px;
}

.form-control {
    height: 27px;
    font-size: 12px;
    padding: 0 0 0 10px;
}

.input-group-addon {
    padding: 0 10px;
}

label {
    font-size: 12px;
}

.cursor {
    cursor: pointer;
}

.noresult {
    text-align: center;
    font-weight: bold;
    color: #dd4b39;
}

@media (min-width: 768px) {
    .form-horizontal .control-label {
        padding-top: 3px;
        margin-bottom: 0;
        text-align: left;
        padding-right: 0;
    }

    .modal-md {
        width: 450px !important;
    }

    .fixed .content-wrapper {
        padding-top: 60px !important;
    }
}

@media (min-width: 991px) {
    .fixed .content-wrapper {
        padding-top: 30px !important;
    }
}

.sidebar-open .main-sidebar .slimScrollDiv,
.sidebar-open .main-sidebar section.sidebar {
    overflow: hidden !important;
}

.form-horizontal .radio, .form-horizontal .checkbox, .form-horizontal .radio-inline, .form-horizontal .checkbox-inline {
    padding-top: 3px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 20px;
}

input.input-table {
    width: 100%;
    background-color: transparent;
    border: 1px solid transparent;
    box-shadow: none;
    transition: border-color ease-in-out .15s;
    -webkit-transition: border-color ease-in-out .15s;
}

    input.input-table:focus:not(:read-only) {
        border: 1px solid #3c8dbc;
        box-shadow: none;
        outline: 0;
        transition: border-color ease-in-out .15s;
        -webkit-transition: border-color ease-in-out .15s;
    }

#ui-datepicker-div {
    z-index: 1052 !important;
}

.red {
    color: red;
}

.green {
    color: green;
}

.blue {
    color: blue;
}

#modal-alert {
    z-index: 9999999;
    padding: 0;
}

.colorpicker-element .input-group-addon i {
    width: 13px !important;
    height: 14px !important;
}

.box-header .box-title {
    font-weight: bold;
    color: #f39c12;
    font-size: 16px !important;
}

.skin-blue .sidebar a {
    color: #fff;
}

body.sidebar-collapse .slimScrollDiv, body.sidebar-collapse section.sidebar {
    overflow: visible !important;
}

.input-disabled {
    pointer-events: none;
    background-color: #eee;
}

td:first-child div.ic {
    float: left;
    color: #F39C12;
}

li.treeview > ul.treeview-menu {
    top: 42px !important;
}
    /*li.treeview > ul.treeview-menu > li a{
    color: #777!important;
}*/
    li.treeview > ul.treeview-menu > li a:hover {
        color: #000 !important;
    }

.table-sorter > thead > tr > th {
    position: relative;
}

    .table-sorter > thead > tr > th > a {
        color: #333 !important;
        display: block;
        width: 100%;
    }

.table-sorter .sorter {
    width: 9px;
    position: absolute;
    font-size: 9px;
    color: gray;
    bottom: 2px;
    right: 2px;
}

    .table-sorter .sorter .glyphicon.active {
        color: #fff;
    }

.btn-pink {
    background-color: #dd39b2;
    border-color: #bf10a2 !important;
    color: #fff;
}

.btn-purple {
    background-color: #7839dd;
    border-color: #563cbc !important;
    color: #fff;
}

.btn-green-d {
    background-color: #0d834d;
    border-color: #095e37 !important;
    color: #fff;
}

.rate-dollar > .dropdown-toggle > span {
    font-size: 11pt;
}

.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu > li:hover > .treeview-menu {
    display: block !important;
    position: absolute;
    min-width: 180px;
    left: 100%;
    top: 0 !important;
    background: #f4f4f5;
    padding-left: 0 !important;
}

.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu > li:hover .pull-right {
    transform: rotate(180deg);
}

.sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu > li {
    position: relative;
}

.h-full-screen {
    height: calc(100vh - 28px);
}

/*css for alert modal*/

#modal-alert .modal-content {
    border-radius: 8px;
}

#modal-alert .modal-header {
    display: flex;
    justify-content: center;
}

    #modal-alert .modal-header .close {
        display: none;
    }

#modal-alert .modal-title {
    margin: 0;
    line-height: 1.42857143;
    color: #333;
    font-weight: 600;
}

#modal-alert .modal-body {
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(237 247 255);
    text-align: center;
}

#modal-alert .modal-footer {
    display: flex;
    justify-content: center;
}

#modal-alert .btn-primary {
    background-color: #2A96D1;
    border-color: #2A96D1;
    border-radius: 3px;
    padding: 5px 10px;
    margin-right: 10px;
}

#modal-alert .btn-close {
    display: block;
    background-color: red;
    border-radius: 3px;
    color: white;
    padding: 5px 10px;
}