/*=========================================================== modal.scss ===============================================================*/
// .modal-open      - body class for killing the scroll
// .modal           - container to scroll within
// .modal-dialog    - positioning shell for the actual modal
// .modal-content   - actual modal w/ bg and corners and stuff


.modal-open {
  // Kill the scroll on the body
  overflow: hidden;

  .modal {
    overflow-x: hidden;
    overflow-y: auto;
  }
}

// Container that the modal scrolls within
.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: $zindex-modal;
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  // Prevent Chrome on Windows from adding a focus outline. For details, see
  // https://github.com/twbs/bootstrap/pull/10951.
  outline: 0;
  // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
  // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
  // See also https://github.com/twbs/bootstrap/issues/17695
}

// Shell div to position the modal with bottom padding
.modal-dialog {
  position: relative;
  width: auto;
  margin: $modal-dialog-margin;
  // allow clicks to pass through for custom click handling to close modal
  pointer-events: none;

  // When fading in the modal, animate it to slide down
  .modal.fade & {
    @include transition($modal-transition);
    transform: $modal-fade-transform;
  }
  .modal.show & {
    transform: $modal-show-transform;
  }

  // When trying to close, animate focus to scale
  .modal.modal-static & {
    transform: $modal-scale-transform;
  }
}

.modal-dialog-scrollable {
  display: flex; // IE10/11
  max-height: subtract(100%, $modal-dialog-margin * 2);

  .modal-content {
    max-height: subtract(100vh, $modal-dialog-margin * 2); // IE10/11
    overflow: hidden;
  }

  .modal-header,
  .modal-footer {
    flex-shrink: 0;
  }

  .modal-body {
    overflow-y: auto;
  }
}

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: subtract(100%, $modal-dialog-margin * 2);

  // Ensure `modal-dialog-centered` extends the full height of the view (IE10/11)
  &::before {
    display: block; // IE10
    height: subtract(100vh, $modal-dialog-margin * 2);
    height: min-content; // Reset height to 0 except on IE
    content: "";
  }

  // Ensure `.modal-body` shows scrollbar (IE10/11)
  &.modal-dialog-scrollable {
    flex-direction: column;
    justify-content: center;
    height: 100%;

    .modal-content {
      max-height: none;
    }

    &::before {
      content: none;
    }
  }
}

// Actual modal
.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
  // counteract the pointer-events: none; in the .modal-dialog
  color: $modal-content-color;
  pointer-events: auto;
  background-color: $modal-content-bg;
  background-clip: padding-box;
  border: $modal-content-border-width solid $modal-content-border-color;
  @include border-radius($modal-content-border-radius);
  @include box-shadow($modal-content-box-shadow-xs);
  // Remove focus outline from opened modal
  outline: 0;
}

// Modal background
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: $zindex-modal-backdrop;
  width: 100vw;
  height: 100vh;
  background-color: $modal-backdrop-bg;

  // Fade for backdrop
  &.fade { opacity: 0; }
  &.show { opacity: $modal-backdrop-opacity; }
}

// Modal header
// Top section of the modal w/ title and dismiss
.modal-header {
  display: flex;
  align-items: flex-start; // so the close btn always stays on the upper right corner
  justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
  padding: $modal-header-padding;
  border-bottom: $modal-header-border-width solid $modal-header-border-color;
  @include border-top-radius($modal-content-inner-border-radius);

  .close {
    padding: $modal-header-padding;
    // auto on the left force icon to the right even when there is no .modal-title
    margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
  }
}

// Title text within header
.modal-title {
  margin-bottom: 0;
  line-height: $modal-title-line-height;
}

// Modal body
// Where all modal content resides (sibling of .modal-header and .modal-footer)
.modal-body {
  position: relative;
  // Enable `flex-grow: 1` so that the body take up as much space as possible
  // when there should be a fixed height on `.modal-dialog`.
  flex: 1 1 auto;
  padding: $modal-inner-padding;
}

// Footer (for actions)
.modal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center; // vertically center
  justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
  padding: $modal-inner-padding - $modal-footer-margin-between * .5;
  border-top: $modal-footer-border-width solid $modal-footer-border-color;
  @include border-bottom-radius($modal-content-inner-border-radius);

  // Place margin between footer elements
  // This solution is far from ideal because of the universal selector usage,
  // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
  > * {
    margin: $modal-footer-margin-between * .5;
  }
}

