json-object-editor/capp/capp.css

JOE the Json Object Editor | Platform Edition

@charset "utf-8";
/* Craydent App Styles */

/*GLOBALS*/
html{
    width:100%;
    height:100%;
}
body {
    padding: 0;
    margin: 0;
    width:100%;
    height:100%;
}

fright,.fright{  float:right;  }
fleft,.fleft{  float:left;  }
clear,.clear{clear: both;}
.text-center{text-align:center;}
.text-right{text-align:right;}
.no-padding{padding:0;}
.spaced{
    /* letter-spacing: .11em;
    line-height: 1.4em;
    padding: 0.4em .8em; */
    letter-spacing: 0.075em;
    line-height: 1.2em;
    padding: 0.25em .75em;
}
no-select{
    user-select: none;
}
capp-header,
capp-panel,
capp-dashboard,
capp-font{
    font-family: 'Segoe UI', 'Segoe UI Web Regular', 'Segoe UI Symbol', 'Helvetica Neue', 'BBAlpha Sans', 'S60 Sans', Arial, sans-serif;
}

capp-header-item,
capp-menu,
capp-dashboard,
capp-card,
capp-menu-label,
capp-menu-option,
capp-header-button{
    display:block;
    box-sizing: border-box;
}

capp-wrapper,
capp-header,
capp-body,
capp-panel,
capp-view,
capp-dashboard,
capp-absoluteblock{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    display:block;
    box-sizing: border-box;
}
/*--------------------------- begin CAPP-BG --------------------------------*/
/*light*/
.capp-bg-light,
.capp-bg-light .capp-themed{
    background-color:rgba(255,255,255,.7);
    color:#333;
}


.capp-bg-light capp-button-icon svg path,
.capp-bg-light capp-button-icon svg{
    fill:#333;
}
/*html.no-touch .capp-bg-light.expanded:hover,
html.touch */.capp-bg-light.expanded,
.capp-bg-light.expanded capp-menu.expanded > capp-menu-label {
    background-color: rgba(255,255,255,.9);
}
html.no-touch .capp-bg-light > capp-button:hover,
html.no-touch .capp-bg-light .capp-subthemed:hover,
/*html.no-touch .capp-bg-light > *:hover,*/
html.no-touch .capp-bg-light capp-menu-panel > *:hover/*,
.capp-bg-light capp-button > capp-button-icon svg path*/
{
    background-color: rgba(0,60,80,.1);
    color:#257;
}

.capp-bg-light capp-button.selected{
    background-color: rgba(0,60,80,.2);
}

/*dark*/
.capp-bg-dark,
.capp-bg-dark .capp-themed{
    background-color:rgba(0,0,0,.5);
    color:#ddd;
}
.capp-bg-dark capp-button-icon svg path,
.capp-bg-dark capp-button-icon svg{
    fill:#ddd;
}
.capp-bg-dark capp-button-icon:hover svg path,
.capp-bg-dark capp-button-icon:hover svg,
.capp-bg-dark .selected capp-button-icon svg path,
.capp-bg-dark .selected capp-button-icon svg{
    fill:#fff;
}
/*html.no-touch .capp-bg-dark.expanded:hover,
html.touch*/ .capp-bg-dark.expanded,
.capp-bg-dark.expanded capp-menu.expanded > capp-menu-label{
    background-color: rgba(0,0,0,.9);
}

html.no-touch .capp-bg-dark > capp-button:hover,
html.no-touch .capp-bg-dark .capp-subthemed:hover,
/*html.no-touch .capp-bg-dark > *:hover,*/
html.no-touch .capp-bg-dark capp-menu-panel > *:hover
/*,.capp-bg-dark capp-button > capp-button-icon svg path*/
{
    /*background:rgba(0,0,0,.5);*/
    background-color: rgba(255,255,255,.2);
    color:#fff;
}

/*.capp-bg-dark capp-button.selected{
    background-color: rgba(0,0,0,.3);
    background-color: rgba(255,255,255,.2);
}*/
.capp-bg-dark capp-button.selected{
    background:#f2f2f2 !important;
    color:#404040 !important;
    box-shadow:0px 1px 3px 0px rgba(0,0,0,.3);
    border-top: 1px solid #fff;
    border-bottom: 1px solid #999;
}

