/* Minification failed. Returning unminified contents.
(10,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(12,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(17,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(18,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(21,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(23,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(24,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(26,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(29,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(30,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(31,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(32,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(33,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(34,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(35,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(36,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(37,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(38,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(39,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(40,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(41,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(42,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(43,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(44,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(48,17): run-time error CSS1039: Token not allowed after unary operator: '-ea-txt-color-alt'
(53,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(57,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(65,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(66,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(67,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(68,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(69,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(70,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(71,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(72,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(73,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(74,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(75,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(76,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(77,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(78,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(79,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(83,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(84,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(85,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(86,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(87,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(88,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(89,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(90,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(91,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(92,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(93,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(94,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(95,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(96,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(100,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(101,17): run-time error CSS1039: Token not allowed after unary operator: '-bs-btn-color'
(106,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(107,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(108,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(109,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(110,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(111,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(112,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(113,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(114,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(115,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(116,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(117,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(118,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(119,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(123,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(127,28): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-color'
(128,25): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-radius'
(130,28): run-time error CSS1039: Token not allowed after unary operator: '-bs-body-bg'
(145,38): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-color'
(149,22): run-time error CSS1039: Token not allowed after unary operator: '-bs-form-floating-height'
(213,32): run-time error CSS1039: Token not allowed after unary operator: '-ea-g-off'
(219,17): run-time error CSS1039: Token not allowed after unary operator: '-ea-g-main'
(343,17): run-time error CSS1039: Token not allowed after unary operator: '-bs-white'
(551,17): run-time error CSS1039: Token not allowed after unary operator: '-ea-g-main'
(603,28): run-time error CSS1039: Token not allowed after unary operator: '-ea-g-main'
(698,32): run-time error CSS1039: Token not allowed after unary operator: '-ea-g-main'
(721,32): run-time error CSS1039: Token not allowed after unary operator: '-ea-g-main'
(773,28): run-time error CSS1039: Token not allowed after unary operator: '-ea-g-main2'
(844,44): run-time error CSS1039: Token not allowed after unary operator: '-ea-arr-main'
(862,28): run-time error CSS1039: Token not allowed after unary operator: '-ea-g-main'
(890,36): run-time error CSS1039: Token not allowed after unary operator: '-ea-g-main'
(1479,28): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-color'
(1480,25): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-radius'
(1524,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1530,39): run-time error CSS1039: Token not allowed after unary operator: '-bs-table-color'
(1914,1): run-time error CSS1019: Unexpected token, found '}'
(1927,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1928,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1929,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1931,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1932,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1933,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1935,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1936,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1937,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1938,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1940,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1941,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1942,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1943,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1944,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1946,21): run-time error CSS1039: Token not allowed after unary operator: '-bs-btn-font-size'
(1947,19): run-time error CSS1039: Token not allowed after unary operator: '-bs-btn-padding-y'
(1947,43): run-time error CSS1039: Token not allowed after unary operator: '-bs-btn-padding-x'
(1951,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1952,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1953,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1954,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1955,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1956,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1957,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1958,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1959,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1960,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1961,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1962,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1963,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1967,17): run-time error CSS1039: Token not allowed after unary operator: '-bs-btn-color'
(1971,17): run-time error CSS1039: Token not allowed after unary operator: '-bs-btn-hover-color'
(1975,17): run-time error CSS1039: Token not allowed after unary operator: '-bs-btn-active-color'
(2570,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(2571,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '100%'
(2577,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(2578,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '100%'
(2584,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(2585,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(2601,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(2602,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '100%'
(2607,1): run-time error CSS1019: Unexpected token, found '@-moz-keyframes'
(2608,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '100%'
(2613,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(2614,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '100%'
(3064,45): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-width'
(3196,28): run-time error CSS1039: Token not allowed after unary operator: '-bs-success'
(3210,25): run-time error CSS1039: Token not allowed after unary operator: '-bs-white'
(3223,21): run-time error CSS1039: Token not allowed after unary operator: '-bs-dropdown-link-color'
(3567,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(3568,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(3581,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(3582,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(3678,17): run-time error CSS1039: Token not allowed after unary operator: '-bs-body-color'
(3683,35): run-time error CSS1039: Token not allowed after unary operator: '-ea-g-off'
(3686,34): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-border-radius'
(3687,35): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-border-radius'
(3698,37): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-border-radius'
(3699,38): run-time error CSS1039: Token not allowed after unary operator: '-bs-card-border-radius'
(3799,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(3800,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '25%'
(3811,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(3812,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '25%'
(3823,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(3824,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '25%'
(3835,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(3836,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '25%'
(3847,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(3848,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '50%'
(3859,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(3860,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '50%'
(3871,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes'
(3872,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(3893,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(3894,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%'
(3917,22): run-time error CSS1039: Token not allowed after unary operator: '-bs-body-color-rgb'
(4000,25): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-radius'
(4029,25): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-radius'
(4034,26): run-time error CSS1030: Expected identifier, found ':'
(4034,27): run-time error CSS1031: Expected selector, found 'not('
(4034,27): run-time error CSS1025: Expected comma or open brace, found 'not('
(4040,26): run-time error CSS1030: Expected identifier, found ':'
(4040,33): run-time error CSS1031: Expected selector, found ')'
(4040,33): run-time error CSS1025: Expected comma or open brace, found ')'
(4427,22): run-time error CSS1039: Token not allowed after unary operator: '-ea-g-off'
(4437,21): run-time error CSS1039: Token not allowed after unary operator: '-ea-g-main'
(4469,28): run-time error CSS1039: Token not allowed after unary operator: '-ea-g-main'
(4470,21): run-time error CSS1039: Token not allowed after unary operator: '-ea-g-main'
(4502,28): run-time error CSS1039: Token not allowed after unary operator: '-ea-g-main'
(4583,25): run-time error CSS1039: Token not allowed after unary operator: '-bs-border-radius'
(4601,28): run-time error CSS1039: Token not allowed after unary operator: '-ea-g-main'
(4621,28): run-time error CSS1039: Token not allowed after unary operator: '-ea-g-main'
(4625,21): run-time error CSS1039: Token not allowed after unary operator: '-ea-g-main'
(4636,22): run-time error CSS1039: Token not allowed after unary operator: '-ea-g-main'
(4638,28): run-time error CSS1039: Token not allowed after unary operator: '-ea-g-main'
(4666,21): run-time error CSS1039: Token not allowed after unary operator: '-ea-g-main'
(4739,22): run-time error CSS1039: Token not allowed after unary operator: '-ea-g-main'
(4807,17): run-time error CSS1039: Token not allowed after unary operator: '-ea-g-main'
(4833,17): run-time error CSS1039: Token not allowed after unary operator: '-ea-g-main'
(4862,28): run-time error CSS1039: Token not allowed after unary operator: '-ea-g-off'
(4969,1): run-time error CSS1019: Unexpected token, found '@keyframes'
(4970,8): run-time error CSS1035: Expected colon, found '{'
(5158,28): run-time error CSS1039: Token not allowed after unary operator: '-ea-g-main'
 */
@import url('https://fonts.googleapis.com/css?family=Raleway:400,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@400;500&display=swap');

html {
    font-size: 16px;
}

:root {
    /* Arrival App accent colors */
    --ea-arr-main: #25703c;
    --ea-arr-alt: #31a626;
    --ea-arr-off: #edf7ed;
    /* Eventact brand colors */
    --ea-txt-color: #002447;
    --ea-txt-color-alt: #003161;
    --ea-txt-muted: #597187;
    --ea-warning-text: #b45309;
    --ea-error-text: #b91c1c;
    /* Semantic aliases */
    --ea-g-main: var(--ea-arr-main);
    --ea-g-main2: var(--ea-arr-alt);
    --ea-g-alt: #1b5e20;
    --ea-g-off: var(--ea-arr-off);
    --ea-g-alt-bg: #f2f9f3;
    /* Top bar */
    --general-top-bar-bg: var(--ea-g-main);
    --general-top-bar-color: #ffffff;
    /* Bootstrap 5.3 Global Overrides */
    --bs-body-color: var(--ea-txt-color);
    --bs-primary: var(--ea-g-main);
    --bs-primary-rgb: 37, 112, 60;
    --bs-secondary-color: var(--ea-txt-muted);
    --bs-secondary-color-rgb: 89, 113, 135;
    --bs-link-color: var(--ea-txt-color-alt);
    --bs-link-hover-color: var(--ea-txt-color);
    --bs-emphasis-color: var(--ea-txt-color);
    --bs-border-color: #ccd8ce;
    --bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), 0.02);
    --bs-form-invalid-color: var(--ea-error-text);
    --bs-modal-border-radius: 1.25rem;
    --bs-border-radius: 8px;
    --bs-btn-border-radius: 0.5rem;
    --bs-card-border-radius: 1rem;
    --bs-breadcrumb-divider: "\2022";
}

a {
    color: var(--ea-txt-color-alt);
    text-decoration: none;
}

.nav {
    --bs-nav-link-color: var(--ea-txt-muted);
}

.breadcrumb {
    --bs-breadcrumb-divider-color: rgba(255, 255, 255, 0.55);
}

label {
    font-weight: 500;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ea-g-main);
    --bs-btn-border-color: var(--ea-g-main);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ea-g-alt);
    --bs-btn-hover-border-color: var(--ea-g-alt);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #174f1d;
    --bs-btn-active-border-color: #174f1d;
    --bs-btn-focus-shadow-rgb: 37, 112, 60;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--ea-g-main);
    --bs-btn-disabled-border-color: var(--ea-g-main);
    --bs-btn-disabled-opacity: 0.65;
    --bs-gradient: none;
}

.btn-outline-primary {
    --bs-btn-color: var(--ea-g-main);
    --bs-btn-border-color: var(--ea-g-main);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ea-g-main);
    --bs-btn-hover-border-color: var(--ea-g-main);
    --bs-btn-focus-shadow-rgb: 37, 112, 60;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ea-g-main);
    --bs-btn-active-border-color: var(--ea-g-main);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--ea-g-main);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--ea-g-main);
    --bs-gradient: none;
}

.btn-link {
    --bs-btn-color: var(--ea-g-main);
    color: var(--bs-btn-color);
    text-decoration: none;
}

.docs-actions .btn {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ea-g-main);
    --bs-btn-border-color: var(--ea-g-main);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #006a00;
    --bs-btn-hover-border-color: #005c00;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #005c00;
    --bs-btn-active-border-color: #004e00;
    --bs-btn-focus-shadow-rgb: 0, 128, 0;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--ea-g-main);
    --bs-btn-disabled-border-color: var(--ea-g-main);
    --bs-btn-disabled-opacity: 0.65;
}

.table {
    --bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), 0.02);
}

.input-group {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    background-color: var(--bs-body-bg);
}

    .input-group .form-control,
    .input-group .form-select,
    .input-group .btn,
    .input-group .input-group-text {
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        margin-left: 0 !important;
        margin-right: 0;
    }

    .input-group > :not(:last-child) {
        border-right: 1px solid var(--bs-border-color) !important;
    }

    .input-group .form-floating ~ .btn {
        height: var(--bs-form-floating-height);
    }

body {
    padding-bottom: 20px;
    min-height: 100%;
    background-color: white;
    font-family: 'Raleway', 'Assistant', sans-serif;
    font-variant-numeric: lining-nums;
}


.container-login {
    background-image: url('../images/sign_insvg.svg');
    background-size: 130%;
    background-repeat: no-repeat;
    background-position: top 40% center;
}

.container-verification {
    padding: 50px 15px;
}

html {
    position: relative;
    min-height: 100%;
}

b, strong {
    font-weight: 500;
}

.form-group {
    margin-bottom: 1.5rem;
}

.login-form .img-group {
    text-align: center
}

.card {
    border: 0;
    box-shadow: #a39c9c 0 0 1px 0px;
}

.link-card {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 106px;
    border-radius: 12px;
    margin-bottom: 16px;
    word-break: break-word;
    background-color: #F8FAFC;
    border: 1px solid transparent;
    transition: background-color 200ms ease-in-out;
}

a .link-card {
    cursor: pointer;
}

    a .link-card:hover {
        background-color: var(--ea-g-off);
    }

.link-card .card-side {
    width: 33.33333333%;
    text-align: center;
    color: var(--ea-g-main);
}

.card-side i {
    font-size: 24px;
}

.card-info {
    flex: 1;
    min-width: 0;
    padding: 4px 8px;
}

    .card-info h4 {
        font-weight: 500;
        color: #0F172A;
        margin-top: 2px;
        margin-bottom: 5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

.spinner {
    position: fixed;
    z-index: 1000;
    left: 45%;
    top: 50%;
    display: block;
}

#content-wrapper > .container-fluid {
    padding-bottom: 30px;
}

.mt0 {
    margin-top: 0 !important;
}

.pt0 {
    padding-bottom: 0 !important;
}

.mw-40ch {
    max-width: 40ch;
}

.mw-90ch {
    max-width: 90ch;
}

.mw-120ch {
    max-width: 120ch;
}

.mnh-120 {
    min-height: 120px;
}


.clear-both {
    clear: both;
}

.centerBox {
    width: 450px;
    height: 400px;
    position: relative;
    top: 50%;
    margin-left: auto;
    margin-right: auto;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    text-align: center;
}

