/* =============== Colors =============== */

:root {
    --brand-yellow: #f6b21d;
    --brand-navy: #095896;
    --brand-teal: #a7e8db;
    --brand-dark-teal: #28a094;
    --brand-light-navy: #0c76c7;
    --text-highlight: #143968;
    --text-default: #646464;
}

/* =============== End of Colors =============== */

/* =============== Generic Elements =============== */

* {
    font-family: 'Kanit', sans-serif!important;
    color: var(--text-default);
}

html {
    scroll-behavior: smooth
}

p {
    font-size: 18px;
}

label {
    font-size: 18px;
}

body {
    max-width: 100vw;
    min-height: 100vh;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.navbar-item img {
    max-height: 2.3rem;
    margin: 5px;
}
#app {
    min-height: 46vh;
}

.ads-container {
    max-width: 100%!important;
}

/* =============== End of Generic Elements =============== */

/* =============== Helper Classes =============== */
.mono-font {
    font-family: 'Chivo Mono', monospace!important;
}

.sticky {
    position: sticky;
    top: 0;
}
.empty-text {
    color: rgba(0,0,0,0.2);
}

.text-no-select {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

.full-height {
    min-height: 80vh;
}

/* Replace Bulma */
.menu-list a.is-active {
    background-color: var(--brand-yellow);
}
.button.is-info {
    background-color: var(--brand-navy);
}
.button.is-info:hover {
    background-color: var(--brand-light-navy);
}

.highlight-text {
    color: var(--text-highlight);
}

a {
    color: var(--brand-light-navy);
}
/* =============== End of Helper Classes =============== */
/* =============== Form =============== */

.form-section {
    background-color: white;
    border-radius: 6px;
    border: 1px solid rgb(221, 221, 221);
    margin: 20px auto;
    padding: 25px;
    text-align: center;
}

.form-section-title {
    padding: 5px;
    border-radius: 5px;
    background-color: rgb(233, 233, 233);
    color: gray;
}

.section-disable {
    background-color: #f1f1f1;
    opacity: 40%;
}

input[type="text"], input[type="number"], select {
    color: var(--brand-navy)!important;
    padding: 10px;
    margin:auto;
    font-weight: bold;
    max-width: 15em!important;
}
.inside-input-box {
    position: absolute;
    margin-left: -60px;
    margin-top: 10px;
}

input[type="radio"] {
    width: 20px;
    height: 20px;
    margin: 10px;
}
input[type="radio"]::before {
    position: relative;
    display: block;
    content: "";
    background-color: white;
    width: 22px;
    height: 22px;
    margin: -1px -1px;
    border: 1px solid grey;
    border-radius: 50%;
    box-shadow: 0px 0px 1px grey;
    cursor: pointer;
}
input[type="radio"] ~ label, input[type="checkbox"] ~ label {
    cursor: pointer;
}
input[type="radio"]:checked::before {
    border: 6px solid var(--brand-yellow);
    background: white;
}
input[type="radio"]:checked + label, input[type="checkbox"]:checked + label {
    font-weight: bold;
    color: var(--brand-navy);
}

input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin: 6px;
}

/* input[type="checkbox"]:checked::before {
    position: relative;
    display: block;
    content: "";
    background-color: var(--brand-yellow);
    width: 19px;
    height: 19px;
    border-radius: 3px;
    margin: -1px -1px;
    border: 1px solid rgb(158, 158, 158);
    cursor: pointer;
}

input[type="checkbox"]:checked::after {
    position: relative;
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    border-width: 5px;
    border-color: black;
    z-index: 8;
} */
input[type="checkbox"] { 
    filter: opacity(0.6);
  }

input[type="checkbox"]:checked { 
    filter: hue-rotate(192deg) brightness(1.9);
  }

/* =============== End of Form =============== */

/* =============== Slider =============== */

.slider {
    width: 90%;
    margin-top: 10px;
    opacity: 0.5;
    -webkit-appearance: none;
}
.slider:hover {
    opacity: 1;
}

.slider:focus {
    outline: none;
}
.slider::-webkit-slider-runnable-track  {
    height: 15px;
    cursor: pointer;
    background: var(--brand-yellow);
    border-radius: 25px;
}
.slider::-webkit-slider-thumb {
    box-shadow: 0.2px 0.2px 5.7px rgba(0, 0, 49, 0.43), 0px 0px 0.2px rgba(0, 0, 0, 0.6);
    height: 24px;
    width: 25%;
    border-radius: 50px;
    background: white;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -5px;
}

.slider::-webkit-slider-thumb:active {
    transform: scale(1.12);
  }

.slider::-moz-range-track {
    height: 15px;
    cursor: pointer;
    background: var(--brand-yellow);
    border-radius: 25px;
}
.slider::-moz-range-thumb {
    box-shadow: 0.2px 0.2px 5.7px rgba(0, 0, 49, 0.43), 0px 0px 0.2px rgba(0, 0, 0, 0.6);
    height: 24px;
    width: 25%;
    border-radius: 50px;
    background: white;
    cursor: pointer;
}
/* =============== End of Slider =============== */

/* ================== Custom Option Cards =================*/

.option-card {
    width: 230px;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.2s;
    margin: 12px auto;
    outline: 0px solid var(--brand-yellow);
  }

  .option-card:active {
    transform: scale(1.08);
    outline: 2px solid var(--brand-yellow);
  }

  .option-card p {
    font-size: 16px;
    padding-bottom: 15px;
  }

  .option-card input[type='radio'] {
    position: absolute;
    top: 5px;
    left: 5px;
  }

  .option-card input[type='radio']:checked ~ label * {
    color: var(--brand-navy);
  }

/* ======================== Responsive ======================== */ 

#mainMenu {
    transition: 0.4s;
}
@media only screen 
  and (max-device-width: 768px) 
  and (-webkit-min-device-pixel-ratio: 1) {
    #mainMenu {
        height: 0;
        overflow: hidden;
        padding: 0;
    }
    #mainMenu.opened {
        /* height: auto; */
        height: 30.25em;
        padding: 1em;
    }
    .section {
        padding: 12px;
    }
  }

@media only screen 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
    .container.is-fluid {
        padding-left: 0;
        padding-right: 0;
    }
}