.aa-panel {
    position: fixed;
    background: transparent;
    z-index: 999999;
    border-radius: 8px 0 0 8px;
    font-family: Arial, sans-serif;
    width: 70px;
    padding: 5px;

}
div#aa-controls button {
    display: block;
    width: 100%;
    float: left;
}
.aa-wrap button:hover{
    background: transparent !important;
}

.aa-wrap div#aa-panel-main {
    position: fixed;
    width: 310px;
    background: #ffffff !important;
    /*border: 1px solid #ddd;*/
    z-index: 999999;
    border-radius: 8px ;
    font-family: Arial, sans-serif;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.aa-toggle {
    background: transparent;
    color: #fff;
    border: none;
    padding: 0;
    border-radius: 4px;
    cursor: pointer;
}
body .aa-wrap div#aa-panel, div#aa-panel-main div#aa-controls, body .aa-wrap {
    background: transparent !important;
}
.aa-header-lt {
    display: inline-block;
    float: left;
}
.aa-header-lt h3 {
    font-size: 18px !important;
    margin: 0;
    padding: 8px 10px;
    line-height: 1.4em !important;
}
.aa-header-rt {
    display: inline-block;
    float: right;
}
.aa-header-rt button {
    padding: 0 10px;
    margin: 0;
}
#aa-panel-main{
    display: none;
}
div#aa-panel-main .aa-header {
    background: var(--aa-primary-color) !important;
    color: #fff;
    width: 100%;
    float: left;
    display: block;
    padding: 8px 5px 5px;
    vertical-align: middle;
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.aa-header-rt button{
    color: #fff;
}
div#aa-controls.filters button#aa-toggle {
    display: none;
}
.aa-controls label {
    margin-bottom: 8px;
    font-size: 14px;
}
#aa-panel-main div#aa-controls .aa-btn {
    margin: 2px;
    padding: 14px 10px;
    border-radius: 4px;
    font-size: 13px !important;
    width: 48%;
    letter-spacing: 0.5px;
    font-weight: 400 !important;
    letter-spacing: 0.3px !important;
    cursor: pointer;
    border: 1px solid var(--aa-primary-color);
    color: var(--aa-primary-color);
    background: #f1f1f1;
    transition: background 0.3s;
}
#aa-panel-main i {
    display: block;
    font-size: 21px;
    padding-bottom: 4px;
}
.aa-btn.active {
    background: #0073aa;
    color: #ffffff;
}
.aa-wrap #aa-panel-main h3 {
    background: transparent !important;
    font-size: 16px !important;
    color: #fff !important;
}
.aa-darkmode, div.aa-darkmode, .aa-darkmode a, .aa-darkmode p, .aa-darkmode h1, .aa-darkmode h2, .aa-darkmode h3, .aa-darkmode h4, .aa-darkmode h5, .aa-darkmode h6, .aa-darkmode span {
    color: #FFF !important;
    fill: #FFF !important;
    background-color: #181818 !important;
}
.aa-lightmode, .aa-lightmode a, .aa-lightmode p, .aa-lightmode h1, .aa-lightmode h2, .aa-lightmode h3, .aa-lightmode h4, .aa-lightmode h5, .aa-lightmode h6, .aa-lightmode span {
    color: #000 !important;
    fill: #000 !important;
    background-color: #FFF !important;
}
.aa-highlight-link {
    outline: 2px solid #ffff26 !important;
    outline-offset: 2px !important;
}
div#aa-controls button#aa-toggle {
    background: transparent;
}
div#aa-controls button#aa-toggle:hover {
    transform: rotate(20deg);
}
div#aa-controls button#aa-toggle:hover {
    transform: scale(1.05);
}
div#aa-controls {
    width: 100%;
    float: left;
    padding: 10px;
    display: table;
}
.aa-highlight-title {
    /*background: cyan !important;*/
    outline: 2px solid #00ffff !important;
    outline-offset: 2px !important;
}
.aa-clear {
    background: transparent !important;
    font-size:18px !important; 
}
.aa-header-rt button {
    padding: 0 10px;
    margin: 0;
    line-height: normal !important;
}
button#aa-close {
    background: transparent;
    font-size: 22px !important;
} 
button#aa-toggle img{
    width: 100%;
    transform: scale(1.05);
    transition: transform .2s ease;
    background: var(--aa-primary-color);
    border-radius: 50%;
}
button#aa-toggle:hover img {
    -webkit-transform: scale(0.97);
    transform: scale(0.97);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
