@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap');

:root {
    --algorand: #000;
    --algorand-rgb: 0, 0, 0;
    --avalance: #e84142;
    --avalance-rgb: 232, 65, 66;
    --badge-soft-primary-background-color: #d5e5fa;
    --badge-soft-primary-color: #1c4f93;
    --badge-soft-secondary-background-color: #e3e6ea;
    --badge-soft-secondary-color: #7d899b;
    --badge-soft-success-background-color: #ccf6e4;
    --badge-soft-success-color: #00864e;
    --badge-soft-info-background-color: #d4f2ff;
    --badge-soft-info-color: #1978a2;
    --badge-soft-warning-background-color: #fde6d8;
    --badge-soft-warning-color: #9d5228;
    --badge-soft-danger-background-color: #fad7dd;
    --badge-soft-danger-color: #932338;
    --badge-soft-light-background-color: #fefeff;
    --badge-soft-light-color: #9fa0a2;
    --badge-soft-dark-background-color: #ced1d4;
    --badge-soft-dark-color: #070f19;
    --disable-text-gray: #6c757d;
    --disable-gray: #e9ecef;
    --disable-border-gray: #ced4da;
    --footer-height: 40px;
    --footer-height-mobile: 60px;
    --emerald: #50c878;
    --ethereum: #8a93b2;
    --ethereum-rgb: 138, 147, 178;
    --gold: #d4af37;
    --header-height: 50px;
    --main-blue: #123586;
    --main-blue-bg-hover-focus: #0f2d72;
    --main-blue-bg-dropdown-toggle: #0e2a6b;
    --main-blue-border-hover-focus: #0e2a6b;
    --main-blue-border-dropdown-toggle: #0e2865;
    --main-blue-box-shadow-rgb: 54, 83, 152;
    --main-blue-link: #0e2a6b;
    --main-blue-rgb: 18, 53, 134;
    --main-gray: #4e4e4e;
    --main-gray-bg-hover-focus: #424242;
    --main-gray-bg-dropdown-toggle: #3e3e3e;
    --main-gray-border-hover-focus: #3e3e3e;
    --main-gray-border-dropdown-toggle: #3b3b3b;
    --main-gray-box-shadow-rgb: 105, 105, 105;
    --main-gray-link: #3e3e3e;
    --main-gray-rgb: 78, 78, 78;
    --main-green: #19a29a;
    --main-green-bg-hover-focus: #3cb0a9;
    --main-green-bg-dropdown-toggle: #47b5ae;
    --main-green-border-hover-focus: #30aba4;
    --main-green-border-dropdown-toggle: #30aba4;
    --main-green-box-shadow-rgb: 21, 138, 131;
    --main-green-link: #47b5ae;
    --main-green-rgb: 25, 162, 154;
    --polygon: #7b3fe4;
    --polygon-rgb: 123, 63, 228;
    --silver: #c0c0c0;
    --yellow-warning: #ffdd32;
    --yellow-warning-bg-hover-focus: #ffe251;
    --yellow-warning-bg-dropdown-toggle: #ffe45b;
    --yellow-warning-border-hover-focus: #ffe047;
    --yellow-warning-border-dropdown-toggle: #ffe047;
    --yellow-warning-box-shadow-rgb: 217, 188, 43;
    --yellow-warning-link: #ffe45b;
    --yellow-warning-rgb: 255, 221, 50;
    --yellow-warning-custom-bg: #fff6cc;
}

* {
    font-family: 'Montserrat', sans-serif;
}

html {
    font-size: 12px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 14px;
    }
}

.bg-gray {
    background-color: #f3f3f4;
}

.bg-light-main-blue {
    background-color: var(--badge-soft-primary-background-color);
}

.bg-light-main-green {
    background-color: var(--badge-soft-success-background-color);
}

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

.bg-yellow-custom {
    background-color: var(--yellow-warning-custom-bg);
}

.bg-image {
    background-image: url("../images/background.svg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

    .bg-image::before {
        content: "";
        position: fixed;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        background-color: rgba(255,255,255,0.5);
    }

div.container-not-signed {
    position: absolute;
    top: 0;
    padding-top: var(--header-height);
    padding-bottom: var(--footer-height);
}

@media (max-width: 992px) {
    div.container-not-signed {
        padding-bottom: calc(var(--header-height) + var(--footer-height));
    }
}

.not-mobile-screen {
    display: block;
}

.mobile-screen {
    display: none;
}

@media (max-width: 768px) {
    .not-mobile-screen {
        display: none;
    }

    .mobile-screen {
        display: block;
    }
}

.img-logo {
    max-height: 350px;
    max-width: 350px;
}

@media (max-width: 992px) {
    .img-logo {
        height: 100px;
    }
}

.wrap {
    width: 100%;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    box-shadow: 0 10px 34px -15px rgba(0, 0, 0, .24)
}

.login-wrap {
    width: 100%
}