/*
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
     //  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

        */

body {
    overflow-x: hidden;
}

#sidebar-wrapper {
    min-height: 100vh;
    margin-left: -15rem;
    -webkit-transition: margin .25s ease-out;
    -moz-transition: margin .25s ease-out;
    -o-transition: margin .25s ease-out;
    transition: margin .25s ease-out;
}

#sidebar-wrapper .sidebar-heading {
    padding: 0.875rem 1.25rem;
    font-size: 1.2rem;
}

#sidebar-wrapper .list-group {
    width: 17.2rem !important;
}

.list-none {
    list-style-type: none;
}

.resident-button {
    font-size: 16px !important;
}

#page-content-wrapper {
    min-width: 100vw;
}

#wrapper.toggled #sidebar-wrapper {
    margin-left: 0;
}

@media (min-width: 768px) {
    #sidebar-wrapper {
        margin-left: 0;
    }
    #page-content-wrapper {
        min-width: 0;
        width: 100%;
    }
    #wrapper.toggled #sidebar-wrapper {
        margin-left: -17rem;
    }
}

img.logo {
    max-width: 35%;
    max-height: 35%;
    padding: 0px;
}

.font-custom {
    vertical-align: middle;
    width: 40px;
    text-align: center;
}

a.text-adjust {
    font-size: 18px;
    vertical-align: middle;
    padding-left: 5px;
    padding: 10px;
    margin: auto;
    display: inline-flex;
    /* make element size relative to content */
    align-items: center;
    /* vertical alignment of items */
    line-height: 40px;
    /* vertically size by height, line-height or padding */
    padding: 5px 10px;
    /* horizontal with padding-l/r */
    border: 1px solid #ccc;
}

i.icon-adjust {
    padding-right: 15px;
    padding-left: 15px;
    padding: auto;
}

button.text-adjust {
    font-size: 18px;
    vertical-align: middle;
    padding-left: 5px;
    padding: 10px;
    margin: auto;
    display: inline-flex;
    /* make element size relative to content */
    align-items: center;
    /* vertical alignment of items */
    line-height: 40px;
    /* vertically size by height, line-height or padding */
    padding: 5px 10px;
    /* horizontal with padding-l/r */
    border: 1px solid #ccc;
}

span.align {
    overflow: hidden !important;
    white-Space: nowrap !important;
    padding-Right: 12px !important;
    /* Optional For caret */
    text-align: Right !important;
    text-overflow: ellipsis !important;
    width: 100%;
}

.bg-light.li.button.active {
    background-color: green;
}

.dropdown-container {
    display: none;
    background-color: #262626;
    padding-left: 8px;
}

.list-group-item.active {
    background-color: white;
    color: #495057;
}

.main-wrapper {
    min-height: 86vh !important;
    background-color: white !important;
}

.main-body {
    min-height: 86vh !important;
    background-color: #EDEDED;
}

.border-bot {
    border-bottom: 1px solid grey !important;
}

.border-modal {
    padding-top: 0px !important;
}

.topnav {
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.65);
}

.topnav button {
    float: left;
    display: block;
    color: white !important;
    text-align: center;
    text-decoration: none;
    font-size: 17px;
}

.topnav button:hover {
    background-color: #ddd;
    color: black;
}

.topnav .search-container {
    float: right;
}

.topnav input[type=text] {
    padding: 6px;
    font-size: 17px;
    border: none;
}

.modal-input input[type=text] {
    border: 1px solid #ccc;
}

.topnav .search-container button {
    float: right !important;
    padding: 6px 10px !important;
    margin-right: 16px !important;
    background: #ddd !important;
    font-size: 17px !important;
    border: none !important;
    cursor: pointer !important;
}

.topnav .search-container button:hover {
    background: #ccc;
}

@media screen and (max-width: 600px) {
    .topnav .search-container {
        float: none;
    }
    .topnav button,
    .topnav input[type=text],
    .topnav .search-container button {
        float: none;
        display: block;
        text-align: left;
        width: 100%;
        margin: 0;
        padding: 14px;
    }
    .topnav input[type=text] {
        border: 1px solid #ccc;
    }
}

.search-bars {
    padding: 0px;
}

.list-group-item.active-page {
    background-color: #e0e5eb !important;
    border-color: #5e7c9c;
}

