:root{

    --bs-body-color: #6c757d;
    --bs-body-color-rgb: 108, 117, 125;
    --bs-body-bg: #f7f9fc;
    --bs-body-bg-rgb: 247, 249, 252;

    --bs-link-color-rgb: 81, 162, 185;
    --bs-link-hover-color-rgb: 43, 104, 156;

    --mb-backdrop-zindex: 1050;
    --mb-backdrop-bg: #000;
    --mb-backdrop-opacity: 0.5;

    --mb-over-backdrop-zindex: 3060;

    --mb-font-size: 16px;

    --mb-image-splash: url('/assets/Driver/Img/Splash.jpg');

    --mb-header-height: 54px;
    --mb-toolbar-height: calc(calc(39px + .5rem) + .5rem);
}
/* Document */

html, body {
    width: 100%;
    height: 100%;
    font-size: var(--mb-font-size);
    background-color: var(--bs-gray-400);
    overflow: hidden;
}

html {
    touch-action: pan-x pan-y;
}

/*

Colors

*/

.text-brand {
  color: rgba(81, 162, 185, 1) !important;
}

/*

Backgrouns

*/

.tpl-input-background {
    background-color: #e9eef6 !important;
}

.tpl-splash-background {
    background-image: var(--mb-image-splash);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/*

ICONS

*/

.modal[id$="-help"] i[data-icon] {
    font-size: calc(1.325rem + .9vw) !important;
}

.modal[id$="-help"] i[data-icon="TransferCompleted"] {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-success-rgb),var(--bs-text-opacity)) !important;
}

.modal[id$="-help"] i[data-icon="TransferWithIssue"] {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-danger-rgb),var(--bs-text-opacity)) !important;
}

.calendar-event i[data-icon="TransferWithIssue"] {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-white-rgb),var(--bs-text-opacity)) !important;
}

/* Brand font */

.kalam-light {
    font-family: "Kalam", cursive;
    font-weight: 300;
    font-style: normal;
}

.kalam-regular {
    font-family: "Kalam", cursive;
    font-weight: 400;
    font-style: normal;
}

.kalam-bold {
    font-family: "Kalam", cursive;
    font-weight: 700;
    font-style: normal;
}

/* Accordion */

.accordion {
    --bs-accordion-bg: var(--bs-white);
}

/* Form controls */

.form-text {
    color: rgba(33, 37, 41, 0.3);
}

.form-control {
    background-color: var(--bs-white);
}

.form-control-lg {
    font-size: 1rem;
}


/*

Cursors

*/

.cursor-pointer {
    cursor: pointer;
}

/*

Links

*/

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

/*

Shadows

*/

a:focus,
button:focus,
input:focus,
textarea:focus,
.form-control:focus,
.custom-control-input:focus,
a:checked,
button:checked,
input:checked,
textarea:checked,
.form-control:checked,
.custom-control-input:checked,
a:after,
button:after,
input:after,
textarea:after,
.form-control:after,
.custom-control-input:after,
a:before,
button:before,
input:before,
textarea:before,
.form-control:before,
.custom-control-input:before,
.custom-control-input:focus~.custom-control-label::before,
.form-select,
.form-check-input:focus {
    outline: none !important;
    box-shadow: none !important;
}
.modal {
    z-index: 2000;
}

/* SUB-HEADER NAVS */

.tpl-nav-pills {
    height: 100%;
}

.tpl-nav-pills .nav-link {
    border-radius: 0;
    width: 100%;
    color: #fff;
    height: 100%;
    padding: 1rem 0;
    text-align: center;
    text-transform: uppercase;
}

.tpl-nav-pills .nav-link.active,
.tpl-nav-pills .show>.nav-link {
    background-color: var(--bs-primary);
    color: #fff;
}

.tpl-nav-pills .nav-link.disabled,
.tpl-nav-pills .nav-link:disabled {
    pointer-events: none;
    opacity: .65;
}

/* HEADING */

.tpl-heading {
    text-transform: uppercase;
    font-weight: bold;
    color: var(--bs-primary);
    margin-bottom: .5rem;
}

/* DROPDOWN */

.tpl-dropdown.no-caret:after {
    content: none;
}


