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

/* ===================================================================== */
/*  Fix for Fixed Header - Add spacing to push content below header     */
/* ===================================================================== */

/* Add margin-top to content below fixed header */
.main > .content {
    margin-top: 30px;
}

/* Responsive spacing - match original site behavior on mobile */
@media (max-width: 768px) {
    .main > .content {
        margin-top: 21px;
    }
}

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

.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                                  */

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


/* ===================================================================== */
/*  $1 - Home Page Styles                                                */
/* ===================================================================== */
.home-banner {
    background-image: url(/OutSystemsUILiveStyleGuide/img/HeroBackground.png?18766);
    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%;
}

.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-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; 
}

.banner_corp_logo_pos {
    margin-top: -15%;
    height: calc(100vw * 0.15);
}

.banner_corp_text_pos {
    margin-top: -12%;
    height: calc(100vw * 0.15);
}

.heading_corp_logo_pos {
    margin-top: -130px;
     height: 130px;
}

.floating-menu {
    bottom: calc(100vw * 0.02);
    left: 10px;
    z-index: 100;
    position: fixed;
  }
  
  .tabs-header-item-pd-base {    
    padding: var(--space-base) !important;
}

.required:after {
   /* content:" *";
    color: red;*/
}

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

/* loading */
.lds-default-main {
background:#b6c6df2e;
    z-index: 999;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  /*  display: none;*/
    backdrop-filter: blur(5px);
}
.lds-default {
    display: block;
    z-index: 999;
    position: fixed;
    left: 50%;
    top: 50%;
}
.lds-default div {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #1777e0;
  border-radius: 50%;
  animation: lds-default 1.2s linear infinite;
}
.lds-default div:nth-child(1) {
  animation-delay: 0s;
  top: 37px;
  left: 66px;
}
.lds-default div:nth-child(2) {
  animation-delay: -0.1s;
  top: 22px;
  left: 62px;
}
.lds-default div:nth-child(3) {
  animation-delay: -0.2s;
  top: 11px;
  left: 52px;
}
.lds-default div:nth-child(4) {
  animation-delay: -0.3s;
  top: 7px;
  left: 37px;
}
.lds-default div:nth-child(5) {
  animation-delay: -0.4s;
  top: 11px;
  left: 22px;
}
.lds-default div:nth-child(6) {
  animation-delay: -0.5s;
  top: 22px;
  left: 11px;
}
.lds-default div:nth-child(7) {
  animation-delay: -0.6s;
  top: 37px;
  left: 7px;
}
.lds-default div:nth-child(8) {
  animation-delay: -0.7s;
  top: 52px;
  left: 11px;
}
.lds-default div:nth-child(9) {
  animation-delay: -0.8s;
  top: 62px;
  left: 22px;
}
.lds-default div:nth-child(10) {
  animation-delay: -0.9s;
  top: 66px;
  left: 37px;
}
.lds-default div:nth-child(11) {
  animation-delay: -1s;
  top: 62px;
  left: 52px;
}
.lds-default div:nth-child(12) {
  animation-delay: -1.1s;
  top: 52px;
  left: 62px;
}
@keyframes lds-default {
  0%, 20%, 80%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
}

/* end loading */

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: 90% !important;*/
  max-height: auto;
}

.Button {
    height: 35px !important;
    padding: var(--space-none) var(--space-l) !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;
}



.floating-actions-item-button {

   width: 100px !important;
   justify-content: left;
}

.floating-actions-item {
    margin-bottom: -10px  !important;
}

.floating-actions-button {
    height: 50px !important;  
    width: 50px !important; 
}

.layout .main {    
    padding-top: 0px  !important;  
}

.NavigationSubbar{
    display: none  !important;  
}


element.style {
}
.tooltip-widget {
}
* {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
user agent stylesheet
div {
    display: block;
}
.floating-actions-item-button:hover {
    background-color: var(--color-neutral-0) !important;
    box-shadow: 2px 2px 2px 2px rgba(50,50,50,.4);
    border-style: solid;
    border-width: 1px;
}

.tooltip span{
   white-space: nowrap !important;   
}

.floating-actions-item-button {
    background-color: transparent  !important;  
    box-shadow: none !important;  
     
}

.floating-actions-item-button:hover {
    background-color: transparent  !important;  
    box-shadow: none !important;   
    border: 0px !important;   
}


.img-item-button {
    background-color: transparent !important;
    border-width: 1px;
}

.img-item-button:hover {
    /*background-color: var(--color-neutral-0) !important;
    box-shadow: 2px 2px 2px 2px rgba(50,50,50,.4);
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;*/
    transform: scale(1.2);
}

.user-avatar{
    margin-top: 3px;
}

.img-item:hover {
    transform: scale(1.2);
}

.required:after {
/*    content:" *";
    color: red;*/
}

.Button-link {
    padding: 0px !important; 
}
._TableRecords_Header_height_40px_position_fixed__ {
    background-color: #fff;
    overflow-x: auto;
}