@font-face {
  font-family: "Roboto";
  src:
    url("/fonts/Roboto.ttf") format("ttf"),
    url("/fonts/Roboto.woff2") format("woff2"),
    url("/fonts/Roboto.woff") format("woff");
}

@font-face {
  font-family: "SourceSansPro-Light";
  src:
    url("/fonts/SourceSansPro-Light.ttf") format("ttf"),
    url("/fonts/SourceSansPro-Light.woff") format("woff"),
    url("/fonts/SourceSansPro-Light.woff2") format("woff2");
}

body,html{
  padding:15px;
  margin: 0;
  background-color: hsl(222.86deg 63.64% 97.84%);
  font-family:  Roboto, Arial, sans-serif;
  font-size: 14px;
}

.error {
    color:red;
    font-weight:bold;
    margin-top:5px;
}

.container {
   max-width: 700px;
   margin-left:auto;
   margin-right:auto;
}

.profile_info_ava{
    width: 100px;
    height: 100px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 50px;
    border: 1px solid #dcdcdc;
}

.reg{
    border-radius: 5px;
}

.reg_box .header{
    background-color: #86105a;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    text-align:center;
    color: #fff;
    padding: 15px;
}

.reg_box .header span {
    font-size:1.5rem;
    display:inline-block;
    vertical-align:middle;
    font-weight:bold;
}

.reg_box .header img{
    width: 170px;
    height:40px;
    vertical-align:middle;
}
 
.reg_box .main{
    box-shadow: 1px 1px 6px 0px #00000029;
    background-color: #fff;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
    padding: 25px;
}
.inp{
    border-radius: 5px;
    font-weight: 400;
    outline: none;
    width: 100%;
    padding: 10px 5px;
    background-color: transparent;
    border: 1px solid #dedede;
    color: #000;
    margin-top: 5px;
}

::-webkit-input-placeholder {
    color: #7a7a7a;
}
::-moz-placeholder { /*Firefox 19+*/
    color: #000000;
} 
:-moz-placeholder{ /*Firefox 18-*/
    color: #000000;
}
:-ms-input-placeholder{
    color: #000000; 
}

select{
  cursor: pointer;
}

.btn-1 {
    cursor: pointer;
    padding:10px 30px 10px 30px;
    border-radius: 5px;
    background-color: #86105a;
    color:#fff;
    font-weight:bold;
    border: 1px solid #af056f;
    font-size: 15px;
    transition: all 0.1s ease-in-out;
    text-align: center;
    margin-top:5px;
}

.btn-1:hover{
    background-color: #520736;
}

.grid-2-col{
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 15px;
}

.a {
    text-decoration: none;
    color: #000000;
    font-weight:bold;
    transition: all 0.2s ease-in-out;
}

.a:hover{
    color: #013758;
}

.btn-2 {
    display:inline-block;
    padding:10px;
    background-color: hsl(231.43deg 53.85% 97.45%);
    border: 1px solid hsl(216deg 8.2% 88.04%);
    border-radius: 7px;
    color:#000;
    cursor: pointer;
    transition: all 0.1s ease-in-out;
}

.btn-2:hover{
    background-color: hsl(231.43deg 24.62% 88.91%);
}

.btn-3 {
    cursor: pointer;
    padding:10px 30px 10px 30px;
    border-radius: 5px;
    background-color: transparent;
    color:#af056f;
    font-weight:bold;
    border: 1px solid #af056f;
    font-size: 15px;
    transition: all 0.1s ease-in-out;
    text-align: center;
    margin-top:5px;
}

.btn-3:hover{
    background-color: #86105a;
    color:#fff;
}

.auth_container{
  width: 400px;
}

.a_enter {
     text-decoration:none;
     font-weight:bold;
     color: #86105a;
     font-size: 1.2em;
     transition: all 0.1s ease-in-out;
}

.a_enter:hover{
     color: #d30c89;
}


@media(max-width: 820px){
  .container{
    max-width: 90%;
  }
}

@media(max-width:600px){
    .grid-2-col{
        display: block;
    }
    .grid-2-col > div{
        margin-top:10px;
    }
    .container{
      max-width: 100%;
    }
}

@media(max-width:400px){
  body,html{
    padding: 5px!important;
  }
  .btn-1, .btn-3{
    font-size: 11px;
  }
}