.foxReminderSelect {
    position: relative; 
    font-size: var(--baseSize12); 
    width:100%;
    text-align:left;
}
.foxReminderSelect select {
    display: none;
}
.select-selected {
    background-color: var(--bgColor);
    border-radius: 0px var(--borderRadiusThin) var(--borderRadiusThin) 0px;
}
/*style the arrow inside the select element:*/
.select-selected:after {
    position: absolute; 
    content: ""; 
    top:20px; 
    right: 10px; 
    width: 0; 
    height: 0; 
    border: 6px solid transparent; 
    border-color: #fff transparent transparent transparent;
}
/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
    border-color: transparent transparent #fff transparent; 
    top: var(--baseSize16);
}
/*style the items (options), including the selected item:*/
.select-items div,.select-selected {
    height: 1rem; 
    color: var(--myWhite); 
    border: var(--borderWidthThin) solid transparent; 
    cursor: pointer; 
    user-select: none; 
    padding: var(--baseSize16) var(--baseSize12);
    background: None;
}
/*style items (options):*/
.select-items {
    border-radius:var(--borderRadiusThin); 
    border: var(--borderWidthThin) solid var(--borderColor); 
    position: absolute; 
    background-color: var(--bodyBackground); 
    top: 100%; 
    left: 0; 
    right: 0; 
    z-index: 50;
}
/*hide the items when the select box is closed:*/
.select-hide {display: none;}
.select-items div:hover {background-color: var(--borderColor-muted);}
.select-items div{border: 1px solid var(--borderColor-muted);}
.select-items div:first-child {border-radius: var(--borderRadiusThin) var(--borderRadiusThin) 0px 0px;}
.select-items div:last-child {border-radius: 0px 0px var(--borderRadiusThin) var(--borderRadiusThin);}
.select-items div:not(:first-child) {border-top: 0;}
.select-items div:not(:last-child) {border-bottom: 0;}



/* customizing select list inside form */
.foxReminderInnerSelect {
    position: relative; 
    font-size: var(--baseSize12); 
    width:100%;
    text-align: left
}
.foxReminderInnerSelect select {display: none;}
.select-inner-selected {
    flex:100%; 
    height: 100%; 
    background-color: var(--bodyBackground);
    border-radius:var(--borderRadiusThin); 
    border: 1px solid var(--borderColor-muted);
    cursor:default;
}
/*style the arrow inside the select element:*/
.select-inner-selected:after {
    position: absolute; 
    content: ""; 
    top:1.75rem; 
    right: 10px; 
    width: 0; 
    height: 0; 
    border: 6px solid transparent; 
    border-color: #fff transparent transparent transparent;
}
/*point the arrow upwards when the select box is open (active):*/
.select-inner-selected.select-arrow-active:after {
    border-color: transparent transparent #fff transparent; 
    top: var(--baseSize16);
}
/*style the items (options), including the selected item:*/
.foxReminderInnerSelect div.select-inner-selected {
    /*
    color: var(--myWhite); 
    padding: var(--baseSize16) var(--baseSize12) !important;
    border-radius: var(--borderRadiusThin);
    min-height: var(--fieldLargeHeight);
    */
    margin-bottom: var(--baseSize16);
    background: var(--bodyBackground);
    display: block;
    border: 1px solid var(--borderColor);
    /*-webkit-box-shadow: 0 0 var(--baseSize8) var(--borderColor);*/
    overflow-x: scroll;
    padding:1.25rem;
    width: 100%;
    width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available;
}
.select-inner-items div{
    height: 3rem; 
    display:flex;
    align-items:center;
    padding:0 1rem;
    cursor:default;
}
.select-inner-items div,
.select-inner-selected {
    font-size: var(--baseSize16);
}
/*style items (options):*/
.select-inner-items {
    width:100%; 
    border-radius:var(--borderRadiusThin); 
    border: var(--borderWidthThin) solid var(--borderColor); 
    position: absolute; 
    background-color: var(--bgColor); 
    top: 100%; 
    z-index: 50;
}
/*hide the items when the select box is closed:*/
.select-inner-hide {display: none;}
.select-inner-items {
    max-height:300px;
    overflow:scroll;
}
.select-inner-items div:hover {
    background-color:  var(--borderColor-muted);
}
.select-inner-items div:hover:first-child {
    border-radius: var(--borderRadiusThin) var(--borderRadiusThin) 0px 0px;
}
.select-inner-items div:hover:last-child {
    border-radius: 0px 0px var(--borderRadiusThin) var(--borderRadiusThin);
}
.icon-left {
    border-radius: var(--borderRadiusThin) 0 0 var(--borderRadiusThin);
}
.selectedLabel{
    z-index:51;
}

/* for page cluster admin */
.blackBlock div.foxReminderInnerSelect div.select-inner-selected,
.blackBlock .formFieldV3 div.foxReminderInnerSelect div.select-inner-selected{
    background:var(--bgColor);
}