:root {
    --main-blue: #394C83;
    --main-orange: #e67e22;
    --dark-orange: #ED5B10;
}

html, body, #app {
    height:100%;
    min-height:100%; 
}

button.btn:disabled {
    background-color: lightslategrey;
}


#confirmationBackdrop {
    display: none;
    z-index: 1900;
}

#confirmation, #changePost {
    display: none;
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 1.5rem;
    font-size: 1.25rem;
    border-radius: 5px;
    text-align: center;
    z-index: 2000;
}

#confirmation.assembly {
    top: 30%;
}

#confirmation > div, #changePost > div {
    display: flex;
    flex-wrap: nowrap;
}

#confirmation > p, #changePost > p {
    margin-bottom: 2rem;
}

#confirmation button, #changePost button {
    background-color: var(--main-orange);
    color: white;
    padding: .675rem;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0 1.25rem 0 0;
    white-space: nowrap;
    min-width: 8rem;
}

#confirmation button:nth-of-type(2), #changePost button:nth-of-type(2) {
    background-color: rgba(220, 53, 69);
    margin: 0 0 0 1.25rem
}

.modal-footer {
    display: flex;
    flex-wrap: nowrap;
}

#noWorkstation {
    position: absolute;
    left: 0;
    top: 40%;
    width: 100%;
    text-align: center;
    font-size: 1.5rem;
    padding: 2rem;
}

.input-form {
    display: flex;
}

.input-form button:active {
    box-shadow: inset 0 0 5px 1px white;
}

.input-form input {
    border-radius: 0.75rem;
    padding: 0.5rem 1rem;
}

#header-input {
    padding-right: 3.5rem;
}

.input-form input:focus {
    box-shadow: 0 0 5px 1px white;
}

div.margin-app {
    padding: 0;
    padding-bottom: 0;
    height: calc(100% - 13.125rem);
}

#sync-icon:hover, .registered-employee:hover, #puestos:hover {
    cursor: pointer;
}

#puestos-header {
    padding: 0;
    width: 100%;
    height: 3rem;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    background: linear-gradient(
        to top,
        var(--main-blue) 0%,
        var(--main-blue) 50%,
        var(--dark-orange) 50%,
        var(--dark-orange) 100%
    );
}

#empleados-section {
    width: 6rem;
    padding: .25rem;
    height: 3rem;
    background-color: var(--main-blue);
    border-radius: .5rem 0 0 0;
    display: flex;
}

#empleados-section button {
    background-color: var(--main-blue);
    border-radius: 0.375rem;
    padding: 0 .5rem;
    font-size: 1.5rem;
    color: #FFFFFF;
}

#empleados-section button:active {
    box-shadow: inset 0 0 5px 1px white;
}

#empleados-section p {
    margin-bottom: 0;
    font-size: 1.375rem;
    width: 100%;
    align-self: center;
    text-align: center;
    color: #FFFFFF;
}

#centers-header {
    margin-bottom: 1rem;
}

#centerActual {
    border: 1px solid black;
    color: black;

    position: relative;
    background-color: #ccc;
}

