/* CSS Document */

@font-face{font-family:'Google Sans';font-style:normal;font-weight:400;src:url(res/g_font/4UaGrENHsxJlGDuGo1OIlL3Kwp5MKg.woff2)format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:400;src:url(res/g_font/4UaGrENHsxJlGDuGo1OIlL3Nwp5MKg.woff2)format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:400;src:url(res/g_font/4UaGrENHsxJlGDuGo1OIlL3Bwp5MKg.woff2)format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:400;src:url(res/g_font/4UaGrENHsxJlGDuGo1OIlL3Awp5MKg.woff2)format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:400;src:url(res/g_font/4UaGrENHsxJlGDuGo1OIlL3Owp4.woff2)format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:500;src:url(res/g_font/4UabrENHsxJlGDuGo1OIlLU94Yt3CwZ-Pw.woff2)format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:500;src:url(res/g_font/4UabrENHsxJlGDuGo1OIlLU94YtwCwZ-Pw.woff2)format('woff2');unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:500;src:url(res/g_font/4UabrENHsxJlGDuGo1OIlLU94Yt8CwZ-Pw.woff2)format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:500;src:url(res/g_font/4UabrENHsxJlGDuGo1OIlLU94Yt9CwZ-Pw.woff2)format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Google Sans';font-style:normal;font-weight:500;src:url(res/g_font/4UabrENHsxJlGDuGo1OIlLU94YtzCwY.woff2)format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Verdanas';font-style:normal;font-weight:400;src:url(res/verdana.woff2)format('woff2');}

html, body, h1, h2, h3, h4, h5, h6, p, input, button, div, span { margin:0; padding:0; border:0; border:none; box-sizing: border-box;}
textarea:focus, input:focus{
	outline: none;
}

#edit_container input[type="text"]:disabled { color: gray !important;}

.noselect, #choice_holder span {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

@media screen and (min-width: 350px) {
	div#pwd_container { border: 3px solid #1a73e8; }
	#ol_pwd { !background: rgba(0, 0, 0, 0.0); }
	div#ld_button_2 { right: 0px; }
}

/************* Login CSS **************/

#ol_pwd {
	position: fixed;
	left: 0;
	top:0;
	right: 0;
	bottom: 0;
}

#ld_button_2 {
	position: absolute;
	top: -57px;
	right: 5px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: #fff;
	z-index: 1;
	cursor: pointer;
}

#pwd_container {
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	padding: 0 10px;
	max-width: 350px;
	min-width: 320px;
	box-sizing: border-box;
	font-family: 'Google Sans';
	text-align: center;
	!border-top: 3px solid transparent;
	!border-bottom: 3px solid transparent;
	border-radius: 10px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
}
#ins_pwd {
	position: absolute;
	top: 17px;
	left: 13px;
	padding: 0 6px;
	font-size: 14px;
}

#pwd_holder {
	position: relative;
	margin: 0 auto;
	max-width: 300px;
	padding: 25px 0 0;
	overflow: hidden;
}
#pwd_container #pwd_field {
	width: 100%;
	height: 55px;
	border: 2px solid #1a73e8;
	padding: 10px 60px 10px 15px;
	font-family: 'Verdanas';
	font-size: 23px;
	text-align: left;
	border-radius: 5px;
}

#icons_holder {
	position: absolute;
	top: 27px;
	right: 2px;
	width: 50px;
	height: 51px;
	cursor: pointer;
	!background: grey;
}
#eye_icon {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 35px;
	display: block;
}
#eye_slash_icon {
	position: absolute;
	top: 10px;
	right: 8px;
	width: 39px;
	display: none;
}

#pwd_container input[type="submit"] {
	display: block;
	width: 130px;
	height: 46px;
	margin: 0 auto;
	font-family: 'Google Sans';
	font-size: 20px;
	border-radius: 23px;
	color: #fff;
	background: #1a73e8;
	cursor: pointer;
}

.cf-turnstile {
	width: 300px;
	height: 65px;
	margin: 19px auto 0;
}

#pwd_err_msg {
	display: table;
	width: 100%;
	min-height: 66px;
	padding: 10px;
	text-align: center;
	font-size: 18px;
}
#pwd_err_msg span {
	display: table-cell;
	vertical-align: middle;
	font-size: 20px;
	line-height: 22px;
	font-weight: 500;
}





#main_container {
	position: relative;
	max-width: 600px;
	margin: 20px auto 0;
	padding: 0 10px;
}

#page_title {
	font-family: 'Google Sans';
	font-size: 29px;
	text-align: center;
	font-weight: 500;
}

#amz_logo {
	max-width: 170px;
	margin: 10px auto 15px;
}
#amz_logo img {
	width: 100%;
	height: auto;
}

#lbl_cbox {
	display: block;
	margin: 0 auto;
	width: 130px;
}

