@import url("/CustomSilkUI/Theme.Patterns_SilkUI.css?1212");

/* 
    File: Patterns_Liverpool
    
    1. Imports
    2.1 Patterns > Content
    2.2 Patterns > Controls
    2.3 Patterns > Data
    2.4 Patterns > Development
    2.5 Patterns > Email
    2.6 Patterns > Layout
    2.7 Patterns > Mobile
    2.8 Patterns > Navigation
    2.9 Patterns > Responsive
    2.10 Patterns > Structure
    2.11 Patterns > Utilities
    3. Usefull Classes
    4. Buit-in widgets 
    5. List Documents
*/

/*------------------------------------*\
              $1. Imports
\*-------------------------------------*/

/* Moved font import to theme template (starter app) */



/*------------------------------------*\
      $2.1 Patterns > Content
\*------------------------------------*/

/* Accordion **************************/
.Accordion {
    background-color: #fff;
    border: 1px solid #d0d0d0;
}

.AccordionVertical {
    background: #fff;
}

/* Accordion Harrow **************************/
.Accordion .fa-angle-down:before {
    padding-left: 1px;
}

/* Alerts **************************/
.Alert.Info {
    background-color: #aabdcf;
    border-color: #aabdcf;
    color: #333;
}

.Alert.Success {
    background-color: #acc965;
    border-color: #acc965;
    color: #333;
}

.Alert.Error {
    background-color: #900;
    border-color: #900;
    color: #fff;
}

.Alert.Warning {
    background-color: #f2c94e;
    border-color: #f2c94e;
    color: #333;
}

/* Balloon ******/

.Balloon {
    border: 1px solid #ccc;
}

/* BlankSlate **************************/
.Blank {
    background-color: #fff;
    padding-bottom: 20px;
}

/* Card **************************/
.Card {
    background-color: #fff;
    border: 1px solid #ccc;
}

/* Panel **************************/
.Panel {
    background-color: #fff;
}

.Panel_content {
    border: none;
}

.Panel_footer {
    background-color: #f7f7f7;
}

/* Post **************************/
.Post {
    background: none repeat scroll 0 0 #fff;
    border: 1px solid #d0d0d0;
    padding: 5px;
}

/* Tooltip **************************/
.tooltip_style {
    background-color: #393939;
}



/*------------------------------------*\
      $2.2 Patterns > Controls
\*------------------------------------*/

/* ButtonGroup **************************/
.ButtonGroup_button.Button {
    background-color: #fcfcfc;
    border-color: #ccc;
    border-left: 0;
    border-right: 1px solid #cbcbcb;
    color: #171717;
    height: 34px;
    line-height: 32px;
    padding: 0 10px;
}

.ButtonGroup_button.Button:hover,
.ButtonGroup_button.Button.active,
.ButtonGroup_button.Button:active {
    background: #e6e6e6;
    border-color: #cbcbcb;
}

.ButtonGroup_button.Button:first-child {
    border-bottom-left-radius: 4px;
    border-left: 1px solid #cbcbcb;
    border-top-left-radius: 4px;
}

.ButtonGroup_button.Button:last-child {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
}

/* override the border button rule on hover **************************/
.desktop .ButtonGroup .Button:hover {
    background: #e6e6e6;
    border: 1px solid #ccc;
    border-left: 0;
    box-shadow: none;
}

.desktop .ButtonGroup .Button:first-child:hover {
    border: 1px solid #ccc;
}

/* override rule for active/selected option over hover state **************************/
.desktop .ButtonGroup_button.Button:active,
.tablet .ButtonGroup_button.Button:active,
.phone .ButtonGroup_button.Button:active {
    box-shadow: 0 0 20px 5px rgba(0, 0, 0, .25) inset;
}

