.view-login #sp-main-body {
  padding: 80px 0px;
  background: #0c164c;
}
@media (max-width: 992px) {
  .view-login #sp-main-body {
    padding: 60px 0px;
  }
}

.bfQuickMode input[type="text"],
.bfQuickMode textarea,
.bfQuickMode select,
.bfQuickMode .uneditable-input {
  max-width: 100%;
  width: 100%;
}

.bfErrorMessage.alert.alert-error {
  color: #b12e2e;
  margin-top: 40px;
  background: #ff000063;
  width: 100%;
}

/***login***/
.view-login #sp-main-body {
  position: relative;
}
.view-login #sp-main-body:after {
  position: absolute;
  content: "";
  background: url(/images/00_syabas/pattern/007-min.png);
  width: 650px;
  height: 564px;
  background-size: cover;
  right: -180px;
  bottom: 0px;
  border: 50px;
  transition: 0.3s;
}

@media (max-width: 991px) {
  .view-login #sp-main-body:after {
    position: absolute;
    content: "";
    background: url(/images/00_syabas/pattern/007-min.png);
    width: 200px;
    height: 173px;
    background-size: cover;
    right: -80px;
    bottom: 0px;
    transition: 0.3s;
  }
}

.view-login #sp-main-body {
  position: relative;
}
.view-login #sp-main-body:before {
  transform: rotate(6deg);
  position: absolute;
  content: "";
  background: url(/images/00_syabas/pattern/08.png);
  width: 580px;
  height: 625px;
  background-size: cover;
  left: -250px;
  top: -80px;
  transition: 0.3s;
}

@media (max-width: 991px) {
  .view-login #sp-main-body:before {
    transform: rotate(0deg);
    position: absolute;
    content: "";
    background: url(/images/00_syabas/pattern/08.png);
    width: 300px;
    height: 323px;
    background-size: cover;
    left: -200px;
    top: -80px;
    transition: 0.3s;
  }
}

.com-users .reg-login-form-wrap .reg-login-title h3 {
  margin-bottom: 30px;
}
.reg-login-form-wrap .form-links a {
  color: #46539cb0;
  font-weight: 600;
}

/*sybasform*/
button.btn.btn-primary.validate {
  color: #353535;
  padding: 10px 35px;
  border: 2px solid #5e5e5e;
  background: transparent;
  border-radius: 30px;
  transition: 0.3s;
}
.com-users.view-profile a.btn {
  margin-left: 10px;
  color: #989898;
  padding: 10px 35px;
  border: 2px solid #d4e525;
  background: transparent;
  border-radius: 30px;
  transition: 0.3s;
}

/***loginbutton***/
.com-users .reg-login-form-wrap .login .form-group .btn-primary.btn-block {
  width: 100%;
  background: #b6ff6a;
  margin-bottom: 5px;
  box-shadow: 3px 2px 6px #9999997d;
  color: #2b6c0f;
  /* border: 2px solid #d5ff1d; */
}
.com-users
  .reg-login-form-wrap
  .login
  .form-group
  .btn-primary.btn-block:hover {
  opacity: 80%;
  color: #54565475;
}

/*facebook login*/
.akeeba-sociallogin-link-button-facebook,
.akeeba-sociallogin-unlink-button-facebook,
.akeeba-sociallogin-button-facebook {
  background-color: #3b5998 !important;
  color: #ffffff !important;
  transition-duration: 0.33s;
  background-image: none;
  width: 100%;
  border-radius: 0px;
  border: none !important;
}

.akeeba-sociallogin-link-button-facebook:hover,
.akeeba-sociallogin-unlink-button-facebook:hover,
.akeeba-sociallogin-button-facebook:hover {
  background-color: #8b9dc3 !important;
  color: #ffffff !important;
  transition-duration: 0.33s;
  border-color: #3b5998 !important;
}

.com-users .reg-login-form-wrap {
  border-radius: 20px;
  border: 3px solid #e8ff01;
}

/*google login */
.akeeba-sociallogin-button.akeeba-sociallogin-button-google {
  color: #fff;
  background-color: #db3236 !important;
  width: 100%;
  margin-top: 5px;
}

