.wat-box {
  padding: 10px;
  box-shadow: 0 3px 13px 0 rgba(18, 43, 70, 0.1);
  /* box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; */
  height:100%;
}

.wat-week-btn-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}


.wat-dashboard-heading {
  font-size: 17.6px;
  margin:0;
}

 .wat-sub-heading {
    font-size: 16px !important;
    margin:4.8px 0px;
   }





.wat-nav-icon {
  font-size: 2rem;
  font-weight: 500;
  color: black;
  cursor: pointer;
}

.wat-nav-icon.disable {
  color: #aaa;
  cursor: not-allowed;
  opacity: 0.5;
}


.wat-progress-circle-btn {
  width: 46px;
  height: 46px;
  position: relative;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;

}

.wat-buttons-wrapper {
  display: flex;
  gap: 10px;
}

.wat-current-date {
  color: #CCA24E;
  padding: 10px;
  font-size: 17.6px;
  margin:0;
}

.wat-week-range {
  color: #CCA24E;
  padding: 10px;
  font-size: 16px;
  margin:0;
}





.wat-event-btn-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wat-event-btn-column h3 {
  margin: 0px;
}

.wat-event-btn {
  padding: 8px;
  background-color: #f0f2f5;
  border:none;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  color:#545861;
  cursor: pointer;
 text-align: start;
}

.wat-event-btn .wat-check-icon {
    padding-left: 10px; 
    display: inline-flex; 
    align-items: center; 
}



.wat-event-btn:hover {
opacity: .8;
  background-color:#f0f2f5;
     color:#545861;
}

.wat-event-btn:focus,
.wat-event-btn:focus-visible {
  outline: none; 
  background-color:#f0f2f5;
  border-color: #f0f2f5;
  color:#545861;
}




.wat-disabled-button {
 color:#545861;
  /* cursor: not-allowed; */
  opacity: 0.8;
  /* pointer-events: none; */
  transition: all 0.3s ease;
}

.wat-event-btn .wat-info-icon {
 /* margin-left: 30px; */
    font-size: 14px;
    float: right;
    padding-right: 10px;
}

.tippy-box,
.tippy-content,
.tippy-popper {
  pointer-events: auto !important;
}

.tippy-popper {
  z-index: 999999 !important;
}





.wat-event-btn[data-group="SINNE"] .wat-check-icon i.bi-check-circle-fill {
    color: #F67E3D; 
}

.wat-event-btn[data-group="KROPP"] .wat-check-icon i.bi-check-circle-fill {
    color: #5B717A; 
}

.wat-event-btn[data-group="RELATION"] .wat-check-icon i.bi-check-circle-fill {
    color: #CCA24E; 
}

.wat-event-btn[data-group="MISSION"] .wat-check-icon i.bi-check-circle-fill {
    color: #19283A; 
}


.category-heading {
  font-size: 17.6px;
  margin:0;
  padding:10px;
  color: #19283A; !important;
}

/* Unique colors for each category */
/* .category-sinne {
    color: #F67E3D !important;
}

.category-kropp {
    color: #5B717A !important;
}

.category-relation {
   color: #CCA24E !important;
}

.category-mission {
    color: #19283A; !important;
} */



/* for tooltip */


.tippy-box[data-theme~='custom-theme'] {
  background-color: #3f3d3d;
  color: white;
}

/* .tippy-box[data-theme~='custom1'] {
  background-color: rgba(255, 99, 132, 1);
  color: black;
}

.tippy-box[data-theme~='custom1'][data-placement^='right']>.tippy-arrow::before {
  border-right-color: rgba(255, 99, 132, 1);
}

.tippy-box[data-theme~='custom2'] {
  background-color: rgba(54, 162, 235, 1);
  color: black;
}

.tippy-box[data-theme~='custom2'][data-placement^='right']>.tippy-arrow::before {
  border-right-color: rgba(54, 162, 235, 1);
}

.tippy-box[data-theme~='custom3'] {
  background-color: rgba(75, 192, 192, 1);
  color: black;
}

.tippy-box[data-theme~='custom3'][data-placement^='right']>.tippy-arrow::before {
  border-right-color: rgba(75, 192, 192, 1);
} */



