/**
 * SolaShout Player
 * sub styles cascading stylesheet
 *
 * @author JMW
 * @copyright Hawke AI. All Rights reserved.
 */

/* black theme */
body.black { background-image: url("../img/backgrounds/black.jpg"); }
body.black .range-field input[type="range"]::-webkit-slider-thumb  {
    border-color: #000000 !important;
}
body.black .range-field input[type="range"]::-moz-range-thumb  {
    border-color: #000000 !important;
}
body.black .range-field input[type="range"]::-ms-thumb  {
    border-color: #000000 !important;
}
body.black .range-field input[type="range"]+.thumb {
    background-color: #000000;
}
body.black #radios ol li.selected {
    background-color: #FFF;
    color: #000;
}
body.black .btn-danger-dark {
    background-color: #000 !important;
    color: #fff;
}
body.black .btn-outline-danger-dark {
    border: 2px solid #000 !important;
    background-color: white !important;
    color: #000 !important;
}
body.black a:hover, body.black a:active {
    color: #000;
}

/* blue theme */
body.blue { background-image: url("../img/backgrounds/blue.jpg"); }
body.blue .range-field input[type="range"]::-webkit-slider-thumb  {
    border-color: #003399;
}
body.blue .range-field input[type="range"]::-moz-range-thumb  {
    border-color: #003399;
}
body.blue .range-field input[type="range"]::-ms-thumb  {
    border-color: #003399;
}
body.blue .range-field input[type="range"]+.thumb {
    border-color: #003399;
}
body.blue #radios ol li.selected {
    background-color: #003399;
}
body.blue .btn-danger-dark {
    background-color: #003399 !important;
    color: #fff;
}
body.blue .btn-outline-danger-dark {
    border: 2px solid #003399 !important;
    background-color: white !important;
    color: #000 !important;
}
body.blue a:hover, body.blue a:active {
    color: #222222;
}

/* green theme */
body.green { background-image: url("../img/backgrounds/green.jpg"); }
body.green .range-field input[type="range"]::-webkit-slider-thumb  {
    border-color: #006633 !important;
}
body.green .range-field input[type="range"]::-moz-range-thumb  {
    border-color: #006633 !important;
}
body.green .range-field input[type="range"]::-ms-thumb  {
    border-color: #006633 !important;
}
body.green .range-field input[type="range"]+.thumb {
    background-color: #006633;
}
body.green #radios ol li.selected {
    background-color: #006633;
}
body.green .btn-danger-dark {
    background-color: #006633 !important;
    color: #fff;
}
body.green .btn-outline-danger-dark {
    border: 2px solid #006633 !important;
    background-color: white !important;
    color: #000 !important;
}
body.green a:hover, body.green a:active {
    color: #006633;
}

/* red theme */
body.red { background-image: url("../img/backgrounds/red.jpg"); }
body.red .range-field input[type="range"]::-webkit-slider-thumb  {
    border-color: #CC0000 !important;
}
body.red .range-field input[type="range"]::-moz-range-thumb  {
    border-color: #CC0000 !important;
}
body.red .range-field input[type="range"]::-ms-thumb  {
    border-color: #CC0000 !important;
}
body.red .range-field input[type="range"]+.thumb {
    background-color: #CC0000;
}
body.red #radios ol li.selected {
    background-color: #CC0000;
}
body.red .btn-danger-dark {
    background-color: #CC0000 !important;
    color: #fff;
}
body.red .btn-outline-danger-dark {
    border: 2px solid #CC0000 !important;
    background-color: white !important;
    color: #000 !important;
}
body.red a:hover, body.red a:active {
    color: #CC0000;
}

/* yellow theme */
body.yellow { background-image: url("../img/backgrounds/yellow.jpg"); }
body.yellow .range-field input[type="range"]::-webkit-slider-thumb  {
    border-color: #FFCC00 !important;
}
body.yellow .range-field input[type="range"]::-moz-range-thumb  {
    border-color: #FFCC00 !important;
}
body.yellow .range-field input[type="range"]::-ms-thumb  {
    border-color: #FFCC00 !important;
}
body.yellow .range-field input[type="range"]+.thumb {
    background-color: #FFCC00;
}
body.yellow #radios ol li.selected {
    background-color: #FFCC00;
}
body.yellow .btn-danger-dark {
    background-color: #FFCC00 !important;
    color: #fff;
}
body.yellow .btn-outline-danger-dark {
    border: 2px solid #FFCC00 !important;
    background-color: white !important;
    color: #000 !important;
}
body.yellow a:hover, body.yellow a:active {
    color: #FFCC00;
}