.magicsearch-container
{
    display: flex;
    justify-content: left;
}

.magicsearch-dropdown
{
    position: relative;

    margin-right: 4px;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 12px;
    padding-right: 12px;
    
    min-width: 110px;

    color: #ffffff;
    background-color: #197563;

    font-size: 14px;
    
    -webkit-appearance: none;
    background-image: url(/public/image/dropdown_white.svg);
    background-position: right 12px top 50%;
    background-repeat: no-repeat;
    background-size: 12px 12px;

    border-radius: 8px;
    border-color: #197563;
    border-style: solid;
    border-width: 1px;
}

.magicsearch-dropdown:hover
{
    cursor: pointer;

    border-color: #ffffff;
}

.magicsearch-dropdown:disabled
{
    cursor: default;

    color: #b5b5b5;
    background-color: #696969;

    background-image: url(/public/image/dropdown_gray.svg);

    border-color: #696969;
}

.magicsearch-input
{
    position: relative;

    margin-right: 4px;
    padding: 3px;

    background-color: #197563;
    
    border-radius: 8px;
}

.magicsearch-input:focus-within
{
    background-color: #4158D0;
    background-image: linear-gradient(90deg, #fad78e, #f1315a, #56a9cc);
    filter: brightness(120%);
}

.magicsearch-input-animation
{
    background-image: linear-gradient(var(--a), #fad78e, #f1315a, #56a9cc);
    
    animation: magicsearch-animation 3s linear infinite;
}

.magicsearch-input-animation:before
{
    z-index: -1;
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    background-image: linear-gradient(var(--a), #fad78e, #f1315a, #56a9cc);
	filter: blur(10px);
	width: 100%;
	height: 100%;
	opacity: 0.9;

    animation: magicsearch-animation 3s linear infinite;
}

@property --a {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@keyframes magicsearch-animation {
	0% {
		--a: 90deg;
	}
	100% {
		--a: 450deg;
	}
}

.magicsearch
{
    width: 300px;
    height: 35px;
    padding: .375rem .75rem;
    
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;

    color: #ffffff;
    background-color: #197563;

    border-style: none;

    border-radius: 6px;
}

.magicsearch::placeholder
{
    color: #9a9a9a;
}

.magicsearch:focus
{
    background-color: #1b1b1b;

    outline: none;
}

.magicsearch-background
{
    background-color: #1b1b1b;
}

.magicsearch-clearinput
{
    display: none;
    position: absolute;
    
    top: 2px;
    right: 3px;
    
    width: 38px;
    height: 38px;

    background-image: url('/public/image/mark_cross_white.svg');
    background-size: 12px 12px;
    background-position: center;
    background-repeat: no-repeat;
}

.magicsearch-clearinput:hover
{
    cursor: pointer;
}

.magicsearch-clearinput-visible
{
    display: block;
}

.magicsearch-button
{
    display: flex;
    justify-content: center;
    align-items: center;
    
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 12px;
    padding-right: 12px;

    min-width: 58px;

    color: #ffffff;
    background-color: #197563;

    font-size: 14px;
    
    border-radius: 8px;
    border-color: #197563;
    border-style: solid;
    border-width: 1px;
}

.magicsearch-button:hover
{
    cursor: pointer;

    border-color: #ffffff;
}

.magicsearch-button:disabled
{
    cursor: default;
    
    color: #b5b5b5;
    background-color: #696969;

    border-color: #696969;
}