html {
    font-family: 'Times New Roman', Times, serif !important;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
        font-family: 'Times New Roman', Times, serif !important;
    }
}

body {
    margin: 0px;
    margin-bottom: 60px;
    background-color: whitesmoke;
}

td.popoverclass {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis; 
    white-space: nowrap;
}

#overlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.85); /* Black background with opacity */
    z-index: 10000; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}

.row {
    /* margin-top: 1rem !important; */
}

.btn-height-floating {
    margin-top: 2em;
    height: calc(3.5rem + 2px);
}

.btn-primary {
    background-color: #154978;
    border-color: #154978;
}

    .btn-primary:hover {
        background-color: #103b61;
        border-color: #103b61;
        color: #FFFFFF;
    }

.wrapper:before {
    background: #154978;
    content: " ";
    height: 220px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

.header {
    margin: 1rem 2rem 1rem 2rem;
    position: relative;
    color: white;
}

.header-title {
    font-size: x-large;
}

.header-subtitle {
    font-size: medium;
    font-weight: 100;
}

.card-header {
    background-color: white;
}

.card {
    margin-bottom: 1rem;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.card-title {
    margin: 0 !important;
}

.custom-card-title{
    font-size: 9pt;
    margin: 0 !important;
}

.custom-flex-container{
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: white;
    padding: 20px;
    gap: 20px;
}

.custom-flex-container > div {
    padding: 5px;
}

.custom-form-flex-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: white;
    padding: 20px;
    gap: 15px; /*In this case, for wrapping, the interior components' width is fixed but the gap is variable and the container will use gap of at least the indicated value */
}

.custom-form-flex-container > div{
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom-card{
    background-color: white;
    border: solid 2px lightgray;
    border-radius: 10px;
    margin-bottom: 1rem;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.custom-card-header{
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    background-color: white;
    padding: 3px;
    gap: 3px;
}

.custom-card-header > div{
    background-color: white;
    text-align: center;
    vertical-align: middle;
    padding: 2px;
}

.containerWithFixedRatio{
    width: 17%;
    flex-grow: 0;
}

.containerWithRemainingRatio{
    flex-grow: 1;
}

.custom-card-header > table{
    border: none;
    /*border: solid 1px red;
    border-radius: 4px;*/
}

.flex-container{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    background-color: white;
    padding: 20px;
    gap: 40px;
}

.containerWithFixedRatioo {
    width: 50%;
    flex-grow: 0;
}

/* Child container styles */
.flex-item{
    box-sizing: border-box;
    width: calc(50% - 40px); /* 50% width for each item, not allowed to grow or shrink */
    border: solid 1px lightgray;
}




.base-main {
    /*margin-left: 4% !important;
    margin-right: 4% !important;
    max-width: 92%;*/
    padding: 1rem 3rem !important;
    position: relative;
}

.login100-more {
    /* width: 100%; */
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1;
}

.container-login100 {
    width: 100%;
    min-height: 100vh;
    display: -webkit-box;
    /* display: -webkit-flex; */
    display: -moz-box;
    display: -ms-flexbox;
    /* display: flex; */
    /* flex-wrap: wrap; */
    /* justify-content: center; */
    /* align-items: center; */
    /* background: #f2f2f2; */
}

.wrap-login100 {
    width: 100%;
    background: #fff;
    overflow: hidden;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    flex-direction: row-reverse;
}

.select2-selection {
    min-height: calc(3.5rem + 2px) !important;
}

.select2-selection__rendered {
    padding-top: 1.325rem !important;
    padding-bottom: .625rem !important;
}

.input-group .select2-container--bootstrap-5 .select2-selection {
    height: 0;
}

form {
    display: flex;
    flex-direction: row; /* Updated to row direction */
    flex-wrap: wrap; /* Allow items to wrap to the next line if needed */
    justify-content: space-between;
    width: 100%;
}

.form-floatingg {
    display: flex;
    flex-direction: column;
}

.form-floatingg > label {
    z-index: 1;
}

.form-floating > label {
    z-index: 1;
}

.form-select {
    padding-top: 1.625rem !important;
}

.btn-table {
    margin: .3rem;
    cursor: pointer;
}

.icn-table {
    font-size: 1rem;
    color: white;
}

    .icn-table:hover {
        font-size: 1rem;
        color: ghostwhite;
    }

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0 !important;
    margin-left: 0 !important;
    border: none !important;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button :hover {
    }


.bootstrap-select {
    width: 100% !important;
    display: inline !important;
}

    .bootstrap-select > .dropdown-toggle {
        background-color: transparent;
        border: 1px solid var(--bs-border-color) !important;
        width: 100%;
        min-height: calc(3.5rem + 2px) !important;
        max-height: calc(3.5rem + 2px) !important;
        margin: 0 !important;
    }

    .bootstrap-select .filter-option {
        padding-top: 1.325rem !important;
    }

.dropdown-menu {
    width: 100% !important;
}

    .dropdown-menu > li.selected {
        opacity: 0.9;
        background-color: #FEA98C;
        transition: 0.3s;
    }

.selected:hover {
    background-color: #FEA98C;
    opacity: 1;
}

.selected:active {
    opacity: 0.9;
    background-color: #FEA98C;
    transition: 0.3s;
}

table {
    border: solid 1px lightgray;
    border-radius: 4px;
}

.tab-pane {
    margin-top: 1rem !important;
}

.tab-content {
    padding: 1rem !important;
    border: solid 1px lightgray;
    border-top: none;
    margin-bottom: 1rem;
}

.form-label{
    margin-bottom: 0 !important;
    font-size: 0.85rem;
    opacity: 0.65;
}

.currency-wrap {
    position: relative;
}

.currency-code {
    position: absolute;
    left: 8px;
    top: 10px;
}

.text-currency {
    padding: 10px 20px;
    border: solid 1px #ccc;
    border-radius: 5px;
}

.light {
    font-weight: 300;
}

#map {
    height: 400px;
    width: 100%;
}
/* Optional: Style for the output text */
#info {
    margin-top: 10px;
}

#results {
    width: 30%;
    float: left;
    padding: 10px;
    box-sizing: border-box;
}

