/*!
 *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
/* FONT PATH
 * -------------------------- */
 @import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,400,500,700|Poppins:100,400,600,700');

 @font-face {
   font-family: 'FontAwesome';
   src: url("../fonts/fontawesome-webfont.eot?v=4.7.0");
   src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff2?v=4.7.0") format("woff2"), url("../fonts/fontawesome-webfont.woff?v=4.7.0") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.7.0") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular") format("svg");
   font-weight: normal;
   font-style: normal; }

.fa-icon:before { font-family: "FontAwesome" !important; display: block; position: absolute; font-size: 16px; line-height: inherit; height: inherit; }
.fa-thumbs-up:before {content:"\f164";width: 18px;height:18px;font-size:18px;top: calc(100%/2 - 12px);left: calc(100%/2 - 12px);}

html,body{padding:0;margin:0;
}

html:has(main.fixed),
body:has(main.fixed) {
    overflow: hidden;
}

*{font-family:"Noto Sans JP", "Poppins", "Helvetica Neue", Helvetica, "Meiryo", Arial, "Lucida Grande", sans-serif;    background-repeat: no-repeat;}

ul{padding:0;margin:0;margin-bottom:auto;}
li{list-style:none;line-height:44px;height:44px;padding-left:16px;cursor:pointer;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:60px;border-bottom:1px solid #D0C9C3;font-size:1rem;background-color:white;

}
li.on{color:#5F5BFF;font-weight:bold;}
button{text-align:center;-webkit-appearance:none;-moz-appearance:none;border:0;padding:0;margin:auto;outline:0;
    height:36px;line-height:36px;width:auto;text-align:center;display:block;padding-left:24px;padding-right:24px;
    background-color:#D0C9C3;color:white;
    border-radius:4px;cursor:pointer;box-sizing:border-box;font-size:1rem;
    box-shadow:0 1px 2px 1px rgba(0,0,0,0.2);
}

p{text-align:center;padding:8px 20px 8px 20px;}
button:active{background-color:#4C49CC;box-shadow:none;}
header,footer{position:fixed;width:100vw;text-align:center;box-sizing:border-box;z-index:100;}
header{top:0;border-bottom:1px solid #D0C9C3;font-weight:normal;height:36px;line-height:36px;background-color:transparent !important;color:#AAB2BD;text-shadow:inset 0 0 2px 1px rgba(0,0,0,0.5);}

footer{background-color:transparent;bottom:0;
    height:96px;line-height:72px;
}
main{
    position:relative;
    width:100vw;
    min-height:calc( 100vh - 96px );
    /* min-height: 100vh; */
    margin-bottom:96px;
    overflow-y:auto;
    /* overflow: hidden; */
    padding-top:0;
    /* background-color:#F8F6F5; */
    display:flex;
    flex-direction:column;
    -webkit-overflow-scrolling: touch;
    align-items: stretch;
}
footer button{width:80%;margin-top:4px;height:54px;line-height:54px;}
cite{display:relative;text-align:center;color:#AAB2BD;font-size:.8rem;line-height:44px;height:44px;font-weight:lighter;font-style:normal;width:100%;text-align:center;display:block;margin-bottom:0;
    background-image:url("/images/white-label-web.svg");background-position:center;
    background-repeat:no-repeat;
}
cite.vip, 
.pro-plan cite, 
.standard-plan cite{
    display:none !important;
}

main.nofooter { height:calc( 100vh); }
main.nofooter > .ico-finish {margin-top:calc(100vh/2 - 100px);margin-bottom: 15px;width:100%;height:60px;background-image:url('/images/ico_info.svg');background-size:60px 60px;background-position: center;background-repeat:no-repeat;}
main.nofooter > p { font-size: 1rem; }
main.nofooter cite { position: absolute; bottom:0; }
main.inquiry {background-color:#F8F6F5;display:flex;box-sizing:border-box;}
main.inquiry form{flex:1;margin-bottom:16px;    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
}
main.inquiry textarea{
    border:0;flex:1;height:100%;margin:16px;font-size:14px;padding:16px;box-sizing:border-box;
    border-radius:8px;max-width:100%;
}
main.inquiry + footer{background-color:#F8F6F5;}


main.checkbox + footer::after,
main.radio + footer::after,
main.tasklist + footer::after,
main.mytasklist + footer::after{
    content:"";position:absolute;
    width:120px;height:4px;border-radius:4px;background-color:#222;
    bottom:22px;left:50%;margin-left:-60px;opacity:0.7;
}

.a1{background-color:#5F5BFF;color:white;}
.a1t{color:#5F5BFF;cursor: pointer;}

#mask{position:fixed;top:0;bottom:0;left:0;right:0;background-color:rgba(36,36,36,0.4);z-index:100;
}
ul#checkbox.dates li,
ul#radio.dates  li{
    display:flex;flex-direction:row;justify-content: space-between;
}
ul#checkbox.dates li.disabled,
ul#radio.dates li.disabled{
    background-color:#D0C9C3; color: #999
}
.times{width:180px;position:fixed;top:0;right:0;height:100vh;background-color:#FFF;
    overflow:hidden;overflow-y:auto;
    border:0;
}
.times ul#checkbox,.times ul#radio{
    height: calc(100% - 100px);
}
.times ul#checkbox li,
.times ul#radio li{width:120px;margin-left:30px;padding-right:0;
    
}
.times li.on{background-color:#5F5BFF;color:#fff;}
.times li.disabled{background-color:#D0C9C3; color: #999}
.times footer{width:180px;box-sizing:border-box;background-color:transparent;}
/*
ul#dates li{display:flex;justify-content: space-between !important;}
ul#dates li.disabled{background-color:#F8F6F5; color: #999}
ul#dates li.on b{font-weight:bold;}
ul#dates li.sel span{color:#5F5BFF;font-weight:600;}
ul#dates li.sel b.w0,ul#dates li.sel b.w6{color:#5F5BFF}
ul#dates li b{font-weight:normal;font-size:0.9rem;}
ul#dates li b.w0{color:#FF1A10;}
ul#dates li b.w6{color:#5F5BFF;}
ul#dates li span.time{padding-right:10px;}
*/

ul#checkbox,ul#tasklist,ul#mytasklist,ul#radio{
    position: relative;
    overflow-x: hidden; 
    /*height:calc(100% - 48px); */
}

ul#checkbox li,ul#tasklist li,ul#mytasklist li,ul#radio li{
    width:84%;min-width:0;margin-left:8%;margin-right:8%;
    box-sizing:border-box;
    text-indent:16px;background-image: url(/images/ico-check-off.svg);
    background-position:4px 14px;
    border-color:#ECEAE8;
    height:48px;line-height:48px;
    color:#222;
    padding-left:24px;padding-right: 16px;
    display: flex;
    justify-content: space-between;
}
ul#checkbox li select,ul#tasklist li select,ul#mytasklist li select,ul#radio li select{
    border: none;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    height: 48px;
    line-height: 48px;
    position: absolute;
    right: 0px;

    color:#222 !important;
    background-color: transparent !important;;
    width: 50px;
}

ul#checkbox li div.quantity:after,ul#tasklist li div.quantity:after,ul#mytasklist li div.quantity:after,ul#radio li div.quantity:after{
    content: '>';
    /* display: block; */
    color:#222 !important;
}

