@import url("/PTTGlobal_Web_Theme/Theme.PTTGlobal_Web_Theme.css?2454");

/* ===================================================================== */
/*  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-soft);
}
/* Login Background */

.layout-login-simple .layout-login-background, .layout-login-background {
    background-color: #e7e7e7;
}


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

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

/*  OutSystems UI Live Style Guide - Version 1.0.0                       */

/*  $1 - Home Page                                                       */
/*  $2 - Overview Pages                                                  */
/*  $3 - Styles                                                          */
/*       $3.1 - Styles - Border                                          */
/*       $3.2 - Styles - Color                                           */
/*       $3.3 - Styles - Shadow                                          */
/*       $3.4 - Styles - Spacing                                         */
/*       $3.5 - Styles - Typography                                      */
/*  $4 - Patterns                                                        */
/*       $4.1 - Patterns - Columns                                       */
/*       $4.2 - Patterns - Floating Actions                              */
/*       $4.3 - Patterns - Separator                                     */
/*  $5 - Widgets                                                         */
/*       $5.1 - Widgets - Buttons                                        */
/*       $5.2 - Widgets - Editable Table                                 */
/*       $5.3 - Widgets - Feedback Ajax Wait                             */
/*       $5.4 - Widgets - Form Elements                                  */

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


:root {
        /* Typography - Size */
    --font-size-display: 36px;
    
    --font-size-h1: 32px;
    --font-size-h2: 28px;
    --font-size-h3: 26px;
    --font-size-h4: 22px;
    --font-size-h5: 20px;
    --font-size-h6: 18px;

    --font-size-base: 16px;
    --font-size-s: 18px;
    --font-size-xs: 12px;  
    
    


    --color-primary-hover: #19418a;
    --color-primary-selected: #19418a;
}

/* ===================================================================== */
/*  $1 - Home Page Styles                                                */
/* ===================================================================== */
.home-banner {
    background-image: url(/OutSystemsUILiveStyleGuide/img/HeroBackground.png?82167);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 150px;
    padding-top: 110px;
}

.home-banner .font-size-display {
    --font-size-display: 80px;
}

.layout-home .content .ThemeGrid_Container {
    padding: 0 var(--space-xl);
}

.home-menu {
    margin-top: -70px;
}

.home-card {
    border-radius: 8px;
    border: none;
    box-shadow: 0 1px 6px 0 rgba(0,0,0,0.16);
}

.home-padding {
    padding: 100px 0;
}


/* ===================================================================== */
/*  $2 - Overview Pages                                                  */
/* ===================================================================== */
.pattern-overview-preview {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    background-color: var(--color-neutral-0);
    border: 1px solid #ebebeb;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 110px;
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
    -webkit-transition: box-shadow 250ms ease-out;
            transition: box-shadow 250ms ease-out;
}

.pattern-overview-preview:hover,
.screen-overview-preview:hover {
    box-shadow: 0 7px 21px 0 rgba(26, 27, 31, .23);  
}

.pattern-overview-preview.styles {
    height: 182px;
}

.screen-overview-preview {
    border: 1px solid #ebebeb;
    height: 166px;
    -webkit-transition: box-shadow 250ms ease-out;
            transition: box-shadow 250ms ease-out;
}

.screen-overview-preview img {
    height: 100%;
    object-fit: cover;
    object-position: top;
    width: 100%;
}

input[type='text']

.table-header,
.table-content-row {
    border-bottom: 1px solid var(--color-neutral-4);
}

.table-content-row,
.table-content-item{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
}

.tablet.portrait .hide-in-responsive,
.phone.portrait .hide-in-responsive,
.phone.landscape .hide-in-responsive {
    display: none;
}

.tablet.portrait .table-header,
.phone.portrait .table-header,
.phone.landscape .table-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.tablet.portrait .table-header .table-header-item,
.phone.portrait .table-header .table-header-item,
.phone.landscape .table-header .table-header-item {
    -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
}

.tablet.portrait .table-content-row .table-content-item,
.phone.portrait .table-content-row .table-content-item,
.phone.landscape .table-content-row .table-content-item{
    -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
}

.css-preview {
    color: #4120de;
    font-family: monospace; 
}


