.aa-panel {

    position: fixed;

    background: transparent;

    z-index: 999999;

    border-radius: 8px 0 0 8px;

    font-family: Arial, sans-serif;

    width: 70px;

    padding: 5px;

}

.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;

}