@font-face {
    font-family: 'BeautySalon Script';
    src: url('../fonts/BeautySalon_Script.woff2') format('woff2'),
        url('../fonts/BeautySalon_Script.woff') format('woff'),
        url('../fonts/BeautySalon_Script.ttf') format('truetype'),
        url('../fonts/BeautySalon_Script.svg#BeautySalon_Script') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


body{
    font-family: "Roboto", serif;
    background: rgba(255, 255, 255, 0.95);
    /* overflow: hidden;    */
 }
 .layout-wrapper {
     margin: 60px;
     box-shadow: 0px 0px 25px 10px rgba(0, 0, 0, 0.1);
     border-radius: 24px;
     overflow: hidden; 
     background-color: rgba(0, 0, 0, 0.02);
     display: flex;
     flex-wrap: wrap;
 }
 body::-webkit-scrollbar-track
 {
     border-radius: 10px;
     background-color: rgba(1, 71, 96, 0.1); 
 }
 
 body::-webkit-scrollbar
 {
     width: 6px;
     background-color: rgba(1, 71, 96, 0.1);
 }
 
 body::-webkit-scrollbar-thumb
 {
     border-radius: 10px;
     background-color: #014760;
 }


 

 .user-status-section .card-body ul::-webkit-scrollbar-track
 {
     border-radius: 10px;
     background-color: rgba(1, 71, 96, 0.1); 
     margin-left: 10px;
 }
 
 .user-status-section .card-body ul::-webkit-scrollbar
 {
     width: 6px;
     background-color: rgba(1, 71, 96, 0.1);
     margin-left: 10px;
 }
 
 .user-status-section .card-body ul::-webkit-scrollbar-thumb
 {
     border-radius: 10px;
     background-color: #014760;
     margin-left: 10px;
 }


 .openbtn {
    width: 35px;
    height: 35px;
    position: relative;
    cursor: pointer;
    border-radius: 5px;
}
.openbtn svg{
    fill: #014760;
}
.openbtn.active{
    transform: rotate(180deg);
}
.openbtn span {
    display: inline-block;
    position: absolute;
    width: 100%;
    left: 0;
    height: 3px;
    border-radius: 2px;
    background: #014760;
    transition: all 0.4s;
}
.openbtn span:nth-of-type(1) {
    top: 0;
}
.openbtn span:nth-of-type(2) {
    top: 7px;
}
.openbtn span:nth-of-type(3) {
    top: 14px;
}
.openbtn.active span:nth-of-type(1) {
    top: 0;
    left: 0;
    transform: translateY(6px) rotate(-45deg);
    width: 100%;
}
.openbtn.active span:nth-of-type(2) {
    opacity: 0;
}
.openbtn.active span:nth-of-type(3) {
    top: 12px;
    left: 0;
    transform: translateY(-6px) rotate(45deg);
    width: 100%;
}



 .signin-sec .account-pages {
     height: 100vh;
     display: flex;
     align-items: center;
     background: rgba(0, 0, 0, 0.1);
 }
 .signin-sec .container{
     max-width: 1366px;
     background: #fff;
     padding: 0;
     box-shadow: 0px 0px 25px 10px rgba(0, 0, 0, 0.1);
     border-radius: 24px;
 }
 .signin-sec .row .login-left-main{
     display: flex;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
     /* padding: 150px 0; */
     padding: 50px;
     min-height: 80vh;
 }
 .login-left-main .form-check-label{
    font-size: 14px;
 }
 .reg-form-main {
    height: 80vh !important;
    overflow:auto;
    min-height: auto !important;
  }
 .signup-info .form-check-label {
    width: 91%;
    margin-left: 5px;
}
 .signin-sec .row .login-right-main{
     padding: 0px;
 }
 .login-right{
     background-color: #014760;
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100%;
 }
 .signin-sec h2{
     font-size: 30px;
     line-height: 1.1;
     padding-bottom: 55px;
     color: #000000;
     text-transform: uppercase;
     font-weight: 700;
     margin: 0;
     text-align: center;
 }
 .signin-sec #login-form, .signin-sec #resetPswdFrm-form, .signin-sec #resetPswdFrm{
     max-width: 364px;
 }

 .signin-sec .email-field, .signin-sec .password-field, .signin-sec .forgot-field{
    position: relative;
 }
 .signin-sec .email-field::before{
    content: "";
    position: absolute;
    width: 25px;
    height: 25px;
    left: 14px;
    top: 14px;
    background-image: url(../images/username-icon.svg);
    background-repeat: no-repeat;
 }
 .signin-sec .password-field::before{
    content: "";
    position: absolute;
    width: 25px;
    height: 25px;
    left: 14px;
    top: 14px;
    background-image: url(../images/password-icon.svg);
     background-repeat: no-repeat;
 }
 .signin-sec .forgot-field::before{
    content: "";
    position: absolute;
    width: 25px;
    height: 25px;
    left: 14px;
    top: 17px;
    background-image: url(../images/email.png);
    background-repeat: no-repeat;
    background-size: 21px;
 }
 .signin-sec .login-left-main  .form-control{
     padding: 18px 18px 18px 48px;
     font-size: 16px;
     line-height: 1.2;
     font-weight: 500;
     color: #333;
     border: none;
     background-color:rgba(0, 0, 0, 0.1);
     border-radius: 16px;
 }
 .fsq-sec select.form-control:disabled{
    opacity: 0.6;
    cursor: not-allowed;
 }
 #register-form .form-control, .signin-sec .login-left-main  .form-control.answer-input{
     padding: 18px 18px 18px 18px;
 }
 .forgot-link p{
     font-size: 14px;
     line-height: 1.1;
     font-weight: 400;
     color: rgba(0, 0, 0, 0.35);
     text-align: center;
     padding-bottom: 40px;
     margin-bottom: 0px;
 }
 .forgot-link a{
     font-weight: 600;
     color: #014760;
 }
 .login-btn{
     background-color: #A1CE3F;
     border-radius: 50px;
     box-shadow: 0px 8px 21px 0px rgba(0, 0, 0, 0.16);
     padding: 17px 32px;
     font-size: 16px;
     line-height: 1;
     font-weight: 700;
     text-transform: uppercase;
     color: #014760;
     border: none;
     transition: 0.3s ease-in;
     margin-bottom: 30px;
     display: flex;
    align-items: center;
 }
 .login-btn:hover{
     background-color: #014760;
     color: #fff;
 }
 .login-btn:hover i.bx-spin{
    color: #fff !important;
 }
 .login-btn i.bx-spin{
    position: absolute;
    opacity: 0;
 }
 .input-group>.form-control:focus, .input-group>.form-floating:focus-within, .input-group>.form-select:focus{
     background-size: auto;
     box-shadow: none;
 }
 .form-control.is-invalid, .was-validated .form-control:invalid{
     background-size: auto;
 }
 .form-check-label {
     font-size: 16px;
     line-height: 1.2;
     color: rgba(0, 0, 0, 0.35);
     font-weight: 400;
 }
 .form-check-label a {
     font-weight: 600;
     color: #014760;
 }
 #confirm-password-addon, #password-addon{
     border-top-right-radius: 16px;
     border-bottom-right-radius: 16px;
     background-color: rgba(0, 0, 0, 0.1);
     border: none !important;
     margin: 0px;
 }
 .card-account-page #password-addon {
     border-top-right-radius: 10px;
     border-bottom-right-radius: 10px;
     background-color:#ccc;
     border: none !important;
     margin: 0px;
 }
 .vertical-menu {
     background: #014760;
     top: 60px;
     z-index: 1003; 
     width: 19%;
     bottom: 60px;
     border-radius: 0 0 0 24px;
     position: static;
     padding-top: 60px;
 }
 .navbar-brand-box{
     background-color: #014760;
     width: auto;
     border-radius: 24px 0 0 0;
 }
 #page-topbar .navbar-brand-box{
    display: none;
 }
 #page-topbar .navbar-brand-box .logo-lg h5{
     color: #014760;;
 }
 #page-topbar .navbar-brand-box .logo-sm img{
     display: none;
 }
 #leftsidebar-menu {
     padding: 50px 0 30px 0;
     max-height: 100%;
     /* overflow: auto; */
 }
 .header-item{
     color: #014760;
 }
 .page-content {
     padding: calc(16px + 24px) calc(24px* .75) 60px calc(24px* .75);  
 }
 #page-topbar {
     box-shadow: none;
     border-radius: 24px 24px 0 0;
     top: 60px;
     right: 60px;
     left: 60px;
     background-color: #fafafa;
     position: static;
     padding: 15px 0;
 }
 .header-profile-user{
     background-color: transparent;
     width: 50px;
     height: 50px;
     border: 1px solid rgba(51, 51, 51, 0.5);
     padding: 0;
     margin-right: 5px;
     object-fit: cover;
 }
 #leftsidebar-menu ul li a{
    display: block;
     color: #fff !important;
     font-size: 16px;
     font-weight: 700;
     line-height: 1.1;
     text-transform: uppercase;
     padding: 20px 10px 20px 42px;
     border-top-left-radius: 60px;
     border-bottom-left-radius: 60px;
 }
 #leftsidebar-menu li.mm-active a{
     color: #fff;
     background-color: #A1CE3F;
     border-top-left-radius:60px;
     border-bottom-left-radius:60px;
 }
 #leftsidebar-menu li.mm-active .active, .mm-active .active i, #leftsidebar-menu ul li a i{
     color: #fff !important;
 }
 #leftsidebar-menu ul li a:hover {
     color: #fff;
 }
 .main-content {
    margin-left: auto;
    overflow: auto;
    /* height: calc(100vh - 120px); */
    /* margin-right: -60px; */
    width: 81%;
 }
  .metismenu{
     margin-left: 25px;
     margin-bottom: 180px;
 }
 .metismenu img {
     width: 35px;
     height: 35px;
     margin-right: 10px;
 }
 .vertical-collpsed .vertical-menu{
    width: 7% !important;
     z-index: 1003;
     bottom: 60px;
     position: static;
 }
 .vertical-collpsed .navbar-brand-box {
     width: 100px !important;
 }
 .vertical-collpsed .main-content {
    margin-left: 0;
    width: 93%;
 }
 .mm-active .active {
     color: #fff !important;
 }
 #leftsidebar-menu .sub-menu li.mm-active a{
     background-color: transparent;
     color: #A1CE3F !important;
 }
 .metismenu li{
     margin-bottom: 14px;
     border-top-left-radius: 60px;
     border-bottom-left-radius: 60px;
     transition: 0.3s ease-in;
 }
 .metismenu li a:hover {
     color: #fff;
     background-color: #A1CE3F;
     border-top-left-radius: 60px;
     border-bottom-left-radius: 60px;
 }
 #leftsidebar-menu .has-arrow:after{
     margin-top: 8px;
 }
 .metismenu ul.sub-menu li{
     margin-bottom: 15px;
 }
 .metismenu ul.sub-menu{
     padding: 20px 0 0 0 !important;
 }
 .metismenu ul.sub-menu li a{
     font-size: 16px !important;
 }
 .metismenu ul.sub-menu li:hover a{
     color: #A1CE3F !important; 
     background-color: transparent;  
 }
 .vertical-collpsed .vertical-menu #leftsidebar-menu>ul>li:hover a{
     background-color: #A1CE3F;
 }
 .vertical-collpsed .vertical-menu .simplebar-content-wrapper{
     overflow: hidden !important;
 }
 .vertical-collpsed .vertical-menu #leftsidebar-menu>ul>li>a{
    padding: 15px 5px 15px 25px;
 }
 .vertical-collpsed #leftsidebar-menu{
     padding: 10px 0 30px 0;
 }
 .vertical-collpsed .navbar-brand-box{
     padding: 0 5px;
     margin: 0 auto;
 }
 .logo {
     line-height: 95px;
 }
 /* .vertical-collpsed .vertical-menu{
     width: 207px !important;
 } */
 #page-header-user-dropdown span{
     font-weight: 600;
     color: #014760;
 }
 
 .page-title-box h4.page-title-main{
     font-size: 32px !important;
     line-height: 1.2;
     font-weight: 700;
     padding-bottom: 15px;
     color: #014760;
     text-transform: capitalize;
 }
 .card.mini-stats-wid{
     border-radius: 24px;
     box-shadow: 0px 0px 25px 2px rgba(0, 0, 0, 0.05);
 }
 .card.mini-stats-wid p{
     font-size: 18px;
     line-height: 1.7;
     color: #333333;
     font-weight: 400;
 }
 .section-title{
     font-size: 24px;
     line-height: 1.2;
     color: #014760;
     font-weight: 700;
 }
 .hori-timeline .events .event-list .event-down-icon::before{
     border-bottom: 6px solid rgba(51, 51, 51, 0.35);
     top:13px;
     z-index: -1;
     opacity: 60%;
 }
 .event-date .slider-count{
     color: #014760;
     font-size: 14px;
     font-weight: 700;
     text-align: left;
 }
 .event-down-icon .bx-disc:before{
     background-color: #fff;
     border-radius: 100%;
 }
 #videoCarousel .card{
     padding: 21px;
     box-shadow: 0px 0px 25px 2px rgba(0, 0, 0, 0.05);
 }
 #videoCarousel .card img{
     border-radius: 24px;
 }
 #videoCarousel .btn-custom{
     background-color: #A1CE3F !important;
     box-shadow: 0px 0px 25px 10px rgba(0, 0, 0, 0.1);
     padding: 19px 38px;
     font-size: 16px;
     font-weight: 700;
     line-height: 1.1;
     color: #014760 !important;
     text-transform: uppercase;
     border: none;
 }
 #videoCarousel .btn-custom:hover{
     border: none;
     background-color: #014760 !important;
     color: #fff !important;
 }
 #videoCarousel .card-body{
     text-align: center;
 }
 #videoCarousel .card-title{
     font-size: 22px;
     font-weight: 700;
     line-height: 1.2;
     margin-bottom: 15px;
     color: #333;
     min-height: 55px;
 }
 .course-counter{
     font-size: 14px;
     font-weight: 700;
     line-height: 1.1;
     padding-bottom: 10px;
     color: #014760 !important;
 }
 .video-carousel-thumb {
    position: relative;
    padding-bottom: 60%;
    width: 100%;
}
.video-carousel-thumb img {
    position: absolute;
    inset: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    object-fit: cover;
    border: none;
    padding: 0;
    border-radius: 24px;
}
#videoCarousel .btn-custom{
    display: inline-flex;
}
#videoCarousel .btn-custom svg{
    margin-left: 10px;
    padding-top: 1px;
}
#videoCarousel .btn-custom:hover svg path{
    fill:#fff;
}
 .hori-timeline .events .event-list .event-down-icon{
     text-align: left;
 }
 .custom-btn{
     padding: 17px 38px;
     font-size: 16px;
     font-weight: 700;
     line-height: 1.1;
     color: #fff;
     text-transform: uppercase;
     background-color: #014760;
     border-radius: 50px;
     transition: 0.3s ease-in;
     display: inline-block;
 }
 .custom-btn:hover{
     color: #014760 !important;
     background-color: #A1CE3F !important;
 }
 .btn.custom-btn:active, .btn.custom-btn:focus, .btn.custom-btn-green:active, .btn.custom-btn-green:focus{
    color: #fff !important;
    background-color: #014760 !important;
 }
 button.btn.carousel-prev, button.btn.carousel-next{
     background-color: #014760;
     border-radius: 100%;
     padding: 0;
     border: none;
 }
 button.btn.carousel-prev .bx, button.btn.carousel-next .bx{
     font-size: 25px;
     color: #fff;
     padding: 8px;
 }
 button.btn.carousel-prev:hover, button.btn.carousel-next:hover{
     background-color: #A1CE3F;
 }
 button.btn.carousel-prev:hover .bx, button.btn.carousel-next:hover .bx{
     color: #014760;
 }
 .custom-btn-green{
     padding: 17px 38px;
     font-size: 16px;
     font-weight: 700;
     line-height: 1.1;
     color: #014760;
     text-transform: uppercase;
     background-color: #A1CE3F;
     border-radius: 50px;
     transition: 0.3s ease-in;
     display: inline-block;
     text-align: center;
 }
 .custom-btn-green:hover{
     color: #fff;
     background-color: #014760;
 }
 .need-help-sec{
     border-radius: 24px;
     box-shadow: 0px 0px 25px 2px rgba(0, 0, 0, 0.05);
     padding: 40px;
 }
 .need-help-sec p{
     font-size: 18px;
     line-height: 1.7;
     color: #333333 !important;
     font-weight: 400;
     text-align: left;
 }
 .message-card {
     border: 2px solid #107E57;
     background-color: #fff;
     box-shadow: 0px 0px 25px 2px rgba(0, 0, 0, 0.05);
     border-radius: 10px;
     padding: 20px;
     font-size: 16px;
     line-height: 1.7;
     color: #333333 !important;
     font-weight: 400;
     position: relative;
     transition: 0.5s ease;
 }
 .message-card .msg-avtar img{
     border: 1px solid rgba(51, 51, 51, 0.5);
     width: 50px !important;
     height: 50px;
     object-fit: cover;
 }
 .message-card .msg-sender-name{
     color: #107E57;
     font-size: 18px;
     font-weight: 600;
     line-height: 1.2;
 }
 .message-card .message-time{
     color: #333;
     font-size: 18px;
     font-weight: 600;
     line-height: 1.2;
 }
 .message-card strong{
    color: #333;
 }
 .message-card:hover{
    background-color: rgba(0, 0, 0, 0.04);
 }
 .message-card:hover svg path{
    fill: #A1CE3F;
 }
 .message-card:hover .ms-3.text-success svg{
    margin-top: -10px;
    transition: 0.5s ease;
 }
 .sub-menu {
    display: none;
    transition: all 0.3s ease;
}
.sub-menu.active {
    display: block;
}
 .message-card p{
     font-size: 18px;
     line-height: 1.7;
     color: #333333 !important;
     font-weight: 400;
 }
 .card.card-account-page {
     border-radius: 24px;
     box-shadow: 0px 0px 25px 2px rgba(0, 0, 0, 0.05);
 }
 .card.card-account-page .card-body{
     padding: 50px 38px;
 }
 .form-label{
     font-size: 16px;
     line-height: 1.2;
     color: rgba(0, 0, 0, 0.35);
     font-weight: 400;
 }
 .form-group{
     margin-bottom: 35px;
 }
 .form-control{
     border-radius: 10px;
     border: 1px solid rgba(0, 0, 0, 0.1);
     padding: 10px 14px;
     font-size: 18px;
     line-height: 1.1;
     font-weight: 400;
     color: #333;
 }
 .profile-form-sec{
     margin: 0 -50px;
 }
 .profile-form-sec [class*='col-']{
     padding: 0 50px;
 }
 textarea.form-control{
     min-height: 40px;
 }
 .profile-form-sec [class*='col-'] .row{
     margin: 0px -15px;
 }
 .profile-form-sec [class*='col-'] .row [class*='col-']{
     padding: 0px 15px;
 }
 input:hover, textarea:hover{
     border-color: rgba(0, 0, 0, 0.1);
     background-color: #fff;
 }
 .profile-pic {
    display: inline-block;
    object-fit: cover;
    width: auto;
    height: 100%;
 }
 .file-upload {
     display: none;
 }
 .circle {
    border-radius: 100% !important;
    overflow: hidden;
    width: 128px;
    height: 128px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
 }
 .p-image {
     position: absolute;
     top: 50%;
     left: 0;
     color: #666666;
     transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
     background: rgb(102, 102, 102, 0.7);
     width: 100%;
     text-align: center;
     height: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
 }
   .p-image:hover {
     transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
   }
   .upload-button {
     font-size: 20px;
     width: 100%;
     height: 100%;
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
 }  
   .upload-button:hover {
     transition: all .3s cubic-bezier(.175, .885, .32, 1.275);
     color: #fff;
   }
 .change-profile-img{
     display: flex;
     align-items: center;
 }
 .change-profile-img .avtar-label{
     padding-left: 15px;
     font-size: 16px;
     font-weight: 400;
     color: rgba(0, 0, 0, 0.5);
 }
 button{
     border: none !important;
 }
 .purchase-history-card{
     border-radius: 24px;
     box-shadow: 0px 0px 25px 2px rgba(0, 0, 0, 0.05);
 }
 .purchase-history-card .card-body{
     padding: 30px 38px;
 }
 .purchase-history-card small{
     font-size: 16px;
     line-height: 1.2;
     color: rgba(0, 0, 0, 0.35);
     font-weight: 400;
     padding-bottom: 5px;
     display: inline-block;
 }
 .purchase-history-card h5{
     font-size: 20px;
     line-height: 1.2;
     font-weight: 400;
     color: #333;
     margin: 0px;
 }
 .video-list-course{
    position: relative;
 }
 .video-list-course .card{
     padding: 38px;
     border-radius: 24px;
     box-shadow: 0px 0px 25px 2px rgba(0, 0, 0, 0.05);
 }
 .video-list-course .video-js .vjs-tech{
     position: static;
 }
 .video-list-course .video-js{
     border-radius: 24px;
     overflow: hidden;
 }
 .video-list-course .avatar-title{
     background-color: #014760;
 }
 .video-list-course .avatar-title:hover{
    background-color: #A1CE3F;
}
.video-list-course .avatar-title:hover .mdi{
    color: #014760;
}
 .bg-custom{
    background-color: #014760;
 }
 .video-list-course p.badged{
     font-size: 14px;
     font-weight: 700;
     color: #014760 !important;
     line-height: 1.2;
     padding-bottom: 15px;
     margin: 0;
 }
 .video-list-course .progress{
     background-color: #A1CE3F;
     border-radius: 10px;
 }
 .video-list-course .progress-bar{
     background-color: #107E57;
     border-radius: 10px;
 }
 .video-list-course .remaining-text{
     color: rgba(51, 51, 51, 0.35);
     font-weight: 700;
 }
 .video-list-course h5{
     font-size: 20px;
     font-weight: 700;
     line-height: 1.1;
     margin-bottom: 15px;
     color: #333;
 }
 .video-list-course .text-eclipse-3line{
     font-size: 18px;
     line-height: 1.4;
     color: #333333;
     font-weight: 400;
 }
 .chat-container{
     margin: 0 !important;
 }
 .text-eclipse-1line{
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
 .chat-board-main{
     border-radius: 24px;
     box-shadow: 0px 0px 25px 2px rgba(0, 0, 0, 0.05);
     padding: 38px 20px;
 }
 .create-new-btn{
     /* text-align: right;
     display: flex;
     justify-content: flex-end; */
 }
 .chat-container .user-list .form-control{
     color: rgba(0, 0, 0, 0.35);
     padding: 11px 40px 11px 57px;
     font-weight: 500;
     line-height: 1.5;
     background-image: url(../images/search-icon.png);
     background-repeat: no-repeat;
     background-position: 15px 12px;
     background-size: 23px;
 }
 .create-new-btn .bx{
     font-size: 22px;
     line-height: 1.1;
     margin-right: 5px;
 }
 .create-new-btn .custom-btn-green{
     display: flex;
     align-items: center;
     justify-content: flex-end;
 }
 .user-list li{
     border: 2px solid #ccc;
     opacity: 50%;
     border-radius: 10px !important;
     padding: 19px;
     margin-bottom: 20px;
     cursor: pointer !important;
 }
 .user-list .list-group-item+.list-group-item{
     border-top-width:2px;
 }
 .user-list .avatar{
     margin-right: 15px;
     width: 40px;
     height: 40px;
 }
 .user-list .avatar img{
     border: 1px solid rgba(51, 51, 51, 0.5);
     background-color: #fff;
     width: 40px;
    height: 40px;
    object-fit: cover;
 }
 .user-list h6{
     color:#107E57;
     font-size: 14px;
     line-height: 600;
     line-height: 1.2;
     padding-bottom: 3px;
 }
 .user-list small.text-muted{
     color: #333;
     font-size: 14px;
     line-height: 1.2;
     font-weight: 400;
 }
 .user-list-avtar-sec{
     margin-bottom: 20px;
 }
 .user-list .lastchatmessage p{
     font-size: 16px;
     line-height: 1.2;
     color: #333 !important;
     margin: 0;
     word-break: break-word;
 }
 .list-url-action-icon .btn{
     padding-right: 0px;
 }
 .list-url-action-icon .btn-trash i{
     font-size: 22px;
     color: #333;
 }
 .list-url-action-icon .btn-arrow i{
     font-size: 26px;
     color: #333;
     opacity: 0.25;
 }
 .user-list li.active{
     opacity: 1;
     background-color: #014760;
     border: 2px solid #014760;
 }
 .user-list li.active h6, .user-list li.active small.text-muted, .user-list li.active .lastchatmessage p{
     color: #fff !important;
 }
 .user-list li.active .list-url-action-icon .btn-arrow i, .user-list li.active .list-url-action-icon .btn-trash i{
     opacity: 1;
     color: #fff;
 }
 .user-list-component {
     padding-right: 20px;
     height: 100vh;
 }
 .col-md-4.user-list{
    border-right: 1px solid rgba(51, 51, 51, 0.2);
 }
 
 .user-list-component::-webkit-scrollbar-track
 {
     border-radius: 10px;
     background-color: rgba(217, 217, 217, 0.2); 
 }
 
 .user-list-component::-webkit-scrollbar
 {
     width: 6px;
     background-color: rgba(217, 217, 217, 0.2);
 }
 
 .user-list-component::-webkit-scrollbar-thumb
 {
     border-radius: 10px;
     background-color: #D9D9D9;
 }
 .chat-conversion-main{
     padding-top: 0px;
     padding-bottom: 10px;
     height: calc(100vh - 300px);
    max-height: initial;
    overflow-y: auto;
    padding-right: 15px;
 }
 .chat-conversion-main::-webkit-scrollbar-track
 {
     border-radius: 10px;
     background-color: rgba(1, 71, 96, 0.1); 
 }
 
 .chat-conversion-main::-webkit-scrollbar
 {
     width: 6px;
     background-color: rgba(1, 71, 96, 0.1);
 }
 
 .chat-conversion-main::-webkit-scrollbar-thumb
 {
     border-radius: 10px;
     background-color: #014760;
 }
 .chat-message .avatar {
     margin-right: 15px;
     width: 40px;
     height: 40px;
 }
 .chat-message .avatar img {
     border: 1px solid rgba(51, 51, 51, 0.5);
     background-color: #fff;
     width: 40px;
    height: 40px;
    object-fit: cover;
 }
 .chat-message {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;  
     border-bottom: 1px solid rgba(51, 51, 51, 0.1);
 }
 .chat-message-inner{
     padding: 22px;
 }
 .chat-message strong{
     font-size: 16px;
     font-weight: 600;
     color: #333;
     line-height: 1.2;
 }
 .chat-message p{
     font-size: 14px;
     font-weight: 400;
     color: #333;
     line-height: 1.3;
 }
.msg-searchbar .form-control{
    width: 95%;
    padding: 12px 14px 12px 50px;
    background-image: url(../images/search-icon.png);
    background-repeat: no-repeat;
    background-position: 15px 12px;
    background-size: 20px;
}
.msg-searchbar{
    margin-bottom: 62px !important;
    width: 30%;
}
.msgbox-top-bar .custom-btn-green{
    padding: 15px 35px;
    font-size: 16px;
    text-transform: uppercase;
    transition: none;
}
.msgbox-top-bar .custom-btn-green:hover{
    background-color: #014760;
    color: #fff;
}
.msgbox-top-bar .custom-btn-green:hover svg path{
    fill:#fff;
}
.msgbox-top-bar .custom-btn-green i{
    color:#014760;
}
.msgbox-top-bar .custom-btn-green svg{
    margin-right: 10px;
}
.msg-filterbtn .custom-btn{
    border-radius: 10px;
    padding: 10px;
    width: 49px;
    height: 49px;
    transition: none;
}
.msg-filterbtn .custom-btn:hover{
    background-color: #A1CE3F !important;
}
.me-2.msg-filterbtn .custom-btn:hover svg path{
    fill: #A1CE3F;
    stroke: #014760;
}
.msg-filterbtn .custom-btn:hover svg path{
    fill: #014760;
    stroke: none;
}
.msg-filtersort button{
    background-color: #014760;
    border: none;
    border-radius: 10px;
    padding: 12px;
    font-size: 16px;
    line-height: 1.2;
    color: #fff;
    min-height: 49px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.msg-filtersort button:hover{
    background-color: #A1CE3F;
    color: #014760;
}
.msg-filtersort button:hover svg path{
    fill: #014760;
}
.chat-header{
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(51, 51, 51, 0.2);
}
.chat-header h5{
    color: #333;
}
.chat-container .col-md-8.msgbox-top-bar, .chat-container .col-md-8.chat-messages{
    width: 70% !important;
}
.chat-reset-link{
    margin-left: 10px;
}
.msg-filterbtn + .chat-reset-link{
    margin-left: auto;
}

 .tox-tinymce {
     border-radius: 0px;
     border: none !important;
 }
 .tox .tox-toolbar__primary{
     background: transparent !important;
     border: none !important;
 }
 .tox:not(.tox-tinymce-inline) .tox-editor-header{
     box-shadow: none !important;
 }
 .msg-send-btn{
     float: right;
 }
 .msg-send-btn i{
     font-size: 36px;
     color: #014760;
 }
 .msg-send-btn i:hover{
    color: #A1CE3F;
 }
 .chat-message.sent .chat-message-inner{
     background: rgba(16, 126, 87, 0.07);
     margin: 10px 0;
     border-radius: 10px;
 }
 .chat-message-right {
     width: calc(100% - 55px);
 }
 .user-list-name-avtar{
     width: calc(100% - 75px);
 }
 #video-list-scroll {
     max-height: 58vh !important;
 }
 #video-list-scroll .mCSB_inside > .mCSB_container {
     margin-right: 40px;
     padding: 26px 15px;
 }
 #video-list-scroll .mCSB_scrollTools.mCSB_scrollTools_vertical {
     opacity: 1 !important;
     padding-bottom: 32px !important;
     right: 0px;
     top: 90px;
 }
 .mCSB_scrollTools.mCSB_scrollTools_vertical a.mCSB_buttonUp, .mCSB_scrollTools.mCSB_scrollTools_vertical a.mCSB_buttonDown {
     height: 32px;
     width: 32px;
     background: #014760;
     z-index: 1;
     position: absolute;
     opacity: 1;
     border-radius: 100%;
     top: -50px;
 }
 .mCSB_scrollTools.mCSB_scrollTools_vertical a.mCSB_buttonUp {
     right: 0px;
     top: -90px !important;
     transform: rotate(90deg);
 }
 .mCSB_scrollTools.mCSB_scrollTools_vertical a.mCSB_buttonUp:hover, .mCSB_scrollTools.mCSB_scrollTools_vertical a.mCSB_buttonDown:hover{
    background-color: #A1CE3F;
 }
 .mCSB_scrollTools.mCSB_scrollTools_vertical a.mCSB_buttonUp:hover:after, .mCSB_scrollTools.mCSB_scrollTools_vertical a.mCSB_buttonDown:hover:after{
    color: #014760;
 }
 .mCSB_scrollTools.mCSB_scrollTools_vertical a.mCSB_buttonUp:after {
     position: absolute;
     content: "\ea9b";
     font-family: boxicons !important;
     color: #fff;
     font-size: 21px;
     left: 6px;
     top: 0px;
 }
 .mCSB_scrollTools .mCSB_draggerContainer {
     margin: inherit !important;
     right: 3px;
 }
 .mCSB_scrollTools.mCSB_scrollTools_vertical .mCSB_dragger .mCSB_dragger_bar {
     width: 7px !important;
     background: #014760 !important;
     border-radius: 0 !important;
     right: 7px;
     
 }
 .mCSB_draggerRail {
     display: none;
 }
 .mCSB_scrollTools.mCSB_scrollTools_vertical a.mCSB_buttonDown {
     right: 0px !important;
     margin: inherit;
     transform: rotate(90deg);
 }
 .mCSB_scrollTools.mCSB_scrollTools_vertical a.mCSB_buttonDown:after {
     position: absolute;
     content: "\eb1c";
     font-family: boxicons !important;
     color: #fff;
     font-size: 21px;
     left: 6px;
     top: 0px;
 }
 .mCSB_scrollTools:after {
     background: rgba(1, 71, 96, 0.2);
     height: 100%;
     width: 3px;
     content: "";
     position: absolute;
     top: 0px;
     left: 0px;
 }
 #videoCarousel a.preview-video:hover{
    color: #A1CE3F;
 }
 
 #videoPlayer{
     border-radius: 25px;
     overflow: hidden;
    height: inherit;
    width: inherit;
 }
 #videoPlayer.video-js .vjs-control-bar{
     background-color: #A1CE3F !important;
 
 }
 .watch-video-counter span{
     font-size: 20px;
     line-height: 1.2;
     color: #014760;
     font-weight: 600;
 }
 .video-description-main h2{
     font-size: 28px !important;
     line-height: 1.2;
     font-weight: 700;
     color: #014760;
     text-transform: capitalize;
 }
 .video-description-main{
     font-size: 18px;
     line-height: 1.7;
     color: #333333 !important;
     font-weight: 400;
 }
 .card.video-detail-slider {
     border-radius: 24px;
     box-shadow: 0px 0px 25px 10px rgba(0, 0, 0, 0.1);
     background-color: rgba(0, 0, 0, 0.02);
     padding: 30px;
 }
 .dashboard-statistics .col-md-6{
    margin-bottom: 12px;
 }
 .dashboard-statistics .card-body{
     padding: 50px 30px;
 }
 .dashboard-statistics .card h4{
     font-size: 30px;
     line-height: 1;
     color: #fff;
     font-weight: 600;
     margin: 0;
 }
 .dashboard-statistics .card .card-body img {
     width: 70px !important;
     height: 70px !important;
     object-fit: contain;
 }
 .dashboard-statistics .card p{
     font-size: 18px;
     font-weight: 400;
 }
 .user-status-section .card{
     box-shadow: 0px 0px 25px 2px rgba(0, 0, 0, 0.05);
     border-radius: 24px;
 }
 .user-status-section .card .card-body{
     padding: 32px;
 }
 .user-status-section h5.card-title{
     font-size: 20px;
     font-weight: 700;
     line-height: 1.1;
     margin-bottom: 15px;
     color: #014760;
     margin: 0;
 }
 .user-status-section p{
     color: #666666;
 }
 .view-all-btn{
     text-transform: uppercase;
     font-size: 16px;
     font-weight: 700;
     color: rgba(51, 51, 51, 0.5);
     text-decoration: underline !important;
 }
 .view-all-btn:hover{
    color: #014760;
 }
 .user-status-section .card-body ul{
    max-height: 300px;
    overflow-y: auto;
    padding-right: 10px;
    margin-right: -15px;
 }
 .user-status-section li{
     padding: 14px 0 !important;
     border-bottom: 1px solid rgba(51, 51, 51, 0.25) !important; 
 }
 .user-status-section li:first-child{
     border-top: 1px solid rgba(51, 51, 51, 0.25) !important;
 }
 .user-status-section li:last-child{
     border-bottom: none !important;
 }
 .user-status-section li img.user-list-avtar{
     border-radius: 100%;
 }
 .user-status-section li span{
     color:#666666;
     font-size: 18px;
     line-height: 1.1;
     font-weight: 400;
     min-width: 200px;
     padding: 0 5px;
 }
 .user-status-section li span + span{
    min-width: 140px;
 }
 .user-status-section li a{
     width: 34px;
     height: 34px;
     border-radius: 8px;
     background-color: #014760;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 .user-status-section li a:hover{
    background-color: #A1CE3F;
 }
 .user-status-section li a:hover svg path{
    stroke: #014760;
 }
 .user-progression-sec .chart-container{
     box-shadow: 0px 0px 25px 2px rgba(0, 0, 0, 0.05);
     background-color: #fff;
     border-radius: 24px;
     padding: 32px;
     margin-top: 0px;
     display: block;
 }
 .chart-container canvas{
     margin: 0 auto;
 }
 .chart-legend th{
     font-size: 18px;
     color: rgba(51, 51, 51, 0.5);
     font-weight: 400;
     line-height: 1.1;
     padding: 12px 0;
     white-space: nowrap;
     text-transform: uppercase;
 }
 .chart-legend th:last-child{
    text-align: right;
 }
 .chart-legend td{
     font-size: 18px;
     font-weight: 400;
     color: #333333;
     padding: 16px 0;
     border: none;
 }
 .chart-legend tr td:first-child{
     display: flex;
     gap:10px;
     align-items: center;
     flex-direction: row-reverse;
     justify-content: flex-end;
 }
 .chart-legend tr td:last-child{
     text-align: right;
 }
 .chart-legend .legend-color{
     width: 20px;
     height: 20px;
     min-width: 20px;
 }
 .dataTables_wrapper .dataTable thead tr{
     background-color: #A1CE3F;
     color: #014760;
     border: none;
 }
 .dataTables_wrapper .dataTable thead tr th{
     font-size: 16px;
     line-height: 1.1;
     border: none;
 }
 div.dataTables_scrollHead table.table-bordered{
     border: none;
     border-radius: 10px;
     overflow: hidden;
 }
 .table-bordered>:not(caption)>*{
     border-top: none;
 }
 .dataTables_wrapper td img.table-avtar{
     width: 40px !important;
     height: 40px;
     border-radius: 100%;
     margin-right: 20px;
     object-fit: cover;
 }
 table.table-bordered.dataTable{
     border: none;
 }
 table.table-bordered.dataTable tbody th, table.table-bordered.dataTable tbody td{
     border: none;
     font-size: 18px;
     font-weight: 400;
     color: #666666;
     vertical-align: middle;
 }
 table.table-bordered.dataTable tbody tr{
     border-bottom: 1px solid rgba(51, 51, 51, 0.25);
 }
 table.dataTable thead .sorting:after, table.dataTable thead .sorting:before{
     color: #014760;
     opacity: 1;
 }
 table.dataTable .table-view-link a{
     width: 34px;
     height: 34px;
     border-radius: 8px;
     background-color: #014760;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 table.dataTable .table-view-link a:hover{
    background-color: #A1CE3F;
 }
 table.dataTable .table-view-link a:hover svg path{
    stroke: #014760;
 }
 table.dataTable .table-view-link a:hover i{
    color: #014760 !important;
 }
 .dataTables_paginate .active>.page-link, .page-link.active{
    background-color: #014760;
    border-color: #014760;
 }
 .register-link{
     font-size: 14px;
     line-height: 1.1;
     font-weight: 400;
     color: rgba(0, 0, 0, 0.35);
     text-align: center;
     /* padding-bottom: 40px; */
     margin-bottom: 0px;
 }
 .register-link a{
     color: #014760;
     font-weight: 600;
     font-size: 14px;
 }
 #page-header-user-dropdown .mdi-chevron-down::before{
     font-size: 16px;
     font-weight: 600;
 }
 #page-topbar .dropdown-item{
     font-size: 16px;
     font-weight: 400;
     color: #333;
 }
 .notification-top-icon{
     padding: 10px 12px 0 0;
 }
 .notification-top-icon img, .notification-top-icon svg{
     width: 40px;
     height: auto;
 }
 .notification-top-icon svg:hover path{
    fill: #A1CE3F;
 }
 .notification-top-icon .badge{
     background-color:#FB1C66 !important;
 }
 .notification-content h6{
     font-size: 18px;
     color: #014760;
     font-weight: 600;
 }
 .notification-content p{
     font-size: 16px;
     color: #333333;
 }
 .simplebar-content{
     /* min-height: 100%; */
     display: flex;
     flex-direction: column;
 }
 .logout-link {
     margin-top: auto;
     padding-left: 25px;
     padding-bottom: 50px;
     background-color: #014760;
     padding-top: 25px;
     border-bottom-left-radius: 24px;
     position: absolute;
    bottom: 0;
    width: 100%;
 }
 .logout-link a{
     color: #fff !important;
     font-size: 16px;
     font-weight: 700;
     line-height: 1.1;
     text-transform: uppercase;
     padding: 20px 10px 20px 42px;
 }
 .logout-link a img{
     margin-right: 15px;
 }
 .vertical-collpsed .vertical-menu .logout-link{
     text-align: center;
     padding-left: 20px;
     padding-right: 20px;
 }
 .vertical-collpsed .vertical-menu .logout-link a img{
    margin-right: 0px;
 }
 .vertical-collpsed .vertical-menu .logout-link a{
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     padding: 0;
 }
 .vertical-collpsed .vertical-menu .logout-link a img{
     margin-bottom: 10px;
 }
 .logout-link a i{
     display: inline-block;
     min-width: 1.75rem;
     padding-bottom: .125em;
     font-size: 1.25rem;
     line-height: 1.40625rem;
     vertical-align: middle;
     color: #fff;
     -webkit-transition: all .4s;
     transition: all .4s;
 }
 #leftsidebar-menu::-webkit-scrollbar-track
 {
     border-radius: 10px;
     background-color: #ccc; 
 }
 
 #leftsidebar-menu::-webkit-scrollbar
 {
     width: 6px;
     background-color: #ccc;
 }
 
 #leftsidebar-menu::-webkit-scrollbar-thumb
 {
     border-radius: 10px;
     background-color: #A1CE3F;
 }
 .vertical-collpsed .vertical-menu #leftsidebar-menu>ul>li:hover>a span {
     display: none;
 }
 .vertical-collpsed .vertical-menu #leftsidebar-menu>ul>li:hover>ul{
     /* display: none; */
 }
 .vertical-collpsed .vertical-menu #leftsidebar-menu>ul>li:hover>a{
     width: auto;
 }
 .vertical-collpsed .vertical-menu #leftsidebar-menu>ul>li>a span{
    display: none;
    padding-left: 25px;
 }
 .vertical-collpsed .vertical-menu .metismenu {
     margin-left: 15px;
 }
 #leftsidebar-menu ul li ul.sub-menu li a{
     background-color: transparent !important;
     padding: .4rem 1.5rem .4rem 3.5rem;
     display: flex;
        /* flex-wrap: wrap; */
        align-items: center;
 }
 .chat-messages p{
     font-size: 14px;
 }
 .chat-message-right{
     font-size: 14px;
 }
 .hori-timeline ul {
     display: flex;
     justify-content: space-between;
     padding: 0;
     border-bottom: 6px solid rgba(51, 51, 51, 0.35);
 }
 .hori-timeline ul li{
     list-style: none;
     position: relative;
     flex: 1 0 0%;
 }
 .hori-timeline ul li.active + li.active:after {
     content: "";
     width: 100%;
     height: 6px;
     background-color: #107E57;
     position: absolute;
     left: unset;
     bottom: -5px;
     right: 100%;
 }

 .hori-timeline ul li span{
     font-size: 16px;
     line-height: 1.1;
     color: rgba(1, 71, 96, 0.35);
     font-weight: 700;
     position: relative;
     padding-bottom: 20px;
     display: block;
     text-align: left;
 }
 .hori-timeline ul li span:before{
     content: "";
     width: 18px;
     height: 18px;
     background-color: #107E57;
     bottom: -11px;
     left: -4px;
     position: absolute;
     border-radius: 100%;
     z-index: 1;
 }
 .hori-timeline ul li.active:before {
     position: absolute;
     content: "";
     height: 10px;
     width: 10px;
     border: 5px solid #A1CE3F;
     width: 34px;
     height: 34px;
     border-radius: 100%;
     bottom: -19px;
     left: -12px;
     z-index: 1;
     background: #fafafa;
 }
 .hori-timeline ul li.active span{
     color: #014760;
 }
 .hori-timeline ul li.active.completed:before {
     background: transparent;
     display: none;
 }
 .hori-timeline ul li:last-child {
     flex: 0 0 0%;
 }
 .report-chart-card {
    padding: 32px;
    box-shadow: 0px 0px 25px 2px rgba(0, 0, 0, 0.05);
    border-radius: 24px;
    background-color: #fff;
}
.chart-years-block{
    border-bottom: 2px solid #013016;
}
.years-chart-btn{
    font-size: 16px;
    line-height: 1;
    font-weight: 600;
    color: #fff;
    padding: 10px 20px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #013026;
    min-width: 99px;
}
.years-chart-btn:nth-child(3n-1){
    background-color: #014760;
}
.years-chart-btn:nth-child(4n-1){
    background-color: #107E57;
}
.years-chart-btn:nth-child(5n-1){
    background-color: #A1CE3F;
}
.reports-progression{
    box-shadow: 0px 0px 25px 2px rgba(0, 0, 0, 0.05);
    background-color: #fff;
    border-radius: 24px;
    padding: 32px;
    margin-top: 0px;
    display: block;
}
.reports-progression canvas {
    margin: 0 auto;
}

