a:hover,a:active,a:focus{text-decoration:none;outline:none;}
ol,ul{margin:0;}
.clear{clear:both;}
@font-face{
    font-family:'SF-UI-Display-Black';
    src:url('../fonts/sf-ui-display/sf-ui-display-black.otf')
}
@font-face{
    font-family:'SF-UI-Display-Bold';
    src:url('../fonts/sf-ui-display/sf-ui-display-bold.otf')
}
@font-face{
    font-family:'SF-UI-Display-Heavy';
    src:url('../fonts/sf-ui-display/sf-ui-display-heavy.otf')
}
@font-face{
    font-family:'SF-UI-Display-Light';
    src:url('../fonts/sf-ui-display/sf-ui-display-light.otf')
}
@font-face{
    font-family:'SF-UI-Display-Medium';
    src:url('../fonts/sf-ui-display/sf-ui-display-medium.otf')
}
@font-face{
    font-family:'SF-UI-Display-Regular';
    src:url('../fonts/sf-ui-display/SF-UI-Display-Regular.otf')
}
@font-face{
    font-family:'SF-UI-Display-Semibold';
    src:url('../fonts/sf-ui-display/sf-ui-display-semibold.otf')
}
@font-face{
    font-family:'SF-UI-Display-Thin';
    src:url('../fonts/sf-ui-display/sf-ui-display-thin.otf')
}
@font-face{
    font-family:'SF-UI-Display-Ultralight';
    src:url('../fonts/sf-ui-display/sf-ui-display-ultralight.otf')
}

:root{
	 /* FONTS */
	--font-family: "SF-UI-Display-Thin";
    --font-color-light: hsla(0, 0%, 40%, 1.0);
	--font-color: hsla(0, 0%, 27%, 1.0);
	--fw-600: 600;
    --fw-400: 400;
    --fw-300: 300;
    --fs-1: 2.5rem;
    --fs-2: 2.25rem;
    --fs-3: 2.0rem;
    --fs-4: 1.75rem;
    --fs-5: 1.5rem;
    --fs-6: 1.25rem;
    --fs-7: 1.0rem;
    --fs-8: 0.875rem;
    --fs-9: 0.75rem;
    --lh-1: 2.75rem;
    --lh-2: 2.625rem;
    --lh-3: 2.5rem;
    --lh-4: 2.25rem;
    --lh-5: 2.25rem;
    --lh-6: 1.75rem;
    --lh-7: 1.375rem;
    --lh-8: 1.125rem;
    --lh-9: 1.0rem;
	/* COMMON */
    --white: hsla(0, 0%, 100%, 1.0);
	--link-color: hsla(355, 85%, 46%, 1.0);
    --link-color-hover: hsla(355, 85%, 41%, 1.0);
    --link-color-active: hsla(355, 85%, 36%, 1.0);
	--bg-body: hsla(0, 0%, 100%, 1.0);
    --border-color: hsla(0, 0%, 0%, 0.12);
	--nav-bottom-link-color: hsla(0, 0%, 0%, 0.80);
    --footer-bg-color: hsla(208, 7%, 46%, 0.10);
    --footer-font-color-dark: hsla(0, 0%, 0%, 1.0);
    --footer-font-color: hsl(216.82deg 100% 8.63%);
    --footer-font-color-light: hsla(0, 0%, 0%, 0.60);
    --footer-link-color: hsla(0, 0%, 0%, 0.80);
    --footer-link-color-hover: hsla(355, 85%, 46%, 1.0);
    --footer-link-color-active: hsla(355, 85%, 46%, 1.0);
    --nav-bottom-bg-color: hsla(0, 0%, 100%, 1.0);
    --box-shadow: 0px 1px 2px hsla(0, 0%, 0%, 0.20);
    --nav-top-bg-color: hsl(216.82deg 100% 8.63%);
    --nav-bottom-link-color-hover: hsl(127.4deg 98.27% 45.29%);
    --nav-bottom-link-color-active: hsl(127.4deg 98.27% 45.29%);
    --nav-bottom-dropdown-bg-color: hsla(0, 0%, 100%, 1.0);
    --primary: hsl(147.49deg 98.27% 45.29%);
    --primary-dark-20:hsl(144.2deg 90.05% 39.41%);
    --primary-dark-30:hsl(128.28deg 59.79% 38.04%);
    --gray-5: hsla(208, 7%, 46%, 0.05);
    --h1-font-style: normal;
    --h1-font-weight: 400;
    --h1-font-size: 2.5rem;
    --h1-font-size-mobile: 2.25rem;
    --h1-line-height: 2.75rem;
    --h1-line-height-mobile: 2.625rem;
    --h1-font-family: "SF-UI-Display-Thin";
    --h1-color: hsla(0, 0%, 0%, 1.0);
    --h2-font-style: normal;
    --h2-font-weight: 400;
    --h2-font-size: 2.25rem;
    --h2-font-size-mobile: 2.0rem;
    --h2-line-height: 2.625rem;
    --h2-line-height-mobile: 2.5rem;
    --h2-font-family: "SF-UI-Display-Thin";
    --h2-color: hsla(0, 0%, 0%, 1.0);
    --h3-font-style: normal;
    --h3-font-weight: 400;
    --h3-font-size: 2.0rem;
    --h3-font-size-mobile: 1.75rem;
    --h3-line-height: 2.5rem;
    --h3-line-height-mobile: 2.25rem;
    --h3-font-family: "SF-UI-Display-Thin";
    --h3-color: hsl(216.82deg 100% 8.63%);
    --h4-font-style: normal;
    --h4-font-weight: 400;
    --h4-font-size: 1.75rem;
    --h4-font-size-mobile: 1.5rem;
    --h4-line-height: 2.25rem;
    --h4-line-height-mobile: 2.0rem;
    --h4-font-family: "SF-UI-Display-Thin";
    --h4-color: hsla(0, 0%, 0%, 1.0);
    --h5-font-style: normal;
    --h5-font-weight: 400;
    --h5-font-size: 1.5rem;
    --h5-font-size-mobile: 1.25rem;
    --h5-line-height: 2.0rem;
    --h5-line-height-mobile: 1.75rem;
    --h5-font-family: "SF-UI-Display-Thin";
    --h5-color: hsla(0, 0%, 0%, 1.0);
    --h6-font-style: normal;
    --h6-font-weight: 600;
    --h6-font-size: 1.25rem;
    --h6-font-size-mobile: 1.0rem;
    --h6-line-height: 1.75rem;
    --h6-line-height-mobile: 1.375rem;
    --h6-font-family: "SF-UI-Display-Thin";
    --h6-color: hsla(0, 0%, 0%, 1.0);
    --p-font-style: normal;
    --p-font-weight: 400;
    --p-font-size: 1.0rem;
    --p-line-height: 1.375rem;
    --p-font-family: "SF-UI-Display-Thin";
    --p-color: hsla(0, 0%, 27%, 1.0);
    --li-font-style: normal;
    --li-font-weight: 400;
    --li-font-size: 1.0rem;
    --li-line-height: 1.375rem;
    --li-font-family: "SF-UI-Display-Thin";
    --li-color: hsla(0, 0%, 27%, 1.0);
    --warning: hsla(42, 100%, 50%, 1.0);
    --gray-5-solid: hsla(0, 0%, 97%, 1.0);
    --gray-10-solid: hsla(0, 0%, 95%, 1.0);
    --dir-end: right;
    --gray-20: hsla(208, 7%, 46%, 0.20);
    --warning-30: hsl(144.2deg 90.05% 39.41%);
    --gray-30-solid: hsla(0, 0%, 91%, 1.0);
    --gray: hsla(208, 7%, 46%, 1.0);
    --nav-top-link-color: hsla(0, 0%, 100%, 0.80);
    --nav-top-dropdown-bg-color: hsla(0, 0%, 100%, 1.0);
    --shadow-color: hsla(0, 0%, 0%, 0.20);
    --nav-top-dropdown-link-color: hsla(0, 0%, 0%, 0.80);
    --overlay-color: hsla(0, 0%, 0%, 0.50);
    --fa-chevron-start: "›";
    --fa-chevron-end:"‹";
    --upse-gray-lt: #e9e9ec;
    --upse-gray-xlt: #fafafa;
}

