/* how the input is set up */
.input-data{ /* container class for text inputs */
    height: 4em;
}
.custom-widget{ /* container class for all custom widgets */
    border-bottom: 1px solid var(--ks-black);
    display:inline-block;
    outline: none;
    width:100%;
}

/* 
    TODO-1949: Þarf að setja custom hide gæja fyrir checkbo-ið eða nota annann 
        gæti notað visually hidden en þetta allt þarf að gerast með styles eða
        nei you know what, setja þetta frekar bara í hidden-class á widget-ið, bæta því í non-widget attrs og lesgo 
*/

.custom-widget > input:-webkit-autofill
{
    background-color: red !important;
}

.custom-widget.codeInput-container,
.custom-widget.textarea-data,
.custom-widget.toggle-widget,
.custom-widget.dropdown-widget,
.custom-widget.widget-radio-container,
.custom-widget.widget-checkbox,
.custom-widget.inc-dec-widget
{
    border:none;
    height:30px
}
.custom-widget select.dropdown-option {
    margin-top: 1.9rem;
}

.custom-widget .inc-dec-label {
    font-size:14px;
    color:var(--ks-grey);
}

/* removing bootstrap logo for invalid */
.form-control.is-invalid{
    background-image: none;
    padding-right: 0.5rem;
}

.input-data input{
    width: 100%;
    height: 100%;
    color: inherit;
    padding-top: 1.25em;
    border: none;
    outline: none;
}

/* less size/margins for widgets */
.slim-widget div {
    height: inherit !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;

}

/* Label placement & transformations */
.content-data{ /* Label itself */
    width:100%;
    left:0;
    top:0;
    margin-top:-2.3rem;
    pointer-events: none;
    transition: all 0.3s ease;
}
.input-data input:focus ~ .content-data,
.codeInput-container.active > .content-data,
.content-data > textarea:focus,
.toggle-widget > .label-data .custom-label,
.input-data input:not(:focus):not(:placeholder-shown) ~ .content-data,
.textarea-data .content-data > * ~ textarea:not(:placeholder-shown){ /* When label-data is outside input field */
    transform: translateY(-80%);
    font-size: 14px;
    color: #5fa8d3;
}
.custom-widget.input-group input{ /* Important to display the suffix text */
    flex: 1;
}
.input-data > input:disabled {
    background-color: inherit;
}

/* removing autofill background color */
input:-webkit-autofill,
input:-webkit-autofill:focus {
    transition: background-color 600000s 0s, color 600000s 0s;
}
input[data-autocompleted] {
    background-color: transparent !important;
}

.user-select-none {
    user-select:none;
}

/* mortgages step*/
#show-more-button,
#show-less-button,
.show-more-toggler {
    width:10rem;
    margin:auto;
    cursor:pointer;
    line-height: 25px;
    color: var(--eC-text-secondary);
    background-color: transparent;
    border:none;
}

#show-more-button svg,
#show-more-button svg,
.show-more-toggler svg {
    color: var(--eC-text-secondary);
}

/* For error messages */
.error-field { /* Labels intended to display error text */
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 10px;
    color:var(--ks-error-red);
    line-height: 1;
}

.error-message input + .label-data,/* add :not(.active) next to container if not supposed to be blue out of focus*/
.error-message.codeInput-container .label-data { /* Change input label to red on errors */ 
    color:red!important;
}
.error-message.widget-radio-container
{
    border-bottom: 1px solid red !important;
}

.error-message.custom-widget,
.error-message.custom-widget div.inputs input,
.codeInput-container.error-message:before{ /* Change input borders to red on error */
    border-color: red !important;
}
/* Do not show placeholder when label is applied over input */
::placeholder{
    color: transparent;
}
/* When placeholder is shown */
.hasPlaceholder:focus::placeholder 
{
    color: #595f6e;
}
/* form in front and back */
.input-group.input-data{
    display: flex;
    white-space: nowrap;
    overflow: hidden;
    text-overflow:clip ;
}
/* For the suffix text */
.input-data.custom-widget .input-group-text{
    border: none;
    color:inherit;
    background-color: transparent;
    white-space: nowrap;
    overflow: hidden;
    text-overflow:clip;
    padding: 0px;
    padding-top: 1.25em;
    margin: 1px;
}
.input-data.error-message .input-group-text {
    color: red !important;
}

