:root {
    --primary: #714b67 !important;
    --secondary: #008080 !important;
    
    --font-color:#ffffff !important;
    --icon-color:#ffffff !important;
    
    --white:#ffffff !important;

    /* footer */
    --lightgray: #FFF7F3 !important;
    --lightprimary: #ad779f !important;

    /* mani content colour */
    --black: #000000 !important;

    --danger: #d50000 !important;
} 


body {
    font-size: 14px;
    font-family : var(--font-family) !important;
    font-weight: normal;
    color: var(--primary);
    -webkit-transition: all 0.4s linear;
    transition: all 0.4s linear;
    overflow-x: hidden;
    /* background-color:var(--white) */
    background-color: #f5f6f8 !important;
}


/* ----- first Navbar ----- */
#header {
    background-color: var(--primary);
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Icon Color */

/* Common Icon Colour */
span i.fa, span.ps-3 {
    color: var(--black) !important;
}

i.icon {
    font-size: 16px;
    color: var(--black) !important;
}


/* Individual Icon Colour */

i.fa.fa-phone{
    color: var(--icon-color) !important;

}
i.fa.fa-envelope-o{
    color: var(--icon-color) !important;
}

i.icon.fa.fa-trash.fa-fw {
    color: red !important;
}

i.icon.fa.fa-window-close.fa-fw{
    color: red !important;
}

i.icon.fa.fa-cog.fa-fw {
    color: var(--primary) !important; 
}

i.icon.fa.fa-user.fa-fw{
    color: var(--secondary) !important;
}

i.icon.fa.fa-chevron-left.fa-fw{
    color: var(--secondary) !important;
}

a[data-route="view-search"] > i.icon.fa.fa-search.fa-fw { 
    color: var(--secondary) !important;
}


i.icon.fa.fa-info-circle.fa-fw{
    color: var(--secondary) !important;
}

.table thead th i.icon{
    color: var(--secondary) !important;
}

i.icon.fa.fa-plus.fa-fw :before{
    color: var(--icon-color) !important;
}

i.icon.fa.fa-search-plus.fa-fw{
    color: var(--secondary) !important;
}


i.icon.fa.fa-angles-down.fa-fw , i.icon.fa.fa-angles-right.fa-fw{
    color: var(--primary) !important;
}


button[data-action="manage-module-favourite"] i.fa-star-o {
    color: var(--secondary) !important;
}

i.icon.fa.fa-pencil.fa-fw{
    color: var(--primary) !important;
}

i.icon.fa.fa-ellipsis-v.fa-fw {
    color: var(--black) !important;
}

i.icon.fa.fa-search.fa-fw{
    color: var(--icon-color) !important;
}


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


#header .popover-region .popover-region-toggle.nav-link .icon:before {
    color: var(--icon-color) !important;
}

#header .nav.navbar-nav.address-head {
    align-items: center;
}


#header .nav.navbar-nav span a{
    color: var(--font-color) !important;
}

#header .navbar-nav a.nav-link:hover, #header .navbar-nav a.nav-link:focus {
    background: var(--primary);
}

a.dropdown-item.active, a.dropdown-item:focus, a.dropdown-item:hover {
    color: var(--font-color) !important;
    background-color: var(--secondary) !important;
}

/* editmode switch */
#header .editmode-switch-form .custom-control.custom-switch .custom-control-label:after {
    background-color: var(--secondary);
}

#header .editmode-switch-form .custom-control .custom-control-input:checked~.custom-control-label:before {
    background-color: var(--secondary);
}



/* -----  Secound Nav bar or Header ------ */

.header-main .navbar.navbar-light .navbar-brand.has-logo .logo img {
    max-height: 50px;
    color: var(--primary) !important;
}


span.logo > img{
    color: var(--font-color) !important;
}

a.aalink, a {
    color: var(--font-color) !important;
}


a.nav-link {
    color: var(--primary) !important;
}

li > a:hover{
    color: var(--secondary) !important;
}

.navigation .navbar .navbar-nav > a.active, .navigation .navbar .navbar-nav > a:hover {
    color: var(--secondary) !important;
}


.main-inner .drawer-left-toggle button.btn:not(:disabled):not(.disabled):hover, .main-inner .drawer-left-toggle button.btn:not(:disabled):not(.disabled):focus, .main-inner .drawer-right-toggle button.btn:not(:disabled):not(.disabled):hover, .main-inner .drawer-right-toggle button.btn:not(:disabled):not(.disabled):focus {
    border-color: var(--secondary) !important;
    background-color: var(--secondary) !important;
}

.main-inner .drawer-left-toggle button.btn:not(:disabled):not(.disabled), .main-inner .drawer-right-toggle button.btn:not(:disabled):not(.disabled) {
    color: var(--icon-color) !important;
    border-color: var(--secondary) !important;
    background-color: var(--secondary) !important;
}



