@charset "UTF-8";

/*------------------------------------------------------------------------------------------------------

* Template Name  : 



* Support        : nikunjgalathiya@gmail.com 

*------------------------------------------------------------------------------------------------------- 

NOTE: This is main stylesheet of template, This file contains the styling for the actual Template.

------------------------------------------------------------------------------------------------------*/



/*------------------------------------------------------------------------------------------------------

1. General

--------------------------------------------------------------------------------------------------------*/

/* 1.1 Root Code Variables */

:root {

    /* Main color */

    --primary: #194DB5;

    --primary-hover: rgba(0, 51, 153, 0.10);

    --primary-hover-8: #003399;



    --secondary: #081f2c;

    --secondary-hover: rgba(8, 31, 44, 0.2);

    /* text color */

    --white-color: #ffffff;

    --white-color-hover: rgba(255, 255, 255, 0.14);

    --black-color: #353434;

    /* background Color */

    --color-light: #C0C0C0;

    --bg-light: rgba(192, 192, 192, 0.2);

    --color-light-1: #E3E3E3;

    --bg-light-1: rgba(227, 227, 227, 0.2);

    --body-bg: #FFF;

    --header-box-shadow: 0px 14px 30px 0px rgba(225, 50, 0, 0.1);

    /* Fonts */

    --font-family-base: 'Open Sans', sans-serif;

    --font-family-title: 'Open Sans', sans-serif;

    /* transition and transform */

    --transition: all 300ms ease;

    /* extra color */

    --star-color: #ffa200;

    --red-color: #ff0000;

    --success-color: #00C801;

    --color-1: #84C225;

    --bg-color-1: rgba(131, 194, 37, 0.20);

    --color-yellow: #FFF500;

    --color-yellow-light: rgba(255, 247, 0, 0.20);

    --primary-rgb-1: rgba(0, 51, 153, 0.1);

    --extra-color-1: #F5F5F5;

}



/* 1.2 Theme Reset */

* {

    margin: 0;

    padding: 0;

    border: none;

    outline: none;

    font-size: 100%;

    line-height: inherit;

}



/* 1.3 Global Elements */

body {

    font-family: var(--font-family-base);

    font-size: 16px;

    line-height: 1.6;

    color: var(--black-color);

    background: var(--body-bg);

    -webkit-font-smoothing: antialiased;

    -moz-font-smoothing: antialiased;

}



a {

    color: var(--primary);

    position: relative;

    cursor: pointer;

    text-decoration: none;

    -webkit-transition: var(--transition);

    -ms-transition: var(--transition);

    -o-transition: var(--transition);

    -moz-transition: var(--transition);

    transition: var(--transition);

}



a:hover {

    color: var(--primary);

}



p {

    color: var(--black-color);

    margin: 0;

    font-size: 14px;

}



button {   

    cursor: pointer;

}



button:focus,

button:active,input:focus,

input:active {

    outline: 2px solid #000;

}



a:hover,

a:focus,

a:visited,

a:active,

select:focus {

    text-decoration: none;

    outline: 2px solid #003399;

    

}



h1,

h2,

h3,

h4,

h5,

h6 {

    position: relative;

    font-family: var(--font-family-title);

    font-weight: 400;

    margin-top: 0;

    text-transform: capitalize;

    margin-bottom: 15px;

    line-height: initial;

}



h1 a,

h2 a,

h3 a,

h4 a,

h5 a,

h6 a {

    color: inherit;

}



img {

    display: inline-block;

    max-width: 100%;

    height: auto;

}



ol,

ul {

    list-style: none;

    padding: 0;

    margin: 0;

}



input,

select,

button {

    font-family: var(--font-family-base);

}



textarea {

    overflow: hidden;

    resize: none;

    border: 1px solid #E1DFDD;

    width: 100%;

    border-radius: 10px;

    font-size: 16px;

    color: #000;

    padding-left: 20px;

    padding-right: 20px;

    font-weight: 400;

    margin-top: 5px;

    padding-top: 10px;

    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 1px 2px 0px rgba(0, 0, 0, 0.08);

}



iframe {

    border: none !important;

    display: block;

    width: 100%;

}



section {

    position: relative;

}



main {

    position: relative;

    width: 100%;

    display: block;

    margin-bottom: 30px;

}



.modal-backdrop.show {

    opacity: .8;

}



/* :: Font h1 */

h1 {

    font-size: 62px;

}



/* :: Font h2 */

h2 {

    font-size: 52px;

}



/* :: Font h3 */

h3 {

    font-size: 32px;

}



/* :: Font h4 */

h4 {

    font-size: 28px;

}



/* :: Font h5 */

h5 {

    font-size: 22px;

}



/* :: Font h6 */

h6 {

    font-size: 18px;

}



/* :: button style */

.button-style {

    display: inline-block;

    vertical-align: top;

    padding: 5px 15px;

    border-radius: 4px;

    border: 1px solid var(--primary);

    background: var(--primary);

    color: #ffffff;

    font-size: 14px;

    font-weight: 500;

    text-transform: capitalize;

    position: relative;

    overflow: hidden;

}



.button-style:hover {

    background: var(--primary-hover-8);

    color: #ffffff;

    border-color: transparent;

}



.button-style:hover:before {

    transform: scaleX(1);

    -webkit-transform: scaleX(1);

    -moz-transform: scaleX(1);

    -ms-transform: scaleX(1);

    -o-transform: scaleX(1);

}



/* >> Helper Class */

/* # color */

.primary-color {

    color: var(--primary) !important;

}



.secondary-color {

    color: var(--secondary) !important;

}



.white-color {

    color: var(--white-color) !important;

}



.text-red {

    color: var(--red-color) !important;

}



.text-success {

    color: var(--success-color) !important;

}



.black-color {

    color: var(--black-color) !important;

}



.bg-primary {

    background-color: var(--primary) !important;

}



.bg-secondary {

    background-color: var(--secondary) !important;

}



.bg-light {

    background-color: var(--bg-light) !important;

}



.bg-dark {

    background-color: var(--dark) !important;

}





/* grid */

.grid-1 {

    display: grid;

    grid-template-columns: repeat(1, 1fr);

    grid-gap: 1.5rem;

}



.grid-2 {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    grid-gap: 1.5rem;

}



.grid-3 {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    grid-gap: 1.5rem;

}



.grid-4 {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    grid-gap: 1.5rem;

}



.grid-5 {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    grid-gap: 1.5rem;

}



.grid-6 {

    display: grid;

    grid-template-columns: repeat(6, 1fr);

    grid-gap: 1.5rem;

}





/* :: form */

/* >> Default Form Style */

.default-form {

    position: relative;

}



.default-form .form-group {

    position: relative;

    margin-bottom: 30px;

}



.form-control:focus,

.form-select:focus {

   

    background-color: transparent;

    border-color: transparent;

    outline: 0;

    -webkit-box-shadow: none;

    -moz-box-shadow: none;

    -ms-box-shadow: none;

    -o-box-shadow: none;

    box-shadow: none;

}



.default-form .field-inner {

    position: relative;

    display: block;

}



.form-icon .field-inner i,

.form-icon .field-inner img {

    position: absolute;

    top: 18px;

    z-index: 1;

    font-size: 22px;

    bottom: 0;

    margin: 0 auto;

    display: block;

    line-height: 52px;

    left: 15px;

}



.form-icon .form-group .field-inner input[type="text"],

.form-icon .form-group .field-inner input[type="email"],

.form-icon .form-group .field-inner input[type="password"],

.form-icon .form-group .field-inner input[type="tel"],

.form-icon .form-group .field-inner input[type="url"],

.form-icon .form-group .field-inner input[type="file"],

.form-icon .form-group .field-inner input[type="number"],

.form-icon .form-group .field-inner textarea,

.form-icon .form-group .field-inner .select-time,

.form-icon .form-group .field-inner .select-person {

    padding-left: 50px;

}



.default-form .form-group input[type="text"],

.default-form .form-group input[type="email"],

.default-form .form-group input[type="password"],

.default-form .form-group input[type="tel"],

.default-form .form-group input[type="url"],

.default-form .form-group input[type="file"],

.default-form .form-group input[type="number"],

.default-form .form-group textarea,

.default-form .form-group select {

    position: relative;

    display: block;

    height: 60px;

    width: 100%;

    padding: 10px 20px;

    margin: 0;

    color: var(--black-color);

    background-color: var(--white-color);

    border: 2px solid var(--secondary);

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    -ms-border-radius: 5px;

    -o-border-radius: 5px;

    border-radius: 5px;

    -webkit-transition: var(--transition);

    -ms-transition: var(--transition);

    -o-transition: var(--transition);

    -moz-transition: var(--transition);

    transition: var(--transition);

}



.default-form .form-group textarea {

    height: 130px;

    padding: 13px 20px;

}



.contact-form .form-group input[type="submit"],

.contact-form .form-group button {

    display: inline-block;

}



.default-form .form-group input[type="text"]:focus,

.default-form .form-group input[type="email"]:focus,

.default-form .form-group input[type="password"]:focus,

.default-form .form-group input[type="tel"]:focus,

.default-form .form-group input[type="url"]:focus,

.default-form .form-group input[type="file"]:focus,

.default-form .form-group input[type="number"]:focus,

.default-form .form-group textarea:focus,

.default-form .form-group select:focus {

    border-color: var(--primary);

}



.default-form .form-group .field-inner label {

    margin-bottom: 5px;

    color: var(--black-color);

    font-size: 14px;

    letter-spacing: 1.5px;

    font-weight: 400;

    text-transform: uppercase;

}



input[type="number"]::-webkit-inner-spin-button,

input[type="number"]::-webkit-outer-spin-button {

    -webkit-appearance: none;

    appearance: none;

}



input[type="number"] {

    -moz-appearance: textfield;

    appearance: none;

}



.default-form .form-group select {

    cursor: pointer;

}



.default-form .form-group select option {

    padding-left: 0;

    text-indent: 20px;

    cursor: pointer;

}





/* >> Progress Wrap  */

.progress-wrap {

    position: fixed;

    right: 20px;

    bottom: 60px;

    height: 46px;

    width: 46px;

    cursor: pointer;

    display: block;

    z-index: 8;

    opacity: 0;

    visibility: hidden;

    -webkit-border-radius: 50px;

    -moz-border-radius: 50px;

    -ms-border-radius: 50px;

    -o-border-radius: 50px;

    border-radius: 50px;

    background-color: var(--black-color);

    -webkit-transform: translateY(15px);

    -moz-transform: translateY(15px);

    -ms-transform: translateY(15px);

    -o-transform: translateY(15px);

    transform: translateY(15px);

    -webkit-transition: all 200ms linear;

    -moz-transition: all 200ms linear;

    -ms-transition: all 200ms linear;

    -o-transition: all 200ms linear;

    transition: all 200ms linear;

}



.progress-wrap.active-progress {

    opacity: 1;

    visibility: visible;

    -webkit-transform: translateY(0);

    -moz-transform: translateY(0);

    -ms-transform: translateY(0);

    -o-transform: translateY(0);

    transform: translateY(0);

}



.progress-wrap i {

    position: absolute;

    left: 0;

    right: 0;

    top: 0;

    bottom: 0;

    display: -moz-box;

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    margin: auto;

    color: var(--white-color);

}



.progress-wrap svg path {

    fill: none;

}



.progress-wrap svg.progress-circle path {

    stroke: var(--white-color);

    stroke-width: 4;

    box-sizing: border-box;

    -webkit-transition: all 200ms linear;

    -moz-transition: all 200ms linear;

    -ms-transition: all 200ms linear;

    -o-transition: all 200ms linear;

    transition: all 200ms linear;

}



/*---------------------------------------------------------------------------

2. Header

----------------------------------------------------------------------------*/

.main-header {

    padding: 2px 0;

}



header .navbar .navbar-nav .nav-item .nav-link {

    font-size: 15px;

    line-height: 20px;

    color: #797979;

    padding: 8px 16px;

    font-weight: 400;

}



header .navbar .navbar-nav .nav-item .nav-link.active {

    color: #003399 !important;

    font-weight: 600;

}



header .navbar .navbar-nav .nav-item .nav-link:hover {

    color: #003399;

}



.search-bar {

    /* margin-left: 12px; */

}



.search-bar input {

    border: 1px solid #E1DFDD;

    width: 184px;

    height: 32px;

    padding: 0 30px;

    border-radius: 5px;

    background: transparent;

    color: #00000073;

    font-size: 14px;

    font-weight: 500;

    border-radius: 8px;

}



.search-bar .search-icon {

    position: absolute;

    left: 10px;

    top: 50%;

    transform: translateY(-50%);

}



.search-bar .search-icon img {

    width: 14px;

}



.profile-menu {

    .dropdown-menu {

        right: 0;

        left: unset;

    }



    .fa-fw {

        margin-right: 10px;

    }

}



header .dropdown-menu {

    border: 1px solid #E1DFDD;

}



header .dropdown-toggle::after {

    content: none;

}



.noti-list .dropdown-menu {

    min-width: 360px;

    padding: 16px;

    box-shadow: 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03);



}



.noti-list .dropdown-menu img {

    width: 24px;

}



.noti-list .dropdown-menu .text {

    padding: 0 8px;

    font-size: 14px;

    color: #141414;

}



.noti-list .dropdown-menu .text span {

    font-weight: 600;

}



.noti-list .dropdown-menu .text a {

    font-size: 14px;

    font-weight: 500;

    color: var(--primary);

    display: block;

}



.noti-list .dropdown-menu li {

    border-bottom: 1px solid #E1DFDD;

    padding-bottom: 12px;

    margin-bottom: 12px;



}



.dark-bg .noti-list .dropdown-menu .text {

    color: #fff;

}



.dark-bg .noti-list .dropdown-menu .text a {

    color: #4B98F7;

}



.dark-bg .noti-list .dropdown-menu li .see {

    color: #4B98F7;

}



