/*
 * Copyright (c) 2024 Metalprogetti. All rights reserved.
 * Unauthorized use, distribution, or reproduction is prohibited.
 */

:root {
    --mp-white: #FFFFFF;
    --mp-black: #202020;

    --mp-light-gray: #F2F3F4;
    --mp-medium-gray: #e0e0e0;
    --mp-gray: #c9cdd1;
    --mp-dark-gray: #a0a7ae;

    --mp-light-green: #8d9e72;
    --mp-green: #5c9646;
    --mp-dark-green: #437c5b;

    --mp-light-yellow: #9ea291;
    --mp-dark-yellow: #474531;

    --mp-olive-gold: #BFA637;

    --mp-light-blue: #506674;
    --mp-blue: #465865;
    --mp-dark-blue: #313e47;

    --mp-light-orange: #ec5830;
    --mp-orange: #d65419;
    --mp-dark-orange: #c04b16;

    --mp-very-light-plum: #835a5f;
    --mp-light-plum: #563b3e;
    --mp-plum: #473133;
    --mp-dark-plum: #382728;

    --mp-red: #a30000;
    --mp-dark-red: #473133;
    --mp-alert-red: #CE2029;

    --mp-icon-filter-white: invert(97%) sepia(77%) saturate(0%) hue-rotate(356deg) brightness(103%) contrast(101%);
    --mp-icon-filter-light-gray: invert(88%) sepia(2%) saturate(99%) hue-rotate(165deg) brightness(109%) contrast(97%);
    --mp-icon-filter-dark-blue: invert(20%) sepia(9%) saturate(1252%) hue-rotate(162deg) brightness(101%) contrast(89%);

    --mp-icon-logo: url("assets/images/icons/logo.svg");
    --mp-icon-spinner: url("assets/images/icons/spinner.svg");

    --mp-icon-locker-open: url("assets/images/icons/door-open.svg");
    --mp-icon-locker-closed: url("assets/images/icons/door-closed.svg");
    --mp-icon-locker-locked: url("assets/images/icons/lock-closed.svg");
    --mp-icon-locker-unlocked: url("assets/images/icons/lock-open.svg");
    --mp-icon-barcode-scanner: url("assets/images/icons/barcode_scanner.svg");

    --mp-font-size-h1: 1.51rem;
    --mp-font-size-h2: 1.31rem;
    --mp-font-size-h3: 1.17rem;
    --mp-font-size-h4: 1.05rem;
    --mp-font-size-h5: .94rem;
    --mp-font-size-h6: .83rem;
    --mp-font-size-p: .95rem;

    --mp-box-shadow: 0 5px 15px rgb(0 0 0 / 25%);

    --top-global-header: 0px;
    /* top-content-header is page header */
    --top-content-header: 0px;
    --top-content: 0px;
    --top-header-sticky-1: 0px;
    --top-header-sticky-2: 0px;
    --top-header-sticky-3: 0px;
    --top-header-sticky-4: 0px;
    --bottom-content: 0px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* mobile safari's 100% hieght Dilemma https://gist.github.com/claus/622a938d21d80f367251dc2eaaa1b2a9 */
html {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--mp-light-gray);
    color: var(--mp-black);
}

body {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
}

