:root {
    --non-expired-color: rgb(97, 218, 157);
    --expired-color:orangered;
}

* {
    margin: 0;
    padding: 0;
}

html, body {
  overflow-x: hidden;
  overflow-y: hidden;
}

body {
  height: 100vh;
  position: relative;
}

#body {
    transition: background ease .5s;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: var(--non-expired-color);
}

input {
    display: none;
}

label.icons {
    transition: transform ease .5s, color ease .5s;
    font-size: 25px;
    position: absolute;
    z-index: 3;
    color: rgb(155, 143, 143);
    left: 50%;
    bottom: -10px;
    transform: translate(-50%, 0%);
}

div.context_panel {
    background: white;
    border: 1px solid black;
    border-radius: 30%;
    position: absolute;
    width: 50px;
    height: 50px;
    z-index: 1;
    color: rgb(0, 0, 0);
}

div#add_drug_panel {
    left: 90%;
    bottom: 60px;
    transform: translate(-55%, 0%);
}

div#scan_drug_panel {
    left: 90%;
    bottom: 120px;
    transform: translate(-55%, 0%);
}

label.context_btn {
    position: absolute;
    font-size: 25px;
    color: rgb(0, 0, 0);
}

label#iconAddDrug {
    transform: translate(53%, 25%);
}

label#iconScanDrug {
    transform: translate(50%, 30%);
}

label#iconBuyDrug {
    transform: translate(48%, 31%);
}

label.non_expired {
    transform: translate(-90px, -10px);
}

label.expired {
    transform: translate(70px, -10px);
}

div#box {
    z-index: 1;
    width: 100%;
    height: 50px;
    background-color: white;
    box-shadow: 0px 1px 2px black;
    position: absolute;
    bottom:0%;
    left: 50%;
    transform: translate(-50%, 0%);
    border: 1px solid white;
    border-top: 1px solid rgba(0, 0, 0, 0.5);
}

div#content {
    z-index: 1;
    width: 100%;
    height: 100%;
    box-shadow: 0px 1px 2px black;
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%, 0%);
    border: 0px solid black;
}

span.title {
    transition: color .5s, transform .5s, opacity .5s;
    font-size: 13px;
    position: absolute;
    z-index: 2;
    color: rgb(155, 143, 143);
    left: 50%;
    bottom: 5px;
    transform: translate(-50%, -50%);
    opacity: 0;
    font-weight: bold;
}

span.non_expired {
    transform: translate(-90px, 0px);
    background: transparent;
    width: 150px;
    text-align:center;
}

span.expired {
    transform: translate(40px, 0px);
    background: transparent;
    width: 150px;
    text-align:center;
}

#one:checked ~ label.non_expired {

    transform: translate(-85px, -31px);
    color: var(--non-expired-color);
}

#two:checked ~ label.expired {
    transform: translate(71px, -33px);
    color: var(--expired-color);
}

#one:checked ~ span.non_expired {
    color: var(--non-expired-color);
    opacity: 1;
    transform: translate(-150px, 0px);
}

#two:checked ~ span.expired {
    color: var(--expired-color);
    opacity: 1;
    transform: translate(10px, 0px);
}

#one:checked ~ div#body {
    background-color: var(--non-expired-color);
}

#two:checked ~ div#body {
    background-color: var(--expired-color);
}

div.border {
    position: absolute;

    z-index: 2;
    bottom: -15px;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 6px solid var(--non-expired-color);
    width: 45px;
    height: 45px;
    background-color: white;
    transition: border .5s, transform .5s, border-radius .3s;
}

div.fst {
    transform: translate(-144px, -75px);
}

#one:checked ~ div.border {
    border: 6px solid var(--non-expired-color);
    transform: translate(-95px, -40px);
    border-radius: 0%;
}

#two:checked ~ div.border {
    border: 6px solid var(--expired-color);;
    transform: translate(58px, -40px);
    border-radius: 50%;
    width: 50px;
    height: 50px;
}

#one:checked ~ div.border {
    border: 6px solid var(--non-expired-color);
    transform: translate(-95px, -40px);
    border-radius: 0%;
}

div.effect {
    position: absolute;
    top: 95%;
    left: 50%;
    transform: translate(-50%, -50%);

}


span {
    cursor: pointer
}