/**--------------------------*/
/**   SUMOSELECT CUSTOM      */
/**--------------------------*/
.SumoSelect { cursor: pointer; z-index: 3; display: block; width: 100%; }

.SumoSelect.open { z-index: 4 !important; }

.SumoSelect.open .CaptionCont { border-radius: 4px; }

.SumoSelect:hover { z-index: 3; }

.SumoSelect > .CaptionCont { cursor: pointer; -webkit-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); background: transparent; border-radius: 8px; border: 1px solid rgba(2, 94, 155, 0.12); }

.SumoSelect > .optWrapper { z-index: 5; overflow: auto; -webkit-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); top: 100%; left: 0; display: block; background-color: var(--clr-white); border: 1px solid rgba(2, 94, 155, 0.12); border-radius: 0 0 8px 8px; -webkit-box-shadow: none; box-shadow: none; padding: 0; opacity: 0; visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

.SumoSelect.open > .CaptionCont, .SumoSelect:focus > .CaptionCont, .SumoSelect:hover > .CaptionCont { -webkit-box-shadow: none; box-shadow: none; }

.SelectBox { width: 100%; font-size: 16px; line-height: 1.52em; font-weight: 400; color: var(--clr-primary-dark); padding: 11px 16px; }

.SumoSelect > .CaptionCont > span.placeholder { font-size: 16px; line-height: 1.52em; font-weight: 400; font-style: normal; color: var(--clr-primary-dark); -webkit-backface-visibility: hidden; backface-visibility: hidden; }

.SumoSelect.open > .CaptionCont > span.placeholder { opacity: 1; }

.SumoSelect > .CaptionCont > span { padding-right: 0; cursor: pointer; font-size: 16px; line-height: 1.52em; font-weight: 400; color: var(--clr-primary-dark); }

.SumoSelect > .CaptionCont > label { cursor: pointer; width: 40px; }

.SumoSelect > .CaptionCont > label > i { background-image: none; opacity: 1; width: 30px; height: 30px; }

.SumoSelect > .CaptionCont > label > i:before { content: ""; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -70%); -ms-transform: translate(-50%, -70%); transform: translate(-50%, -70%); -webkit-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); display: inline-block; vertical-align: middle; border-top: 0.3em solid; border-right: 0.3em solid transparent; border-bottom: 0; border-left: 0.3em solid transparent; }

.SumoSelect.open > .CaptionCont > label > i:before { -webkit-transform: translate(-50%, -30%) rotate(-180deg); -ms-transform: translate(-50%, -30%) rotate(-180deg); transform: translate(-50%, -30%) rotate(-180deg); }

.SumoSelect.open > .optWrapper { top: 100%; opacity: 1; visibility: visible; }

.SumoSelect > .optWrapper > .options li.opt { padding: 0; border-bottom: 0; -webkit-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

.SumoSelect > .optWrapper > .options > li.opt:first-child { border-radius: 0; }

.SumoSelect > .optWrapper > .options li label { font-size: 16px; line-height: 1.52em; font-weight: 400; letter-spacing: 0; color: var(--clr-primary-dark); -webkit-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); padding: 11px 16px; }

.SumoSelect > .optWrapper > .options { border-radius: 0; padding: 0; }

.options > .opt.disabled:first-child { display: none; }

.SumoSelect.disabled { opacity: 1; }

.SumoSelect.disabled > .CaptionCont { border: 1px solid rgba(235, 235, 235, 0.15); cursor: not-allowed; }

.SumoSelect.disabled > .CaptionCont > span { cursor: not-allowed; }

/*select level*/
.select-wrapper.type2 .SelectBox { padding: 8px 50px 8px 10px; }

.select-wrapper.type2 .SumoSelect > .CaptionCont { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: var(--clr-grey-100); border-radius: 4px; text-align: left; border: none; line-height: 0; }

.select-wrapper.type2 .SumoSelect > .CaptionCont > span, .select-wrapper.type2 .SumoSelect > .CaptionCont > span.placeholder { position: relative; display: inline-block; color: var(--clr-black); }

.select-wrapper.type2 .SumoSelect > .CaptionCont > span::before { content: 'Level'; position: relative; display: block; font-size: 13px; line-height: 1.23em; font-weight: 400; letter-spacing: 0.03em; color: var(--clr-grey-600); }

