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

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

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

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

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



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

/*  Root - CSS Variables                                                 */

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



:root {

    /* Color - Brand */

    --color-primary: #69982a;

    --color-secondary: #69982a;



    --color-primary-hover: #4f7220;

    --color-primary-selected: rgba(105, 152, 42, .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;

}

:root {
    /* Color - Brand */
    --color-primary: #E79041;
    --color-primary-hover: #c1742f;
    --color-secondary: #2C376F;
    --color-secondary-dark: #242a4c;
    --color-white-opacity: #ffffffcc;
    --border-color: #D0D0D0;
    --font-semi-bold: 500;
    --header-size: 75px;
    --color-primary-selected: rgba(105, 152, 42, .12);

    /* App Settings */
    --side-menu-size: 300px;
}
/******************** General style start ********************/
.underline{
    text-decoration: underline;
}
.text-justify{
    text-align: justify;
    text-justify: inter-word;
}
.white-space-nowrap{
  white-space: nowrap;
}

.margin-top-xxxl { margin-top: var(--space-xxxl); }
/******************** General style end ********************/

/* Menus */
.header .Menu_TopMenu:hover,
.header .Menu_TopMenu.Menu_TopMenuActive
 {
    border-bottom: var(--border-size-m) solid var(--color-secondary);
    color: var(--color-secondary);
}

.header .Menu_TopMenuActive > div a,
.header .Menu_TopMenuActive > div a:visited
{
    color: var(--color-secondary);
}

/* LOGIN */
.layout-login-form-content
{
    background-image: url(/PartTimer_Th/img/LoginBackground.jpg?28663);
    background-size: cover;
}

/* APP TITLE */
.app-title
{
    /*font-family: 'Lato';*/
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 20px;
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--color-secondary);
    text-transform: uppercase;
}

/* USER INFO*/

.user-info-name
{
height: 21px;
left: 6.6%;
right: 29.25%;
top: calc(50% - 21px/2 + 0.5px);
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 21px;
text-align: right;
color: #4F575E;
}

/* HEADER */

.header-content-custom
{
    min-height: 75px;
    padding: 20px;
    background: #2C376F;
    border-radius: 0px;
    font-style: normal;
    font-size: 26px;
    line-height: 32px;
    color: #FFFFFF;
}
.header-tabs
{
    min-height: 45px;
    background: #383838;
    color: #FFFFFF;
}
.header-tab-item-wrapper
{
    display: table-cell;
    line-height: 41px;
    text-transform: uppercase;
}

.header-tab-item-wrapper > div a
{
    color: #FFFFFF;
    text-decoration: none;
}

.header-tab-item-wrapper:not(:first-of-type)
{
    padding-left: 30px;
}


.header-tab-item-active
{
    border-bottom: 4px solid;
    border-color: var(--color-primary);
}
.header-tabs-rounded
{
    border-radius: 0px 0px 20px 20px;
}

.main-content-title
{
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 25px;
    color: var(--color-secondary);
}

.headerTabs-color{
    background-color: #383838;
}

/*---------- $1. Buttons ----------*/
.Is_Default,
.Button,
.btn {
    border: 2px solid var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-neutral-0);
    min-width: 126px;
}

.Is_Default:hover, .Is_Default:visited,
  .Button:hover,
  .Button:visited,
  .btn:hover,
  .btn:visited {
    color: var(--color-neutral-0);
}

.Is_Default:hover,
  .Button:hover,
  .btn:hover {
    -webkit-filter: brightness(0.9);
            filter: brightness(0.9);
}

.Is_Default:active,
  .Button:active,
  .btn:active {
    -webkit-filter: brightness(0.7);
            filter: brightness(0.7);
}

.Is_Default-secondary,
  .Button-secondary,
  .btn-secondary {
    background-color: var(--color-neutral-0);
}

.Is_Default-secondary, .Is_Default-secondary:hover,
    .Button-secondary,
    .Button-secondary:hover,
    .btn-secondary,
    .btn-secondary:hover {
    color: var(--color-primary);
}