.akeeba-sociallogin-button.akeeba-sociallogin-button-google:hover {
  background-color: #ea6669 !important;
  border-radius: 0px !important;
}

.akeeba-sociallogin-button.akeeba-sociallogin-button-google img {
  width: 24px;
  display: inline-block;
}
/*end of google login */

/***filinbutton***/
div#b2 {
  transition: 0.3s;
  border: 3px solid #f3ffcdba;
  color: #ffffffbd;
}

.btnsyabas:hover {
  color: #000 !important;
  color: #ceff00;
  background: #ffffff !important;
  border: 3px solid #ceff00;
  border-radius: 30px;
}

.btnsyabasdone {
  color: #353535;
  font-weight: 600;
  background: #ceff00;
  border: 3px solid #ceff00 !important;
  transition: 0.3s;
}

/**fillinfield**/
div#maklumatdiri {
  transition: 0.6s;
  border: 3px solid #c6d629;
  box-shadow: 3px 4px 10px #ffffff5e;
  margin: 0px;
}

div#maklumatdiri:hover {
  transform: translate(3px, 8px);
}

/**syabas-form002**/
.syabas-form-001 .bfQuickMode input[type="text"] {
  border: 1px solid #d0dd4a;
  border-radius: 20px;
  max-width: 100%;
}

.syabas-form-001 .bfQuickMode textarea {
  margin-top: 20px;
  border: 1px solid #d0dd4a;
  max-width: 100%;
  border-radius: 20px;
}

.form-actions {
  background: transparent;
}

.syabas-form-001 .bfQuickMode .controls .control-label {
  margin-top: 10px;
  font-weight: 600;
  color: #121d49;
  margin-bottom: 3px;
}

.syabas-form-001 .bfQuickMode select {
  margin-top: 20px;
  border: 1px solid #d0dd4a;
  max-width: 100%;
  border-radius: 20px;
}

.syabas-form-001 .btn-primary {
  margin-top: 10px;
  width: 20p;
  margin-bottom: 0px;
  padding: 4px 16px;
  background: #fff;
  color: #15245ee0;
  border: 2px solid #7c7c7c;
  transition: 0.3s;
}

.syabas-form-001 .btn-primary:hover {
  opacity: 60%;
  transform: scale(0.9);
}

.syabas-form-001 .bfQuickMode .controls .control-label {
  width: 23%;
}

.register-form-001 .form-inline input {
  margin-top: 20px;
  margin-bottom: 0px;
}

@media (max-width: 992px) {
  .register-form-001 .form-inline input {
    margin-top: 10px;
    margin-bottom: 20px;
  }
}

/**profile**/
.site.com-users.view-profile.layout-edit.no-task input[type="text"] {
  width: 100%;
}

.site.com-users.view-profile.layout-edit.no-task input[type="password"] {
  width: 100%;
}

.site.com-users.view-profile.layout-edit.no-task input[type="email"] {
  width: 100%;
}

.site.com-users.view-profile.layout-edit.no-task .well {
  border-radius: 20px;
  box-shadow: 3px 4px 6px #6d6d6d47;
  border: 2px solid #eeff3c;
  background: #fff;
}

.site.com-users.view-profile
  a.btn.btn-default.akeeba-sociallogin-linkunlink-button.akeeba-sociallogin-link-button.akeeba-sociallogin-link-button-google.hasTooltip {
  border-color: #fff !important;
  color: #fff;
  border-radius: 18px;
  background-color: #db3236 !important;
  width: 30%;
  transition: 0.3s;
}

.form-horizontal .control-label {
  text-align: left;
}

.site.com-users.view-profile .akeeba-sociallogin-link-button-facebook {
  padding: 7px;
  border-radius: 15px;
  width: 30%;
  transition: 0.3s;
}

@media (max-width: 992px) {
.site.com-users.view-profile .akeeba-sociallogin-link-button-facebook {
    margin-left: 0px;
  width: 38%;
}
.site.com-users.view-profile
  a.btn.btn-default.akeeba-sociallogin-linkunlink-button.akeeba-sociallogin-link-button.akeeba-sociallogin-link-button-google.hasTooltip {
  width: 41%;
}}

