/*======================================================================
  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-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-s3       : 250px;
  --tnwos-input-size-ss3      : 200px;
  --tnwos-input-size-ss2      : 160px;
  --tnwos-input-size-sx       : 120px;

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

  --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(240,60,60,1);
  --tnwos-select-color        : rgba(245,215,215,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-s3       : 160px;
    --tnwos-input-size-ss3      : 110px;
    --tnwos-input-size-ss2      : 100px;
    --tnwos-input-size-sx       :  60px;
    --tnwos-textarea-size-m     : 320px;
    --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-s3       : 160px;
    --tnwos-input-size-ss3      : 110px;
    --tnwos-input-size-ss2      : 100px;
    --tnwos-input-size-sx       :  60px;
    --tnwos-textarea-size-m     : 320px;
    --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);
  
}

.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;
}

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

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

.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-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;
}

.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-face-color1);
}
.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;
}
/* 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;
}
.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;
}
.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;
}

.tnwos-input-m {
  background: var(--tnwos-face-color1);
  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;
}
.tnwos-input-l {
  background: var(--tnwos-face-color1);
  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;
}
.tnwos-input-l:focus,
.tnwos-input-m:focus {
  outline: none;
  box-shadow: none;
  border-color: transparent !important;
}
.tnwos-input-l:read-only,
.tnwos-input-m:read-only  {
  border-color: var(--tnwos-face-color3);
  background: var(--tnwos-face-color3);
}

.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: 40%;
}
.tnwos-input-double > div {
  text-align: center;
  margin: auto 0px;
  width: 16px;
}

.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;
}

.tnwos-input-unit {
  text-align: right;
}

.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: 332;
  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-face-color1);
  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;
}
.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: 332;
  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-face-color1);
  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: 332;
  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-face-color1);
  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: 332;
  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-face-color1);
  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-face-color1);
  box-sizing: border-box;
  cursor: pointer;
}

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

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

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


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

.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-btn-sx {
  width: var(--tnwos-input-size-sx2);
  height: var(--tnwos-icon-size-m);
  line-height: var(--tnwos-icon-size-m);
  border-radius: calc(var(--tnwos-icon-size-m) / 2);
  margin: 3px 0px 1px 0px;
  background-color: var(--tnwos-back-color2);
  box-sizing: border-box;
  cursor: pointer;
  padding: 0 10px;
}
/* END:input ui */

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

.tnwos-textarea-m {
  background: var(--tnwos-face-color1);
  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);
}

/* textarea 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: 332;
  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: 444;
  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-m > select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: var(--tnwos-face-color1);
  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;
}

.tnwos-selectbox-m > 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-face-color1);
  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 */


/**********************************************************/
/* 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-color1) !important;
/*  background: var(--tnwos-face-color1);*/
  background: var(--tnwos-select-color) !important;
  -webkit-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  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 */


/**********************************************************/
/* 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);
}

/*END: display */

/**********************************************************/
/* Good Luck for Gambler */
.goodluck-generated-container {
  display: flex;
  width: calc(var(--tnwos-deskpop-width) - 7px - 7px);
  height: var(--tnwos-input-size-s3);
  font-size:200%;
  letter-spacing:normal;
  align-items: center;
  justify-content: center;
  background-color: var(--tnwos-back-color2);
  margin: 0px auto 20px auto;
}
/*END: Good Luck for Gambler  */

/**********************************************************/
/* ACCORDION */

.tnwos-accordion {
  text-align:center;
  background-color: var(--tnwos-select-color);
  color: var(--tnwos-face-color1);
  cursor: pointer;
  padding: 18px;
  width: 90%;
  border: 1px solid var(--tnwos-back-color1);
  outline: none;
  transition: 0.4s;
  font-weight: bold;
}

.tnwos-accordion:hover {
  background-color: var(--tnwos-link-color);
}

button.tnwos-accordion::after {
  content: '\002B' !important;
  float: right;
}

button.tnwos-accordion.active:after {
  content: '\2212' !important;
  float: right;
}
/*END: ACCORDION  */

/**********************************************************/
/* AOG Black Jack */
/*
.aog-bj button.menu {
  min-width: 320px;
}
*/

.aog-bj > .board {
  display: block;
  background: #013b3a;
  width: 640px;
  height: 460px;
  margin:auto;
  letter-spacing:normal;
}