div#aa-controls label {
    width: 48%;
    float: left;
    margin: 2px;
    font-weight: 400 !important;
    text-align: center;
    padding: 5% 3%;
    border: 1px solid var(--aa-primary-color);
    border-radius: 5px;
    color: var(--aa-primary-color);
}
/*Progress bar color*/
input[type=range] {
  margin: auto;
  outline: none;
  padding: 0;
  width: 100%;
  height: 4px;
  background-color: #c4c4c4;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, var(--aa-primary-color)), color-stop(100%, var(--aa-primary-color)));
  background-image: -webkit-linear-gradient(var(--aa-primary-color), var(--aa-primary-color));
  background-image: -moz-linear-gradient(var(--aa-primary-color), var(--aa-primary-color));
  background-image: -o-linear-gradient(var(--aa-primary-color), var(--aa-primary-color));
  background-image: linear-gradient(var(--aa-primary-color), var(--aa-primary-color));
  background-size: 50% 100%;
  background-repeat: no-repeat;
  border-radius: 10px;
  cursor: pointer;
  -webkit-appearance: none;
  /* track */

  /* thumb */ }
  input[type=range]::-webkit-slider-runnable-track {
    box-shadow: none;
    border: none;
    background: transparent;
    -webkit-appearance: none; }
  input[type=range]::-moz-range-track {
    box-shadow: none;
    border: none;
    background: transparent; }
  input[type=range]::-moz-focus-outer {
    border: 0; }
  input[type=range]::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    border: 0;
    background: white;
    border-radius: 100%;
    box-shadow: 0 1px 2px 0px #000;
    -webkit-appearance: none; }

  input[type=range]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 0;
    background: white;
    border-radius: 100%;
    box-shadow: 0 1px 2px 0px #000; }


/* new style */

/* 1) Hide native styling */

input[type=range] {

  -webkit-appearance: none;
  appearance: none;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, var(--aa-primary-color)), color-stop(100%, var(--aa-primary-color)));
  background-image: -webkit-linear-gradient(var(--aa-primary-color), var(--aa-primary-color));
  background-image: -moz-linear-gradient(var(--aa-primary-color), var(--aa-primary-color));
  background-image: -o-linear-gradient(var(--aa-primary-color), var(--aa-primary-color));
  background-image: linear-gradient(var(--aa-primary-color), var(--aa-primary-color));
  background-size: 50% 100%;
  background-repeat: no-repeat;
}



/* 2) Draw the custom track */

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  background: #c4c4c4;
  border-radius: 10px;
  cursor: pointer;
}



/* 3) Draw the filled-in portion */

input[type=range]::-webkit-slider-runnable-track {

  background: linear-gradient(

    to right,

    var(--aa-primary-color) 0%,

    var(--aa-primary-color) var(--aa-range-percent),

    #c4c4c4 var(--aa-range-percent),

    #c4c4c4 100%

  );

  background-size: 100% 100%;

  background-repeat: no-repeat;

}



/* 4) Style & center the thumb */

input[type=range]::-webkit-slider-thumb {

  -webkit-appearance: none;

  appearance: none;

  width: 16px;            /* larger hit area on touch */

  height: 16px;

  background: #fff;

  margin-top: -7px;

  border-radius: 100%;

  box-shadow: 0 1px 2px 0px #000;

  cursor: pointer;

}



/* 5) Remove focus outline if desired */

input[type=range]:focus {

  outline: none;

}



