body, html{
    font-family: -apple-system,BlinkMacSystemFont,'San Francisco','Segoe UI','Helvetica Neue','Fira Sans',Roboto,Oxygen,Ubuntu,'Droid Sans',Arial,sans-serif;
    position: relative;
    height: 100%;
}
h1, h2, h3, h4, h5, h6{
    font-family: -apple-system,BlinkMacSystemFont,'San Francisco','Segoe UI','Helvetica Neue','Fira Sans',Roboto,Oxygen,Ubuntu,'Droid Sans',Arial,sans-serif;
    font-weight: normal;
}
h1{
    font-size:1.5em;
}
h2{
    font-size:1.3em;
}
h3{
    font-size:1.1em;
}
h4{
    font-size:0.9em;
}
p{
    font-size:13px;
}

ul.list-clear{
    margin: 0;
    padding:0;
}

ul.list-clear li{
    list-style: none;
}

input[type="text"], input[type="password"]{
    font-family:-apple-system,BlinkMacSystemFont,'San Francisco','Segoe UI','Helvetica Neue','Fira Sans',Roboto,Oxygen,Ubuntu,'Droid Sans',Arial,sans-serif;
    font-size:14px;
    padding:3px 10px;
    border:1px solid #ddd;
    width: 100%;
    box-sizing: border-box;
    margin:10px 0;
}
input[type="text"]:focus, input[type="text"]:active{
    border:1px solid #f00;
    /* background:none; */
}
button, input[type="submit"], .cactus-button{
    cursor: pointer;
    border:none;
    background: #fff;
    color: #2185b7;
    border: 1px solid #2185b7;
    font-size:13px;
    border-radius: 20px;
    padding:5px 15px;
    display:inline-block;
    margin:5px;
    transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -webkit-transition: all 0.1s ease;
}
.cactus-button:hover, input[type="submit"].cactus-button:hover{
    color:#fff;
    background: #2385b6;
    text-decoration: none;
}
button:active, input[type="submit"]:active{
}
.nolist{
    list-style: none;
    padding-left: 20px;
}
.clear{
    clear:both;
}
.header{
    /* background:rgb(11, 5, 82); */
    position: relative;
    background-color: #fff;
    box-shadow: 0 1px 0 rgba(12,13,14,0.1),0 1px 6px rgba(59,64,69,0.1);
    padding:5px 20px;
    min-height:20px;
    color:#444;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 10;
    /*box-shadow:0px 7px 7px rgba(0,0,0,0.09);*/
}

.left{
    float:left;
}
.right{
    float:right;
}

a[href].account:hover{
    text-decoration:none;
}
.account img{
    margin-right:5px;
}
.appName{
    color:#fff;
    font-family:-apple-system,BlinkMacSystemFont,'San Francisco','Segoe UI','Helvetica Neue','Fira Sans',Roboto,Oxygen,Ubuntu,'Droid Sans',Arial,sans-serif;
    font-size:1.5em;
}
.mainCon{
    max-width:1000px;
    margin:0 auto;
}
.updateSelect select, select{
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 5px 10px;
    color: #555;
    font-size: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    box-sizing: border-box;     
}

.icon-text{
    display:inline-block;
    padding:3px 5px 3px 35px;
    background-size:contain;
    background-repeat: no-repeat;
    background-position: left center;
    font-size:13px;
    margin: 3px 0;
}
.icon-compose{
    background-image: url('../images/icon-compose.png');
}
.icon-manage{
    background-image: url('../images/icon-manage.png');
}
.icon-tree{
    background-image: url('../images/icon-tree.png');
}
.mainCon{
    padding:0 0 20px 0;
}
ul.tree, ul.tree ul {
    font-family:-apple-system,BlinkMacSystemFont,'San Francisco','Segoe UI','Helvetica Neue','Fira Sans',Roboto,Oxygen,Ubuntu,'Droid Sans',Arial,sans-serif;
    font-size:13px;
    list-style-type: none;
    background: url(../images/vline.png) repeat-y;
    margin: 0;
    padding: 0;
}
ul.tree ul {
    margin-left: 10px;
}
ul.tree li {
    margin: 5px 0;
    padding: 0 12px;
    line-height: 20px;
    background: url(../images/node.png) no-repeat;
    /* color: #369; */
    font-weight: bold;
}

ul.tree li div{
    display: inline-block;
    background-color: #fafafa;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    padding: 2px 10px;
    border-radius: 3px;
    overflow-y: hidden;
    position: relative;
    transition: all 0.2s ease;
}

ul.tree li a[href] {
    color: inherit;
    font-weight: normal;
}

ul.tree li a.delItem{
    position: absolute;
    top: 60px;
    right: 5px;
    transition: all 0.2s ease;
}

ul.tree li div:hover{
    padding-right: 35px;
}

ul.tree li div:hover a.delItem{
    top: -3px;
}