/* override rule active state over hover state **************************/
.desktop .ButtonGroup_button.Button.active,
.tablet .ButtonGroup_button.Button.active,
.phone .ButtonGroup_button.Button.active {
    background: #ccc;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}

/* Responsive Context **************************/
.tablet .ButtonGroup, .phone .ButtonGroup{
    box-shadow: none;
}

.tablet .ButtonGroup_button.Button, .phone .ButtonGroup_button.Button {
    border-left: 1px solid #ccc;
}

.tablet .ButtonGroup_button.Button:last-child, .phone .ButtonGroup_button.Button:last-child{
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.tablet .ButtonGroup_button.Button:first-child, .phone .ButtonGroup_button.Button:first-child {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.tablet .ButtonGroup_button.Button.active, .phone .ButtonGroup_button.Button.active {
    border-right-width: 1px;
}

.tablet .NoResponsive > .ButtonGroup .ButtonGroup_button.Button, .phone .NoResponsive > .ButtonGroup .ButtonGroup_button.Button {
    border-left-width: 0px; 
}

.tablet .NoResponsive > .ButtonGroup .ButtonGroup_button.Button:first-child, .phone .NoResponsive > .ButtonGroup .ButtonGroup_button.Button:first-child {
    border-bottom-left-radius: 3px;
    border-left-width: 1px;
    border-top-right-radius: 0;
}

.tablet .NoResponsive > .ButtonGroup .ButtonGroup_button.Button:last-child, .phone .NoResponsive > .ButtonGroup .ButtonGroup_button.Button:last-child {
    border-top-right-radius: 3px;
    border-bottom-left-radius: 0px;
}

/* Calendar **************************/
.pika-table th {
    border-bottom: 0;
}

.pika-prev:after,
.pika-next:after {
    color: #ca081e;   
}

.pika-title {
    border-bottom: 2px solid #ca081e;
}

.is-selected .pika-button {
   background-color: #ca081e;
}

.has-event .pika-button:after {
   background-color: #ca081e; 
}


/* Calendar DEPRECATED **************************/
.Calendar-dayNames {
    border-bottom: 0;
    border-top: 2px solid #ca081e;
}

.Calendar-navBtn > div {
    color: #ca081e;
}

.Calendar-day-selected,
.Calendar-day-selected:hover {
    background: #ca081e;
    color: #fff;
}

.Calendar-time-down, 
.Calendar-time-up, 
.Calendar-time-am {
    color: #ca081e;
}

/* Dropdown **************************/
.DropdownMenu .PH > a {
    color: #a4a4a4;
}

.DropdownMenu .PH > a:hover {
    color: #ca081e;
}

.open > .DropdownMenu {
    border-radius: 4px;
}

/* Dropdown: ButtonDropdown **************************/
.ButtonDropdown_text,
.ButtonDropdown_icon {
    color: #000;
    line-height: 30px;
    margin-left: 3px;
}

.tablet .ButtonDropdown_text,
.tablet .ButtonDropdown_icon,
.phone .ButtonDropdown_text,
.phone .ButtonDropdown_icon {
    line-height: 36px;
}

/* Dropdown: IconDropdown **************************/
.IconDropdown_button.Button {
    margin-left: 0;
    min-width: 35px;
    padding: 0 10px;
}

/* Select2 **************************/
.select2-dropdown-open .select2-choice,
.select2-container .select2-choice {
    box-shadow: none;
    height: 34px;
    line-height: 30px;
}

.select2-container .select2-choice .select2-arrow,
.select2-container .select2-choice div {
    border-left: 1px solid #ddd;
}

.select2-search input[type="text"] {
    margin-top: 4px;
}

.select2-container .select2-choice .select2-arrow b,
.select2-container .select2-choice div b {
    background: url("/WebPatterns/img/select2.png?623") no-repeat 0 3px;
}

.select2-search input[type="text"]:focus{
    border: 1px solid #ddd;
}

.select2-dropdown-open.select2-drop-above .select2-choice{
    border-bottom-color: #ddd;
}

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

.select2-container .select2-choice {
    border-radius: 0;
}

.select2-container-multi.select2-container-active .select2-choices {
    border: 1px solid #949494;
}

.select2-container-multi .select2-choices {
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, .075);
}

/* Toggle **************************/
.ToggleButton {
    border-color: #999;
    border-radius: 4px;
}

.ToggleButton.changed {
    border-color: #999;
}

.ToggleButton_label:after,
.ToggleButton_label.changed:after {
    border-radius: 4px;
    height: 20px;
    top: 3px;
    width: 20px;
}

.ToggleButton_label.changed:after {
    left: 26px;
}



/*------------------------------------*\
      $2.3 Patterns > Data
\*------------------------------------*/

/* Badge **************************/
.IconBadge_number {
    background-color: #e73d25;
    border: 2px solid #f2f2f2;
    text-shadow: 1px 1px #c0392b;
}



/*------------------------------------*\
      $2.8 Patterns > Navigation
\*------------------------------------*/

/*  Breadcrumbs **************************/
.Title .Breadcrumbs {
    color: #999;
    font-size: 12px;
    font-weight: normal;
    left: 0;
    margin-bottom: 0;
    position: absolute;
    top: -32px;
}

/* NavigationBar: Horizontal **************************/
.NavigationBar a,
.NavigationBar a:link,
.NavigationBar a:visited {
    color: #c7c7c7;
}

.NavigationBar a.Active {
    color: #3e5154;
}

.NavigationBar a:after,
.NavigationBar a:link:after {
    background-color: #c7c7c7;
    content: "";
}

.NavigationBar a.Active:after {
    background-color: #e83e26;
}

.NavigationBar a.Active:not(.IE8):before {
    border-bottom: 4px solid #e83e26;
    content: "";
}

/* Responsive Context */
.desktop .NavigationBar a:hover {
    text-decoration: none;
}

.desktop .NavigationBar a:hover,
.desktop .NavigationBar a:link:hover {
    color: #3e5154;
}

.desktop .NavigationBar a:hover:after,
.desktop .NavigationBar a:link:hover:after {
    background-color: #e83e26;
}

/* NavigationBar: Vertical **************************/
.NavigationBar.Vertical a.Active,
.NavigationBar.Vertical a:link.Active {
    border-color: #e83e26;
}

.NavigationBar.Vertical a.Active:not(.IE8):before {
    border-left: 4px solid #e83e26;
}

/* Responsive Context **************************/
.desktop .NavigationBar.Vertical a:hover,
.desktop .NavigationBar.Vertical a:link:hover {
    border-color: #e83e26;
}

.phone .NavigationBar .InlineDropdown:active:after,
.phone .NavigationBar .InlineDropdown:link:active:after,
.tablet .NavigationBar .InlineDropdown:active:after,
.tablet .NavigationBar .InlineDropdown:link:active:after,
.phone .NavigationBar a:active:after,
.phone .NavigationBar a:link:active:after,
.tablet .NavigationBar a:active:after,
.tablet .NavigationBar a:link:active:after {
    background-color: #e83e26;
}

/* SectionIndex **************************/
.SectionIndex.vertical a.active,
.SectionIndex.vertical a:hover {
    border-bottom: medium none;
    border-left-color: #ca081e;
}

.SectionIndex a.active,
.SectionIndex a:hover {
    border-bottom: 2px solid #ca081e;
    color: #ca081e;
    text-decoration: none;
}

/* TabsClient **************************/
.Tabs {
    background: #fff;
}

.Tabs_body {
    background-color: #fff;
}

.Tabs__tab {
    background-color: #f4f4f4;
    border-bottom-color: #ccc;
    line-height: 30px;
}

.Tabs__tab.active {
    background-color: #fff;
    border-bottom: none;
    border-top: 1px solid #ccc;
}

.Tabs__tab:hover {
    background-color: #fff;
}

.Tabs_body {
    padding: 20px;
}

.Tabs .PH:empty {
    display: none;
}

.Panel .Tabs__tab {
    border-top: none;
}

.TabsServer {
    border-color: #ccc;
}

.TabsServer a,
.TabsServer a:link,
.TabsServer a:visited {
    background-color: #e6e6e6;
    border-color: #ccc;
    color: #333;
    line-height: 30px;
}

.TabsServer a:hover,
.TabsServer a:active,
.TabsServer a.Active {
    background-color: #f2f2f2;
    border-bottom-color: #f2f2f2;
    color: #333;
}

.TabsServer a:hover {
    background-color: #f2f2f2;
    border-color: #ccc;
}

/* Wizard **************************/
.WizardStep {
    background-color: #c2c2c2;
}

.WizardStep:before {
    border-bottom-color: #c2c2c2;
    border-top-color: #c2c2c2;
}

.WizardStep a,
.WizardStep a:link,
.WizardStep a:visited {
    color: #fff;
}

.WizardStep.ActiveStep {
    background: #e83e26;
    font-weight: bold;
}

.WizardStep.ActiveStep:before {
    border-bottom-color: #e83e26;
    border-top-color: #e83e26;
}

.WizardStep.Past {
    background-color: #d43e27;
}

.WizardStep.Past:before {
    border-color: #d43e27;
}

.WizardStep.Past:after {
    border-right: 1px solid #900;
    border-top: 1px solid #900;
}

.WizardStep:after {
    border-right: 1px solid #efefef;
    border-top: 1px solid #efefef;
}



/*------------------------------------*\
      $3 Usefull Classes
\*------------------------------------*/

.Block_display {display: block}
.space_between{justify-content: space-between;}

/* Buttons **************************/
.Button,
a.Button {
    font-weight: normal;
    background-color: #004FB9;
    border: none;
    color: #fff;
    font-size: 18px;
    border-radius: 8px;
    -webkit-transition: all 100ms ease;
            transition: all 100ms ease;
}

input.Button {
    height: 45px;
    line-height: 45px;
    color: #fff;
    font-family: 'Barlow-Regular';
}

.desktop .Button:hover,
.desktop a.Button:hover {
    background-color: #004FB9;
    box-shadow: none;
    color: #fff;
}

.Button:hover:active,
a.Button:hover:active {
    background-color: #004FB9;
    color: #fff;
}

/* Default Action Button **************************/
.Button.ButtonDefault,
.Button.Is_Default,
.desktop .Button.ButtonDefault:hover,
.desktop .Button.Is_Default:hover {
    background-color: #004FB9;
    border-color: #004FB9;
    color: #fff;
}

.Button.ButtonDefault:hover:active,
.Button.Is_Default:hover:active {
    background-color: #004FB9;
    border-color: #004FB9;
    color: #fff;
}

/* DAction Button SeeMore **************************/
.Button.SeeMore {
    font-family: 'Barlow-Regular';
    background-color: #fff;
    border: 1px solid #999;
    color: #191919;
}

.desktop .Button.SeeMore:hover,
.Button.SeeMore:hover:active {
    background-color: #fff;
    border: 1px solid #999;
    color: #191919;
    -webkit-filter: none !important;
    filter: none !important;
}

.Button[disabled],
.Button:disabled,
.Button.Is_Default[disabled],
.Button.ButtonDefault[disabled],
.Button.Is_Default:disabled,
.Button.ButtonDefault:disabled,
.Button.Danger[disabled],
.Button.Danger:disabled,
.Button.Success[disabled],
.Button.Success:disabled {
    background-color: #f2f2f2;
    color: #636467;
}

/* Scaffolding buttons ***************************/
a.ActionAdd,
a.ActionAdd:link,
a.ActionAdd:visited,
a.ActionEdit,
a.ActionEdit:link,
a.ActionEdit:visited,
a.ActionDelete,
a.ActionDelete:link,
a.ActionDelete:visited,
a.ActionChange,
a.ActionChange:link,
a.ActionChange:visited {
    background-color: #cba900;
    border: 1px solid #cba900;
    border-bottom: 0;
    border-radius: 3px;
    box-shadow: inset 0 -2px 0 rgba(19, 24, 25, .2);
    color: #fff;
    display: inline-block;
    line-height: 30px;
    margin-left: 10px;
    min-width: 80px;
    padding: 0 15px;
    text-align: center;
    -webkit-transition: all 100ms ease;
            transition: all 100ms ease;
}

.desktop a.ActionAdd:hover,
.desktop a.ActionAdd:hover:visited,
.desktop a.ActionAdd:link:hover,
.desktop a.ActionEdit:hover,
.desktop a.ActionEdit:link:hover,
.desktop a.ActionEdit:link:visited,
.desktop a.ActionDelete:hover,
.desktop a.ActionDelete:hover:visited,
.desktop a.ActionDelete:link:hover,
.desktop a.ActionChange:hover,
.desktop a.ActionChange:hover:visited,
.desktop a.ActionChange:link:hover {
    background-color: #cba900;
    border-bottom-width: 1px;
    border-color: #cba900;
    box-shadow: none;
    color: #fff;
}

.desktop a.ActionAdd:hover:active,
.desktop a.ActionEdit:hover:active,
.desktop a.ActionDelete:hover:active,
.desktop a.ActionChange:hover:active {
    background-color: #b39501;
    border-color: #b39501;
    color: #fff;
}

/* Other buttons ***************************/
/* Cancel button */
.Button.Cancel {
    border: 1px solid #dadbde;
    border-bottom-width: 0;
    color: #79868a;
}

.desktop .Button.Cancel:hover {
    background-color: #fff;
    border: 1px solid #dadbde;
    color: #79868a;
}

.Button.Cancel:hover:active {
    color: #79868a;
}

/* Cancel Secondary */
.Button.Secondary,
.desktop .Button.Secondary:hover,
.Button.Secondary:hover:active {
    font-family: "Barlow-Medium";
    line-height: 36px;
    background-color: #fff !important;
    border: 2px solid #004FB9;
    color: #004FB9;
}

.Button.Success {
    background-color: #66bb6a;
    border-color: #66bb6a;
    color: #fff;
}

.desktop .Button.Success:hover {
    background-color: #559f59;
    border-color: #559f59;
    color: #fff;
}

.Button.Success:hover:active {
    background-color: #559f59;
    border-color: #559f59;
    color: #fff;
}

.Button.Danger,
a.ActionDelete {
    background-color: #ff5722;
    border-color: #ff5722;
    color: #fff;
}

.desktop .Button.Danger:hover {
    background-color: #ce461b;
    border-color: #ce461b;
    color: #fff;
}

.Button.Danger:hover:active {
    background-color: #ce461b;
    border-color: #ce461b;
    color: #fff;
}

.Button.Link {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    color: #c3a300;
}

.desktop .Button.Link:hover {
    background-color: transparent;
    border-color: #c3a300;
    color: #b39501;
}

a.Button.Link:active,
.Button.Link:active {
    background-color: transparent;
    border-bottom-width: 1px;
    border-color: #c3a300;
    color: #fff;
}

.Button.Small,
.Panel__Actions .Button,
.Section_Actions .Button {
    font-size: 11px;
    height: 26px;
    line-height: 24px;
    min-width: 60px;
    padding-left: 10px;
    padding-right: 10px;
}

.Button.Icon {
    min-width: 0;
}

.Button.Icon span.fa {
    margin: 0;
}

.Button.Loading:before,
.Button.Loading[disabled]:before,
.Button.Loading:disabled:before {
    background-image: url(/WebPatterns/img/loading_lisbon_yellow.gif?623);
    background-size: 16px 16px;
    content: "";
    display: inline-block;
    height: 16px;
    margin-right: 5px;
    margin-top: -2px;
    vertical-align: middle;
    width: 16px;
}

.Button.Is_Default.Loading:before,
.Button.Is_Default.Loading[disabled]:before,
.Button.Is_Default.Loading:disabled:before,
.Button.ButtonDefault.Loading:before,
.Button.ButtonDefault.Loading[disabled]:before,
.Button.ButtonDefault.Loading:disabled:before {
    background-image: url(/WebPatterns/img/loading_lisbon_white.gif?623);
}

.Button.Small.Loading:before {
    margin-top: 4px;
}

.Button.Loading.Icon:before {
    margin-right: 0;
}

.Button.Loading span.fa {
    display: none;
}

/* Responsive Context **************************/
.phone .Button,
.tablet .Button,
.phone a.Button,
.tablet a.Button {
    text-decoration: none;
    height: 45px;
}

.phone .Button.Small,
.tablet .Button.Small {
    height: 45px;
    line-height: 28px;
}
/* Text Classes **************************/
.Heading1 {
    font-size: 26px;
    line-height: 1.2;
}

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

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

.Label {
    border-radius: 0;
    margin: 0 5px;
}

/* OS PopUps **************************/

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: #ca081e;
}



/*------------------------------------*\
        $4. Buit-in widgets
\*-------------------------------------*/

/* filter form **************************/
.Filters_Wrapper .Button {
    margin-left: 10px;
}

/* ExcludeFromPickers: Accordion, AccordionVertical, active, ActiveStep, Blank, Breadcrumbs, ButtonDropdown_icon, ButtonDropdown_text, ButtonGroup, 
ButtonGroup_button, Buttons, calendarPattern, Card, changed, day, daynames, desktop, disabled, DropdownMenu, hilite, IconBadge_number, 
IconDropdown_button, IE8, InlineDropdown, Is_Default, Loading, mini, name, NavigationBar, Neutral, open, Panel, Panel_content, Panel_footer, 
Past, PH, phone, Post, SectionIndex, select2-choice, select2-container, selected, tablet, Tabs, Tabs__tab, Tabs_body, TabsServer, Title,
TitleMonth, TitleYear, ToggleButton, ToggleButton_label, tooltip_style, Vertical, WizardStep */

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

    File: LiverpoolTheme

    1. General Properties
    2. Structure
    3. Forms
    4. Built-in widgets
    5. RichWidgets
    6. Login
    7. Theme Grid
    0. Studio Preview
*/

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

body {
    background: #ececec;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

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

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

a,
a:link,
a:visited {
    color: #ca081e;
    -webkit-transition: color .2s ease-in;
            transition: color .2s ease-in;
}



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

/* header **************************/
.Header {
    display: table;
    left: 0;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 20;

    
}

.Header:empty {
    display: none;
}

.phone .Header, .tablet .Header {
    -webkit-transform: translateZ(0);
        -ms-transform: translateZ(0);
            transform: translateZ(0);
    -webkit-transition: left 300ms ease;
            transition: left 300ms ease;
}

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

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

/* APP Title **************************/
.Application_Title {
    color: white;
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 50px;
    overflow: hidden;
    padding-left: 3px;
    padding-right: 10px;
    text-decoration: none;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

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

.Application_Title a,
.Application_Title a:link,
.Application_Title a:visited,
.Application_Title a:hover {
    color: white;
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 1px;
    padding-right: 10px;
    text-decoration: none;
}

.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 {
    color: #fff;
    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 **************************/
.Header_Menu,
.Application_Menu {
    background-color: #ca081e; /* set the Application_Menu background color, applied when on slide mode */
    box-shadow: 0 -2px 0 0 rgba(0, 0, 0, .25) inset;
    white-space: nowrap;
    
}

/* Application_Menu **************************/
.Application_Menu a,
.Application_Menu a:link,
.Application_Menu a:visited {
    border-color: rgba(0, 0, 0, .15);
}

.tablet .Application_Menu a,
.phone .Application_Menu a,
.tablet .Application_Menu a:link,
.phone .Application_Menu a:link,
.phone .Application_Menu a:visited,
.phone .Application_Menu a:visited {
    border: 0;
    border-bottom: 1px solid #aa061b;
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
}

.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_TopMenu .Menu_DropDownArrow {
    border-top-color: #fff;
    position: absolute;
    right: 8px;
    top: 50%;
}

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

/* .Menu_TopMenu **************************/
.Menu_TopMenu {
    height: 51px;
    position: relative;
}

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

.Menu_TopMenuActive,
.Menu_DropDownButton.open .Menu_TopMenu {
    background-color: #a90002;
    border-bottom: none;
    box-shadow: 0 -2px 0 0 rgba(0, 0, 0, .25) inset;
}

.Menu_TopMenu a:link,
.Menu_TopMenu a:visited,
.Menu_TopMenu a {
    color: #fff;
    display: inline-block;
    padding: 15px 20px;
    text-decoration: none;
    text-shadow: none;
}

.Menu_TopMenu a:hover,
.Menu_TopMenu:hover {
    background-color: #a90002;
    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, .25) inset;
}

.Menu_TopMenuActive a:link,
.Menu_TopMenuActive a:visited,
a.Menu_SubMenuItemActive:link,
a.Menu_SubMenuItemActive:visited,
a.Menu_SubMenuItem:hover {
    color: white;
}

/* .Menu_DropDownPanel */
.Menu_DropDownPanel {
    background-color: #ca081e;
    border: none;
    box-shadow: none;
    margin-top: 0;
}

.Menu_DropDownPanel a,
.Menu_DropDownPanel a:link,
.Menu_DropDownPanel a:visited {
    border-bottom: solid 1px #aa061b;
    display: block;
    height: auto;
}

.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 {
    background-color: #ca081e;
    border-bottom: 1px solid rgba(0, 0, 0, .15);
    color: #fff;
    display: block;
    padding: 3px 30px;
}

.Menu_DropDownPanel a.Menu_SubMenuItem:hover,
.Menu_DropDownPanel a.Menu_SubMenuItem.Menu_SubMenuItemActive {
    background-color: #a90002;
}

/* Page Title **************************/

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

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

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

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

.Title_Section .Actions {
    
}

/* Actions page **************************/
.Actions {
    font-size: 16px;
    line-height: 34px;
    text-align: right;
    width: 30%;
}

.tablet.portrait .Actions,
.phone.portrait .Actions {
    margin-bottom: 0;
    padding: 0;
    position: relative;
    text-align: center;
    width: 100%;
}

.tablet.portrait .Actions .Button,
.phone.portrait .Actions .Button {
    margin: 0;
    margin-bottom: 10px;
    width: 100%;
}

.Actions a {
    margin-left: 20px;
}

.Actions a:first-child {
    margin-left: 0;
}

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

/* To work with old applications **************************/
.Title_Links {
    font-size: 14px;
    margin-top: 5px;
}

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

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

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

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

     /* push the footer down on preview */
}

.tablet .MainContent,
.phone .MainContent {
    margin-top: 20px !important;
    padding: 0 9px;
}

.tablet .MainContent.NoPadding,
.phone .MainContent.NoPadding {
    padding: 0px;
}

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

/* footer **************************/
.Footer {
    font-size: 12px;
    line-height: 40px;
    text-align: center;
    width: 100%;
    position: absolute;
    bottom: 0;
    height: 68px;
    background-color: #F2F2F2;

    
}

.Footer:empty {
    display: none;
}

.tablet .Footer,
.phone .Footer {
    height: 200px;
    line-height: 18px;
}

/*------------------------------------*\
        FOOTER
\*------------------------------------*/

.content-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 40px;
    font-size: 14px;
    color: #666666;
}

.tablet .content-footer,
.phone .content-footer {
    display: inline-block;
    padding: 10px;
}

.content-footer .right-content {
    display: flex;
    align-items: center;
}

.tablet .content-footer .right-content,
.phone .content-footer .right-content {
    display: inline-block;
}

.content-footer .right-content .link-Request-claims a {
    color: #002EFF;
    display: block;
    padding: 0 20px 0 0;
    margin: 0 20px 0 0;
    border-right: 1px solid #ccc;
    height: 42px;
    font-size: 14px;
}

.tablet .content-footer .right-content .link-Request-claims a,
.phone .content-footer .right-content .link-Request-claims a {
    height: auto;
    border: none;
    width: 100%;
    margin: 20px 0;
    padding: 0;
}

.content-footer .right-content .social-networks {
    display: flex;
    height: 48px;
    line-height: 48px;
}

.tablet .content-footer .right-content .social-networks,
.phone .content-footer .right-content .social-networks {
    display: inline-block;
    height: auto;
    line-height: 16px;
}

.tablet .content-footer .right-content .social-networks .text-indicator,
.phone .content-footer .right-content .social-networks .text-indicator {
    margin:20px 0;
    line-height: 16px;
}

.content-footer .right-content .social-networks .networks-content {
    margin: 0 0 0 10px;
    display: flex;
}

.tablet .content-footer .right-content .social-networks .networks-content,
.phone .content-footer .right-content .social-networks .networks-content {
    margin: 20px 0 0 0;
}

.content-footer .right-content .social-networks .networks-content .network {
    margin: 0 0 0 10px;
}

.tablet .content-footer .right-content .social-networks .networks-content .network,
.phone .content-footer .right-content .social-networks .networks-content .network {
    margin: 0 5px;
}

/*.Header___Flat {
    height: 60px;
    background-color: #002EFF;
}*/

.Footer___Flat {
    background-color: #F2F2F2;  
    color: #999999;       
    font-size: 14px;    
    line-height: 17px;
    padding: 20px;
}

.Header___Top_Logo {
    margin-top: 10px;   
}

.tablet .Header___Top_Logo,
.phone .Header___Top_Logo {
    margin-top: 10px;   
}

/* Popup editor  **************************/
.MainPopup {
    background: #fff;
    display: table-cell;
    padding: 14px 16px;
    vertical-align: top;
}

.MainPopup .Button.ThemeGrid_MarginGutter {
    margin-left: 10px;
}

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

html .Content.ThemeGrid_Wrapper {
    padding-top: 75px !important;
    top: 60px;
}

html .Content.ThemeGrid_Wrapper.MethodContent {
    padding: 0 !important;
}

.desktop .Content.ThemeGrid_Wrapper.MethodContent,
.desktop .Content.ThemeGrid_Wrapper.MethodContent > .ThemeGrid_Container {
    max-width: unset !important;
}

.blueHeader_Container {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
}

.tablet .blueHeader_Container,
.phone .blueHeader_Container {
    top: 80px;
}

.Page {
    min-height: 100% !important;
    position: relative;
}

.Page > .Content {
    max-width: 100%;
    margin: auto;
    padding: 0 0 68px 0;
}

.tablet .Content,
.phone .Content {
    padding: 0 0 200px 0 !important;
}

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

.OSInlineClear {
    /* This style will never be used in runtime.
  When applied in Service Studio, it will prevent the style 'OSInline' from being
  automatically applied to divs and tables with widths != (fill parent) */
}



/*------------------------------------*\
              $3. Forms
\*-------------------------------------*/

textarea,
select,
input {
    border-radius: 0;
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, .075);
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    font-size: 16px;
}