/* Top Right */

.aa-panel.aa-pos-center-right, .aa-wrap .aa-panel-main.aa-pos-center-right  {

  top: 50%;

  right: 4px;

  bottom: auto;

  left: auto;

}



/* Top Left */

.aa-panel.aa-pos-center-left, .aa-wrap .aa-panel-main.aa-pos-center-left  {

  top: 50%;

  left: 5px;

  bottom: auto;

  right: auto;

}



/* Bottom Right */

.aa-panel.aa-pos-bottom-right, .aa-wrap .aa-panel-main.aa-pos-bottom-right  {

  bottom: 2px;

  right: 5px;

  top: auto;

  left: auto;

}



/* Bottom Left */

.aa-panel.aa-pos-bottom-left, .aa-wrap .aa-panel-main.aa-pos-bottom-left {

  bottom: 2px;

  left: 5px;

  top: auto;

  right: auto;

}



/* Top Right */

.aa-wrap .aa-panel-main.aa-pos-center-right  {

  top: 20%;

  right: 4px;

  bottom: auto;

  left: auto;

}



/* Top Left */

.aa-wrap .aa-panel-main.aa-pos-center-left  {

  top: 20%;

  left: 5px;

  bottom: auto;

  right: auto;

}



/* Bottom Right */

.aa-wrap .aa-panel-main.aa-pos-bottom-right  {

  bottom: 8px;

  right: 5px;

  top: auto;

  left: auto;

}



/* Bottom Left */

.aa-wrap .aa-panel-main.aa-pos-bottom-left {

  bottom: 8px;

  left: 5px;

  top: auto;

  right: auto;

}





/* Ensure panel children maintain panel font-size & line-height */

.aa-panel *, div#aa-controls label, #aa-panel-main h3, div#aa-controls button{ font-size:13px !important; line-height:normal !important; letter-spacing: 0.3px !important; }

.aa-panel *, div#aa-controls label, #aa-panel-main h3, div#aa-controls button, #aa-panel-mainbutton{line-height:normal !important; }

div#aa-controls .aa-btn{background: #fff !important;}

div#aa-controls .aa-btn.active {background: var(--aa-primary-color) !important;color: #fff !important}

div#aa-controls .aa-highlight-link, div#aa-panel-main .aa-highlight-link, button#aa-toggle {outline: none !important; outline-offset: 0 !important; }

div#aa-controls .aa-highlight-title, div#aa-panel-main .aa-highlight-title{outline: none !important; outline-offset: 0 !important; }

#aa-panel-main label, #aa-panel-main h3, #aa-panel-main button {letter-spacing: normal !important;}

#aa-panel-main div#aa-controls label,  #aa-panel-main div#aa-controls button { line-height: 1.4em !important;height: 92px;}



/* Responsive issues */

@media only screen and (min-width: 990px) {

     #aa-panel-main div#aa-controls .aa-btn:hover {

        background: var(--aa-primary-color)  !important;

        color: #ffffff;

    }

    #aa-panel-main div#aa-controls .aa-btn, div#aa-controls label{

        font-size: 12px !important;

    }

}



@media only screen and (max-width: 768px) {

    .aa-panel{

        width: 62px;

    }

    div#aa-controls{

        padding: 4px;

    }

    .aa-clear {

        font-size:22px !important; 

    }

    #aa-panel-main div#aa-controls .aa-btn, div#aa-controls label{

        font-size: 12px !important;

    }

    .aa-header-rt button {

        padding: 0 8px;

    }

}

@media only screen and (max-height: 680px){

    .aa-wrap div#aa-panel-main {

        height: 437px;

        overflow-y: scroll;

    }

}

@media only screen and (max-width: 520px){

    .aa-wrap div#aa-panel-main

    {

        position: fixed;

        width: 240px;

    }

}



    

/* iOS‐only: Safari/WebKit supports -webkit-touch-callout */

.aa-ios button#aa-close {

    font-size: 30px !important;

}