body{overflow-x: hidden;height: 100%;font-style: normal;font-weight:400;font-size: 1rem;line-height: 1.375rem;
    -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
    color: var(--font-color);
    background-color: var(--bg-body);
    font-family: var(--font-family);
}
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 5px 0px;
}
h2 {
    margin: 0 0 10px 0px;
    line-height: 0 !important;
}
h1 {
    font-style: var(--h1-font-style);
    font-weight: var(--h1-font-weight);
    font-size: var(--h1-font-size);
    line-height: var(--h1-line-height);
    font-family: var(--h1-font-family);
    color: var(--h1-color);
}
h2 {
    font-style: var(--h2-font-style);
    font-weight: var(--h2-font-weight);
    font-size: var(--h2-font-size);
    line-height: var(--h2-line-height);
    font-family: var(--h2-font-family);
    color: var(--h2-color);
}
h3 {
    font-style: var(--h3-font-style);
    font-weight: var(--h3-font-weight);
    font-size: var(--h3-font-size);
    line-height: var(--h3-line-height);
    font-family: var(--h3-font-family);
    color: var(--h3-color);
}
h4 {
    font-style: var(--h4-font-style);
    font-weight: var(--h4-font-weight);
    font-size: var(--h4-font-size);
    line-height: var(--h4-line-height);
    font-family: var(--h4-font-family);
    color: var(--h4-color);
}
h5 {
    font-style: var(--h5-font-style);
    font-weight: var(--h5-font-weight);
    font-size: var(--h5-font-size);
    line-height: var(--h5-line-height);
    font-family: var(--h5-font-family);
    color: var(--h5-color);
}
p {
    margin: 0px 0px 8px 0px;
    font-style: var(--p-font-style);
    font-weight: var(--p-font-weight);
    font-size: var(--p-font-size);
    line-height: var(--p-line-height);
    font-family: var(--p-font-family);
    color: var(--p-color);
}
a, a:link, a:visited, a:hover, a:active, a:focus {
    color: var(--link-color);
    text-decoration: none;
    cursor: pointer;
    -webkit-user-drag: none;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
img {
    max-width: 100%;
    height: auto;
    vertical-align: initial;
}
.up-header{position: fixed;top: 0px;right: 0px;left: 0px;z-index: 12;}
.up-header .navbar.navbar-top {padding: 0px;background-color: var(--nav-top-bg-color);}
.margin-right-auto, .mr-auto, .me-auto {margin-right: auto !important;margin-left: initial !important;}
.margin-left-auto, .ml-auto, .ms-auto {margin-left: auto !important;margin-right: initial !important;}
.up-header .navbar.navbar-top .container .navbar-nav .nav-item,
.up-header .navbar.navbar-top .container-fluid .navbar-nav .nav-item{margin: 0px 2px;padding: 0px;}
.up-header .navbar.navbar-top .container .navbar-nav .nav-item a.nav-link{
    padding: 8px 8px;
    font-weight: var(--fw-400);
    font-size: .9375rem;
    line-height: 1.125rem;
    text-align: center;
    color: var(--nav-top-link-color);
    background-color: var(--nav-top-link-bg-color);
    border: none;
    border-radius: var(--border-radius);
}
.up-header .navbar.navbar-top .container .navbar-nav .nav-item .dropdown-menu,
.up-header .navbar.navbar-top .container-fluid .navbar-nav .nav-item .dropdown-menu {
    margin: 0px;
    padding: 10px 0px;
    min-width: auto;
    background-color: var(--nav-top-dropdown-bg-color);
    border: 0px solid var(--nav-top-dropdown-bg-color);
    border-radius: var(--border-radius);
    box-shadow: 0px 1px 5px var(--shadow-color);
}
.up-header .navbar.navbar-top .container .navbar-nav .nav-item .dropdown-menu::after,
.up-header .navbar.navbar-top .container-fluid .navbar-nav .nav-item .dropdown-menu::after {
    display: inline-block;
    position: absolute;
    top: -6px;
    left: 28px;
    right: auto;
    border-left: 6px solid rgba(0, 0, 0, 0);
    border-right: 6px solid rgba(0, 0, 0, 0);
    border-bottom: 6px solid var(--white);
    content: "";
}
.up-header .navbar.navbar-top .container .navbar-nav .nav-item .dropdown-menu a.dropdown-item{
    color: var(--nav-top-dropdown-link-color);
}
#up-nav-bottom .dropdown-toggle::after{content: none;}
#up-nav-bottom ul{margin-left: auto;}
.up-header .navbar.navbar-bottom .container .navbar-nav .nav-item a.nav-link{color: var(--nav-bottom-link-color);}
#up-header .container{max-width: 1400px;padding: 0px 20px}
.up-header .navbar.navbar-bottom .container .navbar-nav .nav-item a.nav-link.nav-search span,
.up-header .navbar.navbar-bottom .container .navbar-nav .nav-item a:link.nav-link.nav-search span{display: none;}
.up-header .navbar.navbar-bottom {
    position: relative;
    padding: 0px;
    background-color: var(--nav-bottom-bg-color);
    box-shadow: var(--box-shadow);
}
.up-header .navbar.navbar-bottom .container .navbar-nav .nav-item a.nav-link,
.up-header .navbar.navbar-bottom .container .navbar-nav .nav-item a:link.nav-link{
    padding: 22px 8px;
    font-weight: var(--fw-400);
    font-size: 1rem;
    line-height: 1.125rem;
    text-align: center;
    color: var(--nav-bottom-link-color);
    background-color: var(--nav-bottom-link-bg-color);
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: var(--border-radius);
}
.up-header .navbar.navbar-bottom .container .navbar-nav .nav-item,
.up-header .navbar.navbar-bottom .container-fluid .navbar-nav .nav-item {
    margin: 0px 4px;
    padding: 0px;
}
.up-header .navbar.navbar-bottom .container .navbar-nav .nav-item a:hover.nav-link,
.up-header .navbar.navbar-bottom .container-fluid .navbar-nav .nav-item a:hover.nav-link {
    color: var(--nav-bottom-link-color-hover);
    background-color: var(--nav-bottom-link-bg-color-hover);
    border-color: rgba(0, 0, 0, 0);
}
.up-header .navbar.navbar-bottom .container .navbar-nav .nav-item a.nav-link.nav-open-account,
.up-header .navbar.navbar-bottom .container .navbar-nav .nav-item a:link.nav-link.nav-open-account,
.up-header .navbar.navbar-bottom .container .navbar-nav .nav-item a:hover.nav-link.nav-open-account,
.up-header .navbar.navbar-bottom .container .navbar-nav .nav-item a:visited.nav-link.nav-open-account,
.up-header .navbar.navbar-bottom .container .navbar-nav .nav-item a:active.nav-link.nav-open-account,
.up-header .navbar.navbar-bottom .container .navbar-nav .nav-item a:focus.nav-link.nav-open-account,
.up-header .navbar.navbar-bottom .container-fluid .navbar-nav .nav-item a.nav-link.nav-open-account,
.up-header .navbar.navbar-bottom .container-fluid .navbar-nav .nav-item a:link.nav-link.nav-open-account,
.up-header .navbar.navbar-bottom .container-fluid .navbar-nav .nav-item a:hover.nav-link.nav-open-account,
.up-header .navbar.navbar-bottom .container-fluid .navbar-nav .nav-item a:visited.nav-link.nav-open-account,
.up-header .navbar.navbar-bottom .container-fluid .navbar-nav .nav-item a:active.nav-link.nav-open-account,
.up-header .navbar.navbar-bottom .container-fluid .navbar-nav .nav-item a:focus.nav-link.nav-open-account {
    padding: 8px 16px;
    color: var(--nav-bottom-bg-color);
    background-color: var(--primary);
    border-color: var(--primary);
}
.up-header .navbar.navbar-bottom .container .navbar-nav .nav-item a:hover.nav-link.nav-open-account,
.up-header .navbar.navbar-bottom .container-fluid .navbar-nav .nav-item a:hover.nav-link.nav-open-account {
    padding: 8px 16px;
    color: var(--nav-bottom-bg-color);
    background-color: var(--primary-dark-20);
    border: 1px solid var(--primary-dark-20);
}
.up-header .navbar.navbar-bottom .container .navbar-nav .nav-item a.nav-link.nav-login,
.up-header .navbar.navbar-bottom .container .navbar-nav .nav-item a:link.nav-link.nav-login,
.up-header .navbar.navbar-bottom .container .navbar-nav .nav-item a:hover.nav-link.nav-login,
.up-header .navbar.navbar-bottom .container .navbar-nav .nav-item a:visited.nav-link.nav-login,
.up-header .navbar.navbar-bottom .container .navbar-nav .nav-item a:active.nav-link.nav-login,
.up-header .navbar.navbar-bottom .container .navbar-nav .nav-item a:focus.nav-link.nav-login,
.up-header .navbar.navbar-bottom .container-fluid .navbar-nav .nav-item a.nav-link.nav-login,
.up-header .navbar.navbar-bottom .container-fluid .navbar-nav .nav-item a:link.nav-link.nav-login,
.up-header .navbar.navbar-bottom .container-fluid .navbar-nav .nav-item a:hover.nav-link.nav-login,
.up-header .navbar.navbar-bottom .container-fluid .navbar-nav .nav-item a:visited.nav-link.nav-login,
.up-header .navbar.navbar-bottom .container-fluid .navbar-nav .nav-item a:active.nav-link.nav-login,
.up-header .navbar.navbar-bottom .container-fluid .navbar-nav .nav-item a:focus.nav-link.nav-login {
    padding: 8px 16px;
    color: var(--primary);
    background-color: var(--nav-bottom-bg-color);
    border-color: var(--primary);
}
.up-header .navbar.navbar-bottom .container .navbar-nav .nav-item .dropdown-menu,
.up-header .navbar.navbar-bottom .container-fluid .navbar-nav .nav-item .dropdown-menu {
    padding: 10px 0px;
    min-width: 280px;
    background-color: var(--nav-bottom-dropdown-bg-color);
    border: 0px solid var(--nav-bottom-dropdown-bg-color);
    border-top: 3px solid var(--primary);
    border-radius: var(--border-radius);
    box-shadow: 0px 1px 5px var(--shadow-color);
    left: 50%;
    right: auto;
    margin: 0px;
    margin-left: -140px;
    padding: 10px 0px;
    height: auto;
}
.up-header .navbar.navbar-bottom .container .navbar-nav .nav-item .dropdown-menu::after,
.up-header .navbar.navbar-bottom .container-fluid .navbar-nav .nav-item .dropdown-menu::after {
    display: inline-block;
    position: absolute;
    top: -13px;
    left: 50%;
    right: auto;
    margin: 0px;
    margin-left: -10px;
    border-left: 10px solid rgba(0, 0, 0, 0);
    border-right: 10px solid rgba(0, 0, 0, 0);
    border-bottom: 10px solid var(--primary);
    content: "";
}

.up-header .navbar.navbar-bottom .container .navbar-nav .nav-item .dropdown-menu a.dropdown-item,
.up-header .navbar.navbar-bottom .container .navbar-nav .nav-item .dropdown-menu a:link.dropdown-item,
.up-header .navbar.navbar-bottom .container .navbar-nav .nav-item .dropdown-menu a:hover.dropdown-item,
.up-header .navbar.navbar-bottom .container .navbar-nav .nav-item .dropdown-menu a:visited.dropdown-item,
.up-header .navbar.navbar-bottom .container .navbar-nav .nav-item .dropdown-menu a:active.dropdown-item,
.up-header .navbar.navbar-bottom .container .navbar-nav .nav-item .dropdown-menu a:focus.dropdown-item,
.up-header .navbar.navbar-bottom .container-fluid .navbar-nav .nav-item .dropdown-menu a.dropdown-item,
.up-header .navbar.navbar-bottom .container-fluid .navbar-nav .nav-item .dropdown-menu a:link.dropdown-item,
.up-header .navbar.navbar-bottom .container-fluid .navbar-nav .nav-item .dropdown-menu a:hover.dropdown-item,
.up-header .navbar.navbar-bottom .container-fluid .navbar-nav .nav-item .dropdown-menu a:visited.dropdown-item,
.up-header .navbar.navbar-bottom .container-fluid .navbar-nav .nav-item .dropdown-menu a:active.dropdown-item,
.up-header .navbar.navbar-bottom .container-fluid .navbar-nav .nav-item .dropdown-menu a:focus.dropdown-item {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
    padding: 5px 20px;
    padding-right: 30px;
    font-weight: var(--fw-400);
    font-size: .875rem;
    line-height: 1.125rem;
    text-align: var(--dir-start);
    white-space: initial;
    color: var(--nav-bottom-dropdown-link-color);
    border-radius: 0px;
    cursor: pointer;
}
.up-header .navbar.navbar-bottom .container .navbar-nav .nav-item .dropdown-menu a:hover.dropdown-item,
.up-header .navbar.navbar-bottom .container-fluid .navbar-nav .nav-item .dropdown-menu a:hover.dropdown-item {
    color: var(--nav-bottom-link-color-hover);
    background-color: var(--nav-bottom-dropdown-link-bg-color-hover);
}
.up-header .navbar.navbar-bottom .container .navbar-nav .nav-item a.nav-link.nav-search,
.up-header .navbar.navbar-bottom .container .navbar-nav .nav-item a:link.nav-link.nav-search,
.up-header .navbar.navbar-bottom .container .navbar-nav .nav-item a:hover.nav-link.nav-search,
.up-header .navbar.navbar-bottom .container .navbar-nav .nav-item a:visited.nav-link.nav-search,
.up-header .navbar.navbar-bottom .container .navbar-nav .nav-item a:active.nav-link.nav-search,
.up-header .navbar.navbar-bottom .container .navbar-nav .nav-item a:focus.nav-link.nav-search,
.up-header .navbar.navbar-bottom .container-fluid .navbar-nav .nav-item a.nav-link.nav-search,
.up-header .navbar.navbar-bottom .container-fluid .navbar-nav .nav-item a:link.nav-link.nav-search,
.up-header .navbar.navbar-bottom .container-fluid .navbar-nav .nav-item a:hover.nav-link.nav-search,
.up-header .navbar.navbar-bottom .container-fluid .navbar-nav .nav-item a:visited.nav-link.nav-search,
.up-header .navbar.navbar-bottom .container-fluid .navbar-nav .nav-item a:active.nav-link.nav-search,
.up-header .navbar.navbar-bottom .container-fluid .navbar-nav .nav-item a:focus.nav-link.nav-search {
    padding: 8px 8px 4px 8px;
    color: var(--nav-bottom-link-color);
}
.up-header .navbar.navbar-bottom .container .navbar-nav .nav-item .dropdown-menu.dropdown-search,
.up-header .navbar.navbar-bottom .container-fluid .navbar-nav .nav-item .dropdown-menu.dropdown-search {
    right: -265px;
    left: auto;
    margin: 14px 0px 0px 0px;
    margin-left: -300px;
    padding: 20px;
    min-width: 560px;
    width: 560px;
}
.up-header .navbar.navbar-bottom .container .navbar-nav .nav-item .dropdown-menu.dropdown-search .search_box .search_form input.form-control,
.up-header .navbar.navbar-bottom .container-fluid .navbar-nav .nav-item .dropdown-menu.dropdown-search .search_box .search_form input.form-control {
    display: block;
    width: 100%;
    height: 42px;
    border-radius: var(--border-radius);
}
.up-header .navbar.navbar-bottom .container .navbar-nav .nav-item .dropdown-menu.dropdown-search .search_box .search_form button.searchsubmit,
.up-header .navbar.navbar-bottom .container-fluid .navbar-nav .nav-item .dropdown-menu.dropdown-search .search_box .search_form button.searchsubmit {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: auto;
    right: 21px;
    top:20px;
    margin: 1px 0px 0px 0px;
    padding: 10px 5px;
    width: 42px;
    height: 42px;
    font-size: 1.25rem;
    line-height: 1.5rem;
    color: var(--nav-bottom-dropdown-font-color-light);
    background-color: rgba(0, 0, 0, 0);
    border: none;
    box-shadow: none;
    outline: none;
    cursor: pointer;
}
.up-header .navbar.navbar-bottom .container a.btn.btn-open-account,
.up-header .navbar.navbar-bottom .container a.btn.btn-log-in,
.up-header .navbar.navbar-bottom .container a:link.btn.btn-log-in{
    float: var(--dir-end);
    padding: 6px 10px;
    width: auto!important;
    height: auto;
    font-weight: var(--fw-400);
    font-size: .875rem;
    line-height: 1.25rem;
    text-align: center;
    border-radius: 0 !important;
}



.menu-mobile {
    display: block;
    position: fixed;
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    z-index: 1043;
    margin: 0px;
    padding: 0px;
    width: 400px;
    height: 100vh;
    background-color: var(--nav-bottom-bg-color);
    overflow: hidden;
    overflow-y: auto;
    transform: translateX(-100%) translateZ(0px);
    -webkit-overflow-scrolling: touch;
}
.menu-mobile .close-button {
    position: absolute;
    top: 12px;
    right: 8px;
    margin: 0px;
    padding: 0px;
    width: 30px;
    height: 30px;
    text-align: center;
}
a.btn-close, a:link.btn-close, a:visited.btn-close, a:hover.btn-close, a:active.btn-close, a:focus.btn-close, button.btn-close, p.btn-close {
    padding: initial;
    width: initial;
    height: initial;
    background: none;
    border: none;
    border-radius: var(--border-radius);
    opacity: initial;
    box-sizing: content-box;
}
.menu-mobile .close-button a, .menu-mobile .close-button a:link, .menu-mobile .close-button a:visited, .menu-mobile .close-button a:hover, .menu-mobile .close-button a:active, .menu-mobile .close-button a:focus {
    font-size: 1.75rem;
    line-height: 1.75rem;
    color: var(--nav-bottom-link-color);
}

.menu-mobile .logo-container {
    margin: 0px;
    padding: 15px 15px 14px 15px;
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--box-shadow);
}
.menu-mobile .logo-container .brand-logo span {
    display: none !important;
    color: rgba(0, 0, 0, 0);
}
.menu-mobile .search-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 0px auto;
    padding: 10px 10px;
    width: 100%;
    height: auto;
    background-color: var(--gray-5);
}
.menu-mobile .search-container .search-box {
    position: relative;
    margin: 0px auto;
    padding: 0px;
    width: 100%;
    height: auto;
}
.menu-mobile .search-container .search-box button.btn-search-submit {
    position: absolute;
    top: 0px;
    right: 0px;
    margin: 0px;
    padding: 5px 10px;
    height: 100%;
    font-size: 1rem;
    line-height: 1.25rem;
    color: var(--nav-bottom-link-color);
    background-color: rgba(0, 0, 0, 0);
    border: none;
    box-shadow: none;
    cursor: pointer;
}
.menu-mobile ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    border-top: 1px solid var(--border-color);
}
.menu-mobile ul>li {
    display: block;
    margin: 0px;
    padding: 0px;
    font-size: 1rem;
    line-height: 1.375rem;
    text-align: var(--dir-start);
}
.menu-mobile ul>li>a, .menu-mobile ul>li>a:link, .menu-mobile ul>li>a:visited, .menu-mobile ul>li>a:hover, .menu-mobile ul>li>a:active, .menu-mobile ul>li>a:focus {
    display: block;
    padding: 9px 30px;
    font-size: 1rem;
    line-height: 1.375rem;
    text-align: var(--dir-start);
    text-decoration: none;
    color: var(--nav-bottom-dropdown-link-color);
    background-color: var(--nav-bottom-dropdown-link-bg-color);
    border-bottom: 1px solid var(--border-color);
    transition: all 150ms;
}
.menu-mobile ul>li>a.menu-log-in, .menu-mobile ul>li>a.menu-open-account, .menu-mobile ul>li>a.menu-start-application, .menu-mobile ul>li>a:link.menu-log-in, .menu-mobile ul>li>a:link.menu-open-account, .menu-mobile ul>li>a:link.menu-start-application, .menu-mobile ul>li>a:visited.menu-log-in, .menu-mobile ul>li>a:visited.menu-open-account, .menu-mobile ul>li>a:visited.menu-start-application, .menu-mobile ul>li>a:hover.menu-log-in, .menu-mobile ul>li>a:hover.menu-open-account, .menu-mobile ul>li>a:hover.menu-start-application, .menu-mobile ul>li>a:active.menu-log-in, .menu-mobile ul>li>a:active.menu-open-account, .menu-mobile ul>li>a:active.menu-start-application, .menu-mobile ul>li>a:focus.menu-log-in, .menu-mobile ul>li>a:focus.menu-open-account, .menu-mobile ul>li>a:focus.menu-start-application {
    padding: 12px 30px;
    font-size: 1.125rem;
    color: var(--footer-font-color);
}
.menu-mobile ul>li.has-submenu>a::after, .menu-mobile ul>li.has-submenu>a:link::after, .menu-mobile ul>li.has-submenu>a:visited::after, .menu-mobile ul>li.has-submenu>a:hover::after, .menu-mobile ul>li.has-submenu>a:active::after, .menu-mobile ul>li.has-submenu>a:focus::after {
    float: var(--dir-end);
    margin: 2px 0px 0px 0px;
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font: var(--fa-font-solid);
    color: var(--gray-30);
    content: var(--fa-chevron-start);
}
.menu-mobile .submenu:not(.no-transition) {
    transition: all 250ms;
}
.menu-mobile .submenu {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 400px;
    width: 100%;
    min-height: 100%;
    background-color: var(--nav-bottom-bg-color);
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.menu-mobile .submenu.opened {
    left: 0;
}
.menu-mobile p.nav-link-back {
    margin: 0px;
    padding: 0px;
    font-size: 1rem;
    line-height: 1.375rem;
    text-align: var(--dir-start);
    border-bottom: 1px solid var(--border-color);
}
.menu-mobile p {
    margin: 0px;
    padding: 0px;
    font-size: 1rem;
    line-height: 1.375rem;
    text-align: var(--dir-start);
}
.menu-mobile p.nav-link-back a, .menu-mobile p.nav-link-back a:link, .menu-mobile p.nav-link-back a:visited, .menu-mobile p.nav-link-back a:hover, .menu-mobile p.nav-link-back a:active, .menu-mobile p.nav-link-back a:focus {
    display: block;
    padding: 10px 30px;
}
.menu-mobile p.nav-link-back a::before, .menu-mobile p.nav-link-back a:link::before, .menu-mobile p.nav-link-back a:visited::before, .menu-mobile p.nav-link-back a:hover::before, .menu-mobile p.nav-link-back a:active::before, .menu-mobile p.nav-link-back a:focus::before {
    position: absolute;
    margin: 3px 0px 0px 0px;
    margin-left: -20px;
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font: var(--fa-font-solid);
    color: var(--gray-30);
    content: var(--fa-chevron-end);
}
.menu-mobile p.submenu-title {
    display: block;
    margin: 0px;
    padding: 20px 30px 4px 30px;
    font-weight: var(--fw-600);
    font-size: 1rem;
    line-height: 1.375rem;
    text-align: var(--dir-start);
    letter-spacing: .02rem;
    color: var(--nav-bottom-dropdown-font-color-dark);
    background-color: var(--gray-5);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}
.menu-mobile p.submenu-title+ul {
    margin-top: -1px;
}
.menu-mobile:not(.no-transition) {
    transition: all 250ms;
}
.menu-mobile.opened {
    transform: translateX(0px) translateZ(0px);
}
.website-overlay {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1042;
    background-color: var(--overlay-color);
}
.website-overlay.opened{display: block;}

/* Tam thoi comment de bo khoang trong khi an tam menu top */
main{/* margin-top: 100px */}
main .container {
    max-width: 1200px;
}
section {
    position: relative;
    padding-top: 40px;
    padding-bottom: 40px;
}
.hero-carousel {
    background-color: #FFFFFF;
    margin: 0px;
    padding: 0px;
    position: relative;
    width: 100%;
    height: 450px;
    min-height: 450px !important;
    z-index: 1;
}
h1 sup, h2 sup, h3 sup, h4 sup, h5 sup, h6 sup {
    margin-left: 0px;
    font-size: .625rem;
    vertical-align: super;
}
.hero-carousel .carousel, .hero-carousel .carousel .carousel-inner,
.hero-carousel .carousel .carousel-inner .carousel-item,
.hero-carousel .carousel .carousel-inner .carousel-item .container {
    height: 100% !important;
}
.hero-carousel .carousel .carousel-inner .carousel-item .container .row {
    width: 100%;
}
.hero-carousel .carousel .carousel-inner .carousel-item .container {
    padding-bottom: 75px !important;
    align-content: center !important;
    display: flex !important;
    }
.hero-carousel .carousel-screener {
    background: #d4dadc;
}
.hero-carousel .carousel-screener .hero-img-cropping-wrapper {
    position: absolute;
    width: 50%;
    height: 100%;
    right: 0;
    top: 0;
    bottom: 0;
}
.hero-carousel .hero-content {
    width: 100%;
}
.hero-carousel .hero-content .hero-headline {
    margin: 0;
    font-weight: 600;
    line-height: 1.2;
}
.hero-carousel .hero-content .hero-headline {
        font-size: 2.25rem;
}
.hero-carousel .hero-content .hero-eyebrow + .hero-headline {
    margin-top: .5rem;
}
.hero-carousel .hero-content .hero-eyebrow {
    font-size: .9753rem;
    font-weight: var(--fw-600);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.hero-carousel .hero-content .hero-subhead {
    margin: 0;
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 400;
}
.hero-carousel .hero-headline + .hero-subhead, .hero-carousel .hero-subhead + .hero-text {
    margin-top: 1rem;
}
.hero-carousel .carousel-screener .hero-eyebrow .hero-carousel .carousel-screener .hero-headline, .hero-carousel .carousel-screener .hero-subhead {
    color: #000;
}
.hero-carousel .hero-headline + .hero-cta, .hero-carousel .hero-subhead + .hero-cta {
    margin-top: 2.25rem;
}
.hero-carousel .carousel-overnight-trading .hero-headline, .hero-carousel .carousel-overnight-trading .hero-subhead {
    color: #FFF;
}
.hero-carousel .carousel-margin .hero-headline, .hero-carousel .carousel-margin .hero-subhead {
    color: #fff;
}
.hero-carousel .carousel-ibkr-desktop {
    background: #f0f0f0 url(../images/hero-banner-home-ibkr-desktop-v07-desktop.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right bottom;
}
.hero-carousel .carousel-overnight-trading {
    background: #0b1021 url(../images/hero-banner-home-overnight-trading-desktop.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right center;
}
.hero-carousel .carousel-margin {
    background: #E9ECF1 url(../images/hero-banner-home-margin-desktop.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right center;
}
.hero-carousel .carousel-indicators {
        position: absolute;
        bottom: 30px;
    }
.hero-carousel .carousel-indicators button {
    outline: none;
    background: #fff !important;
    width: 50px !important;
    height: 6px !important;
    border-radius: 0 !important;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, .45);
    margin: 0 5px;
    opacity: .5;
    border: none;
}

.hero-carousel .carousel-indicators button.active {
    opacity: 1;
}
#droplinks img {
    max-width: 50px;
    height: 50px;
}
.margin-top-15, .mt-15 {
    margin-top: 15px !important;
}
#droplinks h5 {
    font-weight: 600;
    margin-top: 0;
}
#award-winning {
    padding-top: 50px;
    padding-bottom: 20px;
}
#award-winning .award-headline {
    text-align: center;
    padding-bottom: 2rem;
}
.align-items-stretch {
    align-items: stretch !important;
}
#award-winning .awardset {
    margin: 20px;
}
.award-img-aspect {
    width: 100%;
    padding-top: 100%;
    height: 0;
    position: relative;
}
.award-img-aspect .award-img {
    position: absolute;
    height: 100% !important;
    width: 100% !important;
    top: 0;
    left: 0;
    display: flex;
}
.award-img-aspect .award-img img {
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    object-position: center;
    transform-origin: center;
}
#award-winning .award-attribute {
    text-align: center;
    font-size: 0.875rem;
}
.award-content {
    max-width: 200px;
    height: 100%;
    margin: auto;
}
#award-winning .btn-awards {
    text-align: center;
    margin: 20px;
}
#droplinks p {
    margin: 0;
    font-size: .875rem;
    color: var(--gray);
}
#droplinks p {
    line-height: 1.2rem;
}
.page-scroll a{color: var(--footer-font-color);} 
h1 sup, h2 sup, h3 sup, h4 sup, h5 sup, h6 sup {
    margin-left: 0px;
    font-size: .625rem;
    vertical-align: super;
}
.fa-ul {
    list-style-type: none;
    margin-left: var(--fa-li-margin, 2.5em);
    padding-left: 0;
}
#low-cost ul {
    padding: 10px 0 20px;
}
#low-cost ul li {
    padding-bottom: 6px;
}
.fa-ul>li {
    position: relative;
    margin-bottom: 16px;
}
.fa-ul>li .fa-li {
    position: absolute;
    left: -2em;
    width: 2em;
    text-align: center;
    line-height: inherit;
}
.fa-solid, .fas {
    font-weight: 900;
}
#low-cost ul li i.fa-check, #low-cost ul li svg.fa-check {
    color: var(--primary);
    margin-end: 15px;
    -webkit-margin-end: 15px;
    -moz-margin-end: 15px;
}
.margin-top-40, .mt-40 {
    margin-top: 40px !important;
}
#global-access #places-map {
    padding-top: 40px;
    position: relative;
}
#places-map .exch-map {
    position: relative;
    max-width: 56.4375em;
    margin-left: auto;
    margin-right: auto;
}
#places-map img {
    height: auto;
    position: relative;
    width: 100%;
    z-index: 1;
}
#places-map .map-pins {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#places-map .map-location-marker {
    background: url(../images/map-point.png) no-repeat;
    cursor: pointer;
    position: absolute;
    height: 21px;
    margin-top: -1.3125em;
    margin-left: -0.7857142857em;
    width: 21px;
    z-index: 3;
    opacity: 1.0;
}
#places-map .map-location-marker-closed {
    background: url(../images/map-point-closed.png) no-repeat;
    cursor: pointer;
    position: absolute;
    height: 21px;
    margin-top: -1.3125em;
    margin-left: -0.7857142857em;
    width: 21px;
    z-index: 3;
    opacity: 1.0;
}
#places-map .marker-nyse {
    left: 24.5%;
    top: 28%;
    -webkit-animation-delay: .3s;
    animation-delay: .3s;
}
#places-map .marker-cboe {
    left: 15%;
    top: 28%;
    -webkit-animation-delay: .1s;
    animation-delay: .1s;
}
#places-map .marker-tsx {
    left: 22.5%;
    top: 24%;
    -webkit-animation-delay: .2s;
    animation-delay: .2s;
}
#places-map .marker-bmv {
    left: 10.5%;
    top: 42%;
}
#places-map .marker-lse {
    left: 45.5%;
    top: 20%;
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
}
#places-map .marker-xmad {
    left: 44.5%;
    top: 30%;
    -webkit-animation-delay: .4s;
    animation-delay: .4s;
}
#places-map .marker-six {
    left: 47%;
    top: 26%;
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
}
#places-map .marker-bse {
    left: 51.5%;
    top: 25%;
    -webkit-animation-delay: .8s;
    animation-delay: .8s;
}
#places-map .marker-fra {
    left: 48%;
    top: 22%;
    -webkit-animation-delay: .7s;
    animation-delay: .7s;
}
#places-map .marker-tase {
    bottom: 64%;
    right: 41.0%;
  -webkit-animation-delay: .9s;
  animation-delay: .9s;
}
#places-map .marker-moex {
    left: 58.5%;
    top: 18%;
  -webkit-animation-delay: 1.0s;
  animation-delay: 1.0s;
}
#places-map .marker-nse {
    left: 70.5%;
    bottom: 52%;
  -webkit-animation-delay: 1.1s;
  animation-delay: 1.1s;
}
#places-map .marker-sgx {
  left: 79%;
  bottom: 42%;
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}
#places-map .marker-hkse {
  bottom: 56%;
  right: 15.5%;
  -webkit-animation-delay: 1.3s;
  animation-delay: 1.3s;
}
#places-map .marker-ksc {
    bottom: 66%;
    right: 12.5%;
  -webkit-animation-delay: 1.4s;
  animation-delay: 1.4s;
}
#places-map .marker-tse {
    bottom: 65.5%;
    right: 8.5%;
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
#places-map .marker-asx {
    bottom: 15%;
    right: 4.5%;
  -webkit-animation-delay: 1.6s;
  animation-delay: 1.6s;
}
.tooltip {
    font-size: .8125rem;
    line-height: 1rem;
    border-radius: 0px;
}
#places-map .map-location-marker:after {
    -webkit-animation: pulsate 3s ease-in-out infinite;
    -moz-animation: pulsate 3s ease-in-out infinite;
    animation: pulsate 3s ease-in-out infinite;
    background: transparent;
    border: 2px solid #1c7bd4;
    border-radius: 30px;
    content: "";
    display: block;
    height: 31px;
    left: -4.5px;
    opacity: 0.9;
    position: absolute;
    top: -5.0px;
    -webkit-transition: all .25s linear;
    -moz-transition: all .25s linear;
    -o-transition: all .25s linear;
    transition: all .25s linear;
    width: 31px;
    z-index: 2;
}
#places-map .map-location-marker-closed:after {
    -webkit-animation: pulsate 3s ease-in-out infinite;
    -moz-animation: pulsate 3s ease-in-out infinite;
    animation: pulsate 3s ease-in-out infinite;
    background: transparent;
    border: 2px solid var(--warning);
    border-radius: 30px;
    content: "";
    display: block;
    height: 31px;
    left: -5.5px;
    opacity: 0.9;
    position: absolute;
    top: -5.0px;
    -webkit-transition: all .25s linear;
    -moz-transition: all .25s linear;
    -o-transition: all .25s linear;
    transition: all .25s linear;
    width: 31px;
    z-index: 2;
}
@-webkit-keyframes pulsate {
  0% {
    -webkit-transform: scale(0.2);
    transform: scale(0.2);
    opacity: 1;
  }
  75% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 0;
  }
}
@-moz-keyframes pulsate {
  0% {
    -webkit-transform: scale(0.2);
    transform: scale(0.2);
    opacity: 1;
  }
  75% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 0;
  }
  100% { 
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 0;
  }
}
@keyframes pulsate {
  0% {
    -webkit-transform: scale(0.2);
    transform: scale(0.2);
    opacity: 1;
  }
  75% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 0;
  }
}
#account-types h2, #global-access .map-message {
    text-align: center;
}
#closed-label, #global-access #open-label, #local-time, #news-ticker .carousel-indicators, #page-title {
    display: none;
}
#global-access .map-message p {
    font-size: .75rem;
    font-weight: 600;
    color: var(--gray);
    text-transform: uppercase;
}
.open-color {
    color: hsla(209, 77%, 47%, 1.0);
}
.closed-color {
    font-weight: 600;
    color: hsla(36, 100%, 50%, 1.0);
}
.fw-600, .table>tbody tr.fw-600 th, .table>tbody tr.fw-600 td {
    font-weight: var(--fw-600) !important;
}
a.linkexternal, a.link-external, a.link-arrow, a.link-arrow-up, a.link-arrow-right, a.link-arrow-down, a.link-chevron, a.link-chevron-up, a.link-chevron-right, a.link-chevron-down, a.link-chevron-circle, a.link-chevron-circle-right, a.link-play, a:link.linkexternal, a:link.link-external, a:link.link-arrow, a:link.link-arrow-up, a:link.link-arrow-right, a:link.link-arrow-down, a:link.link-chevron, a:link.link-chevron-up, a:link.link-chevron-right, a:link.link-chevron-down, a:link.link-chevron-circle, a:link.link-chevron-circle-right, a:link.link-play, a:visited.linkexternal, a:visited.link-external, a:visited.link-arrow, a:visited.link-arrow-up, a:visited.link-arrow-right, a:visited.link-arrow-down, a:visited.link-chevron, a:visited.link-chevron-up, a:visited.link-chevron-right, a:visited.link-chevron-down, a:visited.link-chevron-circle, a:visited.link-chevron-circle-right, a:visited.link-play, a:hover.linkexternal, a:hover.link-external, a:hover.link-arrow, a:hover.link-arrow-up, a:hover.link-arrow-right, a:hover.link-arrow-down, a:hover.link-chevron, a:hover.link-chevron-up, a:hover.link-chevron-right, a:hover.link-chevron-down, a:hover.link-chevron-circle, a:hover.link-chevron-circle-right, a:hover.link-play, a:active.linkexternal, a:active.link-external, a:active.link-arrow, a:active.link-arrow-up, a:active.link-arrow-right, a:active.link-arrow-down, a:active.link-chevron, a:active.link-chevron-up, a:active.link-chevron-right, a:active.link-chevron-down, a:active.link-chevron-circle, a:active.link-chevron-circle-right, a:active.link-play, a:focus.linkexternal, a:focus.link-external, a:focus.link-arrow, a:focus.link-arrow-up, a:focus.link-arrow-right, a:focus.link-arrow-down, a:focus.link-chevron, a:focus.link-chevron-up, a:focus.link-chevron-right, a:focus.link-chevron-down, a:focus.link-chevron-circle, a:focus.link-chevron-circle-right, a:focus.link-play {
    padding-right: 12px;position: relative;
    color: var(--primary-dark-20);
}

