/*Font

@font-face {
	font-family: CalibreS;
	src: url(../fonts/Calibre/Calibre-Semibold.otf)
}

@font-face {
	font-family: CalibreL;
	src: url(../fonts/Calibre/CalibreLight.otf)
}

@font-face {
	font-family: CalibreM;
	src: url(../fonts/Calibre/Calibre-Medium.otf)
}

@font-face {
	font-family: CalibreB;
	src: url(../fonts/Calibre/Calibre-Bold.otf)
}

body{
    font-family: CalibreM;
}*/
    /* VARIABLE DEFINITIONS */

     :root {
        --primary: #6DB16B;
        --secondary: #4CA75C;
        --accent: whitesmoke;
        --black_col: #343a40;
        --red_col: #9F4F48;
        --gray: #4ca75dee;
        --grayback: #dcf5d377;

    }
    .table-dark{

        --bs-table-bg: var(--black_col) !important;
    }
    .btn-secondary, .btn-secondary:hover , .btn-secondary:focus{
        color: #fff;
        background-color: var(--black_col);
        border-color: var(--black_col);
    }
    body {
        overflow: auto;
    }

    .dropmenu-w {
        width: 300px;
    }

    .scrollable-750 {
        overflow-y: auto;
        height: 744px;
    }

    .scrollable-650 {
        overflow-y: auto;
        height: 710px;
    }
    .closelink{
        box-sizing: content-box;
    }
    .scrollable-550 {
        overflow-y: auto;
        height: 695px;
    }

    .overflowlist {
        overflow-x: auto;
        height: 400px;
    }

    .animationdrop {
        width: 1200px;
    }

    .fullconstdrop {
        min-width: 800px;
    }

    .back-btn {
        box-sizing: content-box;
        width: 1em;
        height: 1em;
        padding: .15em .25em;
        color: #000;
        border: 0;
        /* border-radius: .25rem; */
        opacity: .5;
    }

    .back-icon {
        font-size: 18px;
    }

    .disabled {
        display: none;
    }

    .cont {
        justify-content: space-between !important;
    }

    div#header,
    h2,
    caption {
        background-color: var(--primary) !important;
    }

    .form-check-input:checked {
        background-color: var(--secondary);
        border: none;
    }
    /* .form-check-input:focus {
    border-color: var(--secondary);
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgb(var(--secondary) / 25%);
} */

    .projectdrop {
        width: 600px;
    }

    .blockdrop {
        width: 200px;
        overflow-y: auto;
        height: 500px;
    }

    .bodycontent {
        white-space: nowrap;
    }

    element.style {
        height: 200px;
    }
    /* textarea#id_text {
        width: 466px;
    } */

    .form-floating>.form-control:focus,
    .form-floating>.form-control:not(:placeholder-shown) {
        padding-top: 1.625rem;
        padding-bottom: .625rem;
    }

    .form-control:focus,
    .form-select:focus {
        border-color: var(--secondary);
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgb(var(--secondary)/ 25%);
    }

    nav,
    .breadcrumbs,
    .breadcrumb,
    .project-item {
        background-color: var(--secondary) !important;
        border-radius: none !important;
    }

    .model-project a.addlink,
    .model-project a.changelink {
        display: none!important;
    }

    .breadcrumb-item {
        display: table-header-group;
        text-decoration: none !important;
        /* text-transform: uppercase !important; */
    }

    .sidemenu {
        text-transform: uppercase;
    }

    a.nav-a,
    .langbtn {
        text-decoration: none !important;
        color: white;
    }

    .published {
        color: var(--secondary) !important;
    }

    .unpublished {
        color: var(--red_col) !important;
    }

    .color-pen:hover {
        color: var(--black_col);
    }

    .langbtn {
        padding: 0;
        font-weight: 300;
        font-size: 11px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        text-align: right;
    }

    a.nav-a:hover {
        color: var(--black_col)
    }

    .breadcrumb {
        margin: 0 30px 0 35px;
    }

    .nav-menu {
        margin: 0 1em;
    }
    .page-link{
        border:none;
    }
    .i-style {
        font-size: 1.7em !important;
        padding-bottom: 0px;
        margin-bottom: 0px;
        margin-top: -1px;
    }

    .set-style {
        font-size: 1.5em !important;
        margin-top: 1px;
    }

    .add-icon {
        margin-top: 0.2em;
        font-size: medium !important;
    }

    .medium-size {
        font-size: xx-small !important;
    }

    .btn-add.btn {
        padding: 0 0.5em;
    }

    .menu {
        margin-bottom: 1em;
    }

    #content {
        padding: 0 45px;
    }

    .filter {
        background-color: var(--black_col);
        color: white;
        text-transform: uppercase;
        font-size: 11px;
        padding: .75rem;
        align-items: center;
    }

    item .text-b {
        margin-top: 0.5em;
    }

    .pen,
    .time {
        color: var(--black_col)
    }

    .time {
        font-weight: bolder !important;
    }

    div.animationtitle {
        background-color: var(--black_col) ! important;
    }

    .table-sm td,
    .table-sm th {
        padding-top: .001rem !important;
        padding-bottom: .001rem !important;
    }

    .table-md td,
    .table-md th {
        padding-top: .2rem !important;
        padding-bottom: .2rem !important;
    }

    .time:hover,
    .time:active {
        color: var(--red_col);
    }

    .thred-icon {
        padding-left: .75rem;
    }
    /* .table th,
.thead-dark th {
    vertical-align: middle;
} */
    /* .thead-dark th{
    font-size: 13px;
} */

    .play-a {
        text-decoration: none;
        color: var(--black_col) !important;
    }

    .table-a {
        color: var(--black_col) !important;
    }

    .table-a:hover,
    .table-a:active,
    .pen:hover,
    .pen:active,
    .filter-btn:hover {
        color: var(--secondary) !important;
    }

    .filter-btn {
        font-size: 13px;
        color: var(--black_col) !important;
    }

    .list-group-item {
        border: none;
        /* padding: .75rem 1.25rem; */
    }

    .all {
        padding: .75rem 1.25rem;
    }

    .first {
        border-bottom-left-radius: 0px!important;
        border-top-left-radius: 0px !important;
    }

    .last {
        border-bottom-right-radius: 0px !important;
        border-top-right-radius: 0px !important;
    }

    .status-true {
        color: var(--secondary);
    }

    .status-false {
        color: var(--red_col);
    }

    form p label,
    .label-b {
        display: block;
    }

    .type-cont {
        width: 60%;
    }

    .type-table {
        overflow-y: scroll;
        max-height: 629px;
    }

    .center-cont {
        margin: auto;
        padding: 10px;
    }

    .modal-header {
        background-color: var(--secondary) !important;
    }

    .modal-title,
    .close {
        color: white;
    }

    .close:hover {
        color: var(--red_col);
    }

    .satz {
        background-color: var(--black_col) !important;
        border: 1px solid #dee2e6!important;
        color: white;
    }

    .info {
        margin-bottom: 0.5rem !important;
        margin-top: 0.5rem !important;
        align-items: center !important;
    }

    .row-cardtitel {
        height: 48px;
        color: white;
        padding: .75rem 0rem;
        margin-top: 0.1rem;
    }

    @media (min-width: 576px) {
        .jumbotron {
            padding: 1rem 1rem !important;
        }
    }

    .btn-cat {
        padding: .75rem 1.25rem !important;
    }

    .satz:hover,
    .category:hover,
    .category:active {
        color: var(--secondary) !important;
    }

    .tab-con {
        background-color: var(--grayback);
        border-left: 0.5px solid var(--grayback);
        border-right: 0.5px solid var(--grayback);
        border-bottom: 0.5px solid var(--grayback);
        margin: 12;
    }

    a#nav-home-tab,
    a#nav-profile-tab {
        color: var(--black_col)
    }

    a#nav-home-tab:hover,
    a#nav-profile-tab:hover,
    a#nav-home-tab:active,
    a#nav-profile-tab:active {
        color: var(--primary);
    }

    .table-view th {
        border-bottom: 0px;
        vertical-align: center;
    }

    .field-__str__ {
        vertical-align: middle;
    }

    l a .table-view tr {
        width: 100%;
        display: inline-table;
        table-layout: fixed;
    }

    .thead-view tr,
    .filter {
        height: 38px;
    }

    .table-view {
        /* max-height: 300px; */
        display: -moz-groupbox;
    }

    .anim-tbody {
        overflow-y: scroll;
        height: 700px;
        width: 98%;
        position: absolute;
    }

    .block-tbody {
        overflow: auto;
        max-height: 500px;
        /* width: 98%;
    position: absolute; */
    }

    .type-tbody {
        overflow-y: scroll;
        position: absolute;
        height: 700px;
        width: 97.5%;
        padding-left: 0px;
    }

    .constr-tbody {
        overflow-y: scroll;
        max-height: 700px;
        /* width: 98%;
    position: absolute; */
    }

    .satz-table,
    .blockpos-table {
        display: table-row !important;
    }

    .table-view thead th,
    .nav-menu {
        vertical-align: middle;
    }

    table#satz_result_list tr {
        display: table-row;
    }

    .play-a {
        padding-top: 3px;
    }

    .delete {
        margin-right: 0.5em;
    }

    .material-icons {
        line-height: normal;
    }

    .pen,
    .edit {
        font-size: 22px !important;
    }

    .edit {
        padding-right: .75rem;
    }

    .btn-text {
        padding-top: 6px;
        margin-bottom: 6px;
    }

    .dropdown-item.active,
    a.opt.dropdown-item.active,
    a.opt.dropdown-item:active,
    a.dropdown-item:active {
        background-color: var(--primary);
    }
    /* .form-control:focus,
    input.form-control:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 0.2rem var(--secondary);
    } */

    .filter-option-inner-inner:focus {
        display: none;
    }
    /* admin*/

    tr.model-token,
    tr.model-group,
    tr.model-user,
    tr.model-animation,
    tr.model-avatar,
    tr.model-blocktype,
    tr.model-clientfirm {
        display: table-row;
    }

    tr.model-token th,
    tr.model-group th,
    tr.model-user th,
    tr.model-animation th,
    tr.model-avatar th,
    tr.model-blocktype th,
    tr.model-clientfirm th {
        border-bottom: 1px solid #eee;
    }

    caption {
        caption-side: top;
    }

    a.deletelink {
        height: auto !important;
    }

    .form-control {
        height: auto;
    }

    div.modal-text textarea#id_text {
        width: 465px;
    }
    /* textarea#id_text {
        width: 466px;
    } */

    .category {
        color: var(--black_col);
        font-weight: bolder;
        text-decoration: none;
    }

    .custommargin {
        margin: 0 12px;
    }

    .list-wrapper {
        box-sizing: border-box;
        display: inline-block;
        height: 100%;
        margin: 0 4px;
        padding: 0 4px;
        vertical-align: top;
        white-space: nowrap;
        width: 272px!important;
        min-width: 272px;
        max-width: 272px;
        max-height: 700px;
    }

    .backcolor {
        background-color: var(--grayback)! important;
        height: 700px;
        padding-top: 10px;
    }

    .tabscroll {
        overflow-x: auto;
        overflow-y: hidden;
        background-color: var(--grayback)! important;
    }

    .tabscrolll {
        overflow-x: hidden;
        overflow-y: auto;
        background-color: var(--grayback)! important;
    }

    #board {
        background-color: var(--grayback)! important;
        bottom: 0px;
        left: 0;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 1px;
        position: absolute;
        right: 0;
        top: 0;
        user-select: none;
        white-space: nowrap;
    }
    /* .size-group {
    width: 274px !important;
    margin: 4px;
} */

    .list-wrapper-cat {
        /* box-sizing: border-box;
    display: inline-block;
    height: 100%;
    margin: 0 4px;
    vertical-align: top;
    white-space: nowrap; */
        width: 272px!important;
    }

    .category.btn-link:hover,
    .category .btn-link:active,
    .category.btn-link:focus {
        color: var(--primary);
        text-decoration: none;
    }

    .colorback {
        background-color: var(--gray)! important;
    }

    .st-card {
        background-color: var(--black_col) ! important;
        border: none;
    }

    .list-group-item.active,
    .dropdown-item:active {
        background-color: var(--secondary) !important;
    }

    .not-selected-a {
        color: var(--black_col) !important;
    }

    .bg-primary {
        background-color: var(--primary)!important;
    }

    p.cattitel {
        color: white;
        overflow-wrap: break-word;
        white-space: normal;
    }

    .textcolor {
        color: white;
    }

    .cards {
        max-height: 900px;
    }

    .card-scroll {
        flex-wrap: nowrap;
        width: 1756px;
        overflow-x: auto;
    }

    .card-teil {
        margin-right: 1em;
    }

    .filter-flow,
    .filter-flow-pr {
        overflow: auto;
        height: 200px;
    }

    .filter-flow-pr {
        height: 150px;
    }
    /* IMPORT */
    /*Upload Image Buttons*/

    .importnav {
        color: white;
    }
    /* .inputDnD,
input#id_file {
    opacity: 0;
} */

    .deleteimport {
        margin-left: 5px;
        background-color: red;
    }

    fieldset.module.aligned.extrapretty.wide.collapse.in.collapsed,
    fieldset.collapsed * {
        display: block !important;
    }
    /* p.datetime {
    display:;
} */

    .datetime input,
    .form-row .datetime input.vDateField,
    .form-row .datetime input.vTimeField,
    span.datetimeshortcuts {
        display: inline-flex !important;
    }

    #fieldsetcollapser1,
    #fieldsetcollapser0 {
        display: none !important;
    }

    fieldset.collapsed h2 {
        color: #fff !important;
    }
    /* .collapse:not(.show) {
    display: inline;
} */

    .filelist {
        overflow-y: scroll;
        height: 23em;
    }
    /*  */
    /*  text */

    .content-title {
        /* margin-left: 5em !important; */
        background: rgba(0, 0, 0, 1);
        color: white;
        width: 100%;
        padding: 10px;
    }

    .atitle {
        color: white;
    }

    .notfound {
        background-color: darkred;
        color: white;
    }

    .foranimation {
        background-color: green;
        color: white;
    }

    .notfoundcard {
        background-color: gray;
        color: white;
    }

    .button,
    input[type=submit],
    input[type=button],
    .submit-row input,
    a.button {
        background-color: var(--primary);
    }

    .button.default,
    input[type=submit].default,
    .submit-row input.default,
    div.breadcrumbs,
    .button.default:active,
    input[type=submit].default:active,
    .button.default:focus,
    input[type=submit].default:focus,
    .button.default:hover,
    input[type=submit].default:hover,
    .object-tools a:focus,
    .object-tools a:hover,
    .button:active,
    input[type=submit]:active,
    input[type=button]:active,
    .button:focus,
    input[type=submit]:focus,
    input[type=button]:focus,
    .button:hover,
    input[type=submit]:hover,
    input[type=button]:hover {
        background-color: #28a745;
    }

    div.breadcrumbs,
    .button.default:active,
    input[type=submit].default:active,
    .button.default:focus,
    input[type=submit].default:focus,
    .button.default:hover,
    input[type=submit].default:hover,
    .object-tools a:focus,
    .object-tools a:hover,
    .button:active,
    input[type=submit]:active,
    input[type=button]:active,
    .button:focus,
    input[type=submit]:focus,
    input[type=button]:focus,
    .button:hover,
    input[type=submit]:hover,
    input[type=button]:hover {
        background-color: #28a745;
    }
    /* width */

     ::-webkit-scrollbar {
        width: 10px;
        height: 13px;
    }
    /* Track */

     ::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }
    /* Handle */

     ::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 10px;
    }
    /* Handle on hover */

     ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
    .not_published{
        color: #664d03;
        background-color: #fff3cd;
        border-color: #664d03!important;
    }

    ul#sentence_p.list-group.size-group {
        overflow-y: auto;
        overflow-x: none;
        height: 610px;
    }
    ul#construktion_p.list-group.size-group, ul#construktion_p2.list-group.size-group {
        overflow-y: auto;
        overflow-x: none;
        height: 410px;
    }


    .st-drop{
        position: fixed !important;


    }
    .django__log__viewer {
        margin-top: 2em;
    }
    @media (prefers-color-scheme: dark){

        :root {
            --primary: #6DB16B;
            --secondary: #4CA75C;
            --accent: whitesmoke;
            --black_col: #343a40;
            --red_col: #9F4F48;
            --gray: #4ca75dee;
            --grayback: #dcf5d377;
        }

    }