html {
    background-color: #F4F4F4;
}
body {
    height: 100%;
}
.loginContainer{
    background: #4457F3 ;
    background: -webkit-linear-gradient(top left, #4457F3  0%, #4457F3 100%);
    background: linear-gradient(to bottom right, #4457F3  0%, #4457F3 100%);
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    height: 100vh; /*Allow spacing based on window height*/
    margin: 0;
    min-height: 240px;
}
.bg-boxes{
    /*Set the container for the svg elements to take up the whole window and hide objects outside of the window*/
    height: 100%;
    min-height: 240px;
    position: absolute;
    overflow: hidden;
    width: 100%;
    z-index: 1;
}

.bg-boxes svg{
    /*Set defaults for svg columns. Opacity set to 0 so the elements are invisible before the animation begins and will not show up on browsers without animation*/
    -webkit-animation: riser 20s infinite;
    animation: riser 20s infinite;
    opacity: 0;
    overflow: visible;
    position: absolute;
}

.bubble{
    /*Set the defaults for the "bubbles". transform-origin should always be the center-point of the object including blank-space within the svg. Since the object should be centered, this is equal to the width of the object. The default bubble is 100px by 100px in an svg object with a width of 200px*/
    -webkit-animation: rotator 20s linear infinite;
    animation: rotator 20s linear infinite;
    fill: #FFF;
    -webkit-transform-origin: 100px 100px;
    transform-origin: 100px 100px;
}
#col1{
    /*Since this element is larger than the set default, I want it to rise a little faster to give a subtle sense of depth*/
    -webkit-animation-duration: 15s;
    animation-duration: 15s;
}
#bub1{
    /*The transform-origin has to be redefined because this bubble is not the set default size*/
    -webkit-transform-origin: 150px 150px;
    transform-origin: 150px 150px;
}

#col2{
    /*To offset the columns, adjust their left attribute and add an animation-delay*/
    left: 15%;
    -webkit-animation-delay: 18s;
    animation-delay: 18s;
}

#col3{
    left: 30%;
    -webkit-animation-delay: 14s;
    animation-delay: 14s;
    -webkit-animation-duration: 17s;
    animation-duration: 17s;
}

#bub3{
    -webkit-animation-delay: 14s;
    animation-delay: 14s;
    -webkit-transform-origin: 130px 130px;
    transform-origin: 130px 130px;
}

#col4{
    left: 45%;
    -webkit-animation-delay: 8s;
    animation-delay: 8s;
    -webkit-animation-duration: 22s;
    animation-duration: 22s;
}

#bub4{
    -webkit-animation-delay: 8s;
    animation-delay: 8s;
    -webkit-transform-origin: 80px 80px;
    transform-origin: 80px 80px;
}

#col5{
    left: 60%;
    -webkit-animation-delay: 15s;
    animation-delay: 15s;
    -webkit-animation-duration: 18s;
    animation-duration: 18s;
}

#bub5{
    -webkit-animation-delay: 15s;
    animation-delay: 15s;
    -webkit-transform-origin: 120px 120px;
    transform-origin: 120px 120px;
}

#col6{
    left: 75%;
    -webkit-animation-delay: 19s;
    animation-delay: 19s;
}

#col7{
    left: 90%;
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}

#col8{
    left: -5%;
    -webkit-animation-delay: 11s;
    animation-delay: 11s;
}

#col9{
    left: 25%;
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
}

#col10{
    left: 50%;
    -webkit-animation-delay: 12s;
    animation-delay: 12s;
}

#col11{
    left: 67%;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-duration: 25s;
    animation-duration: 25s;
}

#bub11{
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-transform-origin: 50px 50px;
    transform-origin: 50px 50px;
}

