@import "../Stylesheets/Configuration.css";
@import "Font.css";

body{font-family: var(--font-regular);}
p, h1,h2,h3,h4,h5,h6{
    margin-top: 0
}

.light{ font-weight: 300 }
.medium{ font-weight: 500 }
.semibold{ font-weight: 600 }
strong, b{ font-weight: 700;}
.black{ font-weight: 900 }
.italic{ font-style: italic}

.text-no-margin{
    margin-bottom: 0 !important;
}
.text-margin-small{
    margin-bottom: 7px !important;
}

.font-special{font-family: var(--font-special)}
.font-regular{font-family: var(--font-regular)}

h6, .h6{font-size: 1.1rem}
h5, .h5{font-size: 1.2rem}
h4, .h4{font-size: 1.4rem}
h3, .h3{font-size: 1.6rem}
h2, .h2{font-size: 1.8rem}
h1, .h1{font-size: 2.2rem}

.text-color-white, .text-color-white > *{color: #cccccc;}
.text-color-default, .text-color-default > *{color: var(--text-color-default);}
.text-color-1, .text-color-1 > *{color: var(--color-1);}
.text-color-2, .text-color-2 > *{color: var(--color-2);}
.text-color-3, .text-color-3 > *{color: var(--color-3);}
.text-color-4, .text-color-4 > *{color: var(--color-4);}
.text-color-5, .text-color-5 > *{color: var(--color-5);}
.text-color-6, .text-color-6 > *{color: var(--color-6);}
.text-color-7, .text-color-7 > *{color: var(--color-7);}
.text-color-8, .text-color-8 > *{color: var(--color-8);}
.text-color-9, .text-color-9 > *{color: var(--color-9);}
.text-color-10, .text-color-10 > *{color: var(--color-10);}
.text-color-11, .text-color-11 > *{color: var(--color-11);}
.text-color-12, .text-color-12 > *{color: var(--color-12);}

a.btn, a[title*="Button"]{
    border: 1px solid #ccc;
    padding: 5px 10px;
    line-height: 1;
    text-align: center;
    display: inline-block;
    text-decoration: none;
}
a.btn-round, a[title*="Button: rund"]{
    -webkit-border-radius: 10px / 50%;
    -moz-border-radius:  10px / 50%;
    border-radius:  10px / 50%;
}

a.btn-default{
    background-color: var(--bg-color-default);
    color: var(--btn-text-color-default);
}

a.btn-white, a[title="Button: weiß"]{
    background: white;
    color: var(--btn-text-color-white);
}
a.btn-color-1, a[title="Button: color-1"], a[title="Button: rund color-1"]{
    background-color: var(--color-1) !important;
    color:var(--btn-text-color-1) !important;
}

a.btn-color-2, a[title="Button: color-2"], a[title="Button: rund color-2"]{
    background-color: var(--color-2);
    color: var(--btn-text-color-2) !important;
}
a.btn-color-3, a[title="Button: color-3"], a[title="Button: rund color-3"]{
    background-color: var(--color-3);
    color: var(--btn-text-color-3) !important;
}
a.btn-color-4, a[title="Button: color-4"], a[title="Button: rund color-4"]{
    background-color: var(--color-4);
    color: var(--btn-text-color-4) !important;
}
a.btn-color-5, a[title="Button: color-5"], a[title="Button: rund color-5"]{
    background-color: var(--color-5);
    color: var(--btn-text-color-5) !important;
}
a.btn-color-6, a[title="Button: color-6"], a[title="Button: rund color-6"]{
    background-color: var(--color-6);
    color: var(--btn-text-color-6) !important;
}
a.btn-color-7, a[title="Button: color-7"], a[title="Button: rund color-7"]{
    background-color: var(--color-7);
    color: var(--btn-text-color-7) !important;
}
a.btn-color-8, a[title="Button: color-8"], a[title="Button: rund color-8"]{
    background-color: var(--color-8);
    color: var(--btn-text-color-8) !important;
}
a.btn-color-9, a[title="Button: color-9"], a[title="Button: rund color-9"]{
    background-color: var(--color-9);
    color: var(--btn-text-color-9) !important;
}
a.btn-color-10, a[title="Button: color-10"], a[title="Button: rund color-10"]{
    background-color: var(--color-10);
    color: var(--btn-text-color-10) !important;
}
a.btn-color-11, a[title="Button: color-11"], a[title="Button: rund color-11"]{
    background-color: var(--color-11);
    color: var(--btn-text-color-11) !important;
}
a.btn-color-12, a[title="Button: color-12"], a[title="Button: rund color-12"]{
    background-color: var(--color-12);
    color: var(--btn-text-color-12) !important;
}

a[title*="Button"]:hover{
    filter: brightness(85%);
}

table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
}

