/*-------------- grad-graf -----------------*/
.grad-graf{
	display: inline-block;
	vertical-align: middle;
	padding: 30px 35px 0;

	&__content{
		width: 240px;
		height: 15px;
		background: rgba(0,255,255,1);
		background: -moz-linear-gradient(left, rgba(0,255,255,1) 0%, rgba(38,225,122,1) 19%, rgba(255,255,0,1) 53%, rgba(255,0,0,1) 100%);
		background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,255,255,1)), color-stop(19%, rgba(38,225,122,1)), color-stop(53%, rgba(255,255,0,1)), color-stop(100%, rgba(255,0,0,1)));
		background: -webkit-linear-gradient(left, rgba(0,255,255,1) 0%, rgba(38,225,122,1) 19%, rgba(255,255,0,1) 53%, rgba(255,0,0,1) 100%);
		background: -o-linear-gradient(left, rgba(0,255,255,1) 0%, rgba(38,225,122,1) 19%, rgba(255,255,0,1) 53%, rgba(255,0,0,1) 100%);
		background: -ms-linear-gradient(left, rgba(0,255,255,1) 0%, rgba(38,225,122,1) 19%, rgba(255,255,0,1) 53%, rgba(255,0,0,1) 100%);
		background: linear-gradient(to right, rgba(0,255,255,1) 0%, rgba(38,225,122,1) 19%, rgba(255,255,0,1) 53%, rgba(255,0,0,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffff', endColorstr='#ff0000', GradientType=1 );
		position: relative;
	}

	&__min,
	&__max{
		@include font(normal, normal, rem(11px), 1.2, $color-dark-grey);
		position: absolute;
    @include top-center;
	}

  &__min{
    right: 100%;
    margin-right: 4px;
  }

  &__max{
    left: 100%;
    margin-left: 4px;
  }

	&__label{
		@include font(normal, 600, rem(11px), 1.2, $color-dark-blue);
		position: absolute;
		bottom: calc(100% + 14px);
		left: 0;
		z-index: 2;
		transform: translateX(-50%);
    transition: all 3s cubic-bezier(0.25,0.1,0.25,1);
    white-space: nowrap;
	}

	&__label::before{
		content: '';
		display: inline-block;
		width: 1px;
		height: 28px;
		background: $color-dark-blue;
		position: absolute;
		bottom: -29px;
		left: 0;
		right: 0;
		margin: 0 auto;
	}

	&__label::after{
		content: '';
		display: inline-block;
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 6px 10px 6px;
		border-color: transparent transparent $color-dark-blue transparent;
		position: absolute;
		bottom: -10px;
		left: 0;
		right: 0;
		margin: 0 auto;
	}

	&__notice{
		@include font(normal, normal, rem(11px), 1.2, $color-dark-grey);
		text-align: center;
		margin-top: 5px;
	}

	&__notice-icon{
		position: relative;

		.ic-help,
		.ic-info{
			display: inline-block;
			vertical-align: middle;
			width: 12px;
			height: 12px;
			margin-left: 4px;
		}

		.tooltip{
			width: 200px;
			text-align: left;
			position: absolute;
			bottom: 100%;
			left: -7px;
			z-index: 3;
		}
	}

	&.disable &__content{opacity: 0.5;}
}