html {
    scroll-behavior: smooth;
}

body {
    /* Login page 1_EBS */
    /*position: relative;*/
    /*width: 375px;
    height: 812px;*/
    margin: 0px auto;
    max-width: 1200px; /*1200px;*/
    min-width: 375px;
    background: #FFFFFF;
    font-family: 'Kanit' !important;
    font-style: normal;
    /*font-weight: 600;
    font-size: 25px;
    line-height: 37px;*/
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
    color: #B57E30;
    /*background-image: url('../images/image_background.png');*/
}

.menu-bar-width {
    position: relative;
    width: 96vw;
    padding-left: 15px;
}

.announce {
    width: 100%;
    text-align: center;
    background-color: white;
    color: red;
}

.no_announce {
    padding-top: 15px;
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.main {
    margin-top: 90px; /*90px;*/
    padding: 0px 15px;
    /*background-color: white;*/
}

.container {
    /*display: flex;
    flex-flow: row wrap;*/
    width: 100%;
    max-width: 1200px; /*1200px;*/
    min-width: 375px;
    margin: 0px auto;
    background: #FFFFFF;
}


.background-color {
    position: absolute;
    width: 100%;
    max-width: 1200px;
    min-width: 375px;
    height: 100%;
    background: linear-gradient(179.97deg, rgba(0, 0, 0, 0.6) 48.15%, rgba(180, 125, 48, 0.6) 99.97%);
}



.background-image {
    position: absolute;
    width: 100%;
    max-width: 1200px; /*1200px;*/
    min-width: 375px;
    height: 100%;
    background-image: url('../images/image_background.png');
    background-position-x: -550px;
}


.RadUpload_Default .ruFakeInput {
    width: 200px;
}


.RadPicker_Default .rcCalPopup, .RadPicker_Default .rcTimePopup {
    z-index: 0;
}


.fontAwesome {
    font-family: 'Helvetica', FontAwesome, sans-serif;
}

.textbox-search {
    position: relative;
    width: 345px;
    height: 42px;
    background: #FFFFFF;
    border: 1px solid #F5D77F;
    border-radius: 5px;
    width: 100%;
}

    .textbox-search:focus {
        outline: none !important;
        border: 1px solid #F5D77F;
        box-shadow: 0 0 10px #719ECE;
    }


.ebs-font {
    font-family: 'Kanit' !important;
}

.font-bold {
    font-weight: bold !important;
}

.font8 {
    font-weight: 400;
    font-size: 8px;
    line-height: 12px;
}

.font9 {
    font-weight: 400;
    font-size: 9px;
    line-height: 11px;
}

.font10 {
    font-weight: 400;
    font-size: 10px;
    line-height: 15px;
}

.font11 {
    font-weight: 400;
    font-size: 11px;
    line-height: 16px;
}

.font12 {
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
}

.font14-light {
    font-weight: 300;
    font-size: 14px;
    line-height: 21px;
}

.font14 {
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
}

.font14-bold {
    font-weight: 600;
    font-size: 14px;
    line-height: 21px;
}

.font15-bold {
    font-weight: 600;
    font-size: 15px;
    line-height: 22px;
}

.font16-light {
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
}

.font16 {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}

.font16-bold {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
}

.font18 {
    font-weight: 400;
    font-size: 18px;
    line-height: 27px;
}

.font18-bold {
    font-weight: 600;
    font-size: 18px;
    line-height: 27px;
}

.font25 {
    font-weight: 400;
    font-size: 25px;
    line-height: 37px;
}

.font25-bold {
    font-weight: 600;
    font-size: 25px;
    line-height: 37px;
}



.link-button {
    color: black;
}

    .link-button:hover {
        color: black;
    }


.gold {
    color: #B0772A !important;
}

.light-black {
    color: #393939 !important;
}

.black {
    color: #000000 !important;
}

.white {
    color: #FFFFFF !important;
}

.red {
    color: #D00000 !important;
}

.orange {
    color: #FDB03F !important;
}

.green {
    color: #108769 !important;
}

.gray {
    color: #B3B3B3 !important;
}

.light-gray {
    color: #7B7B7B !important;
}

.fix-width-30 {
    width: 30px;
}

.fix-width-40 {
    width: 40px;
}

.fix-width-45 {
    width: 45px;
}

.fix-width-50 {
    width: 50px;
}

.fix-width-60 {
    width: 60px;
}

.fix-width-72 {
    width: 72px;
}

.fix-width-80 {
    width: 80px;
}

.fix-width-86 {
    width: 86px;
}

.fix-width-90 {
    width: 90px;
}

.fix-width-95 {
    width: 95px;
}

.fix-width-100 {
    width: 100px;
}

.fix-width-110 {
    width: 110px;
}

.fix-width-113 {
    width: 113px;
}

.fix-width-120 {
    width: 120px;
}

.fix-width-130 {
    width: 130px;
}

.fix-width-150 {
    width: 150px;
}

.fix-width-163 {
    width: 163px;
}

.fix-width-167 {
    width: 167px;
}

.fix-width-180 {
    width: 180px;
}

.fix-width-183 {
    width: 183px;
}

.fix-width-200 {
    width: 200px;
}

.fix-width-230 {
    width: 230px;
}

.fix-width-270 {
    width: 270px;
}

.fix-width-276 {
    width: 276px;
}


.fix-width-280 {
    width: 280px;
}

.fix-width-300 {
    width: 300px;
}

.fix-width-340 {
    width: 340px;
}

.fix-width-350 {
    width: 350px;
}

.fix-width-360 {
    width: 360px;
}

.fix-width-380 {
    width: 380px;
}

.fix-width-396 {
    width: 396px;
}

.fix-width-400 {
    width: 400px;
}

.fix-width-500 {
    width: 500px;
}

.fix-width-576 {
    width: 576px;
}

.fix-width-655 {
    width: 655px;
}

.fix-width-700 {
    width: 700px;
}

.fix-width-730 {
    width: 730px;
}

.fix-width-759 {
    width: 759px;
}


.fix-width-766 {
    width: 766px;
}

.fix-width-900 {
    width: 900px;
}

.fix-width-930 {
    width: 930px;
}


.row {
    margin-top: 16px;
}

.row-top5 {
    margin-top: 5px !important;
}

.row-top10 {
    margin-top: 10px !important;
}

.row-top15 {
    margin-top: 15px !important;
}

.row-top25 {
    margin-top: 25px !important;
}

.row-top40 {
    margin-top: 40px !important;
}

.row-top60 {
    margin-top: 60px !important;
}

.row-bottom15 {
    margin-bottom: 15px;
}

.padding5 {
    padding: 5px;
}

.padding10 {
    padding: 10px;
}

.verticle-top {
    vertical-align: top;
}

.display-block {
    display: block;
}

.float-container {
    width: 100%;
}

.float-left {
    float: left;
}

.float-center {
    /*width: 200px;
    height: 200px;*/
    position: fixed;
    /*background-color: blue;*/
    /*top: 50%;*/
    left: 52%;
    /*margin-top: -100px;*/
    /*margin-left: -100px;*/
}


.float-right {
    float: right;
}

.float-clear {
    clear: both;
}

.row-right-10 {
    margin-right: 10px;
}


.line-breaker {
    border: 1px solid #E2E2E3;
}

.btn-notification {
    min-width: 25px;
    height: 20px;
    left: 113px;
    top: 572px;
    background: #F5D77F;
    box-shadow: 0px 4px 4px -1px rgba(117, 117, 117, 0.35);
    border-radius: 5px;
    border: 0px;
    cursor: pointer;
}


.btn-gold {
    min-width: 150px;
    height: 44px;
    left: 113px;
    top: 572px;
    background: #F5D77F;
    box-shadow: 0px 4px 4px -1px rgba(117, 117, 117, 0.35);
    border-radius: 5px;
    border: 0px;
    cursor: pointer;
}

.btn-gold-short {
    min-width: 60px;
    height: 29px;
    left: 113px;
    top: 572px;
    background: #F5D77F;
    box-shadow: 0px 4px 4px -1px rgba(117, 117, 117, 0.35);
    border-radius: 5px;
    border: 0px;
    cursor: pointer;
}

    .btn-gold-short:disabled {
        min-width: 60px;
        height: 29px;
        left: 113px;
        top: 572px;
        background: #E2E2E3 !important;
        box-shadow: 0px 4px 4px -1px rgba(117, 117, 117, 0.35);
        border-radius: 5px;
        border: 0px;
        color: black !important;
    }


.btn-gray {
    width: 150px;
    height: 44px;
    left: 25px;
    top: 572px;
    background: #E2E2E3;
    border-radius: 5px;
    cursor: pointer;
}

.btn-red {
    min-width: 150px;
    height: 44px;
    /*left: 113px;
    top: 572px;*/
    background: #D00000;
    box-shadow: 0px 4px 4px -1px rgba(117, 117, 117, 0.35);
    border-radius: 5px;
    border: 0px;
    cursor: pointer;
}

.btn-red-short {
    min-width: 60px;
    height: 29px;
    left: 113px;
    top: 572px;
    background: #D00000;
    box-shadow: 0px 4px 4px -1px rgba(117, 117, 117, 0.35);
    border-radius: 5px;
    border: 0px;
    cursor: pointer;
}

.btn-brown-short {
    min-width: 60px;
    height: 29px;
    left: 113px;
    top: 572px;
    background: #B0772A;
    box-shadow: 0px 4px 4px -1px rgba(117, 117, 117, 0.35);
    border-radius: 5px;
    border: 0px;
    cursor: pointer;
}

.btn-blue-short {
    min-width: 60px;
    height: 29px;
    left: 113px;
    top: 572px;
    background: #33D2FF;
    box-shadow: 0px 4px 4px -1px rgba(117, 117, 117, 0.35);
    border-radius: 5px;
    border: 0px;
    cursor: pointer;
}

.input-combobox {
    /*    padding: 0px 0px 12px 0px !important;
    margin-top: 10px !important;
    margin-bottom: 30px !important;*/
    border-radius: inherit !important;
    color: #F5D77F !important;
    width: 100% !important;
    border-top: inherit !important;
    border-right: inherit !important;
    border-left: inherit !important;
    font-size: 17px !important;
    line-height: 18px !important;
    outline: none !important;
}

.input-combobox-productlist {
    /*    padding: 0px 0px 12px 0px !important;
    margin-top: 10px !important;
    margin-bottom: 30px !important;*/
    border-radius: inherit !important;
    color: #F5D77F !important;
    width: 89% !important;
    border-top: inherit !important;
    border-right: inherit !important;
    border-left: inherit !important;
    font-size: 17px !important;
    line-height: 18px !important;
    outline: none !important;
}


.input-combobox-popup {
    border-radius: inherit !important;
    color: #F5D77F !important;
    width: 100% !important;
    border-top: inherit !important;
    border-right: inherit !important;
    border-left: inherit !important;
    font-size: 17px !important;
    line-height: 18px !important;
    outline: none !important;
}

.RadComboBox {
    display: inline-flex !important;
}

.checkbox-label {
    display: inline;
    margin-left: 6px;
}

.round {
    position: relative;
    display: inline;
}


    .round label {
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 50%;
        cursor: pointer;
        height: 18px;
        left: 0;
        position: absolute;
        top: 0;
        width: 18px;
    }

        .round label:after {
            border: 2px solid #fff;
            border-top: none;
            border-right: none;
            content: "";
            height: 5px;
            left: 3px;
            opacity: 0;
            position: absolute;
            top: 4px;
            transform: rotate(-45deg);
            width: 10px;
        }

    .round input[type="checkbox"] {
        visibility: hidden;
    }

        .round input[type="checkbox"]:checked + label {
            background-color: #B0772A;
            border-color: #B0772A;
        }

            .round input[type="checkbox"]:checked + label:after {
                opacity: 1;
            }



.membership-display {
    position: relative;
    width: 100%;
    text-align: right;
    right: 15px;
    top: -10px;
}

.warning-hilight {
    color: #f5d77f !important;
    /*text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;*/
    /*margin-top: 25px;
    position: absolute;
    margin-left: -40px;*/
}

.menu-bar {
    height: 75px;
    background: #393939;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 998;
}

.menu-logo-name {
    position: relative;
    width: 159px;
    height: 34.52px;
    /*left: 15px;*/
    top: 20px;
}


.login-logo {
    position: absolute;
    margin: 10% auto 0px;
    width: 240px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.login-ever-logo {
    height: 100px;
    vertical-align: middle;
    /*width: 112.1px;
    height: 116.8px;
    position: absolute;
    margin: 100px auto 0px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));*/
}


.login-clover-logo {
    height: 80px;
    vertical-align: middle;
}


.login-life-logo {
    height: 80px;
    margin-left: 5px;
    vertical-align: middle;
}

.login-container {
    position: absolute;
    width: 344px;
    height: 390px;
    top: 300px;
    left: 0;
    right: 0;
    margin: 0px auto;
    background: #FFFFFF;
    box-shadow: 0px 4px 4px -1px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
}

.register-container {
    position: absolute;
    width: 344px;
    height: auto;
    top: 300px;
    left: 0;
    right: 0;
    margin: 0px auto;
    background: #FFFFFF;
    box-shadow: 0px 4px 4px -1px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    padding-bottom: 25px;
}

.waiting-container {
    position: absolute;
    width: 344px;
    height: auto;
    top: 300px;
    left: 0;
    right: 0;
    margin: 0px auto;
    background: #FFFFFF;
    box-shadow: 0px 4px 4px -1px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    padding-bottom: 25px;
}

.row-margin-5 {
    margin-top: 5px;
}

.row-margin-10 {
    margin-top: 10px;
}

.row-margin-20 {
    margin-top: 20px;
}

.row-margin-20-bottom {
    margin-bottom: 20px;
}

.row-margin-40 {
    margin-top: 40px;
}

.row-margin-left {
    margin-left: 17px;
}

.row-margin-left-6 {
    margin-left: 6px;
}

.row-margin-left-25 {
    margin-left: 25px;
}

.display-left {
    text-align: left;
}

.display-center {
    text-align: center;
}

.display-right {
    text-align: right;
}

.fix-height-font-12 {
    height: 12px;
}

.fix-height-font-22 {
    height: 22px;
}




/*----- Tooltip -----*/

/*.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;*/
/* Position the tooltip */
/*position: absolute;
        z-index: 1;
    }

    .tooltip:hover .tooltiptext {
        visibility: visible;
    }*/


/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

    /* Tooltip text */
    .tooltip .tooltiptext {
        visibility: hidden;
        width: 50px;
        background-color: #555;
        color: #fff;
        text-align: center;
        padding: 5px 0;
        border-radius: 6px;
        /* Position the tooltip text */
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        margin-left: 0px;
        /* Fade in tooltip */
        opacity: 0;
        transition: opacity 0.3s;
    }

        /* Tooltip arrow */
        .tooltip .tooltiptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }

    /* Show the tooltip text when you mouse over the tooltip container */
    .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }




