:root {
    --primary-color: #fff;
    --secondary-color: #4355f6;
    --secondary-color-2: #5060f7;
    --color-variant_1: #86b8f9;
    --color-variant_2: #dee9f8;
    --color-variant_3: #456c63;
    --grey-color: grey;
    --grey-color-2: #c4c2c2;
    --primary-color-reverse: #fff;
    --color-success: #0ac989;
    --color-danger: #f24242;

    --bg-1: #080808;
    --bg-2: #202020;
    --bg-3: #121212;
    --btn-grey: #232323;

    --text-xs: 12px;
    --text-sm: 14px;
    --text-md: 16px;
    --text-lg: 20px;
    --text-xl: 24px;

    --radius: 4px;
    --radius-2: 6px;
    --radius-3: 12px;
    --radius-4: 20px;
    --radius-5: 30px;
}


body,
html {
    height: 100%;
    margin: 0px !important;
    padding: 0px !important;
    scroll-behavior: smooth;
    background: #080808;
}

.site-container {
    background: #080808;
    display: table;
    height: inherit;
    width: 100%;
    margin: 0px !important;
    margin-bottom: 0px;
    padding: 0px !important;
}

/* ------------------------ */
/* Fonts .. colors .. */
/* ------------------------ */
h1, h2, h3, h4, h5, p, small, label, i{
    color: #fff;
}
a {
    text-decoration: none !important;
    color: var(--primary-color);
}
a:hover {
    color: var(--primary-color);
    opacity: .7;
}
.anuphan {
    font-family: 'anuphan';
    font-weight: 400;
}
.anuphan-2 {
    font-family: 'anuphan';
    font-weight: 500;
}
.anuphan-3 {
    font-family: 'anuphan';
    font-weight: 600;
}
.gabarito {
    font-family: 'gabarito';
    font-weight: 400;
}
.gabarito-2 {
    font-family: 'gabarito';
    font-weight: 600;
}
.gabarito-3 {
    font-family: 'gabarito';
    font-weight: 800;
}
.tektur {
    font-family: 'tektur';
}

.text-xs { font-size: var(--text-xs) }
.text-sm { font-size: var(--text-sm) }
.text-md { font-size: var(--text-md) }
.text-lg { font-size: var(--text-lg) }
.text-xl { font-size: var(--text-xl) }

.primary-color { color: var(--primary-color) !important; }
.primary-color-reverse { color: var(--primary-color-reverse) !important; }
.secondary-color { color: var(--secondary-color-2) !important; }
.color-v_1 { color: var(--color-variant_1) !important; }
.color-v_2 { color: var(--color-variant_2) !important; }

.grey-color { color: var(--grey-color) !important }
.grey-color-2 { color: var(--grey-color-2) !important }
.color-success { color: var(--color-success) !important; }
.color-danger { color: var(--color-danger) !important; }

/* Background colors */
.bg-1 { background: var(--bg-1) !important; }
.bg-2 { background: var(--bg-2) !important; }
.bg-3 { background: var(--bg-3) !important; }

.bg-v_1 { background: var(--color-variant_1) !important; }
.bg-v_2 { background: var(--color-variant_2) !important; }
.bg-v_3 { background: var(--color-variant_3) !important; }
.bg-secondary { background: var(--secondary-color) !important; }
.modal-body { background: var(--bg-2); }
.white-bg { background: white; }
.white-text-only {
    color: white !important;
}

.index-hero-text {
    font-size: 60px;
}
@media (max-width: 576px) {
    .index-hero-text {
        font-size: 40px;
    }
}
/* END */


/* ------------------------ */
/* buttons .. toggles */
/* ------------------------ */
button {
    background: #4355f6;
    border: none;
    border-radius: 8px;
    text-align: center;
    padding: 12px;
    color: #fff;
    width: 100%;
    font-family: 'anuphan';
    font-size: 14px;
}
button:focus {
    outline: 0px;
    box-shadow: 0px;
    -webkit-box-shadow: none;
}
button:hover {
    opacity: .9;
}
button.transparent {
    background: transparent !important;
}
button.btn-sec {
    background: white;
    color: black;
}
button.btn-sec i { color: black }
button.btn-rounded { border-radius: 30px !important; }
button.icon-button {
    width: 40px;
    height: 40px;
    background: var(--btn-grey) !important;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
}
button.icon-button.icon-sm {
    width: 20px;
    height: 20px;
}
button.btn-grey {
    background: var(--btn-grey);
}

  /* Tabs Button ======================== */
.tabs {
    padding: 8px 12px;
    font-size: 14px;
    color: grey !important;
    cursor: pointer;
}

@media(max-width:576px) {
    .tabs {
        font-size: 12px;
    }
}

.tabs:hover {
    background: #111010;
    border-radius: 4px 4px 0px 0px;
}

.tabs.active {
    position: relative;
    color: white !important;
    font-weight: 500;
}

.tabs.active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 30%;
    height: 3px;
    background-color: var(--primary-color);
    border-radius: 0px;
    transform: translateX(-50%);
}


/* END */


/* ------------------------ */
/* forms inputs .. */
/* ------------------------ */
.form-wrapper {
    position: relative;
    margin: 25px 0px;
}

