.codedit-editor { 
	width:100%; 
	border:3px solid #83d7fc; 
	border-bottom:none;
	overflow:hidden;
	height:100%;
}
.fullScreen { position:absolute; top:0; }
.codedit-header {
  background-color:#bdebff;
}
.w3-bar .w3-bar-item:hover {
  color:#757575 !important;
}
.codedit-dragbar{
  position:absolute;
  cursor: col-resize;
  z-index:3;
  padding:5px;
}
.codedit-shield {
  display:none;
  top:0;
  left:0;
  width:100%;
  position:absolute;
  height:100%;
  z-index:4;
}
#framesize {
  font-family: 'Montserrat', 'Source Sans Pro', sans-serif;
  font-size: 14px;
}
.codedit-container {
  background-color:#bdebff;
  width:100%;
  overflow:auto;
  bottom:0;
  height:auto;
}
.codedit-textareacontainer, .codedit-iframecontainer {
  float:left;
  height:100%;
  width:50%;
  min-height:100px;
}

.codedit-textarea, #textarea2, .codedit-iframe {
  height:100%;
  width:100%;
  padding-bottom:10px;
  padding-top:1px;
}
.codedit-textarea {
  padding-left:10px;
  padding-right:5px;  
}
.codedit-iframe {
  padding-left:5px;
  padding-right:10px;  
  position:relative;
}
.codedit-textareawrapper {
  width:100%;
  height:100%;
  min-height:100px;
  overflow:auto;
  background-color: #ffffff;
  position:relative;
  box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.codedit-iframewrapper {
  width:100%;
  height:100%;
  background-color: #ffffff;
  box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.codedit-textareaCode, #textareaCode2 {
  background-color: #ffffff;
  font-family: consolas,Menlo,"courier new",monospace;
  font-size:15px;
  height:100%;
  width:100%;
  padding:8px;
  resize: none;
  border:none;
  line-height:normal;    
}

.localhostoutercontainer {
  position: absolute;
  width: auto;
  left:5px;
  right:10px;
  background-color: #f1f6fd;
  height: 30px;
  z-index: 9;
}
.localhostoutercontainer.horizontal {
  left:10px;
}
.localhostcontainer {
  position:relative;
  width:auto;
  right:0;
  left:0;
  z-index:2;
  xpadding:6px 12px;
  xxborder-bottom:1px solid #d9d9d9;
  background-color:#F1F1F1;
  background-color:#38444d;
  border-top-right-radius:10px;
  border-top-left-radius:10px;
  overflow:hidden;
  padding-top:4px;
}
.localhostdiv {
  overflow:hidden;
  font-family:arial;
  color:#000;
  background-color:#fff;
  font-size:15px;
  padding-left:10px;
  border-radius:20px;
  width:60%;
  float:left;
  font-family: consolas,Menlo,"courier new",monospace;  
}
.localhostbuttoncontainer {
  width:20%;
  min-width:100px;
  color:#ffc107;
  float:left;  
  font-size:16px;
  overflow:auto;
}
div.localhostbuttoncontainer span{
  display:inline-block;
  color:#ffc107;
  position:relative;
  padding-bottom:4px;
  padding-left:2px;  
}

div.localhostbuttoncontainer span:first-child{
  color:#dc3545;
  padding-left:12px;

}
div.localhostbuttoncontainer span:last-child{
  color:#04AA6D;
  padding-left:2px;    
}


.codedit-filenamecontainer {
	position:absolute;
	text-align:center;
	z-index:4;
	width:100%;
}
.codedit-filenamecontainer span {
	opacity:0.9;
	padding:1px 6px;
	font-family:Consolas;
	background-color:#f1f6fd;
	font-size:16px;
}

.CodeMirror.cm-s-default {
  line-height:normal;
  padding: 4px;
  height:100%;
  width:100%;
}

.codedit-iframeResult, #iframeSource {
  background-color: #ffffff;
  height:100%;
  width:100%;  
}
 
.codedit-textareacontainer.horizontal,.codedit-iframecontainer.horizontal{
  height:50%;
  float:none;
  width:100%;
}

.codedit-textarea.horizontal{
  height:100%;
  padding-left:10px;
  padding-right:10px;
}
.codedit-iframe.horizontal{
  padding-right:10px;
  height:100%;
  padding-bottom:10px;
  padding-left:10px;  
}
.codedit-container.horizontal{
  min-height:200px;
  margin-left:0;
}

#getwebsitebtn {
  background-color:#04AA6D;
  font-family: 'Source Sans Pro', sans-serif;  
  color: white;
  font-size: 18px;
  padding:6px 15px;
  margin-top:4px;
  margin-right: 10px;
  display: block;
  float: right;
  border-radius: 5px;
}
#getwebsitebtn:hover {
  background-color: #059862 !important;
  color:white!important;
}

@media screen and (max-width: 727px) {
}
@media screen and (max-width: 467px) {
  .w3-dropdown-content {width:100%}
}
@media only screen and (max-device-width: 768px) {
  .codedit-iframewrapper {overflow: auto;}
  .codedit-container     {min-width:310px;}
  .stack         {display:none;}
  .codedit-header     {min-width:310px;}  
}

.codedit-textareacontainer,
.codedit-iframecontainer { height:100%; width:50%; }
.horizontal .codedit-textareacontainer,
.horizontal .codedit-iframecontainer { height:50%; width:100%; }

button.codedit-btn {
	background-color:#cdf; /*rgb(204, 221, 255);*/
}
button.codedit-active {
	margin-left: 0px;
	background-color:#def; /*rgb(221, 238, 255); */
	color:#000;
}
.codedit-runbtn {
	background-color:#def; /*rgb(221, 238, 255); */
	color:#000;
	--cursor:not-allowed;
}
.codedit-runbtn:hover {}
.codedit-active-save button.codedit-active {
	background-color:#fdd; /* rgb(255, 221, 221); */
	color: rgb(170, 0, 0);
}
.codedit-active-save button.codedit-runbtn {
	cursor:default;
}


