@import url('https://fonts.cdnfonts.com/css/roboto-condensed');
@import url('https://fonts.cdnfonts.com/css/roboto');
@import url('https://fonts.cdnfonts.com/css/fira-code-2');
@import url('https://fonts.cdnfonts.com/css/cascadia-code');


/* {box-sizing: border-box;}*/

/* Browser Support */
table.browser__dukungan
{border-collapse:collapse;width:100%;}
table.browser__dukungan tr:nth-child(even) {background-color:#FBFBF9;}
table.browser__dukungan tr:nth-child(odd)  {background-color:#ffffff;}
table.browser__dukungan tr.fixzebra        {background-color:#E7E9EB;}

table.browser__dukungan th{
height:44px;background-repeat:no-repeat;background-position:center center;border:1px solid #d4d4d4;
background-color:#fff;font-weight:bold;color:#555555;padding:11px 0px 11px 0px;vertical-align:middle;
}
table.browser__dukungan td{
border:1px solid #d4d4d4; font-weight:bold; text-align:center;padding:8px 0px 8px 0px;vertical-align:top;
}
table.browser__dukungan th:first-child,table.browser__dukungan td:first-child{padding-left:16px}

table.browser__dukungan .browserIE       {background-image:url('https://storage.cicagak.com/c3skrip/icons/browser/ie.png');}
table.browser__dukungan .browserEdge     {background-image:url('https://storage.cicagak.com/c3skrip/icons/browser/edge.png');}
table.browser__dukungan .browserFirefox  {background-image:url('https://storage.cicagak.com/c3skrip/icons/browser/firefox.png')}
table.browser__dukungan .browserChrome   {background-image:url('https://storage.cicagak.com/c3skrip/icons/browser/chrome.gif');}
table.browser__dukungan .browserChrome   {background-image:url('https://storage.cicagak.com/c3skrip/icons/browser/chrome.png');}
table.browser__dukungan .browserSafari   {background-image:url('https://storage.cicagak.com/c3skrip/icons/browser/safari.png');}
table.browser__dukungan .browserOpera    {background-image:url('https://storage.cicagak.com/c3skrip/icons/browser/opera.png')}

body.darkpagetheme table.browser__dukungan th{border:1px solid #38444d;background-color:#1d2a35;color:#ddd;}
body.darkpagetheme table.browser__dukungan td{border:1px solid #38444d;}
body.darkpagetheme table.browser__dukungan tr:nth-child(even) {background-color:#1d2a35;}
body.darkpagetheme table.browser__dukungan tr:nth-child(odd)  {background-color:#38444d;}
body.darkpagetheme table.browser__dukungan tr.fixzebra        {background-color:#1d2a35;}
/* Browser Support */


/*Language Support*/
table.bahasa__dukungan {border:none ;border-collapse:collapse;width:100%;}
table.bahasa__dukungan tr:nth-child(even) {background-color:#FBFBF9; }
table.bahasa__dukungan tr:nth-child(odd)  {background-color:#ffffff; }
table.bahasa__dukungan tr.fixzebra        {background-color:#E7E9EB;}
.th_lang {background:transparent; color:white; padding:2px; text-align:left;} 
.th_ltt {border-radius:2px; background:coral; padding-left:2px; padding-right:2px;}
	.th_ltta {border-radius:2px; background:#0C090A; padding-left:2px; padding-right:2px;}
	.th_lttb {border-radius:2px; background:#0C090A; padding-left:2px; padding-right:2px;}
	.th_lttc {border-radius:2px; background:#0C090A; padding-left:2px; padding-right:2px;}
	.th_lttd {border-radius:2px; background:#0C090A; padding-left:2px; padding-right:2px;}
	.th_ltte {border-radius:2px; background:#0C090A; padding-left:2px; padding-right:2px;}
	.th_lttf {border-radius:2px; background:#0C090A; padding-left:2px; padding-right:2px;}
	.th_lttg {border-radius:2px; background:#0C090A; padding-left:2px; padding-right:2px;}
	.th_ltth {border-radius:2px; background:#0C090A; padding-left:2px; padding-right:2px;}
	.th_ltti {border-radius:2px; background:#0C090A; padding-left:2px; padding-right:2px;}
	.th_lttj {border-radius:2px; background:#0C090A; padding-left:2px; padding-right:2px;}
	.th_lttk {border-radius:2px; background:#0C090A; padding-left:2px; padding-right:2px;}
	.th_lttl {border-radius:2px; background:#0C090A; padding-left:2px; padding-right:2px;}
	.th_lttm {border-radius:2px; background:#0C090A; padding-left:2px; padding-right:2px;}
	.th_lttn {border-radius:2px; background:#0C090A; padding-left:2px; padding-right:2px;}
	.th_ltto {border-radius:2px; background:#0C090A; padding-left:2px; padding-right:2px;}
	.th_lttp {border-radius:2px; background:#0C090A; padding-left:2px; padding-right:2px;}
	.th_lttq {border-radius:2px; background:#0C090A; padding-left:2px; padding-right:2px;}
	.th_lttr {border-radius:2px; background:#0C090A; padding-left:2px; padding-right:2px;}
	.th_ltts {border-radius:2px; background:#0C090A; padding-left:2px; padding-right:2px;}
	.th_lttt {border-radius:2px; background:#0C090A; padding-left:2px; padding-right:2px;}
	.th_lttu {border-radius:2px; background:#0C090A; padding-left:2px; padding-right:2px;}
	.th_lttv {border-radius:2px; background:#0C090A; padding-left:2px; padding-right:2px;}
	.th_lttw {border-radius:2px; background:#0C090A; padding-left:2px; padding-right:2px;}
	.th_lttx {border-radius:2px; background:#0C090A; padding-left:2px; padding-right:2px;}
	.th_ltty {border-radius:2px; background:#0C090A; padding-left:2px; padding-right:2px;}
	.th_lttz {border-radius:2px; background:#0C090A; padding-left:2px; padding-right:2px;}
/*Language Support*/	

/* scroll theme Not Support Firefox  
#editing::-webkit-scrollbar{ width: 8px; height: 8px;}
#editing::-webkit-scrollbar-track{ background: #ccc; border-radius: 10px;}
#editing::-webkit-scrollbar-thumb{ background: coral; border-radius: 10px;}
#editing::-webkit-scrollbar-thumb:hover{ background: #007C80; cursor:pointer;}

#editing2::-webkit-scrollbar{ width: 8px; height: 8px;}
#editing2::-webkit-scrollbar-track{ background: #ccc; border-radius: 10px;}
#editing2::-webkit-scrollbar-thumb{ background: coral; border-radius: 10px;}
#editing2::-webkit-scrollbar-thumb:hover{ background: #007C80; cursor:pointer;}

#editing3::-webkit-scrollbar{ width: 8px; height: 8px;}
#editing3::-webkit-scrollbar-track{ background: #ccc; border-radius: 10px;}
#editing3::-webkit-scrollbar-thumb{ background: coral; border-radius: 10px;}
#editing3::-webkit-scrollbar-thumb:hover{ background: #007C80; cursor:pointer;}

#editing20::-webkit-scrollbar{ width: 8px; height: 8px;}
#editing20::-webkit-scrollbar-track{ background: #ccc; border-radius: 10px;}
#editing20::-webkit-scrollbar-thumb{ background: coral; border-radius: 10px;}
#editing20::-webkit-scrollbar-thumb:hover{ background: #007C80; cursor:pointer;}

#highlighting::-webkit-scrollbar{ width: 8px; height: 8px;}
#highlighting::-webkit-scrollbar-track{ background: #ccc; border-radius: 10px;}
#highlighting::-webkit-scrollbar-thumb{ background: coral; border-radius: 10px;}

#highlighting2::-webkit-scrollbar{ width: 8px; height: 8px;}
#highlighting2::-webkit-scrollbar-track{ background: #ccc; border-radius: 10px;}
#highlighting2::-webkit-scrollbar-thumb{ background: coral; border-radius: 10px;}

#highlighting3::-webkit-scrollbar{ width: 8px; height: 8px;}
#highlighting3::-webkit-scrollbar-track{ background: #ccc; border-radius: 10px;}
#highlighting3::-webkit-scrollbar-thumb{ background: coral; border-radius: 10px;}

#highlighting20::-webkit-scrollbar{ width: 8px; height: 8px;}
#highlighting20::-webkit-scrollbar-track{ background: #ccc; border-radius: 10px;}
#highlighting20::-webkit-scrollbar-thumb{ background: coral; border-radius: 10px;}
*/
/* end scroll theme*/



/* div 2 kolom */
.column {float: left;width: 50%;padding: 10px;height: 300px;}
.row:after {content: "";display: table;clear: both;}
/* div 2 kolom */

.cicagakLogo1 { color:#454545; font-size:18px; font-family:'Roboto Condensed', Arial; float:right; padding:4px;}
.cicagakLogo2 { color:#454545; font-size:24px; font-family:'Roboto Condensed', Arial; float:right; padding:6px;}
blockquote {
  background: #eee;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  border-radius:8px;
  text-align:left;
}
blockquote:before {
  color: #ccc;
  /*content: open-quote;*/
  font-size: 12pt;
  font-family:monospace;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p{
  color:#6698FF;
  cursor:pointer;
  display: inline;
  font-size: 12pt;
  font-style:normal;
  font-family:monospace;
  font-weight:bold;
}
  blockquote p:hover{color:#46C7C7;}
  
/* /// Daftar ///////////////// */ 

  .divTool {
	background:white;
	box-shadow:0 0 2px #000000;
	padding:8px;
	border-radius:2px;
	border:none;
  }
  
  .spnButton{
		background:white;
		border-radius:4px;
		box-shadow:0 0 2px #000000;
    	border:none;
    	cursor:pointer;
		margin:4px;
    	padding:6px 8px;
  	 }
  .spnButton:hover {box-shadow:0 0 6px #000000; font-weight:bold;}
  
        #divCodeWrapper {
            height: calc(100vh - 200px);
            max-height: 600px;
            width: 100%;
            overflow: hidden;
            /*border: 1px solid #a5a5a5;*/
            position: relative;
            border-radius:4px;
        }
        #divCodeWrapper2 {
            height: calc(100vh - 200px);
            max-height: 600px;
            width: 100%;
            overflow: hidden;
            /*border: 1px solid #a5a5a5;*/
            position: relative;
            border-radius:4px;
        }
        #divCodeWrapper3 {
            height: calc(100vh - 200px);
            max-height: 600px;
            width: 100%;
            overflow: hidden;
            /*border: 1px solid #a5a5a5;*/
            position: relative;
            border-radius:4px;
        }
		#divCodeWrapper4 {
            height: calc(100vh - 200px);
            max-height: 600px;
            width: 100%;
            overflow: hidden;
            /*border: 1px solid #a5a5a5;*/
            position: relative;
            border-radius:4px;
        }
        
		#divCodeWrapper20 {
            height: calc(100vh - 200px);
            max-height: 540px;
            width: 100%;
            overflow: hidden;
            /*border: 1px solid #a5a5a5;*/
            position: relative;
			border-radius:2px;
            box-shadow:0 0 4px #454545;
        }   

		#divCodeWrapperBrowser {
            height: calc(100vh - 200px);
            max-height: 600px;
            width: 100%;
            overflow: hidden;
            /*border: 1px solid #a5a5a5;*/
            position: relative;
        }   
		
		#divCodeWrapperLine {
            height: calc(100vh - 200px);
            max-height: 600px;
            overflow: hidden;
            /*border: 1px solid #a5a5a5;*/
            position: relative;
        } 
		#divCodeWrapperLine2 {
            height: calc(100vh - 200px);
            max-height: 600px;
            overflow: hidden;
            /*border: 1px solid #a5a5a5;*/
            position: relative;
        } 
        #divCodeWrapperLine3{
            height: calc(100vh - 200px);
            max-height: 600px;
            overflow: hidden;
            /*border: 1px solid #a5a5a5;*/
            position: relative;
        } 
        #divCodeWrapperLine4{
            height: calc(100vh - 200px);
            max-height: 600px;
            overflow: hidden;
            /*border: 1px solid #a5a5a5;*/
            position: relative;
        } 
        #divCodeWrapperLine20 {
            height: calc(100vh - 200px);
            max-height: 540px;
            overflow: hidden;
            /*border: 1px solid #a5a5a5;*/
            position: relative;
            box-shadow:0 0 2px #454545;
            border-radius:2px;
            margin-right:4px;
        } 
		
		#myCode {
            height: calc(180vh - 200px);
            max-height: 740px;
            width: 100%;
            overflow: hidden;
            position: relative;
            border-radius:4px;
        }

.html-tool {
    font-family: "Roboto Mono",monospace;
    font-size:14px;
    margin-bottom:6px;
    padding:8px;
    background:#f1f1f1;
    border-radius:2px;
    box-shadow:0 0 2px #000000;
    height:auto;
	}
	
.spanTool {
	margin:0px;
	}

.btnTool {
	color:black;
	font-size:14px;
	font-family:'Roboto Condensed',monospace; 
	background: white; 
	border-radius: 2px; 
	box-shadow: #9051FA 0px 0px 2px;
	cursor: pointer; 
	padding-top: 1px; padding-bottom: 1px;
	margin:4px 0px; 
	text-align: center; 
	border: none;
	outline: none;
	}
		.btnTool:hover {
        font-weight:normal;
		/*background-color: #9051FA;*/
		background-color:#ffe ;
        color:#454545;
        box-shadow: rgb(0, 0, 0) 0px 0px 2px; 
         
  		}

.btnCopyCode {
	color:black;
	font-size:14px;
	font-family:monospace;
	background: white; 
	border-radius: 4px; 
	box-shadow: rgb(0, 0, 0) 0px 0px 2px; 
	cursor: pointer; 
	padding: 4px;
	margin:2px; 
	text-align: center; 
	border: none;
	outline: none;
	}
		.btnCopyCode:hover {
        font-weight:bold;
		/*background-color: #9051FA;*/
		background-color:#2A2A2B ;
        color:#ffffff;
        box-shadow: #9051FA 0px 0px 2px; 
  		}
  
  .btnCopyCode1 {
	color:#00BEFF;
	font-size:14px;
	font-family:'Roboto Condensed',monospace;
	background: white; 
	border-radius: 2px; 
	box-shadow: #9051FA 0px 0px 2px; 
	cursor: pointer; 
	padding-top: 1px; padding-bottom: 1px;
	margin:0px; 
	text-align: center; 
	border: none;
	outline: none;
	}
		.btnCopyCode1:hover {
        font-weight:bold;
		background-color:#ffe ;
        box-shadow: rgb(0, 0, 0) 0px 0px 2px; 
  	}
	
	.btnCopyCode2 {
	color:#FF8C00;
	font-size:14px;
	font-family:'Roboto Condensed',monospace;
	background: white; 
	border-radius: 2px;
	box-shadow: #9051FA 0px 0px 2px; 
	cursor: pointer; 
	padding-top: 1px; padding-bottom: 1px;
	margin:0px; 
	text-align: center; 
	border: none;
	outline: none;
	}
		.btnCopyCode2:hover {
        font-weight:bold;
		background-color:#ffe ;
        box-shadow: rgb(0, 0, 0) 0px 0px 2px;  
  	}
	
	.btnCopyCode3 {
	color:#1B8A6B;
	font-size:14px;
	font-family:'Roboto Condensed',monospace;
	background: white; 
	border-radius: 2px; 
	box-shadow: #9051FA 0px 0px 2px;
	cursor: pointer; 
	padding-top: 1px; padding-bottom: 1px;
	margin:0px; 
	text-align: center; 
	border: none;
	outline: none;
	}
		.btnCopyCode3:hover {
        font-weight:bold;
		background-color:#ffe ;
        box-shadow: rgb(0, 0, 0) 0px 0px 2px; 
  	}
  
	.btnCopyCode4 {
	color:#F67280;
	font-size:14px;
	font-family:'Roboto Condensed',monospace;
	font-weight:bold;
	background: white; 
	border-radius: 2px; 
	box-shadow: #9051FA 0px 0px 2px;
	cursor: pointer; 
	padding-top: 1px; padding-bottom: 1px;
	margin:0px; 
	text-align: center; 
	border: none;
	outline: none;
	}
		.btnCopyCode4:hover {
        font-weight:bold;
		background-color:#ffe ;
        box-shadow: rgb(0, 0, 0) 0px 0px 2px;
  	}
	
	
	.btnPostCode {
	color:#F67280;
	font-size:14px;
	font-family:'Roboto Condensed',monospace;
	background: white; 
	border-radius: 2px; 
	box-shadow: #9051FA 0px 0px 2px;
	cursor: pointer; 
	padding-top: 1px; padding-bottom: 1px;
	margin:4px 0px; 
	text-align: center; 
	border: none;
	outline: none;
	}
		.btnPostCode:hover {
        font-weight:bold;
		background-color:#ffe ;
        box-shadow: rgb(0, 0, 0) 0px 0px 2px;

  	}

	.aButton {
	color:coral;
	font-family:'Roboto Condensed',monospace;
	font-weight:bold;
	background: white; 
	border-radius:2px;
	box-shadow: #9051FA 0px 0px 2px;
	cursor: pointer;
	padding:2px;
	}
		.aButton:hover {
        font-weight:bold;
		background-color:#ffe ;
        box-shadow: rgb(0, 0, 0) 0px 0px 2px;
  	}

.btnHasil {
	color:#000000;
	background:#ffffff;
	font-size:14px;
	font-weight:bold;
	text-align:center;
	padding:4px;
	width:80px;
	height:20px;
	box-shadow:0 0 2px #000000;
	border-radius:5px;
	cursor:pointer;
	}
		.btnHasil:hover {
		box-shadow:0 0 6px #000000;
		color:green;
		}
  
.iframes {
    width: 100%; 
    height: 35em; 
    border:none; 
    box-shadow:0 0 4px #000000;
	background:#fff;
    }
    
.iframes2 {
    width: 100%; 
    height: calc(100% - 32px);
    border:none; 
    /*box-shadow:0 0 4px #000000;*/
	background:#fff;
    }
.iframeToolDown { color:#757575; cursor:pointer; font-family:'Roboto Condensed'; height:auto; padding-left:4px;}

.input1 {
	background:#ffffff;
	border-radius:2px;
	box-shadow: #9051FA 0px 0px 2px;
	border:none;
	font-family:'Roboto Condensed';
	margin:2px;
	text-align:center;
	width:100px;
	}
		.input1:hover {
		background-color:#ffe ;
        box-shadow: rgb(0, 0, 0) 0px 0px 2px;
        color:#454545;
		}
		.input1:focus {outline: none;}

.select_lang {
	background:#ffffff;
	border-radius:2px;
	box-shadow: #9051FA 0px 0px 2px;
	border:none;
	font-family:'Roboto Condensed';
	margin:4px;
	text-align:center;
	}

.input_update {
	background:#ffffff;
	border-radius:2px;
	box-shadow: #9051FA 0px 0px 2px;
	border:none;
	font-family:'Roboto Condensed';
	font-size:16px;
	margin:4px;
	text-align:left;
	padding:2px;
	width:90%;
	}
		.input__update:hover {
		background-color:#ffe ;
        box-shadow: rgb(0, 0, 0) 0px 0px 2px;
        color:#454545;
		}
		.input__update:focus {outline: none;}

.snotif {
	float:left;
	margin:4px;
	color:#757575;
	font-family:'Roboto Condensed',monospace;
	padding:6 10px;
}

.textarea-container {
    display: flex;
    position: relative;
	padding:1px;
	height: calc(100vh - 200px);
    max-height: 600px;
	
}

.textarea-container2 {
    display: flex;
    position: relative;
	padding:1px;
	height: calc(100vh - 200px);
    max-height: 540px;
	
}
.line-numbers {
    margin: 5px;
	padding: 10px;
    border-right: 1px solid #ddd;
    /*background: #f0f0f0;*/
    background:transparent;
    color:#757575;
	border-radius:0px;
    text-align: right;
    user-select: none;
    line-height: 1.5;
    font-size: 12pt;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	white-space: nowrap;
	
}


/* Post Content */
.judul-konten {
	
}
.text-konten {
	
}
.spn-1 {
	background:#EDE6D6;
	border-radius:4px;
	padding:1px 4px;
}
.spn-1b {/* white cream */
	background:#EDE6D6;
	border-radius:4px;
	font-weight:bold;
	padding:1px 2px;
}
.spn-2 {/* light green */
	background:#DBF9DB;
	border-radius:4px;
	padding:1px 4px;
}
.spn-2b {
	background:#DBF9DB;
	border-radius:4px;
	font-weight:bold;
	padding:1px 4px;
}
.spn-3 {/* light yellow */
	background:#FFFFC2;
	border-radius:4px;
	padding:1px 4px;
}
.spn-3b {
	background:#FFFFC2;
	border-radius:4px;
	font-weight:bold;
	padding:1px 4px;
}
.spn-4 {/* sea blue */
	background:#C2DFFF;
	border-radius:4px;
	padding:1px 4px;
}
.spn-4b {
	background:#C2DFFF;
	border-radius:4px;
	font-weight:bold;
	padding:1px 4px;
}


/* Please see the article */
/* Start of prism.js syntax highlighting 
/###################################################### */

#editing, #highlighting {
  /* Both elements need the same text and space styling so they are directly on top of each other 
	custom margin 
	margin: 5px; width: calc(100% - 32px); height: calc(100% - 32px);
  */
  margin: 5px;
  padding: 10px;
  border: 0; 
  width: calc(100% - 32px); 
  height: calc(100% - 32px);
}
#editing, #highlighting * {
  /* Also add text styles to highlighing tokens */
  font-size: 12pt;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  line-height: 1.5;
  tab-size:4;
}

#editing, #highlighting {
  /* In the same place */
  position: absolute;
  top: 0;
  left: 0;
}
#editing, #highlighting:focus {
    outline: none;
    border: none;
}

/* ############################################# */

#editing2, #highlighting2 {
  /* Both elements need the same text and space styling so they are directly on top of each other */
  margin: 5px;
  padding: 10px;
  border: 0;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
}
#editing2, #highlighting2 * {
  /* Also add text styles to highlighing tokens */
  font-size: 12pt;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  line-height: 1.5;
  tab-size: 4;
}
#editing2, #highlighting2 {
  /* In the same place */
  position: absolute;
  top: 0;
  left: 0;
}
#editing2, #highlighting2:focus {
    outline: none;
    border: none;
}

/* ############################################# */

#editing3, #highlighting3 {
  /* Both elements need the same text and space styling so they are directly on top of each other */
  margin: 5px;
  padding: 10px;
  border: 0;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
}
#editing3, #highlighting3 * {
  /* Also add text styles to highlighing tokens */
  font-size: 12pt;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  line-height: 1.5;
  tab-size: 4;
}
#editing3, #highlighting3{
  /* In the same place */
  position: absolute;
  top: 0;
  left: 0;
}
#editing3, #highlighting3:focus {
    outline: none;
    border: none;
}

/* ############################################# */

#editing4, #highlighting4 {
  /* Both elements need the same text and space styling so they are directly on top of each other */
  margin: 5px;
  padding: 10px;
  border: 0;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  border-radius:2px;
}
#editing4, #highlighting4 * {
  /* Also add text styles to highlighing tokens */
  font-size: 12pt;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  line-height: 1.5;
  tab-size: 2;
}


#editing4, #highlighting4{
  /* In the same place */
  position: absolute;
  top: 0;
  left: 0;
}

/* ############################################# */

#editing5, #highlighting5 {
  /* Both elements need the same text and space styling so they are directly on top of each other */
  margin: 5px;
  padding: 10px;
  border: 0;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  border-radius:2px;
}
#editing5, #highlighting5 * {
  /* Also add text styles to highlighing tokens */
  font-size: 12pt;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  line-height: 1.5;
  tab-size: 2;
}


#editing5, #highlighting5{
  /* In the same place */
  position: absolute;
  top: 0;
  left: 0;
}

/* ############################################# */

#editing6, #highlighting6 {
  /* Both elements need the same text and space styling so they are directly on top of each other */
  margin: 5px;
  padding: 10px;
  border: 0;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  border-radius:2px;
}
#editing6, #highlighting6 * {
  /* Also add text styles to highlighing tokens */
  font-size: 12pt;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  line-height: 1.5;
  tab-size: 2;
}


#editing6, #highlighting6{
  /* In the same place */
  position: absolute;
  top: 0;
  left: 0;
}

/* ############################################# */

#editing7, #highlighting7 {
  /* Both elements need the same text and space styling so they are directly on top of each other */
  margin: 5px;
  padding: 10px;
  border: 0;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  border-radius:2px;
}
#editing7, #highlighting7 * {
  /* Also add text styles to highlighing tokens */
  font-size: 12pt;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  line-height: 1.5;
  tab-size: 2;
}


#editing7, #highlighting7{
  /* In the same place */
  position: absolute;
  top: 0;
  left: 0;
}

/* ############################################# */

#editing8, #highlighting8 {
  /* Both elements need the same text and space styling so they are directly on top of each other */
  margin: 5px;
  padding: 10px;
  border: 0;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  border-radius:2px;
}
#editing8, #highlighting8 * {
  /* Also add text styles to highlighing tokens */
  font-size: 12pt;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  line-height: 1.5;
  tab-size: 2;
}


#editing8, #highlighting8{
  /* In the same place */
  position: absolute;
  top: 0;
  left: 0;
}

/* ############################################# */

#editing9, #highlighting9 {
  /* Both elements need the same text and space styling so they are directly on top of each other */
  margin: 5px;
  padding: 10px;
  border: 0;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  border-radius:2px;
}
#editing9, #highlighting9 * {
  /* Also add text styles to highlighing tokens */
  font-size: 12pt;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  line-height: 1.5;
  tab-size: 2;
}


#editing9, #highlighting9{
  /* In the same place */
  position: absolute;
  top: 0;
  left: 0;
}

/* ############################################# */

#editing10, #highlighting10 {
  /* Both elements need the same text and space styling so they are directly on top of each other */
  margin: 5px;
  padding: 10px;
  border: 0;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  border-radius:2px;
}
#editing10, #highlighting10 * {
  /* Also add text styles to highlighing tokens */
  font-size: 12pt;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  line-height: 1.5;
  tab-size: 2;
}


