:root {
    --header-color: rgb(32, 34, 37);
    --sidebar-color: rgb(47, 49, 54);
    --content-color: rgb(54, 57, 63, .99);
    --active-color: rgb(57, 60, 67);
    --text-color: rgba(255, 255, 255, .75);
    --text-alt-color: rgb(142, 146, 151);
    --text-content-color: rgb(255, 252, 237);
    --text-hover-color: rgb(193, 187, 191);
    --background-color: rgb(54, 57, 63, .94);
}

body {
    background-color: var(--background-color);
    color: var(--text-content-color);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--sidebar-color) inset !important;
    -webkit-text-fill-color: var(--text-color) !important;
}

.alert-link {
    min-width: 75px;
    cursor: pointer;
}

.alert-link:hover {
    text-transform: uppercase;
}

.container {
    padding-left: 0;
    padding-right: 0;
}

.alert ul {
    list-style: none;
    padding: 0;
}

.oi-card {
    font-size: 1.6rem;
    margin-top: 15px;
    width: 50px;
    float: left;
}

.summary {
    color: var(--text-alt-color);
    height: 100%;

    /*min-height: 128px;*/
}

    .summary .linked {
        cursor: pointer;
    }

    .summary .danger {
        color: var(--danger);
    }

    .summary .summary-footer {
        margin-bottom: 5px;
        font-size: 0.9rem;
        text-align: end;
    }

        .summary .summary-footer span {
            text-align: center;
            display: block;
            opacity: 0.7;
        }

        .summary .summary-footer a {
            color: var(--text-alt-color);
            font-weight: bold;
        }

hr {
    background-color: var(--text-alt-color);
}

.validation-summary-errors li,
.validation-summary-errors ul {
    list-style: none;
    padding: 0;
}

.card {
    background-color: var(--sidebar-color);
    padding: 15px;
    padding-top: 0px;
    padding-bottom: 0px;
    box-shadow: 8px 8px 8px -4px rgba(0,0,0,.20);
    border-radius: 10px;
    /*box-shadow: 0 13px 27px -5px rgba(50,50,93,.25), 0 8px 16px -8px rgba(0,0,0,.3), 0 -6px 16px -6px rgba(0,0,0,.025);*/
}

.amount {
    font-size: 1.6rem;
    font-weight: bold;
    color: var(--text-content-color);
}

/*.card-body {
    padding-bottom: 15px;
}*/


#logo {
    height: 40px;
    background: url(/images/logo.svg) left center/195px 38px no-repeat !important;
}

#logo-large {
    /*    height: 70px;
    background: url(/images/logo.svg) left top/300px 70px no-repeat !important;*/
    height: 75px;
    background: url(/images/logo.svg) no-repeat;
    background-position: center;
}


.sidebar {
    background-color: var(--sidebar-color);
}

    .sidebar a {
        color: var(--text-alt-color);
    }

.main .top-row,
.navbar,
.navbar-brand {
    background-color: var(--header-color);
}

.sidebar .nav-item a.active {
    background-color: var(--active-color);
    color: var(--text-color);
}

.sidebar .nav-item a:hover {
    background-color: var(--active-color);
    color: var(--text-hover-color);
}

.form-control,
.form-control:focus {
    background-color: var(--sidebar-color) !important;
    border-color: var(--text-alt-color);
    color: var(--text-color);
}

    .form-control:disabled {
        border-color: var(--text-alt-color);
        color: var(--text-color);
    }

    .form-control-sm {
        padding-left: 6px;
        padding-right: 6px;
    }

.card-deck .search {
    height: 28px;
    border-radius: 0.2rem;
}
 .search {
    height: 2.1rem;
    border-radius: 0.2rem;
}

.table .oi {
    margin-left: 5px;
}

.table .badge {
    display: inline-block;
    padding: 4px 10px;
    min-width: 75px;
    background-color: transparent;
}

.table .user {
    border: 1px solid #F8F9FA;
    color: #F8F9FA;
}

.table .invite {
    border: 1px solid #FFC107;
    color: #FFC107;
}

.table .failed {
    border: 1px solid var(--text-alt-color);
    color: var(--text-alt-color);
}

.table .active {
    border: 1px solid #28A745;
    color: var(--success);
}
.table .danger {
    border: 1px solid var(--danger);
    color: var(--danger);
}
.table .success {
    border: 1px solid var(--success);
    color: var(--success);
}
.table .warning {
    border: 1px solid var(--warning);
    color: var(--warning);
}

.table .info {
    border: 1px solid var(--info);
    color: var(--info);
}


