@import url('https://use.typekit.net/aru8kte.css');

:root {
  --red: #E81A3B;
  --charcoal: #333333;
  --slate: #5B6E7F;
  --burgandy: #98002E;
  --paleCharcoal: #E7E7E7;
  --gold: #D67900;
  --jade: #009966;
  --ocean: #008FD2;
  --cobalt: #0062B8;
  --highlight: #FEE1E5;
  --hover: #C70C2E;
  --disabled: #DADBE0;
  --component: #CCCCCC;
  --icons: #AAAAAA;
  --good: #54A575; 
  --attention: #FF5722; 
  --danger: #98002E;
  --text: #333333;
  --secondaryText: #767676;
  --whiteText: #FFFFFF;
  --white: #FFFFFF;
  --background: #f7f6f7;
  --font: 'Proxima Nova', sans-serif;
}


* {
  box-sizing: border-box;
  color: var(--charcoal) !important;
}

h1{
    font-weight: 500;
}

h2{
    font-weight: 500;
}

h3{
    font-weight: 500 !important;
    font-size: 24px !important; 
}

li {
  list-style-type: '►';
  padding-inline-start: 1ch;
}
li::marker{
    color: var(--red) !important;
}

.text-secondary{
    color: var(--secondaryText) !important;
}

.text-success {
    color: var(--good) !important;
}

.text-danger {
    color: var(--danger) !important;
}

.answer-item > label:after {
    background-color: var(--red) !important;
}

body{
  color: var(--charcoal) !important;
  font-family: var(--font) !important;
  line-height: 1.5;
  background-color: var(--background);
  overflow-x: hidden;
  height: 100vh;
  margin: 0;
  padding: 0 !important;
}

.row{
    margin: 0 !important;
}

.body-container-msi{
    padding: 0 !important;
    margin: 0 !important;
}

.article-msi{
    padding: 0 !important;
    margin: 0 !important;
    column-gap: 0 !important;
    --bs-gutter-x: none;
}


#dynamicReloadContainer{
    display: flex;
    padding: 10vh 12vw 5vh 12vw;
    min-height: 100vh;
    background-image: url("../files/Triangle_pattern_light.png");
    background-attachment: fixed;
    background-repeat: repeat;
    background-size: cover;
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    #dynamicReloadContainer{
        width: 100vw;
        padding: 20vh 5vw 5vh 5vw;
    }
}

/* (900px and down) */
@media only screen and (max-width: 900px) {
    .sideimg-container{
        visibility: hidden;
    }
    #dynamicReloadContainer{
        width: 100vw;
    }
}
/* (tabelts, 1080px and down) */
@media only screen and (max-width: 1080px) {
    #dynamicReloadContainer{
        padding: 10vh 5vw 5vh 5vw;
    }
    .sidelist-containter{
        position: relative !important;
        Width: Auto !important;
        border: none !important;
        top: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        background: none !important;
    }
}



.sideimg-container {
    background-image: url("../files/poweredby.png");
}

.sideimg-container{
    position: fixed;
    height: 100vh !important;
    right: 0;
    background-position: right;
    background-size: cover;
    overflow: hidden;
}


.sideimg-container img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%;
    position: fixed;
}


.sideimg-container:before {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.4));
}

/*.sideimg-container:after {*/
/*    content: "";*/
/*    position: fixed;*/
/*    background-repeat: no-repeat;*/
/*    bottom: 0;*/
/*    right: 0;*/
/*    height: 210px;*/
/*    width: 300px;*/
/*    background-image: url("../files/Cornorstone.png");*/
/*}*/

/* ------------Welcome-page------------ */

#dynamicReloadContainer:has(.survey-welcome) { 
    background-image: url("../files/welcome-bg.png") !important;
}
#dynamicReloadContainer:has(.survey-welcome) .top-container{ 
    display: none !important;
}
#dynamicReloadContainer:has(.survey-welcome) .outerframe{ 
    padding: 0 !important;
    background-color: transparent !important;
}

/* ------sidelist------ */

.sidelist-containter{
    position: absolute;
    top: 16vh;
    /*transform: translateY(-50%);*/
    z-index: 999;
    right: 0px;
    background-color: var(--white);
    padding: 24px 6vw 40px 32px;
    width: 40vw;
    border-left: 8px solid var(--red);
    transition: all 0.3s ease;
    box-shadow: 0 8px 16px -10px rgba(0,0,0,0.32);
}

.sidelist-containter h2{
    margin-bottom: 40px;
    transition: all 0.3s ease;
}

.sidelist-containter p {
    margin-top: 24px;
    font-size: 16px !important;
}

.at-tab {
  display: none;
}

.at-tab {
    font-size: 16px !important;
    margin: 0 16px 16px 16px !important;
}

.at-title {
  cursor: pointer;
  position: relative;
}

.at-title:after {
  content: "+";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  transition: all 0.3s ease;
  font-size: 18px;
  font-weight: 500;
  color: var(--icon) !important;
}

.at-title.active:after {
  content: "+";
  line-height: 0 !important;
  transform: rotate(45deg);
    color: var(--red) !important;
}

