/* Your styles here */
footer a {
    color: black;
}
body {
  padding-top: 60px;
  /* Margin bottom by footer height */
  margin-bottom: 60px;
  color: #ffffff;
  background-color: #043544 !important;
}
footer {
  position: relative; 
  z-index: 10; /* Sets a very high stacking order */
  margin-top: 20px;
  margin-bottom: 0px;
}
a {
  text-decoration: none;
}
footer a{
  color:#A0C213;
}
footer a:hover{
  opacity: 75%;
}
.col-centered{
  float: none;
  margin: 0 auto;
}
.navbar-login
{
  width: 305px;
  padding: 10px;
  padding-bottom: 0px;
}
.navbar-login-text
{
  color: #000000;
}
.navbar-login-session
{
  padding: 10px;
  padding-bottom: 0px;
  padding-top: 0px;
}
.icon-size
{
  font-size: 87px;
}
.forum{
	white-space: pre-line;
	display: block;
	unicode-bidi: embed;
}
pre.code {
	font-family:Verdana, Geneva, sans-serif;
	font-size:11px;
	width:100%;
	overflow:auto;
}
.footer {
  bottom: 0;
  width: 100%;
  padding: 10px;
  background-color: #f5f5f5;
}
.hidden {
  display:none;
  visibility:hidden;
}
legend {
  opacity: 0.6;
  font-size: 12px;
}
.dot {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  display: inline-block;
}
.comment-box {
    margin-top: 10px !important;
}
.comment-box img {
    width: 50px;
    height: 50px;
}
.comment-box .media-left {
    padding-right: 4px;
    width: 65px;
}
.comment-box .media-body p {
    padding: 2px;
}
.comment-box .media-body .media p {
    margin-bottom: 0;
}
.comment-box .media-heading {
    padding: 7px 10px;
    position: relative;
    margin-bottom: -1px;
}
.comment-box .media-heading:before {
    content: "";
    width: 12px;
    height: 12px;
    border-width: 1px 0 0 1px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position: absolute;
    top: 10px;
    left: -6px;
}
a.anchor {
    display: block;
    position: relative;
    top: -150px;
    visibility: hidden;
}

#myImg {
 border-radius: 5px;
 cursor: pointer;
 transition: 0.3s;
}
#myImg:hover {opacity: 0.5;}

.photo-gallery {
  color:#313437;
  background-color:#fff;
}

.photo-gallery p {
  color:#7d8285;
}

.photo-gallery h2 {
  font-weight:bold;
  margin-bottom:40px;
  padding-top:40px;
  color:inherit;
}

@media (max-width:767px) {
  .photo-gallery h2 {
    margin-bottom:25px;
    padding-top:25px;
    font-size:24px;
  }
}

.photo-gallery .intro {
  font-size:16px;
  max-width:500px;
  margin:0 auto 40px;
}

.photo-gallery .intro p {
  margin-bottom:0;
}

.photo-gallery .photos {
  padding-bottom:20px;
}

.photo-gallery .item {
  padding-bottom:30px;
}

.form-signin {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}
/* Fixed/sticky icon bar */
.icon-bar {
  position:fixed;
  text-align: center;
  bottom:0;
  width:100%;
  height:35px;
  background:#252525;
  margin: auto;
  z-index: 99 !important;
}

/* Style the icon bar links */
.icon-bar a {
  text-align: center;
  padding: 10px;
  transition: all 0.3s ease;
  font-size: 20px;
  color: #A0C213;
}

/* Style the social media icons with color, if you want */
.icon-bar a:hover {
  color: #ffffff;
}

.fsg-title {
  color: #A0C213 !important;
}

.fsg-underline {
  border-bottom: 2px solid #A0C213;
}

.scroll-down-button {
  position: fixed;
  bottom: 80px; /* Adjust the distance from the bottom as needed */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 999; /* Ensure it appears above other content */
  color:#FFFFFF;
  font-size: 35px;
}

.scroll-down-button:hover {
  color:#FFFFFF;
}

.circle {
    background: red;
    border-radius: 125px;
    color: white;
    height: 125px;
    font-weight: bold;
    width: 125px;
    display: table;
}
.circle p {
    vertical-align: middle;
    display: table-cell;
}

.callout {
    padding: 10px;
    border: 1px solid #eee;
    border-left-width: 5px;
    border-radius: 3px;
}

.mul-select{
    width: 100%;
}

.progress-players {
    position: relative;
    background-color: #043544 !important;
    border: 1px solid #A0C213;
}

.progress-bar-players {
  background-color: #09a2e371 !important;
}

.progress-players span {
    position: absolute;
    display: block;
    width: 100%;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    bottom: 8px;
    text-shadow: 1px 1px #000000;
}

.server-status-bar span {
    position: absolute;
    display: block;
    width: 100%;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    bottom: 8px;
    text-shadow: 1px 1px #000000;
}

.server-status-bar {
    position: relative;
    background-color: #043544 !important;
    border: 1px solid #A0C213;
}

.server-status-online {
  background-color: #09a2e371 !important;
}

.server-status-offline {
  background-color: #043544 !important;
}

.progress-bar-offline {
  background-color: #043544 !important;
}

.online {
  color: #00dd30;
  font-weight: bold;
}

.offline {
  color: #ff0000;
  font-weight: bold;
}

.card-body-icon {
  position: absolute;
  z-index: 0;
  top: -10px;
  right: 5px;
  font-size: 3rem;
  -webkit-transform: rotate(15deg);
  -ms-transform: rotate(15deg);
  transform: rotate(15deg);
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #212529;
  border-left: solid 1px #dee2e63f;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #043544;
  border-left: solid 1px #dee2e63f;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #043544; 
}

