:root{
	--base-color:#546e7a;
	--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;
}

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

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:90px 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;
}




/* 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:25px 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;
	
	
	
	/*
	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:6px;
}


.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;
}



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;
	}
}