/*
 * Dropdown custom
 */

.custom-select-wrapper { position: relative; user-select: none; width: 100%;}
.custom-select {position: relative; display: flex; flex-direction: column; font-size: 0.8rem;}
.custom-select__trigger { position: relative; display: flex; align-items: center; justify-content: space-between;padding: 10px ; color: #2E2353; background: #ffffff; cursor: pointer; border-width: 2px;  border-style: solid; border-color: #2E2353;  text-transform:  uppercase;  font-family: 'galanogrotesquealt-bold' ; box-sizing:  border-box;}
.custom-options { position: absolute; display: block; top: 100%; left: 0; right: 0; border: 2px solid #2E2353; border-top: 0; background: #fff; transition: all 0.5s; opacity: 0; visibility: hidden; pointer-events: none; z-index: 2;}
.custom-select.open .custom-options { opacity: 1; visibility: visible; pointer-events: all;}
.custom-option {position: relative; display: block; padding: 10px ; color: #2E2353; cursor: pointer; transition: all 0.5s;}
.custom-option:hover { cursor: pointer;  background-color: #F15832;  color: #ffffff;}
.custom-option.selected {  color: #ffffff;  background-color: #F15832;}
.arrow { position: relative;height: 10px; width: 10px;}
.arrow::before, .arrow::after {content: ""; position: absolute;  bottom: 0px; width: 0.10rem; height: 100%; transition: all 0.5s;}
.arrow::before {  left: -3px;transform: rotate(45deg); background-color: #2E2353;}
.arrow::after {left: 3px; transform: rotate(-45deg); background-color: #2E2353;}
.open .arrow::before { left: -3px; transform: rotate(-45deg);}
.open .arrow::after { left: 3px;transform: rotate(45deg);}