@import url("basic.css");
@media only screen and (orientation:portrait)
{
    .form-wrapper, #katForm select
    {
        width: 95%;
    }
    .form-label, .select-label {
        position: absolute;
        left: 0;
        top: 0.5vh;
        color: var(--cBgMain);
        background-color: transparent;
        z-index: 10;
        transition: transform 0.5s ease-out, font-size 0.5s ease-out;
        transform: translateY(-125%);
        font-size: .75em;
    }
    .form-input {
        position: relative;
        padding: 1vh 0 1vh 0;
        width: 100%;
        background-color: transparent!important;
        min-height: var(--uLineHightStandard);
        font-size: var(--uFontStandard);
        outline: 0;
        border: 0;
        box-shadow: 0 0.2vh 0 0 var(--cBgLight);
        transition: box-shadow 0.5s ease-out;
    }
    #loginForm em
    {
        display: block;
        float: none !important;
        width: 95%;
    }
    #loginForm div.form-group { margin-top: 4em; }
    #loginForm div.form-group ~ div.form-group { margin-top: 5.5vh; }

}
@media only screen and (orientation:landscape)
{
    .form-wrapper {
        max-width: 70%;
        min-width: 50%;
    }
    #katForm select
    {
        width: 20em;
        max-width: 95%;
    }
    .form-label, .select-label {
        position: absolute;
        left: 0;
        top: 0.5vh;
        color: var(--cBgMain);
        background-color: transparent;
        z-index: 10;
        transition: transform 0.5s ease-out, font-size 0.5s ease-out;
    }
    .focused .form-label, .select-label {
        transform: translateY(-125%);
        font-size: .75em;
    }
    .form-input {
        position: relative;
        padding: 1vh 0 1vh 0;
        width: 100%;
        background-color: transparent!important;
        min-height: var(--uLineHightStandard);
        font-size: var(--uFontStandard);
        outline: 0;
        border: 0;
        box-shadow: 0 0.2vh 0 0 var(--cBgLight);
        transition: box-shadow 0.5s ease-out;
    }

}

.form-group
{
    position:relative;
    margin-top: 5.5vh;
    margin-left: 1vw;
}


.form-input:focus {
    box-shadow: 0 0.5vh 0 0 var(--cBallMain);
}
.form-input.filled {
    box-shadow: 0 0.5vh 0 0 var(--cBgMain);
}
.form-input.finished {
    box-shadow: 0 0.5vh 0 0 var(--cSuccess);
}
.form-input.wrong {
    box-shadow: 0 0.5vh 0 0 var(--cTanzschulrot);
}
#captcha
{
    padding-top: 5vh;
}
/*----------------------------------------------------------------------------------  RANGE STYLING */
input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    margin: 9px 0;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 9px;
    cursor: pointer;
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    /*background: #b20e10;*/
    background: var(--cBallMain);
    border-radius: 23px;
    border: 0px solid #000000;
}
input[type=range]::-webkit-slider-thumb {
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    /*border: 1px solid #b20e10;*/
    border: 1px solid var(--cBallMain);
    height: 27px;
    width: 16px;
    border-radius: 6px;
    background: #ffffff;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -9.05px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    /*background: #ca1012;*/
    background: var(--cBallMain);
}
input[type=range]::-moz-range-track {
    width: 100%;
    cursor: pointer;
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    /*background: #b20e10;*/
    background: var(--cBallMain);
    border-radius: 23px;
    border: 0px solid #000000;
}
input[type=range]::-moz-range-track {
    height: 9px;
}
input[type=range]::-moz-range-thumb {
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    /*border: 1px solid #b20e10;*/
    border: 1px solid var(--cBallMain);
    height: 27px;
    width: 16px;
    border-radius: 6px;
    background: #ffffff;
    cursor: pointer;
}
input[type=range]::-ms-track {
    width: 100%;
    height: 9px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
}
input[type=range]::-ms-fill-lower {
    background: #9a0c0e;
    border: 0px solid #000000;
    border-radius: 46px;
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
    background: #b20e10;
    border: 0px solid #000000;
    border-radius: 46px;
    box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    border: 1px solid #b20e10;
    height: 27px;
    width: 16px;
    border-radius: 6px;
    background: #ffffff;
    cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
    background: #b20e10;
}
input[type=range]:focus::-ms-fill-upper {
    background: #ca1012;
}
#katTable
{
    table-layout: auto;
    width: 100%;
}
#katTable th, #katTable td
{
    padding: 0.3em;
    text-align: center;
    vertical-align: middle;
}
.kont
{
    display: none !important;
}
#katForm select
{
    min-height: 20pt;
    font-size: 16pt;
    margin-top: 1em;
    margin-bottom: 1em;
    padding: 0.5em 1em;
    border: solid 0.1em var(--cBallMain);
}
/*------BUTTONS------*/
button {
    background: none;
    border: 0;
    box-sizing: border-box;
    padding: 1em 2em;
    box-shadow: inset 0 0 0 0.1em var(--cBallMain);
    color: var(--cBallMain);
    font-size: inherit;
    font-weight: 700;
    position: relative;
    vertical-align: middle;
}
button::before,
button::after {
    box-sizing: inherit;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
}
.draw {
    transition: color 0.25s;
}
.draw::before,
.draw::after {
    border: 0.1em solid transparent;
    width: 0;
    height: 0;
}
.draw::before {
    top: 0;
    left: 0;
}
.draw::after {
    bottom: 0;
    right: 0;
}
.draw:hover {
    color: var(--cTanzschulrot);
}
.draw:hover::before,
.draw:hover::after {
    width: 100%;
    height: 100%;
}
.draw:hover::before {
    border-top-color: var(--cTanzschulrot);
    border-right-color: var(--cTanzschulrot);
    transition:
            width 0.25s ease-out,
            height 0.25s ease-out 0.25s;
}
.draw:hover::after {
    border-bottom-color: var(--cTanzschulrot);
    border-left-color: var(--cTanzschulrot);
    transition:
            border-color 0s ease-out 0.5s,
            width 0.25s ease-out 0.5s,
            height 0.25s ease-out 0.75s;
}
.meet:hover {
    color: var(--cSuccess);
}
.meet::after {
    top: 0;
    left: 0;
}
.meet:hover::before {
    border-top-color: var(--cSuccess);
    border-right-color: var(--cSuccess);
}
.meet:hover::after {
    border-bottom-color: var(--cSuccess);
    border-left-color: var(--cSuccess);
    transition:
            height 0.25s ease-out,
            width 0.25s ease-out 0.25s;
}
/*------CHECKBOX------*/
input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label {
    width: 60px;
    height: 30px;
    border-radius: 30px;
    border: 2px solid #ddd;
    background-color: #EEE;
    display: inline-block;
    content: "";
    float: left;
    margin-right: 5px;
    transition: background-color 0.5s linear;
    margin-top: 5px;
}
input[type="checkbox"] + label:hover {
    cursor: pointer;
}
input[type="checkbox"] + label::before {
    width: 30px;
    height: 30px;
    border-radius: 30px;
    background-color: #fff;
    display: block;
    content: "";
    float: left;
    margin-right: 5px;
    transition: margin 0.1s linear;
    box-shadow: 0px 0px 5px #aaa;
}
input[type="checkbox"]:checked+label{
    background-color: #2b8718;
}
input[type="checkbox"]:checked+label::before {
    margin: 0 0 0 30px;
}
#time
{
    font-size: 5vh;
}