/* #0073ea -primary color*/
/* hover - #0060b9 */

/* Figtree font */
.figtree-font-sidebar {
    font-family: "Figtree", sans-serif !important;
    font-optical-sizing: auto;
    /* font-weight: ; */
    font-style: normal;
}

body {
    font-family: "Figtree", sans-serif !important;
    font-optical-sizing: auto;
    /* font-weight: ; */
    font-style: normal;
}
.floverfy-primary-color{
	color:#0073ea  ;
	}
.floverfy-table-border{
	border-left: 4px solid #00c875 !important;
}
.floverfy-table-border-modal{
	border-left: 4px solid #d25269 !important;
}
.flverfy-table-border-primary-color{
	border-left: 4px solid #0073ea !important;
}
.btn-bg-primary:hover {
    background-color: #0060b9; /* Change to desired hover background color */
    color: white; /* Change to desired hover font color */
}
.btn-icon-danger:hover{

    color: #d25269; /* Change to desired hover font color */
}

/* .btn:hover{
	color: #1BAA61;
} */
	.table td {
		padding-top: 1px !important;
		/* Adjust the padding value according to your preference */
		padding-bottom: 1px !important;
		/* Adjust the padding value according to your preference */
	}
	td {
		border-bottom: 1px solid #c9cbd0 !important;
		border-right: 1px solid #c9cbd0 !important;
   
	}
	th {
		border-bottom: 1px solid #c9cbd0 !important;
		border-right: 1px solid #c9cbd0 !important;
    text-transform: capitalize !important;
    background-color: #F4F6F6 !important;

	}
	/* tr:hover td {
    background-color: #f5f5f5 !important;
  } */
  /* table tr .tr-hover-effect :hover td {
    background-color: #f5f5f5 !important;
} */
tr.tr-hover-effect:hover td {
  background-color: #f5f5f5 !important;
}.fc-scrollgrid  {
  padding: 5px !important;
}  
/* #student-compleet_list tbody tr:hover td:not(:nth-child(4)) {
  background-color: #f5f5f5; /* Your hover color */
/* } */ */
	/* Borders for th elements */
.tb_sub th
{
  padding: 10px !important;
	}
.tb_sub td {
padding: 10px !important;
        }
.tb_padding-8 th
{
  padding: 6px !important;
          }
.tb_padding td {
padding: 5px !important;
        }
	table {
		border: 1px solid #c9cbd0 !important;
		border-right: 0px solid #c9cbd0 !important;
	}
    .floverfy-modal-header { 
		border-bottom: 0px !important;
	}
	  .floverfy-input {
        border: 1px solid  #d0d4e4;
        transition: border-color 0.3s ease-in-out;
        outline: none;
		border-radius:.35rem !important;
		border-left:2px solid #d25269 !important;
    }

    /* Styling for when input is focused */
    .floverfy-input:focus {
        border-color:  #d25269;
		box-shadow: 0 0 2px solid #d25269;
    }
	.input_style {
		border-radius: .35rem !important;
		border: 1px solid #d0d4e4 !important
	}
	.floverfy-input {
		border: 1px solid #b5b8c2;
		font-weight: 400 !important;
	}

	.label_padding {
		padding-bottom: 2px !important;
	}


	.prefix_dropdown {
		border-radius: 0px;

	}

	.floverfy-width {
		height: 46px !important;
		/* Adjust the width as per your requirement */
	}
	.floverfy-checkbox {
		border-radius: 0px;
	}
    .white {
        color:white
    }
    .green {
        color:#03ad67
    }
	.floverfy-label-red{
		color:#d25269
	}
	.floverfy-label-primary{
		color:#0073ea
	}
	.floverfy-label-geen{
		color:#03ad67
		
	}
	.floverfy-label-geen{
		color:#03ad67
		
	}
	.floverfy-btn-success {
		background-color: #1BAA61 !important;
		color: white !important; /* Font color */
       transition: background-color 0.3s ease ; /* Smooth transition effect */
	}
		/* Styles for hover state */
	/* .floverfy-btn-success:hover {
		background-color: #18884E !important;
	} */
	.floverfy-btn-danger {
		background-color: #d83a52 !important;
		color: white !important; /* Font color */
       transition: background-color 0.3s ease ; /* Smooth transition effect */
	}
		/* Styles for hover state */
	/* .floverfy-btn-danger:hover {
		background-color: #b63546 !important;
	} */
	.floverfy-btn-warning {
		background-color: #ffcb00 !important;
		color: rgb(0, 0, 0) !important; /* Font color */
       transition: background-color 0.3s ease ; /* Smooth transition effect */
	}
		/* Styles for hover state */
	/* .floverfy-btn-warning:hover {
		background-color: #eaaa15 !important;
	} */
	.stickyDiv {
		position: -webkit-sticky; /* For Safari */
		position: sticky;
		top: 0;
		z-index: 1000; /* Ensure it stays on top of other content */
	}