#editing10, #highlighting10{
  /* In the same place */
  position: absolute;
  top: 0;
  left: 0;
}

/* ############################################# */

#editing11, #highlighting11 {
  /* Both elements need the same text and space styling so they are directly on top of each other */
  margin: 5px;
  padding: 10px;
  border: 0;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  border-radius:2px;
}
#editing11, #highlighting11 * {
  /* Also add text styles to highlighing tokens */
  font-size: 12pt;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  line-height: 1.5;
  tab-size: 2;
}


#editing11, #highlighting11 {
  /* In the same place */
  position: absolute;
  top: 0;
  left: 0;
}

/* ############################################# */

#editing12, #highlighting12 {
  /* Both elements need the same text and space styling so they are directly on top of each other */
  margin: 5px;
  padding: 10px;
  border: 0;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  border-radius:2px;
}
#editing12, #highlighting12 * {
  /* Also add text styles to highlighing tokens */
  font-size: 12pt;
  font-family:Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  line-height: 1.5;
  tab-size: 2;
}


#editing12, #highlighting12{
  /* In the same place */
  position: absolute;
  top: 0;
  left: 0;
}

/* ############################################# */

#editing13, #highlighting13 {
  /* Both elements need the same text and space styling so they are directly on top of each other */
  margin: 5px;
  padding: 10px;
  border: 0;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  border-radius:2px;
}
#editing13, #highlighting13 * {
  /* Also add text styles to highlighing tokens */
  font-size: 12pt;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  line-height: 1.5;
  tab-size: 2;
}


