:root {
    --color-black: #212628;
    --color-green: #00ab6d;
    --color-dark-green: #0C8458;
    --color-blue: rgb(197, 227, 248);
    --color-white-blue: rgb(235, 246, 255);
    --color-dark-blue: #398cc0;
}
a {
    color: var(--color-green);    
    text-decoration: none;
    &:hover {
        color: var(--color-dark-green) !important;
        text-decoration: underline;
    }
}

.pagination {
    & .page-item a.page-link {
        color: var(--color-black);
        &:hover {
            text-decoration: none;
            background: var(--color-blue) !important;
        }
    }
    & .page-item.active a.page-link {
        background-color: var(--color-green);
        border-color: var(--color-green);
        color: var(--color-black);
        color: white;
        text-decoration: none;
        &:hover {
            background: var(--color-blue) !important;
        }
    }
}

@keyframes track-appear {
    from { background-color: rgb(245, 176, 65); }
    to { background-color: white; }
}

.navbar-search {
    margin-left: auto;
}

.sidebar {
    background: rgb(248, 249, 250);
}

nav {
    &.vertical {
        & .navbar-nav {
            flex-direction: column;
            align-items: start;
        }
        .navbar-brand, .navbar-search, .languages {
            display: none !important;
        }
    }
    .languages {
        button {
            background-color: var(--color-dark-green);
            color: white;
            &:hover {
                background-color: var(--color-dark-green);
                color: white;
            }
            &:focus {
                box-shadow: none;
            }
        }
        & .dropdown-menu a {
            &:hover {
                background: var(--color-green);
                color: white !important;
                text-decoration: none !important;
            }
        }
        
    } 
}




@media (min-width: 768px) {
    nav.horizontal ul.navbar-nav {
        display: none;
    }
}


@media (max-width: 768px) {
    .navbar-collapse {
        position: fixed;
        top: 0;
        left: 0;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 15px;
        width: 75%;
        height: 100%;
        padding: 10px 15px;
        border-radius: 0px 20px 20px 0px;
        background: #FFF;
        -webkit-box-shadow: 0px 4px 70px 0px rgba(0, 0, 0, 0.15);
        box-shadow: 0px 4px 70px 0px rgba(0, 0, 0, 0.15);
        overflow-y: auto;
    }

    .navbar-collapse.collapsing {
        left: -75%;
        transition: height 0s ease;
    }

    .navbar-collapse.show {
        left: 0;
        transition: left 500ms ease-in-out;
    }

    .navbar-toggler.collapsed ~ .navbar-collapse {
        transition: left 500ms ease-in-out;
    }
}

.icon-search {
    width: 32px;
    height: 32px;
    background-color: var(--color-green);
    -webkit-mask-image: url("/icons/binoculars.svg");
    mask-image: url("/icons/binoculars.svg");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    display: inline-block;
    &:hover {
        background-color: white;
    }
}

.form-control:focus {
    box-shadow: none;
    border-color: var(--color-green);
}

.ml-auto {
    margin-left: auto;
}

.page-padding {
    padding: 3rem;
}

.loader {
  height: 27px;
  aspect-ratio: 5;
  --c: #000 90deg,#0000 0;
  background:
   conic-gradient(from 135deg at top   ,var(--c)),
   conic-gradient(from -45deg at bottom,var(--c)) 12.5% 100%;
  background-size: 20% 50%;
  background-repeat: repeat-x;
  clip-path: inset(0 50%);
  animation: l18 1s infinite steps(5) alternate;
}
@keyframes l18{
  90%,to {clip-path: inset(0)}
}