* {
  scrollbar-width: thin;
  scrollbar-color: #A3C9F3 #DFEFFF;
  font-family: 'Roboto', 'Arial', sans-serif;
  line-height: 100%;
}

/* Para asegurar en los elementos raíz también */
html, body {
  scrollbar-width: thin;
  scrollbar-color: #A3C9F3 #DFEFFF;
  font-family: 'Roboto', 'Arial', sans-serif;
  line-height: 100%;
}

/* Para navegadores basados en Webkit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 8px;
  background: #DFEFFF;
}
::-webkit-scrollbar-thumb {
  background: #A3C9F3;
  border-radius: 8px;
}

@font-face {
  font-family: 'Roboto';
  src: url('/lib/font-awesome/fonts/Roboto-Italic-VariableFont_wdth,wght') format('ttf'),
       url('/lib/font-awesome/fonts/Roboto-VariableFont_wdth,wght') format('ttf');
  font-weight: normal;
  font-style: normal;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.modal{
    background-color: rgba(0,0,0,0.55) !important;
}

.btn:focus, .btn:active:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}



.ml5 {
    margin-left: 15px;
}

.mr15 {
    margin-right: 15px;
}

.mb5 {
    margin-bottom: 5px;
}

.mb0 {
    margin-bottom: 0px;
}

.w1 {
    width: 10%;
}

.w9 {
    width: 90%;
}

.box, .boxrest, ul.orders {
    padding-left: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;
    list-style: outside none none;
}

    .box > li, .boxrest > li, .orders > li {
        padding: 1px;
        margin: 0px -1px -1px 0px;
        font-size: 16px;
        line-height: 1.4;
        border: 1px solid #DDD;
        word-break: break-all;
        white-space: normal;
        color: black;
        overflow: hidden;
    }

    .boxrest > li, ul.orders > li {
        width: 24%;
        float: left;
        height: 100px;
        text-align: center;
        cursor: pointer;
    }

    .boxrest div, ul.orders div {
        display: table;
    }

    .boxrest > li p, ul.orders > li p {
        display: table-cell;
        vertical-align: middle;
    }

.box-small > li {
    height: 80px;
}

.btn-group {
    word-break: break-all;
}


.diff {
    font-size: 12px;
}

li.modifier {
    color: red;
}

li.itemsaved {
    background-color: gray;
}

li.open {
    color: red;
}

    li.open:hover {
        color: blue;
    }

/* li.updated, li.selected {
    background-color: transparent !important;
    background-image: none;
} */

/* .box li.updated:hover, .box li.selected:hover {
    color: white;
} */

.box, .boxrest, ul.orders {
    overflow-y: scroll;
}

.editItems {
    width: 100%;
    background-color: white;
}

.edititemsList {
    overflow: scroll;
    border: solid 1px lightblue;
    list-style: none;
    padding-left: 5px;
    background-color: white;
    margin-bottom: 0px;
}

    .edititemsList li {
        cursor: pointer;
        display: block;
        padding: 3px;
        text-align: left;
        font-size: 12px;
    }

#itemsList {
    clear: both;
    font-size: 10px;
    position: relative;
}

.control {
    display: block;
    width: 100%;
}

#waiting {
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 1000;
    height: 2000px;
    overflow: hidden;
    background-color: blue;
    opacity: 0.2;
}

    #waiting img {
        margin-top: 25%;
    }

li .radio, li .checkbox {
    margin-top: 0px;
    margin-bottom: 0px;
}

label.error {
    font-size: 12px;
    color: red;
}

.spending {
    color: red !important;
}

.headerBoxName {
    height: 27px;
    max-height: 27px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    align-content: center;
}

#header {
    padding: 3px;
    margin-bottom: 1px;
}

#logo img {
    height: 40px;
    margin-right: 10px;
    display: inline;
}

#logo {
    margin-right: 10px;
    font-weight: bold;
    font-size: large;
}

    #logo:hover {
        text-decoration: none;
    }

#left-menu {
    box-shadow: none;
}

#side-menu {
    transition-property: left;
    transition-duration: 1s;
    position: fixed;
    left: -100%;
    top: 42px;
    z-index: 10000;
    width: 80%;
    overflow-y: scroll;
    background-color: white;
}

    #side-menu li.list-group-item:hover, #left-menu li.list-group-item:hover {
        background-color: #bce8f1;
    }

/* @media (min-width:768px) {

    #side-menu {
        width: 50%;
    }

        #side-menu li.list-group-item {
            border: 0px;
        }

    li.list-group-item a {
        height: 100%;
        text-decoration: none;
    }
}

@media (min-width:1000px) {
    #side-menu {
        width: 40%;
    }
} */


.panel-body.list-group {
    box-shadow: none;
    margin-bottom: 0px;
    padding: 0px;
    display: flex;
    flex-direction: column;
}

#side-menu .list-group-item {
    border: 0px;
}

.affix-container {
    top: 0px;
    right: 0px;
    padding: 16px; 
    background-color: #FFFFFF; 
    border-radius: 8px;
    justify-content: right;
}

.affix-container2 {
    right: 0px;
    z-index: 1000;
}

.datetime, .date {
    cursor: pointer !important;
    padding: 3px 12px;
}



/**Select2**/
.select2-selection--multiple {
    border: 1px solid #ccc !important;
}

.select2-selection--single {
    height: 34px !important;
    border: 1px solid #ccc !important;
}

.select2-selection--single, .select2-selection--multiple {
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.select2-selection__arrow {
    height: 34px !important;
}

.select2-search input:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}

.select2-container {
    justify-items: center;
    align-items: center;
    border: 0px !important;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: inherit;
    color: inherit;
    background-color: inherit;
    border-radius: 32px; 
    padding-top: 8px; 
    padding-bottom: 8px; 
    padding-left: 16px; 
    padding-right: 16px;
    line-height: 100%;
    scrollbar-width: thin;                
    scrollbar-color: #A3C9F3 #DFEFFF;            
}

.select2-container--default .select2-selection--single {
  border: 1.2px solid #DFEFFF !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  outline: none !important;
}

.selection, .select2-selection.select2-selection--single, #select2-selectClient-container, #select2-selectGroup-container {
    text-box: auto;
    align-items: center;
    border: 0px !important;
    color: inherit!important;
    background-color: inherit!important;
    height: auto!important;
    width: auto!important;
    gap: 8px;
}

#select2-select2Material-container, #select2-select2Material, #select2-select2Product-container, #select2-select2Product {
    text-box: auto;
    border-radius: 8px;
    align-items: center;
    border: 1.2px solid #4C8CD9!important;
    color: #4C8CD9!important;
    background-color: inherit!important;
    height: auto!important;
    width: auto!important;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;
    gap: 8px;

}

