/* Reset */
html,body{
    background:#0f0f0f;
    margin:0;
    padding:0;
    width:100%;
    height:100%;
}

/* Links */
a{color:#003399;}
a:visited{color:#003399;}
a:active{color:#FF0000;}

/* Buttons */
button.stylized{
    border:1px solid;
    border-color:#434343 #616161 #616161;
    background:linear-gradient(0deg, #b1b1b1 0%, #ffffff 100%);
    box-shadow: inset -0.5px -1px 0px 0px rgba(0,0,0,0.25);
    color:#808080;
    height:18px;
    box-sizing:border-box;
    font-weight:bold;
    font-size:11px;
    margin:2px;
}
button.green{
    border-color:#072e27 #517871 #517871;
    background:linear-gradient(0deg, #91b8b1 0%, #d0f7f0 100%);
}
button.red{
    border-color:#432929 #a06161 #a06161;
    background:linear-gradient(0deg, #d0b1b1 0%, #ffffff 100%);
}

/* Content */
.content{
    background:#BDDFF5;
    width:420px;
    height:493px;
}

/* Top */
.content > .top {
    display:flex;
    justify-content:space-evenly;
    margin-bottom:2px;
}

/* Middle */
.content > .middle{
    display:flex;
    height:308px;
}

.content > .middle > .categories{
    width:123px;
    overflow-y:scroll;
    height:100%;
    background:white;
    margin-left:5px;
    box-sizing:border-box;
}

.content > .middle > .categories > .category{
    border: 1px solid #ffffff;
    background-color: #ffffff;
    cursor: pointer;
    font-family: verdana,sans-serif;
    font-size: 10px;
    color: #003399;
    text-decoration: underline;
    height:18px;
    box-sizing:border-box;
    padding:1px;
    user-select: none;
}

.content > .middle > .categories > .category[data-name="Default"]{
    margin-bottom:5px;
}

.content > .middle > .categories > .category[data-name="Default"]:after{
    height:1px;
    width:100%;
    background:#bcdef4;
    display:block;
    content:" ";
    position:relative;
    top:6px;
}

.content > .middle > .categories > .category[data-selected="true"]{
    border: 1px solid #003399;
    background-color: #003399;
    color:#ffffff;
}

.content > .middle > .categories > .category:not([data-selected="true"]):hover{
    background-color:#BCF4EA;
    border:1px solid #003399;
}

.content > .middle > .body{
    flex:1;
    overflow-y:scroll;
    height:100%;
    background:white;
    margin-left:2px;
    margin-right:1px;
}

.content > .middle > .body > .subCats{
    background:#FDF7D5;
    display:flex;
    width:100%;
    flex-wrap: wrap;
    justify-content: center;
    gap:3px;
    padding:2px;
    box-sizing:border-box;
}

.content > .middle > .body > .subCats > div{
    font-family: verdana,sans-serif;
    font-size: 10px;
    text-decoration: underline;
    color:#00309C;
    cursor:pointer;
    user-select: none;
}

.content > .middle > .body > .subCats > div[data-selected="true"]{
    color:#ffffff;
    text-decoration:none;
    background-color:#00309C;
}


.content > .middle > .body > .header{
    font-family: verdana,sans-serif;
    font-size: 10px;
    color: #808080;
    border-bottom:1px solid #808080;
    font-weight:bold;
    padding-left:2px;
}

.content > .middle > .body > .cursors{
    display:flex;
    flex-wrap: wrap;
    justify-content:center;
    align-items:center;
}
.content > .middle > .body > .cursors > .cursor{
    flex: 0 0 33.333333%;
    width:32px;
    height:32px;
    background-repeat: no-repeat;
    background-position: center;
    margin-top:6px;
    margin-bottom:6px;
    user-select: none;
    cursor:pointer;
}
.content > .middle > .body > .cursors > .cursor:before{
    content: attr(data-prefix);
    font-family: verdana,sans-serif;
    font-size: 10px;
}

/* Footer */

.content > .bottom > .logo{
    margin:4px;
    background:no-repeat url(logo.png);
    width:100%;
    height:32px;
}

.content > .bottom > .codegen{
    display:none;
}

.content > .bottom > .codegen > span{
    font-size: 13px;
    font-weight: bold;
    font-family: Arial;
    text-align: center;
    width:100%;
    display:block;
}

.content > .bottom > .codegen > div{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-evenly;
}

.content > .bottom > .codegen > div > img{
    width:32px;
    height:32px;
}

.content > .bottom > .codegen > div > textarea{
    font-family: arial;
    font-size: 11px;
    padding: 2px;
    overflow: hidden;
    border: 1px solid #3399FF;
    width:298px;
    height:40px;
}

.content > .bottom > .codegen > div > button{
    width:40px;
    height:40px;
    font-size: 11px;
}

.content > .bottom > .codegen > a{
    font-family: Arial;
    font-size: 11px;
    width:100%;
    display:block;
    text-align: center;
}