/*Breakpoints*/
@font-face {
    font-family: Voye-Medium;
    src: url(Voye-Medium.otf);
}

body {
    font-family: Voye-Medium !important;
}
/*xs*/
.invis{
    display: none;
}

.desktop {
    display: none;
}

.bottom {
    align-content: end;
}

.nav-top {
    background-color: rgb(25, 25, 25);
    color: white;
}

.nav-brand-container.row{
    width: 100%;
}


.nav-brand {
    max-width: 100%;
    max-height: 75px;
}

.toggler-col{
    align-content: center;
}
.navbar-toggler{
    border-color: white;
}

.navbar-toggler-icon {
    background-image: url(
"data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.nav-item {
    width: 100%;
}

.sub-nav-link{
    width: 100%;
}

.nav-link {
    color: lightgray;
}

.nav-link.active {
    color: white;
}

.nav-link:hover {
    color: gray;
}

.nav-link:focus {
    color: gray;
}

.home-card {
    margin-top: 12px;
    height: 100%;
}

table {
    width: 100%;

    .date {
        width: 20%;
    }

    .desc {
        width: 50%;
    }

    .amount {
        width: 20%;
    }

    .ref {
        border-right: double
    }

    th {
        border-bottom: 2px solid;
    }

    td {
        border: 0.25px solid;
    }
}


.btn {
    width: 100%;
}

.pl-header {
    width: 100%;
    background-color: gray;
    color: white;
}

.pl-total-container {
    align-content: end;
}

.pl-total-num {
    border-top: 1px solid;
    border-bottom: 2px solid;
}

.clientLogo{
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
}
/*sm*/
@media screen and (min-width: 576px) {}

/*md*/
@media screen and (min-width: 768px) {
    
    .nav-top {
        min-height: 1000px;
        height: 100%;
    }

    .nav-brand {
        max-height: auto;
    }

    .toggler-col{
        display: none;
    }

    .collapse.navbar-collapse{
        display:block;
        height:auto;
    }
}

/*lg*/
@media screen and (min-width: 992px) {}



/*xl*/
@media screen and (min-width: 1200px) {

    .desktop {
        display: inherit;
    }


}

/*xxl*/
@media screen and (min-width: 1400px) {}