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

/*
  Date: 2024-09-17 11:23:35
*/
/*! =========================================================================== */
/*!                                                                             */
/*  Abbreviation:        SingleSignOn                                           */
/*  Application:         Single Sign On Theme                                   */
/*  Module:              SingleSignOn_Th                                        */
/*!                                                                             */
/*! =========================================================================== */
/* ===================================================================== */
/* ===================================================================== */
/*  OutSystems UI Web - Single Sign On                                   */
/*  Visit www.outsystems.com/outsystems-ui for more information          */
/*  $0 - Root - CSS Variables                                            */
/*  $1 - Resets (https://necolas.github.io/normalize.css/)               */
/*  $2 - HTML Elements                                                   */
/*       $2.1 - HTML Elements - Links                                    */
/*       $2.2 - HTML Elements - Images                                   */
/*       $2.3 - HTML Elements - Headings                                 */
/*       $2.4 - HTML Elements - Inputs and Selectors                     */
/*       $2.5 - HTML Elements - Buttons                                  */
/*  $3 - Page Layout                                                     */
/*       $3.1 - Page Layout - Header                                     */
/*              $3.1.1 - Page Layout - Header Top                        */
/*              $3.1.2 - Page Layout - Header Content                    */
/*       $3.2 - Page Layout - Menu                                       */
/*       $3.3 - Page Layout - Content                                    */
/*  $4 - Patterns                                                        */
/*       $4.1 - Patterns - Content                                       */
/*              $4.1.1   - Patterns - Content - Accordion                */
/*              $4.1.2   - Patterns - Content - Alert                    */
/*              $4.1.3   - Patterns - Content - Balloon                  */
/*              $4.1.4   - Patterns - Content - BlankSlate               */
/*              $4.1.5   - Patterns - Content - Bullets                  */
/*              $4.1.6   - Patterns - Content - Card                     */
/*              $4.1.7   - Patterns - Content - CardBackground           */
/*              $4.1.8   - Patterns - Content - CardSectioned            */
/*              $4.1.9   - Patterns - Content - Carousel                 */
/*              $4.1.10  - Patterns - Content - ChatMessage              */
/*              $4.1.11  - Patterns - Content - LightBoxImage            */
/*              $4.1.12  - Patterns - Content - Modal                    */
/*              $4.1.13  - Patterns - Content - Panel                    */
/*              $4.1.14  - Patterns - Content - Section                  */
/*              $4.1.15  - Patterns - Content - Tag                      */
/*              $4.1.16  - Patterns - Content - Tooltip                  */
/*       $4.2 - Patterns - Controls                                      */
/*              $4.2.1   - Patterns - Controls - AnimatedLabel           */
/*              $4.2.2   - Patterns - Controls - ButtonGroup             */
/*              $4.2.3   - Patterns - Controls - DatePicker              */
/*              $4.2.4   - Patterns - Controls - Dropdown                */
/*              $4.2.5   - Patterns - Controls - DropdownSelect          */
/*              $4.2.6   - Patterns - Controls - FileUpload              */
/*              $4.2.7   - Patterns - Controls - FloatingActions         */
/*              $4.2.8   - Patterns - Controls - InputWithIcon           */
/*              $4.2.9   - Patterns - Controls - RangeSlider             */
/*              $4.2.10  - Patterns - Controls - Search                  */
/*              $4.2.11  - Patterns - Controls - SearchBalloon           */
/*              $4.2.12  - Patterns - Controls - TimePicker              */
/*              $4.2.13  - Patterns - Controls - ToggleButton            */
/*              $4.2.14  - Patterns - Controls - Video                   */
/*       $4.3 - Patterns - Layouts                                       */
/*              $4.3.1   - Patterns - Layouts - Logins                   */
/*       $4.4 - Patterns - Navigation                                    */
/*              $4.4.1   - Patterns - Navigation - Breadcrumbs           */
/*              $4.4.2   - Patterns - Navigation - NavigationBar         */
/*              $4.4.3   - Patterns - Navigation - SectionIndex          */
/*              $4.4.4   - Patterns - Navigation - Sidebar               */
/*              $4.4.5   - Patterns - Navigation - Tabs                  */
/*              $4.4.6   - Patterns - Navigation - Timeline              */
/*              $4.4.7   - Patterns - Navigation - Wizard                */
/*       $4.5 - Patterns - Numbers                                       */
/*              $4.5.1   - Patterns - Numbers - Badge                    */
/*              $4.5.2   - Patterns - Numbers - Counter                  */
/*              $4.5.3   - Patterns - Numbers - IconBadge                */
/*              $4.5.4   - Patterns - Numbers - ProgressBar              */
/*              $4.5.5   - Patterns - Numbers - ProgressCircle           */
/*              $4.5.6   - Patterns - Numbers - UserAvatar               */
/*       $4.6 - Patterns - Responsive                                    */
/*              $4.6.1   - Patterns - Responsive - DisplayOnDevice       */
/*              $4.6.2   - Patterns - Responsive - LoadOnVisible         */
/*              $4.6.3   - Patterns - Responsive - MoveOnDevice          */
/*              $4.6.4   - Patterns - Responsive - ResponsiveTables      */
/*       $4.7 - Patterns - Structure                                     */
/*              $4.7.1   - Patterns - Structure - AlignCenter            */
/*              $4.7.2   - Patterns - Structure - Columns                */
/*              $4.7.3   - Patterns - Structure - Gallery                */
/*       $4.8 - Patterns - Utilities                                     */
/*              $4.8.1   - Patterns - Utilities - Animate                */
/*              $4.8.2   - Patterns - Utilities - ButtonLoading          */
/*              $4.8.3   - Patterns - Utilities - CharacterCount         */
/*              $4.8.4   - Patterns - Utilities - FlipContent            */
/*              $4.8.5   - Patterns - Utilities - Fieldset               */
/*              $4.8.6   - Patterns - Utilities - FlipContent            */
/*              $4.8.7   - Patterns - Utilities - Iframe                 */
/*              $4.8.8   - Patterns - Utilities - Separator              */
/*              $4.8.9   - Patterns - Utilities - StackedIcon            */
/*       $4.9 - Patterns - Custom                                        */
/*  $5 - Widgets & RichWidgets                                           */
/*       $5.1 - Widgets - Form / EditRecord                              */
/*       $5.2 - Widgets - TableRecords / EditableTable                   */
/*       $5.3 - RichWidgets - CounterMessage                             */
/*       $5.4 - RichWidgets - FeedbackAjaxWait                           */
/*       $5.5 - RichWidgets - FeedbackMessage                            */
/*       $5.6 - RichWidgets - Pagination                                 */
/*       $5.7 - RichWidgets - PopupEditor                                */
/*       $5.8 - RichWidgets - FiltersWrapper                             */
/*       $5.9 - RichWidgets - Calendar                                   */
/*  $6 - Styles                                                          */
/*       $6.1 - Styles - Typography                                      */
/*              $6.1.1 - Styles - Typography - Sizes Desktop             */
/*              $6.1.2 - Styles - Typography - Sizes Tablet              */
/*              $6.1.3 - Styles - Typography - Sizes Phone               */
/*              $6.1.4 - Styles - Typography - Transform                 */
/*              $6.1.5 - Styles - Typography - Weight                    */
/*       $6.2 - Styles - Colors                                          */
/*              $6.2.1 - Styles - Colors - Brand                         */
/*              $6.2.2 - Styles - Colors - Extendend                     */
/*              $6.2.3 - Styles - Colors - Neutral                       */
/*              $6.2.4 - Styles - Colors - Semantic                      */
/*       $6.3 - Styles - Space                                           */
/*              $6.3.1  - Styles - Space - Padding                       */
/*              $6.3.2  - Styles - Space - Padding Top                   */
/*              $6.3.3  - Styles - Space - Padding Right                 */
/*              $6.3.4  - Styles - Space - Padding Bottom                */
/*              $6.3.5  - Styles - Space - Padding Left                  */
/*              $6.3.6  - Styles - Space - Padding Vertical              */
/*              $6.3.7  - Styles - Space - Padding Horizontal            */
/*              $6.3.8  - Styles - Space - Margin                        */
/*              $6.3.9  - Styles - Space - Margin Top                    */
/*              $6.3.10 - Styles - Space - Margin Right                  */
/*              $6.3.11 - Styles - Space - Margin Bottom                 */
/*              $6.3.12 - Styles - Space - Margin Left                   */
/*              $6.3.13 - Styles - Space - Margin Vertical               */
/*              $6.3.14 - Styles - Space - Margin Horizontal             */
/*       $6.4 - Styles - Border Radius                                   */
/*       $6.5 - Styles - Border Size                                     */
/*       $6.6 - Styles - Elevation/Shadows                               */
/*       $6.7 - Styles - Display Flex Properties                         */
/*       $6.8 - Styles - Others                                          */
/*  $7 - Right-to-Left Mode                                              */
/*       $7.1 - RTL Mode - Page Layout / HTML Elements                   */
/*       $7.2 - RTL Mode - Patterns - Content                            */
/*              $7.2.1 - RTL Mode - Patterns - Content - Alert           */
/*              $7.2.2 - RTL Mode - Patterns - Content - CardSectioned   */
/*              $7.2.3 - RTL Mode - Patterns - Content - ChatMessage     */
/*       $7.3 - RTL Mode - Patterns - Controls                           */
/*              $7.3.1 - RTL Mode - Patterns - Controls - AnimatedLabel  */
/*              $7.3.2 - RTL Mode - Patterns - Controls - ButtonGroup    */
/*              $7.3.3 - RTL Mode - Patterns - Controls - DatePicker     */
/*              $7.3.4 - RTL Mode - Patterns - Controls - FileUpload     */
/*              $7.3.5 - RTL Mode - Patterns - Controls - FloatingActions*/
/*              $7.3.6 - RTL Mode - Patterns - Controls - InputWithIcons */
/*              $7.3.7 - RTL Mode - Patterns - Controls - RangeSlider    */
/*              $7.3.8 - RTL Mode - Patterns - Controls - ToogleButton   */
/*       $7.4 - RTL Mode - Patterns - Navigation                         */
/*              $7.4.1 - RTL Mode - Patterns - Navigation - SectionIndex */
/*              $7.4.2 - RTL Mode - Patterns - Navigation - Sidebar      */
/*              $7.4.3 - RTL Mode - Patterns - Navigation - Tabs         */
/*              $7.4.4 - RTL Mode - Patterns - Navigation - Timeline     */
/*              $7.4.5 - RTL Mode - Patterns - Navigation - Wizard       */
/*       $7.5 - RTL Mode - Patterns - Numbers                            */
/*              $7.5.1 - RTL Mode - Patterns - Numbers - ProgressBar     */
/*       $7.6 - RTL Mode - Patterns - Responsive                         */
/*              $7.6.1 - RTL Mode - Patterns - Responsive - TableRecords */
/*       $7.7 - RTL Mode - Widgets & RichWidgets                         */
/*              $7.7.1 - RTL Mode - Widgets - TableRecords               */
/*              $7.7.2 - RTL Mode - RichWidgets - FeedbackAjaxWait       */
/*              $7.7.3 - RTL Mode - RichWidgets - FeedbackMessage        */
/*              $7.7.4 - RTL Mode - RichWidgets - Pagination             */
/*       $7.8 - RTL Mode - Styles                                        */
/*              $7.8.1 - RTL Mode - Styles - Space - Padding Right       */
/*              $7.8.2 - RTL Mode - Styles - Space - Padding Left        */
/*              $7.8.3 - RTL Mode - Styles - Space - Margin Right        */
/*              $7.8.4 - RTL Mode - Styles - Space - Margin Left         */
/*              $7.8.5 - RTL Mode - Styles - Others                      */
/* ===================================================================== */
/* ===================================================================== */
/* ===================================================================== */
/*  $0 - Root - CSS Variables                                            */
/* ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;900&display=swap");
:root {
  /* Color - Brand */
  --color-primary: #EE2429;
  --color-secondary: #303D60;
  --color-primary-hover: #B21B1F;
  --color-error: #EE2429;
  --color-success: #48E871;
  /* Color - Neutral */
  --color-neutral-9: #131517;
  --color-neutral-10: #131517;
  --color-neutral-11: #ABADAF;
  --color-neutral-12: #D4D6D8;
  --color-neutral-13: #E8EAEC;
  --color-neutral-14: #656769;
  /* Inputs */
  --input-height: 48px;
  /* App Settings */
  --header-size: 24px;
  --side-menu-size: 300px;
}