.aog-bj > .board > section.dealer {
  display:inline-block;
  width: 100%;
  height: 125px;
}

.aog-bj > .board > section.dealer .table {
  display: grid;
}

.aog-bj > .board > section.dealer .table .top {
  display: inherit;
  height: 140px;
}
.aog-bj > .board > section.dealer .table .top .deck {
  height: 142px;
  text-align: left;
  margin: 0px;
  margin-left: 30px;
}
        
.aog-bj > .board > section.dealer .table .top .deck .cards:nth-child(1) {
  margin: 0px 0px 0px 0px;
  vertical-align: top;
}
.aog-bj > .board > section.dealer .table .top .deck .cards:nth-child(2) {
  margin: 25px 0px -60px -25px;
  vertical-align: top;
}
.aog-bj > .board > section.dealer .table .top .deck .cards:nth-child(3) {
  margin: 0px 0px 0px -25px;
  vertical-align: top;
}
.aog-bj > .board > section.dealer .table .top .deck .cards:nth-child(4) {
  margin: 25px 0px -60px -25px;
  vertical-align: top;
}
.aog-bj > .board > section.dealer .table .top .deck .cards:nth-child(5) {
  margin: 0px 0px 0px -25px;
  vertical-align: top;
}
.aog-bj > .board > section.dealer .table .top .deck .cards:nth-child(6) {
  margin: 25px 0px -60px -25px;
  vertical-align: top;
}
.aog-bj > .board > section.dealer .table .top .deck .cards:nth-child(7) {
  margin: 0px 0px 0px -25px;
  vertical-align: top;
}

.aog-bj > .board .summary .bottom {
  height:25px;
  font-size:120%;
  font-style:italic;
  letter-spacing:1px;
  color: yellow;
}
   
.aog-bj > .board > section.player {
  display:inline-block;
  width: 100%;
  height: 250px;
}
  
.aog-bj > .board > .separator {
  background: var(--tnwos-face-color1);
  width:100%;
  height: 10px;
}

.aog-bj > .board > section .seat{
  color:#ebe7a2;
  float: left;
  height:100%;
  width:25%;
  font-size:120%;
  text-align: left;
}
  
.aog-bj > .board > section .seat .title {
  height:25px;
  margin-left: 15px;
  letter-spacing: 6px;
}

.aog-bj > .board > section .seat .box {
  height: 105px;
  border: 4px solid var(--tnwos-face-color1);
  margin: 0 52px 0 15px;
  display:flex;
  align-items:end;
}
    
.aog-bj > .board > section .seat .box .chips {
  margin: 30px 0 0 10px;
  width: 70px;
}
      
.aog-bj > .board > section .seat .box .chips img {
  width:30px;
}
        
.aog-bj > .board > section .seat .box .chips span {
  vertical-align:bottom;
}

.aog-bj > .board > section .seat .box .chips .five {
	text-align: center;
	width: 64px;
}
     
.aog-bj > .board > section .seat .box .chips .twent-five {
  width: 32px;
  float: left;
  margin-top: 2px;
}

.aog-bj > .board > section .seat .box .chips .one-hundred {
  color:lightcoral;
  margin-top: 2px;
  width: 32px;
  float: right;
}
  
.aog-bj > .board > section .seat .box .chips .totalBet {
  color:lightcoral;
  text-align: center;
  float: right;
  width: 70px;
}

.aog-bj > .board > section .seat .bet {
  display:block;
  margin: 0 50px 0 15px;
}

.aog-bj > .board > section .seat .bet span {
  height: 25px;
  width: 65px;
  display: inline-table;
  font-size: 115%;
  color: var(--tnwos-back-color1);
  text-align: center;
  vertical-align: bottom;
}
    
.aog-bj > .board > section .seat .bet .five {
  cursor: pointer;
  margin-top: 4px;
}
.aog-bj > .board > section .seat .bet .five span {
  background: #5D1011;
  margin-top: 5px;
}

.aog-bj > .board > section .seat .bet .twenty-five {
  cursor: pointer;
}
.aog-bj > .board > section .seat .bet .twenty-five span {
  background: #10741F;
  margin-top: 5px;
}
        
