@font-face {
    font-family: "Nestle";
    src: url("../fonts/nestletexttfvn-book.woff2") format("woff2"), url("../fonts/nestletexttfvn-book.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
@font-face {
    font-family: "Nestle";
    src: url("../fonts/nestletexttfvn-bold.woff2") format("woff2"), url("../fonts/nestletexttfvn-bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
@font-face {
    font-family: "Nestle";
    src: url("../fonts/nestletexttfvn-italic.woff2") format("woff2"), url("../fonts/nestletexttfvn-italic.woff") format("woff");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
  }
@font-face {
    font-family: "Tet";
    src: url("../fonts/betteryesterday-tet.woff2") format("woff2"), url("../fonts/betteryesterday-tet.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  .captcha-wrapper {
            position: fixed;
            width: 90%;
            height: auto;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            z-index:9
        }
        .grecaptcha-badge { visibility: hidden; }

:root {
    --text-light: #fff;
    --text-dark: #424242;
    --text-error: #000;
    --btn-color: #f2de88;
    --input-color: #fefdd1;
    --border-radius-form:1em;
    --holder-color: #fefdd1;
    --border-input:#f2ca8b;
    --link-color:#fdff69;
    --popup-headline: #c5271b;
    --popup-link:#c92a1e;
    --shadow-1: 5px 5px 5px 0 rgba(0, 0, 0, 0.4);
}


/* --- Modal Thể Lệ Chương Trình (Popup) --- */
.popup-headline {color:var(--popup-headline); font-size:1.3em; margin:0.5em auto;}
.popup-desc {font-size:1em; text-align: center; padding-bottom:1em}
.popup-link {color:var(--popup-link); text-decoration: none; font-weight: 700}
.modal-box .modal-pic {display: block;}
.modal-close-btn {position: absolute; top:-50px; right:0; left:0; border: none; cursor: pointer; padding:0; margin:0 auto; max-width:40px; background: none;}
.btn-link {text-decoration: none;}
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 200;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition: all ease-in-out 0.2s;
    backdrop-filter:blur(4px)
}

.modal-overlay.active {
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.modal-box {
    background-color: #fff;
    width: 90%;
    max-width: 500px;
    max-height: 84vh;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    color: var(--text-dark);
    background: url(../images/bg_paper.jpg) center;
}

.modal-header {
    padding:0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 0; /* Không bị co lại */
}

.modal-header h2 {
    flex-grow: 1;
    text-align: center;
}

.modal-body {
    padding:0 1em;
    overflow-y: auto; /* Tạo thanh cuộn dọc */
    text-align: center;
}

/* Tùy chỉnh thanh cuộn cho đẹp (giống wireframe) */
.modal-body::-webkit-scrollbar {
    width: 6px;
}
.modal-body::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
.modal-body::-webkit-scrollbar-thumb {
    background: #ccc; 
    border-radius: 3px;
}

/* --- Popup --- */
.voucher-card {position: relative;}
.voucher-holder img {display: block;}
  .voucher-code-box {position: absolute; bottom: 9%; left: 8%; max-width:60%;}

.gift-msg-pg {padding:1em 0; font-weight:700; color:#000;}
.pg-code {background:#eaeaea; padding:1.5em;}

/** BODY **/
* {box-sizing:border-box; margin:0; padding:0;}
body {font-family:"Nestle", Arial, sans-serif; color:var(--text-light); display:flex; flex-direction:column; min-height:100vh; background:#5a361b url(../images/bg_mb.webp) no-repeat center top; background-size:480px auto;}
img {max-width:100%; height:auto;}
h1, h2, h3 {font-family:"Philosopher", "Nestle", sans-serif; text-align:center; margin-bottom:10px;}

main {max-width:480px; margin:0 auto; width:100%;}
    .wrapper {max-width:440px; margin:0 auto; padding:0;}
    .nowrap {white-space: nowrap;}
    .flex-wrap {flex-wrap: wrap;}

header {padding:0;display: flex;justify-content: space-between;position: absolute; z-index:101; margin:0 auto; max-width: 440px;width: 100%; left:0; right:0}

.form-group {margin-bottom:0em; text-align: center; padding-left:1em;}
  #homepage .form-group {padding-left:0}
.input-wrapper {display:flex; position: relative;}
    .input-wrapper::before {content:''; position: absolute; bottom:-0.4em; left:-1.2em; width:0.8em; height:100%; background:url(../images/icon_star.png) no-repeat bottom center/100% auto; pointer-events: none;}
input, select {width:100%; padding:0.3em 0.35em 0.5em; background:transparent; border:0px dashed rgba(0, 0, 0, 0.15); font-size:16px; outline:none; font-family: "Nestle", Arial, sans-serif; border-bottom: 2px solid var(--border-input); color:var(--input-color); text-align:center; text-align-last: center; -moz-text-align-last: center; -webkit-text-align-last: center;}
/* select {color:var(--text-dark)} */
select option {color:var(--text-dark); text-align:center}
*::placeholder {color:var(--holder-color); font-family: "Nestle", Arial, sans-serif;}
input:last-of-type, select:last-of-type {text-align: center;}

.error-info, .error {text-align: center; font-style: italic; color:var(--text-error); font-size:0.9em; position: relative; display: inline-block; margin-top:5px}
.error-info span {background:red; border:1px solid #fff; border-radius:100%; width:1.2em; height:1.2em; position: absolute; color:#fff; line-height:1; font-style:normal; font-weight:700; padding:0; font-size:1.2em; left:-1.5em}
.error-info span::after {content:'!'; line-height:1;}

/** HOME PAGE **/
#homepage {background:url(../images/bg_home.webp) no-repeat top center/100% auto;}
.home-spacer {height:67vh; display: block; width: 100%;}
.home-welcome {text-align: center; padding:0 0.6em 1em;}
#homepage .input-wrapper {max-width:300px; margin: 0 auto;}
.key-products img {display: block;}
.logo {display: none}
.logo-nestle {max-width:80px; max-width:32%;}

/** NEW USER **/
#new-user form {max-width:80%; margin:0 auto; padding-bottom:2em;}
.datepicker.input-wrapper::after {content:''; position: absolute; bottom:5px; right:0; width:1.5em; height:100%; background:url(../images/icon_calendar.png) no-repeat bottom center/100% auto; pointer-events: none;}
.checkbox-group {display: flex; justify-content:center; align-items: flex-start; margin-bottom:0.8em; flex-wrap: wrap;}
/* .checkbox-group input {width: 25px; height: 25px; margin-top: 2px; flex-shrink: 0;} */
.checkbox-group p {font-size: 0.85em; width: calc(100% - 30px); padding-left: 0.5em;}

/** TAO THIỆP **/
.steps-nav {border:1px solid #ff8555; color:#e2d188; display:flex; padding:2px; flex:auto}
.step-item {text-align: center; padding:0px 0 3px; flex:auto}
.step-item.active {color:#f5eca9; font-weight:700; background: url(../images/nav_active.png) no-repeat center center/100% 100%;}

.category-box {position: relative; padding:10px 0;}
.cat-option > span {display:none}
.blx-wrap {text-align:left; position:relative; width:100%; margin:5% auto 0}
.blx-wrap img {display:block}
.blx-wrap .blx-top {position:absolute; top:0; left:0; z-index:10}
.blx-box {width:100%; pointer-events:none}
  .blx-box .blx-pic {width:66%}
.cat-option {width:68%; position:absolute; cursor:pointer; left:20%; box-shadow: 0.25em 0.25em 0.5em 0em rgba(0,0,0,0.6); transform:rotate(-8deg); transition:all ease-in-out 0.2s}
.cat-option:nth-child(1) {left:10%; top:6%; transform:rotate(-10deg)}
.cat-option:nth-child(2) {left:16%; top:21%; transform:rotate(-8deg)}
.cat-option:nth-child(3) {left:19%; top:37%; transform:rotate(-5deg)}
.cat-option:nth-child(4) {left:14%; top:55%; transform:rotate(-2deg)}
.category-box.active .cat-option {background:#260604}
.category-box.active .cat-option img {opacity:0.5}
.category-box.active .cat-option.active img {opacity:1}
.category-box.active .cat-option:nth-child(1) {left:6%; top:6%; transform:rotate(-10deg)}
.category-box.active .cat-option:nth-child(2) {left:14%; top:21%; transform:rotate(-8deg)}
.category-box.active .cat-option:nth-child(3) {left:15%; top:39%; transform:rotate(-5deg)}
.category-box.active .cat-option:nth-child(4) {left:11%; top:57%; transform:rotate(-2deg)}
.category-box.active .cat-option.active {z-index:9}
.category-box.active .cat-option:nth-child(1).active {left:21%; top:5%}
.category-box.active .cat-option:nth-child(2).active {left:24%; top:19%}
.category-box.active .cat-option:nth-child(3).active {left:24%; top:37%}
.category-box.active .cat-option:nth-child(4).active {left:24%; top:55%}

.list-loichuc {width:100%; padding:15px; background:#dcdcdc; border:none; font-size:16px; outline:none; margin:1em auto}
.loichuc-box {position: relative; width:100%; margin:1em auto 0; color: var(--text-dark);}
    .loichuc_btn {position: relative;background:#fffed2; padding:0.25em; cursor:pointer; font-size:16px; text-align: center; border:4px solid #cf2b21; border-radius:var(--border-radius-form); position: relative; z-index:15 !important; box-shadow:var(--shadow-1); cursor: pointer;}
        .loichuc_btn::after {content:''; position: absolute; top:0; right:0; height:100%; width:2em; background:#cf2b21 url(../images/icon_dropdown_2.png) no-repeat center center/70% auto; border-top-right-radius:0.5em; border-bottom-right-radius:0.5em;}
    .list-loichuc {position: absolute; top:0; left:50%; width:108%; opacity:0; background:url(../images/ca_step2_drop.webp) no-repeat bottom center/100% auto; z-index:14!important; padding:2em 1.5em 5em; transform: translate(-50%, 0) scaleY(0.1); transition: all 0.2s cubic-bezier(.16,.66,.6,.95); transform-origin: top; visibility: hidden; pointer-events: none;}
    .loichuc-item {padding:0.5em 0.5em 0.9em; cursor:pointer; width:100%; text-align: center; color:var(--text-dark); position: relative;}
        .loichuc-item:last-child {border:none;}
        .loichuc-item.active {background:rgba(237, 0, 0, 0.8); color:#fcffaa;}
        .loichuc-item:hover {font-weight:700;}
    .loichuc-item::after {content:''; height:3px; background:url(../images/drop_line_2.png) no-repeat center center/100% auto; position: absolute; bottom: 0;left: 0; width: 100%;}
    .list-loichuc.active {top:0; opacity:1; transform: translate(-50%, 0) scaleY(1); visibility: visible; pointer-events: auto;}
.view-gcard {margin:0 auto; max-width:380px; position: relative;}
.gcard-box {position: relative}
.gcard-item {position: absolute; width:100%; top:0; left:0; z-index:1; font-size:16px;}
.gcard-item.current {z-index:2;}
.gcard-receiver {top: 12.5%; left:0; font-size:1em; color:var(--text-dark); width:100%; text-align: center;}
.gcard-msg {top: 56%; left: 0; color: #2c2c2c; width:100%; text-align: center; line-height:1.5; font-family: "Tet"}
.gcard-item.cover .gcard-msg {opacity:0.8; font-size:1.2em; font-family: "Nestle";}
.gcard-holder {position: relative; width:100%; height:auto; opacity:0; pointer-events: none;}
.gcard-head {width:100%; position:absolute; top:0; left:0; z-index:10;}
.gcard-teared {width:100%; position:absolute; top:0; left:0; z-index:10;}
.gcard-img > img, .gcard-holder > img {display: block; width:100%;}
    .print-receiver {font-weight: bold; color:#cd3620; font-family: "Philosopher";}

#loichuc-holder {white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: inline-block; max-width:95%; padding-right:5%;}
  #loichuc-holder br {display:none}
.card-item {position: relative; max-width:400px; margin:1em auto 0; width:80%}
.card-wrap {position: absolute; width:100%; padding:0.5em; color: var(--text-dark);}
.card-wrap {margin:1em auto; padding:1em; text-align: center;}
.card-url {overflow: hidden; position: relative; text-overflow: ellipsis; white-space:nowrap; width:95%; text-align: center;}
.print-url {color:#717171; text-decoration:none; pointer-events: none;}
.print-receiver {font-size:1.3em;}

.line-card {position: absolute; width:90%; left:5%; bottom:19%; pointer-events: none;}
.line-card span {display: block; border-top:1px solid rgba(205,54,32,0.35); height:2.9em;}

.form-group label {color:var(--text-dark)}
.tab-section .form-group {max-width:80%; margin:0 auto}

.gcard-item.cover .line-card {display: none;}

/** VIEW THIEP **/
#view-thiep .view-gcard {max-width:86%;}
.slogan_card {max-width:64%; margin:5% 0 2% 22%;}
.viewcard_desc {text-align:center;}
.case_view {display:none; padding-top: 1em;}
.case_view.active {display: block; position: relative; z-index:2;}

/** DECOR **/
.body-decor {pointer-events: none; position: absolute; z-index:-1;}
.decor-item {position: absolute;}
.flower1 {top:0; left:45%; width:200px}
.flower2 {top:55vh; left:0; width:50px}
.flower3 {top:3vh; right:0; width:15%}

/** TNC **/
#tnc-page {width:100%}
.table-scroll {overflow:auto; max-width:100%}
#tnc-page table td {border:1px solid #fff; padding:0.5em}
.headline-tnc {font-size:1.2em }
.tnc-wrap {max-width:86%; margin:0 auto; overflow-y: auto; max-height:50vh;}
.tnc-wrap p {margin:0.5em auto}
.tnc-wrap ul {padding-left:1em}
.tnc-wrap a {color:var(--link-color); text-decoration:none}
.tnc-pic {width:70%; max-width:300px; display:block; margin:0 auto 4px}

/** --- Utility Classes --- */
.abs {position: absolute;}
.btn-group {display: flex; gap: 0.8em; justify-content: center; margin: 1em auto; position: relative; z-index:1;}
.btn, .btn-flex {font-family: "Philosopher", "Nestle", sans-serif; font-weight: 700; color:var(--btn-color); position: relative; padding:0.5em 1em 0.6em; border:0; margin: 0; background: transparent; font-size:1.2em; min-width:140px; text-align: center; text-transform: uppercase;}
.btn::after {content:""; position: absolute; top:0; left:0; height:100%; width:100%; background:linear-gradient(60deg,rgba(196, 37, 28, 1) 0%, rgba(242, 43, 0, 1) 100%); z-index:-2; border-radius:0.7em; box-shadow: 0.2em 0.2em 0.15em 0 rgba(100,14,2,0.85)}
.btn::before {content:""; position: absolute; background:#960603 url(../images/bg_nav_2.jpg) no-repeat 35% 50%/auto 200%; z-index:-1; width:calc(100% - 6px); height:calc(100% - 6px); top:3px; left:3px; border-radius:0.6em;}

.btn-otp {font-size:0.85em; background:#8c0402; font-family: "Nestle"; font-weight:700; color:#fffed2; border:2px solid #fcecb5; border-top-left-radius: 0.5em; white-space: nowrap; padding:0.15em 0.8em;}
.s-page, .tab-section {display: none;}
.s-page.active, .tab-section.active {display: block;}
.view-btn-case {text-align: center; margin:1em auto; display: none;}
.view-btn-case.active {display: block;}

footer {padding: 1em; color: var(--text-light); text-align: center; width: 100%; margin-top:1em;}

h2 {font-size:32px}
.headline {margin-top:2.8em}
.headline-tnc {margin-top:1em}
.alink {color:var(--link-color); text-decoration:none}

.event-waiting.active {opacity:1; z-index:999; pointer-events:visible}

.event-waiting {
  position:fixed;
  width:100%;
  height:100%;
  top:0;
  left:0;
  background:rgba(0, 0, 0, 0.5);
  opacity:0;
  z-index:-1;
  pointer-events:none;
  transition:all ease-in-out 0.2s;
}
.event-waiting span {
  position:absolute;
  left:calc(50% - 24px); 
  top:calc(50% - 24px);
    width: 48px;
    height: 48px;
    border: 3px solid #FFF;
    border-bottom-color: transparent;
    border-radius: 50%;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    }

    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    } 

@media (min-width: 481px) {
.body-decor {max-width:480px; margin:0 auto; left:0; right:0;}
.gcard-box:not(.clone) {box-shadow: 0.25em 0.25em 0.5em 0em rgba(118,0,0,0.6), 1em 0.5em 2em 0 rgba(118,0,0,0.65), 1.5em 1.5em 1em 0 rgba(118,0,0,0.4);}
.gcard-msg {font-size:3em; line-height:1.1;}
.tnc-pic {display:inline-block}
}

@media (max-width: 480px) {
body {background-size:100% auto;}
  body.noScroll {overflow:hidden}
h2 {font-size:7vw;}
.body-decor {max-width:100%; left:0; right:0}
.home-spacer {height:115vw;}
.wrapper, header {max-width:92%;}
.loichuc-box, .view-gcard {max-width:76%; text-align:center}
.gcard-box:not(.clone) {box-shadow: 0.25em 0.25em 0.5em 0em rgba(118,0,0,0.6), 1em 0.5em 2em 0 rgba(118,0,0,0.65), 1.5em 1.5em 1em 0 rgba(118,0,0,0.4);}
.gcard-msg {font-size:10vw; line-height:1;}
.gcard-item.cover .gcard-msg {font-size:4vw; line-height:1.5;}
.btn {font-size:4.6vw;}
.print-receiver, .gcard-receiver {font-size:3.5vw}
.cards-box .print-receiver {font-size:5vw}
    .cards-box .btn {font-size:0.9em;}
.tab-section .btn {min-width:unset}

.modal-box {font-size:3.8vw;}
.modal-body {padding:0 3vw}

.viewcard_desc {font-size:4vw;}
.line-card {bottom:17%;}
.line-card span {height:10.5vw;}

.tnc-wrap {font-size:3.8vw}

.flower1 {top:0; left:40%; width:40%}
.flower2 {top:55vh; left:0; width:10%}
footer {font-size:3.6vw;}
}

/** MAIN MENU **/
.menu-overlay {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); background:none; z-index:101; max-width: 480px; opacity:0; visibility:hidden; pointer-events:none; transition:all ease-in-out 0.3s}
.menu-outer {position:absolute; width:100%; height:100%; top:0; left:0; opacity:0; visibility:hidden; background:rgba(0,0,0,0.5);pointer-events:none; transition:all ease-in-out 0.3s; z-index:99; backdrop-filter:blur(4px)}
.menu-overlay.active,
#main-nav.open .menu-outer {visibility:visible; pointer-events:auto; opacity:1}
/* .menu-list {flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:40px;} */
.menu-list {text-align:center; position:relative}
.menu-list a {text-decoration:none; font-size:28px; font-weight:400; display:block; padding:0.6em 0; white-space:nowrap; position:relative}
.menu-list a::after {content:""; width:100%; height:2px; background: linear-gradient(49deg,rgba(255, 149, 91, 0) 0%, rgba(255, 149, 91, 1) 50%, rgba(255, 149, 91, 0) 100%); bottom:0; left:0; position:absolute}
.menu-list a:last-child::after {display:none}
.menu-list::before, .menu-list::after {content:""; position:absolute; left:48%; width:15px; height:15px; background:url(../images/icon_star.png) no-repeat center center/100% auto;}
.menu-list::before {top:-8%;}
.menu-list::after {bottom:-8%;}

/** ANIMATIONS HAM **/
.menu-list a {color:#feffb8; font-family: "Philosopher", "Nestle", sans-serif;}
.menu-btn {background: transparent; border: none; cursor: pointer; display: flex; flex-direction: column; gap: 4px; position: absolute; top:20px; right:21px; z-index: 111;}
.menu-box {position:absolute; width:44px; height:40px;z-index:101; right:12px; top:10px; transition:all ease-in-out 0.2s}
  .menu-box::after {content:""; position:absolute; width:100%; height:100%; top:0; left:0; background: linear-gradient(49deg,rgba(226, 182, 81, 1) 0%, rgba(200, 47, 33, 1) 25%, rgba(235, 219, 136, 1) 50%, rgba(200, 47, 33, 1) 75%, rgba(235, 219, 136, 1) 100%); z-index:-1; border-top-left-radius:14px; border-bottom-right-radius:14px; box-shadow:0.15em 0.15em 0.2em 0em rgba(0,0,0,0.5)}
  .menu-box::before {content:"";position:absolute; width:calc(100% - 4px); height:calc(100% - 4px); top:2px;left:2px; background:linear-gradient(49deg,rgba(197, 31, 30, 1) 0%, rgba(210, 151, 47, 1) 100%); border-top-left-radius:12px; border-bottom-right-radius:12px}
#main-nav.open .menu-box {width:80%; height:46%; top:50%; right:10%; transform:translateY(-50%); opacity:0.8}
#main-nav.open .menu-box::after {border-top-left-radius:26px; border-bottom-right-radius:26px; box-shadow:0.15em 0.15em 0.4em 0em rgba(0,0,0,0.5)}
#main-nav.open .menu-box::before {border-top-left-radius:24px; border-bottom-right-radius:24px}

#mainMenu {
position: absolute;
  width: 25px;
  height: 26px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#mainMenu span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #fff;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#mainMenu span:nth-child(1) {
  top: 0px;
}

#mainMenu span:nth-child(2) {
  top: 8px;
}

#mainMenu span:nth-child(3) {
  top: 16px;
}

.open #mainMenu span:nth-child(1) {
  top: 10px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

.open #mainMenu span:nth-child(2) {
  opacity: 0;
  left: -60px;
}

.open #mainMenu span:nth-child(3) {
  top: 10px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

/** CUSTOM CHECKBOX **/
.checkbox-custom {
    box-sizing: border-box;
    --background-color: #fff;
    --checkbox-height: 22px;
  }

  @-moz-keyframes dothabottomcheck-19 {
    0% {
      height: 0;
    }
    100% {
      height: calc(var(--checkbox-height) / 2);
    }
  }

  @-webkit-keyframes dothabottomcheck-19 {
    0% {
      height: 0;
    }
    100% {
      height: calc(var(--checkbox-height) / 2);
    }
  }

  @keyframes dothabottomcheck-19 {
    0% {
      height: 0;
    }
    100% {
      height: calc(var(--checkbox-height) / 2);
    }
  }

  @keyframes dothatopcheck-19 {
    0% {
      height: 0;
    }
    50% {
      height: 0;
    }
    100% {
      height: calc(var(--checkbox-height) * 1.2);
    }
  }

  @-webkit-keyframes dothatopcheck-19 {
    0% {
      height: 0;
    }
    50% {
      height: 0;
    }
    100% {
      height: calc(var(--checkbox-height) * 1.2);
    }
  }

  @-moz-keyframes dothatopcheck-19 {
    0% {
      height: 0;
    }
    50% {
      height: 0;
    }
    100% {
      height: calc(var(--checkbox-height) * 1.2);
    }
  }

  .checkbox-custom input[type=checkbox] {
    display: none;
  }

  .checkbox-custom .label-custom {
    height: var(--checkbox-height);
    width: var(--checkbox-height);
    background-color: transparent;
    border: calc(var(--checkbox-height) * .1) solid #fff;
    border-radius: 2px;
    position: relative;
    display: inline-block;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-transition: border-color ease 0.2s;
    -o-transition: border-color ease 0.2s;
    -webkit-transition: border-color ease 0.2s;
    transition: border-color ease 0.2s;
    cursor: pointer;
  }
  .checkbox-custom .label-custom::before,
  .checkbox-custom .label-custom::after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    height: 0;
    width: calc(var(--checkbox-height) * .2);
    background-color: #fcf0b4;
    display: inline-block;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    border-radius: 2px;
    content: " ";
    -webkit-transition: opacity ease 0.5;
    -moz-transition: opacity ease 0.5;
    transition: opacity ease 0.5;
  }
  .checkbox-custom .label-custom::before {
    top: calc(var(--checkbox-height) * .72);
    left: calc(var(--checkbox-height) * .41);
    /* box-shadow: 0 0 0 calc(var(--checkbox-height) * .05) var(--background-color); */
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
  .checkbox-custom .label-custom::after {
    top: calc(var(--checkbox-height) * .37);
    left: calc(var(--checkbox-height) * .05);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

  .checkbox-custom input[type=checkbox]:checked + .label-custom,
  .checkbox-custom .label-custom.checked {
    border-color: #fff;
  }
  .checkbox-custom input[type=checkbox]:checked + .label-custom::after,
  .checkbox-custom .label-custom.checked::after {
    height: calc(var(--checkbox-height) / 2);
    -moz-animation: dothabottomcheck-19 0.2s ease 0s forwards;
    -o-animation: dothabottomcheck-19 0.2s ease 0s forwards;
    -webkit-animation: dothabottomcheck-19 0.2s ease 0s forwards;
    animation: dothabottomcheck-19 0.2s ease 0s forwards;
  }
  .checkbox-custom input[type=checkbox]:checked + .label-custom::before,
  .checkbox-custom .label-custom.checked::before {
    height: calc(var(--checkbox-height) * 1.2);
    -moz-animation: dothatopcheck-19 0.4s ease 0s forwards;
    -o-animation: dothatopcheck-19 0.4s ease 0s forwards;
    -webkit-animation: dothatopcheck-19 0.4s ease 0s forwards;
    animation: dothatopcheck-19 0.4s ease 0s forwards;
  }

/** FIX ST **/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}