:root {
    --retro-red: #ee592e;
    --retro-orange: #ec8a0f;
    --retro-yellow: #fec240;
    --retro-green: #7C9A41;
    --retro-lightblue:#84d0c4;
    --retro-slate: #446c93;
    --retro-purple:#682868;
    --retro-tan:#efd9a7;
    --retro-brown:#492b2d;
    --retro-white:#fafafa;
    --retro-gray:#8f99a2;
    --cubs-blue:#0e3386;
    --cubs-red:#cc3433;
    --cubs-pblue: #6CACE4;
}

.bg-retro-red { background-color: var(--retro-red); }
.bg-retro-orange { background-color: var(--retro-orange); }
.bg-retro-yellow { background-color: var(--retro-yellow); }
.bg-retro-green { background-color: var(--retro-green); }
.bg-retro-lightblue { background-color: var(--retro-lightblue); }
.bg-retro-slate{ background-color: var(--retro-slate); }
.bg-retro-purple { background-color: var(--retro-purple);}
.bg-retro-tan { background-color: var(--retro-tan); }
.bg-retro-brown { background-color: var(--retro-brown); }
.bg-off-white {background-color: var(--retro-white);}
.bg-retro-gray {background-color: var(--retro-gray);}
.bg-cubs-blue {background-color: var(--cubs-blue);}
.bg-cubs-pblue {background-color: var(--cubs-pblue);}
.bg-cubs-red {background-color: var(--cubs-red);}

.text-retro-red { color: var(--retro-red); }
.text-retro-orange { color: var(--retro-orange); }
.text-retro-yellow { color: var(--retro-yellow); }
.text-retro-green { color: var(--retro-green); }
.text-retro-lightblue { color: var(--retro-lightblue); }
.text-retro-slate{ color: var(--retro-slate); }
.text-retro-purple { color: var(--retro-purple);}
.text-retro-tan { color: var(--retro-tan); }
.text-retro-brown { color: var(--retro-brown); }
.text-off-white { color: var(--retro-white);}
.text-retro-gray { color: var(--retro-gray);}
.text-cubs-red { color: var(--cubs-red);}
.text-cubs-blue { color: var(--cubs-blue);}
.text-cubs-pblue { color: var(--cubs-pblue);}

.border-retro-red { border-color: var(--retro-red); }
.border-retro-orange { border-color: var(--retro-orange); }
.border-retro-yellow { border-color: var(--retro-yellow); }
.tborder-retro-green { border-color: var(--retro-green); }
.border-retro-lightblue { border-color: var(--retro-lightblue); }
.border-retro-slate{ border-color: var(--retro-slate); }
.tborder-retro-purple { border-color: var(--retro-purple);}
.border-retro-tan { border-color: var(--retro-tan); }
.border-retro-brown { border-color: var(--retro-brown); }
.border-off-white { border-color: var(--retro-white);}
.border-retro-gray { border-color: var(--retro-gray);}
.border-cubs-red { border-color: var(--cubs-red);}
.border-cubs-blue { border-color: var(--cubs-blue);}
.border-cubs-pblue { border-color: var(--cubs-pblue);}

.border-0 {border: None;}
.border-5 {border-style: solid; border-width: 5px;}
.border-4 {border-style: solid; border-width: 4px;}
.border-3 {border-style: solid; border-width: 3px;}
.border-2 {border-style: solid; border-width: 2px;}
.rounded-12 {border-radius:12px;}
.rounded-8 {border-radius:8px;}
.rounded-4 {border-radius:4px;}

.color-outline {
    --bg-color: white; /* Default background color */
    --text-color: black; /* Default text color */
    background-color: var(--bg-color);
    color: var(--text-color);
    border-color: var(--text-color);
    transition: all 0.3s ease; /* Smooth transition for hover effect */
    cursor: hand;
}

.reversible-hover {
    --bg-color: white; /* Default background color */
    --text-color: black; /* Default text color */
    background-color: var(--bg-color);
    color: var(--text-color);
    border-color: var(--text-color);
    transition: all 0.3s ease; /* Smooth transition for hover effect */
    cursor: hand;
}

.reversible-hover:hover {
    background-color: var(--text-color);
    color: var(--bg-color);
    border-color: var(--bg-color);
}

