/*======================================================================
  Common Style
  Copyright Team-Nave
  2018.02.25:Create New
======================================================================*/

:root {
  --tnwos-screen-width        : 100vw;
  --tnwos-deskpop-width       : 99vw;
  --tnwos-deskpop-tab-height  : 64px;
  
  --tnwos-font-size-s         : 16px;
  --tnwos-font-size-m         : 20px;
  --tnwos-font-size-l         : 24px;

  --tnwos-icon-size-s         : 32px;
  --tnwos-icon-size-m         : 40px;
  --tnwos-icon-size-l         : 48px;
  --tnwos-icon-size-xl        : 64px;
  
  --tnwos-desktop-icon-size-w : 64px;
  --tnwos-desktop-icon-size-h : 64px;

  --tnwos-footer-height       : 58px;
  --tnwos-footer-mb           : 50px;
  --tnwos-popup-size          : 99vw;

  --tnwos-input-size-l        : 380px;
  --tnwos-input-size-m        : 320px;
  --tnwos-input-size-s        : 280px;
  --tnwos-input-size-s2       : 280px;
  --tnwos-input-size-ss4      : 200px;
  --tnwos-input-size-ss3      : 200px;
  --tnwos-input-size-ss2      : 160px;
  --tnwos-input-size-sx       : 120px;

  --tnwos-textarea-size-m     : 480px;
  --tnwos-textarea-size-s     : 380px;

  --tnwos-progress-size       : 40px;
  --tnwos-msg-size            : 99vw;
  --tnwos-dialog-size         : 99vw;

  --tnwos-back-color1         : rgba(20,20,20,1);
  --tnwos-back-color2         : rgba(55,55,55,1);
  --tnwos-back-color3         : rgba(80,80,80,1);
  --tnwos-face-color1         : rgba(245,245,245,1);
  --tnwos-face-color2         : rgba(215,215,215,1);
  --tnwos-face-color3         : rgba(190,190,190,1);
  --tnwos-alert-color1        : rgba(240,60,60,1);
  --tnwos-alert-color2        : rgba(230,0,0,1);
  --tnwos-alert-color3        : rgba(200,0,0,1);
  --tnwos-link-color          : rgba(60,60,240,1);
  --tnwos-select-color        : rgba(160,160,245,1);
  --tnwos-select-color2        : rgba(100,100,240,1);
  --tnwos-good-color1         : rgba(20,245,20,1);
  --tnwos-good-color2         : rgba(20,215,20,1);
  --tnwos-good-color3         : rgba(20,180,20,1);
}

@media screen and (min-width: 0px) and (max-width: 320px) {
  :root {
    --tnwos-input-size-l        : 320px;
    --tnwos-input-size-s2       : 180px;
    --tnwos-input-size-ss3      : 110px;
    --tnwos-input-size-ss2      : 100px;
    --tnwos-input-size-sx       :  60px;
    --tnwos-textarea-size-m     : 320px;
    --tnwos-textarea-size-s     : 260px;
    --tnwos-screen-width        : 320px;
    --tnwos-deskpop-width       : 316px;
    --tnwos-popup-size-s        : 211px;
    --tnwos-popup-size-m        : 316px;
    --tnwos-popup-size-l        : 451px;
    --tnwos-popup-size-xl       : 451px;
  }
}
@media screen and (min-width: 321px) and (max-width:639px) {
  :root {
    --tnwos-input-size-l        : 320px;
    --tnwos-input-size-s2       : 180px;
    --tnwos-input-size-ss3      : 110px;
    --tnwos-input-size-ss2      : 100px;
    --tnwos-input-size-sx       :  60px;
    --tnwos-textarea-size-m     : 320px;
    --tnwos-textarea-size-s     : 260px;
    --tnwos-screen-width        : 375px;
    --tnwos-deskpop-width       : 369px;
    --tnwos-popup-size-s        : 246px;
    --tnwos-popup-size-m        : 369px;
    --tnwos-popup-size-l        : 527px;
    --tnwos-popup-size-xl       : 527px;
  }
}
@media screen and (min-width: 640px) and (max-width:1023px) {
  :root {
    --tnwos-screen-width        : 640px;
    --tnwos-deskpop-width       : 634px;
    --tnwos-popup-size-s        : 423px;
    --tnwos-popup-size-m        : 634px;
    --tnwos-popup-size-l        : 905px;
    --tnwos-popup-size-xl       : 905px;
  }
}

@media screen and (min-width: 1024px) {
  :root {
    --tnwos-screen-width        : 1024px;
    --tnwos-deskpop-width       : 634px;
    --tnwos-popup-size-s        : 423px;
    --tnwos-popup-size-m        : 634px;
    --tnwos-popup-size-l        : 905px;
    --tnwos-popup-size-xl       : 905px;
  }
}


@media screen and (orientation:landscape){
  :root {
    --tnwos-deskpop-width       : 95vw;
    --tnwos-popup-size-s        : 66vh;
    --tnwos-popup-size-m        : 99vh;
    --tnwos-popup-size-l        : 140vh;
    --tnwos-popup-size-xl        : 117vw;
  }
}

/*
@media screen and (orientation:portrait){
  :root {
    --tnwos-deskpop-width       : 95vw;
    --tnwos-popup-size-s        : 423px;
    --tnwos-popup-size-m        : 634px;
    --tnwos-popup-size-l        : 905px;
    --tnwos-popup-size-s        : 66vw;
    --tnwos-popup-size-m        : 99vw;
    --tnwos-popup-size-l        : 141vw;
  }
}
@media screen and (orientation:landscape) and (min-width:321px){
  :root {
    --tnwos-screen-width        : 375px;
    --tnwos-deskpop-width       : 369px;
  }
}
@media screen and (orientation:portrait) and (min-width:321px){
  :root {
    --tnwos-screen-width        : 375px;
    --tnwos-deskpop-width       : 369px;
    --tnwos-popup-size-s        : 246px;
    --tnwos-popup-size-m        : 369px;
    --tnwos-popup-size-l        : 527px;
  }
}
@media screen and (orientation:landscape) and (min-width:640px){
  :root {
    --tnwos-screen-width        : 640px;
    --tnwos-deskpop-width        : 634px;
  }
}
@media screen and (orientation:portrait) and (min-width:640px){
  :root {
    --tnwos-screen-width        : 640px;
    --tnwos-deskpop-width        : 634px;
    --tnwos-popup-size-s        : 423px;
    --tnwos-popup-size-m        : 634px;
    --tnwos-popup-size-l        : 905px;
  }
}
@media screen and (orientation:landscape) and (min-width:1024px){
  :root {
    --tnwos-screen-width        : 1024px;
    --tnwos-deskpop-width       : 634px;
  }
}
@media screen and (orientation:portrait) and (min-width:1024px){
  :root {
    --tnwos-screen-width        : 1024px;
    --tnwos-deskpop-width       : 634px;
    --tnwos-popup-size-s        : 423px;
    --tnwos-popup-size-m        : 634px;
    --tnwos-popup-size-l        : 905px;
  }
}
*/

