:root {
  --a-link-color: #a31726;
  --a-link-hover-color: #c95562;

  --badge-popular-background-color: #ffe44d;

  --button-background-color: #a31726;
  --button-disabled-background-color: #c95562;

  --announcement-border-color: #c6b8df;

  --header-background-color: white;
  --body-background-color: #f5f5f5;
  --lightgray: lightgray;
  --white: white;
  --black: black;
  --light-link-color: #f0ecf9;

  --footer-background-color: #051340;
  --footer-text-color: white;


  --card-body-background-lighter: #EDE7FD;
  --card-body-background-light: #DACEFB;

  --articleTagsBorder: rgb(230, 230, 230); /* This is a lighter color */
  --articleTitleWrapperBorder: #f0f0f0;

  --headerImageQuickActionBorder: #aa9cbf;
  --quickActionMenuBackgroundColor: #051340;

  --pluginDivBorder: #dee2e6;
  --pluginDivWrapperBackgroundColor: rgba(255, 255, 255, 0.68);
  --pluginDivWrapperBorder: rgba(0, 0, 0, 0.125);

  --bulletinboardRead: #c95562;
  --bulletinboardUnread: #212529;

  --nav-link-color: #000;

  --socialMediaFacebook: #3b5998;
  --socialMediaTwitter: #55acee;
  --socialMediaPinterest: #bd081c;
  --socialMediaInstagram: #3f729b;
  --socialMediaYoutube: #cd201f;
  --socialMediaURL: var(--a-link-color);

  --bulletin-board-new-topic-highlight: #90EE90;

  --bg-navbar: #e5e5e5;
}

/* ============ desktop view ============ */
@media all and (min-width: 992px) {
  .dropdownLarge {
    min-width: 400px;
  }
}
/* ============ desktop view .end// ============ */

/*
    Bootstrap
*/

@media (max-width: 639px) {
  .navbar-collapse {
    max-height: calc(100vh);
    overflow-y: scroll;
    overflow-x: hidden;
  }
}

@media (min-width: 676px) {
  .container-sm,
  .container {
    max-width: 640px;
  }

  .dropdown-menu {
    max-height: calc(100vh);
    overflow: scroll;
  }
}
@media (min-width: 768px) {
  .container-md,
  .container-sm,
  .container {
    max-width: 990px;
  }

  .dropdown-menu {
    max-height: calc(100vh);
    overflow: hidden;
  }
}
@media (min-width: 992px) {
  .container-lg,
  .container-md,
  .container-sm,
  .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container-xl,
  .container-lg,
  .container-md,
  .container-sm,
  .container {
    max-width: 1400px;
  }
}
@media (min-width: 1400px) {
  .container-xxl,
  .container-xl,
  .container-lg,
  .container-md,
  .container-sm,
  .container {
    max-width: 2850px;
  }
}

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

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

.accordion-button:not(.collapsed) {
  color: var(--a-link-hover-color);
  background-color: var(--light-link-color);
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
}

.accordion-item:first-of-type {
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;

  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

body {
  background-color: var(--body-background-color);
}

.btn-primary {
  color: #fff;
  background-color: var(--button-background-color);
  border-color: var(--announcement-border-color);
}

.btn-primary.active, .show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: var(--a-link-hover-color);
  border-color: var(--announcement-border-color);
}

.btn-primary:disabled, .btn-primary.disabled {
  color: #fff;
  background-color: var(--button-disabled-background-color);
  border-color: var(--announcement-border-color);
}

.btn-primary:hover {
  color: #fff;
  background-color: var(--a-link-hover-color);
  border-color: var(--announcement-border-color);
}

/*
.dropdown-menu li {

    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: solid 1px var(--lightgray);
}
*/

.dropdown-menu a {
  text-decoration: none;
}

.navbar {
  border-bottom: solid 1px var(--lightgray);
  background-color: var(--bg-navbar);
}

.navbar-light .navbar-nav .nav-link {
  color: #051340;
}

