@import url("../styles.css");

:root {
    --image-height: 70px;
    --image-to-image-padding: 20px;
    --grid-gap: 20px;
}

.registration .container > header {
    display: flex;
    border-bottom: 1px solid var(--line-color);
    padding-bottom: 10px !important;
    margin-bottom: 10px;
}

.registration .container > header .title{
    display: flex;
    flex-direction: column;
    text-align: left;
    flex: 1;
    
}

.registration .container > header .logos{
    display: flex;
    height: var(--image-height);
    gap: var(--image-to-image-padding);
}

.registration .content section > header {
    display: flex;
    padding-bottom: 0px;
    gap: var(--grid-gap);

    font-weight: var(--font-weight-bold);

    color: var(--primary-color);
    padding: 0px 20px 20px 0px;
    text-align: left;
}

.registration .content section > header .value {
    color: var(--font-color);
    text-align: left;
}

.registration .content .form-group.form-row {
    display: flex;
    gap: var(--grid-gap);
}

.registration form > section:nth-child(even) {
    background-color: var(--light-blue-color);
}

.registration form > section {
    padding: 20px;
    border-bottom: 1px solid var(--line-color);
}

/*.registration.en-iso-9712 .content section > header {
    background-color: var(--light-red-color) !important;
}

.registration.en-4179 .content section > header {
    background-color: var(--light-blue-color) !important;
}*/

/*Only show validation errors -> valid should be dispayed "normal"*/
.registration .was-validated .form-control:valid, .registration .form-control.is-valid {
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
    background-image: inherit;
}

.registration .was-validated .form-check-input:valid ~ .form-check-label, .registration .form-check-input.is-valid ~ .form-check-label {
    color: inherit;
}

.registration .was-validated .form-check-input:valid, .registration .form-check-input.is-valid {
    border-color: var(--bs-border-color);
}

.registration .was-validated .form-check-input:valid:checked, .registration .form-check-input.is-valid:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

.teilnehmer .content {
    display: grid;
    grid-template-areas:
        "titelVor vorname zuname zuname titelNach"
        "geburtsdatum geburtsort geburtsort ausweis ausweistyp"
        "email email email telefon telefon"
        "adresseStrasse adresseStrasse adressePLZ adresseOrt adresseOrt";
    grid-template-columns: repeat(5, 1fr);
    column-gap: var(--grid-gap);
}

.teilnehmer .content .titelVor {
    grid-area: titelVor;
}

.teilnehmer .content .vorname {
    grid-area: vorname;
}

.teilnehmer .content .zuname {
    grid-area: zuname;
}

.teilnehmer .content .titelNach {
    grid-area: titelNach;
}

.teilnehmer .content .geburtsdatum {
    grid-area: geburtsdatum;
}

.teilnehmer .content .geburtsort {
    grid-area: geburtsort;
}

.teilnehmer .content .email {
    grid-area: email;
}

.teilnehmer .content .telefon {
    grid-area: telefon;
}

.teilnehmer .content .adresseStrasse {
    grid-area: adresseStrasse;
}

.teilnehmer .content .adressePLZ {
    grid-area: adressePLZ;
}

.teilnehmer .content .adresseOrt {
    grid-area: adresseOrt;
}

.teilnehmer .content .ausweistyp {
    grid-area: ausweistyp;
}

.teilnehmer .content .ausweis {
    grid-area: ausweis;
}

.firma .content {
    display: grid;
    grid-template-areas: 
        "name name name uid bestellungsreferenz"
        "adresseStrasse adresseStrasse adressePLZ adresseOrt adresseOrt"
        "kontaktperson kontaktperson email email telefon";
    grid-template-columns: repeat(5, 1fr);
    column-gap: var(--grid-gap);
}

.firma .content .name {
    grid-area: name;
}

.firma .content .uid {
    grid-area: uid;
}

.firma .content .adresseStrasse {
    grid-area: adresseStrasse;
}

.firma .content .adressePLZ {
    grid-area: adressePLZ;
}

.firma .content .adresseOrt {
    grid-area: adresseOrt;
}

.firma .content .bestellungsreferenz {
    grid-area: bestellungsreferenz;
}

.firma .content .kontaktperson {
    grid-area: kontaktperson;
}

.firma .content .email {
    grid-area: email;
}

.firma .content .telefon {
    grid-area: telefon;
}

.rechnung-an .content {
    display: grid;
    grid-template-areas: 
        "name name name kontaktperson kontaktperson"    
        "adresseStrasse adresseStrasse adressePLZ adresseOrt adresseOrt"
        "email email telefon oegfzp-mitglied oegfzp-mitglied";
    grid-template-columns: repeat(5, 1fr);
    column-gap: var(--grid-gap);
}