/* Textarea */ 
.custom-widget.textarea-data { /* To apply label correctly */
    width: 100%;
    position: relative;
    overflow:  hidden;
}
.custom-widget.textarea-data label{ /* To apply label correctly */
    top:0;
}
.custom-widget.textarea-data textarea{ /* Rework look on textarea */
    width: 100%;
    color: inherit;
    margin-top: 25px;
    padding: 0.5em;
    border: 1px solid;
    border-color: inherit;
    border-radius: 0.5em;
    outline: none;
}

/* + - input */ 
.num-increment { /* container for the input and buttons */
    height: 50px;
    width: 100%;
    display: flex;
}
.num-increment button { /* plus and minus buttons */
    width: 10%;
    background-color: transparent;
    border: none;
}
.num-increment input {
    width: 80%;
    outline: none;
    border: none;
    text-align: center;
    color: inherit;
}

/* code input */
.codeInput-border{ /* Smaller inputs */
    border: none;
    border-color: inherit;
    border-bottom: 1px solid !important;
}
.codeInput-container { /* Container for all (Container for smaller input = .inputs) */
    max-width: 100%;
    position: relative;
}
.codeInput-container:before { /* Bottom border for container when unfocused */
    content: '';
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    border-bottom: 1px solid;
    border-color: inherit;
    transition: opacity 0.3s ease;
}
.codeInput-container .inputs { /* Container for smaller inputs */
    display: flex;
}
.codeInput-container .inputs input.codeInput-border { /* Smaller inputs */
    -webkit-appearance: none;
    padding: 0;
    min-width: 0;
    margin-right: 8px;
    text-align: center;
    outline: none;
}
.codeInput-container.active:before { /* Disable big border when focusing on smaller inputs */
    opacity: 0;
}

.checkbox-widget > label
{
    height: auto;
}

.checkbox-widget
{
    transition: all 2s ease;
}

.checkbox-widget .widget-checkbox
{
    margin-right: 8px;
    margin-top: 4px;
    height: 20px;
    width: 20px;
}

.checkbox-widget .widget-checkbox:checked
{
    accent-color: var(--eC-primary);
}

.custom-widget.dropdown-widget select
{
    border: 1px solid var(--ks-lightgrey);
    padding: 0.5rem;
    width: 100%;
    border-radius: 4px;
}

.input-data > .widget-radio-container input
{
    margin-top: 3px;
    width: 20px;
    height: 20px;
}

.input-data > .widget-radio-container label
{
    margin-left: 1rem;
}

.input-data > .widget-radio-container label:not(:last-of-type)
{
    margin-right: 2rem;
}

.input-data > .widget-radio-container input:checked
{
    accent-color: var(--eC-primary);
}

#asset_status_fields .checkbox-widget > div.d-flex
{
    margin: auto auto auto 1em;
}
.dropdown-option {
    width: 100%;
    outline: none;
    text-align: left;
    border: none;
}

/* INCREMENT DECREMENT widget */

.inc-dec-container-outer {
    display: flex;
    position: absolute;
    right: 1rem;
    top: 0.3rem;
}

.inc-dec-container-inner {
    display: flex;
    flex-direction:column;
}

.minus-dec-button {
    cursor:pointer;
}

.inc-dec-js input:focus~.field-placeholder,
.inc-dec-js input:not([disabled]):not(:placeholder-shown)~.field-placeholder
{
    -webkit-transform: scale(.8) translateY(-1.8rem);
    transform: scale(.8) translateY(-1.8rem);
    transform-origin: left;
}

.inc-dec-js {
    position: relative;
    margin-bottom: 0.1rem;
}

.inc-dec-js input{
    border: 1px solid var(--ks-lightgrey);
    padding: 0.5rem;
    border-radius: 4px;
    width: 100%;
}

.inc-dec-js input:focus {
    border: 1px solid var(--eC-primary);
    outline:none;
    box-shadow:none;
}

.inc-dec-js input:focus-visible {
    outline: none;
}

