/*#editor { display: flex; justify-content: space-between; margin-bottom: 20px; }*/
iframe { width: 100%; height: 300px; border: 1px solid #ccc; }
#actions { text-align: center; }


.tooladwrap {
    width: 100%;
    display: inline-block;
    padding: 17px;
    background: #efefef;
    margin-top: 10px;
    padding-top: 0;
    padding-bottom: 7px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

.container {
    width: 100%;
    margin: 17px 0 10px 0;
    background: #06364a;
    padding: 17px;
		padding-bottom: 0;
		border: 4px solid #127eab;
    /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);*/
		display: inline-block;
		border-radius: 5px;
		float: left;
}

.container .full {
box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
/*border: 1px solid #fff;*/
text-align: center;
width: 100%;
clear: both;
padding: 10px;
margin-bottom: 20px;
display: inline-block;
overflow: hidden;
/*background: #2c4e47;*/
border-radius: 5px;
}

.container .full #editor .left, .container .full .left {
width: 50%;
float: left;
clear: left;
display: inline-block;
/*border:1px solid #000;*/
}

.container .full #editor .right, .container .full .right {
width: 50%;
float: right;
clear: right;
display: inline-block;
/*border: 1px solid red;*/
}

.left.sample {
width: 50%;
padding:10px;
text-align: left;
color: #74968d;
overflow: auto;
max-height: 300px;
}

.right.sample {
width: 50%;
padding: 10px;
text-align: left;
color: #74968d;
overflow: auto;
max-height: 300px;
}

.left.sample .sampletitle, .right.sample .sampletitle {
font-size: 1em;
color: #fff;
text-align: left;
margin-top: 0;
margin-bottom: -20px;
}

.container .full #editor .left textarea {
color: #fff;
display: block;
width:100%;
height: 200px;
background: rgb(6,54,74);
background: -moz-linear-gradient(90deg, rgba(6,54,74,1) 0%, rgba(61,181,231,1) 50%, rgba(6,54,74,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(6,54,74,1) 0%, rgba(61,181,231,1) 50%, rgba(6,54,74,1) 100%);
background: linear-gradient(90deg, rgba(6,54,74,1) 0%, rgba(61,181,231,1) 50%, rgba(6,54,74,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#06364a",endColorstr="#06364a",GradientType=1);
}

.container .full #editor .right textarea {
color: #fff;
display: block;
width:100%;
height: 200px;
background: rgb(6,54,74);
background: -moz-linear-gradient(90deg, rgba(6,54,74,1) 0%, rgba(61,181,231,1) 50%, rgba(6,54,74,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(6,54,74,1) 0%, rgba(61,181,231,1) 50%, rgba(6,54,74,1) 100%);
background: linear-gradient(90deg, rgba(6,54,74,1) 0%, rgba(61,181,231,1) 50%, rgba(6,54,74,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#06364a",endColorstr="#06364a",GradientType=1);
}

.container input {
color: #fff;
}

.container label {
color: #fff;
}

.tooltitle {
margin-top: 0;
margin-bottom: 20px;
text-align: left;
color: #fff;
font-size: 1.2em;
line-height: 2;
}

.container #preview {
clear: left;
display: inline-block;
width: 100%;
min-height: 50px;
background-color: #fff;
border-radius: 5px;
}

.container .instructions {
color: #74968d;
margin-top: 10px;
font-size: .9em;
text-align: left;
}

.ta-heading {
color: #74968d;
margin-bottom: 5px;
}

.copyButton {
margin-top: 0;
position: relative;
display: inline-block;
}

.copyConfirmation {
  margin-left: 10px;
  color: #fff;
}

textarea::placeholder {
  color: darkgray;
}

button {
background-color: #00688b;
color: #fff;
border-radius: 7px;
padding: 5px 10px 5px 10px;
text-align: center;
border: none;
box-shadow: 0 0 17px rgba(0, 0, 0, 0.6) ;
cursor: pointer;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px !important;
}

button:hover {
background-color: #76978e;
}





/* For Webkit (Chrome, Safari, etc.) */
.left.sample::-webkit-scrollbar, .right.sample::-webkit-scrollbar {
    width: 4px; /* width of the entire scrollbar */
		border-radius: 12px;
		height: 4px;
}

.left.sample::-webkit-scrollbar-thumb, .right.sample::-webkit-scrollbar-thumb {
    background-color: #74968d; /* color of the scroll thumb */
    border-radius: 6px; /* roundness of the scroll thumb */
    border: 3px solid #74968d; /* creates padding around scroll thumb */
}

.left.sample::-webkit-scrollbar-track, .right.sample::-webkit-scrollbar-track {
    background: #e1e1e1; /* color of the tracking area */
		border-radius: 12px;
		margin-right: 10px;
		margin-left: 10px;
}

/* Always show scrollbar for elements that overflow */
.left.sample::-webkit-scrollbar, .right.sample::-webkit-scrollbar {
    scrollbar-width: thin; /* "auto" or "thin" */
    scrollbar-color: #74968d #e1e1e1; /* thumb and track color */
    /*overflow-y: scroll; /* shows vertical scroll */
    overflow-x: scroll; /* shows horizontal scroll */
}

.toolLogo {
float: left;
margin-right: 15px;
width: 40px;
margin-bottom: 20px;
}

.info-icon {
  display: inline-block;
  color: #fff;
	border: 1px solid #fff;
  background-color: #00688b;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  text-align: center;
  line-height: 15px;
  cursor: pointer;
  margin-left: 5px;
}

.tooltip-content {
  text-align: left;
  border: 1px solid #fff;
  border-radius: 5px;
  padding: 10px;
  background-color: #00688b;
	color: #fff;
  margin-top: 5px;
	margin-bottom: 10px;
	font-size: 0.8rem;
	line-height: 1.0rem;
}

.toolcopytxt {
color: yellow;
text-align: center;
margin-top: 0.7rem;
display: block;
}




@media screen and (min-width: 0px) and (max-width: 780px) {
.container {width: 100%; float: left; padding: 0;}

.container .full #editor .left, .container .full .left {
width: 100%;
float: none;
}

.container .full #editor .right, .container .full .right {
width: 100%;
float: none;
margin-top: 10px;
}

.container .full #editor .left textarea {
display: block;
width:100%;
height: 200px;
}

.container .full #editor .right textarea {
display: block;
width:100%;
height: 200px;
}

.tooladwrap {
padding: 0;
margin-top: -10px;
}

.toolLogo {
margin-bottom: 0;
margin-left: 10px;
margin-top: 5px;
}

}