.cdh-editor-header1 { display:inline-block; margin-left:10px; height:36px; width:48%; background-color:#2b5ecb; float:left; }
.cdh-editor-header1 span { color:white; display:inline-block; line-height:34px; text-indent:10px; }
.cdh-editor-header1 button { float:right; border-radius: 5px; border:none; margin:6px 5px 0 0; font-size:0.9em; }

.cdh-browser-header1 { display:inline-block; margin-right:10px; height:36px; width:48%; padding-right:7px; background-color:#2b5ecb; float:right; }
span.cdh-browser-text { color:white; display:inline-block; line-height:34px; text-indent:10px; }
span.cdh-browser-title {
    position: relative;
    bottom: -5px;
    float: right;
    background-color:#def;
    display: inline-block;
    width: 190px;
    height: 30px;
    color:  # 444;
    font-size: 16px;
    padding-left: 10px;
    padding-top: 5px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
	white-space: nowrap; 
	text-overflow:ellipsis;
	overflow:hidden;
}
.cdh-editor-header2 { padding-left:32px; display:inline-block; margin-left:10px; height:36px; width:48%; background-color:#bcf; float:left; }
.cdh-editor-header2 button.codedit-btn { font-family: 'Arial Narrow', sans-serif; float:left; border-right:1px solid grey; margin:0; font-size:16px; word-spacing:10px; padding:6px 7px; }
.cdh-editor-header2 button.codedit-btn:first-of-type { border-left:1px solid grey; }

.cdh-browser-header2 { display:inline-block; margin-right:10px; height:36px; width:48%; background-color:#bcf; float:right; }
.cdh-browser-header2 button { opacity:0.7; cursor:not-allowed; box-shadow: 1px 1px #89c; border: 1px solid #679; border-radius: 5px; margin:4px 0 0 4px; font-size:0.8em; }
.cdh-browser-header2 button.enabled { cursor:default; opacity:unset; }
.cdh-browser-header2 button.enabled:hover { background-color:#ccc; }
.cdh-browser-header2 .codedit-filename { margin:4px 0 0 4px; display:inline-block; color:#018; background-color:white; font-size:16px; border-radius: 14px; padding:2px 10px 2px 10px; width: 180px; }

.codedit-codeForm { margin:0px;display:none; }

.codedit-help-popup { 
	background-color:#d7f1fe;
	width:40em !important;
}
.codedit-help-container { 
	font-weight:normal !important;
	text-align:left !important;
	padding:0; 
	margin:0;
	--height:35px;
	--border-top:3px solid #83d7fc; 
}
.swal2-modal.codedit-help-popup .codedit-help-show { 
	--clear:left; 
	--font-weight:normal !important;
	--padding:0; 
	--margin:0;
	--text-align:left !important;
	height:50px;
	--height:35px;
	--border-top:3px solid #83d7fc; 
}

.codedit-help-show-hdr { 
	font-family:'Audiowide'; 
	font-size:30px; 
	color:#2765c4; 
	margin-left:10px;
}
/* 
.codedit-help-show button { --border-radius: 5px; --font-size:0.9em; --box-shadow: 1px 1px #89c; --border: 1px solid #679; }
.codedit-help-show button.codedit-instructions-btn { --margin:0 0 0 15px; --float:left; } 
.codedit-help-show span { --float:right; } 
.codedit-help-show .codedit-help-btn { --margin:0 15px 0 10px; --float:right; }  

.codedit-help-container { background-color:rgb(215 233 255); padding:0 10px; color:#014; }

.codedit-files-container { background-color:rgb(232 245 255); padding:0 8px; width:80%; }
*/
.codedit-fullpage-instructions { 
	background-color:rgb(239,250,255); 
	padding:5px 13px !important; 
	position:absolute; 
	top:0; 
	left:10px; 
	width:100px; 
	height:100px; 
	overflow-y:scroll; 
	--z-index:999; 
	border:none !important;
	box-shadow:0 1px 3px rgb(0 0 0 / 12%), 0 1px 2px rgb(0 0 0 / 24%);
}
.codedit-fullpage-instructions s { text-decoration:none !important; }

.codedit-fullpage-instructions-hdr { padding-left:15px; /*border:1px solid red; height:30px;*/ }

ul.chc-folder-list { padding-left:0; }
ul.chc-folder-list ul { padding-left:12px; }
ul.chc-folder-list li { padding-left:0; list-style:none; }

.chc-highlight { color:#a00; }

.codedit-header-type { font-size:23px; line-height:1.9em; margin:0 31px 0 0; }


/** DEVICE OPTION BUTTONS **/
	ul.codedit-device-options {
		margin:3px 3px 0 0;
		padding:0;
		float:right;
	}
	ul.codedit-device-options li {
		display:inline-block;
		margin:0 4px 0 0;
		padding:0;
	}
	ul.codedit-device-options li.active a { color:#999; cursor:default; }
	ul.codedit-device-options li:not(.active) a:hover { color:#fff; }
	.codedit-iframewrapper.tablet,
	.codedit-iframewrapper.mobile {
		background-color:#141e38;
		padding-top:20px;
		text-align:center;
	}
	.codedit-iframewrapper.tablet .codedit-iframeResult { 
		width:80%; 
		border-top-left-radius:10px;
		border-top-right-radius:10px;
	}
	.codedit-iframewrapper.mobile .codedit-iframeResult { 
		width:290px; 
		height:540px; 
		border-radius:10px; 
	}