.aog-bj > .board > section .seat .bet .one-hundred {
  cursor: pointer;
}
.aog-bj > .board > section .seat .bet .one-hundred span {
  background: #7F7A79;
  margin-top: 5px;
}
      
.aog-bj > .board > section .seat .bet img {
  width:30px;
}

.aog-bj > .board > section .table{
  color: var(--tnwos-back-color1);
  float: left;
  height:100%;
  width:50%;
}

.aog-bj > .board > section.player .table .top {
  display: inherit;
  justify-content: center;
  align-items: flex-start;
  height:200px;
}

.aog-bj > .board > section.player .table .top .deck {
   width: 80px;
   height: 190px;
   float: left;
   text-align: left;
}
      
.aog-bj > .board > section.player .table .top .deck .cards:nth-child(1) {
  margin: 0px 0px 0px 0px;
  vertical-align: top;
}
.aog-bj > .board > section.player .table .top .deck .cards:nth-child(2) {
  margin: 20px 0px 0px -25px;
  vertical-align: top;
}
.aog-bj > .board > section.player .table .top .deck .cards:nth-child(3) {
  margin: 45px 0px 0px -65px;
  vertical-align: top;
}
.aog-bj > .board > section.player .table .top .deck .cards:nth-child(4) {
  margin: 70px 0px 0px -25px;
  vertical-align: top;
}
.aog-bj > .board > section.player .table .top .deck .cards:nth-child(5) {
  margin: 95px 0px 0px -65px;
  vertical-align: top;
}
.aog-bj > .board > section.player .table .top .deck .cards:nth-child(6) {
  margin: 120px 0px 0px -25px;
  vertical-align: top;
}
.aog-bj > .board > section.player .table .top .deck .cards:nth-child(7) {
  margin: 145px 0px 0px -65px;
  vertical-align: top;
}
        
.aog-bj > .board > section.player .table .bottom {
  position: absolute;
  margin-top: 10px;
  height:25px;
  font-size:120%;
  font-style:italic;
}
        
.aog-bj > .board > section .options{
  float: right;
  height:100%;
  width:25%;
}
  
.aog-bj > .board > section .options .btnActions {
  font-size: 110%;
  width: 142px;
  height: 30px;
}

.aog-bj > .board > section .options .btnActions.doubleDown:after {
  content: 'DOUBLE DOWN';
}

.aog-bj > .board > section .options .box{
  display: inline-block;
  color: var(--tnwos-back-color1);
  height:40%;
  width:85%;
  margin:10px 10px 0 0;
  border: 2px solid var(--tnwos-back-color1);
  background: #fef779;
  font-size:120%;
}

.aog-bj > .board > section .options .box div {
  height:50%;
}
      
.aog-bj > .board > section .options .box div > div {
  display:inline-block;
  width:45%;
}

.aog-bj > .board > section .options .box div > div:nth-child(1) {
  text-align:left;
}

.aog-bj > .board > section .options .box div > div:nth-child(2) {
  text-align:right;
}

.aog-bj > .board > section .options .panel{
  height:60%;
  width:90%;
  display: inline-grid;
  margin: 40px 0 0 0;
}
  
.aog-bj > .board > section .options .panel input {
  height: 30px;
  margin: 5px 10px 0 0;
  cursor: pointer;
}

.aog-bj > .board .summary {
  display: inline-block;
  background: #013b3a;
  width: 640px;
}

.aog-bj > .board .summary div {
  margin:5px;
}

.aog-bj > .board .summary .balance {
  float: left;
  background: var(--tnwos-back-color1);
  color: #f98a8a;
  border: 1px solid #ebe7a2;
  width: 240px;
  height: 25px;
  font-size: 18px;
}
      
.aog-bj > .board .summary .menu {
  float: left;
}
  
.aog-bj > .board .summary .menu input {
  width: 120px;
  height: 25px;
  margin: 0 2px 0 4px;
  font-weight: bold;
}

.aog-bj > .board .summary .remaining {
  font-size:18px;
  float: right;
  background: var(--tnwos-back-color1);
  color: #eb96eb;
  border: 1px solid #ebe7a2;
  width: 240px;
  height: 25px;
  letter-spacing: 2px;
}
  
.aog-bj .deck .cards {
  width: 45px;
}