/* ================================================================ */
/*  $1 - Resets                                                     */
/* ================================================================ */
/* Lato Import */
html {
  font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

html > body {
  min-width: 100%;
}

body {
  font-size: var(--font-size-s);
}

/*body.desktop form,
body.tablet.landscape form {
  display: flex;
  align-items: center;
  justify-content: center;
}*/
body.fill form,
body.tablet.landscape.fill form {
  display: block;
}

body.phone {
  background-color: #FFF;
}

/*Resposive design*/
/*Phone*/
body.background.phone {
  -webkit-background-size: 100vw 25vh;
          background-size: 100vw 25vh;
}

/* ================================================================ */
/*  $2 - HTML Elements                                              */
/* ================================================================ */
/* $2.1 - HTML Elements - Links */
a,
a:visited {
  text-decoration: underline;
}

/* $2.4 - HTML Elements - Inputs and Selectors */
.input,
textarea.input,
.select {
  border-color: var(--color-neutral-11);
  height: var(--input-height);
}

/* Input disabled */
[disabled="disabled"],
[readonly="readonly"],
textarea[readonly="readonly"] {
  background-color: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-12);
  color: var(--color-neutral-11);
  pointer-events: none;
}

/* Input inside Form */
.Form input.ReadOnly:not(.Not_Valid),
.Form textarea.ReadOnly:not(.Not_Valid),
.Form select.ReadOnly:not(.Not_Valid) {
  background-color: var(--color-neutral-0);
  border-color: var(--color-neutral-11);
}

.Form input[readonly="readonly"]:not(.Not_Valid),
.Form textarea[readonly="readonly"]:not(.Not_Valid),
.Form select[readonly="readonly"]:not(.Not_Valid) {
  background-color: #FAFAFA;
  border-color: var(--color-neutral-12);
}

/* Input with placeholder visible */
.input:placeholder-shown,
textarea.input:placeholder-shown,
.select:placeholder-shown,
.Form input:placeholder-shown:not(.Not_Valid),
.Form textarea.input:placeholder-shown:not(.Not_Valid),
.Form select:placeholder-shown:not(.Not_Valid) {
  border-color: var(--color-neutral-12);
}

/* Input with focus */
.input:focus,
.textarea:focus,
.select:focus {
  border-color: var(--color-neutral-9);
}

/* Input not valid */
.input.Not_Valid,
.textarea.Not_Valid,
.select.Not_Valid {
  color: var(--color-error);
  border: var(--border-size-s) solid var(--color-error);
}

/* Validation Message */
input + .ValidationMessage {
  margin-left: var(--space-s);
  margin-right: var(--space-s);
}

/* Date Input in Mobile */
.phone input[type="date"] {
  line-height: 44px;
}

/* $2.5 - HTML Elements - Buttons */
.Button,
.btn {
  text-transform: uppercase;
  text-decoration: none;
  height: var(--input-height);
  color: #656769;
  border-color: #3C3E40;
  letter-spacing: 1px;
}

.Is_Default:hover {
  color: var(--color-neutral-0);
}

.Button[disabled="disabled"],
.btn[disabled="disabled"] {
  background-color: transparent;
  border-color: var(--color-neutral-12);
  color: var(--color-neutral-12);
}

.Is_Default {
  color: var(--color-neutral-0);
}

.Button.Is_Default[disabled="disabled"],
.btn.Is_Default[disabled="disabled"] {
  background-color: #808080;
  border-color: #808080;
  color: #FFF;
}

/* Is loading button */
.is--loading .btn {
  position: relative;
}

/* ================================================================ */
/*  $3 - Page Layout                                                */
/* ================================================================ */
/* LayoutPopup */
.MainPopup {
  display: block;
  padding: 32px 40px;
  background-color: #FFF;
  text-align: center;
}

.desktop .MainPopup,
.desktop.small .MainPopup,
.tablet.landscape .MainPopup {
  max-width: 50vw;
  max-height: 80vh;
  overflow: auto;
}

.MainPopup img.logo {
  display: block;
  margin: auto;
}

.MainPopup .Button,
.MainPopup .btn {
  width: 100%;
}

/* LayoutCardColumns2 */
.layout-card-columns2 {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-align-items: center;
          align-items: center;
}

/* LayoutCardColumns2 > Main */
.layout-card-columns2 .main {
  background: url("/SingleSignOn_Res/img/background_sso.jpg?20859") no-repeat;
  -webkit-background-size: cover;
          background-size: cover;
  background-attachment: fixed;
  padding: 80px;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-align-items: center;
          align-items: center;
  text-align: left;
}

/* LayoutCardColumns2 > Content */
.layout-card-columns2 .content {
  max-width: 1120px;
  -webkit-flex: 0 1 auto;
          flex: 0 1 auto;
  -webkit-flex-direction: row;
          flex-direction: row;
  background-color: #FFF;
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.23), 0 4px 8px 0 rgba(0, 0, 0, 0.16);
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.23), 0 4px 8px 0 rgba(0, 0, 0, 0.16);
}

.ie11 .layout-card-columns2 .content {
  height: 100%;
}

