/*
 * 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.
 */
 * {
  -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

body {
  -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
  -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
  -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
  


/* background-color:#E4E4E4;
  background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #053c54),color-stop(0.9, #ffffff),color-stop(0, #053c54));
  background-image:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
  background-image:-webkit-linear-gradient(linear, left top,left bottom,#053c54,#ffffff,#053c54) */
  

background-attachment:fixed;
  font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
  font-size:12px;
  height:100%;
  margin:0px;
  padding:0px;
  width:100%;
}

/* Portrait layout (default) */
.app {
  background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
  position:absolute;             /* position in the center of the screen */
  left:50%;
  top:50%;
  height:50px;                   /* text area height */
  width:225px;                   /* text area width */
  text-align:center;
  padding:180px 0px 0px 0px;     /* image height is 200px (bottom 20px are overlapped with text) */
  margin:-115px 0px 0px -112px;  /* offset vertical: half of image height and text area height */
                                 /* offset horizontal: half of text area width */
}

/* Landscape layout (with min-width) */
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
  .app {
      background-position:left center;
      padding:75px 0px 75px 170px;  /* padding-top + padding-bottom + text area = image height */
      margin:-90px 0px 0px -198px;  /* offset vertical: half of image height */
                                    /* offset horizontal: half of image width and text area width */
  }
}

/*h1 {
  font-size:24px;
  font-weight:normal;
  margin:0px;
  overflow:visible;
  padding:0px;
  text-align:center;
}*/

.event {
  border-radius:4px;
  -webkit-border-radius:4px;
  color:#FFFFFF;
  font-size:12px;
  margin:0px 30px;
  padding:2px 0px;
}

.event.listening {
  background-color:#333333;
  display:block;
}

.event.received {
  background-color:#4B946A;
  display:none;
}

