@font-face{
    font-family:"Ubuntu Bold";
    font-weight:bold;
    font-style:normal;
    src:url("fonts/UbuntuBold-latin.woff2") format("woff2"),
         url("fonts/UbuntuBold-latin-ext.woff2") format("woff2"),
         url("fonts/UbuntuBold-greek.woff2") format("woff2"),
         url("fonts/UbuntuBold-greek-ext.woff2") format("woff2"),
         url("fonts/UbuntuBold-cyrillic.woff2") format("woff2"),
         url("fonts/UbuntuBold-cyrillic-ext.woff2") format("woff2");
}
@font-face{
    font-family:"Ubuntu Condensed";
    font-weight:normal;
    font-style:normal;
    src:url("fonts/UbuntuCondensed-latin.woff2") format("woff2"),
         url("fonts/UbuntuCondensed-latin-ext.woff2") format("woff2"),
         url("fonts/UbuntuCondensed-greek.woff2") format("woff2"),
         url("fonts/UbuntuCondensed-greek-ext.woff2") format("woff2"),
         url("fonts/UbuntuCondensed-cyrillic.woff2") format("woff2"),
         url("fonts/UbuntuCondensed-cyrillic-ext.woff2") format("woff2");
}
@font-face{
    font-family:"Ubuntu Happo";
    font-weight:normal;
    font-style:normal;
    src:url("fonts/UbuntuHappo.woff2") format("woff2"),
         url("fonts/UbuntuHappo.woff") format("woff");
}
@font-face{
    font-family:"Ubuntu Regular";
    font-weight:normal;
    font-style:normal;
    src:url("fonts/UbuntuRegular-latin.woff2") format("woff2"),
         url("fonts/UbuntuRegular-latin-ext.woff2") format("woff2"),
         url("fonts/UbuntuRegular-greek.woff2") format("woff2"),
         url("fonts/UbuntuRegular-greek-ext.woff2") format("woff2"),
         url("fonts/UbuntuRegular-cyrillic.woff2") format("woff2"),
         url("fonts/UbuntuRegular-cyrillic-ext.woff2") format("woff2");
}
html,body{
    background-color:#131313;
    background-image:url(/assets/background.png);
    font-family:"Ubuntu Regular","Trebuchet MS","Lucida Sans Unicode","Lucida Grande","Lucida Sans",Arial,sans-serif
}
.portrait-mode{
    background-color:rgba(0,0,0,.2);
    text-transform:uppercase;
    text-align:center;
    overflow:hidden;
    height:100%;
    width:100%
}
.portrait-mode img{
    filter:invert(1)brightness(2)
}
.skeleton.sk-1{width:8.33333333%}
.skeleton.sk-2{width:16.66666667%}
.skeleton.sk-3{width:25%}
.skeleton.sk-4{width:33.33333333%}
.skeleton.sk-5{width:41.66666667%}
.skeleton.sk-6{width:50%}
.skeleton.sk-7{width:58.33333333%}
.skeleton.sk-8{width:66.66666667%}
.skeleton.sk-9{width:75%}
.skeleton.sk-10{width:83.33333333%}
.skeleton.sk-11{width:91.66666667%}
.skeleton.sk-12{width:100%}
.skeleton.tiny{height:14px}
.skeleton.small{height:19px}
.skeleton.large{height:29px}
.skeleton.xsmall{height:14px}
.skeleton.normal{height:24px}
.skeleton.xlarge{height:34px}
.skeleton.default{height:24px}
.skeleton{
    width:100px;
    height:24px;
    display:block;
    overflow:hidden;
    position:relative;
    background:rgba(255,255,255,0.1)
}
.skeleton::after{
    top:0;
    content:"";
    left:-100%;
    width:100%;
    height:100%;
    position:absolute;
    animation:glow 1.5s infinite linear;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.6),transparent)
}
.spoiler.skeleton::after{
    top:0;
    content:"";
    left:-100%;
    width:100%;
    height:100%;
    position:absolute;
    animation:glow 3s infinite linear;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.6),transparent)
}
@keyframes glow{
    0%{left:-100%}
    100%{left:100%}
}
.spoiler{
    cursor:pointer;
    padding:2px 6px;
    user-select:none;
    color:transparent;
    border-radius:3px;
    background:repeating-linear-gradient(
        45deg,
        rgba(255,255,255,0.1),
        rgba(255,255,255,0.1) 5px,
        rgba(0,0,0,0.1) 5px,
        rgba(0,0,0,0.1) 10px
    ),
    repeating-linear-gradient(
        -45deg,
        rgba(255,255,255,0.05),
        rgba(255,255,255,0.05) 5px,
        rgba(0,0,0,0.05) 5px,
        rgba(0,0,0,0.05) 10px
    ),
    #222;
    transition:color 0.3s ease-in-out,background 0.3s ease-in-out
}
.spoiler:hover{
    filter:brightness(1.2)
}
.spoiler.revealed{
    cursor:default;
    color:var(--bs-light);
    background:transparent
}
.text-right{
    text-align:right
}
.text-bold{
    font-weight:bold
}
tiny,
.tiny{
    font-size:0.5em
}
.middle{
    vertical-align:middle
}
a{
    color:#FFF;
    text-decoration:none;
}
a:hover{
    text-decoration:underline
}
header{
    cursor:default
}
menu{
    margin:0;
    padding:0;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center
}
menu .container{
    width:30%;
    display:flex;
    align-items:center;
    justify-content:center;
}
menu .background{
    padding:20px 15px;
    background-color:#27272A;
}
nav{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
nav .nav{
    gap:36px;
    flex-wrap:nowrap;
    justify-content:center;
}
.text-center{
    flex:0 0 auto;
}
main .content{
    width:100%
}
main{
    margin-top:0;
    padding:30px!important;
    background-color:#27272A;
}
.user .name{
    cursor:pointer
}
.logo-circle{
    width:90px;
    height:90px;
    display:flex;
    flex:0 0 auto;
    margin:0 36px;
    overflow:hidden;
    border-radius:50%;
    align-items:center;
    justify-content:center;
    background-image:url(/assets/background.png)
}
.logo-circle img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}
.round{
    border:transparent;
    border-radius:.5rem
}
.round-top{
    border:transparent;
    border-top-left-radius:.5rem;
    border-top-right-radius:.5rem
}
.round-bottom{
    border-bottom-left-radius:.5rem;
    border-bottom-right-radius:.5rem
}
nav li{
    font-size:1.2em
}
nav li a{
    text-decoration:none;
    color:#999!important;
    transition:color 0.3s ease;
}
nav li a:hover{
    color:#EEE!important;
}
nav li.active>a{
    color:#EEE!important;
}
.btn-happo{
    color:#111;
    border-color:#FFB31B;
    background-color:#CC8A2F;
    box-shadow:0 3px 0 1px rgba(0,0,0,.3);
}
.btn-happo:hover,
.btn-happo:focus,
.btn-happo:active,
.btn-happo:visited{
    color:#111!important;
    border-color:#FFB31B!important;
    background-color:#FFB31B!important;
}
.btn-happo:disabled{
    color:#111!important;
    border-color:#FFB31BDC!important;
    background-color:#FFB31BDC!important;
}
.btn-happo::before{
    content:"";
    width:27px;
    height:27px;
    margin-right:6px;
    display:inline-block;
    vertical-align:middle;
    background-size:cover;
    background-image:url(https://images.happo.gg/happo-web/happo-america/en/assets/images/happo/favicon.ico)
}
.user{
    margin-top:-3em;
    margin-left:.5em;
}
.user .ok{
    width:20%;
    display:none;
    flex:0 0 auto;
    cursor:default;
    margin-top:-.5em
}
.user .logout{
    margin-left:9px;
}
.user .logout::before{
    background-image:url(https://images.happo.gg/happo-web/happo-america/en/assets/images/sprite.png);
    background-position:-300px -617px;
    position:absolute;
    margin-top:.15em;
    height:18px;
    width:18px;
    content:"";
}
.user-circle{
    width:60px;
    height:60px;
    display:flex;
    flex:0 0 auto;
    margin:0 auto;
    cursor:pointer;
    overflow:hidden;
    border-radius:50%;
    align-items:center;
    justify-content:center;
    background-image:url(/assets/background.png)
}
.user-circle img{
    width:39px
}
footer{
    cursor:default;
    background-color:#27272A
}
#vouchers h3{
    margin-bottom:18px
}
a.voucher:hover{
    text-decoration:none
}
.voucher.card{
    cursor:pointer;
    border-radius:10px;
    background-size:cover;
    font-family:"Ubuntu Bold";
    background-repeat:no-repeat;
    background-position:right center;
    background-image:url("https://images.happo.gg/shop/offer_happo_credits1.png")
}
.voucher.card.c1{background-image:url("https://images.happo.gg/shop/offer_happo_credits1.png")}
.voucher.card.c2{background-image:url("https://images.happo.gg/shop/offer_happo_credits2.png")}
.voucher.card.c3{background-image:url("https://images.happo.gg/shop/offer_happo_credits3.png")}
.voucher.card.c4{background-image:url("https://images.happo.gg/shop/offer_happo_credits4.png")}
.voucher.card.c5{background-image:url("https://images.happo.gg/shop/offer_happo_credits5.png")}
.voucher.card.c6{background-image:url("https://images.happo.gg/shop/offer_happo_credits6.png")}
.voucher.card.c7{background-image:url("https://images.happo.gg/shop/offer_happo_credits6.png")}
.voucher.card .card-title{
    color:#A95219
}
.voucher.card .card-text{
    font-size:0.9em
}
.voucher.card .card-title::before{
    height:27px;
    content:"US$";
    color:#212529;
    margin-right:3px;
    display:inline-block;
    vertical-align:middle
}
#values tbody img{
    max-width:64px
}
#values tbody tr{
    cursor:pointer
}
#values tbody td{
    font-size:1.2em;
    vertical-align:middle
}
#values .credits::after{
    background-image:url(https://images.happo.gg/happo-web/happo-america/en/assets/images/sprite.png);
    background-position:-665px -643px;
    display:inline-block;
    margin-left:3px;
    height:18px;
    width:20px;
    content:"";
}
#values table tiny{
    line-height:3px;
    display:block
}
#account .card{
    border:none;
    max-width:400px;
}
#account table{
    cursor:default
}
#account td.col-4{
    line-height:18px
}
.transactions-history .credits{
    line-height:1px;
    vertical-align:baseline;
}
.transactions-history .credits::before{
    background-image:url(https://images.happo.gg/happo-web/happo-america/en/assets/images/sprite.png);
    background-position:-665px -643px;
    display:inline-block;
    height:18px;
    width:20px;
    content:"";
}
.btn-refresh:hover,
.btn-refresh:focus,
.btn-refresh:active{
    color:#E7A700
   !important
}
.btn-refresh{
    border:none;
    padding:3px;
    color:#FFF;
    font-size:.8em;
    font-weight:bold
}
.legal{
    font-size:.72em;
    text-align:left;
    padding-left:6px;
}
.legal a{
    display:inline-block
}
.legal span{
    display:flex;
    margin-left:24px
}
.legal a:not(:last-child)::after{
    text-decoration:none;
    display:inline-block;
    margin:0 3px;
    content:""
}
#brandkit pre{
    margin-top:12px;
    background-color:#DC9000
}
#brandkit pre::selection,
#brandkit pre::-moz-selection{
    background-color:#CE7600;
    color:#000
}
#brandkit .copy{
    padding:6px;
    border-radius:15px;
    background-color:#DC9000;
}
#brandkit .copy .copied{
    opacity:0;
    color:#EEE;
    display:inline;
    margin-left:12px;
    visibility:hidden;
    vertical-align:middle;
    transition:opacity 0.3s ease,visibility 0.3s ease
}
#brandkit .copy .copied.show{
    visibility:visible;
    opacity:1
}
#brandkit .copy button{
    color:#EEE;
    cursor:pointer;
    padding:3px 9px;
    border-radius:0px;
    border:solid #EEE 1px;
    border-top-left-radius:6px
}
#brandkit .copy button:hover{
    background-color:#E7A700
}
/*Scrollbar Styling for Webkit Browsers (Chrome, Edge, Safari)*/
#brandkit pre::-webkit-scrollbar,
::-webkit-scrollbar{
    width:8px
}
#brandkit pre::-webkit-scrollbar-track,
::-webkit-scrollbar-track{
    background:#DC9000;
    border-radius:5px
}
#brandkit pre::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb{
    background:#CE7600;
    border-radius:5px
}
#brandkit pre::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:hover{
    background:#BC5B00
}
/*Firefox Scrollbar*/
body,html,
#brandkit pre{
    scrollbar-width:thin;
    scrollbar-color:#CE7600 #DC9000/*Thumb color | Track color*/
}
::selection,
::-moz-selection{
    background-color:#DC9000;
    color:#000
}
@media(max-width:470px){
    html,body{overflow-x:hidden}
    .user .ok{
        width:100%
    }
    .logo-circle{
        margin:0 0
    }
    nav .nav{
        gap:0
    }
}
@media(min-width:469px) and (max-width:576px){
    html,body{overflow-x:hidden}
    .user .ok{
        width:100%
    }
    .logo-circle{
        margin:0 12px
    }
    nav .nav{
        gap:9px
    }
}
@media(min-width:575px) and (max-width:768px){
    html,body{overflow-x:hidden}
    .voucher.card.c7{
        background-size:150%
    }
    .user .ok{
        width:50%
    }
}
@media(min-width:992px){
    .legal a:not(:last-child)::after{
        text-decoration:none;
        display:inline-block;
        margin:0 6px;
        content:"•"
    }
}
@media(orientation:portrait){
    body{
        display:flex;
        height:100vh;
        color:white;
        font-size:24px;
        overflow:hidden;
        align-items:center;
        justify-content:center;
        background:url(/assets/background.png)
    }
    .happomart{
        display:none
    }
    .portrait-mode{
        display:block
    }
}
@media(orientation:landscape){
    .happomart{
        display:block
    }
    .portrait-mode{
        display:none!important
    }
}
[data-custom-class="body"],
[data-custom-class="body"] *{
    background:transparent!important;
}
[data-custom-class="title"],
[data-custom-class="title"] *{
    font-size:26px!important;
    color:#FAFAFA!important;
    font-family:Arial!important
}
[data-custom-class="subtitle"],
[data-custom-class="subtitle"] *{
    font-family:Arial!important;
    color:#595959!important;
    font-size:14px!important
}
[data-custom-class="heading_1"],
[data-custom-class="heading_1"] *{
    font-family:Arial!important;
    color:#FAFAFA!important;
    font-size:19px!important
}
[data-custom-class="heading_2"],
[data-custom-class="heading_2"] *{
    font-family:Arial!important;
    color:#FAFAFA!important;
    font-size:17px!important
}
[data-custom-class="body_text"],
[data-custom-class="body_text"] *{
    font-family:Arial!important;
    color:#EEEEEE!important;
    font-size:14px!important
}
[data-custom-class="link"],
[data-custom-class="link"] *{
    font-size:14px!important;
    color:#E7A700!important;
    font-family:Arial!important;
    word-break:break-word!important
}