.dark-bg .title {

    color: #fff;



}



.noti-list .dropdown-menu li .see {

    font-size: 14px;

    font-weight: 500;

    color: var(--primary);

}



.noti-list .dropdown-menu li:last-child {

    border-bottom: none;

    padding-bottom: 0;

    margin-bottom: 0;

}



.profile a p {

    font-size: 15px;

    font-weight: 400;

    padding: 0 8px;

    color: #1F1E1E;

}



.profile .show p {

    font-weight: 600;

}



.profile .dropdown-menu {

    min-width: 242px;

    padding: 16px;

    box-shadow: 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03);

}



.profile .dropdown-menu li a {

    padding: 0;

    font-size: 15px;

    font-weight: 400;

}



.profile .dropdown-menu li a:hover {

    background-color: transparent;

    color: var(--primary);

}



.profile .dropdown-item:active,

.profile .dropdown-item:focus,

.profile .dropdown-item:hover {

    background-color: transparent;

    color: var(--primary);

}



.profile .dropdown-menu li a img {

    margin-right: 12px;

}



.profile .dropdown-menu li {

    margin: 8px 0;

}



.profile .dropdown-menu li .form-switch {

    margin-right: -8pxs;

}



.toggle-change {

    &::after {

        border-top: 0;

        border-bottom: .3em solid;

    }

}



.arrow {

    width: 10px;

    height: 10px;

    border: 1px solid #E1DFDD;

    background: #ffffff;

    border-bottom: 0;

    border-left: 0;

    position: absolute;

    right: 18px;

    top: -5px;

    transform: rotate(-45deg);

}



/* header-right */

.header-right {

    display: flex;

    align-items: center;

    gap: 30px;

}



.header-lesson-no {

    display: inline-flex;

    align-items: center;

    gap: 15px;

    font-size: 22px;

    background-color: var(--white-color-hover);

    padding: 12px 30px;

    justify-content: center;

    border-radius: 5px;

}



.header-lesson-no a {

    font-size: 20px;

    font-weight: 400;

}



.header-lesson-no a:hover {

    color: var(--secondary) !important;

}







/* header-icon */

.header-icon ul {

    display: flex;

    gap: 20px;

    align-items: center;

    justify-content: center;

}



.header-icon a {

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50px;

    background: transparent;

    color: #797979;

    padding: 0px;

}



.header-icon a:hover {

    background: var(--white-color-hover);

}







@keyframes growProgressBar {



    0%,

    33% {

        --pgPercentage: 0;

    }



    100% {

        --pgPercentage: var(--value);

    }

}



@property --pgPercentage {

    syntax: '<number>';

    inherits: false;

    initial-value: 0;

}



div[role="progressbar"] {

    --size: 55px;

    --fg: var(--color-1);

    --bg: transparent;

    --pgPercentage: var(--value);

    width: var(--size);

    height: var(--size);

    border-radius: 50%;

    display: grid;

    place-items: center;

    background: radial-gradient(closest-side, var(--primary) 68%, transparent 0 99.9%, var(--primary) 0), conic-gradient(var(--fg) calc(var(--pgPercentage) * 1%), var(--bg) 0);

    font-size: 14px;

    color: var(--white-color);

    position: relative;

}



.header-progress>div:after {

    content: "";

    height: 56px;

    width: 56px;

    position: absolute;

    border: 9px solid var(--bg-color-1);

    border-radius: 50px;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    margin: auto;

}



div[role="progressbar"]::before {

    counter-reset: percentage var(--value);

    content: counter(percentage) '%';

}



.mobile-hunger {

    display: none;

    margin-left: 10px;

    margin-right: 10px;

}



.menu-icon {

    margin: 0 auto;

    width: 30px;

    height: 18px;

    cursor: pointer;

    position: relative;

}



.menu-icon span {

    background-color: var(--white-color);

    height: 2px;

    position: absolute;

    width: 100%;

    left: 0;

    border-radius: 10px;

}



.menu-icon span:first-child {

    top: -4px;

}



.menu-icon span:nth-child(2) {

    top: 6px;

}



.menu-icon span:last-child {

    top: 17px;

}



.header-icon.mobile-show .menu-icon span:nth-child(2) {

    display: none;

}



.header-icon.mobile-show .menu-icon span:first-child {

    transform: rotate(45deg) translate(5px, 10px);

}



.header-icon.mobile-show .menu-icon span:last-child {

    transform: rotate(-45deg) translate(5px, -10px);

}



.header-icon.mobile-show ul {

    display: inline-flex;

    position: absolute;

    left: 0;

    right: 0;

    bottom: -68px;

    z-index: 999;

    background: var(--secondary);

    padding: 10px 0;

}



/*---------------------------------------------------------------------------

3. main

----------------------------------------------------------------------------*/



/* lesson-video-area start */

.lv-main {

    display: flex;

    height: calc(100vh - 100px);

    position: relative;

    overflow: hidden;

}



.lv-left {

    width: calc(100% - 480px);

    display: flex;

    align-items: center;

    justify-content: center;

    left: 0;

    position: relative;

}



.lv-main.sidebar-close .lv-left {

    width: 100%;

}



.lesson-video,

.lesson-questionnaire {

    position: relative;

    height: 100%;

    width: 100%;

}





.lv-right {

    right: 0;

    flex: 1;

    background-color: var(--white-color);

    padding: 10px;

    position: relative;

    height: 100%;

    width: 480px;

    transition: var(--transition);

}



.lv-main.sidebar-close .lv-right {

    right: -480px;

    position: absolute;

}



.lv-toggle-button.lv-toggle-colose {

    position: absolute;

    left: -100px;

    z-index: 9;

}



.lv-toggle {

    background-color: var(--secondary);

    border-radius: 10px;

    width: 68px;

    height: 60px;

    display: flex;

    gap: 5px;

    justify-content: center;

    align-items: center;

    color: var(--white-color);

    cursor: pointer;

}



span.bg-effect {

    height: 45px;

    width: 31px;

    background: var(--white-color);

    border-radius: 10px;

}



.lv-toggle.lv-toggle-close {

    display: none;

}



.lv-toggle-button.lv-toggle-colose .lv-toggle-open {

    display: none;

}



.lv-toggle-button.lv-toggle-colose .lv-toggle-close {

    display: inline-flex;

}



.lv-search {

    display: flex;

    gap: 20px;

    margin-bottom: 10px;

    position: relative;



}



.lv-search-area.default-form .form-group input[type="text"] {

    font-style: italic;

    font-size: 18px;

}



.lv-tabs-data-list {

    display: none;

    width: 100%;

}



.lv-tabs-data-active {

    display: block;

}



.lv-tabs-box ul {

    background-color: var(--color-light-1);

    border-radius: 10px;

    display: flex;

    gap: 10px;

    align-items: center;

    justify-content: center;

    padding: 8px 8px;

}



.lv-tabs-box ul li {

    width: 50%;

}



.lv-tabs-box ul li a {

    text-align: center;

    padding: 10px 20px;

    display: inline-block;

    width: 100%;

    color: var(--black-color);

    font-size: 18px;

    font-weight: 600;

    border-radius: 10px;

}



.lv-tabs-box ul li a.lv-tabs-list-active {

    background-color: var(--secondary);

    color: var(--white-color);

}



.lv-tabs-box ul li a svg {

    margin-right: 5px;

}



.lv-tabs-box ul li a.lv-tabs-list-active svg path {

    fill: var(--white-color);

}



.lv-tabs-title h2 {

    font-size: 20px;

}



.lv-tabs-lessons-box {

    height: calc(100vh - 345px);

}







.accordion .accordion-item {

    background-color: var(--white-color);

    margin-bottom: 20px;

    border: 0;

    border-radius: 5px;

}



.accordion .accordion-collapse {

    border: 0;

    border-radius: 0 !important;

}



.accordion-header .accordion-button.collapsed {

    background-color: var(--color-light-1);

    color: var(--secondary);

    border-radius: 10px !important;

}



.accordion-header .accordion-button:not(.collapsed) {

    background-color: var(--bg-light);

    color: var(--secondary);

    border-radius: 10px 10px 0 0;

    border-color: var(--secondary);

}



.accordion-header .accordion-button {

    font-size: 16px;

    line-height: 1.25;

    font-weight: 600;

    border: 0;

    padding: 10px 60px 10px 75px;

    -webkit-transition: var(--transition);

    -ms-transition: var(--transition);

    -o-transition: var(--transition);

    -moz-transition: var(--transition);

    transition: var(--transition);

    color: var(--black-color);

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 5px;

    border: 1px solid transparent;

    min-height: 62px;

    justify-content: center;

}



.accordion-header .accordion-button::after {

    position: absolute;

    right: 20px;

}



.accordion-button:focus {

    border-color: transparent;

    -webkit-box-shadow: none;

    -moz-box-shadow: none;

    -ms-box-shadow: none;

    -o-box-shadow: none;

    box-shadow: none;

}



.accordion-header .accordion-button::after {

    margin-left: auto;

    background-image: none;

    background-repeat: unset;

    background-size: unset;

    position: absolute;

    right: 15px;

    content: "\f107";

    -webkit-transition: var(--transition);

    -ms-transition: var(--transition);

    -o-transition: var(--transition);

    -moz-transition: var(--transition);

    transition: var(--transition);

    font-family: "Font Awesome 5 Free";

    font-weight: 900;

    font-size: 20px;

    height: 46px;

    background: var(--bg-light);

    width: 46px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50px;

    top: 7px;

}



.accordion .accordion-body {

    padding: 25px;

    border: 1px solid var(--secondary);

    border-top: 0;

    margin-top: 0;

    border-radius: 0 0 15px 15px;

    -webkit-transition: var(--transition);

    -ms-transition: var(--transition);

    -o-transition: var(--transition);

    -moz-transition: var(--transition);

    transition: var(--transition);

    background-color: var(--bg-light);

    color: var(--black-color);

}



.accordion-no {

    background: var(--color-light);

    height: 100%;

    width: 60px;

    position: absolute;

    left: 0;

    border-radius: 10px 10px 10px 0;

    top: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 18px;

    color: var(--secondary);

}



span.other-title {

    display: inline-block;

    width: 100%;

    font-size: 12px;



}



.accordion-header .accordion-button.collapsed p.accordion-no {

    border-radius: 10px;

}



.accordion-header .accordion-button:not(.collapsed) p.accordion-no {

    background-color: var(--secondary);

    color: var(--white-color);

}



.status-done .accordion-header .accordion-button {

    background-color: var(--bg-color-1);

}



.status-done .accordion-header .accordion-button:not(.collapsed) {

    border-color: var(--color-1);

}



.status-done .accordion-body {

    border-color: var(--color-1) !important;

}





.status-done .accordion-header .accordion-button p.accordion-no {

    background-color: var(--color-1);

}



.accordion-lesson-list {

    position: relative;

    padding-left: 50px;

}



.accordion-lesson-list h6 {

    font-size: 14px;

    color: var(--secondary);

    font-weight: 600;

    margin: 0;

}



.accordion-lesson-list p {

    font-size: 12px;

    color: var(--secondary);

    font-weight: 600;

}



.accordion-lesson-list i {

    position: absolute;

    left: 0;

    height: 32px;

    width: 32px;

    display: flex;

    justify-content: center;

    align-items: center;

    background: var(--bg-light);

    border-radius: 50px;

    font-size: 12px;

    top: 0;

}



.accordion-lesson-list:not(:nth-last-child(1)) {

    position: relative;

    padding-left: 50px;

    margin-bottom: 15px;

    border-bottom: 1px solid var(--bg-light);

    padding-bottom: 15px;

}



.accordion-lesson-list.inner-status-done i {

    background: var(--secondary);

    color: var(--white-color);

}



.accordion-lesson-list.inner-status-done a {

    color: var(--secondary) !important;

}



/* .accordion-lesson-list.inner-status-done i::after{

    content: "";

    height: 16px;

    width: 16px;

    position: absolute;

    background-image: url(../../assets/images/icon/icon-done.png);

    background-repeat: no-repeat;

    top: -4px;

    right: -4px;

} */

/* .accordion-lesson-list.inner-status-done i::after {

    content: "✓";

    height: 16px;

    width: 16px;

    position: absolute;

    top: -4px;

    right: -4px;

    background: rgb(243 243 243);

    border-radius: 50px;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 10px;

    border: 2px solid rgb(243 243 243);

    color: var(--color-1);

} */



.accordion-lesson-list.inner-status-inprogress i {

    background: var(--primary);

    color: var(--white-color);

}



.accordion-lesson-list.inner-status-inprogress a {

    color: var(--primary) !important;

}



.accordion-lesson-list.inner-status-inprogress p {

    color: var(--primary);

    opacity: 0.7;

}







.language-selection .select2-selection.select2-selection--single {

    position: relative;

    display: block;

    height: 60px;

    width: 100%;

    padding: 10px 20px;

    margin: 0;

    color: var(--black-color);

    background-color: var(--white-color);

    border: 2px solid var(--secondary);

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    -ms-border-radius: 5px;

    -o-border-radius: 5px;

    border-radius: 5px;

    -webkit-transition: var(--transition);

    -ms-transition: var(--transition);

    -o-transition: var(--transition);

    -moz-transition: var(--transition);

    transition: var(--transition);

    margin-bottom: 10px;

}



.language-selection .select2-container .select2-selection--single .select2-selection__rendered {

    padding: 0;

}



.language-selection .select2-container--default .select2-selection--single .select2-selection__arrow {

    height: 55px;

}



.language-selection .select2-selection__rendered span {

    display: flex;

    align-items: center;

    gap: 10px;

}



.select2-container--open .select2-dropdown--below {

    margin-top: -10px;

    border-top: none;

    border-top-left-radius: 0;

    border-top-right-radius: 0;

}



.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar {

    width: 3px;

}



.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-track {

    background: var(--body-bg);

}



