*, ::before, ::after {
        --tw-border-spacing-x: 0;
        --tw-border-spacing-y: 0;
        --tw-translate-x: 0;
        --tw-translate-y: 0;
        --tw-rotate: 0;
        --tw-skew-x: 0;
        --tw-skew-y: 0;
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        --tw-pan-x:  ;
        --tw-pan-y:  ;
        --tw-pinch-zoom:  ;
        --tw-scroll-snap-strictness: proximity;
        --tw-gradient-from-position:  ;
        --tw-gradient-via-position:  ;
        --tw-gradient-to-position:  ;
        --tw-ordinal:  ;
        --tw-slashed-zero:  ;
        --tw-numeric-figure:  ;
        --tw-numeric-spacing:  ;
        --tw-numeric-fraction:  ;
        --tw-ring-inset:  ;
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-color: #fff;
        --tw-ring-color: rgb(59 130 246 / 0.5);
        --tw-ring-offset-shadow: 0 0 #0000;
        --tw-ring-shadow: 0 0 #0000;
        --tw-shadow: 0 0 #0000;
        --tw-shadow-colored: 0 0 #0000;
        --tw-blur:  ;
        --tw-brightness:  ;
        --tw-contrast:  ;
        --tw-grayscale:  ;
        --tw-hue-rotate:  ;
        --tw-invert:  ;
        --tw-saturate:  ;
        --tw-sepia:  ;
        --tw-drop-shadow:  ;
        --tw-backdrop-blur:  ;
        --tw-backdrop-brightness:  ;
        --tw-backdrop-contrast:  ;
        --tw-backdrop-grayscale:  ;
        --tw-backdrop-hue-rotate:  ;
        --tw-backdrop-invert:  ;
        --tw-backdrop-opacity:  ;
        --tw-backdrop-saturate:  ;
        --tw-backdrop-sepia:  ;
        --tw-contain-size:  ;
        --tw-contain-layout:  ;
        --tw-contain-paint:  ;
        --tw-contain-style:  ;
}
::-ms-backdrop {
        --tw-border-spacing-x: 0;
        --tw-border-spacing-y: 0;
        --tw-translate-x: 0;
        --tw-translate-y: 0;
        --tw-rotate: 0;
        --tw-skew-x: 0;
        --tw-skew-y: 0;
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        --tw-pan-x:  ;
        --tw-pan-y:  ;
        --tw-pinch-zoom:  ;
        --tw-scroll-snap-strictness: proximity;
        --tw-gradient-from-position:  ;
        --tw-gradient-via-position:  ;
        --tw-gradient-to-position:  ;
        --tw-ordinal:  ;
        --tw-slashed-zero:  ;
        --tw-numeric-figure:  ;
        --tw-numeric-spacing:  ;
        --tw-numeric-fraction:  ;
        --tw-ring-inset:  ;
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-color: #fff;
        --tw-ring-color: rgb(59 130 246 / 0.5);
        --tw-ring-offset-shadow: 0 0 #0000;
        --tw-ring-shadow: 0 0 #0000;
        --tw-shadow: 0 0 #0000;
        --tw-shadow-colored: 0 0 #0000;
        --tw-blur:  ;
        --tw-brightness:  ;
        --tw-contrast:  ;
        --tw-grayscale:  ;
        --tw-hue-rotate:  ;
        --tw-invert:  ;
        --tw-saturate:  ;
        --tw-sepia:  ;
        --tw-drop-shadow:  ;
        --tw-backdrop-blur:  ;
        --tw-backdrop-brightness:  ;
        --tw-backdrop-contrast:  ;
        --tw-backdrop-grayscale:  ;
        --tw-backdrop-hue-rotate:  ;
        --tw-backdrop-invert:  ;
        --tw-backdrop-opacity:  ;
        --tw-backdrop-saturate:  ;
        --tw-backdrop-sepia:  ;
        --tw-contain-size:  ;
        --tw-contain-layout:  ;
        --tw-contain-paint:  ;
        --tw-contain-style:  ;
}
::backdrop {
        --tw-border-spacing-x: 0;
        --tw-border-spacing-y: 0;
        --tw-translate-x: 0;
        --tw-translate-y: 0;
        --tw-rotate: 0;
        --tw-skew-x: 0;
        --tw-skew-y: 0;
        --tw-scale-x: 1;
        --tw-scale-y: 1;
        --tw-pan-x:  ;
        --tw-pan-y:  ;
        --tw-pinch-zoom:  ;
        --tw-scroll-snap-strictness: proximity;
        --tw-gradient-from-position:  ;
        --tw-gradient-via-position:  ;
        --tw-gradient-to-position:  ;
        --tw-ordinal:  ;
        --tw-slashed-zero:  ;
        --tw-numeric-figure:  ;
        --tw-numeric-spacing:  ;
        --tw-numeric-fraction:  ;
        --tw-ring-inset:  ;
        --tw-ring-offset-width: 0px;
        --tw-ring-offset-color: #fff;
        --tw-ring-color: rgb(59 130 246 / 0.5);
        --tw-ring-offset-shadow: 0 0 #0000;
        --tw-ring-shadow: 0 0 #0000;
        --tw-shadow: 0 0 #0000;
        --tw-shadow-colored: 0 0 #0000;
        --tw-blur:  ;
        --tw-brightness:  ;
        --tw-contrast:  ;
        --tw-grayscale:  ;
        --tw-hue-rotate:  ;
        --tw-invert:  ;
        --tw-saturate:  ;
        --tw-sepia:  ;
        --tw-drop-shadow:  ;
        --tw-backdrop-blur:  ;
        --tw-backdrop-brightness:  ;
        --tw-backdrop-contrast:  ;
        --tw-backdrop-grayscale:  ;
        --tw-backdrop-hue-rotate:  ;
        --tw-backdrop-invert:  ;
        --tw-backdrop-opacity:  ;
        --tw-backdrop-saturate:  ;
        --tw-backdrop-sepia:  ;
        --tw-contain-size:  ;
        --tw-contain-layout:  ;
        --tw-contain-paint:  ;
        --tw-contain-style:  ;
}
.tw-container {
        width: 100%;
}
@media (min-width: 640px) {
        .tw-container {
                max-width: 640px;
        }
}
@media (min-width: 768px) {
        .tw-container {
                max-width: 768px;
        }
}
@media (min-width: 1024px) {
        .tw-container {
                max-width: 1024px;
        }
}
@media (min-width: 1280px) {
        .tw-container {
                max-width: 1280px;
        }
}
@media (min-width: 1536px) {
        .tw-container {
                max-width: 1536px;
        }
}
.tw-sr-only {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border-width: 0 !important;
}
.tw-pointer-events-none {
        pointer-events: none !important;
}
.tw-pointer-events-auto {
        pointer-events: auto !important;
}
.tw-fixed {
        position: fixed !important;
}
.tw-absolute {
        position: absolute !important;
}
.tw-relative {
        position: relative !important;
}
.tw-inset-0 {
        inset: 0px !important;
}
.-tw-bottom-6 {
        bottom: -1.5rem !important;
}
.-tw-right-6 {
        right: -1.5rem !important;
}
.-tw-top-24 {
        top: -6rem !important;
}
.-tw-top-32 {
        top: -8rem !important;
}
.-tw-top-40 {
        top: -10rem !important;
}
.-tw-top-\[100px\] {
        top: -100px !important;
}
.tw-bottom-0 {
        bottom: 0px !important;
}
.tw-bottom-6 {
        bottom: 1.5rem !important;
}
.tw-left-0 {
        left: 0px !important;
}
.tw-left-1\/2 {
        left: 50% !important;
}
.tw-left-4 {
        left: 1rem !important;
}
.tw-right-0 {
        right: 0px !important;
}
.tw-right-6 {
        right: 1.5rem !important;
}
.tw-right-\[10px\] {
        right: 10px !important;
}
.tw-right-\[8vw\] {
        right: 8vw !important;
}
.tw-top-0 {
        top: 0px !important;
}
.tw-top-\[100\%\] {
        top: 100% !important;
}
.tw-top-\[105\%\] {
        top: 105% !important;
}
.tw-top-\[110\%\] {
        top: 110% !important;
}
.tw-top-\[150\%\] {
        top: 150% !important;
}
.tw-top-\[calc\(100\%\+10px\)\] {
        top: calc(100% + 10px) !important;
}
.tw-z-10 {
        z-index: 10 !important;
}
.tw-z-20 {
        z-index: 20 !important;
}
.tw-z-50 {
        z-index: 50 !important;
}
.tw-z-\[1020\] {
        z-index: 1020 !important;
}
.tw-z-\[10\] {
        z-index: 10 !important;
}
.tw-z-\[20\] {
        z-index: 20 !important;
}
.tw-z-\[30\] {
        z-index: 30 !important;
}
.tw-z-\[50\] {
        z-index: 50 !important;
}
.tw-order-1 {
        -webkit-box-ordinal-group: 2 !important;
            -ms-flex-order: 1 !important;
                order: 1 !important;
}
.tw-order-2 {
        -webkit-box-ordinal-group: 3 !important;
            -ms-flex-order: 2 !important;
                order: 2 !important;
}
.tw-col-span-1 {
        grid-column: span 1 / span 1 !important;
}
.tw-col-span-2 {
        grid-column: span 2 / span 2 !important;
}
.tw-col-span-3 {
        grid-column: span 3 / span 3 !important;
}
.tw-m-0 {
        margin: 0px !important;
}
.tw-mx-0 {
        margin-left: 0px !important;
        margin-right: 0px !important;
}
.tw-mx-auto {
        margin-left: auto !important;
        margin-right: auto !important;
}
.tw-my-5 {
        margin-top: 1.25rem !important;
        margin-bottom: 1.25rem !important;
}
.tw-my-8 {
        margin-top: 2rem !important;
        margin-bottom: 2rem !important;
}
.tw-mb-0 {
        margin-bottom: 0px !important;
}
.tw-mb-1 {
        margin-bottom: 0.25rem !important;
}
.tw-mb-10 {
        margin-bottom: 2.5rem !important;
}
.tw-mb-12 {
        margin-bottom: 3rem !important;
}
.tw-mb-2 {
        margin-bottom: 0.5rem !important;
}
.tw-mb-2\.5 {
        margin-bottom: 0.625rem !important;
}
.tw-mb-3 {
        margin-bottom: 0.75rem !important;
}
.tw-mb-4 {
        margin-bottom: 1rem !important;
}
.tw-mb-6 {
        margin-bottom: 1.5rem !important;
}
.tw-mb-8 {
        margin-bottom: 2rem !important;
}
.tw-me-3 {
        -webkit-margin-end: 0.75rem !important;
                margin-inline-end: 0.75rem !important;
}
.tw-ml-1 {
        margin-left: 0.25rem !important;
}
.tw-mr-2 {
        margin-right: 0.5rem !important;
}
.tw-mt-1 {
        margin-top: 0.25rem !important;
}
.tw-mt-10 {
        margin-top: 2.5rem !important;
}
.tw-mt-12 {
        margin-top: 3rem !important;
}
.tw-mt-16 {
        margin-top: 4rem !important;
}
.tw-mt-2 {
        margin-top: 0.5rem !important;
}
.tw-mt-3 {
        margin-top: 0.75rem !important;
}
.tw-mt-4 {
        margin-top: 1rem !important;
}
.tw-mt-6 {
        margin-top: 1.5rem !important;
}
.tw-mt-8 {
        margin-top: 2rem !important;
}
.tw-block {
        display: block !important;
}
.tw-flex {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
}
.tw-inline-flex {
        display: -webkit-inline-box !important;
        display: -ms-inline-flexbox !important;
        display: inline-flex !important;
}
.tw-grid {
        display: grid !important;
}
.tw-hidden {
        display: none !important;
}
.tw-aspect-\[4\/3\] {
        aspect-ratio: 4/3 !important;
}
.tw-size-14 {
        width: 3.5rem !important;
        height: 3.5rem !important;
}
.tw-size-6 {
        width: 1.5rem !important;
        height: 1.5rem !important;
}
.tw-h-10 {
        height: 2.5rem !important;
}
.tw-h-12 {
        height: 3rem !important;
}
.tw-h-2 {
        height: 0.5rem !important;
}
.tw-h-2\.5 {
        height: 0.625rem !important;
}
.tw-h-24 {
        height: 6rem !important;
}
.tw-h-32 {
        height: 8rem !important;
}
.tw-h-4 {
        height: 1rem !important;
}
.tw-h-48 {
        height: 12rem !important;
}
.tw-h-64 {
        height: 16rem !important;
}
.tw-h-72 {
        height: 18rem !important;
}
.tw-h-9 {
        height: 2.25rem !important;
}
.tw-h-96 {
        height: 24rem !important;
}
.tw-h-\[100vh\] {
        height: 100vh !important;
}
.tw-h-\[220px\] {
        height: 220px !important;
}
.tw-h-\[60vh\] {
        height: 60vh !important;
}
.tw-h-fit {
        height: -webkit-fit-content !important;
        height: -moz-fit-content !important;
        height: fit-content !important;
}
.tw-h-full {
        height: 100% !important;
}
.tw-h-px {
        height: 1px !important;
}
.tw-max-h-0 {
        max-height: 0px !important;
}
.tw-max-h-\[100vh\] {
        max-height: 100vh !important;
}
.tw-max-h-\[24rem\] {
        max-height: 24rem !important;
}
.tw-max-h-\[600px\] {
        max-height: 600px !important;
}
.tw-min-h-24 {
        min-height: 6rem !important;
}
.tw-min-h-\[100vh\] {
        min-height: 100vh !important;
}
.tw-min-h-\[60vh\] {
        min-height: 60vh !important;
}
.tw-min-h-\[80vh\] {
        min-height: 80vh !important;
}
.tw-min-h-screen {
        min-height: 100vh !important;
}
.tw-w-1 {
        width: 0.25rem !important;
}
.tw-w-1\/2 {
        width: 50% !important;
}
.tw-w-1\/3 {
        width: 33.333333% !important;
}
.tw-w-10 {
        width: 2.5rem !important;
}
.tw-w-12 {
        width: 3rem !important;
}
.tw-w-20 {
        width: 5rem !important;
}
.tw-w-24 {
        width: 6rem !important;
}
.tw-w-3\/4 {
        width: 75% !important;
}
.tw-w-32 {
        width: 8rem !important;
}
.tw-w-4 {
        width: 1rem !important;
}
.tw-w-40 {
        width: 10rem !important;
}
.tw-w-48 {
        width: 12rem !important;
}
.tw-w-6 {
        width: 1.5rem !important;
}
.tw-w-64 {
        width: 16rem !important;
}
.tw-w-72 {
        width: 18rem !important;
}
.tw-w-8 {
        width: 2rem !important;
}
.tw-w-9 {
        width: 2.25rem !important;
}
.tw-w-96 {
        width: 24rem !important;
}
.tw-w-\[100vw\] {
        width: 100vw !important;
}
.tw-w-\[300px\] {
        width: 300px !important;
}
.tw-w-\[70\%\] {
        width: 70% !important;
}
.tw-w-\[72\%\] {
        width: 72% !important;
}
.tw-w-fit {
        width: -webkit-fit-content !important;
        width: -moz-fit-content !important;
        width: fit-content !important;
}
.tw-w-full {
        width: 100% !important;
}
.tw-min-w-0 {
        min-width: 0px !important;
}
.tw-max-w-3xl {
        max-width: 48rem !important;
}
.tw-max-w-4xl {
        max-width: 56rem !important;
}
.tw-max-w-5xl {
        max-width: 64rem !important;
}
.tw-max-w-6 {
        max-width: 1.5rem !important;
}
.tw-max-w-6xl {
        max-width: 72rem !important;
}
.tw-max-w-7xl {
        max-width: 80rem !important;
}
.tw-max-w-\[300px\] {
        max-width: 300px !important;
}
.tw-max-w-\[330px\] {
        max-width: 330px !important;
}
.tw-max-w-\[360px\] {
        max-width: 360px !important;
}
.tw-max-w-\[390px\] {
        max-width: 390px !important;
}
.tw-max-w-\[52ch\] {
        max-width: 52ch !important;
}
.tw-max-w-\[58ch\] {
        max-width: 58ch !important;
}
.tw-max-w-sm {
        max-width: 24rem !important;
}
.tw-flex-1 {
        -webkit-box-flex: 1 !important;
            -ms-flex: 1 1 0% !important;
                flex: 1 1 0% !important;
}
.tw-flex-shrink-0 {
        -ms-flex-negative: 0 !important;
            flex-shrink: 0 !important;
}
.tw-shrink-0 {
        -ms-flex-negative: 0 !important;
            flex-shrink: 0 !important;
}
.tw-table-auto {
        table-layout: auto !important;
}
.tw-border-collapse {
        border-collapse: collapse !important;
}
.-tw-translate-x-1\/2 {
        --tw-translate-x: -50% !important;
        -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
                transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}
.-tw-translate-y-2 {
        --tw-translate-y: -0.5rem !important;
        -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
                transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}
.tw-translate-y-0 {
        --tw-translate-y: 0px !important;
        -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
                transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}
.tw-rotate-180 {
        --tw-rotate: 180deg !important;
        -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
                transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}
@-webkit-keyframes tw-pulse {
        50% {
                opacity: .5;
        }
}
@keyframes tw-pulse {
        50% {
                opacity: .5;
        }
}
.tw-animate-pulse {
        -webkit-animation: tw-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
                animation: tw-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}
