@font-face {
  font-family: "sarabun";
  src: url("../font/Sarabun-Regular.ttf?2");
}

@font-face {
  font-family: "sarabun";
  src: url("../font/Sarabun-Bold.ttf?2");
  font-weight: bold;
}

body {
  font-size: 0.8rem;
  background-color: #FFF;
  font-weight: 500;
  padding-bottom: 50px;
  font-family: "sarabun" !important;
}

.infoSubHead {
  font-size: 14px;
  margin-top: 10px;
}

.dokjun {
  padding: 0rem 0.5rem;
  color: #ff0044;
  font-weight: bold;
}

.formField {
  border: none !important;
  height: 34px !important;
  border-radius: 10px !important;
}

.formField:focus {
  outline: none;
}

@media (max-width: 768px){
  .textNav {
    font-size:17px !important;
    margin-top: auto;
    margin-bottom: auto;
    color:white;
  }
  .content-page {
    /* margin-left: 250px;
    margin-right: 250px;
    overflow: hidden; */
  }
}

.content-page {
  margin-left: 250px;
  margin-right: 250px;
  overflow: hidden;
}


.topnav {
  overflow: hidden;
  background: transparent linear-gradient(90deg, #43CAF4 0%, #0054C1 100%) 0% 0% no-repeat padding-box;
  margin-right: 0px !important;
  margin-left: 0px !important;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.btn-topbar {
  background-color: #3b80e600 !important;
  padding-left: 20px;
  padding-right: 20px;
  border: 1px solid #FFF;
  color: #FFF;
  font-family: "sarabun" !important;
  font-size: 1.00rem;
  transition: 0.2s;
}

.btn-topbar:hover, .btn-topbar:focus, .btn-topbar:active {
  color: #FFF;
  transform:scale(1.02);
  box-shadow: 0px 0px 5px 0px rgba(255,255,255,1);
}

.btn-next {
  background-color: #00A2FF !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  border: 1px solid #00A2FF !important;
  border-radius: 5px;
  color: #FFF !important;
  font-family: "sarabun" !important;
  font-size: 1.00rem;
  transition: 0.2s;
}

.btn-next:hover, .btn-next:focus, .btn-next:active {
  color: #FFF !important;
  transform:scale(1.02);
  box-shadow: 0px 0px 5px 0px rgba(255,255,255,1);
}

hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 1px solid #707070;
  border-top: 1px solid rgba(0,0,0,.1);
  color: #707070;
}

.profileImg {
  padding: 10px;
}

.profileInfo {
  padding: 20px !important;
}

.headPage {
  font-size: 24px;
  color: #36499C;
  font-weight: bold;
}

.infoHead {
  font-size: 20px;
  color: #36499C;
  font-weight: bold;
}

.infoSubHead {
  font-size: 12px;
  color: #000000;
}

.infoDetail {
  font-size: 23px;
  color: #000000;
  margin-bottom: 28px;
}

.infoSubheadSelect {
  margin-top: 5px;
  font-size: 14px;
  color: #000000;
  margin-bottom: 0px;
}

.infoDetail1Select {
  font-size: 12px;
  color: #000000;
  margin-bottom: 15px;
}

.infoDetail2Select {
  font-size: 10px;
  color: #000000;
  margin-bottom: 10px;
}

.infoMoreInfoSelect {
  font-size: 16px;
  color: #000000;
  margin-top: 10px;
  margin-bottom: 0px;
}

.infoMoreInfoDetailSelect {
  font-size: 14px;
  color: #000000;
  margin-bottom: 0px;
}

@media screen and (max-width: 1366px) and (max-height:768px){
  .textNav {
    font-size:17px !important;
    margin-top: auto;
    margin-bottom: auto;
    color:white;
  }
}

.textNav {
  font-size:22px;
  margin-top: auto;
  margin-bottom: auto;
  color:white;
}

.btn-paymentSuccess {
  background-color: #FFF !important;
  padding: 10px;
  border: 1px solid #51A408;
  border-radius: 5px;
  color: #51A408 !important;
  font-size: 1.00rem;
  transition: 0.2s;
}

.btn-paymentNonSuccess {
  background-color: #FFF !important;
  padding: 10px;
  border: 1px solid red;
  border-radius: 5px;
  color: red !important;
  font-size: 1.00rem;
  transition: 0.2s;
}

/* end new registration and admission */



/* new css satit */
.padding-lr-0 {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.margin-lr-0 {
  margin-left: 0px !important;
  margin-right: 0px !important;
}

.dayx {
  background: #FFFFFF 0% 0% no-repeat padding-box;
  border: 1px solid #9966CB;
  border-radius: 5px;
  width: 140px;
  height: 70px;
  text-align: center;
  padding-top: 15% !important;
  /* padding-right: 20px !important; */
  color: #9966CB !important;
  font-size: 16px;
  transition: 0.2s;
}

.period {
  background: #FFFFFF 0% 0% no-repeat padding-box;
  border: 1px solid #9966CB;
  border-radius: 5px;
  width: 350px;
  height: 70px;
  text-align: left;
  padding: 10px !important;
  /* padding-right: 20px !important; */
  color: #707070 !important;
  font-size: 12px;
  transition: 0.2s;
}

.periodAll {
  background: #FFFFFF 0% 0% no-repeat padding-box;
  border: 1px solid #9966CB;
  border-radius: 5px;
  width: 350px;
  height: 100%;
  text-align: left;
  padding: 10px !important;
  /* padding-right: 20px !important; */
  color: #707070 !important;
  font-size: 12px;
  transition: 0.2s;
}

.period-gray {
  background: #FFFFFF 0% 0% no-repeat padding-box;
  border: 1px solid #D5D5D5;
  border-radius: 5px;
  width: 350px;
  height: 70px;
  text-align: left;
  padding: 10px !important;
  /* padding-right: 20px !important; */
  color: #707070 !important;
  font-size: 12px;
  transition: 0.2s;
}

.periodAll-gray {
  background: #FFFFFF 0% 0% no-repeat padding-box;
  border: 1px solid #D5D5D5;
  border-radius: 5px;
  width: 350px;
  height: 100%;
  text-align: left;
  padding: 10px !important;
  /* padding-right: 20px !important; */
  color: #707070 !important;
  font-size: 12px;
  transition: 0.2s;
}

.btn {
  padding: 0px !important;
}

.btn-purple {
  background: #9966CB 0% 0% no-repeat padding-box !important;
  border: 1px solid #9966CB !important;
  border-radius: 5px;
  width: 100%;
  opacity: 1;
  font-size: 12px !important;
  color: #FFFFFF !important;
}

.btn-purple:hover, .btn-purple:focus, .btn-purple:active {
  background-color: #FFFFFF !important;
  color: #9966CB !important;
  border: 1px solid #9966CB !important;
}

.btn-purple-outline {
  background: #FFFFFF 0% 0% no-repeat padding-box !important;
  border: 1px solid #9966CB !important;
  border-radius: 5px;
  width: 100%;
  opacity: 1;
  font-size: 12px !important;
  color: #9966CB !important;
}

.btn-purple-outline:hover, .btn-purple-outline:focus, .btn-purple-outline:active {
  background-color: #9966CB !important;
  color: #FFF !important;
  border: 1px solid #9966CB !important;
}

.btn-purple-soft {
  background: #DFC5F8 0% 0% no-repeat padding-box !important;
  border: 1px solid #DFC5F8 !important;
  border-radius: 5px;
  width: 100%;
  opacity: 1;
  font-size: 12px !important;
  color: #9966CB !important;
}

.btn-purple-soft:hover, .btn-purple-soft:focus, .btn-purple-soft:active {
  background-color: #FFFFFF !important;
  color: #9966CB !important;
  border: 1px solid #DFC5F8 !important;
}

.btn-gray {
  background: #FFFFFF 0% 0% no-repeat padding-box !important;
  border: 1px solid #D5D5D5 !important;
  border-radius: 5px;
  opacity: 1;
  font-size: 12px !important;
  width: 100%;
  color: #D5D5D5 !important;
}

.btn-gray:hover, .btn-gray:focus, .btn-gray:active {
  /* background-color: #707070;
  color: #FFF; */
  /* border: 1px solid white; */
}

.btn-yellow {
  background: #FFFFFF 0% 0% no-repeat padding-box !important;
  border: 1px solid #FFBB00 !important;
  border-radius: 5px;
  opacity: 1;
  font-size: 12px !important;
  width: 100%;
  color: #FFBB00 !important;
}

.btn-yellow:hover, .btn-yellow:focus, .btn-yellow:active {
  background-color: #FFCE00 !important;
  color: #FFF !important;
}

.btn-blue {
  background: #529DFE 0% 0% no-repeat padding-box !important;
  border: 1px solid #529DFE !important;
  border-radius: 5px;
  opacity: 1;
  font-size: 12px !important;
  width: 100%;
  color: #FFFFFF !important;
}

.btn-blue:hover, .btn-blue:focus, .btn-blue:active {
  background-color: #FFFFFF !important;
  color: #529DFE !important;
}

.btn-bright-outline {
  background: #FFFFFF 0% 0% no-repeat padding-box !important;
  border: 1px solid #FFFFFF !important;
  border-radius: 5px;
  opacity: 1;
  font-size: 12px !important;
  width: 100%;
  color: #707070 !important;
}

.btn-bright-outline:hover, .btn-bright-outline:focus, .btn-bright-outline:active {
  background-color: #FFFFFF !important;
  color: #707070 !important;
}

.color-purple {
  color: #9966CB;
}

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 16px;
}

.modal-body {
  padding-left: 40px !important;
  padding-right: 40px !important;
  padding-top: 15px !important;
  padding-bottom: 15px !important;
}

.modal-content {
  border-radius: 10px !important;
}

hr.undermenu {
  border: 0.5px solid #707070 !important;
  margin-bottom: 10px;
  width: 100%;
}

.span-btn {
  -webkit-appearance: button;
  text-align: center;
  height: 24px;
}

.pointer {
  cursor: pointer;
}

a.noneUnderline {
  text-decoration: none !important;
}

.footer {
	border-top: 1px solid rgba(115, 140, 152, 0.2);
  bottom: 0;
  color: white;
  text-align: left !important;
  font-size: 15px;
  padding: 10px;
  position: fixed;
  right: 0;
  left: 0px;
  background-color: #9966CB;
}

.tableRound .headTable td {
  background-color: #9966CB !important;
  font-size: 16px !important;
  color: white;
  /* height: 48px; */
}

.tableRound td {
  border-bottom: 0px solid #ddd !important;
  font-size: 16px !important;
}

.tableRound td {
  padding: 10px !important;
}

.tableRound thead td:first-child {
  border-radius: 5px 0 0 5px !important;
}

.tableRound thead td:last-child {
  border-radius: 0 5px 5px 0 !important;
}

.header1 {
  font-size: 18px;
  font-weight: bold;
}

.header2 {
  font-size: 14px;
  font-weight: bold;
}

.container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
  padding-right: 0px !important;
  padding-left: 0px !important;
}

