* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  color:#000000;
  margin:0px;
  font-size:100%;
}
.trytopnav {
  height:48px;
  overflow:hidden;
  min-width:380px;
  position:absolute;
  width:100%;
  top:99px;

  background-color:#E7E9EB;
}
.topnav-icons {
  margin-right:8px;
}
.topnav {
position:relative;
z-index:2;
font-size:17px;
background-color: #282A35;
color:#f1f1f1;
width:100%;
padding:0;
letter-spacing:1px;
font-family: 'Source Sans Pro', sans-serif;
}
.topnav a{
padding:10px 15px 9px 15px !important;
}
.topnav .ki-bar a:hover,.topnav .ki-bar a:focus{
background-color:#000000 !important;
color:#ffffff !important;
}
.topnav .ki-bar a.active {
background-color: #04AA6D!important;
color:#ffffff;
}
.topnav a.topnav-icons{
  background-color:#282A35;
}
a.ki-icons {
width:52px !important;
font-size:15px !important;
padding-top:15px !important;
padding-bottom:13px !important;
}
a.topnav-icons.fa-home {font-size:22px !important}
a.topnav-icons.fa-menu {font-size:22px !important}
a.topnav-localicons {
font-size:20px !important;
padding-top:6px !important;
padding-bottom:12px !important;
}
.trytopnav a,.trytopnav button {
  color:#999999;
}
.ki-bar .ki-bar-item:hover {
  color:#757575 !important;
}
a.bkilink {
  padding:0 !important;
  display:inline !important;
}
a.bkilink:hover,a.bkilink:active {
  text-decoration:underline !important;
  background-color:transparent !important;
}
#dragbar{
  position:absolute;
  cursor: col-resize;
  z-index:3;
  padding:5px;
}
#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;
}
#container {
  background-color:#E7E9EB;
  width:100%;
  overflow:auto;
  position:absolute;
  top:144px;

  bottom:0;
  height:auto;
}
#textareacontainer, #iframecontainer {
  float:left;
  height:100%;
  width:50%;
}

#textarea, #textarea2, #iframe {
  height:100%;
  width:100%;
  padding-bottom:10px;
  padding-top:1px;
}
#textarea {
  padding-left:10px;
  padding-right:5px;  
}
#iframe {
  padding-left:5px;
  padding-right:10px;  
  position:relative;  
  
}
#textareawrapper {
  width:100%;
  height:100%;
  
  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);
  
}
#iframewrapper {
  width:100%;
  height:100%;
  -webkit-overflow-scrolling: touch;
  background-color: #ffffff;
  
    box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  
}
#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;    
}
/*
  .localhostcontainer {
    position:absolute;
    width:auto;
    right:0;
    left:0;
    z-index:2;
    padding:4px 12px;
    border-bottom:1px solid #d9d9d9;
    background-color:#E7E9EB;
  }
  .localhostdiv {
    overflow:hidden;
    font-family:arial;
    border:1px solid #d9d9d9;
    background-color:#fff;
    font-size:14px;
    padding-left:10px;
  }
*/

.localhostoutercontainer {
  position: absolute;
  width: auto;
  left:5px;
  right:10px;
  background-color: #E7E9EB;
  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;    
}

body.darktheme .localhostoutercontainer {
  background-color: #38444d;
}
body.darktheme .localhostcontainer {
  background-color:rgb(21,32,43)
}

body.darktheme .localhostdiv {
  border:1px solid #595959;
  background-color:#ffffff;
}

/**/


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

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

#iframeResult, #iframeSource {
  background-color: #ffffff;
  
  
  height:100%;
  width:100%;  
}

#stackV {background-color:#999999;}
#stackV:hover {background-color:#BBBBBB !important;}
#stackV.horizontal {background-color:transparent;}
#stackV.horizontal:hover {background-color:#BBBBBB !important;}
#stackH.horizontal {background-color:#999999;}
#stackH.horizontal:hover {background-color:#999999 !important;}
#textareacontainer.horizontal,#iframecontainer.horizontal{
  height:50%;
  float:none;
  width:100%;
}