#data-table_wrapper .bottom{
    margin-top: 25px;
    align-items: center;
}
.dataTables_paginate .paginate_button{
    margin-right: 10px;
    border-radius: 100%;
}
.dataTables_paginate .paginate_button a{
    width: 40px;
    height: 40px;
    border-radius: 100% !important;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    font-weight: 600;
    color: #fff;
}
.dataTables_paginate .paginate_button:hover a{
    background-color: #A1CE3F !important;
    color: #014760;
}
.dataTables_paginate .paginate_button:hover a i{
    color: #014760 !important;
}
.dataTables_paginate .paginate_button a i{
    font-size: 24px;
    line-height: 1;
    color: #fff;
}
.dataTables_paginate .pagination span.ellipsis{
    display: flex;
    align-items: end;
    font-size: 20px;
    line-height: 1;
    margin-right: 6px;
}
#data-table_wrapper .bottom label{
    margin-bottom: 0;
}
#data-table_wrapper .bottom select{
    min-width: 90px;
    border: none;
    border-radius: 60px;
    background-color: #014760 !important;
    color: #fff;
    text-align: left;
    font-size: 18px;
    line-height: 1;
    font-weight: 600;
    min-height: 40px;
    background: url(../images/Vector.svg) no-repeat;
    background-position: calc(100% - 20px) center !important;
    -moz-appearance: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    padding: 10px 20px;
}
.dataTables_paginate .paginate_button a{
    background-color: #014760;
    border: none;
}
/* #data-table_wrapper .bottom select:hover{
    background: url(../images/blue-arrow-h.svg) no-repeat;
    background-color: #A1CE3F !important;
    color: #014760;
} */
.form-select:focus{
    outline: none;
    box-shadow: none;
}
.form-select option{
    padding: 3px 10px !important;
}
.report-user-video li{
    padding: 14px 0 !important;
    border-bottom: 1px solid rgba(51, 51, 51, 0.25) !important; 
}
.report-user-video li:first-child{
    border-top: 1px solid rgba(51, 51, 51, 0.25) !important;
}
.report-user-video li:last-child{
    border-bottom: none !important;
}
.report-user-video li img.user-list-avtar{
    border-radius: 100%;
    width: 50px !important;
    height: 50px;
    object-fit: cover;
}
.report-user-video li span{
    color:#666666;
    font-size: 18px;
    line-height: 1.1;
    font-weight: 400;
    min-width: 200px;
}
.report-user-video li a{
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background-color: #014760;
    display: flex;
    justify-content: center;
    align-items: center;
}
.report-user-video li a:hover{
    background-color: #A1CE3F;
}
.report-user-video li a:hover svg path{
    stroke: #014760;
}
.reports-progression .chart-legend{
    padding: 0 20px;
}
/* .reports-progression .legend-item:hover td .div-col{
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.35);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-right: 0px;
}
.reports-progression .legend-item:hover td .div-col-last{
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.35);
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-left: 0px;
} */
.reports-progression .div-col{
    display: flex;
    align-items: center;
    gap:10px;
}
.reports-progression .chart-legend tr td:first-child{
    display: block;
}
.reports-progression .chart-legend tr td .div-col {
    border: 1px solid #fff;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-right: 0px;
}
.reports-progression .chart-legend tr td .div-col-last{
    border: 1px solid #fff;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-right: 0px;
}
.reports-progression .chart-legend td{
    padding: 1px 0;
}
.reports-progression .chart-legend td .div-col, .reports-progression .chart-legend td .div-col-last{
    padding: 16px 14px;
}
.reports-progression .chart-legend th{
    padding: 12px 14px;
}
.reports-progression .chart-legend .div-col span{
    overflow: hidden;
  text-overflow: ellipsis;
}
.reports-progression tr.legend-item:hover:before {
    position: absolute;
    content: "";
    border: 1px solid rgba(0, 0, 0, 0.35);
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
.reports-progression tr.legend-item{
    position: relative;
}

.profile-card, .user-profile-detail-card .card{
    box-shadow: 0px 0px 25px 2px rgba(0, 0, 0, 0.05);
    border-radius: 24px;
    padding: 24px;
    background-color: #fff;
    height: 100%;
}
.profile-card img{
    width: 100px;
    height: 100px;
    object-fit: cover;
}
.profile-card .custom-btn-green{
    min-width: 212px;
}
.profile-card h5{
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 15px;
    color: #333;
}
.user-profile-detail-card p{
    font-size: 18px;
    line-height: 1.1;
    font-weight: 400;
    color: #333333;
    margin-bottom: 30px;
    display: flex;
    line-break: anywhere;
}
.user-profile-detail-card p:last-child{
    margin: 0;
}
.user-profile-detail-card p strong{
    font-weight: 400;
    color: rgba(0, 0, 0, 0.35);
    min-width: 140px;
}
.user-profile-detail-card, .user-profile-detail-card .row, .user-profile-detail-card .col-md-6{
    height: 100%;
}
.user-profile-last-sec .course-status{
    padding-right: 50px;
}
.user-profile-last-sec .progress-item{
    border-top: 1px solid rgba(51, 51, 51, 0.25);
    padding-left: 30px;
}
.user-profile-last-sec .progress-item.opacity-50 .progress-text{
    color: rgba(51, 51, 51, 0.5);
}
.progress-text{
    font-size: 18px;
    line-height: 1.1;
    font-weight: 700;
    color: #014760;
}
.course-status-accordion .award-icon-progress img{
    width: 23px;
}
.course-management-table a, .course-management-table button, .module-management-table a, .module-management-table button{
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background-color: #014760;
    display: flex;
    justify-content: center;
    align-items: center;
}
.course-management-table a i, .module-management-table a i{
    color: #fff !important;
    font-size: 18px !important;
}
.course-management-table a:hover, .course-management-table button:hover, .module-management-table a:hover, .module-management-table button:hover{
    background-color: #A1CE3F;
}
.course-management-table a:hover i, .course-management-table button:hover i, .module-management-table a:hover i, .module-management-table button:hover i{
    color: #014760 !important;
}
.card.edit-course-form{
    border-radius: 24px;
    box-shadow: 0px 0px 25px 2px rgba(0, 0, 0, 0.05);
}
.card.edit-course-form .card-body {
    padding: 50px 38px;
}
.edit-form-row {
    margin: 0 -50px;
}
.edit-form-row [class*='col-'] {
    padding: 0 50px;
}
.form-check-input:checked{
    background-color: #A1CE3F;
    border-color: #A1CE3F;
}
.form-check-input:focus{
    box-shadow: none;
}
.table-toggle{
    color: #fff;
}
.table-toggle:hover, .table-toggle:focus{
    background-color: #014760;
    color: #fff;
}
.module-management-table table.dataTable th:last-child{
    width: 85px !important;
}
.breadcrumb-item a, .breadcrumb-item{
    font-size: 16px;
    font-weight: 400;
    color: #666666;
}
.breadcrumb-item.active{
    color: #014760;
}
.edit-course-form #password-addon, .edit-course-form #new-password-addon{
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: #ccc;
    border: none !important;
    margin: 0px;
}
.award-icon-progress{
    width: 50px;
    text-align: center;
}
.award-icon-progress img{
    width: 30px;
}
.course-status .progress{
    width: 62%;
    margin-top: 12px;
}
.add-module-form .tox-tinymce{
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    padding: 10px 14px;
    font-size: 16px;
    line-height: 1.1;
    font-weight: 400;
    color: #333;
}
.module-thumb-img {
    width: 100px !important;
    height: 60px !important;
}
.module-thumb-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.module-inner-table tr th{
    font-size: 16px !important;
    color: #014760 !important;
    font-weight: 600 !important;
    font-family: "Roboto", serif;
}
table.dataTable{
    font-family: "Roboto", serif; 
}
.module-inner-table thead tr th:first-child{
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.module-inner-table thead tr th:last-child{
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.module-inner-table thead tr{
    border-bottom: none !important;
}
.dropzone{
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    padding: 10px 14px;
}
tr.shown td button i{
    transform: rotate(180deg);
}
.videos-of-title{
    color: #014760;
    font-size: 18px;
    font-weight: 600;
}
.module-management-table button i{
    font-size: 20px !important;
}
.chat-start-note p {
    font-size: 20px;
    text-align: center;
    color: #014760;
    font-weight: 600;
    margin-bottom: 0px;
}
.select-dropdown-module .form-control{
    background-color: #014760;
    border: 1px solid #014760;
    color: #fff;
    background-color: #014760 !important;
    border: 1px solid #014760;
    color: #fff;
    background: url(/assets/images/Vector.svg) no-repeat;
    background-position: calc(100% - 10px) center !important;
    -moz-appearance: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    padding: 14px 35px 14px 20px;
    border-radius: 40px;
    width: auto;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
} 
/* .select-dropdown-module .form-control:hover{
    background-color: #A1CE3F !important;
    border: 1px solid #A1CE3F;
    color: #014760;
    transition: 0.3s ease-in;
    background: url(../images/blue-arrow-h.svg) no-repeat;
} */
.preview-video{
    font-size: 16px;
    font-weight: 700;
    color: #014760;
    text-decoration: underline !important;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 99;
}
.preview-video:hover{
    color: #A1CE3F;
}
.watch-full-video-show{
    position: relative;
}
/* .mail-smtp-setting-sec .form-check-input:checked[type=checkbox]{
    width: 20px;
    height: 20px;
    margin-right: 5px;
    margin-top: 0;
} */
.payment-credentials-sec .nav-tabs-custom .nav-item .nav-link.active{
    color: #014760;
    font-size: 18px;
    font-weight: 600;
    font-family: "Roboto", serif;
}
.payment-credentials-sec .nav-tabs-custom .nav-item .nav-link::after{
    background: #014760;
}

.video-step-progrees ul.stepper {
    display: flex;
    list-style: none;
    justify-content: space-between;
    background: linear-gradient(#33333359 0 0) no-repeat 50% calc((80px - 3px) / 2) / 97% 6px;
    /* counter-reset: step; */
    padding: 0px 9px 40px;
    margin: 0;
    font-size: 22px;
    font-weight: bold;
    overflow: hidden;
}
.video-step-progrees ul.stepper li {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
    /* place-items: center; */
    gap: 15px;
    font-family: sans-serif;
    position: relative;
}
.video-step-progrees ul.stepper li::before {
    content: " ";
    display: grid;
    place-content: center;
    aspect-ratio: 1;
    height: 18px;
    /* border: 5px solid #fff; */
    box-sizing: border-box;
    background: #107E57;
    color: #A1CE3F;
    border-radius: 50%;
    font-family: monospace;
    z-index: 11;
}
.video-step-progrees ul.stepper li.active::after {
    content: "";
    position: absolute;
    height: 6px;
    right: 100%;
    top: calc((80px - 3px) / 2) ;
    width: 100vw;
    background: #107E57;
}
.video-step-progrees ul.stepper li.active::before {
    background: #107E57;
    color: #fff;
}
.video-step-progrees ul.stepper li span{
    font-size: 16px;
    line-height: 1.1;
    color: rgba(1, 71, 96, 0.35);
    font-weight: 700;
    position: relative;
    padding-bottom: 0px;
    display: block;
    text-align: center;
}
.video-step-progrees ul.stepper li.active span{
    color: #107E57;
}
.video-step-progrees ul.stepper li.round-stop span::before{
    content: "";
    width: 36px;
    height: 36px;
    border: 5px solid #A1CE3F;
    position: absolute;
    top: 134%;
    left: -9px;
    border-radius: 100%;
    background-color: #fff;
    z-index: 1;
}
.video-step-progrees{
    margin-bottom: 10px;
    position: relative;
}
/* .user-module-progress .video-step-progrees ul.stepper li.round-stop span::before{
    top: 23px;
} */
.stepper::after {
    content: "";
    width: 15px;
    height: 20px;
    left: 0px;
    top: 32px;
    background-color: #fafafa;
    position: absolute;
}
.stepper::before {
    content: "";
    width: 15px;
    height: 20px;
    right: 0px;
    top: 32px;
    background-color: #fafafa;
    position: absolute;
}
/* .course-module-progress .video-step-progrees ul.stepper li.active span::before{
    top: 23px;
} */
#videoModal .dz-button{
    color: #014760;
    font-size: 20px;
    font-weight: 400 !important;
    line-height: 1.1;
    padding: 15px 0;
}
#videoModal .dz-button i{
    font-size: 40px;
    line-height: 1.1;
    margin-bottom: 10px;
}

.add-modal-scroll#videoModal .modal-body{
    height: 70vh !important;
    overflow-y: scroll !important;
}
.modal-body::-webkit-scrollbar-track
 {
     border-radius: 10px;
     background-color: rgba(1, 71, 96, 0.1); 
 }
 
 .modal-body::-webkit-scrollbar
 {
     width: 6px;
     background-color: rgba(1, 71, 96, 0.1);
 }
 
 .modal-body::-webkit-scrollbar-thumb
 {
     border-radius: 10px;
     background-color: #014760;
 }

 .video-list-thumb {
    position: relative;
    padding-bottom: 60%;
    width: 100%;
}
.video-list-thumb img {
    position: absolute;
    inset: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    object-fit: cover;
    border: none;
    padding: 0;
    border-radius: 24px;
}
.watch-full-video-show .video-js .vjs-progress-holder{
    height: 6px !important;
}
.watch-full-video-show .video-js .vjs-slider{
    background-color: #EBEBEB;
}
.watch-full-video-show .video-js .vjs-control{
    font-size: 16px;
    font-family: "Roboto", serif !important;
}
.watch-full-video-show .video-js .vjs-control-bar{
    height: 40px;
}
.watch-full-video-show div.vjs-progress-control.vjs-control{
    top:-6px !important;
    height: auto;
}
.watch-full-video-show .video-js .vjs-control:nth-child(1){
    width: 25px;
    margin-left: 20px;
    height: 100%;
}
.watch-full-video-show .video-js .vjs-control:nth-child(3){
    width: 25px;
    margin-right: 50px;
    height: 100%;
}
.watch-full-video-show .video-js .vjs-control:nth-child(6){
    width: 25px;
    margin-left: auto;
    height: 100%;
}
.watch-full-video-show .video-js .vjs-control:nth-child(7){
    width: 25px;
    margin-left: 20px;
    height: 100%;
    height: 100%;
}
.watch-full-video-show .vjs-control.vjs-button.vjs-duration-button{
    flex-grow: 1;
    text-align: left;
}
.watch-full-video-show .video-js .vjs-volume-panel.vjs-volume-panel-vertical {
    width: 2.5em;
}
.watch-full-video-show .video-js .vjs-play-control{
    margin: 0px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 100%;
}
.watch-full-video-show .video-js .vjs-play-control .vjs-icon-placeholder {
    /* flex: none; */
    display: flex;
    align-items: center;
}
.watch-full-video-show .vjs-button>.vjs-icon-placeholder:before {
    font-size: 24px;
    line-height: 1;
}
.watch-full-video-show .vjs-button>.vjs-icon-placeholder:before{
    position: static;
}
.watch-full-video-show .vjs-menu-button-popup .vjs-menu .vjs-menu-content{
    bottom: 0.5em !important;
}

