﻿.own-checkbox {
    width: 1.2em;
    height: 1.2em;
    background-color: white;
    lighting-color: var(--highlight-color);
}

.own-checkbox:checked {
    background-color: var(--highlight-color);
    border-color: #ffffff;
}

.own-checkbox-big {
    width: 1.5em;
    height: 1.5em;
    background-color: white;
    lighting-color: var(--highlight-color);
}

.own-checkbox-big:checked {
    background-color: var(--highlight-color);
    border-color: #ffffff;
}

.form-switch {
    padding-left: 3.8em;
}

.own-switch {
    font-size: 1.5em;
    background-color: white;
    lighting-color: var(--highlight-color);
}

.own-switch:checked {
    background-color: var(--highlight-color);
    border-color: #ffffff;
}

.own-switch-small {
    margin: 0;
    font-size: 1.2em;
    background-color: white;
    lighting-color: var(--highlight-color);
}

.own-switch-small:checked {
    background-color: var(--highlight-color);
    border-color: #ffffff;
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--highlight-color);
    border-color: var(--highlight-color);
}

.form-select:focus{
    box-shadow: 0 0 0 0.1rem var(--highlight-color);
    border-color: var(--highlight-color);
}

.form-control{
}

.form-control-error{
    animation: form-control-error-keyframes 2.0s forwards;
}

@keyframes form-control-error-keyframes {
    0%   { border-color: var(--highlight-color); box-shadow: 0 0 0 0.05em var(--highlight-color);}
    10%   { border-color: #c9ced8; box-shadow: 0 0 0 0.1em var(--white);}
    20%   { border-color: var(--highlight-color); box-shadow: 0 0 0 0.05em var(--highlight-color);}
    100%   { border-color: #c9ced8; box-shadow: 0 0 0 0.1em var(--white);}
}

.input-group-text{
    height: 100%;
    background-color: var(--white);
    cursor: help;
}

.input-group-text.disabled{
    height: 2.5em;
    background-color: var(--white);
    border: 0;
}

.input-group-button{
    height: 2.5em;
    width: 2.5em;
    background-color: var(--dark-grey) !important;
    align-content: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid var(--dark-grey);
    color: var(--white);
}

.input-group-button.disabled{
    background-color: var(--white) !important;
    cursor: default;
    color: var(--dark-grey);
    border: 1px solid var(--white);
}

.input-group-button.disabled:hover{
    background-color: var(--white);
    border: 1px solid var(--white);
}

.input-group-button span{
    font-size: 1.5em;
}

.input-group-button:hover {
    background-color: var(--mid-grey);
    border: 1px solid var(--mid-grey);
}

.form-control:focus{
    box-shadow: 0 0 0 0.1rem var(--highlight-color);
    border-color: var(--highlight-color);
}

.form-control:disabled{
    box-shadow: none;
    border: none;
    background-color: var(--white); !important;
    padding: 0 0 0 0;
}

.form-control.disabled{
    box-shadow: none;
    border: none;
    background-color: var(--white); !important;
    padding: 0 0 0 0;
}

[inactive] {
    background-color: var(--dark-white);
    pointer-events: none;
    user-select: none;
    cursor: not-allowed;
}

.form-select:disabled{
    box-shadow: none;
    border: none;
    background-color: var(--white);
    padding: 0.5em 0 0;
    background-image: none;
}

.form-select:disabled:hover{
    box-shadow: none;
    border: none;
    background-color: var(--white);
}

.form-control:disabled:hover {
    box-shadow: none;
    border: none;
    background-color: var(--white);
}

.form-check-input:hover {
    border-color: var(--highlight-color);
}

.form-select:hover{
    border-color: var(--highlight-color);
    lighting-color: var(--highlight-color);
}

.form-select option:hover{
    background-color: var(--highlight-color);
}

.form-select option:focus{
    background-color: var(--highlight-color);
}

.edit-form:disabled{
    background-color: var(--mid-white);
    padding: 0.5em;
    box-shadow: none;
    border: none;
}

.edit-form:disabled:hover {
    background-color: var(--mid-white);
}

select option:focus{
    background-color: var(--highlight-color);
    lighting-color: var(--highlight-color);
}

.form-control:hover{
    border-color: var(--highlight-color);
}

.form-control-locked
{
    border-radius: 0.4em;
    border: 0.1em solid #c9ced8;
    height: 2.5em;
    width: 100%;
    background-color: var(--mid-white);
    align-items: center;
    display: flex;
    justify-content: flex-end;
}

.form-control-border
{
    border-radius: 0.4em;
    border: 0.1em solid #c9ced8 !important;
}

.input-group{
    max-height: 2.5em;
}

.input-group.disabled{
    border: none;
}

.form-control-locked span
{
    font-size: 1.8em;
    margin-right: 0.2em;
    color: var(--light-grey);
    cursor: help;
}

.stripe-input{
    border-radius: 0.4em;
    border: 0.1em solid #c9ced8;
    height: 2.5em;
    margin:0;
    vertical-align: center;
    align-items: center;
    align-content: center;
    padding-left: 0.5em;
}

.stripe-input:focus{

    box-shadow: 0 0 0 0.1rem var(--highlight-color);
    border-color: var(--highlight-color);
}

.stripe-input:hover{
    border-color: var(--highlight-color);
}

.icon-input{
    border-radius: 0.4em;
    border: 0.1em solid #c9ced8;
    height: 2.5em;
    width: 2.5em;
    text-align: center;
    align-content: center;
}

.icon-input:hover{
    border-color: var(--highlight-color);
    cursor: pointer;
}

.icon-input span{
    margin-top: 0.2em;
}