/** Flash Messages ************************************************************/


.typo3-messages{

    font-size: 1.2em;
    padding: 17px 15px 1px 0;
}
.typo3-messages li{
    padding-left: 1rem;
    background: var(--light-grey);
    color: var(--text-color);
}

.typo3-messages h4{
    margin-bottom: 0;
    font-weight: bold;
}

.typo3-messages p{
    margin-top: 0;
}

.typo3-messages .alert-danger{
    border: 2px solid var(--red);
}

.typo3-messages .alert-success{
    border: 2px solid var(--mint);
}


/** SPINNER *******************************************************************/
.spinner{
    position: absolute;
    top:0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index:99;
}

.spinner-inner{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    /* max-height: 100vh; */
    background-color: rgba(0,0,0,0.5);

}

.spinner-loading .dataTables_empty{
   color: transparent;
}



/** hiw styled h1 *************************************************************/
.hiw{
    margin: 40px 0;
}

/* Style for h2.hiw to align icon and text in one line */
h2.hiw {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

h2.hiw > span {
    margin-right: 15px; /* Space between icon and text */
}

.hiw>span{
    color: #fff;
    background: var(--deep-blue);
    width: 70px;
    height: 70px;
    border-radius: 35px;
    /* Use flexbox for perfect centering of SVG */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Ensure SVG is properly centered */
.hiw>span svg {
    margin: 0;
}


/** DATATABLE *****************************************************************/

.dataTable{
    width: 100%;
}

.dataTables_wrapper .dt-buttons,
.dataTables_wrapper .dataTables_filter{
    float:right;
    width: auto;
}


.dataTable th {
    position: sticky!important;
    top: 36px;
    box-shadow: 4px 3px 5px 0px rgba(0, 0, 0, 0.2)
}
.modal-dialog .dataTable th{
    top: 0;
}

.dataTable th::before,
.dataTable th::after{
    top: 0;
}

.childTable thead tr th{
   top:0;
}
table.dataTable tbody tr>td{
    border-bottom: 1px solid var(--dark-grey);
}

.dataTable th.dt-right,
.datatTable td.dt-right {
    text-align: right;
}

.dataTable tr.pupils-shown td{
    background: var(--light-grey);
    color: var(--text-color);
    font-weight: bold;
}

table.dataTable tbody tr.selected a,
table.dataTable tbody th.selected a,
table.dataTable tbody td.selected a{
    color: inherit!important;
}

/** MODAL *********************************************************************/
#typeSelection > .modal-dialog{
    min-width: 880px;
}
#addPupils > .modal-dialog,
#editPupil > .modal-dialog,
#editTeacher > .modal-dialog{
    min-width: 400px;
}

.modal .modal-dialog{
    background: #fff;
}

.modal iframe{
    width:100%;
    border:none;
    min-height: 590px;
}

.modal .ce-gallery figure.video{
    width: 100%;
    table-layout: fixed;
}

.modal .ce-gallery figure.video img{
    width: 100%;
}

/* twoclickmedia: Video als responsive, zentrierte 16:9-Box im Modal.
   Überschreibt die fixen Inline-Maße (width/height) aus dem twoclickmedia-
   Template; nur padding-top steuert dann das Seitenverhältnis. */

/* Galerie-Kette im Modal voll breit & zentriert (sonst 20px-Rechtsrand der
   .ce-column -> leicht aus der Mitte). */
.modal .ce-gallery .ce-column{
    width: 100%;
    margin-right: 0;
}
.modal .ce-gallery .ce-column figure.video{
    margin-left: auto;
    margin-right: auto;
}
.modal .video-embed,
.modal .twoclickmedia{
    width: 100%;
}

.modal .twoclickmedia__wrapper{
    display: block;
    width: 100% !important;
    height: 0 !important;
    margin-left: auto;
    margin-right: auto;
}

/* twoclickmedia bietet keine Option, den Overlay-Datenschutzhinweis zu
   deaktivieren (im Partial fest verdrahtet). Wir blenden ihn aus, da der
   Hinweis bereits als figcaption unter jedem Video steht (Video.fluid.html). */
.twoclickmedia__privacy{
    display: none !important;
}

@media (min-width: 992px) {
    .modal-lg {
      width: 1110px;
      max-width: 1900px
    }
    .modal-sm{
        width: 600px;
        max-width: 800px
    }
  }


/** BUTTONS *******************************************************************/
.btn-mb {
    padding: .375rem .6rem .4rem .6rem;
    position: relative;
    text-transform: uppercase;
    font-weight: bold;
    font-size: .75rem;
    border-radius: 1.2rem;
    border: 0;
    color: #FFF;
    margin: 0 10px;
}

.btn-alert {
    background: var(--red);
    color: var(--white);
}
.btn-alert:active,
.btn-alert:focus,
.btn-grey:active,
.btn-grey:focus,
.btn-grey:hover
{
    color: var(--white);
}
.btn-grey {
    background: var(--dark-grey);
    border: 1px solid var(--dark-grey);
    color: var(--white);
}

.btn-invers-white {
    background: transparent;
    border: 1px solid var(--white);
}

.btn-help{
    margin: 20px 20px 20px 0;
}

button.btn-secondary:not(:disabled):not(.disabled):active,
button.btn-secondary:not(:disabled):not(.disabled):focus{
    background-color: var(--red);
    border: none;
}
/** TOASTS ********************************************************************/
.toastwrapper{
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index:9999;
}

.toast[role="info"]{
    border: 1px solid var(--deep-blue);
}
.toast[role="info"] .toast-header{
    background: var(--deep-blue);
    color: #fff;
}

.toast[role="alert"]{
    border: 1px solid var(--red);
}

.toast[role="alert"] .toast-header{
    background: var(--red);
    color: #fff;
}

.toast[role="success"]{
    border: 1px solid var(--turquoise);
}

.toast[role="success"] .toast-header{
    background: var(--turquoise);
    color: #fff;
}



/******************************************************************************/
.collection-container{
    background: var(--light-grey);
    padding: 45px 40px;
}

/** fluid styled content *****************************************************/
.ce-gallery img{
    max-width: 100%;
    height: auto;
}


ul.linklist{
    list-style-type: none;
    padding-left: 0;
}

ul.linklist li{
    display: inline-block;
}