/* A few useful properties */
:root {
    --primary: #262B40;
    --secondary: #424AA0;
    --secondary-2: #3f4698;
    --quaternary: #285abe;
    --primary-txt: #f3f7fa;

    --btn-create-primary: #FF9500;
    --btn-create-primary-2: #d37b00;
    --btn-create-secondary: #000000;
    --btn-create-active: #DB8700;

    --btn-actions-primary: #FFFFFF;
    --btn-actions-secondary: #3B559C;
    --btn-actions-active: #0069D9;

    /* integration colours */
    --xero-primary: #13b5eaff;
    --xero-secondary: #ffffff;
    --white-1: #ffffff;
    --white-2: #f7f7f7;
    --gray-1: #EAEAEA;
    --gray-2: #f3f7fa;
    --gray-3: #d1d7e0;
    --gray-4: #506690;
    --gray-5: #dcdbdb;
    --font-sans-serif: "Nunito Sans", sans-serif;
    --font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));

    --button-rounding: 3px;
}


/* =========================================================================== */
/*                        Base or generic CSS styling                          */
/* =========================================================================== */

/* Use box-sizing everywhere, makes it easier to set width/height of any elements */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: Nunito Sans, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    height: 100%;
}

input:placeholder-shown {
    font-style: italic;
}

[hidden] {
    display: none !important;
}

/* =========================================================================== */
/*                           Class based styling                               */
/* =========================================================================== */
/* Styling for classes that can be used throughout the site */

/* ========================================= */
/* ===== Show/Hide more button styling ===== */

.hideContent {
    overflow: hidden;
    line-height: 1rem;
    height: 2rem;
}

.showContent {
    line-height: 1rem;
    height: auto;
}

/* Disable an element- make it partially opaque and disable mouse events */
.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.overlay-disabled {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #AAAA;
    opacity: .75;
    z-index: 9999999;
}

/* Explicitly enable an element, reverting any inherited disabled class */

.enabled {
    opacity: 1;
    pointer-events: auto;
}

/* ================================== */
/*  ===== Pricing Table styling ===== */

#pricing-switch {
    margin: 80px auto 100px;
    text-align: center;
    line-height: 1.4;
    position: relative;
    max-width: 1080px;
}

.pricing {
    padding-right: 3rem;
}


.pricing-features {
    list-style-type: none;
}

.pricing-card .cta-btn {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    padding: 12px;
    border-radius: 4px;
    border: 1px solid var(--col);
    background-color: var(--col);
    color: #e4e4e7;

    font-size: 20px;
    font-weight: bold;
}

.pricing-plans {
    gap: 32px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    padding: 64px;
}

.pricing-card-active {
    background-color: #d4e4f2;
    border-radius: 4px;
    border: 2px solid var(--gray-4);
}

.pricing-card-active .cta-btn {
    background-color: #fff;
    color: #56569f;
    border: 1px solid #5066905e;
}

.pricing-card {
    --col: var(--gray-4);
    position: relative;
    min-height: 40rem;
    padding: 32px;
    padding-bottom: 96px;
    border-radius: 4px;
    border: 1px solid #262626;
    box-shadow: 0 0 32px transparent;
    text-align: center;
}

.pricing-card > *:not(:last-child) {
    margin-bottom: 32px;
}

.pricing-card .heading h4 {
    padding-bottom: 12px;
    color: var(--col);
    font-size: 24px;
    font-weight: normal;
}

.pricing-card .heading p {
    font-size: 14px;
    font-weight: lighter;
}

.pricing p {
    font-size: 14px;
    font-weight: lighter;
}

.pricing-card .price {
    position: relative;
    color: var(--col);
    font-size: 40px;
    font-weight: bold;
}

.pricing-card .price sub {
    position: absolute;
    bottom: 14px;
    font-size: 14px;
    font-weight: lighter;
}

.pricing-card .pricing-features li {
    padding-bottom: 16px;
    font-size: 16px;
    font-weight: lighter;
    text-align: left;
}

.pricing-card .pricing-features li i,
.pricing-card .pricing-features li strong {
    font-size: 16px;
    text-align: left;
}

.pricing-card .pricing-features li strong {
    padding-left: 24px;
}

.pricing-card .cta-btn:active {
    background-color: transparent;
    color: var(--col);
    transition: all 0.3s ease;
}


/* ================================ */
/* ===== Page Wrapper styling ===== */


.page-wrapper {
    height: 100%;
    background-color: #fafafa;
}