.page-item.active .page-link {
  z-index: 1;
  color: #fff !important;
  background-color: #9966CB !important;
  border-color: #9966CB !important;
}


/* end new css satit */

.navbar-custom {
  background-color: #FFFFFF !important;
}

.headerbar .headerbar-left {
  background-color: #FFFFFF !important;
  background: #FFFFFF 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 6px #00000029;
  opacity: 1;
}

.menuPopup {
  padding: 5px 0px;
  width: 100%;
}

.menuPopupBox {
  position: fixed;
  padding: 20px 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  min-height: 50vh;
  background-color: #FFF;
  z-index: 999;
}

.close {
    float: right;
    font-size: 21px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    filter: alpha(opacity=20);
    opacity: .2;
    z-index: 999 !important;
}

button.close {
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.path-route {
  display: inline-block;
  font-weight: 600;
  padding: 15px 20px;
  color: #FFF;
}

.path-route a {
 color: #707070;
 }

.path-route a :hover {
  text-decoration: underline !important;
}

.headerbar-left a {
  text-decoration: none !important;
}

.headMenu {
  font-size: 1.25rem;
  font-weight: 600;
}

.subHeadMenu {
  margin-top: 10px;
  font-size: 0.8rem;
  font-weight: 200;
  /* font-weight: 600; */
}

.callMenu {
  display: none;
}
.colMenu {
  padding: 0px 15px;
  height: 250px;
}

.colMenu:not(:last-child) {
  /* border-right: 1px solid #ddd; */
}

.content-wrap {
  padding: 0px 10px;
}

.headMenuPage {
  font-size: 2.0rem;
}

.headSubMenu {
  font-size: 1.5rem;
}


.groupBox {
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 5px;
  background-color: #FFF;
  /* min-width: 230px; */
}

.gbx {
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 10px !important;
  background-color: #FFF;
}

.personAddBox {
  height: 250px;
  overflow: hidden;
  overflow-y: scroll;
}

@media screen and (max-width:615px) {
  .path-route {
    display: none;
  }

  .path-route-sm {
    display: block !important;
  }
}

.path-route-sm {
  color: #FFF;
  display: none;
  padding: 15px;
  background-color: #ccc;
  margin: 50px 0px 0px ;
}

.path-route-sm a {
  color: #FFF;
}

.btn {
  /* color:#FFF !important; */
}

.disabled {
  color: #ccc;
}

.disabled:hover {
  color: #ccc;
}

.disableapi {
  color: #F98D39;
}

.disableapi:hover {
  color: #F98D39;
}

/* test disable */
.isDisabled {
  color: #ccc;
  cursor: not-allowed !important;
  opacity: 0.5;
  text-decoration: none;
}

.tabBox {
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
}

.addObjectiveMini , .addOwnerMini , .addAttendMini , .addQualityMini , .addStrategyMini , .pop , .deleteFile {
  /* padding: 3px 7px;
  width: 28px;
  height: 28px; */

  padding: 2px 6px;
  width: 24px;
  height: 24px;
  font-size: 0.75rem;

}

.doc {
  padding: 3px 7px;
  /* max-width: 160px; */
  height: 28px;
  font-size: 0.85rem;
}

.removeObjective , .removeAttend{
  margin: 12px 0px;
  padding: 2px 6px;
  width: 24px;
  height: 24px;
  font-size: 0.75rem;
}

.deleteMini {
  padding: 0px 0px;
  width: 16px;
  height: 16px;
  font-size: 0.75rem;
  color:#ff4400;
}

.deleteMini:hover {
  color: #ad2e00;
}


.removeFund {
  cursor: pointer;
}

/* new css */

/* div.dataTables_wrapper div.dataTables_filter label {
  display: none;
} */

@media screen and (min-width:1280px) and (max-width: 1366px) {
  .menuInside {
    font-size: 28px !important;
  }
  .menuSubInside {
    font-size: 20px !important;
  }
  .iconPdf {
    max-width: 65% !important;
  }
  .iconExcelTable {
    max-width: 40%;
  }
  table td {
    font-size: 16px !important;
  }
  table th {
    font-size: 16px !important;
  }
  .iconFile {
    max-width: 30%;
  }

  .blockSearch1 {
    display: block !important;
  }

  .blockSearch2 {
    display: none !important;
  }
}

#sidebar-menu  .disabled{
  background-color: #414d58 !important;
}