.simple-select{
    background-image: url("data:image/svg+xml,%3Csvg%20width='20'%20height='8'%20viewBox='0%200%2014%208'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M14.0001%201.83264C13.999%202.09498%2013.8948%202.34638%2013.7101%202.53264L9.12006%207.12264C8.55756%207.68444%207.79506%208%207.00006%208C6.20506%208%205.44256%207.68444%204.88006%207.12264L0.29006%202.53264C0.103809%202.34528-0.00073268%202.09183-0.000732692%201.82764C-0.000732703%201.56345%200.103809%201.31%200.29006%201.12264C0.383023%201.02891%200.493624%200.954517%200.615483%200.903748C0.737342%200.852979%200.868048%200.826842%201.00006%200.826842C1.13207%200.826842%201.26278%200.852979%201.38464%200.903748C1.5065%200.954517%201.6171%201.02891%201.71006%201.12264L6.29006%205.71264C6.38302%205.80637%206.49362%205.88076%206.61548%205.93153C6.73734%205.9823%206.86805%206.00844%207.00006%206.00844C7.13207%206.00844%207.26278%205.9823%207.38464%205.93153C7.5065%205.88076%207.6171%205.80637%207.71006%205.71264L12.2901%201.12264C12.383%201.02891%2012.4936%200.954516%2012.6155%200.903747C12.7373%200.852979%2012.868%200.826841%2013.0001%200.826841C13.1321%200.826841%2013.2628%200.852979%2013.3846%200.903747C13.5065%200.954516%2013.6171%201.02891%2013.7101%201.12264C13.8027%201.21608%2013.8761%201.32689%2013.9258%201.44873C13.9756%201.57057%2014.0008%201.70103%2014.0001%201.83264Z'%20fill='%230050A5'/%3E%3C/svg%3E");
    background-repeat: no-repeat !important;
    background-position: calc(100% - 12px) center !important;
    background-size: 14px 8px !important; 
    padding-right: 28px !important;
    color: #4C8CD9!important;
}

.select2-container[id*="select2-select2Material"] .select2-selection__arrow,
#select2-select2Material-container ~ .select2-selection__arrow {
    background: url("data:image/svg+xml,%3Csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M15.8045 14.8619L11.8252 10.8825C12.9096 9.55625 13.4428 7.86392 13.3144 6.15556C13.1861 4.44721 12.406 2.85354 11.1356 1.7042C9.86516 0.554862 8.20158 -0.0622172 6.48895 -0.019396C4.77632 0.0234252 3.14566 0.72287 1.93426 1.93426C0.72287 3.14566 0.0234252 4.77632 -0.019396 6.48895C-0.0622172 8.20158 0.554862 9.86516 1.7042 11.1356C2.85354 12.406 4.44721 13.1861 6.15556 13.3144C7.86392 13.4428 9.55625 12.9096 10.8825 11.8252L14.8619 15.8045C14.9876 15.926 15.156 15.9932 15.3308 15.9916C15.5056 15.9901 15.6728 15.92 15.7964 15.7964C15.92 15.6728 15.9901 15.5056 15.9916 15.3308C15.9932 15.156 15.926 14.9876 15.8045 14.8619ZM6.66652 11.9999C5.61169 11.9999 4.58054 11.6871 3.70348 11.101C2.82642 10.515 2.14283 9.68204 1.73916 8.7075C1.3355 7.73296 1.22988 6.66061 1.43567 5.62604C1.64145 4.59147 2.14941 3.64117 2.89529 2.89529C3.64117 2.14941 4.59147 1.64145 5.62604 1.43567C6.66061 1.22988 7.73296 1.3355 8.7075 1.73916C9.68204 2.14283 10.515 2.82642 11.101 3.70348C11.6871 4.58054 11.9999 5.61169 11.9999 6.66652C11.9983 8.08052 11.4359 9.43615 10.436 10.436C9.43615 11.4359 8.08052 11.9983 6.66652 11.9999Z'%20fill='%230050A5'/%3E%3C/svg%3E") no-repeat center center;
    display: none !important;
}
.select2-container[id*="select2-select2Product"] .select2-selection__arrow,
#select2-select2Product-container ~ .select2-selection__arrow {
    display: none !important;
}

#select2-select2Material2-container, #select2-select2Material2, #select2-select2Product2-container, #select2-select2Product2 {
    text-box: auto;
    border-radius: 8px;
    align-items: center;
    border: 1.2px solid #4C8CD9!important;
    color: #4C8CD9!important;
    background-color: inherit!important;
    height: auto!important;
    width: auto!important;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;
    gap: 8px;

}

.select2-container[id*="select2-select2Material2"] .select2-selection__arrow,
#select2-select2Material2-container ~ .select2-selection__arrow {
    background: url("data:image/svg+xml,%3Csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M15.8045 14.8619L11.8252 10.8825C12.9096 9.55625 13.4428 7.86392 13.3144 6.15556C13.1861 4.44721 12.406 2.85354 11.1356 1.7042C9.86516 0.554862 8.20158 -0.0622172 6.48895 -0.019396C4.77632 0.0234252 3.14566 0.72287 1.93426 1.93426C0.72287 3.14566 0.0234252 4.77632 -0.019396 6.48895C-0.0622172 8.20158 0.554862 9.86516 1.7042 11.1356C2.85354 12.406 4.44721 13.1861 6.15556 13.3144C7.86392 13.4428 9.55625 12.9096 10.8825 11.8252L14.8619 15.8045C14.9876 15.926 15.156 15.9932 15.3308 15.9916C15.5056 15.9901 15.6728 15.92 15.7964 15.7964C15.92 15.6728 15.9901 15.5056 15.9916 15.3308C15.9932 15.156 15.926 14.9876 15.8045 14.8619ZM6.66652 11.9999C5.61169 11.9999 4.58054 11.6871 3.70348 11.101C2.82642 10.515 2.14283 9.68204 1.73916 8.7075C1.3355 7.73296 1.22988 6.66061 1.43567 5.62604C1.64145 4.59147 2.14941 3.64117 2.89529 2.89529C3.64117 2.14941 4.59147 1.64145 5.62604 1.43567C6.66061 1.22988 7.73296 1.3355 8.7075 1.73916C9.68204 2.14283 10.515 2.82642 11.101 3.70348C11.6871 4.58054 11.9999 5.61169 11.9999 6.66652C11.9983 8.08052 11.4359 9.43615 10.436 10.436C9.43615 11.4359 8.08052 11.9983 6.66652 11.9999Z'%20fill='%230050A5'/%3E%3C/svg%3E") no-repeat center center;
    display: none !important;
}
.select2-container[id*="select2-select2Product2"] .select2-selection__arrow,
#select2-select2Product2-container ~ .select2-selection__arrow {
    display: none !important;
}