@-webkit-keyframes tw-spin {
        to {
                -webkit-transform: rotate(360deg);
                        transform: rotate(360deg);
        }
}
@keyframes tw-spin {
        to {
                -webkit-transform: rotate(360deg);
                        transform: rotate(360deg);
        }
}
.tw-animate-spin {
        -webkit-animation: tw-spin 1s linear infinite !important;
                animation: tw-spin 1s linear infinite !important;
}
.tw-cursor-col-resize {
        cursor: col-resize !important;
}
.tw-cursor-pointer {
        cursor: pointer !important;
}
.tw-select-none {
        -webkit-user-select: none !important;
           -moz-user-select: none !important;
            -ms-user-select: none !important;
                user-select: none !important;
}
.tw-scroll-mt-20 {
        scroll-margin-top: 5rem !important;
}
.tw-list-disc {
        list-style-type: disc !important;
}
.tw-list-none {
        list-style-type: none !important;
}
.tw-grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
.tw-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.tw-grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.tw-flex-col {
        -webkit-box-orient: vertical !important;
        -webkit-box-direction: normal !important;
            -ms-flex-direction: column !important;
                flex-direction: column !important;
}
.tw-flex-wrap {
        -ms-flex-wrap: wrap !important;
            flex-wrap: wrap !important;
}
.tw-flex-nowrap {
        -ms-flex-wrap: nowrap !important;
            flex-wrap: nowrap !important;
}
.tw-place-items-center {
        place-items: center !important;
}
.tw-items-start {
        -webkit-box-align: start !important;
            -ms-flex-align: start !important;
                align-items: flex-start !important;
}
.tw-items-end {
        -webkit-box-align: end !important;
            -ms-flex-align: end !important;
                align-items: flex-end !important;
}
.tw-items-center {
        -webkit-box-align: center !important;
            -ms-flex-align: center !important;
                align-items: center !important;
}
.tw-justify-end {
        -webkit-box-pack: end !important;
            -ms-flex-pack: end !important;
                justify-content: flex-end !important;
}
.tw-justify-center {
        -webkit-box-pack: center !important;
            -ms-flex-pack: center !important;
                justify-content: center !important;
}
.tw-justify-between {
        -webkit-box-pack: justify !important;
            -ms-flex-pack: justify !important;
                justify-content: space-between !important;
}
.tw-gap-1 {
        gap: 0.25rem !important;
}
.tw-gap-10 {
        gap: 2.5rem !important;
}
.tw-gap-12 {
        gap: 3rem !important;
}
.tw-gap-2 {
        gap: 0.5rem !important;
}
.tw-gap-3 {
        gap: 0.75rem !important;
}
.tw-gap-4 {
        gap: 1rem !important;
}
.tw-gap-6 {
        gap: 1.5rem !important;
}
.tw-gap-8 {
        gap: 2rem !important;
}
.tw-gap-x-6 {
        -webkit-column-gap: 1.5rem !important;
           -moz-column-gap: 1.5rem !important;
                column-gap: 1.5rem !important;
}
.tw-gap-y-2 {
        row-gap: 0.5rem !important;
}
.tw-space-y-0 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0 !important;
        margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse))) !important;
        margin-bottom: calc(0px * var(--tw-space-y-reverse)) !important;
}
.tw-space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0 !important;
        margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse))) !important;
        margin-bottom: calc(0.125rem * var(--tw-space-y-reverse)) !important;
}
.tw-space-y-1 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0 !important;
        margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))) !important;
        margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)) !important;
}
.tw-space-y-2 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0 !important;
        margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))) !important;
        margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)) !important;
}
.tw-space-y-3 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0 !important;
        margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))) !important;
        margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)) !important;
}
.tw-space-y-4 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0 !important;
        margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))) !important;
        margin-bottom: calc(1rem * var(--tw-space-y-reverse)) !important;
}
.tw-space-y-6 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0 !important;
        margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))) !important;
        margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)) !important;
}
.tw-space-y-8 > :not([hidden]) ~ :not([hidden]) {
        --tw-space-y-reverse: 0 !important;
        margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))) !important;
        margin-bottom: calc(2rem * var(--tw-space-y-reverse)) !important;
}
.tw-divide-y > :not([hidden]) ~ :not([hidden]) {
        --tw-divide-y-reverse: 0 !important;
        border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))) !important;
        border-bottom-width: calc(1px * var(--tw-divide-y-reverse)) !important;
}
.tw-divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
        --tw-divide-opacity: 1 !important;
        border-color: rgb(229 231 235 / var(--tw-divide-opacity)) !important;
}
.tw-overflow-hidden {
        overflow: hidden !important;
}
.tw-overflow-x-auto {
        overflow-x: auto !important;
}
.tw-overflow-y-auto {
        overflow-y: auto !important;
}
.tw-whitespace-nowrap {
        white-space: nowrap !important;
}
.tw-break-words {
        overflow-wrap: break-word !important;
}
.tw-rounded {
        border-radius: 0.25rem !important;
}
.tw-rounded-2xl {
        border-radius: 1rem !important;
}
.tw-rounded-full {
        border-radius: 9999px !important;
}
.tw-rounded-lg {
        border-radius: 0.5rem !important;
}
.tw-rounded-md {
        border-radius: 0.375rem !important;
}
.tw-rounded-xl {
        border-radius: 0.75rem !important;
}
.tw-rounded-t-lg {
        border-top-left-radius: 0.5rem !important;
        border-top-right-radius: 0.5rem !important;
}
.tw-border {
        border-width: 1px !important;
}
.tw-border-0 {
        border-width: 0px !important;
}
.tw-border-y-0 {
        border-top-width: 0px !important;
        border-bottom-width: 0px !important;
}
.tw-border-b {
        border-bottom-width: 1px !important;
}
.tw-border-r {
        border-right-width: 1px !important;
}
.tw-border-gray-200 {
        --tw-border-opacity: 1 !important;
        border-color: rgb(229 231 235 / var(--tw-border-opacity)) !important;
}
.tw-border-gray-300 {
        --tw-border-opacity: 1 !important;
        border-color: rgb(209 213 219 / var(--tw-border-opacity)) !important;
}
.tw-border-neutral-400 {
        --tw-border-opacity: 1 !important;
        border-color: rgb(163 163 163 / var(--tw-border-opacity)) !important;
}
.tw-border-slate-200 {
        --tw-border-opacity: 1 !important;
        border-color: rgb(226 232 240 / var(--tw-border-opacity)) !important;
}
.tw-border-white {
        --tw-border-opacity: 1 !important;
        border-color: rgb(255 255 255 / var(--tw-border-opacity)) !important;
}
.tw-border-white\/30 {
        border-color: rgb(255 255 255 / 0.3) !important;
}
.tw-bg-\[\#ee5d25\] {
        --tw-bg-opacity: 1 !important;
        background-color: rgb(238 93 37 / var(--tw-bg-opacity)) !important;
}
.tw-bg-black {
        --tw-bg-opacity: 1 !important;
        background-color: rgb(0 0 0 / var(--tw-bg-opacity)) !important;
}
.tw-bg-black\/40 {
        background-color: rgb(0 0 0 / 0.4) !important;
}
.tw-bg-black\/80 {
        background-color: rgb(0 0 0 / 0.8) !important;
}
.tw-bg-gray-200 {
        --tw-bg-opacity: 1 !important;
        background-color: rgb(229 231 235 / var(--tw-bg-opacity)) !important;
}
.tw-bg-gray-300 {
        --tw-bg-opacity: 1 !important;
        background-color: rgb(209 213 219 / var(--tw-bg-opacity)) !important;
}
.tw-bg-neutral-100 {
        --tw-bg-opacity: 1 !important;
        background-color: rgb(245 245 245 / var(--tw-bg-opacity)) !important;
}
.tw-bg-neutral-200 {
        --tw-bg-opacity: 1 !important;
        background-color: rgb(229 229 229 / var(--tw-bg-opacity)) !important;
}
.tw-bg-neutral-50 {
        --tw-bg-opacity: 1 !important;
        background-color: rgb(250 250 250 / var(--tw-bg-opacity)) !important;
}
.tw-bg-neutral-700 {
        --tw-bg-opacity: 1 !important;
        background-color: rgb(64 64 64 / var(--tw-bg-opacity)) !important;
}
.tw-bg-neutral-900\/50 {
        background-color: rgb(23 23 23 / 0.5) !important;
}
.tw-bg-red-600 {
        --tw-bg-opacity: 1 !important;
        background-color: rgb(220 38 38 / var(--tw-bg-opacity)) !important;
}
.tw-bg-sky-100 {
        --tw-bg-opacity: 1 !important;
        background-color: rgb(224 242 254 / var(--tw-bg-opacity)) !important;
}
.tw-bg-slate-100 {
        --tw-bg-opacity: 1 !important;
        background-color: rgb(241 245 249 / var(--tw-bg-opacity)) !important;
}
.tw-bg-slate-50 {
        --tw-bg-opacity: 1 !important;
        background-color: rgb(248 250 252 / var(--tw-bg-opacity)) !important;
}
.tw-bg-slate-900 {
        --tw-bg-opacity: 1 !important;
        background-color: rgb(15 23 42 / var(--tw-bg-opacity)) !important;
}
.tw-bg-transparent {
        background-color: transparent !important;
}
.tw-bg-white {
        --tw-bg-opacity: 1 !important;
        background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
}
.tw-bg-white\/90 {
        background-color: rgb(255 255 255 / 0.9) !important;
}
.tw-bg-opacity-50 {
        --tw-bg-opacity: 0.5 !important;
}
.tw-bg-\[radial-gradient\(60\%_60\%_at_50\%_40\%\,rgba\(255\,255\,255\,0\.18\)\,transparent\)\] {
        background-image: -webkit-radial-gradient(50% 40%,60% 60%,rgba(255,255,255,0.18),transparent) !important;
        background-image: radial-gradient(60% 60% at 50% 40%,rgba(255,255,255,0.18),transparent) !important;
}
.tw-bg-gradient-to-b {
        background-image: -webkit-gradient(linear, left top, left bottom, from(var(--tw-gradient-stops))) !important;
        background-image: -webkit-linear-gradient(top, var(--tw-gradient-stops)) !important;
        background-image: linear-gradient(to bottom, var(--tw-gradient-stops)) !important;
}
.tw-from-white {
        --tw-gradient-from: #fff var(--tw-gradient-from-position) !important;
        --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position) !important;
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
.tw-to-neutral-100 {
        --tw-gradient-to: #f5f5f5 var(--tw-gradient-to-position) !important;
}
.tw-bg-cover {
        background-size: cover !important;
}
.tw-bg-center {
        background-position: center !important;
}
.tw-bg-no-repeat {
        background-repeat: no-repeat !important;
}
.tw-fill-blue-600 {
        fill: #2563eb !important;
}
.tw-fill-white {
        fill: #fff !important;
}
.tw-object-cover {
        -o-object-fit: cover !important;
           object-fit: cover !important;
}
.tw-p-0 {
        padding: 0px !important;
}
.tw-p-1 {
        padding: 0.25rem !important;
}
.tw-p-16 {
        padding: 4rem !important;
}
.tw-p-2 {
        padding: 0.5rem !important;
}
.tw-p-4 {
        padding: 1rem !important;
}
.tw-p-5 {
        padding: 1.25rem !important;
}
.tw-p-6 {
        padding: 1.5rem !important;
}
.tw-p-8 {
        padding: 2rem !important;
}
.tw-px-0 {
        padding-left: 0px !important;
        padding-right: 0px !important;
}
.tw-px-16 {
        padding-left: 4rem !important;
        padding-right: 4rem !important;
}
.tw-px-3 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
}
.tw-px-4 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
}
.tw-px-6 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
}
.tw-px-8 {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
}
.tw-px-\[18\%\] {
        padding-left: 18% !important;
        padding-right: 18% !important;
}
.tw-px-\[2rem\] {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
}
.tw-py-1 {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
}
.tw-py-12 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
}
.tw-py-14 {
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
}
.tw-py-16 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
}
.tw-py-2 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
}
.tw-py-2\.5 {
        padding-top: 0.625rem !important;
        padding-bottom: 0.625rem !important;
}
.tw-py-20 {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
}
.tw-py-3 {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
}
.tw-py-4 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
}
.tw-py-6 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
}
.tw-py-8 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
}
.tw-py-\[15vh\] {
        padding-top: 15vh !important;
        padding-bottom: 15vh !important;
}
.tw-py-\[20vh\] {
        padding-top: 20vh !important;
        padding-bottom: 20vh !important;
}
.tw-pb-12 {
        padding-bottom: 3rem !important;
}
.tw-pb-2 {
        padding-bottom: 0.5rem !important;
}
.tw-pb-4 {
        padding-bottom: 1rem !important;
}
.tw-pb-8 {
        padding-bottom: 2rem !important;
}
.tw-pb-\[20vh\] {
        padding-bottom: 20vh !important;
}
.tw-pb-\[25vh\] {
        padding-bottom: 25vh !important;
}
.tw-pb-\[30vh\] {
        padding-bottom: 30vh !important;
}
.tw-pl-0 {
        padding-left: 0px !important;
}
.tw-pl-5 {
        padding-left: 1.25rem !important;
}
.tw-pr-0 {
        padding-right: 0px !important;
}
.tw-pt-1 {
        padding-top: 0.25rem !important;
}
.tw-pt-12 {
        padding-top: 3rem !important;
}
.tw-pt-4 {
        padding-top: 1rem !important;
}
.tw-pt-48 {
        padding-top: 12rem !important;
}
.tw-pt-6 {
        padding-top: 1.5rem !important;
}
.tw-pt-\[20\%\] {
        padding-top: 20% !important;
}
.tw-text-left {
        text-align: left !important;
}
.tw-text-center {
        text-align: center !important;
}
.tw-text-2xl {
        font-size: 1.5rem !important;
        line-height: 2rem !important;
}
.tw-text-3xl {
        font-size: 1.875rem !important;
        line-height: 2.25rem !important;
}
.tw-text-4xl {
        font-size: 2.25rem !important;
        line-height: 2.5rem !important;
}
.tw-text-5xl {
        font-size: 3rem !important;
        line-height: 1 !important;
}
.tw-text-6xl {
        font-size: 3.75rem !important;
        line-height: 1 !important;
}
.tw-text-\[11px\] {
        font-size: 11px !important;
}
.tw-text-base {
        font-size: 1rem !important;
        line-height: 1.5rem !important;
}
.tw-text-lg {
        font-size: 1.125rem !important;
        line-height: 1.75rem !important;
}
.tw-text-sm {
        font-size: 0.875rem !important;
        line-height: 1.25rem !important;
}
.tw-text-xl {
        font-size: 1.25rem !important;
        line-height: 1.75rem !important;
}
.tw-text-xs {
        font-size: 0.75rem !important;
        line-height: 1rem !important;
}
.tw-font-black {
        font-weight: 900 !important;
}
.tw-font-bold {
        font-weight: 700 !important;
}
.tw-font-medium {
        font-weight: 500 !important;
}
.tw-font-semibold {
        font-weight: 600 !important;
}
.tw-uppercase {
        text-transform: uppercase !important;
}
.tw-italic {
        font-style: italic !important;
}
.tw-leading-5 {
        line-height: 1.25rem !important;
}
.tw-leading-\[1\.15\] {
        line-height: 1.15 !important;
}
.tw-leading-\[4rem\] {
        line-height: 4rem !important;
}
.tw-leading-relaxed {
        line-height: 1.625 !important;
}
.tw-leading-snug {
        line-height: 1.375 !important;
}
.tw-leading-tight {
        line-height: 1.25 !important;
}
.tw-tracking-wide {
        letter-spacing: 0.025em !important;
}
.tw-tracking-wider {
        letter-spacing: 0.05em !important;
}
.tw-text-gray-200 {
        --tw-text-opacity: 1 !important;
        color: rgb(229 231 235 / var(--tw-text-opacity)) !important;
}
.tw-text-gray-400 {
        --tw-text-opacity: 1 !important;
        color: rgb(156 163 175 / var(--tw-text-opacity)) !important;
}
.tw-text-gray-500 {
        --tw-text-opacity: 1 !important;
        color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
}
.tw-text-gray-600 {
        --tw-text-opacity: 1 !important;
        color: rgb(75 85 99 / var(--tw-text-opacity)) !important;
}
.tw-text-gray-700 {
        --tw-text-opacity: 1 !important;
        color: rgb(55 65 81 / var(--tw-text-opacity)) !important;
}
.tw-text-neutral-300 {
        --tw-text-opacity: 1 !important;
        color: rgb(212 212 212 / var(--tw-text-opacity)) !important;
}
.tw-text-neutral-500 {
        --tw-text-opacity: 1 !important;
        color: rgb(115 115 115 / var(--tw-text-opacity)) !important;
}
.tw-text-neutral-600 {
        --tw-text-opacity: 1 !important;
        color: rgb(82 82 82 / var(--tw-text-opacity)) !important;
}
.tw-text-neutral-700 {
        --tw-text-opacity: 1 !important;
        color: rgb(64 64 64 / var(--tw-text-opacity)) !important;
}
.tw-text-neutral-800 {
        --tw-text-opacity: 1 !important;
        color: rgb(38 38 38 / var(--tw-text-opacity)) !important;
}
.tw-text-sky-600 {
        --tw-text-opacity: 1 !important;
        color: rgb(2 132 199 / var(--tw-text-opacity)) !important;
}
.tw-text-slate-500 {
        --tw-text-opacity: 1 !important;
        color: rgb(100 116 139 / var(--tw-text-opacity)) !important;
}
.tw-text-slate-600 {
        --tw-text-opacity: 1 !important;
        color: rgb(71 85 105 / var(--tw-text-opacity)) !important;
}
.tw-text-slate-700 {
        --tw-text-opacity: 1 !important;
        color: rgb(51 65 85 / var(--tw-text-opacity)) !important;
}
.tw-text-slate-800 {
        --tw-text-opacity: 1 !important;
        color: rgb(30 41 59 / var(--tw-text-opacity)) !important;
}
.tw-text-slate-900 {
        --tw-text-opacity: 1 !important;
        color: rgb(15 23 42 / var(--tw-text-opacity)) !important;
}
.tw-text-white {
        --tw-text-opacity: 1 !important;
        color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
}
.tw-text-white\/90 {
        color: rgb(255 255 255 / 0.9) !important;
}
.tw-underline {
        text-decoration-line: underline !important;
}
.tw-underline-offset-2 {
        text-underline-offset: 2px !important;
}
.tw-opacity-0 {
        opacity: 0 !important;
}
.tw-opacity-100 {
        opacity: 1 !important;
}
.tw-shadow {
        --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important;
        --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color) !important;
        -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
.tw-shadow-lg {
        --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important;
        --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color) !important;
        -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
.tw-shadow-md {
        --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important;
        --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color) !important;
        -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
.tw-shadow-sm {
        --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
        --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color) !important;
        -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
.tw-shadow-xl {
        --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important;
        --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color) !important;
        -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
                box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
}
.tw-ring-1 {
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
        -webkit-box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
                box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}
.tw-ring-black\/5 {
        --tw-ring-color: rgb(0 0 0 / 0.05) !important;
}
.tw-ring-neutral-100 {
        --tw-ring-opacity: 1 !important;
        --tw-ring-color: rgb(245 245 245 / var(--tw-ring-opacity)) !important;
}
.tw-blur-3xl {
        --tw-blur: blur(64px) !important;
        -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
                filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
}
.tw-drop-shadow {
        --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06)) !important;
        -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
                filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
}
.tw-drop-shadow-lg {
        --tw-drop-shadow: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1)) !important;
        -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
                filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
}
.tw-backdrop-blur {
        --tw-backdrop-blur: blur(8px) !important;
        backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia) !important;
}
.tw-backdrop-blur-sm {
        --tw-backdrop-blur: blur(4px) !important;
        backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia) !important;
}
.tw-transition {
        -webkit-transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, backdrop-filter, -webkit-box-shadow, -webkit-transform, -webkit-filter !important;
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, backdrop-filter, -webkit-box-shadow, -webkit-transform, -webkit-filter !important;
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important;
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-box-shadow, -webkit-transform, -webkit-filter !important;
        -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
                transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
        -webkit-transition-duration: 150ms !important;
                transition-duration: 150ms !important;
}
.tw-transition-all {
        -webkit-transition-property: all !important;
        transition-property: all !important;
        -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
                transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
        -webkit-transition-duration: 150ms !important;
                transition-duration: 150ms !important;
}
.bg-oaple {
        background: var(--primary-color) !important;
    }

@media print {
    .row {page-break-inside: avoid;}
}

:root {
    --footer-height: 750px;
    --primary-color: #ee5d25;
}

@font-face{
    font-family:'digital-clock-font';
    src: url('/storage/fonts/digital-7.ttf');
}

/**
Ignore SCSS from "_tables.scss"
**/

.table>:not(caption)>*>* {
    color: inherit;
}

.navbar {
    background: white;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.navbar * {
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.navbar path {
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    fill: #EE5D25;
}

.navbar.hovered {
    background: #EE5D25;
}

.navbar.hovered path {
    fill: #ffffff;
}

.navbar.hovered .nav-link {
    color: #ffffff !important;
}

.navbar.scrolled > .container {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

.nav-item {
    border-bottom: solid 2px transparent;
}

.nav-item.focused {
    border-bottom: solid 2px white;
}

.navbar-menu {
    position: absolute;
    left: 0;
    top: -100px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    color: white;

    height: 0;
    width: 100%;
    padding-top: 100px;
    padding-bottom: 50px;
    background: #ee5d25;
    opacity: 0;
}

.navbar-menu > div {
        display: grid;
        width: 100%;
        max-width: 72rem;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
}

.navbar-menu > div > ul {
    border-left: solid 1px white;
    list-style: none;
    margin-left: 0.5rem;
}

.navbar-menu > div > div {
    margin-right: 0.5rem;
    padding: 0.5rem;
}

.navbar-menu > div > ul > li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.navbar-menu > div > ul > li > a {
    padding: 0.5rem;
}

.navbar-menu.hovered {
    height: auto;
    top: 0;
    opacity: 1;
}

a.menu-link {
    color: white;
}

a.menu-link:hover {
    color: white;
}

.menu-link.unfocused {
    color: #ff9c78;
}

body, html {
    min-height: 100vh;
}

body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    overflow-x: auto;

    font-size: var(--font-standard);
}

body.modal-open {
    overflow: hidden;
}

footer {
    position: relative;
}

a {
    color: var(--text-colour-s);
    text-decoration: none;
    cursor: pointer;
}

select {
        -webkit-appearance: none !important;
           -moz-appearance: none !important;
                appearance: none !important;
}

.transition {
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.animate-rotate {
    -webkit-animation: ease 2s infinite rotate;
            animation: ease 2s infinite rotate;
}

.animate-bob {
    -webkit-animation: bob;
            animation: bob;
    -webkit-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
    -webkit-animation-duration: 1.5s;
            animation-duration: 1.5s;
    -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
}

.invalid-button {
    border: solid 1px red;
    -webkit-box-shadow: 0 0 3px 1px red;
            box-shadow: 0 0 3px 1px red;
}

.valid-button {
    border: solid 1px green;
    -webkit-box-shadow: 0 0 3px 1px green;
            box-shadow: 0 0 3px 1px green;
}

.table a {
    color: var(--text-colour-s)
}

.text-brand-100 {
    color: #ff7300;
}

.text-brand-200 {
    color: #ff8000;
}

.text-brand-300 {
    color: #ff720c;
}

.text-brand-400 {
    color: #ff7b1a;
}

.text-brand-500 {
    color: #ee5d25;
}

a:link{
    text-decoration: none !important;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.input-group-text {
    height: 100%;
    border-radius: unset;
}

#header-search {
    margin-right: 1.5rem;
}

.sticky {
    position: fixed;
    top: 0;
    right: 0;
    margin-right: 0 !important;

    -webkit-box-shadow: 0 0 12px 2px rgba(0,0,0, 0.3);

            box-shadow: 0 0 12px 2px rgba(0,0,0, 0.3);
}

.container {
    max-width: 1540px;
}

.card {
    min-width: 300px;
    max-width: 1800px;
}

.card-xl {
    margin: 2rem;
    max-width: 97%;
}

.form-card {
    min-width: 300px;
    max-width: 1400px;
}

#notifications {
    position: fixed;
    left: 0;
    width: 100%;
    top: 65px;
}

#notification_count {
    padding: 0.4rem;
    height: 100%;
    text-align: center;
    vertical-align: middle;
}

#realtime-fixed {
        position: fixed;
        left: 1.5rem;
        bottom: 1.5rem;
        z-index: 100;
}

.realtime-wrapper {
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    position: relative;
    width: 500px;
    overflow: hidden;
    height: 6rem;
}

.realtime-notification {
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;

    left: -200px;
    opacity: 0;
    white-space: nowrap;
    pointer-events: auto;
    position: absolute;
    bottom: 0px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    border-radius: 0.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
    -webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
            box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.realtime-notification.active {
    opacity: 100;
    left: 0;
}

.notification-icon {
    display: none;
}

.notification-icon.active {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

#languageDropdownMobile {
    display: none;
}

#alerts-container {
    width: 100%;
    position: relative;

    -webkit-transition: all 0.5s ease;

    transition: all 0.5s ease;
}

#alerts-container.show > .alerts-bar {
    height: auto;
    padding: 0.5rem 0;
}

.alerts-bar {
    width: 100%;

    padding: 0;
    height: 0;
    overflow: hidden;

    position: inherit;
    z-index: 6;

    -webkit-transition: all 0.5s ease;

    transition: all 0.5s ease;
}

.alerts-bar > div {
    width: 97%;
    margin: auto;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.alerts-bar.error {
    border-left: 5px solid #e02323;

    background: #ffe0e3;
    color: #e02323;
}

.alerts-bar.warning {
    border-left: 5px solid #ce8500;

    background: #ffdb9b;
    color: #ce8500;
}

.alerts-bar.info {
    border-left: 5px solid #3eb6ff;

    background: #d7f0ff;
    color: #3eb6ff;
}

a:hover {
    color: #ee5d25;
}

.alerts-bar.success {
    border-left: 5px solid #23ad5c;

    background: #c3f3d7;
    color: #23ad5c;
}

.cursor-pointer {
    cursor: pointer;
}

#alerts-container.show > .banner-bar {
    height: auto;
    padding: 0.5rem 0;
}

.banner-bar {
    width: 100%;

    padding: 0;
    height: 0;
    overflow: hidden;

    position: inherit;
    z-index: 6;

    -webkit-transition: all 0.5s ease;

    transition: all 0.5s ease;
}

.banner-bar > div {
    width: 97%;
    margin: auto;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.banner-bar.error-bar {
    border-left: 5px solid #e02323;

    background: #ffe0e3;
    color: #e02323;
}

.banner-bar.warning-bar {
    border-left: 5px solid #ce8500;

    background: #ffdb9b;
    color: #ce8500;
}
.banner-bar.info-bar {
    border-left: 5px solid #3eb6ff;

    background: #d7f0ff;
    color: #3eb6ff;
}
.banner-bar.success-bar {
    border-left: 5px solid #23ad5c;

    background: #c3f3d7;
    color: #23ad5c;
}

.success-banner {
        border-bottom-width: 1px;
        --tw-border-opacity: 1;
        border-color: rgb(34 197 94 / var(--tw-border-opacity));
        padding: 0.75rem;
}

#alertsDropdown {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

#alertsDropdown > * {
    margin: 0 2px;
}

#companyDropdown {
    padding: 0.5rem 0;
}

/* Font awesome recommendation */
.icon::before {
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

/* This affects SweetAlert boxes */
body.swal2-shown > [aria-hidden="true"] {
    -webkit-transition: 0.1s -webkit-filter;
    transition: 0.1s -webkit-filter;
    transition: 0.1s filter;
    transition: 0.1s filter, 0.1s -webkit-filter;
    -webkit-filter: blur(5px);
            filter: blur(5px);
}

li[aria-current="page"], li[aria-current="page"] * {
    background: #b3daff !important;
}

/* This affects SweetAlert boxes */
.swal-footer {
    text-align: center;
}

.swal2-container.swal2-top>.swal2-popup {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
/* This affects SweetAlert boxes */

tbody tr {
    margin: 0
}

label span {
    color: red;
}

.badge {
    height: 18px;
    line-height: 14px;
}

.dashboard-row {
    height: 350px;
    position: relative;
    overflow: hidden;
}

.dashboard-card {
    height:100%;
    width: 100%;

    -webkit-box-flex: 1;

        -ms-flex: 1;

            flex: 1;

    position: absolute;
    left: 100%;

    background: white;
    z-index: 2;

    -webkit-transition: all 0.4s ease;

    transition: all 0.4s ease;
}

.export-form {
    font-size: var(--font-standard);
}

#invoice_approval.open-dashboard-card {
    left: 0;
}

#transaction_approval.open-dashboard-card {
    left: 0;
}

#procurement_forecasting.open-dashboard-card {
    left: 0;
}

#bl_not_received.open-dashboard-card {
    left: 0;
}

#request-loading {
    width: 100%;
    height: 60px;

    padding: 0.5rem;

    z-index: 99;

    background: #bb0000;
    color: white;
    font-weight: 600;
}

.bold-heading {
    padding: 8px 10px;
    color: #464646;
    border: solid 2px #252525;
    font-weight: 600;
    text-align: center;
    border-radius: 0.25rem;
}

.card-op {
    border: solid 3px #ee5d25;
}

#footer {
    height: calc(var(--footer-height) - 100px);
}

#footer > #footer-wrapper {
    min-height: var(--footer-height);
    background: -webkit-linear-gradient(96deg, #31302f calc(var(--footer-height) - 1px), transparent var(--footer-height)), -webkit-linear-gradient(83deg, #ee5d25 calc(var(--footer-height) - 1px), transparent var(--footer-height));
    background: linear-gradient(-6deg, #31302f calc(var(--footer-height) - 1px), transparent var(--footer-height)), linear-gradient(7deg, #ee5d25 calc(var(--footer-height) - 1px), transparent var(--footer-height));
}

.badge-oaple {
    background-color: var(--primary-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: block;
    height: 1.5rem;
    border-radius: 0.25rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

#navbarMobile {
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;

    position: absolute;
    left: 0;
    top: 0;

    overflow: hidden;
    height: 0;
    width: 100%;
    background: white;
}

#navbarMobile.in {
    height: 100vh;
}

#navbarMobile.collapse:not(.in) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.navbar-toggler {
    border: none;
}

.navbar-toggler:focus {
    border: none;
    -webkit-box-shadow: none;
            box-shadow: none;
}

.oaple-card-header {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        border-top-left-radius: 0.375rem;
        border-top-right-radius: 0.375rem;
        padding: 0.5rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.025em;
        --tw-text-opacity: 1;
        color: rgb(255 255 255 / var(--tw-text-opacity));
}

.oaple-button {
        border-radius: 0.375rem;
        border-width: 0px;
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255 / var(--tw-bg-opacity));
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
        --tw-text-opacity: 1;
        color: rgb(38 38 38 / var(--tw-text-opacity));
        -webkit-transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, backdrop-filter, -webkit-box-shadow, -webkit-transform, -webkit-filter;
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, backdrop-filter, -webkit-box-shadow, -webkit-transform, -webkit-filter;
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
        transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-box-shadow, -webkit-transform, -webkit-filter;
        -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
                transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        -webkit-transition-duration: 150ms;
                transition-duration: 150ms;
}

