@-ms-viewport { width: device-width; }

@charset "UTF-8";

/* -------------------
    RESET SHEET
-------------------- */
html, body, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u,  center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; outline: none; font-weight: 300; 
    font-family: 'Roboto', sans-serif; line-height: 1.375; letter-spacing: 0.25;
 }

/*--------------------
    BASIC SHEET
---------------------*/

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style: none;
  list-style-type: none;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

input, select, select option, textarea, button, div, a, img, .btn { outline: none; border: none;   
  -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; 
  font-family: 'Roboto', sans-serif; 
}

img { vertical-align: middle; }

button, a, input[type=button], .button, .btn, .noselect, select, li, label, h1, h2, h3, h4, h5, h6, img {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
  outline-style:none;

  -ms-touch-select: none;
  -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
  -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
  -webkit-tap-highlight-color: rgba(0,0,0,0); /* prevent tap highlight color / shadow */
  -webkit-tap-highlight-color: transparent;
  letter-spacing: 0.25;
}

button:focus, button:active:focus, button.active:focus,
a:focus, a:active:focus, a.active:focus, { -webkit-box-shadow: none !important; outline: -webkit-focus-ring-color auto 0px !important; box-shadow: none !important; outline: none !important; } 

button:not(.btn-sm):not(.btn-admin), .btn:not(.btn-sm):not(.btn-admin) { font-family: "Rubik",sans-serif !important; }