#select2-barcodeType-container, #select2-barcodeType, 
#select2-munitItem-container, #select2-munitItem, 
#select2-munitItem2-container, #select2-munitItem2,
#select2-vatGroup-container, #select2-vatGroup,
#select2-groupItemSelect-container, #select2-groupItemSelect, 
#select2-vatGroupId-container, #select2-vatGroupId {
    text-box: auto;
    border-radius: 8px;
    align-items: center;
    border: 1.2px solid #4C8CD9!important;
    color: #4C8CD9!important;
    background-color: inherit!important;
    height: auto!important;
    min-height: 42px!important;
    width: auto!important;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;

}

.select2-container[id*="select2-munitItem"] .select2-selection__arrow,
#select2-munitItem-container ~ .select2-selection__arrow {
    right: 10%;
    top: 20%;
}
.select2-container[id*="select2-munitItem2"] .select2-selection__arrow,
#select2-munitItem2-container ~ .select2-selection__arrow {
    right: 10%;
    top: 20%;
}
.select2-container[id*="select2-vatGroup"] .select2-selection__arrow,
#select2-vatGroup-container ~ .select2-selection__arrow {
    right: 10%;
    top: 20%;
}
.select2-container[id*="select2-groupItemSelect"] .select2-selection__arrow,
#select2-groupItemSelect-container ~ .select2-selection__arrow {
    right: 10%;
    top: 20%;
}
.select2-container[id*="select2-vatGroupId"] .select2-selection__arrow,
#select2-vatGroupId-container ~ .select2-selection__arrow {
    right: 10%;
    top: 20%;
}

#select2-groupSelected-container, #select2-groupSelected{
    text-box: auto;
    border-radius: 8px;
    align-items: center;
    border: 1.2px solid #4C8CD9!important;
    color: #4C8CD9!important;
    background-color: inherit!important;
    height: 42px!important;
    width: auto!important;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;

}
.select2-container[id*="select2-groupSelected"] .select2-selection__arrow,
#select2-groupSelected-container ~ .select2-selection__arrow {
    right: 10%;
    top: 20%;
}

/* ===== SELECT2 CON SVG PERSONALIZADO ===== */

/* Ocultar la flecha por defecto */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder { 
    color: inherit; 
    font-weight: inherit; }

/* Aplicar tu SVG personalizado */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    background: url("data:image/svg+xml,%3Csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.0001 1.83264C13.999 2.09498 13.8948 2.34638 13.7101 2.53264L9.12006 7.12264C8.55756 7.68444 7.79506 8 7.00006 8C6.20506 8 5.44256 7.68444 4.88006 7.12264L0.29006 2.53264C0.103809 2.34528 -0.00073268 2.09183 -0.000732692 1.82764C-0.000732703 1.56345 0.103809 1.31 0.29006 1.12264C0.383023 1.02891 0.493624 0.954517 0.615483 0.903748C0.737342 0.852979 0.868048 0.826842 1.00006 0.826842C1.13207 0.826842 1.26278 0.852979 1.38464 0.903748C1.5065 0.954517 1.6171 1.02891 1.71006 1.12264L6.29006 5.71264C6.38302 5.80637 6.49362 5.88076 6.61548 5.93153C6.73734 5.9823 6.86805 6.00844 7.00006 6.00844C7.13207 6.00844 7.26278 5.9823 7.38464 5.93153C7.5065 5.88076 7.6171 5.80637 7.71006 5.71264L12.2901 1.12264C12.383 1.02891 12.4936 0.954516 12.6155 0.903747C12.7373 0.852979 12.868 0.826841 13.0001 0.826841C13.1321 0.826841 13.2628 0.852979 13.3846 0.903747C13.5065 0.954516 13.6171 1.02891 13.7101 1.12264C13.8027 1.21608 13.8761 1.32689 13.9258 1.44873C13.9756 1.57057 14.0008 1.70103 14.0001 1.83264Z' fill='%230050A5'/%3E%3C/svg%3E") no-repeat center center;
    background-size: 16px 16px !important;
    width: 20px;
    height: 20px;
    position: absolute;
    right: 8px;
    top: 10%;
}

/* Efecto hover */
.select2-container--default .select2-selection--single:hover .select2-selection__arrow {
    opacity: 0.8;
}

/* Cuando el dropdown está abierto */
.select2-container--open .select2-selection--single .select2-selection__arrow {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

/* Para select deshabilitado */
.select2-container--disabled .select2-selection--single .select2-selection__arrow {
    opacity: 0.5;
}

/* Rotar flecha cuando está abierto */
.select2-container--open .select2-selection--single .select2-selection__arrow {
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}


/***End Select2***/
.nav {
    font-size: 14px !important;
}

span.qtty {
    font-size: 16px;
}

.operator30 {
    width: 28%;
    display: inline;
}

.field70 {
    width: 70%;
    display: inline;
}

.field30 {
    width: 33%;
    display: inline;
}

.btn-default:hover, .btn-default:focus {
    background-position: 0;
}


@media screen and (-webkit-min-device-pixel-ratio:0) {
    select,
    textarea,
    input {
        font-size: 16px;
    }
}

.col-xsm-1, .col-xsm-2, .col-xsm-3, .col-xsm-4, .col-xsm-5, .col-xsm-6, .col-xsm-7, .col-xsm-8, .col-xsm-9, .col-xsm-10, .col-xsm-11, .col-xsm-12 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 350px) and (max-width:768px) {
    .col-xsm-1, .col-xsm-2, .col-xsm-3, .col-xsm-4, .col-xsm-5, .col-xsm-6, .col-xsm-7, .col-xsm-8, .col-xsm-9, .col-xsm-10, .col-xsm-11, .col-xsm-12 {
        float: left;
    }

    .col-xsm-12 {
        width: 100%;
    }

    .col-xsm-11 {
        width: 91.66666667%;
    }

    .col-xsm-10 {
        width: 83.33333333%;
    }

    .col-xsm-9 {
        width: 75%;
    }

    .col-xsm-8 {
        width: 66.66666667%;
    }

    .col-xsm-7 {
        width: 58.33333333%;
    }

    .col-xsm-6 {
        width: 50%;
    }

    .col-xsm-5 {
        width: 41.66666667%;
    }

    .col-xsm-4 {
        width: 33.33333333%;
    }

    .col-xsm-3 {
        width: 25%;
    }

    .col-xsm-2 {
        width: 16.66666667%;
    }

    .col-xsm-1 {
        width: 8.33333333%;
    }
}

.scrolly{
    overflow-y: scroll;
    justify-content: center!important;
}

.modal-body{
    border-radius: 8px; 
    /* padding: 0px;  */
    gap: 10px; 
    height: 100%; 
    width: 100%;
}

.moveditem {
    color: blue;
}

.changeditemlist {
    margin-bottom: 25px;
    padding: 3px;
    overflow-y: auto; 
    max-height: 35vh;
    gap: 4px;
    scrollbar-width: thin;                
    scrollbar-color: #A3C9F3 #DFEFFF;            
}

