:root {
    --my-bg-gray: #e9ecef8c;
    --my-bg-green: #6495ed;
    --placeholder-color: #75787a94;
    --placeholder-size: 12pt;
    --placeholder-style: italic;
    --placeholder-weight: bold;
    --placeholder-align: center;
    --placeholder-font: Arial;
    --text-mute-color: #6c757d;
    --page-header-background: transparent;
    --page-header-font-family: Arial;
    --page-header-color: #ff9500;
    --page-header-font-weight: bold;
    --page-header-font-style: normal;
    --page-header-text-align: center;
    --page-header-border-color: transparent;
    --page-header-border-style: solid;
    --page-header-border-width: 1px;
    --page-header-font-size: 16px;
    --page-header-padding-top: 10px;
    --page-header-padding-bottom: 10px;
    --page-header-padding-left: 10px;
    --page-header-padding-right: 10px;
    --page-header-margin-top: 10px;
    --page-header-margin-bottom: 10px;
    --page-header-margin-left: 10px;
    --page-header-margin-right: 10px;
    --service-container-background-color: transparent;
    --service-container-border-width: 0px;
    --service-container-border-color: #ffffff;
    --service-container-padding-left: 0;
    --service-container-padding-right: 0;
    --service-container-padding-top: 0;
    --service-container-padding-bottom: 0;
    --service-container-margin-left: 0;
    --service-container-margin-right: 0;
    --service-container-margin-top: 0;
    --service-container-margin-bottom: 0;
    --service-container-active-background-color: transparent;
    --service-container-active-border-width: 0px;
    --service-container-active-border-color: #ffffff;
    --service-container-active-padding-left: 0;
    --service-container-active-padding-right: 0;
    --service-container-active-padding-top: 0;
    --service-container-active-padding-bottom: 0;
    --service-container-active-margin-left: 0;
    --service-container-active-margin-right: 0;
    --service-container-active-margin-top: 0;
    --service-container-active-margin-bottom: 0;
    --service-name-background-color: transparent;
    --service-name-border-width: 0;
    --service-name-border-color: #ffffff;
    --service-name-color: #000000;
    --service-name-font-family: Arial;
    --service-name-font-size: 16px;
    --service-name-font-weight: normal;
    --service-name-font-style: normal;
    --service-name-text-align: center;
    --service-name-padding-left: 0;
    --service-name-padding-right: 0;
    --service-name-padding-top: 0;
    --service-name-padding-bottom: 0;
    --service-name-margin-left: 0;
    --service-name-margin-right: 0;
    --service-name-margin-top: 0;
    --service-name-margin-bottom: 0;
    --service-name-active-background-color: transparent;
    --service-name-active-border-width: 0;
    --service-name-active-border-color: #ffffff;
    --service-name-active-color: #000000;
    --service-name-active-font-family: Arial;
    --service-name-active-font-size: 16px;
    --service-name-active-font-weight: normal;
    --service-name-active-font-style: normal;
    --service-name-active-text-align: center;
    --service-name-active-padding-left: 0;
    --service-name-active-padding-right: 0;
    --service-name-active-padding-top: 0;
    --service-name-active-padding-bottom: 0;
    --service-name-active-margin-left: 0;
    --service-name-active-margin-right: 0;
    --service-name-active-margin-top: 0;
    --service-name-active-margin-bottom: 0;
    /*===*/
    --service-waiting-q-text-background-color: transparent;
    --service-waiting-q-text-border-width: 0;
    --service-waiting-q-text-border-color: #ffffff;
    --service-waiting-q-text-color: #000000;
    --service-waiting-q-text-font-family: Arial;
    --service-waiting-q-text-font-size: 16px;
    --service-waiting-q-text-font-weight: normal;
    --service-waiting-q-text-font-style: normal;
    --service-waiting-q-text-text-align: center;
    --service-waiting-q-text-padding-left: 0;
    --service-waiting-q-text-padding-right: 0;
    --service-waiting-q-text-padding-top: 0;
    --service-waiting-q-text-padding-bottom: 0;
    --service-waiting-q-text-margin-left: 0;
    --service-waiting-q-text-margin-right: 0;
    --service-waiting-q-text-margin-top: 0;
    --service-waiting-q-text-margin-bottom: 0;
    --service-waiting-q-text-active-background-color: transparent;
    --service-waiting-q-text-active-border-width: 0;
    --service-waiting-q-text-active-border-color: #ffffff;
    --service-waiting-q-text-active-color: #000000;
    --service-waiting-q-text-active-font-family: Arial;
    --service-waiting-q-text-active-font-size: 16px;
    --service-waiting-q-text-active-font-weight: normal;
    --service-waiting-q-text-active-font-style: normal;
    --service-waiting-q-text-active-text-align: center;
    --service-waiting-q-text-active-padding-left: 0;
    --service-waiting-q-text-active-padding-right: 0;
    --service-waiting-q-text-active-padding-top: 0;
    --service-waiting-q-text-active-padding-bottom: 0;
    --service-waiting-q-text-active-margin-left: 0;
    --service-waiting-q-text-active-margin-right: 0;
    --service-waiting-q-text-active-margin-top: 0;
    --service-waiting-q-text-active-margin-bottom: 0;
    /*===*/
    --service-waiting-q-no-background-color: transparent;
    --service-waiting-q-no-border-width: 0;
    --service-waiting-q-no-border-color: #ffffff;
    --service-waiting-q-no-color: #000000;
    --service-waiting-q-no-font-family: Arial;
    --service-waiting-q-no-font-size: 16px;
    --service-waiting-q-no-font-weight: normal;
    --service-waiting-q-no-font-style: normal;
    --service-waiting-q-no-text-align: center;
    --service-waiting-q-no-padding-left: 0;
    --service-waiting-q-no-padding-right: 0;
    --service-waiting-q-no-padding-top: 0;
    --service-waiting-q-no-padding-bottom: 0;
    --service-waiting-q-no-margin-left: 0;
    --service-waiting-q-no-margin-right: 0;
    --service-waiting-q-no-margin-top: 0;
    --service-waiting-q-no-margin-bottom: 0;
    --service-waiting-q-no-active-background-color: transparent;
    --service-waiting-q-no-active-border-width: 0;
    --service-waiting-q-no-active-border-color: #ffffff;
    --service-waiting-q-no-active-color: #000000;
    --service-waiting-q-no-active-font-family: Arial;
    --service-waiting-q-no-active-font-size: 16px;
    --service-waiting-q-no-active-font-weight: normal;
    --service-waiting-q-no-active-font-style: normal;
    --service-waiting-q-no-active-text-align: center;
    --service-waiting-q-no-active-padding-left: 0;
    --service-waiting-q-no-active-padding-right: 0;
    --service-waiting-q-no-active-padding-top: 0;
    --service-waiting-q-no-active-padding-bottom: 0;
    --service-waiting-q-no-active-margin-left: 0;
    --service-waiting-q-no-active-margin-right: 0;
    --service-waiting-q-no-active-margin-top: 0;
    --service-waiting-q-no-active-margin-bottom: 0;
    /*===*/
    --service-est-waiting-time-background-color: transparent;
    --service-est-waiting-time-border-width: 0;
    --service-est-waiting-time-border-color: #ffffff;
    --service-est-waiting-time-color: #000000;
    --service-est-waiting-time-font-family: Arial;
    --service-est-waiting-time-font-size: 16px;
    --service-est-waiting-time-font-weight: normal;
    --service-est-waiting-time-font-style: normal;
    --service-est-waiting-time-text-align: center;
    --service-est-waiting-time-padding-left: 0;
    --service-est-waiting-time-padding-right: 0;
    --service-est-waiting-time-padding-top: 0;
    --service-est-waiting-time-padding-bottom: 0;
    --service-est-waiting-time-margin-left: 0;
    --service-est-waiting-time-margin-right: 0;
    --service-est-waiting-time-margin-top: 0;
    --service-est-waiting-time-margin-bottom: 0;
    --service-est-waiting-time-active-background-color: transparent;
    --service-est-waiting-time-active-border-width: 0;
    --service-est-waiting-time-active-border-color: #ffffff;
    --service-est-waiting-time-active-color: #000000;
    --service-est-waiting-time-active-font-family: Arial;
    --service-est-waiting-time-active-font-size: 16px;
    --service-est-waiting-time-active-font-weight: normal;
    --service-est-waiting-time-active-font-style: normal;
    --service-est-waiting-time-active-text-align: center;
    --service-est-waiting-time-active-padding-left: 0;
    --service-est-waiting-time-active-padding-right: 0;
    --service-est-waiting-time-active-padding-top: 0;
    --service-est-waiting-time-active-padding-bottom: 0;
    --service-est-waiting-time-active-margin-left: 0;
    --service-est-waiting-time-active-margin-right: 0;
    --service-est-waiting-time-active-margin-top: 0;
    --service-est-waiting-time-active-margin-bottom: 0;
    /*===*/
    --service-est-waiting-time-no-background-color: transparent;
    --service-est-waiting-time-no-border-width: 0;
    --service-est-waiting-time-no-border-color: #ffffff;
    --service-est-waiting-time-no-color: #000000;
    --service-est-waiting-time-no-font-family: Arial;
    --service-est-waiting-time-no-font-size: 16px;
    --service-est-waiting-time-no-font-weight: normal;
    --service-est-waiting-time-no-font-style: normal;
    --service-est-waiting-time-no-text-align: center;
    --service-est-waiting-time-no-padding-left: 0;
    --service-est-waiting-time-no-padding-right: 0;
    --service-est-waiting-time-no-padding-top: 0;
    --service-est-waiting-time-no-padding-bottom: 0;
    --service-est-waiting-time-no-margin-left: 0;
    --service-est-waiting-time-no-margin-right: 0;
    --service-est-waiting-time-no-margin-top: 0;
    --service-est-waiting-time-no-margin-bottom: 0;
    --service-est-waiting-time-no-active-background-color: transparent;
    --service-est-waiting-time-no-active-border-width: 0;
    --service-est-waiting-time-no-active-border-color: #ffffff;
    --service-est-waiting-time-no-active-color: #000000;
    --service-est-waiting-time-no-active-font-family: Arial;
    --service-est-waiting-time-no-active-font-size: 16px;
    --service-est-waiting-time-no-active-font-weight: normal;
    --service-est-waiting-time-no-active-font-style: normal;
    --service-est-waiting-time-no-active-text-align: center;
    --service-est-waiting-time-no-active-padding-left: 0;
    --service-est-waiting-time-no-active-padding-right: 0;
    --service-est-waiting-time-no-active-padding-top: 0;
    --service-est-waiting-time-no-active-padding-bottom: 0;
    --service-est-waiting-time-no-active-margin-left: 0;
    --service-est-waiting-time-no-active-margin-right: 0;
    --service-est-waiting-time-no-active-margin-top: 0;
    --service-est-waiting-time-no-active-margin-bottom: 0;
    --login-input-background: white;
    --login-input-border-width: 1px;
    --login-input-border-color: black;
    --login-input-color: black;
    --login-input-margin-top: 0;
    --login-input-margin-bottom: 0;
    --login-input-margin-left: 0;
    --login-input-margin-right: 0;
    --login-input-font: "Arial";
    --login-input-text-align: center;
    --login-input-font-weight: normal;
    --login-input-font-style: normal;
    --login-input-font-size: 16px;
    --login-input-phone-padding-left: 0;
}