#editing13, #highlighting13{
  /* In the same place */
  position: absolute;
  top: 0;
  left: 0;
}

/* ############################################# */

#editing14, #highlighting14 {
  /* Both elements need the same text and space styling so they are directly on top of each other */
  margin: 5px;
  padding: 10px;
  border: 0;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  border-radius:2px;
}
#editing14, #highlighting14 * {
  /* Also add text styles to highlighing tokens */
  font-size: 12pt;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  line-height: 1.5;
  tab-size: 2;
}


#editing14, #highlighting14{
  /* In the same place */
  position: absolute;
  top: 0;
  left: 0;
}

/* ############################################# */

#editing15, #highlighting15 {
  /* Both elements need the same text and space styling so they are directly on top of each other */
  margin: 5px;
  padding: 10px;
  border: 0;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  border-radius:2px;
}
#editing15, #highlighting15 * {
  /* Also add text styles to highlighing tokens */
  font-size: 12pt;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  line-height: 1.5;
  tab-size: 2;
}


#editing15, #highlighting15{
  /* In the same place */
  position: absolute;
  top: 0;
  left: 0;
}

/* ############################################# */

#editing16, #highlighting16 {
  /* Both elements need the same text and space styling so they are directly on top of each other */
  margin: 5px;
  padding: 10px;
  border: 0;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  border-radius:2px;
}
#editing16, #highlighting16 * {
  /* Also add text styles to highlighing tokens */
  font-size: 12pt;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  line-height: 1.5;
  tab-size: 2;
}


