body {
    font-family: 'B Homa';
    color: #a6a6a6;
}
h1{
   font-family: 'IranNastaliq';
   letter-spacing: 0;
   margin-bottom: 0;
}

h2,h3,h4,h5,h6{
    font-family: 'B Titr';
    letter-spacing: 0;
    color: #DFDFDF;
}
a {
   -webkit-transition:all 0.8s;-moz-transition:all 0.8s;-o-transition:all 0.8s;transition:all 0.8s;
}

a:hover {
     color:#df6f8b;
}

pre {
  color:#E7E6E6;
}

input, textarea, label{
    font-family: 'B Nazanin';
    font-size:12px;
    -webkit-transition:all 0.8s;-moz-transition:all 0.8s;-o-transition:all 0.8s;transition:all 0.8s;
}

.ltr{
  direction:ltr;
}
.rtl{
  direction:rtl;
}
.inline{
  display:inline-block;
}
.EnInFa{
   display:inline-block;direction:ltr; font-family: sans-serif;
}
.hinter{
   cursor: help;color:#f5b74e;
}

.HintNotice {
  color:rgb(226, 106, 106);font-style:italic;display:inline;
}

.coderbox textarea{
      font-family: Tahoma;
}

section #app_info p{
  margin-bottom: 5px;
}

section #app_info div {
    color: #a6a6a6;
}
div.appbox, section #app_info > div {
    width: 100%;
    position: relative;
    float: right;
}

.notebox {
    margin-bottom: 15px;
    padding: 8px;
    border: 0;
    border-right: 5px solid #666;
    border-radius: 4px;
    background: #111;
    width: 100%;
    float: right;
}
.notebox strong {
    font-family: IranNastaliq;
    font-size: 18px;
}

.appbox{
    margin-bottom: 15px;
    padding: 8px;
    border: 1px solid #cfd0d0;
    background: #292929;
    border-color: #333;
    width: 100%;
    float: right;
}

.fontlist{
    padding: 5px 8px 20px;
}

.deactive{
    float: right;
    -webkit-transform:scale(0.7,0.7);
    -moz-transform:scale(0.7,0.7);
    -o-transform:scale(0.7,0.7);
    transform:scale(0.7,0.7);

    transition-timing-function: ease-in;
    /*text-shadow: 0 0 3px rgba(255,0,255,0.3); */
    color: #a6a6a6;
}
.deactive:hover{
    color: #fff;
}
.active{

    float: right;
    transition-timing-function: ease-in-out;

    -webkit-transform:scale(1,1);
    -moz-transform:scale(1,1);
    -o-transform:scale(1,1);
    transform:scale(1,1);
    text-shadow: 0px 0px 25px #fff;
    optacity:1;
    -moz-opacity:1;
    -webkit-opacity:1;
    -o-opacity:1;
    filter:alpha(opacity=100);
    color:#319ebc;

    animation:lithing 5s infinite;
    -webkit-animation:lithing 5s infinite;
}

