:root {
    --placeholder-color: #808080;

    /* PALETTE */
    --primary: #000;
    --csecondary: #555;
    --ctertiary: #808080;
    --disabled: #B3B3B3;

    --primary-soft: #F0F0F0;

    --border-default: #E6E6E6;
    --border-light: #F0F0F0;
    --border-error: #d93747;

    --background-primary: #FFFFFF;
    --background-secondary: #F6F6F6;
    --background-tertiary: #F0F0F0;
    --background-dark: #141414;
    --background-tag: #D4D4D4;

    --success-default: #00875A;
    --success-default2: #0E7A48;
    --success-soft: #E3FCEF;
    --success-soft2: #ECFDF3;

    --danger-default: #DE350B;
    --danger-soft: #FFEBE6;

    /* PLANNING */
    --planning-default-bg-hover: #EDEDED;
    --planning-default-bg-selected: #3A3A3A;

    --planning-red-bg: #F9DCDE;
    --planning-red-bg-hover: #F3D0D3;
    --planning-red-bg-selected: #AE1E27;
    --planning-red-color: #633638;

    --planning-orange-bg: #fbebe0;
    --planning-orange-bg-hover: #F2DBCD;
    --planning-orange-bg-selected: #B85A14;
    --planning-orange-color: #B85A14;

    --planning-yellow-bg: #FFF7D6;
    --planning-yellow-bg-hover: #F4EBC7;
    --planning-yellow-bg-selected: #CCA400;
    --planning-yellow-color: #635A36;

    --planning-green-bg: #DCF9EB;
    --planning-green-bg-hover: #CAEEDE;
    --planning-green-bg-selected: #20AC67;
    --planning-green-color: #36634C;

    --planning-blue-bg: #D9E9FC;
    --planning-blue-bg-hover: #CADEF1;
    --planning-blue-bg-selected: #0D5CBF;
    --planning-blue-color: #364A63;

    --planning-purple-bg: #E7D7FC;
    --planning-purple-bg-hover: #DECBF2;
    --planning-purple-bg-selected: #5A0EBE;
    --planning-purple-color: #493663;

    /* BOOKING PLANNING */
    --gm-grey-50: #FAFAFA;
    --gm-grey-100: #F5F5F5;
    --gm-grey-200: #E9EAEB;
    --gm-grey-400: #A4A7AE;
    --gm-grey-600: #535862;
    --gm-grey-700: #414651;

    --gm-brown-50: #f6eeec;
    --gm-brown-100: #f0e3e3;
    --gm-brown-200: #dec7c5;
    --gm-brown-400: #e8aba9;
    --gm-brown-600: #957574;
    --gm-brown-700: #934b4b;

    --gm-red-50: #FEF3F2;
    --gm-red-100: #FEE4E2;
    --gm-red-200: #FECDCA;
    --gm-red-400: #F97066;
    --gm-red-600: #D92D20;
    --gm-red-700: #B42318;

    --gm-orange-50: #FEF6EE;
    --gm-orange-100: #FDEAD7;
    --gm-orange-200: #F9DBAF;
    --gm-orange-400: #F38744;
    --gm-orange-600: #E04F16;
    --gm-orange-700: #B93815;

    --gm-yellow-50: #FEFBE8;
    --gm-yellow-100: #FEF7C3;
    --gm-yellow-200: #FEEE95;
    --gm-yellow-400: #FAC515;
    --gm-yellow-600: #CA8504;
    --gm-yellow-700: #A15C07;

    --gm-pink-50: #FDF2FA;
    --gm-pink-100: #FCE7F6;
    --gm-pink-200: #FCCEEE;
    --gm-pink-400: #F670C7;
    --gm-pink-600: #DD2590;
    --gm-pink-700: #C11574;

    --gm-purple-50: #F4F3FF;
    --gm-purple-100: #EBE9FE;
    --gm-purple-200: #D9D6FE;
    --gm-purple-400: #9B8AFB;
    --gm-purple-600: #6938EF;
    --gm-purple-700: #5925DC;

    --gm-green-50: #EDFCF2;
    --gm-green-100: #D3F8DF;
    --gm-green-200: #AAF0C4;
    --gm-green-400: #3CCB7F;
    --gm-green-600: #099250;
    --gm-green-700: #087443;

    --gm-blue-50: #EFF8FF;
    --gm-blue-100: #D1E9FF;
    --gm-blue-200: #B2DDFF;
    --gm-blue-400: #53B1FD;
    --gm-blue-600: #1570EF;
    --gm-blue-700: #175CD3;


    /* Activity */

    /* Shadows */
    --shadow-m: 0 4px 20px rgba(0, 0, 0, 0.1);

}

