html {
    height: 100%;
    scroll-behavior: smooth;
}

main {
    height: 100%;
}

body {
    min-height: 100%;
    position: relative;
    background: url("white_feathers.png");
}

footer {
    position: absolute;
    left: 0;
    right: 0;
}

.bs-callout {
    margin: 20px 0;
    padding: 15px 30px 15px 15px;
    border-left: 5px solid #eee;
}

.bs-callout h4 {
    margin-top: 0;
}

.bs-callout p:last-child {
    margin-bottom: 0;
}

.bs-callout code,
.bs-callout .highlight {
    background-color: #fff;
}

/* Themes for different contexts */
.bs-callout-danger {
    background-color: #fcf2f2;
    border-color: #dFb5b4;
}

.bs-callout-warning {
    background-color: #fefbed;
    border-color: #f1e7bc;
}

.bs-callout-info {
    background-color: #f0f7fd;
    border-color: #d0e3f0;
}

.slider {
    max-width: 60%;
}

.range {
    /*max-width: 80%;*/
}

.handle {
    top: 50% !important;
    margin-left: -40px !important;
    margin-top: -1.1em;
    line-height: 1.6em;
    cursor: pointer !important;
}

.f-50 {
    flex: 1;
}

.width-50 {
    min-width: 300px !important;
}

@media screen and (min-width: 992px) {
    .width-50 {
        max-width: 300px !important;
    }

    .f-auto {
        flex: auto;
    }

    #list-tab {
        top: 86px;
    }

    footer {
        bottom: -60px;
    }
}

@media screen and (max-width: 992px) {
    .margin-bottom-lg {
        margin-bottom: 20px;
    }

    .width-100 {
        width: 100%;
    }

    .white-space-normal {
        white-space: normal !important;
    }

    #list-tab {
        top: 96px;
        z-index: 1015;
    }

    footer {
        bottom: -84px;
    }
}

@media screen and (max-width: 405px) {
    footer {
        bottom: -108px;
    }
}

input[type=range]::-webkit-slider-thumb {
  /*-webkit-appearance: none;*/
  /*border: 1px solid #000000;*/
  height: 36px;
  width: 36px;
  border-radius: 20px;
  /*background: white;*/
  /*cursor: pointer;*/
  margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
  /*box-shadow: 1px 1px 1px #000000, 0 0 1px #0d0d0d; !* Add cool effects to your sliders! *!*/
}

.cursor-pointer {
    cursor: pointer
}

.min-width-56 {
    min-width: 56.4px;
}