@import url(font-face.css);
body {
    background: #ddd;
    overflow-x: hidden;
    direction: rtl;
    font-size: 15px;
    font-family: 'iransans','Yekan',tahoma;
}

article,
footer,
header,
hgroup,
main,
menu,
nav,
section,
{
    display: block
}

html,head,body,div,header,footer,
font,center,h1,h2,h3,h4,h5,h6,ul,li,i,u,em,dl,ol,img,span,strong,
article,section,summary,caption,form,input,small,sub,sup,q,s,b,br,big,address,
code,abbr,cite,pre,time,p,details,ins,nav,menu,video,
audio,mark,var,object,
label,legend,canvas,aside,embed,table,tbody,td,tr,
a {
    margin: 0;
    padding: 0;
    border: 0
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    outline: 0;
    box-sizing: border-box
}

audio,
canvas,
video {
    display: inline-block
}

nav,
ul,
olli,
li {
    list-style: none;
    margin: 0;
    padding: 0
}

[hidden],
.hide {
    display: none
}

html {
    font-size: 100%;
    font-family: Tahoma;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
}

img {
    border: 0
}

svg:not(:root) {
    overflow: hidden
}

table {
    border-collapse: collapse;
    border-spacing: 0
}
span{
    font-size: 12px;
}
::selection {
    color: #fff;
    background: #333
}

::-moz-selection {
    color: #fff;
    background: #333
}

.clear {
    clear: both;
    height: 0
}

a {
    color: #0EA0D8;
    text-decoration: none
}

a {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease
}

a:hover {
    color: #0B6BA6
}

input,
textarea,
button {
    font: 13px/1.5 'iransans','Yekan', tahoma, tahoma;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    font-family: 'iransans','Yekan', tahoma, arial;
    margin: 0;
    padding: 0;
    color: #929292
}

h1 {
    font-size: 19px
}

h2 {
    font-size: 17px
}

h3 {
    font-size: 15px
}

h4 {
    font-size: 13px
}

h5,
h6 {
    font-size: 11px
}

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden],
template {
    display: none
}

a:active,
a:hover {
    outline: 0
}

abbr[title] {
    border-bottom: 1px dotted
}

b,
strong {
    font-family: 'iransans','Yekan', tahoma;
    padding: 0 2px;
    font-weight: 700
}

dfn {
    font-style: italic
}

mark {
    color: #000;
    background: #ff0
}

small {
    font-size: 80%
}

sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

img {
    border: 0
}

svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 1em 40px
}

hr {
    height: 1px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    border: none;
    background: #f3f3f3
}

pre {
    overflow: auto
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

button,
input,
optgroup,
select,
textarea {
    margin: 0;
    font: inherit;
    color: inherit;
    font-family: 'iransans','Yekan',tahoma;
}

button,
.btn {
    overflow: visible;
    background: #fff;
    color: #666;
    font-size: 13px;
    padding: 6px 50px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    cursor: pointer;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 1px solid #ddd
}

button:hover,
.btn:hover {
    background: #f1f1f1
}

.success {
    color: #e8e8e8;
    cursor: pointer;
    background-color: #00a65a;
    border-color: #008d4c
}

.success:hover {
    background-color: #008d4c;
    box-shadow: 0 0 0;
    color: #ccc
}

button,
select {
    text-transform: none
}

button,
htmlinput[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled],
htmlinput[disabled] {
    cursor: default
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    padding: 0;
    border: 0
}

input {
    line-height: normal
}

input[type="checkbox"],
input[type="radio"] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto
}

input[type="search"] {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-appearance: textfield
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}

label {
    font: 12px 'iransans','Yekan', tahoma ;
    color: #666
}

fieldset {
    padding: .35em .625em .75em;
    margin: 0 2px;
    border: 1px solid silver
}

legend {
    padding: 0;
    border: 0
}

textarea {
    overflow: auto
}

optgroup {
    font-weight: 700
}

table {
    border-spacing: 0;
    border-collapse: collapse
}

td,
th {
    padding: 0
}

