#cool-notification, #cool-notification-new{ display: none; }
@font-face{
	font-family: nunito;
	src: url(../fonts/Nunito-Regular.ttf);
}
::-webkit-scrollbar { width: 0px; height: 0; background: transparent; }
::-webkit-scrollbar-thumb { background: #455a64; }
::selection{ color: #000; background: #9e9e9e; }
::-moz-selection{ color: #000; background: #9e9e9e; }
*{ -ms-overflow-style: none; }

html, body{
	position: fixed;
	top: 0; bottom: 0;
	left: 0; right: 0;
	overflow: hidden;
	font-family: nunito;
	padding: 0px !important;
	margin: 0px !important;
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
	background: #ffffff;
}

/* Sembunyikan tombol stepper angka default pada input number */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] { -moz-appearance: textfield; }

noscript#noscript-speciale{
	position: fixed;
	top: 0; bottom: 0;
	left: 0; right: 0;
	z-index: 100000;
	background: #fff;
	text-align: center;
	font-weight: 600;
}
noscript#noscript-speciale > div{
	position: absolute;
	top: 50%; left: 50%;
	max-width: 100%;
	width: max-content;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
}
noscript#noscript-speciale p{
	padding: 0 20px;
	text-align: center;
}
noscript#noscript-speciale span{
	font-weight: 600;
	text-shadow: 0 0 1px #000;
}

/************************************** custom modal **********************************************/
.modal{
	padding-left: 10px !important;
	padding-right: 10px !important;
}
.modal-dialog{
	width: 100% !important;
	max-width: 500px;
	text-shadow: 0 0 1px #000;
	color: #000;
	margin-left: auto;
	margin-right: auto;
}
body[night-mode] .modal-dialog{ color: #fff; }
.modal-header, .modal-footer{ border: none !important; }
.modal-dialog .btn{
	background: transparent;
	color: #000;
	border: none;
	outline: none !important;
}
body[night-mode] .modal-dialog .btn{ color: #fff; }
body[night-mode] .modal-content{ background-color: #333 !important; }
.modal-content .btn{ font-weight: 600; }
.modal-dialog .btn-primary{ border-color: transparent !important; }
body:not([night-mode]) .modal-dialog .btn-primary{
	background-color: #333 !important;
	color: #fff;
}
body[night-mode] .modal-dialog .btn-primary{
	background-color: #fff !important;
	color: #000 !important;
}
.modal-footer{ text-align: center !important; }


/********************************************************/
#main-header{ position: sticky; z-index: 5; top: 0; width: 100%; background: #fff; overflow: hidden; 
    padding: 10px 15px; font-size: 1.3em; border-bottom: 1px solid #d8d8d8;
}
#main-header > div{ display: table; width: 100%; }
#main-header > div > div{ display: table-cell; vertical-align: top; }
#main-header > div > div:nth-child(2){ width: 100%; }

/********************************************************/
#main-logo{ position: relative; cursor: pointer;
    transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease;
}
#main-logo:active{ transform: scale(0.9); -webkit-transform: scale(0.9); -moz-transform: scale(0.9); }
#main-logo::after{ content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; }
#main-logo img{ display: block; height: 50px; }


/********************************************************/
#account-actions{ white-space: nowrap; }
#main-menus{ text-align: right; }
#account-actions button, #main-menus button{
    display: inline-block; position: relative; padding: 0 10px; vertical-align: middle; background: transparent;
    border: none; color: #000; outline: none; white-space: nowrap; height: 50px; letter-spacing: 1px; z-index: 1;
    transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease;
}
#main-menus button[state-picked]{ color: #3d5afe; text-shadow: 0 0 1px #3d5afe; }
#account-actions button:active{
    transform: scale(0.9); -webkit-transform: scale(0.9); -moz-transform: scale(0.9);
}
#main-menus button::before{
    content: ""; display: block; position: absolute; bottom: 0; left: 50%; width: 0; height: 3px;
    border-radius: 5px; background: #3d5afe; opacity: 0;
    transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%);
    transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease;
}
#main-menus button[state-picked]::before{ width: 100%; opacity: 1; }
#account-actions button > *, #main-menus button > *{
    display: inline-block; vertical-align: middle; margin: 5px;
}
#account-actions button b, #main-menus button b{
    width: 35px; height: 35px; background: #d8d8d8; border-radius: 50%; position: relative; overflow: hidden;
}
#account-actions button b img, #main-menus button b img{
    display: block; position: absolute; top: 50%; left: 50%; max-width: 100%; max-height: 100%;
    transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);
}


/********************************************************/
#scrollable-area{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; }

/********************************************************/
#area-home{ height: 100%; position: relative; z-index: 1; }
#area-home::before{
    content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0;
    z-index: -1; background: #00a3ff; opacity: 0.2;
}

/********************************************************/
#home-map-hero{ position: absolute; right: 50%; bottom: 0; width: 50%; max-width: 700px; padding: 0 20px; }
#home-map-hero > div{ position: relative; }
#home-map-hero::after{ content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; }
#home-map-hero img{ display: block; max-width: 100%;  margin: 0 auto; }
#home-map-hero canvas{ display: block; width: 100%; position: absolute; top: 0; z-index: -1; margin-top: 20%; }

/********************************************************/
#home-info-area{ position: absolute; top: 0; left: 50%; margin-top: 100%; width: 100%; max-width: 1200px;
    transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%);
}
#home-info-area h1{
    margin: 0; color: #000; text-align: center; font-size: 1.4em; font-weight: 600;
}




/********************************************************/
@media only screen and (max-width: 1280px){
    #main-menus{ text-align: center; }
    #main-menus button i{ display: none; }
}
@media only screen and (max-width: 1080px){
    #main-header{ font-size: 1.1em; }
    #account-actions button, #main-menus button{ padding: 0 5px; }
    #account-actions button span{ display: none; }
}
@media only screen and (max-width: 960px){
    #main-menus{ position: fixed; bottom: 0; left: 0; right: 0; background: #fff; z-index: 1; border-top: 1px solid #d8d8d8; }
    #main-menus button::before{ height: 100%; border-radius: 5px 5px 0 0; z-index: -1; }
    #main-menus button[state-picked]{ color: #fff !important; text-shadow: 0 0 1px #fff; }
    #account-actions button span{ display: inline-block; }
}
@media only screen and (max-width: 720px){
    #main-menus button{ height: 60px; padding: 0 10px; }
    #main-menus button i{ display: block; font-size: 1.5em; margin: 0 auto; width: max-content; }
    #main-menus button span{ display: block; font-size: 0.7em; width: 100%; line-height: 20px;margin: 0 auto; }
}
@media only screen and (max-width: 520px){
    #main-menus button{ width: 50px; height: 50px; padding: 0 10px; }
    #main-menus button span{ display: none; }
}