/*@import url('https://fonts.googleapis.com/css?family=Oswald:300,700&subset=cyrillic');*/
/* start font */

/* cyrillic */
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 300;
    src: local('Oswald Light'), local('Oswald-Light'), url(../fonts/TK3hWkUHHAIjg75-sh0Tvs9CE5Q.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 300;
    src: local('Oswald Light'), local('Oswald-Light'), url(../fonts/TK3hWkUHHAIjg75-sh0Ttc9CE5Q.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 300;
    src: local('Oswald Light'), local('Oswald-Light'), url(../fonts/TK3hWkUHHAIjg75-sh0TtM9CE5Q.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 300;
    src: local('Oswald Light'), local('Oswald-Light'), url(../fonts/TK3hWkUHHAIjg75-sh0Tus9C.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    src: local('Oswald Bold'), local('Oswald-Bold'), url(../fonts/TK3hWkUHHAIjg75-ohoTvs9CE5Q.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    src: local('Oswald Bold'), local('Oswald-Bold'), url(../fonts/TK3hWkUHHAIjg75-ohoTtc9CE5Q.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    src: local('Oswald Bold'), local('Oswald-Bold'), url(../fonts/TK3hWkUHHAIjg75-ohoTtM9CE5Q.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    src: local('Oswald Bold'), local('Oswald-Bold'), url(../fonts/TK3hWkUHHAIjg75-ohoTus9C.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* finish font */
/* start loading style */
#floatingBarsG{
	position:relative;
	width:29px;
	height:37px;
	margin:auto;
}

.blockG{
	position:absolute;
	background-color:rgb(255,255,255);
	width:5px;
	height:11px;
	border-radius:4px 4px 0 0;
		-o-border-radius:4px 4px 0 0;
		-ms-border-radius:4px 4px 0 0;
		-webkit-border-radius:4px 4px 0 0;
		-moz-border-radius:4px 4px 0 0;
	transform:scale(0.4);
		-o-transform:scale(0.4);
		-ms-transform:scale(0.4);
		-webkit-transform:scale(0.4);
		-moz-transform:scale(0.4);
	animation-name:fadeG;
		-o-animation-name:fadeG;
		-ms-animation-name:fadeG;
		-webkit-animation-name:fadeG;
		-moz-animation-name:fadeG;
	animation-duration:0.622s;
		-o-animation-duration:0.622s;
		-ms-animation-duration:0.622s;
		-webkit-animation-duration:0.622s;
		-moz-animation-duration:0.622s;
	animation-iteration-count:infinite;
		-o-animation-iteration-count:infinite;
		-ms-animation-iteration-count:infinite;
		-webkit-animation-iteration-count:infinite;
		-moz-animation-iteration-count:infinite;
	animation-direction:normal;
		-o-animation-direction:normal;
		-ms-animation-direction:normal;
		-webkit-animation-direction:normal;
		-moz-animation-direction:normal;
}

#rotateG_01{
	left:0;
	top:13px;
	animation-delay:0.2295s;
		-o-animation-delay:0.2295s;
		-ms-animation-delay:0.2295s;
		-webkit-animation-delay:0.2295s;
		-moz-animation-delay:0.2295s;
	transform:rotate(-90deg);
		-o-transform:rotate(-90deg);
		-ms-transform:rotate(-90deg);
		-webkit-transform:rotate(-90deg);
		-moz-transform:rotate(-90deg);
}

#rotateG_02{
	left:4px;
	top:5px;
	animation-delay:0.316s;
		-o-animation-delay:0.316s;
		-ms-animation-delay:0.316s;
		-webkit-animation-delay:0.316s;
		-moz-animation-delay:0.316s;
	transform:rotate(-45deg);
		-o-transform:rotate(-45deg);
		-ms-transform:rotate(-45deg);
		-webkit-transform:rotate(-45deg);
		-moz-transform:rotate(-45deg);
}

#rotateG_03{
	left:12px;
	top:1px;
	animation-delay:0.3925s;
		-o-animation-delay:0.3925s;
		-ms-animation-delay:0.3925s;
		-webkit-animation-delay:0.3925s;
		-moz-animation-delay:0.3925s;
	transform:rotate(0deg);
		-o-transform:rotate(0deg);
		-ms-transform:rotate(0deg);
		-webkit-transform:rotate(0deg);
		-moz-transform:rotate(0deg);
}

#rotateG_04{
	right:4px;
	top:5px;
	animation-delay:0.469s;
		-o-animation-delay:0.469s;
		-ms-animation-delay:0.469s;
		-webkit-animation-delay:0.469s;
		-moz-animation-delay:0.469s;
	transform:rotate(45deg);
		-o-transform:rotate(45deg);
		-ms-transform:rotate(45deg);
		-webkit-transform:rotate(45deg);
		-moz-transform:rotate(45deg);
}

#rotateG_05{
	right:0;
	top:13px;
	animation-delay:0.5455s;
		-o-animation-delay:0.5455s;
		-ms-animation-delay:0.5455s;
		-webkit-animation-delay:0.5455s;
		-moz-animation-delay:0.5455s;
	transform:rotate(90deg);
		-o-transform:rotate(90deg);
		-ms-transform:rotate(90deg);
		-webkit-transform:rotate(90deg);
		-moz-transform:rotate(90deg);
}

#rotateG_06{
	right:4px;
	bottom:3px;
	animation-delay:0.622s;
		-o-animation-delay:0.622s;
		-ms-animation-delay:0.622s;
		-webkit-animation-delay:0.622s;
		-moz-animation-delay:0.622s;
	transform:rotate(135deg);
		-o-transform:rotate(135deg);
		-ms-transform:rotate(135deg);
		-webkit-transform:rotate(135deg);
		-moz-transform:rotate(135deg);
}

#rotateG_07{
	bottom:0;
	left:12px;
	animation-delay:0.6985s;
		-o-animation-delay:0.6985s;
		-ms-animation-delay:0.6985s;
		-webkit-animation-delay:0.6985s;
		-moz-animation-delay:0.6985s;
	transform:rotate(180deg);
		-o-transform:rotate(180deg);
		-ms-transform:rotate(180deg);
		-webkit-transform:rotate(180deg);
		-moz-transform:rotate(180deg);
}