input:-webkit-autofill {transition: background-color 5000s ease-in-out 0s;}

.video-carousel-thumb-pre{
    position: relative;
    padding-bottom: 52%;
    width: 100%;
}
.video-carousel-thumb-pre .video-js {
    position: absolute;
    inset: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    object-fit: cover;
    border: none;
    padding: 0;
    border-radius: 24px;
    overflow: hidden;
}
#videoModal .video-js{
    border-radius: 24px;
    overflow: hidden;
    height: auto;
}
#videoModal .previewVideo-dimensions.vjs-fluid:not(.vjs-audio-only-mode) {
    padding-top: 56.25% !important;
}
#videoModal .video-js .vjs-tech{
    height: 100%;
}
#videoModal .vjs-control-bar {
    background-color: #A1CE3F !important;
}
#videoModal .video-js .vjs-control {
    font-size: 16px;
    font-family: "Roboto", serif !important;
    line-height: 1;
}
#videoModal .video-js .vjs-play-control {
    margin: 0px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 100%;
}
#videoModal div.vjs-progress-control.vjs-control {
    position: absolute;
    width: 100%;
    top: -15px;
}
#videoModal div.vjs-progress-control.vjs-control {
    top: -6px !important;
    height: auto;
}
#videoModal .video-js .vjs-slider {
    background-color: #EBEBEB;
}
#videoModal .video-js .vjs-progress-holder {
    height: 6px !important;
    margin: 0px !important;
}
#videoModal .vjs-play-progress {
    background: red !important;
}
#videoModal .vjs-button>.vjs-icon-placeholder:before {
    font-size: 24px;
    line-height: 1;
}
#videoModal .video-js .vjs-control:nth-child(1) {
    width: 25px;
    margin-left: 20px !important;
    height: 100%;
}
#videoModal .video-js .vjs-control-bar {
    height: 40px;
}
#videoModal .vjs-button>.vjs-icon-placeholder:before{
    top: 50%;
    left: 0;
    transform: translate(0%, -50%);
    height: auto;
}
#videoModal .vjs-remaining-time.vjs-time-control.vjs-control {
    display: flex;
    align-items: center;
}
#videoModal .vjs-picture-in-picture-control.vjs-control.vjs-button{
    margin-left: auto;
}
#videoModal .vjs-control.vjs-button.vjs-duration-button{
    margin-left: 20px;
    width: auto !important;
}
#videoModal .vjs-volume-panel.vjs-control.vjs-volume-panel-vertical {
    margin-left: auto;
    width: 3em;
}
.tox .tox-edit-area::before{
    border: none !important;
}

