:root {
  --primary-color: #2c3495;
  /* Define a variable for red color */
  --secondary-color: #a0cf63;
  /* Define a variable for red color */
  --accent-color-1: #e5e7ff;
  --accent-color-2: #ecf1ea;
  /* Mini Icon Box*/
  --slider-color-left: #a9b0f8;
  /*Slider*/
}

body {
  font-family: 'Sora';
}

h2,
h3 {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
}

.custom-container {
  background-color: white;
  padding: 18px 25px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  margin: 10px 0px;
}

.container-first {

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.container-first h3 {
  font-size: 17px;
  letter-spacing: 0.5px;
}

.heading-h2 {
  letter-spacing: 0.5px;
}

.input_label {
  color: black;
  opacity: 0.5;
  font-size: 12px;
}

.flex-container {
  display: flex;
  justify-content: space-evenly;
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: white;
  cursor: context-menu;
  box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
}

.template_name {
  color: black;
  opacity: 0.7;
  font-size: 13.5px;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

}



.flex-item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-container .container {
  /* Add styles for your smaller containers here */
  position: relative;
  width: 50px;
  height: 50px;
  background-color: transparent;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  /* Center the content vertically */
  justify-content: center;
  cursor: context-menu;
  /* Center the content horizontally */
}

.flex-container .container a {
  text-decoration: none;
  color: black;
  cursor: context-menu;
}

.flex-container .container.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: var(--secondary-color);
}

.color-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.color-input::-webkit-color-swatch {
  border-radius: 15px;
  border: 1px solid grey;
}

.color-input::-moz-color-swatch {
  border-radius: 15px;
  border: none;
}



.Server_Power_Label {
  margin-right: auto;
  opacity: 0.5;
  font-size: 13.5px;
}

