@import url("/SU_Theme/Theme.SU_Theme.css?27925");

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

/*  TUW Interview Module Theme                                           */

/*  $1 - Styles                                                          */
/*       $1.1 - Styles - Typography                                      */
/*              $1.1.1 - Styles - Typography - Custom Fonts              */
/*       $1.2 - Theme                                                    */
/*              $1.2.1  - Theme - Main Definitions                       */
/*              $1.2.1  - Theme - Structure                              */
/*       $1.3 - Styles - Colors                                          */
/*              $1.3.1  - Styles - Colors - Brand                        */
/*   $2 - Patterns                                                       */
/*       $2.1 - Patterns - OutsystemsUI                                  */
/*       $2.2 - Patterns - Columns                                       */
/*       $2.3 - Patterns - Floating Actions                              */
/*       $2.4 - Patterns - Separator                                     */
/*       $2.5 - Patterns - Tabs                                          */
/*       $2.6 - Patterns - Content                                       */
/*              $2.6.1   - Patterns - Content - Accordion                */
/*   $3 - Widgets                                                        */
/*       $3.1 - Widgets - OutsystemsUI                                   */
/*       $3.2 - Widgets - RichWidgets                                    */
/*       $3.3 - Widgets - Buttons                                        */
/*       $3.4 - Widgets - Editable Table                                 */
/*       $3.5 - Widgets - Feedback Ajax Wait                             */
/*       $3.6 - Widgets - Form Elements                                  */
/*   $4 - Forms                                                          */

/*       $4.1 - Forms > Inputs, Selects & Textarea                       */
/*       $4.2 - Forms > ReadOnly & Disabled                              */
/*       $4.3 - Forms > Not Valid                                        */
/*       $4.4 - Forms > Radio Button & Checkbox                          */
/*   $5 - Layouts                                                        */
/*       $5.1 - Contents > Conteiners                                    */
/*       $5.2 - Contents > Rodapé Genereali                              */
/*       $5.3 - Contents > Rodapé rows                                   */
/*       $5.4 - RichWidgets - FeedbackMessage                            */
/*   $6 - Page Layout                                                    */
/*       $6.1 - Page Layout - Header                                     */
/*       $6.2 - Page Layout - Content                                    */
/*       $6.3 - WebBlock - Layout                                        */
/*   $7 - Responsive Context                                             */
/*       $7.1 - Media Queries                                            */

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

:root{
    /* Color - Extended */
    --footer-color: #E5EBE7;
    --footer-height: 100px;
    --image-logo: url("/SU_Resources/img/TranquilidadeLogo.png?27782");
    --image-logo-size: 80px;
}

/* ===================================================================== */
/* ===================================================================== */
html{
  -ms-content-zooming: none;
  -ms-touch-action: manipulation;
  -ms-touch-select: none;
  -webkit-content-zooming: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-touch-action: manipulation;
}

/* Logo */

.LogoTRQ {
    background-image: var(--image-logo);
    background-repeat: no-repeat;
    background-size: var(--image-logo-size);
    background-position: left center;
    height: calc(80px + var(--space-base)*2);
    margin: 0px var(--space-base) 0px var(--space-base);
}

/*.phone .LogoTRQ {
    zoom: 60%;
}*/

/* Styles - Typography - Custom Fonts */

/* Converting Font Families to Tranquilidade official font 'Regular TQ' */
.deui {
    font-family: "Regular TQ", Regular !important;
}


/* ===================================================================== */
/* - HTML Elements                                                       */
/* ===================================================================== */

/*        HTML Elements - Inputs and Selectors                     */

/* Forms > Inputs, Buttons, Selects, Radio Buttons, Checkboxes & Textarea Tipography*/ 
.deui input, 
.deui button, 
.deui select, 
.deui textarea {
    font-family: "Regular TQ", Regular;
}

/* Text Labels (overriden by other rules)*/
label{
   color: var(--color-neutral-10); 
}