/* Big Slider Button */
.homepage-carousel .controls a.carousel-control {
    width: 44px;
    height: 44px;
    line-height: 38px;
    text-align: center;
    background-color: var(--primary);
    border: 2px solid var(--primary) ;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 10px;
    right: auto;
    opacity: 1;
}

.homepage-carousel>div .homecarousel-slide-item .slide-item .slide-text .heading-content h1 {
    color: var(--font-color) !important;
    margin-bottom: 0;
}

p.animated.ScrollRight {
    color: var(--font-color) !important;
}


.btn-primary{
    display: inline-block;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid var(--primary);
    padding: 0 35px;
    font-size: 16px;
    font-family : var(--font-family) !important;
    font-weight: 700;
    line-height: 50px;
    border-radius: 5px;
    color: var(--font-color) !important;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 5;
    -webkit-transition: 0.4s ease-in-out;
    transition: 0.4s ease-in-out;
    background-color: var(--primary);
}

.btn-primary:focus, .btn-primary:hover, .btn-primary:active {
    display: inline-block;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid var(--lightprimary);
    padding: 0 35px;
    font-size: 16px;
    font-family : var(--font-family) !important;
    font-weight: 700;
    line-height: 50px;
    border-radius: 5px;
    color: var(--font-color) !important;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 5;
    -webkit-transition: 0.4s ease-in-out;
    transition: 0.4s ease-in-out;
    background-color: var(--lightprimary);
}

.btn-secondary {
    display: inline-block;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid var(--font-color);
    padding: 0 35px;
    font-size: 16px;
    font-family : var(--font-family) !important;
    font-weight: 700;
    line-height: 50px;
    border-radius: 5px;
    color: var(--secondary) !important;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 5;
    -webkit-transition: 0.4s ease-in-out;
    transition: 0.4s ease-in-out;
    background-color: var(--font-color);
}

.btn-secondary:focus, .btn-secondary:hover, .btn-secondary:active {
    display: inline-block;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid var(--lightgray);
    padding: 0 35px;
    font-size: 16px;
    font-family : var(--font-family) !important;
    font-weight: 700;
    line-height: 50px;
    border-radius: 5px;
    color: var(--black) !important;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 5;
    -webkit-transition: 0.4s ease-in-out;
    transition: 0.4s ease-in-out;
    background-color: var(--lightgray);
}




/* Our Latest Courses */
h2{
    font-family : var(--font-family) !important;
    font-weight: 700;
    color: var(--primary) !important;
    /* margin: 0px; */
}

/* All content text */
p{
    font-family : var(--font-family) !important;
    font-weight: normal;
    color: var(--black) !important;
    /* margin: 0px; */
}


/* Site announcements */
div.post-content-container > p {
    color: var(--primary);
}

input#id_submitbutton, input#id_submitbutton2 {
    background: var(--secondary);
    border: 0;
    text-shadow: none;
    color: var(--white) !important;
}

input#id_submitbutton:hover, input#id_submitbutton2:hover{
    background: var(--primary);
    border: 0;
    text-shadow: none;
    color: var(--white) !important;   
}

/* common button Css */
input[type="button"], input[type="submit"], input[type="reset"] {
    font-weight: 700;
    font-family : var(--font-family) !important;
    color: var(--font-color) !important;
    text-shadow: none;
    background: var(--primary);
    padding: 0 16px;
    border: 0;
    box-shadow: none;
}

input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover,
input[type="button"]:focus, input[type="submit"]:focus, input[type="reset"]:focus {
    font-weight: 700;
    font-family : var(--font-family) !important;
    color: var(--white) !important;
    text-shadow: none;
    background: var(--lightprimary) !important;
    padding: 0 16px;
    border: 0;
    box-shadow: none;
}

.btn-cancel input[type="button"],
.btn-cancel input[type="submit"] {
    color: var(--secondary) !important;
    background: var(--font-color) !important;
}

.btn-cancel input[type="button"]:hover,
.btn-cancel input[type="submit"]:hover,
.btn-cancel input[type="button"]:focus,
.btn-cancel input[type="submit"]:focus {
    color: var(--black) !important;
    background: var(--lightgray) !important;
}

.btn-primary:active:hover, .btn-primary:active:focus, .btn-primary:active:active, .btn-primary:active.focus, .btn-primary.active:hover, .btn-primary.active:focus, .btn-primary.active:active, .btn-primary.active.focus, .btn-primary:focus:hover, .btn-primary:focus:focus, .btn-primary:focus:active, .btn-primary:focus.focus, .btn-primary.focus:hover, .btn-primary.focus:focus, .btn-primary.focus:active, .btn-primary.focus.focus {
    color: var(--white) !important;
    background-color: var(--lightprimary) !important;
    border: var(--lightprimary) !important;
}

label#id_subject_label,label#id_message_label{
    color: var(--black) !important;
}

