/* Main */
.school {
    
    padding: 20px;
}

/* Topbar */
.topbar {
    background: #fff;
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* Form Card */
.form-card {
    background: #fff;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

/* Table */
.table-box {
    background: #fff;
    border-radius: 15px;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);

    overflow-x: auto;   /* ADD THIS */
}
.table {
    width: 100%;
    border-collapse: collapse;
}
.table td,
.table th {
    word-break: break-word;
}
.msg{font-family:cursive;font-size: 13px;color:red;}
/* Mobile */
@media (max-width: 768px) {
    
    .school {
        margin-left: 0;
    }
}

.close-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  position: relative;
  cursor: pointer;
  border-radius: 6px;
}

/* Create the X */
.close-btn::before,
.close-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  background: #444;
  transform-origin: center;
  transition: background 0.2s ease;
}

.close-btn::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.close-btn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Hover */
.close-btn:hover {
  background: #f3f3f3;
}

.close-btn:hover::before,
.close-btn:hover::after {
  background: #d32f2f;
}

/* Click */
.close-btn:active {
  background: #e0e0e0;
}

/* Focus */
.close-btn:focus-visible {
  outline: 2px solid #d32f2f;
  outline-offset: 2px;
}

   .edit-btn {
    padding: 10px 16px;
    border: none;
    /*border-radius: 6px;*/
    color: white;
    cursor: pointer;
    font-size: 14px;
    margin-right: 10px;
  }

  .edit-btn {
    background-color: #0d6efd;
  }

  .edit-btn:hover {
    background-color: #0b5ed7;
  }
  .delete-btn {
    padding: 10px 16px;
    border: none;
    /*border-radius: 6px;*/
    color: white;
    cursor: pointer;
    font-size: 14px;
    margin-right: 10px;
  }

  .delete-btn {
    background-color: #dc3545;
  }

  .delete-btn:hover {
    background-color: #bb2d3b;
  }
  .clear-btn {
    padding: 10px 16px;
    border: none;
    /*border-radius: 6px;*/
    color: white;
    cursor: pointer;
    font-size: 14px;
    margin-right: 10px;
  }

  .clear-btn {
    background-color: #6c757d;
  }

  .clear-btn:hover {
    background-color: #5c636a;
  }

  #i {
    margin-right: 5px;
  }



  /*######################### Student ##############################*/
     .custom-input {
        height: 55px;
        border-radius: 12px;
        border: 1px solid #ced4da;
        padding: 18px 14px 8px;
        font-size: 15px;
        transition: 0.3s;
    }

    .custom-input:focus {
        border-color: #0d6efd;
        box-shadow: 0 0 8px rgba(13,110,253,0.2);
    }

    .input-wrapper {
        position: relative;
    }

    .floating-label {
        position: absolute;
        top: 3px;
        left: 14px;
        font-size: 12px;
        color: #6c757d;
        background: #fff;
        padding: 0 4px;
        z-index: 1;
    }