@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');

html, body {
    min-height:100%;
    margin:0;
}
body {
    -webkit-transition: all cubic-bezier(0.4,0.0,0.2,1) .2s;
    transition: all cubic-bezier(0.4,0.0,0.2,1) .2s;
    background: #fafafa;
    min-height: 100vh;
    position: relative;
    margin: 0;
    padding-bottom: 100px;
    color: #6c757d;
    font-family: 'Open Sans', sans-serif !important;
    font-size: 13px !important;
}

footer {
    position: absolute;
    bottom: 0px;
    background: #ffffff;
    width: 100%;
    padding:15px 0px;
    font-size: 13px;
    border-top: 1px solid #e2e2e2;
    color: #858796;
    font-weight: 400;
}

h1, h2, h3, h4, h5, .jconfirm-title {
    color: #6c757d;
}

label {
    font-size: 13px;
    margin-bottom: 3px;
}

::placeholder {
    font-size: 14px;
    color: #bdbfc3 !important;
}

.title {
    font-weight: 600;
    color: #5d0479;
}

#token {
    letter-spacing: 3px;
    color: #76787c;
}

.loading {
    background-color: rgba(0,0,0,0.2);
    position: fixed;
    height: 100%;
    min-height: 100%;
    width: 100%;
    top: 0px;
    z-index: 2147483647;
    -webkit-transition: all 5ms;
    -moz-transition: all 5ms;
    -ms-transition: all 5ms;
    -o-transition: all 5ms;
    transition: all 5ms;
}

#description-question {
    color: #9a9ca0;
}

.title-finish {
    color: #5d0479;
    font-weight: bold;
}

.color-tema-roxo {
    color: #5d0479 !important;
}

/* Buttons */

.btn-tema-roxo {
    color:#fff;
    background-color: #5d0479 !important;
    border-color: #5d0479 !important
}

.btn-tema-roxo:hover {
    color:#fff;
    background-color: #3f045b !important;
    border-color:#3f045b !important
}

.btn-tema-roxo.focus,.btn-tema-roxo:focus {
    box-shadow:0 0 0 .2rem rgba(93, 4, 121, 0.5) !important
}

.btn-tema-roxo.disabled,.btn-tema-roxo:disabled {
    color:#fff !important;
    background-color:#5d0479 !important;
    border-color:#5d0479 !important;
    pointer-events: none;
}

.btn-tema-roxo:not(:disabled):not(.disabled).active,.btn-tema-roxo:not(:disabled):not(.disabled):active,.show>.btn-tema-roxo.dropdown-toggle {
    color:#fff !important;
    background-color:#5d0479 !important;
    border-color:#5d0479 !important
}

.btn-tema-roxo:not(:disabled):not(.disabled).active:focus,.btn-tema-roxo:not(:disabled):not(.disabled):active:focus,.show>.btn-tema-roxo.dropdown-toggle:focus {
    box-shadow:0 0 0 .2rem rgba(93, 4, 121, 0.5) !important
}

.btn-outline-tema-roxo {
    color: #5d0479;
    background-color: transparent !important;
    border-color: #5d0479 !important
}

.btn-outline-tema-roxo:hover {
    color:#ffffff;
    background-color: #5d0479 !important;
    border-color: #5d0479 !important
}

.btn-outline-tema-roxo-active {
    color:#ffffff;
    background-color: #5d0479 !important;
    border-color: #5d0479 !important
}

/* SLIDER */

/* The slider itself */
.slider {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 100%; /* Full-width */
    height: 0; /* Specified height */
    background: transparent; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
    padding-top: 15px;
    padding-bottom: 15px;
}

/* Mouse-over effects */
.slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 40px; /* Set a specific slider handle width */
    height: 40px; /* Slider handle height */
    background: #5d0479; /* Green background */
    cursor: pointer; /* Cursor on hover */
    border-radius: 50%;
    margin-top: -15px;
}

.slider::-moz-range-thumb {
    width: 40px; /* Set a specific slider handle width */
    height: 40px; /* Slider handle height */
    background: #5d0479; /* Green background */
    cursor: pointer; /* Cursor on hover */
}