@import "beer.css";
@import "bootstrap-grid.min.css";
@import "bootstrap-utilities.css";
@import "bootstrap-components.css";
@import "fonts.css";
@import "alwan.min.css";


body {
    font-family: Poppins, Arial, sans-serif;
}

@import "https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap";

:root {
    /* To use your custom font */
    --font: "Poppins", Arial, sans-serif;

    /* To remove default icons */
    --font-icon: none;

    /* To use default outlined icons */
    --font-icon: "Material Symbols Outlined";

    /* To use default rounded icons */
    --font-icon: "Material Symbols Rounded";

    /* To use default sharp icons */
    --font-icon: "Material Symbols Sharp";
}

.h-100 {
    height:100%
}

:root {
    --gsm-primary-color: #77B800;
    --gsm-primary-color-rbd: rgb(119, 184, 0);
    --gsm-primary-two: #58781E;
    --gsm-primary-two-rgb: rgb(88, 120, 30);
    --gsm-primary-three: #2E381C;
    --gsm-primary-three-rbg: rgb(46, 56, 28);
    --gsm-secondary-color: #8C00B8;
    --gsm-secondary-color-rgb: rgb(140, 0, 184);
    --gsm-secondary-two: #532163;
    --gsm-secondary-two-rbg: rgb(83, 33, 99);
    --gsm-secondary-three: #2F2233;
    --gsm-secondary-three-rbg: rgb(47, 34, 51);
    --gsm-tertiary-color: #FF7300;
    --gsm-tertiary-color-rbg: rgb(255, 115, 0);
    --gsm-header-height: 60px;
    --gsm-footer-height: 60px;
    --gsm-content-height: calc(100vh - var(--gsm-header-height) - var(--gsm-footer-height))
}

.light .logo-enius {
    fill: #000000
}

.logo-im {
    fill: var(--gsm-primary-color)
}

.logo-g {
    fill: var(--gsm-tertiary-color)
}

.logo-enius {
    fill: #FFFFFF;
}

:root,
body.light {
    --primary: var(--gsm-primary-color);
    --secondary: var(--gsm-secondary-color);
    --tertiary: var(--gsm-tertiary-color);
}

:root,
body.dark {
    --primary: var(--gsm-primary-color);
    --secondary: var(--gsm-secondary-color);
    --tertiary: var(--gsm-tertiary-color);
}

.bg-white {
    background-color: #FFF;
    color: #000;
}

.text-primary {
    color: var(--gsm-primary-color) !important;
}

.text-secondary {
    color: var(--gsm-secondary-color-rgb) !important;
}

.text-secondary-two {
    color: var(--gsm-secondary-two-rbg) !important;
}

.bg-primary {
    background-color: var(--gsm-primary-color) !important;
    color: white;
}

.bg-primary-two {
    background-color: var(--gsm-primary-two);
    color: white;
}

.bg-primary-three {
    background-color: var(--gsm-primary-three);
    color: white;
}

.bg-secondary {
    background-color: var(--gsm-secondary-color);
    color: white;
}

.bg-secondary-two {
    background-color: var(--gsm-secondary-two);
    color: white;
}

.bg-secondary-three {
    background-color: var(--gsm-secondary-three);
    color: white;
}

.bg-tertiary {
    background-color: var(--gsm-tertiary-color);
}

.color-overlay-primary-two::before {
    content: "";
    position: absolute;
    pointer-events: none;
    top: -0px;
    left: -0px;
    width: calc(100% + 0px + 0px);
    height: calc(100% + 0px + 0px);
    border-color: inherit;
    background: var(--gsm-primary-two);
    opacity: 0.25;
}

.color-overlay-primary-three::before {
    content: "";
    position: absolute;
    pointer-events: none;
    top: -0px;
    left: -0px;
    width: calc(100% + 0px + 0px);
    height: calc(100% + 0px + 0px);
    border-color: inherit;
    background: var(--gsm-primary-three);
    opacity: 0.25;
}

.color-overlay-secondary-three::before {
    content: "";
    position: absolute;
    pointer-events: none;
    top: -0px;
    left: -0px;
    width: calc(100% + 0px + 0px);
    height: calc(100% + 0px + 0px);
    border-color: inherit;
    background: var(--gsm-secondary-three);
    opacity: 0.25;
}