a.linkexternal::after, a.link-external::after, a.link-arrow::after, a.link-arrow-up::after, a.link-arrow-right::after, a.link-arrow-down::after, a.link-chevron::after, a.link-chevron-up::after, a.link-chevron-right::after, a.link-chevron-down::after, a.link-chevron-circle::after, a.link-chevron-circle-right::after, a.link-play::after, a:link.linkexternal::after, a:link.link-external::after, a:link.link-arrow::after, a:link.link-arrow-up::after, a:link.link-arrow-right::after, a:link.link-arrow-down::after, a:link.link-chevron::after, a:link.link-chevron-up::after, a:link.link-chevron-right::after, a:link.link-chevron-down::after, a:link.link-chevron-circle::after, a:link.link-chevron-circle-right::after, a:link.link-play::after, a:visited.linkexternal::after, a:visited.link-external::after, a:visited.link-arrow::after, a:visited.link-arrow-up::after, a:visited.link-arrow-right::after, a:visited.link-arrow-down::after, a:visited.link-chevron::after, a:visited.link-chevron-up::after, a:visited.link-chevron-right::after, a:visited.link-chevron-down::after, a:visited.link-chevron-circle::after, a:visited.link-chevron-circle-right::after, a:visited.link-play::after, a:hover.linkexternal::after, a:hover.link-external::after, a:hover.link-arrow::after, a:hover.link-arrow-up::after, a:hover.link-arrow-right::after, a:hover.link-arrow-down::after, a:hover.link-chevron::after, a:hover.link-chevron-up::after, a:hover.link-chevron-right::after, a:hover.link-chevron-down::after, a:hover.link-chevron-circle::after, a:hover.link-chevron-circle-right::after, a:hover.link-play::after, a:active.linkexternal::after, a:active.link-external::after, a:active.link-arrow::after, a:active.link-arrow-up::after, a:active.link-arrow-right::after, a:active.link-arrow-down::after, a:active.link-chevron::after, a:active.link-chevron-up::after, a:active.link-chevron-right::after, a:active.link-chevron-down::after, a:active.link-chevron-circle::after, a:active.link-chevron-circle-right::after, a:active.link-play::after, a:focus.linkexternal::after, a:focus.link-external::after, a:focus.link-arrow::after, a:focus.link-arrow-up::after, a:focus.link-arrow-right::after, a:focus.link-arrow-down::after, a:focus.link-chevron::after, a:focus.link-chevron-up::after, a:focus.link-chevron-right::after, a:focus.link-chevron-down::after, a:focus.link-chevron-circle::after, a:focus.link-chevron-circle-right::after, a:focus.link-play::after {
    position: relative;
    right: -8px;
    font-size: 90%;
    white-space: nowrap;
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font: var(--fa-font-solid);
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
a.link-chevron-circle-right::after, a:link.link-chevron-circle-right::after, a:visited.link-chevron-circle-right::after, a:hover.link-chevron-circle-right::after, a:active.link-chevron-circle-right::after, a:focus.link-chevron-circle-right::after {
    content:"›";font-size: 12px;background-color: var(--primary-dark-20);color:#fff;display: flex;align-items: center;justify-content: center;
    width:16px;height: 16px;border-radius: 100%;position: absolute;top:50%;transform: translateY(-50%);
}
a.link-chevron-right::after, a:link.link-chevron-right::after, a:visited.link-chevron-right::after, a:hover.link-chevron-right::after, a:active.link-chevron-right::after, a:focus.link-chevron-right::after {
    content:"›";font-size: 12px;color: var(--primary-dark-20);
}
a:hover.link-arrow::after, a:hover.link-arrow-right::after, a:hover.link-chevron::after, a:hover.link-chevron-up::after, a:hover.link-chevron-right::after, a:hover.link-chevron-down::after, a:hover.link-chevron-circle::after, a:hover.link-chevron-circle-right::after {
    right: -16px;
}
.margin-bottom-20, .mb-20 {
    margin-bottom: 20px !important;
}
.mb-3 {
    margin-bottom: 1rem !important;
}
#trading-technology-section h2 {
    color: var(--h5-color);
}
.fs-2, .table>tbody tr.fs-2 th, .table>tbody tr.fs-2 td {
    font-size: var(--fs-2) !important;
    line-height: var(--lh-2) !important;
}
.fw-300, .table>tbody tr.fw-300 th, .table>tbody tr.fw-300 td {
    font-weight: var(--fw-300) !important;
}
.disclosure-indicator.sup {
    font-weight: var(--fw-400);
    font-size: .625rem;
    color: inherit;
    vertical-align: super;
    inset-block-start: -0.5em;
    position: relative;
    inset-inline-start: 2px;
    line-height: 0;
}
.margin-top-20, .mt-20 {
    margin-top: 20px !important;
}
.margin-bottom-0, .margin-bottom-none, .no-margin-bottom, .mb-0 {
    margin-bottom: 0px !important;
}
a.btn-secondary{
    padding: 10px 20px;
    color: var(--white);
    background-color: var(--primary-dark-20);
    border: 1px solid var(--primary-dark-20);
}
.padding-bottom-10, .pb-10 {
    padding-bottom: 10px !important;
}
#account-types h2 {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 5px;
    font-weight: 300;
}
#account-types p {
    font-size: 0.875rem;
    text-align: center;
}
#account-types p a, #account-types p a:link, #account-types p a:visited, #account-types p a:hover, #account-types p a:active, #account-types p a:focus {
    color: var(--dark-70);
    text-decoration: none;
}
#account-types p a img {
    height: 60px;
    display: block;
    margin: 20px auto;
}
#three-steps {
    background-image: url(../images/candlestick-bkgd.jpg);
    background-size: cover;
    background-position: 50%;
    min-height: 330px;
}
.margin-bottom-30, .mb-30 {
    margin-bottom: 30px !important;
}
#three-steps h3, #three-steps h4, #three-steps h5, #three-steps p {
    color: var(--white);
    text-align: center;
    font-weight: 300;
}
#three-steps h5 {
    font-weight: 600;
    text-transform: uppercase;
}

