:root{
	--base-color:#546e7a;
	/*--base-color:teal;
	--base-color:#455a64;   lightgray */
	--base-emp-color:#546e7a;
	--accent-bg-color:orangered;
	--title-bar-color:#546e7a;
	--footer-bg-color:#cfd8dc;
	--footer-up-bar-color:#546e7a;
}


*{
    box-sizing:border-box;
}



body{
	margin:0;    
	height:100vh;
}

body{
	font-size:0.95em;
}

#footer{
	background:var(--footer-bg-color);
	
}
.footer_up_bar{
	background:var(--footer-up-bar-color);
}

fieldset{
	border-radius:5px;
}

fieldset#szlotto_zen_box{
	
	/*
	border:#616161 2px solid;
	
	box-shadow:
    inset 3px 3px 5px rgba(0,0,0,0.25);  
	*/

	padding-top:20px;
	padding-left:20px;
	padding-right:20px;

	box-shadow:
    inset 3px 3px 5px rgba(0,0,0,0.2),   
    inset -3px -3px 5px rgba(255,255,255,0.8); 
	
	
	
	
	/* °­ÇÑÈ¿°ú
	box-shadow:
    inset 6px 6px 10px rgba(0,0,0,0.35),   
    inset -4px -4px 8px rgba(255,255,255,0.9); 

	border-top: 1px solid rgba(255,255,255,0.6);
	border-left: 1px solid rgba(255,255,255,0.6);
	*/
	
}

fieldset#szlotto_zen_box legend{
	background:white;
	border:darkslategray 1px solid;
	padding:4px 10px;
	border-radius:5px;
	box-shadow:2px 2px 5px gray;
}

h3.subttl{
	margin-top:40px;
	color:orangered;
	padding-left:10px;
}

h3.ttl{
	border-left:royalblue 8px solid;
	border-bottom:royalblue 1px dotted;
	padding-left:8px;
}

#cur_lotto_chasu{
	color:blue;
	font-weight:bold;
}

#main_container{
	margin:140px 10px;
	min-height:100vh;
}

.container{
    witdh: 100%;
    max-width:1480px;
    padding: 0 20px;
    margin:auto;
    position:relative;
}

select{
	font-size:0.9em !important;
	padding:4px !important;
	border-radius:10px !important;
	
}

select.pick_count{
	font-size:0.9em !important;
	padding:4px !important;
	border-radius:15px !important;
	/*border-bottom:lightgray 1px solid !important;
	border-right:lightgray 1px solid !important;*/
}

input[type='button']{
	padding:5px 7px !important;
	border-radius:5px !important;
}

.tbox{
	font-size:0.95em !important;
	padding:4px !important;
	border-radius:10px !important;
	border:gray 1px solid !important;
}

textarea{
	border-radius:10px !important;
	border:gray 1px solid !important;
}

fieldset#fieldset_type3{
	line-height:2em !important;
}