.select2-container--default .select2-results>.select2-results__options::-webkit-scrollbar-thumb {

    background: var(--primary);

}



select+.select2-container {

    width: 100% !important;

}



/* lesson-video-area end */





/* lesson-questionnaire start */

.lesson-questionnaire {

    padding: 30px;

    background: var(--white-color);

    overflow: auto;

}



.understanding {

    position: relative;

    margin-bottom: 20px;

}



.understanding img {

    width: 25px;

    position: absolute;

    left: 20px;

    top: 15px;

}



.understanding h5 {

    font-weight: 600;

    padding: 16px 15px 16px 60px;

    background-color: var(--bg-color-1);

    border-radius: 15px;

    color: var(--secondary);

    margin: 0;

}





.question-list {

    background: var(--bg-light);

    border-radius: 15px;

    margin-bottom: 20px;

}



.question-title {

    padding: 15px;

    border-bottom: 1px solid var(--bg-light);

    color: var(--secondary);

    font-weight: 500;

}



.question-title p {

    font-size: 16px;

}



.question-options {

    padding: 15px;

    position: relative;

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.question-options-list {

    position: relative;

    padding-left: 40px;

}



.question-no {

    background-color: var(--color-light);

    height: 45px;

    width: 45px;

    display: flex;

    justify-content: center;

    align-items: center;

    color: var(--secondary);

    font-size: 14px;

    font-weight: 500;

}



.question-radio {

    width: 45px;

    height: 45px;

    position: absolute;

    top: 0;

    left: 0;

    padding: 10px 0;

}



.question-items {

    background: var(--bg-light);

    display: flex;

    width: 100%;

    overflow: hidden;

    border-radius: 5px;

    gap: 15px;

}



.line {

    height: 1px;

    width: 16px;

    position: absolute;

    right: 5px;

    background: var(--secondary);

    z-index: 0;

    top: 22px;

}



.question-name {

    font-size: 14px;

    font-weight: 500;

    padding-top: 10px;

    flex: 1;

}



.question-options-list.ans-hint .question-items {

    background: var(--bg-color-1);

}



.question-options-list.ans-hint .question-no {

    background-color: var(--color-1);

    color: var(--secondary);



}



.question-radio input[type="radio"] {

    position: absolute;

    opacity: 0;

}



.question-radio input[type="radio"]+.radio-label {

    border-radius: 100%;

    border: 2px solid var(--secondary);

    width: 24px;

    height: 24px;

    position: relative;

    cursor: pointer;

    transition: all 250ms ease;

    background-color: var(--bg-light);

}



.question-radio input[type="radio"]:checked+.radio-label:before {

    content: '';

    background-color: var(--primary);

    width: 14px;

    height: 14px;

    position: absolute;

    left: 0;

    right: 0;

    top: 0;

    bottom: 0;

    margin: auto;

    border-radius: 15px;

}



.question-radio input[type="radio"]:focus+.radio-label:before {

    outline: none;

    border-color: var(--primary);

}



.question-alt {

    background-color: var(--color-yellow-light);

    font-size: 14px;

    color: var(--secondary);

    position: relative;

    padding: 15px 15px 15px 65px;

    border-radius: 15px;

    font-weight: 500;

}



.question-alt img {

    position: absolute;

    left: 20px;

}



/* lesson-questionnaire end */







/* view customer course start */



/* >> breadcrumb */

.breadcrumb-main h2 {

    font-size: 32px;

    font-weight: 400;

    color: var(--secondary);

}



.breadcrumb-wrap ul {

    display: inline-block;

    padding: 0;

    margin-bottom: 0;

}



.breadcrumb-wrap ul li {

    display: inline-block;

    font-size: 14px;

    

}



.breadcrumb-wrap ul li a {

    color: #003399;

    font-size: 14px;

    font-weight: 500;

    letter-spacing: initial;

}



.breadcrumb-wrap ul li:nth-last-child(1) a {

    color: #1F1E1E;

}



.breadcrumb-wrap ul li.active {

    color: var(--white-color);

}



.breadcrumb-item.active {

    color: var(--primary);

}



.breadcrumb-item+.breadcrumb-item {

    padding-left: 10px;

    color: #1F1E1E;

}



.breadcrumb-item+.breadcrumb-item::before {

    display: none;

}





section.view-customer-course-area {

    background: var(--white-color);

}



.course-content h2 {

    font-size: 24px;

    font-weight: 600;

    color: var(--secondary);

}



.course-content-list p {

    color: var(--secondary);

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 14px;

}



.course-content-list span {

    height: 20px;

    width: 20px;

    position: absolute;

    left: 0;

    top: 2px;

    display: flex;

    background: var(--primary-rgb-1);

    border-radius: 50px;

    justify-content: center;

    align-items: center;

}



.course-content-list li p {

    margin-bottom: 10px;

    position: relative;

    padding-left: 30px;

}



.course-content-list li p span::before {

    display: inline-block;

    font-style: normal;

    font-variant: normal;

    text-rendering: auto;

    -webkit-font-smoothing: antialiased;

    font-family: "Font Awesome 5 Free";

    font-weight: 900;

    content: "\f00c";

    font-size: 8px;

    color: var(--primary);

}



.course-module-area {

    background: rgba(0, 51, 153, 0.03);

}



.cm-title h2 {

    font-size: 24px;

    font-weight: 600;

    color: var(--primary);

    position: relative;

    display: inline-block;

}



.cm-title h2::after {

    content: "";

    height: 2px;

    width: 100%;

    background: var(--primary);

    position: absolute;

    bottom: -10px;

    left: 0;

}



.cm-list {

    margin-bottom: 20px;

    font-size: 14px;

}



.cm-left {

    display: flex;

    align-items: center;

    gap: 15px;



}



.cm-top {

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

    align-items: center;

    background: var(--bg-light);

    padding: 10px 15px;

    border-radius: 15px;

    min-height: 60px;

}



.cm-left span {

    background: var(--white-color);

    border: 1px solid var(--primary);

    height: 50px;

    width: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50px;

}



.launch-btn {

    background: var(--primary);

    padding: 8px 10px;

    display: flex;

    border-radius: 50px;

    color: var(--white-color);

    text-transform: uppercase;

    font-size: 14px;

    align-items: center;

    gap: 10px;

}



.launch-btn:hover {

    background: var(--secondary);

    color: var(--white-color);

}



.cm-right {

    display: flex;

    align-items: center;

    gap: 15px;

}



.test-computed {

    display: none;

    color: var(--color-1);

}



.cm-inner-content {

    background: var(--bg-light);

    margin-top: 1px;

    border-radius: 15px;

    padding: 15px;

}



.cm-list.cm-section .cm-top {

    background: rgb(192 192 192 / 70%);

}



.cm-list.cm-section .cm-inner-content {

    background: rgb(192 192 192 / 40%);

}



/* .cm-list.cm-computed .cm-top {

    background: var(--bg-color-1);

}



.cm-list.cm-computed .cm-top .cm-left span{

    background: var(--color-1);

} */



.cm-list.cm-computed .cm-top span.test-computed {

    display: block;

}



.cm-left p {

    font-size: 16px;

    font-weight: 500;

}



.course-pogressbar {

    background: var(--primary-hover);

    padding: 15px 15px;

    margin-bottom: 15px;

    border-radius: 15px;

}



.skill-main {

    width: 100%;

    display: flex;

    flex-direction: column;

}



.skill-main .skill-wrrap {

    display: flex;

    flex-direction: column;

    gap: 8px;

}



.skill-main .skill-wrrap .skill-name {

    color: var(--primary);

    font-size: 16px;

    font-weight: 500;

}



.skill-main .skill-wrrap .skill-bar {

    height: 5px;

    background-color: rgba(0, 51, 153, 0.10);

    border-radius: 8px;

    position: relative;

}



.skill-main .skill-wrrap .skill-per {

    height: 3px;

    background: var(--primary);

    border-radius: 8px;

    width: 0;

    transition: 1s linear;

    margin: 1px;

}



.skill-main .skill-wrrap .skill-per:before {

    content: attr(per);

    position: absolute;

    color: var(--primary);

    font-size: 16px;

    top: -35px;

    right: 0;

    font-weight: 600;

}



/* .skill-main .skill-wrrap .skill-per:after {

    content: "";

    position: absolute;

    width: 10px;

    height: 10px;

    background-color: #23576f;

    top: -20px;

    right: 0;

    transform: translateX(50%) rotate(45deg);

    border-radius: 2px;

} */



.check {

    position: relative;

    left: 0;

    height: 32px;

    width: 32px;

    display: flex;

    justify-content: center;

    align-items: center;

    background: var(--bg-light);

    border-radius: 50px;

    font-size: 12px;

    top: 0;

    background: var(--color-1);

    color: var(--white-color);

}



/* view customer course end */





.question-checkbox {

    width: 45px;

    height: 45px;

    position: absolute;

    top: 0;

    left: 0;

    padding: 10px 0;

}



/* Hide the browser's default checkbox */

.question-checkbox input {

    position: absolute;

    opacity: 0;

    cursor: pointer;

    height: 0;

    width: 0;

}



/* Create a custom checkbox */

.checkmark {

    position: absolute;

    top: 10px;

    left: 0;

    height: 25px;

    width: 25px;

    border: 2px solid var(--secondary);

    border-radius: 5px;

}



/* On mouse-over, add a grey background color */

.question-checkbox:hover input~.checkmark {

    background-color: #ccc;

}



/* When the checkbox is checked, add a blue background */

/* .question-checkbox input:checked ~ .checkmark {

    background-color: var(--primary);

  } */



/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {

    content: "";

    position: absolute;

    display: none;

}



/* Show the checkmark when checked */

.question-checkbox input:checked~.checkmark:after {

    display: block;

}



/* Style the checkmark/indicator */

.question-checkbox .checkmark:after {

    left: 9px;

    top: 5px;

    width: 5px;

    height: 10px;

    border: solid white;

    border-width: 0 2px 2px 0;

    -webkit-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

    transform: rotate(45deg);

}







.question-checkbox .checkmark::before {

    content: "";

    left: 0;

    top: 0;

    width: 17px;

    height: 17px;

    display: block;

    position: absolute;

    margin: auto;

    bottom: 0;

    right: 0;

    border-radius: 2px;

}



.question-checkbox input:checked~.checkmark:before {

    background: var(--primary);

}



.failed-content {

    background: var(--bg-light);

    padding: 30px;

    border-radius: 15px;

    margin-bottom: 50px;

}



.launch-question-2,

.que-results-failed,

.que-results-success {

    display: none;

}



.luanch-questions {

    background: var(--bg-light);

    padding: 50px;

    border-radius: 10px;

}



.content-library-inner {

    background-color: var(--extra-color-1);

}



.content-library-image img {

    width: 100%;

}



.content-library-data {

    padding: 20px;

}



.content-meta {

    background: var(--primary);

    padding: 15px;

    border-radius: 50px;

    margin-top: -60px;

    z-index: 22;

    position: relative;

    margin-bottom: 20px;

    margin-left: 30px;

    margin-right: 30px;

}



.content-meta ul {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 0;

}



.content-meta ul li {

    width: 50%;

}



.content-meta ul p {

    color: var(--white-color);

    font-size: 14px;

    font-weight: bold;

    text-align: center;

}



.content-meta ul span {

    color: var(--white-color);

    font-size: 12px;

    font-weight: normal;

    display: block;

}



.content-library-wappper {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    grid-gap: 1.5rem;

}





.pagination-wrap .pagination {

    display: -moz-box;

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

}



.pagination-wrap .pagination .page-item .page-link {

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -webkit-align-items: center;

    -moz-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -webkit-justify-content: center;

    -moz-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

    margin: 0 2px;

    width: 40px;

    height: 40px;

    border: 0;

    border-radius: 50px;

    color: var(--black-color);

    font-size: 14px;

}



.pagination-wrap .pagination .page-item .page-link.current,

.pagination-wrap .pagination .page-item .page-link.active,

.pagination-wrap .pagination .page-item .page-link:hover {

    background-color: var(--primary);

    border-color: var(--primary);

    color: var(--white-color);

    -webkit-box-shadow: var(--header-box-shadow);

    -moz-box-shadow: var(--header-box-shadow);

    -ms-box-shadow: var(--header-box-shadow);

    -o-box-shadow: var(--header-box-shadow);

    box-shadow: var(--header-box-shadow);

}



.pagination-wrap .pagination .page-item .page-link:focus {

    -webkit-box-shadow: none;

    -moz-box-shadow: none;

    -ms-box-shadow: none;

    -o-box-shadow: none;

    box-shadow: none;

}



.pagination-wrap .pagination .page-item:first-child .page-link,

.pagination-wrap .pagination .page-item:last-child .page-link {

    color: var(--white-color);

    -webkit-box-shadow: none;

    -moz-box-shadow: none;

    -ms-box-shadow: none;

    -o-box-shadow: none;

    box-shadow: none;

    filter: drop-shadow(0px 1px 4px rgba(24, 26, 32, 0.07));

}



.pagination-wrap .pagination .page-item:first-child .page-link:hover,

.pagination-wrap .pagination .page-item:last-child .page-link:hover {

    color: var(--black-color);

}



.pagination-wrap .pagination .page-item:first-child .page-link:hover svg path,

.pagination-wrap .pagination .page-item:last-child .page-link:hover svg path {

    fill: var(--white-color);

}



.pagination-wrap .pagination .page-item .page-link i.la-arrow-left {

    margin-right: 5px;

}



.pagination-wrap .pagination .page-item .page-link i.la-arrow-right {

    margin-left: 5px;

}



.dashboardcontain.active-dashboardcontain {

    display: block;

}



.dashboardcontain {

    display: none;

}



.Library-tabs-left ul a {

    color: #081F2C;

    font-family: Open Sans;

    font-size: 16px;

    font-style: normal;

    font-weight: 400;

    line-height: normal;

    letter-spacing: 0.16px;

    position: relative;

}



.Library-tabs-left ul a.dashboard_menu_active {

    color: var(--primary);

    font-weight: 600;

}



.Library-tabs-left ul a:after {

    content: "";

    position: absolute;

    height: 2px;

    width: 100%;

    background: var(--primary);

    bottom: -14px;

    left: 0;

    display: none;

}



.Library-tabs-left ul a.dashboard_menu_active::after {

    display: block;

}



.Library-tabs-left ul {

    display: flex;

    gap: 30px;

    background-color: #F7F7F7;

    padding: 10px 0px;

    border-radius: 8px;

}



.Library-tabs-area {

    display: flex;

    justify-content: space-between;

    margin-bottom: 24px;



}



select.sort {

    border-radius: 5px;

    appearance: none;

    color: #003399;

    border: none;

}



.select-list-box {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 24px;

    align-items: center;

}



.select-list-item select {

    color: #353434;

    font-family: Open Sans;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: normal;

    border-radius: 8px;

    border: 1px solid #E1DFDD;

    background: #FFF;

    /* min-width: 215px; */

    height: 40px;

    padding: 0px 25px 0px 10px;

    appearance: none;

}



.select-list-item {

    position: relative;

}



.select-list-item img {

    position: absolute;

    right: 0;

    top: 0;

    bottom: 0;

    margin: auto;

    right: 10px;

}



.show-filter {

    font-weight: 500;

    font-size: 14px;

    padding-left: 8px;

}



.welcome-area {

    background: #F2F0F0;

    padding: 30px;

    border-radius: 15px;

}



.welcome-tabs {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    grid-gap: 1.5rem;

}



.welcome-content {

    padding: 15px;

    border-radius: 5px;

    display: block;

    text-align: center;

    background: var(--primary-hover);

}



.welcome-content.dashboard_menu_active {

    background: var(--primary);

}



.welcome-content h3 {

    color: var(--primary);

    font-weight: 600;

    margin-bottom: 0;

}



.welcome-content p {

    color: var(--secondary);

    font-weight: 600;

}



.welcome-content.dashboard_menu_active h3,

.welcome-content.dashboard_menu_active p {

    color: var(--white-color);

}



.my-courses-item {

    box-shadow: 0px 4px 25px rgba(22, 22, 22, 0.10);

    background: #F5F5F5;

}



.my-courses-item:hover {

    box-shadow: 0px 4px 25px rgba(22, 22, 22, 0.20);

}



.my-courses-item .course-pogressbar {

    margin-bottom: 0;

}



.Management-title-area {

    display: flex;

    gap: 20px;

    align-items: center;

    justify-content: space-between;

}



.Management-title-area h2 {

    font-size: 24px;

    font-weight: 600;

    color: var(--secondary);

    margin-bottom: 0;

}



.Management-back a {

    background: #FBF8F8;

    padding: 12px 15px;

    display: inline-block;

    border-radius: 5px;

    font-size: 18px;

    font-weight: 600;

    color: var(--secondary);

}



.Management-back a svg {

    margin-right: 10px;

}



.main-table td {

    font-size: 14px;

    color: #081F2C;

    padding: 0.8rem .5rem;

    position: relative;

    font-weight: 500;

}



.input-width {

    width: 50px;

}



.pagination-wrap .pagination .page-item:first-child .page-link,

.pagination-wrap .pagination .page-item:last-child .page-link {

    color: var(--black-color);

    -webkit-box-shadow: none;

    -moz-box-shadow: none;

    -ms-box-shadow: none;

    -o-box-shadow: none;

    box-shadow: none;

    filter: none;

    width: auto;

    height: auto;

}



.pagination-wrap .pagination .page-item:first-child .page-link:hover,

.pagination-wrap .pagination .page-item:last-child .page-link:hover {

    background-color: transparent;

    border-color: transparent;

    -webkit-box-shadow: none;

    -moz-box-shadow: none;

    -ms-box-shadow: none;

    -o-box-shadow: none;

    box-shadow: none;

}



.main-table input[type="checkbox"] {

    height: 20px;

    width: 20px;

    margin: 0;

    padding: 0;

    opacity: 1;

    appearance: none;

    border: 1px solid #E1DFDD;

    border-radius: 4px;

    background: #fff;

    position: relative;

    margin-right: 10px;

    top: 3px;

}



.main-table input[type="checkbox"]:checked {

    border: 1px solid #003399;

    background: rgb(0, 51, 153, 0.10);

}



.main-table input[type="checkbox"]:checked:before,

.main-table input[type="checkbox"]:checked:after {

    content: "";

    position: absolute;

    height: 2px;

    background: #003399;

}



.main-table input[type="checkbox"]:checked:before {

    width: 5px;

    top: 10px;

    left: 4px;

    transform: rotate(44deg);

}



.main-table input[type="checkbox"]:checked:after {

    width: 10px;

    top: 8px;

    left: 5px;

    transform: rotate(-55deg);

}



.main-table input[type="checkbox"]:focus {

    outline: none;

}



.Managements-filters-right .button-style {

    border-radius: 10px;

    padding: 13px 20px;

}



.Managements-filters-right .button-style svg {

    margin-right: 10px;

}



.manage-video-content .button-style {

    background-color: #84C225;

    border: 1px solid #84C225;

}



.manage-video-content .button-style:hover {

    background-color: rgb(132 194 37 / 80%);

    border: 1px solid #84C225;

}



.Managements-filters {

    padding: 30px 25px;

    background: var(--primary-hover);

    border-radius: 15px;

    display: flex;

    align-items: center;

    gap: 20px;

    justify-content: space-between;

}



.Managements-date input,

.Managements-search input {

    border: 1px solid #081F2C;

    height: 52px;

    padding: 0 15px;

    border-radius: 5px;

    background: transparent;

    min-width: 220px;

    color: #353434;

    font-size: 14px;

    font-weight: 500;

}



/*.Managements-filters-left {

    display: flex;

    gap: 20px;

}*/

.Managements-filters-right {

    display: flex;

    gap: 20px;

}



.with-icon {

    position: relative;

}



.with-icon .Managements-search-icon,

.with-icon .Managements-date-icon {

    position: absolute;

    right: 15px;

    top: 12px;

}

.main_app {

    position: relative;

    display: flex;

    align-items: center;

}



.toggle-control {

    display: block;

    position: relative;

}



.toggle-control input {

    position: absolute;

    opacity: 0;

    cursor: pointer;

    height: 0;

    width: 0;

}



.toggle-control input:checked~.control {

    background-color: var(--primary);

}



.toggle-control input:checked~.control:after {

    left: 22px;

}



.toggle-control .control {

    position: absolute;

    top: 4px;

    left: 0;

    height: 20px;

    width: 40px;

    border-radius: 1.563rem;

    background-color: darkgray;

    transition: background-color 0.15s ease-in;

    z-index: 1;

}



.toggle-control .control:after {

    content: "";

    position: absolute;

    left: 3px;

    top: 2px;

    width: 15px;

    height: 15px;

    border-radius: 1.563rem;

    background: white;

    transition: left 0.15s ease-in;

}



.main_app p {

    position: relative;

    top: 14px;

    padding-left: 55px;

    font-size: 14px;

    color: #081F2C;

    font-weight: 500;

}



.datepicker td,

.datepicker th {

    width: 20px;

    text-align: center;

    vertical-align: middle;

    min-width: 34px;

    width: 34px;

    height: 28px;

    line-height: 28px;

    font-size: 14px;

    border-radius: 0px;

    white-space: nowrap;

    cursor: pointer;

    border: 1px solid #d3d3d3 !important;

}



.datepicker {

    padding: 0;

    border: none;

}



.datepicker table tr td.active.active,

.datepicker table tr td.active.disabled,

.datepicker table tr td.active.disabled.active,

.datepicker table tr td.active.disabled.disabled,

.datepicker table tr td.active.disabled:active,

.datepicker table tr td.active.disabled:hover,

.datepicker table tr td.active.disabled:hover.active,

.datepicker table tr td.active.disabled:hover.disabled,

.datepicker table tr td.active.disabled:hover:active,

.datepicker table tr td.active.disabled:hover:hover,

.datepicker table tr td.active.disabled:hover[disabled],

.datepicker table tr td.active.disabled[disabled],

.datepicker table tr td.active:active,

.datepicker table tr td.active:hover,

.datepicker table tr td.active:hover.active,

.datepicker table tr td.active:hover.disabled,

.datepicker table tr td.active:hover:active,

.datepicker table tr td.active:hover:hover,

.datepicker table tr td.active:hover[disabled],

.datepicker table tr td.active[disabled] {

    background-color: var(--primary) !important;

    color: #fff;

    background-image: none;

}



.datepicker table.table-condensed thead tr th {

    color: var(--primary);

}





.manage-data-area {

    background: rgb(245 245 245 / 50%);

    padding: 80px 0;

}



.manage-video-content h2 {

    font-size: 24px;

    font-weight: 600;

    color: var(--secondary);

}



.manage-video-content p {

    font-size: 14px;

    font-weight: normal;

    color: var(--secondary);

}



.manage-video-table .manage-video-list {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 15px 0;

    border-bottom: 1px solid rgb(178 178 178 / 20%);

}



.manage-video-left-text svg {

    margin-right: 10px;

}



.manage-video {

    height: 468px;

    margin-right: 30px;

    border-radius: 15px;

    overflow: hidden;

}



.manage-video-content .button-style {

    padding: 13px 100px;

}



.recommended-slider .my-courses-item {

    margin: 30px 0;

}



.page-title h2 {

    font-size: 42px;

    font-weight: 600;

    color: var(--secondary);

}





.owl-dots {

    text-align: center;

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-pack: center;

    -webkit-justify-content: center;

    -moz-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

}



.owl-dots button.owl-dot {

    position: relative;

    display: block;

    width: 15px;

    height: 15px;

    background-color: var(--white-color);

    margin: 0 5px;

    border-radius: 50px;

    overflow: hidden;

}



.owl-dots button.owl-dot::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    background-color: var(--primary-hover);

}



