/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}


.hide{
  display: none;
}
.show{
    display: show;
}

.img-animation {

 
  position: relative;
  animation-name: example;
  animation-duration: 10s;
  animation-iteration-count: 3;
}

@keyframes example {
  0%   { left:0px; top:0px;}
  25%  { left:0px; top:50px;}
  50%  { left:0px; top:0px;}
  75%  { left:0px; top:50px;}
  100% { left:0px; top:0px;}
}

@font-face {
    font-family: 'Comfortaa';
    src: url(../fonts/Comfortaa.ttf);
}

.button-con{

    --bg-opacity: 1;
    background-color: #f2bb00;
    color: #FFF;
    font-weight: 700;
    border:none;
    text-transform: capitalize;
}

.button-con:hover {
    --bg-opacity: 1;
    border: none;
    color: #f2bb00;
    font-weight: 700;
    background-color: #FFF;
    text-transform: capitalize;
}

.total-token{
	color : #F08C1D;
	font-size : 1.1rem;	
	margin-left : 15px;
}

.our-custom{
	font-family : 'Comfortaa';
	padding : 10px;
	background : #1A1B1D;
	color : #white;
}

a:hover{
	text-decoration : none;
	color : white;
}

.table-view{
    background: #000;
    margin: 0 auto;
    margin-top: 20px;
	padding : 0px;
	color: #FFF;
    font-weight: 600;
}

.table-top{
    display: flex;
    justify-content: space-between;
}

.table-top img{
    max-width: 50px;
}

.top-link a{
	display: block;
}

.title-6{
    --text-opacity: 1;
    color: rgba(255,255,255,var(--text-opacity));
    font-weight: 600;
    font-size: 1.5rem;
	text-transform : uppercase;
}

.vault-info{
    color: #FFFFFF;
    display: flex;
    font-weight: 600;
    font-size: 1.1rem;
}

.vault-value{
	margin-left : 5px;
}

.reflec-info{
    font-size: 1.1rem;
    color: #F08C1D;
    margin-top: -0.5rem;
    margin-bottom: 1rem;
}

.vault-wrap{
	margin-bottom: 1rem;
    margin-top: 1rem;
}

.nix-max{
    display: flex;
    justify-content: space-between;
}

.input-bordered,.input-bordered:focus-within,.input-bordered:visited,.input-bordered:active,.input-bordered:focus,.input-bordered:focus-visible{
    width: 100%;
    padding: 10px;
    font-size: 1.1rem;
    font-weight: 500;
    background: #1A1B1D;
    border: 1px solid #F08C1D;
	outline : none;
}

.slider.slider-horizontal{
	width : 100%;
}

.slider.slider-horizontal .slider-track {
	height : 2px;
}

.slider.slider-horizontal .slider-tick{
    margin-left: -2px;
    margin-top: 5px;
	width: 3px;
    height: 2px;
	background : #dd02d5;
}

 .slider.slider-horizontal .slider-handle {
    margin-left: -5px;
    margin-top: 1px;
	width: 10px;
    height: 10px;
	background : #dd02d5;
	
}