/* ===================================================================== */
/*  $3 - Styles                                                          */
/* ===================================================================== */

/* ===================================================================== */
/*  $3.1 - Styles - Border                                               */
/* ===================================================================== */
.preview-border {
    background-color: #b4d9f9;
    height: 56px;
    width: 112px;
}

.preview-border-circle {
    width: 56px;
}

.preview-border-table {
    background-color: #b4d9f9;
    height: 24px;
    width: 48px;
}

.preview-border-circle-table {
    height: 48px;
}

.preview-border-size {
    color: #b4d9f9;
    height: 56px;
    width: 56px;
}

.preview-border-size-table {
    color: #b4d9f9;
    height: 24px;
    width: 24px;
}


/* ===================================================================== */
/*  $3.2 - Styles - Color                                                */
/* ===================================================================== */
.preview-color-base {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    border-radius: var(--border-radius-soft);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 56px;
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
}

.preview-color-base .preview-icon-color {
    color: #fff;
    font-size: 14px;
    opacity: 0;
    -webkit-transition: opacity 180ms linear;   
            transition: opacity 180ms linear;    
    
}

.preview-color-base:hover .preview-icon-color {
    opacity: 1;
}

.preview-color-variation {
    border-radius: var(--border-radius-soft);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
    height: 16px;
    overflow: hidden;
}

.preview-color-item {
    -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
    height: 100%;
}

.preview-color-table {
    border-radius: var(--border-radius-soft);
    height: 24px;
    width: 24px;
} 


/* ===================================================================== */
/*  $3.3 - Styles - Shadow                                               */
/* ===================================================================== */
.preview-shadow {
    border-radius: var(--border-radius-soft);
    height: 56px;
    width: 56px;
}


/* ===================================================================== */
/*  $3.4 - Styles - Spacing                                              */
/* ===================================================================== */
.preview-space-scale .columns-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
       -ms-flex-direction: column;
           flex-direction: column;
    -webkit-box-pack: end;
       -ms-flex-pack: end;
     justify-content: flex-end;
}

.preview-space {
    background-color: #b4d9f9;
}

.preview-space-xs {
    height: var(--space-xs);
    width: var(--space-xs);
}

.preview-space-s {
    height: var(--space-s);
    width: var(--space-s);
}

.preview-space-base {
    height: var(--space-base);
    width: var(--space-base);
}

.preview-space-m {
    height: var(--space-m);
    width: var(--space-m);
}

.preview-space-l {
    height: var(--space-l);
    width: var(--space-l);
}

.preview-space-xl {
    height: var(--space-xl);
    width: var(--space-xl);
}

.preview-space-xxl {
    height: var(--space-xxl);
    width: var(--space-xxl);
}

.preview-space-uniform-mask {
    background-color: #b4d9f9;
}

.preview-space-uniform {
    border: 1px solid #adb5bd;
    background-color: #fff;
    width: 16px;
    height: 16px;
}


/* ===================================================================== */
/*  $3.5 - Styles - Typography                                           */
/* ===================================================================== */
.preview-font-weight {
    font-size: 56px;
}


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

/* ===================================================================== */
/*  $4.1 - Patterns - Columns                                            */
/* ===================================================================== */
.column-item-preview {
    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;
    background-color: var(--color-neutral-3);
    color: var(--color-neutral-7);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 28px;
    height: 110px;
    -webkit-box-pack: center;
       -ms-flex-pack: center;
     justify-content: center;
}


/* ===================================================================== */
/*  $4.2 - Patterns - Floating Actions                                   */
/* ===================================================================== */
.floating-actions {
    -webkit-box-align: start;
       -ms-flex-align: start;
          align-items: flex-start;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin: 0;
    position: relative;
}

.floating-actions-button {
    margin-left: 56px; 
}


/* ===================================================================== */
/*  $4.3 - Patterns - Separator                                          */
/* ===================================================================== */
.separator-preview {
    position: relative;
}

.separator-preview:before,
.separator-preview:after {
    background-color: #b4d9f9;
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    width: 100%;
}

.separator-preview:before {
    top: 100%;    
}

.separator-preview:after {
    bottom: 100%;    
}