html input {
    height: 34px;
}

/* radio and checkbox override rules **************************/
html input[type="radio"],
html input[type="checkbox"] {
    background-color: transparent;
    box-shadow: none !important;
    height: 20px;
}
html input[type="checkbox"] {
    background: transparent;
    background-color: transparent;
    box-shadow: none !important;
    border: 0;
    cursor: pointer;
    display: inline-block;
    height: 22px !important;
    position: relative;
    width: 22px;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none !important;
}

input[type="checkbox"]:after {
    border: 2px solid #fff;
    border-right: 0;
    border-top: 0;
    left: 50%;
    top: 50%;
    width: 11px;
    transform: translate3d(-50%, -50%, 0) rotate(-45deg);
    height: 5px;
    content: " ";
    display: block;
    opacity: 0;
    position: absolute;
}

/* Checkboxes and Radio Buttons **************************/
input[type="radio"]:before,
input[type="checkbox"]:before {
    box-shadow: none;
}

/* force padding to center vertically on Firefox **************************/
select {
    height: 34px;
    padding: 4px 8px;
}

input[type="radio"]:focus,
input[type="checkbox"]:focus {
    border: 0;
}

textarea:focus {
    border: 1px solid #949494;
}

.Form:not(.ReadOnly) {
    cursor: pointer;
}

select.ReadOnly {
    cursor: pointer;
}

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 {
    line-height: 20px;
}

.Form input[type="text"],
.Form input[type="password"],
.Form input[type="datetime"],
.Form input[type="datetime-local"],
.Form input[type="date"],
.Form input[type="month"],
.Form input[type="time"],
.Form input[type="week"],
.Form input[type="number"],
.Form input[type="email"],
.Form input[type="url"],
.Form input[type="search"],
.Form input[type="tel"],
.Form input[type="color"],
.Form select,
.Form textarea {
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, .075);
}

.Form input.ReadOnly,
.Form textarea.ReadOnly,
.Form select.ReadOnly {
    background-color: #fff;
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, .075);
}

input[disabled="disabled"][type="text"]:focus,
input[disabled="disabled"][type="password"]:focus,
textarea[disabled="disabled"]:focus,
textarea[readonly="readonly"]:focus,
select[disabled="disabled"]:focus,
input[readonly="readonly"]:focus,
input[disabled="disabled"]:focus,
.Form input[readonly="readonly"].ReadOnly:not(.Not_Valid):focus,
.Form input[disabled="disabled"].ReadOnly:not(.Not_Valid):focus,
.Form select[readonly="readonly"].ReadOnly:not(.Not_Valid):focus,
.Form select[disabled="disabled"].ReadOnly:not(.Not_Valid):focus {
    border: 1px solid #ccc;
}

.Form textarea:focus {
     line-height: 30px;
} 

.Form textarea[disabled="disabled"]:focus,
.Form textarea[readonly="readonly"]:focus,
textarea[disabled="disabled"]:focus,
textarea[readonly="readonly"]:focus {
    padding: 10px 12px;
}

.tablet input[type="text"], .phone input[type="text"], 
.tablet input[type="password"], .phone input[type="password"], 
.tablet input[type="datetime"], .phone input[type="datetime"], 
.tablet input[type="datetime-local"], .phone input[type="datetime-local"], 
.tablet input[type="date"], .phone input[type="date"], 
.tablet input[type="month"], .phone input[type="month"], 
.tablet input[type="time"], .phone input[type="time"], 
.tablet input[type="week"], .phone input[type="week"], 
.tablet input[type="number"], .phone input[type="number"], 
.tablet input[type="email"], .phone input[type="email"], 
.tablet input[type="url"], .phone input[type="url"], 
.tablet input[type="search"], .phone input[type="search"], 
.tablet input[type="tel"], .phone input[type="tel"], 
.tablet input[type="color"], .phone input[type="color"], 
.tablet select, .phone select {
    height: 45px;
}

select.Not_Valid:focus,
input.Not_Valid:focus,
textarea.Not_Valid:focus {
    border: 1px solid #bf1601;
}

.Form input[type="checkbox"].Not_Valid,
.Form input[type="radio"].Not_Valid,
input[type="checkbox"].Not_Valid,
input[type="radio"].Not_Valid {
    border: transparent;
    padding: 0;
}



/*------------------------------------*\
              $4. Buit-in widgets
\*-------------------------------------*/

/* Table pavigation **************************/
a.ListNavigation_PageNumber:link,
span.ListNavigation_CurrentPageNumber,
span.ListNavigation_Ellipsis,
a.ListNavigation_Previous:link,
a.ListNavigation_Next:link {
    background: #fcfcfc;
    border: 1px solid #ccc;
    color: #2e3136;
    display: inline-block;
    filter: none;
    font-size: 14px;
    font-weight: normal;
    padding: 5px 20px;
    /* Add Touch States to Your Buttons: Remove the tap highlight color, we want to use active state css instead */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-appearance: none;
       -moz-appearance: none;
}

a.ListNavigation_PageNumber:link:hover,
span.ListNavigation_Ellipsis:hover,
a.ListNavigation_Previous:link:hover,
a.ListNavigation_Next:link:hover {
    background-color: #e6e6e6;
    border-color: #4c4c4c;
    box-shadow: 0 0 1px 0 rgba(50, 50, 50, .75);
    text-decoration: none;
}

span.ListNavigation_CurrentPageNumber {
    background-color: #e6e6e6;
    border: 1px solid #4c4c4c;
}

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

/* .EditableTable **************************/
.EditableTable thead td {
    color: #2e3136;
    font-weight: bold;
}

.EditableTable {
    border: 1px solid #d0d0d0;
}
.EditableTable thead td {
    border-bottom: 1px solid #d0d0d0;
}

.EditableTable tr:nth-child(even) {
    background: #f4f4f4;
}

td.RowWithAddAction {
    background: none repeat scroll 0 0 #fff;
    border-bottom: none;
    padding: 0;
}

td.RowWithAddAction a {
    padding: 10px 0 10px 22px;
}

td.EditRecord_Caption:first-child + .EditRecord_Value {
    padding-right: 20px;
}



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

/* Feedback Message **************************/
.Page.phone div.Feedback_Message_Wrapper,
.Page.tablet div.Feedback_Message_Wrapper {
    margin-top: 52px;
}

div.Feedback_Message_Wrapper {
    margin-top: 150px;
}

.Feedback_Message_Error,
.Feedback_Message_Success,
.Feedback_Message_Warning,
.Feedback_Message_Info {
    border: none;
    box-shadow: none;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    max-width: 1200px;
    padding: 12px 50px 12px 28px;
    width: 100%;
}

div.Feedback_Message_Error,
div.Feedback_Message_Success,
div.Feedback_Message_Warning,
div.Feedback_Message_Info {
    min-width: 100px;
}

a.Feedback_Message_Wrapper_Close {
    font-size: 19px;
    top: 5px;
}

.tablet a.Feedback_Message_Wrapper_Close,
.phone a.Feedback_Message_Wrapper_Close {
    pointer-events: none;
}

