:root {
    /* Primary Colors */
    --primary-color: #b6cfdb; /* Light Blue */
    --secondary-color: #ffe7d7; /* Peach */
    --darker-primary-color: #455A64; /* Muted Teal */

    /* State Colors */
    --success-color: #8BC34A; /* Soft Green */
    --warning-color: #FFB74D; /* Warm Yellow */
    --error-color: #E57373; /* Muted Red */
    --contrasting-color: #FF7043; /* Warm Orange */
    
    /* Brand Colors */
    --gold-color: #fce64c;
    
    /* Link Colors */
    --primary-link-color: #007BFF; /* Bright Blue for primary state */
    --visited-link-color: #0056B3; /* Darker Blue for visited state */

	/* Text */
	--measure: 65ch;
	--text: clamp(1rem, .9rem + .5vw, 1.125rem);
	--text: clamp(1rem, .9rem + .5vw, 1.125rem);
}

*, ::after, ::before {
  border: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
margin: 0;
height: 100vh;
font-family: "acumin-pro", sans-serif;
font-weight: 400;
font-style: normal;
text-rendering: optimizeLegibility; 
}

html {
  font-size: 100%;
  /* font-size: calc(10px + 0.390625vw); */
  scroll-behavior: smooth;
  /*font-size: 16px;*/
}
a,
a:visited {
	/*color:#5A5A5A;*/
	color: unset;
}

a:hover {
	color:#455A64;
}

a:active {
	color:rgb(141, 180, 198);
}

a,
a:hover,
a:visited {
	text-decoration:none
}

h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
	margin-bottom: 20px;
	font-weight: 300;
}

h1 {
	font-family: "acumin-pro", sans-serif;
	font-style: normal;
	font-size: 3rem;
}

h2 {
	font-family: "acumin-pro", sans-serif;
	font-style: normal;
	font-size: 2rem;
	}

h2:target {
	background-color: #f0f8ff;
	transition: background-color 0.3s ease;
}

h3 {
	font-family: "acumin-pro", sans-serif;s
	font-style: normal;
	font-size: 1.2rem;
}

p {
	letter-spacing: .1rem;
	margin: 0 0 20px 0;
	line-height: 1.3;
	font-weight: 200;
}
strong {
  font-weight: 600;
}
blockquote {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.05), transparent);
    padding: 1rem;
    border-left: 3px solid yellowgreen;
    margin-bottom: 10px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}
blockquote blockquote {
  background:linear-gradient(to right, rgba(255, 255, 255, 1), transparent);
  padding: 1rem;
  border-left: 3px solid pink;
  margin-left: 10px;
}
blockquote i {
    color: yellowgreen;
    font-size: 1rem;
}
blockquote blockquote i {
    color: pink;
    font-size: 1rem;
}
blockquote i:first-child, blockquote blockquote i:first-child {
    margin: -0.75rem 0 0 6px;
    position: absolute;
}
blockquote i:last-child, blockquote blockquote i:last-child {
    margin: 0.75rem 0 .75rem 6px;
    position: absolute;
}
[class*="col-"] {
  float: left;
  padding: calc(13px + 0.390625vw);
  width: 100%;
}
[class*="col-"].no-pad {
    padding: unset;

}
[class*="col-"].left, [class*="col-"].right {
    display:none;
}
.col-1 {
    display:none;
}
.col-1.no_hide {
    display: block;
}
.row-maincontent {
  background-color: #F8F8F8;
  min-height: 75%;
  padding: 0 1rem; /* Testing */
}
[class*="row"]::after {
  content: "";
  clear: both;
  display: table;
}
/* Remove content from mobile view */
.hide, .hide-inline {
    display: none;
}
.show {
    display: block;
}
.body-wrapper {
    background-color: #F8F8F8;
}
.featured-container {
    position: relative;
    width: 100%;
    left: 0;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: overlay;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 1) 100%);
}
.preview-container {
    display: flex;
    border: 1px solid red;
    border-radius: 6px;
    overflow: hidden;
    overflow-x: auto;
    height: 300px;
    width: 100%;
}

.main-container {
    width: 100%;
    padding: 0;
    }
.main-container ol, li {
  list-style: none;
  text-align: left
}
.main-container li i {
    text-align: center;
}
.main_container.break {
    padding: 2rem 0;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
}
.row-maincontent.no-header {
  margin-top: 124px;
}
    .line {
        margin: 2rem 10rem;
        background-color: #F8F8F8;
        border-top: 1px solid rgba(0, 0, 0, 0.2);
        /*box-shadow: 0 9px 12px -5px rgba(0, 0, 0, 0.15);*/
    }
    
    .date-navigation {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding-bottom: .5rem;
    }
    
    .date-navigation-1, .date-navigation-2, .date-navigation-3 {
        float: left;
    }
    .date-navigation-1 a:hover, .date-navigation-2 a:hover, .date-navigation-3 a:hover {
        color: green;
    }
    .date-navigation-1 {
        text-align: right;
        width: calc(50% - 90px);
    }
    .date-navigation-2 {
        text-align: center;
        width: 180px;
    }
    .date-navigation-3 {
        text-align: left;
        width: calc(50% - 90px);
    }
    
.background-deep {
    background-color: rgb(235, 235, 235);
    box-shadow: 0 0 6px rgba(0,0,0,.25);
}
.line-img {
    max-width: calc(380px - 2rem);
    height: auto;
}
/* Forum Body */

/* Topic Icon Styling */
    .topic-icon i {
  font-size: 1.5rem;
}

.topic-stats dfn, .topic-description-inner dfn {
        color: rgb(173, 173, 173);
}

/* General Topic Description and Related Elements */

.note {
  border-left: 4px solid rgba(255, 255, 194, 1);
  box-shadow: 0 0 6px rgba(0,0,0, 0.25);
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  margin: 5px 0;
  padding: .5rem;
  width: 100%;
  background: linear-gradient(to right, rgba(255, 255, 194, .5) 70%, rgba(255, 255, 194, 1));
  font-size: 12px;
}
.note a {
  color: var(--primary-link-color);
}