.lock-time{
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.bs-tooltip-auto[x-placement^=top] .arrow:before, .bs-tooltip-top .arrow:before {
    top: 0;
    border-width: .4rem .4rem 0;
    border-top-color: #dd02d5;
	opacity : 1;
}

.tooltip-inner {
	background : #dd02d5;
	opacity : 1;
}

.slider-selection.tick-slider-selection {
	background : #dd02d5;
}

.lock-info{
    display: flex;
    margin-top: 0.5rem;
}

.fee-info{
	display: flex;
}

.fee-wrap{
	margin-top : 1rem;
}

.con-wallet{
    width: 100%;
    padding: 8px;
    margin-top: 15px;
}

.withdraw-wrap{
	margin-bottom : 1rem;
}

.version-wrap{
    display: flex;
    justify-content: space-between;
    margin-top: 0.15rem;
}

.buid-link,.buid-link:hover {
    text-decoration: underline;
    cursor: pointer;
}



/*-- Modal -- */

.modal-header {
    display: flex;
    align-items: center;
    background: linear-gradient(111.68deg, rgb(242, 236, 242) 0%, rgb(232, 242, 246) 100%);
    border-bottom: 1px solid rgb(231, 227, 235);
    padding: 12px 24px;
}

.modal-body {
    padding: 24px;
}


.btn-wallet:hover {
	color : #FFF;
    -webkit-transform: translateY(-3px);
}	
	
.btn-wallet {
    height: 60px;
    background: #378a36;
    box-sizing: border-box;
    border-radius: 0.25rem;
    align-items: center;
    padding-left: 15px;
    padding-right: 15px;
    color: #FFF;
    border: 2px solid #51544d;
    cursor: pointer;
}

.stake-header {
    color: rgb(118, 69, 217);
    font-weight: 600;
    line-height: 1.5;
    text-transform: uppercase;
    font-size: 12px;
    display: block;
    margin-bottom: 5px;
}

.stakeValue {
    background-color: rgb(238, 234, 244);
    border: 1px solid rgb(215, 202, 236);
    border-radius: 16px;
    box-shadow: rgba(74, 74, 104, 0.1) 0px 2px 2px -1px inset;
    padding: 16px;
    color: rgb(122, 110, 170);
    width: 100%;
    text-align: right;
    outline: none;
}

.modal-body .max-btn {
    border: 0px;
    border-radius: 16px;
    cursor: pointer;
    font-weight: 600;
    justify-content: center;
    letter-spacing: 0.03em;
    line-height: 1;
    outline: 0px;
    font-size: 12px;
    background-color: rgb(239, 244, 245);
    box-shadow: none;
    color: #00AEEF;
    padding: 4px 16px;
}

.ba-value {
    color: rgb(122, 110, 170);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    margin-left: 10px;
}


.balance {
    display: flex;
    align-items: center;
    justify-content: end;
    margin-top: 5px;
    margin-bottom: 20px;
}


.btn-stake {
    background-color: #F08C1D;
    border: 0px;
}

.btn-modal {
    cursor: pointer;
    display: flex;
    justify-content: center;
    letter-spacing: 0.03em;
    line-height: 1;
    opacity: 1;
    outline: 0px;
    height: 42px;
    padding: 0px 24px;
    color: rgb(255, 255, 255);
    width: 100%;
    align-items: center;
    box-shadow: none;
    margin-bottom: 10px;
}

.modal-header h2{
	color: #fff;
}

.btn-modal.btn-token{
	color: #F08C1D;
    border: 2px solid #F08C1D;
}

/*-- Modal -- */

#MobileMenu.open{
	display : block !important;
}

.MobileButton:focus {
	box-shadow: none;
}

.MobileButton.active {
	box-shadow: 0 0 0 3px rgba(202,191,253,.45);
}

.modal-content {
    background-color: #000;
    border: 2px solid #51544d;
    border-radius: 0.25rem;
}

.modal-header {
    background: #000;
    border-bottom: 2px solid #51544d;
    border-radius: 0;
}

.lock-value,.fee-value,#your-staking1{
	margin-left : 5px;
}

@media (max-width: 576px) {
	
	.vault-info,.lock-info{
		flex-wrap : wrap;
        font-size: 0.9rem;
	}
	
}


.connect-btn {
    background-color: #378a36;
    color: #FFF;
    font-weight: 700;
    height: auto;
    margin-top: 18px;
    border-radius: 10px;
}

.connect-btn:hover {
    color: #FFF;
    -webkit-transform: translateY(-3px);
}


.disconnect-btn {
    background-color: #8247e5;
    color: #FFF;
    background-image: linear-gradient(145deg, #5083f2, #dd02d5);
    height: auto;
    margin-top: 18px;
    border-radius: 10px;
}

.disconnect-btn:hover {
    color: #000;
    height: auto;
    margin-top: 18px;
    border-radius: 10px;
}