.bg {
  background-color: #383f47;
  /* The image used */
    /* Full height */
    height: 100%;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@keyframes fade {
  from { opacity: 1.0; }
  50% { opacity: 0.4; }
  to { opacity: 1.0; }
}

@-webkit-keyframes fade {
  from { opacity: 1.0; }
  50% { opacity: 0.4; }
  to { opacity: 1.0; }
}

.blink {
  animation:fade 3000ms infinite;
  -webkit-animation:fade 3000ms infinite;
}

input:focus { 
  border-color: white;
}
.homeBtn{
-webkit-box-shadow: 3px 3px 3px 3px #283941;
    border: 1px solid #60747c;
background-color:#E4E4E4;
  background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #2b2e30),color-stop(0.9, #ffffff),color-stop(0, #2b2e30));
  background-image:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
  background-image:-webkit-linear-gradient(linear, left top,left bottom,#2b2e30,#ffffff,#2b2e30)
}

.footer_div_en{
  position: fixed;
  bottom: 0px;
  left: 0px;
  color: white;
  right: 0px;
  background-color: #333435;
  padding: 1px;
  text-align: left;
  z-index: 100;
}
.footer_div_en a{
  color: white;
  padding: 5px;
  font-weight: 700;
}
.footer_div_ar{
  position: fixed;
  bottom: 0px;
  left: 0px;
  color: white;
  right: 0px;
  background-color: #333435;
  padding: 1px;
  text-align: right;
  z-index: 100;
}
.footer_div_ar a{
  color: white;
  padding: 5px;
  font-weight: 700;
}

.homeBtn1 {
  text-align: -webkit-center;
  border-radius: 10px;
  /* box-shadow: 0px 0px 5px #000; */
  background: linear-gradient(#895fab, #794fb5);
}
.homeBtn2 {
  text-align: -webkit-center;
  border-radius: 10px;
  /* box-shadow: 0px 0px 5px #000; */
  background: linear-gradient(#f2774b, #b5542b);
}
.homeBtn3 {
  text-align: -webkit-center;
  border-radius: 10px;
  /* box-shadow: 0px 0px 5px #000; */
  background: linear-gradient(#0192bf, #217aa5);
}
.homeBtn4 {
  text-align: -webkit-center;
  border-radius: 10px;
  /* box-shadow: 0px 0px 5px #000; */
  background: linear-gradient(#01b39d, #1f9881);
}
.homeBtn5 {
  text-align: -webkit-center;
  border-radius: 10px;
  /* box-shadow: 0px 0px 5px #000; */
  background: linear-gradient(#d64343, #a0262c);
}
.homeBtn6 {
  text-align: -webkit-center;
  border-radius: 10px;
  /* box-shadow: 0px 0px 5px #000; */
  background: linear-gradient(#00f3f3, #2c8a8a);
}
.homeBtn7 {
  text-align: -webkit-center;
  border-radius: 10px;
  /* box-shadow: 0px 0px 5px #000; */
  background: linear-gradient(#37a0ea, #2576bb);
}
.homeBtn8 {
  text-align: -webkit-center;
  border-radius: 10px;
  /* box-shadow: 0px 0px 5px #000; */
  background: linear-gradient(#a1ca24, #768a20);
}
.homeBtn9 {
  text-align: -webkit-center;
  border-radius: 10px;
  /* box-shadow: 0px 0px 5px #000; */
  background: linear-gradient(#a98842, #bf8c1f);
}
.homeBtn10 {
  text-align: -webkit-center;
  border-radius: 10px;
  /* box-shadow: 0px 0px 5px #000; */
  background: linear-gradient(#586970, #3a4042);
}
.homeBtn11 {
  text-align: -webkit-center;
  border-radius: 10px;
  /* box-shadow: 0px 0px 5px #000; */
  background: linear-gradient(#37a0ea, #2576bb);
}
.homeBtn12 {
  text-align: -webkit-center;
  border-radius: 10px;
  /* box-shadow: 0px 0px 5px #000; */
  background: linear-gradient(#a1ca24, #768a20);
}
.homeBtn13 {
  text-align: -webkit-center;
  border-radius: 10px;
  /* box-shadow: 0px 0px 5px #000; */
  background: linear-gradient(#a98842, #bf8c1f);
}
.homeBtn14 {
  text-align: -webkit-center;
  border-radius: 10px;
  /* box-shadow: 0px 0px 5px #000; */
  background: linear-gradient(#586970, #3a4042);
}
.homeBtn15 {
  text-align: -webkit-center;
  border-radius: 10px;
  /* box-shadow: 0px 0px 5px #000; */
  background: linear-gradient(#a1ca24, #768a20);
}
.homeBtn16 {
  text-align: -webkit-center;
  border-radius: 10px;
  /* box-shadow: 0px 0px 5px #000; */
  background: linear-gradient(#a98842, #bf8c1f);
}
.homeBtn17 {
  text-align: -webkit-center;
  border-radius: 10px;
  /* box-shadow: 0px 0px 5px #000; */
  background: linear-gradient(#586970, #3a4042);
}


.homeBtn000 {
text-align: -webkit-center;
border-radius: 10px;
/* box-shadow: 0px 0px 5px #000; */
background: linear-gradient(#0292bf, #25728c);
}
.homeBtn00 {
text-align: -webkit-center;
border-radius: 10px;
/* box-shadow: 0px 0px 5px #000; */
background: linear-gradient(#37a0ea, #2576bb);
}
.fa-3x {
  color: #fff;
  text-shadow: 5px 5px 10px #000;
}

/* Fade in css */
.wrapper {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 100%;
  padding: 20px;
}

    input[type=select] {
  background-color: #f6f6f6;
  border: none;
  color: #0d0d0d;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 5px;
  width: 85%;
  border: 2px solid #f6f6f6;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
}

input[type=select]:focus {
  background-color: #fff;
  border-bottom: 2px solid #5fbae9;
}

input[type=select]:placeholder {
  color: #cccccc;
}

/* ANIMATIONS */

/* Simple CSS3 Fade-in-down Animation */
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

/* Simple CSS3 Fade-in Animation */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-moz-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  opacity: 0;
  -webkit-animation: fadeIn ease-in 1;
  -moz-animation: fadeIn ease-in 1;
  animation: fadeIn ease-in 1;

  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;

  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  animation-duration: 1s;
}

.fadeIn.first {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.fadeIn.second {
  -webkit-animation-delay: 0.6s;
  -moz-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.fadeIn.third {
  -webkit-animation-delay: 0.8s;
  -moz-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

.fadeIn.fourth {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}

.fadeIn.fifth {
  -webkit-animation-delay: 1.2s;
  -moz-animation-delay: 1.2s;
  animation-delay: 1.2s;
}

.fadeIn.sixth {
  -webkit-animation-delay: 1.4s;
  -moz-animation-delay: 1.4s;
  animation-delay: 1.4s;
}

.fadeIn.seventh {
  -webkit-animation-delay: 1.6s;
  -moz-animation-delay: 1.6s;
  animation-delay: 1.6s;
}

.fadeIn.eighth {
  -webkit-animation-delay: 1.8s;
  -moz-animation-delay: 1.8s;
  animation-delay: 1.8s;
}

/* Simple CSS3 Fade-in Animation */
.underlineHover:after {
  display: block;
  left: 0;
  bottom: -10px;
  width: 0;
  height: 2px;
  background-color: #56baed;
  background: radial-gradient(#4594b7, #0e435a);
  content: "";
  transition: width 0.2s;
}

.underlineHover:hover {
  color: #0d0d0d;
}

.underlineHover:hover:after {
  width: 100%;
}

/* OTHERS */

*:focus {
  outline: none;
}

#icon {
  width: 30%;
}

* {
  box-sizing: border-box;
}