/* 
    Created on : 18-okt-2016, 20:51:54
    Content    : Stylesheet voor MIOO Quickscan
    Author     : JJ
    Company    : Pro Change Solutions
    Copyright  : © 2016 - Pro Change Solutions


    TODO: Cleanup van alle bende. organiseren van classes en ids en grouperen.
          Toevoegen van @media handlers voor responsiveness.
    
*/

@import url('https://fonts.googleapis.com/css?family=Raleway');


#main_container, #contact_us {
	display: -ms-flexbox;
	display: flex;
	flex-direction: column;
	-ms-flex-direction: column;
	max-width: 1080px;
    margin: 0 auto; 
    position: relative; 
    background: #ffffff; 
    padding: 20px 0px;    
    -o-box-shadow:inset 0px 0px 0px 10px #1db1aa,inset 0px 0px 0px 10px #1db1aa;
    -webkit-box-shadow:inset 0px 0px 0px 10px #1db1aa,inset 0px 0px 0px 10px #1db1aa;
    -moz-box-shadow:inset 0px 0px 0px 10px #1db1aa,inset 0px 0px 0px 10px #1db1aa;
    box-shadow:inset 0px 0px 0px 10px #1db1aa,inset 0px 0px 0px 10px #1db1aa;
    position: relative; 
    width: 100%; 
    /*font-family:"Myriad", "Myriad Pro", "Helvetica","Segoe UI", "Lucida Sans Unicode", "Lucida Grande", sans-serif;*/
    font-family: 'Raleway';
    font-size: 22px;
    color:#171831;
}

#intro_container {
    width: 96%; 
    padding: 0px;
    margin: 0% 2%;
    text-align: center; 
    font-size: 18px;
}
#results_container { 
    text-align: center;
    font-size: 18px;
    overflow: auto;
} 

.contact_container {
    margin:auto;
    max-width: 50%;
}
.contact_container input[type="input"], textarea { 
    display: inline-block;
    text-align: left;
    width: 100%;
    height: 35px;
    margin: 5px;
    padding: 0px 10px;
    border-radius: 6px;
    font-size:102%;
}
.contact_container .contact_messagebox { min-height: 250px; }
.contact_container .contact_submit { 
    margin-top: 1em;
    padding: 14px 25px; 
    max-width: 200px; 
    font-size: 102%;
    background-color: #1db1aa;
    color: #ffffff;
    border: 2px solid #1db1aa;
    -webkit-transition: background-color 0.2s ease-in-out;
    -moz-transition: background-color 0.2s ease-in-out;
    -o-transition: background-color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out; 
}
.contact_container .contact_submit:hover {
    cursor: pointer;
    color: #1db1aa;
    background-color: #FFF;
    -webkit-transition: background-color 0.2s ease-in-out;
    -moz-transition: background-color 0.2s ease-in-out;
    -o-transition: background-color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out; 
}
.contact_container label { padding: 10px 5px; }

#progress_keeper {
    width: 20%;
    margin: 0% 40%;
    position: absolute;
    bottom: 38px;
    left: 0px;
    font-size: 18px;
}
#progress_keeper #progress {
    width: 700px;
    float:left;
    margin: 0px;
    height: 20px;
}
#progress_keeper .progress_value {
    height: 20px;
    display: block;
    text-align: center;
    margin-bottom: 10px;
}
#progress_keeper:hide {
    -webkit-transition:  0.3s ease-in-out;
    -moz-transition:  0.3s ease-in-out;
    -o-transition:  0.3s ease-in-out;
    transition:  0.3s ease-in-out;  
}

#mens_graph, #informatiemanagement_graph, #organisatie_graph, #opleiding_graph, #overall_graph, #average_graph {
    max-width: 70%;
    margin: 0% 15%;
}

.notice { color: #ff0000; }
.notice #notice_select {
    position: absolute; 
    bottom: 90px; 
    right: 20px; 
}
/*.notice_email, .notice_empty {
    position: absolute; 
    bottom: 60px; 
    right: 20px; 
}*/