.body1 {
    font-size: 13px;
    color: var(--csecondary);
}
.body2 {
    font-size: 15px;
    color: var(--csecondary);
}

.nowrap {
    white-space: nowrap;
}

/*//////////// GENERAL ////////////*/
.flex {display: flex;}
.flex-col {flex-direction: column;}
.justify-end {justify-content: flex-end;}
.justify-start {justify-content: flex-start;}
.justify-between {justify-content: space-between;}
.justify-center {justify-content: center;}
.items-center {align-items: center;}
.gap-4 {gap: 4px;}
.gap-6 {gap: 6px;}
.gap-8 {gap: 8px;}
.gap-10 {gap: 10px;}
.gap-12 {gap: 12px;}
.gap-16 {gap: 16px;}
.gap-20 {gap: 20px;}

/*//////////// BUTTONS ////////////*/

.mainActionBtn,
.uibtn {
    background-color: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    min-height: 40px;
    padding: 4px 13px;
    cursor: pointer;
    outline: none !important;
    font-family: -apple-system, "system-ui", Roboto, "Helvetica Neue", Ubuntu, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 0;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 7px;
    -webkit-transition: color .1s, background-color .1s;
    transition: color .1s, background-color .1s;
}

.mainActionBtn:hover,
.uibtn:hover {
    background-color: #262626;
}

.uibtn.iconOnly {
    justify-content: center;
    padding: 0;
    min-width: 40px;
}

.secondaryActionBtn {
    padding: 4px 13px;
    min-height: 40px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    outline: none;
    font-family: -apple-system, "system-ui", Roboto, "Helvetica Neue", Ubuntu, sans-serif;
    font-size: 14px;
    line-height: 0;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 7px;
    -webkit-transition: color .1s, background-color .1s;
    transition: color .1s, background-color .1s;
    font-weight: 400;
}

.secondaryActionBtn,
.uibtn.secondary {
    background-color: var(--background-tertiary);
    color: var(--csecondary);
}

.uibtn.success {
    background-color: var(--success-soft) !important;
    color: var(--success-default) !important;
}

.uibtn.success:hover {
    background-color: #d6f6e6 !important;
}

.uibtn.fullWidth {
    width: 100%;
    justify-content: center;
}

.secondaryActionBtn.transparentFirst,
.uibtn.transparentFirst,
.uibtn.transparentBtn{
    background-color: transparent;
}

.secondaryActionBtn:hover,
.uibtn.secondary:hover {
    background-color: #E2E2E2;
}

.tertActionBtn,
.uibtn.tert {
    background-color: transparent;
    color: #000;
    border: 1px solid var(--border-default);
    border-radius: 8px;
    min-height: 40px;
    padding: 4px 13px;
    cursor: pointer;
    outline: none;
    font-family: -apple-system, "system-ui", Roboto, "Helvetica Neue", Ubuntu, sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 0;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 7px;
    -webkit-transition: color .1s, background-color .1s;
    transition: color .1s, background-color .1s;
}

.tertActionBtn.thin {
    border-radius: 6px;
    min-height: 32px;
}

.tertActionBtn.show,
.uibtn.show {
    display: flex !important;
}

.tertActionBtn:hover,
.uibtn.tert:hover {
    background-color: #EFEFEF;
}

.secondaryActionBtn.thin,
.uibtn.thin {
    border-radius: 8px;
    min-height: 32px;
}

.uiInfoBtn {
    margin: 0;
    outline: none;
    padding: 0;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
}

.uibtn.thin {
    padding: 4px 8px;
}

.uibtn.mini {
    padding: 0 8px;
    min-height: 24px;
    font-size: 13px;
    gap: 6px;
}

.uibtn.mini.tert {
    color: var(--csecondary);
}

.uibtn.mini.tert.active {
    background-color: #EFEFEF;
}