.input-area {
    font-family: var(--login-input-font);
    font-size: var(--login-input-font-size);
    font-weight: var(--login-input-font-weight);
    font-style: var(--login-input-font-style);
    margin-top: 5px;
    margin-bottom: 5px;
}

.form-control {
    font-family: var(--login-input-font);
    font-size: var(--login-input-font-size);
    font-weight: var(--login-input-font-weight);
    font-style: var(--login-input-font-style);
}

/*.login-input::placeholder {
    color: var(--placeholder-color) !important;
    font-size: var(--placeholder-size) !important;
    font-style: var(--placeholder-style) !important;
    font-weight: var(--placeholder-weight) !important;
    text-align: var(--placeholder-align) !important;
    font-family: var(--placeholder-font) !important;
}*/

.login-input {
    width: 100%;
    background: var(--login-input-background);
    border-radius: .25rem;
    border-style: solid;
    border-width: var(--login-input-border-width);
    border-color: var(--login-input-border-color);
    color: var(--login-input-color);
    margin-top: var(--login-input-margin-top);
    margin-bottom: var(--login-input-margin-bottom);
    margin-left: var(--login-input-margin-left);
    margin-right: var(--login-input-margin-right);
    text-align: var(--login-input-text-align);
    height: calc(1.5em + .75rem + 1px);
}

