* {
    padding: 0;
    margin: 0;
}

body {
    background-color: var(--bg-primary);
    color: var(--color-primary);
    font-family: 'Inter', sans-serif;
}

/* ### ### ### ### ### */

.max-vw {
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

/* ### ### ### ### ### */

.message-box {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--bg-elem);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    margin-top: 15px;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
}

.message-box.red {
    background-color: var(--red);
}

.message-box.green {
    background-color: var(--green);
}

.message-box.blue {
    background-color: var(--blue);
}

.message-box .con {
    padding: 6px 35px;
    text-align: center;
    position: relative;
}

.message-box .message {
    color: var(--color-primary);
    font-size: 12px;
}

.message-box .close {
    position: absolute;
    top: 0;
    right: 5px;
}

.message-box .close:hover {
    cursor: pointer;
}

.message-box .close i {
    color: rgba(255, 255, 255, .5);
    font-size: 12px;
}

.message-box .bar {
    width: calc(100% - 4px);
    height: 1px;
    background-color: rgba(255, 255, 255, .75);
    position: absolute;
    left: 2px;
    bottom: 0;
    animation: msg_box_delay 3.5s;
}

/* ### ### ### ### ### */

.top-header {
    margin: 0 var(--main-side-margin);
    margin-top: 20px;
}

.top-header .page-title h4 {
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: var(--color-primary);
}

/* ### ### */

.top-welcome {
    margin: 25px var(--main-side-margin);
}

.top-welcome h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-primary);
}

/* ### ### */

.top-nav-bar {
    margin: 0 var(--main-side-margin);
}

.top-nav-bar .nav {
    list-style-type: none;
}

/* .top-nav-bar .nav li {
    display: inline-flex;
    border-radius: var(--main-nav-item-border);
    padding: 5px 8px;
    margin-right: 15px;
} */

.top-nav-bar .nav li {
    display: inline-flex;
    border-radius: var(--main-nav-item-border);
    padding: 5px 8px;
    margin-right: 15px;
    border: 1px solid var(--blue);
}

.top-nav-bar .nav li.active {
    background-color: var(--blue);
}

.top-nav-bar .nav li.active a {
    color: var(--color-primary);
}

.top-nav-bar .nav li a {
    text-decoration: none;
    /* color: var(--color-secondary); */
    font-size: 12px;
    font-weight: 700;
    color: var(--blue);
}

/* ### ### ### ### ### */

.track-area {
    margin: 0 var(--main-side-margin);
    margin-top: 50px;
    text-align: center;
    background-color: var(--bg-elem);
    border-radius: 15px;
    padding: 25px 0;
}

.track-area .choose-customer select {
    color: var(--color-primary);
    background-color: var(--bg-elem);
    padding: 4px 6px;
    display: inline-flex;
    outline: none;
    border: 1px solid var(--bg-secondary);
    border-radius: 7px;
    font-size: 16px;
}

.track-area .choose-customer select option {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary);
}

.track-area .choose-customer p {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 10px;
}

.track-area .timer {
    margin-top: 50px;
    margin-bottom: 30px;
}

.track-area .timer h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-primary);
}

.track-area .button-row {
    display: inline-flex;
}

.track-area button {
    width: 80px;
    height: 60px;
    border-radius: 15px;
    border: 3px solid rgba(0, 0, 0, .25);
    font-size: 16px;
    font-weight: 700;
    /* text-transform: uppercase; */
    color: var(--color-primary);
    -webkit-appearance: none;
    margin: 0 5px;
}

.track-area button:hover {
    cursor: pointer;
}

.track-area button.red {
    background-color: var(--red);
    /* border-color: rgb(255, 150, 142, .25); */
}

.track-area button.green {
    background-color: var(--green);
    /* border-color: rgb(140, 204, 118, .25); */
}

.track-area button.gray {
    background-color: var(--bg-secondary);
    /* border-color: rgb(67, 66, 66, .25); */
}

/* ### ### ### ### ### */

.customers-area {
    margin: 0 var(--main-side-margin);
    margin-top: 50px;
    position: relative;
}

.customers-area .edit-row {
    margin-bottom: 10px;
}

.customers-area .edit-row.l {
    float: left;
}

.customers-area .edit-row.r {
    float: right;
}

.customers-area .edit-row .nav-link {
    text-decoration: none;
    color: var(--blue);
    font-size: 12px;
    font-weight: 700;
    border-radius: var(--main-nav-item-border);
    border: 1px solid var(--blue);
    padding: 5px 8px;
}

.customers-area .edit-row .nav-link.active {
    background-color: var(--blue);
    color: var(--color-primary);
}

.customers-area .edit-row.l .nav-link {
    margin-left: 0;
}

.customers-area .edit-row a {
    font-size: 20px;
    color: var(--color-primary);
    margin-left: 5px;
}

.customers-area .edit-row a.red {
    color: var(--red);
}

.customers-area .edit-row a.green {
    color: var(--green);
}

/* ### */

.customers-area .popup {
    width: 100%;
    background-color: var(--bg-secondary);
    border-radius: 15px;
    border: 1px solid #000000;
    position: absolute;
    top: 40px;
    display: none;
}

.customers-area .popup-title {
    text-align: center;
    margin: 20px 0;
}

.customers-area .popup-title h4 {
    font-size: 14px;
    color: var(--color-primary);
}

.customers-area .popup form {
    margin: 0 20px;
}

.customers-area .popup p {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 20px;
}

