@font-face {
    font-family: dripicon;
    src: url('../font/dripicons-v2.woff'), url('../font/dripicons-v2.eot');
}
.blues-m1{
    margin:1em;
}
.blues-p05{
    padding:0.5em;
}
.blues-p1{
    padding:1em;
}
.center{
    text-align: center;
}
.hidden{
    display: none !important;
}
.hide-scroll {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.hide-scroll::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}
.blues-list, .blues-menu, .blues-tab{
    list-style: none;
    padding: 0;
    margin:0;
}
body.port .blues-menu,body.port .blues-tab{
    font-size: 0.9em;
}
.blues-menu li, .blues-tab li{
    display: inline-block;
}
.blues-side{
    display: inline-block;
    vertical-align: top;
}
.blues-tooltip-pan{
    position: relative;
}
.blues-tooltip{
    position: absolute;
    top:calc(100% + 0.3em);
    left:0;
    background:rgba(0,0,0,0.8);
    color:white;
    border-radius: 0.3em;
    padding:0.2em;
    min-width: 4em;
    display: none;
    text-align: center;
    z-index: 2;
}
.blues-tooltip-pan:hover .blues-tooltip{
    display: block;
}
button[disabled]{
    opacity: 0.7;
}
input.blues-char{
    box-sizing: content-box;
    width: 1ch;
    text-align: center;
}

.blues-card-area{
    display: flex;
    align-items: center;
    justify-content: center;
}
.blues-card{
    position: relative;
    border: 1px solid silver;
    box-shadow: 0.1em 0.1em 0.1em rgba(0, 0, 0, 0.2);
    border-radius: 0.3em;
    margin: 0.5em;
}

body[vision="dark"]{
    --popup-bg : rgb(69, 70, 76);
    --light-bg : rgb(43, 44, 63);
    --mellow-bg: rgb(76, 73, 104);
    --hover-bg: rgb(66, 101, 179);
    --text-color: white;
    --text-color: rgb(141, 142, 146);
}

