/* Google Symbols - Achtung, ändere hier nichts leichtfertig!! */

@font-face {
    font-family: 'Material Symbols Rounded';
    font-style: normal;
    src: url('../google-symbols/font/material-symbols-rounded.woff2') format('woff');
}

/*@font-face {*/
/*    font-family: 'Material Symbols Outlined';*/
/*    font-style: normal;*/
/*    src: url('../google-symbols/font/material-symbols-outlined.woff2') format('woff');*/
/*}*/

/* mso ~ material-symbols-outlined :: eckige Symbole */
/*.mso {*/
/*    font-family: 'Material Symbols Outlined';*/
/*    font-weight: normal;*/
/*    font-style: normal;*/
/*    font-size: 24px;  !* Preferred icon size *!*/
/*    display: inline-block;*/
/*    line-height: 1;*/
/*    text-transform: none;*/
/*    letter-spacing: normal;*/
/*    word-wrap: normal;*/
/*    white-space: nowrap;*/
/*    direction: ltr;*/
/*}*/

/* msr ~ material-symbols-rounded :: abgerundete Symbole */
.msr {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    font-size: 1.5em;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    transform: translateX(-0.08em) translateY(0.05em); /* Dies zentriert Icons in Buttons */
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    color: #212529;
    font-variation-settings: 'FILL' 1;
    /* Die folgenden zwei Zeilen sorgen dafür, dass die Buttons mit Symbolen
    nicht übermäßig zu lang sind, sondern eher Quadratisch */
    vertical-align: -0.2em;
    letter-spacing: -0.15em;
}

/* gs ~ google-symbols */
.gs-dashboard {
    margin-top: 25px;
}

/* Für die h1 Überschriften der einzelnen HTML Seiten und Modal Überschriften*/
.gs-head {
    color: #8498A6; !important;
    font-size: 1em !important;
    vertical-align: -0.2em !important;
    transform: translateY(0em) !important;
}
/* */

/* Für die Symbole in der Topmenü Leiste */
.gs-topmenu {
    color: #8498A6; !important;
    font-size: 2.4em !important;
    vertical-align: -0.2em !important;
    transform: translateY(0em) !important;
}
/* */

.gs-white {
    color: #fff !important;
}

.gs-not-filled {
    font-variation-settings: 'FILL' 0 !important;
}

.gs-btn-white-not-filled {
    color: #fff !important;
    font-variation-settings: 'FILL' 0 !important;
}

.gs-btn-white-filled {
    color: #fff !important;
}

.gs-btn-black-not-filled {
    font-variation-settings: 'FILL' 0 !important;
}

.gs-1x {
    font-size: 1.7em !important;
}

.gs-2x {
    font-size: 2em !important;
}

.gs-3x {
    font-size: 3em !important;
}

.gs-4x {
    font-size: 4em !important;
}

.gs-5x {
    font-size: 5em !important;
}

.gs-6x {
    font-size: 6em !important;
}

.gs-7x {
    font-size: 7em !important;
}

.gs-8x {
    font-size: 8em !important;
}

.gs-9x {
    font-size: 9em !important;
}

.gs-10x {
    font-size: 10em !important;
}

/* Google Symbols Ende */

/* Für Überschriften */
@font-face {
  font-family: 'Cantarell';
  src:
    url('../fonts/Cantarell-Regular.ttf') format('truetype'),
    url('../fonts/Cantarell-Italic.ttf') format('truetype'),
    url('../fonts/Cantarell-Bold.ttf') format('truetype'),
    url('../fonts/Cantarell-BoldItalic.ttf') format('truetype');
}

/* Logo Schriftart */
@font-face {
  font-family: 'bitwise';
  src: url('../fonts/bitwise-webfont.woff') format('woff'), url('../fonts/bitwise-webfont.woff2') format('woff2');
}

.fusszeile {
    text-align: center !important;
    margin: 5px;
    padding: 5px;
    font-size: 80%;
    color: #8498A6;
}

img[alt=vorschau] {
    width: 250px;
    border: 1.5px solid #0f6674;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.6);
    -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.6);
    margin: 3px 0;
}

img.vorschau {
    width: 250px;
    border: 1.5px solid #0f6674;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.6);
    -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.6);
    margin: 3px 0;
}

.navbar-color {
  background-color: #14293a;
}

/* Font für Programm Logo in der Kopfzeile und Überschriften der MainSite*/
.logo {
  font-family: bitwise,"Helvetica Neue",Arial,sans-serif;
}

/* Paragraphen Text in gedämpfter Farbe */
p.head {
  color: #8498A6;
}

/* Farbe Seiten und Modal Überschrift */
h1.head, h3.head, h4.head {
  color: #8498A6;
  margin-bottom: 2rem;
}

