@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');


:root {
  /* --primary: #7952b3;
  --secondary: #61428f;
  --border-color: #dee2e6;
  --max-width: 1140px;
  --border-radius: 0.25rem;
  --button-text: #fff;
  --button-focus: 0 0 0 3px rgba(121, 82, 179, 0.25);
  --link-color: #7952b3;
  --text-main: #363636;
  --text-bright: #000;
  --body-bg-color: #f9fafb;
  --footer-bg-color: #fff;
  --form-bg-color: #fff;
  --input-text-color: #000;
  --input-text-disabled: #7a7a7a;
  --input-placeholder-color: #c2c2c2;
  --input-border-color: #ccc;
  --input-background-color: #fff;
  --input-disabled: #f5f5f5;
  --input-focus: 0 0 0 3px rgba(121, 82, 179, 0.25); */
  --error: #dc3545;
  --success: #198754;
  --warning: #664d03;
  --info: #0c5460;
  --alert-error-bg: #f8d7da;
  --alert-warning-bg: #fff3cd;
  --alert-success-bg: #d4edda;
  --alert-info-bg: #d1ecf1;
}

body{
    font-family: 'Poppins', sans-serif;
    background: #ececec;
}
/*------ alerts by other ---------  */

.alert {
  position: relative;
  padding: 1rem 1rem;
  margin-bottom: 1rem;
  border-radius: var(--border-radius);
}
.alert-error {
  color: var(--error);
  background-color: var(--alert-error-bg);
}
.alert-warning {
  color: var(--warning);
  background-color: var(--alert-warning-bg);
}
.alert-info {
  color: var(--info);
  background-color: var(--alert-info-bg);
}
.alert-success {
  color: var(--success);
  background-color: var(--alert-success-bg);
}


/*------------ Login container ------------*/

.box-area{
    width: 930px;
}

/*------------ Right box ------------*/

.right-box{
    padding: 40px 30px 40px 40px;
}

/*------------ Custom Placeholder ------------*/

::placeholder{
    font-size: 16px;
}

.rounded-4{
    border-radius: 20px;
}
.rounded-5{
    border-radius: 30px;
}


/*------------ For small screens------------*/

@media only screen and (max-width: 768px){

     .box-area{
        margin: 0 10px;

     }
     .left-box{
        height: 100px;
        overflow: hidden;
     }
     .right-box{
        padding: 20px;
     }

}