::-webkit-scrollbar-button {
  display: none!important;
  width: 0!important;
  height: 0!important;
}

.itemlist {
    padding: 3px;
}

.reports-itemslist{
    overflow-x: auto!important; 
    overflow-y: auto!important;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: min-content;
    width: 100%;
}

/* Lista de productos scrollable */
#itemlist {
  max-height: 350px;    
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

#itemlistEdit {   
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

#itemlist-cashbook{
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: min-content;
  width: 100%;
}

#itemlistG, .itemlistG {
  max-height: 100%;    
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

.munit {
    font-size: 10px;
    display: inline-block;
    margin-left: 3px;
}

.quick-search {
    width: 100px;
    display: inline;
    position: relative;
    top: 2px;
}

g[class$='-creditgroup'] {
    display: none;
}

.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
    padding: 3px;
}

.unsaved {
    color: royalblue;
}


#loading {
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 2000;
    text-align: center;
    top: 0px;
    opacity: 0.3;
    background-color: grey;
}

    #loading img {
        margin-top: 150px;
    }

.modal-dialog{
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
    min-width: 50%;
}

.modal-dialog.full {
    margin: 0px auto;
}

    /* .modal-dialog.full .modal-header, .modal-dialog.full .modal-footer {
        padding: 5px;
    } */

    /* .modal-dialog.full .alert {
        padding: 5px;
    } */

@media print {
    .screen {
        display: none;
    }

    .print {
        display: block;
    }

    @page {
        size: auto;
        margin: 3mm auto;
    }

    a[href]:after {
        content: "" !important;
    }
}

.alert, .nav-tabs > li > a, .btn, .form-control, .select2-container--default .select2-selection--multiple, .dropdown-menu, .select2-container--default .select2-selection--single, .nav-pills > li > a {
    border-radius: 0px !important;
}

td.highlight {
    background-color: green;
}

.modal-content {
    border-radius: 0px;
}


.alert {
    padding: 5px;
    margin-bottom: 0px;
}


.form-control {
    padding: 3px;
    height: 28px;
}

.containertop {
    border-radius: 8px;
    padding: 16px;
    gap: 16px;
    background-color: #DFEFFF;
    height: 100%;
    width: 100%;
}

.select2-container--default .select2-selection--single {
    border-radius: 0px !important;
}

.smallqttyinput {
    display: inline-block;
    width: 70px;
}

.smallqttycontainer {
    display: block;
    width: 120px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    margin-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

.secondary-sidebar.selected {
    gap: 32px!important;
    width: auto;
    margin-right: 0;
    display: flex!important;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 32px;
    padding-top: 32px;
}

.secondary-sidebar .submenu-nav li a.nav-link span.link-text {
    display: none;
}

.secondary-sidebar.selected .submenu-nav li a.nav-link span.link-text {
    display: flex;
    align-items: center;
    white-space: normal;
}

.nav-link {
    align-items: center!important;
    display: flex!important;
    color: #003C7D;
    gap: 12px;
    border-radius: 16px;
    padding: 16px;
    height: 56px;
    font-weight: 600;
    width: 100%!important;
}

/* .nav-link.home{
    justify-content: center!important;
    align-items: center!important;
} */

.nav-link:hover, .nav-link:focus, .nav-link.selected, .nav-item.selected{
    color: #0050A5!important;
    background-color: #DFEFFF;
    cursor: pointer;
}

.ng-scope.selected, .group-node.selected{
    background-color: #A3C9F3!important;
    border-radius: 8px!important;
}

.link-text {
    font-family: 'Roboto', 'Arial', sans-serif; 
    font-weight: 600; 
    font-size: 16px; 
    line-height: 100%;
}

.link-text-submenu {
    font-weight: 600; 
    font-size: 16px; 
}

#location-button:hover{
    background-color: #4C8CD9!important;
    color: #FFFFFF!important;
}

#app{
    display: flex;
    flex-direction: column;
    flex: 1; 
    min-width: 0; 
    width: 100%;
    height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;                
    scrollbar-color: #A3C9F3 #DFEFFF;  
}

@media (max-width: 1600px){

    #home{
        width: 80%!important;
    }

    .direct-access{
        padding-top: 24px!important;
        padding-bottom: 24px!important;
        justify-content: center!important;
    }

    .span{
        font-size: 16px!important;
    }

}

@media (max-width: 1475px){

    #home{
        width: 80%!important;
    }

    .direct-access{
        padding-top: 24px!important;
        padding-bottom: 24px!important;
        justify-content: center!important;
    }

    .noMobile{
        display: none;
    }

    #buttons-footer-transfer{
        justify-content: space-between!important;
    }
}


@media (max-width: 1024px) {
    #app-container{
        flex-direction: column!important;
        height: auto!important;
    }
    #path-header{
        width: 100%!important;
        padding-left: 16px!important;
    }
    .primary-sidebar, .secondary-sidebar {
        height: 8%!important;
        width: 100%!important;
        flex-direction: row!important;
        border-bottom: 1.2px solid #DFEFFF!important;
    }
    .primary-sidebar.d-flex.flex-column.selected{
        align-items: center!important;
    }
    .sidebar-header{
        flex-direction: row!important;
        gap: 0px!important;
        padding: 0px!important;
        height: 100%!important;
        width: auto!important;
    } 
    #sidebar-nav{
        flex-direction: row!important;
        height: 100%!important;
    }

    /* .secondary-sidebar {
        width: 15%!important;
        height: 100%!important;
    } */
    .secondary-sidebar-header{
        height: auto!important;
        width: 100%!important;
        display: none!important;
    }
    #submenuContent{
        width: 100%!important;
        height: 100%!important;
        display: flex!important;
        flex-direction: row!important;
        margin: 0px!important;
        padding: 0px!important;
    }
    #headerForm{
        flex-direction: column!important;
        height: auto!important;
        width: 100%!important;
        gap: 8px!important;
    }
    #entity-header{
        width: 100%!important;
        max-width: 100%!important;
    }

    .nav-link.selected {
        padding: 0px !important;
    }

    .nav-link {
        padding: 0px !important;
    }

    .direct-access{
        padding-top: 24px!important;
        padding-bottom: 24px!important;
        justify-content: center!important;
    }

    #price-column, .price-column{
        display: none!important;
    }

    .row-column{
        flex-direction: column!important;
    }

    .column-row{
        flex-direction: row!important;
    }

    #itemlist-cashbook{
        max-height: 650px!important;
    }

    .submenu-production{
        padding: 0px!important;
    }

    .start{
        justify-content: start!important;
    }

    #actual-direction{
        font-size: 20px!important;
    }

    .nav-link.home{
        align-items: center!important;
        justify-content: center!important;
    }

    .mw-100{
        width: 100%!important;
    }

}

