/*
|
|----------------------------------------------------------------------------------
|   toastr.min.css
|----------------------------------------------------------------------------------
|
*/
.toast-title{font-weight:700}.toast-message{-ms-word-wrap:break-word;word-wrap:break-word}.toast-message a,.toast-message label{color:#FFF}.toast-message a:hover{color:#CCC;text-decoration:none}.toast-close-button{position:relative;right:-.3em;top:-.3em;float:right;font-size:20px;font-weight:700;color:#FFF;-webkit-text-shadow:0 1px 0 #fff;text-shadow:0 1px 0 #fff;opacity:.8;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);filter:alpha(opacity=80);line-height:1}.toast-close-button:focus,.toast-close-button:hover{color:#000;text-decoration:none;cursor:pointer;opacity:.4;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);filter:alpha(opacity=40)}.rtl .toast-close-button{left:-.3em;float:left;right:.3em}button.toast-close-button{padding:0;cursor:pointer;background:0 0;border:0;-webkit-appearance:none}.toast-top-center{top:0;right:0;width:100%}.toast-bottom-center{bottom:0;right:0;width:100%}.toast-top-full-width{top:0;right:0;width:100%}.toast-bottom-full-width{bottom:0;right:0;width:100%}.toast-top-left{top:12px;left:12px}.toast-top-right{top:12px;right:12px}.toast-bottom-right{right:12px;bottom:12px}.toast-bottom-left{bottom:12px;left:12px}#toast-container{position:fixed;z-index:999999;pointer-events:none}#toast-container *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}#toast-container>div{position:relative;pointer-events:auto;overflow:hidden;margin:0 0 6px;padding:15px 15px 15px 50px;width:300px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-position:15px center;background-repeat:no-repeat;-moz-box-shadow:0 0 12px #999;-webkit-box-shadow:0 0 12px #999;box-shadow:0 0 12px #999;color:#FFF;opacity:.8;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);filter:alpha(opacity=80)}#toast-container>div.rtl{direction:rtl;padding:15px 50px 15px 15px;background-position:right 15px center}#toast-container>div:hover{-moz-box-shadow:0 0 12px #000;-webkit-box-shadow:0 0 12px #000;box-shadow:0 0 12px #000;opacity:1;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);cursor:pointer}#toast-container>.toast-info{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=)!important}#toast-container>.toast-error{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=)!important}#toast-container>.toast-success{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==)!important}#toast-container>.toast-warning{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=)!important}#toast-container.toast-bottom-center>div,#toast-container.toast-top-center>div{width:300px;margin-left:auto;margin-right:auto}#toast-container.toast-bottom-full-width>div,#toast-container.toast-top-full-width>div{width:96%;margin-left:auto;margin-right:auto}.toast{background-color:#030303}.toast-success{background-color:#51A351}.toast-error{background-color:#BD362F}.toast-info{background-color:#2F96B4}.toast-warning{background-color:#F89406}.toast-progress{position:absolute;left:0;bottom:0;height:4px;background-color:#000;opacity:.4;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);filter:alpha(opacity=40)}@media all and (max-width:240px){#toast-container>div{padding:8px 8px 8px 50px;width:11em}#toast-container>div.rtl{padding:8px 50px 8px 8px}#toast-container .toast-close-button{right:-.2em;top:-.2em}#toast-container .rtl .toast-close-button{left:-.2em;right:.2em}}@media all and (min-width:241px) and (max-width:480px){#toast-container>div{padding:8px 8px 8px 50px;width:18em}#toast-container>div.rtl{padding:8px 50px 8px 8px}#toast-container .toast-close-button{right:-.2em;top:-.2em}#toast-container .rtl .toast-close-button{left:-.2em;right:.2em}}@media all and (min-width:481px) and (max-width:768px){#toast-container>div{padding:15px 15px 15px 50px;width:25em}#toast-container>div.rtl{padding:15px 50px 15px 15px}}

.container{
    max-width: 1200px
}

/*
|
|----------------------------------------------------------------------------------
|   Main.css
|----------------------------------------------------------------------------------
|
*/
:root{
    --text-title:  #091935;
    --text-body:   #374151;
    --text-sub:    #6B7280;
    --text-caption: #94A3B8
}
html{
    scroll-behavior: smooth
}
*{
    margin: 0;
    padding: 0
}
body{
    font-family: 'Lato', sans-serif;

    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.4;
}
img {
    width: 100%;
    height: auto;
    user-select: none
}
a{
    color: inherit;
    text-decoration: none
}
h1, h2, h3, h4, h5{
    font-family: 'Playfair Display', serif
}
ul, li{
    list-style: none
}
input::placeholder, textarea::placeholder{
    color: var(--text-caption) !important
}
input, textarea, select{
    font-size:14px !important;
    padding: 12px !important;
    padding-left: 20px !important;
    border: 1px solid #E3E3E3
}
input, select { border-radius: 50px !important }
textarea { border-radius: 16px !important}

button{
    border:0
}
label{
    font-size:14px
}
.fs-10{font-size: 10px !important}
.fs-11{font-size: 11px !important}
.fs-12{font-size: 12px !important}
.fs-13{font-size: 13px !important}
.fs-14{font-size: 14px !important}
.fs-15{font-size: 15px !important}
.fs-16{font-size: 16px !important}
.fs-17{font-size: 17px !important}
.fs-18{font-size: 18px !important}
.fs-19{font-size: 19px !important}
.fs-20{font-size: 20px !important}
.fs-21{font-size: 21px !important}

.text-title, h1, h2, h3, h4, h5, h6{
    color: var(--text-title)
}
.text-body, body{
    color: var(--text-body)
}
.text-sub{
    color: var(--text-sub) !important
}
.text-caption{
    color: var(--text-caption)
}

.bg-gold-2{background: #FBF3E7}

.w-h-16{width: 16px;height: 16px}
.w-h-30{width: 30px;height: 30px}
.w-h-35{width: 35px;height: 35px}
.w-h-40{width: 40px;height: 40px}
.w-h-45{width: 45px;height: 45px}
.w-h-50{width: 50px;height: 50px}
.w-h-55{width: 55px;height: 55px}
.w-h-60{width: 60px;height: 60px}
.w-h-65{width: 65px;height: 65px}

/*
|
|----------------------------------------------------------------------------------
|   Custom buttons
|----------------------------------------------------------------------------------
|
*/
.harts-btn-primary,
.harts-btn-dark,
.harts-btn-light,
.harts-btn-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    border-radius: 50px;
    border: 1px solid transparent;
    transition: all 0.15s ease-out
}
.harts-btn-primary {
    color: #ffffff;
    background: #C38833
}
.harts-btn-primary:hover {
    background: #9c671b
}
.harts-btn-dark {
    color: #ffffff;
    background: #091935
}
.harts-btn-dark:hover {
    background: #183561 
}
.harts-btn-light {
    color: #374151;
    background: #f8f9fa;
    border: 1px solid #e2e8f0
}
.harts-btn-light:hover {
    color: #111827;
    background: #e5e7eb 
}
.harts-btn-white {
    color: #374151;
    background: #ffffff;
    border: 1px solid #e5e7eb
}
.harts-btn-white:hover {
    color: #C38833;
    border-color: #C38833
}

/*
|
|----------------------------------------------------------------------------------
|   Custom Classes
|----------------------------------------------------------------------------------
|
*/
.center{
    display: flex;
    align-items: center;
    justify-content: center
}
.space-between{
    display: flex;
    align-items: center;
    justify-content: space-between
}
.align-center{
    display: flex;
    align-items: center
}
.inline-center{
    display: inline-flex;
	align-items: center;
    justify-content: center
}
.rounded-15{
    border-radius: 15px !important
}
.rounded-50{
    border-radius: 50px !important
}
.rounded-top-15{
    border-radius: 15px 15px 0 0 !important
}

.pt-6{padding-top: 6rem !important}
.pb-6{padding-bottom: 6rem !important}

.py-6{padding-top: 6rem !important; padding-bottom: 6rem !important}
@media (max-width: 992px) {
    .py-6{padding-top: 5rem !important; padding-bottom: 5rem !important}
}

/*
|
|----------------------------------------------------------------------------------
|   Navbar
|----------------------------------------------------------------------------------
|
*/
.offcanvas-backdrop.show{
    z-index: 0
}
.navbar-brand {
  z-index: 1
}

/*
|
|----------------------------------------------------------------------------------
|   Hero
|----------------------------------------------------------------------------------
|
*/
.hero {
    height: calc(100vh - 72px);
    background-image: url('/assets/images/harts.svg');
    background-repeat: no-repeat;
    background-size: 30%
}
.hero p{
    font-family: 'Merriweather', serif
}
@media (max-width: 767px) {
    .hero{
        background-size: 80%
    }
}

/*
|
|----------------------------------------------------------------------------------
|   User form
|----------------------------------------------------------------------------------
|
*/
.user-form-container{
    min-height: 100vh;
    padding: 100px 0 70px 0;
    background-image: linear-gradient(rgb(9 25 53), rgb(9 25 53 / 19%)) !important
}
.user-form {
    width: 420px
}
@media (max-width: 767px) {
    .user-form-container{padding: 50px 0 120px 0}
    .user-form{width: 100%}
}


/*
|
|----------------------------------------------------------------------------------
|   Single Page, Policies
|----------------------------------------------------------------------------------
|
*/
.single-page p {
    margin: 0 0 25px
}
.single-page h2 {
    margin: 40px 0 15px
}
.single-page ul {
    margin: 15px 20px 20px 25px
}
.single-page li {
    margin-bottom: 10px;
}
.single-page hr.hr-repeat {
    margin: 40px 0
}
.single-page a{
    color: #C38833;
    font-weight: 600
}
.single-page ul li {
    list-style: disc;
    line-height: 28px
}
.policies-page ul li{
    list-style: disc;
    line-height: 28px
}
.policies-page a{
    color: #C38833;
    font-weight: 600
}

/*
|
|----------------------------------------------------------------------------------
|   Footer
|----------------------------------------------------------------------------------
|
*/
footer .links h6 {
    opacity: 0.8;
    padding-bottom: 20px;
    color: var(--text-caption);
    border-bottom: 2px solid #22304a
}
footer .links a{
    color: var(--text-caption)
}
footer .links a:hover{
    text-decoration: underline;
    color: var(--bs-primary) !important
}
footer .cefr-badge {
    position: absolute;
    color: #fff;
    top: -15px;
    right: -35px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 100px;
    transform: rotate(15deg);
    box-shadow: 0 4px 12px rgba(91,92,235,.25);
    background: linear-gradient(135deg,#5B5CEB,#7C4DFF)
}

/*
|
|----------------------------------------------------------------------------------
|   English test
|----------------------------------------------------------------------------------
|
*/
p#q-title, p#q-text {
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: -0.0055em
}
.question-blank {
    height: 1.2em;
    margin: 0 .2em;
    min-width: 75px;
    vertical-align: -2px;
    display: inline-block;
    border-bottom: 1.5px solid #091935
}
.cefr-test .custom-option-card {
    cursor: pointer;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease-in-out
}
.cefr-test .custom-option-card:hover {
    background: #f8f9fa
}
.cefr-test .custom-option-card.selected {
    box-shadow: 0px 0 0 1px #091935;
    border: 1px solid #091935 !important
}
.cefr-test .custom-radio-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: relative;
    display: inline-block;
    border: 2px solid #d1d5db
}
.cefr-test .custom-option-card.selected .custom-radio-circle {
    border-color: #091935
}
.cefr-test .custom-option-card.selected .custom-radio-circle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #091935;
    transform: translate(-50%, -50%)
}
.input-group .input-group-text {
    border-radius: 50px 0 0 50px
}
.input-group input {
    border-radius: 0 50px 50px 0 !important
}