.Feedback_Message_Wrapper_Close:after {
    color: white; /* IE8 */
    color: rgba(255, 255, 255, .5);
}

.Feedback_Message_Error {
    background-color: #bb5858;
}

.Feedback_Message_Error:before,
.Feedback_Message_Warning:before,
.Feedback_Message_Success:before,
.Feedback_Message_Info:before {
   margin-top: -2px;
}

.Feedback_Message_Error:before {
    content: "";
}

.Feedback_Message_Success:before {
    content: "\f05d";
}

.Feedback_Message_Info:before {
    content: "\f05a";
}

.Feedback_Message_Warning:before {
    content: "\f06a";
}

.Feedback_Message_Success {
    background-color: #acc965;
    color: #333;
}

.Feedback_Message_Warning {
    background-color: #f2c94e;
    color: #333;
}

.Feedback_Message_Info {
    background-color: #aabdcf;
    color: #333;
}

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

.tablet .Login_Info_Username,
.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);
}


/* CUSTOM */
/*-------------------- TIPOGRAFÍAS ---------------*/

@font-face {
font-family: 'Barlow-Light';
src: url('/CL_Web_Unified_Payment_TH_Resources/Barlow-Light.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Barlow-Regular';
src: url('/CL_Web_Unified_Payment_TH_Resources/Barlow-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Barlow-Bold';
src: url('/CL_Web_Unified_Payment_TH_Resources/Barlow-Bold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Barlow-SemiBold';
src: url('/CL_Web_Unified_Payment_TH_Resources/Barlow-SemiBold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Barlow-Medium';
src: url('/CL_Web_Unified_Payment_TH_Resources/Barlow-Medium.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}



html .ThemeGrid_Container {
    padding: 0px !important;
    background-color: #FFF !important;
}

body,
.Content,
.MainContent {
    font-family: 'Barlow-Regular';
}

.Content_Padding {
    padding: 0 0px !important ;
}

.Bold {
    font-family: 'Barlow-Bold' !important;
}

body {
    background: white;
    font-size:  16px;
}

/*-------------------- PADDINGS ---------------*/

.Primary_Padding {
    padding-top: 20px;
    padding-bottom: 20px;
}

.Secundary_Padding {
    padding-top: 10px;
    padding-bottom: 10px;
}

/*-------------------- BOTONES ---------------*/

.Button_Primary {
    background-color: #FF3D00 !important;
    border-radius: 2px;
    width: 100%;
    height: 45px !important;
    font-size: 18px;
    /*font-family: 'Barlow-Bold';*/
    color:white !important;
    font-family: 'Barlow-Regular' !important;
    line-height: 1px;
    border: none !important;
}

.Button_Primary:disabled {
    background-color: #E5E5E5 !important;
    border: 1px solid #E5E5E5 !important;
    color: #666666 !important;
    font-weight: bold;
}

/*-------------------- TEXTOS ---------------*/

.Text_Center {
    text-align: center;   
}

.Text_Left {
    text-align: left;   
}

.TextRight {
    text-align: right;   
}

.Title {
    font-size: 32px;
    font-family: 'Barlow-Bold';
    color: #005CFF;
}

.Sub_Title {
    font-size: 33px;
    font-family: 'Barlow-Regular';
    color: #FF3D00;
}

.Light_Title {
    font-size: 33px;
    font-family: 'Barlow-Light';
    color: #FF3D00;
}

.Heading1 { 
    color: #000000;    
     font-family: "Barlow-Regular" !important;   
     font-size: 20px !important;
     font-weight: normal !important;
      
}

.Heading2 {
    color: #000000;    
    font-family: "Barlow-Bold";    
    font-size: 22px;    
    font-weight: 500; 
    text-transform: uppercase;
}

.Heading3 {
    font-size: 20px;
    font-family: 'Barlow-Bold';
    color: #000000;  
}

.Heading4 {
    font-size: 20px;
    font-family: 'Barlow-Regular';
    color: #333333;
}

.Heading5 {
    font-size: 18px;
    font-family: 'Barlow-Regular';
    color: #000000;
}

.Heading6 {
    font-size: 16px;
    font-family: 'Barlow-Bold';
    color: #333333;
    font-weight: 500;
}

.Heading7 {
    color: #000000;    
    font-family: "Barlow-Light";    
    font-size: 14px;     
    text-align: left;
}

.Text_Price {      
    color: #333333;    
    font-family: "Barlow-Light";    
    font-size: 34px;    
    line-height: 42px;    
    text-align: center;
}

.Text_White {       
    color: #FFFFFF;    
    font-family: "Barlow-Bold";   
    /*font-family: 'DIN Next LT Pro'; */
    font-size: 32px;    
    font-weight: 500;    
    text-align: center;
}

.tablet .Text_White,
.phone .Text_White {
    font-size: 26px;
}

/*-------------------- COLORES TEXTO ---------------*/

.Text_green {
    color: #308736;   
}

.Text_Grey {
    color: #4A4A4A;
}

.Text_Grey:link, a:visited{
    color:#4A4A4A
}

.Text_Grey_Light {
    color: #333333;
}

.Texto_Head_Azul{
    text-align: center!important;
    color:white;
}

.Texto_Blue{
    font-family: 'Barlow-Regular' !important;
    color: #005CFF !important;
}

.Titulo_Comprobante{
    font-size: 33px;
}


/*-------------------- DECORACION TEXTO ---------------*/

.text_Underline {
    text-decoration: underline;
}

/*-------------------- TOOLTIP BLOQUE ---------------*/

/* Tooltip Static */
.tooltip-static {
    background-color: #EEEEEE;
    margin: 0 15px;
    padding: 10px 10px 0;
}

.tooltip-static-content {
    min-height: 100px;
    text-align: center;
}

.tooltip-static .card-background{
    padding: 10px;
    padding-bottom: 20px;
}

.tooltip-static--content {
    padding-bottom:  20px;
}

/* TooltipStatic_Squared  */
.tooltip-static.squared {
    border-radius: 0;
    margin: 0 15px;
    position: relative;
}

/* mask*/ 
.mask {
    height: 20px;
    position: relative;
    /*width: 7%;*/
    width: 28px;
    
}

.mask:before, .mask:after {
    border-bottom: 25px solid transparent;
    content: " ";
    display: block;
    height: 0;
    position: absolute;
    top: 0;
    width: 50%;
    box-sizing: border-box;
}

.mask:before {
    border-left: 0 none;
    border-right: 20px solid #ebebeb;
    left: -6px;
}

.mask:after {
    border-left: 20px solid #ebebeb;
    border-right: 0 none;
    right: -6px;
}

/*-------------------- TOOLTIP SUCCESS ---------------*/

.tooltip-static-success {
    background-color: #42E8B4;
    margin: 0 15px;
    padding: 10px 10px 0;
}
.tooltip-static-content-success {
    min-height: 100px;
    text-align: center;
}
.tooltip-static-success .card-background{
    padding: 10px;
    padding-bottom: 20px;
}
.tooltip-static--content-success {
    padding-bottom:  20px;
}
/* TooltipStatic_Squared  */
.tooltip-static-success.squared-success {
    border-radius: 8px;
    margin: 0;
    position: relative;
    padding: 10px 30px 25px 30px;
}
.mask-success {
    height: 20px;
    position: relative;
    width: 28px;
}
.mask-success:before, .mask-success:after {
    border-bottom: 25px solid transparent;
    content: " ";
    display: block;
    height: 0;
    position: absolute;
    top: 0;
    width: 50%;
    box-sizing: border-box;
}
.mask-success:before {
    border-left: 0 none;
    border-right: 20px solid #42E8B4;
    left: -6px;
}
.mask-success:after {
    border-left: 20px solid #42E8B4;
    border-right: 0 none;
    right: -6px;
}

/*-------------------- TOOLTIP WHITE ---------------*/

.tooltip-static-white {
    background-color: #fff;
    margin: 0 15px;
    padding: 10px 10px 0;
    color: #F4150F;
}
.tooltip-static-content-white {
    min-height: 100px;
    text-align: center;
}
.tooltip-static-white .card-background{
    padding: 10px;
    padding-bottom: 20px;
}
.tooltip-static--content-white {
    padding-bottom:  20px;
}
/* TooltipStatic_Squared  */
.tooltip-static-white.squared-white {
    border-radius: 8px;
    margin: 0;
    position: relative;
    padding: 10px 30px 25px 30px;
}
.mask-white {
    height: 20px;
    position: relative;
    width: 28px;
}
.mask-white:before, .mask-white:after {
    border-bottom: 25px solid transparent;
    content: " ";
    display: block;
    height: 0;
    position: absolute;
    top: 0;
    width: 50%;
    box-sizing: border-box;
}
.mask-white:before {
    border-left: 0 none;
    border-right: 20px solid #fff;
    left: -6px;
}
.mask-white:after {
    border-left: 20px solid #fff;
    border-right: 0 none;
    right: -6px;
}

/*-------------------- TOOLTIP ERROR ---------------*/

/* Tooltip Static */
.tooltip-static-error {
    background-color: #D0021B;
    margin: 0 15px;
    padding: 10px 10px 0;
    color: #fff;
}
.tooltip-static-content-error {
    min-height: 100px;
    text-align: center;
}
.tooltip-static-error .card-background{
    padding: 10px;
    padding-bottom: 20px;
}
.tooltip-static--content-error {
    padding-bottom:  20px;
}
/* TooltipStatic_Squared  */
.tooltip-static-error.squared-error {
    border-radius: 0;
    margin: 0 15px;
    position: relative;
}
/* mask*/ 
.mask-error {
    height: 20px;
    position: relative;
    /*width: 7%;*/
    width: 28px;
    
}
.mask-error:before, .mask-error:after {
    border-bottom: 25px solid transparent;
    content: " ";
    display: block;
    height: 0;
    position: absolute;
    top: 0;
    width: 50%;
    box-sizing: border-box;
}
.mask-error:before {
    border-left: 0 none;
    border-right: 20px solid #D0021B;
    left: -6px;
}
.mask-error:after {
    border-left: 20px solid #D0021B;
    border-right: 0 none;
    right: -6px;
}

/*** END TOOLTIP MASK ***/

.Header-bg {
    background-color: #002EFF;
    background-size: cover;
    padding-top: 20px;
    padding-bottom: 20px;
}

.Border_Radius_Light{
    border-radius:5px !important;
}

.Border_Radius_Medium{
    border-radius: 8px !important;
}

.Border_Orange{
    border-color:#FF3D00 !important;
}

.ValidationMessage{
    font-size: 18px !important;
}

.Border_Top{
    border-top: 1px solid #C4C4C4 !important;
}

.ButtonLight{
    background-color: white !important;
    border: 1px solid #002EFF !important;
    color: #002EFF !important;
    width: 100%;
    height: 45px !important;
    font-size: 18px !important;
    font-family: 'Barlow-Regular';
    margin-right: 20px !important;
}

.Text_White_Regular {       
    color: #FFFFFF;    
    font-family: "Barlow-Regular";    
    font-size: 32px;        
    text-align: center;
}

input[type="checkbox"]:before {
    background: #fff;
    border-color: #ccc;
    border-radius: 8px;
    border-style: solid;
    border-width: 1px;
    box-shadow: none;
    content: " ";
    display: block;
    height: 100%;
    width: 100%;
}

input[type="checkbox"]:checked:before {
    background: #00a364;
    border-color: transparent;
}

.Text_Red_Rechazo{
    color:#e92a17;
}

.Text_Grey_Rechazo{
    color:#a7a7a7;
}

.Border_Blue{
    border: 0.65px solid #002EFF;
}

/** CUSTOM CSS **/
.Content {
    background: #FFF !important;
    padding-top: 30px !important;
    padding-left: 200px !important;
    padding-right: 200px !important;
}

.Title_Section {
    margin-top: 0px !important;
}

.MainContent {
    background: #FFF !important;
    margin-top: 0px !important;
    min-height: 100% !important;
}

/** PHONE CUSTOM CSS  **/
/***********************/


/** Columnas **/
/***************/


/* trescol */
.Tres_Col {
    width: 23% !important;
}

.tablet .Tres_Col,
.phone .Tres_Col{
    width: 95% !important;
}

/* cincocol */
.Cinco_Col {
    width: 40% !important;
}

.tablet .Cinco_Col,
.phone .Cinco_Col{
    width: 95% !important;
}

/* seiscol */
.Seis_Col{
    width: 49% !important;
}

.tablet .Seis_Col,
.phone .Seis_Col{
    width: 95% !important;
}

/* diezcol */
.Diez_Col{
    width: 83% !important;
    
}

.tablet .Diez_Col,
.phone .Diez_Col{
    width: 95% !important;
}

.Doce_Col{
    width: 100% !important;
}

.tablet .Doce_Col,
.phone .Doce_Col{
    width: 100% !important;
}



/*    Custom         */
/****************/


/*estilos de textos pantalla inicio*/
.ejemplo
{
    font-size: small;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.subitulo_pagounificado
{
    line-height: 1;
}

.subitulo_pagounificado_prev
{
    line-height: 1;
}


.EstiloMsgErrorCaptcha
{
    display: none;
}



/*estilos input rut */
.tablet .contentRut,
.phone .contentRut {
    width: 95% !important;   
}

.contentRut {
    width: 31% !important;   
}

/* estilos contenedor icono*/
.Container_Icono{
    margin-top: 150px !important;
}

.tablet .Container_Icono,
.phone .Container_Icono{
    margin-top: 100px !important;
    margin-bottom: 20px !important;
    width: 95% !important;
}

.tablet .Container_Icono img,
.phone .Container_Icono img{
    width: 30% !important;
}


/*estilos texto timeout */
.tablet .Titulo_Comprobante,
.phone .Titulo_Comprobante{
    font-size: 20px !important;
}


/*Estilos Captcha*/
/*.MensajeEstadoValidacionCaptcha{
    width:23% !important;
}

.phone .MensajeEstadoValidacionCaptcha{
    width:95% !important;
}*/


/*Estilos Button Consultar */
/*.btnConsultar{
    width:23% !important;
}

.phone .btnConsultar{
    width:95% !important;
}*/


/*estilos containercruz */
/*.Container_Cruz{
    width:40% !important;
}
.phone .Container_Cruz{
    width: 95% !important;
}*/

/* content info */
.tablet .Content_Info,
.phone .Content_Info{
    width: 95% !important;
}

.tablet .botonVolver,
.phone .botonVolver{
    margin-right: 0 !important;
}

/* ingresa web */
.Ingresa_Web{
    margin-top: 20px !important;
}

/* estilo texto titulo*/
.tablet .Text_White_Regular,
.phone .Text_White_Regular{
    font-size: 20px;
}


/* estilo botones*/
.tablet .BotonVolver,
.phone .BotonVolver{
    width: 95% !important;
    margin-bottom: 10px !important;
    margin-right: 0 !important;
}

.BotonPagar{
    width: 320px !important;
}

.tablet .BotonPagar,
.phone .BotonPagar{
    max-width: 335px !important;
    width: 100% !important;
}

/* inputMail */

.Input_Mail{
    width: 40% !important;

}

.tablet .Input_Mail,
.phone .Input_Mail{
    width: 60% !important;
}

/* boton Enviar */
.botonEnviar{
    width: 32% !important;
}

.tablet .botonEnviar,
.phone .botonEnviar{
    width: 95% !important;
    margin-top: 10px !important;
}

/* imagen detalle transaccion*/

.DetalleTransaccionImg{
    height: 40px !important;
}

.tablet .DetalleTransaccionImg,
.phone .DetalleTransaccionImg{
    height: 25px !important;
}



/* titulo comprobante */
.tablet .Titulo_Comprobante,
.phone .Titulo_Comprobante{
    font-size: 20px;
}

.Texto_Blue td{
    width: 17% !important;
}

.tablet .Texto_Blue td,
.phone .Texto_Blue td{
    /*width: 30% !important;*/
    width: 120px !important;
    font-size: 14px !important;
    line-height: 17px !important;
    /*border: solid 1px #eee !important;
    padding: 2px !important*/
}

.tablet .Texto_Transaccion td,
.phone .Texto_Transaccion td{
    /*width: 30% !important;*/
    font-size: 14px !important;
    line-height: 17px !important;
    /*border: solid 1px #eee!important;*/
    
}

.Texto_Transaccion td{
    font-size: 14px !important;
    padding: 5px !important;
}
/*
.phone .mask:before{
    left:-8px !important;
}

.phone .mask:after{
    right:-8px !important;
}

*/

/* NUEVOS CELULA TRANSVERSAL */

.titulo_deuda{
    font-size: 20px;
    font-family: 'Barlow-Medium';
}

.tablet .titulo_deuda,
.phone .titulo_deuda{
    font-size: 16px;
    font-family: 'Barlow-Medium';
    text-align: left !important;
    margin-left: -3%;
}

.titulo_servicio{
    font-size: 24px !important;
    font-family: 'Barlow-Regular' !important;
}

.tablet .titulo_servicio,
.phone .titulo_servicio{
    font-size: 14px !important;
    font-family: 'Barlow-Regular' !important;
}

.titulo_precio{
    font-size: 20px;
    font-family: 'Barlow-Regular';

}

.tablet .titulo_precio,
.phone .titulo_precio{
    font-size: 14px;
    font-family: 'Barlow-Regular';
    margin-left: -5px;
}

.titulo_subservicio{
    font-size: 18px;
    font-family: 'Barlow-Regular';
}

.tablet .titulo_subservicio,
.phone .titulo_subservicio{
    font-size: 12px;
    font-family: 'Barlow-Regular';
}

.estilo_entel{
    text-decoration: underline;
    color: #005CFF;
    font-weight: normal;
    font-family: 'Barlow-Regular';
}

.marginContentTop{
    margin-top: 55px !important;
}

.tablet .marginContentTop,
.phone .marginContentTop{
    margin-top: 30px !important;
    text-align: left !important;
}

.marginContent{
    margin-top: 33px !important;
}

.tablet .marginContent,
.phone .marginContent{
    margin-top: 23px !important;
}

.Check{
    margin-right: 20% !important; 
}

.Container-debts-list-all-service {
    margin-left: 17% !important;
    margin-right:  -2.5% !important;
}

.tablet .Container-debts-list-all-service,
.phone .Container-debts-list-all-service {
    margin-left: 5% !important;
    margin-right: 11% !important;
}

.estilo_entel{
    text-decoration: underline;
    color: #005CFF;
    font-weight: normal;
    font-family: 'Barlow-Regular';
}

.estilo_inputRut{
    font-size: 16px;
    font-family: 'Barlow-Medium';
}

.Titulo_Comprobante{
    font-family: Barlow-Medium;
    font-size: 30px;
}

.tablet .Header-bg,
.phone .Header-bg {
    margin: -20px -20px 0 -20px !important;
}

.ValidationMessage {
    font-size: 18px !important;
    Text-align: left !important;
    color: #E81E1E !important;
}

.tablet .contentRut,
.phone .contentRut {
    width: 95% !important; 
    min-width: 150px;   
}

.contentRut {
    width: 31% !important;
    min-width: 150px;
}

.noLayout.blueHeader_Container {
    position: relative !important;
    top: 0 !important;
}

.titulo_totalSeleccionar {
    font-size: 18px !important;
}

.tablet.titulo_totalSeleccionar,
.phone.titulo_totalSeleccionar {
    font-size: 18px !important;
}

@media screen and (max-width: 992px) {
    .titulo_totalSeleccionar {
        font-size: 25px !important;
    }
}

@media screen and (max-width: 600px) {
    .titulo_totalSeleccionar {
        font-size: 25px !important;
    }
}

@media (max-height: 700px) {
  .phone .Content, .tablet .Content {
     padding: 0 0 300px 0 !important;
  }
}

/*------------------------------------*\
      $5 List Documents
\*------------------------------------*/

/*fix view in os*/
html .Content {
    
    
}
/*fix width content*/
.Page.desktop .Content.ThemeGrid_Wrapper {
    max-width: 920px;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.mainContentDocuments {
    max-width: 920px;
}
/*Fix header width*/
.phone .blueHeader_Container .Header-bg, .tablet .blueHeader_Container .Header-bg {
    margin: -20px 0 0 -20px !important;
    padding: 20px 45px;
}
.desktop .blueHeader_Container .Header-bg {
    
}
/*List Widget*/
.Header_table_society{ 
    align-items: center;
    background-color: #f1f1f1;
    display: flex;
    height: 40px;
}
.ListRecords .Detail-pay {
    border-bottom: 2px solid #f1f1f1;
}
.ListRecords .Detail-pay:last-child {
    border-bottom: 0;
}
.Content_container {
    border-top: 2px solid #f1f1f1;
    padding-top: 15px;
}
.header_debts {
    background-color: #f1f1f1;
}
.header_debts .main_container_debts {
    height: 41px;
    border-top: 1px solid #dbdbdb;
}
.debts_document_container .main_container_debts{
    border-bottom: 1px solid #dbdbdb;
    border-top: 0;  
    height: 62px;
}
.ListRecords > .main_container_debts:first-child {
    border-top: 0;
}
.marginContentTop .Container-debts-list-all-service {
    width: calc(100% - 82px);
    margin-left: 32px !important;
    margin-right: 0 !important;
    
}
.Container_total_to_pay .main_container_debts {
    border-top: 0;
}
.Container_total_to_pay .text_debts_ph:nth-child(3) {
    width: 165px;
}
.Container_total_to_pay .text_debts_ph:nth-child(2) {
    margin-right: 0;
    text-align: right;
}
.Total_text {
    font-size: 21px;
    font-weight: 500;
    line-height: 25px;
}
.Container_total_to_pay .titulo_servicio {
    font-size: 36px !important;
    font-weight: 600;
    line-height: 43px;
}
.Radio_btn {
    text-align: left;
    width: 50px;
}
.Container_mensagge_information {
    display: flex;
    align-items: center;
    border: 1px solid #002EFF;
    height: 62px;
    width: 100%;
    font-weight: 500;
    font-size: 18px;
    line-height: 22px;
}
.Container_mensagge_information img {
    width: 18px;
    height: 18px;
    margin: 0 20px 0 22px;
}
.Title_society_container:first-child .main_container_debts {
    border-top: 0;
}

/*Phone View*/
.tablet .marginContent.mainContentDocuments,
.phone .marginContent.mainContentDocuments {
    margin-top: 30px !important;
}

.tablet .header_debts .main_container_debts .text_center_debts .text_debts_ph,
.phone .header_debts .main_container_debts .text_center_debts .text_debts_ph {
    font-size: 14px;
    line-height: 19px;
}

.tablet .header_debts .main_container_debts .icon_debts_container,
.phone .header_debts .main_container_debts .icon_debts_container {
    display: none;
}

.tablet .button_debts_container,
.phone .button_debts_container {
    margin-right: 6.5px;
}

.tablet .debts_document_container .icon_debts_container,
.phone .debts_document_container .icon_debts_container{
    display: none;
}

.tablet .icon_debts_container,
.phone .icon_debts_container{
    margin: 0 5px 0 0;
}

.tablet .header_debts .text_center_debts,
.tablet .debts_document_container .text_center_debts,
.phone .header_debts .text_center_debts,
.phone .debts_document_container .text_center_debts {
    width: 100%;
    margin-left: 8px;
}

.tablet .Title_society_container .text_debts_ph,
.phone .Title_society_container .text_debts_ph {
    width: 100%;
    min-width: 100%;
}

.tablet .Title_society_container .main_container_debts .titulo_servicio,
.phone .Title_society_container .main_container_debts .titulo_servicio {
    font-weight: 500;
    font-size: 18px !important;
    line-height: 19px;
}

.tablet .debts_document_container .text_debts_ph,
.phone .debts_document_container .text_debts_ph {
    font-size: 14px;
    line-height: 17px;
}

.tablet .header_debts .main_container_debts,
.phone .header_debts .main_container_debts {
    height: 30px;
}

.tablet .text_debts_ph:nth-child(1),
.phone .text_debts_ph:nth-child(1) {
    width: calc(100% / 3 + 50px);
    margin: 0;
}

.tablet .text_debts_ph:nth-child(2),
.phone .text_debts_ph:nth-child(2) {
    width: calc(100% / 3 + 20px);
    margin: 0;
}

.tablet .text_debts_ph:nth-child(3),
.phone .text_debts_ph:nth-child(3) {
    width: calc(100% / 3 - 40px);
    text-align: right;
    margin-right: 20px;
}

/*Fix detail total amount, view phone*/
.tablet .Container_total_to_pay .text_center_debts,
.phone .Container_total_to_pay .text_center_debts {
    flex-flow: column nowrap;
    width: 100%;
}
.Container_total_to_pay .text_debts_ph {
    width: 100%;
    text-align: center;
}

.tablet .Container_total_to_pay .button_debts_container,
.tablet .Container_total_to_pay .icon_debts_container,
.phone .Container_total_to_pay .button_debts_container,
.phone .Container_total_to_pay .icon_debts_container {
    display: none;
}

.tablet .Container_total_to_pay .text_debts_ph:nth-child(2),
.phone .Container_total_to_pay .text_debts_ph:nth-child(2) {
    width: 100%;
    text-align: center;
}

.tablet .Container_total_to_pay .text_debts_ph:nth-child(3),
.phone .Container_total_to_pay .text_debts_ph:nth-child(3) {
    width: 100%;
    text-align: center;
}

/*Style for the Society Document widget*/
.main_container_debts {
    align-items: center;
    display: flex;
    height: 88px;
    flex-flow: row nowrap;
    width: 100%;
    border-top: 3px solid #dbdbdb;
}
.icon_debts_container {
    align-items: center;
    display: flex;
    height: 32px;
    justify-content: center;
    margin: 0 16px 0 40px;
    max-width: 32px;
    width: 32px;
    
    
}
.text_center_debts {
    align-items: center;
    display: flex;
    height: 100%;
    width: calc(100% - 120px);
    
    
}
.text_debts_ph {
    text-align: left;
    font-size: 18px;
    line-height: 22px;
    
    
    
}
.button_debts_container {
    align-items: center;
    justify-content: center;
    display: flex;
    height: 30px;
    width: 30px;
    margin-right: 85px;
    
    
}
.text_debts_ph:nth-child(1) {
    width: 218px;
    margin-right: 112px;    
    
}
.text_debts_ph:nth-child(2) {
    width: 218px;
    margin-right: 60px;
    
    
}
.text_debts_ph:nth-child(3) {
    width: 105px;
    text-align: right;
    
    
}
/*Mi entel container with information*/
.mi_entel_container {
    margin-top: 24px;
}

.tablet .mi_entel_container,
.phone .mi_entel_container {
    display: flex;
    justify-content: center;
    flex-flow: column nowrap;
}
.mi_entel_container .text_gray_miEntel, 
.mi_entel_container .estilo_entel {
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
}
/*Button Disabled*/
.Button_Primary.BotonPagar:disabled {
    background-color: #636467 !important;
}
/*Fix Header title*/
.Title_society_container .text_debts_ph:nth-child(1) {
    width: 100%;
    margin: 0;
}
/*Resize menseege information phone*/
.tablet .Container_mensagge_information,
.phone .Container_mensagge_information {
    height: 100%;
    min-height: 96px;
    padding: 16px 19px;
    align-items: start;
    text-align: left;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
}

.tablet .Container_mensagge_information img,
.phone .Container_mensagge_information img {
    margin-left: 0;
    margin-top: 3px;
    margin-right: 16px;
}

.tablet .Title_society_container .button_debts_container,
.phone .Title_society_container .button_debts_container {
    display: none;
}

.tablet .Title_society_container .text_center_debts,
.phone .Title_society_container .text_center_debts {
    width: 100%;
}
/*New Change Botonera 2.0*/
.main-content-pay {
    max-width: 980px;
    margin: 0 auto;
}
.container-infoPay {
    margin-top: 20px;
}

.tablet .container-infoPay,
.phone .container-infoPay {
    margin-top: 28px;
}
.Price-container .titulo_totalSeleccionar {
    font-size: 24px !important;
    line-height: 30px;
}

.tablet .Price-container .titulo_totalSeleccionar,
.phone .Price-container .titulo_totalSeleccionar {
    font-size: 18px !important;
    line-height: 26px;
}
.Price-container .Text_White_Regular {
    font-size: 36px;    
    line-height: 43px;
}

.tablet .Price-container .Text_White_Regular,
.phone .Price-container .Text_White_Regular {
    font-size: 22px;    
    line-height: 28px;
}
.container-form-topay {
    margin-top: 45px;
}

.tablet .container-form-topay,
.phone .container-form-topay {
    margin-top: 17px;
}
.form-topay-text {
    font-size: 24px;
    line-height: 30px;
}

.tablet .form-topay-text,
.phone .form-topay-text {
    font-size: 18px;
    line-height: 26px;
}
.Border_Bottom{
    border-bottom: 1px solid #D8D8D8;
}

.tablet .Border_Bottom,
.phone .Border_Bottom{
    margin: 20px 20px 0 20px;
}
.line-border-bottom {
    border-bottom: 1px solid #D8D8D8;    
}

.tablet .line-border-bottom,
.phone .line-border-bottom {
    margin: -10px 0 0 0;
    padding-bottom: 10px;    
}
.wrapper-iframe {
    margin-top: 9px;   
}

.tablet .wrapper-iframe,
.phone .wrapper-iframe {
    margin-top: 0;   
}
.buttonPay.ButtonLight {
    width: 321px;
    margin-right: 0 !important;
}

.tablet .buttonPay.ButtonLight,
.phone .buttonPay.ButtonLight {
    width: 100%;
    max-width: 335px;
}
.container-buttonPay {
    margin-top: 12px;
}

.tablet .container-buttonPay,
.phone .container-buttonPay {
    margin-top: 0;
}

.tablet .container-header .Text_White,
.phone .container-header .Text_White {
    font-size: 18px
}
.container-form-topay-text {
    margin-top: 23px;
}

.tablet .container-form-topay-text,
.phone .container-form-topay-text {
    margin-top: 10px;
}

.tablet .NoPadding .Header-bg,
.phone .NoPadding .Header-bg {
    margin: -20px 0 0 0 !important;
}
.Price-container .Text_Price {
    font-size: 30px;
}

.tablet .Price-container .Text_Price,
.phone .Price-container .Text_Price {
    font-size: 20px;
}

/*Util CSS*/

.fs-14 { font-size: 14px; }
.fs-16 { font-size: 16px; }
.fs-18 { font-size: 18px; }
.fs-20 { font-size: 20px; }
.fs-22 { font-size: 22px; }
.fs-24 { font-size: 24px; }
.fs-26 { font-size: 26px; }
.fs-28 { font-size: 28px; }
.fs-30 { font-size: 30px; }

.mt-5 { margin-top: 5px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-25 { margin-top: 25px; }
.mt-30 { margin-top: 30px; }
.mt-35 { margin-top: 35px; }
.mt-40 { margin-top: 40px; }
.mt-50 { margin-top: 50px; }
.mt-60 { margin-top: 60px; }
.mt-70 { margin-top: 70px; }

.ml-0 { margin-left: 0px; }
.ml-5 { margin-left: 5px; }
.ml-10 { margin-left: 10px; }
.ml-15 { margin-left: 15px; }
.ml-20 { margin-left: 20px; }
.ml-25 { margin-left: 25px; }

.mr-5 { margin-right: 5px; }
.mr-10 { margin-right: 10px; }
.mr-15 { margin-right: 15px; }
.mr-20 { margin-right: 20px; }
.mr-25 { margin-right: 25px; }

.mb-5 { margin-bottom: 5px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mb-25 { margin-bottom: 25px; }

.text-orange { color: #FF560A ; }
.text-red { color: #E8200C; }
.text-blue { color: #002EFF; }
.text-green { color: #00A364; }
.text-black { color: #000; }
.text-white { color: #fff; }
.text-nero { color: #191919; }
.text-darkgray { color: #333; }

.text-light { font-family: 'Barlow-Light'; }
.text-regular { font-family: 'Barlow-Regular'; }
.text-medium { font-family: 'Barlow-Medium'; }
.text-bold { font-family: 'Barlow-Bold'; }

.phone .col-sm-3, .tablet .col-sm-3 { width: 25%; }
.phone .col-sm-6, .tablet .col-sm-6 { width: 50%; }
.phone .col-sm-9, .tablet .col-sm-9 { width: 75%; }
.phone .col-sm-12, .tablet .col-sm-12 { width: 100%; }

.phone .col-sm-mt-5, .tablet .col-sm-mt-5 { margin-top: 5px; }
.phone .col-sm-mt-10, .tablet .col-sm-mt-10 { margin-top: 10px; }
.phone .col-sm-mt-15, .tablet .col-sm-mt-15 { margin-top: 15px; }
.phone .col-sm-mt-20, .tablet .col-sm-mt-20 { margin-top: 20px; }
.phone .col-sm-mt-25, .tablet .col-sm-mt-25 { margin-top: 25px; }
.phone .col-sm-mt-30, .tablet .col-sm-mt-30 { margin-top: 30px; }

.d-flex { display: flex; }
.d-block { display: block; }

.d-flex-center { display: flex; align-item: center; }

.button-display-actions {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}


/* 05-10-20 */
.Header___Flat {
    height: 60px;
    background-color: #002EFF;
    padding-left: 30px;
}

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: 45px;
    font-size: 18px;
}

.RecaptchaContainer iframe {
    height: 120px;
}
.rc-anchor-normal .rc-anchor-checkbox-label {
    width: 100px;
}

.simple-card {
    border: 1px solid #E2E2E2;
    border-radius: 8px;   
    padding: 23px 20px;
    position: relative;
    height: 70px;
}

.simple-card .left {
    position: absolute;
    left: 20px;
    top: 22px;
    font-weight: 500;
    font-size: 18px;
    color: #000000;
    display: flex;
    align-items: center;
}

.simple-card .right {
    position: absolute;
    right: 20px;
    color: #191919;
    font-weight: 500;
    font-size: 24px;
    top: 17px;
}

.card-up {
    border: 1px solid #DDDDDD;
    border-radius: 8px;
    padding: 20px;
}
.card-up .Column {
    margin-bottom: 0 !important;
}
.card-up .Columns.Columns2.MarginBottom {
    margin-bottom: 0;
}

.tablet .card-up .Columns.Columns2.MarginBottom,
.phone .card-up .Columns.Columns2.MarginBottom {
    display: flex;
}

.card-content {
    border: 1px solid #CCCCCC;
    border-radius: 16px;   
    padding: 20px;
}
.card-content .Columns.Columns2 {
    display: flex;
}

.tablet .card-content .Columns.Columns2.MarginBottom.tab_DontBreak.mob_BreakAll,
.phone .card-content .Columns.Columns2.MarginBottom.tab_DontBreak.mob_BreakAll {
    margin-bottom: -5px;
}

.line-amount .Columns.MarginBottom {
    margin-top: 10px;
    margin-bottom: 10px;
}
.line-amount .line-border {
    border-top: 1px solid #DDDDDD;
    height: 1px;
}
.alert-box {
    border-radius: 8px;
    color: #191919;
    border: 1px solid #002EFF;
    font-size: 16px;
    text-align: left;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 15px;
}   
.alert-box-icon {
    -ms-flex-item-align: start;
    align-self: flex-start;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-size: 24px;
    margin-right: var(--space-base);
}
.alert-box-message {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-left: 10px;
}

/* BUTTONS */
.Button.White {
    background-color: #F2F2F2;
    border-color: #F2F2F2;
    color: #636467;
}
.Button.White:hover {
    background-color: #F2F2F2;
    border-color: #F2F2F2;
    color: #636467;
}

.Button.Transparent {
    background-color: transparent;
    border: 1px solid #fff !important;
    color: #fff;
}

.Button.Transparent:hover {
    background-color: transparent;
    border: 1px solid #fff !important;
    color: #fff;
}

.Button.Green {
    background-color: #42E8B4;
    border: 1px solid #42E8B4;
    color: #191919;
}

.Button.Green:hover {
    background-color: #42E8B4;
    border: 1px solid #42E8B4;
    color: #191919;
}

.Button.Orange {
    background-color: #FF3D00;
    border-color: #FF3D00 !important;
    color: #fff;
}

.Button.Orange:hover {
    background-color: #FF3D00 !important;
    border-color: #FF3D00 !important;
}

.Button.Border-White, .Button.Border-White:hover {
    background-color: transparent !important;
    border: 1px solid #fff;
    border-color: #fff !important;
}

.Button.Border-blue, .Button.Border-blue:hover {
    background-color: transparent !important;
    border: 1px solid #002EFF !important;
    border-color: #002EFF !important;
    color: #002EFF;
}

.Button.Border-Gray, .Button.Border-Gray:hover {
    background-color: transparent !important;
    border: 1px solid #999;
    border-color: #999 !important;
    color: #191919;
}

.tablet .Button,
.tablet a.Button,
.phone .Button,
.phone a.Button {
    margin-left: 0;   
}

.tablet .Button .col-sm-3, .tablet .Button .col-sm-6,
.tablet .Button .col-sm-9, .tablet .Button .col-sm-12,
.phone .Button .col-sm-3, .phone .Button .col-sm-6,
.phone .Button .col-sm-9, .phone .Button .col-sm-12 {
    margin-top: 25px;        
}

/***/

.input-button-display {
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.tablet .input-button-display,
.phone .input-button-display {
    display: block;
    text-align: left;
}

::placeholder { 
   color: #999;
}
textarea, select, input {
    border-radius: 8px !important;
    box-shadow: 0 0 white !important;
    border: 1px solid #999 !important;
}

.tablet .Columns.MarginBottom.mob_BreakAll > .Column,
.phone .Columns.MarginBottom.mob_BreakAll > .Column {
    margin-bottom: 15px;
}

@media (min-width: 768px) and (max-width: 1024px) {
    .Cinco_Col {
        width: 80% !important;
    }    
}

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.payment-table-detail .Columns.MarginBottom {
    margin-bottom: 0;
    border-bottom: 1px solid #D8D8D8;
    padding: 10px 0 10px 0;
}

.tablet .payment-table-detail .Columns.MarginBottom,
.phone .payment-table-detail .Columns.MarginBottom {
    display: flex;
    margin-bottom: 0;
}
.payment-table-title .Columns.MarginBottom {
    margin-bottom: 5px;
}

.tablet .payment-table-title .Columns.MarginBottom,
.phone .payment-table-title .Columns.MarginBottom {
    display: flex;   
}

@media (min-width: 320px) and (max-width: 480px) {   
    .fs-18 { font-size: 14px; }
    .fs-20 { font-size: 18px; }
    .fs-24 { font-size: 20px; }
}

.ToggleButton {
    border-radius: 14px;
    background-color: #ccc;
    height: 24px;
    width: 48px;
    border: none;
}

.ToggleButton_label:after, .ToggleButton_label.changed:after {
    border-radius: 50%;
    height: 20px;
    top: 2px;
    width: 20px;
    background-color: #e2e2e2;
    left: 2px;
    border: none;
}

.ToggleButton_label.changed:after {
    left: 26px;
    background-color: #fff;
}

.ToggleButton.changed {
    background-color: #00a364;
    border: none;
}

.PaddingTop30 {
    padding-top: 30px;
}

/** ------- Interstitial --*/
.Interstitial_wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 100;
    
}

.Interstitial {
    background: #020247;
    color: #fff;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 20px;
    padding: 30px 200px;
    z-index: 100;
}

.Interstitial_content {
    text-align: left;
    margin-bottom: 15px;
}

.tablet .Interstitial_actions input, .phone .Interstitial_actions input {
    width: 100%;
    margin-left: 0;
}

.tablet .Interstitial, .phone .Interstitial {
    padding: 20px;
}

.Interstitial_content a {
    color: #fff;
    text-decoration: underline;
}

.Interstitial_actions .Button {
    width: 280px;
}

/** Display buttons two columns **/
.display-buttons-two-columns,
.display-buttons-two-columns-inputs,
.display-buttons-no-width,
.line-card-actions {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.tablet .display-buttons-two-columns,
.tablet .display-buttons-two-columns-inputs,
.tablet .display-buttons-no-width,
.tablet .line-card-actions,
.phone .display-buttons-two-columns,
.phone .display-buttons-two-columns-inputs,
.phone .display-buttons-no-width,
.phone .line-card-actions {
    flex-wrap: wrap;
}

.tablet .display-buttons-two-columns,
.tablet .display-buttons-no-width,
.tablet .line-card-actions,
.phone .display-buttons-two-columns,
.phone .display-buttons-no-width,
.phone .line-card-actions {
    flex-direction: column-reverse;
}

.display-buttons-two-columns input.Button,
.display-buttons-two-columns-inputs input.Button,
.display-buttons-two-columns-inputs input[type="text"],
.line-card-actions input.Button {
    width: 280px;
    margin: 0;
}

.tablet .display-buttons-two-columns input.Button,
.tablet .display-buttons-two-columns-inputs input.Button,
.tablet .display-buttons-two-columns-inputs input[type="text"],
.tablet .display-buttons-two-columns-inputs div,
.tablet .display-buttons-two-columns div,
.tablet .line-card-actions input.Button,
.phone .display-buttons-two-columns input.Button,
.phone .display-buttons-two-columns-inputs input.Button,
.phone .display-buttons-two-columns-inputs input[type="text"],
.phone .display-buttons-two-columns-inputs div,
.phone .display-buttons-two-columns div,
.phone .line-card-actions input.Button {
    width: 100% !important;
}

.tablet .display-buttons-two-columns input.Button,
.tablet .display-buttons-two-columns-inputs input[type="text"],
.tablet .display-buttons-no-width input.Button,
.tablet .display-buttons-no-width a,
.tablet .line-card-actions input.Button,
.phone .display-buttons-two-columns input.Button,
.phone .display-buttons-two-columns-inputs input[type="text"],
.phone .display-buttons-no-width input.Button,
.phone .display-buttons-no-width a,
.phone .line-card-actions input.Button {
    margin-bottom: 20px;
}

/* class for payment methods iframe */
.iframeButtonMethods {
    height: 416px;
}

/* Clases pantalla de éxito (empresas) */
.emp-bill-cont .ph:empty {
    display: none;
}
.display-flex {
    display: flex;
}
.font-16 {
    font-size: 16px;
}
.font-18 {
    font-size: 18px;
}
.font-22 {
    font-size: 22px;
}
.font-24 {
    font-size: 24px;
}
.text-medium-emp {
    font-family: 'Barlow-Medium';
}
.text-semiBold-emp {
    font-family: 'Barlow-SemiBold';
}
.text-regular-emp {
    font-family: 'Barlow-Regular';
}
.text-blue-emp {
    color: #10069F;
}
.ml-20 {
    margin-left: 20px;
}
.mt-16 {
   margin-top: 16px; 
}
}
.mb-15 {
   margin-bottom: 15px; 
}
}
.mt-16 {
   margin-top: 16px; 
}
.space-end {
    justify-content: flex-end;
}
/************************************************************/
/**********************BILL-STRUCTURE************************/
.layout-bill-emp .ThemeGrid_Container,
.layout-bill-emp .Page.desktop .Content.ThemeGrid_Wrapper{
    max-width: none;
}

.layout-bill-emp .tablet .MainContent,
.layout-bill-emp .phone .MainContent {
    margin-top: 0 !important;
    padding: 0;
}

html .layout-bill-emp .tablet .Content.ThemeGrid_Wrapper,
html .layout-bill-emp .phone .Content.ThemeGrid_Wrapper {
    padding-top: 0 !important;
}
.emp-bill-cont{  
    justify-content: space-between;
    box-sizing: content-box;
    min-height: 100%;
    max-width: 1285px;
    margin: auto;
    line-height: 1.43;
    color: #464646;
}
.emp-bill-main{
    padding: 18px 0 31px;
    width: 100%;
    background: #FFFFFF;
    max-width: 554px;
    box-shadow: 0px 0px 15px rgba(16, 6, 159, 0.15);
    border-radius: 8px;

}
.emp-bill-cont .green-box{
    width: 502px;
    margin: auto;
    background-color: #42E8B4;
    padding: 32px 0 37px;
    text-align: center;
    box-shadow: 0px 10px 30px rgba(204, 204, 204, 0.45);
    border-radius: 8px;
    color: #191919;
    font-size: 22px;
    line-height: 26px;
}
.emp-bill-cont .green-box .iconDisplay{
    font-size: 2em;
}
.emp-bill-cont .info-row{
    display: flex;
    justify-content: space-between;
    line-height: 34px;
}
.emp-bill-cont .info-cont-top .info-row{
    font-size: 18px;
}
.emp-bill-cont .separation-line{
    background: #000000;
    height: 0.05em;
    margin-top: 27px;
}
.emp-bill-cont .emp-bill-bill{
    max-width: 622px;
    color: #464646;
    margin: auto;
    padding: 0 23px 0;
}
.emp-bill-cont .green-triangle{
    width: 0;
    height: 0;
    border-left: 19px solid transparent;
    border-right: 19px solid transparent;
    border-top: 20px solid #42e8b4;
    margin: auto;
    margin-top: -4px;
}
.emp-bill-cont .info-message{
    margin-top: 11px;
    width: auto;
}
.emp-bill-cont .info-top{
    margin-top: 16px;
}
.emp-bill-cont .info-middle:first-child{
    margin-top: 18px;
}
.emp-bill-cont .info-middle,
.emp-bill-cont .info-bottom{
    margin-top: 14px;    
}
.emp-bill-cont .input-text-container,
.emp-bill-cont .info-cont{
    border: 1px solid #E0E8FC;
    padding: 0 20px 0 24px;
    border-radius: 8px;
}
.emp-bill-cont .info-cont-top{
    padding-top: 14px;
    padding-bottom: 12px;
}
.emp-bill-cont .info-cont-middle{
    margin-top: 11px;
    padding-top: 21px;
    padding-bottom: 16px;
    font-size: 16px;
}
.emp-bill-cont .info-cont-bottom{
    margin-top: 18px;
    padding-top: 14px;
    padding-bottom: 21px;
}
.emp-bill-cont .info-title-bottom,
.emp-bill-cont .info-title-middle{
    font-size: 22px;
    padding-left: 40px;
}
.emp-bill-cont .info-row-left{
    font-family: 'Barlow-Medium';
}
.emp-bill-cont .info-row-right{
    font-family: 'Barlow-Regular';
}
.emp-bill-cont .list-desktop {
    line-height: 20px;
}
.emp-bill-cont .list-mobile {
    line-height: 18px;
}
.emp-bill-cont .total-amount {
    max-width: 20%;
    text-align: right;
    padding-right: 10px;
}
/************************************************************/
/************************WIDGET-MOD**************************/
.emp-bill-cont .TableRecords_OddLine, 
.emp-bill-cont .TableRecords_EvenLine,
.emp-bill-cont .TableRecords,
.emp-bill-cont .TableRecords_Header{
    border: none;
    padding: 0;
}
.emp-bill-cont .TableRecords_Header{
    text-align: left;
}
.emp-bill-cont .TableRecords_OddLine, 
.emp-bill-cont .TableRecords_EvenLine,
.emp-bill-cont .TableRecord{
    padding-top: 11px;
    font-family: 'Barlow-Regular';
}

.desktop .TableRecords_OddLine:first-child, 
.desktop .TableRecords_EvenLine:first-child, 
.desktop .TableRecords_Header:first-child{
    padding: 0;
}
.desktop .TableRecords_OddLine:first-child, 
.desktop .TableRecords_EvenLine:first-child{
    padding-top: 11px;
}
.emp-bill-cont input[type="text"]{
    margin-top: 4px;
    border: 1px solid #999999;
    box-sizing: border-box;
    border-radius: 8px;
    height: 42px;
    width: 100%;
    padding-left:16px;
}
.emp-bill-cont input[type="text"]::placeholder{
    color: #999999;
    font-family: 'Barlow-Regular';
    font-size: 16px;
}
.emp-bill-cont .ValidationMessage,
.emp-bill-cont .input-error-emp::placeholder{
    color: #E8200C !important;
}
.emp-bill-cont .input-error-emp{
    border: 1px solid #E8200C !important;
}
.emp-bill-cont .ValidationMessage{
    position: absolute;
    display: flex;
    font-size: 14px !important;
    margin-top: 4px;
}
.emp-bill-cont .Button,
.emp-bill-cont .Button[disabled]{
    max-width: 260px;
    width: 100%;
    height: 44px;
    background: #CCCCCC !important;
    border-radius: 22px !important;
    color: #464646 !important;
    font-family: 'Barlow-Medium';
    border: 0 !important;
    font-size: 16px;
}
.emp-bill-cont .Button {
    background: #FF3D00 !important;
    color: #FFFFFF !important;
    cursor: pointer;
    margin: 0;
}
.emp-bill-cont .Button:focus {
    outline: none;
}
.emp-bill-cont .TableRecords thead {
    position: absolute;
    top: -40px;
    display: inline-table;
    width: 100%;
    font-size: 14px;
    font-family: 'Barlow-SemiBold';
}
.emp-bill-cont .TableRecords {
    background-color: #fff;
    box-shadow: none;
    border-radius: 8px;
    font-size: 16px;
    font-family: Barlow-Medium;
    position: relative;
    margin: 40px 0 0 0;
}
.emp-bill-cont .Alert.Info {
    background: #FFFFFF;
    display: flex;
    border-radius: 8px;
    border: 1px solid #10069F;
    margin-bottom: 20px;
    padding: 8px 15px 8px 0;
    line-height: 16px;
    font-size: 14px;
}
.emp-bill-cont .Alert.Info .fa-fw {
    width: 56px;
    display: flex;
    align-items: center;
    position: initial;
}
.emp-bill-cont .Alert.Info .fa-info-circle:before {
    font-size: 1.67em;
    margin: auto;
    color: #10069F;
}
.emp-bill-cont .Alert.Info div{
    max-width: 437px;
}
.emp-bill-cont .TableRecords_Header:last-child,
.emp-bill-cont .TableRecords_OddLine:last-child,
.emp-bill-cont .TableRecords_EvenLine:last-child{
    text-align: right;
    padding-right: 10px;
}
.emp-bill-cont .TableRecords_Header:last-child{
    padding-right: 23px;
}
.emp-bill-cont .TableRecords_EvenLine {
    background-color: #ffffff;
}
.emp-bill-cont input[type="text"]:focus {
    outline: none;
}
/************************************************************/
/***************************EMAIL****************************/
.emp-bill-cont .email-cont{
    width: 358px;
    box-shadow: 0px 0px 15px rgba(16, 6, 159, 0.15);
    border-radius: 8px;
    padding: 18px 24px 34px;
    background: #FFFFFF;
    color: #464646;
    box-sizing: border-box;
}
.emp-bill-cont .email-cont .iconDisplay{
    font-size: 2.5em;
    margin-right: 0;
    color: #10069F;
    font-weight: 600;
}
.emp-bill-cont .input-text-container{
    padding: 24px 24px 40px;
    margin-top: 20px;
}
.emp-bill-cont .button-email{
    margin-top: 38px;
    text-align: center; 
}
.emp-bill-cont .bottom-info-email{
    margin-top: 33px;
}

/************************************************************/
/***************************PHONE****************************/
.layout-bill-emp .tablet .Content, .layout-bill-emp .phone .Content {
    padding: 0 !important;
}
.tablet .emp-bill-cont, .phone .emp-bill-cont{
    display:block;
    box-shadow: 0px 0px 15px rgba(16, 6, 159, 0.15);
    padding: 0;
}
.tablet .green-box, .phone .green-box{
    max-width: 300px;
    padding-top: 19px;
    padding-bottom: 19px;
    width: 100%;
}
.tablet .emp-bill-main, .phone .emp-bill-main{
    padding: 0 14px 0;
    border-radius: 8px 8px 0 0;
    box-shadow: none;
    width: auto;
}
.tablet .emp-bill-cont .emp-bill-bill, .phone .emp-bill-cont .emp-bill-bill{
    padding: 25px 0;
    max-width:300px;
    margin: auto;
}
.tablet .emp-bill-cont .info-middle .info-row, .phone .emp-bill-cont .info-middle .info-row{
    font-size: 16px;
}
.tablet .emp-bill-cont .info-cont, .phone .emp-bill-cont .info-cont{
    padding-right: 15px;
    padding-left: 19px;
}

.tablet .emp-bill-cont .info-title-bottom, 
.tablet .emp-bill-cont .info-title-middle,
.phone .emp-bill-cont .info-title-bottom, 
.phone .emp-bill-cont .info-title-middle{
    padding-left: 0;
}

.tablet .emp-bill-cont .separation-line,
.phone .emp-bill-cont .separation-line{
    margin-top: 12.5px;
}

.tablet .emp-bill-cont .info-cont-top,
.phone .emp-bill-cont .info-cont-top{
    padding-top: 15px;
    padding-bottom: 12px;
}

.tablet .emp-bill-cont .email-cont,
.phone .emp-bill-cont .email-cont{
    width: 100%;
    border-radius: 0 0 8px 8px;
    box-shadow: none;
    padding: 18px 14px 34px;
}

.tablet .emp-bill-cont .input-text-container,
.phone .emp-bill-cont .input-text-container{
    padding: 24px 8px 31px 10px;
    margin-top: 11px;
}

.tablet .emp-bill-cont .inputs-container,
.phone .emp-bill-cont .inputs-container{
    margin: 17px auto 0;
    max-width: 264px;
}

.tablet .emp-bill-cont .button-email,
.phone .emp-bill-cont .button-email{
    max-width: 260px;
}

.tablet .emp-bill-cont .email-content,
.phone .emp-bill-cont .email-content{
    max-width: 300px;
    margin: auto;
}

.tablet .emp-bill-cont .Alert.Info,
.phone .emp-bill-cont .Alert.Info {
    padding: 14px 10px 14px 0;
}

.tablet .emp-bill-cont .Alert.Info div,
.phone .emp-bill-cont .Alert.Info div {
    max-width: 203px;
}

.tablet .emp-bill-cont .Alert.Info .fa-fw,
.phone .emp-bill-cont .Alert.Info .fa-fw{
    display: inline-block;
}

.tablet .emp-bill-cont .amount-cont,
.phone .emp-bill-cont .amount-cont{
    margin-top: 0;
}

.tablet .emp-bill-cont .total-amount,
.phone .emp-bill-cont .total-amount{
    max-width: none;
    padding-right: 0;
}
/***********************OVERFLOW*************************/
.emp-bill-cont .overflow-service,
.emp-bill-cont .overflow-company-name,
.phone .emp-bill-cont .overflow-order,
.tablet .emp-bill-cont .overflow-order{
    max-width: 150px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.emp-bill-cont .overflow-service{
    max-width: 135px;
}

.tablet .emp-bill-cont .overflow-service,
.phone .emp-bill-cont .overflow-service{
    max-width: 146px;
}
.emp-bill-cont .overflow-company-name{
    max-width: 250px;
}

.tablet .emp-bill-cont .overflow-company-name,
.phone .emp-bill-cont .overflow-company-name{
    max-width: 70px;
}
/* Modal **************************/
.emp-bill-cont .ModalContainer{
    padding: 0;
    width: auto;
    border-radius: 8px;
}

.tablet .emp-bill-cont .ModalContainer,
.phone .emp-bill-cont .ModalContainer {
    max-width: 340px;
    width: 100%;
    height: auto;
}
.emp-bill-cont .ModalMessage {
    margin-bottom: 0;
}
.emp-bill-cont .modal-send-billing-body .Button {
    background: #10069F !important;
}
body.ModalOpened .desktop .emp-bill-cont .ModalContainer {
    transform: translateX(-50%) translateY(-77.5%) translateZ(0);
}

body.ModalOpened .tablet .emp-bill-cont .ModalContainer,
body.ModalOpened .phone .emp-bill-cont .ModalContainer{
    transform: translateX(-50%) translateY(-40%) translateZ(0);
}
body.ModalOpened .emp-bill-cont .ModalBackground {
    background: rgba(25, 25, 25, 0.7);
}
/***********************************/
.modal-send-billing-body {
    background: #FFFFFF;
    max-width: 576px;
    width: 100%;
    text-align: center;
    font-size: 16px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    padding: 34px 0 41px;
}
.modal-send-billing-body img {
    width: 100px;
    height: 98px;
}
.modal-send-billing-body .content-info-modal {
    padding: 0 35px 0
}

.tablet .modal-send-billing-body,
.phone .modal-send-billing-body {
    max-width: 340px;
    width: 100%;
    padding: 27px 0 32px;
}

/* BoxShadow */
.BoxShadow {
    background: #FFFFFF;
    box-shadow: 0px 0px 24px 2px rgba(25, 25, 25, 0.16);
    border-radius: 30px;
    padding: 40px;
}

/* CustomContainer */
.CustomContainer {
    border-radius: 8px;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

.margin-auto {
    margin: 0 auto;
}

.btn-pill {
    border-radius: 40px !important;
}

@media only screen and (max-width: 600px) {
    .col-sm-1 {
        width: 8.33% !important;
        margin-left: 0px !important;
    }

    .col-sm-2 {
        width: 16.66% !important;
        margin-left: 0px !important;
    }

    .col-sm-3 {
        width: 25% !important;
        margin-left: 0px !important;
    }

    .col-sm-4 {
        width: 33.33% !important;
        margin-left: 0px !important;
    }

    .col-sm-5 {
        width: 41.66% !important;
        margin-left: 0px !important;
    }

    .col-sm-6 {
        width: 50% !important;
        margin-left: 0px !important;
    }

    .col-sm-7 {
        width: 58.33% !important;
        margin-left: 0px !important;
    }

    .col-sm-8 {
        width: 66.66% !important;
        margin-left: 0px !important;
    }

    .col-sm-9 {
        width: 75% !important;
        margin-left: 0px !important;
    }

    .col-sm-10 {
        width: 83.33% !important;
        margin-left: 0px !important;
    }

    .col-sm-11 {
        width: 91.66% !important;
        margin-left: 0px !important;
    }

    .col-sm-12 {
        width:100% !important;
        margin-left: 0px !important;
    }
    
    
    .text-align-sm-left {
        text-align: left !important;
    }
    
    .text-align-sm-center {
        text-align: center !important;
    }
    
    .text-align-sm-right {
        text-align: right !important;
    }
    
    .no-padding-sm {
        padding: 0px !important;
    }
    
    .no-margin-sm {
        margin: 0px !important;
    }
    
    .break-columns {
        flex-direction: column;
    }
}

.phone .BoxShadow, .tablet .BoxShadow {
    padding: 24px 11px;
    border-radius: 16px;
}

.phone .Title {
    font-size: 26px;
}

/* Expired bill 25-03-2022 */
.expired-bill{
    background-color: #FFF0D9;
    padding-right: 12px;
    padding-left: 12px;
    padding-bottom: 8px;
    padding-top: 8px;
    border-radius: 16px;
    text-align: center;
}
.phone .expired-bill{
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 7px;
    padding-top: 7px;
}
.vertical-align-center{
    align-items: center;
}
.expiredBillCard{
    background-color: #FFF0D9;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    color: #191919;
    border: 1px solid #FFF0D9;
    font-size: 16px;
    text-align: left;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 15px;
}
.expiredBillCard-icon {
    -ms-flex-item-align: start;
    align-self: flex-start;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-size: 24px;
    margin-right: 10px;
}
.expiredBillCard-close {
    align-self: flex-start;
    display: inline-flex;
    margin-left: 20px;
}
.expiredBillCard-message {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-left: 10px;
}
/*Deuda text*/
.phone .debts_document_container .main_container_debts {
    height: 24px; 
    border:none;
}
.text_debts_ph_.contenido {width: 25%;}
.text_debts_ph_.title {width: 100%;}
.text_debts_ph_{
    text-align: left;
    font-size: 18px;
    line-height: 22px;
    
    
    
}
/*Pill Tag*/
.pill-tag{
    padding: 4px 8px;
    height: 24px;
    border-radius: 4px;
    width: max-content;
    text-align: center;
    font-size: 12px;
    display: flex;
    align-items: center;
}
.pill-tag.warning{border: 1px solid #F5B207;background-color: #FEF9EC;}
.pill-tag.info{border: 1px solid #002EFF;background-color: #F3F5FF;}
.pill-tag.error{border: 1px solid #DB110A;background-color: #FEF4F3;}
.pill-tag img{width: 16px; margin-right:4px;}
/*AlertMessage*/
.alertmessage {
    padding:16px;
    border-radius: 8px;
    display: flex;
     -webkit-box-align: center;
    -ms-flex-align: center;
    display: -ms-flexbox;
    text-align: left;
    margin: 0 105px 20px 105px ;
}
.alertmessage img{margin-right: 16px;}
.alertmessage.warning{background:#FEF9EC;}
.alertmessage.info{background: #F3F5FF;}
.alertmessage.error{background: #FEF4F3;}
.phone .alertmessage, .tablet .alertmessage{margin: 0 0 20px 0;}
/*Otros Padding*/
.padding-top-s{padding-top:8px;}
.padding-s{padding: 8px;}
.padding-xs{padding: 4px;}