body {
  background-image: url("./assets/img/3017083.jpg");
  color: #333333;
  margin-top: 4rem;
}

h1, h2, h3, h4, h5, h6 {
  color: #444444;
}

p {
    font-size: 1.1rem!important;
}

ul {
  margin: 0;
}

.bg-steel {
  background-color: var(--main-color);
}

.site-header .navbar-nav .nav-link {
  color: #cbd5db;
}

.site-header .navbar-nav .nav-link:hover {
  color: #ffffff;
}

.site-header .navbar-nav .nav-link.active {
  font-weight: 500;
}

.content-section {
  background: #ffffff;
  padding: 10px 20px;
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin-bottom: 20px;
}

.article-title {
  color: #444444;
}

a.article-title:hover {
  color: #428bca;
  text-decoration: none;
}

.article-content {
  white-space: pre-line;
}

.article-img {
  height: 65px;
  width: 65px;
  margin-right: 16px;
}

.article-metadata {
  padding-bottom: 1px;
  margin-bottom: 4px;
  border-bottom: 1px solid #e3e3e3
}

.article-metadata a:hover {
  color: #333;
  text-decoration: none;
}

.article-svg {
  width: 25px;
  height: 25px;
  vertical-align: middle;
}

.account-img {
  height: 125px;
  width: 125px;
  margin-right: 20px;
  margin-bottom: 16px;
}

.account-heading {
  font-size: 2.5rem;
}

.keep-right {
  text-align: right
}

.li-el{
    height: 30px!important;
    overflow: hidden!important;
}

.black-link{
    color: #444!important;
    text-decoration: none!important;
}

.black{
    color: #444!important;
}


.vertical-center{
    vertical-align: middle!important;
}

.no-padding{
    padding: 0px!important;
}

.borderless{
    border: none !important;
    border-top: none !important;
}

.col-container {
    display: table!important; /* Make the container element behave like a table */
    width: 100%!important; /* Set full-width to expand the whole page */
}

.col-container-element{
    display: table-cell!important; /* Make elements inside the container behave like table cells */
}

.place-top-right{
    position: relative;
}

.graph-box{
    border: none!important;
}

iframe {
    border: none!important;
    padding: 0;
    margin: 0;
}

#myChart{
    display: block;
    width: 100%!important;
    height: 100%!important;
}

.topright {
  position: relative;
  float: right;}

.shadow-below{
    -webkit-box-shadow: inset 0 8px 4px -4px rgba(0,0,0,.15)!important;
    -moz-box-shadow: inset 0 8px 4px -4px rgba(0,0,0,.15)!important;
    box-shadow: inset 0 8px 4px -4px rgba(0,0,0,.15)!important;
}

.white {
    color: white!important;
}

:root {
    --main-color: #5f788a!important; /* default value */
}

.some-class {
    color: var(--main-color);
}

.blue {
    /*color:blue*/
    /* color:var(--main-color)!important */
    color: var(--main-color);

}

.bg-blue {
    /*color:blue*/
    /* background-color:var(--main-color)!important */
    background-color: var(--main-color);
}

.green {
    color:green!important
}

.bg-green {
    background-color:green!important
}

.grey {
    color:#c5c5c5!important
}

.bg-grey {
    background-color:#c5c5c5!important
}

.red {
    /*color: #8a5f63!important*/
    color:red!important
}

.orange {
    color: #e76d26!important
}

.bg-orange {
    background-color: #e76d26!important
}

.black{
    color: #44444!important;
}

.light-green{
    color: #b8b69b!important;
}

.bg-red {
    /*color: #8a5f63!important*/
    background-color:red!important
}

