/**
 * PerCity Website Stylesheet
 * (C) 2014-2015, Turned-On Digital Inc. All rights reserved.
 */

@font-face {
    font-family:"BBCNassim";
    src: url( "/fonts/BBCNassim.eot" ),
         url( "/fonts/BBCNassim.woff" ) format( "woff" ),
         url( "/fonts/BBCNassim.otf" ) format( "truetype" );
}

@font-face {
    font-family: 'Yekan';
    src: url('../fonts/Yekan.eot'); /* IE9 Compat Modes */
    src: url('../fonts/Yekan.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/Yekan.woff') format('woff'), /* Modern Browsers */
    url('../fonts/Yekan.ttf')  format('truetype'); /* Safari, Android, iOS */
}

body {
    direction: rtl;
    font-family: Yekan, Times, serif, Arial;
    padding-top: 70px;
}

/********************************      Elements styling      ********************************/

#main-content h1, #main-content h2, #main-content h3, #main-content h4, #main-content h5, #main-content h6 {
    font-family: Helvetica, Arial, sans-serif;
    color: #222;
    font-weight: bold;
    margin: 0;
}

#main-content h1 {
    font-family: Calibri, Helvetica, Arial, sans-serif;
    font-size: 31px;
    font-weight: bold;
    color: #fff;
    position: absolute;
    top: -1000px; /* Remove this line and delete the logo (in the HTML) if you don't want an image as a logo */
}

#main-content h2 {
    font-size: 26px;
    padding: 0 0 10px 0;
}

#main-content h3 {
    font-size: 17px;
    padding: 0 0 10px 0;
}

#main-content h4 {
    font-size: 16px;
    padding: 0 0 5px 0;
}

#main-content h5 {
    font-size: 14px;
    padding: 0 0 5px 0;
}

#main-content h6 {
    font-size: 12px;
    padding: 0 0 5px 0;
}

#main-content a {
    color: #57a000;
    text-decoration: none;
}

#main-content a:hover {
    color: #000;
}

#main-content a:active {
    color: #777;
}

#main-content a:focus {
    outline: 1px;
}

#main-content strong {
    font-weight: bold;
    color: #333;
}

#main-content small {
    font-size: 0.85em;
}

#main-content pre {
    font-family: monospace;
}

#main-content p {
    padding: 5px 0 10px 0;
    line-height: 1.6em;
}

/*************** Content Box ***************/

.content-box {
    border: 1px solid #ccc;
    margin: 0 0 20px 0;
    background: #fff;
}

.content-box-header {
    background: #e5e5e5 url('/img/sima/bg-content-box.gif') top left repeat-x;
    margin-top: 1px;
    height: 40px;
}

.content-box-header h3 {
    padding: 12px 15px 10px !important;
    float: left;
}

ul.content-box-tabs {
    float: right;
    padding: 12px 15px 0 0 !important;
    margin: 0 !important;
}

ul.content-box-tabs li {
    float: left;
    margin: 0;
    padding: 0 !important;
    background-image: none !important;
}

ul.content-box-tabs li a {
    color: #333;
    padding: 8px 10px;
    display: block;
    margin: 1px;
    border-bottom: 0;
}

ul.content-box-tabs li a:hover {
    color: #57a000;
}

ul.content-box-tabs li a.current {
    background: #fff;
    border: 1px solid #ccc;
    border-bottom: 0;
    margin: 0;
}

.content-box-content {
    padding: 20px;
    font-size: 13px;
    border-top: 1px solid #ccc;
}

.content-box,
.content-box-header,
ul.content-box-tabs li a.current,
.shortcut-button,
.notification {
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}

.content-box-header {
    -moz-border-radius-bottomleft: 0;
    -moz-border-radius-bottomright: 0;
    -webkit-border-bottom-left-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.closed-box .content-box-header {
    -moz-border-radius-bottomleft: 6px;
    -moz-border-radius-bottomright: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

ul.content-box-tabs li a.current {
    -moz-border-radius-bottomleft: 0;
    -moz-border-radius-bottomright: 0;
    -webkit-border-bottom-left-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/************ Table ************/

#main-content table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

#main-content table thead th {
    font-weight: bold;
    font-size: 13px;
    border-bottom: 1px solid #ddd;
    text-align: center;
    vertical-align: middle;
}

#main-content tbody {
    border-bottom: 1px solid #ddd;
}

#main-content tbody tr, #main-content tbody tr.row1 {
    background: #fff;
    text-align: center;
}

#main-content tbody tr.alt-row, #main-content tbody tr.row2 {
    background: #f3f3f3;
    text-align: center;
}

#main-content table td,
#main-content table th {
    padding: 10px;
    line-height: 1.3em;
    text-align: center;
    vertical-align: middle;
}

#main-content table tfoot td .bulk-actions {
    padding: 15px 0 5px 0;
}

#main-content table tfoot td .bulk-actions select {
    padding: 4px;
    border: 1px solid #ccc;
}

#top_margin{
    margin-top: 17px;
}

