﻿@import url("/DublinTheme/Theme.DublinTheme.css?2128");

/*
    How to generate a theme for your company: 
    
        1 - Go to http://labs.outsystems.net/ThemeCustomizer/GenerateDublin.aspx
        2 - Copy the generated CSS
        3 - Paste it here

*/

/*------------------------------------*\
             Import Font
\*------------------------------------*/

/*@import url("https://use.typekit.net/iuu0inb.css");*/

/*@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');*/

@font-face {
    font-family: "Inter";
    src: url(/AppForms/css/fonts/Inter-VariableFont_opsz,wght.ttf) ;
    src: url('/AppForms/css/fonts/inter-variablefont_opszwght.woff') format('woff'),
         url('/AppForms/css/fonts/inter-variablefont_opszwght.woff2') format('woff2');
    font-optical-sizing: auto;
}
.inter-regular {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'ArizonaFlareMedium';
    src: url('/AppForms/css/fonts/ABCArizonaFlare-Medium.otf');
    src: url('/AppForms/css/fonts/ABCArizonaFlare-Medium.otf') format('opentype'),
        url('/AppForms/css/fonts/ABCArizonaFlare-Medium.woff') format('woff'),
        url('/AppForms/css/fonts/ABCArizonaFlare-Medium.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Open-Sans';
    src: url('/SilkUIFonts/fonts/OpenSans-Bold.eot');
    src: url('/SilkUIFonts/fonts/OpenSans-Bold.eot?#iefix') format('embedded-opentype'),
         
         url('/SilkUIFonts/fonts/OpenSans-Bold.ttf') format('truetype'),
         url('/SilkUIFonts/fonts/OpenSans-Bold.svg#Open-Sans') format('svg');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Open-Sans';
    src: url('/SilkUIFonts/fonts/OpenSans-Italic.eot');
    src: url('/SilkUIFonts/fonts/OpenSans-Italic.eot?#iefix') format('embedded-opentype'),
         
         url('/SilkUIFonts/fonts/OpenSans-Italic.ttf') format('truetype'),
         url('/SilkUIFonts/fonts/OpenSans-Italic.svg#Open-Sans') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Open-Sans';
    src: url('/SilkUIFonts/fonts/OpenSans-Semibold.eot');
    src: url('/SilkUIFonts/fonts/OpenSans-Semibold.eot?#iefix') format('embedded-opentype'),
         
         url('/SilkUIFonts/fonts/OpenSans-Semibold.ttf') format('truetype'),
         url('/SilkUIFonts/fonts/OpenSans-Semibold.svg#Open-Sans') format('svg');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Oswald';
    src: url('/SilkUIFonts/fonts/Oswald-Regular.eot');
    src: url('/SilkUIFonts/fonts/Oswald-Regular.eot?#iefix') format('embedded-opentype'),
         
         url('/SilkUIFonts/fonts/Oswald-Regular.ttf') format('truetype'),
         url('/SilkUIFonts/fonts/Oswald-Regular.svg#oswaldregular') format('svg');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Oswald';
    src: url('/SilkUIFonts/fonts/Oswald-Bold.eot');
    src: url('/SilkUIFonts/fonts/Oswald-Bold.eot?#iefix') format('embedded-opentype'),
         url('/SilkUIFonts/fonts/Oswald-Bold.ttf') format('truetype'),
         url('/SilkUIFonts/fonts/Oswald-Bold.svg#oswaldbold') format('svg');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Oswald';
    src: url('/SilkUIFonts/fonts/Oswald-Light.eot');
    src: url('/SilkUIFonts/fonts/Oswald-Light.eot?#iefix') format('embedded-opentype'),
         
         url('/SilkUIFonts/fonts/Oswald-Light.ttf') format('truetype'),
         url('/SilkUIFonts/fonts/Oswald-Light.svg#oswaldlight') format('svg');
    font-weight: 300;
    font-style: normal;
}

:root {
    --color-error: #91000C;
    --main-bg-color: #EDEAE2;
    --color-primary: #0D2239;
    --color-secondary: #8CC5FE;
    --color-primary-hover: #0a1a2b;
    --color-secondary-hover: #8CC5FE;
    --color-link: #205f9E;
    --color-link-hover: #205f9E;
}

/*------------------------------------*\
             Font Definition
\*------------------------------------*/

html, body, a, select, form, fieldset, table, tr, td, img, input, button, select, textarea, optgroup, option {
    font-feature-settings: 'lnum' 1;
    font-family: "Inter", arial, helvetica, sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #0D2239;
}

.TileIcon_text, .TileNumber_text, .TileIconText_label, .Heading1, .Heading2, .Heading3, .Heading4, .Header_title a, .EditableTable thead td, .TableRecords_Header {
    font-feature-settings: 'lnum' 1;
    font-family: "Inter", arial, helvetica, sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #0D2239;
    }
.Heading1{
    font-family: "ArizonaFlareMedium", arial, helvetica, sans-serif;
    font-size: 36px;
    color: #0D2239;
}
.Heading4{
    font-size: 14px;
}
/*------------------------------------*\
              Font Classes
\*------------------------------------*/

/* Font Oswald classes */

.Oswald_Regular {
    font-family: 'Oswald';
    font-weight: 400;
}

.Oswald_Bold {
    font-family: 'Oswald';
    font-weight: 700;
}

.Oswald_Light {
    font-family: 'Oswald';
    font-weight: 300;
}

/* Font OpenSans classes */

.OpenSans_Regular {
    font-family:  'Open-Sans', sans-serif;
    font-weight: 400;
}

.OpenSans_Bold {
    font-family:  'Open-Sans', sans-serif;
    font-weight: 700;
}

.OpenSans_Italic {
    font-family:  'Open-Sans', sans-serif;
    font-style: italic;
}

.OpenSans_Semibold {
    font-family:  'Open-Sans', sans-serif;
    font-weight: 600;
}

a, a:link, a:visited{
    font-size: 100%;
    text-decoration: none;
    color: var(--color-link);
}
a:hover{
    text-decoration: underline;
    color: var(--color-link-hover);
}
.Invisible{
    display:none;
}

.Text_Error {
    color: var(--color-error);
}

.ToRight{
    float: right;
}

.AnnualIncome_Table_header{
    background-color: #c0c0c0;
}

.AnnualIncome_Table table, td, th {
    border: 1px solid #c0c0c0;
    background-color: #FFFFFF;
}

.AnnualIncome_Table  td{
    padding: 5px;
}

.THeader_Pad{
    padding: 5px;
}

.Disclaimer_Notice{
    padding:5px;
    background-color: #c0c0c0;
}

.Direct_Debit_Disclaimer{
    border-top: 1px dotted red;
    margin-top: 10px;
    color: #7f8c8d;
    background-image: url(../../MDU_Online_App_Lib/img/Direct_Debit.png?2381);
    background-repeat: no-repeat;
    background-position: right 5px;
}


.LineSeperator{
    border-top: 2px solid #AABAFF;
    margin-top: 10px;
    height: 10px;
}

.PleaseCallUs{
    margin: 15px;
    font-weight: bold;
}

.PleaseCallUs_Dental{
    margin-top: 10px;
    font-weight: bold;
}

.PleaseCallUs_Wrapper{
    padding: 15px;
}

.TitleActions{
    font-size: 12px;
    font-weight: normal;
}

.CustomMandatory{
    color: #BF1601;
    position: absolute;
    padding: 0px 5px 5px 3px;
    font-size: 12px;
    font-weight: normal
}

.CustomMandatoryWrapper{
    display: inline;
}

.Button {
    background-color: var(--color-secondary);
    color:  #183553;
    font-weight: bold;
}
.Button:hover {
    background-color: var(--color-secondary);
    color:  #183553;
    font-weight: bold;
    text-decoration: underline;
}
.Button.Is_Default {
    background-color: var(--color-secondary);
    color:  #183553;
}
.Button.Icon.WithArrow {
    background-color: var(--color-secondary);
    color:  #183553;
    font-weight: bold;
    padding-right: 9px;
}
.Button.Icon.WithArrow:hover {
    background-color: var(--color-secondary);
    color:  #183553;
    font-weight: bold;
    padding-right: 9px;
    text-decoration: underline;
}
/* Remove arrows from number input fields **************************/
input [type='number']{
    -moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance:none;
}

.WarningText{
    color: var(--color-error);
    font-weight: bold;
}

html, body {
    background-color: #FFFFFF;
     padding: 15px;
     font-family: "Inter", arial, helvetica, sans-serif;
     font-size: 16px;     
}


.poundDiv{
    margin-left: -0;
}

.Logo_Progress{
    background-color: #ebebeb;
    height: 10px;
}

.Logo_Progress_Achieved{
    background-color: var(--color-secondary);
    height: 10px;
}

.Logo{
    border-right: 1px solid #dddddd;
    padding: 15px;
    height: 70px;
}

.HeaderStatus{
    border-right: 1px solid #dddddd;
    padding: 15px;
    height: 70px;
    width:65%;
}

@media screen and (max-width:1200px){   
    .HeaderStep_Label{
        display: none;
    }
    
    .HeaderStepDiv{
        text-align: center;
    }

    .HeaderStep_Label_Deactivated{
        display: none;
    }

}

.HeaderStep_Nr{
    height: 27px;
    width: 27px;
    background-color: #0D2239;
    color:#ffffff;
    text-align: center;
    padding: 5px;
    border-radius: 15px;
    
}

.HeaderStep_Label{
    color: #0D2239;
    font-size: 18px;
    font-weight: bold;
}

.HeaderStep_Nr_Deactivated{
    height: 27px;
    width: 27px;
    background-color: transparent;
    color:#999999;
    text-align: center;
    padding: 5px;
    border-radius: 15px;
    border: 1px solid #999999;
    
}

.HeaderStep_Label_Deactivated{
    color: rgb(102, 102, 102);
    font-size: 18px;
}

.Header_Assistance{
    padding: 15px;
    height: 70px;
    width: 17.5%;
}

.Header_Assistance_Nr{
    height: 27px;
    width: 27px;
    background-color: #0D2239;
    color:#ffffff;
    text-align: center;
    padding: 5px;
    border-radius: 15px;
    border: 1px solid #0D2239;
}

.Header_Assistance_Label{
    color: #0D2239;
    font-size: 16px;
    font-weight: bold;
}

.phone .Header_Assistance_Nr{
    padding: 10px;
    border-radius: 20px;
    height: 40px;
    width: 40px;
    background-color: white;
    font-size: 28px;
    color: #0D2239;
}

.AssistanceInfo{
    background-color: #ebebeb;
    padding: 30px 15px;
    color: #0D2239;
    z-index: 3;
    position: absolute;
    top: 80px;
    right: 0px;
    font-size: 18px;
    line-height: 18px;
    font-weight: 500;
}

.phone .AssistanceInfo{
    width: 100%;
}
.desktop .AssistanceInfo{
    width: 400px;
}

.AssistanceInfo_Label{
    font-size: 14px;
    font-weight: bold;
}

.HeaderStepDiv{
    margin-left: 0px;
    width: 25%;
}
.Header_UserActions{
    height: 27px;
    width: 27px;
    background-color: transparent;
    color:#0D2239;
    text-align: center;
    padding: 5px;
    font-size: 18px;
}

.Button_Register, a.Button_Register{
    line-height: 16px;
    opacity: 1;
    background-color: var(--color-secondary);
    background-image: none;
    color: #0D2239;
    font-weight: 600;
    border-width: 0px;
    background-size: auto;
    background-repeat: repeat;
    background-position: center center;
    font-size: 14px;
    text-align: center;
    width: 153px;
    height: 45px;
    cursor: pointer;
}
.tablet .Button_Register{
    width: 45%;
}
.phone .Button_Register{
    width: 100%;
    margin-left: 0;
}

.phone .Mobile_Spacing{
    margin-top: 10px;
}

.Button_Register:disabled{
    border-color: #dddddd;
    background-color: var(--color-secondary);
    color: #0D2239;
    cursor: pointer;
}

.Button_Add{
    opacity: 1;
    border-color: var(--color-secondary);
    background-color: #ffffff;
    background-image: none;
    color: var(--color-secondary);
    padding: 6px 10px;
    border-width: 2px;
    border-style: solid;
    background-size: auto;
    background-repeat: repeat;
    background-position: center center;
    font-size: 16px;
    font-style: normal;
    text-align: center;
    cursor: pointer;
    height: 40px;
}

.desktop .Button_Add{
    width: 153px;
}
.tablet .Button_Add{
    width: 45%;
}
.phone .Button_Add{
    width: 100%;
    max-width: 45%;
}
.BigButton{
    width: 300px;
}
.desktop .BigButton{
    width: 300px;
}

.BigButton:disabled{
    cursor: pointer;
}

.AcademicDetail{
    background-color: var(--main-bg-color);
    padding: 10px;
    position: relative;
    color: #0D2239;
    font-size: 16px;
    width: 49%
}

.AcademicDetail_Action{
    position: absolute;
    bottom: 10px;
    right: 15px;
}

.Register_Actions{
    border-top: 1px solid #dddddd;
    padding-top: 25px;
    margin-top: 20px;
}

.Form{
}

.desktop .Form{
    width: 60%;
}

.tablet .Form{
    width: 100%;
}

.phone .Form{
    width: 100%;
}

.WorkCircumstanceRoleTitle{
    padding: 25px;
    background-color: #c8c8c8;
    color: #0D2239;
    font-weight: bold;
    font-size: 20px;
    text-align: center
}

.Inputs{
    width: 58px;
    height: 59px !Important;
    margin-top: 10px;
    font-size: 12px !Important;
}

.Inputs:focus{
    width: 58px;
    height: 59px !Important;
    margin-top: 10px;
    font-size: 12px !Important;
    border: 1px solid #1abc9c !Important;
}

.General_Input{
    color: var(--color-primary);
    width: 300px; 
}

.Keeptogether {
    page-break-inside:avoid;
}

.BreakBefore {
    page-break-before:always;   
}

.BreakAfter {
    page-break-after:always;   
}

.Form input.SmartInput_Changed.ReadOnly + a.SmartInput_Undo, 
.Form textarea.SmartInput_Changed.ReadOnly + a.SmartInput_Undo, 
.Form select.SmartInput_Changed.ReadOnly + a.SmartInput_Undo {
    display: none !important;
}


.Text_Note {
    
    color: #0D2239;
    font-size: 16px;
    font-weight: 400;
}


/**Button Yes/no **/
.YesNoDiv .ButtonGroup_button.Button:first-child{
    border-radius: 4px;
    opacity: 1;
    border-color: #0D2239;
    background-color: #fff;
    background-image: none;
    color: #0D2239;
    font-weight: 600;
    padding: 12px;
    border-width: 1px;
    border-style: solid;
    background-size: auto;
    background-repeat: repeat;
    background-position: center center;
    font-size: 14px;
    line-height: 18px;
    font-style: normal;
    text-align: center;
    width: 180px;
    height: 45px;
    text-decoration: none;
}

.YesNoDiv .ButtonGroup_button.Button:last-child{
    margin-left: 20px;
    line-height: 20px;
    border-radius: 4px;
    opacity: 1;
    border-color: #0D2239;
    background-color: #ffffff;
    background-image: none;
    color: #0D2239;
    font-weight: 600;
    padding: 12px;
    border-width: 1px;
    border-style: solid;
    background-size: auto;
    background-repeat: repeat;
    background-position: center center;
    font-size: 14px;
    font-style: normal;
    text-align: center;
    width: 180px;
    height: 45px;
    text-decoration: none;
}

.YesNoDiv .ButtonGroup_button.Button.active{
    background: #0D2239;
    color: white;
}

.YesNoDiv .ButtonGroup_button *{
    margin-top: 5px;
    color: white;
}

.phone .YesNoDiv .ButtonGroup .ButtonGroup_button.Button{
    width: 48%;
    height: 45px;
    border-bottom-width: 1px;
}
.phone .YesNoDiv .ButtonGroup .ButtonGroup_button.Button:last-child{
    width: 48%;
    margin-left: 4%;
    height: 45px;
}

/**Start Responsive customization**/

.tablet .TitleActions{
    display: none;
}
.phone .TitleActions{
    display: none;
}

.phone .General_Input{
    Width: 100%;
}

.phone .AssistanceInfo{
    width: 100%;
}

.phone .AcademicDetail{
    width: 100%;
}

.phone .AcademicDetail_Action{
    position: absolute;
    bottom: 10px;
    right: 25px;
}

.phone .divWrapper{
    width: 100%;
}

.tablet .divWrapper{
    width: 70%;
}

.desktop .divWrapper{
    width: 70%;
}

.phone .Logo Img {
    max-width: 125px;
}

.phone .Logo{
    border-width: 0px;
}

.tablet .Logo{
    border-width: 0px;
}

.locationList_item{
    width: 50%;
}

.phone .locationList_item{
    width: 100%;
}

.InputWithInfo{
    width: 50%;
}

.phone .InputWithInfo{
    width: 80%;
}

.phone .HeaderStatus{
    display: none;
}

.tablet .HeaderStatus{
    display: none;
}

.phone .Header_Assistance{
    float: right;
    margin-right: 120px;
}

.tablet .Header_Assistance{
    float: right;
    margin-right: 80px;
    
}
.tablet .HeaderStepDiv{
 margin-left: 20px;
}
.phone.Title.Heading1 {
    display: none;
}
.tablet.Title.Heading1 {
    display: none;
}
/**End Responsive customization**/

.TableVerticalAlign .Cell2{
    color: #0D2239;
    font-size: 18px;
}

.Form input.ReadOnly, .Form textarea.ReadOnly, .Form select.ReadOnly {
    color: #0D2239;
}
input[type="text"].Not_Valid, input[type="password"].Not_Valid, input[type="datetime"].Not_Valid, input[type="datetime-local"].Not_Valid, input[type="date"].Not_Valid, input[type="month"].Not_Valid, input[type="time"].Not_Valid, input[type="week"].Not_Valid, input[type="number"].Not_Valid, input[type="email"].Not_Valid, input[type="url"].Not_Valid, input[type="search"].Not_Valid, input[type="tel"].Not_Valid, input[type="color"].Not_Valid{
    border: 1px solid var(--color-error);
}
.Form input.Not_Valid, .Form textarea.Not_Valid, .Form select.Not_Valid, input.Not_Valid, textarea.Not_Valid, select.Not_Valid {
    border: 1px solid var(--color-error);
}
Form input.Not_Valid.ReadOnly, .Form textarea.Not_Valid.ReadOnly, .Form select.Not_Valid.ReadOnly {
    border: 1px solid var(--color-error);
}
select.Not_Valid:focus, input.Not_Valid:focus, textarea.Not_Valid:focus {
    border: 1px solid var(--color-error);
}
    
.ValidationMessage {
    color: var(--color-error);
    font-size: 18px;
    font-weight: 700;
    font-family: "Inter", arial, helvetica, sans-serif;
}

.Form label {
    color: #0D2239;
    font-size: 18px;
}
.Grey_Question{
    color: #0D2239;
    font-size: 18px;
}

.HelpTextDiv{
    color: #0D2239;
    font-size: 18px;
}

.TableRecords_Header{   
    background-color: var(--main-bg-color);
    text-transform: none;
    color: #0D2239;
}
.TableRecords tr:nth-child(even) {
    background-color: var(--main-bg-color);
}

.TableRecords{
    color: #0D2239;
}

.TableRecords > tbody > tr > td a {
    color: #0D2239;
}

.question label{
    color: #0D2239;
    font-size: 18px;
}

.Footer{
height:66px;
padding: 0px;
}

.Button_AddGrey{
    opacity: 1;
    background-color: rgb(230, 230, 230);
    background-image: none;
    color: #0D2239;
    padding: 12px;
    border-width: 0px;
    border-style: solid;
    background-size: auto;
    background-repeat: repeat;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    text-align: center;    
    height: 45px;
    cursor:pointer;
    width: 153px;
}

.desktop .Button_AddGrey{
    
}
.tablet .Button_AddGrey{
    width: 45%;
}
.phone .Button_AddGrey{
    width: 100%;
}

.Button_AddGrey:disabled{
    border-color: rgb(23, 54, 93);
    background-color: rgb(230, 230, 230);
    color: #0D2239;
    cursor: pointer;
}

.CommentsDiv{
    font-size: 14px;
    background-color: white;
    padding: 10px;
    border: 1px solid #ccc;
    box-shadow: inset 0 2px 3px 0 rgba(0,0,0,.06);
    color: #666;
    border-radius: 4px;
}

.QuestionDiv{
    font-size: 18px;
    color: #0D2239;    
}

.UseExistingLink{
        font-size: 16px;
}

/*** remove spinner ****/
/* For Firefox */
input[type='number'] {
    -moz-appearance:textfield;
}
/* Webkit browsers like Safari and Chrome */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
    
}

