html,
.modal-body,
.product_info .content {
    scroll-behavior: smooth;
}

body {
    /* font-family: 'SVN-Avo'; */
}

* {
    box-sizing: border-box;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

:root {
    --bg-width: 1920;
    --bg-height: 1080;
    --webkit-scrollbar-track-background-color: #104a4abf;
    --webkit-scrollbar-width: 8px;
    --webkit-scollbar-thumb-color: #104A4A;
    --card-form-height:100px;
    --text-decoration-under-line-div:21.3px;
    --window-height:99vh;
}

/* ========================= SCROLLBAR START =========================  */
/* width */
::-webkit-scrollbar {
    width: var(--webkit-scrollbar-width);
    opacity: 0.75;
    background-color: transparent;
}

/* Track */
::-webkit-scrollbar-track {
    /* box-shadow: inset 0 0 5px grey; */
    /* border-radius: 10px; */
    background-color: var(--webkit-scrollbar-track-background-color);
    border: 0px solid var(--webkit-scrollbar-track-background-color);
}

/* Handle */
::-webkit-scrollbar-thumb {
    /* background: brown; */
    background-color: var(--webkit-scollbar-thumb-color);
    border-radius: 10px;
    opacity: 0.5;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    /* background: #b30000; */
    background-color: var(--webkit-scollbar-thumb-color);
}

/* ========================= SCROLLBAR END =========================  */

.flex-col-div {
    flex-direction: column;
    justify-content: center;
    text-align: center;

}

div[popup_type="post_card"] .modal-content .modal-body .box {
    min-height: 50vh;
    /* background-color: tan; */
    transition: all 0.5s ease-in-out;
}

.box .card {
    flex-basis: 90%;
    max-height: 90%;
}
.box .footer{
    flex-basis: 10%;
    min-height: 50px;
}

.box .card .thumbs {
    order: 1;
    height: 25%;
    background-color: var(--bs-border-color-translucent);
}
.box .card .thumbs > .row{
    flex-wrap: nowrap;
    overflow-y: auto;
    overflow-x: hidden;
}
.box .card .thumbs .item{
    cursor: pointer;
    
}

.box .card .thumbs .item label{
    text-align: left;
    color: var(--webkit-scollbar-thumb-color);
    cursor: pointer;
}
.box .card .thumbs .item.active label , .box .card .thumbs .item:hover label{
    font-weight: bold;
}
.box .card .thumbs .item img{
    /* border-width:3px;
    border-style:solid;
    border-color: transparent; */
    
}

.box .card .thumbs .item .img-div{
    overflow: hidden;
    border: 2px solid;
    padding: 0;
    border-color: #ccc;
    transition: all .25s ease-in-out;
}


.box .card .thumbs .item.active .img-div, .box .card .thumbs .item:hover .img-div{
    border-color: var(--webkit-scollbar-thumb-color);
}

.box .card .thumbs .item.active img, .box .card .thumbs .item:hover img{
    
    opacity: 0.5;
}

.box .card .content{
    height: 75%;
    background-color: #f1f1f1;
}
.box .card .content .bg{
    background-repeat: no-repeat;
    background-size:contain;
    background-position: center;
}


.box .card-form{
    /* background: radial-gradient(brown, transparent); */
    justify-content: space-between;
    height: var(--card-form-height);
    right: 0;
    width: 45% ;
    top: 52%;
}

.box .card-form .card-form-bg{
    opacity: 1;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-color: transparent;
    top: 0px;
}

.box .card-form .from-name , .box .card-form .to-name{
    flex-basis: 10%;
    min-height: 30px;
    /* background-color: tan; */
    display: none;
}
.box .card-form .item{
    
}
.box .card-form .message{
    flex-basis: 100%;
    /* border: 1px solid #fff; */
    z-index: 1;
}

.box .card-form input , .box .card-form textarea{
    height: 100%;
    background-color: transparent;
    border: none;
    font-weight: normal;
    font-size: 0.9rem;
    padding-left: 0px;
    resize: none;
    font-family: Arial, Helvetica, sans-serif;
}
.box .card-form .card-form-bg .text-decoration-under-line-div{
    padding-left: 5px;
}
.box .card-form .card-form-bg .text-decoration-under-line-div{
    border-bottom: 1px solid #fff;
    min-height: var(--text-decoration-under-line-div);
}
.box .card-form textarea, .box .card-form .card-form-bg .text-decoration-under-line-div{
    line-height: var(--text-decoration-under-line-div);
}
.box .card-form input:hover , .box .card-form textarea:hover{
    /* border-color:  #fff; */
    cursor: pointer;
}

.box .card-form input:required:invalid , .box .card-form textarea:required:invalid{
    
}

.box .card-form *:after{
    border-color: blue;
}   
.box .card-form *:focus, .box .card-form input:hover , .box .card-form textarea:hover{
    /* background-color: var(--webkit-scollbar-thumb-color);
    opacity: 0.8; */
    outline: none !important;
    border: none;
    box-shadow: 0 0 0 10px transparent;
    /* border-radius: 0; */
   
}
.box .card-form textarea{
    color: #fff;
    margin-top: -3px;
}   
.box .card-form *,.box .card-form *:focus{
    /* color: #ffeb3b; */
}
.box .card-form *::placeholder {
    /* color: #ffeb3b; */
    color:#ccc;
    font-weight: normal;
    /* font-size: 1.5rem; */

}
.border-red{
    border: 1px solid red !important;
}


/* // X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
   
}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .box .card .thumbs {
        order: unset;
    }
    .box .card .thumbs, .box .card .content{
        height: 100%;
    }
}

/* // X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .box .card-form .card-form-bg , .box .card-form textarea{
        --text-decoration-under-line-div: 31px;
    }
    .box .card-form{
        /* top:35.5% !important; */
    }
}

/* // XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}