.capp-bg-dark capp-button.selected svg path,
.capp-bg-dark capp-button.selected svg{
    fill:#404040;
}
/*--------------------------- end CAPP-BG --------------------------------*/

/*--------------------------- begin CAPP-WRAPPER --------------------------------*/
capp-wrapper{
    background-image:url('/JsonObjectEditor/img/svgs/craydent-logo-darkoverlay.svg');
    background-size:50%;
    background-repeat: no-repeat;
    background-position: center;
    min-height:500px;
}
capp-wrapper *{ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

/*--------------------------- end CAPP-WRAPPER --------------------------------*/
/*--------------------------- begin CAPP-BUTTON /  --------------------------------*/


/*--------------------------- end CAPP-BUTTON   --------------------------------*/
/*--------------------------- begin CAPP-COUNTER /  --------------------------------*/
capp-counter{
   display: inline-block; 
    font-size: 10px;   
    margin: 0px 10px 0px 10px;    
    box-sizing: border-box;   
    width: 20px; 
    
    text-align: center; 
    line-height: 20px; 
    border-radius: 50%; 

    font-weight: bold; 
    margin-right: -10px;
}
.capp-bg-light capp-counter{
    background: #444;  
        color: #ccc;
}
.capp-bg-dark capp-counter{
    background: #ccc;  
        color: #444;
}
/*--------------------------- end CAPP-COUNTER /  --------------------------------*/
/*--------------------------- begin CAPP-BUTTON /  --------------------------------*/
capp-button a{
    color:inherit;
    text-decoration:none;
}
capp-button.padded{
    padding: 5px 10px;
}
.capp-button-sublink {
    float: right;
    width: 50px;
    height:50px;
    box-sizing: border-box;
    text-decoration: none;
    color: inherit;
    text-align: center;
    margin-right: -5px;

}
html.no-touch .capp-button-sublink{
    opacity:0;
    transition:opacity .2s;
}
html.no-touch capp-button:hover .capp-button-sublink{
    opacity:1;
}
capp-button .capp-button-sublink > svg{
    width: 50px;
    height:50px;
}
.capp-bg-dark .capp-button-sublink > svg{
    fill:#ddd;
}
.capp-bg-light .capp-button-sublink > svg{
    fill:#333;
}
capp-button{
    cursor:pointer;
    min-height:40px;
    min-width:40px;
    padding:0 5px;
    display:block;
    overflow:hidden;
    transition:.2s;
    box-sizing: border-box;

}
capp-header capp-button{
    text-align: center;
    padding:0 5px;
}

/*capp-button-icon*/
capp-button-icon {

    width: 50px;
    height:50px;
    text-align: center;
    position: relative;
    font-size:.8em;
    display:block;
}
capp-panel capp-button-icon{
    float: left;
    height: 100%;
}
capp-header  capp-button-icon{
    width: 50px;
    height: 50px;
}

 capp-button > capp-button-icon,
 capp-button > a > capp-button-icon{
    margin:0 -5px;
}
.small-size capp-header capp-button capp-button-icon{
    width: 50px;
    height: 50px;
    margin:0 -10px;
}
/* capp-menu.capp-apps-menu {
    margin-left: 5px;
}
.small-size capp-menu.capp-apps-menu {
    margin-left: 0px;
} */

.small-size capp-menu.capp-apps-menu capp-menu-option {
    box-sizing: border-box;
    width: 50%;
    float: left;
}

.small-size capp-menu.capp-apps-menu capp-menu-panel {
    width: 200%;
}
/*default schemas*/
capp-button.default-schema {
    border-left: 5px solid rgba(200,200,0,.2);
}
capp-button.default-schema.selected {
    border-left: 5px solid rgba(200,200,0,.6);
}
capp-button.default-schema > capp-button-icon,
capp-button.default-schema > a > capp-button-icon{
    margin-left: -10px;
}
capp-menu-icon-label {
    float: left;
}

capp-menu.default-schemas-menu {
    border-top: 1px solid goldenrod;
}

/*capp-button-label*/
capp-button-label {
    display: none;
    visibility: hidden;
    position: relative;
    font-size:1.1em;
    font-variant: small-caps;
}
capp-panel capp-button-label{
    padding-left: 50px;
}
capp-button-icon svg{
    fill: #404040;
}
 html.no-touch .show-icons capp-button:hover svg,
 html.touch .show-icons capp-button svg{
    height: 40px;
}
.show-icons capp-button svg-label{
    display:none;
    position:absolute;
    bottom: -20px;
    width:100%;
    text-align:center;
}
 html.no-touch .show-icons capp-button:hover svg-label,
 html.touch .show-icons capp-button svg-label,
capp-button.selected svg-label
{
    display: block;
    position: absolute;
    bottom: 0;
    line-height: 20px;
    font-size: 10px;
    width:100%;
    text-align:center;
}
capp-button.selected capp-button-icon svg{
    height: 40px;
    width:100%;
}


.expanded > capp-button > capp-button-label,
.expanded > capp-button > a > capp-button-label,
.expanded > capp-menu > capp-menu-panel > capp-button > a > capp-button-label,
.expanded > capp-menu > * > capp-button-label{
    display: block;
    visibility: visible;
}
/*--------------------------- end CAPP-BUTTON --------------------------------*/

/*--------------------------- begin CAPP-MENU --------------------------------*/

capp-menu{
    transition:.2s;

}
capp-menu.fright{
    text-align:right;
}
capp-menu > *{
    padding:0 5px;
}
capp-menu.expanded{
    height:auto;
}
.capp-retro capp-menu.expanded{
    background-color: rgba(255,255,255,0.9);
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,.3);
}