.navbar-logo {
  word-wrap: break-word; /* Ensures long words break onto the next line */
  overflow-wrap: break-word; /* Alternate for modern browsers */
  white-space: normal; /* Prevents text from staying on one line */
  width: 100%; /* Ensures the display is full width */
}

/* The logo that swivels down in the header after scrolling down */
.navbar-logo-image {
  width: 40px;
  /*border: solid 1px var(--lightgray);*/
}

.nav-link {
  color: var(--nav-link-color);
}

.row {
  margin-left: 0px;
  margin-right: 0px;
}

/*
    Custom
*/

.adminActionButton > .list-group-item {
  border-bottom-color: var(--white);
}

.alert-closing {
  color: #3e2868;
  background-color: #e9c3e4;
  border-color: #c6b8df;
}

.alignLeft {
  text-align: left !important;
}

.articleFaIcon {
  font-size: 18px;
}

.articleIcon {
  margin-top: 0px;
  font-size: 10px;
}

.articleTagsWrapper {
  border-top: solid 1px var(--articleTagsBorder);
}

.articleTitleWrapper {
  border-bottom: 1px solid var(--articleTitleWrapperBorder);
}

.articleRecomendedIcon {
  font-size: 300%;
}

.avatar {
  /* Center the content */
  align-items: center;
  display: flex;
  justify-content: center;

  /* Colors */
  background-color: #d1d5db;
  color: #fff;

  /* Rounded border */
  border-radius: 50%;
  height: 2rem;
  width: 2rem;
}

.bulletinBoardIconLarge {
  font-size: 50px;
}

#headerImage {
  width: 100%;
}

footer {
  background-color: var(--footer-background-color) !important;
  color: var(--footer-text-color) !important;
  text-align: center;
}

.footer  a {
  color: var(--footer-text-color);
  text-align: center;
}

.facebook:hover {
  color: var(--socialMediaFacebook); /* For modern browsers */
}

.twitter:hover {
  color: var(--socialMediaTwitter); /* For modern browsers */
}

.instagram:hover {
  color: var(--socialMediaInstagram); /* For modern browsers */
}

.youtube:hover {
  color: var(--socialMediaYoutube); /* For modern browsers */
}

.url:hover {
  color: var(--socialMediaURL); /* For modern browsers */
}

.header {
  background-color: var(--header-background-color);
}

.hourlyItem {
  overflow-y: hidden !important;
}

.page-item.active .page-link {
  z-index: 3;
  color: var(--white);
  background-color: var(--a-link-color);
  border-color: var(--a-link-color);
}

.page-link {
  color: var(--black);
}

.page-link:focus {
  color: var(--a-link-color);
}

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

/*
.pluginDivWrapper {
  background-color: var(--pluginDivWrapperBackgroundColor);
  border: 1px solid var(--pluginDivWrapperBorder);
  border-radius: 0.25rem;
}
*/

#quickActionWrapper {
  /*border-top: 1px solid var(--headerImageQuickActionBorder);*/
  /*border-bottom: 1px solid var(--headerImageQuickActionBorder);*/
  /*background-color: var(--quickActionMenuBackgroundColor);*/
  /*background: linear-gradient(90deg, rgba(5,19,64,1) 0%, rgba(78,92,137,1) 50%, rgba(5,19,64,1) 100%);*/
}

.quickActionItem > a {
  color: white;
  /*color: var(--bs-body-color);*/
  text-decoration: none;
}

/*
.feature {
  color: white !important;
  /*background-color: #FF9900 !important;
  background-color: inherit !important;
}
*/

.quickActionItem > a:hover {
  color: var(--body-background-color);
  text-decoration: none;
}

.quickActionItem:hover {
  transform: scale(1.1) !important;
  transition: all ease 500ms;
}

.pageScrollSpyButtons > .list-group-item{
  border-bottom: 1px solid rgba(0, 0, 0, .125);
  border-top: none;
  border-left: none;
  border-right: none;
}