/*************** Pagination ***************/

#main-content .pagination {
    text-align: right;
    padding: 20px 0 5px 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
}

.pagination a {
    margin: 0 5px 0 0;
    padding: 3px 6px;
}

.pagination a.number {
    border: 1px solid #ddd;
}

.pagination a.current {
    background: #469400 url('/img/sima/bg-button-green.gif') top left repeat-x !important;
    border-color: #459300 !important;
    color: #fff !important;
}

.pagination a.current:hover {
    text-decoration: underline;
}



/************ Shortcut Buttons ************/

.shortcut-button {
    border: 1px solid #ccc;
    background: #f7f7f7 url('/img/sima/shortcut-button-bg.gif') top left no-repeat;
    display: block;
    width: 120px;
    margin: 0 0 20px 0;
}

.shortcut-button span {
    border: 1px solid #fff;
    display: block;
    padding: 15px 10px 15px 10px;
    text-align: center;
    color: #555;
    font-size: 13px;
    line-height: 1.3em;
}

.shortcut-button span img {
    margin-bottom: 10px;
}

.shortcut-button:hover {
    background: #fff;

}

.shortcut-button span:hover {
    color: #57a000;
}

ul.shortcut-buttons-set li {
    float: left;
    margin: 0 15px 0 0;
    padding: 0 !important;
    background: 0;
}

/*************** Forms ***************/

form label {
    display: block;
    padding: 0 0 10px;
}

form fieldset legend {
    font-weight: bold;
    margin-bottom: 10px;
    padding-top: 10px;
}

form p small {
    font-size: 0.75em;
    color: #777;
}

form input.text-input,
form select,
form textarea,
form .wysiwyg {
    padding: 6px;
    font-size: 13px;
    background: #fff url('/img/sima/bg-form-field.gif') top left repeat-x;
    border: 1px solid #d5d5d5;
    color: #333;
}

.small-input {
    width: 25% !important;
}

.medium-input {
    width: 50% !important;
}

.large-input {
    width: 97.5% !important;
    font-size: 16px !important;
    padding: 8px !important;
}

form textarea {
    width: 97.5% !important;
    font-family: Arial, Helvetica, sans-serif;
}

form select {
    padding: 4px;
    background: #fff;
}

form input[type="checkbox"],
form input[type="radio"] {
    padding: 0;
    background: none;
    border: 0;
}

.tab-links li {
    display: block;
    border: #808080 1px solid;
    float: right;
    clear: none;
    min-width: 100px;
    padding: 5px;
}

.tab-content {
    border: 1px dashed;
    padding: 10px;
}

.center-div {
    margin-right: auto;
    margin-left: auto;
}

.footer {
    width: 100%;
    margin-top: 20px;
    height: 45px;
    background-color: #000;
}

.chart-placeholder {
    text-align: center;
    font-size: 40px;
    color: darkgray;
    padding-top: 50px;
    padding-bottom: 50px;
}

/************** Loading Indicator **********************/
.l-wrapper {
    position: absolute;
    width: 480px;
    height: 276px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    text-align: center
}

svg {
    height: 120px;
    width: 120px;
    /*margin: auto;*/
    overflow: visible
}

.g--circle {
    transform-origin: 60px 60px;
    fill: #1e90ff;
    animation: opacity 1.2s linear infinite
}

.g--circle:nth-child(12n+1) {
    animation-delay: -.1s;
    transform: rotate(-30deg) translate(5px, 5px) scale(0.9)
}

.g--circle:nth-child(12n+2) {
    animation-delay: -.2s;
    transform: rotate(-60deg) translate(5px, 5px) scale(0.9)
}

.g--circle:nth-child(12n+3) {
    animation-delay: -.3s;
    transform: rotate(-90deg) translate(5px, 5px) scale(0.9)
}

.g--circle:nth-child(12n+4) {
    animation-delay: -.4s;
    transform: rotate(-120deg) translate(5px, 5px) scale(0.9)
}

.g--circle:nth-child(12n+5) {
    animation-delay: -.5s;
    transform: rotate(-150deg) translate(5px, 5px) scale(0.9)
}

.g--circle:nth-child(12n+6) {
    animation-delay: -.6s;
    transform: rotate(-180deg) translate(5px, 5px) scale(0.9)
}

.g--circle:nth-child(12n+7) {
    animation-delay: -.7s;
    transform: rotate(-210deg) translate(5px, 5px) scale(0.9)
}

.g--circle:nth-child(12n+8) {
    animation-delay: -.8s;
    transform: rotate(-240deg) translate(5px, 5px) scale(0.9)
}

.g--circle:nth-child(12n+9) {
    animation-delay: -.9s;
    transform: rotate(-270deg) translate(5px, 5px) scale(0.9)
}

.g--circle:nth-child(12n+10) {
    animation-delay: -1s;
    transform: rotate(-300deg) translate(5px, 5px) scale(0.9)
}

.g--circle:nth-child(12n+11) {
    animation-delay: -1.1s;
    transform: rotate(-330deg) translate(5px, 5px) scale(0.9)
}

