:root {
  --main-bg-color: #f8fafc;
  --main-text-color: #203e53;
  --main-dark-color: #254e70;
  --main-medium-color: #416f97;
  --main-link-color: #326287;
  --main-active-color: #e64857;

  --card-headers-bg-color: #fbfcff;
}

html
{
  font-size: 16px; /*default - to use with rem*/
}
header
{
  background-color: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  transition: background-color 0.3s ease;
}
.container
{
  width: 100%;
  max-width: 1280px;
  padding: 0 15px !important;
  margin: 0 auto;
}
.page-container {
  width: 100%;
  position: relative;
  min-height: 100vh;
  background-color: var(--main-bg-color);
  padding-top: 56px; /* to cancel header */
  padding-bottom: 42px;
}
.content-wrap {
  margin: 20px auto 358px;/* to cancel footer-navbar */
  max-width: 1800px;
  padding: 0 15px 20px 15px;
}
.content-full-width /* To cancel .content-wrap padding */
{
  max-width: none !important;
  margin-left: -70px !important;
  width: calc(100% + 140px);
}
@media (max-width: 992px)
{
  .content-wrap
  {
    padding-left: 0;
    padding-right: 0;
  }
  .content-wrap > .row > [class^="col"] {
    padding-left: 6px;
    padding-right: 6px;
  }
}
@media (max-width: 992px)
{

}
.navbar-wrap {
  margin-left: auto;
  margin-right: auto;
  max-width: 1800px;
  padding: 20px 35px;
}

body {
  overflow-y: scroll;
  font-family: 'Inter', sans-serif, Arial, Tahoma, Verdana;
  font-size: 16px;
  font-weight: 400;
  color: var(--main-text-color);
}
body.body-members
{
  font-size: 12px;
}
/*NAVBAR BEGIN*/
.navbar {
  width: 100%;
  background-color: white!important;
  border-bottom: 1px solid #f0f0f0;
}
@media (max-width: 991px) {
  .navbar-expand-lg .navbar-collapse
  {
    margin-top: 15px;
  }
}
#navbar-logo
{
  height: 30px;
}
#navbar-avatar
{
  width: 38px;
  margin-left: 50px;
}
#navbar-avatar img
{
  width: 38px;
  height: 38px;
}
.navbar-dark
{
  padding: .4rem 0 !important;
  background-color: var(--main-text-color) !important;
}
.navbar-dark .nav-item .nav-link>i
{
  font-size: 18px;
  opacity: 0.7;
  color: white !important;
}
.navbar-dark .nav-item .nav-link>i:hover
{
  opacity: 1;
}

.navbar-light
{
  padding: 0 !important;
  background-color: var(--card-headers-bg-color) !important;
}
/*Navbar is not displayed below LG, so add padding only on large screen padding*/
@media (min-width: 992px){.navbar-light {padding: .3rem 0 !important;}}
.navbar-left
{
  padding: .2rem 0;
}
.navbar-light .nav-item .nav-link
{
  color: var(--main-link-color) !important;
  width: fit-content;
}
.navbar-light i
{
  margin-right: 10px;
}
.site-logo
{
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  color: white;
  border-radius: var(--rounded);
}
.navbar-brand /*navbar brand logo*/
{
  padding: 3px 9px;
  margin-right: 150px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(184, 191, 202, 0.3);
}
.navbar-brand:hover {
  opacity: 0.9;
}
.navbar-brand i {
  font-size: 1.2rem;
  color: white;
}
.navbar-brand .logo-text {
  margin-left: 15px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--dark-color);
  letter-spacing: -0.5px;
}
.navbar-brand::after
{
  content: none !important;
}
.navbar-nav
{
  margin-left: auto;
  margin-right: 20px;
}
.navbar-header
{
  width: 100%;
  color: #FFFFFF;
}
.navbar-text
{
  width: 160px;
  color: #FFFFFF !important;
}
.nav-item
{
  margin-left: 30px;
  text-align: left;
}
.nav-link
{
  font-weight: bold !important;
  padding: 0.2rem !important;
  position: relative;
}
.navbar-avatar::after {
  content: none !important;
}
.navbar-light .nav-link:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--main-active-color);
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
  border-radius: 10px;
  opacity: 0.8;
}
.navbar-light .nav-link:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.navbar-light .navbar-nav .nav-link.active
{
  color: var(--main-active-color) !important;
}
.nav-link-active
{
  color: #ff6460 !important;
}

