/* 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;

    /* period sync status pill colours- a tint, and a darker ink and border drawn from the same hue */
    --sync-not-posted: #e9ecef;
    --sync-not-posted-ink: #495057;
    --sync-not-posted-edge: #ced4da;

    --sync-synced: #d7f2e3;
    --sync-synced-ink: #14703c;
    --sync-synced-edge: #a8e0c2;

    --sync-syncing: #d6eefc;
    --sync-syncing-ink: #0b5f86;
    --sync-syncing-edge: #a6d8f4;

    --sync-changes-pending: #ffeecc;
    --sync-changes-pending-ink: #8a5300;
    --sync-changes-pending-edge: #ffd699;
    --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;
}

/* ============================== */
/* ===== Dashboard styling ====== */
.dashboard-welcome {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.dashboard-subtitle {
    padding-bottom: 1rem;
    font-size: 1.3rem;
}

.dashboard-card {
    border: none;
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.dashboard-header {
    padding-top: 1.5rem;
    background-color: #fff;
    border-bottom: 0;
    text-align: center;
}

.dashboard-card-subheader {
    color: #777;
}

.dashboard-header:first-child {

    border-radius: 20px;
}

.dashboard-card-header {
    font-size: 1.5rem;
    border-bottom: 1px solid #999;
    margin-left: 3rem;
    margin-right: 3rem;
}

.dashboard-steps {
    padding-bottom: 0.3rem;
}

.dashboard-getting-started-steps {
    padding-bottom: 1rem;
}

.dashboard-getting-started-steps > i {
    padding-right: 0.5rem;
}

.dashboard-content-row {
    padding-bottom: 1rem;
}

.quick-links-content {
    text-align: center;
}

.quick-links-content > a {
    text-align: center;
    color: black;
}

.quick-links-content-icons {
    text-align: center;
    color: #285abe;
}

.quick-links-col {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 1rem;

}

.latest-news-wrapper {
    max-height: 15rem;
    overflow-y: auto;
    padding-right: 1rem;
    padding-top: 2rem;
}

.latest-news-card-header {
    padding-bottom: 0;
}

.latest-news-content {
    text-align: center;
    padding-bottom: 3rem;
}

.latest-news-items-wrapper {
}

.latest-news-item {
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.latest-news-item-title {
    color: #007bff;
    font-weight: 600;
}

.latest-news-item-text {
    color: #777
}

.latest-news-published-date {
    color: #999;
}

/* ================================ */
/* ===== 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;
}

.return-link-wrapper {
    margin-bottom: 1.5rem;

}

.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;
}

/* Business syncing spinner & icon */

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

.sync-spinner {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sync-icon {
    width: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
}


.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5); /* semi-transparent black */
    z-index: 10; /* above modals */
    display: flex;
    align-items: center;
    justify-content: center;
}

.overlay-content {
    text-align: 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
}

/* Horizontally scrollable wrapper for the batch import result table, which can
   have more columns than fit the page. */
.report-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.report-scroll > .report {
    /* Keep the columns readable inside the wrapper rather than letting them
       squash; anything wider than the wrapper scrolls. */
    min-width: 100%;
    width: max-content;
}

.report-scroll > .report td {
    /* Stop long narratives/error messages forcing the table extra wide. */
    max-width: 220px;
}

.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;
}

.report-list-row {
    padding-top: 1rem;
}

/*
!* =============================================== *!
!* ===== 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, #adjustment_entries_datatable, #draft_adjustment_datatable {
    border-collapse: separate !important;
}

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

#draft_adjustments_datatable_wrapper, #adjustments_datatable_wrapper {
    font-size: 0.7rem;
}

#draft_adjustments_datatable > tbody > tr > td, #adjustments_datatable > tbody > tr > td {
    padding: 0.2rem;
    border-color: #dee2e6;
}

.draft-edit-field {
    font-size: 0.7rem;

}

.row-error {
    background-color: #FFCDD2 !important;
}

/* ========================== */
/* ===== 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;
}

/* ================================= */
/* ===== Xero period sync status === */
.integration-sync-status {
    margin-left: 0.5rem;
}

/* The refresh button only reads from Xero, so it sits quietly beside the button that actually posts */
.btn-refresh-xero {
    color: var(--gray-4);
    padding: 0.375rem 0.5rem;
}

/* htmx marks the form while the check is running, which is what spins the icon */
.integration-refresh.htmx-request .fa-arrows-rotate {
    animation: refresh-spin 1s linear infinite;
}

@keyframes refresh-spin {
    to {
        transform: rotate(360deg);
    }
}

.integration-last-synced {
    margin-left: 0.4rem;
}

/* A pill saying where a period stands with Xero, shown on both the period page and the periods table. It stands on
   its own rather than on bootstrap's badge, so it looks the same wherever it's dropped in */
.sync-pill {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border: 1px solid transparent;
    border-radius: 10rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
}

/* Neutral until the period has been sent to Xero at all */
.sync-pill-not_posted {
    background-color: var(--sync-not-posted);
    color: var(--sync-not-posted-ink);
    border-color: var(--sync-not-posted-edge);
}

/* Green once Xero holds everything the period currently has */
.sync-pill-synced {
    background-color: var(--sync-synced);
    color: var(--sync-synced-ink);
    border-color: var(--sync-synced-edge);
}

/* Blue while the post is on its way to Xero */
.sync-pill-syncing {
    background-color: var(--sync-syncing);
    color: var(--sync-syncing-ink);
    border-color: var(--sync-syncing-edge);
}

/* Amber while the period holds changes Xero hasn't been told about */
.sync-pill-changes_pending {
    background-color: var(--sync-changes-pending);
    color: var(--sync-changes-pending-ink);
    border-color: var(--sync-changes-pending-edge);
}

/* The in-flight pill only stands in for the stored status while htmx is posting the period. It's hidden inline in
   the template too, so !important is what lets this rule bring it back while the post is running */
.integration-sync-status .sync-pill-in-flight {
    display: none;
}

.integration-sync-status.htmx-request .sync-pill-in-flight {
    display: inline-block !important;
}

.integration-sync-status.htmx-request .sync-pill:not(.sync-pill-in-flight),
.integration-sync-status.htmx-request .integration-last-synced {
    display: none;
}

/* ================================= */
/* ========= Period Buttons ======== */
/* The Xero button sits beside its sync pill, so that item can be taller than the plain buttons next to it. Aligning
   to the top stops the others stretching to match, so every button in the row is the same height */
#period-buttons-wrapper {
    margin-top: 2rem;
    align-items: flex-start;
}

#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;
    font-size: 1.8rem;
}

.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;
}


/* --------------------- xero status (sidebar) --------------------- */

.xero-status-sidebar {
    margin: 20px 20px 0;
}

.xero-status-sidebar-container {
    border-radius: var(--button-rounding, 6px);
    background: rgba(28, 29, 51, 0.6);
    color: #dae1e3;
}

.xero-status-sidebar-content {
    color: #dae1e3;
    font-size: 0.95rem;
}

.xero-status-sidebar-header {
    background-color: #0083a5;
    font-size: 0.95rem;
}

.xero-status-sidebar-wrapper {
    margin: 15px 15px;
    border-radius: 5px 5px 10px 10px;
    border: 1px solid rgba(18, 154, 198, 0.25);
    background: rgba(14, 16, 31, 0.6);
    overflow: hidden;

}

.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)
}