.trans-center {
   position: absolute;
   left:0;
   /* vertically center the icon */
   transform: translateX(50%);
}
.trans-vertical-center {
  margin: 0;
  position: relative;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.trans-vertical-center-down {
  margin: 0;
  position: relative;
  top: -50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.table {
    border-collapse: separate;
    border-spacing: none;
}

.table tbody tr {
    border-top: 1px solid #dee2e6;
}

.table thead tr {
    border-top: none;
}
.table td, .table th{
    border-top: none;
}

.dataTables_filter{
    text-align: right!important;
}

.dataTables_filter label{
    text-align: left!important;
}

.clickable {
    cursor: pointer;
    text-decoration: none;
}

.clickable:hover {
  font-weight: 700;
  text-decoration: none;
}



.clean-button {
    /*width:115%; This hides the arrow icon */
    background-color:transparent!important;
    background-image:none!important;
    -webkit-appearance: none!important;
    border:none!important;
    box-shadow:none!important;
    padding:0.0em 0.3px 0.0em 0.0em!important;
    outline:none!important;
}

.top-layer {
    z-index: 999;
}

.our-bg-color{
    background-color: #f2f4f6;
}

.w-30 {
    width: 30%!important;
    }
.w-20 {
    width: 20%!important;
    }
.w-14 {
    width: 14.28%!important;
    }
.w-10 {
    width: 10%!important;
    }
.w-8-75 {
    width: 8.75%!important;
    }
.w-90 {
    width: 90%!important;
}


::-webkit-scrollbar {
  width: 8px;               /* width of the entire scrollbar */
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1; /* color of the tracking area */
  border: 2px solid #f1f1f1;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background-color: #c5c5c5;    /* color of the scroll thumb */
  border-radius: 5px;       /* roundness of the scroll thumb */
  border: 1px solid #c5c5c5;  /* creates padding around scroll thumb */
}

/*.btn-outline-blue{
    color: var(--main-color);
    background-color: transparent;
    background-image: none!important;
    -webkit-appearance: none!important;
    border: 1px!important;
    outline-color: var(--main-color)!important;
    box-shadow: none!important;
    padding:0.0em 0.3px 0.0em 0.0em!important;

}
*/

.btn-outline-blue{
    /* color: var(--main-color);
    border-color: var(--main-color); */
    
    color: var(--button-color);
    border-color: var(--button-color);
}

.btn-outline-blue-full{
    display: inline-block;
    font-weight: 400;
    /* color: var(--main-color);
    border-color: var(--main-color); */
    
    color: var(--button-color);
    border-color: var(--button-color);
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition-property: color, background-color, border-color, box-shadow;
    transition-duration: 0.15s, 0.15s, 0.15s, 0.15s;
    transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
    transition-delay: 0s, 0s, 0s, 0s;
}

.nav-tabs{
    border: none;
}

.nav-item{
    font-size: 1.25rem!important;
    font-weight: 400!important;
}

.nav-item:hover{
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
    border-color: #fff!important;
    border: 0px solid!important;
    background-color: #fff!important;
    border-radius: 0.25rem!important;
}

.nav-item.active{
    /*box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
    border-color: #fff!important;
    border: 1px solid #dee2e6!important;
    background-color: #fff!important;
    border-radius: 0.25rem!important;*/
    box-shadow: 0 0 0 0!important;
    border-color: #fff!important;
    border: 0px solid #dee2e6!important;
    background-color: #fff0!important;
    color: #444444!important;
    font-size: 1.75rem!important;
    font-weight: 500!important;
    line-height: 1;
}


.dropdown-menu{
    max-height: 80vh;
    overflow-y: auto;
    z-index: 9999;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
}


.tooltip-inner {
    max-width: 200px!important;
    padding: 0.25rem 0.5rem!important;
    color: var(--main-color)!important;
    text-align: center!important;
    font-weight: bold;
    background-color: #fff!important;
    border-color: var(--main-color)!important;
    border-width: 3px!important;
    border-radius: 0.25rem!important;
    box-shadow: .12rem .125rem .25rem rgba(0,0,0,.325)!important;
}

.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {
    border-top-color: var(--main-color) !important;
}


.btn-info {
    background-color: var(--button-color)!important;
    border-color: var(--button-color)!important;
}

.btn-outline-info:hover {
    color: #fff!important;
    background-color: var(--button-color)!important;
    border-color: var(--button-color)!important;
    // box-shadow: 0 0 0 0.2rem rgb(95 120 138)!important;
    box-shadow: 0 0 0 0.2rem var(--button-color)!important;
    z-index: 2;
}

.btn-outline-info.active {
    color: #fff!important;
    background-color: var(--button-color)!important;
    border-color: var(--button-color)!important;
}

.btn-outline-info.active > h4 {
    color: #fff!important;
}

.btn-outline-info:hover > h4 {
    color: #fff!important;
}

.btn-outline-info > h4 {
    color: var(--button-color)!important;
}

.btn-outline-info.active:focus {
    // box-shadow: 0 0 0 0 rgb(95 120 138)!important;
    box-shadow: 0 0 0 0 var(--button-color)!important;
}




.btn-outline-info {
    color: var(--button-color)!important;
    border-color: var(--button-color)!important;
}

.btn-info:hover {
    color: #fff!important;
    background-color: var(--button-color)!important;
    border-color: var(--button-color)!important;
}

.table-head-img {
    width: 60px!important;
}

.page-item.active .page-link {
    color:#fff!important;
    background-color: var(--main-color)!important;
    border-color: var(--main-color)!important;
}

.page-link {
    color: var(--main-color)!important;
}

.dot {
    border-radius: 50%;
}

.highlight-value {
    border-radius: 50%;
    width: 23px;
    height: 23px;
    position: relative;
}

.highlight-value-content-sn {
    padding-left:7px;
    top:-1px;
    position: absolute;
    color:white;
}

.highlight-value-content-mn {
    padding-left:2.5px;
    top:-1px;
    position: absolute;
    color:white;
}

.zero-value {
    padding-left:7px;

}

.bullet {
      position: relative;
      padding-left: 20px;
    }
.bullet::before {
  content: '•';
  position: absolute;
  left: 0;
  font-size: 1.5em;
  line-height: 1;
}

.modal-dialog{
    width:50vw!important;
    max-width:50vw!important;
    margin:auto!important;
}


.dismiss-announc-btn{
    padding: 0.25rem 0.25rem!important;

}
.dismiss-announc-btn:hover{
    opacity: 0.5!important;
    color: inherit!important;
}

.deal-icon{
    font-size: 4em;
    color: var(--main-color)!important;
}
.modal-backdrop {
    width: 100%;
    height: 100%;
}

 

.dt-sortable-column{
    cursor: pointer;
    color:var(--main-color)!important ;
}

.pill-element {
    font-weight: 600;
    color: white;
    border-radius: 1em;
    padding-left: 0.75em!important;
    padding-right: 0.75em!important;
    padding-bottom: 0.1em!important;
    padding-top: 0!important;
    display: inline-block;
    margin-bottom: 0.2em;
}

.shadow-sm {
    box-shadow: 0 .25rem .5rem rgba(0,0,0,.125)!important;
}

.rounded {
    border-radius: 0.5rem!important;
}

.btn {
    border-radius: 0.25rem!important;
}

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

.flex-grow-1 {
  flex-grow: 1;
}

.table-w-fixed {
    table-layout: fixed;
}

.scrollable-table {
    display: block!important;
    width: 100%;
    /* overflow-y: scroll; */
    /* height: 200px;  adjust this to your needs */
}

.scrollable-table thead {
    position: sticky;
    top: 0;
    background-color: white; /* or your desired header background color */
    z-index: 1;
}

.scrollable-table tbody {
    position: relative;
    z-index: 0;
}

.scrollable {
    overflow: auto;
}

.btn-success {
    background-color: green!important;
}

.first-picture-column {
    width: 65px !important;
}

.image-stack {
    position: relative;
    z-index: 1;
}

.image-stack .stacked-img {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2;
}

.shadow-sm-highlight {
        box-shadow: 0 .25rem .5rem rgba(0,0,0,.25)!important;
}

a:hover {
  color: currentColor; /* Keeps the hover color the same as the current color */
}

.text-color {
    color: var(--text-color)!important;
}

.icon-color {
    color: var(--icon-color)!important;
}

.main-color {
    color: var(--main-color)!important;
}

.prompt-textarea {
    width: 100%;
    max-height: 400px; /* Adjust as needed */
    border: 1px solid #ced4da;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: normal;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border-radius: .25rem;
    overflow-y: auto;
    white-space: pre-wrap; /* Preserve whitespace */
    word-wrap: break-word; /* Prevent long words from overflowing */
}

.highlight-orange {
    color: #e76d26;
}

.nav-link {
    padding: 6px 0.75rem;
}

::-webkit-file-upload-button:hover {
    color: #fff!important;
    background-color: var(--button-color)!important;
    border-color: var(--button-color)!important;
    // box-shadow: 0 0 0 0.2rem rgb(95 120 138)!important;
    box-shadow: 0 0 0 0.2rem var(--button-color)!important;
    z-index: 2;
    border-color: var(--button-color)!important;
    border-radius: 0.25rem!important;
    padding: 6px 0.75rem;
}

::-webkit-file-upload-button {
    color: var(--button-color)!important;
    background-color: rgb(0 0 0 / 0%)!important;
    border-color: var(--button-color)!important;
    border-radius: 0.25rem!important;
    padding: 6px 0.75rem;

}

.form-control {
    border: 1px solid #5f788a;
}


.border-grey {
    border-color: #ced4da!important;
}

.border-green {
    border-color: green!important;
}

.border-blue {
    border-color: #5f788a!important;
}

.border-text-color {
    border-color: var(--text-color)!important;
}

.border-icon-color {
    border-color: var(--icon-color)!important;
}

.border-main-color {
    border-color: var(--main-color)!important;
}

.border-black {
    border-color: #44444!important;
}

.border-orange {
    border-color: #e76d26!important;
}

.border-red {
    border-color: red!important;
}


.border-1 {
    border-width: 1px!important;
}

.border-2 {
    border-width: 2px!important;
}

.border-3 {
    border-width: 3px!important;
}

.border-4 {
    border-width: 4px!important;
}

.border-5 {
    border-width: 5px!important;
}

/* Hover effects with increasing intensity */
.hover-small {
    transition: all 0.3s;
}
.hover-small:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0,0,0,0.1)!important;
}

