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

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

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

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

    --color-primary-hover: #173566;
    --color-primary-selected: #132B52;
    --color-primary-lightest: #2B63BE;

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

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

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

:root{
    --color-primary: #7500c0;
    --color-primary-hover: #7500c0; 
}

.Menu_TopMenu:hover.Menu_TopMenuActive > div .Menu_DropDownArrow:before,
.Menu_TopMenu:hover.Menu_TopMenuActive > div .Menu_DropDownArrow:after,
.Menu_TopMenuActive > div .Menu_DropDownArrow:before,
.Menu_TopMenuActive > div .Menu_DropDownArrow:after {
    background-color: white !Important; 
}

.Menu_TopMenu .fa, .Menu_DropDownPanel .fa {
    color:white;
}

.TopMenuHeaderLinks{
    font-size: var(--font-size-xs) !Important;
    font-weight: var(--font-semi-bold);
}

.Menu_TopMenu .fa, .Menu_DropDownPanel .fa {
    margin-top: none !Important;
}

.tabs-header-item {
color: black;
}

span.fa.fa-fw.fa-angle-up {
    display:none;
}

.HeaderUserName{
    margin-left:5px;
    color: white;
}

.ValidationError{
    background-color: #fbd6d6;
}

.ValidationWarning{
    background-color: #ffe7b6;
}

.ValidationSuccess{
    background-color: #defbd6;
}

.Image{
    border-radius: 100%;
}

.header .Menu_TopMenu:hover, .header .Menu_TopMenu.Menu_TopMenuActive {
    border-bottom: none;
}

.Menu_TopMenu > div a, .Menu_TopMenu > div a:visited {
    color: white !Important;
}

.layout .header {
background: rgb(2,0,36);
background: linear-gradient(150deg, rgba(2,0,36,1) 0%, rgba(103,58,183,1) 35%, rgba(117,0,192,1) 100%);
height: 48px;
}

.Menu_TopMenu:hover > div .fa,
.Menu_TopMenu:hover > div a,
.Menu_TopMenu:hover > div a:visited {
    color: #b455aa;
}

.EditableTableHeader tbody tr td {
    background-color: var(--color-primary);
    line-height: 1;
    font-weight: var(--font-semi-bold);
    font-size: small;
}

.tabs-header-item.active {
    color: var(--color-primary);
}

.accordion-item .accordion-item-header {
    color: var(--color-primary-hover);
}

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

.EditableTable thead tr th {
    background-color: var(--color-primary);
    font-size: var(--font-size-s);
}

html {    
font-family: Graphik Super Web;
}

input, 
textarea, 
select, 
button {
    font-family: Graphik Super Web;
    font-size:95%
}

.layout-login-simple .layout-login-form {
    background-color: var(--color-primary);
}

.layout-login-simple .layout-login-form-content {
    background-size: cover!important;
    background-color: white;
    background: URL("/TimeTracking/img/Test.jpg?222&2033") 0 0 no-repeat transparent;
}

input:-internal-autofill-selected {
    color: white !important;
}

.layout .header {
    height:55px;
}

.header .Menu_DropDownButton {
    vertical-align: sub;
}

body .EditableTable input:not(.InEditMode), body .EditableTable textarea:not(.InEditMode), body .EditableTable select:not(.InEditMode) {
    font-size: var(--font-size-xs);
}

.TableRecords_Header td body {
    font-size: var(--font-size-xs);
}


.accordion-item .accordion-item-header {
    color: var(--color-primary);
}

.Menu_TopMenuActive > div a, .Menu_TopMenuActive > div a:visited, .Menu_TopMenuActive > div a:hover, .Menu_TopMenu:hover.Menu_TopMenuActive > div a {
    color: white;
}

body.desktop .os-internal-Popup .os-internal-ui-dialog, body.desktop .os-internal-Popup.os-internal-ui-dialog { 
    min-width: 0px;
}

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 {
    background-color: var(--color-primary);
}