.oaple-button:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(229 229 229 / var(--tw-bg-opacity));
}

.card-op .card-header {
    background: #d55321;
    color: white;
}

.card-op .card-header * {
    color: white;
}

.card-op .card-header input, select, option {
    color: #495057 !important;
}

.card-ml {
    border: solid 3px #252525;
}

.card-ml .card-header {
    background: #252525;
    color: white;
}

.no-format-list {
    margin: 0;
    padding: 0 0 0 20px;
}

.mobile-visible {
    display: none;
}

.one_rem {
    font-size: var(--font-standard);
}

.log_container {
    margin: 2rem 0;
}

.excel-upload {
    width: 100%;
    height: 85px;
}

form {
    font-size: var(--font-standard);
}

.excel-upload form {
    font-size: var(--font-standard);
    color: #131313;
}

.excel-upload .form-group {
    text-align: left;
}

.excel-upload p {
    font-weight: 600;
}

.list_title_box {
    margin: 1rem 0;
    background: white;
    -webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0, 0.35);
            box-shadow: 0 2px 3px 0 rgba(0,0,0, 0.35);

    border-radius: 0.25rem;
    overflow: hidden;
}

.list_title_box * {
    padding: 0.5rem;
}

.list_title_box label {
    width: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;

    background: #838383;
    color: white;
    font-weight: bold;
}

.list_title_box label:after {
    font-weight: 600;
    content: "\f328" !important;
    font-family: "Font Awesome 6 Free";
}

.background-dark {
    background: #1b1e21;
    background-image: url("/img/webp/oaple-background-dark.webp");

    border-radius: 1rem;
}

.height-unset {
    height: unset !important;
}

.display-table {
    display: table;
}

.square_tab_box {
    margin-top: 1.5rem;
    min-height: 400px;
}

.square_tab a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    padding: 0.8rem 1rem ;
}

.square_tab .active {
    color: #4b4b4b;
    font-weight: 600;
}

.hide-col {
    overflow: hidden;
    width: 0!important;
    max-width: 0!important;
    padding: 0!important;
    border-width: 0!important;
    font-size: 0!important;
}

.orange-header {
    font-size: 3rem;
    font-weight: 600;
    color: white;

    text-shadow: 0 1px 2px rgba(255,255,255,0.8);
}

.pointer {
    cursor: pointer;
}

.error-cell {
    color: red;
    font-weight: 600;
}

.red {
    color: red;
    font-weight: 600;
}

.blue {
    color: #4d97ee;
    font-weight: 600;
}

.green {
    color: #35c21f;
    font-weight: 600;
}

.green-color {
    color: #35c21f;
}

.red-outline {
    outline: solid 1px red;
}

.alt-row {
    background: #dde8fa;
}

.branch-select {
    width: 100%;
}

.table-borderless th, .table-borderless td, .table-borderless thead th, .table-borderless tbody + tbody {
    border: 0 !important;
}

.globe-wrapper {
    width: 14rem;
    height: 14rem;

    border-radius: 50%;

    background: rgba(255,255,255, 0.5);

    -webkit-transition: all 1s ease;

    transition: all 1s ease;
}

.globe-wrapper:hover {
    width: 12rem;
    height: 12rem;

    background: rgba(255,255,255, 0.3);
}

.branch-globe-container {
    height: 10rem;
    width: 10rem;
    border-radius: 50%;

    overflow: hidden;

    cursor: pointer;
}

.branch-globe {
    height: 100%;

    -webkit-transition: all 1s ease;

    transition: all 1s ease;
}

.globe-wrapper:hover .branch-globe-container * {
    opacity: 60%;
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
}

.branch-globe-container:hover img:after {
    content: "EU";
    position: absolute;
    z-index: 1;
    font-size: 2rem;
}

.tab-heading {
    overflow-x: scroll;
}

.company-sidebar {
    z-index: 1;

    background-color: var(--primary-colour);
    color: var(--text-colour-l);

    display: block;
    position: relative;
}

.company-search {
    background-color: #fff200;
}

.company-search input {
    background-color: #fff200;
}

.company-navbar {
    background: var(--secondary-colour-l);
    color: var(--text-colour-d);

    z-index: 5;
    -webkit-box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
            box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
}

.navbar-light .navbar-nav .nav-link {
    color: var(--text-colour-h);
}

.company-wrapper {
    background-image: url("/img/pattern.jpg");
    background-repeat: repeat;
}

.company-sidebar a {
    color: var(--text-colour-l);
}

.company-sidebar a:hover {
    color: var(--text-colour-lh);
    text-decoration: none;
    cursor: pointer;
}

.object-subheading {
    font-size: var(--font-standard);
}

.email-cell-formatting * {
    margin-bottom: 0;
    margin-right: 5px;
}

#contact-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-pack: justify;

        -ms-flex-pack: justify;

            justify-content: space-between;
}

#contact-header-left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.status-tag-div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: end;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
}

.address-name {
    font-size: 1.1rem;
    border-bottom: solid 1px red;
    margin-bottom: 0.6rem;
    font-weight: 600;
}

.address-list {
    font-size: var(--font-standard);
    line-height: 1.8rem;
}

.contact-details {
    font-size: var(--font-standard);
}

.file-upload {display: none;}

.secondary-header {
    font-size: var(--font-subheader) !important;
}

.secondary-header label, .secondary-header input {
    font-size: var(--font-standard);
}

#welcome-div {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;

    font-family:'digital-clock-font';
    font-size: var(--font-large);

    background: #222222;
    color: #fdfdfd;

    margin: 0;
    padding: 1rem 1.5rem;
}

#welcome-div a {
    width: 100%;
    margin-top: 0.5rem;
}

#welcome-div a:hover {
    background: none;
}

.company-sidebar-heading {
}

.custom-pagination {
    margin: auto 0 auto 2rem;
}

#logout {
    padding: 0.5rem;
}

.btn {
    font-size: inherit;
}

.btn_logout_confirm {
    width: 100%;
}

.btn-digital {
    width: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    border: solid 1px #fdfdfd;
    color: inherit;

    font-size: var(--font-standard);
}

.btn-digital:hover {
    color: greenyellow;
    border: solid 1px greenyellow;
}

.clock {
    border-radius: 0.5rem;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.total_money {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.total_money label {
    color: black;
    font-size: 1.2rem;
    margin-right: 10px;

    float: left;
}

.total_money h1 {
    color: var(--primary-colour);
    font-size: 1.5rem;

    float: left;
}

.overflow-hidden {
    overflow: hidden;
}

.range-list {
    width: 100%;
}

.range-list td, th {
    padding: 5px 10px;
}

.range-list tr:nth-child(odd){
    background-color: #ffffff;
}

.range-list tr:nth-child(even){
    background-color: #efefef;
}

.delete-square {
    width: 25px;
    height: 25px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    padding: 10px;
    border-radius: 15%;
    border: none;

    background: darkred;
    color: white;
    font-size: var(--font-small);

    cursor: pointer;
}

.delete-square.disabled {
    background: #bcbcbc;
    pointer-events: none;
}

.delete-square-small {
    width: 15px;
    height: 15px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    padding: 10px;
    border-radius: 15%;
    border: none;

    background: darkred;
    color: white;

    cursor: pointer;
}

.edit-square {
    width: 25px;
    height: 25px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-shadow: 0 0 2px 1px rgba(0,0,0, 0.2);
            box-shadow: 0 0 2px 1px rgba(0,0,0, 0.2);

    padding: 10px;
    border-radius: 15%;
    border: none;

    background: white;
    color: #0e0e0e;

    cursor: pointer;
}

.search-criteria {
    background-color: white;
    border: solid 0.2px lightgrey;
    padding: 0 10px;
    border-radius: 15px;

    height: 25px;
    line-height: 25px;

    cursor: pointer;
    display: inline-block;
    font-size: var(--font-small);
}

.search-criteria a {
    text-decoration: none;
}

.criteria-box {
    border: none;
    padding: 0 5px;
}

.relative {
    position: relative;
}

.input-group {
    min-width: 160px;
}

.date-input-col {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 20%;
            flex: 0 0 20%;
    max-width: 20%;

    position: relative;
    width: 100%;
    padding: 0 15px;
}

.col-form-label {
    color: var(--text-colour-h);

    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    margin-bottom: 0;
    font-size: inherit;
    line-height: 1.6;
}

.display-none {
    display: none;
}

.border-start {
    padding-left: 1rem;
}

.tooltip {
    position: relative;
    display: inline-block;

    opacity: 1 !important;
    font-size: inherit;

    margin-left: 15px;

    /* Override Z-index */
    z-index: unset;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 200px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    top: 120%;
    left: 50%;
    margin-left: -100px;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

.tooltip .tooltiptexttop {
    visibility: hidden;
    width: 200px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 120%;
    left: 50%;
    margin-left: -100px;
}

.tooltip .tooltiptextleft {
    visibility: hidden;
    width: 200px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    top: 120%;
    left: 100%;
    margin-left: -100px;
}

.tooltip:hover .tooltiptext, .tooltip:hover .tooltiptexttop {
    visibility: visible;
}

.tooltip-container {
    position: relative;
}

.tooltip-cover {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;

    background: rgba(255,255,255, 0.8);
    color: #1b1e21;
    padding: 0.5rem 1rem;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    z-index: 2;

    -webkit-transition: all 0.5s ease;

    transition: all 0.5s ease;
}

.overflow-visible {
    overflow: visible;
}

/* Wrapper */
#wrapper {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    background-image: url("/images/no_background.png");
    background-color: var(--secondary-colour-l);
    background-size: cover;
}

#cover {
    width: 100%;
    height: 100%;

    background: #f6f6f6;

    position: absolute;
    z-index: 5;

    -webkit-transition: all 0.4s ease;

    transition: all 0.4s ease;
}

#cover.hide-cover {
    opacity: 0;
    pointer-events: none;
}

#cover div {
    width: 100%;
    height: calc(100vh - 66px);

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

#cover div img {
    width: 10%;
    opacity: 75%;
}

#footer-container {
    width: calc(100% - 14rem);

    position: relative;
    overflow-x: hidden;

    -webkit-transition: all 0.3s ease;

    transition: all 0.3s ease;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#footer-container.toggled {
    width: 100% !important;
}

#wrapper #content-wrapper {
    width: 100%;
    padding: 1rem;
    overflow-x: hidden;

    background-size: cover;
}

/* Sidebar Menu classes */
#accordionSidebar {
    width: 14rem;
    height: 100%;

    z-index: 4;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;

    overflow-y: scroll;

    padding-bottom: 30vh;
}

/* Hide scrollbar for Chrome, Safari and Opera */
#accordionSidebar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#accordionSidebar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

#sidebar-wrapper {
    width: 14rem;

    background: #222222;
    -webkit-box-shadow: 0 0 6px 0 #2f2f2f;
            box-shadow: 0 0 6px 0 #2f2f2f;

    -webkit-transition: all 0.3s ease;

    transition: all 0.3s ease;
}

.sidebar {
    min-height: 100vh;
    left: 0;
}

.sidebar .sidebar-heading {
    padding: 0 1rem;
    margin: 0.5rem 0;

    font-weight: 800;
    font-size: var(--font-small);
    text-transform: uppercase;
    text-align: left;
}

.sidebar .nav-item {
    position: relative;
    padding: 0.5rem;
    margin: 0.2rem 0.5rem;
}

.sidebar .nav-item a {
    border-radius: 0.5rem;

    -webkit-transition: all 0.3s ease;

    transition: all 0.3s ease;
}

.sidebar .nav-item a:hover {
    background: var(--primary-colour-l)
}

.sidebar .nav-item a.collapse-item:hover {
    background: #d7d7d7;
}

.sidebar .nav-item .nav-link span {
    display: inline;
    white-space: nowrap;

    font-size: .85rem;
}

.sidebar .nav-item .nav-link {
    width: 100%;

    padding: 0.5rem;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-right: 1rem;

    text-align: left;
}

.sidebar .nav-item .nav-link i {
    margin-right: 1rem;
}

.sidebar hr.sidebar-divider {
    margin: 0.5rem 0;
}

.sidebar hr.sidebar-divider-bottom {
    margin: 0 0 0.5rem 0;
}

.sidebar .nav-item .collapse {
    position: relative;
    left: 0;
    z-index: 1;
    top: 0;
    -webkit-animation: none;
    animation: none;
}

.sidebar .nav-item .collapse .collapse-inner, .sidebar .nav-item .collapsing .collapse-inner {
    padding: 0.5rem 0;
    min-width: 10rem;
    font-size: .85rem;
    margin: 1rem 0;

    -webkit-box-shadow: none;

            box-shadow: none;
}

.sidebar .nav-item .collapse .collapse-inner .collapse-header, .sidebar .nav-item .collapsing .collapse-inner .collapse-header {
    margin: 0;
    white-space: nowrap;
    padding: 0.5rem 1.5rem;
    text-transform: uppercase;
    font-weight: 800;
    font-size: .65rem;
    color: #b7b9cc;
}

.collapse-item {
    padding: 0.5rem 1rem;
    margin: 0 0.5rem;
    display: block;
    text-decoration: none;
    border-radius: 0.35rem;
    color: var(--primary-colour) !important;

    -webkit-transition: all 0.5s ease;

    transition: all 0.5s ease;
}

.collapse-item:hover {
    background: #e8e8e8;
}

#sidebar-wrapper.toggled {
    width: 0;
    overflow: hidden;
}

.sidebar.toggled {
    left: -14rem;
}

#companyLogo {
    position: relative;
}

.activeSidebar {
    width: 6.5rem;
}

.hamburger {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-width: 25px;
    width: 25px;
    height: 10px;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

        -ms-flex-direction: column;

            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;

    cursor: pointer;
    -webkit-transition: span 0.5s ease;
    transition: span 0.5s ease;
}

.hamburger span {
    width: 100%;
    height: 2px;
    background-color: var(--text-colour-h);;

    -webkit-transform-origin: left;;

            transform-origin: left;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.activeHamburger {
    height: 20px;
    width: 25px;
}

.activeHamburger .line1 {
    background-color: #1f1f1f;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
}
.activeHamburger .line2 {
    opacity: 0;
}
.activeHamburger .line3 {
    background-color: #1e1e1e;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
/* End of Sidebar Menu classes */

.w-unset {
    width: unset !important;
}

.mobile-p-3 {
    padding: 1rem;
}

.format_tag {
    text-transform: uppercase;
    padding: 5px;
    text-align: center;

    border-radius: 10px;
    font-weight: 600;
}

.format_pdf {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffde45), to(#d5aa00));
    background-image: -webkit-linear-gradient(top, #ffde45, #d5aa00);
    background-image: linear-gradient(to bottom, #ffde45, #d5aa00);
    -webkit-box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.50);
            box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.50);
    color: #282828;
}

.format_docx {
    background-color: black;
    color: white;
}

.format_xlsx {
    background-color: black;
    color: white;
}

.format_jpg {
    background-color: black;
    color: white;
}

.error404 {
    height: 180px;
    margin-top: 20px;
    margin-bottom: 35px;
}

.auth-background {
    background-image: url('/img/webp/oaple-forestry-background.webp');
    background-size: cover;
    background-position: center;
    padding-top: 30px;
}

.justify-right-mobile-left {
    -webkit-box-pack: right;
        -ms-flex-pack: right;
            justify-content: right;
}

.text-overflow-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.max-card-header-width {
    max-width: 1300px;
    margin: auto;
}

.card-header {
    position: relative;

    font-size: var(--font-header);

    background-color: var(--secondary-colour-l);
    color: var(--text-colour-h);
}

.primary-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.card-header a {
    text-decoration: none;
    color: var(--text-colour-s);
}

.card-header form > button {
    text-decoration: none;
    color: var(--text-colour-s);
}

.card-body {
    position: relative;

    overflow: hidden;

    padding-bottom: 2rem;

    background-color: var(--secondary-colour);
    color: var(--text-colour-h);

    -webkit-transition: all 0.25s ease;

    transition: all 0.25s ease;
}

.card-body-dark {
    position: relative;

    overflow: hidden;

    padding-bottom: 2rem;

    background-color: var(--secondary-colour-d);
    color: var(--text-colour-h);

    -webkit-transition: all 0.25s ease;

    transition: all 0.25s ease;
}

.min-4rem {
    min-width: 4rem !important;
}

.width4rem {
    width: 4rem !important;
}

.min-7rem {
    min-width: 7rem !important;
}

.min-10rem {
    min-width: 10rem;
}

.min-cell-w-small {
    min-width: 100px;
}

.fw-10 {
    width: 10rem;
}

.fw-40 {
    width: 40px;
}

.border-bottom-children-0, .border-bottom-children-0 * {
    border-bottom: 0;
}

.low-visibility {
    font-style: italic;
    font-size: var(--font-small);
    color: grey;
}

.cell-padding-small td, .cell-padding-small th {
    padding: 0.2rem 1rem !important;
}

.text-sm {
    font-size: var(--font-small);
}

.audit_row {
    visibility: collapse;
}

.audit_row.expanded {
    visibility: visible;
    background: var(--secondary-colour-l);
}

.expanded_row {
    visibility: collapse;
}

.expanded_row td {
    height: 1px;
    padding: 0 !important;
}

.expanded_row td > div {
    padding: 0.5rem 1rem;
}

.expanded_row.expanded {
    visibility: visible;
    background: var(--secondary-colour-l);
}

.expanded-light {
    background: var(--secondary-colour-l);
}

.expanded-light.expanded-dark {
    background: var(--secondary-colour-l);
}

.height-1px {
    height: 1px;
}

#associated_products {
    display: none;
}

.line-item-header {
    min-width: 700px;
    border-bottom: 1px solid lightgrey;

    margin-bottom: 0.3rem;
    padding-bottom: 0.3rem;
}

.line-item-existing {
    min-width: 700px;
}

.line-item-body {
    min-width: 700px;
    border-bottom: 1px solid lightgrey;

    margin-bottom: 1rem;
    padding-bottom: 1rem;
}

#no_results {
    width: 100%;
    height: 50%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    font-size: var(--font-medium);
}

.no-results {
    width: 100%;
    height: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    font-size: var(--font-medium);
}

#associated_fields {
    display: none;
    min-width: 500px;
}

.batch-actions {
    height: 36px;
    padding: 0 0 3px 0;
    margin: 10px 0;

    border-radius: 8px;
    width: 100%;

    font-size: var(--font-standard);
    font-weight: 600;
    color: #1d1d1d;
    line-height: 36px;
}

.batch-actions-form {
    padding: 0.5rem 0.75rem;
    margin: 10px 0;

    background: var(--primary-colour);

    border-radius: 8px;
    width: 100%;

    font-size: var(--font-standard);
    font-weight: 600;
    color: var(--text-colour-l);
    line-height: 36px;
}

.batch-actions-view {
    height: 36px;
    padding: 0 1rem;
    margin: 10px 0;

    border-radius: 8px;
    width: 100%;

    font-size: var(--font-standard);
    font-weight: 600;
    color: #1d1d1d;
    line-height: 36px;
}

.grey-button {

}

.grey-button:hover {
    background: #8d8c8c;
}

.file-button {
    height: 100%;
    border-radius: 0.4rem 0 0 0.4rem;

    background-color: var(--primary-colour);

    border: none;
}

.file-input {
    margin: 0;
}

.file-text {
    height: auto;
    border: solid 1px lightslategray;

    background-color: white !important;
}

.table-heading {
    background: dimgrey;

    text-align: center;
    font-weight: 600;
    color: white;
}

.table-product-header {
    color: #313131;
    font-weight: 600;
    font-size: var(--font-small);
}

.pivot-container {
    background-color: white;
    border-radius: 10px;

    -webkit-box-flex: 1;

        -ms-flex: 1;

            flex: 1;

    overflow: hidden;

    -webkit-box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);

            box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
}

.pivot-container > .pivot-content {
    position: relative;
    min-height: 300px;
}

.fa-boxed {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    width: 2rem;
    height: 2rem;

    cursor: pointer;

    border-radius: 3px;

    background: white;
    -webkit-box-shadow: 0 0 2px 0 rgba(32, 33, 36, 0.28);
            box-shadow: 0 0 2px 0 rgba(32, 33, 36, 0.28);
}

.no-outline:focus {
    -webkit-box-shadow: none;
            box-shadow: none;
}

.absolute-top {
    position: absolute;
    top: 0;
}

.btn-batch {
    background-color: var(--primary-colour-l);
    color: var(--text-colour-l);
    font-weight: bold;
    padding: 3px 1rem;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    margin: 0;

    border-radius: 4px;
    -webkit-box-shadow: 0 1px 2px 1px rgb(0 0 0 / 20%);
            box-shadow: 0 1px 2px 1px rgb(0 0 0 / 20%);
}

.btn-good {
    background-color: var(--primary-colour);
    color: var(--text-colour-l);
    font-size: var(--font-standard);
    font-weight: bold;
    padding: 7px 20px;

    -webkit-box-shadow: 0 1px 2px 1px rgb(0 0 0 / 20%);

            box-shadow: 0 1px 2px 1px rgb(0 0 0 / 20%);
}

.btn-good:hover {
    color: var(--text-colour-l);
    background-color: var(--primary-colour-d);
}

.btn-bad {
    background-color: var(--danger-colour);
    color: var(--text-colour-h);
    font-weight: bold;
    padding: 7px 20px;

    border-radius: 4px;
    -webkit-box-shadow: 0 1px 3px 0 rgb(0 0 0 / 30%);
            box-shadow: 0 1px 3px 0 rgb(0 0 0 / 30%);
}

.btn-bad:hover {
    background-color: var(--danger-colour-d);
}

.upload-btn-wrapper {
    position: relative;
    display: inline-block;
}

.upload-btn-wrapper input[type=file] {
    font-size: 100px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}

.btn-inline {
    width: 50%;
    float: right;
}

.btn-file input {
    width: 100%;
    height: 100%;

    cursor: pointer;
}

.btn-form {
    padding: 7px 34px;
    height: calc(1.6em + 0.75rem + 2px);
    white-space: nowrap;
    background-color: var(--primary-colour);
    color: var(--text-colour-l);
    font-size: var(--font-small);
    font-weight: bold;
    -webkit-transition: background .3s linear;
    transition: background .3s linear;
    letter-spacing: 1px;
    border-radius: 0.5rem;
    border: 1px solid var(--secondary-colour-l);;
}

.btn-form:hover {
    background-color: var(--primary-colour-l);
    color: white;
}

.btn-add-lineitem {
    padding: 7px 34px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    white-space: nowrap;
    background-color: var(--primary-colour-l);
    color: white;
    font-size: var(--font-small);
    font-weight: bold;
    -webkit-transition: background .3s linear;
    transition: background .3s linear;
    letter-spacing: 1px;
    border-radius: 0 0 0 0.5rem;
    border: 1px solid #e0e0e0;
}

.btn-neutral {
    padding: 7px 34px;
    margin: 10px;
    width: auto;
    white-space: nowrap;
    background-color: white;
    color: #626262;
    font-size: var(--font-small);
    font-weight: bold;
    -webkit-transition: background .3s linear;
    transition: background .3s linear;
    letter-spacing: 1px;
    border-radius: 5px;
    border: 1px solid #e0e0e0;
}

.btn-admin {
    padding: 7px 34px;
    margin: 10px;
    width: auto;
    white-space: nowrap;
    background-color: #6c2020;
    color: #fcfcfc !important;
    font-size: var(--font-small);
    font-weight: bold;
    -webkit-transition: background .3s linear;
    transition: background .3s linear;
    letter-spacing: 1px;
    border-radius: 5px;
    border: 1px solid #c51818;
}

.btn-admin:hover {
    background-color: #fab1b1;
    color: #1e1e1e !important;
}

.btn-neutral-square {
    padding: 7px;
    margin: 10px 15px;
    width: auto;
    white-space: nowrap;
    background-color: white;
    color: #626262;
    font-size: var(--font-small);
    font-weight: bold;
    -webkit-transition: background .3s linear;
    transition: background .3s linear;
    letter-spacing: 1px;
    border-radius: 5px;
    border: 1px solid #e0e0e0;
}

.btn-neutral-square:hover {
    background-color: #ee5d25;
    color: white;
}