/* TABS */

.tpl-tab-content {
    height: 100%;
}

.tpl-tab-content>.tab-pane {
    height: 100%;
}

.tpl-tab-content>.tab-pane>header {
    background-color: transparent;
}

.tpl-tab-content>.tab-pane>main {
    overflow: auto;
    flex: 1 1 auto;
}

.tpl-tab-content>.tab-pane>footer {
    background-color: transparent;
}

.tpl-tab-content>.active {
    display: flex;
    flex-direction: column;
}

/* CHECKBOX MENU */

.checkbox-menu {
    max-height: 60vh;
    overflow: scroll;
}

/* 

Template Alerts

@author Salustiano Silva <salustiano.silva@magicbrain.pt>
@since 1.0.0 | 2025-05-05 | Salustiano Silva | First time this was introduced.

*/

.tpl-alert {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 5000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.tpl-alert > .alert {
    width: 400px;
    max-width: 80%;
    background-color: var(--bs-white);
}/* 

Blink

Blink effect to elements that get this class assigned.

@author Salustiano Silva <salustiano.silva@magicbrain.pt>
@since 1.0.0 | 2025-05-05 | Salustiano Silva | First time this was introduced.

*/

.blink {
    animation: blinker 1s step-start infinite;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}
/* 

Template Header

@author Salustiano Silva <salustiano.silva@magicbrain.pt>
@since 1.0.0 | 2025-05-05 | Salustiano Silva | First time this was introduced.

*/

.tpl-header {
    background-color: var(--bs-gray-400);
    transition: all 0.5s ease;
}
/* 

Template Images

Set of utility classes for images.

@author Salustiano Silva <salustiano.silva@magicbrain.pt>
@since 1.0.0 | 2025-05-05 | Salustiano Silva | First time this was introduced.

*/

.tpl-image-mono-white {
    filter: brightness(0) invert(1);
}/* 

Template Modals

@author Salustiano Silva <salustiano.silva@magicbrain.pt>
@since 1.0.0 | 2025-05-05 | Salustiano Silva | First time this was introduced.

*/

.tpl-modal {
    transition: all 0.5s ease;
}

body.backdrop .tpl-modal.show:after {
    display: block;
}

.tpl-modal-body {
    display: flex;
    flex-direction: column;
}

.tpl-modal-body>header {
    background-color: transparent;
}

.tpl-modal-body>main {
    overflow: hidden auto;
    flex: 1 1 auto;
}

.tpl-modal-body>footer {
    background-color: transparent;
}

.modal:nth-of-type(even) {
    z-index: 1052 !important;
}
.modal-backdrop.show:nth-of-type(even) {
    z-index: 1051 !important;
}/* 

Template Overlay

Gives the element a position above all others with a backdrop effect. 
Useful for loading screens.

@author Salustiano Silva <salustiano.silva@magicbrain.pt>
@since 1.0.0 | 2025-05-05 | Salustiano Silva | First time this was introduced.

*/

.tpl-overlay {
    position: fixed;
    z-index: 20000;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.8);
}/* 

Template Screens

Each screen is a application module and gets styled as a page or as a modal (floating page).

@author Salustiano Silva <salustiano.silva@magicbrain.pt>
@since 1.0.0 | 2025-05-05 | Salustiano Silva | First time this was introduced.

*/

.tpl-screen {
    position: absolute;
    top: var(--mb-header-height);
    width: 100%;
    height: calc(100dvh - var(--mb-header-height));
    display: flex;
    flex-direction: column;
    transition: all 0.5s ease;
}

.tpl-screen:after {
    content: " ";
    display: none;
    position: absolute;
    top: 41px;
    left: 0;
    z-index: var(--mb-backdrop-zindex);
    width: 100vw;
    height: 100dvh;
    background-color: var(--mb-backdrop-bg);
    opacity: var(--mb-backdrop-opacity);
}

body.backdrop .tpl-screen:not(.d-none):after {
    display: block;
}

.tpl-screen.no-header {
    top: 0;
    height: 100dvh;
}

.tpl-screen-main {
    overflow: auto;
    flex: 1 1 auto
}

.tpl-screen-header {
    position: relative;
    z-index: 2;
}