h3.tickethead {
  color: #333;
  margin-bottom: 2rem;
}

h5.modal-head, h5.card-head, h5.head {
  color: #8498A6;
}

i.head-color {
  color: #8498A6;
  margin-top: 5px;
}

i.active-color {
  color: #495057;
  margin-top: 5px;
}

/* Für fixe Navbar */
body {
  padding-top: 5rem;
}

/* Schriftart Überschriften */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Cantarell', sans-serif;
}

/* Bootstrap message Korrektur */
.alert-error {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

.alert-error hr {
  border-top-color: #f1b0b7;
}

.alert-error .alert-link {
  color: #491217;
}

/* Bilder Rahmen und Rand */
img.rand {
  margin-right: 20px;
  margin-bottom: 20px;
  margin-top: 20px;
}

img.rahmen {
  border: 1px solid #0f6674;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
  -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.4);
  -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

/* Abstände */
.abstand {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.abstand-tabellen-fuss {
  margin-top: 2rem;
  margin-bottom: 12rem;
}

.abstandbottom {
  margin-top: 150px;
  margin-bottom: 20px;
}

/* Linkfarbe ? */
a, a:hover {
  color: #6EB4FD;
}

a.linkcolor {
    color: #6EB4FD;
}

/* Validierung Forms */
.has-danger .form-control {
  border-color: #d9534f;
}

.has-warning .form-control {
  border-color: #f0ad4e;
}

.form-control-danger, .form-control-warning {
  padding-right: 2.25rem;
  background-repeat: no-repeat;
  background-position: center right .5625rem;
  background-position-x: right;
  background-position-y: center;
  -webkit-background-size: 1.125rem 1.125rem;
  background-size: 1.125rem 1.125rem;
}

/* Unique_Together Fehler ausgabe */
.unique_together_error_text {
  color: #721c24;
}

.unique_together_error_td {
  background-color: #f8d7da;;
}

/* Tooltib Umcolorierung */
.tooltip-inner {
    background-color: #5a6ba4;
}

.tooltip.bs-tooltip-auto[x-placement^=top] .arrow::before, .tooltip.bs-tooltip-top .arrow::before {
    border-top-color: #5a6ba4;
}

.tooltip.bs-tooltip-auto[x-placement^=right] .arrow::before, .tooltip.bs-tooltip-right .arrow::before {
    border-right-color: #5a6ba4;
}

.tooltip.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .tooltip.bs-tooltip-bottom .arrow::before {
    border-bottom-color: #5a6ba4;
}

.tooltip.bs-tooltip-auto[x-placement^=left] .arrow::before, .tooltip.bs-tooltip-left .arrow::before {
    border-left-color: #5a6ba4;
}

/* Ändern der Ausgabe von Formular Hilfetexten */
p.help {
    color: #17a2b8 !important;
    font-style: italic;
    font-size: 90%;
}

/* Jumbotron hervorhebung */
div.look {
  background-color: #ededed4d;
}

/* Jumbotron für Ticket Dashboard */
div.ticketdashboard {
    background-color: #fbfbfb;
    border: 1px solid #dddddd;
}

/* Zwei weitere Alert Farbtypen für das Ticketsystem */
.alert-open {
    color: #004085;
    background-color: #9ACCFF;
    border-color: #6EB4FD;
}

.alert-vor-danger {
    color: #B15508;
    background-color: #FFC491;
    border-color: #FFA252;
}

/* Ein weiterer Alert Farbtyp für Things (den Typ: Funktion) */

.alert-success-gedreht {
    color: #155724;
    background-color: #A4D8AC;
    border-color: #9BC6A0;
}

/* Umrandung für den light Alert */

.alert-light {
    border-color: #eee;
}

/* Ein weiterer Alert in Lila */
.alert-irokese {
    color: #732983;
    background-color: #E9CDEE;
    border-color: #CC9AD6;
}

.badge-irokese {
    color: #fff;
    background-color: #CC9AD6;
}
.text-irokese {
    color: #CC9AD6;
}

a.irokese {
    /* color: #732983; */
    color: #444;
}

.table-irokese {
    background-color: #E9CDEE;
}
/* Irokese Ende */

/* Ein weiterer Alert in Sand */
.alert-sand {
    color: #8C5919;
    background-color: #FFF5E8;
    border-color: #D7A86E;
}

a.sand {
    color: #8C5919;
}
/* Sand Ende */


th.dashboard {
    background: #09314e;
    color: #fff;
    text-align: center;
}

/* Ausrichtung von Buttons in der Menüleiste */
form.abstand {
    margin-top: auto;
    margin-bottom: auto;
}

/* Login Page */
/*body.login {
    background-color: #efefef;
}*/

body.login {
    background-color: #fefefe;
}

/*.footer-login {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px; !* Set the fixed height of the footer here *!
    line-height: 60px; !* Vertically center the text there *!
    background-color: #09314e;
    color: #fff;
    text-align: center;
}

a.login {
    color: #fff;
    text-decoration: none;
}

a:hover.login {
    color: #fff;
}*/

a:hover {
    text-decoration: none;
}

/* Damit DropDown Menüs nicht unter der Kopfzeile verschwinden + Layout */
.dropdown-menu {
    margin: 4.5rem 0 0;
    color: #7abaff;
    background-color: #FFF5E8;
    border-color: #7abaff;
}

a.dropdown-item {
    color: #8C5919;
}

.dropdown-item:focus, .dropdown-item:hover {
    text-decoration: none;
    background-color: #D7A86E;
    color: #fefefe;
}
/* Damit DropDown Menüs nicht unter der Kopfzeile verschwinden + Layout Ende */

/* Login Footer */
p.footer-login-inpage {
    color: #09314e;
    text-align: center;
    margin-top: 100px;
}

a.login-inpage {
    color: #09314e;
    text-decoration: none;
}

a:hover.login-inpage {
    color: #09314e;
}
/* Login Footer Ende */

/* Checkbox Ausrichtung nach Update auf Bootstrap 4.4.1 korrigieren */
.form-control-checkbox {
    display: block;
    width: 100%;
    height: None;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
/* Checkbox Ausrichtung nach Update auf Bootstrap 4.4.1 korrigieren Ende */

/* CodeBlock Farbe */
pre code {
    color: #e83e8c;
}

/* einen cool aussehender Rahmen so wie in den Bootstrap Beispiel Docs > Auf ein div anwenden */
.cool-box-primary {
    padding:1rem;
    margin:0 1rem 1rem 1rem;
    border:solid #cce5ff;
    border-width:.4rem;
}

.cool-box-header-primary {
    background: #cce5ff;
    padding: 13px 2px 2px 35px;
    margin:0.5rem 1rem 0 1rem;
    color: #004085;
}

.cool-box-secondary {
    padding:1rem;
    margin:0 1rem 1rem 1rem;
    border:solid #e2e3e5;
    border-width:.4rem;
}

.cool-box-header-secondary {
    background: #e2e3e5;
    padding: 13px 2px 2px 35px;
    margin:0.5rem 1rem 0 1rem;
    color: #383d41;
}

.cool-box-success {
    padding:1rem;
    margin:0 1rem 1rem 1rem;
    border:solid #d4edda;
    border-width:.4rem;
}

.cool-box-header-success {
    background: #d4edda;
    padding: 13px 2px 2px 35px;
    margin:0.5rem 1rem 0 1rem;
    color: #155724;
}

.cool-box-danger {
    padding:1rem;
    margin:0 1rem 1rem 1rem;
    border:solid #f8d7da;
    border-width:.4rem;
}

.cool-box-header-danger {
    background: #f8d7da;
    padding: 13px 2px 2px 35px;
    margin:0.5rem 1rem 0 1rem;
    color: #721c24;
}

.cool-box-warning {
    padding:1rem;
    margin:0 1rem 1rem 1rem;
    border:solid #fff3cd;
    border-width:.4rem;
}

.cool-box-header-warning {
    background: #fff3cd;
    padding: 13px 2px 2px 35px;
    margin:0.5rem 1rem 0 1rem;
    color: #856404;
}

.cool-box-info {
    padding:1rem;
    margin:0 1rem 1rem 1rem;
    border:solid #d1ecf1;
    border-width:.4rem;
}

.cool-box-header-info {
    background: #d1ecf1;
    padding: 13px 2px 2px 35px;
    margin:0.5rem 1rem 0 1rem;
    color: #0c5460;
}

.cool-box-light {
    padding:1rem;
    margin:0 1rem 1rem 1rem;
    border:solid #f8f8f8;
    border-width:.4rem;
}

.cool-box-header-light {
    background: #f8f8f8;
    padding: 13px 2px 2px 35px;
    margin:0.5rem 1rem 0 1rem;
    color: #1b1e21;
}

.cool-box-dark {
    padding:1rem;
    margin:0 1rem 1rem 1rem;
    border:solid #d6d8d9;
    border-width:.4rem;
}

.cool-box-header-dark {
    background: #d6d8d9;
    padding: 13px 2px 2px 35px;
    margin:0.5rem 1rem 0 1rem;
    color: #1b1e21;
}

/* Damit ein Anker-Link Sprung nicht hinter dem Top Menü sonden unter diesem landet... */
.anker {
    padding-top: 90px;
    margin-top: -90px;
}

/* gelbe Form Eingabefelder */
.bg-form-migo {
    background-color: #fff3cd !important;
}