.input_slider {
  -webkit-appearance: none;
  width: 75%;
  height: 8px;
  background: lightgray;
  border-radius: 5px;
  background-image: linear-gradient(to right, var(--slider-color-left), var(--primary-color));
  /* Adjust colors */
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.input_slider_off {
  -webkit-appearance: none;
  width: 75%;
  height: 8px;
  background: lightgray;
  border-radius: 5px;
  background-image: linear-gradient(to right, #c7ccc6, #c7ccc6);
  /* Adjust colors */
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* Input Thumb */
.input_slider_off::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 7vw;
  width: 7vw;
  border-radius: 50%;
  background: radial-gradient(circle, #c7ccc6 10%, #c7ccc6 40%, #fafcfd 45%, white 100%);
  cursor: ew-resize;
  box-shadow: 0 0 1vw 0 #888;
  /* Change shadow color to grey (#888) */
  transition: background .3s ease-in-out;
}


/* Input Thumb */
.input_slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 7vw;
  width: 7vw;
  border-radius: 50%;
  background: radial-gradient(circle, var(--primary-color)10%, var(--primary-color) 40%, #fafcfd 45%, white 100%);
  cursor: ew-resize;
  box-shadow: 0 0 1vw 0 #888;
  /* Change shadow color to grey (#888) */
  transition: background .3s ease-in-out;
}

.small-status {
  width: 7px;
  /* Diameter of the circle (radius * 2) */
  height: 7px;
  /* Diameter of the circle (radius * 2) */
  border: 1px solid #cacaca;
  /* Border color for inactive status */
  border-radius: 50%;
  /* Creates a circular shape */
  display: inline-block;
  /* Allows inline positioning with text */
  margin-right: 5px;
  /* Adjust as needed for spacing */
}

.small-status.active {
  background-color: var(--secondary-color);
  /* Fill color for active status (green in this case) */
  border: none;
  /* No border for active status */
}


.disable-box {
  padding: 5px 10px;
  font-size: 10px;
  font-weight: 600;

  letter-spacing: 0.2px;
  border-radius: 12.5px;
  background-color: #fdf6f6;
  color: #d35252;
  display: flex;
  align-items: center;
}


.disable-box.red {
  background-color: #fdf6f6;
  color: #d35252;
}

.disable-box.blue {
  background-color: #eaf1f7;
  /* Set your preferred background color */
  color: #2363a3;
  /* Set your preferred text color */
}

.disable-box.green {
  background-color: #ecf1ea;
  color: green;
}

input[type="range"]::-webkit-slider-thumb:hover {
  background: var(--primary-color);
}

/* Input Track */
input[type=range]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}



/*Slider Input*/
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: var(--primary-color);
}

input:focus+.slider {
  box-shadow: 0 0 1px #748e5e;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/*Slider END*/



/*----------------Detail Page Start--------------*/

header {
  background-color: #f6f8fa;
  /* Adjust the background color as needed */
  color: white;
  padding: 10px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header h1 {
  letter-spacing: 0.5px;
}

header button {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 16px;
}

header h1 {
  margin: 0;
  font-size: 18px;
}

header a {
  color: black;
}

.content {
  padding: 20px;
}

.Detail_Container {
  display: flex;
  margin-bottom: 50px;
  flex-direction: column;

  background-color: white;
  height: 100vh;
}

.Detail_Row {
  padding: 5px 10px 5px 10px;
  display: flex;
  align-items: center;

}

.Detail_Row p {
  letter-spacing: 0.7px;
  margin: 0;
}

.schedule_item {
  padding: 0px 10px 2px 10px;
  display: flex;
  align-items: center;
}

.schedule_item p {
  letter-spacing: 0.7px;
  margin: 0;
}

.schedule_item .title {
  letter-spacing: 0.3px;
  color: rgba(0, 0, 0, 0.60);
  font-size: 14px;
  margin: 0;
}

.schedule_item .value {
  letter-spacing: 0.3px;
  color: black;
  font-size: 14px;

  margin: 0;
}

.Schedule_Row {
  margin-top: 20px;
  margin-bottom: 20px;
}

.edit_button {
  background-color: var(--accent-color-1);
  color: var(--primary-color);
  border-radius: 10px;
  padding: 13px;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.4px;
  margin: 10px 10px 10px 10px;
}


.Detail_Content_Container {

  border-radius: 20px;
  color: var(--primary-color);
  font-size: 10px;
  letter-spacing: 0.7px;
  background-color: #ecf1ea;
  padding: 8px 15px 8px 15px;
  margin-left: auto;
  /* Align to the right */
}

.dot {
  width: 10px;
  height: 10px;
  background-color: var(--primary-color);
  border-radius: 50%;
  margin-right: 10px;
}

.expanded {

  flex: 1;
  background-color: #f6f8fa;
  /* Adjust the background color as needed */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Align items vertically to the center */
  justify-content: center;
  /* Center items horizontally */
  padding: 15px 0px 15px 0px;
}



.expanded h1 {
  margin: 10px;
  font-size: 25px;
  letter-spacing: 0.2px;
  font-weight: 700;
}

.text-container {
  padding: 20px;
  text-align: center;
}

.content-column {
  background-color: #ffffff;
  padding: 10px 35px;

}

.content-column .text1 {
  margin: 10px 0;
  letter-spacing: 0.3px;
  font-size: 20px;
  opacity: 0.4;
  font-weight: bold;
  text-align: center;
}

.content-column .text2 {
  margin: 10px 0;

  opacity: 0.4;
  text-align: center;
}




#appearance7 .rs-path-color {
  background-color: #C2E9F7;
}

#appearance7.active .rs-handle {
  background-color: var(--primary-color);
  padding: 7px;
  border: 2px solid var(--primary-color);
}



#appearance7 .rs-handle {
  background-color: #cccccc;
  padding: 7px;
  border: 2px solid #cccccc;
}

#appearance7 .rs-border {
  color: white;
}

#appearance7 .rs-handle.rs-focus {
  border-color: white;
}

#appearance7 .rs-handle:after {
  border-color: white;
  background-color: white;
}

#appearance7 .rs-border {
  border-color: transparent;
}

/* Solution for inner circle with shadow */
#appearance7:after {
  content: "";

  height: calc(100% - 42px);
  /* here 40 is the gap between the outer and inner circle */
  width: calc(100% - 42px);
  position: absolute;
  top: 21px;
  /* divide the gap value by 2 */
  left: 21px;
  color: grey;
  border-radius: 1000px;
  box-shadow: 0 0 12px -2px;
}