.bg-retro-red-v { --bg-color: var(--retro-red); }
.bg-retro-orange-v { --bg-color: var(--retro-orange); }
.bg-retro-yellow-v { --bg-color: var(--retro-yellow); }
.bg-retro-green-v { --bg-color: var(--retro-green); }
.bg-retro-lightblue-v { --bg-color: var(--retro-lightblue); }
.bg-retro-slate-v{ --bg-color: var(--retro-slate); }
.bg-retro-purple-v { --bg-color: var(--retro-purple);}
.bg-retro-tan-v { --bg-color: var(--retro-tan); }
.bg-retro-brown-v { --bg-color: var(--retro-brown); }
.bg-off-white-v {--bg-color: var(--retro-white);}
.bg-retro-gray-v {--bg-color: var(--retro-gray);}
.bg-cubs-red-v {--bg-color: var(--cubs-red);}
.bg-cubs-blue-v {--bg-color: var(--cubs-blue);}
.bg-cubs-pblue-v {--bg-color: var(--cubs-pblue);}

.text-retro-red-v { --text-color: var(--retro-red); }
.text-retro-orange-v { --text-color: var(--retro-orange); }
.text-retro-yellow-v { --text-color: var(--retro-yellow); }
.text-retro-green-v { --text-color: var(--retro-green); }
.text-retro-lightblue-v { --text-color: var(--retro-lightblue); }
.text-retro-slate-v{ --text-color: var(--retro-slate); }
.text-retro-purple-v { --text-color: var(--retro-purple);}
.text-retro-tan-v { --text-color: var(--retro-tan); }
.text-retro-brown-v { --text-color: var(--retro-brown); }
.text-off-white-v {--text-color: var(--retro-white);}
.text-retro-gray-v {--text-color: var(--retro-gray);}
.text-cubs-red-v {--text-color: var(--cubs-red);}
.text-cubs-blue-v {--text-color: var(--cubs-blue);}
.text-cubs-pblue-v {--text-color: var(--cubs-pblue);}

.text-white-shadow{
    text-shadow:
    -2px -2px 0 white,
     2px -2px 0 white,
    -2px  2px 0 white,
     2px  2px 0 white;
}