/*Back grey button*/
.Is_Default-back,
  .Button-back,
  .btn-back {
    background-color: var(--color-neutral-0);
    border-color: #adb5bd;
    border-width: 1px;
    color: #5C656D;
}

.Is_Default-back, .Is_Default-back:hover,
    .Button-back,
    .Button-back:hover,
    .btn-back,
    .btn-back:hover {
    color: #5C656D;
}
/**/


.Is_Default-error,
  .Button-error,
  .btn-error {
    background-color: var(--color-red-dark);
    border-color: var(--color-red-dark);
}

.Is_Default-success,
  .Button-success,
  .btn-success {
    background-color: var(--color-lime);
    border-color: var(--color-lime);
}

.TableRecords .TableRecords_Header, .EditableTable thead th {
    background-color: var(--color-neutral-1);
}


.white-space-nowrap{
  white-space:nowrap;
}

/*---------- button-group ----------*/
.button-group .btn {
    min-width: unset;
}

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

[type="radio"] + span {
    background-color: var(--color-neutral-0);
}

[type="radio"][disabled="disabled"] + .btn {
    border-color: var(--color-neutral-7);
    background-color: var(--color-neutral-4);
    color: var(--color-neutral-8);
    cursor: not-allowed;
}

[disabled="disabled"],
[readonly="readonly"],
textarea[readonly="readonly"] {
    color: var(--color-neutral-8);
}

.btn-back.btn.Is_Default{
  color:#5C656D;
}
.Is_Default-secondary, .Is_Default-secondary:hover, .Button-secondary, .Button-secondary:hover, .btn-secondary, .btn-secondary:hover {
    color: #2c376f;
    border: #2C376F solid 1px;
}

[disabled="disabled"] {
    color: #adb5bd;
    border: 2px solid #adb5bd;
    background-color: #F1F3F5;
}

.EyeBtn{
    color: #868E96;
    font-size: 14px;
    padding: 6px;
    border-radius: 4px;
}

.EyeBtn:hover{
    background-color: #FEF0E6;
    color: #E79041 !important;
}

.ModalLoadingCnt .modal-wrapper {
    background-color: transparent;
    box-shadow: none;
}

/******************** Custom Mobile Start ********************/

.phone .header-content.header-content-custom  {
    text-align: center;
}

.phone .content-top-title {
    margin-bottom: var(--space-s);
}

.phone .header-right {
    display: contents;
    
}
.modal-content .choices__list--dropdown .choices__list {
    max-height: 300px;
}

/******************** Custom Mobile End ********************/

/******************** Custom Modal style start ********************/
.modal-wrapper.modal-l {
    max-width: 750px;
}
.modal-wrapper.modal-xl {
    max-width: 950px;
}
/******************** Custom Modal style end ********************/


/******************** min heights style start ********************/
.min-height-s{
    min-height: 100px;
}
.min-height-base{
    min-height: 250px;
}
.min-height-m{
    min-height: 300px;
}
.min-height-l{
    min-height: 600px;
}

/******************** min heights style end ********************/


/******************** max heights style start ********************/
.max-height-s{
    max-height: 100px;
    overflow-y: scroll;
}
.max-height-base{
    max-height: 250px;
    overflow-y: scroll;
}
.max-height-m{
    max-height: 300px;
    overflow-y: scroll;
}
.max-height-l{
    max-height: 600px;
    overflow-y: scroll;
}

.btn-secondary{
    border-color: #e79141;
border-width: 2px;
}
/******************** min heights style end ********************/

/******************** PartTimerAdmin (eSpace) > JobPool (WebFlow) > JobUpload (WebScreen) ********************/
.ModalLoadingCnt .modal-wrapper {
    background-color: transparent;
    box-shadow: none;
}

/******************** List Web Block ********************/
.listdiv{
    background-color: #F2F2F2;
border-radius: 4px;
border-style: solid;
border-width: 0px;
margin-bottom: 5px;
padding: 2px 2px 2px 6px;
}

.listweight{
    font-weight:400 ;
}