.video-carousel-thumb-pre .vjs-progress-control.vjs-control {
    top: -3px !important;
    height: auto !important;
}
.video-carousel-thumb-pre button.vjs-control.vjs-button.vjs-duration-button {
    width: auto;
}
.video-carousel-thumb-pre .video-js .vjs-volume-panel.vjs-volume-panel-vertical{
    margin-left: auto;
}
.swal2-confirm{
    padding: 17px 38px;
    font-size: 16px !important;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    color: #fff !important;
    background-color: #014760 !important;
    border-radius: 50px !important;
    transition: 0.3s ease-in;
    display: inline-block;
}
.swal2-confirm:hover{
    background-color: #A1CE3F !important;
    color: #014760 !important;
}
.swal2-cancel{
    padding: 17px 38px;
    font-size: 16px !important;
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    color: #014760 !important;
    background-color: #A1CE3F !important;
    border-radius: 50px !important;
    transition: 0.3s ease-in;
    display: inline-block;
}
.swal2-cancel:hover{
    color: #fff !important;
    background-color: #014760 !important;
}
.swal2-styled:focus{
    box-shadow: none;
}
.swal2-html-container{
    font-size: 18px;
    color: #333333;
}
.swal2-icon.swal2-warning {
    border-color: #FB1C66 !important;
    color: #FB1C66 !important;
}

#chartLegend {
    max-height: 300px !important;
    /* margin-right: 30px; */
}
#chartLegend .mCSB_scrollTools.mCSB_scrollTools_vertical {
    opacity: 1 !important;
    padding-bottom: 32px !important;
    right: 0px;
    top: 90px;
}
#chartLegend .mCSB_container{
    margin-right: 50px !important;
}

.report-user-video {
    max-height: 600px !important;
    /* margin-right: 30px; */
}
.report-user-video .mCSB_scrollTools.mCSB_scrollTools_vertical {
    opacity: 1 !important;
    padding-bottom: 32px !important;
    right: 0px;
    top: 90px;
}
.report-user-video .mCSB_container{
    margin-right: 50px !important;
}
.header-mobile{
    display: none;
}
.unread-message {
    width: 19px;
    height: 19px;
    background-color: #FB1C66;
    border-radius: 50%;
    position: absolute;
    top: 18px;
    right: 18px;
}
/* .vertical-menu .simplebar-offset{
    position: static;
} */
.swal2-popup .swal2-icon.swal2-info{
    border-color: #014760;
    color: #014760;
}
.watch-full-video-show .custom-btn{
    padding: 12px 20px;
    display: inline-flex;
    align-items: center;
}
.watch-full-video-show .custom-btn i{
    font-size: 24px;
}
.video-card-thumb{
    border-radius: 100%;
    width: 100px;
    height: 100px;
    object-fit: cover;
    overflow: hidden;
}
.video-card-thumb img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.video-card-des-thumb{
    width: 83%;
}
.video-card-des-thumb p{
    font-size: 16px;
}
.watch-full-video-show #rewindButton i, .watch-full-video-show #forwardButton i{
    font-size: 26px;
}
.course-status-accordion{
    padding: 20px 0 0px;
    border-top: 1px solid rgba(153, 153, 153, 0.5);
    border-bottom: 1px solid rgba(153, 153, 153, 0.5);
}
.course-status-accordion .fas{
    color: #014760;
}
.m-footer-sticky{
    display: none;
}
.m-user-progression-title, .m-mes-button{
    display: none;
}
.m-profile-image-admin{
    display: none;
}
.reports-progression .select-dropdown-module .form-control{
    min-width: 244px;
}

.user-filter-btn-main.select-dropdown-module .form-control{
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
    border-radius: 10px;
    padding: 10px 30px 10px 15px;
    text-transform: capitalize;
    max-width: 155px;
}
.user-filter-btn-main.select-dropdown-module #filter_video {
    max-width: 145px;
}
.user-filter-btn-main.select-dropdown-module #activation_datepicker{
    max-width: 145px;
}
.user-filter-btn-main.select-dropdown-module #lastactive_datepicker{
    max-width: 120px;
}
.user-filter-btn-main ::placeholder,
.mb-user-filter-btn-main ::placeholder, 
#filter_datepicker::placeholder{
    color: #fff;
}
/* #activation_datepicker:hover::placeholder,
.mb-user-filter-btn-main:hover::placeholder,
#filter_datepicker:hover::placeholder, #lastactive_datepicker:hover::placeholder{
    color: #014760 !important;
} */
.daterangepicker .applyBtn, .daterangepicker td.active, .daterangepicker td.active:hover{
    background-color: #014760 !important;
}
.filter-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 5px;
}
.filter-title p{
    margin: 0;
    color: rgba(51, 51, 51, 0.5);
    font-size: 16px;
    line-height: 1;
    font-weight: 500;
}
.user-search-field .form-control{
    border: 1px solid rgba(51, 51, 51, 0.5);
    border-radius: 10px;
    padding: 8px 10px 8px 57px;
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    background-image: url(../images/search-icon.svg);
    background-repeat: no-repeat;
    background-position: 13px 9px;
    background-size: 23px;
}
.multiselect__element.select-all-option .multiselect__option{
    padding: 10px 0;
}
.multiselect__tag-icon::after{
    color: #fff !important;
}
.m-usercard-inner-btn{
    display: none;
}
.m-accountset-avtar{
    display: none;
}
.m-account-form{
    display: none;
}
.m-account-form .card{
    border-radius: 10px;
    border: 1px solid #E5E5E5;
    box-shadow: 0px 0px 25px 2px rgba(0, 0, 0, 0.05);
    padding: 24px;
    position: relative;
}
.m-account-form  .account-item p{
    line-height: 1;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.35);
    font-size: 16px;
    padding-bottom: 8px;
    margin-bottom: 0;
}
.m-account-form  .account-item {
    margin-bottom: 20px;
}
.m-account-form  .account-item:last-child{
    margin-bottom: 0;
}
.m-account-form .m-field{
    font-size: 16px;
    line-height: 1;
    font-weight: 400;
    color: #333333;
}
.account-item-edit{
    text-align: right;
    position: absolute;
    top:24px;
    right: 24px;
}
.account-item-edit a{
    font-size: 12px;
    font-weight: 700;
    color: rgba(51, 51, 51, 0.5);
    text-transform: uppercase;
    text-decoration: underline !important;
    text-align: right;
}
.security-que-page select.form-control{
    padding: 18px 18px 18px 18px !important;
    background: url(../images/black-down-arrow.svg) no-repeat right 15px center;
}
.mini-stats-wid .page-title-box{
    display: none !important;
}
.m-video-listbadge{
    display: none;
}

.mobile-menu nav {
    padding: 0px;
    position: relative;
    z-index: 1;
  }
.mobile-menu nav::after {
    content: "";
    display: block;
    clear: both;
  }
.mobile-menu hgroup {
    float: left;
    margin: 2px 2px 2px 10px;
  }
.mobile-menu aside {
    position: absolute;
    width: 250px;
    height: calc(100vh - 134px);
    background: #014760;
    left: -300px;
    top: 67px;
    /* bottom: 0; */
    box-sizing: border-box;
    padding-top: 0;
    transition: all 0.4s ease;
    z-index: 999;
    box-shadow: 0px 10px 9px 10px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
  }
.mobile-menu aside.active {
    left: 0;
  }
.mobile-menu aside ul{
    padding: 0;
    margin: 0;
}
.mobile-menu aside ul li{
    padding: 0;
    margin: 0;
    border-top: 1px solid #fff;
}
 .mobile-menu aside a {
    display: block;
    padding: 15px 25px;
    font-weight: 700;
    text-decoration: none;
    font-size: 14px;
    color: #fff;
    text-transform: uppercase;
  }
  .mobile-menu aside a:hover, .mobile-menu aside li.active > a {
    background-color: #A1CE3F;
  } 
  .mobile-menu aside a img {
    width: 20px;
    height: auto;
    margin-right: 10px;
}
  .mobile-menu aside ul li ul.m-sub-menu{
    padding-left: 20px;
    padding-top: 10px;
  }
  .mobile-menu aside ul li ul.m-sub-menu li{
    border: none;
    list-style: none;
  }
  .mobile-menu aside ul li ul.m-sub-menu li a{
    padding: 5px 25px;
  }
.mobile-menu .toggle-wrap {
    padding: 0px 0 0 10px;
    position: relative;
    cursor: pointer;
    float: left;
 
    /*disable selection*/
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
.mobile-menu .toggle-bar,
  .toggle-bar::before,
  .toggle-bar::after,
  .toggle-wrap.active .toggle-bar,
  .toggle-wrap.active .toggle-bar::before,
  .toggle-wrap.active .toggle-bar::after {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }
.mobile-menu .toggle-bar {
    width: 26px;
    margin: 10px 0;
    position: relative;
    border-top: 3px solid #fff;
    display: block;
    border-radius: 10px;
  }
.mobile-menu .toggle-bar::before,
.mobile-menu .toggle-bar::after {
    content: "";
    display: block;
    background: #fff;
    height: 3px;
    width: 26px;
    position: absolute;
    top: -10px;
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -ms-transform-origin: 13%;
    -webkit-transform-origin: 13%;
    transform-origin: 13%;
    border-radius: 10px;
  }
.mobile-menu .toggle-bar::after {
    top: 4px;
  }
.mobile-menu .toggle-wrap.active .toggle-bar {
    border-top: 6px solid transparent;
  }
.mobile-menu .toggle-wrap.active .toggle-bar::before {
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
.mobile-menu .toggle-wrap.active .toggle-bar::after {
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  .m-sub-menu {
    display: none; /* Initially hidden */
}
.vertical-collpsed .vertical-menu #leftsidebar-menu>ul li ul.sub-menu li a span {
    display: none;
}
.vertical-collpsed .vertical-menu #leftsidebar-menu ul li ul.sub-menu li a{
    padding: 5px 20px;
}
 /* .security-que-page select{
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
 }  */
 .course-module-progress .select-dropdown-module .form-control{
    border-radius: 14px;
    font-size: 16px;
 }
 .form-3part .form-select.is-invalid{
    background-size: 16px 12px !important; 
    background-position: right !important;    
}
.dashboard-statistics .card {
    height: 100%;
}
.m-userlist-badge {
    width: 20px;
}
#next-video-popup {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.9);
    color:#014760 !important;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    min-width: 300px;
    font-size:18px;
    font-weight:500 !important;
}
.chat-backarrow{
    display: none;
}
.m-chat-messages-title{
    display: none !important;
}
.mb-user-filter-btn-main {
    padding: 16px 16px 0;
}


button.custom-btn:focus-within{
    background-color: #014760;
    color: #fff;
}

#resetPswdFrm .form-control{
    padding: 18px 18px 18px 18px !important;
}
#feedbackdetails .modal-body{
    max-height: 65vh;
    overflow-y: auto;
}
#feedbackdetails .feedback-item{
    padding: 20px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