.modal .note {
  max-width: 325px;
  margin-bottom: 1rem;

  opacity: 0;
  transform: translateY(-20px);

  animation: noteFadeIn .5s ease-out forwards;
}

@keyframes noteFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.topic-description-inner {
    line-height: 1.6154;
    padding: .5rem 0;
}


.topic-description {
    width: 70%;
}

.topic-icon {
  position: relative;
  color: #5A5A5A;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 70px;
  height: 30px;
  margin-left: 30px;
}

.topic-stats {
    line-height: 1.6154;
    padding: .5rem 0;
    text-align: right;
    width: 120px;
    min-width: 30px;
}

.topic-recent {
    line-height: 1rem;
    padding: .5rem 1rem;
    max-width: 20%;
}

/* Alignment and Layout of Topic Elements */
.topic-description-inner, 
.topic-icon, 
.topic-recent, 
.topic-stats {
    float: left;
}

/* Forum Background and Title Styling */
/*.forum-bg, .fora-bg h4, */
/*.forum-bg h4, */
/*.fora-bg h4 a, */
/*.forum-bg h4 a {*/
/*    color: #5A5A5A;*/
/*}*/

.topics-wrap {
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 0 6px rgba(0,0,0,.25);
    overflow: none;
    margin-right: calc(1.25rem + 50px); /* space for nav */
}

.forum-bg {
    border-width: 0px;
    list-style: none;
    width: 100%;
    /*background-color: #EAEAEA;*/
    /*box-shadow: 0 4px 10px rgba(0,0,0,.25);*/
}

.forum-bg h3 {
    display: block;
    font-weight: 600;
    line-height: 1rem;
    padding: 10px 1rem 0;
}

.forum-bg li {
    position: relative;
    overflow: hidden;
    background-color: #FFFFFF;
}

/* Styling for Lists in Topics Wrap and Forum */
.topics-wrap li {
    list-style: none;
    display: block;
    justify-content: left;
    border-bottom: 1px solid #ddd;
    align-items: center;
}

/*#region Topic Warning */
.warning_container {
  display: flex;
  justify-content: flex-end;
  padding: 8px 0 0 0;
  width: 100%;
}

.warning {
  position: relative;
  align-items: center;
  background: linear-gradient(to right, transparent 70%, rgba(255, 183, 77, 0.1));
  border-left: 4px solid rgba(255, 183, 77, 0.5);
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  font-weight: 200;
  width: 500px;
  box-shadow: 0 0 6px rgba(0,0,0, 0.25);
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  -webkit-user-select: none;
  /*cursor: pointer;*/
}

.warning::before {
  content: "\f071"; /* Unicode for Font Awesome exclamation-triangle */
  font-family: "Font Awesome 6 Free"; /* Or 5 if you're using FA5 */
  font-weight: 900;
  font-size: 1.2rem;
  color: var(--warning-color);
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  aria-hidden: true;
}

.warning-message {
  font-weight: 500;
}

.warning-meta {
  font-size: 0.75rem;
  color: #888;
}

.topics-wrap {
  color: #000;
}

.topics-wrap.submitting {
  opacity: 25%;
}
.topics-wrap.submitting .forum-row {
  background: linear-gradient(
    90deg,
    rgba(180, 180, 180, 1) 25%,
    rgba(240, 240, 240, 1) 50%,
    rgba(180, 180, 180, 1) 75%
    );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: loading-shimmer 1.5s infinite linear;
}
@keyframes loading-shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

.forum-row.unread .topic-description .topic-icon::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 12px;
  height: 12px;
  background-color: var(--error-color);
  border-radius: 50%;
  /*box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);*/
}

/*#endRegion */

/* Mobile Styling: Display Items Horizontally */
@media only screen and (max-width: 768px) {
    .forum-row .topic-description {
        display: block;
        margin: 0 !important;
        width: 100%;
    }
    .topic-description h4, 
    .topic-description .topic-stats,
    .topic-description p {
        display: inline-block;
        width: 100%;
        /*margin: 0 5px;*/
    }

    .topic-description-inner .details {
        margin-top: .5rem;
    }

    /* Specific Adjustments for Mobile */
    .topics-wrap .row ol, li {
        display: block;
        width: 100%;
    }
    
    .re-sm {
        display: inline-block !important;
    }
    
    .topic-stats {
        /*padding-right: 20px;*/
        margin-left: 50px; /* aligns to icon spacing */
        width: auto;
        text-align: left;
        
    } 
    .topic-recent {
    /*    width: 100%;  THIS ELEMENT IS HIDDEN FOR SIMPLIFIED DISPLAY */
        display: none;
    }
    .topic-description-inner {
    width: calc(95% - 50px); /* minus the icon width */
    }
    
    .topic-description-inner p {
        line-height: 1.6154;
    }
    .topic-icon {
        min-width: 30px;
        margin: 0 10px;
        padding-top: 30px;
    }
}

/* User Panel Table Settings */

/* Container style */
.table-container {
    overflow-x: auto; /* Enables horizontal scrolling if needed */
    max-width: 100%; /* Ensure the container takes full width */
}

/* Style for the table */
.u_panel_table {
    width: 100%;
    border-color: #EAEAEA;
    border-collapse: collapse; /* Ensure borders are collapsed for a cleaner look */
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.03);
    margin-bottom: 18px;
}

/* Style for the table header */
.u_panel_table thead {
    background-color: var(--primary-color);
    color: white;
}

/* Style for the table header row */
.u_panel_table thead tr {
    text-align: left;
}

/* Style for group headers */
.u_panel_table .table_group {
    background-color: rgb(237, 237, 237);
}
.u_panel_table .table_sub_group {
    border-top: 1px solid rgba(0, 0, 0, 0.10);
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
    padding: 1rem;
}

.table_group {
    padding: 18px;
}
.table_group:not(:first-child) {
    text-align: center;
}

.table_group strong {
  color: var(--darker-primary-color);
}

/* Style for table rows */
.u_panel_table tbody tr {
    background-color: white;
}

.u_panel_table tbody tr:target {
background-color: #f0f8ff;
transition: background-color 0.3s ease;
scroll-margin-top: 130px; /* Offset allows for header */
}

