@font-face {
    font-family: 'Vazir-Bold';
    src: url('../vazir-font-v16.1.0/Vazir-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Vazir-Light';
    src: url('../vazir-font-v16.1.0/Vazir-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Vazir-Medium';
    src: url('../vazir-font-v16.1.0/Vazir-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Vazir-Thin';
    src: url('../vazir-font-v16.1.0/Vazir-Thin.ttf') format('truetype');
}

@font-face {
    font-family: 'Vazir';
    src: url('../vazir-font-v16.1.0/Vazir.ttf') format('truetype');
}

@font-face {
    font-family: 'Vazir';
    src: url('../vazir-font-v16.1.0/Vazir.woff') format('woff');
}

@font-face {
    font-family: 'Vazir';
    src: url('../vazir-font-v16.1.0/Vazir.woff2') format('woff2');
}

@font-face {
    font-family: 'Vazir';
    src: url('../vazir-font-v16.1.0/Vazir.eot') format('embedded-opentype');
}

@font-face {
    font-family: 'Vazir-Thin';
    src: url('../vazir-font-v16.1.0/Vazir-Thin.woff2') format('woff2');
}

@font-face {
    font-family: 'Vazir-Thin';
    src: url('../vazir-font-v16.1.0/Vazir-Thin.woff') format('woff');
}

@font-face {
    font-family: 'Vazir-Thin';
    src: url('../vazir-font-v16.1.0/Vazir-Thin.eot') format('embedded-opentype');
}

@font-face {
    font-family: 'Vazir-Medium';
    src: url('../vazir-font-v16.1.0/Vazir-Medium.woff2') format('woff2');
}

@font-face {
    font-family: 'Vazir-Medium';
    src: url('../vazir-font-v16.1.0/Vazir-Medium.woff') format('woff');
}

@font-face {
    font-family: 'Vazir-Medium';
    src: url('../vazir-font-v16.1.0/Vazir-Medium.eot') format('embedded-opentype');
}

@font-face {
    font-family: 'Vazir-Light';
    src: url('../vazir-font-v16.1.0/Vazir-Light.woff2') format('woff2');
}

@font-face {
    font-family: 'Vazir-Light';
    src: url('../vazir-font-v16.1.0/Vazir-Light.woff') format('woff');
}

@font-face {
    font-family: 'Vazir-Light';
    src: url('../vazir-font-v16.1.0/Vazir-Light.eot') format('embedded-opentype');
}

@font-face {
    font-family: 'Vazir-Bold';
    src: url('../vazir-font-v16.1.0/Vazir-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'Vazir-Bold';
    src: url('../vazir-font-v16.1.0/Vazir-Bold.woff') format('woff');
}

@font-face {
    font-family: 'Vazir-Bold';
    src: url('../vazir-font-v16.1.0/Vazir-Bold.eot') format('embedded-opentype');
}


body {
    margin: 0;
    position: relative;
    width: 100%;
    direction: rtl;
    font-family: "vazir";
    background-color: #181C26;
}
.headerWeb {
    position: relative;
    width: 100%;
    height: 80px;
    background-color: #222838;
}
.logo{
    position:absolute;
    height:90px;
    top:0px;
    right:50px;
    z-index:2;
}
.switch-lang {
    width: 100px;
    text-align: right;
    cursor: pointer;
    z-index: 50;
    position: absolute;
    top: 0px;
    left: 20px;
    color: white;
}

    .switch-lang:hover .lang-dropdown {
        display: block;
    }

.switcher-link {
    color: #fff;
}

    .switcher-link:hover {
        color: #fff;
    }

.current-lang {
    background: #222838;
    padding: 0px 05px 0px 0px;
    border-radius: 5px;
    font-size: 12px;
}

.lang-flag {
    width: 20px;
    display: inline-block;
    margin-right: 5px;
}

.lang-text {
    display: inline-block;
    margin-right: 5px;
    vertical-align: top;
    margin-top: 2px;
    font-size: 12px;
    color:white;
}

.lang-dropdown {
    display: none;
    background: #34495e;
    border-radius: 5px;
    margin-top: 0px;
}

.selecting-lang {
    padding: 3px 5px 3px 5px;
    cursor: pointer;
}

    .selecting-lang:hover {
        background: #22313f;
    }


.logo2 {
    position: absolute;
    height: 80px;
    bottom: 0px;
    right: 120px;
    z-index: 2;
}
.LiveChart {
    position: relative;
    width: 100%;
    height: 1px;
    z-index: 2;
}
.priceLive {
    position: relative;
    width: 80%;
    right: 10%;
    display:inline-block;
    background-color: #181C26;
}
.Pricelist {
    position: relative;
    width: 30%;
    background-color: #222838;
    right: 2%;
    border-radius: 10px;
    color: white;
    float: right;
    top: 0px;
    margin: 10px;
    display: none;
}
.headerPriceList {
    position: relative;
    width: 100%;
    height: 30px;
    line-height: 30px;
    border-bottom: solid 1px rosybrown;
    color: white;
    font-size: 15px;
    background-color: #222838;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.headerTitle {
    position: relative;
    width: 96%;
    height: 50px;
    right: 2%;
    text-align: center;
    font-size: 20px;
    background-color: #222838;
    line-height: 50px;
    color: white;
}
.TitleCurrency {
    position: absolute;
    width: 40%;
    height: 100%;
    text-align: center;
    border-left: solid 1px #352020;
}
.TitlePrice {
    position: absolute;
    width: 30%;
    height: 100%;
    text-align: center;
    border-left: solid 1px #352020;
    right: 40%;
}
.TitleTime {
    position: absolute;
    width: 30%;
    height: 100%;
    text-align: center;
    right: 70%;
   
}
.OCurrency {
    position: absolute;
    width: 40%;
    height: 100%;
    text-align: center;
    
    color: #d4af37;
}

.OPrice {
    position: absolute;
    width: 30%;
    height: 100%;
    text-align: center;
   
    right: 40%;
    color: #d4af37;
}

.OTime {
    position: absolute;
    width: 30%;
    height: 100%;
    text-align: center;
    right: 70%;
    color: #d4af37;
}
.BKNone {
    background-color: white;
    border-radius: 0px;
    border:none;
   
}
.Changecolorgreen {
    animation: myfirst 2s 1;
}
@keyframes myfirst {
    0% {
        background: #30A500;
        color: white;
    }

    25% {
        background: #4ca527;
        color: white;
    }

    75% {
        background: #6ca754;
        color: white;
    }

    100% {
        background: tranparnt;
        color: white;
    }
}
.OCurrency img {
    top: 2.5px;
    width: 25px;
    height: 25px;
    position: absolute;
    right: 5px;
}
.odd {
    background-color: #eae0c8;
}
.currencyShape {
    position: relative;
    width: calc(33% - 20px);
    height: 80px;
    background-color: #222838;
    margin: 10px;
    margin-bottom: 2px;
    float: right;
    color: #DFDFDF;
    border-radius: 3px;
}
.currencyShape img{
    position:absolute;
    top:15px;
    width:50px;
    height:50px;
    margin:2px;
    right:10px;
   display:block;
    z-index:1;
    
    
}
    .currencyShape h3 {
        position: absolute;
        display: inline;
        right: 65px;
        font-size: 16px;
        margin-right: 10px;
        line-height: 16px;
        top: 3px;
        color:white;
    }
.EnglishTitle {
    position: absolute;
    display: inline;
    right: 65px;
    font-size: 16px;
    margin-right: 10px;
    line-height: 16px;
    top: 40px;
    color: #545664;
    font-size:12px;
    
}
.CurrencyPrice {
    position: absolute;
    display: inline;
    left: 20px;
    font-size: 16px;
    margin-right: 10px;
    line-height: 16px;
    top: 20px;
    color: white;
    width: 80px;
    border-bottom: solid 1px;
    text-align: left;
}


.live-dot {
    height: .5rem;
    position: relative;
    width: .5rem;
    right: 5px;
    top: 5px;
    border-radius: 100%;
    background-color: #1F7295;
}
    .live-dot:after {
        content: '';
        display: block;
        height: 100%;
        position: absolute;
        width: 100%;
        border-radius: 100%;
        background-color: inherit;
        animation: 2s ease-out signal infinite;
        opacity: .6;
    }



@keyframes signal {
    20%, 100% {
        opacity: 0;
        transform: scale(5);
    }
}
.CurrencyPriceTa {
    position: absolute;
    display: inline;
    left: 20px;
    font-size: 16px;
    margin-right: 10px;
    line-height: 16px;
    top: 40px;
    color: green;
    font-size:12px;
    text-align:left;
    direction:ltr;
}
.CurrencyPriceTa2 {
    position: absolute;
    
   right:.4px;
    color: green;
    direction: ltr;
}
.updateTime {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 50%;
    background-color: #1F7295;
    height: 20px;
    font-size: 10px;
    line-height: 20px;
    text-align: center;
    border-top-right-radius: 10px
}
.ColorRed{
    color:red;
}
.ColorBlue {
    color: #48B2E6;
}

.percentDiv {
    position: absolute;
   
    left: 20px;
    font-size: 16px;
    margin-right: 10px;
    line-height: 16px;
    top: 40px;
    width:50%;
    color: white;
    font-size: 12px;
    text-align: left;
    direction: ltr;
    animation: Hidediv 3s 3;
    animation-iteration-count: infinite;
    animation-direction: forward;
    background-color: #222838;
}
.percentDiv2 {
   
   
    color: white;
    direction: ltr;
    margin: 0px;
    text-align:right;
    width:80px;
    animation: Hidediv2 3s 3;
    animation-iteration-count: infinite;
    animation-direction: forward;
    background-color: #222838;
}
.ColorBackRed {
   color: red;
}

.ColorBackGreen {
   color: green;
}
@keyframes Hidediv {
    0% {
        opacity:0;
        display: none;
       
    }

    25% {
        opacity: 0;
        display: none;
       
    }

    75% {
        opacity: 1;
        display: block;
       
    }

    100% {
        opacity: 1;
        display: block;
       
    }
}

@keyframes Hidediv2 {
    0% {
        opacity: 0;
        display: none;
    }

    25% {
        opacity: 0;
        display: none;
    }

    75% {
        opacity: 1;
        display: block;
    }

    100% {
        opacity: 1;
        display: block;
    }
}
   

    .footer {
        position: relative;
        width: 100%;
        background-color: #222838;
        height: 150px;
        margin-top: 30px;
        text-align: center;
        color: white;
        font-size: 13px;
    }

    .infrom {
        position: absolute;
        width: 100%;
        bottom: 0px;
    }
.dateD{
    position:absolute;
    width:150px;
  bottom:0px;
  height:24px;
   text-align:left;
    left:2%;
    color:white;
    font-size:12px;
}
.homeb{
    margin-top:10px;
    font-size:13px;
    width:20%;
}
.currencyShapeSecond {
    position: relative;
    width: 100%;
    height: 300px;
    background-color: #222838;
    margin: 3px;
    margin-bottom: 2px;
    float: none;
    color: #DFDFDF;
    border-radius: 3px;
}
    .currencyShapeSecond img {
        position: absolute;
        top: 15px;
        width: 50px;
        height: 50px;
        margin: 2px;
        right: 10px;
        display: block;
        z-index: 1;
    }

    .currencyShapeSecond h2 {
        position: absolute;
        display: inline;
        right: 65px;
        font-size: 16px;
        margin-right: 10px;
        line-height: 16px;
        top: 15px;
        color: white;
    }
    .currencyShapeSecond .title {
        position: absolute;
        display: inline;
        right: 20%;
        font-size: 16px;
        margin-right: 10px;
        line-height: 16px;
        top: 15px;
        color: white;
    }
    .currencyShapeSecond .price {
        position: absolute;
        display: inline;
        right: 40%;
        font-size: 16px;
        margin-right: 10px;
        line-height: 16px;
        top: 15px;
        color: white;
    }
    .currencyShapeSecond div h3{
        position: relative;
        display: table;
        right: 20%;
        font-size: 16px;
        margin-right: 10px;
        line-height: 16px;
        top: 15px;
        color: white;

    }
    .chart{
        width:100%;
        position:relative;
        height:300px;
      
        top:20px;
    }
.canvas {
    position: relative;
    width: 100%;
}
.ads {
    position: relative;
    width: calc(50% - 10px);
  
    margin: 3px;
    margin-bottom: 0px;
    float: none;
    color: #DFDFDF;
    border-radius: 0px;
    top: 10px;
    display: inline-table;
   
    
}
.ads2 {
    position: relative;
    width: calc(50% - 10px);
    margin: 3px;
    margin-bottom: 0px;
    float: none;
    color: #DFDFDF;
    border-radius: 0px;
    top: 10px;
    display: none;
}
.AdsText {
    position: absolute;
    z-index: 4;
    background-color: black;
    text-align: center;
    top: -10px;
  font-size:10px;
    opacity: .5;
    width: 50px;
    line-height:20px;
        right : calc(50% - 25px);
   
}
.ads img {
    position: relative;
    width: 100%;
   
}
a{
    text-decoration:none;

}
a:hover{
    text-decoration:none;
}

@media only screen and (max-width: 1500px) {
    .currencyShape {
        position: relative;
        width: calc(33.33% - 20px);
        height: 80px;
        background-color: #222838;
        margin: 10px;
        margin-bottom: 2px;
        float: right;
        color: #DFDFDF;
        border-radius: 3px;
    }
    .currencyShapeSecond {
        position: relative;
        width: 100%;
        height: 300px;
        background-color: #222838;
        margin: 3px;
        margin-bottom: 2px;
        float: none;
        color: #DFDFDF;
        border-radius: 3px;
        right: 0%;
    }
        .currencyShapeSecond div h3 {
            position: relative;
            display: table;
            right: 15%;
            font-size: 16px;
            margin-right: 10px;
            line-height: 16px;
            top: 30px;
            color: white;
            width: 100%;
        }

        .currencyShapeSecond .title {
            position: absolute;
            display: inline;
            right: 0%;
            font-size: 16px;
            margin-right: 10px;
            line-height: 16px;
            top: 30px;
            color: white;
        }

        .currencyShapeSecond .price {
            position: absolute;
            display: inline;
            right: 55%;
            font-size: 16px;
            margin-right: 10px;
            line-height: 16px;
            top: 30px;
            color: white;
        }
   
}
@media only screen and (max-width: 1250px) {
    .currencyShape {
        position: relative;
        width: calc(50% - 20px);
        height: 80px;
        background-color: #222838;
        margin: 10px;
        margin-bottom: 2px;
        float: right;
        color: #DFDFDF;
        border-radius: 3px;
    }
    .currencyShapeSecond {
        position: relative;
        width: 100%;
        height: 300px;
        background-color: #222838;
        margin: 3px;
        margin-bottom: 2px;
        float: none;
        color: #DFDFDF;
        border-radius: 3px;
        right: 0%;
    }

        .currencyShapeSecond div h3 {
            position: relative;
            display: table;
            right: 15%;
            font-size: 16px;
            margin-right: 10px;
            line-height: 16px;
            top: 30px;
            color: white;
            width: 100%;
        }

        .currencyShapeSecond .title {
            position: absolute;
            display: inline;
            right: 0%;
            font-size: 16px;
            margin-right: 10px;
            line-height: 16px;
            top: 30px;
            color: white;
        }

        .currencyShapeSecond .price {
            position: absolute;
            display: inline;
            right: 55%;
            font-size: 16px;
            margin-right: 10px;
            line-height: 16px;
            top: 30px;
            color: white;
        }
    @media only screen and (max-width: 700px) {
        .priceLive {
            position: relative;
            width: 96%;
            right: 1%;
           
            background-color: #181C26;
            display: inline-block;
        }
        .ads {
            position: relative;
            width: 100%;
            background-color: #222838;
            margin: 3px;
            margin-bottom: 0px;
            float: none;
            color: #DFDFDF;
            border-radius: 0px;
            top: 10px;
            border-radius:10px;
            overflow:hidden;
            display:none;
          
           
        }
        .ads2 {
            position: relative;
            width: 100%;
            background-color: #222838;
            margin: 3px;
            margin-bottom: 0px;
            float: none;
            color: #DFDFDF;
            border-radius: 0px;
            top: 10px;
            border-radius: 10px;
            overflow: hidden;
            display:block;
        }
        .AdsText {
            position: absolute;
            z-index: 4;
            background-color: black;
            text-align: center;
            top: -10px;
            font-size: 10px;
            opacity: .5;
            width: 50px;
            line-height: 20px;
            right: calc(50% - 25px);
        }
        .ads2 img {
            width: 100%;
            border-radius: 10px;
            /*height: 100%;*/
        }

        .currencyShape {
            position: relative;
            width: 100%;
            height: 80px;
            background-color: #222838;
            margin: 3px;
            margin-bottom: 2px;
            float: none;
            color: #DFDFDF;
            border-radius: 3px;
        }

        .footer {
            position: relative;
            width: 100%;
            background-color: #222838;
            height: 150px;
            margin-top: 30px;
            text-align: center;
            color: white;
            margin-bottom: 50px
        }

        .logo {
            position: absolute;
            height: 80px;
            top: 0px;
            right: 5px;
        }
        .switch-lang {
            width: 100px;
            text-align: right;
            cursor: pointer;
            z-index: 50;
            position: absolute;
            top: 0px;
            left: 20px;
            color: white;
        }

            .switch-lang:hover .lang-dropdown {
                display: block;
            }

        .switcher-link {
            color: #fff;
        }

            .switcher-link:hover {
                color: #fff;
            }

        .current-lang {
            background: #222838;
            padding: 0px 05px 0px 0px;
            border-radius: 5px;
            font-size: 12px;
        }

        .lang-flag {
            width: 20px;
            display: inline-block;
            margin-right: 5px;
        }

        .lang-text {
            display: inline-block;
            margin-right: 5px;
            vertical-align: top;
            margin-top: 2px;
            font-size: 12px;
        }

        .lang-dropdown {
            display: none;
            background: #34495e;
            border-radius: 5px;
            margin-top: 0px;
        }

        .selecting-lang {
            padding: 3px 5px 3px 5px;
            cursor: pointer;
        }

            .selecting-lang:hover {
                background: #22313f;
            }

        ul > :first-child {
            border-radius: 5px 5px 0px 0px;
        }

        ul > :last-child {
            border-radius: 0px 0px 5px 5px;
        }

        li {
            list-style-type: none;
        }

        .logo2 {
            position: absolute;
            height: 80px;
            bottom: 0px;
            right: 50px;
            z-index: 2;
        }

        .headerWeb {
            position: relative;
            width: 100%;
            height: 70px;
            background-color: #222838;
            
        }
        .chart {
            width: 100%;
            position: relative;
            height: 300px;
            top: 20px;
        }
       
        .currencyShapeSecond div h3 {
            position: relative;
            display: table;
            right: 15%;
            font-size: 16px;
            margin-right: 10px;
            line-height: 16px;
            top: 30px;
            color: white;
            width:100%;
        }
        .currencyShapeSecond .title {
            position: absolute;
            display: inline;
            right: 0%;
            font-size: 16px;
            margin-right: 10px;
            line-height: 16px;
            top: 30px;
            color: white;
        }
        .currencyShapeSecond .price {
            position: absolute;
            display: inline;
            right: 55%;
            font-size: 16px;
            margin-right: 10px;
            line-height: 16px;
            top: 30px;
            color: white;
        }
        .percentDiv2 {
            color: white;
            direction: ltr;
            text-align:right;
            margin: -1px;
            animation: Hidediv2 3s 3;
            animation-iteration-count: infinite;
            animation-direction: forward;
            background-color: #222838;

        }
        .ColorBackRed {
            color: red;
        }

        .ColorBackGreen {
            color: green;
        }
        .homeb {
            margin-top: 10px;
            font-size: 13px;
            width: 95%;
        }
        .currencyShapeSecond {
            position: relative;
            width: 100%;
            height: 300px;
            background-color: #222838;
            margin: 3px;
            margin-bottom: 2px;
            float: none;
            color: #DFDFDF;
            border-radius: 3px;
            right:0%;
        }
    }
}