/* -------------Template Page ----------------*/
.profile_name {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid white;
  border-radius: 25px;
  font-size: 16px;
  background-color: white;
  background-image: url('img/flash-3.png');
  background-position: 15px center;
  /* Shift the background image 20 pixels to the right */
  background-repeat: no-repeat;
  padding: 12px 50px;
  /* Adjust padding as needed */
}

.template-edit_button {
  background-color: var(--primary-color);
  width: 100%;
  margin: 10px;
  border-radius: 15px;
  text-align: center;
  padding: 10px;
  color: white;
  display: none;
}

.template-add_step {
  background-color: var(--accent-color-2);
  border-radius: 15px;
  text-align: center;
  padding: 10px;
  color: var(--secondary-color);
}

.dropdown-container {
  display: flex;
  flex-direction: column;
  background-color: white;
  padding: 10px 15px;
  border-radius: 8px;
  /* Add border-radius */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  /* Add box-shadow */
  margin: 13px 10px;
}

.dropdown-header {
  color: var(--primary-color);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.1px;
  display: flex;

  align-items: center;


}

.dropdown-header:active {
  background-color: transparent;
}

.dropdown-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

.show-content {
  max-height: 500px;
  /* Set the maximum height you desire */
}

.frequency_container {
  justify-content: space-around;
  /* Add this line */
  display: flex;
}

.frequency_container p {
  margin: 5px 0px;
  color: #888;
  font-size: 15px;
  letter-spacing: 0.4px;

}

.time_input {
  flex-grow: 1;

  font-family: 'Sora';
  margin: 0px 10px;
  box-sizing: border-box;
  border: 2px solid #f8f8f8;
  border-radius: 25px;
  font-size: 16px;

  background-color: white;
  background-image: url('img/clock.png');
  background-position: 15px center;
  /* Shift the background image 20 pixels to the right */
  background-repeat: no-repeat;
  padding: 9px 10px 9px 40px;
  /* Adjust padding as needed */
}

.expanded-icon {
  padding: 15px 15px;
  background-image: url('img/expanded.png');
  background-size: 25px 25px;
  /* Adjust the background size as needed */
  background-repeat: no-repeat;
  background-position: center;
  /* Center the background image */
  transition: transform 0.3s ease;
  /* Smooth transition effect */

}

.remove-icon {
  margin: 0px 10px;

}

.expanded-icon.rotate {
  transform: rotate(90deg);
  /* Rotate 90 degrees when the class is applied */
}

.frequency_input {
  width: 135px;
  margin: 0px;
  box-sizing: border-box;
  border: 2px solid #f8f8f8;
  border-radius: 25px;
  font-size: 14px;
  background-color: white;
  background-image: url('img/clock.png');
  background-position: 15px center;
  /* Shift the background image 20 pixels to the right */
  background-repeat: no-repeat;
  padding: 12px 0px 12px 45px;
  /* Adjust padding as needed */
}

.time_input::-webkit-calendar-picker-indicator {
  display: none;
}

.frequency_input::-webkit-calendar-picker-indicator {
  display: none;
}

.frequency_Container {
  width: 135px;
  margin: 0px;
  box-sizing: border-box;
  border: 2px solid #f8f8f8;
  border-radius: 25px;
  font-size: 14px;
  background-color: white;
  background-image: url('img/frequency.png');
  background-position: 15px center;
  /* Shift the background image 20 pixels to the right */
  background-repeat: no-repeat;
  padding: 15px 15px 15px 45px;

}

.icon-box {
  width: 40px;
  height: 40px;
  background-color: var(--primary-color);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-box2 {
  margin-left: 5px;
  width: 40px;
  height: 40px;
  background-color: var(--accent-color-1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-box3 {
  width: 40px;
  height: 40px;
  background-color: #f7f7f7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}


.icon-text {
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
}

#Schedule-container.active .icon-box {
  background-color: #cccccc;
}

#Schedule-container.active .icon-box2 {
  opacity: 0.5;
}

#Schedule-container.active .icon-box3 {
  opacity: 0.5;
}


#Schedule-container.active p {
  opacity: 0.5;
}

#Schedule-container.active a {
  opacity: 0.5;
}