.site.com-users.view-profile
  a.btn.btn-default.akeeba-sociallogin-linkunlink-button.akeeba-sociallogin-link-button.akeeba-sociallogin-link-button-google.hasTooltip:hover {
  border-radius: 0px;
}

.site.com-users.view-profile .akeeba-sociallogin-link-button-facebook:hover {
  border-radius: 0px;
}

/**Syabas Form**/
textarea {
  font-size: 14px !important;
}

.mainsyabas {
  text-align: center;
}

.btnsyabasmain {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
}

.btnsyabasdone {
  color: #353535;
  font-weight: 600;
  background: #ceff00;
  border: 3px solid #ceff00 !important;
}

.btnsyabas {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 60px;
  margin: 10px 0;
  border: 3px solid #353535;
  border-radius: 30px;
  cursor: pointer;
}

.btnsyabas:hover {
  color: #ceff00;
  background: #ffffff !important;
  border: 3px solid #ceff00;
  border-radius: 30px;
}

.btndisabled {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 60px;
  margin: 10px 0;
  background: #efefef;
  border: 3px solid #353535;
  border-radius: 30px;
  cursor: not-allowed;
}

.confirmsubmit {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 20px 0;
}

.confirmsubmit p {
  color: #000;
  font-size: 20px;
  font-weight: 600;
}

.btnsyabas_submit {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 220px;
  height: 60px;
  border: 3px solid #353535;
  border-radius: 30px;
  cursor: pointer;
}

.btnsyabas_submit_disabled {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 220px;
  height: 60px;
  background: #efefef;
  border: 3px solid #353535;
  border-radius: 30px;
  cursor: wait;
}

.btnsyabas_submit:hover {
  color: #ceff00;
  background: #ffffff !important;
  border: 3px solid #ceff00;
  border-radius: 30px;
}

.fillform {
  text-align: center;
  font-weight: 600;
  color: #ceff00;
}

.fa-check,
.bcheck {
  /* color: #ceff00; */
  font-size: 35px !important;
  position: absolute;
  right: 80px;
}

.backbtn {
  margin-bottom: 20px;
}

/* ==========================Bahagian Form================================ */

.syabasinput {
  width: 100%;
}

.syabasinput .control-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px !important;
}

.syabasinput .control-label {
  width: 100% !important;
  display: flex;
  flex-direction: column;
  text-align: left !important;
}

.syabasinput .control-label label {
  margin-bottom: 0px !important;
}

.syabasinput .controls {
  text-align: left;
  margin-left: 0 !important;
}

.syabasinput .controls input {
  width: 100%;
}

.syabasinput .controls textarea {
  width: 100%;
  height: 70px;
}

#maklumatmain {
  height: 560px;
}

/* ==========================Bahagian 1================================ */

.bahagianform {
  height: 100%;
  margin: 0 30px;
  padding: 20px 25px;
  background: #f5f5f5;
  border-radius: 20px;
}
.titlemain {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}
.btitle {
  margin: 0px;
  text-align: left;
  font-size: 23px;
  font-weight: bold;
  color: #353535;
}
.spanclose {
  font-size: 25px;
  cursor: pointer;
}
.spanclose:hover {
  color: #ceff00;
}
.submitdiv {
  margin: 15px 0;
  /* position: absolute; */
  bottom: 0;
  left: 0;
  width: 100%;
}
#b1check,
#b2check,
#b3check,
#b4check {
  display: none;
}
.submitbtn {
  width: 150px;
  height: 40px;
  border: 2px solid #353535;
  background: none;
  border-radius: 30px;
}
.submitbtn:hover {
  border: 2px solid #ceff00;
}
.submitbtn:active {
  background: #ceff00;
  border: 2px solid #ceff00;
}

/* ==============================Bahagian 2================================== */

.syabasinput .chzn-container {
  width: 100% !important;
}

.syabasinput .chzn-container-single .chzn-single {
  display: flex;
  align-items: center;
  height: 34px !important;
  background: #fff !important;
}

.syabasinput .chzn-container-single .chzn-single div {
  top: 5px !important;
}