a.btn-open-account,a.btn-secondary {
    padding: 8px 16px;
    color: var(--white);
    background-color: var(--primary-dark-20);
    border: 1px solid var(--primary-dark-20);
}
a.btn-open-account:hover,a.btn-secondary:hover {
    padding: 8px 16px;
    color: var(--white);
    background-color: var(--primary-dark-30);
    border: 1px solid var(--primary-dark-30);
}
.disclosure {
    margin: 0px;
    padding: 40px;
    background-color: var(--gray-5);
}
.disclosure p {
    margin: 0px 0px 8px 0px;
    font-size: .8125rem;
    line-height: 1.125rem;
}
.disclosure h1, .disclosure h2, .disclosure h3, .disclosure h4, .disclosure h5, .disclosure h6, .disclosure p, .disclosure li, .disclosure sup, .disclosure th, .disclosure td, .disclosure label, .disclosure input, .disclosure select, .disclosure textarea {
    color: var(--font-color-light);
}
.disclosure ul, .disclosure ol {
    margin: 5px 0px;
    padding: 0px;
}
.disclosure ul li, .disclosure ol li {
    margin: 0px 0px 10px 0px;
    margin-left: 15px;
    padding: 0px;
    padding-left: 10px;
    font-size: .8125rem;
    line-height: 1.125rem;
}
.disclosure a, .disclosure a:link, .disclosure a:visited, .disclosure a:hover, .disclosure a:active, .disclosure a:focus {
    color: var(--font-color-light);
    text-decoration: underline;
}
.disclosure a:hover {
    color: var(--link-color-hover);
    text-decoration: none;
}
#final-cta {background-color: var(--gray-5-solid);}

