
@media only screen and (min-width: 1583px) {
	.index {
		padding: 7% 8% 0;
	}
	.index .client {
		-ms-flex-preferred-size: 53%;
		    flex-basis: 53%;
		padding: 9% 5%;
	}
	.index .form-section {
		-ms-flex-preferred-size: 47%;
		    flex-basis: 47%;
	}
	.index .form-section .checkbox-wrap input::before {
		width: 28px;
		height: 24px;
	}
	.index .form-section .checkbox-wrap input:checked::after {
		width: 30px;
		line-height: 26px;
	}

	.app-wrap {
		padding-left: 20%;
	}
	.app-wrap .sidebar {
		width: 20%;
	}
	.middlebar .top-controls {
		width: 80%;
	}
	.middlebar .top-controls .quick-links a {
		padding: 0 18px;
	}
	.middlebar .top-controls .logged-user {
		-ms-flex-preferred-size: 6%;
		    flex-basis: 6%;
	}

	.dashboard .bars .section .top-items .item-label {
		padding-right: 20px;
	}

	.dashboard .bars .section .website-status {
		min-height: 320px;
	}

	.input-file + label span {
	    width: 170px;
	}

}	


@media only screen and (min-width: 1920px) {
	.index {
		padding: 7.2% 11% 0;
	}
	.index .client {
		-ms-flex-preferred-size: 52%;
		    flex-basis: 52%;
	}
	.index .form-section {
		-ms-flex-preferred-size: 48%;
		    flex-basis: 48%;
	}
	.index .form-section .checkbox-wrap input {
		margin-right: 12px;
	}
	.index .form-section .checkbox-wrap input::before {
		width: 28px;
		height: 26px;
	}
	.index .form-section .the-form .buttons .submit-btn {
		width: 36%;
		padding: 10px 26px;
	}
	.index .form-section .the-form .buttons .submit-btn::after {
		top: 14px;
	}

	.app-wrap {
		padding-left: 18%;
	}
	.app-wrap .sidebar {
		width: 18%;
	}
	.middlebar .top-controls {
		width: 82%;
	}

	.dashboard .bars .section .top-items .item-label {
		padding-right: 0px;
	}

	.dashboard .bars .section .website-status {
		min-height: 200px;
	}

	.workplace .the-form .form-contents {
		-ms-flex-preferred-size: 80%;
		    flex-basis: 80%;
	}
	.workplace .the-form .form-buttons {
		margin-top: 0;
		-ms-flex-preferred-size: 18%;
		    flex-basis: 18%;
		-ms-flex-item-align: start;
		    align-self: flex-start;

		gap: 14px;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}
	.workplace .the-form .form-buttons .btn-submit, 
	.workplace .the-form .form-buttons .btn-cancel {
		display: block;
		width: 100%;
		padding: 8px 0;
	}

}


@media only screen and (max-width: 1024px) {
	.index {
		padding: 9% 7% 0;
	}
	.index main {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}
	.index .client {
		-ms-flex-preferred-size: 100%;
		    flex-basis: 100%;
		min-height: 30vh;
		-webkit-box-align: center;
		    -ms-flex-align: center;
		        align-items: center;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		padding: 0;
	}
	.index .form-section {
		-ms-flex-preferred-size: 100%;
		    flex-basis: 100%;
		min-height: 50vh;
		padding: 8% 8%;
	}
	.index .client .image-wrap img {
		width: 240px;
	}
	.index .client .info {
		display: none;
	}
	.index .client .social-icons {
		display: none;
	}

}


@media only screen and (max-width: 767px) {
	.index {
		padding: 8% 5%;
		background-size: cover;
	}
	.index main {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}
	.index .form-section {
		min-height: 60vh;
	}
	.index .client .image-wrap img {
		width: 220px;
	}
	.index .form-section h2 {
		font-size: 1.5em;
		text-align: center;
	}
	.index .form-section p {
		margin: 4px 0 20px;
		padding-bottom: 20px;
		text-align: center;
		color: #c6cfd3;
		border-bottom: 1px dotted #c6cfd3;
	}
	.index .form-section .checkbox-wrap {
		margin-top: 30px;
	}
	.index .form-section .checkbox-wrap input {
		margin-right: 20px;
	}
	.index .form-section .checkbox-wrap input::before {
		width: 34px;
		height: 32px;
	}
	.index .form-section .checkbox-wrap input:checked::after {
		width: 34px;
		line-height: 32px;
	}
	.index .form-section .the-form .buttons {
		margin-top: 20px;
	}
	.index .form-section .the-form .buttons .submit-btn {
		width: 100%;
		padding: 10px 20px;
		text-align: center;
	}
	.index .form-section .the-form .buttons .submit-btn::after {
		position: static;
		margin-left: 10px;
	}
	.index .form-section .the-form .buttons .forgot {
		margin-left: 0;
		margin-top: 30px;
	}

}