body {
    font-family: 'Noto Sans Thai', sans-serif;
    background-image: url('/images/bg.jpg');
    background-size: 120px 120px;
    background-attachment: fixed;
    background-repeat: repeat;
    margin: 0px;
    padding: 0px;
    font-size: 1.4em;
    overflow: hidden;
}

#vignette {
    position: fixed;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 10000;
    display: none;
}

.skillBox {
    background-color: rgba(0, 0, 0, 0.2);
    width: 420px;
    height: 120px;
    border-radius: 10px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}

.pointer {
    cursor: pointer;
}

.vh100 {
    min-height: 100vh;
}

.loaderBackground {
    position: fixed;
    z-index: 99;
    background-color: black;
    background-image: url('/images/bg.jpg');
    background-size: 120px 120px;
    background-repeat: repeat;
    color: white;
    width: 100vw;
    height: 100vh;
}

.loaderBackground2 {
    position: absolute;
    z-index: 99;
    background-color: rgba(0, 0, 0, 0.6);
    background-repeat: repeat;
    color: white;
    width: 100vw;
    height: 100vh;
    display: none;
    pointer-events: none;
}

.pic-circle {
    border-radius: 50%;
}

#phaserStage {
    width: 100%;
    margin: auto;
    max-height: 100vh;
}

.alphaDialog {
    background-color: #ffffff8f;
    padding: 1em;
    border-radius: 10px;
    width: 100%;
    box-shadow: 2px 2px 20px 0px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 2px 2px 20px 0px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 2px 2px 20px 0px rgba(0, 0, 0, 0.35);
}

.logoImg {
    position: relative;
    width: 250px;
    z-index: 5;
}


.boxWhite {
    background-color: #f5dcc7;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
}

.tokenBox {
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    margin-top: 20px;
    margin-bottom: 10px;
    border: #333 1px solid;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
    word-wrap: break-word;
    font-size: 0.7em;
}

.shadow {
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    opacity: 0.5;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
    opacity: 0.3;
}

::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 10px;
    opacity: 0.5;
}

::-webkit-scrollbar-thumb:hover {
    background: #333;
    opacity: 0.5;
}

.btn-theme {
    background-color: #69340b;
    color: #fff;
}

small {
    font-size: 0.8em;
    line-height: 0.3em;
}

.brokerList {
    width: 200px;
}

.text-theme {
    color: #f2ff82;
}


.btn-theme {
    background: #ba8321;
    padding: 5px 30px 5px 30px;
    border: solid #f2ff82 1px;
    font-weight: bold;
    border-radius: 20px;
    color: #f2ff82;
}

.btn-theme:hover {
    background: #d39325;
    color: #f2ff82;
    border: solid #f9ffc8 1px;
}

.btn-theme-cancel {
    background: #818181;
    padding: 5px 30px 5px 30px;
    border: solid #ffffff 1px;
    font-weight: bold;
    border-radius: 20px;
    color: #ffffff;
}


.account-box {
    width: 100%;
    background-color: #fff4e3;
    border-radius: 10px;
    padding: 20px;
    min-height: 100px;
    box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
}

.font-larger {
    font-size: 1.1em;
}

.font-input-larger {
    font-size: 0.9em;
}

.addAccountBox {
    width: 100%;
    padding: 20px;
    margin-top: 20px;
    border: #bd8a27 3px dashed;
    border-radius: 20px;
    background-color: rgba(186, 131, 33, 0.2);
    color: #65794b;
    font-weight: bold;
    text-align: center;
}

.custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    border-color: #ba8321;
    background-color: #ba8321;
}

.presetModal {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    z-index: 999;
    position: fixed;
    top: 0px;
    left: 0px;
}

.halloweenRequireBox {
    backdrop-filter: blur(10px);
}

.presetModal .modalGroup {
    width: 90vw;
}

.presetModal .presetsBody {
    background-image: url('/images/presetsBody.png');
    background-size: 100% 100%;
    min-height: 120px;
    margin-top: -5px;
}

.presetModal .presetsFooter {
    margin-top: -5px;
}

.presetsBody input {
    background-color: #ffdfbf;
    border-radius: 20px;
}

.presetsBody textarea {
    background-color: #ffdfbf;
    min-height: 150px;
    border-radius: 20px;
}

.presetsFooter .ctaContainer {
    margin-top: -50px;
}

#presetEditor {
    font-size: 0.6em;
}

.presetsBodyEdit {
    background-image: url('/images/presetsBody.png');
    background-attachment: fixed;
    background-size: 100% 100%;
    max-height: 580px;
    margin-top: -5px;
    overflow: auto;
}

#presetEditor input {
    background-color: #ffdfbf;
    border-radius: 25px;
    font-size: 1em;
    height: 2.2em;
}

#presetEditor textarea {
    background-color: #ffdfbf;
    height: 50px;
    border-radius: 15px;
    font-size: 1em;
}

#presetEditor label {
    padding: 0px;
    margin: 5px 0px 0px 0px;
}

#presetEditor .form-group {
    margin-bottom: 0px;
}

#presetEditor td {
    align-content: center;
    padding: 5px 5px 5px 5px;
}

#presetEditor th {
    text-align: center;
    align-content: center;
    padding: 5px 5px 5px 5px;
    background-color: #69340b;
    color: #fff;
}

#presetEditor .custom-control-label {
    padding-top: 3px;
}

#presetEditor .custom-switch {
    margin-top: -5px;
    margin-bottom: 5px;
}

#presetViewer {
    font-size: 1em;
}

#presetViewer th {
    text-align: center;
    align-content: center;
    padding: 12px 5px 12px 5px;
    background-color: #69340b;
    color: #fff;
}