.invalid-feedback {
    text-align: var(--login-input-text-align);
}

.service-container {
    border-style: solid;
    background-color: var(--service-container-background-color);
    border-width: var(--service-container-border-width);
    border-color: var(--service-container-border-color);
    padding-left: var(--service-container-padding-left);
    padding-right: var(--service-container-padding-right);
    padding-top: var(--service-container-padding-top);
    padding-bottom: var(--service-container-padding-bottom);
    margin-left: var(--service-container-margin-left);
    margin-right: var(--service-container-margin-right);
    margin-top: var(--service-container-margin-top);
    margin-bottom: var(--service-container-margin-bottom);
}

    .service-container.active {
        border-style: solid;
        background-color: var(--service-container-active-background-color);
        border-width: var(--service-container-active-border-width);
        border-color: var(--service-container-active-border-color);
        padding-left: var(--service-container-active-padding-left);
        padding-right: var(--service-container-active-padding-right);
        padding-top: var(--service-container-active-padding-top);
        padding-bottom: var(--service-container-active-padding-bottom);
        margin-left: var(--service-container-active-margin-left);
        margin-right: var(--service-container-active-margin-right);
        margin-top: var(--service-container-active-margin-top);
        margin-bottom: var(--service-container-active-margin-bottom);
    }

    .service-container .service-name {
        border-style: solid;
        background-color: var(--service-name-background-color);
        border-width: var(--service-name-border-width);
        border-color: var(--service-name-border-color);
        color: var(--service-name-color);
        font-family: var(--service-name-font-family);
        font-size: var(--service-name-font-size);
        font-weight: var(--service-name-font-weight);
        font-style: var(--service-name-font-style);
        text-align: var(--service-name-text-align);
        padding-left: var(--service-name-padding-left);
        padding-right: var(--service-name-padding-right);
        padding-top: var(--service-name-padding-top);
        padding-bottom: var(--service-name-padding-bottom);
        margin-left: var(--service-name-margin-left);
        margin-right: var(--service-name-margin-right);
        margin-top: var(--service-name-margin-top);
        margin-bottom: var(--service-name-margin-bottom);
    }

    .service-container.active .service-name {
        border-style: solid;
        background-color: var(--service-name-active-background-color);
        border-width: var(--service-name-active-border-width);
        border-color: var(--service-name-active-border-color);
        color: var(--service-name-active-color);
        font-family: var(--service-name-active-font-family);
        font-size: var(--service-name-active-font-size);
        font-weight: var(--service-name-active-font-weight);
        font-style: var(--service-name-active-font-style);
        text-align: var(--service-name-active-text-align);
        padding-left: var(--service-name-active-padding-left);
        padding-right: var(--service-name-active-padding-right);
        padding-top: var(--service-name-active-padding-top);
        padding-bottom: var(--service-name-active-padding-bottom);
        margin-left: var(--service-name-active-margin-left);
        margin-right: var(--service-name-active-margin-right);
        margin-top: var(--service-name-active-margin-top);
        margin-bottom: var(--service-name-active-margin-bottom);
    }

    .service-container .waiting-q-text {
        border-style: solid;
        background-color: var(--service-waiting-q-text-background-color);
        border-width: var(--service-waiting-q-text-border-width);
        border-color: var(--service-waiting-q-text-border-color);
        color: var(--service-waiting-q-text-color);
        font-family: var(--service-waiting-q-text-font-family);
        font-size: var(--service-waiting-q-text-font-size);
        font-weight: var(--service-waiting-q-text-font-weight);
        font-style: var(--service-waiting-q-text-font-style);
        text-align: var(--service-waiting-q-text-text-align);
        padding-left: var(--service-waiting-q-text-padding-left);
        padding-right: var(--service-waiting-q-text-padding-right);
        padding-top: var(--service-waiting-q-text-padding-top);
        padding-bottom: var(--service-waiting-q-text-padding-bottom);
        margin-left: var(--service-waiting-q-text-margin-left);
        margin-right: var(--service-waiting-q-text-margin-right);
        margin-top: var(--service-waiting-q-text-margin-top);
        margin-bottom: var(--service-waiting-q-text-margin-bottom);
    }

    .service-container.active .waiting-q-text {
        border-style: solid;
        background-color: var(--service-waiting-q-text-active-background-color);
        border-width: var(--service-waiting-q-text-active-border-width);
        border-color: var(--service-waiting-q-text-active-border-color);
        color: var(--service-waiting-q-text-active-color);
        font-family: var(--service-waiting-q-text-active-font-family);
        font-size: var(--service-waiting-q-text-active-font-size);
        font-weight: var(--service-waiting-q-text-active-font-weight);
        font-style: var(--service-waiting-q-text-active-font-style);
        text-align: var(--service-waiting-q-text-active-text-align);
        padding-left: var(--service-waiting-q-text-active-padding-left);
        padding-right: var(--service-waiting-q-text-active-padding-right);
        padding-top: var(--service-waiting-q-text-active-padding-top);
        padding-bottom: var(--service-waiting-q-text-active-padding-bottom);
        margin-left: var(--service-waiting-q-text-active-margin-left);
        margin-right: var(--service-waiting-q-text-active-margin-right);
        margin-top: var(--service-waiting-q-text-active-margin-top);
        margin-bottom: var(--service-waiting-q-text-active-margin-bottom);
    }

    .service-container .waiting-q-no {
        border-style: solid;
        background-color: var(--service-waiting-q-no-background-color);
        border-width: var(--service-waiting-q-no-border-width);
        border-color: var(--service-waiting-q-no-border-color);
        color: var(--service-waiting-q-no-color);
        font-family: var(--service-waiting-q-no-font-family);
        font-size: var(--service-waiting-q-no-font-size);
        font-weight: var(--service-waiting-q-no-font-weight);
        font-style: var(--service-waiting-q-no-font-style);
        text-align: var(--service-waiting-q-no-text-align);
        padding-left: var(--service-waiting-q-no-padding-left);
        padding-right: var(--service-waiting-q-no-padding-right);
        padding-top: var(--service-waiting-q-no-padding-top);
        padding-bottom: var(--service-waiting-q-no-padding-bottom);
        margin-left: var(--service-waiting-q-no-margin-left);
        margin-right: var(--service-waiting-q-no-margin-right);
        margin-top: var(--service-waiting-q-no-margin-top);
        margin-bottom: var(--service-waiting-q-no-margin-bottom);
    }

    .service-container.active .waiting-q-no {
        border-style: solid;
        background-color: var(--service-waiting-q-no-active-background-color);
        border-width: var(--service-waiting-q-no-active-border-width);
        border-color: var(--service-waiting-q-no-active-border-color);
        color: var(--service-waiting-q-no-active-color);
        font-family: var(--service-waiting-q-no-active-font-family);
        font-size: var(--service-waiting-q-no-active-font-size);
        font-weight: var(--service-waiting-q-no-active-font-weight);
        font-style: var(--service-waiting-q-no-active-font-style);
        text-align: var(--service-waiting-q-no-active-text-align);
        padding-left: var(--service-waiting-q-no-active-padding-left);
        padding-right: var(--service-waiting-q-no-active-padding-right);
        padding-top: var(--service-waiting-q-no-active-padding-top);
        padding-bottom: var(--service-waiting-q-no-active-padding-bottom);
        margin-left: var(--service-waiting-q-no-active-margin-left);
        margin-right: var(--service-waiting-q-no-active-margin-right);
        margin-top: var(--service-waiting-q-no-active-margin-top);
        margin-bottom: var(--service-waiting-q-no-active-margin-bottom);
    }

    .service-container .est-waiting-time {
        border-style: solid;
        background-color: var(--service-est-waiting-time-background-color);
        border-width: var(--service-est-waiting-time-border-width);
        border-color: var(--service-est-waiting-time-border-color);
        color: var(--service-est-waiting-time-color);
        font-family: var(--service-est-waiting-time-font-family);
        font-size: var(--service-est-waiting-time-font-size);
        font-weight: var(--service-est-waiting-time-font-weight);
        font-style: var(--service-est-waiting-time-font-style);
        text-align: var(--service-est-waiting-time-text-align);
        padding-left: var(--service-est-waiting-time-padding-left);
        padding-right: var(--service-est-waiting-time-padding-right);
        padding-top: var(--service-est-waiting-time-padding-top);
        padding-bottom: var(--service-est-waiting-time-padding-bottom);
        margin-left: var(--service-est-waiting-time-margin-left);
        margin-right: var(--service-est-waiting-time-margin-right);
        margin-top: var(--service-est-waiting-time-margin-top);
        margin-bottom: var(--service-est-waiting-time-margin-bottom);
    }

    .service-container.active .est-waiting-time {
        border-style: solid;
        background-color: var(--service-est-waiting-time-active-background-color);
        border-width: var(--service-est-waiting-time-active-border-width);
        border-color: var(--service-est-waiting-time-active-border-color);
        color: var(--service-est-waiting-time-active-color);
        font-family: var(--service-est-waiting-time-active-font-family);
        font-size: var(--service-est-waiting-time-active-font-size);
        font-weight: var(--service-est-waiting-time-active-font-weight);
        font-style: var(--service-est-waiting-time-active-font-style);
        text-align: var(--service-est-waiting-time-active-text-align);
        padding-left: var(--service-est-waiting-time-active-padding-left);
        padding-right: var(--service-est-waiting-time-active-padding-right);
        padding-top: var(--service-est-waiting-time-active-padding-top);
        padding-bottom: var(--service-est-waiting-time-active-padding-bottom);
        margin-left: var(--service-est-waiting-time-active-margin-left);
        margin-right: var(--service-est-waiting-time-active-margin-right);
        margin-top: var(--service-est-waiting-time-active-margin-top);
        margin-bottom: var(--service-est-waiting-time-active-margin-bottom);
    }

    .service-container .est-waiting-time-no {
        border-style: solid;
        background-color: var(--service-est-waiting-time-no-background-color);
        border-width: var(--service-est-waiting-time-no-border-width);
        border-color: var(--service-est-waiting-time-no-border-color);
        color: var(--service-est-waiting-time-no-color);
        font-family: var(--service-est-waiting-time-no-font-family);
        font-size: var(--service-est-waiting-time-no-font-size);
        font-weight: var(--service-est-waiting-time-no-font-weight);
        font-style: var(--service-est-waiting-time-no-font-style);
        text-align: var(--service-est-waiting-time-no-text-align);
        padding-left: var(--service-est-waiting-time-no-padding-left);
        padding-right: var(--service-est-waiting-time-no-padding-right);
        padding-top: var(--service-est-waiting-time-no-padding-top);
        padding-bottom: var(--service-est-waiting-time-no-padding-bottom);
        margin-left: var(--service-est-waiting-time-no-margin-left);
        margin-right: var(--service-est-waiting-time-no-margin-right);
        margin-top: var(--service-est-waiting-time-no-margin-top);
        margin-bottom: var(--service-est-waiting-time-no-margin-bottom);
    }

    .service-container.active .est-waiting-time-no {
        border-style: solid;
        background-color: var(--service-est-waiting-time-no-active-background-color);
        border-width: var(--service-est-waiting-time-no-active-border-width);
        border-color: var(--service-est-waiting-time-no-active-border-color);
        color: var(--service-est-waiting-time-no-active-color);
        font-family: var(--service-est-waiting-no-time-active-font-family);
        font-size: var(--service-est-waiting-time-no-active-font-size);
        font-weight: var(--service-est-waiting-time-no-active-font-weight);
        font-style: var(--service-est-waiting-time-no-active-font-style);
        text-align: var(--service-est-waiting-time-no-active-text-align);
        padding-left: var(--service-est-waiting-time-no-active-padding-left);
        padding-right: var(--service-est-waiting-time-no-active-padding-right);
        padding-top: var(--service-est-waiting-time-no-active-padding-top);
        padding-bottom: var(--service-est-waiting-time-no-active-padding-bottom);
        margin-left: var(--service-est-waiting-time-no-active-margin-left);
        margin-right: var(--service-est-waiting-time-no-active-margin-right);
        margin-top: var(--service-est-waiting-time-no-active-margin-top);
        margin-bottom: var(--service-est-waiting-time-no-active-margin-bottom);
    }