.btn-assign-record {
    height: 30px !important;
    width: 30px !important;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
            justify-content: center !important;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    padding: 4px;
    white-space: nowrap;
    background-color: white;
    color: #626262;
    font-size: var(--font-small);
    font-weight: bold;
    -webkit-transition: background .3s linear;
    transition: background .3s linear;
    letter-spacing: 1px;
    border-radius: 5px;
    border: 1px solid #e0e0e0;
}

.btn-save-submit {
    background-color: var(--primary-colour);
    color: white;
    font-weight: bold;
    width: 100%;

    border-radius: 4px;
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.btn-save-submit:hover {
    color: #dedede;
}

.btn-save-draft {
    background-color: white;
    color: var(--primary-colour);
    font-weight: bold;
    width: 100%;

    border-radius: 4px;
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.btn-close-modal {
    background-color: white;
    color: var(--primary-colour);
    font-weight: bold;
    width: 100%;

    border-radius: 4px;
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

/* Dashboard Classes */
.dashboard {
    max-width: 1600px;
    min-width: 1000px;

    margin: auto;
}

.dashboard-table-wrapper {
    overflow-y: auto;
    max-height: 75vh;
}

.dashboard-table-wrapper thead {
    position: sticky;
    top: 0;
    z-index: 1;

    background: white;
}

.dashboard-table-wrapper table {
    border-collapse: collapse;
    width: 100%;
}

.dashboard-table-wrapper tr:nth-child(even) {
    background-color: #e8e8e8;
}

.dashboard-table th, .dashboard-table .td {
    min-width: 2rem;

    padding: 0.25rem;
}

.max-cell-width {
    max-width: 8rem;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.max-cell-width-small {
    max-width: 8rem;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.max-cell-width-wide {
    max-width: 12rem;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.max-cell-width-widest {
    max-width: 24rem;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.max-width-3rem {
    max-width: 3rem;
}

.validation-error-list {
    margin: 0;
    padding: 0;
    list-style: none;

    font-size: var(--font-standard);
}

.validation-error-list li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    padding: 0.5rem;
}

.success-alert-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    padding: 0.5rem 1rem;

    font-size: var(--font-standard);
}

#bookings_select:focus + .hidden_dropdown {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

#modal_resource:focus + .hidden_dropdown {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

#form-resource:focus + .hidden_dropdown {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    z-index: 3;
}

#transport-load-select {
    color: blue;
}

#transport-select:focus + .hidden_dropdown_transport {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    z-index: 3;
}


table-layout-fixed {
    table-layout: fixed;
}

.hidden_dropdown {
    width: 100%;
    max-height: 400px;

    overflow-y: scroll;

    position: absolute;
    top: 55px;
    left: 0;
    z-index: 1;

    border-radius: 0;
    border: solid 1px lightgray;

    display: none;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

        -ms-flex-direction: column;

            flex-direction: column;
}

.hidden_dropdown_transport {
    max-height: 300px;
}

.hidden_dropdown {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.hidden_dropdown::-webkit-scrollbar {
    display: none;  /* Safari and Chrome */
}

.hidden_dropdown .option {
    width: 100%;
    min-height: 100px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    background: white;

    cursor: pointer;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.hidden_dropdown .option:nth-child(even) {
    background: #f8f8f8;
}

.option .option-heading {
    padding: 1.5rem;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    background: #ee5d25;
    color: white;

    font-weight: bold;
    font-size: var(--font-subheader);
    min-width: 7rem;
}

.option .option-heading-sm {
    font-size: 1rem;
    padding: 1rem;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    background: #ee5d25;
    color: white;

    font-weight: bold;
    min-width: 7rem;
}

.option .option-heading.fixed-heading {
    max-width: 7rem;
    min-width: 7rem;
}

.option .option-content {
    width: 100%;

    padding: 0.5rem;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: end;

    color: var(--primary-colour-l);
    font-weight: bold;
}

.option .option-content.single {
    width: 100%;

    padding-left: 2rem;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.option .option-content span {
    width: 100%;
    padding: 0.25rem;
}

.thin-input {
    height: 1.5rem;
}

.hidden_dropdown .option:hover {
    background: #efefef;
}

.large-listing-table {
    overflow: hidden;
}

.large-listing-table td {
    padding: 0.15rem 0.75rem;
    height: 3rem;
}

.line_item_table {
    background: white;
    border: solid 1px lightgray;
}

#line_item_header {
    height: 40px;
}

#line_item_header * {
    height: 100%;
    border: 0;
}

#line_item_header > div {
    border-bottom: solid 1px lightgray;
}

.border-radius-children-0 * {
    border-radius: 0;
}

.copy-address {
    cursor: pointer;
}

.copy-content {
    cursor: pointer;
}

.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.partnerships-div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.partnerships-div div:nth-child(1) {
    margin-right: 1rem;
}

.partnerships-div div:nth-child(2) {
    margin-left: 1rem;
}

.company-style {
    background-color: var(--primary-colour) !important;
    color: white !important;
}

.td-less-padding {
    padding: 0.25rem !important;
}

.calendar-date {
    width: 90%;
    height: 90%;

    max-width: 3rem;

    border: solid 1px #818181;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    font-weight: bold;
}

.calendar-date .date-header {
    height: 50%;
    width: 100%;

    padding: 0.25rem 0;

    text-transform: uppercase;
    background: var(--primary-colour-d);
    color: white;

    font-size: var(--font-small);
}

.calendar-date .date-body {
    height: 50%;
    width: 100%;
    background: #f1f1f1;
    color: var(--primary-colour-d);

    font-size: var(--font-small);
}

.calendar-date-expanded {
    width: 90%;
    height: 90%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    font-weight: bold;
}

.calendar-date-expanded .date-header {
    height: 50%;
    width: 100%;

    padding: 0.5rem 0;

    text-transform: uppercase;
    background: var(--primary-colour-d);
    color: white;

    font-size: var(--font-small);
}

.calendar-date-expanded .date-body {
    height: 50%;
    width: 100%;
    padding: 0.5rem 0;
    background: #f1f1f1;
    color: var(--primary-colour-d);

    font-size: var(--font-small);
}

.calendar-date-flat {
    height: 90%;

    border: solid 1px #818181;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    font-weight: bold;
}

.calendar-date-flat .date-header {
    height: 100%;
    width: 100%;

    padding: 0 0.3rem;

    text-transform: uppercase;
    background: var(--primary-colour-d);
    color: white;

    font-size: var(--font-small);
}

.calendar-date-flat .date-body {
    width: 100%;
    height: 100%;
    min-width: 35px;

    background: #f1f1f1;
    color: var(--primary-colour-d);

    padding: 0 0.15rem;

    font-size: var(--font-small);
}

.date-header-compact {
    height: 50%;
    width: 100%;

    padding: 0.1rem 0;

    text-transform: uppercase;
    background: var(--primary-colour-d);
    color: white;

    font-size: 0.6rem;
}

.date-body-compact {
    height: 50%;
    width: 100%;
    background: #f1f1f1;
    color: var(--primary-colour-d);

    font-size: 0.7rem;
}

.thin-row th {
    padding: 0.1rem 0.5rem !important;

    font-size: var(--font-small);
    font-style: italic;
    font-weight: normal;
}

.h-0 {
    height: 0;
}

.flex-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.flex-between-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.stats {
    font-size: var(--font-standard);

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: end;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    line-height: 30px;
}

.stats a {
    text-decoration: none;
    color: #1b1e21;
}

#stats {
    font-size: var(--font-small);
}

.report-section {
    float: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-pack: center;

        -ms-flex-pack: center;

            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.report-start {
    margin-right: 1rem;
}

.report-end {
    margin-left: 1rem;
}

.report {
    z-index: 5;
}

.download-form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.download-report {
    margin-left: auto;
    margin-top: 1rem;
}

.stats button {
    float: left;
    height: 30px;
    padding: 0.375rem 0.75rem;

    background-color: #4a4a4a;
    font-size: 0.8rem;

    font-weight: unset;

    text-align: end;
}

.stats label {
    float: left;

    margin-right: 15px;
    font-size: var(--font-small);
    color: #1b1e21;
}

.stats input {
    float: left;
    height: 30px;
    width: 150px;
    font-size: var(--font-small);
}

.stats-div {
    background-color: #f5f5f5;
    border: solid 1px #e1e1e1;

    display: inline-block;
    padding: 10px;
    margin-top: 20px;

    height: 100px;
    width: 100%;
}

.text-lg {
    font-size: var(--font-large) !important;
}

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

.display-logo {
    height: 50px;
}

.edit-img {
    margin-left: 15px;
    height: 50px;
}

.edited {
    font-style: italic;
    background: #fff7d0;
}

.alert {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0;
}

.alert-minor {
    position: relative;
    padding: 0.25rem 1.25rem;
    margin-bottom: 0.5rem;
    border: 1px solid transparent;
    border-radius: 0;
}

.containers-background {
    width: 100%;
    height: 100%;

    -webkit-filter: grayscale(20%) contrast(10%) brightness(170%);

            filter: grayscale(20%) contrast(10%) brightness(170%);

    position: absolute;
    left: 0;
    top: 0;

    background-image: url("/img/webp/containers.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    clip-path: polygon(0 0, 40% 0, 60% 100%, 0% 100%);
}

.products-background {
    width: 100%;
    height: 100%;

    -webkit-filter: grayscale(20%) contrast(15%) brightness(170%);

            filter: grayscale(20%) contrast(15%) brightness(170%);

    position: absolute;
    left: 0;
    top: 0;

    background-image: url('/img/webp/oaple-bark-texture.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    clip-path: polygon(0 0, 40% 0, 60% 100%, 0% 100%);
}

#alias_form {
    padding: 1rem;

    display: none;
}

#alias_form * {
    font-size: var(--font-small);
}

.big-btn {
    width: 90%;
    margin: auto;
    display: block;
}

.alias-container {
    width: 95%;
    margin: 0 auto;
    max-height: 350px;
    overflow-y: auto;

    border: solid 1px #cccccc;
}

.alias-list {
    list-style: none;

    padding: 2rem;
}

.alias-item {
    padding: 0.5rem;

    font-weight: bold;
}

.alias-item ul {
    margin-bottom: 0.5rem;

    font-weight: normal;
    list-style: none;
}

.alias-item il li {
    margin-left: 0.5rem;
}

.soft-alert-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    border-top-right-radius: 1rem;
    margin: auto;
    padding: 1rem;
    border: solid 1px #cccccc;
}

.soft-alert {
    color: #939393;
    text-transform: uppercase;
    font-weight: 600;

    -webkit-transition: all ease 1s;

    transition: all ease 1s;
}

.hide-soft-alert-container {
    border: 0;
}

.hide-soft-alert-container .soft-alert {
    opacity: 0;
}

.oaple-logo {
    min-height: 50px;
    height: 2vh;
    padding: 8px 0;
}

.associated_div {
    border: 1px solid #e0e0e0;
    padding: 10px 10px;

    background-color: white;
}

.subtle_div {
    background-color: rgb(243 243 243);
    -webkit-box-shadow: inset 0 0 10px #e1e1e1;
            box-shadow: inset 0 0 10px #e1e1e1;
    border-radius: 7px;
}

.dropdown-menu {
    min-width: unset !important;
}

.tableHeader {
    font-size: 1.5rem;
    color: var(--primary-colour);
    padding: 15px;
}

.min-1k {
    min-width: 1000px;
}

.information-row {
    font-size: 14px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;

    margin-left: auto !important;
    margin-right: auto !important;
}

.fill-line {
    height: 1px;

    -webkit-box-flex: 1;

        -ms-flex: 1;

            flex: 1;

    margin: 0 10px;
    background-color: #9f9f9f;
}

.extended-wrapper {
    overflow-y: auto;

    border: 1px solid lightgray;
    margin: 0.75rem !important;
    height: calc(100% - 1.5rem);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

.note {
    padding: 0.5em;

    margin-bottom: 0.5rem;

    background: #ffc;
    -webkit-box-shadow: 1px 1px 4px 0 rgba(0,0,0, 0.25);
            box-shadow: 1px 1px 4px 0 rgba(0,0,0, 0.25);
}

#extended-container {
    width: 35%;
    height: 100%;

    position: absolute;
    top: 0;
    right: -100%;

    background: white;

    z-index: 100;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#cookies-policy .cookiesBtn__link {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

#cookies-policy .cookies__category input:checked+.cookies__box:after {
    background: var(--primary-color) !important;
}

#cookies-policy .cookies__details, #cookies-policy .cookies__details:focus, #cookies-policy .cookies__details:hover {
    color: var(--primary-color) !important;
}

#reset-button > button {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}

:root {
    --primary-color: #ee5d25;
    --secondary-color: #082f49;
    font-family: "Public Sans", sans-serif;
}

.navbar {
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(20px);
}

.nav-item {
    font-weight: 600;
    color: white;
}

.nav-link:hover, .nav-link:focus {
    color: inherit;
}

section {
    position: relative;
    max-width: 100vw;
    overflow-x: hidden;
}

#lead-carousel {
    width: 100%;
    height: 100vh;

    -ms-scroll-snap-type: x mandatory;

        scroll-snap-type: x mandatory;
}

.carousel-slide {
    height: 80vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    scroll-snap-align: start;
}

.carousel-slide-interior {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    z-index: 20;
    height: 100%;
    width: 100%;
    max-width: 48rem;
}

@media (min-width: 768px) {
        .carousel-slide-interior {
                max-width: 72rem;
        }
}

.bg-secondary-color {
    background-color: var(--secondary-color);
}

.carousel-button {
    -ms-flex-preferred-size: 190px;
        flex-basis: 190px;
    max-width: 190px;
    text-align: left;
    padding: 25px 25px 23px;
    background-color: var(--secondary-color);
    color: white;
    margin-right: 2px;
    border-radius: 6px 6px 0 0;
    border: none;

    -webkit-transition: all 0.2s ease;

    transition: all 0.2s ease;
}

.carousel-button.tns-nav-active {
    background-color: var(--primary-color);
}

.text-oaple {
    color: var(--primary-color);
}

.bg-oaple {
    background-color: var(--primary-color);
}

.tns-visually-hidden {
    display: none;
}

.flex-col {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.hide-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/** Old Styles Below **/

.btn-login {
    background-color: #ee5d25;
    color: white;
    font-weight: bold;
    width: 100%;

    border-radius: 4px;
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

#app {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 100%;
}

main {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
}

a {
    color: inherit;
}

.bg-dark {
    background: rgba(255, 255, 255, 1) !important;

    font-size: 14px;
    -webkit-transition: 0.5s ease;
    transition: 0.5s ease;
}

.ca.scrolled {
    height: 40px;
}

.bg-dark.scrolled {
    font-size: small;
}

.bg-white {
    background: rgba(255, 255, 255, 1) !important;

    font-size: medium;
    -webkit-transition: 0.5s ease;
    transition: 0.5s ease;
}

.ca {
    height: 2.4em;
    min-height: 25px;
    -webkit-transition: 0.5s ease;
    transition: 0.5s ease;
}


.nav-link {
    font-size: 1rem;
    color: white;
    font-weight: 600;
    letter-spacing: 1px;
}

.navbar.scrolled {
    background: white;
}

.nav-link.scrolled {
    color: #252525;
}

.section-subheading {
    color: var(--primary-color);
    font-size: 0.9rem;
    font-weight: 600;
}

.section-heading {
    color: var(--secondary-color);
    font-size: 1.9rem;
    font-weight: 700;
}

.oaple-subheading {
    font-weight: 600;
    font-size: var(--font-large);
    color: var(--primary-colour);
}

.oaple-header {
    font-weight: 600;
    font-size: 2rem;
    color: var(--primary-colour);

    text-shadow: 0 2px 2px rgba(0,0,0, 0.2);
}

.oaple-box-content {
    color: #6c6c6c;
}

.nav-box a {
    text-decoration: none;
}

.nav-box a:hover {
    color: #363636;
}

.top-bar {
    color: #262626;
    font-size: small;
}

.password-container {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: end;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.password-toggle {
    position: absolute;
    margin-right: 15px;
    cursor: pointer;
}

.font-small {
    font-size: 0.8rem;
    line-height: 0.8rem;
}

header {
    background-image: url("/img/webp/oaple-log-yard-forestry-products.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.login-button {
    border-left: solid !important;
    border-left-color: #ee5d25 !important;
    border-left-width: medium !important;

    width: 60px;
    text-align: center;
}

.selected-locale {
    border-left: solid !important;
    border-left-color: #ee5d25 !important;
    border-left-width: medium !important;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;

    -webkit-box-shadow: inset 0px 0px 0px 2px #dbdbdb;

            box-shadow: inset 0px 0px 0px 2px #dbdbdb;
    background: #f6f6f6;
}

.parallax_background {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.custom-font {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #090909;
}

.placeholder_name-box {
    border-left: solid !important;
    border-left-color: #ee5d25 !important;
    border-left-width: medium !important;

    padding-left: 10px;
}

.background-1-styling {
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.placeholder_name-box-light {
    border-left: solid !important;
    border-left-color: #ffffff !important;
    border-left-width: medium !important;

    padding-left: 10px;
}

.placeholder_name-subheader {
    font-size: 18px;
    color: #686868;
}

.project {
    margin: 5px;
    -webkit-box-shadow: 0px 2px 5px grey;
            box-shadow: 0px 2px 5px grey;
}

.project-img {
    width: 100%;
    height: 200px;
}

.info-card-header {
    font-size: 1.5rem;
    font-weight: 600;
}

.custom-shadow {
    -webkit-box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
            box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
}

#catalogue {
    width: 80%;

    margin: 3rem auto;
}

.video-bg {
    -o-object-fit: fill;
       object-fit: fill;
}

.red {
    color: red;
}

.login-field {
    max-width: 500px;
    border-radius: 20px;
    background: rgba(255,255,255,0.9);
}

.login-logo {
    height: 4rem;
    margin: 3.5rem 0;
}

.flex-container {
    width: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.public-label {
    font-weight: bold;

    padding-bottom: 0;
}

.contact-details {
    color: white;
}

.inset-section {
    overflow: hidden;

    width: 100%;
    background-color: #f6f6f6;

    background-image: url("/img/webp/contact-oaple-forestry-products.webp");
    background-size: cover;
    background-position: center;
    -webkit-box-shadow: inset 0px 11px 8px -10px rgba(32, 33, 36, 0.38), inset 0px -11px 8px -10px rgba(32, 33, 36, 0.38);
    box-shadow: inset 0px 11px 8px -10px rgba(32, 33, 36, 0.38), inset 0px -11px 8px -10px rgba(32, 33, 36, 0.38);
}

.inset_section_card {
    background-color: white;
    -webkit-box-shadow: 0 0 10px 0 rgba(32, 33, 36, 0.28);
    box-shadow:         0 0 10px 0 rgba(32, 33, 36, 0.28);
}

.inset_section_details {

}

header {
    position: relative;
    background-color: black;
    height: 65vh;
    min-height: 25rem;
    width: 100%;
    overflow: hidden;
}

header video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

header .hero {
    font-family: 'Heebo', sans-serif;

    color: white;
    text-shadow: 0px 2px 2px #1d1d1d;
}

header .hero-title {
    font-weight: 700;
    font-size: 3rem;

    line-height: 3.5rem;

    text-transform: uppercase;
    text-shadow: 0px 2px 2px #1d1d1d;
}

header .hero-title span {
    font-size: 3.5rem;

    color: #ee5d25;
}

header .hero-subtitle {
    font-weight: 300;
    font-size: 1.5rem;

    text-shadow: 0px 2px 2px #1d1d1d;
}

header .hero-call-to-action {
    font-weight: 700;
    font-size: 1.5rem;

    text-decoration: none;

    color: #35c8ff;
    text-transform: uppercase;
    text-shadow: 0px 2px 2px #1d1d1d;
}

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

.header-nav-item {
        font-size: 1.875rem;
        line-height: 2.25rem;
}

.subtle {
    font-size: 0.5rem;
    color: grey;

    font-weight: 400;
}

.green {
    color: green;
}

.bold {
    font-weight: 600;
}

.catalogue-filters {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;

    height: 100%;

    margin-top: 20px;
    margin-bottom: auto;
}

.catalogue-path {
    padding: 0 15px;
}

.catalogue-path a {
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
}

.catalogue-path span {
    margin: 0 1rem;
}

.catalogue-item {
    padding: 0.1rem 0;
}

.catalogue-item a {
    width: 100%;

    text-decoration: none;
}

.catalogue-sublist {
    list-style: none;
    padding-left: 1rem;
    margin-bottom: 0.6rem;
}

.catalogue-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;

    margin: 20px 0;
}

.catalogue-header {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;

    text-align: center;
}

.collapse-bar {
    background: #ee5d25;
    color: #ffffff;
}

.collapse-header {
    width: 100%;

    padding: 0.5rem;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    background: #ee5d25;
    color: #ffffff;
}

.collapse-header a {
    text-decoration: none;
}

.collapse-header a:hover {
    color: inherit;
}

.sub-heading-collapse {
    width: 100%;
}

.catalogue-subheader {
    padding: 0.3rem 0;
    border-bottom: solid 1px grey;
}

.catalogue-card {
    margin: 10px;
    padding: 20px;
    -webkit-box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
            box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);

    min-width: 200px;
    max-width: 400px;

    -webkit-box-flex: 1;

        -ms-flex: 1;

            flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;

    background: white;
}

.catalogue-card h2 {
    font-size: 0.8rem;
}

.catalogue-card p {
    font-size: 0.8rem;

    margin-bottom: 0.2rem;
}

.cc-header {
    font-size: 0.9rem;
    margin: 5px auto;
}

.cc-name {
    margin-bottom: 1rem;
}

.cc-details {
    margin-top: 25px;
}

.cc-image {
    max-width:100%;
    max-height:100%;

    margin: 5px auto;
}

.image-container {
    min-height: 180px;
}

#scroll-to-top {
    opacity: 0;
    right: 0;
    bottom: 1.5rem;

    -webkit-transition: all 0.5s ease;

    transition: all 0.5s ease;
}

#scroll-to-top.active {
    opacity: 1;
    right: 1.5rem;
}

.navbar-nav .nav-link.active {
    color: var(--primary-color);
}

#login-button {
    color: var(--primary-color);
    fill: var(--primary-color);
}

#login-button:hover, #login-button:hover * {
    color: #d9d9d9;
    fill: #d9d9d9;
}

.btn-good {
    width: 100%;
    margin-top: 25px;
    background: #ee5d25;
    color: white;
}

.btn-dark {
    border: none;

    background: var(--secondary-color);
    color: white;
}

.btn-dark:hover {
    background: var(--primary-color);
    color: white;
}

.btn-good-transparent {
    width: 100%;
    margin-top: 25px;
    border: solid 1px #ee5d25;
    color: #ee5d25;
    fill: #ee5d25;

    -webkit-transition: all 0.5s ease;

    transition: all 0.5s ease;
}

.btn-good-transparent:hover {
    background: #ee5d25;
    border: solid 1px white;
    color: white;
    fill: white;
}

.btn-good-transparent:hover * {
    color: white;
    fill: white;
}

.btn-good:hover {
    background: #ee5d25;
}

.text-section {
    font-size: 1rem;
}

.text-section p {
    font-size: 1.2rem;
}

.header-card .card-paragraph {
    font-size: 16px;
}

.whitespace-preline {
    white-space: pre-line;
}

.banner {
    width: 100%;
    height: 300px;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.team-section {
    max-width: 1200px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

header .overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: black;
    opacity: 0.5;
    z-index: 1;
}

.header-break {

}

.header-card {
    margin-top: -100px;

    width: 80vw;
    max-width: 1400px;

    background-color: white;

    display: inline-block;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    z-index: 2;
    -webkit-box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.3);
            box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.3);
}

.service-img {
    background-size: cover;
    height: 400px;

    border-top-right-radius: 40px;
    border-bottom-left-radius: 40px;
}

.profile {
    width: 230px;
    height: 230px;

    margin: 0 auto;
}

.profile-image {
    height: 100%;
    width: 100%;
    -o-object-fit: contain;
       object-fit: contain;

    border-radius: 50%;
}

.custom-footer {
    position: relative;
    background: #ee5d25;
    color: #ffffff;

    padding: 0.50rem;

    text-transform: uppercase;
    letter-spacing: 0.2rem;
    font-size: 0.9rem;
    font-weight: 600;
}

