/******************
    User custom CSS
    ---------------

    Bij kopie thema vervang:
    
    lettertype:         Roboto
    Oranje:             255,84,0
    Paars:              107,96,175
    pastel oranje:      255 125 60
    pastel oranje 2:    255,232,221
    F0A76E
*/

/** Font */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
html {
    font-size: 12px;
}
html, 
body { 
    min-height: 100%;
}
body {
    font-family: 'Poppins', sans-serif !important;
    font-size: 1rem;
    /* background-color: #FFFFFF !important; */
    background: linear-gradient(180deg,
        rgb(252, 252, 252) 67%,
		rgba(240, 243, 246, 1) 100%);
    padding-top: 85px !important;
    /**Aanzetten bij hidden navbar*/
    padding-top: 0px !important;
	margin-top: -15px !important;
}

.ls-privacy-body, 
.form-change-lang.form-inline
.control-label {
    /* color: #fff; */
}

.h4.text-primary {
    /* color: #fff !important; */
} 

#navigator-container {
    padding: 0 2rem;
}

/** Background color */

a.animate:after,
.answer-item label::after,
button,
.btn,
.btn.active,
#navbar,
.navbar-default,
.progress-bar,
.geoloc-item .input-group-addon,
input[type="checkbox"]:checked:after,
.slider-selection,
.slider-handle {
    border-color: rgb(255,125,60 ) !important;
    background-color: rgb(255,125,60 ) !important;
    background: linear-gradient(
        90deg,
        rgba(255,125,60 ,1) 0%,
        rgba(255,125,60 ,1) 100%,
        /* rgba(255,125,60,1) 100% */
    ) !important;
    color: #fff !important;
}

/** Background:hover color */

button:hover,
.btn:hover,
.slider-handle:hover {
    background-color: rgb(255,125,60) !important;
    background: linear-gradient(
        90deg,
        rgba(255,125,60 ,1) 0%,
        rgba(255,125,60 ,1) 100%,
        /* rgba(255,125,60,1) 100% */
    ) !important;
}
button.active,
.btn.active,
button.focus,
.btn.focus {
    background: rgba(255,125,60 ,0.5) !important;
}
.radio-list .btn,
.checkbox-list .btn,
.button-list .btn,
.sortable-choice li {
    font-weight: 300;
    background: rgba(255,125,60 ,0.05) !important;
    background-color: none !important;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    color: rgb(255,125,60 ) !important;
    /* box-shadow: none !important; */
}
.radio-list .btn.active,
.radio-list .btn:hover,
.checkbox-list .btn.active,
.checkbox-list .btn:hover,
.button-list .btn.active,
.button-list .btn:hover,
.sortable-rank li {
    background: linear-gradient(90deg, rgb(255,125,60) 0%, rgb(255,125,60) 100%) !important;
    color: #fff !important;
    box-shadow: 0 7px 21px rgba(167,167,167 ,0.33) !important;
    padding: 0.2rem !important;
}
.yesno-button li {
    margin-right: 5px;
}
.geoloc-item input[type="checkbox"] {
    filter: grayscale(1)
}
.leaflet-container {
    margin: 1rem 0;
}
.sortable-choice li,
.sortable-rank li {
    margin: 5px !important;
    border-radius: 5px !important;
    /* border: none !important; */
}

/** Text */

h1, h2 {
    font-weight: bold;
    color: #222 !important;
    font-size: 3rem;
}
h2 {
    font-size: 2.8rem;
}
a {
    color: rgb(255,125,60) !important;
}

body,
.text-primary {
    color: #222 !important;
}

.ls-questionhelp span{
    color: #222;
    font-size: 1rem;
}

