:root {
    --background-medium-color: #212121;
    --background-light-color: #272727; 
    --background-dark-color: #303030; 
    --text-color: #ecf0f1;
    --text-second-color: #bdc3c7;
    --selected-dark-color : #00f0ff;
    --hover-dark-color: #059faa;
  }
  div.andy-ui-autocomplete-results-wrapper{
    position: absolute;
    z-index: -1; 
    pointer-events: none; 
    opacity: 0; 
    transition: 175ms opacity ease; 
    box-shadow: 4px 3px 20px -5px rgba(0, 0, 0, 0.73);
}

div.andy-ui-autocomplete-results-wrapper.show{
    z-index: 999999999999;
    pointer-events: all; 
    opacity: 1;
}

div.andy-ui-autocomplete-results-wrapper>div.result-item{
    width: 100%;
    height: 35px;
    background-color: #424242;
    color: #fff;
    font-size: 15px;
    box-sizing: border-box;
    padding-left: 15px;
    padding-top: 8px;
    display: flex;
    align-content: center;
    transition: 175ms ease all;
    overflow: hidden;
    border-left: 3px solid rgb(66, 66, 66);
}


div.andy-ui-autocomplete-results-wrapper>div.result-item:hover{
    border-left: 3px solid #00B0FF;
}div.andy-ui-button {
    box-sizing: border-box;
    padding: 4px;
    border-radius: var(--button-border-radius);
    background-color: var(--button-bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

div.andy-ui-button.hide{
    display: none; 
}

div.andy-ui-button.disabled {
    pointer-events: none; 
}

div.andy-ui-button>div.andy-ui-label {
    color: var(--button-fr-color); 
}

div.andy-ui-button>div.andy-ui-icon {
    color: var(--button-fr-icon-color);   
}

div.andy-ui-button.disabled>div.andy-ui-label {
    color: var(--button-fr-color-disabled); 
}

div.andy-ui-button.disabled>div.andy-ui-icon {
    color: var(--button-fr-color-disabled);   
}

div.andy-ui-button.disabled:hover {
    background-color: var(--button-bg-color-disabled); 
    box-shadow: none;
}

div.andy-ui-button.disabled:active {
    background-color: var(--button-bg-color-disabled);  
    box-shadow: none;
}

div.andy-ui-button:hover {
    cursor: pointer;
    /* box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); */
    background-color: var(--button-bg-color-hover) !important;
}

div.andy-ui-button:hover>div.andy-ui-label {
    color: var(--button-fr-color-hover); 
}

div.andy-ui-button:hover>div.andy-ui-icon {
    color: var(--button-fr-icon-color-hover);   
}


div.andy-ui-button:active {
    background-color: var(--button-bg-color-active) !important;
    /* box-shadow: 0 0 0 rgba(0, 0, 0, 0); */
}


div.andy-ui-button:active>div.andy-ui-label {
    color: var(--button-fr-color-active); 
}

div.andy-ui-button:active>div.andy-ui-icon {
    color: var(--button-fr-icon-color-active);   
}

div.andy-ui-button.hidden {
    display: none;
}div.andy-ui-chart {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    font-size: 1em;
    color: #fff;
    margin-left: 5px;
    margin-right: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    background-color: #424242;
    justify-content: center;
    align-items: center;
}

div.andy-ui-chart>div.content {
    width: 95%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    box-sizing: border-box;
    /* padding: 20px; */
}

div.andy-ui-indicator>footer {}div.andy-ui-checkbox {
    width: 22px;
    height: 22px;
    background-color: var(--checkbox-bg-color);
    border-radius: var(--checkbox-radius);
    position: relative;
    pointer-events: all;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-right: 10px;
}

div.andy-ui-checkbox>span.pin {
    box-sizing: border-box;
    z-index: 1;
    transition: ease all 0.3s;
    font-size: 16px;
    font-weight: bold;
    opacity: 0;
    color: var(--checkbox-fg-color);
}

div.andy-ui-checkbox.selected {
    background-color: var(--checkbox-bg-color-selected);
}

div.andy-ui-checkbox.selected>span.pin {
    opacity: 1;
}div.andy-ui-colorpicker {}

div.andy-ui-colorpicker>div.color-preview-button {
    width: 20px;
    height: 20px;
    background-color: transparent;
    box-sizing: border-box;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid var(--color-picker-preview-border-color);
}

div.andy-ui-colorpicker-wrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    visibility: hidden;
    z-index: -1;
    pointer-events: none;
}

div.andy-ui-colorpicker-wrapper.show {
    visibility: visible;
    pointer-events: all;
    z-index: 9999999999998;
}

div.andy-ui-colorpicker-modal {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1;
    visibility: hidden;
    pointer-events: none;
    background-color: var(--color-picker-modal-bg-color);
    border-radius: var(--color-picker-modal-radius);
    box-shadow: 4px 3px 20px -5px rgba(0, 0, 0, 0.73);
    box-sizing: border-box;
    padding: 10px;
}

div.andy-ui-colorpicker-modal.show {
    z-index: 9999999999999;
    visibility: visible;
    pointer-events: all;
}

div.andy-ui-colorpicker-modal>div.picker_wrapper {
    background: transparent !important;
}


div.andy-ui-colorpicker-modal>div.picker_wrapper>div.picker_slider {
    border-radius: var(--color-picker-slider-radius);
}

div.andy-ui-colorpicker-modal>div.picker_wrapper>div.picker_slider>div.picker_selector {
    border-radius: var(--color-picker-selector-radius);
}

div.andy-ui-colorpicker-modal>div.picker_wrapper>div.picker_sample {
    overflow: hidden;
    border-radius: var(--color-picker-sample-radius);
}   div.andy-ui-container-wrapper {
    position: relative;
    height: 100%;
    width: 100%;
}

div.andy-ui-container {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: auto;
    flex-direction: column;
    box-sizing: border-box;
    /* padding: 20px;  */
    /* background-color: var(--background-dark-color);  */
}

div.andy-ui-container.fade {
    transition: 200ms opacity ease, 400ms transform ease;
    opacity: 0;
    /* transform: translateX(-100%);  */
}

div.andy-ui-container.fade.show {
    opacity: 1;
    /* transform: translateX(0);  */
}

div.andy-ui-container>div.andy-ui-form:last-child {
    margin-bottom: 0;
}div.andy-ui-dropdown {
    display: flex;
    flex-direction: row;
    position: relative;
    align-items: center;
    border-radius: 6px;
    box-sizing: border-box;
    margin-top: 12px;
    margin-bottom: 2px;


}


div.andy-ui-dropdown-wrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    visibility: hidden;
    z-index: -1;
    pointer-events: none;
}