#editing16, #highlighting16{
  /* In the same place */
  position: absolute;
  top: 0;
  left: 0;
}

/* ############################################# */

#editing17, #highlighting17 {
  /* Both elements need the same text and space styling so they are directly on top of each other */
  margin: 5px;
  padding: 10px;
  border: 0;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  border-radius:2px;
}
#editing17, #highlighting17 * {
  /* Also add text styles to highlighing tokens */
  font-size: 12pt;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  line-height: 1.5;
  tab-size: 2;
}


#editing17, #highlighting17{
  /* In the same place */
  position: absolute;
  top: 0;
  left: 0;
}

/* ############################################# */

#editing18, #highlighting18 {
  /* Both elements need the same text and space styling so they are directly on top of each other */
  margin: 5px;
  padding: 10px;
  border: 0;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  border-radius:2px;
}
#editing18, #highlighting18 * {
  /* Also add text styles to highlighing tokens */
  font-size: 12pt;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  line-height: 1.5;
  tab-size: 2;
}


#editing18, #highlighting18{
  /* In the same place */
  position: absolute;
  top: 0;
  left: 0;
}

/* ############################################# */

#editing19, #highlighting19 {
  /* Both elements need the same text and space styling so they are directly on top of each other */
  margin: 5px;
  padding: 10px;
  border: 0;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  border-radius:2px;
}
#editing19, #highlighting19 * {
  /* Also add text styles to highlighing tokens */
  font-size: 12pt;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  line-height: 1.5;
  tab-size: 2;
}