.uibtn.mini svg {
    width: 12px;
    height: auto;
}

.uibtn .icon18 svg {
    width: 18px;
}

.uibtn .icon16 svg {
    width: 16px;
}

.uibtn.danger {
    background-color: var(--danger-default);
}
.uibtn.danger:hover {
    background-color: #C22E09;
}

.uiActionBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #fff;
    border-radius: 6px;
    background-color: var(--disabled);
    cursor: pointer;
    border: none;
    outline: none;
    user-select: none;
    -webkit-transition: color .1s, background-color .1s;
    transition: color .1s, background-color .1s;
}

.uiActionBtn:hover {
    background-color: var(--ctertiary);
}

.uiActionBtn.rounded,
.uiActionBtn.circle {
    border-radius: 50%;
}

.uiActionBtn.trash {
    background-color: #DE350C;
}

.uiActionBtn.trash:hover {
    background-color: #CB0C0C;
}

/*//////////// Fields ////////////*/
.uifieldContainer label {
    font-size: 15px;
    color: var(--csecondary);
}

.uifieldContainer .bottomText {
    font-size: 12px;
    color: var(--csecondary);
    margin-top: 8px;
    line-height: 14px;
}

.uifieldContainer .inlineFlex {
    display: flex;
    gap: 7px;
    align-items: center;
    margin-bottom: 10px;
}

.uifieldContainer .optionalText {
    font-size: 12px;
    color: var(--ctertiary);
}

.uifieldContainer .fieldContainer {
    position: relative;
}

.uifieldContainer .buttonInputInfo {
    position: absolute;
    right: 5px;
    bottom: 0;
    height: 100%;
    cursor: text;
    background: transparent;
    border: none;
    color: var(--csecondary);
    outline: none;
    display: flex;
    align-items: center;
}

.uifieldContainer .buttonInputInfo img {
    max-width: 16px;
}

.uifield {
    /*border: 1px solid var(--border-default);*/
    border: none;
    height: 44px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 15px;
    font-family: -apple-system, "system-ui", Roboto, "Helvetica Neue", Ubuntu, sans-serif;
    width: 100%;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    outline: none;
    box-shadow: 0 0 0 1px var(--border-default), 0 2px 4px 0 rgb(0 0 0 / 5%), 0 1px 1.5px 0 rgb(0 0 0 / 3%);
}

select.uifield {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    background: url(../img/icons/icon-dropdown.svg);
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: 8px 5px;
    background-position-x: calc(100% - 15px);
    background-position-y: calc(50%);
}

.uifieldContainer .fieldContainer.leading .uifield {
    padding-left: 30px;
}
.uifieldContainer .fieldContainer.trailing .uifield {
    padding-right: 30px;
}

.uifieldContainer .fieldContainer.leading .buttonInputInfo {
    left: 5px;
    right: inherit;
    bottom: 0;
    height: 100%;
}

.uifieldContainer .fieldContainer.medium .uifield {
    border-radius: 8px;
    height: 36px;
    line-height: 36px;
}

.uifieldContainer .fieldContainer.small .uifield {
    border-radius: 6px;
    height: 28px;
    line-height: 28px;
}

.uifieldContainer .fieldContainer textarea.uifield {
    line-height: inherit !important;
    width: 100%;
    padding: 12px !important;
    min-height: 80px;
}

.uifield.error {
    box-shadow: 0 0 0 1px var(--border-error), 0 2px 4px 0 rgb(217 55 71 / 5%), 0 1px 1.5px 0 rgb(217 55 71 / 3%);
}

.uifield:focus {
    box-shadow: 0 0 0 1px var(--ctertiary), 0 2px 4px 0 rgb(0 0 0 / 5%), 0 1px 1.5px 0 rgb(0 0 0 / 3%);
}

.uifield::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--ctertiary);
    opacity: 1;
    /* Firefox */
}