.list-unstyled > ul {
    list-style: none;
}

.LoginBox {
    color: #525252;
    width: 450px;
    border: solid 1px #f1f1f1;
    background: url(../images/login-box-bg.png) repeat-x bottom;
}

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

.dl-horizontal dt {
    white-space: normal;
}

.vertical-center {
    position: fixed;
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.ealist > li {
    padding: unset;
}

.breadcrumbs > li + li:before {
    content: "| ";
    padding: 0 5px;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--bs-white);
    margin-top: 5px;
}


.crumbs > li + li:before {
    content: "|";
}

.crumbs li:last-child a::after,
.crumbs li:last-child a::before {
    content: none;
}

.settings {
    text-align: right;
}

@media (max-width: 707px) {
    .settings {
        text-align: left;
        width: 100%
    }

        .settings .mdi {
            margin-left: 0px
        }

        .settings .text-nowrap {
            white-space: normal !important;
        }
}

.settings a, .settings p, .settings label {
    display: inline;
    cursor: pointer;
    text-decoration: none;
    color: black;
}

.advanced {
    margin-top: 15px;
    border: 1px solid #ccc;
}


.login {
    padding-top: 12px;
    font-size: 1em;
    color: black;
}

.logoff {
    padding-top: 0;
    color: black;
    text-decoration: underline;
}

.navbar-dark .navbar-nav > li > a {
    padding-top: 10px;
    color: black;
    text-decoration: underline;
    padding-left: 15px;
}

.form {
    margin: 15px 0px 15px 0;
}

.paddingTop {
    padding-top: 30px;
}

.legend {
    display: block;
    width: 100%;
    padding: 0;
    margin-bottom: 20px;
    font-size: 21px;
    line-height: inherit;
    color: #333;
    border: 0;
    /* border-bottom: 1px solid #e5e5e5; */
}

.flags {
    background-color: #f4f9f9;
    box-shadow: 5px 5px 5px #888888;
    border: 1px solid #000;
    padding-top: 10px;
    padding-bottom: 30px;
    margin-top: 5px;
}

.center {
    padding-left: 50px;
}

.header {
    background-image: url(../images/header-arrival-bg.png);
    overflow: hidden;
    font-size: large;
    color: white;
    clear: both;
}

.navbar {
    position: fixed;
    z-index: 1000;
    /* min-height: 50px; */
    margin-bottom: 20px;
    border: 1px solid transparent;
}

.navbar-toggler {
    margin-top: 0 !important;
}

.clear {
    clear: both;
    margin: 10px 10px 10px 10px;
}

.right {
    float: right;
}

.space {
    margin: 15px 0 15px 0;
}

.typeahead {
    padding-right: 0;
    padding-left: 0;
    margin-top: 25px;
}

.infoBox {
    min-height: 200px;
    border-color: #000;
    padding: 45px 15px 30px 15px;
    cursor: default;
    border: solid 2px #444;
    border-radius: 10px;
    text-align: center;
    font-size: 25px;
    background-color: #e3e3e3;
    margin-bottom: 20px;
    margin-top: 12px;
    clear: both;
    vertical-align: middle;
}

    .infoBox.edit {
        padding: 15px;
    }


.form-wrepper {
    width: 250px;
    margin: 0 auto;
}

.img-center {
    margin: 0 auto;
}


.sm-cell {
    text-align: center;
    width: 180px;
}

.AlphaCoLogo {
    position: absolute;
    top: 0;
    height: 80px;
    width: 99%;
    background: url(../images/hp_biglogo.png);
    background-repeat: no-repeat;
    background-position: right;
}

.list-inline {
    /*padding-left: 15px;*/
    margin-bottom: 0;
}

a:link, a:visited, a:active, a:hover {
    color: #e7e4e4;
    text-decoration: none;
}

.td-link a:not(.btn) {
    color: #817e7e;
    text-decoration: none;
}

a:not(.btn) {
    color: #817e7e;
}

a.advanced-settings,
.advanced-settings > a {
    color: white;
}

a .text-settings {
    color: var(--ea-g-main)
}

.space-top {
    top: 10px;
}

.HeaderRegistration {
    background-image: url(../images/reg_tab_bg.jpg);
    height: 81px;
    padding: 10px 0px 0px 0px;
    z-index: 1;
}


.card-body .card-subtitle:last-child {
    margin-bottom: 0;
}

.card-subtitle {
    font-size: 1.2rem
}

.inline3 {
    min-width: 30%;
}

.checkbox-inline:first-child {
    padding-left: 0;
}

br + .checkbox-inline {
    padding-left: 0;
}

.checkbox-inline i.mdi {
    margin: 0;
}

.card-body:before, .card-body:after {
    display: table;
    content: "";
    clear: both;
}


.bg-gray {
    background-color: #fafbfc;
}


.bg-success {
    background-color: var(--ea-g-main) !important;
}

.bg-gray-100 {
    background-color: #F5F5F5;
    color: black;
}

.bg-tile-800 {
    background-color: #00695C;
    color: white;
}

.form-group-block .form-control, .form-group-block .btn {
    height: 50px;
    width: 100%;
    /*border-width: 0px;*/
    border-radius: 0px;
}

.form-control.select {
    background-color: white
}

.card .list-group .list-group-item {
    border: 0;
    padding: 15px;
}

.card-block > .list-group > .list-group-item {
    border: 0;
    padding-left: 0;
    background: unset;
    color: unset;
}

.group-project-id {
    margin-bottom: 5px
}

.b {
    border: 1px solid rgba(0,0,0,.12);
}

.bb {
    border-bottom: 1px solid rgba(0,0,0,.12) !important;
}

.select {
    width: auto;
    display: initial;
}

.arrival-card .select-gate {
    width: 100%;
}

#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

    #wrapper #header-wrapper {
        z-index: 1050;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 67px;
        padding: 0 15px;
        padding-left: 200px;
    }

    #wrapper.toggled #header-wrapper {
        z-index: 1050;
        position: fixed;
        left: 30px;
        top: 0;
        width: 100%;
        height: 67px;
        padding: 0 15px;
    }

    #wrapper.no-menu #header-wrapper {
        left: 0;
    }

    #wrapper #header-wrapper .menu-toggle {
        display: inline-flex;
        align-items: center;
        height: 100%;
        vertical-align: top;
        background-color: var(--ea-g-main);
        border-left: 1px solid #fff;
        color: white;
        padding: 0 8px;
    }

    #wrapper.toggled #header-wrapper .menu-toggle {
        display: none;
    }

    #wrapper #header-wrapper #header-brand {
        margin-top: 10px;
    }

    #wrapper.toggled #page-content {
        padding-left: 60px;
        position: absolute;
        margin-right: -250px;
    }

    #wrapper.toggled.menu-toggle {
        padding: 20px;
        padding-top: 27px;
        background-color: var(--ea-g-main);
        padding-bottom: 17px;
        border-left: 2px solid white;
    }

    #wrapper #page-content {
        margin-top: 67px;
        padding-top: 15px;
        padding-left: 200px;
        width: 100%;
    }

#page-content {
    position: relative;
    margin-bottom: 200px;
}

.ea-breadcrumb {
    margin: 0;
    padding: 20px;
    background-color: transparent;
    flex-wrap: nowrap !important;
    overflow: hidden;
}

    .ea-breadcrumb .breadcrumb-item > a {
        color: white !important;
        font-size: 1.2em;
    }

    .ea-breadcrumb .truncate > a {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

.logo {
    height: 60px;
    padding: 14px;
}

.glyphicon-menu-hamburger {
    padding: 20px;
    top: 5px;
    font-size: 20px;
    color: white !important;
}


#wrapper #header-wrapper {
    background-color: var(--ea-g-main2);
    z-index: 1000;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 67px;
    padding-left: 200px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

    /* header-wrapper clips overflow for the banner background, which would also clip this dropdown-menu; fixed positioning escapes that clip */
    #wrapper #header-wrapper .header-actions-menu > .dropdown-menu {
        position: fixed;
        top: 67px;
        right: 1rem;
        left: auto;
        margin-top: 0;
    }

    #wrapper #header-wrapper > nav {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        display: block !important;
    }

.user-notice {
    margin-top: 00px;
}

.h4 {
    font-size: 1.5em;
}

.Login-browser_details {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.7143em;
    font-style: normal;
    font-weight: normal;
    color: #c0c0c0;
    text-decoration: none;
}

.form-wrepper {
    width: 200px;
    margin: auto;
}

.arrvl-tbl {
    font-size: 1em;
    border-radius: 6px;
}

    .arrvl-tbl > table > thead > tr > th, .arrvl-tbl > thead > tr > td {
        font-size: 0.9rem;
        letter-spacing: 0.1rem;
        text-decoration: underline;
    }

    .arrvl-tbl td a {
        cursor: pointer;
    }

    .arrvl-tbl tbody tr.selected-row > td {
        background-color: rgba(37, 112, 60, 0.15);
    }

        .arrvl-tbl tbody tr.selected-row > td:first-child {
            box-shadow: inset 3px 0 0 var(--ea-arr-main);
        }

.back-to-results-btn {
    cursor: pointer;
}

[dir="rtl"] .back-to-results-btn .mdi-arrow-left {
    transform: scaleX(-1);
}
/**** main menu sidenav  ****/
.main-menu {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 60px;
    z-index: 1000;
    background-color: var(--ea-g-main);
}

    .main-menu.menu-lg {
        position: absolute;
        bottom: Auto;
    }


    .main-menu:hover, nav.main-menu.expanded,
    .main-menu .active {
        overflow: visible;
    }
    /*.main-menu:not(.toggled):hover, nav.main-menu.expanded,
    .main-menu .active {
        overflow: visible;
    }*/
    .main-menu li.menu-item {
        position: relative;
        display: block;
        border: 0;
        color: #f4f4f4;
        font-size: 1.2rem;
        width: 60px;
    }

        .main-menu li.menu-item:hover {
            width: 200px;
            background-color: var(--ea-g-main);
            border-radius: 0 5px 5px 0;
        }

            .main-menu li.menu-item:hover a {
                color: #f2f2f2;
                text-decoration: underline;
                text-underline-offset: 5px;
                text-decoration-color: #eee;
            }

    .main-menu li > a {
        position: relative;
        display: table;
        border-collapse: collapse;
        border-spacing: 0;
        color: #f4f4f4;
        text-decoration: none;
    }

    .main-menu li span.nav-text {
        font-size: 1.2rem
    }

    .main-menu ul.logout {
        margin-top: 30px
    }

    .main-menu .nav-icon {
        position: relative;
        display: table-cell;
        width: 60px;
        height: 36px;
        text-align: center;
        vertical-align: middle;
    }

    .main-menu .nav-text {
        position: relative;
        display: table-cell;
        vertical-align: middle;
        width: 190px;
    }

    .main-menu .help-text {
        display: block;
        position: absolute;
        width: 0;
        left: 0;
        opacity: 1;
        bottom: -2px;
    }

nav.main-menu.expanded {
    width: 200px;
    left: 0;
    overflow-y: auto;
    z-index: 1099;
}

    nav.main-menu.expanded li {
        width: 190px;
    }

        nav.main-menu.expanded li span {
            opacity: 1;
            overflow: visible;
            padding-left: 0;
        }

.main-menu.expanded li .help-text {
    opacity: 0;
    display: none;
}

nav.main-menu:not(.expanded) li.menu-item {
    display: none !important;
}

nav.main-menu:not(.expanded) .nav-text {
    display: none;
}

.main-menu li:hover .help-text {
    opacity: 0;
}

.main-menu > ul {
    margin: 18px 0;
}

.logoff {
    right: 20px;
    position: absolute;
    top: 45px;
}

.main-menu .fa, .main-menu .material-icons {
    position: relative;
    display: table-cell;
    width: 60px;
    height: 50px;
    text-align: center;
    padding: 10px;
    vertical-align: middle;
}

.main-menu .mdi {
    position: relative;
    display: table-cell;
    width: 60px;
    height: 36px;
    text-align: center;
    padding: 5px;
    vertical-align: middle;
    font-size: 19.2px;
}


.toggle-btn .material-icons, .toggle-btn .mdi {
    width: 60px;
    height: 50px;
    padding: 5px;
    text-align: left;
    top: 8px;
    color: white;
    text-decoration: none !important;
}

.toggle-btn:hover {
    text-decoration: none !important;
}

.main-menu .fa-wide {
    left: 10px;
}

#wrapper .toggle-btn {
    display: none;
}

#wrapper.toggled .toggle-btn {
    display: block;
}


.main-menu:hover .active {
    overflow: hidden;
}


.main-menu > ul {
    margin: 20px 0;
}

    .main-menu > ul.logout {
        left: 0;
        bottom: auto;
    }

.no-touch .scrollable.hover {
    overflow-y: auto;
    overflow: visible;
}

nav ul, nav li {
    outline: 0;
    margin: 0;
    padding: 0;
}

.main-menu li span {
    filter: alpha(opacity=0);
    opacity: 0;
    white-space: nowrap;
    padding-left: 10px;
}

.main-menu li:hover span {
    filter: alpha(opacity=100);
    opacity: 1;
}

.main-menu li:hover .help-text {
    opacity: 0;
}

