/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

a {
    text-decoration: none !important;
}
::-webkit-scrollbar {
    width: 5px;
}
/* Track */
::-webkit-scrollbar-track {
    border-radius: 5px;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

@font-face {
  font-family: myFont;
  src: url('../font/GaramondPremrPro.otf');
}

.hidden {
    display: none;
}
.block {
    display: block;
}
.inblock {
    display: inline-block;
}
.w100 {
    width: 100%;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin: 0px;
}
.left {
    float: left;
}
.right {
    float: right;
}

.relative {
    position: relative;
}
.margin-top-10px {
    margin-top: 10px;
}
.margin-top-20px {
    margin-top: 20px;
}
.margin-top-30px {
    margin-top: 30px;
}
.margin-bottom-10px {
    margin-bottom: 10px;
}
.margin-bottom-20px {
    margin-bottom: 20px;
}
.margin-bottom-30px {
    margin-bottom: 30px;
}
.margin-left-10px {
    margin-left: 10px;
}
.margin-left-20px {
    margin-left: 20px;
}
.margin-left-30px {
    margin-left: 30px;
}
.margin-right-10px {
    margin-right: 10px;
}
.margin-right-20px {
    margin-right: 20px;
}
.margin-right-30px {
    margin-right: 30px;
}
.margin-lr-5px {
    margin: 0 5px;
}
.margin-all-10px {
    margin: 10px;
}
.margin-all-20px {
    margin: 20px;
}
.margin-all-30px {
    margin: 30px;
}
.container--page {
    overflow-x: hidden;
    width: 100vw;
    background: #0c1728;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.container--body {
    min-height: 100vh;
    display: block;
    position: relative;
    width: 100%;
}
#t-question {
    float: left;
    margin: 10px 10px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 1px 15px 0px;
    width: calc(33.33% - 20px);
}
#t-question > tbody td {
    padding: 5px 20px;
}
#t-question > thead th {
    text-align: center;
    padding: 10px 10px;
}
#t-question > thead tr {
    background: #cad6ff;
    border-bottom: 1px solid #cecece;
}
#t-answer {
    margin: 20px 10px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 1px 15px 0px;
    width: calc(100% - 20px);
}
#t-answer > tbody td {
    padding: 5px 20px;
}
#t-answer > thead th {
    text-align: center;
    padding: 10px 10px;
}
#t-answer > thead tr {
    background: #ff9a9a;
    color: #fff;
    border-bottom: 1px solid #cecece;
}
.title td {
    background: #cad6ff;
    text-align: center;
    padding: 10px 10px;
}
.container-question {
    width: 500px;
    overflow: hidden;
}
.box-question {
    width: 100%;
    margin: 0px 10px;
    border: 2px solid #ececec;
    border-radius: 10px;
}
.box-question-title {
    background: #91bdff;
    padding: 10px 10px;
}
.box-question-title span {
    color: #f00;
    font-weight: bold;
}
.box-question-answer {
    padding: 10px 10px;
    padding-bottom: 10px;
}
.form-check {
    padding-top: 5px;
    padding-bottom: 5px;
}
.question-action {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
}

.bton {
  position: relative;
  width: 150px;
  height: 50px;
  border-radius: 5px;
  border: none;
  transition: all 0.5s ease-in-out;
  font-size: 20px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: 600;
  display: flex;
  align-items: center;
  background: #040f16;
  color: #f5f5f5;
}

.bton:hover {
  box-shadow: 0 0 20px 0px #2e2e2e3a;
}

.bton .icon {
  position: absolute;
  height: 40px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.5s;
}
.action-next .bton .icon {
  right: 0px;
}

.bton .text {
  transform: translateX(35px);
}

.bton:hover .icon {
  width: 140px;
}

.bton:hover .text {
  transition: all 0.5s;
  opacity: 0;
}

.bton:focus {
  outline: none;
}

.bton:active .icon {
  transform: scale(0.85);
}

.container-box-question {
    width: calc(300% + 60px);
    transition: all ease 0.5s;
    overflow: hidden;
    display: flex;
    margin-left: -10px;
}
.container-box-question.next-1 {
    margin-left: calc(-100% - 30px);
}
.container-box-question.next-2 {
    margin-left: calc(-200% - 50px);
}







.login-form {
    background: #252944;
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: 0 8px 36px rgba(2, 6, 23, 0.7);
    width: 100%;
    border-radius: 10px;
}

.form-control::placeholder {
    color: #888;
    opacity: 1;
}
.container--menu-action-box:hover {
    background: #ff000059;
}
.container--menu-action-box.active {
    background: #ff000059;
}
.box-sub-menu:hover > ul {
    display: block !important;
}

.container--body > div:nth-of-type(3) {
    margin-top: 70px !important;
}

.select2-container .select2-selection--single {
    height: 37px !important;
    padding: 0px 0px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 37px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 37px !important;
}