/* For Chrome, Safari, Edge, Opera */
input.uifield[type="number"]::-webkit-inner-spin-button,
input.uifield[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* For Firefox */
input.uifield[type="number"] {
    -moz-appearance: textfield;
}

/* ////////// WYSIWYG //////////*/

.uiQuillField {
    border: none;
    /*padding: 0 12px;*/
    border-radius: 8px;
    font-size: 15px;
    font-family: -apple-system, "system-ui", Roboto, "Helvetica Neue", Ubuntu, sans-serif !important;
    width: 100%;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    outline: none;
    box-shadow: 0 0 0 1px var(--border-default), 0 2px 4px 0 rgb(0 0 0 / 5%), 0 1px 1.5px 0 rgb(0 0 0 / 3%);
}

.uiQuillField .ql-container {
    font-family: -apple-system, "system-ui", Roboto, "Helvetica Neue", Ubuntu, sans-serif !important;
    font-weight: 400;
    font-size: 15px;
}

.uiQuillField .ql-editor.ql-blank::before {
    color: var(--ctertiary) !important;
    font-family: -apple-system, "system-ui", Roboto, "Helvetica Neue", Ubuntu, sans-serif !important;
    opacity: 1;
}

.uiQuillField .ql-container.ql-snow,
.uiQuillField  .ql-toolbar.ql-snow {
    border: none;
}

.uiQuillField  .ql-toolbar.ql-snow {
    display: flex;
    border-bottom: 1px solid var(--border-default);
    padding: 6px 8px;
}

.uiQuillField .ql-toolbar svg {
    width: 14px;
}

.uiQuillField .ql-snow.ql-toolbar button, .uiQuillField .ql-snow .ql-toolbar button {
    display: flex;
    align-items: center;
    justify-content: center;
}

.uiQuillField .ql-snow.ql-toolbar button.ql-active {
    background-color: var(--background-secondary);
    border-radius: 6px;
    border: 1px solid var(--border-default);
    color: var(--csecondary);
}

.uiQuillField .ql-snow.ql-toolbar button:hover {
    color: var(--csecondary);
}

.uiQuillField  .ql-toolbar.ql-snow .ql-formats {
    display: flex;
    align-items: center;
    gap: 2px;
}

/*//////////// TAGS ////////////*/

.uitag {
    font-size: 13px;
    padding: 4px 6px;
    border: 1px solid var(--border-default);
    color: var(--primary);
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.uitag.thin {
    padding: 2px 4px;
    font-size: 12px;
    line-height: initial;
}

.uitag.hover {
    background-color: var(--background-secondary);
    border-color: var(--background-tag);
}

.uitag.active {
    color: #fff;
    background-color: var(--primary);
    border-color: var(--primary);
}

.uitag.neutral {
    background-color: var(--background-secondary);
    border-color: var(--background-tag);
    color: var(--csecondary);
}

.uitag.success {
    color: #006908;
    background-color: #D7F7C2;
    border-color: #9CDD7C;
}

.uitag.warning {
    color: #A82C00;
    background-color: #FCEDB9;
    border-color: #F4D087;
}

.uitag.error {
    color: #B3093C;
    background-color: #FFE7F2;
    border-color: #FFCCDF;
}

.uitag.info {
    color: #0055BC;
    background-color: #CFF5F6;
    border-color: #B4D0D9;
}

.uitag.purple {
    color: #572ade;
    background-color: #e3d9f6;
    border-color: #ddcff6;
}

.uitag.removable {
    padding-top: 3px;
    padding-bottom: 3px;
    padding-right: 4px;
}

.uitag .uitagRemovableBtn {
    padding: 2px;
    height: 16px;
    width: 16px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    border: none;
    outline: none;
    cursor: pointer;
}

.uitag.success .uitagRemovableBtn {
    color: #006908;
    animation: 0.2s background-color;
    background-color: rgba(0, 105, 8, 0.07);
}

.uitag.success .uitagRemovableBtn:hover {
    background-color: rgba(0, 105, 8, 0.1);
}

.uitag.warning .uitagRemovableBtn {
    color: #A82C00;
    animation: 0.2s background-color;
    background-color: rgba(168, 44, 0, 0.07);
}

.uitag.warning .uitagRemovableBtn:hover {
    background-color: rgba(168, 44, 0, 0.1);
}

.uitag.error .uitagRemovableBtn {
    color: #B3093C;
    animation: 0.2s background-color;
    background-color: rgba(179, 9, 60, 0.07);
}

.uitag.error .uitagRemovableBtn:hover {
    background-color: rgba(179, 9, 60, 0.1);
}

/* SVGs */
.svgWhite {
    fill: #fff;
}

/* ///////// Progress bar circular /////*/

.uiProgressGraph {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
}

.uiProgressGraph-12 {
    width: 12px;
    height: 12px;
}

.uiProgressElement {
    width: 7px;
    height:7px;
    border-radius: 50%;
    background: conic-gradient(rgb(255, 255, 255) 0, transparent 0%);
}

/*//////////// Tabs ////////////*/

.uitabs {
    border-bottom: 2px solid var(--border-light);
}

.uitabs.btnStyle {
    border: none;
}

.uitabs ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.uitabs.nowrap ul {
    flex-wrap: nowrap;
}

.uitabs li {
    border: none !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    outline: none !important;
    color: var(--ctertiary);
    cursor: pointer;
    margin-bottom: -2px;
    user-select: none;
    font-size: 14px;
    line-height: 30px;
    padding: 0 5px;
    display: flex;
    align-items: center;
}

.uitabs.btnStyle li {
    border: 1px solid var(--border-default) !important;
    border-radius: 8px !important;
    line-height: inherit !important;
    min-height: 32px;
    padding: 4px 8px;
}

.uitabs.nowrap li {
    flex-shrink: 0;
}

.uitabs.medium li {
    line-height: 40px;
}

.uitabs li.active,
.uitabs li:hover {
    box-shadow: inset 0 -2px 0 0 var(--primary);
    color: var(--primary) !important;
}


.uitabs.btnStyle li.active {
    background-color: var(--background-secondary) !important;
}

.uitabs.btnStyle li.active,
.uitabs.btnStyle li:hover {
    background-color: var(--background-secondary) !important;
    border-color: var(--ctertiary) !important;
    box-shadow: none;
    color: var(--csecondary) !important;
}

/*//////////// Sidebar ////////////*/
/* Control is a hidden checkbox. Toggling it controls both the sidebar and the backdrop via CSS only. */
#uisidebar-open {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: -1px;
}

.uisidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: min(100vw, 600px);
    background: #fff;
    border-inline-start: 1px solid var(--border-default);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
    transform: translateX(100%);
    transition: transform 280ms cubic-bezier(.2, .7, .2, 1);
    z-index: 30;
    display: grid;
    grid-template-rows: auto 1fr;
}

