/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

.alert-wrapper {
	width: 100vw;
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	display: none;
}

.alert-wrapper .alert-line-title {
	text-transform: uppercase;
	font-size: 12px;
	color: #666666;
	margin: 32px auto 8px auto;
}

.alert-wrapper .alert-line-title .radio-text {
	
}

.alert-wrapper .radio-text {
	margin-right: 8px;
}

.alert-background {
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.alert-window {
	display: flex;
	flex-direction: column;
	border-radius: 4px;
	box-shadow: 10px 10px 20px rgba(0,0,0,0.4);
}

.alert-top-bar {
	background-color: #e8e8e8;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}

.alert-top-bar h1 {
	font-size: 14px;
	margin: 0;
	padding: 8px 16px;
	font-weight: 600;
	color: #444444;
}

.alert-body {
	background-color: white;
	flex: 1 1 auto;
	color: #444444;
}

.alert-body-scroll {
	padding: 8px;
	text-align: center;
}

.alert-window .buttons {
	text-align: center;
	flex: 0 0 44px;
	background-color: white;
	padding: 4px 0;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}

.alert-window .buttons > .section-button {
	margin: 4px;
	background-color: #eeeeee;
	padding: 8px 16px;
	border-radius: 3px;
	color: #777777;
}

.alert-window .buttons > .section-button.primary {
	color: #2aa300;
}

.alert-window .buttons > .section-button:hover {
	background-color: #67C048;
	color: white;
}

.alert-error {
	color: #ff1414;
	font-weight: 100;
	font-size: 14px;
	text-align: center;
	background-color: white;
}

.alert-helper-text {
	color: #666666;
	font-size: 14px;
	margin: 8px 0;
}

.alert-big-text {
	margin: 0;
	margin-left: 8px;
	font-weight: 100;
	color: #222222;
	font-size: 20px;
}

.loading-ani {
	width: 70px;
	height: 18px;
	background-image: url('../images/connecting_ani.gif');
	margin: 16px auto;
}

.alert-list {
	padding: 0;
	margin: 0;
}

.alert-list li {
	padding: 0;
	margin: 16px 0;
}

.alert-inline {
	display: inline-block;
	color: #444444;
	font-size: 14px;
}

.alert-line-wrapper {
	margin: 16px 0;
}

.alert-line-wrapper input[type='text'] {
	margin: 8px 0;
}

.progress-bg {
	display: block;
	height: 20px;
	border-radius: 10px;
	background-color: #cccccc;
	margin: 40px 20px;
}

@keyframes progress {
	from {
		width: 0%;
	}
	to {
		width: 100%;
	}
}

.progress-bar {
	display: block;
	height: 100%;
	border-radius: 10px;
	background-color: #83B62B;
	animation-duration: 3s;
}

.progress-desc {
	font-size: 16px;
	color: #555555;
	padding: 8px;
}

.percent-text {
	text-align: center;
	width: 340px;
	display: block;
	position: relative;
	top: 2px;
	color: white;
	font-size: 14px;
	font-weight: bold;
}