@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200&family=Poppins:wght@300&family=Righteous&display=swap');


html {
    padding: 0;
    margin: 0;
    box-sizing: 0; 
}
li {
    padding: 0;
    margin: 0;
    list-style: none;
}
.banner{
    display: flex;
    align-items: center;
    justify-content: center; 
    height: 24rem;
    margin: auto;
    background-color: #ffffff;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 10px 10px -10px;
    user-select: none;
}
.banner__image {
    
    width: 40rem;
    height: 40rem;
}
.banner__title {
    
    font-family: 'Righteous', cursive;
    color: #191919;
    font-size: 6rem;   
}
.banner__logo {
    align-self: end;
    width: 10rem;
}
.menu__buttons {
    display: flex;
    justify-content: flex-start;
    margin: 2rem 0 0 3rem; 
}
.menu__buttons__mobile{
    display: none;
}
.menu__buttons--add {
    margin: 1rem;
    padding: 1rem;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    border-radius: 10px;
    display: block;
    border: 0px;
    font-size: 1.1rem;
    font-weight: 700;
    box-shadow: 0px 0px 14px -7px #f09819;
    background-image: linear-gradient(45deg, #348f00 0%, #a9e225  51%, #50d105  100%);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}
.menu__buttons--add:hover {
    background-position: right center;
    color: #fff;
    text-decoration: none;
}
.menu__buttons--add:active {
    transform: scale(0.95);
}
.menu__buttons--edit {
    margin: 1rem;
    padding: 1rem 1.5rem;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    border-radius: 10px;
    display: block;
    border: 0px;
    font-size: 1.1rem;
    font-weight: 700;
    box-shadow: 0px 0px 14px -7px #f09819;
    background-image: linear-gradient(45deg, #ffae00 0%, #ffbd2e  51%, #df8703  100%);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}
.menu__buttons--edit:hover {
    background-position: right center;
    color: #fff;
    text-decoration: none;
}
.menu__buttons--edit:active {
    transform: scale(0.95);
}
.menu__searchbar {
    width: 30rem;
    margin: 1rem;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: rgb(43, 43, 43);
    display: block;
    font-weight: 700;
    border: 0 none;
    border-bottom: 2px solid #22a6b3;
    cursor: pointer;
}
.menu__searchbar__mobile{
    display: none;
}
#buttons__mobile--arrowback{
    position: fixed;
    bottom: 20%;
    right: 0%;
    transform: translateX(-50%);
    font-size: 10rem;
    color: #22a6b3;
    background-color: white;
    box-shadow: rgba(100, 100, 100, 1) 0px 1px 4px;
    border-radius: 100%;  
}
.menu__searchbar:hover {
    border-bottom: 2px solid #60ced8;
}
.menu__searchbar:focus {
    outline: none;
    border: none;
    border-bottom: 2px solid #22a6b3;
}
.menu__searchbar::placeholder{
    color:rgb(0, 35, 68);
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
} 
#buttons__mobile--arrowback{
    display: none;
}
#buttons--search{
    margin:0 0 0.8vw 0;
    font-size: 2.5rem;
    color: #22a6b3;
    align-self: flex-end;
    justify-self: flex-end;
    cursor: pointer;
    user-select: none; 
}
#buttons--search:hover{
    color: #27cbda;
}
.modal--blur {
    z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
}
.modal__add {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 20% 50% 30%;  
    align-items: center;
    justify-items: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 74rem;
    height: 40rem;
    border-radius: 25px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
    background-color: #ffffff; 
}
.modal__add__picture__default {
    grid-column: 1;
    grid-row: 2;
    width: 22rem;
    height: 22rem;
    margin: 0 0 6rem 0;
    border-radius: 100%;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; 
}
.modal__add__subtitle{
    grid-column: 1;
    grid-row: 2;
    margin: 20rem 0 0 0;
    font-family: 'Poppins', sans-serif;
    color: #424242;
    font-size: 1.2rem;
}
.modal__add__subtitle__mobile{
    display: none;
}
.modal__add__picture__input{
    grid-column: 1;
    grid-row: 3;
    width: 16rem;
    height: 1rem;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    border-width: 1px;
    border-color: #5a5a5a;
    background-color: #ffffff;
    color: #000000;
    border-style: solid;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; 
}
.modal__add__picture__button{
    display: none;
}
.modal__add__title{
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    font-family: 'Roboto', sans-serif;
    color: #ff8b03;
    font-size: 2.5rem;
}
.modal__add__form{
    grid-column: 2;
    grid-row: 2;  
}
.modal__input{   
    width: 20rem;
    margin-top: 1rem;
    padding: 0.6rem;
    font-size: 1rem;
    border-width: 1px;
    background-color: #ffffff;
    border-style: solid;
    border-radius: 10px;
    box-shadow: 0px 0px 4px rgba(66,66,66,.75);
    text-shadow: -50px 0px 0px rgba(66,66,66,.0);
    outline:none;
}
.add-name {
    text-transform: capitalize;
}