h3{
    color: var(--primary);
}
.mb-3 {
    color: var(--primary);
}

.mb-3 a {
    color: var(--primary);
}

.mb-3 time {
    color: var(--primary);
}

.mb-3::before {
    color: var(--primary);
}

.mb-3 time::before {
    content: " - ";
    color: var(--primary);
}

.link.text-right {
    color: var(--primary);
}

.link.text-right a {
    color: var(--primary);
}

.link.text-right::after {
    color: var(--primary);
}



/* My Course */

.coursebox {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    margin-bottom: 20px;
}


.coursebox:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    transform: translateY(-5px);
}

.coursebox .coursename a {
    color: #007bff;
    text-decoration: none;
}

.coursebox .coursename a:hover {
    text-decoration: underline;
}


.courses.frontpage-course-list-enrolled .coursebox .content .courseimage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    object-position: top;
}



/* Teacher name colour */
.fp-filename, .autolink{
    color: var(--secondary) !important;
}
.teachers>li>a{
    color: var(--primary) !important;
}

.courses.frontpage-course-list-all>.paging.paging-morelink, .courses.frontpage-course-list-enrolled>.paging.paging-morelink {
    text-align: left !important;
    padding: 20px 0;
    border-top: 1px solid #e5e5e5;
}



/* my Course Link Click */
.course_category_tree .category>.info>.categoryname.aabtn a {
    font-size: 14px;
    color: var(--secondary) !important;
}

#course-category-listings .listitem[data-selected="1"] {
    border-left-color: var(--secondary)
}

.course_category_tree .category>.info {
    background: var(--white) !important;
    box-shadow: 0px 1px 8px 1px #e1dddd !important;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0 0 9px;
}





/* Course categories */
.course_category_tree.frontpage-category-names .category>.info>.categoryname.aabtn a {
    font-weight: 400;
    font-size: 18px;
    color: var(--secondary) !important;
}

.course_category_tree.frontpage-category-names .category>.info .numberofcourse {
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: var(--secondary) !important;
    text-align: center;
    border-radius: 50%;
    padding: 0;
    margin-top: -5px;border-radius: 10px;
    background: transparent ;
    box-shadow: 10px 5px 5px rgba(122, 122, 122, 0.05);
    padding: 5px 0;
    margin: 0 0 14px;
    float: right;
}

.course_category_tree.frontpage-category-names .category>.info {
    border-radius: 10px;
    /* background: var(--lightgray ) ; */
    box-shadow: 10px 5px 5px rgba(122, 122, 122, 0.05);
    padding: 5px 0;
    margin: 0 0 14px;
}

.course_category_tree .category.with_children>.info>.categoryname.aabtn:before {
    color: var(--primary) !important;

}
.course_category_tree .category>.info>.categoryname.aabtn:before {
    color: var(--primary) !important;
}



/* Available courses */

.available-courses .available-block .course-slider .slick-slide .available-content .available-info {
    width: 100%;
    height: 110px !important;
    /* background: #ece7e7; */
    background-color: whitesmoke !important;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 0 20px 5px 20px;
    display: flex;
    align-items: center;
    border: 2px solid #e5e5e5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.available-courses .available-block .course-slider .slick-slide .available-content .available-info h6 a{
    /* color: var(--font-color) !important; */
    color: var(--black) !important;
}

/* Date color */
div > a{
    color: var(--secondary) !important;
}


.coursename > a.aalink {
    color: var(--secondary) !important;
}

span.multiline > span {
    color: var(--primary) !important;
}

