/* FORM */

form {
    border-radius: 5px;
}

form > label,
form > input,
form > select,
form > textarea,
form > div.input-icon,
form > div.select-icon,
form > div.textarea-icon,
form > button {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

form label {
    margin: 4px auto 8px;
    font-size: 16px;
    font-weight: 600;
    padding-left: 12px;
}

form input {
    border-radius: 5px;
    outline: transparent;
    border: 2px solid transparent;
    box-shadow: rgba(0, 0, 0, 0.05) 2px 2px 6px 4px;
    width: 100%;
    padding: 4px 10px;
}

form .input-icon {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 8px;
}

form .input-icon input,
form .input-icon img {
    display: flex;
    display: flex;
}

form .input-icon img {
    height: 20px;
}

form .icon-right input {order: 1}
form .icon-right img {order: 2}

form .icon-left input {order: 2}
form .icon-left img {order: 1}

form button {
    outline: transparent;
    border: 2px solid transparent;
    border-radius: 5px;
    padding: 4px 12px;
}

form button[type="button"] {

}

form button[type="button"].icon {

}

form button[type="button"].icon-right {

}

form button[type="button"].icon-left {

}

form button[type="submit"] {
    background-color: black;
    color: white;
    font-weight: bold;
}

form button[type="submit"] .loading-gif {
    height: 24px;
    width: 24px;
}

form button[type="submit"]:hover .loading-gif .loader-bar {
    border-top-color: #d7286e;
}

form button[type="submit"]:hover {
    background-color: white;
    color: black;
    border-color: black;
}

form button[type="submit"].button-icon {
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 8px;
}

form button[type="submit"].button-icon img {
    height: 20px;
}

form button[type="submit"].button-icon span,
form button[type="submit"].button-icon img {
    display: flex;
    display: flex;
}

form button[type="submit"].icon-right span {order: 1;}
form button[type="submit"].icon-right img {order: 2;}

form button[type="submit"].icon-left span {order: 2;}
form button[type="submit"].icon-left img {order: 1;}

/* BUTTON */

button[type="submit"] .loading-gif {
    height: 100%;
    width: auto;
    display: none;
}

button[type="submit"].loading span {
    display: none;
}

button[type="submit"].loading .loading-gif {
    display: block;
}

/* USER-CELL */

.user-cell[data-for_user] {transition: background-color 0.2s ease-in-out 0s;}

/* SWITCH-LOGIN */

[id^="switch_login-"] .loading-gif {
    width: calc(100% - 16px);
    height: auto;
    aspect-ratio: 1;
    display: none;
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 8px;
}

[id^="switch_login-"].loading img {
    opacity: 0.05;
    filter: blur(2px);
}

[id^="switch_login-"].loading .loading-gif {
    display: block;
}

/* SWITCH-ACCOUNT */

[id^="switch_account-"] .loading-gif {
    width: calc(100% - 16px);
    height: auto;
    aspect-ratio: 1;
    display: none;
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 8px;
}

[id^="switch_account-"].loading img {
    opacity: 0.05;
    filter: blur(2px);
}

[id^="switch_account-"].loading .loading-gif {
    display: block;
}

/* MASK */

[id$="-mask"] .loading-gif,
[class*="-mask"] .loading-gif {
    height: 80%;
    width: auto;
    max-height: 96px;
    aspect-ratio: 1 / 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);

}