.layout-card-columns2 .content__left {
  width: auto;
  -webkit-flex: 1 1 560px;
          flex: 1 1 560px;
  padding: 40px 80px;
  background-color: #E8EAEC;
  background: -webkit-radial-gradient(circle, #FFF 0%, #E8EAEC 100%);
  background: radial-gradient(circle, #FFF 0%, #E8EAEC 100%);
}

.layout-card-columns2 .content__right {
  width: auto;
  -webkit-flex: 1 1 560px;
          flex: 1 1 560px;
  padding: 40px 80px;
}

/* LayoutCardColumns2 > Responsive */
/*Phone*/
.phone .layout-card-columns2 .main {
  padding: 20px;
}

.phone .layout-card-columns2 .content {
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.phone .content__left {
  padding: 24px 21px;
  -webkit-flex: 1 1 auto;
          flex: 1 1 auto;
  padding-bottom: 0;
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.23), 0 4px 8px 0 rgba(0, 0, 0, 0.16);
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.23), 0 4px 8px 0 rgba(0, 0, 0, 0.16);
}

.phone .content__right {
  padding: 24px 0;
}

/*Tablet*/
.tablet .layout-card-columns2 {
  display: block;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.tablet .layout-card-columns2 .layout__wrapper,
.tablet .layout-card-columns2 .main {
  display: -webkit-flex;
  display: flex;
  min-height: 100%;
}

.tablet .layout-card-columns2 .main {
  padding: 0;
}

.tablet .layout-card-columns2 .content {
  width: 100%;
  height: 100%;
  overflow: auto;
}

.tablet .layout-card-columns2 .content__left,
.tablet .layout-card-columns2 .content__right {
  padding-left: 60px;
  padding-right: 60px;
}

.tablet .layout-card-columns2 .header-card__image {
  margin-right: -60px;
}

.tablet.portrait .layout-card-columns2 .content__left,
.tablet.portrait .layout-card-columns2 .content__right {
  padding: 40px;
}

.tablet.portrait .layout-card-columns2 .header-card__image {
  display: none;
}

@media (max-width: 768px) {
  .tablet.portrait .layout-card-columns2 .content {
    -webkit-flex-direction: column;
            flex-direction: column;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
}

/* LayoutCardColumns2 > IE Fix */
.ie10.ponyfill-ready .layout-card-columns2,
.ie11.ponyfill-ready .layout-card-columns2 {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: center;
          justify-content: center;
  height: 100vh;
}

/* LayoutCardHeader */
/* LayoutCardHeader > Main */
.layout-card-header .main {
  background: url("/SingleSignOn_Res/img/background_sso.jpg?20859") no-repeat;
  -webkit-background-size: cover;
          background-size: cover;
  background-attachment: fixed;
  height: 100%;
  overflow: auto;
  padding: 80px;
  text-align: left;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
}

/* LayoutCardHeader > Content */
.layout-card-header .content {
  -webkit-flex: 1 1 auto;
          flex: 1 1 auto;
  margin: auto;
  max-width: 1120px;
  background-color: #FFF;
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.23), 0 4px 8px 0 rgba(0, 0, 0, 0.16);
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.23), 0 4px 8px 0 rgba(0, 0, 0, 0.16);
}

.layout-card-header .content__header {
  padding: 40px 80px;
  background-color: #E8EAEC;
  background: -webkit-radial-gradient(circle, #FFF 0%, #E8EAEC 100%);
  background: radial-gradient(circle, #FFF 0%, #E8EAEC 100%);
}

.layout-card-header .content__body {
  padding: 40px 80px;
}

/* LayoutCardHeader > Logo */
.layout-card-header .content__logo:not(:empty) {
  margin-bottom: var(--space-m);
}

/* LayoutCardHeader > Title */
.layout-card-header .content__title {
  font-size: var(--font-size-h6);
  font-weight: bold;
  margin-bottom: var(--space-m);
}

/* LayoutCardHeader > Responsive */
.tablet.landscape .layout-card-header .main {
  padding: 40px;
}

.tablet.portrait .layout-card-header .main {
  padding: 40px;
}

.tablet.portrait .layout-card-header .content__header,
.tablet.portrait .layout-card-header .content__body {
  padding-left: 40px;
  padding-right: 40px;
}

.phone .layout-card-header .main {
  padding: 0;
}

.phone .layout-card-header .content__header,
.phone .layout-card-header .content__body {
  padding-left: 20px;
  padding-right: 20px;
}

.phone .layout.layout-card-header .content__header {
  background: none;
  background-color: #FFF;
}

/* LayoutUnavailableApp */
.layout-unavailable-app {
  background-image: url(/SingleSignOn_Th/img/trusty_computadorTiny.png?23653);
  background-repeat: no-repeat;
  -webkit-background-size: cover;
          background-size: cover;
  height: 100vh;
  font-family: 'Lato', sans-serif;
}

.content-wrapper {
  position: relative;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
}

/* Description section */
.description-content {
  position: absolute;
  padding-left: 50px;
}

.description-content__text {
  font-size: 46px;
  color: #FFF;
  line-height: 1.2;
  max-width: 520px;
}

.description-content__note {
  font-weight: 300;
  font-size: 32px;
  color: #FFF;
  margin-top: 58px;
}

/*contact section */
.contact-wrapper {
  position: absolute;
  bottom: 30px;
  right: 30px;
}

.floating-action {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
          flex-direction: row;
  -webkit-align-items: center;
          align-items: center;
}

.floating-action__number {
  color: #FFF;
  margin-right: 16px;
  font-size: 30px;
  font-weight: bold;
}

/* Logo Images */
.dog-logo {
  height: 100vh;
}

.fid-logo {
  margin-bottom: 40px;
  width: 210px;
  display: none;
}

.fid-logo-small {
  position: absolute;
  top: 20px;
  right: 20px;
  display: none;
}

/* desktop behaviour */
@media screen and (min-width: 768px) {
  .layout-unavailable-app {
    background-position: 50%;
  }
  .fid-logo {
    display: block;
  }
}

/* tablet behaviour */
@media only screen and (max-height: 900px) {
  .description-content__text {
    font-size: 26px;
    max-width: 300px;
  }
}

@media only screen and (max-width: 767px) and (max-device-width: 767px) {
  .layout-unavailable-app {
    background-position: 75%;
  }
  /* Description section */
  .description-content {
    padding-left: 30px;
  }
  .description-content__text {
    font-size: 26px;
    max-width: 300px;
  }
  .description-content__note {
    font-size: 18px;
  }
  /* Contact section */
  .contact-wrapper {
    right: unset;
    left: 30px;
  }
  .floating-action {
    -webkit-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
  .floating-action img {
    width: 50px;
  }
  .floating-action__number {
    margin-right: 0;
    margin-left: 16px;
    font-size: 22px;
  }
  /* Logo Images */
  .dog-logo {
    height: auto;
    width: 100vw;
  }
  .fid-logo-small {
    display: block;
  }
}

/* Phone Behaviour */
@media only screen and (max-width: 500px) and (max-device-width: 500px) {
  /* Logo Images */
  .dog-logo {
    height: auto;
    width: 100vw;
  }
  .fid-logo-small {
    display: block;
    width: 140px;
  }
  .description-content__text {
    font-size: 20px;
    max-width: 220px;
  }
  .description-content__note {
    font-size: 16px;
    margin-top: 30px;
  }
}

/* Utility Classes */
.text-bold {
  font-weight: bold;
}

.text-light {
  font-weight: 300;
}

/* OTPLayout */
.layout.otp-layout__wrapper {
  position: relative;
  width: 100vw;
}

.layout.otp-layout__wrapper .main {
  padding-top: 0;
}

.otp-layout__header {
  background-color: #2C363E;
  color: white;
  padding: 30px;
}

.otp-layout__header-top {
  display: -webkit-flex;
  display: flex;
  margin-bottom: 30px;
}

.otp-layout__header-title {
  color: #EE2429;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  width: 70%;
  font-size: 15px;
}

.otp-layout__header-action-left,
.otp-layout__header-action-right {
  width: 15%;
}

.otp-layout__header-description {
  font-size: 12px;
}

.otp-layout__bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  margin-bottom: 56px;
}

.otp-layout__bottom a {
  color: #2C363E;
  text-decoration: underline;
}

/* OTPCodeRequest_Layout*/
.layout.code-request__wrapper {
  display: -webkit-flex;
  display: flex;
  text-align: center;
  position: relative;
  width: 100vw;
  height: 100vh;
  padding: 44px;
  background-color: #2C363E;
}

.layout.code-request__wrapper .main {
  padding-top: 0;
}

.code-request__content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -100%);
          transform: translate(-50%, -100%);
}

.code-request__icon {
  margin-bottom: var(--space-xl);
  color: #EE2429;
}

.code-request__text {
  color: var(--color-neutral-0);
  width: calc(100vw - 88px);
}

.code-request__bottom {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  position: absolute;
  width: 100%;
  bottom: 0;
  padding-bottom: var(--space-l);
}

.code-request__bottom .btn {
  width: 100%;
  margin: 0 0 15px 0;
  text-transform: uppercase;
  font-weight: normal;
  background-color: transparent;
  border: var(--border-size-s) solid var(--color-neutral-0);
  color: var(--color-neutral-0);
}

.code-request__bottom .btn.btn-primary {
  background-color: #EE2429;
  border: var(--border-size-s) solid #EE2429;
}

.phone .code-request__bottom .btn {
  margin-bottom: 0;
}

/* LayoutColsCard */
/* Layout with a card in center split into 2 columns */
.layout.layout-cols-card {
  background: url("/SingleSignOn_Res/img/background_sso.jpg?20859") no-repeat;
  -webkit-background-size: cover;
          background-size: cover;
  background-attachment: fixed;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
          flex-direction: row;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
  margin: 0 auto;
}

.layout.layout-cols-card .main {
  margin: 0 auto;
  padding-top: 0;
}

.layout.layout-cols-card .content {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
          flex-direction: row;
  width: 1120px;
  max-height: 620px;
  min-height: 620px;
}

.layout.layout-cols-card .content > div {
  -webkit-flex: 1;
          flex: 1;
  padding: 56px;
}

.layout.layout-cols-card .content__left {
  background-position: center;
  -webkit-background-size: cover;
          background-size: cover;
  background-repeat: no-repeat;
}

.layout.layout-cols-card .content__right {
  background-color: #FFF;
}

.layout.layout-cols-card.authentication .content__left {
  background-image: url("/SingleSignOn_Th/img/LEFT_bg.png?23653");
}

.layout.layout-cols-card.authentication-empresas .content__left {
  background-image: url("/SingleSignOn_Th/img/ImagemAuthEmpreses.jpg?23653");
}

.layout.layout-cols-card .left-content {
  height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
}

.layout.layout-cols-card .left-content__top {
  -webkit-flex: 1;
          flex: 1;
  font-size: 20px;
  color: #FFF;
  font-weight: 300;
}

.layout.layout-cols-card .left-content__logo {
  text-align: center;
  margin-bottom: 16px;
}

.layout.layout-cols-card .left-content__logo img {
  max-height: 22px;
}

.layout.layout-cols-card .left-content__apps-logos {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
          flex-direction: row;
  -webkit-justify-content: space-between;
          justify-content: space-between;
}

.layout.layout-cols-card .left-content__apps-logos img {
  width: 48px;
  -webkit-border-radius: 9px;
          border-radius: 9px;
  -webkit-box-shadow: 2px 2px 8px -2px #4F2D2D;
          box-shadow: 2px 2px 8px -2px #4F2D2D;
}

.layout.layout-cols-card .content__right {
  overflow-y: auto;
}

@media only screen and (max-width: 1119px) {
  .layout.layout-cols-card .content {
    -webkit-flex-direction: column;
            flex-direction: column;
    width: 90%;
    margin: 0 auto;
    max-height: unset;
  }
  .layout.layout-cols-card .content > div {
    -webkit-flex: auto;
            flex: auto;
  }
  .layout.layout-cols-card .content__left {
    height: 600px;
  }
  .layout.layout-cols-card .content__right {
    overflow-y: unset;
  }
}

@media only screen and (max-width: 768px) {
  .layout.layout-cols-card .content {
    width: 100%;
  }
  .layout.layout-cols-card .content > div {
    padding: 26px;
  }
  .layout.layout-cols-card .content .content__left {
    padding: 24px;
    height: 320px;
  }
  .layout.layout-cols-card.authentication .content__left {
    background: url("/SingleSignOn_Th/img/bgLeftmobile.png?23653");
    background-position: center;
    -webkit-background-size: cover;
            background-size: cover;
    background-repeat: no-repeat;
  }
  .layout.layout-cols-card .left-content__top {
    font-size: 18px;
  }
  .layout.layout-cols-card .left-content__logo {
    margin-bottom: 8px;
  }
  .layout.layout-cols-card .left-content__apps-logos img {
    width: 40px;
  }
}

@media only screen and (max-width: 500px) {
  .layout.layout-cols-card .content__left {
    height: 320px;
  }
  .layout.layout-cols-card .left-content__top {
    font-size: 16px;
  }
  .layout.layout-cols-card .left-content__apps-logos img {
    width: 30px;
  }
}

/* LayoutLogin */
/* Layout Login */
.layout.login {
  --color-secondary: #2C363E;
  width: 100%;
}

.layout.login .header {
  position: relative;
}

.layout.login .header a {
  text-decoration: none;
}

.layout.login .header-top {
  font-size: var(--font-size-xs);
  height: auto;
  margin: var(--space-none) auto;
  padding: var(--space-s) var(--space-none);
  text-align: center;
}

.layout.login .main {
  padding-top: var(--space-none);
}

.layout.login .content {
  padding: var(--space-xxl) calc(var(--space-xl) * 2);
}

.layout.login .main-content {
  -webkit-box-shadow: 0px 0px 40px 50px var(--color-neutral-5);
          box-shadow: 0px 0px 40px 50px var(--color-neutral-5);
  display: -webkit-flex;
  display: flex;
  margin: auto;
  max-height: 100%;
  height: 560px;
  -webkit-flex: unset;
          flex: unset;
  max-width: 1120px;
  width: 100%;
}

.layout.login .main-content__left-bg {
  height: 100%;
  left: 0;
  position: absolute;
  overflow: hidden;
  top: 0;
  z-index: 1;
}

.layout.login .main-content__left-bg-bg-phone {
  display: none;
  
}

.layout.login .main-content__left-bg img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.layout.login .main-content__right-top {
  color: var(--color-neutral-10);
  position: absolute;
  right: 0;
  top: -28px;
}

.layout.login .main-content__left {
  background: -webkit-radial-gradient(circle, var(--color-neutral-0) 0%, var(--color-neutral-3) 98%);
  background: radial-gradient(circle, var(--color-neutral-0) 0%, var(--color-neutral-3) 98%);
  background-position: center;
  -webkit-background-size: cover;
          background-size: cover;
  -webkit-border-radius: var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none) var(--border-radius-soft);
          border-radius: var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none) var(--border-radius-soft);
  padding: var(--space-xl) calc(var(--space-xl) * 2);
  position: relative;
  overflow: auto;
  -webkit-flex: 1;
          flex: 1;
}