/*22*/
.hero {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0px;
    padding: 0px;
    width: 100%;
    min-height: 320px !important;
    background-color: var(--gray-30-solid);
    background-image: linear-gradient(135deg, var(--gray-30-solid) 0%, var(--gray-10-solid) 100%);
    background-image: -moz-linear-gradient(135deg, var(--gray-30-solid) 0%, var(--gray-10-solid) 100%);
    background-image: -webkit-linear-gradient(135deg, var(--gray-30-solid) 0%, var(--gray-10-solid) 100%);
    overflow: hidden;
}
.bg-black {
    background-color: var(--black) !important;
}
figure {
    margin: 0 0 1rem;
}
.hero.hero-bg-wrap figure.hero-bg-img {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
    width: 100%;
    height: 100%;
}
[dir=ltr] .d-ltr-none {
    display: none;
}
.hero.hero-bg-wrap figure.hero-bg-img img {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.hero .hero-content {
    position: relative;
    z-index: 3;
    padding: 40px 0px;
}
.hero.hero-dark .hero-content h2, .hero.hero-dark .hero-content p {
    color: var(--white);
}
.hero .hero-content p.eyebrow {
    margin: 0px 0px 10px 0px;
    font-weight: var(--fw-600);
    font-size: .9375rem;
    line-height: 1.125rem;
    letter-spacing: .125rem;
}
.hero .hero-content h2 {
    margin: 0px;
    font-weight: var(--fw-600);
    font-size: var(--h1-font-size);
    line-height: var(--h1-line-height);
}
.hero.hero-dark .hero-content h2, .hero.hero-dark .hero-content p {
    color: var(--white);
}
.hero .hero-content h2+p.subheading, .hero .hero-content h2+p {
    margin: 10px 0px 0px 0px;
}
.hero .hero-content p+p {
    margin: 15px 0px 0px 0px;
}

.pb-4 {
    padding-bottom: 1.5rem !important;
}
.text-center, .ta-center {
    text-align: center !important;
}
.nav {
    --bs-nav-link-padding-x: 1rem;
    --bs-nav-link-padding-y: 0.5rem;
    --bs-nav-link-font-weight: ;
    --bs-nav-link-color: var(--bs-link-color);
    --bs-nav-link-hover-color: var(--bs-link-hover-color);
    --bs-nav-link-disabled-color: #6c757d;
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
.nav-tabs {
    --bs-nav-tabs-border-width: 1px;
    --bs-nav-tabs-border-color: #dee2e6;
    --bs-nav-tabs-border-radius: 0.375rem;
    --bs-nav-tabs-link-hover-border-color: #e9ecef #e9ecef #dee2e6;
    --bs-nav-tabs-link-active-color: #495057;
    --bs-nav-tabs-link-active-bg: #fff;
    --bs-nav-tabs-link-active-border-color: #dee2e6 #dee2e6 #fff;
    border-bottom: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color);
}
.nav-tabs {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: nowrap;
    align-content: center;
    align-items: stretch;
    justify-content: flex-start;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: auto;
    border-bottom: none;
    overflow-x: auto;
    overflow-y: hidden;
    box-sizing: border-box;
}
.nav-tabs.nav-lines {
    margin: 0px;
    padding: 0px;
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
}
.nav-tabs>li, .nav-tabs .nav-item {
    display: flex;
    flex-basis: auto;
    margin: 0px;
    margin-right: -1px;
    padding: 0px;
    width: auto;
    border: none;
}
.nav-tabs.nav-lines>li, .nav-tabs.nav-lines .nav-item {
    margin: 2px 0px 0px 0px;
}
.nav-tabs.nav-lines>li>a, .nav-tabs.nav-lines>li>a:link, .nav-tabs.nav-lines>li>a:visited, .nav-tabs.nav-lines>li>a:active, .nav-tabs.nav-lines>li>a:hover, .nav-tabs.nav-lines>li>a:focus, .nav-tabs.nav-lines>li .nav-link, .nav-tabs.nav-lines .nav-item>a, .nav-tabs.nav-lines .nav-item>a:link, .nav-tabs.nav-lines .nav-item>a:visited, .nav-tabs.nav-lines .nav-item>a:active, .nav-tabs.nav-lines .nav-item>a:hover, .nav-tabs.nav-lines .nav-item>a:focus, .nav-tabs.nav-lines .nav-item .nav-link {
    align-items: flex-end;
    justify-content: center;
    padding: 10px 15px 5px 15px;
    font-weight: 400;
    font-size: .875rem;
    line-height: 1.125rem;
    text-align: center;
    white-space: nowrap;
    color: var(--font-color-light);
    background-color: rgba(0, 0, 0, 0);
    border: none;
    border-bottom: 3px solid rgba(0, 0, 0, 0);
    cursor: pointer;
}
.nav-tabs.nav-lines>li.active>a, .nav-tabs.nav-lines>li.active>a:hover, .nav-tabs.nav-lines>li.active>a:focus, .nav-tabs.nav-lines>li .nav-link.active, .nav-tabs.nav-lines .nav-item.active>a, .nav-tabs.nav-lines .nav-item.active>a:hover, .nav-tabs.nav-lines .nav-item.active>a:focus, .nav-tabs.nav-lines .nav-item .nav-link.active {
    font-weight: var(--fw-600);
    color: var(--font-color-dark);
    background-color: rgba(0, 0, 0, 0);
    border-color: var(--primary);
}
.nav-tabs+.tab-content {
    position: relative;
    z-index: 1;
    margin: -1px 0px 0px 0px;
    padding: 20px 0px;
    border-top: 1px solid var(--border-color);
}
.fade {
    transition: opacity .15s linear;
}
.tab-content>.tab-pane {
    display: none;
}
.tab-content>.active {
    display: block;
}
.pt-4 {
    padding-top: 1.5rem !important;
}
.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.875rem;
}
.tile {
    background: var(--gray-5-solid);
    text-align: center;
    padding: 3rem;
    display: flex;
    flex-direction: column;
}
svg {
    display: block;
    width: 40px;
    height: 52px;
    margin: 0px auto 5px;
    fill: var(--primary-dark-20);
    transform: scale(1.7);
}
img, svg {
    vertical-align: middle;
}
.tile-icon + .tile-header, .tile-content + .tile-link {
    margin-top: 1rem;
}
.tile-header {
    font-weight: 600;
}
p.tile-content {
    margin-bottom: 1.5rem;
}
strong {
    font-weight: var(--fw-600);
}
.padding-10, .p-10 {
    padding: 10px !important;
}

