/**
* Projekt AnnoPy Stylesheet - v1.0.0
*/

[x-cloak] { display: none !important; }

/**
********** VARIABLES **********
*/
:root {
    --text-color-main: #444444;
    --text-color-footer: #ffffff;
/*    --logo-color-main: #025691; */
    --logo-color-main-raw: 2, 86, 145;
    --logo-color-main: rgb(var(--logo-color-main-raw));
    --logo-color-light-raw: 33, 114, 172;
    --logo-color-dark-raw: 2, 49, 83;
    --logo-color-light: rgb(var(--logo-color-light-raw));
    --logo-color-dark: rgb(var(--logo-color-dark-raw));
    --twitter-color-main: #1da1f2;
    --discord-color-main: #7289d9;
    --background-color-main: #ffffff;
    --background-color-back: rgba(var(--logo-color-dark-raw), 0.07);
}

/**
********** GENERAL **********
*/

body {
    font-family: "Open Sans", sans-serif;
    color: var(--text-color-main);
    min-height: 100vh;
}

.flex-fill {
    flex: 1 1 auto;
}

[role=button]:hover {
    background-size: 0 1px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Raleway", sans-serif;
}

.card button {
    z-index: 2;
    position: relative;
}

.site-content-forground {
    background-color: var(--background-color-main);
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    padding-top: calc(var(--bs-gutter-y) * .5);
    padding-bottom: calc(var(--bs-gutter-y) * .5);
}

.default-shadow {
    box-shadow: 0 3px 10px rgb(0 0 0 / 10%);
}

.content-container {
}

.no-line-breaks {
    white-space: nowrap;
}

.course-card-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.test-row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.align-right-container {
    display: flex;
    justify-content: flex-end;
}

.mx-1 {
    margin-left: calc(0.25 * var(--bs-gutter-x));
    margin-right: calc(0.25 * var(--bs-gutter-x));
}

.mx-2 {
    margin-left: calc(0.5 * var(--bs-gutter-x));
    margin-right: calc(0.5 * var(--bs-gutter-x));
}

.mx-3 {
    margin-left: calc(0.75 * var(--bs-gutter-x));
    margin-right: calc(0.75 * var(--bs-gutter-x));
}

.mx-4 {
    margin-left: var(--bs-gutter-x);
    margin-right: var(--bs-gutter-x);
}

.mt-1 {
    margin-top: calc(0.25 * var(--bs-gutter-y));
}

.mt-2 {
    margin-top: calc(0.5 * var(--bs-gutter-y));
}

.mt-3 {
    margin-top: calc(0.75 * var(--bs-gutter-y));
}

.mt-4 {
    margin-top: var(--bs-gutter-y);
}



/**
********** Groups **********
*/



.body-above-btns-footer {
    padding-bottom: 0px;
}


.btns-footer {
    background: var(--background-color-main);
    border-top: hidden;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    padding-top: 0px;
}


.course_enter_group {
    display: flex;
}

.card-input-container {
    flex-grow: 1;
    padding-right:var(--bs-card-cap-padding-x);
}

.placeholder-card {
    border-style: dashed;
}

.container-muted {
    filter: opacity(0.8);
}

/**
********** HEADER **********
*/



.logo-label {
    margin-bottom: 0px;
}

/**
********** PAGE TITLE & BREADCRUMBS **********
*/

.heading h1 {
    margin: 5px 0 0;
    padding: 20px 0px;
}

/* MOBILE EXECPTION!!! */
#heading .separator {
    display: flex;
    align-items: center;
    text-align: center;
    margin-bottom: 15px;
}

#heading .separator::before, #heading .separator::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid var(--text-color-main);
}

#heading .separator:not(:empty)::before {
    margin-right: 1em;
    margin-left: 10em;
}

#heading .separator:not(:empty)::after {
    margin-left: 1em;
    margin-right: 10em;
}

.editor-content img {
    max-width: 100%;
}



/**
Styling Datatable
*/
table.dataTable thead>tr>th.dt-orderable-asc:hover, table.dataTable thead>tr>th.dt-orderable-desc:hover, table.dataTable thead>tr>td.dt-orderable-asc:hover, table.dataTable thead>tr>td.dt-orderable-desc:hover {
    outline: none;
}
table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order, table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order, table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order, table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order, table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order, table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order, table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order, table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order {
    position: sticky;
}

.dt-column-title {
    padding-right: 10px;
}

table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order:before, table.dataTable thead>tr>th.dt-orderable-asc span.dt-column-order:after, table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order:before, table.dataTable thead>tr>th.dt-orderable-desc span.dt-column-order:after, table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:before, table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:after, table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:before, table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:after, table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order:before, table.dataTable thead>tr>td.dt-orderable-asc span.dt-column-order:after, table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order:before, table.dataTable thead>tr>td.dt-orderable-desc span.dt-column-order:after, table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:before, table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:after, table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:before, table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:after {
    opacity: 0;
}
table.dataTable thead>tr>th.dt-ordering-asc span.dt-column-order:before, table.dataTable thead>tr>th.dt-ordering-desc span.dt-column-order:after, table.dataTable thead>tr>td.dt-ordering-asc span.dt-column-order:before, table.dataTable thead>tr>td.dt-ordering-desc span.dt-column-order:after {
    opacity: .6;
}

/**
Styling Breadcrumb
*/

.breadcrum-nav {
    --bs-breadcrumb-divider: '';
    display: flex;
    margin-left: -10px;
}
.breadcrumb {
    display: flex;
    align-items: center;
}
.breadcrumb a {
    text-decoration: none;
    color: rgb(107, 114, 128);
    margin-left: 10px;
    margin-right: 10px;
}
.breadcrumb a:hover {
    text-decoration: none;
    color: rgb(55, 65, 81);
}
.breadcrumb-seperator {
    display: flex;
    align-items: center;
    color: rgb(107, 114, 128);
}
.breadcrumb svg {
    flex-shrink: 0;
    height: 24px;
}

.modal{
    white-space: normal;
}

h1.block-heading {
    padding-bottom: 0px;
}

.site-content-forground {
    padding-top: 0px;
}

legend {
    font-size: var(--bs-body-font-size);
}

table.table.dataTable {
    margin-top: 5px;
}