/* avatar image  */

.wat-png-avatar-image {
  height: 282px !important;
}

/* Vertical progress bar */
.wat-vertical-progress-container {
  width: 35px;
  height: 100%;
  border: 1px solid #000;
  border-radius: 7px;
  overflow: hidden;
  background-color: #f3f3f3;
  position: relative;
  margin: 5px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.wat-vertical-progress-bar {
  width: 100%;
  background-color: #F67E3D !important;
  height: 0;
  transition: height 0.5s ease-in-out;
  position: relative;
}

.wat-vertical-percentage-label {
  font-weight: bold;
  color: rgb(0, 0, 0);
  font-size: 12px;
}



/* Chart */
.wat-chart-canvas {
  height: 250px;
  width: 450px;
}


/* admin chart */

.wat-admin-chart-canvas {
  height: 250px;
}

/* announcement  */
.wat-announcement-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;

}

.wat-announcement-heading h2 {
  margin: 0px;
  font-size: 16px !important;
  text-transform: uppercase;
}


.wat-announcement-heading .wat-view-all {
  background-color: #f0f2f5;
  color:#545861;
  padding: 8px;
  font-size: 14px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-weight: 500;
  line-height: 1;

  
}

.wat-announcement-heading .wat-view-all:hover {
    opacity: 0.8;
    background-color: #f0f2f5;
   color:#545861;
}

.wat-announcement {
  border: 1px solid #ddd;
  padding: 10px;
  margin: 10px 0;
  background-color: #f9f9f9;
  border-left: 3px solid #CCA24E;
  border-radius: 5px;
}

.wat-mark-as-read {
  margin-top: 40px;
}


/* ======================Calendar =========*/

.wat-calendar-heading {
  margin: 3px;
}


.tribe-common.tribe-events.tribe-events-widget.tribe-events-view--shortcode.tribe-events-widget-events-month,
.tribe-common.tribe-events.tribe-events-widget.tribe-events-view--shortcode.tribe-events-widget-events-shortcode-month {
  padding: 0px !important;
}

.bb-template-v2 .wat-box-calendar .widget {
  padding: 0 1.25rem 0 1.25rem !important;
}



/* for admin announcement page */
/* Select all child elements of wat-announcement-form */
.wat-announcement-form-conatainer {
  display: flex;
  padding: 10px;
}

.wat-announcement-form-label {
  font-weight: bold;
}


/* Target only input and button inside the form */
.wat-announcement-form input[type="text"],
.wat-announcement-form textarea,
.wat-announcement-form input[type="submit"] {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
}

/* Focus effect */
.wat-announcement-form textarea:focus,
.wat-announcement-form input:focus {
  border-color: #2271b1;
  background-color: #f0f8ff;
}

.wat-announcement-form input[type="submit"] {
  background-color: #2271b1;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: auto;
  padding: 10px 20px;
  border-radius: 4px;
}

.wat-announcement-form input[type="submit"]:hover {
  background-color: #2271b1;
}


.wat-update-submit {
  display: none;
}


/* ADMIN ANNOUNCEMENT TABLE  */


.wat-styled-table {
  width: 100%;
  border-collapse: collapse;
  margin: 25px 0;
  font-size: 0.9em;
  min-width: 400px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  overflow: hidden;
}

.wat-styled-table thead tr {
  background-color: #2271b1;
  color: #ffffff;
  text-align: left;
  font-weight: bold;
}

.wat-styled-table .wat-th,
.wat-styled-table .wat-td {
  padding: 12px 15px;

}

.wat-styled-table .wat-announcement-td {
  max-width: 780px;
}

.wat-styled-table tbody .wat-tr {
  border-bottom: 1px solid #dddddd;
}

