:root{
    /*     A P P L I C A T I O N    H E A D E R    */
    --application-header-dark-background-color: #171717;
    --application-header-light-background-color: #ffffff;

    --application-ui-background-color: #111111;

    /*     A P P L I C A T I O N    S U B - H E A D E R    */
    --application-subheader-dark-background-color: #141414;
    --application-subheader-light-background-color: #e8e8e8;

    --application-subheader-light-element-color: #171717b9;
    --application-subheader-dark-element-color: #dbdbdbba;
    
    


    --application-header-light-text-color: #ffffff;
    --application-header-dark-text-color: #171717;


    --application-component-light-background-color: rgba(251, 251, 251, 0.9);
    --application-component-dark-background-color: #171717e6;
    color-scheme: light dark;
}

@media print{@page {size: landscape}}

.application-canvas-interface-component hr{
    margin: 0.2rem;
    opacity: 0.15;
}




.application-canvas-interface-component{
    position: absolute;
    /* border: 1px solid rgba(0, 0, 0, 0.09); */
    box-shadow: 0 1px 4px -3px black;
    /* top: 100px; */
    padding: 0px;
    background-color: rgba(255, 255, 255, 0.843);
    background-color: rgba(245, 245, 245, 0.9);
    background-color: light-dark(#17171709, rgba(245, 245, 245, 0.9));

    background-color: light-dark(
        var(--application-component-light-background-color),
        var(--application-component-dark-background-color)
    );
    border-radius: 5px;

    z-index: 10;
    transition-duration: 0.2s;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */

    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.application-canvas-interface-component > *{
    transition: transform 0.2s, margin 0.2s;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}
.application-canvas-interface-component:hover > *{
    margin: 7px;
    transform:scale(1.15);
    transform:scale(1.05);
    transform: none;
    transition: transform 0.2s, margin 0.2s;
    /* transition-duration: 0.2s; */
    /* display: block; */
}

.application-canvas-interface-item{
    margin: 3px !important;
    padding: 7px !important;
    border:0px !important;
    display: block;
    /* display: none; */
    
    transition-duration: 0.1s;
    transition: transform 0.2s;
    opacity: 0.8;
    background-color: transparent;
    /* border-bottom: 1px solid rgba(28, 28, 28, 0.2); */
    color: light-dark(black, white);
}

.application-canvas-interface-item img{
    width: 50px;
    height: 50px;
    object-fit: contain;

    
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.application-canvas-interface-item:hover, 
.application-canvas-interface-item:active, 
.application-canvas-interface-item .active,
.application-canvas-interface-component .active{
    background-color: #88d08c;
    border-radius: 5px;

    background-color: #ffffff;
    border-radius: 5px;
    /* border-bottom: 1px solid rgba(28, 28, 28, 0); */
    color: rgb(15, 15, 15);
    color: #2cff37;
    color: #2caeff;
    /* border-bottom: 1px solid rgba(28, 28, 28, 0); */
    opacity: 1;
    box-shadow: 1px 1px 3px -1px rgba(0, 0, 0, 0.546);
    transform: scale(1.25);
    display: block !important;
    border-radius: 1px;


    color: rgb(255 255 255);
    background-color: #313131;
}

.application-canvas-interface-item:hover i, .application-canvas-interface-item:active i{
    text-shadow: 0px 0px 3px rgba(55, 233, 255, 0.4);
}


/*
 C O L L A P S E D - - - - - - - - - - -
 - - - - - - - - - - - I N T E R F A C E
*/

/* .application-canvas-interface-component-collapsed .application-canvas-interface-item{
    display: none;
    opacity: 0;
    transform: scale(0.5);
    transition-duration: 0.2s;
    transition: transform 0.2s, margin 0.2s;
}

.application-canvas-interface-component-collapsed:hover .application-canvas-interface-item{
    display: block;
    opacity: 0.8;
    transform: scale(1);
    transition-duration: 0.2s;
    transition: transform 0.2s, margin 0.2s;
}

.application-canvas-interface-component-collapsed .application-canvas-interface-item:active, .application-canvas-interface-component-collapsed .application-canvas-interface-item:hover, .application-canvas-interface-component-collapsed .application-canvas-interface-item .active{
    background-color: #88d08c;
    border-radius: 5px;

    background-color: #ffffff;
    border-radius: 5px;
    color: #2caeff;
    opacity: 1;
    box-shadow: 1px 1px 3px -1px rgba(0, 0, 0, 0.546);
    transform: scale(1.25);
    display: block;
} */




/*
 A P P L I C A T I O N - - - - - - - - - - 
 - - - - - - - - - - - I N T E R F A C E S
*/
.application-cursor-interface{
    top: 200px;
    top: 50%;
    transform: translateY(-50%);
    left: 5px;
    left: 60px;
    top: 60px;
    transform: none;
    background-color: light-dark(#ffffff, #171717);
    border-radius: 0px;
    border-right: 1px solid #87878740;
    border-bottom: 1px solid #87878740;
    width: 35px;
}

.application-table-interface{
    /* bottom: 5px;
    left: 40%;
    transform: translateX(-50%);
    display: flex; */

    transform: none;
    left: 0px;
    display: flex;
    justify-content: center;
    background-color: light-dark(#ffffff, #171717);
    top: 59px;
    border-radius: 0px;
    border-top: 1px solid #87878740;
    border-right: 1px solid #87878740;
    flex-direction: column;
    width: 61px;
    height: calc(100vh - 59px);
}


.application-zoom-interface{
    /* bottom: 5px;
    right: 360px; */

    bottom: 80px;
    left: 2px;
    /* transform: translateY(-50%); */

    bottom: 0px;
    left: 61px;
    /* transform: translateY(-50%); */
    width: 35px;
    border-radius: 0px;
    background-color: light-dark(#ffffff, #171717);
    border-right: 1px solid  #8f8f8f21;
    border-top: 1px solid  #8f8f8f21;
}

.application-trashcan-interface{
    bottom: 5px;
    right: 340px;
    transform: translateX(-100%);
}
.application-trashcan-interface:hover button{
    background-color: #ff000089;
    color: #ffffff;
    border-radius: 5px;
    box-shadow: 1px 1px 3px -1px rgba(0, 0, 0, 0.546);
    transform: scale(1.25);
    
    display: block !important;
}



.application-canvas-interface-label{
        opacity: 0.7;
    font-size: 0.6rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.3;
    display: none;
}


/*
    A P P L I C A T I O N
    C A N V A S    O B J E C T    F O C U S
    
    -      -       -       -      -      -       -       -      -
       -       -       -       -      -      -       -       -
    -      -       -       -      -      -       -       -
       -       -       -       -      -      -       -       -
*/
.application-canvas-object-focus {
    transition: transform 0.3s ease-in-out;
    touch-action: none; /* Better touch handling */
    will-change: transform;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    background-color: light-dark(#ffffff, rgb(26 26 26 / 88%));
    /* background-color: light-dark(#dddddd, rgb(26 26 26 / 88%)); */

    background-color: light-dark(#ffffff, rgb(26 26 26 / 88%));
    /* background-color: light-dark(#dddddd, rgb(26 26 26 / 88%)); */
    border: 1px solid #9696963d;
    
    position: absolute;
    right: 0px;
}

.application-canvas-object-focus .gui-container{
    display: flex;
    flex-wrap: wrap;
}
.application-canvas-object-focus label{
    width: 100%;
    color: light-darK(#6a6a6a, #ececec);
}
.application-canvas-object-focus .gui-container p{
    letter-spacing: 6px;
    /* font-size: 0.85rem; */
    font-size: 2.22rem !important;
    font-weight: 900;
}

.application-canvas-object-focus .gui-header h1{
    font-size: 1.2rem;
    font-weight: 900;
    color: #1c1c1c;
    color: light-dark(#1c1c1c, #b3b3b3);
    letter-spacing: 6px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.application-canvas-object-focus .gui-container{
    background-color: light-dark(rgba(249, 249, 249, 0.09),#212121);
    background-color: light-dark(rgba(249, 249, 249, 0.45),#212121);

    border: 1px solid rgba(209, 209, 209, 0.18);
    border-radius: 5px;
    margin: 5px;
}

.application-canvas-object-focus .table_type_img{
    width: 120px;
    height: 90px;
    object-fit: contain;
}
#table_type_text {
    letter-spacing: 6px;
    font-size: 0.85rem;
    font-weight: 900;
    width: 100%;
}


.application-canvas-object-focus .gui-header-sticky-blurry{
    position: sticky;
    top: 0px;
    z-index: 10;
    backdrop-filter: blur(5px);
    padding-top: 1px;
}

/*
    T A B L E    C L O T H 
    C O L O R S  
*/

.color-selecting-button div{
    height: 25px;
    width: 25px;
    background-color: #e6e6e6;
    border-radius: 5px;
    margin: 0px;
    padding: 0px;
}

.color-selecting-button{
    opacity: 0.9;
    transition-duration: 0.2s;
    transform: scale(0.9);
    transition: opacity 0.2s, transform 0.2s;
    
}

.color-selecting-button:hover{
    opacity: 0.9;
    box-shadow: 1px 1px 3px -1px rgba(0, 0, 0, 0.546);
    transform: scale(1.00);
}
.color-selecting-button:active, .color-selecting-button.active{
    opacity: 1;
    box-shadow: 1px 1px 3px -1px rgba(0, 0, 0, 0.546);
    transform: scale(1.0);
    outline: #0088FE 1px solid !important;
    outline-offset: 1px;
}

/*
 T A B L E    S E A T    M A N A G E R
*/
#table-seat-manager{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 0px;
    margin: 10px;
    /* padding: 10px; */
    /* background-color: light-dark(#f8f8f8, #212121); */
    border-radius: 5px;
    /* box-shadow: 1px 1px 3px -1px rgba(0, 0, 0, 0.546); */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    color: #1c1c1c;
    letter-spacing: 6px;
    font-size: 0.85rem;
    font-weight: 900;
    margin-top: 20px;
    height: 200px;
}
.bord_stol_gruppe_indikator{
    /* background-color: #1c1c1c;
    transition-duration: 0.2s;
    color: #ffffff; */

    background-color: #f9f9f9;
    transition-duration: 0.2s;
    color: #282828;
}
.bord_stol_gruppe_indikator:hover{
    /* background-color: #2caeff;
    color: #ffffff; */
    background-color: #363636;
    color: #05ff19;
    border-radius: 5px;
    box-shadow: 1px 1px 3px -1px rgba(0, 0, 0, 0.546);
    /* transform: scale(1.05); */
    
}
.bord_stol_gruppe_indikator .fa-ban{
    position: absolute;
    color: #ff0505;

}

.bord_stol_gruppe_indikator:active .fa-ban, .bord_stol_gruppe_indikator .active .fa-ban, #table-seat-manager .active .fa-ban{
    opacity: 0;
}
.bord_stol_gruppe_indikator:active, .bord_stol_gruppe_indikator .active, #table-seat-manager .active{

}
.bord_stol_gruppe_indikator:active i, .bord_stol_gruppe_indikator .active i{
    text-shadow: 0px 0px 3px rgba(55, 233, 255, 0.4);
    
}

.bord_stol_gruppe_indikator:disabled, .bord_stol_gruppe_indikator .disabled, #table-seat-manager .disabled{
    /* background-color: #2caeff;
    color: #ffffff; */
    background-color: #363636;
    color: #c1c1c1;
    border-radius: 5px;
    transform: scale(0.9);
    opacity: 0.5;
}
.bord_stol_gruppe_indikator:disabled .fa-ban, .bord_stol_gruppe_indikator .disabled .fa-ban, #table-seat-manager .disabled .fa-ban{
    opacity: 1;
    transform: translate(-73%, -25%);
}


.bord_stol_gruppe_bord{
    background-color: #ffffff;
    transition-duration: 0.2s;
    border-radius: 5px;
    margin: 5px;
}
.bord_stol_gruppe_bord img{
    width: 100%;
    height: 65px;

    object-fit: contain;
}
#bord_stol_gruppe_indikator_A{grid-column: 1/2; grid-row: 2/3;}
#bord_stol_gruppe_indikator_B{grid-column: 4/5; grid-row: 2/3;}
#bord_stol_gruppe_indikator_C{grid-column: 2/4; grid-row: 1/2;}
#bord_stol_gruppe_indikator_D{grid-column: 2/4; grid-row: 3/4;}
#bord_stol_gruppe_bord       {grid-column: 2/4; grid-row: 2/3;}

#bord_stol_indikator_type_container .btn-group{
    transition-duration: 0.2s;
    transform: scale(1);
}

#bord_stol_indikator_type_container .btn-group:hover{
    transform: scale(1.25);
    box-shadow: 0px 1px 4px -2px black;
}





/*
    A P P L I C A T I O N
    T A B L E   R O T A T I O N
*/
#table-rotation-container .btn-group, 
#table-rotation-container .rotation-actions,
.gui-container .btn-group{
    transition-duration: 0.2s;
    transform: scale(0.7);
    transform: scale(0.8);
}
#table-rotation-container .btn-group:hover, 
#table-rotation-container .rotation-actions:hover,
.gui-container .btn-group:hover{
    transform: scale(0.9);
    box-shadow: 0px 1px 4px -2px black;
}
#table-rotation-container img, .gui-button-image{
    width: 40px;
    height: 40px;
    object-fit: contain;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */

    transition-duration: 0.2s;
    filter: invert(1);
}

#rotation-indication-value-container, .gui-readout-value{
    z-index: 10;
    display: flex;
    align-items: center;
    width: 1px;
    transform: translateX(-0.5px) translateY(0px) scale(0.9);
    transition-duration: 0.2s;
}


#table-rotation-container .btn-group:hover #rotation-indication-value-container, 
#table-rotation-container .rotation-actions:hover #rotation-indication-value-container{
    transform: translateX(-20px) translateY(25px) scale(0.8);
    
    box-shadow: 0px 2px 3px -2px black;
}


#current_rotation_value_text, .gui-readout-value{
    /* width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    background-color: #ffffff;
    margin: 0px;
    border-radius: 50px;

    color: #404040;
    padding: 0px;
    padding-right: 10px;
    padding-left: 10px;
    font-weight: 100;
    letter-spacing: 0px;
    transform: scale(1.3);
    font-size: 1.0rem;
    border: 1px solid #73737312; */
    /* width: 100%; */
    /* height: 100%; */
    display: flex
;
    align-items: center;
    justify-content: center;
    align-content: center;
    background-color: #ffffff;
    margin:         0px;
    border-radius:  5px;
    color: #404040;
    padding:        0px;
    padding-right: 20px;
    padding-left:  20px;
    font-weight:    100;
    letter-spacing: 0px;
    /* transform: scale(1.3); */
    font-size: 1.3rem !important;
    border: 1px solid #73737312;
    z-index: 10;
    
}





/*
    S C R E E N S H O T

*/


.toggle-options label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
}

