/* stylesheet.css */
@import url("fonts.css");
*, html { vertical-align:top; }
body
{
    margin:0;
    padding:0;
    font:normal 14px Arial, Helvetica, sans-serif;
    color:#999999;
    background:#000000; /*#1e1e1e*/

}
header, nav, main, footer, div, ul, li, a { display:inline-block; box-sizing:border-box; }
ul, ol { list-style-type:none; margin:0; padding:0; }
ul.list > li { display:block; }

table { display:inline-table; box-sizing:border-box; margin:0px; padding:0px; border:0px; border-spacing:0px; }
table tr { display:table-row; box-sizing:border-box; margin:0px; padding:0px; border:none; }
table tr td { display:table-cell; box-sizing:border-box; margin:0px; padding:0px; text-align:left; vertical-align:top; border:none; }

img { border:none; }

a { font:normal 14px Arial, Helvetica, sans-serif; text-decoration:none; color:#147bbe; vertical-align:top; -webkit-transition: all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s; }
a:hover { text-decoration:none; color:#11bbff;/*#11bbff #00aaff 04eeb8 00aaff ef5634*/ }


h1 { display:inline-block; box-sizing:border-box; width:100%; margin:0px; padding:0px 0px 20px 10px; font:normal 28px Arial, Helvetica, Sans-Serif; text-align:left; color:#777777; }


/*## SCROLL ##*/
.scroll { overflow-x:hidden; overflow-y:scroll; }
div::-webkit-scrollbar { width:10px; cursor:pointer; } /* width */
div::-webkit-scrollbar-track { background:#999999; } /* Track */
div::-webkit-scrollbar-thumb { background:#333333; border:1px solid #555555; } /* Handle */
div::-webkit-scrollbar-thumb:hover { background:#555; } /* Handle on hover */


/*
form { margin:0px; padding:0px; }
input[type=submit] { display:inline-block; margin:0px; padding:4px 8px 4px 8px; border:1px solid #333333; background:#eeeeee; }
input[type=submit]:hover { color:#ffffff; border-color:#04eeb8; background:#04ddb8; cursor:pointer; }
*/

form { margin:0px; padding:0px; }

select { display:inline-block; box-sizing:border-box; margin:0px; padding:2px 6px 2px 6px; font:normal 14px Arial; color:#cccccc; border:1px solid #666666; border-radius:3px; background:#101014; }

input[type="text"], input[type="email"], input[type="password"] { display:inline-block; box-sizing:border-box; margin:0px; padding:1px 6px 1px 6px; font:normal 14px/20px Arial; color:#cccccc; border:1px solid #666666; border-radius:2px; background:#101014; }

textarea { display:inline-block; box-sizing:border-box; margin:0px; padding:2px 6px 2px 6px; font:normal 14px Arial; color:#cccccc; border:1px solid #666666; border-radius:2px; background:#101014; }
textarea::-webkit-scrollbar { width:10px; } /* width */
textarea::-webkit-scrollbar-track { background:#999999; } /* Track */
textarea::-webkit-scrollbar-thumb { background:#333333; border:1px solid #555555; } /* Handle */
textarea::-webkit-scrollbar-thumb:hover { background:#555; } /* Handle on hover */

.editable_div { display:inline-block; box-sizing:border-box; margin:0px; padding:2px 6px 2px 6px; font:normal 14px Arial; text-align:left; color:#cccccc; border:1px solid #666666; border-radius:2px; background:#101014; }
.editable_div::-webkit-scrollbar { width:10px; } /* width */
.editable_div::-webkit-scrollbar-track { background:#999999; } /* Track */
.editable_div::-webkit-scrollbar-thumb { background:#333333; border:1px solid #555555; } /* Handle */
.editable_div::-webkit-scrollbar-thumb:hover { background:#555; } /* Handle on hover */

input[type="checkbox"] { margin:0px 0px 0px 0px; }

input[type="submit"] { padding:2px 6px 4px 6px; border:none; font:bold 14px 'Trebuchet MS', Arial; color:#f1f1f1; border:1.5px solid #888888; background:#147bbe; }
input[type="submit"]:hover { color:#ffffff; border-color:#11bbff; background:#11bbff; cursor:pointer; }

button { padding:2px 6px 4px 6px; border:none; font:bold 14px 'Trebuchet MS', Arial; color:#f1f1f1; border:1.5px solid #888888; background:#147bbe; }
button:hover { color:#ffffff; border-color:#11bbff; background:#11bbff; cursor:pointer; }

input[type="file"] { width:100%; margin:0px; padding:0px; font:normal 11px Arial; text-align:left; color:#dddddd; background:none; }
input[type="file"]::-webkit-file-upload-button { visibility:hidden; display:none; }
input[type="file"]::before { content:'Browse'; display:inline-block; margin:0px 10px 0px 0px; padding:2px 6px 2px 6px; border:none; font:bold 14px 'Trebuchet MS', Arial; color:#f1f1f1; border:1.5px solid #888888; background:#616164; }
input[type="file"]:hover::before { color:#ffffff; border-color:#04eeb8; background:#04ddb8; cursor:pointer; }




/*##  PAGE HEADER  #################################################################################*/

#header { display:block; position:relative; z-index:1000000; width:100%; height:68px; text-align:left; background:#111216; }

#logo { display:inline-block; width:240px; margin:0px; padding:8px 0px 0px 0px; text-align:center; vertical-align:top; background:none; }
#logo > img { display:inline-block; width:48px; height:auto; vertical-align:top; background:none; }
#logo > div { display:inline-block; margin:0px; padding:0px 0px 0px 6px; font:bold 9px Arial; letter-spacing:0px; text-align:left; color:#555555; }
#logo > div.admin { letter-spacing:1px; color:#555555; }
#logo > div > div { padding:0px 0px 0px 0px; font:normal 36px/36px Times; letter-spacing:0px; text-align:center; color:#888888; }
#logo > div > div > sup { margin:0px; padding:0px 0px 0px 1px; font:bold 12px Arial; color:#888888; }


#searchform { display:inline-block; box-sizing:border-box; margin:15px 0px 0px 0px; vertical-align:top; background:none; }
#searchform > #searchfield { display:inline-block; box-sizing:border-box; width:400px; height:36px; margin:0px; padding:0px 0px 0px 12px; font:normal 16px Arial; vertical-align:top; color:#dddddd; border:none; border-radius:18px 0px 0px 18px; background:#202125; }
#searchform > #searchbtn { display:inline-block; box-sizing:border-box; width:50px; height:36px; margin:0px 0px 0px 0px; padding:0px; font:bold 14px Arial; text-align:center; vertical-align:top; color:#dddddd; border:none; border-radius:0px 18px 18px 0px; background-color:#303135; /* 25262a 35363a*/ background-image:url('../images/vectors/magnifying-glass.svg'); background-repeat:no-repeat; background-size:16px 16px; background-position-x:17px; background-position-y:10px; cursor:pointer; }
#searchform > #searchbtn:hover { background-color:#45464a; /* 35363a */ }


#account { float:right; position:relative; width:240px; height:60px; margin:6px 10px 0px 0px; padding:0px; text-align:right; background:none; }
#account > ul.settings { display:inline-block; box-sizing:border-box; margin:12px 0px 0px 0px; }
#account > ul.settings > li { display:inline-block; position:relative; float:left; height:30px; margin:0px 0px 0px 0px; font:normal 13px/30px Trebuchet MS; text-transform:none; text-decoration:none; text-align:center; vertical-align:top; color:#888888; background:none; }
#account > ul.settings > li > a.gear { display:block; width:30px; height:30px; margin:0px; padding:0px; font:normal 22px/30px Arial; text-align:center; vertical-align:middle; color:#bbbbbb; background:none; }
#account > ul.settings > li > a.gear:hover { color:#c34d6d; -webkit-transition: all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s; }
#account > ul.settings > li > a { display:block; margin:0px; padding:8px 16px 6px 16px; font:normal 13px Trebuchet MS; text-transform:none; text-decoration:none; color:#bbbbbb; }
#account > ul.settings > li > a:hover { color:#c34d6d; -webkit-transition: all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s; }








/*##  CONTENT  #####################################################################################*/

#content { display:block; box-sizing:border-box; width:100%; min-height:100%; height:100%; padding:0px; background:none; }







/*##  MENU  ########################################################################################*/

#menu { position:absolute; z-index:2000; width:240px; min-height:100%; border-radius:0px 0px 0px 0px; background:#111216; }

#menu > ul { display:block; padding:5px 0px 10px 0px; border-top:1.5px solid #26272b; background:#111216; }
#menu > ul > li { display:block; border-bottom:1.5px solid #26272b; background:none; }
#menu > ul > li > a { display:block; box-sizing:border-box; padding:10px 10px 10px 12px; font:bold 15px Arial; text-decoration:none; text-align:left; color:#dddddd; }
#menu > ul > li > a:hover { color:#d35d7d; background:#35363a; /*#252a2f*/ }
#menu > ul > li { display:block; box-sizing:border-box; position:relative; }
#menu > ul > li > div { display:block; box-sizing:border-box; width:200px; padding:10px 10px 10px 12px; font:bold 15px Arial; text-decoration:none; text-align:left; color:#dddddd; }
#menu > ul > li > ul { display:none; position:absolute; left:240px; top:0px; width:240px; padding:4px 0px 4px 0px; border:2px solid #35363a; border-top:0px; border-left:0px; background:#35363a; /*box-shadow: 5px 5px 10px 5px rgba(255, 0, 0, 0.5);*/ }
#menu > ul > li > ul > li { display:block; background:none; }
#menu > ul > li > ul > li:last-of-type { border-bottom:none; }
#menu > ul > li > ul > li > a { display:block; box-sizing:border-box; padding:6px 10px 6px 20px; font:normal 13px Arial; text-decoration:none; text-align:left; color:#dddddd; }
#menu > ul > li > ul > li > a:hover { font-weight:bold; background:#b33d5d; /*#b33d5d #c34d6d #d35d7d*/ -webkit-transition: all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s; }
#menu > ul > li:hover { background:#35363a; -webkit-transition: all 0.1s; -moz-transition:all 0.1s; transition:all 0.1s; }
#menu > ul > li:hover > ul { display:inline-block; -webkit-transition: all 0.1s; -moz-transition:all 0.1s; transition:all 0.1s; }



#menu_btn { display:none; box-sizing:border-box; position:absolute; left:8px; top:8px; z-index:1003000; width:54px; height:50px; margin:0px 0px 0px 0px; padding:0px; text-align:center; vertical-align:middle; background:none; cursor:pointer; } 
#menu_btn > i { display:inline-block; box-sizing:border-box; margin:0px 0px 0px 0px; padding:2px 10px 4px 10px; font-size:38px; color:#9e9ea6; border:1px solid #35363a; border-radius:2px; background:#25262a; }
#menu_btn:hover > i { border-color:#dddddd; -webkit-transition: all 0.1s; -moz-transition:all 0.1s; transition:all 0.1s; }
input#menu_cb[type=checkbox]{ display:none; -webkit-appearance:none; } 
input#menu_cb[type=checkbox]:checked ~ #menu { display:inline-block; }









/*##  MAIN  ########################################################################################*/


/*## MAIN ##*/
#main { width:100%; min-height:1000px; height:100%; padding:0px 0px 0px 250px; background:none; }


/*## MAIN_HEADER ##*/
#main_header { display:block; width:100%; margin:0px; padding:5px 0px 10px 10px; background:none; }
#main_header > h1 { margin:0px; padding:0px; font:normal 32px 'Lato Light', Arial; font-variant:small-caps; text-transform:capitalize; color:#999999; }
#main_header > div.slogan { padding:0px 0px 0px 3px; font:normal 14px Arial; color:#888888; }
#main_header > div.slogan > span { color:#aaaaaa; }


/*## MAIN_LOCBAR ##*/
#main_locbar { display:block; width:100%; margin:0px; padding:5px 0px 0px 5px; font:normal 10px/13px Arial; color:#95969a; background:none; }
#main_locbar a { font:normal 11px/13px Arial; color:#75767a; }
#main_locbar a:hover { color:#c34d6d; }








/*##  LOGIN FORM ###################################################################################*/
#loginform { width:100%; max-width:200px; margin-top:10%; text-align:center; background:none; }

#loginform > div.logo { width:100%; margin:0px 0px 10px 0px; padding:0px; text-align:center; background:none; }
#loginform > div.logo > img { display:inline-block; width:48px; height:auto; vertical-align:top; background:none; }
#loginform > div.logo > div { display:inline-block; margin:0px; padding:0px 0px 0px 6px; font:bold 9px Arial; letter-spacing:0px; text-align:left; color:#888888; }
#loginform > div.logo > div.admin { letter-spacing:1px; color:#555555; }
#loginform > div.logo > div > div { padding:0px 0px 0px 0px; font:normal 36px/36px Times; letter-spacing:0px; text-align:center; color:#888888; }
#loginform > div.logo > div > div > sup { margin:0px; padding:0px 0px 0px 1px; font:bold 12px Arial; color:#888888; }

#loginform > input[type='text'], #loginform > input[type='password'] { display:inline-block; box-sizing:border-box; width:100%; max-width:200px; margin:0px 0px 10px 0px; padding:8px; font:normal 16px Arial; color:#999999; border:2px solid #333333; border-radius:4px; background:#111111; }

#loginform > input[type='submit'], #loginform > button { float:right; max-width:80px; margin:0px 0px 0px 10px; padding:6px 12px; font:bold 14px Arial; color:#666666; /*#04eeb8 #02ecb6*/ border:2px solid #333333; border-radius:4px; background:none; }
#loginform > input[type='submit']:hover, #loginform > button:hover { color:#444444; background:#11bbff; cursor:pointer; }














/*##  DASHBOARD  ###################################################################################*/

/*## DASH_LIST ##*/
#dash_list { display:inline-block; width:100%; max-width:100%; margin:0px; padding:0px 10px 20px 10px; vertical-align:top; border:none; background:none; }
#dash_list > li { display:inline-block; max-width:100%; margin:0px; padding:10px; text-align:center; vertical-align:top; border:none; background:none; }


/*## DASH_TILE ##*/
div.dash_tile { display:inline-block; box-sizing:border-box; position:relative; min-width:300px; min-height:40px; padding:10px; border-radius:8px; background:#15161a; }









/*##  SETTINGS TABLE  ##############################################################################*/

div.settings_wrapper { display:inline-block; margin:0px; padding:5px; background:none; }


table.settings_table { display:inline-table; text-align:left; border-spacing:0px; border:1.25px solid #666666; border-right:none; border-bottom:none; background:#15161a; }
table.settings_table > tbody > tr { display:table-row; }
table.settings_table > tbody > tr > td { display:table-cell; padding:4px 8px 4px 8px; font:normal 13px Arial; color:#dddddd; border:1.25px solid #666666; border-left:none; border-top:none; }

table.settings_table .title { font:bold 15px Arial; color:#bbbbbb; background:#45464a; }
table.settings_table .title a { font-size:13px; line-height:16px; }

table.settings_table tr.field td { font:bold 14px Arial; text-align:left; color:#bbbbbb; background:#2a2b2f; }
table.settings_table tr td.field { font:bold 14px Arial; text-align:right; color:#bbbbbb; background:#2a2b2f; }



table.settings_table a { color:#5588bb; }
table.settings_table a.white { color:#bbbbbb; }

table.settings_table a:hover { color:#d35d7d; }
table.settings_table a.hov-green:hover { color:#5db37d; }


table.settings_table .inputcell { padding:2px 2px 0px 2px; line-height:26px; vertical-align:middle; }
table.settings_table .inputcell input[type="text"], table.settings_table .inputcell input[type="email"] { width:100%; }
table.settings_table .inputcell textarea { width:100%; }
table.settings_table .inputcell select { width:100%; }


div.settings_btn_bar { display:inline-block; width:100%; margin-top:5px; text-align:right; }


/*## SIZING CLASSES ##*/
table.settings_table .td_field { width:125px; max-width:125px; }
table.settings_table .td_value { width:500px; max-width:500px; }









/*##  GRID TABLE  ##################################################################################*/

table.grid { display:inline-table; text-align:left; border-spacing:0px; border:1.25px solid #555555; border-right:none; border-bottom:none; background:#15161a; }
table.grid tr { display:table-row; }
table.grid tr td { display:table-cell; padding:3px 6px 3px 6px; font:normal 13px/16px Arial; vertical-align:middle; color:#cccccc; border:1.25px solid #555555; border-left:none; border-top:none; }

table.grid .title { font:bold 15px Arial; color:#bbbbbb; background:#45464a; }
table.grid .title a { font-size:13px; line-height:17px; }

table.grid tr.field td { font:bold 14px/16px Arial; text-align:left; color:#cccccc; background:#2a2b2f; }
table.grid tr td.field { font:bold 14px/16px Arial; text-align:right; color:#cccccc; background:#2a2b2f; }

table.grid.alternate tr:nth-child(2n + 1) > td { background:#1f1f1f; }


table.grid .inputcell { padding:2px 2px 0px 2px; line-height:26px; vertical-align:middle; }
table.grid .inputcell input[type="text"] { width:100%; }
table.grid .inputcell textarea { width:100%; }
table.grid .inputcell select { width:100%; }


table.grid a { color:#5588bb; }
table.grid a.white { color:#bbbbbb; }

table.grid a:hover { color:#d35d7d; }
table.grid a.hov-green:hover { color:#5db37d; }


/*## SIZING CLASSES ##*/
table.grid .td_field { width:125px; max-width:125px; }
table.grid .td_value { width:500px; max-width:500px; }


/*## HIGHLIGHTS ##*/
table.grid tr .even { background:#f4f4f4; }
table.grid tr .salmon { background:Salmon; }
table.grid tr .pink { background:#ffc0cb; }
table.grid tr .lightpink { background:#ffd0d5; }
table.grid tr .mistyrose { background:MistyRose; }
table.grid tr .peachpuff { background:Peachpuff; }
table.grid tr .lemonchiffon { background:LemonChiffon; }
table.grid tr .lightcyan { background:LightCyan; }
table.grid tr .pastdue { color:#ffffff; background:#cc0000; }









/*##  FOOTER  #############################################################################################*/
#footer { display:block; min-height:100px; padding:20px; text-align:left; }

/*## COPYRIGHT ##*/
#copyright { font:normal 14px Arial; text-align:left; color:#777777; }

















@media all and (max-width:800px)
{
    /*## HEADER ##*/
    #header { text-align:center; }

    #logo { width:auto; }



    /*## HEADER - ACCOUNT ##*/
    #account { position:absolute; right:0px; top:0px; width:auto; }
    #account > ul.settings { margin:6px 0px 0px 0px; }
    #account > ul.settings > li { display:block; width:100%; height:auto; font:normal 13px/16px Trebuchet MS; text-align:right; background:none; }
    #account > ul.settings > li > a.gear { display:inline-block; font:normal 22px/30px Arial; text-align:right; background:none; }
    #account > ul.settings > li > a { padding:0px; font:normal 13px Trebuchet MS; }
    
    #account > ul.settings > li:first-of-type { display:none; }




    /*## MENU ##*/
    #menu { display:none; min-height:1px; height:auto; box-shadow: 0px 0px 10px #000000; }
    #menu_btn { display:inline-block; }

    

    /*## MAIN ##*/
    #main { padding:0px 10px 0px 10px; }

}/*800px*/



@media all and (max-width:500px)
{
    /*## MENU ##*/
    #menu { width:180px; }
    #menu > ul > li > a { padding:12px 10px 12px 16px; }
    #menu > ul > li > div { padding:12px 10px 12px 16px; }
    #menu > ul > li > ul { left:180px; width:220px; }
    #menu > ul > li > ul > li > a { padding:8px 10px 8px 20px; }


}/*500px*/