/*capp-menu-label*/
capp-menu-label{
    position:relative;
    transition:.2s;
    overflow: hidden;
    height: 50px;
    min-width: 50px;
    text-align: center;
    user-select: none;
}

capp-header > capp-menu > capp-menu-label {
    padding: 0 10px;
}
html.no-touch .capp-retro capp-menu-label:hover,
.capp-retro capp-menu.expanded > capp-menu-label{
    padding-bottom: 6px;
}

capp-menu-option,capp-menu-label{
    cursor:pointer;
}
capp-menu-option.multi-line,capp-menu-label.multi-line{
    line-height: .9em;
    font-size: 1em;
}


/*capp-menu-option*/

capp-menu-panel{
    display:block;
    overflow: hidden;
    transition: max-height 0.2s;
    padding:0;
    margin:0;
    max-height:0;
}
capp-menu-panel.right-side{
    right:0;
}
capp-menu.expanded > capp-menu-panel{
    display:block;
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,.3);
    max-height:1000px;
}

.capp-bg-light capp-menu-panel,
.capp-retro capp-menu-panel{
    background-color:#fff;
}
.capp-bg-dark capp-menu-panel{
    background-color: rgba(0,0,0,.5);
}

capp-header capp-menu-panel{
    position:absolute;
}
capp-menu-panel > capp-menu-option{
    padding:0 5px;
    font-size: 16px;
}
capp-menu-option:after,
capp-menu-content:after,
.clearafter {
    content: '';
    display: block;
    clear: both;
}
capp-menu-option,
capp-menu-content{
    display:block;
    overflow: hidden;
    transition:.2s;
    user-select: none;
}
capp-menu-option:after,
capp-menu-content:after {
    content: '';
    display: block;
    clear: both;
}

html.no-touch .capp-retro capp-menu-option:hover{
    background-color: rgba(0,153,170,.9);
    color: #fff;
}


capp-menu-option-bonus{
    /* display:block;
    float:right;
    cursor:pointer;
    margin-right: -5px;
    line-height: 1;
    box-sizing: border-box; */
    display:block;
    float:right;
    cursor:pointer;
    margin-right: -15px;
    line-height: 1;
    box-sizing: border-box;
    margin-left: -5px;
}

.capp-retro capp-menu-option.selected {
    background-color: rgba(0,0,0,.1);
    font-weight:bold;
}

html.no-touch capp-menu-option-bonus:hover{
    /*background-color:rgba(0,0,0,.3);*/
}
capp-menu-option-bonus svg{
    width:50px;
    height:50px;
}

