/* CSS Document */

/*************************************************
//////////////////////////////////////// LOGIN
**************************************************/
#auth{
	margin:50px auto 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}
#auth .authform{
	display: flex;
	flex-direction: column;
	padding: 25px 35px;
	margin-top: 30px;
	min-width: 380px;
	max-width: 380px;
	background-color: #ECECEC;
	border: 1px solid #C0C0C0;
	box-shadow: 0 5px 10px -8px #666666;
	/*box-shadow:0px 0px 10px -3px #666;
	-webkit-box-shadow:0px 0px 10px -3px #666;
	-moz-box-shadow:0px 0px 10px -3px #666;*/
}
@media (max-width: 700px) {
    #auth {
        margin: 20px auto 0;
    }

    #auth .authform {
        width: 90%;
        min-width: unset;
        padding: 15px 20px;
        box-sizing: border-box;
    }
}
#auth .player{
	float: left;
	width: 640px;
}
#auth a.logo{
	display:block;
	background:url(../imgs/logo.svg) no-repeat top left;
	background-size: contain;
	width:220px;
	height:81px;
	align-self: center;
	margin-top: 15px;
	margin-left: -4px;
}
#auth .footer{
	clear: both;
	color: #666;
	margin: 25px 0 0;
	text-align: center;
	width: 1002px;
	font-family: Arial,Verdana,sans-serif;
	font-size: 11px;
	position: fixed;
	bottom: 0;
}
#auth .authform .t{
	margin-bottom: 15px;
	color: #333;
	padding-bottom: 3px;
	border-bottom: 1px solid #DADADA;
	font-size: 16px;
}
#auth .authform .f{
	color: #666;
	flex:1;
}
#auth .authform .f .l{
	margin-bottom: 3px;
	font-size: 15px;
	max-width: 500px;
}
#auth .authform .f input[type=text],
#auth .authform .f input[type=password]{
	display: block;
	border: 1px solid #C0C0C0;
	padding: 18px 13px;
	height: 34px;
	width: 100%;
	font-size: 14px;
	color: #666;
	box-sizing: border-box;
}
#auth .authform .f input[type=text]:focus,
#auth .authform .f input[type=password]:focus{
	border: 1px solid #FDB913;
	box-shadow:0px 0px 4px -3px #666 inset;
	-webkit-box-shadow:0px 0px 4px -3px #666 inset;
	-moz-box-shadow:0px 0px 4px -3px #666 inset;
}
#auth .authform input[type=checkbox]{
	margin:0px 5px 5px 0px;
}
#auth .authform input[type=submit],
#auth .authform button[type=submit],
#auth .authform input[type=button].login-passkeys{
	float: right;
	border: 1px solid #cf9300;
	background-color: #fdc944;
	padding: 6px 20px;
	font-size: 1.4em;
}
#auth .authform .sep{
    display: flex;
    height: 1px;
    background: #42474a;
    margin-top: 20px;
}
#auth .authform .row{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin-top: 20px;
}
#auth .authform .row:first-child{
	margin-top: 0;
}
#auth .authform .row.row-flex{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
#auth .authform .row.row-right {
    justify-content: flex-end;
}
#auth .authform .row.row-center {
    justify-content: center;
}
#auth .authform .row.mt-0 {
    margin-top: 0;
}

#auth .authform .small{
	font-size: 13px;
	float: left;
	clear: left;
	color: #999;
}



#auth .authform #authtries:empty{
	display:none;
}
#auth .authform #authtries{
	background-color:#FDB913;
	padding:3px;
	color:#333;
	text-align:center;
	margin-top:3px;
	width:315px;
}


#auth .user-card{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 10px;
	font-size: 1.6em;
}
#auth .user-card > img{
	width: 64px;
	height: 64px;
	border-radius: 50%;
}
#auth .select-text{
	font-size: 1.2em;
	text-align: center;
	padding: 10px 0;
	border-bottom: 1px solid #bfbfbf;
	color: #666;
}
#auth .or-text {
    font-size: 1.2em;
    text-align: center;
    padding: 20px 0;
    font-style: italic;
    color: #666;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

#auth .or-text::before, #auth .or-text::after {
    content: "";
    display: block;
    background: #42474a;
    height: 1px;
    flex: 1;
}
#auth .groups-list {
	display: flex;
	flex-direction: column;
	margin-left: -35px;
	margin-right: -35px;
}
#auth .group-card{
	padding: 0 35px;
	gap: 10px;
	font-size: 1.6em;
	color:#000;
}
#auth .group-card:hover{
	background-color: #f3f3f3;
	text-decoration: none;
}
#auth .group-card .group-data{
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 10px;
	padding: 15px 0;
}
#auth .group-card .group-data > .group-name {
	padding-top: 5px;
}
#auth .group-card .group-data > img{
	width: 64px;
	height: 64px;
	border-radius: 5px;
	border: 1px solid #a4a4a4;
}
#auth .logout-link{
	display: flex;
	cursor: pointer;
	font-size: 1.4em;
	justify-content: center;
}
#auth .logout-link.mt-20 {
    padding-top: 20px;
}

@keyframes shake-error {
	0% {
		transform: translateX(0);
	}
	25% {
		transform: translateX(-5px);
	}
	50% {
		transform: translateX(5px);
	}
	75% {
		transform: translateX(-5px);
	}
	100% {
		transform: translateX(0);
	}
}

.shake-error {
	animation: shake-error 0.2s ease;
}

.confirmation__qr {
	align-self: center;
	align-items: center;
	justify-content: center;
	display: flex;
	border: 1px solid #666666;
	border-radius: 4px;
	box-shadow: 4px 4px 7px rgba(0, 0, 0, 0.1);
	margin: auto;
	width: fit-content;
}

.confirmation__qr img {
	max-width: 300px;
	max-height: 300px;
	aspect-ratio: 1/1;
	border-radius: 4px;
}

.confirmation__warning {
	display: flex;
	flex-direction: row;
	color: orange;
	font-size: 24px;
	align-items: center;
	gap: 4px;
	font-weight: bold;
}

.confirmation__warning p {
	font-size: 24px;
}

.authmsg {
	padding: 10px;
	border-radius: 4px;
	flex: 1;
	justify-content: center;
	align-items: center;
}

.authmsg--success{
	display: flex;
	background: #e6f4ea;
	border: 1px solid #3c763d;
	color: #3c763d;
}
.authmsg--warning {
    display: flex;
    background: #fffae6;
    border: 1px solid #b3a125;
    color: #6e6415;
}
.authmsg--error {
	display: flex;
	background: #fdd;
	border: 1px solid #964040;
	color: #964040;
}

#auth .authform .f input[type=text].mfa_code {
	margin-top: 20px;
	font-size: 2em;
	text-align: center;
}