:root{

    --cc-h-bg: #1B0903;
    --cc-r-bg: 27,9,3;

    --cc-h-main: #15616D;
    --cc-r-main: 21,97,109;

    --cc-h-acc: #FF7D00;
    --cc-r-acc: 255,125,0;

    --cc-h-offw: #FFECD1;
    --cc-r-offw: 255,236,209;

    --cc-h-offb: #001524;
    --cc-r-offb: 0,21,36;

    --cc-h-bg2: #78290F;
    --cc-r-bg2: 120,41,15;

    --sidebar: 16vw;
    --header: 2.5vw;
    --icon: 1.6vw;

}

* {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:middle;
    background:transparent;
    color: var(--cc-h-offb);
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
    scrollbar-width: none;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: inherit;
    cursor: inherit;
}

body {
    font-family: "HarmonyOS Sans SC", "Harmony", sans-serif;

    margin: 0;
    /*background: var(--cc-h-bg);*/
    background: var(--cc-h-offw);
    color: var(--cc-h-offb);
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;
    overflow-x: hidden;
    overflow-y: scroll;
}

body::-webkit-scrollbar{
    display: none;
}

#all{
    position: fixed;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#fullpic{
    opacity: 0;
    visibility: hidden;
    background: rgba(var(--cc-r-offb),.95);
    position: fixed;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#fpimg{
    width: 70vh;
    height: 70vh;
    border-radius: 2vw;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 15px 25px, rgba(0, 0, 0, 0.3) 0px 5px 10px;
    object-fit: contain;
    object-position: center center;
}

#fpsvg{
    cursor: pointer;
    stroke: white;
    position: absolute;
    top: 3vw;
    right: 3vw;
    width: 2vw;
    height: 2vw;
    opacity: .3;
    transition: .3s;
}

#fpsvg:hover{
    transition: .3s;
    transform: scale(1.1);
    opacity: .7;
}

#fplabel{
    color: var(--cc-h-offw);
    opacity: .5;
    position: absolute;
    bottom: 3vw;
    font-size: 2vw;

}

#logo{
    position: absolute;
    width: 8vw;
    top: 3vw;
    left: 3vw;
    object-fit: contain;
    object-position: center center;
    opacity: .9;
}

#nav{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    position: fixed;
    left: 0;
    width: 30vw;
    height: 100vh;
    padding-left: 3vw;
    font-size: 1.2vw;
    opacity: .7;
}

#content{

    opacity: 0;

    position: fixed;

    width: 60vw;
    height: 70vh;

    right: 5vw;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(255,255,255,.5);
    border-radius: 1vw;

    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}


.menuitem{
    user-select: none;
    margin: .2vw;
    cursor: pointer;
    text-shadow: rgba(0,0,0,.3) .3vw .3vw 12px;
}

.miico{
    display: none;
}

.misub{
    overflow: hidden;
}

.miiClosed{
    /*font-weight: bold;*/
}

.miiClosed > .misub{
    height: 0;
}

.miiOpened{
    /*font-weight: bold;*/
}

.miiOpened > .misub{
    height: unset;
}

.submenuitem{
    user-select: none;
    margin: .2vw;
    font-weight: normal;
    padding-left: .5vw;
}

.miSelected{

}

.sec-applied{
    width: 100%;
    /*border: solid 1px deeppink;*/

    padding-top: 1vw;
    display: flex;
    flex-direction: row;
}

.secgroup{
    position: relative;
    margin-top: 1vw;
    border: solid 1px #FF7D00;
    border-radius: .5vw;
    width: 6.6vw;
    margin-left: .3vw;
}

.secgroup:before{
    content: attr(data-label);
    position: absolute;
    top: -1vw;
    font-weight: bold;
    padding-left: .3vw;
}

.sectag{
    user-select: none;
    position: relative;
    cursor: pointer;
    width: 6vw;
    height: 1vw;
    font-size: .5vw;
    margin: .3vw;
    background: #A5A5AB;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: .3vw;
    font-weight: bold;
    border-radius: .3vw;
    opacity: .3;
    transition: .3s;
}


.secgroup>[data-sep]{
    margin-top: 2vw;
}

.secgroup>[data-status="1"]{
    background: #2DD6AA;
    opacity: 1;
    transition: .3s;
}

.secgroup>[data-status="-1"]{
    background: #FF866B;
    opacity: 1;
    transition: .3s;
}

.datalist{

    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    padding-top: 2vw;

    overflow-y: scroll;
    overflow-x: hidden;

}

.dlheader{
    position: absolute;
    display: flex;
    width: 100%;
    flex-direction: row;
    top: 0;
    background: rgba(255,255,255,.3);
    font-weight: bold;
    height: 2vw;
    border-bottom: solid 1px rgba(var(--cc-r-offb),.1);
    z-index: 3;
}