a,
h1,
h2,
h3,
h4,
h5,
h6,
input,
label,
legend,
li,
p,
th,
td,
select,
span {
    color: var(--mp-black);
    font-family: Graphik, Helvetica, sans-serif;
    font-size: var(--mp-font-size-p);
    font-weight: 400;
    line-height: normal;
    letter-spacing: .01rem;
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
legend {
    font-weight: 600;
    color: var(--mp-dark-blue);
    text-transform: uppercase;
}

/* override font sizes for mobile */
h1 {
    font-size: var(--mp-font-size-h1);
}

h2,
legend {
    font-size: var(--mp-font-size-h2);
}

h3 {
    font-size: var(--mp-font-size-h3);
}

h4,
label,
select {
    font-size: var(--mp-font-size-h4);
}

h5 {
    font-size: var(--mp-font-size-h5);
}

h6 {
    font-size: var(--mp-font-size-h6);
}

ul,
hr,
fieldset,
figure,
pre {
    margin: 0;
}

ul {
    padding-inline-start: 20px;
}

dialog::backdrop {
    background-color: rgb(0, 0, 0, .5);
}

img {
    cursor: auto;
}

svg {
    pointer-events: none;
}

pre {
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}

input {
    width: 100%;
    font-size: var(--mp-font-size-p);
    font-weight: 300;
    padding: 5px 5px 3px 5px;
    background-color: var(--mp-white);
    color: var(--mp-black);
    border: 1px solid transparent;
    border-radius: 4px;
}

input:focus {
    border-color: var(--mp-dark-blue);
}

input::placeholder,
textarea::placeholder {
    color: var(--mp-black);
    opacity: 1;
}

.input {
    display: flex;
    flex-direction: column;
    padding: 0 0 5px 0;
}

.input label {
    font-weight: 500;
    color: var(--mp-dark-blue);
}

.input.required label::after,
.input.required-no-validation label:after {
    display: inline-block;
    position: relative;
    vertical-align: super;
    left: 3px;
    width: 5px;
    height: 5px;
    background-color: var(--mp-red);
    border-radius: 50%;
    content: '';
}

.input-hidden-wrapper {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

input[type="text"] {
    background-color: var(--mp-medium-gray);
}

input[type="date"] {
    width: 100%;
    color: var(--mp-dark-blue);
    background-color: var(--mp-light-gray);
    border: none;
    border-radius: 4px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    filter: var(--mp-icon-filter-dark-blue);
    padding: 0 0 5px 0;
}

select {
    appearance: none;
    background-color: transparent;
    border: none;
    outline: none;
    width: 100%;
    color: var(--mp-dark-blue);
    font-weight: 500;
    line-height: 1.2;
}

.drop-down {
    position: relative;
    background: var(--mp-light-gray);
    border-radius: 4px;
    padding: 4px 7px 4px 5px;
    cursor: pointer;
}

.drop-down select {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--mp-dark-blue);
    font-weight: 500;
    line-height: 1.2;
    display: block;
    width: 100%;
    padding-right: 28px;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.drop-down::after {
    content: "";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 10px;
    background-color: var(--mp-dark-blue);
    clip-path: polygon(100% 0%, 0 0%, 50% 100%);
    pointer-events: none;
    z-index: 2;
}

.checkbox {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.checkbox label {
    padding: 0 0 0 5px;
}

.checkbox input {
    width: fit-content;
}

:focus-visible {
    outline: none;
}

*:disabled {
    opacity: .5 !important;
}

audio {
    width: 100%;
    height: 30px;
}

/* overrides */

.color-white {
    color: var(--mp-white) !important;
}

.color-orange,
.balance-due p {
    color: var(--mp-orange) !important;
}

.color-green {
    color: var(--mp-green) !important;
}

.color-red {
    color: var(--mp-red) !important;
}

.color-alert-red {
    color: var(--mp-alert-red) !important;
}

.color-light-blue {
    color: var(--mp-light-blue) !important;
}

.color-light-gray {
    color: var(--mp-light-gray) !important;
}

.color-light-yellow {
    color: var(--mp-light-yellow) !important;
}

.color-dark-yellow {
    color: var(--mp-dark-yellow) !important;
}

.color-dark-orange {
    color: var(--mp-dark-orange) !important;
}

.color-dark-red {
    color: var(--mp-dark-red) !important;
}

.color-dark-blue {
    color: var(--mp-dark-blue) !important;
}

.background-color-white {
    background-color: var(--mp-white) !important;
}

.background-color-green {
    background-color: var(--mp-green) !important;
}

.background-color-orange {
    background-color: var(--mp-orange) !important;
}

.background-color-red {
    background-color: var(--mp-red) !important;
}

.background-color-alert-red {
    background-color: var(--mp-alert-red) !important;
}

.background-color-light-blue {
    background-color: var(--mp-light-blue) !important;
}

.background-color-light-gray {
    background-color: var(--mp-light-gray) !important;
}

.background-color-light-yellow {
    background-color: var(--mp-light-yellow) !important;
}

.background-color-dark-yellow {
    background-color: var(--mp-dark-yellow) !important;
}

.background-color-dark-orange {
    background-color: var(--mp-dark-orange) !important;
}

.background-color-dark-red {
    background-color: var(--mp-dark-red) !important;
}

.background-color-dark-blue {
    background-color: var(--mp-dark-blue) !important;
}

.background-color-dark-gray {
    background-color: var(--mp-dark-gray) !important;
}

.background-color-dark-green {
    background-color: var(--mp-dark-green) !important;
}

.font-size-h1,
.font-size-h2,
.font-size-h3,
.font-size-h4,
.font-size-h5,
.font-size-h6 {
    font-weight: 600 !important;
    color: var(--mp-dark-blue) !important;
    text-transform: uppercase !important;
}

.font-size-h1 {
    font-size: var(--mp-font-size-h1) !important;
}

.font-size-h2 {
    font-size: var(--mp-font-size-h2) !important;
}

.font-size-h3 {
    font-size: var(--mp-font-size-h3) !important;
}

.font-size-h4 {
    font-size: var(--mp-font-size-h4) !important;
}

.font-size-h5 {
    font-size: var(--mp-font-size-h5) !important;
}

.font-size-h6 {
    font-size: var(--mp-font-size-h6) !important;
}

.font-size-p {
    font-size: var(--mp-font-size-p) !important;
    color: var(--mp-black) !important;
    font-weight: 400 !important;
}

.error,
.error label {
    color: var(--mp-alert-red) !important;
    font-weight: 600;
}

.error input,
.error textarea {
    color: var(--mp-alert-red) !important;
    border: 1px solid var(--mp-alert-red) !important;
}

.admin-only,
.admin-only svg {
    color: var(--mp-alert-red) !important;
}

.hidden {
    display: none !important;
}

.width-100 {
    width: 100% !important;
}

.height-50 {
    height: 50% !important;
}

.height-100 {
    height: 100% !important;
}

.width-height-100 {
    width: 100% !important;
    height: 100% !important;
}

.text-center {
    text-align: center;
}

.email input {
    text-transform: lowercase;
}

.logo {
    display: block;
    background-image: var(--mp-icon-logo);
    background-size: contain;
    background-repeat: no-repeat;
    width: 245px;
    height: 40px;
}

.title {
    padding: 0 0 20px 0;
}

.buttons {
    display: flex;
    gap: 10px;
}

.buttons-vertical {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--mp-font-size-h5);
    font-weight: bold;
    border: none;
    border-radius: 4px;
    -webkit-tap-highlight-color: transparent;
    padding: 9px 6px;
    color: var(--mp-dark-blue);
    text-decoration: none;
}

.btn-primary {
    background-color: var(--mp-dark-blue);
    border: 1px solid var(--mp-dark-blue);
    color: var(--mp-light-gray);
}

.btn-secondary {
    background-color: var(--mp-white);
    color: var(--mp-dark-blue);
    border: 1px solid var(--mp-dark-blue);
}

.btn-alert {
    background-color: var(--mp-red);
    border: 1px solid var(--mp-red);
    color: var(--mp-light-gray);
}

.btn-offline {
    background-color: var(--mp-light-gray);
    border: 1px solid var(--mp-red);
    color: var(--mp-red);
    width: 75px;
}

.btn-online {
    background-color: var(--mp-green);
    border: 1px solid var(--mp-green);
    color: var(--mp-light-gray);
    width: 75px;
}

.btn-link {
    width: fit-content;
    background-color: transparent;
    text-decoration: underline;
    color: inherit;
}

.btn-icon,
.btn-no-style {
    width: fit-content;
    color: var(--mp-dark-blue);
    background-color: transparent;
    appearance: none;
    padding: 0;
    text-decoration: none;
    border: none;
    border-radius: 0;
}

@media (hover: hover) {

    .edit:hover,
    .btn:hover {
        cursor: pointer;
    }

    .btn-primary:hover {
        background-color: var(--mp-white);
        color: var(--mp-dark-blue);
        border: 1px solid var(--mp-dark-blue);
    }

    .btn-secondary:hover {
        background-color: var(--mp-dark-blue);
        border: 1px solid var(--mp-dark-blue);
        color: var(--mp-light-gray);
    }

    .btn-alert:hover {
        background-color: var(--mp-light-gray);
        color: var(--mp-red);
        border: 1px solid var(--mp-red);
    }

    .btn-offline:hover {
        background-color: var(--mp-red);
        border: 1px solid var(--mp-red);
        color: var(--mp-light-gray);
    }

    .btn-online:hover {
        background-color: var(--mp-light-gray);
        border: 1px solid var(--mp-green);
        color: var(--mp-green);
    }

    .btn-link:hover {
        color: var(--mp-dark-blue);
    }

    .btn-icon:hover,
    .btn-no-style:hover {
        color: var(--mp-dark-blue);
        background-color: transparent;
    }

    .btn:hover:disabled {
        cursor: default !important;
    }
}



/* spacers are used when there are 2 items in a flex row and we want the 2nd item centered
    the spacer is added as a third item so justify-content: space-between works correctly */
.spacer-40 {
    width: 40px;
}

/* this spacer is used to expand a flex section to its full height */
.spacer-auto {
    flex-grow: 1;
}

.tool-tip {
    position: relative;
}

.tool-tip .tool-tip-text {
    display: none;
    width: max-content;
    background-color: var(--mp-white);
    color: var(--mp-dark-blue);
    box-shadow: var(--mp-box-shadow);
    text-transform: capitalize;
    text-align: center;
    border-radius: 6px;
    padding: 5px 10px;
    position: absolute;
    z-index: 100;
    top: 110%;
    left: 0;
}

.tool-tip:hover .tool-tip-text {
    display: flex;
}

@media (hover: none) {
    .tool-tip:hover .tool-tip-text {
        display: none;
    }
}

.toggle-buttons {
    width: fit-content;
    display: flex;
    flex-wrap: wrap;
    margin: 15px 0 0 0;
    border: 1px solid var(--mp-dark-blue);
}

.toggle-buttons input {
    opacity: 0;
    position: fixed;
    width: 0;
}

.toggle-buttons label {
    padding: 4px 10px;
    border-radius: 0;
    min-width: 65px;
    text-align: center;
}

.toggle-buttons input:checked+label {
    background-color: var(--mp-dark-blue);
    color: var(--mp-light-gray);
    border-radius: 0;
}

.toggle-buttons .input {
    padding: 0;
}


.toggle-switch label {
    pointer-events: none;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

.toggle-switch label>span {
    font-size: 20px;
    padding: 0 10px;
}

.toggle-switch label.after {
    justify-content: flex-start;
}

.toggle-switch label input {
    display: none;
}

.toggle-switch label .toggle-icon-wrapper {
    position: relative;
    width: 40px;
    height: 24px;
    background-color: var(--mp-light-gray);
    border-radius: 34px;
}

.toggle-switch label .toggle-icon-wrapper .toggle-icon {
    width: 18px;
    height: 18px;
    position: absolute;
    top: 50%;
    left: 3px;
    transform: translateY(-50%);
    background-color: darkgray;
    transition: left 0.25s ease;
    border-radius: 50%;
}

.toggle-switch label .toggle-icon-wrapper,
.toggle-switch label>span {
    cursor: pointer;
    pointer-events: all;
}

.toggle-switch label input:checked+.toggle-icon-wrapper {
    background-color: var(--mp-dark-blue);
}

.toggle-switch label input:checked+.toggle-icon-wrapper>.toggle-icon {
    left: calc(100% - 21px);
    background-color: var(--mp-white);
}



.radio-buttons {
    gap: 0;
    width: fit-content;
    border: 1px solid var(--mp-dark-blue);
}

.radio-buttons .input {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.radio-buttons .radio input {
    opacity: 0;
    position: fixed;
    width: 0;
}

.radio-buttons label {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 4px 16px 2px 16px;
    border-radius: 0;
    font-size: var(--mp-font-size-p);
    text-align: center;
}

.radio-buttons .radio input:checked+label {
    background-color: var(--mp-dark-blue);
    border: 1px solid var(--mp-dark-blue);
    color: var(--mp-light-gray);
    font-weight: 500;
}

.radio-buttons .radio input:not(:checked)+label {
    opacity: 50%;
    font-weight: 400;
}


.pie-chart {
    margin: 0 auto;
}

.pie-chart .google-visualization-tooltip {
    width: 200px;
    z-index: 40;
    border-radius: 4px;
}

.pie-chart .google-visualization-tooltip-separator {
    display: none;
}

.pie-chart .google-visualization-tooltip ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 5px 0;
}

.pie-chart .google-visualization-tooltip-item,
.pie-chart .google-visualization-tooltip-action {
    margin: 0 !important;
    padding: 0 20px !important;
}

.pie-chart .google-visualization-tooltip-action {
    text-decoration: underline;
}

.pie-chart svg {
    pointer-events: all;
}


#notifications {
    position: fixed;
    bottom: 40px;
    left: 20px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.notification {
    background-color: var(--mp-light-blue);
    color: var(--mp-black);
    text-align: center;
    border-radius: 4px;
    -webkit-animation: fadein 0.5s;
    animation: fadein 0.5s;
    padding: 10px 20px 8px 20px;
}

.notification-animate {
    -webkit-animation: fadein 0.5s, fadeout 0.5s 4.5s;
    animation: fadein 0.5s, fadeout 0.5s 4.5s;
}

.notification h5 {
    color: var(--mp-white);
}

.notification.info {
    background-color: var(--mp-light-green);

}

.notification.warning {
    background-color: var(--mp-orange);
    color: var(--mp-white);
}

.notification.error {
    background-color: var(--mp-red);
    color: var(--mp-white);
}


.auto-complete {
    position: relative;
}

.auto-complete-input {}

.auto-complete-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    border: 1px solid #ccc;
    border-top: none;
    /* merge border with input */
    background: #fff;
    max-height: 200px;
    /* optional scroll if too many items */
    overflow-y: auto;
    border-radius: 0 0 4px 4px;
    box-shadow: var(--mp-box-shadow)
}

.auto-complete-list ul {
    padding: 5px 0;
}

/* Each suggestion item */
.auto-complete-item {
    padding: 5px 10px;
    cursor: pointer;
}

/* Hover and active states */
.auto-complete-item:hover,
.auto-complete-item.active {
    background: #f0f6ff;
}




/* purposely left out height and width from default spinner class */
.spinner {
    background-image: var(--mp-icon-spinner);
    background-size: cover;
    background-repeat: no-repeat;
}

.wait .spinner {
    width: 100px;
    height: 100px;
}

.wait h2 {
    text-align: center;
}

/* buttons default font height is 23px */
button .spinner {
    width: 23px;
    height: 23px;
}

@media (hover: hover) {
    .btn-primary:hover .spinner {
        filter: unset;
    }
}

.password,
.new-password,
.confirm-password {
    position: relative;
}

.password-show {
    position: absolute;
    top: 7px;
    right: 25px;
    height: 100%;
    filter: var(--mp-icon-filter-dark-blue);
}

.password-show svg {
    height: 100%;
    width: 20px;

}

.password-examples {
    padding: 0 0 10px 0;
}

.password-examples p {
    padding: 10px 0;
}

.password-requirements {
    padding: 10px 0 20px 0;
}





.slider {
    position: relative;
    overflow: hidden;
}

.slides {
    display: flex;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: auto;
    scroll-behavior: smooth;
}

.slide {
    flex: 1 0 100%;
}

dialog {
    width: 80%;
    border: none;
    box-shadow: var(--mp-box-shadow);
    padding: 0;
}

.modal {
    width: 100%;
}

.modal-header,
.modal-body,
.modal-footer {
    padding: 10px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background-color: var(--mp-dark-blue);
}

.modal-header h2,
.modal-header svg {
    color: var(--mp-light-gray);
}

.modal-header .modal-close {
    min-width: auto;
}

/* .modal-body {} */

.modal-body-spinner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 80px 0;
}

.modal-body-spinner .spinner {
    height: 100px;
    width: 100px;
}

.modal-body .confirm {
    padding: 20px 10px;
}

.modal-body .header {
    padding: 20px 0 10px 0;
}

.modal-body .header:first-of-type {
    padding: 0 0 10px 0;
}

.modal input,
.modal textarea {
    background-color: var(--mp-medium-gray);
}

.modal-body .edit-form {
    min-height: 305px;
    display: flex;
    flex-direction: column;
}

.modal-body .edit-form.edit-notation {
    min-height: 200px;
}

.modal-body .edit-form .message {
    height: 100%;
    margin: auto 0 0 0;
}

.modal-body .edit-form h2 {
    padding: 50px 0;
}

.modal-body .edit-form .spinner {
    width: 100px;
    height: 100px;
}

.modal-body .add-attendants .selected-attendants {
    padding: 10px 0;
}

.modal-body video {
    width: 100%;
}

.modal-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}