html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0,0,0,0); height: -webkit-fill-available; } 
html { background: #000; } body { background: #fff;  }
body { 
  webkit-text-size-adjust: none; 
  text-rendering: optimizeLegibility; 
  -webkit-font-smoothing: antialiased; 
  overflow-x: hidden;
  font-size: 1rem;
  font-weight: 300;
   color: #eee;
  padding-top: 65px;
  width: 100%;
}


a,
button {
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
}


img,
video {
  display: block;
  max-width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}

img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

select option[hidden][disabled][selected][value=""] { color: red !important; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

::-webkit-input-placeholder { color: #555 !important; font-weight: 300; }
:-moz-placeholder { color: #555 !important; font-weight: 300; }
::-moz-placeholder { color: #555 !important; font-weight: 300; }
:-ms-input-placeholder { color: #555 !important; font-weight: 300; } 


/* Headers */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3 { color: #fff; font-weight: 500; line-height: 1.25; text-transform: uppercase; }
.h0 { font-size: 42px; line-height: 1.15; }
h1, .h1 { font-size: 1.5rem; font-size: 1.25rem; font-size: 28px; margin-bottom: 0.75rem; margin-left: -1px;  font-weight: 300; line-height: 1.175; letter-spacing: 2;}
h2, .h2 { font-size: 1.25rem; font-size: 18px; margin-bottom: 3px; font-weight: 300; line-height: 1.275; letter-spacing: 2; }
h3, .h3 { font-size: 1.25rem; text-transform: capitalize; letter-spacing: 0.5; margin-bottom: 1.25rem; font-weight: 600; }
h4 { font-size: 0.875rem; margin-bottom: 7px; font-weight: 300; line-height: 1.375; letter-spacing: 1.5; }
b { font-weight: 500 !important; }
strong { font-weight: 500 !important; }
hr { margin: .5rem 0 1.5rem !important; border: none; border-bottom: 1px solid #212529; }
*:focus {outline:none !important}
a { text-decoration: none; color: #e59200; transition: color 0.2s ease; }
/*a:hover { color: #fff !important; }*/
p, ul { margin-bottom: 1.25rem;  }
p { word-break: break-word; }
ul { padding-top: 0.25rem; }
ul.stat li { display: flex; justify-content: space-between; align-items: center; padding-bottom: 0.25rem; }


/* Inputs and Textareas */
input, textarea, select {
    border: 1px solid #22272e;
    background: rgb(0 0 0 / 0%);
    width: 100%;
    margin-bottom: 1.5rem;
    color: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 0.375rem;
    background: rgb(0 0 0 / 0%);
    border-radius: 10px !important;
    font-size: 0.975rem;
    font-weight: 400;
    border: 1px solid #5d5d5d;
}

input { padding: 0 0.75rem !important; }
select { padding: 0 0.5rem !important; }
textarea { padding: 0.75rem !important; }

input, select { height: 38px; line-height: 38px; }

input:read-only, textarea:read-only { color: #c1c1c1; font-weight: 400; background: #f9f9fa !important; }

select option {
    background: #fff !important;
    color: #0d0d0d !important; 
}

input:focus, textarea:focus, select:focus {
    border-color: #93abc3;
}


input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #eee inset; 
    box-shadow: 0 0 0 30px #eee inset; 
    -webkit-text-fill-color: #0d0d0d;
}

input:-webkit-autofill::first-line {
    font-family: inherit;
    font-size: inherit; 
}

textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #eee inset; 
    box-shadow: 0 0 0 30px #eee inset; 
    -webkit-text-fill-color: #0d0d0d;
}

textarea:-webkit-autofill::first-line {
    font-family: inherit; 
    font-size: inherit;  
}



.card { background-color: #111; border: 1px solid #333;  color: #fff; padding: 20px; border-radius: 8px; }

.pretable { border: 1px solid #e1e1e1 !important; border-radius: 0.375rem !important;  overflow: hidden !important; padding-bottom: 0; }
table { width: 100%; font-size: 0.8125rem; font-size: 0.875rem; border-collapse: collapse; color: #fff; background: #2c3034; border-radius: 7px; }
table th, table td { padding: 5px 9px;  border: 1px solid #212529; text-align: left; vertical-align: middle; }
table thead tr th {  font-weight: 500 !important; padding: 7px 9px; }
table .odd { background: #212529; }


@keyframes loader {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); border: 2px solid #f44336; border-left-color: transparent; }
    50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); border: 2px solid #673ab7; border-left-color: transparent; }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); border: 2px solid #f44336; border-left-color: transparent; }
}
@-webkit-keyframes loader {
    0% { -webkit-transform: rotate(0deg); border: 2px solid #f44336; border-left-color: transparent; }
    50% { -webkit-transform: rotate(180deg); border: 2px solid #673ab7; border-left-color: transparent; }
    100% { -webkit-transform: rotate(360deg); border: 2px solid #f44336; border-left-color: transparent; }
}

label { color: #888; font-weight: 300; display: block; line-height: normal; margin-bottom: 6px; font-size: 0.925rem !important; line-height: 1.35; letter-spacing: 0.25; }

header { z-index: 10000; height: auto; padding: 0 1.5rem; box-shadow: 0 2px 4px rgb(0 0 0 / 10%); left: 0; right: 0; }


header .navbar { display: flex; flex-wrap: wrap; align-content: center; align-items: center; justify-content: space-between; width: 100%; height: 65px; margin: 0 auto; background: #000; }
header .navbar .navleft { display: flex; align-items: center; flex: 0 0 auto;  flex: 0 0 162px;}
header .navbar .navright { display: flex; align-items: center; justify-content: flex-end; flex: 0 0 162px; }
header .navbar nav ul  { display: flex; align-items: center; padding: 0; margin: 0; }
header .navbar nav ul li { display: inline-block; padding: 15px 24px; }
header .navbar nav a { display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.1rem; font-weight: 500; text-transform: uppercase; color: #fff; transition: all 0.25s ease; }
header .navbar .tab { margin-left: 9px; padding: 0 !important; border-radius: 50%; position: relative; }
header .navbar .tab:not(.avatar) { background: #bcc2c9; background: rgb(0 0 0 / 15%); border: 1px solid #4e4e4e; background: transparent; border-radius: 18px; height: 36px; width: 36px;  }
header .navbar .tab a { display: contents; color: #fff; }
header .navbar .tab i { color: #fff; display: flex; align-items: center; justify-content: center; margin: auto; }
header .navbar .tab i svg { transform: scale(1); }
header .navbar .tab i svg.chat { transform: scale(0.975); }
header .navbar .tip, .tip { position: absolute; left: 25px; top: -3px; height: 16px; min-width: 16px; padding: 0 3px; background: #bc0605; font-size: 10px; font-weight: 500; color: #ffffff; line-height: 16px; text-align: center; border-radius: 9px; }

footer { padding: 1.75rem 0.875rem 0.875rem;; color: #ddd;  }
footer .footer-section { max-width: 25%; padding-right: 2.5rem; /*padding-bottom: 1.25rem;*/ }
footer .footer-section a { line-height: normal; }
footer .icon {  transform: scale(0.75); display: inline-block; margin-left: 0.25rem; color: #5d5d5d; margin-left: 6px; }


@media (max-width: 766px) { 
    body { padding-top: 62px; }
    header .navbar { height: 62px; }
    header .navbar .navright, header .navbar .navleft { flex: 0 0 auto; }
    header .navbar nav ul, header .navbar .navcenter { display: none !important; } 
    .pretable { overflow: auto !important; }
}

body { background: #000; }
body.app { background: #e9ecef; background: #000;  }
body.front { background: #eee; }

.p-0 { padding: 0rem !important; } .p-1 { padding: 0.25rem !important; } .p-2 { padding: 0.5rem !important; } .p-3 { padding: 0.75rem !important; } .p-4 { padding: 1rem !important; } .p-5 { padding: 1.25rem !important; }
.px-0 { padding-left: 0rem !important; padding-right: 0rem !important; }
.px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-5 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
.pt-0 { padding-top: 0rem !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 0.75rem !important;  }
.pt-4 { padding-top: 1rem !important;  }
.pt-5 { padding-top: 1.25rem; }
.ps-0 { padding-left: 0 !important; }
.ps-1 { padding-left: 0.25rem !important; }
.ps-2 { padding-left: 0.5rem !important; }
.ps-3 { padding-left: 0.75rem !important;  }
.ps-4 { padding-left: 1rem !important;  }
.ps-5 { padding-left: 1.25rem; }
.pb-0 { padding-bottom: 0rem !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 0.75rem !important;  }
.pb-4 { padding-bottom: 1rem !important;  }
.pb-5 { padding-bottom: 1.25rem; }
.pe-5 { padding-right: 1.25rem !important; }
.m-0 { margin: 0; } .m-1 { margin: 0.25rem; } .m-2 { margin: 0.5rem; } .m-3 { margin: 0.75rem; } .m-4 { margin: 1rem; } .m-5 { margin: 1.5rem; }
.mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: 0.25rem !important; } .mb-2 { margin-bottom: 0.5rem !important; } .mb-3 { margin-bottom: 0.75rem !important; } .mb-4 { margin-bottom: 1rem !important; } .mb-5 { margin-bottom: 1.5rem !important; } .mb-6 { margin-bottom: 2.5rem !important; } 
.mt-0 { margin-top: 0rem !important; } .mt-1 { margin-top: 0.25rem !important; } .mt-2 { margin-top: 0.5rem !important; } .mt-3 { margin-top: 0.75rem !important; } .mt-4 { margin-top: 1rem !important; } 
.ms-0 { margin-left: 0rem !important; } .ms-1 { margin-left: 0.25rem !important; } .ms-2 { margin-left: 0.5rem !important; } .ms-3 { margin-left: 0.75rem !important; } .ms-4 { margin-left: 1rem !important; } 
.me-0 { margin-right: 0rem !important; } .me-1 { margin-right: 0.25rem !important; } .me-2 { margin-right: 0.5rem !important; } .me-3 { margin-right: 0.75rem !important; } .me-4 { margin-right: 1rem !important; } .me-5 { margin-right: 1.25rem !important; } 
.mx-1 { margin-right: 0.25rem !important; margin-left: 0.25rem !important; } .mx-2 { margin-right: 0.5rem !important; margin-left: 0.5rem !important; } .mx-3 { margin-right: 0.75rem !important; margin-left: 0.75rem !important; } .mx-4 { margin-right: 1rem !important; margin-left: 1rem !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; } .py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; } .py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; } .py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; } .py-5 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
.rounded-1 { border-radius: 5px !important;  }
.rounded-2 { border-radius: 0.375rem !important;  }
.rounded-3 { border-radius: 0.5rem !important;  }
.rounded-lg { border-radius: 0.75rem !important; }
.w-100 { width: 100% !important; }
.w-50 { min-width: 50%; }
.align-items-center { align-items: center; }
.text-white { color: #fff !important; }
.flex-column { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-center { justify-content: center; }
.flex-between { justify-content: space-between; }
.flex-end { justify-content: end; }
.flex-wrap { flex-wrap: wrap; }
.d-flex { display: flex !important; }
.d-block { display: block !important; }
.d-inline-block { display: inline-block; }
.d-none { display: none !important; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
button, .btn { font-family: "Rubik",sans-serif; display: inline-block; height: 34px; line-height: 34px !important; font-weight: 600; border-radius: 5px; font-size: 0.925rem; border: none; padding-right: 1rem; padding-left: 1rem;
        background: #212529; white-space: nowrap; color: #fff; outline: none !important; box-shadow: none !important; text-transform: uppercase;  letter-spacing: 0.25; box-shadow: 0 1px 1px rgb(0 0 0 / 8%) !important; }
.btn-sm, .btn-close { height: 24px !important; line-height: 24px !important; font-size: 0.75rem !important; padding: 0 0.5rem; border-radius: 0.25rem; width: auto; font-weight: 500; background: #3e4145; } 
.btn-form { height: 38px !important; line-height: 38px !important; border-radius: 10px; }
.btn-close { background: transparent; color: #88898c; }
.btn-admin, .btn-outline-admin { height: 28px !important; line-height: 28px !important; font-size: 0.75rem !important; padding: 0 0.75rem; font-weight: 500; }
.btn-outline { border: 1px solid #eee; background: transparent; line-height: 34px !important; }
.btn-outline-admin { border: 1px solid #eee; background: transparent; line-height: 26px !important; }
.btn-control { height: 28px !important; line-height: 28px !important; font-size: 0.8125rem !important; font-weight: 500; background: #fff; padding: 0 0.7rem; text-transform: capitalize; border-radius: 0.75rem; color: #0d0d0d; box-shadow: 0 1px 2px rgb(0 0 0 / 10%) !important; }
.btn-control.border { line-height: 26px !important; box-shadow: none !important; } 
.btn-primary { background: #e500b8 !important; }
.btn-red { background: rgb(255, 1, 30); }
.btn-black { background: #222; }
.btn-blue { background: #1e90ff; }
.invisible { position: absolute; left: -9999px; top: -9999px; }
.fw-bold { font-weight: 700 !important; } .fw-semibold { font-weight: 600 !important; } .fw-medium { font-weight: 500 !important; } .fw-normal { font-weight: 400 !important; } .fw-thin { font-weight: 300 !important; }
.bg-dropdown { background: #1A1F26; background: #22272E; }
.bg-grey { background: #1e2226 !important; }
.bg-darkgrey { background: #3e4145 !important; }
.bg-toned { background: #0e0f11 !important; }
.bg-pad { background: #2c3034 !important; }
.bg-black { background: #000; }
.bg-white { background: #fff !important; }
.bg-primary { background: #e500b8 !important; }
.bg-transparent { background: transparent !important; }
.bg-yellow { background: #e59200 !important; }
.bg-light { background-color: #111315 !important; }
.bg-blue { background: #0d6efd !important; }
.circle { border-radius: 50%!important; }
.fs-normal { font-size: 1rem !important; }
.fs-sm { font-size: 0.8125rem !important; font-size: 0.875rem !important; font-size: 0.925rem !important;  /*line-height: 1.3;*/}
.fs-xs { font-size: 0.8375rem !important; line-height: 1.35; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-light { color: #e1e1e1; }
.text-grey { color: #888; }
.text-dark { color: #5d5d5d; }
.text-black { color: #222 !important; }
.text-blue { color: #1e90ff !important; }
.text-primary { color: #e500b8 !important; }
.text-yellow { color: #e59200 !important; }
.text-green { color: #a4bc05 !important; }
.text-headline { color: #222 !important; }
.mobile-container { padding: 1.25rem; border-radius: 0.375rem; margin-bottom: 0.75rem; }
.flex-auto { flex: 1; margin-right: 0.75rem; }
.mx-auto { margin-left: auto; margin-right: auto; } .ms-auto { margin-left: auto; } .me-auto { margin-right: auto; }
.overflow-hidden { overflow: hidden !important; }
.border { border: 1px solid #ced4da; }
.border-top { border-top: 1px solid; } .border-bottom { border-bottom: 1px solid #0e0f11;  } .border-left { border-left: 1px solid; } .border-right { border-right: 1px solid; }
.border-none { border: none !important; }
.border-dark { border-color: #5d5d5d !important; }
.border-white { border-color: #fff !important; }
.border-primary { border-color: #bc0605 !important; }
.border-black { border-color: #1e2226 !important; }
.border-grey { border-color: #212529 !important; }
.border-yellow { border-color: #fdb904 !important; }
.border-blue { border-color: #1e90ff !important; }
.border-light { border-color: #f8f9fa !important; }
.border-table { border-color: #cacdd1 !important; }
.border-green { border-color: #a4bc05 !important; }
.border-1 { border-width: 1px !important; } .border-2 { border-width: 2px !important; } .border-3 { border-width: 3px !important; } .border-4 { border-width: 4px !important; } .border-5 { border-width: 5px !important; }
.top-0 { top: 0; }
.start-0 { left: 0; }
.end-0 { right: 0; }
.bottom-0 { bottom: 0; }
.pointer { cursor: pointer; }
.shadow { box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%) !important; box-shadow: rgb(0 0 0 / 7%) 0 0.83px 0.57px 0, rgb(0 0 0 / 11%) 0 2.14px 2.81px 0, rgb(0 0 0 / 11%) 0 4.71px 7.71px 0, rgb(0 0 0 / 9%) 0 9.81px 16.21px 0, rgb(0 0 0 / 12%) 0 21px 29px 0 !important;  }
.shadow-sm { box-shadow: 0 1px 2px rgb(0 0 0 / 10%) !important; }
.shadow-lg {box-shadow: 0 2.8px 2.2px rgb(0 0 0 / 2%), 0 6.7px 5.3px rgb(0 0 0 / 3%), 0 12.5px 10px rgb(0 0 0 / 4%), 0 22.3px 17.9px rgb(0 0 0 / 4%), 0 41.8px 33.4px rgb(0 0 0 / 5%), 0 100px 80px rgb(0 0 0 / 7%), inset 0 -1px 0 rgb(255 255 255 / 0%); }
.word-break { overflow-wrap: break-word; word-break: break-all; }
.flex-grow { flex-grow: 1 !important; }
.text-uppercase { text-transform: uppercase !important; }
.btn-check { position: absolute; opacity: 0; pointer-events: none; }
.label-check { display: inline-flex; align-items: center; cursor: pointer; position: relative; cursor: pointer;}
.btn-check:checked + .label-check::before { background-color: #28a745; border-color: #28a745;content: '✓'; font-weight: 600; color: #ffffff;  display: flex;align-items: center;justify-content: center;font-size: 0.8rem; margin-left: 0.25rem; }
.btn-check:checked + .label-check { padding-left: 34px; }
.label-check::before { content: ''; position: absolute; left: 0.5rem; width: 1rem; height: 1rem; border-radius: 8px; background-color: transparent; transition: background-color 0.3s, border-color 0.3s; }
.avatar-size { width: 120px; margin: -5.25rem auto 2.75rem 0.125rem; }
.gap { gap: 12px !important; }
.list-unstyled { list-style: none; padding: 0; margin: 0; }
.font-rubik { font-family: "Rubik",sans-serif !important; }
.start-50 { left: 50%; }
.translate-middle { transform: translate(-50%, -50%); }
.hr-form { flex: 0 0 calc(100% - 2rem) !important; margin: 0.5rem 1rem 1.5rem !important; border: none; border-bottom: 1px solid #ededed; }
.lh-sm { line-height: 1.35 !important; }

@media (max-width: 1024px) { 
  .mobile-container { padding: 1.25rem 0.75rem 0.75rem !important; border-radius: 0rem; border-bottom: 1px solid #262c37; margin-bottom: 0; }
  .hidden-mobile { display: none !important; }
}

#pop { top: -100px; left: 50%; transform: translateX(-50%); transition: top 0.5s ease-in-out, transform 0.2s ease-in-out; background: #fff; color: #f5f5f5; padding: 1rem 2rem 0.75rem 2rem; text-align: center; border-radius: 0.5rem; position: relative; text-align: left; max-width: 500px; width: calc(100% - 40px); box-shadow: 0 0 1.5rem 0 rgb(26 31 67 / 38%); position: fixed; z-index: 1000000000; }
#pop:before { content: ""; position: absolute; width: 0.5rem; height: calc(100% - 1.5rem); top: 0.75rem; left: 0.75rem; z-index: 0; border-radius: 1rem; background: #fc8621; } 
#pop .close { position: absolute; width: 1.35rem; height: 1.35rem; text-align: center; right: 13px; top: 11px; font-size: 1.2rem; cursor: pointer; border-radius: 100%; color: #111; } 
#pop .message { position: relative; font-size: 0.875rem; z-index: 1; color: #111; font-weight: 500; line-height: 1.3rem; } 
#pop h3 { font-size: 1.2rem; margin: -2px 0 0.25rem; line-height: 1.35rem; font-weight: 600; position: relative; color: #fc8621; width: 100%; } 
#pop.show { top: 20px; }
@keyframes shake { 0%, 100% { transform: translate(-50%, 0);  } 25% { transform: translate(-50%, 0) translateX(-5px);  } 50% { transform: translate(-50%, 0) translateX(5px);  } 75% { transform: translate(-50%, 0) translateX(-5px);  } }

@media (min-width: 768px) {
  .text-col { -moz-column-count: 2; -moz-column-gap: 4rem; -webkit-column-count: 2; -webkit-column-gap: 4rem; column-count: 2; column-gap: 4rem; }
  .hidden-desktop { display: none !important; }
  .bg-form { background: #f8f9fa; padding: 2rem;  box-shadow: 0 1px 2px rgb(0 0 0 / 10%) !important; }
  .bg-form-sm { padding: 0.75rem 1rem;  box-shadow: 0 1px 2px rgb(0 0 0 / 15%) !important; }
}

@media (max-width: 768px) {
  .main-col { margin-bottom: 1.25rem; }
  .flex-sm-start { justify-content: flex-start; }
  .w-100-mobile { width: 100% !important; max-width: 100% !important; flex: 1 1 100% !important; }
}

.dropdown { position: relative; display: inline-block; }
.dropdown-content { display: none; position: absolute;right: 0;background: #1e2226;list-style-type: none; padding: 0.5rem 0; margin: 0;z-index: 100;box-shadow: 0 16px 32px rgb(0 0 0 / 60%);-webkit-transition: .2s;transition: .2s;margin-top: 0.5rem;min-width: 9.75rem;max-width: 340px; border-radius: 0.375rem !important;}
.dropdown-content li { position: relative; font-weight: 600; padding: 0.25rem 0.875rem; cursor: pointer; white-space: nowrap;}
.dropdown-content li a { font-family: "Rubik",sans-serif !important; white-space: nowrap; font-weight: 600; font-size: 0.95rem; text-transform: uppercase; }
.dropdown-content hr { margin: 0.5rem 0 !important; border: none; background: rgb(0 0 0 / 35%); height: 1; }

.column-1 { flex: 0 0 100%; } 
.column-2 { flex: 0 0 100%; } 
.column-3 { flex: 0 0 100%; } 
main { padding: 1.75rem 0.875rem 0; }
main > * { padding-bottom: 1.25rem; }
main, footer > * { max-width: 1300px; display: block; margin: auto; }
.main-col > *:not(h2,.h2) { margin-bottom: 1.5rem; }
.frame { position: relative; width: 100%; border-radius: 0.75rem; padding: 1.25rem;  }
.fullframe { margin-left: -1rem; margin-right: -1rem; margin-top: -1.25rem; background: #fff;  }

@media (min-width: 768px) {
    main, footer > * { padding: 2.5rem; }
    main > * { padding-bottom: 1.5rem; }
    .frame {  background: #fff;  }
    .fullframe { margin-left: 0; margin-right: 0; margin-top: 0; border-radius: 0.75rem; }
    .inner { padding-left: 1.25rem; padding-right: 1.25rem;  }
    .main-row { margin: -1.25rem; }
    .main-col { padding: 1.25rem; }
    .column-1 { flex: 0 0 50%; order: 2; } 
    .column-2 { flex: 0 0 100%; order: 1; } 
    .column-3 { flex: 0 0 50%; order: 3; } 
    .avatar-size { width: 160px; margin: -6.75rem auto 2.75rem 0.25rem; }
}

@media (min-width: 992px) {
    main, footer > * { padding: 3.5rem; }
    main > * { padding-bottom: 1.5rem; }
    .main-row { margin: -1.25rem; }
    .main-col { padding: 1.25rem; }
    .column-1 {flex: 1 1 25%;order: 1; }
    .column-2 {flex: 1 1 50%;order: 2; margin-right: 1.25rem; }
    .column-3 {flex: 1 1 25%;order: 3; }
}



    @media (max-width: 1024px) {
        header { padding: 0 16px 0 12px;}
        footer .footer-section {
            max-width: 50%;
        }
    }

    @media (max-width: 768px) {
        .frame:not(.fixed) { border: none; padding: 0; border-radius: 0; } 
        .footer-section { padding-right: 1rem; order: 2; }
        .footer-section.first { order: 1; }
        .mobile-order-1 { order: 1; } .mobile-order-2 { order: 2; } .mobile-order-3 { order: 3; }
    }

.spinner { display: inline-block; width: 0.75rem; height: 0.75rem; border: 2px solid #e4e4e4; border-radius: 50%; border-top-color: transparent; animation: spin 0.75s linear infinite; margin-bottom: -1px; } 
.spinner-lg { width: 1.5rem !important; height: 1.5rem !important; } 
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }


.grid-1, .grid-2, .grid-ultra, .grid-3, .row-2, .row-3 { display: flex; flex-wrap: wrap; }
.grid-1 { margin: -0.25rem; }
.grid-1 > * { margin: 0.25rem; flex: 1 1 calc(25% - 0.5rem); box-sizing: border-box; }
.grid-2 > * { margin: 0.5rem; flex: 1 1 calc(50% - 1rem); box-sizing: border-box; }
.grid-3 { margin: -0.5rem; }
.grid-3 > * { margin: 0.25rem; flex: 1 1 calc(25% - 1rem); box-sizing: border-box; }
.grid-ultra { margin: -0.5rem; }
.grid-ultra > * { margin: 0.5rem; flex: 1 1 calc(33.3333% - 1rem); box-sizing: border-box; }

.row-1 {  }
.row-2, .row-3 { margin: 0 -1rem;  }
.row-2 > * { margin: 0 1rem; flex: 0 0 calc(50% - 2rem); box-sizing: border-box;  }
.row-3 > * { margin: 0 1rem; flex: 0 0 calc(33.3333% - 2rem); box-sizing: border-box;  }

@media (max-width: 768px) {
  .row-2:not(.fixed) > *, .row-3 > * { flex: 0 0 calc(100% - 2rem); } 
  .row-3.fixed > * { margin: 0 1rem; flex: 0 0 calc(50% - 2rem); }
  .row-3.fixed-3 > * { margin: 0 1rem; flex: 0 0 calc(33.3333% - 2rem); }
  .grid-2:not(.fixed) > * { flex: 1 1 calc(100% - 1rem); }
  .grid-ultra { margin: -0.25rem; }
  .grid-ultra > * { margin: 0.25rem; flex: 1 1 calc(50% - 0.5rem);  }
  .grid-ultra { margin: -0.375rem; }
  .grid-ultra > * { margin: 0.375rem; flex: 1 1 calc(50% - 0.75rem); }
}


.modal { margin: 2rem auto; width: 100%; max-width: 500px; position: fixed; top: 0; left: 0; right: 0; max-height: 100%; min-height: 300px; height: 100%; }
.modal-content { box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%); margin: 1rem; border-radius: 0.75rem; overflow: hidden; }
.modal-body { padding: 20px; max-height: 85%; overflow: auto; }

.badge { font-size: 10px; color: #fff; background: #ff4c4c !important; padding: 3px 7px; border-radius: 12px; margin-top: -3px; margin-left: 6px; font-weight: 700; text-transform: capitalize; }

.modal-body::-webkit-scrollbar { width: 8px; }
.modal-body::-webkit-scrollbar-thumb { background-color: #6c757d; background-color: #e8e8e8; border-radius: 10px;}
.modal-body::-webkit-scrollbar-track { /* background: #111419; */ }
.modal-body { scrollbar-width: thin; scrollbar-color: #6c757d #343a40; }


@media (prefers-reduced-motion: reduce)
.fade { transition: none; }
.fade { transition: opacity .15s linear; }
.modal-dialog { position: relative; }

#avatarEditor.modal { display: none; position: fixed; z-index: 1000; left: 0;top: 0;width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.5); }
#avatarEditor.modal-dialog { position: relative; margin: auto; top: 10%;  }
#avatarEditor.modal-content { background-color: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); }
#avatarEditor.modal-header { display: flex; justify-content: flex-end; padding: 10px; }
#avatarEditor .close-button { background: none; border: none; font-size: 20px; cursor: pointer; }
#avatarEditor .container { padding: 20px; }
#avatarEditor .image-container { display: flex; justify-content: center; margin-bottom: 20px; }
#avatarEditor .image-demo { width: 300px; height: auto;  }
#avatarEditor .button-container { display: flex; justify-content: center; margin-top: 20px; }

.counter { height: 16px; min-width: 16px; padding: 0 3px; background: #bc0605; font-size: 10px; font-weight: 500; color: #ffffff; line-height: 16px; text-align: center; border-radius: 9px;} 

.textarea-container { position: relative; width: 100%; z-index: 1; }
.textarea-container::before { content: "PASTE HERE"; position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; color: #ebebeb; pointer-events: none; text-align: center; z-index: -1; }
.textarea-container textarea:focus + .textarea-container::before,
.textarea-container textarea:not(:placeholder-shown) + .textarea-container::before { display: none; }

.input-container { position: relative; display: inline-block; width: 100%; }
.input-container input[type="checkbox"] { position: absolute; top: -9999px; left: -9999px; }
.input-container label { position: absolute; right: 7px; top: 7px; cursor: pointer; width: 24px; height: 24px; border-radius: 6px; padding: 5px; background: #ced4da; color: #fff; }
.input-container .trash-icon { width: 100%; height: 100%; }

/* Change trash icon color when checkbox is checked */
.input-container input[type="checkbox"]:checked + label { background: #bc0605;  }
.input-container input[type="checkbox"]:checked + label .trash-icon { fill: #fff;  }


.input-group { position: relative; }
.input-mark { position: absolute; top: 1px; right: 1px; display: flex; align-items: center; height: 36px; color:#0d0d0d; font-weight: 500; padding: 0 0.75rem; border-radius: 0 8px 8px 0; border-left: 1px solid #222; } 

.text-truncate-inbox { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; max-height: calc(1.5em * 2); }

.notificationpopup { position: fixed; bottom: -100%;  right: 0; width: 100%; max-width: 400px; margin: 0 auto; background: #2c3034; padding: 1.5rem; box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.6); transition: bottom 0.4s ease; z-index: 1000000000; text-align: center; border-radius: 0.75rem 0.75rem 0 0; min-height: 124px; }

.notificationpopup.show { bottom: 0;  }
.close-btn { position: absolute; top: 0.75rem; right: 0.75rem; background: none; border: none; cursor: pointer; outline: none; height: auto; width: 28px; }

.live-dot { width: 12px; height: 12px; background-color: #fdb904; border-radius: 50%; margin-right: 8px; animation: blink 1s infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.policy ul:not(.dropdown-content) { padding-top: 0;  }
.policy > *, .policy ul:not(.dropdown-content) li  { margin-bottom: 0.75rem; }
.policy h1 { margin-bottom: 0.75rem; }
.policy h2 { margin-top: 1.5rem; margin-bottom: 3px; }
.policy h3 { margin: 1.25rem 0 5px; /* color: inherit; */ font-size: inherit; }
.policy ul:not(.list-unstyled, .dropdown-content) { list-style-type: disc !important; padding-left: 1.25rem !important; margin-bottom: 0.75rem !important;display: block !important;}
.policy ul:not(.list-unstyled, .dropdown-content) li { display: list-item !important;  list-style-type: disc; }
.policy ol .list-group-item { display: flex !important; align-items: start; padding: 0.75rem; border: 1px solid #ddd; border-radius: 0.5rem; margin-bottom: 0.75rem; background: #f8f9fa; } 



input[type="checkbox"] { appearance: none; width: 16px; height: 16px; min-width: 16px; border: 1px solid #5d5d5d; border-radius: 4px !important; margin-right: 8px; position: relative; cursor: pointer; margin-bottom: 0; padding: 0 !important; margin-top: 1px; background: transparent !important; } 
input[type="checkbox"]:checked { background-color: #1e90ff !important; border-color: #1e90ff; color: #fff !important; }
input[type="checkbox"]:checked::after { content: "✔"; font-size: 12px; font-weight: bold; color: #fff !important; position: absolute; left: 2px; top: -12px; } 

.hero-header {
  background-color: #bc0605 !important; 
    background:
        url(https://spike.ph/img/hero/bg-round.png),
        url(https://spike.ph/img/hero/bg-round-2.png),
        url(https://spike.ph/img/hero/bg-square.png),
        url(https://spike.ph/img/hero/bg-line.png),
        url(https://spike.ph/img/hero/bg-bottom-hero.png);
    background-position:
        0px 80%,
        right 0 top 0,
        left 50% top 0,
        left 50% top 50%,
        center bottom -1px;
    background-repeat: no-repeat;
    background-size: auto, auto, auto, auto, 100% auto;
}

body.pattern {
    background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url(../img/bg.svg) transparent;
    background-size: cover;
}
.started-point { color: #222; border: 1px solid #222; min-width: 30px; height: 30px; line-height: 29px; border-radius: 50%; font-weight: 500; text-align: center; margin-top: 2px; }