@import url("https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.11.3/font/bootstrap-icons.min.css");

/*
 * Global config
 */
html,
body {
    font-size: .9rem
}

/* Main content */
.main {
    padding-top: 20px
}

.modal-xlg {
    max-width: 1024px
}

/* CARDS */
.card-header {
    font-size: 1.2rem
}

.card .card .card-header {
    border-color: rgba(0, 0, 0, .070) !important;
    font-size: 1.05rem
}

.card .card .card-footer {
    border-color: rgba(0, 0, 0, .070) !important
}

/* TABLE */
table.card-body tbody tr:last-child, table.card-body tbody tr:last-child td {
    border-bottom: none !important;
}

th {
    font-weight: 600 !important
}

.table .date {
    white-space: nowrap
}


/* BUTTONS */
.btn-xs {
    padding: .1rem .3rem;
    font-size: .7rem
}

/* The switch - the box around the slider for checkboxes */
.switch {
    position: relative;
    display: inline-block;
    width: 3.2rem;
    height: 1.6rem;
    margin: 0
}

.switch input {
    display: none
}

.switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .1s;
    border-radius: 2rem;
    transition: .1s
}

.switch-slider:before {
    position: absolute;
    content: "";
    height: 1.2rem;
    width: 1.2rem;
    left: .3rem;
    bottom: .2rem;
    background-color: #fff;
    -webkit-transition: .1s;
    border-radius: 50%;
    transition: .1s
}

input:checked+.switch-slider {
    background-color: #2196F3
}

input:focus+.switch-slider {
    box-shadow: 0 0 1px #2196F3
}

input:checked+.switch-slider:before {
    -webkit-transform: translateX(1.5rem);
    -ms-transform: translateX(1.5rem);
    transform: translateX(1.5rem)
}

.navbar-brand img {
    height: 1.6rem
}

/* Navbar split button groups (Orders, Accounts) */
#app-navbar .nav-orders-group,
#app-navbar .nav-accounts-group {
    display: inline-flex;
    align-items: stretch;
}

#app-navbar .nav-orders-group .nav-link,
#app-navbar .nav-accounts-group .nav-link {
    display: inline-flex;
    align-items: center;
}

#app-navbar .nav-orders-group .dropdown-toggle-split,
#app-navbar .nav-accounts-group .dropdown-toggle-split {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

/* ICONS */
.bi-check-lg,
.bi-check {
    color: #70ca63
}

.col-form-label {
    text-align: right;
    font-weight: 600;
}

/* OTHER */
.circle {
    width: 1.7rem;
    height: 1.7rem;
    padding: .5rem .1rem;
    border-radius: 50%;
    display: inline-block;
    border: solid .5px #727b84
}

.text-bg-yellow {
    background: #FFFF00;
    color: #000;
}

.text-yellow {
    color: #FFFF00 !important;
}

.ui-autocomplete-input {
    font-size: 14px;
    width: 300px;
    border: 1px solid #DDD !important;
    position: relative;
}

.ui-front {
    z-index: 9999 !important;
}

.ui-autocomplete {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999 !important;
    float: left;
    display: none;
    min-width: 160px;
    width: 160px;
    padding: 4px 0;
    margin: 2px 0 0 0;
    list-style: none;
    background-color: #ffffff;
    border-color: #ccc;
    border-color: rgba(0, 0, 0, 0.2);
    border-style: solid;
    border-width: 1px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

.mfp-content {
    width: 50% !important;
    min-width: 600px !important;
}