div.andy-ui-dropdown-wrapper.show {
    visibility: visible;
    pointer-events: all;
    z-index: 9999999998;
}

div.andy-ui-dropdown-modal {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1;
    visibility: hidden;
    pointer-events: none;
    background-color: #424242;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    box-shadow: 4px 3px 20px -5px rgba(0, 0, 0, 0.73);
    box-sizing: border-box;
    min-width: fit-content;
}

div.andy-ui-dropdown-modal.show {
    z-index: 9999999999999;
    visibility: visible;
    pointer-events: all;
}


div.andy-ui-dropdown-modal>div.andy-ui-group>div.andy-ui-button{
    width: 100%;
    justify-content:flex-start;  
    border-radius: 0;
}

div.andy-ui-dropdown-modal>div.andy-ui-group>div.andy-ui-button:hover{
    box-shadow: none; 
    background-color: rgba(115, 115, 115, 0.37);
}div.andy-ui-fileuploader {
    position: relative;
    display: flex;
    width: 260px;
    height: 160px;
    justify-content: center;
    align-items: center;
    background-color: #212121;
    transition: background-color ease 275ms;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
}

div.andy-ui-fileuploader.withfile {
    align-items: flex-end;
}

div.andy-ui-fileuploader.withfile>div.andy-ui-label {
    background-color: rgba(0, 0, 0, 0.5);
    word-wrap: break-word;
    width: 80%;
}

