:root {

    --white: #ffffff;
    --greyLight: #efefef;
    --grey: #cccccc;
    --greyDark: #a9a9a9;
    --black: #000000;
}

.sclc-tabs {

    display: flex;
}

.sclc-tab {

    border-bottom:1px solid var(--greyDark);
    color:var(--greyDark);
    padding:3px 16px;
    font-size: 1.3em;
    cursor: pointer;
}

.sclc-tab-active {

    border-bottom:1px solid var(--black);
    color:var(--black);
}

.sclc-form {

    background-color: var(--greyLight);
    flex-wrap: wrap;
    box-sizing: border-box;
    position: relative;
    display: none;
}

@media (min-width:480px) {

    .sclc-form {
        padding:0 30px 10px;
    }
}

@media (max-width:479px) {

    .sclc-form {
        padding:0 10px 10px;
    }
}

.sclc-form-active {

    display: flex;
}

.sclc-form .sclc-row {

    display: flex;
    margin-bottom:20px;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top:30px;
}

.sclc-form .sclc-row .sclc-labels,
.sclc-form .sclc-row .sclc-wartosci {

   width: 50%;
}

.sclc-form .sclc-row .sclc-wartosci {

   text-align: right;
}

.sclc-form .sclc-row .sclc-input {

    width: 100%;
} 

.sclc-form .sclc-row .sclc-input input {

    width: 100%;
    outline: none;
    margin: 0;
    height: 8px;
}

.sclc-form .sclc-row .sclc-suffix {

    margin-left:1px;
}

.sclc-form .sclc-skala-wartosci {

    width:100%;
}

.sclc-form .sclc-skala-wartosci ul {

    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    width: 100%;
    justify-content: space-between;
    position: relative;
}

@media (min-width:480px) {

    .sclc-form .sclc-skala-wartosci ul {
        margin-left:10px;
        padding-right: 12px;
    }
}

@media (max-width:479px) {

    .sclc-form .sclc-skala-wartosci ul {
        text-align: center;
        font-size: 13px;
    }
}

.sclc-form .sclc-skala-wartosci ul li {

    top:0;
}
  
input[type="range"] {

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
}

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

    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: #222;
}

input[type="range"]::-moz-range-track {

    -moz-appearance: none;
    appearance: none;
    height: 4px;
    background: #222;
}

input[type="range"]::-ms-track {

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 4px;
    background: #222;
}

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

    -webkit-appearance: none;
    appearance: none;
    border: 2px solid #f8b195;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    position: relative;
    bottom: 8px;
    background: #222;
    background-size: 50%;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.4);
    cursor: grab;
}


input[type="range"]::-moz-range-thumb {

    -moz-appearance: none;
    appearance: none;
    border: 2px solid #f8b195;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    position: relative;
    bottom: 8px;
    background: #222;
    background-size: 50%;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.4);
    cursor: grab;
}

input[type="range"]::-ms-thumb {

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 2px solid #f8b195;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    position: relative;
    bottom: 8px;
    background: #222;
    background-size: 50%;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.4);
    cursor: grab;
}