/* Blue-grey Light scheme (Default) */
/* Can be forced with data-theme="light" */
[data-theme="light"],
:root:not([data-theme="dark"]) {
	--primary: #546e7a;
	--primary-hover: #455a64;
	--primary-focus: rgba(84, 110, 122, 0.125);
	--primary-inverse: #FFF;
	--nav-background-color: #040633;
	--nav-color: #fff;
	--highlight-background: lightyellow;
}

/* Blue-grey Dark scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--primary: #546e7a;
		--primary-hover: #607d8b;
		--primary-focus: rgba(84, 110, 122, 0.25);
		--primary-inverse: #FFF;
		--switch-checked-background-color: #02afff;

	}
}

/* Blue-grey Dark scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
[data-theme="dark"] {
	--primary: #546e7a;
	--primary-hover: #607d8b;
	--primary-focus: rgba(84, 110, 122, 0.25);
	--primary-inverse: #FFF;
	--nav-background-color: #040633;
	--highlight-background: #515100;
	--switch-checked-background-color: #02afff;

}

/* Blue-grey (Common styles) */
:root {
	--form-element-active-border-color: var(--primary);
	--form-element-focus-color: var(--primary-focus);
	--switch-color: var(--primary-inverse);
	--switch-checked-background-color: var(--primary);
	--spacing: 0.4rem;
	--form-element-spacing-vertical: 0.3rem;
    --form-element-spacing-horizontal: 0.5rem;
    --typography-spacing-vertical: 0.25rem;

    --info-bar-background-color: var(--primary);
    --info-bar-color: var(--primary-inverse);

    --warning-bar-background-color: #ffc147;
    --warning-bar-color: #000;

    --error-bar-background-color: #913a1f;
    --error-bar-color: #fff;

    --alert-background: var(--form-element-invalid-border-color);
    --alert-color: #fff;

}

.kycFigure {
	background-color: var(--highlight-background);
	padding: 45px;
}

h3 {
	--typography-spacing-vertical: 0.25rem;
}

@font-face {
	font-family: "Inter", sans-serif;
}

.justify-between {
	justify-content: space-between;
}

.d-none, .hidden {
    display: none;
}

.not_visible {
    visibility: hidden;
}

.center {
    text-align: center;
}


body {
	font-family: 'Inter';
	-webkit-font-smoothing: antialiased;
}
body > header {
	padding-top: 0;
	overflow: hidden;
	height: 10rem;
	position: relative;
	background-size: cover;
	background-position: 50%;
}
body > header img {
	max-width: 100%;
	height: auto;
	border-style: none;
	position: absolute;
	top: -15rem;
}
body header > div {
	z-index: 10;
	position: relative;
	margin: auto;
	width: 14rem;
	text-align: center;
	color: #fff;
	font-weight: 800;
	top: 1.5rem;
	text-shadow: 0rem 0rem 12px #7c7c7c;
}

body > nav {
    background-color: var(--nav-background-color);
}

ul.desktopNavigation li, ul.desktopNavigation li a,
ul.mobileNavigation li, ul.mobileNavigation li a {
    color: var(--nav-color);
    text-decoration: none;
}

body > nav li a:hover {
    text-decoration: underline;
}
body header h2 {color:#fff;margin-bottom: 0;}
body header .fund_account {
	font-size:1rem;
}
a {
	text-decoration: underline;
}
body>footer {
	padding:3rem;
}
.notificationBar {
	position: fixed;
	top:0;
	left:0;
	width:100%;
	padding: 0.5rem 1rem;
	z-index: 1000;
	text-align: center;
}
.infoBar {
	background-color: var(--info-bar-background-color);
	color: var(--info-bar-color);

}
.warningBar {
	background-color: var(--warning-bar-background-color);
	color: var(--warning-bar-color);
	padding: 1rem;
	border-radius: 5px;
	margin-bottom: 1rem;
	position: relative;;
}

.errorBar {
    background-color: var(--error-bar-background-color);
    color: var(--error-bar-color);
    padding: 0.4rem 1rem;
}

.input_error {
	display: none;
	font-size: small;
	font-style: italic;
	font-weight: bold;
	background-color: var(--error-bar-background-color);

	padding: 0.4rem 1.4rem;
	border-radius: 5px;
	margin: 8px 0;
}

.success {
	background-color: seagreen;

}

dialog .infoBar {
	padding: 1rem;
	border-radius: 0.5rem;
}

.tag_line {
	font-size: 0.6rem;
}

#ul_user_info {
	margin-right: 0;
	font-size: 0.8rem;
}

