/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Core ASL Colors                               */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
:root {
  --asl-green-lt: #73B51F;
  --asl-green-dk: #5c9118;
  --asl-yellow: #E0D721;
  --asl-bg-gradient: linear-gradient(#73B51F, #5c9118);
  --asl-navbar-border: var(--asl-green-dk);
  --asl-link: var(--asl-green-dk);
  --asl-link-hover: var(--asl-green-lt);

  /* bootstrap */
  --bs-primary: #73B51F !important;

}

.btn-primary {
  background-color: var(--asl-green-dk);
}

.btn-primary:hover {
  color: black;
  background-color: var(--asl-yellow);
}

a, a:visited, a:active, a:link {
  color: var(--asl-link);
}

a:hover {
  color: var(--asl-link-hover);
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Bootstrap Tables                              */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* backgrounds of active table are green */
.active>.page-link, .page-link.active {
  --bs-pagination-active-bg: var(--asl-green-dk);
  --bs-pagination-active-border-color: var(--asl-green-lt);
}

/* color of pagination numbers in bs tables not green */
.page-link {
  color: black !important;
}

/* colorize just the <th> contents of BS table */
.bootstrap-table .fixed-table-container .table tfoot th, .bootstrap-table .fixed-table-container .table thead th {
  background-color: var(--asl-green-dk);
  color: white;
  font-weight: bold;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Navbar                                        */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.asl-nav {
  background: var(--asl-bg-gradient);
  border-color: var(--asl-navbar-border);
  font-weight:600
}
.active>.page-link, .page-link.active
.asl-nav a, .asl-nav a:visited, .asl-nav a:active, .asl-nav a:link {
  color: black;
  font-size: 1.2em;
}

.asl-nav a:hover {
  color:  black;
}

.asl-nav .nav-item {
  padding-right: 5px;
}

.asl-nav .dropdown-menu {
  font-size: 0.8em;
  font-weight: normal;
  background: var(--asl-bg-gradient);
  border-color: black;
  --bs-dropdown-link-hover-bg: var(--asl-yellow);
  --bs-dropdown-link-active-bg: var(--asl-yellow);
  --bs-dropdown-link-hover-color: black;
  --bs-dropdown-link-active-color: black;
}

.asl-nav .dropdown-item a, .asl-nav .dropdown-item a:visited,
.asl-nav .dropdown-item a:active, .asl-nav .dropdown-item a:link {
  color: black;
  font-size: 0.8em;
  font-weight: normal;
}

.asl-nav .dropdown-item a:hover {
  color: black;
}

/* Pad <main> down to make space for navbar */
main > .container-fluid {
  padding: 100px 15px 0;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Footer                                        */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.asl-footer {
  color: white;
  background-color: black;

}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Modals                                        */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.asl-modal-header {
  background: var(--asl-bg-gradient);
  color: white;
  font-weight: 600;
}

.asl-modal-header .btn-close {
  filter: brightness(0) invert(1);
}

.btn-login {
  padding: 12px 20px;
  background: var(--asl-green-lt);
  border: none;
  border-radius: 6px;
  font-weight: 500;
  width: 100%;
  transition: all 0.3s ease;
}

.btn-login:hover {
    background: var(--asl-yellow);
    color: black;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 98, 204, 0.3);
}

.modal-reg-forgot {
  text-align: center;
  margin-top: 20px;
  font-size: 0.9rem;
}

.asl-modal-admin {
  background: white;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* <main> Content                                */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.asl-main-info-panel {
  border: 1px solid var(--asl-navbar-border);
  border-radius: 6px;
  margin-bottom: 10px;
}

.asl-main-info-panel-header {
  background: var(--asl-bg-gradient);
  color: white;
  font-size: 1.2em;
  font-weight: bold;

}

.asl-main-info-panel-contents {
  padding: 2px 5px 2px 5px;
}

.asl-index-help-support {
  border: 1px solid var(--asl-navbar-border);
  border-radius: 6px;
  margin-bottom: 5px;
  padding: 5px;
  text-align: justify;
}

.asl-helpbox {
  background: lightgrey;
  font-size: 0.9em;
  font-style: italic;
}

.asl-card .card-title {
  color: var(--asl-green-dk);
  font-size: 1.2em;
  font-weight: bold;
  text-align: center;

}

.asl-email-msg-sm {
  font-size: 0.8em;
}

/* map on /portal/server-form.inc.php */
#server-map {

  height: 400px;
}

.asl-pw-btn {
  --bs-btn-padding-y: .25rem;
  --bs-btn-padding-x: .5rem;
  --bs-btn-font-size: .75rem;
  font-size: .75rem;
}

.asl-node-pw-display {
  font-family: "Consolas", "Courier New", Courier, monospace;
  font-size: 1.2rem;
  letter-spacing: 0.05em; /* optional: improves readability */

}



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* <main> Content                                */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.asl-table thead {
  --bs-table-bg: var(--asl-green-lt);
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Edit User                                     */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.allstar-modal-header {
   background: linear-gradient(#73B51F, #5c9118);
   border-color: #5c9118;
   text-align: center;
}


.modal-footer {
  font-size: 1.2em;
 }

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* PAC used in gmap.js and servers-form.inc.php  */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#pac-input {
  background-color: #fff;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
  margin-left: 12px;
  margin-top: 10px;
  padding: 0 11px 0 13px;
  text-overflow: ellipsis;
  width: 400px;
}

#pac-input:focus {
  border-color: #4d90fe;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Used on nodes.php for password                */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.asl-node-passwd{
  visibility: hidden;
}

.asl-node-td:hover .asl-node-passwd {
  visibility: visible;
}