.blues-icon{
    display: inline-block;
    vertical-align: middle;
    min-height: 1em;
}
.blues-icon:before{
    display: inline-block;
    vertical-align: middle;
    min-height: 1em;
    min-width: 1em;
    height: 100%;
    text-align: center;
    direction:ltr !important;
}
.blues-icon[icon="alarm"]:before{
    font-family: dripicon;
    content: "\61";
}
.blues-icon[icon="align-center"]:before{
    font-family: dripicon;
    content: "\62";
}
.blues-icon[icon="align-justify"]:before{
    font-family: dripicon;
    content: "\63";
}
.blues-icon[icon="align-left"]:before{
    font-family: dripicon;
    content: "\64";
}
.blues-icon[icon="align-right"]:before{
    font-family: dripicon;
    content: "\65";
}
.blues-icon[icon="anchor"]:before{
    font-family: dripicon;
    content: "\66";
}
.blues-icon[icon="archive"]:before{
    font-family: dripicon;
    content: "\67";
}
.blues-icon[icon="arrow-down"]:before{
    font-family: dripicon;
    content: "\68";
}
.blues-icon[icon="arrow-left"]:before{
    font-family: dripicon;
    content: "\69";
}
.blues-icon[icon="arrow-right"]:before{
    font-family: dripicon;
    content: "\6a";
}
.blues-icon[icon="arrow-thin-down"]:before{
    font-family: dripicon;
    content: "\6b";
}
.blues-icon[icon="arrow-thin-left"]:before{
    font-family: dripicon;
    content: "\6c";
}
.blues-icon[icon="arrow-thin-right"]:before{
    font-family: dripicon;
    content: "\6d";
}
.blues-icon[icon="arrow-thin-up"]:before{
    font-family: dripicon;
    content: "\6e";
}
.blues-icon[icon="arrow-up"]:before{
    font-family: dripicon;
    content: "\6f";
}
.blues-icon[icon="article"]:before{
    font-family: dripicon;
    content: "\70";
}
.blues-icon[icon="backspace"]:before{
    font-family: dripicon;
    content: "\71";
}
.blues-icon[icon="basket"]:before{
    font-family: dripicon;
    content: "\72";
}
.blues-icon[icon="basketball"]:before{
    font-family: dripicon;
    content: "\73";
}
.blues-icon[icon="battery-empty"]:before{
    font-family: dripicon;
    content: "\74";
}
.blues-icon[icon="battery-full"]:before{
    font-family: dripicon;
    content: "\75";
}
.blues-icon[icon="battery-low"]:before{
    font-family: dripicon;
    content: "\76";
}
.blues-icon[icon="battery-medium"]:before{
    font-family: dripicon;
    content: "\77";
}
.blues-icon[icon="bell"]:before{
    font-family: dripicon;
    content: "\78";
}
.blues-icon[icon="blog"]:before{
    font-family: dripicon;
    content: "\79";
}
.blues-icon[icon="bluetooth"]:before{
    font-family: dripicon;
    content: "\7a";
}
.blues-icon[icon="bold"]:before{
    font-family: dripicon;
    content: "\41";
}
.blues-icon[icon="bookmark"]:before{
    font-family: dripicon;
    content: "\42";
}
.blues-icon[icon="bookmarks"]:before{
    font-family: dripicon;
    content: "\43";
}
.blues-icon[icon="box"]:before{
    font-family: dripicon;
    content: "\44";
}
.blues-icon[icon="briefcase"]:before{
    font-family: dripicon;
    content: "\45";
}
.blues-icon[icon="brightness-low"]:before{
    font-family: dripicon;
    content: "\46";
}
.blues-icon[icon="brightness-max"]:before{
    font-family: dripicon;
    content: "\47";
}
.blues-icon[icon="brightness-medium"]:before{
    font-family: dripicon;
    content: "\48";
}
.blues-icon[icon="broadcast"]:before{
    font-family: dripicon;
    content: "\49";
}
.blues-icon[icon="browser"]:before{
    font-family: dripicon;
    content: "\4a";
}
.blues-icon[icon="browser-upload"]:before{
    font-family: dripicon;
    content: "\4b";
}
.blues-icon[icon="brush"]:before{
    font-family: dripicon;
    content: "\4c";
}
.blues-icon[icon="calendar"]:before{
    font-family: dripicon;
    content: "\4d";
}
.blues-icon[icon="camcorder"]:before{
    font-family: dripicon;
    content: "\4e";
}
.blues-icon[icon="camera"]:before{
    font-family: dripicon;
    content: "\4f";
}
.blues-icon[icon="card"]:before{
    font-family: dripicon;
    content: "\50";
}
.blues-icon[icon="cart"]:before{
    font-family: dripicon;
    content: "\51";
}
.blues-icon[icon="checklist"]:before{
    font-family: dripicon;
    content: "\52";
}
.blues-icon[icon="checkmark"]:before{
    font-family: dripicon;
    content: "\53";
}
.blues-icon[icon="chevron-down"]:before{
    font-family: dripicon;
    content: "\54";
}
.blues-icon[icon="chevron-left"]:before{
    font-family: dripicon;
    content: "\55";
}
.blues-icon[icon="chevron-right"]:before{
    font-family: dripicon;
    content: "\56";
}
.blues-icon[icon="chevron-up"]:before{
    font-family: dripicon;
    content: "\57";
}
.blues-icon[icon="clipboard"]:before{
    font-family: dripicon;
    content: "\58";
}
.blues-icon[icon="clock"]:before{
    font-family: dripicon;
    content: "\59";
}
.blues-icon[icon="clockwise"]:before{
    font-family: dripicon;
    content: "\5a";
}
.blues-icon[icon="cloud"]:before{
    font-family: dripicon;
    content: "\30";
}
.blues-icon[icon="cloud-download"]:before{
    font-family: dripicon;
    content: "\31";
}
.blues-icon[icon="cloud-upload"]:before{
    font-family: dripicon;
    content: "\32";
}
.blues-icon[icon="code"]:before{
    font-family: dripicon;
    content: "\33";
}
.blues-icon[icon="contract"]:before{
    font-family: dripicon;
    content: "\34";
}
.blues-icon[icon="contract-2"]:before{
    font-family: dripicon;
    content: "\35";
}
.blues-icon[icon="conversation"]:before{
    font-family: dripicon;
    content: "\36";
}
.blues-icon[icon="copy"]:before{
    font-family: dripicon;
    content: "\37";
}
.blues-icon[icon="crop"]:before{
    font-family: dripicon;
    content: "\38";
}
.blues-icon[icon="cross"]:before{
    font-family: dripicon;
    content: "\39";
}
.blues-icon[icon="crosshair"]:before{
    font-family: dripicon;
    content: "\21";
}
.blues-icon[icon="cutlery"]:before{
    font-family: dripicon;
    content: "\22";
}
.blues-icon[icon="device-desktop"]:before{
    font-family: dripicon;
    content: "\23";
}
.blues-icon[icon="device-mobile"]:before{
    font-family: dripicon;
    content: "\24";
}
.blues-icon[icon="device-tablet"]:before{
    font-family: dripicon;
    content: "\25";
}
.blues-icon[icon="direction"]:before{
    font-family: dripicon;
    content: "\26";
}
.blues-icon[icon="disc"]:before{
    font-family: dripicon;
    content: "\27";
}
.blues-icon[icon="document"]:before{
    font-family: dripicon;
    content: "\28";
}
.blues-icon[icon="document-delete"]:before{
    font-family: dripicon;
    content: "\29";
}
.blues-icon[icon="document-edit"]:before{
    font-family: dripicon;
    content: "\2a";
}
.blues-icon[icon="document-new"]:before{
    font-family: dripicon;
    content: "\2b";
}
.blues-icon[icon="document-remove"]:before{
    font-family: dripicon;
    content: "\2c";
}
.blues-icon[icon="dot"]:before{
    font-family: dripicon;
    content: "\2d";
}
.blues-icon[icon="dots-2"]:before{
    font-family: dripicon;
    content: "\2e";
}
.blues-icon[icon="dots-3"]:before{
    font-family: dripicon;
    content: "\2f";
}
.blues-icon[icon="download"]:before{
    font-family: dripicon;
    content: "\3a";
}
.blues-icon[icon="duplicate"]:before{
    font-family: dripicon;
    content: "\3b";
}
.blues-icon[icon="enter"]:before{
    font-family: dripicon;
    content: "\3c";
}
.blues-icon[icon="exit"]:before{
    font-family: dripicon;
    content: "\3d";
}
.blues-icon[icon="expand"]:before{
    font-family: dripicon;
    content: "\3e";
}
.blues-icon[icon="expand-2"]:before{
    font-family: dripicon;
    content: "\3f";
}
.blues-icon[icon="experiment"]:before{
    font-family: dripicon;
    content: "\40";
}
.blues-icon[icon="export"]:before{
    font-family: dripicon;
    content: "\5b";
}
.blues-icon[icon="feed"]:before{
    font-family: dripicon;
    content: "\5d";
}
.blues-icon[icon="flag"]:before{
    font-family: dripicon;
    content: "\5e";
}
.blues-icon[icon="flashlight"]:before{
    font-family: dripicon;
    content: "\5f";
}
.blues-icon[icon="folder"]:before{
    font-family: dripicon;
    content: "\60";
}
.blues-icon[icon="folder-open"]:before{
    font-family: dripicon;
    content: "\7b";
}
.blues-icon[icon="forward"]:before{
    font-family: dripicon;
    content: "\7c";
}
.blues-icon[icon="gaming"]:before{
    font-family: dripicon;
    content: "\7d";
}
.blues-icon[icon="gear"]:before{
    font-family: dripicon;
    content: "\7e";
}
.blues-icon[icon="graduation"]:before{
    font-family: dripicon;
    content: "\5c";
}
.blues-icon[icon="graph-bar"]:before{
    font-family: dripicon;
    content: "\e000";
}
.blues-icon[icon="graph-line"]:before{
    font-family: dripicon;
    content: "\e001";
}
.blues-icon[icon="graph-pie"]:before{
    font-family: dripicon;
    content: "\e002";
}
.blues-icon[icon="headset"]:before{
    font-family: dripicon;
    content: "\e003";
}
.blues-icon[icon="heart"]:before{
    font-family: dripicon;
    content: "\e004";
}
.blues-icon[icon="help"]:before{
    font-family: dripicon;
    content: "\e005";
}
.blues-icon[icon="home"]:before{
    font-family: dripicon;
    content: "\e006";
}
.blues-icon[icon="hourglass"]:before{
    font-family: dripicon;
    content: "\e007";
}
.blues-icon[icon="inbox"]:before{
    font-family: dripicon;
    content: "\e008";
}
.blues-icon[icon="information"]:before{
    font-family: dripicon;
    content: "\e009";
}
.blues-icon[icon="italic"]:before{
    font-family: dripicon;
    content: "\e00a";
}
.blues-icon[icon="jewel"]:before{
    font-family: dripicon;
    content: "\e00b";
}
.blues-icon[icon="lifting"]:before{
    font-family: dripicon;
    content: "\e00c";
}
.blues-icon[icon="lightbulb"]:before{
    font-family: dripicon;
    content: "\e00d";
}
.blues-icon[icon="link"]:before{
    font-family: dripicon;
    content: "\e00e";
}
.blues-icon[icon="link-broken"]:before{
    font-family: dripicon;
    content: "\e00f";
}
.blues-icon[icon="list"]:before{
    font-family: dripicon;
    content: "\e010";
}
.blues-icon[icon="loading"]:before{
    font-family: dripicon;
    content: "\e011";
}
.blues-icon[icon="location"]:before{
    font-family: dripicon;
    content: "\e012";
}
.blues-icon[icon="lock"]:before{
    font-family: dripicon;
    content: "\e013";
}
.blues-icon[icon="lock-open"]:before{
    font-family: dripicon;
    content: "\e014";
}
.blues-icon[icon="mail"]:before{
    font-family: dripicon;
    content: "\e015";
}
.blues-icon[icon="map"]:before{
    font-family: dripicon;
    content: "\e016";
}
.blues-icon[icon="media-loop"]:before{
    font-family: dripicon;
    content: "\e017";
}
.blues-icon[icon="media-next"]:before{
    font-family: dripicon;
    content: "\e018";
}
.blues-icon[icon="media-pause"]:before{
    font-family: dripicon;
    content: "\e019";
}
.blues-icon[icon="media-play"]:before{
    font-family: dripicon;
    content: "\e01a";
}
.blues-icon[icon="media-previous"]:before{
    font-family: dripicon;
    content: "\e01b";
}
.blues-icon[icon="media-record"]:before{
    font-family: dripicon;
    content: "\e01c";
}
.blues-icon[icon="media-shuffle"]:before{
    font-family: dripicon;
    content: "\e01d";
}
.blues-icon[icon="media-stop"]:before{
    font-family: dripicon;
    content: "\e01e";
}
.blues-icon[icon="medical"]:before{
    font-family: dripicon;
    content: "\e01f";
}
.blues-icon[icon="menu"]:before{
    font-family: dripicon;
    content: "\e020";
}
.blues-icon[icon="message"]:before{
    font-family: dripicon;
    content: "\e021";
}
.blues-icon[icon="meter"]:before{
    font-family: dripicon;
    content: "\e022";
}
.blues-icon[icon="microphone"]:before{
    font-family: dripicon;
    content: "\e023";
}
.blues-icon[icon="minus"]:before{
    font-family: dripicon;
    content: "\e024";
}
.blues-icon[icon="monitor"]:before{
    font-family: dripicon;
    content: "\e025";
}
.blues-icon[icon="move"]:before{
    font-family: dripicon;
    content: "\e026";
}
.blues-icon[icon="music"]:before{
    font-family: dripicon;
    content: "\e027";
}
.blues-icon[icon="network-1"]:before{
    font-family: dripicon;
    content: "\e028";
}
.blues-icon[icon="network-2"]:before{
    font-family: dripicon;
    content: "\e029";
}
.blues-icon[icon="network-3"]:before{
    font-family: dripicon;
    content: "\e02a";
}
.blues-icon[icon="network-4"]:before{
    font-family: dripicon;
    content: "\e02b";
}
.blues-icon[icon="network-5"]:before{
    font-family: dripicon;
    content: "\e02c";
}
.blues-icon[icon="pamphlet"]:before{
    font-family: dripicon;
    content: "\e02d";
}
.blues-icon[icon="paperclip"]:before{
    font-family: dripicon;
    content: "\e02e";
}
.blues-icon[icon="pencil"]:before{
    font-family: dripicon;
    content: "\e02f";
}
.blues-icon[icon="phone"]:before{
    font-family: dripicon;
    content: "\e030";
}
.blues-icon[icon="photo"]:before{
    font-family: dripicon;
    content: "\e031";
}
.blues-icon[icon="photo-group"]:before{
    font-family: dripicon;
    content: "\e032";
}
.blues-icon[icon="pill"]:before{
    font-family: dripicon;
    content: "\e033";
}
.blues-icon[icon="pin"]:before{
    font-family: dripicon;
    content: "\e034";
}
.blues-icon[icon="plus"]:before{
    font-family: dripicon;
    content: "\e035";
}
.blues-icon[icon="power"]:before{
    font-family: dripicon;
    content: "\e036";
}
.blues-icon[icon="preview"]:before{
    font-family: dripicon;
    content: "\e037";
}
.blues-icon[icon="print"]:before{
    font-family: dripicon;
    content: "\e038";
}
.blues-icon[icon="pulse"]:before{
    font-family: dripicon;
    content: "\e039";
}
.blues-icon[icon="question"]:before{
    font-family: dripicon;
    content: "\e03a";
}
.blues-icon[icon="reply"]:before{
    font-family: dripicon;
    content: "\e03b";
}
.blues-icon[icon="reply-all"]:before{
    font-family: dripicon;
    content: "\e03c";
}
.blues-icon[icon="return"]:before{
    font-family: dripicon;
    content: "\e03d";
}
.blues-icon[icon="retweet"]:before{
    font-family: dripicon;
    content: "\e03e";
}
.blues-icon[icon="rocket"]:before{
    font-family: dripicon;
    content: "\e03f";
}
.blues-icon[icon="scale"]:before{
    font-family: dripicon;
    content: "\e040";
}
.blues-icon[icon="search"]:before{
    font-family: dripicon;
    content: "\e041";
}
.blues-icon[icon="shopping-bag"]:before{
    font-family: dripicon;
    content: "\e042";
}
.blues-icon[icon="skip"]:before{
    font-family: dripicon;
    content: "\e043";
}
.blues-icon[icon="stack"]:before{
    font-family: dripicon;
    content: "\e044";
}
.blues-icon[icon="star"]:before{
    font-family: dripicon;
    content: "\e045";
}
.blues-icon[icon="stopwatch"]:before{
    font-family: dripicon;
    content: "\e046";
}
.blues-icon[icon="store"]:before{
    font-family: dripicon;
    content: "\e047";
}
.blues-icon[icon="suitcase"]:before{
    font-family: dripicon;
    content: "\e048";
}
.blues-icon[icon="swap"]:before{
    font-family: dripicon;
    content: "\e049";
}
.blues-icon[icon="tag"]:before{
    font-family: dripicon;
    content: "\e04a";
}
.blues-icon[icon="tag-delete"]:before{
    font-family: dripicon;
    content: "\e04b";
}
.blues-icon[icon="tags"]:before{
    font-family: dripicon;
    content: "\e04c";
}
.blues-icon[icon="thumbs-down"]:before{
    font-family: dripicon;
    content: "\e04d";
}
.blues-icon[icon="thumbs-up"]:before{
    font-family: dripicon;
    content: "\e04e";
}
.blues-icon[icon="ticket"]:before{
    font-family: dripicon;
    content: "\e04f";
}
.blues-icon[icon="time-reverse"]:before{
    font-family: dripicon;
    content: "\e050";
}
.blues-icon[icon="to-do"]:before{
    font-family: dripicon;
    content: "\e051";
}
.blues-icon[icon="toggles"]:before{
    font-family: dripicon;
    content: "\e052";
}
.blues-icon[icon="trash"]:before{
    font-family: dripicon;
    content: "\e053";
}
.blues-icon[icon="trophy"]:before{
    font-family: dripicon;
    content: "\e054";
}
.blues-icon[icon="upload"]:before{
    font-family: dripicon;
    content: "\e055";
}
.blues-icon[icon="user"]:before{
    font-family: dripicon;
    content: "\e056";
}
.blues-icon[icon="user-group"]:before{
    font-family: dripicon;
    content: "\e057";
}
.blues-icon[icon="user-id"]:before{
    font-family: dripicon;
    content: "\e058";
}
.blues-icon[icon="vibrate"]:before{
    font-family: dripicon;
    content: "\e059";
}
.blues-icon[icon="view-apps"]:before{
    font-family: dripicon;
    content: "\e05a";
}
.blues-icon[icon="view-list"]:before{
    font-family: dripicon;
    content: "\e05b";
}
.blues-icon[icon="view-list-large"]:before{
    font-family: dripicon;
    content: "\e05c";
}
.blues-icon[icon="view-thumb"]:before{
    font-family: dripicon;
    content: "\e05d";
}
.blues-icon[icon="volume-full"]:before{
    font-family: dripicon;
    content: "\e05e";
}
.blues-icon[icon="volume-low"]:before{
    font-family: dripicon;
    content: "\e05f";
}
.blues-icon[icon="volume-medium"]:before{
    font-family: dripicon;
    content: "\e060";
}
.blues-icon[icon="volume-off"]:before{
    font-family: dripicon;
    content: "\e061";
}
.blues-icon[icon="wallet"]:before{
    font-family: dripicon;
    content: "\e062";
}
.blues-icon[icon="warning"]:before{
    font-family: dripicon;
    content: "\e063";
}
.blues-icon[icon="web"]:before{
    font-family: dripicon;
    content: "\e064";
}
.blues-icon[icon="weight"]:before{
    font-family: dripicon;
    content: "\e065";
}
.blues-icon[icon="wifi"]:before{
    font-family: dripicon;
    content: "\e066";
}
.blues-icon[icon="wrong"]:before{
    font-family: dripicon;
    content: "\e067";
}
.blues-icon[icon="zoom-in"]:before{
    font-family: dripicon;
    content: "\e068";
}
.blues-icon[icon="zoom-out"]:before{
    font-family: dripicon;
    content: "\e069";
}


