:root{
	--color-theme:#adf802;
	--color-theme-2: #10153b;
	--font-theme:"SegUIVar";
}

@font-face {
	font-family: "SegUIVar";
	src: url("../fonts/SEGUIVAR.TTF");
	font-weight: normal;
	font-style: normal; 
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
	font-family: "SegUIVar";
	font-weight:600;
	letter-spacing:1px;
}
/*** font css ***/
.font-theme{
	font-family:var(--font-theme);
}
/*** color css ***/
.color-theme{
	color:var(--color-theme) !important;
}
.color-theme-2{
	color:var(--color-theme-2) !important;
}
/*** button css ***/
.btn-connect{
	padding:10pt;
	font-size:16px;
	font-weight:500;
	line-height:normal;
}
/*** default layout css ***/
.breadcrumb-link{
	padding:5px 10px;
	background:#000;
	color:var(--bs-theme);
	border-radius:10px;
	transition:all ease .3s;
}
.breadcrumb-link:hover{
	background:#222;
	color:#eee;
	text-decoration:none !important;
}
.page-header{
	margin:1.5rem 0;
	font-family: "SegUIVar";
	letter-spacing:1.2px;
}
/******* side bar *******/
.app-sidebar .app-sidebar-content{
	background:#f9f9f9;
}
/*** address selection page ***/
.address_selection_box{
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	gap:15px;
}
.address-card button{
	display:block;
	padding:20pt;
	border:none;
	border-radius:15px;
	background:#fff;
	box-shadow:0 0 10px rgba(0,0,0,.15);
	max-width:100%;
	transition:all ease .3s;
	position:relative;
	overflow:hidden;
}
.address-card button:hover{
	background:#efffca;
	box-shadow:0 0 20px rgba(0,0,0,.25);
}
.address-card button:before{
	content:'';
	position:absolute;
	right:-15px;
	bottom:-10px;
	width:100px;
	height:100px;
	transform:rotate(0deg);
	background:url(../../images/logo/icon-warmkey-main.svg) no-repeat;
	background-size:contain;
	background-position:center;
	opacity:.15;
	transition:all ease .3s;
}
.address-card button:hover:before{
	bottom:0;
}
.label-address-connect{
	font-family: "SegUIVar";
	font-size:14pt;
	font-weight:bold;
	letter-spacing:1.2px;
	margin-bottom:5px;
	position:relative;
}
.wallet-address-connect{
	position:relative;
}
@media(max-width:550px){
	.address_selection_box{
		flex-direction:column;
	}
	.address-card{
		width:100%;
	}
	.address-card button{
		width:100%;
		max-width:100%;
	}
	.wallet-address-connect {
		text-overflow: ellipsis;
		overflow: hidden;
	}
}
/*** portal page ***/
.analytics-box{
	background:linear-gradient(0deg, #3d3d3d, #000000);
	position:relative;
	overflow:hidden;
	transition:all ease .3s;
}
.analytics-box:hover{
	background:linear-gradient(0deg, #111, #000000);
}
.analytics-box:before{
	content:'';
	position:absolute;
	right:-15px;
	bottom:-15px;
	width:100px;
	height:100px;
	transform:rotate(0deg);
	background:url(../img/icon-lightgreen-key.svg) no-repeat;
	background-size:contain;
	background-position:center;
	opacity:0;
	transition:all ease .3s;
}
.analytics-box:hover:before{
	right:-15px;
	bottom:-10px;
	opacity:.5;
}
.analytics-box .card-body{
	padding:30pt;
}
@media(max-width:550px){
	.analytics-box .card-body h4{
		font-size:12pt;
	}
}
/*** Dapp page ***/
.activation_box{
	padding:20pt;
	margin-top:30pt;
	background:#fff;
	border-radius:15px;
	border:1px solid #eee;
	display:none;
}
.switchacc_box{
	padding:20pt;
	margin-top:30pt;
	background:#fff;
	border-radius:15px;
	border:1px solid #eee;
	display:none;
}
.referral-code{
	padding: 3pt 5pt;
    letter-spacing: 1.2px;
	font-size:14pt;
	font-weight:bold;
	color:#fff;
	background:#0ba90b;
}

/*** Confirmation box ***/
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  visibility: hidden; /* Hidden by default */
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Popup content box */
.popup-content {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  text-align: center;
}

/* Show the overlay */
.overlay.active {
  visibility: visible;
  opacity: 1;
}

.font-green{
	color:green;
}

.font-red{
	color:red;
}
/*** sign up ***/
.register{
	/*position:relative;*/
	padding:0 !important;
}
.register:before{
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(../img/bg-green.jpg);
	background-size:cover;
	background-position:center top;
	filter:grayscale(1);
}
.register-card{
	padding:10pt;
	background-color:#fff;
	min-height:500px;
	display:flex;
	align-items:center;
	border-radius:15px;
	box-shadow:0 0px 20px rgba(100,100,100,.15);
	position:relative;
	overflow:hidden;
}
.register-card:before{
	content:'';
	position:absolute;
	right:-50px;
	bottom:-50px;
	width:200px;
	height:200px;
	background:url(../img/icon-lightgreen-key.svg) no-repeat;
	background-size:cover;
	background-position:center;
	opacity:.25;
}
.alert table{
	width:100%;
}
.alert table tr td{
	font-size:14px;
	padding:5px;
}
.btn-new-warmkey{
	background:#000;
	border:3px solid #111;
	color:var(--color-theme);
	text-shadow:0 0 3px rgba(0,0,0,.35);
	transition:all ease .3s;
}
.btn-new-warmkey:hover, .btn-new-warmkey:focus{
	background:#000;
	border:3px solid #000;
	color:var(--color-theme);
	opacity:.8;
}
.signup-accordion{
	border:none;
}
/*** New to warmkey ***/
.select-device-grid{
	margin:20pt 0;
}
.select-device-grid ul{
	margin:0;
	padding:0;
	display:grid;
	gap:23px;
	/*grid-template-columns: repeat(3, 30%);
	grid-template-columns:auto auto auto;*/
	grid-template-columns:repeat( auto-fit, minmax(30%, 1fr) );
	justify-content:center;
}
.select-device-grid li{
	list-style:none;
}
.custom-radio-container {
	display: block;
	position: relative;
	margin-bottom: 10px;
	cursor: pointer;
	font-size:14px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
/* Hide the browser's default radio button */
.custom-radio-container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}
/* Create a custom radio button */
.custom-radio-checkmark {
	/*position: absolute;
	top: 0;
	left: 0;*/
	padding:10px;
	display:flex;
	flex-direction:column;
	align-items:center;
	height:100%;
	width:100%;
	/*background-color: #eee;*/
	border-radius:5px;
	border: 2px solid #ddd;
	filter: grayscale(1);
	text-align:center;
}
/* On mouse-over, add a grey background color */
.custom-radio-container:hover input ~ .custom-radio-checkmark {
	background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.custom-radio-container input:checked ~ .custom-radio-checkmark {
	background-color: #f1f1f1;
	border-color:#000;
    filter: grayscale(0);
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.custom-radio-checkmark:after {
	content: "";
	position: absolute;
	display: none;
}
/* Show the indicator (dot/circle) when checked */
.custom-radio-container input:checked ~ .custom-radio-checkmark:after {
	display: block;
}
/* Style the indicator (dot/circle) */
.custom-radio-container .custom-radio-checkmark:after {
	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	/*background: white;*/
}
.device-logo{
	width:100%;
	max-width:100px;
	filter:revert;
}
.custom-radio-container input:checked ~ .custom-radio-checkmark .device-logo{
	filter:contrast(1);
}
.setup-instruction-grid ul{
	margin:20pt 0;
	padding:0;
}
.setup-instruction-grid li{
	list-style:none;
	display:block;
	padding-bottom:15px;
	overflow: hidden;
}
.setup-step-card{
	display:grid;
	grid-template-columns:36px 76% 25px;
	gap:8px;
	justify-content: space-around;
}
.setup-step{
	width:36px;
	height:36px;
	border-radius:50%;
	background:#333;
	color:#fff;
	font-weight:bold;
	font-size:20px;
	display:flex;
	align-items:center;
	justify-content:center;
	position:relative;
}
.setup-step:after{
	content:'';
	position:absolute;
	top:36px;
	left:50%;
	transform:translate(-50%,0);
	width:2px;
	height:250%;
	background:#333;
}
.setup-instruction-grid li:last-child .setup-step:after{
	display:none;
}
.setup-detail{
	max-width:80%;
}
.setup-detail h4{
	font-size:16px;
	font-weight:bold;
}
.setup-icon{
	max-width:52px;
	height:52px;
	margin-left:auto;
}
.setup-icon img{
	width:100%;
	max-width:32px;
}
@media(max-width:500px){
	.select-device-grid ul{
		grid-template-columns: repeat(2, 45%);
	}
	.setup-detail h4{
		font-size:14px;
	}
}
.select-connect-method ul{
	margin:0;
	padding:0;
}
.select-connect-method li{
	list-style:none;
	display:block;
	margin-bottom:10px;
}
.select-device-container {
	display: block;
	position: relative;
	cursor: pointer;
	font-size:14px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.select-device-container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}
.select-device-checkmark {
	height:100%;
	width:100%;
	display:block;
	padding:10pt;
	background-color: #eee;
	border:2px solid #ccc;
	border-radius:10px;
	opacity:.5;
	cursor:pointer;
}
.select-device-container:hover input ~ .select-device-checkmark {
	opacity:.5;
}
.select-device-container input:checked ~ .select-device-checkmark {
	border-color:#4c89f7;
	opacity:1;
}
.select-device-checkmark:after {
	content: "";
	position: absolute;
	display: none;
}
.select-device-container input:checked ~ .select-device-checkmark:after {
	display: block;
}
.select-device-container .select-device-checkmark:after {
	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.w-45 {
    width: 45%!important;
}
.bg-img{
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(../img/bg-gray.jpg);
	background-size:cover;
	background-position:center top;

}
.pg-content-body{
	padding:30pt;
}
/*** tab css ***/
.nav-tabs{
	border:0;
}
.nav-tabs .nav-link{
	border-bottom:1px solid #eee;
}
.nav-tabs .nav-link.active{
	border-bottom:0;
}

.action-required-badge-menu {
    width: .375rem;
    height: .375rem;
	margin-top: -10px;
    border-radius: .375rem;
    margin-left: 5px;
	--bs-bg-opacity: 1;
    background-color: red !important;
}

.action-required-badge {
	position: absolute;
    width: .375rem;
    height: .375rem;
    border-radius: .375rem;
    margin-left: 5px;
	--bs-bg-opacity: 1;
    background-color: red !important;
}

.disbaled-span{
	pointer-events: none; /* Disable mouse interaction */
	opacity: 0.5;          /* Dim the look */
	cursor: not-allowed;
}