.separator-preview.margin-y-xs:before,
.separator-preview.margin-y-xs:after {
    height: var(--space-xs);
}

.separator-preview.margin-y-s:before,
.separator-preview.margin-y-s:after  {
    height: var(--space-s);
}

.separator-preview.margin-y-base:before,
.separator-preview.margin-y-base:after {
    height: var(--space-base);
}

.separator-preview.margin-y-m:before,
.separator-preview.margin-y-m:after {
    height: var(--space-m);
}

.separator-preview.margin-y-l:before,
.separator-preview.margin-y-l:after {
    height: var(--space-l);
}

.separator-preview.margin-y-xl:before,
.separator-preview.margin-y-xl:after {
    height: var(--space-xl);
}

.separator-preview.margin-y-xxl:before,
.separator-preview.margin-y-xxl:after {
    height: var(--space-xxl);
}


/* ===================================================================== */
/*  $5 - Widgets                                                         */
/* ===================================================================== */

/* ===================================================================== */
/*  $5.1 - Widgets - Buttons                                             */
/* ===================================================================== */
.Is_Default.button-hover {
    -webkit-filter: brightness(.9);
            filter: brightness(.9);
}

.button-hover {
    -webkit-filter: brightness(.95);
            filter: brightness(.95);
}


.Is_Default.button-pressed {
    -webkit-filter: brightness(.8);
            filter: brightness(.8);
}

.button-pressed {
    -webkit-filter: brightness(.9);
            filter: brightness(.9);
}


/*.button:hover,.Button:hover
{
    /*background-color: var(--color-primary)!important;*/
    border: var(--border-size-none)!important;
    color: var(--color-neutral-0)!important;
    -webkit-filter: brightness(.9)!important;
    filter:brightness(.9) !important;
}*/
.button-focus {
    box-shadow: 0 0 0 2px #a3daff;
}

a.link-hover,
a:visited.link-hover {
    color: var(--color-primary-hover);
}


/* ===================================================================== */
/*  $5.2 - Widgets - Editable Table                                      */
/* ===================================================================== */
.align-left .ListNavigation_Wrapper {
    -webkit-box-pack: start;
       -ms-flex-pack: start;
     justify-content: flex-start;
}

.EditableTable select {
    display: none;
}

.EditableTable .OnEdit select {
    display: table-cell;
}

.EditableTable .Selected.OnEdit .tag,
.EditableTable .Selected.OnEdit .custom-class {
    display: none;
}


/* ===================================================================== */
/*  $5.3 - Widgets - Feedback Ajax Wait                                  */
/* ===================================================================== */
.Feedback_AjaxWait.show-ajax  {
    display: block !important;
}


/* ===================================================================== */
/*  $5.4 - Widgets - Form Elements                                       */
/* ===================================================================== */
input.input-hover,
select.input-hover,
textarea.input-hover {
    border: var(--border-size-s) solid var(--color-neutral-6);
}

input.input-active,
select.input-active,
textarea.input-active,
input.input-active:hover,
select.input-active:hover,
textarea.input-active:hover{
    border: var(--border-size-s) solid var(--color-primary);
}

.input-small {
    height: 32px;
    padding: var(--space-none) var(--space-s);    
}

.input-large {
    height: 48px; 
}

.modal-wrapper {
  max-width: 90% !important;
  max-height: 115% !important;
}
.modal-preview_result {
  max-width: 100% !important;
  max-height: 100% !important;
  height: 100%;
}

.Button {
    height: 35px !important;
    padding: var(--space-none) var(--space-m) !important;
}

.Button:not(.Is_Default).background-primary:hover {
    -webkit-filter: brightness(.95)!important;
            filter: brightness(.95)!important;
    background-color: var(--color-primary) !important;
}

.Button:not(.Is_Default).background-primary:hover:active {
    -webkit-filter: brightness(.90)!important;
            filter: brightness(.90)!important;
    background-color: var(--color-primary) !important;
}

.input-disabled{
    background-color: var(--color-neutral-2)!important;
    border: 1px solid var(--color-neutral-4)!important;
    color: var(--color-neutral-8)!important;
    pointer-events: none !important;
    font-size: var(--font-size-m) !important;
}

