/* Container style for better appearance */
.form-check {
    margin-bottom: 20px;
}

/* Style the range input */
input[type="range"] {
    -webkit-appearance: none; /* Remove default appearance */
    width: 100%;
    height: 8px; /* Adjust height */
    border-radius: 5px;
    background: #ddd; /* Default background color */
    outline: none;
    padding: 0;
    margin: 0;
    position: relative;
}

/* Thumb (the slider handle) */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #007bff; /* Blue color for thumb */
    cursor: pointer;
}

/* Track color from min to current value */
input[type="range"]::-webkit-slider-runnable-track {
    background: linear-gradient(to right, #ddd 0%, #ddd calc(var(--val) * 1%), #007bff calc(var(--val) * 1%), #007bff 100%);
    height: 8px;
    border-radius: 5px;
}

/* Firefox */
input[type="range"]::-moz-range-track {
    background: linear-gradient(to right, #ddd 0%, #ddd calc(var(--val) * 1%), #007bff calc(var(--val) * 1%), #007bff 100%);
    height: 8px;
    border-radius: 5px;
}

/* Internet Explorer */
input[type="range"]::-ms-track {
    background: transparent; /* Not supported, but avoid style issues */
    border-color: transparent;
}

/* Add a small number or tooltip near the slider */
input[type="range"] + output {
    font-size: 12px;
    display: inline-block;
    margin-left: 10px;
    color: #666;
}

.loading {
    cursor: wait;
}

[v-cloak] { display: none; }
.border {border-color: #ededed !important;}
@media (min-width: 1400px) { .mycontainer{padding: 77px 51px !important;} }

.plans-childs > div {
    flex: 1;
    text-align: start; /* Centering the content */
}

.plans-childs > div:first-child {
    flex: 1.8;
    text-align: start;
}