.owl-dots button.owl-dot.active::before {

    background-color: var(--primary);

}



.up-down {

    position: absolute;

    right: 10px;

}



.manage-team-filter {

    justify-content: end;

    display: block;

}



.manage-team-filter .button-style {

    padding: 14px 20px;

    font-size: 14px;

    border-radius: 10px;

    font-weight: normal;

}



.manage-team-filter-left {

    justify-content: end;

    display: flex;

    gap: 5px;

}



.mange-team-filter-right {

    display: flex;

    gap: 20px;

    justify-content: end;

    padding-top: 20px;

}



.main-table-team input[type="checkbox"] {

    top: 2px;

    left: 4px;

}



.mange-team-filter-right .select-list-item select {

    border: 1px solid #353434;

    background: transparent;

    height: 52px;

}

.share-lesson-area>div {

    border: 1px solid rgb(0 0 0 / 6%);

    border-radius: 15px;

    margin-bottom: 15px;

    overflow: hidden;

}



.share-lesson-area>div:nth-last-child(1) {

    margin-bottom: 0;

}



.share-title {

    padding: 15px;

    background: var(--primary-rgb-1);

    border-bottom: 1px solid rgb(0 0 0 / 6%);

}



.share-content {

    padding: 15px;

}



.share-content .field-inner {

    margin-bottom: 10px;

    border-bottom: 1px solid #00000012;

    padding-bottom: 10px;

}



.share-content .field-inner input[type="text"],

.share-content .field-inner textarea {

    font-size: 14px;

}



.share-copy .share-content .form-group {

    display: flex;

    gap: 15px;

    align-items: center;

    position: relative;

}



.share-copy .share-content .form-group .field-inner {

    width: 100%;

    border: 1px solid #00000012;

    padding: 10px;

    margin: 0;

}



.share-copy .share-content .form-group a.button-style {

    border-radius: 5px;

    padding: 11px 30px;

    background: var(--primary-hover-8);

    border-color: var(--color-1);

}



.share-copy .share-content .form-group .field-inner input[type="text"] {

    width: 100%;

}



/* . Login */

.loign-area {

    background-color: #fff;

    padding: 20px;

}



.login-box {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    grid-gap: 30px;

    align-items: center;

    position: relative;

}



.login-left {

    /* background-color: #194DB5; */

    border-radius: 10px;

}



.login-left .overlay-content {

    padding: 30px;

    text-align: center;

}



.login-left .overlay-content h2 {

    font-weight: 700;

    font-size: 42px;

    line-height: 61px;

    color: #6149A6;

}



.login-left .overlay-content p {

    font-size: 18px;

    line-height: normal;

}



.name-company {

    position: absolute;

    bottom: 0;

    color: #A4A7AE;

}



.login-right {

    max-width: 660px;

    margin: 0 auto;

    width: 50%;

    /* margin-bottom: 100px; */

    margin-top: 130px;

}

.height-full{

    height: 100vh;

}

.login-title {

    margin-bottom: 40px;

}



.login-title h2 {

    color: #1F1E1E;

    font-size: 32px;

    font-weight: 400;

    margin-bottom: 10px;

}



.logo-login {

    position: absolute;

    width: 6%;

    top: 0;

}



.login-title p {

    font-size: 16px;

    font-weight: 400;

    color: #797979;

}



.login-form-area {

    display: flex;

    flex-direction: column;

    gap: 25px;

}



.login-input input {

    border: 1px solid #E1DFDD;

    height: 50px;

    width: 100%;

    border-radius: 10px;

    font-size: 16px;

    color: #000;

    padding-left: 20px;

    padding-right: 20px;

    font-weight: 400;

    margin-top: 5px;

    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 1px 2px 0px rgba(0, 0, 0, 0.08);

}



.login-input span {

    font-weight: 500;

    font-size: 14px;

    color: #414651;

}



.login-keepme {

    display: flex;

    gap: 10px;

    justify-content: space-between;

}