#sidebar-menu  .disabled>a:hover{
  cursor:default;
  color: #b5b5b5 !important;
}

#sidebar-menu .disabled .subdrop{
  color: #b5b5b5 !important;
}

#sidebar-menu {
  height: 100%;
  /* overflow: auto; */
}

#sidebar-menu > ul > li > a.active {
  color: #ffffff !important;
  background-color: #BE6DE0;
}

#sidebar-menu > ul > li > a:hover {
  color: #ffffff;
  background-color: #be6de0;
  text-decoration: none;
  border-left: 2px solid #608ab3;
}

/* #sidebar-menu > ul > li > a {
  color: #707070 !important;
} */

.imgLogo1 {
  max-width: 100px;
  max-height: 40px;
  margin: 5px;
  width: auto;
  height: auto;
}

.imgLogo2 {
  max-width: 100px;
  max-height: 30px;
  width: auto;
  margin: 5px;
  height: auto;
}

.imgCard {
  width: 100%;
  max-height: 400px;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 0px !important;
  margin: 20px !important;
  border-radius: 10px;
}
.radius-picture {
  border-radius: 10px 10px 0px 0px;
}
.radius-textbox {
  margin-top: 5px;
  border-radius: 0px 0px 10px 10px;
}

@font-face {
  font-family: "sukhumvit";
  src: url("css/font/SukhumvitSet.ttc") format("truetype");
}

