@font-face{
    font-family: 'vazir';
    src: url(../fonts/Vazir-Bold.ttf);
}
* {
    margin:0;
    padding:0;
    font-family: 'vazir';
}
body {
    background: #1867C0;
    color: #fff;
}
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
.group:before,
.group:after {
	content:"";
	display:table;
}
.group:after {
	clear:both;
}
.group {
    zoom:1;
}
.span_3_of_3 {
	width: 100%;
}
.span_2_of_3 {
	width: 66.1%;
}
.span_1_of_3 {
	width: 32.2%;
}
.span_half_of_1 {
    width: 16.1%;
}
.span_fifty {
    width:50%;
}
.span-fifty:nth-child(odd) {
    background: #1867C0;
    color:#fff;
}
.span-fifty:nth-child(even) {
    background: #e76f51;
    color:#fff;
}
.center-text {
    text-align:center;
}
.right-text {
    text-align:right;
}
.rtl {
    direction:rtl;
}
.left {
    float:left;
}
.right {
    float:right;
}
.field {
    width:100%;
    height:auto;
    border-radius:10px;
    overflow-x: hidden;
    background:#fff;
    text-align:center;
    color:#1867C0;
    padding:20px 0;
}
.full-wide {
    width:100%;
    height:auto;
    display:inline-block;
}
.field input, .field select, .field textarea {
    width:90%;
    margin:10px 5%;
    padding:5px 0;
    font-size:105%;
    border:0;
    border-bottom:2px solid silver;
    border-radius:4px;
    text-align:center;
    transition: all 0.3s ease-in-out;
}
.field input[type=file] {
    text-align-last:center;
}
.field textarea {
    height:100px;
}
.field select, .field select option {
    text-align-last:center;
}
.field input[type=text]:focus, .field input[type=password]:focus {
    outline: none;
    border-bottom:2px solid green;
}
.field input[type=submit] {
    border:0;
    padding:7px 17px;
    border-radius:4px;
    color:white;
    background: #2a9d8f;
    font-size:110%;
    cursor:pointer;
    margin:20px 0;
    transition: all 0.3s ease-in-out;
}
.field input[type=submit]:hover {
    background:#227D72;
}
.errors {
    color:red;
    margin:0 0 20px 0;
    direction:rtl;
}
.success {
    color:green;
    margin:0 0 20px 0;
    direction:rtl;
}
table {
    width:97%;
    margin:10px auto;
}
td {
    text-align:center;
    float:right;
    padding:15px 0;
    background:black;
}
tr:nth-child(odd) > td{
    background:#457b9d;
    color:#f1faee;
}
tr:nth-child(even) > td{
    background:#f1faee;
    color:#457b9d;
}
th {
    text-align:center;
    float:right;
    padding:5px 0;
    border-bottom: 1px solid silver;
    background:#e76f51;
}
.half {
    width:12%;
    margin:0 0.5%;
}
.towper3 {
    width:73%;
    margin-right:1%;
}
.oneper2 {
    width:49%;
    margin-right:1%;
}
.edit-btn {
    border:0;
    cursor:pointer;
    padding:5px 15px;
    color: #577590;
    background-color:#ffd166;
    border-radius:3px;
}
.delete-btn {
    border:0;
    cursor:pointer;
    padding:5px 15px;
    color: #fff;
    background-color:#9e2a2b;
    border-radius:3px;
}
.info-btn {
    border:0;
    cursor:pointer;
    padding:5px 15px;
    color: #fff;
    background-color:#2a9d8f;
    border-radius:3px;
}
.confirm-box {
    visibility:hidden;
    z-index:999;
    position:fixed;
    top:10px;
    background:#f1faee;
    color:#457b9d;
    text-align:center;
    padding:10px 0;
    font-weight:bold;
    left:30%;
    width:40%;
}
.blue-btn {
    margin:10px;
    border:0;
    cursor:pointer;
    padding:10px 25px;
    color: #1d3557;
    background-color:#a8dadc;
    border-radius:3px;
}
.red-btn {
    margin:10px;
    border:0;
    cursor:pointer;
    padding:10px 25px;
    color: #fff;
    background-color:#9e2a2b;
    border-radius:3px;
}
.circle-counter {
    padding:10px;
    color:#fff;
    border-radius:20%;
    text-align:center;
    direction:rtl;
    background:#e76f51;
    display:inline-grid;
}
.works-item {
    padding:5px 10px;
    margin:10px 10px;
    background: #F3D64B;
    border-radius:3px;
    display:inline-grid;
}
.load-btn {
    padding:5px 10px;
    margin:0 0 10px 10px;
    background: #4D6DF2;
    color:#fff;
    float:left;
    cursor:pointer;
    border-radius:10px;
    display:inline-grid;
}
#none {
    display:none;
    transition: all 0.3s ease-in-out;
}
@media only screen and (max-width: 480px) {
	.col { margin: 1% 0 1% 0%;}
	.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
	.confirm-box { width:96%;left:2%; }
}
.button1 {
    border: 0px;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    padding: 7px 20px;
    font-size: 110%;
    background-color: #4D6DF2;
    color: #f1faee;
}