.tpl-screen-above {
    z-index: 40000;
}

/* 

Template Screen help

Help tip present on each screen, that informs the user about the screen functionality.

@author Salustiano Silva <salustiano.silva@magicbrain.pt>
@since 1.0.0 | 2025-05-05 | Salustiano Silva | First time this was introduced.

*/

.tpl-screen[data-toolbar="show"] {
    top: calc(var(--mb-header-height) + var(--mb-toolbar-height));
    height: calc(100dvh - calc(var(--mb-header-height) + var(--mb-toolbar-height)));
}
.max-w-50 {
    max-width: 50% !important;
}/* 

Module: Calendar

Styles for the calendar screen.

@author Salustiano Silva <salustiano.silva@magicbrain.pt>
@since 1.0.0 | 2025-05-05 | Salustiano Silva | First time this was introduced.

*/

.calendar-view-action:hover, 
.calendar-view-action:focus, 
.calendar-view-action:active {
    background-color: var(--bs-gray-200) !important;
}

/* 

Calendar List Item Styles

@author Salustiano Silva <salustiano.silva@magicbrain.pt>
@since 1.0.0 | 2025-12-23 | Salustiano Silva | First time this was introduced.

*/

.calendar-list-item {}

.calendar-list-item-date {
    width: 50px;
}

.calendar-list-item-content {
    width: calc(calc(100% - 50px) - 0.5rem);
}

/* 

Calendar Current Day

Styles for the current day indicator in the calendar.

@author Salustiano Silva <salustiano.silva@magicbrain.pt>
@since 1.0.0 | 2025-12-29 | Salustiano Silva | First time this was introduced.
@since 1.0.0 | 2025-12-30 | Salustiano Silva | Updated styles for better visibility.

*/

.calendar-current-day {
    background: var(--bs-primary);
    color: white;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.calendar-current-day + .calendar-current-day {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}/* 

Module: Login

Styles for the login screen.

@author Salustiano Silva <salustiano.silva@magicbrain.pt>
@since 1.0.0 | 2025-05-05 | Salustiano Silva | First time this was introduced.

*/

#login .tpl-screen-header,
#login .tpl-screen-main,
#login .tpl-screen-footer {
    --bs-bg-opacity: .5;
    background-color: rgba(var(--bs-dark-rgb),var(--bs-bg-opacity)) !important;
}

#login .tpl-screen-main form > div {
    width: 80%;
}

#login .show-help {
    background: transparent !important;
    border: 0 !important;
}

/* XS */

@media only screen and (min-width: 0px) {

}

/* SM (landscape phones, 576px and up) */

@media (min-width: 576px) {

}

/* MD (tablets, 768px and up) */

@media (min-width: 768px) {
    #login .tpl-screen-main form > div {
        width: 350px;
    }
}

/* LG (desktops, 992px and up) */

@media (min-width: 992px) {

}

/* XL (large desktops, 1200px and up) */

@media (min-width: 1200px) {

}

/* XXL (large desktops, 1400px and up) */

@media (min-width: 1400px) {

}

/* 

Module: Preload

Styles for the preload screen.

@author Salustiano Silva <salustiano.silva@magicbrain.pt>
@since 1.0.0 | 2025-05-05 | Salustiano Silva | First time this was introduced.

*/

#preload .tpl-screen-header,
#preload .tpl-screen-main,
#preload .tpl-screen-footer {
    --bs-bg-opacity: .5;
    background-color: rgba(var(--bs-dark-rgb),var(--bs-bg-opacity)) !important;
}

#preload .show-help {
    background: transparent !important;
    border: 0 !important;
}
/* 

Module: Setup

Styles for the setup screen.

@author Salustiano Silva <salustiano.silva@magicbrain.pt>
@since 1.0.0 | 2025-05-05 | Salustiano Silva | First time this was introduced.

*/

#setup .tpl-screen-header,
#setup .tpl-screen-main,
#setup .tpl-screen-footer {
    --bs-bg-opacity: .5;
    background-color: rgba(var(--bs-dark-rgb),var(--bs-bg-opacity)) !important;
}

#setup .tpl-screen-footer {
    --bs-bg-opacity: .7;
}

