@import url('https://fonts.googleapis.com/css?family=Roboto:400');

@keyframes modalite-spinner-animation{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.modal{display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.8);position:fixed;z-index:9999;top:0;left:0;width:100%;height:100%;box-sizing:border-box;padding:3rem;visibility:hidden;opacity:0;transition:visibility 0.3s linear, opacity 0.3s ease-out}
.modal.modal-visible{visibility:visible;opacity:1}
.modal-container{position:relative;width:400px;height:250px;max-width:650px;max-width:40rem;max-height:500px;max-height:30rem;transform:scale(0.9);transition:transform 0.3s ease-out}
.modal.modal-visible .modal-container{transform:scale(1)}
.modal.modal-remote .modal-container:before{content:"";display:none;background:#eee;position:absolute;left:0;top:0;width:100%;height:100%;border-radius:5px;visibility:visible;opacity:0.9;transition:all 0.3s ease-out}
.modal.modal-remote.modal-visible .modal-container:before{display:block}
.modal.modal-remote.modal-loaded .modal-container:before{visibility:hidden;opacity:0}
.modal.modal-remote .modal-container:after{content:"";background:url("assets/spinner.png");animation:modalite-spinner-animation 0.8s linear infinite;margin-left:-15px;margin-right:-15px;width:30px;height:30px;position:absolute;top:50%;left:50%;visibility:hidden;opacity:0;transition:all 0.3s ease-out}
.modal.modal-remote.modal-loading .modal-container:after{visibility:visible;opacity:1}
.modal-container .modal-close{position:absolute;top:-16px;right:-16px}
.modal-close:hover{background-color:#ea3c3c}

.modal-content{
	width:100%;
	box-sizing:border-box;
	padding:0;
	overflow:auto;
	font-family:'Roboto', sans-serif;
}

@media (max-width: 768px){
	.modal-container{
		width:300px;
		height:240px;
	}
	
	.modal-content-image {
		padding:15%;
	}
	.modal-content-description {
		padding-left: 10px;
		padding-right: 10px;
	}
	
}

.modal-container {
	background: #3890dc;;
}

.modal-content-image {
	padding-top: 20px;
	background: white;
	height: 100px;
}

.close-popup {
	text-align: right;
	color: #3890dc;
	font-size: 40px;
	margin-top: -22px;
	background: white;
	padding-right: 10px;
}

.teamviewer_logo {
	padding-top:25px;
	background-image:url('../assets/rsz_teamviewer_logo.png');
	background-size: contain;
    background-repeat: no-repeat;
	background-position: 50% 50%;
	height:33px; 
	border-radius: 3px;
}

.modal-content-description {
	letter-spacing: 0.5px;
	text-align: center;
	padding-top: 7%;
	color: white;
	font-size: 12px;
}

.button-close {
	width: 75px;
	margin: 0 auto;
	cursor:pointer;
}

.close-text {
	letter-spacing: 0;
	margin-top: 27%;
	padding: 7px 10px;
	border: 2px solid white;
	transition:all 0.3s ease-out;
}

.close-text:hover {
	background-color: #fff;
	color: #3890dc;
}