.modal-screenshots {
    width: 98%;
    max-width: 1024px;
}

.modal-screenshots .slides {
    gap: 10px;
}

.modal-screenshots .slide img {
    width: 100%;
}

.modal-screenshots .slider-nav-buttons {
    position: absolute;
    top: 50%;
    left: 40px;
    right: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-screenshots .slider-nav-buttons svg {
    color: var(--mp-blue);
    width: 50px;
    height: 50px;
    opacity: .5;
}

.modal-screenshots .slider-nav-buttons svg:focus {
    outline: none;
}

.modal-screenshots .modal-footer {
    display: none;
}



#modal_incoming_help_request .modal-body>div {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#modal_incoming_help_request .modal-footer button {
    gap: 20px;
    justify-content: space-evenly;
    color: var(--mp-white);
}

#modal_incoming_help_request .modal-footer button.help-request-answer {
    background-color: var(--mp-green);
    border: 1px solid var(--mp-green);
}

#modal_incoming_help_request .modal-footer button.help-request-answer:hover {
    background-color: var(--mp-white);
    border: 1px solid var(--mp-green);
    color: var(--mp-green);
}

#modal_incoming_help_request .modal-footer button.help-request-ignore {
    background-color: var(--mp-red);
    border: 1px solid var(--mp-red);
}

#modal_incoming_help_request .modal-footer button.help-request-ignore:hover {
    background-color: var(--mp-white);
    border: 1px solid var(--mp-red);
    color: var(--mp-red);
}