/*
|
|----------------------------------------------------------------------------------
|   Hover
|----------------------------------------------------------------------------------
|
*/
.link-hover:hover,
.navbar a.nav-link:hover {
    color: var(--bs-primary) !important
}

a.text-primary:hover,
.single-page a:hover{
    text-decoration: underline
}

@media (max-width: 992px) {
    .sm-text-phone{
        font-size: 10px
    }
    .title-phs{
        font-size: 90% !important
    }
}

i {flex-shrink: 0!important}

/*
|
|----------------------------------------------------------------------------------
|   Student PORTAL
|----------------------------------------------------------------------------------
|
*/
.student-sidebar a{color:#374151;align-items:center!important}
.student-sidebar a i{color:#6b7280}
.student-sidebar a.active i{color:#c38833}
.student-sidebar a.active {
    color: #c38833;
    border-left: 3px solid #c38833
}

/*
|
|----------------------------------------------------------------------------------
|   panel.css (OLD)
|   View course page (student/learn/) 
|----------------------------------------------------------------------------------
|
*/
.course-sidebar{top:75.59px;width:370px;overflow-x:scroll}.course-sidebar::-webkit-scrollbar{width:0}
.course-main{top:95px;width:calc(100% - 390px)}

@media (max-width:991px){
    .course-sidebar, .x-content{width:100%}
    .course-main{width:100%;top:75.59px;position:relative}
    #course-sidebar{left:-100%;transition:.3s ease-in-out}
    #course-sidebar.show-sidebar{left:0;z-index:9999}
}

.header-active-module{margin-bottom:10px;border-radius:40px!important;background:#f3f4f6!important}
.list-group-item-action{margin:3px 0}
.active-lesson{color:#C38833;background:#fbf3e7;border-radius:50px!important}

.course-header{height:400px;text-align:center;background-image:linear-gradient(rgb(255 255 255),rgb(255 255 255 / 97%)),url(/assets/images/cert-city.png)!important;border-radius:25px;background-size:102%;background-position:bottom;background-repeat:no-repeat}
.course-header-row { width: 600px } 

.course-content h1,
.course-content h2,
.course-content h3,
.course-content h4,
.course-content h5,
.course-content h6{margin-top:45px;font-family:'Lato',sans-serif}
.course-content td, .course-content th {padding: 15px}
.course-content blockquote,.course-content li,.course-content p,.course-content table{font-family:'Lato', sans-serif}
.course-content h1{font-size:1.6rem}
.course-content h2{margin-top:35px;padding-top:25px;border-top:1px solid #e4e4e4;font-size:1.4rem}
.course-content h3{font-size:1.2rem}
.course-content h4{font-size:1rem}
.course-content h5,
.course-content h6{font-size:.9rem}
.course-content li{list-style:disc}
.course-content blockquote,pre{background:#f3f4f6}
.course-content blockquote{padding:10px;border-left:4px solid #ddd}
pre{padding:23px 15px;border-radius:15px;border:1px solid #e8e8e8}

.harts-border{
    transition: 0.2s ease-in-out; 
    border:1px solid #e2e8f0 !important
}
a.harts-border:hover{
    border-color: var(--bs-dark) !important;
    box-shadow:0 4px 20px rgba(9,25,53,.08)
}
.accordion-button{border-radius:50px!important}
.accordion-button:not(.collapsed){box-shadow:unset;background:#f3f4f6; color: #222}

.scrollTop.show {opacity: 1 !important;transition: opacity .4s ease}
.dropdown-item.active, .dropdown-item:active {color: var(--bs-primary);background-color: unset}
.hr-repeat { border: 0; height: 1.5px; margin: 2rem 0; background: linear-gradient(to right,transparent,#c8c8c8 15%,#9a9a9a 50%,#c8c8c8 85%,transparent) }

.page-item.active a {
    color: white;
    background: var(--bs-dark)
}

/* Table */
table{width:100%}
table tr:last-child td{ border-bottom:0}
table th {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}
table td, table th{border-bottom: 1px solid #f8f9fa; padding-left: 20px !important}
.harts-table-hover tr:hover td {background: #f8f9fa}

.hp-feat-row{ border-bottom:1px solid #f1f3f5; padding:13px 0}
.hp-feat-row:last-child { border-bottom:none }
.hp-cefr-card{padding:18px 16px; display:block}
.shadow-sm{box-shadow: rgba(0, 0, 0, 0.04) 0px 1px 3px !important}

._3lines-wave-bg{
    background-color: var(--bs-dark);
    background-image: url(/assets/images/3-lines-wave.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right center
}
.hero::after, .cta:after{
    content: "";
    inset: 0;
    position: absolute;
    pointer-events:none;
    background-size:60px 60px;
    mask-image: radial-gradient(circle, #000 35%, transparent 95%)
}
.hero::after{
    background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px)
}

.cta:after {
    z-index: -2;
    background-image: linear-gradient(rgb(0 0 0 / 5%) 1px, transparent 1px), linear-gradient(90deg, rgb(0 0 0 / 5%) 1px, transparent 1px)
}
#loading{display:none;position:fixed;left:50%;top:50%;z-index:999999999999999999;transform:translate(-50%,-50%)}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    background-color: #ffffff !important; 
    transition: background-color 5000s ease-in-out 0s
}

.student-dashboard {
    margin-bottom: 200px !important
}