.auth_all{
  padding: 0 30%;
  /* height: 100vh; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.auth_alls{
padding: 0 10%;
/* height: 100vh; */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
}


.auth_allss{
  padding: 0 3%;
  /* height: 100vh; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.auth_boxs {
  width: 100%;
  padding: 0 2%;
  padding-block: 50px;
  background-color: #fff;
  margin-block: 50px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  overflow-x: auto; /* Use 'auto' instead of 'scroll' to show scrollbar only when needed */
  white-space: nowrap; /* Prevents content from wrapping */
}

/* Custom scrollbar for WebKit browsers (Chrome, Safari) */
.auth_boxs::-webkit-scrollbar {
  height: 8px; /* Adjust scrollbar thickness */
}

.auth_boxs::-webkit-scrollbar-track {
  background: #f1f1f1; /* Track background */
  border-radius: 10px;
}

.auth_boxs::-webkit-scrollbar-thumb {
  background: #cc1827; /* Scrollbar color */
  border-radius: 10px;
}

.auth_boxs::-webkit-scrollbar-thumb:hover {
  background: #cc1827; /* Darker color on hover */
}


.auth_box{
  width: 100%;
  padding: 0 5%;
  padding-block: 50px;
  background-color: #fff;
  margin-block: 50px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  overflow-x: auto; /* Use 'auto' instead of 'scroll' to show scrollbar only when needed */
  white-space: nowrap; /* Prevents content from wrapping */
}

/* Custom scrollbar for WebKit browsers (Chrome, Safari) */
.auth_box::-webkit-scrollbar {
height: 8px; /* Adjust scrollbar thickness */
}

.auth_box::-webkit-scrollbar-track {
background: #f1f1f1; /* Track background */
border-radius: 10px;
}

.auth_box::-webkit-scrollbar-thumb {
background: #cc1827; /* Scrollbar color */
border-radius: 10px;
}

.auth_box::-webkit-scrollbar-thumb:hover {
background: #cc1827; /* Darker color on hover */
}

.auth_box .logo{
  margin: 0 auto;
}
.title{
text-align: center;
margin-top: 20px;
}

.forms{
  position: relative;
}

.toggle-password{
  position: absolute;
  right: 30px;
  top: 40%;
}

.action{
  display: flex;
  justify-content: space-between;
}
.action a{
  color: #000;
}
.action{
color: #000;
text-align: center;
width: 100%;
margin: auto;
}

.canvas{
width: 100%;
height: 600px;
object-fit: contain;
margin-top: 50px;
border: 2px dashed #ddd;
padding: 5%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.forms_group{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
}

.grids {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}

@media only screen and (max-width: 1110px) {
.auth_all{
  padding: 0 5%;
}

.grids {
  display: grid;
  grid-template-columns: 1fr ;
}

.forms_group{
display: grid;
grid-template-columns: 1fr;
gap: 0;
}
 }