#centerActual::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: all;

    background:
        linear-gradient(to bottom, #555, transparent) top,
        linear-gradient(to top, #555, transparent) bottom,
        linear-gradient(to right, #555, transparent) left,
        linear-gradient(to left, #555, transparent) right;

    background-repeat: no-repeat;
    background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%;
}

.centers-custom-select div.selected, .custom-select .options li{
    color: black;
    font-size: 18px;
}


.centers-custom-select {
    position: relative;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.centers-custom-select .options {
    display: none;
    background-color: #ccc; 
    width: 100%;
    list-style: none;
    padding-left: 0;
    z-index: 10;
    border: 1px solid black;
    border-top: none;
    margin: 0;
}

.select-content {
    max-height: 24rem;
    padding-bottom: .25rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.centers-custom-select .options.active {
  display: block;
}

.centers-custom-select div.selected::before {
    margin-right: .75rem;
    font-size: 1rem;
}

.centers-custom-select div.selected {
    width: 100%;
}

.centers-custom-select div.selected, .centers-custom-select .options li {
    color: black;
    padding: 0.5rem;
    padding-left: 1rem;
    overflow-x: clip;
    text-overflow: ellipsis;
}

.centers-custom-select .options li {
    border-bottom: 1px solid black;
}

.centers-custom-select .options li:last-of-type {
    border-bottom: none;
}

.centers-custom-select .options li:hover {
    background-color: #999;   
}


.custom-select {
    position: relative;
    width: 100%;
    cursor: pointer;
    height: 100%;
}

.custom-select .selected {
    padding: 0.5rem;
    height: 100%;
}

.custom-select .options {
    display: none;
    position: absolute;
    top: 3rem;
    width: calc(100% + 6rem);
    background: var(--dark-orange);
    max-height: 24rem;
    overflow-y: hidden;
    list-style: none;
    padding-left: 0;
    z-index: 10;
    border-radius: 0 0 .25rem 0;
    box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.5);
    border-top: 4px solid rgb(190, 70, 0);
    border-bottom: 4px solid rgb(190, 70, 0);
    border-right: 4px solid rgb(190, 70, 0);
}

.select-content {
    max-height: 24rem;
    padding-bottom: .25rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.custom-select .options.active {
  display: block;
}

.custom-select div.selected::before {
    margin-right: .75rem;
    font-size: 1rem;
}

.custom-select div.selected {
    width: 100%;
}

.custom-select div.selected, .custom-select .options li {
    color: white;
    padding: 0.5rem;
    padding-left: 1rem;
    overflow-x: clip;
    text-overflow: ellipsis;
}

.custom-select .options li {
    border-bottom: 1px solid rgb(190, 70, 0);
}

.custom-select .options li:last-of-type {
    border-bottom: none;
}

.custom-select .options li:hover {
    background-color: rgb(190, 70, 0);   
}

.bottom-shadow {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1rem;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(105, 41, 8, 0.5));
}

.bottom-shadow.hidden {
    opacity: 0;
}

#puestos {
    border: none;
    outline: none;
    direction: ltr;
    font-size: 1.375rem;
    margin-bottom: 0;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #FFFFFF;

    
    width: calc(100% - 6rem);
    height: 100%;
    display: flex;
    align-items: center;
    background-color:  var(--dark-orange);
    /* border-radius: 0 0 .25rem 0; */
}

#puestos option {
    direction: ltr;
    padding: 30px;
    margin: 10px;
    background-color: #7d7d7d;
    border: 1px solid black;
    border-bottom: 1px solid black;
}

#input-menu {
    padding: .375rem .5rem;
    background-color: #DADADA;
}

#input-menu .input-form {
    position: relative;
    display: flex;
    align-items: center;
}

#input-menu .input-form button {
    position: absolute;
    background-color: var(--main-orange);
    right: 0.375rem;
    border-radius: 0.375rem;
    font-size: 1rem;
    color: #FFFFFF;
}

.input-form input {
    border-radius: 0.75rem;
    padding: 0.5rem 1rem;
}

#noWorkstation.noWorkstation {
    display: none;
}
#appLoaded.noWorkstation {
    padding: 1rem;
    height: calc(100% - 6.25rem);
}

.modal-header, .modal-footer button {
    text-transform: uppercase;
    justify-content: center;
}

#modalSB .modal-header, #modalSB .modal-footer {
    border-radius: 0;
}

#modalSB .modal-body {
    background-color: rgba(250, 235, 215, .5);
}

#modalSB-create .sb-name {
    display: flex;
    text-transform: uppercase;
}

#modalSB-create .sb-name span {
    font-weight: bold;
    margin-right: .5rem;
}

#modalSB-load div.bi {
    font-size: 6rem;
    text-align: center;
    margin: 1rem;
}

#modalSB-load div.bi-box-arrow-in-down::before {
    transform: rotate(-90deg);
}
#modalSB-load div.bi-box-arrow-down::before {
    transform: rotate(90deg);
}

#modalSB-load p {
    font-size: 1.5rem;
    text-align: center;
}

#modalSB-load .sb-info-container {
    margin: 2rem 3rem;
}

#modalSB-load .sb-info-container .sb-info {
    margin-bottom: .25rem;
    text-align: left;
}

#modalSB-load .sb-info-container .sb-info span {
    font-weight: bold;
    margin-right: 1rem;
}

#inputSB-menu {
    margin-bottom: 3rem;
}

#linSB-container {
    height: calc(100% - 10.625rem);
}

#inputSB-menu > p, #linSB-container > p {
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: .5rem;
    display: flex;
    justify-content: space-between;
}

#pesoSB {
    color: var(--dark-orange);
}

#inputSB-menu #readSBLin{
    background-color: var(--main-orange);
    border-radius: 0.5rem;
    font-size: 1.25rem;
    margin-left: .5rem;
    color: #FFFFFF;
}

