/*!
 * Bootstrap v5.2.0-beta1 (https://getbootstrap.com/)
 * Copyright 2011-2022 The Bootstrap Authors
 * Copyright 2011-2022 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
/*
@font-face {
    font-family: "DB Helvethaica";
    src: local("Trickster"), url("trickster-COLRv1.otf") format("opentype") tech(color-COLRv1), url("trickster-outline.otf") format("opentype"), url("trickster-outline.woff") format("woff");
}*/

@font-face {
    font-family: 'DB Helvethaica';
    src: url('../fonts/font_mahidol/db helvethaica x cond v3.2.ttf') format('truetype');
}

:root {
    --bs-font-sans-serif: 'DB Helvethaica';
    --bs-font-monospace: 'DB Helvethaica';
    --bs-gradient: linear-gradient(180deg,hsla(0,0%,100%,.15),hsla(0,0%,100%,0));
}

*, :after, :before {
    box-sizing: border-box
}

@media (prefers-reduced-motion:no-preference) {
    :root {
        scroll-behavior: smooth
    }
}

body {
    margin: 0;
    font-family: var(--bs-body-font-family);
    font-size: 24px;
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    color: var(--bs-body-color);
    text-align: var(--bs-body-text-align);
    background-color: var(--bs-body-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0)
}


.btn {
    font-size: 22px;
}

.li {
    font-size: 22px;
}

.dropdown-item {
    font-size: 22px;
}

.label {
    font-size: 22px;
}

.select {
    font-size: 22px;
}

.option {
    font-size: 22px;
}

.form-select {
    font-size: 22px;
}

.p {
    font-size: 22px;
}
.input {
    font-size: 22px;
}
.form-control {
    font-size: 22px;
}
.datepicker {
    font-size: 22px;
}