.dlheader:before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(var(--cc-r-offw),.9);
    z-index: 0;
}



.ir-users-row{
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: .3vw;
}

.ir-users-row:nth-child(even){
    background: rgba(255,255,255,.4);
}

.ir-users-row.selected{
    background: rgba(var(--cc-r-acc),.1);
    font-weight: bold;
}

.irur-ico{
    position: relative;
    left: 2vw;
    height: 2vw;
    width: 2vw;
    /*background: #FF7D00;*/
    border-radius: 1vw;
    z-index: 1;
    transition: .3s;
    border: solid 1px #FFDDC0;
}

.irur-ico:hover, .selected>.irur-ico{
    z-index: 20;
    transition: .3s;
    transform: scale(2);
    border: solid 3px #FFDDC0;
}

.selected>.irur-ico:hover{
    transition: .3s;
    transform: scale(3.3);
}


.ir-users{
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    opacity: .7;
    padding: .5vw;
}

.ir-users:focus{
    background: rgba(var(--cc-r-acc),.2);
    border-radius: .3vw;
}

.dlheader > .ir-users{
    color: rgba(var(--cc-r-offb),.7);
    margin-bottom: -.2vw;
    z-index: 10;
}

.rover{
    opacity: 0;
    width: 10vw;
    height: 2vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-right: 1vw;
    transition: .3s;
    /*background: #FF7D00;*/
}

.ir-users-row.selected>.rover{
    opacity: 1;
    transition: .3s;
}

.ir-users-row:hover>.rover{
    opacity: .7;
    transition: .3s;
}

.rob{
    width: 1.2vw;
    height: 1.2vw;
    margin-left: .5vw;
    cursor: pointer;
    opacity: .7;
    transition: .3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rob:hover{
    opacity: 1;
    transition: .3s;
    transform: scale(1.2);
}

#plus{
    position: fixed;
    top: 1vw;
    right: 3.2vw;
}

#wrapper{
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    padding: 1vw;
}

#main{
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: rgba(var(--cc-r-offw),.95);
    border-radius: .5vw;
    overflow: hidden;
}

#sidebar{
    position: absolute;
    height: 100%;
    width: var(--sidebar);
    left: 0;
    background: rgba(var(--cc-r-offb),.07);
    padding-top: calc( var(--header) * 2 );
    padding-bottom: var(--header);
    padding-left: var(--header);
    padding-right: var(--header);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    background: deeppink;
}

.mgroup{
    padding-bottom: .5vw;
    margin-top: 2.5vw;
}

.mgroup:first-child{
    margin-top: 0;
}

.sgroup{
    padding-bottom: .5vw;
    padding-top: .5vw;
    padding-left: 1.6vw;
}

.mgh{
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.mgtitle{
    color: var(--cc-h-offb);
    opacity: .5;
    margin-left: .5vw;
    font-size: .9vw;
    font-weight: normal;
}

.sgtitle{
    color: var(--cc-h-offb);
    opacity: .5;
    margin-left: .5vw;
    font-size: .9vw;
    font-weight: normal;
}

.gchild{
    transform: translateX(1vw);
    opacity: .9;
}

#header{
    position: absolute;
    width: 100%;
    height: var(--header);
    top: 0;
    background: rgba(var(--cc-r-offb),.7);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

#hlogo{
    position: absolute;
    left: 0;
    margin-left: .5vw;
    height: 2vw;
    width: 2vw;
}

#hmain{
    /*color: var(--cc-h-offw);*/
    color: var(--cc-h-acc);
    position: absolute;
    left: 3vw;
    font-weight: bold;
    font-size: 1.2vw;
    text-align: right;
    text-transform: uppercase;
    width: calc( var(--sidebar) - 3vw - .5vw );
    opacity: .7;
}

.svgi{
    width: var(--icon);
    height: var(--icon);
    fill: none;
    stroke: var(--cc-h-offb);
    stroke-width: .07vw;
    opacity: .5;
    transition: .3s;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sel{
    transition: .3s;
    stroke-width: .09vw;
    opacity: .9;
}

.nav{

}

.ssec{
    position: absolute;
    right: .2vw;
    width: .9vw;
    height: .9vw;
    stroke-width: .1vw;
    stroke: white;
    opacity: 0;
    transition: .3s;
}

[data-status="1"]>.syes{
    opacity: 1;
    visibility: visible;
    transition: .3s;
}

[data-status="-1"]>.sno{
    opacity: 1;
    visibility: visible;
    transition: .3s;
}




#modal{
    visibility: hidden;
    display: none;
    position: fixed;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    background: rgba(var(--cc-r-acc),.95);
}