button.slick-prev.slick-arrow, button.slick-prev.slick-arrow.slick-disabled, button.slick-prev.slick-arrow.slick-disabled:hover, button.slick-prev.slick-arrow.slick-disabled:active, button.slick-prev.slick-arrow.slick-disabled.nav-link:focus {
    font-family : var(--font-family) !important;
    color: var(--white) ;
    font-weight: 700;
    text-shadow: none;
    background: var(--primary) !important;
    padding: 7px 16px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

button.slick-next.slick-arrow, button.slick-next.slick-arrow.slick-disabled, button.slick-next.slick-arrow.slick-disabled:hover, button.slick-next.slick-arrow.slick-disabled:active, button.slick-next.slick-arrow.slick-disabled.nav-link:focus {
    font-family : var(--font-family) !important;
    color: var(--white) ;
    font-weight: 700;
    text-shadow: none;
    background: var(--primary) !important;
    padding: 7px 16px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}


/* Available courses Link click  */

.available-courses .available-block .course-slider .slick-arrow.slick-prev{
    left: 0;
    right: auto;
}



.available-courses .available-block .course-slider .slick-arrow.slick-next{
    left: auto;
    right: 0;
}

.btn.btn-icon.icons-collapse-expand {
    color: var(--white) !important;
    background-color: var(--secondary) !important;
}

.btn.btn-icon.icons-collapse-expand:hover {
    outline: 2px solid var(--secondary);
}   

h3.h4.sectionname.course-content-item > a {
    color: var(--primary) !important;
}

span.instancename {
    color: var(--secondary) !important;
}

h1.h2.mb-0{
    color: var(--primary) !important;
}


div.card-body > h3 {
    color: var(--secondary) !important;

}

div.col-md-3.col-form-label.d-flex.pb-0.pr-md-0 > p , label{
    color: var(--black) !important;
}

.btn.btn-link i:before{
    color: var(--primary) !important;
}

.btn.btn-link[data-action="deleteelement"] i::before {
    color: var(--danger) !important;
}

div.fp-btn-add > a { 
    background: var(--secondary) !important;
}

div.fp-btn-add > a:hover { 
    background: var(--secondary) !important;
}

div.fp-viewbar.btn-group.float-sm-right > a{
    background: var(--secondary) !important;
    border:var(--secondary) !important

}

div.fp-viewbar.btn-group.float-sm-right > a:hover{
    background: var(--secondary) !important;

}

span.badge.bg-secondary.text-dark.m-1 {
    background: var(--secondary) !important;
} 
 


h3.d-flex.align-self-stretch.align-items-center.mb-0{
        color: var(--primary);

}

.form-autocomplete-suggestions li:hover, .form-autocomplete-suggestions li:focus, .form-autocomplete-suggestions li[aria-selected="true"], .form-autocomplete-selection li:hover, .form-autocomplete-selection li:focus, .form-autocomplete-selection li[aria-selected="true"] {
    background: var(--secondary) !important;
    box-shadow: none;
    color: var(--font-color);
}

ul.form-autocomplete-suggestions > li{
    color: var(--primary);
}

div.dropdown > button {
    background: var(--secondary) !important;
    color: var(--font-color) !important;
}

div.dropdown > button:hover {
    background: var(--secondary) !important;
    color: var(--font-color) !important;
}

.d-flex.flex-row.align-items-start.p-2.mb-1.position-relative.rounded.dropdown-item-outline.border.bg-primary-light.selected {
    background: var(--secondary) !important;
}

a.stretched-link.text-wrap.font-weight-bold.text-dark.selected {
    color: var(--font-color) !important;
}

div.option-name > div {
    color: var(--primary) !important;
}


.d-flex.flex-row.align-items-start.p-2.mb-1.position-relative.rounded.dropdown-item-outline:hover {
    background: var(--secondary) !important; /* Adjust to match unselected state */
    color: var(--font-color) !important;    
}

a.stretched-link.text-wrap.font-weight-bold.text-dark:hover{
    color: var(--primary-colour) !important;
}

  
div.activity-description > div.no-overflow {
    color: var(--primary);
}

div.input-group-append > button.btn.btn-submit.search-icon{
    background: var(--secondary) !important; 
}

div.input-group-append > button.btn.btn-submit.search-icon > i {
    color: var(--icon-color) !important; 
}
 
div#intro{
    color: var(--primary) !important;
}



/* Site Admin menu */
.moremenu .nav.nav-tabs .nav-item .nav-link.active {
    color: var(--white) !important;
    background-color: var(--secondary) !important;
    border-bottom: var(--secondary);

}

.secondary-navigation .moremenu.navigation .nav-tabs .nav-item .nav-link:hover, .secondary-navigation .moremenu.navigation .nav-tabs .nav-item .nav-link:focus, .secondary-navigation .moremenu.navigation .nav-tabs .nav-item .nav-link:active {
    background-color: var(--secondary);
    color:var(--white) !important;
    border-bottom: var(--secondary);

}



/* site admin menu data */
a.gradeitemheader{
    color: var(--secondary) !important;
}

.list-unstyled > li > a {
    color: var(--secondary) !important;
}

td.pe-3 > a, .sorters  > a {
    color: var(--secondary) !important;
}

a.courseindex-link:hover {
    color: var(--secondary) !important;
    background: var(--white) !important;
}

time#time-modified-5, a.w-100.h-100.d-block, div.urlworkaround > a , a.view-more, div.popover-region-seeall-text{
    color: var(--secondary) !important;
}

thead > tr > th > a{
    color: var(--secondary) !important;
}


div#linkusers > div.container-fluid > div.row > div.col-sm-3 h4 {
    color: var(--primary) !important;
}

#page-admin-search .tab-content .tab-pane h4:hover, #page-admin-search .tab-content .tab-pane h4:focus, #page-admin-search .tab-content .tab-pane a:hover, #page-admin-search .tab-content .tab-pane a:focus {
    color: var(--primary) !important;
}


/* footer */
.foot-links > ul a {
    color: var(--secondary) !important;
}

a.nav-item.nav-link:hover{
    color: var(--primary) !important;
}


div.contact-info > p{
    color: var(--black) !important;
}