body:not([vision="dark"]){
    --popup-bg : white;
    --light-bg : white;
    --mellow-bg: rgb(226, 225, 225);
    --hover-bg: rgb(191, 211, 255);
    --text-color: rgb(31, 45, 58);
    --mellow-text-color: rgb(54, 71, 87);
}

.blues-context-menu{
    position: absolute;
    top:0;
    right:0.75em;
    width: 1em;
}
.blues-context-menu ul{
    list-style: none;
    padding:0.5em 0;
    margin:0;
    border-radius: 0.3em;
    border:1px solid silver;
    background-color: var(--popup-bg);
    box-shadow: 0.1em 0.1em 0.1em rgba(0, 0, 0, 0.2);
    min-width: 10em;
    visibility: hidden;
}
.blues-context-menu.blues-active ul{
    visibility: visible;
}
.blues-context-menu li{
    padding:0.2em 0.5em;
    cursor: pointer;
    transition: background 0.4s;
    color:var(--text-color);
    margin:0.2em 0.5em;
    border-radius: 0.3em;
}
.blues-context-menu li:hover{
    background-color: var(--hover-bg);
}
.blues-context-menu.dot3::before{
    box-sizing: border-box;
    content:'\2f';
    font-family: dripicon;    
    margin:0.2em;
    font-size: 1.2em;
    color: var(--mellow-text-color);
    cursor: pointer;
    transform: rotateZ(90deg);
}