/* Text Inputs (overriden by other rules)*/
input[type="text"] {
    border-radius: var(--border-radius-soft);
    color: var(--color-neutral-10); 
}

input[type="text"]:focus {
    box-shadow: var(--shadow-xl);
    color: var(--color-neutral-10); 
}


/* --- Buttons ---*/

.phone .Button + .Button {
    margin-left: var(--space-base);
    margin-top: var(--space-none);
}

/*Check-boxes*/
input[type="checkbox"], 
input[type="checkbox"].ReadOnly, 
.Form input[type="checkbox"].ReadOnly {
    border: 0;
}
.checkbox:before, 
.TableRecords .TableRecords_Header [type="checkbox"]:before {
    border-radius: var(--border-radius-none);
}


/* Various Rules related to "On Focus" (when item is selected) */
.deui .deuiDate:focus, 
.deui .deuiTextField:focus,
.deui .deuiSearchSelect:focus,
.deui select:focus,
.deui input[type="number"]:focus,
.deui textarea:focus {
    background-color: var(--color-neutral-0);
    border: var(--border-size-m) solid var(--color-primary);
    color: var(--color-darkGrey);
    box-shadow: none;
}


/* Rule related to Input Text Field "On Hover" */
.deui .deuiTextField:hover {
    box-shadow: none;
    border: var(--border-size-s) solid var(--color-neutral-6);
}

/*   $2 - Patterns                                                       */
/*       $2.6 - Patterns - Content                                       */
/*              $2.6.1   - Patterns - Content - Accordion                */
.CustomAccordionItem_Header{
    background-color: var(--color-neutral-0);
    color: var(--color-primary);
    border: var(--border-size-s) solid var(--color-mediumGrey);
    border-bottom: var(--border-size-none);
    border-radius: var(--border-radius-soft) var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none);

}

.CustomAccordionItem__Title{
    text-transform: initial;
}

.CustomAccordionItem_Header .CustomAccordionItem__Icon .IconPlusMinus:before,
.CustomAccordionItem_Header .CustomAccordionItem__Icon .IconPlusMinus:after{
     background: var(--color-primary);
}

.CustomAccordionItem_Content{
    padding: 0;
    border: var(--border-size-s) solid var(--color-mediumGrey);
    border-top: var(--space-none);
    border-radius: var(--border-radius-soft) var(--border-radius-soft) var(--border-radius-soft) var(--border-radius-soft);
}

.CustomAccordionItem_Content .Content_Wrapper{
    height: 0;
}
.CustomAccordionItem_Content.open .Content_Wrapper{
    height: auto;
}
.CustomAccordionItem_Header.open{
    pointer-events: auto;
}
/*       $5.1 - Forms > Inputs, Selects & Textarea                       */

/* Regular Input Text Field Area Display */
.deui .form-control {
    background-color: var(--color-lightGrey);
    border-radius: var(--border-radius-soft);
    border: var(--border-size-s) solid var(--color-mediumGrey);
    box-shadow: none;
    color: var(--color-neutral-10);
    font-size: var(--font-size-s);
    padding: var(--space-none) var(--space-base);
    margin: 0;
    font-family: inherit;
    appearance: none;
    display: inline-block;
    height: 40px;
    line-height: 38px;
    -webkit-transition: all 180ms linear;
    transition: all 180ms linear;
}

.phone .deui .form-control {
    margin-bottom: var(--space-base);
}

/* Regular Input Text Field Area Display "On Focus" */
.deui .form-control:focus {
    border: var(--border-size-m) solid var(--color-primary);
    background-color: var(--color-neutral-0);
    outline: 0;
    box-shadow: none;
    max-height: var(--space-xxl);
}


/* Regular Input Text Field Area Display "On Hover" */
.deui .form-control:hover {
    box-shadow: none;
    border: var(--border-size-s) solid var(--color-neutral-6);
}

/* Input Error Color */
.deui .has-error .form-control {
    border: var(--border-size-m) solid #f44336 !important;
    padding: 0 15px;
}