.tab-nav {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

.tab-nav button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

.tab-nav button:hover {
    background-color: #ddd;
}


/* Create an active/current tablink class */

.tab-nav button.active {
    background-color: #ccc;
}


/* Style the tab content */

.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
    min-height: 80vh !important;
}

.alert-size {
    height: 120px;
    vertical-align: middle;
}

.schedule-align {
    vertical-align: middle;
    text-align: center;
}

.num-align {
    padding: auto !important;
    margin: auto;
}

.center-button {
    margin-top: 0px;
}

.row-heights {
    min-height: 86vh !important;
}

.account-button {
    padding-left: 30px;
    padding-right: 30px;
    transition: 0.3s;
    font-size: 17px;
}

.dashboard-logo {
    width: 25%;
    height: 25%;
}

.dashboard-box {
    background-color: rgb(16, 71, 143);
    border: 1px solid;
    height: 120px !important;
    text-align: center;
    vertical-align: middle;
}

.dashboard-margin {
    margin-bottom: 0px !important;
}

.table.jambo_table thead {
    background: rgba(52, 73, 94, 0.94);
    color: #ECF0F1;
}

.dataTables_filtersss {
    display: none;
}

.dataTables_wrapper .dataTables_filter .display-nones {
    float: right;
    text-align: right;
    display: none;
    width: 100% !important;
}

.datatable-element {
    width: 100% !important;
    padding-top: 15px;
}

.display-flex-nav {
    display: left !important;
}

.navbar-schedule {
    position: relative;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
}

.dataTables_wrapper .dataTables_info {
    padding-top: 0px !important;
}

.icheckbox_flat-green {
    display: inline-block;
    *display: inline;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    width: 20px;
    height: 20px;
    background-position-x: 0%;
    background-position-y: 0%;
    border: none;
    cursor: pointer;
    text-align: center
}

.icheckbox_flat-green:after {
    content: "";
    position: absolute;
    display: none;
}

* {
    box-sizing: border-box;
}


/* Create two equal columns that floats next to each other */

.column-left {
    float: left;
    width: 25%;
    padding: 0px;
    height: 200px;
    /* Should be removed. Only for demonstration */
}

.column-center {
    float: left;
    width: 50%;
    padding: 0px;
    height: 200px;
    /* Should be removed. Only for demonstration */
}

.column-right {
    float: left;
    width: 25%;
    padding: 0px;
    height: 200px;
    /* Should be removed. Only for demonstration */
}


/* Clear floats after the columns */

.row:after {
    content: "";
    display: table;
    clear: both;
}

.page-break {
    page-break-after: always;
}

.bg-grey {
    background: #F3F3F3;
}

.text-right {
    text-align: right;
}

.w-full {
    width: 100%;
}

.small-width {
    width: 15%;
}

.invoice {
    background: white;
    border: 1px solid #CCC;
    font-size: 14px;
    padding: 48px;
    margin: 20px 0;
}

.box {
    position: relative;
    /* Make the width of box same as image */
}

.box .text {
    z-index: 999;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 0%;
    /* Adjust this value to move the positioned div up and down */
    text-align: center;
    width: 100%;
    /* Set the width of the positioned div */
}

.background-opacity {
    opacity: 0.1;
    position: absolute;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

* {
    box-sizing: border-box;
}


/* Create two equal columns that floats next to each other */

.column-left {
    float: left;
    width: 20%;
    padding: 0px;
    height: 190px;
    /* Should be removed. Only for demonstration */
}

.column-center {
    float: left;
    width: 60%;
    padding: 0px;
    height: 190px;
    /* Should be removed. Only for demonstration */
}

.column-right {
    float: left;
    width: 20%;
    height: 190px;
    /* Should be removed. Only for demonstration */
}

.column-body-left {
    float: left;
    width: 33%;
    height: 818px;
    /* Should be removed. Only for demonstration */
}

.column-body-right {
    float: left;
    width: 61%;
    height: 818px;
    /* 818pxShould be removed. Only for demonstration */
}

.column-inside-left {
    float: left;
    width: 60%;
}

.column-inside-right {
    float: right;
    width: 40%;
}


/* Clear floats after the columns */

.row:after {
    content: "";
    display: table;
    clear: both;
}