.layout.login .main-content__left-content {
  height: 100%;
  position: relative;
  z-index: 2;
}

.layout.login .main-content__left-content-img {
  position: absolute;
  right: var(--space-none);
  top: var(--space-base);
}

.layout.login .main-content__left-content-img img {
  max-width: 120px;
}

.layout.login .main-content__right {
  background-color: var(--color-neutral-0);
  -webkit-border-radius: var(--border-radius-none) var(--border-radius-soft) var(--border-radius-soft) var(--border-radius-none);
          border-radius: var(--border-radius-none) var(--border-radius-soft) var(--border-radius-soft) var(--border-radius-none);
  -webkit-flex: 1;
          flex: 1;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
          justify-content: center;
  width: 100%;
  padding: var(--space-xl) calc(var(--space-xl) * 2);
  overflow: auto;
}

.layout.login .main-content__right-content {
  width: 100%;
  margin: auto;
}

.layout.login .Button + .Button {
  margin-left: var(--space-s);
}

/* Layouts > Login  > Tablet and Phone */
.tablet .layout.login .header-top,
.phone .layout.login .header-top {
  padding: var(--space-s);
}

.tablet .layout.login .content,
.phone .layout.login .content {
  padding: var(--space-xxl) var(--space-s);
}

.tablet .layout.login .main-content,
.phone .layout.login .main-content {
  margin: unset;
  height: 100%;
}

.tablet .layout.login .main-content__left,
.phone .layout.login .main-content__left {
  display: none;
}

@media only screen and (max-width: 1024px) {
  .layout.login .main-content__left,
  .layout.login .main-content__left {
    display: none;
  }
}

.tablet .layout.login .main-content__right,
.phone .layout.login .main-content__right {
  padding: var(--space-xl) var(--space-m);
  -webkit-justify-content: flex-start;
          justify-content: flex-start;
}

.tablet .layout.login .main-content__right-content,
.phone .layout.login .main-content__right-content {
  margin: var(--space-none);
}

.tablet .layout.login:not(.layout-native) .Button,
.phone .layout.login:not(.layout-native) .Button {
  width: unset;
}

.tablet .layout.login .Button.full-width,
.phone .layout.login .Button.full-width {
  width: 100%;
}

.tablet .layout.login .Button + .Button,
.phone .layout.login .Button + .Button {
  margin-top: var(--space-none);
}

.input-field.margin-bottom-none {
  margin-bottom: var(--space-none);
}

.layout.login .show-password,
.layout.login .show-password svg {
  width: 18px;
  height: 18px;
}