.uisidebar header {
    display: flex;
    align-items: center;
    color: var(--csecondary);
    gap: 8px;
    padding: 0 8px;
    height: 56px;
    border-bottom: 1px solid var(--border-default);
}

.uisidebar .closeUisidebarBtn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    justify-content: center;
}

.uisidebar .closeUisidebarBtn:hover {
    background-color: var(--background-secondary);
}

.uisidebar .closeUisidebarBtn svg {
    width: 22px;
    height: auto;
    opacity: 0.8;
}

.uisidebar .closeUisidebarBtn:hover svg {
    opacity: 1;
}

.uisidebar .content {
    padding: 16px;
    overflow: auto;
}

/* Backdrop */
.uisidebarbackdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .1);
    opacity: 0;
    transition: opacity 280ms cubic-bezier(.2, .7, .2, 1);
    pointer-events: none;
    z-index: 20;
}

/* OPEN STATE: relies on the checkbox being checked */
#uisidebar-open:checked ~ .uisidebarbackdrop {
    opacity: 1;
    pointer-events: auto;
}

#uisidebar-open:checked ~ .uisidebar {
    transform: translateX(0);
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .uisidebar, .uisidebarbackdrop {
        transition: none;
    }
}

/* Small screens: sidebar takes full width for comfort */
@media (max-width: 480px) {
    .uisidebar {
        border-inline-start: none;
        border-radius: 0;
    }
}

/* Close button semantics */
.uisidebar .icon {
    inline-size: 20px;
    block-size: 20px;
    display: inline-block
}

/*//////////// Segment ////////////*/

.uiSegment {
    background-color: var(--background-tertiary);
    border-radius: 10px;
    padding: 3px;
    color: var(--csecondary);
    display: flex;
    font-size: 14px;
    width: fit-content;
}

.uiSegment button {
    color: var(--csecondary);
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    transition: color 0.2s, background-color 0.1s;
    user-select: none;
    border-radius: 8px;
    font-family: 'Roboto', sans-serif;
    padding-left: 10px;
    padding-right: 10px;
    height: 28px;
    line-height: 28px;
}

