@font-face {
    font-family: "Varela Round";
    src: url("../fonts/VarelaRound-Regular.ttf") format("truetype");
}

.help-block {
    display: inline;
    font-weight: bolder;
}
.k-messages-fixed {
    position: fixed;
    top: 65px;
    width: calc(100% - 65px); 
    z-index: 1000 !important;
    border-radius: 0px
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: inherit;
    line-height: 28px
}
.select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px solid #e5e6e7;
    border-radius: 4px
}
.select2-container {
    width: 100% !important;
}
#spinner-modal.modal {
    text-align: center;
    padding: 0 !important;
}

    #spinner-modal.modal:before {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        margin-right: -4px;
    }

#spinner-modal div.modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}

/*Changes to Theme*/
.modal {
    overflow: auto !important;
}
dt,
dd {
    line-height: 1.5;
}

.form-group {
    margin-bottom: 10px;
}


@media (min-width: 768px) {
    /* Bootstrap forces dt onto one line (nowrap + ellipsis), so at 33% of a half-width column long labels
       ("Pagamento restantes recibos", "Data em que foi cancelada") were cut off. Let them wrap instead;
       the ellipsis only remains for a single word longer than the column (ellipsis-tooltip.js shows it). */
    .dl-horizontal dt {
        width: 33%;
        white-space: normal;
    }

    .dl-horizontal dd {
        margin-left: 34%;
    }
}


.control-label {
    overflow: hidden;
    text-overflow: ellipsis;
}


/* No focus outline when an element is clicked with the mouse; keyboard focus (:focus-visible) keeps it. */
:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
.btn:active:focus:not(:focus-visible),
.btn.active:focus:not(:focus-visible) {
    outline: 0 !important;
}

/* Centre every modal vertically. min-height (not height) so a modal taller than the viewport still
   scrolls inside .modal as before. Margins match Bootstrap 3 (10px on phones, 30px from 768px).
   #spinner-modal keeps its own inline-block centring above. */
.modal:not(#spinner-modal) .modal-dialog {
    display: flex;
    align-items: center;
    min-height: calc(100% - 20px);
}

    .modal:not(#spinner-modal) .modal-dialog > .modal-content {
        width: 100%;
    }

@media (min-width: 768px) {
    .modal:not(#spinner-modal) .modal-dialog {
        min-height: calc(100% - 60px);
    }
}

/* Row of action buttons: 8px between buttons, also between rows when they wrap on narrow screens. */
.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}