.u_panel_table tbody tr:target .table_mark::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 7px solid var(--success-color);
border-radius: 6px;
pointer-events: none;
box-sizing: border-box;
transition: transform 0.3s ease, border-color 0.3s ease;
animation: grow-shrink 2s infinite;
box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
}

@keyframes grow-shrink {
    0%, 100% {
        transform: scale(1); /* Normal size */
    }
    50% {
        transform: scale(1.05); /* Slightly larger */
    }
}
/* Additional style for table cells to ensure padding and border */
.u_panel_table td:first-child {
    padding-left: 18px;
}
.u_panel_table thead th {
  padding: 13px 18px;
}
/*General table settings */
.u_panel_table th:last-child {
  border-top-right-radius: 2px;
}
.u_panel_table th:first-child {
  border-top-left-radius: 2px;
}
.u_panel_table th {
  font-size: 1rem;
  font-weight: 600;
}
.u_panel_table {
    border-color: #EAEAEA;
}
.table_mark {
    text-align: center;
    min-width: 67px;
    position: relative;
}
.actions {
  display: block;
  margin-bottom: 18px;
  text-align: right;
  width: 100%;
}
.actions .button-multiple, .sc .button-multiple{
  float: left;
  display: flex;
  gap: 0;
}
.button-multiple a:first-child, .button-multiple button:first-child {
  border-radius: 2px 0 0 2px;
}
.button-multiple a:last-child, .button-multiple button:last-child {
  border-radius: 0 2px 2px 0;
}
.button-multiple a {
  background-color: #455A64;
  color: #FAFAFA;
}
.button-multiple a:hover {
  box-shadow: 0 2px 5px rgba(0,0,0,.42);
  z-index: 2;
}
.button-multiple a {
  cursor: pointer;
  display: inline-block;
  font-size: 1.2rem;
  height: 44px;
  line-height: 26px;
  padding: 9px 18px;
  position: relative;
  transition: background-color 0.18s cubic-bezier(0.6,0,0.1,1),box-shadow 0.18s cubic-bezier(0.6,0,0.1,1);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.sc .button, .sc a.button {
  margin-top: 1rem;
  margin-bottom: 4rem;
}
.disabled {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 50%;
}
.input {
  background-color: transparent;
  border-color: rgb(208, 208, 208);
  color: #5A5A5A;
  border-style: solid;
  border-width: 0 0 1px;
  font-size: 1rem;
  height: 2rem;
  max-width: 100%;
  transition: border-color 0.18s cubic-bezier(0.6,0,0.1,1),box-shadow 0.18s cubic-bezier(0.6,0,0.1,1);
}
.input:hover {
    border-color: #455A64;
}

.toggle-password {
    font-size: 1.2rem;
    color: rgba(0, 0, 0, 0.15);
    cursor: pointer;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-left: 1rem;
}

.toggle-password:hover {
    color: #455A64;
}

.button, a.button {
  background-color: var(--primary-color);
  color: #FAFAFA;
  border-radius: 2px;
  cursor: pointer;
  display: inline-block;
  font-size: 1.2rem;
  padding: 9px 18px;
  transition: background-color 0.18s cubic-bezier(0.6,0,0.1,1),box-shadow 0.18s cubic-bezier(0.6,0,0.1,1);
  height: 44px;
  line-height: 26px;
  width: 100%;
  text-align: center;
  font-weight: 400;
}
/* Completed button style */
.button.completed, a.button.completed {
  background-color: #ccc; /* Grayed out background */
  color: #888; /* Dimmed text color */
  cursor: not-allowed; /* Non-interactive cursor */
  pointer-events: none; /* Make button non-clickable */
  position: relative;
}

/* Button text specific style */
.button.completed .button-text {
  text-decoration: line-through; /* Strike through the text */
  
}
.button-text {
    text-align: left !important;
}

/* Icon style */
.button.completed::before, a.button.completed::before {
  content: '\f00c'; /* Font Awesome checkmark icon */
  font-family: "Font Awesome 5 Free"; /* Ensure Font Awesome is used */
  font-weight: 900; /* Use solid version of icon */
  color: var(--success-color); /* Icon color matches text */
  margin-right: 8px; /* Spacing between icon and text */
  text-decoration: none; /* Ensures icon has no strikethrough */
}

.fnav {
    width: 100%;
    display: flex;
    justify-content: end;
}
a.fnav_button {
  background-color: var(--secondary-color);
  border-radius: 2px;
  cursor: pointer;
  display: inline-block;
  padding: 9px 18px;
}

.button:hover, a.button:hover {
    box-shadow: 0 2px 5px rgba(0,0,0,.42);
    background-color: #455A64;
}


.main-wrapper {
  margin-bottom: 8px;
  display: block;
}

.main-wrapper .actions {
    margin-top: 1rem;
}

.main-wrapper label {
  display: inline-block;
  padding: 1rem 1rem 1rem 0;
  cursor: pointer;
  text-align: right;
}

.main-wrapper h2 {
    padding-bottom: 1rem;
}

.main-wrapper input, .main-wrapper select {
  display: inline-block;
  padding: 1rem 1rem 1rem 1rem;
  cursor: pointer;
  border-radius: 2px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.row .container {
    display: flex;
    margin-bottom: 10px;
    width: 100%;
}
.wrapper .button {
    width: 200px;
}

.centered-container, .left-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    width: 100%;
}
.centered-container {
    justify-content: center;
}
.left-container {
    justify-content: flex-start;
}
.right-container {
    justify-content: flex-end;
}
.centered-container h3 {
    margin-bottom: 0;
}
.centered-container label, .container label, .right-container label{
    /* mobile first styling */
    text-align: right;
    min-width: 150px;
    font-size: 16px;
}

.input-wrapper {
    width: min(325px,80vw);
    display: grid;
    align-items: center;
    position: relative;
    flex: 1; /*mobile first styling */
    margin-bottom: 10px;
}
.nav-container .input-wrapper {
    width: 100%;
    float: left;
    margin-bottom: 0px;
}
.nav-container .input-wrapper input {
    border-radius: 0;
    min-height: 25px;
    font-size: 16px;
    border-top: 0.5px solid rgba(0, 0, 0, 0.25);
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.25);
}
.main-container .input-wrapper input:focus {
  border-color: var(--primary-color);
  border-width: 1.25px;
}