ul#checkbox li.group,ul#radio li.group,ul#tasklist li.group{
    background-image:none;padding-left:0;
    font-size: 13px;
    border-bottom: 0;
    font-weight: bold;
    text-align: center !important;
    display: block;
    background-color: #f8f6f5;
    margin-top: 8px;
    height: 40px;
    line-height: 40px;
}

ul#checkbox b,ul#tasklist b,ul#mytasklist b,ul#radio b{font-weight:normal;}
ul#checkbox li.on,ul#tasklist li.on,ul#mytasklist li.on,ul#radio li.on{
    background-image: url(/images/ico-check-on.svg);
    font-weight:normal;
}
ul#radio li{background-image: url(/images/ico-radio-off.svg);}
ul#radio li.on{background-image: url(/images/ico-radio-on.svg);}
ul#tasklist li, ul#mytasklist li{
    padding-left: 26px;
}
ul#tasklist li.on, ul#mytasklist li.on{
    text-decoration:line-through;
}
ul#tasklist li span ,ul #mytasklist li span {
    pointer-events:none;
}

main ul li.list-msg {
    background-image:none !important;
    height:auto !important; border:0px;
    padding:10px 0px 0px 0px !important;
    text-indent:0px !important; text-align: left !important;color:#222;
    white-space:pre-wrap;word-wrap: break-word;word-break: break-word;
    height:auto; line-height: 20px !important;
    font-size: 14px;
}
main ul li.list-msg.empty {
    /* padding-top:30px !important; */
    /* text-align: center !important; */
}


