body {
    background-color: white;
    --swalbg: #f9f9f9;
    --swaltxt: midnightblue;
}

body a {
    font-weight: bold;
    color: midnightblue;
    text-decoration: none;
}

body a:hover {
    font-weight: bold;
    color: brown;
    text-decoration: none;
}

a.notice {
    font-size: smaller;
}

span.mspan, .themeLabel label{
    color: mediumseagreen;
    font-weight: bold;
    font-size: larger;
}

span.aspan {
    color: midnightblue;
    font-size: larger;
}

span.bspan {
    color: navy;
    font-size: smaller;
}

span.lspan {
    color: blue;
    font-weight: bold;
    font-size: x-large;
    text-decoration: none;
}

div.sectional {
    background-color: whitesmoke;
    padding: 15px;
    border-radius: 5px;
    border: solid;
    border-width: 1px;
    border-color: darkgreen;
}

div.container2 {
    position: initial;
    text-align: center;
    vertical-align: middle;
    width: 100%;
    box-shadow: none;
    border-radius: initial;
}

ul.nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #2F4F4F;
    width: 100%;
}

li.nav {    
    float: left;
}

li a, .dropbtnnav {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdownnav:hover .dropbtnnav  {
    background-color: brown;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li.nav a:hover {
    background-color: brown;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .evenstlide:hover {
    background-color: transparent;
    text-decoration: none;
}


h3.eventslide {
    color: green;
    text-shadow: 1px 1px 2px pink;
    text-align: center;
    width: 100%;
    font-weight: bold;
    font-family: Georgia, serif;
}

span.eventslide {
    color: green;
    text-shadow: 1px 1px 2px pink;
    font-weight: bold;
    font-family: Georgia, serif;
    font-size: smaller;
}

span.noticeredslide {
    color: red;
    text-shadow: 1px 1px 2px pink;
    font-weight: bold;
    font-family: Georgia, serif;
    font-size: x-large;
}

span.noticegreenslide {
    color: green;
    text-shadow: 1px 1px 2px pink;
    font-weight: bold;
    font-family: Georgia, serif;
    font-size: x-large;
}

img.eventslide {
    opacity: 0.1;
}

li.dropdownnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #2F4F4F;
}

.dropdownnav-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 2;
}

.dropdownnav-content a {
    color: black;
    background-color: #f9f9f9;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdownnav-content a:hover {
    background-color: #f1f1f1;
    color: brown;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdownnav:hover .dropdownnav-content {
    display: block;
}

.headermain {
    color: #2F4F4F;
}
.btn-go,.btn-danger {
    color: white;
    background-color: #2F4F4F;
}

.btn-stop {
    font-weight: bold;
    color: white;
    background-color: red;
}

.txl-label {
    color: #2F4F4F;
}

.swal2-confirm {
    background-color: #2F4F4F !important;
}

#display-user-name {
    color: midnightblue;
}

.profbox {
    background-color: #f8f9fa;
}

.biobox {
    background-color: #f8f9fa;
    font: black;
}

#notices.sectional {
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-flow: wrap;
    min-height: 230px;
    align-content: center;
}

#notices > div.noticebox {
    flex: 1 0 40%;
}

#content-mid-carousel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

#content-mid-carousel > hr {
    background-color: white;
}

/* CSS STYLING FOR LIST PAGES */

#docTable {
    color: darkgreen;
    border-collapse: collapse;
    overflow: auto;
    width: 100%;
    margin: auto;
    text-align: center;
}

#empTable {
    color: darkgreen;
    border-collapse: collapse;
    overflow: auto;
    width: 100%;
    margin: auto;
    text-align: center;
}


h1.list {
    font-size: 22px;
    color: darkgreen;
    text-align: center;
    padding: 15px;
}

#cont {
    text-align: center;
}

th.list {
    height: 45px;
    border-radius: 6px;
    border: 1px solid white;
    background-color: rgb(228 231 235 / 50%);
}

tr.kb-row-child {
    background-color: #e6e6e6;
    font-size: 10px;
}

td.kb-cell {
    height: 40px;
    vertical-align: central;
    border-radius: 5px;
    text-align: center;
    font-size: 14px;
    border: 1px solid white;
}

td.kb-cell-child {
    height: 40px;
    vertical-align: central;
    border-radius: 5px;
    text-align: center;
    font-size: 10px;
    font-style: italic;
    border: 1px solid white;
}

td.hardware-cell,
td.badgecheckout-cell {
    height: 40px;
    vertical-align: central;
    border-radius: 5px;
    text-align: center;
    font-size: 14px;
    border: 1px solid white;
}

