section {margin-top: 3.5rem;}

section #topTitle {text-align: center;}
section h1 {font-size: 1.4rem; font-weight: bold; line-height: 2.3rem; color: #495057}

section #question {
    margin-top: 4rem;
}

.tab .bottom {font-size: 1.2rem;}
.tab {margin-bottom: 0rem;}

#formBox {
    padding: 0.5rem 1.5rem;
    border: 1px solid #e9ecef;
    background-color: #ffffff;
    border-radius: 1rem;
    margin-top: 1.25rem;
}

section #question #box form .row > div {padding: 1rem 0;}

section #question #box form .input {
    display: flex;
    flex-direction: column;
}
section #question #box form .input label {
    font-size: 0.85rem;
    font-weight: bold;
    color: #495057;
    position: relative;
    padding-right: 1rem;
    display: flex;
    align-items: center;
}
section #question #box form .input label::after {
    content: "";
    position: absolute;
    right: 0;
    height: 0.45rem;
    width: 0.45rem;
    background-color: #dee2e6;
    background-color: #495057;
    border-radius: 3px;
}
section #question #box form .input input, section #question #box form .input textarea, section #question #box form .input input, section #question #box form .input select {
    background-color: #ffffff;
    border: 1px solid #e9ecef;
    line-height: 1.6rem;
    font-size: 0.9rem;
    padding: 1rem;
    border-radius: 1rem;
    margin-top: 0.75rem;
    color: #343a40;
    width: 100%;
}
section #question #box form .input input::placeholder, section #question #box form .input textarea::placeholder {font-size: 0.8rem;color: #adb5bd;}
section #question #box form .input input::-moz-placeholder, section #question #box form .input textarea::-moz-placeholder {font-size: 0.8rem;color: #adb5bd;}
section #question #box form .input input::-webkit-input-placeholder, section #question #box form .input textarea::-webkit-input-placeholder {font-size: 0.8rem;color: #adb5bd;}

section #question #box form .input input:focus, section #question #box form .input textarea:focus, section #question #box form .input select:focus {outline: 0;}


section #question #box form .select {position: relative; overflow: hidden; display: flex; align-items: center; margin-top: 0.75rem;}
section #question #box form .select select {margin-top: 0;}
section #question #box form .select svg {
    position: absolute;
    left: 1px;
    background-color: #ffffff;
    padding-left: 1rem;
}


section #question #box form .items .item {
    background-color: #ffffff;
    border-radius: 0.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 7rem;
    overflow: hidden;
    transition: all 0.1s;
}
section #question #box form .items {margin: -0.15rem; margin-top: 0.75rem;}
section #question #box form .items > div {padding: 0.15rem;}
section #question #box form .items .item label {color: #868e96;}
section #question #box form .items .item input {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    width: 100%;
    height: 100%;
    margin: 0;
    position: absolute;
}
section #question #box form .items .item input::before, section #question #box form .items .item input::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all 0.1s;
    border-radius: 0.35rem;
}
section #question #box form .items .item input::before {z-index: 2; background-color: #ffffff; border: 1px solid #e9ecef;}

section #question #box form .items .item input:checked::before {background-color: #e9ecef; border-color: #dee2e6;}

section #question #box form .items .item input:hover::before {background-color: #f1f3f5; border-color: #dee2e6;}


section #question #box form .items .item input::after {z-index: 4;}



section #question #box form .items .item .info {
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
section #question #box form .items .item img {
    width: 2rem;
    margin-bottom: 0.75rem;
}


section #question #box .button {padding-top: 0.25rem !important;}
section #question #box .button button {
    width: 100%;
    text-align: center;
    font-size: 0.85rem;
    border-radius: 0.75rem;
    transition: all 0.1s;
    padding: 0.9rem;
    display: inline-block;
    font-weight: 600;
    color: #343a40;
    border: 1px solid #343a40;
    background-color: #ffffff;
}
section #question #box .button:hover button {background-color: #343a40; color: #ffffff;}


.alert-not {
    margin: 1.25rem 0;
}

section #question .questions {
    display: flex;
    flex-direction: column;
    margin-top: 0.8rem;
}
section #question .questions .item {
    background-color: #ffffff;
    padding: 1.1rem 1.25rem;
    padding-bottom: 0;
    margin: 0.2rem 0;
    border: 1px solid #e9ecef;
    overflow: hidden;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.15s;
}
section #question .questions .item:hover {
    border: 1px solid #dee2e6;
    background-color: #f8f8f8;
}

section #question .questions .item .top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
section #question .questions .item .right {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 500;
    color: #343a40;
    line-height: 1.75rem;
}
section #question .questions .item .right span {
    margin: 0 0.75rem;
    color: #dee2e6;
}

section #question .questions .item .left {
    padding-right: 1rem;
    display: flex;
    align-items: center;
}


section #question .questions .item .bottom {
    margin-top: 0.5rem;
    padding-bottom: 0.55rem;
    line-height: 1.75rem;
    font-size: 0.875rem;
    transition: all 0.15s;
    color: #495057;
    visibility: hidden;
}
section #question .questions .item .bottom.show {
    visibility: visible;
}


section #question .questions .page-button {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
}
section #question .questions .page-button button {
    height: 2.65rem;
    background-color: rgba(12, 45, 87);
    font-size: 0.825rem;
    color: #ffffff;
    border-radius: 0.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.1s;
    border: 1px solid rgba(12, 45, 87);
}
section #question .questions .page-button form:first-child button {width: 2.65rem; background-color: #f4f4f4; border-color: #dee2e6;}
section #question .questions .page-button form:first-child:hover button {background-color: #f0f0f0; border-color: #ced4da;}

section #question .questions .page-button form:last-child button {padding: 0 1.25rem;}


section #question .questions .page-button span {margin: 0 0.25rem;}

.button {
    cursor: pointer;
}

.questions .item {position: relative;}
.questions .item::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}