*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: var(--ksb-font-size) !important;
    font-weight: var(--ksb-font-weight) !important;
    font-family: Montserrat, Inter, Helvetica, "sans-serif" !important;
    background-color: var(--ksb-background) !important;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: #000000;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    color: var(--ksb-text) !important;
}

:root * {
    --ksb-fs-1: 1.2rem;
    --ksb-fs-2: 1rem;
    --ksb-fs-3: 0.9rem;
    --ksb-fs-4: 0.7rem;
    /*not refactored*/
    --mud-default-borderradius: 0.875rem;
    --ksb-st-font-size: 1rem;
    --ksb-bicolor-color: #009ef7;
    --ksb-bicolor-focus-color: #32b1f8;
    --ksb-submit-button-color: #ffffff;
    --ksb-submit-button-disabled-color: #595959;
    --topbar-height: 5.5rem;
    --sidebar-width: 16rem;
    --sub-sidebar-width: 16rem;
}

:root {
    --ksb-logo-src: url("../assets/logos/company_light.svg");
    --ksb-font-size: 14px;
    --ksb-font-weight: 500;
    --ksb-text-title: #000000;
    --ksb-text: #333333;
    --ksb-text-accent: #999999;
    --ksb-background: #F5F5F5;
    --ksb-background-accent: #EAEAEA;
    --ksb-background-border: #e2e2e2;
    --ksb-primary: #EAEAEA;
    --ksb-primary-border: #C9C9C9;
    --ksb-secondary: #F0F0F0;
    --ksb-secondary-border: #d7d9dc;
    --ksb-tertiary: #E5E5E5;
    --ksb-selected: #d6d6d6;
    --ksb-accent: #32b1f8;
    --ksb-accent-hover: #2199FF;
    --ksb-accent-text: #ffffff;
    --ksb-input: #F5F5F5;
    --ksb-input-disabled: #cacacb;
    --ksb-input-text: #333333;
    --ksb-input-placeholder-text: #999999;
    --ksb-input-disabled-text: #cccccc;
    --ksb-dark-text: #aaaaaa;
    --ksb-input-disabled: #a3c9dd;
    --ksb-link-hover: #32b1f8;
    --ksb-status-confirmed: #01822b;
    --ksb-status-requested: #eb8602;
    --ksb-status-tentative: #9e80b2;
    --ksb-status-canceled: #FF4800;
    --ksb-status-accent: #32b1f8;
    --ksb-snackbar-success: #01822b;
    --ksb-snackbar-warning: #eb8602;
    --ksb-snackbar-error: #FF4800;
    --ksb-status-confirmed-dark: #6b8778;
    --ksb-status-requested-dark: #b49a64;
    --ksb-status-tentative-dark: #918b95;
    --ksb-status-canceled-dark: #bf7673;
    --ksb-error: #FF4800;
    --ksb-warning: #eb8602;
    --ksb-project-subhire: #9e80b2;
    --ksb-snackbar-success-dark: #6b8778;
    --ksb-snackbar-warning-dark: #b49a64;
    --ksb-snackbar-error-dark: #bf7673;
    --ksb-icon: #555555;
    --ksb-icon-disabled: #aaaaaa;
    --ksb-icon-active: #32b1f8;
    --ksb-divider: #ffffff;
    --ksb-table-th-border: #bcbfc4;
    --ksb-table-highlight-cell: #f6f8fa;
    --ksb-scrollbar: #32b1f8;
    --ksb-scrollbar-hover: #32b1f8;
    --ksb-scrollbar-border: #bcbfc4;
    --ksb-button-border: #d7d9dc;
    --ksb-button-text: #333333;
    --ksb-button-text-hover: #000000;
    /*not refactored*/
    --ksb-title-color: #000;
    --ksb-primary-color: #555566;
    --ksb-primary-icon-color: #898A8C;
    --ksb-secondary-color: #555566;
    --ksb-highlight-color: #32b1f8;
    --ksb-bicolor-disabled-color: #e3f5ff;
    --ksb-surface-color: #f5f8fa;
    --ksb-surface-bicolor: #e9e9e9;
    --ksb-input-border-color: #d7d9dc;
    --ksb-danger-bg-color: #FFE7DD;
    --ksb-warning-bg-color: #FFF8DD;
    --ksb-info-color: #00d8a8;
    --ksb-info-border-color: #00d8a8;
    --ksb-info-bg-color: #ebfffb;
    --ksb-notification-color: #32b1f8;
    --ksb-submenu-border-color: #e2e2e2;
    --ksb-card-element-color: #f6f8fa;
    --ksb-card-element-alt-color: #E7EAEC;
}