.page-wrapper .theme {
    width: 40px;
    height: 40px;
    display: inline-block;
    border-radius: 4px;
    margin: 2px;
}

.page-wrapper .theme.chiller-theme {
    background: #1e2229;
}


.page-wrapper .page-content {
    display: inline-block;
    width: 100%;
    padding-left: 0;
    padding-top: 1rem;
    background-color: #fafafa;
    overflow-x: hidden;

}

/* ====================== */
/* ===== Misc Class ===== */

/* Hide django-crispy-form's required (*) asterisk */
.asteriskField {
    display: none;
}


.modal {
    display: block;
}

.modal-body {
    margin: 1rem;
}

.modal-dialog {
    border-radius: 4px;
}

.login-form {
    width: 400px;
    height: auto;
    border-radius: 25px;
    border-style: solid;
    border-color: #374d76;
    background: rgba(255, 255, 255, 1.0);
    margin: auto;
    padding: 20px;

}

.login-button {
    width: 100%;
}

.loading-icon {
    display: none;
}

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    display: none;
    background: rgba(199, 199, 199, 0.3);
}

.htmx-request.loading-overlay {

    display: inline-block;
}

.htmx-request > .cv-spinner > .loading-icon {
    width: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.htmx-request > .cv-spinner {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.error {
    font-weight: bold;
    color: red;
}

/* =========================================================================== */
/*                            Entrance styling                                 */
/*                     (Login, register, password forgot etc)                  */
/* =========================================================================== */

#div_id_remember {
    text-align: start;
    font-size: 90%;
}

#div_id_password {
    margin-bottom: 0 !important;;
}


.entrance-page-wrapper {
    background: rgba(251, 251, 251);;
    padding-top: 5rem;
    height: 100%;
    width: 100%;
}

.entrance-page-wrapper .form-control {
    width: 100%;
}

.entrance-page-wrapper .alert-info {
    color: #606086;
    background-color: #e6e6ff;
    border-color: #c6c6ff;
    border-radius: 13px;
}

.entrance-logo {
    max-width: 40rem;
    max-height: 40rem;
    margin: auto;
    width: 30%;
}

.entrance-page-content {
    border-radius: 50px;
    border-style: solid;
    border-color: #374d76;
    background: rgba(245, 245, 253);
    margin: auto;
    text-align: center;
    padding: 2rem;
    padding-left: 3rem;
    padding-right: 3rem;
    max-width: 30rem;
}

/* =========================================================================== */
/*                               Misc IDs                                      */
/* =========================================================================== */


#progress-bar {
    margin-top: 1em;
}

#checkbox-column {
    text-align: center;
    vertical-align: middle;
}

/* =========================================================================== */
/*                              Misc element                                   */
/* =========================================================================== */
.ez-datatable {
    font-family: Arial, Verdana, sans-serif;
    width: 100%;
    display: block;
    color: #111111
}

.report th, .report td {
    padding: 7px 10px 10px 10px;
    font-size: 13px;
    line-height: 16px;
}

.report th {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 90%;
    border-bottom: 2px solid #111111;
    border-top: 1px solid #999;
    text-align: left;
}

.report tr.even {
    background-color: #efefef;
}


.report tr:hover {
    background-color: #e3e1e0;
}

.report tfoot td {
    border-top: 2px solid #111111;
    border-bottom: 1px solid #999;
}

/*
!* =============================================== *!
!* ===== Adjustment Definition modal styling ===== *!

.modal-header {
    background-color: var(--quaternary);
    color: var(--primary-txt);
}

.checkbox-hidden {
    display: none;
}

.cell-select-wrapper {
    border: grey solid 1px;
    border-radius: 5px;
    text-align: center;
}

.cell-select-wrapper h5 {
    margin: 1rem;
    text-align: center;
}

.cell-defs-draggable > li {
    cursor: grab;
}

.list-group-item.disabled, .list-group-item:disabled {
    background-color: #f1f1f1;
}

.cell-defs-draggable > li > label {
    text-align: center;
    cursor: grab;
}

.cell-defs-draggable {
    height: 15rem;
}

.field-wrapper {
    margin-bottom: 1rem;
}

.field-wrapper input, .field-wrapper textarea {
    width: 100%;

}

.field-wrapper input, .field-wrapper textarea, #cell-def-filter {
    background-color: #fafefe;;
    border-radius: var(--button-rounding);
    border: 1px solid grey;
}

.field-wrapper input:focus, .field-wrapper textarea:focus, #cell-def-filter:focus {
    outline: none;
    box-shadow: 0 0 0 1px grey;
}

.field-wrapper input::placeholder, .field-wrapper textarea::placeholder, #cell-def-filter::placeholder {
    color: grey;
}

.field-wrapper input:focus::placeholder, .field-wrapper textarea:focus::placeholder, #cell-def-filter:focus::placeholder {
    font-weight: normal;
    color: var(--gray-4);
    opacity: 1;
    text-shadow: none;
}

.modal-content {
    background-color: #fafafa;
}

#cell-def-filter {
    margin-bottom: 0.5rem;
}*/