#textarea.horizontal{
  height:100%;
  padding-left:10px;
  padding-right:10px;
}
#iframe.horizontal{
  height:100%;
  padding-right:10px;
  padding-bottom:10px;
  padding-left:10px;  
}
#container.horizontal{
  min-height:200px;
  margin-left:0;
}
#tryitLeaderboard {
  overflow:hidden;
  text-align:center;
  height:100px;
background: linear-gradient(90deg, #851B41 0%, #6937BE 100%);
color:#fff;
}
.darktheme #tryitLeaderboard {background:#04090e}
.ki-dropdown-content {width:350px}

#breadcrumb ul {
  font-family:'Montserrat', 'Source Sans Pro', sans-serif;
  list-style: none;
  display: inline-table;
  padding-inline-start: 1px;
  font-size: 12px;
  margin-block-start: 6px;
  margin-block-end: 6px;	
}
#breadcrumb li {
  display: inline;
}
#breadcrumb a {
  float: left;
  background: #E7E9EB;
  padding: 3px 10px 3px 20px;
  position: relative;
  margin: 0 5px 0 0; 
  text-decoration: none;
  color: #555;
}
#breadcrumb a:after {
  content: "";  
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 12px solid #E7E9EB;
  position: absolute; 
  right: -12px;
  top: 0;
  z-index: 1;
}
#breadcrumb a:before {
  content: "";  
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 12px solid #fff;
  position: absolute; 
  left: 0; 
  top: 0;
}
#breadcrumb ul li:first-child a:before {
  display: none; 
}
#breadcrumb ul:last-child li{
  padding-right: 5px;
}
#breadcrumb ul li a:hover {
  background: #04AA6D;
  color:#fff;
}
#breadcrumb ul li a:hover:after {
  border-left-color: #04AA6D;
  color:#fff;
}
#breadcrumb li:last-child {
  display: inline-block!important;
  margin-top: 3px!important;
}
#runbtn {
  background-color:#04AA6D;
  color:white;
  font-family: 'Source Sans Pro', sans-serif;
  font-size:15px;
  padding: 5px 12px;
  margin-top: 7px;
  margin-left:25px;
  border-radius:5px;
  word-spacing:10px;
}
#runbtn:hover {
  background-color: #059862 !important;
  color:white!important;
}
#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) {
  .trytopnav {top:70px;}
  #container {top:116px;}
  #breadcrumb {display:none;}
  #tryhome  {display:block;}
}
@media screen and (max-width: 467px) {
  .trytopnav {top:60px;}
  #container {top:106px;}
  .ki-dropdown-content {width:100%}
}
@media only screen and (max-device-width: 768px) {
  #iframewrapper {overflow: auto;}
  #container     {min-width:310px;}
  .stack         {display:none;}
  #tryhome       {display:block;}
  .trytopnav     {min-width:310px;}  
}

#iframewrapper {
	
}

/*
  .tabs-container {
  height:100%;
  overflow:auto;
  }
  .tabs {
    list-style-type: none;
    padding: 0;
    margin: 0;
    background-color:#E7E9EB;
    
  }
  .tab {
    padding: 5px 10px;
    background: #ddd;
    width: fit-content;
    display: inline-block;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;            
  
    }
  .tab.active {
    background: #fff;
  }
  
  .tab-pane {
    display: none;
  }
  .tab-pane.active { 
    display: block;
  }
*/

.tabitem, #resttab {
  position:absolute;
  z-index:2;
  font-family:arial;
  padding:4px 12px;
  width:70px;
  cursor:pointer;
}

/*  
#progqcstab {
  width:120px;
  left:0;
}
#prog2qcstab {
  width:100px;
  left:120px;
}
#childtemplatetab {
  width:150px;
  left:220px;
}
*/
.tabitem {
  background-color:#38444d;
  color:#ddd;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  opacity:0.5;
}
#resttab {
  cursor:default;

  z-index:1;
  background-color:#E7E9EB;
  width:100%;
  left:0px;
}


.tabitem.tabselected{
  opacity:1;
}

.darktheme .tabitem {
  background-color:rgb(21,32,43)
}
.darktheme #resttab {
  background-color:#38444d;
}

