@import url("https://fonts.googleapis.com/css?family=Cairo&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap");

:root {
    --font: normal 14px 'Manrope', sans-serif;
}

body {
    font-family: var(--font) !important;
}

.trax-login-gradient {
    background: rgb(6, 180, 240);
    background: -moz-linear-gradient(160deg, rgba(6, 180, 240, 1) 0%, rgba(15, 17, 49, 1) 100%);
    background: -webkit-linear-gradient(160deg, rgba(6, 180, 240, 1) 0%, rgba(15, 17, 49, 1) 100%);
    background: linear-gradient(160deg, rgba(6, 180, 240, 1) 0%, rgba(15, 17, 49, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#06b4f0", endColorstr="#0f1131", GradientType=1);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    height: 100vh;
    border-radius: 0;
}

.red-text {
    color: red;
}

.c_threeAuto {
    display: grid;
    grid-gap: 5px;
    grid-template-columns:    calc(50px * 2)  auto
}

#snackbar {
    position: fixed;
    visibility: hidden;
    display: flex;
    align-items: center;
    min-width: 250px;
    color: white;
    text-align: center;
    border-radius: 100px;
    padding: 16px;
    z-index: 3;
    top: 50px;
    font-size: 16px;
    transition: opacity 0.5s, bottom 0.5s ease-in-out;
    opacity: 0;
}

#snackbar.show {
    visibility: visible;
    top: 90px;
    opacity: 1;
}