.placeholder {
    width: max-content;
    background-color: transparent;
    margin-left: 1rem;
    color: rgba(0, 0, 0, 0.54);
    transition: transform 0.5s;
    position: absolute;
}

.input-wrapper input:focus ~ .placeholder,
.input-wrapper input:not(:placeholder-shown) ~ .placeholder {
  transform: translateY(-1.5rem) scale(0.75);
  padding: 0 0.25rem;
  color: rgba(0, 0, 0, 0.54);
  background-color: #fff;
}
.input-wrapper select:focus ~ .placeholder,
.input-wrapper select:not(:placeholder-shown) ~ .placeholder {
  transform: translateY(-1.5rem) scale(0.75);
  padding: 0 0.25rem;
  color: rgba(0, 0, 0, 0.54);
  background-color: #fff;
}

.input-wrapper input, .input-wrapper select {
  border: 0.75px solid rgba(0, 0, 0, 0.54);
  background-color: #fff;
  color: #1a1a1a;
  outline: none;
  transition: border-color 0.5s;
  background-color: #fff;
  font-size: 1rem;
}


.input-wrapper input:not(:placeholder-shown) ~ .placeholder {
  transform: translateY(-1.5rem) scale(0.75);
  padding: 0 0.25rem;
  color: rgba(0, 0, 0, 0.54);
}

.no_button {
  background-color:transparent;
  cursor: pointer;
  color: rgba(0, 0, 0, .875);
}
.no_button:hover {
  color: var(--primary-color);
}

.pass {
    width: 100%;              /* Input takes up full width of .input-wrapper */
    padding-right: 30px;      /* Make room for the icon */
}

.toggle-password {
    position: absolute;
    right: 10px;
    cursor: pointer;
}

.toggle-password .fa-eye, .toggle-password .fa-eye-slash {
    position: relative;
    right: 0.5rem;                 /* Correct positioning within the .toggle-password */
}
.login-wrapper.col-6 {
background-color: #fff;
  border-radius: 0;
  box-shadow: 0 0 8px rgba(0,0,0,.15);
  padding: 135px 1rem 1rem 1rem;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
}
/*.input-wrapper.col-8, .input-wrapper.col-10 {
  background-color: #fff;
  border-radius: 0;
  box-shadow: 0 0 8px rgba(0,0,0,.15);
  padding: 70px 1rem 1rem 1rem;
  left: 0;
  width:100vw;
}*/
.calc-wrapper.col-8, .calc-wrapper.col-10, .calc-wrapper.col-6 {
  background-color: #fff;
  border-radius: 0;
  box-shadow: 0 0 8px rgba(0,0,0,.15);
  padding: 1rem;
  left: 0;
  width:100vw;
}
.login-wrapper.col-3 {
    display:none;
}
.header {
    display: block;
}
.post-author {font-size: 12px; float: left; min-width: 98px;}

.badge-container {
    display: flex;
    width: 100%;
    height: 18px;
    justify-content: flex-start;
    margin-left: 48px;
    margin-top: -2.25rem;
}

.topic-replies {
  padding-left: 5px;
}
.topic-views {
  padding-left: 5px;
}
.details a, .details time {
  font-size: 1rem;
}
.details {
  font-size: .875rem;
}
.topic-description-inner .body {
    width: 100%;
    line-height: 1rem;
}
.viewtopic {
  width: 100%;
  width: -webkit-fill-available;
  height: fit-content;
}

/* Like System 
/
/
*/
.likes {
	float: left;
	display: flex;
	gap: 0;
	box-shadow: 0px 0 6px rgba(0, 0, 0, .15);
	border-radius: 6px;
	font-size: 1rem;
	margin-right: 1rem;
	cursor:pointer;
}
.likes .left-btn {
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
	padding: 2px 5px 2px 10px;
}
.likes .right-btn {
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
	padding: 2px 0;
}
.left-btn, .right-btn {
	min-width: 30px;
	/*padding: .25rem .5rem;*/
	background-color: transparent;
	display: flex; /* Enables flexbox layout */
	justify-content: center; /* Centers content horizontally */
	align-items: center; /* Centers content vertically */
	position: relative;
}
.left-btn:hover, .right-btn:hover {
	background-color: rgba(0, 0, 0, .15);
}
.left-btn:active, .right-btn:active {
	background-color: rgba(0, 0, 0, .45);
}
.left-btn i, .right-btn i, .likes span {
	color: rgba(0, 0, 0, .75);
}

