@mn-cl: #3394e6;
@wht: #fff;
@txt: #000;
@blk: #000;

.ox_gad * {
	box-sizing: border-box;
}

.ox_gad *:focus {
	outline: none;
}


.ox {
	&__form {
		text-align: center;
		margin: 0 auto;
		//display: grid;
		//grid-template-rows: auto;
		//grid-template-columns: 1fr 1fr;
	}
	&__group {
		display: inline-block;
	}
	&__line {

	}
	&__input {
		display: block;
		max-width: 350px;
	    min-width: 250px;
		width: 100%;
		border: 1px solid darken(#fff, 15%);
		background: #fff;
		border-radius: 6px;
		padding: 10px 15px;
		margin: 0.5rem auto;
		@media (max-width: 300px) {
			min-width: initial;
		}
	}
	&__qtitle {
		font-size: 18px;
		margin-bottom: 10px;
		font-weight: 800;
		width: 100%;
		grid-column: span 2;
	}
	&__mirror {
		width: 100%;
		position: relative;
		margin: 1rem auto;
		img {
			width: 100%;
			border-radius: 25px; 
			border: 4px solid #e4e4ec;
		}
		.btns {
			display: none;
		}
	}
}

.btns {
	text-align: center;
}

.ox__btn, .ox__new  {
	cursor: pointer;
	border-radius: 6px;
	padding: 10px 2.5rem 10px;
	margin: .5rem auto;
	text-align: center;
	font-size: 1rem;
  	font-weight: 400;
  	text-decoration: none;
  	display: inline-block;
  	border: 0px solid transparent;
  	line-height: 1;
	background: @mn-cl;
	color: @wht;
	border: 1px solid darken(@mn-cl, 5%);
	transition: all 250ms ease-out;
	&:focus {
		box-shadow: 0px 0px transparent;
	}
	&:hover {
		background: darken(@mn-cl, 10%);
		color: @wht;
	}
	&:active, &:focus {
		background: @mn-cl;
		color: @wht;
		border: 1px solid darken(@mn-cl, 5%);
		&:hover {
			background: darken(@mn-cl, 10%);
			color: @wht;
		}
	}
}

.ox__line {
	input {
		width: 0;
		height: 0;
		position: absolute;
		left: -9999px;
	}
	label {
		background: @wht;
		border: 1px solid darken(#fff, 15%);
		padding: 10px 16px;
		border-radius: 6px;
		display: block;
		cursor: pointer;
		transition: all 250ms ease-out;
	}
	input:checked + label {
		background: darken(#fff, 10%);
	}
}

.oxr {
	text-align: center;
	padding: 16px;
	display: none;
	position: absolute;
    display: none;
    top: 0;
    left: 30%;
    width: 40%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    @media(max-width: 767px) {
    	left: 15%;
    	width: 70%;
    }
	&__title {
		margin: 0;
		padding: 0;
		text-align: center;
		margin-bottom: 20px;
	}
	&__desc {
		text-align: center;
		p {
			margin-bottom: 16px;
			&:last-child, &:only-child {
				margin-bottom: 0;
			}
		}
	}
	&__subtitle {
		text-align: center;
	}
}

.newdo {
	display: none;
}