tbody.list tr:nth-child(even) {
    background-color: hsl(123, 42%, 47%, 0.22);
}

.search-container {
    display: flex;
    /* Optional: Add space between items */
    gap: 20px;
}

.search-icon {
    flex: 0 0 25%;
    vertical-align: middle;
    align-content: center;
}

.search-item {
    flex: 0 0 75%;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

.emodal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    width: 75%;
}

.emodal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    width: 75%;
}


#add-entry-btn,
#export-page,
#print-page,
#new-checkout {
    background: #fff;
    color: darkgreen;
    outline: none !important;
    box-shadow: none !important;
}

    #add-entry-btn:hover,
    #export-page:hover,
    #print-page:hover,
    #new-checkout:hover {
        background-color: darkgreen;
        color: white;
    }

.close {
    color: #aaa;
    float: right;
    font-size: 24px;
    font-weight: bold;
    border: none;
}

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

.emodal-title,
.modal-title {
    vertical-align: middle;
    margin: auto;
}


.kbmodal {
    position: fixed; /* Position relative to the viewport */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black overlay */
    z-index: 9999; /* Ensure it's on top of other content */
    display: flex; /* Use flexbox for centering content */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    visibility: hidden; /* Hidden by default */
    opacity: 0; /* Hidden by default */
    transition: visibility 0s, opacity 0.3s ease-in-out; /* Smooth transition */
}

.kbmodal-content {
    background-color: white; /* White background for the modal content */
    padding: 20px;
    max-width: 90%; /* Limit content width for better readability */
    max-height: 90%; /* Limit content height */
    overflow: auto; /* Allow scrolling if content exceeds height */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Optional shadow */
}

.kbmodal.active {
    visibility: visible;
    opacity: 1;
}

.kbmodal-title {
    vertical-align: middle;
    margin: auto;
}

.btn-hw {
    color: #fff;
}

.edit-btn-hw {
    background-color: #f7b500;
    margin-right: 5px;
}

.remove-btn-hw,
.remove-btn-badge {
    background-color: #eb0000;
}

.view-btn-hw {
    background-color: #DAA520;
}

.pen-btn-hw {
    background-color: #66B200;
}

.edit-btn {
    color: #fff;
    background-color: #f7b500;
    margin-right: 5px;
}

.remove-btn {
    color: #fff;
    background-color: #eb0000;
}

#remove-data {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
    margin-bottom: 30px;
    padding: 3rem;
}

#edit-form,
#remove-data,
#badge-checkout-form,
#edit-checkout-form {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
    margin-bottom: 30px;
    padding: 3rem;
}

#edit-data:focus {
    outline: none !important;
}

.invalid-input {
    border: 3px red solid;
    border-radius: 5px;
    z-index: 9999;
}

#header-row th {
    text-align: center;
}

.sort:hover {
    cursor: pointer;
}

/*table sort styles*/
.txl-text {
    color: black;
}

.txl-background {
    background-color: black;
}

.arrow-down {
  border: solid black;
}

tr:hover td,
.sort:hover {
    background-color: lightgray;
}

.table-sortable .th-sort-asc::after {
    content: "\25b4";
}

.table-sortable .th-sort-desc::after {
    content: "\25be";
}

.table-sortable .th-sort-asc::after,
.table-sortable .th-sort-desc::after {
    margin-left: 5px;
}

.page-title h1 {
    font-size: 1.8rem;
    color: darkgreen;
    padding: .3em 0;
    font-weight: bold;
    margin-left: 4.5em;
}

#action-items {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 1em 1em 1em;
    flex-wrap: wrap;
}

.action-links {
    position: relative;
}

.btn-area {
    background-color: transparent;
    color: darkgreen;
    border: none;
    padding: .25rem .5rem;
    font-size: 28px;
}

.menu {
    display: none;
    position: absolute;
    z-index: 1;
    background-color: #fff;
    left: 0;
    top: 45px;
    min-width: 250px;
}

    .menu a {
        display: block;
        transition: .5s;
        text-decoration: none;
    }

        .menu a:hover {
            background-color: lightgray;
        }

.action-links:hover .menu {
    display: block;
}

#search-form {
    display: flex;
}

.ms-n5 {
    margin-left: -40px;
    color: darkgrey;
}

.archived {
    display: none;
}

.k-window-titlebar {
    color: white !important;
    background-color: #2F4F4F !important;
    font-weight: bold !important;
    border-color: #2F4F4F !important;
}

.swal2-title {
    color: #2F4F4F !important;
}