#presetViewer td {
    padding: auto;
    align-items: center;
    vertical-align: center;
    line-height: 1.2em;
}

.select2-container--default .select2-selection--multiple .select2-search__field {
    height: 10px !important;
    ;
}

.select2-container--default .select2-selection--multiple {
    height: 80px !important;
    overflow-y: auto;
}

.custom-select2-multiple .select2-selection--multiple {
    height: 10px !important;
    padding: 6px 5px;
}

.select2-results__options {
    font-size: 0.8em;
}

.presetNameDiv.active {
    color: #f2ff82 !important;
}

.presetNameDiv.active::after {
    font-family: 'Roboto', 'Font Awesome 5 Free';
    content: " \f058  (In use)";
    font-size: 0.8em;
    color: #f2ff82;
}

.characterLabelDiv.active {
    color: #f2ff82 !important;
}

.characterLabelDiv.active::after {
    font-family: 'Roboto', 'Font Awesome 5 Free';
    content: " \f058 ";
    color: #f2ff82;
}

#websocketStatus {
    color: #fff;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(2px);
    z-index: 9999;
    font-size: 0.8em;
}

.profileWidget {
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px #fff solid;
    border-radius: 10px;
    width: 200px;
    backdrop-filter: blur(10px);
}

#imgShowUp {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(30px);
    z-index: 10001;
}

.rebateModal {
    position: relative;
    width: 380px;
}

.rebateModalBody {
    background-image: url('/images/rebateModalBody.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    max-height: 60vh;
    overflow-y: auto;
    padding: 15px 20px 15px 20px;
}

.cuteFont {
    font-family: 'cute_dinoregular';
    font-size: 15px;
}

.font-theme {
    color: #bd8a27;
    text-shadow: rgb(242, 255, 130) 3px 0px 0px, rgb(242, 255, 130) 2.83487px 0.981584px 0px, rgb(242, 255, 130) 2.35766px 1.85511px 0px, rgb(242, 255, 130) 1.62091px 2.52441px 0px, rgb(242, 255, 130) 0.705713px 2.91581px 0px, rgb(242, 255, 130) -0.287171px 2.98622px 0px, rgb(242, 255, 130) -1.24844px 2.72789px 0px, rgb(242, 255, 130) -2.07227px 2.16926px 0px, rgb(242, 255, 130) -2.66798px 1.37182px 0px, rgb(242, 255, 130) -2.96998px 0.42336px 0px, rgb(242, 255, 130) -2.94502px -0.571704px 0px, rgb(242, 255, 130) -2.59586px -1.50383px 0px, rgb(242, 255, 130) -1.96093px -2.27041px 0px, rgb(242, 255, 130) -1.11013px -2.78704px 0px, rgb(242, 255, 130) -0.137119px -2.99686px 0px, rgb(242, 255, 130) 0.850987px -2.87677px 0px, rgb(242, 255, 130) 1.74541px -2.43999px 0px, rgb(242, 255, 130) 2.44769px -1.73459px 0px, rgb(242, 255, 130) 2.88051px -0.838247px 0px;
}

.select-theme {
    background-color: #601c00;
    border-radius: 30px;
    color: #fff;
    margin-top: 5px;
    border: #f2ff82 solid 2px;
    font-size: 15px;
    padding-left: 15px;
    padding-right: 15px;
}

#rebateTable {
    font-size: 12px;
}

#rebateTable th {
    padding: 2px;
    background-color: #601c00;
    color: #fff;
}

#rebateTable td {
    padding: 2px;
    color: #fff;
}

.taskListItem {
    position: relative;
    background-image: url('/images/taskListBg.webp');
    background-size: 100% 100%;
    background-position: top;
    background-repeat: no-repeat;
    width: 100%;
    min-height: 81px;
    padding: 15px;
    padding-top: 28px !important;
}

.expTag {
    position: absolute;
    left: 20px;
    background-color: #b30000;
    font-size: 11px;
    color: #fff;
    padding: 3px 10px 3px 10px;
    border-radius: 0px 0px 5px 5px;
    z-index: 3;
    transform: translateY(-2px) translateX(4px);
    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.35);
}

.taskListItem h5 {
    font-size: 14px;
    line-height: 20px;
}

.taskListItem h6 {
    font-size: 12px;
}

.thai-text {
    white-space: pre-line;
    word-break: keep-all;
}

div:where(.swal2-container).swal2-center>.swal2-popup {
    background-color: #7a3e03;
    background-image: url("/images/woodBG.webp");
    background-repeat: repeat;
    background-size: 50px;
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.5) inset;
    color: #fff;
    border-radius: 20px;
    border: solid #f2ff82 1px;
}

.swal2-confirm {
    background: #ba8321;
    border: solid #f2ff82 1px;
    border-radius: 20px;
    color: #f2ff82;
}

.swal2-cancel {
    border: solid #f2ff82 1px;
    border-radius: 20px;
}

#getAllTaskBtn:disabled,
#getAllTaskBtn[disabled] {
    opacity: 1;
    background-color: #d1a656;
    border-color: #f6f696;
    color: #f6f696;
}

@media (min-width: 576px) {}


@media (min-width: 768px) {
    .presetModal .modalGroup {
        width: 50vw;
    }
}


@media (min-width: 992px) {
    .logoImg {
        position: relative;
        width: 220px;
        z-index: 5;
    }

    .alphaDialog {
        width: 300px;
    }

    .presetModal .modalGroup {
        width: 50vw;
    }
}


@media (min-width: 1000px) {
    #vignette {
        display: block;
    }
}


@media (min-width: 1400px) {
    .presetModal .modalGroup {
        width: 390px;
    }
}