body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

body {
    background: #fff;
}

.input-field input[type=date]:focus+label,
.input-field input[type=text]:focus+label,
.input-field input[type=email]:focus+label,
.input-field input[type=password]:focus+label {
    color: #e91e63;
}

.input-field input[type=date]:focus,
.input-field input[type=text]:focus,
.input-field input[type=email]:focus,
.input-field input[type=password]:focus {
    border-bottom: 2px solid #e91e63;
    box-shadow: none;
}

span.field-icon {
    float: right;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    z-index: 2;
}

.container {
    animation: showUp 0.5s cubic-bezier(0.18, 1.3, 1, 1) forwards;
}
.container-auth{
    animation: showUp 0.5s cubic-bezier(0.18, 1.3, 1, 1) forwards;
}

@keyframes showUp {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

.login-container {
    align-content: center;
    margin: 0 auto;
    max-width: 500px;
    width: 100%
}

.dropdown-content {
    top: 65px !important;
}

.sidenav {
    padding-top: 18px;
    min-height: 500px;
    overflow-y: auto;
}

.logo {
    position: absolute;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%)
}

.posts {
    padding: 0 0 5px 0 !important;
}

.row {
    padding-top: 30px
}

.search-field {
    width: 50% !important;
}

.input-field input[type=search]+.search-icon {
    left: unset !important;
    right: 1rem !important;
    cursor: pointer;
}

nav .input-field .search-icon,
.input-field>.search-icon {
    right: 0 !important;
}

.input-field input[type=search]~.close-icon {
    right: unset !important;
    left: 1rem !important;
}

.dropdown-content li>a,
.dropdown-content li>span {
    color: blue;
}


.sidenav {
    top: 65px !important;
}

.logo {
    bottom: 130px;
}

.container {
    width: 90%;

}
.container-auth {
    width: 90%;

}

.search-field {
    width: 70% !important;
}

.event-today {
    display: block;
    position: fixed;
    top: 480px;
    max-width: 475px;
    margin-right: 18px
}

.modal {
    max-height: 100%;
    overflow: hidden;
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 0;
    margin: 0;
}

#profileimage {
    height: 50px;
    width: 50px;
    margin-top: 7px;
}

#logo {
    height: 100px;
    width: 100px;
    margin-top: 7px;
}

ul {
    list-style-type: none;
}

.input-field.input-outlined {
    >input {
        border: 2px solid #eee;
        padding: 12px 16px 14px;
        width: calc(100% - 2.5rem);
        float: none;
        display: block;
        border-radius: 4px;
        transition: box-shadow, border-color 0.15s;

        &:focus:not([readonly]) {
            border-color: blue;
            box-shadow: 0 1px 0 0px blue;
        }
    }

    >label {
        left: 27px;
        display: inline-flex;
        width: auto !important;

        &.active {
            background: white;
            border-left: 4px solid white;
            border-right: 4px solid white;
            transform: translateY(-1.75rem);
            top: 1rem;
        }
    }
}

.tabs .indicator {
    background-color: blue;
}

.tabs .tab afocus,
.tabs .tab a:focus.active {
    background: transparent;
}