/* Frontend-specific styles for psychological testing interface */

/* Basic layout and navigation */
.navbar-brand {
    font-weight: 600;
}

/* Test interface styles */
.btn-start {
    width: 200px;
    height: 50px;
    font-size: 20px;
}

.test-name-lbl {
    font-size: 26px;
}

.test-name-rbx {
    width: 20px;
    height: 20px;
}

.sex-lbl {
    font-size: 20px;
}

.sex-rbx {
    width: 16px;
    height: 16px;
}

.card-header {
    font-size: 21px;
}

.bnt-enter {
    width: 160px;
    height: 70px;
    font-size: 32px;
}

.start_test {
    height: 80px;
    width: 270px;
    font-size: 23px;
    line-height: 29px;
}

/* Answer buttons */
.add-btns,
.answ-btn {
    width: 120px;
    height: 80px;
    font-size: 21px;
    line-height: 20px;
}

.answ-btn.selected {
    background-color: #4b124b;
    border-color: #4b124b;
}

.answ-btn-next.selected {
    background-color: #0e8a0e;
    border-color: #0e8a0e;
}

.answ-btn-back,
.answ-btn-skip {
    font-size: 17px;
}

.test_text {
    font-size: 28px;
    line-height: 32px;
    min-height: 82px;
}

/* Form styles */
.form-group {
    min-height: 60px;
    margin-left: 20px;
}

/* Table styles for test results */
.table > tbody > tr > td,
.table > tr > td {
    vertical-align: middle;
}

.table > thead > tr > th,
.table > tr > th {
    vertical-align: middle;
}

/* Loading and preloader styles */
.preload-bar {
    background-image: url(/imgs/preload_bar.gif);
    height: 22px;
    width: 176px;
}

.preload-bar2 {
    background: url(/imgs/preload_bar.gif);
    width: 320px;
    height: 20px;
    background-repeat: no-repeat;
}

.wait-load {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 99999;
}

#loading-image {
    display: none;
    opacity: 0.8;
    background-color: #ccc;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
}

#loading-image .loading-image-img {
    position: fixed;
    top: 30%;
}

/* Responsive design for mobile devices */
@media screen and (min-width: 576px) {
    .test_text {
        font-size: 33px;
        line-height: 41px;
    }
    
    .add-btns,
    .answ-btn {
        width: 180px;
        height: 90px;
        font-size: 25px;
        line-height: 29px;
    }
    
    .answ-btn-back {
        font-size: 23px;
    }
}

/* Utility classes */
.h-divider {
    margin-top: 5px;
    margin-bottom: 5px;
    height: 1px;
    width: 100%;
    border-top: 1px solid grey;
}