div.andy-ui-fileuploader:hover {
    background-color: #424242;
}

div.andy-ui-fileuploader>div.andy-ui-button {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 30px;
    height: 30px;
    box-shadow: none;
}

div.andy-ui-fileuploader.withfile>div.andy-ui-button {
    visibility: visible;
    pointer-events: all;
}div.andy-ui-form {
    position: relative;
    width: 100%;
    transition: ease 375ms all;
    border-radius: var(--form-border-radius);
    box-shadow: 0 0 13px 0 rgba(82,63,105,.05);
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
}

div.andy-ui-form.hide {
    display: none;
}

div.andy-ui-form>div.header {
    display: flex;
    align-items: center;
    justify-content: left;
    position: sticky;
    top: 0px;
    padding: 15px 25px 15px 25px;
    height: 60px;
    background-color: var(--form-bg-color);
    z-index: 3;
    border-bottom: var(--form-divisor-style);
    border-radius: var(--form-border-radius) var(--form-border-radius) 0 0;
}

div.andy-ui-form>div.header>div.andy-ui-label {
    font-size: var(--form-header-title-font-size);
    font-weight: 500;
    margin: 0;
    box-sizing: border-box;
    color: var(--form-header-fr-color)
}

div.andy-ui-form>div.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: auto;
    padding: 0px 25px 0px 25px;
    position: relative;
    z-index: 1;
    background-color: var(--form-bg-color);
}

div.andy-ui-form>div.content>div.field {
    display: flex;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    position: relative;
    flex-direction: column;
    box-sizing: border-box;
}

div.andy-ui-form>div.content>div.field>div.label-wrapper>div.form-label {
    font-size: 0.9em;
    color: var(--field-label-fr-color);
    margin: 0px 0px 8px 1px;
    width: fit-content;
    position: relative;
}

div.andy-ui-form>div.content>div.field>div.description-wrapper>div.form-description {
    font-size: 0.9em;
    color: var(--field-description-fr-color);
    margin: 6px 0px 0px 1px;
    width: fit-content;
    position: relative;
}

div.andy-ui-form>div.content>div.field>div.field-wrapper {
    position: relative;
}

div.andy-ui-form>div.content>div.field>div.required {
    font-size: 0.9em;
    color: var(--field-required-fr-color);
    margin-left: 5px;
    width: fit-content;
}

div.andy-ui-form>div.footer>div.andy-ui-group {
    flex: none;
}

div.andy-ui-form>div.footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: sticky;
    bottom: 0px;
    padding: 15px 25px 15px 25px;
    height: 60px;
    z-index: 2;
    background-color: var(--form-bg-color);
    border-radius: 0 0 var(--form-border-radius) var(--form-border-radius);
    border-top: var(--form-divisor-style);
}