.mt-4 {
    margin-top: 1.5rem !important;
}
.cta-grid {
    display: grid;
    gap: 1.875rem;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.cta-grid-item {
    height: 0;
    padding-bottom: 54%;
    position: relative;
}
.cta-grid-aspect {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    display: flex;
    z-index: 1;
}
.cta-grid-content {
    padding: 2rem;
    align-self: flex-end;
}
.cta-grid-content h3 {
    color: var(--black);
    font-weight: var(--fw-600);
    font-size: 1.25rem;
    line-height: 1.625rem;
}
.cta-list {
    display: grid;
    gap: .5rem;
    grid-template-columns: 1fr 1fr;
}
.mt-3 {
    margin-top: 1rem !important;
}
.cta-list img {
    height: 40px;
}
.fs-normal, .text-normal, .table>tbody tr.fs-normal th, .table>tbody tr.fs-normal td, .table>tbody tr.text-normal th, .table>tbody tr.text-normal td {
    font-style: normal !important;
}
.fw-normal, .text-normal, .table>tbody tr.fw-normal th, .table>tbody tr.fw-normal td, .table>tbody tr.text-normal th, .table>tbody tr.text-normal td {
    font-weight: var(--fw-400) !important;
}
.cta-grid-img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    z-index: 0;
}
.cta-grid-img .r-img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    object-fit: cover;
    object-position: center end;
}
.disclosure {
    background-color: var(--gray-5);
}
.disclosure {
    margin: 0px;
    padding: 40px;
    background-color: var(--gray-5);
}
.disclosure p {
    font-size: .8125rem;
    line-height: 1.125rem;
}
.disclosure h1, .disclosure h2, .disclosure h3, .disclosure h4, .disclosure h5, .disclosure h6, .disclosure p, .disclosure li, .disclosure sup, .disclosure th, .disclosure td, .disclosure label, .disclosure input, .disclosure select, .disclosure textarea {
    color: var(--font-color-light);
}
.disclosure ul, .disclosure ol {
    margin: 5px 0px;
    padding: 0px;
}
.disclosure ul li, .disclosure ol li {
    margin: 0px 0px 10px 0px;
    margin-left: 15px;
    padding: 0px;
    padding-left: 10px;
    font-size: .8125rem;
    line-height: 1.125rem;
}
.disclosure h1, .disclosure h2, .disclosure h3, .disclosure h4, .disclosure h5, .disclosure h6, .disclosure p, .disclosure li, .disclosure sup, .disclosure th, .disclosure td, .disclosure label, .disclosure input, .disclosure select, .disclosure textarea {
    color: var(--font-color-light);
}
.disclosure a, .disclosure a:link, .disclosure a:visited, .disclosure a:hover, .disclosure a:active, .disclosure a:focus {
    color: var(--font-color-light);
    text-decoration: underline;
}
.d-ltr-none {
    display: none;
}

/*333*/
.btn.btn-app {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    border-radius: 4px;
    padding-top: .25rem;
    padding-right: .75rem;
    padding-bottom: .25rem;
    padding-left: .5rem;
    width: auto;
}
.btn-app.btn-app-ibkr {
    border:solid 1px var(--primary);
    background-color: #fff;
    color: var(--btn-tertiary-color);
}
.btn-app-ibkr .btn-app-content-secondary,
.btn-app-ibkr .btn-app-content-primary {
    color: #004228;
}
.btn-app-content-secondary {
    font-size: .5rem;
}
.btn-app-content-primary {
    font-size: .875rem;
    font-weight: var(--fw-600);
}
.btn-app-content-secondary, .btn-app-content-primary {
    display: block;
    text-align: left;
    line-height: 1;
}
.btn-app.btn-app-ibkr:active{
    background: var(--primary-dark-20);
}
.btn-app.btn-app-ibkr:hover{
    background: var(--primary-dark-20);
}
.btn-app.btn-app-ibkr:hover .btn-app-content-primary,
.btn-app.btn-app-ibkr:active .btn-app-content-primary,
.btn-app.btn-app-ibkr:hover .btn-app-content-secondary,
.btn-app.btn-app-ibkr:active .btn-app-content-secondary{color: #fff;}
.bg-gray-10-solid, .bg-grey-10-solid {
    background-color: var(--gray-10-solid) !important;
}
.padding-right-20, .pr-20, .pe-20 {
    padding-right: 20px !important;
}
#fif .main-img {
    padding: 40px 0 40px;
}
.shadow {
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;
}
.justify-content-center {
    justify-content: center !important;
}
.dflex {
    display: flex;
    align-items: center;
    justify-content: center;
}
#progress {
    margin: 80px 0;
}
.btn-video {
    min-width: 280px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-video i,.btn-secondary.btn-wide i{margin: 0px 6px}

/*/44*/
.hero.hero-side-nav .container {
    max-width: 100% !important;
}
.hero .container {
    max-width: 1400px !important;
}
.hero.hero-side-nav {
    margin: 0px auto;
    max-width: 1400px;
}
.hero {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0px;
    padding: 0px;
    width: 100%;
    min-height: 320px !important;
    background-color: var(--gray-30-solid);
    background-image: linear-gradient(135deg, var(--gray-30-solid) 0%, var(--gray-10-solid) 100%);
    background-image: -moz-linear-gradient(135deg, var(--gray-30-solid) 0%, var(--gray-10-solid) 100%);
    background-image: -webkit-linear-gradient(135deg, var(--gray-30-solid) 0%, var(--gray-10-solid) 100%);
    overflow: hidden;
}
.hero.hero-side-nav figure.hero-bg-img img {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero.hero-side-nav .ibkr-sidebar {
    position: relative;
    margin-left: -16px;
    border-right: 3px solid var(--bg-body);
}
.ibkr-sidebar {
    position: relative;
    z-index: 1;
    min-height: 320px;
    height: 100%;
    background: var(--gray-5-solid);
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.ibkr-sidebar ul {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: auto;
    white-space: normal;
    overflow-x: none;
}
.ibkr-sidebar ul li {
    display: inline-block;
    margin: 0px;
    padding: 0px;
    width: 100%;
    box-sizing: border-box;
}
.ibkr-sidebar ul li a, .ibkr-sidebar ul li a:link, .ibkr-sidebar ul li a:visited, .ibkr-sidebar ul li a:hover, .ibkr-sidebar ul li a:active, .ibkr-sidebar ul li a:focus {
    display: block;
    padding: 12px 16px;
    padding-left: 24px;
    font-weight: var(--fw-600);
    font-size: 1rem;
    text-align: start;
    text-decoration: none;
    color: var(--font-color);
    background-color: var(--gray-5);
    border-bottom: 3px solid var(--bg-body);
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.ibkr-sidebar ul li.active>a {
    color: var(--font-color-dark);
    background-color: var(--gray-20);
}
.hero .hero-content {
    position: relative;
    z-index: 3;
    padding: 40px 0px;
}
.hero.hero-side-nav .hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px;
    height: 100%;
}
.hero .hero-content h2 {
    margin: 0px;
    font-weight: var(--fw-600);
    font-size: var(--h1-font-size);
    line-height: var(--h1-line-height);
}
.hero h2 {
    color: var(--black);
}
.hero .hero-content ul {
    margin: 20px 0px 0px 0px;
}
.hero .hero-content ul.checklist li, .hero .hero-content ul.check-list li, .hero .hero-content ul.checklist-circle li, .hero .hero-content ul.check-list-circle li {
    margin: 0px 0px 16px 0px;
    margin-left: 8px;
    padding-left: 30px;
}
.hero .hero-content ul li {
    margin-left: 20px;
    padding-left: 0px;
}
ul.checklist li, ul.check-list li, ul.checklist-circle li, ul.check-list-circle li, ol.checklist li, ol.check-list li, ol.checklist-circle li, ol.check-list-circle li {
    position: relative;
    margin: 0px 0px 25px 0px;
    padding: 0px;
    padding-left: 30px;
}
.checklist-circle a {
    color: var(--black);
}
.ibkr-sidebar ul li a:hover {
    color: var(--font-color-dark);
    background-color: var(--gray-20);
}
.margin-right-20, .mr-20, .me-20 {
    margin-right: 20px !important;
}
.btn-outline.btn-tertiary:not(:disabled):not(.disabled).active, .btn-outline.btn-tertiary:not(:disabled):not(.disabled):active, .btn-outline.btn-tertiary .show>.btn-tertiary.dropdown-toggle, .btn-outline.btn-tertiary:not([href]):not([tabindex]):not(:disabled):not(.disabled).active, .btn-outline.btn-tertiary:not([href]):not([tabindex]):not(:disabled):not(.disabled):active, .btn-outline.btn-tertiary:not([href]):not([tabindex]) .show>.btn-tertiary.dropdown-toggle {
    color: var(--btn-tertiary-border-color-active) !important;
    background-color: rgba(0, 0, 0, 0) !important;
    border-color: var(--btn-tertiary-border-color-active) !important;
}
.btn-tertiary:not(:disabled):not(.disabled).active, .btn-tertiary:not(:disabled):not(.disabled):active, .btn-tertiary .show>.btn-tertiary.dropdown-toggle, .btn-tertiary:not([href]):not([tabindex]):not(:disabled):not(.disabled).active, .btn-tertiary:not([href]):not([tabindex]):not(:disabled):not(.disabled):active, .btn-tertiary:not([href]):not([tabindex]) .show>.btn-tertiary.dropdown-toggle {
    color: var(--btn-tertiary-color-active) !important;
    background-color: var(--btn-tertiary-bg-color-active) !important;
    border-color: var(--btn-tertiary-border-color-active) !important;
}
.btn-outline.btn-tertiary, .btn-outline.btn-tertiary:not([href]):not([tabindex]) {
    color: var(--btn-tertiary-border-color) !important;
    background-color: rgba(0, 0, 0, 0) !important;
    border-color: var(--btn-tertiary-border-color) !important;
    border-radius: 0;
}

.calc-box {
    border: 1px solid var(--border-color);
    background-color: var(--gray-5-solid);
    padding: 20px;
}
.p-3 {
    padding: 1rem !important;
}
.d-flex {
    display: flex !important;
}
h5 {
    font-size: 1.125rem;
}
.margin-top-0, .margin-top-none, .no-margin-top, .mt-0 {
    margin-top: 0px !important;
}
.p-3 {
    padding: 1rem !important;
}
.justify-content-start {
    justify-content: flex-start !important;
}
.flex-wrap {
    flex-wrap: wrap !important;
}
.margin-right-40, .mr-40, .me-40 {
    margin-right: 40px !important;
}
.calc-box .calc-flex-end {
    display: flex;
    align-self: end;
}
.margin-bottom-20, .mb-20 {
    margin-bottom: 20px !important;
}
.margin-right-10, .mr-10, .me-10 {
    margin-right: 10px !important;
}
.ibkr-pro-lite-toggle input[type=radio] {
    margin-top: 0px;
    margin-bottom: 0px;
    margin-start: 10px;
    -webkit-margin-start: 10px;
    -moz-margin-start: 10px;
    margin-end: 5px;
    -webkit-margin-end: 5px;
    -moz-margin-end: 5px;
}
input[type=radio], input[type=checkbox] {
    padding: 0px;
}
input {
    margin: 0px;
    padding: var(--input-pt) var(--input-pe) var(--input-pb) var(--input-ps);
    width: auto;
    height: auto;
    font-style: var(--input-font-style);
    font-weight: var(--input-font-weight);
    font-size: var(--input-font-size);
    line-height: var(--input-line-height);
    font-family: var(--input-font-family);
    color: var(--input-color);
    background-color: var(--input-bg-color);
    border: 1px solid var(--input-border-color);
    border-radius: var(--border-radius);
}
.calc-box .btn-calculate {
    min-width: 220px;
    margin: 30px 0;
    color: #fff;border-radius: 0;
}

.notes, .notes-sm {
    margin: 20px 0px 0px 0px;
    padding: 40px;
    background-color: var(--gray-5-solid);;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
}
.padding-bottom-20, .pb-20 {
    padding-bottom: 20px !important;
}
.margin-top-10, .mt-10 {
    margin-top: 10px !important;
}
#margin-rates {
    background: var(--gray-5-solid) !important;
}
.padding-bottom-60, .pb-60 {
    padding-bottom: 60px !important;
}
.padding-top-40, .pt-40 {
    padding-top: 40px !important;
}
#margin-rates .table-responsive {
    margin: 10px 0px;
    padding: 2px;
    background-color: transparent;
    border: none;
    font-size: 1.125rem;
    border-top: 1px solid var(--border-color);
}
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
#margin-rates.table>thead {
    vertical-align: bottom;
}
#margin-rates .table-responsive th {
    background-color: transparent;
    color: var(--gray);
    font-size: 1.125rem;
    font-weight: 600;
}
.table>thead tr th[align=right] {
    text-align: var(--dir-end) !important;
}
#margin-rates .featuredrow {
    background-color: var(--light);
    border: 3px solid var(--primary);
}

