@font-face {
    font-family: "Myriad Pro Regular";
    font-style: normal;
    font-weight: normal;
    src:
        local("Myriad Pro Regular"),
        url("../fonts/MYRIADPRO-REGULAR.woff") format("woff");
}

:root {
    --background-text-color: #aaaaaa;
    --background-text-color-hsl-manipulation-H: 0;
    --background-text-color-hsl-manipulation-S: 0%;
    --background-text-color-hsl-manipulation-L: 67%;

    --primary-color-7: #154570;
}

.primary-color-1 {
    color: #2a567d !important;
}

/* #0a365d */
.primary-color-2 {
    color: #689cc1 !important;
}

.primary-color-3 {
    color: #b5c2b8 !important;
}

.primary-color-4 {
    color: #434343 !important;
}

.primary-color-5 {
    color: #f3ff31 !important;
}

.primary-color-6 {
    color: #ffd638 !important;
}

.primary-color-7 {
    color: #154570 !important;
}

.primary-color-8 {
    color: #ffffff !important;
}

.primary-border-1 {
    border-color: #2a567d !important;
}

.primary-border-2 {
    border-color: #689cc1 !important;
}

.primary-border-3 {
    border-color: #b5c2b8 !important;
}

.primary-border-4 {
    border-color: #434343 !important;
}

.secondary-color-1 {
    color: #2a567d !important;
}

.secondary-color-2 {
    color: #091b2a !important;
}

.secondary-color-3 {
    color: #b5c2b8 !important;
}

.secondary-color-4 {
    color: #434343 !important;
}

.secondary-color-5 {
    color: #f3ff31 !important;
}

.secondary-border-1 {
    border-color: #091b2a !important;
}

.secondary-border-2 {
    border-color: #b5c2b8 !important;
}

.secondary-border-3 {
    border-color: #b5c2b8 !important;
}

.secondary-border-4 {
    border-color: #f3ff31 !important;
}

.secondary-border-5 {
    border-color: #ffd638 !important;
}

.primary-background-1 {
    background-color: #2a567d !important;
}

.primary-background-2 {
    background-color: #689cc1 !important;
}

.primary-background-3 {
    background-color: #b5c2b8 !important;
}

.primary-background-4 {
    background-color: #434343 !important;
}

.primary-background-5 {
    background-color: #f3ff31 !important;
}

.primary-background-6 {
    background-color: #ffd638 !important;
}

.primary-background-7 {
    background-color: #154570 !important;
}

.secondary-background-1 {
    background-color: #091b2a !important;
}

.secondary-background-2 {
    background-color: #689cc1 !important;
}

.secondary-background-3 {
    background-color: #b5c2b8 !important;
}

.secondary-background-4 {
    background-color: #f3ff31 !important;
}

.danger-background {
    background: #f8d7da !important;
    color: #721c24 !important;
}

.btn-danger {
    background: #f8d7da !important;
    color: #721c24 !important;
    border-color: lightcoral !important;
}

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

body {
    font-family: "Myriad Pro Regular";
    font-weight: normal;
    font-size: 16px;
}

/* Make content area fill the entire browser window */
html,
.fullscreen {
    display: flex;
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
    background: #f1f1f1;
}

/* Center the content in the browser window */
.popup-container {
    margin: auto;
    text-align: center;
}

.title {
    font-size: 3rem;
}

#mainDiv {
    overflow-x: hidden;
    overflow-y: hidden;
    height: 100%;
    /*
      min-height:100%; */
    /* width:100%; if I put this in then the screen flows over right hand side off page caused by viewport meta tag */
    /* z-index: -1; */ /* Ensure div tag stays behind content; -999 might work, too. */
    width: 100%;
    top: 0px;
    left: 0px;

    /*background: #aaaaaa;*/

    -webkit-transform: translateZ(0);
}

.template-nondr {
    background-color: #0a365d;
    padding: 10px;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

.template {
    background-color: #fff;
    padding: 10px;
    width: 100%;
    height: calc(100vh - 8em);
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 5em;
    max-width: 65ch;
    margin: auto;
}

.box-sizing-incl {
    box-sizing: border-box; /* Opera/IE 8+ */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
}

/*
 * START: Scrolling of div for Android and iOS
 */
::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #000;
}

/*
 * END: Scrolling of div
 */

.fullscreen-white {
    width: 100%;
    height: 100%;
    background-color: white;
}

.instruction {
    color: white;
    font-weight: 900;
    font-size: 1.2em;
    text-shadow: 0 2px 0 #303030;
}

.instruction-2 {
    color: white;
    font-weight: 900;
    font-size: 1.4em;
    text-shadow: 0 2px 0 #303030;
}

.info-text {
    font-size: 1.2em;
    color: #333;
    padding-left: 10px;
}

.info-text2 {
    color: #ccc;
    padding-left: 10px;
    font-size: 1.4em;
}

#splashLogoHeaderFooter {
    width: 100%;
    opacity: 0;
    transform: rotate3d(1, 1, 0, 70deg);
    animation: 2.5s 0.2s ease fadeInAndSpin;
    animation-fill-mode: forwards;
}

#splashImg {
    width: 100%;
}

.splash-image-animated {
    width: 100%;
    height: 100%;
    background: url("../images/background.jpg");
    background-repeat: no-repeat;
    background-size: auto 100%;
}

#splashLogoHeaderFooter {
}

