html {
    --primary-text-color: #555;
    --primary-text-color-dark: #fff;
    --primary-background-color: #fff;
    --primary-background-color-dark: #141414;
    --secondary-background-color-dark: #000;
    --third-background-color-dark: #000;

    /* New Platform */
    --primary-background-color-np-dark: #285d57;
    --secondary-background-color-np-dark: #1e4e49;
    --third-background-color-np-dark: #123a3c;

    /* Test System */
    --primary-background-color-test-system: #59a7ab;
}
/* imports font family from google */
body {
    background-color: var(--primary-background-color);
    background-image: none;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 30px;
    font-family: Roboto, sans-serif;
    font-size: 14px;
    color: var(--primary-text-color);
    text-align: justify;
    margin: 0;
}
html,
body,
* {
    box-sizing: border-box;
}
/* DARK MODE */
body.dark {
    background: radial-gradient(
        circle at 50% 50%,
        var(--primary-background-color-dark),
        var(--secondary-background-color-dark),
        var(--third-background-color-dark)
    );
}
/* DARK MODE NEW PLATFORM */
body.dark.new-platform {
    background: radial-gradient(
        circle at 50% 50%,
        var(--primary-background-color-np-dark),
        var(--secondary-background-color-np-dark),
        var(--third-background-color-np-dark)
    );
}
/* Change the background color in test system */
body.test-system:not(.new-platform) {
    background: var(--primary-background-color-test-system);
    margin-top: 36px;
}

.test-system-warning {
    text-align: center;
    background-color: #c2410c;
    color: white;
    padding: 10px;
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    z-index: 50;
}
/* align logo header area to the center */
.main-logo {
    text-align: center;
}
.headerimg {
    width: 300px;
    max-width: 100%;
}
/*---Start Navigation ---*/
header {
    margin-bottom: 30px;
}
#main-menu-button {
    display: none;
    text-align: center;
    cursor: pointer;
}
#main-menu-button img {
    width: 40px;
    filter: invert(100%);
    -webkit-filter: invert(100%);
}
#main-menu-overlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
    z-index: 30; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}
#main-menu {
    max-width: 780px;
    margin: 15px auto 0 auto;
}
#main-menu nav .menu-logo {
    display: none;
}
/* margin space between items */
#main-menu nav ul {
    list-style: none; /* no dots */
    display: flex;
    justify-content: space-around;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 0;
}
/* links */
#main-menu nav li a {
    display: block; /* display next to each other */
    font-size: 1em; /* of what we gave the body was 120 */
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}
/*---End Navigation --*/

/*---  --*/
.floating-right-item {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 51;
}
#open-system-new-window {
    display: block;
    transition: transform 0.5s;
}
#open-system-new-window,
#open-system-new-window img {
    width: 35px;
    height: 35px;
}
#open-system-new-window:hover {
    transform: scale(1.2);
}

/* full page text styles*/
.fullpagecontent {
    width: 80%;
    padding: 2%;
    margin: auto;
    background-color: white;
}
.thumbpic2017 {
    width: 175px;
    height: 175px;
    border: 0;
    display: block;
    float: left;
}
.thumbpicsm2017 {
    width: 150px;
    height: 150px;
    border: 0;
    display: inline-block;
    float: left;
    padding-left: 20px;
}
/* Styles for Headers */
h1 {
    color: white;
    font-size: 2em;
    float: left;
    text-align: center;
}
h2:not(.swal2-title) {
    color: var(--primary-text-color);
    font-size: 16pt;
    text-align: left;
}
h2:not(.swal2-title).black {
    color: black;
    font-size: 16pt;
    width: 100%;
    text-align: center;
}
h4 {
    color: var(--primary-text-color);
    font-size: 16pt;
    width: 100%;
    text-align: left;
}

.table-full {
    width: 100%;
}
table {
    border-spacing: 0;
}
table.centerauto,
table.centerautoblack {
    margin-left: auto;
    margin-right: auto;
}
table.centerautoblack,
tr {
    color: black;
}

table.center {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    color: black;
}
table.center96 {
    width: 96%;
    margin-left: 2%;
    margin-right: 2%;
    color: black;
}

