.darkify_dark_mode_enabled
  .darkify_style_all:not(
    .darkify_switch,
    .darkify_switch *,
    .darkify_ignore,
    .darkify_ignore *
  ) {
  background: var(--darkify_dark_mode_bg) !important;
  background-color: var(--darkify_dark_mode_bg) !important;
  color: var(--darkify_dark_mode_text_color) !important;
  border-color: var(--darkify_dark_mode_border_color) !important;
}
.darkify_dark_mode_enabled
  .darkify_style_bg_txt:not(
    .darkify_switch,
    .darkify_switch *,
    .darkify_ignore,
    .darkify_ignore *
  ) {
  background: var(--darkify_dark_mode_bg) !important;
  background-color: var(--darkify_dark_mode_bg) !important;
  color: var(--darkify_dark_mode_text_color) !important;
}
.darkify_dark_mode_enabled
  .darkify_style_bg_border:not(
    .darkify_switch,
    .darkify_switch *,
    .darkify_ignore,
    .darkify_ignore *
  ) {
  background: var(--darkify_dark_mode_bg) !important;
  background-color: var(--darkify_dark_mode_bg) !important;
  border-color: var(--darkify_dark_mode_border_color) !important;
}
.darkify_dark_mode_enabled
  .darkify_style_txt_border:not(
    .darkify_switch,
    .darkify_switch *,
    .darkify_ignore,
    .darkify_ignore *
  ) {
  color: var(--darkify_dark_mode_text_color) !important;
  border-color: var(--darkify_dark_mode_border_color) !important;
}
.darkify_dark_mode_enabled
  .darkify_style_bg:not(
    .darkify_switch,
    .darkify_switch *,
    .darkify_ignore,
    .darkify_ignore *
  ) {
  background: var(--darkify_dark_mode_bg) !important;
  background-color: var(--darkify_dark_mode_bg) !important;
}
.darkify_dark_mode_enabled
  .darkify_style_txt:not(
    .darkify_switch,
    .darkify_switch *,
    .darkify_ignore,
    .darkify_ignore *
  ) {
  color: var(--darkify_dark_mode_text_color) !important;
}
.darkify_dark_mode_enabled
  .darkify_style_border:not(
    .darkify_switch,
    .darkify_switch *,
    .darkify_ignore,
    .darkify_ignore *
  ) {
  border-color: var(--darkify_dark_mode_border_color) !important;
}
.darkify_dark_mode_enabled
  .darkify_style_secondary_bg:not(
    .darkify_switch,
    .darkify_switch *,
    .darkify_ignore,
    .darkify_ignore *
  ) {
  background: var(--darkify_dark_mode_secondary_bg) !important;
  background-color: var(--darkify_dark_mode_secondary_bg) !important;
}

/*Handle Link Style*/
.darkify_dark_mode_enabled
  .darkify_style_link:not(
    .darkify_switch,
    .darkify_switch *,
    .darkify_ignore,
    .darkify_ignore *,
    .darkify-nav ul li a
  ) {
  color: var(--darkify_dark_mode_link_color) !important;
}
.darkify_dark_mode_enabled
  .darkify_style_link:not(
    .darkify_switch,
    .darkify_switch *,
    .darkify_ignore,
    .darkify_ignore *
  ):hover {
  color: var(--darkify_dark_mode_link_hover_color) !important;
}

/*Handle Form Element Style*/
.darkify_dark_mode_enabled
  .darkify_style_form_element:not(
    .darkify_switch,
    .darkify_switch *,
    .darkify_ignore,
    .darkify_ignore *
  ) {
  background: var(--darkify_dark_mode_input_bg) !important;
  background-color: var(--darkify_dark_mode_input_bg) !important;
  color: var(--darkify_dark_mode_input_text_color) !important;
}
.darkify_dark_mode_enabled
  .darkify_style_form_element:not(
    .darkify_switch,
    .darkify_switch *,
    .darkify_ignore,
    .darkify_ignore *
  )::placeholder {
  color: var(--darkify_dark_mode_input_placeholder_color) !important;
}

