:root {
    --mainRed: rgba(218, 13, 23, 0.56);
    --mainBgColor: #024a2c;
    --mainNavColor: #efebde;

    --font-serif: "calluna", Georgia, serif;
    --font-sans: "neue-haas-grotesk-display", "Helvetica Neue", Arial, sans-serif;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    color: var(--color-text);
    font-size: var(--mainTextSize);
}

body {
    font-family: var(--font-sans), sans-serif;
}
.mainColor {
    color: var(--mainNavColor);
}
#app-name{
    margin-top: 1rem;
}
#angelica_logo{
    max-width: 424px;
    margin-bottom: 2rem;
    width: 285px;

}
.btn-primary,.btn-primary:active,.btn-primary:focus {
    background: var(--mainBgColor);
    border-color: unset!important;
 }

.btn-primary:hover {
     background: var(--mainNavColor);
    color: var(--mainBgColor);
    border-color: unset;
}
.btn-primary:not(:disabled):not(.disabled):active{
    background: var(--mainBgColor);
}
.page-item.active .page-link {
    background: var(--mainBgColor);
}
.main-sidebar.top-navbar, .main-header.navbar {
    background-color: var(--mainBgColor);
    color: white;
}

.navbar-expand .navbar-nav .nav-link {
    color: white;
}

[class*=sidebar-dark-] .nav-sidebar>.nav-item.menu-open>.nav-link, [class*=sidebar-dark-] .nav-sidebar>.nav-item:hover>.nav-link, [class*=sidebar-dark-] .nav-sidebar>.nav-item>.nav-link:focus {
    color: var(--mainBgColor);
    background-color: var(--mainNavColor);
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active, .sidebar-light-primary .nav-sidebar > .nav-item > .nav-link.active {

    background-color: var(--mainNavColor);
    color: var(--mainBgColor);

}

[class*=sidebar-dark-] .sidebar a {
    color: white;
}

/****************LOGIN PAGE**********************/
.login-page{
    background-color: var(--mainNavColor);
    background-position-y: 25vh;
}
.login-page .card {
    box-shadow: 0 0 10px 1px #0000008f;
}

.login-page .form-control:focus {
    border-color: var(--mainBgColor);
}

.login-page .icheck-primary > input:first-child:checked + label::before {
    background-color: var(--mainBgColor);
    border-color: var(--mainBgColor);
}

.login-page .icheck-primary > input:first-child:not(:checked):not(:disabled):focus + label::before {
    border-color: var(--mainNavColor);
}

.login-page input.form-control {
    text-align: center;
    border-radius: 1.25rem;
}

.login-page .btn_main_red {
    background-color: var(--mainBgColor);
    color: white;
    border-radius: 1.25rem;
}

.icheck-primary > input:first-child:not(:checked):not(:disabled):hover + label::before {
    border-color: var(--mainBgColor);
}

[class*=icheck-] > input:first-child + label::before {
    border-radius: 5px;
}
.paragraph-text{
    border: 1px solid var(--mainBgColor);
    border-radius: 0.5rem;
    padding: 0.5rem;
}

/*page verification*/
#page-verification{
    color: var(--mainBgColor);
    background-color: var(--mainNavColor);
}
#page-verification main{
    max-width: 80vw;
    margin: 0 auto;
    padding-top: 2rem;
    text-align: center;
}
#page-verification button{
    margin: 0 auto;
    display: block;
}
#page-verification #status{
    margin-top: 2rem;
    font-size: 2rem;
}
#page-verification #return_home a,#page-verification .btn-primary{
    text-transform: uppercase;
    text-decoration: none;
    color: white;
    font-weight: bold;
}