/* CyberFi for PisoFi by Noxi Balasik */
    
    
    .alert-info:after {
        content: "Do not use ₱20 coin";
        display: block;
        color: red;
        font-size: larger;
        animation: opacity 3s infinite;
        visibility: visible;
        margin-top: -25px;
    }/*delete this whole block of codes if your vendo accept ₱20 coin*/
    
    .connection-info::before {
        content: 
        " ▣ Your 24/7 wifi vendo!😜  "
        " ▣ Type in your browser 10.0.0.1 to open the portal     "
        " ▣ Register to earn reward points that can be converted to credits     "
        " ▣ Check Promo Packages for more internet deals     "
        " ▣ Enjoy Fast internet speed Powered by Converge Fiber X"; 
    }/*you can safely edit the scrolling messages*/
    body {
        background: repeating-linear-gradient( to top, rgba(255, 255, 255, 0.03) 0px 2px, transparent 2px 4px), linear-gradient(to bottom, #000 5%, #39093a)!important;
        background-attachment: fixed!important;
        background-blend-mode: color-dodge;
        font-family: sans-serif, system-ui, cyber;
        color: aliceblue;
    }
    body:after {
        content: '';
        height: 50%;
        width: 100%;
        background-image: linear-gradient(90deg, rgba(252, 25, 154, .1) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(0deg, #fc199a1a 1px, #0000 1px);
        background-position: bottom;
        background-attachment: fixed;
        background-repeat: repeat;
        background-size: 20px 20px;
        position: fixed;
        pointer-events: none;
        bottom: 0;
        transform: perspective(100px) rotateX(60deg);
        z-index: -1;
        animation: galaw 1s infinite linear 0s;
    }
    @keyframes galaw {
        0% {
            transform: perspective(100px) rotateX(60deg) translateY(24%)
        }
        100% {
            transform: perspective(100px) rotateX(60deg) translateY(29%)
        }
        
    }
    

    img.d-inline-block.align-top {
        border-radius: 50px!important;
    }

    #header > a.navbar-brand {
        color: #fff;
        text-shadow: #000;
        font-weight: bold;
        -webkit-text-stroke: 0;
        -moz-text-stroke: 0;
    }
    #header {
        background: transparent!important;
        text-shadow: 2px 2px 0 rgba(0, 0, 0, .3);
        border-radius: 0 0 9px 9px;
    }
    .nav-link {
		display: block;
		padding: 0.1rem 1rem;
	}
    .collapse,
    .collapse.show {
		display: block!important;
	}
	.navbar-toggler:not(:disabled):not(.disabled),
	.navbar-dark .navbar-toggler-icon {
		display: none
	}
	.navbar-nav {
		display: block;
		position: absolute;
		top: 2px;
		right: 10px;
		font-size: small;
		text-align: right;
	}
    .fa-wifi:before {
        content: "\f1eb";
    }
    .text-dark {
        color: #FFC107!important;
    }
    .bg-danger {
        background-color: #dc3545!important;
        box-shadow: 1px 0px 0px #ff0000, 5px 0px 9px #e94c1e, 8px 0px 15px #ff0057!important;
    }
    .connection-options .bg-warning {
        background-color: #ffc107 !important;
        box-shadow: 0 0 0!important
    }
    .bg-warning {
        background-color: #ffc107!important;
        box-shadow: 1px 0px 0px #FFC107, 5px 0px 9px #e9951e, 8px 0px 15px #e9ff00!important;
    }
    @font-face {
        font-family: digi;
        src: url(https://fonts.cdnfonts.com/s/15049/DS-DIGII.woff);
    }
    @font-face {
        font-family: cyber;
        src: url(https://fonts.gstatic.com/s/orbitron/v31/yMJMMIlzdpvBhQQL_SC3X9yhF25-T1nysimBoWgz.woff2)
    }
    span.js-progress-label.progress-bar-label {
        font-variant-caps: small-caps
    }
    .progress-bar {
        box-shadow: 1px 0px 0px #00b4ff, 5px 0px 9px #00b0ff, 8px 0px 15px #00BCD4;
    }
    .progress {
        background-color: #444444ad;
        height: 2.2rem;
        border-radius: 4px;
        box-shadow: inset 0px 2px 0 #231e1e, 0 0 0px 6px #343a4078/* 1px 0px 6px inset #0761ff, 1px 0px 6px inset #FFC107, 1px 0px 6px inset #f4001b;
    */
    }
    .progress-bar-striped {
        background-image: repeating-linear-gradient(189deg, transparent, #00000069 43px);
        background-size: 1rem;
    }
    .progress-bar-animated {
        -webkit-animation: progress-bar-stripes 1s linear infinite;
        animation: progress-bar-stripes 0.5s linear infinite;
    }
    span.js-progress-label.progress-bar-label {
        color: #fff!important;
        text-shadow: 2px 2px 9px #000;
    }
    span.badge.badge-primary.badge-pill {
        position: absolute;
        bottom: calc(100% + 0.3em);
        left: 0;
        background: transparent;
        color: rgb(44, 26, 47);
        text-shadow: 0px 1px var(--tshadow1);
        font-weight: 900;
        font-size: small;
        font-variant: all-small-caps;
        z-index: 99;
    }
    .col-lg-6 {
		max-width: 100%;
	}

	.offset-lg-3 {
		margin: auto
	}
    .card-body.pt-2.pb-2.pl-0.pr-0, .card.col-lg-6.offset-lg-3:before {
        clip-path: polygon(2% 0, 98% 0, 100% 5%, 100% 95%, 98% 100%, 2% 100%, 0 95%, 0 5%);
        background: #221027f0;
    }
    .card.col-lg-6.offset-lg-3 {
        background: #fff0
    }
    .card.col-lg-6.offset-lg-3:after {
        content: '';
        position: absolute;
        top: -0px;
        Left: -2px;
        background: linear-gradient(125deg, #E91E63, #ff0055, #ff00e2, #00b0ff, #ff0057, #2196F3, #E91E63, #09caed, #ff0057, #ff00f0);
        background-size: 400%;
        border-radius: 11px;
        width: calc(100% + 4px);
        height: calc(100% + 0px);
        z-index: -1;
        animation: animate 30s linear infinite;
        clip-path: polygon(2% 0, 98% 0, 100% 5%, 100% 95%, 98% 100%, 2% 100%, 0 95%, 0 5%);
    }
    .card.col-lg-6.offset-lg-3:after {
        filter: blur(20px)
    }
    @keyframes animate {
        0% {
            background-position: 0 0;
        }
        50% {
            background-position: 300% 0;
        }
        100% {
            background-position: 0 0;
        }
    }
    .card.promo-container-card h5.card-title {
        font-size: revert;
    }
    span.badge.badge-secondary.ml-0.p-2.promo-details-not-available {
        font-size: x-small;
    }
    .card-body.pt-2.pb-2.pl-0.pr-0 h5.card-title {
        border-radius: 10px;
        color: #00ffff00;
        background: var(--online_image) center center/cover no-repeat;
        padding-left: 15%;
        margin: 0px 7px 0px 7px;
        width: 100%;
    }
    .fa-dashboard:before, .fa-tachometer:before {
        content: "\f0e4";
        color: transparent;
    }
    
    .alert-info {
        color: #fff;
        background-color: #d1ecf100;
        border-color: #bee5eb00;
        visibility: hidden;
        
    }

    .alert-info:before {
        content: "🪙Please Insert Coin🪙";
        visibility: visible;
        display: block;
        font-size: large;
    }
    .fa-money:before {
        content: "🪙";
    }
    .fa-ticket:before {
        content: "🎟️";
        filter: saturate(0) brightness(2.5);
    }
     
    @keyframes opacity {
        0% {
            opacity: 1;
        }

        50% {
            opacity: 0.6
        }

        100% {
            opacity: 0.3;
        }
    }
    #available-coins .badge-primary:before {
		content: "🪙";
		FONT-SIZE: large;
		text-shadow: 0 0 1px #902222;
		display: inline-block;
		filter: brightness(1.1);
		position: relative;
        left: -2px;
	}
	
    div#progress-bar {
        margin-top: 1.2rem;
    }
    .card {
        padding: 4px 2px 4px 2px;
    }
    .text-center.js-insert-container .js-insert-details .card-title {
        font-size: xx-large;
    }
    .card.col-lg-6.offset-lg-3 .table {
        padding-right: 2em;
        text-wrap: nowrap;
    }
    .modal-content,
    .card {
        background: #360d3c00;
    }
    .card.shadow-sm .card-body {
        border: 0;
        border-radius: 13px;
        padding: 15px !important;
        box-shadow: rgb(233, 30, 99) 0px 0px 0px 1px inset;
    }
    main#main-content {
        padding: 0 10px 0 10px;
        max-width: 450px;
		margin: auto;
    }
    .card.shadow-sm {
        padding: 11px;
    }
    .alertify .ajs-commands button.ajs-close {
		position: absolute;
		top: 0.7rem;
		border-radius: 4px;
		left: calc(100% - 0.5em);
		box-shadow: 0px 0px 0 1px #2d231d75;
		filter: brightness(0.5);
	}
	.alertify .ajs-commands button.ajs-close:active {
		box-shadow: inset 0px 0px 4px 1px #795548;
	}
    .alertify .ajs-header {
        color: #795548;
        background: linear-gradient(0deg, transparent 3%, var(--yellow) 3%);
        border-radius: 0px;
        border-bottom: 1px solid #c12424;
        background-color: #e91e630f;
        clip-path: polygon(  65% 0,  70% 1em,  100% 1em,  100% 100%,  /* below */  0 100%,  0% 0%,  0% 0%     );
        font-variant-caps: all-small-caps;
        letter-spacing: 2px;
        font-weight: 900;
        padding-left: 20px;
        text-shadow: 0px -1px #1b1208;
        border-radius: 10px 0 0 0;
    }
    .alertify .ajs-header:before {
        content: "☢";
    }
    .p-2 {
        padding: .5rem !important;
    }
    .alertify .ajs-dialog {
        margin-top: 2em;
        border: 0;
        border-right: 0px solid var(--yellow);
        border-left: 0px solid var(--yellow);
        border-bottom: 24px solid var(--yellow);
        background-color: #e91e630f;
        clip-path: polygon( 65% 0,  70% 1.2em,  100% 1.2em,  100% 100%, 100% 100%, 53% 100%, 50% calc(100% - 0.7em), 0 calc(100% - 0.7em), 0 0, 50% 0);
        box-shadow: inset 0px 0px 7px 0px #E91E63;
        backdrop-filter: blur(3px);
        border-radius: 10px;
        max-width: 450px;
    }
    .ajs-dialog:after {
        content: var(--linya);
        position: absolute;
        right: 1rem;
        color: #2c1a2f;
        font-weight: 900;
        text-shadow: 0px 1px var(--tshadow1);
        transform: skewX(-20deg);
        -webkit-text-security: square;
        
    }
    .alertify .ajs-body {
        color: #ffffff
    }
    .alertify .ajs-dimmer {
    background-color: var(--black);
    opacity: 0.9;
    backdrop-filter: blur(2px)
    }
    .alertify .ajs-footer {
        background-color: #607d8b00;
        padding: 15px;
        border-top: 1px solid #e5e5e500;
        border-radius: 0 0 6px 6px;
    }

    .table td,
    .table th {
        border-top: 1px solid #333;
    }
    .border-right {
        border-right: 1px solid #333!important;
    }
    .wifi-connection-info.text-center.mb-2 .table-sm td,
    .card.col-lg-6.offset-lg-3 .table-sm td {
        padding: .1rem;
        display: inline-grid;
    }


    .bg-primary {
        background-color: #2196f369!important
    }
    
    /*buttons*/
    button#btn-buy-eload,
    button#btn-insert-coin,
    	.btn-outline-info,
    	button#btn-use-wipass {
        width: 100%!important;
        max-width: 250px!important;
        padding: 0.6em !important;
    }
    button#btn-buy-eload,
    button#btn-insert-coin, .btn-outline-info, button#btn-use-wipass {
		width: 90% !important;
		max-width: 217px !important;
		margin: 0;
		left: 0;
		right: 0;
		top: 0;
		display: inline-block;
		vertical-align: middle;
	}
    button#btn-buy-eload,
    #epins .container,
    .card.shadow-sm .card-body,
    button#btn-insert-coin,
	.btn-outline-info,
	button#btn-use-wipass {
		--background-color: #221027;
		--border-color: linear-gradient(to bottom right, #f06, #0ef);
		--border-width: 0.1em;
		--edge-size: 0.8em;
		cursor: pointer;
		background: var(--background-color);
		padding: 0.5em 1.5em;
		border: 0;
		position: relative;
		isolation: isolate;
		place-content: center;
		clip-path: polygon(var(--edge-size) 0%, 100% 0, 100% calc(100% - var(--edge-size)), calc(100% - var(--edge-size)) 100%, 0 100%, 0% var(--edge-size));
	}
	button#btn-buy-eload::before,
	#epins .container::before,
	.card.shadow-sm .card-body::before,
	.btn-outline-info::before,
	button#btn-insert-coin::before,
	button#btn-use-wipass::before {
		content: "";
		position: absolute;
		inset: 0;
		background: var(--border-color);
		z-index: -2;
	}
	#epins .container::after,
	.card.shadow-sm .card-body::after,
	.btn-outline-info::after,
	button#btn-buy-eload::after,
	button#btn-use-wipass::after,
	button#btn-insert-coin::after {
		content: "";
		position: absolute;
		inset: 0;
		background: var(--background-color);
		z-index: -1;
		clip-path: polygon(var(--border-width) calc(var(--edge-size) + var(--border-width)* 0.5), calc(var(--edge-size) + var(--border-width)* 0.5) var(--border-width), calc(100% - var(--border-width)) var(--border-width), calc(100% - var(--border-width)) calc(100% - calc(var(--edge-size) + var(--border-width)* 0.5)), calc(100% - calc(var(--edge-size) + var(--border-width)* 0.5)) calc(100% - var(--border-width)), calc(var(--border-width)) calc(100% - var(--border-width)));
	}
	button#btn-use-wipass:hover,
	.btn-outline-info:hover,
	button#btn-insert-coin:hover {
		color: #0ef;
		--background-color: #530f55;
		--border-color: linear-gradient(to bottom right, #0ef, #f06);
		 
		border-radius: 3px;
		transform: translate(-2px, 1px)
	}
	button#add-to-wallet {
		border: 0;
		background: cadetblue
	}
	button#add-to-wallet:hover,
	button#add-to-wallet:active{
		 background: #2ae8c2
	}
	

    .btn-success:hover,
    .btn-dark:hover,
    .bg-success:hover,
    .bg-primary:hover,
    .btn-dark:active {
        background: #03e9f4;
        color: #fff;
        border-radius: 0px;
        box-shadow: 0 0 5px #03e9f4,
        0 0 25px #03e9f4,
        0 0 50px #03e9f4,
        0 0 100px #03e9f4;
    }
    .btn-success:focus,
    .btn-success:not(:disabled):not(.disabled).active,
    .btn-success:not(:disabled):not(.disabled):active,
    .show > .btn-success.dropdown-toggle {
        border-color: #fff;
    }
    .bg-success {
        background-color: #e91e6363!important;
        border-color: #ff0000
    }
    .btn-primary {
        color: #fff;
        background-color: #ffc107;
        border-color: #fd7e14;
    }
    .btn-primary:hover {
        background-color: #fd7e14;
        border-color: #fd7e14;
    }

    .btn-dark {
        color: #fff;
        background-color: #28a7456e;
        border-color: #1b8d15;
    }
    i.badge.badge-danger.pulse {
        font-size: smaller;
        margin-left: 2px;
        right: 0;
        top: 5px;
    }
    .btn-warning:hover {
        color: rgb(255, 255, 255);
        background-color: #FF5722;
        border-color: rgb(220, 53, 69);
    }
    bg-success:focus,
    a.bg-success:hover,
    button.bg-success:focus,
    button.bg-success:hover {
        background-color: #ff397c!important;
    }
    .btn-group-lg > .btn,
    .btn-lg {
        padding: 0.5rem 1rem;
        font-size: 1.25rem;
        line-height: 1.5;
        border-radius: 0px;
    }
    span.device-mac-label,
    span.device-ip-label {
        display: none
    }
    div img {
        filter: contrast(0) brightness(2);
        transform: rotate(45deg) scale(0.6);
    }
    a#btn-btn-resume,
    button.btn.text-white.bg-warning.js-pause-session {
        margin: 12px 0 0 0;
    }

    [style*="float"] {
        height: 55px;
        border-color: #3bf2ff;
    }
    .border-success {
        border-color: #03A9F4!important;
    }
    #pisofi-chat .btn-success {
        background: #2196f378;
    }

    .bg-white,
    .list-group-item,
    #pisofi-chat [class="card border-success"] {
        background: #240716a6!important;
        backdrop-filter: blur(5px)
    }
    .form-control {
        background-color: #161616d1;
        border: 1px solid #2196F3;
    }
    .input-group > .custom-select:not(:last-child),
    .input-group > .form-control:not(:last-child) {
        background: #161616f1;
    }
    .btn-outline-secondary {
        border: 0px;
        z-index: 9;
        position: absolute !important;
        top: -14px;
        display: flex;
        right: -8px;
        font-size: x-small !important;
        background: linear-gradient(225deg, var(--yellow) 90%, transparent 90%);
        border-radius: 0;
    }
    .btn-outline-secondary:hover,
    .btn-outline-secondary:active {
        color: #ed0000 !important;
        background-color: #f4433600;
        border-color: #6c757d00;
    }
    a#btn-show-rates {
        font-weight: 900;
        font-size: large;
        color: #2c1a2f;
        padding: 5px 10px 5px 8px;
        text-shadow: 0px 1px var(--tshadow1)
    }
    .bg-light {
        background-color: #007bff !important;
    }
    h1.epins-title {
        display: none;
    }
    .col-sm-6.m-0.mb-3.promo-container.available .card-body.promo-container-card-body {
        background: linear-gradient(210deg, #9f39646b 18%, #62278963 98%);
        border-radius: 0;
        box-shadow: 0 0 0px 1px inset #ff0763;
    }
    .promo-container.not-available .promo-container-card-body {
        background: #282828;
    }
    .promo-container.not-available .promo-container-card-body .ribbon span {
        background-color: #8d8877;
    }
    .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
        color: #795548;
        background-color: transparent;
        border-color: transparent;
        left: -90%;
        font-weight: 900;
        position: relative;
        z-index: 999;
        top: 39px;
        text-shadow: 0px 1px #ffd89e;
        display: none;
    }
    div#dialog-modal .modal-dialog .modal-content {
        margin-top: 0em;
        border: 30px solid var(--yellow);
        border-right: 0px solid var(--yellow);
        border-left: 0px solid var(--yellow);
        border-bottom: 24px solid var(--yellow);
        background-color: #e91e630f;
        clip-path: polygon(56% 5%, 0% 3%, 100% 3%, 100% 100%, 75% 100%, 54% 100%, 50% 98%, 0 98%, 0 0, 46% 0);
        box-shadow: inset 0px 0px 7px 0px #E91E63;
        backdrop-filter: blur(15px)
    }
    div#dialog-modal .modal-dialog .modal-content::after {
        content: var(--linya);
        color: rgb(44, 26, 47);
        z-index: 999;
        position: absolute;
        font-weight: 900;
        right: 1rem;
        bottom: -24px;
        text-shadow: var(--tshadow1) 0px 1px;
        padding-top: 0px;
        transform: skewX(-20deg);
        -webkit-text-security: square;
    }
    .border-bottom {
        border-bottom: 1px solid #e9030361 !important;
    }
    .modal-footer,
    .modal-header {
        border: none;
    }
    .modal-footer {
        padding: 5px;
    }
    .modal-backdrop.show {
        opacity: 0.8
    }
    .js-eload-insert-message.text-center.p-1.small.alert-success {
        margin-bottom: 10px;
    }
    div#button-options {
        padding-top: 5px;
    }
    div#promos {
        padding: 0px 10px 0px 10px;
        display: initial;
    }
    /*eload*/
    table.table.table-sm.small {
        background: transparent;
    }
    #epins {
        border-top: 34px solid var(--yellow);
        border-right: 0px solid var(--yellow);
        border-left: 0px solid var(--yellow);
        border-bottom: 24px solid var(--yellow);
        background-color: #e91e630f;
        clip-path: polygon(
		65% 0,
		70% 1em,
		100% 1em,
		100% 100%,
		/* below */
		60% 100%,
		55% calc(100% - 0.7em),
		0 calc(100% - 0.7em),
		0 0
    	);
        box-shadow: inset 0px 0px 7px 0px #E91E63;
        backdrop-filter: blur(3px);
        margin-bottom: 5px;
        border-radius: 10px;
        padding: 15px;
    }
    #epins:after {
        content: var(--linya);
        right: 1rem;
        position: absolute;
        color: #2c1a2f;
        font-weight: 900;
        text-shadow: 0px 1px var(--tshadow1);
        bottom: -23px;
        display: block;
        transform: skewX(-20deg);
        -webkit-text-security: square;
    }
    #epins:before {
        content: "☢Promos";
        left: 1rem;
        position: absolute;
        color: #795548;
        font-weight: 900;
        text-shadow: 0px 1px #ffd89e;
        bottom: calc(100% + 0.3em);
        font-variant-caps: all-small-caps;
        letter-spacing: 2px;
        font-weight: 900;
        text-shadow: 0px -1px #1b1208;
    }
    
    .d-flex.d-inline-flex.mt-2 {
        margin-top: 0px !important;
    }
    .container.text-center.my-1 {
        position: relative;
    }
    .container.text-center hr {
        margin-top: 7px;
        margin-bottom: 10px;
    }
    .promo-container.not-available .promo-container-card-body .ribbon span {
        background-color: #8d887700;
    }
    .btn-group.btn-group-toggle {
        display: none;
    }
    .close {
        color: var(--white)
    }
    .nav-tabs {
        border-bottom: 0px solid #dee2e6;
    }
    .text-success {
        color: var(--success) !important;
    }
    footer {
		position: relative!important
	}
     
    .card-body {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        padding: 0.25rem;
    }
    .ribbon-top-right {
        top: -2px;
        right: 0;
    }
    .ribbon {
        width: 78px;
        height: 91px;
        overflow: hidden;
        position: absolute;
    }
    .ribbon-top-right::before {
        top: 0;
        left: 0;
    }
    .ribbon-top-right::after {
        bottom: 0;
        right: -2px;
    }
    .ribbon::before,
    .ribbon::after {
        display: none;
        position: absolute;
        z-index: -1;
        content: '';
        border: 16px solid #ff6200;
    }
    .ribbon-top-right span {
        left: -13px;
        top: 5px;
        transform: rotate(0deg);
    }
    .ribbon span {
        position: absolute;
        display: block;
        width: 95px;
        padding: 6px 0 4px 12px;
        background: linear-gradient(225deg, var(--pink2) 80%, transparent 80%);
        color: #ffffff;
        font: 200 14px / 1 Lato, sans-serif;
        text-shadow: rgba(0, 0, 0, 0.2) 0px 1px 1px;
        text-transform: uppercase;
        text-align: center;
        font-weight: 700
    }

    .card-body.pt-2.pb-2.pl-0.pr-0:after {
        content: "";
        background: #00ffff00;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        position: absolute;
        display: block;
        z-index: -50;
        box-shadow: 0 0 0 3px inset #000;
    }
    .btn-group-lg > .btn, .btn-lg {
        font-size: medium;
    }
    a.bg-primary:focus,
    a.bg-primary:hover,
    button.bg-primary:focus,
    button.bg-primary:hover {
        background-color: #00b1ff !important;
    }
    .navbar-nav .badge-success {
        color: #fff;
        background: linear-gradient(45deg, transparent 5%, var(--pink2) 5%)!important;
        border-radius: 0!important;
        padding-left: 6px !important
    }

    .btn-warning {
        color: #ffffff;
        background-color: #dc3545;
        border-color: #dc3545;
    }
    .btn-warning:not(:disabled):not(.disabled).active,
    .btn-warning:not(:disabled):not(.disabled):active,
    .show > .btn-warning.dropdown-toggle,
    .btn-warning:hover {
        color: #ffffff;
        background-color: #dc3599;
        border-color: #dc3545;
    }
    .btn-outline-secondary:not(:disabled):not(.disabled).active, .btn-outline-secondary:not(:disabled):not(.disabled):active, .show>.btn-outline-secondary.dropdown-toggle {
        color: #fff!important;
        background: linear-gradient(225deg, var(--yellow) 90%, transparent 90%);
        border: 0;
    }
    .fa-chevron-circle-down:before {
        content: "\f0c9";
        font-size: large;
        position: absolute;
    }
    .fa-chevron-circle-up:before {
        content: "\f0ca";
        font-size: large;
        position: absolute;
    }
    div#sessions-dropdown {
        display: none;
        justify-content: center;
        padding: 5px 0 0 0;
        position: absolute;
    }
    div#tbl-sessions .table thead th {
        border-bottom: 0;
    }
    /*carousel slide*/
    .slide {
        display: flex;
        position: absolute;
        left: 0;
        right: 0;
        opacity: 0.7;
        background: none;
        margin: auto;
        padding: 0 10px 0 10px;
        top: calc(0% - 2em);
        max-width: 450px
    }
    .carousel-indicators li,
    .carousel-indicators .active {
        top: -76px;
        display: none;
    }
    div#pisofi_banner {
        height: 137px !important;
    }
    .carousel-control-prev-icon,
    .container.js-message-container,
    .carousel-control-next {
        display: flex;
       /*bottom: -16px;*/
        display: none;
    }
    .carousel-indicators,
    .carousel-control-next-icon, .carousel-control-prev-icon,
    div#connection-notification,
    #tagline.text-dark {
        display: none;
    }
    .carousel-item {
        background-color: transparent;
    }
    .carousel-item-next, .carousel-item-prev {
		transform: scale(0.5)
	}
     
    .connection-info {
    margin-top: 0em;
    border: 30px solid var(--yellow);
    border-right: 0px solid var(--yellow);
    border-left: 0px solid var(--yellow);
    border-bottom: 24px solid var(--yellow);
    background-color: #e91e630f;
    clip-path: polygon(
		65% 0,
		70% 1em,
		100% 1em,
		100% 100%,
		/* below */
		60% 100%,
		57% calc(100% - 0.7em),
		0 calc(100% - 0.7em),
		0 0
	);
    box-shadow: inset 0px 0px 7px 0px #E91E63;
    border-radius: 10px;
    
}
    .connection-options {
        box-shadow: 0 0 0 1px inset var(--pink2);
        border-radius: 10px;
    }
    .connection-info:after {
        content: var(--linya);
        color: #2c1a2f;
        z-index: 999;
        position: absolute;
        font-weight: 900;
        right: 1rem;
        text-shadow: 0px 1px var(--tshadow1);
        padding-top: 0px;
        transform: skewX(-20deg);
        -webkit-text-security: square;
    }
    .connection-info div#device-info {
        font-size: x-small;
        left: 0;
        position: absolute;
        top: calc(100% - 0.9em);
        background: linear-gradient(45deg, var(--yellow) 94%, transparent 94%);
        padding: 2px 12px 0px 4px;
        color: #2c1a2f;
        text-shadow: 0px 1px var(--tshadow1);
    }
    .table-responsive {
        font-size: 9px;
        }
    .card-body.pt-2.pb-2.pl-0.pr-0, .card.col-lg-6.offset-lg-3 .table {
        font-size: smaller;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
    }
    .alertify.ajs-in:not(.ajs-hidden) .ajs-dialog {
        -webkit-animation-duration: 0.2s;
        animation-duration: 0.2s
    }
    hr.other-services-line.mb-0 {
        margin-top: 0.2rem;
    }
    div#available-coins.mb-1 {
        margin-bottom: .75rem !important;
    }
    a.other-services-epins.btn.px-2.mx-1.btn-outline-info {
        width: 100%;
        max-width: 250px;
        margin-bottom: 10px;
        clip-path: border-box
    }
    .alert-danger {
        color: #fff;
        background-color: #df29294d;
        border-color: #f5c6cb;
        animation: glitch 1s
    }
    
    /*watch tv*/
    @keyframes shimmerEffect {
    0% {
        background-position: -100%;
    }
    100% {
        background-position: 100%;
        }
    }
    
    a.btn.btn-info {
        position: absolute;
        right: 3px !important;
        top: -10px;
        z-index: 999;
        border: 0;
        border-radius: 2px 0 0 0;
        padding: 0px 0px 0px 1px;
        background: linear-gradient(90deg, #00dfff, #ff00a5, var(--yellow));
        background-size: 200%;
        color: transparent;
        text-transform: uppercase;
        text-shadow: -3px -3px 0px #ffffff, -2px -2px 0px #4f3131;
        font-weight: 900;
        background-clip: text;
        -webkit-background-clip: text;
        animation: shimmerEffect 2s linear infinite;
    }


    
    /*Percent Indicator*/
    .progress-bar.progress-bar-striped.progress-bar-animated.js-progress::before,
    .progress-bar.bg-warning.progress-bar-striped.progress-bar-animated.js-progress::before {
        content: attr(style);
        left: 6px;
        position: absolute;
        display: block;
        width: 0px;
        top: -3px;
        color: aquamarine;
        mix-blend-mode: overlay;
        clip: rect(18px, 29px, 33px, 0px);
        opacity: 0.5;
    }
    .progress-bar.progress-bar-striped.progress-bar-animated.js-progress::after,
    .progress-bar.bg-warning.progress-bar-striped.progress-bar-animated.js-progress::after {
        content: "Percentage";
        left: 6px;
        position: absolute;
        display: block;
        top: 0;
        color: aquamarine;
        font-variant: all-small-caps;
        mix-blend-mode: overlay;
        opacity: 0.5
    }
    /*free*/
    .pt-2, .py-2 {
        padding: 5px !important
    }
    .border {
        border: 1px dashed #FF9800 !important
    }
    .bg-white {
        margin: 16px;
    }
    /*scrolling text*/
    /*.connection-info:hover::before {
        animation: noxify 15s linear infinite;
    }*/    
	.connection-info::before {
        width: auto;
        padding: 5px;
        color: var(--skyb);
        font-size: xx-small;
        border-radius: 6px;
        position: absolute;
        top: -6px;
        left: 80%;
        white-space: pre;
        overflow: hidden;
        animation: noxify 35s linear infinite;
    }
    
	@keyframes noxify {
        to {
        left: -1064px
        }
    }
    body,html {
        overflow-x:hidden;
    }
    
    :root {
        --linya: "NOXIFY";
        --black: #000;
        --blue: #007bff;
        --indigo: #6610f2;
        --purple: #6f42c1;
        --pink: #e83e8c;
        --pink2: #fe2c55;
        --red: #dc3545;
        --orange: #fd7e14;
        --yellow: #ffb007;
        --green: #28a745;
        --teal: #20c997;
        --cyan: #17a2b8;
        --white: #fff;
        --gray: #6c757d;
        --gray-dark: #343a40;
        --primary: #007bff;
        --secondary: #6c757d;
        --skyb: #00e0ff;
        --success: #28a745;
        --tshadow1: #ffc672;
        --info: #17a2b8;
        --warning: #ffc107;
        --danger: #dc3545;
        --light: #f8f9fa;
        --dark: #343a40;
        --online_image: url(https://i.pinimg.com/originals/32/8a/15/328a151a29a2cf087309e305c126d0a9.gif);
    }

/*!
 * Cyberfi PisoFi Theme
 * Version: 1.0.0
 * Author: Noxi Balasik/YAD
 * License: Personal Use Only
 * Copyright © [2025] Cyberyadix. All Rights Reserved.
 *
 * Terms:
 * - This CSS theme is licensed for personal use only.
 * - Redistribution, resale, or modification for resale is strictly prohibited.
 * - Unauthorized sharing or publishing of this file is a violation of copyright.
 */