/*capp-menu,capp-header-button{
    float:left;
}
capp-menu-option,capp-menu-label,
capp-header-button{
    padding:5px 10px;
    cursor:pointer;
    line-height:40px;
    transition:.2s;
    -webkit-user-select: none;
    font-size: 18px;
}

capp-menu-option{
    display:none;
    float:none;
}
capp-menu:hover {
    background-color: transparent !important;
}
capp-menu.expanded {
    border-left: 1px solid #fff;
}
capp-menu.expanded capp-menu-option{
    display:block;
}*/

/*Drop-down */
capp-menu.dd{
    position: relative;
}
capp-menu.dd > capp-menu-label {
    border:1px solid #fff;
    background:url('../img/svgs/arrow_dbl_down.svg') 90% center no-repeat #f8f8f8;
    background-position: right 10px center;
    padding-right:60px;
    background-size:16px;
    transition:.2s;
}
.small-size capp-menu.dd > capp-menu-label{
    padding-right: 40px;
    background-position: 94% center;
    background-position: right 10px center;
}
html.no-touch capp-menu.dd > capp-menu-label:hover,
capp-menu.dd.expanded > capp-menu-label{
    background-color:#fff;
    
}
capp-menu.dd.fright > capp-menu-label{
    padding-left:60px;
    background-position: 10% center;
}

capp-menu.dd > capp-menu-panel {
    width: 100%;
}

capp-menu.dd > capp-menu-panel > capp-menu-option {
    padding: 0 5px 0 10px;
}

/*--------------------------- end CAPP-MENU --------------------------------*/

/*---------------------------BEGIN CAPP-HEADER --------------------------------*/
capp-header{
    height:50px;
    bottom:auto;
    z-index: 2001;
    line-height:50px;
}

capp-header > *{
    float:left
}
capp-header.capp-retro{
    background-color:#eee;
    box-shadow: 0px 0px 2px 1px rgba(0,0,0,.3);
    line-height: 50px;
    color:#0099aa;
}

html.no-touch capp-header.capp-retro > *:hover{
background-color:rgba(255,255,255,1)
}
capp-header.capp-retro svg{
 fill:rgba(0,0,0,.4);
}
html.no-touch capp-header.capp-retro svg:hover{
 fill:rgba(0,0,0,1);
}
.capp-retro capp-header-bonus {
    background-color: #dca042 !important;
    height: 5px;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 45px;
    z-index: -1;
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, .2);
}


capp-header > capp-title{
    padding:0 5px;
}
html.no-touch capp-header > capp-title:hover{
    background-color:none !important;
}
/*
capp-header.light-bg capp-header-button:hover,
capp-header.light-bg capp-menu-label:hover,
capp-header.light-bg capp-menu-option:hover{
    background:rgba(255,255,255,.7);  }
*/
/*
capp-header.dark-bg capp-header-button:hover,
capp-header.dark-bg capp-menu-label:hover,
capp-header.dark-bg capp-menu-option:hover{
    background:rgba(0,0,0,.7);  }

capp-header.light-bg capp-header-button:active{  background:rgba(255,255,255,.9);  }
capp-header.dark-bg capp-header-button:active{  background:rgba(0,0,0,.9);  }

capp-header > .fright{  float:right;  }
capp-header > .fleft{  float:left;  }*/
/*---------------------------END CAPP-HEADER --------------------------------*/
capp-app-title{
    font-size: 1em;
    letter-spacing: .5px;
    transition:.2s;
    line-height: .9em;
    background-color: transparent !important;
    padding-top: 8px;
    padding-right: 10px;
    padding-left: 5px;
}
.capp-app-title{
    font-size: 1em;
    letter-spacing: .5px;
    text-align:left;
    padding-top: 8px;
}
capp-menu-label.capp-app-title {
    min-width:160px;
}
capp-title {
/*    color: #fff;*/
    /*text-shadow: 0 1px 2px rgba(0,0,0,.5);*/
    font-size: 1.1em;
    letter-spacing: .5px;
    transition:.2s;

}
.capp-retro capp-title{
    color: #066;
}