.border-retro-brown-1px {border: solid 1px #492b2d;}

.summernote-div {
    width: 100% !important;
}
.note-editor {
    width: 100% !important;
}


.full-width-divider {
    margin: 0 -2rem; /* Extends beyond modal body padding */
    /*border: 0; !* Remove default hr border *!*/
    /*border-top: 1px solid #dee2e6; !* Match Bootstrap modal divider style *!*/
}


/*.badge {*/
/*    font-size: 60%;*/
/*    font-weight: 400;*/
/*}*/


.sticky-alert {
  position: fixed;
  top: 0;
    width:auto;
  z-index: 9999;
}

.asteriskField {
    /*display: none;*/
    color:var(--cubs-red);
}

/*#paper-dropzone-div{*/
/*    height:50px;*/
/*}*/

/*#file-dropzone-div{*/
/*    height:50px;*/
/*}*/

/*.custom-control-label{*/
/*    color: #0c5460;*/
/*}*/

.dropzone{
    padding:0px;
    border:0px;
    background-color: transparent;
    min-height:130px;
}

.my-dropzone-style{
    border:dotted;
    border-radius:12px;
    border-color:#446c93;
    background-color:aliceblue;
}
.icon-file {
  color: #492b2d;
}

.icon-pdf {
  color: #446c93;
}
.icon-img {
  color: #7C9A41;
}
.icon-word {
  color: #4a7bc5;
}
.icon-video {
  color: #84d0c4;
}

.icon-ppt {
   color: #c01313;
}

.icon-xls {
   color: #608c1e;
}

.dz-remove {
  color: #ee592e;
}


.dz-file-name {
    font-size: 12px;
    color: #446c93;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow:hidden;
    max-width: 75px;
    text-align: center;
    padding:2px;
}

.dropzone .dz-preview.dz-image-preview {
  padding: 0;
  background: transparent;
    display: inline-block;
    text-align:center;
}

.dropzone .dz-preview.dz-file-preview {
    display: inline-block;
    text-align:center;
}

.modal-footer{
    padding:0em;
}

.my-modal-form{
    margin-block-end: 0em;
    padding-bottom: 0px;
}

.form-group {
    margin-bottom: 0rem;
}

.check{
    display: block;
    float: left;
    width: 25%;
    // width: 120px;
}
.checks:after {content: ""; display:table; clear:both;}
.checks {display:table;}
.checkcol {display:table-row;}
.checkcol label {display: table-cell;}

a.custom-card,
a.custom-card:hover {
  color: inherit;
}

.form-header{
    font-weight: bold;
    padding-bottom: 8px;
    font-size: 16pt;
}
.form-label{
    font-size: 10pt;
    color:#9e9e9e;
}

.big-btn {
    border-radius:12%;
    display: inline-block;
    font-size: 42px;
    padding:5%;
}

.btn-style{
    padding:8px;
    border-radius:4px;
    margin:2px;
}

.btn-style-s{
    padding:2px;
    padding-left:4px;
    padding-right:4px;
    border-radius:4px;
    margin:2px;
    float:left;
}

.btn-style-s-left{
    padding:2px;
    padding-left:4px;
    padding-right:4px;
    border-top-left-radius:4px;
    border-bottom-left-radius:4px;
    margin:4px;
    margin-right:0px;
    float:left;
}

.btn-style-s-right{
    padding:2px;
    padding-left:4px;
    padding-right:4px;
    border-top-right-radius:4px;
    border-bottom-right-radius:4px;
    margin:4px;
    margin-left:0px;
    float:left;
}

.rounded-btn{
    border-radius: 8px;
    padding: 8px;
}

/*.nav-tabs .nav-link.active {*/
/*    !*background-color: #fafafa;*!*/
/*    color:#666;*/
/*}*/

/*.nav-tabs .nav-link{*/
/*    color:#666;*/
/*    background-color: lightgray;*/
/*}*/

/*.tab-content {*/
/*    border-left: 1px solid #ddd;*/
/*    border-right: 1px solid #ddd;*/
/*}*/

/*.tab-content {*/
/*    background-color: #fafafa;*/
/*}*/

/*.nav-pills .nav-link.active a, .nav-pills .nav-link.active a:hover {*/
/*    background-color: #7C9A41;*/
/*    color:#fafafa;*/
/*}*/

/*.nav-pills .nav-link a, .nav-pills .nav-link a:hover {*/
/*    background-color: transparent;*/
/*    color:#7C9A41*/
/*}*/


.btn-black{
    background-color: #000000;
    color: #fafafa;
    border: solid 1px #000000;
}

.btn-gray{
    background-color: #8f99a2;
    color: #000000;
    border: solid 1px #8f99a2;
}

.btn-retro-yellow{
    background-color: #fec240 ;
    color: #492b2d !important;
    border: solid 1px #fec240;
}

.btn-off-white{
    background-color: #fafafa ;
    color: #492b2d !important;
    border: solid 1px #fafafa ;
}


.btn-retro-yellow-static{
    background-color: #fec240 ;
    color: #492b2d !important;
    border: solid 1px #fec240;
}

.btn-retro-tan{
    background-color: #efd9a7;
    color:#492b2d !important;
    border: solid 1px #efd9a7;
}
.btn-retro-green{
    background-color: #7C9A41;
    color:#fafafa !important;
    border: solid 1px #7C9A41;
}
.btn-retro-lightblue{
    background-color: #84d0c4;
    color:#492b2d !important;
    border: solid 1px #84d0c4;
}
.btn-retro-red{
    background-color: #ee592e;
    color:#fafafa !important;
    border: solid 1px #ee592e;
}

.btn-retro-red:hover{
    background-color: #fafafa;
    color:#ee592e !important;
    border: solid 1px #ee592e;
}

.btn-retro-red-static{
    background-color: #ee592e;
    color:#fafafa !important;
    border: solid 1px #ee592e;
}

.btn-retro-slate{
    background-color: #446c93 !important;
    color:#fafafa  !important;
    border: solid 1px #446c93 !important;
}

.btn-retro-slate-static{
    background-color: #446c93;
    color:#fafafa  !important;
    border: solid 1px #446c93;
}

.btn-retro-slate:hover {
    background-color: #fafafa !important;
    color: #446c93 !important;
    border: solid 1px #446c93 !important;
  }

.btn-retro-brown{
    background-color: #492b2d;
    color:#fec240 !important;
    border: solid 1px #492b2d;
}

.btn-retro-brown-static{
    background-color: #492b2d;
    color:#fec240 !important;
    border: solid 1px #492b2d;
}

.btn-retro-purple{
    background-color: #682868;
    color:#fec240 !important;
    border: solid 1px #682868;
}

.btn-retro-green2{
    background-color: #B4B990;
    color:#492b2d !important;
    border: solid 1px #B4B990;
}

.btn-retro-orange{
    background-color: #ee8c2a;
    color:#492b2d !important;
    border: solid 1px #ee8c2a;
}

.btn-retro-brown:hover {
    color:#492b2d !important;
    border: solid 2px #492b2d;
    background-color: #fafafa;
}

.btn-retro-yellow:hover {
    color:#492b2d !important;
    border: solid 2px #fec240;
    background-color: #fafafa;
}

.btn-retro-red-rev{
    background-color: #fafafa;
    color:#ee592e !important;
    border: solid 2px #ee592e;
}

.btn-retro-red-rev:hover{
    background-color: #ee592e;
    color:#fafafa !important;
    border: solid 2px #ee592e;
}

.btn-retro-brown-rev{
    background-color: #fafafa;
    color:#492b2d !important;
    border: solid 2px #492b2d;
}

.btn-retro-brown-rev:hover{
    background-color: #492b2d;
    color:#fafafa !important;
    border: solid 2px #492b2d;
}

.btn-retro-slate-rev{
    background-color: #fafafa;
    color:#446c93 !important;
    border: solid 2px #446c93;
}

.btn-retro-slate-rev:hover{
    background-color: #446c93;
    color:#fafafa !important;
    border: solid 2px #446c93;
}

.btn-like{
    padding:6px;
    border-radius:4px;
}

.btn-square {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  overflow: hidden;
  border-radius:50%;
}

.btn-content-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.card-header-retro-tan{
    background-color: #efd9a7;
    color:#492b2d;
    //background-color: #ee592e;
   // border-top: solid 1px #492b2d;
  //  border-left: solid 1px #492b2d;
 //  border-right: solid 1px #492b2d;
}
.card-retro-tan{
   // background-color: #efd9a7;
    color:#492b2d;
   // border-bottom: solid 1px #492b2d;
   // border-left: solid 1px #492b2d;
   // border-right: solid 1px #492b2d;
}

.cell-url{
  width: 300px;
  word-wrap: break-word;
   /*background: yellow;*/
  /* Just to keep text selection hightlight inside the table: */
  overflow: hidden;
}

.my_table{
  border-collapse: collapse;
  line-height:1.5rem;
  margin: 0 auto;
}

.mostly-customized-scrollbar::-webkit-scrollbar {
  border-radius: 0px;
  width: 25px;
  background-color: #666;
  //background-color: #7C9A41;
}

.mostly-customized-scrollbar::-webkit-scrollbar-track {
    border-radius: 0px;
    width:50px;
}

.mostly-customized-scrollbar::-webkit-scrollbar-thumb {
    border-radius: 25px;
    height: 50px;
    background-clip: padding-box;
    background-color: #fec240;
}

.mostly-customized-scrollbar::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}
.mostly-customized-scrollbar::-webkit-scrollbar-corner {
    background-color: transparent;
}

