.search-widget { display:flex; flex-direction: column; height:auto; background: rgba(41, 47, 137, 0.1); border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; }
.search-widget .search-input { width:calc(100% - 4px); height:40px; background-color:var(--color-white); margin:2px 0 10px 2px; padding-left:40px; position:relative; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; }
.search-widget .search-input:before { content:''; width:24px; height:24px; position:absolute; top:50%; left:10px; transform:translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%);
    background-image: url("data:image/svg+xml;utf8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><g opacity='0.4'><path d='M11.5 21C16.7467 21 21 16.7467 21 11.5C21 6.25329 16.7467 2 11.5 2C6.25329 2 2 6.25329 2 11.5C2 16.7467 6.25329 21 11.5 21Z' stroke='%23062849' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M22 22L20 20' stroke='%23062849' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></g></svg>");
    background-repeat: no-repeat;
    background-position: center center;}
    .search-widget .search-input input { width:100%; height:100%; padding-right:15px; font-size:12px; color: var(--color-primary);}
    .search-widget .search-input input::-webkit-input-placeholder { color: rgba(6, 40, 73, .4); }
    .search-widget .search-input input::-moz-placeholder { color: rgba(6, 40, 73, .4); }
    .search-widget .search-input input::placeholder { color: rgba(6, 40, 73, .4); }
    .search-widget .search-input input::-ms-input-placeholder { color: rgba(6, 40, 73, .4); }

.search-alphabet { flex-grow:1; display:flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; padding:0 10px; margin-bottom:10px;}
.search-alphabet a { width:22px; height:22px; display:flex; align-items: center; justify-content: center; font-size:12px; font-weight:bold; color: var(--color-primary); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; }
.search-alphabet a:hover { background-color: var(--color-white); }
.search-alphabet a.active { background-color: var(--color-blue); color: var(--color-white); }



@media (min-width:767px) {
    .search-widget { height:40px; flex-direction: row; }
    .search-widget .search-input { width:315px; height:calc(100% - 4px); margin-bottom:0;}
    .search-alphabet { flex-wrap:inherit; margin-bottom:0; justify-content: space-between;}
    .search-alphabet a { width:18px; height:18px; }

    .search-widget.type-02 {flex-direction: column; height:auto; }
    .search-widget.type-02 .search-input { width:calc(100% - 4px); height:40px; }
    .search-widget.type-02 .search-alphabet { flex-wrap:wrap; justify-content: flex-start; padding:10px;}
}