@import url("/OutSystemsUIWeb/Theme.BaseTheme.css?28701");

/* ===================================================================== */
/*  The following CSS was created using Theme Editor.                    */
/*  To modify this CSS, click "Open Theme Editor".                       */
/* ===================================================================== */

/* ===================================================================== */
/*  Root - CSS Variables                                                 */
/* ===================================================================== */

:root {
    /* Color - Brand */
    --color-primary: #d90cd9;
    --color-secondary: #d90cd9;

    --color-primary-hover: #a309a3;
    --color-primary-selected: rgba(217, 12, 217, .12);

    /* Color - Extended */
    --color-red-lightest: #faeaea;
    --color-red-lighter: #e9aaaa;
    --color-red-light: #d96a6a;
    --color-red: #c92a2a;
    --color-red-dark: #ab2424;
    --color-red-darker: #8d1d1d;
    --color-red-darkest: #6f1717;

    --color-pink-lightest: #fbebf0;
    --color-pink-lighter: #efadc4;
    --color-pink-light: #e27098;
    --color-pink: #d6336c;
    --color-pink-dark: #b62b5c;
    --color-pink-darker: #96244c;
    --color-pink-darkest: #761c3b;

    --color-grape-lightest: #f7ecfa;
    --color-grape-lighter: #dfb2e9;
    --color-grape-light: #c678d9;
    --color-grape: #ae3ec9;
    --color-grape-dark: #9435ab;
    --color-grape-darker: #7a2b8d;
    --color-grape-darkest: #60226f;

    --color-violet-lightest: #f1edfd;
    --color-violet-lighter: #c6b6f6;
    --color-violet-light: #9b7fef;
    --color-violet: #7048e8;
    --color-violet-dark: #5f3dc5;
    --color-violet-darker: #4e32a2;
    --color-violet-darkest: #3e2880;

    --color-indigo-lightest: #eceffd;
    --color-indigo-lighter: #b3c1f7;
    --color-indigo-light: #7b92f1;
    --color-indigo: #4263eb;
    --color-indigo-dark: #3854c8;
    --color-indigo-darker: #2e45a5;
    --color-indigo-darkest: #243681;

    --color-blue-lightest: #e8f2fa;
    --color-blue-lighter: #a3c9ea;
    --color-blue-light: #5fa1db;
    --color-blue: #1a79cb;
    --color-blue-dark: #1667ad;
    --color-blue-darker: #12558e;
    --color-blue-darkest: #0e4370;

    --color-cyan-lightest: #e7f2f4;
    --color-cyan-lighter: #9eccd3;
    --color-cyan-light: #56a6b2;
    --color-cyan: #0d8091;
    --color-cyan-dark: #0b6d7b;
    --color-cyan-darker: #095a66;
    --color-cyan-darkest: #074650;

    --color-teal-lightest: #e6f2ef;
    --color-teal-lighter: #9cccbd;
    --color-teal-light: #52a58c;
    --color-teal: #087f5b;
    --color-teal-dark: #076c4d;
    --color-teal-darker: #065940;
    --color-teal-darkest: #044632;

    --color-green-lightest: #ebf7ed;
    --color-green-lighter: #afe0b8;
    --color-green-light: #73c982;
    --color-green: #37b24d;
    --color-green-dark: #2f9741;
    --color-green-darker: #267d36;
    --color-green-darkest: #1e622a;

    --color-lime-lightest: #f1f8e8;
    --color-lime-lighter: #c7e3a2;
    --color-lime-light: #9ecd5c;
    --color-lime: #74b816;
    --color-lime-dark: #639c13;
    --color-lime-darker: #51810f;
    --color-lime-darkest: #40650c;

    --color-orange-lightest: #fef0e6;
    --color-orange-lighter: #fcc29c;
    --color-orange-light: #f99551;
    --color-orange: #f76707;
    --color-orange-dark: #d25806;
    --color-orange-darker: #ad4805;
    --color-orange-darkest: #883904;

    --color-yellow-lightest: #fef5e5;
    --color-yellow-lighter: #fbd999;
    --color-yellow-light: #f8bc4c;
    --color-yellow: #f59f00;
    --color-yellow-dark: #d08700;
    --color-yellow-darker: #ac6f00;
    --color-yellow-darkest: #875700;

    /* Color - Neutral */
    --color-neutral-0: #ffffff;
    --color-neutral-1: #f8f9fa;
    --color-neutral-2: #f1f3f5;
    --color-neutral-3: #e9ecef;
    --color-neutral-4: #dee2e6;
    --color-neutral-5: #ced4da;
    --color-neutral-6: #adb5bd;
    --color-neutral-7: #868e96;
    --color-neutral-8: #5c656d;
    --color-neutral-9: #343a40;
    --color-neutral-10: #15181a;

    /* Color - Semantic */
    --color-error-light: #fceaea;
    --color-error: #e03131;

    --color-warning-light: #fdf6e5;
    --color-warning: #e9a100;

    --color-success-light: #eaf3eb;
    --color-success: #2a843c;

    --color-info-light: #e5f5fc;
    --color-info: #009dde;

    /* Elevation / Shadow */
    --shadow-none: none;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .1);
    --shadow-s: 0 2px 4px rgba(0, 0, 0, .1);
    --shadow-m: 0 4px 6px rgba(0, 0, 0, .1);
    --shadow-l: 0 6px 8px rgba(0, 0, 0, .1);
    --shadow-xl: 0 8px 10px rgba(0, 0, 0, .1);

    /* App Settings */
    --color-background-body: #222222;
    --header-color: #444444;
    --side-menu-size: 300px;
}