.inc-dec-js .field-placeholder{
    position: absolute;
    bottom: 0.8rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: var(--ks-grey);
    left: 0.2rem;
    padding: 0 2%;
    -webkit-transition: transform 300ms cubic-bezier(0.1,0,0.1,1);
    transition: transform 300ms cubic-bezier(0.1,0,0.1,1);
    z-index: 1;
    text-align: left;
    white-space: nowrap;
    user-select: none;
    cursor:text;
}        

/* around placeholder */
.inc-dec-js .field-placeholder span{
    background: var(--ks-white);
    padding: 0rem 0.5rem;
    margin-left: 0rem;
}


/* text when selected */
.inc-dec-js input:not([disabled]):focus~.field-placeholder
{
    color: var(--eC-primary);
}

/* for custom CHECKBOX widget */
.checkbox-label {
    user-select: none;
}

.custom-checkbox-label {
    display: flex;
    border-radius: 2px;
    max-width: 1.5rem;
    min-width: 1.5rem;
    height: 1.5rem;
    box-shadow: none;
    border: 1px solid var(--ks-lightgrey);
    
}
.custom-input-checkbox {
    display: none;
}

.custom-input-checkbox:checked + .custom-checkbox-label {
    background-color: var(--eC-primary);
    border: 1px solid var(--eC-primary);
    box-shadow: none;
}

.custom-input-checkbox:disabled + .custom-checkbox-label {
    background-color: inherit;
    border: 1px solid var(--ks-black);
    box-shadow: none;
}

.custom-input-checkbox + .custom-checkbox-label .checkbox-check {
    display:none;
}

.custom-input-checkbox:checked + .custom-checkbox-label .checkbox-check {
    display:flex;
}

.custom-input-checkbox .custom-checkbox-label {
    visibility: hidden;
    content:none;
}

.custom-checkbox-label {
    display: flex;
    justify-content: center;
    align-content: center;
    margin: auto;
}

.checkbox-check {
    display:flex;
    justify-content: center;
    align-items: center;
    width:100%;
    height:100%;
    margin:auto;
}

.checkbox-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width:100%;
}

.checkbox-label {
    display:flex;
    padding-left:1rem;
    color : var(--ks-black-2);
}

/* step 1 */
.show-phone-label {
    font-size:12px;
}

/* Toggle button */

.toggle-switch {
    display: flex;
    align-items: flex-start;
    width: 34px;
    height: 20px;
    cursor: pointer;
    top:0px;
}


/* Toggle button ends */

/* Font for radio buttons labels */ 
.radio-labels {
    display:flex;
    flex-direction: row;
    align-items: center;
    color: var(--ks-black-2);
    font-size: 12px;
    user-select: none;
}

/* for error fields */
.error-container {
    color:var(--ks-error-red);
    pointer-events: none;
    top:2.1rem;
    margin-bottom: 0.5rem;
}

.checkbox-error-container {
    color:var(--ks-error-red);
    pointer-events: none;
    bottom:1.5rem;
}

.error-container-text-area {
    color: var(--ks-error-red);
    pointer-events: none;
}

#errorDescription {
    color:var(--ks-error-red);
}

.error-floating-container
{
    color: var(--ks-error-red);
    position: absolute;
    top: 3.5rem;
}

.error-container .percent-error {
    white-space: nowrap;
}

/* step 1*/
.formset-error-container {
    bottom:0;
    left:0;
    height:0;
}

.formset-error-container > .error-field {
    height:0;
    color:var(--ks-error-red);
}

/* custom suffix look */

.input-custom-suffix-text, .input-custom-suffix-icon {
    display: flex;
    position: absolute;
    right: 10px;
    top: 0.6rem;
    color:var(--ks-lightgrey);
    visibility: visible;
    font-size: 1rem;
    line-height: 1.5;
    cursor:default;
}
.input-custom-suffix-icon {
    height:18px;
    width:18px;
}

/* GMail style inputs */
.field-wrapper{
    position: relative;
    margin-bottom: 0.1rem;
}

.field-wrapper > input{
    border: 1px solid var(--ks-lightgrey);
    padding: 0.5rem;
    border-radius: 4px;
    width: 100%;
}

.field-wrapper > input:focus {
    border: 1px solid var(--eC-primary);
    outline:none;
    box-shadow:none;
}

