@font-face {
    font-family: 'Lato';
    src: url("/fonts/lato/regular.woff2") format("woff2");
    font-weight: normal;
}

@font-face {
    font-family: 'Lato';
    src: url("/fonts/lato/bold.woff2") format("woff2");
    font-weight: bold;
}

@font-face {
    font-family: 'Lustria';
    src: url("/fonts/lustria/regular.woff2") format("woff2");
    font-weight: normal;
}


:root {
    --color-primary: #25a3d5;
    --color-secondary: #6B7280;
    --color-success: #2F855A;
    --color-danger: #B3413A;
    --color-warning: #B7791F;
    --color-info: #2C7A9E;
    --color-light: #E9E4D9;
    --color-dark: #2A2F36;

    --color-base: #3A3F44;

    --color-gray: #939598;
    --color-gray-light: #5B6068;
    --color-gray-lighter: #9CA0A6;
    --color-gray-lightest: #F4F1EC;
    --color-gray-dark: #3A3F44;

    --color-blue-light: #EAF1F6;

    --color-card-bg: #F4F1EC;
    --card-border-color-base: #D8D2C4;
    --color-t63-card-bg: #F7F5F0;
    --color-section-striped: #F4F1EC;

    --color-title: #14293F;
    --color-link: #1B3A5C;
    --color-link-hover: #E76F51;
    --color-tooltip: #B3413A;
    --color-emphasis: #8A8D91;
    --color-text-selection: #F0DFAE;

    --color-form-label: #6B7280;
    --color-form-control: #3A3F44;
    --color-form-control-bg: #fff;
    --color-form-control-border: #D9D5CB;
    --color-input-checked: #1B3A5C;
    --color-form-link: #1B3A5C;

    --color-form-error: #A3352E;
    --color-form-error-bg: #fff;
    --color-form-error-border: #E8C9C5;

    --color-close-btn-bg: #6B7280;

    --color-badge-primary-bg: #1B3A5C;
    --color-badge-primary-text: #fff;
    --color-badge-primary-light-bg: #D6E1EA;
    --color-badge-primary-light-text: #14293F;

    --color-badge-secondary-bg: #6B7280;
    --color-badge-secondary-text: #fff;
    --color-badge-secondary-light-bg: #E2E4E7;
    --color-badge-secondary-light-text: #33383E;

    --color-badge-success-bg: #2F855A;
    --color-badge-success-text: #fff;
    --color-badge-success-light-bg: #D2E7DC;
    --color-badge-success-light-text: #1B4C34;

    --color-badge-danger-bg: #B3413A;
    --color-badge-danger-text: #fff;
    --color-badge-danger-light-bg: #F1D8D5;
    --color-badge-danger-light-text: #5C221D;

    --color-badge-warning-bg: #B7791F;
    --color-badge-warning-text: #fff;
    --color-badge-warning-light-bg: #F3E4C4;
    --color-badge-warning-light-text: #5A3B10;

    --color-badge-info-bg: #2C7A9E;
    --color-badge-info-text: #fff;
    --color-badge-info-light-bg: #D3E6ED;
    --color-badge-info-light-text: #163E4F;

    --color-badge-light-bg: #E9E4D9;
    --color-badge-light-text: #14293F;

    --color-badge-dark-bg: #33383E;
    --color-badge-dark-text: #fff;
    --color-badge-dark-light-bg: #C7CBD1;
    --color-badge-dark-light-text: #1C2024;

    --color-badge-purple-bg: #7C5295;
    --color-badge-purple-text: #fff;

    --icon-wrap-circle-bg: var(--color-primary);
    --icon-wrap-circle-border-color: #C9C2B0;
    --icon-wrap-circle-border-radius: 50%;
    --icon-wrap-circle-text-color: #fff;

    --border-radius: 10px;
}




/* ----------- fonts ----------- */
body, input, textarea, button{
    font-family: 'Lato', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.title,
.text-emphasis,
.learning-overview-item .num{
    font-family: 'Lustria', serif;
}

.testimonial-title,
.page-account .page-head .user-container .name,
.notebook-course-sections-list .item .title{
    font-family: 'Lato', sans-serif;
}
/* ----------- /fonts ----------- */




/* ----------- headings ----------- */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Lustria', serif;
    
    color: var(--color-primary) !important;
}
/* ----------- /headings ----------- */




/* ----------- links ----------- */
.link:hover,
.text-wrap a:not(.btn):hover {
    color: var(--color-link-hover);
}
/* ----------- /links ----------- */




