:root {
    --bg-clr: #ededed;
    --bg-clr-2: #8f8f8f;
    --color-first: light-dark(#0d0d0d, #fff);
    --color-dark:light-dark(#fff,#000);
    --bg-light: light-dark(#f9f9f9,#2f2f2f);
    --bg-light-2: light-dark(#ecf0f3,#212529);
    --bg-light-3: light-dark(#ecf0f3,#212529);
    --bg-light-4: light-dark(#ecf0f3,#212529);
    --border-color: #d9d9d9;
    --color-blue: #3e68ff;
}
html[data-bs-theme="dark"] svg {path:var(--color-first); }
html[data-bs-theme="dark"] .icon-clr {fill:var(--color-first);}
/*========== BUTTON STYLE ==================================*/
body {min-height: 100vh;}
button {text-decoration: none;}
.button {
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    text-align: center;
}
.button, input[type="submit"].button,
.btn-outline-first {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: .875rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.25rem;
    color:var(--color-first);
    padding: 6px 12px;
    min-height: 36px;
    border-radius: 9999px;
    border: 1px solid;
    flex-shrink: 0;
    border-color: var(--border-color);
    background-color: transparent;
    text-transform: capitalize;
    pointer-events: auto;
    cursor: pointer;
}
.btn-outline-first:hover {background-color: var(--bg-light);}
.btn-first {color: #ffffff;border: none;background-color: var(--color-first) !important;}
.btn-first:hover {background-color: #212121 !important;}
.no-bg-btn {
    cursor: pointer;
    padding: 0;
    margin: 0;
    border: none !important;
    background-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}
.button svg {width: 20px;height: 20px;stroke-width: 1.6px;}
/*...................................................................*/
.small-btn svg {width: 16px;height: 16px;}
.small-svg-icon, .icon-18 {width: 18px;height: 18px;stroke-width: 1.6px;}
.icon-20 {width: 20px;height: 20px;stroke-width: 1.6px;}
.text-14 {font-size: 14px;}
.text-18 {font-size: 18px;}
.clr-first {color: var(--color-first) !important;}
.clr-second {color: #515151 !important;}
.fs-09 {font-size: 0.9rem !important;}
.radius-50 {border-radius: 50px !important;}
hr {border-color: var(--border-color)}
/* ===== ===== ===== ===== ===== ===== header before login ===== ===== ===== ===== ===== ===== */
.header-before-login {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 60px;
    padding: 12px;
    box-shadow: none !important;
    transition: all 0.3s ease-in-out;
    z-index: 9;
}
.header-before-login .logo-btn {
    cursor: pointer;
    padding: 10px;
    margin: 0;
    border-radius: 8px;
    border: none !important;
    background-color: transparent;
    outline: none !important;
    box-shadow: none !important;
}
.header-before-login .logo-btn img {width: auto;height: 16px;}
.header-before-login .logo-btn .small-svg-icon, .arrow-icon {stroke: var(--bg-clr-2);}
.header-before-login .logo-btn:hover {background-color: var(--bg-clr);}
.header-before-login .login-dropdown {width: 330px;}
.header-before-login .login-dropdown .colored-img {
    width: 100%;
    height: 130px;
}
.header-before-login .helpDropdown {width: 280px;border-color: var(--border-color)}
/* ===== dropdown ===== */
.header-before-login .dropdown-item {font-size: 14px;white-space: normal;}
.header-before-login .dropdown-item:hover {background-color: var(--bg-clr);}
.header-before-login .arrow-icon {display: none;}
.header-before-login .dropdown-item:hover .arrow-icon {display: block;}
.no-toggle-after:after {display: none !important;}
/* ===== dropdown end ===== */
@media screen and (max-width: 767px) {
    .header-before-login .login-dropdown {width: 295px;}
    footer .text-14 {font-size: 12px;}
}
/* ===== ===== ===== ===== ===== ===== header before login end ===== ===== ===== ===== ===== ===== */



/*========== @media screen =================================*/
@media screen and (max-width: 1200px) {

}
@media screen and (max-width: 991px) {

}
@media screen and (max-width: 767px) {
}
/*========== @media screen END =================================*/