.nav-tabs>.nav-item
{
  color: var(--main-link-color);
  margin-left: 8px;
}
.nav-tabs>.nav-item:first-child
{
  margin-left: 0;
}

.nav-tabs .nav-link
{
  color: var(--main-link-color);
  background-color: #e8e8e8;
  padding-left: 10px !important;
  padding-right: 10px !important;
}
.nav-tabs .nav-link:hover
{
  color: var(--main-active-color);
}
.nav-tabs .nav-link.active
{
  background-color: white;
  color: var(--main-active-color);
}
.nav-link i
{
  margin-right: 12px;
}
nav.navbar .badge {
  position: absolute;
  top: -2px;
  right: -7px;
}
nav.navbar .dropdown-menu
{
  padding: 0.3rem;
}
/*NAVBAR END*/
.page-header
{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: var(--main-text-color);
}
.page-header > *
{
  margin-bottom: 8px;
}
.page-header h3
{
  line-height: 36px;
  margin-bottom: 0 !important;
  margin-left: 7px;
}
.page-header i
{
  margin-right: 15px;
}
h1 { font-size: 30px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
h4 { font-size: 16px; }
h1,h2,h3,h4,h5,h6 { font-weight: bold; margin-bottom: 0.8rem; }
.text-closed
{
  color: #0c5d21;
}
/*CARDS BEGIN*/
.card
{
  border: 1px solid rgba(0, 0, 0, 0.05);
  padding: 0px;
  background-color: white;
  border-radius: 12px;
  transition: var(--transition);
  box-shadow: var(--shadow);
  margin-bottom: 20px !important;;
}
body.body-members .card
{
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 8px;
}
.card-header
{
  font-size: 1.1rem;
  background-color: var(--card-headers-bg-color);
  padding: 0.7rem 1.25rem;
  font-weight: normal;
}
.card-header i
{
  margin-right: 15px;
}
.card-body
{
  padding: 0.7rem 1rem;
}
.card-header:first-child
{
  border-radius: 8px 8px 0 0;
}
.card-footer
{
  padding: 0.5rem 1.25rem;
}
/*CARDS END*/
/*FORMS BEGIN*/
.form-row
{
  margin-left: -5px !important;
  margin-right: -5px !important;
}
.form-row > .col, .form-row > [class*="col-"]
{
  padding-right: 5px;
  padding-left: 5px;
}
.form-control
{
  border: 1px solid #DFE6E9FF;
  font-size: 0.9rem;
  border-radius: 5px;
  height: calc(1.5em + .65rem + 3px);
  font-weight: 300;
}
.form-control:focus
{
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.form-check
{
  margin-left: 17px;
  margin-bottom: 0;
}
.form-check-input
{
  height: 1.2em;
  margin-top: .40em;
  margin-right: 1.1rem;
}
.form-switch
{
  margin-left: 10px;
}
.form-switch .form-check-input
{
  margin-right: 0.6rem;
  width: 2.4em;
}
.form-check-input[type="checkbox"]:invalid
{
  border: 1px solid salmon !important;
}
.form-check-input[type="checkbox"]:indeterminate
{
  background-color: #d1d1d1;
  border-color: #aaa;
}
.form-control::file-selector-button
{
  margin: -.375rem -.95rem;
  margin-inline-end: .95rem;
}
input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: searchfield-cancel-button;
}
::-webkit-input-placeholder {
  font-size: 0.9rem !important;
  font-family: 'Lato', sans-serif, Arial, Tahoma, Verdana !important;
  font-weight: 300 !important;
}
::-moz-placeholder {
  font-size: 0.9rem !important;
  font-family: 'Lato', sans-serif, Arial, Tahoma, Verdana !important;
  font-weight: 300 !important;
}
:-ms-input-placeholder {
  font-size: 0.9rem !important;
  font-family: 'Lato', sans-serif, Arial, Tahoma, Verdana !important;
  font-weight: 300 !important;
}
::placeholder {
  font-size: 0.9rem !important;
  font-family: 'Lato', sans-serif, Arial, Tahoma, Verdana !important;
  font-weight: 300 !important;
  opacity: 0.3 !important;
}
form label
{
  text-align: left;
}
/*required fields*/
.form-control.is-invalid, .was-validated .form-control:invalid
{
  transition: none!important;
}
/*input:optional
{
  padding-left: 14px;
  padding-right: 14px;
}
input[type="radio"]:optional
{
  padding-left: 7px;
  padding-right: 7px;
}
input[type="radio"]:required
{
  padding-left: 7px;
  padding-right: 7px;
  border: 1px solid rgba(0,0,0,.25)!important;
}
input[type="radio"]:invalid
{
  padding-left: 7px;
  padding-right: 7px;
  border: 1px solid salmon!important;
}
input[type="checkbox"]:optional
{
  padding-left: 7px;
  padding-right: 7px;
}
input:required {
  border-left: 3px solid #ADDBB7;
  border-right: 3px solid #ADDBB7;
}
input:invalid {
  border-left: 3px solid salmon;
  border-right: 3px solid salmon;
}
textarea:optional
{
  padding-left: 14px;
  padding-right: 14px;
}
textarea:required {
  border-left: 3px solid #ADDBB7;
  border-right: 3px solid #ADDBB7;
}
textarea:invalid {
  border-left: 3px solid salmon;
  border-right: 3px solid salmon;
}
select:optional
{
 padding-left: 14px;
  padding-right: 14px;
}
select:required {
  border-left: 3px solid #ADDBB7;
  border-right: 3px solid #ADDBB7;
}
select:invalid {
  border-left: 3px solid salmon;
  border-right: 3px solid salmon;
}
select option:disabled {
  color: #fa807270;
}*/
form small
{
  color: #868e96;
  margin-left: 3px;
}
.input-group .btn
{
  line-height: 1.3rem;
}
.input-group.input-btn-right .form-control {
  border-radius: 8px 0 0 8px!important;
}
.input-group.input-btn-right .btn {
  border-radius: 0 8px 8px 0!important;;
}
.input-group.input-btn-left .btn {
  border-radius: 8px 0 0 8px!important;;
}
.input-group.input-btn-left .form-control {
  border-radius: 0 8px 8px 0!important;;
}
.input-group-text
{
  border-radius: 3px;
  padding: .5rem;
}
.form-group small
{
  text-align: left;
}
/*Bootstrap Switch*/
.custom-control-input:checked ~ .custom-control-label::before
{
  border-color: var(--secondary) ;
  background-color: var(--success);
}
hr
{
  margin: 0.7rem 0;
  opacity: 1;
}
/*FORMS END*/
/*BUTTONS BEGIN*/
.btn
{
  display: inline-flex;
  border: 1px solid;
  box-shadow: 0 0 2px rgba(0,0,0,.075);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 0.90rem;
}
body#home .btn
{
  gap: 0.5rem;
  padding: 0.6rem 1.5rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 4px 8px rgba(184, 191, 202, 0.3);
}
.btn:hover
{

}
.btn-light
{
  background-color: white;
  border: 1px solid #d9d9d9;
  color: var(--main-link-color);
}
.btn-light:hover
{
  background-color: #fbfbfb;
  color: var(--main-text-color);
}
.btn-outline-light
{
  color: var(--main-link-color);
}
.btn-light .text-light
{
  color: #e1e1e1 !important;
}
.btn-danger
{
  border: 1px solid #b92b39;
}
.btn-info
{
  color: white;
  border: 1px solid #5ebfce;
}
.btn-outline-info:hover
{
  color: white;
}
.btn-warning
{
  background-color: #ffbf00;
  color: white;
  border-color: #fdc51f;
}
.btn-warning:hover
{
  background-color: #ffbf00;
  color: white;
}
.btn-outline-warning:hover
{
  color: white;
}
.btn-info:hover
{
  color: white;
}
.btn-info:focus-visible
{
  background-color: #1796a9;
  color: white;
}
.btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active, .show > .btn-light.dropdown-toggle
{
  box-shadow: none;
  -webkit-box-shadow: none;
}
.btn-success
{
  border: 1px solid #318444;
}
.btn-primary
{
  border: 1px solid #264c68;
}
.btn-primary:hover
{
  border: 1px solid #264c68
}
.btn-block
{
  display: block;
  width: 100%;
}
.btn-block>i
{
  margin-right: 10px;
}
.btn.disabled
{
  pointer-events: none;
}
/*For dropdown menus at the right side of tables*/
/*todo check if this doesn't affect top navbar on smaller screens*/
.dropdown-menu
{
  font-size: 0.9rem;
  padding: 0.2rem 0;
}
.dropdown-item
{
  color: var(--main-text-color);
}
.dropdown-item i
{
  margin-right: 15px;
}
.dropdown-divider{
  margin: 3px 0;
}
/*BUTTONS END*/
/*TABLES BEGIN*/
thead
{
  background-color: var(--card-headers-bg-color);
}

.table
{
  margin-bottom: 0;
  border-bottom-left-radius: 8px;
}
.table td, .table th
{
  vertical-align: middle !important;
  padding: 0.25rem 0.65rem;
  height: 35px;
  color: var(--main-text-color);
}
tr>:first-child
{
  padding-left: 1rem;
}
table tr:last-child td:first-child
{
  border-bottom-left-radius: 8px;
}
table tr:last-child td:last-child
{
 border-bottom-right-radius: 8px;
}
.table .btn, .card-header .btn
{
  padding: 0.55rem 0.55rem;
  border-radius: 4px;
}
.avatar
{
  background-color: #EEE;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 36px; height: 36px;
  float: left;
  border-radius: 5px;
}
/*TABLES END*/
label
{
  cursor: pointer;
  font-size: 0.9rem;
  margin-bottom: 0.3rem;
  color: var(--main-medium-color);
}

p > a
{
  color: #ff6460;
  padding: .25em .4em
}


a
{
  cursor: pointer;
  color: var(--main-link-color);
  font-weight: bold;
  text-decoration: none; /* no underline */
;
}
a:hover
{
  color:var(--main-active-color);
  text-decoration: none;
}
a:focus
{
  text-decoration: none;
}
a.disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.3 !important;
}
.row
{
  margin-left: 0;
  margin-right: 0;
}
button>a
{
  width: 100%;
  display: inline-block;
}

