/* ——— Main stuff ——— */

* {
	box-sizing: border-box;
}

div, span {
	cursor: default;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently
	          supported by Chrome and Opera */
}

h1, h2, h3, h4, h5, h6 {
    font-family: ProximaNovaA-Regular, sans-serif, Helvetica, Arial;
    font-weight: normal;
    letter-spacing: -0.5px;

}

body, a, p, span, input {
    font-family: ProximaNova-Regular, sans-serif, Helvetica, Arial;
}

html, body {
    height: 100%;
}

html {
    width: 100%;
    margin: 0;
}

body {
    width: 100%;
    margin: 0;
    overflow: auto;
    background-color: #f0f0f0;
}

h2 {
    margin: 0;
    padding: 7px 25px;
    background-color: rgb(245, 245, 245);
    color: rgb(151, 154, 156);
    text-transform: capitalize;
    font-size: 14px;
    font-weight: bold;
}

.flex.yellow {
	background-color: rgb(241, 185, 42);
}

.light {
	background-color: rgba(255, 255, 255);
	color: rgba(150, 150, 150, 1);
}

input, textfield {
    border: none;
    border: 0;
}

.no-scroll {
	overflow: hidden;
}

.file-handler {
    display: none;
}

textarea:focus, input:focus, *:focus {
    outline: none;
}

.error-information {
	color: #e00000;
	padding: 10px 25px;
	text-align: center;
	font-size: 12px;
}

.information {
    color: #333;
    text-align: center;
}

.information h1 {
    font-weight: bold;
    font-size: 26px;
    margin-bottom: 0px;
}

.information p {
    margin: 0 0 10px 0;
}

.medium-button-panel {
	margin: 25px;
	/*display: flex;
	flex-direction: column;*/
}

.medium-button-panel > .medium-button {
	background-color: rgb(10, 88, 133);
	color: rgb(255, 255, 255);
	font-size: 18px;
	text-align: center;
	padding: 13px;
	position: relative;
}

.medium-button-panel > .medium-button:not(:last-child) {
	margin-bottom: 15px;
}

.medium-button-panel > .medium-button:hover {
	background-color: rgb(20, 108, 163);
}

.medium-button-panel > .medium-button.locked {
	background-color: rgb(230, 230, 230);
	color: rgb(10, 88, 143);
}

.medium-button-panel > .medium-button.locked:hover {
	background-color: auto;
}

.medium-button-panel > .medium-button.grey {
	background-color: rgb(230, 230, 230);
	color: rgb(10, 88, 133);
}

.medium-button-panel > .medium-button.grey:hover {
	background-color: rgb(235, 235, 235);
}

.medium-button > .check {
    position: absolute;
    top: 0;
    height: 100%;
    right: 15px;
    width: 20px;
    fill: green;
    display: flex;
    /*flex-align: center;*/
    fill: rgb(48, 181, 35);
    flex-direction: column;
    justify-content: center;
}

/* ——— Logged out ——— */


.login-logo {
    display: flex;
    justify-content: center;
    flex: 1 0 auto;
}

.login-logo-content {
    display: flex;
    justify-content: center;
    width: 100%;
}

.login-logo-content svg {
    width: 50%;
}

.login-content input {
    max-width: 100%;
    width: 100%;
    height: 100px;
    text-align: center;
}

.login-content input.standard-button {
    background-color: #005791;
    border: none;
    -webkit-appearance: none;
}

.login-logo img {width: 45%;}

.login-content input#CustomerID[type="text"] {
    color: #a9a9a9;
    font-size: 65px;
    border: none;
    padding: 0;
    height: 100px;
    line-height: 1;
    vertical-align: middle;
    font-family: arial;
    border-radius: 0;
    display: table-cell;
    font-size: 30px;
}


/* ——— Componente ——— */