/*----- Login Page -----*/
.login-text-warning {
    text-align: right;
    margin-right: 17px;
}

.login-text-title {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
    color: #393939;
}

.login-text-register {
    color: #B0772A;
}

.login-textbox {
    background: #FFFFFF;
    border: 1px solid #F5D77F;
    border-radius: 5px;
    width: 304px;
    height: 36px;
}

.login-password {
    font-size: 30px;
}

.login-button {
    background: linear-gradient(270deg, #B57E30 0%, #EFCF78 100%);
    border-radius: 5px;
    border-width: 0px;
    width: 310px;
    height: 36px;
    font-weight: 500;
    font-size: 18px;
    line-height: 27px;
    color: #FFFFFF;
    cursor: pointer;
}





.text-margin-top10 {
    margin-top: 10px;
}

.lock-image {
    width: 15px;
}

.menu {
    position: relative;
    width: 100%;
    text-align: right;
    right: 15px;
    top: -10px;
}

.menu-change-password {
    position: absolute;
    text-align: right;
    right: 15px;
}


.menu-color-red {
    color: red;
}

.menu-unselect {
    color: black;
}

.menu-full-name {
    position: absolute;
    top: 3px;
    margin-left: 10px;
}

.text-underline {
    text-decoration-line: underline;
}

.text-normal {
    text-decoration-line: none;
}


.menu-btn-log-out {
    background: #FFFFFF;
    border: 1px solid #D00000;
    border-radius: 5px;
    width: 150px;
    height: 44px;
    cursor: pointer;
}

.space-10 {
    width: 10px;
    display: inline-block;
}

.space-15 {
    width: 15px;
    display: inline-block;
}



/*----- EBS Standard -----*/
.ebs-textbox {
    font-family: 'Kanit' !important;
    background: #FFFFFF;
    border: 1px solid #F5D77F;
    border-radius: 5px;
    height: 36px;
    width: 99%;
    padding-left: 5px;
}

.ebs-textbox-small {
    font-family: 'Kanit' !important;
    background: #FFFFFF;
    border: 1px solid #F5D77F;
    border-radius: 5px;
    height: 22px;
    width: 99%;
    padding-left: 5px;
}


.ebs-textbox-in-grid {
    font-family: 'Kanit' !important;
    background: #FFFFFF;
    border: 1px solid #F5D77F;
    border-radius: 5px;
    height: 36px;
    width: 75%;
    padding-left: 5px;
}

.ebs-text-warning {
    text-align: right;
}

.ebs-number {
    text-align: right;
    padding-right: 10px;
}

.ebs-textbox-multiline {
    font-family: 'Kanit' !important;
    background: #FFFFFF;
    border: 1px solid #F5D77F;
    border-radius: 5px;
    height: 150px;
    width: 99%;
    padding-left: 5px;
    resize: none;
}


.ebs-modal-input-textbox {
    width: calc((100%) - 25px);
    /*width: calc((100%) - 10px);*/
    height: 150px;
    background: #FDFEFF;
    border: 1px solid #F5D77F;
    border-radius: 5px;
    resize: none;
}


input[type="text"][disabled] {
    font-family: 'Kanit' !important;
    background: #F4F4F4;
    border: 0px solid #F5D77F;
    border-radius: 5px;
    height: 36px;
    width: 100%;
    padding-left: 5px;
}

.ebs-information-icon {
    display: inline;
    position: relative;
    top: 2px;
    left: 3px;
}

/*input[type="checkbox"]{
    background: black !important;
    accent-color: red;
}
input[type="checkbox"]:disabled :before {
    background: black !important;
    accent-color: red;
}*/

/*input[type="checkbox" i]:disabled + label:hover::before {
    background: black !important;
    border: 1px solid #d4d4d5 !important;
}

input:disabled {
    color: black !important;
    border-color: black !important;
    background-color: black !important;
}*/
/*input[type="checkbox"]:disabled + label:before {
    border-color: #eee;
    color: #ccc;
    background: linear-gradient(to top, #e6e6e6 0px, #fff 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}*/
/*
input[type="checkbox"]:checked + label {
    font-weight: bold;    
}*/

/*input[type="checkbox"]:disabled {
    color: black;
    background-color: red;
}
*/


input[type="checkbox"]:disabled + label::before {
    background: gray;
}

input[type="checkbox"]:disabled + label:hover::before {
    background: gray;
    border: 1px solid #d4d4d5;
}



.btn-download-file {
    width: 105px;
    background: url('/assets/images/icon-btn-file.svg') left 5px top 5px no-repeat #F5D77F !important;
    text-align: right;
}

    .btn-download-file:disabled {
        width: 105px;
        background: url('/assets/images/icon-btn-file.svg') left 5px top 5px no-repeat #E2E2E3 !important;
        text-align: right;
        cursor: default !important;
    }

.btn-certificate {
    width: 180px;
    background: url('/assets/images/icon-btn-certificate.svg') left 7px top 5px no-repeat #F5D77F !important;
    text-align: right;
}

    .btn-certificate:disabled {
        width: 180px;
        background: url('/assets/images/icon-btn-certificate.svg') left 7px top 5px no-repeat #E2E2E3 !important;
        text-align: right;
        cursor: default !important;
    }

.btn-add-customer {
    width: 50px;
    height: 30px;
    background: url('/assets/images/icon-add-plus.svg') left 15px top 5px no-repeat #108769 !important;
    text-align: right;
    box-shadow: 0px 4px 4px -1px rgba(117, 117, 117, 0.35);
    border-radius: 5px;
    border: 0px;
    cursor: pointer;
}

.btn-delete-item {
    width: 85px;
    height: 30px;
    background: url('/assets/images/icon-trash.svg') left 5px top 5px no-repeat #D00000 !important;
    text-align: right;
    box-shadow: 0px 4px 4px -1px rgba(117, 117, 117, 0.35);
    border-radius: 5px;
    border: 0px;
    cursor: pointer;
}


.btn-delete-item-short {
    width: 50px;
    height: 30px;
    background: url('/assets/images/icon-trash.svg') left 5px top 5px no-repeat #D00000 !important;
    text-align: right;
    box-shadow: 0px 4px 4px -1px rgba(117, 117, 117, 0.35);
    border-radius: 5px;
    border: 0px;
    cursor: pointer;
}

.btn-refresh {
    width: 105px;
    background: url('/assets/images/icon-refresh.png') left 10px top 9px no-repeat #F5D77F !important;
    text-align: right;
}

.btn-add {
    width: 95px;
    background: url('/assets/images/icon-plus.png') left 10px top 9px no-repeat #F5D77F !important;
    text-align: right;
}



/*----- Telerik -----*/
.RadComboBox_Default, .RadComboBox_Default .rcbInput, .RadComboBoxDropDown_Default {
    font-family: 'Kanit' !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 21px !important;
    /* identical to box height */

    color: #B0772A !important;
}


/*----- My Report -----*/
.my-report-header-container {
    height: 44px;
    background: #393939;
    border-radius: 5px 5px 0px 0px;
}

.my-report-header-title {
    margin-top: 9px;
    margin-left: 10px;
    display: inline-block;
}

.my-report-header-edit {
    margin-top: 9px;
    margin-right: 10px;
    float: right;
    display: inline-block;
}

    .my-report-header-edit a {
        color: white;
        text-decoration: none;
    }

.my-report-detail-container {
    background: #FDFEFF;
    box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    padding: 10px;
}

.my-report-detail-answer {
    background: #F4F4F4;
    border-radius: 5px;
    padding: 10px;
}

.my-report-skill-answer {
    background: #F4F4F4;
    border-radius: 5px;
}

.my-report-skill-title-containner {
    height: 30px;
    background: #B0772A;
    border-radius: 5px 5px 0px 0px;
}

.my-report-skill-title {
    margin-left: 10px;
    line-height: 30px;
    vertical-align: middle;
}

.my-report-skill-sub-title-container {
    margin-left: 10px;
}

.my-report-skill-list-container {
    margin-left: 20px;
}

.my-report-skill-note-container {
    height: 25px;
    line-height: 25px;
    background: #B0772A;
    border-radius: 0px 0px 5px 5px;
    vertical-align: middle;
    text-align: center;
}




.my-report-skill-check {
    width: calc((100%/2) - 10px);
    display: inline-flex;
    vertical-align: top;
}


.my-report-skill-check-long {
    display: inline-flex;
    vertical-align: top;
}

/*----- My List -----*/

.my-list-button-calculation-container {
}

.my-list-button-add-new-list-container {
}

.my-list-prospect-container {
    width: 95vw;
    height: 90vh;
    max-width: 1170px;
    overflow-x: scroll;
    overflow-y: scroll;
}


.my-table-container {
    width: 590px;
    overflow-x: scroll;
    overflow-y: scroll;
}


.my-list-table-container {
    width: 100%;
    min-width: 990px;
    box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
}

.line-height-16 {
    line-height: 16px !important;
}

.my-list-header-container {
    height: 44px;
    background: #393939;
    border-radius: 5px 5px 0px 0px;
    position: sticky;
    top: 0;
    z-index: 3;
}

.my-list-header-column {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    line-height: 44px;
    vertical-align: middle;
}

.my-list-data-container {
    min-height: 40px;
    border: 1px solid #E2E2E3;
}

.my-list-data-column {
    display: inline-block;
    vertical-align: middle;
    line-height: 40px;
}

    .my-list-data-column a {
        color: #B0772A !important;
        /*text-decoration-line: none;*/
    }

.prospect-name-column {
    position: sticky;
    left: 0;
    width: 100px;
    background: inherit;
}

.prospect-name-column-header {
    position: sticky;
    left: 0;
    width: 90px;
    background: #393939;
    z-index: 3;
}

.prospect-name-column-detail {
    position: sticky;
    left: 0;
    width: 90px;
    background: #FFFFFF !important;
    border-left: 0px !important;
    z-index: 2;
}

.my-customer-table-container {
    width: 100%;
    min-width: 1072px;
    box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
}

.my-customer-header-container {
    height: 40px;
    background: #393939;
    /*border-radius: 5px 5px 0px 0px;*/
    border-radius: 0px 0px 0px 0px;
    position: sticky;
    top: 0;
    z-index: 3;
}

.my-customer-header-column {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
}
/*
.my-customer-data-container {
    min-height: 40px;
    border: 1px solid #E2E2E3;
}

.my-customer-data-column {
    display: inline-block;
    vertical-align: middle;
    line-height: 40px;
}

    .my-customer-data-column a {
        color: #B0772A !important;
        text-decoration-line: none;
    }*/
/*.prospect-checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: yellow;
    border: none;
}

    .prospect-checkbox:checked {
        background-color: black;
    }*/

.my-business-owner-table-container {
    width: 100%;
    min-width: 1860px;
    box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
}

.my-business-owner-header-container {
    height: 40px;
    background: #393939;
    /*background :#B57E30;*/
    /*border-radius: 5px 5px 0px 0px;*/
    border-radius: 0px 0px 0px 0px;
    position: sticky;
    top: 0;
    z-index: 3;
}

.my-business-owner-data-container {
}

.my-business-owner-header-column {
    /*background: #B57E30;*/
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
}

.my-upper-header-container {
    height: 40px;
    background: #393939;
    border-radius: 5px 5px 0px 0px;
    position: sticky;
    top: 0;
    z-index: 3;
}


.my-upper-2-header-container {
    height: 20px;
    background: #393939;
    /*border-radius: 5px 5px 0px 0px;*/
    position: sticky;
    top: 0;
    z-index: 3;
}

.my-upper-header-column {
    /*background: #B57E30;*/
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
}

.my-leader-header-upper-container {
    height: 20px;
    background: #393939;
    border-radius: 5px 5px 0px 0px;
    position: sticky;
    top: 0;
    z-index: 3;
}

.my-leader-header-upper-column {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    line-height: 30px;
    vertical-align: middle;
}

.my-leader-header-container {
    height: 40px;
    background: #393939;
    /*background :#B57E30;*/
    /*border-radius: 5px 5px 0px 0px;*/
    border-radius: 0px 0px 0px 0px;
    position: sticky;
    top: 0;
    z-index: 3;
}

.my-leader-header-column {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
}


.my-user-column {
    /*background: #B57E30;*/
}

.my-upper-radius {
    border-radius: 10px 10px 0px 0px;
}

.my-lover-column {
    background: #606060; /* #B57E30;*/
}

.my-lover-checkbox-column {
    background: #FBEDC4;
}

.my-business-owner-column {
    /*background: #B57E30;*/
}


.my-leader-column {
    background: #606060;
}


.my-leader-checkbox-column {
    background: #FBEDC4;
}



.my-hold-pv-table-container {
    width: 100%;
    min-width: 1550px;
    /* height: 40px;
    background: #393939;*/
    /*background :#B57E30;*/
    /*border-radius: 5px 5px 0px 0px;*/
    border-radius: 5px 5px 0px 0px;
    /*position: sticky;
    top: 0;
    z-index: 3;*/
}


.my-subscription-container {
    width: 95vw;
    height: 250px;
    max-width: 1170px;
    overflow-x: scroll;
    overflow-y: scroll;
}




.my-subscription-table-container {
    width: 100%;
    min-width: 600px;
    height: 40px;
    background: #393939;
    /*background :#B57E30;*/
    /*border-radius: 5px 5px 0px 0px;*/
    border-radius: 5px 5px 0px 0px;
    position: sticky;
    top: 0;
    z-index: 3;
}


.subscription-first-column-header {
    position: sticky;
    left: 0;
    width: 80px;
    background: #393939;
    z-index: 3;
}

.subscription-first-column-detail {
    position: sticky;
    left: 0;
    width: 80px;
    background: #FFFFFF !important;
    border-left: 0px !important;
    z-index: 2;
}



/*----- My Team -----*/
.my-team-table-container {
    width: 100%;
    min-width: 2350px;
    box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
}

.my-team-header-container {
    height: 44px;
    background: #393939;
    border-radius: 0px 0px 0px 0px;
    position: sticky;
    top: 0;
    z-index: 3;
}

.my-team-header-column {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
}

.my-team-data-container {
    min-height: 40px;
    border: 1px solid #E2E2E3;
}

.my-team-data-column {
    display: inline-block;
    vertical-align: middle;
    line-height: 40px;
}

    .my-team-data-column a {
        color: #B0772A !important;
        text-decoration-line: none;
    }


.team-name-column-header {
    position: sticky;
    left: 0;
    width: 250px;
    background: #393939;
    z-index: 3;
}

.team-name-column-detail {
    position: sticky;
    left: 0;
    width: 250px;
    background: #FFFFFF;
    z-index: 2;
}

.my-team-week-report-container {
    position: relative;
    margin: 10px auto 0px;
    width: 750px;
}




/*----- My Week & My Month -----*/

.my-week-month-container {
    position: absolute;
    margin: 190px auto 0px;
    width: 200px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    height: 50px;
    text-align: center;
}


.my-week-report-month-container {
    position: absolute;
    margin: 130px auto 0px;
    width: 200px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    height: 50px;
    text-align: center;
}


.my-week-table-container {
    width: 100%;
    min-width: 2080px;
    box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
}


.my-week-header-container {
    height: 40px;
    background: #393939;
    /*background :#B57E30;*/
    /*border-radius: 5px 5px 0px 0px;*/
    border-radius: 0px 0px 0px 0px;
    position: sticky;
    top: 0;
    z-index: 3;
}


.event-name-column-header {
    position: sticky;
    left: 0;
    width: 180px;
    background: #393939;
    z-index: 3;
}

.event-name-column-detail {
    position: sticky;
    left: 0;
    width: 180px;
    background: #FFFFFF;
    z-index: 2;
}


.my-week-header-column {
    /*background: #B57E30;*/
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    line-height: 40px;
    vertical-align: middle;
}

.my-week-data-container {
    min-height: 40px;
    border: 1px solid #E2E2E3;
}

/*.my-week-data-container:nth-child(even) {
        background-color: green !important;
    }*/


.my-week-data-column {
    display: inline-block;
    vertical-align: middle;
    line-height: 40px !important;
    /*border-left: 2px solid #E2E2E3;*/
}

    .my-week-data-column a {
        color: #B0772A !important;
        /*text-decoration-line: none;*/
    }



.week-column {
    width: 280px;
}

.week1-column {
    width: 286px;
}

.week2-column {
    width: 287px;
}

.week3-column {
    width: 286px;
}

.week4-column {
    width: 286px;
}

.week5-column {
    width: 286px;
}

.week6-column {
    width: 223px;
}


/*.left-right-column {
    border-left-width: 0px;
    border-right-width: 0px;
}*/


/*----- My Month -----*/


.my-month-table-container {
    width: 100%;
    min-width: 850px;
    box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
}


.my-month-bar-chart {
    border-style: none;
    border-width: 0px;
}


.my-month-information-container {
    /*position: absolute;
    height: 138px;
    left: 15px;
    width: 100%;*/
    padding: 1px 15px 15px 15px;
    background: #FFFFFF;
    box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
}


.upper-pace-column {
    width: 296px;
}

.upper-course-column {
    width: 1085px;
}

.upper-person-column {
    width: 400px;
}



.recognition-column {
    min-width: 180px;
}

.pace-all-column {
    min-width: 90px;
}

.pace-month-column {
    min-width: 90px;
}

.pace-week-column {
    min-width: 110px;
}

.course-no-column {
    min-width: 90px;
}

.trip-column {
    min-width: 90px;
}

.platform-column {
    min-width: 100px;
}

.legacy-column {
    min-width: 90px;
}

.first-step-column {
    min-width: 80px;
}

.mindset-column {
    min-width: 80px;
}

.sp-course-column {
    min-width: 80px;
}

.sale-course-column {
    min-width: 80px;
}

.sp-clinic-column {
    min-width: 80px;
}

.sale-clinic-column {
    min-width: 80px;
}


.before-camp-column {
    min-width: 90px;
}

.tiktok-column {
    min-width: 70px;
}

.image-for-success-column {
    min-width: 130px;
}

.active-column {
    min-width: 70px;
}

.passive-column {
    min-width: 70px;
}

.business-count-column {
    min-width: 105px;
}

.leader-count-column {
    min-width: 130px;
}



.reset-password-column {
    min-width: 70px;
}

/*----- My Course -----*/
.my-course-container {
    padding: 10px;
    box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
}

    .my-course-container a {
        color: #B0772A !important;
        text-decoration: none;
    }

/*----- My Course Info-----*/

.my-course-info-container {
    width: 100%;
    min-height: 180px;
    text-align: center;
    box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    padding-top: 15px;
}

.my-course-info-percent-container {
    width: 49%;
    display: inline-block;
    vertical-align: top;
}

.my-course-info-number-container {
    width: 49%;
    display: inline-block;
    vertical-align: top;
}

.my-course-info-line {
    text-align: left;
    margin-left: calc((100%/2) - 60px);
}


.my-course-info-percent-circle-container {
    margin-top: 15px;
    margin-left: calc((100%/2) - 80px);
}

.my-course-info-count-final {
}

.my-course-info-count-inprogress {
}

.my-course-info-count-total {
}

.my-course-info-member-container {
}

    .my-course-info-member-container .ajax__tab_header {
        margin-left: -14px;
        margin-right: -14px;
        height: 56px;
        background: #FDFEFF;
        box-shadow: 0px 15px 10px -15px rgba(0, 0, 0, 0.25);
    }

    .my-course-info-member-container .ajax__tab_default .ajax__tab {
        width: calc((100%/2));
    }



.my-course-team-container {
    width: 100%;
    min-width: 750px;
    box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
}

.my-course-team-header-container {
    height: 44px;
    background: #393939;
    border-radius: 5px 5px 0px 0px;
    position: sticky;
    top: 0;
    z-index: 1;
}


.my-course-team-header-column {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    line-height: 44px;
    vertical-align: middle;
}


.my-course-team-data-container {
    min-height: 40px;
    border: 1px solid #E2E2E3;
}

.my-course-team-data-column {
    display: inline-block;
    vertical-align: middle;
    line-height: 40px;
}

    .my-course-team-data-column a {
        color: #B0772A !important;
        text-decoration-line: none;
    }


.course-team-name-column-header {
    position: sticky;
    left: 0;
    width: 250px;
    background: #393939;
    z-index: 1;
}

.course-team-name-column-detail {
    position: sticky;
    left: 0;
    width: 250px;
    background: #FFFFFF;
    z-index: 0;
}

.course-percent-column {
    min-width: 90px;
}






/*----- My Profile -----*/
.tab-menu-section {
    margin-top: -18px;
    margin-left: -14px;
    margin-right: -14px;
    height: 56px;
    background: #FDFEFF;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
}


.ajax__tab_header {
    margin-top: -18px;
    margin-left: -14px;
    margin-right: -14px;
    height: 56px;
    background: #FDFEFF;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
}

.ajax__tab_default .ajax__tab {
    /*display: block;
    float: left;
    height: 21px;
    margin-top: 1px;*/
    /* width: 100%; */
    width: calc((100%/3));
}

.ajax__tab_xp .ajax__tab_header {
    background: none !important;
    color: #B0772A !important;
    font-family: 'Kanit' !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 18px !important;
    line-height: 27px !important;
}


    .ajax__tab_xp .ajax__tab_header a {
        color: #B0772A !important;
        width: 100% !important;
    }

    .ajax__tab_xp .ajax__tab_header .ajax__tab_outer {
        background: none !important;
        width: 100% !important;
        text-align: center;
    }

    .ajax__tab_xp .ajax__tab_header .ajax__tab_inner {
        background: none !important;
        margin-top: 12px !important;
        width: 100% !important;
    }

    .ajax__tab_xp .ajax__tab_header .ajax__tab_tab {
        background: none !important;
    }


    .ajax__tab_xp .ajax__tab_header .ajax__tab_active .ajax__tab_outer {
        background: none !important;
        height: 53px;
        width: 100%;
        text-align: center;
        border-bottom: 4px solid #F5D77F !important;
    }

.ajax__tab_xp .ajax__tab_body {
    border: 0px !important;
    margin-top: 5px;
}


.my-profile-section {
    margin-top: 15px;
}

.my-profile-header {
}


.my-profile-container {
    margin-top: 15px;
    padding: 15px;
    background: #FDFEFF;
    box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
}


.circular_profile_image {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #B0772A !important; /*gold*/
    display: inline-block;
    vertical-align: middle;
    border: 2px solid rgba(255,255,255,0.5);
}

    .circular_profile_image img {
        width: 100%;
    }


.my-profile-information-container {
    width: 100%;
}

.my-profile-information-title {
    width: calc((100%/2) - 15px);
    display: inline-block;
}


.my-profile-button-container {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
}



.latest-course-title-width {
    min-width: 230px;
    width: 75%;
}


/*----- My Level -----*/

.my-level-pace {
    box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    padding: 5px;
}

.my-level-pace-name {
}

.my-level-pace-recognition {
}

.my-level-pace-recognition-label {
    float: right;
}

.my-pace-label {
    float: right;
}

.my-level-diagram {
}
/*----- Course List -----*/
.course-container {
    width: 100%;
    margin-top: 16px;
}



.course-list {
    width: 106%;
    /*height: 270px;*/
    display: flex;
    flex-wrap: wrap;
    padding: 0px;
    margin-left: -8px;
}

    .course-list li {
        list-style: none;
    }

.course-item {
    margin: 0px 8px;
    width: calc(90%/3);
    margin-bottom: 16px;
    background: #FFFFFF;
    box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    position: relative;
    padding-bottom: 50px;
}

    .course-item img {
        width: 100%;
        background: #3F3F3F;
        border-radius: 5px 5px 0px 0px;
    }

.course-text {
    padding-left: 8px;
    padding-right: 8px;
    min-height: 140px;
}

.course-item-title {
    color: #000000;
}

.course-item-description {
    color: #393939;
    min-height: 50px;
}

.course-item-type {
    display: inline-block;
    padding: 5px;
    width: auto;
    height: 20px;
    border-radius: 3px;
    background: #108769;
    margin: 10px 10px;
    /*background: #D00000;*/
    /*background: #B0772A;*/
}

.course-item-buton-container {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.course-btn {
    width: 100%;
    border: 0px;
    background: #F5D77F !important;
    padding: 10px 0px;
    cursor: pointer;
}

.line-separate {
    border: 0.75px solid #E2E2E3;
    margin: 0px;
}

.line-separate-2 {
    border: 1px solid #E2E2E3;
}


.line-separate-chapter {
    border: 1px solid #EFEFEF;
}


/*----- Course Detail -----*/


.course-detail-container {
}

.course-detail-image {
    width: 100%;
}

    .course-detail-image img {
        width: 100%;
        border-radius: 5px;
    }



.course-detail-summary {
    position: relative;
}

    .course-detail-summary i {
        vertical-align: middle;
        margin-right: 5px;
    }


.course-detail-btn-payment {
    width: 100%;
    height: 40px;
    border: 0px;
    color: white;
    background: #D00000;
    box-shadow: 0px 4px 4px -1px rgba(117, 117, 117, 0.35);
    border-radius: 5px;
    cursor: pointer;
}

.course-detail-btn-enroll {
    width: 100%;
    height: 40px;
    border: 0px;
    background: #F5D77F;
    box-shadow: 0px 4px 4px -1px rgba(117, 117, 117, 0.35);
    border-radius: 5px;
    cursor: pointer;
}

.course-detail-outline-title {
    background: #393939;
    border-radius: 5px 5px 0px 0px;
    padding: 10px;
}


.course-detail-outline-detail {
    width: 100%;
}

/*----- Course Video -----*/


.course-video-section {
    position: relative;
    background: #000000;
    margin: -15px;
    /*max-height: 450px;
    padding: 10px;
    background: white;
    box-sizing: border-box;
    resize: horizontal;
    border: 1px dashed;
    overflow: auto;
    max-width: 100%;
    height: calc(100vh - 16px);*/
}

.course-video-player {
    background-color: #000000;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    aspect-ratio: auto 16/9;
    /*background-color: #393939;
    aspect-ratio: auto 4/3;
    width: 90%;
    max-width: 800px;
    max-height: 360px;
    position: relative;
    margin: 0 auto;
    padding-top: 60%;
    background-color: #393939;
    width: 100%;
    padding-bottom: 75%;*/
}

.video-frame {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    aspect-ratio: auto 16/9;
}

.course-video-title-section {
    /*width: 100%;*/
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    padding: 15px;
}

.course-video-title {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 49.5%;
}

.course-video-label {
    /*margin-left: 15px;*/
}

.course-video-download-document {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 49.5%;
    /*right: 15px;*/
    text-align: right;
}

    .course-video-download-document img {
        vertical-align: middle;
    }


.course-video-progress-section {
    padding: 0px 15px 15px 15px;
}

.progress-bar {
    position: relative;
    width: auto;
    /* max-width: 800px;
    min-width: 315px;*/
    height: 19px;
    background: #DFDFDF;
    border-radius: 50px;
    margin: 0 auto;
}

.progress-percent-container {
    height: 15px;
    width: auto;
    /* max-width: 800px;
    min-width: 315px;*/
    text-align: center;
}

.progress-percent-text {
    position: absolute;
}

.progress-percent {
    background-color: green;
    /*width: 0%;*/
    height: 19px;
    border-radius: 50px;
}



.lesson-progress-bar {
    position: relative;
    width: 100%;
    height: 12px;
    background: #DFDFDF;
    border-radius: 50px;
    margin: 6px auto 0px;
}

.lesson-progress-percent-container {
    /*width: 100px;*/
    height: 12px;
    text-align: center;
}

.lesson-progress-percent {
    /*width: auto;
    max-width: 127px;
    min-width: 100px;
    text-align: center;
    height: 15px;
    position: absolute;
    margin-top: -2px;*/
    background-color: green;
    /*width: 0%;*/
    height: 12px;
    border-radius: 50px;
}

.lesson-progress-percent-label {
    position: absolute;
    left: 45%;
}


.course-video-outline-section {
    position: relative;
    margin-top: 30px;
    box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.25);
}

.inherit-line {
    display: inherit;
}

.same-line {
    display: inline !important;
}

.same-line-block {
    display: inline-block;
}


.course-video-lesson-icon {
    width: 19px;
    height: 19px;
}

.course-video-chapter-section {
    margin: 10px auto 10px;
    text-transform: none !important;
}


.course-video-lesson-item {
    margin-top: 4px;
    min-height: 25px;
}

.course-video-lesson-item-title {
    min-width: 200px;
    word-wrap: break-word;
    text-decoration: underline !important;
}


.course-video-lesson-item-title-section {
    /*float: left;
    width: 70%;*/
    min-width: 200px;
}

.course-video-lesson-item-progress-section {
    /*float: right;
    position: absolute;
    right: 10px;*/
}


.course-quiz-lesson-item-title-section {
    width: 60%;
    float: left;
}

.course-quiz-lesson-item-status-section {
    width: 40%;
    float: right;
    text-align: right;
}


.course-quiz-lesson-item-title-section-2 {
    width: 70%;
    float: left;
}

.course-quiz-lesson-item-status-section-2 {
    width: 30%;
    float: right;
    text-align: right;
}

.course-quiz-lesson-item-title {
    min-width: 150px;
    word-wrap: break-word;
    text-decoration: underline !important;
}

.top {
    vertical-align: top;
}

.middle {
    vertical-align: middle;
}


.course-video-lesson-quiz {
    /*padding-left: 20px;*/
}



/*----- Course Quiz -----*/

.course-final-quiz-information {
    width: 100%;
    /*text-align: center;*/
}

.course-final-quiz-information-history {
}

.course-final-quiz-information-history-header {
    height: 44px;
    background: #393939;
    border-radius: 5px 5px 0px 0px;
}

.round-column {
    min-width: 50px;
}

.date-column {
    min-width: 120px;
    width: 35%;
}

.score-column {
    min-width: 80px;
}

.course-final-quiz-information-history-detail {
    min-height: 30px;
    border: 1px solid #E2E2E3;
}


.course-final-quiz-information-detail {
    text-align: center;
    margin-top: 30px;
}

.course-quiz-question-title {
    background: #393939;
    border-radius: 5px;
    /*min-height: 44px;*/
    padding: 5px 10px;
    position: relative;
    height: auto;
    /*min-line-height: 20px;*/
}

.course-quiz-question-title-label {
    /*display: inline-block;*/
    vertical-align: middle;
    position: relative;
    height: 5px;
    line-height: normal;
}

.course-quiz-title-section {
    margin-bottom: 25px;
}


.course-quiz-question-section {
}

.course-quiz-choice-section {
    margin-top: 20px;
}

/* .course-quiz-choice-section td .aspNetDisabled {
        display: inherit;
    }*/

.course-quiz-answer-section {
    margin-top: 40px;
    text-align: center;
}


.radioButtonList {
    width: 100%;
    /*margin-top: 20px;*/
}

input[type='radio'] {
    background: #FDFEFF;
    border: 1px solid #F5D77F;
    box-sizing: border-box;
    /* width: 19px; */
    /* min-height: 19px; */
    left: 30px;
    top: 268px;
    background: #FDFEFF;
    border: 1px solid #F5D77F;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: auto;
}
/*
    input[type='radio']:after {
        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #d1d3d1;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }

    input[type='radio']:checked:after {
        width: 15px;
        height: 15px;
        border-radius: 15px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #ffa500;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 2px solid white;
    }*/

/*.radioButtonList [disabled] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}*/

.radioButtonList label {
    /*font-size: 20px;*/
    margin-left: 10px;
    display: flex;
    width: 100%;
}

.radioButtonList td {
    background: #FDFEFF;
    border: 1px solid #F5D77F;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
}

span.aspNetDisabled {
    display: inherit;
}

/*.radioButtonList td [disabled] {
    background: #FDFEFF;
    border: 1px solid #F5D77F;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
}*/

/*.radioButtonList tr {
        width: 100%;
    }*/
.answer-container {
    height: auto;
    background: #FDFEFF;
    box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    padding: 10px;
}

.answer-hint-label {
    padding-left: 10px;
}

.answer-text-container {
    padding: 15px;
}

.answerTextBox {
    width: 100%;
    height: auto;
    min-height: 300px;
    background: #F4F4F4;
    border-radius: 5px;
}



/*----- News -----*/
.my-news-images-container {
    margin-top: 30px;
    width: 100%;
}

.my-news-image {
    width: 100%;
    /*width: calc(90%/3);*/
}



.prospect-table-container {
    display: grid;
    grid-template-columns: 80px auto;
}

th:first-child, td:first-child {
    position: sticky;
    left: 0; /* or right: 0; */
}


.border-top {
    border-top: 1px solid #797979;
}

.border-right {
    border-right: 1px solid #E2E2E3;
}



/* width */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #DADADA;
    border-radius: 10px;
    background-color: #DADADA;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #F5D77F;
    border-radius: 10px;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #F5D77F;
    }




/* My Profile Image Map */
.figure-image {
    margin: 5px;
}



.line-middle {
    line-height: 33px;
    vertical-align: middle;
}


.subscription-image {
    width: 100%;
    max-width: 375px;
}




.report-container {
    margin: 0px auto;
}




@media screen and (max-width:768px) {
    .login-ever-logo {
        /*margin: 50px auto 0px;*/
    }

    .login-container {
        top: 200px;
    }

    /*.menu-bar-width {
        width: 100vw;
    }*/

    .course-item {
        margin: 0px 8px;
        width: calc(90%/2);
        margin-bottom: 16px;
        background: #FFFFFF;
        box-shadow: 0px 0px 5px -1px rgba(0, 0, 0, 0.25);
        border-radius: 5px;
    }


    .circular_profile_image {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        overflow: hidden;
        background-color: gold;
        display: inline-block;
        vertical-align: middle;
        border: 2px solid rgba(255,255,255,0.5);
    }

        .circular_profile_image img {
            width: 100%;
        }
}