@media print {
    *,
    :before,
    :after {
        color: #000!important;
        text-shadow: none!important;
        background: transparent!important;
        -webkit-box-shadow: none!important;
        box-shadow: none!important
    }
    a,
    a:visited {
        text-decoration: underline
    }
    a[href]:after {
        content: "("attr(href)")"
    }
    abbr[title]:after {
        content: "("attr(title)")"
    }
    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: ""
    }
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid
    }
    thead {
        display: table-header-group
    }
    tr,
    img {
        page-break-inside: avoid
    }
    img {
        max-width: 100%!important
    }
    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3
    }
    h2,
    h3 {
        page-break-after: avoid
    }
    .navbar {
        display: none
    }
    .btn>.caret,
    .dropup>.btn>.caret {
        border-top-color: #000!important
    }
    .label {
        border: 1px solid #000
    }
    .table {
        border-collapse: collapse!important
    }
    .tabletd,
    .tableth {
        background-color: #fff!important
    }
    .table-borderedth,
    .table-borderedtd {
        border: 1px solid #ddd!important
    }
}

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #fff
}

::-webkit-scrollbar-thumb {
    background: #185b80
}

/** inputs form **/
.inputs{
    width: 100%;
    display: block;
    vertical-align: top;
    height: 40px;
    border:1px #ddd solid;
    border-radius: 1px;
    font-size: 13px;
    color: #666;
    padding:0 5px;
}
.button,
.button-primary{
    border-radius: 4px;
    display: inline-block;
    cursor: pointer;
    color: rgb(82, 82, 82);
    font-size: 13px;
    padding: 8px 40px;
    background: #e2e2e2;
    text-decoration: none;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}
.button-primary{
    background-color: #09c;
    box-shadow: inset 0 0 3px #09c, inset 0 -3px 0px #086e90;
    text-shadow: 0 0px 2px rgba(0, 0, 0, 0.55);
    color: white;
}
.button-primary:hover{
    background-color: #086e90;
    box-shadow: inset 0 0 3px #09c, inset 0 -3px 0px #086e90;
    text-shadow: 0 0px 2px rgba(0, 0, 0, 0.55);
    color: white;
}
.btn-success{
    background: #249e24;
    box-shadow: inset 0 0 3px green, inset 0 -3px 0px green;
}
.btn-success:hover{
    background: green;
    box-shadow: inset 0 0 3px green, inset 0 -3px 0px green;
}
.btn-remove{
    background: #ff2e2e;
    box-shadow: inset 0 0 3px #ef0000, inset 0 -3px 0px #ef0000;
}
.btn-remove:hover{
    background: red;
    box-shadow: inset 0 0 3px red, inset 0 -3px 0px red;
}
input.input-form{
    min-width: 200px;
    width: 100%;
    margin: auto;
    height: 40px;
    border: 1px #ddd solid;
    box-shadow: inset 1px 2px 3px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    padding: 0 5px;
    font-size: 12px;
    color: #949494;
}

input.input-file{cursor: pointer}
input.input-file::-webkit-file-upload-button {
  visibility: hidden;
}
input.input-file::before {
    content: 'انتخاب کنید';
    display: inline-block;
    background: #09c;
    border-radius: 25px;
    padding: 6px 15px;
    outline: none;
    white-space: nowrap;
    -webkit-user-select: none;
    cursor: pointer;
    font-size: 12px;
    color: white;
}
input.input-file:hover::before {
  background: #086e90;
}
textarea.input-textarea{
    min-width: 99%;
    max-width: 99%;
    min-height: 170px;
    border: 1px #ddd solid;
    border-radius: 1px;
    padding: 9px;
    color: #929292;
    font-size: 12px;
    font-weight: normal;
    box-shadow: inset 0px 3px 2px #f3f3f3;
    line-height: 2.2;
}