#feedbackdetails .feedback-item .form-label {
    width: 35%;
    margin: 0;
    color: #333;
    font-size: 18px;
    font-weight: 500;
}
#feedbackdetails .feedback-item .form-group {
    width: 65%;
    margin: 0;
    font-size: 16px;
}
body{
    padding-right: 0px !important;
}
body.swal2-shown{
    padding-right: 6px !important;
}
.signup-info .form-check-input.is-invalid ~ .form-check-label{
    color: rgba(0, 0, 0, 0.35) !important;
}
.signup-info .form-check-input.is-invalid{
    border: 1px solid rgba(0, 0, 0, 0.1);
}
.newmsgpopup{
    overflow: hidden;
}
/* .course-module-progress .video-step-progrees ul.stepper li.round-stop span::before{
    top: 23px;
} */
.chat-start-note {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.chat-reset-link .btn{
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 700;
    color: rgba(51, 51, 51, 0.5);
    text-decoration: underline !important;
    padding: 0;
}
.chat-reset-link .btn:hover{
    color: #014760;
}

#videoLink a, #shortVideoLink a, #thumbnailLink a{
    color: #014760;
}

.user-search-field {
    display: flex;
    align-items: center;
}
.user-search-field button{
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 700;
    color: rgba(51, 51, 51, 0.5);
    text-decoration: underline !important;
    padding: 0;
    background-color: transparent;
    margin-left: 15px;
}
.user-search-field button:hover{
    color: #014760;
}
#vertical-menu-btn {
    padding-left: 24px !important;
}
.usernotdata-found {
    text-align: center !important;
    font-size: 18px !important;
    color: #014760 !important;
    line-height: 1.1;
    font-weight: 500 !important;
    padding: 10% !important;
}

.listnotdata-found {
    text-align: center !important;
    font-size: 18px !important;
    color: #014760 !important;
    line-height: 1.1;
    font-weight: 500 !important;
    padding: 6% !important;
}

#filterfolderModal button.table-view-link {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background-color: #014760;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}
#filterfolderModal button.table-view-link:hover{
    background-color: #A1CE3F;
}
#filterfolderModal button.table-view-link:hover i{
    color: #014760;
}
#filterfolderModal button.table-view-link i{
    font-size: 20px;
}
#filterfolderModal .list-group-item p{
    font-size: 18px;
    line-height: 1.1;
    color:#666666;
    font-weight: 400;
}
.chat-conversion-main.longsection {
    height: auto;
}
.member-chat-list {
    flex-direction: row;
    flex-wrap: wrap;
    max-height: 310px;
    overflow-y: scroll;
}
.member-chat-list li {
    width: 50%;
    border: none;
    background-color: transparent;
}
#coursecomplete .form-label{
    width: 100%;
    margin-bottom: 5px;
}
#coursecomplete .modal-body{
    max-height: 65vh;
    overflow-y: auto;
}

.reg-page-main .login-right{
    flex-wrap: wrap;
}
.reg-page-main .login-right .signup-text h2{
    color: #ffff;
    padding-bottom: 20px;
    padding-top: 50px;
}
.reg-page-main .login-right .signup-text p{
    color: #fff;
    font-size: 16px;
    margin-bottom: 0px;
    padding-bottom: 15px;
}
.reg-page-main .login-right .signup-text p.signup_started_line{
    font-size: 20px;
}
.reg-page-main .login-right .signup-text p strong{
    font-weight: 500;
    color: #A1CE3F;
}
.reg-page-main .login-right .signup-text p:last-child{
    padding-bottom: 0;
}
.reg-page-main .login-right .signup-text{
    text-align: center;
    padding: 10px 10%;
}
.reg-page-main .login-right .signup-text img{
    max-width: 40%;
}
.view-notification-link{
    font-size: 16px;
    font-weight: 700;
    color: #014760;
    text-align: center;
    padding: 10px 0;
    background-color: rgba(0, 0, 0, 0.02);
}
.view-notification-link:hover{
    color: #A1CE3F;
}
.m-playlist-icon{
    /* display: none; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* .date-range-input:hover{
    background-color: #A1CE3F;
    color: #014760;
} */
.videodetailgap{
    padding-top: 0px;
}
.clearmessagemobile{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.clearmessagemobile i{
    font-size: 18px;
}
.vjs-nextplayvideo-btn{
    margin: 0 15px 0 25px !important;
    width: auto !important;
}
.user-status-section li .user-list-avtar{
    width: 50px !important;
    height: 50px;
    object-fit: cover;
}
.swiper-pagination{
    margin-top: 20px;
}
.swiper-pagination-bullet{
    width: 12px !important;
    height: 12px !important;
    background: #013E55 !important;
    opacity: 1 !important;
    margin: 0 5px !important;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active{
    background: #A1CE3F !important;
}

.dashboard-playlist-icon {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.video-carousel-thumb .avatar-title {
    background-color: #014760;
}
.video-carousel-thumb .avatar-title:hover {
    background-color: #A1CE3F;
}
.subtext-login{
    text-align: center;
    padding-bottom: 55px;
    font-size: 16px;
    padding-top: 10px;
    color: #333;
    line-height: 1.2;
    margin-bottom: 0px;
}
p.f-list span{
    color: #014760;
}
span.flist_badge{
    color: #014760;
    font-size: 14px;
    line-height: 1;
    border-radius: 4px;
    padding: 3px 5px;
}
.filter_listing_modal .modal-body{
    max-height: 70vh;
    overflow-y: scroll;
}

#moveToFolderModal a{
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1.2;
    color: #014760;
}
#moveToFolderModal a:hover{
    color: #A1CE3F;
}
.watch-full-video-show .vjs-poster {
    background-position: center !important;
    background-size: cover !important;
}
.notification-item {
    position: relative;
}
.notification-dot {
    width: 19px;
    height: 19px;
    background-color: #FB1C66;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 5px;
    right: 4px;
}

/* =============== Responsive =================== */

@media (max-width: 1800px) {
.d-flex.justify-content-between.profile-form-2btn {
    flex-wrap: wrap;
    justify-content: center !important;
    gap: 7px;
}
.sidebar-enable.vertical-collpsed .metismenu img{
    margin-right: 2px;
}

.user-search-field .form-control{
    max-width: 250px;
}

}


@media (max-width: 1700px) {

.vertical-collpsed .vertical-menu .metismenu {
        margin-left: 8px;
}
.vertical-collpsed .vertical-menu .logout-link{
    padding-left: 15px;
    padding-right: 15px;
}
.need-help-sec{
    padding: 32px;
}
.dashboard-statistics .card{
    height: 100%;
}
.dashboard-statistics .card-body{
    padding: 30px 25px;
}
.dashboard-statistics .card .card-body img {
    width: 60px !important;
    height: 60px !important;
}
.vertical-menu{
    width: 21%;
}
.main-content{
    width: 79%;
}
.m-playlist-icon{
    /* display: none; */
}
#videoCarousel .card-body{
    padding: 20px 10px;
}
.filter-title img{
    width: 22px;
    height: 22px;
}
.filter-title p{
    font-size: 14px;
}
.userfilter-items .user-filter-btn-main {
    display: flex !important;
    justify-content: flex-start !important;
}
.userpage-filter-main .user-search-field{
    width: 100%;
    margin-bottom: 15px !important;
}
.userfilter-items{
    width: 100%;
}

}

@media (max-width: 1600px) {

.vertical-collpsed .navbar-brand-box {
    width: 100% !important;
}
.user-search-field .form-control{
    padding: 8px 7px 8px 45px;
}
.user-filter-btn-main.select-dropdown-module .form-control{
    max-width: 150px;
    padding: 10px 30px 10px 10px;
}
.user-status-section li span{
    min-width: 180px;
    padding: 0 5px;
}
.user-status-section li span + span{
    min-width: 140px;
}
.custom-btn-green, .custom-btn{
    padding: 15px 30px;
}
.msgbox-top-bar .custom-btn-green{
    padding: 12px 25px;
    font-size: 14px;
}
.msgbox-top-bar .custom-btn-green svg {
    margin-right: 5px;
    width: 16px;
}
.msg-filterbtn .custom-btn {
    border-radius: 7px;
    padding: 5px;
    width: 40px;
    height: 40px;
}
.msg-filterbtn .custom-btn svg{
    width: 22px;
    height: auto;
}
.msg-filtersort button{
    border-radius: 7px;
    padding: 10px;
    font-size: 14px;
    min-height: 40px;
}
.report-user-video li img + span{
    width: 200px;
    min-width: inherit;
}
.report-user-video li span + div + span{
    max-width: 50px;
    min-width: inherit;
}
#leftsidebar-menu ul li ul.sub-menu li a{
    padding: .4rem 1rem .4rem 2.5rem;
}
#videoCarousel .btn-custom{
    padding: 16px 20px;
}
.page-title-box h4.page-title-main{
    font-size: 30px !important;
}
/* .user-module-progress .video-step-progrees ul.stepper li.round-stop span::before{
    top: 24px;
} */
.chat-reset-link .btn{
    font-size: 14px;
}
.video-list-thumb{
    padding-bottom: 64%;
}

}

@media (max-width: 1580px) {

#leftsidebar-menu ul li a{
    padding: 18px 10px 18px 20px;
}
.filter-applied-note{
    text-align: left !important;
}
.video-list-course .col-3{
    width: 30%;
}
.video-list-course .col-8{
    width: 62%;
}
.video-list-course .col-1{
    width: 8%;
}

}

@media (max-width: 1500px) {

    .vertical-collpsed .vertical-menu #leftsidebar-menu>ul>li>a {
        padding: 15px 5px 15px 30px;
    }  
    .vertical-collpsed .vertical-menu #leftsidebar-menu ul li ul.sub-menu li a {
        padding: 5px 30px;
    }  

.dashboard-statistics .card .card-body img {
    width: 50px !important;
    height: 50px !important;
}
.dashboard-statistics .card h4{
    font-size: 26px;
}
.dashboard-statistics .card p{
    font-size: 16px;
}
.dashboard-statistics .card-body {
    padding: 25px 20px;
}
.user-status-section li span{
    min-width: 170px;
    padding: 0 5px;
}
.user-status-section li span + span{
    min-width: 140px;
}
.need-help-sec {
    padding: 20px;
}
.chat-messages[data-v-c28e04e7] {
    width: 65% !important;
}
.user-list[data-v-c28e04e7] {
    /* width: 35% !important; */
}
.user-list-component {
    padding-right: 20px;
}
.custom-btn-green, .custom-btn{
    padding: 15px 25px;
}
.profile-card .custom-btn-green{
    min-width: 180px;
}
.signin-sec .account-pages{
    padding: 60px;
}
.signin-sec .row .login-left-main{
    min-height: 65vh;
}
.vertical-menu{
    width: 23%;
}
.main-content{
    width: 77%;
}
.vertical-collpsed .vertical-menu{
    width: 8% !important;
}
.vertical-collpsed .main-content{
    width: 92%;
}
.user-search-field .form-control{
    padding: 8px 10px 8px 40px;
    font-size: 14px;
    background-position: 13px 10px;
    background-size: 18px;
}

.video-list-thumb {
    padding-bottom: 60%;
}

}


@media (max-width: 1440px) {

.signin-sec .login-left-main .form-control{
    padding: 15px 15px 15px 48px;
    font-size: 14px;
}
#resetPswdFrm .form-control, .signin-sec .login-left-main  .form-control.answer-input, .security-que-page select.form-control{
    padding: 15px 15px 15px 15px !important;
}
.signin-sec .email-field::before, .signin-sec .password-field::before, .signin-sec .forgot-field::before{
    top: 13px;
}
#register-form .form-control {
    padding: 15px 15px 15px 15px;
}

.layout-wrapper {
    margin: 40px;    
}
#leftsidebar-menu ul li a, .logout-link a{
    font-size: 14px;
    padding: 15px 5px 15px 15px;
}
.metismenu {
    margin-left: 15px;
}
.metismenu img {
    width: 25px;
    height: 25px;
    margin-right: 5px;
}
.metismenu li {
    margin-bottom: 10px;
} 
#leftsidebar-menu ul li ul.sub-menu li a{
    padding: .3rem .5rem .3rem 1.1rem;
    font-size: 14px !important;
}   
#leftsidebar-menu ul li ul.sub-menu li a img{
    margin-right: 6px;
}
.metismenu ul.sub-menu li {
    margin-bottom: 10px;
}
.navbar-brand-box{
    width: auto;
}
.vertical-menu{
    width: 22%;
}
.main-content{
    width: 78%;
}
/* .vertical-collpsed .vertical-menu{
    width: 7% !important;
} */
.vertical-collpsed .main-content {
    margin-left: 0;
    /* width: 93%; */
}
.vertical-collpsed .navbar-brand-box {
    width: auto !important;
}
.vertical-collpsed .vertical-menu .logout-link a img{
    width: 25px;
    margin: 10px;
}
.user-status-section .col-md-6, .user-profile-section .col-md-9{
    width: 100%;
}
.user-profile-section .col-md-3{
    width: 100%;
    margin-bottom: 20px;
}
.user-profile-section .profile-card a{
    margin: 0 5px;
}
.report-chart-card{
    padding: 24px;
}
.reports-progression .chart-legend {
    padding: 0;
}
.report-user-video li span:first-child{
    min-width: 135px;
}
/* .report-user-video li span{
    min-width: auto;
} */
.profile-form-sec, .edit-form-row{
    margin: 0 -20px;
}
.profile-form-sec [class*='col-'], .edit-form-row [class*='col-']{
    padding: 0 20px;
}
.form-3part [class*='col-']{
    width: 33.333%;
}

#update-profile-form .col-md-6.mt-4{
    margin-top: 0px !important;
}
.page-title-box h4.page-title-main{
    font-size: 26px !important;
    padding-bottom: 5px;
}
.section-title{
    font-size: 20px;
}
.custom-btn-green, .custom-btn, .swal2-confirm, .swal2-cancel{
    font-size: 14px;
}
.user-status-section li span, .chart-legend th, .need-help-sec p, .card.mini-stats-wid p{
    font-size: 16px;
}
.view-all-btn{
    font-size: 14px;
}
.custom-btn-green, .custom-btn, .swal2-confirm, .swal2-cancel{
    padding: 13px 20px;
}
.user-status-section h5.card-title{
    font-size: 18px;
}
.chart-legend td{
    font-size: 16px;
    padding: 12px 0;
}
.message-card .msg-sender-name, .message-card .message-time, .message-card p{
    font-size: 16px;
}
.dataTables_wrapper .dataTable thead tr th{
    font-size: 14px;
}
.module-inner-table tr th {
    font-size: 14px !important;
}    
table.table-bordered.dataTable tbody th, table.table-bordered.dataTable tbody td, .report-user-video li span{
    font-size: 16px;
}
.dataTables_paginate .paginate_button a{
    font-size: 16px;
    width: 30px;
    height: 30px;
}
.form-label{
    font-size: 14px;
}
.form-control{
    font-size: 16px;
}
.change-profile-img .avtar-label{
    font-size: 14px;
}
.circle{
    width: 100px;
    height: 100px;
}
.profile-pic {
    width: 100%;
    height: 100%;
}
#data-table_wrapper .bottom select {
    min-width: 68px;
    font-size: 16px;
    min-height: 30px;
    padding: 5px 11px;
    background-position: calc(100% - 9px) center !important;
}
.purchase-history-card h5{
    font-size: 16px;
}
.purchase-history-card small{
    font-size: 14px;
}
#videoCarousel .carousel-item .col-md-4{
    width: 50%;
}
#videoCarousel .card-title{
    font-size: 20px;
}
#video-list-scroll .mCSB_inside > .mCSB_container{
    padding: 26px 15px 26px 0px;
}
.video-list-course .card{
    padding: 24px;
}
.video-list-course h5{
    font-size: 18px;
}
.video-list-course .text-eclipse-3line {
    font-size: 16px;
}
.video-description-main{
    font-size: 16px;
} 
.preview-video{
    white-space: nowrap;
    font-size: 14px;
}   
.video-list-course .avatar-sm {
    height: 2.5rem;
    width: 2.5rem;
}
.video-description-main p{
    font-size: 14px;
}
.select-dropdown-module .form-control{
    font-size: 16px;
}
.login-btn{
    padding: 13px 20px;
    font-size: 14px;
    margin-bottom: 15px;
}
.message-card .message-time{
    min-width: 179px;
    text-align: right;
    font-size: 14px;
}

.user-list li{
    padding: 15px 10px;
    margin-bottom: 15px;
}
.user-list .lastchatmessage p{
    font-size: 14px;
}
.chat-header h5{
    font-size: 22px !important;
}
.msg-searchbar{
    margin-bottom: 40px !important;
}
.user-list-component{
    padding-right: 10px;
}
.preview-video-popup .modal-dialog{
    max-width: 650px;
}
/* .course-module-progress .video-step-progrees ul.stepper li.round-stop span::before {
    top: 24px;
} */
 .video-carousel-thumb .avatar-sm {
        height: 2.5rem;
        width: 2.5rem;
    }

}


@media (max-width: 1366px) {

.report-user-video li img + span {
    width: 150px;
    min-width: inherit;
}
.video-list-thumb {
    padding-bottom: 60%;
}
.userfilter-items .user-filter-btn-main {
    display: none !important;
}
#sortfilter, #advancedfilter{
    display: block !important;
}
.sort-icon{
    background-color: transparent;
}
#topPopup .modal-content{
    width: 30%;
    margin: 0 auto;
    float: right;
    border-radius: 0 !important;
 }
 #topPopup .modal-title{
    font-size: 18px;
    color: #014760;
    font-weight: 700;
    line-height: 1.1;
 }
 #topPopup #resetBtn{
    font-size: 14px;
    color: #014760;
    font-weight: 400;
 }
 #topPopup .btn-close{
    color: #014760;
    opacity: 1;
 }
 #topPopup .modal-header{
    border-bottom: none;
 }
 #topPopup .accordion-item .accordion-button{
    padding: 15px 10px;
 }
 #topPopup .accordion-item{
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
 #topPopup .accordion-button{
    font-size: 14px;
    line-height: 1.1;
    font-weight:400;
    color: #014760;
 }
 #topPopup .form-check-input {
    width: 20px;
    height: 20px;
    margin-top: 0;
    margin-right: 10px;
    border: 2px solid #014760;
}
#topPopup .form-check-input:checked {
    background-color: #014760;
    border-color: #014760;
}
#topPopup .accordion-button:not(.collapsed){
    background-color: transparent !important;
}
#topPopup .form-control{
    background-color: transparent !important;
    border: none;
    color: #014760;
    padding: 0 20px;
    background: url(/assets/images/blue-down-arrow.svg) no-repeat;
    background-position: calc(100% - 0px) center !important;
    width: 100%;
    font-weight: 400;
}
#bottomPopup{
    z-index: 9999;
}
#bottomPopup .modal-dialog {
    position: fixed !important;
    bottom: 0 !important;
    left: 0% !important;
    right: 0% !important;
    margin-bottom: 0 !important;
}
.modal.fade#bottomPopup .modal-dialog {
    -webkit-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    -o-transform: translate(0, 100%);
    transform: translate(0, 100%);
}
.modal.show#bottomPopup .modal-dialog{
    -webkit-transform: none !important;
}
#bottomPopup .modal-header{
    border: none;
}
#bottomPopup  .modal-body{
    padding: 0px 20px 20px;
}
#bottomPopup .modal-body .form-check{
    padding: 15px 25px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
