.ACTx.view2{
    padding:1em;
    height: 5em;
}
.Address.view1{
    border: 1px solid rgba(192, 192, 192, 0.3);
    box-shadow: 0 0 2px rgb(50, 50, 50, 0.3);
    border-radius: 5px;
    padding:0.5em;
    margin:0.5em;
}
.Address.view1 .address-select{
    cursor: pointer;
}
.Address.view1 .address-body{
    max-height: 100vh;
    overflow: hidden;
    text-align: center;
}
.Address.view1:not(.shopping-selected-address) .address-body{
    max-height: 0px;
}
.Address.view1 .side{
    display: inline-block;
    vertical-align: top;
    max-width: 20em;
    text-align: start;
}
.Address.view1 label{
    display: inline;
    font-size: 0.9em;
    margin: 0.25em 0.5em;
    padding:0.1em 0.5em;
    background-color: rgba(192, 192, 192, 0.3);
    border-radius: 1em;
}
.Address.view1 label::after{
    content: "\a";
    white-space: pre;
}
.Address.view1 .field{
    padding: 0.5em;
    margin: 0.5em;
    background-color: rgba(192, 192, 192, 0.2);
    border-radius: 5px;
}

.Address.view2{
    padding:1em;
    height: 5em;
}



.Address.view3{
    border: 1px solid rgba(192, 192, 192, 0.3);
    box-shadow: 0 0 2px rgb(50, 50, 50, 0.3);
    border-radius: 5px;
    padding:0.5em;
    margin:0.5em;
}
.Address.view3 .side{
    display: inline-block;
    vertical-align: top;
    max-width: 20em;
    text-align: start;
}
.Address.view3 label{
    display: inline;
    font-size: 0.9em;
    margin: 0.25em 0.5em;
    padding:0.1em 0.5em;
    background-color: rgba(192, 192, 192, 0.3);
    border-radius: 1em;
}
.Address.view3 label::after{
    content: "\a";
    white-space: pre;
}
.Address.view3 .field{
    padding: 0.5em;
    margin: 0.5em;
    background-color: rgba(192, 192, 192, 0.2);
    border-radius: 5px;
}

.BNotification>div{
    padding:0.5em;
    margin:0.25em 0.5em;
    border:1px solid #b83030;
    background-color: rgba(190, 174, 174, 0.25);
    color:var(--text-color);
    cursor: pointer;
    border-radius: 5px;
}
.BNotification .blues-icon{
    display: inline-block;
    vertical-align: middle;
    height: 1em;
    color:#b83030;
}
.BNotification .text{
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 3em);
}
.billing-categories{
    white-space: nowrap;
    overflow-x: auto;
    margin-bottom: 2em !important;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.billing-categorie::-webkit-scrollbar { 
    display: none;
}
.BizConnection.view6 img{
    height: 2em;
    width: 2em;
    object-fit: cover;
    border-radius: 50%;
    overflow: hidden;
    background-color: silver;
}
.BizConnection.view6 td{
    padding: 0.25em;
    vertical-align: middle;
}
.BizConnection.view6 button.request,
.BizConnection.view6 button.follower,
.BizConnection.view6 button.following
{display: none;}

.BizConnection.view6.request button.request{display: inline-block;}
.BizConnection.view6.follower button.follower{display: inline-block;}
.BizConnection.view6.following button.following{display: inline-block;}
.BizConnection.view6.private button.follow-btn{display: none;}
.BizConnection.view6:not(.private) button.request-btn{display: none;}
.BizConnection.view6:not(.private) button.cancel-btn{display: none;}
.BizConnection.view6.unfollowed button.unfollow-btn{display: none;}
.BizConnection.view6:not(.unfollowed) button.follow-btn{display: none;}
.BizConnection.view6:not(.unfollowed) button.request-btn{display: none;}
.BizConnection.view6:not(.private):not(.request-sent) button.cancel-btn{display: none;}
.BizConnection.view6.private.request-sent button.unfollow-btn{display: none;}
.BizConnection.view6:not(.request-sent) button.cancel-btn{display: none;}

.BluesActivity.view78.following li.following{
    background-color: rgb(255, 100, 0);
}
.BluesActivity.view78.following .user-title{
    display: none;
}
.BluesActivity.view78.follower li.follower{
    background-color: rgb(255, 100, 0);
}
.BluesActivity.view78.request li.request{
    background-color: rgb(255, 100, 0);
}
.BizItem.view1{
    margin: 0.25em;
    border-radius: 5px;
    background-color: rgba(192, 192, 192, 0.1);
    overflow: hidden;
    padding:0.25em;
    position: relative;
}
body:not(.port) .BizItem.view1 .item-sides{
    display: table;
    box-sizing: border-box;
    width: 100%;
}
body:not(.port) .BizItem.view1 .item-sides>div{
    display: table-cell;
    vertical-align: bottom;
}
body.port .BizItem.view1 .item-sides>div{
    display: block;
}
body.port .BizItem.view1 .item-sides>div:nth-child(1){
    padding:1em 2em;
}
body.port .BizItem.view1 .item-sides>div:nth-child(5){
    padding:1em;
}
.BizItem.view1 label{
    display: inline;
    font-size: 0.9em;
    margin: 0.25em 0.5em;
    padding:0.1em 0.5em;
    background-color: rgba(192, 192, 192, 0.3);
    border-radius: 1em;
}
.BizItem.view1 label::after{
    content: "\a";
    white-space: pre;
}
.BizItem.view1 .item-title-bar{
    padding:0.2em 0.5em;
    background-color: #c0c0c050;
    color:rgb(20, 20, 43);
    font-size: 0.75em;
    line-height: 1em;
}
.BizItem.view1 .item-title-bar span{
    display: inline-block;
    vertical-align: middle;
}
.BizItem.view1 .field{
    display: inline-block;
}
.BizItem.view1 .field>input{
    width: 90%;
}
.BizItem.view1 .image-area{
    width: 2em;
    height: 2em;
    position: relative;
}
.BizItem.view1 img{
    position: absolute;
    top:0;
    left:0;
    width: 2em;
    height: 2em;
    border-radius: 5px;
    overflow: hidden;
    object-fit: cover;
    background: white;
}
.BizItem.view1 .add-image-btn{
    position: absolute;
    top:0;
    left:0;
    width: 2em;
    height: 2em;
    box-sizing: border-box;
    border:2px dashed silver;
    background-color: rgba(192, 192, 192, 0.514);
    border-radius: 5px;
    cursor: pointer;
    opacity: 0;
}
.BizItem.view1 .add-image-btn:hover{
    opacity: 1;
}
.BizItem.view1 .add-image-btn div{
    text-align: center;
    font-size: 2em;
    font-weight: bold;
    margin-top: calc(50% - 0.60em);
    color: silver;
}
.BizItem.view1 .blues-icon{
    display: inline-block;
    vertical-align: middle;
    height: 1em;
    line-height: 1em;
}
.BizItem.view1 .blues-icon::before{
    display: inline-block;
    vertical-align: bottom;
    line-height: 1em;
    min-height: 1em;
    border:0;
}
.BizItem.view1 .button{
    background-color: dodgerblue;
    color:white;
}
.BizItem.view1 .button.delete{
    background-color: rgb(228, 52, 52);
    color:white;
}
.BizItem.view1 .select-area{display: none !important; }
body.port .BizItem.view1 .select-area{padding:1em 1em 1.5em 2em;}
body:not(.port) .BizItem.view1[x-type="map"] .select-area{display: table-cell !important;}
body:not(.port) .BizItem.view1[x-type="dfrm"] .select-area{display: table-cell !important;}
body:not(.port) .BizItem.view1[x-type="drsm"] .select-area{display: table-cell !important;}
body:not(.port) .BizItem.view1[x-type="dprf"] .select-area{display: table-cell !important;}
body:not(.port) .BizItem.view1[x-type="dbok"] .select-area{display: table-cell !important;}

body.port .BizItem.view1[x-type="map"] .select-area{display: block !important;}
body.port .BizItem.view1[x-type="dfrm"] .select-area{display: block !important;}
body.port .BizItem.view1[x-type="drsm"] .select-area{display: block !important;}
body.port .BizItem.view1[x-type="dprf"] .select-area{display: block !important;}
body.port .BizItem.view1[x-type="dbok"] .select-area{display: block !important;}

.BizItem.view3{
    margin: 0.25em;
    border-radius: 5px;
    background-color: rgba(192, 192, 192, 0.1);
    overflow: hidden;
    padding:0.25em;
}
.BizItem.view3 .item-sides{
    display: table;
    box-sizing: border-box;
    width: 100%;
}
.BizItem.view3 .item-sides>div{
    display: table-cell;
    vertical-align: middle;
}
.BizItem.view3 .item-sides .image-side{
    width: 3em;
}
.BizItem.view3 img{
    width: 2em;
    height: 2em;
    border-radius: 5px;
    overflow: hidden;
    object-fit: cover;
    background-color: white;
    border-radius: 5px;
    overflow: hidden;
}
.BizItem.view3 .title{
    display: inline;
    font-size: 0.9em;
    margin: 0.25em 0.5em;
    padding:0.1em 0.5em;
    background-color: rgba(192, 192, 192, 0.3);
    border-radius: 1em;
}
.BizItem.view3 .title::after{
    content: "\a";
    white-space: pre;
}
.BizItem.view3 .text .blues-icon{
    display: inline-block;
    vertical-align: top;
    height: 1em;
    min-height: 1em;
    opacity: 0.7;
}
.BizItem.view3 .text>div{
    display: inline-block;
    cursor: pointer;
}
.BizItem.view3 .text .blues-icon::before{
    min-height: 1em;
    vertical-align: top;
}
.BizItem.view3 .type-title{
    padding:0.2em 0.5em;
    background-color: #c0c0c050;
    color:rgb(20, 20, 43);
    font-size: 0.7em;
    line-height: 1em;
}
.no-title .BizItem.view3 .title{
    display: none;
}
.compact .BizItem.view3{display: inline-block;cursor: pointer;}
.compact .BizItem.view3 .type-title, .compact .BizItem.view3 .text{
    display: none;
}














/* extra / must be cleared */
.BizItem.view1 .button{
    padding:0.25em 0.5em;
    border:1px solid silver;
    border-radius: 1em;
    cursor: pointer;
}
.BizItem.view1 .blues-icon{
    display: inline-block;
    vertical-align: middle;
    height: 1em;
}
.BizItem.view1 .blues-icon::before{
    display: inline-block;
    vertical-align: bottom;
    line-height: 1em;
    min-height: 1em;
}
.BizProfile.view1{
    margin: 0.25em auto;
    min-width: min(15em, 50%);
    max-width: 40em;
    border-radius: 5px;
    border:1px solid rgba(192, 192, 192, 0.6);
    box-shadow: 0 0 5px rgb(50, 50, 50, 0.3);
    overflow: hidden;
    margin-bottom: 5em;
}
.BizProfile.view1 .tabs{
    padding: 0.25em;
    margin: 0;
    font-size: 0.9em;
    list-style: none;
    background-color: rgba(192, 192, 192, 0.3);
    white-space: normal;
}
.BizProfile.view1 .tabs li{
    display: inline-block;
    vertical-align: middle;
    margin:0.25em;
    background: #2196f3;
    color:white;
    line-height: 1em;
    min-width: calc(25% - 1.75em);
    white-space: normal;
}

.BizProfile.view1 .blues-icon.neutral{
    background: #2196f3;
    color:white;
}

.BizProfile.view1[fragment="1"] .fragment:not([value="1"]) {display: none;}
.BizProfile.view1[fragment="2"] .fragment:not([value="2"]) {display: none;}
.BizProfile.view1[fragment="3"] .fragment:not([value="3"]) {display: none;}
.BizProfile.view1[fragment="4"] .fragment:not([value="4"]) {display: none;}
.BizProfile.view1[fragment="5"] .fragment:not([value="5"]) {display: none;}
.BizProfile.view1[fragment="6"] .fragment:not([value="6"]) {display: none;}
.BizProfile.view1[fragment="7"] .fragment:not([value="7"]) {display: none;}

.BizProfile.view1 .tabs li::before{
    min-height: 1em;
    vertical-align: bottom;
}
.BizProfile.view1 .cover{
    min-height: 5em;
    background: repeating-linear-gradient(45deg, #c0c0c011, #80808044, #c0c0c011 30%);

}
.BizProfile.view1 .cover .field{
    margin:0.5em;
}
.BizProfile.view1 .sides{
    display: table;
    box-sizing: border-box;
    width: 100%;
}
.BizProfile.view1 .sides>div{
    display: table-cell;
    padding:0.5em;
    width: 50%;
    vertical-align: middle;
}
.BizProfile.view1 label{
    display: inline;
    font-size: 0.9em;
    margin: 0.25em 0.5em;
    padding:0.1em 0.5em;
    background-color: rgba(192, 192, 192, 0.3);
    border-radius: 1em;
}
.BizProfile.view1 label::after{
    content: "\a";
    white-space: pre;
}
.BizProfile.view1 .biz-image{
    width: 5em;
    height: 5em;
    border-radius: 50%;
    background: rgb(116, 29, 29);
    overflow: hidden;
    object-fit: cover;
}
.BizProfile.view1 .op-area{
    padding: 0.5em;
    background-color: rgba(192, 192, 192, 0.3);
    text-align: right;
}
.BizProfile.view1 .button{
    padding:0.25em 0.5em;
    border:1px solid silver;
    border-radius: 1em;
    cursor: pointer;
}
.BizProfile.view1 .blues-icon{
    display: inline-block;
    vertical-align: middle;
    height: 1em;
}
.BizProfile.view1 .fragment[value="1"] .blues-icon::before{
    display: inline-block;
    vertical-align: bottom;
    line-height: 1em;
    min-height: 1em;
}
.BizProfile.view1 textarea.description{
    width: 100%;
    box-sizing: border-box;
    min-height: 5em;
    border: 1px solid rgba(192, 192, 192, 0.5);
    border-radius: 0.5em;
    padding: 0.5em
}
.BizProfile.view1 .settings-field{
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    width: calc(50% - 1.25em);
    padding: 0.5em;
    margin: 0.5em;
    background-color: rgba(192, 192, 192, 0.2);
    border-radius: 5px;
}
.BizProfile.view1 .finish-area{
    padding:1em;
    background-color: #80808044;
    text-align: right;
    z-index: 2;
}





.BizProfile.view2{
    /* margin: 0.25em auto; */
    border-radius: 5px;
    /* border:1px solid rgba(192, 192, 192, 0.6);
    box-shadow: 0 0 5px rgb(50, 50, 50, 0.3); */
    overflow: hidden;
}
.BizProfile.view2 .sides{
    display: table;
    box-sizing: border-box;
    width: calc(100% - 1em);
    margin:0.5em;
}
.BizProfile.view2 .sides>div{
    display: table-cell;
    vertical-align: middle;
}
.BizProfile.view2 .image-side{
    width: 5em;
}
.BizProfile.view2 .desc-side{
    box-sizing: border-box;
    padding:0.5em;
    height:8em;
}
.BizProfile.view2 .image-side img{
    height: 4em;
    width: 4em;
    margin: 0.25em;
    border-radius: 50%;
    overflow: hidden;
    object-fit: cover;
    background: rgb(116, 29, 29);
}
.BizProfile.view2 .title{
    font-size: 0.9em;
    padding:0 10px;
}
.BizProfile.view2 .full-name{
    font-size: 0.7em;
    padding:0 10px;
    opacity: 0.7;
}
.BizProfile.view2 .summery{
    max-height: 3em;
}



.BizProfile.view3{
    margin: 0.25em auto;
    min-width: min(15em, 50%);
    max-width: 40em;
    border-radius: 5px;
    border:1px solid rgba(192, 192, 192, 0.6);
    box-shadow: 0 0 5px rgb(50, 50, 50, 0.3);
    overflow: hidden;
    text-align: start;
    white-space: normal;
}
.BizProfile.view3 .cover{
    min-height: 5em;
    background: repeating-linear-gradient(45deg, #c0c0c011, #80808044, #c0c0c011 30%);
}
.BizProfile.view3 .cover .sides{
    display: table;
    box-sizing: border-box;
    width: 100%;
}
.BizProfile.view3 .cover .sides>div{
    display: table-cell;
    min-height: 5em;
    vertical-align: middle;
    padding:1em;
}
.BizProfile.view3 .cover .title{
    font-size: 1.2em;
}
.BizProfile.view3 .cover .full-name{
    font-size: 0.9em;
    color: rgb(50, 50, 78);
}
.BizProfile.view3 .biz-image{
    width: 5em;
    height: 5em;
    border-radius: 50%;
    background: rgb(116, 29, 29);
    overflow: hidden;
    object-fit: cover;
}
.BizProfile.view3 .op-area{
    padding: 0.5em;
    background-color: rgba(192, 192, 192, 0.3);
    text-align: end;
}

.BizProfile.view3.private .social-connection button.follow{
    display: none;
}
.BizProfile.view3:not(.private) .social-connection button.request,
.BizProfile.view3:not(.private) .social-connection button.cancel-request{
    display: none;
}
.BizProfile.view3:not(.following) .social-connection button.unfollow{
    display: none;
}
.BizProfile.view3.following .social-connection button.follow,
.BizProfile.view3.following .social-connection button.request{
    display: none;
}
.BizProfile.view3.requested .social-connection button.request{
    display: none;
}
.BizProfile.view3:not(.requested) .social-connection button.cancel-request{
    display: none;
}
.BizProfile.view3:not(.savable) .savable{
    display: none;
}
.BizProfile.view3 .facilities-pan{
    padding:0.5em 1em;
    text-align: end;
    color: var(--text-color);
}
.BizProfile.view3 .facilities-pan .blues-icon{
    margin:0.25em;
    cursor: pointer;
}
.BizProfile.view3 .group{
    padding:0.25em;
    margin-bottom: 0.5em;
}
.BizProfile.view3 .group>label{
    display: block;
    box-sizing: border-box;
    width: calc(80% - 2em);
    padding:0.25em 1em 0.25em 1em;
    border-bottom: 1px solid silver;
    margin-bottom: 0.25em;
}
.BizProfilePreview {
    font-size: 0.6em;
    transform: scale(0.9);
    /* margin-top:-2.2em; */
}
.BizProfilePreview .CustomQRC.view3 .qrcode-view canvas{
    transform: scale(0.7);
}
.BizProfile.view3 .map-area{
    text-align: center;
    padding:0.5em;
}
.BizProfile.view3 .map-pan{
    margin:1em auto;
    width: min(20em, 70%);
    height: 10em;
    border: 1px solid white;
    border-radius: 5px;
}
.BizSection.view1{
    margin: 0.25em;
    border-radius: 5px;
    background-color: rgba(192, 192, 192, 0.2);
    box-shadow: 0 0 1px rgb(50, 50, 50, 0.3);
    overflow: hidden;
    padding:0.5em;
}
.BizSection.view1 label{
    display: inline;
    font-size: 0.9em;
    margin: 0.25em 0.5em;
    padding:0.1em 0.5em;
    background-color: rgba(192, 192, 192, 0.3);
    border-radius: 1em;
}
.BizSection.view1 label::after{
    content: "\a";
    white-space: pre;
}
.BizSection.view1 .field{
    padding: 0.25em;
    margin: 0.25em;
}
.BizSection.view1 textarea{
    width: 100%;
    box-sizing: border-box;
    min-height: 5em;
    border: 1px solid rgba(192, 192, 192, 0.5);
    border-radius: 0.5em;
    padding: 0.5em
}

.BizSection.view3{
    margin: 0.25em;
    border-radius: 5px;
    background-color: rgba(192, 192, 192, 0.15);
    box-shadow: 0 0 1px rgb(50, 50, 50, 0.3);
    overflow: hidden;
    padding:0.5em;
}
.BizSection.view3 .section-title{
    font-size: 0.8em;
    font-weight: bold;
    padding:2px 15px;
}
.BizSection.view3 .section-text{
    font-size: 1em;
    padding:2px;
}
.BizSection.view3 .items{
    padding:2px;
}

.BizSection.view1 .button.delete{
    background-color: rgb(228, 52, 52);
    color:white;
}

















/* extra / must be cleared */
.BizSection.view1 .button{
    padding:0.25em 0.5em;
    border:1px solid silver;
    border-radius: 1em;
    cursor: pointer;
}
.BizSection.view1 .blues-icon{
    display: inline-block;
    vertical-align: middle;
    height: 1em;
}
.BizSection.view1 .blues-icon::before{
    display: inline-block;
    vertical-align: bottom;
    line-height: 1em;
    min-height: 1em;
}
@font-face {
    font-family: 'amberstone';
    src: url('../font/amberstone.woff');
}
@font-face {
    font-family: 'beautiful-earth';
    src: url('../font/beautiful-earth.woff');
}
@font-face {
    font-family: 'bogista';
    src: url('../font/bogista.woff');
}
@font-face {
    font-family: 'bromley';
    src: url('../font/bromley.woff');
}
@font-face {
    font-family: 'grenda';
    src: url('../font/grenda.woff');
}
@font-face {
    font-family: 'handmade';
    src: url('../font/handmade.woff');
}
@font-face {
    font-family: 'monaliza';
    src: url('../font/monaliza.woff');
}
@font-face {
    font-family: 'monday-feeling';
    src: url('../font/monday-feeling.woff');
}
@font-face {
    font-family: 'zyxali';
    src: url('../font/zyxali.woff');
}
.BizType.view2{
    display: inline-block;
    text-align: center;
    width: 7em;
    cursor: pointer;
    padding:0.5em 0.1em;
    box-sizing: border-box;
    border-radius: 10px;
    text-align: center;
    vertical-align: top;
}
.BizType.view2 img{
    display: block;
    margin:auto;
    width: 3em;
    height: 3em;
    border-radius: 50%;
    overflow: hidden;
    background-color: silver;
}
.BizType.view2 label{
    display: block;
    margin-top:0.5em;
}
.BizType.view2:hover{
    background-color: rgba(192, 192, 192, 0.2);
}




.BluesActivity.view75{
    position: fixed;
    top:0;    
    right:0;
    bottom: 0;
    left:0;
    background-color: rgba(192, 192, 192, 0.5);
    z-index: 2;
}
.BluesActivity.view75 .close-container{
    text-align: end;
    padding:0.25em;
}
.BluesActivity.view75 .close-btn{
    display: inline-block;
    cursor: pointer;
}
.BluesActivity.view75 .backpan{
    display:flex;
    height: 100%;
    justify-content: center;
    align-items: center;
}
.BluesActivity.view75 .backpan .dialog{
    background: white;
    border-radius: 10px;
    padding:0.25em;
    width: min(40em, 70vw);
    height: min(30em, 70vh);
}
.BluesActivity.view75 .filter-area{
    font-size: 1.2em;
    color:rgb(46, 45, 58);
    border-bottom: 1px solid silver;
    padding: 0.5em 0;
}
.BluesActivity.view75 .filter-area .blues-icon{
    display: inline-block;
    vertical-align: middle;
    line-height: 1em;
    width: 1em;
    height: 1em;
}
.BluesActivity.view75 .filter-area input{
    width: calc(100% - 5em);
    border:0;
    outline:0 !important;
    margin:0 0.5em;
}
.BluesActivity.view75 .type-area{
    max-height: calc(100% - 5em);
    overflow-y: auto;
}
.BluesActivity.view75 .search-result-area{
    height:calc(100% - 8em);
}
.BluesActivity.view75 .group{
    margin:1em;
    margin-bottom: 2em;
}
.BluesActivity.view75 .group>label{
    display: inline;
    font-size: 0.9em;
    margin: 0.25em 0.5em;
    padding:0.1em 0.5em;
    background-color: rgba(192, 192, 192, 0.3);
    border-radius: 1em;
}
.BluesActivity.view75v .group label::after{
    content: "\a";
    white-space: pre;
}
.BluesActivity.view75 .group>div{
    padding:0.5em;
    border-top:1px solid rgba(192, 192, 192, 0.3);
}
@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;
}
.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:before{
    display: block;
    min-height: 1.5em;
    min-width: 1.5em;
    height: 100%;
    text-align: center;
}
.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;
    /* max-height: 0px;
    transition: height 0.5s; */
    display: none;
    /* overflow: hidden; */
}
.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;
}