/* =========================================================================== */
/*                         Datatable styling                                   */
/* =========================================================================== */

label {
    /* Remove Datatable's margin-bottom */
    margin-bottom: 0;
}

.dataTable-maintable {
    width: 100%;
    display: block;
}

.dataTables_wrapper {
    margin-left: 1rem;
    margin-right: 0.8rem;
}

#adjustments_datatable {
    border-collapse: separate !important;
}

#adjustment_entries_datatable {
    border-collapse: separate !important;
}

.datatable-toolbar {
    margin-top: 10rem;
}


/* ========================== */
/* ===== Alerts styling ===== */

.alert {
    margin-top: 0;
}

/* ============================= */
/* ===== Searchbar styling ===== */

.dtSearch {
    border: 1px solid var(--gray-4);
    border-radius: .25rem;
    display: inline-flex;
    align-items: center;
    width: 30vw;
}

.dtSearch:focus-within {
    box-shadow: 0 0 0 1px var(--gray-4);
    font-weight: normal;
    color: var(--gray-4);
}

.dtSearch input {
    border: 0;
    width: 100%;
}

.dtSearch input:focus {
    outline: none;
    border: none;
    box-shadow: none;
}

.dtSearch input::placeholder {
    color: var(--gray-4);
}

.dtSearch input:focus::placeholder {
    font-weight: normal;
    color: var(--gray-4);
    opacity: 1;
    text-shadow: none;
}

/* =============================== */
/* ===== Cell Header styling ===== */


/* ======================== */
/* ===== Cell styling ===== */
table.dataTable, table.dataTable td.dt-center, table.dataTable td.dataTables_empty {
    border: 1px solid var(--gray-2);
}


table.dataTable > tbody > tr.selected > * {
    background-color: #0275D8E5;
    border-color: #0268c2;
}

/* Override the rows being selectable for our Periods datatable */
#periods_datatable > tbody > tr.selected > * {
    background-color: red;
    border-color: inherit;
}


/* ===================================== */
/* ===== Column filter row styling ===== */

.datatable-column-filter-row > th {
    border: 0;
    margin: 0;
    padding: 0;
    width: 0;
}

.datatable-column-filter-row {
    border: 0;
}

.datatable-column-filter-row > th > input {
    margin: 1rem 0.5rem;
    padding: 0;
}

.datatable-column-filter-row > th > select {
    margin: 1rem 0.5rem;
    padding: 0;
    width: 80%
}

.datatable-column-filter-row > th > input:focus-visible {
    margin: 1rem 0.5rem;
    box-shadow: none;
    border: 1px solid var(--btn-create-active);
    padding: 0;
}

/* ====================================== */
/* ===== Datatable Checkbox styling ===== */


/* Make the checkbox half the size of the normal font, so it centers correctly */
table.dataTable > tbody > tr.selected > td.select-checkbox::before {
    font-size: 0.5rem;
}

table.dataTable > tbody > tr.selected > td.select-checkbox::after {
    font-size: 1rem;
}


/* ================================== */
/* ===== Datatable Button styling ===== */


/* Add caret  rotate animation */
.dropdown-toggle[aria-expanded="true"]:after {
    transform: rotate(180deg);
}

/*for smooth animation */
.dropdown-toggle:after {
    transition: 0.4s;
}

.dt-btns-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    column-gap: 2vw;
    width: 100%;
    padding-right: 5rem;
}

#btn-clear-filters {
    margin-right: auto;
}

#btn-clear-filters > svg {
    width: 1.2rem;
}

.dropdown-menu {
    border-radius: 0;
    box-shadow: none;
    padding-top: 0;
    margin-top: 0;
    padding-bottom: 0;
}

.dropdown-item {
    border-bottom: 1px solid var(--gray-1);
    background-color: var(--white-2);
}

/* ========================== */
/* ===== Misc Datatable ===== */

/* There is a visible, stray element that is used to allow sticky header/column scrolling */
/* We get around this by just colouring it the same as our navbar*/
.dtfc-right-top-blocker {
    display: none !important;
}

