html, body {
    height: 100%;
    width: 100%
}

td {
    padding: 0 !important;
    padding-bottom: 6px;
}

.card {
    border-radius: 0.5rem !important;
}

.bg-700 {
    background-color: #162044 !important;
}

.bg-800 {
    background-color: #081131 !important;
}

.bg-750 {
    background-color: #091235 !important;
}

.bg-image {
    background-image: linear-gradient(#070E2720, #070E2799 600px, #070E27 850px, #070E27), url(/images/pexels-shvets-production-7194221.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    max-height: 850px;
}


.bg-image-dark {
    background-image: linear-gradient(#070E2780, #070E27CC 500px, #070E27 850px, #070E27), url(/images/pexels-wyxina-tresse-19622203.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    max-height: 850px;
}

.badge.badge-outlined {
    background-color: transparent !important;
}

.range-control {
    border: 0;
    background: #162044!important;
    color: white!important;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 24px;
    width: 24px;
    border-radius: 12px;
    background: #0059f7;
    cursor: pointer;
    
}

/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
    height: 24px;
    width: 24px;
    border-radius: 12px;
    background: #0059f7;
    cursor: pointer;
}

/* All the same stuff for IE */
input[type=range]::-ms-thumb {
    height: 24px;
    width: 24px;
    border-radius: 12px;
    background: #0059f7;
    cursor: pointer;
}


    .badge.badge-outlined.bg-primary {
        border: 1px solid #0059F7;
        padding: 6px 12px
    }


    .badge.badge-outlined.bg-secondary {
        /*color: #7E8BB6;*/
        border: 1px solid transparent;
        padding: 6px 12px
    }

.circle-progress {
    --percentage: var(--value);
    transform: rotate(-90deg);
    stroke-dasharray: 220; /* (2PI * 35px) */
    stroke-dashoffset: 220;
    animation: offsettozero 0.4s linear forwards;
}

@keyframes offsettozero {
    to {
        stroke-dashoffset: var(--value);
    }
}

.transparent-input {
    background: transparent;
    color: white
}

#overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: black;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(6px);
    -o-filter: blur(4px);
    -ms-filter: blur(4px);
    -moz-filter: blur(4px);
    -webkit-filter: blur(4px);
}

.btn.btn-outline-primary:disabled {
    opacity: 0.3;
}

/* Magnifying glass */
.country-name .col-options-button {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> </svg>');
}

th {
    color: white;
}

.col-title {
    color: white;
}

.sort-indicator {
    color: #7E8BB6;
}

.best-price {
    text-decoration: underline solid #0059F7 3px !important;
    color: white !important;
    -webkit-text-decoration-line: underline !important;
    -webkit-text-decoration-color: #0059F7 !important;
    -webkit-text-decoration-style: solid !important;
    -webkit-text-decoration-thickness: 3px !important;
}

.warning-underline {
    text-decoration: underline solid #F55767 2px !important;
    color: white !important;
    -webkit-text-decoration-line: underline !important;
    -webkit-text-decoration-color: #F55767 !important;
    -webkit-text-decoration-style: solid !important;
    -webkit-text-decoration-thickness: 2px !important;
}


::placeholder {
    color: #23305b !important;
    opacity: 1; /* Firefox */
}

.search-box {
    border-radius: 15px;
    background: black !important;
    color: white !important;
    /*border: revert !important;*/
    border-color: #23305b !important;
}

.text-center {
    text-align: -moz-center;
    text-align: -webkit-center;
}

.quickgrid {
    width: 100%
}

.separator {
    display: flex;
    align-items: center;
    text-align: center;
    
}

    .separator::before,
    .separator::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid #23305b;
    }

    .separator:not(:empty)::before {
        margin-right: .25em;
    }

    .separator:not(:empty)::after {
        margin-left: .25em;
    }

.card-bg {
    background-image: linear-gradient(#162044 100%, #070E27 0%, #070E27);
    /*background-image: linear-gradient(#162044 100%, #070E27, #070E27);*/
    background-size: cover;
    background-repeat: no-repeat;
    max-height: 850px;
    min-height: 172px;
    border: 0;
}