.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-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;
    width: 1.5em;
    cursor: pointer;
    background:rgba(128, 128, 128, 0.041);
    border-radius: 0.25em;
    vertical-align: middle;
}
.blues-toolbar li:hover{
    background:rgba(128, 128, 128, 0.24);
}
.blues-toolbar li:before{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    padding-top:0.2em;
}
.BluesActivity.view26, .BluesActivity.view27, .BluesActivity.view28{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}
body:not(.rtl) .BluesActivity.view26 ul{
    text-align: left;
}
body.rtl .BluesActivity.view26 ul{
    text-align: right;
}
.BluesActivity.view28 label{
    display: block;
    margin: 0.5em 0.5em 0 0.5em;
}
.BluesActivity.view28 p{
    max-width: 20em;
    word-break: break-word;
    white-space: break-spaces;
}
.BluesActivity.view28 .messageArea{
    font-size: 0.9em;
    font-weight: bold;
}
.BluesActivity.view27 .blues-icon{
    font-size: 4em;
    height:1em;
    margin-bottom: 0.5em;
}
body:not(.port) .BluesActivity.view51{
    text-align: center;
}
body:not(.port) .BluesActivity.view51 .overview-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25%, 50%));
}
body:not(.port) .BluesActivity.view51 .ifroom{
    border:1px solid silver;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    background-color: rgba(255, 255, 255, 0.562);
    display: inline-block;
    font-size: 1.5em;
    margin:1em;
    padding:1em 1em;
    text-align: center;
    box-sizing: border-box;
    color:rgb(75, 77, 87);
}
body:not(.port) .BluesActivity.view51 .ifroom .unit, body:not(.port) .BluesActivity.view51 .ifroom i{
    font-size: 0.5em;
    margin:0.5em;
}
body:not(.port) .BluesActivity.view51 .chart-area{
    height: 40vh;
    width: calc(100% - 2em);
    margin:1em auto;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 0.25em;
    border:1px solid silver;
    color: black !important;
}
.BluesActivity .blues-menu li{
    padding:0.2em 1em;
    border-radius: 1em;
    font-size: 0.9em;
    background-color: var(--neutral-button-back);
    border:2px solid var(--neutral-button-back);
    color:white;
    margin: 0.2em 0.5em;
    min-width: 2em;
    text-align: center;
    cursor: pointer;
}
.BluesActivity table{
    box-sizing: border-box;
    width: calc(100% - 2em);
    border-spacing: 0;
    margin-top: 1em;
    margin:1em;
    border-radius: 0.5em;
    overflow: hidden;
}
.BluesActivity table thead{
    position:sticky;
    top:0;
    background: var(--header-color);
    font-size: 1em;
    color: var(--negative-text);
    text-align: center;
}
.BluesActivity table thead td{
    padding: 0.4em 0.1em;
}
.BluesActivity table td{
    padding: 0.2em;
}
.BluesActivity table tbody td{
    font-size: 0.8em;
}
.CFile.view1{
    display: inline-block;
    margin:0.5em;
    width: 4em;
    height: 6em;
    text-align: center;
    white-space: break-spaces;
    position: relative;
    vertical-align: top;
}
.CFile.view1 img{
    width: 4em;
    height: 2.5em;
    object-fit: scale-down;
}
.CFile.view1 input{
    position: absolute;
    top:2px;
    left:2px;
}
.CFile.view1 label{
    font-size: 0.7em;
    word-break: break-all;
}
.CFile.view4{
    margin:1em 0.5em;
    white-space: break-spaces;
}
.CFile.view4 img{
    display: block;
    margin:1em auto;
    width: 80%;
    height: 5em;
    object-fit: scale-down;
}
.CFile.view4 label{
    font-weight: bold;
    font-size: 0.8em;
    margin:0.5em 0.5em 0.2em 0.5em;
}
.CFile.view4 .url-area div{
    background-color: rgba(0, 0, 0, 0.514);
    color:white;
    padding:0.5em;
    border-radius: 0.5em;
    cursor: text;
    word-break: break-all;
}
.CFileManager{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0.5em;
}
.CFileManager-container{
    position: relative;
    height:calc(100% - 1em);

}
.CFileManager.view1 .file-work-area{
    height: calc(100% - 2em);
    white-space: break-spaces;
    overflow-y: auto;
}
.CFileManager.view1 .file-upload-area{
    position: absolute;
    left:0;
    bottom:0;
    height: 0;
    overflow: hidden;
    border:4px dashed rgba(0, 0, 0, 0.452);
    color:rgba(0, 0, 0, 0.452);
    font-size: 2em;
    border-radius: 0.5em;
    display: none;
    cursor: pointer;
}
.CFileManager.view1 .file-upload-area input{
    position: absolute;
    top:0; left:0; width: 100%; height: 100%;
    opacity: 0;
    cursor: pointer;
}
.CFileManager.view1 .file-upload-area progress{
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 80%;
    font-size: 0.5em;
}
.CFileManager.view1 .file-details-area{
    position: absolute;
    right:0;
    bottom:0;
    width: 30%;
    height: calc(100% - 2em);
    overflow: hidden;
    transform: translateX(50vw);
    transition: transform 0.5s;
    background: rgba(0, 0, 0, 0.15);
    font-size: 0.8em;
}
.CFileManager.view1.uploadable .file-work-area{
    height: calc(60% - 2em);
}
.CFileManager.view1.uploadable .file-upload-area{
    height: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.CFileManager.view1:not(.detailable) .file-upload-area{
    right:0;
}
.CFileManager.view1.detailable .file-work-area{
    width:70%;
}
.CFileManager.view1.detailable .file-upload-area{
    right:30%;
}
.CFileManager.view1.detailable .file-details-area{
    transform: translateX(0)
}
.Category.view1 label{
    display: block;
    margin:0 0.5em 0 0.5em;
}
.Category.view2{
    display: inline-block;
    border-radius: 5px;
    margin:0.5em;
    padding:0.25em;
    border:1px solid silver;
    width: 15em;
    overflow: hidden;
    white-space: nowrap;
}
.Category.view2 div{
    display: inline-block;
    vertical-align: middle;
}
.Category.view2 .blues-icon{
    position: relative;
    margin-left: 2.2em;
    height: 1.1em;
    width: 0;
    cursor: pointer;
    vertical-align: top;
}
.Category.view2 .blues-icon::before{
    background-color: red;
    color: white;
    position: absolute;
    top: 0;
    margin-left: -2.2em;
    border-radius: 5px;
    padding: 0.2em;
    box-sizing: border-box;
}
.Category.view2 i, .Category.view2 b{
    display: block;
}
.Content.view1 img{
    height: 3em;
    width: 3em;
    object-fit: scale-down;
}
.Content.view1 .blues-side{
    padding:0.5em;
}
.Content.view1 textarea{
    box-sizing: border-box;
    display: block;
    margin:1em;
    padding:0.5em;
    border-radius: 0.3em;
    width:calc(100% - 2em);
    min-height: 50px;
}
.Content.view1 textarea[bind="content"], .Content.view1 .content-source{
    min-height: 200px;
}
.Content.view1 label{
    display: block;
    margin:0 0.5em 0 0.5em;
}
.Content.view2{
    box-sizing: border-box;
    overflow-x: hidden;
    white-space: nowrap;
}
.Content.view2 a{
    text-decoration: none;
    color:unset;
}
.Content.view2 .thumb-side{
    display: inline-block;
    width: calc(40% - 0.5em);
    vertical-align:top;
}
.Content.view2 .thumb-side img{
    height: 15vw;
    width: 100%;
    object-fit: cover;
    border-radius: 0.5em;
}
.Content.view2 .text-side{
    display: inline-block;
    width: calc(60% - 0.5em);
    vertical-align:top;
    padding:1em;
    white-space: break-spaces;
}
.Content.view2 div[bind="title"] {font-weight: bold;margin-bottom: 1em;}
.Content.view3{
    margin:2em;
    border-bottom: 1px solid silver;
}
.Content.view3 p{
    text-align: justify;
    text-justify: inter-word;
}
.Content.view3 img{
    width: min(500px, 70vw);
    display:block;
    margin: 4em auto;
    object-fit: scale-down;
}
body:not(.port) .Content.view4{
    display: inline-block;
    width: calc((86vw - 20em) / 3);
    height: calc((86vw - 20em) / 3);
    margin:2vw;
    border:1px solid silver;
}
body.port .Content.view4{
    margin:15vw;
    width: 70vw;
    height: 70vw;
    border:1px solid silver;
}
.Content.view4{
    position: relative;
    cursor: pointer;
    overflow: hidden;
    color:white;
    text-shadow: 0 0 30px black;
}
.Content.view4 h4{
    margin:0;
    margin-bottom: 0.5em;
}
.Content.view4 .description{
    /* transform: translateY(50vh); */
    transition: font-size 0.75s;
    box-sizing: border-box;
    /* font-size: 0.8em; */
    font-size: 0;
}
.Content.view4:hover .description{
    /* transform: translateY(0vh); */
    font-size: 0.8em;
}
.Content.view4 img{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.Content.view4 .info{
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 100%;
    padding:1em;
    background: linear-gradient(360deg, black, transparent);
}
body:not(.port) .Content.view4 .info{
    font-size: min(1em , 1.3vw);
}
body.port .Content.view4 .info{
    font-size: min(1em , 5vw);
}
.Content.view4:hover .info{
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 100%;
    padding:1em;
    background: linear-gradient(360deg, black, rgba(0, 0, 0, 0.1));
}
.Coupon.view1{
    display: inline-block;
}
.Coupon.view1 .side{
    display: inline-block;
    vertical-align: top;
    max-width: 20em;
}
.Coupon.view1 label{
    display: inline;
    font-size: 0.9em;
    margin: 0.25em 0.5em;
    padding:0.1em 0.5em;
    background-color: rgba(192, 192, 192, 0.3);
    border-radius: 1em;
}
.Coupon.view1 label::after{
    content: "\a";
    white-space: pre;
}
.Coupon.view1 .frow{
    padding: 0.5em;
    margin: 0.5em;
    background-color: rgba(192, 192, 192, 0.2);
    border-radius: 5px;
    display: inline-block;
    vertical-align: top;
}

.Coupon.view2{
    border: 1px solid rgba(192, 192, 192, 0.5);
    box-shadow: 0 0 2px rgb(50, 50, 50, 0.3);
    border-radius: 5px;
    padding:0.5em;
}
.Coupon.view2 .delete{
    display: inline-block;
    vertical-align: middle;
    height: 1em;
    color:red;
    cursor: pointer;
}
.Coupon.view2 .delete::before{
    height: 1em;
    line-height: 1em;
}
.Coupon.view2 .code{
    display: inline-block;
    vertical-align: middle;
    font-size: 0.8em;
    margin:0.25em;
}
.Coupon.view2 .title{
    display: inline-block;
    vertical-align: middle;
}

.Coupon.view4{
    padding:1em;
}
.Currency-List{
    /* display: table; */
    width: 100%;
    font-size: 1.1em;
}
.Currency-List .Currency{
    /* display: table-row; */
    width: 100%;
    white-space: nowrap;
}
/* .Currency-List .Currency span{
    display: inline-block;
    white-space: nowrap;
    width: 40%;
    overflow-x: hidden;
    padding:0.2em;
    overflow: hidden;
    vertical-align: middle;
}
.Currency-List .Currency span:first-child{
    width: 2em;
    text-align: center;
}
.Currency-List .Currency img{
    display: inline-block;
    height:1em;
    width: 1em;
    margin:0.2em;
    vertical-align: middle;
} */
.Currency-List .Currency span[bind="price"]{
    text-align: center;
}
.Currency-List .Currency span[bind="change"]{
    width: 5em;
    text-align: center;
}
.Currency span.pos{
    color:rgb(2, 90, 2)
}
.Currency span.neg{
    color:rgb(180, 8, 66)
}
.Currency.view1 textarea{
    box-sizing: border-box;
    display: block;
    margin:1em;
    padding:0.5em;
    border-radius: 0.3em;
    width:calc(100% - 2em);
    min-height: 50px;
}
.Currency.view1 textarea{
    min-height: 200px;
}
.Currency.view1 label{
    display: block;
    margin:0 0.5em 0 0.5em;
}
.Currency.view1 .frow{
    display: inline-block;
    padding:0.5em;
}
.Currency.view2{
    cursor: pointer;
}
.Currency .currency-detail{
    display: none;
}
.Currency.blues-active{
    background-color: rgba(0, 0, 0, 0.15);
}
.Currency.blues-active .currency-detail{
    display: block !important;
}
.Currency.view2 span{
    display: inline-block;
    white-space: nowrap;
    padding:0.2em;
    overflow: hidden;
    vertical-align: middle;
}
.Currency.view2 span:first-child{
    width: 2em;
    text-align: center;
}
.Currency.view2 span.title{
    width: calc(100% - 7em);
}
.Currency.view2 span.change{
    width: 4em;
    text-align: right;
}
.Currency.view2 img{
    display: inline-block;
    height:1em;
    width: 1em;
    margin:0.2em;
    vertical-align: middle;
}



.Currency.view5{
    padding: 0.5em;
    margin: 0.5em;
    display: table;
    width: 100%;
    box-sizing: border-box;
}
.Currency.view5>div:first-child{
    width: min(15em, 30vw);
}
.Currency.view5>div{
    display: table-cell;
}
.Currency.view5>div.op-area{
    width: 5em;
}
.Currency.view5 span{
    display: inline-block;
    white-space: nowrap;
    padding:0.2em;
    vertical-align: middle;
}
.Currency.view5 span.title{
    font-size: 1.5em;
}
.Currency.view5 span.change{
    width: 4em;
    text-align: right;
}
.Currency.view5 img{
    display: inline-block;
    height:32px;
    width: 32px;
    margin:0.2em;
    vertical-align: middle;
    object-fit: scale-down;
}
.CustomQRC.view1{
   text-align: center;
   display: flex;
   position: relative;
   align-items: center;
   justify-content: center;
}
.CustomQRC.view1 .qrc-editor-back{
    position: relative;
    overflow: hidden;
}
.CustomQRC.view1 .qrc-editor-background{
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background:repeating-linear-gradient( 45deg, transparent, rgb(177 188 195 / 30%), transparent 300px);
    filter:blur(25px);
    z-index: -1;
}
.CustomQRC.view1 .qrc-back{
    display: table;
    min-height: 15em;
    padding:0.5em;
}
.CustomQRC.view1 .qrc-back>div{
    display: table-cell;
    vertical-align: middle;
}
.CustomQRC.view1 .qrcode-view{
    margin:2em;
    background: white;
    border-radius: 10px;
    padding: 10px;
}
.CustomQRC.view1 .field{
    padding:1em;
}
.CustomQRC.view1 img{
    height: 3em;
    width: 3em;
    border:5px;
    object-fit: scale-down;
}
.CustomQRC.view1 label{
    display: inline;
    font-size: 0.9em;
    margin: 0.25em 0.5em;
    padding:0.1em 0.5em;
    background-color: rgba(192, 192, 192, 0.3);
    border-radius: 1em;
}
.CustomQRC.view1 label::after{
    content: "\a";
    white-space: pre;
}

.CustomQRC.view3{
    text-align: center;
}
.CustomQRC.view3 .qrcode-view{
    min-width: min(10em, 256px);
    margin:2em auto;
}
.Experience.view3 .time{
    padding:0.25em 2em;
    background-color: rgba(192, 192, 192, 0.3);
    margin-top:2em;
}
.BluesActivity .blues-menu li{
    padding:0.2em 1em;
    border-radius: 1em;
    font-size: 0.9em;
    background-color: var(--neutral-button-back);
    border:2px solid var(--neutral-button-back);
    color:white;
    margin: 0.2em 0.5em;
    min-width: 2em;
    text-align: center;
    cursor: pointer;
}
.BluesActivity table{
    box-sizing: border-box;
    width: calc(100% - 2em);
    border-spacing: 0;
    margin-top: 1em;
    margin:1em;
    border-radius: 0.5em;
    overflow: hidden;
}
.BluesActivity table thead{
    position:sticky;
    top:0;
    background: var(--header-color);
    font-size: 1em;
    color: var(--negative-text);
    text-align: center;
}
.BluesActivity table thead td{
    padding: 0.4em 0.1em;
}
.BluesActivity table td{
    padding: 0.2em;
}
.BluesActivity table tbody td{
    font-size: 0.8em;
}
body.port .BizProfile.view1 .finish-area{
    position: absolute;
}
body:not(.port) .BizProfile.view1 .finish-area{
    position: fixed;
}
.BizProfile.view1 .finish-area {
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1em;
    background-color: #80808044;
    text-align: right;
}
body:not(.rtl) .BizProfile.view1 .finish-area{
    background: linear-gradient(115deg,transparent, #80808044, #80808044);
}
body.rtl .BizProfile.view1 .finish-area{
    background: linear-gradient(115deg, #80808044, #80808044, transparent);
}
body:not(.rtl)[sidebar="normal"] .BizProfile.view1 .finish-area{
    right:0;
    left: 15em;
}
body:not(.rtl)[sidebar="thin"] .BizProfile.view1 .finish-area{
    right:0;
    left: 3em;
}
body:not(.rtl)[sidebar="hidden"] .BizProfile.view1 .finish-area{
    right:0;
    left: 0em;
}
body.rtl[sidebar="normal"] .BizProfile.view1 .finish-area{
    left:0;
    right: 15em;
}
body.rtl[sidebar="thin"] .BizProfile.view1 .finish-area{
    left:0;
    right: 3em;
}
body.rtl[sidebar="hidden"] .BizProfile.view1 .finish-area{
    left:0;
    right: 0em;
}
.ExtraUI.view1{
    padding: 1em;
}
.ExtraUI.view1 img{
    width: min(30vw, 350px);
    height: min(30vh, 256px);
    object-fit: scale-down;
    display: block;
    margin: auto;
    /* -webkit-box-reflect: below -10px linear-gradient(to bottom, rgb(0 0 0 / 0%), rgb(0 0 0 / 11%)); */
}
.ExtraUI.view3 .ifroom{
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    background-color: rgba(255, 255, 255, 0.562);
    margin:1em;
    padding:1em 1em;
    text-align: center;
    box-sizing: border-box;
    color:rgb(75, 77, 87);
    border-radius: 5px;
}
body:not(.port) .ExtraUI.view3 .ifroom{
    display: inline-block;
    min-width: calc(33% - 3em);
}
.ExtraUI.view3 .ifroom .value{
    font-size: 1.5em;
    display: block;
}
.ExtraUI.view3 .ifroom button{
    font-size: 0.8em;
    cursor: pointer;
    font-style: italic;
    display: block;
    text-align: start;
    background: transparent;
    border:none;
    color:#2251d0;
}
.ExtraUI.view3 .ifroom button:hover{
    text-decoration: underline;
    font-weight: bold;
}
body:not(.port) .ExtraUI.view3 .ifroom .unit, body:not(.port) .ExtraUI.view3 .ifroom .title{
    margin:0.5em;
}
body:not(.port) .ExtraUI.view3 .chart-area{
    height: 40vh;
    width: calc(100% - 2em);
    margin:1em auto;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 5px;
    border:1px solid silver;
    color: black !important;
}
.Feed.view1 textarea{
    box-sizing: border-box;
    display: block;
    margin:1em;
    padding:0.5em;
    border-radius: 0.3em;
    width:calc(100% - 2em);
    min-height: 50px;
}
.Feed.view1 textarea{
    min-height: 200px;
}
.Feed.view1 .frow{
    display: inline-block;
    padding:0.5em;
}
.Feed.view1 label{
    display: block;
    margin:0 0.5em 0 0.5em;
}


.Feed.view2 .thumb-side{
    display: inline-block;
    width: calc(40% - 0.5em);
    vertical-align:top;
}
.Feed.view2 .thumb-side img{
    height: 15vw;
    width: 100%;
    object-fit: cover;
    border-radius: 0.5em;
}
.Feed.view2 .text-side{
    display: inline-block;
    width: calc(60% - 0.5em);
    vertical-align:top;
    padding:1em;
}
.Feed.view2 .time, .Feed.view2 .end{
    display: inline-block;
}
.Feed.view2 .time-area{
    padding:0.2em 1em;
    background-color: rgba(84, 92, 126, 0.25);
}


.Feed.view4{
    position: absolute;
    top:0;left:0;right:0;bottom:0;
    overflow: hidden;
    cursor: pointer;
}
.Feed.view4 img{
    position: absolute;
    top:0;left:0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.Feed.view4 .text-side{
    box-sizing: border-box;
    position: absolute;
    left:0;right:0;bottom:0;
    color:white;
    background: linear-gradient(0deg,#0000009c, transparent);
    object-fit: cover;
    padding:1em;
    font-size: 1.3em;
    word-break: break-word;
    white-space: break-spaces;
}
.Feed.view4 .text-side:hover{
    background: linear-gradient(0deg,#000000b4, transparent);
}
.Feed.view4 .text-side .title{
    margin-bottom: 0.5em;
    font-weight: bold;
}
.Feed.view8{
    display: block;
    box-sizing: border-box;
    padding:0.25em;
    margin:0.25em 0.25em;
    border-radius: 0.25em;
    font-weight: bold;
}
.Field.view .blues-icon{
    display: inline-block;
    height: 1em;
    vertical-align: middle;
    cursor: pointer;
    border:1px solid silver;
    padding: 0.25em 1.5em 0.25em 0.5em;
    border-radius: 1em;
    background-color: dodgerblue;
    color:white;
}
.Field.view1 .blues-icon::before{
    min-height: 1em;
}
.Form.view1 .field-op-area{
    padding:0.5em 1em !important;
    margin-bottom: 1em;
    border-radius: 5px 5px 0 0 !important;
}
.Form.view1 .field-op-area h5{
    display: inline-block;
    margin:0.5em;
}
.Field.view1{
    position: relative;
    padding:0.5em;
}
.Field.view1:not(:last-child){
    margin-bottom: 0.5em;
    border-bottom: 1px dashed var(--text-color);
}
.Field .delete{
    height: 1em;
    color:red !important;
    background-color: transparent !important;
    border:0 !important;
    position: absolute;
    top:1.25em;
    right:0.5em;
}
.Field.view1 label{
    display: inline;
    font-size: 0.9em;
    margin: 0.25em 0.5em;
    padding:0.1em 0.5em;
    background-color: rgba(192, 192, 192, 0.3);
    border-radius: 1em;
}
.Field.view1 label::after{
    content: "\a";
    white-space: pre;
}

.Field.view1 textarea{
    width: 100%;
    box-sizing: border-box;
    min-height: 3em;
    border: 1px solid rgba(192, 192, 192, 0.5);
    border-radius: 0.5em;
    padding: 0.5em
}

.Field.view1 .sub-field{
    padding: 0.25em;
    background: rgba(192, 192, 192, 0.2);
    border-radius: 5px;
    margin:0.25em;
}
.Field.view1 .frow{
    display: inline-block;
    vertical-align: top;
}
.Field.view1[field-type="options"] .type-string{
    display: none;
}
.Field.view1[field-type="string"] .type-options{
    display: none;
}
.Field.view1[field-type="number"] .type-options{
    display: none;
}
.Field.view1[field-type="number"] .type-string{
    display: none;
}
.Field.view3{
    margin-bottom: 2em;
}
.Field.view3 .hint-btn{
    display: block;
    height: 1em;
    box-sizing: border-box;
    position: relative;
    text-align: end;
    cursor: pointer;
    background: transparent !important;
    border: 0 !important;
    color: var(--text-color);
}
.Field.view3 .hint-btn::before{
    min-height: 1em;
}
.Field.view3 .hint{
    display: none;
    font-style: italic;
}
.Field.view3 .hint-btn.blues-active .hint{
    display: inline;
}
.Field.view3 p{
    margin:0;
    padding:0 0.5em 1em 0.5em;
}
.Field.view3 input[type="text"]{
    box-sizing: border-box;
    width: 100%;
}
.Form .blues-icon{
    display: inline-block;
    height: 1em;
    vertical-align: middle;
    cursor: pointer;
    border:1px solid silver;
    padding: 0.25em 1.5em 0.25em 0.5em;
    border-radius: 1em;
    background-color: dodgerblue;
    color:white;
}
.Form .blues-icon::before{
    min-height: 1em;
}

.Form.view1 .form-op-area{
    padding:0.5em 1em !important;
    margin-bottom: 1em;
    border-radius: 5px 5px 0 0 !important;
}
.Form.view1 .form-op-area h3{
    display: inline-block;
    margin:0.5em;
}
.Form.view1 .form-op-area .blues-icon{
    float : right;
    margin: 0.5em;
}

.Form.view1 label{
    display: inline;
    font-size: 0.9em;
    margin: 0.25em 0.5em;
    padding:0.1em 0.5em;
    background-color: rgba(192, 192, 192, 0.3);
    border-radius: 1em;
}
.Form.view1 label::after{
    content: "\a";
    white-space: pre;
}

.Form.view1 textarea{
    width: 100%;
    box-sizing: border-box;
    min-height: 3em;
    border: 1px solid rgba(192, 192, 192, 0.5);
    border-radius: 0.5em;
    padding: 0.5em
}

.Form.view1 .form-field{
    padding: 0.25em;
    background: rgba(192, 192, 192, 0.2);
    border-radius: 5px;
    margin:0.25em;
}
.Form.view1 .frow{
    display: inline-block;
    vertical-align: top;
}

.Form.view2{
    padding:1em;
    height: 5em;
}

.Form.view2 .title{
    font-size: 0.9em;
    padding:0 10px;
}
.Form.view2 .description{
    padding: 0.25em;
    max-height: 3em;
}

.Form.view3{
    margin: 0.25em auto;
    min-width: min(15em, 50%);
    max-width: 40em;
    border-radius: 5px;
    border:1px solid rgba(192, 192, 192, 0.6);
    box-shadow: 0 0 5px rgb(50, 50, 50, 0.3);
    overflow: hidden;
    text-align: start;
    padding:0 1em;
}
.Form.view3>h1{
    margin:0;
    padding:0.5em 1em;
}

.Form.view3 .form-field{
    padding: 0.5em;
    background: rgba(192, 192, 192, 0.2);
    border-radius: 5px;
    margin:0.25em;
}
.Form.view3 .frow{
    display: inline-block;
    vertical-align: top;
}

.Form.view3.disabled .op-area{
    display: none !important;
}
.Gallery.view1{
    padding:1em;
    text-align: center;
}
.Gallery.view1 .images{
    display: inline;
}
.Gallery.view1 .add-image-btn{
    width: 10em;
    height: 7.5em;
    border:4px dashed silver;
    border-radius: 10px;
    background:rgb(245, 241, 241);
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    margin: 0.5em;
    position: relative;
}
.Gallery.view1 .add-image-btn div{
    text-align: center;
    font-size: 4em;
    font-weight: bold;
    margin-top: calc(50% - 0.95em);
    color: silver;
}

.GalleryItem.view1{
    width: 10em;
    height: 7.5em;
    border:1px solid silver;
    border-radius: 10px;
    background:rgb(245, 241, 241);
    display: inline-block;
    vertical-align: middle;
    margin: 0.5em;
    position: relative;
    overflow: hidden;
}
.GalleryItem.view1 img{
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.GalleryItem.view1 .blues-icon::before{
    background-color: red;
    border-radius: 0 0 0 10px;
    line-height: 1.5em;
    vertical-align: middle;
    border-bottom: 1px solid silver;
    border-left: 1px solid silver;
}
.GalleryItem.view1 .blues-icon{
    cursor: pointer;
    position: absolute;
    top:0;
    right:0;
    color:white;
}




.Gallery.view3{
    padding:1em;
    text-align: center;
}
.Gallery.view3 .images{
    display: inline;
}
.GalleryItem.view3{
    width: 10em;
    height: 7.5em;
    border:1px solid silver;
    border-radius: 10px;
    background:rgb(245, 241, 241);
    display: inline-block;
    vertical-align: middle;
    margin: 0.5em;
    position: relative;
    overflow: hidden;
}
.GalleryItem.view3 img{
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.Invoice.view1{
    width: min(40em, 100%);
    display: block;
    margin: auto;
    background: #ffffff4f;
    border-radius: 10px;
}
.Invoice.view1 .empty-cart-area{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.Invoice.view1 .empty-cart-area>div{
    width: min(15em, 80%);
    text-align: center;
}
.Invoice.view1 .empty-cart-area .blues-icon{
    font-size: 4em;
    height: 1em;
    color:rgb(80, 148, 194);
    text-shadow: 0 0 10px rgb(228, 250, 255);
}
.Invoice.view1 .cart-steps{
    list-style:none;
    padding:0;
    margin:0;
    font-size: 0.9em;
}
body:not(.port) .Invoice.view1 .cart-steps{
    white-space: nowrap;
}
body.port .Invoice.view1 .cart-steps{
    text-align: center;
}
body.port .Invoice.view1 .cart-steps li{
    width: calc(50% - 3em);
    font-size: 0.9em;
}
.Invoice.view1 .cart-steps li{
    display: inline-block;
    margin:0.1em;
    background: linear-gradient(rgba(91, 101, 114, 0.1), rgba(60, 75, 95, 0.1));
    padding:0.5em 1em;
    cursor: pointer;
    border-radius: 1.5em;
    vertical-align: middle;
}
body.port .Invoice.view1 .cart-steps li{
    border-radius: 1em;
    text-align: start;
}
.Invoice.view1 .cart-steps li[step]{
    font-size: 0.9em;
}
.Invoice.view1 .cart-steps li.add-product-btn{
    background-color: #0059ff;
    color:white;
}
body:not(.rtl):not(.port) .Invoice.view1 .cart-steps li.add-product-btn{
    float: left;
}
body.rtl:not(.port) .Invoice.view1 .cart-steps li.add-product-btn{
    float: left;
}
.Invoice.view1[step="1"]:not(.finalizing) .cart-steps li[step="1"]{
    background-color: #ff7600;
    color:white;
    cursor: default;
    font-size: 1em;
}
.Invoice.view1[step="2"] .cart-steps li[step="2"]{
    background-color: #ff7600;
    color:white;
    cursor: default;
    font-size: 1em;
}
/* Notice: Finalizing is on Step 1 ui + .finalizing class*/
.Invoice.view1[step="1"].finalizing .cart-steps li[step="4"]{ 
    background-color: #ff7600;
    color:white;
    cursor: default;
    font-size: 1em;
}
.Invoice.view1 .invoice-header{
    text-align: right;
    padding:0.5em;
    background-color: rgba(0, 80, 255, 0.1);
    border-radius: 10px 10px 0 0;
}
body:not(.port) .Invoice.view1 .pricing-area{
    width: 15em;
}
.Invoice.view1 .pricing-area{
    background-color: rgba(0, 81, 255, 0.1);
    border-radius: 0 0 10px 10px;
    padding:2em 0.5em;
}
.Invoice.view1 .pricing-area .title{
    font-size: 0.9em;
    margin: 0.25em 0.5em;
    padding:0.1em 0.5em;
    background-color: rgba(192, 192, 192, 0.3);
    border-radius: 1em;
}
.Invoice.view1 .pricing-area input{
    padding:0.5em;
}
.Invoice.view1 .pricing-area table{
    box-sizing: border-box;
    width: 100%;
}
.Invoice.view1 .pricing-area .coupons{
    border-top: 1px solid silver;
    border-bottom: 1px solid silver;
    /* margin-bottom: 0.5em; */
}
.Invoice.view1 label{
    display: inline;
    font-size: 0.9em;
    margin: 0.25em 0.5em;
    padding:0.1em 0.5em;
    background-color: rgba(192, 192, 192, 0.3);
    border-radius: 1em;
}
.Invoice.view1 label::after{
    content: "\a";
    white-space: pre;
}
.Invoice.view1 .explain-area{
    margin:0.25em;
    padding:0.5em;
    background-color: rgba(192, 192, 192, 0.1);
    border-radius: 0.5em;
    margin-top:0.5em
}
.Invoice.view1 .explain-area textarea{
    width: 100%;
    box-sizing: border-box;
    min-height: 5em;
    border: 1px solid rgba(192, 192, 192, 0.5);
    border-radius: 0.5em;
    padding: 0.5em
}

.Invoice.view1 .next-step{
    margin-top:2.5em;
    padding:0.5em;
    background: linear-gradient(135deg, #ff7600, orangered);
    color:white;
    font-weight: bold;
    font-size: 0.9em;
    border:1px solid orangered;
    border-radius: 1.5em;
    min-width: 10em;
}
.Invoice.view1 .previous-step{
    margin-top:2.5em;
    padding:0.5em;
    background: linear-gradient(135deg, #0066ff, rgb(0, 68, 255));
    color:white;
    font-weight: bold;
    font-size: 0.9em;
    border:1px solid #0066ff;
    border-radius: 1.5em;
    min-width: 10em;
}
.Invoice.view1 .pricing-area .next-step{
    width: 100%;
}
.Invoice.view1 button{
    cursor: pointer;
}


body:not(.port) .Invoice.view1 .invoice-body{
    display: table;
    box-sizing: border-box;
    width: 100%;
}
body:not(.port) .Invoice.view1 .invoice-body>div{
    display: table-cell;
}
.Invoice.view1 .invoice-body{
    min-height: 60vh;
}
.Invoice.view1 .invoice-body>div{
    padding:0.5em;
}





.Invoice[step="1"] .step:not([step="1"]) {display: none;}
.Invoice[step="2"] .step:not([step="2"]) {display: none;}
.Invoice[step="3"] .step:not([step="3"]) {display: none;}

.Invoice.view1:not(.finalizing) .finalizing{
    display: none !important;
}
.Invoice.view1.finalizing .not-finalizing{
    display: none !important;
}
.Invoice:not(.shippable) .shipping-fee { display: none; }



body:not(.port) .Invoice.view2 .pricing-area{
    width: 15em;
}
.Invoice.view2 .pricing-area{
    background-color: rgba(0, 81, 255, 0.1);
    border-radius: 0 0 10px 10px;
    padding:2em 0.5em;
}
.Invoice.view2 .pricing-area .title{
    font-size: 0.9em;
    margin: 0.25em 0.5em;
    padding:0.1em 0.5em;
    background-color: rgba(192, 192, 192, 0.3);
    border-radius: 1em;
}
.Invoice.view2 .pricing-area input{
    padding:0.5em;
}
.Invoice.view2 .pricing-area table{
    box-sizing: border-box;
    width: 100%;
}
.Invoice.view2 .pricing-area .coupons{
    border-top: 1px solid silver;
    border-bottom: 1px solid silver;
    /* margin-bottom: 0.5em; */
}
.Invoice.view2 label{
    display: inline;
    font-size: 0.9em;
    margin: 0.25em 0.5em;
    padding:0.1em 0.5em;
    background-color: rgba(192, 192, 192, 0.3);
    border-radius: 1em;
}
.Invoice.view2 label::after{
    content: "\a";
    white-space: pre;
}

body:not(.port) .Invoice.view2 .invoice-body{
    display: table;
}
body:not(.port) .Invoice.view2 .invoice-body>div{
    display: table-cell;
}
.Invoice.view2 .invoice-body{
    box-sizing: border-box;
    width: 100%;
    min-height: 40vh;
}
.Invoice.view2 .invoice-body>div{
    padding:0.5em;
}
.Invoice.view2 .subscribe-area button{
    width: calc(100% - 1em);
    margin-top: 1em;
}



.Invoice.view3 .op-area{
    display: block !important;
}
.Invoice.view3 thead td{
    background-color: rgb(49, 49, 49);
    color:white;
}
.Invoice.view3 .tracking-area img{
    width: 10em;
    margin: 1em;
}

.Invoice.view4{
    padding:1em;
}
.Invoice.payed .unpayed, 
.Invoice.canceled .unpayed{
    display: none;
}

.Invoice.mode-admin .not-admin{
    display: none;
}
.Invoice:not(.mode-admin) .admin{
    display: none;
}


.Invoice.view5{
    padding:0.5em;
    border-radius: 5px;
    background-color: #c0b2b22d;
}
body:not(.port) .Invoice.view5{
    margin:auto;
    width: min(35em, 50%);
}
body.port .Invoice.view5{
    margin:auto;
    width: 90%;
}
.Invoice.view5 .sides{
    display: table;
    width: 100%;
}
.Invoice.view5 .sides>div{
    display: table-cell;
}
.Invoice.view5 .sides>div:first-child{
    text-align: start;
}
.Invoice.view5 .sides>div:last-child{
    text-align: end;
}
.Invoice.view5 [bind="items"]{
    margin:2em 0;
}
.Invoice.view5 .pricing-area{
    padding:1em 3em;
}
.Invoice.view5 .subtotal label{
    display: inline-block;
    vertical-align: middle;
    font-weight: bold;
    margin: 1em;
}
.Invoice.view5 .subtotal span{
    display: inline-block;
    vertical-align: middle;
}
.Invoice.view5 button{
    padding:0.5em 1em;
    border-radius: 1.5em;
}
.InvoiceItem.view1{
    border-radius: 5px;
    border:2px solid rgba(192, 192, 192, 0.5);
    position: relative;
    overflow: hidden;
    margin-bottom: 0.5em;
}
.InvoiceItem.view1 .row{
    position: absolute;
    bottom:0;
    left:0;
    padding:0.25em;
    background-color: rgb(55, 53, 73);
    color:white;
    border-top-right-radius: 5px;
    font-size: 0.8em;
}
.InvoiceItem.view1 img{
    height: 4em;
    width: 6em;
    background-color:silver;
    overflow: hidden;
    object-fit: cover;
}
.InvoiceItem.view1 .item-body{
    display: table;
    box-sizing: border-box;
    width: 100%;
}
.InvoiceItem.view1 .item-body>div{
    display: table-cell;
    vertical-align: middle;
}
.InvoiceItem.view1 .item-body .title-cell{
    padding:1em;
}
.InvoiceItem.view1 .item-body .price-cell{
    width: 10em;
    padding:0.5em;
}
.InvoiceItem.view1 .item-body .price-cell .price{
    font-size: 0.8em;
    color:gray
}
.InvoiceItem.view1 .item-body .image-cell{
    width: 5em;
    text-align: right;
}
.InvoiceItem.view1 .op-area{
    background-color: rgba(192, 192, 192, 0.3);
    padding:0.5em;
    text-align: right;
}
.InvoiceItem.view1 .op-area input{
    padding:0.5em;
    width: 5em;
}
.InvoiceItem.view1 .op-area .delete{
    display: inline-block;
    height: 1em;
    margin-right: 2em;
    cursor: pointer;
    color:red;
    vertical-align: middle;
}
.InvoiceItem.view1 .op-area .delete::before{
    min-height: 1em !important;
}
.Invoice.view2 .InvoiceItem.view1 .op-area{
    display: none;
}
.ItemOperator.view1{
    border:1px solid rgba(182, 186, 218, 0.6);
    margin:0.5em;
    position: relative;
    color: rgb(73, 74, 99);
    border-radius: 3px;
}
/* .ItemOperator.view1>.title{
    height: 1.5em;
} */
.ItemOperator.view1>.title .blues-icon{
    height: 1.5em;
    width: 1.5em;
    cursor: pointer;
    float:right;
}
.ItemOperator.view1>.title .blues-icon::before{
    transform: rotate(90deg);
}
.ItemOperator.view1>.title .blues-icon.blues-active{
    background-color: #a1a8af42;
}
.ItemOperator.view1>.title .blues-icon:not(.blues-active) .item-op-menu{
    display: none;
}
.ItemOperator.view1 .item-op-menu{
    list-style: none;
    position: absolute;
    top:1.5em;
    right:0;
    border:1px solid silver;
    border-radius: 0.25em;
    background-color: white;
    padding:0;
    margin:0;
    z-index: 2;
    overflow: hidden;
}
.ItemOperator.view1 .item-op-menu li{
    padding: 0.2em 1em;
    min-width: 5em;
}
.ItemOperator.view1 .item-op-menu li:hover{
    background-color: rgb(93, 89, 110);
    color:white;
}
.ItemOperator.view1 .item-op-menu li:not(:last-child){
    border-bottom: 1px solid #efeeee;
}
.ItemOperator.view1 .bottom-op-menu{
    list-style: none;
    padding: 5px;
    margin:0;
    background: rgba(32, 23, 23, 0.05);
    font-size: 0.9em;
}
.ItemOperator.view1 .bottom-op-menu li{
    font-family: sans-serif;
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid silver;
    border-radius: 1em;
    padding: 5px 20px;
    min-width: 5.5em;
    text-align: center;
    cursor: pointer;
    background: radial-gradient(rgb(58, 124, 247), rgb(42, 116, 255));
    color:white;
}
body:not(.port) .BluesActivity.view42 .ifroom{
    border:1px solid silver;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
    display: inline-block;
    font-size: 1.5em;
    margin:1em;
    padding:1em 1em;
    text-align: center;
    min-width: 25%;
    box-sizing: border-box;
    color:rgb(75, 77, 87);
}
body:not(.port) .BluesActivity.view42 .ifroom.by-location{
    visibility: hidden;
}
body:not(.port) .BluesActivity.view42 .ifroom .unit{
    font-size: 0.5em;
    margin:0.5em;
}
body:not(.port) .BluesActivity.view42 .chart-area, 
body:not(.port) .BluesActivity.view41 .chart-area{
    height: 450px;
    width: calc(100% - 2em);
    margin:1em auto;
    background-color: white;
    border-radius: 0.25em;
    border:1px solid silver;
    color: black !important;
}
.BluesActivity.view41 .linkstat-report-pan .def-dialog{
    transition: all 0.5s;
    max-height: 50vh;
    overflow: hidden;
}
.BluesActivity.view41 .linkstat-report-pan.less .def-dialog{
    max-height: 0;
}
.BluesActivity.view41 .frow{
    display: inline-block;
    padding:0.5em;
}
.BluesActivity.view41 .linkstat-report-pan.less .less-btn,
.BluesActivity.view41 .linkstat-report-pan.less .report-btn{
    display: none;
}
.BluesActivity.view41 .linkstat-report-pan:not(.less) .more-btn{
    display: none;
}
body:not(.rtl) .BluesActivity.view41 .frow{
    text-align: left;
}
body.rtl .BluesActivity.view41 .frow{
    text-align: right;
}
.BluesActivity.view41 label{
    display: block;
    margin:0 0.5em 0 0.5em;
}
.BluesActivity.view41 input, .BluesActivity.view41 select{
    box-sizing: border-box;
    min-width: 15em;
}
.Log .text.blues-active .summery{
    display: none;
}
.Log .text.blues-active button{
    display: none;
}
.Log .text:not(.blues-active) .detail{
    display: none;
}
.Log .text{
    white-space: break-spaces;
}
.BluesActivity.view29 .text{
    width: 15em;
}
.Message.view3.rtl .content-area, .Message.view2.rtl .content-area,.Message.view5.rtl .content-area{
    direction: rtl !important;
}
.Message.view2{
    padding: 1em;
}
.Message.view2.mine{
    text-align: end;
}
.Message.view2:not(.mine){
    text-align: start;
}
.Message.view2 .content-area{
    width: 70%;
    border-radius: 0.5em;
    padding:1em;
    text-align: start;
    display: inline-block;
}
.Message.view2.mine .content-area{
    background-color:rgb(217, 255, 217);
    color:rgb(27, 39, 27);
}
.Message.view2:not(.mine) .content-area{
    background-color: rgb(223, 222, 222);
    color:rgb(34, 35, 43);
}
.Message.view2 .time{
    padding:0.25em;
    text-align: end;
    font-size: 0.7em;
}

.Message .content-area img{
    width: 100%;
    max-height: 50vh;
    object-fit: scale-down;
}
.Message .content-area audio{
    max-width: 100%;
}


.Message.view3{
    padding: 1em;
    user-select: none;
}
.Message.view3.mine{
    text-align: end;
}
.Message.view3 .sides{
    display: table;
    box-sizing: border-box;
    width: 100%;
}
.Message.view3.mine .sides{
    direction: rtl;
}
.Message.view3 .sides>div{
    display: table-cell;
    vertical-align: middle;
    direction: ltr;
}
.Message.view3 .sides>div:first-child{
    width: 4em;
    text-align: center;
}
.Message.view3 .avatar-pan img,.Message.view3 .avatar-pan svg{
    width: 2.5em;
    height: 2.5em;
    margin:0.25em;
    display: inline-block;
    border-radius: 50%;
    background-color: transparent;
    border:2px dashed rgb(18, 80, 3);
    outline:2px solid rgb(18, 80, 3);
    vertical-align: middle;
    object-fit: cover;
    cursor: pointer;
    user-select: none;
}
.Message.view3:not(.mine){
    text-align: start;
}
.Message.view3 .senderTitle{
    display: inline-block;
    font-size: 0.8em;
    padding: 0.25em;
    width: calc(70% + 2em);
    /* text-align: start; */
}
.Message.view3 .content-area{
    display: inline-block;
    text-align: start;
    width: 70%;
    border-radius: 0.5em;
    direction: ltr;
}
.Message.view3 .content-value{
    user-select: all;
    padding:1em 1em 0 1em;
}
.Message.view3.mine .content-area{
    background-color:rgb(217, 255, 217);
    color:rgb(27, 39, 27);
    border:1px solid green;
}
.Message.view3:not(.mine) .content-area{
    background-color: rgb(252, 250, 250);
    color:rgb(34, 35, 43);
    border:1px solid silver;
}
.Message.view3 .time{
    margin:0.5em 2em;
    text-align: end;
    font-size: 0.7em;
}
.Message.view3 .title .blues-icon{
    height: 1.5em;
    width: 1.5em;
    cursor: pointer;
    float:right;
    position: relative;
    direction: ltr;
}
.Message.view3 .title .blues-icon::before{
    transform: rotate(90deg);
}
.Message.view3 .title .blues-icon.blues-active{
    background-color: #a1a8af42;
}
.Message.view3 .title .blues-icon:not(.blues-active) .item-op-menu{
    display: none;
}
.Message.view3 .title .blues-icon:not(.blues-active) .msg-op-menu{
    display: none;
}
.Message.view3 .msg-op-menu{
    list-style: none;
    position: absolute;
    top:1.5em;
    right:0;
    border:1px solid silver;
    border-radius: 0.25em;
    background-color: white;
    padding:0;
    margin:0;
    z-index: 2;
    overflow: hidden;
}
.Message.view3 .msg-op-menu li{
    padding: 0.2em 1em;
    min-width: 5em;
    white-space: nowrap;
}
.Message.view3 .msg-op-menu li:hover{
    background-color: rgb(93, 89, 110);
    color:white;
}
.Message.view3 .msg-op-menu li:not(:last-child){
    border-bottom: 1px solid #efeeee;
}






.Message.view4{
    padding: 0.5em;
    color:rgb(34, 35, 43);
    border-top:2px solid green;
    font-size: 0.8em;
}
.Message.view4 .sides{
    display: table;
    box-sizing: border-box;
    width: 100%;
}
.Message.view4 .sides>div{
    display: table-cell;
    vertical-align: middle;
    direction: ltr;
}
.Message.view4 .sides>div:last-child{
    width: 2em;
    text-align: center;
}
.Message.view4 .sides>div:last-child .blues-icon{
    cursor: pointer;
}
.Message.view4 .senderTitle{
    display: block;
    font-size: 0.8em;
    padding: 0.25em;
}
.Message.view4 .content-area{
    padding: 0.5em 1em;
}
.Message.view4 img{
    height: 2.5em;
    width: 2.5em;
    object-fit: cover;
}
.Message.view4 audio{
    transform: scale(0.8);
}

.Message.view5{
    padding: 0.5em;
    color: rgb(34, 35, 43);
    /* border-top: 2px solid rgb(6, 56, 6); */
    font-size: 0.8em;
    margin: 0.5em 2em;
    /* border-right: 4px solid #2344237a; */
}
.Message.view5.rtl{
    border-right: 4px solid #2344237a;
}
.Message.view5:not(.rtl){
    border-left: 4px solid #2344237a;
}
.Message.view5 .content-area{
    background-color:transparent !important;
    border:none !important;
}
.Message.view5 img{
    height: 2.5em;
    width: 2.5em;
    object-fit: cover;
}
.Message.view5 audio{
    transform: scale(0.8);
}

.Message.flash{
    animation-duration: 2s;
    animation-name: flash-message;
    animation-iteration-count: 1;
    animation-direction: alternate;
}


@keyframes flash-message {
    from {
        background-color: transparent;
    }

    50% {
        background-color: #34466e57;
    }

    to {
        background-color: transparent;
    }
}

.NFC.view1{
    border: 1px solid rgba(192, 192, 192, 0.3);
    box-shadow: 0 0 2px rgb(50, 50, 50, 0.3);
    border-radius: 5px;
    padding:0.5em;
    margin:0.5em;
    text-align: start;
}
.NFC.view1 label{
    display: inline;
    font-size: 0.9em;
    margin: 0.25em 0.5em;
    padding:0.1em 0.5em;
    background-color: rgba(192, 192, 192, 0.3);
    border-radius: 1em;
}
.NFC.view1 label::after{
    content: "\a";
    white-space: pre;
}
.NFC.view1 .field{
    padding: 0.5em;
    margin: 0.5em;
    background-color: rgba(192, 192, 192, 0.2);
    border-radius: 5px;
    display: inline-block;
    vertical-align: top;
}

.NFC.view2{
    background-color: rgba(192, 192, 192, 0.2);
    margin: 0.5em;
    display: table;
    box-sizing: border-box;
    width: calc(100% - 1em);
    border-radius: 5px;
    overflow: hidden;
}
.NFC.view2>div{
    display: table-cell;
    padding: 0.25em;
}

.NFC.view4{
    padding:1em;
    height: 5em;
}
.notify-dialog{
    z-index: 100000;
    transition: all 0.3s;
    cursor: default;
    position: fixed;
    width: 15em;
    padding:1em;
}
.notify-dialog:hover{
    opacity: 0.3 !important
}
.notify-dialog.notify-visible{
    opacity: 1
}
.notify-dialog:not(.notify-visible){
    opacity: 0
}
.notify-dialog .notify-badge {
    position: absolute;
    top: -1em;
    left: -1em;
    font-size: 0.7rem;
    color: #fff;
    /* background-color: #FF4081; */
    background: linear-gradient( red, #850202);
    border-radius: 50%;
    font-family: "Roboto";
    
    /* Alignment */
    line-height: 0;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    
    /* Adjust as required: */
    padding: 10px;
  }
  
  /* Height = width */
.notify-dialog .notify-badge::after {
    content: "";
    display: block;
    padding-bottom: 100%;
  }
.notify-info{
    background:linear-gradient(#45ad64,#226e38);
    color:white;
    border:0.1em solid #45ad64;
    border-radius: 0.3em;
    box-shadow: 0em 0.2em 0.3em #2f302f;
}
.notify-warning{
    background:linear-gradient(#f59d33,#a3661c);
    color:white;
    border:0.1em solid #f59d33;
    border-radius: 0.3em;
    box-shadow: 0em 0.2em 0.3em #2f302f;
}
.notify-error{
    background:linear-gradient(#e64964,#b5223b);
    color:white;
    border:0.1em solid #e64964;
    border-radius: 0.3em;
    box-shadow: 0em 0.2em 0.3em #2f302f;
}

.notify-message-container{
    background-color: rgba(0,0,0,0.3);
    position: fixed;
    top:0px;left:0px;bottom: 0px;right: 0px;
    user-select: none;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.notify-message-dialog{
    box-sizing: border-box;
    background-color: white;
    border-radius: 0.5em;
    border:0.2em solid #602880;
    border-radius: 0.5em ;
    box-shadow: 0px 0px 0.5em #602880;
}
body.port .notify-message-dialog{
    width: 95vw;
}
body:not(.port) .notify-message-dialog{
    min-width: 50vw;
    max-width: 80vw;
}
.notify-message-operations{
    background-color:#e3d1ed;
    border-bottom-right-radius:0.3em;
    border-bottom-left-radius:0.3em;
    padding: 0.5em;
    text-align: center;
}
.notify-message-text{
    padding: 1em;
}
.notify-message-container button{
    color: white;
    font-size: 1em;
    border-radius: 1em;
    box-sizing: border-box;
    padding: 0.3em 1em;
}
button.notify-positive{
    background-color: rgb(5, 63, 5);
    border:1px solid rgb(15, 119, 15);
}
button.notify-negative{
    background-color: rgb(109, 6, 32);
    border:1px solid rgb(182, 21, 61);
}
button.notify-neutral{
    background-color: rgb(209, 158, 16);
    border:1px solid rgb(255, 187, 0);
}
.PageNavigator{
    text-align: center;
    overflow: hidden;
    padding:0.5em;
}
.PageNavigator .pages{
    display: inline-block;
}
.PageNavigator button{
    display: inline-block;
    vertical-align: middle;
    margin:0.5em;
    padding:0.5em 1em;
    border:0;
    border-radius: 5px;
    cursor: pointer;
}
.PageNavigator .selected{
    outline: 2px solid orange;
    outline-offset: 4px;
}
.PriceTag.view1{
    position: relative;
}
.PriceTag.view1>div:not(.blues-icon){
    display: inline-block;
    vertical-align: middle;
    padding: 0.25em;
    background-color: rgba(192, 192, 192, 0.2);
    border-radius: 5px;
}
.PriceTag.view1 input[type="number"]{
    width: 10em;
}
.PriceTag.view1 select{
    width: 8em;
}
.PriceTag.view1 label{
    display: inline;
    font-size: 0.9em;
    margin: 0.25em 0.5em;
    padding:0.1em 0.5em;
    background-color: rgba(192, 192, 192, 0.3);
    border-radius: 1em;
}
.PriceTag.view1 label::after{
    content: "\a";
    white-space: pre;
}
.PriceTag.view1 .blues-icon{
    position: absolute;
    margin-left: 0.2em;
    height: 1em;
    width: 0;
    cursor: pointer;
    vertical-align: top;
    right: 0;
}
.PriceTag.view1 .blues-icon::before{
    background-color: red;
    color: white;
    position: absolute;
    top: 0;
    right: 0.2em;
    border-radius: 5px;
    box-sizing: border-box;
}
.Product.view1 label{
    display: inline;
    font-size: 0.9em;
    margin: 0.25em 0.5em;
    padding:0.1em 0.5em;
    background-color: rgba(192, 192, 192, 0.3);
    border-radius: 1em;
}
.Product.view1 label::after{
    content: "\a";
    white-space: pre;
}
.Product.view1 .frow{
    display: inline-block;
    vertical-align: top;
}
.Product.view1 .field{
    padding: 0.5em;
    margin: 0.5em;
    background-color: rgba(192, 192, 192, 0.2);
    border-radius: 5px;
}
.Product.view1 .product-image{
    height: 7.5em;
    width: 10em;
    object-fit: cover;
}
.Product.view1 textarea{
    width: 100%;
    box-sizing: border-box;
    min-height: 5em;
    border: 1px solid rgba(192, 192, 192, 0.5);
    border-radius: 0.5em;
    padding: 0.5em
}
.Product.view1 .image-pan>div{
    display: table-cell;
    padding: 0.5em;
    vertical-align: middle;
}

.Product:not(.shippable) .shippable-area{display: none;}
.Product:not(.recurring) .recurring-area{display: none;}
body[vision="light"] .Product.view2{
    background-color: #ffffffd0;
}
body[vision="dark"] .Product.view2{
    background-color: #ffffff30;
}
.Product.view2{
    display: inline-block;
    vertical-align: top;
    margin: 0.25em;
    width: 15em;
    height: 22em;
    border-radius: 5px;
    border:1px solid rgba(192, 192, 192, 0.6);
    box-shadow: 0 0 5px rgb(50, 50, 50, 0.3);
    overflow: hidden;
    position: relative;
}
.Product.view2 .product-image{
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 10em;
    object-fit: cover;
    border:0;
    border-radius: 0px 0px 10px 10px;
    background-color: silver;
    overflow: hidden;
}
.Product.view2 .title{
    box-sizing: border-box;
    padding:1em;
    font-weight: bold;
}
.Product.view2 .pricing-area>div{
    display: table-cell;
    vertical-align: top;
    padding:1em
}
.Product.view2 .subscribe-area{
    padding:0.5em;
    background-color: rgba(192, 192, 192, 0.2);
    position:absolute;
    bottom:0;
    left:0;
    right:0;
}
.Product.view2 .cart-area{
    padding:0.5em;
    background-color: rgba(192, 192, 192, 0.2);
    position:absolute;
    bottom:0;
    left:0;
    right:0;
}
.Product.view2 .cart-area input{
    width: 5em;
    box-sizing: border-box;
    border:1px solid rgba(192, 192, 192, 0.5);
    padding:0.5em;
    text-align: center;
    border-radius: 5px;
}
.Product.view2 .cart-area input:focus{
    outline: 2px solid orange;
    outline-offset: 2px;
}
.Product.view2.discounted .price{
    text-decoration: line-through;
    color: rgb(184 0 0);
    text-shadow: 0px 0px 10px white;
}
.Product.view2:not(.discounted) .discounted{
    display: none;
}
.Product.view2.subscribable .cart-area{
    display: none;
}
.Product.view2:not(.subscribable) .subscribe-area{
    display: none;
}
.Product.view2 .subscribe-area button{
    width: calc(100% - 1em);
}




.Product.view3{
    margin:1em;
    border-radius: 5px;
    border:1px solid rgba(192, 192, 192, 0.6);
    box-shadow: 0 0 5px rgb(50, 50, 50, 0.3);
}
.Product.view3 .product-body{
    display: table;
    box-sizing: border-box;
    width: 100%;
    min-height: 50vh;
}
.Product.view3 .product-body>div{
    display: table-cell;
    vertical-align: top;
    width: 50%;
}
.Product.view3 .product-image{
    position:relative;
    z-index: 1;
    width: 100%;
    height: 50vh;
    background-color: gray;
    border-radius: 0 10px 10px 0;
    overflow: hidden;
}
.Product.view3 .title{
    font-size: 1.3em;
    margin:0.5em 1em;
}
.Product.view3 .description{
    font-size: 1em;
    margin-top:0.5em;
}
.Product.view3 .pricing-area{
    padding:0.5em;
}
.Product.view3 .detail-area{
    position:relative;
}
.Product.view3 .cart-area{
    position: absolute;
    bottom: 0;
    left:-10px;
    right:0;
    padding:0.5em 1em;
    background-color: rgba(192, 192, 192, 0.2);
    z-index: 0;
}
.Product.view3 .cart-area input{
    width: 5em;
    box-sizing: border-box;
    border:1px solid rgba(192, 192, 192, 0.5);
    padding:0.5em;
    text-align: center;
}
.Product.view3 .subscribe-area{
    padding:0.5em 1em;
    background-color: rgba(192, 192, 192, 0.2);
    position:absolute;
    bottom:0;
    left:-10px;
    right:0;
    z-index: 0;
}
.Product.view3 .cart-area input:focus{
    outline: 2px solid orange;
    outline-offset: 2px;
}
.Product.view3.discounted .price{
    text-decoration: line-through;
    color:rgb(210, 30, 30);
}
.Product.view3:not(.discounted) .discounted{
    display: none;
}
.Product.view3.subscribable .cart-area{
    display: none;
}
.Product.view3:not(.subscribable) .subscribe-area{
    display: none;
}
.Product.view3 .subscribe-area button{
    width: calc(100% - 1em);
}









.Product.view4{
    margin:1em;
}
.Product.view4 .product-body{
    display: table;
    box-sizing: border-box;
    width: 100%;
}
.Product.view4 .product-body>div{
    display: table-cell;
    vertical-align: top;
}
.Product.view4 .product-image{
    position:relative;
    z-index: 1;
    width: 7.5em;
    height: 7.5em;
    background-color: gray;
    border-radius: 10px;
    overflow: hidden;
}
.Product.view4 .title{
    font-size: 1.3em;
    margin-bottom:0.5em;
}
.Product.view4 .description{
    font-size: 0.9em;
    margin-top:0.5em;
    max-height: 3em;
    overflow: hidden;
}

.ProjectRecord.view3 .time{
    padding:0.25em 2em;
    background-color: rgba(192, 192, 192, 0.3);
    margin-top:2em;
}
.BluesActivity.view50 button.blues-icon{
    height:unset;
}

.BluesActivity.view50 input{
    width: min(25em, 50%);
}
.Resume .blues-icon{
    display: inline-block;
    height: 1em;
    vertical-align: middle;
    cursor: pointer;
    border:1px solid silver;
    padding: 0.25em 1.5em 0.25em 0.5em;
    border-radius: 1em;
    background-color: dodgerblue;
    color:white;
}
.Resume .blues-icon::before{
    min-height: 1em;
}
.Resume .item{
    position: relative;
}
.Resume .item .delete{
    height: 1em;
    color:red !important;
    background-color: transparent !important;
    border:0 !important;
    position: absolute;
    top:1.25em;
    right:0.5em;
}

.Resume.view1 .resume-op-area{
    padding:0.5em 1em !important;
    margin-bottom: 1em;
    border-bottom: 1px solid var(--text-color);
    border-radius: 5px 5px 0 0 !important;
}
.Resume.view1 .resume-op-area h3{
    display: inline-block;
    margin:0.5em;
}
.Resume.view1 .resume-op-area .blues-icon{
    float : right;
    margin: 0.5em;
}
.Resume.view1 .resume-op-area .area{
    margin:1em 0.5em;
}
.Resume.view1 label{
    display: inline;
    font-size: 0.9em;
    margin: 0.25em 0.5em;
    padding:0.1em 0.5em;
    background-color: rgba(192, 192, 192, 0.3);
    border-radius: 1em;
}
.Resume.view1 label::after{
    content: "\a";
    white-space: pre;
}

.Resume.view1 textarea, .Resume.view1 .wideText{
    width: 100%;
    box-sizing: border-box;
    min-height: 3em;
    border: 1px solid rgba(192, 192, 192, 0.5);
    border-radius: 0.5em;
    padding: 0.5em
}

.Resume.view1 .resume-field{
    padding: 0.25em;
    background: rgba(192, 192, 192, 0.2);
    border-radius: 5px;
    margin:0.25em;
}
.Resume.view1 .frow{
    display: inline-block;
    vertical-align: top;
}
.Resume.view1 .item{
    padding: 0.5em;
}
.Resume.view1 .area>div:not(:last-child) .item{
    border-bottom: 1px dashed var(--text-color);
}


.Resume.view2{
    /* margin: 0.25em auto; */
    border-radius: 5px;
    /* border:1px solid rgba(192, 192, 192, 0.6);
    box-shadow: 0 0 5px rgb(50, 50, 50, 0.3); */
    overflow: hidden;
}
.Resume.view2 .sides{
    display: table;
    box-sizing: border-box;
    width: 100%;
    width: calc(100% - 1em);
    margin:0.5em;
}
.Resume.view2 .sides>div{
    display: table-cell;
    vertical-align: middle;
}
.Resume.view2 .skill-side{
    width: 15em;
}
.Resume.view2 .desc-side{
    box-sizing: border-box;
    padding:0.5em;
    height:8em;
}
.Resume.view2 .title{
    font-size: 0.9em;
    padding:0 10px;
}
.Resume.view2 .full-name{
    font-size: 0.7em;
    padding:0 10px;
    opacity: 0.7;
}
.Resume.view2 .summery{
    max-height: 3em;
}


.Resume.view3{
    margin: 0.25em auto;
    min-width: min(15em, 50%);
    max-width: 40em;
    border-radius: 5px;
    border:1px solid rgba(192, 192, 192, 0.6);
    box-shadow: 0 0 5px rgb(50, 50, 50, 0.3);
    overflow: hidden;
    text-align: start;
    padding:0 1em;
}
.Resume.view3>h1{
    margin:0;
    padding:0.5em 1em;
}
.Resume.view3 label{
    display: inline;
    font-size: 0.9em;
    margin: 0.25em 0.5em;
    padding:0.1em 0.5em;
    background-color: rgba(192, 192, 192, 0.3);
    border-radius: 1em;
}
.Resume.view3 label::after{
    content: "\a";
    white-space: pre;
}
.Resume.view3 .resume-field{
    padding: 0.25em;
    background: rgba(192, 192, 192, 0.2);
    border-radius: 5px;
    margin:0.25em;
}
.Resume.view3 .frow{
    display: inline-block;
    vertical-align: top;
}
.Resume.view3 .item{
    padding: 0.5em;
}
.Resume.view3 .area>div:not(:last-child) .item{
    border-bottom: 1px dashed var(--text-color);
}
.Route.view1 textarea{
    box-sizing: border-box;
    display: block;
    margin:1em;
    padding:0.5em;
    border-radius: 0.3em;
    width:calc(100% - 2em);
    min-height: 50px;
}
.Route.view1 textarea{
    min-height: 100px;
}
.Route.view1 .frow{
    display: inline-block;
    padding:0.5em;
}
.Route.view1 label{
    display: block;
    margin:0 0.5em 0 0.5em;
}

.SearchResult.view1{
    --color : #003f7d;
    overflow: hidden;
}
.SearchResult.view1:not(:last-child){
    margin-bottom: 1.5em;
}
.SearchResult.view1>.title{
    padding:0.5em;
    border-radius: 0.25em;
    color:white;
    font-weight: bold;
    background: linear-gradient(45deg, var(--color), transparent);
    display: table;
    width: 100%;
    box-sizing: border-box;
    font-size: 0.9em;
}
.SearchResult.view1>.content-area{
    padding-bottom: 1em;
}
.SearchResult.view1>.title>div{
    display: table-cell;
    vertical-align: middle;
}
.SearchResult.view1>.title .front{
    width:10em;
}
.SearchResult.view1>.title .front button{
    background-color: orangered;
    color:white;
    font-weight: bold;
    border:none;
    cursor: pointer;
    padding:0.5em 2.5em;
    border-radius: 1em;
    font-size: 0.8em;
    float: right;
}
.Signal.view1 textarea{
    box-sizing: border-box;
    display: block;
    margin:1em;
    padding:0.5em;
    border-radius: 0.3em;
    width:calc(100% - 2em);
    min-height: 50px;
}
.Signal.view1 textarea{
    min-height: 100px;
}
.Signal.view1 .frow{
    display: inline-block;
    padding:0.5em;
}
.Signal.view1 label{
    display: block;
    margin:0 0.5em 0 0.5em;
}

/* .Signal.view2 {
    padding:0.5em;
} */
.Signal.view2 .signal-header{
    background-color: rgba(4, 10, 27, 0.1);
    padding:1em;
}
.Signal.view2 .details-pan{
    padding: 0.5em;
}
.Signal.view2 .symbol{
    font-weight: bold;
}
.Signal.view2 table{
    box-sizing: border-box;
    width: 100%;
}

.Signal.view4{
    font-size: 0.7em;
    margin-bottom: 0.5em;
    cursor: pointer;
}
.Signal.view4 .signal-header{
    white-space: nowrap;
}
.Signal.view4 .signal-header span{
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
    width: calc(33% - 0.4em);
    padding:0.4em;
}
.Signal.view4 .signal-header span.side{
    text-align: right;
}
.Signal.view4 table{
    display: none;
}
.Signal.view4 .blues-active{
    background-color: rgba(0, 0, 0, 0.05);
}
.Signal.view4 .blues-active table{
    display: table;
    width: 90%;
    margin:1% 5%;
}
.Signal.view4 table td{
    padding:0.2em 0.1em;
}
.Skill.view3{
    display: inline-block;
    vertical-align: top;
    padding: 0.5em;
    margin:0.25em;
    border:1px solid var(--text-color);
    border-radius: 5px;
}
.Skill.view3 span{
    display: inline-block;
    vertical-align: top;
    width: 10em;
}
.Skill.view3 progress{
    display: inline-block;
    vertical-align: top;
    width: 7.5em;
}

.Skill.view4{
    display: inline-block;
    vertical-align: top;
    padding: 0.25em;
    margin:0.25em;
    background-color: silver;
    border-radius: 5px;
}
.Skill.view4 span{
    color:#515151;
}
.SlideShow.view1{
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom: 0;
    background-color:rgba(9, 9, 15, 0.95);
    color:white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}
.SlideShow.view1 .close-btn{
    position: fixed;
    top:1em;
    right:1em;
    cursor: pointer;
}
.SlideShow.view1 img{
    min-width: 5em;
    min-height: 5em;
    max-width: calc(90vw - 2em);
    max-height: calc(90vh - 2em);
    object-fit: scale-down;
    border: 1px solid #2f3234;
}
.slideArea{
    position: relative;
}
.slidePan{
    height: 100%;
    user-select: none;
    overflow-y: hidden;
    overflow-x:scroll;
    white-space: nowrap;
    scroll-behavior: smooth;
}
.slidePan .slide{
    display: inline-block;
    height: 100%;
    width: 100%;
    position:relative;
}
.slide>img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.slide-content-center{
    position:absolute;
    top:0; left:0; right: 0; bottom: 0;
    display: grid;
    align-items: center;
    justify-items: center;
    text-align: center;
}
.slide-content-bottom{
    position: absolute;
    left:0; right: 0; bottom: 15%;
}
.slide-content-top{
    position: absolute;
    left:0; right: 0; top: 5%;
}

.slide-navigator{
    position: absolute;
    left:0;
    right:0;
    bottom: 5%;
    text-align: center;
}
.slide-navigator .nav-button{
    display: inline-block;
    height: 0.5em;
    width: 0.5em;
    background-color: rgba(255,255,255,0.5);
    border:1px solid silver;
    border-radius: 50%;
    margin:0.5em;
    cursor: pointer;
}
.slide-navigator .nav-button:hover{
    background-color:white;
}
.SocialBar.view1{
    background-color: rgba(0, 0, 0, 0.05);
    padding: 0.5em 1em;
    margin: 0.5em;
    margin-bottom: 5em;
}
.SocialBar.view1 .shareto{
    height: 2em;
}
.SocialBar.view1 img{
    width: 2em;
    height: 2em;
    float: right;
    margin-left:1em;
    cursor: pointer;
}
.SocialEvent-List .SocialEvent span{
    display: table-cell;
    white-space: nowrap;
    padding:0.1em;
    overflow: hidden;
    width:50%;
    padding:0.5em;
}
.SocialEvent.view1 textarea{
    box-sizing: border-box;
    display: block;
    margin:1em;
    padding:0.5em;
    border-radius: 0.3em;
    width:calc(100% - 2em);
    min-height: 50px;
}
.SocialEvent.view1 textarea{
    min-height: 200px;
}
.SocialEvent.view1 .frow{
    display: inline-block;
    padding:0.5em;
}
.SocialEvent.view1 label{
    display: block;
    margin:0 0.5em 0 0.5em;
}


.SocialEvent.view2 .thumb-side{
    display: inline-block;
    width: calc(40% - 0.5em);
    vertical-align:top;
}
.SocialEvent.view2 .thumb-side img{
    height: 15vw;
    width: 100%;
    object-fit: cover;
    border-radius: 0.5em;
}
.SocialEvent.view2 .text-side{
    display: inline-block;
    width: calc(60% - 0.5em);
    vertical-align:top;
    padding:1em;
}
.SocialEvent.view2 .time, .SocialEvent.view2 .end{
    display: inline-block;
}
.SocialEvent.view2 .time-area{
    padding:0.2em 1em;
    background-color: rgba(84, 92, 126, 0.25);
}


.SocialEvent.view4{
    font-size: 0.8em;
    margin-bottom: 0.5em;
    cursor: pointer;
}
.SocialEvent.view4 .event-header{
    white-space: nowrap;
}
.SocialEvent.view4 .event-header span{
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;
    width: 50%;
    padding:0.4em;
}
.SocialEvent.view4 .event-header .title{
    width: 60%;
    font-size: 1em;
}
.SocialEvent.view4 .event-header .time{
    font-size: 0.9em;
    width: calc(40% - 1em);
    text-align: right;
}
.SocialEvent.view4 table{
    display: none;
}
.SocialEvent.view4 .blues-active{
    background-color: rgba(0, 0, 0, 0.05);
}
.SocialEvent.view4 .blues-active table{
    display: table;
    width: 90%;
    margin:1% 5%;
}
.SocialEvent.view4 table td{
    padding:0.2em 0.1em;
}


.StringItem.view1{
    display: inline-block;
    padding:0.25em;
    border-radius: 5px;    
    background-color: rgba(192, 192, 192, 0.2);
}
.StringItem.view1 input{
    display: inline-block;
    vertical-align: middle;
    width: min(20em, 70vw);
}
.StringItem.view1 .blues-icon{
    display: inline-block;
    height: 1em;
    vertical-align: middle;
    color:red;
    background-color: transparent !important;
    border:0 !important;
    cursor: pointer;
}
.Subscription.view2{
    padding:1em;
    height: 5em;
}
.Suggest.view1{
    height : calc(1.9em + 2px);
    position: relative;
    z-index: 1;
}
.Suggest.view1 .suggest-container{
    border-radius: 0.5em;
    border:1px solid silver;
    padding:0.25em;
    width: 100%;
    /* min-height: 100%; */
    line-height: 1em !important;
    box-sizing: border-box;
    background-color: white;
}
.Suggest.view1 input{
    border:0;
    display: inline-block;
    vertical-align: middle;
    outline: 0;
    width: calc(100% - 1.7em);
    padding:0;
    /* margin-right: -1.7em; */
    /* padding-right: 2em; */
    font-size: 1em;
    background-color: transparent;
}
.Suggest.view1 .input-icon{
    display: inline-block !important;
    vertical-align: middle;
    height: 1em;
    width: 1em;
    color:rgb(27, 27, 46);
}
.Suggest.view1 .suggest-area:not(.blues-active){
    display:none;
}
.Suggest.view1 ul{
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top:0.5em
}
.Suggest.view1 li{
    padding:0.2em 0.5em;
    cursor: pointer;
    display: block !important;
}
.Suggest.view1 li:not(:first-child){
    border-top: 1px solid rgb(223, 223, 223);
}
.Suggest.view1 li:hover{
    background-color: rgb(84, 84, 117);
    color:white;
}
.Suggest.view1 li img{
    height: 1em;
    width: 1em;
    object-fit: scale-down;
    vertical-align: middle;
}
body:not(.rtl) .Suggest.view1 li img{
    margin-right: 0.5em;
}
body.rtl .Suggest.view1 li img{
    margin-left: 0.5em;
}
.tableB{
    overflow-y: auto;
    overflow-x: auto;
    background-color: silver;
    border-radius: 5px;
}
.tableB table{
    margin: 0;
    box-sizing: border-box;
    border: 1px solid gray;
    border-radius: 5px;
    border-spacing: 0;
    overflow: hidden;
}
.tableB table td{
    padding: 0.25em;
    border-right: 1px solid gray;
}
.tableB table td:first-child{
    border-left: 1px solid gray;
}
.tableB table td{
    border-bottom: 1px solid gray;
}
.tableB table tr:first-child td{
    border-top: 1px solid gray;
}
.tableB table thead td{
    background-color: rgb(39, 39, 54);
    color:white;
    text-align: center;
}
.tableB table tbody td{
    background-color: white;
    color:black;
    text-align: start;
}
.Ticket label{
    display: inline;
    font-size: 0.9em;
    margin: 0.25em 0.5em;
    padding:0.1em 0.5em;
    background-color: rgba(192, 192, 192, 0.3);
    border-radius: 1em;
}
.Ticket label::after{
    content: "\a";
    white-space: pre;
}
.Ticket.view1{
    border: 1px solid rgba(192, 192, 192, 0.3);
    box-shadow: 0 0 2px rgb(50, 50, 50, 0.3);
    border-radius: 5px;
    padding:0.5em;
    margin:0.5em;
}
.Ticket.view1 .field{
    padding: 0.5em;
    margin: 0.5em;
    background-color: rgba(192, 192, 192, 0.2);
    border-radius: 5px;
}
.Ticket.view1 textarea{
    width: calc(100% - 1em);
    box-sizing: border-box;
    min-height: 5em;
}

.Ticket.view2{
    padding:1em;
    height: 5em;
}

.Ticket.view3 table{
    width: 100%;
    box-sizing: border-box;
    border-spacing: 0;
}
.Ticket.view3 thead td{
    font-weight: bold;
}
.Ticket.view3 textarea{
    width: calc(100% - 1em);
    box-sizing: border-box;
    min-height: 5em;
}
.Ticket.Ticket.view3 .title-content{
    background: #c0c0c073;
    margin: 1em 0;
    border-radius: 0.5em;
}
.Ticket.view3:not(.admin-mode) select[bind="status"]{
    display: none;
}
.Ticket.view3.admin-mode span.status{
    display: none;
}
body:not(.port) .BluesActivity.view47 .chart-area{
    height: 450px;
    width: calc(100% - 2em);
    margin:1em auto;
    background-color: white;
    border-radius: 0.25em;
    border:1px solid silver;
    color: black !important;
}
.BluesActivity.view47 .user-report-pan .def-dialog{
    transition: all 0.5s;
    max-height: 50vh;
    overflow: hidden;
}
.BluesActivity.view47 .user-report-pan.less .def-dialog{
    max-height: 0;
}
.BluesActivity.view47 .frow{
    display: inline-block;
    padding:0.5em;
}
.BluesActivity.view47 .user-report-pan.less .less-btn,
.BluesActivity.view47 .user-report-pan.less .report-btn{
    display: none;
}
.BluesActivity.view47 .user-report-pan:not(.less) .more-btn{
    display: none;
}
body:not(.rtl) .BluesActivity.view47 .frow{
    text-align: left;
}
body.rtl .BluesActivity.view47 .frow{
    text-align: right;
}
.BluesActivity.view47 label{
    display: block;
    margin:0 0.5em 0 0.5em;
}
.BluesActivity.view47 input, .BluesActivity.view47 select{
    box-sizing: border-box;
    min-width: 15em;
}
.UserProfile.view1{
    border: 1px solid rgba(192, 192, 192, 0.3);
    box-shadow: 0 0 2px rgb(50, 50, 50, 0.3);
    border-radius: 5px;
    padding:0.5em;
    margin:0.5em;
}
.UserProfile.view1 label{
    display: inline;
    font-size: 0.9em;
    margin: 0.25em 0.5em;
    padding:0.1em 0.5em;
    background-color: rgba(192, 192, 192, 0.3);
    border-radius: 1em;
}
.UserProfile.view1 label::after{
    content: "\a";
    white-space: pre;
}
.UserProfile.view1 .field{
    padding: 0.5em;
    margin: 0.5em;
    background-color: rgba(192, 192, 192, 0.2);
    border-radius: 5px;
    display: inline-block;
    vertical-align: top;
    text-align: start;
}
body:not(.port) .UserProfile.view1 .cover .sides{
    display: table;
    box-sizing: border-box;
    width: 100%;
    direction: rtl;
}
body:not(.port) .UserProfile.view1 .cover .sides>div{
    display: table-cell;
    min-height: 5em;
    vertical-align: middle;
    width: 50%;
    direction: ltr;
}
.UserProfile.view1 .cover .sides>div{
    padding:1em;
}
.UserProfile.view1 .profile-image{
    width: 5em;
    height: 5em;
    display: inline-block;
    border-radius: 50%;
    background: silver;
    overflow: hidden;
    object-fit: cover;
}

.UserProfile.view4{
    padding:1em;
    height: 5em;
}














.UserProfile.view2{
    border: 1px solid rgba(192, 192, 192, 0.3);
    box-shadow: 0 0 2px rgb(50, 50, 50, 0.3);
    border-radius: 5px;
    padding:0.5em;
    margin:0.5em;
}
.UserProfile.view2 .field{
    padding: 0.5em;
    margin: 0.5em;
    background-color: rgba(192, 192, 192, 0.2);
    border-radius: 5px;
    display: inline-block;
    vertical-align: top;
    text-align: start;
}
.UserProfile.view2 .profile-image{
    width: 5em;
    height: 5em;
    display: inline-block;
    border-radius: 50%;
    background: rgb(116, 29, 29);
    overflow: hidden;
    object-fit: cover;
}

body:not([section="authorize"]) section[name="authorize"] {display: none;}
body[section="authorize"] {overflow-x: hidden;}
section[name="authorize"] {
    height: 100vh;
    display: flex;
    overflow: hidden;
    white-space: nowrap;
}
body:not(.port) .auth-background{
    width: calc(90vw - min(25em,50%));
    height: 100%;
    display: inline-block;
    vertical-align: top;
}
.auth-background img{
    /* height: calc(100% - 1em);
    width: calc(100% - 0.5em); */
    height: 100%;
    width: 100%;
    object-fit: cover;
    /* margin:0.5em 0.5em 0.5em 0;
    border-top-right-radius: 1em;
    border-bottom-right-radius:1em; */
}
body:not(.port) .auth-background2{
    width: 10vw;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    filter:invert(1);
}
.auth-background2 img{
    /* height: calc(100% - 1em);
    width: calc(100% - 0.5em); */
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: none; /*temprary*/
    /* margin:0.5em 0 0.5em 0.5em;
    border-top-left-radius: 1em;
    border-bottom-left-radius:1em; */
}
body.port .auth-background{
    display: none;
}
body.port .auth-background2{
    display: none;
}
.auth-height{
    height: max(100vh , 100%);
    position: relative;
}
.auth-height:not(:last-child){
    margin-bottom: 200px;
}
.auth-container{
    position: absolute;
    top:0; left:0; right:0; bottom:0;
}
.auth-work-area{
    scroll-behavior: auto;
    overflow: hidden;
}
.auth-work-area input.error{
    /* background-color: rgb(255, 145, 165); */
    background-color: pink;
    color:rgb(24, 25, 27);
}
body:not(.port) .auth-work-area{
    width: min(25em,50%);
    /* background-image: url('../images/svg/hexagon-bg.svg'); */
    padding-left: 10vw; /* temporary */
    display: inline-block;
    vertical-align: top;
}
body.port .auth-work-area{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
}
.auth-forget-form{
    margin:3em 1.5em 1em 1.5em;
    border-radius: 1em;
    background-color:white;
    padding:1em 0em;
    z-index: 2;
}
.auth-back-login-container{
    position: absolute;
    left:1.5em; right:1.5em;
    background: white;
    border-radius: 0.5em;
    bottom:-5em;
}
/* body:not(.port) .auth-back-login-container{
    bottom:1em;
}
body.port .auth-back-login-container{
    bottom:1em;
} */
.auth-signin-form{
    margin:3em 1.5em 1em 1.5em;
    border-radius: 1em;
    background-color:white;
    padding:1em 0em;
    z-index: 2;
}
.auth-logo{
    width: 30%;
    margin:1em auto;
    display: block;
}
.hint-input{
    border-radius: 5px;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    box-sizing: border-box;
    width: 17em;
    height: 2em;
    position: relative;
    margin: 0.5em auto;
}
.hint-input input{
    padding: 0.25em 2em;
    font-size: 1em;
    border-radius: 5px;
    z-index: 0;
    border: 2px solid silver;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
.hint-input img{
    height: 100%;
    width: 1em;
    display: inline-block;
    vertical-align: middle;
    margin:0 0.5em;
    z-index: 1;
    position: absolute;
    top:0;
}
.auth-check-icon{
    height: 100%;
    width: 1em;
    display: inline-block;
    vertical-align: middle;
    margin:0 0.5em;
    z-index: 1;
    background-repeat: no-repeat !important;
    background-size: 90% !important;
    background-position: center !important;
    cursor: pointer;
    position: absolute;
    top:0;
    right:0;
}
.auth-check-icon.auth-password-show{
    background:url('../images/svg/eye.svg');
}
.auth-check-icon.auth-password-hide{
    background:url('../images/svg/hide-eye.svg');
}
/* .auth-work-area input[type="text"],.auth-work-area input[type="password"]{
    border:none;
    outline: none;
} */
.auth-work-area p{
    white-space: break-spaces;
    word-break: break-word;
    padding:0 1em;
}
.auth-work-area .blues-char{
    border:2px solid silver;
    border-radius: 0.25em;
    padding:0.5em;
    outline: none;
}
.auth-work-area .blues-char:focus{
    outline: 2px solid var(--outline-color);
    outline-offset: 2px;
}
.auth-work-area input[type="text"]:focus,.auth-work-area input[type="password"]:focus{
    outline: 2px solid var(--outline-color);
    outline-offset: 2px;
}
.auth-work-area button{
    font-size: 1em;
    margin:0.5em auto;
    padding:0.5em 2em;
    border-radius: 2em;
    border:none;
    outline: none;
    cursor: pointer;
}
.auth-work-area button:hover{
    box-shadow: 0 0 0.2em rgba(255, 102, 0, 0.815);
}
.auth-work-area button.positive{
    display: block;
    background:linear-gradient(rgb(14 42 71),rgb(11, 31, 53));
    color:white;
}
.auth-work-area button.change{
    display: block;
    background:linear-gradient(rgb(5 128 255),rgb(6, 109, 212));
    color:white;
}
.auth-forget-form button.next{
    background:linear-gradient(rgb(14 42 71),rgb(11, 31, 53));
    color:white;
}
.auth-forget-form button.back{
    background:linear-gradient(rgb(5 128 255),rgb(6, 109, 212));
    color:white;
}
.auth-3thparty{
    text-align: center;
    padding:0.5em 1em;
    color:white;
}
.auth-3thparty img{
    height: 1.5em;
    width: 1.5em;
    padding:5px;
    border-radius: 5px;
    background-color: white;
    vertical-align: middle;
}
.auth-swicher{
    /* padding:1em; */
    text-align: center;
    border-radius: 1em;
    background-color:white;
    white-space: break-spaces;
    /* display: flex;
    flex-direction: column; */
    position: absolute;
    left:1.5em; right:1.5em;
    z-index: 2;
    bottom: -9em;
}
/* body:not(.port) .auth-swicher{
    bottom: -7em;
}
body.port .auth-swicher{
    bottom: -7em;
} */
.auth-signup-form{
    border-radius: 1em;
    background-color:white;
    padding:1em 0em;
    left:1.5em; right:1.5em;
    margin:0em 1.5em;
    z-index: 2;
}
.auth-forget-step{
    display: none;
}
.auth-forget-form[step="0"] .auth-forget-step[step="0"]{
    display: block;
}
.auth-forget-form[step="1"] .auth-forget-step[step="1"]{
    display: block;
}
.auth-forget-form[step="2"] .auth-forget-step[step="2"]{
    display: block;
}
.auth-message{
    text-align: center;
    white-space: normal;
}
.auth-message.error{
    padding: 0.5em;
    border-radius: 0.5em;
    background-color: pink;
    color:rgb(109, 15, 46);
}
.auth-back-website{
    position: fixed;
    top: 0;
    left: 0;
    min-width: 2em;
    min-height: 1em;
    font-size: 1em;
    cursor: pointer;
    padding: 0.5em;
    color:black;
    text-shadow: 0 0 1px white;
    background: linear-gradient(164deg, #ffffff94, transparent);
}
.auth-back-website:hover{
    text-shadow: 0 0 1px rgb(255, 145, 1);
}
.auth-back-website::before{
    display: inline;
    margin: 0 0.5em;
    vertical-align: middle;
}
.auth-focusing-form{
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index: 3;
    background-color: white;
    padding: 0 !important;
    margin:0 !important;
}
.auth-bottom{
    position: absolute;
    left:0;
    right:0;
    bottom:4em;
}
.app-dark-background{
    position: absolute;
    background-color: rgb(0, 4, 24);
    opacity: 0.6;
    min-height: max(100vh,100vw);
    min-width: max(100vh,100vw);
    margin:0;
    border-radius: 50%;
    transform: scale(1.5);
    transition: transform 1s;
}
body[vision="dark"] section:not([name="site"]){
    --text-color: white;
    --negative-text : rgb(34, 44, 58);
    --important-text: rgb(226, 220, 255);
    --slave-text: rgb(193, 188, 218);
    --accent-color:rgb(255, 5, 130);
    --form-back-color:rgba(33, 43, 63, 0.678);
    --solid-form-back-color:rgba(33, 43, 63, 1);
    --input-back-color:rgb(10, 4, 31);
    --input-text-color:white;
    --outline-color:rgb(255, 115, 0);
    --pos-button-back : rgb(2, 136, 2);
    --pos-button-border: rgb(1, 88, 1);
    --neg-button-back : rgb(255, 0, 98);
    --neg-button-border : rgb(255, 0, 98);
    --neutral-button-back : rgb(0, 89, 255);
    --neutral-button-border: rgb(0, 76, 216);
    --header-color: rgb(115, 115, 151);
    color:var(--text-color);
}
body[vision="dark"] .app-action-bar{
    background-color:  var(--form-back-color);
}
body[vision="dark"] .app-plug-area{
    background-color: var(--form-back-color)
}
body[vision="dark"] .app-user-avatar{
    filter: invert(.9);
}
html,body{
    margin:0;
    font-family: Arial, Helvetica, sans-serif;
}
body.rtl{direction: rtl;}
body:not([section="app"]) section[name="app"] {display: none;}
body[section="app"] {overflow-x: hidden;}
body.with-content .without-content { display: none;}
body:not(.with-content) .with-content { display: none;}
.app-backgrounds{
    position: fixed;
    top:0; left:0; width: 100%; height: 100%;
    overflow: hidden;
}
.app-background {
    position: absolute;
    top:0; left:0; width: 100%; height: 100%;
    background-image: url('../images/png/galaxy-bg1.png');
    background-repeat: no-repeat;
    background-size: cover;
    filter:blur(10px);
    transform: scale(1.05);
}
body[vision="dark"] .app-light-background{
    opacity: 0;
}
body[vision="dark"] .app-dark-background{
    transform: scale(1.5) translateX(0) translateY(0);
}
body[vision="light"] .app-dark-background{
    transform: scale(1.5) translateX(-150vw) translateY(150vh);
}
.accent{
    color:var(--accent-color);
    text-shadow: 0 0 5px white;
}
.app-side-navigator{
    position:fixed;
    top:0;
    bottom: 0;
    transition: transform 0.3s,width 0.3s;
    transform: translateX(0);
}
body:not(.rtl) .app-side-navigator{
    left:0;
}
body.rtl .app-side-navigator{
    right:0;
}
body[sidebar="hidden"]:not(.rtl) .app-side-navigator{
    transform: translateX(-100vw);
}
body[sidebar="hidden"].rtl .app-side-navigator{
    transform: translateX(100vw);
}
.fill{
    background-color: var(--form-back-color);
}
body.port .app-side-navigator{
    width: 75vw;
    z-index: 2;
    background-color: var(--solid-form-back-color);
    top:0 !important;
    padding-top:3em;
}
body.port:not(.rtl) .app-side-navigator{
    border-right: 1px solid orange;
}
body.port.rtl .app-side-navigator{
    border-left: 1px solid orange;
}
body[sidebar="normal"]:not(.port) .app-side-navigator{
    width: 15em;
}
body[sidebar="thin"]:not(.port) .app-side-navigator{
    width: 3em;
}
.app-side-navigator li {cursor: pointer;}
.app-side-navigator li .title{transition: font-size 0.3s;}
body[sidebar="thin"]:not(.port) .app-side-navigator li {margin:0 0.5em 0.5em 0.5em}
body[sidebar="thin"]:not(.port) .app-side-navigator li .title{font-size: 0;}
body[sidebar="normal"]:not(.port) .app-side-navigator li .title{font-size: 1em;}
.app-side-navigator ul{
    list-style: none;
    margin:2em 0 0.5em 0;
    padding:0;
}
.app-side-navigator li{
    margin-bottom: 0.5em;
    white-space: nowrap;
}
body:not(.rtl) .app-side-navigator li.blues-icon{
    position: relative;
    margin-left: 3em;
}
body.rtl .app-side-navigator li.blues-icon{
    position: relative;
    margin-right: 3em;
}
body:not(.rtl) .app-side-navigator li.blues-icon::before{
    position: absolute;
    left: -2em;
}
body.rtl .app-side-navigator li.blues-icon::before{
    position: absolute;
    right: -2em;
}
.app-side-navigator ul .icon{
    vertical-align: middle;
    height: 1.5em;
    width: 1.5em;
    margin:0 0.5em
}
.sidebar ul .title{
    display: inline-block;
    vertical-align: middle;
}
.app-action-bar{
    position: fixed;
    top:0; left:0; width: 100%;
    height: 3em;
    line-height: 3em;
    z-index: 2;
}
.app-action-bar .item{
    vertical-align: middle;
}
body:not(.with-action-bar) .app-action-bar{display: none;}
body.with-action-bar .app-side-navigator{
    top:3em;
}
.app-action-bar>div{
    display: inline-block;
}
.app-action-bar .app-suggest-box{
    display: inline-block;
    vertical-align: middle;
    transition: width 0.3s;
    margin:0 1em;
}
body.suggesting .app-action-bar .app-suggest-box{
    width:15em;
}
body:not(.suggesting) .app-action-bar .app-suggest-box{
    width:7em;
}
.app-action-bar .app-search-box{
    border-radius: 1em;
    padding:0 0.5em 0 1em;
    display: inline-block;
    line-height: 2em;
    transition: background-color 1s;
}
.app-action-bar .app-search-box input{
    color: var(--input-text-color);
    display: inline-block;
    vertical-align: middle;
    outline:none;
    border:0;
    background-color: transparent;
    transition: 0.5s;
}
.app-action-bar:not(.searching) .app-search-box { background: transparent;}
.app-action-bar:not(.searching) .app-search-box input{width: 0em;}
.app-action-bar.searching .app-search-box{background-color: var(--input-back-color);outline:2px solid var(--outline-color);outline-offset: 2px;}
.app-action-bar.searching .app-search-box input{width: min(15em,85vw);}
body.port .app-action-bar.searching .app-tool-box{display: none;}
.app-action-bar .action-search-btn{
    display: inline-block;
    vertical-align: middle;
    height: 1.35em;
    width: 1.35em;
    cursor: pointer;
}
body[vision="dark"] .app-action-bar .app-search-box img{
    filter:invert(1);
}
.app-work-container ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
    opacity: 0.1;
}
.app-work-container ::-webkit-scrollbar:hover {
    opacity: 1;
}
.app-work-container ::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
.app-work-container ::-webkit-scrollbar-thumb {
    background: #888; 
}
.app-work-container ::-webkit-scrollbar-thumb:hover {
    background: #555; 
}
.app-work-container:not(.port){
    box-sizing: border-box;
    position: absolute;
    padding:0.5em;
    /* background-color:black; */
    min-height: calc(100% - 3.5em);
    white-space: nowrap;
    overflow-x: hidden;
    font-size: 1em;
    transition: left 0.5s, right 0.5s;
}
body.port .app-work-container{
    display: flex;
    flex-direction: column-reverse;
    overflow: hidden;
}
body.port .app-work-container{left:0; right:0;}
body:not(.with-action-bar) .app-work-container{top:0;}
body.with-action-bar .app-work-container{top:3em}
body[sidebar="hidden"]:not(.port) .app-work-container{left:0;right:0;}
body[sidebar="normal"]:not(.port):not(.rtl) .app-work-container{left:15em;}
body[sidebar="normal"]:not(.port).rtl .app-work-container{right:15em}
body[sidebar="normal"]:not(.port) .app-work-container{width: calc(100% - 15.5em);}
body[sidebar="thin"]:not(.port):not(.rtl) .app-work-container{left:3em;}
body[sidebar="thin"]:not(.port).rtl .app-work-container{right:3em;}
body[sidebar="thin"]:not(.port) .app-work-container{width: calc(100% - 3.5em);}
body[bottom-navigator="true"] .app-work-container{padding-bottom: 4.3em;min-height: calc(100% - 3.5em);}
body[bottom-navigator="false"] .app-work-container{padding-bottom: 0.5em;}
body .app-work-container .work-area{
    display: inline-block;
    border-radius: 0.5em;
    vertical-align: top;
    min-height: calc(100vh - 9.5em);
    transition: all 0.5s;
    overflow-x: auto;
    overflow-y: visible;
    position: relative;
}
body.plug:not(.port) .app-work-container .work-area{
    width: calc(100% - 16.5em);
}
body:not(.plug):not(.port) .app-work-container .work-area{
    width: calc(100% - 1em);
}
body:not(.plug).port .app-work-container .work-area{
    transform: translateY(-41vh);
    margin-bottom: -41vh;
}

/* Plug Area */
.app-plug-area{
    display: inline-block;
    border-radius: 0.5em;
    transition: 0.3s;
    vertical-align: top;
    transition: transform 0.5s;
}
body:not(.port) .app-plug-area{
    width: 15em;
    margin:0 0.5em;
    min-height: calc(100vh - 9.5em);
}
body.port .app-plug-area{
    margin:0.5em 0;
    height:40vh
}
body:not(.plug):not(.rtl):not(.port) .app-plug-area{
    transform: translateX(50vw);
}
body:not(.plug).rtl:not(.port) .app-plug-area{
    transform: translateX(-50vw);
}
body.plug:not(.port) .app-plug-area{
    transform: translateX(0);
}
body:not(.plug).port .app-plug-area{
    transform: translateY(-100vh);
}
body.plug.port .app-plug-area{
    transform: translateY(0);
}

/* body:not(.port):not(.plug):not(.rtl) .app-plug-area{transform: translateX(100vw);}
body:not(.port):not(.plug).rtl .app-plug-area{transform: translateX(-100vw);}
body:not(.port).plug .app-plug-area{
    transform: translateX(0);
}
body:not(.with-action-bar) .app-plug-area{ top: 0.5em}
body.with-action-bar .app-plug-area{ top: 3.5em}
body:not(.rtl) .app-plug-area{right:0.5em}
body.rtl .app-plug-area{left:0.5em}

body.port .app-plug-area{
    left:0.5em; right:0.5em;
    height: 50vh;
    transform: translateY(0);
}
body.port:not(.plug) .app-plug-area{
    transform: translateY(-100vh);
} */

body[bottom-navigator="true"] .app-plug-area{bottom: 4.3em !important;}
body:not([bottom-navigator="true"]) .app-plug-area{bottom: 0.5em;}

.app-adjust-pan{
    /* background-color: var(--form-back-color); */
    border-radius: 0.5em;
    position:absolute;
    left:0.5em; right:0.5em; bottom: 0.5em;
    height:3em;
    line-height: 3em;
    padding:0 0.5em;
    text-align: center;
}
body.rtl .app-adjust-pan{left:0}
body:not(.rtl) .app-adjust-pan{right:0}
.app-img-btn{
    height: 1.5em;
    width: 1.5em;
    vertical-align: middle;
    margin:0 0.25em;
}
body:not(.port) .app-adjust-pan .app-img-btn{
    font-size: 0.7em;
}
body:not(.port)[bottom-navigator="true"] .app-side-navigator{bottom: 3.8em;}
/* body:not([bottom-navigator="true"]) .app-side-navigator{bottom: 0;} */

body[sidebar="thin"] #app-thin-btn{display: none;}
body[sidebar="normal"] #app-fat-btn{display: none;}
body[vision="dark"] #app-dark-mode-btn{display: none;}
body[vision="light"] #app-light-mode-btn{display: none;}
body[sidebar="thin"] #app-thin-btn{display: none;}
body[sidebar="thin"] #app-dark-mode-btn{display: none;}
body[sidebar="thin"] #app-light-mode-btn{display: none;}
body[sidebar="thin"] #app-full-screen-btn{display: none;}
body[sidebar="thin"] #app-support-btn{display: none;}

body.port #thin-btn{display: none;}
body.port #fat-mode-btn{display: none;}
body.port #full-screen-btn{display: none;}



/* Bottom Navigator */
body:not([bottom-navigator="true"]) .app-bottom-navigator{transform:translateY(100vh)}
.app-bottom-navigator{
    position: fixed;
    bottom: 0; left:0; width: 100%;
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
    background-color: var(--solid-form-back-color);
    border-top: 1px solid silver;
    text-align: center;
    padding:0.5em;
    transform: translateY(0);
    transition: transform 0.3s;
    z-index: 2;
}
.app-bottom-navigator ul{
    list-style: none;
    padding:0; margin:0;
    display: table;
    width: 100%;
}
.app-bottom-navigator li{
    display: table-cell;
    text-align: center;
    font-size: 0.75em;
}
.app-bottom-navigator .icon{
    display: block;
    margin:0.25em auto;
    height: 2em;
    width: 2em;
}


/* Menu Button */
section[name="app"] .app-side-menu-button{
    position: fixed;
    top:calc(0.5em - 3px);
    z-index: 10;
}
body:not(.rtl) section[name="app"] .app-side-menu-button{
    left:0.5em;
}
body.rtl section[name="app"] .app-side-menu-button{
    right:0.5em;
}
.app-side-menu-button {
    display: inline-block;
    cursor: pointer;
    vertical-align: middle;
    transform: scale(0.7);
    transition: transform 0.4s;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: var(--slave-text);
    margin: 6px 0;
    transition: 0.4s;
}
body:not(.port)[sidebar="normal"] .app-side-menu-button,
body:not(.port)[sidebar="thin"] .app-side-menu-button{transform: rotate(-90deg) scale(0.7);}

body.port[sidebar="normal"] .bar1, body.port[sidebar="thin"] .bar1 {
    -webkit-transform: rotate(-45deg) translate(-8px, 6px);
    transform: rotate(-45deg) translate(-8px, 6px);
}

body.port[sidebar="normal"] .bar2, body.port[sidebar="thin"] .bar2 {opacity: 0;}

body.port[sidebar="normal"] .bar3, body.port[sidebar="thin"] .bar3 {
    -webkit-transform: rotate(45deg) translate(-10px, -8px);
    transform: rotate(45deg) translate(-10px, -8px);
}

.app-tool-box .icon{
    height: 1.5em;
    width: 1.5em;
    margin:0 0.5em;
    display: inline-block;
    vertical-align: middle;
}
body:not(.rtl) .app-user-avatar{margin-right: 3em;}
body.rtl .app-user-avatar{margin-left: 3em;}
.app-user-avatar{
    height: 2.5em;
    width: 2.5em;
    margin:0 1em;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    background-image: url('../images/svg/user.svg');
}

.app-user-avatar img{
    height: 100%;
    width: 100%;
    border-radius: 50%;
    cursor:pointer;
}
.app-user-avatar img:hover{
    box-shadow: 0 0 5px orangered;
}
body:not(.rtl) .front{float:right}
body.rtl .front{float:left}
.hide-scroll {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.hide-scroll::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}
.center{
    text-align: center;
}

/********************** Buttons **********************/
button.pos{
    padding:0.2em 1em;
    border-radius: 1em;
    font-size: 0.9em;
    background-color: var(--pos-button-back);
    border:2px solid var(--pos-button-back);
    color:white;
    margin: 0.2em 0.5em;
    min-width: 2em;
    text-align: center;
    cursor: pointer;
}
button.neg{
    padding:0.2em 1em;
    border-radius: 1em;
    font-size: 0.9em;
    background-color: var(--neg-button-back);
    border:2px solid var(--neg-button-back);
    color:white;
    margin: 0.2em 0.5em;
    min-width: 2em;
    text-align: center;
    cursor: pointer;
}
button.neutral{
    padding:0.2em 1em;
    border-radius: 1em;
    font-size: 0.9em;
    background-color: var(--neutral-button-back);
    border:2px solid var(--neutral-button-back);
    color:white;
    margin: 0.2em 0.5em;
    min-width: 2em;
    text-align: center;
    cursor: pointer;
}
.app-work-container .def-dialog{
    white-space: normal;
}
.app-work-container .def-dialog input[type="text"],
.app-work-container .def-dialog input[type="number"],
.app-work-container .def-dialog input[type="date"],
.app-work-container .def-dialog input[type="time"],
.app-work-container .def-dialog input[type="datetime-local"],
.app-work-container .def-dialog select,
.app-work-container .def-dialog textarea{
    border-radius: 0.5em;
    padding: 0.5em;
    border:1px solid silver;
    outline:0;
}
.app-work-container .def-dialog input[type="text"]:focus,
.app-work-container .def-dialog input[type="number"]:focus,
.app-work-container .def-dialog input[type="date"]:focus,
.app-work-container .def-dialog input[type="time"]:focus,
.app-work-container .def-dialog input[type="datetime-local"]:focus,
.app-work-container .def-dialog select:focus,
.app-work-container .def-dialog textarea:focus{
    outline: 2px solid rgb(255, 136, 0);
    outline-offset: 2px;
}
.smooth-scroll{
    scroll-behavior: smooth;
}

.app-max-loading{
    position: fixed;
    top: 0;
    left:0;
    right:0;
    bottom: 0;
    /* background: linear-gradient(white, rgb(255, 227, 227)); */
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}
.app-max-loading.close{
    display: none;
}
.app-max-loading .loading-progress{
    width: 4em;
    height: 4em;
    background-image: url('../images/gif/loading.gif');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.app-min-loading{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 0.2em;
    background-color: #888;
    box-shadow: 0 2px 5px #888;
    z-index: 101;
    overflow: hidden;
}
.app-min-loading.close{
    visibility: hidden;
    height: 0em;
}
.app-min-loading .loading-progress{
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 0.2em;
    /* background-color: rgb(1 125 255);
    box-shadow: 0 2px 5px rgb(1 125 255); */
    background-color: rgb(0 190 122);
    box-shadow: 0 2px 5px rgb(0 190 122);
    z-index: 100;
    transition: width 0.5s;
}
.app-popup-menu{
    margin:0;
    padding:0;
    list-style: none;
}
.app-popup-menu li:not(.separator){
    padding: 0.5em 1em;
}
.app-popup-menu li:not(.separator):hover{
    background-color: rgb(89, 97, 124);
    color:white;
}
.app-popup-menu li.separator{
    line-height: 1px;
    height:1px;
    border-bottom: 1px solid gray;
}
.app-simple-selector{
    position: fixed;
    top:0;    
    right:0;
    bottom: 0;
    left:0;
    background-color: rgba(192, 192, 192, 0.5);
    z-index: 2;
}
.app-simple-selector .close-btn{
    position: fixed;
    top:1em;
    right:1em;
    cursor: pointer;
}
.app-simple-selector .backpan{
    display:flex;
    height: 100%;
    justify-content: center;
    align-items: center;
}
.app-simple-selector .backpan .dialog{
    background: white;
    border-radius: 10px;
    padding:0.25em;
    width: min(30em, 70vw);
    height: min(20em, 70vh);
    overflow-x: hidden;
    overflow-y: auto;
}
.app-simple-selector .item{
    padding: 0.5em 1em;
    cursor: pointer;
}
.app-simple-selector .item:not(:last-child){
    border-bottom: 1px solid silver;
}
.app-simple-selector .item .title{
    font-weight: bold;
    margin-bottom: 0.25em;
    font-size: 1.1em;
    color:rgb(31, 31, 31);
}
.app-simple-selector .item .id{
    font-style: italic;
    font-size: 0.7em;
    color:silver;
}
.app-simple-selector .selector-loading{
    height: 90%;
    background-image: url('../images/gif/loading.gif');
    background-repeat: no-repeat;
    background-position: center;
}
.app-simple-selector:not(.loading) .selector-loading{
    display: none;
}
.app-simple-selector.loading .selector-items{
    display: none;
}
/*
----------------------------------------------------------------------------------
|																			     |
|                         Plan Css Classes for the site         	 			 |
| 																				 |
----------------------------------------------------------------------------------
*/

.plan-table{
    margin:1em;
    background-color: aliceblue;
    border-radius: 0.5em;
    overflow: hidden;
}
body:not(.port) .plan-table{
    display: flex;
}
body:not(.port) .plan-col{
    box-sizing: border-box;
    display: inline-block;
    width: calc(100% / 5);
    min-height: 5em;
    /* background-color:silver; */
}
.plan-col:first-child .plan-row:first-child{visibility: hidden;}
.plan-col:not(:first-child):hover .plan-row{
    background: rgb(122, 0, 67) !important;
    color:white;
}
.plan-col:not(:first-child):hover .plan-row:first-child{
    background: linear-gradient(rgb(172, 20, 103),rgb(122, 0, 67)) !important;
    color:white;
}
.plan-col:nth-child(5n){
    background-color: rgb(243, 234, 255);
    color:rgb(27, 6, 23);
}
.plan-col:nth-child(5n+4){
    background-color: rgb(243, 234, 255);
    color:rgb(27, 6, 23);
}
.plan-col:nth-child(5n+3){
    background-color: rgb(243, 234, 255);
    color:rgb(27, 6, 23);
}
.plan-col:nth-child(5n+2){
    background-color: rgb(243, 234, 255);
    color:rgb(27, 6, 23);
}
.plan-col:nth-child(5n+1){
    background-color: rgb(243, 234, 255);
    color:rgb(27, 6, 23);
}
body.port .plan-col{
    box-sizing: border-box;
    display: block;
    margin:1em;
    min-height: 5em;
    /* background-color:silver; */
}
.plan-row{
    box-sizing: border-box;
    height: 3.5em;
    padding:1em 0.2em;
    transition: background-color 1s;
}
body:not(.port) .plan-col:not(:last-child) .plan-row:not(:first-child){border-right:1px solid orange;}
body:not(.port) .plan-col:not(:last-child) .plan-row:first-child{border-right:1px solid rgb(243, 234, 255);}
.plan-col:not(:first-child) .plan-row{
    text-align: center;
}
.plan-row .title{
    display: inline-block;
    cursor: default;
    text-align: left;
    vertical-align: top;
}
.plan-col:not(:first-child) .plan-row .title{
    width: 40%;
    font-weight: bold;
}
.plan-col:first-child .plan-row .title{
    padding-left: 1em;
    padding-right: 1em;
}
.plan-row .value{
    display: inline-block;
    cursor: default;
    min-width: 50%;
    vertical-align: top;
}
.plan-row:first-child{
    border-bottom: 1px solid orange;
    height: 3em;
    padding-top:1em;
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
    background:linear-gradient(rgb(11, 79, 206),rgb(54, 141, 255));
    color:white;
}
.plan-button{
    display: inline-block;
    padding:0.5em 1em;
    background: linear-gradient(#ff9800,#d47f01);
    color:white;
    text-decoration: none;
    border-radius: 1.5em;
    vertical-align: top;
    margin-top:-0.5em;
    opacity: 1;
    transition: opacity 0.5s;
    cursor: pointer;
}
.plan-col:not(:first-child):hover .plan-row:last-child{
    border-bottom-left-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
}
.plan-row:not(:first-child){border-bottom: 1px solid rgb(226, 214, 243);}
.plan-col:first-child .value{display: none;}
body.port .plan-col:first-child{display:none}
body:not(.port) .plan-col:not(:first-child) .title{display: none;}
/*.plan-col:not(:hover) .plan-button {opacity:0}*/










/*
----------------------------------------------------------------------------------
|																			     |
|                         		Home page Content               	 			 |
| 																				 |
----------------------------------------------------------------------------------
*/


.deetz a {text-decoration: none;display: inline-block; vertical-align: middle;}
.deetz a:hover{text-decoration: underline;}
.deetz-accent{
    color: var(--accent-color);
}
.deetz-align-start{text-align: start;}
.deetz-side-padding{padding:0em 1em;}
.site-section *{
    box-sizing: border-box;
}
.site-section .deetz-page{
    width: 100%;
    height: 100vh;
    text-align: center;
    overflow: hidden;
}
body.port .site-section .deetz-page.first{
    height: calc(100vh - 6em);
    margin-top:7em;
    font-size: 0.9em;
}
.site-section .deetz-semi-page{
    padding:5vh 0;
    text-align: center;
}
.site-section .content{
    position: relative;
    vertical-align:middle;
    text-align: center;
    font-size:1.4em;
}
.site-section .content p{
    padding:0em 2em;
}
body:not(.port) .site-section .deetz-media{
    display: inline-block;
    width: 50%;
    height: 100%;
    /* background-color:rgb(77, 58, 58); */
    vertical-align:middle;
    position: relative;
    text-align: center;
}
body.port .site-section .deetz-media{
    display: block;
    height: 50%;
    /* background-color:rgb(77, 58, 58); */
    position: relative;
    text-align: center;
}
.site-section .deetz-media>img:not(.deetz-bg){
    position: absolute;
    width: 100%;
    height: 100%;
    left:0;
    top:0;
    object-fit: scale-down;
}
.site-section .deetz-media img.deetz-bg-opacity05{
    position: absolute;
    width: 100%;
    height: 100%;
    left:0;
    top:0;
    object-fit: cover;
    opacity: 0.5;
    transform: skewX(25deg);
}
.deetz-image50{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}
.deetz-image50 img{
    width: 80%;
    height: 80%;
    object-fit: scale-down;
}
.deetz-image30 img{
    width: 30%;
    height: 30%;
    object-fit: scale-down;
}
body:not(.port) .site-section .content{
    display: inline-flex;
    width: 45%;
    height: 100%;
    align-items: center;
}
body.port .site-section .deetz-media{
    display: block;
    height: 50%;
    /* background-color:rgb(77, 58, 58); */
    /* vertical-align:middle; */
}
body.port .site-section .content{
    display: block;
    height: 50%;
}
.deetz-signup-banner{
    margin:4em 2em;
    min-height: min(30em,90vw);
    background-image: url('../images/png/for-signup-button.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: right;
    padding-right: 5%;
}
body.port .deetz-signup-banner{display: none;}
.hide{display: none;}

.center{
    text-align: center;
}


.deetz-belt{
    background-image: url('../images/png/bg2.png');
    min-height: 100vh;
    background-size: contain;
    background-size: auto 100%;
}
.deetz-belt .deetz-item-list{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top:4em;
    padding-bottom: 2em;
}
.deetz-belt .deetz-foot-print{
    color:white;
    margin-top:1em;
    padding-bottom: 4em;
}
.deetz-belt .deetz-foot-print ol{
    text-align: left !important;
}
body.port .deetz-belt .deetz-item-list{
    flex-direction: column;
}
.deetz-belt img{
    box-sizing: border-box;
    width: 100%;
    height: 10em;
    padding-top:2em;
    object-fit: scale-down;
}
.deetz-belt .deetz-item-list>div{
    background-color: white;
    border-radius: 1em;
    margin:2.5vw;
    max-width: 25em;
    text-align: center;
}
body.port .deetz-belt .deetz-item-list>div{
    width: 95vw;
}
body:not(.port) .deetz-belt .deetz-item-list>div{
    width: 45vw;
}



.deetz-features{
    margin:2em;
    border-radius: 0em;
    /* background-color: var(--accent-color); */
    background-image: url('../images/png/bg4.png');
    background-repeat: no-repeat;
    background-size: cover;
    transition: border-radius 0.5s;
    text-align: center;
    padding:2em 0;
}
.deetz-features:hover{
    border-radius: 1em;
}
body:not(.port) .deetz-feature{
    display: inline-block;
}
.deetz-feature{
    border: 1px solid silver;
    background-color: white;
    box-shadow: 1px 1px 1px rgba(33,33,33,0.5);
    /* padding:2rem; */
    margin:2em;
    transition: all 0.5s;
    border-radius: 2px;
    transform: scale(1);
    opacity: 1;
    box-sizing: border-box;
    margin:0.5em;
    border-radius: 0.5em;
    cursor: default;
    vertical-align: top;
    height: 15em;
}
body:not(.port) .deetz-feature{
    width: 40%;
}

.deetz-feature.animated{
    animation-name: delayed-fade-in;
    animation-duration: 0.8s;
    animation-iteration-count: 1;
    transform: scale(1);
    opacity: 1;
}
.deetz-feature img{
    display: block;
    height: 2em;
    width: 2em;
    margin:1.5em auto;
    border-radius: 1em;
}
.deetz-feature .info{
    display: block;
}
.anim-slide-up.animated{
    animation-name: delayed-slide-up;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    transform: translateY(0em);
}
body:not(.port) .deetz-segment1-4{
    display: inline-block;
    box-sizing: border-box;
    width: 22%;
    margin:1%;
    vertical-align:top;
}
body.port .deetz-segment1-4{
    display: block;
    margin:1em 1em 4em 1em;
}
.deetz-spacer{height: 4em;}
.deetz-semi-spacer{height:2em;}
.deetz-x2{font-size:1.4em}
.deetz-segment1-4 img{
    width: 80%;
    max-height: 10em;
    object-fit: scale-down;
}
body:not(.port)
.deetz-faq{
    margin:10vw;
}
body.port
.deetz-faq{
    margin:1em
}
.deetz-faq .deetz-item{
    border:1px solid silver;
    margin:1em;
    border-top-right-radius: 0.3em;
    border-bottom-left-radius: 0.3em;
    overflow: hidden;
}
.deetz-faq .deetz-question{
    padding: 1em;
    cursor: pointer;
    background:linear-gradient(45deg,#dde0ff,#eee6f1,#dde0ff);
}
.deetz-faq .deetz-answer{
    padding: 1em;
    max-height: 20em;
    transition: all 0.5s;
}
.deetz-faq .deetz-item:not(.open) .deetz-answer{
    max-height: 0px !important;
    padding:0px;
    overflow: hidden;
}
.deetz-faq .deetz-item:not(.open) .deetz-answer *{
    display: none;
}
.deetz-faq .deetz-item.open{
    border-top-right-radius: 1em;
    border-bottom-left-radius: 1em;
}
.deetz-faq .deetz-item.open .deetz-question{
    border-bottom: 1px solid silver;
}
.deetz h2{
    margin:1em;
}
body:not(.authorized) .authorized {display:none !important}
body.authorized .not-authorized {display:none !important}

.deetz-focus-button{
    display: inline-block;
    vertical-align: middle;
    background-color: #ff1451 !important;
    color: white !important;
    padding:0.5em 2em;
    border-radius: 1.5em;

}
.deetz-focus-button *{
    color: white !important;
}
body.port .land-only{display: none;}
body:not(.port) .port-only{display: none;}
.ItemOperator{
    background-color: var(--form-back-color);
}
.icon{
    display: inline-block;
    cursor: pointer;
    background-size:90%;
    background-position: center;
    background-repeat: no-repeat;
}
body[vision="light"] .icon{
    filter:invert(0.2);
}
body[vision="dark"] .icon{
    filter:invert(1);
}
.icon[icon="sun"] {background-image:url('../images/svg/sun.svg');}
.icon[icon="moon"] {background-image:url('../images/svg/moon.svg');}
.icon[icon="gear"] {background-image:url('../images/svg/gear.svg');}
.icon[icon="normal-sidebar"] {background-image:url('../images/png/normal-sidebar.png');}
.icon[icon="thin-sidebar"] {background-image:url('../images/png/thin-sidebar.png');}
.icon[icon="full-screen"] {background-image:url('../images/png/full-screen.png');}
.icon[icon="headset"] {background-image:url('../images/svg/headset.svg');}
.icon[icon="home"] {background-image:url('../images/svg/home.svg');}
.icon[icon="compass"] {background-image:url('../images/svg/compass.svg');}
.icon[icon="add"] {background-image:url('../images/svg/add.svg');}
.icon[icon="cart"] {background-image:url('../images/svg/cart.svg');}
.icon[icon="magnifier"] {background-image:url('../images/svg/magnifier.svg');}
.icon[icon="bell"] {background-image:url('../images/svg/bell.svg');}
.app-light-background{
    position: absolute;
    background-color: white;
    opacity: 0.6;
    min-height: max(100vh,100vw);
    min-width: max(100vh,100vw);
    margin:0;
    border-radius: 50%;
    transform: scale(1.5);
    transition: transform 1s,opacity 1s;
}
body[vision="light"] section:not([name="site"]){
    --text-color: rgb(34, 44, 58);
    --negative-text : white;
    --important-text: rgb(42, 55, 75);
    --slave-text: rgb(24, 33, 46);
    --accent-color:rgb(255, 5, 130);
    --form-back-color:#ffffff6b;
    --solid-form-back-color:#ffffff;
    --input-back-color:white;
    --input-text-color:rgb(28, 29, 31);
    --outline-color:rgb(255, 115, 0);
    --pos-button-back : rgb(2, 136, 2);
    --pos-button-border: rgb(1, 88, 1);
    --neg-button-back : rgb(255, 0, 98);
    --neg-button-border : rgb(255, 0, 98);
    --neutral-button-back : rgb(0, 89, 255);
    --neutral-button-border: rgb(0, 76, 216);
    --header-color: rgb(94, 94, 143);
    color:var(--text-color);
}

body[vision="light"] .app-action-bar{
    background-color: var(--form-back-color);
}
body[vision="light"] .app-plug-area{
    background-color: var(--form-back-color);
}
body[vision="light"] .app-user-avatar{
    filter: invert(.2);
}
body:not([section="preview"]) section[name="preview"] {display: none;}
section[name="preview"] .preview-container{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 10em);
    margin-bottom: 10em;
}
section[name="preview"] .work-area{
    margin:1em;
    width: 100%;
    text-align: center;
}
section[name="preview"] .preview-footer{
    position: fixed;
    bottom: 0;
    left:0;
    right: 0;
    padding:1em;
    background-color: rgb(53, 49, 49);
    color:white;
    text-align: center;
}
section[name="preview"] button.pos{
    padding:0.2em 1em;
    border-radius: 1em;
    font-size: 0.9em;
    background-color: rgb(2, 136, 2);
    border:2px solid rgb(1, 88, 1);
    color:white;
    margin: 0.2em 0.5em;
    min-width: 2em;
    text-align: center;
    cursor: pointer;
}
section[name="preview"] button.neg{
    padding:0.2em 1em;
    border-radius: 1em;
    font-size: 0.9em;
    background-color: rgb(255, 0, 98);
    border:2px solid rgb(255, 0, 98);
    color:white;
    margin: 0.2em 0.5em;
    min-width: 2em;
    text-align: center;
    cursor: pointer;
}
section[name="preview"] button.neutral{
    padding:0.2em 1em;
    border-radius: 1em;
    font-size: 0.9em;
    background-color: rgb(0, 89, 255);
    border:2px solid rgb(0, 76, 216);
    color:white;
    margin: 0.2em 0.5em;
    min-width: 2em;
    text-align: center;
    cursor: pointer;
}