/* Some overriding of datatables css to get things looking right */
div.dataTables_wrapper div.dataTables_filter {
    text-align: left;
}

div.dataTables_wrapper div.dataTables_filter input {
    width: 100%
}

.invalid-feedback {
    display: block;
}

/* =========================================================================== */
/*                              Bootstrap styling                                */
/* =========================================================================== */


/* =========================== */
/* ===== Onboarding page ===== */

.wrapper-centered {
    height: 100%;
    width: 100%;
    background-color: var(--primary);
}

.content-centered {
    margin: 30vh 30vw;
    padding: 4vw 6vh;
    background-color: var(--white);
    border-radius: 15px;
}

.tab-list {
    padding-bottom: 5vh;
    vertical-align: top;
}

#step-progress {
    background-color: var(--btn-create-primary);
}

.progress {
    height: 2px;
    position: relative;
    top: 15px;
}

.progress-bar-striped-incomplete {
    background-color: rgb(128, 128, 128);

}

.tab-list > .fa-stack > .fa-circle {
    color: var(--gray-3);
    background-color: white;

}

.tab-list > .fa-stack > .active {
    color: var(--teal);
}

.tab-list > .fa-stack > .complete {
    color: var(--btn-create-primary);
}

.tab-list > .fa-stack {
    vertical-align: top;
}

.tab {
    padding-bottom: 1rem;
}

/* Hide all steps by default: */
.step {
    display: none;
}

/* ======================================== */
/* ===== Navbar User dropdown styling ===== */
.btn-user-dropdown {
    color: var(--primary-txt);
    background-color: var(--primary);
}

.btn-user-dropdown:hover {
    color: var(--btn-create-primary);
}

/* ============================================ */
/* ===== Adjustment Create Button styling ===== */

.btn-create {
    color: var(--btn-create-secondary);
    background-color: var(--btn-create-primary);
    border-color: var(--btn-create-primary);
}

.btn-create:hover,
.btn-create:focus,
.btn-create:active,
.btn-create.active,
.open .dropdown-toggle.btn-create {
    color: var(--btn-create-secondary);
    background-color: var(--btn-create-active);
    border-color: var(--btn-create-active);
}

.btn-create:active,
.btn-create.active,
.open .dropdown-toggle.btn-create {
}

.btn-create.disabled,
.btn-create[disabled],
fieldset[disabled] .btn-create,
.btn-create.disabled:hover,
.btn-create[disabled]:hover,
fieldset[disabled] .btn-create:hover,
.btn-create.disabled:focus,
.btn-create[disabled]:focus,
fieldset[disabled] .btn-create:focus,
.btn-create.disabled:active,
.btn-create[disabled]:active,
fieldset[disabled] .btn-create:active,
.btn-create.disabled.active,
.btn-create[disabled].active,
fieldset[disabled] .btn-create.active {
    background-color: var(--btn-create-primary);
    border-color: var(--btn-create-primary);
}

.btn-create .badge {
    color: var(--btn-create-primary);
    background-color: var(--btn-create-secondary);
}

/* ============================================= */
/* ========= Integrations List Styling ========= */

.btn-connect {
    color: white;
    background-color: #506690;
    border-color: var(--btn-actions-secondary);
}

.btn-connect:hover {
    background-color: #52617EFF;
    color: white;
}

.btn-connect:active {
    box-shadow: none;
}

.btn-disconnect {
    color: #808080FF;
    border-color: #808080FF;
}

.btn-disconnect:hover {
    color: black;
    border-color: black;
}

.btn-disconnect:active {
    box-shadow: none;
}

/* =============================================== */
/* ========= Integrations Button Styling ========= */
.xero-btn {
    background-color: var(--xero-primary);
    color: var(--xero-secondary);
}

/* ============================================= */

/* ===== Adjustment Actions Button styling ===== */

.btn-actions {
    color: var(--btn-actions-secondary);
    background-color: var(--btn-actions-primary);
    border-color: var(--btn-actions-secondary);
}

.btn-actions:hover,
.btn-actions:focus,
.btn-actions:active,
.btn-actions.active,
.open .dropdown-toggle.btn-actions {
    color: var(--btn-actions-primary);
    background-color: var(--btn-actions-secondary);
    border-color: var(--btn-actions-active);
}

.btn-actions:active,
.btn-actions.active,
.open .dropdown-toggle.btn-actions {
}

