/* Property Value helper */
    [data-charwin-helper] {
        padding: 1em;
        border: 2px dashed #95cd9a;
    }
    [data-charwin-helper] .uk-button {
        text-transform: none;
        background-color: #054478;
        color: #fff;
    }
    [data-charwin-helper] .uk-button:hover {
        background-color: #005397;
    }


    /* Property value calculator section */

   .modal--form {
    padding-top: 20px;
   }
   
   .modal--title--div {
       display: flex;
       align-items: center;
       height: 60px;
       justify-content: space-between;
   }
   
   .modal--title--div h3 {
       padding-top: 18px;
   }
   
   .getValueBtn--div {
       margin: 20px auto; 
       /*width: 210px;*/
   }
   
   .useValueBtn--div {
       margin: 0 auto;
       /*max-width: 260px;*/
   }
   
   .property--type--container {
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
   }
   
   .property--type--container div {
       width: 300px;
       text-align: center;
       margin: 2px 2px;
   }
   
   /*Property Value Results Section */
   
   #property_value_results {
       display: none;
   }
   
   #edit--btn {
       text-decoration: underline;
       font-style: italic;
       cursor: pointer;
       font-size: 0.8rem;
   }
   
   .filters--display {
       display: flex;
       justify-content: center;
       margin: 0 auto;
   }
   
   .filters--display div {
       margin: 0 3px;
       padding: 8px;
   }
   
   .filters--display div > p {
       margin: 0;
       padding: 0;
       font-size: 0.75rem;
   } 
   
   .filters--div {
       border: #666 1px solid;
       border-radius: 20px;
       text-align: center;
   }
   
   .soldPrices--description {
       line-height: 27px;
   }
   
   #slider--container {
       margin: 0 auto;
       width: 100%;
   }
   
   .info--container {
       margin: 0 auto;
       width: 100%;
       border: 2px dashed #95ca9a;
       padding: 15px;
   }
   
   #slider--minMax{
       width: 100%;
       display: flex;
       justify-content: space-between;
       font-size: 20px;
   }
   
   .property--value {
       text-align: center;
       margin: 0;
       padding: 0;
   }
   
   #property--value--submit {
       font-size: 0.9em;
      /* padding: 0; */
   }
   
   .modal-close {
       border-radius: 50%;
       border: lightgrey 1px solid;
       padding: 4px;
       color: #fff;
       background-color: lightgrey;
       cursor: pointer;
   }
   
   /* Loading classes */
   
   .loading--overlay {
       display: none;
       position: fixed;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       z-index: 999;
       overflow: auto; 
       background-color: #888 !important; 
       transition: 1s ease-in-out;
   }
   
   .loading {
       position: fixed;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       transform: -webkit-translate(-50%, -50%);
       transform: -moz-translate(-50%, -50%);
       transform: -ms-translate(-50%, -50%);
       width: 60%;
       color: #fff;
   }
   
   .loading--spinner {
       display: flex;
       justify-content: center;
       margin-bottom: 10px;
   }
   
   /* Static range slider styling */
   
   /*
   input[type='range'] {
       -webkit-appearance: none;
       background-color: #ddd;
       border-radius: 10px;
       overflow: hidden;
       width: 100%;
   }
     
   input[type='range']::-webkit-slider-runnable-track {
       -webkit-appearance: none;
       height: 30px;
       border-color: transparent;  
   }
     
   input[type='range']::-webkit-slider-thumb {
       -webkit-appearance: none;
       background: #666;
       border-radius: 50%;
       box-shadow: -210px 0 0 200px rgb(57, 122, 187);
       cursor: pointer;
       height: 35px;
       width: 35px;
       margin-top: -3px;
   }
   
   input[type=range] {
       -webkit-appearance: none; 
       width: 100%; 
       background: transparent;
       margin-top: 20px; 
   }
   
   input[type=range]:focus {
       outline: none; 
   }
   
   input[type=range]::-webkit-slider-runnable-track {
       border-color: transparent;  
       border-radius: 10px;
       height: 12px;
       background:rgb(57, 122, 187);
       cursor: pointer;
   }
   
   input[type=range]::-moz-range-track {
       border-color: transparent;  
       border-radius: 10px;
       height: 12px;
       background:rgb(57, 122, 187);
       cursor: pointer;
   }
   
   input[type=range]::-ms-track {
       width: 100%;
       cursor: pointer;
       height: 12px;
   
       background: transparent; 
       border-color: transparent;
       color: transparent;
   }
   
   input[type=range]::-moz-progress {
       background-color: #ddd;
       height: 12px;
   }
   
   input[type=range]::-ms-fill-lower {
       background: rgb(24, 107, 190);
       border-radius: 10px;
   }
   
   input[type=range]::-ms-fill-upper {
       background: #ddd;
       border-radius: 10px;
   }
   
   input[type=range]::-webkit-slider-thumb {
       -webkit-appearance: none;
       height: 35px;
       width: 35px;
       border-radius: 50%;
       background: rgb(57, 122, 187);
       cursor: pointer;
       margin-top: -11px;
   }
   
   input[type=range]::-moz-range-thumb {
       -webkit-appearance: none;
       height: 35px;
       width: 35px;
       border: rgb(57, 122, 187) 1px solid;
       border-radius: 50%;
       background: rgb(57, 122, 187);
       cursor: pointer;
       margin-top: -11px;
   }
   
   input[type=range]::-ms-thumb {
       -webkit-appearance: none;
       height: 35px;
       width: 35px;
       border: rgb(57, 122, 187) 1px solid;
       border-radius: 50%;
       background: rgb(57, 122, 187);
       cursor: pointer;
       margin-top: -11px;
   }
   */
   
   /* New Slider - Using JS*/
   
   input[type=range].styled-slider {
       height: 12px;
       -webkit-appearance: none;
       width: 100%;
       margin-top: 20px;
     }
     
     /*progress support*/
     input[type=range].styled-slider.slider-progress {
       --range: calc(var(--max) - var(--min));
       --ratio: calc((var(--value) - var(--min)) / var(--range));
       --sx: calc(0.5 * 35px + var(--ratio) * (100% - 35px));
     }
     
     input[type=range].styled-slider:focus {
       outline: none;
     }
     
     /*webkit*/
     input[type=range].styled-slider::-webkit-slider-thumb {
       -webkit-appearance: none;
       width: 35px;
       height: 35px;
       border-radius: 10em;
       background: linear-gradient(to right, #2F98F9, #3472b1);
       border: 1px solid #606060;
       box-shadow: none;
       margin-top: calc(max((12px - 1px - 1px) * 0.5,0px) - max(35px * 0.5,1px));
     }
     
     input[type=range].styled-slider::-webkit-slider-runnable-track {
       height: 12px;
       border: 1px solid #606060;
       border-radius: 0.5em;
       background: linear-gradient(to right, #E5E5E5, #CCCCCC);
       box-shadow: none;
     }
     
     input[type=range].styled-slider::-webkit-slider-thumb:hover {
       background: #3F8BD6;
     }
     
     input[type=range].styled-slider::-webkit-slider-thumb:active {
       background: linear-gradient(to right, #2F98F9, #3F8BD6);
     }
     
     input[type=range].styled-slider.slider-progress::-webkit-slider-runnable-track {
       background: linear-gradient(to right, #2F98F9, #3472b1) 0/var(--sx) 100% no-repeat, linear-gradient(to right, #E5E5E5, #CCCCCC);
     }
     
     /*mozilla*/
     input[type=range].styled-slider::-moz-range-thumb {
       width: max(calc(35px - 1px - 1px),0px);
       height: max(calc(35px - 1px - 1px),0px);
       border-radius: 10em;
       background: linear-gradient(to right, #2F98F9, #3472b1);
       border: 1px solid #606060;
       box-shadow: none;
     }
     
     input[type=range].styled-slider::-moz-range-track {
       height: max(calc(12px - 1px - 1px),0px);
       border: 1px solid #606060;
       border-radius: 0.5em;
       background: linear-gradient(to right, #E5E5E5, #CCCCCC);
       box-shadow: none;
     }
     
     input[type=range].styled-slider::-moz-range-thumb:hover {
       background: #3F8BD6;
     }
     
     input[type=range].styled-slider::-moz-range-thumb:active {
       background: linear-gradient(to right, #2F98F9, #3F8BD6);
     }
     
     input[type=range].styled-slider.slider-progress::-moz-range-track {
       background: linear-gradient(to right, #2F98F9, #3472b1) 0/var(--sx) 100% no-repeat, linear-gradient(to right, #E5E5E5, #CCCCCC);
     }
     
     /*ms*/
     input[type=range].styled-slider::-ms-fill-upper {
       background: transparent;
       border-color: transparent;
     }
     
     input[type=range].styled-slider::-ms-fill-lower {
       background: transparent;
       border-color: transparent;
     }
     
     input[type=range].styled-slider::-ms-thumb {
       width: 35px;
       height: 35px;
       border-radius: 10em;
       background: linear-gradient(to right, #2F98F9, #3472b1);
       border: 1px solid #606060;
       box-shadow: none;
       margin-top: 0;
       box-sizing: border-box;
     }
     
     input[type=range].styled-slider::-ms-track {
       height: 12px;
       border-radius: 0.5em;
       background: linear-gradient(to right, #E5E5E5, #CCCCCC);
       border: 1px solid #606060;
       box-shadow: none;
       box-sizing: border-box;
     }
     
     input[type=range].styled-slider::-ms-thumb:hover {
       background: #3F8BD6;
     }
     
     input[type=range].styled-slider::-ms-thumb:active {
       background: linear-gradient(to right, #2F98F9, #3F8BD6);
     }
     
     input[type=range].styled-slider.slider-progress::-ms-fill-lower {
       height: max(calc(12px - 1px - 1px),0px);
       border-radius: 0.5em 0 0 0.5em;
       margin: -1px 0 -1px -1px;
       background: linear-gradient(to right, #2F98F9, #3472b1);
       border: 1px solid #606060;
       border-right-width: 0;
     }
     
   /* Media queries */
   
   @media only screen and (min-width: 768px) {
       .property--type--container {
           flex-wrap: nowrap;
       }
       .results--section {
           padding: 0 30px;
       }
     }
   
   @media only screen and (min-width: 425px) {
       .filters--display div{
           margin: 0 5px;
       }
       .filters--display div > p {
           font-size: 1rem;
       }
       #edit--btn {
           font-size: 1rem;
       }
       .results--section {
           padding: 0 15px;
       }
       #property--value--submit {
           font-size: 1.3em !important;
       }
     }
   
   @media only screen and (min-width: 375px) {
       #property--value--submit {
           font-size: 1.1em;
       }
   }