body {
    font-family: 'Noto Sans Thai', sans-serif;
}

h1,h2,h3,h4,h5,h6,p {
    font-family: 'Noto Sans Thai', sans-serif;
}

a {
    color: #022d40;
}

a:hover {
    color: #011a25;
}

.accent1 {
    color: #022d40;
}

.accent1:hover {
    color: #011a25;
}

.accent2 {
    color: #0cb4ce;
}

.accent2:hover {
    color: #0a9ab2;
}

.whiteText{
    color: #ffffff;
}

.btn-round {
    border-radius: 1000px;
}

.btn-default{
    background-color: #022d40;
    color: #ffffff;
    border-color: #022d40;
}

.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
    background-color: #011a25;
    color: #ffffff;
    border-color: #011a25;
}

.btn-default2{
    background-color: #0cb4ce;
    color: #ffffff;
    border-color: #0cb4ce;
}

.btn-default2:hover, .btn-default2:focus, .btn-default2:active, .btn-default2.active, .open .dropdown-toggle.btn-default2 {
    background-color: #0a93aa;
    color: #ffffff;
    border-color: #0a93aa;
}

.btn-outline-default{
    background-color: transparent;
    color: #022d40;
    border-color: #022d40 !important;
}

.btn-outline-default:hover, .btn-outline-default:focus, .btn-outline-default:active, .btn-outline-default.active, .open .dropdown-toggle.btn-outline-default {
    background-color: transparent;
    color: #011a25;
    border-color: #011a25 !important;
}

.btn-outline-default2{
    background-color: transparent;
    color: #888888;
    border-color: #888888 !important;
}

.btn-outline-default2:hover, .btn-outline-default2:focus, .btn-outline-default2:active, .btn-outline-default2.active, .open .dropdown-toggle.btn-outline-default2 {
    background-color: transparent;
    color: #022d40;
    border-color: #022d40 !important;
}

.table td, .table th {
    border-bottom: 1px solid #dee2e6;
    padding: 10px 5px;
    vertical-align: middle;
}

.status_td {
    vertical-align: middle !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.table th {
    background-color: #eee;
}

.part {
    border-top: 4px solid #022d40;
    background-color: #fafafa;
}

.badge {
    font-weight: normal !important;
    cursor: pointer;
    border: 1px solid transparent;
}

.dropdown {
    cursor: pointer;
    color: #888888;
}

.dropdown:hover {
    cursor: pointer;
    color: #022d40;
}

.dropdown-item {
    cursor: pointer;
    padding: .4rem !important;
}

.dropdown-menu a:active {
    color: #212529 !important;
    background-color: #eeeeee !important;
}

.aspect-ratio-box {
    position: relative;
}

/* Create a pseudo element that uses padding-bottom to take up space */
.aspect-ratio-box::after {
    display: block;
    content: '';
    /* 16:9 aspect ratio */
    padding-bottom: 56.25%;
}

/* Image is positioned absolutely relative to the parent element */
.aspect-ratio-box img {
    /* Image should match parent box size */
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.courseCard:hover {
    transform: translate(0,-4px);
    box-shadow: 0 4px 8px lightgrey;
    cursor: pointer;
}

.tag {
    position: absolute;
    right: 8px;
    top: 8px;
    background-color: rgba(255, 0, 0);
    color: white;
    padding: 1px 12px;
    border-radius: 1000px;
}

.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}