.btn-actions.disabled,
.btn-actions[disabled],
fieldset[disabled] .btn-actions,
.btn-actions.disabled:hover,
.btn-actions[disabled]:hover,
fieldset[disabled] .btn-actions:hover,
.btn-actions.disabled:focus,
.btn-actions[disabled]:focus,
fieldset[disabled] .btn-actions:focus,
.btn-actions.disabled:active,
.btn-actions[disabled]:active,
fieldset[disabled] .btn-actions:active,
.btn-actions.disabled.active,
.btn-actions[disabled].active,
fieldset[disabled] .btn-actions.active {
    background-color: var(--btn-actions-primary);
    border-color: var(--btn-actions-primary);
}

.btn-actions .badge {
    color: var(--btn-actions-primary);
    background-color: var(--btn-actions-secondary);
}

/* =========================================================================== */
/*                            Font Awesome styling                               */
/* =========================================================================== */


.fa-magnifying-glass {
    padding-left: 0.5rem;
}

.fa-user {
    color: var(--primary-txt);
}

.fa-flag {
    color: var(--primary);
}

.fa-gear {
    cursor: pointer;
}

/* ================================= */
/* ========= Period Buttons ======== */
#period-buttons-wrapper {
    margin-top: 2rem;
}

#period-buttons-wrapper > * {
    margin-left: 0.2rem;
}

/* ================================= */
/* ===== Settings page styling ===== */

.settings-wrapper {
    background: var(--gray-2);
    align-items: stretch;
    height: 100%;
}

#settings-pills-tab .settings-nav-link {
    border-bottom: darkblue solid 1px;
    padding: 1rem 0.2rem;
}

#settings-pills-tab .settings-nav-link:first-child {
    border-bottom: darkblue solid 1px;
    border-top: darkblue solid 1px;
}

.settings-tab-nav {
    background-color: var(--secondary);
    border-right: 1px solid darkblue;
    padding-right: 5px;
    padding-left: 5px;
}

.settings-return {
    font-size: 1.5rem;
    padding-bottom: 1rem;
    padding-top: 0.2rem;
}

.settings-return > a {
    color: var(--primary-txt);
}

.settings-return > a:active {
    text-decoration: none;
    font-size: 1.5rem;
    color: var(--gray-1);
}

.settings-return > a:hover {
    text-decoration: none;
    font-size: 1.5rem;
    color: var(--gray-5);
}


