/*var*/
:root {

    /*<editor-fold defaultstate="collapsed" desc="body">*/

    --body-display : block ;
    --body-margin-width : 0px ;
    --body-border-width : 0px ;
    --body-outline-width : 0px ;
    --body-padding-width : 0px ;

    --body-position : absolute ;
    --body-top : 0px ;
    --body-left : 0px ;
    --body-transform : none ;
    --body-filter : none ;

    --body-box-sizing : content-box ;
    --body-width : 100% ;
    --body-height : 100% ;

    /*</editor-fold>*/
    /*<editor-fold defaultstate="collapsed" desc="header">*/

    --header-display : block ;
    --header-margin-width : 0px ;
    --header-border-width : 0px ;
    --header-outline-width : 0px ;
    --header-padding-width : 0px ;

    --header-position : relative ;
    --header-top : 0px ;
    --header-left : 0px ;
    --header-transform : none ;
    --header-filter : none ;

    --header-box-sizing : content-box ;
    --header-width : 100% ;
    --header-height : auto ;

    /*</editor-fold>*/
    /*<editor-fold defaultstate="collapsed" desc="ui-list">*/

    --ui-list-display : grid ;
    --ui-list-margin-width : 0px ;
    --ui-list-border-width : 0px ;
    --ui-list-outline-width : 0px ;
    --ui-list-padding-width : 0px ;

    --ui-list-position : relative ;
    --ui-list-top : unset ;
    --ui-list-left : unset ;
    --ui-list-transform : none ;
    --ui-list-filter : none ;

    --ui-list-box-sizing : content-box ;
    --ui-list-width : auto ;
    --ui-list-height : auto ;

    /*</editor-fold>*/
    /*<editor-fold defaultstate="collapsed" desc="ui-listitem">*/

    --ui-listitem-display : inline-block ;
    --ui-listitem-margin-width : 0px ;
    --ui-listitem-border-width : 0px ;
    --ui-listitem-outline-width : 0px ;
    --ui-listitem-padding-width : 0.5em ;

    --ui-listitem-position : relative ;
    --ui-listitem-top : unset ;
    --ui-listitem-left : unset ;
    --ui-listitem-transform : none ;
    --ui-listitem-filter : none ;

    --ui-listitem-box-sizing : content-box ;
    --ui-listitem-width : auto ;
    --ui-listitem-height : 2.2em ;

    /*</editor-fold>*/

}

/*var style*/
html {

    height : 100% ;

}
body {

    display : var(--body-display) ;
    margin : var(--body-margin-width) ;
    border : solid var(--body-border-width) ;
    outline : solid var(--body-outline-width) ;
    padding : var(--body-outline-width) ;

    position : var(--body-position) ;
    top : var(--body-top) ;
    left : var(--body-left) ;
    transform : var(--body-transform) ;
    filter : var(--body-filter) ;

    box-sizing : var(--body-box-sizing) ;
    width : var(--body-width) ;
    height : var(--body-height ) ;

}
header {

    display : var(--header-display) ;
    margin : var(--header-margin-width) ;
    border : solid var(--header-border-width) ;
    outline : solid var(--header-outline-width) ;
    padding : var(--header-padding-width) 0 0 0 ;

    position : var(--header-position) ;
    top : var(--header-top) ;
    left : var(--header-left) ;
    transform : var(--header-transform) ;
    filter : var(--header-filter) ;

    box-sizing : var(--header-box-sizing) ;
    width : var(--header-width) ;
    height : var(--header-height) ;

}
ui-list {

    display : var(--ui-list-display) ;
    margin : var(--ui-list-margin-width) ;
    border : solid var(--ui-list-border-width) ;
    outline : solid var(--ui-list-outline-width) ;
    padding : var(--ui-list-padding-width) ;

    position : var(--ui-list-position) ;
    top : var(--ui-list-top) ;
    left : var(--ui-list-left) ;
    transform : var(--ui-list-transform) ;
    filter : var(--ui-list-filter) ;

    box-sizing : var(--ui-list-box-sizing) ;
    width : var(--ui-list-width) ;
    height : var(--ui-list-height) ;

}
ui-text , ui-label , ui-button , ui-listitem , ui-menu  , label , input , button {

    display : var(--ui-listitem-display) ;
    margin : var(--ui-listitem-margin-width) ;
    border : solid var(--ui-listitem-border-width) ;
    outline : solid var(--ui-listitem-outline-width) ;
    padding : 0 var(--ui-listitem-padding-width) 0 var(--ui-listitem-padding-width) ;

    position : var(--ui-listitem-position) ;
    top : var(--ui-listitem-top) ;
    left : var(--ui-listitem-left) ;
    transform : var(--ui-listitem-transform) ;
    box-sizing : var(--ui-listitem-box-sizing) ;
    filter : var(--ui-listitem-filter) ;

    width : var(--ui-listitem-width) ;
    line-height : var(--ui-listitem-height) ;

}

