@import url('https://fonts.googleapis.com/css?family=Open+Sans');

h1{
  color: #007aae;;      
  position: absolute;
  top: 10vh;    
  text-align: center;
}

h2{
  color: #007aae;;      
  position: absolute;
  top: 17vh;    
  text-align: center;
  font-size: 80%;
}

body {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    font-family: 'Open Sans', sans-serif;
}

main {
    width: auto;
    height: auto;
}

::selection {
    background: #16a085;
    color: #007aae;;
}

.search {
    font-weight: 900;
    color: #007aae;;
    font-family: 'Open Sans', sans-serif;
    width: 100px;
    height: 100px;
    border-bottom: 3px solid #007aae;;
    /* border-radius: 100px; */
    cursor: default;
    transition: .6s;
    transition-timing-function:cubic-bezier(1,-0.5,0,1.5);
    /* transition-timing-function: cubic-bezier(0.455, -0.7, 0.515, 0.955); */
    text-align: center;
    box-sizing: border-box;
    padding-left: 15px;
    outline: none;
    font-size: 32px;
    background: transparent;
}

.active {
    width: 100%;
    height: 100px;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 3px solid #007aae;;
    /* border-radius: 7px; */
    /* margin-bottom: 7px; */
    text-align: center;
    margin-bottom: 15px;
}

.close-btn:hover{
    cursor: pointer;
}

.results{
    color: #007aae;;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    overflow: auto;
    max-height: 50vh;
}

.results p{
    margin: 22px;
    font-size: 20px;
    text-decoration: none;
    /* border-bottom: 1px dashed #fff; */
    /* cursor: pointer; */
}
.loading .line-1 {
    animation: rotate 0.5s linear infinite;
}

.loading .line-2 {
    animation: rotate 0.6s linear infinite;
}

@keyframes rotate {
    0% { transform: rotate(0deg); background-color:white; }    
    100% { transform: rotate(360deg); background-color:rgb(185, 205, 146);}

    /* 0% { transform: rotate(0deg); background-color:red; }
    25% { transform: rotate(72deg); background-color:blue; }
    50% { transform: rotate(144deg); background-color:orange; }
    75% { transform: rotate(216deg); background-color:white; }
    100% { transform: rotate(360deg); background-color:green;} */
}

/* CHAT BUBBLE */
.chat-bubble {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #5e5e5e;
    color: #007aae;;
    font-size: 16px;
    padding: 10px 15px;
    border-radius: 30px 30px 0 30px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    transition: transform 0.5s cubic-bezier(1,-0.5,0,1.5);
    z-index: 9999;
    opacity: 0;
  }
  .chat-bubble.show {
    opacity: 1;
    bottom: 20px;
  }          
  .notification-text {
    display: inline-block;
    margin-right: 10px;
  }          
  .close-button {
    display: inline-block;
    cursor: pointer;
    font-size: 18px;
    margin-left: 10px;
  }          
  .close-button:hover {
    color: #ff0000;
  }     


  /* SCROLBAR */
  ::-webkit-scrollbar {
    width: 8px;
  }
  
  ::-webkit-scrollbar-track {
    /* background: black; */
    background: white;
  }
  
  ::-webkit-scrollbar-thumb {
    background: #007aae;
    border: 1px solid white;
    border-radius: 8px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: white;
  }
  

  /* PULSING EFECT */
  .blobs-container {
    display: flex;
  }
  
  .blob {
    /* background: black; */
    /* border-radius: 50%; */
    /* box-shadow: 0 0 0 0 rgb(255, 255, 255); */
    /* margin: 10px; */
    /* height: 20px; */
    /* width: 20px; */
    border-top: 0;
    border-left: 0;
    border-right: 0;
    transform: scale(1);
    animation: pulse-black 2s infinite;
  }
  
  @keyframes pulse-black {
    0% {
      transform: scale(0.95);
      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    }
    
    70% {
      transform: scale(1);
      box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
    }
    
    100% {
      transform: scale(0.95);
      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
  }


  @media only screen and (max-width: 672px){
    h1, h2{    
      font-size: 18px;
      width: 90%;
    }
    h2{
      top: 18vh;    
      font-size: 15px;
      width: 90%;
    }
    /* .search{
      border: 3px solid #007aae; !important;
    } */
    .active{
      margin-left: 10px !important;
      margin-right: 10px !important;
      width: 92% !important;
    }
    .line-1, .line-2 {
      width: 4px !important;
    }
    footer{
      display: none
    }
    .results{
      font-size:80%;
    }    
    .results p{
      font-size: 14px;
    }    
    .casto-prohlizene{
      font-size: 75%;
      bottom: 25px;
    }
  }


  /* tooltip css */
  .tooltip-text {
    visibility: hidden;
    position: absolute;
    z-index: 1;
    width: 100px;
    color: white;
    font-size: 14px;
    /* background-color: #192733; */
    border-radius: 10px;
    padding: 3px 15px 3px 15px;
  }
  
  .hover-text:hover .tooltip-text {
    visibility: visible;
  }
  
  #bottom {
    top: 12px;
    left: 0;
    width: 90%;
    color: #007aae;;
    font-size: 75%;
  }
  
  .hover-text {
    position: relative;
    /* display: inline-block; */
    /* margin: 40px; */
    font-family: Arial;
    text-align: center;
  }

  .tooltip-text img{
    filter: invert(100%);
    position: relative;
    top: 3px;
    right: 3px;
  }