.text-info {
    color: #222 !important;
    /* font-size: 1.2rem; */
    font-size: 1rem !important;
}
.text-info:hover {
    color: #222 !important;
}
.text-danger {
    color: #E53935 !important;
}
.asterisk.pull-left {
    float: none !important;
    display: none;
}
.ls-question-message {
    opacity: 0.5;
}
.ls-question-message:hover {
    opacity: 1;
}
.input-error .ls-question-message {
    opacity: 1;
}
.question-text {
    font-weight: 600; /*wordt overschreven door playfull*/
    font-size: 1rem;
    color: rgba(255,125,60 ,1);
    display: inline-block;
}
.ls-answers tbody .answertext {
    /* text-align: unset !important; */
}
.form-control{
    font-size: 1rem;
}

/** Logo */
.banner-image-left,
.banner-image-right {
    max-height: 50px !important;
    max-width: 100% !important;
    /* display: flex;
    justify-content: center; */
}

#banner-container{
    display: flex !important;
    justify-content: center !important;
}

/** Form global */

.input-error {
    
}

/** Form field colors */

.form-control:focus,
.select-search .dropdown-item .selectize-input.focus {
    border: 1px solid rgb(255,125,60 ) !important;
    box-shadow: inset 0 1px 1px rgba(255,125,60 ,20%), 0 0 8px rgba(255,125,60 ,60%) !important;
}

.input-group label {
    line-height: 2rem !important;
}

/**slider*/
.slider-container > .ls-input-group-reset .btn-slider-reset {
    border: 1px solid #ccc !important;
    color: #ccc !important;
    background: transparent !important;
    width: 3.5rem !important;
    height: 2rem;
    line-height: 1.75rem;
}
@media (max-width: 480px) {
    .slider-container > .ls-input-group-reset .btn-slider-reset{
        margin: 10px;
        float: right;
    }
}

.slider-container > .ls-input-group-reset .btn-slider-reset:hover {
    border: 1px solid rgb(255,125,60 ) !important;
    color: rgb(255,125,60 ) !important;
    background: transparent !important;
}
.slider-container > .ls-input-group-reset .btn-slider-reset:focus {
    outline: 0 !important;
}
.slider-container > .ls-input-group-reset .btn-slider-reset::after {
    content:"N.V.T.";
    font-weight: 300;
    font-size: 8px;
}
.slider-container > .ls-input-group-reset i {
    display: none;
}
.slider-handle {
    border-color: rgb(255,125,60 ) !important;
    background-color: rgb(255,125,60 ) !important;
    color: #fff !important;
}
.slider-selection {
    background: rgba(255,125,60 ,0.3) !important;
}
@media only screen and (min-width: 770px) {
    .slider-item .container-fluid .col-sm-2 {
        width: 30% !important;
        margin-top: 0 !important;
    }
    .slider-item .container-fluid .col-sm-8 {
        width: 40% !important;
    }
}

.slider-untouched .slider-selection {
    background: #777 !important;
}
.slider-untouched .slider-handle {
    background: #555 !important;
}
.btn-slider-reset {
    padding: 0px !important;
    height: 1.5em;
    width: 1.5em;
    top: -0.5em;
    background: #777 !important;
} 
.slider-untouched + .btn-slider-reset {
    background-color: rgb(255,125,60 ) !important;
}
.btn-slider-reset span {
    display: none;
}
.slider-item {
    margin-top: 0em !important;
}
.slider-list .slider-item .col-sm-12 .ls-input-group {
    margin-top: unset;
    margin-bottom: 2em;
}

/** Transitions */

a,
button,
#navbar,
.navbar-default,
.text-info,
.question-container,
.radio-list .btn,
.checkbox-list .btn,
.button-list .btn,
.sortable-choice li {
    transition: all 0.2s ease;
    padding: 0.2rem;
}

/** Animations */

button:hover,
button:active,
button:focus,
#navbar:hover,
.navbar-default:hover,
.slider-handle:hover {
    box-shadow: 0 7px 21px rgba(255,125,60 ,0.33);
}

.question-container:hover,
.question-container:active,
.question-container:focus {
    box-shadow: 0 7px 21px rgba(0,0,0,0.14);
}

