:root{
    --iconColor:hsla(0, 0%, 50%, 0.358);
}

*{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    text-transform:capitalize ;
    text-decoration: none;
    color: whitesmoke;
}
body{
    width: 100vw;
    height: 100vh;
    
}
.contanier{
    max-width: 100vw;
    max-height: 100vh;
    background-color: black;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.contanier .header{
    display: flex;
    flex-direction: column;
    gap: 10px;

}
.contanier .header .nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    gap: 10px;
    .log{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .searsh{
                font-size: 25px;
                i{
                    border: solid 2px var(--iconColor);
                    padding: 8px;
                    border-radius: 42px;
                }
            }
        }
}
.contanier .header .nav .tab{
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 30px;
        background-color: var(--iconColor);
        a{
            text-decoration: none;
            border: transparent;
        }
        border: solid 1px transparent;
        padding: 15px;
        border-radius: 10px 10px 10px 10px;
        
    }
.contanier .header .nav .acount{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--iconColor);
    .box-img{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
        border: 1px solid transparent;
        flex-shrink: 0;
        
        img{
            width: 100%;
        }
    }
    .def{
        span{
            font-size: large;
        }
    }
    .show{
        font-size: 20px;
    }
    border: solid 1px transparent;
    border-radius: 26px;
    
}
.contanier .header .product {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    .prp{
        display: flex;
        justify-content: space-between;
        gap: 10px;
        .data{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .icon{
                background-color: var(--iconColor);
                padding: 20px;
                border: solid 1px transparent;
                border-radius: 15px;
                i{
                    font-size: xx-large;
                }
            }
            .details{
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                gap: 15px;
                .spans{
                    display: flex;
                    justify-content: space-between;
                    .font{
                        font-size: x-large;
                    }
                    .co{
                        color: green;
                        align-self: flex-end;
                    }
                    .ca{
                        color: orange;
                        align-self: flex-end;
                    }
                }
                
            }
        }
    }
    .title{
        letter-spacing: 3px;
    }
} 
.contanier .main{
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    
    .database{
        border: solid 1px transparent;
        border-radius: 35px;
        padding: 8px;
        display: flex;
        justify-content: space-between;
        background-color: var(--iconColor);
        .look{
            display: flex;
            justify-content: center;
            align-items: center;
            .i-con{
                font-size: 25px;
                i{
                    border: solid 1px transparent;
                    border-radius:50px;
                    padding: 10px;
                    background:hsla(0, 0%, 50%, 0.458);
                }
            }
            .dat{
                display: flex;
                flex-direction: column;
                gap: 5px;
            }
        }
        .req{
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 5px;
            i{
                font-size:20px;
                
            }
            .error{
                color: blueviolet;
            }
            .icon{
                width: 25px;
                i{
                    font-size: 25px;
                }
                padding: 5px;
                border: solid 1px var(--iconColor);
                border-radius:50% ;
                
            }
            .button{
                display: flex;
                justify-content: space-between;
                gap: 5px;
                button{
                padding: 10px;
                border-radius: 25px;
                border: solid 0.1px var(--iconColor) ;
                background-color:transparent;
                padding-top: 17px;
                padding-bottom: 17px;
                font-weight:bold ;
                }
                .btn{
                    background-color: indianred;
                }
            }
            
        }
    }
    
}
.contanier .main .content{
        display: flex;
        margin:8px ;
        .sec1{
            display: flex;
            flex-direction: row;
            gap:10PX;
            .I1{
                display: flex;
                flex-direction: column;
                gap: 10px;
                padding: 10px;
                border: solid 1px transparent;
                border-radius: 20px;
                background-color: var(--iconColor);
                .week{
                    
                    width: 700px;
                    
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .days{
                        display: flex;
                        justify-content: space-between;
                        gap: 5px;
                        align-items: center;
                        a{
                            padding: 8px;
                            padding-left: 10px;
                            padding-right:10px ;
                        }
                        a:focus{
                            border: solid 1px;
                            border-radius: 20px;
                        }
                        i{
                            rotate: -45deg;
                            font-size:25px ;
                            padding:5px ;
                            border: solid 1px var(--iconColor);
                            border-radius: 50%;
                        }
                    }
                    }
                    .cur{
                        display: flex;
                        flex-direction: column;
                        gap: 10px;
                        
                        .nums{
                            position: relative;
                            display: flex;
                            justify-content: space-between;
                            span{
                                font-size: 35px;
                            }
                            i{
                                align-self: start;
                                rotate: -45deg;
                                position: absolute;
                                top: 0;
                                font-size: 20px;
                            }
                        }
                        .nums2{
                            display: flex;
                            .item2{
                                table{
                                    tr td{
                                        background-color: orange;
                                        border: transparent 1px;
                                        width: 45px;
                                        height: 25px;
                                        border-radius: 9px;
                                        transition: 0.3s;
                                    }
                                    tr> td:hover{
                                        background-color: chocolate;
                                        cursor: pointer;
                                    }
                                    .sp{
                                        background-color: transparent;
                                        border: none;
                                    }
                                    .sp:hover{
                                        background-color: transparent;
                                        cursor:auto;
                                    }
                                }
                            }
                        }
                    }
                }
                .I2{
                    width: 350px;
                    display: flex;
                flex-direction: column;
                gap: 10px;
                padding: 10px;
                border: solid 1px transparent;
                border-radius: 20px;
                background-color: var(--iconColor);
                    .I21{
                        display: grid;
                        .dots{
                            display: flex;
                            justify-content: space-between;
                            i{
                                font-weight: bolder;
                                padding: 5px;
                                border: 1px solid var(--iconColor);
                                border-radius: 50%;
                            }
                        }
                        .tracking-id{
                            .iid{
                                display: flex;
                                justify-content: space-between;
                                p{
                                    font-weight: bolder;
                                }
                                button{
                                    padding: 5px;
                                    background-color: rgb(245, 245, 87);
                                    border: solid 1px;
                                    border-radius: 15px;
                                    color: black;
                                }
                            }
                        }
                        .id{
                            display: flex;
                            flex-direction: column;
                            gap: 10px;
                            .data-id{
                                display: flex;
                                flex-direction: column;
                                gap: 10px;
                                .data-id-3{
                                    .sadow{
                                        
                                        display: flex;
                                        justify-content: start;
                                        align-items: center;
                                        gap: 5px;
                                        div{
                                            width: 2px;
                                            height: 2px;
                                            border: solid 1px transparent ;
                                            border-radius: 100%;
                                            background-color: yellow;
                                            box-shadow:0px 0px 0px 2px rgba(240, 240, 227, 0.522);
                                        }
                                    }
                                    .sapns{
                                        display: flex;
                                        justify-content: space-evenly;
                                        font-size: small;
                                        gap: 110px;
                                    }
                                }
                            }
                            .route{
                                display: flex;
                                flex-direction: column;
                                gap: 15px;
                                margin-top: 10px;
                                .route-1{
                                    display: flex;
                                    align-items: center;
                                    gap: 10px;
                                    i{
                                        font-size: x-large;
                                        padding: 5px;
                                        border: 1px solid var(--iconColor);
                                        border-radius: 10px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .sec2{
                width: 400px;
                border: solid 1px transparent;
                border-radius: 20px;
                padding: 8px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                
                .I3{
                    position: relative;
                    background: url(map.png) fixed ;
                    height: 220px;
                    border-radius: 15px;
                    overflow: hidden;
                    border: 1px solid transparent;
                    flex-shrink: 0;
                    background-color: var(--iconColor);
                    i{
                        position: absolute;
                        right: 5px;
                        padding: 5px;
                        border-radius: 50%;
                        font-size: 20px;
                        border: solid 1px var(--iconColor);
                        margin-top: 3px;
                        color: var(--iconColor);
                    }
                }
                .I4{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    border: solid 1px var(--iconColor);
                    border-radius: 20px;
                    padding: 10px;
                    background-color: var(--iconColor);
                    .profile{
                        display: flex;
                        align-items: center;
                        gap: 10px;
                        .box-image{
                            width: 50px;
                            height: 50px;
                            border-radius: 15px;
                            overflow: hidden;
                            border: 1px solid transparent;
                            flex-shrink: 0;
                            img{
                                width: 100%;
                                
                            }
                        }
                    }
                    .comm{
                        display: flex;
                        align-items: center;
                        
                        gap: 5px;
                        i{
                            padding: 5px;
                            border: solid 1px var(--iconColor);
                            border-radius: 50%;
                            font-size: x-large;
                            
                        }
                    }
                }
            }
        }
.contanier .main .footer{
    
    .foot-1{
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .recent{
            display: flex;
            gap: 15px;
            align-items: center;
            .links{
                display: flex;
                justify-content: space-between;
                gap: 5px;
                align-items: center;
                    a{
                        padding: 8px;
                        padding-left: 10px;
                        padding-right:10px ;
                    }
                    a:focus{
                        border: solid 1px;
                        border-radius: 20px;
                    }
            }
        }
        .customize{
            display: flex;
            align-items: center;
            gap: 20px;
            .customize-1{
                display: flex;
                align-items: center;
                gap: 5px;
                i{
                    font-size: x-large;
                }
            }
            .count{
                display: flex;
                align-items: center;
                gap: 5px;
                i{
                    font-size: x-large;
                }
            }
        }
    }
    .foot-2{
        display: flex;
        align-items: center;
        justify-content: center;
        overflow-x:auto;
        table{
            width:100% ;
            padding-top: 10px;
            padding-bottom: 10px;
            display: table;
            border-spacing: 30px;
            text-align: center;
            border-collapse: collapse;
            
            tr{
                    padding: 15px 0 15px 0;
                    .cl{
                        text-align: right;
                    }
            }
            .first{
                    
                background-color: var(--iconColor);
                td{
                    padding: 10px 0 10px 0;
                    
                    border-radius: 50px;
                }
                
            }
            .dv{
                color: rgb(17, 212, 17);
                background-color: rgb(76, 102, 25);
                border-radius: 15px;
                padding: 5px 0 5px 0;
            }
            
        }
    }
}