table tr td{
    background-color: #efefef;
}

table thead tr td,
table thead tr th{
    text-align: left;
}
table.table-bordered {
    border: 1px solid #e9ecef;
}
table.table-striped tbody tr:nth-of-type(2n+1) > td {
    filter: brightness(85%);
}
table.table-hover tbody tr:hover{
    filter: brightness(85%);
}
table.table-sm {}
table.table-table-inverse {}

tr.bg-color-1 > td{background-color: var(--color-1) !important}
tr.bg-color-2 > td{background-color: var(--color-2) !important}
tr.bg-color-3 > td{background-color: var(--color-3) !important}
tr.bg-color-4 > td{background-color: var(--color-4) !important}
tr.bg-color-5 > td{background-color: var(--color-5) !important}
tr.bg-color-6 > td{background-color: var(--color-6) !important}
tr.bg-color-7 > td{background-color: var(--color-7) !important}
tr.bg-color-8 > td{background-color: var(--color-8) !important}
tr.bg-color-9 > td{background-color: var(--color-9) !important}
tr.bg-color-10 > td{background-color: var(--color-10) !important}
tr.bg-color-11 > td{background-color: var(--color-11) !important}
tr.bg-color-12 > td{background-color: var(--color-12) !important}

.text-lowercase{ text-transform: lowercase}
.text-uppercase{ text-transform: uppercase}
.text-capitalize{ text-transform: capitalize}
.text-start{text-align: left}
.text-end{text-align: right}

/*Badge*/
span.badge{
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
}

span.badge.rounded-pill{border-radius: 50rem !important}
span.badge.bg-color-1{background-color: var(--color-1)}
span.badge.bg-color-2{background-color: var(--color-2)}
span.badge.bg-color-3{background-color: var(--color-3)}
span.badge.bg-color-4{background-color: var(--color-4)}
span.badge.bg-color-5{background-color: var(--color-5)}
span.badge.bg-color-6{background-color: var(--color-6)}
span.badge.bg-color-7{background-color: var(--color-7)}
span.badge.bg-color-8{background-color: var(--color-8)}
span.badge.bg-color-9{background-color: var(--color-9)}
span.badge.bg-color-10{background-color: var(--color-10)}
span.badge.bg-color-11{background-color: var(--color-11)}
span.badge.bg-color-12{background-color: var(--color-12)}

.cke_panel_listItem > a[title="Zeile: bg-color-1"]{color: var(--color-1) !important;}
.cke_panel_listItem > a[title="Zeile: bg-color-2"]{color: var(--color-2) !important;}
.cke_panel_listItem > a[title="Zeile: bg-color-3"]{color: var(--color-3) !important;}
.cke_panel_listItem > a[title="Zeile: bg-color-4"]{color: var(--color-4) !important;}
.cke_panel_listItem > a[title="Zeile: bg-color-5"]{color: var(--color-5) !important;}
.cke_panel_listItem > a[title="Zeile: bg-color-6"]{color: var(--color-6) !important;}
.cke_panel_listItem > a[title="Zeile: bg-color-7"]{color: var(--color-7) !important;}
.cke_panel_listItem > a[title="Zeile: bg-color-8"]{color: var(--color-8) !important;}
.cke_panel_listItem > a[title="Zeile: bg-color-9"]{color: var(--color-9) !important;}
.cke_panel_listItem > a[title="Zeile: bg-color-10"]{color: var(--color-10) !important;}
.cke_panel_listItem > a[title="Zeile: bg-color-11"]{color: var(--color-11) !important;}
.cke_panel_listItem > a[title="Zeile: bg-color-12"]{color: var(--color-12) !important;}