table,
tr {
    background-color: white;
}

table td {
    padding: 5px;
}

.tablecellwhite {
    background-color: #bdd7ee;
    font-weight: bold;
    text-align: center;
}
.tablecellwhitebold {
    background-color: #83dbbe;
    font-weight: bold;
}
.tablecellwhiteboldright {
    background-color: #83dbbe;
    font-weight: bold;
    text-align: right;
}
.table-striped tr:nth-child(even) {
    background-color: #e4e4e4;
}

.table-striped tr:nth-child(odd) {
    background-color: #ffffff;
}

.taxleft {
    float: left;
    width: 17%;
}

.textcontent {
    padding-left: 30px;
}
.pagecontent {
    width: 100%;
    height: 800px;
    position: relative;
    background-color: white;
}
.pagecontentsys {
    width: 100%;
    height: 800px;
    position: relative;
    background-color: transparent;
}
.pagecontentsysfull {
    width: 133%;
    height: 800px;
    background-color: transparent;
}
.pagecontentsysnoheight {
    width: 100%;
    position: relative;
    background-color: transparent;
}
.pagecontentsysfullnoheight {
    width: 133%;
    background-color: transparent;
}
.menuleft {
    float: left;
    width: 33%;
}
.menuright {
    float: right;
    width: 33%;
}
ul,
li {
    list-style-type: none;
}

/* Styles for Links */
a {
    color: var(--primary-text-color);
    font-size: 18px;
    transition: opacity 0.3s ease;
}
a:not(.button):hover {
    opacity: 0.5;
}

body.dark,
.dark h2,
.dark h4,
.dark a {
    color: var(--primary-text-color-dark);
}

.test-system-warning + .floating-right-item > #open-system-new-window img,
.dark #open-system-new-window img {
    filter: invert(100%);
    -webkit-filter: invert(100%);
}

.style_bold {
    font-weight: bold;
    background-color: #538a78;
    font-size: medium;
}
.style_bold a {
    color: white;
}
.style_boldwhite {
    font-weight: bold;
    font-size: medium;
    color: white;
}
.style_boldright {
    font-weight: bold;
    background-color: #538977;
    font-size: medium;
    text-align: right;
}
.style_boldred {
    font-weight: bold;
    color: red;
}
.style_red {
    color: red !important;
    font-weight: normal;
}
.style_boldredlarge {
    font-weight: bolder;
    color: red !important;
    font-size: x-large;
    text-align: right;
}
.style_boldtan {
    font-weight: bold;
    background-color: black;
    font-size: medium;
    color: #c0b08c;
}
.style_boldblackcenter {
    color: black !important;
    font-weight: bold;
    text-align: center;
}
.style_alignright {
    text-align: right;
}
.style_alignleft {
    text-align: left;
}
.style_aligncenter {
    text-align: center;
}
.lightgreen {
    background-color: #538a78;
}
.verylightgreen {
    background-color: #81b8a1 !important;
}
.yellow {
    background-color: yellow;
}
.paleyellow {
    background-color: #ffffcc;
}

.blacktext {
    color: black !important;
}

.tips {
    margin: auto;
    background-color: white;
    font-size: medium;
    width: 70%;
    padding-left: 50px;
}

/* styles for inventory list status colors */
.instock {
    color: #000000 !important; /* black */
}
.sold {
    color: #008000 !important; /* green */
}
.consignment {
    color: #0000ff !important; /* blue */
}
.reserved {
    color: #800080 !important; /* purple */
}
.intransit {
    color: #800000 !important; /* maroon */
}
.destroyed {
    color: #ff0000 !important; /* red */
}
.damaged {
    /*color:#eed202;  /* yellow */
    color: #ff33d7 !important; /* pink 4-13-12*/
    font-weight: bold;
}
.transfer {
    color: #e47200 !important; /* orange */
}