ul.tree li.last {
    background: #fff url(../images/lastnode.png) no-repeat;
}
fieldset{
    margin:15px 0;
    background:#f5f5f5;
    padding:0px 10px 10px 10px ;
    border:1px solid #ddd;
}
legend{
    font-size:15px;
    font-family:-apple-system,BlinkMacSystemFont,'San Francisco','Segoe UI','Helvetica Neue','Fira Sans',Roboto,Oxygen,Ubuntu,'Droid Sans',Arial,sans-serif;
}
.sideNav{
    padding:10px;
}
.sideNav ul li{
    /*border-bottom:1px solid #ddd;*/
}
.sideNav ul li a:hover{
    text-decoration:none;
}
input[type="text"].searchInput{
    background:#fff;
}
.messageDialog{
    position:fixed;
    top:0;
    width:300px;
    z-index:5000;
    color:#183f8f;
    margin:0 auto;
    left:0;
    right:0;
    box-shadow:0 0 4px rgba(0,0,0,0.4);
    top:-300px;
}
.messageContain{
    padding:20px;
    background-color:#fff;
}
.closeIcon{
    position: absolute;
    top:5px;
    right:5px;
    width:20px;
}
.closeIcon:hover{
    background:#ddd;
}
.cactus-table{
    border-collapse: collapse;
    box-sizing: border-box;
    width: 100%;

}
.cactus-table tr:nth-child(even) {
    background: #f1f1f1;
}
.cactus-table th{
    font-family:-apple-system,BlinkMacSystemFont,'San Francisco','Segoe UI','Helvetica Neue','Fira Sans',Roboto,Oxygen,Ubuntu,'Droid Sans',Arial,sans-serif;
    color:#777;
}
.cactus-table td, .cactus-table th{
    /*border:1px solid #f1f1f1;*/
    padding:3px 10px;
    font-size:14px;
}
.pagination{
    display:block;
    position: relative;
}
.pageCount{
    display:block;
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    text-align:center;
    margin: 0 auto;
    z-index: 1;
}
.pagination a{
    display:inline-block;
    margin-right:10px;
    position: relative;
    z-index: 2;
}

.pagination a.next{
    float:right;
}
.hide{
    visibility: hidden;
}

body.loginBody{
    background:#222;
}
.loginBox{
    text-align:center;
    margin:0 auto;
    max-width:480px;
    position:absolute;
    height:300px;
    left:0;
    right:0;
    top:40%;
    margin-top:-150px;
}
.loginBox input[type="text"], .loginBox input[type="password"]{
    padding:7px 10px;
    font-size:15px;
}
.loginBox input[type="submit"]{
    width:322px;
    padding:8px 10px;
    margin-top:20px;
    color:#fff;
    background:#2185b7;
    font-size:16px;
    font-family:-apple-system,BlinkMacSystemFont,'San Francisco','Segoe UI','Helvetica Neue','Fira Sans',Roboto,Oxygen,Ubuntu,'Droid Sans',Arial,sans-serif;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;    
}
.loginBox input[type="submit"]:hover{
    background:#84d0d5;
}
.loginBox p.response{
    color: rgba(255,255,255,0.8);
}
.loginLogo{
    margin:20px 0;
    position:relative;
    top:50px;
}
.loginInputs{
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;    
    opacity:0;
    
}
.searchBox{
    position:relative;
    display:inline-block;
    border:1px solid #ddd;
    margin:10px 0 20px 0;
    transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    -webkit-transition:all 0.3s ease;
    -ms-transition:all 0.3s ease;
}
.searchBox input[type="text"]{
    margin:0;
    border:none;
    transition:all 0.2s linear;
    -moz-transition:all 0.2s linear;
    -webkit-transition:all 0.2s linear;
    -ms-transition:all 0.2s linear;
    padding-right:30px;
}
.searchBox input[type="text"]:focus{
    /*width:180px;*/
}
.searchBox input[type="submit"]{
    background-color:transparent;
    position:absolute;
    border:none;
    margin:0;
    background-image:url('../images/search.png');
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    box-shadow: none;
    padding:4px 15px;
    right:0;
    top:0;
}
.postTitle{
    border-bottom:1px solid rgba(0,0,0,0.1);
    padding-bottom:8px;
    font-size: 1.5em;
    font-weight: bold;
}

.subTitle{
    border-bottom:1px solid rgba(0,0,0,0.1);
    padding-bottom:8px;
    font-size: 1em;
    font-weight: bold;
}

.floatingButton, button.floatingButton, input[type="submit"].floatingButton{
    position: fixed;
    bottom: 100px;
    right: 180px;
    width: 80px;
    height: 80px;
    border-radius: 50px;
    color: rgba(0,0,0,0.0);
    box-shadow: 0 3px 3px rgba(0,0,0,0.1);
    /* background-color: #183f8f !important; */
    background-color: #fff !important;
    background-image: url('../images/icon-save.png');
    background-position: center;
    background-repeat:no-repeat;
    border: none;
}

