a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
  color: #0366d6;
}

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px; /* Vertically center the text there */
}
/*
td {
    word-wrap: break-word;
    min-width: 160px;
    max-width: 560px
}*/


/*.list a {
    display: table-cell;
    position: relative;
    text-align: center;
    cursor: grab;
    cursor: -webkit-grab;
    vertical-align: middle;
}*/

.resizecust {
    resize: both;
    overflow: auto;
}

.scroller {
    text-align: center;
    cursor: pointer;
    display: none;
    padding: .7rem;
    /*padding-top: 15px;*/
    margin-top: 1.2rem;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #343a40;
}

.scroller-right {
    float: right;
}

.scroller-left {
    float: left;
}

.nav-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    /*display: -webkit-box;*/
    display: -moz-box;
    flex-wrap: nowrap;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    background-color: #343a40;
    border-color: black;
    color: white;
}

.nav-tabs .nav-link {
    border: 1px solid gray !important;
    border-top-left-radius: .50rem;
    border-top-right-radius: .50rem;
    margin: 1px;
    background-color: #f2f2f2;
}

td {
    width: auto;
    white-space: nowrap;
}

.td-adjust {
    width: 1px;
    white-space: nowrap;
}


@media (min-width: 1200px) {
    .container {
        max-width: 1440px;
    }
}

.mod {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
    border: 0;
    border-top: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
}
.tablewrap {
    /*height: 250px;*/
    height: 25rem;
    overflow-y: auto;
}

/*.tablewrap td{
    padding: 0px;
    padding-right: 10px;
}*/

/*.tbl td {
    padding: .5rem !important;
}

.tbl th {
    padding: .5rem !important;
}


.tbl thead {
    padding: .5rem;
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
}

.tbl thead tr th{
    padding: .3rem;
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
}

.tbl thead tr {*/
    /*display: table;
    width: 100%;
    table-layout: fixed;*/
    /*text-align: center;
}

.tbl tbody {
    display: block;
    overflow-y: auto;
    table-layout: fixed;
    max-height: 200px;
}*/

/*Hidden class for adding and removing*/
.spinner-dual-ring.hidden {
    display: none;
}

#memberFRPaymentTable{
    height: 50vh;
}

.tbl {
    /*height: 50vh;*/
    height: 15vh;
}

.tbl th {
    position: sticky;
    inset-block-start: 0;
    top:-1px;
    background: white;    
}

.tbl tfoot {
    position: sticky;
    inset-block-end: 0;  
    background: white; 
}


.wrapper {
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    padding: 5px;
    height: 5rem;
}

/*Add an overlay to the entire page blocking any further presses to buttons or other elements.*/
.overlay {

    width: 0;
    height: 0;
    
}

@media only screen and (min-width: 768px) and (max-width: 1200px) {
    .wrapperlist {
        position: absolute;
        min-width: 3000px;
    }

    .nav-tabs {
        display: -webkit-box;
    }
}

@media only screen and (max-width: 768px) {
    /*For Mobile Phones*/
    .nav-tabs {
        display: -webkit-box;        
    }
    .wrapperlist {
        position: absolute;
        min-width: 3000px;
    }
    .htmx-request.overlay {
        width: 50rem !important;
        height: 9rem;
    }
    ::-webkit-scrollbar {
        height: 4px;
        width: 4px;
        background: gray;
    }

    ::-webkit-scrollbar-thumb:horizontal {
        background: #000;
        border-radius: 10px;
    }
}
.htmx-request.overlay {
    position: relative;
    top: 0;
    left: 0;
    width: 10rem;
    height: 9rem;
    margin: auto;
    margin-bottom: 2rem;
    padding-top: 1.3rem;
    border-radius: 10%;
    background: rgba(0,0,0,.8);
    z-index: 999;
    opacity: 1;
    transition: all 0.5s;
}

/*Spinner Styles*/
.spinner-dual-ring {
    display: inline-block;
    width: 0;
    height: 0;
}



    .htmx-request.spinner-dual-ring:after {
        content: " ";
        display: block;
        width: 84px;
        height: 84px;
        margin: 5% auto;
        border-radius: 50%;
        border: 6px solid #fff;
        border-color: #fff transparent #fff transparent;
        animation: spinner-dual-ring 1.2s linear infinite;
    }

@keyframes spinner-dual-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.dropFont{
    font-size:14px !important;
}

.btnsame{
    width: 185px;
}


.dtcust dl {
    height: 10px;
    margin: 0;
    padding: 0;
}

.dtcust dt{
    height:20px;
    margin: 0;
    padding: 0;
}
.dtcust dd {
    height: 20px;
    margin: 0;
    padding: 0;
}

.leftbox {
    float: left;
    top: -5%;
    left: 5%;
    position: absolute;
    width: 15%;
    height: 110%;
    background: $green;
    box-shadow: 3px 3px 10px rgba($gray, .5);
}

.input-cust {
    color: white;
    background-color: #343a40 !important;
    border:none;

}

.tbl-nowrap {
    white-space: nowrap;
}

.tbl-squish td {
    padding-top: 0;
    padding-bottom: 0;
}

.btn-alt2 {
    color: #fff;
    background-color: silver;
    border-color: #004E64;
    font-weight: bold;
    letter-spacing: 0.05em;
    border-radius: 0;
}

.btn-alt {
    color: black;
    background-color: rgb(239, 239, 239);
    border-color: black;
    font-weight: normal;
}



@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    .overflex-sm {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .box{
        width: auto !important;
    }
}

@media screen and (orientation: landscape) {
  .carousel img {
    height: 100vh;
  }
}

@media screen and (orientation: landscape) {
    .carousel img {
        height: 100vh;
    }
}


@media print {
    /*@page {
        size: auto; 
        margin-top: 2cm;
        margin-left: 3.75cm;
    }*/

    body{
        font-size:x-large !important;
    }

    .desc-print {
        display: block;
        font-size: smaller;
    }

    .table {
        overflow-x: visible;
        display: table !important;
        font-size:large !important;
    }

    .table-print {
        transform: translate(15%);
        transform-origin: bottom left;
        display: block;
    }

    .col-print-1 {
        flex: 0 0 8.33333%;
        max-width: 8.33333%;
    }

    .col-print-2 {
        flex: 0 0 16.66667%;
        max-width: 16.66667%;
    }


    .col-print-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }


    .col-print-4 {
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
    }


    .col-print-5 {
        flex: 0 0 41.66667%;
        max-width: 41.66667%;
    }


    .col-print-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }


    .col-print-7 {
        flex: 0 0 58.33333%;
        max-width: 58.33333%;
    }


    .col-print-8 {
        flex: 0 0 66.66667%;
        max-width: 66.66667%;
    }


    .col-print-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }


    .col-print-10 {
        flex: 0 0 83.33333%;
        max-width: 83.33333%;
    }


    .col-print-11 {
        flex: 0 0 91.66667%;
        max-width: 91.66667%;
    }


    .col-print-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}


/* FOR ADDING HTMX LOADING BAR */

.loading-bar {
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(90deg, transparent, #000, transparent, #000, transparent );
}

.htmx-request.loading-bar {
    opacity: 1;
    animation: fadeIn 2s linear forwards, slide 0.8s ease-in-out infinite;
}

@keyframes slide {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX( 100%);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


.loading {
    position: relative;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
}

.htmx-request.loading {
    width: auto;
    height: auto;
    margin-bottom: 1rem;
}