.badge
{
  padding: 8px;
  border-radius: 3px;
}
.badge-light
{
  color: var(--main-text-color);
}
.badge-danger
{
  background-color: var(--error-color);
}
.badge-info
{
  background-color: var(--secondary-color);
}
.badge-secondary
{
  background-color: var(--text-light);
}

#footer {
  position: absolute;
  width: 100%;
  bottom: 0;
  background: #222;
  padding: 25px 0;
  height: 420px;
}
body.body-members #footer
{
  height: 60px;
}
body.body-guests #footer
{
  height: 70px;
}
#footer .row
{
  padding: 0 3rem;
}
#footer p
{
  color: #6c757d;
  margin: 0;
  font-size: 0.9em;
}
.grecaptcha-badge
{
  bottom: 40px !important;
  margin-bottom: 20px;
  z-index: 8000;
}
.alert
{
  border-radius: 0 6px 6px 0;
  border-left-width: 4px;
  padding: .75rem 1.25rem !important;
  text-align: justify;
  background-color: #f8fafc;
}
.alert-title
{
}
.alert-title i
{
  margin-right: 10px;
}
.alert-content
{
  font-size: 0.9rem;
  margin-bottom: 10px;
}
.alert-dismissible .btn-close
{
  top: 7px;
  right: 7px;
  padding: 0.7rem;
  background-position: right .75rem top+12px;
}
.alert-secondary p
{
  color: #626262!important;
}
.alert-info p
{
  color: #055160!important;
}
pre
{

  background-color: #eaeaea;
  border: 1px solid #b8b7b7;
  padding: 10px;
  margin:15px 0;
  border-radius: 5px;
  box-shadow: rgba(0,0,0,0.1) 1px 1px 4px inset;
  border-left: 12px solid #68c3d1;
}

