a,abbr,acronym,address,applet,article,aside,audio,b,blockquote,big,body,center,canvas,caption,cite,code,command,datalist,dd,del,details,dfn,dl,div,dt,em,embed,fieldset,p,section,font,footer,form,.container > h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,keygen,label,legend,li,meter, object,ol,output,p,pre,progress,q,s,samp,section,small,span,source,strike,strong,sub,sup,table,tbody,tfoot,thead,th,tr,tdvideo,tt,u,ul,var{background:transparent;border:0 none;font-size:100%;margin:0;padding:0;border:0;outline:0;}
ol,ul{list-style:none;}
img{border:none;}
article, aside, audio,
canvas, command,
datalist, details,
embed,
p, section, footer,
header, hgroup,
keygen,
meter,
output,
progress,
section, source,
video{display:block;}
mark,
rp, rt, ruby,
summary,
time{display:inline;}
img{max-width:100%;}
form{width:100%;}
button{cursor:pointer;}
body{background-color:#fff;line-height:1em;color:rgb(51, 51, 51);font-weight:normal;font-size:1em;font-family:sans-serif;}
html,
body{min-height:100%;}
#site{position:relative;width:100%;margin:0 auto;}
#page{position:relative;width:1200px;height:auto;margin:0 auto;}

header{display: flex;position:relative;width:auto;font-size:0.8em;margin-bottom:25px;}
header img{margin:0 auto;width:250px;margin-top:30px;}
header .area{position:relative;width: 40px;text-align:center;margin:0;padding:10px 0 0 0;}
header .area:last-child{border-right:none;}
header a{text-decoration:none;color:rgb(51, 51, 51);font-weight:bold;}
header #logo{padding-left:10px;width:calc(100% - 120px);text-align:left;}
header #logo a{display:block;width:75%;}
header #logo-full{padding-left:10px;width:100%;text-align:center;}
header #logo-full a{display:block;width:100%;}
header #account a{display:block;background:url(../images/account.svg) no-repeat center 3px;background-size: 36px 36px;height:24px;padding: 46px 10px 0 10px;}
header #signout a, header #project-create a, header #back a{display:block;background:url(../images/signout.svg) #8cb339 no-repeat center 3px;background-size: 24px 24px;width:32px;height:32px;border-radius: 5px;text-indent: -9999px;letter-spacing: -99px;}
header #project-create a{display:block;background:url(../images/create_icon.svg) #8cb339 no-repeat center 3px;background-size: 24px 24px;}
header #back a{display:block;background:url(../images/back_ico.svg) #8cb339 no-repeat center 3px;background-size: 24px 24px;}
header .space {display:block;background-size: 24px 24px;}
header h1{width:100%;font-size:3.5em;text-align:center;padding:5px 0;line-height:1em;}

article, article h2{display:block;position:relative;width:100%;margin:0 auto;}
article{margin-bottom:15px;}

article h2{width:auto;background-color:#ec870e;padding:15px;margin:0;color:#fff;}
article form {flex-direction:column;}

article .foodfind{padding:20px 10px 10px 40px;background:url(../images/search.svg) no-repeat 15px 20px;background-size: 20px 20px;font-weight:bold;}
article .ctrl-item{display:flex;justify-content: flex-end;font-size:0.8em;width:100%;background:none;padding-top:10px;font-weight:bold;}
article .ctrl-item a{text-decoration:none;color:#e12319;border:1px solid #dfdfdf;padding:8px 10px;margin:1px 3px 1px 3px;background-color:#f9f9f9;}
article .ctrl-item a:first-child{margin-left:10px;}
article .ctrl-item a:last-child{margin-right:10px;}
article .fn{font-size:1em;}

article .ctrl-item a.create, article .ctrl-item a.edit, article .ctrl-item a.del, article .ctrl-item a.back, article .ctrl-item a.true, article .ctrl-item a.setting, article .ctrl-item a.close-window, article .ctrl-item a.on, article .ctrl-item a.off{padding-left:30px;}
article .ctrl-item a.create{background:url(../images/control-add.svg) no-repeat 8px center #f9f9f9;background-size: 16px 16px;}
article .ctrl-item a.edit{background:url(../images/control-edit.svg) no-repeat 8px center #f9f9f9;background-size: 16px 16px;}
article .ctrl-item a.del{background:url(../images/control-delete.svg) no-repeat 8px center #f9f9f9;background-size: 16px 16px;}
article .ctrl-item a.back{background:url(../images/control-back.svg) no-repeat 8px center #f9f9f9;background-size: 16px 16px;}
article .ctrl-item a.true{background:url(../images/control-true.svg) no-repeat 8px center #f9f9f9;background-size: 16px 16px;}
article .ctrl-item a.setting{background:url(../images/control-setting.svg) no-repeat 8px center #f9f9f9;background-size: 16px 16px;}
article .ctrl-item a.close-window{background:url(../images/control-close-window.svg) no-repeat 8px center #f9f9f9;background-size: 16px 16px;}
article .ctrl-item a.on{background:url(../images/control-on.svg) no-repeat 8px center #f9f9f9;background-size: 16px 16px;color:#17ab13;}
article .ctrl-item a.off{background:url(../images/control-off.svg) no-repeat 8px center #f9f9f9;background-size: 16px 16px;}





article .ctrl-item a:hover{border:2px solid #e12319;margin:0 2px 0 2px;}
article .ctrl-item a:first-child:hover{margin-left:9px;}
article .ctrl-item a:last-child:hover{margin-right:9px;}

article .ctrl-item a.on:hover{border:2px solid #17ab13;}


article .align-left{justify-content: flex-start;}
article .align-center{justify-content: center;}

article section{display:block;position:relative;width:auto;}
article section.check-point{display:flex;position:relative;}
article section.check-point a{display:block;padding:25px 0;width:150px;text-align:center;color:#fff;text-decoration:none;margin:0 auto;font-weight:bold;
    background: #53c4ec;
    background: -moz-linear-gradient(top,#53c4ec 0,#429dbd 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#53c4ec),color-stop(100%,#429dbd));
    background: -webkit-linear-gradient(top,#53c4ec 0,#429dbd 100%);
    background: -o-linear-gradient(top,#53c4ec 0,#429dbd 100%);
    background: -ms-linear-gradient(top,#53c4ec 0,#429dbd 100%);
    background: linear-gradient(to bottom,#53c4ec 0,#429dbd 100%);

	border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

article section.check-point a.checkin{
    background: #00ff00;
    background: -moz-linear-gradient(top,#00ff00 0,#006600 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#00ff00),color-stop(100%,#006600));
    background: -webkit-linear-gradient(top,#00ff00 0,#006600 100%);
    background: -o-linear-gradient(top,#00ff00 0,#006600 100%);
    background: -ms-linear-gradient(top,#00ff00 0,#006600 100%);
    background: linear-gradient(to bottom,#00ff00 0,#006600 100%);
}
article section.check-point a.checkout{
    background: #ff0000;
    background: -moz-linear-gradient(top,#ff0000 0,#660000 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ff0000),color-stop(100%,#660000));
    background: -webkit-linear-gradient(top,#ff0000 0,#660000 100%);
    background: -o-linear-gradient(top,#ff0000 0,#660000 100%);
    background: -ms-linear-gradient(top,#ff0000 0,#660000 100%);
    background: linear-gradient(to bottom,#ff0000 0,#660000 100%);
}

article section h3{width:auto;padding:0;margin:20px 15px 5px 15px;}

article section h3.tank{display:block;}
article section h3.tank > ul{display:flex;padding:0;margin:0;}
article section h3.tank > ul > li{display:block;width:50%;text-align:right;}
article section h3.tank > ul > li:first-child{text-align:left;}
article section h3.tank > ul > li > em{font-style:normal;color:#0000FF;}

article section output{display:none;border:2px solid rgb(0,153,0);background-color:rgba(0,153,0,.1);margin: 20px 15px 5px 15px;padding:10px;width:auto;font-size:0.8em;text-align:left;font-weight:bold;color:rgb(0,153,0);}
article section output.error{border-color:rgb(226,35,26);background-color:rgba(226,35,26,.1);color:rgb(226,35,26);}
article section output.completed{border-color:rgb(0,128,0);background-color:rgba(0,128,0,.1);color:rgb(0,128,0);}

article ul{display:flex;flex-wrap:wrap;padding:0;margin:0 10px;list-style:none;}
article ul li, article ul li a figure, article ul li a figure figcaption,article ul li a figure picture{display:block;position:relative;padding:0;margin:0;}

article.half-50{position:relative;width:50%;margin:0;}
article.preview-img{position:absolute;width:50%;right:0;top:0;}

figure picture img{}
article ul li a{text-decoration:none;}
ul li.text, ul li.text-center{display:block;font-size:0.8em;}
ul li.text-center{text-align:center;}
article ul li{width:20%;list-style:none;}
article ul li a figure{margin:10px;color:rgb(51, 51, 51);text-decoration:none;}
article ul li a figure figcaption{padding-top:5px;font-size:0.85em;font-weight:bold;}


article ul li a figure figcaption em{display:block;position:absolute;padding:5px 0 0 18px;top:0;right:0;font-style:normal;font-size:0.85em;background:url(../images/star.svg) no-repeat left 5px;background-size: 14px 14px;}
article ul li a figure figcaption em.ico-shop{background:url(../images/shop.svg) no-repeat left top;background-size: 24px 24px;padding-left:25px;}


article ul li a.noimg figure{margin:5px;padding:5px;border:1px solid #aaa;}
article ul li a figure figcaption .price{display:block;position:relative;background:none;font-size:1em;line-height:1.5em;font-weight:normal;}
article ul li a .tag{display:block;position:absolute;background-color:#00a45c;top:15px;left:4px;color:#fff;font-size:0.8em;font-weight:bold;padding:5px 20px;
	-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.5);
    -moz-box-shadow: 0 2px 5px rgba(0,0,0,.5);
    box-shadow: 0 2px 5px rgba(0,0,0,.5);
}
article ul li a .tag:before{
	content: ' ';
    position: absolute;
    width: 5px;
    height: 0;
    right: -10px;
    top: 0;
    border-width: 13px 10px;
    border-style: solid;
    border-color: #00a45c transparent #00a45c #00a45c;
}
article ul li a .tag:after{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 0;
    top: 100%;
    border-width: 3px 3px;
    border-style: solid;
    border-color: #666 #666 transparent transparent;
}
article ul li a .tag:nth-child(3){top:50px;}
article ul li a .tag:nth-child(4){top:85px;}


article ol{display:block;position:relative;margin: 20px 15px 5px 15px;border:1px solid #dadce0;font-size:0.8em;}
article ol > li{display:flex;position:relative;border-bottom:1px solid #dadce0;cursor:pointer;}
article ol > li:hover{background-color:#f1f3f4;}
/*article ol > li > div{display:block;position:relative;padding:12px 8px 8px 8px;margin:0;width:100%;border-right:1px solid #dadce0;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}*/
article ol > li > div{display:block;position:relative;padding:12px 8px 8px 8px;margin:0;width:9%;border-right:1px solid #dadce0;}
/*article ol li > div:last-child{border-right:none;width:10%;}*/
article ol li > div:last-child{border-right:none;}
article ol.tank-all li > div:last-child{width:33%;}
article ol > li.empty{border-bottom: 1px!important;}

article ol > li:first-child{border-bottom:2px solid #80868b;}
article ol > li:first-child:hover{background-color:#fff;cursor:auto;}
article ol > li:first-child > div{font-weight:bold;}

article ol li > div.edit{padding-right:28px;}
article ol li:hover > div.edit{background:url(../images/pen.svg) no-repeat right 10px center;background-size: 14px 14px;}
article ol li:first-child > div.edit{background:none;}

article ol li.cancel{color:rgb(226, 35, 26);}
article ol li > div.center{text-align:center;}
article ol li > div.right{text-align:right;}

article ol li.no-active{display:none;}
article ol li.no-active form {font-size:1.25em;}
article ol li.no-active:hover{background-color:#fff;cursor:auto;}

article ol ol, article ol li .ctrl-item{font-size:1em;}
article ol ol{background-color:#fafafa;}
article ol ol > li:first-child:hover{background-color:#fafafa}

article ol.location-history, article ol.location-history{margin-left:0;margin-right:0;}
article ol.location-history > li > div, article ol.leave-accept > li > div{text-align:center;}
article ol.location-history > li > div{width:25%;}
/*article ol.location-history > li > div:first-child{width:75%;}
article ol.location-history > li > div:last-child(4){width:25%;}*/

article ol.location-history > li.leave-empty, article ol.leave-accept > li.leave-empty{display:block;text-align:center;padding:25px;width:calc(100% - 50px);cursor: auto;font-style: italic;color:#999;}

article ol.leave-accept > li > div{width:20%;}

section.leave-desc > ul > li > strong{width:120px;}
section.leave-desc > ul > li{border-bottom:1px solid #ccc;padding-bottom:3px;}
section.leave-desc > ul > li.non-border{border-bottom:none;}

/* SELLER PAGE ===============================================================================================*/
article ol.seller-food-category > li > div{width:12%;text-align:center;}
article ol.seller-food-category > li > div:first-child{width:76%;text-align:left;}

article ol.seller-food-option > li > div{width:12%;text-align:center;}
article ol.seller-food-option > li > div:first-child{width:52%;text-align:left;}

article ol.seller-food-option-sub > li > div{width:12%;text-align:center;}
article ol.seller-food-option-sub > li > div:first-child{width:64%;text-align:left;}

article ol.seller-food > li > div{width:10%;text-align:center;}
article ol.seller-food > li > div:first-child{width:45%;text-align:left;}
article ol.seller-food > li > div:nth-child(5){width:15%;}

article ol.seller-delivery-period > li > div{width:12%;text-align:center;}
article ol.seller-delivery-period > li > div:first-child{width:76%;text-align:left;}
/* END SELLER PAGE ===========================================================================================*/

article ol > li > div.text-info{padding:50px 8px;text-align:center!important;width:auto;margin:0 auto;background-color:#fff;cursor:auto;}

div.shared{display:flex;position:relative;}
div.shared article{width:100%;border-right:1px solid #ccc;}
div.shared > article:last-child{border-right:none;}
div.shared article h2{margin:0 0 0 5px;}

div.shared article#shop ul li, div.shared article#food ul li{width:25%;}
div.shared article#food ul li a figure{display:block;background:url(../images/plus.svg) no-repeat right bottom;background-size: 40px 40px;}
div.shared article#food section{border-bottom:1px solid #ccc;}
div.shared article#food section:last-child{border-bottom:none;}

/* ASIDE =========================================================================================================*/
div.shared aside{display:block;position:relative;width:20%;border-right:1px solid #ccc;margin-bottom:15px;}
div.shared aside h3{position: relative;width:auto;background-color:#00a45c;padding:10px;margin:0 5px 5px 0;color:#fff;font-size:0.85em;}
div.shared aside ul{margin:5px 5px 15px 5px;}
div.shared aside ul li{margin-bottom:10px;font-size:0.8em;}
div.shared aside ul li:first-child{margin-top:10px;}
div.shared aside ul li a{display:block;position:relative;text-decoration:none;color:#000;padding-left:15px;}
div.shared aside ul li a:before{
    content: ' ';
    position: absolute;
	width: 0; 
	height: 0; 
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;  
	border-left: 5px solid #000;
	left:5px;
	top:3px;
}
/* END ASIDE =========================================================================================================*/

form{display:flex;position:relative;width:100%;padding:0;margin:0 0 10px 0;}
form > section > div, form > section > ul > li > div{display:block;position:relative;margin:0;padding:0;width:100%;}
form > div > label, form ul li > label, form ul li > div > label{display:block;position:absolute;left:5px;top:-8px;z-index:1;background-color:#fff;padding:0 5px;font-size:0.8em;}
form input, form button, form select, form textarea{display:block;position:relative;border:1px solid #a9a9a9;padding:15px;width:100%;font-weight:bold;color:#0075ff;}
form textarea{height:100px;}
form input.submit{background-color:#e2231a;color:#fff;width:100%;height:100%;border:none;padding:12px;font-size:1em;font-weight:bold;border-radius: 10px;background: linear-gradient(to bottom,#ff0000 0%,#880000 100%);}
form input.submit-mini{width:50%;margin: 0 auto;}

form input.submit-yellow{background-color:#ffc832;}
form input.submit-blue{background-color:#0000ff;}
form .password{display:flex;}
form input.mini{padding:5px;width:calc(80% - 10px);}

form .location{display:flex;}
form .food-keyword{display:block;}
form .location, form .food-keyword{position:relative;width:100%;margin-left:10px;}
form .location input, form .password input{width:95%;border-right:none;}
form .location button, form .password button{width:5%;border-left:none;background:url(../images/pointer.svg) no-repeat center center;background-size: 20px 20px;}
form .password button{background: url(../images/eye-close.svg) no-repeat center center;background-size: 20px 20px;}
form .password button.eye-open{background: url(../images/eye.svg) no-repeat center center;background-size: 20px 20px;}

form .find{width: 15%;margin-left:10px;margin-right:10px;}

form ul, dl{display:block;position:relative;width:100%;padding:0;margin:0 25px;}
article form ul{width:auto;margin-top:10px;}
form ul li, dl dt{display:flex;position:relative;padding:0;margin:15px 0;width:auto;flex-wrap:wrap;}
form ul li a, dl dt a{text-decoration:none;color:#00a45c;}
dl dt{margin: 5px 0 0 0;font-size:0.9em;}
dl dt > div{width:5%;text-align:left;margin:0 5px 0 0;}
dl dt sub{display:block;font-size:0.75em;}
dl dt.line-top{border-top:1px solid #ccc;margin-top:15px;padding-top:15px;}
dl dt.heavy{font-weight:bold;}
article ol li.cancel dl dt.line-top{border-color:rgba(226, 35, 26, 0.3);}

.inform{display:block;position:absolute;}
/* MODEL =============================================================================*/
.modal{display:none;position:absolute;width:30%;top:100px;right:10px;background-color:#fff;border:1px solid #a9a9a9;z-index:2;-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.5);-moz-box-shadow: 0 2px 5px rgba(0,0,0,.5);box-shadow: 0 2px 5px rgba(0,0,0,.5);}
.modal > a.close{display:block;position:absolute;right:5px;top:5px;background:url(../images/close.svg) no-repeat left top;padding:0;margin:0;background-size: 25px 25px;width:25px;height:25px;text-indent: -9999px;letter-spacing: -99px;}

.modal h2{display:block;position:relative;width:auto;margin:10px;padding:15px 0;border-bottom:1px solid #ccc;text-align:center;font-weight:bold;font-size:1.2em;}
/* END MODEL =============================================================================*/

#send-addr{width:60%;}

#order{width:40%;}
#order div:nth-child(1){width:70%;}
#order div:nth-child(2){text-align:right;}
#order div:nth-child(3){text-align:center;}
#order div:nth-child(4){text-align:left;}
#order div:nth-child(5){text-align:right;width:15%;margin-right:0;}
#order div:nth-child(2) a, #order div:nth-child(4) a{font-size:1.25em;font-weight:bold;}

#order ul li{margin-bottom:5px;margin-top:0;}

ol > li > div{width:10%;}
/*ol > li > div:nth-child(2){width:50%;}*/
ol > li.info > dl{margin:15px 50px 25px 50px;}
ol > li.info div:nth-child(1){width:80%;}
ol > li.info div:nth-child(2){width:10%;text-align:center;}
ol > li.info div:nth-child(3){width:10%;text-align:right;}

.modal form .location{margin-left:0;}
.modal form .find{margin-right:0;}

p{padding:0;margin:0 15px 10px 15px;line-height:1.25em;font-size:0.75em;line-height:1.5em;}

nav{display:block;position:relative;width:100%;}
nav ul, nav ol{display:flex;position:relative;margin:15px 0;padding:20px 0 15px 0;border-bottom:1px solid #ccc;}
nav ul{border-top:1px solid #ccc;}
nav li{display:block;padding:0 15px;}
nav ul li{border-right:1px solid #ccc;}
nav ol li:after{
	position:absolute;
	content: ' ';
	border: solid black;
	border-width: 0 1px 1px 0;
	display: inline-block;
	padding: 2px;
	margin-left:10px;
	top:50%;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);  
}
nav ol li:last-child:after{border:none;}
nav li:first-child{padding-left:0;}
nav a{text-decoration:none;color:#000;}



nav.tab-menu{}
nav.tab-menu > ul{border:none;padding:0;margin:0 0 -1px 0;}
nav.tab-menu > ul > li{border-top: 1px solid #ccc;padding:0;background-color:#eee;}
nav.tab-menu > ul > li:first-child{border-left: 1px solid #ccc;}
nav.tab-menu > ul > li.selected{border-top:1px solid #ccc;border-left:1px solid #ccc;border-right:1px solid #ccc;border-bottom:none;z-index:1;background-color:#fff;font-weight:bold;}
nav.tab-menu > ul > li > a{display:block;padding:15px;color:#666;}
nav.tab-menu > ul > li.selected > a{color:#000;}

article.leave{border: 1px solid #ccc;padding:10px;width:auto;}
article.leave > section{margin-top:35px;}

article.leave > section.year{text-align:center;}

article.leave > div.fullname{display:block;position:absolute;padding:0 10px;background-color:#fff;top:-10px;left:15px;font-size:1.5em;}


article.leave > section.leave-count > ul{width:80%;margin:0 auto;}
article.leave > section.leave-count > ul > li{display:block;text-align:center;border:1px solid #ccc;width:calc(20% - 22px);padding:10px;margin:0 10%;font-weight:bold;}
article.leave > section.leave-count > ul > li:first-child{margin-left:0;}
article.leave > section.leave-count > ul > li:last-child{margin-right:0;}
article.leave > section.leave-count > ul > li > em{display:block;font-style:normal;font-weight: bold;color:#ff0000;padding-top:15px;font-size:1.25em;}

.calendar-form{background: url(../images/calendar.svg) no-repeat 99% center;background-size: 23px 23px;cursor: pointer;}

select{padding:5px 10px;}

article.leave > section.requirement{margin:0;}

footer{display:flex;position:relative;flex-wrap:wrap;width:100%;background-color:#fff;padding:0;margin:15px 0 0 0;color:#000;}
footer address{display:block;position:relative;width:65%;padding:0;margin:0;font-style:normal;}
footer address p{padding:0;margin:0 20px;}
footer address a{color:#fff;}

footer > nav{display:flex;position:relative;width:35%;font-size:0.75em;line-height:1.5em;}
footer > nav > div{display:block;position:relative;width:100%;}
footer > nav > div > ul{display:block;border:none;padding:0;margin:0;}
footer > nav > div > ul > li{padding:0;margin:0 15px 0 0;border:none;}
footer > nav > div > ul > li:after{border:none;}
footer > nav a{color:#fff;text-decoration:none;line-height:2em;}


footer #nav-link{display:block;position:relative;width:100%;padding:0; margin:0;}
footer #nav-link p{display:block;position:relative;width:auto;padding:15px 0 0 0;margin:0 20px;text-align:center;}
footer #nav-link p a{color:#000;}
footer #nav-link p a:visitor{color:#000;}

footer #copyright{display:block;position:relative;width:100%;padding:0; margin:0;}
footer #copyright p{display:block;position:relative;width:auto;padding:15px 0 10px 0;margin:0 20px;text-align:center;}

.bor-red{border-color:#00a45c!important;}
.clearfix:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}
.clearfix{display:table;}

/*Form input*/
li.input-checkmark{border: 1px solid #a9a9a9;min-height:30px;padding:5px 0 10px 0;}
li.input-checkmark > div{display:flex;width:auto;padding:10px 10px 0 10px;align-items:center;}
li.input-checkmark > div > label{position:relative;left:auto;top:auto;width:auto;font-weight:bold;}
li.input-checkmark > div > input{width:15px;margin:0;}


/*Full page.*/
article.separate{padding:0 5%;}

article section.w-50{width:50%;margin-left:auto;margin-right:auto;}

article section.multi-col{display:flex;flex-wrap: wrap;}
article section.multi-col h3, article section.multi-col output{width:100%;}
article section.multi-col > div{display:flex;}
article section.multi-col > div ul{width:100%;}
article section.multi-col .submit{width:50%;margin-left:auto;margin-right:auto;}

article ul.month-year{display:flex;position:relative;border:1px solid #ccc;margin:0;}
article ul.month-year li{display:block;position:relative;width:50px;}
article ul.month-year li:nth-child(2){width:calc(100% - 100px);text-align:center;font-weight:bold;padding-top:15px;}
article ul.month-year li:first-child, article ul.month-year li:last-child{text-indent: -9999px;letter-spacing: -99px;}
article ul.month-year li:first-child a, article ul.month-year li:last-child a{display:block;width: 50px;height: 50px;}
article ul.month-year li:first-child{background: url(../images/back_icon.svg) left top no-repeat;}
article ul.month-year li:last-child{background: url(../images/next_icon.svg) left top no-repeat;}



.processing{display:none;position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%;background-color: rgba(0,0,0,0.8);z-index:10;}
.off-data{opacity: 0.33;font-size:0.875em;}

.col-10{width:10%;}
.col-20{width:20%;}
.col-30{width:30%;}
.col-40{width:40%;}
.col-50{width:50%;}
.col-60{width:60%;}
.col-70{width:70%;}
.col-80{width:80%;}
.col-90{width:90%;}

/*
.processing .loading{
	position:absolute;
	top:0;
	left:50%;
	border: 12px solid rgba(0,0,0,0);
	border-top: 12px solid #00a45c;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
*/

.loading {
  display: inline-block;
  position: absolute;
  width: 80px;
  height: 80px;
	top:0;
	left:50%;
}
.loading div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid #fff;
  border-radius: 50%;
  animation: loading 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}
.loading div:nth-child(1) {
  animation-delay: -0.45s;
}
.loading div:nth-child(2) {
  animation-delay: -0.3s;
}
.loading div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#upload_target{display:none;width:0;height:0;}
/*#upload_target{display:block;width:500px;height:200px;border:1px solid #000;}*/

.googlemap{display:block;height:100%;}
/*.googlemap div{display:block;}*/

.co-working{display:none;position:relative;width:auto!important;border:none;}
.co-working h2, .co-working h3{text-align:left;}

h3.optical-50{background-color:rgba(0,0,0,0.3)!important;}

/* The switch - the box around the slider */
.switch {
  position: absolute;
  right:8px;
  top:9px;
  display: inline-block;
  width: 30px;
  height: 18px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 20px;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #17ab13;
}

input:focus + .slider {
  box-shadow: 0 0 1px #17ab13;
}

input:checked + .slider:before {
  -webkit-transform: translateX(12px);
  -ms-transform: translateX(12px);
  transform: translateX(12px);
}

.textarea{width:100%;height:150px;}

input[type="radio"]{width:auto;}

.lh-status{font-size:1.25em;line-height:2.5em;}

.tank-img img{height:150px;}
.comment-img{width:20px;vertical-align:text-top;margin-top:-3px;}

.forgot-password{text-align:center;}
.forgot-password a {text-decoration: none;}
.forgot-password a:visited{color:#0000ff;}

.failed{color:#ff0000;}

.tank-input > li > div{width:25%;text-align:center;}
.tank-input > li > div:first-child{width:50%;text-align:left;}
.tank-input > li > div.multi2col{width:50%;padding:12px 16px 8px 17px;}
.tank-input > li > div > input{display:inline;}

.tank-all > li > div{width:33%;}

.hilight-green{background-color:rgba(0,255,0,0.3);}
.hilight-green:hover{background-color:rgba(0,255,0,0.5);}
.hilight-red{background-color:rgba(255,0,0,0.3);}
.hilight-red:hover{background-color:rgba(255,0,0,0.5);}

.pressure{padding-right:15px;}

#year_index{font-size:1.5em;}

#date-end{display:none;}

.display-mobile{display:none;}




/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
	body{width:100%;}
	#page{width:100%;}

	nav{width:95%;margin:0 auto;}
	article.leave{width: calc(95% - 22px);}
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
	article section.w-50{width:80%}

	.display-pc{display:none;}
	.display-mobile{display:inline;}

	article.half-50{position:relative;width:100%;margin:0 auto;}
	article.preview-img{position:relative;width:100%;}
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
	header #logo{width:80%}
	header .area{width:20%}

	.tank-input > li > div{width:25%;}
	.tank-input > li > div:last-child{width:25%;}
	.tank-input > li > div:first-child{width:50%;}
	.tank-input > li > div.multi2col{width:50%;}
}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
	header #logo{width:70%}
	header .area{width:30%}

	.lh-status{font-size: 1em;line-height:2em;}
	article section h3.tank > ul > li:first-child{width:60%;}
	article section h3.tank > ul > li:last-child{width:40%;}
	.tank-img img{height:100px;}

	article ol{margin-left:5px;margin-right:5px;}

	.tank-input > li > div{width:30%;}
	.tank-input > li > div:last-child{width:30%;}
	.tank-input > li > div:first-child{width:40%;}
	.tank-input > li > div.multi2col{width:60%;}
}

/* My Devices, Phones */ 
@media only screen and (max-width : 400px) {
	header{margin-bottom:5px;}
	header #logo a{width: 70%;}
	.lh-status{font-size: 0.875em;line-height:2em;}
	.tank-img img{height:90px;}

	.tank-input > li > div.multi2col{padding-left:6px;padding-right:6px;}

	.pressure{padding-right:0px;}

	article.leave > section.leave-count > ul{width:95%;}
	article.leave > section.leave-count > ul > li{
		width: calc(26.5% - 22px);
	    padding: 10px;
	    margin: 0 5%;	
	}

	.comment-img{margin-top:0;}

/*	article ol.location-history > li > div{writing-mode: vertical-lr;}*/

}

/***** Bootstrap 3 Media Queries *****/
@media only screen and (max-width : 320px) {
	header #logo{width:60%}
	header .area{width:40%}
	header #logo a{width: 80%;}
	header #signout a{background-size: 24px 24px;padding-top:32px;height:auto;}
}