/* #e6007e		violet 				*/
/* #26b6be		dark turquoise 		*/
/* #234a67		dark blue			*/
/* #00a18b 		light blue			*/
/* #f6f6f6		light grey			*/

body {
	font-family: 'Raleway', sans-serif;
	font-size: 15px;
	line-height: 22px;
	font-weight: 100;
	font-style: normal;
	min-height: 100%;
}

img.logo {
    width: 100px;
    height: 100px;
}

a.logo-link {
    position: absolute;
    left: 50%;
    top: 6px;
    width: 100px;
    height: 100px;
    z-index: 1000;
    transform: translateX(-50%);
}

.cmsBody.defaultPage a.logo-link {
    position: relative;
    float: left;
    display: block;
    transform: none;
    left: initial;
    top: initial;
    margin: 15px;
}

header:after {
    content: '';
    display: block;
    clear: both;
}

.main {
	height: 100vh;
}

.main > .row {
	height: 100%;
}

.defaultPage .main {
    height: 100%;
}

.SectionContent {
    padding: 0 10px;
    text-align: left;
    width: 1200px;
    max-width: 100%;
    margin: 0 auto;
}

.content-screen {
	display: grid;
    min-height: 100%;
}

.middle-content {
	width: auto;
	max-width: 720px;
	padding: 20px 5%;
	margin: auto;
}

.start-center-content {
    width: auto;
    max-width: 720px;
    padding: 15% 5% 15px 5%;
    margin: 20px auto;
}

.icon-decoration .icon {
	display: inline-block;
	width: 80px;
	height: 80px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

.icon-decoration > .icon-col {
    text-align: center;
    padding: 10px 0;
}

.icon.atom.svg {
	background-image: url(/serverspecific/portal/images/Template/atoom.svg);
}

.icon.vials.svg {
	background-image: url(/serverspecific/portal/images/Template/reageerbuisjes.svg);
}

.icon.microscope.svg {
	background-image: url(/serverspecific/portal/images/Template/microscoop.svg);
}

.icon.bottles.svg {
	background-image: url(/serverspecific/portal/images/Template/labflessen_blauw.svg);
}

.icon.stethoscope.svg {
	background-image: url(/serverspecific/portal/images/Template/stethoscoop.svg);
}

.icon.atom.png {
	background-image: url(/serverspecific/portal/images/Template/atoom.png);
}

.icon.vials.png {
	background-image: url(/serverspecific/portal/images/Template/reageerbuisjes.png);
}

.icon.microscope.png {
	background-image: url(/serverspecific/portal/images/Template/microscoop.png);
}

.icon.bottles.png {
	background-image: url(/serverspecific/portal/images/Template/labflessen_blauw.png);
}

.icon.stethoscope.png {
	background-image: url(/serverspecific/portal/images/Template/stethoscoop.png);
}

.content-screen h1 {
    display: block;
    font-size: 32px;
    font-weight: 500;
    line-height: 40px;
    color: #26b6be;
    margin: 0 0 25px 0;
    width: 350px;
    max-width: 90%;
}

.login-screen:after,
.input-container:after,
.button-container:after,
.test-steps-container:after {
	content: '';
	display: block;
	clear: both;
}

.input-container {
    display: block;
    position: relative;
    width: 100%;
    min-height: 52px;
    border: transparent solid 2px;
    background: #f6f6f6;
    padding: 10px 15px;
    margin: 15px 0;
    border-radius: 10px;
}

.input-container.inFocus {
	border-color: #26b6be;
}

.input-container > input[type="text"],
.input-container > input[type="email"],
.input-container > input[type="date"],
.input-container > input[type="password"],
.input-container > input[type="text"].guiForm_Element_Text,
.input-container > input[type="email"].guiForm_Element_Text,
.input-container > input[type="date"].guiForm_Element_Text,
.input-container > input[type="password"].guiForm_Element_Password {
	background: transparent;
	border: transparent solid 1px;
    font-size: 19px;
    width: 420px;
    max-width: 80%;
    margin: 0;
    padding: 0;
}

.input-container > textarea {
    display: block;
    width: 100%;
    background: transparent;
	border: transparent solid 1px;
    font-size: 19px;
}

.input-container > input:focus,
.input-container > textarea:focus {
	outline: 0;
}

.input-container.invalid-value {
    border-color: #f37070;
}

.input-container.invalid-value.inFocus {
    border-color: #26b6be;
}

.input-container.captcha {
    background: transparent;
    padding: 5px 0;
}

#errorMsg {
    background: #ff3f03;
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    margin: 0 0 15px 0;
}

