@import url("Theme.Login_Theme.css?9447");

/*************************************************************************
                                INDEX v.3

    1) Import Font, Root Variables and reused elements.
    2) Screen Background
    3) Header
    3.1) Header change-header
    3.2) Header dark-blue
    4.1) Card Movil
    4.2) Card Hogar
    4) Footer
    6) ClaudIA
    7) block BoxContent
    8) Buttons
    9) footer block
    10) Block responsive claudIA
    11) Error
    12) Message cloud block
    13) EnterCode
    14) SecurityData
    16) Checkbox
    17) Fix elements screen ErrorAssociation
    20) EmailSent_wrapper
    21) Loading
    22) Modal
    23) Media Queries
    24) Error inputs validation.
    25) Service Error.
    26) All Fixed screens
    27) Special Modal EnterCode
    28) Block similar errors

*************************************************************************/

/********************* 1) Import Font, Root Variables and reused elements ****************/

:root {
    
    /* Color - Custom */
    --color-blue-cm: #004FB9;
    --color-pink-cm: #F46CBF;
    --color-light-blue-cm: #00B9EB;
    --color-gray-cm: #4E5057;
    --color-gray-medium-cm: #CCCCCC;
    --color-light-gray-cm: #DBDBDB;
    --color-green-cm: #00a364;
    
    /* Border Radius Custom */
    --border-radius-medium: 8px;
    
      /* Text Weight */
    --font-light:'Barlow-Light-webfont';
    --font-regular: 'Barlow-Regular-webfont';
    --font-medium: 'Barlow-Medium-webfont';
    --font-semi-bold: 'Barlow-SemiBold-webfont';
    --font-bold: 'Barlow-Bold-webfont';
    

}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  src: url('/PE_Web_Login_B2B_RES/Barlow-Regular.ttf');
}
@font-face {
  font-family: 'Barlow-Medium';
  font-style: normal;
  font-weight: 500;
  src: url('/PE_Web_Login_B2B_RES/Barlow-Medium.ttf');
}
@font-face {
  font-family: 'Barlow-SemiBold';
  font-style: normal;
  font-weight: bold;
  src: url('/PE_Web_Login_B2B_RES/Barlow-SemiBold.ttf');
}

@font-face {
font-family: 'Barlow-Light-webfont';
src: url('/PE_Web_Login_B2B_RES/Barlow-Light-webfont.eot');
src: url('/PE_Web_Login_B2B_RES/Barlow-Light-webfont.eot?iefix') format('eot'),
     url('/PE_Web_Login_B2B_RES/Barlow-Light-webfont.woff') format('woff'),
     url('/PE_Web_Login_B2B_RES/Barlow-Light-webfont.ttf') format('truetype'),
     url('/PE_Web_Login_B2B_RES/Barlow-Light-webfont.svg#webfontpQgNQDw9') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Barlow-Regular-webfont';
src: url('/PE_Web_Login_B2B_RES/Barlow-Regular-webfont.eot');
src: url('/PE_Web_Login_B2B_RES/Barlow-Regular-webfont.eot?iefix') format('eot'),
     url('/PE_Web_Login_B2B_RES/Barlow-Regular-webfont.woff') format('woff'),
     url('/PE_Web_Login_B2B_RES/Barlow-Regular-webfont.ttf') format('truetype'),
     url('/PE_Web_Login_B2B_RES/Barlow-Regular-webfont.svg#webfontpQgNQDw9') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Barlow-Medium-webfont';
src: url('/PE_Web_Login_B2B_RES/Barlow-Medium-webfont.eot');
src: url('/PE_Web_Login_B2B_RES/Barlow-Medium-webfont.eot?iefix') format('eot'),
     url('/PE_Web_Login_B2B_RES/Barlow-Medium-webfont.woff') format('woff'),
     url('/PE_Web_Login_B2B_RES/Barlow-Medium-webfont.ttf') format('truetype'),
     url('/PE_Web_Login_B2B_RES/Barlow-Medium-webfont.svg#webfontpQgNQDw9') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Barlow-SemiBold-webfont';
src: url('/PE_Web_Login_B2B_RES/Barlow-SemiBold-webfont.eot');
src: url('/PE_Web_Login_B2B_RES/Barlow-SemiBold-webfont.eot?iefix') format('eot'),
     url('/PE_Web_Login_B2B_RES/Barlow-SemiBold-webfont.woff') format('woff'),
     url('/PE_Web_Login_B2B_RES/Barlow-SemiBold-webfont.ttf') format('truetype'),
     url('/PE_Web_Login_B2B_RES/Barlow-SemiBold-webfont.svg#webfontpQgNQDw9') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Barlow-Bold-webfont';
src: url('/PE_Web_Login_B2B_RES/Barlow-Bold-webfont.eot');
src: url('/PE_Web_Login_B2B_RES/Barlow-Bold-webfont.eot?iefix') format('eot'),
     url('/PE_Web_Login_B2B_RES/Barlow-Bold-webfont.woff') format('woff'),
     url('/PE_Web_Login_B2B_RES/Barlow-Bold-webfont.ttf') format('truetype'),
     url('/PE_Web_Login_B2B_RES/Barlow-Bold-webfont.svg#webfontpQgNQDw9') format('svg');
font-weight: normal;
font-style: normal;
}