#bottomPopup .form-check-label {
    font-size: 14px;
    line-height: 1.2;
    color: #333;
    font-weight: 400;
    margin-left: 10px;
}
#bottomPopup .form-check-input{
    width: 20px;
    height: 20px;
    margin-top: 0;
}
#bottomPopup .form-check-input:checked {
    background-color: #014760;
    border-color: #014760;
}
#bottomPopup .modal-title{
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
    color: #014760;
}

}


@media (max-width: 1199px) {


.vertical-collpsed .vertical-menu .logout-link {
    padding-left: 5px;
    padding-right: 5px;
}
.filter-applied-note{
    padding-top: 0px !important;
}
.vertical-collpsed .vertical-menu #leftsidebar-menu>ul>li>a {
    padding: 15px 5px 15px 20px;
}  
.vertical-collpsed .vertical-menu #leftsidebar-menu ul li ul.sub-menu li a {
    padding: 5px 20px;
}  

#leftsidebar-menu ul li a, .logout-link a {
    font-size: 13px;
    padding: 12px 5px 12px 12px;
}
.metismenu {
    margin-left: 10px;
}
.metismenu img {
    width: 20px;
    height: 20px;
    margin-right: 3px;
}
.logo .logo-lg img{
    width: 100%;
}
.filter-title p{
    display: none;
}

.user-profile-last-sec .course-status {
    padding-right: 0;
    padding-bottom: 30px;
}
.video-list-thumb {
    padding-bottom: 70%;
}

}



@media (max-width: 1024px) {

.logo .logo-lg img{
    width: auto;
}

.reg-page-main .login-right .signup-text{
    padding: 0px;
}
.reg-page-main .login-right .signup-text img {
    max-width: 60%;
}
.reg-page-main .login-right .signup-text p{
    font-size: 14px;
}
.reg-page-main .login-right .signup-text p.signup_started_line{
    font-size: 18px;
}
.reg-page-main .login-right .signup-text h2{
    padding-bottom: 15px;
    padding-top: 40px;
}

.page-title-box h4.page-title-main {
    font-size: 24px !important;
    padding-bottom: 5px;
}    

.custom-btn:hover{
    color: #fff !important;
    background-color: #014760 !important;
}
.custom-btn-green:hover, .login-btn:hover{
    background-color: #A1CE3F;
    color: #014760;
}

.vertical-menu {
    width: 268px !important;
}
.main-content {
    width: calc(100% - 268px) !important;
}
.vertical-collpsed .vertical-menu {
    width: 95px !important;
}
.vertical-collpsed .main-content {
    margin-left: 0;
    width: calc(100% - 95px) !important;
}
.dashboard-statistics .col-md-6 {
    margin-bottom: 24px;
}
.view-all-report-btn{
    margin-top: 0px !important;
}
.layout-wrapper{
    margin: 30px;
}
#page-topbar {
    top: 30px;
    right: 40px;
    left: 30px;
}
.vertical-menu{
    bottom: 30px;
}
#leftsidebar-menu ul li a{
    padding: 16px 10px 16px 32px;
}
.vertical-collpsed .vertical-menu{
    bottom: 30px;
}
.user-status-section li{
    padding: 10px 0 !important;
}
.metismenu img{
    width: 26px;
    height: 26px;
}
.card.card-account-page .card-body {
    padding: 32px;
}
.form-group {
    margin-bottom: 25px;
}
.dataTables_paginate .paginate_button{
    margin-right: 6px;
}
.form-3part .col-md-6{
    width: 50%;
}
.form-3part .col-md-2{
    width: 25%;
}
/* .form-3part .col-md-4{
    width: 25%;
} */
.col-md-6.form-3part{
    width: 100%;
}
.card.edit-course-form .card-body {
    padding: 32px;
}
.report-chart-card {
    padding: 15px;
}
.years-chart-btn {
    font-size: 14px;
    padding: 6px 10px;
    min-width: 70px;
}
.reports-progression .col-md-6{
    width: 100%;
}
.user-profile-section .profile-card a {
    margin: 0 2px;
}
.user-profile-detail-card p{
    font-size: 16px;
    margin-bottom: 18px;
}
.user-profile-detail-card p strong{
    min-width: 120px;
}
.user-profile-last-sec .course-status {
    padding-right: 0;
    padding-bottom: 30px;
}
.watch-video-counter span{
    font-size: 18px;
}
.video-description-main h2{
    font-size: 24px !important;
}
#videoCarousel .btn-custom{
    padding: 14px 24px;
}
#videoCarousel .card{
    padding: 15px;
}
#videoCarousel a.preview-video{
    font-size: 14px !important;
    top:15px !important;
    right: 15px !important;
}
.signin-sec .row .login-left-main {
    min-height: 40vh;
    padding: 30px;
}
.signin-sec h2{
    padding-bottom: 30px;
    font-size: 24px;
}
.subtext-login{
    padding-bottom: 30px;
    margin-bottom: 0px;
    padding-top: 5px;
    font-size: 14px;
}
.signin-sec #login-form, .signin-sec #resetPswdFrm-form, .signin-sec #resetPswdFrm{
    max-width: 100%;
}
.login-right{
    padding: 50px;
}
.login-right img{
    width: 200px;
}
.reg-form-main .col-md-6{
    width: 100%;
}
.twofa-verify-page #otpsection .w-75, .vsq-sec .w-75{
    width: 100% !important;
}

.user-filter-btn-main.select-dropdown-module .form-control {
    font-size: 12px;
    line-height: 1.4;
    font-weight: 500;
    border-radius: 10px;
    padding: 6px 18px 6px 6px;
    text-transform: capitalize;
    max-width: 120px;
    background-size: 10px;
    background-position: calc(100% - 5px) center !important;
}
.filter-title img {
    width: 20px;
    height: 20px;
}
.report-user-video{
    padding-top: 40px;
}
.chat-board-main textarea.form-control.m-textarea {
    height: 40px;
    box-shadow: 0px 0px 15px -5px rgba(0, 0, 0, 0.1);
    border-radius: 50px;
}
.chat-board-main .msg-send-btn i {
    font-size: 30px;
    color: #014760;
}
.chat-board-main .msg-send-btn {
    float: right;
    padding-bottom: 0;
}
.chat-conversion-main{
    margin-bottom: 20px;
    height: calc(100vh - 400px);
    max-height: initial;
}
.chat-board-main{
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    background-color: transparent;
    margin-bottom: 0px;
}
.chat-backarrow{
    display: block;
    margin-right: 10px;
}
.chat-backarrow i{
    color: #014760;
    width: 28px;
}
.chat-header h5{
    font-size: 24px !important;
}
.msg-filterbtn .custom-btn {
    border-radius: 5px;
    padding: 4px;
    width: 35px;
    height: 35px;
}
.msg-filterbtn .custom-btn svg{
    width: 22px;
}
.msg-searchbar{
    margin-bottom: 20px !important;
    width: 100%;
}
.msg-searchbar .form-control {
    width: 100%;
}
.user-list-component{
    max-height: 100% !important;
    padding-right: 0;
    height: auto;
}  
.chat-messages-title{
    display: none !important;
}
.m-chat-messages-title{
    display: block !important;
    padding-bottom: 5px;
}
.report-user-video li img + span {
    width: 280px;
    min-width: inherit;
}
#leftsidebar-menu ul li ul.sub-menu li a{
    padding: .3rem .5rem .3rem 1.9rem;
}
/* .user-module-progress .video-step-progrees ul.stepper li.round-stop span::before {
    top: 23px;
} */

.video-list-course .col-3 {
    width: 40%;
}
.video-list-course .col-8 {
    width: 60%;
}
.m-playlist-icon {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.d-playlist-icon {
    display: none;
}
.video-list-thumb img{
    border-radius: 15px;
}
.remaining-text-main {
    flex-wrap: wrap !important;
}
.video-list-course .col-2.remaining-text {
    width: 100%;
    padding-bottom: 10px;
}
.remaining-text-main .col-10 {
    width: 100%;
}
.video-list-thumb {
    padding-bottom: 65%;
}
#videoCarousel .card-title {
    font-size: 18px;
    min-height: 45px;
}
.chat-header{
    margin-bottom: 0px;
}
.report-user-video li img.user-list-avtar {
    border-radius: 100%;
    width: 40px !important;
    height: 40px;
    object-fit: cover;
}

#longPressModal{
    z-index: 9999;
}
#longPressModal .modal-dialog {
    position: fixed !important;
    bottom: 0 !important;
    left: 0% !important;
    right: 0% !important;
    margin-bottom: 0 !important;
}
.modal.fade#longPressModal .modal-dialog {
    -webkit-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    -o-transform: translate(0, 100%);
    transform: translate(0, 100%);
}
.modal.show#longPressModal .modal-dialog{
    -webkit-transform: none !important;
}
#longPressModal .modal-header{
    border: none;
}
#longPressModal  .modal-body{
    padding: 0px 20px 20px;
}
#longPressModal .modal-body .form-check{
    padding: 15px 25px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
#longPressModal .form-check-label {
    font-size: 14px;
    line-height: 1.2;
    color: #333;
    font-weight: 400;
    margin-left: 10px;
}
#longPressModal .form-check-input{
    width: 20px;
    height: 20px;
    margin-top: 0;
}
#longPressModal .form-check-input:checked {
    background-color: #014760;
    border-color: #014760;
}
#longPressModal .modal-title{
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
    color: #014760;
}
#longPressModal .modal-dialog-bottom .modal-content{
    border-radius: 15px 15px 0 0 !important;
    overflow: hidden;
    padding: 15px 15px 10px;
}
#longPressModal li.list-group-item{
    display: flex;
    align-items: center;
    padding: 12px 4px;
}
#longPressModal li.list-group-item p{
    color: #014760;
    font-size: 16px;
    line-height: 1.2;
    margin-bottom: 0px;
}
#longPressModal li.list-group-item .lp-icon{
    text-align: center;
    width: 31px;
    margin-right: 15px;
}
#filterfolderModal .list-group-item p{
    font-size: 16px;
}
#topPopup .modal-content{
    width: 33%;
}
    
}

@media (max-width: 992px) {

.vertical-menu {
    display: block;
}
.logo span.logo-lg {
    display: block;
}
.logo span.logo-sm, .navbar-brand-box .logo-dark span.logo-sm{
    display: none;
}
.vertical-collpsed .logo span.logo-sm{
    display: block;
}
.vertical-collpsed .logo span.logo-sm img{
    width: 70px;
    height: auto;
}
.vertical-menu {
    width: 235px !important;
}
.main-content{
    width: calc(100% - 235px) !important;
}
#leftsidebar-menu ul li a {
    padding: 16px 10px 16px 20px;
}
.chat-message-inner{
    position: relative;
}
.message-actions{
    position: absolute;
    right: 15px;
    top: 20px;
}
.message-actions i{
    font-size: 20px;
    color: #014760;
}

    
}


@media (max-width: 991px) {

.navbar-brand-box{
    width: auto;
    padding: 0;
}

.logo {
    line-height: 110px;
}
.logo img{
    width: 140px;
    height: auto;
}
#videoCarousel .card-body {
    padding: 20px 0px;
}
#videoCarousel .btn-custom {
    padding: 13px 18px;
    font-size: 14px;
}
.user-profile-detail-card.ds-show .row .col-md-6, .user-profile-detail-card .row .col-md-6{
    width: 100% !important;
}
.user-profile-detail-card .row {
    flex-wrap: wrap;
    height: auto;
}
.module-titletable {
    flex-wrap: wrap;
}
.module-titletable .section-title {
    display: block;
    width: 100%;
    padding-bottom: 10px;
}
.module-titletable a, .module-titletable button{
    margin-left: 0 !important;
}
.reportchart-cardmain{
    width: 100%;
}
.reportchart-cardmain + .reportchart-cardmain{
    margin-top: 20px !important;
}
.coursemodule-title {
    flex-wrap: wrap !important;
}
.coursemodule-title .module-title{
    width: 100%;
    padding-bottom: 15px;
}
.coursemodule-title .ms-auto {
    margin-left: 0 !important;
}

}

@media (max-width: 820px) {

.vertical-menu {
    width: 225px !important;
}
.main-content {
    width: calc(100% - 225px) !important;
} 
.metismenu {
    margin-left: 5px;
}  
.vertical-collpsed .vertical-menu .metismenu {
    margin-left: 5px;
}
#leftsidebar-menu ul li a {
    padding: 14px 5px 14px 12px;
} 
#leftsidebar-menu ul li ul.sub-menu li a {
    padding: .3rem .5rem .3rem 0.7rem;
}
.user-status-section .card .card-body{
    padding: 20px;
}
.user-status-section li span {
    min-width: 135px;
}
.user-status-section li .user-list-avtar {
    width: 30px !important;
    height: 30px;
    object-fit: cover;
    margin-right: 5px;
}
.user-status-section li a {
    width: 28px;
    height: 28px;
    border-radius: 6px;
}
.custom-btn-green, .custom-btn, .swal2-confirm, .swal2-cancel {
    padding: 11px 15px;
}
.vertical-collpsed .vertical-menu #leftsidebar-menu>ul>li>a {
    padding: 15px 5px 15px 20px;
}
.metismenu img {
    width: 22px;
    height: 22px;
}
.user-profile-section{
    flex-wrap: wrap;
}
.vertical-menu{
    padding-top: 40px;
}
.coursemodule-title .ms-auto{
    margin-left: inherit !important;
}
.course-module-progress .select-dropdown-module .form-control {
    border-radius: 10px;
    font-size: 14px;
}
.circle {
    width: 70px;
    height: 70px;
}
/* .profile-pic {
    width: 70px;
    max-height: 70px;
} */
.upload-button{
    font-size: 14px;
}
.change-profile-img .avtar-label {
    font-size: 12px;
    padding-left: 10px;
}
#videoCarousel .card-title {
    font-size: 16px;
    min-height: 40px;
}
.vertical-collpsed .vertical-menu #leftsidebar-menu>ul>li>a {
    padding: 15px 5px 15px 30px;
}
.vertical-collpsed .vertical-menu #leftsidebar-menu ul li ul.sub-menu li a {
    padding: 5px 30px;
}
.login-right {
    padding: 30px;
}
#topPopup .modal-content {
    width: 40%;
}

}