#infoMsg {
    background: #26b6be;
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    margin: 0 0 15px 0;
}

.extraInfo {
	display: block;
	position: relative;
	float: right;
	width: 50px;
}

.infoPopup {
	display: none;
	position: absolute;
	top: -50px;
	left: 100px;
	width: 550px;
	/*height: 450px;*/
	background: #fff;
	padding: 20px 25px;
    font-size: 18px;
    line-height: 26px;
    -webkit-box-shadow: 0 2px 16px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 2px 16px rgba(0,0,0,0.2);
    -o-box-shadow: 0 2px 16px rgba(0,0,0,0.2);
    box-shadow: 0 2px 16px rgba(0,0,0,0.2);
    z-index: 5000;
}

.infoPopup:before {
    content: '';
    display: block;
    position: absolute;
    left: -10px;
    top: 50px;
    width: 20px;
    height: 20px;
    background: #fff;
    transform: rotate(45deg);
}

.extraInfo > button {
    display: inline-block;
    position: relative;
    width: 26px;
    height: 26px;
    background: #234a67;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 17px;
    margin: 0 0 0 20px;
}

.extraInfo > button:focus {
	outline: 0;
}

.extraInfo.opened > .infoPopup {
	display: block;
}

input[type="submit"],
button.portal-btn,
a.portal-btn {
    display: block;
    float: right;
    background: #00a18b ;
    border: transparent solid 2px;
    padding: 12px 15px;
    min-width: 150px;
    font-size: 21px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    border-radius: 12px;
    margin: 5px 0;
}

input[type="submit"]:focus,
button.portal-btn:focus,
a.portal-btn:focus {
	border-color: #234a67;
	outline: 0;
}

input[type="submit"]:hover,
button.portal-btn:hover,
a.portal-btn:hover {
	background: #234a67;
}

input[type="submit"].loading,
button[type="submit"].loading {
    background-color: #fff;
    background-image: url(/serverspecific/portal/images/Template/loading.gif);
    background-repeat: no-repeat;
    background-size: 86px;
    background-position: center;
    border-color: #ddd;
}

.loggedIn .middle-content h1,
.loggedIn .middle-content p,
.loggedIn .middle-content .button-container {
	width: 370px;
	max-width: 100%;
	margin: 0 auto 25px auto;
}

.report-content p {
    margin: 10px 0;
}

.test-steps-container {
    display: block;
    position: relative;
    width: 550px;
    max-width: 100%;
    height: 140px;
    margin: 20px 0 50px 0;
}

.test-steps-container .step1,
.test-steps-container .step2,
.test-steps-container .step3 {
    display: block;
    width: 130px;
    position: absolute;
    top: 0;
    font-size: 14px;
    text-align: center;
    z-index: 100;
}

.test-steps-container .step1 {
	left: 0;
}

.test-steps-container .step2 {
	left: 50%;
	transform: translateX(-50%);
}

.test-steps-container .step3 {
	right: 0;
}

.test-steps-container .step-caption {
    position: relative;
    height: 44px;
    font-size: 14px;
    line-height: 19px;
}