#linSBList {
    background-color: #fff;
    border: 2px solid #333333;
    border-radius: .5rem;
    padding: 1rem;
    padding-bottom: 2rem;
    min-height: 10rem;
    max-height: calc(100% - 2rem);
    overflow-y: auto;
}

#linSBList p.sb-product {
    margin-bottom: .75rem;
    font-weight: 500;
    border-bottom: 1px solid grey;
    padding-bottom: .5rem;
    padding-right: 2rem;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#linSBList p.sb-product:last-of-type {
    border-bottom: none;
}

#linSBList p span.positions{
    margin-left: .75rem;
}

#linSBList p span.deleteIcon{
    position: absolute;
    padding: .25rem .5rem;
    right: 0;
}

.noProducts, .noSBProducts {
    text-align: center;
    margin: 2rem 0;
    margin-bottom: 2rem;
    text-transform: uppercase;
}

.navbar>.container-fluid {
    justify-content: end !important;
    margin-right: .75rem;
}

#navbarDropdown > .dropdown-menu {
    border: none;
    border-radius: 0 0 0 0.375rem;
    padding: .25rem 1rem;
    /* height: 6rem; */
    margin-top: var(--bs-navbar-padding-y);
    right: -.75rem;
    box-shadow: -1px 1px 2px -2px black;
    max-width: 18rem;
}

#navbarDropdown > .dropdown-menu.show {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

#navbarDropdown > .dropdown-menu > .header-center-label {
    color: white;
    width: 100%;
}

#navbarDropdown > .dropdown-menu > .header-center-label > p {
    width: 100%;
    text-align: center;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#navbarDropdown > .dropdown-menu > .header-menu {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    height: 3rem;
}

#navbarDropdown > .dropdown-menu > .header-menu > .bi {
    color: #FFFFFF;
    font-size: 1.25rem;
}

#navbarDropdown > .dropdown-menu > .header-menu > .bi:first-of-type {
    margin-right: 1.5rem;
}

#navbarDropdown > .dropdown-menu > .header-menu > .bi:last-of-type {
    margin-left: 1.5rem;
}

#header-app-label {
    display: flex;
    justify-content: center;
    align-items: center;
}

#header-app-label #led {
    position: absolute;
    right: 1.125rem;
}

.modal-blue .modal-header, .modal-blue .modal-footer {
    background-color: var(--main-blue);
}
.modal-orange .modal-header, .modal-orange .modal-footer {
    background-color: var(--main-orange);
}
.modal-orange-striped .modal-header, .modal-orange-striped .modal-footer {
    background: repeating-linear-gradient(
        -45deg,
        rgba(190, 70, 0),
        rgba(190, 70, 0) 10px,
        var(--main-orange) 10px,
        var(--main-orange) 20px
    );
}

#modal-emp .modal-dialog, #modalSB .modal-dialog {
    justify-self: center;
}

#modal-emp .modal-dialog, #modal-emp .modal-content, #modalSB .modal-dialog, #modalSB .modal-content {
    height: 100%;
    width: 100%;
}

.modal-tabs {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.modal-tabs > .modal-tab {
    width: 50%;
    height: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    font-weight: bold;
    color: #FFFFFF;
    padding: .5rem;
    cursor: pointer;
}

.modal-tabs > #puesto-emp-tab {
    background-color: var(--main-blue);
}

.modal-tabs > #add-emp-tab {
    background-color: #2980b9;
}

#color-separator {
    width: 100%;
    height: 1.25rem;
    background-color: #2980b9;
}

#puesto-menu {
    background: var(--main-blue);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #FFFFFF;
    padding: 1.25rem 1rem 1rem 1rem;
}

#loggedEmp {
    display: flex;
    align-items: center;
    font-size: 1.375rem;
}

#loggedEmp p{
    margin-left: .5rem;
    margin-bottom: 0;
}

#groupLog {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5rem;
    height: 2.5rem;
}

#groupLog > .btn{
    /* box-shadow: 0 0 2px 2px white; */
    background-color: var(--main-blue);
    color: white;
    text-transform: uppercase;
}

#groupLog > .btn:active {
    box-shadow: inset 0 0 5px 1px white;
}

#modal-emp .modal-body, #modalSB .modal-body {
    max-height: none;
    height: 100%;
}

#modal-emp .modal-body > div > p {
    width: 100%;
    margin-bottom: 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

#modal-emp .modal-body > div:hover {
    cursor: pointer;
}

#modal-emp .modal-header, #modal-emp #modal-emp-footer {
    border-radius: 0;
}