@supports (scroll-snap-align: start) {
    /* modern scroll snap points */
    .scroll {
        -ms-scroll-snap-type: x mandatory;
            scroll-snap-type: x mandatory;
    }
    .scroll-item-outer {
        scroll-snap-align: center;
    }
}

@supports not (scroll-snap-align: start) {
    /* old scroll snap points spec */
    .scroll {
        -ms-scroll-snap-type: mandatory;
            scroll-snap-type: mandatory;
        -ms-scroll-snap-destination: 0 50%;
            scroll-snap-destination: 0 50%;
        -webkit-scroll-snap-points-x: rep
    }
}

.tree-crown {
    position: absolute;
    left: 0;
    top: -50px;
    width: 100%;
    pointer-events: none;
    height: 50px;
    z-index: 2;
    background-image: url(/img/trees.png);
    background-position: center;
    background-size: contain;
    background-repeat: repeat-x;
}

@media (max-width: 1248px) {
    html {
        font-size: 85%;
    }
}

@media (max-width: 992px) {
    .navbar {
        background: rgba(255, 255, 255, 1);
        backdrop-filter: blur(20px);
    }

    .header-nav-item {
        margin-left: 0;
    }
}

@media (max-width: 768px) {

    header .hero-title {
        font-size: 2rem;
        line-height: 2.5rem;
    }

    header .hero-title span {
        font-size: 2.5rem;
    }

    header .hero-subtitle {
        font-size: 1rem;
    }

    header .hero-call-to-action {
        font-size: 1rem;
    }

    .white-space {
        height: 100px;
    }
}

@media (max-width: 550px) {
    .login-field {
        max-width: unset;
        border-radius: 0;
        background: rgba(255,255,255,0.8);

        margin-top: 0;
    }

    .auth-background {
        padding: 15px 0;
    }

    .login-logo {
        height: 2rem;
        margin: 0 0 1rem 0;
    }

    .header-card {
        width: 100vw;
    }

    .header-card .card-paragraph {
        font-size: 12px;
    }

    .white-space {
        height: 50px;
    }
}

#sitemap > div > ul > li {
    padding: 0.5rem 0;
    text-decoration: underline;
}

#extended-container.half {
    width: 50%;
}

#extended-container.full {
    width: 100%;
}

#extended-container.extended {
    right: 0;
}

#extended-container h4 {
    font-size: 1.2rem;
    font-weight: 900;
    text-transform: uppercase;
    color: #ee5d25;
}

#extended-container-shadow {
    width: 100%;
    height: 100%;

    position: absolute;
    top: 0;

    background: rgba(0,0,0, 0.15);
    backdrop-filter: blur(15px);
    opacity: 0;

    pointer-events: none;

    z-index: 99;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#extended-container-shadow.extended {
    opacity: 100%;

    pointer-events: all;
}

.users-wrapper {
    height: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

#users-container {
    min-width: 300px;
    width: 25%;
    height: 100%;

    position: absolute;
    top: 0;
    right: -100%;

    background: white;

    z-index: 100;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#users-container.extended {
    right: 0;

    -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0, 0.3);

            box-shadow: 0 0 10px 0 rgba(0,0,0, 0.3);
}

#users-container-shadow {
    width: 100%;
    height: 100%;

    position: absolute;
    top: 0;

    background: rgba(0,0,0, 0.15);
    backdrop-filter: blur(15px);
    opacity: 0;

    pointer-events: none;

    z-index: 5;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#users-container-shadow.extended {
    opacity: 100%;

    pointer-events: all;
}

#users-container h4 {
    font-size: 1.2rem;
    font-weight: 900;
    text-transform: uppercase;
    color: #ee5d25;
}

#users-menu {
    width: 100%;

    padding: 10px;

    /*background: rgb(14, 14, 14);*/
    /*background: linear-gradient(335deg, rgb(14, 14, 14) 0%, rgb(33, 49, 37) 87%, rgba(58,112,61,1) 100%);*/
    background: rgb(14, 14, 14);
    background: -webkit-gradient(linear, left bottom, left top, from(rgb(31, 31, 31)), color-stop(92%, rgb(54, 54, 54)), to(rgb(129, 176, 68)));
    background: -webkit-linear-gradient(bottom, rgb(31, 31, 31) 0%, rgb(54, 54, 54) 92%, rgb(129, 176, 68) 100%);
    background: linear-gradient(0deg, rgb(31, 31, 31) 0%, rgb(54, 54, 54) 92%, rgb(129, 176, 68) 100%);
}

#users-menu hr {
    margin: 1rem 0.5rem;
    background: rgba(182, 182, 182, 0.46);
}

.users-collapse-bar {
    width: calc(100% + 20px);

    -webkit-box-sizing: content-box;

            box-sizing: content-box;
    margin: 10px -10px;

    font-size: var(--font-standard);
    letter-spacing: 0.2rem;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    font-family: "Motiva Sans",Arial,Helvetica,sans-serif;
    text-transform: uppercase;

    background: rgba(77, 77, 77, 0.84);
    background: -webkit-gradient(linear, left bottom, left top, from(rgb(31, 31, 31)), color-stop(80%, rgb(54, 54, 54)), to(rgb(38, 38, 38)));
    background: -webkit-linear-gradient(bottom, rgb(31, 31, 31) 0%, rgb(54, 54, 54) 80%, rgb(38, 38, 38) 100%);
    background: linear-gradient(0deg, rgb(31, 31, 31) 0%, rgb(54, 54, 54) 80%, rgb(38, 38, 38) 100%);
}

.users-collapse-bar a {
    width: 100%;

    padding: 0.5rem 1rem;
    color: #ffffff;
    /*color: white;*/
}

.user-status {
    width: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    padding: 0.5rem;
    font-weight: 500;
}

.user-status-others {
    width: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    padding: 0.5rem;
    font-weight: 500;
}

.user-status img {
    height: 100%;
}

.user-status-others img {
    height: 100%;
}

.user-status .user-name {
    font-size: 1.15rem;
    /*color: #dfffa6;*/
    color: #ffffff;
    text-shadow: #1b1e21;
}

.user-status-others .user-name {
    font-size: var(--font-standard);
    /*color: #dfffa6;*/
    color: #ffffff;
    text-shadow: #1b1e21;
}

.user-active {
    /*color: #92e507;*/
    color: #73ff2e;
    text-shadow: 0 1px 1px #1b1e21;
}

.user-inactive {
    color: grey;
}

.user-img-medium {
    width: 4rem;
    height: 4rem;

    background-position: center;
    background-size: cover;

    position: relative;

    border-radius: 0.5rem;

    -webkit-box-shadow: 0 3px 3px 0 rgb(0 0 0 / 30%);

            box-shadow: 0 3px 3px 0 rgb(0 0 0 / 30%);

    overflow: hidden;
}

.user-img-large {
    width: 12rem;
    height: 12rem;

    background-position: center;
    background-size: cover;

    position: relative;

    border-radius: 0.5rem;

    -webkit-box-shadow: 0 3px 3px 0 rgb(0 0 0 / 30%);

            box-shadow: 0 3px 3px 0 rgb(0 0 0 / 30%);

    overflow: hidden;
}

.user-img-overlay {
    width: 100%;
    height: 100%;

    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    font-size: 1.2rem;
    opacity: 0;

    background: rgba(0, 0, 0, 0.6);
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.user-img-overlay * {
    color: white;
}

.user-img-medium:hover .user-img-overlay {
    opacity: 100%;
}

.user-img-medium.user-active {
    border-right: 3px solid #92e507;
}

.stat-box {
    position: relative;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;

    margin-bottom: 1rem;

    border-radius: 0.2rem;
    -webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0, 0.3);
            box-shadow: 0 2px 3px 0 rgba(0,0,0, 0.3);
    overflow: hidden;
}

.stat-box-body {
    width: 100%;
    padding: 10px;
}

.stat-box-header {
    width: 100%;

    padding: 0.5rem;
}

.op-label {
    background: #ee5d25;
}

.ml-label {
    background: #252525;
}

.stat-box-header * {
    height: 100%;
    margin: 0;
}


.stat-box-header h2 {
    color: white;
    font-weight: 600;
    font-size: var(--font-standard);
}

.stat-box-header > div {
    color: #f6f6f6 !important;
    font-style: italic;
}

.thin-card {
    max-width: 1000px;
}
.thin-card .card-body {
    padding: 0;
}

#user_form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

#user_form > div:nth-child(1) {
    min-height: 300px;

    position: relative;

    background: #5e5e5e;
}

#background_wrapper {
    width:100%;
    height: 180px;

    overflow: hidden;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    position: relative;
}

#background_img {
    width: 100%;
}

#details_wrapper {
    width: 100%;
    height: 65%;

    padding: 2rem 5%;

    position: absolute;
    bottom: 0;
    left: 0;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: end;

    z-index: 1;
}

.bottom-right {
    cursor: pointer;

    position: absolute;
    bottom: 15px;
    right: 15px;

    z-index: 2;
}

.fill {
    width: 100%;
    height: 100%;
}

.user-details {
    margin-left: 1rem;
    padding-top: 1rem;

    color: white;
}

.user-name {
    font-size: var(--font-header);
    font-weight: 600;

    text-transform: uppercase;
}

.user-email {
    font-size: var(--font-subheader);

    text-transform: lowercase;
}

.profile-image-upload {
    height: 100%;
    width: 100%;

    z-index: 1;
}

.img_wrapper {
    width: 8rem;
    height: 8rem;

    border-radius: 50%;
    background: #1b1e21;

    position: relative;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    outline: solid 8px #5e5e5e;

    cursor: pointer;
}

.img_wrapper_overlay {
    width: 100%;
    height: 100%;

    font-size: 3rem;

    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    background: white;

    opacity: 0;

    z-index: 2;
    pointer-events: none;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.img_wrapper:hover .img_wrapper_overlay {
    opacity: 30%;
}

.img_wrapper img {
    position: absolute;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.currency-prepend {

}

.text-ad {
    color: var(--text-colour-ad);
}

input[type="range"] {
    width: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    background: transparent;
    cursor: pointer;

    height: 30px;
    padding: 5px 10px;
    border-radius: 10px;
    -webkit-box-shadow: 2px 0 8px var(--secondary-colour-l), 0 2px 3px rgba(0,0,0, 0.3);
            box-shadow: 2px 0 8px var(--secondary-colour-l), 0 2px 3px rgba(0,0,0, 0.3);
}

input[type="range"]::-webkit-slider-runnable-track {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
            align-items: center;
    height: 1rem;
    border-radius: 10px;
    background: #e1e1e1;
    -webkit-box-shadow: inset -1px -1px 4px white, inset 1px 1px 6px rgba(0,0,0, 0.5);
            box-shadow: inset -1px -1px 4px white, inset 1px 1px 6px rgba(0,0,0, 0.5)
}

input[type="range"]::-moz-range-track {
    height: 20px;
    border-radius: 10px;
    box-shadow: inset -1px -1px 4px white, inset 1px 1px 8px
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;

    width: 0.6rem;
    height: 1.5rem;

    background-color: #ee5d25;
    -webkit-box-shadow: inset 0 1px 2px rgba(255,255,255, 0.5), inset 0 -1px 2px rgba(0,0,0, 0.3), 0 0 2px rgba(0,0,0, 0.7);
            box-shadow: inset 0 1px 2px rgba(255,255,255, 0.5), inset 0 -1px 2px rgba(0,0,0, 0.3), 0 0 2px rgba(0,0,0, 0.7);

    border-radius: 20%;
    margin-top: -0.25rem;
}

input[type="range"]::-moz-range-thumb {
    border: none; /*Removes extra border that FF applies*/
    border-radius: 0; /*Removes default border-radius that FF applies*/
    background-color: #5cd5eb;
    height: 2rem;
    width: 1rem;
}

.index-cell > p {
    margin-bottom: 0;
}

.font-sizes {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.radio-wrapper {
    width: 100%;

    background: #ffffff;
    border-radius: 10px;
    margin: 10px 0;
}

.input-section input[type=radio] {
    --active-inner: #00e3ff;
}

.input-section .radio-wrapper:nth-child(1) {
    border-right: solid 2rem #cccccc;
}

.input-section .radio-wrapper:nth-child(2) {
    border-right: solid 2rem #262626;
}

.input-section .radio-wrapper:nth-child(3) {
    border-right: solid 2rem #ee5d25;
}

.input-section .radio-wrapper:nth-child(4) {
    border-right: solid 2rem #262626;
}

.form-control {
    font-size: var(--font-standard);
    border-radius: 0;
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: var(--bs-border-width) solid var(--bs-border-color);
    -webkit-transition: border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}

.form-control.error {
    border: solid 1px #ce0000;
    background: #ffecec;
    color: #ce0000;
}

.file-input * {
    font-size: inherit;
}

.resizable-content {
    width: 100%;

    min-height: 30px;
    min-width: 30px;
    resize: vertical;
    max-height: -webkit-fit-content;
    max-height: -moz-fit-content;
    max-height: fit-content;
}

.input-group-prepend > * {
    height: 100%;
    font-size: inherit;
}

.collapse:not(.show) {
    display: unset;
}

.collapse:not(.in) {
    display: none;
}


.input-group-append * {
    font-size: inherit;
    border-radius: 0;
}

select.form-control {
    -moz-appearance: button-arrow-down; /* Firefox */
    -webkit-appearance: caret; /* Safari and Chrome */
    appearance: menulist-button;
    padding: 6px 30px 6px 6px !important;
}

select.form-control:after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f0d7" !important;
    margin-right: 1rem;
}

.user-display {
    position: absolute;
    left: -154%;
    width: 150%;

    min-height: 200px;
    border-radius: 0.5rem;
    padding: 1rem;

    background: #ffffff;
    color: #1b1e21;
    -webkit-box-shadow: 0 2px 0.4rem 0 rgba(0,0,0, 0.3);
            box-shadow: 0 2px 0.4rem 0 rgba(0,0,0, 0.3);

    z-index: 900001;
}

.input-sublabel {
    width: 100%;
    height: 1.5rem;

    padding: 0 0.4rem;

    border-top-right-radius: 0.2rem;
    border-top-left-radius: 0.2rem;

    color: white;
    background: #737373;

    white-space: nowrap;
    line-height: 1.5rem;
    font-size: var(--font-small);
}

.input-sublabel-bottom {
    width: 100%;
    height: 1.5rem;

    padding: 0 0.4rem;

    border-bottom-right-radius: 0.2rem;
    border-bottom-left-radius: 0.2rem;

    color: white;
    background: #737373;

    white-space: nowrap;
    line-height: 1.5rem;
    font-size: var(--font-small);
}

.radio-wrapper label {
    width: 100%;
    height: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    padding: 0.5rem 1rem;
    margin: 0;
}

.radio-wrapper p {
    font-size: var(--font-standard);

    text-transform: uppercase;
    font-weight: 600;

    margin: 0;
}

.form-check {
    font-size: var(--font-standard);
}

input[type=checkbox] {
        border-width: 1px;
        border-style: solid;
        --tw-border-opacity: 1;
        border-color: rgb(229 229 229 / var(--tw-border-opacity));
    font-size: var(--font-standard);
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
}

.radio-wrapper input[type="radio"]:checked {
    color: red;
}

input[type=checkbox]:not(.switch):after {
    border: 2px solid #275EFE;
    border-top: 0;
    border-left: 0;
}

.document-collapse-header {
    width: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    position: relative;

    margin-top: 1rem;
    padding: 0.5rem 1rem;
    border: solid 1px lightgray;
    overflow: hidden;

    cursor: pointer;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.document-collapse-header h5 {
    font-size: var(--font-small);
}

.children-fill.input-group {
    height: 30px;
}

.children-fill.input-group span {
    padding: 0;
}

.btn-icon-column {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: end;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    padding: 0.5rem;
}

.btn-icon-column div:not(:first-child) {
    margin-top: 15px;
}

.btn-icon {
    padding: 0.5rem;

    font-size: 1.2rem;
    line-height: 1.2rem;
    -webkit-box-shadow: 0 0 2px 0 rgba(0,0,0, 0.25);
            box-shadow: 0 0 2px 0 rgba(0,0,0, 0.25);
    border-radius: 4px;

    -webkit-transition: all 0.2s ease;

    transition: all 0.2s ease;
}

.btn-icon:hover {
    background: white;
}

.btn-red {
    background: darkred;
    color: white;
}

.children-fill > * {
    height: 100%;
}

.btn-input {
    height: 100%;

    padding: 0 1rem;
    border-radius: 0;
    z-index: 0 !important;
}

.btn-input:not(.btn-red):hover {
    color: #3db03d;
}

.btn-input.btn-red:hover {
    color: #ec1515;
}

.btn-collapse {
    width: 100%;
    margin: 0.2rem 0;
    padding: 0.5rem;

    text-align: start;

    background: white;

    -webkit-transition: all 0.3s ease;

    transition: all 0.3s ease;
}

.btn-collapse:hover {
    background: #f1f1f1;
}

.document-action {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    position: relative;

    border-radius: 1rem 0 1rem 0;

    margin: 1rem 0;
    padding: 0.5rem 1rem;
    border: solid 1px lightgray;

    overflow: hidden;

    -webkit-transition: all 0.5s ease;

    transition: all 0.5s ease;
}

.document-action .ribbon {
    width: 50%;
    height: 100%;
    position: absolute;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: end;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    right: -100%;
    background: #ee5d25;
    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);

    -webkit-transition: all 0.5s ease;

    transition: all 0.5s ease;
}

.document-action .ribbon * {
    color: white;
    font-size: 1.5rem;
    margin: 1rem;
}

.document-action:hover .ribbon {
    right: 0;
}

.document-action:hover {
    color: #ee5d25;
}

.no-wrap {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
}

.row {
    margin-right: 0;
    margin-left: 0;
}

.row > .w-100 {
    padding: 0;
}

.w-100 {
    /*padding: 0;*/
}

.required-row {
    color: #797979;
    margin-top: 50px;
}

.delete_button_small_spacer {
    height: 35px;
    width: 100%;
    border: none;
    background-color: white;

    margin-top: 10px;
}

.delete_button_small {
    height: 35px;
    width: 100%;
    border: none;
    background-color: white;
    color: var(--primary-colour);

    margin-top: 10px;
}

.per {
    margin-top: 10px;
    line-height: 30px;
}

.line_select {
    height: 35px;
    width: 100%;
    margin-top: 10px;
}

.changelog {
    margin-top: 20px;
    color: #2a96a5;
    font-weight: bold;
}

.changelog a {
    text-decoration: none;
}

#total_row {
    display: none;

    margin-top: 1rem;
    font-weight: 600;
}

.line_spacer {
    height: 35px;
    width: 100%;

    margin-top: 10px;
    padding-left: 10px;
}

.line_item {
    height: 35px;
    width: 100%;

    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;

    border: 0;
    background-color: #f6f6f6;

    margin-top: 10px;
    padding-left: 10px;
}

.line_item:focus {
    border: 0;
    background-color: #f8f8f8;
}

.line-input {
    height: 40px;
    width: 100%;

    border-radius: 0;
    border: 0;
    background-color: #f6f6f6;

    margin-top: 10px;
    padding-left: 10px;
}

.delete_button {
    height: 40px;
    width: 40px;

    border-radius: 50%;
    border: 0;
    background-color: var(--primary-colour);
    color: white;

    margin-top: 10px;
}

.field_spacer {
    height: 40px;
    width: 40px;

    margin-top: 10px;
}

.text-no-wrap {
    white-space: nowrap;
}

.display-contents {
    display: contents;
}

.difference-tag {
    padding: 0.3rem;
    border-radius: 3px;

    min-width: 4rem;

    background: #ececec;
}

.status-tag {
    height: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    white-space: nowrap;
    text-transform: uppercase;
    font-weight: bold;

    font-size: 0.7rem;

    padding: 0.25rem 0.5rem;

    border-radius: .25rem;
    color: white;
}

.date-tag {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    padding: 0 0.5rem;
    margin-right: 1rem;
    white-space: nowrap;
    text-transform: uppercase;

    font-size: var(--font-small);

    border-radius: .25rem;
    color: white;
}

.green-tag {
    background: #5aaf5a;
}

.red-tag {
    background: #af3a3a;
}

.blue-tag {
    background: #577fa9;
}

.grey-tag {
    background: grey;
}

.oaple-tag {
    background: #ee5d25;
    background-color: #ee5d25 !important;
}

.black-tag {
    background: #111111;
}

.orange {
    color: #ee5d25;
}

.valid_input {
    border: solid 1px #19a203;
    color: #19a203;
}

.invalid_input {
    border: solid 1px #f30e0e;
    color: #f30e0e;
    font-weight: bold;
}

.inverse-padding {
    padding: 0;
    margin: 1.25rem;

    -webkit-box-shadow: 0 2px 3px 1px #cfcfcf;

            box-shadow: 0 2px 3px 1px #cfcfcf;
}

.card-padding {
    padding: 1.25rem !important;
}

.card-padding-x {
    padding: 0 1.25rem !important;
}

.z-1 {
    z-index: 1;
}

.large-collapse-bar {
    width: 100%;

    font-size: var(--font-medium);
    font-weight: 600;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    border-bottom: solid 1px #ee5d25;
}

.large-collapse-bar a:nth-child(1) {
    width: 100%;
    color: #2c2c2c;
}

.large-collapse-bar a span::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.large-collapse-bar a[aria-expanded="false"] span::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f0d7" !important;
    margin-right: 1rem;
}

.large-collapse-bar a[aria-expanded="true"] span::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f0d8" !important;
    margin-right: 1rem;
}

.simple-collapse-bar {
    width: 100%;

    background: #d9d9d9;

    font-size: var(--font-standard);
    font-weight: 600;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    border-bottom: solid 3px #a1a1a1;
}

.simple-collapse-bar a {
    width: 100%;
    color: #565656;
}

.simple-collapse-bar a span::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.simple-collapse-bar a[aria-expanded="false"] span::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f0d7" !important;
    margin-right: 1rem;
}

.simple-collapse-bar a[aria-expanded="true"] span::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f0d8" !important;
    margin-right: 1rem;
}

.view-collapse-bar {
    width: 100%;

    border-bottom: solid 1px grey;

    font-size: var(--font-medium);
    font-weight: 600;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.view-collapse-bar a {
    text-decoration: none;
    width: 100%;
}

.collapse-bar-bordered {
    width: 100%;
    height: 2.4rem;

    position: relative;

    border-radius: 4px 4px 0 0;
    border: solid 2px #ee5d25;

    font-size: var(--font-small);
    font-weight: 600;

    overflow: visible;
}

.collapse-bar-bordered div {
    position: absolute;

    font-size: 1.2rem;
    padding: 0 1rem;
    top: -1rem;

    background: inherit;
}

.collapse-bar {
    width: 100%;

    border-radius: 4px;
    background: white;

    font-size: var(--font-standard);
    font-weight: 600;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.collapse-bar a {
    text-decoration: none;
    color: inherit;
}

.order-title {
    width: 100%;
}

.order-info {
    max-width: none;
    width: 100%;
    margin: 0;
}

.checkbox-div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    min-width: 125px;
}

.checkbox-div-vertical {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    min-width: 125px;
}

.finput {
    padding: 0 5px 0 5px;
}

.date-padding-r {
    padding-right: 15px;
}

.date-padding-l {
    padding-left: 15px;
}

.border-cut {
    border-radius: 0;
}

.contact-img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    height: 90px;
    width: 90px;
}

#lightbox {
    width: 100vw;
    height: 100vh;

    position: fixed;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    background: rgba(0,0,0, 0.8);
    z-index: 9998;
}

.close-lightbox {
    position: absolute;
    z-index: 9999;

    right: 3%;
    top: 3%;
    color: white;
    font-size: 2rem;

    padding: 1rem;

    cursor: pointer;
}

#lightbox-img {
    max-height: 80%;
    max-width: 80%;
}

.freeze-scrolling {
    overflow: hidden;
}

.display-img {
    max-height: 75px;
    max-width: 75px;
}

.remove-sticky * {
    position: relative !important;
}

.card-header img {
    margin-right: 20px;
}

.form-background {
    background: #f3f3f3;
}

#content-wrapper .table td {
    vertical-align: middle;
}

#conditional_deposit {
    display: none;
}

#conditional_paid {
    display: none;
}

.menu-button {
    background: none;
    color: black;
}

.btn-create {
    background-color: #009100;
    color: white;
    font-weight: bold;

    padding-left: 25px;
    padding-right: 25px;

    border-radius: 50px;
}

