/*  FormInput */

.FormInput { font-size: 16px; line-height: 24px; }

.SubmitButton button { width: 100%; }
.SubmitButton .FormValidation { display: none; color: #f00; font-weight: bold; margin-top: 4px; }
.SubmitButton.Invalid .FormValidation { display: block; }

.InfoBox { background: transparent url('./img/help-circle-grey.svg') no-repeat center center; background-size: contain; width: 24px; height: 24px; display: inline-block; margin-bottom: -6px; cursor: pointer; }
.InfoBox .Container { background: #fff; width: 512px; max-width: calc(100% - 64px); max-height: calc(100% - 64px); transform: translate(-50%, -50%); position: absolute; left: 50%; top: 50%; box-sizing: border-box; padding: 16px; padding-top: 48px; }
.InfoBox .Close { position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; background:transparent url('./img/cross.svg') no-repeat center center; background-size: contain; cursor: pointer; }
.InfoBox .Background { display: none; cursor: default; }
.InfoBox.Expanded .Background { display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 30; }


.TextInput, .NewPasswordInput, .IntegerInput, .NativeDropdownInput, .DateInput select { width: 100%; padding: 0 12px; max-width: unset; box-sizing: border-box; background-color: #ddd; }
.TextInput, .NewPasswordInput, .IntegerInput, .DateInput select { height: 40px; border-style: none; border-radius: 6px; }
textarea.TextInput { padding-top: 8px; padding-bottom: 6px; }


.NativeDropdownInput { padding-right: 32px; }

.CheckListInput li { position: relative; box-sizing: border-box; padding-left: 44px; margin-bottom: 4px; }
.CheckListInput label { cursor: pointer; display: block; min-height: 40px; padding: 8px 12px; box-sizing: border-box; border-radius: 6px; background-color: #ddd; }
.CheckListInput input { opacity: 0; position: absolute; top: 0; left: 0; }
.CheckListInput label:before { position: absolute; top: 0; left: 0; content: ''; display: block; width: 40px; height: 100%; background-color: #ddd; border-radius: 6px; box-sizing: border-box; }
.CheckListInput .Checked label:before { background: #dbec7c url('./img/check.svg') no-repeat center center; background-size: 20px auto; }
.CheckListInput .Checked.Disabled label:before { background-image: url('./img/grey_check.svg'); }
.CheckListInput .Checked label { background: #dbec7c; }

.DropdownInput { width: 100%; min-width: 50px; cursor: pointer; position: relative; }
.DropdownInput .Display, .DateInput select { width: 100%; padding: 8px 12px; padding-right: 44px; background: #ddd url('./img/drop.svg') no-repeat center right 12px; background-size: 12px; min-height: 40px; box-sizing: border-box; border-radius: 6px; }
.DropdownInput ul { overflow-y: scroll; max-height: 420px; display: none; border: #ccc solid 1px; box-shadow: rgba(0, 0, 0, 0.4) 0px 4px 12px; margin: 0 !important; position: absolute; top: 44px; left: 0; background-color: #ddd; border-radius: 6px; width: 100%; z-index: 10; box-sizing: border-box; }
.DropdownInput label { display: block; cursor: pointer; min-height: 40px; padding: 8px 12px; box-sizing: border-box;  }
.DropdownInput label:hover { background-color: #eee; }
.DropdownInput .Checked label { background-color: #dbec7c; } 
.DropdownInput input { display: none; } 
.DropdownInput.Expanded ul { display: block; }
.DropdownInput.Expanded .Display { background-color: #343434; background-image: url('./img/pull.svg'); color: #fff; } 

.InvalidValue .CheckListInput label { background-color: #ffe6e6; }
.InvalidValue .CheckListInput label:before { background-color: #ffe6e6; }

.DateInput { width: 100%; min-width: 300px; }
.DateInput select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding: 0px 12px; }
.DateInput td { padding-right: 8px; }
.DateInput td:last-child { padding-right: 0; }

.TwoColumn { width: 100%; }
.TwoColumn .FormField { position: relative; min-height: 40px; margin-bottom: 8px; }
.TwoColumn .FormFieldName, .TwoColumn .FormFieldValidation { display: block; font-weight: bold; width: calc(100% - 496px); line-height: 20px;  }
.TwoColumn .FormFieldName { padding-top: 9px; }
.TwoColumn .FormFieldValidation { padding-bottom: 4px; }
.TwoColumn .FormFieldValue { position: absolute; right: 0; top: 0; width: 480px; }

.FormField.FullWidth { position: static; }
.FormField.FullWidth .FormFieldName, .FormField.FullWidth .FormFieldValidation { width: 100%; }
.FormField.FullWidth .FormFieldValue { position: static; width: 100%; }

.InvalidValue .FormFieldValidation, .InvalidValue.ValidationMessageOutput { color: #f00; font-weight: bold; }
.InvalidValue .TextInput, .InvalidValue .NewPasswordInput, .InvalidValue .IntegerInput, .InvalidValue .NativeDropdownInput, .InvalidValue .DropdownInput .Display, .InvalidValue .DateInput select { background-color: #ffe6e6 }
.InvalidValue .DropdownInput.Expanded .Display { color: #f00; }

.Warning { color: #ff9700; font-weight: bold; display: none; }

/* ColumnCheckTableInput */
.ColumnCheckTableInput { width: 100%; border-collapse: collapse; }
.ColumnCheckTableInput th, .ColumnCheckTableInput td { border: white 4px solid; }
.ColumnCheckTableInput input { position: absolute; top: 0; left: 0; visibility: hidden; }
.ColumnCheckTableInput label { cursor: pointer; min-height: 40px; box-sizing: border-box; padding: 8px 12px; display: block; width: 100%; height: 100%; background-color: #ddd; border-radius: 6px; }
.ColumnCheckTableInput label > div { display: none; }
.ColumnCheckTableInput .Checked label { background: #dbec7c url('./img/check.svg') no-repeat center center; background-size: 20px auto; }
.ColumnCheckTableInput tr:first-child th:first-child label { background-color: transparent; }
.ColumnCheckTableInput tr:first-child th { text-align: center; vertical-align: bottom; }
.ColumnCheckTableInput th:first-child { text-align: right; }
.ColumnCheckTableInput th label { background-color: #fff; }
.ColumnCheckTableInput th { vertical-align: bottom; padding: 8px 12px; box-sizing: border-box; }
.ColumnCheckTableInput tr.InvalidValue label { background-color: #ffe6e6; }

/* Responsive */
.ColumnCheckTableInput.List, .ColumnCheckTableInput.List tbody, .ColumnCheckTableInput.List tr, .ColumnCheckTableInput.List th, .ColumnCheckTableInput.List td { display: block; width: 100%; }
.ColumnCheckTableInput.List th:first-child { vertical-align: top; text-align: left; }
.ColumnCheckTableInput.List tr:first-child { display: none; }
.ColumnCheckTableInput.List label > div { display: block; }
.ColumnCheckTableInput.List th, .ColumnCheckTableInput.List td { border-style: none; }

.ColumnCheckTableInput.List th { padding: 0; margin-bottom: 4px; }
.ColumnCheckTableInput.List th > div { position: relative; cursor: pointer; min-height: 40px; box-sizing: border-box; padding: 8px 12px; padding-right: 32px; display: block; width: 100%; height: 100%; border-radius: 6px; }
.ColumnCheckTableInput.List th > div::before { content: ''; position: absolute; top: 0; left: 0; display: block; width: 40px; height: 100%; }
.ColumnCheckTableInput.List .Collapsed td:not(.Checked) { display: none; }

.ColumnCheckTableInput.List tr { margin-bottom: 32px; }
.ColumnCheckTableInput.List td { position: relative; box-sizing: border-box; padding-left: 76px; margin-bottom: 4px; }
.ColumnCheckTableInput.List tr:not(.Collapsed) td { padding-right: 32px; }
.ColumnCheckTableInput.List label:before { position: absolute; top: 0; left: 32px; content: ''; display: block; width: 40px; height: 100%; background-color: #ddd; border-radius: 6px; }
.ColumnCheckTableInput.List .Checked label:before { background: #dbec7c url('./img/check.svg') no-repeat center center; background-size: 20px auto; }
.ColumnCheckTableInput.List .Checked label { background: #dbec7c; }

.ColumnCheckTableInput.List tr:not(.Collapsed) th div { padding-left: 12px; background: #343434 url('./img/pull.svg') no-repeat center right 12px; background-size: 12px; color: #fff; }
.ColumnCheckTableInput.List .Collapsed { border-radius: 6px; box-sizing: border-box; padding-bottom: 4px; padding-right: 8px; margin-bottom: 4px; padding-left: 12px; background: #ddd url('./img/drop.svg') no-repeat center right 12px; background-size: 12px; }
.ColumnCheckTableInput.List .Collapsed th { margin-bottom: 0; }
.ColumnCheckTableInput.List .Collapsed th div { padding-left: 0; padding-right: 24px; }
.ColumnCheckTableInput.List .Collapsed .Checked { padding-left: 0px; display: inline-block; width: auto; }
.ColumnCheckTableInput.List .Collapsed .Checked label { position: relative; padding: 1px 10px; padding-left: 12px; min-height: 26px; font-size: 80%; margin-top: -8px; }
.ColumnCheckTableInput.List .Collapsed .Checked label::before { content: unset; left: 0px; background-size: 12px auto; width: 32px; }

/* Responsive */
@media screen and (max-width: 650px) 
{
    .TwoColumn .FormField { position: static; }
    .TwoColumn .FormFieldName, .TwoColumn .FormFieldValidation { width: 100%; }
    .TwoColumn .FormFieldValue { position: static; width: 100%; }
}

.NewPasswordInput.Strength0 { background-color: #f22 !important; }
.NewPasswordInput.Strength1 { background-color: #f82 !important; }
.NewPasswordInput.Strength2 { background-color: #fe0 !important; }
.NewPasswordInput.Strength3 { background-color: #0d0 !important; }
.NewPasswordInput.Strength4 { background-color: #f8f !important; }
.NewPasswordInput.InvalidValue { background-color: #ffe6e6; }

.FormField.Strength0 .FormFieldValidation { color: #f22; }
.FormField.Strength1 .FormFieldValidation { color: #f82; }
.FormField.Strength2 .FormFieldValidation { color: #fb0; }
.FormField.Strength3 .FormFieldValidation { color: #0b0; }
.FormField.Strength4 .FormFieldValidation { color: #f8f; }

.FormField.Strength0.InvalidValue .FormFieldValidation,
.FormField.Strength1.InvalidValue .FormFieldValidation,
.FormField.Strength2.InvalidValue .FormFieldValidation,
.FormField.Strength3.InvalidValue .FormFieldValidation,
.FormField.Strength4.InvalidValue .FormFieldValidation { color: #f00; }




/* Questionnaire fixes */

.questionnaire .FormInput { max-width: 1024px; }
.questionnaire input[type=text].TextInput { height: 40px; border-style: none; border-radius: 6px; padding: 0 12px; }