html {
  height: 100%;
  font-size: 100%;

  padding: 0;
  margin: 0;
}

body {
  width: 100vw;
  height: calc(100%);
  /*
  height: calc(100% - env(safe-area-inset-top) - env(safe-area-inset-bottom) );
    */
  padding: 0px;
  /*
    padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    */

     font-size: 100%;
  min-width:320px;

  margin: 0;

  background-color: var(--tnwos-back-color1);
}

iframe {
  width: 100%;
  height: 100%;

  border: 0;
  margin: 0;
  padding: 0;
}

a,a:hover {
  color : var(--tnwos-link-color);
  
}

input[type="time"]{
	position: relative;
}

input[type="time"]::-webkit-calendar-picker-indicator {
  display: none;
}

.tnwos-container {
  min-width: 320px;
/*  width: var(--tnwos-screen-width);*/
  width: 100vw;
  display: block;
  margin: 0 auto;
  height: 100%;
/*
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
*/
  /*  position: relative;
  height: auto !important;
  height: 100%;
  min-height: 100%;
  min-height: calc(100vh - 32px);
  background: #333;
*/
}

/**********************************************************/
/*ui-kit class adjust */
.uk-offcanvas-bar {
  padding-left: calc( env(safe-area-inset-left) + 20px);
}

/**********************************************************/
/* font size & color */
.tnwos-font-s {
  font-family: 'Lato', Calibri, Arial, sans-serif;
  font-size: calc(var(--tnwos-font-size-s));
  font-weight: 300;
  letter-spacing: 0px;
  color: var(--tnwos-face-color1);
}

.tnwos-font-m {
  font-family: 'Lato', Calibri, Arial, sans-serif;
  font-size: calc(var(--tnwos-font-size-m));
  font-weight: 300;
  letter-spacing: 0px;
  color: var(--tnwos-face-color1);
}

.tnwos-font-l {
  font-family: 'Lato', Calibri, Arial, sans-serif;
  font-size: calc(var(--tnwos-font-size-l));
  font-weight: 300;
  letter-spacing: 0px;
  color: var(--tnwos-face-color1);
}

.tnwos-color-white {
  color: #ffffff !important;
}
.tnwos-color-black {
  color: #000000 !important;
}
.tnwos-color-red {
  color: #ff0000 !important;
}
.tnwos-color-bk1 {
  color: var(--tnwos-back-color1) !important;
}
.tnwos-color-bk2 {
  color: var(--tnwos-back-color2) !important;
}
.tnwos-color-bk3 {
  color: var(--tnwos-back-color3) !important;
}
.tnwos-color-fc1 {
  color: var(--tnwos-face-color1) !important;
}
.tnwos-color-fc2 {
  color: var(--tnwos-face-color2) !important;
}
.tnwos-color-fc3 {
  color: var(--tnwos-face-color3) !important;
}
.tnwos-color-al1 {
  color: var(--tnwos-alert-color1) !important;
}
.tnwos-color-al2 {
  color: var(--tnwos-alert-color2) !important;
}
.tnwos-color-al3 {
  color: var(--tnwos-alert-color3) !important;
}
.tnwos-color-gd1 {
  color: var(--tnwos-good-color1) !important;
}
.tnwos-color-gd2 {
  color: var(--tnwos-good-color2) !important;
}
.tnwos-color-gd3 {
  color: var(--tnwos-good-color3) !important;
}
.tnwos-color-li {
  color: var(--tnwos-link-color) !important;
}
.tnwos-color-li {
  color: var(--tnwos-link-color) !important;
}
.tnwos-color-sel {
  color: var(--tnwos-select-color) !important;
}

.tnwos-bgcolor-white {
  background-color: #ffffff !important;
}
.tnwos-bgcolor-black {
  background-color: #000000 !important;
}
.tnwos-bgcolor-red {
  background-color: #ff0000 !important;
}
.tnwos-bgcolor-bk1 {
  background-color: var(--tnwos-back-color1) !important;
}
.tnwos-bgcolor-bk2 {
  background-color: var(--tnwos-back-color2) !important;
}
.tnwos-bgcolor-bk3 {
  background-color: var(--tnwos-back-color3) !important;
}
.tnwos-bgcolor-fc1 {
  background-color: var(--tnwos-face-color1) !important;
}
.tnwos-bgcolor-fc2 {
  background-color: var(--tnwos-face-color2) !important;
}
.tnwos-bgcolor-fc3 {
  background-color: var(--tnwos-face-color3) !important;
}
.tnwos-bgcolor-al1 {
  background-color: var(--tnwos-alert-color1) !important;
}
.tnwos-bgcolor-al2 {
  background-color: var(--tnwos-alert-color2) !important;
}
.tnwos-bgcolor-al3 {
  background-color: var(--tnwos-alert-color3) !important;
}
.tnwos-bgcolor-sel {
  background-color: var(--tnwos-select-color) !important;
}
.tnwos-bgcolor-sel2 {
  background-color: var(--tnwos-select-color2) !important;
}

.jkbbk{
  background-color: #22BB00;
}
.ckbbk{
  background-color: #EE8800;
}
.brbk{
  background-color: #3399FF;
}
.krbk{
  background-color: #CC33FF;
}
.arbk{
  background-color: #FF0000;
}
.pkbk{
  background-color: #000000;
}
.ltbk{
  background-color: #FF0000;
}
.pnbk{
  background-color: #FF0000;
}
.psbk{
  background-color: #FF0000;
}
.mjbk{
  background-color: #FFCC00;
}
.kbbk{
  background-color: #22BB00;
}
.icbk{
  background-color: #CCCCCC;
}

