.site-nav a svg g,.user-nav a svg g,button.btn,.back svg,.btn-ghost svg g,.progress,.download-list a:before{
    -webkit-transition:all 0.1s ease-in-out;
    -moz-transition:all 0.1s ease-in-out;
    -o-transition:all 0.1s ease-in-out;
    transition:all 0.1s ease-in-out
}
*{
    margin:0;
    padding:0;
    box-sizing:border-box
}
html{
    font-size:100%;
    -webkit-tap-highlight-color:rgba(0,0,0,0)
}
nav ul,nav ol{
    list-style:none;
    margin:0;
    padding:0;
    border:0
}
body{
    font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background:#FDFBF4;
    line-height:1.3;
    color:#444
}
a{
    text-decoration:none;
    -webkit-transition:all 0.15s ease-in-out;
    -moz-transition:all 0.15s ease-in-out;
    -o-transition:all 0.15s ease-in-out;
    transition:all 0.15s ease-in-out;
    color:#444
}
a:hover,a:focus{
    color:#5D38DB
}
h1{
    font-weight:700;
    color:#5D38DB;
    font-size:1.5rem
}
h1 span{
    color:#15054D;
    font-weight:500
}
h2{
    font-size:1.375rem;
    font-weight:700;
    color:#5D38DB
}
.white-bg{
    background:#fff
}
.cream-bg{
    background:#FDFBF4
}
.border-t{
    border-top:1px solid #ddd
}
.border-b{
    border-bottom:1px solid #ddd
}
.site-header{
position: fixed;
width:100%;
    background:#15054D;
    color:#fff
}
.site-header a{
    color:#fff;
    display:flex;
    align-items:center;
    line-height:1
}
.site-header a span{
    margin-left:8px
}
.site-header .container{
    display:flex;
    justify-content:space-between
}
.header-left,.site-nav ul,.user-nav ul,.logo{
    display:flex;
    align-items:center
}
.user-nav a{
    font-size:0.875rem
}
.site-nav a,.user-nav a{
    height:50px
}
.site-nav a span,.user-nav a span{
    opacity:0.9
}
.site-nav a:hover svg g,.site-nav a:focus svg g,.user-nav a:hover svg g,.user-nav a:focus svg g{
    fill:#B988E8
}
.site-nav a:hover span,.site-nav a:focus span,.user-nav a:hover span,.user-nav a:focus span{
    opacity:1
}
.site-nav a{
    padding-left:1.25rem;
    padding-right:1.25rem;
    border-right:1px solid #321C80
}
.site-nav a:hover{
    background:#1C0960
}
.logo a{
    height:50px;
    padding-right:25px;
    border-right:1px solid #321C80
}
.user-nav a{
    margin-left:25px
}
.current-page a,.current-page a:hover,.current-page a:focus{
    background:#fff;
    color:#15054D
}
.current-page a svg g,.current-page a:hover svg g,.current-page a:focus svg g{
    fill:#8954BA
}
.container{
    max-width:94%;
    min-width:1240px;
    margin:0 auto;
    padding:0 30px
}
.login-wrapper{
    background-image:radial-gradient(circle at 83% 100%, #8954BA 0%, #5D38DB 97%);
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    padding:50px
}
.login-panel{
    background:#FFFFFF;
    box-shadow:-10px 9px 22px 0 rgba(0,0,0,0.2);
    border-radius:5px;
    color:#444;
    padding:50px;
    min-width:500px
}
.login-graphic,.login-logo{
    text-align:center
}
.login-logo{
    margin:2.5rem 0
}
.strapline{
    display:block;
    font-size:0.875rem;
    font-weight:500;
    color:#15054D;
    margin-top:0.25rem
}
.login-field{
    margin-bottom:1.5rem
}
.login-field label{
    display:block;
    font-size:0.875rem;
    color:#8954BA
}
.login-form input[type=text],input[type=password]{
    width:100%;
    padding:0.375rem 0;
    display:inline-block;
    border:0;
    border-bottom:1px solid #8954BA;
    font-size:1rem;
    color:#444
}
.login-footer{
    margin-top:2rem;
    display:flex;
    justify-content:flex-end
}
button.btn{
    border:0;
    cursor:pointer
}
.login-help{
    margin-top:2rem;
    color:#fff;
    font-weight:500;
    font-size:0.875rem
}
.login-help p{
    display:flex;
    align-items:center
}
.login-help span{
    margin-right:0.5rem
}
.login-help a{
    color:#fff;
    border-bottom:1px solid transparent
}
.login-help a:hover,.login-help a:focus{
    border-color:#fff
}
.page-header{
    background:#fff;
    border-bottom:1px solid #ddd;
    padding-top:30px;
    padding-bottom:30px
}
.page-header-content{
    display:flex;
    justify-content:space-between;
    align-items:center
}
.page-header-content header{
    width:50%
}
.section-intro{
    width:60%
}
.section-intro p{
    margin-top:1rem
}
header.training-log h1{
    margin:0.75rem 0
}
.badge{
    display:inline-block;
    text-transform:uppercase;
    color:#8954BA;
    border-bottom:2px solid #8954BA;
    font-weight:700;
    font-size:0.6875em;
    margin-bottom:0
}
.back{
    font-size:0.75em;
    font-weight:500;
    display:inline-flex;
    align-items:center;
    color:#686868
}
.back span{
    display:block;
    margin-left:0.25rem
}
.back:hover,.back:focus{
    color:#444
}
.back:hover svg,.back:focus svg{
    transform:translateX(-2px)
}
.btn{
    display:inline-flex;
    align-items:center;
    background:#5D38DB;
    color:#fff;
    font-weight:bold;
    font-size:0.875em;
    border-radius:3px;
    padding:14px 20px;
    box-shadow:0px 0px 8px rgba(0,0,0,0)
}
.btn+.btn{
    margin-left:0.5rem !important
}
.btn span{
    margin-right:0.675em
}
.btn:hover,.btn:focus{
    background:#6C45EE;
    box-shadow:0px 3px 8px rgba(0,0,0,0.2);
    transform:translateY(-2px);
    color:#fff
}
.btn.full-width{
    display:block;
    text-align:center
}
.btn-ghost{
    background:#fff;
    color:#5D38DB;
    border:1px solid #5D38DB
}
.btn-ghost svg g{
    fill:#5D38DB
}
.btn-ghost:hover,.btn-ghost:focus{
    color:#fff;
    background:#5D38DB
}
.btn-ghost:hover svg g,.btn-ghost:focus svg g{
    fill:#fff
}
.main-content{
    margin:30px 0
}
.matrix-content{
    padding:0;
    max-width:100%;
    overflow:auto
}
.matrix-content .main-content{
    margin:0
}
.matrix-content .tabulator{
    margin:0;
    height:calc(100vh - 200px) !important
}
.cream-wrapper{
    background:#FDFBF4;
    border-top:1px solid #ddd
}
.floating-content{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:70%;
    margin:auto;
    padding-top:80px;
    padding-bottom:80px
}
.floating-content p{
    font-size:1.125rem;
    font-weight:500
}
.floating-content h1{
    margin-bottom:0.5rem
}
.floating-content .btn{
    margin:1rem 0
}
.floating-content .helper{
    font-size:0.75rem;
    font-weight:400
}
.floating-content .helper a{
    color:#8954BA;
    border-bottom:1px solid #8954BA
}
.floating-content .helper a:hover,.floating-content .helper a:focus{
    color:#5D38DB;
    border-color:#5D38DB
}
.floating-content .left-content{
    padding-right:6rem
}
.floating-content.shallow{
    padding-top:0.8rem;
    padding-bottom:0.8rem
}
.register-content{
    display:flex;
    justify-content:space-between
}
.upload-table{
    width:70%
}
.process-content{
    width:calc(30% - 30px)
}
.process-content-panel{
    background:#fff;
    border-radius:5px;
    border:1px solid #ddd
}
.process-content-panel .content-panel{
    padding:30px
}
.process-content-panel h2{
    margin-bottom:0.5rem
}
.process-content-panel p{
    margin-bottom:0.75rem
}
.process-content-panel ul{
    list-style:none;
    font-size:0.875rem;
    font-weight:700;
    line-height:1.2rem
}
.process-content-panel ul a{
    color:#5D38DB
}
.process-content-panel ul a:hover,.process-content-panel ul a:focus{
    color:#15054D
}
.process-content-panel .btn{
    margin-top:1rem
}
.process-content-panel .dark-bg{
    border-top-left-radius:5px;
    border-top-right-radius:5px
}
.prev-results{
    width:70%;
    margin:auto;
    padding-top:50px;
    padding-bottom:50px
}
.prev-results h2{
    margin-bottom:1rem
}
.dark-bg{
    background:#15054D;
    color:#fff
}
.dark-bg h1,.dark-bg h2,.dark-bg h3{
    color:#fff
}
.upload-progress{
    background:#8954BA;
    color:#fff;
    padding:0.75rem 1.25rem;
    border-radius:4px;
    margin-top:1rem
}
.progress-header{
    display:flex;
    align-items:center;
    font-weight:500;
    font-size:0.75rem
}
.progress-header p{
    line-height:1;
    margin:0 0 0 0.5rem
}
.progress-header span{
    font-weight:700;
    display:block;
    font-size:0.875rem
}
.upload-progress .progress-bar{
    background:#15054D;
    height:4px;
    border-radius:2px;
    margin-top:0.75rem
}
.upload-progress .progress-bar .progress{
    display:block;
    height:4px;
    background:#fff;
    border-radius:2px
}
.progress-bar{
    background-color:#5D38DB !important
}
.load-icon{
    animation-name:spin;
    animation-duration:800ms;
    animation-iteration-count:infinite;
    animation-timing-function:linear
}
@keyframes spin{
    from{
        transform:rotate(0deg)
    }
    to{
        transform:rotate(360deg)
    }
}
.results-header h1{
    margin:0
}
.results-panel{
    border:1px solid #ddd;
    font-size:0.75rem;
    text-transform:uppercase;
    text-align:center;
    font-weight:bold;
    border-radius:5px;
    padding:2rem 0
}
.results-panel .btn{
    display:flex;
    justify-content:center;
    text-transform:none;
    font-size:0.875rem;
    margin:2rem 0 0 0;
    text-align:center
}
.results-panel .result-number{
    display:block;
    font-size:2.25rem;
    font-weight:200
}
.results-stats{
    display:flex;
    align-items:center;
    justify-content:center
}
.results-stats div{
    padding:2.25rem 3.5rem
}
.results-success span{
    color:#6DB50D
}
.results-failed{
    border-left:1px solid #ddd
}
.results-failed span{
    color:#D12D2D
}
.search-container{
    width:65%;
    position:relative
}
.search-container:before{
    display:inline-block;
    content:"";
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    left:1rem;
    z-index:2;
    background:url(/static/search.svg) no-repeat center center;
    width:19px;
    height:18px
}
#searchInput{
    width:100%;
    padding:1rem 1rem 1rem 2.75rem;
    border:1px solid #ddd;
    border-radius:3px;
    font-size:1rem;
    box-shadow:inset gray 2px 2px 8px -6px
}
#searchInput:focus{
    outline:2px solid #5D38DB
}
.profile-img{
    line-height:0;
    text-align:center;
    position:relative;
    float:right
}
.profile-img img{
    display:block;
    border:1px solid #ddd;
    width:140px;
    height:140px;
    border-radius:100%
}
.profile-wrapper{
    padding-bottom:0.5rem
}
.profile-wrapper hr{
    margin:0
}
.profile-card-header{
    background:#FDFBF4;
    border-bottom:1px solid #ddd;
    padding:30px 50px 20px 50px
}
.profile-card-header h1{
    font-size:2.125rem;
    line-height:1.2;
    margin-bottom:0.25rem
}
.profile-card-header h4{
    text-transform:uppercase;
    color:#15054D;
    font-size:0.875rem;
    font-weight:700
}
.profile-section{
    margin:30px 0 20px 0
}
.profile-section .columns{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    margin:1.5rem 0
}
.profile-section .columns span{
    color:#8954BA;
    font-size:0.75rem;
    display:block;
    text-transform:uppercase;
    font-weight:700
}
ul.profile-details{
    list-style:none;
    margin:20px 0 0 0
}
ul.profile-details li{
    margin-bottom:10px
}
ul.profile-details span{
    display:block;
    color:#8954BA;
    font-weight:700;
    font-size:0.75rem;
    text-transform:uppercase
}
.profile-list{
    padding:2rem 0 1.5rem 0
}
.profile-list h2{
    font-size:1.25rem
}
.profile-list ul{
    list-style:none
}
.profile-list li{
    border-top:1px solid #ddd;
    padding:0.75rem 0
}
.profile-list li:first-child{
    border:0
}
.profile-list h2{
    margin-bottom:0.75rem
}
.profile-list strong{
    font-weight:700;
    color:#15054D
}
.profile-list li{
    position:relative;
    padding-right:100px
}
.profile-list span{
    position:absolute;
    right:0;
    top:1rem;
    font-size:0.75rem;
    color:#686868
}
.tab{
    overflow:hidden;
    display:inline-flex
}
.tab,.tabcontent{
    padding:0 50px
}
.tab button{
    outline:none;
    cursor:pointer;
    transition:0.3s;
    background:#fff;
    border:0;
    padding:0 0 0.125rem 0;
    margin-right:1rem;
    font-size:1rem;
    font-weight:700;
    color:#444;
    border-bottom:2px solid transparent
}
.tab button:hover{
    color:#5D38DB
}
.tab button.active{
    color:#5D38DB;
    border-color:#5D38DB
}
.tabcontent{
    display:none
}
.tabcontent{
    animation:fadeEffect 1s
}
@keyframes fadeEffect{
    from{
        opacity:0
    }
    to{
        opacity:1
    }
}
.site-footer{
    background:#FFFFFF;
    box-shadow:0 0 20px 0 rgba(0,0,0,0.1);
    border-top:1px solid #ddd;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:2
}
.site-footer a{
    color:#686868;
    margin-left:1em;
    border-bottom:1px solid #fff
}
.site-footer a:hover,.site-footer a:focus{
    border-color:#686868
}
.site-footer-content{
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#686868;
    padding:1em 0;
    font-size:0.75em
}
.site-footer-content p{
    margin:0
}
.fancybox__content{
    padding:0 !important
}
.fancybox__iframe,.fancybox__content{
    border-radius:5px !important
}
.popup{
    background:#fff
}
.popup p{
    font-weight:500
}
.popup-header{
    background:#FDFBF4;
    border-bottom:1px solid #ddd;
    padding:1.5rem 50px;
    display:flex;
    align-items:center;
    position:sticky;
    top:0;
    z-index:2
}
.popup-header span{
    display:block;
    font-weight:500;
    font-size:1.25rem
}
.popup-header h2{
    line-height:1.1;
    margin-bottom:0.5rem
}
.popup-body{
    padding:1.5rem 50px
}
.popup-body p{
    font-size:0.875rem
}
.download-list{
    list-style:none;
    font-size:0.875rem
}
.download-list li{
    border-top:1px solid #ddd;
    padding:0.5rem 0
}
.download-list li:first-child{
    border:0
}
.download-list a{
    display:block;
    color:#444;
    transform:translateX(-20px)
}
.download-list a:hover,.download-list a:focus{
    color:#5D38DB;
    transform:translateX(0)
}
.download-list a:hover:before,.download-list a:focus:before{
    opacity:1
}
.download-list a:before{
    content:"";
    display:inline-block;
    background:url(/static/download.svg) no-repeat center;
    width:13px;
    height:16px;
    transform:translateY(2px);
    margin-right:7px;
    opacity:0
}
.download-list .download-all{
    font-weight:700;
    color:#444;
    transform:translateX(0)
}
.download-list .download-all:before{
    opacity:1
}
hr{
    border:0;
    height:1px;
    background:#ddd;
    margin:1.5rem -50px 2rem -50px
}
.popup-footer{
    display:flex;
    justify-content:flex-end;
    padding:0 50px 30px 50px
}
.upload-panel{
    background:#F8F8F8;
    border:1px solid #ddd;
    border-radius:5px;
    padding:30px;
    margin-top:1.5rem
}
.upload-for{
    padding-bottom:1rem;
    margin-bottom:1rem;
    border-bottom:1px solid #ddd
}
.upload-for span{
    display:block;
    font-weight:700;
    color:#8954BA;
    font-size:1rem
}
.download-for{
    padding-bottom:0.5rem
}
.download-for span{
    display:block;
    font-weight:700;
    color:#8954BA;
    font-size:1rem
}
.file-select p{
    margin-bottom:1rem
}
.file-select .btn{
    background:#686868
}
.file-select .btn:hover,.file-select .btn:focus{
    background:#444
}
.close-btn{
    font-size:0.875rem;
    color:#D12D2D
}
.tabulator{
    font-size:16px;
    margin-top:0
}
.tabulator-row.tabulator-selectable:hover{
    background:#F8F8F8 !important
}
@media (hover: hover) and (pointer: fine){
    .tabulator-row.tabulator-selectable:hover{
        background-color:#F8F8F8 !important;
        cursor:default
    }
    .tabulator-row.tabulator-selectable:hover a{
        cursor:pointer
    }
}
.tabulator .tabulator-header{
    color:#5D38DB
}
#example-table-theme{
    height:auto !important
}
.tabulator-cell a,.tabulator-cell a:visited{
    color:#444
}
.tabulator-cell a:hover,.tabulator-cell a:focus{
    color:#5D38DB
}
.tabulator-cell a.btn,.tabulator-cell a.btn:hover,.tabulator-cell a.btn:focus,.tabulator-cell a.btn:visited{
    color:#fff
}
span.text-link{
    display:block;
    font-size:0.75rem;
    color:#8954BA
}
span.text-link:hover,span.text-link:focus{
    color:#5D38DB
}
.tabulator .tabulator-tableholder .tabulator-table{
    color:#444
}
.download-btn{
    display:inline-flex;
    align-items:center;
    color:#686868
}
.download-btn:before{
    content:"";
    display:inline-block;
    background:url(/static/download.svg) no-repeat center center;
    width:13px;
    height:16px;
    margin-right:0.25rem
}
.download-btn:hover,.download-btn:focus{
    color:#5D38DB
}
:root{
    --f-spinner-width: 36px;
    --f-spinner-height: 36px;
    --f-spinner-color-1: rgba(0, 0, 0, 0.1);
    --f-spinner-color-2: rgba(17, 24, 28, 0.8);
    --f-spinner-stroke: 2.75
}
.f-spinner{
    margin:auto;
    padding:0;
    width:var(--f-spinner-width);
    height:var(--f-spinner-height)
}
.f-spinner svg{
    width:100%;
    height:100%;
    vertical-align:top;
    animation:f-spinner-rotate 2s linear infinite
}
.f-spinner svg *{
    stroke-width:var(--f-spinner-stroke);
    fill:none
}
.f-spinner svg *:first-child{
    stroke:var(--f-spinner-color-1)
}
.f-spinner svg *:last-child{
    stroke:var(--f-spinner-color-2);
    animation:f-spinner-dash 2s ease-in-out infinite
}
@keyframes f-spinner-rotate{
    100%{
        transform:rotate(360deg)
    }
}
@keyframes f-spinner-dash{
    0%{
        stroke-dasharray:1,150;
        stroke-dashoffset:0
    }
    50%{
        stroke-dasharray:90,150;
        stroke-dashoffset:-35
    }
    100%{
        stroke-dasharray:90,150;
        stroke-dashoffset:-124
    }
}
.f-throwOutUp{
    animation:var(--f-throw-out-duration, 0.175s) ease-out both f-throwOutUp
}
.f-throwOutDown{
    animation:var(--f-throw-out-duration, 0.175s) ease-out both f-throwOutDown
}
@keyframes f-throwOutUp{
    to{
        transform:translate3d(0, calc(var(--f-throw-out-distance, 150px) * -1), 0);
        opacity:0
    }
}
@keyframes f-throwOutDown{
    to{
        transform:translate3d(0, var(--f-throw-out-distance, 150px), 0);
        opacity:0
    }
}
.f-zoomInUp{
    animation:var(--f-transition-duration, 0.2s) ease 0.1s both f-zoomInUp
}
.f-zoomOutDown{
    animation:var(--f-transition-duration, 0.2s) ease both f-zoomOutDown
}
@keyframes f-zoomInUp{
    from{
        transform:scale(0.975) translate3d(0, 16px, 0);
        opacity:0
    }
    to{
        transform:scale(1) translate3d(0, 0, 0);
        opacity:1
    }
}
@keyframes f-zoomOutDown{
    to{
        transform:scale(0.975) translate3d(0, 16px, 0);
        opacity:0
    }
}
.f-fadeIn{
    animation:var(--f-transition-duration, 0.2s) var(--f-transition-easing, ease) var(--f-transition-delay, 0s) both f-fadeIn;
    z-index:2
}
.f-fadeOut{
    animation:var(--f-transition-duration, 0.2s) var(--f-transition-easing, ease) var(--f-transition-delay, 0s) both f-fadeOut;
    z-index:1
}
@keyframes f-fadeIn{
    0%{
        opacity:0
    }
    100%{
        opacity:1
    }
}
@keyframes f-fadeOut{
    100%{
        opacity:0
    }
}
.f-fadeFastIn{
    animation:var(--f-transition-duration, 0.2s) ease-out both f-fadeFastIn;
    z-index:2
}
.f-fadeFastOut{
    animation:var(--f-transition-duration, 0.1s) ease-out both f-fadeFastOut;
    z-index:2
}
@keyframes f-fadeFastIn{
    0%{
        opacity:.75
    }
    100%{
        opacity:1
    }
}
@keyframes f-fadeFastOut{
    100%{
        opacity:0
    }
}
.f-fadeSlowIn{
    animation:var(--f-transition-duration, 0.5s) ease both f-fadeSlowIn;
    z-index:2
}
.f-fadeSlowOut{
    animation:var(--f-transition-duration, 0.5s) ease both f-fadeSlowOut;
    z-index:1
}
@keyframes f-fadeSlowIn{
    0%{
        opacity:0
    }
    100%{
        opacity:1
    }
}
@keyframes f-fadeSlowOut{
    100%{
        opacity:0
    }
}
.f-crossfadeIn{
    animation:var(--f-transition-duration, 0.2s) ease-out both f-crossfadeIn;
    z-index:2
}
.f-crossfadeOut{
    animation:calc(var(--f-transition-duration, 0.2s)*.5) linear 0.1s both f-crossfadeOut;
    z-index:1
}
@keyframes f-crossfadeIn{
    0%{
        opacity:0
    }
    100%{
        opacity:1
    }
}
@keyframes f-crossfadeOut{
    100%{
        opacity:0
    }
}
.f-slideIn.from-next{
    animation:var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-slideInNext
}
.f-slideIn.from-prev{
    animation:var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-slideInPrev
}
.f-slideOut.to-next{
    animation:var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-slideOutNext
}
.f-slideOut.to-prev{
    animation:var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-slideOutPrev
}
@keyframes f-slideInPrev{
    0%{
        transform:translateX(100%)
    }
    100%{
        transform:translate3d(0, 0, 0)
    }
}
@keyframes f-slideInNext{
    0%{
        transform:translateX(-100%)
    }
    100%{
        transform:translate3d(0, 0, 0)
    }
}
@keyframes f-slideOutNext{
    100%{
        transform:translateX(-100%)
    }
}
@keyframes f-slideOutPrev{
    100%{
        transform:translateX(100%)
    }
}
.f-classicIn.from-next{
    animation:var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-classicInNext;
    z-index:2
}
.f-classicIn.from-prev{
    animation:var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-classicInPrev;
    z-index:2
}
.f-classicOut.to-next{
    animation:var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-classicOutNext;
    z-index:1
}
.f-classicOut.to-prev{
    animation:var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-classicOutPrev;
    z-index:1
}
@keyframes f-classicInNext{
    0%{
        transform:translateX(-75px);
        opacity:0
    }
    100%{
        transform:translate3d(0, 0, 0);
        opacity:1
    }
}
@keyframes f-classicInPrev{
    0%{
        transform:translateX(75px);
        opacity:0
    }
    100%{
        transform:translate3d(0, 0, 0);
        opacity:1
    }
}
@keyframes f-classicOutNext{
    100%{
        transform:translateX(-75px);
        opacity:0
    }
}
@keyframes f-classicOutPrev{
    100%{
        transform:translateX(75px);
        opacity:0
    }
}
:root{
    --f-button-width: 40px;
    --f-button-height: 40px;
    --f-button-border: 0;
    --f-button-border-radius: 0;
    --f-button-color: #374151;
    --f-button-bg: #f8f8f8;
    --f-button-hover-bg: #e0e0e0;
    --f-button-active-bg: #d0d0d0;
    --f-button-shadow: none;
    --f-button-transition: all 0.15s ease;
    --f-button-transform: none;
    --f-button-svg-width: 20px;
    --f-button-svg-height: 20px;
    --f-button-svg-stroke-width: 1.5;
    --f-button-svg-fill: none;
    --f-button-svg-filter: none;
    --f-button-svg-disabled-opacity: 0.65
}
.f-button{
    display:flex;
    justify-content:center;
    align-items:center;
    box-sizing:content-box;
    position:relative;
    margin:0;
    padding:0;
    width:var(--f-button-width);
    height:var(--f-button-height);
    border:var(--f-button-border);
    border-radius:var(--f-button-border-radius);
    color:var(--f-button-color);
    background:var(--f-button-bg);
    box-shadow:var(--f-button-shadow);
    pointer-events:all;
    cursor:pointer;
    transition:var(--f-button-transition)
}
@media (hover: hover){
    .f-button:hover:not([disabled]){
        color:var(--f-button-hover-color);
        background-color:var(--f-button-hover-bg)
    }
}
.f-button:active:not([disabled]){
    background-color:var(--f-button-active-bg)
}
.f-button:focus:not(:focus-visible){
    outline:none
}
.f-button:focus-visible{
    outline:none;
    box-shadow:inset 0 0 0 var(--f-button-outline, 2px) var(--f-button-outline-color, var(--f-button-color))
}
.f-button svg{
    width:var(--f-button-svg-width);
    height:var(--f-button-svg-height);
    fill:var(--f-button-svg-fill);
    stroke:currentColor;
    stroke-width:var(--f-button-svg-stroke-width);
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:opacity .15s ease;
    transform:var(--f-button-transform);
    filter:var(--f-button-svg-filter);
    pointer-events:none
}
.f-button[disabled]{
    cursor:default
}
.f-button[disabled] svg{
    opacity:var(--f-button-svg-disabled-opacity)
}
.f-carousel__nav .f-button.is-prev,.f-carousel__nav .f-button.is-next,.fancybox__nav .f-button.is-prev,.fancybox__nav .f-button.is-next{
    position:absolute;
    z-index:1
}
.is-horizontal .f-carousel__nav .f-button.is-prev,.is-horizontal .f-carousel__nav .f-button.is-next,.is-horizontal .fancybox__nav .f-button.is-prev,.is-horizontal .fancybox__nav .f-button.is-next{
    top:50%;
    transform:translateY(-50%)
}
.is-horizontal .f-carousel__nav .f-button.is-prev,.is-horizontal .fancybox__nav .f-button.is-prev{
    left:var(--f-button-prev-pos)
}
.is-horizontal .f-carousel__nav .f-button.is-next,.is-horizontal .fancybox__nav .f-button.is-next{
    right:var(--f-button-next-pos)
}
.is-horizontal.is-rtl .f-carousel__nav .f-button.is-prev,.is-horizontal.is-rtl .fancybox__nav .f-button.is-prev{
    left:auto;
    right:var(--f-button-next-pos)
}
.is-horizontal.is-rtl .f-carousel__nav .f-button.is-next,.is-horizontal.is-rtl .fancybox__nav .f-button.is-next{
    right:auto;
    left:var(--f-button-prev-pos)
}
.is-vertical .f-carousel__nav .f-button.is-prev,.is-vertical .f-carousel__nav .f-button.is-next,.is-vertical .fancybox__nav .f-button.is-prev,.is-vertical .fancybox__nav .f-button.is-next{
    top:auto;
    left:50%;
    transform:translateX(-50%)
}
.is-vertical .f-carousel__nav .f-button.is-prev,.is-vertical .fancybox__nav .f-button.is-prev{
    top:var(--f-button-next-pos)
}
.is-vertical .f-carousel__nav .f-button.is-next,.is-vertical .fancybox__nav .f-button.is-next{
    bottom:var(--f-button-next-pos)
}
.is-vertical .f-carousel__nav .f-button.is-prev svg,.is-vertical .f-carousel__nav .f-button.is-next svg,.is-vertical .fancybox__nav .f-button.is-prev svg,.is-vertical .fancybox__nav .f-button.is-next svg{
    transform:rotate(90deg)
}
.f-carousel__nav .f-button:disabled,.fancybox__nav .f-button:disabled{
    pointer-events:none
}
html.with-fancybox{
    width:auto;
    overflow:visible;
    scroll-behavior:auto
}
html.with-fancybox body{
    touch-action:none
}
html.with-fancybox body.hide-scrollbar{
    width:auto;
    margin-right:calc(var(--fancybox-body-margin, 0px) + var(--fancybox-scrollbar-compensate, 0px));
    overflow:hidden !important;
    overscroll-behavior-y:none
}
.fancybox__container{
    --fancybox-color: #dbdbdb;
    --fancybox-hover-color: #fff;
    --fancybox-bg: rgba(24, 24, 27, 0.98);
    --fancybox-slide-gap: 10px;
    --f-spinner-width: 50px;
    --f-spinner-height: 50px;
    --f-spinner-color-1: rgba(255, 255, 255, 0.1);
    --f-spinner-color-2: #bbb;
    --f-spinner-stroke: 3.65;
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    direction:ltr;
    display:flex;
    flex-direction:column;
    box-sizing:border-box;
    margin:0;
    padding:0;
    color:#f8f8f8;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    overflow:visible;
    z-index:var(--fancybox-zIndex, 1050);
    outline:none;
    transform-origin:top left;
    -webkit-text-size-adjust:100%;
    -moz-text-size-adjust:none;
    -ms-text-size-adjust:100%;
    text-size-adjust:100%;
    overscroll-behavior-y:contain
}
.fancybox__container *,.fancybox__container *::before,.fancybox__container *::after{
    box-sizing:inherit
}
.fancybox__container::backdrop{
    background-color:rgba(0,0,0,0)
}
.fancybox__backdrop{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    z-index:-1;
    background:var(--fancybox-bg);
    opacity:var(--fancybox-opacity, 1);
    will-change:opacity
}
.fancybox__carousel{
    position:relative;
    box-sizing:border-box;
    flex:1;
    min-height:0;
    z-index:10;
    overflow-y:visible;
    overflow-x:clip
}
.fancybox__viewport{
    width:100%;
    height:100%
}
.fancybox__viewport.is-draggable{
    cursor:move;
    cursor:grab
}
.fancybox__viewport.is-dragging{
    cursor:move;
    cursor:grabbing
}
.fancybox__track{
    display:flex;
    margin:0 auto;
    height:100%
}
.fancybox__slide{
    flex:0 0 auto;
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    height:100%;
    margin:0 var(--fancybox-slide-gap) 0 0;
    padding:4px;
    overflow:auto;
    overscroll-behavior:contain;
    transform:translate3d(0, 0, 0);
    backface-visibility:hidden
}
.fancybox__container:not(.is-compact) .fancybox__slide.has-close-btn{
    padding-top:40px
}
.fancybox__slide.has-iframe,.fancybox__slide.has-video,.fancybox__slide.has-html5video{
    overflow:hidden
}
.fancybox__slide.has-image{
    overflow:hidden
}
.fancybox__slide.has-image.is-animating,.fancybox__slide.has-image.is-selected{
    overflow:visible
}
.fancybox__slide::before,.fancybox__slide::after{
    content:"";
    flex:0 0 0;
    margin:auto
}
.fancybox__backdrop:empty,.fancybox__viewport:empty,.fancybox__track:empty,.fancybox__slide:empty{
    display:block
}
.fancybox__content{
    align-self:center;
    display:flex;
    flex-direction:column;
    position:relative;
    margin:0;
    padding:2rem;
    max-width:100%;
    color:var(--fancybox-content-color, #374151);
    background:var(--fancybox-content-bg, #fff);
    cursor:default;
    border-radius:0;
    z-index:20
}
.is-loading .fancybox__content{
    opacity:0
}
.is-draggable .fancybox__content{
    cursor:move;
    cursor:grab
}
.can-zoom_in .fancybox__content{
    cursor:zoom-in
}
.can-zoom_out .fancybox__content{
    cursor:zoom-out
}
.is-dragging .fancybox__content{
    cursor:move;
    cursor:grabbing
}
.fancybox__content [data-selectable],.fancybox__content [contenteditable]{
    cursor:auto
}
.fancybox__slide.has-image>.fancybox__content{
    padding:0;
    background:rgba(0,0,0,0);
    min-height:1px;
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center center;
    transition:none;
    transform:translate3d(0, 0, 0);
    backface-visibility:hidden
}
.fancybox__slide.has-image>.fancybox__content>picture>img{
    width:100%;
    height:auto;
    max-height:100%
}
.is-animating .fancybox__content,.is-dragging .fancybox__content{
    will-change:transform,width,height
}
.fancybox-image{
    margin:auto;
    display:block;
    width:100%;
    height:100%;
    min-height:0;
    object-fit:contain;
    user-select:none;
    filter:blur(0px)
}
.fancybox__caption{
    align-self:center;
    max-width:100%;
    flex-shrink:0;
    margin:0;
    padding:14px 0 4px 0;
    overflow-wrap:anywhere;
    line-height:1.375;
    color:var(--fancybox-color, currentColor);
    opacity:var(--fancybox-opacity, 1);
    cursor:auto;
    visibility:visible
}
.is-loading .fancybox__caption,.is-closing .fancybox__caption{
    opacity:0;
    visibility:hidden
}
.is-compact .fancybox__caption{
    padding-bottom:0
}
.f-button.is-close-btn{
    --f-button-svg-stroke-width: 2;
    position:absolute;
    top:0;
    right:8px;
    z-index:40
}
.fancybox__content>.f-button.is-close-btn{
    --f-button-width: 34px;
    --f-button-height: 34px;
    --f-button-border-radius: 4px;
    --f-button-color: var(--fancybox-color, #fff);
    --f-button-hover-color: var(--fancybox-color, #fff);
    --f-button-bg: transparent;
    --f-button-hover-bg: transparent;
    --f-button-active-bg: transparent;
    --f-button-svg-width: 22px;
    --f-button-svg-height: 22px;
    position:absolute;
    top:-38px;
    right:0;
    opacity:.75
}
.is-loading .fancybox__content>.f-button.is-close-btn{
    visibility:hidden
}
.is-zooming-out .fancybox__content>.f-button.is-close-btn{
    visibility:hidden
}
.fancybox__content>.f-button.is-close-btn:hover{
    opacity:1
}
.fancybox__footer{
    padding:0;
    margin:0;
    position:relative
}
.fancybox__footer .fancybox__caption{
    width:100%;
    padding:24px;
    opacity:var(--fancybox-opacity, 1);
    transition:all .25s ease
}
.is-compact .fancybox__footer{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    z-index:20;
    background:rgba(24,24,27,0.5)
}
.is-compact .fancybox__footer .fancybox__caption{
    padding:12px
}
.is-compact .fancybox__content>.f-button.is-close-btn{
    --f-button-border-radius: 50%;
    --f-button-color: #fff;
    --f-button-hover-color: #fff;
    --f-button-outline-color: #000;
    --f-button-bg: rgba(0, 0, 0, 0.6);
    --f-button-active-bg: rgba(0, 0, 0, 0.6);
    --f-button-hover-bg: rgba(0, 0, 0, 0.6);
    --f-button-svg-width: 18px;
    --f-button-svg-height: 18px;
    --f-button-svg-filter: none;
    top:5px;
    right:5px
}
.fancybox__nav{
    --f-button-width: 50px;
    --f-button-height: 50px;
    --f-button-border: 0;
    --f-button-border-radius: 50%;
    --f-button-color: var(--fancybox-color);
    --f-button-hover-color: var(--fancybox-hover-color);
    --f-button-bg: transparent;
    --f-button-hover-bg: rgba(24, 24, 27, 0.3);
    --f-button-active-bg: rgba(24, 24, 27, 0.5);
    --f-button-shadow: none;
    --f-button-transition: all 0.15s ease;
    --f-button-transform: none;
    --f-button-svg-width: 26px;
    --f-button-svg-height: 26px;
    --f-button-svg-stroke-width: 2.5;
    --f-button-svg-fill: none;
    --f-button-svg-filter: drop-shadow(1px 1px 1px rgba(24, 24, 27, 0.5));
    --f-button-svg-disabled-opacity: 0.65;
    --f-button-next-pos: 1rem;
    --f-button-prev-pos: 1rem;
    opacity:var(--fancybox-opacity, 1)
}
.fancybox__nav .f-button:before{
    position:absolute;
    content:"";
    top:-30px;
    right:-20px;
    left:-20px;
    bottom:-30px;
    z-index:1
}
.is-idle .fancybox__nav{
    animation:.15s ease-out both f-fadeOut
}
.is-idle.is-compact .fancybox__footer{
    pointer-events:none;
    animation:.15s ease-out both f-fadeOut
}
.fancybox__slide>.f-spinner{
    position:absolute;
    top:50%;
    left:50%;
    margin:var(--f-spinner-top, calc(var(--f-spinner-width) * -0.5)) 0 0 var(--f-spinner-left, calc(var(--f-spinner-height) * -0.5));
    z-index:30;
    cursor:pointer
}
.fancybox-protected{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:40;
    user-select:none
}
.fancybox-ghost{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    min-height:0;
    object-fit:contain;
    z-index:40;
    user-select:none;
    pointer-events:none
}
.fancybox-focus-guard{
    outline:none;
    opacity:0;
    position:fixed;
    pointer-events:none
}
.fancybox__container:not([aria-hidden]){
    opacity:0
}
.fancybox__container.is-animated[aria-hidden=false]>*:not(.fancybox__backdrop):not(.fancybox__carousel),.fancybox__container.is-animated[aria-hidden=false] .fancybox__carousel>*:not(.fancybox__viewport),.fancybox__container.is-animated[aria-hidden=false] .fancybox__slide>*:not(.fancybox__content){
    animation:var(--f-interface-enter-duration, 0.25s) ease 0.1s backwards f-fadeIn
}
.fancybox__container.is-animated[aria-hidden=false] .fancybox__backdrop{
    animation:var(--f-backdrop-enter-duration, 0.35s) ease backwards f-fadeIn
}
.fancybox__container.is-animated[aria-hidden=true]>*:not(.fancybox__backdrop):not(.fancybox__carousel),.fancybox__container.is-animated[aria-hidden=true] .fancybox__carousel>*:not(.fancybox__viewport),.fancybox__container.is-animated[aria-hidden=true] .fancybox__slide>*:not(.fancybox__content){
    animation:var(--f-interface-exit-duration, 0.15s) ease forwards f-fadeOut
}
.fancybox__container.is-animated[aria-hidden=true] .fancybox__backdrop{
    animation:var(--f-backdrop-exit-duration, 0.35s) ease forwards f-fadeOut
}
.has-iframe .fancybox__content,.has-map .fancybox__content,.has-pdf .fancybox__content,.has-youtube .fancybox__content,.has-vimeo .fancybox__content,.has-html5video .fancybox__content{
    max-width:100%;
    flex-shrink:1;
    min-height:1px;
    overflow:visible
}
.has-iframe .fancybox__content,.has-map .fancybox__content,.has-pdf .fancybox__content{
    width:calc(100% - 120px);
    height:90%
}
.fancybox__container.is-compact .has-iframe .fancybox__content,.fancybox__container.is-compact .has-map .fancybox__content,.fancybox__container.is-compact .has-pdf .fancybox__content{
    width:100%;
    height:100%
}
.has-youtube .fancybox__content,.has-vimeo .fancybox__content,.has-html5video .fancybox__content{
    width:960px;
    height:540px;
    max-width:100%;
    max-height:100%
}
.has-map .fancybox__content,.has-pdf .fancybox__content,.has-youtube .fancybox__content,.has-vimeo .fancybox__content,.has-html5video .fancybox__content{
    padding:0;
    background:rgba(24,24,27,0.9);
    color:#fff
}
.has-map .fancybox__content{
    background:#e5e3df
}
.fancybox__html5video,.fancybox__iframe{
    border:0;
    display:block;
    height:100%;
    width:100%;
    background:rgba(0,0,0,0)
}
.fancybox-placeholder{
    border:0 !important;
    clip:rect(1px, 1px, 1px, 1px) !important;
    -webkit-clip-path:inset(50%) !important;
    clip-path:inset(50%) !important;
    height:1px !important;
    margin:-1px !important;
    overflow:hidden !important;
    padding:0 !important;
    position:absolute !important;
    width:1px !important;
    white-space:nowrap !important
}
.f-carousel__thumbs{
    --f-thumb-width: 96px;
    --f-thumb-height: 72px;
    --f-thumb-outline: 0;
    --f-thumb-outline-color: #5eb0ef;
    --f-thumb-opacity: 1;
    --f-thumb-hover-opacity: 1;
    --f-thumb-selected-opacity: 1;
    --f-thumb-border-radius: 2px;
    --f-thumb-offset: 0px;
    --f-button-next-pos: 0;
    --f-button-prev-pos: 0
}
.f-carousel__thumbs.is-classic{
    --f-thumb-gap: 8px;
    --f-thumb-opacity: 0.5;
    --f-thumb-hover-opacity: 1;
    --f-thumb-selected-opacity: 1
}
.f-carousel__thumbs.is-modern{
    --f-thumb-gap: 4px;
    --f-thumb-extra-gap: 16px;
    --f-thumb-clip-width: 46px
}
.f-thumbs{
    position:relative;
    flex:0 0 auto;
    margin:0;
    overflow:hidden;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    user-select:none;
    perspective:1000px;
    transform:translateZ(0)
}
.f-thumbs .f-spinner{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border-radius:2px;
    background-image:linear-gradient(#ebeff2, #e2e8f0);
    z-index:-1
}
.f-thumbs .f-spinner svg{
    display:none
}
.f-thumbs.is-vertical{
    height:100%
}
.f-thumbs__viewport{
    width:100%;
    height:auto;
    overflow:hidden;
    transform:translate3d(0, 0, 0)
}
.f-thumbs__track{
    display:flex
}
.f-thumbs__slide{
    position:relative;
    flex:0 0 auto;
    box-sizing:content-box;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    margin:0;
    width:var(--f-thumb-width);
    height:var(--f-thumb-height);
    overflow:visible;
    cursor:pointer
}
.f-thumbs__slide.is-loading img{
    opacity:0
}
.is-classic .f-thumbs__viewport{
    height:100%
}
.is-modern .f-thumbs__track{
    width:max-content
}
.is-modern .f-thumbs__track::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:calc((var(--f-thumb-clip-width, 0))*-0.5);
    width:calc(var(--width, 0)*1px + var(--f-thumb-clip-width, 0));
    cursor:pointer
}
.is-modern .f-thumbs__slide{
    width:var(--f-thumb-clip-width);
    transform:translate3d(calc(var(--shift, 0) * -1px), 0, 0);
    transition:none;
    pointer-events:none
}
.is-modern.is-resting .f-thumbs__slide{
    transition:transform .33s ease
}
.is-modern.is-resting .f-thumbs__slide__button{
    transition:clip-path .33s ease
}
.is-using-tab .is-modern .f-thumbs__slide:focus-within{
    filter:drop-shadow(-1px 0px 0px var(--f-thumb-outline-color)) drop-shadow(2px 0px 0px var(--f-thumb-outline-color)) drop-shadow(0px -1px 0px var(--f-thumb-outline-color)) drop-shadow(0px 2px 0px var(--f-thumb-outline-color))
}
.f-thumbs__slide__button{
    appearance:none;
    width:var(--f-thumb-width);
    height:100%;
    margin:0 -100% 0 -100%;
    padding:0;
    border:0;
    position:relative;
    border-radius:var(--f-thumb-border-radius);
    overflow:hidden;
    background:rgba(0,0,0,0);
    outline:none;
    cursor:pointer;
    pointer-events:auto;
    touch-action:manipulation;
    opacity:var(--f-thumb-opacity);
    transition:opacity .2s ease
}
.f-thumbs__slide__button:hover{
    opacity:var(--f-thumb-hover-opacity)
}
.f-thumbs__slide__button:focus:not(:focus-visible){
    outline:none
}
.f-thumbs__slide__button:focus-visible{
    outline:none;
    opacity:var(--f-thumb-selected-opacity)
}
.is-modern .f-thumbs__slide__button{
    --clip-path: inset( 0 calc( ((var(--f-thumb-width, 0) - var(--f-thumb-clip-width, 0))) * (1 - var(--progress, 0)) * 0.5 ) round var(--f-thumb-border-radius, 0) );
    clip-path:var(--clip-path)
}
.is-classic .is-nav-selected .f-thumbs__slide__button{
    opacity:var(--f-thumb-selected-opacity)
}
.is-classic .is-nav-selected .f-thumbs__slide__button::after{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:auto;
    bottom:0;
    border:var(--f-thumb-outline, 0) solid var(--f-thumb-outline-color, transparent);
    border-radius:var(--f-thumb-border-radius);
    animation:f-fadeIn .2s ease-out;
    z-index:10
}
.f-thumbs__slide__img{
    overflow:hidden;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    width:100%;
    height:100%;
    margin:0;
    padding:var(--f-thumb-offset);
    box-sizing:border-box;
    pointer-events:none;
    object-fit:cover;
    border-radius:var(--f-thumb-border-radius)
}
.f-thumbs.is-horizontal .f-thumbs__track{
    padding:8px 0 12px 0
}
.f-thumbs.is-horizontal .f-thumbs__slide{
    margin:0 var(--f-thumb-gap) 0 0
}
.f-thumbs.is-vertical .f-thumbs__track{
    flex-wrap:wrap;
    padding:0 8px
}
.f-thumbs.is-vertical .f-thumbs__slide{
    margin:0 0 var(--f-thumb-gap) 0
}
.fancybox__thumbs{
    --f-thumb-width: 96px;
    --f-thumb-height: 72px;
    --f-thumb-border-radius: 2px;
    --f-thumb-outline: 2px;
    --f-thumb-outline-color: #ededed;
    position:relative;
    opacity:var(--fancybox-opacity, 1);
    transition:max-height 0.35s cubic-bezier(0.23, 1, 0.32, 1)
}
.fancybox__thumbs.is-classic{
    --f-thumb-gap: 8px;
    --f-thumb-opacity: 0.5;
    --f-thumb-hover-opacity: 1
}
.fancybox__thumbs.is-classic .f-spinner{
    background-image:linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.05))
}
.fancybox__thumbs.is-modern{
    --f-thumb-gap: 4px;
    --f-thumb-extra-gap: 16px;
    --f-thumb-clip-width: 46px;
    --f-thumb-opacity: 1;
    --f-thumb-hover-opacity: 1
}
.fancybox__thumbs.is-modern .f-spinner{
    background-image:linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.05))
}
.fancybox__thumbs.is-horizontal{
    padding:0 var(--f-thumb-gap)
}
.fancybox__thumbs.is-vertical{
    padding:var(--f-thumb-gap) 0
}
.is-compact .fancybox__thumbs{
    --f-thumb-width: 64px;
    --f-thumb-clip-width: 32px;
    --f-thumb-height: 48px;
    --f-thumb-extra-gap: 10px
}
.fancybox__thumbs.is-masked{
    max-height:0px !important
}
.is-closing .fancybox__thumbs{
    transition:none !important
}
.fancybox__toolbar{
    --f-progress-color: var(--fancybox-color, rgba(255, 255, 255, 0.94));
    --f-button-width: 46px;
    --f-button-height: 46px;
    --f-button-color: var(--fancybox-color);
    --f-button-hover-color: var(--fancybox-hover-color);
    --f-button-bg: rgba(24, 24, 27, 0.65);
    --f-button-hover-bg: rgba(70, 70, 73, 0.65);
    --f-button-active-bg: rgba(90, 90, 93, 0.65);
    --f-button-border-radius: 0;
    --f-button-svg-width: 24px;
    --f-button-svg-height: 24px;
    --f-button-svg-stroke-width: 1.5;
    --f-button-svg-filter: drop-shadow(1px 1px 1px rgba(24, 24, 27, 0.15));
    --f-button-svg-fill: none;
    --f-button-svg-disabled-opacity: 0.65;
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    margin:0;
    padding:0;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI Adjusted","Segoe UI","Liberation Sans",sans-serif;
    color:var(--fancybox-color, currentColor);
    opacity:var(--fancybox-opacity, 1);
    text-shadow:var(--fancybox-toolbar-text-shadow, 1px 1px 1px rgba(0,0,0,0.5));
    pointer-events:none;
    z-index:20
}
.fancybox__toolbar :focus-visible{
    z-index:1
}
.fancybox__toolbar.is-absolute,.is-compact .fancybox__toolbar{
    position:absolute;
    top:0;
    left:0;
    right:0
}
.is-idle .fancybox__toolbar{
    pointer-events:none;
    animation:.15s ease-out both f-fadeOut
}
.fancybox__toolbar__column{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-content:flex-start
}
.fancybox__toolbar__column.is-left,.fancybox__toolbar__column.is-right{
    flex-grow:1;
    flex-basis:0
}
.fancybox__toolbar__column.is-right{
    display:flex;
    justify-content:flex-end;
    flex-wrap:nowrap
}
.fancybox__infobar{
    padding:0 5px;
    line-height:var(--f-button-height);
    text-align:center;
    font-size:17px;
    font-variant-numeric:tabular-nums;
    -webkit-font-smoothing:subpixel-antialiased;
    cursor:default;
    user-select:none
}
.fancybox__infobar span{
    padding:0 5px
}
.fancybox__infobar:not(:first-child):not(:last-child){
    background:var(--f-button-bg)
}
[data-fancybox-toggle-slideshow]{
    position:relative
}
[data-fancybox-toggle-slideshow] .f-progress{
    height:100%;
    opacity:.3
}
[data-fancybox-toggle-slideshow] svg g:first-child{
    display:flex
}
[data-fancybox-toggle-slideshow] svg g:last-child{
    display:none
}
.has-slideshow [data-fancybox-toggle-slideshow] svg g:first-child{
    display:none
}
.has-slideshow [data-fancybox-toggle-slideshow] svg g:last-child{
    display:flex
}
[data-fancybox-toggle-fullscreen] svg g:first-child{
    display:flex
}
[data-fancybox-toggle-fullscreen] svg g:last-child{
    display:none
}
:fullscreen [data-fancybox-toggle-fullscreen] svg g:first-child{
    display:none
}
:fullscreen [data-fancybox-toggle-fullscreen] svg g:last-child{
    display:flex
}
.f-progress{
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:3px;
    transform:scaleX(0);
    transform-origin:0;
    transition-property:transform;
    transition-timing-function:linear;
    background:var(--f-progress-color, var(--f-carousel-theme-color, #0091ff));
    z-index:30;
    user-select:none;
    pointer-events:none
}
.grid-container {
  display: grid;
  grid-template-columns: 50% 50%;
  background-color: #AAA4B8;
  column-gap: 10px;
  padding: 20px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
.alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}

        .card-container {
            display: flex;
            flex-direction: column;
            gap: 30px;
            max-width: 75%;
            margin: 20px auto;
        }

        .card-row {
            display: flex;
            gap: 10px;
        }
        
        .card {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            background-color: #fff2e6;
            border-radius: 77px;
            box-shadow: 0 6px 6px rgba(0, 0, 0, 0.1);
            padding: 40px 10px;
            transition: transform 0.2s ease-in-out;
            flex-grow: 1;
        }

        .learners-card {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: #e1f5fe;
            border-radius: 77px;
            padding: 40px 20px;
            box-shadow: 0 6px 6px rgba(0, 0, 0, 0.1);
            width: 120px;
	    height: 120px;
        }
        
        .card:hover {
            transform: translateY(-5px);
        }
        
        .thumbnail {
	    margin-left: 50px;
            width: 130px;
            height: 130px;
            border-radius: 10px;
            background-color: #ddd;
            object-fit: cover;
        }
        
        .card-text {
            margin-left: 50px;
	    margin-right: 15px;
            font-size: 16px;
            color: #333;
        }
        
        .label {
            font-size: 12px;
            color: #7f8c8d;
            margin-bottom: 5px;
        }
        
        .random-number {
            font-size: 20px;
            font-weight: bold;
            color: #2c3e50;
        }





.progress-cards-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 800px;
    gap: 20px;
}

.progress-course-card {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: row;
    padding: 20px;
    width: 100%;
}

.progress-card-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}