.table .admin {
    border: 1px solid #007BFF;
    color: #007BFF;
}

.table .suspended {
    border: 1px solid #DC3545;
    color: #DC3545;
}

.table {
    font-size: 0.88rem;
    width: 100%; /* Make the table take the full width of its container */
    table-layout: auto; /* Allow dynamic adjustment of column widths */
}

    .table td {
        padding: 12px;
        color: var(--text-color);
        border-color: var(--text-alt-color);
    }

    .table2 td,
    .table2 th {
        padding: 8px;
    }

    .table2 tr {
        cursor: pointer;
    }

    .table3 td {
        padding: 12px;
    }

.table3 .compact td {
    padding: 8px;
}

.table3 .hover-show {
    visibility: hidden;
}

.table3 tr:hover .hover-show {
    visibility: visible;
}


.menu {
    background-color: var(--header-color) !important;
}

    .menu .navigation-item-icon {
        color: white !important;
    }

    .menu .navigation-item-icon-children {
        color: white !important;
    }

    .menu .navigation-item-wrapper {
        padding: 10px !important;
    }

.smallsearch .blazored-typeahead__input {
    height: 2.1rem;
    font-size: 0.875rem;
}
.card-deck .smallsearch .blazored-typeahead__input {
    height: 30px;
    font-size: 0.875rem;
}
.card-deck .blazored-typeahead__controls,
.blazored-typeahead__input-mask-wrapper {
    height: 30px;
    font-size: 14px;
}

.blazored-typeahead__controls,
.blazored-typeahead__input-mask-wrapper {
    height: 2.1rem;
    font-size: 14px;
}

.blazored-typeahead,
.blazored-typeahead__input {
    background-color: var(--sidebar-color);
    border-color: var(--text-alt-color);
    color: var(--text-alt-color);
    border-radius: 0.2rem;
}

.blazored-typeahead:focus-within {
    background-color: var(--sidebar-color);
    border-color: var(--text-alt-color);
    color: var(--text-alt-color);
    border-color: #ffcfc1;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(255, 109, 65, 0.25);
}

.blazored-typeahead__controls:focus {
    outline: none !important;
}