/* Very small screens */
@media (max-width: 768px) {
    #app-container{
        flex-direction: column!important;
        height: auto!important;
    }
    #path-header{
        width: 100%!important;
        padding-left: 16px!important;
    }
    .primary-sidebar, .secondary-sidebar {
        height: 8%!important;
        width: 100%!important;
        flex-direction: row!important;
        border-bottom: 1.2px solid #DFEFFF!important;
    }
    .sidebar-header{
        flex-direction: row!important;
        gap: 0px!important;
        padding: 0px!important;
        height: 100%!important;
        width: auto!important;
    } 
    #sidebar-nav{
        flex-direction: row!important;
        height: 100%!important;
    }

    #sidebar-logo{
        width: 90%!important;
        height: 100%!important;
    }
    #sidebar-title{
        display: none!important;
    }
    #mobile-logo{
        display: flex!important;
    }

    /* .secondary-sidebar {
        width: 15%!important;
        height: 100%!important;
    } */
    .secondary-sidebar-header{
        height: auto!important;
        width: 100%!important;
        display: none!important;
    }
    #submenuContent{
        width: 100%!important;
        height: 100%!important;
        display: flex!important;
        flex-direction: row!important;
        margin: 0px!important;
        padding: 0px!important;
    }
    #submenuTitle{
        display: none!important;
    }

    #headerForm{
        flex-direction: column!important;
        height: auto!important;
        width: 100%!important;
        gap: 8px!important;
    }
    #entity-header{
        width: 100%!important;
        max-width: 100%!important;
    }

    .nav-link.selected {
        padding: 2px !important;
    }

    .nav-link {
        padding: 2px !important;
        justify-content: center!important;
    }
    .link-text{
        display: none!important;
    }

    #location-button{
        width: max(21%, auto)!important;
    }
    #products-header{
        width: 100%!important;
        flex-direction: column!important;
        gap: 8px!important;
        margin: 0px!important;
    }
    #filter{
        width: 100%!important;
        margin: 0px!important;
        padding: 0px!important;
        font-size: 16px!important;
    }
    .info-header{
        width: 100%!important;
    }
    #code-column{
        width: 15%!important;
        margin: 0px!important;
        text-align: center!important;
    }
    #product-column, .product-column{
        margin: 0px!important;
        text-align: left!important;
        width: 50%!important;
    }
    #quantity-column, .quantity-column{
        text-align: center!important;
        width: 50%!important;
        flex-grow: 1;
        padding-left: 4px!important;
    }
    #other-column{
        flex-grow: 1;
        margin: 0px!important;
    }

    #top{
        height: 10%!important;
    }
    #affix-container{
        height: 100%!important;
        flex-direction: column-reverse!important;
        gap: 8px!important;
        padding: 8px!important;
    }
    #affix-container-edits{
        height: 100%!important;
        flex-direction: column-reverse!important;
        gap: 8px!important;
        justify-content: space-between!important;
    }

    #total-footer{
        width: 100%!important;
        flex-direction: row!important;
        justify-content: center!important;
        align-items: center!important;
        padding: 16px!important;
        line-height: 0px!important;
    }

    #qtty-button{
        display: none;
    }
    #product-column-modal, .product-column-modal{
        width: 40%!important;
    }
    #quantity-column-modal, .quantity-column-modal{
        width: 30%!important;
    }
    #price-column-modal, .price-column-modal{
        display: none!important;
        width: 0px!important;
    }
    #priceIn, #qttyIn{
        width: 90%!important;
        border: 1.2px solid #003C7D!important;
        border-radius: 8px !important;
    }
    .modal-content, .modal-footer{
        min-width: 0px!important;
        width: 100%!important;
        padding: 8px!important;
    }
    .pull-right{
        padding: 2px!important;
        width: 100%!important;
    }
    #qtty-img{
        width: 20%!important;
    }

    .qtty.label{
        font-size: 16px!important;
    }

    .detailed-product{
        padding: 2px!important;
    }
    .button{
        width: 100%;
        padding: 6px!important;
        justify-content: center;
    }
    #buttons-footer{
        gap: inherit!important;
        margin: 0px!important;
    }
    #buttons-footer-transfer{
        gap: inherit!important;
        justify-items: center;
        margin: 0px!important;
    }
    .span{
        font-size: 14px!important;
    }
    #code{
        display: none;
        width: 0px;
    }
    #product-transfer{
        width: 33%;
    }
    #arrow-right{
        rotate: 90deg;
    }

    #modal-edit-content{
        height: auto!important;
    }

    #home{
        width: max-content!important;
        gap: 8px!important;
    }

    #mobile-column{
        width: 50%!important;
        display: flex!important;
        flex-direction: column!important;
        justify-content: center; 
        align-items:center;
        text-align: center!important;
        flex-grow: 1;
    }

    #edit-info-header, .ng-scope{
        padding-left: 4px!important;
        padding-right: 4px!important;
    }
    #backButton{
        width: 100%!important;
        margin-left: 0px!important;
    }
    #path-header{
        padding: 0px!important;
    }

    #onlyAvailable{
        font-size: 12px!important;
        white-space: break-spaces!important;
    }

    .modal-dialog-items{
        width: 100%!important;
        margin: 0px;
    }

    .img-container{
        width: 40%!important;
    }

    .items-left{
        width: 25%!important;
    }

    .items-right{
        width: 75%!important;
    }

    .filter-container{
       width: 100%; 
       padding: 0px;
    }

    .recipe-header{
        margin: 0px!important;
        padding: 0px!important;
    }

    .recipe-edit-footer{
        flex-direction: column!important;
        width: 40%!important;
    }

    .recipe-edit-info{
        width: 60%!important;
        padding: 8px!important;
        font-size: 14px!important;
        font-weight: 400!important;
    }

    .recipe-info{
        font-weight: 500!important;
    }

    .start{
        justify-content: start!important;
    }

    #edit-body-summary{
        display: block!important;
        height: 840px!important;
        max-height: 840px!important;
    }

    #pie-chart-container{
        width: 100%!important;
        max-width: 100%!important;
        height: 50%!important;
        max-height: 50%!important;
        padding-top: 16px;
    }

    .select2-container{
        font-size: 16px!important;
    }

    .direct-access{
        padding-top: 16px!important;
        padding-bottom: 16px!important;
        font-size: 20px!important;
        font-weight: 400!important;
    }

}

@media (max-width: 420px) {
    .direct-access{
        font-size: 16px!important;
    }

    .icon-direct-access{
        width: 32px!important;
        height: 32px!important;
    }
}

#itemlistEdit li:nth-child(odd) { background: #FFFFFF; } 
#itemlistEdit li:nth-child(even) { background: #F5F7FA; border-radius: 8px; }

#itemlist li:nth-child(odd) { background: #FFFFFF; } 
#itemlist li:nth-child(even) { background: #F5F7FA; border-radius: 8px; }

#itemlistG li:nth-child(odd) { background: #FFFFFF; } 
#itemlistG li:nth-child(even) { background: #F5F7FA; border-radius: 8px; }

