/**
 * Content
 */
 @font-face {
    font-family: 'Neue Haas Grotesk'; /* Give the font a name */
    src: url('../fonts/NeueHaasGroteskText-Regular.woff') format('woff'), /* Specify the font file and format */
         url('../fonts/NeueHaasGroteskText-Regular.woff') format('woff');
    font-weight: normal; /* Define the weight of the font */
    font-style: normal;  /* Define the style of the font */
}
 
@font-face {
    font-family: 'Neue Haas Grotesk'; /* Use the same font-family name */
    src: url('../fonts/NeueHaasGroteskText-Bold.woff') format('woff'); /* Specify the font file and format */
    font-weight: bold; /* Define the weight of the font */
    font-style: normal;  /* Define the style of the font */
}

@font-face {
    font-family: 'Icons'; /* Give the font a name */
    src: url('../fonts/IconFont-Regular-0.9.3.woff2') format('woff2'), /* Specify the font file and format */
         url('../fonts/IconFont-Regular-0.9.3.woff2') format('woff2');
    font-weight: normal; /* Define the weight of the font */
    font-style: normal;  /* Define the style of the font */
}
 

body, html {
	color: #000;
    height: 100vh;
    overflow: hidden;
}

body {
	background-color: #111 !important;
}

label {
    color: rgb(230, 230, 242); /* White text color */
    text-decoration: none; /* Remove default underline */
    font-family: 'Neue Haas Grotesk', serif; /* Replace 'YourFontClass' with your desired font */
    font-weight: normal;
    font-size: 18px;
}

li {
    color: rgb(183, 183, 193); /* White text color */
    text-decoration: none; /* Remove default underline */
    font-family: 'Neue Haas Grotesk', serif; /* Replace 'YourFontClass' with your desired font */
    font-weight: normal;
    font-size: 14px;
    text-align: left;
}

/* Define the base styles for the link */
a.url-class {
    color: white; /* White text color */
    text-decoration: none; /* Remove default underline */
    font-family: 'Neue Haas Grotesk', serif; /* Replace 'YourFontClass' with your desired font */
    position: relative; /* Needed for positioning the animated underline */
    transition: color 0.3s ease; /* Smooth color transition */
}

/* Hover effect for the link */
a.url-class:hover {
    color: white; /* Keep the text color white on hover */
}

/* Create the underline effect */
a.url-class::after {
    content: ""; /* Add a blank content to use as the underline */
    position: absolute;
    left: 0;
    bottom: -2px; /* Position slightly below the text */
    width: 0; /* Initially hide the line */
    height: 2px; /* Line thickness */
    background-color: white; /* Line color */
    transition: width 0.3s ease; /* Smooth animation for drawing */
}

/* Animate the underline on hover */
a.url-class:hover::after {
    width: 100%; /* Draw the line to full width */
}

.add-card-input {
    background-color: #2f383e;
    border: none;
    color: white; /* White text color */
    text-decoration: none; /* Remove default underline */
    font-family: 'Neue Haas Grotesk', serif; /* Replace 'YourFontClass' with your desired font */
    position: relative; /* Needed for positioning the animated underline */
    transition: color 0.3s ease; /* Smooth color transition */
    font-size: 16px;
    margin-top: 6px;
    border-radius: 4px;
    padding: 4px;
}

.copywrite {
    color: white; /* White text color */
    text-decoration: none; /* Remove default underline */
    font-family: 'Neue Haas Grotesk', serif; /* Replace 'YourFontClass' with your desired font */
    position: relative; /* Needed for positioning the animated underline */
    transition: color 0.3s ease; /* Smooth color transition */
    user-select: none;
    cursor: default;
}

.container_g {
    display: flex;
    justify-content: space-between; /* Distributes space between columns */
    width: 100%;
	margin-top: 5%;
}

.column {
    flex: 1; /* Each column will take up equal space */
    padding: 10px;
    text-align: center; /* Centers the text in each column */
}

.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: auto;
}

.header_g {
    position: relative;
    z-index: 10;
    background-color: #111 !important;
    box-shadow: 0px 2px 10px black;
}

.form-control {
    background-color: #111;
    border-width: 1px;
    border-radius: 4px;
    border: 1px solid #333;
    color: white;
    font-family: 'Neue Haas Grotesk', serif; /* Replace 'YourFontClass' with your desired font */
    padding: 8px; /* Padding inside the input */
    width: 100%;
    outline: none; /* Remove blue outline on focus */
    transition: border-color 0.3s ease; /* Smooth transition for border color */
}

/* Define the base styles for the link */
.login-button {
    background-color: rgba(0, 0, 0, 0);
    border: none;
    color: white; /* White text color */
    text-decoration: none; /* Remove default underline */
    font-family: 'Neue Haas Grotesk', serif; /* Replace 'YourFontClass' with your desired font */
    position: relative; /* Needed for positioning the animated underline */
    transition: color 0.3s ease; /* Smooth color transition */
}