/* Form > Error Message */
.deui .has-error .help-block {
    color: #db4048;
    font-size: var(--font-size-xs);
    font-weight: var(--font-regular);
    margin-top: 4px;
}


/* Radio Button */
.deuiRadio input[type=radio] {
    background-color: var(--color-neutral-0);
    border: var(--border-size-s) solid var(--color-neutral-5);
    content: '';
    display: block;
    transition: all 180ms linear;
}


/* Radio Button Label */
.deuiRadio input[type=radio]+.lbl {
    color: var(--color-neutral-10);
    font-size: var(--font-size-s);
    font-weight: var(--font-regular);
    padding: var(--space-s);
    margin-top: var(--space-s);
    
}


/* Radio Button Label Question Text */
.deuiRadio input[type=radio]+.lbl>de-question-text {
    position: relative;
    top: 0.2em;
}  


/*Radio Button Input */
.deuiRadio input[type=radio]+.lbl.padding-8::before {
    height: 18px;
    width: 18px;
}


/* Radio Button Internal Dot */
.deuiRadio input[type=radio]+.lbl::before {
    border: 1px solid var(--color-neutral-5);
    border-radius: var(--space-base);
    color: var(--color-neutral-0);
    font-family: 'FontAwesome';
    font-size: 0;
    background-color: var(--color-neutral-0);
}


/* Radio Button Internal Dot "On Hover" */
.deuiRadio input[type=radio]:hover+.lbl::before, 
.deuiRadio input[type=radio]+.lbl:hover::before {
    border-color: var(--color-neutral-6);
    height: 18px;
    width: 18px;
}


/* Radio Button When Clicked */
.deuiRadio input[type=radio]:checked+.lbl::before {
    border: 4px solid;
    background-color: var(--color-neutral-0);
    border-color: var(--color-primary);
    outline: var(--border-size-m) solid var(--color-primary);
    height: 12px;
    width: 12px;
} 

/* End of Radio Button related properties */


/* Checkbox (Normal) */
.deuiCheckbox input[type=checkbox]+.lbl::before {
    color: var(--color-neutral-5);
    display: block;
    background-color: var(--color-neutral-0);
    border: var(--border-size-s) solid var(--color-neutral-5);
    border-radius: var(--space-xs);
    height: var(--space-base);
    width: var(--space-base);
}


/* Checkbox when "On Hover" */
.deuiCheckbox input[type=checkbox]:hover+.lbl::before {
    border: var(--border-size-s) solid var(--color-neutral-6);
}


/* Checkbox when "Checked" (selected) */
.deuiCheckbox input[type=checkbox]:checked+.lbl::before {
    border: var(--border-size-s) solid var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-neutral-0);
}


/* Check Box Label Question Text */
.deuiCheckbox input[type=checkbox]+.lbl>de-question-text {
        padding-top: var(--space-xs);
}



/* ===================================================================== */
/*  - Patterns - Tabs                                                    */
/* ===================================================================== */

/* Tab Labels before Starting Quiz */
.deuiSectionNavItem.notStarted {
    color: var(--color-secundary);
    font-size: var(--font-size-h6);
}


/* One answer provided in one of the Tabs (in progress) */
.deuiSectionNavItem.inProgress {
    color: var(--color-G4);
    font-size: var(--font-size-h6);
}


/* Tab Selected where we are currently answering */
.deuiSectionNavItem.activeSection {
    text-decoration: underline;
    font-size: var(--font-size-h6);
}


/* Tabs when "On Focus" or "On Hover" */
.deui a:hover, 
.deui a:focus {
    color: var(--color-G4);
    text-decoration: none;
    border-bottom: var(--border-size-m) solid var(--color-G4);
}


/* Single Question Quiz Next and Prev Arrows on the side */
.deuiNextPrevArrow {
    color: var(--color-primary);
}


/* Icons when "On Hover" (doesn't work on the Dropdown Icon since that one is a background image instead of an icon, unlike the Calendar) */
.MuiFormControl-fullWidth{
    max-height: var(--space-xl);
}
.MuiIconButton-root:hover {
    color: var(--color-primary);
}