.ea-logo {
    height: 50px;
    display: block;
    padding-top: 15px;
    padding-left: 10px;
}

.ea-version {
    font-size: 12px;
    display: inline;
    color: white;
}

#wrapper .main-menu .ea-logo img {
    max-width: 100px;
    display: inline-block;
}

#wrapper.toggled .main-menu .ea-logo {
    display: none !important;
}

.sub-menu {
    position: fixed;
    background-color: #31353d;
    left: -230px;
    top: 50px;
    margin: 0;
    width: 230px;
    height: 100%;
    display: block;
    z-index: 1;
    text-align: left;
}

    .sub-menu.active {
        background-color: #31353d;
        left: 52px;
        margin: 10px;
        margin-top: 5px;
        padding-top: 15px;
        width: 230px;
        height: 100%;
        display: block;
        z-index: 1;
        text-align: left;
    }

    .sub-menu a, .sub-menu a :hover {
        color: #f4f4f4;
    }

    .sub-menu ul {
        top: 25px;
        position: relative;
    }

    .sub-menu li {
        padding: 4px 0 4px 10px;
        list-style: none;
        text-decoration: none;
        background-color: #31353d;
        border-bottom: 2px solid;
        -moz-transition: all .2s linear;
        -o-transition: all .2s linear;
        -webkit-transition: all .2s linear;
        color: #f4f4f4;
        transition: all .2s linear;
    }

        .sub-menu li a {
            font-size: 1.2em;
            text-decoration: none;
            color: #f4f4f4;
        }

        .sub-menu li:hover {
            -moz-transform: translate(30px, 00px);
            -ms-transform: translate(30px, 00px);
            -o-transform: translate(30px, 00px);
            -webkit-transform: translate(30px, 00px);
            transform: translate(30px, 00px);
            border-radius: 0 9px 9px 0;
        }

#wrapper #page-content.active {
    padding-left: 300px;
}

#wrapper.toggled .truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1250px) {
    .main-menu, .main-menu.expanded {
        left: 0;
    }

    .logout {
        position: relative;
    }

    .main-menu.expanded {
        left: 0;
        overflow-y: auto !important;
    }

    #wrapper #page-content.active {
        padding-left: 180px;
    }

    .sub-menu.active {
        left: 60px;
        position: absolute;
        margin: 0;
        margin-top: 5px;
        padding-top: 15px;
        width: 180px;
        height: 100%;
        display: block;
        z-index: 1000;
        text-align: left;
        -ms-word-break: break-word;
        word-break: break-word;
    }
}
/*main menu end*/

.editbtn {
    text-align: right;
}

.editbox {
    width: 65px;
    text-align: center;
    display: inline-block !important;
}

.editbox-lg {
    width: 100px;
}
/* google material */
.mdi {
    margin: 0 5px;
    vertical-align: middle;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
}

    .mdi.icon-top {
        vertical-align: top;
    }

    .mdi.md-12 {
        font-size: 18px;
    }

.mdi-24px {
    font-size: 18px;
}

.mdi.mdi-32px {
    font-size: 32px;
}

.mdi.mdi-36px {
    font-size: 36px;
}

md-48 {
    font-size: 48px;
}

.mdi.mdi-60px {
    font-size: 60px;
}

.mdi.mdi-80px {
    font-size: 80px;
}
/* end google material */

@media(min-width:768px) {
    .select {
        width: auto;
        display: initial;
    }

    .select-gate {
        width: 100%;
    }

    .user-notice {
        margin-top: 100px;
    }

    #wrapper.no-menu #page-content {
        padding-left: 0;
    }
}

@media(min-width:1250px) {
    .right-md {
        float: right !important;
    }
}

@media (max-width: 767px) {
    .main-menu {
        left: 0;
        width: 60px;
    }

        .main-menu > ul {
            margin-top: 67px;
        }

    #wrapper #header-wrapper,
    #wrapper.toggled #header-wrapper {
        height: 67px;
    }

    #wrapper #page-content {
        margin-top: 67px;
        padding-left: 60px !important;
    }

    #wrapper.no-menu #page-content,
    #wrapper.toggled.no-menu #page-content {
        padding-left: 0 !important;
    }

    .toggle-btn {
        height: 67px;
    }

        .toggle-btn .mdi {
            height: 67px;
        }

    .main-menu.expanded {
        left: initial;
    }

    .search-group input {
        font-size: 16px;
    }
}

@media ( max-width: 970px) {
    .sm-cell {
        text-align: center;
        width: 35px;
    }
}

.card-img-top {
    border-top-right-radius: calc(.25rem - 1px);
    border-top-left-radius: calc(.25rem - 1px);
}

.card-body {
    padding: 1.25rem;
}

    .card-body:before, .card-body:after {
        display: table;
        content: "";
        clear: both;
    }


.cl-prg {
    color: #c21f20;
}

.bg-prg {
    background-color: #c21f20;
    color: white;
}

.bg-prg-dark {
    background-color: #96030b;
    color: #fff;
}

.bg-prg-light {
    background-color: #c0676c;
    color: #fff;
}

.cl-reg {
    color: #53b0dc;
}

.cl-web {
    color: #933cc1;
}


.bg-reg-dark {
    background-color: #377fa0;
    color: #fff;
}

.bg-reg-light {
    background-color: #8eb6c9;
    color: #fff;
}

.bg-dark {
    background-color: #31353d;
    color: #fff;
}



.bg-light {
    background-color: #e2e2e2;
    color: #333;
}

.bg-grey {
    background-color: gray;
    color: #fff;
}

.bg-gray-dark {
    background-color: #585858;
}

.cl-f2f {
    color: #db8c13;
}

.bg-f2f {
    background-color: #db8c13;
    color: white;
}

.bg-f2f-dark {
    background-color: #a0660c;
    color: #fff;
}

.bg-f2f-light {
    background-color: #bc9354;
    color: #fff;
}

.bg-web-light {
    background-color: #9a6cb2;
    color: #fff;
}

.bg-cmp {
    background-color: rgb(88, 88, 88);
    color: rgb(255, 255, 255);
}

.bg-white {
    background-color: white;
}

.no-link {
    text-decoration: none;
}

.white {
    color: white !important;
}

.event-item {
    padding-top: 10px;
    padding-bottom: 5px;
    cursor: pointer;
}

.h4.media-box-heading {
    font-size: 1.2rem
}

.form-group h4 {
    font-size: 1.2rem
}

.list-group .list-group-item {
    color: black
}


.project-banner {
    width: 100%
}

.sticky-table-container {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    overflow-y: auto;
    max-height: 400px;
}

.sticky-table th {
    position: sticky;
    top: 0;
    background-color: #f8f9fa; /* To prevent content from showing through */
    z-index: 10;
}


.form-group-block .form-control, .form-group-block .btn {
    width: 100%;
    /*border-radius: 3px;*/
}

.card > .list-group .list-group-item {
    border: 0;
    padding: 15px;
}

    .card > .list-group .list-group-item.active > a {
        color: white !important;
    }

.b0 {
    border: 0 !important;
}

.row-table {
    display: table;
    table-layout: fixed;
    height: 100%;
    width: 100%;
    margin: 0;
}

.table-cell {
    display: table-cell;
}

.table {
    --bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), 0.02);
    border-top-color: transparent;
}

    .table th {
        border: none;
        border-bottom: solid 1px var(--bs-table-color);
        font-weight: 500;
    }

    .table.table-bordered td {
        border-left-color: #efefef !important;
        border-right-color: #efefef !important;
    }

.row-table > [class*=col-] {
    display: table-cell;
    float: none;
    table-layout: fixed;
    vertical-align: middle;
}

.text-lg {
    font-size: 1.6rem;
}

@media(max-width:768px) {

    .text-lg {
        font-size: 1.3rem;
    }
}

@media(min-width:766px) and (max-width: 1200px) {

    .text-lg {
        font-size: 1.4rem;
    }
}
/* custom checkbox/radio*/

.slider {
    position: relative;
    width: 60px;
    vertical-align: middle;
    height: 10px;
    cursor: pointer;
}

    .slider > input[type='checkbox'] {
        display: none;
    }

        .slider > input[type='checkbox']:checked ~ .toggle {
            left: 28px;
            transition: .5s;
        }

        .slider > input[type='checkbox']:checked ~ .switch {
            background: #6DBEB7;
            transition: .5s;
        }

    .slider .switch {
        display: block;
        width: 30px;
        height: 15px;
        background: #939393;
        border-radius: 20px;
        position: absolute;
        top: 0;
        left: 13px;
        transition: .5s;
    }

    .slider .toggle {
        height: 24px;
        width: 24px;
        border-radius: 50%;
        background: white;
        position: absolute;
        top: -5px;
        left: 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
        transition: .5s;
    }

.eacheckbox-label, .ea-radio {
    cursor: pointer;
    font-weight: initial;
}

    .ea-radio input[type=radio] {
        background-color: #53b0dc;
    }

    .eacheckbox-label input[type=checkbox], .ea-radio input[type=radio] {
        z-index: 1;
        width: 20px;
        height: 20px;
        cursor: pointer;
    }

        .eacheckbox-label input[type=checkbox]:checked:before,
        .ea-radio input[type=radio]:checked:before {
            background-color: inherit;
            border-width: 1px;
            border-color: #53b0dc;
            background: #53b0dc;
            color: #fff;
            border: none;
            animation: ripple 0.2s linear forwards;
        }

        .eacheckbox-label input[type=checkbox]:checked:after {
            position: absolute;
            color: #fff;
            top: 2px;
            left: 6px;
            display: table;
            width: 6px;
            height: 12px;
            border: 2px solid;
            border-top: 0;
            border-left: 0;
            content: ' ';
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        .ea-radio input[type=radio]:checked:after {
            content: ' ';
            position: absolute;
            top: 3px;
            left: 3px;
            display: table;
            width: 12px;
            height: 12px;
            background: inherit;
            border-radius: 50%;
            border: 2px solid #fff;
        }

    .eacheckbox-label > input[type=checkbox],
    .ea-radio > input[type=radio] {
        position: relative;
        display: inline-block;
        width: 0;
        height: 18px;
        margin-top: -2px;
        margin-left: -17px;
        line-height: 1;
        vertical-align: middle;
        margin-right: 20px;
    }

        .eacheckbox-label > input[type=checkbox]:disabled,
        .ea-radio > input[type=radio]:disabled {
            cursor: not-allowed;
        }


        .eacheckbox-label > input[type=checkbox]:before {
            content: "";
            position: absolute;
            width: 18px;
            height: 100%;
            border: 2px solid rgba(0,0,0,.54);
            border-radius: 2px;
            -moz-transition: all .2s;
            -o-transition: all .2s;
            -webkit-transition: all .2s;
            transition: all .2s;
        }

        .ea-radio > input[type=radio]:before {
            content: "";
            position: absolute;
            width: 18px;
            height: 100%;
            border: 2px solid rgba(0,0,0,.54);
            border-radius: 50%;
            -moz-transition: all .2s;
            -o-transition: all .2s;
            -webkit-transition: all .2s;
            transition: all .2s;
        }

        .eacheckbox-label > input[type=checkbox]:disabled::before, .ea-radio > input[type=radio]:disabled::before {
            border: 2px solid lightgray;
            border-color: rgba(88, 88, 88, 0.26);
            background: rgba(88, 88, 88, 0.26);
        }

@supports (-ms-ime-align:auto) {
    .eacheckbox-label input[type=checkbox], .ea-radio input[type=radio] {
        z-index: 1;
        width: 20px;
        height: 20px;
        cursor: pointer;
    }

        .eacheckbox-label input[type=checkbox]:disabled, .ea-radio input[type=radio]:disabled {
            cursor: not-allowed;
        }

    .ea-radio input[type=radio] {
        border-radius: 50%;
    }
}
/* IE10 + IE11 */
@media all and (-ms-high-contrast:none) {
    /* IE10 */
    .eacheckbox-label > input[type=checkbox], .ea-radio > input[type=radio] {
        width: auto;
    }
    /* IE11 */
    *::-ms-backdrop,
    .eacheckbox-label > input[type=checkbox], .ea-radio > input[type=radio] {
        width: auto;
    }
}

#keepSessionAlive {
    width: 394px;
    height: 254px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -197px;
    margin-top: -127px;
    z-index: 999998;
    text-align: center;
}

.keepSessionImage {
    padding-top: 32px;
}

.inactive {
    background-color: #585858;
}

.block {
    display: block;
}

.badgeName {
    white-space: pre-line;
}

.ea-alert-color {
    color: red;
}

.ea-alert {
    visibility: hidden;
    min-width: 250px;
    background-color: #333;
    color: #fff;
    border-radius: 2px;
    padding: 16px 0px 16px 16px;
    position: fixed;
    z-index: 1051;
    top: 0;
    left: calc(50% - 100px);
    box-shadow: 0 3px 1px -2px rgba(0,0,0,.14), 0 2px 2px 0 rgba(0,0,0,.098), 0 1px 5px 0 rgba(0,0,0,.084);
    -webkit-animation: fadeout 0.5s 2.5s;
    animation: fadeout 0.5s;
}

    .ea-alert.show {
        visibility: visible;
        animation: fadein 0.5s;
    }

    .ea-alert:not(.show) {
        -webkit-animation: fadeout 0.5s;
        animation: fadeout 0.5s;
    }

    .ea-alert .dismiss {
        color: #fff !important;
        cursor: pointer;
    }