.question-container.input-error {
    box-shadow: 0 7px 21px rgba(255,125,60 ,0.33) !important;
}
.noHover {
    pointer-events: none;
}

/** Regular */

.navbar,
#navbar {
    display: none !important;
    /** Taalkies menu
    background-color: rgba(0, 0, 0, 0) !important;
    box-shadow: none !important; */
}

.logo.img-responsive {
    display: none;
}

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

/**aanpassing vraag weergave*/
div.group-description {
	border-radius: 2rem !important;
    background-color: #fff !important;
    box-shadow: 0 0 33px rgb(0 0 0 / 15%) !important;
    margin-left: 20px;
    margin-top: 50px;
}

@media screen and (max-width: 767px){
    div.group-description {
        margin-right: 20px;;
    }
    .question-container {
        margin-right: 20px;
    }
}

img#intro {
	border-radius: 1.5rem;
}

.question-container {
	background-color: #ffffff;
	border-radius: 1.5rem;
	margin-left: 20px !important;
	/* border: unset !important;      */
	box-shadow: /*unset !important;*/ 0 1px 2px rgb(0 0 0 / 20%);
    
}

button,
.btn {
    box-shadow: 0 2px 4px rgb(0 0 0 / 33%);
    font-size: 1.5rem;    
    display: inline-block;
	font-weight: 500; 
	line-height: 0.72;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-color: transparent;
	border: 2px solid transparent !important;
	/* border: none !important; */
	padding: 1rem 1rem;
	font-size: 1rem;
	border-radius: 1rem;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
		border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	text-transform: uppercase;
}

.navbar-toggle {
    background: none !important;
    color: #fff !important;
    padding: 5px !important;
    /* box-shadow: none !important; */
}
.navbar-toggle .icon-bar {
    background-color: #fff !important;
}

.ls-answers.radio-list label {
	display: flex;
	flex-direction: column-reverse;
	white-space: normal !important;
	line-height: 2.4rem;
	font-weight: 300;
	font-size: 1rem;
	text-align: start;
}

.ls-answers.radio-list{
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
}

.ls-answers.radio-list label img {
	margin-bottom: 15px;
}
/** Select */

.select-search .answer-item {
    display: block !important;
}
.select-search .dropdown-item .selectize-control {
    width: 100%;
}

/** Smily vraag */

.image-radio ul {
    margin: 0;
    padding: 0;
}
.image-radio .radio-item {
    padding: 0 !important;
    margin: 0 !important;
}
.image-radio .radio-item label {
    /* padding: 2rem 5rem; */
    font-size: 2rem;
    width: 100%;
}
.image-radio .radio-item img {
    max-width: 75px !important;
}
.image-radio .radio-item label:hover {
    background: rgba(107, 96, 175, 0.25);	
}
.image-radio .radio-item label::before {
    content: none !important;
}
.image-radio .radio-item input[type="radio"]:checked + label {
    background: rgba(107, 96, 175, 0.50);
	
}
.image-radio .radio-item input[type="radio"]:checked + label::after {
    content: none !important;
	text-align: center;
}

.image-radio-small .radio-item label {
    padding: 1rem 1rem;
}

.image-radio-small .radio-item img {
    max-width: 50px !important;
    margin: 1rem;
}

/** CB: Image */

.multiple-opt ul {
    margin: 0;
    padding: 0 2rem;
}
.multiple-opt .answer-item {
    padding: 0 !important;
    margin: 0 !important;
}
.multiple-opt .answer-item label {
    padding: 2rem 5rem;
    font-size: 1.5rem;
    text-align: center;
    width: 100%;
}
.multiple-opt .answer-item img {
    max-width: 100px !important;
}
.multiple-opt .answer-item label:hover {
    background: linear-gradient(90deg, rgba(255,125,60 ,0.1) 0%, rgba(255,125,60,0.1) 100%) !important;
    
}
.multiple-opt .answer-item label::before {
    content: none !important;
    
}
.multiple-opt .answer-item input[type="radio"]:checked + label,
.multiple-opt .answer-item input[type="checkbox"]:checked + label {
    background: linear-gradient(90deg, rgba(255,125,60 ,0.33) 0%, rgba(255,125,60,0.33) 100%) !important;
}
.multiple-opt .answer-item input[type="radio"]:checked + label::after,
.multiple-opt .answer-item input[type="checkbox"]:checked + label::after {
    content: none !important;
}