#setup .tpl-keypad {
    width: calc(15% - .5rem);
    margin-right: .5rem !important;
    padding-left: 0;
    padding-right: 0;
    font-size: 1.25rem !important;
    border-width: 3px !important;
    text-align: center;
    text-transform: uppercase;
}

#setup .show-help {
    background: transparent !important;
    border: 0 !important;
}

/* XS */

@media only screen and (min-width: 0px) {

}

/* SM (landscape phones, 576px and up) */

@media (min-width: 576px) {

}

/* MD (tablets, 768px and up) */

@media (min-width: 768px) {

    #setup .tpl-keypad {
        width: 70px;
        margin-right: .5rem !important;
        font-size: 2rem !important;
        border-width: 4px !important;
    }
}

/* LG (desktops, 992px and up) */

@media (min-width: 992px) {

}

/* XL (large desktops, 1200px and up) */

@media (min-width: 1200px) {

}

/* XXL (large desktops, 1400px and up) */

@media (min-width: 1400px) {

}
/* 

Module: Splash

Styles for the splash screen.

@author Salustiano Silva <salustiano.silva@magicbrain.pt>
@since 1.0.0 | 2025-05-05 | Salustiano Silva | First time this was introduced.

*/

#splash .tpl-screen-header,
#splash .tpl-screen-main,
#splash .tpl-screen-footer {
    --bs-bg-opacity: .5;
    background-color: rgba(var(--bs-dark-rgb),var(--bs-bg-opacity)) !important;
}

#splash .show-help {
    background: transparent !important;
    border: 0 !important;
}
/* 

Module: User

Styles for the user screen.

@author Salustiano Silva <salustiano.silva@magicbrain.pt>
@since 1.0.0 | 2025-05-05 | Salustiano Silva | First time this was introduced.

*/

#user {
    background-color: var(--bs-white);
}/* 

Module: Calendar Event

Styles for the calendar event modal.

@author Salustiano Silva <salustiano.silva@magicbrain.pt>
@since 1.0.0 | 2025-05-14 | Salustiano Silva | First time this was introduced.

*/

/* Space each event entry to let the elements breathe */
#calendar-event[data-edit-mode="off"] tr > th,
#calendar-event[data-edit-mode="off"] tr > td {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

/* EVENT EDIT */

#calendar-event[data-edit-mode="off"] .d-edit-mode {
    display: none;
}

#calendar-event[data-edit-mode="on"] tr.d-edit-mode {
    display: table-row;
}
#calendar-event[data-edit-mode="on"] hr.d-edit-mode {
    display: block;
}

/* EVENT ACTIONS */

#calendar-event[data-edit-mode="on"] [data-tpl="event_action"] {
    display: none;
}

/* 

EVENT ISSUE: EDIT MODE

When the user clicks the "Report Issue" button or the previous 
reported message, the issue fields are displayed and the issue 
action buttons adjusted.

*/

#calendar-event[data-report-mode="on"] #preview-transfer-issue-report,
#calendar-event[data-report-mode="on"] #open-transfer-issue-report {
    display: none;
}

#calendar-event[data-report-mode="on"] #calendar-event--event-issue {
    display: block;
}
#calendar-event[data-report-mode="on"] #transfer-issue-report-actions {
    display: flex;
}

/* 

EVENT ISSUE: PREVIEW MODE

Whe the user is previewing an issue, there's only the issue text 
preview and the action button to edit the issue.

*/

#calendar-event[data-report-mode="off"] #preview-transfer-issue-report,
#calendar-event[data-report-mode="off"] #open-transfer-issue-report {
    display: block;
}

#calendar-event[data-report-mode="off"] #calendar-event--event-issue,
#calendar-event[data-report-mode="off"] #transfer-issue-report-actions {
    display: none;
}

/* EVENT ATTACHMENTS */

#calendar-event[data-attachment-preview="off"] .d-attachment-preview {
    display: none;
}

#calendar-event[data-attachment-preview="on"] .d-attachment-preview,
#calendar-event[data-edit-mode="on"] .d-attachment-preview {
    display: table-row;
}

/* EVENT SAVE */