#modal-emp #modal-emp-footer {
    /* height: 3.5rem; */
    background-color: var(--main-blue);
}

#modal-emp #modal-emp-footer.light-blue {
    background-color: #2980b9;
}

#modal-emp #modal-emp-footer > button {
    font-size: 1rem;
}

#modal-emp-puesto .registered-employee, #modal-emp-add .availableEmp {
    position: relative;
    padding: 1rem;
    padding-right: 4rem;
    background-color: aliceblue;
    border: 1px solid black;
    border-radius: 0.375rem;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
    font-weight: bold;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    min-height: 3.75rem;
}

.registered-employee > div.bi-person-circle {
    font-size: 1.25rem;
    margin-right: 0.75rem;
    color: #394C83;
}

p.marginModal {
    text-align: center;
    margin: 2rem 0;
    text-transform: uppercase;
    font-weight: bold;
}

#modal-emp-puesto p.marginModal {
    text-align: center;
    margin: 3rem 0;
    text-transform: uppercase;
    font-weight: bold;
}   

#modal-emp .optionContainer {
    font-size: 1.5rem;
    position: absolute;
    right: 0;
    display: flex;
    padding: 1.125rem;
    justify-content: center;
    align-items: center;
}

.optionContainer.bi-plus-circle-fill{
    color: var(--main-blue);
}


/* modal backdrop fix */
.modal:nth-of-type(even) {
    z-index: 1052 !important;
}
.modal-backdrop:nth-of-type(even) {
    z-index: 1052 !important;
}
/* .modal-backdrop.show:nth-of-type(even) {
    z-index: 1051 !important;
}    */
.modal-backdrop ~ .modal-backdrop
{
    z-index : 1051 ;
}




/* SHIPPING CSS */

.roadmap-menu {
    display: flex;
}

.roadmap-menu > button {
    margin-left: 1rem;
    margin-bottom: 0;
}

.roadmap-menu {
    position: relative;
    padding-bottom: 1rem;
}

.roadmap-menu > i {
    font-size: 1.75rem;
    color: rgb(190, 70, 0);
}

#roadmap-options {
    position: absolute;
    border: 2px solid black;
    background: var(--main-orange);
    right: 0;
    top: calc(100% - 1.125rem);
    border-radius: 0.375rem;
}

#roadmap-options > div {
    border-bottom: 1px solid black;
    padding: .5rem;
    display: flex;
    align-items: center;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
}

#roadmap-options > div:hover {
    background-color: rgb(190, 70, 0);
}

#roadmap-options > div:last-of-type {
    border-bottom: none;
}

#roadmap-options > div > i {
    margin-right: .5rem;
    font-size: 1.25rem;
}
#roadmap-options > div > p {
    margin-bottom: 0;
    white-space: nowrap;
}

.machine-group {
    margin-top: .75rem;
}

.machine-group:first-of-type {
    margin-top: 0;
}

.machine-tab {
    background-color: #e67e22;
    display: flex;
    align-items: center;
}

.machine-tab::before {
    margin-right: .5rem;
    font-size: 1rem;
}

.machine-tab > p {
    width: 100%;
    margin-right: .5rem;
}

.machine-tab.loaded {
    background-color: seagreen;
}

.machine-tab.show {
    border-radius: .5rem .5rem 0 0;
}

.machine-tab > .machine-weight {
    white-space: nowrap;
}

.machine-product-tab {
    display: none;
    color: black;
    background-color: antiquewhite;
    border-radius: 0 0 .5rem .5rem;
}

.machine-product-tab.show {
    display: block;
}

.machine-product-tab > p {
    border-top: 1px solid black;
    padding: .5rem;
    margin-bottom: 0;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    width: 100%;
}

.machine-product-tab > p.loaded {
    padding-right: 2.5rem;
    background-color: rgba(127, 255, 212, 0.25); /*aquamarine*/
}

.machine-product-tab > p > i {
    color: #e67e22;
    font-size: 1rem;
    margin: 0 .375rem 0 .25rem;
}

.machine-product-tab > p > i.loaded {
    position: absolute;
    right: 0;
    font-size: 1.5rem;
    margin: 0 .5rem;
}

.machine-product-tab > p:first-of-type {
    border-top: none;
    margin-bottom: 0;
}

.no-select {
    -webkit-user-select: none; /* Safari, Chrome antiguo */
    -moz-user-select: none;    /* Firefox antiguo */
    -ms-user-select: none;     /* Internet Explorer/Edge */
    user-select: none;         /* Sintaxis estándar moderna */
}