#Schedule-container.active .edit_button {
  opacity: 0.5;
  background-color: var(--accent-color-1);
  color: #7b7b7b;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.modal_button {
  background-color: var(--primary-color);
  font-size: 14px;
  text-align: center;
  width: auto;
  margin-top: 10px;
  padding: 15px 25px;
  color: white;
  border-radius: 24px;
  box-shadow: rgba(67, 115, 47, 0.09) 0px 2px 1px, rgba(67, 115, 47, 0.09) 0px 4px 2px, rgba(67, 115, 47, 0.09) 0px 8px 4px, rgba(67, 115, 47, 0.09) 0px 16px 8px, rgba(67, 115, 47, 0.09) 0px 32px 16px;
}

.modal_delete_button {
  /* Delete Button */
  background-color: #d35252;
  font-size: 14px;
  letter-spacing: 0.5px;
  font-weight: 500;
  text-align: center;
  width: 100%;
  margin-top: 10px;
  padding: 15px 25px;
  color: white;
  border-radius: 24px;
}

.modal_confirm_button {
  /* Confirm Button */
  background-color: var(--primary-color);
  font-size: 14px;
  letter-spacing: 0.5px;
  font-weight: 500;
  text-align: center;
  width: 100%;
  margin-top: 10px;
  padding: 15px 25px;
  color: white;
  border-radius: 24px;
}

.modal_cancel_button {
  /* Cancel Button */
  background-color: white;
  font-size: 14px;
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.5px;
  width: 100%;
  margin-top: 10px;
  padding: 15px 25px;
  color: black;
  border-radius: 24px;
  border: 1px solid #f1f1f1;
  /* Specify border style, width, and color */
}


.dialog_p {
  font-size: 16.5px;
  text-align: center;
  font-weight: bold;
  letter-spacing: 0.3px;
}

.dialog_p2 {
  margin: 0;
  font-size: 12.5px;
  opacity: 0.5;
  text-align: center;
  letter-spacing: 0.3px;
}

.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  position: relative;
  animation: fadeIn 0.3s ease-in-out;
}

.close {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.slider_label_container {
  display: flex;
  justify-content: space-between;
  margin: 15px 0px;
}

.slider_label_1 {
  font-size: 14px;
  letter-spacing: 0.2px;
  color: #888;
}

.slider_label_2 {
  font-size: 14px;
  letter-spacing: 0.2px;
  color: black;
  font-weight: 700;
}

/* ---- LOGIN PAGE ---- */
.login_body {

  background: url('images.jpg') center/cover no-repeat;
}

.login-header-title{
  color: var(--primary-color);
}

.outer-container {


  display: flex;
  flex-direction: column;
  height: 100vh;
  align-items: center;
  justify-content: center;
}



.inner-container {

  width: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;

}

.grobrix-title {
  color: white;
  margin: 0;
  font-size: 23px;
}

.stack {
  position: relative;
}

.absolute-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.background-layer {
  background: url('images.jpg') center/cover no-repeat;
  /* Replace 'images.jpg' with the path to your image */
  filter: blur(0px);
  /* Adjust the blur value as needed */
  z-index: -1;
  /* Move the background behind other content */
}

.outer-container h1 {
  color: var(--primary-color);
  font-weight: 500;
  
}

.login-label1 {
  text-align: center;
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 24px;
  margin: 50px 0px 0px 0px;
}

.login-label2 {
  text-align: center;
  font-weight: 100;
  color: grey;
  letter-spacing: 1px;
  font-size: 15px;
  margin: 10px 0px 30px 0px;
}

.login-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 20px;


}

.login-form-container {
  background-color: white;
  padding-bottom: 35px;
  width: 100%;
  border-radius: 25px 25px 0px 0px;
}

.login-input {
  width: 100%;
  margin-bottom: 10px;
  box-sizing: border-box;
  border: 1px solid #cacaca;
  border-radius: 25px;
  font-size: 15px;
  letter-spacing: 1px;
  background-color: white;
  background-position: 15px center;
  /* Shift the background image 20 pixels to the right */
  background-repeat: no-repeat;
  padding: 12px 50px;
  /* Adjust padding as needed */

}

.login-input.email {
  background-image: url('img/sms.png');
}

.login-input.password {
  background-image: url('img/password.png');
}

.login-input::placeholder {
  opacity: 0.5;
  /* Adjust opacity as needed (0.0 to 1.0) */
}

