@font-face {
 font-family: iranyekan;
 font-style: normal;
 font-weight: normal;
 src: url('../fonts/iranyekanwebregularfanum.eot');
 src: url('../fonts/iranyekanwebregularfanum.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
 url('../fonts/iranyekanwebregularfanum.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
 url('../fonts/iranyekanwebregularfanum.ttf') format('truetype'),
 url('../fonts/iranyekanwebregularfanum.svg') format('svg');
}
 
@font-face {
 font-family: iranyekan;
 font-style: normal;
 font-weight: 600;
 src: url('../fonts/iranyekanwebboldfanum.eot');
 src: url('../fonts/iranyekanwebboldfanum.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
 url('../fonts/iranyekanwebboldfanum.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
 url('../fonts/iranyekanwebboldfanum.ttf') format('truetype'),
 url('../fonts/iranyekanwebboldfanum.svg') format('svg');
}

@font-face {
font-family: 'fontawesome';
src:url('../fonts/fontawesome-webfont.eot?14663396');
src:url('../fonts/fontawesome-webfont.eot?14663396#iefix') format('embedded-opentype'),
    url('../fonts/fontawesome-webfont.woff?14663396') format('woff'),
    url('../fonts/fontawesome-webfont.ttf?14663396') format('truetype'),
    url('../fonts/fontawesome-webfont.svg?14663396#fontawesome') format('svg');
font-weight:normal;
font-style:normal;
}
.fa {
  display:inline-block;
  font:normal normal normal 14px/1 FontAwesome;
  font-size:inherit;
  text-rendering:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transform:translate(0,0);
}
.fa-2x {
  font-size:2em;
}
.fa-home:before {content: '\f015'; }
.fa-save:before {content: '\f0c7'; }
.fa-rotate:before {content: '\f01e'; }
.fa-menu:before { content: '\f0c9'; }
.fa-retweet:before{content: '\f079';}
.fa-code:before {content: '\f121';}
.fa-css3:before {content: '\f13c';}
.fa-html5:before {content: '\f13b';}
.fa-bars:before {content:'\f0c9';}
.fa-adjust:before{content:"\f042";}
.fa-download:before { content: "\f019";}
.fa-copy:before, .fa-files-o::before { content: "\f0c5"; }
.fa-facebook::before { content: "\f09a"; }
.fa-twitter::before { content: "\f099";}
.fa-linkedin::before { content: "\f0e1";}
.fa-instagram::before { content: "\f16d";}
.fa-whatsapp::before { content: "\f232";}
.fa-spinner::before { content: "\f110";}

div.social_icons .fa {
padding: 10px;
font-size: 25px;
width: 45px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 540px 140px 100px 100px;
}

.buttonload {
  background-color: #04AA6D;
  border: none;
  color: white;
padding: 7px 15px;
font-size: 14px;
font-weight: 700;
border-radius: 50px;

}

a.buttonload{
 text-decoration:none;
/* تولید شده توسط سایت آموزشی فری لرن */
background: #9D50BB;
background: -webkit-linear-gradient(to right, #6E48AA, #9D50BB);
background: linear-gradient(to right, #6E48AA, #9D50BB);
/* تولید شده توسط سایت آموزشی فری لرن */
}

div.share_box{
 text-align:center;
 margin-top:15px;
}

button.btn_copy{
 cursor:pointer;
 padding: 4px 10px;
}

input#input_for_copy{
 text-align:left;
 direction:ltr;
 padding-left: 80px;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  color:#000000;
  margin:0px;
  font-size:100%;
}


.trytopnav {
  height:40px;
  overflow:hidden;
  min-width:380px;
  position:absolute;
  width:100%;
  top:99px;
  background-color:#f2f2f2;
}
.w3-bar .w3-bar-item:hover {
  color:red;
}
a.w3schoolslink {
  padding:0 !important;
  display:inline !important;
}
a.w3schoolslink:hover,a.w3schoolslink:active {
  text-decoration:underline !important;
  background-color:transparent !important;
}
#dragbar{
  position:absolute;
  cursor: pointer;
  z-index:3;
  padding:5px;
}
#shield {
  display:none;
  top:0;
  left:0;
  width:100%;
  position:absolute;
  height:100%;
  z-index:4;
}
#framesize span {
  font-family:iranyekan,Consolas, monospace;
}
#container {
  background-color:#f1f1f1;
  width:100%;
  overflow:auto;
  position:absolute;
  top:138px;
  bottom:0;
  height:auto;
}
#textareacontainer, #iframecontainer {
  float:left;
  height:100%;
  width:50%;
}
#textarea, #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;  
}
#textareawrapper {
  width:100%;
  height:100%;
  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 {
  background-color: #ffffff;
  font-family: consolas,"courier new",monospace;
  font-size:15px;
  height:100%;
  width:100%;
  padding:8px;
  resize: none;
  border:none;
  line-height:normal;    
}
.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;
}
.w3-dropdown-content {width:400px}
  