.multiple-opt-small .answer-item label {
    padding: 1rem 1rem;
}

.multiple-opt-small .answer-item img {
    max-width: 50%;
    margin: 1rem;
}

/** Triade */

.triadeQuestion .survey-question-help::before,
.triadeQuestion .triade-container .triade-cancel:before,
.triadeQuestion .triade-container .triade-cancel.checked:before{
    color: rgb(255,125,60 );
}

 .triadeQuestion .triade-draggable {
     background-color: rgb(255,125,60 );
 }

 /**lengte dropdown balk volledig*/
 .form-inline .form-group{
	display: flex !important;
	width: 100% !important;
    padding-left: 1rem !important;
	flex-wrap: wrap;
	gap: 25px;
} 
.selectize-input{
	width:100% !important;
}
.form-control {
	max-width: 96% !important; /**invoer veld niet groter dan container*/
	width: 96% !important;
}
.selectize-dropdown{
	width: 100% !important;
}
.selectize-control.single{
	width: 100% !important;
}
.yesno-button{
	width: 100% !important;
}
.row.ls-answers.answers-list.radio-list.form-inline {
    width: 100%;
}
table.ls-answers {
    width: 96%;
}

/** vorige, volgende en verzenden knoppen groter maken */

#ls-button-submit, 
#ls-button-previous {
    padding: 1rem 2rem;
    font-size: 1rem;
	margin-bottom: 5px;
    background-color: transparent !important;
    color: rgb(255,125,60 ) !important;
    border: solid 0.2rem !important;
    border-color: rgb(255,125,60 );
}
#ls-button-submit {
    background-color: rgb(255,125,60 ) !important;
    color: #FFFFFF !important;
    border: solid 0.2rem !important;
    border-color: rgb(255,125,60 ) !important;
    margin-right: -20px;
}
#ls-button-previous {
    margin-left: 12px;
}
@media (max-width: 767px) {
    #ls-button-submit {
        margin-right: 13px;
    }
}

/** Playfull */

.question-container {
    border-radius: 2rem;
    background-color: #fff;
    box-shadow: 0 0 33px rgb(0 0 0 / 15%);
}

.question-text {
	border-radius: 1.125rem;
    display: inline-block;
    padding: 0.8rem 1rem;
    margin-left: -4rem;
    background-color: rgb(255,125,60);
    box-shadow: 0 0 14px rgb(0 0 0 / 15%);
    /* min-width: 100%;
    max-width: 100%; */
}
.question-text p {
    margin: 0 !important;
}
.question-title-container {
    padding-top: 2em;
    padding-bottom: 2em;
  }

.ls-label-question {
    color: #fff !important;
    font-weight: bold;
}

.ls-answers{
    padding-bottom: 5px;
}

/**Wit regels instellen*/
body{
	line-height: 2rem !important;
}

/** Melding op mobiel goed weergeven*/
@media (max-width: 767px) {
	#bootstrap-alert-box-modal {
		bottom: unset;
	}
    .row.taal-opening{
        display: block !important;
    }
}

/** Welkomst pagina aanpassingen */
/** Verwijderen */
#firstpage-changelang .form-change-lang.form-inline {
    /* margin-top: 40px;
    margin-bottom: 40px; */
    padding: 40px;
}

#welcome-container .survey-name {
    /* margin-bottom: 40px; */
}

/* #main-row .col-centered.space-col#main-col*/
#mogelijk { 
    background-color: #FFFFFF !important;
    padding: 20px !important;
    box-shadow: 0 0 14px rgb(0 0 0 / 15%);
    border-color: #222 !important;
    border-radius: 1.125rem !important;
    /* margin-top: 40px; */
    margin-bottom: 40px;
    max-width: fit-content;
}