@-webkit-keyframes fadein {
    from {
        top: -60px;
        opacity: 0;
    }

    to {
        top: 0;
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        top: -60px;
        opacity: 0;
    }

    to {
        top: 0;
        opacity: 1;
    }
}

@-webkit-keyframes fadeout {
    from {
        top: 0;
        opacity: 1;
    }

    to {
        top: -60px;
        opacity: 0;
    }
}

@keyframes fadeout {
    from {
        top: 0;
        opacity: 1;
    }

    to {
        top: -60px;
        opacity: 0;
    }
}

@media (max-width:1250px) {
    .ea-alert {
        top: auto;
        bottom: 0;
    }

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

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

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

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

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

        to {
            bottom: -60px;
            opacity: 0;
        }
    }

    @keyframes fadeout {
        from {
            bottom: 0;
            opacity: 1;
        }

        to {
            bottom: -60px;
            opacity: 0;
        }
    }
}

.truncate {
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
/*#region buttons */

.btn-primary {
    /* Main State: Arrival App Green */
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ea-g-main);
    --bs-btn-border-color: var(--ea-g-main);
    /* Hover State */
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #006a00;
    --bs-btn-hover-border-color: #005c00;
    /* Active/Focus State */
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #005c00;
    --bs-btn-active-border-color: #004e00;
    --bs-btn-focus-shadow-rgb: 0, 128, 0;
    /* Disabled State */
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--ea-g-main);
    --bs-btn-disabled-border-color: var(--ea-g-main);
    --bs-btn-disabled-opacity: 0.65;
    --bs-gradient: none;
    /* regform.css overrides .btn-primary with larger padding/font — reset to Bootstrap defaults */
    font-size: var(--bs-btn-font-size);
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
}

.btn-outline-primary {
    --bs-btn-color: var(--ea-g-main);
    --bs-btn-border-color: var(--ea-g-main);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ea-g-main);
    --bs-btn-hover-border-color: var(--ea-g-main);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ea-g-main);
    --bs-btn-active-border-color: var(--ea-g-main);
    --bs-btn-focus-shadow-rgb: 0, 128, 0;
    --bs-btn-disabled-color: var(--ea-g-main);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--ea-g-main);
    --bs-gradient: none;
}
/* Override the global a:link color rule for <a> elements used as buttons */
a.btn:link, a.btn:visited {
    color: var(--bs-btn-color);
}

a.btn:hover, a.btn:focus {
    color: var(--bs-btn-hover-color);
}

a.btn:active {
    color: var(--bs-btn-active-color);
}


.input-group-addon .btn-md {
    margin-top: -15px;
}

.input-group .project-input {
    font-size: 1rem
}

.form-group.md .form-control:focus ~ .input-group-addon .btn span {
    color: initial;
}

.btn-lg {
    font-size: 18px;
    line-height: 1.3333333;
}

.btn-circle {
    position: relative;
    padding: 0;
    z-index: 98;
    -webkit-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    height: 50px;
    width: 50px;
    display: inline-block;
    -webkit-transition: 0.2s;
    text-align: center;
}

    .btn-circle:hover, .btn-circle:focus {
        cursor: pointer;
        -webkit-box-shadow: 0 8px 15px 0 rgba(0, 0, 0, 0.3);
        box-shadow: 0 8px 15px 0 rgba(0, 0, 0, 0.3);
    }

    .btn-circle span {
        vertical-align: middle;
        padding: 12px 10px;
    }

    .btn-circle.btn-sm {
        height: 35px;
        width: 35px;
        padding: 0;
    }

@media only screen and (max-width:767px) {
    .btn-group.xs-block {
        display: block;
        margin: 5px -5px 5px 5px;
        padding: 2px 25px;
    }

    .btn.xs-block {
        display: block;
        width: 100%;
        margin: 10px 0 9px 0;
    }

        .btn.xs-block span {
            display: block;
            padding: 12px 24px;
        }
}

.progress-ph {
    height: 20px;
    margin-bottom: 20px;
}

.progress {
    width: 100%;
    background: rgb(245, 245, 245);
    border-radius: 6px;
    font-size: 16px;
    box-shadow: none;
}

    .progress > span {
        position: absolute;
    }

.progress-bar {
    border-radius: 2px;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
    transition: 2s linear;
    transition-property: width, background-color;
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
}

.progress > .progress-bar[pb-val="0"] {
    width: 5%;
    background-color: #ff0000;
}

.progress > .progress-bar[pb-val="10"] {
    width: 10%;
    background-color: #f63a0f;
}

.progress > .progress-bar[pb-val="20"] {
    width: 20%;
    background-color: #f63a0f;
}

.progress > .progress-bar[pb-val="30"] {
    width: 30%;
    background-color: #f27011;
}

.progress > .progress-bar[pb-val="40"] {
    width: 40%;
    background-color: #ffd800;
}

.progress > .progress-bar[pb-val="50"] {
    width: 50%;
    background-color: #ffd800;
}

.progress > .progress-bar[pb-val="60"] {
    width: 60%;
    background-color: #f2d31b;
}

.progress > .progress-bar[pb-val="70"] {
    width: 70%;
    background-color: #f2b01e;
}

.progress > .progress-bar[pb-val="80"] {
    width: 80%;
    background-color: #86e01e;
}

.progress > .progress-bar[pb-val="90"] {
    width: 90%;
    background-color: #86e01e;
}

.progress > .progress-bar[pb-val="100"] {
    width: 100%;
    background-color: #00ff21;
}
/*material form inputs*/
.form-group label {
    font-weight: inherit;
}

.form-group.md {
    position: relative;
    margin-top: 2.25rem;
    margin-bottom: 2.25rem;
}

td:not(.md) .form-group.md {
    position: relative;
    margin-top: 0;
    margin-bottom: 0;
}


.form-inline > .form-group.md,
.form-inline > .form-group.md .btn {
    /*display: inline-block;*/
    margin-bottom: 0;
}

.form-inline > .form-group.md {
    margin-left: 15px;
    margin-right: 15px;
}

.form-help {
    margin-top: 0.125rem;
    margin-left: 0.125rem;
    color: #b3b3b3;
    font-size: 0.92rem;
}

.form-group.md input:not([type=checkbox]):not([type=radio]) {
    height: 1.9rem;
}

.form-group.md textarea {
    resize: none;
}

.form-group.md select {
    font-size: 1rem;
    height: 1.6rem;
    padding: 0.125rem 0.125rem 0.0625rem;
    background: none;
    border: none;
    line-height: 1.6;
    box-shadow: none;
}

.form-group.md select {
    height: 2rem;
}

    .form-group.md input[type='text'] ~ .form-label,
    .form-group.md input[type='number'] ~ .form-label,
    .form-group.md input[type='email'] ~ .form-label,
    .form-group.md input[type='password'] ~ .form-label,
    .form-group.md textarea ~ .form-label,
    .form-group.md select ~ .form-label,
    .form-group.md ea-state ~ .form-label,
    .form-group.md ea-country ~ .form-label,
    .form-group.md ea-languages ~ .form-label,
    .form-group.md ea-token-list ~ .form-label {
        position: absolute;
        top: 0.25rem;
        pointer-events: none;
        padding-left: 0.125rem;
        z-index: 1;
        color: #b3b3b3;
        font-size: 1rem;
        font-weight: normal;
        -webkit-transition: all 0.28s ease;
        transition: all 0.28s ease;
    }

.form-group.md textarea:not(.textarea) ~ .form-label {
    top: 2.5rem;
}

.form-group.md input[type=text] ~ .material-icons ~ .form-label,
.form-group.md input[type=number] ~ .material-icons ~ .form-label,
.form-group.md textarea ~ .material-icons ~ .form-label,
.form-group.md input[type=email] ~ .material-icons ~ .form-label,
.form-group.md input[type=password] ~ .material-icons ~ .form-label,
.form-group.md select ~ .material-icons ~ .form-label {
    pointer-events: none;
    padding-left: 2rem;
}
/*.form-group.md .material-icons {
    position: absolute;
    top: 0.25rem;
    padding-left: 0.125rem;
    color: #b3b3b3;
    font-weight: normal;
}*/

.form-group.md.group input {
    padding-left: 2rem;
}

.form-group.md .bar {
    position: relative;
    border-bottom: 0.0625rem solid #999;
    display: block;
}

.form-group.md input[disabled="disabled"] ~ .bar,
.form-group.md input[readonly="readonly"] ~ .bar {
    border-bottom: 0.0625rem dotted rgba(0, 0, 0, 0.6);
}

    .form-group.md input[disabled="disabled"] ~ .bar:hover,
    .form-group.md input[readonly="readonly"] ~ .bar:hover {
        border-bottom: 0.08rem solid #999;
    }

.form-group.md .bar::before {
    content: '';
    height: 0.125rem;
    width: 0;
    left: 50%;
    bottom: -0.0625rem;
    position: absolute;
    background: #337ab7;
    -webkit-transition: left 0.28s ease, width 0.28s ease;
    transition: left 0.28s ease, width 0.28s ease;
    z-index: 2;
}

.form-group.md input[disabled="disabled"] ~ .bar::before,
.form-group.md input[readonly="readonly"] ~ .bar::before {
    background: transparent;
}

.form-group.md input[type=number],
.form-group.md textarea:not([readonly="readonly"]),
.form-group.md input[type=email],
.form-group.md input[type=password],
.form-group.md select,
.form-group.md input[type=text] {
    display: block;
    background: none;
    padding: 0.125rem 0.125rem 0.0625rem;
    font-size: 1rem;
    border-width: 0;
    border-color: transparent;
    line-height: 1.9;
    width: 100%;
    color: transparent;
    box-shadow: none;
}

.form-group.md input[disabled].ng-not-empty,
.form-group.md input[readonly="readonly"].ng-not-empty,
fieldset[disabled="disabled"] .form-group.md input.ng-not-empty {
    color: gray;
    opacity: 1;
}



.form-group.md input[type="file"] {
    line-height: 1;
}

    .form-group.md input[type="file"] ~ .bar {
        display: none;
    }

.form-group.md select,
.form-group.md input:focus,
.form-group.md input:valid,
.form-group.md input.form-file,
.form-group.md input.has-value,
.form-group.md textarea:focus,
.form-group.md textarea:valid,
.form-group.md textarea.has-value,
.form-group.md textarea:not(.not-empty),
.form-group.md textarea.form-file,
.form-group.md textarea.has-value {
    color: #333;
}


.form-group.md textarea[readonly="readonly"] {
    color: gray;
}

.form-group.md input:focus ~ .form-label,
.form-group.md textarea:focus ~ .form-label,
.form-group.md input.form-file ~ .form-label,
.form-group.md input.has-value ~ .form-label,
.form-group.md textarea.form-file ~ .form-label,
.form-group.md textarea.has-value ~ .form-label,
.form-group.md textarea:not(.empty) ~ .form-label,
.form-group.md input:valid:not(.empty):not(.ng-empty) ~ .form-label {
    font-size: 0.8rem;
    color: gray;
    top: -1rem;
}

.form-group.md input.ng-empty ~ .form-label,
.form-group.md input.empty ~ .form-label {
    top: 0;
}

.form-group.md input:focus ~ .form-label {
    font-size: 0.8rem;
    color: gray;
    top: -1rem;
}


.form-group.md input.md-control ~ .form-label,
.form-group.md select.md-control ~ .form-label,
.form-group.md select.select ~ .form-label,
.form-group.md ea-state.md-control ~ .form-label,
.form-group.md ea-country ~ .form-label,
.form-group.md ea-languages ~ .form-label,
.form-group.md ea-token-list.md-control ~ .form-label {
    left: 0;
}

.form-group.md select.md-control:not(.ng-empty) ~ .form-label,
.form-group.md select:not(.ng-empty) ~ .form-label,
.form-group.md ea-state.md-control:not(.ng-empty) ~ .form-label,
.form-group.md ea-country:not(.ng-empty) ~ .form-label,
.form-group.md ea-languages:not(.ng-empty) ~ .form-label,
.form-group.md ea-token-list:not(.ng-empty) ~ .form-label {
    font-size: 0.8rem;
    color: gray;
    top: -1rem;
    left: 0;
}

.form-group.md .md-control {
    border-radius: 0;
}

.form-group.md select:focus,
.form-group.md input:focus,
.form-group.md textarea:focus {
    outline: none;
}

    .form-group.md select:focus ~ .form-label,
    .form-group.md input:focus ~ .form-label,
    .form-group.md input:valid:focus ~ .form-label,
    .form-group.md textarea:focus ~ .form-label,
    .form-group.md select:focus ~ .material-icons,
    .form-group.md input:focus ~ .material-icons,
    .form-group.md textarea:focus ~ .material-icons {
        color: #009EE0;
    }

    .form-group.md select:focus ~ .bar::before,
    .form-group.md input:focus ~ .bar::before,
    .form-group.md textarea:focus ~ .bar::before {
        width: 100%;
        left: 0;
    }

.form-group.md .input-group-addon {
    background-color: transparent;
    border: none;
}

