/* Apply Open Sans to headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600; /* Semi-bold for headings */
}

/* Apply Roboto to the body and other elements */
body {
    font-family: 'Roboto', sans-serif;
    font-weight: 400; /* Regular weight for body text */
    line-height: 1.6; /* Increase line height for better readability */
    font-size: 16px; /* Standard font size */
    color: #333; /* Dark gray color for text */
}

/* Optional: Apply Open Sans for navigation or any special areas */
nav {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400; /* Regular weight for nav */
}


body {
    font-size: smaller;
    color: #333; /* Dark gray for readability */
    background-color: #f8f9fa; /* Light gray background for a soft UI */
    margin: 0;
    padding: 0;
}

/* For all scrollable elements */
* {
	scrollbar-width: thin; /* Firefox */
	scrollbar-color: #b0b0b0 #f0f0f0; /* Light gray thumb and track */
}

/* Webkit-based browsers (Chrome, Edge, Safari) */
*::-webkit-scrollbar {
	width: 8px;
	height: 8px; /* For horizontal scrollbars */
}

/* Scrollbar track */
*::-webkit-scrollbar-track {
	background: #f0f0f0;
	border-radius: 10px;
}

/* Scrollbar thumb */
*::-webkit-scrollbar-thumb {
	background: #b0b0b0; /* Light gray */
	border-radius: 20px; /* Fully rounded edges */
	border: 2px solid #f0f0f0; /* Adds spacing around thumb */
}

/* Hover effect */
*::-webkit-scrollbar-thumb:hover {
	background: #909090; /* Slightly darker gray on hover */
}

/* scrollbar css end */


.app-header-background {
	background-color: #163357 !important;
}

.app-sidebar-background {
	background-color: #e3e9ee !important;
}

.app-body-background {
	background-color: #fafafa !important;
}

.line-divider {
	width: 100%;
	height: 0.5px;
	background-color: #666;
}

/* scrollbar css start */
#sendAmount:focus, #receiveAmount:focus, #receiveAmount:active,
	#sendAmount:active {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

#sendAmount::-webkit-inner-spin-button, #sendAmount::-webkit-outer-spin-button,
	#receiveAmount::-webkit-inner-spin-button, #receiveAmount::-webkit-outer-spin-button
	{
	-webkit-appearance: none;
	margin: 0;
}

#receiveAmount, #sendAmount {
	-moz-appearance: textfield; /* Firefox */
}

/* Hide the number input spinner controls in Chrome, Edge, and Safari */
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* Firefox */
    input[type="number"] {
        -moz-appearance: textfield;
    }

/* Custom switch design */

/* cookies css start*/
/* Cookie Banner Styling */
.cookie-banner {
    z-index: 9999;
    background-color: #F0F8FF;
    border-radius: 15px;
    max-width: 35rem;
    padding: 2rem;
    display: block;
    position: fixed;
    inset: auto 0% 0% auto;
}

/* Cookie Content */
.cookie-content p {
    color: #2c3e50;
    margin-bottom: 10px;
    line-height: 1.5;
}

/* Cookie Buttons */
.cookie-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* Button Styles */
.cookie-btn {
    padding: 8px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.cookie-btn.accept {
    background: #28a745;
    color: white;
}

.cookie-btn.decline {
    background: #dc3545;
    color: white;
}

.cookie-btn.manage {
    background: #ffc107;
    color: black;
}

.cookie-btn:hover {
    opacity: 0.8;
}

/* cookies css end*/


.dropdown-toggle{
    color: white !important
}



/*dev tools restriction style css start*/
/* Fullscreen Overlay */
.blocked-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85); /* Darker background for better contrast */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 99999;
    animation: fadeIn 0.5s ease-in-out;
}

/* Centered Message Box */
.blocked-container {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
    width: 420px;
    text-align: center;
    animation: fadeIn 0.5s ease-in-out;
}

/* Blinking Security Alert */
.blocked-container h2 {
    color: #d9534f;
    font-size: 24px;
    margin-bottom: 15px;
    animation: blink 1.5s infinite;
}

/* Message Text */
.blocked-container p {
    font-size: 16px;
    color: #444;
    line-height: 1.6;
    margin-bottom: 10px;
}

/* Fade-in Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Blinking Animation */
@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Refresh Button */
.refresh-button {
    margin-top: 15px;
    padding: 10px 15px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: #d9534f;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s ease-in-out;
}

.refresh-button:hover {
    background: #c9302c;
}

/*dev tools restriction style css end*/

/* OR divider start*/
.or-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 24px 0;
    color: #666;
    font-size: 16px;
    font-weight: 500;
}

.or-divider::before,
.or-divider::after {
    content: '';
    flex: 1;
    border-top: 1px solid #ccc;
    margin: 0 12px;
}

/* OR divider end*/

/*registration message from login start*/
.signup-message {
  text-align: center;
  font-size: 18px;
}

.signup-link {
  color: #007bff; /* Blue color for the link */
  text-decoration: none;
}

.signup-link:hover {
  text-decoration: underline; /* Underline the link on hover */
}
/*registration message from login end*/

/**/
.forget-password-link, .resend-activation-link {
  color: #555555 !important;/* Bootstrap primary color */
  text-decoration: none;
  padding: 10px;
}

