/*================================================
    // TYPOGRAPHY
    /================================================*/

    :root{
        --safe-area-inset-top:env(safe-area-inset-top);
        --color-off-white:#fff;
    }


    h1{font-size: 230%;}

    h3{font-size: 130%;}

    .md-content-text h3{font-size: 140%}
    .md-content{border-radius: 10px;}


    h2{font-size: 180%; line-height: 1em;}

    h3{margin-bottom: 0;}

    a{text-decoration: none;}




    .button,
    .small-button,
    .toolbar-font-icon,
    .photo-tile img,
    .arrow-field,
    .onboarding-btns,
    .click-button,
    .menu,
    .link,
    .award-section-items li,
    .outline-button-small,
    a{cursor: pointer;}
    
    .link{color: #2babe2;}

    
    .table-overflow{overflow: auto; padding-bottom: 15px;}

    .table-overflow::-webkit-scrollbar {
        height: 7.5px;
        width: 7.5px;
	}
	
	.table-overflow::-webkit-scrollbar{
        height: 7.5px;
        width: 7.5px;
	}
	
	/* TRACK */
	.table-overflow::-webkit-scrollbar-track{
		background: rgba(0,0,0,0.05);
		border-radius: 5px;
	}
	
	
	
	/* THUMB */
	.table-overflow::-webkit-scrollbar-thumb{
	  background: rgba(0,0,0,0.1);
	  border-radius: 5px;
	  
	}
	.table-overflow::-webkit-scrollbar-thumb:horizontal:active{
	  background: rgba(0,0,0,0.61);
	  border-radius: 5px;
    }
    
    .table-overflow.touch-scroll{-webkit-overflow-scrolling: touch;}
    

    .swipe-table{
        display: grid;
        grid-template-columns: 40vw 1fr;
    }
    .swipe-table table:first-of-type{
        width: 40vw;
        position: sticky;
        left: 0;
    }

    .swipe-table table:first-of-type td .ellipsis{
        max-width: 34vw;
    }
    
    .swipe-table table{font-size: 13px; border-top: 1px solid rgba(0, 0, 0, 0.1);}

    .swipe-table table td{border-right: 1px solid rgba(0, 0, 0, 0.1);}

    

    
    .swipe-table table:first-of-type tr td{
        border-right: 1px solid rgba(0, 0, 0, 0.1);
        background: #fff;
    }

    .tile-feed-item .swipe-table table:first-of-type td,
    .app-tile .swipe-table table:first-of-type td{
        background:#fff;
    }

    .swipe-table table:last-of-type{
        width: 100%;
    }

    .swipe-table table:last-of-type tr td:last-of-type{
        border-right: none;
    }


    .big-heading{position: relative; padding-bottom: 30px;}


    #walkthrough-content-inner h3{font-size: 150%}

    #walkthrough-content{padding: 15vw 7.5vw 7.5vw; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1) }

    #walkthrough-target .fa .tab-bubble,
    #walkthrough-target .fa span{display: none}
    #walkthrough-target .menu-icon.airshot-svg-icon *{stroke:#000!important}
    
    #walkthrough-target .menu-icon.airshot-svg-icon{
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        height: 13px;
        width: 28px;
    }

    .airshot-svg-icon svg{
        display: block;
        width: 100%;
        height: auto;
    }


    .onboarding-container h2{margin-top:0!important; padding-bottom: 22.5px!important}

    #onboarding-view-body .tab-view .onboarding-text{transform: translate3d(25%,0,0); transition-delay: 0.1s; opacity: 0; transition-property: opacity, transform}

    #onboarding-view-body .tab-view.show .onboarding-text{transform: translate3d(0%,0,0); opacity: 1;}
    #onboarding-view-body .tab-view.hide .onboarding-text{transform: translate3d(-25%,0,0); opacity: 0;}

    /*================================================
    // LOADERS
    /================================================*/

    .icon-loading,.icon-reload,.button.loading:after,.footer-button.loading:after{
        box-sizing: border-box;
        width: 32px;
        height: 32px;
        border-radius: 100%;
        border: 2px solid rgba(255, 255, 255, 0);
        border-top-color: #fff;
        -webkit-animation: turn 1s infinite linear;
        animation: turn 1s infinite linear;
        display:block;
        content:"";
        text-indent: -9999px;
        background: none;
    }	 


    
    .tile-feed-item .icon-loading,
    .icon-loading.in-colour{border-top-color: #2babe2!important}

    .button.loading:after{position: absolute; top: 7px; right: 11.5px; width: 28px; height: 28px;}


    #background-stage .icon-loading{border-top-color: #2babe2!important}
    .theme-applied #background-stage .icon-loading{border-top-color: #fff!important}

    .footer-button.loading:after{position: absolute; top: 15px; right: 15px; width: 28px; height: 28px;}





    /*================================================
    // ICONS
    /================================================*/


    #account-view-tab .tab-icon img,
    #account-view-tab-menu .menu-icon img {
        width: 100%;
        height: auto;
        border-radius: 50%;
        z-index: 1;
        position: absolute;
        left: 0;
    }

   
    .toolbar-center-icon{ height: 40px; width: 40px; position: absolute; top: 0; left: 50%; transform:translateX(-50%)}

    .icon-logo{ background-size:100%;}

    .guide-icon.icon-logo{background-size:100%!important;}

    .icon-size-large{width: 40vw; height: 40vw; max-width: 128px; height: 128px;}
    .icon-size-small{width:64px; height: 64px;}


    .toolbar-font-icon .fa-angle-left{
        font-size: 21px!important;
    }

    .fieldset-group fieldset:active *,
    .list-button:active span{
        color: var(--primary-color);
    }

    @media(hover: hover) and (pointer: fine) {

        .graph-item-hover:hover,
        .hover-item:hover{cursor: pointer;}

        .broadcast-item:hover a,
        .hover-item:hover strong{
            color: var(--primary-color);
        }


        .broadcast-item:hover .broadcast-item-icon{
            transform: translate3d(0,-2.5%,0);
        }

        .discussion-item:hover{cursor: pointer;}
        .graph-item-hover:hover strong,
        .graph-item-hover:hover .fa-angle-right,
        .discussion-item:hover strong,
        .discussion-item:hover i{
            color: var(--primary-color);
        }
        .stats-list li:hover .stats-list-details,
        .fieldset-group fieldset:hover *,
        .list-button:hover span{
            cursor: pointer;
            color: var(--primary-color);
        }

    }

    .font-icon .fa{color: white!important;}


    .signin-logo{width:25vw; height:25vw; margin:0 auto 0; max-width: 128px; max-height: 128px;}


    .floating-font-icon{
        position: relative;
    }
    .floating-font-icon div{
        position: relative;
        animation: 2s float-hover ease-in-out infinite;
        z-index: 1;
    }

    .floating-font-icon::after{
        content: ' ';
        background: rgb(0, 0, 0,0.07);
        height: 35px;
        width: 100%;
        position: absolute;
        bottom: -28px;
        left: 0;
        filter: blur(7px);
        z-index: 0;
        border-radius: 50%;
        animation: 2s float-hover-shadow ease-in-out infinite;
    }

    .onboarding-icon{
        width:96px; height:64px; margin:45px auto 45px
    }
    
    .onboarding-icon svg{
        height: 64px;
    }

    @keyframes float-hover-shadow {

        0%{
            transform: scale(.8);
        }
        50%{
            transform: scale(0.5);
        }
        100%{
            transform: scale(.8);
        }
    }


    /*================================================
    // ICON BANNERS
    /================================================*/

    .no-items *,
    .empty-screen *{color: #999;}
    .no-items-icon{ margin:0 auto 16px}
    .no-items-icon .fa{font-size: 64px;}

    .no-items h2,
    .no-items h3{
        margin:0 0 8px;
    }
    

    @keyframes float-hover{
        0%{
            transform:translate3d(0,5%,0)
        }
        50%{
            transform:translate3d(0,-5%,0)
        }
        100%{
            transform:translate3d(0,5%,0)
        }
    }

    /*================================================
    // TOOLBARS
    /================================================*/

    .fragment-toolbar, .panel-toolbars {
        font-size: 13px;
    }

    .fragment-toolbar.no-safe-area:before{
        display:none;
    }

    .toolbar-tools{position: absolute; top: 0; right: 7.5px; z-index: 2}
	.toolbar-tools li{width: 38px; height: 48px; display:block;float: left;cursor: pointer; position: relative}
    .toolbar-tools li i{ font-size: 20px; position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%);}	
    
    .bubble{ background: #2babe2; }
    .toolbar-tools .bubble{right: 3px; top: 3px; background: #2babe2; z-index: 1; line-height: 12px}

    .ellipsis{white-space: nowrap;overflow: hidden;text-overflow: ellipsis; display:inline-block; padding:0; width:90%}

    .toolbar-text{padding:16px 5px;  margin:0 10px;cursor:pointer;display:block; line-height:100%; text-transform:uppercase;font-size: 13px;font-family: 'WorkSans-Bold',sans-serif;}

    .panel-toolbars{font-size: 13px;}


    .toolbar-drag-handle{
        cursor: pointer;
        height: 6px;
        background:rgba(0,0,0,0.5);
        border-radius: 3px;
        width: 25vw;
        max-width: 200px;
    }
    
    .campaign-counter{
        display: flex;
        align-items: center;
        justify-content: center;
        right:3px;
        top:5px;
        left: auto;
    }


    .fragment-toolbar.hidden,
    .toolbar.hidden{
        opacity: 0;
        background: none;
        box-shadow: none;
        transition-property:transform,background, opacity, box-shadow
    }

    .fragment-toolbar.hidden .toolbar-center,
    .toolbar.hidden .toolbar-center{
        transform:scale(0); 
        opacity:0!important;
        transition-property:transform, opacity;
        transition-duration:500ms;
    }


    .toolbar-border{border-bottom: 1px solid rgba(0, 0, 0, 0.1);}
    .toolbar-shadow{box-shadow: 0 0 5px rgba(0,0,0,0.3);}
    .button-shadow{box-shadow: 0 -2.5px 7.5px rgba(0,0,0,0.1);}

	

    .toolbar-font-icon .fa{
        font-size: 20px;
    }
  

    .menu-button-list ul{
        gap:8px;
        padding:4px!important;
    }

    .menu-button-list li{
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        width:36px;
        height: 36px;
    }

    .menu-button-list li .fa{
        font-size: 19px;
        
    }
    @media (pointer: fine) {

        .menu-button-list li:hover{
            background: var(--primary-color);

        }
    }

    @media (pointer: fine) {
        .menu-button-list li:hover .fa{
            color: #fff;
            animation: 1s float-hover ease-in-out infinite;
        }
    }
    /*================================================
    // PAGE TABS
    /================================================*/

    .white-page-nav .tab-navigation{
        background: #fff; 
        position: relative; 
        z-index: 2;
        transform:translate3d(0,0,0);
        box-shadow: 0 2.5px 7.5px rgba(0, 0, 0, 0.1);
    }
    .tab-navigation li:after{background: #2babe2; height: 3px; }
    

    .tab-navigation li a{font-size: 13px; text-transform: uppercase;}



    /*================================================
    // BUTTONS
    /===============================================*/ 

    .button{ margin: 0 auto 16px;}

    /* Fix position when icon menu pop over is contained in a button */
    .button .menu-button-list {top:-48px}

    .button i{display: inline-block; margin-right: 7.5px; font-size: 15px}

    .button-white{border-color: #fff; background: none; color: #fff}

    .button-no-background,
    .button-background-none{background: none!important; color: #2babe2; }



    .button.float-left{min-width: 120px; margin-right: 15px}

    .button.small{font-size: 90%; padding: 9px 12px; max-width: 120px; margin:30px auto 0;  border-radius: 5px;}

    .footer-button{color: #fff; background: #2babe2; text-align: center; font-family: 'Roboto-Light'; text-transform: uppercase}

    
    .morph-button{transition: 0.3s  cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-property:  opacity; position: relative;}
    
    .morph-button .loader{display:none; }

    .morph-button .finish{transform: translate3d(-50%,-40%,0);transition: 0.3s  cubic-bezier(0.68, -0.55, 0.265, 1.55); transition-property: transform, opacity; opacity: 0;}

    .morph-button .finish .fa{font-size: 26px!important; margin: 0!important}

    .morph-button.connect{ opacity: 0}

    .morph-button.connecting{opacity: 1; border-color: transparent!important; background: transparent!important}
    .morph-button.connecting .loader{display:block}
    .morph-button.connecting span{opacity: 0;}

    .morph-button.complete .loader{display:none}
    .morph-button.complete .finish{transform: translate3d(-50%,-50%,0); opacity: 1;}


    .sso-btn{
        border-radius: 50%;
        transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55)
    }

    .bg-dark .sso-btn{
        background:rgba(255,255,255,0.9);
    }

    .bg-dark .sso-btn:hover{
        background:#fff
    }
    .bg-dark .sso-btn .fa{
        color:#000;
    }

    .bg-white .sso-btn{
        background:#000;
    }
    
    .bg-white .sso-btn .fa{
        color:#fff;
    }

    @media (pointer: fine) {
       
        .bg-dark .sso-btn:hover{
            background:rgba(255, 255, 255, 0.9);
        }
        .bg-white .sso-btn:hover{
            background:rgba(0, 0, 0, 0.9);
        }
    }

    /*================================================
    // VIEWS
    /================================================*/   


    .modal{ padding: 60px 15px; }

    .modal-flip-h{transform-style: preserve-3d;transform: rotateY(-90deg);box-shadow: 0 0 3px rgba(0,0,0,0.3); opacity: 0; transition-property: opacity, transform;}
    .modal-flip-v{transform-style: preserve-3d;transform: rotateX(-90deg);box-shadow: 0 0 3px rgba(0,0,0,0.3); opacity: 0; transition-property: opacity, transform;}
    .modal-pull-z{transform-style: preserve-3d;transform: translateZ(600px) rotateX(20deg); box-shadow: 0 0 3px rgba(0,0,0,0.3); opacity: 0; transition-property: opacity, transform;}


    .show.modal-flip-h{
        transform: rotateY(0) translate3d(0,0,0);
        opacity: 1;
    }

    .show.modal-flip-v{
        transform: rotateX(0) translate3d(0,0,0);
        opacity: 1;
    }
    .show.modal-pull-z{
        transform: rotateX(0) translate3d(0,0,0);
        opacity: 1;
    }



    .scrolled-up .campaign-poster{transform: translate3d(0,100%,0)!important;}

    .scrolled-up .campaign-poster{transition: 1s linear transform}


    /*================================================
    // FORMS
    /================================================*/   

    .dialing-code-item{cursor: pointer;}
    .dialing-code-item td{background:rgba(0, 0, 0,.01)}


    .tiny-label{font-size: 13px; color: #000; line-height: 1em;}


    .label-icon .fa{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 21px; height: 21px; text-align: center; font-size: 21px}
 

    .no-lr-padding{padding-left:0; padding-right:0}

    .wrong{background:none!important; border-bottom: 1px solid #cf4c5e;}

    .wrong input::placeholder{color: #cf4c5e;}

    .wrong .field-icon{color: #cf4c5e;}
    .wrong .placeholder-label{color: #cf4c5e!important;}


    

    .placeholder-label.to-center{
        left: 50%;
        transform: translate3d(-50%,0,0);
        text-align: center
    }

    

    /* Analytic Filter Select */
    .analytic-filter-select{
        position: relative;
        text-align: center;
        cursor: pointer;
        font-size: 80%; letter-spacing: 1.5px; text-transform:uppercase;
    }

    .analytic-filter-select select{cursor: pointer;}


    .filter-grid{display: grid; grid-template-columns: 1fr;}
    .filter-grid .column{position: relative; padding:7.5px 30px 7.5px 30px; border-bottom:2px solid rgba(0,0,0,0.1); cursor:pointer}

    .filter-grid.x2{grid-template-columns: 50% 50%;}

    /*================================================
    // PASSWORD FORM
    /================================================*/  

    .password-meter{position:relative; text-align: center}

	.password-meter span{display: inline-block; height:5px; border-radius: 5px; width: 21%; margin: 1%; background:rgba(0,0,0,0.1)}

    .field-loader,
    .field-validator,
	#password-check-indicator,
	#password-confirm-indicator{ display: none!important;}

    .field-loader.show,
    .field-validator.show,
	#password-check-indicator.show,
	#password-confirm-indicator.show{display: block!important;}

	.password-meter.score-1 span:nth-of-type(1){
		background:#E74C3C;
	}

	.password-meter p{color:#E74C3C;}

	.password-meter.score-2 span:nth-of-type(1),
	.password-meter.score-2 span:nth-of-type(2){
		background:#E67E22;
	}

	.password-meter.score-2 p{color:#E67E22;}

	.password-meter.score-3 span:nth-of-type(1),
	.password-meter.score-3 span:nth-of-type(2),
	.password-meter.score-3 span:nth-of-type(3){
		background:#F1C40F;
	}

	.password-meter.score-3 p{color:#F1C40F;}

	.password-meter.score-4 span{
		background:#1ABC9C;
	}

    .password-meter.score-4 p{color:#1ABC9C;}
    

    .field-loader{position: absolute; right:0; top:7px; width:28px; height: 28px; border-top-color: #b3b3b3}
    .field-icon{position: absolute; right:0; top:12px; font-size:17px; color:#b3b3b3;}

    /*=========================================================
	// GOOGLE CITY SEARCH
    /=========================================================*/
    
    #google-map:after,
    #google-map:before{
        content: ' ';
        position: absolute;
        background: #2babe2;
        transform: translate3d(-50%,-50%,0);
        left: 50%; top: 50%;
        z-index: 1;
    }

    #google-map:after{width:100%; height: 1px;}
    #google-map:before{height:100%; width: 1px}
  

	.pac-container{box-shadow:none!important; border-top:none!important; border-bottom:1px solid rgba(0,0,0,.1);  margin:8px 0 0!important;  z-index:10004;}
	.pac-container:after{display:none!important;}
    .pac-icon{background:none!important; background-size:21px!important; width:21px!important; height:21px!important}
    .pac-icon:before{font-family: 'FontAwesome Light'; content: "\f3c5"; font-size: 21px}
	.pac-item{padding:7.5px 15px!important; font-family:'Roboto-Light', sans-serif!important}


    /*================================================
    // CONTENT
    /================================================*/    


    .data-table td{padding: 12px 8px; background: none;}
    .cell-padding-large td{padding: 16px 8px}

    .bg-white.data-table td{background: #fff;}

    tr.ui-sortable-helper td{border-top: 1px solid rgba(0, 0, 0,.1);}
    tr.ui-sortable-helper td:last-of-type{border-right: 1px solid rgba(0, 0, 0,.1);}


    td .bubble{right:auto; top: 11px; left: 5px}
    .arrow-forward{padding-right: 0; text-align: center; width: 20px}
    .arrow-forward i{font-size: 30px; color: #666}


    .round-stat{width:25vw; height:25vw; margin:0 15px; position:relative; display: inline-block;}
    .round-stat-number{position:absolute; top:50%; left:50%; transform:translate3d(-50%,-50%,0); font-size: 32px; width: auto; text-align: center; height: 32px; line-height: 32px; color: #2babe2}

    .chart{height: 25vh;  margin-bottom: 45px; width: 100%;}

    
    
    .padding-bottom-none{padding-bottom: 0}


    #banner-mobile-view{background:#444;}
    #banner-mobile-view img{
        height: 100%;
        width: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    #banner-mobile-view video{
        height: 100%;
        width: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }

    #banner-mobile-view img.portrait{
        width: 100%;
        height: auto;
    }

    

    .timeline-point-date,
    .small-text{color: #666; font-size: 13px; text-transform: uppercase}

    .campaign-poster{height:calc(100vh - 46px);}
    .campaign-info{height:calc(100vh - 46px);}
    .statusbar-is-overlay #bottom-top-toolbar.top{padding-top: 15px}
    .statusbar-is-overlay .campaign-info{height:calc(100vh - 61px);}

    .iphone-x .statusbar-is-overlay .campaign-info{height:calc(100vh - 76px);}
    .iphone-x .statusbar-is-overlay .campaign-poster{height:calc(100vh - 76px);}
    .iphone-x .statusbar-is-overlay #bottom-top-toolbar{padding-bottom: 30px;}
    .iphone-x .statusbar-is-overlay #bottom-top-toolbar.top{padding-top: 59px; padding-bottom: 0}

    .iphone-x .statusbar-is-overlay #bottom-top-toolbar.top .toolbar-center{padding-top: 76px!important}

    .iphone-x #onboarding-view nav{bottom:20px}


    .white-text .feed-icon,
    .white-text .font-icon{border-color: #fff!important;}
    .white-text *{color: #fff;}
    .white-text i{color: #fff!important}
  

    /*====================================================
    // ONBOARDING
    /===================================================*/

    /* Banner */
    #banner-view{position: relative;height:80vh; background:#1f1f1f; overflow: hidden;clip-path: polygon(50% 0%, 100% 0, 100% 100%, 50% 75%, 0 100%, 0 0);-webkit-clip-path:polygon(50% 0%, 100% 0, 100% 100%, 50% 75%, 0 100%, 0 0)}
    #banner-mobile-view{position: relative;height:75vh; background:#1f1f1f; overflow: hidden;clip-path: polygon(50% 0%, 100% 0, 100% 100%, 50% 85%, 0 100%, 0 0);-webkit-clip-path: polygon(50% 0%, 100% 0, 100% 100%, 50% 85%, 0 100%, 0 0);}

    
    .onboarding-info{margin-top: -30vh!important}

    #banner-view video,
    #banner-view img{position: absolute; width: 100%; height: auto; transform: translate(-50%,-50%); top: 50%; left: 50%;}

    .onboarding-info h1{font-size: 250%; line-height: 1.1em; margin-bottom: 30px;color: #12112b;}
    .onboarding-info h2{color: #12112b; text-transform: uppercase; margin-bottom: 7.5px; line-height: 1em}
    .onboarding-info p{line-height: 1.5em; margin-bottom: 30px}


    .media-slides-grid{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(48%, 1fr));
        grid-column-gap: 5px;
        grid-row-gap: 5px;
    }

    .media-slide{display: inline-block;  background: #000; border-radius: 5px; position: relative; overflow: hidden; cursor: pointer; line-height: 0em}
    .media-slide img,
    .media-slide video{width: 100%; height: auto;}

    .media-slide video{position: relative; top: 50%; transform: translateY(-50%)}

    .video-overlay-bg{background: rgba(0, 0, 0,.3); position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0;}

    .video-overlay.show .video-overlay-bg{opacity: 1;}

    .onboarding-media-mobile .media-slide video,
    .onboarding-media-mobile .media-slide img{
        height:100%;
        width: auto;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%)
    }

    .desktop-x1 .media-slide{
        width: 100%;
        height: auto;
    }

    .onboarding-media-mobile .media-slide{width:38.5vw; height: 69vw}


    

    .onboarding-section{padding-bottom:60px;}

    .reward-table{font-size: 15px;}
    .reward-table td{padding: 15px 0}

    .request-play .overlay{opacity: 0; transition:opacity 0.3s ease-out}
    .request-play .video-play-btn{display:none; cursor: pointer}

    .request-play.show .overlay{opacity: 1;}
    .request-play.show .video-play-btn{display:block;}

    

    /*================================================
    // FEED CONTENT
    /================================================*/   

    .app-tile, .tile-feed-item{background:#fff;  box-shadow: 0 2.5px 25px rgba(0,0,0,0.05); border-radius: 10px; margin: 0 2.5vw 30px; padding: 5vw}
    .avatar-icon{background: rgba(0, 0, 0,0.1); width: 36px; height: 36px; border-radius: 50%; position: relative;}
    .avatar-icon img{display: block; width: 100%; height: auto; border-radius: 50%}

    .icon img,
    .avatar-icon.radius-20,
    .avatar-icon.radius-20 img{border-radius: 20%; width: 100%; height: auto; display: block;}



    /*================================================
    // FEED CONTENT
    /================================================*/   

    .page-tab-nav .flex{justify-content: center; gap:4px}
    .page-tab-nav .bubble{position: static; display:none}
    .page-tab-nav .bubble.show{ display:block}
  

    .feed-icon{width: 62px; height: 62px; border: 2px solid #2babe2; margin:16px auto 0; border-radius: 50%; position: relative}
    .feed-icon i{color: #2babe2; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 24px}


    .disable-transitions{
        transition: none!important;
        box-shadow: none;
        visibility: hidden;
        border-radius: 0;
        background: none!important;
    }
    .disable-transitions *{
        transition: none!important;
        box-shadow: none;
        visibility: hidden;
        border-radius: 0;
        background: none!important;
    }

    .disable-view{
        transition: none!important;
        box-shadow: none;
        visibility: hidden;
        border-radius: 0;
        background: none!important;
    }
    .disable-view *{
        display: none;
        transition: none!important;
        box-shadow: none;
        visibility: hidden;
        border-radius: 0;
        background: none!important;
    }

    .panel.show .disable-transitions{display: block;}

    /* === Feed Item == */ 
    .feed-item{
        position: relative;
        padding-bottom: 38px;
    }

    .feed-item.highlight{
        box-shadow: 0 0 0 2px var(--primary-color);
        animation: 1s ease-in highlight ;
        animation-iteration-count: 3;
    }

    @keyframes highlight {
        0%{box-shadow: 0 0 0 2px transparent;}
        50%{box-shadow: 0 0 0 2px var(--primary-light-color);}
        100%{box-shadow: 0 0 0 2px transparent;}
    }
   

    /* === Feed Header == */ 
    .feed-item-header{
        line-height: 1.2em;    
        column-gap: 8px;
        grid-template-columns: 1fr 42px;
    }

    .feed-item-header h3{ font-size: 140%; line-height: 1.2em;}


    /* === Feed State == */   
    .feed-activity-state{
        color: #fff;
        padding:var(--padding-xsmall) var(--padding-medium);
        border-radius: 0 0 var(--radius) var(--radius);
        opacity:0; 
        text-transform: uppercase; 
        font-size: 10px; 
        letter-spacing: 1.5px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .feed-activity-state.show{opacity: 1}
    .feed-activity-state-icon{opacity: 0;}

    .feed-activity-state.show .feed-activity-state-icon,
    .feed-activity-state.complete .feed-activity-state-icon{opacity: 1;}


    /* === Feed Reaction == */   
    .reaction-message{text-align: center;}
    .feed-meta{ font-size: 13px;}
    .feed-meta span{display: inline-block;  text-align: center; padding: 0 7.5px; }
    .feed-meta i{display: inline-block; font-size: 17px; color: #fff!important}


    /* === Feed Media == */   
    .feed-item-media img{width:100%; height:auto; display:block;}

    .feed-item-media .media-transition{opacity: 0;transition:opacity 0.3s linear;}
    .feed-item-media.show .media-transition{opacity: 1;}

    .feed-item-media{
        position: relative;
    }

    .feed-item-audio,
    .feed-item-video,
    .feed-item-youtube,
    .feed-item-image{
        display: none;
    }

    .feed-item-media audio{
        position: absolute;
        bottom: 16px;
        right: 16px;
        left: 16px;
        height: 35px;
        display: block;
        width: calc(100% - 32px);         
    }

    .audio-poster img{
        filter: blur(100px);
        width: 200%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }


    .feed-item-media img,
    .feed-item-media video{
        display: block;
        width: 100%;
    }

    .audio-poster{
        aspect-ratio: 16 / 10;
        position: relative;
        overflow: hidden;
    }

    @supports not (aspect-ratio: 1 / 1) {
        .android .audio-poster{
            height: 60vw;
            max-height: 384px;
        }
    }

    .audio-poster-thumbnail{width:40%; transform:translate(-50%,-50%); left:50%; top:50%; position:absolute; overflow:hidden;  }
    .audio-poster-thumbnail img{width:100%; height:auto; display:block;}


    /* === Feed Loaders == */  
    .bg-skeleton-loader.feed-item-image,
    .bg-skeleton-loader.feed-item-video{
        aspect-ratio: 16 / 9;
    }

    .bg-skeleton-loader.feed-item-image{
        aspect-ratio: 1024 / 768;
    }

    
    /* === Todo Items == */  
    .todo-item:hover{
        color: var(--primary-color);
        cursor: pointer;
    }
    .todo-item:hover .todo-item-icon{
        background: rgba(0, 0, 0, 0.05);
    }

    .todo-item.active .todo-item-icon{
        color: #fff;
        background: var(--primary-color);
    }

    
    /* === Failed Activity === */
    .failed{
        filter: grayscale(1);
    }

    .failed .feed-activity-subview{display: none;}


    .pinned-icon .fa{
        transform: translate(0,1px);
        display:inline-block; 
        font-size:80%; 
        margin-left:4px
    }

    .label-tag,
    .new-tag{
        background: var(--accent-color);
        color: white;
        font-size: 9px;
        font-family: var(--body-bold-font);
        padding: 3px 4px;
        border-radius: 3px;
        line-height: 1em;
        transform: translate(0, -1px);
        display: inline-block;
    }



    .activity-locked{
        background:none!important;
        box-shadow: none!important;
    }

    .activity-locked .activity-btn{
        display:none;
    }


    .static-snackbar-message{
        display: grid;
        align-items: center;
        gap: var(--margin-xsmall);
        text-align: left;
        line-height: 1.2em;
        grid-template-columns: auto 1fr 10px;
    }


    

    .static-snackbar-icon{
        width:36px; 
        height:36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-items: center;
        justify-content: center;
        background:var(--primary-color);
        line-height: normal;
        flex-shrink: 0;
    }


    .static-snackbar-icon .fa{
        font-size: 16px;
        list-style: normal;
        color: white;
    }



    .goal-ring-icons .static-snackbar-icon{
        width: 28px;
        height: 28px;
    }

    .goal-ring-icons .static-snackbar-icon .fa{
        font-size: 14px;
    }

    .goal-ring-icons .static-snackbar-icon.darker-icon::after{
        content: ' ';
        position: absolute;
        top:0;
        right:0;
        bottom:0;
        left:0;
        background: rgba(0, 0, 0, 0.1);
        border-radius: 50%;

    }

    .goal-ring-icons{position:relative}

    .goal-ring-icons .static-snackbar-icon:nth-of-type(1){
        position: relative;
        z-index: 1;
    }
    .goal-ring-icons .static-snackbar-icon:nth-of-type(2){
        position: absolute;
        left:-50%;
        top:0;
        z-index: 0;
    }
    

    /*================================================
    // TIMELINE
    /================================================*/   

    

    /* Font Icon */
    .font-icon{width: 64px; height: 64px; border: 2px solid #6e97e9; margin:15px auto 0; border-radius: 50%; position: relative}


    .font-icon i{color: #6e97e9; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 24px}

    .font-icon.solid{width: 42px; height: 42px; border: none; margin:0; }
    .font-icon.solid i{color:#fff;font-size: 18px;position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}

    .font-icon.ribbon{
        margin-top: -5vw;
        padding: 15px 5px 0px;
        border-radius: 0 0 10px 10px;
    }


    .font-icon.large{
        width:90px;
        height: 90px;
    }

    .font-icon.large i{
        font-size: 42px;
    }

    

    .card-popup-banner{
        min-height:240px; width:100%; position:relative; border-radius:7.5px 7.5px 0 0
    }

    .card-popup-icon{
        background: #fff;;
        position: relative; 
        box-shadow: 0 2.5px 7.5px rgba(0, 0, 0,.1);
        border-radius: 50%;
        margin:45px auto 45px; 
        width:104px; 
        height:104px
    }

    .primary-color{color: #2babe2;}

    /*======================================================
    // ANIMATIONS
    /=======================================================*/


    .media-transition{transition:opacity 0.3s linear;}
    

    /* Animation Keyframes */
    @keyframes pop-in-icon {
        0% {
        transform: scale(0.9);
        opacity:0.5;
        }
        50% {
        transform: scale(1.05);
        opacity:1;
        }
        100% {
        transform: scale(1);
        opacity:1;
        }

    }


    .sparkle{position: relative;}
    .sparkle:after,
	.sparkle:before{
		position: absolute;
		width: 100%;
		height: 100%;
		content: ' ';
		top: 0;
		left:0;
	}

    .sparkle:after{
		background: url('images/svg/sparkle-1.svg') center center no-repeat; background-size: 100%;
		animation: 2s fadeInOut infinite;
	}

	.sparkle:before{
		background: url('images/svg/sparkle-2.svg') center center no-repeat; background-size: 110%;
		animation: 2s fadeInOut infinite 0.666s;
		z-index: 2;
    }
    
    @keyframes fadeInOut{
		0%{
			opacity: 0;
		}
		50%{
			opacity: 1
		}
		100%{
			opacity: 0
		}
	}

    /*======================================================
    // PHOTOS
    /=======================================================*/

    .photo-grid {
        display: grid;
		grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
        align-items: center;
        justify-content: center;

    }

   
    .photo-grid.x-2{
        grid-template-columns: 1fr 1fr;
    }

    .photo-grid.x-1{
        grid-template-columns: 1fr;
    }

    

    .photo-tile-container .photo-icon{
        position: absolute;
        left: 50%;
        top: 50%;
        width:100%;
        transform: translate(-50%,-50%);
        color:#444;
        line-height: normal;
        
    }

    .photo-tile-container .photo-icon .fa{
        font-size: 4vh;
    }


    .photo-tile-container .photo-icon .font-overline{
        font-size: 10px;
        line-height: normal;
        letter-spacing: 0.2px;
    }

    
    .photo-grid.x-1 .photo-tile-container .photo-icon .fa{
        font-size: 9vh;
    }

    .photo-grid.x-2 .photo-tile-container .photo-icon .fa{
        font-size: 6vh;
    }

    .photo-tile-container .progress-bar{display:none}

    .photo-tile-container.uploading .progress-bar{display: block;}
    .photo-tile-container.uploading .fa,
    .photo-tile-container.uploading span{display: none;}

    .photo-tile-container{
        position: relative;
    }


	.photo-tile {
        position: relative;
        break-inside: avoid;
        width : 100%;
        aspect-ratio: 1;
        background: rgba(0,0,0,0.1);
        border-radius: 10px;
        overflow: hidden;
        z-index: 0;

    }
    


    .photo-grid.x-1 .photo-tile{
        aspect-ratio: 16 / 9;
    }

    @supports not (aspect-ratio: 1 / 1) {
        .android .photo-tile{
            height: 25vw;
        }


        .android .photo-grid.x-1 .photo-tile{
            height: 56.25vw;
        }

        .android .photo-grid.x-2 .photo-tile{
            height: 37.5vw;
        }
    }

    
    
    .photo-tile img,
    .photo-tile video{position: absolute; left:50%; top: 50%; transform: translate3d(-50%,-50%,0); display: block; width: 100%; height: auto;}

    .photo-tile video{height:100%; width:auto}

    .photo-tile img.landscape{width: auto; height: 100%;}
    .photo-tile img.portrait{width: 100%; height: auto;}



    .navigation-bar{
        list-style: none;
        display: grid;
        text-align: center;
        grid-template-columns: repeat( auto-fit, minmax(20%, 1fr) );
        height:58px;
        position:absolute;
        bottom:env(safe-area-inset-bottom);
        left:0;
        right:0;
    }

    .navigation-bar-item{
        display:flex;
        align-items:center;
        justify-content:center;
    }
    .navigation-bar-icon .fa{
        font-size:24px;
        cursor:pointer;
    }

    .bg-black-translucent{background:rgba(0,0,0,0.1); -webkit-backdrop-filter: blur(10px);backdrop-filter:blur(10px)}

    .media-track-bar-progress,
    .media-track-bar{height:5px;}
    .media-track-bar{ background:rgba(255,255,255,0.5)}


    #media-track-current,
    #media-track-duration{
        position:absolute;
        bottom:40px;
        color:#fff;
        font-size:11px;
        background:none;
        border:none;
    }

    #media-track-current{left:5px}
    #media-track-duration{right:5px; text-align:right}

    #photo-viewer{background:#000;}
    #photo-viewer img{position: absolute; left:50%; top: 50%; transform: translate3d(-50%,-50%,0); display: block; width: 100%; height: auto;}

    #photo-viewer img{width:100vw; height: auto;}

    #photo-viewer video{background:#000;width: 100vw; height: auto; position: absolute; left:50%; top: 50%; transform: translate3d(-50%,-50%,0);  margin-bottom: env(safe-area-inset-top)}


    @media screen and (min-width:768px) and (orientation: portrait){

        #photo-viewer img{ border-radius:5px; box-shadow:0 2.5px 25px rgba(0,0,0,0.3); z-index:1}

        #photo-viewer img.landscape{max-width:95vw;}
        #photo-viewer img.portrait{max-height:80vh; height:100%; width: auto;}

        
        #photo-viewer video{max-height: 100vh;}

    }
    
    @media screen and (min-width: 1024px) and (orientation: landscape) {


        #photo-viewer img{border-radius:5px; box-shadow:0 2.5px 25px rgba(0,0,0,0.3); z-index:1}

        #photo-viewer img{max-height:85vh; height: 100%!important; width: auto!important;}


        #photo-viewer video{max-height: 100vh;}
    }

    .will-remove{opacity: 0!important;}


    #tag-photo-preview{
        height: 260px;
        background: #000;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border-radius: 10px 10px 0 0;
    }

    #tag-photo-preview img{
        height: 100%;
        width: auto;
    }

    #tag-photo-preview video{
        height: auto;
        width: 100%;
        max-height: 100%;
    }

    #photo-tags{
        text-transform: capitalize;
    }
    

    #photo-tag-counter{
        position: absolute;
        width: auto;
        height: 24px;
        top: 15px;
        right: 15px;
        background: #000;
        color: #fff;
        padding: 0px 7px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        line-height: 1em;
    }


    /*=========================================================
	// ANALYTICS
	/=========================================================*/	

	.stats-list{list-style:none; padding:0!important;  }
	.stats-list li{padding:15px 0!important; border-bottom:1px solid rgba(0,0,0,0.05);display: grid; grid-template-columns: 52px 1fr; gap: 8px;}

	.stats-list .stats-list-icon{width:42px; height:42px; position: relative;}



	.stats-list .stats-list-details{line-height:1.2em; padding-top: 4px}

	.stats-list .stats-list-subtext{font-size:13px; color: #666;}
    

    .stats-nav{position:absolute; bottom:-45px; left:50%; transform:translate(-50%,0); z-index:1; width:100%}

    .stats-heading{margin:0 0 10px}

    .analytic-item p{
        width:90%;
        margin-left: auto;
        margin-right: auto;
    }


    /*======================================================
    // IN-APP CLIP
    /=======================================================*/

    .activity-view-controller > .activity-view.inapp-clip{
        height:90vh;
        max-width: 420px;
        max-height: 540px;
        box-shadow: var(--elevation);
    }

    .activity-view-controller > .activity-view.inapp-clip .fragment-toolbar:before{
        display: none!important;
    }

    .in-app-web-view-container{
        position:relative; 
        height:calc(90vh - 48px); 
        margin-top:48px;

    }

    .activity-view.inapp-clip .in-app-web-view-container{
        max-height: 540px;
    }

    .in-app-web-view-container iframe{
        border-radius: 0 0 var(--radius) var(--radius);
    }

    

    /*======================================================
    // AWARDS
    /=======================================================*/

    .award-icon{
        width: 64px; height: 64px;
        border-radius: 50%;
        background: #444;
        position: absolute;
        margin: 0 auto;
        top: 10px;
        left: 10px;
        overflow: hidden;
        filter: grayscale(1);
    }

    .award-icon.gained{filter: grayscale(0);}

   
    .award-icon{position: relative; top: 0; left: 0;}
    .award-icon.small{box-shadow: 0 2.5px 7.5px rgba(0, 0, 0,.1); position: relative; top: auto; left: auto;width: 42px; height: 42px; margin:0; border: 4px solid rgba(255,255,255,0.1);}

    .award-icon.small i{
        position: absolute;
    }

    .award-icon.large{
        width: 74px;
        height: 74px;
        border: 8px solid rgba(255,255,255,0.1);
        box-shadow: var(--elevation-medium);
    }

    .award-icon.gained:before,
    .award-icon.gained:after{
        position: absolute;
        width: 200%;
        height: 5px;
        content: ' ';
        top: 0px;
        right:-40px;
        background: rgba(255,255,255,.1);
        border-radius: 15px;

        transform: rotate(-45deg)
    }


    .award-icon.large{
        font-size: 36px;
    }

    


    .award-icon.gained.small:before,
    .award-icon.gained.small:after{
        position: absolute;
        width: 200%;
        height: 3px;
        content: ' ';
        top: 0px;
        right:-30px;
        background: rgba(255,255,255,.1);
        border-radius: 15px;

        transform: rotate(-45deg)
    }

    .award-icon.gained:after{
        right: -46px;
        top: 10px;
        height: 15px;
    }

    .award-icon.gained.small:after{
        right: -33px;
        top: 10px;
        height: 7.5px;
    }

    .award-icon.large:before{
        top:11px;
        right: -42px;
    }
    .award-icon.large:after{
        top: 24px;
        right:-52px;
    }

    .award-icon.badge-view{
        background: none;
        width: 196px;
        height: 196px;
        border: 10px solid rgba(255,255,255,0.3);
        
    }
    .award-icon.badge-view .fa{
        font-size: 90px;
        position: absolute!important;
    }

    .award-icon.badge-view::before{
        right: -207px;
        height: 15px;
        top: 0;
        width: 253%;
    }

    .award-icon.badge-view::after{
        right: -270px;
        height: 36px;
        top: 0;
        width: 253%;
    }

    .award-icon i,
    .activity-icon i{color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 30px}
    
    .award-icon.small i{font-size: 21px;}
  

    .voucher-header{
        padding:15px 15px;
        display: grid;
        grid-template-columns: auto 1fr;
    }


    .voucher-banner{
        background: repeating-linear-gradient(
            45deg,
            rgba(0,0,0,0.05),
            rgba(0,0,0,0.05) 5px,
            rgba(0,0,0,0.1) 5px,
            rgba(0,0,0,0.1) 10px
        );
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .voucher-details{
        padding:30px 15px 15px
    }

    .voucher-details span{text-transform: uppercase; display: block; font-size:13px}
    .voucher-details strong{font-size: 14px;}

    .voucher-details{display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; row-gap: 7.5px;}

    .voucher-qrcode{padding:30px 0 30px}

    #voucher-qrcode-container{width:50%; margin:0 auto; position: relative;}
    #voucher-qrcode-container .media-transition{position: absolute; top: 0;}
    .voucher-qrcode img{width:100%; display: block; border-radius: 5px;}
    .voucher-qrcode span{text-transform: uppercase; display: block; font-size:13px; margin-top:5px}

    #voucher-view-activity-view .panel-padding-top{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: calc(100vh - 82px);
    }
    #voucher-view-activity-view .card-container{
        padding: 0;
        max-width: 420px;
        margin-top: 30px;
        margin: -41px auto 0;
        max-height: 480px;
        width: 90%;
    }

    .tap-icon{width:48px; height:48px; display: flex; align-items: center;justify-content: center;}

    .card-container{perspective: 900px; margin:2.5vw}
    .card-face{position: absolute; width:100%; height:100%; top:0; left:0; -webkit-backface-visibility: hidden;}

    .card-front{transform: rotateY(180deg); border-radius: 7.5px; -webkit-backface-visibility: hidden;}
    .card-back{transform: rotateY(0deg); border-radius: 7.5px;}

    .card-flip{
        transform: rotateY(180deg);
        transform-style: preserve-3d;
        height: 100%;
        transition: 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) transform;
        box-shadow: 0 2.5px 7.5px rgba(0,0,0,0.1);
        border-radius: 7.5px;
        will-change: transform;
    }

    .card-container.flipped .card-flip{transform:rotateY(0deg)}

    .badge-container.flipped .card-flip,
    .card-container.flipped .card-flip{transform:rotateY(0deg)}

    .badge-container{
        width: 220px;
        height: 220px;
        perspective: 900px;
        margin: 0 auto 16px;
        cursor: pointer;
    }

    .badge-container .card-flip,
    .badge-container .card-face{
        border-radius: 50%;
    }



    #award-dialog .overlay{background: rgba(0, 0, 0, 0.01)!important;}

    /*================================================
    // APP ONBOARDING
    /================================================*/

    #onboarding-view .tab-view{height: 100vh;}

    #onboarding-view nav {
        position: absolute;
        bottom: 15px;
        left: 0;
        right: 0;
    }


    #onboarding-view .tabbed-list nav a{background:#848484}

    #onboarding-view .tabbed-list nav a.show{background: #2babe2}

    .onboarding-banner{height:35vh; position: relative}

    .bottom-button{position: absolute; bottom: 48px; left: 0; right: 0; margin-bottom: env(safe-area-inset-bottom)}

    /*================================================
    // BACKGROUNDS
    /================================================*/


    .bg-black-transparent{background:rgba(0,0,0,0.3);}

    .bg-light-grey,
    .bg-grey{background: #f9f9f9 ;}
    .bg-white{background: #fff;}

    

    .bg-navy{background:#2a2743}


    .parallax .ui-view,
    .parallax.tab-pages{
        perspective: 10px;
    }

    .parallax.tab-pages .page-tab{
        transform-style: preserve-3d;
    }

    .parallax .background-element {
        transform-style: preserve-3d;
        transform: translateZ(-5px);
        top:-26vh;
        left: -26%;
        right:-26%;
        position: absolute;
    }

    .slant{
        transition-property:background-color; 
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        -webkit-backface-visibility: hidden;
        
    }
    .slant-left{
        width:100%;
        top:-18px;
        padding-top: 0;
        left:0;
        clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%);
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%);
        position: absolute;
        height: 75vh;
    }

    .slant-right{
        width:100%;
        top:-18px;
        padding-top: 0;
        right:0;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 75%);
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 75%);
        position: absolute;
        height: 75vh;
    }


    .frost.banner{
        backdrop-filter:unset;
        -webkit-backdrop-filter:unset;
    }
    .frost.banner::after,
    .frost.banner::before{
        content: ' ';
        display: block;
        position: absolute;
        top: 0%;
        width: 100%;
        bottom: -1px;
    }

    .frost.light::after{
        background: linear-gradient(50deg,#fff 5%,rgba(255,255,255,0.3) 100%);
    }
    .frost.light::before{
        background: linear-gradient(0deg,#fff 0%,rgba(255,255,255,0) 100%);
    }

    .frost.grey::after{
        background: linear-gradient(50deg,#f9f9f9 5%,rgba(249,249,249,0.3) 100%);
    }
    .frost.grey::before{
        background: linear-gradient(0deg,#f9f9f9 0%,rgba(249,249,249,0) 100%);
    }

    .frost.dark::after{
        background: linear-gradient(50deg,#fff 5%,rgba(255,255,255,0.3) 100%);
    }
    .frost.dark::before{
        background: linear-gradient(0deg,#fff 0%,rgba(255,255,255,0) 100%);
    }


    /*=======================================================
    // BROADCAST SWITCHER
    /======================================================*/

    .appear-from-right.full-width {
        max-width: none!important;
        width: auto;
        left: 0;
    }


    .broadcast-list{
        display:grid;
        grid-template-columns:1fr 1fr; column-gap:28px
    }


    .broadcast-item{
        grid-template-columns:70px 1fr; 
        gap:12px;
    }

    .broadcast-item.muted,
    #broadcast-feature-item.muted{
        filter: grayscale(1);
    }

   
    .broadcast-item .broadcast-item-duration{
        font-size: 11px;
        letter-spacing: 1.3px;
    }

    .broadcast-item-title{
        font-size: 100%;
    }

    .broadcast-item-text{
        line-height: 1.2em;
        width: 100%;
    }

    .broadcast-item-stat{
        width: 100%;
    }



    .broadcast-item-badge{
        transform: scale(0);
        z-index: 1;
        line-height: 1em;
    }

    .broadcast-item-badge.large{
        width:48px; 
        height:48px; 
        top:-16px; 
        right:-16px;
        font-size:30px;
        z-index: 2;
    }

    .broadcast-item-badge.show{
        transform: scale(1);
    }


    .broadcast-mute-icon{
    }

    .broadcast-mute-icon.large{
        width:48px; 
        height:48px; 
        top:-16px; 
        right:-16px;
    }

    .muted .broadcast-mute-icon{
        display: flex;
    }

    .broadcast-mute-icon .fa{
        font-size: 12px;
    }

    .broadcast-mute-icon.large .fa{
        font-size: 24px;
    }

    .broadcast-feature-item-icon,
    .broadcast-item-icon{overflow: hidden; aspect-ratio: 1/1;}

    

    .broadcast-feature-item-icon img,
    .broadcast-item-icon img{
        width: 100%;
        height: auto;
        display: block;
        position: relative;
        border-radius: 20%;
    }


    @media screen and (pointer:fine){
        .broadcast-item:hover .broadcast-item-icon::after{
            content:' ';
            position: absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            border:1px solid rgba(0, 0, 0, 0.2);
            z-index: 1;
            border-radius: 13px;
        }
    }


    .broadcast-feature-item{
        display:grid;
        grid-template-columns: 220px 1fr; 
        column-gap:32px;
        align-items: center
    }

    .broadcast-item-summary{
        min-height: 30px;
    }

    .broadcast-feature-item-icon{
        width:220px; 
        height:220px;
        aspect-ratio:1/1;
    }

   
   

    /*======================================================
    // BROADCAST TRANSTION
    /=======================================================*/

    #switch-broadcast-overlay{
        position: fixed;
        top:0;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: -1;
        opacity: 0;
    }


    #switch-broadcast-overlay.show{
        z-index: 11;
        opacity: 1;
    }


    #broadcast-next-icon,
    #broadcast-current-icon{
        transition: 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        transition-property: transform, opacity;
        width: 96px;
        height: 96px;
        aspect-ratio: 1/1;
        border-radius: 20%;
        overflow: auto;
    }

    #broadcast-next-icon{
        transform: translate3d(-50%,150%,0);
        opacity: 0;
    }

    #broadcast-next-icon.present{
        transform: translate3d(-50%,-50%,0);
        opacity: 1;
    }

    #broadcast-current-icon{
        transform: translate3d(-50%,-50%,0);
    }

    #broadcast-current-icon.dismiss{
        transform: translate3d(-50%,-200%,0);
        opacity: 0;
    }


    /*=======================================================
    // BROADCAST VIEW
    /======================================================*/

    .round-close-icon{
        background: rgb(255,255,255,.7);
        backdrop-filter: blur(100px);
        -webkit-backdrop-filter: blur(100px);
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        margin: 10px;
        transition: 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
        transition-property: background, width, height, margin;
    }

    .compacted .round-close-icon{
        background: none;
        width: 48px; 
        height: 48px; 
        display: block; 
        margin:0;
        backdrop-filter: none;
        -webkit-backdrop-filter:none;
    }

    .compacted .round-close-icon .fa{
        color: black;
    }


    .broadcast-view-header{
        display: grid;
        grid-template-columns: 220px 1fr; 
        align-items: center;
        column-gap:32px; 
        z-index:1; 
        padding-top:65px; 
        padding-bottom:65px
    }


    .broadcast-view-details{
        display: grid;
        grid-template-columns:1fr 30%; 
        column-gap:44px
    }

    .broadcast-view-icon{
        width: 220px;
        height: 220px;
        aspect-ratio:1/1;
        overflow: hidden;
    }

    .broadcast-view-icon img{
        display: block;
        width: 100%;
        border-radius: 20%;
    }

    .broadcast-view-header .button{
        max-width:180px; margin:0; padding:8px
    }

    .broadcast-view-progress{
        max-width:200px; grid-template-columns:auto ; gap:8px; align-items:center
    }

    


    /*======================================================
    // HEART LIKE
    /=======================================================*/

    .heart-checkbox:checked .fa-heart{
        color: black;
    }
    .heart-checkbox:checked+label .fa-heart{
        animation:animateHeart  .3s linear forwards;
        font-family: 'FontAwesome Solid';
        color: #E2264D;
    }

    .heart-rating{width: 48px; position: relative;}

    .heart-checkbox {
        display: none
    }

    .heart-stat{
        display: block;
        position: absolute; 
        left: 50%; top: 50%; 
        transform: translate3d(-50%,-50%,0); 
        color: #eee;
        font-size: 11px;
        line-height: 11px;
        margin-top: -1px;
        z-index: 1;
    }

    .heart-checkbox:checked+label .heart-stat {
        opacity: 0;
        animation: fadeIn .3s linear forwards .25s
    }

    .heart-icon{
        display: flex!important;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        font-size:32px!important;
    }


    .heart-rating .heart-confetti{
        position: absolute;
        opacity: 0;
    }

    

    .heart-checkbox:checked+label .heart-confetti{
        opacity: 1;
        transition: .1s opacity .3s
    }

    .heart-rating .dot{
        position: absolute;
        width: 5px;
        height: 5px;
        border-radius: 50%;
    }
    .heart-rating .dot-1{
        left: -5px;
        transform-origin: 0 0 0;
        
    }
    .heart-rating .dot-2{
        left: 5px;
        transform-origin: 0 0 0;
    }

    .heart-checkbox:checked+label .dot-1{
        transition: .5s transform .3s
    }
    .heart-checkbox:checked+label .dot-2{
        transition: 1.5s transform .3s
    }

    /* Heart Confetti 1 */
    .heart-rating .heart-confetti-1{
        transform: translate3d(21px,-51px,0);
    }

    .heart-checkbox:checked+label .heart-confetti-1 .dot-2{
        transform: scale(0) translate3d(0, -50px,0);
    }
   
    .heart-checkbox:checked+label .heart-confetti-1 .dot-1{
        transform: scale(0) translate3d(40px, -70px,0);
    }


    /* Heart Confetti 2 */
    .heart-rating .heart-confetti-2{
        transform: translate3d(43px,-46px,0);
    }

    .heart-confetti-2 .dot-2{    
        top: 5px;
        left: -1px;
    }
    .heart-checkbox:checked+label .heart-confetti-2 .dot-2{
        transform: scale(0) translate3d(50px, -35px,0)
    }
   
    .heart-checkbox:checked+label .heart-confetti-2 .dot-1{
        transform: scale(0) translate3d(80px, -35px,0);
    }

    /* Heart Confetti 3 */
    .heart-rating .heart-confetti-3{
        transform: translate3d(46px,-16px,0)
    }

    .heart-confetti-3 .dot-1{    
        left: 0
    }
    .heart-confetti-3 .dot-2{    
        top: -6px;
        left: 0;
    }
    .heart-checkbox:checked+label .heart-confetti-3 .dot-2{
        transform: scale(0) translate3d(50px, 0px,0);
    }
   
    .heart-checkbox:checked+label .heart-confetti-3 .dot-1{
        transform: scale(0) translate3d(80px, 20px,0);
    }

    /* Heart Confetti 4 */
    .heart-rating .heart-confetti-4{
        transform: translate3d(41px,-4px,0)
    }

    .heart-confetti-4 .dot-2{    
        top: 6px;
        left: 0;
    }

    .heart-checkbox:checked+label .heart-confetti-4 .dot-2{
        transform: scale(0) translate3d(50px, 35px, 0);
    }
   
    .heart-checkbox:checked+label .heart-confetti-4 .dot-1{
        transform: scale(0) translate3d(60px, 70px, 0);
    }

    /* Heart Confetti 5 */
    .heart-rating .heart-confetti-5{
        transform: translate3d(15px,-5px,0)
    }

    .heart-confetti-5 .dot-2{    
        top: 6px;
        left: -10px;
    }


    .heart-checkbox:checked+label .heart-confetti-5 .dot-2{
        transform: scale(0) translate3d(-30px, 35px, 0);
    }
   
    .heart-checkbox:checked+label .heart-confetti-5 .dot-1{
        transform: scale(0)  translate3d(-80px, 70px, 0);
    }


    /* Heart Confetti 6 */
    .heart-rating .heart-confetti-6{
        transform: translate3d(0,-46px,0);
    }

    .heart-confetti-6 .dot-1{    
        top: 5px;
        left: -1px;
    }
    .heart-checkbox:checked+label .heart-confetti-6 .dot-2{
        transform: scale(0) translate3d(-50px, -35px,0)
    }
   
    .heart-checkbox:checked+label .heart-confetti-6 .dot-1{
        transform: scale(0) translate3d(-80px, -35px,0);
    }
    
    
    /* Heart Confetti 3 */
    .heart-rating .heart-confetti-7{
        transform: translate3d(-3px,-16px,0)
    }

    .heart-confetti-7 .dot-1{    
        left: 0
    }
    .heart-confetti-7 .dot-2{    
        top: -6px;
        left: 0;
    }
    .heart-checkbox:checked+label .heart-confetti-7 .dot-2{
        transform: scale(0) translate3d(-50px, 0px,0);
    }
   
    .heart-checkbox:checked+label .heart-confetti-7 .dot-1{
        transform: scale(0) translate3d(-80px, 20px,0);
    }

    .heart-rating .heart-icon::after{
        content: ' ';
        width: 100%;
        height: 100%;
        position: absolute;
        border-radius: 50%;
        transition: all 2s;
        border: 2px solid transparent;
        opacity: 1
    }

    .heart-checkbox:checked+label .heart-icon::after{
        animation: animateCircle .3s linear forwards;
    }

    @keyframes animateHeart {
        0% {
            transform: scale(0.2) translate3d(0,0,0)
        }
   
        40% {
            transform: scale(1.2) translate3d(0,0,0)
        }
   
        100% {
            transform: scale(1) translate3d(0,0,0)
        }
    }

    @keyframes animateCircle {
        40% {
            transform: scale(1);
            opacity: 1;
            background: #DD4688
        }
   
        55% {
            transform: scale(1.1);
            opacity: 1;
            background: #D46ABF
        }
   
        65% {
            transform: scale(1.2);
            opacity: 1;
            background: #CC8EF5
        }
   
        75% {
            transform: scale(1.3);
            opacity: 1;
            background: transparent;
            border-color:  #CC8EF5;
            border-width: 2px;
        }
   
        85% {
            transform: scale(1.7);
            opacity: 1;
            background: transparent;
            border-color:  #CC8EF5;
            border-width: 1px;
        }
   
        95% {
            transform: scale(1.8);
            opacity: 1;
            background: transparent;
            border-color:  #CC8EF5;
            border-width: 1px;
        }
   
        100% {
            transform: scale(1.9);
            opacity: 1;
            background: transparent;
            border-color:  #CC8EF5;
            opacity: 0;
        }
    }


    

    /*================================================
    // BOTTOM NAVIGATION
    /================================================*/

    .tabbed-navigation ul li{ font-size:10px; opacity: 1;}
    .tabbed-navigation ul li .tab-icon:before,
    .tabbed-navigation ul li .tab-icon svg,
    .tabbed-navigation ul li .tab-icon span{filter:grayscale(1);}


    .tabbed-navigation ul li.show *,
    .tabbed-navigation ul li.show svg,
    .tabbed-navigation ul li.show .tab-icon:before{opacity: 1; filter: grayscale(0)}
    .tabbed-navigation ul li.show{filter: grayscale(0)}

    .navigation-bar-overlay-gap{height: calc(74px + var(--safe-area-inset-bottom));}


    .tab-icon.fa{font-size: 26px; color: #2babe2}
    .tab.show span{color: #2babe2}

    .tab-bubble{background:#e764a5;}

    .tabbed-navigation{box-shadow:0 10px 30px rgb(0 0 0 / 10%); border-top: none}

    .tabbed-navigation{transform: translate3d(0, 120%,0);}
    .tabbed-navigation.show{transform: translate3d(0, 0%,0);}


    @media screen and (max-width:320px){

        .tabbed-navigation li span{font-size: 9px}
        .tab-navigation li a{font-size: 11px; }


        .slant-left{
            clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%);
            -webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%);
          
        }

        .slant-right{
           
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
            -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
        }
    
        .slant.short-height{

            height: 42vh;
            left:0;
            right:0;
            width: 100%;
        }
    
        

        .signin-logo{width: 95px; height: 95px;}
        h1.logo-heading{font-size: 340%}

        body,p{font-size:14px;}

    }

    /*===================================================
    // RINGS
    /===================================================*/

    .ring-container{width:220px; height:220px; position: relative; margin:0 auto;}

    .ring-0{ position: absolute;top:0; bottom:0; right:0; left:0;}
    .ring-1{ position: absolute; top:24px; bottom:24px; right:24px; left:24px;}
    .ring-2{position: absolute; top:47px; bottom:47px; right:47px; left:47px;}

    .ring-label-0{color: #2babe2}

    .ring-label-1{color: #e764a5}

    .ring-label-2{color: #2a2743}

    .ring-icon svg path,
    .ring-container svg path{stroke-linecap:round;}


    .icon-add-to-home-screen{background: url(images/svg/add-to-home-screen.svg) center center no-repeat; background-size: 100%; width: 21px; height:21px}





    /* Fix horizontal scroll on iphone 5s */
    .activity-view-controller .overflow{overflow-x: hidden}

    /* Fix hide overscroll on angle bg */
    #in-depth-activity-view{height:100vh;overflow: hidden;}
    

    .overflow.touch-scroll .white-page-nav{transform: translateZ(0)}

    .tab-bar-gap{height:58px; padding-bottom: env(safe-area-inset-bottom)}

    #onboarding-view nav,
    .onboarding-btns{padding-bottom: env(safe-area-inset-bottom)}



    /* Redesign */
    .award-section-items{display: grid; grid-template-columns: repeat(auto-fit,30%); gap:16px}

    .toolbar-logo{margin:-6px 0}

    .show-on-tablet,
    .show-on-mobile,
    .show-on-phablet{display: none;}



    .feed-stats-right{display: none;}


    .dashboard-breadcrumb{line-height: 1.4em;}
    .feed-filter-container{
        line-height: 1.1em;
    }

    .feed-filter-container.elevate{
        background:#fff;
        position: sticky;
        top:0;
        
        z-index: 3;
        box-shadow: 0 2.5px 7.5px rgba(0, 0, 0, 0.1);
    }

    @media screen and (min-width:768px) and (min-height:500px) {
        
        .feed-width-constraint{max-width: 1024px; margin: 0 auto; position: relative; width:95%; padding-left:0; padding-right: 0;}

        #feed-grid{grid-template-columns: 1fr 360px; gap: 16px;}

        .feed-stats-right{
            position: sticky;
            top: 16px;
            align-self: start;
        }

        .show-on-tablet{display: block;}
       
    }


    @media screen and (max-width: 767px){

        .show-on-mobile{display: block;}
        

        #feed-view-toolbar.scrolled{border-bottom: none;}
    }

    @media screen and (min-width:767px) and (orientation: portrait) {

        #feed-grid{grid-template-columns: 1fr 280px; gap: 16px;}
        .show-on-phablet{display: block;}
    }
    

    /*===================================================
    // GRAPHS PLOTLINES
    /==================================================*/

    .plot-flag-container{
        transform: translate(-53%,0);
    }
    .highcharts-plot-line-label{
        z-index: 0;
    }

    .plotline-dot{
        border-radius: 50%;
        border: 3px solid var(--primary-color);
        width: 13px;
        height: 13px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 1;
    }

    .plotline-dot-inner{
        width: 9px;
        height: 9px;
        background:var(--primary-color);
        border-radius: 50%;
    }

    /* == Plot Lines == */
    .plot-flag{
        padding:5px 8px 5px 20px; 
        border-radius: 9px;
        text-align:center; 
        position:absolute;
        background:black;
        font-size: 9px;
        line-height: 1em;
        color: white;
        top: 0;
        left: 0;
        opacity: 0;
        width: 0;
        transition-property: width, opacity;
        transition-duration: 0s;
       
    }

    .plot-flag strong{
        display: block;
        transform: translate3d(-10%,0,0);
        opacity: 0;
        font-size: 9px;
    }

    .off-screen-right .plot-flag strong{
        transform: translate3d(10%,0,0);
    }


    .plot-flag-container.active{
        z-index: 3;
    }

    .plot-flag-container.active .plot-flag{
        opacity: 1;
        width: auto;
        transition-duration: 0.3s;
    }

    .off-screen-right .plot-flag{
        transform: translate3d(calc(-100% + 20px),0,0);
        padding: 5px 20px 5px 8px;
    }

    .plot-flag-container.active .plot-flag strong{
        transform: translate3d(0,0,0);
        opacity: 1;
        transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    #indepth-search{z-index: 11;}