div.andy-ui-form>div.footer:empty {
    /* passing border-radius size to height to keep design ; */
    height: var(--form-border-radius); 
    border-top: none;
}div.andy-ui-gridlist {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

div.andy-ui-gridlist.groups {
  flex-direction: column;
  flex-wrap: unset;
}

div.andy-ui-gridlist > div.group-wrapper {
  display: flex;
  width: 100%;
  flex-direction: column;
}

div.andy-ui-gridlist > div.group-wrapper > div.header {
  width: 100%;
  height: 60px;
}

div.andy-ui-gridlist > div.group-wrapper > div.header > div.andy-ui-label {
  font-size: 1.25em;
}

div.andy-ui-gridlist > div.group-wrapper > div.content {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

div.andy-ui-gridlist div.tile {
  position: relative;
  border-radius: var(--gridlist-tile-border-radius);
  justify-content: center;
  align-items: center;
  display: flex;
  height: var(--gridlist-tile-size);
  width: var(--gridlist-tile-size);
  flex-direction: column;
  overflow: hidden;
  margin: var(--gridlist-tile-margin);
  box-sizing: border-box;
  transition: border ease 175ms;
  background-color: var(--gridlist-tile-bg-color);
  border: 1px solid var(--gridlist-tile-border-color);
}

div.andy-ui-gridlist div.tile.selected {
  border: 2px solid var(--selected-dark-color);
}

div.andy-ui-gridlist div.tile.hide {
  display: none;
}

div.andy-ui-gridlist div.tile:hover {
  border: 1px solid var(--gridlist-tile-border-color-hover);
}
div.andy-ui-group {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex: 2;
}

div.andy-ui-group.hide {
    display: none; 
}


div.andy-ui-group>div.andy-ui-button {
    margin: 0px 10px 0px 10px;
}

.andy-ui-icon {
    width: auto;
    height: auto;
    position: relative;
    color: var(--icon-fr-color);
    background-color: var(--icon-bg-color);
    border-radius: var(--icon-border-radius);
}

.andy-ui-icon.image {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.andy-ui-icon.disabled{
    color: var(--icon-fr-color-disabled) !important;
    background-color: var(--icon-bg-color-disabled) !important;
    pointer-events: none; 
}div.andy-ui-indicator {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    font-size: 1em;
    color: #fff;
    margin-left: 5px;
    margin-right: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    background-color: #424242;
}

div.andy-ui-indicator>div.content {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    box-sizing: border-box;
    padding: 20px;
}

div.andy-ui-indicator>footer {}input.andy-ui-input.not-valid {
    border-color: var(--input-invalid-color);
}

input.andy-ui-input {
    background-color: var(--input-bg-color);
    border: solid 1px var(--input-border-color);
    border-radius:var(--input-border-radius);
    font-size: var(--input-font-size);
    color: var(--input-fr-color);
    height: calc(1.5em + 1.3rem + 2px);
    padding: 0.65rem 1rem;
    box-sizing: border-box;
    box-shadow: none;
    outline: none;
    transition: ease 375ms all;
    width: 100%;
}

input.andy-ui-input:focus {
    border: solid 1px var(--input-focus-border-color);
}div.andy-ui-label {
    position: relative;
    font-size:  var(--label-font-size);
    color: var(--label-fr-color);
    margin: 5px;
    margin-right: 10px;
}div.andy-ui-list {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 10px;
  /* justify-content: center; */
  align-items: center;
}

div.andy-ui-list>div.placeholder {
  visibility: hidden;
}

div.andy-ui-list>div.placeholder>div.andy-ui-label {
  color: var(--list-placeholder-fr-color);
  text-align: center;
}

div.andy-ui-list>ul:empty+div.placeholder {
  visibility: visible;
}

div.andy-ui-list>ul:empty {
  visibility: hidden;
}

div.andy-ui-list>ul {
  width: 100%;
  box-sizing: border-box;
  padding: 0px;
}

div.andy-ui-list>ul>li {
  width: 100%;
  position: relative;
  transition: ease 175ms all;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 4px;
  border-radius: var(--list-item-border-radius);
  background-color: var(--list-item-bg-color);
  color: var(--list-item-fr-color);
}

div.andy-ui-list>ul>li:hover {
  background-color: var(--list-item-bg-color-hover);
  color: var(--list-item-fr-color-hover);
}

div.andy-ui-list>ul>li>div.andy-ui-group>div.andy-ui-icon.image {
  width: 80px;
  height: 80px;
  background-size: cover;
  border-radius: 5px;
}

div.andy-ui-list>ul>li>div.andy-ui-group>div.andy-ui-label {
  flex: 2;
}div.andy-ui-menu.horizontal{
    flex-direction: row;
    justify-content: flex-end;
}

div.andy-ui-menu.horizontal>div.item{
    display: flex;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
    border-bottom: 3px solid transparent;
    position: relative;
}

div.andy-ui-menu.horizontal>div.item:hover{
    border-bottom: solid 3px var(--hover-dark-color);
}

div.andy-ui-menu.horizontal>div.item:active{

}

div.andy-ui-menu.horizontal>div.item.selected{
    border-bottom: 3px solid var(--selected-dark-color);;
}

div.andy-ui-menu.horizontal>div.item.selected>div.icon{
    color: var(--selected-dark-color);
}

div.andy-ui-menu.horizontal>div.item>div.andy-ui-icon{
    top: 0px;
    width: 45px;
    height: 100%;
    background-color: transparent;
    transition: ease 0.3s all;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    font-size: 25px;
}

div.andy-ui-menu.horizontal>div.item.selected>div.label{
    color: var(--selected-dark-color);
}

div.andy-ui-menu.horizontal>div.item>div.andy-ui-label{
    position: relative;
    top: 0px;
    left: 0px;
    font-size: 15px;
    display: flex;
    align-items: center;
    color: #FFF;
    font-size: 15px;
    transition: ease 0.3s all;
}div.andy-ui-menu {
    width: 100%;
    display: flex;
}

div.andy-ui-menu.vertical {
    flex-direction: column;
    background-color: #1d1f21;
}

div.andy-ui-menu.vertical>div.item {
    width: 100%;
    height: 60px;
    position: relative;
    transition: ease 175ms all;
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: solid 4px transparent;
}

div.andy-ui-menu.vertical>div.item:hover {
    border-left: solid 4px #3758fd;
}

div.andy-ui-menu.vertical>div.item:active {}

div.andy-ui-menu.vertical>div.item.selected {
    border-left: solid 4px #4665ff;
    background-color: #343B41;
}

div.andy-ui-menu.vertical>div.item.selected>div.icon {
    color: var(--selected-dark-color);
}

div.andy-ui-menu.vertical>div.item>span.andy-ui-icon {
    background-color: transparent;
    transition: ease 0.3s all;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #e6e6e6;
    font-size: 20px;
}

div.andy-ui-menu.vertical>div.item.selected>div.label {
    color: var(--selected-dark-color);
}

div.andy-ui-menu.vertical>div.item>div.andy-ui-label {
    height: 100%;
    font-size: 15px;
    display: flex;
    align-items: center;
    font-size: 15px;
    transition: ease 0.3s all;
    color: #FFF;
}div.andy-ui-modal {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    visibility: hidden;
    background-color: var(--modal-overlay-bg-color);
    pointer-events: none;
    opacity: 0;
    transition: 0.3s ease opacity, 0.3s ease visibility;
}

div.andy-ui-modal.show {
    visibility: visible;
    pointer-events: all;
    opacity: 1;
    z-index: 9997;
}

div.andy-ui-modal.zindex {
    z-index: 9999 !important;
}

div.andy-ui-modal>div.modal {
    position: absolute;
    top: 0px; 
    right: 0px;
    max-width: 80%;
    min-width: 500px;
    height: 100% !important;
    min-height: 100%;
    background-color: var(--modal-bg-color);
    overflow: auto;
    border-radius: var(--modal-border-radius);
    box-shadow: 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12);
    box-sizing: border-box;
    transform: translateX(100%);
    opacity: 0;
    transition: 275ms ease transform ,175ms ease opacity ;
}

div.andy-ui-modal.show>div.modal {
    transform: translateX(0);
    opacity: 1;
}

div.andy-ui-modal>div.modal>div.andy-ui-form {
    margin-bottom: 0;
    max-height: -webkit-fill-available;
    height: 100%;
}


div.andy-ui-modal>div.modal>div.andy-ui-form>div.content {
    height: -webkit-fill-available;
}div.andy-ui-radiobutton {
    width: 22px;
    height: 22px;
    background-color: #525556;
    border-radius: 15px;
    position: relative;
    pointer-events: all;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

div.andy-ui-radiobutton>div.pin {
    width: 16px;
    height: 16px;
    border-radius: 15px;
    background-color: rgba(216, 217, 217, 0.1);
    z-index: 1;
    transition: ease all 0.3s;
}

div.andy-ui-radiobutton.selected>div.pin {
    background-color: #00b0ff;
}div.andy-ui-richtext-modal {
    width: 100%;
    z-index: -1;
    visibility: hidden;
    pointer-events: none;
    background-color: #303030;
    border-radius: 0px;
    box-sizing: border-box;
    padding: 10px;
}

div.andy-ui-richtext-modal.show {
    z-index: 9999;
    visibility: visible;
    pointer-events: all;
    position: absolute;
    right: 0px;
    top: 0px;
    bottom: 0px;
    left: 0px;
}

div.andy-ui-richtext-wrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    visibility: hidden;
    z-index: -1;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

div.andy-ui-richtext-wrapper.show {
    visibility: visible;
    pointer-events: all;
    z-index: 9998;
}

div.andy-ui-richtext {
    flex: 1;
    height: 100%;
    position: relative;
    box-sizing: border-box;
    padding-right: 20px;
}

div.andy-ui-richtext>textarea {
    height: 700px;
}

div.andy-ui-richtext>div {
    height: 100% !important;
}

div.andy-ui-richtext-preview {
    color: black;
    flex: 1;
    box-sizing: border-box;
    padding: 20px;
    background-color: #fff;
    min-height: 150px;
    max-height: 400px;
    overflow-y: auto;
    border-radius: 8px;
}input.andy-ui-searchbox {
    background-color: var(--searchbox-bg-color);
    border: 0;
    font-size:  var(--searchbox-font-size);
    border-radius:  var(--searchbox-border-radius);
    color:  var(--searchbox-fr-color);
    height: 35px;
    padding: 10px;
    box-sizing: border-box;
    box-shadow: none;
    outline: none;
    transition: ease 375ms all;
    width: 150px;
    transition: ease all 375ms;
}

input.andy-ui-searchbox:focus {
    width: 300px;
}select.andy-ui-select{
    width: 100%;
    background-color: var(--select-bg-color);
    border: solid 1px var(--select-border-color);
    border-radius:var(--select-border-radius);

    font-size: var(--select-font-size);
    color: var(--select-fr-color);
    height: calc(1.5em + 1.3rem + 2px);
    padding: 0.65rem 1rem;
    box-sizing: border-box;
    box-shadow: none;
    outline: none;
    transition: ease 375ms all;

    /* -webkit-appearance: none; */
}

select.andy-ui-select:focus{
    border: solid 1px var(--select-focus-border-color);
}

select.andy-ui-select>option {
    /* background-color: #424242;
    font-size: 18px; */
}


/* 

.dropdown {
    width: 200px;
    display: flex;
    background-color: var(--main-white-color);
    border-radius: 5px;
    box-shadow: 0 0 2px rgb(204, 204, 204);
    transition: all .5s ease;
    position: relative;
    font-size: 14px;
    color: var(--main-text-color);
    text-align: left;
    margin-right: 20px;
    transition: all 0.2s;
    cursor: pointer;  
      min-height: 40px;
      max-height: 40px;
  }
  
  .dropdown .select {
      display: flex;
      align-items: center;
      padding: 10px;
  }
  
  .dropdown:hover {
      box-shadow: 0 0 4px rgb(204, 204, 204)
  }
  .dropdown:active {
      background-color: var(--main-bgcontent-color)
  }
  .dropdown.active:hover,
  .dropdown.active {
      box-shadow: 0 0 4px rgb(204, 204, 204);
      border-radius: 5px 5px 0 0;
      background-color: var(--main-bgcontent-color);
  }
  .dropdown.active .select > i {
      transform: rotate(-90deg)
  }
  .dropdown .dropdown-menu {
      flex-direction: column;
      position: absolute;
      background-color: var(--main-white-color);
      width: 100%;
      left: 0;
      margin-top: 1px;
      box-shadow: 0 1px 2px rgb(204, 204, 204);
      border-radius: 0 1px 5px 5px;
      overflow: hidden;
      display: none;
      max-height: 144px;
      overflow-y: auto;
      z-index: 9;
      top: 40px;
  }
  .dropdown.active .dropdown-menu{
      display: flex;
  }
  .dropdown .dropdown-menu li {
      padding: 10px;
      transition: all .2s ease-in-out;
      cursor: pointer;
  } 
  .dropdown .dropdown-menu {
      padding: 0;
      list-style: none
  }
  .dropdown .dropdown-menu li:hover {
      background-color: var(--main-bgcontent-color);
  }
  .dropdown .dropdown-menu li:active {
      background-color: var(--main-bgcontent-color);
  } */div.andy-ui-slidebar {
    flex: 2;
    height: 8px;
    background-color: #525556;
    border-radius: 25px;
    position: relative;
    pointer-events: all;
    z-index: 1;
    margin-right: 10px;
    margin-left: 10px;
}

div.andy-ui-slidebar>div.pin {
    width: 18px;
    height: 18px;
    border-radius: 35px;
    background-color: var(--selected-dark-color);
    z-index: 1;
    position: absolute;
    top: 0px;
    left: 0px;
    transform: translate(-9px, -5px);
}

div.andy-ui-slidebar>div.pin:hover {
    background-color: var(--hover-dark-color);
}

div.andy-ui-slidebar>div.pin>div.pin-tooltip {
    position: relative;
    bottom: 25px;
    border-radius: 2px;
}div.andy-ui-switch {
    width: 40px;
    box-sizing: border-box;
    margin-top: 10px;
    height: 24px;
    background-color: var(--switch-bg-color);
    border-radius: 25px;
    position: relative;
    pointer-events: all;
    z-index: 1;
    margin-right: 10px;
}

div.andy-ui-switch>div.pin {
    width: 20px;
    height: 20px;
    border-radius: 25px;
    background-color:  var(--switch-pin-color);
    z-index: 1;
    transition: ease all 0.3s;
    position: absolute;
    top: 2px;
    left: 2px;
}

div.andy-ui-switch.selected>div.pin {
    left: 43%;
    background-color: var(--switch-pin-active);
}div.andy-ui-tabs {
    display: flex;
    flex: 1;
    flex-direction: column;
}

div.andy-ui-tabs>div.menu {
    display: flex;
    flex: 1;
    border-bottom: 1px solid var(--tabs-border-color);
}

div.andy-ui-tabs>div.views {
    display: flex;
    flex: 1;
    border: 1px solid var(--tabs-border-color);
    border-top: none;
}

div.andy-ui-tabs>div.menu>div.tabs {
    display: flex;
}


div.andy-ui-tabs>div.menu>div.tabs>div {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0px 8px;
    margin-bottom: -1px;
    border: 1px solid transparent;
    border-top-left-radius: var(--tab-menu-border-radius);
    border-top-right-radius: var(--tab-menu-border-radius);
    transition: all ease 175ms;
}

div.andy-ui-tabs>div.menu>div.buttons {
    display: flex;
    justify-content: center;
    align-items: center;
}

div.andy-ui-tabs>div.menu>div.buttons>div.andy-ui-button{
    margin: 6px;
    height: 25px;
    width: 25px;
}

div.andy-ui-tabs>div.menu>div.tabs>div>div.andy-ui-label{
    color: var(--tab-menu-fr-color);
}

div.andy-ui-tabs>div.menu>div.tabs>div:hover>div.andy-ui-label{
    color: var(--tab-menu-fr-color-hover);
}

div.andy-ui-tabs>div.menu>div.tabs>div.selected {
    border-color: var(--tabs-border-color) var(--tabs-border-color) #ffffff;
}

div.andy-ui-tabs>div.menu>div.tabs>div.selected>div.andy-ui-label{
    color: var(--tab-menu-fr-color-selected);
}

div.andy-ui-tabs>div.views>div {
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    z-index: 0;
    flex: 1;
}

div.andy-ui-tabs>div.views>div.selected {
    visibility: visible;
    z-index: 1;
}div.andy-ui-tags {
    flex: 2;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    padding-bottom: 10px;
    flex-wrap: wrap;
    align-items: center;
    background-color: var(--tags-bg-color);
    border: solid 1px var(--tags-border-color);
    border-radius:var(--tags-border-radius);
}

div.andy-ui-tags>div.tag {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: var(--tag-item-bg-color);
    border: solid 1px var(--tag-item-border-color);
    color: var(--tag-fr-color);
    box-sizing: border-box;
    padding-left: 6px;
    padding-right: 3px;
    margin-right: 6px;
    margin-top: 3px;
    margin-bottom: 3px;
    border-radius: var(--tag-item-border-radius);
}

div.andy-ui-tags>div.tag:hover {
    background-color: var(--tag-item-bg-color-hover);
    border: solid 1px var(--tag-item-border-color-hover);
}

div.andy-ui-tags>div.tag>span.andy-ui-icon {
    font-size: 18px;
    cursor: pointer;
    color: var(--tag-icon-fr-color);
}

div.andy-ui-tags>div.tag>span.andy-ui-icon:hover {
    color: var(--tag-icon-fr-color-hover);
}

div.andy-ui-tags>div.input {
    flex: 2;
    outline: none;
    border: none;
    order: 9999999;
    min-width: 100px;
    color: var(--tag-fr-color);
}.andy-ui-textarea {
    width: 100%;
    background-color: transparent;
    border: 0;
    border-bottom: solid 1px #656565;
    height: 65px;
    font-size: 16px;
    color: #FFF;
    padding: 10px;
    box-sizing: border-box;
    box-shadow: none;
    outline: none;
    transition: ease 375ms all;
}

.andy-ui-textarea:focus {
    border-bottom: solid 1px var(--selected-dark-color);
    font-size: 16px;
}
div.andy-ui-treelist {
    display: flex;
    flex-direction: column;
}

div.andy-ui-treelist>div.header {
    display: flex;
    height: 40px;
    min-height: 40px;
    background-color: #424242;
    align-items: center;
}

div.andy-ui-treelist>div.header div.andy-ui-button {
    border: none;
    box-shadow: none;
}

div.andy-ui-treelist>div.header div.andy-ui-button.hide {
    visibility: hidden;
}

div.andy-ui-treelist>div.header>div.breadcrumbs {
    color: white;
    margin-left: 15px;
}

div.andy-ui-treelist>div.list {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}

div.andy-ui-treelist>div.list>div.item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
}

div.andy-ui-treelist>div.list>div.item:hover {
    background-color: #0091EA;
}

div.andy-ui-treelist>div.list>div.item>div.header {
    display: flex;
    flex: 1;
    align-items: center;
}

div.andy-ui-treelist>div.list>div.item>div.header>div.child-count {
    border-radius: 100%;
    width: 13px;
    height: 13px;
    justify-content: center;
    align-items: center;
    display: flex;
    padding: 4px;
    font-size: 12px;
    margin-right: 10px;
    margin-left: 10px;
    color: white;
    background-color: #212121;
}

div.andy-ui-treelist>div.list>div.item>div.header>div.child-count:empty {
    background-color: transparent;
}

div.andy-ui-treelist>div.list>div.item>div.actions {
    display: flex;
    align-items: center;
    opacity: 0;
    pointer-events: none;
}

div.andy-ui-treelist>div.list>div.item:hover>div.actions {
    opacity: 1;
    pointer-events: all;
}

div.andy-ui-treelist>div.list>div.item>div.actions div.andy-ui-button {
    border: none;
    box-shadow: none;
}