.square-box {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.square-box:before {
    content: "";
    display: block;
    padding-top: 100%;
}

.square-box-content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* qr scanner */

.qr-scanner-container {
    background-color: var(--mp-light-gray);
    position: relative;
    height: 100%;
}

.qr-scanner-container>div {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.qr-scanner-container .scanner-start-container {
    background-color: var(--mp-light-gray);
    z-index: 10;
}

.qr-scanner-container .scanner-start-container h4 {
    padding: 0 0 20px 0;
}

.qr-scanner-container .scanner-start-container img {
    pointer-events: none;
    width: 50px;
    height: 50px;
}

.qr-scanner-container .scanner-initialize-container {
    background-color: var(--mp-light-gray);
    z-index: 7;
}

.qr-scanner-container .scanner-container {
    background-color: var(--mp-light-gray);
    z-index: 5;
    display: inline-block;
}

.qr-scanner-container .scanner-container .scanner-devices {
    width: 95%;
    background-color: var(--mp-white);
    margin: 10px;
    position: relative;
    z-index: 10;
}

.qr-scanner-container .scanner-container .qr-scanner {
    width: 100%;
    height: 100%;
    margin: -50px 0 0 0;
    z-index: 5;
}

.qr-scanner-container .scanner-container .qr-scanner video {
    height: 100%;
    object-fit: cover;
}

.qr-scanner-container .btn-qr-scanner-torch {
    position: relative;
    z-index: 10;
    padding: 15px;
    margin: -75px auto;
    background-color: var(--mp-white);
    border-radius: 50%;
    transition: box-shadow 0.3s ease;
}

.qr-scanner-container .qr-scanner-torch-disable {
    background: rgba(255, 266, 0, 0.6);
    box-shadow: 0 0 12px 4px rgba(255, 223, 0, 0.4);
}

.qr-scanner-container .btn-qr-scanner-torch svg {
    width: 30px;
    height: 30px;
}



.popover {
    padding: 20px;
}

.popover .section header {
    padding: 0 0 20px 0;
}



.flex {
    display: flex;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-fill {
    flex: 1 0 auto;
}

.flex-center {
    justify-content: center;
    align-items: center;
}

.justify-space-between {
    justify-content: space-between;
}

.justify-space-evenly {
    justify-content: space-evenly;
}

.align-center {
    align-items: center;
}


.grid {
    display: grid;
}

.grid-columns-4 {
    grid-template-columns: 25% 25% 25% 25%;
}

.grid-item-center {
    place-self: center;
    justify-self: center;
}



.row {
    display: flex;
    width: 100%;
    flex-direction: column;
}

.row-alternate {
    background-color: var(--mp-light-gray);
}

.row-header {
    width: 100%;
    background-color: var(--mp-dark-blue);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

.row-sub-header {
    background-color: var(--mp-blue);
}

.row-header p,
.row-header h1,
.row-header h2,
.row-header h3,
.row-header h4,
.row-header h5,
.row-header h6 {
    width: 100%;
    color: var(--mp-light-gray);
}

.row-header .header-buttons {
    display: flex;
    align-items: center;
}

.row-header svg {
    color: var(--mp-light-gray);
    margin: 0 0 0 20px;
}

.row-header .header-text:has(.header-time-zone) {
    width: 100%;
}

.row-header .header-text:has(.header-time-zone)>:first-child {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
}

.row-header .header-text .header-time-zone {
    color: var(--mp-white);
    font-size: var(--mp-font-size-h5);
    font-weight: 600;
}

.row-head .row-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}







.cards {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(355px, 1fr));
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
}

.card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: var(--mp-box-shadow);
    border-radius: 4px;
}

/* spacer cards */
.card.empty {
    box-shadow: none;
}

.card.expanded {
    grid-column: 1 /-1;
}

.card.header-card {
    margin: 10px auto;
}

.card-title {
    width: 100%;
    min-height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--mp-dark-blue);
    padding: 10px 10px 8px 10px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.card-title div,
.card-title h2,
.card-title h3,
.card-title h4,
.card-title h5,
.card-title svg,
.card-title .btn {
    color: var(--mp-light-gray);
}

.card-title .btn-secondary {
    color: var(--mp-dark-blue);
}

.card-title .btn-secondary:hover {
    background-color: var(--mp-dark-blue);
    border: 1px solid var(--mp-dark-blue);
    color: var(--mp-white);
}

.card-title a {
    font-weight: 400;
}

.card-title.stack {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 7px 10px;
}

.card-title.stack>div {
    width: 100%;
    min-height: 26px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0;
}

.card-title svg {
    width: 22px;
    height: 22px;
}

.card-title .card-title-buttons {
    display: flex;
    gap: 10px;
}

.card-title .phone {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.card-title .phone a {
    padding: 0 0 0 15px;
}

.card-title .phone a:first-child {
    justify-content: flex-start;
    padding: 0;
    margin: 0 auto 0 0;
}

.card-title .time {
    width: 80px;
    text-align: end;
}

.card-title div.badge-row {
    padding: 5px 0 0 0;
    justify-content: flex-start;
    flex-grow: 1;
}

.card-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background-color: var(--mp-white);
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    padding: 5px 10px 10px 10px;
}

.card.header-card .card-body {
    height: 100%;
    background-color: var(--mp-dark-red);
    display: flex;
    justify-content: center;
    align-items: center;
}

.card.header-card .card-body h2 {
    color: var(--mp-white);
    text-align: center;
}

.card-body h2,
.card-body h3,
.card-body h4,
.card-body h5 {
    padding: 5px 0;
}

.card-body .section-item.tight {
    min-height: 18px;
    padding: 0 10px;
    border-bottom: none;
}

.card-body .screenshots>div {
    width: 95%;
    margin: 0 0 0 10px;
}

.card-body .screenshots .slide {
    flex: 1 0 auto;
}

.card-body .screenshots .slide img:hover {
    cursor: pointer;
}

.card-body .no-screenshots {
    margin: 0 10px;
}

.card-body legend {
    font-size: var(--mp-font-size-h5);
}

.card-body .attendant-notations {
    display: flex;
    flex-direction: column;
    margin: 0 0 10px 0;
}

.card-body .attendant-notations .attendant-notation {
    margin: 0 -12px;
    padding: 5px 10px;
}

.card-body .attendant-notations .attendant-notation:nth-child(even) {
    background-color: var(--mp-light-gray);
}

.card-body .attendant-notation .date,
.card-body .attendant-notation .name {
    font-weight: 500;
    color: var(--mp-dark-blue);
}

.card-body .attendant-notations .attendant-notation .message {
    min-height: auto;
    font-weight: 400;
    padding: 3px 10px 0 10px;
}

.card-body .attendant-notations>.buttons {
    align-self: flex-end;
    padding: 10px 0 0 0;
}

.card-body .attendant-notations>.buttons button {
    width: 22px;
    height: 22px;
}

.card-body .attendant-notation .buttons button {
    width: 18px;
    height: 18px;
}

.card-body .more-info {
    margin: 10px auto 5px auto;
}

.card-body .more-info-content {
    padding: 0 10px 10px 10px;
}

.card-footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--mp-white);
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    padding: 5px 10px 10px 10px;
}






.section {
    padding: 0 0 10px 0;
}

.section header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 10px 0;
}

.section header:first-child {
    flex-grow: 1;
}

.section header .buttons {
    display: flex;
    gap: 10px;
}

.section header .buttons svg {
    width: 20px;
    height: 20px;
}

.section.sub-section {
    padding: 0 10px 10px 10px;
}

.section-item {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    column-gap: 20px;
    width: 100%;
    min-height: 25px;
    padding: 3px 10px;
    border-bottom: 1px solid var(--mp-light-gray);
}

