:root {
    --text: #333333;
    --light-bg: #f7f7f7;
}

body {
    font-family: Helvetica, Calibri, sans-serif;
    font-size:18px;
    color: var(--text);
    margin:0;
    padding:0;
}

* {
    box-sizing: border-box;
}
a,
a:link,
a:visited,
a:hover {
    text-decoration:none;
    color: var(--text);
}

.page {
    width:100%;
    margin:0;
    padding:0;
}
.page--inner {
    max-width:1280px;
    max-width:90%;
    margin: 0 auto 2em auto;
}

.page--header {
    padding-top:2em;
    display:flex;
    flex-flow: row wrap;
    justify-content:space-between;
    align-items: flex-end;
}
.page--header .logo {
    display:block;
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat;
    height:100px;

    max-width:200px;
    width: 90%;

    background-image: url(../img/logo.png);
}



.projectinfo .project--title {
    font-weight: bold;
}
/* .projectinfo .project--description {

} */
.projectinfo .project--annotation {
    font-style: italic;
}



.page--footer {
    display:flex;
    flex-flow: row wrap;
    justify-content: space-between;

    align-items: center;
    margin-top:2em;
    width:100%;
    padding:1em;
    font-size:.8em;
    background: #F7F7f7;
    text-align: center;
}




.palette {
    margin-top: 1em;
}
    .palette--header {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-items:flex-end;
        margin: 1.5em 0 .5em 0;
    }

        .palette--header .collapse-trigger {
            display:inline-block;
            flex-basis: 15px;
            cursor: pointer;
            border-radius: 1px;
            text-align: center;
            color: #666;
            top: 0;
            margin-bottom: 4px;
            margin-right: .25em;
            height: 15px;
            width: 15px;
            font-size: .8em;
        }
        .palette--header .collapse-trigger:after {
            content:"\25b2";
            display:block;
            margin-top: -1px;

        }
        .palette.collapsed .palette--header .collapse-trigger:after {
            content:"\25bc"
        }

        .palette--header h2 {
            display:block;
            font-size:1.5rem;
            margin:0;
            flex-basis: auto;
            flex-grow: 1;
            flex-shrink: 1;
        }

        .palette--header .palette--desc {
            flex-basis: 100%;
            color: #999;
        }

.palette--content {
    display:flex;
    flex-flow:row wrap;
    justify-content: flex-start;
    align-items: stretch;
    max-height: 999999px;
    transition: all .5s ease;
    overflow: hidden;
}
.palette.collapsed .palette--content {
    max-height:0;

}
.palette .field-url {
    position: relative;
}
.palette .field-url:before {
    content: "based on:";
    display: block;
    position: absolute;
    font-size:.75em;
    opacity:.8;
    bottom:1em;

}

.colorBox {
    /* cursor: n-resize	; */
    position: relative;
    height:200px;
    flex-grow: 0;
    transition: all .3s ease-in-out;

    padding: .5em;
    min-width:150px;
    max-width:150px;

    text-align:center;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    align-items: center;
}
@media(max-width:768px) {
    .colorBox {
        height:100px;
        max-width:100%;
        width:100%;
    }
}

.colorBox .actions {
    display:flex;
    flex-flow: row nowrap;
    justify-content: stretch;
    align-items: center;

    margin-block-end: auto;
}

.colorBox .actions .actionBtn {
    background:rgba(255,255,255,.2);
    color:var(--text);
    opacity:1;
    border:none;
    cursor: pointer;
    transition: opacity .2s ease-in-out;
}
.colorBox.dark .actions .actionBtn {
    color: var(--light-bg);
}

.colorBox .actions .actionBtn:hover {
    opacity: .8;
}

/* shrink all colorboxes when hovering */
/*
.palette--content:hover .colorBox {
    padding:.33em;
    min-width:10px;

}
.palette--content:hover .colorBox * {
    font-size:.6rem;
}
*/

/* grow single colorbox again */
/*
@media(min-width:768px) {
    .colorBox:hover {
        flex-grow: 6;
    }
}
.colUsageTopic {
    white-space: break-spaces;
    word-break: normal;
    max-width: 150px;
}
*/

