.darkmodecontainer{width:40px;height:40px;box-sizing:border-box;padding:12px;background:none;border:0;display:flex;justify-content:center;align-items:center;position:relative}

.sun{width:50%;height:50%;position:absolute;pointer-events:none;opacity:0;transform:scale(.6) rotate(0deg);transition:transform .3s ease-in,opacity .2s ease-in .1s;
    background:radial-gradient(circle,rgba(0,0,0,0),rgba(0,0,0,0) 50%,#f0f0f0 50%)}

.sun:before{content:"";position:absolute;display:block;width:100%;height:100%;background:radial-gradient(circle,#f0f0f0 30%,rgba(0,0,0,0) 31%,rgba(0,0,0,0) 50%,#f0f0f0 50%);
    transform:rotate(45deg)}
    
.sun.visible{pointer-events:auto;opacity:1;transform:scale(1) rotate(180deg);transition:transform .3s ease-in,opacity .2s ease-in .1s}
    
.moon{width:50%;height:50%;pointer-events:none;position:absolute;left:12.5%;top:18.75%;background-color:rgba(0,0,0,0);
    border-radius:50%;box-shadow:9px 3px 0 0 #f0f0f0;opacity:0;transform:scale(.3) rotate(65deg);transition:transform .3s ease-in,opacity .2s ease-in .1s}
    
.moon.visible{pointer-events:auto;opacity:1;transform:scale(1) rotate(0deg);transition:transform .3s ease-in,opacity .2s ease-in .1s}

.star{position:absolute;top:25%;left:5%;display:block;width:0;height:0;border-right:7px solid rgba(0,0,0,0);border-bottom:5px solid #f0f0f0;border-left:7px solid rgba(0,0,0,0);
    transform:scale(.55) rotate(35deg);opacity:0;transition:all .2s ease-in .4s}
    
.star:before{border-bottom:5px solid #f0f0f0;border-left:3px solid rgba(0,0,0,0);border-right:3px solid rgba(0,0,0,0);
    position:absolute;height:0;width:0;top:-3px;left:-5px;display:block;content:"";transform:rotate(-35deg)}
    
.star:after{position:absolute;display:block;color:#f00;top:0;left:-7px;width:0;height:0;border-right:7px solid rgba(0,0,0,0);border-bottom:5px solid #f0f0f0;
    border-left:7px solid rgba(0,0,0,0);transform:rotate(-70deg);content:""}

.moon.visible .star{opacity:.8}.star.small{transform:scale(.35) rotate(35deg);position:relative;top:50%;left:37.5%;opacity:0;transition:all .2s ease-in .45s}

.moon.visible .star.small{opacity:.7;transform:scale(.45) rotate(35deg)}.ui-autocomplete-loading{background:#fff url("/images/ui-anim_basic_16x16.gif") right center no-repeat}

.ui-widget{font-family:Verdana,Tahoma,Arial,Helvetica;font-size:100%;line-height:18px}.autocomplete{float:left;padding-right:10px}