.section-item:last-of-type {
    border: none;
}

.section-item a,
.section-item p {
    display: flex;
    justify-content: space-between;
    font-size: var(--mp-font-size-p);
    font-weight: 300;
}

.section-item>a:first-child,
.section-item>p:first-child {
    flex-grow: 1;
}


.section-item .btn-icon {
    width: 18px;
    height: 18px;
}

.section-item.company p,
.section-item.location p,
.section-item.attendant p {
    padding: 0;
}

.section-item.attendant .notifications-icon {
    margin: 0 0 0 auto;
}

.section-item.attendant .notifications-icon svg {
    height: 15px;
    width: 15px;
}

.section-item .badge {
    font-size: 12px;
    text-transform: none;
    padding: 3px 4px 3px 4px;
    margin: 0 5px;
}




.badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 0 10px 0;
}

.badge {
    width: fit-content;
    color: var(--mp-light-gray);
    border: 1px solid transparent;
    padding: 4px 8px 2px 8px;
    border-radius: 4px;
    line-height: 1;
    text-transform: uppercase;
    font-size: 12px;
}

.badge.alert {
    background-color: var(--mp-red);
    color: var(--mp-white);
}

.badge.warning,
.badge.warning .count {
    background-color: var(--mp-orange);
    color: var(--mp-white);
}

.badge.success {
    background-color: var(--mp-green);
    color: var(--mp-white);
}

.badge.info {
    background-color: var(--mp-light-blue);
    color: var(--mp-white);
}

.badge.company-manager {
    background-color: var(--mp-dark-blue);
    color: var(--mp-white);
}

.badge.location-manager {
    background-color: var(--mp-light-green);
    color: var(--mp-white);
}

.badge .count {
    padding: 0 0 0 5px;
}

@media (hover: hover) {
    .btn.badge:hover {
        background-color: var(--mp-white);
    }

    .btn.badge.alert:hover {
        border: 1px solid var(--mp-red);
        color: var(--mp-red);
    }

    .btn.badge.warning:hover {
        border: 1px solid var(--mp-orange);
        color: var(--mp-orange);
    }

    .btn.badge.success:hover {
        border: 1px solid var(--mp-green);
        color: var(--mp-green);
    }

    .btn.badge.info:hover {
        border: 1px solid var(--mp-light-blue);
        color: var(--mp-light-blue);
    }

    .btn.badge.company-manager:hover {
        border: 1px solid var(--mp-dark-blue);
        color: var(--mp-dark-blue);
    }

    .btn.badge.location-manager:hover {
        border: 1px solid var(--mp-light-green);
        color: var(--mp-light-green);
    }
}




.mp-accordian {
    width: 100%;
}

.mp-accordian .mp-accordian-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card.mp-accordian {
    height: fit-content
}

.mp-accordian-content {
    display: none;
}

.mp-accordian-content-start-open {
    display: flex;
}






/* Nav menus */
.global-notification {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999999;
    background-color: var(--mp-olive-gold);
    padding: 10px;
}

.global-notification:first-child {
    text-align: center;
}

body>header {
    width: 100%;
    height: 50px;
    position: fixed;
    top: var(--top-global-header);
    left: 0;
    right: 0;
    z-index: 99999;
    display: flex;
    justify-content: space-between;
    background-color: var(--mp-white);
    padding: 5px;
}

body>header.header-up {
    top: -70px !important;
}

.no-animations {
    transition: none !important;
}

body>header .left,
body>header .right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.right .btn-active-call {
    color: var(--mp-red);
    animation: blink 2s ease-in infinite;
}

@keyframes blink {

    from,
    to {
        opacity: 1
    }

    50% {
        opacity: 0
    }
}

.nav-main,
.right .user,
.right .user-first-name {
    display: none;
}

.right .user-first-name {
    font-size: var(--mp-font-size-p);
}

.nav-sub p {
    text-decoration: none;
}