.pop_menu_box {
    display: flex; position: fixed; left:0;right:0;bottom:-100%;
    background-color: transparent; padding:0; 
    padding-bottom:16px;
}
.pop_menu_box>ul{width:100%;margin:0;padding:0;text-align:center;}
.pop_menu_box>ul>li{width:80%; height:48px; margin:auto; padding:0px; border: 0px; line-height:48px; text-align: center;border-radius:8px;}
.pop_menu_box>ul>li.space  { height:1px; border-bottom: 1px solid #EDEFF5; }
.pop_menu_box>ul>li.gspace { height:8px; border-bottom: 1px solid #EDEFF5; background-color: transparent; }
.pop_menu_box.hide { bottom:-100%; transition:bottom .2s ease-out; -webkit-transition:bottom .2s ease-out;}
.pop_menu_box.show { bottom:0; transition:bottom .2s ease-out; -webkit-transition:bottom .2s ease-out; }

.cmt-view {position:absolute;top:0;left:0;width:100vw;height:100vh;bottom:0;background-color:#F8F6F5;z-index:1;color:#2F323A;overflow-y:scroll;overflow-x: hidden;-webkit-overflow-scrolling: touch;}

.cmt-view.sub-view {left:100vw;}
.cmt-view.sub-view.show {left:0;transition:left 0.2s ease-out;-webkit-transition:left .2s ease-out;}
.cmt-view.sub-view.hide {left:100vw; transition:left 0.2s ease-out; -webkit-transition:left .2s ease-out; }



main.comments {z-index:1;
    height:auto;
    padding: 44px 0px 0 0px;
    margin-bottom:0;
    /* background-color:white; */
    /* overflow:auto;-webkit-overflow-scrolling: touch; */
}
main.comments ul { margin-bottom:-44px;flex:1;}
main.comments .hide { display: none; }
main.comments .show { display: block; }
main.comments ul>li {display:flex; padding: 5px 0.75rem 0px 0.75rem; border:0px;}
main.comments ul.empty li.empty-data  { padding:20px 16px; }
main.comments ul.empty li.loading-box { margin-top:40px; }
main.comments .loading-box { visibility:visible; display:block; position:relative; padding:0px;  width:100%; height:40px; background-color: #F8F6F5;}
main.comments .loading-box>div { position: relative; margin: 4px auto 0px auto;  width:32px; height:32px; background-size: 32px 32px; background-image:url("/images/ico_ec_w_spinner.svg"); }
main.comments .loading-box.hide { visibility: hidden; }
main.comments .avatar-box { width:40px; height:40px;}

.cmt-view header {display:flex; height:44px; line-height:44px; 
    background-color:white !important/*transparent !important*/;color:#222;
    border-bottom:0;    padding-left: 20px;
}
.cmt-view header .comment, 
.cmt-view header .like { font-size:0.8rem; margin-right:16px;background-position: left center;
    padding-left: 20px;}
.cmt-view header .comment{background-image: url(/images/ico_comment_gray.svg);}
.cmt-view header .like{background-image: url(/images/ico_heart_gray.svg);}
.cmt-view header .comment>label,
.cmt-view header .like>label {margin-right:8px;color:#222;}
.subcmt-header { padding:0px !important;}
.subcmt-header>div:nth-of-type(1) { width:44px;}
.subcmt-header .comment { position: absolute; top:0;left:44px; right:44px; bottom:0; }
.cmt-view main{    overflow-y: auto;
    /* margin-bottom: 0; */
    padding-bottom: 60px;
    height: calc( 100% - 172px );
    background-color: #F8F6F5;
    padding: 16px;
    box-sizing: border-box;
    padding-bottom: 60px;
}
.cmt-view .hide{display:none;}
.cmt-view .show{display:block;}
.cmt-view main ul{flex:1;padding-top: 44px;box-sizing:border-box;}
.cmt-view main>ul>li{padding-top:4px;padding-right:16px;}
/* .cmt-view main>ul>li:nth-last-child(2) { border-bottom: 1px solid #D0C9C3;} */
/* .cmt-view main>ul>li:nth-last-child(2) .content { border:0px;padding-right: 16px;} */
.cmt-view footer { height:128px;line-height:60px; background-color:#F8F6F5;
    
}
.cmt-view p{
    padding: 0;
    margin: 0;
    text-align: left;
    font-size: 14px;
    color: #666;
    line-height: 22px;
    height: auto;
    width: calc(100% - 32px);
}
.cmt-view .empty-data {background-color: #F8F6F5; border:0px !important; text-align: center; height:150px;line-height: 150px; }
.cmt-view .parent-cmt { border-bottom:5px solid #F8F6F5; padding-top:12px; padding-bottom:12px;}
.cmt-view .parent-cmt .content {border:0px !important; }
.cmt-view .sub-cmt { background-color: #FFF; }
.cmt-view .item {display:flex; height:auto;
    border-bottom: 0;
    margin-bottom: 12px;
    border-radius: 8px;
    box-shadow: 2px 3px 2px 0px rgba(0,0,0,0.06);
}
.cmt-view .item .content {
    flex:1; display:flex; flex-direction: column; padding:0px 0px 8px 0px;
}
.cmt-view .name-box {display:flex;flex-direction: row;position: relative; width:100%;}
.cmt-view .name-box span{color:#222;font-size:14px;}
.cmt-view .name-box>div{float:right; position: relative; top:0; right:0;}
.cmt-view .like-count { 
    width: 20px;
    height: 20px;
    position: absolute;
    right: 16px;
    top: 40px;background-size:auto 16px;background-repeat:no-repeat;
    background-image:url(/images/ico_heart.svg);
}
.cmt-view .like-count.my-like { background-image:url(/images/ico_heart_on.svg);}
.cmt-view h3 { margin:0; padding:0; font-size:0.9rem; font-weight: 400;
    font-weight: 400;
    color: #222;
    flex: 1;}
.cmt-view h4 {margin:0;padding:0;font-size:0.8rem;font-weight: 400;line-height:1.4;color:#222;white-space:pre-wrap;word-wrap: break-word;word-break: break-word;}
.cmt-view .to-name { color:#5F5BFF; }
.cmt-view .info-box {display:flex; font-size:0.7rem; height:auto; line-height: 36px; color:#999;
    height:36px;
}
.cmt-view .info-box>div {height:100%;}
.cmt-view .info-box>div:nth-of-type(1) {display:block; height:auto;}
/* .cmt-view .info-box>div:nth-last-child(1) {flex:1;flex-flow: column;justify-content: flex-end;} */
.cmt-view .info-box .date-time {height: auto;}
.cmt-view .sub-cmts { display: none; width:100%; background-color: rgba(237,239,245,0.6); 
    margin:10px 0px 0px 0px; font-size: 0.8rem; line-height: 1.3rem;
}
.cmt-view .sub-cmts>p{margin:0px; padding:5px 8px 5px 8px; text-align: left;}
.cmt-view .sub-cmts .uname { color:#222; }
.cmt-view .sub-cmts .msg {}
.cmt-view .sub-cmts .reply-count { color:#5F5BFF; }

.cmt-view .avatar-box { padding-top:5px; padding-right:10px; }
.cmt-view .avatar {width:40px; height:40px; background-size: cover; background-repeat: no-repeat; background-position: center;
    border-radius: 50%;
}
/* .cmt-view .bottom-box {width:100%;height:30px;flex: 1;} */
.cmt-view .sending_box {width:80%; text-align: left; padding:0 16px 0 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size:14px; height: 54px;
    line-height: 54px;
    background: white;
    margin: auto;
    border-radius: 4px;
    background-image:url(/images/ico_send_a1.svg);
    background-position:right 16px center;background-repeat:no-repeat;
}
.cmt-editor { display: flex; position: absolute; left:0;right:0;bottom:0; min-height: 3rem;
    background-color: white; padding:12px;
    flex-direction: column;
}
.cmt-editor>div:nth-of-type(1) {box-sizing: border-box; flex:1; display:block;position: relative;}
.cmt-editor>div:nth-of-type(2) {box-sizing: border-box; 
    margin-bottom:12px;margin-top:12px;
}
.cmt-editor textarea { display: block; outline: none;  width:100%; min-height:6rem; max-height:8rem; font-size:14px; padding:12px;
    border:1px solid #EDEFF5; box-sizing: border-box;
    -moz-appearance: none;-webkit-appearance: none;appearance: none;
}
.cmt-editor button {margin:auto; font-size:1rem; width:80%;}

/* event-programs-view */
.event-list-main {height:100vh;}
#event-programs-list .list-empty-data {background-color: #F8F6F5; border:0px !important; text-align: center; height:150px;line-height: 150px; }
#event-programs-list>li{
    height:auto; padding:3px 14px;
}
#event-programs-list>li>h3 { margin:0; padding:0; margin-right:44px; font-size:0.9rem; font-weight: bold; line-height:1.3; color:#2F323A;white-space:pre-wrap;  word-wrap: break-word; word-break: break-word; }
#event-programs-list>li>h4 {text-align: left; margin:0;padding:0; margin-right:44px;font-size:0.9rem;font-weight: 400;line-height:1.4;color:#2F323A;white-space:pre-wrap;word-wrap: break-word;word-break: break-word;}
#event-programs-list>li>p {text-align: left; margin:0;padding:0; margin-right:44px;font-size:0.9rem;font-weight: 400;line-height:1.4;color:#2F323A;white-space:pre-wrap;word-wrap: break-word;word-break: break-word;}
#event-programs-list>li>p:nth-of-type(1) { white-space: nowrap; font-size:0.8rem; margin-top:8px; margin-bottom:8px;}
#event-programs-list>li>button{
    position: absolute; box-shadow:none; /*background-color: #00D6C9;color:#FFFFFF;*/
    top:15px; right:10px; padding:5px; width:60px; height:36px; font-size:0.8rem;line-height:0.9rem;

}
/* #event-programs-list>li>button:active{background-color:#09EADC;box-shadow:none;} */

/* popoup style */
article#mask.center-layout {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center; }
	article#mask.center-layout section.popup.popup-confirm, article#mask.center-layout section.popup.popup-use-prize {
	  margin: auto;
	  margin-top: 50%;
	  overflow: auto;
	  width: 80%;
	  max-width: 400px;
	  height: auto;
	  text-align: center;
	  border-radius: 4px;
	  color: #666;
	  background-color: white; }
	  article#mask.center-layout section.popup.popup-confirm.with-close, article#mask.center-layout section.popup.popup-use-prize.with-close {
		position: relative; }
		article#mask.center-layout section.popup.popup-confirm.with-close > p, article#mask.center-layout section.popup.popup-use-prize.with-close > p {
		  padding: 0px 16px; }
		article#mask.center-layout section.popup.popup-confirm.with-close i.close, article#mask.center-layout section.popup.popup-use-prize.with-close i.close {
		  display: none;
		  background-image: none;
		  padding: 8px; }
	  article#mask.center-layout section.popup.popup-confirm.btn-reverse footer, article#mask.center-layout section.popup.popup-use-prize.btn-reverse footer {
		flex-direction: row-reverse; }
		article#mask.center-layout section.popup.popup-confirm.btn-reverse footer button, article#mask.center-layout section.popup.popup-use-prize.btn-reverse footer button {
		  	margin: 0px 12px; }
	  article#mask.center-layout section.popup.popup-confirm header, article#mask.center-layout section.popup.popup-use-prize header {
		text-align: center;
		text-transform: uppercase;
		position: initial;
		height: unset;
		width: 100%;
		line-height: initial; }
		article#mask.center-layout section.popup.popup-confirm header h2, article#mask.center-layout section.popup.popup-use-prize header h2 {
			font-size: 16px;
			margin: 0;
			padding: 8px;
			color: #666; }
	  article#mask.center-layout section.popup.popup-confirm .content, article#mask.center-layout section.popup.popup-use-prize .content {
		padding: 0 12px; }
		article#mask.center-layout section.popup.popup-confirm .content .desc, article#mask.center-layout section.popup.popup-use-prize .content .desc {
		  font-size: 12px;
		  padding: 0 32px; }
		article#mask.center-layout section.popup.popup-confirm .content .code, article#mask.center-layout section.popup.popup-use-prize .content .code {
		  margin: 0 16px;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  position: relative;
		  margin: 32px 16px 16px 16px; }
		  article#mask.center-layout section.popup.popup-confirm .content .code h3, article#mask.center-layout section.popup.popup-use-prize .content .code h3 {
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			font-size: 12px;
			font-weight: 500;
			color: var(--d2); }
		  article#mask.center-layout section.popup.popup-confirm .content .code i.icon.copy, article#mask.center-layout section.popup.popup-use-prize .content .code i.icon.copy {
			display: inline-block;
			align-self: center;
			height: 24px;
			width: 24px; }
			article#mask.center-layout section.popup.popup-confirm .content .code i.icon.copy::before, article#mask.center-layout section.popup.popup-use-prize .content .code i.icon.copy::before {
			  content: '';
			  display: inline-block;
			  background-position: center;
			  background-repeat: no-repeat;
			  background-size: 16px 16px;
			  background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' width='48'%3E%3Cpath d='M9 43.95q-1.2 0-2.1-.9-.9-.9-.9-2.1V10.8h3v30.15h23.7v3Zm6-6q-1.2 0-2.1-.9-.9-.9-.9-2.1v-28q0-1.2.9-2.1.9-.9 2.1-.9h22q1.2 0 2.1.9.9.9.9 2.1v28q0 1.2-.9 2.1-.9.9-2.1.9Zm0-3h22v-28H15v28Zm0 0v-28 28Z'/%3E%3C/svg%3E");
			  width: 24px;
			  height: 24px;
			  margin-left: 12px;
			  opacity: 0.8; }
	  article#mask.center-layout section.popup.popup-confirm .popup-text, article#mask.center-layout section.popup.popup-use-prize .popup-text {
		padding: 0 16px; }
	  article#mask.center-layout section.popup.popup-confirm footer, article#mask.center-layout section.popup.popup-use-prize footer {
		background-color: white;
		display: flex;
		justify-content: center;
		width: 100%;
		height: initial;
		padding: 0 16px 16px;
		position: relative;
		align-items: center; }
		article#mask.center-layout section.popup.popup-confirm footer button, article#mask.center-layout section.popup.popup-use-prize footer button {
			padding: 8px 16px;
			font-size: 14px;
			font-weight: 500;
			line-height: normal;
			height: max-content;
			box-shadow: none !important;
			border: 1px solid #D0C9C3;
			background-color: var(--l2);
			color: var(--d2); }
		  article#mask.center-layout section.popup.popup-confirm footer button:not(:last-child), article#mask.center-layout section.popup.popup-use-prize footer button:not(:last-child) {
			margin-right: 12px; }
		  article#mask.center-layout section.popup.popup-confirm footer button.a1, article#mask.center-layout section.popup.popup-use-prize footer button.a1 {
			color: white !important;
    		background-color: #5F5BFF !important; }
	  article#mask.center-layout section.popup.popup-confirm i.close, article#mask.center-layout section.popup.popup-use-prize i.close {
		display: none; }
	article#mask.center-layout section.popup {
	  margin: auto;
	  margin-top: 100px;
	  overflow: auto;
	  width: 80%;
	  max-width: 400px;
	  height: auto;
	  text-align: center;
	  border-radius: 4px;
	  background-color: var(--clrBg1); }
	  article#mask.center-layout section.popup footer {
		background-color: var(--clrBg1);
		display: flex;
		justify-content: center;
		width: 100%;
		height: initial;
		padding: 16px;
		position: relative;
		align-items: center; }
	  article#mask.center-layout section.popup i.close {
		display: none; }
	article#mask.center-layout.payment div.msg {
	  margin: auto;
	  color: rgba(255, 255, 255, 0.3); }