div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close-no-title {
    background-color: white;
}

div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar-close-no-title:hover {
    background-color: white;
}

.os-internal-Popup.os-internal-ui-dialog iframe {
    border-radius: unset;
}

.ThemeGrid_MarginGutter {
    margin-left: 3px !important;
}

.MainPopup .ThemeGrid_Width6 {
    width: auto;
    height: fit-content !important;
}

div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-content, div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-content {
   /*height: -webkit-fill-available !important; */
    width: fit-content !important;
    background-color: #3D4750 !important;
}

body.desktop .os-internal-Popup .os-internal-ui-dialog, body.desktop .os-internal-Popup.os-internal-ui-dialog {
    height: fit-content !important;
    width: fit-content !important;
}

.os-internal-ui-dialog-content os-internal-ui-widget-content{
    background-color: #3D4750;
}

.Text_Note {
    color: white;
}

div.os-internal-Popup .os-internal-ui-dialog, div.os-internal-Popup.os-internal-ui-dialog {
    background-color: var(--color-primary);
}

.os-internal-Popup.os-internal-ui-dialog iframe {
    height: -webkit-fill-available !important;
}

.accordion br {
    display: none;
}

.ExportTR{
    width:14% !Important;
}

.EditableTable input, .EditableTable textarea, .EditableTable select {
    border-radius: 4px;
    border-color: #a9a9a9;
    border-width: 1px;
}

.file-upload {
    width: 241px;
    height: 50px;
}

.Menu_TopMenu .fa, .Menu_DropDownPanel .fa:hover {
    color: white !Important;
}

.file-upload .file-upload-message {
    padding-left: revert !important;
}


Backgr.layout-login-simple .layout-login-form {
    padding: var(--space-l) !Important;
}

.layout-login-form {
min-width: 135% !Important;
}

.layout-login-simple .layout-login-form {
    padding: var(--space-m);
}

.input, textarea.input, .select {
    -webkit-text-fill-color: white;
}

.file-upload .file-upload-message {
    padding-left: inherit !important;
}

div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-titlebar, div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-titlebar {
   background: rgb(2,0,36);
   background: linear-gradient(150deg, rgba(2,0,36,1) 0%, rgba(103,58,183,1) 15%, rgba(117,0,192,1) 100%);
}

.popup_input{
    border-radius:4px;
    width: 80% !Important;
}

div.os-internal-Popup .os-internal-ui-dialog .os-internal-ui-dialog-content, div.os-internal-Popup.os-internal-ui-dialog .os-internal-ui-dialog-content {
    background-color: #673ab7 !important;
}

.EditableTable input:not(.btn):not(.checkbox):not(.radio-button)[readonly="readonly"] {
text-align:center;
}

.checkbox,
.radio-button,
.TableRecords .TableRecords_Header [type="checkbox"] {
    -webkit-appearance: none;    
       -moz-appearance: none;
            appearance: none;    
    cursor: pointer;
    height: 24px;
    position: relative;
    -webkit-transition: all 180ms linear;
            transition: all 180ms linear;
    width: 24px;
}

.checkbox:before,
.radio-button:before, 
.TableRecords .TableRecords_Header [type="checkbox"]:before {
    background-color: var(--color-neutral-0);
    border: var(--border-size-s) solid var(--color-neutral-5);
    content: '';
    display: block;
    height: 22px;
    -webkit-transition: all 180ms linear;
            transition: all 180ms linear;
    width: 22px;
}

.checkbox:before,
.TableRecords .TableRecords_Header [type="checkbox"]:before { 
    border-radius: var(--border-radius-soft); 
}

.radio-button:before { 
    border-radius: var(--border-radius-rounded); 
}

.checkbox:hover:before,
.radio-button:hover:before,
.TableRecords .TableRecords_Header [type="checkbox"]:hover:before {
    border: var(--border-size-s) solid var(--color-neutral-6);
}