.itemlistG li:nth-child(odd) { background: #FFFFFF; } 
.itemlistG li:nth-child(even) { background: #F5F7FA; border-radius: 8px; }

#itemlist-cashbook li:nth-child(odd) { background: #FFFFFF; } 
#itemlist-cashbook li:nth-child(even) { background: #F5F7FA; border-radius: 8px; }

#qttyForm, #generalForm, #extraForm, #priceForm, #groupForm, #itemForm{
    display: flex;
    flex-direction: column;
    width: 100%;
}

ul#itemlist { 
    overflow-y: auto; 

    /* Firefox */
    -ms-overflow-style: none; 
}

ul#itemlist::-webkit-scrollbar { 
    /* Chrome / Safari */ 
    width: 0; 
    height: 0; 
    display: none; 
}

ul#itemlistG, ul.itemlistG { 
    overflow-y: auto; 

    /* Firefox */
    -ms-overflow-style: none; 
}

ul#itemlistG::-webkit-scrollbar, ul.itemlistG::-webkit-scrollbar { 
    /* Chrome / Safari */ 
    width: 0; 
    height: 0; 
    display: none; 
}

.button{
    height: 38px;
}

.accept-button {
    color: #0050A5;
    background-color: #FFFFFF;
    border: 1.2px solid #0050A5;
    border-radius: 8px!important;
    display: flex;
    gap: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 16px;
    padding-left: 16px;
    align-items: center;
    font-family: 'Roboto', 'Arial', sans-serif; 
    font-weight: 600; 
    font-size: 20px; 
    line-height: 100%;
}

.cancel-button{
    color: #DC3545;
    background-color: #FFFFFF;
    border: 1.2px solid #DC3545;
    border-radius: 8px!important;
    display: flex;
    gap: 10px;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-right: 16px;
    padding-left: 16px;
    align-items: center;
    font-family: 'Roboto', 'Arial', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 100%;
}

.green-button{
    font-weight: 400; 
    color: #8BBE41; 
    background-color: #FFFFFF; 
    border: 1.2px solid #8BBE41; 
    border-radius: 8px!important; 
    display: flex; 
    gap: 10px; 
    padding-top: 8px; 
    padding-bottom: 8px; 
    padding-right: 16px; 
    padding-left: 16px; 
    align-items: center; 
    font-size: 20px; 
}

.yellow-button{
    color: #FFC107; 
    background-color: #FFFFFF; 
    border: 1.2px solid #FFC107; 
    border-radius: 8px; 
    display: flex; 
    gap: 10px; 
    padding-top: 8px; 
    padding-bottom: 8px;
    padding-right: 16px; 
    padding-left: 16px; 
    align-items: center;
}

.product-item.d-flex.flex-row {
    height: 58px; 
    font-family: 'Roboto', 'Arial', sans-serif; 
    font-weight: 400; 
    font-size: 20px; 
    line-height: 100%; 
    color: #003C7D; 
    padding-left: 32px; 
    padding-right: 32px; 
    border: none; 

}

.product-item.d-flex.flex-row.selected {
    border-radius: 8px;
    background-color: #DFEFFF!important;
}

.product-item.d-flex.flex-row:hover {
    border-radius: 8px;
    border: 2px solid #0050A5 !important;
    cursor: pointer;
}

.panel-production {
    display: flex;
    flex-direction: column;
    max-height: 378.5px;
    overflow-y: auto;
    border-radius: 8px;
    padding: 16px;
    gap: 8px;
    background-color: #FFFFFF;
    width: 100%;
}

.panel-heading {
    display: flex;
    flex-direction: row;
    font-family: 'Roboto', 'Arial', sans-serif; 
    font-size: 20px; 
    line-height: 100%; 
    color: #003C7D;
    align-items: center;
}

.panel-body {
    display: flex;
    flex-direction: column;
    width: 100%;
}

#recipeName {
    text-box: auto;
    border-radius: 8px!important;
    border: 2px solid #A3C9F3!important;
    color: #A3C9F3;
    -webkit-text-fill-color: #0050A5 ;
    background-color: inherit!important;
    height: auto!important;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 16px;
    padding-right: 16px;
    font-family: 'Roboto', 'Arial', sans-serif; 
    font-size: 20px; 
    line-height: 100%; 
}

.qtty-positive {
    background-color: #EBF5DB !important;
    color: #8BBE41 !important;
}
.qtty-negative {
    background-color: #F5D5D8 !important;
    color: #DC3545 !important;
}

.isRecipe {
    color: #FFC107 !important;
}

.modal-fade{
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
}

#edit-input, .edit-input{
    padding-bottom: 8px; 
    padding-top: 8px; 
    padding-right: 16px; 
    padding-left: 16px; 
    border: 1px solid #A3C9F3; 
    border-radius: 8px!important; 
    font-family: 'Roboto', 'Arial', sans-serif; 
    font-weight: 400; 
    font-size: 16px; 
    line-height: 100%; 
    color:#003C7D; 
    text-align: left; 
    height: auto;
}

#qtty-btn{
    width: 24px;
    height: 24px;
}

.modal.show[data-modal-level="2"] {
  z-index: 1070 !important;
}

input[type=radio] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid #4C8CD9;
    border-radius: 50%;
    background-color: white;
    cursor: pointer;
    position: relative;
}

input[type=radio]:checked {
    background-color: white;
    border-color: #4C8CD9;
}

input[type="radio"]:checked::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background-color: #4C8CD9;
    border-radius: 50%;
}

input[type=checkbox]{
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid #4C8CD9!important; 
    border-radius: 3px!important;
    background-color: #FFFFFF;
    cursor: pointer;
    position: relative;
}
input[type=checkbox]:checked{
    background-color: #4C8CD9;
    border-color: #258cfb;
}
input[type="checkbox"]:checked::before {
    content: "✓";
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-weight: bold;
}

input[type=number]{
    background-color: inherit;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield; /* Firefox */
}


.radio-custom {
  position: relative;
  padding-left: 28px;
  cursor: pointer;
  display: inline-block;
  font-size: 20px;
  user-select: none;
}

.radio-custom input[type="radio"] {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  margin: 0;
}

.radio-custom .checkmark {
  position: absolute;
  left: 0;
  top: 0;
  height: 16px;
  width: 16px;
  border: 1.2px solid #4C8CD9;
  border-radius: 50%;
  background: #fff;
}

.radio-custom input[type="radio"]:checked ~ .checkmark {
  background-color: #4C8CD9;
  border-color: #4C8CD9;
}

.radio-custom .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.radio-custom input[type="radio"]:checked ~ .checkmark:after {
  display: block;
}

.radio-custom .checkmark:after {
  left: 6px;
  top: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  content: "";
  position: absolute;
}