.BluesPopup{
    position: absolute;
    display: none;
    z-index: 1000;
    user-select: none;
}
.BluesPopup.with-handle{
    margin-top:6px;
}
.BluesPopup.blues-active{
    display: block;
}
.BluesPopup .handle{
    position: absolute;
    width: 10px;
    height: 10px;
    top: -6px;
    transform: rotate(-45deg);
    background: white;
    border-top: 1px solid silver;
    border-right: 1px solid silver;
}
.BluesPopup .content-area{
    display: unset;
}
.BluesPopup:not(.with-handle) .handle{
    display: none;
}
.BluesPopup.with-handle .content-area{
    margin-top: 5px;
}

.blues-default-popup{
    border:1px solid silver;
    border-radius: 0.5em;
    background-color: white;
    padding:0.5em;
    min-width: 10em;
}
.BluesPopup li{
    cursor: pointer;
}

.blues-tab ul{
    list-style: none;
    padding:0;
    margin:0;
}
.blues-tab li{
    display: inline-block;
    text-align: center;
    cursor: pointer;
}
.blues-tab li .blues-tab-thumb{
    display: block;
    width: 4em;
    height: 0.2em;
}
.blues-tab li.blues-tab-selected .blues-tab-thumb{
    background-color:orange;
}
.blues-tab-page:not(.blues-tab-selected){
    display: none;
}