.at-title.active h2 {
  color: var(--red) !important;
}

.at-item {
    border-bottom: 1px solid var(--paleCharcoal);
}

.at-item:first-child {
    border-top: 1px solid var(--paleCharcoal);
}

.at-title h2 {
    font-size: 18px;
    font-weight: 400;
    padding-left: 16px;
    margin: 16px 0 !important;
}

.at-title h2:hover {
  color: var(--red) !important;
  transition: all 0.3s ease;
}


/* ------------Modal------------ */


.modal-content {
    padding: 24px 48px !important;
}
.modal-header {
    border: none !important;
}

.modal-body{
    font-size: 16px;
    font-weight: 400;
}

.modal-footer {
    border-top: none !important;
    display: contents;
}

/* ------------Navigatie------------ */
.navbar{
    border: none !important;
    box-shadow: 0 8px 16px -10px rgba(0,0,0,0.32);
}
.navbar .container-fluid{
    background-color: var(--white) !important;
    padding: 12px 32px;
    display: flex;
    justify-content: flex-start;
    list-style-type: none !important;
}

.navbar .container-fluid li{
    list-style-type: none !important;
}
.navbar .container-fluid-upper{
    padding: 8px 0;
}
.navbar-brand{
    min-height: auto;
}

.logo-container{
    line-height: 24px !important;
}
.logo-container>img{
    height: 24px;
    padding: 0;
    display: inline-block;
}
.navbar-brand-surveytitle {
    float: left;
    font-size: 16px;
    font-weight: 500;
    display: inline-block;
}
.navbar-brand-surveytitle p {
     margin: 0;
     display: inline-block;
}
.navbar .pt-2{
    padding: 0 !important;
}
a.nav-link {
    color: var(--charcoal)!important;
    padding: 0;
    list-style-type: none !important;
}
a.nav-linkt span:before{
    color: var(--red);
}

a.nav-link:hover {
    color: var(--red)!important;
    border: none !important;
}

.nav-item:after {
    display: none !important;
}

.dropdown-toggle::after{
    color: var(--red);
}

.dropdown-menu {
    background-color: #404040;
    color: white;
}

li.list-group-item {
    background-color: #404040;
}

.nav-item:hover{
    border: none !important;
}

.poweredbydigital{
    height: 12px;
    margin-left: auto !important;
}

/* ------------FIX "vragenindex" dropdown------------ */

.dropdown-menu[data-bs-popper] {
    left: auto;
    right: 0;
}

.fruity .dropdown-menu>li>a:hover {
    background-color: var(--highlight) !important;
    color: #000;
}

.navbar .container-fluid li {
    padding: 0 8px;
}

/* ------------progressbar------------ */

.top-container{
    margin: 0 !important;
    padding: 0 !important;
}

.top-content{
    margin: 0 !important;
    padding: 0 0 24px 0 !important;
}

.progress{
    box-shadow: none !important;
    background-color: var(--white) !important;
    border-radius: 16px !important;
    height: 16px !important;
}

.progress-bar{
    background-color: rgba(84,165,117,0.3) !important;
    color: var(--secundaryText) !important;
    min-width: 6% !important;
    box-shadow: none !important;
    border-radius: 16px !important;
}


/* ------------buttons------------ */

.btn-primary{
    background-color: var(--red) !important;
    color: var(--white) !important;
    border: none !important;
    padding: 8px 24px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    text-transform: capitalize !important;
    border: 2px solid var(--red) !important;
    border-radius: 0 !important;
    word-break: keep-all !important;
}
.btn-primary:hover {
    background-color: var(--hover) !important;
    color: var(--whiteText) !important;
    border: 2px solid var(--hover) !important;
    transition: 0.1s ease-in-out !important;
}

.btn-primary:active{
    border: 2px solid var(--highlight) !important;
    background-color: var(--hover) !important;
}

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

.btn-primary:focus{
    box-shadow: none !important;
}

.btn:focus{
    box-shadow: none !important;
}

.btn-check:active+.btn-primary {
    background-color: #246128;
    border: 1px solid #0f3e12;
    color: #fff;
    background-color: white !important;
}

.ls-button-label{
    background-color: var(--highlight) !important;
    border: 2px solid var(--highlight) !important;
    color: var(--charcoal) !important
}

/*.fruity .btn-check:active+.btn-outline-secondary:focus, .fruity .btn-check:active+.btn-primary:focus, .fruity .btn-check:active+.btn-success:focus, .fruity .btn-check:checked+.btn-outline-secondary:focus, .fruity .btn-check:checked+.btn-primary:focus, .fruity .btn-check:checked+.btn-success:focus, .fruity .btn-check:focus+.btn-outline-secondary, .fruity .btn-check:focus+.btn-primary, .fruity .btn-check:focus+.btn-success, .fruity .btn-outline-secondary.active:focus, .fruity .btn-outline-secondary:active:focus, .fruity .btn-success.active:focus, .fruity .btn-success:active:focus, .fruity .show>.btn-outline-secondary.dropdown-toggle:focus, .fruity .show>.btn-success.dropdown-toggle:focus {*/
/*    box-shadow: none !important;*/
/*    background-color: var(--good) !important;*/
/*    color: var(--white) !important;*/
/*    border: 2px solid var(--good) !important;*/
/*}*/