/* /viewtopic profile aside styling */
.post-profile {
  float: left;
  padding: .5rem 0 0;
    padding-right: 0px;
  position: relative;
  text-align: center;
  width: 80px;
  word-wrap: break-word;
  z-index:38;
}
/*viewtopic styling*/
.post-number {
  display: flex;
  align-items: center;
  color: rgb(173, 173, 173);
  float: right;
  line-height: 1.2rem;
  transition: color 0.18s cubic-bezier(0.6,0,0.1,1);
  text-align: right;
  width:35px;
  height: 19px;
}
.post-body {
  background-color: #FFFFFF;
  border-color: #EAEAEA;
  box-shadow: 0 0 6px rgba(0,0,0, 0.25);
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.post-body:nth-child(odd) {
  background-color: #F5F5F5;
}
.post-body.answer {
  border: 5px solid var(--success-color);
}
.post-body .topic-status-icon {float: left; padding-right: 5px; width: 96px; height: 22px;}
.post-content a {
    text-decoration: underline;
}
.post-body h3 {
  float: left;
  min-width: 50%;
  max-width: 60%;
  overflow-wrap: break-word;
  text-wrap: nowrap;
  overflow: hidden;
  margin: 0;
}
.post-content {
  border-color: #EAEAEA;
  clear: both;
  display: inline-block;
  word-wrap: break-word;
  width: 100%;
}
.post-body h3 ~ .post-content {
  border-style: solid;
  border-width: 1px 0 0;
  padding-top: 1.2rem;
}

/* First line limited to ~100 characters */
.post-content p::before {
  content: "";
  float: right;
  /* leave at most 100ch for text on the first line */
  width: clamp(0px, calc(100% - 100ch), 9999px);
  /* affect only the first line’s block area */
  height: 20px;           /* modern browsers */
  /* fallback if 1lh isn't supported */
  /* height: 1.2em; */
}

.post-profile {
  float: left;
  position: relative;
  text-align: center;
  width: 50px;
  word-wrap: break-word;
  padding-right: 0;
}
.post-actions {
  border-radius: 0 0 6px 6px;
  border-style: solid;
  border-width: 1px 0 0;
  display: block;
  list-style: none;
  margin: -.5rem -.5rem 0rem -.5rem;
  overflow: hidden;
  padding: .5rem 1rem;
  background-color: rgb(249, 249, 249);
  border-color: #EAEAEA;
}
.post-actions li {
  float: left;
  margin: .25rem 1rem .25rem 0;
  width: auto;
  font-size: .89rem;
}
.post-actions li:last-child {
  text-align: right;
}
.post-actions a  {
    cursor: pointer;
    text-decoration: none;
    color: rgb(173, 173, 173);
}
/*.post-actions i:not(.fa-clock) {*/
/*    font-size: 1.2rem;*/
/*    padding-right: 1rem;*/
/*}*/
.post-actions .fa-trash  {
    color: var(--darker-primary-color);
}
.post-actions .fa-lock  {
    color: var(--warning-color);
}
.post-actions .fa-pen  {
    color: var(--primary-color);
}
.post-actions .fa-square-check  {
    color: var(--error-color);
}
.post-actions .fa-square  {
    color: var(--success-color);
}
.post-actions li:hover a {
    color: #455A64;
}
.right {
  float: right !important;
}
/*
 * Tour Animation
 */

  .credit_animation {
    position: absolute;
    font-size: 18px;
    font-weight: bold;
    color: green;
    opacity: 1;
    transition: all 1s ease-out;
    z-index: 9999;
  }

@keyframes pulse {
  0% { 
    transform: scale(1); 
    color: inherit; 
    font-weight: bold; 
  }
  50% { 
    transform: scale(1.5); 
    color: var(--success-color); 
    font-weight: bold; 
  }
  100% { 
    transform: scale(1); 
    color: var(--success-color); 
    font-weight: bold; 
  }
}
.fa-stack.react {
    font-size: 1rem;
    display: flex;
    position: relative;
    align-items: center;
    overflow: visible;
}
.fa-stack-1x {
    font-size: 1rem;
  position: absolute;
}
.fa-stack-2x {
    position: absolute;
}
.post-notes {
    font-size: 1rem;
    padding-right: 1rem;
}
.fs {
    display:none !important;
}
.md {
    display: block;
    height: 18px;
    align-items: flex-start;
    display: flex;
}
.no-wrap {
    word-break: keep-all;
}
.msg-body {
    max-width:100%;
    padding: 1rem 1rem 0 1rem;
}
.msg-body > .centered-container {
    margin-bottom: 0;
}
.msg-body > .centered-container .button {
    border-radius: 0;
    width: calc(100% + 2rem);
    margin-left: -1rem;
    margin-right: -1rem;
}
.fs_d span {
    padding-left: 1rem;
}
#message {
    width: 100%;
    margin-top: 6px;
    resize: vertical;
}
.edittopic {
    display: none;
    width: 100%;
}
.edittopic fieldset {
  margin-left: 0px;
}
.close-btn {
  position: absolute;
  right: 1rem;
  top: 1rem;
  cursor: pointer;
  color: rgb(173, 173, 173);
}
.close-btn:hover {
  color: #455A64;
}
.msg-body {
  background-color: #FFFFFF;
  border-color: #EAEAEA;
  box-shadow: 0 0 6px rgba(0,0,0, 0.25);
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  position: relative;
  overflow: hidden;
}
.msg-body input {
    border-radius: 0px;
}
.page_count {
  font-size: .875rem;
  display: block !important;
}
.opt_button {
  border-radius: 2px;
  cursor: pointer;
  display: inline-block;
  font-size: 1.3em;
  padding: 9px 18px;
  transition: background-color 0.18s cubic-bezier(0.6,0,0.1,1),box-shadow 0.18s cubic-bezier(0.6,0,0.1,1);
  user-select: none;
}

.viewtopic article {
  /*max-width: 1000px;*/
  margin: 0 auto;
  padding: .5rem .5rem 0;
  min-height: 100%; /* new */
}

.subject-area {
  line-height: 1.5;
}
.subject-area input {
  padding-left: 1rem;
}
.fs_s input {
  padding-left: 2rem;
}

.editor-title {
  padding: 0 1rem 1px 1rem;
  background-color: #4a4a4a;
  color: white;
  border-top: 6px solid #4a4a4a;
}

.toolbar {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.toolbar .line {
  display: flex;
  border-bottom: 1px solid #EAEAEA;
  margin: 0;
  background-color: #fff;
  border-top: none;
  box-shadow: none;
}



.toolbar .line:last-child {
  border-bottom: none;
}

.toolbar .box {
  display: flex;
  border-left: 1px solid #e2e2e2;
  justify-content: center;
  align-items: center;
}

.toolbar .box:first-child {
  border-left: none;
  padding: 0 1rem;
}

.editor-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background-color 0.18s cubic-bezier(0.6, 0, 0.1, 1), box-shadow 0.18s cubic-bezier(0.6, 0, 0.1, 1);
}

.editor-btn:hover, 
.editor-btn.active {
  background-color: #e1e1e1;
  cursor: pointer;
}

.editor-btn.icon img,
.editor-btn.icon i {
  width: 1rem;
  padding: .5rem 1rem;
  box-sizing: content-box;
}

.editor-btn.icon.smaller img,
.editor-btn.icon.smaller i {
  width: 1rem;
}

.editor-btn.has-submenu {
  width: 1.5rem;
  padding: 0 0.5rem;
  position: relative;
}