@media (max-width: 767px) {

body{
    overflow: auto;
}

/* .swiper-slide{
    width: calc(100% - 15%) !important;
} */

.profile-card img {
    width: 70px;
    height: 70px;
    object-fit: cover;
}
.vjs-nextplayvideo-btn {
    margin: 0 15px 0 18px !important;
    width: auto !important;
}
.user-status-section li a svg{
    width: 10px;
    height: auto;
 }
.reg-page-main .login-right{
    padding: 50px 30px;
}
table.dataTable .table-view-link a svg{
    width: 11px;
    height: auto;
 }
.reg-form-main {
    height: auto !important;
    overflow:auto;
    min-height: auto !important;
  }

.video-list-thumb {
    padding-bottom: 60%;
}
.vertical-menu {
    display: none;
}

.main-content {
    width: 100% !important;
}

.page-title-box h4.page-title-main {
    font-size: 24px !important;
    padding-bottom: 0px;
}

.vertical-collpsed .main-content{
    width: 100% !important;
}
body.sidebar-enable .vertical-menu{
    display: none;
}

.signin-sec .account-pages{
    padding: 0px;
    height: 100%;
}
.signin-sec .container{
    max-width: 100%;
    border-radius: 0;
}
.signin-sec .twofa-verify-page .container{
    box-shadow: none;
}
.signin-sec .container .row{
    flex-direction: column-reverse;
}
.login-right{
    padding: 50px;
}
.login-right img{
    width: 173px;
    height: auto;
}
.signin-sec .row .login-left-main {
    min-height: auto;
    padding: 60px 20px;
    display: block;
}
.signin-sec .row .login-left-main .p-2{
    padding: 0 !important;
}
.signin-sec #login-form, .signin-sec #resetPswdFrm-form, .signin-sec #resetPswdFrm{
    max-width: 100%;
}
.signin-sec h2{
    font-size: 24px;
    padding-bottom: 45px;
}
#register-form .row{
    display: flex;
    flex-direction: column;
}
.login-left-main .form-check-label{
    width: 89%;
    margin-left: 10px;
}
.layout-wrapper {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
}
#page-topbar {
    top: 0;
    right: 0;
    left: 0;
    background-color: #014760;
    border-radius: 0;
}
.main-content {
    margin-right: 0;
    height: 100%;
    width: 100%;
}
.page-content {
    padding: calc(19px + 25px) calc(24px* .64) 60px calc(24px* 0.64);
}
#page-topbar{
    display: none;
}
.header-mobile{
    display: block;
    padding: 10px 24px;
    background-color: #014760;
}
.mh-logout-icon{
    margin-left: 10px;
}
.header-profile-user{
    background-color: #fff;
    width: 40px;
    height: 40px;
}
.mobile-menu .toggle-wrap{
    padding: 0px 0 0 15px;
}
.dashboard-statistics{
    margin-top: 0px !important;
    margin: 0 -5px;
}
.dashboard-statistics .col-md-6{
    width: 50%;
    margin-bottom: 10px;
    padding: 0 5px;
}
.dashboard-statistics .card{
    border-radius: 10px !important;
    height: 100px;
}
.dashboard-statistics .card h4 {
    font-size: 22px;
}
.dashboard-statistics .card p {
    font-size: 12px;
}
.dashboard-statistics .card .card-body img {
    width: 45px !important;
    height: 45px !important;
}
.dashboard-statistics .card-body {
    padding: 15px 10px;
}
.dashboard-statistics .card-body.gap-3{
    gap: 0.6rem !important;
}
.view-all-report-btn .custom-btn-green{
    background-color: transparent;
    color: #999999;
    font-size: 12px;
    padding: 0;
    margin-top: 8px;
}
.user-status-section .card{
    border-radius: 10px;
}
.user-status-section .card .card-body {
    padding: 17px 20px;
}
.user-status-section h5.card-title {
    font-size: 16px;
}
.view-all-btn {
    font-size: 12px;
    text-decoration: none !important;
    line-height: 1;
    min-width: 100px;
    text-align: right;
}
.user-status-section p.font-size-18{
    font-size: 12px !important;
}
.user-status-section .card .card-body .mb-3{
    margin-bottom: 7px !important;
}
.user-status-section li .user-list-avtar{
    width: 26px !important;
    height: 26px;
    object-fit: cover;
    margin-right: 5px;
}
.user-status-section .card-body ul{
    max-height: 190px;
}
.user-status-section li span{
    /* max-width: 80px !important; */
    padding: 0 5px;
    min-width: inherit;
}
/* .report-user-video li{
    justify-content: flex-end !important;
} */
.report-user-video .list-group-item img + span {
    width: 55%;
    padding: 0 10px;
}
.report-user-video li span + div + span {
    width: 24% !important;
    text-align: center;
    padding: 0 5px;
}
.report-user-video{
    max-height: 470px !important;
}
.user-status-section li{
    flex-wrap: wrap;
    /* justify-content: flex-end !important; */
}
.user-status-section .list-group-item img + span {
    width: 50%;
}
.user-status-section .list-group-item img + span + span {
    width: 31%;
}
.user-status-section li span + span{
    min-width: auto;
}
.user-status-section li span, .chart-legend th, .card.mini-stats-wid p {
    font-size: 12px;
}
.user-status-section li a{
    width: 24px;
    height: 24px;
    border-radius: 4px;
}
.user-status-section li a img{
    width: 18px;
    height: auto;
}
.user-progression-sec .chart-container, .reports-progression{
    border-radius: 10px;
    padding: 16px 20px;
}
.chart-container canvas {
    margin: 0;
    max-width: 100%;
    max-height: inherit;
}
.chart-legend{
    padding-top: 20px;
}
.chart-legend .legend-color {
    width: 15px;
    height: 15px;
    min-width: 15px;
}
.chart-legend td {
    font-size: 14px;
    padding: 10px 0;
}
.m-footer-sticky{
    display: block;
    background-color: #014760;
    padding: 0 30px;
    position: fixed;
    bottom: 0px;
    left: 0;
    width: 100%;
    z-index: 9999;
}
.m-footer-sticky ul{
    display: flex;
    padding: 0;
    margin: 0 0 8px;
    align-items: center;
    justify-content: space-between;
}
.m-footer-sticky ul li{
    list-style: none;
    padding: 0 9px;
}
.m-footer-sticky ul li:first-child{
    padding-left: 0;
}
.m-footer-sticky ul li:last-child{
    padding-right: 0;
}
.m-footer-sticky ul li a{
    padding: 17px 8px 10px;
    display: block;
}
.m-footer-sticky ul li a img{
    width: 33px;
    height: 33px;
}
.m-footer-sticky ul li a:hover{
    background-color: #A1CE3F;
    border-bottom-right-radius: 100px;
    border-bottom-left-radius: 100px;
}
.m-footer-sticky ul li.active a{
    background-color: #A1CE3F;
    border-bottom-right-radius: 100px;
    border-bottom-left-radius: 100px;
}
.user-progression-sec h5.section-title{
    display: none;
}
.m-user-progression-title, .m-user-progression-title h5.section-title{
    display: block;
}
#chartLegend .mCSB_container, .report-user-video .mCSB_container{
    margin-right: 40px !important;
}
/* #chartLegend{
    max-height: 100% !important;
} */

.mCSB_scrollTools.mCSB_scrollTools_vertical a.mCSB_buttonUp, .mCSB_scrollTools.mCSB_scrollTools_vertical a.mCSB_buttonDown{
    height: 24px;
    width: 24px;
}
.mCSB_scrollTools.mCSB_scrollTools_vertical a.mCSB_buttonUp:after, .mCSB_scrollTools.mCSB_scrollTools_vertical a.mCSB_buttonDown:after{
    font-size: 16px;
    left: 5px;
}
.mCSB_scrollTools:after{
    left: 2px;
}
.mCSB_scrollTools.mCSB_scrollTools_vertical .mCSB_dragger .mCSB_dragger_bar{
    right: 4px;
}
.mCSB_scrollTools.mCSB_scrollTools_vertical a.mCSB_buttonDown{
    top: -36px;
}
.mCSB_scrollTools.mCSB_scrollTools_vertical a.mCSB_buttonUp{
    top: -70px !important;
}
#chartLegend .mCSB_scrollTools.mCSB_scrollTools_vertical{
    top: 80px;
}

.chart-container{
    margin-bottom: 30px !important;
}
.d-mes-button-group{
    display: none;
}
.m-mes-button{
    display: block;
    min-width: 80px;
    text-align: right;
}
.message-card{
    padding: 15px;
    border: 2px solid rgb(51 51 51 / 50%);
}
.message-card .msg-sender-name{
    font-size: 14px;
    width: 100%;
}
.date-name-sec{
    flex-wrap: wrap;
}
.message-card .message-time{
    font-size: 14px;
    font-weight: 400;
    padding-top: 5px;
    text-align: left;
}
.message-card p{
    margin-top: 0px;
    font-size: 14px;
    margin-left: -65px;
}
.message-card strong{
    margin-top: 30px;
    font-size: 14px;
    margin-left: -65px;
    display: block;
}
.need-help-sec p{
    font-size: 14px;
    text-align: left;
}
.m-profile-image-admin{
    display: block;
}
.m-profile-image-admin img{
    width: 70px;
    height: 70px;
    object-fit: cover;
}
.m-admin-user-card{
    display: none;
}
.profile-card, .user-profile-detail-card .card{
    border-radius: 10px;
    border: 1px solid #E5E5E5;
}
.user-profile-detail-card {
    height: auto;
}
.user-profile-detail-card p{
    flex-wrap: wrap;
}
.user-profile-detail-card p strong {
    min-width: 100%;
    padding-bottom: 8px;
}
.user-profile-last-sec .course-status{
    padding-bottom: 40px;
}
.report-chart-card{
    border-radius: 10px;
}
.years-chart-btn{
    font-size: 14px;
    line-height: 1;
    padding: 5px 5px;
    min-width: 60px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.select-dropdown-module .form-control{
    font-size: 14px;
    padding: 10px 30px 10px 15px;
}
.reports-progression .select-dropdown-module .form-control {
    min-width: auto;
}
.reports-progression .chart-legend td .div-col, .reports-progression .chart-legend td .div-col-last {
    padding: 10px 14px;
}
/* .report-user-video .mCSB_container {
    margin-right: 0px !important;
} */
.report-user-video .mCSB_scrollTools.mCSB_scrollTools_vertical{
    top: 75px;
}
.report-user-video li {
    padding: 10px 0 !important;
}   
.report-user-video li img.user-list-avtar {
    border-radius: 100%;
    width: 26px !important;
    height: 26px;
    object-fit: cover;
}
.report-user-video li span {
    font-size: 13px;
} 
.report-user-video li .legend-color{
    width: 15px !important;
    height: 15px !important;
}
.report-user-video li a{
    width: 24px;
    height: 24px;
    border-radius: 4px;
}
.report-user-video li a svg{
    width: 10px;
    height: auto;
}
/* .report-user-video{
    max-height: 100% !important;
} */
.m-usercard-inner-btn{
    display: block;
    text-align: center;
}
.m-usercard-inner-btn .custom-btn-green{
    min-width: 160px;
}
.progress-text{
    font-size: 16px;
}
.award-icon-progress{
    width: 30px;
}
.m-accountset-avtar{
    display: block;
}
.m-accountset-avtar .change-profile-img{
    justify-content: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
#mb-profile-action-icons{
    width: 100%;
    margin-top: 15px;
    display: flex;
    justify-content: center;
    gap: 10px;
}
#mb-profile-action-icons a{
    font-size: 14px;
    font-weight: 700;
    color: rgba(51, 51, 51, 0.5);
    text-transform: uppercase;
    text-decoration: underline !important;
}
.d-account-form{
    display: none;
}
.m-account-form{
    display: block;
}
.m-title{
    padding-bottom: 15px;
}
.custom-btn-green, .custom-btn, .swal2-confirm, .swal2-cancel {
    padding: 12px 16px;
}
table.table-bordered.dataTable tbody th, table.table-bordered.dataTable tbody td{
    font-size: 12px;
}
.course-management-table a, .course-management-table button, .module-management-table a, .module-management-table button{
    width: 24px;
    height: 24px;
    border-radius: 4px;
}
.module-management-table button i {
    font-size: 18px !important;
}
.course-management-table a i, .module-management-table a i {
    color: #fff !important;
    font-size: 14px !important;
}
.form-switch-lg .form-check-input {
    width: 35px;
    height: 18px;
    top: 2px;
}
.videos-of-title{
    font-size: 16px;
}
.module-thumb-img {
    width: 80px !important;
    height: 50px !important;
}
.swal2-icon{
    width: 4em;
    height: 4em;
    margin: 0.25em auto 0.875em;
}
.signin-sec .container .row.m-verify-otp{
    display: block;
}
.card.edit-course-form{
    border-radius: 10px;
}
.card.edit-course-form .card-body{
    padding: 20px;
}
.form-group {
    margin-bottom: 20px;
}
.dropzone .dz-message{
    margin: 0;
}
#videoModal .dz-button{
    font-size: 16px;
    padding: 10px 0;
}
#data-table_wrapper .bottom{
    margin-bottom: 10px;
    justify-content: center;
}
table.dataTable .table-view-link a{
    width: 26px;
    height: 26px;
    border-radius: 4px;
}
table.dataTable .table-view-link a img {
    width: 18px;
    height: auto;
}
table.dataTable .table-avtar{
    width: 26px !important;
    margin-right: 5px;
}
.dataTables_wrapper td img.table-avtar{
    width: 28px !important;
    height: 28px;
    object-fit: cover;
}
.m-userlist-table{
    padding: 17px 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 25px 2px rgba(0, 0, 0, 0.05);
    background-color: #fff;
}
/* .m-userlist-table .dataTables_scrollHead{
    display: none;
} */
 .m-userlist-name{
    font-weight: 700;
 }
 .m-userlist-badge{
    margin-left: 15px !important;
    width: 20px;
 }
/* .user-filter-btn-main ::placeholder,
.mb-user-filter-btn-main ::placeholder{
    color: #014760;
} */
.email-container .email-header h1{
    font-size: 16px;
}
input#mb_first_name {
    margin-bottom: 20px;
    display: inline-block;
}
.m-userdes-title{
    display: none;
}
.mini-stats-wid .page-title-box{
    padding-bottom: 0px;
    display: block !important;
}
.video-step-progrees ul.stepper li span{
    font-size: 12px;
}
.video-step-progrees ul.stepper li::before{
    height: 13px;
}
.video-step-progrees ul.stepper li{
    gap:10px;
}
.video-step-progrees ul.stepper li.active::after{
    top: calc((60px - 3px) / 2);
    height: 4px;
}
.video-step-progrees ul.stepper{
    background: linear-gradient(#33333359 0 0) no-repeat 50% calc((60px - 3px) / 2) / 97% 4px;
}
.video-step-progrees ul.stepper li.round-stop span::before{
    width: 25px;
    height: 25px;
    border: 3px solid #A1CE3F;
    top: 131%;
    left: -6px;
}
/* .course-module-progress .video-step-progrees ul.stepper li.round-stop span::before{
    top:17px;
} */
/* .user-module-progress .video-step-progrees ul.stepper li.round-stop span::before {
    top: 17px;
} */
.course-module-progress .select-dropdown-module .ms-auto{
    margin-left:0px !important;
}

.stepper::after, .stepper::before{
    top: 23px;
}
#videoCarousel .carousel-item .col-md-4 {
    width: 100%;
}
#videoCarousel .card {
    border-radius: 20px !important;
    box-shadow: none !important;
    /* margin: 0 15px; */
    padding: 19px;
    margin-bottom: 40px;
}
#videoCarousel a.preview-video{
    font-size: 12px !important;
    top:19px !important;
    right: 19px !important;
}
.preview-video{
    font-size: 12px;
}
.video-detail-slider #videoCarousel .card{
    margin: 15px 15px;
    box-shadow: 0px 0px 25px 0px #0000001A !important;
}
.course-counter {
    font-size: 12px;
    font-weight: 600;
}    
#videoCarousel .card img {
    border-radius: 10px;
}
#videoCarousel .card-title {
    font-size: 18px;
    min-height: auto;
}
#videoCarousel .card-body{
    padding: 20px 0;
}
#videoCarousel .btn-custom{
    padding: 12px 30px;
}
.purchase-history-card{
    border-radius: 10px;
    border: 1px solid #E5E5E5;
}
.purchase-history-card .card-body{
    padding: 24px;
}
.purchase-history-card .card-body .d-flex .purchase-his-item{
    width: 100%;
    margin-bottom: 25px;
}
.purchase-his-button, .purchase-his-button button{
    width: 100%;
}
.m-account-form .account-item p{
    font-size: 14px;
}
#video-list-scroll .mCSB_inside > .mCSB_container{
    margin-right: 0px;
}
#video-list-scroll {
    max-height: unset !important;
}   
#video-list-scroll .mCSB_inside > .mCSB_container {
    padding: 26px 0px 26px 0px;
}
.video-list-course .col-3{
    width: 100%;
} 
.video-list-course .col-8{
    width: 100%;
    margin-top: 20px;
}
#video-list-scroll .mCSB_scrollTools.mCSB_scrollTools_vertical{
    display: none !important;
}
.video-list-course .card {
    padding: 17px;
    border-radius: 20px;
}
.video-list-thumb img{
    border-radius: 10px;
}
.m-video-listbadge{
    display: block;
}
.video-list-course p.badged{
    font-size: 12px;
}
.video-list-course .col-8 p.badged{
    display: none;
}
.preview-video{
    top: 15px;
}
.video-list-course .text-eclipse-3line{
    font-size: 14px;
}
.video-list-course .col-2.remaining-text{
    width: 100%;
    padding-bottom: 10px;
}
.remaining-text-main{
    flex-wrap: wrap !important;
}
.remaining-text-main .col-10{
    width: 100%;
}
.d-playlist-icon{
    display: none;
}
.m-playlist-icon{
    display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
}
#videoModal .video-js{
    border-radius: 10px;
}
.watch-full-video-show{
    padding: 0px;
}
.watch-full-video-show .custom-btn{
    display: none;
}
#videoPlayer {
    border-radius: 0px;
}
.watch-full-video-show .video-js .vjs-control:nth-child(1), .watch-full-video-show .video-js .vjs-control:nth-child(3){
    width: 20px;
    margin-left: 10px;
    height: 100%;
}
.watch-full-video-show .video-js .vjs-control {
    font-size: 12px;
    /* width: 2em; */
}
.watch-full-video-show #rewindButton i, .watch-full-video-show #forwardButton i {
    font-size: 22px;
}
.watch-full-video-show .vjs-button>.vjs-icon-placeholder:before {
    font-size: 18px;
}
#videoPlayer.video-js .vjs-control-bar{
    padding-right: 10px;
}
.videodetail .page-content {
    padding: calc(0px + 0px) calc(0px* .64) 60px calc(0px* 0.64);
}
.video-description-main .col-12{
    padding-left: 20px;
    padding-right: 20px;
}
.watch-video-counter span {
    font-size: 16px;
}
.swal2-confirm, .swal2-cancel{
    font-size: 14px !important;
}
.swal2-html-container {
    font-size: 14px;
    padding: 14px 0;
}
.card.video-detail-slider{
    background-color: #fff;
}
.video-description-main #mb_coursel{
    margin: 0 -20px;
    border-radius: 0;
    padding: 30px 20px;
}
.video-description-main #mb_coursel .carousel-item .card{
    box-shadow: 0px 0px 25px 0px #0000001A !important;
    margin: 0px;
}
.video-description-main #mb_coursel .carousel-item{
    padding: 15px;
}
.watch-full-video-row{
    margin: 0 -6px;
}
.video-description-main {
    margin: 0 -6px;
}
.video-card-des-thumb{
    width: 100%;
}
#next-video-popup{
    left: 50%;
    top: 40%;
    font-size: 14px;
    padding: 20px 15px;
    position: absolute;
}
#next-video-popup .custom-btn{
    display: inline-block;
}
.swal2-content{
    padding: 0 10px;
}
#data-table_wrapper .bottom select{
    background-position: calc(100% - 7px) center !important;
    background-size: 13px;
}
.mb-create-topic-btn{
    right: 20px !important;
}
.chat-backarrow i{
    font-size: 28px !important;
}
.chat-header .avatar{
    margin-right: 10px;
}
.chat-header h5 {
    font-size: 18px !important;
    padding-right: 10px;
}
.msg-filterbtn .custom-btn {
    border-radius: 5px;
    padding: 4px;
    width: 30px;
    height: 30px;
}
.msg-filterbtn .custom-btn svg {
    width: 18px;
}
.messagecontainer#managemessagelayout {
    /* padding: 20px 0 20px; */
    padding-top: 67px !important;
    padding: 0px;
}
.messagecontainer#managemessagelayout .col-12{
    padding: 0px;
}
.messagecontainer#managemessagelayout .chat-header{
    padding: 20px;
}
.chat-conversion-main{
    padding-right: 0px;
    height: calc(100vh - 355px);
    max-height: initial;
    margin-bottom: 0;
    display: block !important;
    padding-bottom: 0;
}
.mobilekeyboardopen.chat-conversion-main{
    height: calc(100vh - 355px);
}
.ios .chat-conversion-main{
    height: calc(100vh - 375px);
}
.ios .mobilekeyboardopen.chat-conversion-main{
    height: calc(100vh - 300px);
}
.messagecontainer#managemessagelayout main > .row{
    margin-left: 0px !important;
    margin-right: 0px !important;
}
.messagecontainer#managemessagelayout .container-fluid{
    padding-right: 0px !important;
    padding-left: 0px !important;
}
.chat-message.sent .chat-message-inner{
    margin: 0px 0;
    border-radius: 0;
}
.chat-message-inner{
    flex-wrap: wrap;
    padding: 15px 20px;
    position: relative;
}
.chat-backarrow{
    margin-right: 5px;
}
.chat-message-right {
    width: 100%;
    padding-top: 15px;
}
.m-msgtyping-text{
    padding: 20px;
        /* padding-bottom: 68px; */
        position: fixed;
        bottom: 68px;
        width: 100%;
        left: 0;
        z-index: 999;
        background-color: #fff;
}
.chat-board-main .msg-send-btn{
    padding-right: 0px;
}
small.chat-timestamp {
    position: absolute;
    right: 40px;
    top: 25px;
}
.m-userlist-table td{
    padding: 8px 0 !important;
}
.m-userlist-table tr td:last-child{
    display: block !important;
    padding-top: 16px !important;
}
.loader{
    width: 50px !important;
    height: 50px !important;
    border: 4px solid rgba(0, 0, 0, 0.1) !important;
    border-top: 4px solid #014760 !important;
}
.course-module-progress .select-dropdown-module .form-control{
    margin-top: 10px;
}
#topPopup .modal-content{
    width: 85%;

}
.m-userlist-name.mb-text {
    white-space: normal;
    display: flex;
}
.dataTables_wrapper td img.table-avtar{
    margin-right: 10px;
}
.m-userlist-name.mb-text span {
    display: inline-block;
    padding-right: 8px;
    display: flex;
    align-items: center;
}
.m-userlist-table table.dataTable.nowrap td{
    white-space: unset;
}
.m-userlist-table table.dataTable.nowrap td span strong{
    display: block;
}
.m-userlist-table table.dataTable.nowrap td:nth-child(6) .d-flex.justify-content-center{
    max-width: 110px;
}
.m-userlist-table table.dataTable.nowrap td .d-flex.justify-content-center .mb-text{
    text-align: center;
}
.m-userlist-table table.dataTable.nowrap td .d-flex.justify-content-center .m-userlist-badge{
    margin-left: 0px !important;
}
#filter_datepicker {
    min-width: 200px;
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 30px;
}
.admin-members-list {
    padding: 15px;
}
.member-chat-list li{
    padding: 5px;
    background-color: transparent;
    margin-bottom: 5px;
}
.member-chat-list li img{
    width: 30px;
    height: 30px;
    object-fit: cover;
    margin-right: 8px !important;
}
.member-chat-list{
    max-height: 180px;
}
.mb-create-topic-btn{
    width: 50px !important;
    height: 50px !important;
}
#feedbackdetails .feedback-item {
    padding: 10px 0;
    flex-wrap: wrap;
    gap:5px !important
}
#feedbackdetails .feedback-item .form-label{
    font-size: 14px;
    width: 100%;
}
#feedbackdetails .feedback-item .form-group{
    font-size: 14px;
}
.ask-que-poppup .modal-body{
    max-height: 65vh;
    overflow: auto;
}
.reg-page-main .login-right .signup-text p.signup_started_line {
    font-size: 16px;
}
.msg-chat-list{
    overflow: hidden;
}
.msg-chat-list .page-content{
    padding: 111px 5px 50px;
}
.msg-chat-list .page-content .user-list{
    padding-right: 5px;
}
.msg-chat-list .user-list-component{
    height: calc(100vh - 285px) !important;
}
.msg-chat-list .mobile-menu aside.active{
    overflow-y: auto;
    /* padding-bottom: 180px; */
}
.wvideo-mobile-slider .swiper-pagination{
    bottom: -20px !important;
}
.wvideo-mobile-slider .swiper{
    overflow: visible !important;
}
#mobileHeader {
    /* position: relative; */
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: all 0.5s ease;
  }
  
  #mobileHeader.sticky {
    position: fixed;
    top: 0;
    background-color: #004c66; /* or your desired background */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: all 0.8s ease;
  }

  html{
    min-height: unset !important;
  }
