/* Generic */

body {
	background-color: #edeff0;
	font-family: 'Nunito Sans', sans-serif;
}

.content {
	margin-top: 24px;
}

.content-start {
	margin-top: 48px;
}

a {
    color: #e63f13;
    outline: none;
    text-decoration: none;
}

a:focus,
a:hover,
a:active {
    color: #913f13;
    outline: none;
}

a.disabled,
a.disabled:focus,
a.disabled:hover,
a.disabled:active {
    color: #ddd;
}

/* Forms */

input[type="text"] {
    box-sizing: border-box;
}

input[type="checkbox"] {
    margin-right: 8px;
}

/* Margins */

.m-t-8 { margin-top: 8px; }
.m-t-16 { margin-top: 16px; }

/* Header */

.header {
	background-color: white;
	border-bottom: 1px solid #dfe1e0;
	border-top: 3px solid #e63f13;
	color: #4c5255;
	font-family: 'Hind Guntur', sans-serif;
	font-weight: 600;
	height: 72px;
}

.mobile-nav { display: none;}

@media screen and (max-width: 1096px) {
    .header {
        display: none;
    }

    .mobile-nav {
        display: flex;
    }

    body {
        padding-bottom: 80px;
    }
}

.header-navigation {
	display: flex;
}

.header-item {
	align-items: center;
	color: #a1a5a8;
	display: flex;
	height: 72px;
	margin-left: 24px;
	margin-right: 24px;
	padding-left: 2px;
	padding-right: 2px;
	padding-top: 2px;
	text-decoration: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.header-item:first-of-type {
	margin-left: 0;
}

.header-item:last-of-type {
	margin-right: 0;
}

.header-item:hover {
	color: #5d5e60;
}

.header-item-icon {
	margin-right: 12px;
	margin-top: -5px;
}

.header-item-icondropdown {
	margin-left: 12px;
	margin-top: -5px;
}

.header-dropdown {
	background-color: white;
	border-radius: 3px;
	border: 1px solid #e1e1e1;
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
	color: #a1a5a8;
	display: none;
	font-size: 11pt;
	margin-top: 68px;
	padding: 10px 64px 4px 24px;
	position: absolute;
}

.header-item:hover > .header-dropdown {
	display: block;
}

.header-dropdown-item {
	margin-bottom: 4px;
	margin-top: 4px;
}

.header-dropdown-item:hover {
	color: #5d5e60;
}

/* Pagetitle */

.pagetitle {
	align-items: center;
	background-color: white;
	border-bottom: 1px solid #dfe1e0;
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
	color: #1a9fda;
	cursor: default;
	display: flex;
	font-family: 'Cairo', sans-serif;
	font-size: 18pt;
	height: 72px;
	padding-left: 32px;
	padding-right: 32px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.pagetitle > .container {
    line-height: 2;
}

.pagetitle-text {
    margin-top: -5px;
	white-space: nowrap;
}

.pagetitle-arrow {
	color: #bbb;
	font-size: 10pt !important;
	margin-left: 16px;
	margin-right: 14px;
	margin-top: 13px;
}

/* Panel */

.panel {
	background-color: white;
	border-radius: 3px;
	border: 1px solid #dbe0e4;
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
	font-size: 16px;
	line-height: 1.5;
	padding: 18px 24px 18px 24px;
}

.panel > *:nth-of-type(2) {
    margin-top: 12px;
}

.panel > *:last-of-type {
    margin-bottom: 4px;
}

.panel-title {
	color: #e63f13;
    font-family: 'Cairo', sans-serif;
	font-size: 18pt;
    margin-top: 0px;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
}

/* Status Panel */

.status-panel {
	padding-bottom: 8px;
}

.status-panel-title {
	color: #aaa;
	text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
}

.status-panel-value {
	color: #555;
	font-family: 'Roboto', sans-serif;
	font-size: 28pt;
	font-weight: 600;
	margin-left: -3px;
	margin-top: 0px;
}

.status-panel-icon {
	color: #aaa;
	font-size: 42pt;
}

/* Button Panel */

.button-panel {
	padding: 22px 24px 19px 24px;
    text-decoration: none;
}

.button-panel-chevron {
	color: #555;
	margin-top: 4px;
}

.button-panel:hover {
	background: linear-gradient(#e63f13, #c63812);
	color: white;
	cursor: pointer;
}

.button-panel-title {
	color: #555;
	font-size: 16pt;
	text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
}

.button-panel:hover > .button-panel-title,
.button-panel:hover > .button-panel-chevron {
	color: white;
}

.button-panel-text {
    line-height: 50px;
}

/* Buttons */

.button-primary {
	background: linear-gradient(#e63f13, #c63812);
	border-radius: 3px;
	border: 1px solid #e63f13;
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
	color: white;
	cursor: pointer;
	display: inline-block;
	font-family: 'Roboto', sans-serif;
	font-size: 11pt;
	padding: 16px 28px 14px 28px;
}

.button-small {
	border-radius: 1px !important;
	padding: 6px 14px 4px 14px !important;
}

.button-primary:focus {
    outline: 0;
}

.button-secondary {
	border-radius: 3px;
	color: #e63f13;
	cursor: pointer;
	display: inline-block;
	font-family: 'Roboto', sans-serif;
	font-size: 11pt;
	margin-right: 12px;
	padding: 18px 28px 14px 28px;
	text-decoration: none;
}


.button-secondary:hover {
	background-color: #f1f1f1;
}

.button-file {
    border-radius: 3px;
    color: #e63f13;
    cursor: pointer;
    display: inline-block;
    font-family: 'Roboto', sans-serif;
    font-size: 11pt;
    padding: 18px 28px 14px 28px;
    text-decoration: none;
}

.button-icon {
    margin-right: 8px;
}

.button-file:hover {
    background-color: #f1f1f1;
}

.button-disabled {
    background: #f1f1f1;
    border-style: none;
    color: #ddd;
}

.button-inline {
    background-color: #f1f1f1;
}

.button-group {
    margin-top: 32px;
}

/* Footer */

.footer {
	color: #b0b0b0;
	margin-top: 48px;
	text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
}

/* Dialogs */

.dialog-title {
    color: #1a9fda;
    font-size: 23pt;
    margin-top: 96px;
    text-align: center;
}

.dialog-container {
    margin-top: 24px;
}

.dialog-label {
    color: #111;
}

.dialog-input {
    box-sizing: border-box;
    margin-bottom: 16px;
    width: 100%;
}

/* Snippets */

.help-block {
    background-color: #f1f1f1;
    border-radius: 3px;
    color: #e63f13;
    display: block;
    margin-bottom: 14px;
    margin-top: 6px;
    padding: 12px 14px 12px 14px;
}

/* Subarticle Box */

.subarticle-box > h3 {
	margin-left: 16px;
	color: #444;
}

.subarticle-box > ul {
	list-style-type:none;
}

.subarticle-box > ul > li > a{
	color: #1a9fda;
}

.subarticle-box {
	border-radius: 4px;
	padding: 10px 10px 10px 10px;
	margin-left: 15px;
	margin-right: 20px;
	margin-top: 10px;
	border: 1px solid #333;
	background-color: #eee;
}

/* Charts */
#chart-box {
	min-height: 300px;
	padding-left: 20px;
	padding-right: 20px;
}

/* Tables */

.table {
    width: 100%;
}

.table > thead > tr > th {
    text-align: left;
}