@import "./reset.css";

/* components */
@import "./component/durg_info.css";

body{
    display: flex;
    justify-content: center;
    align-items: center;

    height: 100vh;
}
#content{
    background-color: rgb(245, 245, 245);
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
    
    width: 500px;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
}

#main_header{
    width: 100%;
    height: 80px;

    display: flex;
    justify-content: center;
    align-items: end;

    padding-left: 22px;
    padding-right: 22px;

    margin-bottom: 10px;
}

#main_header div{
    width: 50%; 
    height: 50%;
}

#main_header div:first-child{
    display: flex;

    justify-content: start;
    align-items: center;
}
#main_header div:last-child{
    display: flex;

    justify-content: end;
    align-items: center;
}

#main_header div:last-child img{
    width: 30px;
    margin-right: 10px;
}

#main_header img{
    width: 50px;
    opacity: 0.3;
}

#main_header div:first-child a{
    margin-top: 10px;

    font-size: 22px;
    font-weight: bold;

    opacity: 0.4;
}

#main_header div:last-child a{
    margin-top: 15px;

    font-size: 22px;
    font-weight: bold;

    opacity: 1;
}

#Drug_status{
    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.2);

    width: 90%;
    height: 310px;

    border-radius: 20px;

    padding-top: 10px;
    padding-bottom: 10px;

    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
}

.Drug_status__list{    
    height: 210px;
    width: 100%;

    overflow: auto;
    -ms-overflow-style: none;  /* IE, Edge */
    scrollbar-width: none;     /* Firefox */
}

.Drug_status__list__line{
    margin-top: 10px;
    margin-left: 40px;
    margin-right: 40px;

    background-color: black;

    height: 2px;
    width: 100 - 80px;

    opacity: 0.1;
}

#Drug_status::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

.Drug_status__list__btn{
    width: 100%;
    height: 30%;

    display: flex;
    justify-content: center;
    align-items: center;

    font-size: 16px;
    font-weight: bold;
    opacity: 0.4;

    padding-bottom: 10px;
}

.goal{
    margin-top: 30px;
    border: 2px solid yellow;

    height: 120px;
    width: 90%;

    padding-top: 10px;
    padding-bottom: 10px;

    background-color: white;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
    border-radius: 20px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;
}

.goal__textbox{
    font-size: 16px;
    font-weight: bold;

    width: 80%;

    display: flex;
    justify-content: start;
    margin-bottom: 10px;
}

.goal div:last-child{
    width: 80%;
    height: 30px;

    background-color: rgb(0, 170, 255);
    opacity: 0.4;

    border: 1px solid rgba(0, 0, 0, 0.1);
}