.menuInside {
  font-size: 37px;
  /* font-family: 'THSarabunNew' !important; */
}

.menuSubInside {
  font-size: 26px;
  margin-bottom: 5px;
  /* font-family: 'sukhumvit'; */
}

/* table tr:hover td{
  background-color: #bd6ddec2;
  color: white !important;
}

.tablepass tr:hover td{
  background-color: #71AE22;
  color: white !important;
}

.tablepass tr:hover .btn-green{
  background-color: #71AE22;
  color: #FFF;
}

.tablefail tr:hover td{
  background-color: #DB5656;
  color: white !important;
} */

.btn-firstpage {
  background: #00000070 0% 0% no-repeat padding-box;
  border: 1px solid #FFF;
  border-radius: 5px;
  opacity: 1;
  color: #FFF !important;
  width: 500px;
  max-width: 500px;
}

.btn-firstpage:hover, .btn-firstpage:focus, .btn-firstpage:active {
  transform: scale(1.05);
}

.btn-after {
  background: #00000070 0% 0% no-repeat padding-box;
  border: 1px solid #FFF;
  border-radius: 5px;
  opacity: 1;
  color: #FFF !important;
  width: 500px;
  max-width: 500px;
}

.btn-green {
  background: #FFFFFF 0% 0% no-repeat padding-box;
  border: 1px solid #71AE22;
  border-radius: 5px;
  opacity: 1;
  color: #71AE22 !important;
}

