.h-100 {height: 100% !important;}
.w-10 {width: 10%;}
.w-50 {width: 40% !important;}
 @media (max-width: 1500px)  {.w-50 {width: 60% !important;}}
.div-chart-1 {height:15%;top:55%;animation-name:animate-div-chart-1;}
.div-chart-2 {height: 15%;top: 40%;animation-name: animate-div-chart-2;}
.div-chart-3 {height: 20%;top: 25%;animation-name: animate-div-chart-3;}
.div-chart-4 {height: 40%;top: 35%;animation-name: animate-div-chart-4;}
.div-chart-5 {height: 25%;top: 60%;animation-name: animate-div-chart-5;}
.div-chart-6 {height: 25%;top: 65%;animation-name: animate-div-chart-6;}
.div-chart-7 {height: 20%;top: 60%;animation-name: animate-div-chart-7;}
.div-chart-8 {height: 25%;top: 25%;animation-name: animate-div-chart-8;}
.div-chart-9 {height: 45%;top: 25%;animation-name: animate-div-chart-9;}
.div-chart-10 {height: 30%;top: 15%;animation-name: animate-div-chart-10;}
       .animate-chart-config{animation-duration: 10s; animation-direction: alternate;animation-iteration-count: infinite;animation-timing-function: linear; }
        .div-chart-1{height: 15%; top: 55%;animation-name: animate-div-chart-1; }
        @keyframes animate-div-chart-1 {
            0% {top: 55%;}
            50% {top: 80%;}
100% {top: 55%;} }
        .div-chart-2{
            height: 15%;top: 40%;animation-name: animate-div-chart-2; }
        @keyframes animate-div-chart-2 {
            0% {top: 40%;}
            50% {top: 75%;}
            100% {top: 40%;}  }
        .div-chart-3{
            height: 20%;
            top: 25%;
            animation-name: animate-div-chart-3;
        }
        @keyframes animate-div-chart-3 {
            0% {top: 25%;}
            50% {top: 60%;}
            100% {top: 25%;}}
        .div-chart-4{
            height: 40%;
            top: 35%;
            animation-name: animate-div-chart-4; }
        @keyframes animate-div-chart-4 {
            0% {top: 35%;}
            50% {top: 45%;}
            100% {top: 35%;}}
        .div-chart-5{
            height: 25%;
            top: 60%;
            animation-name: animate-div-chart-5; }
        @keyframes animate-div-chart-5 {
            0% {top: 60%;}
            50% {top: 30%;}
            100% {top: 60%;} }
        .div-chart-6{
            height: 25%;
            top: 65%;
            animation-name: animate-div-chart-6; }
        @keyframes animate-div-chart-6 {
            0% {top: 65%;}
            50% {top: 25%;}
            100% {top: 65%;} }
        .div-chart-7{
            height: 20%;
            top: 60%;
            animation-name: animate-div-chart-7;  }
        @keyframes animate-div-chart-7 {
            0% {top: 60%;}
            50% {top: 25%;}
            100% {top: 60%;}  }
        .div-chart-8{
            height: 25%;
            top: 25%;
            animation-name: animate-div-chart-8;}
        @keyframes animate-div-chart-8 {
            0% {top: 35%;}
            50% {top: 45%;}
            100% {top: 35%;}}
        .div-chart-9{
            height: 45%;
            top: 25%;
            animation-name: animate-div-chart-9; }
        @keyframes animate-div-chart-9 {
            0% {top: 25%;}
            50% {top: 60%;}
100% {top: 25%;}  }
        .div-chart-10{height: 30%;top: 15%;animation-name: animate-div-chart-10;  }
        @keyframes animate-div-chart-10 {
            0% {top: 15%;}
            50% {top: 60%;}
            100% {top: 15%;} }
        .bg-color-1 {background-color: #030524; }
        .bg-color-2{background-color: #e8e8e8;}
        .text-color-1 {
            color: #f9af1a;}
        .border_1{border: #f9af1a 2px solid; border-radius: 10px;}
        .border_2{border: #11539c 2px solid;border-radius: 10px; }
        #forex-charts{
            height: calc(100% - 380px);margin: 0 80px;width:100%;height:500px; }
        #form-loading{
            top: 0px; left: 0px;background-color: rgba(0, 0, 0, 0.2); }
        #loading{
            top: 50%;left: 50%; transform: translate(-50% , -50%); }
        @media (min-width: 992px) {
            #form-login{position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%);}
            #forex_logo{height: 100px;}}
        @media (max-width: 992px) {
            #forex_logo{
                margin: 25px auto 0 auto;}
            #forex-title-description {
                font-size: 20px;}
            #form-login{
                width: 75%; }
            #forex_logo{
                height: 75px; } }
        @media (min-width: 768px) and (max-width: 992px) {
            #form-login{
                width: 70%;} }
        @media (min-width: 992px) {.height-screen {
                height: 100vh;}
#forex_logo{ margin: 150px auto 0 auto;}
            #forex-title-description {font-size: 24px;}}
        @media (min-width: 992px) and (max-width: 1350px)  {
            #form-login{ width: 85%;}  }
        @media (min-width: 1350px) {
            #form-login{  width: 55%; }}