.checkbox2 {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* Hide the browser's default checkbox */
    .checkbox2 input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.checkbox2:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkbox2 input:checked ~ .checkmark {
    background-color: #3F3F3F;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkbox2 input:checked ~ .checkmark:after {
    display: block;
    padding-top: 10px;
}

/* Style the checkmark/indicator */
.checkbox2 .checkmark:after {
    left: 8px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.daterangepicker .available {
    color: black;
}


.table3 td {
    vertical-align: middle;
}

.table3 tbody tr {
    cursor: pointer;
}

.deposit {
    padding: 10px 0px;
    border: 1px solid var(--text-alt-color);
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    box-shadow: 0 13px 27px -5px rgba(50,50,93,.25), 0 8px 16px -8px rgba(0,0,0,.3), 0 -6px 16px -6px rgba(0,0,0,.025);
}

    .deposit:hover {
        border: 1px solid var(--success);
    }

.selected,
.selected:hover {
    border: 2px solid var(--success);
    cursor: default;
    color: var(--success);
    padding: 9px 0px;
}

.nav-sub-header {
    margin-top: 1rem;
    font-size: 1rem;
    color: var(--text-color);
}

.address .items {
    font-size: 0.9rem !important;
}

.province {
    font-size: 0.9rem !important;
    /*height: 31px !important;*/
}

    .province .item {
        font-size: 0.8rem !important;
        padding: 4px 6px !important;
    }

.icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon:hover {
    color: var(--text-alt-color);
    text-decoration: none;
}

.dropdown-menu {
    background-color: var(--content-color);
    border: 1px solid var(--dd-text);
}

.dropdown-item {
    color: var(--text-color);
}

.dropdown-item:hover {
    color: var(--text-color);
    background-color: var(--header-color);
}

#logo2 {
    width: 200px;
    height: 40px;
    background-color: var(--header-color);
    background: url(https://optimise.parcelninja.com/images/logo.svg) left center/195px 36px no-repeat !important;
}

.radio-group {
}

    .radio-group .item {
        padding: 16px 24px;
        border: 1px solid var(--text-alt-color);
        border-radius: 8px;
        cursor: pointer;
        margin-bottom: 10px;
        color: var(--text-alt-color)
    }

    .radio-group .selected {
        padding: 14px 24px;
        border: 3px solid var(--success);
        color: white;
    }


.chart-header {
    display: flex;
    align-items: center;
    font-size: 1.7rem;
    justify-content: space-between;
    padding: 0px 5px;
    padding-top: 20px;
    padding-bottom: 10px;
}

    .chart-header h2 {
        font-size: inherit;
        margin: 0;
        color: var(--text-alt-color)
    }

    .chart-header .icon {
        font-size: 1.4rem;
        margin-top: -5px;
        cursor: pointer;
        color: var(--text-alt-color)
    }

.btn-outline-white {
    color: #fff;
    border-color: #fff
}

    .btn-outline-white:hover {
        color: #fff;
        background-color: #6c757d;
        border-color: #6c757d
    }

    .btn-outline-white.focus, .btn-outline-white:focus {
        box-shadow: 0 0 0 .2rem rgba(108,117,125,.5)
    }

    .btn-outline-white.disabled, .btn-outline-white:disabled {
        color: #6c757d;
        background-color: transparent
    }

    .btn-outline-white:not(:disabled):not(.disabled).active, .btn-outline-white:not(:disabled):not(.disabled):active, .show > .btn-outline-white.dropdown-toggle {
        color: #fff;
        background-color: #6c757d;
        border-color: #6c757d
    }

        .btn-outline-white:not(:disabled):not(.disabled).active:focus, .btn-outline-white:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-white.dropdown-toggle:focus {
            box-shadow: 0 0 0 .2rem rgba(108,117,125,.5)
        }

.btn-outline-green {
    color: #6c757d;
    border-color: #28a745
}

    .btn-outline-green:hover {
        color: #fff;
        background-color: #28a745;
        border-color: #28a745
    }

    .btn-outline-green.focus, .btn-outline-green:focus {
        box-shadow: 0 0 0 .2rem rgba(108,117,125,.5)
    }

    .btn-outline-green.disabled, .btn-outline-green:disabled {
        color: #6c757d;
        background-color: transparent
    }

    .btn-outline-green:not(:disabled):not(.disabled).active, .btn-outline-green:not(:disabled):not(.disabled):active, .show > .btn-outline-green.dropdown-toggle {
        color: #6c757d;
        background-color: transparent;
        border-color: #6c757d
    }

        .btn-outline-green:not(:disabled):not(.disabled).active:focus, .btn-outline-green:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-green.dropdown-toggle:focus {
            box-shadow: 0 0 0 .2rem rgba(108,117,125,.5)
        }

.btn-outline-green-active {
    color: #6c757d;;
    border-color: #28a745;
    background-color: #6c757d;
}

.btn-outline-secondary-active {
    color: #fff;
    border-color: #6c757d;
    background-color: #6c757d;
}

.btn-outline-green {
    color: #fff;
    border-color: #28a745;
    background-color: #28a745;
}

    .btn-outline-green:hover {
        color: #fff;
        background-color: #28a745;
        border-color: #28a745;
    }

    .btn-outline-green.focus, .btn-outline-green:focus {
        box-shadow: 0 0 0 .2rem rgba( 40, 167, 69,.5)
    }

    .btn-outline-green.disabled, .btn-outline-green:disabled {
        color: #28a745;
        background-color: transparent
    }

    .btn-outline-green:not(:disabled):not(.disabled).active, .btn-outline-green:not(:disabled):not(.disabled):active, .show > .btn-outline-green.dropdown-toggle {
        color: #fff;
        background-color: #28a745;
        border-color: #28a745
    }

        .btn-outline-green:not(:disabled):not(.disabled).active:focus, .btn-outline-green:not(:disabled):not(.disabled):active:focus, .show > .btn-outline-green.dropdown-toggle:focus {
            box-shadow: 0 0 0 .2rem rgba( 40, 167, 69,.5)
        }

.popup-fade {
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    z-index: 1000
}

.popup-parcelquote {
    z-index: 1001;
    position: fixed;
    top: 25%;
    left: 15%;
    width: 70%;
}

.table-container {
    width: 100%;
    overflow-x: auto; /* Adds horizontal scroll if necessary */
}

@media (min-width: 576px) {
    .popup-parcelquote {
        z-index: 1001;
        position: fixed;
        top: 25%;
        left: 15%;
        width: 70%;
    }
}

@media (min-width: 992px) {
    .popup-parcelquote {
        z-index: 1001;
        position: fixed;
        top: 25%;
        left: 25%;
        width: 50%;
    }
}

@media (min-width: 1100px) {
    .popup-parcelquote {
        z-index: 1001;
        position: fixed;
        top: 25%;
        left: 36%;
        width: 45%;
    }
}