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

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/
/*global*/
:root {
    /*global*/
    --background-color:#e4edee;
    --survey-width: 90%;
    --survey-outer-margin: 15%;
    
    /*normal*/
        --primary-button-bgcolor: #ec008c;
        --primary-button-textcolor: white;
        --primary-button-border-color: #ec008c;
  
        --secondary-button-bgcolor: white;
        --secondary-button-textcolor: black;
        --secondary-button-border-color: #ec008c;

    /*hover*/
        --primary-button-hover-bgcolor: #522f91;
        --primary-button-hover-textcolor: white;
        --primary-button-hover-border-color: #522f91;
  
        --secondary-button-hover-bgcolor: rgba(15,62,18,0.1);
        --secondary-button-hover-textcolor: black;
        --secondary-button-hover-border-color: #522f91;
  
  /*questions*/
  --radio-button-selected-color: #ff8a00;
  --help-and-tip-textcolor: black;
  --progressbar-color: #00aeef;
  
  /*voltooid + beoordeling*/
  --print-and-statistics-link-color: #ec008c;
  
  /*Deelnemer*/
  --token-form-bgcolor:#e4edee;
  --token-form-text-color: black;
}
/*font sizes*/
/*welkom and goodbye*/
.survey-description, .completed-text, .question-text, .answer-container, .control-label, .group-description, .ls-answers th, .ls-question-mandatory {
     font-size: 12pt !important;
}
.survey-contact {
    font-size: 14px;
}
/*questions*/
.group-title {
     font-size: 16pt !important;
}
.group-description b {
    font-size: 12pt !important;
}
.ls-questionhelp, .em_num_answers {
    font-size: 11pt;
}
.question-container .ls-label-question {;
    font-size: 12pt;
}

.ls-answers label, .answer-item label, .control-label,  .ls-label-question  {
    font-size: 12pt;
    font-weight:400;
}
.answer-item {
    textarea, textarea:focus {
        font-size: 12pt;
    }
}
 .printanswers-container span, .btn-outline-secondary, .statsSurveyTitle {
    font-size: 14px;
 }
 
.large-heading {
    font-size: 24px;
}

.form-heading {
    font-size: 14px;
}
#limesurvey {
    margin-left: var(--survey-outer-margin);
    margin-right:var(--survey-outer-margin);
}

body, html {
    background: var(--background-color) !important;
}
body > div,
body > article {
    width: var(--survey-width);
    margin-left: auto;
	margin-right: auto;
}
.btn-primary {
    border-width:3px;
    border-style:solid;
    border-color:var(--primary-button-border-color);
    background: var(--primary-button-bgcolor);
    color: var(--primary-button-textcolor);
    border-radius: 4px;
}
.btn-primary:hover {
    border-style:solid;
    border-color:var(--primary-button-hover-border-color);
    background: var(--primary-button-hover-bgcolor);
    color: var(--primary-button-hover-textcolor);
    box-shadow: none;
}

.btn-outline-secondary{
    border-width:3px;
    border-style:solid;
    border-color:var(--secondary-button-border-color);
    background: var(--secondary-button-bgcolor);
    color: var(--secondary-button-textcolor);
}
.btn-outline-secondary:hover {
    border-width:3px;
    border-style:solid;
    border-color:var(--secondary-button-hover-border-color);
    background: var(--secondary-button-hover-bgcolor);
    color: var(--secondary-button-hover-textcolor);
    box-shadow:none;
}
/*welkom*/
.privacy .checkbox-item label::before {
    border: 3px solid #000;
}
.datasecurity-checkbox-label a {
    color:#000;
}
/*voltooid + beoordelingen*/
 .url-wrapper-survey-print a {
         color:#000;
 }
 .url-wrapper-survey-print a:hover {
         color: var( --print-and-statistics-link-color);
         text-decoration: underline;
 }
 #welcome-container {
     max-width: inherit;
     padding-left: 10%;
     padding-right: 10%;
 }
 /*questions*/
 
 .ls-em-tip {
    display: inline;    
 }
 
 .question-container {
     margin-bottom: 25px;
     padding-top: 20px;
     padding-bottom: 20px;
     background-color: white;
 }
 
 .question-container .ls-question-message {
     font-size: 11pt;
     font-style:normal;
 }
 
 .asterisk {
    color: #ff2500;
}
 
 .radio-item input[type=radio]:checked + label::before {
    border: 2px solid #6E748C;
    background-color: #fff;
}

.radio-item input[type=radio]:checked + label::after {
    background-color: var(--radio-button-selected-color);
}

.radio-item input[type=radio]:checked + label {
        color:#000;
}

.ls-questionhelp:before {
    font-family: FontAwesome;
    line-height: inherit;
    height: 100%;
    content: "\f059";
    left: 1px;
}

.ls-questionhelp, .emtip {
    color: var(--help-and-tip-textcolor);
}
.progress-bar {
    color: #ffffff;
    background-color: var(--progressbar-color);
    box-shadow: none;
    min-width: 0% !important;
}

.progress {
    position: relative;
}

.percentage-display {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: auto;
    transform: translateY(-50%);
}
.col-responses {
    col {
        border: 1px solid black; 
    }
    .col-answers {
        width: 50% !important;
    }
    .ls-col-odd{
        width: 10% !important;
    }
    .ls-col-even {
        width: 10% !important;
    }
}

.ls-table-wrapper {
    th, td {
            border: 1px solid black; 
    }
    thead .ls-header{
        border-bottom: 3px solid black; 
        border-top: 3px solid black; 
    }
}

/*Deelnemer*/
 .token-page {
    background-color: var(--token-form-bgcolor);
    border: 0;
    box-shadow: none;
    padding:10px;
    color: var(--token-form-text-color);
 }
 .token-page .control-label {
     color: var(--token-form-text-color);
 }

/*other*/
#navigator-container-clone > div {
	padding: 0;
}
.row {
	margin-right: 0;
	margin-left: 0;
}

@media (min-width: 283px) {
	.navbar-brand {
		display: block !important;
	}
}
@media (min-width: 283px) and (max-width: 310px) {
	.navbar-brand.logo-container > img {
		padding-right: 0;
	}
}

.top-container .progress {
	height: 40px;
	background: #fff;
	border-radius: 0;
	box-shadow: none;
}

.btn-lg, .btn-group-lg > .btn {
	border-radius: 0;
}

body .answer-item label::after {
	background: #ff8a00;
}
table.ls-answers tr th,
.survey-name,
{
	color: #000;
}
.group-title {
	text-align: left;
}
.ls-link-action.ls-link-clearall,
.assessment-table,
.assessments-heading,
.assessments-container {
	display: none;
}