/******************************************************************************
 * Tables
 *****************************************************************************/
.data-row,.tcc-sort,.tcc-info,.tcc-data-cell{cursor:pointer;}
.tcc-counter{cursor:grab;}

.tableexport-caption{text-align:left;}

thead.tcc-sticky th {
	position:sticky;
	top: -1px;
	background: #fff;
	white-space:nowrap;
	border:1px solid #ececec;
}

.tcc-small{font-size:.8em;}
.tcc-border{border:1px solid #ccc;}
.tcc-border-bottom{border-bottom:1px solid #ccc;}

.tcc-note{font-size:.85em;color:#595959;background-color:#fff;}

.tcc-strike {text-decoration: line-through;}

.tcc-padding-left { padding-left: 8px; }

/******************************************************************************
 * Shared Schedules and Calendars Forms
 *****************************************************************************/
.tcc-button-container {
	max-width:20em;
}

.tcc-field-container {
	border:1px solid #ececec;
	border-width: 0 0 1px 0;
	padding: 0 0 4px 4px;
}

/******************************************************************************
 * Calendar & Tooltips
 *****************************************************************************/
#tcc_calendar {
    font-family: Arial,Helvetica,sans-serif;
    margin:auto;
}

.fc-event-main-frame {
    display:block !important;
}

.fc-daygrid-event {
    white-space:normal;
}

td.fc-daygrid-day, th.fc-day {
    border:1px solid aqua;
}

.tooltip_item {
    font-family: Arial;
    font-size:1.2em;
}

.tooltip_title {
    font-size:1.3em;
    background-color:#ececec;
}

.tooltip_body {
    background-color: #FFF;
}

.tooltip_row:after {
    content: '';
    display: block;
    clear: both;
}

.tooltip_label, .tooltip_data {
    float:left;
}

.tooltip_label {
    min-width:5em;
    font-weight:bold;
}

ul.navigation {
    z-index: 1; /* prevent calendar showing through footer/menu */
}

/******************************************************************************
 * Toggle Buttons
 *****************************************************************************/
/* Toggle Button */
input.tcc-toggle{
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
position: relative;
border: 0;
outline: 0;
cursor: pointer;
margin: 10px;
}

/* Surface of toggle button */
input.tcc-toggle:after {
content: '';
width: 60px;
height: 28px;
display: inline-block;
background: rgba(196, 195, 195, 0.55);
border-radius: 18px;
clear: both;
}

/* Contents before checkbox to create toggle handle */
input.tcc-toggle:before {
content: '';
width: 32px;
height: 32px;
display: block;
position: absolute;
left: 0;
top: -3px;
border-radius: 50%;
background: rgb(255, 255, 255);
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}

/* Shift the handle to left on check event */
input.tcc-toggle:checked:before {
left: 32px;
box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.6);
}

/* Background color when toggle button will be active */
input.tcc-toggle:checked:after {
background: #16a085;
}

/* Transition for smoothness */
input.tcc-toggle,
input.tcc-toggle:before,
input.tcc-toggle:after,
input.tcc-toggle:checked:before,
input.tcc-toggle:checked:after {
transition: ease .3s;
-webkit-transition: ease .3s;
-moz-transition: ease .3s;
-o-transition: ease .3s;
}

/* Label vertically centered on toggle */
div.tcc-toggle-label{
	display:inline-block;
	position:relative;
	top:-8px;
}


/******************************************************************************
 * Radio buttons look like checkmarks
 *****************************************************************************/
.tcc-checkmark {

}

.tcc-checkmark {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  position: relative;
  top: 0.1rem;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2rem;
  width: 2rem;
  transition: all 0.15s ease-out 0s;
  background: #cbd1d8;
  border: 1px solid #004d33;
  border-radius:50%;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  outline: none;
  position: relative;
}
.tcc-checkmark:hover {
  background: #9faab7;
}
.tcc-checkmark:checked {
  /*background: #40e0d0;*/
  background: #004d33;
}
.tcc-checkmark:checked::before {
  width: 2rem;
  height: 2rem;
  display:flex;
  content: '\f00c';
  font-size: 2rem;
  font-weight:bold;
  position: absolute;
  align-items:center;
  justify-content:center;
  font-family:'Font Awesome 6 Free';
}
.tcc-checkmark:checked::after {
  -webkit-animation: tcc-click-expand-wave 0.65s;
  -moz-animation: tcc-click-expand-wave 0.65s;
  animation: tcc-click-expand-wave 0.65s;
  background: #40e0d0;
  content: '';
  display: block;
  position: relative;
}

@keyframes tcc-click-expand-wave {
  0% {
    height: 40px;
    width: 40px;
    opacity: 0.35;
    position: relative;
  }
  100% {
    height: 200px;
    width: 200px;
    margin-left: -80px;
    margin-top: -80px;
    opacity: 0;
  }
}


/******************************************************************************
 * Badges
 *****************************************************************************/
.tcc-badge {
	position: absolute;
	top: -10px; /* Adjust as needed for desired vertical offset */
	right: -10px; /* Adjust as needed for desired horizontal offset */
	background-color: #004D33;
	color: #FFFFFF;
	border-radius: 50%; /* Makes it circular */
	padding: 5px 8px; /* Adjust padding for size and number display */
	font-size: 0.8em;
	font-weight: bold;
	display: flex; /* For centering the number */
	justify-content: center;
	align-items: center;
	min-width: 20px; /* Ensures a minimum size for single-digit numbers */
	height: 20px; /* Ensures a consistent height */
}


/******************************************************************************
 * Menu
 *****************************************************************************/
.tcc-menu-selected { background-color:#3F5A69 !important; color:#FFF !important; /*background-color:#007fff;*/ }
.w3-bar-item {text-decoration:none;}
li.ui-tabs-tab.ui-state-active {background-color:#3F51B5;} 


.fa-eye, .fa-eye-slash {cursor: pointer;}