.modalLayer {
    background-color: rgba(
        0,
        0,
        0,
        0.8
    ); /* if you use opacity then the stuff on top of that is also transparent, but this way saves you having to use a semitransparent png */
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 200;
    padding-top: 15%;
    text-align: center;
    vertical-align: middle;
    top: 0px;
    left: 0px;
}

.popupContentWrapper {
    color: white;
    font-size: 18px;
    opacity: 1;
    background: #000;
    padding: 10px;
    padding-bottom: 16px;
    margin-left: 5px;
    margin-right: 5px;
    border: 2px;
    border-style: solid;
    border-color: white;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    overflow: auto; /* needed so that box goes around floating icons */
    max-height: 80%;
}

.msgbox-system-feedback {
    display: none;
    overflow: auto;
    position: fixed; /* needs to show when popup box is scrolled */
    top: 0px;
    left: 50%;
    width: 150px;
    margin-left: -75px;
    text-align: left;
    padding: 7px 15px 7px 10px;
    color: #444;
    background: #ffe402;
    border: 1px solid #968a28;
    border-top: 0px;
    font-size: 18px;
    font-family: MyAppFont;
    -webkit-border-bottom-right-radius: 6px;
    -moz-border-bottom-right-radius: 6px;
    border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-bottom-left-radius: 6px;
    border-bottom-left-radius: 6px;
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
    z-index: 600;
}

.saddle-bar-dial-on {
    border-radius: 50%;
    border: 5px solid white;
}

.menu-icon-set {
    position: absolute;
    z-index: 185;
    width: 64px;
    height: 64px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent; /* For some Androids */
}

.menu-icon-settings-off {
    background: url("../images/menu/menu-icon-settings-off.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.menu-icon-settings-on {
    background: url("../images/menu/menu-icon-settings-on.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.menu-icon-home-off {
    background: url("../images/menu/menu-icon-home-off.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.menu-icon-home-on {
    background: url("../images/menu/menu-icon-home-on.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.menu-icon-masterfiles-off {
    background: url("../images/menu/menu-icon-masterfiles-off.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.menu-icon-masterfiles-on {
    background: url("../images/menu/menu-icon-masterfiles-on.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.menu-icon-principalselect-off {
    background: url("../images/menu/menu-icon-principalselect-off.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.menu-icon-principalselect-on {
    background: url("../images/menu/menu-icon-principalselect-on.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.menu-icon-capture-off {
    background: url("../images/menu/menu-icon-capture-off.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.menu-icon-capture-on {
    background: url("../images/menu/menu-icon-capture-on.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.menu-icon-logout-off {
    background: url("../images/menu/menu-icon-logout-off.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.menu-icon-logout-on {
    background: url("../images/menu/menu-icon-logout-on.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.menu-label {
    background: rgba(200, 200, 200, 0.6);
    border: #aaa;
    border-radius: 3px;
    font-size: 0.8em;
    color: #999;
    padding: 5px;
    text-align: center;
}

.menu-bottom-bar {
    width: 4em;
    height: 4em;
}

.icon-prev-line {
    background: url("../images/icon-prev-line.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.icon-next-line {
    background: url("../images/icon-next-line.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.icon-refresh {
    background: url("../images/icon-refresh.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.icon-notifications {
    background: url("../images/icon-notifications.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.icon-settings {
    background: url("../images/icon-settings.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.icon-tap-left {
    background: url("../images/icon-tap-left.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.general-icon-size {
    width: 3em;
    height: 3em;
}

.general-icon-size-smaller-1 {
    width: 2em;
    height: 2em;
}

.general-icon-size-smaller-2 {
    width: 1.5em;
    height: 1.5em;
}

.icon-tick {
    background: url("../images/icon-tick.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.icon-deleted {
    background: url("../images/icon-cross.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.icon-store {
    background: url("../images/icon-store.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.icon-product {
    background: url("../images/icon-product.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.icon-transporter {
    background: url("../images/icon-transporter.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.icon-scan {
    background: url("../images/icon-scan.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.icon-close {
    background: url("../images/icon-close.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.icon-keyboard {
    background: url("../images/icon-keyboard.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.icon-add {
    background: url("../images/icon-add.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: 0.5em;
}

.shadow-box {
    box-shadow:
        0px 3px 2px rgb(0 0 0 / 15%),
        2px 1px 3px rgb(0 0 0 / 30%);
}

#briefMessage {
    position: fixed;
    top: 50%;
    left: 50%;
    padding: 0px;
    border-radius: 8px;
    background: black;
    border: 1px solid white;
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
    z-index: 999;
    display: none;
    text-align: center;
    color: white;
    font-size: 20px;
    text-shadow: 1px 2px 0 #303030;
}

#briefMessageText {
    padding: 10px;
}

table.capture-table,
table.capture-inner-table {
    width: 100%;
}

table.capture-table th {
    text-transform: uppercase;
    font-size: 0.8em;
    color: var(--form-lable-color);
    background-color: var(--background-text-color);
    padding: 10px;
}

table.capture-inner-table th {
    text-transform: uppercase;
    padding: 3px;
    font-size: 0.7em;
    color: var(--form-lable-color);
    background-color: hsl(
        calc(var(--background-text-color-hsl-manipulation-H)),
        calc(var(--background-text-color-hsl-manipulation-S)),
        calc(var(--background-text-color-hsl-manipulation-L) + 25%)
    );
}

table.capture-inner-table td {
    text-align: right;
}

@keyframes fadeInAndSpin {
    100% {
        opacity: 1;
        transform: rotate3d(1, 1, 0, 0deg);
    }
}

@keyframes fadeIn {
    100% {
        opacity: 1;
    }
}