/* Hover effect for the link */
.login-button:hover {
    color: white; /* Keep the text color white on hover */
}

/* Create the underline effect */
.login-button::after {
    content: ""; /* Add a blank content to use as the underline */
    position: absolute;
    left: 0;
    bottom: -2px; /* Position slightly below the text */
    width: 0; /* Initially hide the line */
    height: 2px; /* Line thickness */
    background-color: white; /* Line color */
    transition: width 0.3s ease; /* Smooth animation for drawing */
}

/* Animate the underline on hover */
.login-button:hover::after {
    width: 100%; /* Draw the line to full width */
}

.separator {
    width: 60%;
    margin-left:20%;
    margin-top: 10px;
    margin-bottom: 10px;
    height:1px;
    background-color:#445;
}

.text_g {
    color: rgb(230, 230, 242); /* White text color */
    text-decoration: none; /* Remove default underline */
    font-family: 'Neue Haas Grotesk', serif; /* Replace 'YourFontClass' with your desired font */
    font-weight: normal;
    position: relative; /* Needed for positioning the animated underline */
    transition: color 0.3s ease; /* Smooth color transition */
}

.board-text {
    color: rgb(230, 230, 242); /* White text color */
    text-decoration: none; /* Remove default underline */
    font-family: 'Neue Haas Grotesk', serif; /* Replace 'YourFontClass' with your desired font */
    font-weight: normal;
    position: relative; /* Needed for positioning the animated underline */
    transition: color 0.3s ease; /* Smooth color transition */
    user-select: none; /* Prevents text selection */
    cursor: default; /* Ensures the cursor stays as the default arrow */
}

.board-container {
    display: flex;
    justify-content: space-between; /* Ensures even spacing between columns */
    padding: 0 1.6%; /* Add padding to the left and right for spacing */
    user-select: none; /* Prevents text selection */
    height: 95%;
    align-items: flex-start;
}

.board-column {
    background-color: #111;
    border-width: 1px;
    border-radius: 4px;
    border: 1px solid #333;
    color: white;
    width: 18%;
    /* min-height: auto; */
    padding: 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    user-select: none;
    max-height: 88%;
}

.board-card-container {
    background-color: #111;
    display: flex;
    width: 100%;
    flex-direction: column;
    min-height: 30px;
    overflow-y: auto;
    scrollbar-color: #434f4f #1c2125;
    scrollbar-width: thin;
    padding: 0 1%;
}

.board-card-container::-webkit-scrollbar-track {
    border-radius: 6px;
    margin-left: 20px;
    background: white;
}

.board-card {
    background-color: #2f383e;
    border-radius: 4px;
    border: none;
    display: flex;
    color: white;
    width: 100%;
    padding: 8px;
    margin-top: 8px;
    overflow: hidden;
    flex-direction: column;
    min-height: 80px;
}

.board-card.dragging {
    opacity: 0.5;
}

.board-card-label-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin-left: 10px;
    margin-right: 10px;
    height: 10px;
    justify-content: flex-start;
}

.board-card-label {
    display: flex;
    width: 16%;
    min-width: 10px;
    height: 100%;
    background-color: white;
    border-radius: 6px;
    margin-right: 2%;
}

.label-in-editor {
    color: #111;
    padding: 0 12px;
    height: 32px;
    font-size: 14px;
    border-radius: 4px;
    text-align: center;
    line-height: 32px;
}

.label-task {
    background-color: #139cea;
    color: #caebff;
}

.label-note {
    background-color: #6c56cb;
    color: #d3caff;
}

.label-feature {
    background-color: #14b760;
    color: #d5ffe8;
}

.label-review {
    background-color: #efea5a;
    color: #111;
}

.label-bug {
    background-color: #e54444;
    color: #ffd1d1;
}

.board-card-title {
    text-align: left;
    padding-left: 10px;
    padding-top: 5px;
}


.add-card-btn {
    text-decoration: none;
    font-family: 'Neue Haas Grotesk', serif;
    font-weight: normal;
    font-size: 14px;
    transition: color 0.3s ease;
    background-color: #111;
    border-radius: 4px;
    border: none;
    color: white;
    width: 100%;
    padding: 6px;
    margin-top: 8px;
    text-align: center;
    user-select: none;
}

.add-card-btn:hover {
    background-color: #224;
}

.no-hover:hover {
    background-color: initial;
}

.modal-background {
    display: block;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 190%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
}

.modal-delete-background {
    z-index: 2;
}