.progress-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    width: 100%;
}

.progress-course-description {
    color: #666;
    font-size: 16px;
    margin-bottom: 15px;
}

.progress-buttons-container {
    display: flex;
    gap: 10px;
}.progress-cards-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 800px;
    gap: 20px;
}

.progress-course-card {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: row;
    padding: 20px;
    width: 100%;
}

.progress-card-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}

.progress-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    width: 100%;
}

.progress-course-description {
    color: #666;
    font-size: 16px;
    margin-bottom: 15px;
}

.progress-buttons-container {
    display: flex;
    gap: 10px;
}

.progress-send-reminder {
    background-color: #4caf50;
    color: white;
}

.progress-revoke {
    background-color: #f44336;
    color: white;
}

.progress-reset-progress {
    background-color: #2196F3;
    color: white;
}

.progress-stage-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.progress-stage {
    border-radius: 10px;
    padding: 10px;
    width: 30%;
    background-color: #f9f9f9;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    text-align: center;
}

.progress-stage.completed {
    background-color: #e0ffe0;
}

.progress-stage.in-progress {
    background-color: #fff2cc;
}

.progress-stage.upcoming {
    background-color: #e0f0ff;
}

.progress-stage h3 {
    font-size: 16px;
    margin-bottom: 5px;
}