.list-group{
    max-height: 1600px;
    margin-bottom: 100px;
    overflow-y:scroll;
    -webkit-overflow-scrolling: touch;
}

.list-group-item.active {
    z-index: 2;
    color: #492b2d;
   // background-color: #efd9a7;
   // border-color: #efd9a7;
    background-color:#84d0c4;
    border-color: #84d0c4;
}

.altbadge {
  position: relative;
  text-align: center;
}

/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* Centered div */
.centered {
margin: auto;
width: 30%;
//border: 2px solid #492b2d;
//border-radius:8px;
padding: 5px;
}

/* 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%;
  /* Set the fixed height of the footer here */
  height: 50px;
  padding:15px;
}

.news-link-style{
    display:block; margin:6px; padding:6px; border-radius:4px; float:left
}

caption{
  color:#666;
    caption-side: top;
}

/*.custom-control-label {*/
/*    color: black !important;*/
/*}*/

.form-text-retro-green {
  color:#7C9A41;
}

.form-text-retro-red {
  color:#ee592e;
}

.form-text-retro-brown{
    color: #492b2d;
}

.form-text-gray{
    color: #666;
}

section {
  scroll-margin-top: 5rem;
}
html {
  scroll-padding-top: 5rem;
}

.my-table {
    width: 100%; /* Ensure the table spans the full width of its container */
    /*white-space: nowrap; !* Prevent text from wrapping to the next line *!*/
    overflow-x: auto; /* Add a horizontal scrollbar when content overflows */
}

.my-table-container {
    overflow-x: auto;
    max-width: 100%;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spinner-custom {
  border: 0.2em solid #f3f3f3; /* Light gray background color */
  border-top: 0.2em solid #3498db; /* Blue color for the spinner */
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  animation: spin 2s linear infinite;
}

.modal-dialog.modal-xlg {
  max-width: 1000px; /* or any size larger than modal-lg */
}


.text-justify-last-center {
  text-align: left;
  text-align-last: center; /* works in modern browsers */
}

.js-plotly-plot .modebar {
      top: 50px !important;
      right: 20px !important;
      left: auto !important;
      bottom: auto !important;
      flex-direction: column; /* ensure vertical layout */
    }