.customers-area .popup input[type="text"] {
    width: calc(100% - 20px);
    border-radius: 7px;
    background-color: var(--bg-primary);
    color: var(--color-primary);
    padding: 8px 10px;
    outline: 0;
    border: 0;
    -webkit-appearance: none;
    margin-bottom: 10px;
}

.customers-area .popup input[type="checkbox"] {
    vertical-align: middle;
}

.customers-area .popup .row {
    width: 100%;
    display: inline-flex;
    margin-bottom: 20px;
}

.customers-area .popup .row a {
    width: calc(50% - 5px);
    text-decoration: none;
    color: var(--color-primary);
    font-weight: 700;
    font-size: 12px;
    text-align: center;
    margin-right: 10px;
    background-color: var(--bg-primary);
    outline: 0;
    border: 0;
    border-radius: 7px;
    padding: 8px 12px;
}

.customers-area .popup .row button {
    width: calc(50% - 5px);
    color: var(--color-primary);
    font-weight: 700;
    font-size: 12px;
    background-color: var(--green);
    outline: 0;
    border: 0;
    border-radius: 7px;
    padding: 8px 12px;

}

.customers-area .popup .row button.red {
    background-color: var(--red) !important;
}

/* ### */

.customers-area .list {
    width: 100%;
}

.customers-area .list .entry-row.heading {
    background-color: transparent !important;
}

.customers-area .list .entry-row.heading .col p {
    color: var(--color-secondary);
    font-weight: 700;
}

.customers-area .list .entry-row {
    width: calc(100% - 30px);
    display: inline-flex;
    border-radius: 15px;
    /* background-color: var(--bg-secondary); */
    background-color: var(--blue);
    padding: 10px 15px;
    margin-bottom: 5px;
    text-align: left;
}

.customers-area .list .entry-row:nth-child(odd) {
    background-color: transparent;
    /* background-color: var(--bg-secondary); */
}

.customers-area .list .entry-row.no-look {
    /* background-color: var(--bg-secondary) !important; */
    background-color: transparent !important;
    border-bottom: 1px solid var(--bg-secondary);
    border-radius: 0;
    /* margin-top: 5px; */
}

.customers-area .list .entry-row .col {
    width: 33.33%;
}

.customers-area .list .entry-row .col p {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary);
}

.customers-area .list .entry-row .col.c-1 p {
    color: var(--red) !important;
    background-color: rgb(255, 150, 142, .25);
    width: fit-content;
    border-radius: 4px;
    padding: 2px 4px;
}

.customers-area .list .entry-row .col.c-2 p {
    color: var(--green) !important;
    background-color: rgb(140, 204, 118, .25);
    width: fit-content;
    border-radius: 4px;
    padding: 2px 4px;
}

.customers-area .list .entry-row .col.c-3 p {
    color: var(--blue) !important;
    background-color: rgb(36, 107, 253, .25);
    width: fit-content;
    border-radius: 4px;
    padding: 2px 4px;
}

.customers-area .list .entry-row .col.c-4 p {
    color: var(--purple) !important;
    background-color: rgb(160, 106, 250, .25);
    width: fit-content;
    border-radius: 4px;
    padding: 2px 4px;
}

.customers-area .list .entry-row .col.c-5 p {
    color: var(--turkies) !important;
    background-color: rgb(44, 199, 210, .25);
    width: fit-content;
    border-radius: 4px;
    padding: 2px 4px;
}

/* ### ### ### ### ### */

.elem-area {
    margin: 0 var(--main-side-margin);
    margin-top: 50px;
    position: relative;
}

.elem-row {
    width: 100%;
    position: relative;
    margin-bottom: 10px;
}

.elem-entry {
    width: 100%;
    height: 60px;
    background-color: var(--bg-elem);
    display: inline-flex;
    position: relative;
    border-radius: 15px;
    text-align: center;
}

.elem-entry .elem-icon {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 10px;
}

.elem-entry.red .elem-icon {
    background-color: var(--red);
}

.elem-entry.green .elem-icon {
    background-color: var(--green);
}

.elem-entry.blue .elem-icon {
    background-color: var(--blue);
}

.elem-entry.purple .elem-icon {
    background-color: var(--purple);
}

.elem-entry .elem-icon a {
    text-decoration: none;
    line-height: 50px;
}

.elem-entry .elem-icon a img {
    width: 30px;
    height: 30px;
    user-select: none;
    -webkit-user-drag: none;
    -moz-user-select: none;
    -ms-user-select: none;
    vertical-align: middle;
}

.elem-entry .elem-text {
    margin-top: 25px;
}

.elem-entry .elem-text p {
    font-size: 12px;
    font-weight: 700;
}

.elem-entry .elem-value {
    margin-top: 25px;
    position: absolute;
    right: 0;
    margin-right: 20px;
}

.elem-entry.red .elem-value p {
    color: var(--red);
}

.elem-entry.green .elem-value p {
    color: var(--green);
}

.elem-entry.blue .elem-value p {
    color: var(--blue);
}

.elem-entry.purple .elem-value p {
    color: var(--purple);
}

.elem-entry .elem-value p {
    font-size: 12px;
    font-weight: 700;
}

/* ### ### ### ### ### */

/* ### ### ### ### ### */

/* ### ### ### ### ### */

/* ### ### ### ### ### */

/* ### ### ### ### ### */

/* ### ### ### ### ### */

/* ### ### ### ### ### */

/* ### ### ### ### ### */

/* ### ### ### ### ### */

/* ### ### ### ### ### */