div.contact-info > p a{
    color: var(--secondary) !important;
}

div.contact-info > p > a.mail-link:hover, .div.contact-info > p > a.mail-link:focus, div.contact-info > p > a.mail-link:active{
     color: var(--primary) !important;
}

div.footer-bottom > p  {
    color: var(--font-color) !important;
}
div.footer-bottom > p a {
    color: var(--white) !important;
}

#footer .footer-main .infoarea .footer-logo a img {
    color: var(--primary) !important;
    font-size: large;
}

div.infoarea > p{
    color: var(--black) !important;
}

#footer .footer-main{
    background-color: var(--lightgray) !important;
}

#footer .footer-bottom {
    background-color: var(--primary) !important;
}


#footer button.btn-footer-popover, #footer button.btn-footer-popover:hover, #footer button.btn-footer-popover:focus, #footer button.btn-footer-popover:active {
    background: var(--primary) !important;
}



/* Dashboard */
body:not(.pagelayout-frontpage).theme-container.limitedwidth #page.drawers .main-inner, body:not(.pagelayout-frontpage).theme-container.limitedwidth #page.drawers .secondary-navigation {
    max-width: 1440px !important;
    margin-left: auto;
    margin-right: auto;
}


.block .card-body .content .block-timeline .no-gutters .dropdown-toggle{
    background: var(--secondary) !important;
    color: var(--font-color) !important;
    
}

.block .calendar-controls .current{
    color:var(--black) !important;
    font-weight: bold;

}

.maincalendar .calendarmonth td.today .day-number-circle{
    background:var(--secondary) !important;
}


.block .bottom > span.footer-link a{
    color: var(--secondary) !important;
}



/* My courses */
a.aalink, a {
    color: var(--secondary) !important;
}

div.dropdown > button.coursemenubtn {
    background: none !important;
    color: var(--font-color) !important;
}

span.multiline > span {
    color: var(--secondary) !important;
}

/* my course link click */
div.col-md-3.col-form-label.d-flex.pb-0.pr-md-0 > p , label{
    color: var(--black) !important;
}



/* Site administration */
#page-admin-search .tab-content .tab-pane a {
    color: var(--primary) !important;
}

#page-admin-search .tab-content .tab-pane a:hover{
    color: var(--secondary) !important;
}

#page-admin-search .tab-content .tab-pane .list-unstyled li a{
    color: var(--secondary) !important;
}

#page-admin-search .tab-content .tab-pane .list-unstyled li a:hover, #page-admin-search .tab-content .tab-pane .list-unstyled li a:focus {
    color: var(--primary) !important;
}



/* breadcrumb */
.breadcrumb .breadcrumb-item:last-child {
    color: var(--font-color) ;
    padding-left: 15px;
    padding-right: 10px;
    background: var(--secondary);
}
.breadcrumb .breadcrumb-item:last-child:after {
    content: "";
    width: 0;
    height: 0;
    border-top: 18px solid #fff0;
    border-bottom: 16px solid #fff0;
    border-left: 20px solid var(--secondary);
    position: absolute;
    right: -20px;
    top: 0;
}

.breadcrumb>li a{
    color: var(--primary) !important;
}


button#filter-dates-button{
    background: var(--secondary) !important;
    color: var(--font-color) !important;
}

.path-admin .rolecap .cap-name, .path-admin .rolecap .note{
    color: var(--black);
}

.table-hover tbody tr:hover {
    background-color: var(--lightgray) !important;
    color: var(--secondary) !important;
}



div.singlebutton > form > button.btn.btn-secondary{
    /* background: var(--primary) !important;
    color: var(--white) !important; */
    background: none !important;
    color: var(--secondary) !important;
}

div.singlebutton > form > button.btn.btn-secondary:hover{
    background: whitesmoke !important;
    color: var(--secondary) !important;
}

button.btn.btn-link{
    color: var(--primary) !important; 
}


/* sub Icon colour */
/* 
.slider-video {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 10px;
}

.slider-video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    transform: translate(-50%, -50%);
    filter: blur(15px);
    opacity: 0.7;
} */


/* media query */
@media (max-width: 1024px) {
    
    #header .navbar-nav {
        margin-right: 0;
    }

    .header-main .navbar.navbar-light .primary-color-navigation {
        margin-right: auto;
        margin-left: auto;
    }

    .btn-primary-color, .btn-secondary {
        padding: 0 25px;
        font-size: 14px;
    }
}


