@charset "utf-8";

    #auth-form-back {
      background-color: #f5f5f5;
      margin: 0;
      padding: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
		height: 400px;
    }

    #auth-form {
      background-color: #fff;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      max-width: 400px;
      width: 100%;
    }

#auth-title{
	float: left;
}
#protect-title{
    text-align: center;
    padding-top: 1em;	
}
#reg-link{
	color: #54f;
    float: right;
    display: block;
    margin-top: 5px;
}
#restore-pass-link{
	color: #54f;
    float: right;
    display: block;
    padding-bottom: 10px;
}
fieldset.auth-field {
  padding: 0;
  border: 1px solid green;
  border-radius: 4px;
  display: inline-block;
	width: 100%;
	margin: 0.5em 0;
}

fieldset.auth-field input {
	width: 100%;
  line-height: 2em;
  height: 1.5em;
  border: 0px none;
  padding: 0 0.7em 0.25em;
  border-radius: 4px;
  background-color: transparent;
  outline: none;
}
fieldset.auth-field input.password{
	width: calc( 100% - 30px );
}
fieldset.auth-field span{
  position: relative;
  float: right;
  cursor: pointer;
  color: #00800040;
  font-size: 1.2em;
  padding: 3px 6px 0 0;
}
fieldset.auth-field span:hover{
  color: #008000ff;
}
fieldset.auth-field legend {
  transform: translate(0, 18px);
  width: 0;
  margin-left: 0.5em;
  color: green;
  padding: 0;
  white-space: nowrap;
  position: relative;
	cursor: text;
}

fieldset.auth-field legend.legend_cap {
  padding: 0 0.5em;
  transform: unset;
  width: auto;
	cursor: default;
}
span.auth-error{
	display: block;
    clear: both;
    float: none;	
	color: #f00;
}
.auth-button {
    background-color: #4CAF50;
    color: #fff;
    padding: 10px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    margin-top: 10px;
}
#auth-button-yandex{
    display: flex;
    align-items: center;
    justify-content: center;
	background-color: #fff;
	font-size: 14px;
	color: #000;
	border: solid 1px #4CAF50;
}
.yandex-icon {
	width: 1.5em;
	height: 1.5em;
	margin-right: 1em;
    background-image: url("/krlchat/css/images/yandex.svg");
	background-size: contain;
}
#auth-button-avito{
    display: flex;
    align-items: center;
    justify-content: center;
	background-color: #fff;
	font-size: 14px;
	color: #000;
	border: solid 1px #4CAF50;
}
.avito-icon {
	width: 1.5em;
	height: 1.5em;
	margin-right: 1em;
    background-image: url("/krlchat/css/images/avito.svg");
	background-size: contain;
}