@keyframes lithing {
    50% {text-shadow: 0px 0px 10px #fff;color:rgba(0,0,0,0.01);}
}
@-webkit-keyframes lithing{
    50% {text-shadow: 0px 0px 10px #fff;color:rgba(0,0,0,0.01);}
}

.fontlbl{
    display: inline-block;
    position: relative;
    font-weight: normal;
    font-size: 25px;
    padding:2px 5px;
    line-height: 30px;
}
.opacity1 {
     optacity:1.0;
     -moz-opacity:1.0;
     -webkit-opacity:1.0;
     -o-opacity:1.0;
     filter:alpha(opacity=100);
}
.opacity0 {
     optacity:0.01;
     -moz-opacity:0.01;
     -webkit-opacity:0.01;
     -o-opacity:0.01;
     filter:alpha(opacity=1);
}
.fontlbl span{
    display: none;
    position: absolute;
    font-size: 15px;
    background-color: #000;
    border: 1px solid #444;
    margin-top: 10px;
    border-radius: 5px;
    padding:5px;
    z-index: 3;
}
.fontlbl:hover span{
    display: block;
}
.fontlbl span:hover{
  font-size: 25px;
}
.fontlbl input[type="checkbox"], .fontlbl .checkbox {
       position: absolute;
       overflow: hidden;
       height: 1px;
       max-height: 1px;
       width: 1px;
       optacity:0.01;
        -moz-opacity:0.01;
        -webkit-opacity:0.01;
        -o-opacity:0.01;
        filter:alpha(opacity=1);
}
.fontlbl .checkbox {
       height: 0px;
       width: 0px;
}
.fontlbl input[type="checkbox"] {
  margin: 5px;
  top:5px;
}
.button.pink:hover, .zeroclipboard-is-hover {
  cursor: pointer;
-webkit-box-shadow: 0px 0px 3px #bbb;
-moz-box-shadow: 0px 0px 3px #bbb;
box-shadow: 0px 0px 3px #bbb;
}

.button.pink:active, .zeroclipboard-is-active{
     background: -webkit-linear-gradient(top, #f56778 0%,#f78297 100%) !important;
     background: -moz-linear-gradient(top, #f56778 0%,#f78297 100%) !important;
     background: -o-linear-gradient(top, #f56778 0%,#f78297 100%) !important;
     background: linear-gradient(top, #f56778 0%,#f78297 100%) !important;
}

.button{
  font-family: "B Elham";
}

section #app_info p#loadsize_hint{
         margin-bottom: 5px;
          -webkit-transition:all 0.8s;-moz-transition:all 0.8s;-o-transition:all 0.8s;transition:all 0.8s;
}
.hint_info ,section #app_info p.hint_info {
       color: #76A6CF !important;
}
.hint_warning,section #app_info p.hint_warning {
       color: #f63 !important;
}
.hint_danger,section #app_info p.hint_danger {
       color: #f22613 !important;
}




/******************************************************************************/
@-webkit-keyframes progress-bar-stripes{from{background-position:40px 0}
to{background-position:0 0}}
@keyframes progress-bar-stripes{from{background-position:40px 0}
to{background-position:0 0}}                                             /*f5f5f5  */
.progress{height:20px;margin-bottom:20px;overflow:hidden;background-color:#181818;border: 1px solid #323232;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);box-shadow:inset 0 1px 2px rgba(0,0,0,0.1)}
.progress-bar{float:left;width:0;height:100%;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#428bca;-webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);box-shadow:inset 0 -1px 0 rgba(0,0,0,0.15);-webkit-transition:width .6s ease;transition:width .6s ease}
.progress-striped .progress-bar{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-size:40px 40px}
.progress.active .progress-bar{-webkit-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite}
.progress-bar-success{background-color:#5cb85c}/*5cb85c*/
.progress-striped .progress-bar-success{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent)}
.progress-bar-info{background-color:#5bc0de}
.progress-striped .progress-bar-info{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent)}
.progress-bar-warning{background-color:#f0ad4e}
.progress-striped .progress-bar-warning{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent)}
.progress-bar-danger{background-color:#d9534f}
.progress-striped .progress-bar-danger{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent)}
/*----  Main ----*/
.reset.margin.bottom {margin-bottom: 0!important;}
.progress{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;margin-right:8px;}
.progress.progress-bar-mini{height:5px}

.progress .progress-bar{background-color:#a6a6a6;border-left:4px solid #ccc;border-bottom:0;border-radius:4px;}

.progress .progress-bar.progress-bar-primary{border-left:4px solid #aaa;
    background: #f9f9f9;
    background: -moz-linear-gradient(top, #f9f9f9 0%, #bbb 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#bbb));
    background: -webkit-linear-gradient(top, #f9f9f9 0%,#bbb 100%);
    background: -o-linear-gradient(top, #f9f9f9 0%,#bbb 100%);
    background: -ms-linear-gradient(top, #f9f9f9 0%,#bbb 100%);
    background: linear-gradient(top, #f9f9f9 0%,#bbb 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#bbb',GradientType=0 );
}
.progress .progress-bar.progress-bar-info{border-left:4px solid #5d7731;
    background: #cae285;
    background: -moz-linear-gradient(top, #cae285 0%, #749440 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cae285), color-stop(100%,#749440));
    background: -webkit-linear-gradient(top, #cae285 0%,#749440 100%);
    background: -o-linear-gradient(top, #cae285 0%,#749440 100%);
    background: -ms-linear-gradient(top, #cae285 0%,#749440 100%);
    background: linear-gradient(top, #cae285 0%,#749440 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cae285', endColorstr='#749440',GradientType=0 );
}

.progress .progress-bar.progress-bar-warning{border-left:4px solid #996633;
    background: #f63;
    background: -moz-linear-gradient(top, #f9bf3b 0%, #dba013 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9bf3b), color-stop(100%,#dba013));
    background: -webkit-linear-gradient(top, #f9bf3b 0%,#dba013 100%);
    background: -o-linear-gradient(top, #f9bf3b 0%,#dba013 100%);
    background: -ms-linear-gradient(top, #f9bf3b 0%,#dba013 100%);
    background: linear-gradient(top, #f9bf3b 0%,#dba013 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9bf3b', endColorstr='#dba013',GradientType=0 );
}

.progress .progress-bar.progress-bar-danger{border-left:4px solid #971408;
    background: #f56778;
    background: -moz-linear-gradient(top, #fd6060 0%, #f56778 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fd6060), color-stop(100%,#f56778));
    background: -webkit-linear-gradient(top, #fd6060 0%,#f56778 100%);
    background: -o-linear-gradient(top, #fd6060 0%,#f56778 100%);
    background: -ms-linear-gradient(top, #fd6060 0%,#f56778 100%);
    background: linear-gradient(top, #fd6060 0%,#f56778 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fd6060', endColorstr='#f56778',GradientType=0 );
    }

.progress .progress-bar.progress-bar-mult{border-left:4px solid #d1badb;
    background: #d1badb;
    background: -moz-linear-gradient(left, #76A6CF 50px, #f63 220px, #f22613 350px);
    background: -webkit-gradient(linear, left top, right top, color-stop(50px,#76A6CF), color-stop(220px,#f63), color-stop(350px,#f22613));
    background: -webkit-linear-gradient(left, #76A6CF 50px,#f63 220px,#f22613 350px);
    background: -o-linear-gradient(left, #76A6CF 50px,#f63 220px,#f22613 350px);
    background: -ms-linear-gradient(left, #76A6CF 50px,#f63 220px,#f22613 350px);
    background: linear-gradient(left, #76A6CF 50px,#f63 220px,#f22613 350px);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#76A6CF', endColorstr='#f22613',GradientType=0 );
}



input.sample, input.sample:focus {
      padding: 9px;
      font-size: 15px;
      min-height: 40px;
}

input[type="range"].sample{
  width: 100%;
height: 0;
min-height: 0;
z-index: 2;
padding: 0 9px;
position: absolute;
}
    input[type='range']::-moz-range-track {
		-moz-appearance: none;
        height: 0;
        min-height: 0;
        border: 0;
        optacity:0.01;
        -moz-opacity:0.01;
        -webkit-opacity:0.01;
        -o-opacity:0.01;
        filter:alpha(opacity=1);
	}
    input[type='range'].sample::-webkit-slider-thumb {
		-webkit-appearance: none !important;
		border-radius: 10px;
		background-color: #000;
		box-shadow:inset 0 0 3px rgba(255,255,255,0.3);
		border: 1px solid #444;
		height: 10px;
		width: 10px;
	}
	input[type='range'].sample::-moz-range-thumb {
		-moz-appearance: none !important;
		border-radius: 10px;
		background-color: #000;
	    box-shadow:inset 0 0 3px rgba(255,255,255,0.3);
		border: 1px solid #444;
		height: 10px;
		width: 10px;
	}

.CSSHolder {
    float: left;
    direction: ltr;
    text-align: left;
    font-family: Tahoma;
}
#sample_css_family {
  color: #0c0;
}
#sample_css_size {
  color: #c00;
}

@media only screen and (max-width: 750px){
    section #app_info {
         min-height: 700px;
    }
    section #pages {
       width: 310px;
    }

    section #pages p {
         width: 310px;
    }
    div.appbox{
       width: 310px;
       padding: 0px;
    }

    section #app_info > div {
         width: 310px;
         padding: 0px;
    }

    input[type="range"].sample {
         width: 95%;
         left: 0;
    }

}