.standard {
    color: #003c2e;
}
/* styles for msrp */
.lessthan6month {
    color: #228b22 !important; /* forestgreen */
    font-weight: bold;
}
.greaterthan6month {
    /*color:#eed202;  /* yellow */
    color: #ff33d7 !important; /* pink 4-13-12*/
}
.greaterthan1year {
    color: red !important;
    font-weight: bold; /* red */
}
.greaterthan18month {
    color: blue !important; /* blue */
    font-weight: bold;
}
.greaterthan24month {
    color: blue !important; /* blue */
    font-weight: bold;
}
.greaterthan30month {
    color: blue !important; /* blue */
    font-weight: bold;
}

/* period refers to classes */
/* Makes responsive fields. Sets size and field alignment.*/
.login-container {
    width: 100%;
    max-width: 400px;
    padding: 70px 30px;
    margin: 100px auto 50px auto;
    background-color: var(--secondary-background-color-dark);
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.login-container .login-button {
    margin-top: 5px;
    font-size: 16px;
}

input[name="login"] {
    margin-bottom: 5px;
    margin-top: 5px;
    width: 100%;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid black;
    text-align: center;
    font-size: 16px;
}
input[type="password"] {
    margin-bottom: 5px;
    margin-top: 5px;
    width: 100%;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid black;
    text-align: center;
    font-size: 16px;
}
input.invoice {
    width: 20em;
    height: 2em;
    border: 1px solid black;
    background-color: black;
    color: white;
    text-align: center;
    font-size: 100%; /* of what we gave the body was 120 */
    font-weight: 600;
}

input.small[type="submit"] {
    margin-bottom: 5px;
    margin-top: 5px;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid black;
    background-color: black;
    color: white;
    cursor: pointer;
    font-size: 100%; /* of what we gave the body was 120 */
    font-weight: 600;
}

textarea {
    padding: 15px;
    margin-top: 10px;
    border: 1px solid black;
    border-radius: 5px;
    margin-bottom: 20px;
    resize: none;
}

.textarea-no-border {
    padding: 15px;
    margin-top: 0px;
    border: 0;
    margin-bottom: 0px;
}

.input-error {
    border-radius: 5px;
    border: 3px solid red;
}

.alert-error-message {
    padding: 2px;
    color: red;
}

input[type="checkbox"][readonly],
label[readonly] {
    pointer-events: none;
    color: #adadad;
}

input[type="text"]:focus,
textarea:focus {
    border-left-color: #4697e4;
    border-right-color: #4697e4;
    border-top-color: #4697e4;
    border-bottom-color: #4697e4;
}
input[type="submit"],
input[type="reset"],
input[type="button"],
.inputsubmit,
.button,
button:not(.swal2-styled):not(.select2-selection__clear) {
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    border: 0;
    background-color: #555555;
    font-size: 1em;
    color: white;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.5s;
}

button.login-button {
    width: 100% !important;
}
input[type="text"]:read-only {
    background-color: rgb(239, 239, 239);
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.inputsubmit:hover,
.button:hover,
button:not(.swal2-styled):not(.select2-selection__clear):hover {
    background-color: #222222;
}

input[type="submit"]:disabled,
input[type="reset"]:disabled,
.inputsubmit:disabled,
.button:disabled,
button:not(.swal2-styled):not(.select2-selection__clear):disabled {
    background-color: #969696;
}

.button-danger {
    background-color: #e5e53c !important;
    color: black !important;
}
.button-danger:hover {
    background-color: #ffff05 !important;
}
a.black {
    color: black;
    font-size: 14px;
}
a.teal {
    color: teal;
}
a.button {
    text-decoration: none;
}

.updateModeButton {
    background-color: #1a56a5 !important;
    color: white !important;
}
.updateModeButton:hover {
    background-color: #1f4270 !important;
}

/* Utilities */
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.text-left {
    text-align: left;
}

/* for the grid cols - rows with cols should always add up to 100% */
[class*="col-"] {
    float: left;
    padding: 15px;
    border: 1px solid #538874;
}
/* defines each column with their percentage of the row */
/* for desktop */
.col-1 {
    width: 8.33%;
}
.col-2 {
    width: 16.66%;
}
.col-3 {
    width: 25%;
}
.col-4 {
    width: 33.33%;
}
.col-5 {
    width: 41.66%;
}
.col-6 {
    width: 50%;
}
.col-7 {
    width: 58.33%;
}
.col-8 {
    width: 66.66%;
}
.col-9 {
    width: 75%;
}
.col-10 {
    width: 83.33%;
}
.col-11 {
    width: 91.66%;
}
.col-12 {
    width: 100%;
}
/* for the grid cols within application - rows with cols should always add up to 100% */
[class*="cola-"] {
    float: left;
    padding: 5px;
    border: 1px solid #538874;
}
/* defines each column with their percentage of the row */
/* for desktop */
.cola-1 {
    width: 8.33%;
}
.cola-2 {
    width: 16.66%;
}
.cola-3 {
    width: 25%;
}
.cola-4 {
    width: 33.33%;
}
.cola-5 {
    width: 41.66%;
}
.cola-6 {
    width: 50%;
}
.cola-7 {
    width: 58.33%;
}
.cola-8 {
    width: 66.66%;
}
.cola-9 {
    width: 75%;
}
.cola-10 {
    width: 83.33%;
}
.cola-11 {
    width: 91.66%;
}
.cola-12 {
    width: 100%;
}
/* for the grid cols within application no border - rows with cols should always add up to 100% */
[class*="colan-"] {
    float: left;
    padding: 5px;
    border: none;
}
/* defines each column with their percentage of the row */
/* for desktop */
.colan-1 {
    width: 8.33%;
}
.colan-2 {
    width: 16.66%;
}
.colan-3 {
    width: 25%;
}
.colan-4 {
    width: 33.33%;
}
.colan-5 {
    width: 41.66%;
}
.colan-6 {
    width: 50%;
}
.colan-7 {
    width: 58.33%;
}
.colan-8 {
    width: 66.66%;
}
.colan-9 {
    width: 75%;
}
.colan-10 {
    width: 83.33%;
}
.colan-11 {
    width: 91.66%;
}
.colan-12 {
    width: 100%;
}

/* rows should always be wrapped in a div with the class of row */
/* The columns inside a row are all floating to the left, and are therefore taken out of the flow of the page,
and other elements will be placed as if the columns do not exist. To prevent this, we will add a style that
clears the flow: */
.row::after {
    content: "";
    clear: both;
    display: table;
}

.slab-timeline.timeline-icon {
    display: block;
    width: 30px;
    height: 30px;
    padding: 5px !important;
}

.modal {
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
    background-color: #292828;
}
.modal::backdrop {
    background-color: #00000083;
}
.modal .modal-header {
    color: white;
    padding: 0px 0 14px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.modal .modal-header .modal-title {
    font-size: 16px;
    font-weight: bold;
}

.modal .modal-body {
    width: 100%;
    height: calc(100% - 70px);
}

.big-modal {
    overflow: auto;
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.big-modal.show {
    display: block;
}

.modal-content {
    background-color: white;
    margin: 5% auto;
    padding: 30px;
    border-radius: 15px;
    width: 90%;
    max-width: 1400px;
    position: relative;
    animation: slideIn 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

@keyframes slideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.close-modal {
    margin-top: -15px;
    color: #c75656;
    float: right;
    font-size: 45px;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

.close-modal:hover {
    color: #581f0d;
}

.loading-modal {
    text-align: center;
    padding: 40px;
    color: #666;
}

.spinner-modal {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #667eea;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/*----Media Queries !!---*/
/* style applied to screen 780 pixels and below */
@media only screen and (max-width: 780px) {
    /*---Start Navigation ---*/
    header {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    #main-menu {
        margin: 0;
    }
    #main-menu-button {
        display: block;
    }
    #main-menu.open #main-menu-overlay {
        display: block; /* Hidden by default */
    }
    #main-menu nav {
        background: radial-gradient(
            circle at 50% 50%,
            var(--primary-background-color-dark),
            var(--secondary-background-color-dark),
            var(--third-background-color-dark)
        );
        height: 100vh;
        width: 100%;
        max-width: 300px;
        padding: 30px 10px 30px 10px;
        position: fixed;
        top: 0;
        right: 0;
        overflow: auto;
        z-index: 31;
        transform: translate(300px);
        transition: transform 1s ease;
    }
    #main-menu.open nav {
        transform: translate(0);
    }
    #main-menu nav .menu-logo {
        display: block;
        margin-bottom: 20px;
    }
    #main-menu nav .menu-logo img {
        width: 150px;
        max-width: 100%;
    }
    /* margin space between items */
    #main-menu nav ul {
        flex-direction: column;
        justify-content: space-around;
    }
    #main-menu nav li {
        padding: 15px;
    }
    /* links */
    #main-menu nav li a {
        display: block; /* display next to each other */
        font-size: 1em; /* of what we gave the body was 120 */
        font-weight: 600;
        text-align: center;
    }
    /*---End Navigation --*/

    .table-responsive {
        border: 0;
        overflow-y: auto;
    }

    /* tablet or ipad */
    section {
        width: 100%;
    }
    .left-40 {
        width: 100%;
    }
    .right-58 {
        width: 100%;
    }
    .one-third {
        width: 100%;
    }
    h2:not(.swal2-title) {
        font-size: 100%;
    }
    p {
        font-size: 95%;
    }
    [class*="col-"] {
        width: 100%;
    }
    [class*="cola-"] {
        width: 100%;
    }
    [class*="colan-"] {
        width: 100%;
    }
    .productsbar {
        width: 100%;
    }
    input[type="submit"] {
        padding: 5px;
    }
}
/* for mobile devices */
@media only screen and (max-width: 580px) {
    h2:not(.swal2-title) {
        font-size: 95%;
    }
    p {
        font-size: 88%;
    }
    [class*="col-"] {
        width: 95%;
    }
    [class*="cola-"] {
        width: 95%;
    }
    [class*="colan-"] {
        width: 95%;
    }
    input[type="submit"] {
        padding: 5px;
    }
}
/*---End Media Queries ----*/
/* Simple loader class */
.loader {
    display: block;
    border: 5px solid #707070;
    border-top: 5px solid #adadad;
    border-bottom: 5px solid #adadad;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    animation: spin 1s linear infinite;
    vertical-align: middle;
    margin-left: 2px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.hide {
    display: none;
}

/*-- Styles of the feedback message from MessageService --*/
.msg-container {
    background-color: transparent;
    padding: 15px;
}
.msg {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    padding: 10px;
    border: solid 1px #000;
    text-align: center;
}
.msg.error {
    color: #ffffff;
    background-color: #da3f2a;
    border-color: #f5c2c796;
}
.msg.success {
    color: #fff;
    background-color: #16754a;
    border-color: #badbcc94;
}

/*-- Styles of the page loader --*/
.page-loader-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #00000010;
}
.page-loader {
    height: 5px;
    width: 100vw;
    --c: no-repeat linear-gradient(#005231 0 0);
    background: var(--c), var(--c), #85c98f;
    background-size: 60% 100%;
    animation: page-loader-animation 5s infinite;
}
@keyframes page-loader-animation {
    0% {
        background-position: -150% 0, -150% 0;
    }
    66% {
        background-position: 250% 0, -150% 0;
    }
    100% {
        background-position: 250% 0, 250% 0;
    }
}

.font-14 {
    font-size: 14px;
}

.link-color {
    color: #216ad8 !important;
}
.link-th {
    color: #ffffff !important;
    font-size: 16px;
}
.link-th:hover {
    color: #7bd8fa !important;
    opacity: 1 !important;
}
.link-th-sorted {
    color: #7bd8fa !important;
}

.hidden {
    display: none !important;
}

.showFilters {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 10px;
    margin: 10px;
    background: white;
}

.container-medium {
    display: block;
    width: 900px;
    justify-self: center;
    justify-content: center;
    background: white;
}

/* Status about expiration */
.expired {
    background-color: #ff8181 !important;
}

.warning {
    background-color: #ffcd71 !important;
}

/* Tooltip */
.tooltip-trigger {
    position: relative;
}

.tooltip {
    font-family: Roboto, sans-serif;
    font-weight: normal;
    position: absolute;
    bottom: 145%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 1000;
}

.tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
}

.tooltip-trigger:hover .tooltip {
    opacity: 1;
    visibility: visible;
}

.fa-circle-info {
    color: #4278c8;
}

.font-bold {
    font-weight: bold;
}