.checkbox:focus:before,
.radio-button:focus:before,
.TableRecords .TableRecords_Header [type="checkbox"]:focus:before {
    box-shadow: 0 0 0 2px #7500c0;
}

.checkbox:checked:before,
.TableRecords .TableRecords_Header [type="checkbox"]:checked:before {
    background-color: #7500c0 !Important;
    border: var(--border-size-s) solid var(--color-primary);
}

.radio-button:checked:before {
    background-color: #7500c0;
    border: 6px solid #7500c0;
    height: 12px;
    width: 12px;
}

.checkbox:checked:hover:before,
.radio-button:checked:hover:before,
.TableRecords .TableRecords_Header [type="checkbox"]:checked:hover:before {
    -webkit-filter: brightness(.9);
            filter: brightness(.9);
}

.checkbox[disabled="disabled"],
.radio-button[disabled="disabled"],
.TableRecords .TableRecords_Header [type="checkbox"][disabled="disabled"] {
    background-color: transparent;
    border: none;
    pointer-events: none;
}

.checkbox[disabled="disabled"]:before,
.radio-button[disabled="disabled"]:before,
.TableRecords .TableRecords_Header [type="checkbox"][disabled="disabled"]:before {
    background-color: var(--color-neutral-2);
    border: var(--border-size-s) solid var(--color-neutral-4);
}

.radio-button[disabled="disabled"]:checked:before {
    background-color: var(--color-neutral-2);
    border: 6px solid var(--color-neutral-4);
}

.checkbox:after,
.TableRecords .TableRecords_Header [type="checkbox"]:after {
    border: var(--border-size-l) solid var(--color-neutral-0);
    border-right: var(--border-size-none);
    border-top: var(--border-size-none);
    content: '';
    display: block;
    height: 4px;
    left: 5px;
    opacity: 0;
    position: absolute;
    top: 7px;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transition: all 180ms linear;
            transition: all 180ms linear;
    width: 12px;
}

.checkbox:checked:after,
.TableRecords .TableRecords_Header [type="checkbox"]:checked:after {
    opacity: 1;
}

.checkbox[disabled="disabled"]:after,
.TableRecords .TableRecords_Header [type="checkbox"][disabled="disabled"]:after {
    border: var(--border-size-m) solid var(--color-neutral-4);
    border-right: var(--border-size-none);
    border-top: var(--border-size-none);
}

.checkbox.Not_Valid:before,
.radio-button.Not_Valid:before,
.TableRecords .TableRecords_Header [type="checkbox"].Not_Valid:before {
    border: var(--border-size-m) solid var(--color-error);
    height: 20px;
    width: 20px;
}

.ChangePassword input {
    -webkit-text-fill-color: black;
}

.ChangePassword button {
    background-color: var(--primary-color);
}

.ChangePassword .Button {
    background-color: #7500c0;
    -webkit-text-fill-color: white;
}

.layout-login-simple .layout-login-form {
   background: rgb(117,0,192);
   background: linear-gradient(180deg, rgba(117,0,192,1) 33%, rgba(224,222,250,1) 34%);
}

body .EditableTable input:not(.InEditMode), body .EditableTable textarea:not(.InEditMode), body .EditableTable select:not(.InEditMode) {
    text-align-last: center;
}

.fa-lock, .fa-unlock {
    color: var(--color-primary);
}

span.fa.fa-fw.fa-eye {
    color: var(--color-primary);
}

.TicketStatusOK{
    color: green !Important;
}

.TicketStatusNOTOK{
    color: red !Important;
}

.increment-number {
    display: flex;
}

.increment-number-number {
    flex: 1;
}

.increment-number-number,
.increment-number-minus,
.increment-number-plus {
    text-align: center;
    padding: 5px;
}

input {
    text-align: center;
}

.EditableTable tfoot td a {
    text-align: center;
}