/* Write your custom CSS here */

.panel .panel-counter {
    position: relative;
    padding: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
	font-size: 150%;
	text-align: center;
	background-color: #e9edf2;
	cursor: pointer;
}

.panel .panel-caution {
    position: relative;
    padding: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
	font-size: 150%;
	text-align: center;
	background-color: #ffff99;
	color:#2b343b;
	cursor: pointer;
}

.panel .panel-warning {
    position: relative;
    padding: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
	font-size: 150%;
	text-align: center;
	background-color: #f57070;
	color:#2b343b;
	cursor: pointer;
}

.shadow {
	box-shadow: 6px 6px 2px grey;
}

.page-inner {
	background: #96acb7;
}

.page-footer {
}

.label-adjust {
	position:relative;
	top:6px;
	text-align:right;
}

.scrollable-list {
    width: 100%;
    max-height: 150px;
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 6px 10px !important;
    margin: 0;
	margin-bottom: 15px;
    list-style-type: none;
	border: 1px solid #dce1e4;
}

.scrollable-list li {
    padding: 4px 8px;
    cursor: pointer;
}

.scrollable-list li:hover {
    background-color: #f0f0f0;
}

/* Collapsed left-nav flyout: the parent item's own row (shown as a header above
   its popout submenu) doesn't navigate anywhere in collapsed mode - style it as
   a plain label instead of matching the real, clickable submenu items below it. */
.small-sidebar:not(.page-sidebar-fixed) .accordion-menu > li.droplink:hover > a {
    background: #00235D;
    color: #fff;
    cursor: default;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* Collapsed left-nav flyout: let a long submenu scroll internally (mouse wheel,
   or touch-drag on the tap-to-open version below) instead of being clipped by
   the window with no way to reach the rest of it - scrolling the page itself
   would move the sidebar out from under the mouse/finger and close the flyout. */
.small-sidebar:not(.page-sidebar-fixed) .accordion-menu > li > ul {
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Touch devices (no real :hover, e.g. iPad Safari): Safari still *simulates*
   :hover on whatever was last tapped and doesn't reliably clear it once a
   different item is tapped, so leaving :hover in control here lets a previous
   flyout stay visually open and overlap the one just opened via tap. Neutralize
   the :hover-driven display/style entirely for touch and drive it solely off
   the .touch-open class modern.js toggles explicitly - only one item can carry
   that class at a time, so only one flyout can ever be shown. */
@media (hover: none) {
    .small-sidebar:not(.page-sidebar-fixed) .accordion-menu > li.droplink:hover > a {
        background: transparent !important;
        color: inherit !important;
        border-bottom: none !important;
    }
    .small-sidebar:not(.page-sidebar-fixed) .accordion-menu li:hover > a {
        z-index: auto !important;
    }
    .small-sidebar:not(.page-sidebar-fixed) .accordion-menu > li:hover > ul,
    .small-sidebar:not(.page-sidebar-fixed) .accordion-menu > li.open:hover > ul {
        display: none !important;
    }
}
.small-sidebar:not(.page-sidebar-fixed) .accordion-menu > li.droplink.touch-open > a {
    background: #00235D !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
    z-index: 999 !important;
}
.small-sidebar:not(.page-sidebar-fixed) .accordion-menu > li.droplink.touch-open > ul {
    display: inline-block !important;
}