* {
    box-sizing: border-box;
}

.row::after {
    content: "";
    clear: both;
    display: table;
}

[class*="col-"] {
    float : left;
    padding : 15px;
}

[class*="col-" ] {
    width : 100%;
}

html    {
    font-family: Montserrat, Arial, Helvetica, sans-serif;
}

body    {
    background-color: rgb(196, 196, 224);
    margin : 0px;
    height: 300px;
    width: 100%;
}

.headerlogo {
    width : 10%;
    height : auto;
}

.header_panel h1  {
    padding : 0px;
    font-size : 18px;
    color: white;
    margin : 0px;
}

.structure  {
    width: 100%;
    height: 100%;
    background-color: blue;
}

.header_panel   {
    width: 100%;
    height: 30%;
    background-color:   rgb(37, 37, 117);
}

.LogOut {
  /*float : right;*/
  position : absolute;
  padding : 10px;
  height : 10%;
}

.LogOutIcon {
  height : 35px;
}

.main_panel {
    background-color: rgb(196, 196, 224);
    width : 100%;
    height : auto;
}

.footer_panel   {
    background-color:rgb(0, 0, 177);
    padding : 20px 10px;
}

.footer_panel p {
    margin : 0px;
    font-size: 10px;
    color:rgb(255, 255, 255);
}

@media only screen and (min-width: 600px) {
    .col-1 {width: 8.33%;}
    .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%;}

    .calendar-cell {
        min-height: 50px;
        font-size: 0.9rem;
    }
}

/*Supervisor*/
.header_panel_supervisor   {
    width: 100%;
    height: auto;
    background-color:   rgb(255, 213, 74);
}

.header_panel_supervisor h1  {
    padding : 0px;
    font-size : 18px;
    color: rgb(20, 20, 20);
    margin : 0px;
}

div.section-header {
    padding: 10px 0 0;
    text-align: center;
}
div.section-header h3 {
    margin: 10px;
}

.float-left {
    float: left;
}

.clear-left {
    clear: left;
}

div.notification {
    padding: 10px;
    margin: 5px;
    border: 2px dashed; 
    border-radius: 10px;
}

/* Notification types */
.notice {
    border-color: #2196F3;
    background-color: #E3F2FD;
    color: #0D47A1;
}

.warning {
    border-color: #FFC107;
    background-color: #FFF8E1;
    color: #FF6F00;
}

.error {
    border-color: #F44336;
    background-color: #FFEBEE;
    color: #B71C1C;
}

.success {
    border-color: #4CAF50;
    background-color: #E8F5E9;
    color: #1B5E20;
}

/* Icon styling */
.icon {
    font-size: 20px;
    flex-shrink: 0; /* Prevents icon from resizing */
}