.form-wrapper input {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #232323;
    border-radius: 6px;
    color: #fff !important;
    background: transparent;
    caret-color: #fff;
}
.form-wrapper select {
    width: 100%;
    height: 52px;
    border: 1px solid #505669;
    border-radius: 6px;
    padding: 0px 15px;
    color: #fff !important;
    background: transparent;
}
input:focus,
select:focus {
    box-shadow: none !important;
    outline: none !important;
}
.form-wrapper .has-icon {
    padding-right: 20% !important;
    position: relative;
}
.form-wrapper .input-icon-wrapper {
    position: absolute;
    right: 0px;
    top: 0px;
    display: flex;
    height: 100%;
    width: auto;
    padding: 0px 8px;
    padding-top: 2px;
    justify-content: center;
    align-items: center;
    border-radius: 0px 4px 4px 0px;
    cursor: pointer;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: none;
  transition: background-color 5000s ease-in-out 0s;
}
.form-wrapper .dark-input {
    background: #282828 !important;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
.form-control {
    color: white !important;
}
/* ------------------------ */
/* Box .. Card */
/* ------------------------ */

.post-form {
    box-shadow: 0 4px 8px 0 rgba(54, 39, 39, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background: #181818;
    padding: 50px;
    border-radius: 20px;
    border: 1px solid #242424;
    width: 90%;
}

@media (max-width:768px) {
    .post-form {
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media (min-width:967px) {
    .post-form {
        width: 50%;
        margin-top: 10%;
    }

    .post-form-mini {
        width: 40%;
    }
}

@media (max-width:966px) and (min-width:577px) {
    .post-form {
        width: 50%;
        margin-top: 10%;
    }
    .post-form-mini {
        width: 50%;
    }
}

.popup-wrapper {
    display: none;
    position: fixed;
    top: 0;
    z-index: 99;
    width: 100%;
    height: 100%;
}
.popup-container {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup {
    background: #262626;
    width: 70%;
    padding: 15px;
    border-radius: 15px;
}
@media (min-width: 577px) and (max-width:768px) {
    .popup {
        width: 50%;
    }
}
@media (min-width:769px) {
    .popup {
        width: 30%;
    }
}
.post-box {
    background: #181818;
    padding: 12px;
    border-radius: 6px;
}
.intro-text-container {
    padding-top: 80px;
    padding-bottom: 80px;    
}

/* END */

/* Box sizing */
.w-fit-content {
    width: fit-content !important;
}



.min-h-100 {
    min-height: 100% !important;
}
.min-w-100 {
    min-width: 100% !important;
}
/* END */

.activity-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.bottom-padding {
    padding-bottom: 90px;
}

.radius { border-radius: var(--radius) }
.radius-2 { border-radius: var(--radius-2) !important }
.radius-3 { border-radius: var(--radius-3) !important }
.radius-4 { border-radius: var(--radius-4) !important }
.radius-5 { border-radius: var(--radius-5) !important }

/* Sidebar */
.sidebar {
    background: #080808;
    height: 100vh;
    z-index: 99 !important;
    left: 0px;
    overflow: auto;
    margin: 0px;
    border-right: 1px solid #202020;
}

.sidebar a:hover {
    color: #fff;
    opacity: 0.9;
}

.sidebar a {
    color: #fff !important;
    font-size: 14px !important;
}

.sideBar i {
    font-size: 14px;
    margin-right: 8px !important;
}

.sidebar .sl-dsk {
    padding: 10px 14px 10px 14px;
    border-radius: 8px;
    display: flex;
    align-items: center;
}

.sidebar .sl-dsk:hover {
    background: #222;
}

.sidebar .side-link-active {
    background: #222;
}

.side-bar-mobile {
    position: fixed;
    right: 0;
    width: 75%;
    height: 100%;
    background: #080808;
    z-index: 999999;
    top: 0 !important;
    overflow: auto !important;
    padding-bottom: 30px;
    box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;
}

.side-bar-mobile a {
    color: #fff !important;
}

.overlayDiv {
    position: fixed;
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100%;
    z-index: 1;
    display: none;
}
/* END Sidebar */

.border { border-color: #252525 !important; }
.input-border { border-color: #282828 !important; }
.border-top { border-color: #252525 !important; }
.border-right { border-color: #252525 !important; }
.border-left { border-color: #252525 !important; }
.border-bottom {border-color: #252525 !important;}
.border-bottom-2 {border-bottom: 1px solid #303030 !important;}
.border-none{
    border: none !important;
}

.uppercase {
    text-transform: uppercase;
}
.capitalize {
    text-transform: capitalize;
}
.account-control-panel {
    position: fixed;
    z-index: 999;
    right: 30px;
    top: 56px;
    min-width: 260px;
    background: var(--bg-2);
    display: none;
}

.account-control-panel .a-p-inner:hover {
    background: #303030;
}

.account-control-panel-overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 99;
    left: 0;
    top: 0;
}

.pointer {
    cursor: pointer;
}
.cs-list-item:hover {
    background: #272727 !important;
    cursor: pointer;
}
.position-relative {
    position: relative;
}
.m-bar {
    background: #e3e3e3;
}


/* MEDIA QUERIES CLASSES */
/* Desktop screen */
@media (min-width:966px){
    .w-fit-content-lg {
        width: fit-content;
    }
    .intro-text-container {
        width: 60%;
        margin: auto;
    } 
}


/* MOBILE */
@media (max-width: 576px) {
    .px-mobile-0 {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    .table-responsive-sm {
        width: 90vw !important;
        overflow: auto !important;
        flex-wrap: wrap;
      }
}