#search-box {
    width: 100%;
    margin-bottom: 10px;
}

#places-select {
    width: 100%;
    padding: 5px;
}

.pac-container {
    position: absolute !important;
    left: 20px !important;
    top: 90px !important;
}


.plus, .minus {
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 16px 16px !important;
    width: 16px;
    height: 16px;
    margin: 0px 4px 0px 4px;
    /*vertical-align: middle;*/
}

.plus {
    background-image: url(https://img.icons8.com/color/48/000000/plus.png);
}

.minus {
    background-image: url(https://img.icons8.com/color/48/000000/minus.png);
}

.ul-tree {
    list-style: none;
    padding: 0px 0px 0px 16px;
}

    .ul-tree inner_ul li:before {
        content: "├";
        font-size: 18px;
        margin-left: -11px;
        margin-top: -5px;
        vertical-align: middle;
        float: left;
        width: 8px;
        color: #41424e;
    }

    .ul-tree .inner_ul li:last-child:before {
        content: "└";
    }

.inner_ul {
    padding: 0px 0px 0px 16px;
}

#treeview-container {
    height: 450px;
    overflow-y: scroll;
}

@media only screen and (min-width: 600px) {
    .img-device {
        display: none;
    }

    .img-div {
        display: none;
    }

    .btn-search-ut {
        width: 100%;
    }
}

@media only screen and (min-width: 768px) {
    .img-device {
        display: none;
    }

    .img-div {
        display: none;
    }

    .btn-search-ut {
        width: 100%;
    }
}

@media only screen and (min-width: 992px) {
    .img-device {
        display:block;
    }

    .img-div {
        display: block;
    }

    .btn-search-ut {
        width: 100%;
    }
}

@media only screen and (min-width: 1200px) {
    .img-device {
        display: block;
    }

    .img-div {
        display: block;
    }

    .btn-search-ut{
        width:75%;
    }
}