.field-wrapper > input:focus-visible {
    outline: none;
}

.field-wrapper .field-placeholder{
    position: absolute;
    bottom: 0.3rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: var(--ks-grey);
    left: 0rem;
    padding: 0 2%;
    -webkit-transition: transform 300ms cubic-bezier(0.1,0,0.1,1);
    transition: transform 300ms cubic-bezier(0.1,0,0.1,1);
    z-index: 1;
    text-align: left;
    white-space: nowrap;
    user-select: none;
    cursor:text;
}        

/* around placeholder */
.field-wrapper .field-placeholder span{
    background: var(--ks-white);
    padding: 0rem 0.5rem;
    margin-left: 0rem;
}

.field-placeholder,
.ta-floating-label
{
    pointer-events: none;
    font-size: 0.9rem;
    white-space: nowrap;
}

/* text when selected */
.field-wrapper input:not([disabled]):focus~.field-placeholder
{
    color: var(--eC-primary);
}

/* disabled */

.field-wrapper input:disabled:not([value]),
.field-wrapper input:disabled[value=""]
{
    color:transparent;
    background-color: inherit;
    cursor:default;
    user-select: none;
}

.field-wrapper input:disabled~.field-placeholder span
{
    background-color: inherit;
    cursor:default;
    user-select: none;
}


.field-wrapper input:focus~.field-placeholder,
.field-wrapper input:not([type='datetime-local']):not([type='date']):not([disabled]):not(:placeholder-shown)~.field-placeholder,
.field-wrapper input:disabled[value]:not([value=""]):not([type='datetime-local']):not([type='date']):not(:placeholder-shown)~.field-placeholder
{
    -webkit-transform: scale(.8) translateY(-1.8rem);
    transform: scale(.8) translateY(-1.8rem);
    transform-origin: left;
}

/* The lines below hide and show the custom suffix */
/* if the field has value suffix is shown */
/* if the field is focused the suffix is shown */
.suffix-custom.hasValue > input + .input-custom-suffix-text {
    color: var(--ks-grey);
}

.suffix-custom > input:not(focus) + .input-custom-suffix-text{
    color: transparent;
}

.suffix-custom > input:focus + .input-custom-suffix-text {
    color: var(--ks-grey);
}

/* Text area styles are below */

textarea:focus~.ta-floating-label,
textarea:not(:placeholder-shown)~.ta-floating-label,
input:not(:focus):valid~.ta-floating-label {
    left: 1rem;
    padding: 0rem 0.5rem;
    color: var(--eC-primary);
    
    -webkit-transform: scale(.8) translateY(-1.8rem);
    transform: scale(.8) translateY(-1.8rem);
    transform-origin: left;
}

.text-area-wrapper textarea {
    width: 100%;
    height: 7rem;
    resize: none;
    padding: 10px 20px 0 20px;
    font-size: 1rem;
    color: var(--ks-black);
}

.text-area-wrapper textarea:focus-visible {
    border: 1px solid var(--eC-primary);
    border-radius: 4px;
    outline: none;
}

.text-area-wrapper textarea {
    border: 1px solid var(--ks-lightgrey);
    border-radius: 4px;
    outline: none;
    box-shadow: none;
}

.ta-floating-label {
    position: absolute;
    pointer-events: none;
    left: 20px;
    top: 10px;
    height: 2rem;
    transition: 0.2s ease all;
    color: var(--ks-grey);
    background-color: var(--ks-white);
}

.ta-floating-label:focus {
    position: absolute;
    pointer-events: none;
    left: 20px;
    top: 10px;
    height: 2rem;
    transition: 0.2s ease all;
    font-size: 120%;
}

.text-area-container {
    position: relative;
}

/* disabled */
.text-area-container textarea:disabled
{
    color:transparent;
    background-color: inherit;
    cursor:default;
    user-select: none;
}

.text-area-container textarea:disabled~label
{
    background-color: inherit;
    cursor:default;
}


/* Selection (drop-down) field below */
.selection-field-wrapper{
    position: relative;
    margin-bottom: 0rem;
}

.selection-field-wrapper select{
    border: 1px solid var(--ks-lightgrey);
    padding: 0.50rem;
    border-radius: 4px;
    width: 100%;
    font-size: 1rem;
    padding-right: 2rem
}