.uiSegment button:hover {
    background-color: var(--background-tertiary);
    color: var(--primary);
}

.uiSegment button.active {
    background-color: #fff;
    color: var(--primary);
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;

}

.uiSegment.small {
    border-radius: 6px;
    padding: 2px;
}

.uiSegment.small button {
    height: 22px;
    line-height: 22px;
}

/*//////////// Toastr ////////////*/

.toast-title {
    color: #fff;
    font-weight: 500;
    font-size: 15px;
}

.toast-message {
    color: var(--border-default);
    margin-top: 5px;
    font-size: 15px;
}

.toast-top-right {
    top: 70px;
    right: 20px;
}

#toast-container>div {
    opacity: 1;
    -webkit-box-shadow: 0 3px 20px -12px rgba(0, 0, 0, 0.75) !important;
    -moz-box-shadow: 0 3px 20px -12px rgba(0, 0, 0, 0.75) !important;
    box-shadow: 0 3px 20px -12px rgba(0, 0, 0, 0.75) !important;
    background-color: var(--background-dark) !important;
    border-radius: 8px !important;
    color: #fff !important;
}

#toast-container>div.toast-info,
#toast-container>div.toast-success,
#toast-container>div.toast-warning,
#toast-container>div.toast-error{
    border: 0;
}

#toast-container>.toast-success {
    background-image: url(../img/icons/checkToastr.svg) !important;
    background-size: 23px 23px;
    background-position-y: 15px;
}

#toast-container>.toast-warning {
    background-image: url(../img/icons/warningToastr.svg) !important;
    background-size: 23px 23px;
    background-position-y: 15px;
}

#toast-container>.toast-error {
    background-image: url(../img/icons/errorToastr.svg) !important;
    background-size: 23px 23px;
    background-position-y: 15px;
}

#toast-container>.toast-info {
    background-image: url(../img/icons/infoToastr.svg) !important;
    background-size: 23px 23px;
    background-position-y: 15px;
}

.close-toastr {
    width: 20px;
    margin-right: 3px;
}

.toast-close-button:hover {
    color: #fff;
}

/* Account Elements */
.uicoloredElement {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--csecondary);
}

.uicoloredElement .uiavatar {
    background-color: var(--primary);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    font-size: 13px;
    flex-shrink: 0;
}

.uicoloredElement .uiavatar.red { background-color: var(--planning-red-bg-selected); }
.uicoloredElement .uiavatar.orange { background-color: var(--planning-orange-bg-selected); }
.uicoloredElement .uiavatar.yellow { background-color: var(--planning-yellow-bg-selected); }
.uicoloredElement .uiavatar.green { background-color: var(--planning-green-bg-selected); }
.uicoloredElement .uiavatar.blue { background-color: var(--planning-blue-bg-selected); }
.uicoloredElement .uiavatar.purple { background-color: var(--planning-purple-bg-selected); }
.uicoloredElement .uiavatar.pink { background-color: #f663f2; }
.uicoloredElement .uiavatar.brown { background-color: #9A644C; }
.uicoloredElement .uiavatar.grey { background-color: var(--csecondary); }


/* UI Account */

.uiaccountElement {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--csecondary);
}

.uiaccountElement .uiavatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-position: center;
    background-size: cover;
    font-size: 16px;
    font-weight: 500;
    flex-shrink: 0;
}

.uiaccountElement.small .uiavatar {
    width: 20px;
    height: 20px;
    font-size: 13px;
}

.uiaccountElement.medium .uiavatar {
    width: 40px;
    height: 40px;
    font-size: 20px;
}

.uiaccountElement.anchored {
    cursor: pointer;
}

.uiaccountElement.anchored .accountNameLabel {
    /*font-weight: 500;*/
    color: var(--primary);
}

.uiaccountElement.anchored:hover > .accountNameLabel {
    color: var(--csecondary);
}


/* MODAL */
#fullscreenModal.greyBg .modal-header,
#fullscreenModal.greyBg .modal-body {
    background-color: #FAFAFA;
}

#fullscreenModal.greyBg .modal-body .containerBloc {
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid var(--border-default);
    padding: 20px;
    position: relative;
    overflow: hidden;
}

