/* INPUT styles */
input, textarea, select, button, .input, .button{
    font-size: var(--input-font-size);
    font-family: inherit;
    border: 1px solid var(--text-color);
    background-color: transparent;
    outline: 2px solid transparent;
    padding: calc(2* var(--extra-small-gap));
    border-radius: var(--inputs-border-radius);
    appearance: none;
    line-height: 1.4;
    color: var(--text-color);
    font-weight: 400;
}
select:not(.auto-width),input[type=text]:not(.auto-width),input[type=email]:not(.auto-width),input[type=number]:not(.auto-width),input[type=password]:not(.auto-width),input[type=tel]:not(.auto-width),input[type=date]:not(.auto-width),input[type=url]:not(.auto-width){
    width:100%;
}
input[type=date]{
    min-height: calc(4* var(--extra-small-gap) + 1.4em);
}
input[type=checkbox],input[type=radiobutton],input[type=radio]{
    appearance: auto;
}
.button {
    padding: calc(2* var(--extra-small-gap)) calc(4* var(--extra-small-gap));
    line-height: 1.4;
    min-width: 80px;
    text-align: center;
    min-height: calc(4* var(--extra-small-gap) + 1.4em);
}
.solid-button{
    background-color: var(--text-color);
    color: var(--background-color);
    cursor: pointer;
    text-decoration: none;
}
.solid-button:hover,.solid-button:focus-visible{
    background-color: var(--text-accent-color);
}
.outline-button{
    cursor: pointer;
    text-decoration: none;
    color: var(--text-color);
}

.button-end{
    align-self: flex-end;
    padding-left: var(--small-padding);
    padding-right: var(--small-padding);
}

select{background-image:
    linear-gradient(45deg, transparent 50%, var(--text-color) 50%),
    linear-gradient(135deg, var(--text-color) 50%, transparent 50%);
  background-position:
    calc(100% - 15px) calc(50% - 1px ),
    calc(100% - 10px) calc(50% - 1px );
  background-size:
    5px 5px,
    5px 5px;
  background-repeat: no-repeat;
    padding-right: calc(2* var(--extra-small-gap) + 20px);
    /* overflow: hidden; */
}
label{white-space: nowrap;}

/* FORMS styles */
.default-form{
    display: flex;
    flex-direction: column;
    gap: var(--small-gap)
}
.default-form.flex-medium-gap{gap: var(--medium-gap);}
.default-form.flex-large-gap{gap: var(--large-gap);}

.update-form label{
    flex-basis: 130px;
    min-width: 130px;
}
.update-form .flex-column>label{
    flex-basis: auto;
    min-width: initial;
}
@media(max-width: 768px){
    .update-form .flex-mobile-column>label{
        flex-basis: auto;
        min-width: initial;
    }
}
.update-form input[type="text"]{
    flex-grow: 1;
}

.export-form{
    flex-direction: row;
}
@media(max-width: 768px){
    .export-form{
        flex-direction: column;
    }
}

/* Disable input fields */

input[disabled],select[disabled],textarea[disabled] {
    border-color: rgba(0,0,0, 0.1);
    color: rgba(0, 0, 0, 0.4);
}

/* Form input fields groups */
.form-group>*{
    border-radius: 0px;
}
.form-group>*:first-child{
    border-top-left-radius: var(--inputs-border-radius);
    border-bottom-left-radius: var(--inputs-border-radius);
}
.form-group>*:last-child{
    border-top-right-radius: var(--inputs-border-radius);
    border-bottom-right-radius: var(--inputs-border-radius);
}
.form-group>*:not(:first-child){
    border-left: 0px
}

/* Platejan select person */
platejan-select-person{
    position: relative;
}
platejan-select-person input{
    width:100%;
}
platejan-select-person .dropdown:not(:empty) {
    border: 1px solid;
    border-radius: var(--inputs-border-radius);
    position: absolute;
    background-color: var(--background-color);
    width: 100%;
    margin-top: 2px;
    z-index: 2;
    max-height: 200px;
    max-width: 100%;
    overflow: scroll
    
}
platejan-select-person .dropdown span{
    cursor: pointer;
    padding: calc(var(--extra-small-padding) / 2) var(--extra-small-padding);
    display: block;
}
platejan-select-person .dropdown span:hover{
    background-color: rgba(0,0,0,0.2)
}