.editor-btn.has-submenu::after {
  content: '';
  width: 6px;
  height: 6px;
  background-image: url('https://img.icons8.com/ios-glyphs/30/000000/chevron-down.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  right: 4px;
  position: absolute;
}

.editor-btn.has-submenu .submenu {
  display: none;
  position: absolute;
  top: 34px;
  left: -1px;
  z-index: 10;
  background-color: #FFF;
  border: 1px solid #b5b5b5;
  border-top: none;
}

.editor-btn.has-submenu .submenu .btn {
  width: 39px;
}

.editor-btn.has-submenu:hover .submenu,
.editor-btn.has-submenu .submenu:hover {
  display: block;
}

.post-btn, .opt-btn {
  min-height: 3rem;
  min-width: 8rem;
  /*display: flex;*/
  align-items: center;
  justify-content: center;
  transition: 0.2s ease all;
  background-color: #EAEAEA;
  font-weight: 500;
}

.post-btn:hover, 
.post-btn.active, .opt-btn:hover, .opt-btn.active {
  background-color: #4a4a4a;
  color: white;
  cursor: pointer;
}

.post-btns .line {
  margin: 0;
  background-color: transparent;
  border-top: none;
  box-shadow: none;
  display: flex;
}

/*.opt-btn {*/
/*  display: flex;*/
/*  padding-right: 2rem;*/
/*  border: 1px solid transparent;*/
/*  align-items: center;*/
/*  justify-content: center;*/
/*  text-align: center;*/
/*  font-weight: 400;*/
/*}*/

/*.opt-btn:hover, */
/*.opt-btn.active {*/
/*  background-color: transparent;*/
/*  color: inherit;*/
/*  cursor: pointer;*/
/*}*/

/* END TOOLBOX STYLING */

.content-area {
  padding: 0 1rem;
  line-height: 1.5;
}

/*#region MODAL STYLING */
.modal-bg {
    position: fixed;
    background-color: rgba(0, 0, 0, .3);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 39;
    touch-action: none;
}

.modal {
    z-index: 40;
    display: none;
}

.modal-wrapper {
    background-color: #FFF;
    padding: 1.5rem 1rem 0 1rem;
    position: fixed;
    top: 50vh;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80vw;
    min-height: 10rem;
    max-height: 80vh;
    overflow-x: auto;
    overflow-z: hidden;
    z-index: 41;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    transition: all 1s ease-in;
}

.modal-wrapper .close {
    position: absolute;
    top: calc(1rem + 14px);
    right: 1rem;
    cursor: pointer;
    color: var(--error-color);
    font-size: 1.2rem;
    z-index: +1;
	width: 28px;
	height: 28px;
	justify-content: center;
	align-items: center;
	display: flex;
}
.modal-wrapper .close i {
    font-size: 1.5rem;
}
.modal-wrapper .close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    cursor: pointer;
    color: var(--error-color);
    font-size: 1.2rem;
    z-index: +1;
}

.modal-wrapper .close::before {
  content: "close";
  position: absolute;
  top: 50%;
  left: -60px;
  transform: translateY(-50%) translateX(8px);
  display: inline-block;
  width: 50px;
  padding: 4px 6px;
  background: var(--error-color);
  color: #fff;
  font-size: 11px;
  text-align: center;
  border-radius: 3px;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.modal-wrapper .close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -10px;
  transform: translateY(-50%) translateX(4px);
  border-width: 4px 0 4px 6px;
  border-style: solid;
  border-color: transparent transparent transparent var(--error-color);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.modal-wrapper .close:hover {
	background-color: var(--error-color);
	border-radius: 100%;
	color: #fff;
}

.modal-wrapper .close:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.modal-wrapper .close:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.modal-wrapper .modal-content {
    display: flex;
    flex-direction: column;
}

.modal-wrapper .modal-content h3 {
    margin-top: 0;
}

.modal-wrapper .modal-content input:not(.login), .modal-wrapper .modal-content select {
    margin: 1rem 0;
    padding: .5rem;
    width: calc(100% - 2rem);
    cursor: pointer;
}

.modal-wrapper .modal-content .row label {
    margin-left: .5rem;
}

.modal-wrapper .modal-content button:not(.login, #accept) {
    background-color: #D2434F;
    border: 0;
    color: #FFF;
    padding: .5rem 1.2rem;
    cursor: pointer;
}
.modal #previewImage {
    width: 100%;
    height: auto;
}

.modal .modal-content .crop-box {
    position: absolute;
    border: 2px solid #fff;
    cursor: pointer;
    width: min(200px, 30vw);
    height: min(200px, 30vw);
    top: 50%;
    left: 50%;
    /*transform: translate(-50%, -50%);*/
    background: rgba(255, 255, 255, 0.3);
    touch-action: none;
}

.modal .modal-content button {
    margin: 10px auto;
}
.modal-content .styled-table {
	margin: 1rem auto 0;
	background-color: #f2f2f2;
	padding: 4px 1rem;
	border-radius: 6px;
	calc(100% - 2rem)
}

/*#endregion */
.post-btns {
    background-color: #EAEAEA;
}

.content-area .placeholder,
.subject-area .placeholder {
  color: #999;
  font-style: italic;
}
.subject-area .pass {
    height: 50px;
}
#forum .fs_s input {
    border-bottom: 1px solid #EAEAEA;
    padding-left: 1rem;
    height: 50px;
    font-size: 1rem;
    color: #a6a6a6;
}
.article-body p, .post-content p {
    margin-bottom: 1rem;
}

/** Select Container
 *
 * Styles select container used to show filter options
 * Use at the bottom of lists, tables, grids, columns, etc.
 */

.select-container {
    position: relative;
    display: inline-block;
    width:200px;
}

.select-container select {
  padding: .25rem 1rem .25rem 2rem;
  width: 100%;
  appearance: none;
  border: 1px solid #ccc;
  background-color: #fff;
  font-size: 1rem;
  border-radius: 6px;
  cursor: pointer;
}

.select-container i {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    pointer-events: none; /* Allow interaction with the select element */
    color: #888;
}

/** Report Options
 *
 * Styles optional button that comes immediately after
 * Select Container.
 */
  
