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

/*
    To override a style copy and paste it to 
    the application theme and then modify it

    File: LiverpoolTheme
    
    0. Resets
    1. General Properties
    2. Structure
    3. Forms
    4. Patterns
    5. RichWidgets
    6. Login
    7. Additional Classes
    8. Grid Samples
    0. Studio Preview
*/

/*------------------------------------*\
      $0. Resets
\*-------------------------------------*/

@-ms-viewport {
    width: device-width;
}

@viewport {
    width: device-width;
}


html,
body,
div,
span,
a,
img,
ul,
li,
form,
table,
tbody,
thead,
tr,
th,
td {
    border: 0;
    -moz-box-sizing: border-box; /*   Add this rule for old Firefox   */
         box-sizing: border-box;
    font-size: 100%;
    margin: 0;
    padding: 0;
}


html,
body,
a,
select,
fieldset,
input,
button,
select,
textarea,
optgroup,
option {
    font-family: Arial, Helvetica, Meiryo, sans-serif;
}

.startHidden {
    display: none;
    
}

.startHidden * {
    -webkit-transition: none !important;
            transition: none !important;
}

td,
textarea,
img {
    vertical-align: top;
}

img {
    border-width: 0;
}

th {
    text-align: left;
}

*:focus {
    outline: none;
}

* {
    box-sizing: border-box;
}

input::-moz-focus-inner {
    border: 0;
}

/*------------------------------------*\
        $1. General Properties
\*-------------------------------------*/

html {
    -webkit-text-size-adjust: 100%;
}