.has-error.form-group.md .form-help,
.has-error.form-group.md .helper, .has-error.radio .form-help,
.has-error.radio .helper, .has-error.form-radio .form-help,
.has-error.form-radio .helper {
    color: #d9534f;
}

.has-error > .form-control, .form-group.md > .form-control:focus {
    box-shadow: none !important;
}

.has-error .bar::before {
    background: #d9534f;
    left: 0;
    width: 100%;
}


@media(min-width:768px) {
    .select {
        width: auto;
        display: initial !important;
    }

    .select-gate {
        width: auto;
    }

    .form-group.md .select:after {
        clear: both;
        display: table;
        content: " ";
    }

    .form-group.md .select:before {
        display: table;
        content: " ";
    }

    .box-md {
        min-width: 500px;
    }

    .event-item .right-content {
        border-left: 1px solid lightgray;
    }

    #wrapper #header-wrapper {
        box-shadow: 0 2px 5px rgba(0,0,0,.26);
    }

    #wrapper #page-content {
        padding-left: 200px;
    }


    #wrapper #sidebar-wrapper {
        width: 250px;
    }

    #wrapper.toggled .sidebar-nav li {
        text-indent: 0;
        line-height: 0;
    }

    #wrapper.toggled #sidebar-wrapper .large-item {
        visibility: visible;
        padding-left: 170px;
    }

        #wrapper.toggled #sidebar-wrapper .large-item i {
            font-size: 1.5em;
        }

    #wrapper.toggled #sidebar-wrapper .small-item,
    #wrapper #sidebar-wrapper .large-item,
    #wrapper.toggled #sidebar-wrapper .top-item {
        display: none;
    }

    #wrapper.toggled #sidebar-wrapper .large-item, #wrapper #sidebar-wrapper .small-item {
        display: inline-block;
    }

    #wrapper.toggled #sidebar-wrapper, #wrapper.toggled #sidebar-wrapper .drop-item {
        left: 80px;
    }

    #wrapper.no-menu #sidebar-wrapper {
        left: 0;
    }

    #wrapper.toggled #sidebar-wrapper .sidebar-nav a:hover > .large-item span {
        position: fixed;
        opacity: 1;
    }

    #wrapper.toggled #sidebar-wrapper .sidebar-nav a .large-item span {
        font-size: 18px;
        width: 150px;
        margin-left: 58px;
        padding: 20px 0 24px 50px;
        margin-top: -35px;
        background-color: white;
        opacity: 0;
        white-space: nowrap;
        border: 1px solid lightgray;
        border-left: none;
    }

    #wrapper.toggled #sidebar-wrapper .sidebar-nav a {
        padding: 10px 20px;
    }

    #wrapper.toggled #sidebar-wrapper .sidebar-nav li:hover > .drop-item li a {
        padding: 3px 20px;
    }

    #page-content {
        position: absolute;
    }

    .main-menu {
        left: 0;
    }

    #page-content.active {
        padding-left: 250px !important;
    }
}
/* material style loader */
.showbox {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 10000;
}

.loader {
    position: relative;
    margin: 0 auto;
    width: 100px;
}

    .loader:before {
        content: '';
        display: block;
        padding-top: 100%;
    }

.circular {
    -webkit-animation: rotate 2s linear infinite;
    animation: rotate 2s linear infinite;
    height: 100%;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
    stroke-linecap: round;
}

@-webkit-keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px;
    }

    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px;
    }
}

@-webkit-keyframes color {
    100%, 0% {
        stroke: #53dc61;
    }
}

@-moz-keyframes color {
    100%, 0% {
        stroke: #53dc61;
    }
}

@keyframes color {
    100%, 0% {
        stroke: #53dc61;
    }
}
/* loader  end*/

.align-bottom {
    vertical-align: bottom;
}


.error {
    color: #a94442;
}

.login-img {
    max-width: 160px;
}

.login-form {
    max-width: 60ch;
    margin: 6% auto 100px auto;
}



    .login-form .validation-summary-errors ul {
        list-style: none;
        padding: 0;
        margin: 0 0 12px;
        color: #c62828;
        font-size: 14px;
    }

        .login-form .validation-summary-errors ul li {
            white-space: pre-line;
        }

.form-group.md .input-group .input-group-addon + input.md-control + .form-label {
    padding-right: 16px;
    margin-left: 60px;
}

.form-group.md .input-group > input.select ~ .input-group-addon {
    width: auto;
}


@media only screen and (min-width: 1250px) {
    .form-group.md:not(.md-full) > .form-control, .form-group.md:not(.md-full) > .bar,
    .form-group.md:not(.md-full) > ea-state > .form-control {
        max-width: 50%;
    }

    .form-inline .form-group.md > .form-control,
    .form-inline .form-group.md > .bar {
        max-width: 100%;
    }
}



#ea-snackbar-container {
    position: fixed;
    left: 20px;
    bottom: 0;
    z-index: 99999;
}

.ea-snackbar {
    overflow: hidden;
    clear: both;
    min-width: 288px;
    max-width: 568px;
    cursor: pointer;
    opacity: 0;
}

    .ea-snackbar.active {
        height: auto;
        opacity: 1;
    }

@media (max-width: 767px) {
    #ea-snackbar-container {
        left: 0px !important;
        right: 0px;
        width: 100%;
    }

        #ea-snackbar-container .snackbar {
            min-width: 100%;
        }
}

@media (max-width: 767px) {
    #ea-snackbar-container {
        left: 0px !important;
        right: 0px;
        width: 100%;
    }

        #ea-snackbar-container .ea-snackbar {
            min-width: 100%;
        }

        #ea-snackbar-container [class="ea-snackbar active"] {
            border-radius: 0;
            margin-bottom: 0;
        }
}

.ea-snackbar {
    background-color: #323232;
    color: #FFFFFF;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    height: 0;
    -moz-transition: -moz-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s, padding 0s linear 0.2s, height 0s linear 0.2s;
    -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s, padding 0s linear 0.2s, height 0s linear 0.2s;
    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s, padding 0s linear 0.2s, height 0s linear 0.2s;
    -moz-transform: translateY(200%);
    -webkit-transform: translateY(200%);
    transform: translateY(200%);
}

    .ea-snackbar.active > a {
        text-decoration: none;
        line-height: 100%;
        font-weight: bold;
        margin-left: 24px;
        float: right;
        color: #4CAF50;
    }

    .ea-snackbar.active {
        padding: 14px 24px 14px 24px;
        margin-bottom: 20px;
        height: auto;
        -moz-transition: -moz-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s;
        -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s;
        transition: transform 0.2s ease-in-out, opacity 0.2s ease-in, height 0s linear 0.2s, height 0s linear 0.2s;
        -moz-transform: none;
        -webkit-transform: none;
        transform: none;
    }

    .ea-snackbar, .ea-snackbar i {
        font-size: 1.5em;
    }


.eacheckbox {
    display: none;
}

    .eacheckbox + label {
        display: inline-block;
        margin: -2px;
        padding: 10px 12px;
        margin-bottom: 0;
        font-size: 18px;
        line-height: 20px;
        color: #333;
        text-align: center;
        text-shadow: 0 1px 1px rgba(255,255,255,0.75);
        vertical-align: middle;
        cursor: pointer;
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
        filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
        -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
        -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    }

        .eacheckbox:checked + label, .eacheckbox + label:hover {
            background-image: none;
            outline: 0;
            -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
            -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
            background-color: #e0e0e0;
        }
/* ----- MATERIAL DESIGN DIALOG/MODAL ----- */
.modal {
    z-index: 1250;
}
    /* FADE/SCALE EFFECT */
    .modal.fade .md-dialog {
        opacity: 0.98;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    .modal.fade.in .md-dialog {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
        -webkit-transform: translate3d(0%, 0, 0);
        -ms-transform: translate3d(0%, 0, 0);
        -o-transform: translate3d(0%, 0, 0);
        transform: translate3d(0%, 0, 0);
    }
/* DIALOG CONTENT */
.md-dialog .modal-content {
    border: none;
    padding: 5px;
    border-radius: 3px;
    -webkit-box-shadow: 0 40px 77px rgba(0, 0, 0, 0.22), 0 27px 24px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 40px 77px rgba(0, 0, 0, 0.22), 0 27px 24px rgba(0, 0, 0, 0.2);
    box-shadow: 0 40px 77px rgba(0, 0, 0, 0.22), 0 27px 24px rgba(0, 0, 0, 0.2);
}
/* DIALOG HEADER */
.md-dialog .modal-header {
    min-height: 10px;
    padding: 10px;
    border-bottom: none;
}

.md-dialog .modal-title {
    font-weight: 500;
    font-size: 21px;
}
/* DIALOG BODY */
.md-dialog .modal-body {
    padding: 0px 10px;
}

    .md-dialog .modal-body p:last-child,
    .md-dialog .modal-body .content:last-child {
        margin-bottom: 0;
    }
/* DIALOG FOOTER */
.md-dialog .modal-footer {
    margin-top: 24px;
    padding: 8px 0;
    border-top: none;
}

    .md-dialog .modal-footer .btn-dialog {
        height: 36px;
        margin-right: 8px;
        padding: 8px 10px;
        border: none;
        border-radius: 0;
        text-transform: uppercase;
        font-weight: 500;
        color: #009688;
        background-color: #fff;
    }

        .md-dialog .modal-footer .btn-dialog:focus {
            outline: none;
            box-shadow: none;
        }

        .md-dialog .modal-footer .btn-dialog:focus,
        .md-dialog .modal-footer .btn-dialog:hover {
            color: #00796B;
        }

        .md-dialog .modal-footer .btn-dialog + .btn-dialog {
            margin-left: 0;
        }

            .md-dialog .modal-footer .btn-dialog + .btn-dialog:last-child {
                margin-left: -4px;
            }
/*End MATERIAL DESIGN DIALOG */

.img-inform {
    max-height: 10em;
    display: block;
}

.btn-remove {
    position: relative;
    top: 30px;
    display: block;
}


#webcodecam-canvas {
    background-color: #272822;
    width: 100%;
    height: 100%;
    transform: scale(1, 1);
}

video {
    max-width: 100%;
    height: auto;
}

.scanner-laser {
    position: absolute;
    margin: 40px;
    height: 30px;
    width: 30px;
    opacity: 0.5;
}

.laser-leftTop {
    top: 0;
    left: 0;
    border-top: solid red 5px;
    border-left: solid red 5px;
}

.laser-leftBottom {
    bottom: 0;
    left: 0;
    border-bottom: solid red 5px;
    border-left: solid red 5px;
}

.laser-rightTop {
    top: 0;
    right: 0;
    border-top: solid red 5px;
    border-right: solid red 5px;
}

.laser-rightBottom {
    bottom: 0;
    right: 0;
    border-bottom: solid red 5px;
    border-right: solid red 5px;
}

#select-cam {
    vertical-align: top;
}

scanner > .eacheckbox-label {
    vertical-align: top;
    margin-left: 30px;
}

.scan-wrepper {
    position: relative;
    display: inline-block;
    max-width: 320px;
    height: auto;
    max-width: 320px;
    height: auto;
    overflow-y: hidden;
    max-height: 240px;
    border: 2px solid gray;
    border-radius: 6px;
}

    .scan-wrepper #Video {
        display: block;
    }

@media screen and (max-width: 400px) {
    @-moz-document url-prefix() {
        .scan-wrepper {
            width: 100%;
            height: auto;
        }
    }
}

.ea-version {
    font-size: 12px;
    display: inline;
    color: white;
}

#header-tools {
    position: fixed;
    top: 18px;
    right: 15px;
    color: white;
    z-index: 2000;
    background-color: rgba(49, 166, 38, 0.5);
    backdrop-filter: blur(2px);
    padding: 4px 6px;
    border-radius: 6px;
}

@media (max-width: 767px) {
    /* While the mobile nav overlay is open, #header-tools (z-index: 2000) floats
       above the sidebar's close button (#menu-toggle, z-index: 1000, trapped inside
       #header-wrapper's own stacking context) and blocks taps on it. Let clicks pass
       through instead of touching the stacking order, so appearance is unaffected. */
    #wrapper:not(.toggled) #header-tools {
        pointer-events: none;
    }
}

#settings-btn
{
    border-left: 1px solid white;
}

#header-tools > a {
    color: white;
}

/* event start/end countdown chip, sits just before the settings cog */
#header-tools .ea-countdown {
    top: 18px;
    right: 60px;
    z-index: 2000;
    color: white;
    padding: 4px 10px;
    white-space: nowrap;
}

.settings-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 300px;
    background-color: white;
    border-radius: 0 0 10px 10px;
    box-shadow: 1px 10px 24px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 2001;
}

    .settings-panel.settings-panel-open {
        opacity: 1;
        visibility: visible;
        pointer-events: all;
        transform: translateY(0);
    }

.search-group {
    display: flex;
    position: relative;
}

/* .form-control-lg has a hard-coded height in Bootstrap; .btn-lg does not
   (its height is just content-derived), so an icon+text button never
   matches an .form-control-lg's height on its own. */
.add-visitor-btn {
    height: calc(1.55rem + 1rem + calc(var(--bs-border-width) * 2));
}

.search-icon-left {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
    color: #9aa0a6;
}