/* ===================================================================== */
/*  - Questions - Text and Labels                                        */
/* ===================================================================== */

/*Question Text*/

/* All Containers (for each Question injected through Aura) */
.deui hr {
    margin: var(--space-xs) 0;
    border-top: 1px solid var(--color-G4);
}


/* Question Text */
.deuiQuestText {
    line-height: 1.5;
    box-sizing: border-box;
    padding: 0 0 5px;
    font-size: var(--font-size-base);
    color: var(--color-grey);
    display: block;
    width: 100%;
    font-weight: bold;
    color: var(--color-neutral-10);
}


/* Properties for Question Text and Containers */
.deui 
.deuiQuest 
.deuiQuestText {
    color: var(--color-darkGrey);
    font-size: var(--font-size-base);
    font-weight: var(--font-bold);
    margin-top: var(--space-base);
}

.phone .deui 
.deuiQuest 
.deuiQuestText {
    font-size: var(--font-size-s);
}

/* Properties for Answers Text */
.deui 
.unitizedRespWidget 
.answerPart {
    color: var(--color-neutral-10);
}

/* Title Theme Text -> when new Questions appear taking into consideration the previous selection, ex.: someone selects they have AIDS and new questions popup taking into consideration that selection */
.deuiDisclosureType {
    color: var(--color-primary);
    font-weight: bold;
}


/* Choice Labels */
.deui .deuiParentChoiceContext {
    color: var(--color-secundary);
    font-size: var(--font-size-h6);
}

/* ===================================================================== */
/*  Patterns - Controls                                                     */
/*  Patterns - Controls - DropdownSelect                                   */
/*  Patterns - Controls - Calendar                                       */
/* ===================================================================== */

/* Dropdown Label (over the dropdown box) */
.MuiFormLabel-root {
  font-family: "Regular TQ", Regular;
  color: var(--color-da rkGrey);
}


/* Dropdown Label when Selected */
.MuiFormLabel-root.Mui-focused {
    color: var(--color-primary);
}


/* Dropdown-Combobox */
.MuiInputBase-root {
    color: var(--color-darkGrey);
    background-color: var(--color-lightGrey);
    border: none;
    cursor: text;
    display: inline-flex;
    position: relative;
    font-size: 1rem;
    box-sizing: border-box;
    align-items: center;
    font-family: "Regular TQ", Regular;
    font-weight: normal;
    line-height: 1.1876em;
    letter-spacing: 0.00938em;
    max-height: var(--space-base);
}


/* Dropdown Input Field (attempt of removing the blue highlight with white letters, works after the first selection is done) */
.MuiInputBase-inputAdornedEnd 
.MuiOutlinedInput-inputAdornedEnd 
button[aria-autocomplete="list"]::selection {
    background: transparent;
    color: var(--color-darkGrey);
}


.MuiInputBase-inputAdornedEnd 
.MuiOutlinedInput-inputAdornedEnd 
button[aria-autocomplete="list"]::-moz-selection {
    background: transparent;
    color: var(--color-darkGrey);
}


.MuiInputBase-inputAdornedEnd 
.MuiOutlinedInput-inputAdornedEnd 
button[aria-autocomplete="list"]::-webkit-selection {
    background: transparent;
    color: var(--color-darkGrey);
}


/* Text inside the Dropdown Box */
.MuiAutocomplete-root {
    display: inline-block !important;
    border-width: var(--border-size-s) !important;
    border-radius: var(--border-radius-soft) !important;
    border-color: var(--color-darkGrey) !important;
    border-style: none;
}


/* Dropdown Input Container */
.MuiAutocomplete-inputRoot {
    padding: 0px !important;
    flex-wrap: wrap;
    font-size: 14px !important;
    border: var(--border-size-s) var(--color-lightGrey);
}


