/* @name lux-styles.css
 * @author Scheifele
 * @description Allgemeines Stylesheet mit Responsive Design im Fokus
 */

/* AUTOCOMLETE V2 */
.ui-ac { padding: 0px; border: 1px solid #ccc; background-color: #fff; }
.ui-ac > * { display: block; margin: 0; padding: 8px 16px; overflow: hidden; text-align: left; font-size: 15px; text-decoration: none; }
.ui-ac .ac_item { cursor: pointer; color: #000 }
.ui-ac .ac_item_category:not(:first-child) { border-top: 1px dotted #ccc; }
.ui-ac .ac_item_category { color: #757575; }
.ui-ac .ac_item.selected { font-weight: bold; }

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: 0;
}
input::-moz-focus-inner { border: 0; }
.unselectable { cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }


.less-table {
    width: 100%;
    margin-bottom: 1rem;
    color: #2f3037;
    border-collapse: collapse;
}
.less-table td, .less-table th {
    padding: 8px;
    vertical-align: top;
    border-top: 1px solid #e3e6f0;
}
.table-slim td, .table-table th { padding: 4px; }

input, button, select, option, textarea {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
.inblock { display: inline-block; }
.vatop { vertical-align: top; }
.formblock, .formblock-half, .formblock-quarter, .formblock-quarter3, .formblock-inlineblock {
    display: inline-block;
    font-size: 13px;
    min-width: 110px;
}
.formblock {
    width: 100%;
}
.formblock-half {
    padding: 0 16px;
    width: calc(50% - 32px);
}
.formblock-quarter {
    padding: 0 16px;
    width: calc(25% - 32px);
}
.formblock-quarter3 {
    padding: 0 16px;
    width: calc(75% - 32px);
}
.formblock-inlineblock {
    padding: 0 16px;
}
.formblock label, .formblock-half label {
    width: 100%;
    display: inline-block;
}
.form-controll {
    width: 100%; width: -moz-available; width: -webkit-fill-available;
    background-color: white;
    border: 1px solid gray;
    height: 28px;
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 14px;
}
textarea.form-controll {
    min-height: 28px;
    font-size: 13px;
    padding: 6px 6px;
    resize: vertical;
    height: 56px;
}
button.form-controll {
    cursor: pointer;
}
select.form-controll:not([multiple]) {
    background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") right .75rem center no-repeat #fff;
    background-size: 8px 10px;
    padding: 3px 1.75rem 3px 3px;
    color: #495057;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.form-controll:disabled { background-color: #00000030 !important; }
.alert {
    margin: 8px;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}
.alert-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}
.alert-warning {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}
.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}

.cln-button {
    background: white;
    border: 1px solid gray;
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
}
.aktiv-button {
    display: block;
    padding: 4px 8px;
    border: 1px solid gray;
    border-radius: 6px;
    cursor: pointer;
}
/* animated spoiler */
input[id^="spoiler"] { display: none; }
input[id^="spoiler"] + label {
    display: block;
    width: auto;
    margin: 4px;
    padding: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: all .6s;

    color: #333;
    background: #ccc;
    text-decoration: underline;
}
input[id^="spoiler"]:checked + label {
    transition: all .6s;
    background: none;
}
input[id^="spoiler"] ~ .spoiler-content {
    height: auto;
    opacity: 1;
    padding: 10px; 
    transition: all .6s;
    border: 1px solid gray;
    border-radius: 6px;
}
input[id^="spoiler"]:checked + label + .spoiler-content {
    width: 95%;
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    background: #eee;
    border: 1px solid #ccc;
    border-radius: 8px;
    transition: all .6s;
}
.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    border: 0;
    cursor: pointer;
}
.btn:disabled { cursor: not-allowed; background: #ccc; color: gray }
.btn-primary { background: #007bff; color: white; }
.btn-bmr {
    display: block;
    width: initial;
    margin-left: auto;
}
.btn-cta {
    display: block;
    margin-left: auto;
    background: #9EC536;
    border: none;
    padding: 9px 15px;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
}


/* Higher Priority Classes*/
.m-auto { margin: auto; }
.m-1 { margin: 8px; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mb-1 { margin-bottom: 8px; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.ml-1 { margin-left: 8px; }
.mr-1 { margin-right: 8px; }

.p-1 { padding: 8px; }
.pt-1 { padding-top: 8px; }
.pb-1 { padding-bottom: 8px; }
.pl-1 { padding-left: 8px; }
.pr-1 { padding-right: 8px; }
.p-2 { padding: 16px; }
.pt-2 { padding-top: 16px; }
.pb-2 { padding-bottom: 16px; }
.pl-2 { padding-left: 16px; }
.pr-2 { padding-right: 16px; }

.bbdg-1 { border-bottom: 1px dashed gray; }
.w-ini { width: initial !important; }
.cursor-click { cursor: pointer; }

@media (max-width: 714px) {
    .formblock-half {
        width: calc(100% - 32px);
    }
    .formblock-quarter {
        width: calc(50% - 32px);
    }
    .d-d { display: none !important; }
}

@media (min-width: 715px) {
    .d-m { display: none !important; }
}