[data-theme="dark"] {
    --ksb-logo-src: url("../assets/logos/company_dark.svg");
    --ksb-font-size: 14px;
    --ksb-font-weight: 400;
    --ksb-text-title: #ffffff;
    --ksb-text: #A6A6B0;
    --ksb-text-accent: #777780;
    --ksb-background: #151521;
    --ksb-background-accent: #1E1E2D;
    --ksb-background-border: #2e2e45;
    --ksb-primary: #1A1A28;
    --ksb-primary-border: #2B2B40;
    --ksb-secondary: #28283F;
    --ksb-secondary-border: #404053;
    --ksb-tertiary: #242436;
    --ksb-selected: #343442;
    --ksb-accent: #594ae2;
    --ksb-accent-hover: #473BB4;
    --ksb-accent-text: #ffffff;
    --ksb-dark-text: #5e5e65;
    --ksb-input: #242436;
    --ksb-input-text: #A6A6B0;
    --ksb-input-placeholder-text: #777780;
    --ksb-input-disabled-text: #777780;
    --ksb-input-disabled: #555566;
    --ksb-input-active-disabled: #5a58a8;
    --ksb-link-hover: #1976D2;
    --ksb-status-confirmed: #22e600;
    --ksb-status-requested: #e6b300;
    --ksb-status-tentative: #7FBCD2;
    --ksb-status-accent: #1669bb;
    --ksb-status-canceled: #ff5000;
    --ksb-snackbar-success: #22e600;
    --ksb-snackbar-warning: #e6b300;
    --ksb-snackbar-error: #ff5000;
    --ksb-project-subhire: #b0aee8;
    --ksb-status-confirmed-dark: #6cbf40;
    --ksb-status-requested-dark: #af9540;
    --ksb-status-tentative-dark: #4c717e;
    --ksb-status-canceled-dark: #bf3f40;
    --ksb-error: #ff5000;
    --ksb-warning: #e6b300;
    --ksb-snackbar-success-dark: #6cbf40;
    --ksb-snackbar-warning-dark: #af9540;
    --ksb-snackbar-error-dark: #bf3f40;
    --ksb-icon: #777780;
    --ksb-icon-disabled: #555566;
    --ksb-icon-active: #594ae2;
    --ksb-divider: #777780;
    --ksb-table-th-border: #404053;
    --ksb-table-highlight-cell: #28283F;
    --ksb-input-disabled: #404053;
    --ksb-scrollbar: #594ae2;
    --ksb-scrollbar-hover: #382e9f;
    --ksb-scrollbar-border: #28283f;
    --ksb-button-border: #404053;
    --ksb-button-text: #A6A6B0;
    --ksb-button-text-hover: #ffffff;
    /*not refactored*/
    --ksb-secondary-color: #616174;
    --ksb-bicolor-disabled-color: #003452;
    --ksb-surface-color: #1E1E2D;
    --ksb-surface-bicolor: #343442;
    --ksb-input-border-color: #404053;
    --ksb-warning-bg-color: #392f28;
    --ksb-danger-bg-color: #39282A;
    --ksb-info-color: #00ffc7;
    --ksb-info-border-color: #00ffc7;
    --ksb-info-bg-color: #283339;
    --ksb-notification-color: #594ae2;
    --ksb-submenu-border-color: #2e2e45;
    --ksb-card-element-color: #28283F;
    --ksb-card-element-alt-color: #242436;
}

a {
    text-decoration: none;
    transition: color 0.2s ease;
    color: var(--ksb-text);
    cursor: pointer;
}

    a:hover,
    a:hover p.ksb-state,
    a:hover * {
        color: var(--ksb-link-hover);
        text-decoration: none;
    }



.logo {
    content: var(--ksb-logo-src);
}

p {
    margin: 0;
}