.screenshot-item {

    padding: 10px;
    margin-bottom: 15px;
    width: 300px;
    opacity: 0;
    /* animation: screenshot-item-fadeIn 0.6s forwards; */
}

@keyframes screenshot-item-fadeIn {
    from { opacity: 0; background-color: light-dark(white, transparent); }
    to { opacity: 1; background-color: light-dark(white, transparent); }
}

.screenshot-img {
    width: 100%;
    border-radius: 8px;
}

.screenshot-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    font-size: 12px;
}

.adaptive-light-scheme-button{
    background-color: light-dark(#ebebeb88, #323232d6);
    color: light-dark(#424242, #9e9e9e);
    transition-duration: 0.3s;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, transform .15s ease-in-out;
}

.adaptive-light-scheme-button:hover{
    background-color: light-dark(#f5f5f5, #4b4a4ad6);
    color: light-dark(#313131, #c0c0c0);
    transform: scale(1.05);
    box-shadow: 0px 1px 4px -2px black;
}



@media screen and (max-width: 768px) {
    .drag-handle {
        width: 50px;
        height: 6px;
        background: #ccc;
        border-radius: 3px;
        margin: 10px auto;
    }
    
    .application-cursor-interface{
        bottom: 16vh;
        left: 5px;
        transform: translateY(-50%) translateX(-50px);

    }
    .application-table-interface{
        
        /*
        bottom: 0vh;
        left: 50%;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        */


                left: 0;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: 160px;
        overflow-x: auto;
        overflow-y: hidden;
        top: auto;
        bottom: 0px;
        border-right: 0px;
    }
    .application-zoom-interface{
        bottom: 160px;
        left: 0px;
    }


    .application-canvas-object-focus{
        padding-top: 0px;
        height: 100vh;
        width: 95%;
        border-radius: 5px;
        /* transform: translate(0px, 500px); */
        transform: translateY(-15vh) translateX(-50%);
        position: absolute;
        left: 50%;
        top: 100vh;

        user-select: none;
        -webkit-user-select: none; /* Safari */
        -ms-user-select: none; /* IE 10 and IE 11 */
    }

        /* Add when it's fully visible */
        .object-focus--visible {
            transform: translateY(-80vh) translateX(-50%); /* Adjust based on how far up you want it */
        }

        /* When hidden */
        .object-focus--hidden {
            transform: translateY(-15vh) translateX(-50%);
        }
}



.modal-content{
    color:light-dark(var(--bs-modal-color), #c1c1c1);
    background-color: light-dark(var(--bs-modal-bg), #212121);
}

.form-control{
    background-color: light-dark(#ffffff, #333333);
    color: light-dark(#000000, #ffffff);
}

.form-control::placeholder{
    color: light-dark(#6c757d, #a1a1a1);
}
@media (prefers-color-scheme: dark) {
.btn-close{
    --bs-btn-close-color: light-dark(#000000, #ffffff) !important;
            filter: invert(1);

}
}