#rotateG_08{
	left:4px;
	bottom:3px;
	animation-delay:0.775s;
		-o-animation-delay:0.775s;
		-ms-animation-delay:0.775s;
		-webkit-animation-delay:0.775s;
		-moz-animation-delay:0.775s;
	transform:rotate(-135deg);
		-o-transform:rotate(-135deg);
		-ms-transform:rotate(-135deg);
		-webkit-transform:rotate(-135deg);
		-moz-transform:rotate(-135deg);
}



@keyframes fadeG{
	0%{
		background-color:rgba(0,0,0,0.46);
	}

	100%{
		background-color:rgb(255,255,255);
	}
}

@-o-keyframes fadeG{
	0%{
		background-color:rgba(0,0,0,0.46);
	}

	100%{
		background-color:rgb(255,255,255);
	}
}

@-ms-keyframes fadeG{
	0%{
		background-color:rgba(0,0,0,0.46);
	}

	100%{
		background-color:rgb(255,255,255);
	}
}

@-webkit-keyframes fadeG{
	0%{
		background-color:rgba(0,0,0,0.46);
	}

	100%{
		background-color:rgb(255,255,255);
	}
}

@-moz-keyframes fadeG{
	0%{
		background-color:rgba(0,0,0,0.46);
	}

	100%{
		background-color:rgb(255,255,255);
	}
}

.table-data {
    text-align: center;
}

.table-data tr td {
    padding: 5px;
}

/* end loading style */

html,
body {
    height: 100%;
    font-family: 'Oswald', sans-serif;
}

#changeChart {
    margin-left: 5px;
    margin-right: 5px;
}

#reloadChart:hover, #changeChart:hover {
    color: #0099FF;
    cursor: pointer;
}

.active {
    color: #0099FF;
}

/* #sort {
    color: #0099FF;
}

#sort:hover {
    cursor: pointer;
    background: #0099FF;
    color: white;
} */

#footer_main {
    float: left;
    width: 100%;
    text-align: center;
    /* margin-bottom: 20px; */
}

#loading {
    position: fixed;
    top:0;
    left:0;
    opacity: 1;
    z-index: 99999;
    height: 100%;
    width: 100%;
    background: white;
    padding: 15%;
    font-size: 50px;
    background-image: url('../web/images/header.jpg');
    background-size: cover;
    background-position: center;
}

header {

    height: 50px;
    width: 100%;

}

/*
    top: 0;
    top: 50px;
    background-color: #0d1e2e;
    color: white;
    padding: 0;
    position: fixed;
    width: 25%;
    background-image: url(../../web/images/gerb.png);
    height: 100%;
    padding: 50px; 
    background-repeat: no-repeat;
    top: 0; 
    background-position: 50% 90%;
    background-size: 75%;
    position: absolute; 
    overflow: auto;
    background-origin: content-box; 
*/