.ball_yellow{
	background: radial-gradient(circle at 65% 15%, white 1px, #FBC400 3%, gold 60%, #FBC400 100%) !important;  
	text-shadow:1px 1px 1px gray !important;
}
.ball_blue{
	background: radial-gradient(circle at 65% 15%, white 1px, #4072AC 3%, blue 60%, #4072AC 100%) !important;  
	text-shadow:1px 1px 1px gray !important;
}
.ball_red{
	background: radial-gradient(circle at 65% 15%, white 1px, orangered 3%, red 60%, orangered 100%) !important;  
	text-shadow:1px 1px 1px gray !important;
}
.ball_gray{
	background: radial-gradient(circle at 65% 15%, white 1px, gray 3%, darkgray 60%, gray 100%) !important;  
	text-shadow:1px 1px 1px gray !important;
}
.ball_green{
	background: radial-gradient(circle at 65% 15%, white 1px, #13BE4B 3%, #388e3c 60%, #13BE4B 100%) !important;  
	text-shadow:1px 1px 1px gray !important;
}


/* Permalink - use to edit and share this gradient. ÆÛ¸Ó¸µÅ© - ÀÌ ±×¶óµð¾ðÆ®¸¦ ÆíÁýÇÏ°í °øÀ¯ÇÏ´Â µ¥ »ç¿ë: https://colorzilla.com/gradient-editor/#4169e1+0,4169e1+34,ff0000+100 */
 /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

/* Permalink - use to edit and share this gradient. ÆÛ¸Ó¸µÅ© - ÀÌ ±×¶óµð¾ðÆ®¸¦ ÆíÁýÇÏ°í °øÀ¯ÇÏ´Â µ¥ »ç¿ë: https://colorzilla.com/gradient-editor/#4169e1+0,4169e1+51,ff0000+100 */
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */


header {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    padding:20px 0 27px 0;
    z-index:3;
    
	/* background: linear-gradient(45deg,  #4169e1 0%,#4169e1 51%,#ff0000 100%);  */
	/* background: linear-gradient(45deg,  #4169e1 0%,#4169e1 34%,#ff0000 100%);*/
	
	/* background: linear-gradient(to bottom,  #4169e1 1%,#2989d8 74%,#7db9e8 100%); */

	background:var(--base-color); 
	/*border-top:white 5px double;*/
	/*border-bottom:white 3px double;*/
	/*border-bottom: #55AAAA 5px solid;  ref-bg : teal*/

	border-bottom: #78909c 7px solid; /* ref-bg : lightgray */
	
	
	/*
	background:#1a555f;
	border-bottom:black 3px solid;*/
}

.main-navigation a{
    color:white;
    margin-left: 20px;
	padding:5px 20px;
}


header h1{
    position:relative;
    height:40px;
    margin:0;
    float:left;
    z-index:3;
	font-size:20pt;
	font-weight:normal;
	font-style:italic
	
}


header h2{
    position:relative;
    height:40px;
    margin:0;
    float:left;
    z-index:3;
	font-size:20pt;
	font-weight:normal;
	font-style:italic
	
}

header h1 a{
    color:white;
    text-decoration: none;
}


header h2 a{
    color:white;
    text-decoration: none;
}


nav a{
    color:white;
    font-size:16px;
    text-decoration:none;
}

.main-navigation {
    float:right;
	z-index:1000;
	margin-top:10px;
}


.main-navigation i{
	font-size:1.2em;
	margin-left:8px;
	
}

.btn {
    display:inline-block;
    color:#fff;
    font-weight:bold;
    padding:6px 10px;
    border-radius:4px;
    background-color:#28a745;
}

.more-btn{
    display:none;
	z-index:2000;
}



@media screen and (max-width:1000px){
   .more-btn {
    display: block;
    position:absolute;
    right:12px;
    top:8px;
    width:80px;
    height: 32px;
    border-radius:8px;
    border:none;
    background-color: transparent;
    font-size:20px;
    color:white;
   } 
   .main-navigation{
    position: fixed;
    top:0;
    left:0;
    padding:80px 20px;
    width:100%;
    height:100vh;
    background-color:rgba(14,25,38,0.9);
    opacity:0; /* key point */
    visibility:hidden; /* key point */
   }
   .main-navigation a{
    display:block;/* key point */
    margin:auto;
    margin-bottom:8px;
    padding:12px;
	width:100%;
   }

   .main-navigation a.btn{
    text-align:center;
   }

   .main-navigation.active{
    opacity: 1; /* key point */
    visibility: visible; /* key point */
   }

  
}



input[type='button']{
	background:var(--base-color);
	color:white;
	border:none;
	padding:8px 10px;
	border-radius:3px;
	cursor:pointer;
}

input[type='button'].btn_option{
	background:coral;
}

input[type='button'].btn_teal{
	background:teal;
}

input[type='button'].btn_accent{
	background:var(--accent-bg-color);
/*
	border-radius:10px;
	background:orangered !important;
	color:white !important;
	font-size:1.1em;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-top:#901102 1px solid !important;
	border-right:#901102 15px solid !important;
	border-bottom:#901102 1px solid !important;
	border-left:#901102 15px solid !important;
	*/
}

.btn_remove_ball{
	background:#efefef !important;
	border:gray 1px solid !important;
	border-radius:3px !important;
	color:black !important;
	padding:3px !important;
}

select{
	font-size:1.1em;
}


#dhlottery_info{
	margin-top:30px;
	color:orangered;
	text-align:left;
	font-size:0.8em;
}

.main-navigation a.active{
	/*background:royalblue;*/
	padding:5px 5px;
	
	border-bottom:white 2px solid;
	border-top:white 2px solid;
	border-radius:3px;
	color:white;
	display:inline-block;
}

.main-navigation a i{
	font-size:0.8em;
	margin-right:10px;
}

h1.title{
	font-size:1.2em;
	border-left:var(--title-bar-color) 8px solid;
	border-bottom:var(--title-bar-color) 1px dotted;
	padding-left:8px;
	padding-bottom:8px;
}



input.btnAgent{
	border-radius:10px;
	background:Lavender !important;
	color:black !important;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-top:darkred 1px solid !important;
	border-right:darkred 1px solid !important;
	border-bottom:darkred 1px solid !important;
	border-left:darkred 15px solid !important;
}

input.btnAgent2{
	border-radius:10px;
	background:#b7daee !important;
	color:black !important;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-top:#1583B5 1px solid !important;
	border-right:#1583B5 1px solid !important;
	border-bottom:#1583B5 1px solid !important;
	border-left:#1583B5 15px solid !important;
}

.span-m-hidden{
	display:inline-block;
}

.span-m-visible{
	display:none;
}


.p-m-hidden{
	display:inline-block;
}

.p-m-visible{
	display:none;
}

.div-m-hidden{
	display:block;
}

.div-m-visible{
	display:none;
}


 @media screen and (max-width:800px) {
	.td-m-hidden {
	  display: none;
	}

	.span-m-hidden{
		display:none;
	}

	.span-m-visible{
		display:inline-block;
	}
}


.aqua-button {
  background-color: aqua;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 255, 255, 0.3); /* ÀºÀºÇÑ ±×¸²ÀÚ */
  transition: background-color 0.3s;
}

.aqua-button:hover {
  background-color: #00E0E0; /* È£¹ö ½Ã ¾à°£ ´õ ¾îµÎ¿î ¾ÆÄí¾Æ */
}

/*
.aqua-button-type2 {
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit;
  -webkit-tap-highlight-color: transparent;
}
*/


.aqua-button-type2 {
  text-decoration:none;
  border: 1px solid #0360df;
  border-radius: 10px;
  padding: 4px 6px;
  background-color: #0360df;
  background-image:
    radial-gradient(75% 50% at 50% 0%, #f4feff 12%, transparent),
    radial-gradient(75% 50% at 50% 85%, #8de3fc, transparent);
  box-shadow:
    inset 0 0 2px 1px rgba(255, 255, 255, .2),
    0 1px 4px 1px rgba(17, 110, 231, .2),
    0 1px 4px 1px rgba(0, 0, 0, .1);
  color: #fff;
  text-shadow: 0 1px 1px #116ee7;
  transition-property: border-color, transform, background-color;
  transition-duration: .2s;
  
  &:hover {
    transform: scale(1.04);
  }
  
  &:active {
    border-color: #0048d5;
    transform: scale(.96);
    background-color: #0048d5;
  }
}

.aqua-button-type2:hover {
  transform: scale(1.04);
}
.aqua-button-type2:active {
  border-color: #0048d5;
  transform: scale(0.96);
  background-color: #0048d5;
}



.aqua-button-type3 {
	text-decoration:none;
  position: relative;
  border: 1px solid #0360df;
  border-radius: 30px;
  padding: 4px 6px;
  background-color: #0360df;
  background-image: radial-gradient(75% 50% at 50% 0%, #f4feff, transparent), radial-gradient(75% 35% at 50% 80%, #8de3fc, transparent);
  box-shadow: inset 0 -2px 4px 1px rgba(17, 110, 231, 0.6), inset 0 -4px 4px 1px #8de3fc, inset 0 0 2px 1px rgba(255, 255, 255, 0.2), 0 1px 4px 1px rgba(17, 110, 231, 0.2), 0 1px 4px 1px rgba(0, 0, 0, 0.1);
  color: #fff;
  text-shadow: 0 1px 1px #116ee7;
  transition-property: border-color, transform, background-color;
  transition-duration: 0.2s;
}
.aqua-button-type3::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50px;
  width: 80%;
  height: 40%;
  background-image: linear-gradient(to bottom, #f4feff, transparent);
  opacity: 0.75;
}
.aqua-button-type3:hover {
  transform: scale(1.04);
}
.aqua-button-type3:active {
  border-color: #0048d5;
  transform: scale(0.96);
  background-color: #0048d5;
}