html, body {
    height: 100%;
}
body {
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: .9rem;
	line-height: 1.2rem;
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Roboto', serif;
	font-weight: 400;
	font-size: 1.2rem;
	line-height: 1.4rem;
	color: #446363;
}
h1, h2 {
	font-size: 1.2rem;
	line-height: 1.6rem;
	margin-bottom: 25px;
}
a {
	color: #446363;
	transition: color 0.3s linear; 
}
a:hover{
	color: #cc6633;
}
a.link-next{
	text-decoration: none !important;
	border-bottom: 1px dotted #446363;
}
a.link-next:hover{
	border-bottom-color: #cc6633;
}


.page-login{
	height: 100%;
	~background: #96c8c9;
	margin: 0;
	~background: linear-gradient(to bottom, #e2efed 0%, #e2efed 30%, #96c8c9 75%, #96c8c9 100%);
	background-color: #F2F4F6;
}
.login-top, .login-bottom{
	padding: 2rem;
}
.login-window{
	flex-direction: column;
}
.login-window .card{
	box-shadow: 1px 3px 6px rgba(0,0,0,.15);
	min-width: 400px;
	padding: 2rem;
	background: #fff url(/img/favicon.png?v2) no-repeat 3rem 2rem;
}
.login-window label{
	margin-top: 9px;
}
.login-window h2{
	margin-left: 88px;
}


.sidebar .nav-link {
	padding: 0.3rem 0.75rem;
}
.sidebar .nav-title .nav-link {
	color: #96c8c9;
	font-size: .8rem;
	font-weight: 600;
	text-shadow: 1px 1px 2px rgba(0,0,0,.5);
}
.sidebar .nav-item.active > .nav-link, .sidebar .nav-item .nav-link:hover {
	background-color: #446363;
}
.sidebar .nav-item.active .sidebar-icon, .sidebar .nav-item .nav-link:hover .sidebar-icon {
	color: #fff;
}

@media (min-width: 768px) {
    .sidebar {
        width: 100%;
        max-width: 276px;
    }
}
@media (min-width: 992px){
	.content {
	margin-left: 276px;
  }
}


.text-right {
	text-align: right;
}
.icon-fav{
	color: #ccc;
}
.icon-fav.active{
	color: #cc6633;
}

.materials-view .row>div{
	padding: .4rem .75rem;
}
.materials-view .row>div:first-child{
	color: #555;
	font-size: .85rem;
}
.materials-view a{
	text-decoration: underline;
}
.materials-view .row:nth-child(even){
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	background: #eee;
}
.materials-view .view-image-block{
	width: 120px;
	height: 160px;
	display: inline-grid;
	margin: 5px 15px 15px 0;		
}
.materials-view .view-image-title{
	font-size: 9px;
	line-height: 1.2;
	word-break: break-all;
}
.view-image{
	display: inline-block;
	margin: 5px 0px 5px 0;
	width: 120px;
	height: 120px;
	overflow: hidden;
	border-radius: 3px;
	background-size: cover;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	border: 3px solid #96c8c9;
}


.view-image-hover{
	display: inline-block;
	width: 120px;
	height: 120px; 
	background: #000;
	opacity: 0;
}
.view-image .icon{
	color: #fff;
	margin-top: 28px;
	margin-left: 28px;
}
.view-image:hover{
	border-color: #446363;
}

.view-image:hover .view-image-hover{
        opacity: 0.3;
}

.lightbox{
   z-index: 100000;
}


.btn-outline-info{
	color: #446363;
	border-color: #446363;
}
.btn-outline-info:hover{
	background-color: #446363;
	border-color: #446363;
}
.btn-outline-info:disabled{
	color: #446363;
	-webkit-animation: blink1 3s linear infinite;
	animation: blink1 3s linear infinite;
}


.modal-header{
	background: #eee;
	line-height: 1.2rem;
	padding: .7rem 1rem;
	margin: 1px;
}
.modal-header .close{
	padding: .8rem;
}
.modal-title{
	font-size: .85rem;
	margin: 0;
}
.modal-content {
	border-radius: 0;
	border: 7px solid rgba(255,255,255,.3);
}


.blur-content {
	-webkit-filter: blur(6px);
	-moz-filter: blur(6px);
	-o-filter: blur(6px);
	-ms-filter: blur(6px);
	filter: blur(6px);
}
.blur-message {
	width: 300px;
	font-size: 1rem;
	line-height: 1.4rem;
	text-align: center;
	position: fixed;
	z-index: 1000;
	top: 30%;
	left: 50%; 
	margin-left: -150px;
}

.btn-primary {
	background-color: #446363;
	border-color: #446363;
	text-shadow: 1px 1px 1px rgba(0,0,0,.6);
	box-shadow: 2px 2px 1px rgba(0,0,0,.15);
}
.btn-primary:hover {
	border-color: #237367;
	background: #48978b linear-gradient(to bottom, #288577 0%, #48978b 10%);
	box-shadow: none;
}
.page-item.active .page-link{
	background-color: #446363;
	border-color: #446363;
}
.page-link:hover {
	background-color: #96c8c9;
	border-color: #96c8c9;
}


.table td{
	white-space: normal !important;
}
.table td a{
	text-decoration: underline;
}

.filter{
	padding: 0;
	background: #96c8c9;
	border-radius: 7px;
	margin-bottom: .75rem;
	border: 1px solid #96c8c9;
}
.filter .badge-secondary{
	text-shadow: 1px 1px 1px 0 rgba(0,0,0,.5);
	background-color: rgba(0,0,0,.3);
	font-weight: 400;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	margin-left: 10px;
}
.filter .bs-actionsbox{
	text-align: center;
}
.filter .bs-actionsbox button{
	width: auto;
	font-size: .8rem;
	color: #fff;
	background-color: #96c8c9;
	padding: 0.25rem 0.5rem;
}
.filter .bs-actionsbox button:hover{
	background-color: #446363;
}
.filter .check-mark{
	top: 10px !important;
	right: 0 !important;
	color: #446363;
}
.filter .bootstrap-select .dropdown-menu li a{
	border-top: 1px solid #eee;
	padding: 0.35rem 0.8rem;
}

.form-control:focus, .btn-primary:focus, .btn-outline-info:focus {
	border-color: #7da1a0 !important;
	box-shadow: 0 0 0 0.2rem rgba(150, 200, 201, 0.4) !important;
}

.chart-legend{
	display: inline-block;
	text-align:center;
	margin-bottom: 1rem;
	line-height:1.5rem;
}
.chart-legend-title{
	white-space: nowrap;
}
.chart-marker{
	display: inline-block;
	width: 20px;
	height: 14px;
	background-color: #999;
	margin-left: 15px;
	margin-right: 7px;
	vertical-align: -0.07rem;
}
.inline-marker{
	display: inline-block;
	width: 0;
	height: 10px;
	background-color: #48978b;
}
.inline-marker-weninars{
	background-color: #f66d00;
}
.chart-date{
	font-size: 90%;
	font-weight: bold;
	text-align:center;
	margin-bottom: 1rem;
}
.arrow-up{
	font-weight: 1000;
	color: green;
}
.arrow-down{
	font-weight: 800;
	color: red;
}
.table-weekly .thead-light th.rounded-start{
	border-bottom-left-radius: 0 !important;
}
.table-weekly .thead-light th.rounded-end{
	border-bottom-right-radius: 0 !important;
}

div#wcLabel {cursor: pointer; pointer-events: auto !important;}

.period-switch{
	align-self:flex-end;
	margin-bottom:0.5rem;
}
.period-switch .btn{
	border: 2px solid #f0bc74;
}
td.operations a.nav-link{
	display: inline-block;
	padding: 0px;
	width: 20px;
	color: #446363;
}
.footnote {
	font-size: 8px;
	font-style: italic;
	color: #202020;
	line-height: 1.5;
}
.footnote_brend{
	font-size: 8px;
	font-style: italic;
	color: #202020;
	margin: 0 20px 20px 25px;
	line-height: 1.5;
}

.modal-content .materials-view  .footnote_brend{
	margin: 20px 0 0 0;
}

.materials-view  .footnote_brend{
	margin: 10px 0 0 25px;
}

.periodicity .footnote_brend{
	margin: 0 20px 20px 0;
}

 .card .table tr td.mnn-title a {
        word-break: break-word;
 }
.card .table td, .card .table th {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
  }
.modal-body.material_view {
	padding-top: 0.5rem;
}

.card .table th {
	padding-left: 1.5rem;
	padding-right: 0.2rem;
}

.periodicity.card .table th {
	padding-left: 0.5rem;
	padding-right: 0.2rem;
}

.order_top a.btn {
	color: #1F2937;
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 8px;
	padding-right: 8px;
	font-size: 0.75rem;
	text-transform: uppercase;
	font-weight: 600;
}

.order_top a.btn:hover {
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 7px;
	padding-right: 7px;
	border: 2px solid #f0bc74;
}

tr td.bottom_sum_text{
	font-weight: 700;
}

.title_canvas{
	text-align: center;
}

.period-switch.check-periodicity label {
	font-weight: 700;
}


@media (max-width: 1320px) {
	.col-12.periodicity-table {
		flex: 0 0 auto;
		width: 100%;
    }
	.col-12.periodicity-graph {
		flex: 0 0 auto;
		width: 100%;
    }
}

.periodicity-table .card .table th.col-num2 {
	padding-left: 1.5rem;
}
.periodicity-table .table th.col-num1 {
	padding-left: 1.5rem;
}
@media (max-width: 1600px) {

	.periodicity-table .card .table td {
		padding-left: 0.2rem;
		padding-right: 0.2rem;
	}
	.periodicity-table .card .table th {
		padding-left: 0rem;
		padding-right: 0rem;
	}
	.periodicity-table .card .table th.col-num2 {
		padding-left: 0rem;
	}
	.periodicity-table .table th.col-num1 {
		padding-left: 0rem;
	}

	.periodicity-table .table .order_top a.btn {
		padding-left: 1px;
	}
}

@media (max-width: 1320px) {
	.col-12.periodicity-table {
		flex: 0 0 auto;
		width: 100%;
    }
	.col-12.periodicity-graph {
		flex: 0 0 auto;
		width: 100%;
    }
	.periodicity-table .card .table td {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
	.periodicity-table .card .table th {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
	.periodicity-table .card .table th.col-num2 {
		padding-left: 1.5rem;
	}
	.periodicity-table .table th.col-num1 {
		padding-left: 1.5rem;
	}

	.periodicity-table .table .order_top a.btn {
		padding-left: 8px;
	}
}

@media (max-width: 780px) {

	.periodicity-table .card .table td {
		padding-left: 0.2rem;
		padding-right: 0.2rem;
	}
	.periodicity-table .card .table th {
		padding-left: 0rem;
		padding-right: 0rem;
	}
	.periodicity-table .card .table th.col-num2 {
		padding-left: 0rem;
	}
	.periodicity-table .table th.col-num1 {
		padding-left: 0rem;
	}

	.periodicity-table .table .order_top a.btn {
		padding-left: 1px;
	}
}