.select-wrapper.type2 .SumoSelect > .CaptionCont > i, .select-wrapper.type2 .SumoSelect > .optWrapper > .options li > i { display: inline-block; width: 34px; height: 34px; margin-right: 10px; }

.select-wrapper.type2 .SumoSelect > .optWrapper { background: var(--clr-grey-100); border-radius: 0 0 4px 4px; text-align: left; border: none; line-height: 0; }

.select-wrapper.type2 .SumoSelect > .optWrapper > .options li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 8px 10px; }

.select-wrapper.type2 .SumoSelect > .optWrapper > .options li label { padding: 0; color: var(--clr-black); display: inline-block; }

.select-wrapper.type2 .SumoSelect > .CaptionCont > label { width: 50px; }

.select-wrapper.type2 .SumoSelect > .CaptionCont > label > i:before { width: 12px; height: 12px; border-left: 2px solid var(--clr-primary-dark); border-bottom: 2px solid var(--clr-primary-dark); -webkit-transform: translate(-50%, -70%) rotate(-45deg); -ms-transform: translate(-50%, -70%) rotate(-45deg); transform: translate(-50%, -70%) rotate(-45deg); border-top: none; border-right: none; }

.select-wrapper.type2 .SumoSelect.open > .CaptionCont > label > i:before { -webkit-transform: translate(-50%, -30%) rotate(-225deg); -ms-transform: translate(-50%, -30%) rotate(-225deg); transform: translate(-50%, -30%) rotate(-225deg); }

@media (hover: hover) and (min-width: 1200px), (-ms-high-contrast: none) { .SumoSelect > .CaptionCont:hover > span.placeholder { opacity: 1; }
  .SumoSelect.disabled > .CaptionCont:hover { border: 1px solid rgba(235, 235, 235, 0.15); }
  .SumoSelect > .optWrapper > .options li.opt:hover { background-color: var(--clr-primary); }
  .SumoSelect > .optWrapper > .options li.opt:hover label { color: var(--clr-white); } }

@media (max-width: 1199px) { .SelectBox { width: auto; }
  .SumoSelect > .optWrapper { left: 0; } }

@media (max-width: 767px) { .SelectBox { font-size: 14px; }
  .SumoSelect > .CaptionCont > span.placeholder { font-size: 14px; }
  .SumoSelect > .CaptionCont > span { font-size: 14px; }
  .SumoSelect.open > .optWrapper { margin-top: 0; }
  .SumoSelect > .optWrapper > .options li label { font-size: 14px; padding: 10px 16px; } }

/*select all*/
.SumoSelect .select-all { border-radius: 0; border-bottom: none; background-color: transparent; padding: 0; height: auto; }

.SumoSelect .select-all > label { display: block; padding: 0 0 16px 30px; font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: 0.05em; color: var(--clr-primary-dark); -webkit-transition: var(--transition); -o-transition: var(--transition); transition: var(--transition); }

.SumoSelect .select-all > span, .SumoSelect > .optWrapper.multiple > .options li.opt span { top: 0; width: 22px; height: 22px; margin-left: 0; border-radius: 4px; }

.SumoSelect > .optWrapper.multiple > .options li.opt span { top: 16px; }

.SumoSelect .select-all > span i, .SumoSelect > .optWrapper.multiple > .options li.opt span i { width: 20px; height: 20px; border-radius: 4px; border: 2px solid var(--clr-primary-dark); -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-primary-dark); }

.SumoSelect .select-all > span i { opacity: 0; }

.SumoSelect > .optWrapper.multiple > .options li.opt { padding: 16px 0 16px 25px; }

.SumoSelect > .optWrapper.multiple > .options li.opt label { line-height: 22px; font-weight: 600; letter-spacing: 0.05em; padding: 0 0 0 30px; white-space: initial; }

.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-primary-dark); background-image: none; }

@media (min-width: 1200px) { .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: 1440px) { .SumoSelect .select-all > label { padding: 0 0 12px 30px; }
  .SumoSelect > .optWrapper.multiple > .options li.opt span { top: 12px; }
  .SumoSelect > .optWrapper.multiple > .options li.opt { padding: 12px 0 12px 25px; } }