.g--circle:nth-child(12n+12) {
    animation-delay: -1.2s;
    transform: rotate(-360deg) translate(5px, 5px) scale(0.9)
}

.g-circles--v1 .g--circle {
    fill-opacity: 0;
    animation-name: opacity
}

.g-circles--v2 .g--circle {
    fill-opacity: 0;
    stroke-opacity: 0;
    stroke-width: 1;
    stroke: yellowgreen;
    animation-name: opacity-stroke, colors, colors-stroke
}

.g-circles--v2 .g--circle .u--circle {
    animation: transform-2 1.2s linear infinite
}

.g-circles--v2 .g--circle:nth-child(12n+1) .u--circle {
    animation-delay: -.1s
}

.g-circles--v2 .g--circle:nth-child(12n+2) .u--circle {
    animation-delay: -.2s
}

.g-circles--v2 .g--circle:nth-child(12n+3) .u--circle {
    animation-delay: -.3s
}

.g-circles--v2 .g--circle:nth-child(12n+4) .u--circle {
    animation-delay: -.4s
}

.g-circles--v2 .g--circle:nth-child(12n+5) .u--circle {
    animation-delay: -.5s
}

.g-circles--v2 .g--circle:nth-child(12n+6) .u--circle {
    animation-delay: -.6s
}

.g-circles--v2 .g--circle:nth-child(12n+7) .u--circle {
    animation-delay: -.7s
}

.g-circles--v2 .g--circle:nth-child(12n+8) .u--circle {
    animation-delay: -.8s
}

.g-circles--v2 .g--circle:nth-child(12n+9) .u--circle {
    animation-delay: -.9s
}

.g-circles--v2 .g--circle:nth-child(12n+10) .u--circle {
    animation-delay: -1s
}

.g-circles--v2 .g--circle:nth-child(12n+11) .u--circle {
    animation-delay: -1.1s
}

.g-circles--v2 .g--circle:nth-child(12n+12) .u--circle {
    animation-delay: -1.2s
}

.g-circles--v3 .g--circle {
    fill-opacity: 1;
    animation-name: opacity, colors
}

.g-circles--v4 .g--circle {
    fill-opacity: 1;
    fill: orange;
    animation-name: opacity, colors-3
}

.g-circles--v4 .u--circle {
    animation: transform 1.2s linear infinite
}

.g-circles--v4 .g--circle:nth-child(12n+1) .u--circle {
    animation-delay: -.1s
}

.g-circles--v4 .g--circle:nth-child(12n+2) .u--circle {
    animation-delay: -.2s
}

.g-circles--v4 .g--circle:nth-child(12n+3) .u--circle {
    animation-delay: -.3s
}

.g-circles--v4 .g--circle:nth-child(12n+4) .u--circle {
    animation-delay: -.4s
}

.g-circles--v4 .g--circle:nth-child(12n+5) .u--circle {
    animation-delay: -.5s
}

.g-circles--v4 .g--circle:nth-child(12n+6) .u--circle {
    animation-delay: -.6s
}

.g-circles--v4 .g--circle:nth-child(12n+7) .u--circle {
    animation-delay: -.7s
}

.g-circles--v4 .g--circle:nth-child(12n+8) .u--circle {
    animation-delay: -.8s
}

.g-circles--v4 .g--circle:nth-child(12n+9) .u--circle {
    animation-delay: -.9s
}

.g-circles--v4 .g--circle:nth-child(12n+10) .u--circle {
    animation-delay: -1s
}

.g-circles--v4 .g--circle:nth-child(12n+11) .u--circle {
    animation-delay: -1.1s
}

.g-circles--v4 .g--circle:nth-child(12n+12) .u--circle {
    animation-delay: -1.2s
}

@keyframes opacity {
    3% {
        fill-opacity: 1
    }
    75% {
        fill-opacity: 0
    }
}

@keyframes opacity-stroke {
    10% {
        stroke-opacity: 1
    }
    85% {
        stroke-opacity: 0
    }
}

@keyframes colors {
    0% {
        fill: yellowgreen
    }
    10% {
        fill: gold
    }
    75% {
        fill: crimson
    }
}

@keyframes colors-stroke {
    0% {
        stroke: yellowgreen
    }
    10% {
        stroke: gold
    }
    75% {
        stroke: crimson
    }
}

@keyframes colors-2 {
    0% {
        fill: yellow
    }
    50% {
        fill: red
    }
    65% {
        fill: orangered
    }
    95% {
        fill: gold
    }
}

@keyframes colors-3 {
    0% {
        fill: yellowgreen
    }
    50% {
        fill: turquoise
    }
    65% {
        fill: yellow
    }
    95% {
        fill: orange
    }
}

@keyframes transform {
    10% {
        transform-origin: 70px 70px;
        transform: scale(0.75)
    }
}

@keyframes transform-2 {
    40% {
        transform: scale(0.85) translate(10px, 10px)
    }
    60% {
        stroke-width: 20
    }
}