.btn-confirm {
    background-color: var(--primary-colour);
    color: white;
    font-weight: bold;
    width: 100%;

    border-radius: 3px;
}

.icon-center {
    height: 35px;
    line-height: 35px;
    text-align: center;
    width: 8%;
}

.completed {
    color: #464646;
    font-style: italic;
}

.tab-button-style {
    color: #c43b00;
}

.section-mw {
    max-width: 1400px;
}

.white-space {
    height: 200px;
}

.white-space-half {
    height: 100px;
}

.white-space-quarter {
    height: 50px;
}

.flex-space-between {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.muted-text {
    color: darkgray;
    font-size: var(--font-standard);
}

.muted-row td {
    color: darkgray !important;
    font-size: var(--font-standard) !important;
}

.draft-row td {
    color: #4b81ee !important;
    font-size: var(--font-standard) !important;
}

.overdue {
    background: #ffd4d4;
}

.unapproved {
    background: #efefef;
}

.muted-card * {
    color: darkgray !important;
}

.unmuted-text {
    color: #1a1a1a;
    font-size: var(--font-standard);
}

.partner-logo {
    width: 100%;

    margin-bottom: 2.5rem;
}

.update-btn {
    border: none;
    background: none;

    float: right;

    padding: 0;
    margin: 0;
    color: #131313;
}

.update-box {
    -webkit-box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
            box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
    border-radius: 10px;

    background-color: white;

    width: 48%;
    margin: 0 1%;

    overflow: hidden;

    float: left;
}

.update-box-list {
    width: 48%;
    margin: 0 1%;
    padding: 5px;

    overflow: hidden;

    float: left;
}

.update-header {
    width: 100%;
    padding: 10px 20px;

    font-size: 1.2rem;
    font-family: inherit;

    background-color: var(--primary-colour);
    color: white;
}

.update-body {
    font-size: var(--font-standard);
    font-family: inherit;

    vertical-align: middle;

    padding: 10px 20px;
}

.update-field {
    width: 85%;
    height: 80px;
    line-height: 20px;
}

.update-box textarea:focus, input:focus {
    outline: none;
}

.sidebar-button {
        display: block;
        gap: 1rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        font-weight: 700;
        --tw-text-opacity: 1;
        color: rgb(156 163 175 / var(--tw-text-opacity));
}

.sidebar-button:hover {
        --tw-text-opacity: 1;
        color: rgb(8 145 178 / var(--tw-text-opacity));
}

.custom_footer {
    border-radius: 0 !important;
    background: var(--primary-colour);
    color: white;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background-color: #ffffff;
}

::-webkit-scrollbar-thumb {
    border-radius: 5px;
    border-left: 0;
    border-right: 0;
    background-color: #ee5d25;
}

.w-5 {
    width: 5%;
}

.update-div {
    margin-bottom: 25px;
    padding: 0 25px;

    border-radius: 10px;
    background-color: white;
    -webkit-box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
            box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
}

.update-content {
    padding: 25px 0;
}

.update-banner {
    height: 75px;
}

.show_subheading {
    color: #292f38;
    font-weight: 600;
    font-size: 2.1rem;
}

.notification {
    font-size: var(--font-standard);
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.flex-page {
    width: 100%;
    height: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.not_shipped, .in_transit, .delivered {
    border-radius: 25px;

    display: inline-block;
    padding: 3px 20px;

    font-size: var(--font-small);
    font-weight: bold;
    text-transform: uppercase;
}

/* Services Section */

.services-box {
    height: 38vh;
    width: 250px;

    min-height: 340px;

    padding: 20px;

    border: 1px solid #d6d3df;
    border-top-right-radius: 40px;

    margin-left: 1.5rem;
    margin-top: 1.5rem;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    cursor: pointer;
    background-color: #fff;

    position: relative;

    justify-content: flex-end;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;

    -webkit-transition: all .5s ease;

    transition: all .5s ease;
}

.services-box:hover {
    background: var(--primary-colour);
}

.services-box:hover .services-name {
    color: #ffffff;
}

.services-box:hover span {
    color: #00a3ec;
}

.services-box:hover .services-section-b {
    height: 50%;
}

.services-section-a {
    width: 100%;
}

.services-section-b {
    height: 0;
    width: 100%;
    margin: 0;
    font-size: 15px;

    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;

    color: white;

    -webkit-transition: all .5s ease;

    transition: all .5s ease;
}

.services-box p {
    margin-bottom: 0;
}

.services-icon {
    height: 80px;

    margin: auto auto 30px 0;
}

.services-name {
    color: #1c1c1c;

    text-transform: uppercase;
    font-weight: bold;

    width: 100%;
    margin: 0;
    font-size: 1.3rem;

    -webkit-transition: all .5s ease;

    transition: all .5s ease;
}

.services-box span {
    color: var(--primary-colour);

    text-transform: uppercase;
    font-weight: bold;

    width: 100%;
    margin: 0;
    font-size: 1.3rem;

    -webkit-transition: all .5s ease;

    transition: all .5s ease;
}
/* End of Services Section */

/* Slider Input Section */
/* The switch - the box around the slider */
.toggle-wrapper {
    width: 50%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    background: white;
    -webkit-box-shadow: 0 0 4px 0 rgba(0,0,0, 0.2);
            box-shadow: 0 0 4px 0 rgba(0,0,0, 0.2);
    border-radius: 0.3rem;
    padding: 1rem;

    font-size: var(--font-standard);
}

.toggle-container {
    margin: 0.2rem;
    padding: 0.2rem;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;

    border-bottom: solid 1px #dedede;
}

.toggle-container label {
    white-space: pre-wrap;
    margin: 0;
}

.external-index-link {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        font-weight: 500;
}

.external-index-link:hover {
        text-decoration-line: underline;
}

.index-link {
        font-weight: 500;
}

.index-link:hover {
        text-decoration-line: underline;
}

.switch-wrapper {
    position: relative;
    display: inline-block;
    min-width: 3rem;
    width: 3rem;
    height: 1.5rem;
}

/* Hide default HTML checkbox */
.switch-wrapper input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 1.1rem;
    width: 1.1rem;
    left: 0.2rem;
    bottom: 0.2rem;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    -webkit-box-shadow: 0 0 1px #2196F3;
            box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(1.5rem);
    transform: translateX(1.5rem);
}

hr {
    color: grey;
    margin: 0 1rem;
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}
/* End of Slider Input Section */

#table-compact th {
    padding: 0.2rem;
}

#table-compact td {
    padding: 0.2rem;
    font-weight: normal;
}

.table-custom-color {
    border-radius: 5px;
    overflow: hidden;
}

.table-custom-color th {
    background: var(--text-colour-ad);
    color: white;
}

.table-custom-color td {
    background: var(--secondary-colour);
    color: var(--text-colour-ad);
}

.table-custom-color th, .table-custom-color td {
    padding: 5px 1rem !important;
}

table {
    border-collapse: collapse;
    width: 100%;
}

.table th, .table td {
    font-size: var(--font-standard);
    padding: 0.35rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;

    height: 1.5rem;
    line-height: 1.5rem;
}

.transaction_form td {
    border: none;
}

.wrap-headers th {
    white-space: pre-wrap !important;
    word-break: unset !important;
}

th, td {
    padding: 4px 2px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.cell-anchors td a {
    width: 100%;
    height: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

#table-cellstyle {

}

.document-widget {
    margin: 0 15px;

    border-radius: 8px;
    border: solid 2px #737373;

    display: inline-block;
    min-width: 120px;
    padding: 15px 10px;

    -webkit-box-shadow: 0 2px 4px 0 rgba(32, 33, 36, 0.3);

            box-shadow: 0 2px 4px 0 rgba(32, 33, 36, 0.3);
}

.document-widget i {
    font-size: 3rem;
    display: block;
    margin-bottom: 20px;
}

.justify-content-evenly {
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
}

.btn-max-height {
    max-height: 3rem;
}

.not_shipped {
    border: solid 3px #8d0000;
    color: #8d0000;
}

.in_transit {
    border: solid 3px #f37c00;
    color: #f37c00;
}

.delivered {
    border: solid 3px #009100;
    color: #009100;
}

.company-tab {
    background-color: white;
    min-width: 600px;
}

.company-table {
    background: white;
}

#alias_row {
    display: none;
}

.visible-alias {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

#collapse_alias {
    max-height: 500px;

    overflow-y: auto;
    -webkit-box-shadow: inset 0 0 6px 0 lightgrey;
            box-shadow: inset 0 0 6px 0 lightgrey;
}

#remove_alias {
    display: none;
}

.details-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    padding: 1rem;
    margin: 5px;

    border-radius: 5px;
    background: #ededed;

    cursor: pointer;
}

.details-id {
    padding: 1rem 0.5rem;
    margin: 5px;

    font-weight: bold;
    font-size: 1.2rem;
}

.details-content {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;

    padding: 1rem;
    margin: 5px;

    white-space: break-spaces;
    font-size: var(--font-standard);
    color: #6c6c6c;
}

.selected-alias {
    background: #edd8cb;
}

.invisible-field {
    height: 0;
    width: 0;
    opacity: 0;
}

.row-relative {
    position: relative;

    overflow: hidden;
}

.in-line-menu {
    position: relative;
    z-index: 1;
}

.in-line-menu * {
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.in-line-menu.expanded * {
    color: white;
}

.in-line-dropdown {
    width: 100%;
    height: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    position: absolute;
    top: 0;
    left: -101%;

    background: #313131;

    -webkit-transition: all 0.5s ease;

    transition: all 0.5s ease;

    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.in-line-menu-item {
    width: unset;
    height: 100%;

    background: #4c4c4c;
    -webkit-box-shadow: 0 0 2px 1px rgb(0 0 0 / 48%);
            box-shadow: 0 0 2px 1px rgb(0 0 0 / 48%);
    margin-left: 0.5rem;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    padding: 0 1rem;

    position: relative;
}

.in-line-menu-item:hover {
    background: #414141;
}

.in-line-menu-item:hover * {
    color: #ee5d25;
}

.in-line-menu-item * {
    background: unset;
    height: 100%;

    color: white;
}

.in-line-menu-item a {
    color: white;
    text-decoration: none;
}

.in-line-dropdown.expanded {
    left: 0;
}

.table-fixed {
    table-layout: fixed;
}

.glance-table {
    background: #fafafa;
}

.glance-table td {
    /*height: 1px;*/

    padding: 0.6rem;
}

.glance-table td div {
    height: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.position-relative {
    position: relative;
}

table .text_green {
    color: green;
    font-weight: 600;
}

table .invalid_row, .invalid_row, .table-fixed-head-wrapper > tbody > .invalid_row, .table-fixed-head-wrapper tr:nth-child(even).invalid_row {
    background: #ffe8e8;
    background-color: #ffe8e8;
}

table .text_red {
    color: darkred;
    font-weight: 600;
}

.text_red {
    color: darkred;
    font-weight: 600;
}

.text_green {
    color: green;
    font-weight: 600;
}

.position-unset {
    position: unset;
}

.range-management-box {
    width: 50%;
    padding: 0 3%;
}

.no-radius {
    border-radius: unset;
}

.overflow-x {
    overflow-x: auto;
}

.overflow-y {
    overflow-y: auto;
}

input.readonly {
    background: #dedede;
}

.mobile-min, .mobile-min * {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.mobile-min::-webkit-scrollbar {
    display: none;  /* Safari and Chrome */
}

.min-description    { min-width: 200px; }
.min-order          { min-width: 150px; }
.min-price          { min-width: 100px; }
.min-discount       { min-width: 100px; }
.min-quantity       { min-width: 100px; }
.min-currency       { min-width: 100px; }
.min-tax            { min-width: 100px; }
.min-packing        { min-width: 100px; }
.min-cbm            { min-width: 100px; }

.min-file           { min-width: 300px; }

#customer-detail-table td:nth-child(-n+5) {
    max-width: 20rem;
}

#customer-detail-table td:nth-child(n+5) {
    min-width: 20rem;
}

.table-wrapper {
    width: 100%;
}

.table thead th {
    vertical-align:middle;
    white-space: nowrap;
}

.table-fixed-head-wrapper {
    overflow-y: auto;
    max-height: 300px;
}

.table-fixed-head-wrapper thead {
    position: sticky;
    top: -1px;
    z-index: 1;

    background: white;
}

.table-fixed-head-wrapper table {
    border-collapse: collapse;
    width: 100%;
}

.table-fixed-head-wrapper tr:nth-child(even) {
    background-color: #e8e8e8;
}

.table-fixed-head-wrapper-white {
    overflow-y: auto;
    max-height: 500px;
}

.table-fixed-head-wrapper-white thead {
    position: sticky;
    top: -1px;
    z-index: 2;

    background: white;
}

.table-fixed-head-wrapper-white table {
    border-collapse: collapse;
    width: 100%;
}

.table-fixed-head-wrapper-large {
    overflow-y: auto;
    max-height: 500px;
}

.table-fixed-head-wrapper-large thead {
    position: sticky;
    top: -1px;
    z-index: 2;

    background: white;
}

.table-fixed-head-wrapper-large table {
    border-collapse: collapse;
    width: 100%;
}

.table-fixed-head-wrapper-large tr:nth-child(even) {
    background-color: #e8e8e8;
}

.table-fixed-head-wrapper-scroll {
    overflow-y: auto;
    max-height: 300px;
}

.table-fixed-head-wrapper-scroll thead {
    position: sticky;
    top: -1px;
    z-index: 1;

    height: 100%;

    background: white;
}

.table-fixed-head-wrapper-scroll table {
    border-collapse: collapse;
    width: 100%;
}

.table-fixed-head-wrapper-scroll-thinheader {
    overflow-y: auto;
    max-height: 300px;
}

.table-fixed-head-wrapper-scroll-thinheader thead {
    position: sticky;
    top: -10px;
    z-index: 1;

    height: 100%;

    background: white;
}

.table-fixed-head-wrapper-scroll-thinheader table {
    border-collapse: collapse;
    width: 100%;
}

.table-compact th, .table-compact td {
    padding: 0.25rem;
}

.title-row {
    background: #f1f1f1;
    font-weight: 600;
}

.update-div h1 {
    font-size: medium;
    font-weight: bold;
    text-transform: uppercase;

    margin: 15px 0;
    padding-left: 15px;
}

.update-div p {
    font-size: small;

    padding-left: 15px;
}

.confirmed_button {
    background: #98f698;
    color: #111111;
}

.dropdown-item {
    z-index: 1080;
}

.widget-div {
    height: 500px;
}

.resource-title {
    text-transform: uppercase;
    color: var(--primary-colour);
    font-weight: bold;

    padding: 1rem;
}

.resource-title .row {
    margin: 0 10px;
}

.card-header h1 {
    position: relative;

    display: inline-block;
    font-size: 1.6rem;
    font-weight: bold;
}

.tooltiptext {
    font-size: var(--font-standard);
    padding-left: 25px;
}

.dropdown-menu {
    font-size: var(--font-standard);
    z-index: 1100;
}

#branch-dropdown-menu.show {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.dropdown-menu-right {
    left: unset;
}

.dropdown-menu-left {
    right: unset;
}

.watermark {
    position: fixed;
    bottom: 0;
    right: 0;
    user-select: none; /* Non-prefixed version for Chrome, Opera and*/
    -ms-user-select: none; /* Internet Explorer, Edge */
    -moz-user-select: none; /* Firefox */
    -khtml-user-select: none; /* Konqueror HTML */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
}

.user-img-small {
    width: 2rem;
    height: 2rem;

    background: white;
    border: solid 1px grey;
    border-radius: 50%;
    overflow: hidden;
}

.user-img-small img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

.half-down {
    margin-top: auto;
    height: 50%;
}

.services-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    width: 100%;
}

.services-section {
    width: 50%;
    min-width: 800px;
    max-width: 2000px;
    padding: 20px 3rem;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.col-form-label {
    white-space: nowrap;
}

.table-layout-auto {
    width: 100%;
    table-layout: auto;
    text-overflow: ellipsis;
}

.hidden {
    display: none !important;
}

.hidden-opacity {
    opacity: 0;
    pointer-events: none;
}

.exp-column {
    width: 1px;
    white-space: nowrap;
}

.columnList {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    margin: 28px 4px 20px 4px;
}

.flyoutColumn {
    display: table-cell;
    vertical-align: top;
    word-wrap: break-word;
    min-width: 224px;
    margin: 0 4px;
}

.columnList .flyoutColumn .columnHeader {
    font-size: var(--font-standard);
    line-height: 1.1;
    letter-spacing: 0;
    color: #393a3d;
    font-weight: 600;
    margin: 0 auto !important;
    padding: 12px 20px;
    white-space: nowrap;
}

.columnList .flyoutColumn ul {
    margin: 0;
    padding-left: 0;
}

.columnList .flyoutColumn ul li {
    display: block;
    line-height: 1.5em;
    margin: 0;
}

.columnList .flyoutColumn ul li:hover {
    background-color: #f1f1f1;
}

.columnList .flyoutColumn ul li .columnLink {
    display: block;
    font-size: var(--font-small);
    line-height: 1.43;
    color: #393a3d;
    padding: 8px 20px;
    position: relative;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
}

.flyoutFooter {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 39px;
    font-size: var(--font-standard);

    border-top: 1px solid var(--primary-colour);
}

.footerBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: end;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 39px;
    font-size: var(--font-standard);
}

.toggleLink {
    cursor: pointer;
    border: none;
    background-color: transparent;
    margin-left: auto;
    font-size: inherit;
}

.toggleLink .buttonText {
    text-align: center;
    font-weight: 500;
    color: var(--primary-colour);
}

.main-item {
    padding: 5px;
    margin: auto;

    width: 80%;
    height: 30px;

    border: 0;
    background-color: var(--primary-colour-l);
    -webkit-box-shadow: 0 1px 3px 0 rgba(32, 33, 36, 0.28);
            box-shadow: 0 1px 3px 0 rgba(32, 33, 36, 0.28);
    border-radius: 5px;

    color: white;
}

.sub-items {
    position: absolute;

    padding: 10px;
    top: 60px;
    left: 15px;
    z-index: 10;

    display: none;

    width: inherit;
    min-width: 200px;
    -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    background: #fff;
    -webkit-transition: none;
    transition: none;
}

/* Tab Styles */
.tab {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

/* Style the buttons that are used to open the tab content */
.tab button {
    font-weight: 600;
    white-space: nowrap;

    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 6px 16px;
}

/* Change background color of buttons on hover */
.tab > a > * {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    overflow: hidden;
    /*border-top-right-radius: 0.5rem; */
    /*border-top-left-radius: 0.5rem; */

    border-bottom: solid 1px #cbcbcb;
}

.tab > div {
    border-bottom: solid 1px #cbcbcb;
}

.tab button:hover {
    color: var(--primary-colour);
}

.tablinks {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.active-tab .tablinks {
    border-left: 1px solid var(--primary-colour);
    border-right: 1px solid var(--primary-colour);
    border-top: 1px solid var(--primary-colour);
    border-bottom: 0;

    color: var(--primary-colour);
}

/* Style the tab content */
.tabcontent {
    display: none;
    border-top: none;
}

.tabheader {
    font-size: 19px;
    font-weight: 200;
}

.list-cellbox {
    background-color: white;
    border: solid 0.2px lightgrey;
    margin: 10px 5px 0;
    padding: 0 10px;
    border-radius: 15px;
    float: left;

    height: 25px;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;

    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    font-size: var(--font-small);
}

.list-cellbox input {
    cursor: pointer;
}

.list-cellbox:hover {
    background-color: #ececec;
}

.list-cellbox:hover input {
    background-color: #ececec;
}

#myTab a {
    color: white;
    text-decoration: none;
}

#invoiceTab a {
    color: white;
    text-decoration: none;
}

#groupTab a {
    color: white;
    text-decoration: none;
}

.list-management {
    width: 90%;
    height: 40px;
    line-height: 40px;

    margin: 10px auto;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    background-color: white;
    border-radius: 4px;

    font-size: var(--font-small);

    cursor: pointer;
    white-space: nowrap;
}

.list-role input {
    cursor: pointer;
}

.list-role:hover {
    background-color: #ececec;
}

.list-role:hover input {
    background-color: #ececec;
}

.list-managed-cell {
    -webkit-box-flex: 80%;
        -ms-flex: 80%;
            flex: 80%;
    height: 40px;
    line-height: 40px;

    padding-left: 20px;

    font-size: var(--font-small);
}

.list-add {
    -webkit-box-flex: 20%;
        -ms-flex: 20%;
            flex: 20%;

    font-size: var(--font-standard);
}

.list-icon {
    -webkit-box-flex: 20%;
        -ms-flex: 20%;
            flex: 20%;
    font-size: 0.7rem;

    line-height: 25px;
}

.list-cell {
    -webkit-box-flex: 80%;
        -ms-flex: 80%;
            flex: 80%;
    background-color: white;
    border: none;
    float: left;

    line-height: 25px;
}

#urgent_markers {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
    padding-bottom: 0.5rem;

    overflow-x: auto;
}

#urgent_markers a {
    padding: 0.4rem;
    font-size: var(--font-small);

    background: #ed4606;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    white-space: nowrap;

    color: white;

    border-radius: 4px;
}

#warning_markers {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
    padding-bottom: 0.5rem;

    overflow-x: auto;
}

#warning_markers a {
    padding: 0.4rem;
    font-size: var(--font-small);

    background: #737373;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    white-space: nowrap;

    color: white;

    border-radius: 4px;
}

.management-header {
    -webkit-box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
    box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);

    height: 45px;
    line-height: 45px;

    background-color: var(--primary-colour);
    color: white;

    -webkit-box-flex: 32%;

        -ms-flex: 32%;

            flex: 32%;
    margin: 0 1%;

    font-size: 1.3rem;
    text-align: center;

    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
}

.management-column {
    -webkit-box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
    box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);

    height: 750px;
    width: 32%;
    margin: 0 1%;
    padding: 0 5px;

    float: left;

    display: block;
    overflow: scroll;
    overflow-x: hidden;

    text-transform: uppercase;
}

.management-row {
    width: 90%;
    margin: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.dash-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.dash-column {
    background-color: white;
    border-radius: 10px;
    overflow: hidden; /* forces children to obey border-radius */

    -webkit-box-flex: 1;

        -ms-flex: 1;

            flex: 1;
    /*max-width: 23%;*/
    min-width: 300px;

    position: relative;
    width: 100%;

    float: left;

    margin-right: 1%;
    margin-left: 1%;

    -webkit-box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);

            box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
}

.children-no-margin > * {
    margin: 0;
}

.svg-white {
    fill: white;
    stroke: white;
}

.svg-black {
    fill: black;
    stroke: black;
}

.sidebar-width {
    width: 14rem;
}

.page-title {
    text-shadow: #505050 0 2px 5px;
    color: white;
    font-size: 50px;
}

.page-title-line {
    width: 10%;
    height: 3px;
    border: none
}

.sub-border-top {
    border-top: none;
}

.navigation-internal {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-pack: justify;

        -ms-flex-pack: justify;

            justify-content: space-between;
}

.nav-box {
    border-bottom: solid 1px #a2a2a2;
    height: 50px;
    line-height: 50px;
    width: 80%;
    padding-bottom: 20px;

    color: #a2a2a2;
    text-transform: uppercase;
    font-weight: 600;
    font-size: var(--font-small);
}

.nav-box a {
    text-decoration: none;
}

.nav-box a:hover {
    color: #363636;
}

.use-button {
    display: block;
}