.Ebtn,
.Rbtn {
    border: 2px solid lightgray;
    border-radius: 3px;
    transition-duration: 0.8s;
}

    .Ebtn:hover,
    .Rbtn:hover {
        background-color: darkgreen;
        color: white;
    }
/* /CSS STYLING FOR LIST PAGES */


/* BIA */

/* container */
feature-compare {
    display: flex;
    margin-top: 2.5em;
}

/* columns */
    feature-compare > * {
        position: relative;
        padding: 0;
        text-align: center;
        width: 66%;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 25%);
    }

feature-compare > :nth-child(2) {
    width: 50%;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 25%);
}

free-level {
    background: #ffffff;
}

standard-level {
    background: #ffffff;
}

pro-level {
    background: #ffffff;
}

/* features */
feature-compare ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fff;
}

feature-compare li {
    width: 100%;
    text-align: left; /* Explicitly set for clarity */
    white-space: nowrap;
    line-height: 2.2em;
    border-top: 1px solid #eee;
}

    feature-compare li:first-child {
        border-top: 0;
    }

    feature-compare li.tick:before {
        content: '✓ ';
        color: #006e37;
        font-weight: bold;
        font-size: 1.3em;
        padding-left: 5px;
        margin-left: 5px;
    }

    feature-compare li.cross:before {
        content: '✗ ';
        color: #ec1358;
        font-weight: bold;
        font-size: 1.3em;
        padding-left: 5px;
        margin-left: 5px;
    }

    feature-compare li.problem:before {
        content: '‼ ';
        color: #ecec55;
        font-weight: bold;
        font-size: 1.3em;
        padding-left: 5px;
        margin-left: 5px;
    }

feature-compare h3 {
    margin: 0;
    padding: .4em 0 0;
}

feature-compare .price {
    margin: 0 0 .2em;
    font-size: 2em;
    font-weight: bold;
}

feature-compare span {
    display: none;
}

/* buttons */
feature-compare .button {
    display: inline-block;
    margin: .5em 0;
    padding: .4em .5em;
    background: #fff;
    color: #000;
    text-decoration: none;
    font-weight: bold;
    border-radius: .4em;
}

feature-compare > :nth-child(2) .button {
    background: #000;
    color: #fff;
}

/* tablet breakpoint */
@@media (min-width:900px) {
    feature-compare {
        margin: 2.5em calc(8px + 1.5625vw);
    }

        feature-compare > * {
            width: calc(100% / 3);
        }

        feature-compare span {
            display: inline;
        }
}

/* BIA PAGES */

/* DropZone Pages */

.dropZoneElement {
    position: relative;
    display: inline-block;
    background-color: #f8f8f8;
    border: 1px solid #c7c7c7;
    width: 350px;
    height: 200px;
    text-align: center;
}

.textWrapper {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    font-size: 18px;
    line-height: 1.2em;
    font-family: Arial,Helvetica,sans-serif;
    color: #000;
}

.dropImageHereText {
    color: #c7c7c7;
    text-transform: uppercase;
    font-size: 12px;
}

.wrapper:after {
    content: ".";
    display: inline-block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.or {
    margin: auto;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 45%;
    transform: translate(-50%,-45%);
}

.fade-in {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 2s;
}

.greytext {
    font-size: 1.2em;
    color: #888888;
}

.blacktext {
    font-size: 1.2em;
    color: #333333;
}


@@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }

    100% {
    }
}

input[type="text"] {
    font-size: 1.8em; /* Makes the font size larger, relative to the parent font size */
    border: 1px solid #DDDDDD; /* Sets a 1px solid border with a light grey color */
    padding: 8px; /* Adds some internal spacing */
}

.container2 {
    margin: 0 auto;
}

.nav-option {
    float: left;
}

#all-nav-options {
    width: 60%;
}

* {
    box-sizing: border-box;
}

body {
    font: 16px Arial;
}

.autocomplete {
    /*the container must be positioned relative:*/
    position: relative;
    display: inline-block;
}

input {
}

    input[type=text] {
        width: 100%;
    }

    input[type=submit] {
    }

.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
}

    .autocomplete-items div {
        padding: 10px;
        cursor: pointer;
        background-color: #fff;
        border-bottom: 1px solid #d4d4d4;
    }

        .autocomplete-items div:hover {
            /*when hovering an item:*/
            background-color: #e9e9e9;
        }

.autocomplete-active {
    /*when navigating through the items using the arrow keys:*/
    background-color: DodgerBlue !important;
    color: #ffffff;
}