#modal-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#modal-title{
    text-transform: uppercase;
    font-weight: bold;
    font-size: 3vw;
}

#modal-detail{
    font-size: 2vw;
    opacity: .7;
    margin-top: 1vw;
    margin-bottom: 7vw;
}

#modal-options{
    width: 25vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#modal-close{
    cursor: pointer;
    position: absolute;
    top: 1vw;
    right: 1vw;
    opacity: .3;
    transition: .3s;
}

#modal-close:hover{
    transform: scale(1.2);
    opacity: .9;
    transition: .3s;
}


#content{
    position: absolute;
    left: var(--sidebar);
    width: calc( 100vw - var(--sidebar) - 2vw);
    top: var(--header);
    height: calc( 100vh - var(--header) - 2vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow-x: hidden;
    overflow-y: scroll;
}

#box{
    position: absolute;
    width: calc( 100vw - var(--sidebar) - 12vw);
    height: 50%;
    border-radius: .5vw;
    background: rgba(255,255,255,.5);
    margin-top: 5vw;
}

#hbox{
    height: var(--header);
    border-bottom: solid 1px rgba(0,0,0,.1);
}


/* COMPONENTS */

.bx_button{
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: var(--cc-h-main);
    border-radius: .3vw;
    padding: .3vw;
    font-weight: bold;
    transition: .3s;
    width: 5vw;
    color: rgba(var(--cc-r-offw),.7);
}

.bx_button:before{
    position: absolute;
    background: var(--cc-h-offb);
    border-radius: .3vw;
    bottom: -.2vw;
}

.bx_button:hover{
    color: rgba(var(--cc-r-offw),.9);
    transform: scale(1.2);
    transition: .3s;
}

#login{
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    background: var(--cc-h-offw);
}

/* COMPONENTS SUBCLASSES */

.bx_button_neg{
    background: var(--cc-h-bg2);
    opacity: .5;
}

.bx_button_double{
    transform: scale(1.6);
}

.bx_button_double:hover{
    transform: scale(1.8);
}

/* TEMPLATES */

#tpt{
    display: none;
    visibility: hidden;
    pointer-events: none;
}

/*@font-face {*/
/*    font-family: 'Rubik';*/
/*    src: url('./fonts/rubik/rubik-v8-latin-300.woff2');*/
/*    src: url('./fonts/rubik/rubik-v8-latin-300.woff2') format('woff2'),*/
/*    url('./fonts/rubik/rubik-v8-latin-300.woff') format('woff'),*/
/*    url('./fonts/rubik/rubik-v8-latin-300.eot') format('embedded-opentype'),*/
/*    url('./fonts/rubik/rubik-v8-latin-300.svg') format('svg');*/
/*    font-weight: normal;*/
/*    font-style: normal;*/
/*}*/

/*@font-face {*/
/*    font-family: 'Rubik';*/
/*    src: url('./fonts/rubik/rubik-v8-latin-700.woff2');*/
/*    src: url('./fonts/rubik/rubik-v8-latin-700.woff2') format('woff2'),*/
/*    url('./fonts/rubik/rubik-v8-latin-700.woff') format('woff'),*/
/*    url('./fonts/rubik/rubik-v8-latin-700.eot') format('embedded-opentype'),*/
/*    url('./fonts/rubik/rubik-v8-latin-700.svg') format('svg');*/
/*    font-weight: bold;*/
/*    font-style: normal;*/
/*}*/

@font-face {
    font-family: 'Harmony';
    src: url('./fonts/harmony/HarmonyOS_Sans_SC_Regular.woff2');
    src: url('./fonts/harmony/HarmonyOS_Sans_SC_Regular.woff2') format('woff2'),
    url('./fonts/harmony/HarmonyOS_Sans_SC_Regular.woff') format('woff'),
    url('./fonts/harmony/HarmonyOS_Sans_SC_Regular.eot') format('embedded-opentype'),
    url('./fonts/harmony/HarmonyOS_Sans_SC_Regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Harmony';
    src: url('./fonts/harmony/HarmonyOS_Sans_SC_Bold.woff2');
    src: url('./fonts/harmony/HarmonyOS_Sans_SC_Bold.woff2') format('woff2'),
    url('./fonts/harmony/HarmonyOS_Sans_SC_Bold.woff') format('woff'),
    url('./fonts/harmony/HarmonyOS_Sans_SC_Bold.eot') format('embedded-opentype'),
    url('./fonts/harmony/HarmonyOS_Sans_SC_Bold.svg') format('svg');
    font-weight: bold;
    font-style: normal;
}




@media screen and (max-width: 700px) {

}