* {box-sizing: border-box;}

/* font-family: Arial, Helvetica, sans-serif; */
/* font-family: 'Source Sans Pro', Arial, sans-serif; */
/* font-family: 'Lato', Arial, sans-serif; */
/* font-family: 'Playfair Display', Georgia, serif; */

html, body {margin: 0 !important; padding: 0 !important; width: 100% !important;}
body {font: 1em/1.5 Arial, Helvetica, sans-serif !important; color: #000 !important; background: #f2f2f2 !important; position: relative !important; min-height: 100vh !important;}
/* body::after {content: '' !important; display: block !important; height: 325px !important;} */
table, input, textarea, select {font: 1em/1.5 Arial, Helvetica, sans-serif !important; color: #222;}
/* a {color: blue; text-decoration: underline; cursor: pointer;} */
/* a, input, textarea, select, button {outline: none;} */
.clear {clear: both;}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
/* Firefox */
input[type=number] {-moz-appearance: textfield;}
/* Edge */
::-webkit-input-placeholder {color: #ccc;}
/* Internet Explorer 10-11 */
:-ms-input-placeholder {color: #ccc;}
::placeholder {color: #ccc;}

/* input[type=text], input[type=number], input[type=password], select, textarea {border: 1px solid white; padding: 5px 10px; background: white; width: 100%; font-size: 0.875em;} */
/* input[type=text], input[type=number], input[type=password], select {height: 40px;} */
input[type=text]:disabled, input[type=number]:disabled, input[type=password]:disabled, textarea:disabled, select:disabled {background: #ddd;}
input[type=text]:focus, input[type=number]:focus, input[type=password]:focus, textarea:focus, select:focus {border: 1px solid #ffd966;}
input[type=text].error, input[type=number].error, input[type=password].error, select.error, textarea.error {border-color: #ff0000;}

/* input[type=submit], input[type=button], button {background: #ccc; color: #333; padding: 0 10px; border: none; border-radius: 6px; font-weight: 700;
                                                height: 40px; width: 100%; cursor: pointer; text-transform: uppercase; font-size: 0.875em;} */
input[type=submit].yellow, input[type=button].yellow, button.yellow {background: #ffd966;}
input[type=submit].gray, input[type=button].gray, button.gray {background: lightgray;}
input[type=submit].green, input[type=button].green, button.green {background: #b4ffb4;}
input[type=submit].green2, input[type=button].green2, button.green2 {background: #00b050; color: white;}
input[type=submit].green-g, input[type=button].green-g, button.green-g {background: #00b050; background: linear-gradient(#00b657, #00863a); color: white;}
input[type=submit].red, input[type=button].red, button.red {background: #ffbcbc;}
input[type=submit].red2, input[type=button].red2, button.red2 {background: red; color: white;}
input[type=submit].red-g, input[type=button].red-g, button.red-g {background: red; background: linear-gradient(#c70000, #830000); color: white;}
input[type=submit].orange, input[type=button].orange, button.orange {background: orange; color: white;}
input[type=submit].orange-g, input[type=button].orang-g, button.orange-g {background: orange; background: linear-gradient(#fdc800, #b48300); color: white;}

.error-message, .success-message {margin-bottom: 15px; text-transform: none; font-weight: 400; padding: 5px 10px; font-size: 0.875em;}
.error-message {color: #ff0000; background: #ffbcbc;}
.success-message {color: #008000; background: #b4ffb4;}
.modal {display: none; position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.4);}

.content-outer {margin: 0; padding: 0 0 20px 0; width: 100%; position: relative; min-width: 320px;}
  .header {}
  
  .sidebar {width: 100%; position: relative; top: 0; left: 0; color: #fff; background: #0070C0; height: 73px; z-index: 10;}
    .sidebar-header {float: left; font-weight: 700; font-family: 'Libertinus Serif', Arial, sans-serif; padding: 10px 20px;}
    .sidebar-header span {font-size: 3em; line-height: 1em;}
    .sidebar-header sup {font-size: 1em; vertical-align: top; position: relative; top: 0.8em;}
    .sidebar-menu {float: right; padding: 12px 20px; font-size: 2em;}
    .sidebar-content {padding: 20px; overflow-x: hidden; display: none; background: #0070C0;}
      .sidebar-content ul {margin: 0; padding: 0 0 0 20px; font-weight: 700;}
      .sidebar-content ul li {list-style: none; margin-bottom: 10px; vertical-align: middle;}
      .sidebar-content ul li a {color: inherit; text-decoration: none;}
      .sidebar-content ul li ul {margin: 5px 0 0 0; padding: 0 0 0 20px; font-weight: normal;}
      .sidebar-content ul li ul li {list-style: none; padding: 4px 0; margin-bottom: 0;}
      .sidebar-content ul li ul li a {color: inherit; text-decoration: none;}
      .rate-box {border: 1px solid white; text-align: center; font-size: 0.875em;}
        .rate-title {border-bottom: 1px solid white; padding: 10px 0;}
        .rate-list {}
          .rate-item {padding: 5px 0;}
          .rate-item:first-child {padding-top: 10px;}
          .rate-item:last-child {padding-bottom: 10px;}
      .sidebar-footer {font-size: 0.875em; text-align: center; margin-top: 20px;}
      
  .content {padding: 20px; font-size: 0.875em; font-size: 1.25em;}
    table.plain {color: white; line-height: 1;}
    table.plain-form {color: white; line-height: 1;}
    table.plain-form tr td {padding: 10px 15px;}
    table.plain-form tr td:first-child {padding-left: 0;}
    table.plain-form tr td:last-child {padding-right: 0;}
    
    table.list {margin: 0; padding: 0; border-bottom: 1px solid #48a5fe; font-size: 0.75em;}
    table.list tr th {padding: 4px 8px; background: #48a5fe; text-align: left; font-weight: bold; color: white;}
    table.list tr td {padding: 4px 8px;}
    table.list tr th:first-child, table.list tr td:first-child {padding-left: 12px;}
    table.list tr th:last-child, table.list tr td:last-child {padding-right: 12px;}
    table.list tr td a {text-decoration: none;}
    table.list tr:nth-child(even) td {background: white;}
    table.list tr:nth-child(odd) td {background: #b6dafc;}
    table.list tr.deleted td {background: #ff7a7a;}
    
    ul.report-plain {margin: 0; padding: 0; color: #222;}
      ul.report-plain li {list-style: none; padding: 5px 5px 10px 5px;}
      ul.report-plain li:nth-child(even) {background: #b6dafc;}
      ul.report-plain li:nth-child(odd) {background: white;}
      
.footer {padding: 20px; font-size: 0.875em; font-size: 1.25em;}
  .follow-cont {}
  .follow-channel {margin-bottom: 15px;}
    .follow-icon {float: left; margin-right: 10px; width: 32px;}
      .follow-icon img {width: 100%;}
    .follow-name {float: left; font-size: 0.75em; line-height: 32px;}

.content .game-rules-banner { display: flex; flex-direction: column; }
  .content .game-rules-banner img { min-width: 320px; max-width: 480px; margin: 5px 10px 10px 5px; }
  .content .game-rules div { margin: 0 0 15px 0; }

@media only screen and (min-width: 480px) {
  body::after {content: ''; display: block; height: 240px;}

  .container { width: 576px !important; }
  .content-outer { padding: 0 0 20px 260px; }
  
  /* input[type=text], input[type=number], input[type=password], select, textarea {width: 480px;} */
  /* input[type=submit], input[type=button], button {width: auto; min-width: 140px;} */
  
  .sidebar {height: 100vh; width: 260px; position: fixed; top: 0; left: 0; background: #0070C0;}
    .sidebar-header {float: none; padding: 20px; text-align: center;}
    .sidebar-header span {font-size: 5em; line-height: 70px;}
    .sidebar-header sup {font-size: 1.6em; vertical-align:top; top:0.8em; left:5px;}
    .sidebar-menu {display: none;}
    .sidebar-content {display: block; height: calc(100% - 120px);}
      
  .content {margin-left: 260px; padding: 40px 40px 20px 40px;}
  .content .game-rules-banner { flex-direction: row; }
  
  .footer {margin-left: 260px; padding: 20px 40px 20px 40px; height: 240px;}
    .follow-cont {max-width: 520px;}
      .follow-channel {float: left;}
  
  .img-sosmed { max-width: 65px !important;}
}

.banner-name {
  color: #0070C0;
}

.account-info {
  background-color: #DCEAF7;
}

.word-blue-1 { color: #0070C0 !important; }
.word-orange-1 { color: #FF6600 !important; }
.fs-875 { font-size: 0.875em !important; }
.bg-gray-1 { background-color: #D9D9D9 !important;}
.bg-darkgray-1 { background-color: #BFBFBF !important;}
.bg-darkgray-2 { background-color: #A6A6A6 !important;}
.bg-darkgray-3 { background-color: #F2F2F2 !important;}
.bg-success-message {background-color: #92D050 !important;}
.bg-light-blue-1 { background-color: #DCEAF7 !important; border-color: #BFBFBF !important; }
.w-30 { width: 30% !important; }

.product-image {
  position:absolute;
  width: 100px !important;
  height: 100px !important;
}

#product-image {
  max-width: 80px !important;
  max-height: 80px !important;
}

.protected-icon {
  position:absolute;
  width: 45px;
  height: 45px;
}

/* JQuery Dialog Box CSS */
.ui-dialog, .ui-dialog-buttonpane {
  background-color: #D9D9D9 !important;
}
.ui-dialog-buttonpane {
  margin-left: 1rem !important;
  margin-right: 1rem !important;
  padding-right: 0 !important;
  border-top: solid 1px rgb(33,37,41) !important;;
}
.ui-corner-all {
  border-radius: 0.5rem !important;
}
.ui-dialog-titlebar {
  margin: 0.75rem !important;
  padding: 0.75rem !important;
  color: white;
  background-color: rgb(108,117,125);
  text-align: center;
}
.ui-dialog-content {
  padding: 0 1.25rem 0.75rem 1.25rem !important;
}
.ui-dialog-buttonpane {
  margin-top: 0 !important;
}
.ui-dialog-buttonset button {
  cursor: pointer;
  border-radius: 0.5rem !important;
  background-color: #BFBFBF !important;
  color: rgb(33,37,41) !important;
  font-weight: 400 !important;
  padding: 0.5rem 1rem !important
}