.searchcontainer
{
    height:40px;
    padding: 25px 10px 20px 10px;
}

input[type=text]
{
  width: calc(100% - 15px);
  height:42px;

  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 18px;
  background-color: white;
  background-image: url("../images/searchicon.png");
  background-size: 24px 24px;
  background-position: 8px 8px;
  background-repeat: no-repeat;
  padding: 8px 18px 8px 40px;
}

input[type=text]:focus {

}

::-webkit-input-placeholder {
  color: rgb(192,192,192);
}

:-ms-input-placeholder {
  color: rgb(192,192,192);
}

::placeholder {
  color: rgb(192,192,192);
}

.resultsdivcontainer
{
     float: left;
     width: 100%;
     height: 0px;
     background-color: red;
}

.resultsdiv
{
    z-index: 1;
    position: absolute;

    background: rgb(250,250,210);

    max-width:600px;
    padding: 6px 38px 6px 40px;

    display: none;

         box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 12.5px 10px rgba(0, 0, 0, 0.06),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072),
  0 41.8px 33.4px rgba(0, 0, 0, 0.086),
  0 100px 80px rgba(0, 0, 0, 0.12)
;
}

.resultworddiv
{
    padding: 6px;
    cursor: pointer;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    color: black;
}

.resultworddiv:hover
{
    background-color: #ffdb3a;
}

.cloudcontainer
{
    width: 100%;
    height: auto;
    margin: 5px 0 100px 0;
    text-align: justify;

}

.clouddiv
{
    padding: 10px;
    background-color: #ffdb3a;
    border-radius: 5px;
    color: black;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 45px;

    white-space: nowrap;

    cursor: pointer;
}

.clouddiv:hover
{
    background-color: rgb(250,250,210);
}

@media (max-width: 960px)
{
    .searchcontainer
    {
        height: 40px;
        padding: 5px 20px 20px 20px;
    }
}