xhtml,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
:root {
--white: #ffffff;
--light: #f0eff3;
--black: #000000;
--dark-blue: #1f2029;
--dark-light: #353746;
--red: #da2c4d;
--yellow: #f8ab37;
--grey: #ecedf3;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
.small {
font-size: 0.8rem;
}
.formList {
padding: 0;
margin: 0;
}
.questionHeader{
display: flex;
color: #fff;
width: 80%;
align-items: center;
margin: 0px auto;
padding: 20px 0px;
position: relative;
}
.courseprogressText{
text-align: right;
}
.courseprogress {
--progress: 0%;
min-width: 300px;
height: 8px;
border-radius: 6px;
overflow: hidden;
background-color: #fff;
padding: 0px 0px;
margin-bottom: 6px;
}
.courseprogress .bar {
width: var(--progress);
height: 100%;
background-color: rgb(154 213 114);
background-repeat: repeat;
/* box-shadow: 0 0 10px 0px orange; */
/* animation:
shine 1s ease-in infinite,
end 1s ease-out 1 1s; */
transition: width 1s ease 1s;
}
@property --progress {
syntax: "";
initial-value: 0%;
inherits: true;
}
/* @keyframes shine {
0% { background-position: 0 0; }
100% { background-position: 0 50px; }
}
@keyframes end {
0%, 100% { box-shadow: 0 0 10px 0px orange; }
50% { box-shadow: 0 0 15px 5px orange; }
} */
.mainTitle {
color: #fff;
font-weight: bold;
font-size: 3rem;
z-index: 10;
position: relative;
display: flex;
align-items: center;
margin-bottom: 30px;
}
.bodyBg::before {
width: 100%;
content: '';
height: 350px;
background: rgba(84, 130, 53, 1);
background: linear-gradient( 127deg, rgba(84, 130, 53, 1) 0%, rgb(56 87 34) 100% );
position: absolute;
top: 0;
}
.bodyBg::after {
width: 100%;
content: '';
height: 20px;
background: rgba(84, 130, 53, 1);
background: linear-gradient( 127deg, rgba(84, 130, 53, 1) 0%, rgb(56 87 34) 100% );
position: absolute;
bottom: 0;
}
.btn-check:active+.btn-primary:focus, .btn-check:checked+.btn-primary:focus, .btn-primary.active:focus, .btn-primary:active:focus, .show>.btn-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 0.25rem rgba(107, 253, 49, 0.5);
}
.btn-check:active+.btn-primary, .btn-check:checked+.btn-primary, .btn-primary.active, .btn-primary:active, .show>.btn-primary.dropdown-toggle {
color: #fff;
background-color: #385722;
border-color: #385722;
}
.btn-primary{
border-color: #548235;
background-color: #548235;
}
.btn-primary:hover{
border-color: #385722;
background-color: #385722;
}
.formList li {
font-size: 1.4rem;
list-style: none;
padding-left: 25px;
position: relative;
margin-bottom: 10px;
}
.formList li span {
position: absolute;
left: 0;
font-size: 1rem;
top: 6px;
}
.smsWrap {
display: flex;
align-items: end;
}
.sec {
display: none;
}
@font-face {
font-family: 'Roboto';
src: url('../font/Roboto-Regular.ttf');
}
h2,
.h2 {
font-weight: bold;
}
body {
position: relative;
font-family: 'Roboto', Arial, Helvetica, sans-serif;
}
.errMessage {
display: none;
}
.body {
padding: 40px 0px;
}
.body::before {
content: '';
position: absolute;
background-color: #000000;
width: 100%;
top: 0;
z-index: 1;
height: 200px;
}
.bigLogo {
width: 200px;
height: 200px;
}
.greenText {
color: #00a650;
}
.bodyWrap {
padding: 20px 0;
display: flex;
min-height: 85vh;
}
.title {
width: 80%;
margin: 0px auto;
}
input[type=radio] {
display: none;
}
input[type=radio]:not(:disabled) ~ label {
cursor: pointer;
}
input[type=radio]:disabled ~ label {
color: #bcc2bf;
border-color: #bcc2bf;
box-shadow: none;
cursor: not-allowed;
}
.startBtn{
display: none;
}
.choiceSelect label {
height: 100%;
display: block;
background: white;
border: 1px solid #fff;
border-radius: 10px;
padding: 1rem;
margin-bottom: 1rem;
text-align: left;
box-shadow: 0px 3px 10px -2px rgba(161, 170, 166, 0.5);
position: relative;
}
.choiceSelect label:hover {
color: #548235;
border: 1px solid #548235;
}
.videoWrap{
cursor: pointer;
}
.choiceSelect input[type=radio]:checked + label {
border: 1px solid #548235;
color: #fff;
background-color: #548235;
}
.bodyMain {
width: 80%;
}
p {
line-height: 26px;
}
.mainlogin {
display: flex;
}
.main {
display: flex;
gap: 20px;
}
.bodyBg {
min-height: 100vh;
background-color: #fff;
}
.logo{
width: 90px;
margin-right: 20px;
height: 90px;
}
.garyText {
color: #9fa5aa;
}
.pagination {
gap: 10px;
}
.titleWrap {
width: 42%;
display: flex;
position: relative;
z-index: 2;
padding: 20px;
margin: 0px auto;
border-radius: 10px;
/* border: 4px solid #548235; */
background-color: rgba(255, 255, 255, 0.8);
box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px;
/* backdrop-filter: blur(10px); */
}
.orangeFont {
color: #ff9000;
}
.greenFont{
color: #548235;
}
.questionContentWrap {
display: flex;
padding: 10px;
height: 100%;
-webkit-box-orient: vertical !important;
-webkit-box-direction: normal !important;
-ms-flex-direction: column !important;
flex-direction: column !important;
}
.courseTitle {
margin-bottom: 100px;
}
.wrap {
position: relative;
z-index: 2;
margin: 0px auto;
width: 80%;
border-radius: 10px;
padding: 40px 0;
}
.indexWrap{
padding: 20px;
background-color: rgb(255, 255, 255, 0.9 );
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.header {
color: #fff;
position: relative;
padding: 20px 0px;
}
.courseContentDetail {
border-radius: 10px;
margin-bottom: 20px;
padding: 40px;
background-color: #fff;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
.smsContentDetail {
border-radius: 10px;
margin-bottom: 20px;
padding: 40px;
min-height: 350px;
background-color: #fff;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
.inputCustom-control {
margin-left: 30px;
background-color: transparent;
border: 0;
padding-right: 30px;
}
.loginWrap {
border-radius: 10px;
position: relative;
z-index: 2;
margin: 0px auto;
width: 42%;
}
.page-link {
font-size: 0.6rem;
border-radius: 5px !important;
}
.page-item.active .page-link {
z-index: 3;
color: #fff;
background-color: #1c63b7;
border-color: #1c63b7;
}
.btn-outline-edit {
background: #ffffff;
/* Grey */
color: #9fa5aa;
border: 1px solid #f5f5f5;
border-radius: 5px;
}
.btn-outline-edit:hover {
background: #9fa5aa;
/* Grey */
color: #fff;
}
.bold {
font-weight: bold;
}
.btn-check:focus + .btn,
.btn:focus {
outline: 0;
box-shadow: none;
}
.lightblueBg {
background-color: #f7fbfe;
}
.modal-title {
font-size: 20px;
font-weight: bold;
}
.form-check {
padding-left: 0;
margin-bottom: 20px;
}
.loginBtn {
border-radius: 10px;
font-size: 20px;
font-weight: 600;
}
label {
font-weight: bold;
font-size: 1rem;
color: #4c4c4c;
}
hr.dashed {
margin: 40px 0px;
border: 1px dashed #9fa5aa;
}
.modal-header {
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
}
.modalBtnWrap {
margin-top: 60px;
margin-bottom: 20px;
}
.pageControl {
padding: 0px 0px 35px 0px;
align-items: center;
display: flex;
justify-content: space-between;
}
.longBtn {
padding: 12px 40px !important;
}
h1 {
font-weight: 700;
font-size: 24px;
}
.btn {
font-size: 1.2rem;
padding: 10px 0.75rem;
}
.bootstrap-table .fixed-table-container .table td,
.bootstrap-table .fixed-table-container .table th {
box-sizing: none;
}
.btn-success {
color: #fff;
background-color: #00a650;
border-color: #00a650;
}
.shadowBox {
background-color: #fff;
}
.pagination-detail {
display: none !important;
}
.bootstrap-table .fixed-table-container .table thead th .th-inner {
padding: 15px 20px !important;
text-transform: uppercase;
}
.table thead th {
vertical-align: bottom;
border-bottom: 2px solid #f5f5f5;
}
.table {
border: 1px solid #f5f5f5;
background-color: #fff;
}
.table th {
font-size: 0.6rem;
}
.table td {
border-bottom: 1px solid #f5f5f5;
padding: 15px 20px;
}
.table .thead {
box-shadow: 0px 2px 4px rgb(0 0 0 / 5%);
}
.configuration {
padding: 40px;
}
.flexTb {
margin: 0px;
border: 1px solid #c2c7cb;
border-radius: 5px;
margin-bottom: 20px;
}
.logDisplay {
border: 1px solid #c2c7cb;
border-radius: 5px;
height: 100vh;
}
.log {
padding: 40px;
}
.rowTh {
color: #fff;
background: #9fa5aa;
}
.rowTh,
.rowTd {
padding: 15px;
border: 1px solid #c2c7cb;
}
.primary {
border: #ff9000;
color: rgba(84, 130, 53, 1);
}
.primaryBg {
background-color: rgba(84, 130, 53, 1);
color: #fff;
}
.switch-button.active::before {
color: rgba(84, 130, 53, 1);
}
.switch-button .switch-button-label-span {
color: rgba(84, 130, 53, 1);
}
.switch-button.active .switch-button-label-span {
color: #9fa5aa;
}
.btn-lg {
padding: 10px 40px;
}
.bg-gradient1 span,
.bg-gradient1:before {
background: rgba(84, 130, 53, 1);
background: linear-gradient( 90deg, rgba(84, 130, 53, 1) 0%, rgb(56 87 34) 100% );
}
.fancy-button {
border: 0;
display: inline-block;
width: 100%;
font-family: 'Montserrat', Helvetica, Arial, sans-serif;
font-size: 17px;
letter-spacing: 0.03em;
text-transform: uppercase;
color: #ffffff;
position: relative;
background-color: transparent;
}
.fancy-button:before {
content: '';
display: inline-block;
height: 40px;
position: absolute;
bottom: -5px;
left: 30px;
right: 30px;
z-index: -1;
border-radius: 30em;
filter: blur(20px) brightness(0.95);
transform-style: preserve-3d;
transition: all 0.3s ease-out;
}
.fancy-button i {
margin-top: -1px;
margin-right: 20px;
font-size: 1.265em;
vertical-align: middle;
}
.fancy-button span {
white-space: nowrap;
display: inline-block;
padding: 18px 60px;
border-radius: 10px;
width: 100%;
position: relative;
z-index: 2;
will-change: transform, filter;
transform-style: preserve-3d;
transition: all 0.3s ease-out;
}
.fancy-button:focus,
.fancy-button:active {
color: #ffffff;
}
.fancy-button:hover {
color: #ffffff;
}
.fancy-button:hover span {
filter: brightness(1.05) contrast(1.05);
transform: scale(0.95);
}
.fancy-button:hover:before {
bottom: 0;
filter: blur(10px) brightness(0.95);
}
/*
* Prevents issues when the parent creates a
* stacking context. (For example, using the transform
* property )
*/
.box::after {
content: '';
z-index: -1;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: inherit;
border-radius: inherit;
}
.btn-outline-primary {
--bs-btn-color: #1c63b7;
--bs-btn-border-color: #1c63b7;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #1c63b7;
--bs-btn-hover-border-color: #1c63b7;
--bs-btn-focus-shadow-rgb: 13, 110, 253;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #1c63b7;
--bs-btn-active-border-color: #1c63b7;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #1c63b7;
--bs-btn-disabled-bg: transparent;
--bs-btn-disabled-border-color: #1c63b7;
--bs-gradient: none;
}
.logDisplay {
padding: 10px;
}
.switch-button {
background: #f5f5f5;
border-radius: 8px;
margin-bottom: 20px;
width: 250px;
text-align: center;
font-size: 18px;
letter-spacing: 1px;
color: #9fa5aa;
position: relative;
padding: 5px 127px 5px 5px;
position: relative;
}
.switch-button:before {
content: 'Interface Log';
position: absolute;
font-size: 0.8rem;
top: 0;
bottom: 0;
right: 0;
width: 130px;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
pointer-events: none;
}
.switch-button-checkbox {
cursor: pointer;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 2;
}
.switch-button-checkbox:checked + .switch-button-label:before {
transform: translateX(122px);
transition: transform 300ms linear;
}
.switch-button-checkbox + .switch-button-label {
position: relative;
padding: 15px 0;
display: block;
user-select: none;
pointer-events: none;
}
.switch-button-checkbox + .switch-button-label:before {
content: '';
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
background: #ffffff;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
border-radius: 5px;
transform: translateX(0);
transition: transform 300ms;
}
.switch-button-checkbox + .switch-button-label .switch-button-label-span {
position: relative;
text-transform: none;
}
.Login {
width: 100%;
}
.inputGroup {
width: 100%;
border-radius: 10px;
padding-top: 20px;
border: 1px solid #1c63b7;
position: relative;
}
.form-control:focus {
box-shadow: none;
}
.inputGroup label {
left: 15px;
top: 8px;
font-size: 0.6rem;
position: absolute;
}
.toggle-password {
position: absolute;
right: 10px;
top: 20px;
cursor: pointer;
}
.customInput {
font-size: 20px;
border: none;
padding: 6px 15px;
overflow: hidden;
border-radius: 10px;
}
.planeLogin {
padding: 0px 10%;
display: flex;
}
video {
border-radius: 10px;
}
.hide {
display: none;
}
.questionContent {
display: none;
height: 100%;
}
.questionWrap {
border-radius: 10px;
margin-bottom: 10px;
}
.paperWrap{
width: 100%;
}
.questionWrap p {
text-align: left;
font-size: 1.2rem;
}
.planeImg {
background-size: cover;
justify-content: center;
display: flex;
background-image: url(../images/login_bg.jpg);
}
::selection {
color: var(--white);
background-color: var(--black);
}
::-moz-selection {
color: var(--white);
background-color: var(--black);
}
.selectionSelecter {
position: relative;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.selectionSelecter::after {
top: 3px;
font-size: 0.6rem;
position: absolute;
right: 10px;
content: "\f078";
font-family: "Font Awesome\ 5 Free";
font-weight: 900;
}
.videoBtn,
.replayBtn {
color: #4c4c4c;
}
.videoBtn:hover,
.replayBtn:hover {
color: #548235;
}
.videoWrap {
position: relative;
display: block;
}
.videoControl {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
}
.inputCustom {
background-color: #ededed;
border-radius: 10px;
height: 48px;
margin-bottom: 20px;
}
.input {
position: relative;
width: 100%;
}
.inputCustomIcon {
position: relative;
display: flex;
align-items: center;
margin: 0px 20px;
}
.input__label {
padding: 20px 10px 0px 20px;
font-size: 0.8rem;
white-space: nowrap;
position: relative;
display: block;
font-weight: bold;
line-height: 1.2;
}
.inputCustomIcon i {
position: absolute;
left: 0px;
top: 15px;
}
.input__field {
box-sizing: border-box;
display: block;
width: 100%;
height: 45px;
padding-left: 20px;
border: none;
background: transparent;
}
.input__field:focus-visible,
.inputCustom-control:focus-visible {
outline: none;
}
.input__field:not(:-moz-placeholder-shown) + .input__label {
transform: translate(0.25rem, -65%) scale(0.8);
color: var(--color-accent);
}
.input__field:not(:-ms-input-placeholder) + .input__label {
transform: translate(0.25rem, -65%) scale(0.8);
color: var(--color-accent);
}
.input__field:focus + .input__label,
.input__field:not(:placeholder-shown) + .input__label {
transform: translate(0.25rem, -65%) scale(0.8);
color: var(--color-accent);
}
.whiteFont {
color: #fff;
}
.roundBtn {
border: 0px !important;
border-radius: 10px !important;
}
.box-round {
border-radius: 20px;
}
.btn-primary.disabled,
.btn-primary:disabled {
color: #fff;
background-color: #cdcdcd;
border-color: #cdcdcd;
}
.progress {
width: 100%;
position: relative;
height: 5px;
border-radius: 10px;
overflow: hidden;
background-color: #f5f5f5;
}
.timeline {
height: 100%;
position: absolute;
background-color: #548235;
}
.boxshadow {
box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px;
}
.toggleBox .checkbox {
position: relative;
display: inline-block;
}
.toggleBox .checkbox:after,
.checkbox:before {
font-family: FontAwesome;
font-feature-settings: normal;
-webkit-font-kerning: auto;
font-kerning: auto;
font-language-override: normal;
font-stretch: normal;
font-style: normal;
font-synthesis: weight style;
font-variant: normal;
font-weight: normal;
text-rendering: auto;
}
.toggleBox .label {
margin-left: 10px;
}
.toggleBox .checkbox label {
width: 90px;
height: 42px;
background: #ccc;
position: relative;
display: inline-block;
border-radius: 46px;
transition: 0.4s;
}
.toggleBox .checkbox label:after {
content: '';
position: absolute;
width: 50px;
height: 50px;
border-radius: 100%;
left: 0;
top: -5px;
z-index: 2;
background: #fff;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
transition: 0.4s;
}
.toggleBox .checkbox input {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 5;
opacity: 0;
cursor: pointer;
}
.toggleBox .checkbox input:hover + label:after {
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.2), 0 3px 8px 0 rgba(0, 0, 0, 0.15);
}
.toggleBox .checkbox input:checked + label:after {
left: 40px;
}
.toggleBox .checkbox label {
background: #bbb;
width: 30px;
height: 10px;
}
.toggleBox .checkbox label:after {
background: #fff;
top: -5px;
width: 20px;
height: 20px;
}
.toggleBox .checkbox input:checked + label {
background: #d2d2d2;
}
.toggleBox .checkbox input:checked + label:after {
background: #548235;
left: 15px;
}
.swal-icon--success {
border-color: #548235;
}
.swal-icon--success:after,
.swal-icon--success:before {
content: '';
border-radius: 50%;
position: absolute;
width: 60px;
height: 120px;
background: transparent;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.swal-icon--success:before {
border-radius: 120px 0 0 120px;
top: -7px;
left: -33px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 60px 60px;
transform-origin: 60px 60px;
}
.swal-icon--success:after {
border-radius: 0 120px 120px 0;
top: -11px;
left: 30px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 60px;
transform-origin: 0 60px;
-webkit-animation: rotatePlaceholder 4.25s ease-in;
animation: rotatePlaceholder 4.25s ease-in;
}
.swal-icon--success__ring {
width: 80px;
height: 80px;
border: 4px solid hsla(39, 72%, 69%, 0.2);
border-radius: 50%;
box-sizing: content-box;
position: absolute;
left: -4px;
top: -4px;
z-index: 2;
}
.swal-icon--success__hide-corners {
width: 5px;
height: 90px;
background-color: transparent;
padding: 1px;
position: absolute;
left: 28px;
top: 8px;
z-index: 1;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.swal-icon--success__line {
height: 5px;
background-color: #548235;
display: block;
border-radius: 2px;
position: absolute;
z-index: 2;
}
.swal-icon--success__line--tip {
width: 25px;
left: 14px;
top: 46px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-animation: animateSuccessTip 0.75s;
animation: animateSuccessTip 0.75s;
}
.swal-icon--success__line--long {
width: 47px;
right: 8px;
top: 38px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-animation: animateSuccessLong 0.75s;
animation: animateSuccessLong 0.75s;
}
.swal-icon {
width: 80px;
height: 80px;
border-width: 4px;
transform: scale(1.5);
border-style: solid;
border-radius: 50%;
padding: 0;
position: relative;
box-sizing: content-box;
margin: 80px auto;
}
.swal-icon:first-child {
margin-top: 70px;
}
@keyframes animateSuccessLong {
0% {
width: 0;
right: 46px;
top: 54px;
}
65% {
width: 0;
right: 46px;
top: 54px;
}
84% {
width: 55px;
right: 0;
top: 35px;
}
to {
width: 47px;
right: 8px;
top: 38px;
}
}
@keyframes rotatePlaceholder {
0% {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
5% {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
12% {
-webkit-transform: rotate(-405deg);
transform: rotate(-405deg);
}
to {
-webkit-transform: rotate(-405deg);
transform: rotate(-405deg);
}
}
@keyframes animateSuccessTip {
0% {
width: 0;
left: 1px;
top: 19px;
}
54% {
width: 0;
left: 1px;
top: 19px;
}
70% {
width: 50px;
left: -8px;
top: 37px;
}
84% {
width: 17px;
left: 21px;
top: 48px;
}
to {
width: 25px;
left: 14px;
top: 45px;
}
}
@media (max-width: 1001px) {
}