.navigation-submenu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.navbar-nav-custom {
    list-style: none;
    margin-bottom: 0;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

.navbar-nav-custom .nav-item a {
    color: var(--text-colour-h);
}

.navbar-nav-custom .nav-item a:hover {
    color: var(--text-colour-h);
}

.navbar-scrolled {
    display: none;
}

.navbar-hamburger-scrolled {
    margin: 0.5rem 0;
}

.widget-content {
    padding: 20px;
}

.widget-header {
    font-size: 1.5rem;

}

.widget-header h1 {
    color: var(--primary-colour);
    font-size: 4rem;
}

.widget-body {
    font-size: var(--font-standard);
}

.widget-footer {
    width: 100%;
    background-color: var(--primary-colour);

    padding: 15px 0;

    text-align: center;
}

.widget-status {
    width: 100%;
    padding: 10px 0;

    text-align: center;
}

.widget-bar {
    width: 100%;
    background-color: var(--primary-colour);

    background-size: cover;
    background-position: center;

    padding: 15px 10px 5px 10px;

    text-align: left;
}

.widget-bar p {
    font-size: 1.1rem;
    color: white;
    font-weight: 700;
    text-shadow: 0 1px #262626;

    margin-bottom: 0;
}

.widget-footer a {
    color: white;
}

.font-standard {
    font-size: var(--font-standard);
}

.input-icon-left {
    display: block;

    background-color: white;

    max-width: 70px;
    min-width: 50px;
    width: 15%;
}

.input-width {
    width: 10rem;
}

.heading-bar {
    height: 3px;
    border: none;

    width: 10%;
}

.avatar {
    width: 50px;
    height: 50px;

    margin-top: 15px;

    border-radius: 50%;
}

.simple-cover {
    width: 100%;
    height: 100%;

    position: absolute;
    left: 0;
    top: 0;

    z-index: 3;

    background: white;

    opacity: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    -webkit-transition: all 0.2s ease;

    transition: all 0.2s ease;
}

.simple-cover-transparent {
    width: 100%;
    height: 100%;

    position: absolute;
    left: 0;
    top: 0;

    z-index: 3;

    opacity: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    -webkit-transition: all 0.2s ease;

    transition: all 0.2s ease;
}

.simple-cover.hide {
    opacity: 0;
    pointer-events: none;
}

/* Payment Search CSS */
#toggle-payment-search {
    z-index: 97;
}

#payment-search {
    display: none;

    z-index: 97;

    width: 400px;
    border-radius: 15px 15px 0 15px;
    -webkit-box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
            box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
}

.btn-payment-search {
    position: fixed;
    z-index: 98;

    bottom: 65px;
    right: 25px;

    width: 50px;
    height: 50px;
    padding: 5px 8px;
    font-size: 12px;
    line-height: 1.33;
    border-radius: 50%;
    border: none;

    background-color: white;
    -webkit-box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
            box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
    color: black;

    -webkit-transition: all 0.5s ease;

    transition: all 0.5s ease;
}

.box-payment-search {
    position: fixed;
    bottom: 100px;
    right: 25px;

    padding: 25px 15px;

    border: none;
    background-color: white;

    -webkit-transition: all 0.5s ease;

    transition: all 0.5s ease;
}

#notes-searchbar {
    margin: 1rem 0;
}

/* Tag Search CSS */
#toggle-tag-search {
    z-index: 98;
}

#tag-search {
    display: none;

    z-index: 98;

    width: 400px;
    border-radius: 15px 15px 0 15px;
    -webkit-box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
            box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
}

.min-h-250 {
    min-height: 250px;
}

.btn-tag-search {
    position: fixed;
    z-index: 98;

    bottom: 45px;
    right: 25px;

    width: 50px;
    height: 50px;
    padding: 5px 8px;
    font-size: 12px;
    line-height: 1.33;
    border-radius: 50%;
    border: none;

    background-color: white;
    -webkit-box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
            box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
    color: black;

    -webkit-transition: all 0.5s ease;

    transition: all 0.5s ease;
}

.box-tag-search {
    position: fixed;
    bottom: 100px;
    right: 25px;

    padding: 25px 15px;

    border: none;
    background-color: white;

    -webkit-transition: all 0.5s ease;

    transition: all 0.5s ease;
}

/* Bug Reporting CSS */
#toggle-bug-report {
    z-index: 99;
}

#bug-report {
    display: none;

    z-index: 99;

    width: 300px;
    border-radius: 15px 15px 0 15px;
    -webkit-box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
            box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
}

.btn-bug {
    position: fixed;
    z-index: 98;

    bottom: 25px;
    right: 25px;

    width: 50px;
    height: 50px;
    padding: 5px 8px;
    font-size: 12px;
    line-height: 1.33;
    border-radius: 50%;
    border: none;

    background-color: white;
    -webkit-box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
            box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
    color: black;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.expand-right {
    position: fixed;

    bottom: 25px;
    right: 0;

    background: #dedede;
    text-align: center;
    padding: 15px 0;

    width: 25px;

    border-radius: 20% 0 0 20%;
}

#hover-action {
    width: 50px;
    height: 50px;

    position: fixed;

    bottom: 25px;
    right: 25px;

    z-index: 101;
}

#hover-action.collapsed button {
    right: -100% !important;
}

#hover-action:hover {
    width: 300px;
    height: 250px;
}

#hover-action:hover .btn-tag-search {
    bottom: 100px !important;
}

#hover-action:hover .box-tag-search {
    bottom: 175px !important;
}

#hover-action:hover .btn-payment-search {
    bottom: 175px !important;
}

#hover-action:hover .box-payment-search {
    bottom: 250px !important;
}

.box-bug {
    position: fixed;
    bottom: 100px;
    right: 25px;

    padding: 25px 15px;

    border: none;
    background-color: white;
}

.btn-hide-sidebar {
    position: fixed;

    bottom: 25px;
    left: 0;

    z-index: 5;

    padding: 0.75rem 2rem;
    font-size: 0.75rem;
    font-weight: bold;
    line-height: 1.33;
    border: none;
    border-radius: 0 10px 10px 0;

    background-color: white;
    -webkit-box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
            box-shadow: 0 1px 6px 0 rgba(32, 33, 36, 0.28);
    color: black;
}

.report h2 {
    margin-bottom: 15px;

    font-weight: bold;
    text-transform: uppercase;
    color: var(--primary-colour);
}

.report input {
    margin: 15px 0;
}

.report textarea {
    margin: 20px 0;
    height: 200px;
}

.report button {
    width: 100%;
}
/* End of Bug Reporting CSS */

/* Public CS */
.placeholder_name-box {
    border-left: solid !important;
    border-left-color: var(--primary-colour) !important;
    border-left-width: medium !important;

    padding-left: 10px;
}

.placeholder_name-header {
    font-size: 25px !important;
    font-weight: bold !important;
}

.placeholder_name-header h3 {
    font-size: 2.5rem;
}
/* End of Public CSS */

/* Testing Inputs */
.label-section {
    display: inline-block;
    width: 100%;
}

.input-section {
    display: inline-block;
    width: 100%;
}

.custom-tab-heading {
    width: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
}

.custom-tab-heading a {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
}

.hidden_existing {
    opacity: 0;
    pointer-events: none;
}

.active-page {
    padding: 0.6rem;
    border-radius: 15%;
    -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    border: none;
    background: #a9e0ea;
    color: #31318c;
    text-align: center;
}

.email-field {
    width: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: end;
}

.email-field .email-input-wrapper {
    width: 100%;
}

.email-input-confirmed {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: end;
}

.email-input-confirmed .email-confirmed {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    background: #f3f3f3;
    padding: 0.15rem 0.2rem;
    margin-top: 0.5rem;
    margin-right: 0.3rem;
    border-radius: 0.2rem;
    white-space: nowrap;

    font-size: var(--font-standard);
}

.tag-confirmed {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    background: #f3f3f3;
    padding: 0.15rem 0.2rem;
    margin-top: 0.5rem;
    margin-right: 0.3rem;
    border-radius: 0.2rem;
    white-space: nowrap;

    font-size: var(--font-standard);
}

.tag-note {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    background: #e9e9a6;
    padding: 0.15rem 0.3rem;
    margin-top: 0.5rem;
    margin-right: 0.3rem;
    border-radius: 0.2rem;
    white-space: nowrap;

    font-size: var(--font-standard);
}

.email-field label {
    width: 10%;

    margin: 0;
    padding: 0.375rem 0;
    font-size: var(--font-standard);
}

.email-input.form-control:focus {
    border-color: unset;
    -webkit-box-shadow: none;
            box-shadow: none;
}

.email-field input {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: solid 1px lightgray;
}

.btn-custom-tab {
    width: 90%;
    height: 100%;
    margin: 0 2.5%;
    background: var(--secondary-colour-l);
    color: var(--text-colour-dh);
    -webkit-box-shadow: 0 2px 3px 0px rgba(0,0,0, 0.3);
            box-shadow: 0 2px 3px 0px rgba(0,0,0, 0.3);

    -webkit-transition: all 0.2s ease;

    transition: all 0.2s ease;
}

.btn-custom-tab.active {
    background: var(--primary-colour);
    color: var(--text-colour-lh);
}

.btn-custom-tab:hover {
    background: var(--primary-colour);
    color: var(--text-colour-lh);
    -webkit-box-shadow: inset 0 2px 3px 0px rgba(0,0,0, 0.3);
            box-shadow: inset 0 2px 3px 0px rgba(0,0,0, 0.3)
}

.custom-tab-content {
    display: none;
}

.pagination {
    margin: 0;
}

.form-modal {
    width: 100%;
    min-height: 50%;
    max-height: 100%;

    top: 0;
    left: 0;

    position: fixed;

    z-index: 111;
    pointer-events: none;
}

.form-modal.in {
    opacity: 1;
}

.form-modal.in * {
    pointer-events: all;
}

.form-modal-backdrop {
    width: 100%;
    height: 100%;

    top: 0;
    left: 0;

    position: fixed;

    background-color: #000;
    z-index: 110;
    pointer-events: none;
}

.form-modal-backdrop.in {
    opacity: 0.5;

    pointer-events: all;
}

.form-modal-wrapper {
    width: 80%;
    max-width: 1000px;
    height: auto;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;

    padding: 2rem;
    margin: 5rem;

    background: white;
    -webkit-box-shadow: 0 0 6px 1px rgba(0,0,0, 0.2);
            box-shadow: 0 0 6px 1px rgba(0,0,0, 0.2);
    border-radius: 0.5rem;
}

.display-modal {
    width: 100%;
    height: 100%;
    min-height: 50%;
    max-height: 100%;

    top: 0;
    left: 0;

    position: fixed;

    z-index: 111;
    pointer-events: none;
}

.display-modal.in {
    opacity: 1;
}

.display-modal.in * {
    pointer-events: all;
}

.display-modal-backdrop {
    width: 100%;
    height: 100%;

    top: 0;
    left: 0;

    position: fixed;

    background-color: #000;
    z-index: 110;
    pointer-events: none;
}

.display-modal-backdrop.in {
    opacity: 0.5;

    pointer-events: all;
}

.display-modal-wrapper {
    width: 80%;
    /*max-width: 800px; */
    height: auto;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;

    padding: 2rem;
    margin: 5rem;

    background: white;
    -webkit-box-shadow: 0 0 6px 1px rgba(0,0,0, 0.2);
            box-shadow: 0 0 6px 1px rgba(0,0,0, 0.2);
    border-radius: 0.5rem;
}

.tabular-modal-wrapper {
    width: 50%;
    /*max-width: 800px; */
    height: auto;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;

    padding: 2rem;
    margin: 5rem;

    background: white;
    -webkit-box-shadow: 0 0 6px 1px rgba(0,0,0, 0.2);
            box-shadow: 0 0 6px 1px rgba(0,0,0, 0.2);
    border-radius: 0.5rem;
}

.status-modal {
    width: 100%;
    min-height: 50%;
    max-height: 100%;

    top: 0;
    left: 0;

    position: fixed;

    z-index: 111;
    pointer-events: none;
}

.status-modal.in {
    opacity: 1;
}

.status-modal.in * {
    pointer-events: all;
}

.generic-modal {
    width: 100%;
    min-height: 50%;
    max-height: 100%;

    top: 0;
    left: 0;

    position: fixed;

    z-index: 111;
    pointer-events: none;
}

.generic-modal.in {
    opacity: 1;
}

.generic-modal.in * {
    pointer-events: all;
}

.generic-modal-backdrop {
    width: 100%;
    height: 100%;

    top: 0;
    left: 0;

    position: fixed;

    background-color: #000;
    z-index: 110;
    pointer-events: none;
}

.generic-modal-backdrop.in {
    opacity: 0.5;

    pointer-events: all;
}

.generic-modal-wrapper {
    width: 80%;
    max-width: 800px;
    height: auto;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;

    padding: 2rem;
    margin: 5rem;

    background: white;
    -webkit-box-shadow: 0 0 6px 1px rgba(0,0,0, 0.2);
            box-shadow: 0 0 6px 1px rgba(0,0,0, 0.2);
    border-radius: 0.5rem;
}

.assignment-modal {
    width: 100%;
    height: 100%;

    top: 0;
    left: 0;

    position: fixed;

    z-index: 6;
    pointer-events: none;
}

.assignment-modal.in {
    opacity: 1;
}

.assignment-modal.in * {
    pointer-events: all;
}

.assignment-modal-backdrop {
    width: 100%;
    height: 100%;

    top: 0;
    left: 0;

    position: fixed;

    background-color: #000;
    z-index: 5;
    pointer-events: none;
}

.assignment-modal-backdrop.in {
    opacity: 0.5;
    pointer-events: all;
}

.assignment-modal-wrapper {
    width: 80%;
    max-width: 800px;
    height: 80vh;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;

    padding: 2rem;
    margin: 5rem;

    background: white;
    -webkit-box-shadow: 0 0 6px 1px rgba(0,0,0, 0.2);
            box-shadow: 0 0 6px 1px rgba(0,0,0, 0.2);
    border-radius: 0.5rem;
}

.input-modal-wrapper {
    max-width: 500px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;

    padding: 2rem;

    background: white;
    -webkit-box-shadow: 0 0 6px 1px rgba(0,0,0, 0.2);
            box-shadow: 0 0 6px 1px rgba(0,0,0, 0.2);
    border-radius: 0.5rem;
}

.modal-wrapper {
    width: 80%;
    max-width: 800px;
    /*height: 80vh;*/

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;

    padding: 2rem;
    margin: 3rem;

    background: white;
    -webkit-box-shadow: 0 0 6px 1px rgba(0,0,0, 0.2);
            box-shadow: 0 0 6px 1px rgba(0,0,0, 0.2);
    border-radius: 0.5rem;
}

.modal-table-wrapper {
    overflow-y: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.max-h-50 {
    max-height: 50%;
}

.contract-row {
    display: none;
    margin: 0.2rem 0;
    border: solid 1px lightgrey;

    overflow: hidden;
}

.contract-section > * {
    padding: 0.5rem;
}

.column-sorting {
    width: calc(15vw);
    min-height: 200px;

    position: fixed;

    z-index: 5;

    padding: 1rem;

    top: 10%;
    right: calc(50% - (15vw * 0.5));
    background: #f6f6f6;
    border-radius: 5px;

    -webkit-box-shadow: 0 0 2px 1px rgba(0,0,0, 0.5)    ;

            box-shadow: 0 0 2px 1px rgba(0,0,0, 0.5)    ;
}

#section-contracts {
    margin-bottom: 3%;
}

#section-bookings {
    overflow: hidden;
}

#section-bookings > div {
    overflow-y: auto;
}

#contract_information {
    display: none;
}

.assignment-modal-wrapper > div:nth-child(3) {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;

    -webkit-box-align: end;

        -ms-flex-align: end;

            align-items: end;
}

.assignment-modal-wrapper > div:nth-child(3) > * {
    margin: 0 !important;
}

.booking-row {
    display: none;
    margin: 0.2rem 0;
    border: solid 1px lightgrey;

    border-radius: 0 0 0 0.5rem;

    overflow: hidden;
}

.booking-row.selected {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.booking-section > * {
    padding: 0.5rem;
}

.orange-tag {
    width: 4rem;

    background: #ee5d25;
    font-weight: 600;
    color: white;
}

.contract-tag {
    width: 4rem;

    background: #259aee;
    font-weight: 600;
    color: white;
}

.close-tag {
    width: 1.5rem;
    height: calc(100% + 1rem);

    margin: -0.5rem 0 0 0.5rem;

    background: #696969;
    font-weight: 600;
    color: white;

    cursor: pointer;
}

.blue-header {
    background: #003e70;

    color: white;
}

.buffer15 {
    width: 1.5rem
}

.col-50 {
    width: 50%;
}

.col-25 {
    width: 25%;
}

#dashboard-table {
    height: 500px;
}

.table-no-wrap * {
    white-space: nowrap;
}

.table-minimal-padding th, .table-minimal-padding td {
    padding: 0.1rem;
}

.assignment-append {
    height: 100%;
    width: 1.5rem;
}

.border-lightgrey {
    border: solid 1px lightgray;
}

.border-bottom-lightgrey {
    border-bottom: solid 1px lightgray;
}

.border-top-lightgrey {
    border-top: solid 1px lightgray;
}

.border-left-success {
    border-left: solid 3px #0cd70c;
}

.mail-heading {
    border-bottom: solid 1px lightgray;
    padding: 0.5rem
}

.mail-attachment {
    display: inline-block;

    padding: 0.5rem 1rem;

    -webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0, 0.1);

            box-shadow: 0 2px 3px 0 rgba(0,0,0, 0.1);

    border: solid 1px lightgrey;
    border-radius: 5px;
}

.btn-confirmed-animate {
    background: #308a30;
    pointer-events: none;

    color: white;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #7ac142;
    fill: none;
    -webkit-animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
            animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark {
    width: 22px;
    aspect-ratio: square;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    -webkit-box-shadow: inset 0px 0px 0px #7ac142;
            box-shadow: inset 0px 0px 0px #7ac142;
    -webkit-animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
            animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

.checkmark__check {
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    -webkit-animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
            animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0); transform: rotate(0); }
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@keyframes spin {
    from { -webkit-transform: rotate(0); transform: rotate(0); }
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@-webkit-keyframes pulse {
    0% { opacity: 100; }
    50% { opacity: 0; }
    100% { opacity: 100; }
}

@keyframes pulse {
    0% { opacity: 100; }
    50% { opacity: 0; }
    100% { opacity: 100; }
}

@-webkit-keyframes grow {
    0% { -webkit-transform: scale(1); transform: scale(1); }
    50% { -webkit-transform: scale(1.1); transform: scale(1.1); }
    100% { -webkit-transform: scale(1); transform: scale(1); }
}

@keyframes grow {
    0% { -webkit-transform: scale(1); transform: scale(1); }
    50% { -webkit-transform: scale(1.1); transform: scale(1.1); }
    100% { -webkit-transform: scale(1); transform: scale(1); }
}

@-webkit-keyframes bob {
    0% { -webkit-transform: translateY(0); transform: translateY(0); }
    50% { -webkit-transform: translateY(1rem); transform: translateY(1rem); }
    100% { -webkit-transform: translateY(0); transform: translateY(0); }
}

@keyframes bob {
    0% { -webkit-transform: translateY(0); transform: translateY(0); }
    50% { -webkit-transform: translateY(1rem); transform: translateY(1rem); }
    100% { -webkit-transform: translateY(0); transform: translateY(0); }
}

@-webkit-keyframes shake {
    0% {-webkit-transform: translateX(0px) rotate(0deg);transform: translateX(0px) rotate(0deg);}
    20% {-webkit-transform: translateX(-4px) rotate(-4deg);transform: translateX(-4px) rotate(-4deg);}
    40% {-webkit-transform: translateX(-2px) rotate(-2deg);transform: translateX(-2px) rotate(-2deg);}
    60% {-webkit-transform: translateX(4px) rotate(4deg);transform: translateX(4px) rotate(4deg);}
    80% {-webkit-transform: translateX(2px) rotate(2deg);transform: translateX(2px) rotate(2deg);}
    100% {-webkit-transform: translateX(0px) rotate(0deg);transform: translateX(0px) rotate(0deg);}
}

@keyframes shake {
    0% {-webkit-transform: translateX(0px) rotate(0deg);transform: translateX(0px) rotate(0deg);}
    20% {-webkit-transform: translateX(-4px) rotate(-4deg);transform: translateX(-4px) rotate(-4deg);}
    40% {-webkit-transform: translateX(-2px) rotate(-2deg);transform: translateX(-2px) rotate(-2deg);}
    60% {-webkit-transform: translateX(4px) rotate(4deg);transform: translateX(4px) rotate(4deg);}
    80% {-webkit-transform: translateX(2px) rotate(2deg);transform: translateX(2px) rotate(2deg);}
    100% {-webkit-transform: translateX(0px) rotate(0deg);transform: translateX(0px) rotate(0deg);}
}

@-webkit-keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}
@-webkit-keyframes scale {
    0%, 100% {
        -webkit-transform: none;
                transform: none;
    }
    50% {
        -webkit-transform: scale3d(1.1, 1.1, 1);
                transform: scale3d(1.1, 1.1, 1);
    }
}
@keyframes scale {
    0%, 100% {
        -webkit-transform: none;
                transform: none;
    }
    50% {
        -webkit-transform: scale3d(1.1, 1.1, 1);
                transform: scale3d(1.1, 1.1, 1);
    }
}
@-webkit-keyframes fill {
    100% {
        -webkit-box-shadow: inset 0px 0px 0px 30px #7ac142;
                box-shadow: inset 0px 0px 0px 30px #7ac142;
    }
}
@keyframes fill {
    100% {
        -webkit-box-shadow: inset 0px 0px 0px 30px #7ac142;
                box-shadow: inset 0px 0px 0px 30px #7ac142;
    }
}

@-webkit-keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}

@keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}

#modal-background {
    width: 100%;
    height: 100%;

    position: fixed;
    top: 0;
    left: 0;

    background: rgba(17, 17, 17, 0.5);
    backdrop-filter: blur(4px);

    pointer-events: all;

    -webkit-transition: all 0.5s ease;

    transition: all 0.5s ease;
    z-index: 1030;
}

.modal-container {
    width: 100%;
    height: 100%;

    position: absolute;
    top: 0;
    left: 0;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    pointer-events: none;
}

#product-modal {
    width: 50%;
    height: 500px;

    min-width: 500px;
    max-width: 900px;

    background: white;
    border-radius: 10px;
    color: black;
    -webkit-box-shadow: 0 2px 5px 10px rgba(0,0,0, 0.3);
            box-shadow: 0 2px 5px 10px rgba(0,0,0, 0.3);

    pointer-events: none;
    opacity: 0;

    position: fixed;

    z-index: 1031;
}

.mobile-hidden {}

.catalogue-image {
    height: 100px;
    width: 100px;
}

.info-card-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.info-card {
    height: 250px;
    width: 250px;
    border-radius: 0.3rem;

    margin: 1rem;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    background: white;
    -webkit-box-shadow: 0 10px 10px -1px rgba(0,0,0, 0.3);
            box-shadow: 0 10px 10px -1px rgba(0,0,0, 0.3);
}

.info-card > i {
    font-size: 3rem;
    color: var(--primary-colour);

    margin-bottom: 1.5rem;
}

.info-card h1 {
    font-size: var(--font-standard);
    font-weight: 600;

    margin-bottom: 0.5rem;
}

.info-card p {
    width: 60%;

    text-align: center;
    font-size: var(--font-small);
}

.info-card a {
    position: absolute;
    bottom: -1rem;

    background: #ee5d25;
    border-radius: 50%;
}

.info-card-icon {
    height: 70px;
    width: 70px;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    border-radius: 50%;

    font-size: 2rem;

    color: white;
    background: var(--primary-colour);
}

.flex-column-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.flex-column-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: start;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: end;
}

.flex-vertical-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.values-list {
    list-style: none;
    padding: 0;
}

.values-list li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 0.5rem;
}

.values-list li i {
    margin-right: 2rem;
}

.faq-bar {
    border-bottom: solid 1px #dadada;

    font-size: var(--font-large);
    font-weight: 600;

    background: #f5f5f5;
    color: var(--primary-colour);
}

.faq-bar a {
    height: 100%;
    width: 100%;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    padding: 1rem 2rem;

    text-decoration: none;
}

.faq-collapse {
    width: 60%;

    font-size: var(--font-standard);
    color: #838383;

    background: #f5f5f5;
}

.faq-collapse p {
    padding: 2rem;
}

.oaple-subheading {
    font-weight: 600;
    font-size: var(--font-large);
    color: var(--primary-colour);
}

.oaple-header {
    font-weight: 600;
    font-size: 2rem;
    color: var(--primary-colour);

    text-shadow: 0 2px 2px rgba(0,0,0, 0.2);
}

.oaple-box-content {
    color: #6c6c6c;
}

.opacity {
    opacity: 0;
}

.pointer-events {
    pointer-events: none !important;
}

.active-modal {
    top: 0 !important;
}

.modal-open {
    opacity: 100% !important;
    pointer-events: all !important;
}

/* CS from https://codepen.io/DrizzlyOwl/pen/avMpzg */
.roundabout {
    margin:0;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    min-height: 500px;
    width: 100%;

    background-color:#FFDFD4;
}

