html, body {
    height: 100%;
}

body {
    font-family: 'Open Sans', sans-serif !important;
    color: #4D4D4D;
}

.card, .btn, .form-control {
    border-radius: 0.2em;
}

.btn-lrs-top {
    background-color: #141B54;
    border-color: #9699B0;
    border-width: 2px;
    color: #fff;
}

.btn-lrs-top:hover {
    border-color: #FFF;
    color: #fff;
}

.btn-review-edit {
     background-color: #7597FF;
     border-color: #7597FF;
     color: #fff;
}

.btn-review-edit:hover {
    background-color: #7597FF;
    border-color: #7597FF;
    color: #fff;
    filter: brightness(110%);
}

.btn-start-survey {
    background-image: linear-gradient(to top, #2D39A8 0%, #5A61A0 100%);
    background-repeat: repeat-x;
    border-color: #2D39A8;
    color: #fff;
}

.btn-start-survey:hover {
    background-image: linear-gradient(to top, #2D39A8 0%, #5A61A0 100%);
    background-repeat: repeat-x;
    border-color: #2D39A8;
    color: #fff;
    filter: brightness(110%);
}

.btn-sub-completed, .btn-login {
    background-color: #21B073;
    border-color: #21B073;
    color: #fff;
}

.btn-sub-completed:hover, .btn-login:hover {
    background-color: #21B073;
    border-color: #21B073;
    color: #fff;
    filter: brightness(110%);
}

.btn-download {
    background-color: #F2F5FF;
    border-color: #F2F5FF;
    color: #2B37A9;

    background-image: url('../images/LBR_home_PDF-download.svg');
    background-position: right center;
    background-repeat: no-repeat;
}

.btn-download:hover {
    background-color: #DDE5FF;
}

.btn-prev_section {
    background-color: #7597FF;
    border-color: #7597FF;
    color: #fff;
}

.btn-prev_section:hover {
    background-color: #7597FF;
    border-color: #7597FF;
    color: #fff;
    filter: brightness(110%);
}

.btn_next_section {
    background-color: #21B073;
    border-color: #21B073;
    color: #fff;
}

.btn_next_section:hover {
    background-color: #21B073;
    border-color: #21B073;
    color: #fff;
    filter: brightness(110%);
}

.btn_clear_row {
    background-color: #F2F5FF;
    border-color: #ccc;
    color: #4D4D4D;
    font-size: 80%;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
}

.btn_clear_row:hover {
    background-color: #7597FF;

}

#download_type {
    width: auto;
}

/*
Extra small devices (portrait phones, less than 544px)
No media query since this is the default in Bootstrap because it is "mobile first"
*/
/* Extra-small devices (portrait phones, 544px and up) (0.5)*/
@media (max-width: 576px) {
    .text-22 {font-size:1.13rem;}
    .text-16 {font-size:0.75rem;}
    .text-14 {font-size:0.66rem;}
    .text-12 {font-size:0.56rem;}

    .break-indicator:before {content: "EXTRA SMALL";}
}

/* Small devices (landscape phones, 544px and up) (0.6)*/
@media (min-width: 576px) {
    .text-22 {font-size:1.13rem;}
    .text-16 {font-size:0.75rem;}
    .text-14 {font-size:0.66rem;}
    .text-12 {font-size:0.56rem;}

    .break-indicator:before {content: "SMALL";}
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint (0.75)*/
@media (min-width: 768px) {
    .text-22 {font-size:1.13rem;}
    .text-16 {font-size:0.75rem;}
    .text-14 {font-size:0.66rem;}
    .text-12 {font-size:0.56rem;}

    .break-indicator:before {content: "MEDIUM";}
}

/* Large devices (desktops, 992px and up) (0.9) */
@media (min-width: 992px) {
    .text-22 {font-size:1.35rem;}
    .text-16 {font-size:0.9rem;}
    .text-14 {font-size:0.78rem;}
    .text-12 {font-size:0.63rem;}

    .break-indicator:before {content: "LARGE";}
}

/* Extra large devices (large desktops, 1200px and up) (1.0)*/
@media (min-width: 1200px) {
    .text-22 {font-size:1.5rem;}
    .text-16 {font-size:1rem;}
    .text-14 {font-size:0.875rem;}
    .text-12 {font-size:0.75rem;}

    .break-indicator:before {content: "EXTRA LARGE";}
}

.break-indicator {
    height: 30px;
    background-color: #000;
    color: #eee;
    text-align: center;

}

.custom-radio .custom-control-input:checked~.custom-control-label::before,
.custom-radio .custom-control-input:checked~.custom-control-label::after {
    background-color: #21B073;  /* green */
    /* this bg image SVG is just a white circle, you can replace it with any valid SVG code */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E");
    border-radius: 50%;
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::before,
.custom-checkbox .custom-control-input:checked~.custom-control-label::after {
    background-color: #21B073;  /* green */
    border-radius: 3px;
 }

.custom-radio .custom-control-input:disabled~.custom-control-label::before,
.custom-radio .custom-control-input:disabled~.custom-control-label::after,
.custom-checkbox .custom-control-input:disabled~.custom-control-label::before,
.custom-checkbox .custom-control-input:disabled~.custom-control-label::after {
    filter: grayscale(100%);
}

.custom-range::-webkit-slider-thumb {
    background: primary;
}

.form-range::-webkit-slider-thumb:active {
    background: primary;
}

.custom-range::-moz-range-thumb {
    background: primary;
}

.custom-range::-moz-range-thumb:active {
    background: primary;
}

.custom-range::-ms-thumb {
    background: primary;
}

.custom-range::-moz-range-track {
    width: 100%;
    height: 0.5rem;
    color: transparent;
    cursor: pointer;
    background-color: #ddd;
    border-color: transparent;
    border-radius: 1rem;
}

.custom-range::-webkit-slider-runnable-track {
    width: 100%;
    height: 0.5rem;
    color: transparent;
    cursor: pointer;
    background-color: #ddd;
    border-color: transparent;
    border-radius: 1rem;
}




/*
@media (min-width: 544px) {
    .text-22, .text-16, .text-14, .text-12 {color: red;}
}
*/

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint (0.7)
@media (min-width: 768px) {
    .text-22, .text-16, .text-14, .text-12 {color: yellow;}
}
*/

/* Large devices (desktops, 992px and up)
@media (min-width: 992px) {
    .text-22, .text-16, .text-14, .text-12 {color: green;}
}
*/

/* Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
    .text-22, .text-16, .text-14, .text-12 {color: blue;}
}
*/