.calendar {
    width: 90%;
    max-width: 600px;
    background: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
    margin: 10px auto;
}
.calendar-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background: #007bff;
    color: #fff;
}
.calendar-header a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.2);
}
.calendar-header a:hover {
    background: rgba(255, 255, 255, 0.3);
}
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: #ddd;
}
.calendar-cell {
    background: #fff;
    padding: 5px;
    text-align: center;
    min-height: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.calendar-cell a {
    text-decoration: none;
    color: #007bff;
}
.current-day {
    border: 2px solid #007bff;
    border-radius: 50%;
    padding: 5px;
    color: #007bff;
    font-weight: bold;
}
.bg-green { background: #d4edda; }
.bg-blue { background: #cce5ff; }
.bg-yellow { background: #fff3cd; }
.bg-red { background: #f8d7da; }

.calendar-header h3 {
    margin: 0 auto;
}

.day-viewed {
    background: #10f509;
}

/** PAGE TABS **/
.PageTabs div {
    background-color : rgb(255, 255, 190);
    border-radius : 15px 15px 0px 0px;
    padding: 5%;
    max-width : 130px;
    height : 50px;
    text-align: center;
    display : inline-block;
}

.PageTabs div label {
    padding-top : 50px;
    font-size : medium;
    width : 150px;
    height : 50px;
    text-decoration : none;
}

.PageTabs div:not([class=active]) {
    background-color : rgb(240 105 150);
}

.PageTabContent {
    background-color : rgb(255, 255, 190);
    padding: 10px;
}

.PageTabContentSection {
    background-color : rgb(245, 245, 245);
    padding: 5px;
}

/** REGISTRATION FORM **/
/* Form Styles */
.form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

label {
    font-weight: bold;
}

input[type="text"],
input[type="number"],
input[type="date"],
input[type="password"],
select,
input[type="file"] {
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #d1d5db;
    background-color: #ffffff;
    color: #333;
    max-width: 325px;
}

input[type="radio"] {
    margin-right: 5px;
}

input:focus,
select:focus {
    outline: none;
    border-color: #1d4ed8;
}

.image-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.image-container .image-box {
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.image-container .image-box img {
    max-width: 100%;
    max-height: 100%;
}

.circular-image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid #ccc;
    object-fit: cover;
}

.form-actions {
    margin-bottom: 10px;
    text-align: center;
}

.form-actions button {
    padding: 10px;
    margin: 5px;
    align-items: center;
}

.form-actions button.save,
.form-actions button.edit {
  max-width: 45%;
  background: #28a745;
}

.form-actions button.cancel {
  max-width: 45%;
  background: #2196F3;
}

.form-actions button.create {
  max-width: 45%;
  background: #28a745;
}

input.error,
select.error {
    background: rgb(240, 110, 110);
}

/** EVALUATION FORM **/
.container {
    padding: 20px;
    background: rgb(255, 255, 190);
  }

  .container h1, 
  .container h2, 
  .container h3 {
    margin: 10px 0;
    font-weight: bold;
  }

/* Form Section */
.form-section {
    margin-bottom: 30px;
  }

  .item {
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
  }

  .item:nth-child(odd) {
    background-color: #f0f8ff;
  }

  .item:nth-child(even) {
    background-color: #e6f7f7;
  }

  .question {
    font-size: 16px;
    margin-bottom: 5px;
  }

  .star-rating {
    display: flex;
    gap: 5px;
  }

  .star {
    font-size: 24px;
    color: #ccc;
    cursor: pointer;
  }

  .star.selected {
    color: #ffc107;
  }

  .star-guide {
    font-size: 24px;
    color: #ccc;
    cursor: pointer;
  }
  .star-guide.selected {
    color: #69b4fb;
  }

  /* Sub-Total and TOTAL */
  .summary-row {
    padding: 10px;
    margin-top: 10px;
    background: #f3f3f3;
    border-radius: 5px;
  }

  .summary-row p {
    margin: 5px 0;
  }

  /* General Summary Section */
  .general-summary {
    background-color: #fbe7c6;
    padding: 15px;
    border-radius: 8px;
    margin-top: 20px;
  }

  .general-summary p {
    margin: 5px 0;
  }

  /* Summary Row Grid */
.summary-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Space between columns */
    padding-top: 10px;
  }
  
  .summary-grid div {
    width: 100%; /* Two equal columns */
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #555;
  }
  
  .summary-grid span:first-child {
    font-weight: bold; /* Highlight the label */
  }

/* Revised Rating Scale */
.rating-scale {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f8f9fa; /* Light grey for subtle distinction */
    border: 1px solid #d6d8db; /* Grey border for structure */
    border-radius: 5px;
  }
  
  .rating-scale h3 {
    margin: 0 0 15px;
    font-size: 16px;
    color: #333;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  .rating-item {
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
  }
  
  .rating-item:last-child {
    margin-bottom: 0;
  }
  
  .star-label {
    font-size: 14px;
    font-weight: bold;
    color: #555;
    width: 95px;
    flex-shrink: 0;
  }
  
  .rating-item span.description {
    font-size: 13px;
    font-weight: 300;
    color: #666;
    line-height: 1.5;
  }

  span.caption {
    font-family: serif;
    font-style: italic;
  }

/* Button Container */
.form-buttons {
    display: flex;
    justify-content: center; /* Center-align the buttons */
    gap: 20px; /* Space between buttons */
    margin-top: 20px;
  }
  
  /* Button Styles */
  .btn {
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-transform: uppercase;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  
  /* Finalize Button */
  .finalize-btn {
    background-color: #28a745; /* Green */
    color: #fff;
  }

  button.disabled {
    background-color: gray; /* Gray */
  }
  
  .finalize-btn:hover {
    background-color: #218838; /* Darker green */
  }
  
  /* Dashboard Button */
  .dashboard-btn {
    background-color: #007bff; /* Blue */
    color: #fff;
  }
  
  .dashboard-btn:hover {
    background-color: #0056b3; /* Darker blue */
  }

  .underlined {
    text-decoration: underline;
  }

  /* Comments Section */
.log-comments {
  margin-bottom: 0;
}

.comment-callout {
  background: #f6f6d4;
  border: 1px dashed #ccc;
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 2px;
}

/* Comment Metadata */
.comment-meta {
  font-size: 0.5rem;
  color: #888;
  margin: 0;
}

/* Comment Text */
.comment-text {
  font-size: 0.9rem;
  color: #333;
  margin: 0;
}

/* Comment Section */
.log-comment {
  margin-bottom: 5px;
}

.comment-box {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 0.9rem;
  resize: none;
}

/* Actions (Bottom Row) */
.log-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.btn-comment,
.btn-comment-submit,
.btn-comment-cancel,
.btn-approve,
.btn-reject {
  padding: 5px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}

.btn-comment,
.btn-comment-submit {
  background: #2885a7;
  color: #fff;
}

.btn-comment-cancel {
  background: lightslategray;
  color: #fff;
}

div.StudentListContainer div.List {
  background-color: rgb(134, 134, 255);
  width: 100%;
  padding: 2%;
  border-radius: 15px;
  display: flex;
  margin-bottom: 10px;
}

#map {
  width: 100%;
  height: 300px;
  position: relative;
  z-index: 1;
  border: 2px solid #ccc;
}

div.user-name, span.name {
  font-weight: bold;
}

div.rating-display {
  text-align: center; 
  font-size: 25pt; 
  font-weight: bold; 
  color: rgb(10, 250, 10);
}

button.btn-list {
  background-color: rgb(215, 241, 255);
  margin: 2px;
  width: 100%;
  min-width: 75px;
  border: 0px;
  border-radius: 15px;
  padding: 10% 10%;
  font-size: 12pt;
}