:root {
    --background: rgba(255, 255, 255, 0.1);
    --color: #b0bbc7;
    --color2: rgba(255, 255, 255, 0.75);
    --primary-rgb: 77, 238, 234;
    --background-rgb: 18, 55, 61;
    --main-gradient-bg: radial-gradient(circle, rgb(var(--background-rgb)) 0%, #121923, #121923 100%);
    --primary-bg-color: rgb(var(--primary-rgb));
    --primary-bg-hover: rgb(var(--primary-rgb));
    --primary-bg-border: rgb(var(--primary-rgb));
    --primary01: rgba(var(--primary-rgb), 0.1);
    --primary02: rgba(var(--primary-rgb), 0.2);
    --primary03: rgba(var(--primary-rgb), 0.3);
    --primary04: rgba(var(--primary-rgb), 0.4);
    --primary05: rgba(var(--primary-rgb), 0.5);
    --primary06: rgba(var(--primary-rgb), 0.6);
    --primary07: rgba(var(--primary-rgb), 0.7);
    --primary08: rgba(var(--primary-rgb), 0.8);
    --primary09: rgba(var(--primary-rgb), 0.9);
    --primary005: rgba(var(--primary-rgb), 0.05);
    --primary-transparentcolor: rgba(var(--primary-rgb), 0.2);
    --secondary-rgb: 249, 248, 113;
    --secondary: rgb(var(--secondary-rgb));
    --secondary-02: rgba(var(--secondary-rgb), 0.2);
    --secondary-03: rgba(var(--secondary-rgb), 0.3);
    --secondary-05: rgba(var(--secondary-rgb), 0.5);
    --secondary-09: rgba(var(--secondary-rgb), 0.9);
    --dark-body: #161b25;
    --dark-theme: #1e232d;
    --app-color-picker: #4deeea;
    --dark: #191f2b;
    --black: #fff;
    --yellow: #ffc102;
    --muted: #9aa5b9;
    --light: #17171c;
    --gray-100: #110f0f;
    --gray-200: #17171c;
    --gray-300: #393946;
    --gray-400: #505062;
    --gray-500: #73738c;
    --gray-600: #8f8fa3;
    --gray-700: #ababba;
    --gray-800: #c7c7d1;
    --gray-900: #e3e3e8;
    --white-1: rgba(0, 0, 0, 0.1);
    --white-2: rgba(0, 0, 0, 0.2);
    --white-3: rgba(0, 0, 0, 0.3);
    --white-4: rgba(0, 0, 0, 0.4);
    --white-5: rgba(0, 0, 0, 0.5);
    --white-6: rgba(0, 0, 0, 0.6);
    --white-7: rgba(0, 0, 0, 0.7);
    --white-8: rgba(0, 0, 0, 0.8);
    --white-9: rgba(0, 0, 0, 0.9);
    --white-05: rgba(0, 0, 0, 0.05);
    --white-08: rgba(0, 0, 0, 0.08);
    --white-75: rgba(0, 0, 0, 0.075);
    --black-1: rgba(255, 255, 255, 0.1);
    --black-2: rgba(255, 255, 255, 0.2);
    --black-3: rgba(255, 255, 255, 0.3);
    --black-4: rgba(255, 255, 255, 0.4);
    --black-5: rgba(255, 255, 255, 0.5);
    --black-6: rgba(255, 255, 255, 0.6);
    --black-7: rgba(255, 255, 255, 0.7);
    --black-8: rgba(255, 255, 255, 0.8);
    --black-9: rgba(255, 255, 255, 0.9);
    --black-03: rgba(255, 255, 255, 0.03);
    --black-05: rgba(255, 255, 255, 0.05);
    --shadow: 0 0 4px rgba(255, 255, 255, 0.1);
    --shadow-color: rgba(0, 0, 0, 0.1);
    --card-background: rgba(255, 255, 255, 0.10);
    --border: rgba(var(--primary-rgb), 0.1);
    --float-start: left;
    --float-end: right;
    --form-border: rgba(255, 255, 255, 0.1);
    --bg-hover: rgba(0, 0, 0, 0.2);
    --bg-white: rgba(0, 0, 0, 0.2);
    --bg-active2: #17171c;
    --header-color: rgba(255, 255, 255, 0.5);
    --header-border: rgba(255, 255, 255, 0.1);
    --input-bg: rgba(0, 0, 0, 0.2);
    --menu-color: rgba(255, 255, 255, 0.5);
    --menu-border: rgba(255, 255, 255, 0.1);
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 992px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/******variables Declaration******/
/*gradient variables*/
/*gray variables*/
/*shadow variables*/
/*float variables*/
/*white variables*/
/*black variables*/
/*header variables*/
/*menu variables*/
[dir=rtl] {
    --float-start: right;
    --float-end: left;
}

[data-theme-color=light],
[data-theme-color=glassy] {
    --main-gradient-bg: linear-gradient(72deg, #DADDE2, #ffffff 25% 40%, #ffffff 40% 80%, #DADDE2);
    --background-rgb: 241, 241, 241;
    --primary-rgb: 78, 98, 177;
    --color: #5d6162;
    --color2: #7b8191;
    --muted: #7987a1;
    --border: rgba(0, 0, 0, 0.05);
    --form-border: #cdd4e2;
    --gray-100: #f9fafb;
    --gray-200: #f2f4f5;
    --gray-300: #e6eaeb;
    --gray-400: #dbdfe1;
    --gray-500: #949eb7;
    --gray-600: #7987a1;
    --gray-700: #4d5875;
    --gray-800: #383853;
    --gray-900: #323251;
    --white-1: rgba(255, 255, 255, 0.1);
    --white-2: rgba(255, 255, 255, 0.2);
    --white-3: rgba(255, 255, 255, 0.3);
    --white-4: rgba(255, 255, 255, 0.4);
    --white-5: rgba(255, 255, 255, 0.5);
    --white-6: rgba(255, 255, 255, 0.6);
    --white-7: rgba(255, 255, 255, 0.7);
    --white-8: rgba(255, 255, 255, 0.8);
    --white-9: rgba(255, 255, 255, 0.9);
    --white-05: rgba(255, 255, 255, 0.05);
    --white-08: rgba(255, 255, 255, 0.08);
    --white-75: rgba(255, 255, 255, 0.075);
    --black: rgba(0, 0, 0, 1);
    --black-1: rgba(0, 0, 0, 0.1);
    --black-2: rgba(0, 0, 0, 0.2);
    --black-3: rgba(0, 0, 0, 0.3);
    --black-4: rgba(0, 0, 0, 0.4);
    --black-5: rgba(0, 0, 0, 0.5);
    --black-6: rgba(0, 0, 0, 0.6);
    --black-7: rgba(0, 0, 0, 0.7);
    --black-8: rgba(0, 0, 0, 0.8);
    --black-9: rgba(0, 0, 0, 0.9);
    --black-03: rgba(0, 0, 0, 0.03);
    --black-05: rgba(0, 0, 0, 0.05);
    --bg-hover: #f3f3f3;
    --dark-theme: #fff;
    --header-bg: #f1f1f1;
    --menu-bg: #f1f1f1;
    --bg-white: #f9f9f9;
    --secondary-rgb: 187, 186, 66;
}

[data-theme-color=dark] {
    --main-gradient-bg: linear-gradient(rgb(var(--background-rgb)) 0%, #121923, #121923 100%);
    --background-rgb: 20, 20, 20;
    --color: #dde5ed;
    --color2: rgba(255, 255, 255, 0.5);
    --muted: #bcc3d1;
    --border: rgba(255, 255, 255, 0.1);
    --header-bg: #1e232d;
    --menu--bg: #1e232d;
}



@font-face {
    font-family: "Open Sans";
    src: url("OpenSans-Regular.ttf");
}

@font-face {
    font-family: "Ubuntu";
    ;
    src: url("Ubuntu-Regular.ttf");
}

@media screen and (min-width: 992px) {
    .login {
        max-width: 960px;
    }
}

@media screen and (min-width: 768px) {
    .login {
        max-width: 720px;
    }
}

@media screen and (min-width: 576px) {
    .login {
        max-width: 540px;
    }
}


body {
    background: #171622 !important;
}

.content {
    padding: 30px 40px;
    text-align: center;
    background: #212130 !important;
    border-radius: 10px;
    margin: 6px auto;
    width: 40%;
}

    .content .welcome-header {
        font-size: 20px;
        padding: 10px;
        text-align: center;
        letter-spacing: 0px;
        color: var(--primary-bg-color);
        opacity: 1;
        font-weight: 900;
        text-transform: uppercase;
    }

    .content .help-desc {
        text-align: center;
        letter-spacing: 0px;
        color: #fff;
        font-weight: 900;
        font-family: system-ui;
    }

.logo > img {
    vertical-align: middle;
    border-style: none;
    width: 160px;
    text-align: center;
}

.input > h3 {
    margin: 0 0 25px;
    font-size: 26px;
    padding-top: 14px;
    text-transform: capitalize;
    padding-bottom: 14px;
    font-weight: 900;
    color: #000;
    line-height: 1.2;
    text-align: center;
    font-family: "Open Sans", sans-serif;
}

.loginbutton {
    color: #000 !important;
    background-color: var(--primary-bg-color);
    border-color: var(--primary-bg-border);
    padding: 7px 35px;
}

.join {
    margin-bottom: 20px;
    margin-top: 48px !important;
}

    .join > h5 {
        color: black;
        font-size: 1.25rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        line-height: 1.2;
        letter-spacing: 1.9;
        font-family: "Ubuntu", sans-serif;
    }

.joinbutton {
    text-transform: uppercase;
    background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
    box-shadow: 0 3px 1px -2px #000 3, 0 2px 2px #000 24, 0 1px 5px #000 1f;
    cursor: pointer;
    padding: 10px 50px 8px;
    letter-spacing: 1px;
    font-size: 15px;
    font-weight: 500;
    height: 45px;
    border-radius: 32px;
    border: none;
}

    .joinbutton:hover {
        background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
    }

.address {
    height: 70px;
    margin-bottom: 20px;
    padding: 10px;
}

    .address > p {
        font-size: 14px;
        text-align: left;
        margin-bottom: unset;
        color: #fff;
    }

    .address > span {
        float: left;
        font-size: 13px;
    }

@media (max-width: 720px) {
    .content {
        width: 90%;
        padding: 30px 10px;
    }
}

@media (max-width: 600px) {
    .content {
        width: 90%;
        margin: 10px auto;
        top: 170px;
        right:22px !important;
    }
}

@media (min-width: 1100px) {
    .content {
        margin-top: 20px;
    }
}
.bg-img {
    position: fixed;
    z-index: -1;
    inset: 0;
    opacity: 0.5;
    height: 100vh;
    width: 100vw;
    background: #fff;
}

    .bg-img .layer {
        background: #000000cf;
        position: fixed;
        z-index: 1;
        opacity: 0.9;
        height: 100vh;
        width: 100vw;
    }

    .bg-img img {
        height: 100%;
        width: 100%;
    }