:root {
    --blue_font: #306da7;
    --green_font: #558e08;
    --black_font: #000;
}

html {
    width: 100%;
    min-width: 100%;
    height: 100%;
}

body {
    position: relative;
    margin: 0;
    width: 100%;
    min-height: 100%;
    background-color: #EEEEEE;
    /*
    font-family: "Arial", "Helvetica", sans-serif;
    font-family: Georgia, Times, "Times New Roman", serif;
    font-family: "Brush Script MT", cursive;
    font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;
    font-family: "Arial Narrow", Arial, "Helvetica Condensed", Helvetica, sans-serif;
    font-family:  "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;
    */
    font-family: Charcoal,sans-serif;
    font-size: 0.9em;
}

#container {
    width: 100%;
    height: 100%;
    background-color: white;
    margin: 0; /* 0 auto 0 auto; */
}

#header {
    background-color: #306da7; /* #2d6f18; #0065c4; nice blue #558e08; nice green color complement color: #ece6c1 */
    text-align: left;
    padding: 2px 0 2px 0;
    height: 40px;
    width: 100%;
    color: #FFF;
}


#content {
    width: 100%;
    height: 100%;
    background-color: #FFF;
}

#footer {
    clear: both;
    text-align: right;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #efefef;
}

#login_form {
    /* align: center; width: 800px; margin-left: auto; margin-right: auto; */
}

#sidebar {
    height: 100%;
    background-color: #F2F2F2;
}

#widgetbar {
    height: 100%;
    background-color: #F2F2F2;
}

#main {
    display: inline-block;
    margin: 0;
    width: 100%;
    padding: 0;
}

#search {
    width: 100%;
}

#search .search-box {
  margin: 5px;
  padding:0.4em;
  font-size:1em;
  color:#555;
  border-radius: 5px;
}

#actions {
    width: 100%;
}

#action_button {
    display: inline-block;
    margin: 5px;
}

#sidebar_calendar, #sidebar_table {
    overflow: hidden;
    align: middle;
    margin: 0;
}

#sidebar_calendar .ui-datepicker-header, #sidebar_calendar .ui-widget-header, #sidebar_calendar {
    background: #f3f3f3;
}

#sidebar_calendar .ui-datepicker-week-end {
    background-color: #e9e9e9;
}

#sidebar_calendar .ui-widget-content {
    background: #f9f9f9;
}

#sidebar_calendar .ui-state-default {
    background: #f9f9f9;
    color: black;
    border: 1px solid #e9e9e9;
}

/*#sidebar_calendar .ui-state-active {
    background: #3498DB;
}*/

#sidebar_calendar .ui-datepicker-current-day {
    background: #045FB4;
}

/*
#sidebar_calendar .ui-datepicker-current-day a {
    background: #3498DB !Important;
}*/

#sidebar_calendar .ui-state-highlight {
    background:  #F3E9C0;
}


#widgetbar_c {
    width: 100%;
    height: 100%;
    background-color: #F2F2F2;
    color: #08298A;
}

#task_list {
    padding-bottom: 40px; /* fix issues of not displaying bottom of grid in some cases */
    overflow: hidden;
    height: 100%;
    border: 1px solid gray;
}


#task_list_summary {
    padding-bottom: 40px;
    height: 100%;
}

#task_list_summary .jsgrid-grid-header{
    color: #306da7;
}

.ui-menu {
    width: 100px;
}


.jsgrid .jsgrid-grid-header, .jsgrid .jsgrid-grid-body {
    text-align: center;
    margin: 0 4px 0 0;
    background-color: transparent;
}

.jsgrid .jsgrid-grid-header {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    background-color: transparent;
    overflow-x: hidden;
    overflow-y: hidden;
    color: #2E4053;
}

.jsgrid .jsgrid-grid-body {
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    background-color: transparent;
    overflow-x: hidden;
    overflow-y: hidden;
    padding-bottom: 20px;
}


li {
  transition-property: margin, background-color, border-color;
  transition-duration: .4s, .2s, .2s;
  transition-timing-function: ease-in-out, ease, ease;
}