@media (max-width: 768px) {
    #header {
        padding: 5px;
    }

    .header-main .navbar.navbar-light .navbar-brand.has-logo .logo img {
        max-height: 40px;
    }

    .header-main .navbar.navbar-light {
        margin-right: -50px !important;
        margin-left: 50px !important;
        flex-wrap: nowrap;
    }

    #header .usermenu .login {
        margin-right: 10px;
        font-size: 12px;
    }

    #header .nav.navbar-nav.address-head {
        margin-left: 20px;
    }

    .btn-primary-color, .btn-secondary {
        font-size: 14px;
        line-height: 40px;
        padding: 0 20px;
    }

    h1, h2, h3, h4, h5, h6 {
        font-size: 16px;
    }

    .promoted-courses {
        padding: 20px 10px;
    }

    .promoted-courses .promatedcourse-slider {
        margin-top: 83px;
        height: 418px;
    }

    .slick-track {
        position: relative;
        top: 0;
        left: 0;
        display: block;
        height: 28rem;
        margin-top: 3%;
        margin-left: 1rem;
    
    }

    .available-courses .available-block .course-slider .slick-arrow.slick-next{
        left: auto;
        right: -15px;
    }

    .course_category_tree .category>.info>.categoryname.aabtn a {
        font-size: 14px;
        color: var(--primary-color-color) !important;
    }

    #footer .footer-content-popover .footer-section a {
        color: var(--backgroundprimary-colorr);
    }



    .available-courses .available-block .course-slider .slick-slide .available-content .available-info {
        width: 100%;
        height: 150px !important;
        /* background: var(--secondary); */
        background: #f0f0f0;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        padding: 0 20px 5px 20px;
        display: flex;
        align-items: center;
    }

    .available-courses .available-block .course-slider .slick-slide .available-content .available-info h6 a{
        /* color: var(--font-color) !important; */
        color: var(--black) !important;
    }
}

@media (max-width: 480px) {
    #header {
        padding: 5px 10px;
    }

    .header-main .navbar.navbar-light {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .header-main .navbar.navbar-light .navbar-brand.has-logo .logo img {
        max-height: 30px;
    }

    #header .usermenu .login {
        margin-right: 0;
        font-size: 10px;
    }

    #header .nav.navbar-nav.address-head {
        margin-left: 0;
    }

    .btn-primary-color, .btn-secondary {
        font-size: 12px;
        line-height: 35px;
        padding: 0 10px;
    }

    h1, h2, h3, h4, h5, h6 {
        font-size: 14px;
    }

 
    .available-courses .available-block .course-slider .slick-slide .available-content .available-info {
        width: 100%;
        height: 150px !important;
        /* background: var(--secondary); */
        background: #f0f0f0;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        padding: 0 20px 5px 20px;
        display: flex;
        align-items: center;
    }

    .available-courses .available-block .course-slider .slick-slide .available-content .available-info h6 a{
        color: var(--black) !important;
    }

    .promoted-courses {
        padding: 10px;
    }
    .promoted-courses .promatedcourse-slider {
        margin-top: 83px;
        height: 418px;
    }
    .slick-track {
        position: relative;
        top: 0;
        left: 0;
        display: block;
        height: 28rem;
        margin-top: 3%;
        margin-left: 1rem;
    
    }
    .course_category_tree .category>.info>.categoryname.aabtn a {
        font-size: 12px;
    }

    .breadcrumb .breadcrumb-item:last-child {
        padding-left: 10px;
        padding-right: 5px;
    }

    
    .available-courses .available-block .course-slider .slick-slide .available-content .available-info {
        width: 100%;
        height: 150px !important;
        /* background: var(--secondary); */
        background: #f0f0f0;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        padding: 0 20px 5px 20px;
        display: flex;
        align-items: center;
    }

    .available-courses .available-block .course-slider .slick-slide .available-content .available-info h6 a{
        color: var(--black) !important;
    }

}


@media (max-width: 320px) {
    #header {
        padding: 5px 10px;
    }

    .header-main .navbar.navbar-light {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .header-main .navbar.navbar-light .navbar-brand.has-logo .logo img {
        max-height: 30px;
    }

    #header .usermenu .login {
        margin-right: 0;
        font-size: 10px;
    }

    #header .nav.navbar-nav.address-head {
        margin-left: 0;
    }

    .btn-primary-color, .btn-secondary {
        font-size: 12px;
        line-height: 35px;
        padding: 0 10px;
    }

    h1, h2, h3, h4, h5, h6 {
        font-size: 14px;
    }


    .available-courses .available-block .course-slider .slick-slide .available-content .available-info {
        width: 100%;
        height: 150px !important;
        /* background: var(--secondary); */
        background: #f0f0f0;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        padding: 0 20px 5px 20px;
        display: flex;
        align-items: center;
    }
    
    .available-courses .available-block .course-slider .slick-arrow.slick-next{
        left: auto;
        right: -20px;
    }

    .available-courses .available-block .course-slider .slick-slide .available-content .available-info h6 a{
        color: var(--black) !important;
    }

    .promoted-courses {
        padding: 10px;
    }
    .promoted-courses .promatedcourse-slider {
        margin-top: 83px;
        height: 418px;
    }
    .slick-track {
        position: relative;
        top: 0;
        left: 0;
        display: block;
        height: 28rem;
        margin-top: 3%;
        margin-left: 1rem;
    
    }

    .course_category_tree .category>.info>.categoryname.aabtn a {
        font-size: 12px;
    }

    .breadcrumb .breadcrumb-item:last-child {
        padding-left: 10px;
        padding-right: 5px;
    }
}