.modal-footer > * {
  margin: 0;
}

.signature-pad
{
  height: 160px;
  cursor: pointer;
  padding: 0;
}

/*AUTOCOMPLETE SUGGESTIONS BEGIN*/
.twitter-typeahead
{
  display: block !important;
}
.tt-menu
{
  position: absolute;
  top: 100%;
  left: 0;
  float: left;
  min-width: 160px;
  padding: 5px;
  margin: 2px 0 0;
  list-style: none;
  font-size: 14px;
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
  cursor: pointer;
  max-height: 200px; /* Set the maximum height for the dropdown */
  overflow-y: auto; /* Enable vertical scrolling */
  overflow-x: hidden; /* Prevent horizontal scrolling */
  border: 1px solid #ddd; /* Optional: Add a border */
  z-index: 1000; /* Ensure it stays on top */
  background-color: #fff; /* Optional: Ensure a white background */
}
.tt-hint
{
  opacity: 0.45!important;
}
.tt-suggestion {
  display: block;
  padding: 3px 20px;
  clear: both;
  line-height: 1.428571429;
  color: #626262;
  white-space: nowrap;
}
.tt-suggestion:hover
{
  background-color: #E0E0E6;
  color: #252424;
}
.tt-suggestion:active
{
  background-color: #33b35a!important;
}
.tt-input, .tt-hint, .tt-suggestion
{
  font-weight: normal;
  font-size: 0.9rem;
}
/*AUTOCOMPLETE SUGGESTIONS END*/
/* TOAST MESSAGES */
.toast
{
  width: 400px;
  margin-bottom: 4px;
  border: 1px solid grey;
}
.toast-header
{
  color: #393939;
}
/* Base state (visible toast) */
.toast.fade.show {
  opacity: 1;
  transform: translateY(0)!important; /* Default position */
  transition: opacity 0.2s linear, transform 0.2s ease-out !important;
}
/* During the showing or hiding process */
.toast.fade.showing {
  opacity: 0; /* Fade out */
  transform: translateY(-20px)!important; /* Slide up */
}
/*HOME PAGE*/
body#home #home
{
  padding: 10rem 1rem 6rem;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.05) 0%, rgba(0, 0, 0, 0) 70%);
}
body#home h1
{
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -1px;
}
body#home h2
{
  font-size: clamp(1.8rem, 4vw, 2.5rem)
}
body#home .card
{
  padding: 2.5rem 2rem;
  background-color: white;
  border-radius: var(--rounded);
  transition: var(--transition);
}
body#home .card:hover
{
  transform: translateY(-10px);
  box-shadow:  0 10px 20px rgba(0, 0, 0, 0.1);
  border-color: rgba(37, 99, 235, 0.2);
}
.section-title {
  text-align: center;
  margin-bottom: 4rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.section-title h2
{
  display: inline-block;
  position: relative;
}
.section-title h2::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
  border-radius: 2px;
}
.section-title p {
  font-size: clamp(1rem, 2vw, 1.1rem);
  line-height: 1.7;
}

.cursor-default
{
  cursor: default;
}