#editing19, #highlighting19 {
  /* In the same place */
  position: absolute;
  top: 0;
  left: 0;
}

/* ############################################# */

#editing20, #highlighting20 {
  /* Both elements need the same text and space styling so they are directly on top of each other */
  margin: 5px;
  padding: 10px;
  border: 0;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  border-radius:2px;
}
#editing20, #highlighting20 * {
  /* Also add text styles to highlighing tokens */
  font-size: 12pt;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  line-height: 1.5;
  tab-size: 4;
}

#editing20, #highlighting20{
  /* In the same place */
  position: absolute;
  top: 0;
  left: 0;
}
#editing20, #highlighting20:focus {
    outline: none;
    border: none;
}


/* Move the textarea in front of the result */

#editing {
  z-index: 1;
}
#highlighting {
  z-index: 0;
}
#editing2 {
  z-index: 1;
}
#highlighting2 {
  z-index: 0;
}
#editing3 {
  z-index: 1;
}
#highlighting3 {
  z-index: 0;
}
#editing4 {
  z-index: 1;
}
#highlighting4 {
  z-index: 0;
}
#editing5 {
  z-index: 1;
}
#highlighting5 {
  z-index: 0;
}
#editing6 {
  z-index: 1;
}
#highlighting6 {
  z-index: 0;
}
#editing7 {
  z-index: 1;
}
#highlighting7 {
  z-index: 0;
}
#editing8 {
  z-index: 1;
}
#highlighting8 {
  z-index: 0;
}
#editing9 {
  z-index: 1;
}
#highlighting9 {
  z-index: 0;
}
#editing10 {
  z-index: 1;
}
#highlighting10 {
  z-index: 0;
}
#editing11 {
  z-index: 1;
}
#highlighting11 {
  z-index: 0;
}
#editing12 {
  z-index: 1;
}
#highlighting12 {
  z-index: 0;
}
#editing13 {
  z-index: 1;
}
#highlighting13 {
  z-index: 0;
}
#editing14 {
  z-index: 1;
}
#highlighting14 {
  z-index: 0;
}
#editing15 {
  z-index: 1;
}
#highlighting15 {
  z-index: 0;
}
#editing16 {
  z-index: 1;
}
#highlighting16 {
  z-index: 0;
}
#editing17 {
  z-index: 1;
}
#highlighting17 {
  z-index: 0;
}
#editing18 {
  z-index: 1;
}
#highlighting18 {
  z-index: 0;
}
#editing19 {
  z-index: 1;
}
#highlighting19 {
  z-index: 0;
}
#editing20 {
  z-index: 1;
}
#highlighting20 {
  z-index: 0;
}