#fullscreenModal.greyBg .modal-body .containerBloc h6 {
    display: inline-block;
    margin-bottom: 20px;
    font-size: 15px;
    font-weight: 500;
}

#fullscreenModal.greyBg .gradientFromRight {
    top: 0;
    right: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    height: 100%;
    position: absolute;
    width: 20px;
    z-index: 2;
}

/* UI CARD */

.uicard {
    padding: 20px;
    border-radius: 10px;
    border: 1px solid var(--border-default);
}

.uicard h6 {
    color: var(--csecondary);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 15px;
}

.uicard h5 {
    color: var(--primary);
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 15px;
}

/* Information banner */

.uiinformationBanner {
    border-radius: 6px;
    padding: 12px;
    background-color: var(--success-soft);
    color: var(--success-default);
    display: flex;
    gap: 5px;
    font-size: 15px;
    line-height: 17px;
}

.uiinformationBanner p {
    margin-bottom: 0;
}

.uiinformationBanner.neutral {
    background-color: var(--background-secondary);
    border: 1px solid var(--border-default);
    color: var(--csecondary);
}

.uiinformationBanner.withBorder {
    border: 1px solid #000;
}

.uiinformationBanner.smoothBlue {
    background-color: #D9ECFF;
    color: #00488A;
}

.uiinformationBanner.smoothOrange {
    background-color: #FDF2E4;
    color: #D16F1B;
}

.uiinformationBanner.smoothOrange.withBorder {
    border-color: var(--gm-orange-200);
}

.uiinformationBanner.smoothBlue.withBorder {
    border-color: var(--gm-blue-200);
}

.uiinformationBanner.smoothOrange a {
    color: #AD4424;
}
.uiinformationBanner.smoothOrange a:hover {
    color: #7c2409;
}

.uiinformationBanner.error {
    background-color: #ffdede;
    color: #dd3435;
}

/* UI EMPTY TABLE */

.uiemptyTable {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;

    padding: 30px 0;
    background-color: #fff;
}