/* user menu */
#userMenuPanel {
	position: relative;
}

#userMenuPanel a {
	padding: 2px;
	margin: 2px;
}

#user_info_ethAddress {
	color:var(--primary-inverse);
}
#userInfoAction {
	text-decoration: none;
}
#userInfoDropdown {
    position: absolute;
    right: 1rem;
    z-index: 12;
    width: 15rem;
    padding: 0rem;
    background-color: var(--background-color);
    box-shadow: 0px 0px 10px 0px var(--background-color);
    border-radius: 0.3rem;
    font-size: 16px;
}

#connect_wallet_walletConnect, #connect_wallet_coinbaseWallet, #connect_wallet_metamask {
	background-image: url("../img/walletconnect.svg");
	background-size: 3rem;
	background-position-x: 1rem;
	background-position-y: center;
	background-repeat: no-repeat;
	padding-left: 5.5rem;
}
#connect_wallet_coinbaseWallet {
	background-image: url("../img/coinbase.svg");
}
#connect_wallet_metamask{
	background-image: url("../img/metamask.svg");
}


#userInfoDropdown .grid {
    grid-template-columns: 1fr 2fr;
    padding: 10px 5px;
    margin: 10px 15px;
}

#userInfoDropdown .grid img {
    width: 3rem;
}

#fund_account_options {
    margin: 1rem;
}

#fund_account_options .grid {
    grid-template-columns: 1fr 1fr;
}

#userInfoDropdown h6 {
    margin-bottom: 0;
}

#userInfoDropdown .account_info a {
    text-align: right;
}

#userInfoDropdown button {
    font-size: 12px;
}

.edit_account {
	text-align: left;
	padding: 0 1rem;
}

.liminal_market {
	background-image: url("../img/logo2.png");
	background-repeat: no-repeat;
	padding-left: 4.4rem;
	margin-left: calc(var(--spacing) + 1rem);
	background-position: left;
	background-size: 3.5rem;
}


#liminal_market_modal_div > article {
	margin: auto;
}
#liminal_market_modal_div > article ul, #liminal_market_modal_div > article ol {
	margin-left: 1rem;
}


#liminal_market_securities_table tr {
	cursor: pointer;
}
#liminal_market_securities_table img {
	width:3rem;
}
.symbol_logo {
	width:3rem;
}

.security_information {
	max-width:20rem;
	overflow: hidden;
	white-space: nowrap;
	padding: 1rem 0 1rem 0rem;
}
.security_extra {
	max-width: 20rem;
}
.security_extra li {
	padding: 0 1rem 0 0.5rem;
}

.liminal_market_connect_wallet {
	background-image: url('../img/wallet-svgrepo-com.svg');
	background-repeat: no-repeat;
	background-size: 1.8rem;
	padding-left: 2.3rem;
	background-position-x: 0.3rem;
	background-position-y: center;
	background-color: #fff;
}

#wallet_connector_panel .provider {
	cursor: pointer;
}

#error_info {
	background-color: var(--alert-background);
	color: var(--alert-color);
	position: fixed;
	top: 0;
	left: 0;
	padding: 0.5rem 1rem;
	width: 100%;
}

.mobileNavigation {
	display: flex;
	margin-left: 0.5rem !important;
}

nav details[role=list] .mobileNavLinks > li > a {
	padding: 1rem;
}

#mobile_logo {
	background-image: url(../img/logo2.png);
	background-repeat: no-repeat;
	padding-left: 3rem;
	margin-left: 0;
	background-position: left;
	background-size: 3.5rem;
}