.wat-styled-table tbody .wat-tr:nth-of-type(even) {
  background-color: #f3f3f3;
}

.wat-styled-table tbody .wat-tr:last-of-type {
  border-bottom: 2px solid #2271b1;
}


/* Caption styling */
.wat-styled-table .wat-caption {
  font-size: 1.2em;
  margin-bottom: 10px;
  font-weight: bold;
  color: #333;
}


/* ===========  MEDIA QUERY  ============ */

@media (min-width: 485px) and (max-width: 767px) {
  .wat-event-btn-column {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
  }

  .wat-event-btn {
    flex: 1;

  }


}

@media (min-width: 485px) and (max-width: 580px) {
  .wat-event-btn .wat-info-icon {
    margin-left: 3px;
    font-size: 0.9rem;
  }

  .wat-event-btn {
  }

  .wat-event-btn:hover {

  }

}




@media (max-width: 485px) {
  .wat-event-btn-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
 .wat-event-btn {
	text-align: left;
}

.wat-event-btn .wat-check-icon {
    padding-left: 10px; 
    display: inline-flex; 
    align-items: center; 
}

}



/* Styles for screens smaller than 375px */
@media (max-width: 425px) {
  .wat-nav-icon {
    font-size: 1rem;
  }

  .wat-buttons-wrapper {
    gap: 5px;
  }

  .wat-week-btn-container {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }

  .wat-progress-circle-btn {
    height: 30px;
    width: 30px;
  }

  .wat-png-avatar-image {
    height: 220px !important;
  }

  .wat-vertical-progress-container {
    height: 170px;
  }

}

/* ADMIN DASHBOARD  */

.wat-navigation-icon {
  cursor: pointer;
}


.wat-navigation-icon.disable {
  color: #aaa;
  cursor: not-allowed;
  opacity: 0.5;
}

.wat-horizontal-progress-container {
  width: 100%;
  height: 15px;
  background-color: #eee;
  position: relative;
  margin: 5px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.wat-horizontal-progress-bar {
  height: 100%;
  background-color: #F67E3D;
  width: 0;
  transition: width 0.5s ease-in-out;
  position: relative;
}

/* Target the first progress bar in each .col-md-4 */
.col-md-3:nth-child(1) .wat-horizontal-progress-bar {
  background-color: #F67E3D;
  /* First progress bar color */
}

/* Target the second progress bar in each .col-md-4 */
.col-md-3:nth-child(2) .wat-horizontal-progress-bar {
  background-color: #5B717A;
  /* Second progress bar color */
}

/* Target the third progress bar in each .col-md-4 */
.col-md-3:nth-child(3) .wat-horizontal-progress-bar {
  background-color: #CCA24E;
  /* Third progress bar color */
}

.col-md-3:nth-child(4) .wat-horizontal-progress-bar {
  background-color: #19283A;;
  /* Third progress bar color */
}



/* pagination */

.wat-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}

.wat-pagination a {
  padding: 8px 16px;
  margin: 0 4px;
  text-decoration: none;
  color: #333;
  background-color: #f0f0f0;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.wat-pagination a:hover {
  background-color: #F67E3D;
  color: #fff;
}

.wat-pagination .wat-active {
  background-color: #F67E3D;
  color: #fff;
  pointer-events: none;
}

.wat-pagination .wat-prev,
.wat-pagination .wat-next {
  font-weight: bold;
  background-color: #f0f0f0;
}

.wat-pagination .wat-prev:hover,
.wat-pagination .wat-next:hover {
  background-color: #F67E3D;
  color: #fff;
}



/* FOR CALENDER  */
.wat-box-calendar .tribe-events .tribe-events-calendar-month__day-cell--selected {
  background-color: #CCA24E !important;
}



/* FOR FLUENT BOARD  */

/* @media (min-width: 768px) {
  body.page-template-elementor_canvas .container.mt-3 {
    max-width: 1000px !important;
  }
} */