*{
        font-family: 'Roboto'; 
    }
    
    body {
        background-color: white;
      }

    .collapsible {
    background-color: #233958;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border-width: thin;
    border-style: solid;
    border-color: #ffffff;
    text-align: left;
    vertical-align: 'middle';
    outline: none;
    font-size: 20px;
    }

    .active, .collapsible:hover {
    background-color: #555;
    }

    .content {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.1s ease-out;
    background-color: white;
    }

    .hiddenElm {
        display: none;
    }

    .SearchButtons{
        margin: 5px 0 5px 0;
        padding: 0;
        text-align: center;
        font-size: 20px;
    }

    .SearchButton {
        width: 100%;
        font-family: 'Roboto';
        text-align: center;
        vertical-align: middle;
        background-color: #233958;
        color: white;
        font-size: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
        margin: 5px 0 5px 0;
      }
    .SearchText{
        width: 49.75%;
        padding: 12px 20px;
        margin: 10px 0;
        box-sizing: border-box;
    }
    .SearchCats{
        width: 49.75%;
        padding: 12px 20px;
        font-size: 20px;
    }
    .button:SearchButton {
        box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
    }

    .colapImg{
        height:150px;
        width:200px;
    }

    @media only screen and (max-width: 768px) {
        /* For mobile phones: */
        [class*="SearchButton"] {
          width: 100%;
        }
        [class*="SearchText"] {
            width: 100%;
        }
        [class*="SearchCats"] {
            width: 100%;
        }
    }