.wait {
     display: none;
     position: fixed;
     /* Sit on top of the page content */
     width: 100%;
     /* Full width (cover the whole page) */
     height: 100%;
     /* Full height (cover the whole page) */
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-color: rgba(0, 0, 0, 0.8);
     /* Black background with opacity */
     z-index: 9999;
     /* Specify a stack order in case you're using a different order for other elements */
     cursor: pointer;
     /* Add a pointer on hover */
     color: #ffffff;
}

.loader {
     border: 16px solid #f3f3f3;
     border-radius: 50%;
     border-top: 16px solid #3498db;
     width: 120px;
     height: 120px;
     -webkit-animation: spin 2s linear infinite; /* Safari */
     animation: spin 2s linear infinite;
}

.lds-spinner {
     color: #ffffff;
     /*display: inline-block;
    position: relative; */
     width: 80px;
     height: 80px;
     margin: auto;
     padding-top: 30%;
}

.lds-spinner div {
     transform-origin: 40px 40px;
     animation: lds-spinner 1.2s linear infinite;
}

.lds-spinner div:after {
     content: " ";
     display: block;
     position: absolute;
     top: 3px;
     left: 37px;
     width: 6px;
     height: 18px;
     border-radius: 20%;
     background: #fff;
}

.lds-spinner div:nth-child(1) {
     transform: rotate(0deg);
     animation-delay: -1.1s;
}

.lds-spinner div:nth-child(2) {
     transform: rotate(30deg);
     animation-delay: -1s;
}

.lds-spinner div:nth-child(3) {
     transform: rotate(60deg);
     animation-delay: -0.9s;
}

.lds-spinner div:nth-child(4) {
     transform: rotate(90deg);
     animation-delay: -0.8s;
}

.lds-spinner div:nth-child(5) {
     transform: rotate(120deg);
     animation-delay: -0.7s;
}

.lds-spinner div:nth-child(6) {
     transform: rotate(150deg);
     animation-delay: -0.6s;
}

.lds-spinner div:nth-child(7) {
     transform: rotate(180deg);
     animation-delay: -0.5s;
}

.lds-spinner div:nth-child(8) {
     transform: rotate(210deg);
     animation-delay: -0.4s;
}

.lds-spinner div:nth-child(9) {
     transform: rotate(240deg);
     animation-delay: -0.3s;
}

.lds-spinner div:nth-child(10) {
     transform: rotate(270deg);
     animation-delay: -0.2s;
}

.lds-spinner div:nth-child(11) {
     transform: rotate(300deg);
     animation-delay: -0.1s;
}

.lds-spinner div:nth-child(12) {
     transform: rotate(330deg);
     animation-delay: 0s;
}

@keyframes lds-spinner {
     0% {
          opacity: 1;
     }

     100% {
          opacity: 0;
     }
}

.visible {
     display: block;
     transition: ease-in 2s;
     transition-delay: 3s;
}

.not-visible {
     display: none;
}

.mouse-hover:hover {
     cursor: pointer;
}

.level_4 {
     color: #ff0000;
}

.level_3 {
     color: #fa883e;
}

.level_2 {
     color: #ffff00;
}

.level_1 {
     color: #00ff00;
}

.read_info {
     background-color: #efefff;
     padding: 16px;
     -webkit-box-shadow: inset 0 0 8px 0 rgba(200, 200, 200, 0.5);
     box-shadow: inset 0 0 8px 0 rgba(200, 200, 200, 0.5);
     -webkit-border-radius: 5px 5px 5px 5px;
     border-radius: 5px 5px 5px 5px;
}

.have_bg {
     background-image: url("../images/bg.jpg");
     background-color: #cccccc;
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: center;
}

.login-logo {
     color: #ffffff;
     font-family: "Kanit", sans-serif;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
     -webkit-appearance: none;
     margin: 0;
}

/* Firefox */
input[type="number"] {
     -moz-appearance: textfield;
}

.chapter-list {
     transition-duration: 0.3s;
     transition-timing-function: ease-in;
}
.chapter-list:hover {
     background-color: rgba(161, 137, 250, 0.856);
}
.chapter-active {
     background-color: rgba(160, 247, 120, 0.658) !important;
     color: rgba(87, 69, 69, 1);
}
.card-custom {
     height: 560px;
     margin-bottom: 2rem;
     margin-left: 1rem;
     margin-right: 1rem;
}

.box-overflow {
     overflow-y: scroll;
     height: 120px;
}

.disp-buttom {
     position: absolute;
     bottom: 108px;
}

.course_block {
     height: 591px;
     transition: all 0.5s ease-in-out;
     overflow-x: visible;
     overflow: hidden;
}

.course_block_expand {
     max-height: none;
     height: 1775px;
}

.show_less {
     display: none;
}

.sel_target_group {
     display: block;
}

.font_kanit {
     font-family: "Kanit", sans-serif;
}

.text_couter {
     text-align: right;
     color: #878787;
}

.hide-div {
     display: none;
}

.question {
     width: 100%;
}

.div_counter {
     font-size: 2rem;
}