.pluginItem {
  border-bottom: solid 1px var(--pluginDivBorder);
}

.readMore {
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 4px;
  padding-bottom: 4px;
  border: solid 1px var(--a-link-color);
  border-radius: 4px;
}

.table > :not(:first-child) {
  border-top: none;
}

time.icon
{
  font-size: 1em; /* change icon size */
  display: block;
  position: relative;
  width: 7em;
  height: auto;
  background-color: #fff;
  margin: 2em auto;
  border-radius: 0.6em;
  box-shadow: 0 1px 0 #bdbdbd, 0 2px 0 #fff, 0 3px 0 #bdbdbd, 0 4px 0 #fff, 0 5px 0 #bdbdbd, 0 0 0 1px #bdbdbd;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transform: rotate(0deg) skewY(0deg);
  -webkit-transform-origin: 50% 10%;
  transform-origin: 50% 10%;
}

time.icon *
{
  display: block;
  width: 100%;
  font-size: 1em;
  font-weight: bold;
  font-style: normal;
  text-align: center;
}

time.icon strong
{
  position: absolute;
  top: 0;
  padding: 0.4em 0;
  color: #fff;
  background-color: var(--a-link-hover-color);
  border-bottom: 1px var(--light-link-color);
  box-shadow: 0 2px 0 var(--light-link-color);
}

time.icon em
{
  position: absolute;
  bottom: 0.3em;
  color: var(--bulletinboardUnread);
}

time.icon span
{
  width: 100%;
  font-size: 2.8em;
  letter-spacing: -0.05em;
  padding-top: 0.8em;
  color: #2f2f2f;
}

@-webkit-keyframes swing {
  0%   { -webkit-transform: rotate(0deg)  skewY(0deg); }
  20%  { -webkit-transform: rotate(12deg) skewY(4deg); }
  60%  { -webkit-transform: rotate(-9deg) skewY(-3deg); }
  80%  { -webkit-transform: rotate(6deg)  skewY(-2deg); }
  100% { -webkit-transform: rotate(0deg)  skewY(0deg); }
}

@keyframes swing {
  0%   { transform: rotate(0deg)  skewY(0deg); }
  20%  { transform: rotate(12deg) skewY(4deg); }
  60%  { transform: rotate(-9deg) skewY(-3deg); }
  80%  { transform: rotate(6deg)  skewY(-2deg); }
  100% { transform: rotate(0deg)  skewY(0deg); }
}

/* PLUGIN Bulletin Board */
.pluginStyleBulletinBoard {
  background-color: var(--white);
}

.pluginStyleBulletinBoard a.unread {
  color: var(--bulletinboardRead);
}

.pluginStyleBulletinBoard a.read {
  color: var(--bulletinboardUnread);
}

/*
    Custom Objects
*/
.badge-popular {
  background-color: var(--badge-popular-background-color);
}

.bgSpecial1 {
  background-color: var(--a-link-hover-color);
  color: var(--white) !important;
}

.bgSpecial2 {
    background-color: var(--card-body-background-lighter);
}

.bgSpecial2 button {
    background-color: var(--white);
}

.buttonWhite {
    background-color: var(--white);
}

.checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #7ac142;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: #fff;
  stroke-miterlimit: 10;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  box-shadow: inset 0px 0px 0px #7ac142;
  animation: fill 0.4s ease-in-out 0.4s forwards,
    scale 0.3s ease-in-out 0.9s both;
}
.checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

/* Style for the button */
#return-to-top {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: rgba(0, 0, 0, 0.6); /* Slight transparency */
  color: white;
  font-size: 24px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  width: 40px;
  height: 40px;
}

.placeholder-clear-background {
  background-color: transparent !important;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes scale {
  0%,
  100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}
@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 30px #7ac142;
  }
}