select.select-form {
    height: 40px;
    border: 1px #ddd solid;
    border-radius: 2px;
    padding: 0 5px;
    color: #666;
    font-size: 13px;
    font-weight: normal;
    cursor: pointer;
    box-shadow: inset 0 1px 3px #ddd;
}
.list-select{
    width: 100%;
    min-height: 250px;
}
/* colors */
.bg-blue{background-color: #00c0ef;}
.bg-red{background-color: #ff6d6d}
.bg-orange{background-color: darkorange}
.bg-green{background-color: mediumseagreen}
.bg-green2{background-color: #87c191}
.bg-blue2{background-color: #8791c1}

.clr-white{color: white !important;}
.clr-red{color: #ff6d6d !important;}
.clr-orange{color:darkorange !important;}
.clr-green{color: mediumseagreen !important}
.clr-blue{color: #00c0ef !important;}


/* tables */
.wide-table,
.wide-table > thead{
    width:100%;
    direction: rtl;
}
.wide-table > thead{
    box-shadow: 0 0px 3px #ddd;
}
.wide-table > thead > tr > th{
    color: #666;
    font-size:15px;
    text-align: center;
    font-weight: normal;
    padding:10px 0;
}
.wide-table > tbody > tr:nth-child(even){
    background-color:#fafafa;
}
.wide-table > tbody > tr:hover{
    background-color: #f1f1f1;
}
.wide-table > tbody > tr > td{
    color: #999;
    font-size:12px;
    font-weight:normal;
    padding:10px 0;
    text-align: center;
}
.table-form > tbody > tr > td{
    padding:7px 10px;
}
.transition{
    -webkit-transition: .5s;
    -mo-transtion:.5s;
    -o-transition: .5s;
    transition: .5s;
}
.section-title{
    font-weight: normal;
    color: #666;
    font-size:17px;
}
.row{
    width: 100%;
    display: block;
    overflow: hidden;
}
.col-2,
.col-3,
.col-4,
.col-5{
    display: inline-block;
}
.col-2 {width: 49%}
.col-3{width: 33%}
.col-4{width: 20%}
.col-5{width: 15%;}


.title,
.title-1,
.title-2,
.title-3,
.title-4{
    font-weight: normal;
    font-size: 15px;
    padding: 5px 0;
    color: #666;
}
.title-1{font-size: 18px;}
.title-2{font-size: 16px;}
.title-3{font-size: 14px;}
.title-4{font-size: 12px;}

.fs-12{font-size: 12px !important;}
.fs-13{font-size: 13px !important;}
.fs-14{font-size: 14px !important;}
.fs-16{font-size: 16px !important;}
.fs-18{font-size: 18px !important;}
.fs-20{font-size: 20px !important;}

.pd-5{padding: 5px;}
.pd-10{padding:10px;}
.pd-15{padding:15px;}
.pd-20{padding:20px;}


.pd-top{padding-top:10px;}
.pd-right{padding-right: 10px;}
.pd-right-15{padding-right: 15px;}
.pd-right-20{padding-right: 20px;}

.mg-5{margin: 5px;}
.mg-10{margin: 10px;}
.mg-15{margin: 15px;}
.mg-20{margin: 20px;}

.mg-top-5{margin-top: 5px;}
.mg-top-10{margin-top: 10px;}
.mg-bt-5{margin-bottom: 5px;}
.mg-bt-10{margin-bottom: 10px;}
.mg-right-10{margin-right: 10px;}
.mg-right-15{margin-right: 15px;}
.mg-right-20{margin-right: 20px;}
.mg-auto{margin: auto;}

.fl-left{float: left}
.fl-right{float: right}

.main-center{
    width: 1200px;
    margin-right: auto;
    margin-left: auto;
}

.ta-center{text-align: center;}
.ta-left{text-align: left}
.ta-right{text-align: right}

.relative{position: relative;}
.absolute{position: absolute;}

.ver-align-top{vertical-align: top;}
.ver-align-bottom{vertical-align: bottom;}
.ver-align-middle{vertical-align: middle;}

.field-error::before,
.field-ok::before {
    position: absolute;
    left: 10px;
    bottom: 7px;
    color: #ffa839;
    font-size: 20px;
}
.field-error::before{
    -webkit-animation: alert 1s linear infinite;
    animation: alert 1s linear infinite;
    animation-iteration-count: 5;
}
.field-ok::before{
    color: #06d206;
}
@-webkit-keyframes alert {
  0%{color: #ffa839}
  50%{color:red;}
  100%{color: #ffa839;}
}
@keyframes alert {
  0%{color: #ffa839}
  50%{color:red;}
  100%{color: #ffa839;}
}
.box-white{
    background: white;
    margin: 10px auto;
    padding: 20px;
    box-shadow: 0 1px 1px #ccc;
}
.dis-none{
    display: none;
}
.loading{
    width: 200px;
    height: 200px;
    margin: 40px auto;
    border-radius: 50%;
    display: block;
    position: relative;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.fade-in {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}
@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}
@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}