.color-overlay-primary::before {
    content: "";
    position: absolute;
    pointer-events: none;
    top: -0px;
    left: -0px;
    width: calc(100% + 0px + 0px);
    height: calc(100% + 0px + 0px);
    border-color: inherit;
    background: var(--gsm-primary-color);
    opacity: 0.25;
}

.color-overlay-secondary::before {
    content: "";
    position: absolute;
    pointer-events: none;
    top: -0px;
    left: -0px;
    width: calc(100% + 0px + 0px);
    height: calc(100% + 0px + 0px);
    border-color: inherit;
    background: var(--gsm-secondary-color);
    opacity: 0.25;
}

.color-overlay-secondary-two::before {
    content: "";
    position: absolute;
    pointer-events: none;
    top: -0px;
    left: -0px;
    width: calc(100% + 0px + 0px);
    height: calc(100% + 0px + 0px);
    border-color: inherit;
    background: var(--gsm-secondary-two);
    opacity: 0.25;
}

.color-overlay-tertiary::before {
    content: "";
    position: absolute;
    pointer-events: none;
    top: -0px;
    left: -0px;
    width: calc(100% + 0px + 0px);
    height: calc(100% + 0px + 0px);
    border-color: inherit;
    background: var(--gsm-tertiary-color);
    opacity: 0.25;
}


.panel {
    position: relative;
    min-height: 90vh;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding-top: 50px;
    padding-bottom: 50px;
}

.panel-content-bottom {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 40px;
}

#gstreet-logo {
    width: 150px;
}

#gstreet-logo .gstreet-g {
    fill: #77B800
}

#gstreet-logo .gstreet-street {
    fill: #FFF
}

.panel-content {
    position: sticky;
    bottom: 80px;
    padding: 40px;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: 1rem;
    transition: transform 400ms;
}

@media screen and (min-width: 1024px ) {
    .panel-content {
        max-width: 600px;
        margin-left: 0;
        top: 80px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .panel-content-right {
        padding-left: 640px;
    }
}

.background-fixed {
    background-attachment: fixed;
}

.offscreen-left {
    transform: translate3d(-100%, 0, 0);
}

.gradient-1 {
    background: #141E30; /* fallback for old browsers */
    background: linear-gradient(to top, #212529, #495057); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.gradient-2 {
    background: #141E30; /* fallback for old browsers */
    background: linear-gradient(to bottom, var(--gsm-secondary-two), var(--gsm-secondary-three)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}


.canvas-container {
    position: absolute !important;
}

.w-100 {
    width: 100%;
    justify-content: space-between;
}

.row {
    justify-content: space-between;
    align-items: center;
}

button.active {
    background-color: var(--gsm-primary-color);
    color: white;
}

.alwan__swatches {
    background-color: inherit;
}

dialog {
    background-color: color-mix(in srgb, var(--background), transparent 10%);
}

dialog.right, dialog.left {
    background-color: color-mix(in srgb, var(--surface), transparent 10%);
    border: 1px solid var(--border-color);
}

.hide-helper .helper {
    display: none !important;
}

.hide-helper .field {
    margin-block-end: 0;
}

.button button [data-active=true] {
    background-color: var(--gsm-primary-color);
    color: white;
}

menu.above.active {
    transform: scale(1) translateY(0%);
    bottom: 40px;
}

emoji-picker {
    width: 100%;
    --emoji-font-family: "Noto Color Emoji";
}

dialog.squeeze {
    max-width: 720px;
    margin: 0 auto;
    left: 50%;
}

dialog.squeeze-small{
    max-width: 360px;
    min-width: 300px;
    padding:0;
}

.alwan {
    width: 100%;
    border:none
}

dialog.squeeze.top {
    transform: translate(-50%, -100%);
}

dialog.squeeze.bottom {
    transform: translate(-50%, 100%);
}

dialog.squeeze.active {
    transform: translate(-50%, 0);
}

.tiny-blur {
    ---blur: 0.05rem;
}


.text-left {
    text-align: start;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
    display:block !important;
    width: 100%;
}

.overlay.transparent {
    background-color: transparent;
}