/* Hyperstudio class*/
.shadow-dark {
    box-shadow: 0px 6px 12px rgba(46, 56, 77, 0.3);
}
.radius-border {
    border-radius: 1rem !important;
}
.radius-border-6 {
    border-radius: 0.6rem !important;
}
.radius-border-2 {
    border-radius: 0.2rem !important;
}

.hyper-bg-white {
    background-color: #000000ba !important;
    color: #ffffff;
}
.hyper-bg-dark {
    background-color: #000000ba !important;
    color: #ffffff;
}

.hyper-btn-perple {
    font-family: "Sarabun";
    transition: all 0.25s;
    color: #6e00b3;
    border: 1.5px solid #6e00b3;
    font-weight: lighter;
}

.hyper-btn-perple:hover {
    transition: all 0.25s;
    color: #fff;
    background-color: #6e00b3;
    box-shadow: 0 10px 12px 0 rgba(110, 0, 179, 0.2), 0 6px 12px 0 rgba(110, 0, 179, 0.19);
}

.hyper-btn-perple-active {
    font-family: "Sarabun";
    transition: all 0.25s;
    color: #fff !important;
    background-color: #6e00b3;
    box-shadow: 0 10px 12px 0 rgba(110, 0, 179, 0.2), 0 6px 12px 0 rgba(110, 0, 179, 0.19);
}

.hyper-btn-dark {
    font-family: "Sarabun";
    transition: all 0.25s;
    color: #2e384d;
    border: 1.5px solid #2e384d;
    font-weight: lighter;
}

.hyper-btn-dark:hover {
    transition: all 0.25s;
    color: #fff;
    background-color: #2e384d;
    box-shadow: 0 10px 12px 0 rgba(46, 56, 77, 0.2), 0 6px 12px 0 rgba(46, 56, 77, 0.19);
}

.hyper-btn-dark-active {
    font-family: "Sarabun";
    transition: all 0.25s;
    color: #fff !important;
    background-color: #2e384d;
    box-shadow: 0 10px 12px 0 rgba(46, 56, 77, 0.2), 0 6px 12px 0 rgba(46, 56, 77, 0.19);
}

.hyper-btn-success {
    font-family: "Sarabun";
    transition: all 0.25s;
    color: #58b368;
    border: 1.5px solid #58b368;
    font-weight: lighter;
}

.hyper-btn-success:hover {
    transition: all 0.25s;
    color: #fff;
    background-color: #58b368;
    box-shadow: 0 10px 12px 0 rgba(88, 179, 104, 0.2), 0 6px 12px 0 rgba(88, 179, 104, 0.19);
}

.hyper-btn-success-active {
    font-family: "Sarabun";
    transition: all 0.25s;
    color: #fff !important;
    background-color: #58b368;
    box-shadow: 0 10px 12px 0 rgba(88, 179, 104, 0.2), 0 6px 12px 0 rgba(88, 179, 104, 0.19);
}

.hyper-btn-orange {
    font-family: "Sarabun";
    transition: all 0.25s;
    color: #ff9400;
    border: 1.5px solid #ff9400;
    font-weight: lighter;
}

.hyper-btn-orange:hover {
    transition: all 0.25s;
    color: #fff;
    background-color: #ff9400;
    box-shadow: 0 10px 12px 0 rgba(255, 148, 0, 0.2), 0 6px 12px 0 rgba(255, 148, 0, 0.19);
}

.hyper-btn-orange-active {
    font-family: "Sarabun";
    transition: all 0.25s;
    color: #fff !important;
    background-color: #ff9400;
    box-shadow: 0 10px 12px 0 rgba(255, 148, 0, 0.2), 0 6px 12px 0 rgba(255, 148, 0, 0.19);
}

.hyper-btn-primary {
    font-family: "Sarabun";
    transition: all 0.25s;
    color: #0049b3;
    border: 1.5px solid #0049b3;
    font-weight: lighter;
}

.hyper-btn-primary:hover {
    transition: all 0.25s;
    color: #fff;
    background-color: #0049b3;
    box-shadow: 0 10px 12px 0 rgba(0, 73, 179, 0.2), 0 6px 12px 0 rgba(0, 73, 179, 0.19);
}

.hyper-btn-primary-active {
    font-family: "Sarabun";
    transition: all 0.25s;
    color: #fff !important;
    background-color: #0049b3;
    box-shadow: 0 10px 12px 0 rgba(0, 73, 179, 0.2), 0 6px 12px 0 rgba(0, 73, 179, 0.19);
}

.hyper-btn-danger {
    font-family: "Sarabun";
    transition: all 0.25s;
    color: #ff0039 !important;
    border: 1.5px solid #ff0039 !important;
    font-weight: lighter;
}

.hyper-btn-danger:hover {
    transition: all 0.25s;
    color: #fff !important;
    background-color: #ff0039 !important;
    box-shadow: 0 10px 12px 0 rgba(255, 0, 57, 0.2), 0 6px 12px 0 rgba(255, 0, 57, 0.19);
}

.hyper-btn-danger-active {
    font-family: "Sarabun";
    transition: all 0.25s;
    color: #fff !important;
    background-color: #ff0039 !important;
    box-shadow: 0 10px 12px 0 rgba(255, 0, 57, 0.2), 0 6px 12px 0 rgba(255, 0, 57, 0.19);
}

.hyper-btn-pink {
    font-family: "Sarabun";
    transition: all 0.25s;
    color: #f5487f;
    border: 1.5px solid #f5487f;
    font-weight: lighter;
}

