/*
Description: dataforseo-playground
Author: Vadym Borovok
Author URI: 
Date:2018-08-26
Modified Date:2018-08-26
*/

#error-message {
	display: none;
}
#error-message-capcha {
	display: none;
}

#loader {
	display: none;
}

.invalid-query-message {
	color: red;
	display: none;
}

#resultsHtml{
	height: 800px;
    border: 1px solid #ced4da;
    border-radius: 4px 0 0 4px;
    width: 550px;
}

#iframeResults {
	width: 200%;
    height: 200%;
    transform: scale(0.5) translate(-50%, -50%);
    border-radius: 4px 0 0 4px;
}

#resultsJson, pre{
	background: #272822;
	font-size: 10px;
	color:white;
	height: 800px;
	border-radius: 0 4px 4px 0;
}

.data-link {
	cursor: pointer;
}

.data-span .string {
	color: #a6e22e;
}

.data-span .number {
	color: #ae81ff;
}

.data-span .boolean {
	color: #9191e2;
}

.data-span .null {
	color: magenta;
}

.data-span .key {
	color: #f92672;
}
#form-out .form-row {
    align-items: flex-end;
}
#form-out .btn-success{
	background-color: #b2dd4c;
    border-color: #b2dd4c;
    text-transform: uppercase;
    font-weight: 600;
    width: 100%;
}
#form-out .btn-success:not(:disabled):not(.disabled).active,
#form-out .btn-success:not(:disabled):not(.disabled):active{
    background-color: #212121;
    border-color: #212121;
}
#form-out .btn-success:hover {
    background-color: #212121;
    border-color: #212121;
}
#results {
	margin: 30px 0 40px 0;
}
#searchQuery {
    position: relative;
}
.invalid-query-message {
    position: absolute;
}
#loader {
    margin: 10px auto;
}
#error-message {
    text-align: center;
    margin: 30px 0;
}
#error-message span {
    padding: 4px 16px;
    color: #ff0000;
    border: 1px solid #ff0000;
    border-radius: 4px;
}
#error-message-capcha {
	text-align: center;
	margin: 30px 0;
}
#error-message-capcha span {
	padding: 4px 16px;
	color: #495057;
	border: 1px solid #495057;
	border-radius: 4px;
}

.logo {
	display: none !important;
}
.EhIML, .MXl0lf {
  pointer-events: none!important;
}
@media screen and (max-width:600px){
	#resultsHtml {
    	height: 450px;
    	width:100%;
	}
	#resultsJson, pre {
    	height: 450px;
	}
	.form-row .col-5 {
    	max-width: 100%!important;
		-ms-flex: 0 0 50%;
    	flex: 0 0 50%;
    	margin-bottom: 5px;
	}
	.form-row .col-2 {
    	-ms-flex: 0 0 30%;
    	flex: 0 0 30%;
    	max-width: 30%;
	}
}
@media screen and (max-width:480px){
	.form-row .col-5 {
		-ms-flex: 0 0 100%;
    	flex: 0 0 100%;
	}
	.form-row input.form-control {
    	width: 100%!important;
	}
	.form-row .col-2 {
    	-ms-flex: 0 0 50%;
    	flex: 0 0 50%;
		max-width: 50%;
	}
}



"