/* The Modal (background) */
.modal-m-gallery {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    padding-top: 5%;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
}

/* Modal Content */
.modal-content-m-gallery {
    background-color: #fefefe;
    margin: 5em auto;
    padding: 20px;
    border: 1px solid #888;
    width: 60%;
    border-radius: 4px;
}

/* The Close Button */
.close-m-gallery {
    color: #aaaaaa;
    float: right;
    font-size: 2.5em;
    font-weight: bold;
    margin-top: -0.8em;    
}

.close-m-gallery:hover,
.close-m-gallery:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

/* สุด modal */

/* The Modal (background) photos */
.modal-m-gallery-photos {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    padding-top: 100px;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
}

/* Modal Content */
.modal-content-m-gallery-photos {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 760px;
    height: 400px;
}

/* The Close Button */
.close-m-gallery-photos {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-m-gallery-photos:hover,
.close-m-gallery-photos:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

/* สุด modal */





/* แสดงภาพ lightbox */

.container-m-gallery {
    width: 100%;
    /* max-width: 1260px; */
    /* min-width: 335px; */
    /* background-color: #FFF; */
    margin: 0 auto
}


.content-m-gallery {
    /* padding: 10px 0; */
    /* min-height: 500px; */
    width: 100%;
    float: left;
    /* background-color: #efefef */
}


.content-m-gallery>div {
    margin: 20px 15px
}

@media screen and (max-width:700px) {

    /* .content-m-gallery>div {
        width: 100% !important
    } */
    .content-allmodal {
        min-height: unset !important;
    }
}

/* <!-- LIGHTBOX FADING SHOW/HIDE EFFECT (as explained in documentation) --> */

.lcl_fade_oc.lcl_pre_show #lcl_overlay,
.lcl_fade_oc.lcl_pre_show #lcl_window,
.lcl_fade_oc.lcl_is_closing #lcl_overlay,
.lcl_fade_oc.lcl_is_closing #lcl_window {
    opacity: 0 !important;
}

.lcl_fade_oc.lcl_is_closing #lcl_overlay {
    -webkit-transition-delay: .15s !important;
    transition-delay: .15s !important;

}



.div-float-left {
    float: left;
}

.div-float-right {
    float: right;
}



.elem,
.elem * {
    box-sizing: border-box;
    /* margin: 0 !important; */
}

.elem {
    float: left;
    display: inline-block;
    font-size: 0;
    border: 2px solid #efefef;
    border-bottom: none;
    /* background: #fff; */
    /* padding: 10px; */
    height: auto;
    background-clip: padding-box;
    margin: 0px 1px 0px 1px;
}

.elem>span {
    display: block;
    cursor: pointer;
    height: 0;
    padding-bottom: 70%;
    background-size: cover;
    background-position: center center;
}


.elem-a,
.elem-a * {
    box-sizing: border-box;
    /* margin: 0 !important; */
}

.elem-a {
    float: left;
    display: inline-block;
    font-size: 0;
    border: 2px solid #efefef;
    border-bottom: none;
    /* background: #fff; */
    /* padding: 10px; */
    height: auto;
    background-clip: padding-box;
    margin: 0px 1px 0px 1px;
}

.elem-a>span {
    display: block;
    cursor: pointer;
    height: 0;
    padding-bottom: 70%;
    background-size: cover;
    background-position: center center;
}




.elem_p,
.elem_p * {
    box-sizing: border-box;
    /* margin: 0 !important; */
}

.elem_p {
    float: left;
    display: inline-block;
    font-size: 0;
    border-bottom: none;
    /* background: #fff; */
    /* padding: 10px; */
    height: auto;
    background-clip: padding-box;
    margin: 0px 1px 0px 1px;
}

.elem_p>img {
    /* display: block;
    cursor: pointer;
    height: 0;
    padding-bottom: 70%;
    background: no-repeat; */
    margin-bottom: 10px;
    max-width: 100%;

}



.frame-div,
.frame-div * {
    box-sizing: border-box;
    margin: 0 !important;
}

.frame-div {
    float: inherit;
    display: inline-block;
    border: 2px solid #efefef;
    border-bottom: none;
    /* background: #fff; */
    /* padding: 10px; */
    height: auto;
    background-clip: padding-box;
}

.frame-div>div {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;


}

.frame-div>div>div {
    display: block;
    cursor: pointer;
    height: 0;
    padding-bottom: 70%;
    background-size: cover;
    background-position: center center;
}

.show-frame {
    max-width: 100%;
    backdrop-filter: blur(2px);
    background-color: rgb(14 10 10 / 60%);
    border-radius: 0.25rem;
    color: white;
}