/* Style the Image Used to Trigger the Modal */
#serverEquipmentImage {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#serverEquipmentImage:hover {opacity: 0.7;}

/* The Modal (background) */
.modal-img {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content-img {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Add Animation - Zoom in the Modal */
.modal-content-img {
  animation-name: zoom-img;
  animation-duration: 0.6s;
}

@keyframes zoom-img {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* The Close Button */
.close-img {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close-img:hover,
.close-img:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content-img {
    width: 100%;
  }
}

#uptimeBar {
  width: 100%;
  height: 30px;
  background-color: #e0e0e0;
  position: relative;
}

#offlineSegment {
  background-color: #ff0000;
  height: 100%;
  position: absolute;
}

@keyframes bounce {
  0%       { bottom:5px; }
  25%, 75% { bottom:15px; }
  50%      { bottom:20px; }
  100%     {bottom:0;}
}

.home-icon {
  font-size: 75px;
  position: relative;
  animation:bounce 1s infinite;
}

a[name] {
  padding-top: 70px;
  margin-top: -70px;
  display: inline-block; /* required for webkit browsers */
}

.con-list {
  list-style-type: none;
  padding-inline-start: 4px;
}

a.con-links.active {
  border-left: solid 3px #A0C213;
  padding-left: 4px;
}

a.con-links {
  padding-left: 7px;
}

a.con-links:hover {
  border-left: solid 3px #7d8285;
  padding-left: 4px;
}

.switch-custom {
  width: 50px !important;
  height: 18px !important;
  margin-right: 5px;
}

.switch-custom:checked {
  background-color: var(--bs-success);
  border-color: var(--bs-border-color);
}

.check-custom:checked {
  background-color: var(--bs-success);
  border-color: var(--bs-border-color);
}



.tag {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    background-color: #ffffff23;
    color: white;
    border-radius: 0.25rem;
    margin: 2px;
}

.tag .remove-tag {
    margin-left: 0.5rem;
    font-weight: bold;
    cursor: pointer;
}


.tag button {
    background: none;
    border: none;
    color: white;
    margin-left: 0.5rem;
    cursor: pointer;
}

#tag-input {
    border: none;
    outline: none;
    background: transparent;
    flex-grow: 1;
    min-width: 120px; /* Optional: Adjust the minimum width as needed */
}

.icon-offset {
  position: absolute; /* or absolute, depending on your layout */
  top: -75px;
  z-index: 10; /* Ensure this is higher than other elements */
}

.discord-info {
  position: relative; /* Establish a reference point for absolute positioning */
}

.discord-desc {
  height: 125px;
  overflow-x: hidden; /* Hide horizontal scrollbar */
  overflow-y: auto; /* Add vertical scrollbar */
}

.discord-tags {
  height: 35px;
  overflow-x: hidden; /* Hide horizontal scrollbar */
  overflow-y: auto; /* Add vertical scrollbar */
}

.button-fs19 {
    background-image: url('https://www.farmsimgame.com/templates/fsg/assets/images/fs19.png');
    background-position: 5px -1px;
    background-repeat: no-repeat;
    background-size: 30px 30px;
    padding-left: 41px;
}

.button-fs22 {
    background-image: url('https://www.farmsimgame.com/templates/fsg/assets/images/fs22.png');
    background-position: 5px -1px;
    background-repeat: no-repeat;
    background-size: 30px 30px;
    padding-left: 41px;
}

.button-fs25 {
    background-image: url('https://www.farmsimgame.com/templates/fsg/assets/images/fs25.png');
    background-position: 5px -1px;
    background-repeat: no-repeat;
    background-size: 30px 30px;
    padding-left: 41px;
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 10%;
  left: 100%;
  margin-top: -1px;
}

.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}

.card-modImg {
  position: relative; /* Ensure the ribbon is positioned relative to the card */
  overflow: hidden; /* Prevent elements from overflowing outside the card */
}

.ribbon {
  position: absolute;
  top: 10px;
  left: -25px;
  background-color: #f6ff00; /* Default color */
  color: #fff;
  padding: 5px 10px;
  transform: rotate(-45deg);
  font-size: 12px;
  font-weight: bold;
  z-index: 10;
  width: 100px;
  text-align: center;
}

.ribbon-new {
  background-color: #28a745; /* Green for "New" */
}

.ribbon-updated {
  background-color: #07a4ff; /* Yellow for "Updated" */
}

.modhub-logo {
    position: absolute;
    top: 10px; /* Adjust the position to fine-tune the placement */
    right: 10px; /* Adjust the position to fine-tune the placement */
    width: 30px; /* Adjust the size of the ModHub logo */
    height: auto; /* Maintain aspect ratio */
    z-index: 10; /* Ensure it stays above other elements */
}

.comment-button {
  text-decoration: none;
  --bs-btn-padding-y: 0.0 rem;
  --bs-btn-padding-x: 0.0 rem;
  --bs-btn-font-size: 0.0 rem;
  --bs-btn-border-radius: var(--bs-border-radius-sm);
  font-size: small;
}

.notification {
  width: 100px;
  height: 100px;
  color: #ffffff;
  transition: color 1s ease; /* Transition effect */
}

.notification.blink {
  color: #A0C213;
}

.text-unread {
  color: #A0C213;
}

.dropdown-notification-text {
  color: var(--bs-dropdown-link-color);
}

.notification-small {
  font-size: xx-small;
}