.modal-tab {
    /* background-color: rgb(71, 85, 96); */
    background-color: #2f383e;
    margin: 5% auto;
    padding: 20px;
    border: none;
    width: 80%;
    min-width: 500px;
    max-width: 850px;
    height: 45%;
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.modal-delete-tab {
    min-width: 300px;
    max-width: 300px;
    width: 30px;
    height:auto;
    margin: 20% 40%;
}

.modal-close-btn {
    color: #aaa;
    float: right;
    font-size: 28px;
}

.modal-close-btn:hover,
.modal-close-btn:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-label-text {
    color: #b6c2cf;
    text-decoration: none;
    font-family: 'Neue Haas Grotesk', serif;
    transition: color 0.3s ease;
    user-select: none;
    cursor: default;
    font-size: 14px;
}

.modal-label-text-editable {
    color: #b6c2cf;
    text-decoration: none;
    font-family: 'Neue Haas Grotesk', serif;
    transition: color 0.3s ease;
    user-select: none;
    cursor: pointer;
    font-size: 14px;
    padding: 3px 10px 3px 10px;
    min-height: 44px;
    background-color: #2f383e;
}

.modal-label-text-editable:focus {
    outline: none;
    cursor: text;
    background-color: #22272b;
    border: 1px solid #8590A2;
    padding: 2px 10px 3px 9px;
}


.modal-save-btn {
    color:#000;
    background-color: #2e92d4;
    border: none;
    border-radius: 4px;
    margin-top: 6px;
    /* padding: 6px; */
    padding-left: 10px;
    padding-right: 10px;
    height: 30px;
    font-size: 16px;
}

.modal-save-btn:hover {
    background-color: #68b9ef;
}

.modal-archive-btn {
    color:#000;
    background-color: #d73434;
    border: none;
    border-radius: 4px;
    margin-top: 6px;
    /* padding: 6px; */
    padding-left: 10px;
    padding-right: 10px;
    height: 30px;
    font-size: 14px;
}

.modal-archive-btn:hover {
    background-color: #eb6464;
}

.modal-cancel-btn {
    background-color: #3b4a54;
    color: #b6c2cf;
    border: none;
    border-radius: 4px;
    margin-top: 6px;
    /* padding: 6px; */
    padding-left: 10px;
    padding-right: 10px;
    height: 30px;
    font-size: 14px;
}

.modal-cancel-btn:hover {
    background-color: #435967;
}

.add-label-btn {
    background-color: #3b4a54;
    color: #b6c2cf;
    font-size: 18px;
    border: none;
    border-radius: 4px;
    width: 36px;
    padding-bottom: 4px;
}

.add-label-btn:hover {
    background-color: #435967;
}

.modal-comment-input {
    background-color: #22272b; /* Dark background for editor */
    color: #899097; /* Light text color */
    border: 1px solid #8590A2; /* Dark border */
    padding: 6px;
    border-radius: 4px;
    cursor: pointer;
}

.modal-comment-input:hover {
    background-color: #2d353b; /* Dark background for editor */
}

.modal-dropdown-list {
    background-color: #2d353b;
    color: #b6c2cf;
    border: 1px solid #8590A2; /* Dark border */
    padding: 6px;
    border-radius: 4px;
    cursor: pointer;
}

.modal-admin-text {
    color: #b6c2cf;
    text-decoration: none;
    font-family: 'Neue Haas Grotesk', serif;
    transition: color 0.3s ease;
    user-select: none;
    cursor: default;
    font-size: 14px;
    padding: 6px;
    font-weight: bold;
    text-align: right;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #2d353b;
    min-width: 200px;
    border: 1px solid #8590A2;
    z-index: 1;
    padding: 10px;
    border-radius: 4px;
}

.dropdown-content label {
  display: flex;
  flex-direction: row;
  padding: 5px;
  cursor: pointer;
}

.dropdown-content label:hover {
  background-color: #3f4d57;
}

.show {
  display: block;
}

.dropdown-checkbox {
  margin-right: 8px;
}

.modal-comment-container {
    overflow-y: auto;
    height: 100%;
}

.modal-comment {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}

.modal-comment-title-bar {
    display: flex;
    flex-direction: row;
    /* justify-content: space-between; */
}

.modal-comment-timestamp {
    color: #8f99a4;
    text-decoration: none;
    font-family: 'Neue Haas Grotesk', serif;
    transition: color 0.3s ease;
    user-select: none;
    cursor: default;
    font-size: 12px;
    margin-left: 10px;
    line-height: 24px;
}

.comment-delete-div {
    display: flex;
    width: auto;
}

.comment-delete-btn {
    color: #8f99a4;
    font-size: 12px;
    line-height: 24px;
}

.company-column-company-name {
    font-size:20px;
    width: 100%;
    text-align: center;
    margin-top:20px;
}

.company-column-container-div {
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 0 40px;
}

.company-column-item-name {
    font-size:18px;
    text-align: left;
}

.company-column-item-value-div {
    display:flex; 
    flex-direction: column;
}

.company-column-item-value {
}