*{

    font-family: 'Overpass', sans-serif;
}

body, html{ height: 100%; }

.body-container{

    width: 100%;
    height: 100vh;
    /* background-color: red; */
    position: absolute;
    z-index: 1;
}

.main-container{

    width: 100%;
    height: 100vh;
    
    background: linear-gradient(45deg, #00d2ff 0%, #3a47d5 100%);
    clip-path: circle(81.3% at 21% 0);
    position: absolute;
    z-index: 10;

    
}



.container{

    width: 900px;
    height: 600px;
    /* background-color: yellowgreen; */
    /* background: rgba(180, 180, 180, 0.3); */
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    z-index: 20;
    border-radius: 50px;
    
    
    box-shadow:
    0 2.8px 2.2px rgba(0, 0, 0, 0.034),
    0 6.7px 5.3px rgba(0, 0, 0, 0.048),
    0 12.5px 10px rgba(0, 0, 0, 0.06),
    0 22.3px 17.9px rgba(0, 0, 0, 0.072),
    0 41.8px 33.4px rgba(0, 0, 0, 0.086),
    0 100px 80px rgba(0, 0, 0, 0.12)
      ;

    
    padding: 10px;
     
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;

    color: #fff;
      
}

.tabla1{

    width: 100%;
    height: 200px;
    /* background-color: yellow; */
    position: relative;
    z-index: 30;
    top: 40px;
    padding: 10px;
    font-weight: 300;
}

.tabla2{

    width: 100%;
    height: 200px;
    /* background-color: yellow; */
    position: relative;
    z-index: 30;
    top:70px;
    padding: 10px;
    font-weight: 300;
    margin-top: 25px;
}

.logo-t1{

    width: 300px;
    height: 100px;
    padding: 20px;
    /* background-color: green; */
    background-color: #fff;
    border-radius: 50px;

    box-shadow:
    0 2.8px 2.2px rgba(0, 0, 0, 0.034),
    0 6.7px 5.3px rgba(0, 0, 0, 0.048),
    0 12.5px 10px rgba(0, 0, 0, 0.06),
    0 22.3px 17.9px rgba(0, 0, 0, 0.072),
    0 41.8px 33.4px rgba(0, 0, 0, 0.086),
    0 100px 80px rgba(0, 0, 0, 0.12)
      ;
    
    object-fit: cover;
    position: relative;
    margin: auto;
    margin-bottom: 20px;
}
.logo-t1 img{

    height: 100%;
    width: 100%;
}

td{

    color: #fff;
    border-bottom: solid 1px #fff;
}

.tabla-t{
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    
    
    
       
}


thead{
    border-bottom: solid 1px #fff;
}
.tabla-tr{
    /* background-color: #fff; */
    color: #282929;
}

.tabla-thead th, td{


    /* background-color: red; */
    /* border: solid 1px rgb(0, 0, 0); */
    font-weight: 100;
    padding: 3px;
}

td:hover{

    background-color: #6CB4EE;
    color: #fff;
    cursor: pointer;
}


/* ---------------------------- */
            /* Responsive */
/* ---------------------------- */


@media only screen and  (max-device-width: 1024px)  {

    .container{
        
        width: 90vw;
        max-width: 800px;
        height: auto;
        display: flex;
        flex-direction: column;
        align-content: space-between;
        position: absolute;
        overflow-y: auto;
        margin-top: 25px;
        margin-bottom: 25px;
        border-radius: 25px;
    }

    .logo-t1 {

        border-radius: 25px;
    }
     
    .tabla2 {
        
        height: auto;
        padding-bottom: 30px;
    }

    .tabla1 {
               
        height: auto;
    }

   
    .tabla-t{
        text-align: left;
        
    }
    
    thead{
        border-bottom: none;
    }
   
   
	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block;
        
        
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
        left: -9999px;
        
    }
    
	.tabla1 td { 
		/* Behave  like a "row" */
        border: none;
        
		border-bottom: 1px solid #e1ebee74;
		position: relative;
		padding-left: 50%; 
    }
    .tabla2 td { 
		/* Behave  like a "row" */
        border: none;
        
		border-bottom: 1px solid #fff;
		position: relative;
		padding-left: 50%; 
	}
	
    .tabla1 td:before {

        color: #fff;
    }

    td{

        color: #fff;
    }
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
        white-space: nowrap;
        /* color: rgb(0, 0, 0); */
        color: #fff;
    
	}
	
	/*
	Label the data
	*/
	td:nth-of-type(1):before { content: "Last Update"; }
	td:nth-of-type(2):before { content: "Balance"; }
	td:nth-of-type(3):before { content: "Equity"; }
	td:nth-of-type(4):before { content: "Margin"; }
	td:nth-of-type(5):before { content: "Free Margin"; }
	td:nth-of-type(6):before { content: "Margin Level"; }
	td:nth-of-type(7):before { content: "Profit"; }
}



    

@media screen and (max-width: 500px) {

    .logo-t1{
        width: 80%;
        height: auto;
        
    }
}