/*** Logo header ***/
.logo-header {
	height: 135px;
	padding: 25px;
    min-height: 135px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.yellow > .logo-header,
.yellow-header > .logo-header {
	background-color: rgb(241, 185, 42);
}

.light > .logo-header,
.light-header > .logo-header {
	background-color: rgb(255, 255, 255);
}

.logo-header > .logotype {
	height: 70px;
	cursor: pointer;
}

.logo-header > .logotype > svg {
	height: 100%;
}

.logo-header > .back-to-menu-button {
    background-color: rgb(10, 88, 143);
    color: #ffffff;
    font-size: 11px;
    padding: 9px 11px 10px 5px;
    position: relative;
    border-radius: 0 20px 20px 0;
    font-family: arial;
    height: 30px;
    /*display: flex;
    align-items: center;*/
}

.logo-header > .back-to-menu-button::before {
    right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: transparent;
	border-right-color: rgb(10, 88, 143);
	border-width: 15px;
	margin-top: -15px;
}

.logo-header > .back-to-menu-button:hover {
	background-color: rgb(20, 108, 163);
}

.logo-header > .back-to-menu-button:hover::before {
	border-right-color: rgb(20, 108, 163);
}

/*** Header ***/

.header {
	background-color: rgb(10, 88, 133);
	color: rgb(255, 255, 255);
	/*padding: 25px;*/
    padding: 18px 15px 15px 25px;
    height: 75px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.header > .first-title {
	font-size: 12px;
	font-weight: 100;
}

.header > .second-title {
    font-size: 20px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

/* ——— Logged in - Forms ——— */

/*** Flex page ***/

body > .flex {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    body > .flex {
        max-width: 100%;
    }
}

.flex {
    background-color: rgb(255, 255, 255);
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.flex > .logo-header {
	flex-shrink: 0;
}

.logo-content svg {
    width: 100px;
}

.flex > .title {
	position: relative;
	height: auto;
	flex-shrink: 0;
}

.flex > .question {
    position: relative;
    background-color: transparent;
    color: rgb(10, 88, 143);
    fill: rgb(10, 88, 143);
    padding: 20px 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-shrink: 0;
    flex-grow: 1;
    font-size: 20px;
    font-weight: normal;
    flex-direction: column;
}

.flex > .question > .small-title {
    font-size: 12px;
    margin-bottom: 15px;
}

.flex textarea {
	flex: 1 1;
	margin: 0 25px 25px 25px;
	resize: none;
	border: 1px solid rgb(185, 185, 185);
	font-size: 18px;
	padding: 10px;
	color: rgb(10, 88, 143);
}

/*** Flex form ***/

.flex > form {
	flex: 1 1;
	background-color: rgb(255, 255, 255);
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow-y: visible;
}

.flex > form > * {
	flex-shrink: 0;
}

.flex .flex-filler {
	flex: 1 1;
	background-color: rgb(255, 255, 255);
}

.flex > form > .input-field {
	background-color: rgb(255, 255, 255);
	color: rgb(185, 185, 185);
	padding: 0;
	margin: 0;
	border-bottom: 2px solid rgba(237, 237, 237, 1);
    min-height: 75px;
}

.flex > form > .input-field > .title {
	background-color: transparent;
	color: inherit;
	font-size: 12px;
	padding: 0 25px;
	height: 35px;
	display: flex;
	align-items: flex-end;
}

.flex > form > .input-field > .input {
	padding: 0 25px;
	width: 100%;
	height: 35px;
}

.flex > form > .input-field:hover {
    background-color: rgb(245, 245, 245);
}

.flex > form > .input-field > .input {
    font-size: 18px;
    padding: 0px 25px 13px 25px;
}

.flex > form > .input-field > .input > input {
	width: 100%;
	height: 100%;
	font-size: 18px;
	/*padding: 0 0 10px 0;*/
    background-color: transparent;
}

.flex > form > .input-field > label {
	color: rgb(185, 185, 185);
	font-size: 18px;
	padding: 25px 25px;
	display: flex;
	justify-content: space-between;
}

.flex > form > .input-field > label > input[type=checkbox] {
	/* 
	 * The checkbox custom style is done in pseudo element ::after
	 * since browsers do not support styling of checkboxes.
	 */

    padding-right: 15px;
}
    .flex > form > .input-field > label > input[type=checkbox], .flex > form > .input-field > label > input[type=checkbox]:checked {
        -webkit-appearance: none;
    }

.flex > form > .input-field > label > input[type=checkbox]::after {
	/* Custom checkbox design */
	content: '';
	position: absolute;
	background-color: rgb(237, 237, 237);
	width: 25px;
	height: 25px;
	margin-top: -4px;
	margin-left: -9px;
	border-radius: 4px;
}

.flex > form > .input-field > label > input[type=checkbox]:hover::after {
	background-color: rgb(230, 230, 230);
}

.flex > form > .input-field > label > input[type=checkbox]:checked::after {
	background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><path fill="#30b523" d="M7.627,14.435l-5.69,-5.689l-1.937,1.924l7.627,7.627l16.373,-16.373l-1.924,-1.924l-14.449,14.435Z" style="fill-rule:nonzero;" /></svg>');
	background-position: center;
	background-size: 15px 15px;
	background-repeat: no-repeat;
}

.flex > form > .input-field.multiline-text-field:hover {
	background-color: rgb(245, 245, 245);
}

.flex > form > .input-field.multiline-text-field > .content {
	font-size: 18px;
	padding: 0px 25px 13px 25px;
}

.flex > form > .input-field.success,
.flex > form > .input-field.success > .input > input,
.flex > form > .input-field.success > label {
	color: rgb(10, 88, 143);
}

.flex > form > .input-field.error,
.flex > form > .input-field.error > .input > input {
	color: #e00000;
}

.flex > form input::-webkit-outer-spin-button,
.flex > form input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

/*** File upload ***/
.flex .input-field.image-field {
    display: flex;
    /*padding: 25px 0;*/
    align-items: center;
    position: relative;
}



.flex .input-field.image-field:hover {
    background-color: rgb(245, 245, 245);
}

    .flex .input-field.image-field > .title {
        flex: 1 1;
        color: rgb(185, 185, 185);
        font-size: 18px;
        align-items: center;
    }

    .flex .input-field.image-field.set > .title {
        color: rgb(10, 88, 143);
    }

    .flex .input-field.image-field > .camera-icon {
        /*flex: 0;*/
        width: 35px;
        height: 35px;
        margin-right: 30px;
        background-size: cover;
    }

        .flex .input-field.image-field > .camera-icon > svg {
            height: 100%;
            fill: rgb(10, 88, 143);
        }

        .flex .input-field.image-field > .camera-icon > img {
            height: 100%;
        }

    .flex .input-field.image-field > .preview-image {
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;
        height: 100%;
        background-size: cover;
        background-position: center;
    }

.flex  .modal.input-field.image-field {
    padding: 20px 25px;
}

/*** Yellow page ***/
/*** Light page ***/
.flex.light > .title {
    background-color: transparent;
    color: rgb(10, 88, 143);
    fill: rgb(10, 88, 143);
    padding: 20px 25px;
    font-weight: 600;
}

.flex.light > .title > h1 {
	margin: 0;
}

.flex.light > .title > .questionHeader {
    margin-right: 3em;
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 1.2em;
}

.flex.light > .title > .close-button {
	position: absolute;
	top: 50%;
	right: 20px;
	width: 20px;
	height: 20px;
	margin-top: -10px;
}

.flex.light > .title > .close-button:hover {
	opacity: 0.65;
}

.flex.light > .title > .close-button > svg {
	max-height: 100%;
	max-width: 100%;
	display: block;
}

    .flex.light > .title > .back-to-menu-button {
        position: absolute;
        top: 50%;
        right: 30px;
        margin-top: -10px;
        background-color: rgb(10, 88, 143);
        color: #ffffff;
        font-size: 11px;
        padding: 9px 11px 10px 5px;
        /*position: relative;*/
        border-radius: 0 20px 20px 0;
        font-family: arial;
        height: 30px;
    }

        .flex.light > .title > .back-to-menu-button::before {
            right: 100%;
            top: 50%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
            border-color: transparent;
            border-right-color: rgb(10, 88, 143);
            border-width: 15px;
            margin-top: -15px;
        }

        .flex.light > .title > .back-to-menu-button:hover {
            background-color: rgb(20, 108, 163);
        }

        .flex.light > .title > .back-to-menu-button:hover::before {
            border-right-color: rgb(20, 108, 163);
        }

.flex.light > input.search-input {
	margin: 0 25px;
	flex-shrink: 0;
}

.flex.light input.search-input {
	border: 1px solid rgba(190, 190, 190, 0.85);
	padding: 12px 15px;
	font-size: 18px;
	color: rgba(150, 150, 150, 1);
	font-weight: 200;
}

.flex > .search-result {
	margin: 15px 25px 0 25px;
	display: block;
	padding: 0;
	overflow-y: auto;
}

.flex > .search-result > .loading {
	width: 100%;
	height: 20px;
	display: flex;
	justify-content: center;
}

.flex > .search-result > .loading > svg {
	height: 100%;
}

.flex > .search-result > li {
	border-top: 1px solid rgba(190, 190, 190, 0.3);
	display: block;
	margin: 0;
	padding: 19px 15px 15px 15px;
	cursor: pointer;
}

.flex > .search-result > li:hover {
	background-color: rgba(0, 0, 0, 0.02);
}

/*** Normal page ***/

input.standard-button {
    color: #ffffff;
    font-size: 30px;
    border-radius: 0;
}

input {
    padding: 0;
    outline-offset: 0;
}

.multiline-text-field {
    min-height: 72px;
}

.content-input-field {
    font-size: 20px;
    border: none;
    background-color: #ffffff;
    display: flex;
    padding: 20px 25px;
}

.content-input-field input {
    font-size: 20px;
    color: #a9a9a9;
}

.content-input-field-checkbox {
    display: flex;
    width: 100%;
}

.content-input-field-checkbox input {
    align-self: center;
}

.content-input-field textarea {
    width: 100%;
    height: 100px;
    font-size: 20px;
    padding: 0;
    border: 0;
    resize: none!important;
}


.content-input-field-textbox {
    width: 100%;
    display: flex;
}

.content-input-field-textbox input {
    flex: 1 0 auto;
    padding: 0;
    }

.content-input-field p {
    color: #a9a9a9;
    flex: 1 0 auto;
    align-self: center;
    margin: 0;
}

.content-input-field:last-child {
    padding:0;
}

.content-input-field-image {
    width: 100%;
    display: flex;
}

.content-input-field-image-title {
    width: 100%;
    display: flex;
}

.content-input-field-image-content {
    width: 100%;
    display: flex;
}

.content-input-field-image img {
    width: 20%;
    display: flex;
}

.send-button {
    width: 100%;
    background-color: #005791;
    /*display: flex;*/
    justify-content: center;
    height: 75px;
    color: #ffffff;
}
.send-button:hover {
	background-color: rgb(20, 108, 163);
}

.send-button.yellow {
	background-color: rgb(241, 185, 42);
	color: #005791;
}

.send-button.yellow:hover {
	background-color: rgb(251, 195, 52);
}

.send-button.light {
	background-color: rgb(255, 255, 255);
	color: #005791;
	border-bottom: 2px solid rgba(237, 237, 237, 1);
}
.send-button.light:hover {
	background-color: rgb(245, 245, 245);
}

.send-button input {
    -webkit-appearance: none;
    background-color: transparent;
    color: inherit;
    font-size: 26px;
    width: 100%;
	height: 100%;
}

.send-button.disabled, .send-button.disabled:hover {
	background-color: rgb(226, 226, 226);
	color: rgb(185, 185, 185);
}


.send-button input[disabled] {
	color: rgb(200, 200, 200);
}

.description {
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
}


/*** Button List ***/
ul.button-list {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

ul.button-list > li {
	display: flex;
	margin: 0;
	padding: 0 25px;
	background-color: rgb(255, 255, 255);
	border-bottom: 2px solid rgb(237, 237, 237);
	color: rgb(150, 150, 150);
	font-size: 18px;
    min-height: 65px;
    align-items: center;
}


ul.button-list > li[data-in-progress=true] {
    color: rgb(10, 88, 143);
}

ul.button-list > li:first-child {
    padding-top: 2px;
}

ul.button-list > li:hover {
	background-color: rgb(245, 245, 245);
}

    ul.button-list > li[data-in-progress=false] {
        color: rgb(10, 88, 143);
    }

ul.button-list > li > .title {
	flex: 1 1;
}

ul.button-list > li > .icon {
	flex: 0 0;
	height: 0;
	overflow: visible;
}

ul.button-list > li > .icon > svg {
	width: 30px;
	height: 30px;
	margin-top: -14px;
	fill: rgb(10, 88, 143);
}

/* ——— Menu ——— */

.menu {
    flex: 1 0 auto;
}

.menu-item {
    background-color: #005791;
    height: 65px;
    border-bottom: 2px solid #5B92B8;
}

.menu-item:first-child {
    padding-top: 2px;
}

.menu-item:last-child {
    border-bottom: 0;
}

.menu-button {
    display: flex;
    justify-content: space-between;
    height: 100%;
    width: 100%;
}

.menu-button:hover {
	background-color: #0071ab;
}

.menu-button-text {
    display: flex;
    font-size: 16px;
    color: #ffffff;
    margin-left: 25px;
    align-self: center;
}

.menu-button-arrow {
    width: 12px;
    margin-right: 25px;
    /*margin-top: 1px;*/
    fill: #7FAAC8;
    align-self: center;
    display: block;
}

.menu-button-disabled {
    opacity: 0.3;
}

/* ——— Menu end ——— */


/*.title {
	background-color: pink;
    height: 65px;
    display: flex;
    align-items: center;
    background-color: #005791;
    color: #ffffff;
}*/

.content {
    flex: 1 0 auto;
}

/*.title p {
    margin-left: 25px;
    font-size: 26px;
}*/


content-input-field-textbox {
    flex: 1 0 auto;
}

.logged-in form {
    display: flex;
    flex-direction: column;
}

/*** Questions ***/

.questions {
	margin: 25px;
	font-size: 12px;
}

.questions > .question {
	position: relative;
	padding: 5px 5px 5px 20px;
	margin-bottom: 10px;
	color: rgb(134, 134, 134);
}

.questions > .question:not([data-status=unanswered]) {
	color: rgb(10, 88, 143);
}

.questions > .question[data-status=unanswered]::before {
	background-color: rgb(240, 240, 240); /* grey */
}

.questions > .question[data-status=none]::before {
	background-color: rgb(193, 231, 191); /* blue */
}

.questions > .question[data-status=remark]::before {
	background-color: rgb(242, 238, 131); /* yellow */
}

.questions > .question[data-status=measure]::before {
	background-color: rgb(238, 187, 188); /* red */
}

.questions > .question[data-status=warning]::before {
	background-color: rgb(230, 199, 126); /* orange */
}

    .questions > .question[data-status=absence]::before {
        background-color: rgb(238, 187, 188); /* red */
    }

    .questions > .question[data-status=overtime]::before {
        background-color: rgb(230, 199, 126); /* orange */
    }

    .questions > .question[data-status=work]::before {
        background-color: rgb(193, 231, 191); /* blue */
    }

    .questions > .question[data-status=ongoing]::before {
        background-color: rgb(230, 199, 126); /* orange */
    }

.questions > .question::before {
	content: ' ';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 10px;
}

    .questions > .question:not([data-is-locked=true]):hover {
        background-color: rgba(0, 0, 0, 0.03);
    }

.questions > .question > .vehicle {
    font-weight: bold;
}

.questions > .question > .text {
	padding-bottom: 5px;
	font-size: 14px;
}

.questions > .question > .number {
	text-transform: uppercase;
	font-weight: bold;
	display: inline-block;
}

.questions > .question > .answer {
	font-weight: bold;
	display: inline-block;
}


/*** Modals ***/
.modal {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    min-height: 100%;
    z-index: 100;
    background-color: rgb(255, 255, 255);
}

.modal > .sub-title {
    text-align: center;
    margin: 0 30px 15px 30px;
}

.modal > .send-button > input.loading {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><circle cx="50" cy="50" r="40" stroke="white" fill="none" stroke-width="15" stroke-linecap="round"><animate attributeName="stroke-dashoffset" dur="1.5s" repeatCount="indefinite" from="0" to="502"></animate><animate attributeName="stroke-dasharray" dur="1.5s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"></animate></circle></svg>');
    background-repeat: no-repeat;
    background-position: 10px 50%;
    background-size: 100px 50%;
}

.modal > .send-button > input[disabled] {
    background-color: rgba(255, 255, 255, 0.5);
    opacity: 0.5;
}