/***************
 * everywhere *
 ***************/

/* #f8f8f8
        // #808080
        // #444444
*/
body {
/* 	background-color: #f8f8f8; */
	margin: 5px;
	font-family: Ubuntu, Tahoma, sans-serif;
	font-size: small;
	line-height: 16px;
	color: #333333;
}

/* unvisited link */
a:link {
	color: #333333;
}

/* visited link */
a:visited {
	color: #333333;
	text-decoration: none;
}

/* mouse over link */
a:hover {
	color: #99cc33;
	text-decoration: underline;
}

/* selected link */
a:active {
	color: #99cc33;
	text-decoration: underline;
}



#wrapper {
	display: flex;
	width: 100%;
	height: 500px;
	margin: 20px 0px 20px 0px;
}

#curve_chart, #curve_chart3 {
	width: 50%;
	border: 1px solid #ccc;
}

#curve_chart2, #curve_chart4 {
	width: 50%;
	border: 1px solid #ccc;
}

/***************
 * update.php *
 ***************/
.loader {
	border: 3px solid #f3f3f3; /* light grey */
	border-top: 3px solid #99cc33; /* green */
	border-radius: 50%;
	width: 25px;
	height: 25px;
	animation: spin 1s linear infinite;
	visibility: hidden;
}

@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}


.list-container {
    min-height: 440px;
    height: auto;
    position: absolute;
    top: 0; 
    bottom: 0;
}

/* DX CUSTOM STYLINGS */
#toolbar {
    border: 1px solid #ddd;
    padding: 5px 10px;
}

.appMenu_toolbar .dx-toolbar-button .dx-button {
    border: 1px solid transparent;
}
         
/* fix field choser scrolling problem */
.dx-checkbox-container {
    display: table-cell;
}

/* align menu items with dropdown menu */
.dx-menu-item .dx-menu-item-content
{
	padding: 10px;
	height: 10px;
}

.dx-context-menu .dx-submenu {
    border-radius: 8px;
}

.dx-context-menu-container-border {
	border-radius: 4px;
}

/* ACTIVE DAYS */
.class-list_activeDays .dx-list-item-content
{
	padding-bottom: 5px;
	padding-left: 0px;
	padding-right: 0px;
	white-space: normal;
	font-size: 12px;
}

.activeDays_d
{
	border-bottom: 1px solid #ddd;
}

.activeDays_t
{
	font-size: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
}

.activeDays_table
{
	width: 100%;
	text-align: left;
	border-collapse: collapse;
}

th.activeDays_tableCell
{
	font-size: 10px;
	width: 33%;
}

td.activeDays_tableCell
{
	font-size: 12px;
	width: 33%;
}

.tbl_s
{
	width: 100%;
	text-align: left;
	border-collapse: collapse;
}

th.tblc-l
{
	text-align: left;
	font-size: 10px;
	width: 33%;
}

td.tblc-l
{
	
	text-align: left;
	font-size: 12px;
	width: 33%;
}

td.tblc-r
{
	text-align: right;
	font-size: 12px;
	width: 33%;
}

/* WIDGET HEADLINE */
.widget-headline > div {
    display: inline-flex;
}

.widget-headline {
    flex-grow: 0;
    font-size: 175%;
    font-weight: 300;
    opacity: 0.8;
    padding-top: 30px;
    padding-bottom: 10px;
}

.widget-sub-headline > div {
    display: inline-flex;
}

.widget-sub-headline {
    flex-grow: 0;
    font-size: 120%;
    font-weight: 600;
    opacity: 0.8;
    padding-top: 30px;
    padding-bottom: 10px;
}

.widget-help-content {
	width: 100%;
	height: 100%;
}

.badge {  
	background-color: #99cc33;
    border-radius: 10px;
    position: absolute;
    margin: -8px 0px 0px -7px;
    padding: 0px 5px;
    font-size: 100%;
} 




.options {
    padding: 10px;
    background-color: rgba(191, 191, 191, 0.15);
}

.option {
    height: 35px
}

.caption {
    font-size: 18px;
    font-weight: 500;
}

.option > span {
    margin-right: 10px;
}

.option > .dx-widget {
    display: inline-block;
    vertical-align: middle;
}


#accordion h1 {
    font-size: 18px;
   	font-weight: 400;
}

#accordion h1,
#accordion p {
    margin: 0;
}

.toolbar-label,
.toolbar-label > b {
    font-size: 16px;
}

.responsive-box-item{
	padding-right: 20px;
}

.appFooter {
    margin-top: 40px;
    margin-bottom: 40px;     
    border: 1px solid #ddd;
    padding: 5px 10px;
   	color: #333;
}