@font-face {
    font-display: swap;
    font-family: Circular Std;
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/CircularStd-Bold.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Circular Std;
    font-style: normal;
    font-weight: 500;
    src: url(../fonts/CircularStd-Medium.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Circular Std;
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/CircularStd-Book.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Gelica Light;
    font-style: normal;
    font-weight: 300;
    src: url(../fonts/Gelica-Light.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Gelica Light;
    font-style: italic;
    font-weight: 300;
    src: url(../fonts/Gelica-Light-Italic.woff2) format("woff2")
}

html, body {
    height: 100%;
    background-color: #FBF2EB;
}

/* Padding below the footer and lighter body text */
body {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    padding-top: 0;
    color: #262b39;
    font-family: Circular Std,sans-serif;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}

main {
    flex: 1 0 auto;
}

div.content-container {
    margin-top:0;
    margin-bottom:40px;
}

p {font-size: 1rem;}
p.page-introduction {font-size:1.2rem;}

h2 {
    margin-bottom: 22px;
    font-size: 2.5rem;
    position: relative;
    font-family: Gelica Light,sans-serif;
    line-height: 1.2;
    color: #411F3A;
    letter-spacing: 2px;
    font-weight:900;
    z-index:5;
}

a {
    color: #368df8;
}
a:hover {
    color: #f91a4d;
    text-decoration: none;
}

.btn-link {color: #411F3A;}

hr {height: 11px; background: url("/assets/tenants/klassewerkplek.nl/images/underline.svg") repeat-x top left; border: 0;width: 100%; margin:30px 0px;}
/*.badge {padding:7px;}*/
.badge-warning {color:white;}

/** Default buttons */
.btns{position:relative;font-family:"Circular Std", sans-serif;padding: .375rem .75rem; display:inline-block;border:1px solid transparent;cursor:pointer;text-align:center;border-radius:5px;font-size:1.56rem;text-transform:lowercase;font-weight:700;}
.btns.text{font-family:'Catamaran', sans-serif;font-weight:600;font-size:1.375rem;color:#262b39;padding:0 20px;}
.btns.text svg{margin-left:10px;max-width:25px;}
.btns.text svg .arrowSt0{-moz-transition:all ease-in-out 0.2s;-o-transition:all ease-in-out 0.2s;-webkit-transition:all ease-in-out 0.2s;transition:all ease-in-out 0.2s;}
.btns.text:hover{color:#368df8;}
.btns.text:hover .arrowSt0{fill:#368df8;}
.btns:not(.ghost).white{background:#fff;color:#368df8;}
.btns:not(.ghost).white:hover{background:#f2f2f2;color:#000;}
.btns:not(.ghost).black{background:#000;color:#fff;}
.btns:not(.ghost).black:hover{background:#333;color:#fff;}
.btns:not(.ghost).primary{background:#368df8;color:#fff;}
.btns:not(.ghost).primary:hover{background:#65a5f4;color:#fff;}
.btns:not(.ghost).secondary{background:#f91a4d;color:#fff;}
.btns:not(.ghost).secondary:hover{background:#fa4c74;color:#fff;}
input .btns:not(.ghost).secondary:focus{outline: none;}
.btns.ghost.white{border-color:#fff;color:#fff;}
.btns.ghost.white:hover{background:#fff;color:#000;}
.btns.ghost.black{border-color:#000;color:#000;}
.btns.ghost.black:hover{background:#000;color:#fff;}
.btns.ghost.primary{border-color:#368df8;color:#368df8;}
.btns.ghost.primary:hover{background:#368df8;color:#fff;}
.btns.ghost.secondary{border-color:#f91a4d;color:#f91a4d;}
.btns.ghost.secondary:hover{background:#f91a4d;color:#fff;}
.btns.fw{width:100%;}
.btns.large{min-width:300px;}
.btns.disabled, fieldset:disabled a.btn {pointer-events: none;}
.btns.primary.disabled, .btns.primary:disabled {color: #fff;background-color: #007bff;border-color: #007bff;}
.btns.disabled, .btns:disabled {opacity: .65;}
.btns:focus {outline:0;}

.btns.btn-sm {padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: .2rem;}


.btn-primary {background-color: #FFB800; border-color: transparent; color: #ffffff; font-size: 16px; font-weight: 700;}
.btn-primary:hover { background-color: rgb(204 147 0); color: #ffffff; border-color: transparent;}

.btns {background-color: #FFB800 !important; border-color: transparent; color: #ffffff; font-size: 16px; font-weight: 700;}
.btns:hover { background-color: rgb(204 147 0) !important; color: #ffffff; border-color: transparent;}


/**
Toasts
 */
div.toast {border: 0; box-shadow:none; font-size: .925rem; backdrop-filter:none; border-radius: 0;}


/** Forms */
form div.form-row {margin-bottom:10px;}

.form-control {height: 50px;}
.form-group input, .form-group select {font-size: 1.1rem; padding: 10px 10px;width: 100% !important;max-width: 100%;border: 1px solid #e2e2e2;border-radius: 5px;color: #262b39;}
.form-group input::placeholder {color: #e6e6e6;}
.form-group select {height:70px; font-size: 1.36rem}
.form-group label {font-size: 1.375rem;font-weight: 400; font-family: Gelica Light,sans-serif}

/** Navigation */
.navbar-custom {background-color: #FBF2EB; padding: 1rem;}
.navbar .navbar-nav li.nav-item a.nav-link {color: #000;font-weight: 500;font-size: 1.375rem; font-family: Gelica Light,sans-serif}
.navbar .navbar-nav li.nav-item.current-menu-item {background-color: white; color:#FB404B}

.navbar .navbar-nav.navbar-tabs li {margin-top:10px;  border-top-left-radius: .2rem; border-top-right-radius: .2rem;}
.navbar .navbar-nav.navbar-tabs li a.nav-link {padding: 10px 10px 20px 10px; text-transform: lowercase;}
.navbar .navbar-nav.navbar-tabs li a.nav-link:hover {color:red;  border-top-left-radius: .2rem; border-top-right-radius: .2rem;}



body.super-admin .navbar {background-color:#FB404B;}
body.super-admin .navbar .navbar-nav.navbar-tabs li a.nav-link { color:white;}
body.super-admin .navbar .navbar-nav.navbar-tabs li a.nav-link:hover {background-color: white; color: #FB404B;  }
body.super-admin .navbar .navbar-nav.navbar-tabs li.current-menu-item a.nav-link {color: #FB404B; }

body.super-admin .navbar .navbar-brand {color:white; border: 1px solid white; padding: 3px 12px; border-radius: .25rem}
body.super-admin .navbar .navbar-brand:hover {color: #FB404B;background-color: white;}

div.sub-navigation-container {background-color: white;}
div.sub-navigation-container div.sub-navigation{ padding: 10px 0;}
div.sub-navigation-container div.sub-navigation ul li a{font-weight: bold; font-size: 18px; color: #343a40; text-transform: lowercase; }
div.sub-navigation-container div.sub-navigation ul li a.active {font-weight: bold; font-size: 18px; color: #FB404B;}
div.sub-navigation-container div.sub-navigation ul li a:hover {font-weight: bold;font-size: 18px; color: #FB404B;}



/** Jumbo */
.jumbo-starter {margin-bottom: 20px; padding: 20px 0 20px 0;}
/*.jumbo-starter:before {position: absolute;z-index: 1;content: "";height: 100%;width: 100%;top: 0;left: 0;background-color: rgba(0, 0, 0, 0.5);}*/
/*.jumbo-starter:after {position: absolute;z-index: 2;content: "";height: 100px;width: 100%;bottom: -20px;left: 0;background-image: url('/assets/tenants/klassewerkplek.nl/images/inv-arrow-grey.png');background-size: cover;background-position: bottom center;}*/
/*.jumbo-starter div.banner {padding-bottom:45px;}*/
/*.jumbo-starter h2{z-index: 3; color:white; padding-top:30px;padding-bottom:0px; margin-bottom:0px;}*/
/*.jumbo-starter p{z-index: 4; color:white; position: relative; padding-bottom:10px; }*/

/*----------footer-section-strat----------*/




.footer {
    background-color:#411F3A ;
    color: #ffffff;
    padding: 5rem 0 2rem 0;
}
.footer p, .footer a{
    font-size: 0.9rem;
    color: #ffffff;
}
.footer-content-title{
    font-size: 18px;
    margin-bottom: 15px;
    font-weight: 600;
}
.footer-logo{
    text-align: center;
}
.footer-logo img{
    width: 30%;
}
.footer-social-icon{
    display: inline-block;
    margin-top: 20px;
}
.footer-social-icon ul li{
    float: left;
    margin-right: 15px;
}
.footer-social-icon ul li a{
    color: #ffffff;
    font-size: 18px;
}
.footer-social-icon ul li a:hover{
    color: #FB404B;
}
.footer-about{
    padding-right: 80px;
}
.footer-content{
    margin-bottom: 30px;
}

.footer-list {
    padding: 0;
}
.footer-list-item{
    margin-bottom: 10px;
    list-style-type: none;
}
.footer-list-item i{
    padding-right: 6px;
    color: #FFB800;
    transition: all .2s ease-in-out;
}
.footer-list-item:hover .fas{
    padding-right: 10px!important;
    color: #ffffff;
}
.cpt p {
    font-size: 0.7rem;
    text-align: center;
    color: #ffffff;
}
.copy-right {
    /*background-color: #262B39;*/
    padding: 1rem;
}

@media only screen and (max-width: 992px){

    .footer-content{
        text-align: center;
    }

    .footer-about {
        padding-right:0;
    }

    .footer-logo img {
        width:50%;
    }

}

/*----------footer-section-end----------*/


table.table-kw.dataTable {margin-top: 30px !important;}
table.table-kw > thead > tr > th {padding:0px 0px 30px 0px;}
table.table-kw > thead > tr > th input {padding:8px 15px 8px 15px; float:right; height:100%; max-width: 300px;}
table.table-kw > thead > tr > th {border-top:0px;font-size: 1.375rem;color: #368df8;font-weight: 700;text-transform: lowercase;width: 47%;margin-right: 0;}
table.table-kw tr {}
table.table-kw td {padding:23px 15px;}

table.table-kw td.user {}
table.table-kw td.user .gravatar { float: left; margin-right: 15px; }
table.table-kw td.user a.name {display: block; font-size:20px;}
table.table-kw td span.email {color: #a8b0be; font-size: 15px;display: inline-block; }
table.table-kw td.row-actions .action-label {font-size: 9px; display: inline-block; color: #fff; padding: 2px 6px; border-radius: 2px; margin-bottom: 0; text-align: center; vertical-align: middle;  background-image: none; }
table.table-kw td.row-actions .action-label {background-color:#411F3A; }

table.table-kw td.row-actions {vertical-align: middle;}
table.table-kw td.row-actions { text-align: right; }
table.table-kw td.row-actions ul { margin: 0; padding: 0; }
table.table-kw td.row-actions ul li { display: inline-block; text-transform: uppercase; letter-spacing: 2px; font-weight: 500; color: #d5ddea; font-size: 11px; transition: .2s color; padding: 5px 16px; }
table.table-kw td.row-actions a, .table-action td.row-actions a.icon-action { color: #a0a4ab; }
table.table-kw td.row-actions a:hover, table.table-action td.row-actions a.icon-action:hover {  color: #f91a4d; }

table.table-kw td.row-full {width:100%}
table.table-kw td span.organisation_unit {color: #a8b0be; font-size: 18px;display: inline-block; }

.dashboard-steps {}
.dashboard-steps .step {background-color:rgb(255 226 153); margin:20px;position: relative;text-align: left;padding: 10px;display: block;-moz-transition: all ease-in-out 0.2s;-o-transition: all ease-in-out 0.2s;-webkit-transition: all ease-in-out 0.2stransition: all ease-in-out 0.2s;min-height:250px;}
.dashboard-steps .step .header {min-height:250px;}
.dashboard-steps .step h4{color:rgb(40, 40, 40); font-family:Gelica Light,sans-serif;font-weight:700;text-transform:none;letter-spacing:0;margin-left:100px;text-align:right; font-size: 24px;}
.dashboard-steps .step p{color:rgb(40, 40, 40, 0.75);font-family: Circular Std,sans-serif;line-height:26px;font-size:20px;text-align:right;}
.dashboard-steps .step img.step-number{position:relative;float:left;height:114px;top:-30px;z-index:50;left:-25px;}
.dashboard-steps .step.step-1 img.step-number {transform: rotate(-6deg);}
.dashboard-steps .step.step-2 img.step-number {transform: rotate(9deg);}
.dashboard-steps .step.step-3 img.step-number {transform: rotate(-6deg);}
.dashboard-steps .step .btns {color: rgb(255 255 255);background-color: rgb(255 184 0) !important; border-radius: .5rem; padding: 10px 10px; margin: 10px 0px;}
.dashboard-steps .step .btns:hover {background-color: rgb(204 147 0) !important;}

.dashboard-steps .step.disabled {filter: grayscale(100%);  opacity: 0.75;}
/** Datatables pagination **/

div.dataTables_paginate ul.pagination li { position: relative; display: inline-block; font-family: 'Londrina Solid', sans-serif;
    font-weight: 700;
    font-size: 1.375rem;
    -moz-transition: all ease-in-out 0.2s;
    -o-transition: all ease-in-out 0.2s;
    -webkit-transition: all ease-in-out 0.2s;
    transition: all ease-in-out 0.2s;
    margin-right: 10px;
    margin-top: 30px;
}
div.dataTables_paginate ul.pagination {margin:0 !important; justify-content: center !important;}
div.dataTables_paginate ul.pagination li a { border: none; color: white; background-color: #368df8; border-radius: 5px; padding: .5rem 1rem}
div.dataTables_paginate ul.pagination li a:hover {background-color: #65a5f4;}
div.dataTables_paginate ul.pagination li.active a {background-color: #65a5f4;}

/*
  Respondents survey
 */
div.survey p {font-size:1rem}
div.survey .form-control{height:50px;}
div.survey textarea.form-control {height: 100px;}
div.survey hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(65, 31, 58, 0), rgba(65, 31, 58, 0.1), rgba(65, 31, 58, 0));}
div.survey .w-6 {width: 1.2rem;}

table.survey-table th{border-top: none;}
table.survey-table p {margin:0.3rem 0;}
table table.survey-table th {border-top:0;}

/** Small devices (landscape phones, 576px and up) **/
@media (min-width: 576px) {
    div.survey p {font-size:1rem}
    table.survey-table p {margin:0.5rem 0;}
}

/** Medium devices (tablets, 768px and up) **/
@media (min-width: 768px){
    div.survey p.multiple-choice {margin:0;}
    div.survey p {font-size:1.05rem}
    table.survey-table p {margin:0.5rem 0;}
}

/** Large devices (desktops, 992px and up) **/
@media (min-width: 992px) {
    div.survey p {font-size:1.1rem}
}