.errormsg {
  color: #ff0000;
}

/* ==============================Bahagian 4================================== */
.syabasfile {
  border-top: 2px solid rgba(194, 194, 194, 0.9);
}

.syabasfile .control-group {
  margin: 5px 0 !important;
}

.syabasfile .control-label {
  text-align: left !important;
}

#catdes {
  font-size: 14px;
}

/* =============================Category Selection============================= */
.categorydana p {
  margin: 10px 0;
}
.selectp {
  margin: 0px;
}
#jform_category {
  padding-top: 5px;
}

.option {
  background: #fff;
  height: 50px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  cursor: pointer;
  padding: 0 10px !important;
  border: 2px solid #353535;
  border-radius: 50px;
  transition: all 0.3s ease;
}
#jform_category input[type="radio"] {
  display: none;
}
#jform_category0main:checked:checked ~ .option-1,
#jform_category1main:checked:checked ~ .option-2 {
  border-color: #ceff00;
  background: #ceff00;
}
#jform_category0main:checked:checked ~ .option-1 .dot,
#jform_category1main:checked:checked ~ .option-2 .dot {
  background: #fff;
}
#jform_category0main:checked:checked ~ .option-1 .dot::before,
#jform_category1main:checked:checked ~ .option-2 .dot::before {
  opacity: 1;
  transform: scale(1);
}
.option span {
  font-size: 18px;
  color: #353535;
}
#jform_category0main:checked:checked ~ .option-1 span,
#jform_category1main:checked:checked ~ .option-2 span {
  font-weight: 600;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently*/
}

/* =============================Details=================================== */
.head {
  color: #ceff00;
  background-color: #0c1530;
  border-color: #ddd;
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.head h3 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
}

span#infohead {
  color: #172b7a;
}

.infomain {
  font-size: 15px;
  padding: 15px;
  border: 1px solid #ceff00;
  -webkit-box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
  box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
  background-color: #fff;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  box-shadow: 4px 4px 5px #b3b3b38c;
}

.infomain .row {
  margin: 10px 0;
}

#infohead {
  font-weight: 600;
}

.bahagianmain {
  margin-bottom: 15px;
}

/**profile**/
fieldset#users-profile-core .dl-horizontal dt {
  float: left;
  width: 372px;
}

body.site.com-users.view-profile #sp-main-body {
    padding:80px 0px;
}
@media (max-width: 992px) {
body.site.com-users.view-profile #sp-main-body {
    padding:50px 0px;
}}




/**loginregsiter*/
.view-registration #sp-main-body {
  position: relative;
  background: #0c164c;
  padding: 80px 0px;
}

.view-registration #sp-main-body:before {
  transform: rotate(6deg);
  position: absolute;
  content: "";
  background: url(/images/00_syabas/pattern/08.png);
  width: 580px;
  height: 625px;
  background-size: cover;
  left: -250px;
  top: -80px;
  transition: 0.3s;
}

@media (max-width: 991px) {
  .view-registration #sp-main-body:before {
    transform: rotate(0deg);
    position: absolute;
    content: "";
    background: url(/images/00_syabas/pattern/08.png);
    width: 300px;
    height: 323px;
    background-size: cover;
    left: -200px;
    top: -80px;
    transition: 0.3s;
  }
}

.view-registration #sp-main-body {
  position: relative;
  background: #0c164c;
  padding: 80px 0px;
}
.registration a {
  color: #42679bb0;
  font-weight: 600;
}

.view-registration #sp-main-body {
  position: relative;
}
.view-registration #sp-main-body:after {
  position: absolute;
  content: "";
  background: url(/images/00_syabas/pattern/007-min.png);
  width: 650px;
  height: 564px;
  background-size: cover;
  right: -180px;
  bottom: 0px;
  border: 50px;
  transition: 0.3s;
}

@media (max-width: 991px) {
  .view-registration #sp-main-body:after {
    position: absolute;
    content: "";
    background: url(/images/00_syabas/pattern/007-min.png);
    width: 200px;
    height: 173px;
    background-size: cover;
    right: -80px;
    bottom: 0px;
    transition: 0.3s;
  }
}