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

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

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

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

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



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

/*  Root - CSS Variables                                                 */

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



:root {

    /* Color - Brand */

    --color-primary: #005cab;

    --color-secondary: #005cab;



    --color-primary-hover: #194580;

    --color-primary-selected: rgba(0, 92, 171, .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;

}

/* ===================================================================== */
/* ===================================================================== */
/*  $0 - Root - CSS Variables                                            */
/*  $4 - Patterns                                                        */
/*       $4.2 - Patterns - Controls                                     */
/*  $5 - Widgets & RichWidgets                                           */
/*       $5.1 - Widgets - Form / EditRecord                              */
/*       $5.2 - Widgets - TableRecords / EditableTable     
/*       $5.7 - RichWidgets - PopupEditor                                */
/*  $$ - Generic                                                         */


/* ===================================================================== */
/*  $0 - Root - CSS Variables                                            */
/* ===================================================================== */
:root {
   /*--side-menu-size: 160px;*/

    /* Color - Neutral */
    --color-neutral-9: #272B30;
    --color-neutral-5:#CED4DA;

    /* App Settings */
    --header-search-color:#6A7178;
    --side-menu-size: 250px;
    --bluprint-dark-color:#015CAA;
    --bluprint-gray-color:#5C6A72;
    --bluprint-lightblue-color:#00B3F0;
    --layout-modal-bg: #ffffff;

}
.blueprint-grey-bg{
    background: var(--bluprint-gray-color);
}
/* ================================================================ */
/*  $1 - Resets                                                     */
/* ================================================================ */
html {
    color: --color-neutral-9;
}

.fa {
    color: var(--color-neutral-8);
}

.Button.background-neutral-8 .fa,
.background-success .fa,
.background-warning .fa,
.background-success,
.background-warning,
.Button.Is_Default .fa,
.Button.background-error .fa {
    color: var(--color-neutral-0);
}

.Button .fa:last-child {
    padding-left: var(--space-none);
}

.fa-expand {
    width: 24px;
    height: 24px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
    color: #fff;
    border-radius: 50%;
    font-size: 12px;
}

.avatar-group {
    display: flex;
    flex-wrap: wrap;
}

.avatar-group .UserInitials.avatar {
    margin-right: var(--space-s);
    width: 24px;
    height: 24px;
}

.avatar-group .user-avatar-small {
    margin-right: var(--space-s);
}

.row-txt-trim {
    white-space: normal;
    display: block;
}
/* ================================================================ */
/*  $2 - HTML Elements                                              */
/* ================================================================ */
/* $2.1 - HTML Elements - Links */
a, a:visited, a:hover{
    color:var(--color-blue)
}

/* $2.4 - HTML Elements - Inputs and Selectors */
label {
    font-weight: bold;
    margin-bottom: var(--space-xs);
}

.select {
    background-position: center right 16px;
    background-size: 10px 4px;
}

/* ================================================================ */
/*  $3.1 - Page Layout - Header                                     */
/* ================================================================ */
.header-top .only-balloon{
    color: var(--color-neutral-9);
}

.header-top .font-bold {
    font-weight: var(--font-semi-bold);
}

.navigation-top .borderleft {
    width: 100%;
    text-align: center;
}

.navigation-top{
    padding: var(--space-none) var(--space-m);
    display: flex;
    align-items: center;
}

.navigation-top img {
    max-width: 105px !important;
    width: auto !important;
}

.navigation-menu {
    padding: var(--space-none);
}

.navigation-menu a,
.navigation-bottom a {
    border-left: 2px solid transparent;
    color:var(--color-neutral-9);
    display: block;
    padding: var(--space-s) var(--space-base);
}

.navigation-menu a .fa,
.navigation-bottom a .fa {
    margin-right: var(--space-s);
    color: inherit;
}

.navigation-menu .margin-top-base {
    margin-top: var(--space-none);
}

.navigation-menu a:hover,
.navigation-bottom a:hover{
    background: var(--color-neutral-2);
    color: var(--bluprint-dark-color);
}
.navigation-menu a.active,
.navigation-bottom a.active {
    border-left: 2px solid var(--bluprint-dark-color);
    color:var(--bluprint-dark-color);
}

.navigation-bottom {
    padding: var(--space-none);
}

.header-searchbox input {
    border-color:var(--color-neutral-5);
    color:var(--header-search-color);
}

.header-container-flex {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row-reverse !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
}

.header-small-items {
    line-height: var(--space-none) !important;
}

.header-logininfo {
    max-width: 200px;
    margin-left: var(--space-s);
}

.header-logininfo .only-balloon > div > div {
    display: flex;
    align-items: center;
}

.header-center .fa-question-circle {
    font-size: 20px;
    width: auto;    
}

.only-balloon .text-secondary{
    margin-left: var(--space-s);
    color: var(--color-neutral-9);
    font-weight: var(--font-regular);
}

.only-balloon .fa-chevron-down {
    width: auto;
    margin: 0 0 0 var(--space-s);
}

.header-searchbox {
    width: 350px;
    margin-right: var(--space-s) !important;
}

.header-center{
    flex-direction: row-reverse !important;
    padding: var(--space-s) var(--space-s);
}

.header-center .header-small-items a{
    margin-left: var(--space-s);
    width: auto;
    height: 20px;
    display: block;
}

.header-center .header-small-items a img {
    max-width: 100%;
    max-height: 100%;
}

.layout-side .header .ThemeGrid_Container {
    padding-left: var(--space-xs);
    padding-right: 0%;
}

.header-top {
    height: var(--header-size);
}


/* ================================================================ */
/*  $3.3 - Page Layout - Content                                    */
/* ================================================================ */
.layout.layout-side .main{
    width: calc(100% - var(--side-menu-size));
}
.layout-side .content .ThemeGrid_Container {
    padding:var(--space-l) var(--space-base);
    width: 100%;
}

.content-top .content-top-title,
.content-top .content-top-actions {
    margin: var(--space-none);
}



/* ================================================================ */
/*  $4 - Patterns                                                   */
/* ================================================================ */

/* ================================================================ */
/*  $4.1 - Patterns - Content                                       */
/* ================================================================ */
/* $4.1.1 - Patterns - Content - Accordion */
.accordion-item:last-child{
    border-radius: 0;
}
.accordion-item .accordion-item-icon{
    color: var(--bluprint-dark-color);
}
.accordion-item.is--open {
    border-color: var(--bluprint-dark-color);
}

.accordion-item-title .btn-save {
    font-size: 14px;
}

.edit-accordion-title .fa {
    font-size: var(--font-size-h6);
}

.shared-detail-action-group{
    display: flex;
    margin-bottom: var(--space-base);
}

.shared-detail-action-group .action-user-wrapper,
.shared-detail-action-group .action-btn-wrapper{
    flex-grow: 1;
    align-items: center;
    display: inline-flex;
}
.action-user-wrapper .user-name{
    margin-right: var(--space-s);
}

.action-user-wrapper .user-name+a{
    font-size: var(--font-size-xs);
}

.btn .fa-fw {
    font-size: var(--font-size-xs);
    vertical-align: middle;
    margin-right: var(--space-s);
}

.btn .fa-share-alt {
    margin-right: var(--space-none);
    margin-left: var(--space-s);
}

.action-btn-wrapper{
    display: flex;
    justify-content: flex-end;
}

.shared-detail-action-group .user-name {
    color: var(--color-neutral-9);
    font-size: var(--font-size-h6);
    font-weight: 500;
}
.shared-detail-wrapper {
    display: flex;
    justify-content: space-between;
}

.list-group .list-item{
    display: block;
    padding: var(--space-s) var(--space-base);
    color: var(--color-neutral-9);
}

.list-group .list-item:hover{
    background: var(--color-neutral-2);
    color: var(--bluprint-dark-color);
}

.shared-detail-wrapper .list-group {
    margin-top: var(--space-s);
    overflow: auto;
    max-height: 350px;
}
.shared-detail-wrapper .list-group .list-item{
    padding: var(--space-s) var(--space-none);
    line-height: normal;
}
.shared-detail-wrapper .list-group .list-item:hover{
    background: transparent;
    color: var(--color-neutral-9);
}

.user-list-wrapper .list-item>.OSInline{
    display: block;
}

.avatar-wrapper {
    line-height: normal;
    display: flex;
    align-items: center;
}
.avatar-wrapper .avatar {
    border: 1px solid var(--color-neutral-4) !important;
    vertical-align: middle;
    margin-right: var(--space-s);
    flex-basis: 24px;
    flex-grow: 0;
    flex-shrink: 0;
}

.avatar-wrapper .remove-item .fa-fw {
    margin-left: var(--space-s);
}

.avatar-name.txt-trim {
    white-space: nowrap;
}

.remove-item {
    color: var(--color-neutral-9);
}

.remove-item .fa-fw {
    margin-right: var(--space-s);
    width: auto;
    font-size: var(--font-size-s);
    vertical-align: middle;
}

.action-btn-wrapper > .OSInline {
    display: inline-flex;
}

.shared-user {
    display: flex;
    white-space: nowrap;
    margin-left: var(--space-s);
    align-items: center;
}

.action-btn-wrapper .avatar {
    margin-left: var(--space-s);
}

/* $4.1.3 - Patterns - Content - Balloon */

/* Header: Tippy */
.header-top .tippy-popper{
    width: 240px;
}

.header-top .tippy-content{
    flex-grow: 1;
    text-align: left;
}

.header-top .balloon-content{
    padding: var(--space-none);
}

.header-top .ListRecords a{
    display: block;
    padding: var(--space-s) var(--space-base);
    color: var(--color-neutral-9);
}

.header-top .ListRecords a:hover{
    background: var(--color-neutral-2);
    color: var(--bluprint-dark-color);
}

.header-top .ListRecords a .fa-fw{
    width: auto;
    font-size: var(--font-size-xs);
    vertical-align: middle;
}

.table-scroll {
    display: block;
    width: 100%;
    table-layout: fixed;
    overflow: auto;
}

.popover .ico-ellipsis {
    background: var(--bluprint-dark-color);
    color: #fff;
    border-radius: var(--border-radius-soft);
    text-align: center;
    width: var(--space-xl);
    height: var(--space-xl);
    justify-content: center;
    display: flex;
    align-items: center;
}

.popover .fa-ellipsis-v {
    color: inherit;
}

.popover .tippy-popper {
    max-width: max-content;
}

.popover .tippy-popper .tippy-tooltip {
    overflow-x: hidden;
}

.popover .tippy-popper .balloon-content {
    padding: var(--space-none);
}
.popover .tippy-popper .list-group-item {
    margin: var(--space-none);
}

.popover .tippy-popper .list-group-item a {
    color: var(--color-neutral-9);
    display: block;
    padding: var(--space-s);
}

.popover .tippy-popper .list-group-item a:hover {
    background: var(--color-neutral-2);
    color: var(--bluprint-dark-color);
}

.popover .tippy-popper .list-group-item a .fa-fw {
    width: auto;
    margin-right: var(--space-s);
    font-size: var(--font-size-xs);
}

.popover .tippy-popper .list-group-item a:hover .fa-fw{
    color: var(--bluprint-dark-color);
}

.txt-trim {
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
}

.table-scroll-x .projectname-text {
    vertical-align: middle;
}

.table-scroll-x .projectname-text+div{
    vertical-align: middle;
    line-height: 0;
}

/* Dark Tooltip */
.table-scroll-x .tippy-tooltip.dark-theme{
    overflow: inherit;
    max-width: 300px;
}

/* $4.1.15 - Patterns - Content - Tag */
.tag.tag-small {
    line-height: normal;
    height: auto;
    padding: var(--space-xs) var(--space-s);
}

.tag.tag-progress {
    background: #1667AD;
    color: #fff;
}

.tag.tag-new{
    background: #9ECCD3;
    color: #074650;
}

.tag.tag-hold{
    background: #E9A100;
    color: #FDF6E5;
}

.tag.tag-complete{
    background: #272B30;
    color: #FFFFFF;
}

.tag.tag-cancelled{
    background: #DEE2E6;
    color: #4F575E;
}

.tag.tag-pendingissue{
    background: #D63D12;
    color: #FFFFFF;
}

.tag.tag-ready{
    background: #0B6C7B;
    color: #E7F2F4;
}

/* $4.2.4 - Patterns - Controls - Dropdown */
.choices__list--dropdown .choices__list{
    max-height: 200px;
}



/* ================================================================ */
/*  $4.4 - Patterns - Navigation                                    */
/* ================================================================ */

/* Fix for usage inside tabs*/
.MainTabs .tabs .tabs-content{
    padding-top:var(--space-base);
}

.MainTabs .tabs-header-item {
    min-width: 185px;
}
.MainTabs .margin-left-m{
    margin:var(--space-none) ;
}

.MainTabs .tabs-header-item.active{
    border-color:var(--bluprint-dark-color) ;
    color:var(--color-neutral-9);
}

.MainTabs .tabs-header-item{
    color: var(--color-neutral-7);
}

.MainTabs .tabs-header-item:hover{
    border-color: var(--color-neutral-7);
}




/* ================================================================ */
/*  $5 - Widgets & RichWidgets                                      */
/* ================================================================ */

/* $5.2 - Widgets - TableRecords / EditableTable */
.table-scroll-x {
    white-space: nowrap;
    display: block !important;
    overflow-y: auto;
}

.table-scroll-x.Empty {
    display: table !important;
}

.TableRecords .TableRecords_Header{
    padding: var(--space-none) var(--space-s);
    color: var(--color-neutral-9);
    vertical-align: middle;
    line-height: 12px;
}

.TableRecords .TableRecords_Header .ThemeGrid_Width5{
    display: inline-flex;
    flex-direction: column;
    width: auto;
    vertical-align: middle;
}

.TableRecords .TableRecords_Header .fa {
    line-height: 6px;
}


.TableRecords .TableRecords_OddLine,
.TableRecords .TableRecords_EvenLine {
    border-color: var(--color-neutral-5);
    padding: var(--space-none) var(--space-s);
    height: var(--space-xxl);
}

.cb-wrapper-cell {
    line-height: 0;
    text-align: center;
}

.TableRecords .TableRecords_EvenLine {
    background-color: var(--color-neutral-1);    
}

.desktop .TableRecords tr:hover .TableRecords_OddLine,
.desktop .TableRecords tr:hover .TableRecords_EvenLine {
    background-color: var(--color-neutral-4);
}

.TableRecords .fa-ellipsis-h{
    color: var(--bluprint-dark-color);
}

/* $5.6 - RichWidgets - Pagination */
.pagination-count {
    color: var(--color-neutral-7);
    display: flex;
    align-items: center;
}

.pagination-count .select{
    background-position: center right 8px;
    height: 32px;
    padding: var(--space-s);
    line-height: 12px;
    font-size: 12px;
}

.pagination-links nav,
.layout-modal-content .pagination-links .ListNavigation_Wrapper {
    margin: 0;
}

.ListNavigation_PageNumber{
    border-color:  var(--color-neutral-5);
    color: var(--color-neutral-8);
}
.ListNavigation_CurrentPageNumber{
    background: var(--color-neutral-0);
    border-color:  var(--bluprint-dark-color);
    color: var(--bluprint-dark-color);
}

a.ListNavigation_Previous, a.ListNavigation_Next {
    border-color:  var(--color-neutral-5);
    color: var(--color-neutral-10);
}

/* $5.7 - RichWidgets - PopupEditor */
div.os-internal-Popup .os-internal-ui-dialog.os-internal-ui-draggable .os-internal-ui-dialog-titlebar.os-internal-header-space,
div.os-internal-Popup.os-internal-ui-dialog.os-internal-ui-draggable .os-internal-ui-dialog-titlebar.os-internal-header-space {
    height: 0px !important;             /* Should provide dedicated Cancel button */
}

/* ================================================================ */
/*  $6.2 - Styles - Colors                                          */
/* ================================================================ */
.background-primary { background-color: var(--bluprint-dark-color); }
.text-scarlet { color: #e90d49; }


/* ================================================================ */
/*  $$ - Generic                                      */
/* ================================================================ */
/* $ - Filter */
.filter-container {
    display: flex !important;
    flex-wrap: wrap !important;
}

.filter-items {
    display: inline-flex;
    margin-right: var(--space-s);
    margin-top: var(--space-base);        
}

.filter-actions {
    margin-right: var(--space-s);
    margin-left: var(--space-none);
    margin-top: var(--space-base);
}

.filter-container .ThemeGrid_MarginGutter {
    flex: 1;
    margin-left: var(--space-s);
}

.filter-container .button-group .btn {
    border-color: var(--bluprint-dark-color);
    color: var(--bluprint-dark-color);
}

.filter-container .button-group input[type="radio"]:checked + .btn {
    background: var(--bluprint-dark-color);
}

.filter-container .button-group label,
.button-group label {
    margin: var(--space-none);
}

.filter-container .button-group .OSInline {
    min-width: 60px;
}

.filter-calendar .input {
    min-width: 150px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.filter-container .fa-calendar{
    color: var(--color-neutral-9);
    font-size: 12px;
    display: inline-flex;
}

.filter-container .fa-close {
    width: auto;
}

.tab-top-content {
    margin-bottom: var(--space-base);
}

.tab-top-content .columns-item{
    margin-bottom: var(--space-none);
}

.tab-content-actionbar-right .fa-fw {
    font-size: 14px;
    line-height: normal;
    width: auto;
}

.tab-content-actionbar-right .fa-sliders,
.tab-content-actionbar-right .fa-filter {
    color: var(--color-neutral-9);
    font-size: 21px;
    margin-left: var(--space-s);
}

.tab-content-actionbar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.pl-tab-content-actionbar-right .Button {
font-size: 13px;
padding: var(--space-none) var(--space-s);
}
/* --------------------------- */


.UserInitials.Small {
    background-color: transparent;
    border: none;
    border-radius: 50%;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 20px;
    width: 20px; 
}

/* $ - Login */
.layout-login-form {
    height: 100%;
    width: 100%;
}

.Login-Top {
    margin-top: 15%;
}

.Login--Section {
    display: inline-block;
    height: 100%;
    position: relative;
    width: 100%;
    vertical-align: top;
     
}
.Login--Section.backgroundLogo {
    background: url(/BP_Resources/img/AppAccessBackground_4K.jpg?48965) no-repeat;
    background-size: cover; 
}
    
.Login--Section.backgroundLogo img.mainLogo {
    margin: 0;
    position: relative;
    top: 25%;
    left: 50%;
    -webkit-transform: translate(-50%, 50%);
            transform: translate(-50%, 50%);
    width: 50%;
    
    
    
    
     
}
    
.Login--Section--Form {
    margin: 0;
    position: relative;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    max-width: 446px;
    
    
    
     
}

.Login--Section--Form .inputField {
    margin-top: 24px; 
}
        
.Login--Section--Form .inputField:first-child {
    margin-top: 0; 
}
      
.Login--Section--Form--actions {
    text-align: center; 
}

.Login--Section--Footer {
    position: absolute;
    bottom: 32px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
     
}

/* $ White Button */
.Whitebutton {
    background-color: #fff;
    border: 1px solid #515c63;
    border-radius: 2px;
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
    color: #444;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    height: 32px;
    line-height: 30px;
    min-width: 116px;
    padding: 0 15px;
    text-align: center;
    text-decoration: none;
    margin: 0;
    vertical-align: top;
    text-transform: uppercase; 
}

.Whitebutton.Faded {
    color: #8D8D8D;
    border-color: #8D8D8D;
    font-weight: 600; 
}

/* $ Generic - TableRecords Div */
.table-horizontal{
   overflow-x: auto; 
}

/* $ Generic - Headings */
.Heading1 {
  font-size: 15px;
  font-weight: bold;
  line-height: 17px; 
}

.Heading2 {
  font-size: 16px;
  font-weight: 300;
  line-height: 18px; 
}

.Heading3 {
  font-size: 14px;
  font-weight: normal;
  line-height: 16px; 
}

.Heading4 {
  font-size: 16px;
  font-weight: normal;
  line-height: 22px;
  color: var(--color-primary); 
}

.Heading5 {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-primary); 
}

.body.small {
  font-weight: bold;
  font-size: 12px;
  line-height: 18px; 
}

.caption {
  font-size: 11px;
  line-height: 15px; 
}

span.Heading1,
span.Heading2,
span.Heading3,
span.Heading4,
span.Heading5 {

  display: block; 
}

.Text_overflow {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Popups **************************/
div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close-no-title {
    margin: var(--space-xxl) var(--space-xl) 0 0;
    transform: none;
    right: 0;
    top: 0;
    transition:none;
}

div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close-no-title:hover{
    transform: none;
}

.layout-modal-close,
.modal-close {
    position: absolute;
    right: var(--space-xl);
    top: var(--space-xxl);
    line-height: 0;
    font-size: 16px;
}

.layout-modal-wrapper{
    /*padding: var(--space-xl) var(--space-xxl);*/
    padding: var(--space-none);
}

.layout-modal-top {
    padding: var(--space-xl) var(--space-xxl) var(--space-none);
}

.layout-modal-title,
.modal-title {
    font-size: var(--font-size-h1);
    font-weight: 500;
    display: block;
    line-height: var(--space-xl);
    margin-bottom: var(--space-base);
    margin-right: var(--space-base);
}

.layout-modal-title .fa {
    width: auto;
    margin-right: var(--space-s);
}

.layout-modal-content {
    padding: var(--space-none) var(--space-l);
}

.layout-modal-scroll {
    overflow: auto;
}

.container {
    padding: var(--space-none) var(--space-base);
}

.layout-modal-content .columns.gutter-l > .columns-item {
    margin-bottom:  var(--space-base);
}

/*
.layout-modal-content .columns.gutter-l > .columns-item .field-wrapper {
    margin-bottom: var(--space-none);
}*/

.layout-modal-content .columns.gutter-l:last-child > .columns-item {
    margin-bottom: var(--space-none);
}

.media-body .columns.gutter-l:last-child > .columns-item:last-child {
    flex: 4;
}

.layout-modal-footer {
    padding: var(--space-none) var(--space-xxl) var(--space-xl);
}

.layout-modal-footer,
.modal-footer {
    border: none;  
    margin-top: var(--space-base);
    display: flex;
    justify-content: flex-end;
}

.Button.Is_Default[disabled="disabled"] {
    color: var(--color-neutral-6);
}

.Is_Default,
.Is_Default:hover {
   background: var(--bluprint-dark-color);
}

.btn-secondary {
    border-color: var(--color-neutral-8);
    color: var(--color-neutral-8);
}

.field-wrapper {
    margin-bottom: var(--space-base);
}

.field-wrapper.last,
.contact-info-model .layout-modal-content .columns.gutter-l > .columns-item .field-wrapper.last {
    margin: 0;
}

.field-label {
    font-weight: normal;
    color: var(--color-neutral-8);
    line-height: 21px;
    margin-bottom: 8px;
    display: block;
    position: relative;
}

.modal-top {
    padding: var(--space-xl) var(--space-xxl) var(--space-none);
}

.modal-content {
    padding: var(--space-none) var(--space-xxl);
}

.modal-content .field-wrapper:last-child {
    margin-bottom: var(--space-none);
}

.modal-footer {
    padding: var(--space-none) var(--space-xxl) var(--space-xl);
}

.layout-modal-footer .Button + .Button,
.modal-footer .Button + .Button{
    margin-left: var(--space-s);
}

.layout-modal-content .ListNavigation_Wrapper {
    margin-top: var(--space-base);
}


/**/
.table-layout-fixed {
    table-layout: fixed;
    white-space: nowrap; 
}

.layout-modal-content .list-items-group {
    padding: var(--space-none) var(--space-base);
    max-height: 250px;
    overflow: auto;
    background: var(--color-neutral-0);
    border-radius: var(--border-radius-soft);    
    border: 1px solid var(--color-neutral-6);
}

.project-list-items .list-item-wrapper {
    border-bottom: 1px solid #CED4DA;
    padding: var(--space-base) var(--space-none);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.project-list-items .list-item .job-name {
    color: var(--bluprint-dark-color);
}

.project-list-items .list-item-action .Button {
    width: auto;
}

.project-list-items .job-status {
    margin-right: var(--space-s);
}

.project-list-items .job-status .label,
.project-list-items .project-role .label {
    font-weight:bold;
}

.project-list-items .project-info-wrapper {
    display: flex;
}

.modal-update-project-owner .TableRecords {
    margin: 0;
}

.field-wrapper-group {
    display: flex;
    justify-content:space-between;
    margin: 0 -8px;
}

.field-wrapper-group .columns{
    margin: 0;
}

.field-wrapper-group .field-wrapper,
.field-wrapper-group .columns > .columns-item {
    margin: 0px;
    padding: 0;
}

.field-wrapper-group .field-wrapper:not(:empty) {
    width: 100%;
    padding: 0 8px;
}

.field-wrapper-group .field-wrapper .tooltip-container.OSInline {
    display: block
}

.pagination-wrapper {
    margin-top: var(--space-base);
}

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

/**/
.media .columns-item{
    margin: 0;
}
.media .media-user-info{
    text-align: right;
}
.media .avatar-name{
    line-height: 21px;
    max-width: 100px;
}

.media .media-date {
    color:var(--bluprint-gray-color);
    line-height: 21px;
}
.media-comment {
    color: #000;
    font-size: var(--font-size-xs);
}

.media .ListRecords .columns{
    padding: var(--space-none);
    margin: var(--space-none);
}

.media-body {
    border: 2px solid #F0F0F0;
}

.media-body .ListRecords> *{
    padding: var(--space-base);
    display: block;
}

.media-body .ListRecords> *:nth-child(odd) {
    background: #F0F0F0;
}

.media-body .avatar-wrapper {
    justify-content: flex-end;
}

.media-add-comment textarea  {
    height: 48px;
    padding: var(--space-s);
}

.media-add-comment .Button {
    height: 48px;
    width: 100%;
}

.field-help-text {
    text-align: right;
    color:var(--bluprint-gray-color);
}

.media .ListRecords .columns .columns-item{
    padding: 0;
    margin: 0;
}

.media .ListRecords .columns .columns-item:first-child{
    margin-right: var(--space-base);
}

.media-add-comment {
    padding: 0 16px;
    margin-top: 16px;
}

.no-data-found{
    padding: var(--space-base);
    display: block;
}

.media-add-comment .columns.columns-small-right > .columns-item{
    padding: var(--space-none);
}

.media-add-comment .columns.columns-small-right > .columns-item:first-child {
    margin-right: 16px;
}

.media-add-comment .columns.columns-small-right > .columns-item:last-child * {
    width: 100%;
    display: block;
}

.media-actions {
    margin-top: var(--space-s);
    line-height: 0;
}

.media-actions .ico-wrapper {
    margin-left: var(--space-s);
}

.date-picker .text-align-center {
    text-align: left;
}

.table-choose-columns .TableRecords {
    border: none;
}

/* Project Details */
.content-breadcrumbs{
    margin-bottom: var(--space-s);
}

.content-breadcrumbs a{
    color: var(--bluprint-lightblue-color);
}

.content-breadcrumbs a:not(.Button)[disabled="disabled"]{
    color: var(--color-neutral-7);
}

.project-id{
    color: var(--color-neutral-9);
    font-size: var(--font-size-s);
    font-weight: normal;
}

.panel-wrapper {
    display: flex;
}

.panel {
    background: #fff;
    border-radius: var(--border-radius-soft);
}

.panel .panel-body {
    padding: var(--space-base) var(--space-m);
}

.tabs-content .panel-wrapper{
    margin: var(--space-none) var(--space-s) var(--space-base);
}

.panel-wrapper>.columns {
    width: 100%;
    flex-grow: 1;
}

.panel-wrapper>.columns>.columns-item{
    padding: var(--space-none) var(--space-s);
}

.panel-wrapper>.columns>.columns-item .panel {
    height: 100%;
}

.panel-title,
.group-title {
    font-size: var(--font-size-h4);
    font-weight: var(--font-bold);
    margin-bottom: 16px;
    line-height: 25px;
    padding: var(--space-none);
}

.text-underlined {
    text-decoration: underline;
}

.group-detail .title{
    font-size: var(--font-size-h5);
}

.title {
    color: var(--color-neutral-8);
    font-size: var(--font-size-base);
    font-weight: var(--font-semi-bold);
    padding: var(--space-none);
}

.panel .layout-modal-wrapper,
.panel .layout-modal-top,
.panel .layout-modal-content,
.panel .layout-modal-scroll,
.panel .layout-modal-scroll>.container {
    padding: var(--space-none);
}

.attachment{
    font-size: var(--font-size-s);
}

.attachment > * {
    display: inline-block;
    vertical-align: middle;
}

.upload-by, .upload-date {
    font-style: italic;
}

.fa-paperclip {
    color: var(--color-neutral-6);
}

.upload-date {
    color: var(--color-neutral-10);
}

.attachment .fa-download {
    margin-right: var(--space-s);
}

.attachment .fa-trash {
    margin-left: var(--space-s);
}

.wrapper-file-upload {
    border: 1px solid var(--color-neutral-5);
    color: var(--color-neutral-7);
    padding: var(--space-base);
}

.attachments-wrapper {
    overflow: auto;
    max-height: 170px;
    margin-bottom: 16px;
}

.attachments-wrapper .attachment {
    margin-bottom:  var(--space-s);
}

.wrapper-file-upload .UploadBox .qq-uploader .qq-upload-button{
    margin: var(--space-none);
    color: var(--color-neutral-7);
    font-size: var(--font-size-s);
    line-height: 21px;
}

.wrapper-file-upload .fa-upload:before{
    color: var(--color-neutral-5);
}

.fa-upload span {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.wrapper-file-upload .UploadBox {
    border: none;
}

.scrollable-content {
    max-height: 315px;
    overflow-y: auto;
    overflow-x: hidden;
}

.table-members {
    max-height: 308px;
}

/* Import Template*/
.wizard-import-template .wizard {
    margin-left: -70px;
    margin-right: -70px;
}

.wizard-item.next .wizard-item-icon-wraper:before {
    background-color: var(--color-neutral-6);
}

.wizard-item.active .wizard-item-icon {
    width: 8px;
    height: 8px;
    border-color: var(--bluprint-lightblue-color);
}

.wizard-item.active .wizard-item-icon-wraper:before,
.wizard-item.past .wizard-item-icon-wraper:before {
    background-color: var(--bluprint-lightblue-color);
}

.wizard .wizard-item.active .fa-fw,
.wizard .wizard-item.past .wizard-item-icon .fa-fw {
    font-size: 6px;
    color: var(--bluprint-lightblue-color);
}

.wizard-item.past .wizard-item-icon {
    background-color: var(--bluprint-lightblue-color);
    border-color: var(--bluprint-lightblue-color);
    color: var(--bluprint-lightblue-color);
}

.wizard-item .wizard-item-icon-wraper:before{
    right: calc(50% + 8px);
    width: calc(100% - 16px);
}

.wizard-item-icon {
    width: 8px;
    height: 8px;
}

.wizard-item-icon .fa-fw,
.wizard-item.next .wizard-item-icon .fa-fw {
    font-size: 3px;
    color: var(--color-neutral-0);
}

.scrollable-form {
    border: 1px solid var(--color-neutral-4);
    border-radius: 4px;
    padding: var(--space-base);
    overflow: auto;
}

.preview-stagecontainer .stagecontainer-inner {
    flex-grow: 1;
}

.preview-stagecontainer .accordion-item-content {
    padding: var(--space-none) var(--space-m);
}

.display-flex input[type="checkbox"]  {
    margin: 0;
}

.Form input.ReadOnly, 
.Form textarea.ReadOnly, 
.Form select.ReadOnly {
    background: var(--color-neutral-2);
    border-color: var(--color-neutral-4)
}

.Form input.ReadOnly:not(.Not_Valid), 
.Form textarea.ReadOnly:not(.Not_Valid), 
.Form select.ReadOnly:not(.Not_Valid){
    border-color: var(--color-neutral-4)
}

.block-stages {
    border-radius: 4px;
    padding: 24px;
    border: 1px solid var(--color-neutral-5);
}

.block-stages .title {
    color:--color-neutral-9;
    font-size: 16px;
    font-weight: bold;
}

.block-stages .ListRecords {
    color:--color-neutral-8;
    padding-left: 24px;
    border-left: 1px solid var(--color-neutral-5);
}

.inline-field-list-title{
    font-size: 16px;
    font-weight: 500;
}

.inline-field-list-wrapper .ListRecords {
    display: flex;
    flex-wrap: wrap;
}

.inline-field-list-wrapper .inline-field {
    width: calc(50% - 8px);
}

.inline-field-list-wrapper .inline-field:nth-child(odd){
    margin-right: var(--space-s);
}

.inline-field-list-wrapper .inline-field:nth-child(even){
    margin-left: var(--space-s);
}

.inline-field-list-wrapper  .choices__list--multiple .choices__item {
    line-height: normal;
}

/* Vertical Tab */
.tabs-vertical .tabs-list-group {
    overflow: auto;
    max-height: 380px;
}

.tabs-vertical .tabs-content-wrapper {
    padding: var(--space-xl);
    background: var(--color-neutral-0);
    min-height: 300px;
}

.tabs-vertical .tabs-list-item {
    background: var(--color-neutral-0);
    padding: 24px;
    color: var(--color-neutral-8);
    font-size: 14px;
}

.tabs-vertical .tabs-list-item.active {
    background: var(--color-info-light);
}
    
.tabs-vertical .tabs-list-item a {
    color: var(--bluprint-lightblue-color);
    font-size: 18px;
    line-height: 20px;
}

.tabs-vertical .tabs-list-item .fa-angle-right {
    color: var( --color-neutral-7);
}

.tabs-vertical .tabs-list-item.active .fa-angle-right{
    color: var(--color-primary);
}

.vTab-panel-action{
    display: flex;
    white-space: nowrap;
    align-items: center;
    justify-content: right;
}

.vTab-panel-action .btn-link {
    display: flex;
    white-space: nowrap;
    align-items: center;
}

.vTab-panel-action .Button,
.vTab-panel-action .btn-link{
    margin-left: var(--space-s);
}

.btn-link .fa {
    color: inherit;
}

.tabs-vertical .tab-content-title {
    font-size: var(--font-size-h4);
    line-height: 22px;
}

.tabs-vertical .title {
    font-size: var(--font-size-s);
}



/* main tab content */
.main-tab-content {
    background: #fff;
    border-radius: var(--border-radius-soft);
    padding: var(--space-base) var(--space-m);
}

.main-tab-content .panel-wrapper {
    width: 100%;
    display: block;
    margin: 0;
}

.main-tab-content .panel-title-wrapper .columns-item {
   margin:0
}

.main-tab-content-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-base);
}

.main-tab-content-footer .Button {
    margin-left: var(--space-s);
}

/* Tasks: Landing */
.badges-wrapper {
    margin-top: var(--space-s);
    margin-bottom: var(--space-l);
}
.badges-wrapper > .columns > .columns-item {
    padding: var(--space-none) var(--space-base);
}

.panel-badge .card {
    padding: var(--space-base) var(--space-m);
}

.badge-count {
    font-size: var(--font-size-h1);
    color: var(--color-neutral-10);  
    font-weight: 500;
    line-height: 40px;
}

.badge-title{
    font-size: var(--font-size-base);  
    color: var(--color-neutral-9);  
    display: block;
    font-weight: 400;
    line-height: 24px;
}

.panel-badge .columns-item:last-child {
    display: flex;
    align-items: center;
}

.tab-content-top .columns-item {
    margin: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}


/*Add new tag*/
.tag-add-new .tag{
    background: var(--color-neutral-3);
    color: var(--color-neutral-9);
    font-size: 12px;
    font-weight: 500;
    width: 100%;
    display: block;
}

.tag-content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.tag-action {
    font-size: 14px;
}

.tag-add-new .txt-trim{
    white-space: nowrap;
    max-width: calc(100% - 60px);
}

.ctn-values{
    margin-bottom: 16px;
    margin-right: 8px;
    width: calc(33% - 8px);
}

/*Readonly Data*/
.panel-title-wrapper .columns {
    margin-bottom: var(--space-none);
}
.data-wrapper {
    margin-bottom: var(--space-base);
}

.data-wrapper .label{
    font-size: var(--font-size-s);
    font-weight: 500;
    color: var(--color-neutral-10);
    display: block;
}

.data-wrapper .data{
    font-size: var(--font-size-s);
    color: var(--color-neutral-9);
    display: block;
}

.checkbox-wrapper {
    display: flex;
    align-items: center;
}
.checkbox-wrapper input {
    margin-right: var(--space-s);
}

/* User Setting */
.main-page-content-wrapper {
    background: var(--color-neutral-0);
    border-radius: 4px;
    padding: var(--space-base) var(--space-m);
}

.columns-wrapper .columns-item,
.columns-wrapper .columns.gutter-l > .columns-item {
    margin-bottom: var(--space-none);
}

.columns-wrapper .columns {
    margin: 0 -8px;
}

.columns-wrapper > .columns.gutter-l > .columns-item {
    padding: 0 8px;
}

/* Back Office */
.img-upload {
    background: var(--color-neutral-1);
    padding: 8px;
    border: 1px solid  var(--color-neutral-3);
    max-width: 150px;
    text-align: center;
}

.img-upload img{
    max-height: 100%;
    max-width: 100%;
}

/* Task Details */
.field-wrappers .columns.gutter-l > .columns-item {
    margin-bottom: var(--space-none);
}
.avatar-group {
    align-items: center;
}

.avatar-group .ListRecords {
    display: flex;
    align-items: center;
}

.avatar-group img.UserInitials.Small {
    width: 24px;
    height: 24px;
    margin-right: var(--space-s);
}

.avatar-group .fa-fw {
    text-align: left;
    width: 24px;
}

.checkbox-proof-task .fa-file-image-o {font-size: 14px;}

/* Table Accordian */ 
.table-accordion {
    background: var(--color-neutral-0);
}

.table-accordion-header {
    font-size: var(--font-size-s);
    border-bottom: 1px solid #CED4DA;
    padding: var(--space-s) var(--space-m);
    font-weight: 500;
}

.table-accordion-header table,
.table-accordion-items-group table {
    table-layout: fixed;    
}

.table-accordion-item.collapsed,
.accordion-item-content {
    padding: var(--space-s) var(--space-m);
}

.table-accordion-items-group .table-accordion-item-wrapper.active {
border-top: 2px solid var(--bluprint-dark-color);
}

.ico-collapsible-wrapper {
    text-align: right;
}

.ico-collapsible-wrapper .fa{
    color: var(--bluprint-dark-color);
    font-size: 20px;
    width: auto;
}

.accordion-transparent .section-header {
    padding: var(--space-none);
    border: none;
}

.accordion-transparent .section-content {
    padding: var(--space-none);
}

.accordion-transparent-header {
    padding: var(--space-base) var(--space-none);
    border-bottom: 1px solid  var(--color-neutral-5);
}
.accordion-transparent-header .reorder-wrapper {
display: inline-flex;
flex-direction: column;
line-height: 0;
}
.accordion-transparent-header .reorder-wrapper .fa {
    line-height: 20px;
}

.accordion-transparent-header .tag,
.accordion-transparent-header .margin-top-s {margin:var(--space-none)}

.task-stage-header .display-flex {
    align-items: center;
    height: 100%;
}

.accordion-item-content.no-data-found {
    display: block;
    padding: var(--space-base) var(--space-m);
}

.block-wrapper .block-title {
    font-size: var(--font-size-base);
    margin-bottom: var(--space-s);
    font-weight: 500;
    display: block;
}

.section-index-items .section-index {
    border: none;
}

.block-wrapper .section-index-item {
    padding:  var(--space-none) var(--space-none) var(--space-none) var(--space-m);
    margin-bottom: var(--space-base);
    border-left: var(--border-size-s) solid var(--color-neutral-4)
}

.inline-btn-group .Button .fa:last-child {
  padding: 0;
}

.wrapper-select-user span{
    flex-grow: 1;
}

/* Template */
.content-title-edit  {
    display: flex;
    align-items: center;
}
.content-title-edit .content-title-action {
    line-height: 0;
}

/*---------------------- Cascade Tasks ------------------------ */
.CascadeTasks--wrapper {
  border-radius: 50%;
  border: 1px solid #f4f4f4;
  margin-right: -8px;
  display: inline-block;
  position: relative; 
  }



/*Error Screens*/
.error-title{
    color: var(--color-error);
    text-align: center;
    display: block;
    margin-bottom: var(--space-s);
    font-size: 36px;
    font-weight: bold;
    line-height: normal;
}

.error-email {
    font-weight: bold;
    margin-top: 10px;
    color: var(--bluprint-dark-color);
}

.error-text {margin-top: 16px}

/* Proof Task */
.proof-associated-link *,
.proof-associated-link *:hover,
.proof-associated-link *:active,
.proof-associated-link *:visited {
    color: var(--bluprint-lightblue-color);
}

.upload-proof-version {
    border: 1px solid #DEE2E6;
    border-radius: 4px;
}

.wrapper-proof-version {
    background: #F1F3F5;
    border-bottom: 1px solid #DEE2E6;
    padding: 8px;
    display: flex;
    justify-content: flex-end;
}

.wrapper-proof-version label {
    margin: var(--space-s) var(--space-s) 0 0;
}

.wrapper-proof-version .choices {
    width: 100px;
}

.upload-proof-version  .lightbox {
    background: #ADB5BD;
    padding: 8px 0;
    text-align: center;
}

.wrapper-proof-upload {
    background: #F1F3F5;
}

.wrapper-proof-upload .wrapper-file-upload {
    border: none;
}

.wrapper-proof-upload .layout-modal-content{
    margin: 0;
    padding: 0;
}

.wrapper-proof-media-comments {
    margin-top: 16px;
}

.wrapper-proof-media-comments .container,
.wrapper-proof-media-comments .layout-modal-content{
    padding: 0;
}