/*Rotation Animation - Should be set to a factor of 360 to prevent jumpiness*/
@-webkit-keyframes rotator{
    to{
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotator{
    to{
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes riser{
    0%{
        opacity: 0.2;
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    100%{
        opacity: 0.2;
        -webkit-transform: translateY(-250px);
        transform: translateY(-250px);
    }
}

@keyframes riser{
    0%{
        opacity: 0.2;
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    100%{
        opacity: 0.2;
        -webkit-transform: translateY(-250px);
        transform: translateY(-250px);
    }
}
.loginPaper{
    width: 33%;
    min-width: 300px;
    display: inline-block;
    margin-top: 25vh;
    border-radius: 15px;
    position: absolute;
    z-index: 1000;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}
.loginTitle{
    font-family: 'Poppins', sans-serif;
    font-size: 9vh;
    margin-top: 7%;
    font-weight: 600;
    letter-spacing: -3px;
    margin-bottom: 3%;
}
.loginEmail{
    width: 51%;
    font-family: 'Poppins', sans-serif;
    min-width: 215px;
}
.loginEmail label{
    font-family: 'Poppins', sans-serif;
}
.loginPassword{
    width: 51%;
    font-family: 'Poppins', sans-serif;
    min-width: 215px;
}
.loginPassword label{
    font-family: 'Poppins', sans-serif;
}



.loginButton{
    display: block;
    font-family: 'Poppins', sans-serif;
    text-transform: capitalize;
    width: 40%;
    left: 30%;
    margin-top: 12%;
    height: 53px;
    font-size: 2vh;
    margin-bottom: 10%;
}

.imgLogo{
    width: auto;
    height: 110px;
    margin-top: 2em;
}
.iconDrawer svg{
    font-size: 40px;
    fill: black;
    height: 40px;
}
.drawerPaper{
    width: 210px;
    margin-top: 64px;
    z-index: 1;
}
.drawerList{
    margin-top: 7vh;
}
.drawerList a{
    text-decoration: none;
}
.drawerItem{
    transition: all 600ms ease;
    border-left: 0px solid #4457F3;
}
.drawerItem span{
    color: #2F2F30;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.drawerItem i{
    color: #2F2F30;
}
.drawerItemSelected{
    border-left: 8px solid #4457F3;
    transition: all 600ms ease;
}
.drawerItemSelected svg{
    fill: #4457F3;
}
.drawerItemSelected span{
    color: #4457F3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.appBar{
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 0px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
    width: 100%;
}
.bellIcon{
    fill: currentColor;
    width: 1em;
    height: 1em;
    display: inline-block;
    font-size: 24px;
    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    user-select: none;
    flex-shrink: 0;
}

@media (max-width: 959px){
    .drawerPaper{
        margin-top: 0;
    }
}
.container{
    padding-left: 210px;
    padding-top: 64px;
    text-align: left;
    height: calc(100vh - 64px);
}
.title{
    font-size: 1.25rem;
    text-align: left;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    margin-left: 2%;
}
.graphsContainer{
    width: 100%;
    text-align: left;
    height: 33%;
}
.paperRendimiento{
    vertical-align: top;
    width: 60%;
    height: 100%;
    display: inline-block;
    margin-left: 2%;
    border-radius: 15px;
    transition: all 600ms ease;
}
.paperChartPortfolio{
    width: 34%;
    height: 100%;
    margin-left: 2%;
    display: inline-block;
    border-radius: 15px;
}
.rendimientoCointainer{
    height: 65%;
    width: 95%;
    text-align: center;
    margin-left: 2.5%;
    margin-top: 1.5%;
}
.rendimientoContainerInvestment{
    text-align: left;
}
.portfolioTableImg{
    height: 45px;
}
.cpartValue{
    float: right;
    margin-right: 2%;
}
.tableBody th{
    white-space: nowrap;
    font-size: 1rem;
    transition: ease 600ms ease;
    padding: 4px 24px 4px 24px;
}
.tableBody td{
    white-space: nowrap;
    transition: all 600ms ease;
    font-size: 1rem;
    padding: 4px 24px 4px 24px;
}
.tableHead th{
    font-size: 1rem;
    transition: ease 600ms ease;
    padding: 4px 24px 4px 24px;
}
.tableHead td{
    transition: all 600ms ease;
    font-size: 1rem;
    padding: 4px 24px 4px 24px;
}


.tableBodyC th{
    font-size: 1rem;
    transition: all 600ms ease;
    opacity: 0;


}
.tableBodyC td{
    font-size: 1rem;
    transition: all 600ms ease;
    opacity: 0;

}
.tabsTradesIndicator{
    background-color: #ffffff;
}
.rendPos{
    color: green;
}
.rendNeg{
    color: red;
}
.modalInv{
    width: 50vw;
    min-width: 300px;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20vh;
}
.fieldModal{
    width: 45.5%;
    font-family: 'Poppins', sans-serif;
    margin-left: 3%;
}
.fieldModal label{
    font-family: 'Poppins', sans-serif;
}
.clientsField{
    width: 100%;
    margin-left: 0;
}
.modalTi{
    margin-left: 3%;
}
.modalPaper{
    display: inline-block;
    width: 100%;
    border-radius: 15px;
}
.modalButton{
    margin-top: 2%;
    font-size: 1rem;
    margin-bottom: 2%;
}
.formControl{
    flex-direction: row;
    width: 97%;
    margin-left: 3%;
}
.radioForm{
    flex-direction: row;
}
.controlFormLabel span{
    font-family: 'Poppins'
}
.paperNewCoin{
    width: 100%;
    padding-bottom: 1%;
}
.newCoinField{
    width: 94%;
}
.snackbarSucces div{
    background-color: green;
}
.snackbarFailed div{
    background-color: red;
}
.endModalP{
    font-size: 1rem;
    margin-top: 30px;
    display: inline-block;
    width: 45.5%;
    font-weight: 400;
}
.actualLiquiTitle{
    padding-top: 1em;
}
.actualLiquiButton{
    width: 20%;
    left: 40%;
}
.imgCryptos{
    height: 82%;
    max-width: 21%;
    margin-left: 2%;
}
.investmentDataContainer{
    display: inline-block;
    vertical-align: top;
    margin-left: 3%;
    width: 73%;
}

.switchMarginNormal{
    margin-top: 16px;
    margin-bottom: 8px;
    margin-right: 0;
}
@media (max-width: 959px){
    .title{
        margin-left: 3%;
    }
    .graphsContainer{
        height: auto;
    }
    .paperRendimiento{
        display: block;
        width: 94%;
        height: 310px;
        margin-left: 3%;
    }
    .paperRendimientoClient{
        margin-top: 20px;
    }
    .paperChartPortfolio{
        margin-top: 20px;
        display: block;
        height: 310px;
        width: 94%;
        margin-left: 3%;
    }
    .rendimientoCointainer{
        display: inline-block;
        height: 70%;
    }
    .appBar{
        left: 0;
        width: 100%;
    }
    .iconDrawer svg{
        height: 30px;
    }
    .drawerPaper{
        width: 200px;
    }
    .imgLogo{
        display: none;
    }
    .container{
        padding-left: 0px;
        padding-top: 57px;
        height: calc(100vh - 57px);
    }
    .modalInv{
        width: 96vw;
        margin-top: 2vh;
    }
    .actualLiquiButton{
         width: 40%;
         left: 30%;
     }
}
@media (max-width: 599px){

}
.metricsWrapper{
    width: 34%;
    margin-left: 2%;
    display: inline-block;
    border-radius: 15px;
}
.paperDashMetrics{
    height: 13%;
    border-radius: 15px;
    margin-bottom: 2em;
    background: #4457F3;
    color: white;
}
.metricsTitle{
    padding-top: 2%;
    margin: 0 0 0 2%;
    font-size: 2vh;
}
.metricContainer{
    height: 100%;
}
.metricP{
    text-align: right;
    font-family: Poppins, sans-serif;
    font-size: 3vh;
    padding-right: 10%;
    margin-top: 0;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.conversions{
    width: 29%;
    margin-left: 2%;
    display: inline-block;
    margin-top: 2em;
}
.conversionsRate{
    margin-left: 2%;
    display: inline-block;
    width: 29%;
}
.conversionsRateLast{
    margin-left: 2%;
    display: inline-block;
    width: 34%;
}
@media (max-width: 959px){
    .paperDashMetrics{
        height: 15%;
    }
    .metricsWrapper{
        width: 94%;
        margin-top: 1em;
        margin-left: 3%;
        border-radius: 15px;
    }
    .conversions{
        width: 94%;
        margin-left: 3%;
    }
    .conversionsRate{
        width: 94%;
        margin-left: 3%;
    }
    .conversionsRateLast{
        width: 94%;
        margin-left: 3%;
    }

}
.buttonPic{
    height: 341px;
    max-width: 100%;
    object-fit: contain;

}
.productInfoWrapper{
    display: inline-block;
    vertical-align: top;
    margin-left: 3%;
    width: 45.5%;
}
.productInfoWrapper .fieldModal{
    width: 100%;
    margin-top: 0;
    margin-bottom: 24px;
    margin-left: 0;
}
.productInfoWrapper:last-child{
    margin-bottom: 0;
}
@media (max-width: 959px){
    .buttonPic{
        height: 151px;
    }
    .buttonPicWrapper{
        width: 94%;
        margin-bottom: 24px;
    }
    .productInfoWrapper{
        width: 94%;
    }

}
.portfolioTableImg{
    height: 55px;
    padding: 0;
    width: 55px;

    object-fit: cover;
}
.tableBody th{
    font-family: Poppins, sans-serif;
    font-size: 2vh;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
.tableBody th button{
    font-family: Poppins, sans-serif;
    font-size: 2vh;
    text-transform: none;
    white-space: nowrap;
    font-weight: 400;
    letter-spacing: 0;
}
@media (max-width: 959px){
    .tableBody th{
        font-size: 2vh;
    }
}
.fieldProduct{
    width: 21.25%;
}
.addProductButtonWrapper{
    text-align: right;
}
.addProductButton{
    margin-right: 4%;
}
.endModalP{
    font-size: 2em;
    margin-top: 10px;
    margin-bottom: 0;
}
.currencyAppBar{
    font-family: Poppins, sans-serif;
    font-weight: 800;
}
.carousel .slide img {
    width: 55px;
}
.carousel .slide{
    background: none;
}
.casheer .paperRendimiento{

}
.casheer .paperChartPortfolio{
}
.casheer{
    margin-top: 7px;
}
.casheerTops{
    height: 13vh;
    margin-bottom: 2em;
    padding-top: 1em;
}
.casheer .rendimientoCointainer{

}
.casheerContainer .paperDashMetrics{
    width: 22.5%;
    color: black;
    background: white;
    vertical-align: top;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 0;
    font-weight: 400;
    padding: 0;
}

.casheerContainer .conversionsRate{
    margin-top: 2em;
}
.casheerContainer .conversionsRateLast {
    margin-top: 2em;
}
.casheerTops .paperDashMetrics{
    color: white;
    height: 100%;
    margin-bottom: 0;
    margin-top: 0;
    background: #4457F3;
}
.earnings{
    width: 60%;
    margin-top: 7px;
}
@media (max-width: 959px){
    .casheerTops{
        height: auto;
        margin-bottom: 1em;
    }
    .casheerTops .paperDashMetrics{
        margin-bottom: 2em;
        height: 13vh;
    }
    .casheerContainer .paperDashMetrics{
        width: 94%;
    }
    .earnings{
        width: 94%;
    }
    .fieldProduct{
        width: 45.5%;
    }
}
.cashColor{
    height: 18px;
    background: blue;
    width: 40px;
    display: inline-block;
    float: right;
    margin-right: 2%;
}
.cellTable{
    width: 96%;
    margin-top: 1em;
    margin-bottom: 1em;
    border-radius: 15px;
    margin-left: 2%;
    height: 75px;
}
@media (max-width: 959px){
    .cellTable{
        width: 94%;
        margin-left: 2%;
    }
}
.sales {
    height: 46%;
    background: white;
    color: black;
    margin-bottom: 0;
}
.salesLast {
    margin-top: 4%;
    height: 46%;
    background: white;
    color: black;
}
.stockContainer .paperDashMetrics{
    width: 30.66%;
    height: 13vh;
    vertical-align: top;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 0;
    font-weight: 400;
    padding: 0;
}
.stockContainer .conversions{
    margin-top: 0;
}

@media (max-width: 959px){
    .stockContainer .paperDashMetrics{
        width: 94%;
        margin-bottom: 2em;
    }
    .sales{
        margin-bottom: 2em;
    }
}
.sellButton{
    width: 20%;
    left: 20%;
    display: inline-block;
}
.printButton{
    left: 40%;
}

@media (max-width: 959px){
    .sellButton{
        width: 30%;
        left: 10%;
    }
    .printButton{
        left: 30%;
    }
}
.expansionProdList{
    padding: 0;
    margin: 0;
    width: 100%;
}
.expansionProdList div{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.8em;
    font-family: Roboto, sans-serif;
    font-weight: 700;
    margin-bottom: 5px;
}
.expansionSumm div{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.expansionSumm {
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stockDetailMetContainer .paperDashMetrics{
    width: 30.5%;
    height: 43%
}
.stockDetailMetContainerMets{
    display: inline-block;
    vertical-align: top;
    width: 64%;
    height: 100%;
}
.secondRow{
    margin-top: 4vh;
}
@media (max-width: 959px){
    .stockDetailMetContainerMets{
        margin-top: 1em;
        width: 100%;
    }
    .stockDetailMetContainer .paperDashMetrics{
        width: 45.5%;
        height: 13vh;
        margin-bottom: 1em;
    }
    .secondRow{
        margin-top: 0;
    }
}
.fieldMeliID{
    width: 94%;
}
.titlePrint{
    font-size: 2em;
    margin-top: 20px;
    font-weight: 800;
    margin-right: 3%;
    border-bottom: 1px solid #CFCFCF;
}
.titlePrintTotal{
    font-size: 2em;
    margin-top: 20px;
    font-weight: 800;
    margin-right: 3%;
    float: right;
    font-family: Poppins, sans-serif;
    display: inline-block;
}
.dateInvoiceWrapper{
    width: 50%;
    display: inline-block;
    font-size: 2vh;
    vertical-align: top;
}
.dateTitle{
    font-weight: 500;
    margin-left: 6%;
    color: #8E8F8F;
    font-family: Poppins, sans-serif;
}
.dateInvoice{
    font-weight: 300;
    margin-left: 6%;
    color: #000000;
    font-family: Poppins, sans-serif;
}
.invoiceProductName{
    display: inline-block;
    width: 50%;
    font-weight: 300;
    color: #000000;
    font-family: Poppins, sans-serif;
}
.invoiceProductPrice{
    display: inline-block;
    font-weight: 500;
    width: 12%;
    margin-left: 3%;
    color: #000000;
    font-family: Poppins, sans-serif;
}
.invoiceProductWrapper{
    width: 94%;
    margin-left: 3%;
}
.invoiceProductTitles{
    width: 94%;
    margin-left: 3%;
    border-bottom: 1px solid #CFCFCF;
}
.invoiceProductTitles p{
    font-weight: 800;
}
.totalSum {
    border-bottom: 0px solid #CFCFCF;
    border-top: 1px solid #CFCFCF;
}
.prodsNameExport{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
    margin: 0;
    display: inline-block;
}