.step-caption span {
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.test-steps-container .step-figure {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #00a18b ;
    margin: 15px 0 0;
}

.steps-line {
    position: absolute;
    left: 10%;
    right: 10%;
    height: 10px;
    background: #00a18b ;
    bottom: 35px;
    z-index: 10;
}

.loggedIn .middle-content > p {
	font-size: 25px;
	line-height: 38px;
	color: #26b6be;
}

/* datepicker styling */

.cmsBody .ui-datepicker {
    width: 20em;
    margin: 8px 0 0;
    border: #26b6be solid 1px;
    border-radius: 8px;
}

.cmsBody .ui-datepicker .ui-state-default, 
.cmsBody .ui-datepicker .ui-widget-content .ui-state-default {
    background: #fff;
    text-align: center;
}

.cmsBody .ui-datepicker .ui-datepicker-header {
    background: #f6f6f6;
}

.cmsBody .ui-datepicker .ui-state-highlight, 
.cmsBody .ui-datepicker .ui-widget-content .ui-state-highlight, 
.cmsBody .ui-datepicker .ui-widget-header .ui-state-highlight {
    border: 1px solid #00a18b ;
    background: #00a18b ;
    color: #fff;
}

.cmsBody .ui-state-active, 
.cmsBody .ui-widget-content .ui-state-active, 
.cmsBody .ui-widget-header .ui-state-active, 
.cmsBody a.ui-button:active, 
.cmsBody .ui-button:active, 
.cmsBody .ui-button.ui-state-active:hover {
    border: 1px solid #e6007e;
    background: #e6007e;
    color: #fff;
}

.cmsBody .ui-datepicker .ui-datepicker-header > a {
    background: #00a18b ;
    border-radius: 50%;
}

.cmsBody .ui-datepicker .ui-datepicker-prev span,
.cmsBody .ui-datepicker .ui-datepicker-next span {
    margin-top: -10px;
}

.cmsBody .ui-datepicker .ui-datepicker-prev span {
    background-position:-96px -48px !important;
}

.cmsBody .ui-datepicker .ui-datepicker-next span {
    background-position:-32px -48px !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px #f6f6f6 inset !important;
}

.search-filter-form .col-lg {
    padding: 10px 0;
}

.guiForm_Button_Advanced, .guiForm_Element_Text, .guiForm_Element_Textarea, .guiForm_Element_Select {
    display: inline-block;
    padding: 7px 10px;
    font-size: 16px;
    line-height: inherit;
    font-family: inherit;
    margin: 0 7px 15px 0;
    border-radius: 7px;
}

.guiForm_Element_Text, 
.guiForm_Element_Textarea,
.guiForm_Element_Select,
.guiForm_Element_Password {
    height: auto;
    border: #ddd solid 2px;
    background: #fff;
}

button.guiForm_Button_Advanced {
    height: auto;
    background: #00a18b ;
    color: #fff;
    border: 0;
    font-size: 18px;
    font-weight: bold;
    min-width: 150px;
    text-shadow: none;
}

button.guiForm_Button_Advanced > img {
    display: none;
}

button.guiForm_Button_Advanced:hover {
    background: #234a67;
    color: #fff;
}

.guiForm_Element_Text:focus, 
.guiForm_Element_Textarea:focus,
.guiForm_Element_Select:focus {
    border-color: #26b6be;
}

.guiListing_Top_Bar_Container, .guiListing_Bottom_Bar_Container,
.guiListing_Header_Cell, .guiListing_Header_Cell_Selected, .guiListing_Header_Cell_Over {
    background: #fff;
}

.guiListing_Element_Cell, .guiListing_Element_Cell_Alt {
    font-size: 14px;
}

.checkmark {
    color: #1a8e1a;
}

.cross {
    color: red;
}

.guiForm_Div_Date {
    display: inline-block;
    position: relative;
    top: -2px;
    background: none;
    width: 141px;
    height: 30px;
    border: #ddd solid 2px;
    border-radius: 7px;
    margin: 0 5px 7px 5px;
}

.guiForm_Date_day_container, 
.guiForm_Date_day_devider_container, 
.guiForm_Date_month_container, 
.guiForm_Date_month_devider_container, 
.guiForm_Date_year_container {
    display: block;
    float: left;
    position: relative;
    top: initial;
    left: initial;
    height: 27px;
}

.guiForm_Date_day_container,  
.guiForm_Date_month_container {
    width: 27px;
} 

.guiForm_Date_year_container {
    width: 50px;
}

.guiForm_Date_month_devider_container, 
.guiForm_Date_day_devider_container {
    line-height: 28px;
}

.guiForm_Element_Date_Day, 
.guiForm_Element_Date_Month, 
.guiForm_Element_Date_Year {
    font-family: inherit;
    font-size: 16px;
    width: 100%;
    height: 100%;
}

.guiForm_Div_Date_Focus {
    border-color: #26b6be;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.guiForm_Date_Calendar {
    position: relative;
    display: inline-block;
    border: none;
    height: 100%;
    background-position: center;
}

.guiListing_Title_Container {
    color: #222;
    background: #eee;
    font-size: 15px;
    padding: 4px 5px 6px;
    border: 0;
}

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

	.icon-decoration .icon {
		width: 55px;
		height: 55px;
    }
    
    .start-center-content {
        max-width: 100%;
        padding: 10% 0 15px 7px;
        margin: 0 -20px 0 0;
    }
}