.hover-medium {
    transition: all 0.3s;
}
.hover-medium:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15)!important;
}

.hover-strong {
    transition: all 0.3s;
}

.hover-strong:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2)!important;
}

/* Modal stacking classes for layered modals */
.modal-lower {
    z-index: 1041 !important;
}

.modal-lower ~ .modal-backdrop.show {
    z-index: 1040 !important;
}

/* Any modal opened from a lower modal will be on top */
.modal:not(.modal-lower) {
    z-index: 1051 !important;
}

.modal:not(.modal-lower) ~ .modal-backdrop.show {
    z-index: 1050 !important;
}

.modal-content {
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15)!important;
    box-shadow: 0 .25rem .5rem rgba(0,0,0,.125)!important;
}

.pagination .page-item.active .page-link,
.pagination .active-page {
    background-color: var(--main-color) !important;
    border-color: var(--main-color) !important;
    color: white !important;
}


/* =====  GLOBAL TOGGLE FOR EVERY CHECKBOX  ===== */

/* 1️⃣  Hide the native square but keep it screen-reader/keyboard accessible */
.form-check-input[type="checkbox"] {
    position: absolute;
    opacity: 0;
  }

  .form-check{
    padding-left: 0px!important;

  }
  
  /* 2️⃣  Make the label the TRACK */
  .form-check-input[type="checkbox"] + .form-check-label {
    position: relative;
    padding-left: 48px;            /* room for a 40 × 20 track */
    cursor: pointer;
  }
  .form-check-input[type="checkbox"] + .form-check-label::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 40px;
    height: 20px;
    background: #c5c5c5;
    border-radius: 10px;
    transform: translateY(-50%);
    transition: background .2s ease;
  }
  
  /* 3️⃣  Add the THUMB */
  .form-check-input[type="checkbox"] + .form-check-label::after {
    content: "";
    position: absolute;
    left: 1px; top: 50%;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    /* box-shadow: 0 3px 8px rgba(0,0,0,.3); */
    transform: translateY(-50%);
    transition: transform .2s cubic-bezier(.8,.4,.3,1.25),
                background .15s;
  }
  
  /* 4️⃣  Checked state */
  .form-check-input[type="checkbox"]:checked + .form-check-label::before {
    background: color-mix(in srgb, var(--main-color), white 20%);
    border: 2px solid var(--main-color);
  }
  .form-check-input[type="checkbox"]:checked + .form-check-label::after {
    transform: translate(20px,-50%);
    /* background: color-mix(in srgb, var(--main-color), white 20%); */
    background: color-mix(in srgb, var(--main-color), white 0%);
  }
  
  /* 5️⃣  Optional focus ring */
  .form-check-input[type="checkbox"]:focus + .form-check-label::after {
    /* outline: 2px solid var(--main-color); */
    /* outline-offset: 2px; */
  }