.add-update-button-block {
    display: flex;
    justify-content: space-between;
}

.table td {
    vertical-align: middle;
}

/* new styles */

main > .container {
    padding: 70px 15px 20px;
}

.footer {
    background-color: #f5f5f5;
    font-size: .9em;
    height: 60px;
}

.footer > .container {
    padding-right: 15px;
    padding-left: 15px;
}

.not-set {
    color: #c55;
    font-style: italic;
}

a {
    /*color: #00ABAB;*/
    color: #000000;
}

.color-ap {
    color: #00ABAB;
}

a:hover {
    /*color: #00ABAB;*/
    color: #000000;
}

.border {
    border: 1px solid #00ABAB !important;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    content: '';
    left: 3px;
    display: inline-block;
    width: 0;
    height: 0;
    border: solid 5px transparent;
    margin: 4px 4px 2px 4px;
    background: transparent;
}

a.asc:after {
    border-bottom: solid 7px #212529;
    border-top-width: 0;
}

a.desc:after {
    border-top: solid 7px #212529;
    border-bottom-width: 0;
}

.grid-view th {
    white-space: nowrap;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: #999;
}

.error-summary {
    color: #a94442;
    background: #fdf7f7;
    border-left: 3px solid #eed3d7;
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* align the logout "link" (button in form) of the navbar */
.nav li > form > button.logout {
    padding-top: 7px;
    color: rgba(255, 255, 255, 0.5);
}

/*@media (max-width: 767px) {*/
/*    .nav li > form > button.logout {*/
/*        display: block;*/
/*        text-align: left;*/
/*        width: 100%;*/
/*        padding: 10px 0;*/
/*    }*/
/*}*/

.nav > li > form > button.logout:focus,
.nav > li > form > button.logout:hover {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.75);
}

.nav > li > form > button.logout:focus {
    outline: none;
}

.nav {
    background-image: none;
}

.p-r {
    padding-right: 2rem !important;
}

.breadcrumb {
    background-color: transparent;
    font-size: 1.3em;
    font-family: Manrope;
}

ul li {
    padding: 0 3px;
}

.table {
    background-color: white;
}

.btn-ap {
    background: #FFFFFF;
    border: 0.5px solid #00ABAB;
    box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.25);
    border-radius: 83px;
}

.btn-ap:hover {
    background: #00ABAB;
    border: 0.5px solid #00ABAB;
    box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.25);
    border-radius: 83px;
}

.btn {
    background: #FFFFFF;
    border: 0.5px solid #00ABAB;
    box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.25);
    border-radius: 83px;
    color: black;
}

.btn:hover {
    background: #00ABAB;
    border: 0.5px solid #00ABAB;
    box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.25);
    border-radius: 83px;
}

.static-row {
    display: flex;
    flex-direction: row;
    gap: 10px;
}
.bgr-form {
    background: rgba(255, 255, 255, 0.63);
    border: 0.5px solid #E3E4E5;
    border-radius: 7px;
}

@font-face {
    font-family: 'Manrope';
    src: url('/fonts/Manrope.ttf');
}
@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter.ttf');
}

* {
    font-size: 13px;
    font-family: 'Manrope';
    color: #000000;
}
.hero sup {
    font-size: 60%;
    font-family: 'Manrope';
    color: rgba(0, 0, 0, 0.2);
    font-style: normal;
    font-weight: bold;
}
.badge-info {
    color: #D30059;
    background-color: #11ffee00;
    font-size: 1rem;
}


.table.align-text-top thead th {
    /* vertical-align: top; */
    vertical-align: middle;
}

.breadcrumb {
    background-color: transparent;
    color: #A7A7A7;
}
.breadcrumb li a {
    color: #A7A7A7;
}

.breadcrumb li a:hover {
    color: #000000;
}
.right-block .top {
    background-image: url("/images/topmenubg.png");
    background-repeat: no-repeat;
    background-position: left top;
    /*min-height: 55px;*/
    /*max-height: 55px;*/
    height: 55px;
    background-size: cover;
}

.right-block .top p {
    line-height: 55px;
    text-align: center;
    color: rgba(0, 0, 0, 0.24);
    font-family: Manrope;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.06em;
    font-size: 1.2rem;
}
.right-block .top p span {
    color: rgba(0, 0, 0, 0.24);
}

.right-block {
    background-image: url("/images/bg.png");
    background-repeat: no-repeat;
    background-position: right 60px;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    background-size: auto 100%;
}

.right-block .content {
    /*margin: auto 0;*/
    /*margin-top: 8rem;*/
}


.h-index {
    font-family: Manrope;
    font-style: normal;
    font-weight: 400;
    font-size: 2.5rem;
    line-height: 3rem;
    letter-spacing: 0.2rem;
    color: #000000;
    /*!*margin-bottom: 17rem;*!*/
    /*margin-left: 25rem;*/
}