@media screen and (min-width: 850px) and (max-width: 950px) {

    .row.icon-decoration {
        left: 52%;
    }
}

@media screen and (min-width: 756px) and (max-width: 849px) {

    .row.icon-decoration {
        left: 50%;
    }
	
	.icon-col .bubble {
		display: none;
	}
}

@media screen and (min-width: 756px) {

	.graphic-screen {
		background-image: url(/serverspecific/portal/images/Template/background.jpg);
		background-size: cover;
		background-position: center;
        background-repeat: no-repeat;
        background-attachment: fixed;
		color: #fff;
    }
    
    .icon-decoration {
        position: fixed;
        bottom: 5%;
        left: 50%;
        right: 0;
        margin: 0;
    }
	
	.icon-col .bubble {
		position: absolute;
		border-radius: 50%;
		background: #31b7bc;
		opacity: 0.55;
	}
	
	.bubble.bubble-1 {
		left: 75px;
		top: -35px;
		width: 15px;
		height: 15px;
	}
	
	.bubble.bubble-2 {
		width: 22px;
		height: 22px;
		left: 40px;
		top: -85px;
		background: #559fc1;
	}
	
	.bubble.bubble-3 {
		width: 42px;
		height: 42px;
		left: 75px;
		top: -160px;
		background: #569bc2;
	}
	
	.bubble.bubble-4 {
		width: 14px;
		height: 14px;
		left: 55px;
		top: -190px;
		background: #4e8db4;
	}
	
	.bubble.bubble-5 {
		width: 70px;
		height: 70px;
		left: 18px;
		top: -290px;
		background: #4d82a7;
	}
	
	.bubble.bubble-6 {
		width: 46px;
		height: 46px;
		left: 35px;
		top: -500px;
		background: #436987;
    	opacity: 0.8;
	}
	
	.bubble.bubble-7 {
		width: 200px;
		height: 200px;
		left: 55px;
		top: -715px;
		background: #4a6e8f;
	    opacity: 0.8;
	}

    .input-container label {
        position: absolute;
        top: 0;
        left: 15px;
        right: 40px;
        padding: 12px 0 15px 0;
        margin: 0;
        font-size: 19px;
        cursor: text;
    }

    .input-container > label:first-child {
        -webkit-pointer-events: none;
        -moz-pointer-events: none;
        -o-pointer-events: none;
        pointer-events: none;
    }
    
    .input-container > label.label-hidden {
        display: none;
    }

    .input-container.inFocus > label.label-hidden {
        display: block;
        opacity: 0.25;
    }

    .input-container.inFocus.data-entry > label.label-hidden {
        display: none;
    }

    .input-container.radio > input {
        display: inline-block;
    }

    .radio-label {
        display: inline-block;
        font-size: 19px;
        padding: 2px 0;
        width: 30%;
    }

    .input-container.radio > label {
        position: relative;
        display: inline-block;
        top: initial;
        left: initial;
        right: initial;
        cursor: pointer;
    }

    .input-container.radio.radio-duo > input {
        display: inline-block;
        width: 1px;
        -webkit-appearance: none;
        appearance: none;
    }

    .input-container.radio.radio-duo > label {
        display: inline-block;
        position: relative;
        width: 30%;
        padding: 3px 0 3px 36px;
    }

    .input-container.radio.radio-duo > label:before {
        content: '';
        display: block;
        position: absolute;
        top: 2px;
        left: 0;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: #26b6be solid 2px;
    }

    .input-container.radio.radio-duo > input:checked + label:before {
        background: #26b6be;
    }

    .input-container.radio.radio-duo > input:focus + label {
        color: #26b6be;
    }

    .input-container.radio.radio-duo > input:focus + label:before {
        border: #234a67 solid 2px;
    }
}