body {
    background: #ececec;
    color: #151515;
    font-size: 14px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

html,
body,
form,
.Page {
    height: 100%;
}

body,
select,
textarea,
input {
    color: #333;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.43;
}

a,
a:link,
a:visited {
    color: #125f90;
    text-decoration: none;
    -webkit-transition: color .2s ease-in;
            transition: color .2s ease-in;
}

a[disabled="disabled"],
a[disabled="disabled"]:hover {
    color: #ccc;
    text-decoration: none;
}

div[onclick] {
    cursor: pointer;
}

/*------------------------------------*\
              $2. Structure
\*-------------------------------------*/

/* Header **************************/
.Header {
    background-color: #2d3035;
    color: #d1d1d1;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 20;

     /* avoid adorners overlapping header */
}

.Header img {
    vertical-align: middle;
}

.Header_RightSection {
    float: right;
    height: 50px;
    line-height: 50px;
    width: 40px;
}

/* Button Menu **************************/
a.Header_ButtonMenu {
    color: #fff;
    display: none;
    font-size: 20px;
}

.tablet a.Header_ButtonMenu,
.phone a.Header_ButtonMenu {
    display: block;
}


/* on tablet and phone **************************/
.tablet .Application_Title,
.phone .Application_Title {
    padding: 0;
}


.Application_Title img {
    max-height: 20px;
    padding-bottom: 4px;
}

/* User info **************************/
.Login_Info,
.AppSwitcherContainer,
a.Login_Info_Username,
a.Login_Info_Username:link,
a.Login_Info_Username:visited {
    color: #fff;
    font-size: 100%;
    font-weight: normal;
    margin-right: 10px;
}

.Login_Info {
    float: right;
    padding: 15px 0;
}

.Login_Info_Logout {
    font-size: 0;
}

.Login_Info_Logout:before,
.Login_Info_Username:before,
.AppSwitcherContainer:before,
.AppSwitcherLink[disabled="disabled"]:before {
    font-family: FontAwesome;
    font-size: 14px;
    margin-right: 5px;
}

.Login_Info_Username:before {
    content: "\f007"; /* fa-user at http://fortawesome.github.io/Font-Awesome/icons/ */
}

.Login_Info_Logout:before {
    content: "\f011"; /* fa-power-off at http://fortawesome.github.io/Font-Awesome/icons/ */
    margin-right: 0;
}

/* on tablet and phone **************************/
.tablet .Login_Info_Logout:before,
.phone .Login_Info_Logout:before {
    font-size: 20px;
}

/* 
    *** Menu structure ***
    
    div.Header_Menu
    - div.Application_Menu
    - - div.Menu_TopMenus
    - - - div.Menu_DropDownButton
    - - - - div.Menu_TopMenu
    - - - - - sapn.Menu_DropDownArrow
    - - - - div.Menu_DropDownPanel
    - - - - - div.Menu_SubItemsPlaceholder
    - - - - - - a.Menu_SubMenuItem
    
*/

/* Menu **************************/

/* Application_Menu **************************/

.tablet .Application_Menu,
.phone .Application_Menu {
    bottom: 0;
    box-shadow: 0 3px 5px #888;
    display: block;
    height: auto;
    overflow: auto;
    position: fixed;
    right: -270px;
    top: 50px;
    /* Enable hardware acceleration */
    -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
            transform: translateZ(0);
    /* Animate the menu when opening and closing */
    -webkit-transition: all .3s ease-out;
            transition: all .3s ease-out;
    width: 260px;
    /* reduce animation flickering */

    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-perspective: 1000;
            perspective: 1000;
}

/* Menu_TopMenu **************************/
.tablet .Menu_TopMenus,
.phone .Menu_TopMenus {
    width: 100%;
}

/* .Menu_DropDownButton **************************/
.tablet .Application_Menu .Menu_DropDownButton,
.phone .Application_Menu .Menu_DropDownButton {
    display: block;
    position: relative;
}

.Menu_DropDownPanel a.Menu_SubMenuItem:hover,
.Menu_DropDownPanel a.Menu_SubMenuItem:link:hover,
.Menu_DropDownPanel a.Menu_SubMenuItem:visited:hover {
    background-color: #fff;
}

.header .Menu_DropDownPanel {
    border: var(--border-size-none) solid var(--color-neutral-0);
}


/* .Application_Menu **************************/
.tablet.active .Application_Menu,
.phone.active .Application_Menu {
    right: 0;
}

/* .Menu_TopMenu **************************/
.tablet .Menu_TopMenu,
.phone .Menu_TopMenu {
    border: 0;
    margin: 0;
    padding: 0;
    width: 100%;
}


.tablet .Menu_DropDownPanel,
.phone .Menu_DropDownPanel {
    background-color: #999;
    border: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
    position: static;
}

.phone .Menu_DropDownArrow,
.tablet .Menu_DropDownArrow {
    position: absolute;
    right: 14px;
    top: 21px;
}

/* Menu_SubMenuItem */
.Menu_DropDownPanel a.Menu_SubMenuItem,
.Menu_DropDownPanel a.Menu_SubMenuItem:link,
.Menu_DropDownPanel a.Menu_SubMenuItem:visited {
    display: block;
}

/* Page Title **************************/
.Title {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 70%;
}

.Title.Heading1 {
    line-height: 34px;
    margin-top: 0;
}

.phone.portrait .Title.Heading1 {
    border: none;
    display: block;
    height: 40px;
    margin-bottom: 10px;
    padding: 0;
    position: relative;
    text-align: center;
    width: 100%;
}

span.Heading1,
span.Heading2,
span.Heading3,
span.Heading4 {
    display: block;
}

.Heading1 {
    font-size: 26px;
    line-height: 1.2;
}

.Heading2 {
    font-size: 22px;
    line-height: 1.25;
}

.Heading3 {
    font-size: 18px;
    line-height: 1.11;
}

.Title_Section {
    margin-top: 34px;
    position: relative;
    
    
    
}

.Title_Section .Actions {
    
}

/* Scaffolding generated actions **************************/
a.ActionAdd,
a.ActionEdit,
a.ActionChange,
a.ActionDelete {
    background-color: #e73d25;
    border: 1px solid #d43e27;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    height: 32px;
    line-height: 30px;
    margin-left: 10px;
    padding: 0 15px;
    text-shadow: none;
}

a.ActionAdd:hover,
a.ActionEdit:hover,
a.ActionChange:hover,
a.ActionDelete:hover {
    background-color: #a42b1a;
    border-color: #a42b1a;
    box-shadow: 0 0 1px 0 rgba(50, 50, 50, .75);
    text-decoration: none;
}

a.ActionAdd:active,
a.ActionEdit:active,
a.ActionChange:active,
a.ActionDelete:active {
    box-shadow: 0 0 20px 5px rgba(0, 0, 0, .25) inset;
}

a[disabled="disabled"].ActionAdd,
a[disabled="disabled"].ActionEdit,
a[disabled="disabled"].ActionDelete,
a[disabled="disabled"].ActionChange {
    background-color: #ccc;
    border: 1px solid #ccc;
    box-shadow: none;
}

a[disabled="disabled"].ActionAdd:hover,
a[disabled="disabled"].ActionEdit:hover,
a[disabled="disabled"].ActionDelete:hover,
a[disabled="disabled"].ActionChange:hover {
    color: #fff;
}

/* content **************************/
.Content {
    background: #fbfbfb;
    margin-bottom: -50px;
    min-height: 100%;
    padding-top: 105px;
}

/* min width for desktop */
.desktop .Content.ThemeGrid_Wrapper {
    min-width: 980px;
}

/* phone and tablet **************************/
.phone .Content,
.tablet .Content {
    padding-top: 50px;
}

/* MainContent **************************/
.MainContent {
    background: #fbfbfb;
    margin-top: 30px;
    min-height: 100%;
    padding-bottom: 80px;

     /* push the footer down on preview */
}

.Page.active .MainContent {
    pointer-events: none;
}

/* Footer **************************/
.Footer {
    background: #2d3035;
    color: #999;
    font-size: 12px;
    min-height: 50px;
    padding: 10px 0;
    position: absolute;
    text-align: center;
    width: 100%;
}

.Footer img {
    padding-bottom: 3px;
}

/* Grid **************************/
.ThemeGrid_Container {
    margin-left: auto;
    margin-right: auto;
}

/* limit width **************************/
html .ThemeGrid_Container {
    max-width: 1240px;
    padding-left: 10px;
    padding-right: 10px;
}

/*------------------------------------*\
              $3. Forms
\*-------------------------------------*/
input[type="text"] {
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, .075);
    font-size: 14px;
    height: 32px;
    line-height: 30px;
    padding: 0 12px;
    vertical-align: middle;
}