.vertical-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    width: 20px; /* Adjust width as needed */
	text-align: center;
}
.swal2-confirm-button-custom {
	background-color: #008000; /* The green color for confirm */
	color: white;
  }
  
  
  .swal2-cancel-button-custom {
	background-color: #c00; /* Red color for cancel */
	color: white;
  }
  
  .swal2-content-details div {
	margin-bottom: 10px;
  }
  .checkbox-wrapper-30 .checkbox {
    --bg: #fff;
    --brdr: #c6c9c7;
    --brdr-actv: #1BAA61 ;
    --brdr-hovr: #bbc1e1;
    --dur: calc((var(--size, 2)/2) * 0.6s);
    display: inline-block;
    width: calc(var(--size, 1) * 22px);
    position: relative;
  }
  .checkbox-wrapper-30 .checkbox:after {
    content: "";
    width: 100%;
    padding-top: 100%;
    display: block;
  }
  .checkbox-wrapper-30 .checkbox > * {
    position: absolute;
  }
  .checkbox-wrapper-30 .checkbox input {
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    background-color: var(--bg);
    border-radius: calc(var(--size, 1) * 4px);
    border: calc(var(--newBrdr, var(--size, 1)) * 1px) solid;
    color: var(--newBrdrClr, var(--brdr));
    outline: none;
    margin: 0;
    padding: 0;
    transition: all calc(var(--dur) / 3) linear;
  }
  .checkbox-wrapper-30 .checkbox input:hover,
  .checkbox-wrapper-30 .checkbox input:checked {
    --newBrdr: calc(var(--size, 1) * 2);
  }
  .checkbox-wrapper-30 .checkbox input:hover {
    --newBrdrClr: var(--brdr-hovr);
  }
  .checkbox-wrapper-30 .checkbox input:checked {
    --newBrdrClr: var(--brdr-actv);
    transition-delay: calc(var(--dur) /1.3);
  }
  .checkbox-wrapper-30 .checkbox input:checked + svg {
    --dashArray: 16 93;
    --dashOffset: 109;
  }
  .checkbox-wrapper-30 .checkbox svg {
    fill: none;
    left: 0;
    pointer-events: none;
    stroke: #1BAA61;
    stroke-dasharray: var(--dashArray, 93);
    stroke-dashoffset: var(--dashOffset, 94);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2px;
    top: 0;
    transition: stroke-dasharray var(--dur), stroke-dashoffset var(--dur);
  }
  .checkbox-wrapper-30 .checkbox svg,
  .checkbox-wrapper-30 .checkbox input {
    display: block;
    height: 80%;
    width: 80%;
  }
  
  .checkbox-wrapper-40 .checkbox {
    --bg: #fff;
    --brdr: #c6c9c7 ;
    --brdr-actv: #007bff;
    --brdr-hovr: #007bff;
    --dur: calc((var(--size, 2)/2) * 0.6s);
    display: inline-block;
    width: calc(var(--size, 1) * 22px);
    position: relative;
  }
  .checkbox-wrapper-40 .checkbox:after {
    content: "";
    width: 100%;
    padding-top: 100%;
    display: block;
  }
  .checkbox-wrapper-40 .checkbox > * {
    position: absolute;
  }
  .checkbox-wrapper-40 .checkbox input {
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    background-color: var(--bg);
    border-radius: calc(var(--size, 1) * 4px);
    border: calc(var(--newBrdr, var(--size, 1)) * 1px) solid;
    color: var(--newBrdrClr, var(--brdr));
    outline: none;
    margin: 0;
    padding: 0;
    transition: all calc(var(--dur) / 3) linear;
  }
  .checkbox-wrapper-40 .checkbox input:hover,
  .checkbox-wrapper-40 .checkbox input:checked {
    --newBrdr: calc(var(--size, 1) * 2);
  }
  .checkbox-wrapper-40 .checkbox input:hover {
    --newBrdrClr: var(--brdr-hovr);
  }
  .checkbox-wrapper-40 .checkbox input:checked {
    --newBrdrClr: var(--brdr-actv);
    transition-delay: calc(var(--dur) /1.3);
  }
  .checkbox-wrapper-40 .checkbox input:checked + svg {
    --dashArray: 16 93;
    --dashOffset: 109;
  }
  .checkbox-wrapper-40 .checkbox svg {
    fill: none;
    left: 0;
    pointer-events: none;
    stroke: #007bff;
    stroke-dasharray: var(--dashArray, 93);
    stroke-dashoffset: var(--dashOffset, 94);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2px;
    top: 0;
    transition: stroke-dasharray var(--dur), stroke-dashoffset var(--dur);
  }
  .checkbox-wrapper-40 .checkbox svg,
  .checkbox-wrapper-40 .checkbox input {
    display: block;
    height: 80%;
    width: 80%;
  }
  .checkbox-wrapper-20 .checkbox {
    --bg: #fff;
    --brdr: #dc3545 ;
    --brdr-actv: #007bff;
    --brdr-hovr: #dc3545;
    --dur: calc((var(--size, 2)/2) * 0.6s);
    display: inline-block;
    width: calc(var(--size, 1) * 22px);
    position: relative;
  }
  .checkbox-wrapper-20 .checkbox:after {
    content: "";
    width: 100%;
    padding-top: 100%;
    display: block;
  }
  .checkbox-wrapper-20 .checkbox > * {
    position: absolute;
  }
  .checkbox-wrapper-20 .checkbox input {
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    background-color: var(--bg);
    border-radius: calc(var(--size, 1) * 4px);
    border: calc(var(--newBrdr, var(--size, 1)) * 1px) solid;
    color: var(--newBrdrClr, var(--brdr));
    outline: none;
    margin: 0;
    padding: 0;
    transition: all calc(var(--dur) / 3) linear;
  }
  .checkbox-wrapper-20 .checkbox input:hover,
  .checkbox-wrapper-20 .checkbox input:checked {
    --newBrdr: calc(var(--size, 1) * 2);
  }
  .checkbox-wrapper-20 .checkbox input:hover {
    --newBrdrClr: var(--brdr-hovr);
  }
  .checkbox-wrapper-20 .checkbox input:checked {
    --newBrdrClr: var(--brdr-actv);
    transition-delay: calc(var(--dur) /1.3);
  }
  .checkbox-wrapper-20 .checkbox input:checked + svg {
    --dashArray: 16 93;
    --dashOffset: 109;
  }
  .checkbox-wrapper-20 .checkbox svg {
    fill: none;
    left: 0;
    pointer-events: none;
    stroke: #007bff;
    stroke-dasharray: var(--dashArray, 93);
    stroke-dashoffset: var(--dashOffset, 94);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2px;
    top: 0;
    transition: stroke-dasharray var(--dur), stroke-dashoffset var(--dur);
  }
  .checkbox-wrapper-20 .checkbox svg,
  .checkbox-wrapper-20 .checkbox input {
    display: block;
    height: 80%;
    width: 80%;
  }
  


  .sticky_footer {
    position: sticky;
    bottom: 0;
    background: rgb(241, 238, 238);
    padding: 15px 5px;
    /* box-shadow: 0 -5px 10px rgba(0,0,0,0.1); */
    z-index: 1000;
}
.my-card {
    max-height: 500px;
    overflow-y: auto;
}
.week-filter {
  display: flex;
  justify-content: center; /* Center the buttons horizontally */
  gap: 10px; /* Space between buttons */
}