.Button.text-primary {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.layout.login .left-content {
  height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  flex-direction: column;
}

.layout.login .left-content__top {
  -webkit-flex: 1;
          flex: 1;
  flex: 1;
  font-size: 20px;
  color: #FFF;
  font-weight: 300;
}

.layout.login .left-content__logo {
  text-align: center;
  margin-bottom: 16px;
}

.layout.login .left-content__logo img {
  max-height: 22px;
}

.layout.login .left-content__apps-logos {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
          flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  justify-content: space-between;
}

.layout.login .left-content__apps-logos img {
  width: 48px;
  -webkit-border-radius: 9px;
          border-radius: 9px;
  border-radius: 9px;
}

/* ================================================================ */
/*  $3.1 - Page Layout - Header                                     */
/* ================================================================ */
/* ================================================================ */
/*  $3.2 - Page Layout - Menu                                       */
/* ================================================================ */
/* ================================================================ */
/*  $3.3 - Page Layout - Content                                    */
/* ================================================================ */
/* ================================================================ */
/*  $4 - Patterns                                                   */
/* ================================================================ */
/* ================================================================ */
/*  $4.1 - Patterns - Content                                       */
/* ================================================================ */
/* ActionCard */
.fid-action-card {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  padding: 24px;
  background-color: #FFF;
  max-width: 400px;
  width: 100%;
  -webkit-border-radius: 10px;
          border-radius: 10px;
  -webkit-box-shadow: 0px 12px 14px 0px rgba(0, 0, 0, 0.07);
          box-shadow: 0px 12px 14px 0px rgba(0, 0, 0, 0.07);
}

.fid-action-card__left {
  margin-right: 4px;
}

.fid-action-card__left .svg-wrapper,
.fid-action-card__left .svg,
.fid-action-card__left svg {
  width: 36px;
  height: 36px;
}

.fid-action-card__middle {
  min-width: 150px;
  text-align: left;
}

.fid-action-card__middle-title {
  font-weight: 600;
  font-size: 16px;
  color: #2C363E;
}

.fid-action-card__middle-content,
.fid-action-card__middle-content a {
  font-weight: 300;
  font-size: 12px;
  width: -webkit-max-content;
  width: max-content;
  color: #474747;
}

.fid-action-card__action {
  margin-left: 4px;
}

.fid-action-card .toggle-button {
  height: 25px;
  background-color: #3A3C3C;
  border: var(--border-size-s) solid #3A3C3C;
}

.fid-action-card .toggle-button:after {
  background-color: var(--color-neutral-0);
  -webkit-border-radius: var(--border-radius-rounded);
          border-radius: var(--border-radius-rounded);
  border: var(--border-size-none);
  content: '';
  height: 21px;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 1px;
  -webkit-transform: translateX(1px) translateZ(0);
          transform: translateX(1px) translateZ(0);
  -webkit-transition: all 180ms linear;
  transition: all 180ms linear;
  width: 21px;
}

.fid-action-card .toggle-button.toggle-button-checked {
  background-color: var(--color-primary);
  border: var(--border-size-s) solid var(--color-primary);
}

.fid-action-card .toggle-button.toggle-button-checked:after {
  -webkit-transform: translateX(26px) translateZ(0);
          transform: translateX(26px) translateZ(0);
}

/* AuthBlock */
/*------------------------------------*\
    $AuthBlock
\*------------------------------------*/
.auth-block {
  font-size: 16px;
  font-weight: 600;
  color: #000;
}

/* HeaderLogo */
.logo {
  max-width: 85%;
}

.header-logo {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
          flex-direction: row;
  -webkit-align-items: flex-end;
          align-items: flex-end;
  min-height: 120px;
  position: relative;
  margin: 40px 0 10px 0;
}

.header-logo-wrapper {
  text-align: left;
  margin-bottom: 32px;
}

.header-logo__image {
  position: absolute;
  right: -40px;
  bottom: -8px;
  overflow: hidden;
}

.header-logo__image img {
  margin-left: 0px;
  display: inline-block;
  max-width: 100%;
  max-height: 112px;
  min-height: 100px;
}

.header-logo__back {
  --icon-size: 24px;
  position: absolute;
  top: 20px;
  left: -8px;
  font-size: var(--icon-size);
  line-height: var(--icon-size);
}

.header-logo__back .fa-fw {
  width: var(--icon-size);
}

.header-logo__title {
  font-size: 36px;
  max-width: 52vw;
}

.header-logo__subtitle {
  font-weight: bold;
  font-size: 18px;
  margin-top: 8px;
}

.header-logo__description {
  margin-top: 4px;
}

/* HeaderLogo > Responsive */
.phone .header-logo__title {
  line-height: 1.1;
  margin-top: 50px;
}

/* HeaderCard */
.header-card__group {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: flex-start;
          align-items: flex-start;
}

.header-card__content {
  -webkit-flex: 1 1 auto;
          flex: 1 1 auto;
}

.header-card__logo {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
}

.header-card__title {
  margin-top: var(--space-m);
  font-size: 42px;
  line-height: 48px;
  font-weight: bold;
}

.header-card__image {
  width: 130px;
  margin-right: -80px;
  margin-top: -40px;
}

.header-card__image img {
  max-width: 100%;
  height: auto;
  display: block;
}

.header-card__description {
  margin-top: var(--space-s);
  font-size: var(--font-size-base);
}

/* Hidden trusty*/
.header-card.header-card--hidden-trusty .header-card__image {
  display: none;
}

/*Resposive design*/
/*Phone*/
.phone .header-card__image {
  width: 80px;
  margin-right: -20px;
  margin-top: 10px;
}

/* InlineSVG */
.svg svg {
  fill: currentColor;
}

.svg.success svg {
  fill: #48E871;
}

/* InputField */
.input-field {
  text-align: left;
  margin-bottom: var(--space-base);
}

.input-field__label {
  font-size: var(--font-size-xs);
  padding-left: var(--space-s);
  padding-right: var(--space-s);
}

.input-field__label:not(:empty) {
  margin-bottom: var(--space-xs);
}

/* Modal */
.modal-wrapper {
  -webkit-border-radius: 10px;
          border-radius: 10px;
  -webkit-box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.07);
          box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.07);
  max-width: 480px;
  height: auto;
}

.modal-overlay {
  background-color: rgba(40, 51, 58, 0.8);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

.modal-top {
  padding: 54px 30px 0 30px;
  color: #141E25;
  font-size: 20px;
}

.modal-content {
  color: #333;
}

.modal-footer {
  padding: 30px;
  /* IE fix to override OSUI rule */
  border-top: 0px solid #DEE2E6 !important;
}

.modal-close {
  position: absolute;
  right: 22px;
  top: 30px;
}

.modal-close img,
.modal-close a {
  max-width: 16px;
}

.modal-footer .Button {
  min-width: 220px;
  max-width: 295px;
}

/* OrSeparator */
.or-separator {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-align-items: center;
          align-items: center;
  font-size: var(--font-size-s);
  color: var(--color-neutral-11);
  margin-top: var(--space-m);
  margin-bottom: var(--space-m);
}

.or-separator__text {
  padding: 0 10px;
}

.or-separator:before,
.or-separator:after {
  content: "";
  -webkit-flex: 1 1 auto;
          flex: 1 1 auto;
  border-top: 1px solid var(--color-neutral-13);
  position: relative;
  top: 2px;
}

/* RGPD */
.rgpd__label {
  color: #656769;
  font-size: 14px;
  text-align: center;
}

.rgpd__title {
  font-size: 24px;
  font-weight: bold;
  margin-top: var(--space-base);
  text-align: center;
}

.rgpd__content {
  text-align: left;
  margin-top: var(--space-xl);
}

/* RGPDItem */
/* RGPDItem > Title */
.rgpd-item__title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: var(--space-m);
}

/* RGPDItem > SubTitle */
.rgpd-item__subtitle {
  font-weight: 700;
  margin-bottom: 16px;
}

/* RGPDItem > Description */
.rgpd-item__description {
  line-height: var(--space-m);
}

/* RGPDItem > Radio Buttons */
.rgpd-item__radio-buttons {
  margin: var(--space-m) 0;
}

.rgpd-item__radio-buttons .button-group {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  gap: var(--space-m);
}

.rgpd-item__button-wrapper {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
          flex-direction: row;
  -webkit-align-items: center;
          align-items: center;
  padding: 19px 30px 19px 16px;
  border: 1px solid #D8D5CE;
  -webkit-border-radius: 8px;
          border-radius: 8px;
  -webkit-box-shadow: 0 9px 13px 0 rgba(176, 171, 162, 0.25);
          box-shadow: 0 9px 13px 0 rgba(176, 171, 162, 0.25);
  -webkit-transition: 0.3s all ease-in-out;
  transition: 0.3s all ease-in-out;
  position: relative;
  cursor: pointer;
  
}

.ie11 .rgpd-item__button-wrapper {
  margin-right: var(--space-m);
}

.rgpd-item__radio-button {
  width: 26px;
  height: 26px;
  border: 1px solid #5B5B5B;
  -webkit-border-radius: 50%;
          border-radius: 50%;
}

.rgpd-item__radio-button input {
  width: 100%;
  height: 64px;
  background-color: transparent;
  position: absolute;
  left: 0;
  top: 0;
  border: none;
  z-index: 1;
  
}

.rgpd-item__radio-button:after {
  content: "";
  opacity: 0;
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  background-color: #FFF;
  border: 6px solid #EE2924;
  -webkit-border-radius: 50%;
          border-radius: 50%;
  -webkit-transform: translate(-1px, -50%);
          transform: translate(-1px, -50%);
}

