/*===========================================================================
	// UI
	/==========================================================================*/
	

	.story-status {
		
		width: 21px;
		height: 21px;
		position: absolute;
		bottom: 15px;
		right: 15px;
		z-index: 2;
	}	
	

	h1, .message-h1, .widget-message h2{font-weight: 700!important}
	
	.big-stat{font-size:350%}
	.stat-label{color:rgba(0,0,0,.6)}
	
	.stats-wrapper{position:relative;}
	.stat-inner{text-align:center; border-right:1px solid rgba(0,0,0,.1)}
	
	
	.big-icon{
		background: linear-gradient(135deg,#4fd1ff 0%,#aa00d5 100%);
	}


    .annontation-add{display:none!important}

    /* Analytic Filter Select */
    .analytic-filter-select{
        position: relative;
        text-align: center;
        cursor: pointer;
    }

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


    /*===================================================
    // GROUP FILTERING
    /===================================================*/

    .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%;}

	/*===================================================
    // ANGLE
    /===================================================*/



    .paralax-bg{transform: translate3d(0px, 0px, 0px);}
    .slant{transition-property: clip-path,background-color; height: 350px;clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}


    .slant-left{
        width:100%;
        top :0;
        left:0;
        clip-path: polygon(0 0, 100% 0, 100% 60%, 0% 100%);
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 60%, 0% 100%);
        position: absolute;
        height: 70vh;
        min-height: 540px
    }

    .slant-right{
        width:100%;
        top :0;
        right:0;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 60%);
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 60%);
        position: absolute;
        height: 70vh;
        min-height: 540px
    }



    .angle-right{
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 60%);
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 60%);
    }
    .angle-left{
        clip-path: polygon(0 0, 100% 0, 100% 60%, 0% 100%);
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 60%, 0% 100%);
    }


    
    


	/*===========================================================================
	// EDITOR
	/==========================================================================*/



    #indepth-tabs .tab-navigation,
	#analytics-tabs-container .tab-navigation,
	#leaderboard-tabs .tab-navigation{background:#fff;}

	.tab-navigation li a{text-transform: uppercase; color: #2d2d2d;}
	.tab-navigation li:after{background:#2BABE2!important}


	.blue-heading{padding:60px; color:#fff; text-align: center}

	.width-contraint-720{max-width:720px; margin:0 auto}

	.content-container{background:#fff; margin:15px auto; border-radius:5px; box-shadow:0 2.5px 7.5px rgba(0,0,0,0.1); }

	.feed-icon{width: 62px; height: 62px; border: 1px solid #2babe2; margin:15px 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}
	

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

    .sub-toolbar{position:absolute; right:197px; top:13px; padding: 0 10px; display: none;}
    .sub-toolbar.show{display: block}
    .sub-toolbar:after{
        content: ' ';
        position: absolute;
        right: 0;
        bottom: 0;
        top: 0;
        width: 1px;
        background: rgba(0,0,0,.1);
    }


    .analytic-item{margin-top:0!important; margin-bottom: 0!important;}

    .back-to-map-icon{color:#1f1f1f;position:absolute; right:15px; top:15px; font-size:32px!important;}
    .back-to-map-icon:hover{cursor: pointer; color:#2babe2;}

    /*===================================================
    // TABLE
    /===================================================*/

    .data-table{width:100%;}
	.data-table td{padding:15px 10px; line-height:1.2em; font-size: 15px}

    .data-table td{border-bottom:1px solid rgba(0,0,0,0.1); }
	.data-table th{color:#ddd;border-bottom:1px solid rgba(0,0,0,0.1); padding:3px 10px; font-weight:normal; text-align:left; text-transform:uppercase; font-size:80%; background:#fff}
	.data-table-stat{border-radius:30px; padding:5px 7.5px; background:rgba(0,0,0,0.1); color:#2d2d2d; display:block; line-height:normal; font-size:80%; text-align:center; text-transform:uppercase}
	.data-table .forward-arrow{width:32px; height:32px;}
    .data-table td strong{display:block;}

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

    section .app-content{max-width: none!important;}

    .activity-view .app-content,
    .activity-view .app-content p,
    section .app-content,
    section .app-content p{font-size: 15px; line-height: 1.7em; margin:0 0 15px}
    

    .tile-feed-item{background:#fff;  box-shadow: 0 2.5px 7.5px rgba(0,0,0,0.1); border-radius: 5px; }
    .tile-feed-blank-item{border-bottom: 1px solid rgba(0,0,0,.1)}

    .app-content,
	.tile-feed-item,
	.small-padding{padding:60px; margin: 0}

    .tile-feed-item,
    .panel > .app-content{padding:60px!important}

	.width-constraint-small{max-width: 500px; margin-left: auto!important; margin-right: auto!important;}
	.width-constraint-medium{width:60%;max-width: 720px;margin-left: auto!important; margin-right: auto!important;}
	.width-constraint-large{width:80%;max-width: 960px;margin-left: auto!important; margin-right: auto!important;}
    .width-constraint-xlarge{width:80%;max-width: 960px;margin-left: auto!important; margin-right: auto!important;}


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


	.app-content .button{position:relative;border: 1px solid #2babe2; border-radius: 5px; padding:14px 12px; line-height: 1em; color: #fff; background: #2babe2; max-width: 220px; margin: 0 auto 15px; display: block; text-align: center; float: none; text-transform: uppercase}

    .app-content .button-no-background,
    .app-content .button-background-none{background: none; color: #2babe2;}

    .app-content .chart {
        height: 280px;
        margin-bottom: 45px;
    }

    .map-chart {
        max-height: 420px;
        min-height: 420px;
    }

	/*===========================================================================
	// RESOLVE
	/==========================================================================*/


	#resolve-interface{position: fixed; z-index: 2; top: 41px; bottom: 0; right: 0; width: 100%; max-width: 420px; box-shadow: 0 0 5px rgba(0,0,0,0.3); transform: translate3d(110%,0,0)}

    #resolve-interface.show{ transform: translate3d(0%,0,0)}
    .post-comment{box-shadow: none!important; border-top:  1px solid rgba(0,0,0,.1);}

    #resolve-feed{top: 48px; bottom: 0; position: absolute;width: 100%; font-size: 14px}
    #resolution-main{height: calc(100vh - 120px)!important}

    #users-online-thumbnails{padding: 9px 10px}
    #users-online-thumbnails .icon-profile-thumb{width: 24px; height: 24px; border-radius: 50%; position: relative; overflow: hidden; margin-right: 2px}
    #users-online-thumbnails .icon-profile-thumb img{position: absolute; top: 50%;left:50%; transform: translate(-50%,-50%);}
    .icon-profile-thumb img{ width: 100%; height: auto}


    .icon-size-32{width: 32px; height: 32px;}

    .resolve-open-btn i{font-family: 'FontAwesome Light'!important; font-size: 26px}

    .resolve-annotate{ position: absolute; width: 28px; height: 28px; cursor: pointer; text-align: center; color: #fff; z-index:1; position: absolute; background: #fff; border-radius:50%; border: 3px solid #fff; box-shadow: 0 0 3px rgba(0,0,0,.3);}

    .resolve-annotate b{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); line-height: 1em; font-size: 16px}
    .resolve-annotate i{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-size: 13px}

    .resolve-annotate.done{display: none; background: #5cc1a3}

    .highlight{box-shadow: 2px 2px 4px rgba(0,0,0,.2)!important; transform: scale(1.01); z-index: 4!important; opacity: 1!important; background: #fbfbfb;}
    .hide{visibility: hidden}

    #annotate-preview{position: fixed; z-index: 11; width: 420px; transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1); transition-property: opacity, transform; opacity: 0; transform: translate3d(0,10%,0)}
    #annotate-preview .channel-timeline-comment{visibility: visible!important;}

    #annotate-preview.show{opacity: 1; transform: translate3d(0,0%,0)}


    /*===================================================
    // TABLE
    /===================================================*/

    .data-table{width:100%;}
	.data-table td{padding:15px 10px; line-height:1.2em; font-size: 15px}

    .data-table td{border-bottom:1px solid rgba(0,0,0,0.1); }
	.data-table th{color:#ddd;border-bottom:1px solid rgba(0,0,0,0.1); padding:3px 10px; font-weight:normal; text-align:left; text-transform:uppercase; font-size:80%; background:#fff}
	.data-table-stat{border-radius:30px; padding:5px 7.5px; background:rgba(0,0,0,0.1); color:#2d2d2d; display:block; line-height:normal; font-size:80%; text-align:center; text-transform:uppercase}
	.data-table .forward-arrow{width:32px; height:32px;}
    .data-table td strong{display:block;}
    

    /*===================================================
    // 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-icon-0{border:4px solid #2babe2; border-radius: 50%; width:29px; height:29px;}
    .ring-label-0{color: #2babe2}

    .ring-icon-1{border:4px solid #e764a5; border-radius: 50%; width:29px; height:29px;}
    .ring-label-1{color: #e764a5}

    .ring-icon-2{border:4px solid #2a2743; border-radius: 50%; width:29px; height:29px;}
    .ring-label-2{color: #2a2743}

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