.Text_Note ul { 
    list-style-position: outside;
    padding-left: 1.5em;
}

textarea {
  resize: none;
}

.tooltip_style .tooltipster-content {    
    font-size: 16px;
    font-family: "Inter", arial, helvetica, sans-serif;
    font-weight: 500;
    background-color: #0D2239;
}

.Feedback_AjaxWait .Loader {
    -webkit-animation: loader 1.3s infinite linear;
    animation: loader 1.3s infinite linear;
    border-radius: 50%;
    font-size: 4px;
    height: 1em;
    margin-bottom: 20px;
    position: relative;
    text-indent: -9999em;
    -webkit-transform: translateX(10);
        -ms-transform: translateX(10);
            transform: translateX(10);
    width: 1em;
    left: 15px;
}

textarea, select, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .Form input.ReadOnly, .Form textarea.ReadOnly, .Form select.ReadOnly{
    font-size: 16px;
    color: #0D2239;
}
/*** Generated classes from Style Editor in OutSystems 10 ***/
[data-style-key="7rJCQIy_dEyLQkqIq2gS6A"] { text-align:right; }
[data-style-key="GVabdpNJcEag9P2L6jthyw"] { text-align:right; }
[data-style-key="JEnGVEJfB0OtiK6GlG6KpQ"] { text-align:right; }
[data-style-key="1UypEBdpGkWPu8AHu0CQvw"] { text-align:left; }
[data-style-key="XgDF15ewREiR963SWmIggA"] { text-align:left; }
[data-style-key="qiLKwzpWO0GANda+ayiogA"] { text-align:left; }
[data-style-key="y+sCxpUMeEiV2FEDdvi_hw"] { text-align:left; }
[data-style-key="jDKmFKBRCUubeuyF6kk5dg"] { text-align:left; }
[data-style-key="XNCn44vrnEuB3iYxyF+3bA"] { text-align:left; }
[data-style-key="9B8mNpKDA0mZZYLWh3DF0w"] { text-align:left; }
/*** Generated classes from Style Editor in OutSystems 10 ***/
.LabelExp {
    color: #0D2239;
    font-size: 18px;
    height: 47px;
    padding: 5px 0px 0px 0px;
    width: Fill;
}