.lh-5, .table>tbody tr.lh-5 th, .table>tbody tr.lh-5 td {
    line-height: var(--lh-5) !important;
}
ul li, ol li {
    margin: 0px 0px 10px 0px;
    margin-left: 30px;
    padding: 0px;
    padding-left: 10px;
    font-style: var(--li-font-style);
    font-weight: var(--li-font-weight);
    font-size: var(--li-font-size);
    line-height: var(--li-line-height);
    font-family: var(--li-font-family);
    color: var(--li-color);
}
.btn-secondary.btn-wide,.btn-secondary.btn-wide:active {
    min-width: 350px;
    background-color: transparent;
    color: var(--primary-dark-30);
    border-radius: 0;
}
.padding-40, .p-40 {
    padding: 40px !important;
}
.margin-bottom-40, .mb-40 {
    margin-bottom: 40px !important;
}
.margin-top-80, .mt-80 {
    margin-top: 80px !important;
}
.translated-image {
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-end: 0;
    -webkit-padding-end: 0;
    -moz-padding-end: 0;
    padding-start: 2rem;
    -webkit-padding-start: 2rem;
    -moz-padding-start: 2rem;
    background-color: #038ed1;
}
.text-left, .text-start, .ta-start {
    text-align: var(--dir-start) !important;
}
.fs-8, .table>tbody tr.fs-8 th, .table>tbody tr.fs-8 td {
    font-size: var(--fs-8) !important;
    line-height: var(--lh-8) !important;
}
.gray, .text-gray, .grey, .text-grey {
    color: var(--gray) !important;
}
.ibkr-pro-styled span {
    color: #ff3445;
}
.ibkr-lite-styled span {
    color: #00a5ff;
}
.table.table-striped>tbody>tr:nth-of-type(even) {
    background-color: rgba(0, 0, 0, 0);
}
.table-bordered>:not(caption)>* {
    border-width: 1px 0;
}
.RUB-inactive {
    border-top: 4px solid var(--warning-30) !important;
    border-bottom: 4px solid var(--warning-30) !important;
}
a#toTop{
    display: none;
    position: fixed;
    bottom: 15px;
    right: 15px;
    z-index: 600;
    margin: 0px;
    padding: 0px;
    width: 36px;
    height: 36px;
    text-decoration: none;
    text-indent: -999px;
    background: url(../images/arrow-scroll-up.png) no-repeat 0px 0px;
    border: none;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    overflow: hidden;
    outline: none;
}
a#toTop:hover{background-position: bottom;}
footer{position: relative;margin: 0px;padding: 50px 0px;background-color: var(--footer-bg-color);border-top: 1px solid var(--border-color);}
footer .container .footer-site-links ul, footer .container .footer-site-links ol, footer .container .footer-disclosure-links ul, footer .container .footer-disclosure-links ol, footer .container-fluid .footer-site-links ul, footer .container-fluid .footer-site-links ol, footer .container-fluid .footer-disclosure-links ul, footer .container-fluid .footer-disclosure-links ol {
    margin: 0px;
    padding: 0px;
    list-style: none;
}
footer .container .footer-site-links ul li{margin: 0;padding: 0}
footer .container p, footer .container li, footer .container sup, footer .container th, footer .container td, footer .container label, footer .container input, footer .container select, footer .container textarea, footer .container-fluid p, footer .container-fluid li, footer .container-fluid sup, footer .container-fluid th, footer .container-fluid td, footer .container-fluid label, footer .container-fluid input, footer .container-fluid select, footer .container-fluid textarea {
    font-weight: var(--fw-400);
    /*font-size: .8125rem;*/
    font-size: 0.9rem;
    line-height: 1.25rem;
    color: var(--footer-font-color);
}
footer .container a, footer .container a:link, footer .container a:hover, footer .container a:visited, footer .container a:active, footer .container a:focus, footer .container-fluid a, footer .container-fluid a:link, footer .container-fluid a:hover, footer .container-fluid a:visited, footer .container-fluid a:active, footer .container-fluid a:focus {
    text-decoration: underline;
    color: var(--footer-link-color);
}
footer .container a:active, footer .container-fluid a:active {
    text-decoration: none;
    color: var(--footer-link-color-active);
}
footer .container a:hover, footer .container-fluid a:hover {
    text-decoration: underline;
    color: var(--footer-link-color-hover);
}
footer .container .footer-site-links p, footer .container .footer-disclosure-links p, footer .container-fluid .footer-site-links p, footer .container-fluid .footer-disclosure-links p {
    margin: 20px 0px 5px 0px;
    font-weight: var(--fw-600);
}
footer .container .footer-site-links a, footer .container .footer-site-links a:link, footer .container .footer-site-links a:hover, footer .container .footer-site-links a:visited, footer .container .footer-site-links a:active, footer .container .footer-site-links a:focus, footer .container .footer-disclosure-links a, footer .container .footer-disclosure-links a:link, footer .container .footer-disclosure-links a:hover, footer .container .footer-disclosure-links a:visited, footer .container .footer-disclosure-links a:active, footer .container .footer-disclosure-links a:focus, footer .container-fluid .footer-site-links a, footer .container-fluid .footer-site-links a:link, footer .container-fluid .footer-site-links a:hover, footer .container-fluid .footer-site-links a:visited, footer .container-fluid .footer-site-links a:active, footer .container-fluid .footer-site-links a:focus, footer .container-fluid .footer-disclosure-links a, footer .container-fluid .footer-disclosure-links a:link, footer .container-fluid .footer-disclosure-links a:hover, footer .container-fluid .footer-disclosure-links a:visited, footer .container-fluid .footer-disclosure-links a:active, footer .container-fluid .footer-disclosure-links a:focus {
    display: inline-block;
    padding: 3px 0px;
    text-decoration: none;
}
footer .container sup, footer .container-fluid sup {
    font-size: .625rem;
    line-height: 1.125rem;
}
footer .container p{ margin: 0px 0px 8px 0px;}
footer .container{max-width: 1400px;}
footer .container .footer-site-links{margin: 40px 0px 0px 0px;border-top: 1px solid var(--border-color);}
footer .container .footer-disclosure-links,
footer .container-fluid .footer-disclosure-links {
    margin: 40px 0px 0px 0px;
    padding: 10px 0px;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}
footer .container .footer-disclosure-links ul,
footer .container-fluid .footer-disclosure-links ul {
    text-align: center;
}
footer .container .footer-disclosure-links ul li,
footer .container-fluid .footer-disclosure-links ul li {
    display: inline-block;
    margin: 0px;
    padding: 0px;
}
footer .container .footer-site-links a, footer .container .footer-site-links a:link,
footer .container .footer-site-links a:hover, footer .container .footer-site-links a:visited,
footer .container .footer-site-links a:active, footer .container .footer-site-links a:focus,
footer .container .footer-disclosure-links a, footer .container .footer-disclosure-links a:link,
footer .container .footer-disclosure-links a:hover, footer .container .footer-disclosure-links a:visited,
footer .container .footer-disclosure-links a:active, footer .container .footer-disclosure-links a:focus,
footer .container-fluid .footer-site-links a, footer .container-fluid .footer-site-links a:link,
footer .container-fluid .footer-site-links a:hover, footer .container-fluid .footer-site-links a:visited,
footer .container-fluid .footer-site-links a:active, footer .container-fluid .footer-site-links a:focus,
footer .container-fluid .footer-disclosure-links a, footer .container-fluid .footer-disclosure-links a:link,
footer .container-fluid .footer-disclosure-links a:hover, footer .container-fluid .footer-disclosure-links a:visited,
footer .container-fluid .footer-disclosure-links a:active, footer .container-fluid .footer-disclosure-links a:focus {
    display: inline-block;
    padding: 3px 0px;
    text-decoration: none;
}
footer .container .footer-disclosure-links ul li::after,
footer .container-fluid .footer-disclosure-links ul li::after {
    margin: 0px 6px;
    margin-left: 10px;
    content: "|";
}
footer .container .footer-disclosure-links ul li:last-child::after,
footer .container-fluid .footer-disclosure-links ul li:last-child::after {
    content: "";
}
footer .container .footer-entities,
footer .container-fluid .footer-entities {
    margin: 0px;
    padding: 20px 0px;
}
footer .container .footer-entities .footer-entity,
footer .container-fluid .footer-entities .footer-entity {
    text-align: center;
}
footer .container .footer-entities .footer-entity p.entity-name,
footer .container-fluid .footer-entities .footer-entity p.entity-name {
    margin: 30px 0px 5px 0px;
    font-weight: var(--fw-600);
    font-size: .875rem;
    text-align: center;
}

.up-header .navbar.navbar-bottom .container .navbar-toggler,
.up-header .navbar.navbar-bottom .container-fluid .navbar-toggler {
    float: var(--dir-end);
    margin: 0px;
    margin-left: 8px;
    padding: 0px;
    width: 48px;
    height: 34px;
    font-size: 1.25rem;
    line-height: 1;
    color: initial;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    border-radius: var(--border-radius);
}

.up-header .navbar.navbar-bottom .container .navbar-toggler .navbar-toggler-icon,
.up-header .navbar.navbar-bottom .container-fluid .navbar-toggler .navbar-toggler-icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    font-size: 2rem;
    line-height: 2rem;
    color: var(--font-color);
    background-color: rgba(0, 0, 0, 0);
    background-image: none;
    vertical-align: middle;
}
.hero-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    grid-auto-rows: 1fr;
    gap: 8px;
    margin-bottom: 3rem;
}
.hero-tabs .btn-secondary {
    align-items: center;
    align-self: stretch;
    display: flex;
    justify-content: center;
    margin: 0;
}