.search-group .form-control {
    padding-left: 2.8rem;
}
/* Caps .search-group's width on desktop to keep search-icon-left aligned with the input in RTL. Excluded on mobile, which relies on the fixed bottom bar layout instead. */
@media (min-width: 768px) {
    .mobile-search-form {
        max-width: 40ch;
    }
}

#wrapper.has-banner #header-wrapper {
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: right center;
}

#wrapper.toggled.has-banner #header-wrapper {
    background-position: right 30px center;
}

@media (max-width: 768px) {
    #wrapper.has-banner #header-wrapper,
    #wrapper.toggled.has-banner #header-wrapper {
        background-position: right center;
        background-color: #31a626;
    }

        #wrapper.has-banner #header-wrapper nav {
            position: absolute;
            left: 50px;
            top: 50%;
            transform: translateY(-50%);
            right: 10px;
            z-index: 2;
        }

    .ea-breadcrumb {
        padding: 0;
    }

        .ea-breadcrumb .breadcrumb-item > a {
            font-size: 0.9em !important;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
            max-width: 100%;
        }
}

.card-top {
    position: sticky;
    top: 60px;
    margin: -15px -15px 16px -15px;
    z-index: 8;
    background-color: white;
    box-shadow: 0 3px 1px -2px rgba(0,0,0,.14), 0 2px 2px 0 rgba(0,0,0,.098), 0 1px 5px 0 rgba(0,0,0,.084);
}

    .card-top .card-title {
        background-color: white;
        border: 0;
        padding: 1rem;
    }

.projcard {
    padding-top: 0.5rem;
    padding-bottom: 1px;
    padding-right: 14px;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position-x: right;
    border-top-right-radius: 0;
}

    .projcard h2, .projcard h4 {
        margin-top: 10px;
        margin-bottom: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.link-btn {
    text-decoration: underline;
    cursor: pointer;
}

scanner {
    max-width: 320px;
    display: block;
    margin: 0 auto;
}

@media (max-width:1150px) {
    .arrvl-tbl > tbody img {
        max-width: 100px;
    }
}

.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: -2
}

footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    left: 0;
    padding: 1rem;
    background-color: #e3efd2;
    background-color: var(--bs-success);
    opacity: 0.8;
}

    footer a {
        text-decoration: underline
    }

        footer a:hover {
            text-decoration: underline
        }

        footer a:link {
            text-decoration: none;
            color: var(--bs-white)
        }

.arrival-card, .arrival-card a {
    color: white;
}

    .arrival-card .card-title {
        background-color: inherit;
        color: inherit;
    }

    .arrival-card .dropdown-menu .dropdown-item {
        color: var(--bs-dropdown-link-color);
    }

    .arrival-card.scanIn {
        background-color: rgb(10, 160, 10);
        color: white;
    }

    .arrival-card.scanOut {
        color: rgb(255, 255, 255) !important;
        background-color: rgb(224, 30, 30);
    }

        .arrival-card.scanIn label, .arrival-card.scanOut label {
            color: white;
        }

    .arrival-card.scanDefault {
        color: rgb(255, 255, 255);
        background-color: rgb(10, 160, 10);
    }
/*@media screen and (max-width:768px) {
    #wrapper:not(.toggled) .breadcrumb-item {
        display: none;
    }
}*/

@media (max-width: 767px) {
    #wrapper:not(.toggled) .breadcrumb-item, #wrapper:not(.toggled) .advanced-settings {
        display: none;
    }
}

.btn > span {
    white-space: normal;
}

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

    td.td-link > a {
        display: block;
        width: 100%;
    }

.lg-right, .md-right {
    float: left;
}

@media (min-width:1920px) {
    .lg-right {
        float: right !important;
    }
}

@media (min-width:768px) {
    .md-right {
        float: right !important;
    }
}

.dropdown-inline {
    display: inline-block;
    display: inline-flex;
}

@media screen and (max-width:768px) {
    .dropdown-inline {
        width: 100%;
        margin: 5px;
    }
}

@media only screen and (max-width:767px) {
    .sm-full .btn-group > .btn:not(:first-child) {
        margin-left: 0;
        margin-right: 0;
    }

    .xs-block {
        display: block;
    }

    .btn-group.xs-block {
        display: block;
        margin: 5px -5px 5px 5px;
        padding: 2px 25px;
    }

    .btn.xs-block {
        display: block;
        width: 100%;
        margin: 0 0 5px 0;
    }

        .btn.xs-block span {
            display: block;
            padding: 12px 24px;
        }

    .sm-full {
        width: 100%;
        padding: 10px 0;
    }

        .sm-full .btn-group:not(.group-lg) {
            width: 100%;
            margin: 10px 0;
        }

        .sm-full .btn-group .mdi-24px {
            line-height: 2;
        }


        .sm-full .btn {
            display: block;
            width: 100%;
            float: left;
            margin: 5px 0 0 0;
            font-size: inherit;
            padding: 10px 25px;
        }

            .sm-full.btn span:not(.caret) {
                padding: 12px 24px;
            }
}

.dropdown-toggle > .mdi {
    line-height: unset;
}

.modal-dialog {
    margin: 15% auto !important;
}


.ea-project_rtl .ea-directional {
    text-align: right;
    direction: rtl;
}

.ea-project_rtl .reset-addon {
    left: 20px;
    right: initial;
}

    .ea-project_rtl .reset-addon .reset-search {
        left: 30px;
        position: absolute;
    }

    .ea-project_rtl .reset-addon .reset-cam {
        left: -10px;
        position: absolute;
        top: 7px;
    }
/* webkit solution */
.ea-project_rtl .ea-directional::-webkit-input-placeholder {
    text-align: left;
}
/* mozilla solution */
.ea-project_rtl input.ea-directional:-moz-placeholder {
    text-align: left;
}

.img-sm {
    max-height: 4em;
}

.reg-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #dde4f0;
    color: #3b4d7a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.reg-status-badge {
    background-color: #d1f0e0;
    color: #1a7040;
    font-weight: 400;
    font-size: 0.8rem;
    border: none;
}

.country-flag {
    height: 14px;
    vertical-align: middle;
}

a {
    cursor: pointer;
}


.ea-project_rtl .search-group .form-control {
    padding-left: 0;
    padding-right: 3.3rem;
}

.search-addon {
    position: absolute;
    z-index: 99;
    left: -8px;
    top: 8px;
}

.cam-addon {
    position: absolute;
    z-index: 99;
    right: 38px;
}

.reset-search {
    position: absolute;
    right: 4px;
    top: 0;
    z-index: 999;
}

    .reset-search .mdi {
        line-height: 1.5;
    }

.ea-project_rtl .search-addon {
    right: 20px;
    left: initial;
}

.search-addon + #Search {
    padding-left: 30px;
}
/* webkit solution */
.ea-project_rtl input.ea-directional::-webkit-input-placeholder {
    text-align: right;
}
/* mozilla solution */
.ea-project_rtl input.ea-directional:-moz-placeholder {
    text-align: right;
}

.reg-details {
    /*   -webkit-transition: all ease-in-out 0.5s;
    -moz-transition: all ease-in-out 0.5s;
    -ms-transition: all ease-in-out 0.5s;
    -o-transition: all ease-in-out 0.5s;
    transition: all ease-in-out 0.5s;*/
}

.searchTbl {
    transition: opacity 0.2s ease-in-out;
}

.search-tbl-dimmed {
    opacity: 0.6;
}

.reg-details {
    float: left;
    position: relative;
    margin-top: 5.3rem;
}

    .reg-details.ng-enter,
    .reg-details.ng-leave.ng-leave-active {
        opacity: 0;
        /*transition-delay: 0s;*/
    }

        .reg-details.ng-leave,
        .reg-details.ng-enter.ng-enter-active {
            opacity: 1;
            /*transition-delay: .5s;*/
        }



.loading-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 15;
    cursor: pointer;
}

.loadingDiv {
    position: fixed;
    bottom: 20px;
    font-size: 2em;
    width: 100%;
}

@media only screen and (max-width:769px) {
    .loadingDiv {
        font-size: 16px;
    }
}

.loading-text:not(.done) span {
    font-size: 20px;
    -webkit-animation-name: blink;
    animation-name: blink;
    -webkit-animation-duration: 1.4s;
    animation-duration: 1.4s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

    .loading-text:not(.done) span:nth-child(2) {
        -webkit-animation-delay: .2s;
        animation-delay: .2s;
    }

    .loading-text:not(.done) span:nth-child(3) {
        -webkit-animation-delay: .4s;
        animation-delay: .4s;
    }


.loading-text:not(.done) label {
    visibility: hidden;
}

.loading-text.done span {
    visibility: hidden;
}

@-webkit-keyframes blink {
    0% {
        opacity: .2;
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: .2;
    }
}

@keyframes blink {
    0% {
        opacity: .2;
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: .2;
    }
}


.img-header {
    max-width: 120px;
    max-height: 28px;
    margin-right: 8px;
    display: inline-block;
    vertical-align: middle;
    background-color: #fff;
    padding: 2px 4px;
    border-radius: 3px;
    flex-shrink: 0;
}

.ea-breadcrumb .breadcrumb-item:first-child {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

@media only screen and (max-width:769px) {
    .img-header {
        max-width: 70px;
        max-height: 20px;
    }
}

#eacredit img, .EventactLogo {
    max-width: 100px;
    padding-bottom: 3px;
}

.footer-container img {
    margin-left: auto;
    margin-right: auto;
}

    .footer-container img:last-child {
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }

.EventactLogo {
    content: url(https://static.eventact.com/imgs/eventact-logo.png);
}

.btn-sm {
    font-size: 1rem;
}

.card {
    margin-bottom: 1rem;
}


.card-block {
    padding: 1rem;
    position: relative;
}

    .card-block h2, .card-block h3, .card-block h4 {
        margin: 0.5rem 0;
    }

.card-block-title {
    border-bottom: 1px solid #e5e5e5 !important;
    background-color: #eeeeee;
    padding: 1.25rem;
}

.card-block-title-alt {
    background-color: #f2f2f2;
}

.card-block .btn {
    margin-bottom: 5px;
}

.card-block .input-group .btn {
    margin-bottom: 0;
    height: auto;
}

.card-title {
    color: var(--bs-body-color);
    font-size: 1.1rem;
    font-weight: 500;
    word-wrap: break-word;
    background-color: white;
    border-bottom: 1px solid var(--ea-g-off);
    z-index: 2;
    padding: 1rem;
    border-top-left-radius: var(--bs-card-border-radius);
    border-top-right-radius: var(--bs-card-border-radius);
    margin-bottom: 0;
}

.card-section-title {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.card > .card-title:last-child {
    border-bottom-left-radius: var(--bs-card-border-radius);
    border-bottom-right-radius: var(--bs-card-border-radius);
}

.card-title a {
    text-decoration: none;
}

.card-title select {
    vertical-align: middle;
    font-size: 1.25rem;
    line-height: 1.25rem;
    height: 2rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.input-group-text {
    border: #07512c 1px solid;
}

.form-control {
    background-color: transparent;
    border: #07512c 1px solid;
    font-size: 1rem
}

.form-select {
    border: #07512c 1px solid;
}

.arrival-card .form-control {
    border: white 1px solid;
}

.col-12 .form-floating > label {
    padding: 1rem 0.5rem;
}

input[type=time].form-control {
    max-width: 12ch;
}


.form-field {
    margin-top: 1.25rem;
    margin-bottom: 2.25rem;
    max-width: 70ch;
}



.btn-link {
    border: none;
    text-decoration: none;
}

.spinner {
    position: relative;
    width: 30px;
    height: 30px;
    left: 48%;
}

    .spinner .blob {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        border: 2px solid black;
        width: 10px;
        height: 10px;
        border-radius: 50%;
    }

        .spinner .blob.top {
            top: 0;
            -webkit-animation: blob-top 1s infinite ease-in;
            animation: blob-top 1s infinite ease-in;
        }

        .spinner .blob.bottom {
            top: 100%;
            -webkit-animation: blob-bottom 1s infinite ease-in;
            animation: blob-bottom 1s infinite ease-in;
        }

        .spinner .blob.left {
            left: 0;
            -webkit-animation: blob-left 1s infinite ease-in;
            animation: blob-left 1s infinite ease-in;
        }

    .spinner .move-blob {
        background: black;
        top: 0;
        -webkit-animation: blob-spinner-mover 1s infinite ease-in;
        animation: blob-spinner-mover 1s infinite ease-in;
    }

@-webkit-keyframes blob-bottom {
    25%, 50%, 75% {
        top: 50%;
        left: 100%;
    }

    100% {
        top: 0;
        left: 50%;
    }
}

@keyframes blob-bottom {
    25%, 50%, 75% {
        top: 50%;
        left: 100%;
    }

    100% {
        top: 0;
        left: 50%;
    }
}

@-webkit-keyframes blob-left {
    25% {
        top: 50%;
        left: 0;
    }

    50%, 100% {
        top: 100%;
        left: 50%;
    }
}

@keyframes blob-left {
    25% {
        top: 50%;
        left: 0;
    }

    50%, 100% {
        top: 100%;
        left: 50%;
    }
}

@-webkit-keyframes blob-top {
    50% {
        top: 0;
        left: 50%;
    }

    75%, 100% {
        top: 50%;
        left: 0;
    }
}

@keyframes blob-top {
    50% {
        top: 0;
        left: 50%;
    }

    75%, 100% {
        top: 50%;
        left: 0;
    }
}

@-webkit-keyframes blob-spinner-mover {
    0%, 100% {
        top: 0;
        left: 50%;
    }

    25% {
        top: 50%;
        left: 100%;
    }

    50% {
        top: 100%;
        left: 50%;
    }

    75% {
        top: 50%;
        left: 0;
    }
}

@keyframes blob-spinner-mover {
    0%, 100% {
        top: 0;
        left: 50%;
    }

    25% {
        top: 50%;
        left: 100%;
    }

    50% {
        top: 100%;
        left: 50%;
    }

    75% {
        top: 50%;
        left: 0;
    }
}


.form-floating > ea-country ~ label {
    color: rgba(var(--bs-body-color-rgb), .65);
    transform: scale(.85) translateY(-0.5rem) translateX(0.15rem);
}

.form-floating #CountryID {
    height: 58px;
}

.form-floating > ea-country > select {
    padding-top: 1.625rem;
    padding-bottom: 0.1rem;
}

.error-critical {
    background-color: yellow;
    color: red;
    padding: 1rem;
    font-size: 1.5rem;
}


.modal.fade:not(.show) {
    opacity: 1 !important;
}

.help-block {
    margin-bottom: 20px;
}


#errorMsgDiv {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 1rem;
}
/* On mobile, overlay the error message at the same bottom-center spot as .mobile-scan-result
   (the success bubble), instead of letting it sit in normal flow above the camera view. */
@media (max-width: 767px) {
    #errorMsgDiv {
        position: fixed;
        bottom: 120px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1020;
        max-width: 90%;
        text-align: center;
        margin-bottom: 0;
    }
}


.camera-panel {
    width: 640px;
    max-width: 90%;
}

.scanner-wrap {
    width: 640px;
    max-width: 90%;
}

.search-divider-inner {
    width: 640px;
    max-width: 98%;
    margin-left: auto;
    margin-right: auto;
}

    .scanner-wrap .camera-panel {
        width: 100%;
        max-width: 100%;
    }

    .camera-panel .qr-scanner {
        width: 100%;
        max-width: 100%;
    }

.camera-frame {
    width: 640px;
    max-width: 100%;
    margin: 0 auto;
    background-color: #1a1a1a;
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    font-size: 0;
}

    /* qr-scanner component doesn't replace its host element, leaving <qr-scanner> as an
       inline wrapper around the inline-block .qr-scanner div — that reserves baseline
       descender space below the video inside .camera-frame's inline formatting context. */
    .camera-frame qr-scanner {
        display: block;
    }

.camera-instructions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    color: #fff;
    font-size: 0.95rem;
}

