html { scroll-behavior: smooth; }

@media (width <= 1460px) {
    body{
        padding-left: 1.4rem;
        padding-right: 1.4rem;
    }

    #app{
        position: relative;
        left: -1.4rem;
        right: -1.4rem;
    }
}

#coe-perimeter a:not(.bg-primary):not([class^=bg-red]):not([class^=bg-blue]):not([class^=bg-green]):not([class^=bg-yellow]):not([class^=bg-black]){
    color: #BE0000;
    text-decoration: underline;
}


#coe-perimeter [class^="bg-red"] > a,
#coe-perimeter [class*=" bg-primary"] > a,
#coe-perimeter [class*=" bg-red"] > a,
#coe-perimeter [class^="bg-blue"] > a,
#coe-perimeter [class*=" bg-blue"] > a,
#coe-perimeter [class^="bg-green"] > a,
#coe-perimeter [class*=" bg-green"] > a,
#coe-perimeter [class^="bg-yellow"] > a,
#coe-perimeter [class*="bg-yellow"] > a,
#coe-perimeter [class^="bg-black"] > a,
#coe-perimeter [class*=" bg-black"] > a{
    color: white !important;
    text-decoration: none !important;
}

#coe-perimeter a:has(*)  {
    text-decoration: none !important;
}


#coe-perimeter [class^="bg-red"]:hover > a,
#coe-perimeter [class*=" bg-primary"]:hover > a,
#coe-perimeter [class*=" bg-red"]:hover > a,
#coe-perimeter [class*=" bg-blue"]:hover > a,
#coe-perimeter [class^=" bg-blue"]:hover > a,
#coe-perimeter [class*=" bg-green"]:hover > a,
#coe-perimeter [class^=" bg-green"]:hover > a,
#coe-perimeter [class*=" bg-yellow"]:hover > a,
#coe-perimeter [class^=" bg-yellow"]:hover > a,
#coe-perimeter [class*=" bg-black"]:hover > a,
#coe-perimeter [class^=" bg-black"]:hover > a{
    color: inherit !important;
}


/* Styles for all focusable elements */
:focus:not(summary) {
  outline: 2px solid #BE0000; /* A 2px solid blue outline */
  outline-offset: 2px; /* Adds 2px space between element and outline */
}

/* Specific example for buttons */
button:focus {
  /*outline: 3px dashed black;
  outline-offset: 5px;*/
}

#scrollToTopBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed position */
  bottom: 8px; /* Adjust as needed */
  right: 8px; /* Adjust as needed */
  z-index: 99; /* Ensure it's above other content */
  border: none;
  outline: none;
  background-color: #be0000; /* Example background color */
  color: white;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%; /* Make it round */
  font-size: 18px;
  transition: all 0.3s ease; /* Smooth transition for appearance/disappearance */
}

#scrollToTopBtn.show {
  display: block; /* Show when 'show' class is added */
  opacity: 1;
  transform: scale(1);
}


.grecaptcha-badge {
    right: 0 !important;
    left: 4px !important;
    display: block !important;
}