@media (max-width: 767px) {
    #header .nav.navbar-nav.address-head span {
        font-size: 10px !important;
    }
}

@media (min-width: 576px) {
    .header-main {
        background: var(--white);
        border-bottom: 1px solid var(--lightgray);

    }

    #page-wrapper #page {
        display: flex;
        flex-direction: column;
    }
}


/* Our Latest Courses Card design */


 .promoted-course-grid-frontpage {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.course-card-frontpage {
    height: 400px;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    background: #fff;
}

.course-card-frontpage:hover {
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid var(--secondary) !important;
    transform: translateY(-5px);
}

.course-link-frontpage {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.course-image-frontpage {
    height: 70%;
    width: 100%;
    overflow: hidden;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.course-image-frontpage img {
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
    transition: transform 0.3s ease;
}

.course-card-frontpage:hover .course-image-frontpage img {
    transform: scale(1.1);
}

.course-details-frontpage {
    height: 30%;
    padding: 10px;
    /* background: #f0f0f0; */
    background-color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    font-size: large;
}

.course-title {
    font-size: 1em;
    margin: 0;
    /* color: var(--font-color); */
    color: var(--black);
    line-height: 1.3em;
    max-height: 2.6em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


#backToTop{
    display: none !important;
}

#footer button.btn-footer-popover{
    display: none !important;
}


div.usermenu > span.login.pl-2 > a{
    color: var(--font-color) !important;
}

button#themeSwitcher{
    color: var(--font-color) !important;
    background: var(--primary);
}
a#themeSwitcher{
    color: var(--font-color) !important;
    /* background: var(--primary); */
}


div.action-menu > div.dropdown > button{
    background:none !important;
}

h5{
    color: var(--primary) !important;
}

.pagination .page-item.active .page-link{
    background: var(--primary) !important;
    color: var(--font-color) !important;
}

.pagination .page-item .page-link:hover{
    background: var(--secondary) !important;
    color: var(--font-color) !important;
}


.filter-group .d-flex .text-reset{
    background: var(--secondary) !important;
}


.filter-group .d-flex .text-reset span{
    color: var(--font-color) !important;
}

.filter-group .d-flex .text-reset:hover{
    background: var(--secondary) !important;
}

.filter-group .d-flex .text-reset:hover span{
    color: var(--font-color) !important;
}

#region-main .singlebutton.enrolusersbutton .btn{
    background: var(--secondary) !important;

}

.fp-toolbar .btn:not(:disabled):not(.disabled), .fp-viewbar .btn:not(:disabled):not(.disabled){
    background: var(--secondary) !important;

}


/* course Selection  */
.course-section .section-item {
    padding: 1rem;
    border: 1px solid #dee2e6;
    border-radius: 1rem;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1) !important;
    /* box-shadow: 5px 5px 5px 5px #e0dfdf !important;  */
    background-color: #fff;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}
.course-section .section-item:hover {
    transform: translateY(-10px);
    border: 2px solid var(--secondary) !important;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.15) !important;
}


/* course Question */
.formulation.clearfix {
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;

}

.formulation.clearfix:hover{
    transform: translateY(-10px);
    /* border: 1px solid #000000 !important; */
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.15) !important;
}


.cb-toolbar-container .icon-no-margin, .cb-toolbar-container .icon-no-margin.btn:not(:disabled):not(.disabled) 
{
    color: #fff;
    background: var(--secondary) !important;
    border-color: var(--secondary) !important;
    box-shadow: none;
    margin-right: 2px;
}


.dropdown-item.active, .dropdown-item:active, .dropdown-item:hover, .dropdown-item:focus, .dropdown-item:focus-within{
 background: var(--secondary) !important;
}

.dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus, .dropdown-menu .dropdown-item:focus-within, .dropdown-menu .dropdown-item:active{
    background: var(--secondary) !important;
    color: var(--font-color) !important;
}



.pagination-sm .page-link{
    color: var(--secondary) !important;
}


.btn-secondary.disabled, .btn-secondary:disabled{
    background: var(--secondary) !important;

}
.btn.btn-secondary:disabled:hover, .btn.btn-secondary:disabled:focus{
    background: var(--primary) !important;

}


.btn-primary.disabled, .btn-primary:disabled{
    background: var(--secondary) !important;
}

.btn.btn-primary:disabled:hover, .btn.btn-primary:disabled:focus{
    background: var(--primary) !important;
}


#site-news-forum .forumpost{
    padding: 1rem !important;
    border-radius: 1rem;
    margin-top: 1rem !important;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}


