/* Define our main colors */
:root {
    --main-color: #369992; /* Open Skies Turquoise */
    --main-color-hover: #358781; /* Open Skies Turquoise */
    --accent-color: #EBD4A3; /* Warm Sand */
    --secondary-color: #CC6C20; /* Sunrise Copper */
    --secondary-color-hover: #B7621E; /* Sunrise Copper Hover */
    --purple-color: #8A3A6D; /* Purple */
    --purple-color-hover: #6c3458; /* Purple */
    --gray-color: #4e4e4e; /* Gray */
}

.body-content {
    border: 3px solid var(--main-color);
}

input,
select,
textarea {
    max-width: 450px;
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .body-content {
        padding: 0;
    }
}

@media screen and (max-width: 768px) {
    .container {
        --bs-gutter-x: 0 !important;
    }
}

.btn-primary {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    max-width: 200px;
}

.btn-primary:hover {
    background-color: var(--secondary-color-hover) !important;
    border-color: var(--secondary-color-hover) !important;
}

#printSelectedBarcode {
    background-color: var(--purple-color) !important;
    border-color: var(--purple-color) !important;
    max-width: 200px;
}

#printSelectedBarcode:hover {
    background-color: var(--purple-color-hover) !important;
    border-color: var(--purple-color-hover) !important;
}

#app-body {
    padding: 1.25rem 2rem;
}

.logoutBtn {
    border: none;
    padding: 0.1rem 0.6rem;
    border: #d7d7d7 2px solid;
    border-radius: 4px;
    background-color: #fbfbfb;
}

.logoutBtn:hover {
    text-decoration: underline;
}

.form-horizontal ul {
    list-style-type: none !important;
    padding: 0;
    font-weight: 700;
}

#barcodeError {
    font-size: medium;
    text-align: center;
    font-weight: 700;
}

.account-icon {
    width: 30px;
}