/**/
.fa {
  padding: 10px 10px!important;
}
a.topnav-icons, a.topnav-icons.fa-home, a.topnav-icons.fa-menu, button.topnav-icons.fa-adjust {
    font-size: 28px!important;
}
.darktheme #breadcrumb li {
  color:#fff;
}
.darktheme #breadcrumb a {
  background:#616161;
  background-color:#38444d;  
  color: #ddd;
}	
.darktheme #breadcrumb a:after {
  border-left: 12px solid #616161;
  border-left: 12px solid #38444d; 
}
.darktheme #breadcrumb a:before {
  border-left: 12px solid rgb(40, 44, 52);
  border-left: 12px solid #1d2a35;  
}
.darktheme .currentcrumb {
  color:#ddd;
}

body.darktheme {
  background-color:rgb(40, 44, 52);
  background-color:#1d2a35;
}
body.darktheme #tryitLeaderboard{
  background-color:rgb(40, 44, 52);
  background-color:#1d2a35;  
}
body.darktheme .trytopnav{
  background-color:#616161;
  background-color:#38444d;
  color:#dddddd;
}
body.darktheme #container {
  background-color:#616161;
  background-color:#38444d;
}
body.darktheme .trytopnav a {
  color:#dddddd;
}
body.darktheme #textareaCode {
  background-color:rgb(40, 44, 52);
  color:#fff;
}

body.darktheme #textareawrapper {
  background-color:rgb(21,32,43);
}
body.darktheme .tabs {
    background-color:#38444d;
  }
body.darktheme .tab {
    background: rgb(21,32,43);
    color:#fff;
    opacity:0.5;
    }
body.darktheme .tab.active {
    background: rgb(21,32,43);
    color:#fff;    
    opacity:1;
  }

body.darktheme ::-webkit-scrollbar {width:12px;height:3px;}
body.darktheme ::-webkit-scrollbar-track-piece {background-color:#000;}
body.darktheme ::-webkit-scrollbar-thumb {height:50px;background-color: #616161; background-color:#38444d;}
body.darktheme ::-webkit-scrollbar-thumb:hover {background-color: #aaaaaa;background-color: #4b5b68}


/*
#file1filetab, #resttab {
  position:absolute;
  z-index:2;
  font-family:arial;
  padding:4px 12px;
}
#file1filetab {
  width:auto;
  left:0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;            
}
#resttab {
  z-index:1;
  background-color:#E7E9EB;
  width:100%;
  left:0px;
}
.tabitem {
  background-color:#eaeaea;
}
.tabitem.tabselected{ 
  background-color:#fff;
}
.darktheme .tabitem {
  background-color:#444;
}
.darktheme .tabitem.tabselected{
  background-color:rgb(21,32,43);
}
.darktheme #resttab {
  background-color:#38444d;
}
*/
.darktheme #file1filetab {
  border-right:1px solid rgb(21,32,43);
}
/* Icon Dark Mode */
.dark-switch, .dark-link {width:20px;height:20px;z-index:10;cursor:pointer}  
.dark-link .svg-2, .darktheme .dark-link .svg-1{display:none}
.darktheme .dark-link .svg-2{display:block;}
.darktheme .dark-link svg.line{fill:none;stroke:#fff}  

/* Teks Dark Mode */
.dark {position:relative;  min-width:60px;top:5px;left:5px;font-family:Arial;font-size:11px;color:#666}
.light {position:relative; min-width:60px;top:5px;left:25px;font-family:Arial;font-size:11px;color:#ccc;display:none}
.darktheme .dark {display:none}
.darktheme .light {display:block}
.ki-bar{position:relative}
svg.hNav{fill:#888;stroke:#888;} 
svg.hNav2{fill:none;stroke:#666;} 
.darktheme svg.hNav{fill:#aaa;stroke:#fafafa;} 
.darktheme svg.hNav2{fill:none;stroke:#fafafa;}
.darktheme .ki-button:hover svg.hNav{fill:#333;stroke:#333;} 
.darktheme .ki-button:hover svg.hNav2{fill:none;stroke:#333;}
.darktheme .ki-button:hover svg.line{fill:none;stroke:#222}