input[type="text"]:focus {
    border: 1px solid #949494;
}

select {
    height: 32px;
    line-height: 30px;
    padding: 0 8px;
}

textarea,
select,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.Form input.ReadOnly,
.Form textarea.ReadOnly,
.Form select.ReadOnly {
    font-size: 16px;
    line-height: 30px;
}

textarea,
select,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
.Form input.ReadOnly,
.Form textarea.ReadOnly,
.Form select.ReadOnly {
    background-color: #fff;
    border: 1px solid #ccc;
    font-size: 14px;
    vertical-align: middle;
}

input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {
    height: 32px;
    padding: 0 12px;
}

input[type="text"].Not_Valid,
input[type="password"].Not_Valid,
input[type="datetime"].Not_Valid,
input[type="datetime-local"].Not_Valid,
input[type="date"].Not_Valid,
input[type="month"].Not_Valid,
input[type="time"].Not_Valid,
input[type="week"].Not_Valid,
input[type="number"].Not_Valid,
input[type="email"].Not_Valid,
input[type="url"].Not_Valid,
input[type="search"].Not_Valid,
input[type="tel"].Not_Valid,
input[type="color"].Not_Valid {
    border: 1px solid #bf1601;
    padding: 0 12px;
}

input[type="text"].Not_Valid:focus,
input[type="password"].Not_Valid:focus,
input[type="datetime"].Not_Valid:focus,
input[type="datetime-local"].Not_Valid:focus,
input[type="date"].Not_Valid:focus,
input[type="month"].Not_Valid:focus,
input[type="time"].Not_Valid:focus,
input[type="week"].Not_Valid:focus,
input[type="number"].Not_Valid:focus,
input[type="email"].Not_Valid:focus,
input[type="url"].Not_Valid:focus,
input[type="search"].Not_Valid:focus,
input[type="tel"].Not_Valid:focus,
input[type="color"].Not_Valid:focus {
    border: 1px solid #bf1601;
}

/*------------------------------------*\
             $4. Patterns
/*------------------------------------*/
/* Section **************************/
.Section {
    margin: 20px 0 0;
}

.Section:first-child {
    margin-top: 0;
}

.Section_header {
    border-bottom: 1px solid #ccc;
    display: table;
    margin-top: 0;
    min-height: 38px;
    padding-bottom: 5px;
    width: 100%;
}

.tablet .Section_header,
.phone .Section_header {
    min-height: 44px;
}

.Section__title.Heading2 {
    display: table-cell;
    min-width: 100px;
    vertical-align: middle;
}

.Section__title.Heading2 span.fa {
    margin-right: 5px;
}

.Section__actions {
    display: table-cell;
    min-width: 100px;
    text-align: right;
    vertical-align: middle;
}

.Section__actions > * {
    float: right;
    margin-left: 10px;
}

.Section_content {
    padding-top: 10px;
}

/* SectionExpandable **************************/

.Panel .SectionExpandable {
    margin-top: 0;
}

.Panel_content.nopadding {
    padding: 0;
}

.SectionExpandable_header {
    border-bottom: 1px solid #ddd;
    cursor: pointer;
    display: table;
    margin-top: 0;
    padding: 0 0 5px 0;
    width: 100%;
}