@keyframes swing {
    0% {
        transform: rotate(0deg);
    }
    10% {
        transform: rotate(10deg);
    }
    30% {
        transform: rotate(0deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    50% {
        transform: rotate(0deg);
    }
    60% {
        transform: rotate(5deg);
    }
    70% {
        transform: rotate(0deg);
    }
    80% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes sonar {
    0% {
        transform: scale(0.9);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

body {
    /*! font-size: -7.1rem; */
}

.page-wrapper .sidebar-wrapper,
.sidebar-wrapper .sidebar-brand > a,
.sidebar-wrapper .sidebar-dropdown > a:after,
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a:before,
.sidebar-wrapper ul li a i,
.page-wrapper .page-content,
.sidebar-wrapper .sidebar-search input.search-menu,
.sidebar-wrapper .sidebar-search .input-group-text,
.sidebar-wrapper .sidebar-menu ul li a,
#show-sidebar,
#close-sidebar {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/*----------------toggeled sidebar----------------*/

.page-wrapper.toggled .sidebar-wrapper {
    left: 0;
}

@media screen and (min-width: 768px) {
    .page-wrapper.toggled .page-content {
        padding-left: 20vw;
    }
}

/*----------------show sidebar button----------------*/

#show-sidebar {
    position: fixed;
    left: 0;
    top: 10px;
    border-radius: 0 4px 4px 0;
    width: 35px;
    transition-delay: 0.3s;
}

.page-wrapper.toggled #show-sidebar {
    left: -40px;
}

/*----------------sidebar-wrapper----------------*/

.sidebar-wrapper {
    width: 260px;
    height: 100%;
    max-height: 100%;
    position: fixed;
    top: 0;
    left: -300px;
    z-index: 999;
}

.sidebar-wrapper ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.sidebar-wrapper a {
    text-decoration: none;
}

/*----------------sidebar-content----------------*/

.sidebar-content {
    max-height: calc(100% - 30px);
    height: calc(100% - 30px);
    overflow-y: auto;
    position: relative;
}

.sidebar-content.desktop {
    overflow-y: hidden;
}

/*--------------------sidebar-brand----------------------*/

.sidebar-wrapper .sidebar-brand {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    background-color: #181b34;
}

.sidebar-wrapper .sidebar-brand > a {
    font-weight: bolder;
    flex-grow: 1;
}

.sidebar-wrapper .sidebar-brand #close-sidebar {
    cursor: pointer;
    font-size: 20px;
}

/*--------------------sidebar-header----------------------*/

.sidebar-wrapper .sidebar-header {
    padding: 20px;
    overflow: hidden;
}

.sidebar-wrapper .sidebar-header .user-pic {
    float: left;
    width: 60px;
    padding: 2px;
    border-radius: 12px;
    margin-right: 15px;
    overflow: hidden;
}

.sidebar-wrapper .sidebar-header .user-pic img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.sidebar-wrapper .sidebar-header .user-info {
    float: left;
}

.sidebar-wrapper .sidebar-header .user-info > span {
    display: block;
}

.sidebar-wrapper .sidebar-header .user-info .user-role {
    font-size: 12px;
}

.sidebar-wrapper .sidebar-header .user-info .user-status {
    font-size: 11px;
    margin-top: 4px;
}

.sidebar-wrapper .sidebar-header .user-info .user-status i {
    font-size: 8px;
    margin-right: 4px;
    color: #5cb85c;
}

/*----------------------sidebar-menu-------------------------*/

.sidebar-wrapper .sidebar-menu {
    padding-bottom: 10px;
}

.sidebar-wrapper .sidebar-menu .header-menu span {
    font-weight: bold;
    font-size: 14px;
    padding: 15px 20px 5px 20px;
    display: inline-block;
}

.sidebar-wrapper .sidebar-menu ul li a {
    display: inline-block;
    width: 100%;
    text-decoration: none;
    position: relative;
    padding: 8px 30px 8px 20px;
}

.sidebar-wrapper .sidebar-menu ul li a i {
    margin-right: 10px;
    font-size: 12px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 4px;
}

.sidebar-wrapper .sidebar-menu ul li a:hover > i::before {
    display: inline-block;
    animation: swing ease-in-out 0.5s 1 alternate;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown > a:after {
    font-family: "Font Awesome 5 Free", serif;
    font-weight: 900;
    content: "\f105";
    font-style: normal;
    display: inline-block;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    background: 0 0;
    position: absolute;
    right: 15px;
    top: 14px;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ul {
    padding: 5px 0;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li {
    padding-left: 25px;
    font-size: 13px;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a:before {
    content: "\f111";
    font-family: "Font Awesome 5 Free", serif;
    font-weight: 400;
    font-style: normal;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 10px;
    font-size: 8px;
}

.sidebar-wrapper .sidebar-menu ul li a span.label,
.sidebar-wrapper .sidebar-menu ul li a span.badge {
    float: right;
    margin-top: 8px;
    margin-left: 5px;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .badge,
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .label {
    float: right;
    margin-top: 0;
}

.sidebar-wrapper .sidebar-menu .sidebar-submenu {
    display: none;
}

.sidebar-wrapper .sidebar-menu .sidebar-dropdown.active > a:after {
    transform: rotate(90deg);
    right: 17px;
}

/*--------------------------side-footer------------------------------*/

.sidebar-footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    display: flex;
}

.sidebar-footer > a {
    flex-grow: 1;
    text-align: center;
    height: 30px;
    line-height: 30px;
    position: relative;
}

.sidebar-footer > a .notification {
    position: absolute;
    top: 0;
}

.badge-sonar {
    display: inline-block;
    background: #980303;
    border-radius: 50%;
    height: 8px;
    width: 8px;
    position: absolute;
    top: 0;
}

.badge-sonar:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border: 2px solid #980303;
    opacity: 0;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    animation: sonar 1.5s infinite;
}

/*------scroll bar---------------------*/

::-webkit-scrollbar {
    width: 5px;
    height: 7px;
}

::-webkit-scrollbar-button {
    width: 0;
    height: 0;
}

::-webkit-scrollbar-thumb {
    background: #525965;
    border: 0 none #ffffff;
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    background: #525965;
}

::-webkit-scrollbar-thumb:active {
    background: #525965;
}

::-webkit-scrollbar-track {
    background: transparent;
    border: 0 none #ffffff;
    border-radius: 50px;
}

::-webkit-scrollbar-track:hover {
    background: transparent;
}

::-webkit-scrollbar-track:active {
    background: transparent;
}

::-webkit-scrollbar-corner {
    background: transparent;
}


/*-----------------------------chiller-theme-------------------------------------------------*/

.chiller-theme .sidebar-wrapper {
    background: #212448;
}

.chiller-theme .sidebar-wrapper .sidebar-header,
.chiller-theme .sidebar-wrapper .sidebar-search,
.chiller-theme .sidebar-wrapper .sidebar-menu {
    border-top: 1px solid #111225;
}

.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu,
.chiller-theme .sidebar-wrapper .sidebar-search .input-group-text {
    border-color: transparent;
    box-shadow: none;
}

.chiller-theme .sidebar-wrapper .sidebar-header .user-info .user-role,
.chiller-theme .sidebar-wrapper .sidebar-header .user-info .user-status,
.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu,
.chiller-theme .sidebar-wrapper .sidebar-search .input-group-text,
.chiller-theme .sidebar-wrapper .sidebar-brand > a,
.chiller-theme .sidebar-wrapper .sidebar-menu ul li a,
.chiller-theme .sidebar-footer > a {
    color: #dae1e3;
}

.chiller-theme .sidebar-wrapper .sidebar-menu ul li:hover > a,
.chiller-theme .sidebar-wrapper .sidebar-menu ul li > a.active,
.chiller-theme .sidebar-wrapper .sidebar-header .user-info,
.chiller-theme .sidebar-wrapper .sidebar-brand > a:hover,
.chiller-theme .sidebar-footer > a:hover i {
    color: #16c7ff;
}

.chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active > a {

    color: #16c7ff;
}

.page-wrapper.chiller-theme.toggled #close-sidebar {
    color: #bdbdbd;
}

.page-wrapper.chiller-theme.toggled #close-sidebar:hover {
    color: #ffffff;
}

.chiller-theme .sidebar-wrapper ul li:hover a i,
.chiller-theme .sidebar-wrapper .sidebar-dropdown .sidebar-submenu li a:hover:before,
.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu:focus + span,
.chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active a i {
    color: #16c7ff;
    text-shadow: 0 0 10px rgba(22, 199, 255, 0.5);
}

.chiller-theme .sidebar-wrapper .sidebar-menu ul li a i,
.chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown div,
.chiller-theme .sidebar-wrapper .sidebar-search .input-group-text {
    background: #0e101f;
}

.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu {
    background-color: #d7d7d7;
    border-color: #0e101f;
}

.chiller-theme .sidebar-wrapper .sidebar-menu .header-menu {
    color: #798a98;
}

.chiller-theme .sidebar-footer {
    background: #0e101f;
    box-shadow: 0 -1px 5px #282c33;
    border-top: 1px solid #0e101f;
}

.chiller-theme .sidebar-footer > a:first-child {
    border-left: none;
}

.chiller-theme .sidebar-footer > a:last-child {
    border-right: none;
}

.chiller-theme-logout {
    padding: 8px 30px 8px 20px;
    background-color: #212448;
}
.chiller-theme-btn-logout {
    border: none;
    background-color: #212448;
}
/* ======================== */
/* ===== Select styling ===== */

.business-select {
    border: 1px solid #777;
    border-radius: 5px;
    padding: 0 0 0 0;
    margin: 0;
    width: 100%;
    background-color: #eaeaea;
    color: #212448;
    outline: none;
    text-align: center;
    text-align-last: center;
    -moz-text-align-last: center;
}

.easy {
    color: #d37b00;
}

/* =========================================================================== */
/*                             Xero Sign In styling                            */
/* =========================================================================== */
/* Sourced from https://developer.xero.com/documentation/xero-app-store/app-partner-guides/sign-in/ */

.xero-sso {
    box-sizing: border-box;
    -webkit-animation: none 0s ease 0s 1 normal none running;
    animation: none 0s ease 0s 1 normal none running;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    background: transparent none repeat 0 0/auto auto padding-box border-box scroll;
    border: none;
    border-collapse: separate;
    -o-border-image: none;
    border-image: none;
    border-radius: 0;
    border-spacing: 0;
    bottom: auto;
    box-shadow: none;
    box-sizing: content-box;
    caption-side: top;
    clear: none;
    clip: auto;
    color: #000;
    -moz-columns: auto;
    -moz-column-count: auto;
    -moz-column-fill: balance;
    column-fill: balance;
    grid-column-gap: normal;
    -moz-column-gap: normal;
    column-gap: normal;
    -moz-column-rule: medium none currentColor;
    column-rule: medium none currentColor;
    -moz-column-span: 1;
    column-span: 1;
    -moz-column-width: auto;
    columns: auto;
    content: normal;
    counter-increment: none;
    counter-reset: none;
    cursor: auto;
    direction: ltr;
    display: inline;
    empty-cells: show;
    float: none;
    font-family: serif;
    font-size: medium;
    font-style: normal;
    -webkit-font-feature-settings: normal;
    font-feature-settings: normal;
    font-variant: normal;
    font-weight: 400;
    font-stretch: normal;
    line-height: normal;
    height: auto;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    left: auto;
    letter-spacing: normal;
    list-style: disc outside none;
    margin: 0;
    max-height: none;
    max-width: none;
    min-height: 0;
    min-width: 0;
    opacity: 1;
    orphans: 2;
    outline: medium none invert;
    overflow: visible;
    overflow-x: visible;
    overflow-y: visible;
    page-break-after: auto;
    page-break-before: auto;
    page-break-inside: auto;
    perspective: none;
    perspective-origin: 50% 50%;
    position: static;
    right: auto;
    -moz-tab-size: 8;
    -o-tab-size: 8;
    tab-size: 8;
    table-layout: auto;
    text-align: left;
    -moz-text-align-last: auto;
    text-align-last: auto;
    text-decoration: none;
    text-indent: 0;
    text-shadow: none;
    text-transform: none;
    top: auto;
    transform: none;
    transform-origin: 50% 50% 0;
    transform-style: flat;
    transition: none 0s ease 0s;
    unicode-bidi: normal;
    vertical-align: baseline;
    visibility: visible;
    white-space: normal;
    widows: 2;
    width: auto;
    word-spacing: normal;
    z-index: auto;
    all: initial;
    font-family: inherit;
    display: inline-block;
    padding: 0
}

.xero-sso-font-family {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif
}

.xero-sso>* {
    box-sizing: border-box
}

.xero-sso-logo {
    border-radius: 50%;
    width: 2em;
    margin: .25em 9px .25em .25em;
    vertical-align: middle
}

.xero-sso-link {
    line-height: 1.4;
    padding: 0 16px;
    border: 1px solid transparent;
    text-align: center;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    -webkit-font-smoothing: antialiased
}

.xero-sso-link:focus {
    text-decoration: none;
    outline: none
}

.xero-sso-label {
    vertical-align: middle;
    display: inline-block;
    text-align: left
}

.xero-sso-error {
    padding: .5em;
    background: #f2f3f4;
    border: 1px solid red;
    border-radius: 3px;
    font-size: .8125em
}

.xero-sso-inline {
    display: inline-block
}

.xero-sso-block {
    display: block
}

.xero-sso-block>.xero-sso-link {
    width: 100%
}

.xero-sso-small>.xero-sso-link {
    font-size: 12px;
    border-radius: 2px
}

.xero-sso-large>.xero-sso-link {
    font-size: 15px;
    border-radius: 4px;
    min-height: 40px
}

.xero-sso-normal>.xero-sso-link {
    font-size: 13px;
    border-radius: 3px
}

.xero-sso-dark>.xero-sso-link {
    background-color: #003c64;
    border-color: #003c64;
    color: #fff
}

.xero-sso-dark>.xero-sso-link:hover {
    background-color: #002a46
}

.xero-sso-dark>.xero-sso-link:focus {
    box-shadow: 0 0 0 3px rgba(8, 48, 130, .4) !important
}

.xero-sso-mono>.xero-sso-link {
    background-color: #003c64;
    border-color: #003c64;
    color: #fff
}

.xero-sso-mono>.xero-sso-link:hover {
    background-color: #002a46
}

.xero-sso-mono>.xero-sso-link:focus {
    box-shadow: 0 0 0 3px rgba(8, 48, 130, .4) !important
}

.xero-sso-light>.xero-sso-link {
    background: #fff;
    border-color: #ccced2;
    color: #404756;
    box-shadow: 0 1px 2px #e6e7e9
}

.xero-sso-light>.xero-sso-link:hover {
    background-color: #f2f3f4
}

.xero-sso-light>.xero-sso-link:focus {
    box-shadow: 0 0 0 3px rgba(0, 10, 30, .2) !important
}

.xero-sso-transparent>.xero-sso-link {
    background-color: transparent
}

.xero-sso-light.xero-sso-transparent>.xero-sso-link:hover {
    background-color: rgba(0, 0, 0, .03)
}

.xero-sso-dark.xero-sso-transparent>.xero-sso-link:hover,
.xero-sso-mono.xero-sso-transparent>.xero-sso-link:hover {
    background-color: rgba(0, 0, 0, .3)
}