.bll-1 {
	display: flex;
	height: 58px;
	margin-bottom: 50px;
	justify-content: space-between;
	flex-wrap: wrap;
}
.bll-1 > div {
	display: flex;
	height: 100%;
}
.bll-1 .one.active{
	font-size: 2.5rem;
	font-family:var(--global--font-extrabold);
	width: 150px;
	display: flex;
    align-items: center;
    border: 0;
    border: 1px solid var(--global--color-green);
    color: var(--global--color-green);
}
.bll-1 .one:hover {
	border: 1px solid var(--global--color-green);
}
h2.catalog-h2 {
	font-size: 3.125rem;
	font-family: var(--global--font-light);
	font-weight: 400;
	margin: 20px 0;
	text-transform: none;
}
.bll-1 .one{
	font-size: 1.981rem;
	font-family:var(--global--font-bold);
	height: 100%;
	display: flex;
	align-items: center;
	width: 135px;
	border: 2px solid var(--global--color-gray);
	justify-content: center;
	margin-right: -1px;
	transition: .3s;
	cursor: pointer;
}
.bll-1 .one span {
	opacity: 0.49;
}
.bll-1 .one.active span {
	opacity: 1;
}
.chart {
	width: 1115px;
	height: 400px;
	border-left: 1px solid #cbd0cf;
	border-bottom: 1px solid #cbd0cf;
	background: linear-gradient( #4f5357, transparent 3px ), linear-gradient( 
90deg
, transparent, transparent 3px );
    background-size: 100px 100px;
    background-position: left bottom;
}
.legend-bot {
	display: flex;
    justify-content: space-between;
    max-width: 1115px;
    font-size: 2.063rem;
    font-family:var(--global--font-light);
}
.graf{
	display: flex;
}
.legend-left {
	padding-bottom: 66px;
	display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.legend-left .vls {
	flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.legend-left span{
	font-size: 2.063rem;
    font-family:var(--global--font-light);
    width: 155px;
    padding: 5px;
    display: block;
    line-height: 1;
    height: 75px;
}
.legend-left .mid {
	padding: 0;
	color: var(--global--color-green);
	font-family:var(--global--font-bold);
	height: 100px;
    display: flex;
}
table.table td{
	border-color: var(--global--color-gray);
	text-align: center;
    font-size: 1.613rem;
    line-height: 1.3;
	
}
table.table .head td {
	color: var(--global--color-green);
	font-size: 1.5rem;
	font-family:var(--global--font-extrabold);
}
.date {
	border: 1px solid var(--global--color-gray);
	color: #ffffff80;
	padding: 0 25px;
	display: flex;
	align-items: center;
	font-family:var(--global--font-light);
	display: inline-block;
	font-size: 1.438rem
}
.date input {
	background: transparent;
	border: 0!important;
	width: 197px;
}
.gr-bl {
	text-align: right;
	position: relative;
}
.over {
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	height: 400px;
	display: flex;
	justify-content: space-between;
}
.col-val {
	height: 0;
	position: relative;
	transition: .3s;
	cursor: pointer;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.col-val .point {
	position: absolute;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: white;
	left: calc(50% + 2px);
	border: 1px solid white;
}
.col-val:hover .point .info {
	opacity: 1;
}
.col-val .point .info {
	position: absolute;
	color: white;
	font-size: 1rem;
    width:0;
    text-align: left;
    left: 7px;
	opacity: 0;
}
.col-val .point.pd-point .info {
	bottom: 3px;
}
.col-val .point .info span {
	color: var(--global--color-green);
	font-family:var(--global--font-bold);
	display: block;
	font-size: 1.5rem;
    line-height: 1;
}
.side .point {
	left: -2px;
}
.col-val + .side .point {
	left: auto;
	right: -2px;
}
.monthes {
	display: flex;
	margin-bottom: 20px;
	overflow-y: auto;
    max-width: 100%;
    padding-bottom: 10px;
}
.monthes div{
	font-size: 1.881rem;
	height: 100%;
	display: flex;
	align-items: center;
    width: 232px;
    min-width: 232px;
    white-space: nowrap;
	border: 2px solid var(--global--color-gray);
	justify-content: center;
	margin-right: -1px;
	transition: .3s;
	cursor: pointer;
	margin-right: 10px;
	transition: .3s;
}
.monthes div:hover,
.monthes .days-30,
.monthes .act {
	color: var(--global--color-green);
	border: 2px solid var(--global--color-green);
}
.out-table {
	max-height: 600px;
	overflow-y: auto;
	position: relative;
	display: block;
}
.out-table .head {
	position: sticky;
    top: -2px;
}
.table .green {
	color: var(--global--color-green);
}
.table .values:first-of-type {
	display: none!important;
}
::-webkit-calendar-picker-indicator {
  color: var(--global--color-green);
  opacity: 1;
  background: url(../images/calendar_g.png) no-repeat center;
  background-size: contain;
}
.table .values:nth-of-type(2) {
	background-color: #02814e;
	font-family:var(--global--font-extrabold);
}
.table .values:nth-of-type(2) td {
	font-size: 1.813rem;
}
.finger {
    position: absolute;
    color: var(--global--color-green);
    display: flex;
    width: 100%;
    justify-content: center;
    font-family: var(--global--font-semibold);
    top: 10px;
    align-items: center;
        opacity: .5;
}
.finger img {
	width: 24px;
  margin-left: 10px;
}
@media screen and (max-width: 1360px) {
	.legend-left span {
		font-size: 1.1rem;
		width: 90px;
   		height: 67px;
	}
	.legend-left .mid
	 {
	 	height: 58px;
	 }
	 .chart {
	 	width: 610px;
    	height: 328px;
    	background-size: 54px 54px;
	 }
	 .legend-bot {
	 	font-size: 1.2rem;
	 }
	 .date {
	 	font-size: 1.1rem;
	 	margin-top: 15px;
	 }
	 .bll-1 {
	 	margin-bottom: 20px;
	 	height: auto;
	 }
	 .date input {
	 	width: 155px;
	 }
	 .bll-1 > div {
	 	height: 51px;
	 }
}
@media screen and (max-width: 768px) {
	.legend-left span {
		width: 55px;
    	height: 42px;
	}
	.legend-left .mid
	 {
	 	height: 32px;
	 }
	 .bll-1 > div {
	 	height: 40px;
 	    width: 100%;
	 }
	.bll-1 > div > .one:first-child {
		display: none;
	}
	.chart {
	    width: 375px;
	    height: 202px;
	    background-size: 33px 33px;
	}
	.date input {
		width: 124px;
	}
	.date span:first-of-type{
		display: block;
	    width: 100%;
	    text-align: center;
	}
	h2.catalog-h2 {
		font-size: 1.4rem!important;
		margin: 15px 0!important;
	}
	.over {
		height: 200px;
	}
}
@media screen and (max-width: 460px) {
	.chart {
	    width: 242px;
	    height: 130px;
	    background-size: 21px 21px;
	}
	.legend-left span {
		height: 27px;
	}
	.legend-left .mid
	 {
	 	height: 20px;
	 }
	 table.table td {
	 	font-size: 1.1rem;
	 	line-height: 1;
	 }
	 .bll-1 .one {
	 	font-size: 1.1rem;
	 }
	 .bll-1 .one.active {
	 	font-size: 1.2rem;
	 }
	 .bll-1 {
	    display: flex;
	}
	.date input {
	    width: 94px;
	    font-size: 0.9rem;
	    padding-left: 0!important;
	    padding-right: 0!important;
	}
	.date {
	    padding: 0 10px;
	}
	.monthes div {
	    font-size: 1.1rem;
	    width: 70px;
    	min-width: 70px;
	}
	.out-table {
	    max-height: 60vh;
	}
	.table .values:nth-of-type(2) td {
		font-size: 1.313rem;
	}
	table.table .head td {
		font-size: 1.0rem;
    	padding: 5px 0;
	}
}