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

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

/*  The following CSS was created using Theme Editor.                    */

/*  To modify this CSS, click "Open Theme Editor".                       */

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



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

/*  Root - CSS Variables                                                 */

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



:root {

    /* Color - Brand */

    --color-primary: #efa732;

    --color-secondary: #efa732;



    --color-primary-hover: #b37d26;

    --color-primary-selected: rgba(239, 167, 50, .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 */

    --side-menu-size: 300px;

}



.btn,

.Button {

    color: var(--color-primary);

}



.tag,

.badge,

.btn.Is_Default, 

.Button.Is_Default {

    color: #fff;

}

body {   
    font-family: 'Fira Sans', sans-serif;
    color: var(--color-secondary);
}
:root {
    --color-background-body: #FFFFFF;
    --color-primary: #326AAA;   
    --color-primary-hover: #00AE9D;   
    --color-secondary: #131E55;
}

/* For Layout "Top" use position: relative, and for LeftMenu use position: fixed*/
.layout .header {   
    position: relative;  
}
.layout .main {
    --header-gutter: 0px;
}

.banner {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.image-with-text {
    position: relative;
}
.image-with-text > .text-overlay {
    position: absolute;
    top: 30px;
    left: 30px;
}
.text-banner {
    position: absolute;
    top: 35%;
    left: 18%;
    color: #FFFFFF;
    text-align: center;
    /*text-shadow: 0px 2px 2px rgb(0 0 0 / 25%);*/
    /*text-shadow: 0px 2px 8px rgb(0 0 0/ 100%);*/
    /*font-weight: bold;*/
}
.footer {
    text-align: center;
}
.footer > img {
    max-height: 80px;
}
input.Button {
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    text-transform: uppercase;
    border-radius: 100px;
    box-shadow: none;
    text-shadow: none;  
    background-color:#fff; 
    border: 1px solid #2796c7;
    padding: 9px 20px;
    margin-top: 0px;
}
input.Button:disabled {
    color: #ccc;
    border-color: #ccc;
}
input.Button:hover:disabled {
    color: #ccc;
    border-color: #ccc;
}
input.Button.Is_Default {
    color: #fff;
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    padding: 9px 20px;
    margin-top: 0px;
}
input.Button.Is_Default:hover {
    color: #fff;
    background: var(--color-primary-hover);
    border: 1px solid var(--color-primary-hover);
}

.DropArea {
    min-height: 50px;
    border: 1px dashed gray;
}

.qq-upload-drop-area {
    top: -15px;
    min-height: 48px;
}

.TableRecordsNoHeader{
display: none;
}

.tabs-header-item.active {
    border-bottom: var(--border-size-m) solid var(--color-secondary);
    color: var(--color-secondary);
    font-weight: var(--font-semi-bold);
}

.header .Menu_TopMenu:hover,
.header .Menu_TopMenu.Menu_TopMenuActive {
    border-bottom: var(--border-size-m) solid var(--color-primary-hover);
    font-weight: var(--font-semi-bold);
}

/* Change width of the sideMenu */
.columns.columns-small-left > .columns-item:last-child{
    -webkit-box-flex: 4;
            -ms-flex: 4;
                flex: 4;
}

/*Tooltip full with input field*/
.tooltipfullWidth { 
    width: 100%; 
}
.tooltip {
    background-color: #326AAA;
}
.tippy-content{
    width: 250px;
}

.tooltip-container{
    display: block;
}

/*Horizontal scroll*/
.scrollable_Table{
    overflow-x: scroll;
    overflow-y: hidden;
}

.container_MaxWidth{
    max-width: 1125px;
}

.defaultHeaderSort{
   color: #5c656d !important;
}

.selectedHeaderSort{
    color:#326AAA;
}

.selected
{
    background-color:  var(--color-blue-lighter);
}

.disabled
{
    color: #ccc !important;
    border-color: #ccc !important;
}

.paginationButton{
    border-radius: 100px;
    padding: 9px 20px 9px 20px;
    width: 50px;
    height: 40px;
    margin-left: 0px;
    border-color: #2797c7;
}

.currencyClass{
    text-align: left !important;
}

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

.linkNotAvailable{
    color: var(--color-neutral-7);
}
.linkActive:active {
    text-decoration: underline;
    color: red;
}

.centerItemsInContainer{
    align-items: center;
    display: flex;
    justify-content: center;
}
.centerTextWithCheckboxOrRadio{
    align-items: center;
    display: inline-flex;
}

.text-primary-hover { color: var(--color-primary-hover); }

.navigation-bar-item.is--active .navigation-bar-item-title a {
    color: var(--color-secondary);
    font-weight: var(--font-semi-bold);
}

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

/*Vertical menu change border and color*/
/******************************************************************/
.verticalMenu{
    padding: var(--space-m) var(--space-m) var(--space-m) 0px;
}

/*adding border left*/
.navigation-bar-item.is--active .navigation-bar-item-title {
    color: var(--color-neutral-9);
    font-weight: var(--font-semi-bold);
    border-left: solid var(--color-primary-hover);
}

/*Submenu 4cp active*/
/*Submenu item active color*/
.submenu4cp .navigation-bar-item.is--active .navigation-bar-item-title span {
    color: var(--color-primary-hover);
    border-left: none;
}

/*When submenu is not active no color and no border left*/
.submenu4cp .navigation-bar-item.is--closed .navigation-bar-item-title {
    border-left: none;
}

/*Adding margin left for text*/
.navigation-bar-item.is--active .navigation-bar-item-title a {
    color: var(--color-secondary);
    font-weight: var(--font-semi-bold);
    margin-left: var(--space-m);
}

.navigation-bar a, .navigation-bar a:visited {
    display: flex;
    margin-left: var(--space-m);
}

/*When open navigation sub menu item*/
.navigation-bar-item.is--open .navigation-bar-item-title a {
    font-weight: var(--font-regular);
    color: var(--color-neutral-8);
}
/*navigation bar item content*/
.navigation-bar-item-content {
    padding-left: 0;
}
/******************************************************************/

/*Listrecords Request Info margin*/
.requestInfo ul{
    margin-block-start: auto;
}

/*LandingPage border card*/
.landingPage{
    border: none;
}

/*H1 text banners*/
.textBanner{
    font-weight: var(--font-regular);
}

/*Banner*/
.modal-wrapper {
    max-height: none;
    overflow: visible;
    align-self: center;
}

.internal-model .modal-content {     overflow-y: auto;     max-height: 80vh; }


/*Dropdown language selecter styling*/
.dropdown .dropdown-header {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-image: none;
    cursor: pointer;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    height: 25px !important;
}

.dropdownCustom{
    width: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*Styling for a link like a button*/
.linkStylingLikeButton{
    background-color: var(--color-primary);
    border-radius: 100px;
    color: white;
    padding: 0px 10px 0px 10px;
}
.linkStylingLikeButton:visited{
    background-color: var(--color-primary);
    border-radius: 100px;
    color: white;
    padding: 0px 10px 0px 10px;
}
.linkStylingLikeButton:hover{
    background-color:var(--color-primary-hover);
    border-radius: 100px;
    color: white;
    padding: 0px 10px 0px 10px;
}
.linkStylingLikeButton[disabled="disabled"]{
    background-color: var(--color-neutral-2);;
    border-radius: 100px;
    color: var(--color-neutral-6);;
    padding: 0px 10px 0px 10px;
    border: 1px solid var(--color-neutral-4);
}

@media only screen and ((min-width: 800px)) {
    .menuMobile .accordion-item .accordion-item-header  {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        cursor: pointer;
        display: -webkit-box;
        display: -ms-flexbox;
        display: none;
        font-size: var(--font-size-h6);
        padding: var(--space-m);
    }
    .menuMobile .accordion-item.is--open .accordion-item-header {
        font-weight: var(--font-semi-bold);
        display: none;
    }
    .menuMobile .accordion-item .accordion-item-content.is--expanded {
        height: auto;
        padding: 0;
        visibility: visible;
    }
    .menuMobile .accordion-item.is--open {
        border-top: none;
    }
    
    .menuMobile .accordion-item {
        border: none;
    }
}

/*Union switch card*/
.cardSwitchUnion .card {
    background-color: var(--color-neutral-0);
    border-radius: var(--border-radius-soft);
    border:none;
    padding: var(--space-m);
}

.switchUnion{
    width: max-content;
}

.unionSwitchContainer:hover{
    border-color: var(--color-primary-hover) 2px solid;
}

.switchUnionLink:hover{
    border-bottom: var(--color-primary-hover) 2px solid;
    padding-bottom: 5px;
}

/*Pagination style mass assu*/
a.ListNavigation_Previous, a.ListNavigation_Next, span.ListNavigation_DisabledPrevious, span.ListNavigation_DisabledNext {
    font: normal normal normal 0 FontAwesome !important; 
}
a.ListNavigation_PageNumber, span.ListNavigation_CurrentPageNumber, span.ListNavigation_Ellipsis, a.ListNavigation_Previous, a.ListNavigation_Next {
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    text-transform: uppercase;
    border-radius: 100px;
    box-shadow: none;
    text-shadow: none;
    background-color: #fff;
    border: 1px solid #2796c7;
    padding: 9px 20px;
    margin-top: 0px;
}

span.ListNavigation_CurrentPageNumber {
    font-weight: var(--font-regular);
    color: #ccc;
    border-color: #ccc;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    text-transform: uppercase;
    border-radius: 100px;
    box-shadow: none;
    text-shadow: none;
    background-color: #fff;
    padding: 9px 20px;
    margin-top: 0px;
}

span.ListNavigation_DisabledPrevious, span.ListNavigation_DisabledNext {
    font-weight: var(--font-regular);
    color: #ccc;
    border-color: #ccc;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    text-transform: uppercase;
    border-radius: 100px;
    box-shadow: none;
    text-shadow: none;
    background-color: #fff;
    padding: 9px 20px;
    margin-top: 0px;
}

/*Alert message custom styling*/
.messageInfo .background-info {
    background-color: var(--color-primary-hover);
}

.messageInfo .alert-message {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-size: 14px;
    font-weight: 450;
}

/********************************************************************
                    Mobile version
********************************************************************/

/*Checkbox mobile version*/
@media only screen and ((max-width: 800px)) {
    .checkboxMobile{
        margin: 0 !important;
        width: 20% !important;
    }
    .checkboxMobileText{
        width: 80% !important;
    }
    .ContainerYearPickerAndBankaccount{
        flex-direction: column !important;
    }
    .yearPickerMobileRight{
        width: 40% !important;
        margin-right: 0 !important;
    }
    .yearPickerMobileLeft{
        width: 40% !important;
        margin-left: 0 !important;
    }
    .yearPickerMobile{
        display: flex !important;
    }
    .headerNotMobile{
        display: none !important;
    }
    .headerMobile{
        position: initial !important;
    }
    .bannerMobile{
        display: none !important;
    }
    .permissionsModule .columns-item {
        width: 50% !important;
    }
    .LanguageMobile{
        display: flex;
        margin-bottom: 20px;
        margin-top: 10px;
    }
    .mobileLanguageDropdown{
        width: 280px !important;
        margin-right: 10px;
    }
    .LogoutLanguageMobileContainer{
        margin-top: 80px;
    }
}

@media only screen and ((min-width: 800px)){
    .headerMobile{
        display: none !important;
    }
    .permissionsModule .columns:only-child > .columns-item {
        margin-bottom: var(--space-l) !important;
    }
    .LogoutLanguageMobileContainer{
        display: none !important;
    }   
}