@media screen and (max-width: 727px) {
  .trytopnav {top:70px;}
  #container {top:108px;}

}
@media screen and (max-width: 467px) {
  .trytopnav {top:60px;}
  #container {top:98px;}
  .w3-dropdown-content {width:100%}


}
@media only screen and (max-device-width: 768px) {
  #iframewrapper {overflow: auto;}
  #container     {min-width:320px;}
  .stack         {display:none;}
  #tryhome       {display:block;}
}

.loader {
    border: 6px solid #f3f3f3; /* Light grey */
    border-top: 6px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
}
#saveLoader {
    margin:20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
#iframewrapper {
	
}

#runbtn {
    padding: 4px 10px;
    border-radius: 5px;
	font-size: 16px;
	margin-top: 3px;
	margin-left: 5px;
}

h4.titlepage a{text-decoration:none;color:white;font-family:iranyekan,tahoma;font-size: 16px;
font-weight: 700;}
h4.titlepage a:hover{color:black;text-decoration:underline;}
.fontsans{font-family:iranyekan,tahoma;}


div.modal{
 font-family:iranyekan;
 direction:rtl;
}

.btn-group button {
  background-color: #393E3C; /* Green background */
  border: 2px solid black; /* Green border */
  color: white; /* White text */
  padding: 10px 24px; /* Some padding */
  cursor: pointer; /* Pointer/hand icon */
  float: left; /* Float the buttons side by side */
}

/* Clear floats (clearfix hack) */
.btn-group:after {
  content: "";
  clear: both;
  display: table;
}

.btn-group button:not(:last-child) {
  border-right: none; /* Prevent double borders */
}

/* Add a background color on hover */
.btn-group button:hover {
  background-color: #04AA6D;
  /* تولید شده توسط سایت آموزشی فری لرن */
background: #ed2024 ;
background: -webkit-linear-gradient(to right, #ff007b, #ed2024 );
background: linear-gradient(to right, #ff007b, #ed2024 );
/* تولید شده توسط سایت آموزشی فری لرن */
}

p.p_footer_modal{
text-align:center;font-weight: 700;font-size: 14px; color: #393e3c;
}

body.darktheme {
  background-color:rgb(40, 44, 52);
}
body.darktheme #tryitLeaderboard{
  background-color:rgb(40, 44, 52);
}
body.darktheme .trytopnav{
  background-color:#616161 !important;
  color:#dddddd;
}
body.darktheme #container {
  background-color:#616161;
}
body.darktheme .trytopnav a {
  color:#dddddd;
}
body.darktheme #tryitLeaderboard{
 background-image: linear-gradient(45deg,rgb(40, 44, 52),rgb(40, 44, 52),rgb(40, 44, 52));
}
body.darktheme h4.titlepage a{
 color:orange;
}
body.darktheme span#framesize{color:#fff;} 
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;}
body.darktheme ::-webkit-scrollbar-thumb:hover {background-color: #aaaaaa;}
body.darktheme #Btn_show_result {
 background-color: #282C34;
}

body.darktheme #Btn_show_result:hover {
 background-color: #a34ac4 !important;
 color: #fff !important;
}