.aog-bj .topMsg {
  visibility: hidden;
  color: #3399ff;
  text-align: left;
  font-size: 16px;
}
.aog-bj .topMsg .innerMsg {
  display: inline-block;
  width: 76px;
}

.aog-bj .bottomMsg {
  visibility: hidden;
  color: #fbca9a;
  text-align: left;
  font-size: 16px;
}
.aog-bj .bottomMsg .innerMsg {
  display: inline-block;
  width: 76px;
}

.aog-bj.popup{
  width: 300px;
  min-height: 50px;
  border: 1px solid var(--tnwos-back-color1);
  border-radius: 10px;
  background: var(--tnwos-face-color1);
  color: var(--tnwos-back-color1);
  box-sizing: border-box; /* for inside padding */
  padding: 10px;
  letter-spacing: normal;
  font-size: 18px;

  /* for center */
  position:absolute;
  top: 220px;
  left: 50%;
  transform: translate(-50%,-50%);

  /* visibility */
  display: none;
}

.aog-bj.comment {
  display: none;
  background: var(--tnwos-face-color1);
  color: var(--tnwos-back-color1);
  width: 240px;
  height: 55px;
  border: 1px solid var(--tnwos-back-color1);
  border-radius: 10px;
  margin: 8px 0 0 -87px;
  font-size: 20px;
  align-items: center;
  justify-content: center;
}

.aog-bj.countdown {
  width: 50px;
  min-height: 50px;
  border: 1px solid var(--tnwos-back-color1);
  border-radius: 25px;
  background: yellow;
  color: var(--tnwos-back-color1);
  box-sizing: border-box; /* for inside padding */
  padding: 10px;
  letter-spacing: normal;
  font-size: 18px;
  /* for center */
  position:absolute;
  top:40%;
  left:50%;
  transform: translate(-50%,-50%);

  /* visibility */
  display: none;
}

.aog-bj.checkpoints {
  width: 330px;
  height: 260px;
  letter-spacing: normal;
  background: #f8f6f6;
  padding: 10px;
  border: 1px solid var(--tnwos-back-color1);
  /* for center */
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);

  /* visibility */
  display: none;
}
.aog-bj.checkpoints .bar {
  display: block;
}
.aog-bj.checkpoints .bar .modal-title  {
  font-size: 13px;
  float:left;
  margin-left: 2px;
}
.aog-bj.checkpoints .bar .close  {
  font-size: 13px;
  float:right;
  cursor: pointer;
  margin-right: 2px;
}
    
.aog-bj.checkpoints .title {
  display: inline-block;
  width: 325px;
  font-size: 18px;
  background: #feb078;
  color: var(--tnwos-back-color1);
  border: 1px solid;
}
.aog-bj.checkpoints input[type="number"] {
  width: 97%;
  height: 20px;
  margin: 10px 0;
}
.aog-bj.checkpoints .values input[type="button"] {
  width: 100px;
  height: 25px;
  margin: 4px;
  font-weight: bold;
}
.aog-bj.checkpoints .btnOk {
  width: 110px;
  height: 25px;
  margin: 8px;
}
  
.aog-bj .lesson-section {
  letter-spacing:normal;
  display:inline-grid
} 
.aog-bj .lesson-section .lesson-article {
  margin:10px;
  display:inline-block;
  flex-direction: column;
  max-width: 600px;
}
/*
.aog-bj .lesson-text {
  max-width:600px;
  margin: 10px 0 20px 0;
  text-align: justify;
  white-space: pre-wrap;
  color: var(--tnwos-face-color1);
}*/