#site-news-forum .forumpost:hover{
    transform: translateY(-5px);
    border: 1px solid var(--secondary) !important;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.15) !important;
}




/* side Darwer */
.drawer .drawercontent .courseindex .courseindex-section .courseindex-item:hover{
    background: var(--secondary) !important;
    color: var(--font-color) !important;
}


.drawer .drawercontent .courseindex .courseindex-item:hover .courseindex-link:hover {
    background: var(--secondary) !important;
    color: var(--font-color) !important;
}

.drawer .drawercontent .courseindex .courseindex-item:hover, .drawer .drawercontent .courseindex .courseindex-item:hover a {
    color: var(--font-color) !important;
    background: var(--secondary) !important;
}

.courseindex .courseindex-item.pageitem{
    background: var(--secondary) !important;
}

.courseindex .courseindex-item.pageitem a{
    color: var(--font-color) !important;
}


.drawer .drawerheader .drawertoggle{
    height: auto;
    color: var(--font-color) !important;
    background: var(--secondary) !important;
    padding: 5px;
}


/* edit Swich */

.pagelayout-course #page #page-header .header-actions-container .header-action .bulkEnable{
    color: var(--secondary) !important;
}


button[data-action="manage-module-favourite"][data-favourited="true"] {
    background-color:var(--secondary) !important; /* Change to your desired color */
    border-color:var(--secondary) !important;/* Optional: Match border */
}

button[data-action="manage-module-favourite"][data-favourited="true"]:hover {
    background-color: var(--primary) !important; /* Change to hover color */
    border-color: var(--primary) !important; /* Optional */
}



div.divider-content.px-3 > button{
    color: var(--font-color) !important;
    background: var(--secondary) !important;
}

span.dir-rtl-hide > .icon.fa.fa-chevron-left.fa-fw{
    color: var(--font-color) !important;
}

span.dir-rtl-hide > .icon.fa.fa-chevron-right.fa-fw{
    color: var(--black) !important;
}


.pagelayout-course #page #page-header .header-actions-container .header-action .bulkEnable:hover{
    color: var(--font-color) !important;
    background: var(--secondary) !important;
}

.course-content .topics .section.main .section li.activity .activity-item:hover{
    border-color: var(--secondary) !important;
}


.dropdown-menu .dropdown-item i {
    color: var(--primary) !important;
}


.dropdown-menu .dropdown-item:hover i {
    color: var(--font-color) !important;
}

.course-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    /* padding: 1.1rem !important; */
}

.course-card:hover {
    transform: translateY(-8px);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
}

#id_usertype {
    margin-top: 10px;
}

#id_usertype input {
    margin-right: 5px;
}

.block .card-body .content:not(.activityiconcontainer){
    background: var(--white) !important;
}

#page.drawers .block_myoverview{
    border: none !important;
}

.promoted-courses .promatedcourse-slider .slick-slide .slider-item .course-box .thumb {
    overflow: hidden;
}

.promoted-courses .promatedcourse-slider .slick-slide .slider-item .course-box::before,
.promoted-courses .promatedcourse-slider .slick-slide .slider-item .course-box .thumb::before {
    content: unset;
}

.promoted-courses .promatedcourse-slider .slick-slide .slider-item .course-box .info {
    position: static;
    width: 100%;
    height: 150px !important;
    background: #f0f0f0;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 0 20px 5px 20px;
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 2px solid #e5e5e5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    color: var(--black) !important;
}

.promoted-courses .promatedcourse-slider .slick-slide .slider-item .course-box .info a {
    color: var(--black) !important;
}

.promoted-courses .promatedcourse-slider .slick-slide .slider-item .course-box .info:hover a {
    text-decoration: underline !important;
}

.promoted-courses .promatedcourse-slider .slick-slide .slider-item .course-box .thumb::after {
    background: #fff;
    content: "";
    width: 50px;
    height: 130%;
    left: -115px;
    opacity: .2;
    position: absolute;
    top: -55px;
    z-index: 0;
    transform: rotate(35deg);
    transition: all 2s cubic-bezier(.19,1,.22,1);
}

.promoted-courses .promatedcourse-slider .slick-slide .slider-item .course-box .thumb:hover::after {
    width: 150%;
    height: 180%;
    top: -140px;
    left: -60px;
    z-index: 0;
    transition: all 2s cubic-bezier(.19,1,.22,1);
}

.promoted-courses .promatedcourse-slider .slick-slide .slider-item .course-box .thumb img {
    border-radius: 0;
}

#header .popover-region .popover-region-toggle.nav-link .icon {
    font-weight: bolder;
}

.login-wrapper .login-container {
    max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--primary);
}

.block_faq_list .accordion-header button {
    background: var(--primary);
}

.block_faq_list .accordion-header button .fa {
    color: var(--font-color) !important;
}