/* Full Calendar CSS Overrides */
@media (max-width: 900px) {
  .fc-dayGridMonth-button,
  .fc-timeGridWeek-button,
  .fc-timeGridWeek-button,
  .fc-timeGridDay-button
   {
      display: none;
  }

  /* Adjust styles for smaller screens (e.g., mobile) */
  .fc-toolbar.fc-header-toolbar {
      flex-wrap: wrap;
  }

  .fc-toolbar-chunk {
      flex: 100%;
      max-width: 100%;
  }

  .fc-toolbar-chunk:nth-child(2) {
      text-align: center; /* Align the third chunk to the right */
      margin-top: 8px;
      margin-bottom: 8px;
  }

  .fc-toolbar-chunk:nth-child(3) {
      text-align: right; /* Align the third chunk to the right */
  }
}

/*
  Footer Placard Layout
*/

.placardContainer  {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.placardButton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px; /* Adjust the width */
  height: 50px; /* Adjust the height */
  background-color: #3498db;
  margin: -5px; /* Adjust the margin */
  transform: rotate(45deg);
  position: relative;
  overflow: hidden;
  transition: background-color 0.3s ease-in-out;
}

.placardIcon {
  transform: rotate(-45deg);
  font-size: 2rem;
}

.placardButton:hover {
  background-color: rgba(255, 255, 255, 0.5); /* Transparent white */
}

.placardButton:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0); /* Transparent white */
  transform: scale(0);
  transform-origin: 50% 50%;
  transition: transform 0.3s ease-in-out;
}

.placardButton:nth-child(even) {
  margin-top: 36px; /* Adjust this value based on your button size and spacing */
}

.placardButton.facebook {
  color: white !important;
  background-color: #3b5998; /* Facebook color */
  border: solid 1px #3b5998;
}

.placardButton.twitter {
  color: white !important;
  background-color: #1da1f2; /* Twitter color */
  border: solid 1px #1da1f2;
}

.placardButton.twitter-x {
  color: white !important;
  background-color: #000000; /* Twitter color */
  border: solid 1px #000000;
}

.placardButton.youtube {
  color: white !important;
  background-color: #ff0000; /* YouTube color */
  border: solid 1px #ff0000;
}

.placardButton.instagram {
  color: white !important;
  background-color: #e4405f; /* Instagram color */
  border: solid 1px #e4405f;
}

.placardButton.website {
  color: white !important;
  background-color: #333; /* Website color */
  border: solid 1px #333;
}

.placardButton.rss {
  color: white !important;
  background-color: #FF9900; /* Website color */
  border: solid 1px #FF9900;
}


.placardButton.facebook:hover {
  background-color: white;
  color: #3b5998; /* Facebook color */
  border: solid 1px #3b5998;
}

.placardButton.twitter:hover {
  background-color: white;
  color: #1da1f2; /* Twitter color */
  border: solid 1px #1da1f2;
}   

.placardButton.twitter-x:hover {
  background-color: white;
  color: #000000; /* Twitter color */
  border: solid 1px #000000;
}

.placardButton.youtube:hover {
  background-color: white;
  color: #ff0000; /* YouTube color */
  border: solid 1px #ff0000;
}

.placardButton.instagram:hover {
  background-color: white;
  color: #e4405f; /* Instagram color */
  border: solid 1px #e4405f;
}

.placardButton.website:hover {
  background-color: white;
  color: #333; /* Website color */
  border: solid 1px #333;
}

.placardButton.rss:hover {
  background-color: white;
  color: #FF9900; /* Website color */
  border: solid 1px #FF9900;
}

/*
  Hide Google Captcha
*/

.grecaptcha-badge { 
  margin-bottom: 70px; 
}

/*
    Start process timeline
*/
:root {
    --color-timeline-default: #B9C3D2;
    --color-step-completed: #456D7D;
    --color-checkmark-completed: #fff;
    --color-in-progress: #487D45;
    --color-label-default: var(--color-timeline-default);
    --color-label-completed: var(--color-step-completed);
    --color-label-loading: var(--color-in-progress);
    --color-icon-completed: var(--color-step-completed);
    --color-icon-default: var(--color-timeline-default);
}