.SectionExpandable.expanded .SectionExpandable_header {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.SectionExpandable__title.Heading2 {
    display: table-cell;
    min-width: 100px;
    text-align: left;
    vertical-align: middle;
}

.SectionExpandable__title.Heading2 span.fa {
    margin-right: 5px;
}

.SectionExpandable__icon.Heading2 {
    display: table-cell;
    text-align: right;
    vertical-align: middle;
    width: 16px;
}

.SectionExpandable.expanded .SectionExpandable__icon {
    -webkit-transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
            transform: rotate(-180deg);
}

.SectionExpandable_content {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top: none;
    box-sizing: content-box;
    height: 0;
    margin-top: 0;
    overflow: hidden;
    padding: 0 10px;
    -webkit-transition: all 500ms cubic-bezier(.420, .000, .580, 1.000);
            transition: all 500ms cubic-bezier(.420, .000, .580, 1.000);
    visibility: visible;

    
}


.SectionExpandable.autoheight .SectionExpandable_content {
    display: block;
    height: auto !important;
    -webkit-transition: 0;
            transition: 0;
}


.SectionExpandable.expanded .SectionExpandable_content {
    display: block;
    height: auto;
    overflow: visible;
    padding: 10px;
    visibility: visible;
}

/* Table **************************/
.TableVerticalAlign .Cell1,
.TableVerticalAlign .Cell2 {
    padding: 3px;
}

.TableVerticalAlign .Cell1 > input[type="radio"],
.TableVerticalAlign .Cell1 > input[type="checkbox"],
.TableVerticalAlign .Cell2 > input[type="radio"],
.TableVerticalAlign .Cell2 > input {
    display: block;
}

/* TableRecords **************************/
.TableRecords_Header {
    border-bottom: 1px solid #d0d0d0;
    color: #2e3136;
    font-size: 14px;
    font-weight: bold;
    padding: 5px 0 10px 10px;
}

.TableRecords > tbody > tr:hover {
    background: #fafcff;
}

.TableRecords {
    background: none repeat scroll 0 0 #fff;
    border-color: #d0d0d0;
    border-style: solid;
    border-width: 1px;
    padding: 5px 0 0;
}

.TableRecords_OddLine,
.TableRecords_EvenLine {
    border-bottom: none;
}

.TableRecords_EvenLine {
    background-color: #f4f4f4;
}

.TableRecords_OddLine:first-child,
.TableRecords_EvenLine:first-child,
.TableRecords_Header:first-child {
    padding-left: 20px;
}


.TableRecords_Header {
    border-bottom: 2px solid #c2c2c2;
    color: #999;
    padding: 5px 0 10px 10px;
}

.TableRecords_Header a,
.TableRecords_Header a:link,
.TableRecords_Header a:visited {
    color: #999;
}

.desktop .TableRecords > tbody > tr:hover,
.desktop .TableRecords > tbody > tr:hover td,
.desktop .EditableTable > tbody > tr:hover td {
    background: #fafcff;
}

.TableRecords {
    background: #fff;
    border-bottom: 1px solid #c2c2c2;
    border-top: 2px solid #c2c2c2;
    margin-top: 20px;
    padding: 5px 0 0 0;
}

/* If is inside a Panel_content without padding **************************/
.Panel_content.nopadding .TableRecords {
    border: 0;
}

.TableRecords_OddLine,
.TableRecords_EvenLine {
    border-bottom: 1px solid #c2c2c2;
    padding: 7px 0 7px 10px;
}

.desktop .TableRecords_OddLine:first-child,
.desktop .TableRecords_EvenLine:first-child,
.desktop .TableRecords_Header:first-child,
.tablet .TableRecords_OddLine:first-child,
.tablet .TableRecords_EvenLine:first-child,
.tablet .TableRecords_Header:first-child {
    padding-left: 20px;
}

.TableRecords_OddLine:last-child,
.TableRecords_EvenLine:last-child,
.TableRecords_Header:last-child {
    padding-right: 20px;
}

.TableRecords_TopNavigation {
    padding: 5px 0;
}

.TableRecords_BottomNavigation {
    margin-top: 15px;
}

.RecordPicture {
    border: 1px solid #eaeaea;
    max-width: 138px;
}

.RecordPicture_Wrapper {
    max-width: 138px;
}

.RecordPicture_Wrapper .RecordPicture {
    display: block;
}

.TableRecords .RecordPicture {
    max-height: 40px;
}

/* TableRecordsResponsiveExpandable **************************/
.TableRecords:not(.NoResponsive) div.TableRecords_Label {
    display: none;
}

.tablet.portrait .TableRecords:not(.NoResponsive) .TableRecords_Label,
.phone .TableRecords:not(.NoResponsive) .TableRecords_Label {
    color: #999;
    display: block;
}

.tablet.portrait .TableRecords:not(.NoResponsive) > * > * > td:first-child .TableRecords_Label,
.phone .TableRecords:not(.NoResponsive) > * > * > td:first-child .TableRecords_Label {
    display: inline-block; /* for master details with checkboxes*/
}

.tablet.portrait .TableRecords:not(.NoResponsive) > * > * > td:first-child .TableRecords_Label:first-child,
.phone .TableRecords:not(.NoResponsive) > * > * > td:first-child .TableRecords_Label:first-child {
    display: none;
}

.tablet.portrait .TableRecords:not(.NoResponsive),
.phone .TableRecords:not(.NoResponsive) {
    padding: 0;
}

.tablet.portrait .TableRecords:not(.NoResponsive) > * > * > td.TableRecords_OddLine,
.tablet.portrait .TableRecords:not(.NoResponsive) > * > * > td.TableRecords_EvenLine,
.phone .TableRecords:not(.NoResponsive) > * > * > td.TableRecords_OddLine,
.phone .TableRecords:not(.NoResponsive) > * > * > td.TableRecords_EvenLine {
    border-bottom: none;
    box-sizing: border-box;
    display: none;
    float: left;
    padding: 5px;
    width: 100%;

    
}

/* no hidden for .ResponsiveTableRecords **************************/
.tablet.portrait .TableRecordsResponsive > .TableRecords td.TableRecords_OddLine,
.tablet.portrait .TableRecordsResponsive > .TableRecords td.TableRecords_EvenLine,
.phone .TableRecordsResponsive > .TableRecords td.TableRecords_OddLine,
.phone .TableRecordsResponsive > .TableRecords td.TableRecords_EvenLine {
    display: block;
}

.tablet.portrait .TableRecords:not(.NoResponsive) > * > * > td.TableRecords_OddLine:first-child,
.tablet.portrait .TableRecords:not(.NoResponsive) > * > * > td.TableRecords_EvenLine:first-child,
.phone .TableRecords:not(.NoResponsive) > * > * > td.TableRecords_OddLine:first-child,
.phone .TableRecords:not(.NoResponsive) > * > * > td.TableRecords_EvenLine:first-child {
    border-top: 1px dotted #ccc;
    cursor: pointer;
    display: block;
    padding-bottom: 10px;
    padding-top: 10px;

    
}

/* no pointer for .TableRecordsResponsive **************************/
.tablet.portrait .TableRecordsResponsive > .TableRecords td.TableRecords_OddLine:first-child,
.tablet.portrait .TableRecordsResponsive > .TableRecords td.TableRecords_EvenLine:first-child,
.phone .TableRecordsResponsive > .TableRecords td.TableRecords_OddLine:first-child,
.phone .TableRecordsResponsive > .TableRecords td.TableRecords_EvenLine:first-child {
    cursor: default;
}

.tablet.portrait .TableRecords:not(.NoResponsive) tr:first-child td.TableRecords_OddLine:first-child,
.tablet.portrait .TableRecords:not(.NoResponsive) tr:first-child td.TableRecords_EvenLine:first-child,
.phone .TableRecords:not(.NoResponsive) tr:first-child td.TableRecords_OddLine:first-child,
.phone .TableRecords:not(.NoResponsive) tr:first-child td.TableRecords_EvenLine:first-child {
    border: none;
}

.tablet.portrait .TableRecords:not(.NoResponsive) > thead,
.phone .TableRecords:not(.NoResponsive) > thead {
    display: none;

    
}

.tablet.portrait .TableRecords:not(.NoResponsive) > * > * > td *,
.phone .TableRecords:not(.NoResponsive) > * > * > td * {
    text-align: left;
}

.tablet.portrait .TableRecords:not(.NoResponsive) > * > * > td .Post .Post_icon,
.phone .TableRecords:not(.NoResponsive) > * > * > td .Post .Post_icon,
.tablet.portrait .TableRecords:not(.NoResponsive) > * > * > td .Post .Post_icon .fa-fw, 
.phone .TableRecords:not(.NoResponsive) > * > * > td .Post .Post_icon .fa-fw, 
.tablet.portrait .TableRecords:not(.NoResponsive) > * > * > td .UserInitials,
.phone .TableRecords:not(.NoResponsive) > * > * > td .UserInitials,
.tablet.portrait .TableRecords:not(.NoResponsive) > * > * > td .Progress span,
.phone .TableRecords:not(.NoResponsive) > * > * > td .Progress span,
.tablet.portrait .TableRecords:not(.NoResponsive) > * > * > td .Counter .Counter_number,
.phone .TableRecords:not(.NoResponsive) > * > * > td .Counter .Counter_number,
.tablet.portrait .TableRecords:not(.NoResponsive) > * > * > td .Counter .Counter_label,
.phone .TableRecords:not(.NoResponsive) > * > * > td .Counter .Counter_label,
.tablet.portrait .TableRecords:not(.NoResponsive) > * > * > td .Tile .TileIcon_icon,
.phone .TableRecords:not(.NoResponsive) > * > * > td .Tile .TileIcon_icon,
.tablet.portrait .TableRecords:not(.NoResponsive) > * > * > td .Tile .TileIcon_text,
.phone .TableRecords:not(.NoResponsive) > * > * > td .Tile .TileIcon_text,
.tablet.portrait .TableRecords:not(.NoResponsive) > * > * > td .Tile .TileIconText_icon,
.phone .TableRecords:not(.NoResponsive) > * > * > td .Tile .TileIconText_icon,
.tablet.portrait .TableRecords:not(.NoResponsive) > * > * > td .Tile .TileIconText_label,
.phone .TableRecords:not(.NoResponsive) > * > * > td .Tile .TileIconText_label,
.tablet.portrait .TableRecords:not(.NoResponsive) > * > * > td .Tile .TilleIconText_text,
.phone .TableRecords:not(.NoResponsive) > * > * > td .Tile .TilleIconText_text,
.tablet.portrait .TableRecords:not(.NoResponsive) > * > * > td .Tile .TileNumber_number,
.phone .TableRecords:not(.NoResponsive) > * > * > td .Tile .TileNumber_number,
.tablet.portrait .TableRecords:not(.NoResponsive) > * > * > td .Tile .TileNumber_text,
.phone .TableRecords:not(.NoResponsive) > * > * > td .Tile .TileNumber_text,
.tablet.portrait .TableRecords:not(.NoResponsive) > * > * > td .WizardParent .WizardStep div,
.phone .TableRecords:not(.NoResponsive) > * > * > td .WizardParent .WizardStep div, 
.tablet.portrait .TableRecords:not(.NoResponsive) > * > * > td .WizardParent .WizardStep a,
.phone .TableRecords:not(.NoResponsive) > * > * > td .WizardParent .WizardStep a,
.tablet.portrait .TableRecords:not(.NoResponsive) > * > * > td .Tabs .Tabs__tab,
.phone .TableRecords:not(.NoResponsive) > * > * > td .Tabs .Tabs__tab,
.tablet.portrait .TableRecords:not(.NoResponsive) > * > * > td .Blank_row > div,
.phone .TableRecords:not(.NoResponsive) > * > * > td .Blank_row > div,
.tablet.portrait .TableRecords:not(.NoResponsive) > * > * > td .Blank_wrapper > div,
.phone .TableRecords:not(.NoResponsive) > * > * > td .Blank_wrapper > div {
    text-align: center;
}

.tablet.portrait .TableRecords:not(.NoResponsive) > * > * > td .Panel .Panel__actions, 
.phone .TableRecords:not(.NoResponsive) > * > * > td .Panel .Panel__actions,
.tablet.portrait .TableRecords:not(.NoResponsive) > * > * > td .Buttons .Buttons_Right,
.phone .TableRecords:not(.NoResponsive) > * > * > td .Buttons .Buttons_Right {
    text-align: right;
}

.tablet.portrait .TableRecords:not(.NoResponsive) tr.TableRecords_ExpandedRow td.TableRecords_OddLine,
.tablet.portrait .TableRecords:not(.NoResponsive) tr.TableRecords_ExpandedRow td.TableRecords_EvenLine,
.phone .TableRecords:not(.NoResponsive) tr.TableRecords_ExpandedRow td.TableRecords_OddLine,
.phone .TableRecords:not(.NoResponsive) tr.TableRecords_ExpandedRow td.TableRecords_EvenLine {
    display: block;

    
}

.tablet.portrait .TableRecords:not(.NoResponsive) > * > * > td:first-child:before,
.phone .TableRecords:not(.NoResponsive) > * > * > td:first-child:before {
    color: #aaa;
    content: "\f0dd";
    float: right;
    font-family: FontAwesome;
    margin-right: 5px;
}

.tablet.portrait .TableRecords:not(.NoResponsive) > * > * > td:last-child:before,
.phone .TableRecords:not(.NoResponsive) > * > * > td:last-child:before {
    content: ""; /* hide the icon there is only one column (first and last child are the same) */
}

.tablet.portrait .TableRecords:not(.NoResponsive) > * > * > td[colspan]:first-child:before,
.phone .TableRecords:not(.NoResponsive) > * > * > td[colspan]:first-child:before {
    content: "";
}

.tablet.portrait .TableRecords:not(.NoResponsive) tr.TableRecords_ExpandedRow td:first-child:before,
.phone .TableRecords:not(.NoResponsive) tr.TableRecords_ExpandedRow td:first-child:before {
    content: "\f0de";
}

.tablet.portrait .TableRecords:not(.NoResponsive) tr.TableRecords_ExpandedRow td:last-child:before,
.phone .TableRecords:not(.NoResponsive) tr.TableRecords_ExpandedRow td:last-child:before {
    content: ""; /* hide the icon there is only one column (first and last child are the same) */
}

.tablet.portrait .TableRecords:not(.NoResponsive).Expanded td.TableRecords_OddLine,
.tablet.portrait .TableRecords:not(.NoResponsive).Expanded td.TableRecords_EvenLine,
.phone .TableRecords:not(.NoResponsive).Expanded td.TableRecords_OddLine,
.phone .TableRecords:not(.NoResponsive).Expanded td.TableRecords_EvenLine {
    display: table-cell;

    
}

.tablet.portrait .TableRecords:not(.NoResponsive).Expanded td:first-child:before,
.phone .TableRecords:not(.NoResponsive).Expanded td:first-child:before {
    display: none;

    
}
.tablet.portrait .TableRecords:not(.NoResponsive).Expanded td:first-child .TableRecords_Label:first-child,
.phone .TableRecords:not(.NoResponsive).Expanded td:first-child .TableRecords_Label:first-child {
    display: table-cell;
}

/*------------------------------------*\
              $5. RichWidgets
\*-------------------------------------*/

/* Feedback Message **************************/
div.Feedback_Message_Wrapper {
    left: 0;
    margin-top: 124px;
}

div.Feedback_Message_Error,
div.Feedback_Message_Success,
div.Feedback_Message_Warning,
div.Feedback_Message_Info {
    border-radius: 0;
    box-shadow: 0 1px 2px 0 rgba(50, 50, 50, .5);
    color: #fff;
    font-size: 14px;
    line-height: normal;
    max-width: 700px;
    min-width: 400px;
    padding: 10px 30px 10px 25px;
    word-break: break-word;

    -webkit-backface-visibility: hidden;
}

div.Feedback_Message_Error span,
div.Feedback_Message_Success span,
div.Feedback_Message_Warning span,
div.Feedback_Message_Info span,
a.Feedback_Message_Wrapper_Close {
    display: block;
    padding-left: 10px;
    padding-right: 10px;
}

div.Feedback_Message_Error img,
div.Feedback_Message_Success img,
div.Feedback_Message_Warning img,
div.Feedback_Message_Info img {
    display: none;
}

a.Feedback_Message_Wrapper_Close {
    font-size: 14px;
    right: 0;
    text-align: right;
    top: 2px;
}

a.Feedback_Message_Wrapper_Close:hover {
    text-decoration: none;
}

.Feedback_Message_Error {
    background-color: #e09d90;
    border-color: #d87c69;
}

div.Feedback_Message_Error:before,
div.Feedback_Message_Success:before,
div.Feedback_Message_Warning:before,
div.Feedback_Message_Info:before {
    margin-top: 0;
}

.Feedback_Message_Success {
    background-color: #a9c264;
    border-color: #97ae58;
}

.Feedback_Message_Warning {
    background-color: #f5c459;
    border-color: #c78e10;
}

.Feedback_Message_Info {
    background-color: #62b6d1;
    border-color: #009bd0;
}

/* Ajax Loading **************************/
.Feedback_AjaxWait {
    background-color: white;
    border-radius: 0;
    box-shadow: 1px 2px 8px 0 rgba(73, 70, 70, .48);
    color: #e73d25;
    font-size: 12px;
    height: 70px;
    padding: 0 15px;
}

.Feedback_AjaxWait .Loader {
    background: url(/WebPatterns/img/loading_liverpool_red.gif?36528&4759) no-repeat;
    height: 11px;
    margin-bottom: 15px;
    margin-top: 20px;
    position: relative;
    text-indent: -9999em;
    width: 16px;
}

/*------------------------------------*\
              $6. Login
\*-------------------------------------*/

.Login_Title {
    color: #fff;
    font-size: 44px;
    font-weight: normal;
    text-shadow: 0 2px 2px rgba(122, 122, 122, .7);
}

.Login_Box {
    margin-left: -150px;
    width: 300px;
}

.Login_Text {
    color: #333;
    font-size: 12px;
    font-weight: bold;
}

.Login_background + span .Feedback_Message_Wrapper {
    left: 0;
    margin-top: 0;
}

.Login_background + span .Feedback_Message_Wrapper span + .Feedback_Message_Error {
    max-width: none;
    min-width: 100%;
}

.Login_background + span .Feedback_Message_Wrapper span + .Feedback_Message_Error .Feedback_Message_Wrapper_Close:after {
    color: #fff;
    line-height: 30px;
}

.Login_Footer {
    color: #999;
}

/* Responsive Context **************************/
.tablet .Login_Info_Username {
    margin-right: 10px;
}

.phone .Login_Info_Username {
    display: none;
}

.tablet .Login_Info_Logout,
.phone .Login_Info_Logout {
    bottom: 10px;
    position: fixed;
    right: -260px;
    z-index: 1;
}

.tablet.active .Login_Info_Logout,
.phone.active .Login_Info_Logout {
    right: 15px;
}

/* Iphone X Landscape Styles */
.iphonex.landscape .ThemeGrid_Container {
    padding-left: constant(safe-area-inset-left);
    padding-left: env(safe-area-inset-left);
    padding-right: constant(safe-area-inset-right);
    padding-right: env(safe-area-inset-right);
}

* {
    font-family: Meiryo, sans-serif;
}

/*------------------------------------*\
       $7. Additional Classes
\*------------------------------------*/

.PH:empty,
.Hidden,
.Print_visible,
.desktop .HiddenInDesktop {
    display: none;
}

.Float_right {
    float: right;
}

.Float_left {
    float: left;
}

.noTransition {
    -webkit-transition: none !important;
            transition: none !important;
}

.Note {
    color: #888;
}

.Bold {
    font-weight: bold;
}

.Italic {
    font-style: italic !important;
}

.Bold.Italic {
    font-style: italic !important;
    font-weight: bold !important;
}

.Underline {
    display: inline;
    text-decoration: underline !important;
}

.Text_small {
    font-size: .8em !important;
}

.Text_uppercase {
    text-transform: uppercase !important;
}

.Text_large {
    font-size: 1.2em !important;
}

.Text_shadow {
    text-shadow: 1px 1px 2px rgba(0, 0, 0, .7);
}

.Code {
    font-family: monospace;
    font-size: .9em;
}

.First {
    margin-left: 0 !important;
}

.Last {
    margin-right: 0 !important;
}

div.Feedback_Message_Wrapper {
    left: 0;
    z-index: 5000;
}

.Text_Note {
    color: #888;
    font-size: 12px;
}

.Text_Error {
    color: #c7331f;
}

.Label {
    background-color: #cfcfcf;
    color: #666;
    font-size: 12px;
    font-weight: normal;
    margin: 0 10px;
    padding: 2px 5px;
    vertical-align: middle;
    white-space: nowrap;
}

/* Colors: Background and Text **************************/
.Transparent {
    background-color: transparent;
}

.White {
    background-color: #fff;
}

.Text_white {
    color: #fff;
}

.Red {
    background-color: #c0392b;
}

.Text_red {
    color: #c0392b;
}

.Green {
    background-color: #2ecc71;
}

.Text_green {
    color: #27ae60;
}

.Purple {
    background-color: #9b59b6;
}

.Text_purple {
    color: #9b59b6;
}

.Blue {
    background-color: #2980b9;
}

.Text_blue {
    color: #2980b9;
}

.Orange {
    background-color: #f39c12;
}

.Text_orange {
    color: #f39c12;
}

.Yellow {
    background-color: #f1c40f;
}

.Text_yellow {
    color: #f1c40f;
}

.Silver {
    background-color: #ecf0f1;
}

.Text_silver {
    color: #bdc3c7;
}

.Gray {
    background-color: #7f8c8d;
}

.Text_gray {
    color: #7f8c8d;
}

.Black {
    background-color: #333;
}

.Text_black {
    color: #333;
}

/* 8. Grid Samples */
/* Cells color */
.wj-alt:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected).Orange,
.wj-cell:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected).Orange {
    background-color: #f39c12;
}

.wj-alt:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected).Yellow,
.wj-cell:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected).Yellow {
    background-color: #f1c40f;
}

.wj-alt:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected).Red,
.wj-cell:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected).Red {
    background-color: #c0392b;
}

.wj-alt:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected).Green,
.wj-cell:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected).Green {
    background-color: #2ecc71;
}

.wj-alt:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected).Black,
.wj-cell:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected).Black {
    background-color: #000;
}

.wj-alt:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected).Blue,
.wj-cell:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected).Blue {
    background-color: #09aac5;
}

.wj-alt:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected).Gray,
.wj-cell:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected).Gray {
    background-color: #cacaca;
}

.wj-alt:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected).Silver,
.wj-cell:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected).Silver {
    background-color: #b1b1b1;
}

.wj-alt:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected).White,
.wj-cell:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected).White {
    background-color: #fff;
}