.filter-btn {
  background-color: #ffffff; /* White background */
  border: 1px solid #cccccc; /* Grey border */
  padding: 8px 16px; /* Padding around the text */
  font-size: 14px; /* Text size */
  cursor: pointer; /* Pointer cursor on hover */
  transition: background-color 0.3s; /* Smooth transition for background color */
}

.filter-btn:hover {
  background-color: #f0f0f0; /* Light grey background on hover */
}

.current {
  border: 2px solid #000000; /* Thicker black border for the current button */
}
/* Limit image width to avoid overflow the container */
img {
  max-width: 100%; /* This rule is very important, please do not ignore this! */
}

#canvas {
 
  background-color: #ffffff;
  cursor: default;
  border: 1px solid black;
}
.image-input {
  position: relative;
}

.crop-icon {
  position: absolute;
  bottom: 10px;
  left: 10px !important;
  display: none; /* Hide by default */
}

/* Show crop icon when image is uploaded */
.image-input-wrapper img[src] ~ .crop-icon {
  display: block;
}
.privilage-modal-dialog {
  max-width: 90% !important;
}

.privilage-modal-content {
  height: 90vh !important;
  display: flex;
  flex-direction: column;
}

.privilage-modal-body {
  display: flex;
  width: 100%;
  flex: 1;
  overflow: hidden;
}