.login-checkbox {

    transform: scale(1.3);

    box-shadow: none;

}



.login-keepme span {

    font-size: 18px;

    font-weight: 500;

    padding-left: 5px;

    color: #797979;

}



.login-keepme a {

    font-weight: 500;

}



.input-icons {

    position: absolute;

    top: 12px;

    left: 15px;

}



.login-or {

    /* margin-bottom: 40px; */

}



.login-or p {

    font-size: 18px;

    font-weight: 500;

    text-align: center;

    position: relative;

}



.login-or p span {

    background-color: #fff;

    z-index: 2;

    position: relative;

    padding: 0 30px;

}



.main-google-btns .google-btns {

    background: #fff;

    height: 50px;

    width: 100%;

    color: #414651;

    font-size: 16px;

    border-radius: 8px;

    position: relative;

    border: 1px solid #E1DFDD;

    box-shadow: 0px 3px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 0px -2px rgba(10, 13, 18, 0.03);

}



.login-or p:before {

    content: "";

    position: absolute;

    height: 1px;

    width: 100%;

    left: 0;

    top: 15px;

    background: #BFBFBF;

}



.login-with button {

    width: 100%;

    height: 71px;

    border-radius: 10px;

    background-color: transparent;

}



.login-btns {

    margin-bottom: 30px;

    padding-top: 20px;

}



.login-btns .btns {

    background: #194DB5;

    border-radius: 8px;

    height: 50px;

    width: 100%;

    color: #fff;

    font-size: 18px;

    position: relative;

}



button.btns:after {

    content: "";

    width: 100%;

    height: 30px;

    /* background: #4D76F8; */

    opacity: 0.4;

    filter: blur(10px);

    border-radius: 10px;

    position: absolute;

    bottom: -10px;

    left: 0;

    right: 0;

    margin: auto;

}



.login-other {

    padding-top: 20px;

    display: flex;

    justify-content: space-between;

}





.login-other a {

    font-size: 18px;

    font-weight: 500;

    color: #5381F9;

}



.admin-main {

    display: flex;

    justify-items: first baseline;

    background-color: #999;

    align-items: center;

    border-radius: 10px;

}



.admin-area {

    min-height: 100vh;

    height: 100%;

    background: #f0eff3;

}



.app-wrapper {

    height: 100%;

    width: 100%;

    position: relative;

}



.main-sidebar {

    position: fixed;

    width: 270px;

    height: 100%;

    padding: 30px;

    background: #fff;

    box-shadow: 0px 2px 14px rgba(0, 0, 0, 0.08);

    z-index: 10;

    transition: var(--transition);

}



.logo-area {

    text-align: center;

    margin-bottom: 30px;

}



/* .sidebar-welcome-area {

    max-width: 100px;

    min-width: 0px;

} */



.sidebar-welcome-area p {

    font-size: 16px;

    font-weight: 600;

    color: #2D60FF;

    margin-bottom: 30px;

}



.sidebar-menu {

    height: 100%;

}



.sidebar-menu ul {

    height: calc(100% - 290px);

}



.sidebar-menu ul {

    display: flex;

    flex-direction: column;

    gap: 30px;

}



.sidebar-menu ul li a {

    font-size: 20px;

    font-weight: 600;

    color: #000;

    display: flex;

    align-items: center;

    gap: 30px;

}



.sidebar-logout a {

    color: #FF4242;

    font-size: 20px;

    font-weight: 600;

    display: flex;

    align-items: center;

    gap: 30px;

}



.elements-sidebar {

    left: 270px;

    height: 100%;

    width: calc(100% - 270px);

    position: relative;

    top: 0;

}



.page-content-wrapper {

    height: 100%;

}



.page-content {

    height: 100%;

}



.page-title {

    top: 0;

    padding: 15px 30px 15px 30px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    z-index: 9;

}



.admin-main-area {

    position: fixed;

    background: #fff;

    width: calc(100% - 270px);

}



.paginations p {

    font-size: 20px;

    font-weight: 600;

}



.addsections {

    height: 40px;

    background: #4268EE;

    line-height: 50px;

    color: #fff;

    padding: 0 30px;

    border-radius: 10px;

    display: inline-flex;

    align-items: center;

    gap: 20px;

}



.addsections:hover {

    color: var(--white-color);

}



.page-content p img {

    background-color: #fff;

    align-items: first baseline;

    text-align: justify;

    display: contents;

    font-size: large;

    background-color: #fff;

    height: 200px;

    width: 100px;

    background-color: #000;

    justify-content: last baseline;

    line-break: anywhere;

    break-inside: inherit;

}



.page-content-inner {

    height: 100%;

    width: 100%;

    padding-top: 70px;

}



.dashboardcontain {

    display: none;

}



.dashboardcontain.dashboardcontain-active {

    display: block;

}



.page-tabs {

    background: #fff;

    padding: 0 25px 10px;

}



.dashboard_leftAccount li a {

    color: #888EA2;

    font-size: 16px;

    position: relative;

    padding: 10px 10px;

    font-weight: 500;

}



.dashboard_leftAccount li a.dashboard_menu_active {

    color: #003399;

    background: #fff;

    padding: 10px 10px;   

    border: 1px solid #E7E5E4;

    box-shadow: 0px 4px 8px -2px rgba(10, 13, 18, 0.10), 0px 2px 4px -2px rgba(10, 13, 18, 0.06);

}



.dashboard_leftAccount li a.dashboard_menu_active::after {

    display: none;

    content: "";

    position: absolute;

    height: 2px;

    width: 100%;

    bottom: -15px;

    left: 0;

    background-color: #2D60FF;



}



.dashboard_leftAccount {

    display: flex;

    gap: 30px;

}



.page-course-heading {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 30px;

}



.page-course-body {

    padding-top: 15px;

}



.page-course-outer {

    background-color: var(--white-color);

    padding: 20px;

    border-radius: 20px;

}



.page-course-outer:not(:last-child) {

    margin-bottom: 30px;

}



.right-icons {

    display: flex;

    gap: 20px;

}