.user_details {
    margin: 0% 30%;
    max-width: 40%;
    display: block;
    text-align: left;
    /*vertical-align: middle;*/
}
.user_details input {
    display: inline-block;
    text-align: left;
    width: 100%;
    height: 35px;
    margin: 5px;
    padding: 0px 10px;
    border-radius: 6px;
    box-shadow:0 1px 2px #D9D9D9 inset;
    -o-box-shadow:0 1px 2px #D9D9D9 inset;
    -webkit-box-shadow: 0 1px 2px #D9D9D9 inset;
    -moz-box-shadow:0 1px 2px #D9D9D9 inset;
    font-size:102%;
}

.graph {
    max-height: 350px;
}

.question_container {
    width: 96%; 
    min-height: 400px;  
    overflow: auto; 
    margin: 0% 2%; 
}

.question_container .question {
    margin-top: 50px;
    font-size: 22px; 
    font-weight: normal;
    color: #171831;
}
.question_container .qTitle {
    width: 100%;
    min-height: 60px;
}
.question_container .qTitle h2 {
    font-size: 32px; 
    margin: 10px;
    display: inline-block;
    /*float: right;*/
}
.question_container .qTitle img {
    float: right;
}
.question_container .question p {
    height: 70px;
    text-align: center;
}

.answers {
    margin-top: 50px;
    text-align: center;
    font-weight: 500;
}
.answers .hide-radio + label{
    display: inline-block;
    margin-right: -3px;
    text-align: center;
    width:150px;
    height: 30px;
    border: 2px solid #1db1aa;
    background-color: #fff;  
    color: #1db1aa; /*#f49498;*/
    font-variant-caps: all-small-caps;
    font-weight: bold;
    cursor: pointer;
    -webkit-transition: background-color 0.3s ease-in-out;
    -moz-transition: background-color 0.3s ease-in-out;
    -o-transition: background-color 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;  
}
.answers .hide-radio:checked + label{
    display:inline-block;
    cursor: pointer;
    width:150px;
    height: 30px;
    color:#fff;
    border: 2px solid #1db1aa;
    background-color: #1db1aa;
}

.hide { 
    display: none; 
} 

a:link, a:visited {
    /*border: 3px solid #1db1aa;
    background-color: #1db1aa;
    color: white;*/
    border: 2px solid #171831;
    background-color: #ffffff;
    color: #171831;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-weight: bold;
    font-variant-caps: all-small-caps;
    border-radius:6px;
    font-size: 20px;    
    -webkit-transition: background-color 0.2s ease-in-out;
    -moz-transition: background-color 0.2s ease-in-out;
    -o-transition: background-color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out; 
}


a:hover, a:active {
    background-color: white;
    color: #f49498;
    border: 2px solid #f49498;
    -webkit-transition: background-color 0.2s ease-in-out;
    -moz-transition: background-color 0.2s ease-in-out;
    -o-transition: background-color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out; 
}

.green {
    color: #1db1aa;
}

.prev, .restart, .btn_close_panel { float: left;} 
.next { float: right; } 
/*.progress_value { text-align: center; vertical-align: middle; margin: 0% 20%;}*/
.clear { clear: both; }
.scan_finish { 
    width: 30%;
    margin: 0% 35%;
    margin-top: 60px;
    position: relative;
    bottom: 30px;
    left: 0px;
    font-size: 18px;
}
.scan_finish a {
    display: block;
    text-align: center;
}
.show_result {
    text-align: center;
}

.btn_contact_us {
    padding-left: 24px;
}
.btn_full_restart {
    padding-left: 24px;
}
.btn_restart {
    padding-left: 24px;
    /* background: url(img/back.png) left no-repeat; */
}
.btn_prev { 
    padding-left: 24px; 
    /* background: url(img/back.png) left no-repeat; */
} 
.btn_next { 
    padding-right: 24px; 
    /* background: url(img/forward.png) right no-repeat; */
} 
.btn_show_result {
    padding-left: 24px;
    /* background: url(img/confirm.png) left no-repeat; */
} 
.btn_show_modal {
    padding-left: 24px;
}
.btn_start { 
    display: block; 
    margin: 40px auto 0 auto; 
}
.btn_continue {
    padding-right: 24px; 
    /* background: url(img/forward.png) right no-repeat; */
}
.btn_send_result {
    padding-right: 24px; 
    /* background: url(img/forward.png) right no-repeat; */
}
.btn_container { 
    margin: 20px 0 10px 0;

    margin-top: 120px;
}