.hide-on-empty:empty {
    display: none
}

.hide-on-empty:not(:empty) {
    display: block
}

.form-group {
    min-width: 500px !important;
}

.toast {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5000;
    font-size: 12pt;
}

.toast-icon {
    width: 20px;
    height: 20px;
}

#modalViewMode .modal-dialog {
    max-width: 760px !important;
}

    #modalViewMode .modal-dialog button {
        min-height: 110px !important;
    }

#mtix-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    background-color: lightgray;
}

.setting {
    background: white;
    width: 800px;
    min-height: 50vh;
    max-height: 95vh;
    border-radius: 5px;
    box-shadow: -2px 2px 10px gray;
    overflow: auto;
    display: flex;
    padding: 50px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.completed-message, .feedback-header {
    border-radius: 5px;
}

.setting-tab {
    margin-top: 20px;
    width: 100%;
}

.setting-input {
    display: flex;
    margin-top: 30px;
    margin-bottom: 30px;
    flex-wrap: wrap;
    justify-content: center;
    overflow: auto;
    max-height: 45vh;
}

.form-group {
    min-width: 350px;
}

.setting-footer {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-top: 10px;
}

.flex-end {
    justify-content: flex-end;
}

    .flex-end .btn {
        margin-left: 5px;
    }

.setting-title {
    font-size: 16pt;
    align-self: center;
    font-weight: bold;
}

.tab-content {
    width: 100%;
    min-height: 30vh;
    border: 1px solid var(--primary);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

/*.previewer {
    overflow: auto;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    min-height: 100vh;
}*/

.page-toggle {
    display: flex;
    align-items: flex-start;
}
/*
.btn {
    min-width: 100px;
}*/
.btn-feedback-option {
    width: 20%;
    /*height: 250px;*/
}

    .btn-feedback-option .card-body {
        padding-left: 0;
        padding-right: 0;
    }


@media only screen and (max-width: 600px) {
    .btn-feedback-option {
        width: 20%;
        /*height: 140px;*/
    }

        .btn-feedback-option p {
            word-wrap: initial
        }
}

.setting-tab button {
    border-radius: 0.25rem 0.25rem 0rem 0rem;
}

th, td {
    text-align: center;
    vertical-align: middle !important;
}

    th:nth-child(1), td:nth-child(1) {
        width: 65px;
    }

    th:nth-child(4), td:nth-child(4) {
        width: 110px;
    }

.logo {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16pt;
    border-radius: 5px;
}

.logo-preview {
    max-width: 100%;
    max-height: 100px;
}

/*.page-container {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: stretch;
    width: 90%;
    min-height: 100%;
}*/

.page-container .validator {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: stretch;
    padding: 10px;
    border-radius: 5px;
    background-color: var(--my-bg-gray);
}

.page-header {
    /* margin-top: 20px;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 14pt;*/
    text-transform: uppercase;
    background: var(--page-header-background);
    font-family: var(--page-header-font-family);
    font-weight: var(--page-header-font-weight);
    font-style: var(--page-header-font-style);
    font-size: var(--page-header-font-size);
    color: var(--page-header-color);
    text-align: var(--page-header-text-align);
    border-style: solid;
    border-width: var(--page-header-border-width);
    border-color: var(--page-header-border-color);
    padding-top: var(--page-header-padding-top);
    padding-bottom: var(--page-header-padding-bottom);
    padding-left: var(--page-header-padding-left);
    padding-right: var(--page-header-padding-right);
    margin-top: var(--page-header-margin-top);
    margin-bottom: var(--page-header-margin-bottom);
    margin-left: var(--page-header-margin-left);
    margin-right: var(--page-header-margin-right);
}

/*.page-container * {
    text-align: center;
}*/

.phone-input {
    margin-top: 5px;
    margin-bottom: 10px;
}

.input-login-name {
    display: none;
}

.validator .phone-label {
    font-weight: bold;
    color: var(--text-mute-color);
}

/*.services-header {
    background: var(--primary);
    color: white;
    border-radius: 5px;
    padding: 10px;
    font-weight: bold;
    margin-bottom: 5px;
    box-shadow: 0px 0px 3px #9da2ab;
}*/

.service-selection {
    display: flex;
    justify-content: start;
    align-items: center;
    box-shadow: -1px 1px 2px #9da2ab;
    border-radius: 5px;
    /*background: var(--my-bg-gray);*/
    cursor: pointer;
    margin-bottom: 5px;
    padding: 10px;
    transition: box-shadow 0.5s;
    user-select: none;
}

.info-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    padding: 10px;
    border-radius: 5px;
    background-color: var(--my-bg-gray);
    margin-bottom: 5px;
    color: var(--text-mute-color);
}

.current-queue-container {
    align-items: start;
}

.current-queue {
    display: flex;
    align-items: center;
}

.current-queue-num {
    padding-left: 5px;
}

.btn-postpone-queue {
    margin-top: 15px;
}

/*.service-selection.selected {
    color: white;
    background: var(--primary);
}

.service-selection:hover {
    box-shadow: 0px 0px 2px #9da2ab;
}*/

/*.service-selection > img {
    height: 40px;
}*/
.service-container img {
    height: 40px;
}

.service-left {
    display: flex;
    align-items: center;
}

.service-seleted-ordernal-no {
    font-size: 2.0rem;
}

.service-container .service-description {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    font-size: 10pt;
    padding-left: 15px;
}

.service-selection .service-description .service-name {
    font-weight: bold;
}

.btn-service-proceed {
    margin-top: 10px;
}

.form-group-title {
    font-weight: bold;
    font-size: 12pt;
    text-align: center;
    min-width: 350px;
}

.logo-selector, .logo-selector-item {
    cursor: pointer;
    margin-top: 20px;
}

.logo-selector-body {
    min-height: 50vh;
    max-height: 60vh;
    padding-bottom: 50px;
}


/*Remove IOS video controls*/
/* This used to work for the parent element of button divs */
/* But it does not work with newer browsers, the below doesn't hide the play button parent div */

*::-webkit-media-controls-panel {
    display: none !important;
    -webkit-appearance: none;
}

/* Old shadow dom for play button */

*::-webkit-media-controls-play-button {
    display: none !important;
    -webkit-appearance: none;
}

/* New shadow dom for play button */

/* This one works! */

*::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none;
}