.mobileNavigation details[role=list] summary::after {
	margin-top: 4px;
}

.mobileNavigation details[role=list] svg {
	margin-top: 6px;
}

.desktopNavigation {
	display: none;
}


#liminal_market_trade_panel {

}

.tradeInputArticle {
	margin: 0;
	overflow: hidden;
	padding: calc(var(--spacing) * 2);
}
.tradeInput {
	grid-template-columns: 11rem 1fr;
	grid-template-rows: 50px 20px;
	grid-column-gap: 20px;
	grid-row-gap: 15px;
	justify-items: stretch;
	align-items: stretch;
	font-size:0.6rem;
}

.tradeInput .trade_input, .tradeInput .total_usd_value {
	text-align: right;
}

.tradeInput .trade_input input {
	text-align: right;
	border: 0;
}

#progress-text {
	text-align: center;
	line-height: 1rem;
}

progress.invalid {

}

.tradeInput img {
	max-width:2rem;
	max-height: 2rem;
}

.tradeInput .price_per_share {
	text-align: right;
}
.exceeds_wallet_balance {
	background-image:var(--icon-invalid);
	padding-left:1.5rem;
	background-position-y: center;
	color:var(--form-element-invalid-border-color);
}

.tradeSwitch {
    grid-template-columns: 4rem 1fr;
    grid-template-rows: 42px;
    grid-column-gap: 20px;
    grid-row-gap: 15px;
    justify-items: stretch;
    align-items: stretch;
}
.tradeSwitch .exchange_ratio {
	text-align: right;
}

.swithBtn {
	background-image: var(--icon-chevron);
	padding-left:1.5rem;
	background-position-y: center;
}

.trade_executed img {
	width:5rem;
}
.trade_executed {
    text-align: center;
    position: relative;
}

.trade_executed > div {
    position: relative;
    z-index: 2;
}

.trade_executed > nav {
	justify-content: space-around;
}

#tradingPanel {
	max-width: 510px;
	margin: 0 auto;
}
#use_wallet_for_orders ul {
	margin-left:1rem;
}

#stockList {
	max-width: 700px;
	margin:0 auto;
}



@media (min-width: 576px) {
	.container {
		max-width: 510px;
		padding-right: 0;
		padding-left: 0;
	}

}
@media (min-width: 768px) {
	.container {
		max-width: 700px;
	}

	.mobileNavigation {
		display: none;
	}

	.desktopNavigation {
		display: flex;
	}

	.tradeInput {
		font-size: 0.7rem;
	}

	.magic-iframe {
		top: 84px !important;
	}
}

@media (min-width: 992px) {
	.container {
		max-width: 920px;
	}
}


@media (min-width: 1200px) {
    .container {
        max-width: 1130px;
	}
}

.explain {
	font-size: 0.7rem;
}

#citizen_no_type_options {
    margin-left: 1rem;
}

#kyc_reg {
    min-width: 30rem;
}

#kyc_wizard_form .buttons {
    margin-top: 2rem;
    margin-bottom: 3rem;
}

.disclosure_selections .grid {
	grid-template-columns: 1fr 10fr;
}

.disclosure_selections .explain {
	display: block;
	line-height: 1rem;
	font-style: italic;
}

.kycAccountAgreementGrid .grid {
	grid-template-columns: 1fr 20fr;
}

.kycTrustedContact .explain {
	margin-bottom: 1rem;
}

#kycActionRequiredForm fieldset p {
    margin: 1rem 0;
}

#kycActionRequiredForm fieldset div {
    margin: 1rem 0;
}

.kycUpload img {
    padding: 1rem;
}

#liminal_market_execute_trade small {
    font-size: 0.5rem;
    display: block;
}

.funding_type li {
	list-style: none;
}

.w3a-header__button img {
	float: right;
}


.pl_status {
    cursor: pointer;
}

.red {
    color: #9d1e1e;
}

.green {
    color: #025202;
}

#confetti {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
    z-index: 1;
}

.waiting_list {
    text-align: left;
    margin: 1rem auto;
    width: 65%;
    display: inline-block;
}