.results_mens, .results_informatiemanagement, .results_organisatie, .results_opleiding, .results_average {
    display:inline-block;
    width: 90%;
    padding: 1%;
    margin: 0% 3.5%;
    border: 1px solid #dedede;
    border-radius: 6px;
}

.result_mens, .result_informatiemanagement, .result_organisatie, .result_opleiding, .result_overall {
    display:inline-block;
    overflow: auto;
    /*float: left;*/
    bottom:0px;
    width: 100%;
    margin-bottom: 1em;
}

h3.accordion {
    background-color: #dedede;   
    color: #171831;
    cursor: pointer;
    padding: 18px;
    margin:0;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    -webkit-transition: background-color 0.4s ease-in-out;
    -moz-transition: background-color 0.4s ease-in-out;
    -o-transition: background-color 0.4s ease-in-out;
    transition: background-color 0.4s ease-in-out; 
}
h3.accordion:active, h3.accordion:hover {
    background-color: #ccc;
}
.panel_0,  .panel_1,  .panel_2,  .panel_3,  .panel_4,  .panel_5,  .panel_6,  .panel_7,  .panel_8,  .panel_9,  .panel_10,  .panel_11,  .panel_12,  .panel_13,  .panel_14, .panel_15, .panel_16, .panel_17, .panel_18, .panel_19 {
    padding: 0px 18px;
    background-color: #fff;
    font-size: 15px;
    text-align: left;
    max-height: 0px;
    overflow: hidden;
    -webkit-transition: 0.6s ease-in-out;
    -moz-transition: 0.6s ease-in-out;
    -o-transition: 0.6s ease-in-out;
    transition: 0.6s ease-in-out; 
    opacity: 0;
}
.panel_0.show,  .panel_1.show,  .panel_2.show,  .panel_3.show,  .panel_4.show,  .panel_5.show,  .panel_6.show,  .panel_7.show,  .panel_8.show,  .panel_9.show,  .panel_10.show,  .panel_11.show,  .panel_12.show,  .panel_13.show,  .panel_14.show, .panel_15.show, .panel_16.show, .panel_17.show, .panel_18.show, .panel_19.show {
    opacity: 1;
    max-height: 500px;
}


.chartjs-legend {
	/*list-style: none;
	padding-left: 0px;
}

.chartjs-legend div { */
	margin: 0% 10%;
	margin-bottom: 10px;
	padding: 2px;
	border: 1px solid #dedede;
	border-radius: 6px;
}

.chartjs-legend li {
	display: inline-block;
	padding: 0px 5px;
}

/* .chartjs-legend li span { */
.chartjs-legend span {
	border-radius: 5px;
	display: inline-block;
	height: 10px;
	margin-right: 10px;	
}

/*
 * Afronden scan
 * Modal panel + spinner
 */

.complete_scan {
    display: none;
    position: absolute;
    top: 2em;
    z-index: 1000;
    min-height: 400px;
    width: 90%;
    background: white;
    -o-box-shadow:inset 0px 0px 0px 10px #1db1aa,inset 0px 0px 0px 10px #1db1aa;
    -webkit-box-shadow:inset 0px 0px 0px 10px #1db1aa,inset 0px 0px 0px 10px #1db1aa;
    -moz-box-shadow:inset 0px 0px 0px 10px #1db1aa,inset 0px 0px 0px 10px #1db1aa;
    box-shadow:inset 0px 0px 0px 10px #1db1aa,inset 0px 0px 0px 10px #1db1aa;
}

.complete_scan header {
    padding: 1em 1.5em;
}
.complete_scan header h3 {margin:0;}
.complete_scan .modal-body {
    padding: 1em 1.5em;
}
.complete_scan footer { 
    padding: 1em;
}
.modal-overlay {
    opacity: 0;
    filter: alpha(opacity=0);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 900;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3) !important;
}
.panelcontent header {
    text-align: center;
}
.modal-body p {
    text-align: center;
}

.spinner {
    position: relative;
    margin-left: 47.5%;
    margin-top: 22.5%;
}