﻿
.header_arrow {
    text-align: center;
}

.page_title {
    text-align: center;
    display: block;
    color: #0d6efd !important;
    font-size: 14px !important;
    font-weight: 700;
}

.travel_header_title {
    border-bottom: 1px solid lightgray;
    padding-bottom: 15px;
}

#gallery-photo-add {
    display: contents;
}

#multiple_img_upload {
    margin: 10px 0 10px 0;
}

#lblimagecount {
    color: #0d6efd;
    margin: 0 3% 0 0;
    font-weight: 700;
}

.lbldvmessage {
    text-align: center;
    margin: 0 0 10px 0;
}

.frames {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    padding: 0;
    margin: 0 auto;
    justify-content: space-evenly;
}

.page {
    width: calc(33% - 40px);
    aspect-ratio: 1.5;
    list-style-type: none;
    box-sizing: border-box;
    box-shadow: unset;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
    height: 100%;
    position: relative;
}

@media screen and (max-width:768px) {
    .page {
        width: calc(50% - 20px);
        aspect-ratio: 1.5;
        border: 6px solid lightgray;
    }
}

@media screen and (min-width:768px) {
    .page {
    }
}

.slot {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    aspect-ratio: 1.5;
    box-sizing: border-box;
    position: absolute;
}

.lblext {
    font-size: 13px;
    font-style: italic;
}

.loaderimg {
    border-top: 4px solid gray;
    border-right: 4px solid pink;
    border-bottom: 4px solid gray;
    border-left: 4px solid pink;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    animation: spin 2s linear infinite;
    position: absolute;
    top: calc(50% - 15px);
    left: calc(50% - 15px);
}

@media screen and (max-width:575px) {

    .loaderimg {
        width: 17px;
        height: 17px;
        top: calc(50% - 7px);
        left: calc(50% - 7px);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes placeHolderShimmer {
    0% {
        background-position: -800px 0
    }

    100% {
        background-position: 800px 0
    }
}

.uploadedimage {
    /* animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: linear-gradient(to right, #eeeeee 8%, #bbbbbb 18%, #eeeeee 33%);
   */
    background-color: #f6f7f8;
    background-size: 800px 104px;
    position: relative;
}

.ddlfilters {
    width: 50%;
}

#replaceimage {
    display: none;
}

.uploaded {
    /*border: 5px solid white;*/
}

.container {
    max-width: 1320px;
}

.uploadedimage {
    position: absolute;
}

@media screen and (max-width:768px) {
    #multiple_img_upload {
        position: relative;
        left: 10px;
    }
}