.rgpd-item__label {
  margin-left: 26px;
  font-weight: 600;
}

.rgpd-item__button-wrapper label {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
  position: static;
}

/* RGPDItem > Radio Buttons > Selected */
.rgpd-item__button-wrapper.selected {
  border: 1px solid #EE2923;
}

.rgpd-item__button-wrapper.selected .rgpd-item__radio-button:after {
  opacity: 1;
}

/* RGPDItem > Responsive */
.tablet .rgpd-item__button-wrapper,
.desktop .rgpd-item__button-wrapper {
  min-width: 190px;
  height: 48px;
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.23), 0 4px 8px 0 rgba(0, 0, 0, 0.16);
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.23), 0 4px 8px 0 rgba(0, 0, 0, 0.16);
}

.phone .rgpd-item__radio-buttons .button-group {
  -webkit-flex-direction: column;
          flex-direction: column;
}

/* LogoWithLabel */
.logo-with-label {
  display: inline-block;
  width: 80px;
  margin-top: var(--space-s);
}

.logo-with-label__image {
  margin: auto;
  width: 60px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}

.logo-with-label__image img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

.logo-with-label__title {
  text-align: center;
  font-size: 10px;
  color: var(--color-neutral-11);
  margin-top: -4px;
}

/* ShowPassword */
.show-password {
  color: var(--color-neutral-14);
  fill: currentColor;
  width: 24px;
  height: 24px;
  line-height: 0;
}

.show-password svg {
  width: 24px;
  height: 24px;
}

/* ShowPassword > Hide */
.show-password__hide {
  display: none;
}

/* ShowPassword > Visible */
.show-password--visible .show-password__show {
  display: none;
}

.show-password--visible .show-password__hide {
  display: block;
}

/* Tooltip Environment */
/* This is the base styling required to make all Tooltipsters work */
.tooltipster-base {
  padding: 0;
  font-size: 0;
  line-height: 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9999999;
  pointer-events: none;
  width: auto;
  overflow: visible;
}

/* These next classes handle the styles for the little arrow attached to the tooltip. By default, the arrow will inherit the same colors and border as what is set on the main tooltip itself. */
.tooltipster-arrow {
  display: block;
  text-align: center;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}

.tooltipster-arrow span,
.tooltipster-arrow-border {
  display: block;
  width: 0;
  height: 0;
  position: absolute;
}

.tooltipster-arrow-top span,
.tooltipster-arrow-top-right span,
.tooltipster-arrow-top-left span {
  border-left: 8px solid transparent !important;
  border-right: 8px solid transparent !important;
  border-top: 8px solid;
  bottom: -7px;
}

.tooltipster-arrow-top .tooltipster-arrow-border,
.tooltipster-arrow-top-right .tooltipster-arrow-border,
.tooltipster-arrow-top-left .tooltipster-arrow-border {
  border-left: 9px solid transparent !important;
  border-right: 9px solid transparent !important;
  border-top: 9px solid;
  bottom: -8px;
}

.tooltipster-arrow-bottom span,
.tooltipster-arrow-bottom-right span,
.tooltipster-arrow-bottom-left span {
  border-left: 8px solid transparent !important;
  border-right: 8px solid transparent !important;
  border-bottom: 8px solid;
  top: -7px;
}

.tooltipster-arrow-bottom .tooltipster-arrow-border,
.tooltipster-arrow-bottom-right .tooltipster-arrow-border,
.tooltipster-arrow-bottom-left .tooltipster-arrow-border {
  border-left: 9px solid transparent !important;
  border-right: 9px solid transparent !important;
  border-bottom: 9px solid;
  top: -6px;
}

.tooltipster-arrow-top span,
.tooltipster-arrow-top .tooltipster-arrow-border,
.tooltipster-arrow-bottom span,
.tooltipster-arrow-bottom .tooltipster-arrow-border {
  left: 0;
  right: 0;
  margin: 0 auto;
}

.tooltipster-arrow-top-left span,
.tooltipster-arrow-bottom-left span {
  left: 6px;
}

.tooltipster-arrow-top-left .tooltipster-arrow-border,
.tooltipster-arrow-bottom-left .tooltipster-arrow-border {
  left: 5px;
}

.tooltipster-arrow-top-right span,
.tooltipster-arrow-bottom-right span {
  right: 6px;
}

.tooltipster-arrow-top-right .tooltipster-arrow-border,
.tooltipster-arrow-bottom-right .tooltipster-arrow-border {
  right: 5px;
}

.tooltipster-arrow-left span,
.tooltipster-arrow-left .tooltipster-arrow-border {
  border-top: 8px solid transparent !important;
  border-bottom: 8px solid transparent !important;
  border-left: 8px solid;
  top: 50%;
  margin-top: -7px;
  right: -7px;
}

.tooltipster-arrow-left .tooltipster-arrow-border {
  border-top: 9px solid transparent !important;
  border-bottom: 9px solid transparent !important;
  border-left: 9px solid;
  margin-top: -8px;
}

.tooltipster-arrow-right span,
.tooltipster-arrow-right .tooltipster-arrow-border {
  border-top: 8px solid transparent !important;
  border-bottom: 8px solid transparent !important;
  border-right: 8px solid;
  top: 50%;
  margin-top: -7px;
  left: -7px;
}

.tooltipster-arrow-right .tooltipster-arrow-border {
  border-top: 9px solid transparent !important;
  border-bottom: 9px solid transparent !important;
  border-right: 9px solid;
  margin-top: -8px;
}

.tooltipster-arrow-bottom .tooltipster-arrow-border {
  top: -8px;
}

/* Some CSS magic for the awesome animations - feel free to make your own custom animations and reference it in your Tooltipster settings! */
.tooltipster-fade {
  opacity: 0;
  -webkit-transition-property: opacity;
  transition-property: opacity;
}

.tooltipster-fade-show {
  opacity: 1;
}

.tooltipster-grow {
  -webkit-transform: scale(0, 0);
          transform: scale(0, 0);
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-backface-visibility: hidden;
}

.tooltipster-grow-show {
  -webkit-transform: scale(1, 1);
          transform: scale(1, 1);
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
          transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
}

.tooltipster-swing {
  opacity: 0;
  -webkit-transform: rotateZ(4deg);
          transform: rotateZ(4deg);
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
}

.tooltipster-swing-show {
  opacity: 1;
  -webkit-transform: rotateZ(0deg);
          transform: rotateZ(0deg);
  -webkit-transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4);
          transition-timing-function: cubic-bezier(0.23, 0.635, 0.495, 2.4);
}

.tooltipster-fall {
  top: 0;
  -webkit-transition-property: top;
  transition-property: top;
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
          transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
}

.tooltipster-fall.tooltipster-dying {
  -webkit-transition-property: all;
  transition-property: all;
  top: 0px !important;
  opacity: 0;
}

.tooltipster-slide {
  left: -40px;
  -webkit-transition-property: left;
  transition-property: left;
  -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
          transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.15);
}

.tooltipster-slide.tooltipster-dying {
  -webkit-transition-property: all;
  transition-property: all;
  left: 0px !important;
  opacity: 0;
}

/* CSS transition for when contenting is changing in a tooltip that is still open. The only properties that will NOT transition are: width, height, top, and left */
.tooltipster-content-changing {
  opacity: 0.5;
  -webkit-transform: scale(1.1, 1.1);
          transform: scale(1.1, 1.1);
}

/*This is the default Tooltipster theme (feel free to modify or duplicate and create multiple themes!):*/
.tooltipster-default {
  -webkit-border-radius: 5px;
          border-radius: 5px;
  border: 2px solid #000;
  background: #4C4C4C;
  color: #FFF;
}

/* Use this next selector to style things like font-size and line-height: */
.tooltipster-default .tooltipster-content {
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 16px;
  padding: 8px 10px;
  overflow: hidden;
}

/* This next selector defines the color of the border on the outside of the arrow. This will automatically match the color and size of the border set on the main tooltip styles. Set display: none; if you would like a border around the tooltip but no border around the arrow */
.tooltipster-default .tooltipster-arrow .tooltipster-arrow-border {
  /* border-color: ... !important; */
}

/* If you're using the icon option, use this next selector to style them */
.tooltipster-icon {
  cursor: help;
  margin-left: 4px;
}

/* tooltip extended content */
.tooltip-extendend-content {
  padding: 15px;
  max-width: 100%;
}

.tooltip-extendend-content__body {
  margin: 0;
  font-size: 14px;
}

.tooltip-extendend-content__body span.fa {
  margin-right: 7px;
  color: #EE2429;
  font-size: 1em;
}

.tooltip-extendend-content__header {
  display: block;
}

.tooltip-extendend-content__header > div:empty {
  display: none;
}

.tooltip-extendend-content__header-icon {
  margin: 0;
}

.tooltip-extendend-content__header-title {
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0;
  line-height: 1.2;
  margin: 10px 0;
}