/* ==================== layout ==================== */


/* ---------- header ---------- */
.app-header-wrap {
    background-color: #fff;
    box-shadow: 0 1px 0 0 var(--card-border-color-base);
}

.app-header-wrap .logo img {
    height: 45px;
}

@media (min-width: 992px) {
    .app-header-wrap .logo img {
        height: 64px;
    }

    .app-header .sign-wrap a,
    .app-header .user-wrap a,
    .app-header .user-wrap button {
        color: var(--color-gray-light);
    }

    .app-header .user-wrap > button svg path {
        fill: var(--color-gray-light);
    }

    .app-header .user-wrap a:hover,
    .app-header .user-wrap button:hover {
        color: var(--color-primary);
    }

    .app-header .user-wrap > button:hover svg path {
        fill: var(--color-primary);
    }
}

.app-header nav a,
.app-header nav button {
    color: var(--color-primary);
}
.app-header nav li li a {
    color: var(--color-gray-light);
}
.app-header nav a:hover,
.app-header nav a.active,
.app-header nav button:hover {
    color: var(--color-link-hover);
}

.basket-btn > span span {
    background-color: var(--color-warning);
    color: #fff;
}

.app-header .search-wrap > div input {
    background-color: #f5f5f5;
    border: 1px solid #f5f5f5;
    color: #000;
}

.app-header .search-wrap > div input:focus {
    border-color: var(--color-primary);
}

@media (max-width: 1359px) {
    .app-header nav {
        background-color: rgba(255,255,255,0.97);
    }
    .app-header nav .sign-wrap,
    .app-header nav .user-wrap {
        border-bottom-color: var(--color-primary);
    }
}
/* ---------- /header ---------- */


/* ---------- breadcrumbs ---------- */
.breadcrumbs li {
    color: var(--color-gray);
}
.breadcrumbs li a {
    color: var(--color-gray-light);
}
/* ---------- /breadcrumbs ---------- */


/* ---------- page ---------- */
.page-head,
.app-page .t63-page-head:first-child,
.section-striped .section:nth-child(even){
    background-color: var(--color-section-striped);
}
.page-content-head {
    color: var(--color-gray-light);
}
/* ---------- /page ---------- */


/* ---------- footer ---------- */
.app-footer {
    background-color: #14293F;
    color: #fff;
}

.app-footer .logo {
    max-width: 150px;
}
.app-footer .logo img{
    width: 150px;
}

.app-footer .links-wrap-title {
    color: #fff;
}
/* ---------- /footer ---------- */



/* ==================== components ==================== */


/* ---------- buttons ---------- */

/* primary */
.btn-primary,
.btn-primary:focus,
.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* secondary */
.btn-secondary,
.btn-secondary:focus,
.btn-secondary:hover,
.btn-secondary:not(:disabled):not(.disabled):active {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: #fff;
}

/* success */
.btn-success,
.btn-success:focus,
.btn-success:hover,
.btn-success:not(:disabled):not(.disabled):active {
    background-color: var(--color-success);
    border-color: var(--color-success);
    color: #fff;
}

/* danger */
.btn-danger,
.btn-danger:focus,
.btn-danger:hover,
.btn-danger:not(:disabled):not(.disabled):active {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
    color: #fff;
}

/* warning */
.btn-warning,
.btn-warning:focus,
.btn-warning:hover,
.btn-warning:not(:disabled):not(.disabled):active {
    background-color: var(--color-warning);
    border-color: var(--color-warning);
    color: #fff;
}

/* info */
.btn-info,
.btn-info:focus,
.btn-info:hover,
.btn-info:not(:disabled):not(.disabled):active {
    background-color: var(--color-info);
    border-color: var(--color-info);
    color: #fff;
}

/* light */
.btn-light,
.btn-light:focus,
.btn-light:hover,
.btn-light:not(:disabled):not(.disabled):active {
    background-color: var(--color-light);
    border-color: var(--color-light);
    color: #14293F;
}

/* dark */
.btn-dark,
.btn-dark:focus,
.btn-dark:hover,
.btn-dark:not(:disabled):not(.disabled):active {
    background-color: var(--color-dark);
    border-color: var(--color-dark);
    color: #fff;
}
/* ---------- /buttons ---------- */


/* ---------- card ---------- */
.card {
    background-color: var(--color-card-bg);
}
.card-section {
    border-bottom: 1px solid rgba(0,0,0,.1);
}

.card-bg-light{
    background-color: var(--color-t63-card-bg);
}
.card-bg-light .card-header{
    background-color: transparent;
}
/* ---------- /card ---------- */