.btn-green:hover, .btn-green:focus, .btn-green:active {
  background-color: #71AE22;
  color: #FFF !important;
  /* border: 1px solid white; */
}

.btn-blue-2 {
  background: #FFFFFF 0% 0% no-repeat padding-box;
  border: 1px solid #36499C;
  border-radius: 5px;
  opacity: 1;
  color: #36499C !important;
}

a.btn-blue:hover, a.btn-blue:focus, a.btn-blue:active {
  background-color: #FFF !important;
  color: #36499C !important;
  /* border: 1px solid white; */
}

.btn-blue-2:hover, .btn-blue-2:focus, .btn-blue-2:active {
  background-color: #36499C !important;
  color: #FFFFFF !important;
}

a.btnUploadAttachment {
  background: #FFFFFF 0% 0% no-repeat padding-box;
  border: 1px solid #71AE22;
  border-radius: 5px;
  opacity: 1;
  color: #71AE22;
}

a.btnUploadAttachment:hover, a.btnUploadAttachment:focus, a.btnUploadAttachment:active {
  background-color: #71AE22;
  color: #FFF;
  border: 1px solid white;
}

.btn-red {
  background: #FFFFFF 0% 0% no-repeat padding-box;
  border: 1px solid #DB5656;
  border-radius: 5px;
  opacity: 1;
  color: #DB5656 !important;
}

.btn-red:hover, .btn-red:focus, .btn-red:active {
  background-color: #DB5656;
  color: #FFF !important;
  /* border: 1px solid white; */
}

.btn-blue-filled {
  font-size: 0.8rem !important;
  background-color: #36499C;
  color: #FFFFFF !important;
  border: 1px solid #36499C;
  border-radius: 5px;
  opacity: 1;
  padding: 6px;
  min-width: 180px;
}

.btn-blue-filled:hover, .btn-blue-filled:focus, .btn-blue-filled:active {
  font-size: 0.8rem !important;
  background-color: #36499C;
  color: #FFFFFF !important;
}

.btn-dark-purple {
  background: #FFFFFF 0% 0% no-repeat padding-box;
  border: 1px solid #8D2AB7;
  border-radius: 5px;
  opacity: 1;
  color: #8D2AB7;
}

.btn-dark-purple:hover, .btn-dark-purple:focus, .btn-dark-purple:active {
  background-color: #8D2AB7;
  color: #FFF;
  /* border: 1px solid white; */
}

