body {
  overflow-x: hidden;
}

.button {
  background-color: #00000000;
  border: 2px solid #FFFFFF11;
  cursor: pointer;
  padding: 5px;
  border-radius: 0.5rem;
  transition: 0.5s ease;
}
/* Base card style */
.task-card {
    padding: 10px 12px;
    border-radius: 12px; /* Rounded corners */
    background-color: white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    margin-bottom: 8px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Hover effect */
.task-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Task title */
.task-title {
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 6px;
}

/* Meta info container */
.task-meta {
    font-size: 0.85rem;
    color: #555;
}

/* Icons */
.task-meta i {
    margin-right: 4px;
    color: #888;
}

/* Deadline soon text */
.deadline-soon-text {
    color: red;
    font-weight: bold;
}

/* Priority colors for card background */
.priority-high {
    border-left: 5px solid #ff4d4d; /* red */
}
.priority-medium {
    border-left: 5px solid #ffc107; /* yellow */
}
.priority-low {
    border-left: 5px solid #28a745; /* green */
}

.button:hover {
  border: 2px solid #FFFFFF88;
}

.button:focus {
  border: 2px solid #FFFFFFFF;
}

body {
  background-position: top;
  background-color: #F0F0F0;
  user-select: none;
}

body>form>div.Applicant {
  padding: 50px 15px;
  background-color: #F1D1F105;
  backdrop-filter: blur(20px);
}

body>form>div.Employee {
  padding: 50px 15px;
  background-color: #A1D1F105;
  backdrop-filter: blur(20px);
}

body>form>div.HumanResources {
  padding: 50px 15px;
  background-color: #F1A1A105;
  backdrop-filter: blur(20px);
}

body>form>div.FirstManager {
  padding: 50px 15px;
  background-color: #A1F1C105;
  backdrop-filter: blur(20px);
}

body>form>div.MiddleManager {
  padding: 50px 15px;
  background-color: #A1A1A105;
  backdrop-filter: blur(20px);
}

body>form>div.HigherManager {
  padding: 50px 15px;
  background-color: #F1F1A105;
  backdrop-filter: blur(20px);
}

input:not([type="radio"], [type=checkbox], [type=submit], [type=range]),
select,
textarea {
  padding: 5px 15px;
  width: 100%;
  border: 0;
  border-radius: 0.1rem;
  background-color: #FFF5;
  box-shadow: -0px 1px 1px 0px silver;
  transition: 0.2s all ease-in-out;
  position: relative;
}

input[type=range],
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  -webkit-appearance: none;
  appearance: none;
  background: #AAA;
  border-radius: 5px;
  overflow: hidden;
  border-radius: 16px;
  transition: 0.1s 0.5s height ease;
}

input[type=range]:hover,
input[type=range]:focus,
input[type=range]::-webkit-slider-runnable-track:hover,
input[type=range]::-webkit-slider-runnable-track:focus {
  height: 15px;
  transition: 0.1s 0s height ease;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 15px;
  width: 0px;
  background-color: #05F0;
  border-radius: 0px;
  border: 0;
  outline: 0;
  box-shadow: -10000px 0 0 10000px #05E;
}

input[type=submit] {
  padding: 8px;
  width: 100%;
  border: 0;
  /* border-left: 2px solid #2288AAAA; */
  background: #AAAAAA22;
  /* box-shadow: -1px 0px 1px 0px #2288AAAA; */
}

input:not([type="radio"], [type="checkbox"])::placeholder,
select::placeholder,
textarea::placeholder {
  color: silver;
}

input:not([type="radio"], [type="checkbox"], [type=range]):focus,
select:focus,
textarea:focus {
  outline: none;
  background: white;
  box-shadow: -0px 0px 1px 1px orange;
  position: relative;
}

input:not([type="radio"], [type=checkbox]):focus-visible {
  outline: none;
}

input[type="radio"] {
  position: relative;
}

input[type="radio"]::before {
  content: "";
  z-index: 0;
  position: absolute;
  width: 15px;
  height: 15px;
  background-color: white;
  border-radius: 50%;
  border: 3px #880000FF solid;
  transition: 0.1s ease;
}

input[type="radio"]::after {
  content: "";
  z-index: 1;
  position: absolute;
  width: 3px;
  height: 10px;
  top: -3px;
  margin: 0 0 0 6px;
  outline: 2px white solid;
  border-radius: 5px;
  background: #880000FF;
  transition: 0.1s ease;
}

input[type="radio"]:checked::before {
  content: "";
  z-index: 0;
  position: absolute;
  width: 15px;
  height: 15px;
  background-color: white;
  border-radius: 50%;
  border: 3px #0A7 solid;
}

input[type="radio"]:checked::after {
  content: "";
  z-index: 1;
  position: absolute;
  width: 3px;
  height: 10px;
  top: -1px;
  margin: 0 0 0 6px;
  outline: 2px white solid;
  border-radius: 5px;
  background: #0A5;
}