.rechnung-an .content .name {
    grid-area: name;
}

.rechnung-an .content .adresseStrasse {
    grid-area: adresseStrasse;
}

.rechnung-an .content .adressePLZ {
    grid-area: adressePLZ;
}

.rechnung-an .content .adresseOrt {
    grid-area: adresseOrt;
}

.rechnung-an .content .kontaktperson {
    grid-area: kontaktperson;
}

.rechnung-an .content .email {
    grid-area: email;
}

.rechnung-an .content .telefon {
    grid-area: telefon;
}

.rechnung-an .content .oegfzp-mitglied {
    grid-area: oegfzp-mitglied;
}

.zertifikat-an .content {
    display: grid;
    grid-template-areas: 
        "name name name kontaktperson kontaktperson"
        "adresseStrasse adresseStrasse adressePLZ adresseOrt adresseOrt";
    grid-template-columns: repeat(5, 1fr);
    column-gap: var(--grid-gap);
}

.zertifikat-an .content .name {
    grid-area: name;
}

.zertifikat-an .content .adresseStrasse {
    grid-area: adresseStrasse;
}

.zertifikat-an .content .adressePLZ {
    grid-area: adressePLZ;
}

.zertifikat-an .content .adresseOrt {
    grid-area: adresseOrt;
}

.zertifikat-an .content .kontaktperson {
    grid-area: kontaktperson;
}


.kurs-details .content .qualifizierung-zertifizierung > .value {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--grid-gap);
}

.kurs-details .content .qualifizierung-zertifizierung > .value .form-group {
    margin-bottom: 0px;
}

.kurs-details .content .erfahrungszeit > .value {
    display: flex;
    gap: var(--input-to-input-padding);
}

.kurs-details .content .erfahrungszeit > .value .form-group {
    margin-bottom: 0px;
}

.kurs-details .content .termine > .value  {
    display: grid;
    grid-template-columns: 2fr 2fr;
}

.form-group.bottom-spacer {
    border-bottom: 1px solid var(--line-color);
    padding-bottom: 1rem;
}

.form-check-inline.right-spacer {
    border-right: 1px solid var(--line-color);
    padding-right: 1rem;
}

.form-group.form-group-inline {
    display: flex;
    align-items: center;
}

.action {
    text-align: center;
    padding-top: var(--button-to-text-padding);
}

.validation-toast, .validation-toast .toast-header {
    background-color: var(--red-90-color);
    color: var(--white-color) !important;
}

.validation-toast .toast-header {
    border-bottom-color: var(--white-color);
}

.validation-toast .toast-header i {
    padding-right: 10px;
}

@media print {
    body > nav, body > footer, .back-navigation, #scrollToTop, .action { display:none !important; }

    body {
        -webkit-print-color-adjust: exact;
    }

    .container {
        max-width: 100%;
    }

    input:not([type=radio]) {
        border:none !important;
        padding-left:0px !important;
    }
 }

 /*Breakpoints*/
/* Extra small devices (phones, 600px and down) */
@media (max-width: 600px) {
    .registration .container > header .logos {
        display: none;
    }

    .registration .content section > header {
        flex-wrap: wrap;
    }

    .teilnehmer .content {
        display: flex;
        flex-direction: column;
        align-items: stretch !important;
    }

    .firma .content {
        display: flex;
        flex-direction: column;
        align-items: stretch !important;
    }

    .rechnung-an .content {
        display: flex;
        flex-direction: column;
        align-items: stretch !important;
    }

    .kurs-details .content .qualifizierung-zertifizierung > .value {
        grid-template-columns: 1fr;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media (max-width: 767px) {
    .teilnehmer .content {
        grid-template-areas: 
            "name email"
            "geburtsdatum geburtsort"
            "telefon adresse"
            "ausweis ausweistyp";
        grid-template-columns: 1fr 1fr;
        align-items: end;
    }

    .firma .content {
        grid-template-areas: 
            "name uid"
            "adresse bestellungsreferenz"
            "kontaktperson email"
            "telefon .";
        grid-template-columns: 1fr 1fr;
        align-items: end;
    }

    .rechnung-an .content {
        grid-template-areas: 
            "adresse kontaktperson"
            "email oegfzp-mitglied";
        grid-template-columns: 1fr 1fr;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media (max-width: 991px) {
    .kurs-details .content .erfahrungszeit > .value{
        flex-wrap: wrap;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media (max-width: 1199px) {
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media (min-width: 1200px) {
    
}