/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.1.0.1739353291
Updated: 2025-02-12 10:41:31

*/

.custom_tabs .uc_tab_nav li {
  /*opacity: 0.6; */
}
.custom_tabs .uc_tab_nav li.r-tabs-state-active {
  opacity: 1;
}
.custom_tabs .uc_tab_content .panes {
  --border-width: 1px;
  --animation-speed: 0.5s;
  padding: 1px!important;
  position: relative;
  transform: scale(1, 0.8);
  border: var(--border-width) solid transparent;
}
.custom_tabs .uc_tab_content .panes .border-animation__inner {
  position: relative;
  padding: 20px;
  z-index: 1;
background: #fff;
  border: solid var(--border-width) transparent;
}
.custom_tabs .uc_tab_content .panes:before, .custom_tabs .uc_tab_content .panes:after {
  content: "";
  position: absolute;
	border: 1px solid var(--e-global-color-primary);
  background: #FFF;
	z-index: -999;
}
.custom_tabs .uc_tab_content .panes:before {
	border-right:0;
}
.custom_tabs .uc_tab_content .panes:after {
	border-left:0;
}
.custom_tabs .uc_tab_content .r-tabs-state-active:before, .custom_tabs .uc_tab_content .r-tabs-state-active:before {
  -webkit-animation: beforeBorders var(--animation-speed) forwards ease-in-out;
          animation: beforeBorders var(--animation-speed) forwards ease-in-out;
}
.custom_tabs .uc_tab_content .r-tabs-state-active:after, .custom_tabs .uc_tab_content .r-tabs-state-active:after {
  -webkit-animation: afterBorders var(--animation-speed) forwards ease-in-out;
          animation: afterBorders var(--animation-speed) forwards ease-in-out;
}
.custom_tabs .uc_tab_content .r-tabs-state-active, .custom_tabs .uc_tab_content .r-tabs-state-active{
  -webkit-animation: borderColors var(--animation-speed) steps(1) forwards;
          animation: borderColors var(--animation-speed) steps(1) forwards;
  outline: none;
	
}
.custom_tabs .uc_tab_content .r-tabs-state-active .border-animation__inner, .custom_tabs .uc_tab_content .r-tabs-state-active .border-animation__inner {
  -webkit-animation: background calc(var(--animation-speed) / 5 * 3) forwards ease-in-out;
          animation: background calc(var(--animation-speed) / 5 * 3) forwards ease-in-out;
  -webkit-animation-delay: calc(var(--animation-speed) / 5 * 2);
          animation-delay: calc(var(--animation-speed) / 5 * 2);
}

@-webkit-keyframes beforeBorders {
  0% {
    top: calc(var(--border-width) * -1);
    left: 50%;
    bottom: auto;
    right: auto;
    width: 0;
    height: var(--border-width);
  }
  33% {
    top: calc(var(--border-width) * -1);
    left: calc(var(--border-width) * -1);
    bottom: auto;
    right: auto;
    width: calc(var(--border-width) + 50%);
    height: var(--border-width);
  }
  66% {
    top: calc(var(--border-width) * -1);
    left: calc(var(--border-width) * -1);
    bottom: auto;
    right: auto;
    width: var(--border-width);
    height: calc((var(--border-width) * 2) + 100%);
  }
  100% {
    top: auto;
    left: calc(var(--border-width) * -1);
    bottom: calc(var(--border-width) * -1);
    right: auto;
    width: calc(var(--border-width) + 50%);
    height: calc((var(--border-width) * 2) + 100%);
  }
}

@keyframes beforeBorders {
  0% {
    top: calc(var(--border-width) * -1);
    left: 50%;
    bottom: auto;
    right: auto;
    width: 0;
    height: var(--border-width);
  }
  33% {
    top: calc(var(--border-width) * -1);
    left: calc(var(--border-width) * -1);
    bottom: auto;
    right: auto;
    width: calc(var(--border-width) + 50%);
    height: var(--border-width);
  }
  66% {
    top: calc(var(--border-width) * -1);
    left: calc(var(--border-width) * -1);
    bottom: auto;
    right: auto;
    width: var(--border-width);
    height: calc((var(--border-width) * 2) + 100%);
  }
  100% {
    top: auto;
    left: calc(var(--border-width) * -1);
    bottom: calc(var(--border-width) * -1);
    right: auto;
    width: calc(var(--border-width) + 50%);
    height: calc((var(--border-width) * 2) + 100%);
  }
}
@-webkit-keyframes afterBorders {
  0% {
    top: calc(var(--border-width) * -1);
    left: auto;
    bottom: auto;
    right: 50%;
    width: 0;
    height: var(--border-width);
  }
  33% {
    top: calc(var(--border-width) * -1);
    left: auto;
    bottom: auto;
    right: calc(var(--border-width) * -1);
    width: calc(var(--border-width) + 50%);
    height: var(--border-width);
  }
  66% {
    top: calc(var(--border-width) * -1);
    left: auto;
    bottom: auto;
    right: calc(var(--border-width) * -1);
    width: var(--border-width);
    height: calc((var(--border-width) * 2) + 100%);
  }
  100% {
    top: auto;
    left: auto;
    bottom: calc(var(--border-width) * -1);
    right: calc(var(--border-width) * -1);
    width: calc(var(--border-width) + 50%);
    height: calc((var(--border-width) * 2) + 100%);
  }
}
@keyframes afterBorders {
  0% {
    top: calc(var(--border-width) * -1);
    left: auto;
    bottom: auto;
    right: 50%;
    width: 0;
    height: var(--border-width);
  }
  33% {
    top: calc(var(--border-width) * -1);
    left: auto;
    bottom: auto;
    right: calc(var(--border-width) * -1);
    width: calc(var(--border-width) + 50%);
    height: var(--border-width);
  }
  66% {
    top: calc(var(--border-width) * -1);
    left: auto;
    bottom: auto;
    right: calc(var(--border-width) * -1);
    width: var(--border-width);
    height: calc((var(--border-width) * 2) + 100%);
  }
  100% {
    top: auto;
    left: auto;
    bottom: calc(var(--border-width) * -1);
    right: calc(var(--border-width) * -1);
    width: calc(var(--border-width) + 50%);
    height: calc((var(--border-width) * 2) + 100%);
  }
}
@-webkit-keyframes borderColors {
  0% {
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }
  33% {
    border-top-color: var(--e-global-color-primary);
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }
  66% {
    border-top-color: var(--e-global-color-primary);
    border-right-color: var(--e-global-color-primary);
    border-bottom-color: transparent;
    border-left-color: var(--e-global-color-primary);
  }
  100% {
    border-top-color: var(--e-global-color-primary);
    border-right-color: var(--e-global-color-primary);
    border-bottom-color: var(--e-global-color-primary);
    border-left-color: var(--e-global-color-primary);
  }
}
@keyframes borderColors {
  0% {
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }
  33% {
    border-top-color: var(--e-global-color-primary);
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
  }
  66% {
    border-top-color: var(--e-global-color-primary);
    border-right-color: var(--e-global-color-primary);
    border-bottom-color: transparent;
    border-left-color: var(--e-global-color-primary);
  }
  100% {
    border-top-color: var(--e-global-color-primary);
    border-right-color: var(--e-global-color-primary);
    border-bottom-color: var(--e-global-color-primary);
    border-left-color: var(--e-global-color-primary);
  }
}