/* Dropdown Input Container "On Focus" */
.MuiAutocomplete-root:focus {
    border: var(--border-size-m) solid var(--color-primary) !important;
}


/* Also Dropdown Input Container */
.deuiSelect {
    font-family: "Regular TQ", Regular;
    background-color: var(--color-lightGrey);
    border: var(--border-size-s) solid var(--color-mediumGrey);
    color: var(--color-darkGrey);
    font-size: var(--font-size-s);
    font-weight: var(--font-regular);
}



/* Dropdown Input Container "On Hover" */
 .deuiSelect:hover {
    font-family: "Regular TQ", Regular;
    border: var(--border-size-s) solid var(--color-neutral-6);
    color: var(--color-darkGrey);
    font-size: var(--font-size-s);
    font-weight: var(--font-regular);
    box-shadow: var(--shadow-none);
}


/* Dropdown Input Container "On Focus" */
.deuiSelect:focus {
    background-color: var(--color-neutral-0);
    border: var(--border-size-m) solid var(--color-primary);
    color: var(--color-darkGrey);
    box-shadow: none;
}

/* Dropdown Select inside Resp Widget*/
.deui .dateRespWidget .deuiSelect{
    margin-top: var(--space-base);
    margin-bottom: var(--space-base);
}

/*Inputs inside Choises Dropdown*/
.deui .MuiInputBase-input{
    max-height: var(--space-m);
}

/* Dropdown (options that appear when clicked) */
.MuiAutocomplete-hasPopupIcon .MuiAutocomplete-inputRoot[class*="MuiOutlinedInput-root"], 
.MuiAutocomplete-hasClearIcon .MuiAutocomplete-inputRoot[class*="MuiOutlinedInput-root"] {
    max-height: 40px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}


/* Inner Dropdown */
.MuiAutocomplete-inputRoot[class*="MuiOutlinedInput-root"] 
.MuiAutocomplete-input:first-child {
        max-height: 22px;
}


/* Dropdown Arrow */
.MuiSvgIcon-root {
    fill: currentColor;
    width: 1em;
    height: 1em;
    display: inline-block;
    font-size: 1.5rem;
    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    flex-shrink: 0;
    user-select: none;
    color: transparent;
    content: '\f107';
    font: normal normal normal 24px/1 FontAwesome;
    font-family: 'FontAwesome';
    position: relative;
    right: 0px;
    top: 0px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAOCAYAAAA8E3wEAAAAAXNSR0IArs4c6QAAAgpJREFUOBGlU79LW1EUPvfFPLQOQh06OPgHuKlV82NwqBYsndRSwTUPqVgpJS9DlyyCJFSUYKWR/gVugi46SCXRYNOpmq4OGTq0oKCBp32353vw5PblRtN6lnffOd+Pm7zvCOKy5pJFSTJCQux0PWwfS6fT1+jft1inpfrrYpukHBEkDvK5bNSAaNg0p9jsBwbVn5cf7mvk8z0t1oS258GDEIZHB/tnA9H4ZzacJpKD/UOxWrlULPjE/3lar5M2a6WEoFooZDxdW1o8gY5niMOXw0K1PxKvSClf8OuTvkjs29dSsYLZv1ZiPjnOl8+DZ4SMlx+XM7u+xo0hGuXDQoVNLxk8KoieP47Gd3ARH9zMc+aNPUCu3GRsWBhGKr+S+aTyWLe+EnM2385N4L83w+bg6vuF03pUfWf27btu58op8YUf8W9bX89lrCDKC02w2dX54BUSC6LjOFtWKtURxATfgQHWM0PaoaEprSHWolW2TxCJY/7wPbLmbiDiGr7XwgwYYMEBFxo6vNYQwFwufW6a5rNm1kWNPzjg6szQ+ys0QVDdunCgyqVCUcU1ir+KUc+3GgKIlPYOxb6TpEn+PiPquqjxJ0NM5ZezN/FXTdSzNqUqwD9b83ZSum4Gi8y7NYy++9vdk5LaOP42xz+L3l3VtCGE1HXxhG+JfyPjhqHREdR1uSv+Oj56fwCOW+0Oio0XpwAAAABJRU5ErkJggg==);
    background-repeat: no-repeat;
    background-size: 14px 7px;
    background-position: center;
}