.roundabout_unselected {

}

.roundabout_selected {

}
/* End of CS from https://codepen.io/DrizzlyOwl/pen/avMpzg */

/* Modifying Bootstrap Classes */
.dropdown-menu li {
    position: relative;
}
.dropdown-menu .dropdown-submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: -7px;
}
.dropdown-menu .dropdown-submenu-left {
    right: 100%;
    left: auto;
}
.dropdown-menu > li:hover > .dropdown-submenu {
    display: block;
}
/* End of Modifying Bootstrap Classes */

/* Changes made to styles_imported.css */
/* Anything below 481px */
@media only screen and (max-width: 481px) {
    .page-title {
        font-size: 2.5rem;
    }
}

/* Override for app.css */
@media only screen and  (max-width: 576px) {
    .container-sm, .container {
        max-width: unset;
    }

    .container {
        width: 95%;
    }
}

@media only screen and (max-width: 481px) and (min-width: 320px) {
    .section-mw {
        width: 95%;
    }

    .partner-logo {
        height: unset;
        width: 80%;
        margin-bottom: 2.5rem;
    }

    .partnerships-div {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .partnerships-div * {
        margin: 10px 0;
    }
}

/* Anything below 1024px */
@media only screen and (max-width: 1024px) {
    :root {
        --footer-height: 1100px;
    }
}

/* Anything below 768px */
@media only screen and (max-width: 768px) {
    :root {
        --font-small: 0.8rem;
        --font-standard: 0.8rem;
        --font-medium: 0.9rem;
        --font-large: 1.1rem;
        --font-subheader: 1rem;
        --font-header: 1.4rem;
    }

    ::-webkit-scrollbar {
        width: 0;
        height: 0;
        background: transparent; /* make scrollbar transparent */
    }

    .mobile-hidden {
        display: none;
    }

    #notifications {
        top: 50px;
    }

    #log_container {
        border-right: solid 2px #ee5d25;
    }

    #users-container {
        width: 100%;

        padding-top: 4rem;
    }

    #companyLogo {
        display: none;
    }

    #languageDropdown {
        display: none;
    }

    #languageDropdownMobile {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .company-navbar {
        z-index: 101;
    }

    #header-search {
        display: none;
    }

    #header-navbar .nav-link {
        padding: 0.5rem;
    }

    /* Sidebar CSS */
    #sidebar-wrapper {
        width: 100vw;
        height: 100vh;

        overflow-y: scroll;
        -ms-overflow-style: none;
        scrollbar-width: none;
        position: fixed;

        z-index: 4;
        -webkit-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }

    #sidebar-wrapper.toggled {
        width: 100vw;
    }

    /* This ensures the toggle class gets ignored if user is on a mobile device */
    #sidebar-wrapper.mobile-toggled {
        width: 0 !important;
        left: 0 !important;
    }

    #accordionSidebar {
        width: 100vw;
        height: 100vh;

        padding-top: 4rem;

        overflow-y: scroll;
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */

        position: fixed;
    }

    #accordionSidebar.toggled {
        left: 0;
    }

    /* This ensures the toggle class gets ignored if user is on a mobile device */
    #accordionSidebar.mobile-toggled {
        width: 0 !important;
    }

    #accordionSidebar::-webkit-scrollbar {
        display: none;  /* Safari and Chrome */
    }

    #branch-dropdown-menu.show {
        position: fixed;
        left: 0;
        width: 100%;
        top: 65px;
    }

    #branch-dropdown-menu.show .dropdown-item {
        text-align: center;
    }

    #region-select.show {
        position: fixed;
        left: 0;
        width: 100%;
        top: 65px;
    }

    .max-card-header-width * {
        font-size: var(--font-standard);
    }

    .inverse-padding {
        margin: 0.5rem;
    }

    .tab-container-horizontal .custom-tab {
        padding: 0.75rem !important;
    }

    .toggle-wrapper {
        width: 100%;
    }

    .mobile-row {
        padding: 0 0.5rem;
    }

    .transaction_form > tbody > tr {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .card-header > .row {
        overflow-x: auto;
    }

    .mobile-col-px {
        padding: 0 1rem;
    }

    .row > .mobile-col-px {
        padding: 0 1rem;
    }

    #collapse_alias * {
        font-size: var(--font-small);
    }

    #collapse_alias > div {
        padding: 0.5rem;
        display: unset;
    }

    #tag-search {
        width: 100%;
        right: 0;
        border-radius: 0;

        -webkit-box-shadow: 0 0 50px 5px rgba(0,0,0, 0.6);

                box-shadow: 0 0 50px 5px rgba(0,0,0, 0.6);
    }

    #hover-action:hover .btn-tag-search {
        bottom: 25px !important;
    }

    .btn-tag-search {
        bottom: 25px !important;
    }

    #contact-header {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    #contact-header-left {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;

        -webkit-box-align: center;

            -ms-flex-align: center;

                align-items: center;
    }

    #contact-header-left .row {
        margin: 0;
    }

    #add-rate-form > div, #add-service-form > div {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .dropdown-item a {
        width: 80%;
        overflow: hidden;
    }

    .status-tag-div {
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: start;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

    .display-img {
        margin: 0 0 15px 0 !important;
    }

    #container_add_note {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .btn-square {
        width: 25px;
        height: 25px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-shadow: -1px 1px 0 1px rgba(0,0,0, 0.2);
                box-shadow: -1px 1px 0 1px rgba(0,0,0, 0.2);
        padding: 1rem;
        border-radius: 15%;
        border: none;
        background: white;
        color: #0e0e0e;
        cursor: pointer;
    }

    .btn-icon-column {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: start;

        padding: 1rem;
    }

    .btn-icon-column div:not(:first-child) {
        margin: 0 0 0 15px;
    }

    .reset-column-margin {
        margin: 0 15px;
    }

    .mobile-hidden {
        display: none;
    }

    .mobile-visible {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .tab-body {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .tab-links-horizontal {
        width: 100% !important;
    }

    #extended-container {
        width: 100% !important;
    }

    .extended-wrapper {
        border: 0 !important;
    }

    form .form-group * {
        font-size: var(--font-small);
    }

    .sidebar .nav-item .collapse .collapse-inner .collapse-item, .sidebar .nav-item .collapsing .collapse-inner .collapse-item {
        padding: 0.5rem 1rem;
    }

    .sidebar .toggled * {
        opacity: 0;
    }

    .sidebar .toggled .nav-item .nav-link {
        margin: auto;
    }

    .sidebar .nav-item {
        width: 90%;
        margin: 0 auto;
    }

    .sidebar .nav-item .collapse {
        margin: 0;
        position: relative;
    }

    .sidebar .nav-item .collapsing {
        margin: 0;
    }

    .sidebar .nav-item .collapse .collapse-inner {
        padding: 2rem 0;
    }

    .sidebar .nav-item .nav-link {
        text-align: center;
        padding: 0.75rem;

        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }

    .sidebar .nav-item .nav-link span {
        font-size: var(--font-small);
    }
    /* End of Sidebar CSS */


    .report-section {
        width: 100%;
    }

    .report-start {
        margin-right: 0;
        margin-bottom: 1rem;
    }

    .report-end {
        margin-left: 0;
        margin-top: 1rem;
    }

    .mobile-section-header {
        margin-left: 0.8rem;
    }

    .justify-right-mobile-left {
        -webkit-box-pack: left;
            -ms-flex-pack: left;
                justify-content: left;
    }

    .tab button {
        padding: 7px 8px;
        font-size: var(--font-small)
    }

    .header-label {
        white-space: nowrap !important;
    }

    .dashboard-card {
        padding: unset;
    }

    .card-header {
        font-size: var(--font-medium);
    }

    .card-header .row > div {
        padding: unset;
        margin-bottom: 5px;
    }

    .card-row {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .card-col {
        padding: 0;
        margin-bottom: 10px;
    }

    .dashboard-row {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .dashboard-row > div {
        width: 100%;
    }

    .bold-heading {
        font-size: var(--font-medium);
        border: solid 1px #252525;
        padding: 5px;
    }

    .custom-pagination {
        margin: 10px 0;
        overflow-y: auto;
    }

    #urgent_markers * {
        white-space: nowrap;
    }

    #map {
        width: 100%;
        margin-bottom: 1rem;
    }

    .col-md-12 {
        padding: 0;
    }

    .col-md-8 {
        padding: 0;
    }

    .col-md-7 {
        padding: 0;
    }

    .col-md-6 {
        padding: 0;
    }

    .col-md-5 {
        padding: 0;
    }

    .col-md-4 {
        padding: 0;
    }

    .col-md-3 {
        padding: 0;
    }

    .col-md-2 {
        padding: 0;
    }

    .col-md-6 {
        padding: 0 0 15px 0;
    }

    .mobile-p-3 {
        padding: 0.5rem 0;
    }

    #wrapper #content-wrapper {
        padding: 4.7rem 0.5rem 0.5rem 0.5rem;
    }

    #footer-container {
        width: 100%;
    }

    #toggle-bug-report, #toggle-sidebar {
        display: none;
    }

    #toggle-payment-search, #toggle-sidebar {
        display: none;
    }

    .label-section {
        margin-top: 15px;
    }

    .btn-inline {
        width: 100%;
    }

    .card-header {
        padding: 0.5rem;
    }

    .max-card-header-width {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }

    .team-section {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .navbar-collapse {
        margin-top: 1rem;
    }

    .btn-good {
        padding: 3px 15px;
    }

    .dash-column {
        margin: 0;
        width: 100%;
        max-width: unset;
    }

    .dashboard {
        min-width: unset;
    }

    .dash-row {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;

        overflow: auto;
    }

    .widget-content {
        padding: 15px;
    }

    .widget-header {
        font-size: var(--font-standard);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }

    .widget-header h1 {
        font-size: 2rem;
    }

    .due {
        height: 20px;
    }

    .widget-footer {
        padding: 5px 0;
    }

    .chart-container {
        width: 100%;
        min-width: 650px;

        margin-right: unset;
        margin-left: unset;

        margin-bottom: 20px;
    }

    .navbar {
        position: fixed;
        width: 100vw;
    }

    #companyLogo {
        /*display: none;*/
        /*position: absolute;*/

        margin-right: 1rem;
    }

    .hamburger {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .navigation-internal {
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

    .sub-items {
        left: unset;
        top: unset;
        width: 100%;
    }

    .columnList {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        margin: 0;
    }

    .columnList .flyoutColumn {
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        margin: 1rem;
    }

    .columnList .flyoutColumn ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

    .range-management-box {
        width: 100%;
        margin-bottom: 2rem;
    }

    .toggle-wrapper {
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: start;
    }

    .toggle-container {
        margin: 1rem 0;
    }

    .oaple-header, .oaple-box-content, .oaple-subheading {
        padding: 0 1rem;
    }

    .nav-box {
        font-size: 1.2rem;
        width: 100%;
        padding: 10px 20px;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: end;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }
}

@media only screen and (max-width: 768px) and (min-width: 481px) {

    .container {
        width: 95%;
    }

    .partner-logo {
        height: unset;
        width: 80%;
        margin-bottom: 2.5rem;
    }

    .company-sidebar-heading {
        display: none;
    }

    .date-padding-r {
        padding-right: 0;
    }

    .date-padding-l {
        padding-left: 0;
    }

    .page-title {
        font-size: 4rem;
    }

    .company-wrapper {
        padding-top: 10%;
    }

    .card-header {
        font-size: var(--font-header);
    }

    .primary-header {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .primary-header button {
        margin-top: 10px;
    }

    .dropdown-item {
        white-space: normal;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }

    .update-box {
        width: 100%;
        margin: 0;
    }

    .update-field {
        width: 100%;
    }

    .top-bar {
        padding: 0;
    }

    .card {
        margin: 2rem 0;
    }

    .tabcontent {
        padding: 0;
        border: none;
    }

    .mobile-min th {
        min-width: 150px;
    }

    .stats {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .stats label {
        margin-right: 0;
    }

    .secondary-header-right {
        width: 100%;
    }

    .date-wrapper {
        width: 90%;
        margin: auto;

        display: -webkit-box;

        display: -ms-flexbox;

        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }

    .date-wrapper input {
        border-radius: 0;
    }

    .report-section {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .report-section.left {
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: start;
    }

    .report-section.right {
        -webkit-box-align: end;
            -ms-flex-align: end;
                align-items: end;
    }

    .download-report {
        margin-top: 1rem;
        width: 100%;
    }

    .download-report button {
        width: 90%;
    }

    .services-header h3 {
        font-size: var(--font-standard);
    }

    .placeholder_name-header h3 {
        font-size: var(--font-large);
        font-weight: 700;
    }

    .services-section {
        padding: 0;
    }

    .sidebar-heading {
        display: none;
    }

    .company-sidebar-heading {
        display: none;
    }

    .use-button {
        display: none;
    }

    #companyDropdown {
        display: none;
    }
}

@media only screen and (max-width: 1024px) and (min-width: 768px) {
    .nav-burger {
        margin-top: 1.5rem;
    }

    .team-section {
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }

    .partner-logo {
        height: 80px;
        margin-bottom: 2.5rem;
    }

    .sub-border-top {
        border-top: #1b1e21 1px;
    }

    .sidebar.toggled .nav-item .nav-link {
        margin: 0;
    }

    .sidebar.toggled .sidebar-heading {
        display: block;

        text-align: left !important;
        padding: 0 1rem !important;
        font-weight: 800 !important;
        font-size: .65rem !important;
    }

    .company-sidebar-heading {
        font-size: var(--font-header) !important;
        display: block;
    }

    .sidebar .nav-item .nav-link i {
        font-size: var(--font-small) !important;
    }

    .sidebar .nav-item .nav-link span {
        font-size: var(--font-small) !important;
        display: inline !important;
    }

    .order-title {
        width: 50%;
    }

    /* From another Media Query */
    #catalogue {
        width: 100% !important;

        padding: 0 1rem;
    }

    .services-group {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

    .services-section {
        width: 100%;
        max-width: 2000px;
        padding: 20px 0;

        min-height: 500px;

        display: inline-block;
    }

    .services-box-b {
        border-radius: 0;

        margin-left: 0;
        margin-right: 0;

        padding-left: 1.7rem;
        padding-right: 1.7rem;

        min-height: 340px;
        height: 20vh;
        max-height: 400px;

        width: 100%;
    }

    .services-box:hover, .services-box:active .services-section-b {
        overflow: visible;
    }

    .services-section-b {
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
    }

    .input-width {
        width: 100%;
    }
}

@media only screen and (min-width: 768px) {
    .sidebar .nav-item .nav-link[data-toggle=collapse].collapsed::after {
        width: 1rem !important;
        text-align: center !important;
        margin-left: auto !important;
        vertical-align: 0 !important;
        border: 0 !important;
        font-weight: 900 !important;
        content: '\f107' !important;
        font: var(--fa-font-solid) !important;
    }

    .sidebar .nav-item .nav-link[data-toggle=collapse]::after {
        width: 1rem !important;
        text-align: center !important;
        margin-left: auto !important;
        vertical-align: 0 !important;
        border: 0 !important;
        font-weight: 900 !important;
        content: '\f106' !important;
        font: var(--fa-font-solid) !important;
    }
}

@media only screen and (max-width: 1140px) {
    .info-card-container {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
}

.hover\:tw-scale-105:hover {
        --tw-scale-x: 1.05 !important;
        --tw-scale-y: 1.05 !important;
        -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
                transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}

.hover\:tw-border:hover {
        border-width: 1px !important;
}

.hover\:tw-border-solid:hover {
        border-style: solid !important;
}

.hover\:tw-border-white:hover {
        --tw-border-opacity: 1 !important;
        border-color: rgb(255 255 255 / var(--tw-border-opacity)) !important;
}

.hover\:tw-bg-indigo-400\/30:hover {
        background-color: rgb(129 140 248 / 0.3) !important;
}

.hover\:tw-bg-neutral-100:hover {
        --tw-bg-opacity: 1 !important;
        background-color: rgb(245 245 245 / var(--tw-bg-opacity)) !important;
}

.hover\:tw-bg-neutral-200:hover {
        --tw-bg-opacity: 1 !important;
        background-color: rgb(229 229 229 / var(--tw-bg-opacity)) !important;
}

.hover\:tw-bg-neutral-300:hover {
        --tw-bg-opacity: 1 !important;
        background-color: rgb(212 212 212 / var(--tw-bg-opacity)) !important;
}

.hover\:tw-bg-transparent:hover {
        background-color: transparent !important;
}

.hover\:tw-bg-white\/10:hover {
        background-color: rgb(255 255 255 / 0.1) !important;
}

.hover\:tw-text-neutral-800:hover {
        --tw-text-opacity: 1 !important;
        color: rgb(38 38 38 / var(--tw-text-opacity)) !important;
}

.hover\:tw-text-neutral-900:hover {
        --tw-text-opacity: 1 !important;
        color: rgb(23 23 23 / var(--tw-text-opacity)) !important;
}

.hover\:tw-text-white:hover {
        --tw-text-opacity: 1 !important;
        color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
}

.hover\:tw-brightness-110:hover {
        --tw-brightness: brightness(1.1) !important;
        -webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
                filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
}

.focus\:tw-border-blue-400:focus {
        --tw-border-opacity: 1 !important;
        border-color: rgb(96 165 250 / var(--tw-border-opacity)) !important;
}

.focus\:tw-ring-0:focus {
        --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
        --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
        -webkit-box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
                box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
}

.tw-group:hover .group-hover\:tw-text-\[\#ee5d25\] {
        --tw-text-opacity: 1 !important;
        color: rgb(238 93 37 / var(--tw-text-opacity)) !important;
}

@media (min-width: 640px) {
        .sm\:tw-w-28 {
                width: 7rem !important;
        }
        .sm\:tw-w-36 {
                width: 9rem !important;
        }
        .sm\:tw-w-40 {
                width: 10rem !important;
        }
        .sm\:tw-w-64 {
                width: 16rem !important;
        }
        .sm\:tw-w-fit {
                width: -webkit-fit-content !important;
                width: -moz-fit-content !important;
                width: fit-content !important;
        }
        .sm\:tw-grid-cols-2 {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }
}

@media (min-width: 768px) {
        .md\:tw-mb-0 {
                margin-bottom: 0px !important;
        }
        .md\:tw-mb-24 {
                margin-bottom: 6rem !important;
        }
        .md\:tw-mt-6 {
                margin-top: 1.5rem !important;
        }
        .md\:tw-flex {
                display: -webkit-box !important;
                display: -ms-flexbox !important;
                display: flex !important;
        }
        .md\:tw-hidden {
                display: none !important;
        }
        .md\:tw-max-h-64 {
                max-height: 16rem !important;
        }
        .md\:tw-w-1\/2 {
                width: 50% !important;
        }
        .md\:tw-w-auto {
                width: auto !important;
        }
        .md\:tw-max-w-6xl {
                max-width: 72rem !important;
        }
        .md\:tw-grid-cols-2 {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }
        .md\:tw-grid-cols-3 {
                grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        }
        .md\:tw-grid-cols-4 {
                grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        }
        .md\:tw-flex-row {
                -webkit-box-orient: horizontal !important;
                -webkit-box-direction: normal !important;
                    -ms-flex-direction: row !important;
                        flex-direction: row !important;
        }
        .md\:tw-items-start {
                -webkit-box-align: start !important;
                    -ms-flex-align: start !important;
                        align-items: flex-start !important;
        }
        .md\:tw-items-center {
                -webkit-box-align: center !important;
                    -ms-flex-align: center !important;
                        align-items: center !important;
        }
        .md\:tw-justify-start {
                -webkit-box-pack: start !important;
                    -ms-flex-pack: start !important;
                        justify-content: flex-start !important;
        }
        .md\:tw-justify-center {
                -webkit-box-pack: center !important;
                    -ms-flex-pack: center !important;
                        justify-content: center !important;
        }
        .md\:tw-gap-4 {
                gap: 1rem !important;
        }
        .md\:tw-p-2 {
                padding: 0.5rem !important;
        }
        .md\:tw-p-6 {
                padding: 1.5rem !important;
        }
        .md\:tw-px-0 {
                padding-left: 0px !important;
                padding-right: 0px !important;
        }
        .md\:tw-px-6 {
                padding-left: 1.5rem !important;
                padding-right: 1.5rem !important;
        }
        .md\:tw-px-8 {
                padding-left: 2rem !important;
                padding-right: 2rem !important;
        }
        .md\:tw-px-\[10rem\] {
                padding-left: 10rem !important;
                padding-right: 10rem !important;
        }
        .md\:tw-py-\[10vh\] {
                padding-top: 10vh !important;
                padding-bottom: 10vh !important;
        }
        .md\:tw-text-left {
                text-align: left !important;
        }
        .md\:tw-text-3xl {
                font-size: 1.875rem !important;
                line-height: 2.25rem !important;
        }
        .md\:tw-text-4xl {
                font-size: 2.25rem !important;
                line-height: 2.5rem !important;
        }
        .md\:tw-text-5xl {
                font-size: 3rem !important;
                line-height: 1 !important;
        }
        .md\:tw-text-6xl {
                font-size: 3.75rem !important;
                line-height: 1 !important;
        }
        .md\:tw-text-xl {
                font-size: 1.25rem !important;
                line-height: 1.75rem !important;
        }
}

@media (min-width: 1024px) {
        .lg\:-tw-left-6 {
                left: -1.5rem !important;
        }
        .lg\:tw-order-1 {
                -webkit-box-ordinal-group: 2 !important;
                    -ms-flex-order: 1 !important;
                        order: 1 !important;
        }
        .lg\:tw-order-2 {
                -webkit-box-ordinal-group: 3 !important;
                    -ms-flex-order: 2 !important;
                        order: 2 !important;
        }
        .lg\:tw-col-span-4 {
                grid-column: span 4 / span 4 !important;
        }
        .lg\:tw-col-span-5 {
                grid-column: span 5 / span 5 !important;
        }
        .lg\:tw-col-span-7 {
                grid-column: span 7 / span 7 !important;
        }
        .lg\:tw-col-span-8 {
                grid-column: span 8 / span 8 !important;
        }
        .lg\:tw-m-0 {
                margin: 0px !important;
        }
        .lg\:tw-w-72 {
                width: 18rem !important;
        }
        .lg\:tw-w-full {
                width: 100% !important;
        }
        .lg\:tw-grid-cols-12 {
                grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
        }
        .lg\:tw-grid-cols-2 {
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }
        .lg\:tw-grid-cols-3 {
                grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        }
        .lg\:tw-grid-cols-4 {
                grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        }
        .lg\:tw-justify-end {
                -webkit-box-pack: end !important;
                    -ms-flex-pack: end !important;
                        justify-content: flex-end !important;
        }
        .lg\:tw-p-0 {
                padding: 0px !important;
        }
        .lg\:tw-p-10 {
                padding: 2.5rem !important;
        }
        .lg\:tw-p-12 {
                padding: 3rem !important;
        }
        .lg\:tw-px-2 {
                padding-left: 0.5rem !important;
                padding-right: 0.5rem !important;
        }
        .lg\:tw-px-8 {
                padding-left: 2rem !important;
                padding-right: 2rem !important;
        }
        .lg\:tw-py-\[20vh\] {
                padding-top: 20vh !important;
                padding-bottom: 20vh !important;
        }
        .lg\:tw-pb-0 {
                padding-bottom: 0px !important;
        }
        .lg\:tw-pl-0 {
                padding-left: 0px !important;
        }
        .lg\:tw-pr-0 {
                padding-right: 0px !important;
        }
        .lg\:tw-text-7xl {
                font-size: 4.5rem !important;
                line-height: 1 !important;
        }
        .lg\:tw-text-base {
                font-size: 1rem !important;
                line-height: 1.5rem !important;
        }
}

@media (min-width: 1280px) {
        .xl\:tw-grid-cols-3 {
                grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        }
        .xl\:tw-text-sm {
                font-size: 0.875rem !important;
                line-height: 1.25rem !important;
        }
}

@media (prefers-color-scheme: dark) {
        .dark\:tw-bg-neutral-800 {
                --tw-bg-opacity: 1 !important;
                background-color: rgb(38 38 38 / var(--tw-bg-opacity)) !important;
        }
        .dark\:tw-text-gray-600 {
                --tw-text-opacity: 1 !important;
                color: rgb(75 85 99 / var(--tw-text-opacity)) !important;
        }
}