/*order Fonts*/
@font-face {
  font-family: 'nexa-black';
  src: url('../fonts/Nexa-Black.otf');
}
@font-face {
  font-family: 'nexa-bold';
  src: url('../fonts/Nexa-Bold.otf');
}
@font-face {
  font-family: 'nexa-regular';
  src: url('../fonts/Nexa-Regular.otf');
}

:root {
  --secondary-color: rgb(255, 81, 82); 
  --primary-color: rgb(32, 14, 50);
  --background-color: rgb(244, 244, 244); 
  --inactivity: rgb(102, 102, 102); 
  --text-black-color: #000;
  --text-white-color: #fff;
}
.restaurant-image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
/*  background-image: url("<?php echo $user['image']; ?>");*/
  background-size: cover;
  background-position: center;
}
.form-control:focus {
  box-shadow: none;
  border-color: #BA68C8
}


  /* Target the placeholder text specifically for the 'name' input field */
#name::placeholder, #phone::placeholder {
      color: var(--inactivity); /* Change the color to red */
  }
  #name {
      color: var(--primary-color);
  }
.profile-button {
  background: rgb(99, 39, 120);
  box-shadow: none;
  border: none
}

.profile-button:hover {
  background: #682773
}

.profile-button:focus {
  background: #682773;
  box-shadow: none
}

.profile-button:active {
  background: #682773;
  box-shadow: none
}

.back:hover {
  color: #682773;
  cursor: pointer
}

.labels {
  font-size: 11px
}

.add-experience:hover {
  background: #BA68C8;
  color: #fff;
  cursor: pointer;
  border: solid 1px #BA68C8
}
.password-input {
  position: relative;
}

.toggle-password {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}


.chzn-container {
position: relative;
display: inline-block;
zoom: 1;
display: inline;
}
.chzn-container .chzn-drop {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
background: #fff;
border: 1px solid #CCC;
position: absolute;
top: 29px;
left: 0;
z-index: 1010;
margin: 4px 0 0;
}