.uiemptyTable .globalContent {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.uiemptyTable .textContainer {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    text-align: center;
}

.uiemptyTable .textContainer .titleLabel {
    font-weight: 500;
    color: var(--primary);
}

.uiemptyTable .actionsButtons {
    display: flex;
    flex-direction: row;
    gap: 15px;
}

/* Side container */
.uisideMainContainer {
    z-index: 299;
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* display: none; */
    transition: opacity 0.3s;
    opacity: 0;
}

.uisideMainContainer.displayed {
    display: block;
    /* z-index: 299; */
    opacity: 1;
    pointer-events: all;
}

.uisideMainContainer .bgOverlay {
    background-color: rgb(77 79 81 / 10%);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.uisideMainContainer .mainContainer {
    contain: strict;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.uisideMainContainer .panelContainer {
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(100%, 0);
    box-shadow: 0 5px 35px 0 rgba(0, 0, 0, 0.07), 0 15px 35px 0 rgba(60, 66, 87, 0.04), 0 50px 100px 0 rgba(60, 66, 87, 0.04);
    transition: transform 0.3s;
    transform-origin: left center;
    overflow: hidden;
    /*display: flex;*/
    /*flex-direction: column;*/
    outline: none;
    background-color: #fff;
    height: 100%;
}

.uisideMainContainer.displayed .panelContainer {
    transform: translate(0, 0);
}

/* TomSelect */

.uifield .ts-control,
.uifield .ts-wrapper.single.input-active .ts-control{
    height: 100%;
    padding: 0;
    border: none;
    background-color: transparent !important;
}

.uifield .ts-control input {
    color: var(--primary);
    font-weight: 400;
    /*background: url(../img/icons/icon-dropdown.svg) !important;*/
    /*background-color: #fff;*/
    /*background-repeat: no-repeat !important;*/
    /*background-size: 8px 5px !important;*/
    /*background-position-x: calc(100% - 5px) !important;*/
    /*background-position-y: calc(50%) !important;*/
}

.uifield.ts-wrapper:after {
    display: flex;
    align-items: center;
    justify-content: center;
    /*background-color: red;*/
    background-image: url('../img/icons/tomSelectorIcon.svg');
    background-position-x: 0px;
    content: "";
    height: 100%;
    position: absolute;
    right: 5px;
    top: 0;
    width: 40px;
    background-repeat: no-repeat;
    background-position: center;
    /*z-index: 2;*/
}

.uifield .ts-dropdown {
    box-shadow: var(--shadow-m);
    border: none;
    border-radius: 8px;
    color: var(--csecondary);
    font-family: 'Roboto', sans-serif;
}

.uifield .ts-dropdown-content {
    padding: 5px;
}

.uifield .ts-dropdown .option {
    border-radius: 6px;
}

.uifield .ts-dropdown .active {
    background-color: var(--background-secondary);
    color: var(--csecondary);
}

.uifield .ts-control .elementSelected {
    display: flex;
    align-items: center;
    font-weight: 400;
}

.uifieldContainer .ts-wrapper.multi .ts-control > div {
    margin: 2px 3px 2px 0;
    border-radius: 6px;
    padding: 2px 6px;
}

.uifieldContainer .ts-wrapper .ts-control > div.nbSelection {
    background-color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    font-weight: 400;
    font-family: -apple-system, "system-ui", Roboto, "Helvetica Neue", Ubuntu, sans-serif;
}

.uifield.plugin-clear_button .clear-button {
    color: var(--csecondary);
    right: 32px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    top: inherit; !important;
    transform: none !important;
}

.uifield.has-items.plugin-clear_button .clear-button {
    opacity: 1;
}

.uifield .clear-button svg {
    width: 18px;
}

.uifield .clear-button .icon {
    display: flex;
    align-items: center;
}

/* Radio */
.uiradio {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid var(--border-default);
    background-color: transparent;
    flex-shrink: 0;
}

.uiradio.active {
    border: 4.5px solid var(--primary);
}

/* Mini Tag */

.uiMiniTag {
    color: var(--csecondary);
    font-weight: 400;
    background-color: var( --background-tag);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    height: 16px;
    padding: 0 5px;
    border-radius: 8px;
    min-width: 20px;
    font-size: 11px;
    width: fit-content;
}

.uitabs .uiMiniTag {
    opacity: 0.8;
}

.uitabs li.active .uiMiniTag {
    opacity: 1;
}

.uiMiniTag.warning {
    background-color: var(--danger-default);
    color: #fff;
}

.uiMiniTag.success {
    background-color: var(--success-default);
    color: #fff;
}

/* Divider */

.uidivider {
    color: var(--disabled);
    /*border-bottom: 1px solid var(--border-default);*/
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    width: 100%;
}

.uidivider::before, .uidivider::after {
    flex: 1;
    content: '';
    padding: 0.5px;
    background-color: var(--border-default);
    /*margin: 0 8px;*/
}

.uidivider.withLabel::before {
    margin-right: 8px;
}

.uidivider.withLabel::after {
    margin-left: 8px;
}

/* Stores buttons */

.storeBtn {
    background-color: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    height: 52px;
    padding: 10px;
    cursor: pointer;
    outline: none !important;
    user-select: none;
    display: flex;
    align-items: center;
    -webkit-transition: color .1s, background-color .1s;
    transition: color .1s, background-color .1s;
}

.storeBtn:hover {
    background-color: #262626;
}

/* Dropdown menu */

.uiDropdownMenu {
    border: 0;
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 7px 14px 0 rgb(59 65 94 / 7%), 0 3px 6px 0 rgb(0 0 0 / 4%);
}

.uiDropdownMenu .dropdown-item {
    padding: .5rem 1.5rem;
    border-radius: 4px;
    font-size: 14px;
    line-height: 17px;
    user-select: none;
}

.uiDropdownMenu .dropdown-item.positiveAction {
    color: var(--success-default) !important;
}

.uiDropdownMenu .dropdown-item.negativeAction {
    color: var(--danger-default) !important;
}

.uiDropdownMenu .dropdown-item:hover, .uiDropdownMenu .dropdown-item:focus {
    color: #16181b;
    text-decoration: none;
    background-color: #f8f9fa;
}

.uiDropdownMenu .dropdown-divider {
    height: 0;
    margin: 0.5rem 0;
    overflow: hidden;
    border-top: 1px solid #e9ecef;
}

@media only screen and (max-width: 960px) {
    .uibtn.responsiveAdapted {
        border-radius: 8px;
        min-height: 32px;
        padding: 4px 8px;
    }
}