/*Handle Button Style*/
.darkify_dark_mode_enabled
  .darkify_style_button:not(
    .darkify_switch,
    .darkify_switch *,
    .darkify_ignore,
    .darkify_ignore *
  ) {
  background: var(--darkify_dark_mode_btn_bg) !important;
  background-color: var(--darkify_dark_mode_btn_bg) !important;
  color: var(--darkify_dark_mode_btn_text_color) !important;
  border-color: var(--darkify_dark_mode_border_color) !important
}
/* the hover state */
.darkify_dark_mode_enabled
  .darkify_style_button:not(
    .darkify_switch,
    .darkify_switch *,
    .darkify_ignore,
    .darkify_ignore *
  ):hover {
  background: var(--darkify_dark_mode_btn_hover_bg) !important;
  background-color: var(--darkify_dark_mode_btn_hover_bg) !important;
  color: var(--darkify_dark_mode_btn_text_hover_color) !important;
  border-color: var(--darkify_dark_mode_border_color) !important
}

/* ========================
    Admin Bar Menu Design
===========================*/
.darkify_admin_bar_switch_container {
  cursor: pointer !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px !important;
  height: 32px !important;
}
.darkify_admin_bar_switch_container .ab-item {
  height: 18px !important;
  cursor: pointer !important;
  background-color: #ffffff !important;
  -webkit-mask: url(../img/switch_icons/switch_apple_light.svg) no-repeat center;
  mask: url(../img/switch_icons/switch_apple_light.svg) no-repeat center;
}
.darkify_dark_mode_enabled .darkify_admin_bar_switch_container .ab-item {
  -webkit-mask: url(../img/switch_icons/switch_apple_dark.svg) no-repeat center;
  mask: url(../img/switch_icons/switch_apple_dark.svg) no-repeat center;
  background-color: #ffffff !important;
}

/* ========================
    Block Editor Menu Design
===========================*/
.darkify_block_editor_switch {
  height: 33px;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: 0;
  border: 0;
  background: #121116;
  border-radius: 3px;
  padding: 0 12px;
}
.darkify_dark_mode_enabled .darkify_block_editor_switch {
  background: #ffffff;
}
.darkify_block_editor_switch .icon {
  width: 20px;
  height: 20px;
  background-color: #ffffff !important;
  -webkit-mask: url(../img/switch_icons/switch_apple_light.svg) no-repeat center;
  mask: url(../img/switch_icons/switch_apple_light.svg) no-repeat center;
}

.darkify_dark_mode_enabled .darkify_block_editor_switch .icon{
  background-color: #171717 !important;
  -webkit-mask: url(../img/switch_icons/switch_apple_dark.svg) no-repeat center;
  mask: url(../img/switch_icons/switch_apple_dark.svg) no-repeat center;
}

/* ========================
    Switch Design
===========================*/

.darkify_switch,
.darkify_switch * {
  box-sizing: border-box;
}
.darkify_switch.darkify_top_left,
.darkify_switch.darkify_top_right,
.darkify_switch.darkify_bottom_left,
.darkify_switch.darkify_bottom_right {
  position: fixed;
  z-index: 99999;
}
.darkify_switch.darkify_top_left {
  top: var(--darkify_switch_position_from_top_left_top);
  left: var(--darkify_switch_position_from_top_left_left);
}
.darkify_switch.darkify_top_right {
  top: var(--darkify_switch_position_from_top_right_top);
  right: var(--darkify_switch_position_from_top_right_right);
}
.darkify_switch.darkify_bottom_left {
  bottom: var(--darkify_switch_position_from_bottom_left_bottom);
  left: var(--darkify_switch_position_from_bottom_left_left);
}
.darkify_switch.darkify_bottom_right {
  bottom: var(--darkify_switch_position_from_bottom_right_bottom);
  right: var(--darkify_switch_position_from_bottom_right_right);
}
.darkify_switch.darkify_absolute_position {
  position: absolute;
  z-index: unset;
}

@media only screen and (max-width: 600px) {
  .darkify_switch.darkify_hide_on_mobile {
    display: none;
  }
}