.tooltip_style {
  -webkit-box-shadow: -4px 0px 12px 3px #E4E4E4;
          box-shadow: -4px 0px 12px 3px #E4E4E4;
  -webkit-border-radius: 5px;
          border-radius: 5px;
  padding: 0;
}

.tooltip_style .tooltipster-content {
  font-size: 16px;
  letter-spacing: 0;
  line-height: 24px;
  padding: 0;
  position: relative;
  z-index: 2;
}

.tooltipster-arrow-bottom span {
  -webkit-box-shadow: -3px 3px 3px 0 #ECECEC;
          box-shadow: -3px 3px 3px 0 #ECECEC;
}

/* Tooltip */
.tooltip-content-trigger .tooltip {
  color: var(--color-neutral-10);
  -webkit-border-radius: var(--border-radius-none);
          border-radius: var(--border-radius-none);
  padding: var(--space-base);
  text-align: left;
  background-color: var(--color-neutral-0);
  -webkit-box-shadow: var(--shadow-s);
          box-shadow: var(--shadow-s);
}

.tooltip-content-trigger .tippy-tooltip {
  background-color: transparent;
}

/* Arrow */
.tooltip-content-trigger .tippy-popper[x-placement^=bottom] .tippy-arrow {
  border-bottom: 8px solid var(--color-neutral-0);
}

.tooltip-content-trigger .tippy-popper[x-placement^=top] .tippy-arrow {
  border-top: 8px solid var(--color-neutral-0);
}

.tooltip-content-trigger .tippy-popper[x-placement^=left] .tippy-arrow {
  border-left: 8px solid var(--color-neutral-0);
}

.tooltip-content-trigger .tippy-popper[x-placement^=right] .tippy-arrow {
  border-right: 8px solid var(--color-neutral-0);
}

/* Responsive mode */
.phone .tooltip-content-trigger .tooltip {
  width: 300px;
  word-break: break-word;
}

.phone .tippy-popper {
  left: 40px !important;
  line-height: 1.2;
}

/* Tooltip > Extended Positions */
.tooltip-container.bottom-left .tippy-popper[x-placement="bottom"] .tippy-tooltip {
  left: auto !important;
  position: absolute;
  right: -20px;
  top: 0;
}

.tooltip-container.bottom-left .tippy-popper[x-placement="bottom"] .tippy-arrow {
  left: auto !important;
  position: absolute;
  right: 12px;
}

.tooltip-container.bottom-right .tippy-popper[x-placement="bottom"] .tippy-tooltip {
  left: -20px !important;
  position: absolute;
  top: 0;
}

.tooltip-container.bottom-right .tippy-popper[x-placement="bottom"] .tippy-arrow {
  left: 12px !important;
  position: absolute;
}

.tooltip-container.top-right .tippy-popper[x-placement="top"] .tippy-tooltip {
  bottom: 0;
  left: -20px;
  position: absolute;
  top: auto !important;
}

.tooltip-container.top-right .tippy-popper[x-placement="top"] .tippy-arrow {
  left: 12px !important;
  position: absolute;
}

.tooltip-container.top-left .tippy-popper[x-placement="top"] .tippy-tooltip {
  bottom: 0;
  position: absolute;
  right: -20px;
  top: auto !important;
}

.tooltip-container.top-left .tippy-popper[x-placement="top"] .tippy-arrow {
  left: auto !important;
  position: absolute;
  right: 12px;
}

.tooltip-container.top-left .tooltip,
.tooltip-container.top-right .tooltip,
.tooltip-container.bottom-right .tooltip,
.tooltip-container.bottom-left .tooltip {
  width: -webkit-max-content;
  width: max-content;
}

/* ================================================================ */
/*  $4.2 - Patterns - Controls                                      */
/* ================================================================ */
/* InputStatus */
.input-status {
  position: relative;
}

.input-status__input input {
  width: 100%;
}

.input-status input[type="text"],
.input-status input[type="password"],
.input-status input[type="datetime"],
.input-status input[type="datetime-local"],
.input-status input[type="date"],
.input-status input[type="month"],
.input-status input[type="time"],
.input-status input[type="week"],
.input-status input[type="number"],
.input-status input[type="email"],
.input-status input[type="url"],
.input-status input[type="search"],
.input-status input[type="tel"],
.input-status input[type="color"] {
  padding-right: 40px;
  margin: 0;
}

/* top changed to a fixed value to handle validation messages */
.input-status__editable {
  display: none;
  position: absolute;
  top: 28px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 1.5em;
  color: #98A9B4;
  right: 7px;
}

.input-status--editable .input-status__editable {
  display: block;
}

.input-status--editable input:focus ~ .input-status__editable,
.input-status--editable input:disabled ~ .input-status__editable {
  display: none;
}

/* top changed to a fixed value to handle validation messages */
.input-status__icon {
  position: absolute;
  top: 28px;
  right: -52px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.input-status__validation-message {
  margin-top: 4px;
}

/* doesnt display the pencil icon when input is editable but disabled */
.input-status--editable .input-status__input input[readonly="readonly"] + span.fa.input-status__editable {
  display: none;
}

/* Input placeholder prompt */
input::-webkit-input-placeholder {
  font-style: italic;
}
input::placeholder {
  font-style: italic;
}

/* InputStatusIcon */
.input-status-icon {
  position: absolute;
  top: 0;
  right: 0;
  text-align: center;
  width: 40px;
  height: var(--input-height);
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
          justify-content: center;
  -webkit-align-items: center;
          align-items: center;
}

/* InputStatusIcon > Icons */
.input-status-icon__valid,
.input-status-icon__not-valid {
  display: none;
  fill: currentColor;
  width: 24px;
  height: 24px;
}

/* InputStatusIcon > Valid */
.input-status-icon__valid {
  color: var(--color-success);
}

.input-status-icon--valid .input-status-icon__valid {
  display: block;
}

/* InputStatusIcon > Not Valid */
.input-status-icon__not-valid {
  color: var(--color-error);
}

.input-status-icon--not-valid .input-status-icon__not-valid {
  display: block;
}

input[type=password]::-ms-reveal,
input[type=password]::-ms-clear {
  display: none;
}

/* ================================================================ */
/*  $4.3 - Patterns - Layouts                                       */
/* ================================================================ */
/* ================================================================ */
/*  $4.4 - Patterns - Navigation                                    */
/* ================================================================ */
/* ================================================================ */
/*  $4.5 - Patterns - Numbers                                       */
/* ================================================================ */
/* ================================================================ */
/*  $4.6 - Patterns - Responsive                                    */
/* ================================================================ */
/* ================================================================ */
/*  $4.7 - Patterns - Structure                                     */
/* ================================================================ */
/* ================================================================ */
/*  $4.8 - Patterns - Utilities                                     */
/* ================================================================ */
/* ================================================================ */
/*  $4.9 - Patterns - Custom                                        */
/* ================================================================ */
/* Responsive rules to fix issues with the sim results in smaller screens */
@media only screen and (max-width: 1024px) {
  .custom-modal .custom-modal__body {
    min-width: 502px;
    width: 90%;
  }
  .custom-modal .card-pack {
    min-width: 197px;
  }
  .custom-modal .Columns {
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
    -webkit-justify-content: center;
            justify-content: center;
  }
  .custom-modal .Column {
    margin: 0 14px 20px !important;
    width: 45%;
  }
}

@media only screen and (min-width: 1025px) {
  .custom-modal__body {
    -webkit-animation: customModalFadeInTop 300ms ease-out;
            animation: customModalFadeInTop 300ms ease-out;
  }
}

@media only screen and (max-width: 1024px) {
  .custom-modal__body {
    -webkit-animation: customModalFadeInTop 300ms ease-out;
            animation: customModalFadeInTop 300ms ease-out;
  }
}

@media only screen and (max-width: 1024px) and (orientation: landscape) {
  .custom-modal__body {
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
    position: absolute !important;
    top: 50px !important;
    -webkit-animation: customModalFadeInTopTablet 300ms ease-out;
            animation: customModalFadeInTopTablet 300ms ease-out;
  }
}

/* Fix for IE */
/* Rules for Edge */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .custom-modal .custom-modal__body {
    min-width: 502px;
    width: 90%;
  }
}

/* Rules for IE 10 & 11 */
@supports (-ms-accelerator: true) {
  .custom-modal .custom-modal__body {
    min-width: 502px;
    width: 90%;
  }
}

/* ---------- $CustomModal ---------- */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes customModalFadeInTopTablet {
  from {
    -webkit-transform: translate(-50%, -62%);
            transform: translate(-50%, -62%);
    opacity: 0;
  }
  to {
    -webkit-transform: translate(-50%, 0%);
            transform: translate(-50%, 0%);
    opacity: 1;
  }
}

