.gridFilter{ display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 15px;}
.grid3{ grid-column: 1/3;}
.grid4{ grid-column: 1/4;}

@media (max-width:991px){
    .gridFilter{ grid-template-columns: 1fr;}
    .grid3, .grid4, .submitColumn{ grid-column: 1/2;}
}

.formControl{ border-radius: 50px;}
.card-body{ background: var(--clLightGray);}
.buttonFilter{ display: flex; align-items: center; justify-content: space-between; width: 100%;}
#searchHidden, #search1{ display: none;}

@media (max-width:991px){
    .border10{ border-radius: 10px;}
    #searchHidden, #search1{ display: block;}
    #search1 button{ background: var(--clWhite); border: 1px solid var(--clBlackGray); 
        border-radius: 50px; padding: .375rem .75rem; text-decoration: none; color: var(--clBlackGray);}
    .hiddenMobile{ display: none;}
}

.flexGap{ display: flex; flex-direction: column; gap: 15px;}

.dropDownScroll{ min-width: 500px; height: 300px; overflow-y: auto;}
.dropDownAuto{ min-width: 100%; height: 300px; overflow-y: auto;}
.dropDownScroll section, .dropDownAuto section{ border-bottom: 1px solid var(--clGray);}

.dropDownScroll::-webkit-scrollbar { width: 10px;}/* width */
.dropDownScroll::-webkit-scrollbar-track { background: #f1f1f1;}/* Track */
.dropDownScroll::-webkit-scrollbar-thumb { background: #888; border-radius: 10px;}/* Handle */
.dropDownScroll::-webkit-scrollbar-thumb:hover {background: #555;}/* Handle on hover */

.dropDownAuto::-webkit-scrollbar { width: 10px;}/* width */
.dropDownAuto::-webkit-scrollbar-track { background: #f1f1f1;}/* Track */
.dropDownAuto::-webkit-scrollbar-thumb { background: #888; border-radius: 10px;}/* Handle */
.dropDownAuto::-webkit-scrollbar-thumb:hover {background: #555;}/* Handle on hover */

.minMaxMoney li{ border-bottom: 1px solid var(--clGray); padding: 10px 15px; margin: 0 -15px;}
.minMaxMoney li:hover{ cursor: pointer; background: var(--clGray);}
.dropDownMenu{ min-width: 100%;}
.dropdown-item:focus, .dropdown-item:hover{ background: var(--clWhitetGray);}

@media (max-width:991px){
    .dropDownScroll{ min-width: 100%; left: inherit !important; right: 0 !important; 
        transform: translate3d(0px, 40px, 0px) !important;}
}

.flexPositionPre{ display: flex; align-items: center; justify-content: space-between; color: var(--clBlackGray); border-radius: 0;}
.flexPositionPre:hover, .flexPositionPre:focus{ text-decoration: none; color: var(--clBlackGray); background: var(--clGray);}
.btn.focus, .btn:focus{ box-shadow: none;}
.allWorkList{ display: flex; align-items: center; justify-content: space-between;}
.allWorkList button{ background: var(--clRed); color: var(--clWhite); border-radius: 50px; border: 1px solid var(--clRed);}
.allWorkList button:hover{ background: var(--clRedHover); border: 1px solid var(--clRedHover);}

.form-group{ margin-bottom: 0;}
.inputSearch{ position: relative;}
.iconSearch{ position: absolute; top: 0; left: 0; transform: translate(100%, 30%);}
.formClLeft{ padding-left: 37px;}

.selectCus select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; padding-inline: 40px;}
.selectCus{ position: relative; display: block;}
.selectCus::before {font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0b1";
    color: var(--clBlackGray); position: absolute; left: 15px; top: 50%; z-index: 1; text-align: center; 
    pointer-events: none;box-sizing: border-box;
    font-size: var(--fontMark);
    transform: translateY(-50%);
}
.selectCus:after {font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f078";
    color: var(--clBlackGray); position: absolute; right: 15px; top: 50%; z-index: 1; text-align: center; 
    pointer-events: none;box-sizing: border-box;   
    font-size: var(--fontMark);
    transform: translateY(-50%);
}

.flexOther{ display: flex; align-items: center; flex-wrap: wrap; padding: .375rem .75rem; gap: 15px;}
.flexAndWork{ display: flex; align-items: center; flex-wrap: wrap; gap: 15px;}
.flexAndWork a{ background: var(--clWhite); color: var(--clRed); border: 1px solid var(--clRed); 
    border-radius: 50px; padding: 5px 10px;}
.flexAndWork a:hover{ background: var(--clRed); color: var(--clWhite); border: 1px solid var(--clRed);}

.submit{ display: flex; align-items: baseline; justify-content: space-between; gap: 15px;}
.submit>*{ flex: 1 0 auto;}
.submit button{ background: var(--clWhite); border: 1px solid var(--clBlackGray); border-radius: 50px; padding: 5px 10px;}
.submit button:last-child{ background: var(--clRed); color: var(--clWhite); border: 1px solid var(--clRed);}
.submit button:hover{ background: var(--clBlackGray); border: 1px solid var(--clBlackGray); color: var(--clWhite);}
.submit button:last-child:hover{ background: var(--clRedHover); border: 1px solid var(--clRedHover);}

/* ชั่วคราว */
.dropdown_searchjob{ min-width: 500px;}
.dropdown_searchjob .grid_searchWork{ display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px;}

@media (max-width:991px){
    .dropdown_searchjob{ min-width: 100%;}
}

.grid_searchWork ul.dropdown_width{ height: 300px; overflow-y: auto;}
.grid_searchWork ul.dropdown_width{ list-style: none;}
.grid_searchWork ul.dropdown_width li{ text-align: left; background: transparent; border: none; padding: 5px 15px; width: 100%; 
    transition: 0.3s ease-in-out;}
.grid_searchWork .dropdown_width li:hover, .grid_searchWork .dropdown_width li.active{ background: var(--clWhitetGray);}

.grid_searchWork ul.dropdown_width::-webkit-scrollbar { width: 10px;}/* width */
.grid_searchWork ul.dropdown_width::-webkit-scrollbar-track { background: #f1f1f1;}/* Track */
.grid_searchWork ul.dropdown_width::-webkit-scrollbar-thumb { background: #888; border-radius: 10px;}/* Handle */
.grid_searchWork ul.dropdown_width::-webkit-scrollbar-thumb:hover {background: #555;}/* Handle on hover */

.grid_searchWork ul.dropdown_width li ~ .dropdown_right{ position: absolute; top: 0; right: 0; width: 50%; height: 100%; overflow-y: auto; display: none;}
.grid_searchWork ul.dropdown_width li ~ .dropdown_right.open{ display: block;}
.grid_searchWork ul.dropdown_width li ~ .dropdown_right li:hover{ background: var(--clWhitetGray);}
.grid_searchWork ul.dropdown_width li ~ .dropdown_right::-webkit-scrollbar { width: 10px;}/* width */
.grid_searchWork ul.dropdown_width li ~ .dropdown_right::-webkit-scrollbar-track { background: #f1f1f1;}/* Track */
.grid_searchWork ul.dropdown_width li ~ .dropdown_right::-webkit-scrollbar-thumb { background: #888; border-radius: 10px;}/* Handle */
.grid_searchWork ul.dropdown_width li ~ .dropdown_right::-webkit-scrollbar-thumb:hover {background: #555;}/* Handle on hover */

.grid_searchWork ul.dropdown_width li ~ .dropdown_right li:hover{ background: transparent;}
.grid_searchWork ul.dropdown_width li ~ .dropdown_right li > div{ display: flex; align-items: center; justify-content: space-between;}