@import url("../../Scripts/googleFonts/googlefonts.css");

/* variables */


:root {
    --clr-primary: #7380ec;
    --clr-danger: #ff7782;
    --clr-success: #41f1b6;
    --clr-white: #fff;
    --clr-info-dark: #7d8da1;
    --clr-info-light: #dce1eb;
    --clr-dark: #363949;
    --clr-warnig: #ff4edc;
    --clr-light: rgba(132, 139, 200, 0.18);
    --clr-primary-variant: #111e88;
    --clr-dark-variant: #677483;
    --clr-color-background: #f6f6f9;
    --card-border-radius: 2rem;
    --border-radius-1: 0.4rem;
    --border-radius-2: 0.8rem;
    --border-radius-3: 1.2rem;
    --card-padding: 1.8rem;
    --padding-1: 1.2rem;
    --box-shadow: 0 2rem 3rem var(--clr-light);
}

/* dark theme */
.dark-theme-variables {
    --clr-color-background: #181a1e;
    --clr-white: #202528;
    --clr-light: rgba(0, 0, 0, 0.4);
    --clr-dark: #edeffd;
    --clr-dark-variant: #677483;
    --box-shadow: 0 2rem 3rem var(--clr-light)
}

.containerx {
    display: grid;
    width: 100%;
    gap: 1.8rem;
    grid-template-columns: auto 35rem 3rem;
    margin: 2%;
}


a{
    color: var(--clr-dark);
}
h1{
    font-weight:800;
    font-size:2.5rem;
}
h2 {
    font-weight: 800;
    font-size: 1.4rem;
}
h3 {
    font-weight: 800;
    font-size: 1.2rem;
}
h4{
    font-size: 0.8rem;
}

