@font-face {
  font-family: 'Outfit';
  src: url('/rugr_dvara/assets/fonts/outfit/Outfit-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('/rugr_dvara/assets/fonts/outfit/Outfit-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('/rugr_dvara/assets/fonts/outfit/Outfit-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Outfit';
  src: url('/rugr_dvara/assets/fonts/outfit/Outfit-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/rugr_dvara/assets/fonts/inter/inter-medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --primary-font-family: "Outfit", sans-serif;
  --secondary-color: #003729;
  --primary-color: #099D3E;
  --brInfoColor:#E0E0E0;
  --bgIconColor:#E8FFF0;
  --inputBorderColor: #E4E4E4;
  --colorWhite: #fff;
  --colorSuccess: #2AB500;
  --colorSuccess2: #00974E;
  --colorSuccess3: #0B7431;
  --colorFailed: #FF2A2A;
  --colorPending: #B88804;
  --colorHold: #FF972F;
  --colorInfo: #2D8EFF;
  --colorText1: #2d2d2d;
  --colorText2: #5e5e5e;
  --colorText3: #5a5a5a;
  --colorText4: #777777;
  --colorText5: #A4A4A4;
  --colorText6: #B3B3B3;
  --colorText7: #727272;
  --colorText8: #FAFAFA;
  --colorText9: #eefbf5;
  --colorText10: #fffef5;
  --colorText11: #fff3e8;
  --colorText12: #fff5f5;
  --colorText13: #f9fbfc;
  --colorText14: #e0e0e0;
  --colorText15: #F9FBFC;
  --colorText16: #f4f4f4;
  
  
  --colorGrey: #E8E8E84A;
  --colorRed: #ff2a2a;
  --colorGoldDark: #ff972f;
  --colorGold: #b88804;
  
  --inActiveColor: #DEDEDE;
  --mildGreen: color: #FEFFFE80;
  --colorLight4: color: #efefef;
  --dark_green: #1A4C31;
 
}

::selection{
    background: var(--primary-color);
    color: var(--colorWhite);
}

*{
padding: 0;
margin: 0;
box-sizing: border-box;
list-style: none;
font-family: var(--primary-font-family);
font-style: normal;
font-weight: 400;
text-decoration: none;
box-shadow: none;
border: none;
outline: none;
}

.fs10_fw500 { font-size: 10px; font-weight: 500; }

.fs12_fw300 { font-size: 12px; font-weight: 300; }

.fs13_fw300 { font-size: 13px; font-weight: 300; }
.fs13_fw400 { font-size: 13px; font-weight: 400; }
.fs13_fw500 { font-size: 13px; font-weight: 500; }

.fs14_fw300 { font-size: 14px; font-weight: 300; }
.fs14_fw400 { font-size: 14px; font-weight: 400; }
.fs14_fw500 { font-size: 14px; font-weight: 500; }

.fs16_fw300 { font-size: 16px; font-weight: 300; }
.fs16_fw400 { font-size: 16px; font-weight: 400; }
.fs16_fw500 { font-size: 16px; font-weight: 500; }
.fs16_fw600 { font-size: 16px; font-weight: 600; }

.fs18_fw400 { font-size: 18px; font-weight: 400; }
.fs18_fw500 { font-size: 18px; font-weight: 500; }

.fs20_fw400 { font-size: 20px; font-weight: 400; }
.fs20_fw500 { font-size: 20px; font-weight: 500; }
.fs20_fw600 { font-size: 20px; font-weight: 600; }

.fs24_fw400 { font-size: 24px; font-weight: 400; }

.fs28_fw500 { font-size: 28px; font-weight: 500; }
.fs28_fw500 { font-size: 28px; font-weight: 500; }

.fs32_fw300 { font-size: 32px; font-weight: 300; }
.fs32_fw500 { font-size: 32px; font-weight: 500; }
.fs32_fw600 { font-size: 32px; font-weight: 600; }


.txt_clr_white { color: #fff; }
.txt_clr_success { color: #2AB500; }
.txt_clr_success2 { color: #099D3E; }
.txt_clr_failed { color: #FF2A2A; }
.txt_clr_settled { color: #2D8EFF; }
.txt_clr_pending { color: #B88804; }
.txt_clr_hold{ color: #FF972F;}
.txt_clr_dark1 { color: #2d2d2d; }  
.txt_clr_dark2 { color: #5e5e5e; }  
.txt_clr_dark3 { color: #5a5a5a; } 
.txt_clr_dark4 { color: #727272; } 

.txt_clr_dark5 { color: #132318; } 


.lineHeight{
line-height: 1.5;
}

.mild_green{color: #FEFFFE80;}

.txt_clr_light1 { color: #777777; } 
.txt_clr_light2 { color: #A4A4A4; } 
.txt_clr_light3 { color: #B3B3B3; } 
.txt_clr_light4 { color: #efefef; } 







.primary_color{ color: #099D3E;}
.dark_green{ color: #1A4C31;}

.txt_center{
text-align: center;
}
.txt_right{
text-align: right;
}
.txt_left{
text-align: left;
}

.curs_pointer{
cursor: pointer;
}

.fm_inter500{
font-family: "Inter", sans-serif;
font-weight: 500;
}

.m-0 { margin: 0px; }
.m-4 { margin: 4px; }
.m-8 { margin: 8px; }
.m-16 { margin: 16px; }
.m-24 { margin: 24px; }
.m-48 { margin: 48px; }
/* Margin Top */
.mt-0 { margin-top: 0px; }
.mt-4 { margin-top: 4px; }
.mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mt-30 { margin-top: 30px; }
.mt-34 { margin-top: 34px; }
.mt-48 { margin-top: 48px; }
/* Margin Bottom */
.mb-0 { margin-bottom: 0px; }
.mb-4 { margin-bottom: 4px; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-34 { margin-bottom: 34px; }
.mb-36 { margin-bottom: 36px; }
.mb-48 { margin-bottom: 48px; }
/* Margin Left (Start) */
.ms-0 { margin-left: 0px; }
.ms-4 { margin-left: 4px; }
.ms-8 { margin-left: 8px; }
.ms-16 { margin-left: 16px; }
.ms-24 { margin-left: 24px; }
.ms-48 { margin-left: 48px; }
/* Margin Right (End) */
.me-0 { margin-right: 0px; }
.me-4 { margin-right: 4px; }
.me-8 { margin-right: 8px; }
.me-16 { margin-right: 16px; }
.me-24 { margin-right: 24px; }
.me-48 { margin-right: 48px; }
/* Margin X-axis (Left + Right) */
.mx-0 { margin-left: 0px; margin-right: 0px; }
.mx-4 { margin-left: 4px; margin-right: 4px; }
.mx-8 { margin-left: 8px; margin-right: 8px; }
.mx-16 { margin-left: 16px; margin-right: 16px; }
.mx-24 { margin-left: 24px; margin-right: 24px; }
.mx-48 { margin-left: 48px; margin-right: 48px; }
/* Margin Y-axis (Top + Bottom) */
.my-0 { margin-top: 0px; margin-bottom: 0px; }
.my-4 { margin-top: 4px; margin-bottom: 4px; }
.my-8 { margin-top: 8px; margin-bottom: 8px; }
.my-12 { margin-top: 12px; margin-bottom: 12px; }
.my-16 { margin-top: 16px; margin-bottom: 16px; }
.my-24 { margin-top: 24px; margin-bottom: 24px; }
.my-40 { margin-top: 40px; margin-bottom: 40px; }
.my-48 { margin-top: 48px; margin-bottom: 48px; }

.mlauto{
margin-left: auto;
}
.dflex{
display: flex;
}

.dflex_fdcol{
display: flex;
flex-direction: column;
}

.text_underline{
text-decoration: underline;
}

.error_msg{
display: none;
}

.error_input input{
    border: 1px solid var(--colorFailed);
}

.error_input input.otp-input-fields{

border: 1px solid var(--colorFailed);

}
.error_input .error_msg{
margin-top: 6px;
display: block;
}

.pos_relative{
position: relative;
}

.colorBlue{
color: #0088FF;
}

.app_input {
  display: block;
  width: 100%;
  height: 42px;
  padding: 8px 12px 8px 16px; 
  border: 1px solid var(--inputBorderColor);
  background-color: #fff;
  border-radius: 8px;
  color: #2d2d2d;
}

.app_input:focus {
  border: 1px solid var(--primary-color);
}

.app_input::placeholder{
color: var(--colorText6); 
font-size: 14px;
font-family: var(--primary-font-family);
}

.app_input:-webkit-autofill,
.app_input:-webkit-autofill:hover,
.app_input:-webkit-autofill:focus,
.app_input:-webkit-autofill:active {
    -webkit-text-fill-color: #5e5e5e;
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    transition: background-color 5000s ease-in-out 0s;
}

.app_input:-moz-autofill {
    color: #5e5e5e !important;
    background-color: white !important;
}

.app_input::-webkit-outer-spin-button,
.app_input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.btn { padding: 10px 20px; border-radius: 8px; cursor: pointer; width: 100%; }
.btn_lg { height: 42px; background-color: var(--primary-color); }
.btn_success { background-color: #EEFBF5; border: 0.5px solid var(--colorSuccess2); }
.btn_settled { background-color: #E8FCFF; border: 0.5px solid var(--colorInfo); }
.btn_pending { background-color: #FFF5F5; border: 0.5px solid var(--colorPending); }
.btn_failed { background-color: #FFF5F5; border: 0.5px solid var(--colorFailed); }
.btn_hold { background-color: #FFF3E8; border: 0.5px solid var(--colorHold); }

.inactive_btn{background-color: #DEDEDE !important; color: #5A5A5A !important;cursor: not-allowed !important; pointer-events: none !important;}


.checkbox_sec {
    display: flex;
    align-items: center;
    gap: 13px;
    cursor: pointer;
    width: fit-content;
  }
.checkbox_sec input.checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 0.83px solid var(--brInfoColor);
  border-radius: 4px;
  position: relative;
  background-color: transparent;
  margin: 0;
  cursor: pointer;
}
.checkbox_sec input.checkbox:checked {
  background-color: #099D3E;
  border: transparent;
}
.checkbox_sec input.checkbox:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 3px;
  height: 8px;
  border: solid #E7F4EB;
  border-width: 0 1px 1px 0;
  transform: rotate(45deg);
}

.select_input_container sup{
color: var(--colorFailed);
}

.custom_drp {
  position: relative;
  width: 100%;
  font-family: Arial, sans-serif;
  cursor: pointer;
}
.custom_drp_selected {
  background: #fff;
  color: var(--colorText6, #5A5A5A);
  border: 2px solid var(--inputBorderColor, #ccc);
  border-radius: 8px;
  padding: 10px 40px 10px 15px;
  font-size: 16px;
  position: relative;
  transition: border-color 0.2s, color 0.2s;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.custom_drp_selected.open {
  border: 1px solid var(--primary-color);
}
.custom_drp_selected.has-value {
  color: #000;
  border-color: var(--primary-color);
}
.custom_drp_selected::after {
  content: '';
  position: absolute;
  right: 18px;
  top: 50%;
  width: 8px;
  height: 8px;
  border: 2px solid #B4B4B4;
  border-top: none;
  border-left: none;
  transform: translateY(-50%) rotate(45deg);
  transition: transform 0.3s, border-color 0.2s;
  pointer-events: none;
}
.custom_drp_selected.open::after {
  transform: translateY(-50%) rotate(-135deg);
}
.custom_drp_selected.has-value::after {
  border-color: #000;
}
.custom_drp_options {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  background: #fff;
  border-radius: 8px;
  border: 0.5px solid var(--inputBorderColor);
  z-index: 1000;
  max-height: 250px;
  overflow-y: auto;
}
.custom_drp_options.open {
  display: block;
}
.custom_drp_option {
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.2s;
}
.custom_drp_option:hover,
.custom_drp_option.selected {
  background: #f7fffb;
}
.lh1_5{
  line-height: 1.5;
}


.remove_custom_arrow.custom_drp_selected::after {
  display: none;
}