.mouse_hover:hover {
     cursor: pointer;
}

.img_icon {
     transition: transform 0.4s;
     cursor: pointer;
}
.img_icon:hover {
     transform: scale(1.3);
}

.bg-green {
     background-color: rgba(99, 124, 30, 0.7) !important;
     color: #159105;
     -webkit-backdrop-filter: blur(8px);
     backdrop-filter: blur(8px);
     background-color: rgb(72, 61, 139);
     -webkit-box-shadow: 0 4px 7px -2px rgba(99, 99, 99, 0.4);
     box-shadow: 0 4px 7px -2px rgba(99, 99, 99, 0.4);
     font-family: "Kanit", sans-serif;
     font-size: 1.1em;
}

.bg-footergreen {
     background-color:rgba(164, 205, 50, 0.7) !important;
}

.bg-blue {
     background-color: rgba(4, 125, 206, 0.7) !important;
     color: #159105;
     -webkit-backdrop-filter: blur(8px);
     backdrop-filter: blur(8px);
     background-color: rgb(72, 61, 139);
     -webkit-box-shadow: 0 4px 7px -2px rgba(99, 99, 99, 0.4);
     box-shadow: 0 4px 7px -2px rgba(99, 99, 99, 0.4);
     font-family: "Kanit", sans-serif;
     font-size: 1.1em;
}

.bg-footerblue {
     background-color: rgba(80, 183, 251, 0.7) !important;
}

.bg-pink_purple {
     background-color: rgba(109, 0, 141, 0.7) !important;
     color: #159105;
     -webkit-backdrop-filter: blur(8px);
     backdrop-filter: blur(8px);
     background-color: rgb(72, 61, 139);
     -webkit-box-shadow: 0 4px 7px -2px rgba(99, 99, 99, 0.4);
     box-shadow: 0 4px 7px -2px rgba(99, 99, 99, 0.4);
     font-family: "Kanit", sans-serif;
     font-size: 1.1em;
}

.bg-footerpink_purple {
     background-color: rgba(231, 153, 255, 0.7) !important;
}

.bg-dark {
     -webkit-backdrop-filter: blur(8px);
     backdrop-filter: blur(8px);
     background-color: rgba(0, 0, 0, 0.7) !important;
}

.navbar .nav-link {
     color: rgb(255, 255, 255) !important;
     transition: ease-in 0.3s;
}

.btn-outline-light {
     color: rgba(87, 69, 69, 1) !important;
     color: rgba(255, 240, 255, 1) !important;
}
.btn-outline-light:hover {
     color: rgba(87, 69, 69, 1) !important;
}
.nav-link:hover {
     color: rgb(255, 255, 9) !important;
     text-shadow: 0 0 3px #F3F2FF;
     /* border-bottom: 2px solid #00ff00; */
}

.single_course {
     -webkit-transition: all 0.3s ease 0s;
     -moz-transition: all 0.3s ease 0s;
     -o-transition: all 0.3s ease 0s;
     transition: all 0.3s ease 0s;
}
.single_course .course_head {
     position: relative;
     overflow: hidden;
}
.single_course .course_head img {
     -webkit-transition: all 0.3s ease 0s;
     -moz-transition: all 0.3s ease 0s;
     -o-transition: all 0.3s ease 0s;
     transition: all 0.3s ease 0s;
}
.single_course .price {
     position: absolute;
     top: -34px;
     right: 15px;
     z-index: 2;
     color: #002347;
     display: inline-block;
     height: 65px;
     line-height: 65px;
     width: 65px;
     text-align: center;
     border-radius: 50px;
     background: #fdc632;
     font-family: "Rubik", sans-serif;
     font-weight: 500;
     font-size: 20px;
     -webkit-transition: all 0.3s ease 0s;
     -moz-transition: all 0.3s ease 0s;
     -o-transition: all 0.3s ease 0s;
     transition: all 0.3s ease 0s;
}
.single_course .price img {
     margin-top: -8px;
     -webkit-transition: all 0.3s ease 0s;
     -moz-transition: all 0.3s ease 0s;
     -o-transition: all 0.3s ease 0s;
     transition: all 0.3s ease 0s;
}
.single_course .course_content {
     padding: 30px 26px;
     background: #f9f9ff;
     position: relative;
     -webkit-transition: all 0.3s ease 0s;
     -moz-transition: all 0.3s ease 0s;
     -o-transition: all 0.3s ease 0s;
     transition: all 0.3s ease 0s;
}
.single_course .course_content .tag {
     padding: 2px 21px;
     font-size: 13px;
     color: #fff;
     background: #002347;
     text-transform: uppercase;
}
.single_course .course_content h4 {
     font-size: 20px;
     font-weight: 500;
}
.single_course .course_content h4 a {
     color: #002347;
}
.single_course .course_content p {
     margin: 0;
}
.single_course .course_content .course_meta {
     margin-top: 25px;
}
.single_course .course_content .course_meta .meta_info a {
     color: #002347;
}
.single_course .authr_meta img {
     width: auto !important;
     display: inline-block !important;
}
.single_course .authr_meta span {
     color: #002347;
     font-weight: 500;
}
.single_course:hover {
     box-shadow: 0px 10px 30px rgba(0, 35, 71, 0.9);
     -webkit-box-shadow: 2px 4px 7px -2px rgba(99, 99, 99, 0.4);
     box-shadow: 2px 4px 7px -2px rgba(99, 99, 99, 0.4);
}
.single_course:hover .course_head img {
     -webkit-transform: scale(1.2);
     -moz-transform: scale(1.2);
     -ms-transform: scale(1.2);
     -o-transform: scale(1.2);
     transform: scale(1.2);
}
.single_course:hover .course_content {
     background: #fff;
}
.single_course:hover .price {
     background: #002347;
     color: #fdc632;
}
.single_course:hover h4 a {
     color: #fdc632;
}