@media only screen and (max-width: 600px) {
  .darkify_switch.darkify_top_left_in_mobile,
  .darkify_switch.darkify_top_right_in_mobile,
  .darkify_switch.darkify_bottom_left_in_mobile,
  .darkify_switch.darkify_bottom_right_in_mobile {
    position: fixed;
  }
  .darkify_switch.darkify_top_left_in_mobile {
    top: var(--darkify_switch_position_from_top_left_top_in_mobile);
    left: var(--darkify_switch_position_from_top_left_left_in_mobile);
    bottom: unset;
    right: unset;
  }
  .darkify_switch.darkify_top_right_in_mobile {
    top: var(--darkify_switch_position_from_top_right_top_in_mobile);
    right: var(--darkify_switch_position_from_top_right_right_in_mobile);
    bottom: unset;
    left: unset;
  }
  .darkify_switch.darkify_bottom_left_in_mobile {
    bottom: var(--darkify_switch_position_from_bottom_left_bottom_in_mobile);
    left: var(--darkify_switch_position_from_bottom_left_left_in_mobile);
    top: unset;
    right: unset;
  }
  .darkify_switch.darkify_bottom_right_in_mobile {
    bottom: var(--darkify_switch_position_from_bottom_right_bottom_in_mobile);
    right: var(--darkify_switch_position_from_bottom_right_right_in_mobile);
    top: unset;
    left: unset;
  }
}

.darkify_tooltip .darkify_tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: var(--darkify_switch_tooltip_bg_color);
  color: var(--darkify_switch_tooltip_text_color);
  font-size: 12px;
  text-align: center;
  border-radius: 0;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
}
.darkify_tooltip .darkify_tooltiptext::after {
  content: "";
  position: absolute;
  border-width: 5px;
  border-style: solid;
}
.darkify_tooltip:hover .darkify_tooltiptext {
  visibility: visible;
}
.darkify_tooltip.darkify_tooltip_top .darkify_tooltiptext {
  bottom: calc(100% + 10px);
  left: 50%;
  margin-left: -60px;
}
.darkify_tooltip.darkify_tooltip_top .darkify_tooltiptext::after {
  left: 50%;
  margin-left: -5px;
  top: 100%;
  border-color: var(--darkify_switch_tooltip_bg_color) transparent transparent
    transparent;
}
.darkify_tooltip.darkify_tooltip_bottom .darkify_tooltiptext {
  top: calc(100% + 10px);
  left: 50%;
  margin-left: -60px;
}
.darkify_tooltip.darkify_tooltip_bottom .darkify_tooltiptext::after {
  left: 50%;
  margin-left: -5px;
  bottom: 100%;
  border-color: transparent transparent var(--darkify_switch_tooltip_bg_color)
    transparent;
}
.darkify_tooltip.darkify_tooltip_left .darkify_tooltiptext {
  right: calc(100% + 10px);
  top: calc(50% - 15px);
}
.darkify_tooltip.darkify_tooltip_left .darkify_tooltiptext::after {
  top: 50%;
  left: 100%;
  margin-top: -5px;
  border-color: transparent transparent transparent
    var(--darkify_switch_tooltip_bg_color);
}
.darkify_tooltip.darkify_tooltip_right .darkify_tooltiptext {
  left: calc(100% + 10px);
  top: calc(50% - 15px);
}
.darkify_tooltip.darkify_tooltip_right .darkify_tooltiptext::after {
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-color: transparent var(--darkify_switch_tooltip_bg_color) transparent
    transparent;
}

/* ==============
 Switch Style
 ============== */
.darkify_switch_style {
  cursor: pointer;
  z-index: 9999;
  width: var(--darkify_switch_width);
  height: var(--darkify_switch_height);
  border-radius: var(--darkify_switch_border_radius);
  background: var(--darkify_switch_light_mode_bg);
  display: flex;
  align-items: center;
  justify-content: center;
  border-width: var(--darkify_switch_border);
  border-style: solid;
  border-color: var(--darkify_switch_border_light_color);
}
.darkify_dark_mode_enabled .darkify_switch_style {
  border-color: var(--darkify_switch_border_dark_color);
}
.darkify_switch_style .theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
}
.darkify_switch_style svg {
  width: var(--darkify_switch_icon_size);
  height: var(--darkify_switch_icon_size);
  color: var(--darkify_switch_light_mode_color);
  stroke: var(--darkify_switch_light_mode_color);
}
.darkify_dark_mode_enabled .darkify_switch_style {
  background: var(--darkify_switch_dark_mode_bg);
}
.darkify_dark_mode_enabled .darkify_switch_style svg {
  color: var(--darkify_switch_dark_mode_color);
  stroke: var(--darkify_switch_dark_mode_color);
}