.right-icons li a {

    height: 35px;

    width: 35px;

    display: inline-block;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.right-icons li a.adds {

    background-color: #455DDC;

}



.right-icons li a.edits {

    background-color: #45DCC1;

}



.right-icons li a.delets {

    background-color: #FF4242;

}



.right-icons li a.up-arrows {

    border-radius: 50px;

    background-color: #4268EE;

    color: var(--white-color);

}



.up-arrows.collapsed svg {

    transform: rotate(180deg);

}



.page-course-list {

    display: flex;

    gap: 30px;

    border: 1px solid #EBEBEB;

    border-radius: 30px;

    padding: 15px 20px;

    margin-bottom: 10px;

    position: relative;

}



.page-course-video {

    width: 220px;

    border-radius: 15px;

    overflow: hidden;

}



.page-course-video img {

    width: 100%;

}



.page-course-content {

    flex: 1 auto;

    display: flex;

    gap: 50px;

    margin-left: 30px;

}



.page-course-content-left h6,

.page-course-content-right h6 {

    font-size: 17px;

    font-weight: 600;

    color: #000;

}



.page-course-content-left p,

.page-course-content-right p {

    font-size: 15px;

    font-weight: 400;

    color: #000;

    margin-bottom: 12px;

    display: flex;

    gap: 20px;

    align-items: center;

}



.page-course-content-left p span {

    color: #EE8842;

}



.page-course-content-right {

    margin-left: 80px;

}



.page-course-content-right a {

    color: #EE8842;

    font-weight: 500;

    font-size: 15px;

}



.page-course-action-icons ul {

    display: flex;

    gap: 15px;

    justify-content: end;

}



.page-course-action-icons li a {

    height: 35px;

    width: 35px;

    display: inline-block;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.page-course-action-icons li a.edits {

    background-color: #45DCC1;

}



.page-course-action-icons li a.delets {

    background-color: #FF4242;

}



.page-course-action-btns a {

    height: 40px;

    border-radius: 10px;

    display: flex;

    padding: 0 30px;

    gap: 20px;

    font-size: 16px;

    font-weight: 500;

    align-items: center;

    color: var(--white-color);

    justify-content: center;

    margin-bottom: 10px;

    text-wrap: nowrap;

}



.page-course-action-btns a.btn-subtitles {

    background-color: #EE8842;

}



.page-course-action-btns a.btn-genrate {

    background-color: #247ACA;

}



.card-action {

    position: absolute;

    top: 10px;

    right: 20px;

}



.page-course-action {

    margin-right: 30px;

}



.page-link {

    background-color: transparent;

    border: none;

    color: #EE8842;

    display: flex;

    align-items: center;

    gap: 10px;

    width: 40px;

    height: 40px;

    justify-content: center;

}



.page-item.active .page-link {

    background-color: #EE8842;

    border-radius: 10px;

}



.page-linktext {

    width: auto !important;

}



.page-link:hover {

    background-color: transparent;

    color: #EE8842;

}



.page-link:focus {

    z-index: 3;

    color: inherit;

    background-color: transparent;

    outline: 0;

    box-shadow: none;

}



.pagination {

    gap: 10px;

    justify-content: flex-end;

}



.page-footer {

    background: #fff;

    z-index: 8;

    position: fixed;

    bottom: 0;

    padding: 10px;

    width: calc(100% - 270px);

    box-shadow: 0px 2px 14px rgba(0, 0, 0, 0.08);

}



.page-center-content {

    margin-bottom: 60px;

}



.page-title-left {

    display: flex;

    gap: 30px;

    align-items: center;

}



.mobile-logos {

    display: none;

    align-items: center;

    gap: 30px;

}



.open-menu .main-sidebar {

    left: 0;

}



a.mobile-close {

    position: absolute;

    right: 0px;

    background: #4268ee;

    height: 40px;

    width: 40px;

    display: flex;

    justify-content: center;

    align-items: center;

    top: 0;

    display: none;

}



.page-course-content strong {

    font-weight: 600;

}



.back-color {

    background-color: #4268EE;

    color: #fff;

}



.back-color span {

    font-size: 22px;

}



table tr td span a.delets {

    background-color: #FF4242;

}



table tr td span a {

    height: 35px;

    width: 35px;

    display: inline-block;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

}



table tr td span a.download {

    background-color: #247ACA;

}



.btn-down-dele {

    display: flex;

    justify-content: end;

    gap: 15px;

}



.close-icon {

    background-color: transparent;

}



.page-course-action-btns a.add-metadata-btn {

    background-color: #4268EE;

}



.login-desc {

    padding: 25px 0px;

    text-align: center;

}



.login-desc p {

    font-size: 15px;

    font-weight: 500;

    padding: 10px 0px;

    color: #797979;

}



.login-desc p a {

    color: #003399;

}



.bottom-btn {

    display: flex;

    gap: 20px;

}



.align-center {

    align-items: normal !important;

}



.postion-relative {

    position: relative !important;

}



.user-login-img {

    /* position: absolute;

    bottom: 0px; */

}



.team-management-btn {

    background-color: #E9EEF9;

    padding: 20px 30px;

    font-size: 18px;

    border-radius: 20px;

    font-weight: 600;

    color: #6149A6;

    width: 100%;

    text-align: center;

    align-items: center;

    display: grid;

}



.reseller-btn {

    background: #E9EEF9;

    padding: 20px 40px;

    font-size: 18px;

    font-weight: 600;

    border-radius: 20px;

    color: #476BF7;

    width: 70%;

    text-align: center;

    display: grid;

    align-items: center;

}



.reset-password-btn {

    margin-bottom: 50px;

    padding-top: 20px;

    display: flex;

    gap: 30px;

}



.reset-password-btn .btns {

    background: linear-gradient(329.79deg, #0052D4 -31.21%, #4364F7 18.94%, #6FB1FC 98.47%);

    border-radius: 20px;

    height: 60px;

    width: 50%;

    color: #fff;

    font-size: 22px;

    position: relative;

    text-align: center;

    padding: 12px 0px;

}



.text-center {

    text-align: center;

}



.m-auto {

    margin: 0 auto;

}



.justify-content-end {

    justify-content: end;

}



.reseller-login {

    position: relative;

    top: 60px;

}



.reseller-img {

    display: table;

    margin: 0 auto;

}



.font-43 {

    font-size: 43px;

}



.m-zero {

    margin: 0px;

}



.login-left-management {

    padding-bottom: 200px;

}



.team-management-img {

    width: 80%;

    position: relative;

    top: 80px;

    display: table;

    margin: 0 auto;

}



.create-new-course {

    display: flex;

    align-items: center;

    gap: 10px;

}



.manage-question-pull {

    background-color: transparent;

    color: #1F1E1E;

    border-radius: 4px;

    border: 1px solid #E1DFDD;

    padding: 5px 15px;

    font-weight: 500;

    font-size: 14px;

}



.pluse-sign {

    line-height: 0;

    font-size: 16px;

    padding-right: 5px;

    align-items: center;

}



.line-view {

    color: #EDEBE9;

    padding: 0 7px;

}



.main-table-team {

    margin-top: 16px;

}



.pagination-new {

    float: right;

    display: flex;

    gap: 15px;

}



.pagination-new .select-list-item select {

    padding: 0px 25px 0px 10px;

    height: 30px;

}



.info span {

    color: #A19F9D;

}



.left-right-arrow-main span img {

    width: 18px;

    padding: 5px;

}



.main-google-btns {

    margin-bottom: 0px;

    padding-top: 20px;

}



.dropdown-arrow {

    width: 10px;

    height: 10px;

    border: 1px solid #E1DFDD;

    background: #ffffff;

    border-bottom: 0;

    border-left: 0;

    position: absolute;

    right: 18px;

    top: -5px;

    transform: rotate(-45deg);

}



.p-16 {

    padding: 16px !important;

}



.pr-24 {

    padding-right: 24px;

}



.pr-0 {

    padding-right: 0px;

}



.pt-16 {

    padding-top: 16px;

}



.pt-0 {

    padding-top: 0px;

}



.Library-tabs-right {

    padding-right: 8px;

    font-size: 14px;

}



.full-width {

    max-width: 1920px;

}



/* My courses page */

.bg-color {

    background-color: #Fff !important;

}



.my-course p {

    color: #797979;

    font-size: 15px;

    padding-bottom: 10px;

}



.my-course h3 {

    color: #1F1E1E;

    font-size: 36px;

    margin-bottom: 17px;

}



.my-course .main-medal-section {

    background-color: #fff;

    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.10), 0px 6px 14px 0px rgba(0, 0, 0, 0.06);

    padding: 16px 32px;

    border-radius: 12px;

    display: flex;

    gap: 15px;

    justify-content: space-between;

    margin-top: 15px;

}



.my-course .main-medal-section .points {

    display: flex;

    gap: 15px;

    align-items: center;

}



.my-course .main-medal-section .points h4 span {

    color: #797979;

}



.my-course .main-medal-section .points h4 b {

    font-weight: 600;

}



.my-course .Library-tabs-right a {

    font-weight: 500;

    color: #003399;

}



.bedge-icon {

    display: flex;

    gap: 10px;

}



.medal-icon {

    display: flex;

    gap: 10px;

}



.see-more {

    align-items: center;

    display: flex;

}



.see-more a {

    color: #A19F9D;

    text-decoration: underline;

}



.see-more a img {

    padding-right: 8px;

}



.home-demo .item {

    background: #FFFFFF;

    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.10), 0px 5px 10px 0px rgba(0, 0, 0, 0.06);

    margin-bottom: 20px;

    border-radius: 12px;

    padding: 8px;

}



.home-demo .owl-carousel .owl-item .icon-size {

    display: block;

    width: 22px;

}



.my-course .home-demo p {

    padding: 0px;

}



.lession-time-main {

    padding: 15px 5px;

    gap: 20px;

    display: flex;

    align-items: center;

}



.lessons-main {

    display: flex;

    align-items: center;

    gap: 8px;

}



.minutes {

    display: flex;

    align-items: center;

    gap: 8px;

}



.round {

    width: 8px;

    height: 8px;

    border-radius: 50px;

    background-color: #D9D9D9;

}



.my-course .data-text h3 {

    font-size: 20px;

    font-weight: 500;

    margin-bottom: 5px;

}



.my-course .data-text p {

    color: #949BA1;

}



.my-course .data-text {

    padding-left: 5px;

    min-height: 107px;

}



.home-demo .owl-nav {

    position: absolute;

    top: -35px;

    right: 0;

}



.my-course .course-pogressbar {

    background-color: transparent;

    padding: 15px 5px 0px 5px;

    margin-bottom: 10px;

}



.my-course .owl-carousel .owl-stage-outer {

    margin-top: 10px;

    margin-bottom: 20px;

}



.my-course .skill-main .skill-wrrap .skill-per:before {

    /* top: 10px; */

}



.my-course .skill-main .skill-wrrap .skill-name {

    color: #1F1E1E;

}



.home-demo .owl-dots {

    display: none;

}



.home-demo h2 {

    color: #000;

    text-align: center;

    padding: 5rem 0;

    margin: 0;

    font-style: italic;

    font-weight: 300;

}



.owl-carousel .owl-nav button.owl-prev,

.owl-carousel button.owl-dot::after {

    background-image: url(../../design_2025/images/my-course/arrow-left.png) !important;

    color: inherit;

    border: none;

    padding: 0 !important;

    font: inherit;

    width: 30px;

    background-color: transparent !important;

    color: transparent !important;

    background-repeat: no-repeat !important;

}



.owl-carousel .owl-nav button.owl-next,

.owl-carousel button.owl-dot::after {

    background-image: url(../../design_2025/images/my-course/arrow-right.png) !important;

    color: inherit;

    border: none;

    padding: 0 !important;

    font: inherit;

    width: 30px;

    background-repeat: no-repeat !important;

    background-color: transparent !important;

    color: transparent !important;

}



.my-course .Library-tabs-area {

    display: flex;

    justify-content: space-between;

    margin-bottom: 15px;

    border-bottom: 1px solid #E1DFDD;

    align-items: center;

}



.my-course .dashboard_leftAccount li a.dashboard_menu_active {

    color: #003399;

    background-color: transparent;

    box-shadow: none;

    border: none;

}



.my-course .Library-tabs-left ul {

    background-color: transparent;

}



.my-course .dashboard_leftAccount li a.dashboard_menu_active::after {

    content: "";

    position: absolute;

    height: 2px;

    width: 100%;

    bottom: -4px;

    left: 0;

    background-color: #003399;

}



.my-course .Library-tabs-left ul a.dashboard_menu_active::after {

    display: block;

}



.my-course select.sort {

    background-color: transparent;

}



.my-course .owl-carousel.owl-drag .owl-item {

    padding-top: 5px;

    padding-left: 5px;

    padding-right: 10px;

}



.recommend {

    background-color: #F2F3F5;

    border-radius: 16px;

    padding: 15px;

}



.justify-content-between {

    justify-content: space-between;

}



.height-auto {

    min-height: auto !important;

}



.recommend a {

    font-weight: 500;

    margin: 0 auto;

    color: #003399;

}



.dark-bg {

    background-color: #222324 !important;

}

.dark-bg .bg-color{

    background-color: #222324 !important;

}

.dark-bg .my-course .main-medal-section{

    background-color: #3D3D3D !important;

}

.dark-bg header .navbar .navbar-nav .nav-item .nav-link {

    color: #A4A7AE;

}



.dark-bg .profile a p {

    color: #fff;

}



.light-dark {

    background-color: #3D3D3D !important;

}

.dark-bg .search-bar input::placeholder{

    color: #A4A7AE;

}

.dark-bg .my-course p {

    color: #A4A7AE;

}



.dark-bg .my-course h3 {

    color: #fff;

}



.dark-bg .my-course .main-medal-section .points h4 b {

    color: #fff;

}



.dark-bg .my-course .main-medal-section .points h4 span {

    color: #A4A7AE;

}



.dark-bg .Library-tabs-right span {

    color: #4B98F7 !important;

}



.dark-bg select.sort {

    color: #4B98F7;

}



.dark-bg header .navbar .navbar-nav .nav-item .nav-link.active {

    color: #4B98F7 !important;

}



.dark-bg .my-course .dashboard_leftAccount li a.dashboard_menu_active {

    color: #4B98F7;

}



.dark-bg .my-course .dashboard_leftAccount li a.dashboard_menu_active::after {

    background-color: #4B98F7;

}



.dark-bg .home-demo .item {

    background-color: #3D3D3D;

}



.dark-bg .my-course .skill-main .skill-wrrap .skill-name {

    color: #fff;

}



.dark-bg .my-course .skill-main .skill-wrrap .skill-per:before {

    top: -33px;

    color: #4B98F7;

}



.dark-bg .skill-main .skill-wrrap .skill-per {

    background-color: #4B98F7 !important;

}



.dark-bg .skill-main .skill-wrrap .skill-bar {

    background-color: #535862;

}



.dark-bg .recommend {

    background-color: #141414;

}



.dark-bg .recommend a {

    color: #4B98F7;

    font-weight: 500;

}



.light-white-text {

    color: #F5F5F5 !important;

}



.dark-bg .round {

    background-color: #A4A7AE;

}



.dark-bg .lession-time-main {

    padding: 15px 5px;

    gap: 20px;

    display: flex;

    align-items: center;

    background: rgba(75, 152, 247, 0.15) !important;

    border-radius: 100px;

    justify-content: center;

    margin: 20px 0;

    border: 1px solid #4B98F7;

    font-weight: 500;

}



.dark-bg .round {

    background-color: #4B98F7 !important;

}



.dark-bg .lession-time-main p {

    color: #4B98F7 !important;

}



.dark-bg ::-webkit-scrollbar-thumb {

    background-color: #717680;

}



.dark-bg ::-webkit-scrollbar-track {

    background: #414651;

}



.dark-bg .heart-like {

    background-color: #3D3D3D;

    border: 1px solid #717680;

}



.dark-bg .dropdown-menu {

    background-color: #3D3D3D;

}



.dark-bg .dropdown-item {

    color: #fff;

}



.dark-bg hr {

    background-color: #fff;

}



.dark-bg .arrow {

    background: #3D3D3D;

}

.dark-bg .main-title{

    color: #fff;

}

.dark-bg .Management-title-area h2{

    color: #fff;

}

.dark-bg .team-leader-area input::placeholder{

    color: #E1DFDD;

}

.dark-bg .send-email-noti{

    color: #4B98F7 !important;

}

.dark-bg select.sort{

    background-color: transparent;

}

.dark-bg .main-table td{

    color: #fff;

}

.dark-bg .search-bar input{

   

}

.dark-bg table a{

    color: #4B98F7 !important;

}

.dark-bg .breadcrumb-wrap ul li a{

    color:  #4B98F7;

}

.dark-bg .manage-question-pull{

    color:  #4B98F7;

}

.dark-bg .breadcrumb-wrap ul li:nth-last-child(1) a {

    color: #A4A7AE !important;

}

.dark-bg section.view-customer-course-area{

    background-color: #222324 !important;

}

.dark-bg .breadcrumb-main h2{

    color: #fff;

}

.dark-bg .content-library .data-text h3{

    color: #fff;

}

.dark-bg .content-library .skill-main .skill-wrrap .skill-name{

    color: #fff;

}

.dark-bg .content-library .show-filter{

    color:  #4B98F7;

}

.dark-bg .achievements h5{

    color: #fff;

}

.dark-bg .main-tital a {

    color: #4B98F7;

}

.dark-bg svg path{

    stroke: #fff;

}

.dark-bg svg .fill-color{

    fill: #fff;

}

.dark-bg .main-table th {

    color: #fff;



}

.td-align{

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 1rem .5rem !important;

}

.profile .dropdown-menu li a svg{

    margin-right: 8px;

}

.form-check-input:checked {

    background-color: #4B98F7 !important;

    border-color: #4B98F7 !important;

}



.form-switch .form-check-input {

    width: 2.5em;

    height: 1.2em;

    background-color: #E6E6E6;

    border: 1px solid #E6E6E6;

}



.form-switch .form-check-input {

    background-image: url(../images/icon/swich.svg);

}



.dark-bg .form-switch .form-check-input {

    width: 2.5em;

    height: 1.2em;

    background-color: #717680;

    border: 1px solid #717680;

}



.content-library .Library-tabs-left ul {

    background-color: transparent;

}



.content-library .Library-tabs-area {

    border-bottom: 1px solid #E1DFDD;

}



.content-library .dashboard_leftAccount li a.dashboard_menu_active {

    color: #003399;

    background-color: transparent;

    box-shadow: none;

    border: none;

    font-weight: 700;

    font-size: 16px;

}



.content-library .Library-tabs-left ul a.dashboard_menu_active::after {

    display: block;

}



.content-library .dashboard_leftAccount li a.dashboard_menu_active::after {

    content: "";

    position: absolute;

    height: 2px;

    width: 100%;

    bottom: -4px;

    left: 0;

    background-color: #003399;

}



.content-library .Library-tabs-right span {

    color: #003399;

    font-size: 16px;

    font-weight: 500;

}



.content-library .show-filter {

    font-weight: 500;

    font-size: 14px;

    color: #003399;

    padding-left: 8px;

}



.line-div {

    color: #F0F0F0;

}



.content-library .main-box {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    grid-gap: 1.5rem;

}



.content-library .main-box .main-img {

    width: 100%;

    /* height: 200px; */

    max-height: 220px;

}



.content-library .icon-size {

    display: block;

    width: 22px;

}



.content-library .data-text h3 {

    font-size: 20px;

    font-weight: 500;

    margin-bottom: 5px;

}



.content-library .data-text p {

    color: #949BA1;

}



.content-library .data-text {

    padding-left: 5px;

    min-height: 107px;

}



.content-library-page .heart-like {

    top: 200px;

}



.old-content-library .dashboard_leftAccount li a.dashboard_menu_active {

    padding: 10px;

}



.old-content-library .dashboard_leftAccount li a {

    padding: 10px;

}



.old-content-library .Library-tabs-left ul {

    gap: 20px;

}



.content-library .course-pogressbar {

    background-color: transparent;

    padding: 15px 5px 0px 5px;

    margin-bottom: 10px;

}



.content-library .skill-main .skill-wrrap .skill-per {

    height: 5px;

    margin: 0px;

    background-color: #003399;

}



.content-library .skill-main .skill-wrrap .skill-bar {

    background-color: #EAEBEC;

}



.content-library .skill-main .skill-wrrap .skill-name {

    color: #1F1E1E;

    font-weight: 400;

}



.content-library .lession-time-main {

    padding: 15px 5px;

    gap: 20px;

    display: flex;

    align-items: center;

    background: rgba(0, 51, 153, 0.10);

    border-radius: 100px;

    justify-content: center;

    margin: 20px 0;

    font-weight: 500;

}



.content-library .lession-time-main p {

    color: #003399;

}



.content-library .round {

    background-color: #003399;

}



.wishlist_heart {

    --fuschia: #ef2b7c;

    --size: 28px;

    width: var(--size);

    height: var(--size);

    cursor: pointer;

    color: transparent;

}



.wishlist_heart svg {

    height: 100%;

    width: 100%;

    stroke: #A19F9D;

}



.wishlist_heart._active {

    color: #A6CE39;

}



.wishlist_heart._active svg {

    stroke: #A6CE39;

}



.content-library .home-demo .item {

    position: relative;

}



.heart-like {

    background-color: #fff;

    border: 1px solid #B8B6B4;

    padding: 5px;

    width: 40px;

    position: absolute;

    height: 40px;

    top: 180px;

    right: 25px;

    border-radius: 100px;

    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.10), 0px 5px 10px 0px rgba(0, 0, 0, 0.06);

}