@keyframes customModalFadeInTopTablet {
  from {
    -webkit-transform: translate(-50%, -62%);
            transform: translate(-50%, -62%);
    opacity: 0;
  }
  to {
    -webkit-transform: translate(-50%, 0%);
            transform: translate(-50%, 0%);
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.custom-modal__body {
  background-color: #FFF;
  padding: 32px;
  -webkit-border-radius: 5px;
          border-radius: 5px;
  -webkit-box-shadow: 2px 2px 8px 0 rgba(175, 185, 193, 0.3);
          box-shadow: 2px 2px 8px 0 rgba(175, 185, 193, 0.3);
  opacity: 0;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1001;
  -webkit-animation: fadeIn 300ms ease-out;
          animation: fadeIn 300ms ease-out;
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

/* ie rules below */
.custom-modal__overlay {
  background-color: rgba(39, 50, 57, 0.8);
  filter: alpha(opacity=80) !important;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  opacity: 0;
  -webkit-animation: fadeIn 200ms ease-out;
          animation: fadeIn 200ms ease-out;
}

.custom-modal {
  display: none;
}

.custom-modal--show {
  display: block;
}

.custom-modal--show .custom-modal__overlay {
  opacity: 1;
}

.custom-modal-content {
  display: none;
  /* service-studio */
  
  
  
  -webkit-border-radius: 5px;
          border-radius: 5px;
  -webkit-box-shadow: 2px 2px 8px 0 rgba(175, 185, 193, 0.3);
          box-shadow: 2px 2px 8px 0 rgba(175, 185, 193, 0.3);
}

.custom-modal .custom-modal-content {
  display: block;
}

.custom-modal .close-btn {
  position: absolute;
  right: 0;
  width: 40px;
  height: 40px;
  top: 20px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  cursor: pointer;
}

.close-btn:after {
  content: "";
  position: absolute;
  height: 19px;
  width: 3px;
  background-color: #9D9D9D;
  top: 0px;
}

.close-btn:before {
  content: "";
  position: absolute;
  width: 19px;
  height: 3px;
  background-color: #9D9D9D;
  top: 8px;
  left: -8px;
}

.custom-modal.hide-close-btn .close-btn {
  display: none;
}

.header-expandable__icon {
  display: none;
}

/* LayoutHeaderCardExpandable > Responsive */
/*Phone*/
.phone .header-expandable__header {
  position: relative;
  padding-bottom: 12px;
}

.phone .header-expandable__icon {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-end;
          justify-content: flex-end;
}

.phone .header-expandable__icon div {
  width: -webkit-fit-content;
  width: fit-content;
  color: var(--color-primary);
  font-weight: bold;
  font-size: 18px;
  cursor: pointer;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.phone .header-expandable__content {
  display: none;
}

.phone .header-expandable--opened .header-expandable__icon div {
  -webkit-transform: rotateZ(180deg);
          transform: rotateZ(180deg);
}

.phone .header-expandable--opened .header-expandable__content {
  display: block;
  border-top: 1px solid var(--color-neutral-13);
  padding: 21px 0;
}

/* Loading Feedback AjaxWait ********************/
.Feedback_AjaxWait.loading_overlay {
  background: none;
  background-color: #2C363F;
  -webkit-border-radius: 0;
          border-radius: 0;
  bottom: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  display: none;
  height: 100%;
  left: 0;
  padding: 0;
  position: absolute;
  right: 0;
  text-align: center;
  width: 100%;
  z-index: 10000;
}

.Feedback_AjaxWait.loading_overlay:before {
  display: none;
}

.Feedback_AjaxWait.loading_overlay img {
  -webkit-animation: 0;
          animation: 0;
  display: inline-block;
}

.wrapper-loading {
  height: 200px;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 340px;
}

.loading-text {
  color: #FFF;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 1.5px;
  margin-top: 10px;
}

.loading-text-black {
  color: #2C363E;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 1.5px;
  margin-top: 10px;
}

.loading-description {
  color: #FFF;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  margin-top: 10px;
}

.loading-logo {
  height: 105px;
}

.loading-logo img {
  width: 100px;
}

/* Loading Feedback AjaxWait > Tablet Only *********/
.Feedback_AjaxWait-mobile {
  background-color: #2C363F;
}

.Feedback_AjaxWait-mobile .wrapper-loading {
  position: fixed;
  -webkit-transform: translate(-50%, -100%);
          transform: translate(-50%, -100%);
}

.Feedback_AjaxWait-mobile .loading-logo {
  height: auto;
}

.Feedback_AjaxWait-mobile .loading-logo img {
  width: 76vw;
}

.Feedback_AjaxWait-mobile .loading-icon {
  margin-top: var(--space-xxl);
}

.Feedback_AjaxWait-mobile .loading-icon img {
  width: 60vw;
  margin-top: var(--space-xxl);
}

.phone.landscape .Feedback_AjaxWait-mobile .loading-icon img {
  margin-top: var(--space-base);
}

/* ================================================================ */
/* Custom Components - Pin Code Mask                        */
/* ================================================================ */
.input-code {
  position: relative;
  margin-top: 80px;
}

.desktop .input-code .input-code__inputs input,
.tablet .input-code .input-code__inputs input,
.phone .input-code .input-code__inputs input {
  width: 41px;
  height: 65px;
  padding-right: 0;
  padding-left: 0;
  text-align: center;
  color: #292B2E;
  font-weight: bold;
  font-size: 24px;
  border: 1px solid rgba(165, 165, 165, 0.24);
  -webkit-border-radius: 8px;
          border-radius: 8px;
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-transition: color 300ms ease-out;
  transition: color 300ms ease-out;
}

.input-code .input-code__inputs input:not(:placeholder-shown) {
  height: 65px;
  -webkit-border-radius: 8px;
          border-radius: 8px;
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.07);
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.07);
  border: none;
}

.input-code .input-code__inputs {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
          justify-content: center;
}

.input-code.has-error .input-code__inputs input {
  color: #EE2429;
}

.input-code__error-message {
  display: block;
  margin-left: 0;
  color: #EE2429;
  
}

.input-code .input-code__error-message.validation-message {
  text-align: center;
  font-size: 14px;
  margin-top: 16px;
}

.input-code.is-valid .input-code__inputs input {
  color: #48E871;
}

.input-code .input-number {
  display: inline-block;
  margin: 0 4px;
}

.is-rtl .input-code__inputs {
  -webkit-justify-content: flex-end;
          justify-content: flex-end;
  text-align: right;
  direction: ltr;
}

/* ================================================================ */
/*  $6 - Styles                                                     */
/* ================================================================ */
/* ================================================================ */
/*  $6.1 - Styles - Typography                                      */
/* ================================================================ */
/* $6.1.1 - Styles - Typography - Sizes Desktop */
.heading1 {
  font-weight: var(--font-regular);
}

/* $6.1.3 - Styles - Typography - Sizes Phone */
.phone .heading1 {
  --font-size-h1: 32px;
}

/* ================================================================ */
/*  $6.2 - Styles - Colors                                          */
/* ================================================================ */
/* $6.2.3 - Styles - Colors - Neutral */
.background-neutral-11 {
  background-color: var(--color-neutral-11);
}

.background-neutral-12 {
  background-color: var(--color-neutral-12);
}

.background-neutral-13 {
  background-color: var(--color-neutral-13);
}

.background-neutral-14 {
  background-color: var(--color-neutral-14);
}

.text-neutral-11 {
  color: var(--color-neutral-11);
}

.text-neutral-12 {
  color: var(--color-neutral-12);
}

.text-neutral-13 {
  color: var(--color-neutral-13);
}

.text-neutral-14 {
  color: var(--color-neutral-14);
}

/* ================================================================ */
/*  $6.3 - Styles - Space                                           */
/* ================================================================ */
/* ================================================================ */
/*  $6.4 - Styles - Border Radius                                   */
/* ================================================================ */
/* ================================================================ */
/*  $6.5 - Styles - Border Size                                     */
/* ================================================================ */
/* ================================================================ */
/*  $6.6 - Styles - Elevation/Shadows                               */
/* ================================================================ */
/* ================================================================ */
/*  $6.7 - Styles - Display Flex Properties                         */
/* ================================================================ */
/* ================================================================ */
/*  $6.8 - Styles - Others                                          */
/* ================================================================ */
.text-bold {
  font-weight: bold;
}

.margin-b-5 {
  margin-bottom: 5px;
}

.margin-b-10 {
  margin-bottom: 10px;
}

.margin-b-20 {
  margin-bottom: 20px;
}

.margin-left25 {
  margin-left: 25px;
}

.margin-right25 {
  margin-right: 25px;
}

.margin-right-5 {
  margin-right: 5px;
}

.margin-t-20 {
  margin-top: 20px;
}

.margin-t-32 {
  margin-top: 32px;
}

.margin-t-40 {
  margin-top: 40px;
}

.no-border-radius {
  -webkit-border-radius: 0;
          border-radius: 0;
}

.text-underline,
a.text-underline {
  text-decoration: underline;
}

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

.text-grey,
a.text-grey {
  color: #ABADAF;
}

.text-dark-grey,
a.text-dark-grey {
  color: #474747;
}

/* FIX OLD LAYOUT */
.layout-card-columns2 > .layout__wrapper {
    height: 100vh;
    width: 100%;
}

.layout-card-columns2 > .layout__wrapper .main{
    height: 100%;
}