@media (max-width: 992px) {
    .h-90px {
        height: 90px !important;
    }

    .ksb-group {
        padding: 1rem;
    }

    .centerTextIfSmall {
        text-align: center;
    }
    .hideOnSmallWindow {
        display: none;
    }

}

@media (min-width: 992px) {
    .h-lg-125px {
        height: 125px !important;
    }

    .vh100 {
        height: 100vh;
        display: grid;
    }
}

.center-image {
    display: flex;
    justify-content: center;
}


.textColor {
    color: var(--ksb-text) !important;
}

.standardColor {
    color: var(--ksb-text) !important;
}

.biColor {
    color: var(--ksb-secondary-color);
}





/*ok*/
.ksb-link {
    font-size: var(--ksb-st-font-size);
    color: var(--ksb-bicolor-color);
    font-weight: 300;
}




/*ok*/
.fs-9 {
    font-size: .9rem
}

.fs-11 {
    font-size: 1.1rem;
}
.fs-12 {
    font-size: 1.2rem;
}

.nowrap {
    white-space: nowrap;
}

.allwrap {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-all;
}

/*ok*/
.ksb-divider {
    width: 100%;
    margin: 0;
    border: 1px solid var(--ksb-divider);
    border-style: solid none none none
}

/*ok*/
.ksb-text {
    color: var(--ksb-text);
}

/*ok*/
.ksb-text-title {
    color: var(--ksb-text-title);
}

/*ok*/
.ksb-text-ej {
    color: var(--ksb-input-placeholder-text) !important;
}

/*ok*/
.ksb-text-placeholder {
    color: var(--ksb-input-placeholder-text);
}

/*ok*/
.ksb-text-dark {
    color: var(--ksb-dark-text);
}

.ksb-text-center {
    text-align: center;
}


.ksb-text-highlight {
    background-color: transparent;
    font-weight: bold;
    color: var(--ksb-link-hover);
}

.ksb-card-container {
    display: flex;
    justify-content: center; /* align item horizontally */
    align-items: center; /* align item vertically */
    padding: 1rem;
}

    .ksb-card-element {
        border: 1px solid var(--ksb-button-border);
        border-radius: 0.45rem;
        padding: 0.45rem;
        margin-bottom: 0.35rem;
        min-width: 0;
    }

.ksb-card-element.small {
    padding: 0.15rem;
}

.ksb-card-element:nth-child(odd) {
        background-color: var(--ksb-secondary);
    }

    .ksb-card-element:nth-child(even) {
        background-color: var(--ksb-tertiary);
    }

        .ksb-card-element:hover {
            cursor: pointer;
            border: 1px solid var(--ksb-secondary-border);
            filter: brightness(85%);
            color: var(--ksb-button-text-hover)
        }

.ksb-mw-18 {
    min-width: 18rem;
}

.ksb-mw-25 {
    min-width: 25rem;
}

.ksb-card-header {
    border-bottom: 1px solid var(--ksb-primary-border);
    padding: 0 1.85rem;
}

.ksb-card-body {
    padding: 1.85rem 2.25rem;
}



.ksb-item {
    background-color: var(--ksb-primary);
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    border-radius: 0.7rem;
    border: 1px solid var(--ksb-input-border-color);
}

    .ksb-item:hover {
        background-color: var(--ksb-surface-bicolor);
    }

.ksb-group {
    padding: 1rem;
    border-radius: 0.7rem;
    border: 1px solid var(--ksb-primary-border);
}

.ksb-item-small {
    background-color: var(--ksb-card-element-alt-color);
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    border-radius: 0.7rem;
    border: 1px solid var(--ksb-input-border-color);
}

    .ksb-item-small:hover {
        background-color: var(--ksb-card-element-alt-color);
        filter: brightness(115%);
    }

.ksb-item-selected {
    background-color: var(--ksb-surface-bicolor);
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    border-radius: 0.7rem;
    border: 1px solid var(--ksb-input-border-color);
}

.ksb-item-small-selected {
    background-color: var(--ksb-surface-bicolor);
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    border-radius: 0.7rem;
    border: 1px solid var(--ksb-input-border-color);
}


