.u-btn-orange {
  background-color: orange;
  color: white;
}
.g-brd-orange {
  border-color: orange;
}
.v-application .container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.v-application .row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}
.v-application .col {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}
.v-application .d-flex {
  display: flex;
}

.v-application .justify-content-center {
  justify-content: center;
}

.v-application .g-mt-10 {
  margin-top: 2.5rem;
}

.v-application .g-pa-40 {
  padding: 2.5rem;
}

.v-application .g-mb-30 {
  margin-bottom: 3.75rem;
}

.v-application .g-mb-20 {
  margin-bottom: 1.25rem;
}

.v-application .g-mb-10 {
  margin-bottom: 0.625rem;
}

.root{
  --system_admin_toolbar_color: #f69f1a;
  --system_admin_font_toolbar_color: #f69f1a;
  --system_admin_icon_toolbar_color: #f69f1a;
  --system_admin_background_color:#f69f1a;
  --system_sub_admin_toolbar_color:#f69f1a;
  --system_totalpax_card_color:#f69f1a;
  --system_totalattended_card_color:#f69f1a;
  --system_notattended_card_color:#f69f1a;
  --system_totalpercent_card_color:#f69f1a;
  --system_totalcompany_card_color:#f69f1a;
  --system_sub_font_toolbar_color:#f69f1a;
  --system_admin_button_color:#f69f1a;
  --system_text_button_color:#f69f1a;
  --system_textdata_color:#f69f1a;
  --system_tableheader_color:#f69f1a;
  --system_dialog_color:#f69f1a;
  --system_dialog_text_color:#f69f1a;
  --system_dialog_button_color :#f69f1a;
  --system_dialog_font_color:#f69f1a;
  --system_raffle_button:#f69f1a;
  --system_raffle_confetti_color:#f69f1a;
  --system_raffle_confetti_color_two:#f69f1a;
  --system_raffle_winner_text_color:#f69f1a;
  --system_raffle_winner_text_color_two:#f69f1a;
  --system_raffle_suspense_card_color:#f69f1a;
  --system_raffle_suspense_card_color_two:#f69f1a;
  --system_raffle_suspense_card_color_three:#f69f1a;
  --system_admin_font_family_primary:'Evogria';
  --system_yourapp_font_style:'Evogria';
  --system_redirect_button_color:black;
  --system_raffle_prize_name_text_color:white;
}

.system_redirect_button_color{
  color:var(--system_redirect_button_color) !important;
}

.system_yourapp_font_style{
  font-family:var(--system_yourapp_font_style) !important
}

.system_admin_font_family_primary{
  font-family:var(--system_admin_font_family_primary)!important
}

.system_raffle_suspense_card_color{
  color:var(--system_raffle_suspense_card_color)!important
}

.system_raffle_suspense_card_color_two{
  color:var(--system_raffle_suspense_card_color_two)!important
}

.system_raffle_suspense_card_color_three{
  color:var(--system_raffle_suspense_card_color_three)!important
}

.system_raffle_winner_text_color{
  color:var(--system_raffle_winner_text_color)!important
}

.system_raffle_winner_text_color_two{
  color:var(--system_raffle_winner_text_color_two)!important
}
.system_raffle_prize_name_text_color{
  color:var(--system_raffle_prize_name_text_color)!important
}

.system_raffle_confetti_color_two{
  color:var(--system_raffle_confetti_color_two)!important
}

.system_raffle_confetti_color{
  color:var(--system_raffle_button)!important;
}


.system_raffle_button{
  background-color: var(--system_raffle_button) !important;
}

.system_dialog_font_color{
  color: var(--system_dialog_font_color) !important;
}

/* Label color */
.system_dialog_text_color .v-label {
  color: var(--system_dialog_text_color) !important;
}

/* Input text color */
.system_dialog_text_color .v-input__control input,
.system_dialog_text_color .v-input__control textarea {
  color: var(--system_dialog_text_color) !important;
}

/* Outline border color for v-text-field and v-textarea */
.system_dialog_text_color .v-input--outlined .v-input__control .v-input__slot {
  border: 1px solid var(--system_dialog_text_color) !important;
}

/* Focused outline border color for v-text-field and v-textarea */
.system_dialog_text_color .v-input--outlined .v-input__control .v-input__slot input:focus,
.system_dialog_text_color .v-input--outlined .v-input__control .v-input__slot textarea:focus {
  border: 2px solid var(--system_dialog_text_color) !important;
}

/* Highlight color for active state */
.system_dialog_text_color .v-input--outlined .v-input__control .v-input__slot input:focus,
.system_dialog_text_color .v-input--outlined .v-input__control .v-input__slot textarea:focus {
  box-shadow: 0 0 0 2px var(--system_dialog_text_color) !important;
}

/* Adjust label position for outlined */
.system_dialog_text_color .v-input--outlined .v-input__control .v-input__slot .v-label {
  transition: color 0.3s, transform 0.3s !important;
}

.system_dialog_button_color{
  background-color:var(--system_dialog_button_color) !important;
}

.system_dialog_color{
  background-color:var(--system_dialog_color)
}

.system_tableheader_color{
  color:var(--system_tableheader_color)
}

.system_textdata_color{
  color:var(--system_textdata_color)
}

.system_text_button_color{
  color:var(--system_text_button_color)
}

.system_admin_button_color{
  background-color:var(--system_admin_button_color) !important;
}

.system_sub_font_toolbar_color{
  color:var(--system_sub_font_toolbar_color)
}