/* Dropdown Arrow change when clicked */
.MuiAutocomplete-popupIndicator {
    transform: rotate(180)deg;
    position: relative;
    bottom: 0px;
    right: 0px;
}

/***************
**  Calendar  **
***************/

/* Calendar Header */
.MuiPickersDatePickerRoot-toolbar {
    display: none;
}


/* Not doing anything at the moment, doesn't matter if it has !important or not */
.MuiPickersToolbar-toolbar {
    background-color: var(--color-primary) !important;
}


/* Calendar Header Title - Not doing anything I believe */
.MuiTypography-subtitle1 {
    font-family: "Regular TQ", Regular;
    font-weight: 400;
    line-height: 0.75;
    letter-spacing: 0.00938em;
}


/* Calendar Header Title */
.MuiTypography-body1 {
    font-size: 1em;
    font-family: 'Regular TQ', Arial;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.00938em;
}


/* Calendar Selected Day */
.MuiPickersDay-daySelected {
    color: var(--color-neutral-0) !important;
    background-color: var(--color-primary) !important;
    border-radius: var(--border-radius-soft);
    border: var(--border-size-none);
}


/* Calendar Current Day */
.MuiPickersDay-current {
    color: var(--color-neutral-10);
    background-color: var(--color-neutral-4);
    border-radius: var(--border-radius-soft);
    border: var(--border-size-none);
}


/* Previous Month Arrow */
.MuiPickersBasePicker-container 
.MuiPickersBasePicker-pickerView 
.MuiPickersCalendarHeader-switchHeader 
button[aria-label="Mês anterior"] {
    transform: rotate(90deg);
}


/* Next Month Arrow */
.MuiPickersBasePicker-container 
.MuiPickersBasePicker-pickerView 
.MuiPickersCalendarHeader-switchHeader 
button[aria-label="Próximo mês"] {
    transform: rotate(-90deg);
}


/* Select Year (if not exact date) */
.MuiPickersBasePicker-container 
.MuiPickersBasePicker-pickerView 
.MuiPickersYearSelection-container 
.MuiPickersYear-root {
    font-family: "Regular TQ", Regular !important;
    color: var(--color-darkGrey);
    background-color: var(--color-neutral-0);
}


/* Select Month (if not exact date) */
.MuiPickersBasePicker-container 
.MuiPickersBasePicker-pickerView 
.MuiPickersMonthSelection-container 
.MuiPickersMonth-root {
    font-family: "Regular TQ", Regular !important;
    color: var(--color-darkGrey);
    background-color: var(--color-neutral-0);
}


/* Selected Year */
.MuiPickersBasePicker-container 
.MuiPickersBasePicker-pickerView 
.MuiPickersYearSelection-container 
.MuiPickersYear-yearSelected {
    color: var(--color-neutral-0) !important;
    background-color: var(--color-primary) !important;
}


/* Selected Month */
.MuiPickersBasePicker-container 
.MuiPickersBasePicker-pickerView 
.MuiPickersMonthSelection-container 
.MuiPickersMonth-monthSelected {
    color: var(--color-neutral-0) !important;
    background-color: var(--color-primary) !important;
}


/* Color and Format from Days when "On Hover" */
button
.MuiButtonBase-root
.MuiIconButton-root
.MuiPickersDay-day:hover {
    color: var(--color-darkgrey);
    border-radius: var(--border-radius-soft);
    border: var(--border-size-none);
}


/* Calendar Icon Color "On Hover" */
button
.MuiButtonBase-root
.MuiIconButton-root:hover {
    color: var(--color-primary);
}

/* ===================================================================== */
/* - HTML Elements                                                         */
/* ===================================================================== */
/*       HTML Elements - Buttons      */

