@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

:root {
    --primary: none;
    --secondary: rgba(0, 0, 0, .85);
    --gradientRight: rgba(76, 23, 70, .3);
    --gradientleft: rgba(0, 0, 0, .8);
    --background: rgba(0, 0, 0, .85);
    --hovercolor: rgba(66, 73, 114, 0.6);
    --searchbuttoncolor: rgba(66, 73, 114, 0.6);
    --searchbuttonhover: rgba(51, 56, 88, 0.6);
    --searchbuttontext: rgba(110, 112, 129, 0.6);
    --detailfontcolor: #d1d1d1;
    --borderColor: none;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: all .2s linear;
    font-family: 'Nunito', sans-serif;
}


body {
    background: var(--background);
    padding-top: 30px;
}

.collapsible {
    background: var(--primary);
    /*background: -webkit-linear-gradient(to right, var(--gradientleft), var(--gradientRight));
    background: linear-gradient(to right, var(--gradientleft), var(--gradientRight));*/
    color: white;
    cursor: pointer;
    padding: 18px 5%;
    width: 100%;
    text-align: left;
    vertical-align: 'middle';
    outline: none;
    font-size: 20px;
    display: flex;
    align-items: center;
    border: none;
    border-bottom: 2px solid var(--borderColor);
    gap: 20px;
    box-shadow: 0px 3px 19px -9px #888888;

}

.colapText {
    margin-top: 10px;
    font-weight: 600;
    font-size: 20px;
}

option:hover {
    box-shadow: 0 0 10px 100px #1882A8 inset;
    cursor: pointer;
}

.active,
.collapsible:hover {
    background: var(--hovercolor);
    transition: all .0s linear;
}

.content {
    padding: 0px 5%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.1s ease-out;
    background-color: var(--secondary);
}

.content p {
    color: var(--detailfontcolor);
    font-size: 18px;
    margin: 10px 0px;
}

.hiddenElm {
    display: none;
}

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

.SearchButton {
    width: 100%;
    text-align: center;
    vertical-align: middle;
    font-size: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin: 5px 0 5px 0;
    background-color: var(--searchbuttoncolor);
}

.SearchText {
    width: 90%;
    padding: 12px 20px;
    margin: 10px auto;
    box-sizing: border-box;
    display: block;
    height: 50px;
    color: var(--searchbuttontext);
    padding: 0.2em 50px;
    border: none;
    border-radius: 3px;
    box-shadow: 0px 1px 1px rgb(0 0 0 / 20%);
    outline: none;
    font-size: 18px;
}

.SearchText:focus,
.SearchCats:focus {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.SearchCats {
    width: 90%;
    padding: 12px 20px;
    display: block;
    margin: auto;
    height: 50px;
    color: #757575;
    padding: 0.2em 50px;
    border: none;
    border-radius: 3px;
    box-shadow: 0px 1px 1px rgb(0 0 0 / 20%);
    outline: none;
    font-size: 18px;

}

.SearchCats option {
    background: rgba(0, 0, 0, .8);
    border-top: 1px solid white;
    z-index: 1;
    overflow: hidden;
    white-space: nowrap;
    color: white;
}


/* 
.SearchCats:focus>option:checked {
    background: #A5CC82 !important;
} */

.SearchButtons .SearchButton {
    box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
    width: 49.75%;
}

.SearchButtons .SearchButton:active {
    transform: scale(0.98);
    /*box-shadow: 3px 2px 22px 1px var(--primary);*/

}

.SearchButtons .SearchButton {
    display: inline-block;
    margin-top: 10px;
    background: var(--searchbuttoncolor);
    color: #fff;
    border-radius: 25px;
    padding: 8px 30px;
    border: 2px solid var(--primary);
    cursor: pointer;
    font-size: 18px;
    height: 50px;
}

.SearchButtons .SearchButton:hover {
    background-color: var(--searchbuttonhover);
}


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


.collapsible:hover>.colapImg {
    transform: scale(1.1) !important;
}

.colapText {
    margin-top: 10px;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: var(--primary);
}


::-webkit-scrollbar-thumb:hover {
    background: #012b4e;
}

::selection {
    color: white;
    background-color: var(--primary);
}

/*Mobile specific CSS*/
@media only screen and (max-width: 768px) {

    /* For mobile phones: */
    [class*="SearchButton"] {
        width: 100%;
    }

    [class*="SearchText"] {
        width: 100%;
    }

    [class*="SearchCats"] {
        width: 100%;
    }
}