/* Make textarea almost completely transparent */

#editing {
  color: transparent;
  background: transparent;
  caret-color: white; /* Or choose your favourite color */
}
#editing2 {
  color: transparent;
  background: transparent;
  caret-color: white; /* Or choose your favourite color */
}
#editing3 {
  color: transparent;
  background: transparent;
  caret-color: white; /* Or choose your favourite color */
}
#editing4 {
  color: transparent;
  background: transparent;
  caret-color: white; /* Or choose your favourite color */
}
#editing5 {
  color: transparent;
  background: transparent;
  caret-color: white; /* Or choose your favourite color */
}
#editing6{
  color: transparent;
  background: transparent;
  caret-color: white; /* Or choose your favourite color */
}
#editing7{
  color: transparent;
  background: transparent;
  caret-color: white; /* Or choose your favourite color */
}
#editing8{
  color: transparent;
  background: transparent;
  caret-color: white; /* Or choose your favourite color */
}
#editing9{
  color: transparent;
  background: transparent;
  caret-color: white; /* Or choose your favourite color */
}
#editing10{
  color: transparent;
  background: transparent;
  caret-color: white; /* Or choose your favourite color */
}
#editing11{
  color: transparent;
  background: transparent;
  caret-color: white; /* Or choose your favourite color */
}
#editing12{
  color: transparent;
  background: transparent;
  caret-color: white; /* Or choose your favourite color */
}
#editing13{
  color: transparent;
  background: transparent;
  caret-color: white; /* Or choose your favourite color */
}
#editing14{
  color: transparent;
  background: transparent;
  caret-color: white; /* Or choose your favourite color */
}
#editing15{
  color: transparent;
  background: transparent;
  caret-color: white; /* Or choose your favourite color */
}
#editing16{
  color: transparent;
  background: transparent;
  caret-color: white; /* Or choose your favourite color */
}
#editing17{
  color: transparent;
  background: transparent;
  caret-color: white; /* Or choose your favourite color */
}
#editing18{
  color: transparent;
  background: transparent;
  caret-color: white; /* Or choose your favourite color */
}
#editing19{
  color: transparent;
  background: transparent;
  caret-color: white; /* Or choose your favourite color */
}
#editing20{
  color: transparent;
  background: transparent;
  caret-color: white; /* Or choose your favourite color */
}