/* header { 
    position: relative;
    height: 100%;
    width: 100%;
    background: white;
    padding: 15% 5%;
    font-size: 50px;
    background-image: url('../web/images/header.jpg');
    background-size: cover;
    background-position: center;
} */

#loading_chart {
    background-color: white;
    position: absolute;
    z-index: 99;
    width: 150px;
    height: auto;
    font-size: 15px;
    display: flex;
    /* top: 125px; */
}

.chart > .panel > .panel-body {
    min-height: 75px;
}

#loading_chart > #title {
    padding: 15px;
    color: black;
}

#loading > #loading_item {
    position: absolute;
    top: 25px;
    left: 35px;
    font-size: 15px;
    display: flex;
}

#loading > #loading_item > #title {
    padding: 15px;
    color: white;
}

#export_from_table > button {
    background: none;
    border: none;
    font-size: 15px;
    color: black;
    padding: 10px;
}

#export_from_table > button:hover {
    cursor: pointer;
    background-color: #EEE;
}

#scroll {
    /* background-color: #0d1e2e; */
    color: white;
    padding: 0;
    left: 0;
    top: 57px;
    height: auto;
    position: fixed;
    z-index: 9; 
    /* box-shadow: 2.5px 0px 10px rgba(33, 33, 56, 0.5); */
    /* top:0; */
    overflow: none;
    width: 25px;
}

#scroll > button {
    background: #0d1e2e;
    border:0;
    display: none;
    width: 100%;
    outline: none;
    border-radius: 0 5px 5px 0;
    box-shadow: 2.5px 0px 10px rgba(33, 33, 56, 0.5);
    padding: 15px 7.5px 15px 5px;
}

#scroll > button > #text {
    float: left;
}
/* #scroll > button > i { */
    /* width: 0; */
/* } */

.chart {
    position: absolute;
    right: 0;
    width: 75%;
    padding:0;
    height: calc(100% - 50px);
    background-color: #EEE;
}


.main_left_index {
    /* top: 0; */
    top: 50px;
    background-color: #0d1e2e;
    color: white;
    padding: 0;
    position: fixed;
    width: 25%;
    height: calc(100% - 50px);
    /* position: absolute; */
    z-index: 999; 
    box-shadow: 2.5px 0px 10px rgba(33, 33, 56, 0.5);
    /* top:0; */
    /* position: absolute; */
    overflow: auto;
}

.main_left_index::-webkit-scrollbar {
    display: none;
}

/* .main_left_index:hover{
} */

.main_left_index > #loading {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 50%;
}

.main_left_index > #header {
    background-color: #081624;
    height: auto;
}

.main_left_index > #header > #title {
    width:calc(100% - 27px);
    padding: 6.25px;
    float: left;
    white-space: nowrap;
}

.main_left_index > #header > button {
    background: #030a11;
    border:0;
    outline: none;
    border-radius: 0;
    box-shadow: 0px 0px 0px rgba(33, 33, 56, 0.5);
    padding: 6.25px;
}

.main_left_index > #items {
    padding-top: 0;
}

.main_left_index > #items > .item {
    /* padding: 6.25px; */
    /* width: 100%; */
    height: auto;
    float: left;
    width: 100%;
    align-items: center;
    /* text-align: left; */
    background-color: #01579B;
    border-bottom: 1px solid #0d1e2e;
    box-shadow: 0 3px 3px rgba(0,0,0,0.5);
}

.main_left_index > #items > .item:hover {
    background-color: #0277BD;
    cursor: pointer;
}


.main_left_index > #items > .item > .text {
    padding: 6.25px;
    /* justify */
    width: calc(100% - 27.5px);
    text-align: left;
    float: left;
}

.main_left_index > #items > .item > .main {
    /* background: #030a11;
    border:0; */
    /* outline: none; */
    /* max-width:50px; */
    border-radius: 0;
    box-shadow: 0px 0px 0px rgba(33, 33, 56, 0.5);
    padding: 5px 0 0 0;
}

.main_left_index > #items > .item > .main > img {
    margin: 0 6.25px 6.25px 6.25px;
    float: left;
}

#table {
    max-width: 100%;
    max-height: 100%;
    margin-bottom: 75px;
}

/* .main_left_index > #items > #item > #boards {
    float: left;
} */

.main_left_index > #items > .item > #boards > #border-parent {
    background-color: #01579B;
    /* padding: 5px; */
    height: 100%;
    padding: 6.25px 0 6.25px 0;
    float: left;
    width: 7.5px;
}