.bg-gradient-primary {
    background-image: linear-gradient(310deg,#5e72e4,#825ee4)
}

.bg-gradient-secondary {
    background-image: linear-gradient(310deg,#627594,#a8b8d8)
}

.bg-gradient-success {
    background-image: linear-gradient(310deg,#2dce89,#2dcecc)
}

.bg-gradient-info {
    background-image: linear-gradient(310deg,#1171ef,#11cdef)
}

.bg-gradient-warning {
    background-image: linear-gradient(310deg,#fb6340,#fbb140)
}

.bg-gradient-danger {
    background-image: linear-gradient(310deg,#f5365c,#f56036)
}

.bg-gradient-light {
    background-image: linear-gradient(310deg,#ced4da,#ebeff4)
}

.bg-gradient-dark {
    background-image: linear-gradient(310deg,#212229,#212529)
}

.bg-gradient-faded-primary {
    background-image: radial-gradient(370px circle at 80% 50%,rgba(94,114,228,.6) 0,#324cdd 100%)
}

.bg-gradient-faded-secondary {
    background-image: radial-gradient(370px circle at 80% 50%,rgba(131,146,171,.6) 0,#657796 100%)
}

.bg-gradient-faded-success {
    background-image: radial-gradient(370px circle at 80% 50%,rgba(45,206,137,.6) 0,#24a46d 100%)
}

.bg-gradient-faded-info {
    background-image: radial-gradient(370px circle at 80% 50%,rgba(17,205,239,.6) 0,#0da5c0 100%)
}

.bg-gradient-faded-warning {
    background-image: radial-gradient(370px circle at 80% 50%,rgba(251,99,64,.6) 0,#fa3a0e 100%)
}

.bg-gradient-faded-danger {
    background-image: radial-gradient(370px circle at 80% 50%,rgba(245,54,92,.6) 0,#ec0c38 100%)
}

.bg-gradient-faded-light {
    background-image: radial-gradient(370px circle at 80% 50%,rgba(233,236,239,.6) 0,#cbd3da 100%)
}

.bg-gradient-faded-dark {
    background-image: radial-gradient(370px circle at 80% 50%,rgba(52,71,103,.6) 0,#233045 100%)
}

.bg-gradient-faded-white {
    background-image: radial-gradient(370px circle at 80% 50%,hsla(0,0%,100%,.6) 0,#e6e6e6 100%)
}

.bg-gradient-faded-primary-vertical {
    background-image: radial-gradient(200px circle at 50% 70%,rgba(94,114,228,.3) 0,#5e72e4 100%)
}

.bg-gradient-faded-secondary-vertical {
    background-image: radial-gradient(200px circle at 50% 70%,rgba(131,146,171,.3) 0,#8392ab 100%)
}

.bg-gradient-faded-success-vertical {
    background-image: radial-gradient(200px circle at 50% 70%,rgba(45,206,137,.3) 0,#2dce89 100%)
}

.bg-gradient-faded-info-vertical {
    background-image: radial-gradient(200px circle at 50% 70%,rgba(17,205,239,.3) 0,#11cdef 100%)
}

.bg-gradient-faded-warning-vertical {
    background-image: radial-gradient(200px circle at 50% 70%,rgba(251,99,64,.3) 0,#fb6340 100%)
}

.bg-gradient-faded-danger-vertical {
    background-image: radial-gradient(200px circle at 50% 70%,rgba(245,54,92,.3) 0,#f5365c 100%)
}

.bg-gradient-faded-light-vertical {
    background-image: radial-gradient(200px circle at 50% 70%,rgba(233,236,239,.3) 0,#e9ecef 100%)
}

.bg-gradient-faded-dark-vertical {
    background-image: radial-gradient(200px circle at 50% 70%,rgba(52,71,103,.3) 0,#344767 100%)
}

.bg-gradient-faded-white-vertical {
    background-image: radial-gradient(200px circle at 50% 70%,hsla(0,0%,100%,.3) 0,#fff 100%)
}

.icon-shape {
    width: 48px;
    height: 48px;
    background-position: 50%;
    border-radius: .75rem
}

    .icon-shape i {
        color: #fff;
        opacity: .8;
        top: 14px;
        position: relative
    }

.icon-xxs {
    width: 20px;
    height: 20px
}

    .icon-xxs i {
        top: -5px;
        font-size: .5rem
    }

.icon-xs {
    width: 24px;
    height: 24px
}

    .icon-xs i {
        top: -3px;
        font-size: .5rem
    }

.icon-sm {
    width: 32px;
    height: 32px
}

    .icon-sm i {
        top: 3px;
        font-size: .65rem
    }

.icon-md {
    width: 48px;
    height: 48px
}

    .icon-md i {
        top: 12px;
        font-size: .875rem
    }

    .icon-md.icon-striped {
        background-position-x: 85px;
        background-position-y: 85px
    }

        .icon-md.icon-striped i {
            top: 11%;
            margin-left: -10px;
            font-size: .875rem
        }

.icon-lg {
    width: 64px;
    height: 64px
}

    .icon-lg i {
        top: 20px;
        font-size: 1.25rem
    }

    .icon-lg.icon-striped {
        background-position-x: 111px;
        background-position-y: 111px
    }

        .icon-lg.icon-striped i {
            top: 21%;
            margin-left: -15px
        }

.icon-xl {
    width: 100px;
    height: 100px;
    border-radius: .75rem
}

    .icon-xl i {
        top: 33px;
        font-size: 2.2rem
    }

    .icon-xl.icon-striped {
        background-position-x: 80px; 
        background-position-y: 80px
    }

    .icon-xl.icon-striped i {
        top: 30%;
        margin-left: -15px
    }


.highcharts-figure,
.highcharts-data-table table {
    min-width: 310px;
    max-width: 800px;
    margin: 1em auto;
    font-family: var(--bs-body-font-family);
    font-size: 22px;
}
 
#container {
    height: 400px;
}

.highcharts-data-table table {
    font-family: var(--bs-body-font-family);
    font-size: 22px;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}