.btnUploadAttachment {
  width: 150px;
  background: #FFFFFF 0% 0% no-repeat padding-box;
  border: 1px solid #71AE22;
  border-radius: 5px;
  opacity: 1;
  color: #71AE22;
}

.btnUploadAttachment:hover, .btnUploadAttachment:focus, .btnUploadAttachment:active {
  background-color: #71AE22;
  color: #FFF;
  /* border: 1px solid white; */
}

.tableNonLine {
  border-collapse: collapse !important;
  width: 100%;
  box-shadow: 0px 3px 6px #00000029;
}

.tableRound thead th:first-child {
  border-radius: 10px 0 0 0;
}

.tableRound thead th:last-child {
  border-radius: 0 10px 0 0;
}

.tableRound tbody tr:last-child td:first-child {
  border-radius: 0 0 0 10px;
}

.tableRound tbody tr:last-child td:last-child {
  border-radius: 0 0 10px 0;
}

table th {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
  font-size: 19px;
  color: white;
}

table td {
  padding-top: 3px;
  padding-left: 2px;
  padding-right: 2px;
  text-align: left;
  /* border-bottom: 1px solid #ddd; */
  font-size: 20px;
  color: #707070;
}

table td .available {
  color: #707070;
  background-color:
}

.page-item.active .page-link {
    z-index: 1;
    color: #fff;
    background-color: #32abe7;
    border-color: #32abe7;
}

@media (min-width: 767px) {
  /* .imgLogo2 {
    display: block;
  } */

}


/* icon */
.iconFile {
  max-width: 23%;
}

.iconFile-small {
  max-width: 15%;
}

.iconPdf {
  max-width: 65%;
}

.iconPdfTable {
  max-width: 40%;
}

.iconExcel {
  max-width: 65%;
}

.iconExcelTable {
  max-width: 25%;
}

.iconExcelTable:hover {
  /* background-color: #d11212; */
}

.iconNormal {
  max-width: 25%;
}

.ctest:hover .iconPdf {
  background-color: #d11212;
  color: white;
}

.iconLogoSchool {
  max-width: 12%;
}

.iconLogoItpc {
  max-width: 25%;
}

.iconLeftSidebar {
  max-width: 13%;
}

/* end icon */

.blockGroupInfo {
  background: #FFFFFF 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 6px #00000029;
  /* border: 1px solid #B4B4B4; */
  opacity: 1;
  padding: 10px;
}

.imgProfile {
  max-width: 80%;
  margin-top: 10px;
  border: 1px solid #36499C;
  border-radius: 5px;
  /* min-height: 180px; */
}

.imgActivity {
  width: 198px;
  height: 198px;
  margin-right: 5px;
  border-radius: 5px;
  opacity: 1;
}

.imgAddActivity {
  width: 198px;
  height: 198px;
  margin-right: 5px;
  border-radius: 5px;
  border-style: dashed;
  border-width: 2px;
  position: relative;
  opacity: 1;
}

.imgAddActivity:hover {
  background-color: #00000029;
}

.imgInsideAddActivity {
  width: 50px;
  height: 50px;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
}

.activityListSuccess {
  background-color: #6DC52B;
  color: white;
  font-size: 14px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 7px;
  opacity: 1;
  z-index: 1;
}

.activityListNonSuccess {
  background-color: #C6C6C6;
  color: white;
  font-size: 14px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 7px;
  opacity: 1;
  z-index: 1;
}

