/*

Nordisk Drogpreventions färger:
- Turkos: #78baba
- Svart: #404040
- Grå: #d9d9d9
Ljung och sjöberg färg: #91D3F1
*/

/* Generella regler och typsnitt */
* {box-sizing: border-box;}
body {margin:0;	font-family: 'Muli', sans-serif; color:#404040;}
h1, h2, h3, h4, h5, h6 {font-family: 'Source Sans Pro', sans-serif; font-weight: 900;}
a, input, textarea, .radio_box, .inline_button, .report_choice, .file_item {
	text-decoration: none;
	transition: all 200ms ease;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
}
p > a, p > a:active, p > a:focus, p > a:visited {color:#91D3F1;}
p > a:hover {color:#404040;}
input, select, .inline_button {height: 60px;}
input, textarea, select, .inline_button {outline: none; width: 100%; padding: 10px; font-family: 'Muli', sans-serif; border-bottom: 3px solid #d9d9d9; font-size: 14px; border-top: 0; border-left: 0; border-right: 0; background: #f2f2f2;}
.inline_button {width: 60px; display: inline-block; text-align: center; line-height: 37px; cursor: pointer;}
.inline_input {width: calc(100% - 70px); display: inline-block; margin-left:10px;}
select > option {background:#ddeeee;}
input:hover, input:focus, input:active, textarea:hover,
textarea:focus, textarea:active,
select:focus, select:active, select:hover, .inline_button:hover {background:#ddeeee; border-bottom-color: #91D3F1; outline:none;}
textarea {resize: vertical; height: 100px; padding-top:15px;}
.required {font-family: 'Source Sans Pro', sans-serif; font-weight: 900; color:#91D3F1;}

input[type=number]::-webkit-inner-spin-button, input[type=date]::-webkit-inner-spin-button, input[type=time]::-webkit-inner-spin-button, 
input[type=number]::-webkit-inner-spin-button, input[type=date]::-webkit-inner-spin-button, input[type=time]::-webkit-outer-spin-button {-webkit-appearance: none; margin: 0;}
input[type=submit] {margin: 20px 0 40px; width: auto; clear: both; float: left; cursor: pointer; background: #ddeeee; padding: 20px; border-bottom: 3px solid #91D3F1;}
input[type=submit]:hover, input[type=submit]:focus, input[type=submit]:active {background: #91D3F1; color: #FFFFFF; border-bottom-color: #91D3F1;}

input[type=date]::-webkit-inner-spin-button,
input[type=date]::-webkit-calendar-picker-indicator {display: none; -webkit-appearance: none;}

/* Login */
.login_window {display: table; width: 100%; height: 100%; position: absolute;}
.login_centerer {display: table-cell; vertical-align: middle;}
.login_content {max-width: 500px; margin: 0 auto; padding: 20px;}
.ndp_logo_login {max-width: 150px; margin: 0 auto 0; display: block; object-fit: contain;}
.login_text {margin-bottom:2em;}

/* Layout */
.table_parent {display: table;}
.centerer {display: table-cell; vertical-align: middle;}
.grand_page_layout {max-width: 840px; margin:0 auto; padding: 60px 20px;}
.content_divider {padding-bottom:40px;}
.ndp_50_field {width: calc(50% - 20px); margin-right: 40px; float:left; margin-bottom: 40px; position: relative;}
.ndp_50_field:nth-of-type(even) {margin-right:0;}
.ndp_50_field > p, .ndp_100_field > p {margin: 0 0 5px; font-size:15px;}
.ndp_50_field > span, .ndp_100_field > span {font-size: 12px; font-style: italic;}
.ndp_100_field {width: 100%; float:left; margin-bottom: 40px;}
.radio_box {border-bottom: 3px solid #d9d9d9; background-color: #f2f2f2; margin-bottom: 25px; float: left; margin-right: 20px; text-align: center; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: relative;
    display: table; padding: 20px; height: 100px;}
.radio_box > input {position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; top: 0; left: 0; cursor: pointer;}
.radio_box > span {display: table-cell; vertical-align: middle; font-size:14px;}
.radio_box:hover {background:#ddeeee; border-bottom-color: #91D3F1;}
.radio_of_3 {width: calc(33.33333333333333% - 13.4px);}
.radio_of_3:nth-of-type(3) {margin-right:0;}
.radio_of_6 {width: calc(16.66666666666667% - 23px);}
.radio_of_6:nth-of-type(6) {margin-right:0;}
#checkbox_box {margin-right: 0; text-align: left; width: 65.666667%;}
#checkbox_box > p {font-size: 14px; display: table-cell; vertical-align: middle; text-align: center;}
#checkbox_box p > input {display: inline-block; width: auto; height: auto; padding: 10px; margin: 0 5px; text-align: center;}
#checkbox_alco1 {float: right; text-align: left; width: 29%;}
#checkbox_alco1 > p {font-size: 14px; display: table-cell; vertical-align: middle; text-align: center;}
#checkbox_alco1 p > input {display: inline-block; width: auto; height: auto; padding: 10px; margin: 0 3px; text-align: center;}
#checkbox_alco2 {float: right; text-align: left; width: 29%;}
#checkbox_alco2 > p {font-size: 14px; display: table-cell; vertical-align: middle; text-align: center;}
#checkbox_alco2 p > input {display: inline-block; width: auto; height: auto; padding: 10px; margin: 0 3px; text-align: center;}
#checkbox_alco3 {float: right; text-align: left; width: 29%;}
#checkbox_alco3 > p {font-size: 14px; display: table-cell; vertical-align: middle; text-align: center;}
#checkbox_alco3 p > input {display: inline-block; width: auto; height: auto; padding: 10px; margin: 0 3px; text-align: center;}
#checkbox_alco4 {float: right; text-align: left; width: 29%;}
#checkbox_alco4 > p {font-size: 14px; display: table-cell; vertical-align: middle; text-align: center;}
#checkbox_alco4 p > input {display: inline-block; width: auto; height: auto; padding: 10px; margin: 0 3px; text-align: center;}



.responsive_br {display: none;}

.clearfix {clear: both; width: 100%;}

.complete_box {padding: 15px; margin-top: 15px; text-align: center;}

.err_message {
    color: red;
    display: block;
    background: #ffe6e6;
    position: absolute;
    padding: 20px;
    font-size: 14px;
    width: 100%;
    top: -75px;
}

/* Header och footer */
header {width: 100%; margin-bottom: 60px;}
.ndp_logo {width: 130px; float: left;}
#menu {float: right; padding: 10px;}
.menu_user, .menu_logout {display: inline; margin: 0 5px;}
.menu_user > i, .menu_logout a > i {padding-right: 5px; color: #b3b3b3;}
.menu_logout > a {color:#404040;}
.menu_logout > a:hover {color:#91D3F1;}
.footer_notice {padding-top:20px; margin-top:60px; border-top: 1px solid #d9d9d9; clear: both;}

.form_header {width: 100%;}
.report_choice {
    border-bottom: 3px solid #d9d9d9;
    float: left;
    width: 50%;
    text-align: center;
    background-color: #f2f2f2;
    padding: 20px;
    cursor: pointer;
    color: #a6a6a6;
}
.report_choice:hover {background:#ddeeee; border-bottom-color: #91D3F1;}
.selected_choice, .selected_choice:hover {background: #91D3F1; color: #FFFFFF; border-bottom-color: #91D3F1; font-weight: 900;}

/* Specifika sidor */
.page_intro {width: 70%;}
.function_parent_box {width: 100%; overflow: auto;}
.function_button {width: 100%; float: left; margin-bottom: 20px; text-align: center; border: 1px solid #d9d9d9; height: 130px;}
.function_button:hover {background:#f2f2f2;}
.frontpage_container {color: #404040; padding: 0 20px;}
.frontpage_container > i {font-size: 35px; margin-bottom: 20px;}
.frontpage_container > p {margin:0; font-size: 20px;}

#file_list {margin:0; padding:0; list-style: none;}
.file_item {border-bottom: 3px solid #d9d9d9; background-color: #f2f2f2;}
.file_item:hover {background:#ddeeee; border-bottom-color: #91D3F1; color:#ffffff;}
.file_item:last-of-type {border-bottom: none;}
.file_item > a {width: 100%; padding:20px; display: block; color:#404040;}
.file_item a > i {color:#b3b3b3; margin-right:10px;}

.sent_info_box > p {margin: 0; padding: 15px 0; border-bottom: 1px solid #f2f2f2;}
.sent_info_box > p:last-of-type {border-bottom: none;}
.sent_info_box p > span {font-weight: 900;}

.special-message {
    width: 100%; float: left; margin-bottom: 20px; margin: 30px 0;
}

.special-message .special-message-toggler {
    width: 110px;
    height: 40px;
    display: block;
    cursor: pointer;
}

.special-message .special-message-toggler > div {
    width: 50px;
    display: inline-block;
    height: 40px;
    background-position: center;
    background-size: 75%;
    background-repeat: no-repeat;
    opacity: 0.3;
}

.special-message .special-message-toggler > div.toggled {
    opacity: 1;
}

.special-message .the-message {
    border: 1px solid #d9d9d9;
    padding: 20px;
}

/* Responsiv design */

@media screen and (max-width: 860px) {
    .ndp_50_field {width: 100%; margin-right: 0;}
    .radio_of_6 {width: calc(33.33333% - 13px);}
    .radio_of_6:nth-of-type(3n) {margin-right: 0;}
    .urine {width: 100px;}
    #checkbox_box {width: calc(100% - 120px); padding: 10px;}
    .responsive_br {display: block;}
}

@media screen and (max-width: 860px) {
    .ndp_50_field {width: 100%; margin-right: 0;}
    .radio_of_6 {width: calc(33.33333% - 13px);}
    .radio_of_6:nth-of-type(3n) {margin-right: 0;}
    .urine {width: 100px;}
    #checkbox_alco1 {width: calc(100% - 120px); padding: 10px;}
    .responsive_br {display: block;}
}

@media screen and (max-width: 860px) {
    .ndp_50_field {width: 100%; margin-right: 0;}
    .radio_of_6 {width: calc(33.33333% - 13px);}
    .radio_of_6:nth-of-type(3n) {margin-right: 0;}
    .urine {width: 100px;}
    #checkbox_alco2 {width: calc(100% - 120px); padding: 10px;}
    .responsive_br {display: block;}
}

@media screen and (max-width: 860px) {
    .ndp_50_field {width: 100%; margin-right: 0;}
    .radio_of_6 {width: calc(33.33333% - 13px);}
    .radio_of_6:nth-of-type(3n) {margin-right: 0;}
    .urine {width: 100px;}
    #checkbox_alco3 {width: calc(100% - 120px); padding: 10px;}
    .responsive_br {display: block;}
}

@media screen and (max-width: 860px) {
    .ndp_50_field {width: 100%; margin-right: 0;}
    .radio_of_6 {width: calc(33.33333% - 13px);}
    .radio_of_6:nth-of-type(3n) {margin-right: 0;}
    .urine {width: 100px;}
    #checkbox_alco4 {width: calc(100% - 120px); padding: 10px;}
    .responsive_br {display: block;}
}

@media screen and (max-width: 620px) {
    .responsive_br {display: block;}
    .grand_page_layout {padding: 20px;}
    header.table_parent {display: block;}
    header.table_parent > .centerer {width: 100%; display: inline-block; text-align: center;}
    .ndp_logo {float: none;}
    #menu {float: none; margin-left: 0; padding: 0;}
    .page_intro {width: 100%;}
    .report_choice {width: 100%;}
    .sent_info_box p > span {width: 100%; display: block; padding-top: 5px;}
}

@media screen and (max-width: 520px) {
    .radio_of_6 {width: calc(50% - 10px);}
    .radio_of_6:nth-of-type(2n) {margin-right: 0;}
    .radio_of_6:nth-of-type(3) {margin-right: 20px;}
}

@media screen and (max-width: 480px) {
    .radio_of_3 {width: 100%; height: 30px; margin-bottom: 5px; margin-right: 0;}
    .radio_of_3:nth-of-type(3) {margin-bottom:25px;}
	.function_button {height: auto; padding: 20px 0; width: 100%; margin-right: 0;}
	.frontpage_container > i {font-size: 25px; margin-bottom: 5px;}
    .frontpage_container > p {font-size: 16px;}
    #checkbox_box {width: 100%; margin-top:-25px;}
    .urine {margin-bottom:30px;}
}