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

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

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

:root {
    /* Color - Brand */
    /* Border Radius */
    --border-radius-none: 0;
    --border-radius-soft: 4px;
    --border-radius-rounded: 100px;
    --border-radius-circle: 100%;

    /* Border Size */
    --border-size-none: 0;
    --border-size-s: 1px;
    --border-size-m: 2px;
    --border-size-l: 3px;

    /* 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 */
    --side-menu-size: 300px;
}

/* ===================================================================== */
/*  Border-Radius                                                        */
/* ===================================================================== */

.Button, 
.btn, 
.input,
.select,
.alert,
.card,
.tag,
.select,
.checkbox:before,
textarea.input,
.pika-single,
.toggle-button,
.toggle-button:after,
.is-focused .choices__inner,
.is-open .choices__inner, 
.choices__inner,
.modal-wrapper,
.file-upload,
.TableRecords, 
.EditableTable, 
.app-logo,
.input-with-icon,
.tippy-popper .tooltip,
.chat .chat-message-content,
.accordion-item:first-child,
.accordion-item:last-child,
.tippy-tooltip,
.layout-login-simple .layout-login-form,
.choices__list.choices__list--dropdown, 
.choices.is-open.is-focused .choices__inner,
.dropdown .dropdown-content .dropdown-content-list,
.ListNavigation_Wrapper .ListNavigation_DisabledPrevious, 
a.ListNavigation_Next, 
.ListNavigation_Wrapper a, 
.ListNavigation_CurrentPageNumber,
.dropdown {
    border-radius: var(--border-radius-none);
}

.button-group label:last-child .btn,
.button-group label:first-child .btn {
    border-radius: var(--border-radius-none);
}

.button-group > div:last-child .btn,
.button-group > div:first-child .btn {
    
}

.phone .button-group label:first-child .btn,
.phone .button-group label:last-child .btn {
    border-radius: var(--space-none);
    border-top-left-radius: var(--border-radius-none);
    border-top-right-radius: var(--border-radius-none);
}


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

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

Primary color customization
For additional color customizations, you can change the color code for the colors below

  ================================================ */
  
:root {
    --color-primary: #3e87f2; /*primary-color*/
    --color-primary-hover: #3e87f2; /*primary-color*/
    --color-secondary: #3e87f2; /*primary-color*/
    --color-primary-font: #f6f3ed /*primary-font-color*/
}




.Menu_TopMenuActive > div a, .Menu_TopMenuActive > div a:visited, .Menu_TopMenuActive > div a:hover, .Menu_TopMenu:hover.Menu_TopMenuActive > div a {
    color: var(--color-primary-font);
    font-weight: var(--font-semi-bold);
}
.colorFromApi{
    
}

.navigation .Menu_TopMenu.Menu_TopMenuActive .fa {
    color: white;
}

.tablet .layout-top .is--visible .Menu_TopMenus, .phone .layout-top .is--visible .Menu_TopMenus, .tablet .layout-side .is--visible.navigation, .phone .layout-side .is--visible.navigation {
    transform: translateX(100%);
    background-color: var(--color-primary);
}


.navigation-menu {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    background-color: var(--color-secondary);
    color: var(--color-primary-font);
    flex: 1;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    padding: var(--space-s);
}
.Menu_TopMenu .fa, .Menu_DropDownPanel .fa {
    color: var(--color-primary-font);
    font-size: var(--font-size-h6);
    margin-right: var(--space-s);
    margin-top: var(--space-xs);
    text-align: left;
    width: 20px;
}

.Menu_TopMenu > div a, .Menu_TopMenu > div a:visited {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: var(--color-primary-font);
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-weight: var(--font-regular);
    height: 100%;
}
.layout .header {
    /* color: CADETBLUE; */
    background-color: var(--color-secondary);
    box-shadow: 0 1px 5px 0 rgba(21, 24, 26, .1);
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 100;
}

.navigation .Menu_TopMenu.Menu_TopMenuActive {
    background:  var(--color-secondary) var(--color-secondary-lightest);
}


.ListNavigation_CurrentPageNumber {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: var(--color-secondary) var(--color-secondary-lightest);
    border-radius: var(--border-radius-soft);
    border: var(--border-size-s) solid var(--color-neutral-4);
    color: white;
    cursor: pointer;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-weight: var(--font-regular);
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-left: var(--space-s);
    height: 32px;
    width: 32px;
    padding: var(--space-none);
    text-align: center;
}