div.btn-group button{
 font-weight: 600;
 font-size: 14px;
}

.fa-facebook {
  background: #3B5998;
  color: white;
  /* تولید شده توسط سایت آموزشی فری لرن */
background: -webkit-linear-gradient(to right, #667db6, #0082c8, #0082c8, #667db6);
background: linear-gradient(to right, #667db6, #0082c8, #0082c8, #667db6);
/* تولید شده توسط سایت آموزشی فری لرن */
}

.fa-twitter {
background: #55ACEE;
background: -webkit-linear-gradient(to right, #00ACE1, #07AAEE, #7357FF);
background: linear-gradient(to right, #00ACE1, #07AAEE, #7357FF);
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
  /* تولید شده توسط سایت آموزشی فری لرن */
background: -webkit-linear-gradient(to right, #2a5298, #1e3c72);
background: linear-gradient(to right, #2a5298, #1e3c72);
/* تولید شده توسط سایت آموزشی فری لرن */
}

.fa-telegram {
background: #55ACEE;
background: -webkit-linear-gradient(to right, #00ACE1, #07AAEE, #7357FF);
background: linear-gradient(to right, #00ACE1, #07AAEE, #7357FF);
  color: white;
}

.fa-pinterest {
  background: #cb2027;
  color: white;
}

.fa-whatsapp {
/* تولید شده توسط سایت آموزشی فری لرن */
background: #1D976C;
background: -webkit-linear-gradient(to right, #006626, #1D976C);
background: linear-gradient(to right, #006626, #1D976C);
/* تولید شده توسط سایت آموزشی فری لرن */
  color: white;
}

.alert {
  padding:10px;
  background-color: #E61414;
  color: white;
  margin-bottom: 15px;
  font-size:15px;
  margin-top: 35px;
}

.alert.success {background-color: #E61414;}

#snackbar {
  visibility: hidden;
  min-width: 250px;
  margin-left: -125px;
  background-color: #04AA6D;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 9999;
  left: 50%;
  bottom: 30px;
  font-size: 14px;
  font-family:iranyekan;
  font-weight:700;
}

#snackbar.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;} 
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;} 
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

span#framesize{
 font-size: 14px;
}

ul.last_save_code {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

ul.last_save_code li {
  border: 2px solid #fff;
  margin-top: -1px;
  background-color: #393e3c;
  padding: 5px 10px;
  font-size: 14px;
  font-weight:700;
  /* تولید شده توسط سایت آموزشی فری لرن */
background: #667db6;
background: -webkit-linear-gradient(to right, #667db6, #0082c8, #0082c8, #667db6);
background: linear-gradient(to right, #667db6, #0082c8, #0082c8, #667db6);
/* تولید شده توسط سایت آموزشی فری لرن */
}

ul.last_save_code li,ul.last_save_code li a{
 color:#fff;
 text-decoration:none;
}

#Btn_show_result {
background-color: #04AA6D;
font-family: iranyekan,'Source Sans Pro', sans-serif;
color: white;
font-size: 15px;
padding: 2px 8px;
margin-top: 5px;
margin-right: 14px;
display: block;
float: right;
border-radius: 5px;
font-weight:700;
}

#Btn_show_result:hover{
 background-color:#607d8b !important;
 color:#fff !important;
}


.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.uppercase {
  text-transform: uppercase;
}

.btn {
  display: inline-block;
  background: transparent;
  color: inherit;
  font: inherit;
  border: 0;
  outline: 0;
  padding: 0;
  transition: all 200ms ease-in;
  cursor: pointer;
}
.btn--primary {
background: #04aa6d;
color: #fff;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1);
border-radius: 5px;
padding: 5px 12px;
}
.btn--primary:hover {
  background: #6c7ff2;
}
.btn--primary:active {
  background: #7f8ff4;
  box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.2);
}
.btn--inside {
  margin-right: -80px;
  position: relative;
z-index: 99999;
}

.form__field {
width: 340px;
background: #fff;
color: #1c1b1b;
font: inherit;
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.1);
border: 0;
outline: 0;
padding: 10px 8px;
}