.btn-outline-secondary{
    background-color: transparent !important;
    color: var(--charcoal) !important;
    border: 2px solid var(--paleCharcoal) !important;
    padding: 8px 24px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    text-transform: capitalize !important;
    border-radius: 0 !important;
}
.btn-outline-secondary:hover{
  background-color: #EAEAEA !important;
  color: var(--charcoal) !important;
  border: 2px solid var(--paleCharcoal) !important;
}
.btn-outline-secondary:active{
  background-color: #EAEAEA !important;
  color: var(--charcoal) !important;
  border: 2px solid #CECECE !important;
}

.fruity .btn-check:focus+.btn-primary{
    box-shadow: none !important;
    /*background-color: var(--green) !important;*/
    /*color: var(--red) !important;*/
}



/* ------------Token-page------------ */


.card{
    box-shadow: none !important;
}

.bg-light{
    background-color: var(--white) !important;
    border: none !important;
}

/* ------------survey-welcome------------ */

.text-welcome{
    font-size: 16px;
    padding: 0 0 16px 0;
    word-break: auto-phrase;
}

.question-count-text{
    font-size: 14px;
    font-weight: 300;
}


.text-welcome ol li::marker {
    padding-left: 8px !important;
    font-weight: 500 !important;
}

.text-welcome ol li {
    padding-bottom: 12px !important;
}

.text-welcome ul li::marker {
    padding-left: 8px !important;
    font-weight: 500 !important;
}

.text-welcome ul li {
    padding-bottom: 12px !important;
}

/* ------------Alert------------ */

.alert-warning {
    border: 1px solid var(--danger) !important;
    color: var(--danger) !important;
    font-size: 14px;
    font-weight: 500;
}

.ri-error-warning-fill:before{
    color: var(--danger) !important;
}

.question-valid-container .text-danger{
    font-weight: 500 !important;
    font-size: 16px !important;
}

/* ------------Content------------ */

.outerframe{
  background-color: var(--white); 
  border-radius: 0 !important;
  padding: 32px 24px;
}

.outerframe a{
    color: var(--cobalt) !important;
}

.outerframe a:hover{
    text-decoration: underline;
    transition: .3s ease-in-out;
}

#navigator-container{
    padding: 32px 0 0 0 !important;
}

#main-col{
    margin: 0 !important;
}

.group-outer-container{
    margin: 0 !important;
}

.group-container{
    margin: 0 !important;
}

.group-title{
    text-align: left !important;
    font-size: 30px;
    margin: 8px 0 20px !important;
}

.group-description{
    background-color: transparent !important;
    padding: 0;
    border: none !important;
    box-shadow: none !important;
    padding: 0 0 8px;
    font-size: 16px;
    font-weight: 300;
    word-break: auto-phrase;
}

.group-description > p {
    padding: 0 !important;
    word-break: auto-phrase;
}

.question-title-container{
    font-size: 16px;
    font-weight: 500;
    padding: 48px 0 2px !important;
}
.question-title-container p{
    margin: 0 !important;
}
.question-container{
    border: none !important;
}
.question-help-container{
    padding: 0 !important;
    font-size: 14px;
    font-weight: 300;
}

.ls-questionhelp {
    padding-left: 4px;
    font-style: italic;
}
.ls-questionhelp:before {
    color: var(--icons) !important;
    font-style: normal !important;
}
.answer-container{
    padding: 0 !important;
}

.ls-answers {
    padding: 0 !important;
}

.form-control:focus {
    border: 1px solid var(--charcoal) !important;
    box-shadow: none !important;
}
.question-container.input-error  {
    box-shadow: none !important;
    color: var(--attention) !important;
}

.question-container.input-error > .question-title-container  {
    color: var(--attention) !important;
}

.ls-question-mandatory{
    color: var(--danger);
}

.answers-list label{
    background-color: #F7F6F7 !important; 
    border: 2px solid #F7F6F7 !important;
    color: var(--charcoal) !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
}

.answers-list label:hover{
  background-color: #EAEAEA !important;
  border: 2px solid #EAEAEA !important;
  color: var(--charcoal) !important;
}

.activeTest{
    position: relative;
}

.activeTest:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--charcoal);
  border: 2px solid var(--charcoal) !important;
  opacity: 0.2;
  z-index: 1;
}



.answers-list .col-12{
    padding: 0 !important;
}

.answer-container .container-fluid{
    padding: 0 !important;
}

.answer-container .col-md-2{
    width: auto !important;
    margin: 0 8px 8px 0 !important;
}

.showAnswerBox .answer-container{
    padding: 8px 0 !important;
}

.showAnswer .question-text .ls-label-question {
    font-weight: 400 !important;
    font-size: 14px !important;
}

.showAnswer .question-title-container {
    padding: 0 !important;
}

.showAnswerBox .question-title-container {
    padding: 16px 0 0 0 !important;
}