.privacy.row {
    padding: 40px;
}


/** Bubble */

.button-bubble label {
    display: block;
}
.button-bubble .title {
    font-weight: bold;
    color: #fff;
    font-size: 2.5rem;
    text-align: left;
    display: block;
    overflow: hidden;
}
.button-bubble .description {
    font-weight: normal;
    font-style: italic;
    color: #fff;
    font-size: 1.6rem;
    text-align: left;
    display: block;
    overflow: hidden;
}
.button-bubble .bubble {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50px;
    font-weight: bold;
    text-transform: uppercase;
    background-color: #3ECBFA;
    right: -50px;
    bottom: -50px;
    padding-top: 3rem;
    color: #fff;
}
.button-bubble.version-switch .question-valid-container,
.button-bubble.version-switch .answer-container,
.button-bubble .question-title-container {
  display: none;
}
.button-bubble.version-switch .ls-questionhelp:before {
  content: '';
}
.ls-questionhelp:before{
    content: '';
}
.btn-container {
  color: #fff;
  padding: 50px 0;
  text-align: center;
}
.button-bubble .btn {
  /* position: relative;
  display: inline-block;
  width: 42%;
  padding: 3%;
  margin: 0 6% 65px 0; */
}

@media only screen and (max-width: 960px) {
    .button-bubble .btn {
    /* width: 100%;
    margin: 0 0 65px 0; */
    }
}
/** Taalkeuze */
#logo-taalkeuze {
    height: 40px ;
    max-width: 100%;
    align-self: center;
}
.btn.bg-transparent {
    background-color: transparent !important;
    color: transparent !important;
    max-width: 100px;
    width: 100% !important;
    max-height: 50px;
    height: 50% !important;
    margin: 0px !important;
    padding: 0px !important;
    box-shadow: none !important;
    border: none !important;
}

.homepage-flag {
    height: 28px;
    width: auto;
    max-width: 42px;
    border-radius: 5px;
    margin: 10px 0;
}

/** opmaak mobiel */
@media (max-width: 767px) {
    .question-container {
        border-radius: 2rem;
        background-color: #fff;
        box-shadow: 0 0 33px rgb(0 0 0 / 15%);
    }
    
    .question-text {
        border-radius: unset;
        display: inline-block;
        padding: 1rem 2rem;
        margin-left: 0;
        background-color: unset;
        box-shadow: unset;
        min-width: 100%;
        max-width: 100%;
    }
    
    .ls-label-question {
        color: rgb(255,125,60 ) !important;
        font-weight: 600;
    }
    
    .ls-answers{
        padding-bottom: 5px;
    }
}

div#logo-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 20px 0;
}
#logo-img-container {
    align-self: center;
}
#taal-keuze {
    display: flex;
    flex-direction: row;
}
#taal-keuze div .privacy-nl-en {
    display: flex;
    flex-direction: row;
    flex-flow: wrap;
    justify-content: space-between;
    padding: 15px 0 50px 0;
}
@media (max-width: 767px) {
    /* div#logo-container {
        flex-direction: column !important;
    }
    #logo-img-container {
        align-self: unset !important;
    } */
    #taal-keuze {
        display: flex;
        flex-direction: column;

    }
    #taal-keuze div {
        border-left: unset !important;
        padding-left: unset !important;
        padding-right: 2rem !important;
     }
    #taal-keuze .btn{
        padding: 1rem 2rem !important;
    }
    #Test777 {
        display: block !important;
    }
}
#question6344 {
    margin-top: 50px;
}

.table > tbody > tr > th {
    padding: 1.5rem 0.5rem;
}

@media (max-width: 385px) {
    div#logo-container {
        flex-direction: column !important;
    }
    #logo-img-container {
        align-self: unset !important;
    }
}
.question-help-container {
    padding-right: 1rem;
}