/* END: font size & color*/

/**********************************************************/
/* position */

.tnwos-absolute-center {
  position: absolute !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.tnwos-absolute-center-y {
  position: absolute !important;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.tnwos-absolute-center-x {
  position: absolute !important;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}


/* END: position */

/**********************************************************/
/* os-icon set */
.tnwos-icon {
  margin:3px 4px;
  width: var(--tnwos-desktop-icon-size-w);
  height: var(--tnwos-desktop-icon-size-h);
  font-size: var(--tnwos-icon-size-l);
  background-color: transparent;
  box-sizing: border-box;
  border: none;
  line-height: 12px;
/*  cursor: pointer;*/
  color: var(--tnwos-back-color2);
}
.tnwos-icon > .tnwos-icon-l {
/*  background: var(--tnwos-face-color1);*/
}
.tnwos-icon > .icon-under {
  color: var(--tnwos-face-color1);
}

.tnwos-icon-b {
  margin:3px 4px;
  width: var(--tnwos-desktop-icon-size-w);
  height: var(--tnwos-desktop-icon-size-h);
  font-size: var(--tnwos-icon-size-l);
  background-color: transparent;
  box-sizing: border-box;
  border: none;
  line-height: 12px;
  cursor: pointer;
  color: var(--tnwos-face-color1);
}
.tnwos-icon-b > .tnwos-icon-l {
  background: var(--tnwos-back-color1);
}
.tnwos-icon-b > .icon-under {
  color: var(--tnwos-back-color1);
}

.tnwos-icon-center {
  margin:3px auto;
  
}

.tnwos-icon-empty {
  margin:1px 4px;
  width: var(--tnwos-desktop-icon-size-w);
  height: 1px;
}

.tnwos-icon-s {  
  position: relative;
  display: inline-block;
  width: var(--tnwos-icon-size-s);
  height: var(--tnwos-icon-size-s);
  border-radius: 50%;
  cursor: pointer;
/*  background: var(--tnwos-face-color1);*/
/*  margin: 0px 3px 0px 3px;*/
}
.tnwos-icon-s span {
  position: absolute;
  display: inline-block;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: var(--tnwos-icon-size-s);
  text-align: center;
/*  color: var(--tnwos-back-color1);*/
}

.tnwos-icon-m {  
  position: relative;
  display: inline-block;
  width: var(--tnwos-icon-size-m);
  height: var(--tnwos-icon-size-m);
  border-radius: 50%;
  cursor: pointer;
/*  background: var(--tnwos-face-color1);*/
/*  margin: 0px 3px 0px 3px;*/
}
.tnwos-icon-m span {
  position: absolute;
  display: inline-block;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: var(--tnwos-icon-size-m);
  text-align: center;
/*  color: var(--tnwos-back-color1);*/
}

.tnwos-icon-l {  
  position: relative;
  display: inline-block;
  width: var(--tnwos-icon-size-l);
  height: var(--tnwos-icon-size-l);
  border-radius: 50%;
  cursor: pointer;
/*  background: white;*/
/*  margin: 0px 3px 0px 3px;*/
}
.tnwos-icon-xl { 
  width: var(--tnwos-icon-size-xl);
  height: var(--tnwos-icon-size-xl);
/*  background: white;*/
/*  margin: 0px 3px 0px 3px;*/
}

.tnwos-icon-l span {
  position: absolute;
  display: inline-block;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: var(--tnwos-icon-size-l);
  text-align: center;
}
.tnwos-icon-xl span {
  width: var(--tnwos-icon-size-xl);
}

.tnwos-icon-m-cfont{
  font-family: 'Dosis', 'Lato', sans-serif;
  font-size: calc(var(--tnwos-icon-size-m) / 3);
  font-weight: 300;
  letter-spacing: 0px;
}

.tnwos-icon-l > .tnwos-badge-rb {
  width: 20px;
  height: 14px;
  bottom: 0px;
  right: -15px;
  border-radius: 7px;
  transform: translate(50%, 50%);
  background: var(--tnwos-select-color);
  color: var(--tnwos-back-color1);
  font-size: 11px;
  letter-spacing: -0.04em;
  text-autospace: ideograph-alpha;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* END :os-icon set */

/**********************************************************/
/* form group */
.tnwos-form-group {
  
}

.tnwos-column-title {
  font-family: 'Lato', Calibri, Arial, sans-serif;
  font-size: calc(var(--tnwos-font-size-m));
  font-weight: 300;
  letter-spacing: 0px;
  color: var(--tnwos-face-color1);
}
/* END :form group */

/**********************************************************/
/* border radius */
.tnwos-border-radius-s {
  border-radius: calc(var(--tnwos-icon-size-s) / 2);
}

.tnwos-border-radius-m {
  border-radius: calc(var(--tnwos-icon-size-m) / 2);
}

.tnwos-border-radius-l {
  border-radius: calc(var(--tnwos-icon-size-l) / 2);
}
/* END :border radius */

/**********************************************************/
/* input ui */
.tnwos-input-width-s {
  border-radius: calc(var(--tnwos-icon-size-s) / 2);
  width: calc(var(--tnwos-input-size-s) - var(--tnwos-icon-size-s));
  margin: 0px auto;
  color: var(--tnwos-face-color1);
}
.tnwos-input-width-m {
  border-radius: calc(var(--tnwos-icon-size-m) / 2);
  width: calc(var(--tnwos-input-size-m) - var(--tnwos-icon-size-m));
  margin: 0px auto;
  color: var(--tnwos-face-color1);
}
.tnwos-input-width-l {
  border-radius: calc(var(--tnwos-icon-size-l) / 2);
  width: calc(var(--tnwos-input-size-l) - var(--tnwos-icon-size-l));
  margin: 0px auto;
  color: var(--tnwos-face-color1);
}

.tnwos-input-m {
  background: var(--tnwos-back-color2);
  border-radius: calc(var(--tnwos-icon-size-m) / 2);
  padding-left: 16px;
  width: calc(var(--tnwos-input-size-m) - var(--tnwos-icon-size-m));
  height: var(--tnwos-icon-size-m);
/*   margin: 4px 0px 1px 0px; */
  outline: none;
  color: var(--tnwos-face-color1);
}
.tnwos-input-l {
  background: var(--tnwos-back-color2);
  border-radius: calc(var(--tnwos-icon-size-l) / 2);
  padding-left: 16px;
  width: calc(var(--tnwos-input-size-l) - var(--tnwos-icon-size-l));
  height: var(--tnwos-icon-size-l);
  outline: none;
  color: var(--tnwos-face-color1);
}
.tnwos-input-l:focus,
.tnwos-input-m:focus {
  outline: none;
  box-shadow: none;
  border-color: var(--tnwos-face-color3);
  background: var(--tnwos-back-color2);
  color: var(--tnwos-face-color1);
}
.tnwos-input-l:read-only,
.tnwos-input-m:read-only  {
  border-color: var(--tnwos-back-color2);
  background: var(--tnwos-back-color2);
}

.tnwos-input-double {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  width: calc(var(--tnwos-input-size-m) - var(--tnwos-icon-size-m));
}

.tnwos-input-double .tnwos-input-m {
  width: 46%;
}
.tnwos-input-double > div {
  text-align: center;
  margin: auto 0px;
  width: 16px;
  color: var(--tnwos-face-color1);
}

.tnwos-form-control {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tnwos-input-head-l,
.tnwos-input-head-m {
  display: inline-flex;
  justify-content: space-between;
  letter-spacing: 2px;
}

.tnwos-input-head-m {
  width : calc(var(--tnwos-input-size-m) - var(--tnwos-icon-size-m));
}
.tnwos-input-head-l {
  width : calc(var(--tnwos-input-size-l) - var(--tnwos-icon-size-l));
}

.tnwos-input-title {
  text-align: left;
  color: var(--tnwos-face-color1);
}

.tnwos-input-unit {
  text-align: right;
  color: var(--tnwos-face-color1);
}

.tnwos-input-after-set-m {
  margin: 0px auto;
  width: calc(var(--tnwos-input-size-m) - var(--tnwos-icon-size-m));
  position: relative;
  
}
.tnwos-input-after-btn-m:focus {
  outline: none;
  box-shadow: none;
  border: none;
}
.tnwos-input-after-btn-m {
  z-index: 132;
  position: absolute;
  top: 0;
  right: 0px;
  margin: 4px 0px 1px 0px;
  background: transparent;
  width: var(--tnwos-icon-size-m);
  height: var(--tnwos-icon-size-m);
  border: none;
  border-radius: calc(var(--tnwos-icon-size-m) / 2);
  box-sizing: border-box;
  padding-top:9px;
}

.tnwos-input-s2 {
  background: var(--tnwos-back-color2);
  border-radius: calc(var(--tnwos-icon-size-m) / 2);
  padding-left: 16px;
  width: calc(var(--tnwos-input-size-s2) - var(--tnwos-icon-size-m));
  height: var(--tnwos-icon-size-m);
  margin: 4px 0px 1px 0px;
  outline: none;
  color: var(--tnwos-face-color1);
}
.tnwos-input-s2:focus {
  outline: none;
  box-shadow: none;
  border-color: transparent !important;
}
.tnwos-input-s2:read-only  {
  border-color: var(--tnwos-face-color3);
  background: var(--tnwos-face-color3);
}

.tnwos-input-after-set-s2 {
  margin: 0px auto;
  width: calc(var(--tnwos-input-size-s2) - var(--tnwos-icon-size-m));
  position: relative;
  
}
.tnwos-input-after-btn-s2:focus {
  outline: none;
  box-shadow: none;
  border: none;
}
.tnwos-input-after-btn-s2 {
  z-index: 132;
  position: absolute;
  top: 0;
  right: 0px;
  margin: 4px 0px 1px 0px;
  background: transparent;
  width: var(--tnwos-icon-size-m);
  height: var(--tnwos-icon-size-m);
  border: none;
  border-radius: calc(var(--tnwos-icon-size-m) / 2);
  box-sizing: border-box;
  padding-top:9px;
}

.tnwos-input-ss3 {
  background: var(--tnwos-back-color2);
  border-radius: calc(var(--tnwos-icon-size-m) / 2);
  padding-left: 16px;
  width: calc(var(--tnwos-input-size-ss3) - var(--tnwos-icon-size-m));
  height: var(--tnwos-icon-size-m);
  margin: 4px 0px 1px 0px;
  outline: none;
}
.tnwos-input-ss3:focus {
  outline: none;
  box-shadow: none;
  border-color: transparent !important;
}
.tnwos-input-ss3:read-only  {
  border-color: var(--tnwos-face-color3);
  background: var(--tnwos-face-color3);
}

.tnwos-input-after-set-ss3 {
  margin: 0px auto;
  width: calc(var(--tnwos-input-size-ss3) - var(--tnwos-icon-size-m));
  position: relative;
  
}
.tnwos-input-after-btn-ss3:focus {
  outline: none;
  box-shadow: none;
  border: none;
}
.tnwos-input-after-btn-ss3 {
  z-index: 132;
  position: absolute;
  top: 0;
  right: 0px;
  margin: 4px 0px 1px 0px;
  background: transparent;
  width: var(--tnwos-icon-size-m);
  height: var(--tnwos-icon-size-m);
  border: none;
  border-radius: calc(var(--tnwos-icon-size-m) / 2);
  box-sizing: border-box;
  padding-top:9px;
}

.tnwos-input-ss2 {
  background: var(--tnwos-back-color2);
  border-radius: calc(var(--tnwos-icon-size-m) / 2);
  padding-left: 16px;
  width: calc(var(--tnwos-input-size-ss2) - var(--tnwos-icon-size-m));
  height: var(--tnwos-icon-size-m);
  margin: 4px 0px 1px 0px;
  outline: none;
}
.tnwos-input-ss2:focus {
  outline: none;
  box-shadow: none;
  border-color: transparent !important;
}
.tnwos-input-ss2:read-only  {
  border-color: var(--tnwos-face-color3);
  background: var(--tnwos-face-color3);
}

.tnwos-input-after-set-ss2 {
  margin: 0px auto;
  width: calc(var(--tnwos-input-size-ss2) - var(--tnwos-icon-size-m));
  position: relative;
  
}
.tnwos-input-after-btn-ss2:focus {
  outline: none;
  box-shadow: none;
  border: none;
}
.tnwos-input-after-btn-ss2 {
  z-index: 132;
  position: absolute;
  top: 0;
  right: 0px;
  margin: 4px 0px 1px 0px;
  background: transparent;
  width: var(--tnwos-icon-size-m);
  height: var(--tnwos-icon-size-m);
  border: none;
  border-radius: calc(var(--tnwos-icon-size-m) / 2);
  box-sizing: border-box;
  padding-top:9px;
}

.tnwos-btn-circle {
  width: var(--tnwos-icon-size-m);
  height: var(--tnwos-icon-size-m);
  border-radius: calc(var(--tnwos-icon-size-m) / 2);
  margin: 4px 0px 1px 0px;
  background-color: var(--tnwos-face-color1);
  box-sizing: border-box;
  cursor: pointer;
  padding: 0;
}

.tnwos-btn-m {
  width: calc(var(--tnwos-input-size-m) - var(--tnwos-icon-size-m));
  height: var(--tnwos-icon-size-m);
  line-height: var(--tnwos-icon-size-m);
  border-radius: calc(var(--tnwos-icon-size-m) / 2);
  margin: 4px 0px 1px 0px;
  background-color: var(--tnwos-back-color2);
  box-sizing: border-box;
  cursor: pointer;
}

.tnwos-btn-s {
  width: calc(var(--tnwos-input-size-s) - var(--tnwos-icon-size-s));
  height: var(--tnwos-icon-size-s);
  line-height: var(--tnwos-icon-size-s);
  border-radius: calc(var(--tnwos-icon-size-s) / 2);
  margin: 3px 0px 1px 0px;
  background-color: var(--tnwos-back-color2);
  box-sizing: border-box;
  cursor: pointer;
}

.tnwos-btn-s2 {
  width: calc(var(--tnwos-input-size-s) - var(--tnwos-input-size-sx));
  height: var(--tnwos-icon-size-s);
  line-height: var(--tnwos-icon-size-s);
  border-radius: calc(var(--tnwos-icon-size-s) / 2);
  margin: 3px 0px 1px 0px;
  background-color: var(--tnwos-back-color2);
  box-sizing: border-box;
  cursor: pointer;
}

.tnwos-btn-ss {
  width: var(--tnwos-input-size-ss4);
  height: var(--tnwos-icon-size-s);
  line-height: var(--tnwos-icon-size-s);
  border-radius: calc(var(--tnwos-icon-size-s) / 2);
  margin: 3px 0px 1px 0px;
  background-color: var(--tnwos-back-color2);
  box-sizing: border-box;
  cursor: pointer;
}

.uk-tab > .tnwos-btn-s{
  margin: 2px 8px;
}

.uk-tab > .tnwos-btn-s{
  background-color: var(--tnwos-back-color2);
}

.uk-tab > .tnwos-btn-s.uk-active{
  background-color: var(--tnwos-select-color2);
}

.uk-tab > .tnwos-btn-s2{
  margin: 2px 8px;
}

.uk-tab > .tnwos-btn-s2{
  background-color: var(--tnwos-back-color2);
}

.uk-tab > .tnwos-btn-s2.uk-active{
  background-color: var(--tnwos-select-color2);
}

.tnwos-btn-m-l2,
.tnwos-btn-m-s2,
.tnwos-btn-m-r2 {
  background-color: var(--tnwos-back-color3);
  color: var(--tnwos-back-color2);
  border: 2px solid var(--tnwos-back-color2);
}

.tnwos-btn-s-l,
.tnwos-btn-s-r,
.tnwos-btn-m-r {
  background-color: var(--tnwos-back-color1);
  color: var(--tnwos-face-color1);
  border: 2px solid var(--tnwos-face-color1);
}

.tnwos-dark{
	background: var(--tnwos-back-color2);
	color: var(--tnwos-face-color1);
}

.tnwos-dark:focus{
  background: var(--tnwos-back-color2);
  color: var(--tnwos-face-color1);
  border-color: var(--tnwos-face-color3);
}




/* END:input ui */

/**********************************************************/
/* textarea ui */

.tnwos-textarea-m {
  background: var(--tnwos-back-color2);
  border-radius: calc(var(--tnwos-icon-size-m) / 2);
  line-height: var(--tnwos-icon-size-s);
  padding-left: 16px;
  width: var(--tnwos-textarea-size-m);
  height: calc(var(--tnwos-textarea-size-m) / 2);
  margin: 4px 0px 1px 0px;
  outline: none;
}
.tnwos-textarea-m:focus {
  outline: none;
  box-shadow: none;
  border-color: transparent !important;
}
.tnwos-textarea-m:read-only  {
  border-color: var(--tnwos-face-color3);
  background: var(--tnwos-face-color3);
}

.tnwos-textarea-s {
  background: var(--tnwos-back-color2);
  border-radius: calc(var(--tnwos-icon-size-m) / 2);
  line-height: var(--tnwos-icon-size-s);
  padding-left: 16px;
  width: var(--tnwos-textarea-size-m);
  height: calc(var(--tnwos-textarea-size-s) / 2);
  margin: 4px 0px 1px 0px;
  outline: none;
}
.tnwos-textarea-s:focus {
  outline: none;
  box-shadow: none;
  border-color: transparent !important;
}
.tnwos-textarea-s:read-only  {
  border-color: var(--tnwos-face-color3);
  background: var(--tnwos-face-color3);
}
/* textarea ui */


/**********************************************************/
/* tnwos-combobox */
.tnwos-combobox-m {
  overflow: hidden;
  width: 100%;
  margin: 0px auto;
  text-align: center;
  position: relative;
  width: calc(var(--tnwos-input-size-m) - var(--tnwos-icon-size-m));
  box-sizing: border-box;
}

.tnwos-combobox-m .tnwos-input-m{
  z-index: 2;
  position: relative;
  border-radius: calc(var(--tnwos-icon-size-m) / 2) 0 0 calc(var(--tnwos-icon-size-m) / 2);
  padding-left: 0 0 0 16px;
  border-right-width: 0px;
  width: calc(var(--tnwos-input-size-m) - var(--tnwos-icon-size-m) - var(--tnwos-icon-size-m));
  height: var(--tnwos-icon-size-m);  
}
.tnwos-combobox-m .combobox-label:before {
  content: '';
  z-index: 132;
  position: absolute;
  top: 0;
  right: 0px;
  top: 0px;
  right: 0px;
/*   margin: 4px 0px 1px 0px; */
  background: var(--tnwos-back-color1);
  width: var(--tnwos-icon-size-m);
  height: var(--tnwos-icon-size-m);
  border-style: solid;
  border-width: 2px;
  border-color: var(--tnwos-face-color1);
  border-radius: calc(var(--tnwos-icon-size-m) / 2);
  pointer-events: none;
  box-sizing: border-box;
}
.tnwos-combobox-m .combobox-label:after {
  content: '';
  z-index: 132;
  box-sizing: border-box;
  position: absolute;
  top: 16px;
  right: 8px;
/*   margin: 4px 0px 1px 0px; */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: calc(var(--tnwos-icon-size-m) / 3.5) calc(var(--tnwos-icon-size-m) / 3.5) 0px calc(var(--tnwos-icon-size-m) / 3.5);
  border-color: var(--tnwos-face-color1) transparent transparent transparent; 
  color: var(--tnwos-face-color1);
  pointer-events: none;
}


.tnwos-combobox-m > .combobox-label > *:first-child{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
/*   margin: 4px 0px 1px 0px; */
  background: var(--tnwos-back-color2);
  height: var(--tnwos-icon-size-m);
  border-radius: calc(var(--tnwos-icon-size-m) / 2);
  padding-left: 16px;
  padding-right: var(--tnwos-icon-size-m);
  width: calc(var(--tnwos-input-size-m) - var(--tnwos-icon-size-m));
  height: var(--tnwos-icon-size-m);
  box-sizing: border-box;
  text-overflow: ellipsis;
  position: absolute;
  color: var(--tnwos-face-color1);
  z-index : 1;
  top: 0px;
  right: 0px;
  border-color: #e5e5e5;
  outline: none;
}

/* END: combobox ui */

/**********************************************************/
/* tnwos-autocombo */
.tnwos-autocombo-m {
  overflow: hidden;
  width: 100%;
  margin: 0px auto;
  text-align: center;
  position: relative;
  width: calc(var(--tnwos-input-size-m) - var(--tnwos-icon-size-m));
  box-sizing: border-box;
}

.tnwos-autocombo-l {
  overflow: hidden;
  width: 100%;
  margin: 0px auto;
  text-align: center;
  position: relative;
  width: calc(var(--tnwos-input-size-l) - var(--tnwos-icon-size-l));
  box-sizing: border-box;
}

.tnwos-autocombo-m .tnwos-input-m{
  z-index: 2;
  position: relative;
  border-radius: calc(var(--tnwos-icon-size-m) / 2);
  padding-left: 0 0 0 16px;
  border-right-width: 0px;
  width: calc(var(--tnwos-input-size-m) - var(--tnwos-icon-size-m));
  height: var(--tnwos-icon-size-m);  
}

.tnwos-autocombo-l .tnwos-input-l{
  z-index: 2;
  position: relative;
  border-radius: calc(var(--tnwos-icon-size-l) / 2) 0 0 calc(var(--tnwos-icon-size-l) / 2);
  padding-left: 0 0 0 16px;
  border-right-width: 0px;
  width: calc(var(--tnwos-input-size-l) - var(--tnwos-icon-size-l) - var(--tnwos-icon-size-l));
  height: var(--tnwos-icon-size-l);  
}

.tnwos-autocombo-m .combobox-label:before {
  content: '';
  z-index: 132;
  position: absolute;
  top: 0;
  right: 0px;
  top: 0px;
  right: 0px;
  background: var(--tnwos-back-color1);
  width: var(--tnwos-icon-size-m);
  height: var(--tnwos-icon-size-m);
  border-style: solid;
  border-width: 2px;
  border-color: var(--tnwos-face-color1);
  border-radius: calc(var(--tnwos-icon-size-m) / 2);
  pointer-events: none;
  box-sizing: border-box;
}

.tnwos-autocombo-l .combobox-label:before {
  content: '';
  z-index: 132;
  position: absolute;
  top: 0;
  right: 0px;
  top: 0px;
  right: 26px;
  background: var(--tnwos-back-color1);
  width: var(--tnwos-icon-size-m);
  height: var(--tnwos-icon-size-m);
  border-style: solid;
  border-width: 2px;
  border-color: var(--tnwos-face-color1);
  border-radius: calc(var(--tnwos-icon-size-m) / 2);
  pointer-events: none;
  box-sizing: border-box;
}

.tnwos-autocombo-m .combobox-label:after {
  content: '';
  z-index: 132;
  box-sizing: border-box;
  position: absolute;
  top: 16px;
  right: 8px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: calc(var(--tnwos-icon-size-m) / 3.5) calc(var(--tnwos-icon-size-m) / 3.5) 0px calc(var(--tnwos-icon-size-m) / 3.5);
  border-color: var(--tnwos-face-color1) transparent transparent transparent; 
  color: var(--tnwos-face-color1);
  pointer-events: none;
}

.tnwos-autocombo-l .combobox-label:after {
  content: '';
  z-index: 132;
  box-sizing: border-box;
  position: absolute;
  top: 16px;
  right: 34px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: calc(var(--tnwos-icon-size-m) / 3.5) calc(var(--tnwos-icon-size-m) / 3.5) 0px calc(var(--tnwos-icon-size-m) / 3.5);
  border-color: var(--tnwos-face-color1) transparent transparent transparent; 
  color: var(--tnwos-face-color1);
  pointer-events: none;
}

.tnwos-autocombo-m > .combobox-label > *:first-child{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: var(--tnwos-back-color2);
  height: var(--tnwos-icon-size-l);
  border-radius: calc(var(--tnwos-icon-size-m) / 2);
  padding-left: 16px;
  padding-right: var(--tnwos-icon-size-m);
  width: calc(var(--tnwos-input-size-m) - var(--tnwos-icon-size-m));
  height: var(--tnwos-icon-size-m);
  box-sizing: border-box;
  text-overflow: ellipsis;
  position: absolute;
  color: var(--tnwos-face-color1);
  z-index : 1;
  top: 0px;
  right: 0px;
  border-color: #e5e5e5;
  outline: none;
}

.tnwos-autocombo-l > .combobox-label > *:first-child{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: var(--tnwos-back-color2);
  height: var(--tnwos-icon-size-l);
  border-radius: calc(var(--tnwos-icon-size-l) / 2);
  padding-left: 16px;
  padding-right: var(--tnwos-icon-size-l);
  width: calc(var(--tnwos-input-size-l) - var(--tnwos-icon-size-l));
  height: var(--tnwos-icon-size-l);
  box-sizing: border-box;
  text-overflow: ellipsis;
  position: absolute;
  color: var(--tnwos-face-color1);
  z-index : 1;
  top: 0px;
  right: 0px;
  border-color: #e5e5e5;
  outline: none;
}

/* END: autocombo ui */

/**********************************************************/
/* tnwos-selectbox */
.tnwos-selectbox-m {
  overflow: hidden;
  width: 100%;
  margin: 0px auto;
  text-align: center;
  position: relative;
  width: calc(var(--tnwos-input-size-m) - var(--tnwos-icon-size-m));
  box-sizing: border-box;
}

.tnwos-selectbox-m::before {
  content: '';
  z-index: 132;
  position: absolute;
  top: 0;
  right: 0px;
  top: 0px;
  right: 0px;
/*   margin: 4px 0px 1px 0px; */
  background: var(--tnwos-back-color1);
  width: var(--tnwos-icon-size-m);
  height: var(--tnwos-icon-size-m);
  border-style: solid;
  border-width: 2px;
  border-color: var(--tnwos-face-color1);
  border-radius: calc(var(--tnwos-icon-size-m) / 2);
  pointer-events: none;
  box-sizing: border-box;
}

.tnwos-selectbox-m::after{
  content: '';
  z-index: 132;
  pointer-events: none;
  box-sizing: border-box;
  position: absolute;
  top: 16px;
  right: 8px;
/*   margin: 4px 0px 1px 0px; */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: calc(var(--tnwos-icon-size-m) / 3.5) calc(var(--tnwos-icon-size-m) / 3.5) 0px calc(var(--tnwos-icon-size-m) / 3.5);
  border-color: var(--tnwos-face-color1) transparent transparent transparent; 
  color: var(--tnwos-face-color1);
}

.tnwos-selectbox-m > select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: var(--tnwos-back-color2);
  height: var(--tnwos-icon-size-m);
  border-radius: calc(var(--tnwos-icon-size-m) / 2);
  padding-left: 16px;
  padding-right: var(--tnwos-icon-size-m);
  width: calc(var(--tnwos-input-size-m) - var(--tnwos-icon-size-m));
  height: var(--tnwos-icon-size-m);
/*   margin: 4px 0px 1px 0px; */
  box-sizing: border-box;
  text-overflow: ellipsis;
  position: relative;
  color: var(--tnwos-face-color1);
}

.tnwos-selectbox-m > select::-ms-expand {
    display: none;
}

.tnwos-selectbox-s {
  overflow: hidden;
  width: 100%;
  margin: 0px auto;
  text-align: center;
  position: relative;
  width: var(--tnwos-input-size-ss4);
  box-sizing: border-box;
}

.tnwos-selectbox-s::before {
  content: '';
  z-index: 132;
  position: absolute;
  top: 0;
  right: 0px;
  top: 0px;
  right: 0px;
/*   margin: 4px 0px 1px 0px; */
  background: var(--tnwos-back-color1);
  width: var(--tnwos-icon-size-m);
  height: var(--tnwos-icon-size-m);
  border-style: solid;
  border-width: 2px;
  border-color: var(--tnwos-face-color1);
  border-radius: calc(var(--tnwos-icon-size-m) / 2);
  pointer-events: none;
  box-sizing: border-box;
}

.tnwos-selectbox-s::after{
  content: '';
  z-index: 132;
  pointer-events: none;
  box-sizing: border-box;
  position: absolute;
  top: 16px;
  right: 8px;
/*   margin: 4px 0px 1px 0px; */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: calc(var(--tnwos-icon-size-m) / 3.5) calc(var(--tnwos-icon-size-m) / 3.5) 0px calc(var(--tnwos-icon-size-m) / 3.5);
  border-color: var(--tnwos-face-color1) transparent transparent transparent; 
}

.tnwos-selectbox-s > select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: var(--tnwos-back-color2);
  height: var(--tnwos-icon-size-m);
  border-radius: calc(var(--tnwos-icon-size-m) / 2);
  padding-left: 16px;
  padding-right: var(--tnwos-icon-size-m);
  width: calc(var(--tnwos-input-size-m) - var(--tnwos-icon-size-m));
  height: var(--tnwos-icon-size-m);
/*   margin: 4px 0px 1px 0px; */
  box-sizing: border-box;
  text-overflow: ellipsis;
  position: relative;
  color: var(--tnwos-face-color1);
}

.tnwos-selectbox-s > select::-ms-expand {
    display: none;
}

.tnwos-selectbox-time {
  height: var(--tnwos-icon-size-m);
  border-radius: calc(var(--tnwos-icon-size-m) / 2);
  padding-left: 16px;
  height: var(--tnwos-icon-size-m);
/*   margin: 4px 0px 1px 0px; */
  box-sizing: border-box;
  text-overflow: ellipsis;
  position: relative;
}



/* END: selectbox ui */

/**********************************************************/
/* tnwos-check-row */
.tnwos-check-row {
  margin: 4px auto 1px auto;
  box-sizing: border-box;
  position: relative;
  padding: 0;
  letter-spacing: 0px;
  display:flex;
  flex-flow: row wrap;
  justify-content: center;
  
}

.tnwos-check-row > .tnwos-icon {
  margin: -1px 0px 0px -1px;
  position: absolute;
  top: 0;
  left: 0;
}

.tnwos-check-row > .icon-right{
  cursor: pointer; 
  text-align: right;
  padding: 0;
  margin: 4px 0 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tnwos-check-row-m {
  width: calc(var(--tnwos-input-size-m) - var(--tnwos-icon-size-m));
  height: var(--tnwos-icon-size-m);
  border-radius: calc(var(--tnwos-icon-size-m) / 2);
  background-color: var(--tnwos-back-color1);
  color: var(--tnwos-face-color1);
  border: 2px solid var(--tnwos-face-color1);
}

.tnwos-check-row-m > .tnwos-icon {
  width: calc( (var(--tnwos-icon-size-m) - 2px));
}

.tnwos-check-row .tnwos-icon-m {
  width: calc( var(--tnwos-icon-size-m) - 2px);
  height: calc( var(--tnwos-icon-size-m) - 2px);
  background: var(--tnwos-back-color2);
  color: var(--tnwos-back-color1);
}

.tnwos-check-row input[type="checkbox"] + label.tnwos-coinbtn > .tnwos-check-on {
  display: none;
}
.tnwos-check-row input[type="checkbox"] + label.tnwos-coinbtn > .tnwos-check-off {
  display: block;
}

.tnwos-check-row input[type="checkbox"]:checked + label.tnwos-coinbtn > .tnwos-check-on {
  display: block;
}
.tnwos-check-row input[type="checkbox"]:checked + label.tnwos-coinbtn > .tnwos-check-off {
  display: none;
}


/* END:tnwos-check-row */


/**********************************************************/
/* tnwos-checkbox */
.tnwos-checkbox-m {
  overflow: hidden;
  width: 100%;
  margin: 0px auto;
  position: relative;
  width: calc(var(--tnwos-input-size-m) - var(--tnwos-icon-size-m));
  box-sizing: border-box;
  letter-spacing: 2px;
  text-align: left;
  color: var(--tnwos-face-color1);
}


.tnwos-checkelm-check {
  display: none;
}
.tnwos-checkelm-elm {
  cursor: pointer;
}

.tnwos-checkelm-check:checked + .tnwos-checkelm-elm {
	outline : 2px solid var(--tnwos-select-color);
}

/* END: checkbox ui */

/**********************************************************/
/* tnwos-grid */
.tnwos-grid .sel {
	/*border: 1px var(--tnwos-select-color) solid;*/
  background-color: var(--tnwos-select-color2);
}
/* END: grid ui */

/**********************************************************/
/* toggle type coin-button */
label.tnwos-iconbtn{
  transition: 250ms;
  cursor: pointer;
}
label.tnwos-iconbtn > span{
  margin:auto;
  transition: 250ms;
  cursor: pointer;
}
input[type="radio"]:checked + label.tnwos-iconbtn,
input[type="checkbox"]:checked + label.tnwos-iconbtn {
  /*color: var(--tnwos-back-color1);
  background: var(--tnwos-face-color3);*/
  -webkit-transform: rotateX(360deg);
  -ms-transform: rotateX(360deg);
  transform: rotateX(360deg);
  transition-timing-function: linear;
  cursor: pointer;
}
input[type="radio"]:checked + label.tnwos-iconbtn > span,
input[type="checkbox"]:checked + label.tnwos-iconbtn > span {
  -webkit-transform: rotateX(360deg);
  -ms-transform: rotateX(360deg);
  transform: rotateX(360deg) translateY(50%);
  transition-timing-function:linear;
  cursor: pointer;
}

label.tnwos-coinbtn{
  transition: 250ms;
  cursor: pointer;
}
label.tnwos-coinbtn > span{
  margin:auto;
  transition: 250ms;
  cursor: pointer;
}
input[type="radio"]:checked + label.tnwos-coinbtn,
input[type="checkbox"]:checked + label.tnwos-coinbtn {
  color: var(--tnwos-back-color2) !important;
/*  background: var(--tnwos-face-color1);*/
  background: var(--tnwos-select-color2) !important;
  -webkit-transform: rotateX(360deg);
  -ms-transform: rotateX(360deg);
  transform: rotateX(180deg);
  transition-timing-function: linear;
  cursor: pointer;
}
input[type="radio"]:checked + label.tnwos-coinbtn > span,
input[type="checkbox"]:checked + label.tnwos-coinbtn > span {
  -webkit-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  transform: rotateX(180deg) translateY(50%);
  transition-timing-function:linear;
  cursor: pointer;
}
/* END:toggle type coin-button */


/**********************************************************/
/* img */
.tnwos-img-s {
  width: calc(var(--tnwos-input-size-s));
  height: calc( var(--tnwos-input-size-s) * 1.5);
  border: solid 1px var(--tnwos-face-color1);
}
.tnwos-img-m {
  width: calc(var(--tnwos-input-size-m));
  height: calc( var(--tnwos-input-size-m) * 1.5);
  border: solid 1px var(--tnwos-face-color1);
}

.tnwos-img-l {  
  width: calc(var(--tnwos-input-size-l));
  height: calc( var(--tnwos-input-size-l) * 1.5);
  border: solid 1px var(--tnwos-face-color1);
}


.tnwos-img-map {
  width: calc(var(--tnwos-input-size-s));
  height: calc(var(--tnwos-input-size-s));
  border: solid 1px var(--tnwos-face-color1);
}

/*END: img */

/**********************************************************/
/* color */
.tnwos-error{
  color: red;
  margin: 0px 2px 4px 2px;
  font-family: 'Lato', Calibri, Arial, sans-serif;
  font-size: calc(var(--tnwos-font-size-s));
   font-weight: 300;
   letter-spacing: 0px;
}

.tnwos-bk-error{
  background-color: var(--tnwos-alert-color3);
}
 
.tnwos-bk-black{
  background: var(--tnwos-back-color1);
} 
/*END: color */

/**********************************************************/
/* line */
.tnwos-hr {
  border: 0;
  height: 1px;
  background-color: var(--tnwos-back-color2);
}

/*END: line */

/**********************************************************/
/* letter space */
.tnwos-letterspace-none{
  letter-spacing: -1px;
}

/*END: letter space */

/**********************************************************/
/* display */
.tnwos-disp-inblock-l{
  display: inline-block;
  width: var(--tnwos-input-size-l);
}
.tnwos-disp-inblock-m{
  display: inline-block;
  width: var(--tnwos-input-size-m);
}
.tnwos-disp-inblock-s{
  display: inline-block;
  width: var(--tnwos-input-size-s);
}
.tnwos-disp-inblock-s2{
  display: inline-block;
  width: var(--tnwos-input-size-s2);
}
.tnwos-disp-inblock-ss2{
  display: inline-block;
  width: var(--tnwos-input-size-ss2);
}
.tnwos-disp-inblock-ss3{
  display: inline-block;
  width: var(--tnwos-input-size-ss3);
}
.tnwos-disp-inblock-sx{
  display: inline-block;
  width: var(--tnwos-input-size-sx);
}
.tnwos-footer-block{
  display: inline-block;
  margin-bottom: var(--tnwos-footer-mb);
}

/*END: display */

/**********************************************************/
/* IME */
.tnwos-ime-on{
  ime-mode: active;
}
.tnwos-ime-off{
  ime-mode: inactive;
}

/*END: IME */