@font-face {
    font-family: 'Graphik Bold';
    font-display: swap;
    src: url('GraphikBold.otf') format('opentype');
}


@font-face {
    font-family: 'Montserrat Bold';
    font-display: swap;
    src: url('Montserrat-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Cabin Regular';
    font-display: swap;
    src: url('Cabin-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Cabin Bold';
    font-display: swap;
    src: url('Cabin-Bold.ttf') format('truetype');
}
.content-section {
    padding: 20px 0;
}
.cv-section-item {
    padding: 10px 0;
}
body {
    /*background-color: #ADD8E6;*/
     --bs-body-font-family: Cabin Regular;
}
.app-form label {
    width: 50%;
    display: inline-block;
    margin-bottom: 10px;
}
.hymns-list {
    padding: 0;
}
.hymn-list-item {
    margin-bottom: 20px;
    border-bottom: 1px solid black;
    padding-bottom: 10px;
    list-style: none;
}
.app-form {
    border: 1px solid black;
    border-radius: 10px;
    padding: 20px;
}
.message {
    color: green;
    font-weight: bold;
    height: 40px;
}
.audio-obj {
    width: 100%;
    max-width: 600px;
}
.hymn-title {
    line-height: 40px;
}
.hymn-list-action-btn {
    margin-bottom: 5px;
}
.home-list li {
    list-style: none;
    margin-bottom: 20px;
}
.form-control ~ .form-label {
    position: absolute;
    top: 0;
    max-width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    left: .75rem;
    padding-top: .37rem;
    pointer-events: none;
    transform-origin: 0 0;
    transition: all .2s ease-out;
    color: rgba(0, 0, 0, .6);
    margin-bottom: 0;
}
.form-control.active ~ .form-label, .form-control:focus ~ .form-label {
    transform: translateY(-1rem) translateY(.1rem) scale(.8);
}

.search-form {
    margin-bottom: 30px;
}
.navbar-section {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.home-step {
    width: 30%;
}
.navbar {
    background-color: transparent !important;
}
.submit-btn-container {
    padding-top: 20px;
}
#file-clear_id, label[for="file-clear_id"]  {
    display: none;
}
.app-form br {
    margin-bottom: 10px;
}
.app-form .form-group {
    margin-bottom: 20px;
}
table.hymn-records-table {
    margin-bottom: 40px;
}
.hymn-records-table td {
    vertical-align: middle;
}
.logo {
    width: 120px;
}
.cv-nav-link.current {
    font-weight: bold;
}
#message {
    height: 30px;
    margin-left: 20px;
    color: green;
    font-weight: bold;
}

/* modal*/
.progress-modal {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 )
    url('progress-spinner.gif')
    50% 50%
    no-repeat;
}
body.loading {
    overflow: hidden;
}
body.loading .progress-modal {
    display: block;
}

.footer {
    background-color: #00436D;
    color: white;
    padding-top: 60px;
    padding-bottom: 30px;
}

.footer-logo {
    margin-left: -10px;
    margin-bottom: 30px;
}
.footer-col {
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-right: 15px;
    margin-left: 15px;
}
.footer-col h4 {
    font-size: calc(1.275rem + .3vw);
}
.footer-col:first-child {
    margin-left: 0;
}
.footer-col:last-child {
    margin-right: 0;
}
.footer-main-section {
    display: flex;
    margin-bottom: 120px;
    align-items: stretch;
    justify-content: space-between;
}
img {
    max-width: 100%;
    display: inline-block;
}
.footer-link {
    font-size: 13px;
    margin-bottom: 10px;
    line-height: 170%;
    text-decoration: none;
}
.footer-link {
    color: white;
}
a.footer-link:hover {
    color: rgba(255,255,255,0.5);
}
.footer-text {
    font-size: 13px;
    margin-bottom: 1rem;
}
.section {
    padding-left: 60px;
    padding-right: 60px;
}
.section.overflow-hidden {
    overflow: hidden;
}
.copyright-text {
    margin-bottom: 0;
}
body > div.container.p-3 {
    padding-bottom: 60px !important;
}
/* tablet screen size */
@media screen and (max-width: 991px) {
    .footer-main-section {
        margin-bottom: 60px;
    }
}
/* mobile (l) screen size */
@media screen and (max-width: 767px) {
    .section {
        padding-left: 30px;
        padding-right: 30px;
    }

    .footer-main-section {
        flex-flow: wrap;
        justify-content: flex-start;
    }

    .footer-col {
        margin-bottom: 30px;
        margin-left: 0;
        margin-right: 30px;
    }
}
.a-container {
    max-width: 1160px;
    margin-left: auto;
    margin-right: auto;
}