.btn-link {
    color: #555555 !important;/* Bootstrap primary color */
    text-decoration: none;
    background: transparent;
    border: unset;
    box-shadow: unset;
}


.forget-password-link:hover, .resend-activation-link:hover {
  text-decoration: underline;
}

/**/

/*parsley css customization start*/
/* Style the valid tick (checkmark) to be smaller */
input.parsley-success:valid, select.parsley-success:valid, textarea.parsley-success:valid {
    background-size: 35px auto !important;
}
/*parsley css customization end*/


/*coundown start*/
 .countdown {
/*            margin-left: 12px;*/
            margin-right: 12px;
        }

 .requestOtpCodeAgain a {
             color: gray;
                 margin-left: 16px;
                 margin-right: 16px;
         }
         .hidden {
             display: none;
         }
/*countdown end*/

/* login and registration css*/

label{
    font-size: 1rem  !important;
    margin-bottom: 5px;
}



.custom-input{
    border: none!important; /* Removes the border */
    outline: none!important; /* Removes the outline */
/*    background-color: #28333E !important;*/
    color: #172B5D !important; /* Text color inside the input */
    padding: 10px !important; /* Add padding for a deeper look */
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.5)!important; /* Add an inset shadow for a "deep" effect */

    border-radius: 15px !important;
    padding: 15px !important;
    font-size: large !important;

}



.custom-input-group{
     border-top-left-radius: 20px !important;
     border-bottom-left-radius: 20px !important;

      border: none!important; /* Removes the border */
         outline: none!important; /* Removes the outline */
         background-color: #28333E !important;
         color: white !important; /* Text color inside the input */
         padding: 10px !important; /* Add padding for a deeper look */
         box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5)!important; /* Add an inset shadow for a "deep" effect */

         padding: 15px !important;
         font-size: large !important;
}


.custom-button-group{
     border-top-right-radius: 20px !important;
     border-bottom-right-radius: 20px !important;

     border: none!important; /* Removes the border */
              outline: none!important; /* Removes the outline */
              background: #4A90E2 !important;
                  color: white !important;
              padding: 10px !important; /* Add padding for a deeper look */
              box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5)!important; /* Add an inset shadow for a "deep" effect */

              padding: 15px !important;
              font-size: large !important;
transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transition for color and scale */

}

.custom-button-group:hover {
 background-color: #357ABD !important; /* Darker shade of the base color */
    transform: scale(1.05); /* Slightly enlarge the button */
}


.button-container {
    display: flex;
    justify-content: center;
    align-items: center;


}

.animated-button {
    padding: 10px 10px;
    font-size: 15px;
    color: white;
    background-color: #172B5D; /* Light purple background */
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease; /* Smooth transition for hover effects */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
    outline: none;
    width: -webkit-fill-available !important;
    margin-top: 10px;
    font-weight: 600;
    letter-spacing: 1px;
}

.animated-button:hover {
    background-color: #0B5ED7; /* Light purple background */
    color: white;
}

.animated-button:active {
    transform: translateY(2px) scale(1); /* Slight press effect when clicked */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Slight reduction of shadow on click */
}

.animated-button:focus {
    outline: none; /* Remove focus outline */
}

/* login and registration css*/

/**/
  .scan-to-download-app {
      display: flex;                    /* Enable Flexbox */
      flex-direction: column;           /* Stack items vertically */
      justify-content: center;          /* Center items vertically */
      align-items: center;              /* Center items horizontally */
      text-align: center;               /* Center the text horizontally */
      height: 100%;                     /* Make sure the container takes full height */
      padding: 20px;                    /* Optional padding */
/*      border-radius: 8px;               *//* Optional rounded corners */
/*      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); *//* Optional subtle box shadow */
  }

.scan-to-download-app img:hover {
    box-shadow: 0 0 100px rgba(0, 0, 0, 0.2); /* Increased feather effect on hover */
}

.scan-to-download-app span {
    display: block;                   /* Make sure spans take full width */
    margin: 5px 0;                    /* Add some space between text lines */
}

.scan-to-download-app span:first-child {
    font-weight: bold;                /* Bold the first line of text */
    font-size: 18px;                  /* Larger font size for emphasis */
}

        .scan-to-download-app img {
            width: 60%;                       /* Make the image responsive */
            margin-bottom: 15px;              /* Space between image and text */
/*            border-radius: 12px;              *//* Optional rounded corners for the image */
/*            box-shadow: 0 0 50px rgba(0, 0, 0, 0.1); *//* Feather effect: soft shadow around the image */
            transition: box-shadow 0.3s ease-in-out; /* Smooth transition for feather effect */
        }
/**/



.inline-action{
    display: inline-flex;
}


  .highlight-error {
    color: red;
    font-weight: bold;
  }

.password-guidelines{
    background-color: #F8F9FD;
    color: dimgrey;
    padding: 10px;
    border-radius: 16px;
    margin-left: 5px;
    margin-right: 5px;
}

.passwordWithToggleIconWrapper{
    position: relative; /* IMPORTANT for absolute positioning inside */
    display: inline-block; /* keeps wrapper to input's size */
}

.togglePasswordIcon{
    position: absolute;
    top: 30px;               /* vertically center */
    right: 30px;            /* distance from right edge of input */
    transform: translateY(-50%);
    color: darkslateblue;
    font-size: large;
    cursor: pointer;
    user-select: none;
}

/* ------------------------ */