.qr-scanner {
    position: relative;
    display: inline-block;
    width: 640px;
    max-width: 90%;
    height: auto;
    overflow: hidden;
    border-radius: var(--bs-border-radius);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
    /* Only show the scanner box (black bg, border, shadow) when the video is actively playing */
    .qr-scanner:has(video:not(:paused)) {
        background-color: black;
        border: 1px solid #ccc;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
    /* Hide video and canvas when the stream is paused (e.g. after a scan or while loading) */
    .qr-scanner:has(video:paused) video,
    .qr-scanner:has(video:paused) canvas {
        display: none;
    }

    .qr-scanner video, .qr-scanner canvas {
        width: 100%;
        display: block;
    }

    .qr-scanner canvas {
        position: absolute;
        top: 0;
        left: 0;
    }
/* ================================================================
   RTL — Hebrew layout support
   Selector: [dir="rtl"] set on <html> by LangCtrl when lang = "he"
   ================================================================ */

[dir="rtl"] {
    direction: rtl;
}
    /* Sidebar: pin to right */
    [dir="rtl"] .main-menu {
        left: auto;
        right: 0;
    }

    [dir="rtl"] nav.main-menu.expanded {
        left: auto;
        right: 0;
    }
    /* Menu item hover: open border-radius toward content (left) */
    [dir="rtl"] .main-menu li:hover {
        border-radius: 5px 0 0 5px;
    }
    /* Menu item table layout: reverse so icon is on right, text extends left */
    [dir="rtl"] .main-menu li > a {
        direction: rtl;
    }
    /* Nav text: appears to the left of the icon in RTL */
    [dir="rtl"] .main-menu .nav-text {
        text-align: right;
    }
    /* Nav text indent */
    [dir="rtl"] .main-menu li span {
        padding-left: 0;
        padding-right: 10px;
    }
    /* Toggle button in sidebar: keep icon left-aligned.
   The parent .toggle-btn has scaleX(-1) applied, so physical-left becomes visual-right.
   The visible 30px strip is on the right → icon must be physically LEFT to appear there. */
    [dir="rtl"] .toggle-btn .mdi {
        text-align: left;
    }
    /* Flip chevron icons for RTL: collapse/expand arrows point the correct way.
   Apply transform on the <a> wrapper so display:table-cell on .mdi is preserved */
    [dir="rtl"] .menu-toggle,
    [dir="rtl"] .toggle-btn {
        transform: scaleX(-1);
    }
    /* Logo: swap padding side */
    [dir="rtl"] .ea-logo {
        padding-left: 0;
        padding-right: 15px;
    }
    /* Menu-toggle divider: swap border side */
    [dir="rtl"] #wrapper #header-wrapper .menu-toggle {
        border-left: none;
        border-right: 1px solid #fff;
    }
    /* Header padding: expanded state */
    [dir="rtl"] #wrapper #header-wrapper {
        padding-left: 15px;
        padding-right: 200px;
    }
    /* Header padding: collapsed / toggled state.
   right: 30px mirrors LTR's left: 30px — leaves the rightmost 30px of the sidebar
   uncovered so the toggle-btn icon (z-index: 1000) isn't hidden under the header (z-index: 1050).
   width: auto lets the element stretch from left: 0 to right: 30px. */
    [dir="rtl"] #wrapper.toggled #header-wrapper {
        left: 0;
        right: 30px;
        width: auto;
        padding-right: 15px;
        padding-left: 15px;
    }

    [dir="rtl"] #wrapper.no-menu #header-wrapper {
        right: 0;
        left: 0;
        padding-right: 15px;
    }
    /* Header actions dropdown: mirror side */
    [dir="rtl"] #wrapper #header-wrapper .header-actions-menu > .dropdown-menu {
        right: auto;
        left: 1rem;
    }
    /* Page content: expanded state */
    [dir="rtl"] #wrapper #page-content {
        padding-left: 0;
        padding-right: 200px;
    }
    /* Page content: collapsed / toggled state */
    [dir="rtl"] #wrapper.toggled #page-content {
        padding-left: 0;
        padding-right: 60px;
        margin-right: 0;
        margin-left: 0;
        position: relative; /* reset LTR's position: absolute — not needed in RTL */
    }

    [dir="rtl"] #wrapper.no-menu #page-content {
        padding-left: 0;
        padding-right: 0;
    }
    /* Sidebar wrapper position */
    [dir="rtl"] #wrapper.toggled #sidebar-wrapper,
    [dir="rtl"] #wrapper.toggled #sidebar-wrapper .drop-item {
        left: auto;
        right: 80px;
    }
    /* Sub-menu: flip side */
    [dir="rtl"] .sub-menu {
        left: auto;
        right: -230px;
        text-align: right;
    }

        [dir="rtl"] .sub-menu.active {
            left: auto;
            right: 52px;
            text-align: right;
        }

        [dir="rtl"] .sub-menu li:hover {
            transform: translate(-30px, 0);
            border-radius: 9px 0 0 9px;
        }
    /* Breadcrumb separator */
    [dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
        float: right;
        padding-right: 0;
        padding-left: 0.5rem;
    }
    /* Action links in header: keep on right side (near right-side sidebar) */
    [dir="rtl"] #action-links {
        float: right;
        padding-right: 0;
        padding-left: 10px;
        margin-right: 0;
        margin-left: 50px;
    }
    /* Spinner */
    [dir="rtl"] .spinner {
        left: auto;
        right: 45%;
    }
    /* Settings bar floats left in RTL */
    [dir="rtl"] .settings {
        float: left !important;
        text-align: left;
    }
    /* Banner: flip to left side in RTL (away from right-side sidebar) */
    [dir="rtl"] #wrapper.has-banner #header-wrapper,
    [dir="rtl"] #wrapper.toggled.has-banner #header-wrapper {
        background-position: left center;
    }
        /* Mobile nav: flip left offset to right in RTL */
        [dir="rtl"] #wrapper.has-banner #header-wrapper nav {
            left: auto;
            right: 50px;
        }
    /* Logo: swap margin side in RTL */
    [dir="rtl"] .img-header {
        margin-right: 0;
        margin-left: 8px;
    }
    /* Settings icon: move to left side in RTL */
    [dir="rtl"] .advanced-settings {
        right: auto;
        left: 15px;
    }

    /* Header tools chip (settings cog + countdown): move to left side in RTL,
   mirroring the sidebar move to the right. Without this, the chip stays pinned
   to the physical right edge and collides with the breadcrumb, which now hugs
   the right side (next to the RTL sidebar). */
    [dir="rtl"] #header-tools {
        right: auto;
        left: 15px;
    }
    /* Divider now faces the countdown chip, which sits to its right in RTL */
    [dir="rtl"] #settings-btn {
        border-left: none;
        border-right: 1px solid white;
    }

    /* Countdown chip: move to left side in RTL, before the settings icon */
    [dir="rtl"] #header-tools .ea-countdown {
        right: auto;
        left: 60px;
    }

    [dir="rtl"] .settings-panel {
        right: auto;
        left: 0;
    }
    /* Keep ID/code inputs LTR */
    [dir="rtl"] .editbox,
    [dir="rtl"] .editbox-lg {
        direction: ltr;
        text-align: center;
    }
    /* Input group: flip border-radius for search bar */
    [dir="rtl"] .input-group:not(.has-validation) > :first-child:not(.dropdown-toggle) {
        border-radius: 0 0.375rem 0.375rem 0;
    }

    [dir="rtl"] .input-group > :last-child {
        border-radius: 0.375rem 0 0 0.375rem;
    }
    /* Bootstrap spacing utilities: swap inline */
    [dir="rtl"] .ms-1 {
        margin-right: 0.25rem !important;
        margin-left: 0 !important;
    }

    [dir="rtl"] .ms-2 {
        margin-right: 0.5rem !important;
        margin-left: 0 !important;
    }

    [dir="rtl"] .ms-3 {
        margin-right: 1rem !important;
        margin-left: 0 !important;
    }

    [dir="rtl"] .ms-4 {
        margin-right: 1.5rem !important;
        margin-left: 0 !important;
    }

    [dir="rtl"] .me-1 {
        margin-left: 0.25rem !important;
        margin-right: 0 !important;
    }

    [dir="rtl"] .me-2 {
        margin-left: 0.5rem !important;
        margin-right: 0 !important;
    }

    [dir="rtl"] .me-3 {
        margin-left: 1rem !important;
        margin-right: 0 !important;
    }

    [dir="rtl"] .me-4 {
        margin-left: 1.5rem !important;
        margin-right: 0 !important;
    }
    /* Float utilities */
    [dir="rtl"] .float-end {
        float: left !important;
    }

    [dir="rtl"] .float-start {
        float: right !important;
    }
/* Medium screens */
@media (max-width: 1250px) {
    [dir="rtl"] .main-menu,
    [dir="rtl"] .main-menu.expanded {
        left: auto;
        right: 0;
    }

    [dir="rtl"] .sub-menu.active {
        left: auto;
        right: 60px;
    }

    [dir="rtl"] #wrapper #page-content.active {
        padding-left: 0;
        padding-right: 180px;
    }
}
/* Small screens */
@media (max-width: 767px) {
    [dir="rtl"] .main-menu {
        left: auto;
        right: 0;
    }

    [dir="rtl"] #wrapper #page-content {
        padding-left: 0 !important;
        padding-right: 40px !important;
    }
}

[dir="rtl"] .search-icon-left,
.ea-project_rtl .search-icon-left {
    left: unset;
    right: 0.85rem;
}
/* Language switcher */
.lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.lang-btn {
    font-size: 0.8rem;
    padding: 1px 7px;
    border-radius: 20px;
    border: 1px solid transparent;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.15s;
}

    .lang-btn:hover {
        border-color: currentColor;
    }

.lang-btn--active {
    border-color: currentColor;
    font-weight: 600;
}
/* Import dropzone */
.dropzone {
    height: 120px;
    width: 200px;
    text-align: center;
    font-size: 1.25rem;
    background-color: #e8f6ff;
    position: relative;
    max-width: 300px;
    outline: 2px dashed #88c8e3;
    outline-offset: -10px;
}

    .dropzone [type="file"] {
        cursor: pointer;
        position: absolute;
        opacity: 0;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    .dropzone .icon {
        text-align: center;
        width: 100%;
    }

    .dropzone label {
        padding-left: 0.5rem !important;
        font-weight: normal;
    }

@media (min-width: 768px) {
    .dropzone {
        width: 300px;
        height: 120px;
        padding: 25px 10px;
    }
}
/* Project Welcome */
.pw-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 36px;
    border-radius: 16px;
    border-color: #e0e0e0;
    padding: 36px;
}