/* Button */
.deuiButton {
    font-family: "Regular TQ", Regular !important;
    background-color: var(--color-white)  !important;
    border: var(--border-size-m) solid var(--color-primary)  !important;
    color: var(--color-primary)  !important;
    height: var(--space-xl)  !important;
    border-radius: var(--border-radius-soft)  !important;
    background: none  !important;
    text-shadow: none  !important;
    font-weight: var(--font-semi-bold)  !important;
    justify-content: center  !important;
    cursor: pointer  !important;
    align-items: center  !important;
    margin: 0  !important;
    padding: var(--space-none) var(--space-base)  !important;
    transition: all 180ms linear  !important;
}


/* Default Button */
.deui .btn {
    display: inline-block;
    /* Tem que ser adicionado em @media query
    margin-top: 3% !important;
    */
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    border: var(--border-size-m) solid var(--color-primary) !important;
    margin: var(--space-s) var(--space-none) !important;
    font-weight: bold !important;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    padding: 6px 12px !important;
    font-size: 14px;
    line-height: 1.42857;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Button "On Hover" */
.deui .btn:hover {
    background-color: var(--color-secondary) !important;
    border: var(--border-size-m) solid var(--color-secondary) !important;
    color: var(--color-white) !important;
    -webkit-filter: brightness(100%); 
    filter: brightness(100%);
    box-shadow: none;
}

/* Button "On Focus" */
.deui .btn:focus {
    background-color: var(--color-white);
    border: var(--border-size-m) solid var(--color-primary);
    color: var(--color-primary);
    height: var(--space-xl);
    border-radius: var(--border-radius-soft);
    box-shadow: 0 0 0 2px #a3daff;
}


/* Navigation Buttons */
.deuiButtonNav {
    text-shadow: none;
    box-shadow: none;
}


/* Buttons present at the bottom of the Interview "On Hover" and "On Focus" */
.deui .btn:hover, 
.deui .btn:focus, 
.deui .btn.focus {
    background-color: var(--color-white);
    border: var(--border-size-m) solid var(--color-primary);
    color: var(--color-primary);
    height: var(--space-xl);
    border-radius: var(--border-radius-soft);
}


/*  */
.deui .btn.active {
    background-color: var(--color-secondary) !important;
    border: var(--border-size-m) solid var(--color-secondary)!important;
    color: var(--color-white)!important;
    -webkit-filter: brightness(100%) !important;
    filter: brightness(100%) !important;
    box-shadow: var(--shadow-s);
}


/*  */
flexbox li {
    text-align: center;
    float: left;
    font-size: 26px;
}


/*  */

.deui 
.deuiWidget 
label {
    font-weight: bold;
    font-size: var(--font-size-base) !important;
    color: var(--color-neutral-10);
}

.phone
.deui 
.deuiWidget 
label {
    font-size: var(--font-size-s) !important;
}

/* Fixed Header Layout Separator */
.layout .header {
    box-shadow: 0 1px 5px 0 rgb(0 175 65 / 10%)
}

#ListRecords {
    height: auto;
    width: 10 col;
}

#ForwardArrow {
    color: var(--color-primary);
    transform: rotate(180deg);
}

#BackArrow {
    color: var(--color-primary);
}

#Questions {
    color: var(--color-darkGrey);
    font-family: "Regular TQ", Regular;
    font-size: var(--font-size-base);
    font-weight: var(--font-bold);
}




/*----------------------------------------------*/
/*   $5 - Layouts 
/*----------------------------------------------*/


/*Layout Contents*/
.validate{
    /*border: var(--border-size-s) solid var(--color-neutral-5);*/
    margin: var(--space-base);
}

/*Rodapé Generali*/
.Rodape{
    background-color: var(--footer-color);
    padding: 10px 30px 10px 30px;
    bottom: 0;
    left: 0;
    z-index: 99;
    position: fixed;
    width: 100%;
    height: var(--footer-height);
    
    
}

.phone .Rodape{
    zoom: 90%;
    height: auto;
}