.privilage-sidebar {
  width: 250px;
  background-color: #f8f9fa;
  border-right: 1px solid #dee2e6;
  overflow-y: auto;
}

.privilage-content {
  flex-grow: 1;
  padding: 1rem;
  overflow-y: auto;
}

.privilage-nav-link.active {
  font-weight: bold;
}

.privilage-nav-link {
  cursor: pointer;
}

.privilage-switch {
  display: inline-block;
  width: 34px;
  height: 20px;
  position: relative;
}

.privilage-switch input {
  display: none;
}

.privilage-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}

.privilage-slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .privilage-slider {
  background-color: #007bff;
}

input:checked + .privilage-slider:before {
  transform: translateX(14px);
}
/* .image-input-placeholder {
  background-image: url('../media/svg/files/blank-image.svg');
}

[data-bs-theme="dark"] .image-input-placeholder {
  background-image: url('../media/svg/files/blank-image.svg');
} */
.auto-width {
  width: auto !important;
  table-layout: auto!important;
  border-collapse: collapse!important;
}

.auto-width th, .auto-width td {
  padding: 8px!important;
  border: 1px solid #ddd!important;
  white-space: nowrap!important;
  
}

.auto-width th {
  min-width: 70px!important;
}

/* .checkbox-wrapper-30, .checkbox-wrapper-40 {
  display: inline-block;
} */

.checkbox {
  display: inline-block;
}

.division-title {
  background-color: #f8f9fa;
}

.division-row-divider td {
  background-color: #f1f1f1;
}

.kt_app_content {
  
    flex: 1;
}
.capitalize {
  text-transform: capitalize;
}
.btn-close {
  background: none; /* Removes any background */
  color: white; /* Sets the icon color to white */
  border: none; /* Removes the border */
}

/* Ensures the icon appears correctly on all backgrounds */
.btn-close::before {
  filter: invert(1);
}
/* Ensure the Typeahead dropdown matches the input field width */
.tt-menu {
  background-color: #f0f0f0; /* Change this to your desired background color */
  border-radius: 4px; /* Optional: to round the corners */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Optional: adds a shadow effect */
  width: 100% !important; /* Ensure the dropdown width is 100% of the input field */
}

/* Set the background color for each suggestion */
.tt-suggestion {
  padding: 8px 12px;
  cursor: pointer;
}

/* Highlight the suggestion on hover */
.tt-suggestion:hover {
  background-color: #dcdcdc; /* Change this to your desired hover color */
}