/* ===================================================================== */
/*  Box-Shadow                                                           */
/* ===================================================================== */

.Button, 
.btn, 
.input,
.accordion,
.alert,
.card,
.tag,
.select,
.toggle-button,
.file-upload,
.chat-message-content, 
.choices__inner,
.modal-wrapper,
.button-group,
.pika-single,
.dropdown,
.dropdown-content-list,
.layout-login-form,
.tippy-popper .tooltip,
.tippy-tooltip.light-theme,
.floating-actions-button, 
.ListNavigation_Wrapper .ListNavigation_DisabledPrevious, 
a.ListNavigation_Next, 
.ListNavigation_Wrapper a, 
.ListNavigation_CurrentPageNumber, 
.TableRecords, 
.EditableTable {
    box-shadow: var(--shadow-m);
}

.card .card,
.animated-label.animated-label-inline input {
    box-shadow: var(--shadow-none);
}

/* ===================================================================== */
/*  Dark Theme CSS                                                       */
/* ===================================================================== */

a,
a:visited,
body,
.select,
.pika-button,
.input::placeholder,
.fieldset-legend,
.section-index a,
.search-balloon a,
.content-top-title,
[class*='heading'],
.font-size-display,
.animated-label-text,
.tabs-header-item.active,
.navigation-bar-item-title,
.navigation-bar a, 
.navigation-bar a:visited,
.ListNavigation_CurrentPageNumber,
.dropdown .dropdown-content .dropdown-content-list a {
    color: #fff; 
}

a:hover,
.tabs-header-item,
.section-index a:hover,
.navigation-bar-item-title:hover,
.navigation-bar-item.is--active .navigation-bar-item-title {
    color: var(--color-neutral-7);
}

.tabs-header-item:hover {
    color: var(--color-neutral-5);
}

.wizard-item-icon {
    background-color: var(--color-neutral-9);
    color: var(--color-neutral-5);
}

.input:focus, 
.textarea:focus, 
.select:focus,
.choices.is-open.is-focused .choices__inner {
    border: var(--border-size-s) solid var(--color-neutral-7);
}

.animated-label-inline .input {
    border-color: #fff;
}

.animated-label-inline .input:focus,
.layout .Form .animated-label-inline .input.ReadOnly:not(.Not_Valid):focus {
    border-bottom: var(--border-size-s) solid #fff;
} 

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
}