.login-input:focus {
  border-color: var(--primary-color);
  /* Change the border color on focus */
  outline: none;
  /* Remove the default focus outline */
}

.login-button {
  background-color: var(--primary-color);
  width: 100%;
  margin-top: 10px;
  margin-bottom: 30px;
  padding: 15px 0px;
  color: white;
  border-radius: 24px;
  box-shadow: rgba(69, 52, 146, 0.09) 0px 2px 1px, rgba(69, 52, 146, 0.09) 0px 4px 2px, rgba(69, 52, 146, 0.09) 0px 8px 4px, rgba(69, 52, 146, 0.09) 0px 16px 8px, rgba(69, 52, 146, 0.09) 0px 32px 16px;

}

.login-button p {
  margin: 0;

  font-size: 16px;
  font-weight: bold;
  letter-spacing: 2px;
}

/* Template List */
.template-card {
  background-color: white;
  padding: 25px;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
}

.heading-title {
  color: white;
  letter-spacing: 0.6px;
  opacity: 0.7;
  margin-top: 0;

}

.template-card-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.template-card a {
  margin: 0;
  color: #adadad;
  font-weight: 550;
  letter-spacing: 0.8px;
}

.template-card hr {

  border: none;
  /* Remove default border style */
  height: 2px;
  /* Set the height to control thickness */
  background-color: #f3f4f2;
  /* Set the color of the line */
  margin: 0px 0;
  /* Adjust margin for spacing */

}

.template-step {
  padding: 0px 0px;

}

.template-step-detail {
  margin: 10px 0px;
  display: flex;
  flex-direction: row;

  justify-content: space-between;
}

.icon-text-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.template-step-detail a {
  color: black;
  font-size: 13px;
}

.bottom-sheet-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 1;
}

.bottom-sheet {
  width: 100%;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-color: #fff;
  box-shadow: 0px -5px 15px rgba(0, 0, 0, 0.2);
  transform: translateY(100%);
  transition: transform 0.3s ease-in-out;
}

.bottom-sheet-content {
  padding: 10px 20px;
}

.bottom-sheet.active {
  transform: translateY(0);
}

.action-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 10px 0px;
}

.action-bar p {
  margin: 0px;
  padding-left: 15px;
}

.Template-List-Header {
  background-color: var(--primary-color);
  padding: 20px 20px;
}

.Template-List-Header h1 {
  margin-top: 0px;
  letter-spacing: 0.5px;
  font-weight: 500;
  opacity: 0.85;
}

.Template-List-Header a {
  color: white;
  opacity: 0.7;
  font-size: 22px;
}

.Stack_Container {
  position: relative;
  width: 100%;
  height: 150px;
  background-color: var(--primary-color);
}

/* Setting Page */
.setting-heading {
  color: white;
  font-size: 32px;
  letter-spacing: 0.8px;
  font-weight: 500;
  margin-top: 15px;
}

.setting-card {
  background-color: white;
  border-radius: 15px;
  padding: 12.5px 20px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  /* Add a box shadow */
}

.setting-card .expanded {
  padding: 0px;
  flex-grow: 1;
  align-items: center;
  background-color: white;
  flex-direction: row;
  justify-content: start;
}

.setting-card .expanded a {
  letter-spacing: 0.2px;
  font-weight: normal;
}

.setting-card .status {
  margin-right: 15px;
  width: 20px;
  /* Set the width of the container */
  height: 20px;
  /* Set the height of the container */
  background-color: #698f59;
  /* Set the background color to a light green */
  border-radius: 50%;
  /* Create a circle by setting border-radius to 50% */
}

.setting-card .status.active {
  background-color: red;
}

.setting-card-content {
  display: flex;
  flex-direction: column;
}

.modal_input_text {
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 10px 15px;
  font-size: 15px;
  box-sizing: border-box;
  width: 100%;


}

.line2 {
  opacity: 0.6;
  font-size: 12px;
}

.line1 {
  font-size: 16px;
}

.icon-container-edit {
  margin-left: 5px;
  margin-right: 15px;
  width: 40px;
  height: 40px;
  background-color: var(--accent-color-2);
  border-radius: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-container-edit-mini {

  width: 14px;
  height: 14px;
  margin-right: 2px;
  background-color: var(--accent-color-2);
  border-radius: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
}