ol.list-links-numbered {
    list-style: none
}

ol.list-links-numbered li {
    margin: 8px 0;
    padding: 0
}

ol.list-links-numbered li a {
    display: flex;
    flex-direction: row;
    column-gap: 10px;
    background-color: var(--upse-gray-xlt);
    color: var(--ibkr-gray-dk)
}

ol.list-links-numbered li a span {
    padding: 4px
}

ol.list-links-numbered li a>span:first-child {
    display: block;
    width: 30px;
    min-width: 30px;
    height: 30px;
    background-color: var(--upse-gray-lt);
    color: #fff;
    text-align: center;
    font-size: 0.9rem
}

ol.list-links-numbered li a:hover>span:first-child {
    background-color: var(--primary)
}

ol.list-links-numbered li.active a>span:first-child {
    background-color: var(--primary)
}

/*all media */

@media (max-width: 991.98px) {
    .hero-carousel .carousel-screener {
        padding-top: 50% !important;
    }
    .hero-carousel .carousel-screener .hero-img-cropping-wrapper{
        position: absolute;
        width: 100%;
        padding-top: 50%;
        height: 0;
        overflow: hidden;
        top: 0px;
        left: 0px;
    }
}
@media (max-width: 767.98px) {
    .hero-carousel .carousel-screener {
        background: #ebf2f5;
    }
    .hero-carousel .carousel-item {
        position: relative !important;
        display: block !important;
        float: none;
        margin-top: 5px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        padding: 35px 20px;
        width: calc(100% - 10px);
    }
    .hero-carousel .carousel-ibkr-desktop {
        background: #f0f0f0 url(../images/hero-banner-home-ibkr-desktop-v07-mobile.jpg);
        background-repeat: no-repeat;
        background-size: 150%;
        background-position: top center;
        padding-top: calc(50% + 20px) !important;
    }
    .hero-carousel .carousel-overnight-trading {
        background: #0b1021 url(../images/hero-banner-home-overnight-trading-mobile.jpg);
        background-repeat: no-repeat;
        background-size: 150%;
        background-position: top center;
        padding-top: calc(50% + 20px) !important;
    }
    .hero-carousel .carousel-margin {
        background: #E9ECF1 url(../images/hero-banner-home-margin-mobile.jpg);
        background-repeat: no-repeat;
        background-size: 150%;
        background-position: top center;
        padding-top: calc(50% + 20px) !important;
    }
    .hero-carousel .carousel-screener .hero-img-cropping-wrapper img {
        position: absolute;
        height: 100%;
        width: 100%;
        object-fit: cover;
        object-position: center center;
        top: 0;
        left: 0;
    }
        .hero-carousel .carousel-margin .hero-headline, .hero-carousel .carousel-margin .hero-subhead {
        color: #222;
    }
    .hero-carousel {
        width: 100%;
        padding: 0;
        height: 100%;
    }
}
@media (max-width: 575.98px) {
    main{margin-top: 55px}
    #broker-security .totals h2, #broker-security .totals p, #covid-19 .search_form, #droplinks div, #droplinks h5, #droplinks p, #global-access .totals h2, #global-access .totals p {
        text-align: center;
    }
    #droplinks {
        padding: 10px 0 40px
    }

    #droplinks img {
        margin: 40px auto 20px;
        max-width: 60px
    }
    .btn {
        width: 100%;
        box-sizing: border-box;
    }
    .up-header .navbar.navbar-bottom {
        top: 0px;
        height: 55px;
        border-bottom: 1px solid var(--border-color);
    }
    .up-header .navbar.navbar-bottom .container,
    .up-header .navbar.navbar-bottom .container-fluid {
        display: block;
        padding: 0px 10px !important;
    }
    .up-header .navbar.navbar-bottom .navbar-brand{margin-top: 2px;display: inline-block;}
    .hero.hero-side-nav .ibkr-sidebar {
        margin-left: -16px; margin-right: -16px;
        min-height: auto;
        height: auto;
    }
    .ibkr-sidebar ul {
        display: inline-block;
        min-height: inherit;
        white-space: nowrap;
        overflow-x: scroll;
    }
    .ibkr-sidebar ul li {
        width: auto;
    }
    .ibkr-sidebar ul li a, .ibkr-sidebar ul li a:link, .ibkr-sidebar ul li a:visited, .ibkr-sidebar ul li a:hover, .ibkr-sidebar ul li a:active, .ibkr-sidebar ul li a:focus {
        padding-left: 16px;
        text-align: center;
        border-bottom: none;
    }
}


@media (min-width: 768px) and (max-width: 1199.98px) {
    .hero-carousel .carousel-item {
        padding-top: 3rem;
    }
}
@media (min-width: 992px) {
    .order-lg-0 {
        order: 0 !important;
    }
    #award-winning .awardset {
        margin-top: 0;
        margin-end: 25px;
        -webkit-margin-end: 25px;
        -moz-margin-end: 25px;
        margin-bottom: 0;
        margin-start: 0;
        -webkit-margin-start: 0;
        -moz-margin-start: 0;
    }
}

.social-sidebar {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    position: fixed;
    top: auto;
    left: 0;
    bottom: 10px;
    z-index: 100;
    width: auto;
    height: auto;
}
.social-sidebar>span {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    align-items: center;
    width: 46px;
    height: 46px;
    margin: 0px;
    margin-right: 1px;
    padding: 5px 0px;
    text-align: center;
    background-color: #fff;
    box-shadow: 0px 1px 1px var(--shadow-color);
    transition: all .2s ease-in-out 0s;
    cursor: pointer;
}
.social-sidebar .icon-set {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    position: relative;
    left: 0px;
    margin: 0px;
    padding: 5px 10px;
    width: 100%;
    height: auto;
    background-color: #fff;
    box-shadow: 0px 1px 1px var(--shadow-color);
    transition: all .2s ease-in-out 0s;
}
.social-sidebar>span i, .social-sidebar>span svg {
    margin: 0px;
    padding: 0px;
    font-size: 1rem;
    line-height: 1.25rem;
    color: var(--primary);
}
.social-sidebar .fa-chevron-right {
    display: none;
}
.social-sidebar .icon-set p {
    margin: 0px;
    padding: 0px 5px;
    font-weight: var(--fw-400);
    font-size: .75rem;
    line-height: 1rem;
    text-align: center;
    color: var(--dark-60);
}
.social-sidebar .icon-set .share-icon {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 0px;
    padding: 0px;
    width: 36px;
    height: 36px;
}

.social-sidebar .icon-set .share-icon a, .social-sidebar .icon-set .share-icon a:link, .social-sidebar .icon-set .share-icon a:visited, .social-sidebar .icon-set .share-icon a:hover, .social-sidebar .icon-set .share-icon a:active, .social-sidebar .icon-set .share-icon a:focus {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 1.125rem;
    line-height: 1rem;
    text-align: center;
    color: var(--black-60);
    transition: all .2s ease-in-out 0s;
    cursor: pointer;
}
.social-sidebar .icon-set .share-icon a.icon-facebook, .social-sidebar .icon-set .share-icon a:link.icon-facebook, .social-sidebar .icon-set .share-icon a:visited.icon-facebook, .social-sidebar .icon-set .share-icon a:hover.icon-facebook, .social-sidebar .icon-set .share-icon a:active.icon-facebook, .social-sidebar .icon-set .share-icon a:focus.icon-facebook {
    color: #1877f2;
}
.social-sidebar .icon-set .share-icon a.icon-twitter, .social-sidebar .icon-set .share-icon a:link.icon-twitter, .social-sidebar .icon-set .share-icon a:visited.icon-twitter, .social-sidebar .icon-set .share-icon a:hover.icon-twitter, .social-sidebar .icon-set .share-icon a:active.icon-twitter, .social-sidebar .icon-set .share-icon a:focus.icon-twitter {
    color: #000;
}

.social-sidebar .icon-set.social-sidebar-hide {
    left: -300px !important;
}
.social-sidebar>span:hover {
    cursor: pointer;
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}
.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

.social-sidebar>span.toggle-arrow .fa-chevron-right {
    display: block;
}
.social-sidebar>span.toggle-arrow .fa-chevron-left {
    display: none;
}

@media (min-width: 768px) and (max-width: 991.98px) {
    main{margin-top: 50px}
    .hero-carousel{height: 1000px;}
    .hero.hero-side-nav .container {
        padding: 0px;
    }
    .hero.hero-side-nav .ibkr-sidebar {
        margin-left: 0px;
        min-height: auto;
        height: auto;
    }
    .ibkr-sidebar ul {
        display: inline-block;
        min-height: inherit;
        white-space: nowrap;
        overflow-x: scroll;
    }
    .ibkr-sidebar ul li {
        width: auto;
    }
    .ibkr-sidebar ul li a, .ibkr-sidebar ul li a:link, .ibkr-sidebar ul li a:visited, .ibkr-sidebar ul li a:hover, .ibkr-sidebar ul li a:active, .ibkr-sidebar ul li a:focus {
        padding-left: 16px;
        text-align: center;
        border-bottom: none;
    }
    .hero-carousel .carousel-screener .hero-img-cropping-wrapper {
        width: 100%;
        padding-top: 50%;
    }
    .hero-carousel .carousel-screener .hero-img-cropping-wrapper img {
        position: absolute;
        height: 100%;
        width: 100%;
        object-fit: contain;
        object-position: top center;
        top: 0;
        left: 0;
    }
    .text-md-center {
        text-align: center !important;
    }
    .hero-carousel .carousel-ibkr-desktop {
        background: #f0f0f0 url(../images/hero-banner-home-ibkr-desktop-v07-tablet.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom right;
    }
    .hero-carousel .carousel-margin {
        background: #E9ECF1 url(../images/hero-banner-home-margin-tablet.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom right;
    }
    .hero-carousel .carousel-overnight-trading {
        background: #0b1021 url(../images/hero-banner-home-overnight-trading-tablet.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 60%;
    }
    #award-winning .awardset {
        margin: 0;
    }
    .up-header .navbar.navbar-bottom {
        top: 0px;
        height: 55px;
        border-bottom: 1px solid var(--border-color);
    }
    .up-header .navbar.navbar-bottom .container,
    .up-header .navbar.navbar-bottom .container-fluid {
        display: block;
        padding: 0px 20px;
    }
    .up-header .navbar.navbar-bottom .container a.btn.btn-log-in,
    .up-header .navbar.navbar-bottom .container a:link.btn.btn-log-in{
        color: var(--primary);
        background-color: var(--nav-bottom-bg-color);
        border-color: var(--primary);
        margin-right: 10px;
    }
    .up-header .navbar.navbar-bottom .navbar-brand{margin-top: 2px;display: inline-block;}
}
.container-fluid {
    margin-top: 2rem;
}
.image-container {
    position: relative;
    display: inline-block;
}
.image-container-app {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.image-container img {
    width: 100%;
    height: auto;
    display: block;
}
.image-container-app img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.search-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    font-size: 32px;
    color: white;
    pointer-events: none;
}

.image-container:hover .search-icon {
    display: block;
}

.image-container:hover img {
    opacity: 0.7;
}

.show-image, .show-image-app {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.image-overlay {
    position: relative;
}
.image-overlay-app {
    position: relative;
}

.show-image img {
    max-width: 100%;
    max-height: 100%;

    border-radius: 10px;
}
.show-image-app img {
    border-radius: 10px;
}

.close-button {
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: white;
    color: black;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 24px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
}

.close-button-app {
    position: absolute;
    top: -10px;
    right: -50px;
    background-color: white;
    color: black;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 24px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
}

.show-image {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