.TableRecords .TableRecords_OddLine, 
.TableRecords .TableRecords_EvenLine {
    background-color: rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.TableRecords_Label {
    color: var(--color-neutral-7);
}

a.ListNavigation_Next,
a.ListNavigation_Previous,
.ListNavigation_PageNumber, 
.TableRecords .TableRecords_Header, .EditableTable thead th {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.card,
input,
.input,
.select,
.accordion,
textarea.input,
.choices__inner,
.layout-login-simple .layout-login-form {
    border-color: var(--color-background-body);
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.card .card {
    background-color: transparent;
}

.pika-single,
.file-upload,
.dropdown .dropdown-header {
    border: none;
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.search-balloon-answers,
.tippy-tooltip.light-theme .tippy-backdrop,
.dropdown .dropdown-content .dropdown-content-list {
    background-color: var(--color-background-body);
    border-color: var(--color-primary);
}

.choices__list--single .choices__item {
    color: #fff;
    background-color: transparent;
}

.select option,
.modal-wrapper, 
.choices__list--dropdown,
.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: var(--color-background-body);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;  
}

.accordion-item {
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;  
}

.time-option-selected,
.toggle-button:not(.toggle-button-checked):hover, 
.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: rgba(255, 255, 255, 0.2);
}

.search--wrapper input {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.1);
}

.search--wrapper input:focus {
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.toggle-button.toggle-button-disabled {
    background-color: rgba(255, 255, 255, 0.5);
}

.tooltip,
.progress,
.toggle-button,
.pika-button:hover,
.search-balloon a:hover, 
.range-slider .noUi-target,
.wizard-item.active .wizard-item-icon,
.dropdown .dropdown-content .dropdown-content-list a:hover {
    background-color: rgba(255, 255, 255, 0.1); 
}

.tippy-tooltip.light-theme,
.tippy-tooltip.dark-theme {
    background-color: var(--color-background-body);
    border-color: rgba(255, 255, 255, 0.1);
    color: #fff;  
}

.tooltip-container .tippy-tooltip.light-theme,
.tooltip-container .tippy-tooltip.dark-theme {
    border-color: var(--color-background-body);
}

.only-balloon .tippy-popper[x-placement^=left] .tippy-tooltip.light-theme .tippy-arrow,
.only-balloon .tippy-popper[x-placement^=left] .tippy-tooltip.dark-theme .tippy-arrow {
    border-left: 8px solid transparent;
}

.only-balloon .tippy-popper[x-placement^=top] .tippy-tooltip.light-theme .tippy-arrow,
.only-balloon .tippy-popper[x-placement^=top] .tippy-tooltip.dark-theme .tippy-arrow {
    border-top: 8px solid transparent;
}

.only-balloon .tippy-popper[x-placement^=right] .tippy-tooltip.light-theme .tippy-arrow,
.only-balloon .tippy-popper[x-placement^=right] .tippy-tooltip.dark-theme .tippy-arrow {
    border-right: 8px solid transparent;
}

.only-balloon .tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme .tippy-arrow,
.only-balloon .tippy-popper[x-placement^=bottom] .tippy-tooltip.dark-theme .tippy-arrow {
    border-bottom: 8px solid transparent;
}

.tippy-popper[x-placement^=left] .tippy-tooltip.light-theme .tippy-arrow:before,
.tippy-popper[x-placement^=left] .tippy-tooltip.dark-theme .tippy-arrow:before {
    border-left: 8px solid rgba(255, 255, 255, 0.1);
    right: -1px;
}

.tippy-popper[x-placement^=top] .tippy-tooltip.light-theme .tippy-arrow:before,
.tippy-popper[x-placement^=top] .tippy-tooltip.dark-theme .tippy-arrow:before {
    border-top: 8px solid rgba(255, 255, 255, 0.1);
    bottom: -1px;
}

.tippy-popper[x-placement^=right] .tippy-tooltip.light-theme .tippy-arrow:before,
.tippy-popper[x-placement^=right] .tippy-tooltip.dark-theme .tippy-arrow:before {
    border-right: 8px solid rgba(255, 255, 255, 0.1);
    left: -1px;
}

.tippy-popper[x-placement^=bottom] .tippy-tooltip.light-theme .tippy-arrow:before,
.tippy-popper[x-placement^=bottom] .tippy-tooltip.dark-theme .tippy-arrow:before {
    border-bottom: 8px solid rgba(255, 255, 255, 0.1);
    top: -1px;
}

.button-group input[type='radio']:checked + .btn {
    background-color: rgba(255, 255, 255, 0.1);
}

.button-group .btn {
    background-color: transparent;
}

/* Header Color */

.layout .header {
    background-color: var(--header-color);
}

.header,
.header-right,
.header a,
.header .Menu_TopMenu > div a {
    color: #fff;
}

.header-right a,
.header a,
.header .Menu_TopMenu > div a {
    opacity: 0.8;
}

.header a:hover,
.Menu_TopMenu > div a:hover,
.header .Menu_TopMenu:hover,
.Menu_TopMenu:hover > div a,
.Menu_TopMenuActive > div a:hover, 
.Menu_TopMenu:hover.Menu_TopMenuActive > div a {
    color: #fff;
    opacity: 1;
}

.phone .header .Menu_TopMenu > div a,
.tablet .header .Menu_TopMenu > div a  {
    color: #000;
}

.phone .header .Menu_TopMenu:hover,
.tablet .header .Menu_TopMenu:hover,  
.phone .header .Menu_TopMenu.Menu_TopMenuActive,
.tablet .header .Menu_TopMenu.Menu_TopMenuActive {
    border-bottom: var(--border-size-m) solid #000;
}
.btn,
.Button {
    color: var(--color-primary);
}

.tag,
.badge,
.btn.Is_Default, 
.Button.Is_Default {
    color: #fff;
}