.report-options {
    width: fit-content;
    display: inline;
}
.report-button {
    display: inline;
}
.report-button button {
    padding: .25rem;
    width: fit-content;
    appearance: none;
    border: 1px solid #ccc;
    background-color: transparent;
    font-size: 1rem;
    color: #ccc;
    border-radius: 6px;
    cursor: pointer;
    transition: color .3s ease-in, background-color .3s ease-in, border-color .3s ease-in;
}
.report-button:hover button {
    color: unset;
    background-color: #fff;
    border-color: var(--primary-color);
}

.report-button button:focus-visible {
    outline-width: 5px;
}

/* Avatar Settings */
/* Profile Picture */
.member-profile-pic {
    max-width: 400px;
    max-height: 400px;
    display: inline-block;
}

/* File Upload */
.file-upload {
    display: none;
}

/* Circular Container for Profile Picture */
.circle-big {
    border-radius: 50%;
    overflow: hidden;
    width: 200px;
    height: 200px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    position: relative;
    display: none; /* Important for centering the image */
    display: flex; /* Use flexbox for centering */
    justify-content: center;
    margin: auto;
}

.circle-small {
    border-radius: 50%;
    overflow: hidden;
    width: 100px;
    height: 100px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    position: relative;
    display: none; /* Important for centering the image */
    display: flex; /* Use flexbox for centering */
    justify-content: center;
    margin: auto;
}

/* Centered Image */
.circle-big img, .circle-small img{
    /*max-width: 100%;*/
    height: auto;
}

/* Profile Image Button */
.p-image {
  position: absolute;
  top: 334px;
  left: calc(50% + (100px - 1.3rem));
  color: #666;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Hover Effect for Profile Image Button */
.p-image:hover {
    color: #999;
}

/* Upload Button */
.upload-button {
    font-size: 1.2rem;
    transition: color 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Hover Effect for Upload Button */
.upload-button:hover {
    color: #999;
}

#upload {
    scroll-margin-top: 200px;
}

#usr_stats dt, #usr_details dt, #badge-card dt {
    color: rgb(173, 173, 173);
}
#usr_stats dd, #usr_details dd, #badge-card dd {
    margin-bottom: 20px;
    word-wrap: break-word;
}
#usr_stats h3, #usr_details h3 {
    padding-bottom: 10px;
}
#badge-card {
  display: grid;
  width: 100%;
  margin-bottom: 10px;
}
#badge-card img, #badge-card h3 {
  margin: 0 auto 10px;
}
#badge-card dl {
  border: 1px solid #EAEAEA;
  padding: .5rem;
}
#user_badges .b_container {
    display: flex;
}
#usr_badges img {
  width: auto;
  height: 48px;
  cursor: pointer;
}
.banner-round-bottom {
    overflow: hidden;
    padding: 6px 0 !important;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.banner-round-bottom.dismissed {
    transform: translateY(-20px); /* Move upwards */
    opacity: 0; /* Dissolve */
    pointer-events: none; /* Prevent interaction when dismissed */
}
.banner-round-bottom .hover-icon {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%) scale(0); /* Hidden initially */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 16px;
    color: black;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 1;
    pointer-events: auto;
    padding: .5rem;
    min-width: 100px;
    text-align: right;
}

.banner-round-bottom:hover .hover-icon {
    transform: translateY(-50%) scale(1); /* Show on hover */
    opacity: 1;
    pointer-events: auto; /* Allow interaction */
}
.toc {
    position: relative;
    margin: 2rem 0;
    z-index: 1;
}

.toc-bg {
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 100%;
    height: 100%;    
    background: linear-gradient(90deg, var(--gold-color), var(--secondary-color));
    z-index: -1;
}

.toc-content {
    position: relative;
    background-color: #fff;
    padding: 1rem;
    border: .5px solid #000;
}

/* Overlay spinner */
.main-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(128, 128, 128, 0.5); /* translucent grey */
    display: none;
    opacity: 0;
    z-index: 9999;
    transition: opacity 0.3s ease;
    pointer-events: none;
    justify-content: center;
    align-items: center;
}

.main-overlay.active {
    display: flex;
    opacity: 1;
    pointer-events: none;
}
@keyframes spin {
    from {transform: rotate(0deg);}
    to {transform: rotate(359deg);}
}

/** #region Action Bar Top **/
.action_bar_top {
  text-align: right;
  padding: 0 5px 2px 0;
}
.action_bar_bottom {
  text-align: right;
  padding: 0 5px 2px 0;
}
.action_bar_bottom.forum {
  margin-right: calc(1.25rem + 50px);
}
.action_bar_top.forum {
  position: fixed;
  right: 1.25rem;
  background-color: #fff;
  max-width: 50px;
  border-radius: 4px;
  box-shadow: 0 0 6px rgba(0, 0, 0, .25);
  padding-top: 2px;
}
.action_bar_top.forum .add .button_round,
.action_bar_top.forum .search .button_round,
.action_bar_top.forum .search .button_round,
.action_bar_top.forum .next .button_round {
  margin: 0 0 1rem 0;
}
.search,
.asc,
.desc,
.filter,
.popular,
.time,
.time_newest,
.time_oldest,
.add,
.previous,
.next,
.calendar_plus,
.calendar_minus,
.bug,
.options {
  display: inline;
  position: relative;
}

.dropdown_search, .dropdown_options, .dropdown_filter {
  width: 325px;
  min-height: 40px;
  display: none;
  position: absolute;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  background-color: #fff;
  border-radius: 4px;
  z-index: 1000;
  margin-top: .5rem;
}

.search .dropdown_search, .filter .dropdown_filter {
  top: auto;
  right: 0rem;
}
.options .dropdown_options {
  right: 4rem;
}

.dropdown_search li, .dropdown_options li, .dropdown_filter li {
  cursor: pointer;
  padding: .5rem .5rem .5rem 3rem;
}
.dropdown_search li:not(.group):hover, .dropdown_options li:not(.group):hover, .dropdown_filter li:not(.group):hover{
  background-color: rgb(237, 237, 237);
}