.pw-circle {
    width: 170px;
    height: 170px;
    background: var(--ea-g-off);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .pw-circle .mdi {
        font-size: 80px;
        color: var(--ea-g-main);
    }

.pw-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 24px;
}

    .pw-actions .btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 26px;
        border-radius: 8px;
    }

.btn-outline {
    background: #fff;
    color: #444;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 12px 26px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: border-color .15s, color .15s;
}

    .btn-outline:hover {
        border-color: var(--ea-g-main);
        color: var(--ea-g-main);
        background: #fff;
    }
/* Login page */
.login-card {
    border-radius: 16px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
    background: #fff;
    overflow: hidden;
}

    .login-card .card-title {
        border-bottom: 1px solid #e0e0e0;
    }

    .login-card .card-block {
        padding: 28px 36px 32px;
    }

.login-field {
    display: flex;
    align-items: stretch;
    border: 1px solid #d0d0d0;
    border-radius: 10px;
    margin-bottom: 14px;
    background: #fff;
    overflow: hidden;
    transition: border-color .15s;
}

    .login-field:focus-within {
        border-color: var(--ea-g-main);
    }

    .login-field .lf-icon {
        display: flex;
        align-items: center;
        padding: 0 14px;
        border-right: 1px solid #d0d0d0;
        color: #555;
        flex-shrink: 0;
    }

    .login-field .lf-body {
        flex: 1;
        position: relative;
        min-width: 0;
        padding: 0;
    }

        .login-field .lf-body label {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 14px;
            color: #aaa;
            font-weight: 400;
            pointer-events: none;
            transition: top .2s ease, font-size .2s ease, color .2s ease, transform .2s ease;
            line-height: 1;
            margin: 0;
        }

        .login-field .lf-body input {
            display: block;
            width: 100%;
            border: none;
            outline: none;
            background: transparent;
            font-size: 14px;
            color: #333;
            padding: 26px 14px 8px;
            box-sizing: border-box;
        }

            .login-field .lf-body input:focus ~ label,
            .login-field .lf-body input:not(:placeholder-shown) ~ label {
                top: 10px;
                transform: translateY(0);
                font-size: 11px;
                color: #555;
                font-weight: 600;
            }

            .login-field .lf-body input::placeholder {
                color: transparent;
            }

            .login-field .lf-body input:-webkit-autofill,
            .login-field .lf-body input:-webkit-autofill:hover,
            .login-field .lf-body input:-webkit-autofill:focus {
                -webkit-box-shadow: 0 0 0 1000px #fff inset;
                -webkit-text-fill-color: #333;
            }

    .login-field .lf-toggle {
        display: flex;
        align-items: center;
        padding: 0 14px;
        border-left: 1px solid #d0d0d0;
        cursor: pointer;
        color: #666;
        flex-shrink: 0;
        background: none;
        border-top: none;
        border-bottom: none;
        border-right: none;
    }
/* Login input-group */
.login-form .input-group {
    border: 1px solid #07512c;
    border-radius: var(--bs-border-radius);
    overflow: hidden;
}

    .login-form .input-group .form-control,
    .login-form .input-group .input-group-text {
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        margin-left: 0 !important;
        margin-right: 0;
    }

    .login-form .input-group > :not(:last-child) {
        border-right: 1px solid rgba(7, 81, 44, 0.35) !important;
    }

.login-form .input-group-text {
    background-color: var(--ea-g-main);
    color: white;
}

.login-form .form-floating > label {
    z-index: 1000;
}

.login-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
}

    .login-row .form-check-label {
        color: #333;
    }

    .login-row .form-check-input {
        accent-color: var(--ea-g-main);
    }

    .login-row a {
        color: var(--ea-g-main);
        text-decoration: none;
        font-weight: 500;
    }

        .login-row a:hover {
            text-decoration: underline;
        }

.btn-signin {
    width: 100%;
    background: var(--ea-g-main);
    color: #fff;
    border: 1px solid var(--ea-g-main);
    border-radius: 10px;
    padding: 13px 20px;
    font-size: 1.25rem;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s;
}

    .btn-signin:hover {
        background: #11c311;
        border-color: #11c311;
        color: #fff;
    }

.login-footer {
    background-color: #fff;
    border-top: 1px solid #e0e0e0;
    opacity: 1;
    display: flex;
    align-items: center;
    padding: 14px 24px;
}

    .login-footer a {
        color: var(--ea-g-main);
        font-weight: 600;
        text-decoration: none;
    }

        .login-footer a:hover {
            text-decoration: underline;
        }

@media (max-width: 767px) {
    .login-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .pw-card {
        flex-direction: column;
        text-align: center;
        padding: 28px 20px;
        gap: 20px;
    }

    .pw-actions {
        flex-direction: column;
        gap: 10px;
    }

        .pw-actions .btn,
        .btn-outline {
            width: 100%;
            justify-content: center;
        }
}

.ps-search-bar {
    display: flex;
    align-items: center;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background: #fff;
    overflow: visible;
    position: relative;
}

.ps-search-icon {
    font-size: 18px;
    color: #9ca3af;
    padding: 0 10px 0 14px;
    flex-shrink: 0;
}

.ps-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    color: #374151;
    padding: 10px 8px;
    background: transparent;
    min-width: 0;
}

    .ps-search-input::placeholder {
        color: #9ca3af;
    }

.ps-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    background: var(--ea-g-main);
    color: #fff;
    border: none;
    border-radius: 0 7px 7px 0;
    padding: 0 12px;
    margin: 0;
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s;
}

    .ps-search-btn:hover {
        background: #11c311;
    }

.ps-filter-divider {
    width: 1px;
    height: 24px;
    background: #d0d5dd;
    flex-shrink: 0;
}

.ps-filter-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    flex-shrink: 0;
}

    .ps-filter-btn:hover {
        color: #111;
    }

.ps-filter-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    background: #fff;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    z-index: 100;
    padding: 4px 0;
}

.ps-filter-option {
    padding: 9px 16px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
}

    .ps-filter-option:hover {
        background: #f3f4f6;
    }

.ps-filter-option-active {
    font-weight: 600;
    color: var(--ea-g-main);
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 24px 40px;
    text-align: center;
}

.empty-state-title {
    font-size: 18px;
    font-weight: 700;
    color: #212529;
    margin-bottom: 6px;
}

.empty-state-subtitle {
    font-size: 16px;
    color: #6c757d;
}

.empty-state-link {
    display: block;
    margin-top: 6px;
    color: var(--ea-g-main);
    cursor: pointer;
    text-decoration: underline;
}

    .empty-state-link:hover {
        color: #006a00;
    }

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    .icon-btn:hover {
        background-color: rgba(0, 0, 0, 0.08);
    }

    .icon-btn:active {
        background-color: rgba(0, 0, 0, 0.14);
    }

.bg-green-light {
    background-color: var(--ea-g-off);
}

.stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: rgba(40, 167, 69, 0.12);
    color: #28a745;
    flex-shrink: 0;
}

.avatar-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(40, 167, 69, 0.12);
    color: #28a745;
    font-weight: 600;
    font-size: 0.8rem;
    flex-shrink: 0;
}

@media (max-width: 767.98px) {
    .fields-check {
        padding-top: 6px;
        padding-bottom: 6px;
    }

        .fields-check .form-check-input {
            width: 1.25em;
            height: 1.25em;
            margin-top: 0.075em;
        }
}
/* Gate page — long-press navigation lock */
.gate-lock-hint {
    position: fixed;
    top: -9999px;
    left: -9999px;
    background: rgba(30, 30, 30, 0.92);
    color: #fff;
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -100%) scale(0.85);
    transition: opacity 0.15s, transform 0.15s;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

    .gate-lock-hint::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 6px solid transparent;
        border-top-color: rgba(30, 30, 30, 0.92);
    }

    .gate-lock-hint.visible {
        opacity: 1;
        transform: translate(-50%, -100%) scale(1);
    }

    .gate-lock-hint.gate-lock-hint-below {
        transform: translate(-50%, 0) scale(0.85);
    }

        .gate-lock-hint.gate-lock-hint-below::after {
            top: auto;
            bottom: 100%;
            border-top-color: transparent;
            border-bottom-color: rgba(30, 30, 30, 0.92);
        }

        .gate-lock-hint.gate-lock-hint-below.visible {
            transform: translate(-50%, 0) scale(1);
        }

.gate-holding {
    position: relative;
    overflow: hidden;
}

    .gate-holding::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        height: 3px;
        background: rgba(255, 255, 255, 0.85);
        width: 0;
        animation: gate-hold-progress 1s linear forwards;
    }

@keyframes gate-hold-progress {
    to {
        width: 100%;
    }
}
/* ================================================================
   AttendanceControl — Mobile camera full-screen layout
   ================================================================ */
@media (max-width: 767px) {
    /* Gate/Direction bar fixed at bottom, above search */
    .arrival-card {
        position: fixed;
        bottom: 50px;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 1030;
        border-radius: 0;
        margin: 0;
    }
        /* Gate bar inner layout: name left, direction right; settings wraps to its own row */
        .arrival-card .card-title {
            display: flex;
            align-items: center;
            padding: 14px 14px;
            flex-wrap: wrap;
            row-gap: 0;
            background-color: inherit;
            color: inherit;
        }
        /* Settings row: full-width second row with separator */
        .arrival-card .settings {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 2px 10px;
            padding-top: 6px;
            border-top: 1px solid rgba(255,255,255,0.3);
            margin-top: 4px;
            font-size: 0.875rem;
            text-align: left;
        }

        .arrival-card .card-title > a:first-child {
            font-weight: bold;
            flex-shrink: 0;
        }
    /* Push direction group to the right */
    .gate-direction-group {
        margin-left: auto;
        display: flex;
        align-items: center;
        flex-shrink: 0;
        gap: 4px;
    }
    /* Direction select as compact rounded button */
    .arrival-card .gate-direction-group .select {
        border-radius: 6px;
        padding: 2px 6px;
        height: auto;
        min-width: 52px;
        width: auto !important;
        display: inline-block !important;
        color: #333;
        font-weight: bold;
        background-color: white;
        border: none;
    }
    /* Camera fills screen between header and fixed bottom bars */
    .mobile-scanner-wrapper {
        position: fixed;
        top: 50px;
        left: 0;
        right: 0;
        bottom: 100px;
        z-index: 1010;
        margin: 0;
        padding: 0;
    }

        /* Override camera-panel's fixed 640px sizing (desktop) so left:0/right:0
           can stretch the wrapper across the full screen, same as before. */
        .mobile-scanner-wrapper.camera-panel {
            width: auto;
            max-width: 100%;
        }

        /* Reuse Find's camera-frame/camera-instructions structure, but keep the video
           filling the whole wrapper exactly as before — the instructions message
           floats on top as an overlay instead of taking up its own space. */
        .mobile-scanner-wrapper .camera-frame {
            width: 100%;
            height: 100%;
            max-width: 100%;
            margin: 0;
            position: relative;
            border-radius: 0;
        }

        .mobile-scanner-wrapper .camera-instructions {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1;
            background: rgba(0, 0, 0, 0.5);
        }

        .mobile-scanner-wrapper qr-scanner {
            display: block;
            height: 100%;
        }

        .mobile-scanner-wrapper .qr-scanner {
            width: 100%;
            height: 100%;
            max-width: 100%;
            display: block;
        }

            .mobile-scanner-wrapper .qr-scanner video {
                height: 100%;
                object-fit: cover;
            }
            /* Centre the canvas within the full-screen video without distorting its aspect ratio */
            .mobile-scanner-wrapper .qr-scanner canvas {
                top: 50% !important;
                left: 50% !important;
                transform: translate(-50%, -50%);
            }
    /* Scan result overlay centred at the bottom of the camera */
    .mobile-scan-result {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(50, 50, 50, 0.85);
        color: white;
        padding: 10px 24px;
        border-radius: 8px;
        z-index: 1015;
        text-align: center;
        white-space: nowrap;
        font-size: 1.1rem;
        font-weight: bold;
    }
    /* Search input bar fixed at very bottom, centred */
    .mobile-search-form {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1030;
        background: white;
        padding: 6px 10px;
        margin: 0;
        display: flex;
        justify-content: center;
    }

        .mobile-search-form .input-group {
            width: auto;
        }
    /* Prevent content from sliding under fixed bottom bars */
    .main-panel {
        padding-bottom: 110px;
    }
}
/* Dashboard stat card components */
.stat-icon-circle {
    width: 70px;
    height: 70px;
}

.stat-divider {
    width: 28px;
    height: 2px;
    margin-top: 5px;
}

.stat-number {
    font-size: 2.5rem;
}
/* Clickable table rows */
tr[ng-click] {
    cursor: pointer;
}
/* Theme background utility */
.bg-ea-main {
    background-color: var(--ea-g-main);
    color: #fff;
}
/* Results table image placeholder */
.ear-results__td {
    padding: 2px;
}

.ear-results__row--img {
    height: 36px;
    max-width: 100%;
    border-radius: 4px;
}
/* Cursor utilities */
.cursor-pointer {
    cursor: pointer;
}