.colorBox .colUsageTopic {
    width:100%;
    white-space: normal;
    word-wrap: normal;
}
.colorBox hr {
    width:66%;
    border: none;
    border-bottom: 1px solid var(--text);
}

.colorBox.dark  hr {
    border-bottom-color: var(--light-bg);
}



.colorBox .source {
    font-style: italic;
    display:block;
}
.colorBox .source:before {
    display:inline-block;
    content: "Source: ";
}


.colorBox .dragHandle {
    position: absolute;
    left: 0;
    bottom: 0;
    font-size: .8em;
    font-weight: normal;
    opacity:.2;
    cursor:pointer;
    z-index: +111;
}






/* default text sizes */
.palette--content:hover .colorBox:hover .small,
.colorBox .small,
.palette--content:hover .colorBox:hover .colName,
.colorBox .colName,
.palette--content:hover .colorBox:hover .colUsageTopic,
.colUsageTopic {
    font-size: .8rem;
}


.palette--content:hover .colorBox:hover > *:not(.small),
.colorBox > *:not(.small),
.palette--content:hover .colorBox:hover .colValue,
.colorBox .colValue {
    font-size: 1.2rem;
    font-weight: bold;
}


/* font colors */
.colorBox[data-color-type="dark"] a,
.colorBox[data-color-type="dark"] a:link,
.colorBox[data-color-type="dark"] a:visited,
.colorBox[data-color-type="dark"] a:hover,
.colorBox[data-color-type="dark"] {
    color: #f7f7f7;
}

.colorBox[data-color-type="light"] a,
.colorBox[data-color-type="light"] a:link,
.colorBox[data-color-type="light"] a:visited,
.colorBox[data-color-type="light"] a:hover,
.colorBox[data-color-type="light"] {
    color: #333;
}



/* Testbox */

.testbox {
    display:block;
    border:1px solid #eaeaea;
    width:100%;
    margin-top:2em;
    margin-bottom:2em;
    box-shadow:3px 3px 10px #eaeaea;
}
.testbox .testbox--content {
    padding:2em;
}
.testbox .test_headline {
    font-size:38px;
}
.testbox .test_text {
    font-size:18px;
}
.testbox .status {
    background: var(--light-bg);
    color: var(--text);
    padding:1em 2em 1em 2em;
}


.testbox .readability_table {
    font-size: .8em;
    border: 1px solid #ccc;
}

.testbox_bg_txt_switch {
    display:flex;
    flex-flow:row wrap;
    justify-content: flex-start;
}
.testbox_bg_txt_switch > div:first-of-type {
    flex-basis:100%;
}






/* switch checkbox */
.switch label {
position: relative;
display: inline-block;
width: 3em;
height: 1.5em;
}

.switch input {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 0px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 0px;
}

.switch .slider { /* Grundfläche */
position: absolute;
cursor: pointer;
/*  top: .5em; */
width: 3em;
height: 1.7em;
border-radius: 1em;
transition: all .3s ease-in-out;
border: 1px solid #242428;
}

.switch  .slider::before {  /* verschiebbarer Button */
position: absolute;
content: "";
height: 1.3em;
width: 1.3em;
left: .1em;
bottom: .1em;
background-color: #39393D;
border-radius: 50%;
transition: all .3s ease-in-out;
}

.switch input:checked + .slider {
background-color: transparent;
}


.switch input:checked + .slider::before {
transform: translateX(1.5em);
}


.switch .switch_onstate,
.switch switch_offstate {
font-size:.8em;
}



/** generics for MD **/
.md.strikethrough {
text-decoration: line-through;
font-style: italic;
}





/** Notification Box **/

.notificationbox {
    display:none;
    padding:1em;
    border:3px solid;
}
.notificationbox.show {
    display:block;
}

.notificationbox[data-level='error'] {
    background-color: #FF7777;
    border-color: red;
}
.notificationbox[data-level='warning'] {
    background-color: #DDDD22;
    border-color: yellow;
}
.notificationbox[data-level='ok'] {
    background-color: #7777FF;
    border-color: #3333FF;;
}