﻿.flex-cont-22 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.flex-item-22 {
    flex: 1 0 50%;
    box-sizing: border-box;
    padding: 0 10px;
    min-width: 300px;
    text-align: left;
}

#Receipt {
    max-width: 500px;
    margin: auto;
    margin-top: 54px
}

    #Receipt h2 {
        color: white
    }

    #Receipt table {
        width: 100%;
    }

        #Receipt table tr:nth-child(odd) td {
            background: rgba(0,0,0,.5)
        }

        #Receipt table tr:nth-child(even) td {
            background: rgba(0,0,0,.2)
        }

#GetVin > p {
    margin: auto;
    max-width: 768px;
}

.grecaptcha-badge {
    width: 70px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    left: 14px !important;
}

    .grecaptcha-badge:hover {
        width: 256px !important;
    }

.dHr {
    height: 8px;
    background: #6969694d;
    margin: 36px 0 24px 0;
    border-radius: 4px;
    width: 100%;
}

.mw500 {
    max-width: 500px;
    margin: auto;
    min-width: 200px;
}

.autoComplete_wrapper {
    width: 100%;
}

    .autoComplete_wrapper > ul > li mark {
        padding: 0 !important;
    }

div.storeCard-top {
    border-bottom: 1px solid rgb(134 134 134 / 50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
}


div.storeCard {
    border: 1px solid rgb(137 137 137 / 50%);;
    position: relative;
    border-radius: 10px;
    margin: 12px;
    transition: all .4s ease-in-out;
    background: rgb(100 100 100 / 50%);
}

    div.storeCard.notListed {
        width: 100%;
        max-width: 100%;
        background: #ffd80030;
    }

div.storeCard-header {
    border-bottom: 1px solid rgb(137 137 137 / 50%);
    background: rgb(106 105 105 / 47%);
    padding: 54px 64px 10px 64px;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
}

div.storeCard-icon {
    width: 60px;
    min-width: 60px;
    height: 60px;
    border-radius: 50px;
    overflow: hidden;
    border: 1px solid rgb(137 137 137 / 50%);
    display: flex;
    background-color: rgb(183 183 183 / 26%);
    padding: 4px;
}

    div.storeCard-icon > img {
        object-fit: cover;
        margin: auto;
    }

div.storeCard-body {
    padding: 16px;
}

p.storeCard-text {
    line-height: 28px;
    padding: 0;
}

a.storeCard-google {
    border: 1px solid #d3d3d380;
    padding: 2px 18px;
    height: 28px;
    display: inline-block;
    background: #b7b7b742;
}

    a.storeCard-google:hover {
        color: #75ff4e !important
    }

.storeCard-body button {
    border-radius: 4px;
}

    .storeCard-body button.btn-danger {
        background-color: #a04d55;
    }

    .storeCard-body button.btn-success {
        background-color: #4d9c5f;
    }

#Card {
    border-radius: 20px;
    margin-bottom: 24px;
    box-shadow: 0px 0px 40px 10px rgb(0 0 0 / 75%);
}

/*begin slider*/
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}
/*end slider*/

.dz-Mov {
    padding: 28px;
    background: rgb(208 208 208 / 48%);
    margin: 28px 0;
    border-radius: 20px !important;
}

.dz-preview {
    border-radius: 20px;
    box-shadow: 0px 6px 18px 4px #00000099;
}

.dropzone .dz-preview .dz-image img {
    transition: .4s transform ease-in-out;
    width: 100%;
}

.dropzone .dz-preview:hover .dz-image img {
    transform: scale(1.2) !important;
    filter: grayscale(.9) blur(8px) !important;
}

.dropzone .dz-preview .dz-image {
    width: 180px !important;
}

.dropzone .dz-preview .dz-error-message:after {
    left: 84px !important;
}

.dropzone .dz-preview .dz-error-message {
    left: 0px !important;
    width: 180px !important;
    box-shadow: 0 0 16px 3px black;
}

.bootAlertPopup {
    background: rgb(78 87 98 / 88%) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px !important;
    box-shadow: 0 10px 20px 5px #000000;
    color: white !important;
}

.bootAlertContainer {
    background: rgba(0,0,0,.36) !important;
}

@media (prefers-color-scheme: light) {

    #Receipt h2 {
        color: rgb(100,100,100)
    }

    #Receipt table {
        width: 100%;
    }

        #Receipt table tr:nth-child(odd) td {
            background: rgba(255,255,255,.5)
        }

        #Receipt table tr:nth-child(even) td {
            background: rgba(255,255,255,.2)
        }

    .bootAlertPopup {
        background: rgb(235 235 235) !important;
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border-radius: 20px !important;
        box-shadow: 0 10px 20px 5px #0000002b;
        color: #545454 !important;
    }
    .swal2-title, .swal2-html-container {
        color: #484d4e !important;
    }

    .swal2-confirm {
        color: #212529 !important;
        background-color: #f8f9fa !important;
        border-color: #f8f9fa !important;
    }

    .swal2-cancel {
        background: #cfcfcf !important;
        color: #212529 !important;
        border-color: #d5d5d5 !important;
    }

    .bootAlertContainer {
        background: rgb(110 110 110 / 46%) !important
    }

    #Card {
        box-shadow: 0px 0px 40px 12px rgb(124 124 124 / 50%);
    }

    a.storeCard-google:hover {
        color: #4e8dff !important;
    }

    div .storeCard {
        box-shadow: none;
        background: rgb(255 255 255 / 50%);
    }

        div.storeCard.notListed {
            background: #7c3448;
            color: white;
        }

    div.storeCard-icon {
        box-shadow: none;
    }

    div.storeCard-body {
    }

    div.storeCard-header {
        background: rgb(229 229 229);
    }

    .dHr {
        background: #ababab;
    }
}
