@charset "UTF-8";

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

* Template Name  : 

* Author	     : Nikunj Galathiya | +91 9712267052

* 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: #003399;

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

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

    --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: #F7F7F7;  

    /* 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;

    --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);

    --success-color: #00C801;

}



/* 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);

   

    -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 {

    outline: none !important;

    cursor: pointer;

}



button:focus,

button:active {

    outline: none;

}



button,

a:hover,

a:focus,

a:visited,

a:active,

button:active {

    text-decoration: none;

    outline: none !important; 

}



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;

}



iframe {

    border: none !important;

    display: block;

    width: 100%;

}  



section {

    position: relative;

}



main {

    position: relative;

    width: 100%;

    display: block;

} 

 

.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: 8px 30px;

    border-radius: 30px;

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

    background: var(--primary);

    color: #ffffff;

    font-size: 15px;

    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;

}



.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 {

    color: inherit;

    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

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

header {

    background: var(--primary);

    height: 100px;

    display: flex;

   

    align-items: center;

}

.header-left {

    display: flex;

    gap: 80px;

    align-items: center;

}

.logo a img {

    /* width: 200px; */

    display: inline-block;

}



.header-left .page-title p{

    font-size: 24px;    

}





/* 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;

    height: 59px;

    width: 59px;

    border-radius: 50px;

    background: transparent;

}



.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: 24px;

    font-weight: 600;

    color: var(--secondary);

}

.breadcrumb-wrap ul {

    display: inline-block;

    padding: 0;

}



.breadcrumb-wrap ul li {

    display: inline-block;

    font-size: 14px;

    letter-spacing: 1.5px; 

}



.breadcrumb-wrap ul li a {

    color: var(--secondary);

    font-size: 14px;

    font-weight: 500;

    letter-spacing: initial;

}

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

    opacity: 0.5;

}



.breadcrumb-wrap ul li.active {

    color: var(--white-color);

}



.breadcrumb-item.active {

    color: var(--primary);

} 



.breadcrumb-item + .breadcrumb-item {

    padding-left: 2px;

}



.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;

    margin-left: 30px;

    background: var(--bg-light);

    padding: 10px 15px;

    border-radius: 15px;

    min-height: 60px;

}



.cm-left {

    display: flex;

    align-items: center;

    gap: 15px;

    

}



.cm-top {

    display: flex;

    justify-content: space-between;

    flex-wrap: wrap;

    align-items: center;

   

}



.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;

} 

.cm-left span img{

    width: 23px;

}

.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 {

    margin-left: 0px !important;

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

}

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

    display: block !important;

}



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

    font-weight: bold;

}



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

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

}

.description {

    margin: 10px 0px;

}

/* .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: 3px;

}

.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);

}

.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: 20px;

}



.Library-tabs-area {

    display: flex;

    justify-content: space-between;

    margin-bottom: 25px;

    border-bottom: 1px solid #E1DFDD;

}



select.sort {

    border: 1px solid #353434;

    padding: 5px 10px;

    border-radius: 5px;

}



.select-list-box {

    display: flex;

    flex-wrap: wrap;

    gap: 17px;

    margin-bottom: 20px;

}



.select-list-item select {

    color: #353434;

    font-family: Open Sans;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: normal;

    border-radius: 5px;

    border: 1px solid #353434;

    background: #FFF;

    min-width: 215px;

    height: 48px;

    padding: 0px 30px 0px 20px;

    appearance: none;

}



.select-list-item {

    position: relative;

}



.select-list-item img {

    position: absolute;

    right: 0;

    top: 0;

    bottom: 0;

    margin: auto;

    right: 10px;

}



.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);

}



.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: 13px;

    color: #081F2C;

    padding: 0.8rem .5rem;

    position: relative;

}



.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: 15px;

    width: 15px;

    margin: 0;

    padding: 0;

    opacity: 1;

    appearance: none;

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

    border-radius: 3px;

    background: #fff;

    position: relative;

    margin-right: 10px;

    top: 3px;

}



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

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

    background: var(--primary);

}



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

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

    content: "";

    position: absolute;

    height: 2px;

    background: var(--white-color);

}



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

    width: 4px;

    top: 6px;

    left: 1px;

    transform: rotate(44deg);

}



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

    width: 10px;

    top: 4px;

    left: 2px;

    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: 5px;

    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%;

}



/* view customer course end */



.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:5px;

    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: #F9F9FF;

    padding: 50px;

}



.login-box {

    display: grid;

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

    grid-gap: 30px;

    align-items: center;

}



.login-left {

    background-color: rgba(146, 116, 236, 0.20);

    border-radius: 10px;

    margin-right: 80px;

}



.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: 20px;

    line-height: normal;

}



.login-right {

    max-width: 660px;

    margin: 0 auto;

}



.login-title {

    margin-bottom: 50px;

}



.login-title h2 {

    color: #6149A6;

    font-size: 50px;

    font-weight: 600;

    margin-bottom: 10px;

}



.login-title p {

    font-size: 18px;

    font-weight: 500;

}



.login-form-area {

    display: flex;

    flex-direction: column;

    gap: 25px;

}



.login-input input {

    border: 1px solid #BFBFBF;

    height: 60px;

    width: 100%;

    border-radius: 10px;

    font-size: 18px;

    color: #000;

    padding-left: 60px;

    padding-right: 20px;

    font-weight: 500;



}



.login-keepme {

    display: flex;

    gap: 10px;

}



.login-checkbox {

    transform: scale(1.3);

    box-shadow: none;

}



.login-keepme span {

    font-size: 18px;

    font-weight: 500;

}



.input-icons {

    position: absolute;

    top: 12px;

    left: 15px;

}



.login-or {

    margin-bottom: 50px;

}



.login-or p {

    font-size: 18px;

    font-weight: 500;

    text-align: center;

    position: relative;

}



.login-or p span {

    background-color: #F9F9FF;

    z-index: 2;

    position: relative;

    padding: 0 30px;

}



.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: 50px;

    padding-top: 20px;

}



.login-btns .btns {

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

    border-radius: 20px;

    height: 60px;

    width: 100%;

    color: #fff;

    font-size: 22px;

    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: 14px;

    position: relative;

}



.dashboard_leftAccount li a.dashboard_menu_active {

    color: #2D60FF;

}



.dashboard_leftAccount li a.dashboard_menu_active::after {

    content: "";

    position: absolute;

    height: 2px;

    width: 100%;

    bottom: -15px;

    left: 0;

}



.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;

}



.show-badge-btn {

    background: var(--primary);

    padding: 8px 50px;

    margin: 25px auto 10px auto;

    text-align: center;

    display: table;

    border-radius: 50px;

    color: var(--white-color);

    font-size: 15px;

}

.content-library-image img {

    width: 100%;

}

#searchContainer {

    margin-top: 0px;

}

.content-library-data {

    padding: 20px;

}

.show-badge-btn:hover {

    color: #ccc;

}



.badges-filters {

    padding: 10px 25px;

    background: var(--primary-hover);

    border-radius: 15px;

    display: flex;

    align-items: center;

    /* gap: 20px; */

    justify-content: space-between;

}