[disabled="disabled"], [readonly="readonly"], textarea[readonly="readonly"] ,select[disabled="disabled"]{
    background-color: var(--color-neutral-2)!important;
    color: var(--color-neutral-8)!important;
    font-size: var(--font-size-m) !important;
}

.choices-disabled .choices__list--single .choices__item {
    color: var(--color-neutral-8)!important;
}


.input, textarea.input, .select {
    font-size: var(--font-size-m) !important;
}

.choices-disabled .choices__list--single .choices__item {
      color: var(--color-neutral-8)!important;
}

/* scrollbar */
/* width */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--color-neutral-1); 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--color-neutral-6); 
  border-radius: 50px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--color-neutral-7); 
  border-radius: 50px;
}

/* end scrollbar */

 /* toggle  */
.toggle-button{
     border-radius: var(--border-radius-rounded)!important;
}
    
.toggle-button:after{
     border-radius: var(--border-radius-circle)!important;
}
    
.custom-toggle .toggle-label {
    color: var(--color-neutral-0) !important;
}

.toggle-button.toggle-button-disabled.custom-toggle-checked {
    background-color: var(--color-success) !important;
    border: var(--border-size-s) solid var(--color-success) !important;
    pointer-events: none !important;
}

    
.sample-box-info{
    background-color: #fff;
    color: var(--color-neutral-7);
    font-size: 14px;
    padding: 4px 2px 4px 2px;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    box-shadow:var(--color-primary);
}

.required:after {
    content:" *";
    color: red;
    font-size: 1.4em;
    line-height: 1;
}

.customDD-position .choices__list.choices__list--dropdown {
    position: relative !important;
}

div.custom-modal-footer .modal-footer {
    padding: 0 !important;
    border-top: var(--border-size-s) solid var(--color-neutral-4);
    background: var(--color-neutral-0)!important;
}

div.modal-inherit .modal-content {
    overflow-y:inherit !important;
}

.custom-accordion.accordion-item .accordion-item-content {
     padding-left:0px !important; 
}

.custom-choices-dropdown .choices__item {
    height: auto !important;    
}

/* Popup confirm */
.swal2-confirm{
    background-color: var(--color-primary) !important;
    border-left-color: var(--color-primary) !important;
    border-right-color: var(--color-primary) !important;
}

/*.swal2-confirm:hover{
    background-color: var(--color-primary) !important;
    border-left-color: var(--color-primary) !important;
    border-right-color: var(--color-primary) !important;
}*/

.swal2-cancel{
    background-color: rgb(255 255 255) !important;
    border-width: 1px !important;
    color: var(--color-primary) !important;
    border-color: color: var(--color-primary) !important;
    border-style: solid !important;
}
/*.swal2-cancel:hover{
    background-color: rgb(255 255 255) !important;
    border-width: 1px !important;
    color: var(--color-primary) !important;
    border-color: color: var(--color-primary) !important;
    border-style: solid !important;
}*/


.swal2-modal .swal2-styled{
    border-radius: var(--border-radius-soft);
    min-width: 120px !important;
    margin: 10px 10px 20px 10px !important;
    padding: 9px 32px !important;
}


.tableFixHead          { overflow: auto !important; height: 40vh !important; }
.tableFixHead thead th { position: sticky !important; top: 0 !important;  z-index: 1 !important; }

.tableFixHead table  { border-collapse: collapse !important; width: 100% !important; }
.tableFixHead,
.tableFixHead td {
  box-shadow: inset 1px -1px var(--color-neutral-3)!important;
}
.tableFixHead th {
  box-shadow: inset 1px 1px  var(--color-neutral-3), 0 1px var(--color-neutral-3)!important;
}

textarea[readonly]  {
    background-color: var(--color-neutral-2)!important;
    color: var(--color-neutral-8)!important;
}

/* ===================================================================== */
/*  CSS for support new upgrade (16/01/23)                               */
/* ===================================================================== */
/* fixed tab layer switching by park */
/*.tabs-header-item span, .tabs-header-item div {
    z-index: -1;
}  
disable tab z-index: -1; by poj  (17/02/2023) */