html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

.extra-col {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

/* Base (xs) */
.col-0-5, .col-1-5, .col-2-5, .col-3-5, .col-4-5, .col-5-5,
.col-6-5, .col-7-5, .col-8-5, .col-9-5, .col-10-5, .col-11-5 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

.col-0-5 {
    flex: 0 0 4.16666667%;
    max-width: 4.16666667%;
}

.col-1-5 {
    flex: 0 0 12.5%;
    max-width: 12.5%;
}

.col-2-5 {
    flex: 0 0 20.83333333%;
    max-width: 20.83333333%;
}

.col-3-5 {
    flex: 0 0 29.16666667%;
    max-width: 29.16666667%;
}

.col-4-5 {
    flex: 0 0 37.5%;
    max-width: 37.5%;
}

.col-5-5 {
    flex: 0 0 45.83333333%;
    max-width: 45.83333333%;
}

.col-6-5 {
    flex: 0 0 54.16666667%;
    max-width: 54.16666667%;
}

.col-7-5 {
    flex: 0 0 62.5%;
    max-width: 62.5%;
}

.col-8-5 {
    flex: 0 0 70.83333333%;
    max-width: 70.83333333%;
}

.col-9-5 {
    flex: 0 0 79.16666667%;
    max-width: 79.16666667%;
}

.col-10-5 {
    flex: 0 0 87.5%;
    max-width: 87.5%;
}

.col-11-5 {
    flex: 0 0 95.83333333%;
    max-width: 95.83333333%;
}

/* Responsive: sm */
@media (min-width: 576px) {
    .col-sm-0-5 {
        flex: 0 0 4.16666667%;
        max-width: 4.16666667%;
    }

    .col-sm-1-5 {
        flex: 0 0 12.5%;
        max-width: 12.5%;
    }

    .col-sm-2-5 {
        flex: 0 0 20.83333333%;
        max-width: 20.83333333%;
    }

    .col-sm-3-5 {
        flex: 0 0 29.16666667%;
        max-width: 29.16666667%;
    }

    .col-sm-4-5 {
        flex: 0 0 37.5%;
        max-width: 37.5%;
    }

    .col-sm-5-5 {
        flex: 0 0 45.83333333%;
        max-width: 45.83333333%;
    }

    .col-sm-6-5 {
        flex: 0 0 54.16666667%;
        max-width: 54.16666667%;
    }

    .col-sm-7-5 {
        flex: 0 0 62.5%;
        max-width: 62.5%;
    }

    .col-sm-8-5 {
        flex: 0 0 70.83333333%;
        max-width: 70.83333333%;
    }

    .col-sm-9-5 {
        flex: 0 0 79.16666667%;
        max-width: 79.16666667%;
    }

    .col-sm-10-5 {
        flex: 0 0 87.5%;
        max-width: 87.5%;
    }

    .col-sm-11-5 {
        flex: 0 0 95.83333333%;
        max-width: 95.83333333%;
    }
}

/* Responsive: md */
@media (min-width: 768px) {
    .col-md-0-5 {
        flex: 0 0 4.16666667%;
        max-width: 4.16666667%;
    }

    .col-md-1-5 {
        flex: 0 0 12.5%;
        max-width: 12.5%;
    }

    .col-md-2-5 {
        flex: 0 0 20.83333333%;
        max-width: 20.83333333%;
    }

    .col-md-3-5 {
        flex: 0 0 29.16666667%;
        max-width: 29.16666667%;
    }

    .col-md-4-5 {
        flex: 0 0 37.5%;
        max-width: 37.5%;
    }

    .col-md-5-5 {
        flex: 0 0 45.83333333%;
        max-width: 45.83333333%;
    }

    .col-md-6-5 {
        flex: 0 0 54.16666667%;
        max-width: 54.16666667%;
    }

    .col-md-7-5 {
        flex: 0 0 62.5%;
        max-width: 62.5%;
    }

    .col-md-8-5 {
        flex: 0 0 70.83333333%;
        max-width: 70.83333333%;
    }

    .col-md-9-5 {
        flex: 0 0 79.16666667%;
        max-width: 79.16666667%;
    }

    .col-md-10-5 {
        flex: 0 0 87.5%;
        max-width: 87.5%;
    }

    .col-md-11-5 {
        flex: 0 0 95.83333333%;
        max-width: 95.83333333%;
    }
}

/* Responsive: lg */
@media (min-width: 992px) {
    .col-lg-0-5 {
        flex: 0 0 4.16666667%;
        max-width: 4.16666667%;
    }

    .col-lg-1-5 {
        flex: 0 0 12.5%;
        max-width: 12.5%;
    }

    .col-lg-2-5 {
        flex: 0 0 20.83333333%;
        max-width: 20.83333333%;
    }

    .col-lg-3-5 {
        flex: 0 0 29.16666667%;
        max-width: 29.16666667%;
    }

    .col-lg-4-5 {
        flex: 0 0 37.5%;
        max-width: 37.5%;
    }

    .col-lg-5-5 {
        flex: 0 0 45.83333333%;
        max-width: 45.83333333%;
    }

    .col-lg-6-5 {
        flex: 0 0 54.16666667%;
        max-width: 54.16666667%;
    }

    .col-lg-7-5 {
        flex: 0 0 62.5%;
        max-width: 62.5%;
    }

    .col-lg-8-5 {
        flex: 0 0 70.83333333%;
        max-width: 70.83333333%;
    }

    .col-lg-9-5 {
        flex: 0 0 79.16666667%;
        max-width: 79.16666667%;
    }

    .col-lg-10-5 {
        flex: 0 0 87.5%;
        max-width: 87.5%;
    }

    .col-lg-11-5 {
        flex: 0 0 95.83333333%;
        max-width: 95.83333333%;
    }
}

/* Responsive: xl */
@media (min-width: 1200px) {
    .col-xl-0-5 {
        flex: 0 0 4.16666667%;
        max-width: 4.16666667%;
    }

    .col-xl-1-5 {
        flex: 0 0 12.5%;
        max-width: 12.5%;
    }

    .col-xl-2-5 {
        flex: 0 0 20.83333333%;
        max-width: 20.83333333%;
    }

    .col-xl-3-5 {
        flex: 0 0 29.16666667%;
        max-width: 29.16666667%;
    }

    .col-xl-4-5 {
        flex: 0 0 37.5%;
        max-width: 37.5%;
    }

    .col-xl-5-5 {
        flex: 0 0 45.83333333%;
        max-width: 45.83333333%;
    }

    .col-xl-6-5 {
        flex: 0 0 54.16666667%;
        max-width: 54.16666667%;
    }

    .col-xl-7-5 {
        flex: 0 0 62.5%;
        max-width: 62.5%;
    }

    .col-xl-8-5 {
        flex: 0 0 70.83333333%;
        max-width: 70.83333333%;
    }

    .col-xl-9-5 {
        flex: 0 0 79.16666667%;
        max-width: 79.16666667%;
    }

    .col-xl-10-5 {
        flex: 0 0 87.5%;
        max-width: 87.5%;
    }

    .col-xl-11-5 {
        flex: 0 0 95.83333333%;
        max-width: 95.83333333%;
    }
}

/* Responsive: xxl */
@media (min-width: 1400px) {
    .col-xxl-0-5 {
        flex: 0 0 4.16666667%;
        max-width: 4.16666667%;
    }

    .col-xxl-1-5 {
        flex: 0 0 12.5%;
        max-width: 12.5%;
    }

    .col-xxl-2-5 {
        flex: 0 0 20.83333333%;
        max-width: 20.83333333%;
    }

    .col-xxl-3-5 {
        flex: 0 0 29.16666667%;
        max-width: 29.16666667%;
    }

    .col-xxl-4-5 {
        flex: 0 0 37.5%;
        max-width: 37.5%;
    }

    .col-xxl-5-5 {
        flex: 0 0 45.83333333%;
        max-width: 45.83333333%;
    }

    .col-xxl-6-5 {
        flex: 0 0 54.16666667%;
        max-width: 54.16666667%;
    }

    .col-xxl-7-5 {
        flex: 0 0 62.5%;
        max-width: 62.5%;
    }

    .col-xxl-8-5 {
        flex: 0 0 70.83333333%;
        max-width: 70.83333333%;
    }

    .col-xxl-9-5 {
        flex: 0 0 79.16666667%;
        max-width: 79.16666667%;
    }

    .col-xxl-10-5 {
        flex: 0 0 87.5%;
        max-width: 87.5%;
    }

    .col-xxl-11-5 {
        flex: 0 0 95.83333333%;
        max-width: 95.83333333%;
    }
}

.notification-bell {
    display: inline-block;
    animation: ring 2s ease-in-out infinite;
    transform-origin: top center;
}

@keyframes ring {
    0% { transform: rotate(0); }
    10% { transform: rotate(30deg); }
    20% { transform: rotate(-25deg); }
    30% { transform: rotate(20deg); }
    40% { transform: rotate(-15deg); }
    50% { transform: rotate(10deg); }
    60% { transform: rotate(-5deg); }
    70% { transform: rotate(0); }
    100% { transform: rotate(0); }
}