/* ========================================================= */


/* // 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) {
    
    .modal-content .modal-body .box {
        background-color: #fff;
        /* justify-content: center;
        flex-direction: column; */
        position: relative;
        text-align: center;
        min-height: 20vh;
        height: 100%;
        overflow: hidden;
        transition: all 0.2s ease-in-out;   
        max-height: calc(1*var(--window-height) - 80px - 2*var(--bs-modal-margin));
    }
    
    .modal-dialog.modal-fullscreen .p-box .imgshow{
        height: 100% !important;
    }
    .modal-dialog.modal-fullscreen .modal-content .modal-body .box {
        height: 100% !important;
        max-height: calc(1*var(--window-height) - 80px - 0*var(--bs-modal-margin));
    }
    
    .modal-dialog.modal-fullscreen .carousel-item{
        height: 100%;
        text-align: center;
        /* background: tan; */
    }
     
    .modal-dialog.modal-fullscreen .p-box .row-right .div_col_right--{
        width: 100% !important;
        min-height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    .modal-dialog.modal-fullscreen .p-box .footer-{
        display: none !important
    }
    .modal-dialog.modal-fullscreen .p-box .row-right .div_col_right .bg-{
        border-radius: 0px !important;
    }
    .modal-dialog.modal-fullscreen .p-box .row-right .div_col_right .text-{
        text-align: center;
        font-size: 20px;
        /* background: tan; */
       
        padding: 0 !important;
    }
    .modal-dialog.modal-fullscreen .p-box .row-right .div_col_right .text- p{
        margin: 0px !important;
    }
    
    .modal-dialog.modal-fullscreen img{
        position: unset !important;
        max-width: 100%;
        max-height: 100%;
        width: 100% !important;
        margin: 0 auto;
        height: 100%;
        object-fit: cover;
    }
    
    .p-box .row-right{
    
    }
    .p-box.textFull .imgshow{
        display: none;
    }
    .p-box.textFull .row-right, .p-box.textFull .row-right .div_col_right{
        height: 100% !important     ;
        max-height: 100% !important;
    }
    .p-box.textFull .row-right .div_col_right .bg{
        /* display: none; */
        background-color: #fff !important;
        opacity: 1 !important;
        border-radius: 0px !important;
    }
    .p-box.textFull .row-right .div_col_right .text{
        color: black !important;
    }
    .p-box.textFull .footer {
        display: none !important;
    }
   
   
    
    .modal-content .modal-header .btn-close-2:hover {
        background: #333;
        transition: all 0.25s ease-in-out;
        /* border-radius: 50%;
        border-color: red; */
    }
    
    
    /* =========================.p-box START===================== */
    .p-box .imgshow{
        height: var(--box-height);
    }
    .p-box .imgshow .h2-no-image{
        justify-content: center;
        flex-direction: column;
    }
    .p-box .imgshow img{
        position: absolute;
        left: 0px;
        height: 100%;
    }
    
    .p-box .imgshow button.carousel-control-prev , .p-box .imgshow button.carousel-control-next{
        width: 8%;
        visibility: hidden;
    }
    
    .carousel-control-icon{
        background-color: #0B355C;
        border-radius: 50%;
    }
    .p-box .row-right{
        bottom: 0;
        right: 0;
        max-height: var(--box-height);
        overflow-y: hidden;
        overflow-x: hidden;
        /* transition: all 1.25s ease-in-out; */
    }
    
    .p-box .row-right:hover{
        overflow-y: auto;
        transition: all 1.25s ease-in-out;
    }
    .p-box .row-right .div_col_right{
        z-index: 999;
        min-height: 25vh;
    }
    .p-box .row-right .div_col_right .bg{
        background: #0B355C;
        z-index: -1;
        border-top-left-radius:  var(--bs-border-radius)!important;
    }
    .p-box .row-right .div_col_right .text{
        padding-bottom: calc( var(--plus-icon-square-size) + 20px ) !important;
        text-align: justify;
    }
    .p-box .footer{
        width: var(--plus-icon-square-size);
        height: var(--plus-icon-square-size);
        right:  calc(var(--webkit-scrollbar-width) + 5px) ;
        bottom: calc(var(--webkit-scrollbar-width) + 3px) ;
        /* background: #fff; */
        justify-content: center;
        flex-direction: column;
        z-index: 9999;
        border-radius: 50%;
        transition: all .1s ease-in-out;
    }
    .p-box .footer:hover{
        cursor: pointer;
        background-color: rgba(var(--bs-success-rgb),var(--bs-bg-opacity))!important;
    }
    .p-box .footer:hover i.fa{
        color: #fff !important;
    }
    .p-box .footer i.fa{
        font-size: 30px;
        margin-top: 3px;
    }
    /* =========================.p-box END===================== */
    
    .box .card .content .bg{
        /* background-image: url(http://192.168.1.30/0/0.masan/Public/Masan/3dvista/images/post_card/socialThumbnail.jpg); */
       
    }
    .carousel-item{
        height: 100%;
    }
    
    
    .box .footer .post-card-button:hover {
        border-color: snow;
        box-shadow: 0 0 0.2rem var(--webkit-scollbar-thumb-color);
    
    }
    .newDiv{
        /* position: relative;
        border: 3px solid red; */
    }
 
    .p-box .row-right{
        position: absolute;
        max-height: 100%;
    }
    .p-box .imgshow .carousel-control-next{
        right: var(--nextBtnInCarouselRight);
    }
    .modal-content .modal-body .box {
       height: var(--box-height);
       
    }
    @media (min-aspect-ratio: 8/5) {
        .box .card-form {
            right: 8% !important;
        }
    }
  }

/* // X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {   }

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