/* css UI */
.no-data{
	width:100%;
	text-align:center;
	font-size:14px;
}

.imageLoadData{
	text-align: center;
}

.slide-toTop{
	position: relative;
	animation: slide-toTop 1s;
	animation-fill-mode: forwards;
}

@keyframes slide-toTop {
	from {bottom:-100px;opacity:0.1;}
	to {bottom: 0px;opacity:1;}
}
/* animation: slide-dataSlider 3s infinite ease-in-out;
	animation-delay: 1s; */
.slide-dataSlider{
	position: absolute;
	
	 opacity: 0;
  animation: slide-dataSlider 6.3s infinite linear 1s forwards;
}

@keyframes slide-dataSlider {
	0%{
		opacity: 0.1;
		width:140px;
		font-size:14px;
		height: 31px;
	 }
	 25%{
		opacity: 1;
	 }
	50% {
		opacity: 1;
		width:260px;
		font-size:28px;
		height: 62px;
	}
	90% {
		opacity: 0.1;
		width:140px;
		font-size:14px;
		height: 31px;
	}
}

@media only screen and (min-width: 479px) {
	.leftPanel{
		float:left;
	}
	.rightPanel{
		float:right;
	}
}

.phone {
  -webkit-animation: phone 0.5s ease-in-out infinite alternate;
  -moz-animation: phone 0.5s ease-in-out infinite alternate;
  animation: phone 0.5s ease-in-out infinite alternate;
}

@-webkit-keyframes phone {
  from {
   opacity:0.5;
  }
  to {
    opacity:1;
  }
}

.dataSlider {
    color: white;
    text-align: center;
    /* left: 40%; */
	margin-left:auto;
	margin-right:auto;
	top: 10px;
    border: 3px solid white;
    border-radius: 25px;
    background-color: #275181;
    z-index: 99;
}


@media only screen and (max-width: 479px) {
	@keyframes slide-dataSlider {
		0%{
			opacity: 0.1;
			width:160px;
			font-size:14px;
			height: 33px;
		 }
		 25%{
			opacity: 1;
		 }
		50% {
			opacity: 1;
			width: 180px;
			height: 40px;
			font-size: 18px;
		}
		90% {
			opacity: 0.1;
			width:160px;
			font-size:14px;
			height: 33px;
		}
	}	
}

#codeApply{
	width: 110px;
    font-weight: bold;
    text-align: right;
    border: hidden;
    background-color: transparent;
}

#codeApply:focus{
	outline: none;
}

.sliderPoints{
	margin:0px;
	padding:0px;
}

.sliderPoints li{
	display: inline-flex;
	margin-left:10px;
	margin-left:10px;
}

#setPhoneNumbers .allPhones{
	color:white !important;
}

#setGmails{
	color:white !important;
}

#searchData{
	text-align:center;
}

#searchData select, #searchData input{
	width:150px;
	border:.5px solid #004171;
	border-radius:10px;
	color:#004171;
	text-align-last: right;
}

#searchData  select option{ direction: rtl;}

#searchData button{
	width:150px;
	border:.5px solid #004171;
	border-radius:12px;
	color:#004171;
	font-weight:bold;
}

#errorSearch{
	text-align:center;
	color:#004171;
}

.imgTP{
	background-color: #004171;
    display: block;
    width: 300px;
    cursor: pointer;
    padding: 5px;
    margin: calc(10vh - 30px) auto 0 auto;
}

:root {
  --primary: #22D2A0;
  --secondary: #192824;
  --background: #192824;
  --green: #1FC11B;
  --yellow: #FFD913;
  --orange: #FF9C55;
  --red: #FF5555;
} 

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}