@media screen and (max-width: 755px) {
    
    img.logo {
        top: 10px;
        width: 58px;
        height: 58px;
    }

    .main {
        padding: 66px 0 0 0;
        height: auto;
    }

	.graphic-screen,
	.icon-decoration {
		display: none;
    }

    .main > .row {
        margin: 0;
    }

    .start-center-content {
        padding: 0 7px;
    }
    
    .content-screen {
        display: block;
        padding: 0;
    }

    .input-container {
        margin: 40px 0 15px 0;
    }

    .input-container > label,
    .input-container > .radio-label {
        position: absolute;
        top: -34px;
        width: 90%;
        font-size: 17px;
        color: #222;
    }

    .input-container.captcha {
        margin-top: 0px;
    }
    
    .button-container {
        text-align: center;
    }
 
    button.portal-btn, a.portal-btn {
        float: none;
    }

    .results-container.show-results {
        /*max-height: 1500px; Uitgezet door Jona*/
        padding: 15px 0;
        border-top: #777 solid 1px;
        border-bottom: #777 solid 1px;
    }

    .document-options {
        text-align: center;
        margin: 0 0 25px 0;
    }

    .input-container.radio > input {
        display: inline-block;
    }

    .input-container.radio > label {
        position: relative;
        display: inline-block;
        top: initial;
        left: initial;
        right: initial;
        cursor: pointer;
    }

    .input-container.radio.radio-duo > input {
        display: inline-block;
		-webkit-appearance: none;
        width: 1px;
    }

    .input-container.radio.radio-duo > label {
        display: inline-block;
        position: relative;
        width: 48%;
        padding: 3px 0 3px 36px;
    }

    .input-container.radio.radio-duo > label:before {
        content: '';
        display: block;
        position: absolute;
        top: 2px;
        left: 0;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: #26b6be solid 2px;
    }

    .input-container.radio.radio-duo > input:checked + label:before {
        background: #26b6be;
    }

    .input-container.radio.radio-duo > input:focus + label {
        color: #26b6be;
    }

    .input-container.radio.radio-duo > input:focus + label:before {
        border: #234a67 solid 2px;
    }

    .extraInfo {
        position: static;
    }

    .extraInfo .infoPopup {
        top: 55px;
        left: 7px;
        right: 7px;
        width: auto;
        height: 300px;
    }

    .extraInfo .infoPopup:before {
        content: '';
        display: block;
        position: absolute;
        left: initial;
        right: 15px;
        top: -10px;
        width: 20px;
        height: 20px;
        background: #fff;
        transform: rotate(45deg);
    }
}

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

    .middle-content {
        padding: 15px 7px;
    }

    .middle-content > .ParagraphContent {
        padding: 0 0 25px 0;
    }

    .report-options {
        text-align: center;
    }

    .input-container {
		min-height:39px; /* For SZT */
		padding: 5px 15px; /* For SZT */
	}
}

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

    .cmsBody .ui-datepicker {
        width: auto !important;
        left: 10px !important;
        right: 10px !important;
        margin: 20px 0 0 0;
    }
}

.message {
	background-color: #da0078;
	color: #fff;
	text-align: center;
	padding: 12px;
	font-size: 14px;
    z-index: 1001;
    position: relative;
}