/*************** Form CSS *****************/

input#show_form[type=checkbox]{
    display: none;
}
#show_form:checked ~ #out_form_container {
	height: 332px;
}
#btn_show_form {
	position: relative;
	display: block;
	width: 130px;
	height: 46px;
	margin: 0 auto;
	padding: 11px 0;
	font-family: 'Google Sans';
	font-size: 20px;
	font-weight: 400;
	text-align: center;
	border-radius: 23px;
	color: #fff;
	background: #1a73e8;
	cursor: pointer;
}

#out_form_container {
	position: relative;
	margin-top: 10px;
	overflow: hidden;
	height: 0px;
	transition: height 1s ease-in-out;
	!background: red;
}
#form_container {
	position: relative;
	margin: 0 auto;
	padding: 0 15px;
	max-width: 500px;
	border-radius: 10px;
	font-family: 'Google Sans';
}

#field_c {
	position: relative;
	padding-top: 25px;
}
#field_c p {
	position: absolute;
	top: 17px;
	left: 13px;
	padding: 0 6px;
	font-size: 14px;
	border-radius: 7px;
}

.f_price, .f_date {
	display: inline-block;
}
.f_price {
	width: 40%;
	padding-right: 15px;
}
.f_date {
	width: 60%;
}

#form_container input[type="text"] {
	width: 100%;
	height: 55px;
	padding: 5px 10px;
	font-family: 'Google Sans';
	font-size: 18px;
	text-align: center;
	border-radius: 5px;
	border: 2px solid #1a73e8;
}

#form_price::placeholder {
	font-size: 17px;
	font-weight: 500;
	!font-style: italic;
	color: #777;
}
#form_date::placeholder {
	font-size: 17px;
	font-weight: 500;
	!font-style: italic;
	color: #777;
}

#form_container input[type="submit"]  {
	display: block;
	width: 130px;
	height: 46px;
	margin: 0 auto;
	font-family: 'Google Sans';
	font-size: 20px;
	font-weight: 400;
	border-radius: 23px;
	color: #fff;
	background: #1a73e8;
	cursor: pointer;
}

#err_msg {
	display: table;
	width: 100%;
	min-height: 86px; /* 86 */
	padding: 10px;
	text-align: center;
	font-size: 18px;
}
#err_msg_cntnt {
	display: table-cell;
	vertical-align: middle;
}
#err_msg span {
	font-size: 20px;
	line-height: 22px;
	font-weight: 500;
}

#count_arts {
	margin-top: 10px;
	font-family: 'Google Sans';
	font-size: 20px;
	font-weight: 500;
}

#tools {
	position: relative;
}

#dropdown {
	position: relative;
	margin-top: 5px;
	display: table;
}
#dropdown p {
	position: relative;
	display: table-cell;
	vertical-align: middle;
	width: 125px;
	height: 46px;
	padding-left: 15px;
	border-radius: 23px;
	font-family: Google Sans;
	font-size: 18px;
	color: #fff;
	background: #1a73e8;
	cursor: pointer;
}
.arrow {
	position: absolute;
	top: 50%;
	margin-top: -2px;
	right: 25px;
	width: 10px;
	height: 10px;
	border-bottom: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg) translateY(-50%);
	transition: all 0.4s ease-in-out;
	transform-origin: 50% 0;
	cursor: pointer;
}
.arrow_up {
	margin-top: 3px;
	transform: rotate(-135deg) translateY(-50%);
}

#choice_container {
	position: relative;
	display: none;
	margin-top: 3px;
}
#choice_holder {
	position: absolute;
	top: 0;
	left: 0;
	font-family: Google Sans;
	border: 2px solid #1a73e8;
	border-radius: 10px;
	overflow: hidden;
}
#choice_holder span {
	display: block;
	padding: 10px 0;
	width: 215px;
	height: 40px;
	text-align: center;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

#ld_button {
	position: absolute;
	top: 0;
	right: 0;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: #fff;
	z-index: 1;
	cursor: pointer;
}
#sun {
	position: absolute;
	display: block;
	width: 34px;
	top: 6px;
	left: 6px;
	fill: #1a73e8;
}
#moon {
	position: absolute;
	display: block;
	width: 34px;
	top: 6px;
	left: 6px;
	fill: #1a73e8;
}

.green { color: #149f0e; }
.red { color: #db2e1c; }

.art_container {
	width: 100%;
	margin-top: 20px;
	font-family: 'Google Sans';
	font-size: 18px;
	text-align: center;
	border: 3px solid #1a73e8;
	border-radius: 20px;
}
.art_container:nth-child(1) {
	margin-top: 10px;
}

.art_container p {
	padding: 5px;
	font-weight: 500;
}

#art_desc {
	border-top: 1px solid #1a73e8;
	border-bottom: 1px solid #1a73e8;
}

#art_price {
	border-bottom: 1px solid #1a73e8;
}