small{
    font-size:1rem;
}
.profile-photo img{
    width:5.8rem;
    height:5.8rem;
    object-fit:contain;
    border-radius:50%;
    overflow:hidden;
}
.text-muted{
    color:var(--clr-info-dark);
}
p{
    color:var(--clr-dark-variant);
}
b{
    color:var(--clr-dark);
}
.primary{
 color:var(--clr-primary);
}
.success{
    color:var(--clr-success);
}
.danger{
    color:var(--clr-danger);
}
.warning{
    color:var(--clr-warnig);
}
aside h2 {
    color: var(--clr-dark);
}
main{
    margin-top:1.4rem;
    width:auto;
}
    main .insights {
       display:grid;
       grid-template-columns: repeat(4,1fr);
       gap:1.2rem;
    }
    main .insights > div {
        background-color: var(--clr-white);
        padding: var(--card-padding);
        border-radius: var(--card-border-radius);
        margin-top: 1rem;
        box-shadow: var(--box-shadow);
        transition: all 0.3s ease;
    }
    main .insights > div:hover{
        box-shadow:none;

    }
    main .insights > div span{
        background:coral;
        padding:0.5rem;
        border-radius:50%;
        color:var(--clr-white);
        font-size:2rem;
    }
        main .insights > div.expenses span {
            background-color: var(--clr-danger);
        }
        main .insights > div.incomes span {
            background-color: var(--clr-success);
        }
        main .insights > div .middle {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
            main .insights > div .middle h1 {
                font-size: 1.6rem;
            }
    main h1 {
        color: var(--clr-dark);
    }
    main h1 {
        color: var(--clr-dark);
    }

    aside h2 {
        color: var(--clr-dark);
    }
    main .insights h1 {
        color: var(--clr-dark);
    }
    main .insights h3 {
        color: var(--clr-dark);
    }
    main .insights p {
        color: var(--clr-dark);
    }
    main .insights .progress {
        position: relative;
        height: 75px;
        width: 75px;
        border-radius: 50px;
    }
    main .insights svg {
        height: 150px;
        width: 150px;
        position: absolute;
        top: 0;
    }
        main .insights svg circle {
            fill: none;
            stroke: var(--clr-primary);
           /* transform: rotate(270,80,80);*/
            stroke-width: 5;
        }
    main .insights .sales svg circle {
        stroke-dashoffset: 10;
        stroke-dasharray: 150;
    }
    main .insights .expenses svg circle {
        stroke-dashoffset: 0;
        stroke-dasharray: 150;
    }
    main .insights .incomes svg circle {
       stroke: var(--clr-success);

    }

    main .insights .progress .number {
        position: absolute;
        top: 5%;
        left:5%;
        height: 100%;
        width:100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /*Sales team*/
main .teamAndToday {
    display: grid;
    grid-template-columns: auto 25rem 25rem;
    gap: 1.6rem;
}
    main .teamAndToday .recent_updates {
        margin-top: 2rem;
        margin-left: 0px;
    }

        main .teamAndToday .recent_updates > div {
            background: var(--clr-white);
            padding: var(--card-padding);
            border-radius: var(--card-border-radius);
            box-shadow: var(--box-shadow);
            transition: all .3s ease;
        }

            main .teamAndToday .recent_updates > div:hover {
                box-shadow: none;
            }

        main .teamAndToday .recent_updates .update {
            display: grid;
            grid-template-columns: 6rem auto 7.5rem;
            gap: 1rem;
            margin-bottom: 1rem;
            align-content: center;
        }
            main .teamAndToday .recent_updates .update .profile {
                display: flex;
                gap: 2rem;
                text-align: center;
            }


        main .teamAndToday .recent_updates > div .middle {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

            main .teamAndToday .recent_updates > div .middle h1 {
                font-size: 1.6rem;
            }

        main .teamAndToday .recent_updates .progress {
            position: relative;
            height: 75px;
            width: 75px;
            border-radius: 50px;
        }
        main .teamAndToday .recent_updates svg {
            height: 150px;
            width: 150px;
            position: absolute;
            top: 0;
        }

        main .teamAndToday .recent_updates .update svg circle {
            fill: none;
            stroke: var(--clr-primary);
            /* transform: rotate(270,80,80);*/
            stroke-width: 5;
            stroke-dashoffset: 10;
            stroke-dasharray: 150;

        }

        main .teamAndToday .recent_updates .progress .number {
            position: absolute;
            top: 5%;
            left: 5%;
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

    main .teamAndToday .cxc_analitycs {
        margin-top: 2rem;
    }

        main .teamAndToday .cxc_analitycs .item_cxc {
            background-color: var(--clr-white);
            display: flex;
            justify-content: start;
            align-items: center;
            gap: 1rem;
            margin: 0;
            width: 100%;
            margin-bottom: 0.8rem;
            padding 1.4rem var(--card-padding);
            border-radius: var(--border-radius-3);
            box-shadow: var(--box-shadow);
        }

            main .teamAndToday .cxc_analitycs .item_cxc:hover {
                box-shadow: none;
            }

            main .teamAndToday .cxc_analitycs .item_cxc .icon {
                background: coral;
                padding: 0.6rem;
                color: var(--clr-white);
                border-radius: 50%;
                height: 50px;
                width: 50px;
                line-height: 50px;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            main .teamAndToday .cxc_analitycs .item_cxc:nth-child(2) .icon {
                background-color: var(--clr-success);
            }

            main .teamAndToday .cxc_analitycs .item_cxc:nth-child(4) .icon {
                background-color: var(--clr-danger);
            }

            main .teamAndToday .cxc_analitycs .item_cxc aside {
                margin-left: 15px;
                display: flex;
            }


    /* end sales team*/



    /*start aside bar*/
    aside{
        margin-top:1.4rem;

    }

aside .item h3 {
    color: var(--clr-dark);
}
    aside stop{
        display:flex;
        justify-content:start;
        gap:2rem;
    }
    aside .top button{
        display:none;

    }
        aside .theme-toggler {
            background-color: var(--clr-white);
            display: flex;
            justify-content: space-between;
            height: 1.6rem;
            width: 4.2rem;
            cursor: pointer;
            border-radius: var(--border-radius-1);
        }
            aside .theme-toggler span {
                font-size: 2rem;
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
            }
                aside .theme-toggler span.active {
                    background-color: var(--clr-primary);
                    color: #fff;
                }

       
        aside .top .profile {
            display: flex;
            gap: 2rem;
            text-align: center;
        }
        aside .info h3 {
            color: var(--clr-dark);
        }
        aside .item h3 {
            color: var(--clr-dark);
        }



        aside .recent_updates {
            margin-top: 1rem;
            margin-left: 0px;
        }
            aside .recent_updates .update {
                background: var(--clr-white);
                padding: var(--card-padding);
                border-radius: var(--card-border-radius);
                box-shadow: var(--box-shadow);
                transition: all .3s ease;
                margin-top:1.5rem;
                
            }
            aside .recent_updates .update:hover {
                box-shadow:none;
         
            }
            aside .recent_updates .update {
                display: grid;
                grid-template-columns: 2.6rem auto 2.6rem;
                gap: 1.5rem;
                margin-bottom: 1rem;
               
            }

                aside .recent_updates .update .iconbtn {
                    background: coral;
                    padding: 0.6rem;
                    color: var(--clr-white);
                    border-radius: 50%;
                    height: 50px;
                    width: 50px;
                    line-height: 50px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    cursor:pointer
                }

                aside .recent_updates .update .iconbtn {
                    background-color: var(--clr-info-dark);
                }

               

                    /*end aside bar*/
    
                    /***************
                        Media Query
                    ***************/
                    @media screen and (max-width:1200px){
                        .containerx {
                            width: 94%;
                            grid-template-columns: 40rem auto 0.1rem;
                        }
                       main .insights{
                           display:grid;
                           grid-template-columns: repeat(1,1fr);


                       }
                        main .teamAndToday {
                            display: grid;
                            grid-template-columns: repeat(1,1fr);
                        }

                    }
                    /***************
                        Media Query Telefonos
                    ***************/
@media screen and (max-width:768px) {
    .containerx {
        width: 100%;
        grid-template-columns: repeat(1,1fr);
    }
    main .teamAndToday {
        display: grid;
        grid-template-columns: repeat(1,1fr);
        gap: 1.6rem;
        padding: 40px;
    }
   
    aside .top{
        position:fixed;
        top:0;
        left:0;
        display:flex;
        justify-content:center;
        align-items:center;
        padding: 0 0.8rem;
        background:var(--clr-white);
        width:100%;
        z-index:2;
        box-shadow: 0 1rem 1rem var(--clr-white);
        margin:0;
    }
    main .insights {
        display: grid;
        grid-template-columns: repeat(1,1fr);
        gap: 1.6rem;
        padding: 40px;
    }
    aside .cxc_analitycs{
        padding:30px;
    }

}