.achievements .main-medal-section {

    display: block;

    min-height: 238px;

}



.achievements h5 {

    font-size: 20px;

    font-weight: 600;

    margin-bottom: 5px;

}



.level {

    text-align: center;

}



.achievements .skill-main .skill-wrrap .skill-per {

    height: 8px;

}



.achievements .skill-main .skill-wrrap .skill-bar {

    height: 8px;

}



.achievements .skill-main .skill-wrrap .skill-name {

    color: #003399;

}



.achievements .skill-main .skill-wrrap .skill-per:before {

    top: 18px;

    color: #1F1E1E;

}



.achievements .skill-main .skill-wrrap {

    gap: 10px;

}



.main-total {

    display: flex;

    justify-content: space-around;

}



.mb-20 {

    margin-bottom: 20px;

}



.streak-day .level {

    text-align: left;

}



.streak-day .main-total {

    text-align: left;

    justify-content: space-between;

}



.streak-day .total {

    margin-bottom: 15px;

}



.streak-day .check-mark {

    margin-bottom: 40px;

    display: flex;

    justify-content: space-between;

}



.main-tital {

    display: flex;

    justify-content: space-between;

}



.main-badge {

    display: flex;

    justify-content: space-around;

    gap: 100px;

}



.main-badge-mycourse {

    display: block;

}



.main-medal-section .points .des h4 {

    font-size: 20px;

}



.main-tital a {

    font-weight: 500;

    color: #003399;

}



.p-32 {

    padding: 32px !important;

}



.main-badge h5 {

    margin-bottom: 0;

    margin-top: 12px;

}



::-webkit-scrollbar {

    width: 5px;

    height: 5px;

}



/* Track */

::-webkit-scrollbar-track {

    background: #f1f1f1;

}



/* Handle */

::-webkit-scrollbar-thumb {

    background: #DBDBDB;

    border-radius: 10px;

}



/* Handle on hover */

::-webkit-scrollbar-thumb:hover {

    background: #555;

}



.up-s-nav-icon {

    --xs-size: 10px;

    --sm-size: 12px;

    --md-size: 24px;

    --size: var(--md-size);

    --icon-color: blue;

    display: inline-block;

    width: var(--size);

    height: var(--size);

}



a.nav-link.dropdown-toggle.show svg path {

    stroke: #003399;

    stroke-width: 2px;

}



.owl-carousel .owl-item .item img {

    display: block;

    max-height: 200px;

    max-width: 400px;

    width: 100%;

}



.owl-carousel .owl-item .item .main-img {

    display: block;

    max-height: 200px;

    max-width: 400px;

    width: 100%;

    height: 200px;

    object-fit: cover;

    border-radius: 8px;

}



.recommend .item .main-img {

    max-height: 200px;

    height: 200px;

    object-fit: cover;

    max-width: 400px;

}



.recommend .item img {

    max-height: 200px;

    max-width: 400px;

}

.skill-main .skill-wrrap .not-progress:before{

    color: #949ba1;

}

#Bigger, #Team{

    margin-top: 15px;

}



.select-box-list .f-dropdown>span:before{

    right: -15px;

}

.select-box-list .f-dropdown>span:after{

    right: -15px;

}

.f-dropdown {

    --max-scroll: 3;

    position: relative;

    z-index: 10;

    user-select: none;

    width: 100%

}



.f-dropdown select {

    display: none

}



.f-dropdown>span {

    cursor: pointer;

    display: flex;

    align-items: center;

    color: #fff

}



.f-dropdown>span>span {

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    padding: 5px;

    color: #797979;

    font-size: 16px

}



.f-dropdown>span img {

    margin-right: 22px

}

f-group{

    margin-right: 5px;

}

.f-dropdown>span:before,

.f-dropdown>span:after {

    content: "";

    display: block;

    position: absolute;

    width: 8px;

    height: 1px;

    border-radius: 1px;

    top: 50%;

    right: 12px;

    background: #A19F9D;

    transition: all 0.3s ease

}



.f-dropdown>span:before {

    margin-right: 4px;

    transform: scale(.96, .8) rotate(50deg)

}



.f-dropdown>span:after {

    transform: scale(.96, .8) rotate(-50deg)

}



.f-dropdown ul {

    list-style: none;

    opacity: 0;

    visibility: hidden;

    position: absolute;

    max-height: calc(var(--max-scroll) * 46px);

    top: 20px;

    left: 0;

    z-index: 1;

    right: 0;

    background: #fff;

    border: 1px solid #ccc;

    border-radius: 6px;

    overflow-x: hidden;

    overflow-y: auto;

    transform-origin: 0 0;

    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.3s cubic-bezier(.4, .6, .5, 1.32);

    transform: translate(0, 5px)

}



.f-dropdown ul,

.f-dropdown ul li {

    padding: 0;

    margin: 0

}



.f-dropdown ul li a {

    cursor: pointer;

    display: block;

    padding: 8px 12px;

    color: #000;

    text-decoration: none;

    outline: none;

    position: relative;

    transition: all 0.2s ease;

    display: flex;

    align-items: center

}



.f-dropdown ul li a img {

    width: 30px;

    margin-right: 0px

}



.f-dropdown ul li a:hover {

    color: #fff

}



.f-dropdown ul li.active a {

    color: #fff !important;

    background: #303f9f

}



.f-dropdown ul li.active a:before,

.f-dropdown ul li.active a:after {

    --scale: 0.6;

    content: "";

    display: block;

    width: 10px;

    height: 2px;

    position: absolute;

    right: 12px;

    top: 50%;

    opacity: 0;

    transition: all 0.2s ease;

    background: #FFF

}





.f-dropdown ul li:first-child a {

    border-radius: 6px 6px 0 0

}



.f-dropdown ul li:last-child a {

    border-radius: 0 0 6px 6px

}



.f-dropdown.disabled {

    opacity: .7

}



.f-dropdown.disabled>span {

    cursor: not-allowed

}



.f-dropdown.filled>span {

    color: #000

}



.f-dropdown.open {

    z-index: 15

}



.f-dropdown.open>span {

    border-color: #aaa

}



.f-dropdown.open>span:before,

.f-dropdown.open>span:after {

    background: #A19F9D

}



.f-dropdown.open>span:before {

    transform: scale(.96, .8) rotate(-50deg)

}



.f-dropdown.open>span:after {

    transform: scale(.96, .8) rotate(50deg)

}



.f-dropdown.open ul {

    opacity: 1;

    visibility: visible;

    transform: translate(0, 12px);

    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(.4, .6, .5, 1.32)

}

.download-btn-all a{

    color: #003399;

    font-size: 16px;

    font-weight: 500;

    text-align: center;

    margin: 0 auto;

    display: block;

    padding: 5px;

}

.send-email-noti {

    background-color: transparent;

    color: #003399;

    border-radius: 4px;

    font-size: 14px;

    border: none;

    padding: 8px 10px;

    font-weight: 500;

}

.pr-5{

    padding-right: 5px;

}

.team-leader-area .with-icon .Managements-search-icon, .with-icon .Managements-date-icon {

    position: absolute;

    left: 15px;

    top: 10px;

}

.team-leader-area .Managements-date input, .Managements-search input{

    border: 1px solid #E1DFDD;

    height: 32px;

    padding: 0 0px 0 40px;

    position: relative;

}

.team-leader-area .Management{

    /* width: 52%; */

    display: flex;

    align-items: center;

    gap: 15px;

    justify-content: end;

}

.team-leader-area .search-bar input{

    min-width: 220px;

}

.team-leader-area{

    gap: 0;

}

input.input-datepicker::placeholder {

    color: rgb(0, 0, 0, 0.45);

}

.search-bar input::placeholder{

    color: rgb(0, 0, 0, 0.45);

}

.mt-16{

    margin-top: 16px;

}

.create-new-course .main-table-team input[type="checkbox"] {

    top: 2px;

    left: 4px;

}

.create-new-course  input[type="checkbox"] {

    height: 20px;

    width: 20px;

    margin: 0;

    padding: 0;

    opacity: 1;

    appearance: none;

    border: 1px solid #E1DFDD;

    border-radius: 4px;

    background: #fff;

    position: relative;

    margin-right: 10px;

    top: 0px;

}

.create-new-course input[type="checkbox"]:checked:before {

    width: 5px;

    top: 10px;

    left: 4px;

    transform: rotate(44deg);

}

.create-new-course input[type="checkbox"]:checked:after {

    width: 10px;

    top: 8px;

    left: 5px;

    transform: rotate(-55deg);

}

.create-new-course input[type="checkbox"]:checked:before, .create-new-course input[type="checkbox"]:checked:after {

    content: "";

    position: absolute;

    height: 2px;

    background: #003399;

}

.create-new-course input[type="checkbox"]:checked {

    border: 1px solid #003399;

    background: rgb(0, 51, 153, 0.10);

}

.send-email-noti{

    display: flex;

    align-items: center;

}

.team-leader-area .Management .search-bar{

    /* width: 33%; */

}

.select-box-list{

    display: flex;

    gap: 35px;

    border-bottom: 1px solid #E1DFDD;

    margin-bottom: 20px;

}





.select-box-list .f-dropdown ul{

    right: auto;

}

.select-box-list .f-group a{

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    padding: 5px;

    color: #797979;

    font-size: 16px;

}

.select-box-list .iielevenlabs-one{

    display: flex;

    align-items: center;

}

.main-title{

    font-size: 32px;

    font-weight: 600;

    color: #1F1E1E;

}

.eight-hundred{

    width: 80%;

}

.twenty-hunderd{

    width: 20%;

}







/* Left Menu */

.main-area .left-menu {

    width: 0px;

    background-color: #ffffff;

    display: none;

    opacity: 0;

    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.10), 0px 6px 14px 0px rgba(0, 0, 0, 0.06);

    border-radius: 8px;

}



.left-menu-active .main-area .left-menu {

    width: 110px;

    display: block;

    opacity: 1;

}



.left-menu-active .main-area .left-menu ul {

    position: sticky;

    top: 0;

    padding-top: 10px;

}

.left-menu-active .eight-hundred {

    width: 70%;

}

.left-menu-active .content-library-page .heart-like {

    top: 170px;

}

.left-menu-active .select-list-box{

    gap: 2px;

}

.main-area .left-menu ul li a {

    padding: 8.5px 7px;

}



.main-area .left-menu ul li div {

    border-left: 1.5px solid transparent;

}



.main-area .left-menu ul li a span {

    font-weight: 400;

    font-size: 10px;

    line-height: 14px;

    color: #616161;

}



.main-area .left-menu ul li a div:hover {

    border-left: 2px solid #304659;

}



.main-area .left-menu ul li a.active span {

    color: #304659;

    font-weight: 700;

}



.main-area .left-menu ul li a.active svg path {

    stroke: #304659;

}



.main-area .left-menu ul li a:hover span {

    color: #304659;

    font-weight: 700;

}



.main-area .left-menu ul li a:hover svg path {

    fill: #304659;

    /* stroke: #304659; */

}

.main-area .left-menu ul li a:hover svg .fill {

    fill: transparent;

    stroke: #304659;

}

.space-line {

    padding: 27px 0;

}



.menu-pagecontent .left-menu {

    width: 7.5%;

    animation: FadeIn 1s ease-in-out;

}



.menu-pagecontent .page-content {

   min-width: 1px;

    transition: 0.5s all;

}



.left-menu-active .menu-pagecontent .page-content {

    /* width: 93%; */

    padding-left: 20px;

    transition: 0.5s all;



}

.dark-bg .left-menu-icon svg .fill{

    stroke: #fff;

    fill: transparent;

}

.dark-bg .left-menu-icon svg path {

    stroke: transparent;

    fill: #fff;

}

.dark-bg .main-area .left-menu ul li a span{

    color: #A4A7AE;

}

.dark-bg .main-area .left-menu ul li a:hover span {

    color: #fff;

    font-weight: 700;

}

.dark-bg .main-area .left-menu ul li a:hover svg path {

    fill: #fff;

    /* stroke: #304659; */

}

.dark-bg .main-area .left-menu{

    background-color: #3D3D3D !important;

}

.dark-bg .main-area .left-menu ul li a div:hover {

    border-left: 2px solid #fff;

}



@keyframes FadeIn {

    0% {

        display: none;

        opacity: 0;

    }



    1% {

        display: block;

        opacity: 0;

    }



    100% {

        opacity: 1;

    }

}



@keyframes FadeOut {

    0% {

        display: block;

        opacity: 1;

    }



    99% {

        display: block;

        opacity: 0;

    }



    100% {

        display: none;

        opacity: 0;

    }

}



.next-step {

    display: inline-block;

    vertical-align: top;

    padding: 8px 20px;

    border-radius: 4px;

    background: #194DB5;

    color: #fff;

    font-size: 14px;

    font-weight: 500;

    text-transform: capitalize;

    position: relative;

    overflow: hidden;

}

.save-draft-btn {

    display: inline-block;

    vertical-align: top;

    padding: 8px 20px;

    border-radius: 4px;

    background: #fff;

    color: #1F1E1E;

    font-size: 14px;

    font-weight: 500;

    text-transform: capitalize;

    position: relative;

    overflow: hidden;

    border: 1px solid #E1DFDD;

}

.wizard-create nav span{

    padding: 2px;

    width: 30px;

    border: 1px solid #eeee;

    border-radius: 50px;

    display: inline-block;

    height: 30px;

    margin-right: 8px;

}

.wizard-create .nav-pills .nav-link.active, .nav-pills .show>.nav-link {

    color: #fff;

    background-color: transparent;

}

.wizard-create .nav-fill .nav-item, .nav-fill>.nav-link{

    flex: none;

    color: #797979;

    padding-left: 0px;

}

.wizard-create .nav-pills .nav-link.active, .nav-pills .show>.nav-link{

    color: #1F1E1E;

}

