.wpgrade_grid_row {
	label {
		text-align:center;
		font-size:11px;
	}

	.ruler {
		background:url('../images/ruler_bg.png');
		position:relative;
		&:before, &:after {
			content:"";
			background:#fff;
			width:22px;
			height:20px;
			position:absolute;
			top:0;
			left:0;
		}
		&:after {
			right:0;
			left:auto;
		}
		li {
			color:#909090;
			width:7.69%;
			float:left;
			margin:11px 0 0 0;
			padding:20px 0 0 0;
			background:white;
			position:relative;
			&:before {
				content:"";
				background:black;
				width:1px;
				height:18px;
				position:absolute;
				top:-11px;
				left:50%;
				// border-left:1px solid #fff;
				// border-right:1px solid #fff;
			}
			&.active {
				& {
					color:#333333;
				}
				&:before {
					height:25px;
				}
			}

			//Lines Overlay Fixes
			&:nth-child(2):before, &:nth-child(8):before, &:nth-child(9):before {
				left:47%;
			}
			&:nth-child(6):before {
				left:51%;
			}
			&:nth-child(7):before {
				left:52%;
			}
			&:nth-child(10):before {
				left:48%;
			}
		}
	}

	.grid_cols_slider {
		width:93%;
		margin: 11px 3.5% 0;
		background:none;
		border:none;
      height: 30px;
      position: relative;

      .handle.read-only {
        @include opacity(.6);
        cursor: default;

        &:hover {
          @include background-image(linear-gradient(left top, #02b7e3, #0288d0));
          &:before {
            border-bottom-color: #02b7e3;
          }
          &:after {
            border-top-color: #0288d0;
          }
        }
      }

      .handle {
			@include border-radius(2px);
			border:none;
			@include background-image(linear-gradient(left top, #02b7e3, #0288d0));
			cursor:pointer;
			outline:0; top:0;
            display: block;
            position: absolute;
          top: 0; left: 0;
          width: 24px;
          color: white;
          text-align: center;
          margin-left: -10px;
          padding: 7px 1px 7px 0;

			&:hover, &.active {
				@include background-image(linear-gradient(left top, #0288d0, #0288d0));		
				&:before {
					border-bottom-color:#0288d0;
				}
				&:after {
					border-top-color:#0288d0;
				}			
			}

			&:before {
				content:"";
				width:0;
				height:0;
				position:absolute;
				top:-7px;
				left: 8px;
				border-left: 4px solid transparent;
				border-right: 4px solid transparent;
				border-bottom: 7px solid #02b7e3;
			}
			&:after {
				content:"";
				width:0;
				height:0;
				position:absolute;
				bottom:-7px;
				left: 8px;
				border-left: 4px solid transparent;
				border-right: 4px solid transparent;
				border-top: 7px solid #0288d0;
			}
		}
	}
	.grid_cols_dimensions {
		width:93%;
		margin:11px 3.5%;
		li {
			border-bottom:1px solid #333;
			position:relative;

			span {
				@include border-radius(999px);
				color:#000;
				font-weight:bold;
				background:#fff;
				position:relative;
				bottom: -8px;
				padding: 7px;
			}

			&:before, &:last-child:after {
				content:"";
				width:1px;
				height:11px;
				position:absolute;
				background:#333;
				left:0;
				top:11px;
			}
			&:last-child:after {
				right:0;
				left:auto;
			}
		}
	}
	.grid_cols_content {
		width:93%;
		margin:0 3.5% 6px;
		li {
			background:url('../images/ruler_content_bg.png');
			height:165px;
			border-left:8px solid #fff;
			border-right:8px solid #fff;
			position:relative;
	
			span {
				width:100%;
				float:left;
				background:#fff;
				text-align:left;
				font-style:italic;
				color:#7a7a7a; 
				margin-top:14px;
				padding:5px;
                overflow: hidden;
			}
			&:before, &:last-child:after {
				content:"";
				height:100%;
				width:1px;
				background:#333;
				position:absolute;
				top:0;
				left:-8px;
			}
			&:last-child:after {
				right:-8px;
				left:auto;
			}

			.wp-picker-container {
				bottom: -29px;
				position: absolute;
				left: 0;
				.wp-color-result {
					padding-left: 0;
					border-left: 0;
					width: 67px;
					&:after{
						font-size: 9px;
					}
				}
				.wp-picker-holder {
					left: -46px;
					top: -50px;
				}
			}
		}
	}
}

//Full width background checkbox
.full_width_bg {
	position: absolute;
	top: -27px;
	right: 10px;
	opacity:0;
	@include transition(all 0.3s);
	&.s-visible {
		opacity:1;
	}
}