#calendar-event[data-edit-mode="off"] #update-transfer-data,
#calendar-event[data-report-mode="off"] #update-transfer-data {
    display: none;
}

#calendar-event[data-edit-mode="on"] #update-transfer-data {
    display: inline-block;
}
/* Connection Status */



/* Connection Status: Status */

#connection-status *[data-status="ok"] {
    --bs-bg-opacity: 1;
    color: rgba(var(--bs-white-rgb),var(--bs-text-opacity)) !important;
    --bs-text-opacity: 1;
    background-color: rgba(var(--bs-success-rgb),var(--bs-bg-opacity)) !important;
}
#connection-status *[data-status="failing"] {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-warning-rgb),var(--bs-bg-opacity)) !important;
    --bs-text-opacity: 1;
    color: rgba(var(--bs-dark-rgb),var(--bs-text-opacity)) !important;
}
#connection-status *[data-status="fail"] {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-danger-rgb),var(--bs-bg-opacity)) !important;
    --bs-text-opacity: 1;
    color: rgba(var(--bs-white-rgb),var(--bs-text-opacity)) !important;
}

/* Connection Status: Status Label */

#connection-status *[data-status="ok"] span[data-tpl="ok"],
#connection-status *[data-status="failing"] span[data-tpl="failing"],
#connection-status *[data-status="fail"] span[data-tpl="fail"] {
    display: block;
}

#connection-status *[data-status="ok"] span[data-tpl="failing"],
#connection-status *[data-status="ok"] span[data-tpl="fail"],
#connection-status *[data-status="failing"] span[data-tpl="ok"],
#connection-status *[data-status="failing"] span[data-tpl="fail"],
#connection-status *[data-status="fail"] span[data-tpl="ok"],
#connection-status *[data-status="fail"] span[data-tpl="failing"] {
    display: none;
}

/* Connection Status: Overall feedback */

.bg-dark button[data-tpl="internet-connection-signal"] {
    color: #fff;
}
/* 

Widget: Loading

Styles for the application generic loading screen animation.

@author Salustiano Silva <salustiano.silva@magicbrain.pt>
@since 1.0.0 | 2025-05-05 | Salustiano Silva | First time this was introduced.

*/

.lds-roller {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-roller div {
    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: 40px 40px;
}

.lds-roller div:after {
    content: " ";
    display: block;
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    margin: -4px 0 0 -4px;
}

.lds-roller div:nth-child(1) {
    animation-delay: -0.036s;
}

.lds-roller div:nth-child(1):after {
    top: 63px;
    left: 63px;
}

.lds-roller div:nth-child(2) {
    animation-delay: -0.072s;
}

.lds-roller div:nth-child(2):after {
    top: 68px;
    left: 56px;
}

.lds-roller div:nth-child(3) {
    animation-delay: -0.108s;
}

.lds-roller div:nth-child(3):after {
    top: 71px;
    left: 48px;
}

.lds-roller div:nth-child(4) {
    animation-delay: -0.144s;
}

.lds-roller div:nth-child(4):after {
    top: 72px;
    left: 40px;
}

.lds-roller div:nth-child(5) {
    animation-delay: -0.18s;
}

.lds-roller div:nth-child(5):after {
    top: 71px;
    left: 32px;
}

.lds-roller div:nth-child(6) {
    animation-delay: -0.216s;
}

.lds-roller div:nth-child(6):after {
    top: 68px;
    left: 24px;
}

.lds-roller div:nth-child(7) {
    animation-delay: -0.252s;
}

.lds-roller div:nth-child(7):after {
    top: 63px;
    left: 17px;
}

.lds-roller div:nth-child(8) {
    animation-delay: -0.288s;
}

.lds-roller div:nth-child(8):after {
    top: 56px;
    left: 12px;
}

@keyframes lds-roller {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ellipsis */

.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
}

.lds-ellipsis div {
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #333;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(24px, 0);
    }
}/* 

Widget: Main navigation

Styles for the application main navigation.

@author Salustiano Silva <salustiano.silva@magicbrain.pt>
@since 1.0.0 | 2025-05-05 | Salustiano Silva | First time this was introduced.

*/

#main-navigation {
    z-index: var(--mb-over-backdrop-zindex);
}