.feedback-question {
    text-align: left;
    font-weight: bold;
}

.feedback-question-container {
    margin-top: 10px;
    padding: 10px;
    background-color: aliceblue;
    border-radius: 5px;
}

.feedback-answer-description {
    text-align: left;
}

.feedback-answer {
    margin-top: 10px;
}

.feedback-grid-answer-item {
    width: 140px;
    height: 122px;
}

.feedback-list-answer-item, .feedback-grid-answer-item {
    background-color: #f8f9fa;
    box-shadow: -1px 1px 3px gray;
    border-color: gray;
    padding: 10px;
    border-radius: 5px;
    min-width: 50px;
    margin-right: 5px;
}

    .feedback-grid-answer-item img {
        height: 50px;
    }

[data-hyperlink] {
    cursor: pointer;
}

.question-title {
    text-align: left;
}

.btn-group-toggle .btn {
    padding: 0;
}

.feedback-checkbox:checked + .card {
    border-style: solid;
    border-width: 2px;
    border-color: green;
}

.iti {
    width: 100%;
}

.login-input-phone.text-center {
    padding: .375rem .75rem !important;
}

.login-input-phone {
    /*width: 100%;
    height: calc(1.5em + .75rem + 0px);
    border: none;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;*/
}

    .login-input-phone:focus {
        outline: 0;
        box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
    }

.login-container {
    background-color: #e8e8e8;
}

.login-header {
    font-size: 16px;
    font-weight: 500;
}

.qs-current-queue-text {
    color: #000000;
    margin-bottom: 10px;
    margin-top: 10px;
}

.qs-current-queue-container {
    color: #000000;
}

.qs-current-queue-no {
    font-size: 3.0rem;
    font-weight: bold;
    color: #000000;
}

.qs-free-text-message {
    margin: 15px 0;
    font-weight: bold;
    color: red !important;
}