/* TYPO */
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,400i,500,600');

:root {
    font-size: 66.66667%;
}

body {
    font-family: Raleway;
    font-size: 1.6em;
    font-weight: 400;
    color: #666b74;
    background-color: #fff;
}

.body-veterinary {
    font-family: Raleway;
    font-size: 1.6em;
    font-weight: 400;
    color: #000000;
    background-color: #fff;
}


input,
select {
    font-family: inherit;
}

p {
    margin: 0;
}

b,
strong {
    font-weight: 600;
}

a,
.show-urn {
    color: #70b341;
}

a:hover,
.show-urn:hover {
    color: #00773f;
}

.show-urn {
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.85em;
    margin-left: 20px;
}

.note {
    font-size: .8em;
    font-style: italic;
}

.list-item {
    margin-left: 20px;
    margin-top: 5px;
}
/* TYPO */

/* LAYOUT */
body {
    padding-top: 10px;
    padding-bottom: 10px;
}

.global-container {
    width: 1200px;
    margin-right: auto;
    margin-left: auto;
    padding: 50px 100px 25px 100px;
    box-shadow: 0 0 5px #666b74;
}

.inline-block {
    display: inline-block;
    vertical-align: top;
}

.half-width {
    width: 50%;
}

.third-width {
    width: 33.333333%;
}
/* LAYOUT */

/* HEADER */
header {
    position: relative;
    margin-bottom: 50px;
}

header img {
    width: 175px;
}

.title-container {
    position: absolute;
    top: 3em;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
}

h1 {
    font-size: 2em;
    font-weight: 500;
    color: #70b341;
    text-transform: uppercase;
    margin-bottom: 0;
}

.title-veterinary {
    color: #000000;
    border-bottom: 2px solid #000000;
}

.veterinary {
    background-color: #000000;
}

.verifdata-id {
    font-size: .85em;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0;
}

.button-container {
    text-align: right;
}

.button-container-extranet {
    text-align: left;
    margin-bottom: 2%;
}

.button-back-container {
    text-align: center;
    float:right;
}
/* HEADER */
.form-title {
    text-align: center;
    margin-top: 5em;
}

h2 {
    margin: 0;
    text-transform: uppercase;
    color: #70b341;
    font-weight: 500;
    font-size: 1.5em;
    display: inline-block;
    border-bottom: 2px solid #70b341;
    margin-bottom: 25px;
}

select,
input,
label {
    cursor: pointer;
}

label {
    vertical-align: bottom;
}

input,
select {
    padding: 0;
    border-bottom: 1px dotted #666b74;
}

input:disabled {
    border: none;
}
option {
    padding: 0;
}

input[type=radio] {
    margin-right: 5px;
    vertical-align: text-top;
}

input[type=radio]:after {
    content: '';
    display: block;
    font-family: sans-serif;
    border-width: 1px;
    border-style: solid;
    border-color: #70b341;
    background-color: #fff;
    width: 1em;
    height: 1em;
    font-size: 1em;
    line-height: 1;
    font-weight: 100;
    color: #666b74;
    text-align: center;
    margin-left: -1px;
    margin-top: 1px;
}

input[type=radio].radio-large:after {
    border-width: 2px;
    width: 1.5em;
    height: 1.5em;
    line-height: inherit;
}

input[type=radio].radio-veterinary:after {
    content: '';
    display: block;
    font-family: sans-serif;
    border-width: 1px;
    border-style: solid;
    border-color: #000000;
    background-color: #fff;
    width: 1em;
    height: 1em;
    font-size: 1em;
    line-height: 1;
    font-weight: 100;
    color: #666b74;
    text-align: center;
    margin-left: -1px;
    margin-top: 1px;
}

input[type=radio].radio-large-veterinary:after {
    border-width: 2px;
    width: 1.5em;
    height: 1.5em;
    line-height: inherit;
    border-color: #000000;
}

input[type=radio].radio-round:after {
    border-radius: 50%;
}

input[type=radio].radio-round-veterinary:after {
    border-radius: 50%;
    border-color: #000000;
}

input[type=radio].radio-grey:after {
    border-color: #666b74;
}

input[type=radio]:checked:after {
    content: '\2713';
}

input[type=radio].radio-round:checked:after {
    content: '\2022';
}

input[type=radio].radio-round-veterinary:checked:after {
    content: '\2022';
}

.owner-container .inline-block:not(:first-of-type) label,
.animal-container > div:not(.death-type-container) .inline-block:not(:first-of-type) label {
    margin-left: 20px;
}