html, body {
    background-color: #FFF;
}
.text-blue {
    color: #004FB9;
}
.text-blue-sf {
    color: #004FB9
}
.text-pink {
    color: #FD6C98;
    display: contents;
}
.text-orange {
    color: #FF560A;
}
.text-orange-sf {color: #FF560A;}

.bg_white{background-color: #FFFFFF}

.text-grey{color: #4E5057;}

.dis-flex{display: flex;}

.pipeline-right:after {
    border-right:1px solid #CCC;
    content:' ';
    margin-left:20px;
    margin-right:20px;
    padding-bottom:10px;
    padding-top:10px;
}
.phone .pipeline-right:after {
    border-right: none;   
}

/* Fonts variations */
.Text_Light {font-family: var(--font-light);}
.Text_Regular {font-family: var(--font-regular);}
.Text_Medium {font-family: var(--font-medium);}
.Text_SemiBold {font-family: var(--font-semi-bold);}
.Text_Bold {font-family: var(--font-bold);}


/* Fonts colors */
.Text_Blue, .Page .Text_blue {color: #004FB9}
.Text_DarkBlue {color: #020247}
.Text_SoftBlue {color: #7EB1F6}
.Text_BlackishBlue{color: #191919}
.Text_Orange, .Page .Text_orange {color: #FF560A !important}
.Text_Red {color: #E8200C}
.Text_Black, .Page .Text_black {color: #000;}
.Text_LightBlack {color: #4a4a4a;}
.Text_LightGreen {color: #42E8B4}
.Text_Green, .Text_DarkGreen {color: #017E4E}
.Text_ActiveGreen {color: #00a364}
.Text_Gray {color: #333}
.Text_DarkGray {color: #999}
.Text_MediumGray {color: #636467}
.Text_CustomGray {color: var(--color-gray-cm)}
.Text_White {color: var(--color-neutral-0)}
.Text_dark_blue {color: #020247}
.Text_pink {color: var(--color-pink-cm);}
.Text_BlueB2B{color: #221E78}
.Text_RedB2B{color: #FB1313}
.Text_WaterGreen{color: #5CDEB1}
.Text_Red_Error{color: #F10202;}

/* Fonts sizes */
.Font_10 {font-size: 10px}
.Font_12 {font-size: 12px}
.Font_14 {font-size: 14px}
.Font_15 {font-size: 15px}
.Font_16 {font-size: 16px}
.Font_18 {font-size: 18px}
.Font_20 {font-size: 20px}
.Font_22 {font-size: 22px}
.Font_24 {font-size: 24px}
.Font_26 {font-size: 26px}
.Font_28 {font-size: 28px}
.Font_30 {font-size: 30px}
.Font_32 {font-size: 32px}
.Font_34 {font-size: 34px}
.Font_36 {font-size: 36px}
.Font_38 {font-size: 38px}
.Font_40 {font-size: 40px}

/* Fonts weight */
.fw-300 {font-weight: 300}
.fw-400 {font-weight: 400}
.fw-500 {font-weight: 500}
.fw-600 {font-weight: 600}

/* Text transform */
.capitalize-text {text-transform: capitalize}

/* Fonts line-height */
.lh-14 {line-height: 14px}
.lh-16 {line-height: 16px}
.lh-18 {line-height: 18px}
.lh-20 {line-height: 20px}
.lh-22 {line-height: 22px}
.lh-24 {line-height: 24px}
.lh-26 {line-height: 26px}
.lh-30 {line-height: 30px}
.lh-32 {line-height: 32px}
.lh-35 {line-height: 35px}
.lh-40 {line-height: 40px}
.lh-45 {line-height: 45px}

.phone .vertical-line-height .TableVerticalAlign {line-height: 15px}

/* Text properties */
.Uppercase {text-transform: uppercase}
.Lowercase {text-transform: capitalize}
.Underline {text-decoration: underline}

/* Margin Top */
.mt--3 {margin-top: -3px}
.mt--7 {margin-top: -7px}
.mt-3 {margin-top: 3px}
.mt-5 {margin-top: 5px}
.mt-10 {margin-top: 10px}
.mt-12 {margin-top: 12px}
.mt-15 {margin-top: 15px}
.mt-17 {margin-top: 17px}
.mt-20 {margin-top: 20px}
.mt-24 {margin-top: 24px}
.mt-25 {margin-top: 25px}
.mt-27 {margin-top: 27px}
.mt-30 {margin-top: 30px}
.mt-32 {margin-top: 32px}
.mt-35 {margin-top: 35px}
.mt-40 {margin-top: 40px}
.mt-55 {margin-top: 55px}
.mt-64 {margin-top: 64px}
.mt-65 {margin-top: 65px}

/* Margin Bottom */
.mb-5 {margin-bottom: 5px}
.mb-10 {margin-bottom: 10px}
.mb-15 {margin-bottom: 15px}
.mb-17 {margin-bottom: 17px}
.mb-20 {margin-bottom: 20px}
.mb-25 {margin-bottom: 25px}
.mb-30 {margin-bottom: 30px}
.mb-35 {margin-bottom: 35px}
.mb-98 {margin-bottom: 98px}
.mb-108 {margin-bottom: 108px}
.mb-110 {margin-bottom: 110px}
.mb-111 {margin-bottom: 111px}
.mb-112 {margin-bottom: 112px}
.mb-145 {margin-bottom: 145px}
.mb-176 {margin-bottom: 176px}

/* Margin Right */
.mr-0 {margin-right: 0}
.mr-3 {margin-right: 3px}
.mr-5 {margin-right: 5px;}
.mr-10 {margin-right: 10px;}
.mr-18 {margin-right: 18px;}
.mr-20 {margin-right: 20px;}
.mr-25 {margin-right: 25px;}
.mr-30 {margin-right: 30px;}
.mr-40 {margin-right: 40px;}

/* Margin Left */
.ml-0 {margin-left: 0}
.ml-3 {margin-left: 3px}
.ml-5 {margin-left: 5px;}
.ml-7 {margin-left: 7px;}
.ml-10 {margin-left: 10px;}
.ml-20 {margin-left: 20px;}
.ml-30 {margin-left: 30px;}
.ml-40 {margin-left: 40px;}
.ml-70 {margin-left: 70px;}
.ml-95 {margin-left: 95px;}

/* Margin Auto */
.margin-left-auto {margin-left: auto}
.margin-right-auto {margin-right: auto}
.margin-auto{margin: auto}

/* paddings */
.Padding_5 {padding: 5px}
.Padding_10 {padding: 10px}
.Padding_15 {padding: 15px}
.Padding_20 {padding: 20px}
.Padding_25 {padding: 25px}
.Padding_30 {padding: 30px}

.padding_top_10 {padding-top: 10px}
.padding_bt_10 {padding-bottom: 10px}

/*widths*/
.width_30{width: 30px}
.Width_219px {width: 219px !important}
.Width_328px {width: 328px !important}

.width_70_percent{width: 70%}

/*heigths*/
.height_50 {height: 50px !important}

/* Boders */
.border-bottom-gray {border-bottom: 1px solid #333}
.border-bottom-light-gray {border-bottom: 1px solid #ddd}

/* Boders radius */
.border-radius-8 {border-radius: 8px}

/*align text*/
.text-align-center{text-align: center}
.text-align-left{text-align: left}
.text-align-right{text-align: right}

/*align items*/
.align-center{align-items: center}

/*Justify-content*/
.jc-flex-end{justify-content: flex-end;}

.position-absolute{position: absolute}
.width-fill{width:100%;}

.fs-18 {
    font-size: 18px;
}
.fs-22 {
    font-size: 22px;
}
.fs-28 {
    font-size: 28px;
}
.fs-60 {
    font-size: 60px;
}
.lh-60 {
    line-height: 60px
}
.mr-16 {
    margin-right:  16px;
}

.ml-15{margin-left: 15px;}
.lh-18{line-height: 18px;}

.text-medium {
    font-family: 'Barlow-Medium';
}

.text-semi-bold {
    font-family: 'Barlow-SemiBold';
}
 
.dis-flex-center{
    display: flex;
    justify-content: center;
}

.desktop .content {
    min-height: calc(100% - 258px);
    padding-bottom: 100px;
}

.desktop.service-error .content {
    min-height: calc(100% - 258px);
    padding-bottom: unset;
}
.desktop.header-change .content,
.tablet.header-change .content {
    min-height: calc(100% - 170px);
}
.phone.header-change .content {
    min-height: calc(100% - 130px);
}
.phone .content {
    min-height: calc(100% - 256px);
}
.tablet .content {
    min-height: calc(100% - 260px);
}
a, a:link, a:visited {
    color: inherit !important;
    font-family: inherit;
    font-size: inherit !important;
    font-weight: initial !important;
    line-height: initial;
    text-decoration: none !important;
}
.eye-container {
    position: absolute;
    right: 9px;
    top: 10px;
}
.container-error-code {
    color: #E8200C;
    display: block;
    font-size: 14px;
    font-family: 'Barlow-Medium';
    position: absolute;
    padding-left: 5px;
    padding-top: 5px;
    
}
/****************** End Import Font, Root Variables and reused elements *****************/

/***************************** 2) Background ***************************/
.Page {
    background: url('/PE_Web_Login_B2B_RES/img/img_background_desktop_company.svg') no-repeat;
    padding: 32px 0 0 0;
    position: relative;
    background-position: center top;
    
    background-size: contain;
}
.Company_Background {
    background: url('/PE_Web_Login_b2b_RES/img/img_background_desktop_company.svg') no-repeat;
}
.tablet.Page {
    background-size: calc(100% + 60px);
}
.phone.Page {
    padding: 0;
    background: unset;
}
.Alter_background {
    background: url('/PE_Web_Login_B2B_RES/img/BannerMobile.png?1036') no-repeat;
    padding: 0;
}
.tablet.blue-header.Page.EmailSent_wrapper {
    background-size: 120%;
}
form {
    background-color: #FFFFFF;
}
/**************************** End Background ***************************/
.WelcomeHeader_icon {
    height: 51px;
    width: 65px;
}
.phone .WelcomeHeader_icon {
    height: 28px;
    width: 37px;
}
.WelcomeHeader_icon img {
    height: auto;
    width: 100%;
    margin-top: 5px;
}
.phone .WelcomeHeader_icon img {
    margin-top: 2px;
}
.WelcomeHeader_title,
.WelcomeHeader_title_Company {
    color: #FFFFFF;
    font-family: 'Barlow-SemiBold';
    height: 60px;
    width: 410px;
}
.WelcomeHeader_title {
    font-size: 44px;
    line-height: 53px;
}
.WelcomeHeader_title_Company {
    font-size: 28px;
    line-height: 51px;
}
.phone .WelcomeHeader_title_Company {
    margin: 0 0 0 10px;
    line-height: 20px;
    font-size: 20px;
}
.WelcomeHeader_images .PH_Preview {
    display: flex;
    justify-content: space-between;
    width: 160px;
}
.phone .WelcomeHeader_title {
    font-size: 26px;
    height: 28px;
    line-height: 31px;
    margin: 0;
    width: 242px;
}
.WelcomeHeader_images .PH_Preview,
.WelcomeLinks_Company {
    display: flex;
    justify-content: space-between;
}
.WelcomeHeader_images .PH_Preview {
    width: 160px;
}
.WelcomeLinks_Company {
    width: 100%;
}
.WelcomeHeader_title_main {
    display: flex;
    height: 60px;
    justify-content: space-between;
    margin: auto;
    width: 491px;
}
.phone .WelcomeHeader_title_main {
    justify-content: space-evenly;
    padding: 13px 15px 0 15px;
    width: auto;
}
.phone .WelcomeHeader_title_main {
    padding: 20px 44px 0 44px;
    width: auto;
    width: auto;
}
.WelcomeHeader_images {
    display: flex;
    height: 40px;
    justify-content: space-between;
    margin: auto;
    margin-top: 38px;
    width: 160px;
}
.phone .WelcomeHeader_images {
    display: none;
}
.WelcomeHeader_images img {
    height: 100%;
    max-width: 41.74px;
}
.phone .WelcomeHeader_main {
    height: 105px;
    background: url('/PE_Web_Login_B2B_RES/img/img_background_mobile_company.svg') no-repeat;
    background-size: 100% 100%;
}

.phone .WelcomeHeader_main_company {
    background: url(/PE_Web_Login_B2B_RES/img/img_background_mobile_company.svg) no-repeat !important;
}

.phone.EmailSent_wrapper .WelcomeHeader_main {
    background: url('/PE_Web_Login_B2B_RES/img/dark_background_mobile.png?1036') no-repeat;
    background-size: 100% 100%;
}

/****************************** 3.1) Header change-header ******************************/
.Page.header-change,
.phone .Page.header-change {
    background:unset;
    padding:0;
}
.header-change .header {
    align-items:center;
    background-color:#004FB9;
    display:flex;
    flex-flow:column nowrap;
    height:50px;
    justify-content:center;
}
.header-change .content-container {
    border:unset;
    box-shadow:unset;
    max-width:540px;
    padding:0;
    width:540px;
}

.CardSimulated_main {
    border-radius: 10px;
    box-shadow: 0 10px 30px 0 rgba(0,0,0,0.1);
    height: auto;
    margin-top: 39px;
    margin: auto;
    min-height: 334px;
    padding: 50px 50px 25px;
    width: 424px;
    background-color: #FFF;
}
.CardSimulated_main .registration{
    color: #4E5057;
    font-size: 16px;
    padding-top: 20px;
    text-align: center;
    text-decoration-line: underline;
}

.desktop .CardSimulated_main,r
.tablet .CardSimulated_main {
    margin-top: 36px;
}
.phone .CardSimulated_main {
    border-color: transparent;
    box-shadow: none;
    margin-top: 0;
    max-width: 375px;
    padding: 35px 20px 64px 20px;
    width: 100%;
}
.CardSimulated_tabs {
    display: flex;
    justify-content: space-between;
}
.CardSimulated_tabs > div {
    
    
}

.phone .CardSimulated_tabs {
    padding: 0 25px 0 25px;
}
.Tabs_main {
    display: flex;
    flex-flow: row;
    align-items: center;
}
.CardSimulated_content {
    margin-top: 35px;
}
.Tabs_text {
    font-family: Barlow-Medium;
    font-size: 14px;
    height: 17px;
    line-height: 17px;
    margin-left: 10px;
    white-space: nowrap;
    width: 92px;
}
.CardSimulated_tab_one .Tabs_icon img {
    height: 24px;
    width: 14.22px;
}
.CardSimulated_tab_two .Tabs_icon img {
    height: 24px;
    width: 24px;
}
.CardSimulated_tab_two .Tabs_text {
    margin-left: 10px;
}
.Card_title {
    color: #191919;
    font-family: Barlow;
    font-size: 16px;
    height: 26px;
    line-height: 26px;
    max-width: 335px;
    width: 100%;
}
.Card_input {
    height: 44.1px;
    margin-top: 3.4px;
    max-width: 345px;
    width: 100%;
}
.Card_input input {
    color: #191919;
    font-family: Barlow-Medium;
    font-size: 18px;
    font-weight: 500;
    line-height: 16px;
    width: 100%;
}
.Card_input input::placeholder {
    font-family: Barlow;
    color: #999999;
}
.Card_button {
    height: 45px;
    margin-top: 39px;
    width: 100%;
}
.phone .Card_button {
    width: 335px;
}
.Card_button input {
    border-color: transparent !important;
    border-radius: 8px;
    color: #FFFFFF;
    font-family: Barlow;
    font-size: 18px;
    font-weight: 600;
    height: 100%;
    line-height: 26px;
    margin: auto;
    text-align: center;
    width: 100%;
}
.Card_button input.Button {
    font-family: Barlow-SemiBold;
}
.phone .Card_button input {
    height: 100%;
}
.Card_button input:disabled, .Card_button input:disabled:hover {
    background-color: #F2F2F2 !important;
    color: #636467 !important;
}
.CardSimulated_tab_one.active,
.CardSimulated_tab_two.active {
    border-bottom: 2px solid #221E78;
    padding-bottom: 5px;
    color: #221E78;
}
.CardSimulated_tab_one.active .Tabs_text,
.CardSimulated_tab_two.active .Tabs_text {
    font-family: Barlow-SemiBold;
}
.CardSimulated_tab_two {
    width: 139px;
    color: #4D4D4D;
}
.CardSimulated_tab_one {
    width: 127px;
    color: #4D4D4D;
}
.CardSimulated_content.hogar {
    margin-top: 17px;
}
.Card_main .container-error-code{
    position: relative;
}
/**************************** End Card Movil ****************************/
/*************************** 4.2) Card Hogar ****************************/

.CardHogar_ci {
    color: #191919;
    font-family: Barlow;
    font-size: 16px;
    height: 26px;
    line-height: 26px;
    width: 296px;
}
.CardHogar_ci_input {
    height: 44.1px;
    margin-top: 3.4px;
    width: 100%;
}
.CardHogar_ci_input input {
    color: #191919;
    font-family: 'Barlow-Medium';
    font-size: 18px;
    height: 100% !important;
    line-height: 16px;
    width: 100%;
}
.CardHogar_ci_input input::-webkit-input-placeholder {
    color: #999999;
    font-family: Barlow;
    font-size: 18px;
    line-height: 16px;
}
.CardHogar_sign_in, .CardHogar_forgot_pass {
    color: #004FB9;
    font-family: 'Barlow-Medium';
    font-size: 14px;
    height: 22px;
    line-height: 20px;
    margin-top: 4px;
    text-align: right;
}
.CardHogar_sign_in {
    width: 140px;
    padding-right: 5px;
    margin-right: 5px;
}
.CardHogar_sign_in:after {
    content: "";
    color: #575757;
    position: absolute;
    left: 169px;
}
.CardHogar_forgot_pass {
    width: 360px;
}
.CardHogar_pass {
    color: #191919;
    font-family: Barlow;
    font-size: 16px;
    height: 26px;
    line-height: 26px;
    width: 296px;
}
.CardHogar_pass_and_texts {
    display: flex;
    position: relative;
}
.CardHogar_pass_input {
    height: 45px;
    width: 296px;
    margin-top: 3.4px;
    position: relative;
}
.CardHogar_pass_input input {
    color: #191919;
    font-family: Helvetica;
    font-size: 18px;
    line-height: 16px;
    width: 100%;
    height: 45px;
}
.CardHogar_pass_input input::-webkit-input-placeholder {
    color: #999999;
    font-family: Barlow;
    font-size: 18px;
    line-height: 16px;
    height: 45px;
}
.CardHogar_button {
    height: 45px;
    width: 296px;
    margin-top: 39px;
}
.CardHogar_button input {
    border-color: transparent !important;
    font-family: 'Barlow-SemiBold';
    font-size: 18px;
    height: 100%;
    line-height: 26px;
    margin-top: 40px;
    margin: auto;
    text-align: center;
    width: 100%;
}
.CardHogar_button input:enabled,
.CardHogar_button input:enabled:hover,
.Card_button input:enabled,
.Card_button input:enabled:hover {
    background-color: #FF560A !important;
    color: #FFFFFF;
    border-radius: 8px;
}
.CardHogar_button input:disabled, .CardHogar_button input:disabled:hover {
    background-color: #F2F2F2 !important;
    color: #636467;
    border-radius: 8px;
}

/**************************** End Card Hogar ****************************/
/***************************** 5) Footer ********************************/

.FooterDesktop_main {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 84px;
    background-color: #F1F1F1;
    display: flex;
    flex-flow: row;
    align-items: center;
}
.FooterDesktop_items {
    display: flex;
}
.FooterDesktop_images_main {
    display: flex;
}
.FooterDesktop_description {
    height: 15px;
    width: 560px;
    color: #666666;
    font-family: Barlow;
    line-height: 18px;
}
.FooterDesktop_blue_text {
    height: 15px;
    width: 38px;
    color: #004FB9;
    font-family: Barlow;
    font-size: 14px;
    line-height: 18px;
}
.FooterDesktop_text {
    height: 15px;
    width: 91px;
    color: #666666;
    font-family: Barlow;
    font-size: 14px;
    line-height: 18px;
}
.phone .FooterPhone_text {
    color: #999999;
    font-family: Barlow;
    font-size: 14px;
    height: 34px;
    line-height: 17px;
    text-align: center;
    width: 100%;
}
/****************************** End Footer ******************************/
/***************************** 6) ClaudIA *******************************/

.claudIA {
    text-align: right;
    margin-right: 140px;
}
.phone .claudIA {
    bottom:80px;
    margin:auto;
    position:absolute;
    right:10px;
}
.desktop .wgt-switch {
    position: absolute;
    bottom: 100px;
    right: 200px;
}
.claudIA-phone {
    background-color: transparent !important;
}
/***************************** End ClaudIA *****************************/
/***************************** 7) block BoxContent *******************************/
.information-text-boxContent {
    color:#191919;
    font-family:Barlow-Medium;
    font-size:18px;
    line-height:24px;
    margin-bottom:20px;
}

.header-change .title-text-content {
    font-family: Barlow;
    text-align: center;
}
/***************************** End block BoxContent *******************************/

/***************************** 7) block TextAndInput *******************************/
.title-text-content {
    align-items:center;
    color:#191919;
    display:flex;
    flex-flow:row nowrap;
    font-family:Barlow;
    font-size:16px;
    line-height:26px;
}
.input-content {
    margin-top: 3.4px;
}

.input-content input::placeholder {
    color: #999999;
    font-family: 'Barlow';
    font-weight: normal;
}
.input-content input {
    color: #191919;
    font-family: 'Barlow-medium';
    font-size: 18px;
    line-height: 16px;
    padding: 0 0 0 9px !important;
}
/***************************** End block TextAndInput *******************************/

/***************************** 8) Buttons  *******************************/
.desktop .btn-blue.Button.ButtonDefault:hover,
.desktop .btn-blue.Button.Is_Default:hover,
.tablet .btn-blue.Button.ButtonDefault:hover,
.tablet .btn-blue.Button.Is_Default:hover,
.phone .btn-blue.Button.ButtonDefault:hover,
.phone .btn-blue.Button.Is_Default:hover {
    background-color: #004FB9;
    border: 1px solid #004FB9;
}
.desktop .btn-orange.Button.ButtonDefault:hover,
.desktop .btn-orange.Button.Is_Default:hover,
.tablet .btn-orange.Button.ButtonDefault:hover,
.tablet .btn-orange.Button.Is_Default:hover,
.phone .btn-orange.Button.ButtonDefault:hover,
.phone .btn-orange.Button.Is_Default:hover {
    background-color: #FF560A;
    border: 1px solid #FF560A !important;
}
.desktop .btn-white.Button.ButtonDefault:hover,
.desktop .btn-white.Button.Is_Default:hover,
.tablet .btn-white.Button.ButtonDefault:hover,
.tablet .btn-white.Button.Is_Default:hover,
.phone .btn-white.Button.ButtonDefault:hover,
.phone .btn-white.Button.Is_Default:hover {
    background-color:#fff;
    border:1px solid #999 !important;
}

.Button.btn-orange:disabled,
.Button.btn-orange[disabled] {
    background-color: #F2F2F2;
    border: 1px solid #F2F2F2 !important;
    color: #636467;
    height: 45px;
    height: 45px;
}
.btn-orange,
.btn-white {
    font-size:18px;
    height:45px;
    line-height:26px;
    width:100%;
}
.phone .btn-orange,
.phone .btn-white,
.phone .btn-blue
{
    cursor: unset;
}
.Button.btn-orange,
.Button.btn-orange:hover,
.Button.btn-orange:focus,
.Button.btn-orange:active {
    background-color: #FF560A;
    border:1px solid #FF560A !important;
    border-radius: 8px;
    color: #FFF;
    font-family: Barlow-SemiBold;
}
.Button.btn-white,
.Button.btn-white:hover,
.Button.btn-white:focus,
.Button.btn-white:active {
    background-color:#fff;
    border:1px solid #999 !important;
    border-radius: 8px;
    color:#191919;
    height:45px;
    font-family:Barlow-Medium;
    font-weight: 500;
    line-height:26px;
}

.Button.btn-blue,
.Button.btn-blue:hover,
.Button.btn-blue:focus,
.Button.btn-blue:active {
    background-color: #004FB9;
    border: 1px solid #004FB9;
    border-radius: 8px;
    color: white;
    font-family: Barlow-SemiBold;
    margin: 40px auto 0;
    height: 45px;
    width: 350px;
}
.phone .Button.btn-blue,
.phone .Button.btn-blue:hover,
.phone .Button.btn-blue:focus,
.phone .Button.btn-blue:active {
    width: 100%;
    margin: 36px auto 0;
    font-family: Barlow-Medium;
    font-weight: 500;
}

.Button.btn-blue-sf,
.Button.btn-blue-sf:hover,
.Button.btn-blue-sf:focus,
.Button.btn-blue-sf:active {
    background-color: #004FB9;
    border: 1px solid #004FB9;
    border-radius: 8px;
    color: white;
    font-family: Barlow-Medium;
    font-weight: normal;
    margin: 0;
    font-size: 18px;
    height: 45px;
    width: 320px;
}
.phone .Button.btn-blue-sf,
.phone .Button.btn-blue-sf:hover,
.phone .Button.btn-blue-sf:focus,
.phone .Button.btn-blue-sf:active {
    width: 100%;
}
/***************************** End Buttons *******************************/

/***************************** 9) footer block *******************************/

.footer {
    position: relative;
    bottom: 0;
    width: 100%;
}
.wrapper-footer {
    align-content:center;
    align-items:center;
    background-color:#F1F1F1;
    display:flex;
    flex-flow:row nowrap;
    height:84px;
    justify-content:center;
    width:100%;
}
.phone .wrapper-footer {
    height: 80px;
}

.desktop .footer-right-elements img,
.tablet .footer-right-elements img{
    vertical-align: middle;
    margin-right: 10px;
}
.footer-left-elements,
.footer-right-elements {
    color: #666;
    font-size: 14px;
    line-height: 18px;
    vertical-align: middle !important;
}

.desktop .footer-left-elements,
.tablet .footer-left-elements {
    text-align: right;
}
.phone .footer-left-elements {
    color: #999;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
    width: 100%;
}

.desktop .footer-right-elements,
.tablet .footer-right-elements {
    text-align: center;
}
.phone .footer-right-elements {
    display: none;
}


/***************************** End footer block *******************************/

/***************************** 10)  Block responsive claudIA *******************************/
.desktop .claudIA-phone,
.tablet .claudIA-phone {
    display: none;
}
.phone .claudIA-desktop {
    display: none;
}
/***************************** End responsive claudIA *******************************/
.text-message-cloud {
    color:#000;
    font-family:Barlow;
    font-size:22px;
    line-height:24px;
    text-align:center;
    padding-left: 67px;
    padding-right: 68px;
}
.phone .text-message-cloud {
    font-size:18px;
    line-height:24px;
    margin-top: 10px !important;
    margin-top: 10px !important;
    text-align:center;
    padding-left: 20px;
    padding-right: 20px;
}

/********************************* End Message cloud block ****************************************/

/*********************************** 13) EnterCode ************************************************/

.EnterCode_inputs input {
    height: 45px;
    width: 40.83px;
}
.EnterCode_inputs input.CkeckClass {
    font-family: Barlow-Medium;
}
.EnterCode_inputs input {
    color: #221E78;
    font-family: Barlow;
    font-size: 25px;
    font-weight: 500;
    line-height: 28px;
    text-align: center;
}
.NoTabs .CardSimulated_tabs {
    display: none;
}
.EnterCode_button input {
    height: 45px;
    width: 100%;
    color: #191919 !important;
    font-family: 'Barlow-SemiBold';
    font-size: 18px;
    line-height: 26px;
    text-align: center;
    background-color: #42E8B4 !important;
    border-color: transparent !important;
    margin: auto;
    border-radius: 8px;
}
.EnterCode_text {
    color: #191919;
    font-family: Barlow;
    font-size: 18px;
    height: 48px;
    line-height: 24px;
    width: 296px;
}
.NoTabs .CardSimulated_content {
    margin-top: 0;
}
.EnterCode_inputs,
.EnterCode_inputs_Company {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    position: relative;
}

.NoTabs .container-error-code{
    position: relative;
}

.resend-text-blue {
    color: #221E78;
    font-family: 'Barlow-Medium';
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

/*********************************** End EnterCode ************************************************/

/*********************************** 14) SecurityData *********************************************/
.Password_eye {
    position: absolute;
    top: 40px;
    right: 10px;
    height: 24px;
}
.Password_eye img {
    cursor: pointer;
}
.phone .Password_eye img {
    cursor: pointer;
}

/*********************************** End SecurityData *********************************************/

/*************************************** 16) Checkbox *********************************************/

input[type="checkbox"]:checked:before {
    background: #00A364;
    border-color: transparent;
}
input[type="checkbox"]:checked:after {
    border-color: #FFFF;
    top: 7px;
    left: 5.5px;
}

/************************************** End Checkbox **********************************************/
/*********************************** 17) Fix elements screen ErrorAssociation *********************************************/

.change-button-blue .Button.btn-blue,
.change-button-blue .Button.btn-blue:focus,
.change-button-blue .Button.btn-blue:active,
.change-button-blue .Button.btn-blue:hover {
    font-family: 'Barlow-Medium';
    font-size:18px;
    line-height:26px;
    margin: 36px auto 0;
    width:100%;
}
.phone .change-button-blue .Button.btn-blue {
    font-family: Barlow;
    margin-top: 40px;
}

.title-errorAssociation {
    color:#004FB9;
    font-family:Barlow-Medium;
    font-size:22px;
    font-weight:500;
    line-height:26px;
}

.description-errorAssociation {
    color:#191919;
    font-family:Barlow;
    font-size:18px;
    line-height:25px;
}
.description-errorAssociation a {
    text-decoration: underline !important;
    color: #004FB9 !important;
}

/******************************** 20) EmailSent_wrapper  ***************************************/
.EmailSent_wrapper .description-errorAssociation {
    text-align: center;
}
.EmailSent_wrapper .description-errorAssociation {
    text-align: center;
    margin: auto !important;
}
.EmailSent_wrapper .phone .description-errorAssociation {
    width: 90%;
}
/******************************** End EmailSent_wrapper  ***************************************/
/******************************** 21) Loading  ***************************************/

.Feedback_AjaxWait {
    color: transparent;
    height: 50px;
    display: none !important;
}
/******************************** End Loading  ***************************************/
/**************************************** 22) Modal ***************************************/
.ImagesCI_img_one {
    margin-right: 80px;
}
.phone .ImagesCI_img_one {
    margin-right: 0;
}
.ModalContainer {
    border-color: transparent !important;
}

.phone .ImagesCI_img_two {
    margin-top: 20px;
}

/**************************************** End Modal ***************************************/
/*********************************** 23) Media Queries *********************************************/

@media screen and (device-aspect-ratio: 40/71) {
    .phone .WelcomeHeader_title_main {
        padding: 13px 15px 0 15px;
    }
}
@media screen and (max-width: 364px) {
    .phone .WelcomeHeader_title {
        white-space: nowrap;
        margin-left: 5px;
    }
    .phone .WelcomeHeader_icon {
        min-width: 37px;
        min-height: 28px;
    }
}

/*********************************** End SecurityData *********************************************/
/*********************************** 24) Error inputs validation *********************************************/
input.Not_Valid,
input.InputHasError  {
    border: 1px solid #E8200C !important;
    color: #E8200C !important;
}
.ValidationMessage {
    font-size: 14px;
    font-family: Barlow-Medium;
    color: #E8200C;
}
/*********************************** End Error inputs validation *********************************************/

/*********************************** 25) Service Error *********************************************/

.Page.service-error {
    min-height: unset;
    background: unset;
    padding: 40px 0 0 0;
}
.service-error .header {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
.desktop.service-error .content {
    align-items:center;
    display:flex;
    height:calc(100% - 166px);
    justify-content:center;
}
.main-content-service {
    max-width: 617px;
    margin: 0 auto;
}
.phone .main-content-service {
    margin-top: 40px;
    display: flex;
    flex-flow: column wrap;
}
.image-service-error {
    display: inline-block;
    max-width: 282px;
    width: 50%;
}
.phone .image-service-error {
    width: 100%;
    margin: 0 auto;
}
.information-service-error-orange {
    color: #FF560A;
    font-family: Barlow;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
}
.information-service-error-gray {
    color: #636365;
    font-family: Barlow;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    text-align: center;
}
.service-error-button .btn-blue,
.service-error-button .btn-blue:hover,
.service-error-button .btn-blue:focus,
.service-error-button .btn-blue:active {
    font-family: Barlow-Medium;
    font-size: 18px;
    font-weight: 500;
    margin: 38px auto 0;
    max-width: 295px;
    line-height: 22px;
    width: 295px;
}
.phone .service-error-button {
    text-align: center;
}
.image-service-error img {
    width: 100%;
}
.content-right-errorService {
    margin-left: 40px;
}
.phone .content-right-errorService {
    margin-left: unset;
}
/*********************************** End Service Error *********************************************/

/*********************************** 25) Out Services *********************************************/

.Page.out-services {
    min-height: unset;
    background: unset;
    padding: 0;
}

.desktop.out-services .header {
    height: auto;
    
}

.desktop.out-services .content {
    padding: initial;
    min-height: initial;
}

.phone.out-services .content {
    padding: 0 20px 20px 20px;
}

/*********************************** 26) All Fixed screens *********************************************/

/*Enter-number-sreen*/
.phone.enter-number .Card_button,
.phone.enter-number .CardHogar_ci,
.phone.enter-number .CardHogar_ci_input,
.phone.enter-number .CardHogar_pass_input,
.enter-number .CardHogar_button {
    width: 100%;
}
.phone.enter-number .CardSimulated_tabs {
    padding: 0;
}
.phone.enter-number .CardHogar_sign_in {
    position: relative;
}
.phone.enter-number .CardHogar_sign_in:after {
    left: 80px;
}
.enter-number .CardHogar_button input:enabled,
.enter-number .CardHogar_button input:enabled:hover,
.enter-number .CardHogar_button input:disabled,
.enter-number .CardHogar_button input:disabled:hover {
    height: 45px !important;
}

@media screen and (device-aspect-ratio: 40/71) {
    .phone.enter-number .CardHogar_pass {
        width: 255px;
    }
    .phone.enter-number .CardHogar_sign_in:after {
        left: 69px;
    }
}

.phone.restore-password .ReSendSMS_title,
.phone.security-data .ReSendSMS_title {
    margin-top: 20px;
    color: #FFFFFF;
    font-family: 'Barlow-medium';
    font-size: 26px;
    line-height: 36px;
    text-align: center;
}

/*successfull-association-screen*/
.successfull-association .header img {
    height: 28px;
    width: 36px;
}
.successfull-association .SuccessfulAssociation_portar_numero {
    height: 40px;
    width: 100%;
    text-align: center;
    margin: auto;
    margin-top: 20px;
}
.successfull-association .Special_text_Succes_screen {
    font-size: 14px;
    font-family: 'Barlow-medium';
    line-height: 20px;
    color: #A1A1A1;
}
body.ModalOpened {
    overflow: unset;
    overflow-y: scroll;
}
body .ModalContainer {
    background-color: #020247;
    max-width: 100%;
    top: 0;
}
body.ModalOpened .ModalContainer {
    display: block;
    overflow: auto;
}
body.ModalOpened .special-modal-small .ModalContainer {
    overflow: hidden;
}
.phone .ModalContainer {
    display: none;
}

/*********************************** End All Fixed screens *********************************************/

/*********************************** 27) Special Modal EnterCode *********************************************/

body.ModalOpened .special-modal-small .ModalBackground,
.special-modal-small .ModalBackground {
    height: 62px;
    top: calc(100% - 62px);
}
body.ModalOpened .special-modal-small .ModalContainer,
.special-modal-small .ModalContainer {
    height: 62px;
    padding: 22px 20px;
    top: calc(100% - 62px);
    
    
}
body.ModalOpened .phone .special-modal-small .ModalBackground,
.special-modal-small .ModalBackground {
    height: 58px;
    top: calc(100% - 58px);
    
    
}
body.ModalOpened .phone .special-modal-small .ModalContainer,
.special-modal-small .ModalContainer {
    height: 58px;
    padding: 16px;
    top: calc(100% - 58px);
    overflow: hidden;
    
    
}
.text-and-img {
    display: flex;
    align-items: center;
}
.text-and-img img {
    margin-right: 20px;
    height: 20px;
    width: 20px;
}
.phone .text-and-img img {
    margin-right: 8px;
    height: 18px;
    width: 18px;
}
.text-and-img {
    font-family: 'Barlow';
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
    color: #FFF;
}
.phone .text-and-img {
    font-family: 'Barlow';
    line-height: 26px;
    color: #FFF;
}
.special-modal-small .ModalMessage {
    margin-bottom: 0;
    display: flex;
    align-items: center;
}

/*********************************** End Special Modal EnterCode *********************************************/

/*********************************** 28) Block similar errors *********************************************/

.main-container-error {}

.phone .main-container-error {}

.mesagge-title-error {
    color: #FFF;
    font-family: 'Barlow';
    font-size: 28px;
    font-weight: 500;
    line-height: 34px;
    text-align: center;
    margin-bottom: 63px;
    
}
.phone .mesagge-title-error {
    margin-bottom: 63px;
}
.icon-smile-error {
    text-align: center;
}
.icon-smile-error img {
    height: 120px;
    width: 90px;
    margin-bottom: 42px;
}
.phone .icon-smile-error img {
    margin-bottom: 42px;
}
.subtitle-mesagge-error {
    color: #FFF;
    font-family: 'Barlow';
    font-size: 18px;
    line-height: 25px;
    text-align: center;
    margin-bottom: 58px;
    
}
.phone .subtitle-mesagge-error {
    margin-bottom: 58px;
}
.no-hogar .subtitle-mesagge-error {
    margin-bottom: 20px;
}
.button-mesagge-error .Button.btn-blue,
.button-mesagge-error .Button.btn-blue:hover,
.button-mesagge-error .Button.btn-blue:focus,
.button-mesagge-error .Button.btn-blue:active  {
    height: 45px;
    color: #FFF;
    font-family: 'Barlow';
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
    width: 335px;
    margin: 0;
}
.phone .button-mesagge-error .Button.btn-blue {
    height: 45px;
    width: 335px;
    text-align: center;
}
.screen-error-message .ModalContainer {
    padding: 32px;
}
.phone .screen-error-message .ModalContainer {
    padding: 20px;
}
.screen-error-message .ModalContainer .Heading1 {
    margin-bottom: 0;
}
.screen-error-message .ModalMessage {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100% - 112px);
}
.container-image-modal {
    position: absolute;
    top: 32px;
    right: 32px;
    
}
.phone .container-image-modal {
    top: 20px;
    right: 20px;
}
.container-image-modal img {
    height: 32px;
    width: 32px;
}
.phone .container-image-modal img {
    height: 24px;
    width: 24px;
}
/*********************************** End Block similar errors *********************************************/
/*line time reco*/
.line-time{
    align-items: center;
    display: flex;
    height: 22.58px;    
    width: 128.58px;   
}

.line-time-four{
    align-items: center;
    display: flex;
    height: 22.58px;    
    width: 181.58px;   
}

.line-time .line{
    margin: auto;
    height: 2px;
    width: 31px;
}

.line-time .ball-line-time{
    align-content: center;
    border-radius: 50%;
    color: #fff;
    display: inline-grid;
    font-weight: 700;
    font-size: 14px;
    height: 22.58px;
    width: 22.28px;
}

.line-time-four .ball-line-time{
    align-content: center;
    border-radius: 50%;
    color: #fff;
    display: inline-grid;
    font-weight: 700;
    font-size: 14px;
    height: 22.58px;
    width: 22.28px;
}

.line-time .line-act,
.line-time .ball-line-time-active{
    background: #5CDEB1;
}

.line-time .line-dis,
.ball-line-time-disable{
    background: #DDDDDD;
}

.ball-line-time img{
    margin-left: 5px;
}
/*Line Time Custom*/
.line-time.two-steps{
    width: 77px;   
}
.line-time.two-steps .line{
    width: 32px;
}
/**/
.card-recovery-pass{
    background: #FFFFFF;
    border: 1px solid #EBEBEB;
    border-radius: 8px;
    margin: auto;
    height: 355px;
    width: 826px;
}

.phone .card-recovery-pass{
    width: auto;
}

.step-recovery-pass p,
.card-recovery-pass p {
    color: #4E5057;
    margin: 0;
    display: contents;
    font-weight: 800;
}

.phone .step-recovery-pass{
    width: 78%;
    margin: 10px auto 17px;
    
}
.card-recovery-pass .container-recovery .first-input input[type="text"]{
    height: 56px !important;
    padding: 14px 20px;
    width: 350px;
}

.phone .card-recovery-pass .container-recovery .first-input input[type="text"]{
    height: 44px;
    width: 89%;
    padding: 14px 20px;
    font-size: 14px;
}

.card-recovery-pass .container-recovery .Button.ButtonDefault, .Button.Is_Default, .desktop .Button.ButtonDefault:hover, .desktop .Button.Is_Default:hover{
    width: 155px;
    height: 50px !important;
}
.phone .card-recovery-pass .container-recovery .Button.ButtonDefault, .Button.Is_Default, .desktop .Button.ButtonDefault:hover, .desktop .Button.Is_Default:hover{
    width: 150px;
}

.card-recovery-pass .time-line{
    margin: 7.5px 0 12px;
}

.phone .card-recovery-pass .time-line{
    margin: 17.5px 0 8.17px;
}

.card-recovery-pass .text-step-1{
    text-align: center;
}

.phone .card-recovery-pass .text-step-1{
    margin: 8px 15px 17px;
    font-size: 13px;
    text-align: center
}

.card-recovery-pass .link-back{
    margin: 10px 0px 0px 20px;
}

.phone .card-recovery-pass .link-back{
    margin: 10px 0px 0px 10px;
}

.card-two-input-recovery{
    width: 510px;
    display: flex;
    margin: 27px auto 20px;
    justify-content: space-between;
}

.phone .card-two-input-recovery{
    width: 100%;
    display: block;
    margin: 17px auto 0px;
}

.card-input-btn-recovery{
    display: flex;
    justify-content: space-between;
    margin: 27px auto 30px;
    width: 425px;
}

.phone .card-input-btn-recovery{
    display: block;
    justify-content:center;
    margin: 27px 0px 0px 0px;
    width: auto;
}

/*error recovery*/
.color-error-recovery{
    color: #F10202
}

.input-recovery-pass{    
    width: 250px;    
    display: flex;    
    align-items: center;    
    justify-content: flex-end;    
}    
.text-error input[type="text"],    
.text-error input[type="password"] {    
    height: 45px !important;    
    border: 1px solid #F10202 !important;    
    border-radius: 8px !important;    
}    
.phone .sub-text-step2,    
.phone .input-recovery-pass{    
    width: 89%;    
    margin: auto;     
}

/*Modal - Login*/

.modal-login{
    height: 100%;
    width: 100%;
    z-index: 9999;
    background: rgb(0,0,0,0.5);
    position: absolute;
    text-align: center;
    top:0;
}

.modal-content{
    background: #fff;
    padding-bottom: 40px;
    border-radius: 50px;
    max-width: 440px;
    min-width: 335px;
    width: 440px;
    height: 335px;
    margin: auto;
    position:absolute;
    top:50%;
    left:50%;
    margin-left: -220px;
    margin-top: -150px; 
}

.mcontent-phone {
    background: #fff;
    padding-bottom: 40px;
    border-radius: 50px;
    width: 340px;
    height: 340px;
    margin: auto;
    position:absolute;
    top:50%;
    left:50%;
    margin-left: -170px;
    margin-top: -250px; 
}

.title-modal-login{
    font-family: Barlow;
    font-size: 20px;
    color: #221e78;
    font-weight: bold;
    line-height: 24px;
}

.message-modal-login{
    font-family: Barlow;
    font-size: 14px;
    line-height: 20px;
    font-style: normal;
    font-weight: 400;
    color: #383C47;
    letter-spacing: 0.0015em;
}

.Button-modal {
    font-family: Barlow;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: bold;
    line-height: 20px;
    background: #FF560A;
    border-radius: 50px;
    border: none;
    letter-spacing: 0.05em;
    margin: 0;
    height: 40px;
    width: 140px;
    cursor: pointer;
}

/* Btn - Login*/
.full-width-100 .Button{
    width: 100% !important;
}

/* Login Alert */
.login-info-message {
    background-color: var(--color-light-blue-cm);
    color: #FFF;
    display: flex;
    top: 0;
    font-size: 16px;
    padding: 18px 0;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin-top: -32px;
    margin-bottom: 32px;
}
.login-info-message img{
    width: 24px;
    margin-right: 6px;
}
.phone .login-info-message {
    padding: 5px 48px 9px;
    font-size: 12px;
    margin-bottom: -4px;
    margin-top: 0px;
    text-align: center;
}
.phone .login-info-message .text{
    text-align: center; 
}
.phone .login-info-message img{
    display: none;
}
.phone .WelcomeHeader_main{
    height: 107px !important;
}

/* Maintenance screen */
.maintenance{
    flex-direction: column;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.maintenance img{
    width: 500px;
    margin: 0 auto;    
}
.phone .maintenance img{
    width: 290px;
}
.phone .maintenance .text{
    font-size: 14px;
    margin-top: 20px;
}
.no-background-img{
    background-image: none !important;
}
.no-background-img .footer{
    position: absolute;
}

/* Form Custom 02-12-2021 */
.form-content{
    position: relative;
    padding: 36px 238px 75px;
    max-width: 826px;
    background: #FFFFFF;
    border: 1px solid #EBEBEB;
    flex-direction: column;
}

.phone .form-content{
    max-width: 328px;
    padding: 45px 18px 35px;
}
.form-content .back-button{
    position: absolute;
    top: 20px;
    left: 20px;
}
.phone .form-content .back-button{
    top: 10px;
    left: 12px;
}
.form-content .back-button:empty{
    display: none;
}
.phone .form-content .title{
    font-size: 24px;
}

.phone .form-content .subtitle{
    font-size: 14px;
}

.phone .form-content input[type="text"]{
    font-size: 14px;   
}

.form-content .Button{
    margin-left: 0; 
}

/* Tooltip **************************/
.tooltipstered {
    cursor: default;
}
.tooltip_style {
    background-color: #DDDDDD;
    border-radius: 8px;
    color: #4E5057;
}
.tooltip_style .tooltipster-content {
    font-size: 12px;
    padding: 8px;
}
/*LoginTabs*/
.login-redesign .CardSimulated_tab_one.active .Tabs_text,
.login-redesign .CardSimulated_tab_two.active .Tabs_text{
    color: #221E78;
}
.login-redesign .CardSimulated_tab_one .Tabs_text,
.login-redesign .CardSimulated_tab_two .Tabs_text{
    color: #9E9FA1;
}
.login-redesign .CardSimulated_tab_one .Tabs_icon img,
.login-redesign .CardSimulated_tab_two .Tabs_icon img{
    filter: grayscale(100%);
}
.login-redesign .CardSimulated_tab_one.active .Tabs_icon img,
.login-redesign .CardSimulated_tab_two.active .Tabs_icon img{
    filter: none !important;
}
.login-redesign .Tabs_text{
    font-size: 10px;
    width: auto;
}
.login-redesign .CardSimulated_tabs{
    justify-content: space-evenly;
}
.login-redesign .container-error-code{
    font-size: 10px;
}
/*Login*/
.login-redesign-second .Card_title{
    line-height: 12px;
    height: auto;
}
.login-redesign-second .Card_input{
    margin-top: 5px;
    height: auto;
}
.login-redesign-second .Card_button{
    height: auto;
    margin-top: 25px;   
}
.login-redesign-second .registration{
    padding-top: 0 !important;
    margin-top: 8px;
}
.login-redesign-second.forgot-pass .registration{
    padding-top: 35px !important;
}   
.login-redesign-second .select-crossv2 .accordion-item-header {
    border: 1px solid #9E9FA1;
    height: 35px !important;
    padding: 0 10px 0 14px;
    font-size: 14px;
}

.login-redesign-second .Button, 
.login-redesign-second a.Button,
.login-redesign-second input[type="text"],
.login-redesign-second input[type="password"]{
    height: 35px !important;
    font-size: 14px;
    width: 100%;
}
.login-redesign-second input[type="password"]{
    
}
/*checkbox*/
.login-redesign input[type="checkbox"]:before{
    height: 14px !important;
    width: 14px !important;
    border: 2px solid #9E9FA1;
    border-radius: 5px;
    box-shadow: none;
}
.login-redesign input[type="checkbox"]:checked:before{
    background: #FF560A;
    height: 18px !important;
    width: 18px !important;
    border: transparent;
}
.login-redesign input[type="checkbox"]:checked:after {
    border-color: #FFFF;
    top: 4px;
    left: 4px;
    width: 8px;
    height: 4px;
    border-width: 2px;
}
html .login-redesign input[type="radio"], 
html .login-redesign input[type="checkbox"]{
    width: 18px;
    height: 18px;
    margin: 0;
}
.login-redesign .CardSimulated_main{
    padding: 35px 30px 15px;
    width: 320px;   
}
.login-redesign.forgot-pass .CardSimulated_main{
    padding: 15px 30px 28px;
    min-height: auto;
}
.login-redesign .Card_title:empty,
.login-redesign .Card_button:empty,
.login-redesign .registration:empty{
    display: none !important;   
}

.login-redesign .CardSimulated_tab_one,
.login-redesign .CardSimulated_tab_two{
    width: auto;   
}

/* Start Select Cross V2 */
.select-crossv2 .accordion-item {
    border: none;
}

.select-crossv2 .accordion-item-header {
    border: 1px solid #9E9FA1;
    border-radius: 8px;
    padding: 16px 16px;
}

.border-error-input .select-crossv2 .accordion-item-header,
.border-error-input .CustomerCard .accordion-item{
    border: 1px solid #dc2020 !important;
}

.select-crossv2 .accordion-item-content {
    border: 1px solid #9E9FA1;
    border-radius: 8px;
    margin-top: 10px;
    padding: 0 !important;
    max-height: 200px;
    position: relative;
}

.select-crossv2 .accordion-item-icon {
    height: 21px;
    width: 23px;
    background-image: url('/PE_Web_B2B_RES/img/select_icon.svg');
    background-position:center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.select-crossv2 .accordion-item-icon span {
    display: none;
}

.select-cross-item {
    padding: 14px 18px;
    color: #4E5057;
    cursor: pointer;
}

.select-cross-item:hover {
    background: rgb(0 185 235 / 15%);
    font-weight: bold;
}

.select-crossv2 .accordion-item.is--open .accordion-item-header {
    border: 2px solid #00B9EB;
}

.select-crossv2 .accordion-item .accordion-item-content.is--expanded {
    overflow: auto;
    background-color: white;
}

.select-crossv2 .accordion-item .accordion-item-content::-webkit-scrollbar {
    width: 4px;
}

.select-crossv2 .accordion-item .accordion-item-content::-webkit-scrollbar-track {
    background: transparent
}

.select-crossv2 .accordion-item .accordion-item-content::-webkit-scrollbar-track-piece{
    margin-right: 5px;
}

.select-crossv2 .accordion-item .accordion-item-content::-webkit-scrollbar-button:increment{
     margin-right: 5px;
}

.select-crossv2 .accordion-item .accordion-item-content::-webkit-scrollbar-thumb {
    background-color: #9E9FA1; 
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px; 
}

.phone .my-cell-phones{
    padding: 18px 8px 16px 23px;
}