/* Can be scrolled */
#editing, #highlighting {
  overflow: auto;
  white-space: nowrap; /* Allows textarea to scroll horizontally */
}
#editing2, #highlighting2 {
  overflow: auto;
  white-space: nowrap; /* Allows textarea to scroll horizontally */
}
#editing3, #highlighting3 {
  overflow: auto;
  white-space: nowrap; /* Allows textarea to scroll horizontally */
}
#editing4, #highlighting4 {
  overflow: auto;
  white-space: nowrap; /* Allows textarea to scroll horizontally */
}
#editing5, #highlighting5 {
  overflow: auto;
  white-space: nowrap; /* Allows textarea to scroll horizontally */
}
#editing6, #highlighting6{
  overflow: auto;
  white-space: nowrap; /* Allows textarea to scroll horizontally */
}
#editing7, #highlighting7{
  overflow: auto;
  white-space: nowrap; /* Allows textarea to scroll horizontally */
}
#editing8, #highlighting8{
  overflow: auto;
  white-space: nowrap; /* Allows textarea to scroll horizontally */
}
#editing9, #highlighting9{
  overflow: auto;
  white-space: nowrap; /* Allows textarea to scroll horizontally */
}
#editing10, #highlighting10{
  overflow: auto;
  white-space: nowrap; /* Allows textarea to scroll horizontally */
}
#editing11, #highlighting11{
  overflow: auto;
  white-space: nowrap; /* Allows textarea to scroll horizontally */
}
#editing12, #highlighting12{
  overflow: auto;
  white-space: nowrap; /* Allows textarea to scroll horizontally */
}
#editing13, #highlighting13{
  overflow: auto;
  white-space: nowrap; /* Allows textarea to scroll horizontally */
}
#editing14, #highlighting14{
  overflow: auto;
  white-space: nowrap; /* Allows textarea to scroll horizontally */
}
#editing15, #highlighting15{
  overflow: auto;
  white-space: nowrap; /* Allows textarea to scroll horizontally */
}
#editing16, #highlighting16{
  overflow: auto;
  white-space: nowrap; /* Allows textarea to scroll horizontally */
}
#editing17, #highlighting17{
  overflow: auto;
  white-space: nowrap; /* Allows textarea to scroll horizontally */
}
#editing18, #highlighting18{
  overflow: auto;
  white-space: nowrap; /* Allows textarea to scroll horizontally */
}
#editing19, #highlighting19{
  overflow: auto;
  white-space: nowrap; /* Allows textarea to scroll horizontally */
}
#editing20, #highlighting20{
  overflow: auto;
  white-space: nowrap; /* Allows textarea to scroll horizontally */
}



