.error-area {
    height: 75vh;
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.d-table {
    width: 100%;
    height: 100%;
}

.d-table {
    display: table !important;
}

.d-table-cell {
    vertical-align: middle;
}

.d-table-cell {
    display: table-cell !important;
}


.error-area .error-content h2 {
    font-size: 25px;
    margin-bottom: 8px;
    color: #081828;
}

.error-area .error-content p {
    font-weight: 500;
    margin-bottom: 40px;
}


.nav-item.active {
    flex-grow: 3;
    border-radius: 30px;
    background: #eee;
    justify-content: flex-start;
}

    .nav-item.active > .nav-text {
        display: inline-block;
    }

    .nav-item.active > .material-icons.home-icon {
        color: #5a35b5;
    }

.material-icons.home-icon ~ .nav-text {
    color: #5a35b5;
}

.nav-item.active > .material-icons.favorite-icon {
    color: #c9329a;
}

.material-icons.favorite-icon ~ .nav-text {
    color: #c9329a;
}

.nav-item.active > .material-icons.search-icon {
    color: #e5a023;
}

.material-icons.search-icon ~ .nav-text {
    color: #e5a023;
}

.nav-item.active > .material-icons.person-icon {
    color: #0091a9;
}

.material-icons.person-icon ~ .nav-text {
    color: #0091a9;
}



.checkmark {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px #20BF55;
    animation: checkfill 0.4s ease-in-out 0.4s forwards, checkscale 0.3s ease-in-out 0.9s both;
}

.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #20BF55;
    fill: none;
    animation: checkstroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: checkstroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes checkstroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes checkscale {
    0%, 100% {
        transform: none;
    }

    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes checkfill {
    100% {
        box-shadow: inset 0px 0px 0px 30px #20BF55;
    }
}