.hyper-btn-pink:hover {
    transition: all 0.25s;
    color: #fff;
    background-color: #f5487f;
    box-shadow: 0 10px 12px 0 rgba(245, 72, 127, 0.2), 0 6px 12px 0 rgba(245, 72, 127, 0.19);
}

.hyper-btn-pink-active {
    font-family: "Sarabun";
    transition: all 0.25s;
    color: #fff !important;
    background-color: #f5487f;
    box-shadow: 0 10px 12px 0 rgba(245, 72, 127, 0.2), 0 6px 12px 0 rgba(245, 72, 127, 0.19);
}

.hyper-btn-buy {
    font-family: "Sarabun";
    transition: all 0.25s;
    color: #fff;
    background-color: #58b368;
    font-weight: lighter;
}

.hyper-btn-buy:hover {
    transition: all 0.25s;
    color: #fff;
    background-color: #4b9959;
    box-shadow: 0 10px 12px 0 rgba(88, 179, 104, 0.2), 0 6px 12px 0 rgba(88, 179, 104, 0.19);
}

.hyper-btn-info {
    font-family: "Sarabun";
    transition: all 0.25s;
    color: #fff;
    background-color: #2e384d;
    font-weight: lighter;
}

.hyper-btn-info:hover {
    transition: all 0.25s;
    color: #fff;
    background-color: #232b3b;
    box-shadow: 0 10px 12px 0 rgba(46, 56, 77, 0.2), 0 6px 12px 0 rgba(46, 56, 77, 0.19);
}

.hyper-btn-notoutline-danger {
    font-family: "Sarabun";
    transition: all 0.25s;
    color: #fff !important;
    border: 1.5px solid #ff0039 !important;
    background-color: #ff0039 !important;
    font-weight: lighter;
}

.hyper-btn-notoutline-danger:hover {
    transition: all 0.25s;
    color: #fff !important;
    background-color: #de0030 !important;
    box-shadow: 0 10px 12px 0 rgba(255, 0, 57, 0.2), 0 6px 12px 0 rgba(255, 0, 57, 0.19);
}

.hyper-btn-notoutline-danger:focus {
    transition: all 0.25s;
    color: #fff !important;
    background-color: #de0030 !important;
    box-shadow: 0 10px 12px 0 rgba(255, 0, 57, 0.2), 0 6px 12px 0 rgba(255, 0, 57, 0.19);
}

.hyper-btn-notoutline-success {
    font-family: "Sarabun";
    transition: all 0.25s;
    color: #fff;
    border: 1.5px solid #36a558;
    background-color: #36a558;
    font-weight: lighter;
}

.hyper-btn-notoutline-success:hover {
    transition: all 0.25s;
    color: #fff;
    background-color: #31944f;
    box-shadow: 0 10px 12px 0 rgba(88, 179, 104, 0.2), 0 6px 12px 0 rgba(88, 179, 104, 0.19);
}

.hyper-btn-notoutline-success:not([disabled]):hover {
    transition: all 0.25s;
    color: #fff;
    background-color: #31944f !important;
    box-shadow: 0 10px 12px 0 rgba(88, 179, 104, 0.2), 0 6px 12px 0 rgba(88, 179, 104, 0.19);
}

.hyper-card {
    transition: all 0.25s;
    border: 3px solid rgba(0, 0, 0, 0);
}
.hyper-card:hover {
    border: 3px solid #2e384d;
}

.hyper-form-control {
    font-family: Sarabun;
    color: #2e384d;
    background-color: #fff;
    background-clip: padding-box;
    border: 1.5px solid rgba(46, 56, 77, 0.3);
}

.hyper-form-control:focus {
    color: #2e384d;
    background-color: #fff;
    border: 1.5px solid rgba(46, 56, 77, 1);
    outline: 0;
    box-shadow: 0 0 0 1.5px rgba(0, 73, 179, 0);
}

.hyper-form-control:disabled {
    font-family: Sarabun;
    color: #2e384d;
    background-color: #20293c;
    background-clip: padding-box;
    border: 1px solid #3d4c6a;
}

/* Bootstrap edit class*/
body {
    font-family: "Sarabun" !important;
}

.font-th {
  font-family: 'Sarabun', sans-serif;
}

.font-en {
  font-family: 'Fjalla One', sans-serif;
}

.navbar-light {
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
}
.btn {
    border-radius: 0.2rem;
}
a {
    text-decoration: none !important;
    color: #4087de;
}
a:hover {
    text-decoration: none !important;
    color: #0049b3;
}
.page-link {
    position: relative;
    display: block;
    padding: 0.5rem 0.75rem;
    margin-left: -1px;
    line-height: 1.25;
    color: #2e384d;
    background-color: #fff;
    border: 1px solid #dee2e6;
}

.page-link:hover {
    z-index: 2;
    color: #fff;
    text-decoration: none;
    background-color: #2e384d;
    border-color: #2e384d;
}

.page-link:focus {
    z-index: 3;
    outline: 0;
    color: #fff;
    background-color: #2e384d;
    box-shadow: 0 0 0 0rem rgba(0, 123, 255, 0.25);
    border-color: #2e384d;
}

.page-link.active {
    z-index: 3;
    outline: 0;
    color: #fff;
    background-color: #2e384d;
    box-shadow: 0 0 0 0rem rgba(0, 123, 255, 0.25);
    border-color: #2e384d;
}

/* .swal-button:not([disabled]):hover { */
/* background-color: initial; */
/* } */