.wizard-create .nav-link.active span{

    color: #003399;

    border: 1px solid #003399;

}

.arrow-wizard{

    padding-left: 15px;

    height: 12px;

}

.basic-information h2{

    font-size: 24px;

    color: #1F1E1E;

}

.checkbox-des{

    font-size: 14px;

    color: #414651;

    display: block;

    margin: 15px 0;

}

.checkbox-des input[type="checkbox"]{

    float: left;

}

.checkbox-des span{

    display: block;

    padding-left: 30px;

}

.m-0-auto{

    margin: 0 auto;

}

.main-module-box{

    padding: 30px 50px;

    background-color: #FAFAFA;

    border: 2px dashed #E1DFDD;

    border-radius: 8px;

    text-align: center;

}

.module-icon{

    display: block;

    text-align: center;

    margin: 0 auto;

}

.add-new-module-btn{

    display: table;

    padding: 10px 20px;

    background-color: #FFFFFF;

    border: 1px solid #E1DFDD;

    color: #1F1E1E;

    border-radius: 5px;

    margin: 15px auto 0px auto;

    font-size: 14px;

    font-weight: 500;

}

.module-text{

    font-weight: 500;

    font-size: 15px !important;

    color: #414651;

    margin-bottom: 10px;

}



.button {

    background: #005f95;

    border: none;

    border-radius: 3px;

    color: white;

    display: inline-block;

    font-size: 19px;

    font-weight: bolder;

    letter-spacing: 0.02em;

    padding: 10px 20px;

    text-align: center;

    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);

    text-decoration: none;

    text-transform: uppercase;

    transition: all 0.2s;

  }

  

  .btn:hover {

    background: #4499c9;

  }

  

  .btn:active {

    background: #49ade5;

  }

  

  input[type="file"] {

    display: none;

  }

  

  #file-drag {

    border: 2px dashed #E1DFDD;

    border-radius: 7px;

    color: #797979;

    background-color: #FAFAFA;

    cursor: pointer;

    display: block;

    font-weight: normal;

    margin: 1em 0;

    padding: 6em;

    text-align: center;

    transition: background 0.3s, color 0.3s;

  }

  #file-drag p{

    color: #797979;

    font-weight: lighter;

  }

/*   

  #file-drag:hover {

    background: #ddd;

  }

  

  #file-drag:hover,

  #file-drag.hover {

    border-color: #3070a5;

    border-style: solid;

    box-shadow: inset 0 3px 4px #888;

    color: #3070a5;

  } */

  

  #file-progress {

    display: none;

    margin: 1em auto;

    width: 100%;

  }

  

  #file-upload-btn {

    margin: auto;

  }

  

  #file-upload-btn:hover {

    background: #4499c9;

  }

  

  #file-upload-form {

    margin: auto;

    width: auto;

  }

  

  progress {

    appearance: none;

    background: #eee;

    border: none;

    border-radius: 3px;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;

    height: 30px;

  }

  

  progress[value]::-webkit-progress-value {

    background: -webkit-linear-gradient(

        -45deg,

        transparent 33%,

        rgba(0, 0, 0, 0.2) 33%,

        rgba(0, 0, 0, 0.2) 66%,

        transparent 66%

      ),

      -webkit-linear-gradient(right, #005f95, #07294d);

    background: linear-gradient(

        -45deg,

        transparent 33%,

        rgba(0, 0, 0, 0.2) 33%,

        rgba(0, 0, 0, 0.2) 66%,

        transparent 66%

      ),

      linear-gradient(right, #005f95, #07294d);

    background-size: 60px 30px, 100% 100%, 100% 100%;

    border-radius: 3px;

  }

  

  progress[value]::-moz-progress-bar {

    background: -moz-linear-gradient(

        -45deg,

        transparent 33%,

        rgba(0, 0, 0, 0.2) 33%,

        rgba(0, 0, 0, 0.2) 66%,

        transparent 66%

      ),

      -moz-linear-gradient(right, #005f95, #07294d);

    background: linear-gradient(

        -45deg,

        transparent 33%,

        rgba(0, 0, 0, 0.2) 33%,

        rgba(0, 0, 0, 0.2) 66%,

        transparent 66%

      ),

      linear-gradient(right, #005f95, #07294d);

    background-size: 60px 30px, 100% 100%, 100% 100%;

    border-radius: 3px;

  }

  

  ul {

    list-style-type: none;

    margin: 0;

    padding: 0;

  }

  .drag-drop-img{

    display: block;

    margin: 0 auto;

  }

  .fill-btn{

    background-color: #194DB5;

    color: #fff !important;

  }

.left-side-module h5{

    font-weight: 500;

    font-size: 15px !important;

    color: #414651 !important;

    margin-bottom: 10px;

}

.main-box{

    border: 1px solid #E1DFDD;

    border-radius: 8px;

    margin-bottom: 12px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0), 0px 1px 2px 0px rgba(0, 0, 0, 0.08);

}

.main-box .checkbox-des{

    display: flex;

    align-items: center;

    margin: 0px;

    padding: 15px;

}

.main-box .checkbox-des span{

    padding-left: 0px;

    font-size: 20px;

    gap: 10px;

    display: flex;

    color: #1F1E1E;

}

.main-box .main-table input[type="checkbox"]{

    top: 0px;

    margin-right: 12px;

}

.title-module h2{

    font-size: 24px;

    display: flex;

    align-items: center;

    gap: 10px;

}

.name-url-field{

    display: flex;

    gap: 24px;

    justify-content: space-between;

}

.name-url-field .with-icon {

    position: relative;

    width: 100%;

}

.main-taxt-fromate{

    display: flex;

    align-items: center;

}

.main-taxt-fromate .select-list-item select{

    min-width: 280px;

}

.main-taxt-fromate .select-list-item{

    margin-right: 12px;

}

.main-taxt-fromate a{

    padding-right: 5px;

}

.radio {

    position: relative;

}



input[type="radio"] {

    /* position: absolute; */

}



.checkmark {

    position: absolute;

    top: 2px;

    left: 0;

    height: 20px;

    width: 20px;

    border: 1px solid #194DB5;

    border-radius: 50%;

}



.radio input:checked~.checkmark {

    border: 1px solid #194DB5;

    background-color: #194db524;

}



.checkmark:after {

    content: "";

    position: absolute;

    display: none;

}



.radio input:checked~.checkmark:after {

    display: block;

}



.radio .checkmark:after {

    top: 5px;

    left: 5px;

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #194DB5;

}



.radio label {

    color: #252525;

    display: flex;

    gap: 15px;

    cursor: pointer;

}



.main-radio{

    display: flex;

    gap: 20px;

    padding-top: 10px;

}

.red-color{

    color: #D92D20 !important;

}

.edit-delete{

    display: flex;

    gap: 15px;

    padding: 15px;

}

.gap-15{

    gap: 15px;

}

.heading-dec{

    padding: 20px;

    border: 1px solid #E1DFDD;

    border-radius: 12px;

    margin-top: 15px;

}

.heading-dec h4{

    font-size: 16px;

    font-weight: 600;

    color: #1F1E1E;

}

.heading-dec p{

    font-size:16px;

    color: #797979;

}



.main-title h4{

    font-size: 24px;

    font-weight: 500;

    color: #1F1E1E;

    margin: 0;

}

.main-title{

    border: 1px solid #E1DFDD;

    border-radius: 12px;

    padding: 15px;

}

.public-share-sign{

    border: 1px solid #E1DFDD;

    border-radius: 12px;

    padding: 15px;

    display: flex;

    justify-content: space-around;

    margin: 15px 0;

}

.public-share-sign h5{

    color: #797979;

    font-size: 16px;

    margin-top: 5px;

    margin-bottom: 5px;

}

.public-share-sign h4{

    font-size: 16px;

    margin: 0;

    color: #1F1E1E;

}

.public{

    text-align: center;

}

.moudule-main{

    border: 1px solid #E1DFDD;

    border-radius: 12px;

    padding: 15px;

}

.learing-path-main-checkbox .checkbox-des span{

        padding-top: 3px;

}

.learing-path-main-checkbox .checkbox-des{

    margin: 5px 0;

}

.course-model .search-bar input{

    width: 100%;

}

.course-model .select-list-item select{

    padding: 0px 35px 0px 10px;

}

.course-model .search-bar{

    margin-bottom: 12px;

}

.course-model h4{

    font-size: 20px;

    text-align: left;

    color: #1F1E1E;

}

.all-courses{

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 10px;

}

.all-courses .Library-tabs-right{

    font-size: 12px;

}

.all-courses h6{

    color: #797979;

    font-size: 12px;

    margin-bottom: 0px;

}

.img-text{

    display: flex;

    gap: 5px;

}

.img-text span{

    padding-left: 0px;

    color: #141414;

}

.Main-title-learnig{

    border: 1px solid #E1DFDD;

    border-radius: 12px;

    padding: 15px;

    display: flex;

    gap: 25px;

    min-height: 150px;

}



.Main-title-learnig h5{

    font-size: 20px;

    color: #1F1E1E;

    font-weight: 600;

    margin-bottom: 0px;

}

.program{

    border: 1px solid #E1DFDD;

    border-radius: 12px;

    padding: 15px;

    margin-top: 16px;

}

.program h5{

    color: #1F1E1E;

    font-size: 20px;

    margin-bottom: 2px;

}

.program h6{

    color: #797979;

    font-size: 16px;

}



  .wizard {

    margin-left: 30px;

    position: relative;

  }

  .wizard .v-line {

    width: 1px;

    border:1px dashed #ccc;

    position: absolute;

    margin-left: -15px;

    margin-top: 20px;

    height: 100%;

  }

  .wizard .step {

    padding: 5px 0;

    position: relative;

    display: flex;

    align-items: center;

  }

  .wizard .step .lession{

    font-size: 16px;

    color: #1F1E1E;

    font-weight: 500;

    margin-left: 25px;

  }

 

   .round-icon{

    width: 40px;

    height: 40px;

    border: 1px solid #d3d3d3;

    background-color: #fff;

    border-radius: 50px;

    position: absolute;

    left: -35px;

    padding: 7px;

    text-align: center;

   }

   .main-progress-box{

    border: 1px solid #E1DFDD;

    border-radius: 12px;

    padding: 15px;

    margin-top: 16px;

    display: flex;

    width: 100%;

    margin-left: 25px;

    gap: 12px;

    align-items: center;

   }

   .main-progress-box .skill-main .skill-wrrap .skill-bar{

        width: 80%;

   }

   .main-progress-box .skill-main .skill-wrrap .skill-per:before{

    right: -40px;

    top: -10px;

   }

   .heading-title-learnin{

        min-width: 60%;

   }

   .heading-title-learnin h5{

    font-size: 20px;

    font-weight: 500;

    color: #1F1E1E;

   }

   .heading-title-learnin p{

    font-size: 16px;

    color: #797979;

   }

   .lock-icon{

    top: -2px;

    position: relative;

   }

   .main-progress{

    border: 1px solid #E1DFDD;

    border-radius: 12px;

    padding: 15px;

   }

   .main-progress .skill-main .skill-wrrap .skill-name{

        color: #1F1E1E;

   }

   .main-progress .skill-main .skill-wrrap .skill-per:before{

        color: #949BA1;

   }

   .main-progress .skill-main .skill-wrrap .skill-per{

    height: 5px;

    margin: 0;

   }

   .main-progress .skill-main .skill-wrrap .skill-bar{

    background-color: rgb(234 235 236 / 100%);

   }

   .main-progress-box .skill-main .skill-wrrap .skill-bar{

    background-color: rgb(234 235 236 / 100%);

   }

   .main-progress-box .skill-main .skill-wrrap .skill-per:before{

    color: #949BA1;

}

.Achievements-box h4{

    font-size: 16px;

    color: #1F1E1E;

}

.Achievements-box{

    border: 1px solid #E1DFDD;

    border-radius: 12px;

    padding: 15px;

    margin-top: 15px;

}

.achievement-under{

    display: flex;

    align-items: flex-start;

    gap: 10px;

}

.achievement-under h5{

    margin-bottom: 0px;

    font-size: 20px;

    color: #1F1E1E;

}

.achievement-under p{

    color: #797979;

    font-size: 16px;

}

.video-box{

    width: 100%;

    border-radius: 12px;

}

.share-main{

    height: 35px;

    width: 35px;

    text-align: center;

    padding: 3px;

    border-radius: 50px;

    border: 1px solid #B8B6B4;

    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.10), 0px 5px 10px 0px rgba(0, 0, 0, 0.06);

}

.title-icon{

    display: flex;

}

.share-like-main{

    display: flex;

    gap: 10px;

    margin-left: auto;

}

.title-icon h5{

    font-size: 20px;

    color: #1F1E1E;

    font-weight: 600;

}

.launch-course p{

    color: #797979;

    font-size: 16px;

}

.launch-course .next-step{

    width: 100%;

    display: block;

    margin-top: 15px;

    border-radius: 8px;

}

.course-include p{

    font-size: 16px;

    color: #1F1E1E;

}

.number-box{

    width: 25px;

    height: 25px;

    border-radius: 50px;

    background-color: #EFEFEF;

    text-align: center;

    font-weight: 600;

    color: #797979;

}

.number-text{

    display: flex;

    gap: 15px;

    padding: 8px 0;

}

.learning-path{

    display: flex;

    gap: 20px;

    align-items: center;

}

.title-des p{

    font-size: 16px;

    color: #797979;

    margin-top: 10px;

}

.form-control.is-invalid, .was-validated .form-control:invalid {

    border-color: #dc3545;

    padding-right: calc(1.5em + .75rem);

    background-image: url(../images/create-course/download.svg) ;

    background-repeat: no-repeat;

    background-position: right calc(.375em + .1875rem) center;

    background-size: calc(.75em + .375rem) calc(.75em + .375rem);

}