/*---------------------*/
/* - Sumoselect Custom */
/*---------------------*/
.SelectBox { padding: 0; margin: 0; line-height: 0; font-size: 0; }
.SumoSelect { z-index: 3; width: 100%; cursor: pointer; }
.SumoSelect > .CaptionCont { border: none; border-radius: 0; text-align: left; max-height: 54px; padding: 18px 35px 18px 15px; background: transparent; -webkit-transition: var(--transition-1); -o-transition: var(--transition-1); transition: var(--transition-1); -webkit-box-shadow: inset 0 -2px 0 0 var(--clr-grey-600); box-shadow: inset 0 -2px 0 0 var(--clr-grey-600); }
.SumoSelect > .CaptionCont > span { cursor: pointer; padding-right: 0; font-size: 18px; line-height: 1.1em; font-weight: 500; color: var(--clr-black); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.SumoSelect > .CaptionCont > span.placeholder { font-style: normal; color: var(--clr-black); }
.SumoSelect > .CaptionCont > label { cursor: pointer; width: 20px; margin-right: 15px;bottom: auto; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.SumoSelect > .CaptionCont > label i { background-image: none; opacity: 1; width: 20px; height: 20px; right: 0; -webkit-transition: var(--transition-1); -o-transition: var(--transition-1); transition: var(--transition-1); }
.SumoSelect > .CaptionCont > label i:before { content: ''; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: inline-block; width: 0; height: 0; border-style: solid; border-width: 8px 8.5px 0 8.5px; border-color: var(--clr-black) transparent transparent transparent; -webkit-transition: var(--transition-1); -o-transition: var(--transition-1); transition: var(--transition-1); }
.SumoSelect:focus > .CaptionCont, .SumoSelect:hover > .CaptionCont { -webkit-box-shadow: inset 0 -2px 0 0 var(--clr-grey-600); box-shadow: inset 0 -2px 0 0 var(--clr-grey-600); }
.SumoSelect > .optWrapper { display: block; overflow: auto; z-index: 2; padding: 0; top: calc(100% + 15px); left: 0; width: 100%; border: none; border-radius: 0; opacity: 0; visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; background-color: var(--clr-white); -webkit-box-shadow: 0 15px 29px 0 rgba(0, 0, 0, 0.07); box-shadow: 0 15px 29px 0 rgba(0, 0, 0, 0.07); -webkit-transition: 0s; -o-transition: 0s; transition: 0s; }
.SumoSelect.open { z-index: 4 !important; }
.SumoSelect.open > .CaptionCont { -webkit-box-shadow: inset 0 -3px 0 0 var(--clr-black) !important; box-shadow: inset 0 -3px 0 0 var(--clr-black) !important; }
.SumoSelect.open > .CaptionCont > label > i { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); }
.SumoSelect.open > .optWrapper { opacity: 1; visibility: visible; top: calc(100% + 5px); -webkit-transition: var(--transition-1); -o-transition: var(--transition-1); transition: var(--transition-1); }
.SumoSelect > .optWrapper > .options li.opt { padding: 0; border-bottom: 0; }
.SumoSelect > .optWrapper > .options li.opt.selected label { font-weight: 500; }
.SumoSelect > .optWrapper > .options li label { white-space: unset; text-align: left; padding: 10px 20px; font-size: 18px; line-height: 1.1em; font-weight: 300; color: var(--clr-black); -webkit-transition: var(--transition-1); -o-transition: var(--transition-1); transition: var(--transition-1); }
.SumoSelect > .optWrapper > .options { max-height: 210px; padding: 10px 0; border-radius: 0 !important; }
.options > .opt.disabled:first-child { display: none; }
.SumoSelect>.optWrapper>.options li.group>label {padding: 10px 15px;font-weight: 600;}
.SumoSelect>.optWrapper>.options li ul li.opt {padding-left: 10px;}
.SumoSelect > .optWrapper.multiple > .options li.opt { padding-left: 45px; }
.SumoSelect > .optWrapper.multiple > .options li.opt label { padding-left: 30px; font-weight: 500; }
.SumoSelect > .optWrapper.multiple .select-all + .options { padding-top: 0; }
.SumoSelect > .optWrapper.multiple .options { max-height: 200px; }
.SumoSelect .select-all { border-radius: 0; position: relative; border-bottom: none; background-color: transparent; padding: 0 0 0 25px; height: auto; }
.SumoSelect .select-all > label { display: block; padding: 12px 20px 12px 30px; font-size: 16px; line-height: 1em; font-weight: 500; color: var(--clr-black); -webkit-transition: var(--transition-1); -o-transition: var(--transition-1); transition: var(--transition-1); }
.SumoSelect .select-all > span, .SumoSelect > .optWrapper.multiple > .options li.opt span { top: 11px; width: 18px; height: 18px; margin-left: 0; }
.SumoSelect .select-all > span i, .SumoSelect > .optWrapper.multiple > .options li.opt span i { width: 18px; height: 18px; border-radius: 2px; border: 2px solid var(--clr-black); -webkit-box-shadow: none; box-shadow: none; }
.SumoSelect .select-all > span i::before, .SumoSelect > .optWrapper.multiple > .options li.opt span i::before { content: ''; position: absolute; top: calc(50% - 2px); left: 50%; -webkit-transform: translate(-50%, -50%) rotate(-45deg); -ms-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); width: 11px; height: 6px; border-left: 2px solid var(--clr-white); border-bottom: 2px solid var(--clr-white); }
.SumoSelect .select-all > span { background-color: var(--clr-red); }
.SumoSelect .select-all > span i { opacity: 0; }
.SumoSelect .select-all > span::after { content: ''; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 11px; height: 2px; background: var(--clr-white); }
.SumoSelect .select-all.selected:not(.partial) > span i, .SumoSelect > .optWrapper.multiple > .options li.opt.selected span i { opacity: 1; z-index: 3; background-color: var(--clr-red); background-image: none; }
.SumoSelect.disabled { opacity: 0.6; }
.SumoSelect.disabled > .CaptionCont { cursor: not-allowed; -webkit-box-shadow: inset 0 -2px 0 0 var(--clr-grey-600); box-shadow: inset 0 -2px 0 0 var(--clr-grey-600); }
.SumoSelect.disabled > .CaptionCont > span { cursor: not-allowed; }
.select-wrapper.invalid .SumoSelect > .CaptionCont > span, .select-wrapper.invalid .SumoSelect > .CaptionCont > span.placeholder { color: var(--clr-red); }
.select-wrapper.invalid .SumoSelect > .CaptionCont { -webkit-box-shadow: inset 0 -2px 0 0 var(--clr-red); box-shadow: inset 0 -2px 0 0 var(--clr-red); }
.SumoSelect .custom-text { text-align: center; padding: 20px; border-top: 2px solid #e5e5e5; font-weight: 600; }

@media (min-width: 1200px) { .SumoSelect > .optWrapper > .options li.opt:hover { background-color: var(--clr-grey-200); }
  .SumoSelect > .optWrapper > .options li.opt:hover label { color: var(--clr-primary); }
  .SumoSelect .select-all:hover { color: var(--clr-primary); }
  .SumoSelect > .optWrapper.multiple > .MultiControls > p.btnOk:hover { background: var(--clr-white); color: var(--clr-primary); } }

@media (max-width: 767px) { .SelectBox { padding: 13px 5px 14px 0; }
  .SumoSelect > .CaptionCont { padding: 20px 35px 20px 15px; }
  .SumoSelect > .CaptionCont > span.placeholder { font-size: 16px; }
  .SumoSelect > .CaptionCont > span { font-size: 16px; }
  .SumoSelect > .optWrapper > .options li label { font-size: 16px; padding: 10px 15px; }
  .SumoSelect > .optWrapper > .options { padding: 5px 0; } }