.radio-table {
    width: 100%;
}

.radio-table td {
    text-align: center;
}

.checkbox {
    content: '';
    width: 14px;
    height: 14px;
    display: inline-block;
    outline: 2px solid #000000;
    border: 0 solid #000;
    position: absolute;
    top: 9px;
    left: 0;
    margin-left: 8px;
}

.checkbox:checked {
    content: '';
    width: 14px;
    height: 14px;
    display: inline-block;
    border: 2px solid #fff;
    outline: 2px solid #000000;
    position: absolute;
    top: 9px;
    left: 0;
    background: var(--main-purple-color);
}

.h4-margin {
    margin-top: 2rem;
}

.row-content-margin {
    margin-bottom: 0.5rem;
}

.label-left {
    flex: 100%;
    align-self: center;
    text-align: start;
}

.label-right {
    flex: 100%;
    align-self: center;
    text-align: end;
}

.card.card-free {
    margin-top: 1rem;
    box-shadow: 6px 6px 6px #d6d6d6;
    color: var(--main-darkblue-color);
}

.card.card-occupied {
    margin-top: 1rem;
    /*box-shadow: 6px 6px 6px #d6d6d6;*/
    color: var(--main-darkblue-color);
    background-color: #c4c4c4;
    pointer-events: none;
}

.card:hover {
    color: var(--main-darkblue-color);
}

.card-text {
    font-size: large;
    font-weight: bold;
}

@keyframes charging-free {
    0% {
        background-color: #00E8B3;
    }
    50% {
        background-color: #009574;
    }
    100% {
        background-color: #00E8B3;
    }
}

@keyframes charging-occupied {
    0% {
        background-color: #FF196A;
    }
    50% {
        background-color: #76242F;
    }
    100% {
        background-color: #FF196A;
    }
}

.charger-free-indicator {
    color: var(--main-coral-color);
    animation: charging-free 4s infinite linear;
    width: 100%;
    height: 8px;
}

.charger-occupied-indicator {
    background-color: red;
    animation: charging-occupied 4s infinite linear;
    width: 100%;
    height: 8px;
}

.loader {
    position: absolute;
    top: 50%;
    left: 50%
}

.loader i {
    color: var(--main-coral-color);
}

.input-text {
    font-size: large !important;
    color: var(--main-darkblue-color) !important;
    text-align: center !important;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

div#loading {
    border: 16px solid #ffffff;
    border-top: 16px solid #4c2189;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@media (max-width: 768px) {
    .mobile-column {
        text-align: center;
        flex-direction: column;
    }
}