.empty-item {
  transition-property: opacity;
  transition-duration: 0s;
  transition-delay: 0s;
  transition-timing-function: ease;
}

.empty .empty-item {
  transition-property: opacity;
  transition-duration: .2s;
  transition-delay: .3s;
  transition-timing-function: ease;
}

.hiding {
  margin-left:-100%;
  opacity:0.5;
}

.hidden {
  display:none;
}

.ui-menu { width: 150px; }

.required:after { content:" *"; color: red; }

/* SideNav */
/* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0;
    left: 0;
    background-color: #111; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    overflow-y: hidden;
    padding-top: 40px; /* Place content 60px from the top */
    transition: 0.4s; /* 0.5 second transition effect to slide in the sidenav */
}


.right_sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0;
    right: 0;
    background-color: #111; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    overflow-y: hidden;
    padding-top: 40px; /* Place content 60px from the top */
    transition: 0.3s; /* 0.5 second transition effect to slide in the sidenav */
}


/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 0.9em;
    color: #818181;
    display: block;
    transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: -2px;
    right: 12px;
    font-size: 1.1em;
    margin-left: 20px;
    background: none;
    color: #306da7;
    border: 0;
}

.right_sidenav .closebtn {
    position: absolute;
    top: -2px;
    left: -4px;
    font-size: 1.1em;
    margin-left: 0px;
    background: none;
    border: 0;
}

.right_sidenav a {
    padding: 8px 8px 8px 2px;
    text-decoration: none;
    font-size: 0.9em;
    color: #818181;
    display: block;
    transition: 0.3s;
}

#schedule_div {
    background-color: #FFF;
    color: #111;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}

/* Dashboard / Widgets */
.progress-meter .background {
  fill: gray;
}

.progress-meter .foreground {
  fill: green;
}

.progress-meter text {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 24px;
  font-weight: bold;
}

path { stroke: #fff; }
path:hover { opacity:0.9; }
rect:hover { fill:blue; }
.axis { font: 10px sans-serif; }
.legend tr{ border-bottom:1px solid grey; }
.legend tr:first-child{ border-top:1px solid grey; }

.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path { display: none; }
.legend{
    margin-bottom:76px;
    display:inline-block;
    border-collapse: collapse;
    border-spacing: 0px;
}
.legend td {
    padding:4px 5px;
    vertical-align:bottom;
}
.legendPriorities, .legendPerc{
    align:right;
    width:50px;
}

/* Tooltips */
.tutorial_tooltip {
    border-bottom: 1px dotted #000000; color: #000000; outline: none;
    cursor: help; text-decoration: none;
    position: absolute;
    display: none;
    z-index: 1000;
    color: black;
}
.tutorial_tooltip div {
    margin-left: -999em;
    position: absolute;
}
.tutorial_tooltip div {
    border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);

    font-family: Calibri, Tahoma, Geneva, sans-serif;
    position: absolute; left: 1em; top: 2em; z-index: 99;
    margin-left: 0;
    font-weight: bold;
}
.tutorial_tooltip img {
    border: 0; margin: -10px 0 0 -55px;
    float: left; position: absolute;
}
.tutorial_tooltip em {
    font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bolder;
    display: block; padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
* html a:hover { background: transparent; }
.classic {background: #FCF4C5; border: 1px solid #FFAD33; }

.tutorial_tooltip_left_arrow div:before {
    content:'';
    display:block;
    position:absolute;
    color: #FCF4C5;
    background-color: transparent;

    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-right:14px solid #FFAD33;
    left:-16px;

    top:7px;
}


.tutorial_tooltip_right_arrow div:before {
    content:'';
    display:block;
    position:absolute;
    color: #FCF4C5;
    background-color: transparent;

    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-left:14px solid #FFAD33;
    right:-16px;

    top:7px;
}

.smaller_button {
    height: 25px;
    font-size: 15px;
    padding: 0px;
}

.spinner {
    display: inline-block;
    height: 16px;
    width: 16px;
    border: 0;
    z-index: -1;
    margin: 5px;
    background-image: url("/static/images/ui-anim_basic_16x16.03ce3dcc84af.gif");
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}