.dropdown_search li.group, .dropdown_options li.group, .dropdown_filter li.group {
  padding-left: 2.5rem;
  font-weight: bold;
  border-bottom: 1px solid rgb(237, 237, 237);
}

.dropdown_options li.selected, .dropdown_filter li.selected {
  position: relative;
}

.dropdown_options li.selected:before, .dropdown_filter li.selected:before {
  content: "\f111";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--primary-color);
  position: absolute;
  left: 1.25rem;
  display: flex;
}

.button_round {
  background-color: none;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  cursor: pointer;
  transition: box-shadow 0.3s, background-color 0.3s;
}

.button_round i {
  font-size: 16px;
  color: #333;
}

.button_round:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.search.active .button_round,
.filter.active .button_round,
.options.active .button_round,
.asc.active .button_round,
.desc.active .button_round,
.popular.active .button_round,
.time_newest.active .button_round,
.time_oldest.active .button_round {
  background-color: rgb(235, 235, 235);
}

.search.active .dropdown_search.active,
.filter.active .dropdown_filter.active,
.filter.active .dropdown_options.active,
.options.active .dropdown_options.active{
  display: block;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgb(235, 235, 235);
}

.drop_down_footer input {
  min-width: 325px;
  background-color: #bbb;
  padding: 8px 10px;
}


/*#endregion */


@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%; display:block;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
  .hide {display: block;}
  .hide-inline {display: inline;}
  .show {display: none;}
  .row-maincontent {display: flex; align-items: stretch; min-height: calc(100% - 238px);}
  .opt-btn {min-width: 8rem !important;}
  .post-btn {min-width: 12rem !important;}
  .post-btn i {padding-right: .5rem;}
  .post-actions i {font-size: unset; padding: 0;}
  .post-actions .fa-trash, .post-actions .fa-lock, .post-actions .fa-pen, .post-actions .fa-square, .post-actions .fa-square-check { color: unset; }
  .post-number {margin-top: 0rem; height: 24px;}
  .centered-container label, .container label, .right-container label, .left-container label {min-width: 200px;}
  .input-wrapper {flex: none;}
  .main-wrapper {display:flex;justify-content: stretch;}
  .main-wrapper label {padding-left: 3rem;}
  .button, a.button {width: min(325px,80vw)}
  .login-wrapper.col-3{display:block;}
  .login-wrapper.col-6{position:relative; border-radius:6px; padding:3rem 1rem; width:50%; height:unset;}
  /*.input-wrapper.col-8{width:66.66%;}
  .input-wrapper.col-10{width: 83.33%;} */
  .calc-wrapper.col-8 {width:66.66%;}
  .calc-wrapper.col-10 {width: 83.33%;}
  .calc-wrapper.col-6 {width: 50%;}
  .login-wrapper.col-6{border-radius:6px; padding:3rem 1rem;}
  .header {display:flex;}
  .centered-container p {width: min(325px,80vw);}
  .table-container{overflow: visible;}
  .topic-replies, .topic-views {display:block;}
  .topics-wrap li {display:flex;}
  .topic-icon {height:70px;}
  .details {font-size:.75rem;}
  .details a, .details time {font-size:.875rem;}
  .topic-description-inner .details {margin-top:1rem;}
  .topic-description-inner {max-width:70%;margin-left:0;}
  .post-profile {width: 98px; padding-top: 0rem;}
  .post-body {margin-left: 98px !important;}
  /*.post-actions {margin-top: 8px;}*/
  .post-actions li:last-child {width:auto !important;text-align:left;}
  .post-body h3 {display: inline-block; float: none; margin-bottom: 1rem !important; max-width: 90%;}
  .post-content {margin-top: -22px; padding-right: 40px;}
  .post-author {float: unset;}
  .post-profile .avatar-container {margin-bottom: 0px;}
  .badge-container {
    justify-content: center;
    margin-left: 0;
    margin-top: 0;
  }
  .viewtopic:has(.badge-container):has(.warning_container) .badge-container {
	  position: absolute;
	}
  .fs {display:block !important;}
  .md {display:none !important;}
  .viewtopic fieldset {margin-left: 90px !important; position: relative !important;}
  /*.viewtopic article {width: 1000px;}*/
  .msg-body  {margin-left:98px;}
  .likes {margin-top: 0; position: relative; cursor: pointer;}
  .fnav {justify-content: start;}
  .modal-wrapper {width:40vw !important;}
  .line-img{height:500px;width:auto;padding:0 1rem 0 2rem;float:right;max-width: unset;}
  [class*="col-"].left, [class*="col-"].right {display:block;}
  .circle-big {width:400px; height:400px;}
  .p-image {top: 535px !important; left: calc(50% + (200px - 1.3rem));}
  .nav-container .input-wrapper {width: 325px; float: right; margin: 10px 0;}
  .nav-container .input-wrapper input {border-radius: 6px; border: none;}
  .nav-container .input-wrapper #search-bar.active input {border-top-right-radius: 6px; border-top-left-radius: 6px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;}
  .banner-round-bottom {border-bottom-right-radius: 6px;border-bottom-left-radius: 6px;}
  .banner-round-bottom .hover-icon {opacity: 0; pointer-events: none;}
  .action_bar_top.forum {position: revert;display: block;background-color: unset;max-width: unset; box-shadow: none; border-radius: 0px;}
  .action_bar_top.forum .add {float: left;}
  .topics-wrap {margin-right: 0;}
  /*.forum-bg h3 {padding: 0 1rem;}*/
  .action_bar_top.forum .add .button_round,
  .action_bar_top.forum .search .button_round,
  .action_bar_top.forum .next .button_round {
    margin: 0 1rem 0 0;
  }
  .action_bar_bottom.forum {margin-right: 0;}
  .search .dropdown_search, .options .dropdown_options, .filter .dropdown_filter {top: calc(100% + .25rem); right: 0; }
  #badge-variations .col-10 {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  #badge-card {
    min-width: 325px;
    max-width: 325px;
    flex: 1 1 325px;
  }
  .warning_container {padding:0;}
}
@media only screen and (min-width: 1280px) {
  .circle-small {width:200px; height:200px;}
}
<?php file_get_contents __DIR__ . '/iwc.css'; ?>