/*ok*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    transition: all 600000s 0s;
}
/*ok*/
.ksb-form-control {
    color: var(--ksb-text);
    background-color: var(--ksb-input);
    border: 1px solid var(--ksb-primary-border);
    box-shadow: none !important;
    width: 100%;
    padding: 0.77rem 1rem;
    border-radius: 0.475rem;
    outline: none !important;
    transition: border-color 0.35s ease-in-out;
}
/*ok*/
    .ksb-form-control:focus {
        border: 1px solid var(--ksb-accent);
        background-color: var(--ksb-input);
    }
/*ok*/
    .ksb-form-control::placeholder {
        color: var(--ksb-input-placeholder-text);
    }


.ksb-text-error {
    color: var(--ksb-error);
}

.ksb-text-warning {
    color: var(--ksb-warning);
}
.ksb-text-accent {
    color: var(--ksb-text-accent);
}

.ksb-state-confirmed {
    color: var(--ksb-status-confirmed);
}
.ksb-state-requested {
    color: var(--ksb-status-requested);
}
.ksb-state-accent {
    color: var(--ksb-status-accent);
}
.ksb-state-canceled {
    color: var(--ksb-status-canceled);
}

.ksb-link-button {
    color: var(--ksb-text);
    transition: color 150ms cubic-bezier(.4,0,.2,1) 0ms
}

.ksb-link-button-warn {
    color: var(--ksb-text);
    transition: color 150ms cubic-bezier(.4,0,.2,1) 0ms
}

.ksb-link-button:hover {
    color: var(--ksb-bicolor-color);
}

.ksb-link-button-warn:hover {
    color: purple;
}

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

.ksb-form-text {
    color: var(--ksb-text);
    display: inline-block;
    vertical-align: top;
    padding-top: 0.1rem;
    padding-left: 0.35rem;
}

.ksb-submit-button {
    color: var(--ksb-accent-text);
    background-color: var(--ksb-accent);
    border: 0;
    width: 100%;
    padding: 0.77rem;
    border-radius: 0.475rem;
    transition: all 0.35s ease-in-out;
}

    .ksb-submit-button:hover:enabled {
        background-color: var(--ksb-accent-hover);
       
    }

    .ksb-submit-button:disabled {
        filter: brightness(55%);
        cursor: default;
    }
/*ok*/
.ksb-button {
    background-color: var(--ksb-secondary);
    border: 1px solid var(--ksb-button-border);
    color: var(--ksb-button-text);
    width: 100%;
    padding: 0.4rem;
    line-height: 1.5;
    border-radius: 0.475rem;
    transition: all 0.35s ease-in-out;
}
/*ok*/
    .ksb-button:hover:enabled {
        color: var(--ksb-button-text-hover);
        border: 1px solid var(--ksb-accent);
    }
/*ok*/
.ksb-button:disabled {
    border: 1px solid var(--ksb-button-border);
    color: var(--ksb-input-disabled-text);
    cursor: default;
}
    /*ok*/
.ksb-submit-button-hollow {
    border: 1px solid var(--ksb-accent-hover);
    color: var(--ksb-button-text);
    width: 100%;
    padding: 0.4rem;
    line-height: 1.5;
    border-radius: 0.475rem;
    transition: all 0.35s ease-in-out;
}



/*ok*/
    .ksb-submit-button-hollow:hover:enabled {
        color: var(--ksb-button-text-hover);
        border: 1px solid var(--ksb-accent);
        background-color: var(--ksb-secondary)
    }
/*ok*/
    .ksb-submit-button-hollow:disabled {
        border: 1px solid var(--ksb-button-border);
        color: var(--ksb-input-disabled-text);
        cursor: default;
    }

/*ok*/
.ksb-submit-button-hollow-alert {
    color: var(--ksb-button-text);
    border: 1px solid var(--ksb-snackbar-error);
    width: 100%;
    padding: 0.4rem;
    line-height: 1.5;
    border-radius: 0.475rem;
    transition: all 0.35s ease-in-out;
}
/*ok*/
    .ksb-submit-button-hollow-alert:hover:enabled {
        color: var(--ksb-button-text-hover);
        background-color: var(--ksb-secondary)
    }
/*ok*/
    .ksb-submit-button-hollow-alert:disabled {
        color: var(--ksb-input-disabled-text);
        border: 1px solid var(--ksb-button-border);
        cursor: default;
    }