#dates_table {
	display: table;
	width: 100%;
	!background: gray;
}

#purchase_d, #expire_d {
	display: table-cell;
	vertical-align: middle;
	width: 50%;
	padding: 5px 0;
}
#purchase_d { border-right: 1px solid #1a73e8; }

#purchase_d p, #expire_d p {
	border: none;
	padding: 0;
}

#miss_dates {
	border-top: 1px solid #1a73e8;
	padding: 5px;
}
#miss_dates p {
	padding: 0;
}
#last_d2 { font-size: 25px; }
#warr_expd {
	color: #db2e1c;
	font-size: 28px;
}

#edit_btns {
	border-top: 1px solid #1a73e8;
}
#edit_btns span {
	display: inline-block;
	width: 85px;
	padding: 3px 0;
	margin: 5px;
	background: #1a73e8;
	font-size: 15px;
	color: #fff;
	text-decoration: none;
	border-radius: 5px;
	cursor: pointer;
}

/* Delete Confirmation Box Dialogue */

#conf_ol, #edit_ol {
	display: none;
	z-index: 1;
	position: fixed;
	left: 0;
	top:0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.9);
}
#conf_box {
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	padding: 20px;
	width: 300px;
	box-sizing: border-box;
	font-family: 'Google Sans';
	text-align: center;
	font-size: 20px;
	border: 5px solid #1a73e8;
	border-radius: 15px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
}
#conf_box div {
	margin-top: 20px;
}
#conf_succ {
	font-weight: 500;
}
#no_conf, #yes_conf {
	margin: 0 10px;
	width: 90px;
	height: 40px;
	border-radius: 20px;
	font-family: 'Google Sans';
	font-size: 20px;
	color: #fff;
	background: #1a73e8;
	cursor: pointer;
}

/* Edit form CSS */

#edit_container {
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	padding: 0 15px;
	max-width: 500px;
	font-family: 'Google Sans';
	border-radius: 10px;
	overflow: hidden;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
}

#edt_field_c {
	position: relative;
	padding-top: 25px;
}
#edt_field_c p {
	position: absolute;
	top: 17px;
	left: 13px;
	padding: 0 6px;
	font-size: 14px;
}

.f_edt_price, .f_edt_date {
	display: inline-block;
}
.f_edt_price {
	width: 40%;
	padding-right: 15px;
}
.f_edt_date {
	width: 60%;
}

#edit_container input[type="text"] {
	width: 100%;
	height: 55px;
	padding: 5px 10px;
	font-family: 'Google Sans';
	font-size: 18px;
	text-align: center;
	border-radius: 5px;
	border: 2px solid #1a73e8;
}
#edit_container input[type="submit"] {
	display: block;
	width: 130px;
	height: 46px;
	margin: 0 auto;
	font-family: 'Google Sans';
	font-size: 20px;
	border-radius: 23px;
	color: #fff;
	background: #1a73e8;
	cursor: pointer;
}

#edt_err_msg {
	display: table;
	width: 100%;
	min-height: 66px;
	padding: 10px;
	text-align: center;
	font-size: 18px;
}
#edt_err_msg span {
	display: table-cell;
	vertical-align: middle;
	font-size: 20px;
	line-height: 22px;
	font-weight: 500;
}

#close_btn {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 45px;
    height: 45px;
	cursor: pointer;
	!background: #626262;
}
#close_btn:before, #close_btn:after {
    content: '';
    position: absolute;
    left: 21px;
    height: 45px;
    width: 3px;
    background-color: #fff;
}
#close_btn:before { transform: rotate(-45deg); }
#close_btn:after { transform: rotate(45deg); }

#ftr_container {
	position: relative;
	display: table;
	margin-top: 30px;
	padding: 10px;
	width: 100%;
	min-height: 70px;
	font-family: 'Google Sans';
	font-size: 18px;
	font-weight: 500;
	text-align: center;
	color: #fff;
	background: #1a73e8;
}
#ftr_container a {
	color: #fff;
	font-style: italic;
}
#ftr_cell {
	display: table-cell;
	vertical-align: middle;
	
}
#copyright {
	font-style: italic;
}

.warn60 {
	background: #db2e1c;
	animation: anim_bg 2s linear infinite;
}
.warn30 {
	background: #db2e1c;
	animation: anim_bg 1.5s linear infinite;
}
.warn15 {
	background: #db2e1c;
	animation: anim_bg 1s linear infinite;
}
.warn7 {
	background: #db2e1c;
	animation: anim_bg 0.5s linear infinite;
}
.expd {
	background: #db2e1c;
}
@keyframes anim_bg { 50% { background: rgba(219, 46, 28, 0.1); } }