// Measure scrollbar width for padding body during modal show/hide
.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

// Scale up the modal
@include media-breakpoint-up(sm) {
  // Automatically set modal's width for larger viewports
  .modal-dialog {
    max-width: $modal-md;
    margin: $modal-dialog-margin-y-sm-up auto;
  }

  .modal-dialog-scrollable {
    max-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);

    .modal-content {
      max-height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
    }
  }

  .modal-dialog-centered {
    min-height: subtract(100%, $modal-dialog-margin-y-sm-up * 2);

    &::before {
      height: subtract(100vh, $modal-dialog-margin-y-sm-up * 2);
      height: min-content;
    }
  }

  .modal-content {
    @include box-shadow($modal-content-box-shadow-sm-up);
  }

  .modal-sm { max-width: $modal-sm; }
}

@include media-breakpoint-up(lg) {
  .modal-lg,
  .modal-xl {
    max-width: $modal-lg;
  }
}

@include media-breakpoint-up(xl) {
  .modal-xl { max-width: $modal-xl; }
}
/*=========================================================== cs.css ===============================================================*/
:root{
	--white: #ffffff; --white-03: rgba(255, 255, 255, 0.03);
	--white-05: rgba(255, 255, 255, 0.05);
	--white-10: rgba(255, 255, 255, 0.1);
	--white-15: rgba(255, 255, 255, 0.15);
	--white-25: rgba(255, 255, 255, 0.25);
	--white-50: rgba(255, 255, 255, 0.50);
	--bg-color: #111111;
	--bg-color-dark: #040d18;
	--bg-color-darker: #02080e;
	--bg-color-light: rgba(0, 0, 0, 0.5);
	--bg-color-gray: #465566;
	--bg-blue: #24334c;
	--bg-blue-light: #364a6b;
	--bg-gray: #222d3e;

	--orange: #ff8839;
	--orange-hover: #fb683d;
	--orange-dark: #fd761d;
	--blue: #2b81de;
	--blue-hover: #0058a5;
	--blue-text: #82beff;
	--red: #ff6541;
	--red-dark: #bd3d15;
	--green: #16e21f;
	--yellow: #e2ca16;
	--blue-light: #67809b;
	--blue-hover-light: #385d7d;
	--blue-white: #a0c3e9;
	--boxedlight: BoxedLight;
	--boxedsemibold: BoxedSemibold;
	--boxedbold: BoxedBold;
	--myriadbold: MyriadproBold;

	--gold: #ffb847;
	--gold-light: #ffdba1;
	--gold-dark: #eaca5e;
 }
.light-theme{
	--white: #000;
	--white-05: rgba(0, 0, 0, 0.05);
	--white-10: rgba(0, 0, 0, 0.1);
	--white-15: rgba(0, 0, 0, 0.15);
	--white-25: rgba(0, 0, 0, 0.5);
	--white-50: rgba(0, 0, 0, 0.75);
	--bg-color: #fff;
	--bg-color-dark: #fff;
	--bg-color-darker: #eef0f1;
	--bg-color-light: #fff;
	--bg-blue: rgba(0, 0, 0, 0.1);
	--bg-blue-light: #fff;
	--bg-color-light: #fff;
	--bg-gray: #fff;

 }

.color-gold{ color: var( --gold ) !important; }
.color-gold-l{ color: var( --gold-light ) !important; }
.color-gold-d{ color: var( --gold-dark ) !important; }

.text-gold{ color: var( --gold ) !important; }
.text-gold-l{ color: var( --gold-light ) !important; }
.text-gold-d{ color: var( --gold-dark ) !important; }