/****************************/
/** Custom Stripe elements **/
#default-view.payment { background:#424770; }
#default-view.payment>main {background:#424770;}
#default-view.payment>main>cite {background:#424770;}
.view.payment .loading_box { display:flex; justify-content: center; width: 100%; height: 44px; margin-top: calc(50vh - 100px); }
.view.payment .loading_box img {width: 32px; height: 32px;}
.stripe-header {display:flex; height:44px; line-height:44px; padding:0px 0.75rem;}
.stripe-header h4 { width:100%; margin:0px; padding:0px; font-weight: 400; }
.stripe-box input:-webkit-autofill,
.stripe-box input:-webkit-autofill:hover,
.stripe-box input:-webkit-autofill:focus { box-shadow:0 0 0 50px rgb(66, 71, 112) inset; -webkit-text-fill-color: white; }
.stripe-box  { position: relative; width:calc(100vw - 30px); max-width:450px; padding:10px 15px; border-radius: 5px; background-color:#424770; margin: 0 auto; margin-top:66px; }
.stripe-form > label { height: 35px; position: relative; color: #8798AB; display: block; margin-top: 30px; margin-bottom: 20px; }
.stripe-form > label > span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-weight: 300; line-height: 32px; 
    color: #8798AB; border-bottom: 1px solid #586A82; transition: border-bottom-color 200ms ease-in-out; cursor: text; pointer-events: none; }
.stripe-form > label > span span { position: absolute; top: 0; left: 0; transform-origin: 0% 50%; transition: transform 200ms ease-in-out; cursor: text; }
.stripe-field.is-focused + span span,
.stripe-field.is-only-one + span span,
.stripe-field:not(.is-empty) + span span { transform: scale(0.68) translateY(-36px); cursor: default; }
.stripe-field.is-focused + span
.stripe-field.is-only-one + span
{border-bottom-color:#34D08C;}
.stripe-field {background: transparent; font-size: 15px; font-weight: 300; border: 0; color: white; outline: none; cursor: text;
  display: block; width: 100%; line-height: 32px; padding-bottom: 3px; transition: opacity 200ms ease-in-out; }
.stripe-field::-webkit-input-placeholder { color: #8898AA; }
.stripe-field::-moz-placeholder { color: #8898AA; }
/* IE doesn't show placeholders when empty+focused */
.stripe-field:-ms-input-placeholder { color: #424770; }
.stripe-field.is-empty:not(.is-focused) { opacity: 0;}
.stripe-form button { /*float: left;*/ display: block; background: #34D08C; color: white; 
    border-radius: 2px; border: 0; margin: 20px 0px 0px 0px; font-size: 19px; font-weight: 400; width: 100%; height: 47px; line-height: 45px; outline: none;
}
.stripe-form button:focus { background: #24B47E; }
.stripe-form button:active { background: #159570; }

.stripe-outcome { /*float: left;*/ width: 100%; padding-top: 8px; min-height: 20px; text-align: center; }
/*.stripe-success, */.stripe-error { display: none; font-size: 15px; }

/*.stripe-success.visible,*/ .stripe-error.visible { display: inline; }
.stripe-error { color: #E4584C; }

/* .stripe-success { color: #34D08C;}
.stripe-success .token { font-weight: 500; font-size: 15px; } */
.stripe-box.submitted form,
.stripe-box.submitting form { opacity: 0; transform: scale(0.9); pointer-events: none; }
.stripe-box.submitted .stripe-success,
.stripe-box.submitting .stripe-success { pointer-events: all; }
.stripe-box.submitting .stripe-success .icon { opacity: 1; }
.stripe-box.submitted .stripe-success > * { opacity: 1; transform: none !important; }
.stripe-box.submitted .stripe-success .icon .border,
.stripe-box.submitted .stripe-success .icon .checkmark { opacity: 1; stroke-dashoffset: 0 !important; }
.stripe-success { display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; position: absolute;
    width: 100%; height: 100%; top: 0; left: 0; padding: 10px; text-align: center; pointer-events: none; overflow: hidden;
}
.stripe-success > * { transition-property: opacity, transform; transition-duration: 0.35s; transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
    opacity: 0; transform: translateY(50px);
}
.stripe-success .icon { margin: 15px 0 30px; transform: translateY(70px) scale(0.75); }
.stripe-success .icon svg { will-change: transform; }
.stripe-success .icon .border { stroke-dasharray: 251; stroke-dashoffset: 62.75; transform-origin: 50% 50%;
    transition: stroke-dashoffset 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
    animation: spin 1s linear infinite; stroke: #87bbfd; padding:0; margin:0;
}
.stripe-success .icon .checkmark { stroke-dasharray: 60; stroke-dashoffset: 60;
    transition: stroke-dashoffset 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) 0.35s; stroke: #87bbfd;
}
.stripe-success .title { font-size: 17px; font-weight: 500; margin-bottom: 8px; color: #fff; }
@keyframes spin {
    0% { transform: rotate(0deg); }
    to { transform: rotate(1turn); }
}
@keyframes void-animation-out {
    0%, to { opacity: 1; }
}
/** End: Custom Stripe elements **/

/* iPhone X */
@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) { 
        main.checkbox + footer::after,
        main.radio + footer::after,
        main.tasklist + footer::after,
        main.mytasklist + footer::after{display:none;}

    }
/* iPhone 8 */
@media only screen 
    and (device-width : 375px) 
    and (device-height : 667px) 
    and (-webkit-device-pixel-ratio : 2) {
        main.checkbox + footer::after,
        main.radio + footer::after,
        main.tasklist + footer::after,
        main.mytasklist + footer::after{display:none;}

     }
/* iPhone 8 Plus */
@media only screen 
    and (device-width : 414px) 
    and (device-height : 736px) 
    and (-webkit-device-pixel-ratio : 3) {
        main.checkbox + footer::after,
        main.radio + footer::after,
        main.tasklist + footer::after,
        main.mytasklist + footer::after{display:none;}

     }/****************************/