:root {
    --primary-color: rgb(72, 147, 205);
    --focus-color: rgb(72, 147, 205);
    --bg-section-view: #edf2f2;
    --bg-image-button: #b0b0;
    --title-color: rgb(64, 145, 210);
    --secondary-color: rgb(64, 145, 210);
    --strong-color: #3573a8;
}

.btn-outline-primary {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn-outline-primary:hover, .btn-outline-primary:active {
    color: #f5f5f5 !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.form-control {
    border-bottom: 1px solid black !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
    -webkit-transition: all .125s linear !important;
    -moz-transition: all .125s linear !important;
    -ms-transition: all .125s linear !important;
    -o-transition: all .125s linear !important;
    transition: all .125s linear !important;
}

.form-control:focus {
    border-bottom: 2px solid var(--focus-color) !important;
    outline: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

.section-title {
    padding: 30px 0;
}

.section-title > div {
    padding: 0;
}

.section-body {
    padding: 25px;
    background-color: white;
    border-radius: 10px;
}

.nav-buttons .btn {
    margin-left: 10px;
}

hr.vanished {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--primary-color), rgba(0, 0, 0, 0));
}

hr.login-vanished {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, #FFFFFF, var(--primary-color), #FFFFFF);
}

hr.primary-separator {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, var(--primary-color), var(--primary-color), var(--primary-color));
}

.effect-1 ~ .focus-border {
    position: absolute;
    bottom: 9px;
    left: 15px;
    width: 0;
    height: 2px;
    background-color: var(--focus-color);
    transition: 0.4s;
}

.effect-1:focus ~ .focus-border {
    width: calc(100% - 30px);
    transition: 0.4s;
}

@media screen and (min-width: 769px) {
    .pagination {
        justify-content: initial !important;
    }
}

.page-item.active .page-link {
    z-index: 1;
    color: #fff;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.error-feedback {
    width: 100%;
    margin-top: 0.25rem;
    font-size: 80%;
    color: #dc3545;
}

/* Chrome, Safari, Edge, Opera */
input:not(.with-arrows)::-webkit-outer-spin-button,
input:not(.with-arrows)::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number]:not(.with-arrows) {
    -moz-appearance: textfield;
}