/* Import Inter font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');


/* CSS Variables */
:root {
  --global-black: #0a0908;                 /* Black color */
  --global-white: #ffffff;                 /* White color */
  --global-grey: #50514f;                  /* Grey color */
  --global-back-gray: #cbe1f0;             /* Background gray color */
  --global-blue-gray: #a2daeec2;           /* Blue gray color with opacity */
  --global-blue-gray-hover: #8cc7d8;       /* Blue gray color with opacity on hover */
  --global-blue: #228cd8;                  /* Blue color */
  --global-green: #4ace73;                 /* Green color */
  --global-green-hover: #3db768;           /* Green color on hover */
  --global-light-blue: #e7f9ff;            /* Light blue color */
  --global-button-blue: #007DC3;
  --global-button-blue-hover: #6FBFEC;
}

/* Global Styles */
* {
  font-family: 'Inter', sans-serif; /* Use Inter font */
  box-sizing: border-box; 
}

/* Body Styles */
body {
  margin: 0;                               /* Remove default body margin */
  background-color: var(--global-white);   /* Set background color using the CSS variable */
}

/* Background Wrapper Styles */
/* .wrapper-background { */
  /* position: fixed;                         Fixed position so that it covers the entire viewport */
  /* top: 0; */
  /* left: 0; */
  /* width: 100%; */
  /* height: 100%; */
  /* z-index: -1;                            Place it behind other elements */
  /* display: flex;                          Flex container */
  /* justify-content: center;               Center the content horizontally */
  /* align-items: center;                   Center the content vertically */
  /* background: var(--global-blue-gray);   Set background color using the CSS variable */
/* } */

/* Content Styles */
.content {
  min-height: 89vh;                     /* Minimum height of the content */
  padding: 4vh 0vw;                 /* Padding around the content */
  background: var(--global-white); /* Set background color using the CSS variable */
}

/* Content Wrapper Styles */
.content-wrapper {
  width: 100%;                          /* Take up the full width */
  padding: 0 6vw;                     /* Horizontal padding */
  margin-bottom: 5vh;                   /* Bottom margin */
}

/* Wrapper Styles */
/* .wrapper { */
  /* max-width: 1000px;                   Maximum width of the wrapper */
  /* margin: 0 auto;                      Center the wrapper horizontally */
  /* padding: 0 20px;                     Horizontal padding */
/* } */

/* Content Wrapper Styles (repeated?) */
/* .content-wrapper { */
  /* background-color: var(--global-light-blue); Set background color using the CSS variable */
  /* border-radius: 8px;                         Rounded corners */
  /* margin-top: -20px;                         Negative top margin to overlap the background wrapper */
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);    Box shadow effect */
/* } */

/* Content Styles (repeated?) */
.content {
  margin-bottom: 40px;                       /* Bottom margin */
}

/* Style for a grid container with 2 columns */
.button-grid-2 {
  display: flex;   
  flex-direction: column;                       /* Use flexbox to create the grid */
  gap: 24px;
  margin-top: 32px;
}

/* Margin top for new sections */
.new-section {
  margin-top: 25px;
}

/* Style for buttons in the grid container */
.button-grid-2 .dash-button {
  width: 80%;                           /* Set button width to occupy 45% of the container */
  background-color: #f9f9f9; /* Set background color using the CSS variable */
  /* border: black 1.4px solid; */
  border: 1px solid #ddd;
  border-radius: 8px;                 /* Rounded corners */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  padding: 20px; /* Inner padding */
}

/* Style the components inside the button */
.dash-button {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Style for anchor elements within the buttons */
.button-grid-2 .dash-button a {
  color: #0482ffdc;         /* Set text color using the CSS variable */
  font-size: 32px;          /* Set the text font */
  width: 100%;                       /* Set anchor element to occupy full width of the button */
  height: 100%;                     /* Set anchor element to occupy full height of the button */
  margin: 0 auto;                   /* Center the element horizontally */
  padding: 0.5rem 1rem;            /* Padding around the element */
}

.dash-span {
  font-size: 18px;
  color: var(--global-gray);
  width: 100%;
  height: 100%;
  padding: 0.5rem 1rem;
  padding-bottom: 1rem;
}

/* Custom styles for the grid container */
.grid-container {
  width: 50%;                     /* Set the width to occupy half the page */
  margin: 0 auto;                /* Center align the container */
  padding: 20px;                /* Add some padding */
}

/* Button and Input Styles */
input[type=submit], button[type=button] {
  width: 100%;                              /* Take up the full width */
  height: 100%;                             /* Take up the full height */
  padding: 5px;                             /* Padding inside the element */
  cursor: pointer;                         /* Show a pointer cursor on hover */
  border-radius: 0;                        /* No border radius */
  border: 0;                               /* No border */
  color: var(--global-white);              /* Text color using the CSS variable */
  background-color: var(--global-button-blue);   /* Background color using the CSS variable */
  transition: background-color 0.4s ease-in-out; /* Smooth transition for background color change */
}
input[type=submit]:hover, button[type=button]:hover {
  background-color: var(--global-button-blue-hover) !important; /* Background color on hover using the CSS variable */
}


/* Read-only input styles */
input[type=text]:-moz-read-only {
  background-color: #f5f5f5; /* Background color for read-only inputs in Mozilla Firefox */
}

input[type=text]:read-only {
  background-color: #f5f5f5; /* Background color for read-only inputs */
}

/* Error Div Styles */
.error-div {
  background-color: var(--global-white); /* Background color using the CSS variable */
  padding: 10px;                              /* Padding inside the element */
  margin-bottom: 15px;                        /* Bottom margin */
}

/* Error Message Styles */
#error-message {
  color: #ff0000;           /* Text color for error messages */
  font-weight: bold;        /* Bold font weight */
}

/* Loader Styles */
.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  background-color: rgba(255, 255, 255, 0.8);
  display: none;
}

@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Loader Image Styles */
.loader svg {
  position: absolute;
  width: 100px;
  height: 100px;
  color: #228cd8;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: rotate 2s linear infinite;
}

.loader h1 {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--global-black);
}