: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;
}

.register-container {
    /*background-image: radial-gradient(circle, rgb(var(--background-rgb)) 0%, #121923, #121923 100%) !important;*/
    padding: 5px 5px;
    color: #fff;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
    .register-container .loginbutton {
        color: #000 !important;
        background-color: var(--primary-bg-color);
        border-color: var(--primary-bg-border);
    }
.register-container-header {
    font-weight: bolder;
    font-size: 1.5rem;
    margin: 10px 0px;
}
.register-container-buy-price {
    font-weight: bold;
}
.register-container .input-fields {
    width: 100%;
}
.register-container .add-matic-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 10px;
}
.register-container .add-matic-buttons button {
    margin: 10px;
    font-size: 14px;
    background: #f3f5f8 0% 0% no-repeat padding-box;
    box-shadow: 0px 10px 10px #ff7d16 33;
    opacity: 1;
    color: #154170;
    letter-spacing: 0px;
    opacity: 1;
    width: 110px;
}
.register-container .connect-wallet button {
    background-color: #154170;
    margin: 20px 0px;
    padding: 10px 40px;
}
.register-container .already-joined {
    font-weight: bold;
}
.register-container .btn-sign-in {
    border-radius: 30px;
    padding: 8px 30px;
    background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
}
.register-page {
    width: 70%;
    margin: 10px auto;
}