.breadcrumb_new {
    min-height: 36px;
    padding: 0;
    margin:0;
    line-height: 36px;
    list-style: none;
    background-color: #0277BD
}
.breadcrumb_new li:first-child a {
    border-radius: 4px 0 0 4px;
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px
}
.breadcrumb_new li, .breadcrumb_new li a, .breadcrumb_new li span {
    display: inline-block;
    vertical-align: top
}
.breadcrumb_new li:not(:first-child) {
    margin-left: -5px
}
.breadcrumb_new li+li:before {
    padding: 0;
    content: ""
}
.breadcrumb_new li span {
    padding: 0 10px
}
.breadcrumb_new li a, .breadcrumb_new li:not(:first-child) span {
    height: 36px;
    padding: 0 10px 0 25px;
    line-height: 36px
}
.breadcrumb_new li:first-child a {
    padding: 0 10px
}
.breadcrumb_new li a {
    position: relative;
    color: #B3E5FC;
    transition: .5s;
    text-decoration: none;
    background-color: #039BE5;
    border: 1px solid #039BE5
}
.breadcrumb_new li:first-child a {
    padding-left: 10px
}
.breadcrumb_new li a:after, .breadcrumb_new li a:before {
    position: absolute;
    top: -1px;
    width: 0;
    transition: .5s;
    height: 0;
    content: '';
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent
}
.breadcrumb_new li a:before {
    right: -10px;
    z-index: 3;
    border-left-color: #039BE5;
    border-left-style: solid;
    border-left-width: 11px
}
.breadcrumb_new li a:after {
    right: -11px;
    z-index: 2;
    border-left: 11px solid #01579B
}
.breadcrumb_new li a:focus, .breadcrumb_new li a:hover {
    color: #B2DFDB;
    background-color: #03A9F4;
    border: 1px solid #03A9F4
}
.breadcrumb_new li a:focus:before, .breadcrumb_new li a:hover:before {
    border-left-color: #03A9F4
}
.breadcrumb_new li a:active {
    background-color: #03A9F4;
    border: 1px solid #03A9F4
}
.breadcrumb_new li a:active:after, .breadcrumb_new li a:active:before {
    border-left-color: #03A9F4
}
.breadcrumb_new li span {
    color: #434a54
}

.wrap {
    min-height: calc(100% - 50px);
    height: auto;
    margin: 0 auto -60px;
    padding: 0 0 60px;
}

.wrap > .container {
    padding: 70px 15px 20px;
}

.footer {
    height: 60px;
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    padding-top: 20px;
}

.jumbotron {
    text-align: center;
    background-color: transparent;
}

.jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-left: 5px;
}

a.asc:after {
    content: /*"\e113"*/ "\e151";
}

a.desc:after {
    content: /*"\e114"*/ "\e152";
}

.sort-numerical a.asc:after {
    content: "\e153";
}

.sort-numerical a.desc:after {
    content: "\e154";
}

.sort-ordinal a.asc:after {
    content: "\e155";
}

.sort-ordinal a.desc:after {
    content: "\e156";
}

.grid-view th {
    white-space: nowrap;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* align the logout "link" (button in form) of the navbar */
.nav li > form > button.logout {
    padding: 15px;
    border: none;
}

@media(max-width:767px) {

    #export_from_table {
        width: 100%;
        text-align: center;
        padding: 10px;
    }

    #loading_chart {
        top: 200px;
    }

    #table > h3 {
        text-align: center;
    }

    .main_left_index > #header {
        background-color: #081624;
        display: flex;
        justify-content: space-between;
    }
    
    .main_left_index > #header > #title {
        /* width:calc(100% - 50px); */
        padding: 10px;
        /* float: left; */
    }
    
    .main_left_index > #header > button {
        background: #030a11;
        border:0;
        outline: none;
        border-radius: 0;
        box-shadow: 0px 0px 0px rgba(33, 33, 56, 0.5);
        padding: 10px;
    }

    .main_left_index {
        position: fixed;
        top: 0;
        display: none;
        width: 100%;
        height: 100%;
    }

    .chart {
        width: 100%;
    }
    
    #filter {
        padding-bottom: 12.5px;
        min-height: 150px;
    }

    .filter_select {
        margin-bottom: 12.5px !important;
    }
    
    .nav li > form > button.logout {
        display:block;
        text-align: left;
        width: 100%;
        padding: 10px 15px;
    }

}

.nav > li > form > button.logout:focus,
.nav > li > form > button.logout:hover {
    text-decoration: none;
}

.nav > li > form > button.logout:focus {
    outline: none;
}