#main-content{
    gap: 8px;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 16px;
    padding-top: 16px;
    scrollbar-width: thin;                
    scrollbar-color: #A3C9F3 #DFEFFF;  
}
#groups-button, .groups-button{
    color: #4C8CD9; 
    background-color: #FFFFFF; 
    border: 1.2px solid #4C8CD9; 
    border-radius: 8px; 
    display: flex; 
    gap: 10px; 
    padding-top: 8px; 
    padding-bottom: 8px; 
    padding-right: 16px; 
    padding-left: 16px; 
    align-items: center;
}
#groups-button.selected{
    background-color: #DFEFFF!important;
}

#home{
    gap: 32px;
    width: 1000px;
    height: 600px;
    align-items: center;
    justify-content: center;
    color: #003C7D;
    font-family: 'Roboto', 'Arial', sans-serif; 
    font-weight: 500; 
    font-size: 24px; 
    line-height: 100%;
}

.home-column{
    height: 100%;
    width: 33%;
    gap: 32px;
    
}

.direct-access{
    border-radius: 16px;
    border: 1px solid #A3C9F3;
    padding-top: 48px;
    padding-bottom: 48px;
    gap: 8px;
    background-color: #FFFFFF;
    height: 33%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.icon-direct-access{
    width: 48px;
    height: 48px;
}

#mobile-column{
    display: none;
}

#edit-body-items, #edit-body-groups{
    max-height: 85%; 
    border-radius: 8px; 
    border: 2px solid #DFEFFF; 
    padding: 8px; 
    gap: 16px; 
    width: 100%; 
    background-color: #FFFFFF;
}

.cashbook-column{
    flex: 0 0 auto;
    width: 140px;
    justify-content: center;
    align-items:center;
}

.generic-report-column{
    display: flex;
    flex-direction: column;
    flex: 1 0 150px;
    justify-content: center;
    align-items:center;
}

#edit-body-items-cashbook{
    max-height: 60%; 
    border-radius: 8px; 
    border: 2px solid #DFEFFF; 
    padding: 16px; 
    gap: 16px; 
    background-color: #FFFFFF; 
    width: 100%;
}

#summary-body{
   
    border-radius: 8px; 
    border: 2px solid #DFEFFF; 
    padding: 16px; 
    gap: 16px; 
    background-color: #FFFFFF; 
    width: 100%;

}

#edit-body-items-summary{
    max-height: 40%; 
    border-radius: 8px; 
    border: 2px solid #DFEFFF; 
    padding: 16px; 
    gap: 16px; 
    width: 100%; 
    background-color: #FFFFFF;
    height: auto;
}

#edit-body-summary{
    padding: 8px!important; 
    height: 420px; 
    max-height: 420px; 
    justify-content: space-between;
    background-color: #FFFFFF;
    border-radius: 8px; 
    border: 2px solid #DFEFFF; 
}

.body-container{
    width: 100%; 
    border: 2px solid #DFEFFF; 
    border-radius: 8px; 
    height: 90%; 
    overflow-x: auto;
}

.info-header-cashbook{
    text-align: center; 
    background-color: #DFEFFF !important; 
    font-weight: 500; 
    font-size: 16px; 
    color: #003C7D; 
    padding-top: 8px; 
    padding-bottom: 8px; 
    width: auto;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    height: auto;
}

#entity-header{
    display: flex;
    align-items: center;
    padding-bottom: 8px; 
    padding-top: 8px; 
    padding-left: 16px; 
    padding-right: 16px; 
    border-radius: 32px; 
    background-color: #DFEFFF;
    gap: 10px; 
    flex: 0 0 auto; 
    /* width: 28%; */
}

.header-date{
    padding-right: 10px; 
    font-weight: 600; 
    font-size: 20px; 
    line-height: 100%; 
    color: #003C7D;
}

.header-date-input{
    padding-right: 10px; 
    font-weight: 400; 
    font-size: 20px!important; 
    line-height: 100%; 
    color: #0050A5; 
    background-color: #DFEFFF!important; 
    border: none;
    cursor: pointer;
    width: 170px;
}

.no-items{
    font-weight: 300; 
    font-size: 18px; 
    color: #DC3545;
}

.item{
    cursor: pointer; 
    height: 58px; 
    font-weight: 400; 
    font-size: 16px; 
    color: #003C7D; 
    border: none; 
    width: 100%; 
    text-align: center;
}

.info-header{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center; 
    width: 100%;
    text-align: center; 
    background-color: #DFEFFF; 
    font-weight: 400; 
    font-size: 20px; 
    color: #003C7D; 
    padding-top: 8px; 
    padding-bottom: 8px; 
}

#product-column-center{
    justify-content: center;
    align-items:center;
    color: #003C7D;
}

.span{
    font-weight: 400;
    font-size: 20px;
}

.rounded-button{
    display: flex;
    border-radius: 32px;
    gap: 10px;
    background-color: #DFEFFF;
    padding: 8px 16px;
    color: #003C7D;
    font-weight: 400;
    font-size: 20px;
    border: none;
}

.header-cashbook{
    width: 100%;
    font-weight: 600;
    font-size: 20px;
    color: #003C7D;
    gap: 16px;
    padding-right: 16px;
    padding-left: 16px;
}

.header-left{
    width: 100%;
    justify-content: left;
    align-items: center;
    font-weight: 600;
    font-size: 24px;
    color: #003C7D;
    gap: 16px;
    padding: 8px 16px;
}

#buttons-footer{
    gap: 16px;
}

.details-button{
    color: #4C8CD9; 
    background-color: #FFFFFF; 
    border: 1.2px solid #4C8CD9; 
    border-radius: 8px; 
    display: flex; 
    gap: 10px; 
    padding-top: 8px; 
    padding-bottom: 8px; 
    padding-right: 16px; 
    padding-left: 16px; 
    align-items: center;
}

#entryForm, #filterForm, #entryFormTransfer{
    font-weight: 400;
    font-size: 18px; 
    color: #4C8CD9; 
    padding-top: 8px; 
    padding-bottom: 8px; 
    width: 100%; 
    gap: 16px;
}

#modal-edit-content {
    width: 100%; 
    padding: 16px; 
    border-radius: 16px; 
    min-height: 55vh;
    height: auto;
}

.myLine{
    opacity: 1; 
    height: 1px; 
    background-color: #DFEFFF;
    margin: 0px;
}

