.container-search-menu { background-color: #dddddd; display: grid; grid-template-columns: repeat(3, 1fr); height: 102px; }
.container-search-menu .search-filter{  background-color: #c8c6c6; font-size: 30px !important; }
.container-search-menu .search-filter p{ padding-top: 20px; padding-left: 12px; padding-right: 12px; color: #251632; }
.container-search-menu .search-filter [class*=" icofont-"], .container-search-menu .search-filter [class^=icofont-] { font-size: 48px !important; float: right; }
.container-search-menu .-closed{ width: 40%; cursor: pointer; }
.container-search-menu .-opened{ width: 50%;  cursor: pointer; }
 /*.container-search-menu .search-display { width: 160%; margin-left: -48%; } */
.container-search-menu .search-display { width: 146%; margin-left: -48%; }
.container-search-menu .search-display h1 { font-size: 26px !important; padding-top: 32px;}
.container-search-menu .search-show-type {text-align: end;  width: 58%;}
.container-search-menu .search-show-type .pagination { max-width: 90%; min-width: min-content; margin-left: 0%; padding-top: 7px; }
.container-search-menu .search-show-type .pagination .total_page, .container-search-footer .pagination .total_page { width: 210px; height: 42px; margin-top: 20px; text-align: center; line-height: 42px; }
.container-search-menu .search-show-type .pagination input, .container-search-footer .pagination input { width: 62px; text-align: center; line-height: 42px; height: 42px; margin-top: 0px; border: 1px solid #251632; color: #251632; }
.container-search-menu .search-show-type .pagination a, .container-search-footer .pagination a { border: 1px solid #251632; height: 42px; margin-top: 20px; }
.container-search-menu .search-show-type .pagination .-left, .container-search-footer .pagination .-left { border-bottom-right-radius: 0px !important; border-top-right-radius: 0px !important; }
.container-search-menu .search-show-type .pagination .-right, .container-search-footer .pagination .-right { border-bottom-left-radius: 0px !important; border-top-left-radius: 0px !important; }
.container-search-menu .search-show-type ul { list-style: none; margin-top: -70px !important;}
/* .container-search-menu .search-show-type #gallery-grid-toggle { align-items: flex-end; display: flex; margin-left: 84.7%;} */
.container-search-menu .search-show-type #gallery-grid-toggle { align-items: flex-end; display: flex; margin-left: 84.7%; width: 90%;}
.container-search-menu .search-show-type ul #first-grid { margin-left: 60%;}
.container-search-menu .search-show-type ul li{ padding-top: 20px; padding-left: 10px;}
.container-search-menu .search-show-type ul li #on, .container-search-menu .search-show-type ul li #off {cursor: pointer;}
.container-search-menu .search-show-type ul li #on{ fill: #251632; }
.container-search-menu .search-show-type ul li #off{fill: #7b7b7b; }
.container-filter {display:none; background-color: #c8c6c6; }
.container-filter.-opened { display: grid; grid-template-columns: repeat(5, 1fr);}
.filter-orientation, .filter-people, .filter-gender, .filter-location, .filter-artists { width: 100%; padding: 20px; }
.container-filter .filter-main-label { font-size: 22px; font-weight: 700; color: #251632; margin-bottom: 25px;}
.container-filter .filter-sub-option { padding-left: 15px;}
.container-filter .filter-sub-option hr { width: 50% }
.container-filter .filter-artists .-date-day,
.container-filter .filter-artists .-date-month,
.container-filter .filter-artists .-date-year { float: left; width: 26%; min-width: 56px; }
.container-filter .filter-artists .-date-month,
.container-filter .filter-artists .-date-year { min-width: 65px; padding-left: 10px; }
.container-filter .filter-artists .-date-year { width: 48%; min-width: 88px; }
.container-filter .filter-location .filter-option label, 
.container-filter .filter-artists .filter-option label  { width: 100%;}
.container-filter .filter-orientation .filter-option, 
.container-filter .filter-people .filter-option, 
.container-filter .filter-people .filter-main-options, 
.container-filter .filter-gender .filter-option { line-height: 1.1; display: grid; grid-template-columns: 1em auto; gap: 0.5em; padding-bottom: 0.4em; }
.container-filter .filter-orientation .filter-option input[type="checkbox"], 
.container-filter .filter-people .filter-option input[type="checkbox"], 
.container-filter .filter-people .filter-main-options input[type="checkbox"], 
.container-filter .filter-gender .filter-option input[type="checkbox"] { -webkit-appearance: none; appearance: none; background-color: #fff; margin: 0; appearance: none; background-color:#c8c6c6; margin: 0; font: inherit; color: #444; width: 1.15em; height: 1.15em; border: 0.15em solid currentColor; border-radius: 0.15em; transform: translateY(-0.075em); display: grid; place-content: center; }
.container-filter .filter-orientation .filter-option input[type="checkbox"]::before, 
.container-filter .filter-people .filter-option input[type="checkbox"]::before, 
.container-filter .filter-people .filter-main-options input[type="checkbox"]::before,
.container-filter .filter-gender .filter-option input[type="checkbox"]::before { content: ""; width: 0.65em; height: 0.65em; transform: scale(0); transition: 120ms transform ease-in-out; box-shadow: inset 1em 1em var(--form-control-color); background-color: CanvasText; transform-origin: bottom left; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.container-filter .filter-orientation .filter-option input[type="checkbox"]:checked::before, 
.container-filter .filter-people .filter-main-options input[type="checkbox"]:checked::before,
.container-filter .filter-people .filter-option input[type="checkbox"]:checked::before, 
.container-filter .filter-gender .filter-option input[type="checkbox"]:checked::before { transform: scale(1); }
.container-filter .filter-orientation .filter-option input[type="checkbox"]:disabled, 
.container-filter .filter-people .filter-main-options input[type="checkbox"]:disabled,
.container-filter .filter-people .filter-option input[type="checkbox"]:disabled, 
.container-filter .filter-gender .filter-option input[type="checkbox"]:disabled { --form-control-color: var(--form-control-disabled); color: var(--form-control-disabled); cursor: not-allowed; }
.container-filter .filter-location .filter-option select, 
.container-filter .filter-artists .filter-option select {  width: 100%; border: 1px solid #444; border-radius: 0.25em; padding: 0.25em 0.5em; cursor: pointer; line-height: 1.1; background-color: #c8c6c6; margin-bottom: 0.4em; margin-top: 0.2em; outline: none; }
.container-filter .filter-location .filter-option select:focus + .focus, 
.container-filter .filter-artists .filter-option select:focus + .focus{ position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; border: 0px solid var(--select-focus); border-radius: inherit; }
.container-filter .actions { width: 500%; display: inline-flex; padding-bottom: 25px; }
.container-filter .actions .clean,
.container-filter .actions .apply { width: 50%; padding: 0px 10px 0px 0px; }
.container-filter .actions .clean { text-align: end; } 
.container-filter .actions .clean .btn-outline-light,
.container-filter .actions .apply  .btn-outline-light { background-color: rgb(65 18 104 / 80%); border: 1px solid #251632; color: #fff; height: 50px; font-size: 22px; width: 20%; min-width: 100px; }   
.container-filter .actions .clean .btn-outline-light:hover,
.container-filter .actions .apply .btn-outline-light:hover { background-color: #fff; color: rgb(65 18 104 / 80%); }
/* select 2 */
.select2-dropdown,
.container-filter .select2 .selection .select2-selection { background-color: #c8c6c6;  border: 0.05em solid #251632 !important; border-radius: 0.3em !important; }
.container-filter .select2-container--default .select2-selection--single .select2-selection__clear { font-weight: 500 !important; height: 34px !important; }
.select2-container--open .select2-dropdown--below { background-color: #c8c6c6; border: 0.05em solid #251632 !important; border-radius: 0.3em !important; }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background-color: rgb(65 18 104 / 80%) !important; }
/* select 2 */
.container-img{width: 95%; margin: auto; margin-top: 20px; margin-bottom: 20px; /* display: grid; */ grid-template-columns: repeat(5, 1fr); grid-template-rows: 250px; grid-gap: 8px; padding: 1%; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); --bs-card-border-width: var(--bs-border-width); --bs-card-border-color: var(--bs-border-color-translucent); --bs-card-border-radius: var(--bs-border-radius); --bs-card-box-shadow: ; --bs-card-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width))); border: #000; background-color: #f3f3f3; }
#mosaic .-wide{ grid-column-start: span 2; }
#mosaic .-vertical{ grid-row-start: span 2; }
#mosaic .-horizontal{ grid-row-start: span 1; }
#mosaic .box-img figure{ width: 100%; height: 100%; }
#mosaic .box-img img{ width: 100%; height: 100%; object-fit: cover; }
#mosaic .box-img .show-image{ width: 100%; height: 100%;}
#mosaic .show-information { display: none; height: 100%; }
#mosaic .show-information.-wide { border: 2px solid black; }
#mosaic .show-information.-horizontal { border: 2px solid red; }   
#mosaic .show-information.-vertical { border: 2px solid green; }
#fixed { /* display: none; */ grid-template-columns: 16.3% 16.3% 16.3% 16.3% 16.3% 16.3%; grid-template-rows: auto;}
#fixed .-horizontal,
#fixed .-wide,
#fixed .-vertical { overflow: hidden; max-height: 760px; }
#fixed .-horizontal .card-image,
#fixed .-wide .card-image,
#fixed .-vertical .card-image { height: 312px !important; text-align: center; overflow: hidden; }
#fixed .-horizontal .card-image>a img { height: auto; max-width: 312px; }
#fixed .-wide .card-image>a img { height: auto; max-height: 185px; max-width: 312px; }
#fixed .-vertical .card-image>a img { max-height: 312px !important; width: auto; }
#fixed .col-md-listing {width: 100%; }
#fixed .col-md-listing .card .card-body { height: 450px; }
#fixed .col-md-listing .card .card-body .card-text.-keyword {text-align: justify;}
#fixed .col-md-listing .card .card-body .-action{ width: 100%; background-color: rgb(65 18 104 / 80%); border: 1px solid #251632; color: #fff; width: 49.4%; text-decoration: none !important;}
#fixed .col-md-listing .card .card-body .-action.-editor{ width: 100%;}
#fixed .col-md-listing .card .card-body .-action:hover{ width: 100%; background-color: #fff; border: 1px solid #251632; color: #251632; width: 49.4%;}
#fixed .col-md-listing .card .card-body .-action.-editor:hover{ width: 100%; }
#fixed .col-md-listing .card .card-body .content-listing { height: 370px; padding-bottom: 10px; overflow: scroll }
#fixed .col-md-listing .card .card-body .content-listing span { font-weight: bold; }
.container-message { height: 640px; border: 2px solid rgb(65 18 104 / 80%); width: 50%; margin-left: 25%; margin-top:5%; display: flex; padding: 2%; border-radius: 10px; }
.container-message .message { width: 50%; margin: 0 auto; padding-top: 5%; min-height: 360px; }
.container-message .-error { width: 66%; }
.container-message .message-ps { width: 90%; text-align: center; font-weight: 400; margin: auto; }
.container-message .image-and-message .image { width: 30%; min-width: 200px; color: rgb(93 72 110 / 80%); float: left; text-align: center;  padding-top: 80px; }
.container-message .image-and-message .message { color: rgb(60 50 67 / 1); float: inline-start;}
.container-message .image-and-message .message span {font-size: 28px !important;}
.container-message .image-and-message .action { padding-top: 2%; text-align: center; }
.container-message .image-and-message .action a { padding: 20px; background-color: rgb(65 18 104 / 80%); border: 1px solid #251632; color: #fff; text-decoration: none !important; width: 100%; font-size: 26px; margin-top: 26px;}
.container-message .image-and-message .action a:hover { background-color: #fff; border: 1px solid #251632; color: #251632; }
.container-search-footer {background-color: #dddddd; height: 94px; }
.container-search-footer .pagination { margin: auto; width: max-content; padding-top: 7px; }
@media screen and (max-width: 2508px)
{
    #fixed .col-md-listing .card .card-body .-action:hover,
    #fixed .col-md-listing .card .card-body .-action {width: 49.3%;}
}
@media screen and (max-width: 2400px)
{
    #fixed {grid-template-columns: 19.7% 19.7% 19.7% 19.7% 19.7%; }
}
@media screen and (max-width: 2000px)
{
    /* .container-search-menu .search-show-type { width: 85%; } */
    .container-search-menu .search-show-type { width: 55%; }
    #fixed .col-md-listing .card .card-body { height: 100%; }
    #fixed .col-md-listing .card .card-body .-action:hover,
    #fixed .col-md-listing .card .card-body .-action { width: 49.2%; }
}
@media screen and (max-width: 1700px)
{
    #fixed .col-md-listing .card .card-body .-action:hover,
    #fixed .col-md-listing .card .card-body .-action { font-size: 14px;}
}
@media screen and (max-width: 1600px)
{
    .container-search-menu .search-show-type { width: 58%; }
    .container-search-menu .search-show-type #gallery-grid-toggle { margin-left: 84%; width: 82%; }
    #fixed .col-md-listing .card .card-body .-action:hover,
    #fixed .col-md-listing .card .card-body .-action { width: 49.1%;}
}
@media screen and (max-width: 1500px)
{
    .container-search-menu .search-show-type #gallery-grid-toggle { margin-left: 82%; width: 80%; }
    #fixed .col-md-listing .card .card-body .-action:hover,
    #fixed .col-md-listing .card .card-body .-action { font-size: 12px;}
}
@media screen and (max-width: 1450px)
{
    #fixed .col-md-listing .card .card-body .-action:hover,
    #fixed .col-md-listing .card .card-body .-action { width: 49%;}
    .container-filter .filter-artists .-date-day, .container-filter .filter-artists .-date-month, .container-filter .filter-artists .-date-year { width: 100%; }
    .container-filter .filter-artists .-date-month, .container-filter .filter-artists .-date-year { padding-left: 0px; }
}
@media screen and (max-width: 1400px)
{
    .container-search-menu .search-show-type #gallery-grid-toggle { margin-left: 80%; width: 78%; }
    #fixed {grid-template-columns: 25% 25% 25% 25%; }
}
@media screen and (max-width: 1280px) 
{ 
    .container-search-menu .search-show-type { width: 74%; }
    .container-search-menu .search-show-type .pagination {margin-left: -34%; }
    .container-search-menu .search-show-type #gallery-grid-toggle { margin-left: 56%; width: 54%; }
    .container-search-menu .search-filter.-closed,
    .container-search-menu .-opened { width: 50.4%; height: 94px; }
    .container-search-menu .search-display { width: 100%; margin-left: -44%; }
    .container-search-menu .search-display h1 { font-size: 22px !important; padding-top: 22px; }
}
@media screen and (max-width: 1100px)
{
    .container-search-menu .search-display { width: 118%; }
    .container-search-menu .search-show-type { width: 74%; }
    .container-search-menu .search-show-type .pagination {margin-left: -34%;}
    .container-search-menu .search-show-type #gallery-grid-toggle { margin-left: 56%; width: 54%; }
    /* .container-search-menu .search-show-type #gallery-grid-toggle { margin-left: 100%; } */
    .container-img{ grid-template-columns: repeat(2, 1fr); grid-gap: 3px; }
    #fixed {grid-template-columns: 33.3% 33.3% 33.3%; }
}
@media screen and (max-width: 1000px)
{
    .container-search-menu .search-show-type { width: 72%; }
    .container-search-menu .search-show-type .pagination { margin-left: -40%; }
}
@media screen and (max-width: 980px)
{
    .container-search-menu .search-display { width: 112%; }
}
@media screen and (max-width: 920px)
{
    .container-search-menu { grid-template-columns: repeat(2, 1fr); height: 188px; }
    .container-search-menu .search-display { width: 137%; }
    .container-search-menu .search-display h1 { padding-top: 30px; }
    .container-search-menu .search-show-type { width: 100%; }
    .container-search-menu .search-show-type .pagination { margin-left: 6%; }
    .container-search-menu .search-show-type #gallery-grid-toggle { margin-left: 127%; width: 70% }
    #fixed {grid-template-columns: 50% 50%; }
    .container-search-menu .search-filter [class^=icofont-] { font-size: 36px !important; margin-top: 6px; }
    .container-search-menu .search-filter p { padding-left: 5px; padding-right: 5px; }
    .container-filter.-opened { grid-template-columns: repeat(3, 1fr); }
    .container-filter .actions { width: 100%; display: block; padding-bottom: 0px; }
    .container-filter .actions .clean,
    .container-filter .actions .apply { width: 100%; padding: 20px 0px 0px 0px; text-align: center; }
    .container-filter .actions .clean { padding-top: 100px;}
    .container-filter .actions .clean .btn-outline-light, 
    .container-filter .actions .apply .btn-outline-light { width: 70%; }
    #fixed .col-md-listing .card .card-body .-action:hover, #fixed .col-md-listing .card .card-body .-action { width: 100%; margin-top: 5px; margin-bottom: 5px; }    
}
@media screen and (max-width: 820px)
{
    /* .container-search-menu .search-display { width: 170%; } */
    .container-search-menu .search-filter [class^=icofont-] { font-size: 34px !important; margin-top: 9px; }
    .container-search-menu .search-filter p { padding-right: 0px; padding-left: 4px; }
}
@media screen and (max-width: 768px)
{
    .container-search-menu .search-show-type #gallery-grid-toggle { margin-left: 124%; }
    .container-search-menu .search-display h1 { padding-top: 18px; }
    .container-search-menu .search-display { width: 118%; }
}
@media screen and (max-width: 720px)
{
    .container-search-menu .search-display { width: 137%; }
    .container-search-menu .search-show-type #gallery-grid-toggle { margin-left: 120%; }
}
@media screen and (max-width: 652px)
{
    .container-search-menu .-closed, 
    .container-search-menu .-opened { width: 62%; }
    .container-search-menu .search-display h1 {font-size: 18px !important;  padding-top: 24px; }
    .container-search-menu .search-display {margin-left: -35%; width: 128%;}
    .container-search-menu .search-show-type  {width: 98.5%;} 
    .container-search-menu .search-filter p i{ display: none; }
    #fixed {grid-template-columns: 100%; }
    
}
@media screen and (max-width: 600px)
{
    header .search-header,
    header .menu-header {width: 100%}
    .body-container {width: 100%}
    .container-search-menu .search-show-type { width: 94%; }
    .container-search-menu .search-show-type #gallery-grid-toggle { margin-left: 110%; width: 84%; }
    .container-search-menu .search-show-type ul #first-grid { margin-left: 65%;}
    .card { margin-bottom: 10px; }
    .container-img{ grid-template-columns: repeat(1, 1fr); grid-gap: 0px; background-color: #fff; }
    .container-img .box-img{ margin-bottom: 10px; }
    .container-message { height: 100%; width: 98%; margin-left: 1%; }
    .container-message .image-and-message .image, 
    .container-message .-error,
    .container-message .message-ps { width: 100%; }
    .container-message .-error { min-height: 300px;}
    .container-message .message-ps {text-align: justify;}   
}
@media screen and (max-width: 600px)
{
    .container-search-menu .search-display { width: 125%; margin-left: -34%; }
    .container-filter.-opened { grid-template-columns: repeat(2, 1fr); padding-bottom: 25px; }
    
}
@media screen and (max-width: 580px)
{
    .container-search-menu .search-show-type #gallery-grid-toggle { margin-left: 107%; width: 80%; }
}
@media screen and (max-width: 570px)
{
    .container-search-menu .search-show-type #gallery-grid-toggle { margin-left: 104%; }
}
@media screen and (max-width: 560px)
{
    .container-search-menu .search-show-type #gallery-grid-toggle {
        width: 74%;
    }
}
@media screen and (max-width: 540px) {
    .container-search-menu .search-display { width: 152%; margin-left: -45%; }
    .container-search-menu .search-show-type #gallery-grid-toggle { width: 64%; }
}
@media screen and (max-width: 525px) {
    .container-search-menu .search-display { width: 156%; margin-left: -62%; }
    .container-search-menu .search-show-type #gallery-grid-toggle { width: 56%; }
}
@media screen and (max-width: 510px) {
    .container-search-menu .search-show-type #gallery-grid-toggle { width: 48%; }
}
@media screen and (max-width: 495px) {
    .container-search-menu .search-display { width: 166%; margin-left: -73%; }
    .container-search-menu .search-show-type #gallery-grid-toggle { width: 38%; }
}
@media screen and (max-width: 480px) {
    .container-search-menu .search-display { width: 140%; margin-left: -40%; }
    .container-search-menu .search-show-type #gallery-grid-toggle { width: 32%; }
}
@media screen and (max-width: 465px) {
    .container-search-menu .search-display { width: 147%; margin-left: -47%; }
    .container-search-menu .search-show-type #gallery-grid-toggle { width: 25%; }
    .container-search-menu .search-display h1 { max-width: 90%; }
}
@media screen and (max-width: 455px) {
    .container-search-menu .search-show-type ul #first-grid { margin-left: 38%; }
}
@media screen and (max-width: 438px) {
    .container-search-menu .search-show-type ul #first-grid { margin-left: 38%; }
}
@media screen and (max-width: 438px) {
    .container-search-menu .search-show-type ul #first-grid { margin-left: 0%; }
}
@media screen and (max-width: 425px) {
    .container-search-menu .search-show-type #gallery-grid-toggle { display: none; }
}
@media screen and (max-width: 414px)
{
    .container-search-menu .-closed, .container-search-menu .-opened { width: 50.4%; }
        
    header .search-header,
    header .menu-header {width: 100%}
    .body-container {width: 100%}
    .card { margin-bottom: 10px; }
    #fixed {grid-template-columns: 100%; }
    #fixed .col-md-listing .card .card-body { height: 100%; }
    #fixed .col-md-listing .card .card-body .content-listing { height: 100%; }
    .container-search-menu .search-display {  width: 140%; margin-left: -45%; }
    .container-filter.-opened { grid-template-columns: repeat(1, 1fr); padding-bottom: 25px; }
}
@media screen and (max-width: 375px ) {
    .container-search-menu .search-display { width: 150%; margin-left: -55%; }
}
@media screen and (max-width: 344px) {
    .container-search-menu .search-show-type .pagination { margin-left: 2%; }
    .container-search-menu .search-display { width: 168%; margin-left: -70%; }
}
@media screen and (max-width: 330px) {
    .container-search-menu .search-show-type .pagination { margin-left: 2%; }
}
@media screen and (max-width: 320px) {
    .container-search-menu .search-display { width: 168%; margin-left: -108%; }
    .container-search-menu .search-display h1 { font-size: 14px !important; padding-top: 24px; }
    
}
@media screen and (max-width: 300px)
{   
    #fixed .col-md-listing .card .card-body .-action:hover,
    #fixed .col-md-listing .card .card-body .-action { width: 100%;}
}