.selection-field-wrapper select:focus {
    border: 1px solid var(--eC-primary);
    outline: none;
    box-shadow: none;
}

.selection-field-wrapper .field-placeholder {
    position: absolute;
    bottom: 0.3rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: var(--ks-white);
    color: var(--ks-grey);
    left: 0.5rem;
    padding: 0 2%;
    -webkit-transition: transform 300ms cubic-bezier(0.1,0,0.1,1);
    transition: transform 300ms cubic-bezier(0.1,0,0.1,1);
    z-index: 1;
    text-align: left;
    white-space: nowrap;
    cursor:pointer;
    pointer-events: none;
}        

/* around placeholder */
.selection-field-wrapper .field-placeholder span{
    background: var(--ks-white);
    padding: 0px 0.5rem;
    margin-left: 0px;
}

/* text when selected */
.selection-field-wrapper select:not([disabled]):focus~.field-placeholder
{
    color:var(--eC-primary);
}

.selection-field-wrapper.hasValue select~ .field-placeholder
{
	-webkit-transform: scale(.8) translateY(-1.8rem);
    transform: scale(.8) translateY(-1.8rem);
    transform-origin: left;
}


/* disabled */
.selection-field-wrapper select:disabled
{
    cursor:default;
    user-select: none;
}

.selection-field-wrapper select:disabled~.field-placeholder
{
    background-color: inherit;
    cursor:default;
}

.selection-field-wrapper svg {
    z-index: 3;
    position:absolute;
    top:30%;
    right:1rem;
    background-color: var(--ks-white);
    color: var(--ks-black-2);
    pointer-events: none;
}
.selection-field-wrapper select:disabled~ svg
{
    background-color: inherit;
}
/* date fields*/

.field-wrapper input:focus~.field-placeholder,
.field-wrapper.hasValue input:not([type='text']):is([type='date']):not([disabled])~.field-placeholder,
.field-wrapper.hasValue input:not([type='text']):is([type='datetime-local']):not([disabled])~.field-placeholder
{
	-webkit-transform: scale(.8) translateY(-1.8rem);
    transform: scale(.8) translateY(-1.8rem);
    transform-origin: left;
}

.date-not-seen {
    background-color:var(--ks-white);
    color:transparent;
}

.date-seen {
    color:var(--ks-black);
}

/* other fixed fees h4 input */
.h4-title-and-remove-icon {
    display:flex;
    justify-content: space-between;
    width:100%;
    margin:auto;
}

/* modal height other fees */
.of-modal {
    height: 5rem;
}

/* housing association */

.form-floating {
    outline: none;
    box-shadow: none;
}

.form-floating input:focus {
    border: 1px solid var(--eC-primary);
    outline:none;
    box-shadow:none;
}

/* fees and revenue * optional p */ 
.custom-optional {
    user-select: none;
    line-height: 1;
    font-size: 12px;
    font-weight: 300;
}

.custom-kyc {
    position:absolute;
    margin-top:115px;
    user-select: none;
}

/* because h4 is inside the button */
#open-sig-modal:hover h4 {
    color:var(--ks-black) !important;
}
/* sign eye */
.sign-eye-card {
    min-width: 70px;
}
@media (min-width: 768px) {
    /* Size: MD*/
    .field-placeholder,
    .ta-floating-label
    {
        font-size: 1rem;
    }
}

.login-widget{
    border: 1px solid var(--ks-lightgrey);
    border-radius: 4px;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    margin-bottom: 2px;
}
 
.login-widget > input{
    font-size: 24px;
    letter-spacing: 2px;
    height: 100%;
    width: 100%;
    border: none;
    background-color: transparent;
    text-align: center;
    color: #505253;
}
.login-widget > input::placeholder{
    font-size: 20px;
    color:#999C9F;
}

.login-widget> input:focus::placeholder {
    color:white;
}

.login-widget:focus-within {
    border: 1px solid var(--eC-primary);
    outline:none;
    box-shadow:none;
}

.login-widget > input:focus-visible {
    outline: none;
}
/* data-onhover-highlight */
.ec-highlight {
    box-shadow: 0px 0px 3px 2px var(--eC-primary-lighter);
}