.label-index {
    font-family: Inter;
    font-style: normal;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.2em;
    color: rgba(0, 0, 0, 0.2);
    /*margin-bottom: 17rem;*/
    /*margin-left: 25rem;*/
    /*margin-right: 5em;*/
}


.hero {
    width: 75%;
    margin: 4rem auto;
    max-width: 1000px;
}

.call-free {
    display: none;
}

.period-select {
    border: 1px solid #dee2e6 !important;
    border-radius: 0.25rem;
    padding: 3px 0;
}
.nav-pills .nav-link.active, .nav-pills .show .nav-link {
    color: #fff;
    background-color: #00ABAB;
}

.period-select .nav-link {
    padding: 0.5rem;
}

.vl {
    display: inline-block;
    /*padding: 5px 10px;*/
    font-size: 20px;
    border-right: 1px solid #d0d0d0;
}

.vl:last-child {
    border-right: none;
}

@media (min-width: 576px) {

    .left-block {
        background-image: url("/images/leftmenubg-short.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: left top;
        min-width: 124px;
        height: 100vh;
        /*padding: 2rem 0 0 2rem;*/
    }

    .call-free {
        display: inline;
    }

    .h-index {
        font-family: Manrope;
        font-style: normal;
        font-weight: 400;
        font-size: 4.5rem;
        line-height: 1.2em;
        letter-spacing: 0.2em;
        color: #000000;
        /*margin-bottom: 17rem;*/
        /*margin-left: 25rem;*/
    }

    .label-index {
        font-family: Inter;
        font-style: normal;
        font-weight: 400;
        font-size: 2.5rem;
        line-height: 1em;
        color: rgba(0, 0, 0, 0.2);
        /*margin-bottom: 12rem;*/
        /*margin-left: 25rem;*/
        /*margin-right: 5em;*/
    }

    .hero {
        margin: 5rem 10rem auto auto
    }

    .period-select .nav-link {
        padding: 0.2rem;
    }


}

.hr-dinam {
    margin-top: 3.5rem;
}
@media (min-width: 768px) {

    body {
        /*background-image: url("/images/bg-ap.png");*/
        background-repeat: no-repeat;
        background-position: 2em 7em;
        background-attachment: fixed;
        background-size: auto 75%;
    }
    .p-r {
        font-size: 2rem;
    }

    .right-block .top p span {
        font-size: 1.5rem;
    }

    .right-block .top p {
        font-size: 1.5rem;
    }
    .hr-dinam-2 {
        margin-top: 16rem;
    }
}

@media (min-width: 992px) {

    .hero {
        width: 63%;
        max-width: 1000px;
    }

}

@media (min-width: 1200px) {
    .h-index {
        font-family: Manrope;
        font-style: normal;
        font-weight: 400;
        font-size: 8rem;
        line-height: 1.2em;
        letter-spacing: 0.2em;
        color: #000000;
    }
    .label-index {
        font-family: Inter;
        font-style: normal;
        font-weight: 400;
        font-size: 2.3rem;
        line-height: 1.3em;
        color: rgba(0, 0, 0, 0.2);
    }
    .hero {
        width: 60%;
        max-width: 1000px;
        margin: auto 20rem auto auto;
    }
    .hr-dinam-2 {
        margin-top: 4rem;
    }
}

@media (min-width: 1300px) {
    .hr-dinam {
        margin-top: 3.5rem;
    }
    .hr-dinam-2 {
        margin-top: 1.1rem;
    }
}


@media (min-width: 1400px) {
    .hr-dinam {
        margin-top: 4.7rem;
    }
    .hr-dinam-2 {
        margin-top: 1rem;
    }
}


@media (min-width: 1500px) {
    .h-index {
        font-family: Manrope;
        font-style: normal;
        font-weight: 400;
        font-size: 8rem;
        line-height: 1.2em;
        letter-spacing: 0.2em;
        color: #000000;
    }
    .label-index {
        font-family: Inter;
        font-style: normal;
        font-weight: 400;
        font-size: 2.5rem;
        line-height: 1.3em;
        color: rgba(0, 0, 0, 0.2);
    }
    .hero {
        width: 60%;
        max-width: 1000px;
        margin: auto 20rem auto auto;
    }
    .hr-dinam {
        margin-top: 6.3rem;
    }
}
@media (min-width: 1600px) {
    .hr-dinam {
        margin-top: 7.3rem;
    }
}

@media (min-width: 1900px) {
    .h-index {
        font-family: Manrope;
        font-style: normal;
        font-weight: 400;
        font-size: 10rem;
        line-height: 1em;
        letter-spacing: 0.2em;
        color: #000000;
    }
    .hero {
        width: 60%;
        max-width: 1000px;
        margin: auto 30rem auto auto;
    }
    .hr-dinam {
        margin-top: 13rem;
    }
}