/* ---------- text-with-img ---------- */
.item-text-with-img .embed-responsive::before {
    background: linear-gradient(to top, rgba(27,58,92,0.75) 0%,rgba(27,58,92,0) 100%);
}
/* ---------- /text-with-img ---------- */


/* ---------- Pricing toggler ---------- */
.pricing-toggler {
    border-color: var(--card-border-color-base);
    background-color: var(--color-card-bg);
}
.pricing-toggler .bg-wrap {
    background-color: #1F3650;
}
.pricing-toggler .text-1.active,
.pricing-toggler .text-2.active {
    color: #fff;
}
.pricing-toggler-wrap p{
    color: var(--color-success);
}
/* ---------- /Pricing toggler ---------- */


/* ---------- box badge ---------- */
.box-badge {
    color: #FFF;
    background: var(--color-primary);
    background: linear-gradient(#3E6690 0%, #1B3A5C 100%);
    box-shadow: 0 2px 10px -5px rgba(0, 0, 0, 0.8);
}

.box-badge-green {
    background: var(--color-success);
    background: linear-gradient(#4CAA79 0%, #2F855A 100%);
}

.box-badge-red {
    background: var(--color-danger);
    background: linear-gradient(#C15E56 0%, #8C332C 100%);
}
/* ---------- /box badge ---------- */



/* ==================== 5. content by pages ==================== */

.testimonial-item,
.catalog-section > .head,
.page-cart .basket-container tbody td,
.credit-cards-container tbody td{
    background-color: var(--color-section-striped);
}

.catalog-item-features-list li .icon {
    background-color: var(--color-primary);
}


/* ---------- course ---------- */
.chapter .head {
    background-color: var(--color-primary);
}
.chapter .head .title {
    color: #fff;
}

.chapter .body li {
    background-color: var(--color-card-bg);
    border-top-color: var(--card-border-color-base);
    border-right-color: var(--card-border-color-base);
}

.chapter .body li::before {
    background-color: #DCD7CB;
    color: var(--color-gray-light);
}

.chapter .body li .progress-wrap::before {
    background-color: var(--card-border-color-base);
}

.chapter .body li .progress-wrap i {
    background-color: var(--card-border-color-base);
    border-color: var(--card-border-color-base);
    color: #fff;
}

.chapter .body li.active .progress-wrap::before,
.chapter .body li.active .progress-wrap i {
    background-color: var(--color-warning);
}

.chapter .body li.active .progress-wrap i {
    border-color: var(--color-warning);
}

.chapter .body li:hover {
    background-color: #fff;
    border-top-color: #EFEAD9;
}

.chapter .body li:hover + li {
    border-top-color: #EFEAD9;
}

.chapter .body li.current:before,
.chapter .body li:hover::before {
    background-color: var(--color-warning);
    color: #fff;
}

.chapter .body li:not(.active):hover .progress-wrap i {
    background-color: #fff;
}
/* ---------- /course ---------- */



/* ==================== t63 components ==================== */


/* ----------- t63 icons ----------- */
.has-circled-icon .t63-icon-wrap{
    background-color: var(--color-primary);
    border-color: var(--icon-wrap-circle-border-color);
}
.has-circled-icon  .t63-icon-wrap i{
    color: #fff;
}
/* ----------- /t63 icons ----------- */


/* ---------- scrollTo nav section ---------- */
.t63-scrollto-nav ul{
    background-color: var(--color-card-bg) !important;
}
.t63-scrollto-nav a{
    color: var(--color-gray-light);
}
/* ---------- /scrollTo nav section ---------- */


/* ---------- img & slider sections ---------- */
.t63-section.img-section .bg-img::before,
.t63-section.slider-section .bg-img::before{
    background: url(/plugins/63bits-pageBuilder/images/intro_slide_gradient.png) bottom repeat-x;
}

.slider-section .slick-slider .slick-dots button{
    background-color: var(--color-gray-lighter);
    border-color: var(--color-gray-lighter);
}
.slider-section .slick-slider .slick-dots button:hover,
.slider-section .slick-slider .slick-dots .slick-active button {
    background-color: var(--color-warning) !important;
    border-color: var(--color-warning) !important;
}
.slider-section .t63-multimedia-container .embed-responsive::after {
    background: url(/plugins/63bits-pageBuilder/images/intro_slide_gradient.png) bottom repeat-x;
}
/* ---------- /img & slider sections ---------- */


/* ---------- images grid ---------- */
.t63-img-grid-section .grid-item .bg-img::before{
    background: url(/plugins/63bits-pageBuilder/images/grid_item_overlay_bg.png) bottom repeat-x;
}
.t63-img-grid-section .grid-item-title,
.t63-section .grid-item-text{
    color: #fff;
}
.t63-img-grid-section .grid-item .overlay{
    background-color: rgba(20,41,63,0.65);
}
/* ---------- /images grid ---------- */


/* ---------- accordion ---------- */
.t63-section .accordion-item{
    background-color: var(--color-t63-card-bg);
}
.t63-section .accordion-item-head::after{
    background-image: url("/images/icons/chevron_blue.svg");
}
.t63-section .accordion-item-head .t63-icon-wrap i,
.t63-section .accordion-item-head .title{
    color: var(--color-primary);
}
/* ---------- /accordion ---------- */


/* ----------- testimonials section ----------- */
.t63-testimonial-item .author-wrap .text,
.t63-testimonial-item .author-wrap .plain-text-input{
    color: var(--color-title);
}
.t63-testimonial-item .description-wrap .text,
.t63-testimonial-item .description-wrap .plain-text-input{
    color: var(--color-base);
}
/* ----------- /testimonials section ----------- */


/* ----------- services section ----------- */
.t63-services-section .grid-item{
    background-color: #fff;
    box-shadow: 0 4px 10px 0 rgba(20,41,63,0.15);
}
.t63-services-section .grid-item .img-container{
    background-color: var(--color-t63-card-bg);
}
.t63-services-section .grid-item .content .text,
.t63-services-section .grid-item .content .plain-text-input{
    color: var(--color-gray-light);
}
/* ----------- /services section ----------- */


/* ----------- card ----------- */
.t63-card-section article{
    background-color: var(--color-t63-card-bg);
}
/* ----------- /card ----------- */


/* ----------- flip card ----------- */
.t63-flip-cards-section .flip-card-item .flip-front {
    background-color: var(--color-t63-card-bg);
}

.t63-flip-cards-section .flip-card-item .flip-back {
    background-color: var(--color-primary);
}
.t63-flip-cards-section .flip-card-item .title{
    color: var(--color-gray-light);
}
.t63-flip-cards-section .flip-card-item [data-media-type="image"] + .title-container .title,
.t63-flip-cards-section .flip-card-item [data-media-type="image"] + .title-container .title *,
.t63-flip-cards-section .flip-card-item .text-wrap{
    color: #fff;
}
.flip-card-item[data-clickable="true"] .flip-front::before{
    background-image: url(/plugins/63bits-pageBuilder/images/icons/rotate.svg);
    background-color: #EFEAD9;
    border-color: var(--card-border-color-base);
}
/* ----------- /flip card ----------- */


/* ----------- packages ----------- */
.t63-packages-grid-section .packages-grid-item{
    background-color: var(--color-t63-card-bg);
}
.t63-packages-grid-section .packages-grid-item .title,
.t63-packages-grid-section .packages-grid-item .text-wrap{
    color: var(--color-gray-light);
}
/* ----------- /packages ----------- */


/* ----------- quote ----------- */
.t63-quote-section article{
    background-color: var(--color-t63-card-bg);
}
.t63-quote-section .fontawesome-icon-container .t63-icon-wrap i{
    color: var(--color-primary);
}

.t63-quote-section .text-wrap{
    color: var(--color-gray-light);
}
/* ----------- /quote ----------- */


/* ----------- evocalendar ----------- */
.t63-section .calendar-sidebar,
.t63-section #eventListToggler,
.t63-section .calendar-sidebar>span#sidebarToggler{
    background-color: var(--color-primary);
    -webkit-box-shadow: 5px 0 18px -3px var(--color-primary);
    box-shadow: 5px 0 18px -3px var(--color-primary);
}

.t63-section .calendar-sidebar>.month-list>.calendar-months>li:hover{
    background-color: #14293F;
}
.t63-section .calendar-sidebar>.month-list>.calendar-months>li.active-month {
    background-color: #0F1F30;
}

.t63-section th[colspan="7"]{
    color: var(--color-primary);
}
.t63-section th[colspan="7"]::after{
    background-color: rgba(27,58,92,.2);
}
.t63-section .event-list>.event-empty{
    background-color: rgba(27,58,92,.15);
    border-color: var(--color-primary);
}
.t63-section .event-list>.event-empty>p{
    color: var(--color-primary);
}
/* ----------- /evocalendar ----------- */