.toggle {
    transform: scale(0.8);
    position: absolute;
    bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    max-width: 140px;
}

.toggle span {
    margin: 0 0.5rem;
}

.toggle input[type=checkbox] {
    height: 0;
    width: 0;
    visibility: hidden;
}

.toggle input[type=checkbox]:checked+label {
    background: #13CB8F;
}

.toggle input[type=checkbox]:checked+label:after {
    left: calc(100% - 2px);
    transform: translateX(-100%);
}

.toggle label {
    cursor: pointer;
    width: 75px;
    height: 34px;
    background: #D2D3D8;
    display: block;
    border-radius: 40px;
    position: relative;
}

.toggle label:after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 30px;
    height: 30px;
    background: #fff;
    border-radius: 40px;
    transition: 0.3s;
}

.progress-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 200ms ease;
    background: var(--background-modal-color);
    height: 220px;
    min-width: 320px;
    flex-grow: 1;
}

.progress-container .steps-container {
    padding: 40px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-container .steps-container .step {
    z-index: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 200ms ease;
    flex-grow: 0;
    height: 15px;
    width: 15px;
    border: 4px solid var(--color-timeline-default);
    border-radius: 50%;
}

.progress-container .steps-container .step .preloader,
body .progress-container .steps-container .step svg {
    display: none;
}

.progress-container .steps-container .step.completed {
    width: 18px;
    height: 18px;
    background: var(--color-step-completed);
    border: none;
}

.progress-container .steps-container .step.completed svg {
    transition: all 200ms ease;
    display: block;
    height: 10px;
    width: 10px;
    fill: var(--color-checkmark-completed);
}

.progress-container .steps-container .step.in-progress {
    width: 18px;
    height: 18px;
    background: var(--color-in-progress);
    border: none;
    animation-name: pulse-color;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
    animation-timing-function: ease;
}

.progress-container .steps-container .step.in-progress-completed {
    width: 18px;
    height: 18px;
    background: var(--color-in-progress);
    border: none;
}

.progress-container .steps-container .step.in-progress .preloader {
    display: block;
    height: 10px;
    width: 10px;
    border: 2px solid #fff;
    border-radius: 50%;
    border-left-color: transparent;
    animation-name: spin;
    animation-duration: 2000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.progress-container .steps-container .step .label {
    position: absolute;
    top: 30px;
    filter: none;
    z-index: 2000;
    color: var(--color-label-default);
    transition: all 200ms ease;
    font-weight: 700;
}

.progress-container .steps-container .step .label.completed {
    color: var(--color-label-completed);
}

body .progress-container .steps-container .step .label.loading {
    color: var(--color-label-loading);
}

.progress-container .steps-container .step .icon {
    font-size: 40px;
    position: absolute;
    top: -60px;
    color: var(--color-icon-default);
    transition: color 200ms ease;
}

.progress-container .steps-container .step .icon.completed {
    color: var(--color-icon-completed);
}

.progress-container .steps-container .step .icon.in-progress {
    color: var(--color-in-progress);
}

.progress-container .steps-container .line {
    transition: all 200ms ease;
    height: 2px;
    flex-grow: 1;
    max-width: 120px;
    background: var(--color-timeline-default);
}

.progress-container .steps-container .line.completed {
    background: var(--color-step-completed);
}

.progress-container .steps-container .line.next-step-uncomplete {
    background: linear-gradient(to right, var(--color-step-completed), var(--color-timeline-default));
}

.progress-container .steps-container .line.next-step-in-progress {
    background: linear-gradient(to right, var(--color-step-completed), var(--color-in-progress));
}

.progress-container .steps-container .line.prev-step-in-progress {
    background: linear-gradient(to right, var(--color-in-progress), var(--color-timeline-default));
}

@keyframes pulse-color {
    from {
        background-color: var(--color-timeline-default);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/*
    End process timeline
*/