.chzn-container-multi .chzn-choices {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s;
-moz-transition: border linear 0.2s;
-o-transition: border linear 0.2s;
transition: border linear 0.2s;
-webkit-transition: box-shadow linear 0.2s;
-moz-transition: box-shadow linear 0.2s;
-o-transition: box-shadow linear 0.2s;
transition: box-shadow linear 0.2s;
background-color: #ffffff !important;
border: 1px solid #cccccc;
cursor: text;
overflow: hidden;
height: auto !important;
height: 1%;
position: relative;
display: block;
padding: 0;
margin: 0;
font-size: 14px;
line-height: 20px;
color: #555555;
}
.chzn-container-multi .chzn-choices li {
float: left;
list-style: none;
}
.chzn-container-multi .chzn-choices .search-field {
white-space: nowrap;
margin: 0;
padding: 0;
}
.chzn-container-multi .chzn-choices .search-field input {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
color: #555555;
background: transparent !important;
border: 0 !important;
font-family: sans-serif;
font-size: 100%;
height: 15px;
padding: 5px;
margin: 1px 0 2px;
outline: 0;
}
.chzn-container-multi .chzn-choices .search-field .default {
color: #999;
}
.chzn-container-multi .chzn-choices .search-choice {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
background-color: #f6f6f6;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(50%, #f6f6f6), to(#f4f4f4));
background-image: -webkit-linear-gradient(#ffffff, #f6f6f6 50%, #f4f4f4);
background-image: -moz-linear-gradient(top, #ffffff, #f6f6f6 50%, #f4f4f4);
background-image: -o-linear-gradient(#ffffff, #f6f6f6 50%, #f4f4f4);
background-image: linear-gradient(#ffffff, #f6f6f6 50%, #f4f4f4);
background-repeat: no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff4f4f4', GradientType=0);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
-moz-background-clip: padding;
color: #555555;
border: 1px solid #999999;
line-height: 13px;
padding: 3px 20px 3px 5px;
margin: 3px 0 3px 5px;
position: relative;
cursor: default;
}
.chzn-container-multi .chzn-choices .search-choice .search-choice-close {
display: block;
position: absolute;
right: 3px;
top: 4px;
width: 12px;
height: 13px;
font-size: 1px;
background: url("chosen-sprite.png") right top no-repeat;
}
.chzn-container-multi .chzn-choices .search-choice .search-choice-close:hover {
background-position: right -11px;
}
.chzn-container-multi .chzn-choices .search-choice.search-choice-disabled {
background-color: #eeeeee;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), color-stop(50%, #f0f0f0), to(#e8e8e8));
background-image: -webkit-linear-gradient(#f4f4f4, #f0f0f0 50%, #e8e8e8);
background-image: -moz-linear-gradient(top, #f4f4f4, #f0f0f0 50%, #e8e8e8);
background-image: -o-linear-gradient(#f4f4f4, #f0f0f0 50%, #e8e8e8);
background-image: linear-gradient(#f4f4f4, #f0f0f0 50%, #e8e8e8);
background-repeat: no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff4f4f4', endColorstr='#ffe8e8e8', GradientType=0);
color: #666;
border: 1px solid #cccccc;
padding-right: 5px;
}
.chzn-container-multi .chzn-choices .search-choice-focus {
background: #d4d4d4;
}
.chzn-container-multi .chzn-choices .search-choice-focus .search-choice-close {
background-position: right -11px;
}
.chzn-container .chzn-results {
margin: 0 4px 4px 0;
max-height: 240px;
padding: 0 0 0 4px;
position: relative;
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.chzn-container .chzn-results li {
display: none;
line-height: 15px;
padding: 5px 6px;
margin: 0;
list-style: none;
}
.chzn-container .chzn-results li em {
background: #feffde;
font-style: normal;
}
.chzn-container .chzn-results .no-results {
background: #f4f4f4;
display: list-item;
}
.chzn-container .chzn-results .group-result {
cursor: default;
color: #999;
font-weight: bold;
}
.chzn-container .chzn-results .group-option {
padding-left: 15px;
}
.chzn-container .chzn-results .active-result {
cursor: pointer;
display: list-item;
}
.chzn-container .chzn-results .highlighted {
background-color: #326dcc;
background-image: -moz-linear-gradient(top, #3875d7, #2a62bc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3875d7), to(#2a62bc));
background-image: -webkit-linear-gradient(top, #3875d7, #2a62bc);
background-image: -o-linear-gradient(top, #3875d7, #2a62bc);
background-image: linear-gradient(to bottom, #3875d7, #2a62bc);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3875d7', endColorstr='#ff2a62bc', GradientType=0);
color: #fff;
}
.chzn-container .chzn-results .highlighted em {
background: transparent;
}
.chzn-container .chzn-results-scroll {
background: white;
margin: 0 4px;
position: absolute;
text-align: center;
width: 321px;
/* This should by dynamic with js */

z-index: 1;
}
.chzn-container .chzn-results-scroll span {
display: inline-block;
height: 17px;
text-indent: -5000px;
width: 9px;
}
.chzn-container .chzn-results-scroll-down {
bottom: 0;
}
.chzn-container .chzn-results-scroll-down span {
background: url("chosen-sprite.png") no-repeat -4px -3px;
}
.chzn-container .chzn-results-scroll-up span {
background: url("chosen-sprite.png") no-repeat -22px -3px;
}
.chzn-container-multi .chzn-results {
margin: 4px;
padding: 0;
}
.chzn-container-multi .chzn-drop .result-selected {
display: none;
}
.chzn-container-active .chzn-choices {
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
border: 1px solid rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \9;
/* IE6-9 */
}

.tabs {
margin-bottom: 100px;
}

.tabs .tab-registers {
display: flex;
background-color: var(--text-white-color);
overflow-x: auto;
margin-left: 25px;
}


.tabs .tab-registers button {
padding: 0.5em;
background-color: var(--text-white-color);
border: none;
font: inherit;
display: flex;

}


.tabs .tab-registers button:hover {
cursor: pointer;
}

.tabs .tab-bodies {
padding: 0.5em;
flex-grow: 1;
}

.tabs button.active-tab {
background-color:var(--primary-color);
color: var(--text-white-color);
  margin-left: -1px;
  position: relative;
  left: 3px;
  border-radius: 10px;
  box-shadow: 3px -3px 6px rgba(0, 0, 0, 0.71);

}

.toggle-set-switch {
position: relative;
display: inline-block;
width: 40px;
height: 20px;
margin-right: 10px;
}

/* Hide the default checkbox input */
.toggle-input, .toggle-input-cat , .toggle-input-print, .toggle-input-display {
display: none;
}

/* Styling for the slider of the toggle switch */
.toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--inactivity);
border-radius: 20px;
transition: 0.4s;

}

/* Styling when the toggle switch is ON */
.toggle-input:checked + .toggle-slider , .toggle-input-cat:checked + .toggle-slider, .toggle-input-print:checked + .toggle-slider, .toggle-input-display:checked + .toggle-slider {
background-color: #0400ff;
}

/* Styling for the circular knob of the slider */
.toggle-slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 2px;
bottom: 2px;
background-color: white;
border-radius: 50%;
transition: 0.4s;
transform: translateX(0px);
}

/* Styling for the circular knob when the toggle switch is ON */
.toggle-input:checked + .toggle-slider:before , .toggle-input-cat:checked + .toggle-slider:before, .toggle-input-print:checked + .toggle-slider:before,
.toggle-input-display:checked + .toggle-slider:before {
transform: translateX(20px);
}

.footer {
position: fixed;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 20px;
bottom: 0;
left: 230px;
width: calc(100% - 230px);
background-color: var(--text-white-color);
padding: 10px;
}

#confirm-btn
{
cursor: pointer;
background-color: var(--secondary-color);
color: var(--text-white-color);
font-size: 14px;
padding: 8px 16px;
border-color: var(--secondary-color);
border-radius: 20px;
margin: 2px;
}


/* CSS for the create-outline icon */
.action-icons ion-icon[name='create-outline'] {
cursor: pointer; 
color: var(--primary-color);
margin-right: 20px;
font-size: 1.3rem;
}
.action-icons ion-icon[name='trash-outline'] {
cursor: pointer; 
color: var(--secondary-color);
margin-right: 20px;
font-size: 1.3rem;
}


@media (max-width: 991px) {

.main, .footer {
  width: 100%;
  left: 0;
}
/* .main.active, .footer.active {
  left: 300px;
} */

}
@media (max-width: 768px) {
  .col-md-6, .col-md-4 {
      flex: 0 0 100%; /* Full width */
      max-width: 100%;
  }
}






/* Style for checkboxes */
.checkbox-column input[type="checkbox"] {
  display: none; 
}

.checkbox-column {
  column-count: 4; 
  column-gap: 20px; 
  margin: 20px 0;
}

/* Ensure each table label is displayed properly */
.checkbox-column label {
  display: block;
  margin-bottom: 5px;
  cursor: pointer;
  column-break-inside: avoid; /* Prevent labels from breaking across columns */
}

/* Style for checked state */
.checkbox-column input[type="checkbox"]:checked + label {
  color: #333; 
}

/* Style for checkbox appearance */
.checkbox-column input[type="checkbox"] + label:before {
  content: "\2610";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 5px;
  border: 1px solid #999;
  border-radius: 3px;
  text-align: center;
  line-height: 16px;
}

.checkbox-column input[type="checkbox"]:checked + label:before {
  content: "\2611"; 
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}