.btn-gold{ border: none; position: relative; z-index: 1; overflow: hidden; border-radius: 5px; color: #fff; background-color: var( --gold-dark ) !important; }
.btn-gold:hover{ background-color: var( --gold ) !important; }

.btn-gold-light{ border: none; position: relative; z-index: 1; overflow: hidden; border-radius: 5px; color: #fff; background-color: var( --gold ) !important; }
.btn-gold-light:hover{ background-color: var( --gold-dark ) !important; }

.btn-blue-light{border: none;position: relative;z-index: 1;overflow: hidden;border-radius: 5px;color: #fff;background-color: var( --blue-light ) !important;margin-left: 5px;}
.btn-blue-light:hover{ background-color: var( --blue-hover-light ) !important; }
/*=========================================================== style.css ~ modal part ===============================================================*/
.modal-dialog{ flex-wrap: wrap; align-content: center; margin:0 auto; }
.modal-logo{ width:100%; margin:0 0 20px; text-align:center; font-size:72px; font-weight:900; line-height:1; }
.modal-logo img{ max-width:100%; }
.modal-notice{ width:100%; margin:0 0 10px; padding:15px; border:1px solid rgba(0, 0, 0, 0.2); border-radius:10px; background-color:var( --bg-color-light ); background-clip:padding-box; box-shadow: 0 0 0 2px rgb(255, 255, 255, 0.1); font-weight:bold; text-align:left; word-wrap:break-word; }

.modal-backdrop{ background-color: #0b0210; }
.modal-backdrop.show{ opacity: .5; }
.modal{ padding-right: 0 !important; overflow-y: auto; }
.modal::-webkit-scrollbar{ width: 0; background-color: transparent; }
.modal::-webkit-scrollbar-thumb{ background-color: transparent; }
.modal-content{ background-color: var( --bg-color-light ); border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.10); }

/* Modal Close Button */
.modal-close-btn{ width:36px; height:36px; background-color:transparent; border: solid 1px var( --white-50 ); border-radius:50%; transition:0.3s; outline:none; position: absolute; top: 10px; right: 10px; z-index: 3; }
.modal-close-btn:before,
.modal-close-btn:after{ content:''; width:2px; height:calc(100% - 10px); background-color: var( --white-50 ); position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; transform:rotate(45deg); transition:0.3s; }
.modal-close-btn:after{ transform:rotate(-45deg); }
.modal-close-btn:hover:before{ transform:rotate(135deg); background-color:var( --orange ); }
.modal-close-btn:hover:after{ transform:rotate(-135deg); background-color:var( --orange ); }

/* Modal Banner */
.modal-banner{ width: 100%; height: 160px; background-image: url(/assets/img/banner/login-banner.jpg); background-repeat: no-repeat; background-position: top left; padding: 0 30px 40px; }
.modal-banner .btn-orange{ width: 110px; height: 35px; margin: 5px 0 0; }

/* Modal Header */
.modal-header{ border: none; padding: 0; margin: -45px 0 0; }
.modal-header .title{ width: 100%; color: var( --white ); font-size: 20px; display: inline-block; text-align: center; }
.modal-header .sub-title{ font-family: var( --boxedlight ); }

/* Modal Body */
.modal-body{ padding: 0 15px 20px; z-index: 1; }
.modal-body:before{ width: 700px; height: 700px; border-radius: 50%; background-color: var( --bg-color-light ); top: -80px; left: 50%; transform: translateX(-50%); z-index: -1; }
.modal-body .form-container{ max-width: 300px; margin: 30px auto 0; }
.modal-body .form-container .form-group{ margin: 0 0 15px; }
.modal-body .form-group .infos{ flex-wrap: wrap; }
.modal-body .form-group .infos .captcha{ display:flex; width:100%; height:60px; margin-bottom:5px; background-color:transparent; border-radius:5px; border:none; }
.modal-body .form-group .infos .captcha img{ width:200px; height:100%; border-radius:5px; background-color:var( --white-05 ); border-radius:5px; border:solid 1px var( --white-05 ); }
.modal-body .form-group .infos .captcha button{ width:50px; height:calc(100% - 10px); margin:5px; }
.modal-body .form-footer{ margin: 15px 0 0; flex-wrap: wrap; }

/* Login Modal */
.loginModal .modal-dialog{ max-width:360px;}
.loginModal .modal-header{ margin:0 0 10px; padding:30px 0 0; }
.loginModal .modal-close-btn{ display:none; }
.loginModal .modal-body:before{ display:none; }
/* .loginModal .modal-body .form-footer{ margin: 15px 0 0; flex-wrap: wrap; }
.loginModal .modal-body .form-footer button{ width: 100%; }
.loginModal .modal-body .form-footer .btn-transparent{ color: var( --orange ); margin: 30px 0 0; }
.loginModal .modal-body .form-footer .btn-transparent:hover{ color: var( --yellow ); } */

/* Join Code Modal */
.joinCodeModal .modal-dialog{ max-width:360px;}
.joinCodeModal .modal-header{ margin:0 0 10px; padding:30px 0 0; }
.joinCodeModal .modal-close-btn{ display:none; }
.joinCodeModal .modal-body:before{ display:none; }
/* .joinCodeModal .modal-body .form-footer{ margin: 15px 0 0; flex-wrap: wrap; }
.joinCodeModal .modal-body .form-footer button{ width: 100%; }
.joinCodeModal .modal-body .form-footer .btn-transparent{ color: var( --orange ); margin: 30px 0 0; }
.joinCodeModal .modal-body .form-footer .btn-transparent:hover{ color: var( --yellow ); } */

/* Join Modal */
.joinModal .modal-dialog{ max-width: 760px; }
.joinModal .modal-body:before{ display:none; }
.joinModal .modal-body .form-container{ max-width: 100%; }
.joinModal .modal-banner{ background-image: url(/assets/img/banner/join-banner.jpg); background-position: center center; padding-bottom: 70px; }
.joinModal .modal-banner .welcome-text{ color: var( --yellow ); font-family: var( --boxedbold ); margin: 0 0 5px; }
.joinModal .modal-header{ margin:0 0 10px; padding:30px 0 0; }
.joinModal .modal-close-btn{ display:none; }


/* ------------ */
.dflex-ac-jc{ display: flex !important; align-items: center; justify-content: center; flex-wrap: wrap; }
.dflex-ac-js{ display: flex !important; align-items: center; justify-content: flex-start; flex-wrap: wrap; }
.dflex-ac-je{ display: flex !important; align-items: center; justify-content: flex-end; flex-wrap: wrap; }

/* Form Container */
.form-container{ width: 100%; display: inline-block; margin: 40px 0 0; }
.form-container .form-group{ width: 100%; float: left; margin: 0 0 25px; }
.form-container .form-group:last-child{ margin: 0 0; }
.form-container .labels{ width: 100%; text-align: left; float: left; margin: 0 0 10px; padding: 0 0 0 41px; font-size: 14px; color: var( --white ); font-size: 12px; position: relative; }
.form-container .labels:before{ width: 30px; height: 1px; background-color: var( --white-15 ); left: 0; top: 0; bottom: 0; margin: auto 0; }
.form-container .infos{ width: 100%; float: right; display: flex; align-items: center; }
.form-container .form-group .input-container{ width: 100%; height: 40px; float: left; position: relative; display: flex; align-items: center; justify-content: flex-start; background-color: var( --white-05 ); border-radius: 5px; border: solid 1px var( --white-05 ); overflow: hidden; }
.form-container .w-btn .input-container{ width: calc(100% - 125px); }
.form-container .form-group .input-container .icon-panel{ min-width: 40px; height: 100%; display: flex; align-items: center; justify-content: center; color: var( --blue-white ); margin: 0 -15px 0 0; }
.form-container .form-group input{ width: 100%; height: 100%; float: left; color: var( --white); background-color:transparent !important; border-radius: 5px; border: none; transition: 0.3s; padding: 0 15px; }
.form-container .form-group input:read-only{ color: var( --blue-text ); }
.form-container .form-group input::-webkit-input-placeholder{ color: var( --white-25 ); }
.light-theme .form-container .form-group input:read-only{ color: #000; }
.light-theme .form-container .form-group input::-webkit-input-placeholder{ color: #0a0b0d; }
.form-container .form-group .select-input{ width: 100%; height: 40px; float: left; border-radius: 5px; transition: 0.3s; display: flex; align-items: center; }
.form-container .form-group .select-input select{ width: 100%; height: 100%; border: none; color: var( --white-50 ); background-color: transparent; -webkit-appearance: none; padding: 0 15px; cursor: pointer; }
.form-container .form-group .select-input select option{ background-color: var( --light); color: var( --dark ); }
.form-container .form-group .select-input i{ font-size: 18px; position: absolute; right: 15px; }
.form-container .form-group textarea{ width: 100%; height: 200px; float: left; color: var( --white); background-color: rgba(255, 255, 255, 0.03); border-radius: 8px; border: solid 1px var( --white-05 ); transition: 0.3s; padding: 20px 18px; resize: none; }
.form-container .form-group textarea::-webkit-input-placeholder{ color: var( --white-25 ); }
.form-container .form-group .form-btn{ width: 120px; height: 38px; border: none; float: right; padding: 0; margin: 0; white-space: nowrap; background-color: #05a1bf; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.5); color: #fff; position: relative; z-index: 1; overflow: hidden; border-radius: 5px; transition: 0.3s; margin: 0 0 0 5px; }
.form-container .form-group .form-btn:hover{ background-color: #05bf7f; }

.form-container .form-group input:-webkit-autofill,
.form-container .form-group input:-webkit-autofill:hover,
.form-container .form-group input:-webkit-autofill:focus,
.form-container .form-group input:-webkit-autofill:active{
	-webkit-text-fill-color: var( --yellow);
	-webkit-box-shadow: 0 0 0px 1000px #222c3d inset;
	box-shadow: 0 0 0px 1000px #222c3d inset;
	transition:background-color 5000s ease-in-out 0s;
}
.form-container .form-group input:autofill,
.form-container .form-group input:autofill:hover,
.form-container .form-group input:autofill:focus,
.form-container .form-group input:autofill:active{
	-webkit-text-fill-color: var( --yellow);
	-webkit-box-shadow: 0 0 0px 1000px #222c3d inset;
	box-shadow: 0 0 0px 1000px #222c3d inset;
	transition:background-color 5000s ease-in-out 0s;
}



/* Form Btn Group */
.form-container .form-group .infos .btn-grp{ width: 100%; float: left; }
.form-container .form-group .infos .btn-grp button{ width: 16.66%; width: calc(16.66% - 4px); height: 35px; float: left; margin: 0 2px; background-color: #778496; border: none; border-radius: 5px; color: #fff; font-size: 12px; transition: 0.3s; padding: 0; position: relative; z-index: 1; overflow: hidden; }
.form-container .form-group .infos .btn-grp button:hover{ background-color: #7bb2ff; }
.form-container .form-group .infos .btn-grp button:first-child{ margin-left: 0; width: calc(16.66% - 2px); }
.form-container .form-group .infos .btn-grp button:last-child{ width: calc(16.66% - 2px); margin-right: 0; }

/* Form Footer */
.form-footer{ width: 100%; margin: 50px 0 0; display: flex; align-items: center; justify-content: center; float: left; }
.form-footer button{ width: 160px; height: 40px; border-radius: 5px; background-color: #c1267d; border: none; color: #000; margin: 0 4px; }
.form-footer .btn-transparent{ width: auto; height: auto; background-color: transparent; color: var( --blue-text ); white-space: nowrap; }
.form-footer button:hover{ background-color: #b67aff; }
.form-footer .btn-transparent:hover{ background-color: transparent; color: var( --orange ); }
/*=========================================================== modal.css ===============================================================*/

.modalFrame{ padding:0; }
.modalFrame iframe{ z-index:1; position:relative; height:100vh; max-height:750px; }
.modalFrame .modal-dialog{ max-width:1200px; min-height:100%; }
.modalFrame .modal-dialog .modal-close-btn{ width:25px; height:25px; }
.modalFrame .modal-dialog .modal-content .modal-spinner{ z-index:0; position:absolute; top:0; bottom:0; left:0; right:0; display:flex; justify-content:center; align-items:center; }
.modalFrame .modal-dialog .modal-content .modal-spinner i{ opacity:.2; font-size:15vh; animation:modal_spinner 3s ease-in-out infinite; }
@keyframes modal_spinner{ from { transform:rotate(0deg); } to { transform:rotate(360deg); } }

.modal-backdrop.show{ opacity:0.6; background-color:#000000; }


.subModal{ display:flex; flex-direction:column; height:100vh; background-color:var( --bg-color-light ); }
.subModal .modal-content{ background:transparent; border:none; box-shadow:none; }

.subModal .modal-dialog{ max-width:1200px; padding:0 10px; }
.subModal .modal-dialog .modal-close-btn{ width:25px; height:25px; }


.subModal .modal-head .modal-menu{ width:100%; height:60px; margin:0 0 20px; padding:0 60px 0 0; background-color:transparent; border-bottom:solid 1px var( --white-10 ); }
.subModal .modal-head .modal-menu li{ height: 100%; }
.subModal .modal-head .modal-menu li a{ height: 100%; color: var( --white ); font-family: var( --boxedlight ); padding: 0 10px; position: relative; font-size:14px; white-space:nowrap; }
.subModal .modal-head .modal-menu li a:after{ width: 0; height: 2px; background-color: #ecb603; bottom: -1px; left: 0; right: 0; opacity: 0; }
.subModal .modal-head .modal-menu li a:hover:after{ width: 100%; opacity: 1; }
.subModal .modal-head .modal-menu li a.active:after{ width: 100%; opacity: 1; }
.subModal .modal-head .modal-menu li a.active{ color: #eaca5e; font-weight: bold; }


.subModal .modal-head .subpg-nav{ margin:0 0 20px; padding:0; }
.subModal .modal-head .subpg-nav > a{ width:auto; margin:5px 5px; padding:0 30px; }
.subModal .modal-head .subpg-nav > a+a{ margin-left:0; }

.subModal .modal-body{ height:600px; overflow-y:auto; color:var( --white); }
.subModal .modal-body:before{ display:none; }
.subModal .modal-body .section-header{ padding:0; border:none; }
.subModal .modal-body .section-header:after{ display:none; }
.subModal .modal-body .section-header .title{ display:inline-block; position:relative; padding:0 15px 10px; }
.subModal .modal-body .section-header .title{ display:none; }
.subModal .modal-body .section-header .title:after{ content:""; position:absolute; bottom:-2px; left:0; width:100%; height:3px; background-color:var( --orange ); }
.subModal .modal-body .section-header .list-tab{ display:flex; flex-wrap:wrap; justify-content:flex-start; width:100%; }
.subModal .modal-body .section-header .list-tab a{ display:block; margin:2px; padding:5px 15px; color:var( --white); font-size:13px; background-color:var( --white-10 ); border-radius:5px; white-space:nowrap; }
.subModal .modal-body .section-header .list-tab a i{ margin-left:5px; padding:2px 5px; font-style:normal; font-size:11px; background-color:var( --orange); border-radius:20px; }
.subModal .modal-body .section-header .list-tab a:hover,
.subModal .modal-body .section-header .list-tab a:active,
.subModal .modal-body .section-header .list-tab a.active{ color:#ffffff; background-color:var( --blue); }
.subModal .modal-body .section-header .list-tab a:hover i,
.subModal .modal-body .section-header .list-tab a:active i,
.subModal .modal-body .section-header .list-tab a.active i{ color:var( --blue); background-color:#ffffff; }
.subModal .modal-body .title{ font-size:16px; }
.subModal .modal-body .form-container{ max-width:unset; }
.subModal .modal-body .form-container.scrollbar-x{ overflow-x:auto; }
.subModal .modal-body .form-container.scrollbar-x::-webkit-scrollbar{ height:8px; }
.subModal .modal-body .form-container.scrollbar-x .bs-table{ white-space:nowrap; }
.subModal .modal-body .description{ word-break:keep-all; }

.subModal .modal-body .form-container .bs-table tr:last-child td:first-child:last-child{ border-radius:0 0 10px 10px; }
.subModal .modal-body .form-container .bs-table thead th{ padding:0 5px; white-space:nowrap; }
.subModal .modal-body .form-container .bs-table thead tr:first-child th[colspan]{ border:none; }
.subModal .modal-body .form-container .bs-table.with-depth thead th{ border-radius:0; }
.subModal .modal-body .form-container .bs-table.with-depth thead th:first-child{ border-radius:10px 0 0 10px; }
.subModal .modal-body .form-container .bs-table.with-depth thead th:last-child{ border-radius:0 10px 10px 0; }
.subModal .modal-body .form-container .bs-table tr td{ max-width:40%; word-break:keep-all; }

.subModal .modal-body .btn-grp{ display:flex; }

.subModal .form-container .form-group .infos .btn-grp{ display:flex; float:none; width:100%; }
.subModal .form-container .form-group .infos .btn-grp div{ width:100%; padding:0 2px 4px; }
.subModal .form-container .form-group .infos .btn-grp div button{ width:100%; float:none; margin:0; padding:0 10px; white-space:nowrap; }


/* betting-list */
.subModal .modal-body .form-container .bs-table.betting-list thead th{ border-bottom:solid 4px var( --bg-color-light); }
.subModal .modal-body .form-container .bs-table.betting-list thead tr:first-child th[colspan]{ border-bottom:solid 4px var( --bg-color-light); }
.subModal .modal-body .form-container .bs-table.betting-list tbody tr:last-child td{ border-bottom:solid 4px var( --bg-color-light); }
.subModal .modal-body .form-container .bs-table.betting-list .betting-list-total{ display:flex; justify-content:center; align-items:center; }
.subModal .modal-body .form-container .bs-table.betting-list .betting-list-total > div{ padding:0 5px; }
/* betting-list */

/* exchange-list */
.subModal .modal-body .form-container .bs-table.exchange-list thead tr th{ height:22px; }
.subModal .modal-body .form-container .bs-table.exchange-list thead tr:last-child th{ border-radius:0; }
/* exchange-list */

/* exchange */
.exchange-cash-head{ width:100%; }
.exchange-cash-head > div{ display:flex; justify-content:space-between; align-items:center; width:100%; height:80px; margin:0 0 20px; }
.exchange-cash-head > div > div{ display:flex; align-items:center; justify-content:space-evenly; height:100%; text-shadow:0 1px 1px rgba(0, 0, 0, 0.7); }
.exchange-cash-head > div > div .icon i{ font-size:40px; transition:all 0.5s ease-in-out; transform:rotate(0deg); color:var( --white); }
.exchange-cash-head > div > div.right .icon i{ transform:rotate(720deg); color:var( --orange); }
.exchange-cash-head > div > div h3{ margin:0; padding:0 10px; font-size:14px; font-weight:bold; transition:all 0.3s ease-in-out, font-size 0.1s; color:var( --white); }
.exchange-cash-head > div > div h3 span{ display:block; padding:2px 0; }
.exchange-cash-head > div > div h3 span.cash{ color:var( --orange); }
.exchange-cash-head > div .right .icon{ order:1; }
.exchange-cash-head > div .right h3{ text-align:right; }
.exchange-cash-head > div .center button{ position:relative; width:60px; height:60px; overflow:hidden; border:none; border-radius:100%; background:transparent; background-image:linear-gradient(0deg, #8c280b, #ff7e58); box-shadow:3px 5px 10px rgba(0, 0, 0, 0.3); }
.exchange-cash-head > div .center button i{ transition:all 0.3s ease-in-out; transform:rotate(0deg); animation:arrowLoop 1s ease-in-out infinite; }
.exchange-cash-head > div .center button i{ font-size:30px; color:var( --white); text-shadow:0 1px 1px rgba(0, 0, 0, 0.7); }
.exchange-cash-head .cash-info > div{ width:100%; max-width:45%; box-shadow:inset 0 0 30px rgba(0, 0, 0, 0.3); border-radius:40px; }
.exchange-cash-head .cash-direction{ justify-content:space-evenly; box-shadow:inset 0 0 30px rgba(0, 0, 0, 0.3); border-radius:40px; cursor:pointer; }
.exchange-cash-head .cash-direction div{ width:calc(100% / 3); }
.exchange-cash-head .cash-direction .left h3{ color:var( --white); font-size:12px; }
.exchange-cash-head .cash-direction .right h3{ color:var( --orange); font-size:16px; }

.exchange-cash-head.reverse .cash-info .left .icon i{ transform:rotate(720deg); color:var( --orange); }
.exchange-cash-head.reverse .cash-info .right .icon i{ transform:rotate(0deg); color:var( --white); }
.exchange-cash-head.reverse .cash-direction .left h3{ color:var( --orange); font-size:16px; }
.exchange-cash-head.reverse .cash-direction .right h3{ color:var( --white); font-size:12px; }
.exchange-cash-head.reverse .cash-direction .center button{ background-image:linear-gradient(0deg, #00357e, #0167a8); }
.exchange-cash-head.reverse .cash-direction .center button i{ transform:rotate(-180deg); }

@keyframes arrowLoop{
	0%{ margin-left:-10px; }
	50%{ margin-left:10px; }
	100%{ margin-left:-10px; }
}

@media (max-width: 800px){
	.exchange-cash-head > div > div .icon i{ font-size:24px; }
	.exchange-cash-head > div > div h3{ font-size:12px; }
	.exchange-cash-head > div .center button{ width:50px; height:50px; }
	.exchange-cash-head > div .center button i{ font-size:24px; }

	.subModal .modal-dialog{ margin:0 auto; padding:0; }
	.subModal .modal-dialog .modal-close-btn{ top:5px; right:5px; width:20px; height:20px; }
	.subModal .modal-dialog-centered{ align-items:stretch; }

	.subModal .modal-head .modal-menu{ display:flex; flex-wrap:wrap; height:auto; margin:20px 15px 20px; padding:0; }
	.subModal .modal-head .modal-menu li{ width:25%; height:50px; padding:0 5px; }
	.subModal .modal-head .modal-menu li a{ font-size:12px; }
	.subModal .modal-head .modal-menu li a:not(.active):after{ opacity:0.2; width:100%; }
	.subModal .modal-head .modal-menu li a:hover:after{ opacity:1; width:100%; }

	.subModal .modal-head .subpg-nav{ margin:0 0 5px; }
	.subModal .modal-head .subpg-nav a{ padding:0 20px; }
	.subModal .modal-head .subpg-nav a.active{ background-color:var( --orange ); color:var( --white); }

	.subModal .modal-body .section-header .title{ padding:0 5px 5px; }
	.subModal .modal-body .section-header .list-tab a{ min-width:calc((100% / 4) - 4px); padding:5px 5px; font-size:12px; }
	.subModal .modal-body .section-header .list-tab a i{ margin-left:3px; }
	.subModal .modal-body .form-container{ margin-top:10px; }
	.subModal .modal-body .description{ font-size:12px; }

}
@media (max-width: 600px){
	.subModal .modal-body .section-header .list-tab a{ min-width:calc((100% / 3) - 4px); margin:1px; font-size:11px; }
	.subModal .modal-body .section-header .list-tab a i{ padding:1px 3px; }
	
	.subModal .form-container .form-group .infos .btn-grp{ flex-wrap:wrap; }
	.subModal .form-container .form-group .infos .btn-grp div{ width:calc(100% / 5); }
}
@media (max-width: 500px){
	.exchange-cash-head > div{ height:60px; }
	.exchange-cash-head .cash-info > div{ max-width:calc(50% - 5px); }

	.subModal .modal-body .section-header .list-tab a{ letter-spacing:-1px; }
}

/*=========================================================== common.css ===============================================================*/
.subModal{ background-color:var( --bg-color ); }
.subModal .modal-head .modal-menu{ border-bottom-color:rgba(255, 130, 60, 0.1); }
.subModal .modal-head .subpg-nav{ background-color:#333333; }
.modal-notice{ background-color:rgba(0, 0, 0, 0.9); box-shadow:0 0 200px rgba(255, 255, 255, 0.2) inset, 0 0 0 3px rgba(190 ,121 ,197, 0.6); }
.modal-content{ background-color:rgba(0, 0, 0, 0.9); box-shadow:0 0 200px rgba(255, 255, 255, 0.2) inset, 0 0 0 3px rgb(253, 209, 1); }

.form-container .form-group input:-webkit-autofill, .form-container .form-group input:-webkit-autofill:hover, .form-container .form-group input:-webkit-autofill:focus, .form-container .form-group input:-webkit-autofill:active{ box-shadow:unset; }
.form-container .form-group .input-container .icon-panel{ color:var( --gold-light ); }

/*=========================================================== modal only html  ===============================================================*/
/*
.wrapper { background: #222222; background-image: none !important; }
.modal-content { box-shadow: none; border: none; background-color: unset; }
*/