.nav-sub>div {
    position: absolute;
    z-index: 99999;
    background-color: var(--mp-blue);
    border-radius: 4px;
    box-shadow: var(--mp-box-shadow);
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

.nav-sub>div a {
    color: var(--mp-white);
    padding: 0
}

.nav-sub>div button.btn-link {
    width: 100%;
}

.nav-sub.nav-more-actions {
    position: relative;
    display: inline-block;
}

.nav-sub.nav-more-actions>div {
    right: 10px;
    gap: 0;
    padding: 10px;
}

.nav-sub.nav-more-actions>div button.btn-link {
    width: max-content;
    color: var(--mp-white);
    text-decoration: none;
}





.mobile-menu {
    display: none;
    position: fixed;
    z-index: 9999999;
    top: 0;
    right: 0;
    min-width: 70%;
    height: 100%;
    background-color: var(--mp-blue);
    padding: 20px;
}

.mobile-menu .close {
    color: var(--mp-white);
}

.mobile-menu>div>nav {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 30px 10px 0 10px;
}

.mobile-menu a,
.mobile-menu a:hover,
.mobile-menu button {
    color: var(--mp-light-gray);
}

.mobile-menu .logout {
    color: var(--mp-dark-blue);
}

.mobile-menu .feather-user {
    width: 50px;
    height: 50px;
}

.mobile-menu .profile-link {
    display: flex;
    justify-content: center;
    align-items: center;
}

.mobile-menu .profile-link h2 {
    color: var(--mp-white);
    padding: 0 0 0 10px;
}

.mobile-menu .menu-footer {
    padding: 30px 10px 10px 10px;
}

.mobile-menu .menu-footer>nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.menu-footer p {
    color: var(--mp-light-gray);
    padding: 10px 0 0 0;
}

.internal-link {
    text-decoration: none;
    text-transform: capitalize;
}

/* end nav menu */

/* page styling */
body>.content {
    background-color: var(--mp-light-gray);
    position: fixed;
    top: var(--top-content);
    left: 0;
    right: 0;
    bottom: var(--bottom-content);
    overflow-y: auto;
}

.page {
    /* if a style is added here, crawl all pages to ensure nothing broke (including login) */
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.content-header {
    width: 100%;
    height: 45px;
    position: fixed;
    top: var(--top-content-header);
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    background-color: var(--mp-dark-blue);
    padding: 10px;
}

.content-header h1,
.content-header svg {
    color: var(--mp-light-gray);
}

.content-header h1 {
    flex-grow: 1;
    font-size: var(--mp-font-size-h3);
}

.content-header button .refresh-page {
    -webkit-animation: fadeinout 2.5s infinite;
    animation: fadeinout 2.5s infinite;
}

.filters {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 90;
    transition: top 0.2s ease-in-out;
}

.filters>div {
    background-color: var(--mp-light-yellow);
    box-shadow: var(--mp-box-shadow);
    padding: 10px;
}

.filter-by {
    padding-bottom: 0;
    margin: 0 0 10px 0;
}

.filter-by>div,
.custom-filters>div {
    margin: 7px 0;
    padding: 0;
}

.filters .input {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0;
}

.filters .input label {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.filter-by div.drop-down {
    padding: 4px 7px 4px 5px;
}

.filter-by .date-range {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.filter-by .input.date,
.filter-by .input.text {
    flex-direction: column;
    align-items: flex-start;
    flex-grow: 1;
}

.filter-by .input.date.due-date {
    flex-direction: row;
}

.filter-by .input.checkbox label,
.filter-by .input.date label,
.filter-by .input.text label {
    background-color: transparent;
}

.filter-by .input.datetime-local input[type="datetime-local"] {
    width: 230px;
    font-weight: 500;
    padding: 6px 5px 2px 5px;
}

.filter-by .input.date input[type="date"] {
    width: 130px;
    font-weight: 500;
    padding: 6px 5px 2px 5px;
}


.filter-by .checkboxes {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.filter-by .input.checkbox {
    flex-direction: row-reverse;
    justify-content: flex-end;
    padding: 0 0 5px 0;
}

.filter-by .input.checkbox label {
    background-color: transparent;
}

.sort-by .buttons {
    gap: 0;
    width: fit-content;
    margin: 15px 0 0 0;
    border: 1px solid var(--mp-dark-blue);
}

.sort-by .buttons .sort-direction {
    opacity: 0;
    position: fixed;
    width: 0;
}

.sort-by .buttons label {
    padding: 4px 16px;
    border-radius: 0;
}

.sort-by .buttons .sort-direction:checked+label {
    background-color: var(--mp-dark-blue);
    color: var(--mp-light-gray);
}

.filters .include-deleted {
    margin: 10px 0 0 0;
}

.filters .include-deleted label {
    margin: 0 10px 0 auto;
}

.filters .filter-buttons {
    display: flex;
    justify-content: flex-end;
    margin: 15px 20px 10px 0;
    gap: 40px;
}

.badge-filters {
    display: flex;
    align-items: center;
    padding: 3px 4px 1px 7px;
}

.badge-filters span {
    text-transform: capitalize;
}

.badge-filters .filters-applied {
    flex-direction: column;
    text-align: left;
}

.badge-filters .filters-applied span {
    padding: 0 0 2px 0;
}

.badge-filters .filters-applied span:first-of-type {
    padding: 5px 0 2px 0;
}

.badge-filters button {
    padding: 0 0 0 5px;
}

.badge-filters button svg {
    width: 16px;
    height: 16px;
    position: relative;
    top: -1px;
}




.page-body {
    min-height: 0;
    flex: 1 0 auto;
}

.page-body>.row>h2 {
    text-align: center;
}

.page-body .header-sticky {
    position: sticky;
    padding: 5px 10px;
    transition: top 0.2s ease-in-out;
    z-index: 10;
}

.page-body .header-sticky.header-sticky-1 {
    background-color: var(--mp-dark-plum);
    top: var(--top-header-sticky-1);
    z-index: 30;
}

.page-body .header-sticky.header-sticky-2 {
    background-color: var(--mp-plum);
    top: var(--top-header-sticky-2);
    z-index: 29;
}

.page-body .header-sticky.header-sticky-3 {
    background-color: var(--mp-light-plum);
    top: var(--top-header-sticky-3);
    z-index: 28;
}

.page-body .header-sticky.header-sticky-4 {
    background-color: var(--mp-very-light-plum);
    top: var(--top-header-sticky-4);
    z-index: 27;
}




.page-body .page-content,
.page-body .page-content>.row-body:not(.cards) {
    flex-grow: 1;
}

.page-body .no-content {
    height: 100%;
    margin: 0 auto;
}

.page-body .no-content p {
    padding: 10px 0 0 0;
    text-align: center;
}

.page-body #loading_more_content {
    padding: 40px 0 0 0;
}

.page-body .feature-not-active {
    padding: 20px;
}

.page-body .locations-picker .buttons {
    width: 100%;
    flex-direction: column;
    padding: 0 30px;
    margin: 20px auto 0 auto;
    gap: 30px;
}





.page-body-footer {
    margin: auto 0 0 0;
}

.footer {
    display: flex;
    flex-direction: column-reverse;
    background-color: var(--mp-light-gray);
    text-align: center;
    padding: 0 0 15px 0;
}

.footer .left {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer .right {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.dev-info {
    font-weight: bold;
    text-transform: lowercase;
}

.error-message {
    padding: 20px 0 0 0;
}

.message {
    min-height: 33px;
}

/* schedules */

dialog.modal-edit-schedule h4 {
    padding: 0 0 10px 0;
}

dialog.modal-edit-schedule .drop-down {
    margin: 0 0 10px 0;
}

dialog.modal-edit-schedule .toggle-switch-list .message {
    padding: 0 0 20px 0;
}

.card.schedule .no-content {
    padding: 50px 30px 60px 20px;
}

.card.schedule {
    height: fit-content;
}

.schedule>.card-title {
    background-color: var(--mp-light-blue);
    padding: 5px 10px;
    border-radius: 0;
}

.schedule>.card-title span:not(.badge, .tool-tip-text) {
    color: var(--mp-white);
    font-style: italic;
    padding: 0 0 0 5px;
}

.schedule>.card-title .buttons {
    flex-grow: 1;
    justify-content: flex-end;
}

.schedule>.card-title .date-label {
    text-align: right;
}

.schedule>.card-title h6 {
    font-style: italic;
    color: var(--mp-white);
    text-align: left;
    text-transform: capitalize;
}

.schedule>.card-title.stack>div {
    align-items: center;
    gap: 10px;
}

.schedule .card-body {
    padding: 0;
}

.schedule .days-of-week {
    display: grid;
    padding: 0;
}

.schedule.due-dates>.card-body .card {
    box-shadow: none;
}

.schedule.due-dates>.card-body .card-body>.section {
    box-shadow: var(--mp-box-shadow);
}

.schedule .card-body>h5 {
    padding: 0 10px;
}

.schedule .section header {
    background-color: var(--mp-dark-blue);
}

.schedule .section.day-button>header {
    background-color: var(--mp-light-blue);
}

.schedule .section>header h5,
.schedule .section>header h6 {
    color: var(--mp-white);
    padding: 10px;
}

.schedule .card-body .rules-header {
    background-color: var(--mp-light-blue);
    color: var(--mp-white);
    padding: 5px;
}

.section-item .time-span {
    display: flex;
    gap: 5px;
}

.section-item .time-span p {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.schedule .section-item>p:first-child {
    font-weight: 400;
}

.schedule .card-body>.section,
.schedule .section.day-button {
    padding: 0;
}

.schedule>.card-body>.days-of-week>.section>header,
.schedule>.card-body>.days-of-week>.section>h5 {
    margin: 0 0 10px 0;
}

.schedule .card-body>.section>.input,
.schedule .day-button>.section-item.rule-item {
    padding: 10px;
    border-bottom: 3px solid var(--mp-light-gray);
}

.schedule .card-body>.section>.rule-item:last-of-type,
.schedule .day-button>.section-item.rule-item:last-of-type {
    border-bottom: none;
}

.schedule .rule-item>div {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.schedule .section.rule-properties {
    width: 100%;
    padding: 0 0 10px 5px;
}

.schedule .section.rule-properties p {
    padding: 0 0 3px 0;
    text-transform: capitalize;
}

.schedule .card-body .more-info {
    margin: 0 auto;
}

.schedule .card-body .more-info-content .section>header {
    background-color: var(--mp-white);
}

.schedule .card-body .more-info-content .section>header h5 {
    color: var(--mp-dark-blue);
}

.schedule .card-body .more-info-content .section-item>p:first-child {
    font-weight: 600;
}

/* schedule editor */

.schedule-editor .row-header .header-buttons svg {
    width: 20px;
    height: 20px;
}

.schedule-editor .row-schedule>.row-body {
    padding: 10px;
}

.schedule-editor .row-schedule>.row-body .cards {
    grid-template-columns: 1fr;
    padding: 0;
}

.schedule-editor .card.mp-accordian .no-schedule .card-body {
    padding: 10px 10px 20px 10px;
}

.schedule-editor .day-of-week>.card-body {
    padding: 10px;
    gap: 10px;
}

.schedule-editor .card.mp-accordian .due-date-button .card-title {
    background-color: var(--mp-light-plum);
}

.schedule-editor .input input {
    background-color: var(--mp-medium-gray);
}

.schedule-editor .input.required label::after {
    display: none;
}

.schedule-editor .section.rule {
    padding: 10px 0;
    border-bottom: 3px solid var(--mp-light-gray);
}

.schedule-editor .section.rule>.section-item {
    align-items: center;
}

.schedule-editor .input input {
    width: 130px;
}

.schedule-editor .rule .drop-down {
    margin: 0 0 5px 0;
}

.schedule-editor .rule .drop-down select {
    font-size: var(--mp-font-size-p);
    font-weight: 400;
}

.schedule-editor .rule .drop-down.rule-input-offset {
    width: 200px;
}

.schedule-editor .input.text.rule-input-name input,
.schedule-editor .input.text.rule-input-offset input {
    width: 100%;
    text-align: right;
}

.schedule-editor .drop-down.rule-input-upcharge-color {
    width: 80px;
}

.schedule-editor .input.toggle-switch label {
    padding: 0;
}

.schedule-editor .toggle-switch {
    align-items: center;
}

.schedule-editor .toggle-switch label>span {
    padding: 0;
}

.schedule-editor .radio-buttons {
    width: fit-content;
    min-width: 130px;
    margin: 0 0 0 auto;
}

.schedule-editor .radio-buttons .input {
    width: 100%;
}

.schedule-editor .input.radio input {
    width: auto;
}

.schedule-editor .input.radio label {
    padding: 4px 10px 2px 10px;
}

.schedule-editor .input-times .input {
    flex-direction: row;
    align-items: center;
}

.schedule-editor .input-times .input label {
    font-size: var(--mp-font-size-p);
    font-weight: 300;
    padding: 0 20px 0 0;
}

/* space and no space are intentional, one is mobile the other is desktop */
.schedule-editor .card .mp-accordian .add-rule,
.schedule-editor .card.mp-accordian .add-rule {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px;
}

.schedule-editor .section.rule>.section-item.input-message {
    align-items: flex-start;
}

.schedule-editor .rule-input-message {
    flex-grow: 1;
}



/* tutorial cards */

.info-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 5px 10px 20px 10px;
}

.info-card {
    width: 100%;
    height: auto;
    max-width: 100%;
}

.info-card .card-title {
    text-transform: capitalize;
}

.info-card.info .card-title {
    background-color: var(--mp-white);
}

.info-card.info .card-title h3,
.info-card.info .card-title svg {
    color: var(--mp-dark-blue);
}

.info-card .card-title-buttons {
    justify-content: flex-end;
}

.info-card .card-title-buttons .btn {
    min-width: fit-content;
}

.info-card .card-body p {
    color: var(--mp-white);
    padding: 0 0 10px 0;
}

.info-card.info .card-body p {
    color: var(--mp-black);
}

.info-card .card-body img {
    width: 22px;
    height: 22px;
}

.info-card .card-body svg {
    width: 18px;
    height: 18px;
}

.info-card .card-body ol,
.info-card .card-body ul {
    padding: 10px 20px 10px 40px;
    margin: 0;
}

.info-card .card-body li {
    padding: 0 0 10px 0;
}

.info-card .card-body li:last-child {
    padding: 0;
}

.info-card .card-body .badge {
    padding: 2px 4px 0 4px;
}

.tutorial-body>h3 {
    padding: 0 0 10px 0;
}

.tutorial-body>ul {
    padding: 10px 0 0 0;
}

.tutorial-body img.icon {
    height: 24px;
    padding: 0 10px;
}

.tutorial-body li {
    padding: 5px 0;
}

.tutorial-body .buttons {
    padding: 20px 0 0 0;
    justify-content: center;
    align-items: center;
}

.actions .modal-body h2 {
    padding: 0 0 10px 0;
}

@-webkit-keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        bottom: 0;
        opacity: 0;
    }

    to {
        bottom: 30px;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        bottom: 30px;
        opacity: 1;
    }

    to {
        bottom: 0;
        opacity: 0;
    }
}

@-webkit-keyframes fadeinout {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

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

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@media screen and (min-width: 768px) {
    .mobile-menu {
        min-width: 40%;
    }

    .content-header h1 {
        font-size: var(--mp-font-size-h1);
    }

    .filters {
        width: 465px;
        left: auto;
    }

    .filters>div {
        width: 450px;
        position: absolute;
        top: 0;
        right: 0;
    }

    dialog {
        width: 60%;
    }

    dialog.modal-help {
        width: 90%;
    }

    .modal.modal-screenshots .slider-nav-buttons {
        left: 70px;
        right: 70px;
    }

    .modal.modal-screenshots .slider-nav-buttons svg {
        width: 70px;
        height: 70px;
    }

    .card-body .section:has(+ .attendant-notations) {
        flex-grow: 1;
    }

    .card-body .section.screenshots {
        height: 160px;
    }
}

/* tablet */
@media screen and (min-width: 1024px) {
    .info-card {
        max-width: 100%;
    }

    dialog {
        max-width: 60%;
        min-width: 40%;
    }

    dialog .buttons-vertical .btn {
        align-self: center;
        min-width: 50%;
    }

    .modal-footer {
        flex-direction: row-reverse;
        flex-wrap: wrap;
        justify-content: center;
    }

    .modal-footer .btn {
        width: auto;
        min-width: 180px;
    }

    .modal.modal-screenshots .slider-nav-buttons {
        left: 100px;
        right: 100px;
    }

    .modal.modal-screenshots .slider-nav-buttons svg {
        width: 100px;
        height: 100px;
    }

    /* schedules */

    .schedule .cards {
        grid-template-columns: none;
    }

    .schedule.due-dates>.card-body>.days-of-week>.card {
        box-shadow: var(--mp-box-shadow);
    }

    .schedule>.card-body>.days-of-week {
        grid-template-columns: repeat(auto-fit, minmax(315px, 1fr));
    }

    .schedule.due-dates>.card-body>.days-of-week {
        grid-template-columns: repeat(auto-fit, minmax(335px, 1fr));
    }

    .schedule.due-dates>.card-body>.days-of-week>.card>.card-body>div:last-of-type {
        flex-grow: 1;
    }

    .schedule>.card-body>.days-of-week>.section {
        box-shadow: var(--mp-box-shadow);
    }

    .schedule>.card-body>.days-of-week>.section.mp-accordian {
        box-shadow: none;
    }
}

/* desktop */
@media screen and (min-width: 1366px) {
    :root {
        --mp-font-size-h1: 2rem;
        --mp-font-size-h2: 1.72rem;
        --mp-font-size-h3: 1.51rem;
        --mp-font-size-h4: 1.35rem;
        --mp-font-size-h5: 1.23rem;
        --mp-font-size-h6: 1.1rem;
        --mp-font-size-p: 1rem;
    }

    dialog {
        min-width: 30%;
    }

    .toggle-mobile-menu {
        display: none;
    }

    .nav-main {
        display: flex;
    }

    .right .user,
    .right .user-first-name {
        display: flex;
    }

    .nav-user {
        position: fixed;
        right: 10px;
        top: 55px;
        z-index: 99999;
        background-color: var(--mp-blue);
        border-radius: 4px;
        box-shadow: var(--mp-box-shadow);
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 20px;
    }

    .nav-user a {
        color: var(--mp-white);
        padding: 0;
    }

    .btn {
        width: fit-content;
        min-width: 20%;
    }

    .btn-offline,
    .btn-online {
        width: 100px;
    }

    .btn-no-style,
    .btn-icon {
        min-width: auto;
    }

    .toggle-buttons label {
        font-size: 18px;
    }

    .row-body {
        align-items: flex-start;
    }

    body>header {
        height: 60px;
    }

    .logo {
        width: 300px;
        height: 50px;
    }

    .nav-main .btn {
        width: fit-content;
        min-width: auto;
    }

    .right .btn-active-call svg {
        width: 35px;
        height: 35px;
    }

    .user svg {
        width: 35px;
        height: 35px;
    }

    .content-header {
        height: 50px;
    }

    .content-header h1 {
        padding-top: 4px;
    }

    .page-body .locations-picker .buttons {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
        align-items: flex-start;
        gap: 30px;
    }

    .page-body .locations-picker .buttons .btn {
        width: 100%;
        min-height: 100px;
        padding: 9px 18px;
    }

    .cards {
        gap: 20px;
    }

    .card {
        margin: 0 auto;
    }

    .info-cards {
        gap: 40px;
        padding: 30px 40px;
    }

    .info-card {
        margin: 0;
    }

    .card.header-card {
        max-width: 100%;
    }

    .card-title .time {
        width: 100px;
    }

    .desktop .row-body {
        padding: 20px 10px;
    }

    .mp-table {
        width: 100%;
        position: relative;
        border-collapse: separate;
        border-spacing: 0;
        border: 1px solid var(--mp-dark-blue);
        background-color: var(--mp-white);
        table-layout: fixed;
    }

    .mp-table thead tr {
        background-color: var(--mp-dark-blue);
        color: var(--mp-white);
        text-transform: capitalize;
        text-align: left;
    }

    .mp-table thead tr.header-sticky {
        background-color: var(--mp-dark-blue);
    }

    .mp-table th {
        color: var(--mp-white);
    }

    .mp-table tbody tr:nth-of-type(odd) {
        background-color: var(--mp-light-gray);
    }

    /* 1px is a hack to get 100% height/width working inside the cell that is dynamicly sized, the cell will still grow past 1px */
    .mp-table th,
    .mp-table td {
        padding: 5px 10px;
        height: 1px;
        width: 1px;
        vertical-align: top;
    }

    .mp-table td {
        border-bottom: 1px solid var(--mp-gray);
        border-right: 1px solid var(--mp-gray);
    }

    .mp-table tr:last-child td {
        border-bottom: none;
    }

    .mp-table td:last-of-type {
        border-right: none;
    }

    .mp-table strong {
        font-weight: 500;
    }

    .mp-table tbody .header-row {
        border-bottom: none;
    }

    .mp-table tbody .header-row th {
        color: var(--mp-white);
        font-size: var(--mp-font-size-h4);
        padding: 5px 10px;
        text-align: left;
    }

    .mp-table .header-row.date-row {
        background-color: var(--mp-dark-plum);
    }

    .mp-table .header-row.date-row th {
        border-color: var(--mp-dark-plum);
    }

    .mp-table .header-row.company-row {
        background-color: var(--mp-plum);
    }

    .mp-table .header-row.company-row th {
        border-color: var(--mp-plum);
    }

    .mp-table .header-row.location-row {
        background-color: var(--mp-light-plum);
    }

    .mp-table .header-row.location-row th {
        border-color: var(--mp-light-plum);
    }

    .mp-table .header-row th .header-time-zone {
        float: right;
        color: var(--mp-white);
        font-size: var(--mp-font-size-h5);
    }

    .mp-table .section {
        margin: 0;
        padding: 0;
    }

    .mp-table .section-item {
        border: none;
    }

    .mp-table .section-item p:first-child {
        font-weight: 400;
    }

    .mp-table .session,
    .mp-table .request {
        width: 185px;
    }

    .mp-table .badge-row {
        padding: 5px 0 0 0;
        gap: 3px;
        flex-direction: column;
    }

    .mp-table .kiosk,
    .mp-table .location {
        width: 155px;
    }

    .mp-table .patron {
        width: 150px;
    }

    .mp-table .kiosk>div {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 20px
    }

    .mp-table th.attendant-notations {
        width: 300px;
    }

    .mp-table div.attendant-notations {
        height: 100%;
    }

    .mp-table td .attendant-notations {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .mp-table .attendant-notations .attendant-notation {
        padding: 5px;
    }

    .mp-table .attendant-notations .attendant-notation .message {
        min-height: auto;
    }

    .mp-table .attendant-notations .attendant-notation:nth-child(even) {
        background-color: var(--mp-light-gray);
        margin: 0 -10px 0 -10px;
        padding: 5px 15px;
    }

    .mp-table tr:nth-of-type(odd) .attendant-notations .attendant-notation:nth-child(even) {
        background-color: var(--mp-white);
        margin: 0 -10px 0 -10px;
        padding: 5px 15px;
    }

    .mp-table .attendant-notations .buttons {
        align-self: flex-end;
    }

    .mp-table .screenshots .slide {
        flex: none;
    }

    .mp-table td>button {
        margin: 0 auto;
    }

    .desktop .no-content {
        padding: 100px;
    }

    .footer {
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        padding: 20px 0;
    }

    .modal.modal-screenshots .modal-body {
        padding: 20px;
    }

    .password-show {
        top: 10px;
    }

    /* schedules */

    .schedules .desktop .no-content,
    .schedule-overrides .desktop .no-content {
        padding: 20px;
    }

    .header-schedule {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
    }

    .header-schedule p {
        color: var(--mp-white);
        font-size: var(--mp-font-size-h4);
    }

    .header-schedule span:not(.badge, .tool-tip-text) {
        color: var(--mp-white);
        font-style: italic;
    }

    .header-schedule .badge.alert {
        background-color: var(--mp-white);
        color: var(--mp-alert-red);
        border: 1px solid var(--mp-alert-red);
    }

    .header-schedule .buttons {
        flex-grow: 1;
        justify-content: flex-end;
    }

    .header-schedule .buttons svg {
        color: var(--mp-white);
    }

    .schedule.due-dates>.card-body .card {
        box-shadow: var(--mp-box-shadow);
    }

    .schedule.lobby-access>.card-body>.days-of-week {
        grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    }

    .schedule.due-dates>.card-body>.days-of-week {
        grid-template-columns: none;
    }

    .schedule .due-date-button>.row-header {
        background-color: var(--mp-light-blue);
        border: 1px solid var(--mp-light-blue);
        border-bottom: none;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        padding: 5px 10px;
    }

    .schedule .mp-table thead tr {
        background-color: var(--mp-white);
    }

    .schedule .mp-table thead th {
        width: 100%;
        color: var(--mp-dark-blue);
        text-align: left;
        vertical-align: middle;
        border-right: 1px solid var(--mp-light-blue);
        border-bottom: 1px solid var(--mp-light-blue);
    }

    .schedule .mp-table thead th:last-of-type {
        border-right: none;
    }

    .schedule .mp-table th.active,
    .schedule .mp-table th.inactive {
        width: 80px;
    }

    .schedule .mp-table th.name {
        width: 250px;
    }

    .schedule .mp-table th.button-status {
        width: 160px;
    }

    .schedule .mp-table th.ready-day {
        width: 220px;
    }

    .schedule .mp-table th.available-after {
        width: 90px;
    }

    .schedule .mp-table th.urgency {
        width: 90px;
    }

    .schedule .mp-table th.upcharge,
    .schedule .mp-table th.upcharge-color {
        width: 90px;
    }
}

/* anything bigger than 1080px */
@media screen and (min-width: 1921px) {
    dialog {
        min-width: 25%;
    }
}