.castle-shields {
  color: grey;
  /* Default color */
  text-decoration: none;
  /* Remove underline */
}

.castle-shields:hover {
  color: white !important;
  /* Color on hover */
}

.castle-shields:active {
  color: white;
  /* Color when active (e.g., clicked) */
}

/* Start Modal Styles */

.modal-login {
  color: #636363;
  width: 350px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 60px;
  /* Add padding to make space for the avatar */
}

.modal-content {
  padding: 20px;
  border-radius: 5px;
  border: none;
}

.modal-footer {
  background: #ecf0f1;
  border-color: #dee4e7;
  text-align: center;
  border-radius: 5px;
  font-size: 13px;
  display: flex;
  /* Add this line */
  justify-content: center;
  /* Add this line */
}

.modal-footer a {
  color: #999;
  text-decoration: none;
  /* Remove underline */
  margin: 0 10px;
  /* Add margin for spacing */
}

.modal-footer a:hover {
  color: #015fc9;
  /* Change color on hover */
}


.modal-login .avatar {
  width: 95px;
  height: 95px;
  border-radius: 50%;
  background: #015fc9;
  padding: 15px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: -60px;
  /* Half of avatar height */
  left: 50%;
  transform: translateX(-50%);
}

.modal-login .avatar img {
  width: 100%;
}

.modal-login .btn {
  color: #fff;
  border-radius: 4px;
  background: #015fc9;
  text-decoration: none;
  transition: all 0.4s;
  line-height: normal;
  border: none;
  width: 100%;
}

.modal-login .btn:hover,
.modal-login .btn:focus {
  background: #0DD3F1;
  outline: none;
  width: 100%;
}

.modal-login .form-group {
  margin-bottom: 20px;
  /* Adjust this value to increase or decrease spacing between fields */
}

.modal-login .close {
  position: absolute;
  top: 5px;
  /* Adjust the top position as needed */
  right: 5px;
  /* Adjust the right position as needed */
}

.modal-header {
  border-bottom: none;
  position: relative;
  padding-top: 50px;
  /* Adjust padding-bottom to move the title down more */
}

/* Style for header row */
.comparison-table-th {
  background-color: #636363;
  color: white;
  text-align: center;
  vertical-align: middle;
}

/* Logo style */
.comparison-table-logo {
  max-width: 62px;
  max-height: 62px;
  width: auto;
  height: auto;
}

/* Responsive logo size */
@media (max-width: 62px) {
  .comparison-table-logo {
    max-width: 32px;
    max-height: 32px;
  }
}

/* Center and style the icon */
.comparison-table-check-icon {
  font-size: 2rem;
  /* Decreased size for smaller screens */
}

/* Center and style the table cells */
.comparison-table-td {
  display: flex;
  /* Make td a flex container */
  justify-content: center;
  /* Center content horizontally */
  align-items: center;
  /* Center content vertically */
  padding: 8px;
  /* Decreased padding for smaller screens */
  background-color: #0DD3F1;
  /* Background color for the entire cell */
}

/* Responsive styles */
@media screen and (max-width: 400px) {

  /* Adjust font sizes for smaller screens */
  .comparison-table-th,
  .comparison-table-td {
    font-size: 10px;
    /* Further decreased font size for smaller screens */
  }
}

/* Style for form fileds not displayed in orde to catch bad actors */
#LocalTimezone {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: -5000px;
}