*:focus {
  box-shadow: unset !important;
}
.w_95 {width:95%;}
.w_85 {width:85%;}
.w_75 {width:75%;}
.w_50 {width:50%;}
.w_40 {width:40%;}
.w_30 {width:30%;}
.w_20 {width:20%;}
.blur { filter: blur(5px); }
.ui_thumb {width:50px;height:50px; }


.required::before {content: "* ";color: #AA0000;} 


/**                 <button class="btn btn-sm d-block mx-auto p-0 m-0 text-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#result_more_options" aria-expanded="false" aria-controls="result_more_options">
                  <i class="ui_expand_icon fa-solid fa-caret-down"></i> <span class="ui_expand_label"></span>
                </button>  
                **/
[aria-expanded="true"] .ui_expand_icon::before { content: "\f0d8";}
[aria-expanded="true"] .ui_expand_label::after {content: " see less..."} 
[aria-expanded="false"] .ui_expand_icon::before { content: "\f0d7";}
[aria-expanded="false"] .ui_expand_label::after {content: " see more..."} 
 


/** ************************************************************************************************************************* **/
/** navbar RELATED CSS DEFINITIONS ****************************************************************************************** **/
.navbar_bypass {padding-top:46px;}

.navbar-brand {
  --my-height:34px;
  font-size:20px !important;
  display:inline-block;
  line-height:var(--my-height);
  height:var(--my-height);
  padding:0;
  background:transparent url(https://styleverse.io/images/styleverse_logo.png) left center/auto var(--my-height) no-repeat;
  padding-left:calc(var(--my-height) * 1.5); 
}


.navbar .nav_wrapper .active {background:#333333 !important;}

.btn_mobile, .btn_mobile:hover {padding:0 !important;width:38px;height:38px;border:solid 1px #333333; }
.navbar .offcanvas-header .btn_mobile {border-color:#FFFFFF !important;}
/** navbar RELATED CSS DEFINITIONS ****************************************************************************************** **/
/** ************************************************************************************************************************* **/






/** ************************************************************************************************************************* **/
/** background RELATED CSS DEFINITIONS ************************************************************************************** **/
.bg_body_default { background:transparent url(https://styleverse.io/images/bg_4.png) center center/100% auto repeat;}  
 
.bg_move_diagonal {
  background-size: 210% auto;
  background-position: top left;
  animation: moving_bg_diagonal 300s infinite;
}
@keyframes moving_bg_diagonal {
  0% {background-position: top left;}
  25% {background-position: bottom right;}
  50% {background-position: bottom left;}
  75% {background-position: top right;}
  100% {background-position: top left;}
}
/** background RELATED CSS DEFINITIONS ************************************************************************************** **/
/** ************************************************************************************************************************* **/







/** ************************************************************************************************************************* **/
/** ************************************************************************************************************************* **/ 
.progress_wrapper {--progress-speed:25s;}
.progress_wrapper .progress {height:30px;}
.progress_wrapper .progress .progress-bar {width:0%;}

.progress_wrapper::after {
  content: "Waiting to Start";
  animation: var(--progress-speed) animate_progress_msg forwards;
}  
.progress_wrapper .progress-bar-animated {
  animation: 1s linear infinite progress-bar-stripes, var(--progress-speed) animate_progress_bar forwards;
  
} 

@keyframes animate_progress_bar {
  0% { width: 0%; }
  5% { width: 20%; }
  30% { width: 30%; }  
  60% { width: 80%; }  
  99% { width: 100%; }  
  100% { width: 100%; }    
}
@keyframes animate_progress_msg {
  0% { content: "Analyzing Request..."; }
  5% { content: "Analyzing Request..."; }
  40% { content: "Processing Request..."; }  
  60% { content: "Updating Result..."; }  
  95% { content: "Finalizing Result..."; }  
  100% { content: "Closing Connection..."; }    
}

/** ************************************************************************************************************************* **/
/** ************************************************************************************************************************* **/


 


[aria-expanded="true"].menu_toggler .fa-solid::before {content:"\f00d";} 


.ratio_3x4 {
  --bs-aspect-ratio: 133.33333333%;
}


/** ************************************************************************************************************************* **/
/** ************************************************************************************************************************* **/
.check_default_wrapper input[type="radio"] + .btn {opacity:0.4;}
.check_default_wrapper input[type="radio"]:checked + .btn {opacity:1;}
.check_default_wrapper input[type="radio"]:checked + .btn i.fa-regular::before {content:"\f058";} 
/** ************************************************************************************************************************* **/
/** ************************************************************************************************************************* **/





.img_hover_zoom img {transition: all .3s ease;}
.img_hover_zoom:hover img {transform: scale(1.2);}

.shadow_hover:hover {  box-shadow: var(--bs-box-shadow) !important;}





.section_generate .section_generate_only {display:block !important;}
.section_result_detail .section_result_detail_only {display:block !important;}



.offcanvas, .offcanvas-xxl, .offcanvas-xl, .offcanvas-lg, .offcanvas-md, .offcanvas-sm {
 
  --bs-offcanvas-width: 300px;
 
}


.ui_style_preview {width:100px !important;}
/** Small devices (landscape phones, 576px and below) **/
@media (max-width: 576px) { 
.ui_style_preview {width:60px !important;}

 }











 
.text_gradient {
  /* Create a horizontal gradient with 4 colors */
  background: linear-gradient(90deg, rgba(254, 218, 117, 1),rgba(250, 126, 30, 1),rgba(214, 41, 118, 1),rgba(150, 47, 191, 1), rgba(79, 91, 213, 1));
  -webkit-background-clip: text; /* Needed for Safari/iOS */
  background-clip: text;
  color: transparent; /* Makes the text itself transparent so the background shows through */
  
  /* Optional: improve rendering on some browsers */
  -webkit-text-fill-color: transparent;




  background-size: 200% 200%; /* Make it larger so movement is visible */
  animation: scroll-gradient 6s linear infinite;


}




@keyframes scroll-gradient {
  0%   { background-position: top left; }
  25%   { background-position: top right; }  
  50%   { background-position: bottom right; }  
  75% { background-position: bottom left; }
  100% { background-position: top left; }
}


.text_shadow {
  color: #222; /* Dark text color for good contrast */
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.12),   /* soft blur */
    0 0.5px 0 rgba(0, 0, 0, 0.06);   /* very light crisp edge */
}



.horizontal_menu_wrapper .horizontal_left {left:2px;}   
.horizontal_menu_wrapper .horizontal_right {right:2px;}