.incineration-container label,
.taking-container label,
.owner-container label,
.owner-container select,
.animal-container > div:not(.death-type-container) label,
.signature-container label,
.crematory-container label {
    margin-right: 5px;
}

.label-list {
    font-size: 1.113em;
    font-weight: bold;
    color: #70b341;
    border-bottom: 2px solid #70b341;
}
/* FORM */

/* FORM INCINERATION */
.incineration-container {
    margin-bottom: 35px;
}

input[name=inc_code] {
    width: 26.85em;
}
/* FORM INCINERATION */

/* FORM TAKING */
.taking-container {
    margin-bottom: 35px;
}

.taking-container > div:not(:first-child) {
    margin-top: 20px;
}

input[name=auto_complete_postal_code] {
    width: 12.5em;
}

select[name=clinic] {
    width: 30em;
}
/* FORM TAKING */

/* FORM CONTACT */
.contact-container {
    margin-bottom: 25px;
}

.contact-container > div:not(:first-child) {
    margin-top: 20px;
}
input[name=contact_email_pickup] {
    width: 34.75em;
}

input[name=contact_email_communication] {
    width: 21.25em;
}

.contact-container > div:not(:first-child) {
    margin-top: 20px;
}
/* FORM CONTACT */
/* FORM responsible */

.responsible-container {
    margin-bottom: 25px;
}

.responsible-container > div:not(:first-child) {
    margin-top: 20px;
}

select[name=responsible_civility] {
    width: 7.25em;
}

input[name=responsible_lastname] {
    width: 25em;
}

input[name=responsible_firstname] {
    width: 14.5em;
}

input[name=responsible_phone] {
    width: 7em;
}

input[name=responsible_email] {
    width: 41.5em;
}
/* FORM RESPONSIBLE */
/* FORM FACILITY */
.facility-container {
    margin-bottom: 25px;
}

.facility-container > div:not(:first-child) {
    margin-top: 20px;
}


input[name=facility_name] {
    width: 25em;
}

input[name=registration_number] {
    width: 14.5em;
}

input[name=facility_address] {
    width: 50em;
}

input[name=facility_city] {
    width: 38.75em;
}

input[name=facility_zipcode] {
    width: 7em;
}
/* FORM FACILITY */


/* FORM SUBMIT */
.submit-container {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 35px;
}

input[type=submit], input[type=button]{
    font-size: 1.2em;
    color: #fff;
    background-color: #70b341;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
}

input[type=submit]:hover, input[type=button]:hover{
    background-color: #00773f;
}

input[type=button][name=change_clinic]{
    font-size: 0.9em
}

input[type=submit][name=submit-veterinary]{
    background-color: #666b74;
}

input[type=submit]:hover[name=submit-veterinary]{
    background-color: #000000;
}

/* FORM SUBMIT */

/* FOOTER */
footer {
    position: relative;
}

.brand-link {
    text-align: center;
    font-weight: 500;
}

.brand-slogan {
    font-size: .75em;
    text-align: center;
}
/* FOOTER */

/* MODAL */
.modal-content, .modal-info-content, .modal-reprint-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 80%;
    padding-top: 30px;
}

.modal-info-content, .modal-reprint-content {
    background-color: #FFFFFF;
    border-width: 5px;
    border-style: solid;
    border-color: #cc3366;
    padding: 20px;
}

.modal-info-content p, .modal-reprint p {
    text-align: center;
}

.modal-title {
    color: #cc3366;
    font-size: 2.25em;
}

.button-modal-container {
    text-align: center;
}

.button-modal {
    display:inline-block;
}

.modal-content img {
    border-radius: 20px 0 20px 20px;
}

.modal-close {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #ffffff;
    font-size: 30px;
    font-weight: 600;
    line-height: 30px;
    height: 30px;
    width: 60px;
    text-align: center;
    cursor: pointer;
    border-radius: 20px 20px 0 0;
}
/* MODAL */

/* ERROR PAGE */

.error-process .form-greetings {
    line-height: 2em;
    color: #666b74;
    text-align: center;
}

.error-process .error-message {
    padding: 10px;
    border-radius: 5px;
    color: #fff;
    background-color: #70b341;
}
/* ERROR PAGE */

/* LOADING EFFECT */
@keyframes blink {50% { color: transparent }}
.loader__dot { animation: 1s blink infinite }
.loader__dot:nth-child(2) { animation-delay: 250ms }
.loader__dot:nth-child(3) { animation-delay: 500ms }
/* LOADING EFFECT */