/* No resize on textarea */
#editing {
  resize: none;
}
#editing2 {
  resize: none;
}
#editing3 {
  resize: none;
}
#editing4 {
  resize: none;
}
#editing5 {
  resize: none;
}
#editing6 {
  resize: none;
}
#editing7 {
  resize: none;
}
#editing8 {
  resize: none;
}
#editing9 {
  resize: none;
}
#editing10 {
  resize: none;
}
#editing11 {
  resize: none;
}
#editing12 {
  resize: none;
}
#editing13 {
  resize: none;
}
#editing14 {
  resize: none;
}
#editing15 {
  resize: none;
}
#editing16 {
  resize: none;
}
#editing17 {
  resize: none;
}
#editing18 {
  resize: none;
}
#editing19 {
  resize: none;
}
#editing20 {
  resize: none;
}



/* Paragraphs; First Image */
/* "*{" Semua Page Font Sama */

/*
{
  font-family: "Roboto Mono", monospace;
}
*/

p code {
  border-radius: 2px;
  background-color: #eee;
  color: #111;
}

/*
code[class*="language-"],
pre[class*="language-"] {
	color: #ccc;
	background: none;
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	font-size: 1em;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;

}

//# Code blocks #/
pre[class*="language-"] {
	padding: 1em;
	margin: .5em 0;
	overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: #2d2d2d;
}

//# Inline code #/
:not(pre) > code[class*="language-"] {
	padding: .1em;
	border-radius: .3em;
	white-space: normal;
}

.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: #999;
}

.token.punctuation {
	color: #ccc;
}

.token.tag,
.token.attr-name,
.token.namespace,
.token.deleted {
	color: #e2777a;
}

.token.function-name {
	color: #6196cc;
}

.token.boolean,
.token.number,
.token.function {
	color: #f08d49;
}

.token.property,
.token.class-name,
.token.constant,
.token.symbol {
	color: #f8c555;
}

.token.selector,
.token.important,
.token.atrule,
.token.keyword,
.token.builtin {
	color: #cc99cd;
}

.token.string,
.token.char,
.token.attr-value,
.token.regex,
.token.variable {
	color: #7ec699;
}

.token.operator,
.token.entity,
.token.url {
	color: #67cdcc;
}

.token.important,
.token.bold {
	font-weight: bold;
}
.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}

.token.inserted {
	color: green;
}
*/
/* PrismJS 1.29.0 */


/* Plugin styles: Diff Highlight */
pre.diff-highlight.diff-highlight > code .token.deleted:not(.prefix),
pre > code.diff-highlight.diff-highlight .token.deleted:not(.prefix) {
	background-color: rgba(255, 0, 0, .3);
	display: inline;
}

pre.diff-highlight.diff-highlight > code .token.inserted:not(.prefix),
pre > code.diff-highlight.diff-highlight .token.inserted:not(.prefix) {
	background-color: rgba(0, 255, 128, .3);
	display: inline;
}

/* End of prism.js syntax highlighting /###################################################### */ 

  
  
/* # Style tab  ###################################################### */ 

/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
border-radius: 2px;
}

/* Style the buttons inside the tab */
.tab button {
font-family: monospace;
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 4px 6px;
transition: 0.3s;
font-size: 14px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  color:#454545;
  font-weight:bold;
  background-color:#E1D9D1 ;/*#9051FA*/
  border-radius:4px;
  /*padding-top: 12px;*/
}

/* Create an active/current tablink class */
.tab button.active {
	border: 1px;
    color:#ffffff;
	font-weight:bold;
	background-color: #ffffff; 
	border-radius:2px;
}

/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 6px;
border: 1px solid #ccc;
border-top: none;
}


@media only screen and (max-width: 540px) 
{
	.snotif {display:none;}
}

@media only screen and (min-width: 800px) 
{
	
	#editing, #highlighting {
	  margin: 5px;
	  padding: 10px;
	  border: 0; 
	  width: calc(100% - 32px); 
	  height: calc(100% - 18px);
	}
	
	#editing2, #highlighting2 {
	  margin: 5px;
	  padding: 10px;
	  border: 0; 
	  width: calc(100% - 32px); 
	  height: calc(100% - 18px);
	}
	
	#editing3, #highlighting3 {
	  margin: 5px;
	  padding: 10px;
	  border: 0; 
	  width: calc(100% - 32px); 
	  height: calc(100% - 18px);
	}
	
	#editing4, #highlighting4 {
	  margin: 5px;
	  padding: 10px;
	  border: 0; 
	  width: calc(100% - 32px); 
	  height: calc(100% - 18px);
	}
	
	#editing20, #highlighting20 {
	  margin: 5px;
	  padding: 10px;
	  border: 0; 
	  width: calc(100% - 32px); 
	  height: calc(100% - 18px);
	}
}