.alert {
    border-radius: 0.475rem;
    font-weight: 300;
    text-align: center;
    word-break: break-word;
    overflow-wrap: break-word;
    background-color: var(--ksb-surface-color);
}

    .alert.error {
        color: var(--ksb-snackbar-error);
        border: 1px solid var(--ksb-snackbar-error);
    }

    .alert.warning {
        color: var(--ksb-snackbar-warning);
        border: 1px solid var(--ksb-snackbar-warning);
    }

.alert.info {
    color: var(--ksb-snackbar-success);
    border: 1px solid var(--ksb-snackbar-success);
}

.collapse {
    display: none;
}

.ksb-b-seperator {
    border-bottom: 1px solid var(--ksb-submenu-border-color)
}

.mark, mark {
    padding: 0rem;
}

.ksb-scrollbar {
    padding-right: 0.5rem;
    padding-top: 0.3rem;
    padding-left: 0.3rem;
    border: 1px solid var(--ksb-scrollbar-border);
    border-radius: 0.5rem;
    overflow-y: scroll !important;
}

    .ksb-scrollbar::-webkit-scrollbar-track,
    body::-webkit-scrollbar-track {
        border-radius: 1rem;
    }

    .ksb-scrollbar::-webkit-scrollbar,
    body::-webkit-scrollbar {
        width: 0.7rem;
        box-shadow: inset 0 0 0.5rem var(--ksb-scrollbar-border);
    }

    .ksb-scrollbar::-webkit-scrollbar-thumb,
    body::-webkit-scrollbar-thumb {
        border-radius: 1rem;
        height: 30%;
        background: var(--ksb-scrollbar);
    }
        .ksb-scrollbar::-webkit-scrollbar-thumb:hover,
        body::-webkit-scrollbar-thumb:hover {
            background: var(--ksb-scrollbar-hover);
        }


.ksb-state.Confirmed,
.ksb-state.confirmed {
    color: var(--ksb-status-confirmed);
}

.ksb-state.Confirmed.dark,
.ksb-state.confirmed.dark {
    color: var(--ksb-status-confirmed-dark);
}

.ksb-state.requested,
.ksb-state.proposed,
.ksb-state.unconfirmed,
.ksb-state.Requested,
.ksb-state.Proposed,
.ksb-state.Unconfirmed {
    color: var(--ksb-status-requested);
}

    .ksb-state.requested.dark,
    .ksb-state.proposed.dark,
    .ksb-state.unconfirmed.dark,
    .ksb-state.Requested.dark,
    .ksb-state.Proposed.dark,
    .ksb-state.Unconfirmed.dark {
        color: var(--ksb-status-requested-dark);
    }

.ksb-state.Preferred,
.ksb-state.preferred,
.ksb-state.Reserved,
.ksb-state.reserved,
.ksb-state.Tentative,
.ksb-state.tentative {
    color: var(--ksb-status-tentative);
}

    .ksb-state.Preferred.dark,
    .ksb-state.preferred.dark,
    .ksb-state.Reserved.dark,
    .ksb-state.reserved.dark,
    .ksb-state.Tentative.dark,
    .ksb-state.tentative.dark {
        color: var(--ksb-status-tentative-dark);
    }

.ksb-state.canceled,
.ksb-state.Canceled {
    color: var(--ksb-status-canceled);
}

.ksb-state.canceled.dark,
.ksb-state.Canceled.dark {
    color: var(--ksb-status-canceled-dark);
}

/*ok*/
.searchResult:hover .mud-icon-root {
    fill: var(--ksb-link-hover);
}

.text-end {
    text-align: end;
}

.text-center {
    text-align: center;
}

/*small size*/
@media (max-width: 500px) {
    .ksb-group {
        width: 100%;
    }
}






.text-right {
    text-align: right;
}

img, svg {
    vertical-align: bottom;
}   


.ksb-valign-middle {
    vertical-align: middle;
}

.ksb-box {
    border: 1px solid var(--ksb-submenu-border-color);
}

.ksb-project.subhire {
    color: var(--ksb-project-subhire);
}


.flexCenter {
    display: flex;
    align-items: center;
}