.left-box.action-media button#button_gallery_up {
    height: 25px;
    line-height: 0 !important;
    font-size: 14px;
    border-radius: 4px !important;
    width: fit-content;
    padding: 1em 0.9em;
    margin-right: 0.5em;
    background-color: transparent !important;
    box-shadow: 0 0 0 1px transparent inset !important;
    border-color: #DADADA !important;
    border: 1px solid #DADADA;
    color: #555 !important;
    /*margin-top: 3%;*/

}


/* The Modal (background) */
.modal-none {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
    /* display: flex; */
    align-items: center;
    justify-content: center;
}

/* .modal-none {
    display: none;
  
    position: fixed;
  
    z-index: 999;

    padding-top: 100px;

    left: 0;
    top: 0;
    width: 100%;

    height: 100%;

    overflow: auto;

    background-color: rgb(0, 0, 0);

    background-color: rgba(0, 0, 0, 0.4);

} */

/* Modal Content */
/* .modal-content-non {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
} */
.modal-content-none {
    overflow: hidden;
    background-color: #fefefe;
    /* margin: auto; */
    padding: 5px 10px 20px 20px;
    border: 1px solid #888;
    width: 60%;

    border-radius: 4px;
}

@media screen and (max-width:768px) {
    .modal-content-none {
        height: 70% !important;
        width: 80% !important;

    }
}

@media screen and (min-width:768px) {
    .modal-content-none {
        height: 60%;
    }
}


/* The Close Button */
.close-none {
    color: #aaaaaa;
    float: right;
    font-size: 2vw;
    font-weight: bold;
}

.close-none:hover,
.close-none:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

@media (max-width:576px) {
    .close-none {
        color: #aaaaaa;
        float: right;
        font-size: 20px;
        font-weight: bold;
        /* height : 87%; */
    }

    .content-allmodal {
        padding: 0px;

    }

    .modal-content-none {
        padding: 0px 7px 10px 20px;
    }
}

.content-allmodal {
    overflow-y: auto;
    padding: 10px 0;
    height: 86%;
    background-color: #fff;
    width: 100%;
    margin: 0 auto
}



#listimage_checkbox {
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
}

@media (max-width: 1400px) {
    #listimage_checkbox {
        max-height: 200px;
    }
}
div#uploader-m-gallery_buttons { display: contents; background-color: #7FB036 !important;}
/*.ui-widget-header .ui-state-disabled {    float: right;}*/
#namegallery{
    border: 1px solid transparent !important;
    padding: 2px !important;
    background-color: #FFFFFF !important;
    border-color: #DADADA !important;
    color: #333333 !important;
}
button#show_text_gallery,#delete_gallery{ float: right;    font-size: 14px !important;}
#uploader-m-gallery .plupload_content {
    display: none;
}

#uploader-m-gallery .plupload_add,#delete_gallery {
    display: inline-block;
    padding: 0px 8px;
    font-size: 20px;
    height: 30px;
}
div#uploader-m-gallery_container {
    height: 0;
    min-height: 0;
    border:none;
    background:transparent;
    margin-bottom: 0px;
}
#myModal-m-gallery div#listimage_checkbox_to, #uploader-m-gallery-nav div#listimage_checkbox_to {
    border: 1px solid #006600;
    background: #006600;
    font-weight: normal;
    color: #FFF;
    padding: 8px 8px 4px;
    margin-bottom: 0px;
}
#myModal-m-gallery div#listimage_checkbox, #uploader-m-gallery-nav div#listimage_checkbox {
    border: 1px solid #dddddd;
}
#myModal-m-gallery #listimg_delete .icon{font-size: 20px;}
div#uploader-m-gallery {    margin-top: 2em;}
@media (min-width:800px) {
.left-box.action-media button#button_gallery_up {     margin-top: 3%;}
}
#myModal-m-gallery #listimage_checkbox .error {padding: 2em;text-align: center; }
#listimage_checkbox_top .plupload_button,#uploader-m-gallery_browse,#show_text_gallery{    background-color: #7FB036;    border: none;float: right;}
#uploader-m-gallery_browse{float: left;}
#delete_gallery{margin-right: 0.5em;line-height: 0.5;max-height: 30px;height: 28.19px;}
 @media screen and (max-width: 1000px) and (min-width: 300px) {
    #delete_gallery{        
        font-size: 14px;
        border: none;
        height: 33px;
        max-height: 33px;
    }
}
#uploader-m-gallery_buttons .ui-button.ui-corner-all.plupload_stop{
    font-size: 14px !important;
    display: inline-block;
    padding: 0px 8px;
    height: 28px;   
    line-height: 2;
    margin-left: 0.5em;
    float: left;
}
#addphoto button.btn-post-type {
    padding: 0 8px;
}