@media screen and (min-width: 0px) and (max-width: 639px) {
  :root {
		.aog-bj > .board {
		  display: block;
		  background: #013b3a;
		  width: 370px;
		  height: 460px;
		  margin:auto;
		  letter-spacing:normal;
		}
		
		.aog-bj > .board > section.dealer {
		  display:inline-block;
		  width: 100%;
		  height: 125px;
		}
		
		.aog-bj > .board > section.dealer .table {
		  display: grid;
		}
		
		.aog-bj > .board > section.dealer .table .top {
		  display: inherit;
		  height: 140px;
		}
		.aog-bj > .board > section.dealer .table .top .deck {
		  height: 142px;
		  text-align: left;
		  margin: 0px;
		  margin-left: 30px;
		}
		        
		.aog-bj > .board > section.dealer .table .top .deck .cards:nth-child(1) {
		  margin: 0px 0px 0px 0px;
		  vertical-align: top;
		}
		.aog-bj > .board > section.dealer .table .top .deck .cards:nth-child(2) {
		  margin: 25px 0px -60px -25px;
		  vertical-align: top;
		}
		.aog-bj > .board > section.dealer .table .top .deck .cards:nth-child(3) {
		  margin: 0px 0px 0px -25px;
		  vertical-align: top;
		}
		.aog-bj > .board > section.dealer .table .top .deck .cards:nth-child(4) {
		  margin: 25px 0px -60px -25px;
		  vertical-align: top;
		}
		.aog-bj > .board > section.dealer .table .top .deck .cards:nth-child(5) {
		  margin: 0px 0px 0px -25px;
		  vertical-align: top;
		}
		.aog-bj > .board > section.dealer .table .top .deck .cards:nth-child(6) {
		  margin: 25px 0px -60px -25px;
		  vertical-align: top;
		}
		.aog-bj > .board > section.dealer .table .top .deck .cards:nth-child(7) {
		  margin: 0px 0px 0px -25px;
		  vertical-align: top;
		}
		
		.aog-bj > .board .summary .bottom {
		  height:25px;
		  font-size:100%;
		  font-style:italic;
		  letter-spacing:0.5px;
		  color: yellow;
		}
		   
		.aog-bj > .board > section.player {
		  display:inline-block;
		  width: 100%;
		  height: 250px;
		}
		  
		.aog-bj > .board > .separator {
		  background: var(--tnwos-face-color1);
		  width:100%;
		  height: 10px;
		}
		
		.aog-bj > .board > section .seat{
		  color:#ebe7a2;
		  float: left;
		  height:100%;
		  width:25%;
		  font-size:120%;
		  text-align: left;
		}
		  
		.aog-bj > .board > section .seat .title {
		  height:25px;
		  margin-left: 5px;
		  letter-spacing: 1px;
		}
		
		.aog-bj > .board > section .seat .box {
		  height: 105px;
		  border: 4px solid var(--tnwos-face-color1);
		  margin: 0 2px 0 10px;
		  display:flex;
		  align-items:end;
		}
		    
		.aog-bj > .board > section .seat .box .chips {
		  margin: 30px 0 0 6px;
		  width: 64px;
		}
		      
		.aog-bj > .board > section .seat .box .chips img {
		  width:30px;
		}
		
		.aog-bj > .board > section .seat .box .chips .five {
		  text-align: center;
		  width: 64px;
		}
		      
		.aog-bj > .board > section .seat .box .chips .twent-five {
		  width: 30px;
	    float: left;
	    margin-top: 2px;
		}
		
		.aog-bj > .board > section .seat .box .chips .one-hundred {
      color:lightcoral;
      margin-top: 2px;
      width: 30px;
      float: right;
    }
      
		.aog-bj > .board > section .seat .box .chips .totalBet {
		  color:lightcoral;
		  text-align: center;
		  float: right;
	    width: 64px;
		}
		
		.aog-bj > .board > section .seat .bet {
		  display:block;
		  margin: 0 0 0 15px;
		}
		
		.aog-bj > .board > section .seat .bet span {
		  height: 25px;
		  width: 45px;
		  display: inline-table;
		  font-size: 100%;
		  color: var(--tnwos-back-color1);
		  text-align: center;
		  vertical-align: bottom;
		}
		    
		.aog-bj > .board > section .seat .bet .five {
		  cursor: pointer;
		  margin-top: 4px;
		}
		.aog-bj > .board > section .seat .bet .five span {
		  background: #5D1011;
		  margin-top: 5px;
		}
		
		.aog-bj > .board > section .seat .bet .twenty-five {
		  cursor: pointer;
		}
		.aog-bj > .board > section .seat .bet .twenty-five span {
		  background: #10741F;
		  margin-top: 5px;
		}
		        
		.aog-bj > .board > section .seat .bet .one-hundred {
		  cursor: pointer;
		}
		.aog-bj > .board > section .seat .bet .one-hundred span {
		  background: #7F7A79;
		  margin-top: 5px;
		}
		      
		.aog-bj > .board > section .seat .bet img {
		  width:30px;
		}
		
		.aog-bj > .board > section .table{
		  color:var(--tnwos-back-color1);
		  float: left;
		  height:100%;
		  width:50%;
		}
		
		.aog-bj > .board > section.player .table .top {
		  display: inherit;
		  justify-content: center;
		  align-items: flex-start;
		  height:200px;
		}
		
		.aog-bj > .board > section.player .table .top .deck {
		   width: 80px;
		   height: 190px;
		   float: left;
		   text-align: left;
		   margin-left: 10px;
		}
		      
		.aog-bj > .board > section.player .table .top .deck .cards:nth-child(1) {
		  margin: 0px 0px 0px 0px;
		  vertical-align: top;
		}
		.aog-bj > .board > section.player .table .top .deck .cards:nth-child(2) {
		  margin: 20px 0px 0px -25px;
		  vertical-align: top;
		}
		.aog-bj > .board > section.player .table .top .deck .cards:nth-child(3) {
		  margin: 45px 0px 0px -65px;
		  vertical-align: top;
		}
		.aog-bj > .board > section.player .table .top .deck .cards:nth-child(4) {
		  margin: 70px 0px 0px -25px;
		  vertical-align: top;
		}
		.aog-bj > .board > section.player .table .top .deck .cards:nth-child(5) {
		  margin: 95px 0px 0px -65px;
		  vertical-align: top;
		}
		.aog-bj > .board > section.player .table .top .deck .cards:nth-child(6) {
		  margin: 120px 0px 0px -25px;
		  vertical-align: top;
		}
		.aog-bj > .board > section.player .table .top .deck .cards:nth-child(7) {
		  margin: 145px 0px 0px -65px;
		  vertical-align: top;
		}
		        
		.aog-bj > .board > section.player .table .bottom {
		  position: absolute;
		  margin-top: 10px;
		  height:25px;
		  font-size:120%;
		  font-style:italic;
		}
		        
		.aog-bj > .board > section .options{
		  float: right;
		  height:100%;
		  width:25%;
		}
		  
		.aog-bj > .board > section .options .btnActions {
		  font-size: 110%;
          width: 82px;
		}
		
        .aog-bj > .board > section .options .btnActions.doubleDown:after {
          content: 'DOUBLE';
        }
		
		.aog-bj > .board > section .options .box{
		  display: inline-block;
		  color: var(--tnwos-back-color1);
		  height:35%;
		  width:94%;
		  margin:10px 0 0 0;
		  border: 2px solid var(--tnwos-back-color1);
		  background: #fef779;
		  font-size:100%;
		}
		
		.aog-bj > .board > section .options .box div {
		  height:50%;
		}
		      
		.aog-bj > .board > section .options .box div > div {
		  display:inline-block;
		  width:45%;
		}
		
		.aog-bj > .board > section .options .box div > div:nth-child(1) {
		  text-align:left;
		}
		
		.aog-bj > .board > section .options .box div > div:nth-child(2) {
		  text-align:right;
		}
		
		.aog-bj > .board > section .options .panel{
		  height:60%;
		  width:90%;
		  display: inline-grid;
		  margin: 30px 8px 0 0;
		}
		  
		.aog-bj > .board > section .options .panel input {
		  height: 30px;
		  margin: 5px 10px 0 0;
		  cursor: pointer;
		  width: 84%;
		}
		
		.aog-bj > .board .summary {
		  display: inline-block;
		  background: #013b3a;
		  width: 370px;
		}
		
		.aog-bj > .board .summary div {
		  margin:4px;
		}
		
		.aog-bj > .board .summary .balance {
		  float: left;
		  background:var(--tnwos-back-color1);
		  color: #f98a8a;
		  border: 1px solid #ebe7a2;
		  width:126px;
		  height: 25px;
		  font-size: 16px;
		}
		      
		.aog-bj > .board .summary .menu {
		  float: left;
		}
		  
		.aog-bj > .board .summary .menu input {
		  width: 80px;
		  height: 25px;
		  margin: 0 2px 0 2px;
		  font-weight: bold;
		}
		
		.aog-bj > .board .summary .remaining {
		  font-size:16px;
		  float: right;
		  background: var(--tnwos-back-color1);
		  color: #eb96eb;
		  border: 1px solid #ebe7a2;
		  width:132px;
		  height: 25px;
		  letter-spacing: 0px;
		}
		  
		.aog-bj .deck .cards {
		  width: 45px;
		}
		
		.aog-bj .topMsg {
		  visibility: hidden;
		  color: #3399ff;
		  text-align: center;
		  font-size: 16px;
		}
		.aog-bj .topMsg .innerMsg {
		  display: inline-block;
		  width: 76px;
		  text-align: right;
		}
		
		.aog-bj .bottomMsg {
		  visibility: hidden;
		  color: #fbca9a;
		  text-align: left;
		  font-size: 16px;
		}
		.aog-bj .bottomMsg .innerMsg {
		  display: inline-block;
		  width: 76px;
		  margin-left: 8px;
		  text-align: right;
		}
		
		.aog-bj.popup{
		  width: 300px;
		  min-height: 50px;
		  border: 1px solid var(--tnwos-back-color1);
		  border-radius: 10px;
		  background: var(--tnwos-face-color1);
		  color: var(--tnwos-back-color1);
		  box-sizing: border-box; /* for inside padding */
		  padding: 10px;
		  letter-spacing: normal;
		  font-size: 18px;
		
		  /* for center */
		  position:absolute;
		  top: 220px;
		  left: 50%;
		  transform: translate(-50%,-50%);
		
		  /* visibility */
		  display: none;
		}
		
		.aog-bj.comment {
		  display: none;
		  background: var(--tnwos-face-color1);
		  color: var(--tnwos-back-color1);
		  width: 140px;
		  height: 45px;
		  border: 1px solid var(--tnwos-back-color1);
		  border-radius: 10px;
		  margin: 30px 0 0 -52px;
		  font-size: 20px;
		  align-items: center;
		  justify-content: center;
		}
		
		.aog-bj.countdown {
		  width: 50px;
		  min-height: 50px;
		  border: 1px solid var(--tnwos-back-color1);
		  border-radius: 25px;
		  background: yellow;
		  color: var(--tnwos-back-color1);
		  box-sizing: border-box; /* for inside padding */
		  padding: 10px;
		  letter-spacing: normal;
		  font-size: 18px;
		  /* for center */
		  position:absolute;
		  top:50%;
		  left:50%;
		  transform: translate(-50%,-50%);
		
		  /* visibility */
		  display: none;
		}
		
		.aog-bj.checkpoints {
		  width: 330px;
		  height: 260px;
		  letter-spacing: normal;
		  background: #f8f6f6;
		  padding: 10px;
		  border: 1px solid var(--tnwos-back-color1);
		  /* for center */
		  position:absolute;
		  top:50%;
		  left:50%;
		  transform: translate(-50%,-50%);
		
		  /* visibility */
		  display: none;
		}
		.aog-bj.checkpoints .bar {
		  display: block;
		}
		.aog-bj.checkpoints .bar .modal-title  {
		  font-size: 13px;
		  float:left;
		  margin-left: 2px;
		}
		.aog-bj.checkpoints .bar .close  {
		  font-size: 13px;
		  float:right;
		  cursor: pointer;
		  margin-right: 2px;
		}
		    
		.aog-bj.checkpoints .title {
		  display: inline-block;
		  width: 325px;
		  font-size: 18px;
		  background: #feb078;
		  color: var(--tnwos-back-color1);
		  border: 1px solid;
		}
		.aog-bj.checkpoints input[type="number"] {
		  width: 97%;
		  height: 20px;
		  margin: 10px 0;
		}
		.aog-bj.checkpoints .values input[type="button"] {
		  width: 100px;
		  height: 25px;
		  margin: 4px;
		  font-weight: bold;
		}
		.aog-bj.checkpoints .btnOk {
		  width: 110px;
		  height: 25px;
		  margin: 8px;
		}
		  
		.aog-bj .lesson-section {
		  letter-spacing:normal;
		  display:inline-grid
		} 
		.aog-bj .lesson-section .lesson-article {
		  margin:10px;
		  display:inline-block;
		}
		 /*
		.aog-bj .lesson-text {
		  max-width:600px;
		  margin: 10px 0 20px 0;
		  text-align: justify;
		  white-space: pre-wrap;
		  color: var(--tnwos-face-color1);
		}*/
  }
}







/*END: AOG Black Jack */