/*===> I have used CSS in a way that allows all elements and fonts to resize dynamically according to screen width. Responsiveness works seamlessly, even if you remove all media queries from style.css and profile.css <===*/

/*== sizes are calculated according to 1600px screen size as in adobe xd. ==*/
/*== For expample --font-14px is 88vw i.e 14px size at 1600px screen width ==*/


:root {
    /*=========== usable colors =========*/
    --white: #fff;
    --gray: #F6F7F8;
    --green: #01F0D0;
    --purple: #F4F0FE;
    --blue: #E0F3FA;
    --pink1: #FFE6E9;
    --pink2: #FFE6F1;
    --black-001: #072635;

    /*=========== Using clamp method variable for dynamic front. Font changes its size according to screen width =========*/
    --font-14px: clamp(4.5px, .88vw, 50px);
    --font-16px: clamp(4.5px, 1vw, 50px);
    --font-18px: clamp(5px, 1.13vw, 50px);
    --font-24px: clamp(5.5px, 1.5vw, 80px);
}


body {
    margin: 0;
    /* padding: 23px 17px 17px 17px; */
    padding: 1.12vw;
    background-color: var(--gray);
    font-family: Manrope;
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/*======= CSS for scrollbar ======*/
/*======= CSS for scrollbar ======*/

body::-webkit-scrollbar,
*::-webkit-scrollbar {
    width: .4vw;
}

body::-webkit-scrollbar-track *::-webkit-scrollbar-track {
    background-color: #E3E4E6;
    border-radius: .5vw;
}

body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
    background-color: var(--black-001);
    border-radius: .5vw;
}


/*======= CSS for components ======*/
/*======= CSS for components ======*/

#whole-flexer {
    display: flex;
    /* gap: 1.6vw; */
    justify-content: space-between;
    /* height: fit-content; */
    /* background-color: #f05901; */
}

#Patients-sidebar {
    width: 23.8%;
    height: 700px;
    margin-top: 2vw;
    /* background-color: #01F0D0; */
}

#right-whole-area {
    display: flex;
    /* background-color: hotpink; */
    width: 74.5%;
    gap: 1.6vw;
}

.col-flexer-container1 {
    display: flex;
    flex-direction: column;
    gap: 2vw;
    width: 67%;
    height: fit-content;
    margin-top: 2vw;
}

.col-flexer-container2 {
    width: 33%;
    display: flex;
    flex-direction: column;
    gap: 2vw;
    height: fit-content;
    margin-top: 1vw;
}

#diagnosis-history {
    width: 100%;
    height: fit-content;
    background-color: var(--white);
    border-radius: 1vw;
    /* padding: 20px; */
    padding: 1.25vw;
}

#diagnosis-list {
    width: 100%;
    padding: 1.5vw;
    background-color: var(--white);
    border-radius: 1vw;
}

#profile {
    padding: 2vw 1.25vw;
    height: fit-content;
    background-color: var(--white);
    border-radius: 1vw;
}

#lab-result {
    padding: 1.25vw 1.25vw;
    height: fit-content;
    background-color: var(--white);
    border-radius: 1vw;
}

@media(max-width:550px) {

    #whole-flexer {
        gap: 8px;

    }

    #Patients-sidebar {
        width: 35%;
    }

    #right-whole-area {
        display: flex;
        flex-direction: column;
        width: 74.5%;
        gap: 1.6vw;
    }

    .col-flexer-container1 {
        display: flex;
        flex-direction: column;
        gap: 2vw;
        width: 100%;
        height: fit-content;
        margin-top: 2vw;
    }

    .col-flexer-container2 {
        position: absolute;
        left: 0;
        top: 77vw;
        width: 100%;
        flex-direction: row;
        padding: 0 1.12vw;
    }


    #profile {
        width: 60%;
    }

    
#lab-result {
  width: 40%;
}

}