.progress-progress-bar {
    background-color: #e0e0e0;
    border-radius: 10px;
    height: 8px;
    margin-top: 10px;
    overflow: hidden;
    position: relative;
}

.progress-progress {
    background-color: #4caf50;
    height: 100%;
    width: 60%; /* Set width dynamically based on progress percentage */
    transition: width 0.5s ease-out;
}

.progress-send-reminder {
    background-color: #4caf50;
    color: white;
}

.progress-revoke {
    background-color: #f44336;
    color: white;
}

.progress-reset-progress {
    background-color: #2196F3;
    color: white;
}

.progress-stage-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.progress-stage {
    border-radius: 10px;
    padding: 10px;
    width: 30%;
    background-color: #f9f9f9;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    text-align: center;
}

.progress-stage.completed {
    background-color: #e0ffe0;
}

.progress-stage.in-progress {
    background-color: #fff2cc;
}

.progress-stage.upcoming {
    background-color: #e0f0ff;
}

.progress-stage h3 {
    font-size: 16px;
    margin-bottom: 5px;
}

        .progress-progress-bar {
            background-color: #e0e0e0;
            border-radius: 10px;
            height: 8px;
            margin-top: 10px;
            overflow: hidden;
            position: relative;
        }

        .progress-progress {
            background-color: #4caf50;
            height: 100%;
            width: 0%; /* Default width will be 0%, this will be dynamically set via JS */
            transition: width 1s ease-out;
        }

.notification {
    position: fixed;
    top: 90%;
    right: 10px;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border-radius: 5px;
    z-index: 1000;
    transition: opacity 0.5s ease-out;
    max-width: 300px; /* Limit the width */
    word-wrap: break-word; /* Ensure long words break onto a new line */
}

.hidden {
    display: none;
}

.fade-out {
    opacity: 0;
}