.search-text {
     border-radius: 2em;
     border: none;
     padding: 0.2em;

     padding-left: 1.3em;
}

@media (max-width: 991px) {
     .right-contents {
          margin-top: 50px;
     }
}
.right-contents ul {
     padding-left: 0;
}
.right-contents ul li {
     list-style: none;
     background: #f9f9f9;
     padding: 10px 22px;
     margin-bottom: 10px;
}
.right-contents ul li a {
     color: #7b838a;
     text-align: left;
}
.right-contents ul li a p {
     margin-bottom: 0px;
}
.right-contents ul li .or {
     color: #002347;
     font-weight: 500;
}
.right-contents .enroll {
     margin-top: 10px;
     width: 100%;
}
.right-contents .reviews span,
.right-contents .reviews .star {
     width: 31%;
     margin-bottom: 10px;
}
.right-contents .avg-review {
     background: #04091e;
     text-align: center;
     color: #ffffff;
     font-size: 14px;
     font-weight: 600;
     padding: 20px 0px;
}
.right-contents .avg-review span {
     font-size: 18px;
     color: #fdc632;
}
@media (max-width: 991px) {
     .right-contents .avg-review {
          margin-bottom: 20px;
     }
}
@media (max-width: 1024px) {
     .right-contents .single-reviews .thumb {
          margin-right: 10px;
     }
}
.right-contents .single-reviews h5 {
     display: inline-flex;
}
@media (max-width: 1024px) {
     .right-contents .single-reviews h5 {
          display: block;
     }
}
.right-contents .single-reviews h5 .star {
     margin-left: 10px;
}
@media (max-width: 1024px) {
     .right-contents .single-reviews h5 .star {
          margin: 10px 0;
     }
}
.right-contents .feedeback {
     margin-top: 30px;
}
.right-contents .feedeback textarea {
     resize: none;
     height: 130px;
     background: #f9f9ff;
}
.right-contents .feedeback textarea:focus {
     box-shadow: none;
}
.right-contents .star .checked {
     color: #fdc632;
}
.right-contents .comments-area {
     padding: 0;
     border: 0;
     background: transparent;
}
.right-contents .comments-area .star {
     margin-left: 20px;
}

.nav-tabs .nav-item .nav-link a {
     color: #333333;
     font-size: 1rem;
     font: normal;
}

.select2-selection__rendered {
     line-height: 31px !important;
}
.select2-container .select2-selection--single {
     height: 35px !important;
}
.select2-selection__arrow {
     height: 34px !important;
}

.logo {
     border: #ffffff 1px solid;
     border-color: #ffffff;
     -webkit-border-radius: 5px 5px 5px 5px;
     border-radius: 5px 5px 5px 5px;
     padding: 4px;
}
.color-burger {
     color: #ffffff !important;
}

/* 
 .content_wrapper{
      min-height: 500px;
 } 
 */

.img-card {
     object-fit: cover !important;
     width: 100%;
     height: 200px;
     object-position: top center;
}

.course_list {
     background-color: rgb(249, 249, 249);
}

.meeting_list {
     background-color: rgb(249, 249, 249);
}

.text-order {
     font-size: 3rem;
     border: 5px solid rgba(161, 137, 250, 0.856);
     width: 80px;
     height: 80px;
     -moz-border-radius: 40px;
     -webkit-border-radius: 40px;
     border-radius: 40px;
     margin: auto;
}

.img_manual {
     border: 1px solid #ddd;
     border-radius: 4px;
     padding: 5px;
     width: 800px;

     -webkit-box-shadow: 10px 10px 10px -2px rgba(90, 90, 90, 0.2);
     box-shadow: 10px 10px 10px -2px rgba(90, 90, 90, 0.2);
}

body {
     min-height: 1000;
}

.footer {
     position: fixed;
     left: 0;
     bottom: 0;
     width: 100%;
     color: #ffffff;
     text-align: left;
     padding: 8px;
     font-size: 12px;
     -webkit-backdrop-filter: blur(8px);
     backdrop-filter: blur(8px);
     margin-top: 4rem;
}

.tbottom {
     position: absolute;
     bottom: 0;
     text-align: right;
     width: 100%;
}

@media print {
     .pagebreak {
          page-break-before: always;
          margin-top: 7rem;
     } /* page-break-after works, as well */
}