/* input[type="radio"],
input[type=checkbox]:not(#agree) {
  opacity: 1;
}

input#agree {
  display: none;
}

input#agree+#check {
  display: inline-flex;
  vertical-align: middle;
  width: 15px;
  height: 15px;
  border: #555 2px solid;
  border-radius: 3px;
  background-color: transparent;
  position: relative;
  transition: 0.2s ease;
  margin-right: 5px;
}

input#agree:checked+#check {
  border: #0A5 2px solid;
}

input#agree+#check::before {
  content: "";
  z-index: 10;
  border-radius: 53px;
  position: absolute;
  top: 3px;
  left: -4px;
  height: 13px;
  width: 4px;
  transform-origin: top;
  transform: rotate(-35deg);
  opacity: 0;
  background-color: #08E;
  outline: 1px solid white;
  transition: 0.2s ease;
}

input#agree:checked+#check::before {
  opacity: 1;
}

input#agree+#check::after {
  content: "";
  z-index: 10;
  border-radius: 3px;
  position: absolute;
  top: 11px;
  left: 3px;
  height: 20px;
  width: 4px;
  transform-origin: top;
  transform: rotate(225deg);
  opacity: 0;
  background-color: #08E;
  box-shadow: 0px 2px 0px 1px white;
  transition: 0.2s ease;
}

input#agree:checked+#check::after {
  opacity: 1;
} */

input[type="radio"].hidden,
input[type=checkbox].hidden {
  opacity: 0;
  width: 10px;
  margin: 0 -5px;
}

input[type="radio"].modern+label {
  position: relative;
  display: inline-flex;
  padding-left: 10px;
  box-shadow: none !important;
}

input[type="radio"][disabled].modern+label {
  position: relative;
  display: inline-flex;
  padding-left: 10px;
  background: silver;
  box-shadow: none !important;
  transition: 0.1s background ease;
}

input[type="radio"].modern+label::after {
  content: "";
  position: absolute;
  height: 2px;
  width: 0px;
  bottom: 0;
  background-color: var(--dark);
  transition: 0.1s ease;
}

input[type="radio"][disabled]:checked.modern+label::after {
  content: "";
  position: absolute;
  height: 2px;
  width: 0px;
  bottom: 0;
  background-color: var(--dark);
}

input[type="radio"].modern:checked+label::after {
  content: "";
  position: absolute;
  height: 2px;
  width: 65%;
  bottom: 0;
  background-color: var(--dark);
}

input[type="radio"]+label,
input[type=checkbox]:not(#agree)+label {
  width: 40%;
  padding: 2px;
}

input[type=checkbox][disabled]+label {
  color: grey;
}

input[type=checkbox]:not([disabled])+label {
  color: green;
}

input[type="radio"]:first-child:checked+label,
input[type="checkbox"]:checked:not(#agree)+label {
  width: 40%;
  box-shadow: 0 2px 0px 0px #008800FF;
}

input[type="radio"]:first-child:not(:checked)+label,
input[type="checkbox"]:not(:checked):not(#agree)+label {
  box-shadow: 0 0px 0px 0px #008800FF;
  transition: 0.2s ease;
}

input[type="radio"]:not(:first-child):checked+label {
  width: 40%;
  box-shadow: 0 2px 0 0px #880000FF;
}

input:disabled,
select:disabled,
button:disabled,
a[disabled],
textarea:disabled {
  background-color: #55555555;
  color: #FFFFFF55;
}

input:disabled::placeholder,
select:disabled::placeholder,
button:disabled::placeholder,
a[disabled]::placeholder,
textarea:disabled::placeholder {
  color: #00000055;
}


.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 15px 10px 30px 10px;

  .card {
    position: relative;
    width: 200px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px #00000022;
    text-align: center;
  }

  .card:not(.shading):hover {
    scale: 102%;
    box-shadow: 0 6px 10px #00000022;
  }

  .card.shading {
    width: 100%;
    height: 140px;
    background-color: #FFFFFF33;
    box-shadow: none;
    padding: 48px 15px 0px 15px;
    outline: 1px #AAAAAA55 solid;
    color: auto;
  }

  .card.employee {
    background-color: #c1dfff25;
    color: auto;
  }

  .card.f_manager {
    background-color: #82b68d25;
    color: auto;
  }

  .card.m_manager {
    background-color: #b0b9c025;
    color: auto;
  }

  .card.h_manager {
    background-color: #ffebb025;
    color: auto;
  }

  .card.hr {
    background-color: #d69da325;
    color: auto;
  }

  .card.view {
    background-color: #ebdad555;
    color: auto;
  }

  .card.empty {
    padding-top: 45px;
    padding-bottom: 45px;
    font-size: 5.5em;
    background-color: #D0D0D025;
    color: #D0D0D0;
    cursor: pointer;
  }

  .card-title {
    font-size: 1.5em;
    margin: 10px 0;
    font-weight: 900;
  }

  .card-subtitle {
    font-size: 1em;
    margin: 10px 0;
  }

  .card-domtitle {
    font-size: 1em;
    margin: 0;
    position: absolute;
    top: 2px;
    left: 10px;
  }

  .delete-btn {
    padding: 0px 7px;
    position: absolute;
    top: 0px;
    right: 0px;
    cursor: pointer;
    font-size: 1.2em;
    border-radius: 0 10px 0 5px;
    color: black;
    background-color: transparent;
    transition: 0.1s ease;
  }

  button.delete-btn {
    padding: 0px 7px;
    position: absolute;
    top: 0px;
    right: 0px;
    cursor: pointer;
    font-size: 1.2em;
    border-radius: 0 10px 0 5px;
    border: none;
    color: black;
    background-color: transparent;
    transition: 0.1s ease;
  }

  .delete-btn:hover {
    color: white;
    background-color: red;
  }

  .card-number {
    position: absolute;
    bottom: 5px;
    right: 10px;
    cursor: default;
    font-size: 0.8em;
    color: #505050;
  }

  
}