capp-app-icon,
capp-craydent-icon,
capp-joe-icon,
capp-header-icon{
    width: 50px;
    height: 45px;
    float: left;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

capp-craydent-icon{
    background-image:url("/JsonObjectEditor/img/svgs/craydent-logo.svg");
    background-size: 40px;
}
capp-joe-icon{
    
   /* background-image:url("/JsonObjectEditor/img/joe-12.png");
    background-size: 80%;*/
}
capp-joe-icon svg {
    /* fill: #066 !important; */
    cursor:pointer;
    transition:    fill .2s;
}
capp-joe-icon:hover svg {
    fill: #066 !important;

}

capp-header-icon{

    height: 100%;
    width: 100px;
    background-size: 80%;  
}

/*--------------------------- begin CAPP-BODY --------------------------------*/
capp-body{
    top:50px;
}
/*--------------------------- end CAPP-BODY --------------------------------*/

/*---------------------------BEGIN CAPP-VIEW --------------------------------*/
capp-view {
    /*left:50px;*/
}
.left-panel capp-view{
    left:50px;
}
/*--------------------------- END CAPP-VIEW --------------------------------*/

/*---------------------------BEGIN CAPP-PANEL --------------------------------*/
capp-panel{
    right:auto;
    width:50px;
    font-size:14px;
    transition:.2s;
    z-index: 2001;
    line-height:50px;
    overflow: hidden;
    overflow-y: auto;
    -ms-overflow-style: none;
}
capp-panel .multi-line{
    line-height: 1.2em;
    height: 50px;
    padding-top: 5px;
    padding-bottom: 5px;
    box-sizing: border-box;
}

capp-panel::-webkit-scrollbar { 
    display: none; 
}
capp-panel hr {  margin: 0;  }
capp-panel.expanded {
    width: 210px;
    text-align:left;
}

capp-panel > *,
capp-panel > capp-menu > capp-menu-panel > *{
    height:50px;
}

capp-panel > *:after {
    content:'';
    display:block;
    clear: both;
}
.capp-panel-toggle{
    text-align:center;
}


/*---------------------------end CAPP-PANEL --------------------------------*/

/*---------------------> CAPP-DASHBOARD <---------------------*/
capp-dashboard {
    /*margin: 50px;*/
    z-index: 4;
    box-sizing: border-box;
    overflow:auto;
    transition: left .2s;
}
capp-dashboard.left-panel-open{
    left: 160px;
}
capp-dashboard.left-panel-open.mobile{
left:0;
}
capp-dashboard capp-title{
    display:block;
}
capp-dashboard capp-card{
    float:none;
    position:absolute;

}
capp-dashboard capp-card .handle{
    cursor:move;
}
capp-dashboard.mobile capp-card {
    width: 96%;
    margin: 2%;
    position: relative;
    left: 0 !important;
    top: 0!important;
    float: none;
    display: block;
}
/*---------------------> CAPP-DASHBOARD <---------------------*/

/*---------------------> CAPP-CARD <---------------------*/
capp-card {
    float:left;
    width:160px;
    height:160px;
    background-color:rgba(255,255,255,.94);
    /*margin: 5px 0 0 5px;*/
    margin: 10px 0 0 10px;
    box-shadow: 0 0 3px 0px rgba(0,0,0,.4);
    color:#404040;
    font-size:14px;
    overflow:auto;
}
capp-card.ui-draggable-dragging{
    transition:.025s;
}
capp-card.ui-draggable{
    float:none;
}
html.no-touch capp-card:hover{
    background-color:rgba(255,255,255,.98);
}

capp-card.big {
    height: 330px;
    width: 330px;}
capp-card.mega {
    width: 670px;
    height:500px;
}

/*170 total, half is 85*/
/*card width */
capp-card.w1-5{width:245px;}
capp-card.wide,capp-card.w2 {  width: 330px;  }
capp-card.w2-5{width:415px;}
capp-card.w3{width:500px;}
capp-card.w3-5{width:585px;}
capp-card.w4{width:670px;}
capp-card.w4-5{width:755px;}
capp-card.w5{width:840px;}
capp-card.w5-5{width:925pxpx;}
capp-card.w6{width:1010px;}

/*card height */
capp-card.h1-5{height:245px;}
capp-card.tall,capp-card.h2 {  height: 330px;  }
capp-card.h2-5{height:415px;}
capp-card.h3{height:500px;}
capp-card.h3-5{height:585px;}
capp-card.h4{height:670px;}
capp-card.h4-5{height:755px;}
capp-card.h5{height:840px;}
capp-card.h5-5{height:925pxpx;}
capp-card.h6{height:1010px;}
/*
capp-card.tall,capp-card.h2 {  height: 325px;  }
capp-card.wide,capp-card.w2 {  width: 325px;  }
capp-card.big {
    height: 325px;
    width: 325px;}
capp-card.mega {
    width: 655px;
    height:490px;
}
capp-card.w3{width:490px;}
capp-card.w4{width:655px;}
capp-card.w5{width:820px;}
capp-card.w6{width:985px;}

capp-card.h3{height:490px;}
capp-card.h4{height:655px;}
capp-card.h5{height:820px;}
capp-card.h6{height:985px;}*/


/*title*/
capp-card capp-title{
    display:block;
    padding:8px;
    border-bottom:1px solid #ccc;
    background-color:#f9f9f9;
}
capp-card > capp-title{
    background-color:#eee;
    border-bottom:1px solid #ddd;
    font-weight: bold;
    font-size: 1.1em;

}
capp-card capp-content capp-title {
    margin: 0 -5px;
    border-bottom: none;
    padding: 5px;
    font-size: 1.1em;
    background: #f2f2f2;
}
capp-card > capp-content > h2 {
    margin-top: .4em;
    margin-bottom: 0.75em;
}

capp-card.no-title > capp-title{
    display:none;
}
/*hr*/
capp-card hr {
    border: 1px solid #ddd;
    margin: 8px 30px;
}

hr.buffer{
    margin:12px 30px;
}
/*---------------------> CAPP-CARD <---------------------*/

/*---------------------> CAPP-PAGE <---------------------*/
capp-page {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    overflow:hidden;
    overflow-y:auto;
    background-color: rgba(255,255,255,.95);
    display:block;
    margin: 5px;
    box-shadow: 0 0 3px 0px rgba(0,0,0,.4);
    color:#404040;
    font-size:14px;
}
/*---------------------> CAPP-PAGE <---------------------*/

/*---------------------> CAPP-CONTENT <---------------------*/
capp-content{
    padding: 4px;
    display: block;
    letter-spacing: .03em;
    line-height:1.3em;
}

capp-card > capp-content {
    position: absolute;
    top: 38px;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: auto;
    border-top: 1px solid #fff;
}
capp-card.no-title > capp-content{
    top:0;
}

capp-content > capp-button{
    border-top: 1px solid rgba(0,0,0,.1);
}

html.no-touch capp-content > capp-button:hover,
html.no-touch capp-toggles > capp-button:hover {
    background-color:#fff;
}

capp-content capp-button-icon {
    height: 50px;
    float:left;
}
capp-content p {
    margin: .5em;
}
capp-content > .joe-capp-button{
    line-height: 40px;
    padding: 0 10px;
    font-size: 14px;
}
capp-content > .joe-svg-button{
    padding-left:60px;
}
capp-content > .joe-svg-button > svg{
    left:0px;
}
capp-content > .joe-iconed-button.joe-capp-button.joe-plus-button svg {
    height: 40px;
    padding-left:30px
}
/*---------------------> CAPP-CONTENT <---------------------*/
/*---------------------> CAPP-POPUP <---------------------*/
capp-popup {
    position: absolute;
    left: 0;
    display: none;
    background-color: #eee;
    z-index: 4000;
    box-sizing: border-box;
    right: 0;
    bottom: 0;
    top: 0;
    margin: 0px;
    box-shadow: 0 0 3px 0px rgba(0,0,0,.5);
    border: 0px solid #bbb;
}
capp-popup.active{
    display:block;
}

capp-popup.margined{
    border: 5px solid #bbb;
    margin:20px;
}
capp-popup.dock-bottom {top: 40%; border-top:5px solid #bbb;}
capp-popup.dock-top {bottom: 40%; border-bottom:5px solid #bbb;}
capp-popup.dock-left {right: 40%; border-right:5px solid #bbb;}
capp-popup.dock-right {left: 40%; border-left:5px solid #bbb;}


capp-popup-close {
    width: 50px;
    height: 50px;
    float: right;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    background-color: rgba(200,10,0,.1);
    
}

/*title*/
capp-popup capp-title{
    display:block;
    padding: 5px;
}
capp-popup  > capp-title{

    border-bottom:1px solid #ccc;
    background-color:#f9f9f9;
    line-height: 40px;
}

capp-popup capp-popup-option{
    float:left;
    padding:10px;
    border:1px solid #fff;
        margin-bottom: 5px;
}


capp-wrapper.small-size capp-popup {
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    border: 5px solid #bbb;
}
/*---------------------> CAPP-POPUP <---------------------*/
/*---------------------> CAPP-TOGGLE <---------------------*/

capp-toggler {
    position: relative;
    display: block;
}

capp-toggled, capp-toggles {
    border: 1px solid #ccc;
}

/*capp-toggles*/
capp-toggles{
    display:block;
    position:relative;
    background:#eee;
    border-bottom:none;
}

capp-toggles:after {
    content:'';
    display:block;
    clear: both;
}
capp-toggles-option{
    display:inline-block;
}

capp-toggles > capp-button{
    float:left;
    line-height: 40px;
    padding: 0 10px;
    background: #ccc;
}
capp-toggles > capp-button > svg {
    float: left;
    width: 20px;
    fill: #999;
    margin-left: -10px;
    padding-top: 12px;
}
capp-toggles > capp-button.active{
    background:#f2f2f2;
}
capp-toggles > capp-button.active > svg {
    
    fill: #068;
}
/*capp-toggled*/

capp-toggled > *{
    display:none;
}
capp-toggled > *.active{
    display:block;
}
capp-toggled {
    border-top:none;
    /* position: relative; */
    display: block;
}

/*---------------------> CAPP-TOGGLE <---------------------*/

/*---------------------> CAPP-CHART <---------------------*/
capp-chart {
    display: block;
    position: relative;
}

/*---------------------> CAPP-CHART <---------------------*/


/*---------------------> CAPP-FORM <---------------------*/
.primary-input {
    display: block;
    position: relative;
    width: calc(100% - 20px);
    box-sizing: border-box;
    padding: 10px;
    font-size: 14px;
    margin:10px 10px 15px 10px;
}

/*---------------------> CAPP-FORM <---------------------*/


app-menu-item{
    display:block;
    padding:10px;
    cursor:pointer;
    color:#eee;
    transition:.2s;
}

html.no-touch app-menu-item:hover{
    background-color:rgba(0,0,0,.2);
    color:#fff;
}


.collapsed-menu capp-menu {
    width: 50px;
}

.collapsed-menu capp-view {
    left: 50px;
}
.collapsed-menu app-menu-item {
    height: 50px;
    padding: 0 5px;

    font-size:9px;
    text-align:center;
}
.collapsed-menu app-menu-item app-menu-title,app-menu-item app-menu-tag
{
    display:none;
}
.collapsed-menu app-menu-item app-menu-tag
{
    display:block;
}
capp-menu-toggle{
    width:50px;
    float:left;
    height:50px;
    text-align: center;

    cursor:pointer;
    display:block;
/*    background-image: url('img/lightbulb-black.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px;*/
}
html.no-touch capp-menu-toggle:hover{
    background-color:rgba(0,0,0,.2);
}


/*APP USER */
appuser {
    float: right;

    padding: 0 20px;
    cursor: pointer;
}

html.no-touch appuser:hover {
    background-color: rgba(0,0,0,.2);
}


/*Capp-user --*/
capp-menu-label#cappUser {
    background-color: rgba(255,255,255,.8);
}

capp-user-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    line-height: initial;
    padding-bottom: 2px;
    font-size: 8px;
    letter-spacing: 1px;
    background-color: rgba(255,255,255,.9);
    transition:.2s;
}
html.no-touch capp-menu-label:hover > capp-user-name{
    font-size: 12px;
}
img.capp-user-icon{
    width: 40px;
    margin: 0 -20px;
}

capp-count {
    float: right;
    font-size: 10px;
}