html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}


.sfcontainer {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color:#033799;
    color: white;
    overflow-x:hidden;
    overflow-y:auto;
}

h1, h2, h3, h4 {
    color:#bbd032;
}

a, a:active, a:visited {
    color: #bbd032;
    text-decoration:none;
}

.btn-primary, .btn-primary:active, .btn-primary:visited {
    background-color: #bbd032;
    border-color: #bbd032;
    color: #033799 !important;
}

.btn-outline-primary, .btn-outline-primary:visited, .btn-outline-primary:active {
    border-color: #bbd032 !important;
    color: #bbd032 !important;
}

button.d-block{
    width:100%;
}

.xgreen {
    color: #bbd032;
}
.xgreenbg {
    background-color: #bbd032;
    color:#033799;
}
.xframe {
    font-size: large;
    display: block;
    position: absolute;
    text-align: center;
    padding: 20px;
}
.xheader {
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    color: #bbd032;
    font-size:xx-large;
}
.xlist {
    top:100px;
    bottom:100px;
    left:0;
    width:15%;
    border-right:1px dotted #bbd032;
    overflow-x:hidden;
    overflow-y:auto;
}
.xbody {
    top: 100px;
    bottom: 0;
    left: 15%;
    right: 0;
}
.xfooter {
    bottom: 0;
    left: 0;
    width: 15%;
    height: 100px;
}

.xquestion {
    top: 0;
    left: 0;
    right: 50%;
    bottom: 30%;
    font-size: xx-large;
}
.xquestionfull {
    top: 0;
    left: 0;
    right: 0;
    bottom: 30%;
    font-size: xx-large;
}
.xquestioncontent {
    display: flex;
    width: 100%;
    height: 100%;
    margin: auto;
    align-items: center;
    justify-content: center;
    font-size: xx-large;
}
.ximage {
    top: 0;
    left: 50%;
    right: 0;
    bottom: 30%;
}
.xoptions {
    right: 0;
    left: 0;
    height: 30%;
    bottom: 0;
    text-align:left;
}
.xoption1 {
    top: 0;
    left: 0;
    right: 50%;
    bottom: 50%;
    text-align: left;
    font-size: xx-large;
    line-height: 40px !important;
    padding: 5px !important;
}
.xoption2 {
    top: 0;
    left: 50%;
    right: 0;
    bottom: 50%;
    text-align: left;
    font-size: xx-large;
    line-height: 40px !important;
    padding: 5px !important;
}

.xoption3 {
    top: 50%;
    left: 0;
    right: 50%;
    bottom: 0;
    text-align: left;
    font-size: xx-large;
    line-height: 40px !important;
    padding: 5px !important;
}

.xoption4 {
    top: 50%;
    left: 50%;
    right: 0;
    bottom: 0;
    text-align: left;
    font-size: xx-large;
    line-height: 40px !important;
    padding: 5px !important;
}


.xoptioncontent {
    display: flex;
    width: 100%;
    height: 100%;
    margin: auto;
    align-items: center;
    justify-content: center;
    border: 1px dotted #bbd032;
    border-radius: 10px;
    line-height: 40px;
}
.xoptioncontent > b{
    margin-right:10px;
}



/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #204fa9;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #456db7;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #bbd032;
}