.blues-tab[theme="default"] li:not(.blues-tab-selected){
    font-size: 0.8em;
    color:silver;
}
.blues-tab[theme="default"] li{
    font-size: 1em;
    margin:0.25em;
}

.blues-toggle {display: inline-block;padding:0.5em}
.blues-toggle .channel {position: relative;display: inline-block; margin:0.1em 1em;height: 0.6em;width: 3em;border-radius: 0.3em;transition: background-color 0.5s}
.blues-toggle:not(.turnOn) .channel{background-color:rgb(245 234 234 / 50%);}
.blues-toggle.turnOn .channel{background-color:rgb(26, 128, 1);}
.blues-toggle button{outline: none;font-size:1em;display:block;background-color:white !important;border:1px solid silver !important;position:absolute;height: 1.5em;width:1.5em;border-radius:50%;margin:-0.45em;border:none;cursor: pointer;left:0em;transition: left 0.3s}
.blues-toggle.turnOn button{left:3em;opacity:1 !important}

.blues-toolbar ul{
    display: inline-block;
    list-style: none;
    padding:0.25em;
    margin:0;
}
body:not(.rtl) .blues-toolbar ul{
    margin-left:0.5em;
    border-left: 1px solid silver;
}
.blues-toolbar li{
    box-sizing: border-box;
    display: inline-block;
    padding: 0.1em;
    height: 1.5em;
    cursor: pointer;
    background:rgba(128, 128, 128, 0.041);
    border-radius: 0.25em;
    vertical-align: middle;
    border:1px solid transparent;
}
.blues-toolbar li:hover{
    background:rgba(128, 128, 128, 0.2);
}