@charset "utf-8";
/* member-login */
.member-login-bg { background:#d3dde5;}
.tpesso.member-login-bg{ width:100%; margin: 0px auto; background: url(/src/images/loginbg.jpg); background-position-x: center}
.member-login{ display: flex; align-items: center; flex-direction: column;  justify-content: center; width: 100%; min-height: 100%; padding: 80px 20px 20px;}
.member-login a { display:inline-block; text-decoration: none; font-weight: 400;}
.tpesso .member-login a { color:#4670BB;}
.tpesso .member-login form,.tpesso .member-signup-login form { margin-bottom: 0;}
.tpesso .member-signup-login form .form-signup label,.tpesso .member-signup-login form .birthday label{ display: block;}
.member-login-content{ -webkit-border-radius: 10px 10px 10px 10px; border-radius:4px; background: #fff; width: 90%; max-width: 450px; position: relative; padding: 0px; -webkit-box-shadow: 0 30px 55px 0 rgba(0,0,0,0.3); box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);}
.tpesso .form-group-m .bar {border-bottom: solid 1px #4670BB;}
.tpesso .form-group-m .bar::before { background: #4670BB;}
.tpesso .form-group-m.states-danger-m .bar::before { background:  #ed5565;}
.tpesso .form-group-m select ~ .input-label,.tpesso .form-group-m input:focus ~ .input-label,.tpesso .form-group-m input:valid ~ .input-label,.tpesso .form-group-m input.form-file ~ .input-label,.tpesso .form-group-m input.has-value ~ .input-label,.tpesso .form-group-m input:focus.input-lg-m ~ .input-label{ color: #4670BB;}
.tpesso .form-group-m select:focus ~ .input-label,.tpesso .form-group-m input:focus ~ .input-label,.tpesso .form-group-m textarea:focus ~ .input-label,.tpesso .form-group-m input.has-value ~ .input-label{color:#4670BB;}
.tpesso .states-primary-m .feedback{color:#4670BB;}
.tpesso .states-primary-m svg { fill:#4670BB;}
.tpesso .form-group-m.states-danger-m input:focus ~ .input-label,.tpesso .form-group-m.states-read-m input.has-value ~.input-label{color: #ed5565;}
.member-login-form{ padding: 20px 55px; border-top: 1px solid;}
.member-password-form{ padding: 30px 55px 20px; border-top: 1px solid;}
.tpesso .member-login-form,.tpesso .member-password-form{ background: #f7fcff; border-top: 1px solid #d1f2ff;}
.member-login-footer{ padding: 0px 55px 25px; text-align: center; -webkit-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px;}
.tpesso .member-login-footer{ background-color:#f7fcff;}
.tpesso .btn-primary {color: #ffffff; background-color: #4670BB; border-color: #4670BB; fill: #ffffff;}
.tpesso .btn-primary:hover,.tpesso .btn-primary:focus,.tpesso .btn-primary:active,.tpesso .btn-primary.active,.tpesso .btn-primary:active:focus,.tpesso .btn-primary:active:hover,.tpesso  .btn-primary.active:hover,.tpesso  .btn-primary.active:focus{ background-color:#314D80; border-color:#314D80;}
.fadeInDown{ -webkit-animation-name: fadeInDown; animation-name: fadeInDown;-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both; animation-fill-mode: both;}
@-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);} 100% { opacity: 1;  -webkit-transform: none; transform: none; }}
@keyframes fadeInDown { 0% {  opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); }  100% { opacity: 1; -webkit-transform: none; transform: none;}}
.fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft;-webkit-animation-duration:1.2s;animation-duration:1.2s;-webkit-animation-fill-mode: both; animation-fill-mode: both;}
@-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-80px); transform: translateX(-80px);}  100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); }}
@keyframes fadeInLeft { 0% {  opacity: 0; -webkit-transform: translateX(-80px); -ms-transform: translateX(-80px); transform: translateX(-80px); }
  100% { opacity: 1;  -webkit-transform: translateX(0);  -ms-transform: translateX(0); transform: translateX(0); }}
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fadeIn { opacity:0; -webkit-animation:fadeIn ease-in 1;-moz-animation:fadeIn ease-in 1; animation:fadeIn ease-in 1; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards;-webkit-animation-duration:1s; -moz-animation-duration:1s; animation-duration:1s;}
.fadeIn.first { -webkit-animation-delay: 0.4s;-moz-animation-delay: 0.4s;animation-delay: 0.4s;text-align: center;}
.underline:after {display: block; left: 0; bottom: -10px; width: 0;  height: 2px; background-color: #4670bb; content: "";transition: width 0.2s;}
.underline:hover {color: #4670bb;}
.underline:hover:after{ width: 100%;}
.member-login-logo{ margin: 55px auto 10px;  display: block;  max-width: 100%; padding: 0 10px;}
.member-title {font-weight: bold; color:#4670BB; margin-bottom: 15px;}
.member-login-title {font-weight: bold; color:#4670BB; margin-bottom: 25px; text-align: center;}
.member-title h3{ margin-top: 0;}
.member-login-close{ width: 30px; height: 30px; background:#f4f9ff; position: absolute; border-radius: 30px; right: 0;margin-top: 0.6em; margin-right: 0.6em; cursor: pointer;transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;}
.member-login-close svg{fill:#c6d5e8; width: 1.5em; height: 1.5em;vertical-align: middle; margin-top: 0.08em;}
.member-login-close:hover svg{ fill: #999999;}
.login-link { min-height: 80px; padding: 10px; border-top: 1px solid #4670BB; background: #e1f6ff; -webkit-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px; color: #4670BB;}
.link-tab{ width: 100%; padding:0 10px;}
.link-tab .tab{ margin: 10px auto;  border-radius: 4px; padding:0 8px 10px; font-weight: bold; cursor: pointer; position: relative;transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-webkit-transition: all 0.3s ease-in-out;}
.link-tab .tab img { width: 280px; max-width: 100%;}
.link-tab .tab:hover{opacity: 0.8; margin: 15px auto 10px;}
.link-tab a{ display: block;}
.login-link .link-title{ display: table; margin: 0 auto; text-align: center;}
@media (max-width: 520px) {
.member-password-form{  padding: 30px 15px 20px; }
}

/*------- Checkmark ---------*/
.checkcircle-box { display:inline-block;  position: relative; width:150px;}
.checkcircle-box .circular circle.path {  stroke-dasharray: 330; stroke-dashoffset: 0; stroke-linecap: round; opacity: 0.4; animation: 0.7s draw-circle ease-out;}
.checkcircle-box .checkmark{ stroke-width: 6.25; stroke-linecap: round;position:absolute; top: 56px; left: 49px; width: 52px; height: 40px;}
.checkcircle-box .checkmark path { animation: 1s draw-check ease-out;}
.checkcircle-box .emailmark{ stroke-width: 3.5; stroke-linecap: round; position: absolute; top: 38px; left: 35px; width: 74px; fill: #4670BB;}
.tpesso .checkcircle-blue { stroke:#4670BB;}
@keyframes draw-circle {  0% { stroke-dasharray: 0,330; stroke-dashoffset: 0; opacity: 1;} 80% { stroke-dasharray: 330,330; stroke-dashoffset: 0; opacity: 1; } 100%{ opacity: 0.4;}}
@keyframes draw-check { 0% { stroke-dasharray: 49,80; stroke-dashoffset: 48; opacity: 0; } 50% { stroke-dasharray: 49,80;  stroke-dashoffset: 48; opacity: 1;} 100% { stroke-dasharray: 130,80; stroke-dashoffset: 48;}}

/* member-signup */
.tpesso.member-signup-bg{ background: url(/src/images/junior-member-signup-bg.jpg);background-position-x: center top;}
.member-signup-login{ display: block; padding: 60px 20px 20px;}
.member-signup-logo{ display: initial; margin: 55px auto 25px; max-width: 300px;}
@media (max-width:520px){.member-signup-logo { margin: 55px auto 25px; max-width: 220px;}}
.member-signup-title { font-weight: bold; color: #545454; line-height: 1.5rem; font-size: 0.875rem; max-width: 700px; margin:0 auto 30px; text-align: left;padding: 0 15px 0 0;}
.member-signup-content{ -webkit-border-radius: 10px 10px 10px 10px; border-radius:4px; background: #fff; position: relative; padding: 0px; -webkit-box-shadow: 0 30px 55px 0 rgba(0,0,0,0.3); box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);max-width:800px;margin: 0 auto;}
.member-signup-login .ct-radio-m .title { vertical-align: top; padding: 3px 10px 5px 0; color:#545454;}
.member-signup-login  .ct-radio-m input[type=radio]:checked+ label + span { color:#4670BB;}
.member-signup-login .ct-radio-m input[type=radio]+label{ border: 1px solid #4670BB}
.member-signup-login .ct-radio-m input[type=radio]:checked+label { border-color: #4670BB;}
.member-signup-login .ct-radio-m input[type=radio]:checked + label { background-color: #4670BB;}
.member-signup-login .ct-radio-m input[type=radio]+ label:active{ background-color: #4670BB;}
.member-signup-login .birthday{max-width: 100px;}
.member-signup-login .birthday-menu{ margin-top: 2px;}
.member-signup-login .form-group-m { margin-bottom: 20px;}

.states-red-m svg{ fill: #ed5565; width: 1.5em; height: 1.5em; vertical-align: middle; margin-top: -1.8em; margin-right: 0.25em; right: 0;position: absolute;}
.states-red-m .feedback{margin-top: .25rem;color:#ed5565;}
.states-red-m .bar::before{ background: #ed5565;}
.states-red-m input:focus ~ .input-label,.states-read-m input.has-value ~.input-label{color: #ed5565;}
.states-steelblue-m .svg-inline svg,.states-orange-m .svg-inline svg,.states-red-m .svg-inline svg{width: 1em; height: 1em;  vertical-align: middle; fill: currentColor; margin-top: -1.5em; margin-right: 0.25em; position: relative;}