/*Rodapé rows*/
.deui .row{
    margin-right: -30px;
    margin-left: -30px;
}
/*----------------------------------------------*/
/*   $6 - Page Layout                           */
/*       $6.1 - Page Layout - header            */
/*       $6.2 - Page Layout - Content           */          
/*       $6.3 - WebBlock - Layout               */
/*----------------------------------------------*/
.TopColorBar{
    display: none;
}
.ColorBars.flex-direction-row{
    display: none;
}
.BottomColorBar{
    display: none; 
}
.Header{
    display: none;
}
.HeaderWrapper.HeaderLogo {
    display: none;
}
.Page .MainContent {
    padding: calc(var(--theme-colorBar-horizontal) + var(--theme-header-height-full) + var(--space-none)) var(--space-xs) calc(var(--theme-colorBar-horizontal) + var(--space-none));
}
.SessionData{
    display: none;
}
/*       $6.3 - WebBlock - Layout                */
.WebBlockLayout_Header{
    max-height: max-content;
    width: 100%;
    background-color: var(--color-primary);
    font-size: var(--font-size-h4);
    font-weight: bold;
    color: var(--color-neutral-0);
    text-align: center;
    padding: var(--space-none) var(--space-m);
}

.WebBlockLayout_MainContent{
    width: 100%;
    Height: 100%;
    padding-bottom: 0;
}


/*
/* --- 05/2023 - XUIAFI --- */

/* --- Acoordion not collapse in Mobile--- */

.desktop .accordion-item .accordion-item-icon .fa,
.tablet .accordion-item .accordion-item-icon .fa {
    display: none;
}

.desktop .accordion-item.is--open .accordion-item-header,
.tablet .accordion-item.is--open .accordion-item-header {
    pointer-events: none;
}

/* --- Fix --- */

.deuiReviewSection {
    margin: var(--space-base);
}

.deuiReviewSectionQuestionsArea {
    margin-left: 10px;
    margin-right: 10px;
}
.flag-image {
    display: flex;
    height: 24px;
    width: 40px;
}

.phone .MuiPopover-paper {
    zoom: 80%
}

/* --- Collapse Accordion Aura Quest. --- */

button.iconButton.deuiReviewSectionToggle {
    display: none;
}

span#reviewListControls {
    display: none;
}

/* --- Tooltip Icon Button --- */

.de-fa-info-circle {
    color: var(--color-darkGrey);
    display: block;
}

.de-fa-info-circle:hover {
    color: var(--color-secondary);
}

/* --- Mobile Fix - Input + Dropdown Altura --- */

.phone .deui .unitizedRespWidget {
    display: inline-block;
}

/* --- Mobile Fix - Questionario Geral --- */
.phone .col-xs-8.col-md-10.centered.vertical-center {
    padding: 0;
}

.phone .row.marginTop.marginBottom {
    margin-top: var(--space-s);
    margin-bottom: var(--space-s);
}

.phone .row.marginTop {
    margin-top: var(--space-s);
}

/*Fix custom-footer-popup*/
.custom-footer-popup{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    min-height: var(--space-base);
    padding-bottom: var(--space-base);
}


/* --- 05/2023 - XUIAFI --- */


/*Responsive Context*/
@media (max-width: 767px){
    .MuiAutocomplete-hasPopupIcon .MuiAutocomplete-inputRoot[class*="MuiOutlinedInput-root"]{
        margin-right: -120px;
        border: 1px solid var(--color-neutral-5);
    }
}
@media (max-width: 420px){
    .WebBlockLayout_Header{
        font-size: var(--font-size-h6);
        padding: var(--space-none) var(--space-m);
    }
}

.option-message {
    margin-top: 15px;
    margin-bottom: 10px;
    text-align: center;
    color: #f00;
}

/* override theme */

html, body, form, .Page {
    height: auto;
}

.MainArea_Content {
    min-height: auto;
}

/* --- Accessibility --- */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
    white-space: nowrap;
}