.system_totalcompany_card_color{
  background-color:var(--system_totalcompany_card_color)
}

.system_totalpercent_card_color{
  background-color:var(--system_totalpercent_card_color)
}

.system_notattended_card_color{
  background-color:var(--system_notattended_card_color)
}

.system_totalattended_card_color{
  background-color:var(--system_totalattended_card_color)
}

.system_totalpax_card_color{
  background-color:var(--system_totalpax_card_color)
}

.system_admin_table_color{
  background-color:var(--system_admin_table_color) !important;
}

.system_sub_admin_toolbar_color{
  background-color:var(--system_sub_admin_toolbar_color) !important;
}

.system_admin_background_color{
  background-color: var(--system_admin_background_color) !important;
}

.system_admin_toolbar_color{
  background-color: var(--system_admin_toolbar_color) !important;
}

.system_admin_font_toolbar_color{
  color: var(--system_admin_font_toolbar_color) !important;
}

.system_admin_icon_toolbar_color{
  color: var(--system_admin_icon_toolbar_color) !important;
}


.v-application .g-rounded-50 {
  border-radius: 25px;
}

.v-application .text-uppercase {
  text-transform: uppercase;
}

.v-application .g-font-size-24 {
  font-size: 1.5rem;
}

.v-application .g-ml-15 {
  margin-left: 1.875rem;
}

.v-application .form-control {
  display: block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #000000;
  background-color:#000000;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.v-application .form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.v-application .btn {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  text-transform: uppercase;
}

.v-application .btn-md {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
}

.v-application .btn-xl {
  padding: 0.75rem 2rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0.25rem;
}

.v-application .u-btn-outline-orange {
  color: red;border-color: red;
}

.v-application .u-btn-outline-orange:hover {
  color: #fff;
  background-color: red;
  border-color: red;
}

.v-application .u-btn-hover-v1-4:hover {
  background-color: #17468f;
  border-color: #17468f;
}
.fill-width {
  width: 100%; /* Ensure the field fills the available width */
}
.orange-button {
  color: #fff !important;
  background-color: #17468f !important;
  border-color: #17468f !important;
}
.sharp-outline .v-input--outlined {
  border-radius: 0;
}
#qr-reader {
  width: 100%;
  height: 300px;
  border: 1px solid #000000;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nested-enter-active .inner{
  transition-delay: 0.25s;
}
.nested-leave-active .inner {
  transition: all 0.3s ease-in-out;
}

.nested-enter-from .inner,
.nested-leave-to .inner {
  transform: translateX(30px);
  opacity: 0;
}
.underline-animation {
    position: relative;
    text-decoration: none;
  }

  .underline-animation::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 2px;
    width: 100%;
    background-color: #17468f;
    transform: scaleX(0);
    transition: transform 0.3s ease;
    transform-origin: bottom right;
  }

  .underline-animation:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
  }
  .underline-animation-silver {
    position: relative;
    text-decoration: none;
  }

  .underline-animation-silver::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 2px;
    width: 100%;
    background-color: rgb(255, 255, 255);
    transform: scaleX(0);
    transition: transform 0.3s ease;
    transform-origin: bottom right;
  }

  .underline-animation-silver:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
  }
  .orange-border {
  border: 0.1px solid #17468f !important;
  border-radius: 0.1px;
}
.gray-border {
  border: 0.1px solid rgba(105, 96, 129, 0.219) !important;
  border-radius: 2.1px;
}
 input[type="file"] {
    color: rgb(196, 125, 68); /* Change text color to white for better visibility */
    padding: 10px; /* Add padding for better appearance */
    border-radius: 5px; /* Optional: Add border-radius for rounded corners */
  }
@font-face {
  font-family: "Evogria";
  font-style: normal;
  unicode-range: U+000-5FF;
  src: url("../../../public/fonts/Evogria.otf") format("opentype");
}
.system_toolbar {
  background-color: #17468f;
  height: 100%;
  display: flex;
  align-items: center;
}
.underline-animation-black {
  position: relative;
  text-decoration: none;
}

.underline-animation-black::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 100%;
  background-color: #EC6A30FF;
  transform: scaleX(0);
  transition: transform 0.3s ease;
  transform-origin: bottom right;
}

.underline-animation-black:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}
.orange-text {
  color: white;
  transition: color 0.5s; /* You can adjust the transition duration as needed */
}
/* .swal2-popup {
  font-size: 0.84rem !important;
  font-family: Evogria, serif;
  border: 0.8px solid orange !important;
} */
.swal2-popup {
  font-size: 0.84rem !important;
  font-family: Evogria, serif;
  border: 1px solid #17468f !important;
  background-color: black; 
  color: white;
}
.swal2-success-ring {
  border: 3px solid rgba(51, 204, 51, 0.5) !important; /* Change border color and opacity */
}
.dotted-border-orange {
  border: 1px dotted rgb(255, 255, 255)!important;
}
.v-text-field--outlined >>> fieldset {
  border-color: rgba(192, 0, 250, 0.986);
  }

.badge {
    display: inline-block;
    padding: 0.25em 0.4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, 
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@font-face {
  font-family: "Barranco-Black";
  font-style: normal;
  unicode-range: U+000-5FF;
  src: url("../../../public/fonts/Barranco-Black.ttf");
}
@font-face {
  font-family: "Andina";
  font-style: normal;
  unicode-range: U+000-5FF;
  src: url("../../../public/fonts/Andina.otf");
}