.floatingButton:hover, button.floatingButton:hover, input[type="submit"].floatingButton:hover{
    background-color: #369 !important;
}

.post-search-form{
    margin-bottom: 3em;
}
 

@media screen and (max-width: 800px){
    .midSec, .rightSide{
        width: 100%;
        box-sizing: border-box;
        overflow-x: scroll;
        padding: 0 20px;
    }

    ul.menu li a{
        display: block;
        text-align: center;
        font-size: 1.1em;
        margin-bottom: 8px;
        text-transform: uppercase;
    }

    .menu-icon{
        font-size: 1em;
    }

    .mobile-menu-icon{
        display: block;
        position: absolute;
        right: 20px;
        top: 10px;
    }
    
    .mobile-menu.open{
        display: block;
    }

    .mobile-menu{
        display: none;
    }

    .sidePane{
        width: 50%;
    }

    .table-head{
        margin-bottom: 20px;
    }
    .table-head > div{
        display: none;
    }

    .table-head > div:first-child{
        display: block;
    }

    .table-head > div::after{
        content: "Select all";
        display: inline-block;
        padding-left: 10px;
    }

    .table-rows{
        padding: 10px 0;
        border-bottom: 1px solid #ddd;
        display: grid;
        grid-template-columns: 15px 2fr 4fr;
        grid-template-areas:    "chkbox photo title"
                                "chkbox photo story"
                                "cat edit delete";
        grid-gap: 5px;
    }
    .tr-chkbox{
        grid-area: chkbox;
    }
    .tr-thumbs{
        grid-area: photo;
    }
    .tr-title{
        grid-area: title;
    }
    .tr-story{
        grid-area: story;
    }
    .tr-edit{
        grid-area: edit;
        grid-column: 3 / 5;
        text-align: right;
    }
    .tr-del{
        grid-area: delete;
        grid-column: 5 / 7;
    }
    .tr-cat{
        grid-area: cat;
        grid-column: 2 / 3;
        font-size: 0.8em;
        color: #777;
        border-left: 1px solid #444;
        padding-left: 8px;
    }
    .sideNav{
        display: none;
        z-index: 5;
        background: #fff;
    }

    .cactus-menu{
        display: none;
    }
    
    .floatingButton, button.floatingButton, input[type="submit"].floatingButton{
        right: 20px;
        bottom: 20px;
    }

    .tags-table .media-row{
        display: flex;
    }
}

@media screen and (min-width: 800px ) {
    body{
        background-color: #e8edf1;
    }
    .header{
        display:flex;
    }

    .mobile-menu-icon{
        display: none;
    }
    .logo{
        flex: 1;
        display: flex;
        align-items: center;
    }
    .navigation{
        flex: 5;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    /* Grid layout */
    .root-layout{
        max-width: 1400px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 3fr 1fr;
        grid-gap: 20px;
    }

    .sidePane, .midSec, .rightSide{
        background: #fff;
    }

    .midSec, .rightSide{
        box-sizing: border-box;
        padding-left: 20px;
        padding-right: 20px;
    }

    ul.menu{
        display: flex;
        margin-bottom: 0;
    }
    
    ul.menu li{
        margin: 0 10px;
    }
    ul.menu li a[href]{
        color: inherit;
        font-size: 1em;
    }

    ul.submenu{
        position:absolute;
        display:none;
        top:60px;
        right:0;
        color:#183f8f;
        background:#fff;
        margin:0;
        padding:0;
        width:120px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }
    ul.submenu li{
        float:none;
        margin:0;
        padding:0;
    }
    ul.submenu li a[href]{
        color:#183f8f;
        font-size:14px;
        margin:0;
        padding:5px 10px;
    }
    ul.submenu li a[href]:hover{
        color:#000;
        background: #ddd;
        text-decoration: none;
    }

    .cactus-table .table-head{
        display: flex;
        padding-bottom: 5px;
        border-bottom: 1px solid #ddd;
        margin-bottom: 10px;
        font-weight: bold;
    }

    .table-head > div{
        flex: 3;
    }

    .table-head > div:first-child{
        flex: 1;
    }
    .table-head > div.th-story{
        flex: 6;
    }

    .cactus-table .table-rows{
        display: flex;
        border-bottom: 1px solid #ddd;
        align-items: center;
        padding: 10px 0;
    }

    .cactus-table .table-rows > div{
        flex: 3;
    }
    .cactus-table .table-rows > div.tr-story{
        flex: 6;
        font-size: 0.85em;
    }

    .cactus-table .table-rows > div:first-child{
        flex: 1;
    }

    .post-search-form{
        display: flex;
        align-items: baseline;    
    }

    input[type="text"], input[type="password"], .updateSelect select, select{
        width: 300px;
    }

    .media-row{
        display: flex;
    }
}