@font-face{
    font-family: Poppin;
    font-display: auto;
    src: url(../fonts/Poppins/Poppins-Regular.ttf);
}
@font-face{
    font-family: Poppin;
    font-weight: bold;
    font-display: auto;
    src: url(../fonts/Poppins/Poppins-Bold.ttf);
}



body{
    font-family: Poppins, sans-serif;
}
.s-1{
    -webkit-box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.4);
    -moz-box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.4);
    box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.4);
}
.radius{
    border-radius: 8px;
}
.f-20{
    font-size: 20px;
}
.content{
    margin-top: 74px;
}
.hidden{
    display: none;
}
.non-visibility{
    visibility: hidden;
}


/* NAV */
.nav-logo{
    height: 48px;
}
#infoModalButton button{
    color: white;
    fill: white;
}
#infoModalButton button svg{
    margin-top: -2px;
}
#infoModalButton button:hover{
    color: black;
    background-color: white;
    fill: black;
}


/* FORM */
.form-floating > label, .form-floating > .form-control, .form-floating > .form-select{
    padding: 0.65rem 0.5rem;
    height: 47.8px;
}
.form-floating > .form-select{
    padding: 1.1rem .3rem 0 .3rem;
}
.qty-form{
    max-width: 10%;
    min-width: 70px !important;
}

.product-row{
    max-height: 63.8px !important;
}

.remove-product-row svg{
    margin: 8.9px !important;
}
.remove-product-row:hover {
    background-color:#dc3545 !important;
}
.remove-product-row:hover > svg{
    color: white;
}



@media (max-width: 399px){
    .navbar .container div{
        display: flex;
        justify-content: center;
        width: 100%;
    }
    #infoModalButton button{
        font-size: 12px;
    }
    .content{
        margin-top: 106px;
    }


    .remove-product-row svg{
        margin: 0 !important;
    }
    .qty-form{
        max-width: 68px;
    }
}