#longPressModal li.list-group-item p{
    font-size: 14px;
}
.dataTables_empty{
    white-space: nowrap !important;
}
#filterfolderModal .list-group-item p {
    font-size: 14px;
}
span.flist_badge{
    font-size: 12px;
}
#filterfolderModal button.table-view-link {
    width: 26px;
    height: 26px;
    border-radius: 4px;
}
#filterfolderModal button.table-view-link i {
    font-size: 16px;
}   
#filterfolderModal button.table-view-link svg{
    width: 11px;
    height: 11px;
} 
.message-actions{
    position: absolute;
    right: 15px;
    top: 24px;
}
.message-actions i{
    font-size: 20px;
    color: #014760;
}

}

@media (max-width: 640px) {

    .message-card strong{
        margin-top: 15px;
    }

    .page-content {
        padding-top: 111px;
    }

    #mobileHeader {
        position: fixed;
        top: 0;
        background-color: #004c66;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        transition: all 0.8s ease;
    }
    .videodetail .page-content {
        padding-top: 67px;
    }
}

@media (max-width: 394px) {
.course-module-progress .video-step-progrees ul.stepper li.round-stop span::before{
    top: 130%;
}
.chat-conversion-main{
    padding-right: 0px;
    height: calc(100vh - 375px);
    max-height: initial;
    margin-bottom: 0;
    display: block !important;
}
/* .ios .chat-conversion-main{
    height: calc(100vh - 375px);
} */
}

@media (max-width: 380px) {
.video-step-progrees ul.stepper li.round-stop span::before{
    top:130%;
}

}

@media (max-width: 340px) {

    .user-status-section .list-group-item img + span {
        width: 40%;
    }
    .message-card .d-flex{
        flex-wrap: wrap;
    }
    .message-card strong{
        margin-left: 0px;
        margin-top: 5px;
    }
    .message-card .msg-sender-name{
        width: 100%;
    }
    .message-card p{
        margin-left: 0px;
    }
    .message-card .d-flex.align-items-end{
        width: 100%;
        justify-content: flex-end;
    }
    .m-footer-sticky{
        padding: 0 15px;
    }
    .m-footer-sticky ul li{
        padding: 0 5px;
    }
    .m-footer-sticky ul li a img {
        width: 26px;
        height: 26px;
    }
    .dashboard-statistics .card p {
        font-size: 12px;
        line-height: 1.2;
    }
    .dashboard-statistics .card .card-body img {
        width: 40px !important;
        height: 40px !important;
    }

}

@media (max-width: 290px) {

.user-module-progress .video-step-progrees ul.stepper li.round-stop span::before {
    top: 130%;
}

}


/*========== certificate ===============*/


.cer-page-title h4{
    color:#013E55;
    padding-bottom: 0px !important;
    display: flex;
    align-items: center;
}
.cer-page-title h4 span{
    font-family: 'BeautySalon Script';
    font-size: 55px;
    font-weight: 400;
    padding-right: 5px;
}
.user-madel-sec {
    display: flex;
    align-items: center;
    padding-bottom: 35px;
}
.user-madel-sec p, .cer-blue-text{
    margin-bottom: 0px;
    font-size: 24px !important;
    line-height: 1.4 !important;
}
.card.student-blue-card .card-body{
    z-index: 0;
}
.u-madel {
    padding-right: 54px;
    position: relative;
}
.u-madel::before{
    content: "";
    position: absolute;
    top: -4px;
    left: -5px;
    width: 70px;
    height: 84px;
    background-image: url(../images/cer-award.svg);
    background-repeat: no-repeat;
    z-index: -1;
    background-size: cover;
}
.u-madel img{
    width: 60px;
    height: 60px;
    border-radius: 100%;
    object-fit: cover;
    background-color: #fff;
}

.card.student-blue-card{
    border-radius: 24px;
    box-shadow: 0px 0px 25px 2px rgba(0, 0, 0, 0.05);
    background-color: #014760;
}
.card.student-blue-card .card-body{
    padding: 36px 46px;
}
.card.soy-success-card .card-body{
    padding: 30px;
}
.card.student-blue-card p{
    font-size: 18px;
    line-height: 1.7;
    color: #FFFFFF;
    font-weight: 400;
}
.card.student-blue-card p a{
    color: #fff;
    text-decoration: underline !important;
}
.student-btn{
    text-align: center;
    padding-top: 34px;
    padding-bottom: 30px;
}
.student-btn .custom-btn-green{
    position: relative;
    padding: 20px 45px;
    font-size: 22px;
    font-weight: 900;
}
.student-btn .custom-btn-green:hover{
    background-color: #fff;
    color: #A1CE3F;
}
.student-btn .custom-btn-green:after {
    content: "";
    position: absolute;
    bottom: -73px;
    right: -66px;
    margin: auto;
    background-image: url(../images/hand-blue-icon.png);
    width: 110px;
    height: 121px;
    background-size: 80px;
    background-repeat: no-repeat;
}
.card.soy-success-card{
    border-radius: 24px;
    box-shadow: 0px 0px 25px 2px rgba(0, 0, 0, 0.05);
    text-align: center;
    margin-bottom: 65px;
}
.course-certi-left p{
    font-size: 18px;
    line-height: 1.7;
    color: #333333;
    font-weight: 400;
    margin-bottom: 0px;
}
.course-certi-left .page-title-box{
    display: flex;
}
.course-certi-left h4.page-title-main{
    font-size: 32px !important;
    line-height: 1.2;
    font-weight: 700;
    padding-bottom: 15px;
    color: #014760;
    text-transform: capitalize;
    padding-bottom: 0;
    max-width: 80%;
    text-align: center;
    margin: 0 auto;
}
.course-certi-left h4 span{
   font-family: 'BeautySalon Script';
    font-size: 55px;
    font-weight: 400;
    padding-right: 5px;
    align-self: center;
    display: block;
}
.student-certi-btn-sec{
    position: relative;
    margin-top: 30px;
}
.student-certi-btn-sec a{
    margin: 0px !important;
    font-size: 18px;
    font-weight: 900;
}
.student-certi-btn-sec .btn.custom-btn-green:active, .student-certi-btn-sec .btn.custom-btn-green:focus{
    background-color:#014760 !important;
    color: #fff !important;
    border-color: #014760 !important;
}
.student-certi-btn-sec .btn.custom-btn-green:active:hover, .student-certi-btn-sec .btn.custom-btn-green:focus:hover{
    background-color:#A1CE3F !important;
    color: #014760 !important;
    border-color: #A1CE3F !important;
}
.student-btn .custom-btn-green:active, .student-btn .btn.custom-btn-green:focus{
    background-color: #A1CE3F !important;
    color: #014760 !important;
    border-color: #A1CE3F !important;
}
.student-btn .custom-btn-green:active:hover, .student-btn .btn.custom-btn-green:focus:hover{
    background-color: #fff !important;
    color: #A1CE3F !important;
    border-color: #A1CE3F !important;
}
.share-social {
    display: flex;
    align-items: center;
    padding-top: 30px;
}
.share-social ul {
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 0 0 0 15px;
}
.share p {
    margin: 0;
    font-size: 18px;
    line-height: 1.7;
    color: #333333;
    font-weight: 400;
    display: flex;
    align-self: center;
    gap:5px;
}
.share-social ul li {
    list-style: none;
}
.share p img{
    margin-top: -5px;
}
.course-certi-sec{
    display: flex;
    flex-wrap: wrap;
    padding-top: 35px;
}
.course-certi-sec .course-certi-left{
    width: 25%;
}
.course-certi-sec .course-certi-right{
    width: 75%;
    padding-left: 45px;
}
#pdf-canvas{
    max-width: 100% !important;
}

.download-history-sec label{
    font-size: 16px;
}
.download-history-sec #dataTables_filter{
    font-size: 16px;
}
.download-history-sec .dataTables_info{
    font-size: 16px;
    color: #014760;
}
.download-history-sec td a{
    color: #014760;
}
.dh-btn-group{
    padding-top: 23px;
}

@media (max-width: 1700px) {
.certi-pdf-sec .col-md-8 {
    width: 80%;
}
}

@media (max-width: 1600px) {
.course-certi-left h4.page-title-main{
    max-width: 90%;
}
}

@media (max-width: 1500px) {
.share-social ul li img{
    width: 35px;
    height: auto;
}
.share-social ul{
    padding: 0 0 0 10px;
}
.u-madel {
    padding-right: 40px;
}
.u-madel img{
    width: 50px;
    height: 50px;
}
.u-madel::before {
    width: 60px;
    height: 72px;
}
}

@media (max-width: 1440px) {
.card.student-blue-card p, .course-certi-left p, .share p{
    font-size: 16px;
}
.soy-success-card h4.page-title-main{
    padding-bottom: 10px;
}
.share-social {
    top: 4px;
}
.card.student-blue-card .card-body, .card.soy-success-card .card-body {
    padding: 25px 30px;
}
.user-madel-sec p, .cer-blue-text{
    font-size: 22px !important;
}
.student-btn .custom-btn-green {
    padding: 18px 40px;
    font-size: 20px;
}
.course-certi-left h4.page-title-main{
    font-size: 26px !important;
}
.cer-page-title h4 span, .course-certi-left h4 span{
    font-size: 50px;
}
.student-certi-btn-sec a{
    font-size: 16px;
}
.dh-btn-group {
    padding-top: 26px;
}
}

@media (max-width: 1366px) {

.course-certi-sec .course-certi-right {
    width: 70%;
    padding-left: 45px;
}
.course-certi-sec .course-certi-left {
    width: 30%;
}

}


@media (max-width: 1320px) {
.certi-pdf-sec .col-md-8 {
    width: 90%;
}
}

@media (max-width: 1180px) {
.certi-pdf-sec .col-md-8 {
    width: 100%;
}
.course-certi-left h4.page-title-main {
    max-width: 100%;
 }
}

@media (max-width: 1024px) {

.course-certi-sec .course-certi-left {
    width: 100%;
    padding-bottom: 50px;
}
.course-certi-sec .course-certi-right {
    width: 100%;
    padding-left: 0px;
}    
.course-certi-left .page-title-box {
    display: block;
    padding-bottom: 15px;
}
.course-certi-left h4.page-title-main {
    font-size: 24px !important;
    text-align: center;
    display: block;    
}

.student-certi-btn-sec{
    text-align: center;
}
.card.student-blue-card .card-body, .card.soy-success-card .card-body{
    padding: 30px;
}
.course-certi-left p{
    text-align: center;
}
.share-social ul li img {
    width: 30px;
    height: auto;
}
.share-social ul{
    gap: 5px;
}
.share-social {
    padding-top: 20px;
    justify-content: center;
}
.student-certi-btn-sec {
    margin-top: 20px;
}
.cer-page-title h4 span, .course-certi-left h4 span {
    font-size: 40px;
}
.course-certi-sec{
    padding-top: 20px;
}
.student-btn .custom-btn-green {
    padding: 15px 35px;
    font-size: 18px;
}
.course-certi-left h4 span{
    display: inline-block;
}

}

@media (max-width: 881px) {

.student-certi-btn-sec{
    text-align: center;
}
.share-social{
    position: static;
    margin-top: 15px;
    justify-content: center;
}
}

@media (max-width: 767px) {
    .card.student-blue-card p, .card.soy-success-card p, .share p {
        font-size: 14px;
    }
    .card.soy-success-card{
        margin-top: 10px;
        margin-bottom: 30px;
    }
    .soy-success-card h4.page-title-main {
        padding-bottom: 5px;
    }
    .share-social{
        margin-bottom: 30px;
    }
    .share p img {
        margin-top: -5px;
        width: 20px;
    }
    .cer-page-title{
        padding-bottom: 10px;
    }
    .card.student-blue-card .card-body, .card.soy-success-card .card-body {
        padding: 20px;
    }
    .user-madel-sec p, .cer-blue-text {
        font-size: 16px !important;
    }
    .user-madel-sec {
        display: block;
        padding-bottom: 20px;
    }  
    .u-madel{
        padding-bottom: 30px;
    }  
    .student-btn .custom-btn-green {
        padding: 15px 22px;
        font-size: 16px;
    }
    .student-btn .custom-btn-green:after{
        width: 98px;
        height: 113px;
        background-size: 60px;
    }
    .course-certi-sec {
        padding-top: 10px;
    }
    .course-certi-left .page-title-box {
        display: block;
        padding-bottom: 0;
    }
    .course-certi-left p{
        font-size: 14px;
    }
    .share-social {
        margin-bottom: 0;
        margin-top: 5px;
    }
    .student-certi-btn-sec a {
        font-size: 14px;
    }
    .course-certi-sec .course-certi-left {
        width: 100%;
        padding-bottom: 40px;
    }
    .u-madel img {
        width: 40px;
        height: 40px;
    }
    .u-madel::before {
        width: 47px;
        height: 56px;
    }
    .u-madel::before{
        top: -3px;
        left: -4px;
    }
    .dh-btn-group {
        padding-top: 26px;
    }
    .download-history-sec{
        padding: 17px 20px;
        border-radius: 10px;
        box-shadow: 0px 0px 25px 2px rgba(0, 0, 0, 0.05);
        background-color: #fff;
    }
    .download-history-sec .dataTables_scrollHead{
        display: none;
    }
    .download-history-sec td {
        padding: 8px 0 !important;
    }
    .download-history-sec td:last-child{
        text-align: right;
        padding-left: 8px !important;
    }
    .download-history-sec td:first-child{
        /* display: flex; */
        white-space: normal;
        padding-right: 8px !important;
    }
    .download-history-sec td{
        max-width: 33.333%;
        white-space: break-spaces !important;
        line-break: anywhere;
        width: 33.333%;
    }
    .m-contract-history-table #filter_datepicker {
        margin-bottom: 0;
        max-width: 80%;
        margin-top: 0;
        padding: 8px 10px 8px 10px;
        font-size: 14px;
        background-position: 13px 10px;
        background-size: 18px;
        border: 1px solid rgba(51, 51, 51, 0.5);
        border-radius: 10px;
        line-height: 22px;
        background-color: transparent;
        color: #014760;
    }
    .m-contract-history-table #filter-reset, .m-contract-history-table #filter-reset:hover{
        text-transform: uppercase;
        font-size: 16px;
        font-weight: 700;
        color: rgba(51, 51, 51, 0.5) !important;
        text-decoration: underline !important;
        padding: 0;
        background-color: transparent !important;
        margin-left: 15px !important;
    }
    .m-contract-history-table #filter-search{
        display: none;
    }
    .m-contract-history-table .m-date-filter{
        align-items: center;
    }
    .m-contract-history-table .date-range-input::placeholder{
            color: #014760 !important;
    }
    .download-history-sec thead{
        display: none !important;
    }
}