/*basic style*/
.ui.centered {

    border : solid 2px #5f5f5f36 ;

    position : absolute ;
    top : 50% ;    
    left : 50% ;    
    transform : translateX(-50%) translateY(-50%) ;
    
}
header {

    margin : var(--ui-listitem-padding-width) ;
    width : calc(100% - (var(--ui-listitem-padding-width) * 2));

}
.ui.title {

    font-size : 2em ;

}
ui-group{

    display : grid ;
    margin : var(--ui-listitem-padding-width) ;
    position : relative ;

}
ui-list {

    grid-row-gap : var(--ui-listitem-padding-width) ;
    margin : var(--ui-listitem-padding-width) ;
    overflow : auto ;

}
ui-button {

    cursor : pointer ;
    user-select : none ;
    text-align : center ;

}
ui-listitem {

    display : flex ;
    cursor : pointer ;
    user-select : none ;

}
ui-mimeitem {

    display : inline-flex ;
    padding : var(--ui-listitem-padding-width) ;

    cursor : pointer ;
    user-select : none ;

}
ui-mimeitem img {

    display : inline-block ;

    height : 2em ;
    width : auto ;

    cursor : pointer ;
    user-select : none ;

}
ui-mimeitem ui-label {

    cursor : pointer ;
    user-select : none ;

}
ui-mimeitem ui-label.file-name {

    width : 100% ;
    cursor : pointer ;
    user-select : none ;

}

/*user-view*/
.ui.user-view .ui.user-controls {

    display : flex ;

}
.ui.user-view .ui.user-controls .ui.search-user {

    width : 100% ;

}
.ui.user-view .ui.user-controls .ui.create-user {

    display : none ;

}
.ui.user-view ui-list {

    width : 100% ;
    max-height : 200px ;

}

/*edit-view*/
.ui.edit-view {

    grid-template-columns : 50% 50% ;

}

/*company-view*/
.ui.company-view .ui.company-controls {

    display : flex ;

}
.ui.company-view .ui.company-controls .ui.search-company {

    width : 100% ;

}
.ui.company-view .ui.company-controls .ui.clear-company {

    display : none ;

}
.ui.company-view ui-list {

    display : none ;

    position : absolute ;
    top : var(--ui-listitem-height) ;

    width : 100% ;

    max-height : 200px ;
    overflow : auto ;

}

/*color position ani*/
:root {

    --body-color : unset ;
    --body-highlight-color : unset ;
    --body-background-color: #090909 ;
    --body-highlight-background-color : unset ;
    --element-color: #ffffffd4 ;
    --element-highlight-color: #ffffff24 ;
    --element-background-color: #ffffff00 ;
    --element-highlight-background-color: #790bad ;

}

* {

    font-size : 18px ;
    font-family : "Jost", serif ;
    font-optical-sizing : auto ;
    font-style : normal ;
    font-weight : 500 ;
    
    transition-property : all ;

}
body {

    background-color : var(--body-background-color) ;

}

ui-list {

    color : var(--element-color) ;
    background-color : var(--element-background-color) ;

}
ui-text , ui-label , ui-button , ui-listitem , ui-menu , ui-mimeitem , label , input , button {

    color : var(--element-color) ;
    background-color : var(--element-background-color) ;

}
ui-button:hover , ui-listitem:hover , ui-listitem[selected] {

    outline : solid 2px var(--element-highlight-color) ;
    background-color : var(--element-highlight-background-color) ;

}

ui-mimeitem {

    border-bottom : solid 2px var(--element-highlight-color) ;

}
ui-mimeitem img {

    filter : invert(1) ;

}
ui-mimeitem[selected] , ui-mimeitem:hover {

    outline : solid 2px var(--element-highlight-color) ;
    background-color : var(--element-highlight-background-color) ;

}

.ui.user-view .ui.user-controls .ui.search-user {

    color : black ;
    background-color : white ;

}
.ui.user-view .ui.user-controls .ui.create-user {

}

.ui.company-view {

}
.ui.company-view .ui.company-controls .ui.clear-company {

    background-color : var(--element-background-color) ;

}
.ui.company-view ui-list ui-listitem {

    background-color : #0099ff ;

}

.ui.centered {

    outline : solid 2px var(--element-highlight-color) ;
    background-color : var(--body-background-color) ;
    
}
.ui.loader2 {

    display : block ;

    position : fixed ;
    left : calc(50% - 1.5em) ;
    top : calc(50% - 1.5em) ;

    width : 3em ;
    height : 3em ;

    animation : l3 1s infinite ;
    background-color : #00ff00a1 ;

}
.ui.loader2.v2 {

    position : relative ;

}

@keyframes l3 {

    0% {

        transform : rotate(0deg) ;

    }
    20% {

        transform : rotate(20deg) ;

    }
    100% {

        transform : rotate(360deg) ;

    }

}

.ui.slide-in-left {
    
    animation : l6 0.5s;
    animation-fill-mode: forwards;

}

@keyframes l6 {

    0% {

        opacity : 0 ;
        left : -100% ;

    }
    100% {

        opacity : 1 ;
        left : 0% ;

    }

}

.ui.slide-in-right {
    
    animation : l7 0.5s;
    animation-fill-mode: forwards;

}

@keyframes l7 {

    0% {

        opacity : 0 ;
        left : 100% ;

    }
    100% {

        opacity : 1 ;
        left : 0% ;

    }

}

.ui.slide-in-up {
    
    animation : l9 0.5s;
    animation-fill-mode: forwards;

}

@keyframes l9 {

    0% {

        opacity : 0 ;
        top : 3em ;

    }
    80% {
        
        opacity : 0.35 ;
        
    }
    100% {

        opacity : 1 ;
        top : 0em ;

    }

}

.ui.fade-in {
    
    animation : l7 0.5s;
    animation-fill-mode: forwards;
    
}

@keyframes l8 {

    0% {

        opacity : 0 ;

    }
    100% {

        opacity : 1 ;

    }

}