.search{
    background: url("data:image/svg+xml,%3Csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M15.8045%2014.8619L11.8252%2010.8825C12.9096%209.55625%2013.4428%207.86392%2013.3144%206.15556C13.1861%204.44721%2012.406%202.85354%2011.1356%201.7042C9.86516%200.554862%208.20158%20-0.0622172%206.48895%20-0.019396C4.77632%200.0234252%203.14566%200.72287%201.93426%201.93426C0.72287%203.14566%200.0234252%204.77632%20-0.019396%206.48895C-0.0622172%208.20158%200.554862%209.86516%201.7042%2011.1356C2.85354%2012.406%204.44721%2013.1861%206.15556%2013.3144C7.86392%2013.4428%209.55625%2012.9096%2010.8825%2011.8252L14.8619%2015.8045C14.9876%2015.926%2015.156%2015.9932%2015.3308%2015.9916C15.5056%2015.9901%2015.6728%2015.92%2015.7964%2015.7964C15.92%2015.6728%2015.9901%2015.5056%2015.9916%2015.3308C15.9932%2015.156%2015.926%2014.9876%2015.8045%2014.8619ZM6.66652%2011.9999C5.61169%2011.9999%204.58054%2011.6871%203.70348%2011.101C2.82642%2010.515%202.14283%209.68204%201.73916%208.7075C1.3355%207.73296%201.22988%206.66061%201.43567%205.62604C1.64145%204.59147%202.14941%203.64117%202.89529%202.89529C3.64117%202.14941%204.59147%201.64145%205.62604%201.43567C6.66061%201.22988%207.73296%201.3355%208.7075%201.73916C9.68204%202.14283%2010.515%202.82642%2011.101%203.70348C11.6871%204.58054%2011.9999%205.61169%2011.9999%206.66652C11.9983%208.08052%2011.4359%209.43615%2010.436%2010.436C9.43615%2011.4359%208.08052%2011.9983%206.66652%2011.9999Z'%20fill='%230050A5'/%3E%3C/svg%3E") no-repeat left center !important;
    background-size: 16px 16px !important;
    padding-left: 20px !important;
    padding-right: 12px !important;
}

.sliding-menu{
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sliding-menu-header{
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #A3C9F3;
    width: 100%;
}

.sliding-menu-header-column{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    gap: 8px;
    margin-top: auto;
}

.sliding-menu-header-column span {
    display: block;
    text-align: center;
    width: 100%;
    font-weight: 500;
}

.sliding-line{
    background-color: #A3C9F3;
    opacity: 1; 
    height: 4px!important; 
    margin: 0px;
    width: 100%;
}

.sliding-line.active{
    background-color: #4C8CD9;
}

.active{
    color: #4C8CD9!important;
}

.sliding-menu-content{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.content-row{
    display: flex;
    flex-direction: row;
    align-items: center; 
    gap: 8px;
}

.content-column{
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.sliding-menu-footer{
    display: flex;
    flex-direction: row;
    width: auto; 
    gap: 16px; 
    border-top: 1px solid #DFEFFF; 
    align-items: center;
}

.form-label{
    display: flex;
    align-items: center;
    margin: 0px!important;
}

#modal-edit-content-items{
    display: flex;
    flex-direction: column;
    width: 100%; 
    padding: 16px; 
    border-radius: 16px; 
    height: auto;
}

.modal-dialog-items{
    display: flex;
    width: 60%;
    justify-content: center;
    align-items: center;
    min-height: calc(100% - 1rem);
}

.group-node{
    display: flex;
    align-items: center;
    padding: 8px 32px;
    gap: 16px;
    color: #0050A5;
    cursor: pointer;
}

.group-node img.icon-closed,
.group-node img.icon-open {
    width: 16px;
    height: 16px;
    display: inline-block;
}

.group-node img.icon-open {
    display: none;
}

.group-node.open img.icon-open {
    display: inline-block;
}
.group-node.open img.icon-closed {
    display: none;
}

.group-children{
    display: none;
    padding: 8px 0px 8px 32px;
}

.square {          
  aspect-ratio: 1 / 1;    
  object-fit: cover;   
}

#img-footer{
    gap: 8px;
    padding: 8px;
    justify-content: center;
}

#actual-direction{
    font-size: 24px;
    font-weight: 500;
}

#onlyAvailable{
    color: #4C8CD9; 
    background-color: #FFFFFF;
    width: auto; 
    gap: 8px; 
    align-items: center; 
    justify-content: center; 
    font-size: 20px;
    font-weight: 400;
    white-space:nowrap; 
    text-align: center;
}

.img-container{
    display: flex;
    flex-direction: column;
    gap: 8px; 
    width: 30%; 
    border-right: 1px solid #DFEFFF; 
    justify-content: center; 
    align-items: center;
}

.items-left{
    display: flex;
    flex-direction: column;
    width: 30%; 
    justify-content: space-around; 
    gap: 8px;
}

.items-right{
    display: flex;
    flex-direction: column;
    width: 70%;
    gap: 8px;
}

#filter{
    padding-left: 20px!important;
    border: none; 
    font-weight: 400; 
    font-size: 20px; 
    -webkit-text-fill-color: #4C8CD9;
}

.recipe-header{
    display: flex;;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    width: auto; 
    text-align: center; 
    font-weight: 500; 
    font-size: 20px; 
    color: #4C8CD9; 
    margin-bottom: 8px;
}

.recipe-edit-footer{
    display: flex;
    flex-direction: row;
    justify-content: flex-end; 
    align-items: flex-end; 
    width: 50%; 
    gap: 16px;
    justify-content: center;
    align-items: center;
}

.recipe-edit-info{
    display: flex;
    flex-direction: column;
    border-radius: 16px; 
    background-color: #F5F7FA; 
    width: 50%; 
    padding: 16px; 
    font-weight: 500; 
    font-size: 20px; 
    color: #4C8CD9;
}

.recipe-info{
    margin-left: auto; 
    font-weight: 600; 
    color: #003C7D;
    align-content: center;
}

.row-column{
    display: flex;
    flex-direction: row;
}

.column-row{
    display: flex;
    flex-direction: column;
}

.submenu-submenu{
    display: flex; 
    flex-direction: row; 
    border-radius: 16px; 
    height: 51px; 
    gap: 12px; 
    align-items: center;
}

.filter-card{
    background-color: #FFFFFF;
    border-radius: 8px;
    border: none;
    display: flex;
    flex-direction: row;
    padding: 8px 16px;
}

.filter-column{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.products-container{
    display: flex;
    flex-direction: column;
    border-radius: 8px; 
    gap: 16px; 
    height: 100%; 
    width: 100%; 
    background-color: #DFEFFF;
}

.f-400-20{
    font-weight: 400;
    font-size: 20px;
}

.thin-item{
    cursor: pointer; 
    height: 36px; 
    font-weight: 400; 
    font-size: 16px;  
    color: #003C7D; 
    border: none; 
    width: 100%;
}

.simple-item{
    cursor: pointer; 
    border-radius: 8px;
    height: 40px; 
    font-weight: 500; 
    font-size: 20px;  
    color: #0050A5; 
    border: solid 1px #0050A5; 
    padding: 8px 16px;
    width: 100%;
    display: flex;
    flex-direction: row;
}

.columns-group{
    display: flex;
    flex-direction: column;
    margin-bottom:8px;
    gap: 16px;
    color: #0050A5; 
    width: 50%;
}