.btnPaymentSuccess {
  background: #6DC52B 0% 0% no-repeat padding-box;
  width: 120px;
  height: 25px;
  border: 1px solid #6DC52B;
  font-family: "sarabun" !important;
  color: white !important;
  border-radius: 25px;
  font-size: 14px;
  transition: 0.2s;
  opacity: 1;
  padding-left: 25px !important;
  padding-right: 25px !important;
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

.btnPaymentFail {
  background: #d11212 0% 0% no-repeat padding-box;
  width: 120px;
  height: 25px;
  border: 1px solid #d11212;
  font-family: "sarabun" !important;
  color: white !important;
  border-radius: 25px;
  font-size: 14px;
  transition: 0.2s;
  opacity: 1;
  padding-left: 20px !important;
  padding-right: 20px !important;
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

.btnNotYetProgress {
  background: #FFD754 0% 0% no-repeat padding-box;
  width: 120px;
  height: 25px;
  border: 1px solid #FFD754;
  font-family: "sarabun" !important;
  color: #707070 !important;
  border-radius: 25px;
  font-size: 14px;
  transition: 0.2s;
  opacity: 1;
  padding-left: 20px !important;
  padding-right: 20px !important;
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

.btnInProgress {
  background: #50BFFF 0% 0% no-repeat padding-box;
  width: 120px;
  height: 25px;
  border: 1px solid #50BFFF;
  font-family: "sarabun" !important;
  color: white !important;
  border-radius: 25px;
  font-size: 14px;
  transition: 0.2s;
  opacity: 1;
  padding-left: 20px !important;
  padding-right: 20px !important;
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

.btnAlreadyDone {
  background: #707070 0% 0% no-repeat padding-box;
  width: 120px;
  height: 25px;
  border: 1px solid #707070;
  font-family: "sarabun" !important;
  color: white !important;
  border-radius: 25px;
  font-size: 14px;
  transition: 0.2s;
  opacity: 1;
  padding-left: 10px !important;
  padding-right: 10px !important;
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

.btnFull {
  background: #6DC52B 0% 0% no-repeat padding-box;
  width: 120px;
  height: 25px;
  border: 1px solid #6DC52B;
  font-family: "sarabun" !important;
  color: white !important;
  border-radius: 25px;
  font-size: 14px;
  transition: 0.2s;
  opacity: 1;
  padding-left: 25px !important;
  padding-right: 25px !important;
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

.btnLack {
  background: #d11212 0% 0% no-repeat padding-box;
  width: 120px;
  height: 25px;
  border: 1px solid #d11212;
  font-family: "sarabun" !important;
  color: white !important;
  border-radius: 25px;
  font-size: 14px;
  transition: 0.2s;
  opacity: 1;
  padding-left: 25px !important;
  padding-right: 25px !important;
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

.btnDisable {
  opacity: 0.6;
  cursor: not-allowed;

  background: #FFFFFF 0% 0% no-repeat padding-box;
  border: 1px solid #C6C6C6;
  border-radius: 5px;
  opacity: 1;
  color: #C6C6C6;
}

.attachmentSuccess {
  font-size: 13px;
  color: #707070;
  margin-bottom: 0px;
  border: 1px solid #71AE22;
  border-radius: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
}

.attachmentNotFound {
  font-size: 13px;
  color: #707070;
  margin-bottom: 0px;
  border: 1px solid #C6C6C6;
  border-radius: 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
}

.attachmentIcon {
  width: 20px;
  height: 20px;
}

.attachmentIcon2 {
  width: 10px;
  height: 10px;
}

.nav-tabs {
  margin-left: 25px;
}

.nav-waiting {
  border-color: #BE6DE0 !important;
  background-color: #BE6DE0 !important;
  color: white !important;
  font-size: 19px;
}

.nav-success {
  border-color: #71AE22 !important;
  background-color: #71AE22 !important;
  color: white !important;
  font-size: 19px;
}

.nav-fail {
  border-color: #DB5656 !important;
  background-color: #DB5656 !important;
  color: white !important;
  font-size: 19px;
}

.candidateTab {
  font-size: 20px;
  background-color: #00000029;
  color: #707070;
  box-shadow: 0px 3px 6px #00000029;
}

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  font-family: 'sukhumvit', sans-serif;
  visibility: hidden;
  width: 250px;
  background-color: white;
  color: black;
  text-align: left;
  border-radius: 6px;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 15px;
  padding-right: 15px;
  position: absolute;
  z-index: 10 !important;
  top: 0px;
  left: 110%;
}

.tooltip .tooltiptext .tooltipNameAct {
  font-size: 13px;
}

.tooltip .tooltiptext .tooltipDetailAct {
  font-size: 11px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 20%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent white transparent transparent;
}

.tooltip:hover .tooltiptext {
  /* visibility: visible; */
}

.imgAnnouce {
  width: 503px;
  height: 233px;
  border-radius: 5px;
  opacity: 1;
}

.imgAddAnnouce {
  width: 503px;
  height: 233px;
  margin-right: 5px;
  border-radius: 5px;
  border-style: dashed;
  border-width: 2px;
  position: relative;
  opacity: 1;
}

.imgAnnouce {
  width: 503px;
  height: 233px;
  margin-right: 5px;
  border-radius: 5px;
  border-width: 2px;
  position: relative;
  opacity: 1;
}

.imgAddAnnouce:hover {
  background-color: #00000029;
}

/* end new css */

.navbar-custom .nav-link {
  color: #707070;
}

.imgLogo {
  width: 100%;
}

.main-sidebar {
  /* background: #ffffff; */
}

.kpiObjShow {
  min-height: 31px;
  border: 1px solid #ddd;
  border-radius:3px;
  padding: 4px 8px;
  max-width: 400px;
  min-width: 200px;
}

.kpiObjShowDisabled {
  background-color: #e9ecef;
  opacity: 1
}

.formField2 {
  border-top: none;
  border-right: none;
  border-bottom: 1px dotted #000 !important;
  border-left: none;
  height: 21.5px !important;
}

.requestForm {
  margin: auto;
  width: 800px;
}

.requestForm div {
  /* padding: 5px 0px; */
}

.vt {
  vertical-align: -5px;
}

.help-block {
  color: #f40000;
  font-size:0.75rem;
}

.success-block {
  color: #4dd100;
  font-size:0.75rem;
}

.howto {
  color: #bbb;
  display: none;
}

.popover-body {
    font-family: 'future';
    font-size: 0.75rem;
}

.dropdown-item.disabled{
  color:#bbb !important;
}

.maroon {
 color: #ab1111;
}

.purple {
 color: #690d59;
}

.hiddenField {
  display: none;
}

.main-sidebar::-webkit-scrollbar {
    display: none;
}

.fontB {
  font-weight: 600;
}

/* dash board */
.bg-aqua, .callout.callout-info, .alert-info, .label-info, .modal-info .modal-body {
  background-color: #00c0ef !important;
}
.bg-green, .callout.callout-success, .alert-success, .label-success, .modal-success .modal-body {
  background-color: #00a65a !important;
}
.bg-yellow, .callout.callout-warning, .alert-warning, .label-warning, .modal-warning .modal-body {
  background-color: #f39c12 !important;
}
.small-box {
  margin-bottom: 30px;
}
.small-box h3, .small-box p {
  z-index: 5;
  /* color: white; */
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 10px 0;
  white-space: nowrap;
  padding: 0;
}
.small-box h3 {
  /* color: white; */
  font-size: 38px;
  font-weight: bold;
  margin: 0 0 10px 0;
  white-space: nowrap;
  padding: 0;
}
.small-box>.inner {
  padding: 10px;
}
.small-box .icon {
  -webkit-transition: all .3s linear;
  -o-transition: all .3s linear;
  transition: all .3s linear;
  position: absolute;
  top: -10px;
  right: 10px;
  z-index: 0;
  font-size: 90px;
  color: rgba(0,0,0,0.15);
  margin-right: 15px;
}
.fa {
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font: normal normal normal normal normal normal normal 1 FontAwesome;
}
.small-box:hover .icon {
  margin-right: 2px;
}

.nav-item {
  color: #36499C;
  font-size: 16px;
}

.navbar {
  -webkit-box-shadow: 0px 10px 50px 0px rgba(189,189,189,1);
  -moz-box-shadow: 0px 10px 50px 0px rgba(189,189,189,1);
  box-shadow: 0px 10px 50px 0px rgba(189,189,189,1);
}

.infoDetail {
  font-size: 12px;
  margin-bottom: 2px;
}

.studentFilename {
  cursor: pointer;
  background-color: #F3F3F4 !important;
}

.list-unstyled , .form-group{
  margin-bottom: 0px !important;
}

.container {
  margin-top: 40px;
}

@media screen and (max-width:576px) {
  .nav-logo{
    margin: 0px !important;
  }
}

.remove , .edit {
  cursor: pointer;
}

.table-condensed th {
  color: #000000 !important;
}

.table-condensed tr td {
  padding-top: 2px !important;
  font-size:16px;
}

.img-button {
  width: 18px;
  margin-right: 12px;
}