.modal__add__button--save {
    grid-column: 2;
    grid-row: 3;
    justify-self: center;
    padding: 0.6rem;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    border-radius: 10px;
    display: block;
    border: 0px;
    font-size: 1.1rem;
    font-weight: 700;
    box-shadow: 0px 0px 14px -7px #f09819;
    background-image: linear-gradient(45deg, #ffae00 0%, #ffbd2e  51%, #df8703  100%);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}
.modal__add__button--save:hover{
    background-position: right center;
    color: #fff;
    text-decoration: none;
}
.modal__add__button--update {
    grid-column: 2;
    grid-row: 3;
    justify-self: center;
    padding: 0.6rem;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    border-radius: 10px;
    display: block;
    border: 0px;
    font-size: 1.1rem;
    font-weight: 700;
    box-shadow: 0px 0px 14px -7px #f09819;
    background-image: linear-gradient(45deg, #ffae00 0%, #ffbd2e  51%, #df8703  100%);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    display: none;
}
.modal__add__button--update:hover{
    background-position: right center;
    color: #fff;
    text-decoration: none;
}
.modal__button__close {
    position: absolute;
    top: 2%;
    right: 2%;
    font-size: 3rem;
    color: orange;
    cursor: pointer;
    user-select: none;
}
.modal__button__close:hover {
    color: #ff8b03;
    font-size: 3.1rem;
}
.main {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; 
    max-width: 84rem;
    gap: 2rem;
    margin: 2rem auto;
}
.main__content{
    display: flex;
    width: 36rem;
    height: 10rem;
    padding: 2rem;
    border-radius: 20px;
    background-color: #fff;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;  
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem; 
    color: #181818;     
}
table{
width: 40rem;
}
.main__picture__studant {
    width: 10rem;
    height: 10rem;
    margin: auto;
    border: 2px solid #ffffff;
    border-radius: 100%;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}
.main__button--delete {
    display: block;
    position: relative;
    font-size: 2rem;
    width: 1rem;
    height: 1rem;
    bottom: 1.5rem;
    left: 0.5rem;
    padding: 0;
    color: rgb(223, 73, 3);;
    cursor: pointer;
    user-select: none;
    display: none;
}
.popup__notfound{
    position: fixed;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28rem;
    height: 5rem;
    background-color: white;
    box-shadow: rgba(100, 100, 100, 1) 0px 1px 4px;
    border-radius: 10rem;
    display: none;
}
.popup__notfound h1{
    font-family: 'Poppins', sans-serif;
    font-size: 1.8rem;
}
#popup__notfound__icon{
    font-size: 4rem;
    color: #ff804e;
}
.popup__delete{
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 25rem;
    height: 30rem;
    transform: translate(-50%, -50%);
    justify-content: center;
    align-items: center;
    padding: 2rem;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;  
    font-family: 'Poppins', sans-serif;
    color: #3b3b3b;
    display: none;
}
#popup__delete__icon {
    font-size: 12rem;
    color: #f35353;
    grid-column: span 2;
    grid-row: span 1;
    margin: auto;
    user-select: none;
}
.popup__delete__message {
    text-align: left;
    grid-column: span 2;
    grid-row-start: 2;
    padding: 1.5rem 0 0 0;
}
.popup__delete__button__cancel{
    grid-column: 1;
    grid-row: 3;
    width: 7.5rem;
    height: 2.5rem;
    justify-self: flex-end;
    margin: 2rem 1.5rem 0 0;
    padding: auto;
    background:#888888;
    border-radius: 0.5rem;
    color:#ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 1.3rem;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    border: 0;    
    cursor: pointer;
}
.popup__delete__button__continue{
    grid-column: 2;
    grid-row: 3;
    width: 7.5rem;
    height: 2.5rem;
    margin: 2rem 0 0 1.5rem;
    padding: auto;
    background:#f35353;
    border-radius: 0.5rem;
    color:#ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 1.3rem;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    border: 0;    
    cursor: pointer;
}
.popup__edit{
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 18rem;
    height: 4rem;
    border-radius: 30px;
    background-color: #ffffff;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; 
    display: none;
}
.popup__edit__button__cancel{
    width: 6em;
    height: 2.5rem;
    padding: auto;
    margin: auto 1rem;
    background:#888888;
    border-radius: 7px;
    color:#ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    border: 0;    
    cursor: pointer;
}
.popup__edit__button__save{
    width: 6em;
    height: 2.5rem;
    padding: auto;
    margin: auto 1rem;
    background-image: linear-gradient(45deg, #348f00 0%, #50d105  100%);
    border-radius: 7px;
    color:#ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    border: 0;    
    cursor: pointer;
}
.bar__mobile{
    display: none;
}
.shake {
    animation: shake 0.4s;
  }
  
  @keyframes shake {
    0%, 100% {
      transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
      transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
      transform: translateX(5px);
    }
  }
@media screen and (max-width: 1536px) {
    .banner{
        height: 20rem;
    }
    .banner__title {
        font-size: 5rem;       
    }
    .banner__image {
        width: 32rem;
        height: 32rem;
    }
    .banner__logo {
        width: 8rem;
    }
    .menu__buttons {
        padding: 1rem;
        margin: 1rem 0 0 3rem; 
    }
    .menu__searchbar {
        width: 24rem;
    }
    .main {
        max-width: 72rem;
    }
    .main__content{
        width: 30rem;  
    }
    .main__picture__studant {
        width: 8rem;
        height: 8rem;
    }
    .modal__add {
        width: 60rem;
        height: 42rem;
    }
    .modal__add__picture__default {
        width: 20rem;
        height: 20rem;
        margin: 0 0 6rem 0;
    }
    .modal__add__subtitle{
        margin: 16rem 0 0 0;
        font-size: 1.2rem;
    }
    .modal__add__title{
        font-size: 2rem;
    }
    .modal__input{   
        width: 20rem;
        margin-top: 1rem;
        padding: 0.6rem;
        font-size: 1rem;
    }
    .modal__add__button--save {
        margin-left: 8rem;
        padding: 0.5rem;
        font-size: 1rem;
    }
    .modal__add__button--update {
        margin-left: 8rem;
        padding: 0.5rem;
        font-size: 1rem;
        display: none;
    }
    .popup__edit{    
        width: 16rem;
        height: 3rem;
        padding: 0.5rem;
    }
    .popup__edit__button__cancel{
        padding: auto;
        width: 7rem;
        height: 2.5rem;      
        font-size: 1.1rem;
    }
    .popup__edit__button__save{
        padding: auto;
        width: 7rem;
        height: 2.5rem;
        font-size: 1.1rem;
    }
}
@media screen and (max-width: 1280px) {
    .banner{
        height: 18rem;
    }
    .banner__title {
        font-size: 3rem;       
    }
    .banner__image {
        width: 28rem;
        height: 28rem;
    }
    .menu__buttons {
        margin: 0 0 0 3rem; 
    }
    .menu__buttons--add {
        margin: 1rem;
        padding: 1rem 1.5rem;
        font-size: 1rem;
    }
    .menu__buttons--edit {
        margin: 1rem;
        padding: 1rem 1.5rem;
        font-size: 1rem;
    }
    .menu__searchbar {
        width: 20rem;
    }
    #buttons--search{
        margin:0 0 0.8rem 0;
        font-size: 4vw;
    }
    .main {
        max-width: 40rem;
    }
    .main__content{
        width: 36rem;  
    }
    .main__picture__studant {
        width: 8rem;
        height: 8rem;
    }
    .modal__add {
        width: 52rem;
        height: 40rem;
    }
    .modal__add__picture__default {
        width: 18rem;
        height: 18rem;
    }
    .modal__add__title{
        font-size: 2rem;
    }
    .modal__input{   
        width: 18rem;
    }   
}
@media screen and (max-width: 1024px) {
    .banner{
        height: 16rem;
    }
    .banner__title {
        font-size: 2.5rem;       
    }
    .banner__image {
        width: 24rem;
        height: 24rem;
    }
    .banner__logo {
        width: 6rem;
    }
    .menu__buttons {
        margin: 0 0 0 1rem; 
    }
    .menu__buttons--add {
        margin: 0.5rem;
        padding: 0.7rem;
        font-size: 1rem;
    }
    .menu__buttons--edit {
        margin: 0.5rem;
        padding: 0.7rem;
        font-size: 1rem;
    }
    .modal__add {
        width: 42rem;
        height: 40rem;
    }
    .modal__add__picture__default {
        width: 14rem;
        height: 14rem;
    }
    .modal__add__title{
        font-size: 1.7rem;
    }
    .modal__add__picture__input{
        width: 14rem;
        height: 1rem;
        margin-bottom: 1rem;
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }
    .modal__input{   
        width: 16rem;
        margin-top: 1rem;
        padding: 0.5rem;
        font-size: 1rem;
    }
    .modal__add__button--save {
        margin-left: 8rem;
        padding: 0.5rem;
        font-size: 1rem;
    }
    .modal__add__button--update {
        margin-left: 8rem;
        padding: 0.5rem;
        font-size: 1rem;
        display: none;
    }
}
@media screen and (max-width: 768px) {
    .banner{
        height: 16rem;
    }
    .banner__title {
        font-size: 2rem;       
    }
    .banner__image {
        width: 20rem;
        height: 20rem;
    }
    .banner__logo {
        width: 5rem;
    }
    .menu__buttons {
        margin: 1rem 0 0 1rem; 
    }
    .main {
        max-width: 32rem;
    }
    .main__content{
        width: 30rem;  
    }
    .main__picture__studant {
        width: 8rem;
        height: 8rem;
    }
    .modal__add {
        width: 36rem;
        height: 36rem;
    }
    .modal__add__picture__default {
        width: 12rem;
        height: 12rem;
    }
    .modal__add__subtitle{
        margin: 12rem 0 0 0;
        font-size: 1rem;
    }
    .modal__add__title{
        margin-top: 5rem;
        font-size: 1.6rem;
    }
    .modal__add__picture__input{
        width: 12rem;
        height: 1.2rem;
        margin-bottom: 1rem;
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }
    .modal__input{   
        width: 14rem;
        margin-top: 1rem;
        padding: 0.5rem;
        font-size: 1rem;
    }
    .modal__add__button--save {
        margin-left: 8rem;
        padding: 0.5rem;
        font-size: 1rem;
    }
    .modal__add__button--update {
        margin-left: 8rem;
        padding: 0.5rem;
        font-size: 1rem;
        display: none;
    }
    .modal__button__close {
        top: 0%;
        right: 2%;
        font-size: 2.5rem;
    }
    .popup__notfound{
        bottom: 10%;
        left: 50%;
        width: 20rem;
        height: 4rem;
    }
    .popup__notfound h1{
        font-family: 'Poppins', sans-serif;
        font-size: 1.1rem;
    }
    .popup__edit{    
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        position: fixed;
        bottom: 2%;
        left: 50%;
        transform: translateX(-50%);
        width: 20rem;
        height: 3rem;
        padding: 0.5rem;
        background-color: #fff;
        box-shadow: rgba(100, 100, 100, 1) 0px 1px 4px;
        border-radius: 10vw;
        font-size: 1rem;
        display: none;
        user-select: none;
    }
    .popup__edit__button__cancel{
        padding: 0.5rem;
        width: 7rem;
        height: 2.5rem;
        text-align: center;
        text-transform: uppercase;
        transition: 0.5s;
        background-size: 200% auto;
        color: white;
        border-radius: 10px;
        display: block;
        border: 0px;
        font-size: 1.1rem;
        font-weight: 700;
        box-shadow: 0px 0px 14px -7px #f09819;
        background-image: linear-gradient(45deg, #6b6a6a 0%, #414141  51%, #2c2c2c  100%);
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
    }
    .popup__edit__button__save{
        padding: 0.5rem;
        width: 7rem;
        height: 2.5rem;
        text-align: center;
        text-transform: uppercase;
        transition: 0.5s;
        background-size: 200% auto;
        color: white;
        border-radius: 10px;
        display: block;
        border: 0px;
        font-size: 1.1rem;
        font-weight: 700;
        box-shadow: 0px 0px 14px -7px #f09819;
        background-image: linear-gradient(45deg, #348f00 0%, #a9e225  51%, #50d105  100%);
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
    }
    
}
@media screen and (max-width: 640px) {
    .banner{
        width: 22rem;
        height: 10rem;
        justify-items: center;
        align-items: center;
        margin: auto;
        border-radius: 20px;
        box-shadow: rgba(100, 100, 100, 1) 0px 1px 4px;
    }
    .banner__image {
        width: 10rem;
        height: 10rem;
    }
    .banner__title {
        font-family: 'Righteous', cursive;
        color: #191919;
        font-size: 1.7rem;   
    }
    .banner__logo {
        display: none;
    }
    .menu__buttons{
        display: none;
    }
    .menu__buttons--add {
        display: none;
    }
    .menu__buttons--edit {
        display: none;
    }
    .menu__buttons__mobile{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 12rem;
        background-color: #fff;
        display: none;
    }
    .menu__searchbar__mobile{
        position: fixed;
        top: 2%;
        right: 50%;
        transform: translateX(50%);
        width: 22rem;
        height: 3rem;
        margin: auto;
        text-align: center;
        text-transform: uppercase;
        transition: 0.5s;
        background-size: 200% auto;
        color: rgb(43, 43, 43);
        background-color: white;
        display: block;
        font-weight: 700;
        border: 0;
        border-radius: 10px;
        box-shadow: rgba(100, 100, 100, 1) 0px 1px 4px;
        cursor: pointer;
    }
    .menu__searchbar__mobile:focus{
        outline: 0;
    }
    #buttons__mobile--arrowback{
        position: fixed;
        top: 2.5%;
        left: 3%;
        transform: translateX(50%);
        font-size: 2.5rem;
        color: orange;
        width: 2.5rem;
        height: 2.5rem;
        background-color: white;
        box-shadow: rgba(100, 100, 100, 1) 0px 1px 4px;
        border-radius: 100%;   
    }
    #buttons--search{
        display: none;
    }
    .main{
        width: 22rem;
        height: 30rem;
        margin: 1rem auto;
        padding: 1rem;
        overflow-x: hidden;
    }
    .main__content{
        display: grid;
        grid-template-columns: 14rem 6rem;
        grid-template-rows: 1;
        max-width: 26rem;
        height: 12rem;
        padding: 1rem;
        font-size: 1.1rem;
    }
    table{
        grid-column: 1;
        grid-row: 1;
        width:auto;
    }
    .main__picture__studant {  
        grid-column: 2;
        grid-row: 1;
        width: 6rem;
        height: 6rem;
        box-shadow: rgba(100, 100, 100, 1) 0px 1px 4px;
    }
    .main__button--delete {
        grid-column: 2;
        grid-row: 1;
        bottom: 1rem;
        left: 4.5rem;
        width: 1rem; 
        height: 1rem; 
        display: none; 
    }
    .modal__add {
        grid-template-columns: 1fr;
        grid-template-rows: 30% 70%;
        justify-content: center;
        align-items: start;
        width: 22rem;
        height: 40rem;
        top: 50%    
    }
    .modal__add__picture__default {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
        width: 10rem;
        height: 10rem;
        margin: 5rem 0 0 1rem;
    }
    .modal__add__subtitle{
        display: none;
    }
    .modal__add__subtitle__mobile{
        grid-column: 1;
        grid-row: 1;
        justify-self: end;
        align-self: center;
        margin: 12rem 1rem 0 0;
        font-size: 1rem;
        font-family: 'Poppins', sans-serif;
        user-select: none;
        display: block;
    }
    .modal__add__picture__input{
        display: none;
    }
    .modal__add__picture__button{
        grid-column: 1;
        grid-row: 1;
        justify-self: end;
        align-self: end;
        margin: 0 3rem 2rem 0;
        padding: 0.5rem 1rem;
        text-align: center;
        text-transform: uppercase;
        transition: 0.5s;
        background-size: 200% auto;
        color: white;
        border-radius: 10px;
        display: block;
        border: 0px;
        font-size: 1.1rem;
        font-weight: 700;
        box-shadow: 0px 0px 14px -7px #ffffff;
        background-image: linear-gradient(45deg, #acacac 0%, #969696  51%, #50d105  100%);
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
        display: block;
    }
    .modal__add__title{
        grid-column: 1;
        grid-row: 1;
        justify-self: center;
        margin-top: 1.5rem;
        font-size: 1.6rem;
        user-select: none;
    }
    .modal__add__form{
        grid-column: 1;
        grid-row: 2; 
        margin-top: 5rem;  
    }
    .modal__input{   
        grid-column: 1;
        grid-row: 2;
        width: 18rem;
        margin: 1rem 0 0 1.5rem;
        padding: 0.5rem;
        font-size: 1rem;
        
    }
    .modal__add__button--save {
        grid-column: 1;
        grid-row: 2;
        justify-self: end;
        align-self: end;
        margin: 0 1.5rem 2rem 0;
        padding: 0.5rem;
        font-size: 1rem;
    }
    .modal__add__button--update {
        grid-column: 1;
        grid-row: 2;
        justify-self: end;
        align-self: end;
        margin: 0 1.5rem 2rem 0;
        padding: 0.5rem;
        font-size: 1rem;
        display: none;
    }
    .modal__button__close {
        grid-column: 1;
        grid-row: 1;
        top: 0%;
        right: 3%;
        font-size: 2.5rem;
    }
    .bar__mobile{
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: fixed;
        bottom: 2%;
        left: 50%;
        transform: translateX(-50%);
        width: 20rem;
        height: 3rem;
        padding: 0.5rem;
        background-color: #fff;
        box-shadow: rgba(100, 100, 100, 1) 0px 1px 4px;
        border-radius: 10vw;
        font-size: 1rem;
    }
    #bar__mobile__button__add {
        font-size: 2rem;
    }
    #bar__mobile__button__edit {  
        font-size: 2rem;
    }
    #bar__mobile__button__search {
        color: orange;
        font-size: 2rem;
    }
    .material-icons{
        user-select: none;
        font-size: 2rem;
    }
    .popup__edit{    
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        position: fixed;
        bottom: 2%;
        left: 50%;
        transform: translateX(-50%);
        width: 20rem;
        height: 3rem;
        padding: 0.5rem;
        background-color: #fff;
        box-shadow: rgba(100, 100, 100, 1) 0px 1px 4px;
        border-radius: 10vw;
        font-size: 1rem;
        display: none;
        user-select: none;
    }
    .popup__edit__button__cancel{
        padding: 0.5rem;
        width: 7rem;
        height: 2.5rem;
        text-align: center;
        text-transform: uppercase;
        transition: 0.5s;
        background-size: 200% auto;
        color: white;
        border-radius: 10px;
        display: block;
        border: 0px;
        font-size: 1.1rem;
        font-weight: 700;
        box-shadow: 0px 0px 14px -7px #f09819;
        background-image: linear-gradient(45deg, #6b6a6a 0%, #414141  51%, #2c2c2c  100%);
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
    }
    .popup__edit__button__save{
        padding: 0.5rem;
        width: 7rem;
        height: 2.5rem;
        text-align: center;
        text-transform: uppercase;
        transition: 0.5s;
        background-size: 200% auto;
        color: white;
        border-radius: 10px;
        display: block;
        border: 0px;
        font-size: 1.1rem;
        font-weight: 700;
        box-shadow: 0px 0px 14px -7px #f09819;
        background-image: linear-gradient(45deg, #348f00 0%, #a9e225  51%, #50d105  100%);
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
    }
    .popup__notfound{
        top: 50%;
        bottom: 0;
        left: 50%;
        width: 20rem;
        height: 4rem;
    }
    .popup__notfound h1{
        font-family: 'Poppins', sans-serif;
        font-size: 1.1rem;
    }
    #popup__notfound__icon{
        font-size: 4rem;
        color: #ff804e;
    }
    .popup__delete{   
        width: 18rem;
        height: 26rem;   
        padding: 2rem;
    }
    #popup__delete__icon {
        font-size: 10rem;
    }
}