@imposium-hub/components 1.43.5 → 1.44.0

package/dist/styles.less

@@ -170,543 +170,593 @@ body{
 @fontSizeDefault:13px;
 @fontSizeLarge:15px;
 @fontSizeXLarge:18px;
+.align-columns { 
 
-@buttonMargin:2px;
-
-.imposium-btn{
-
-	display: inline-block;
-	box-sizing: border-box;
-	border-radius:2px;
-	user-select: none;
-	cursor:pointer;
-	padding:2px 3px 2px 3px;
-	margin:@buttonMargin;	
-	font-size:@fontSizeDefault;
-	line-height: @fontSizeDefault;
-	text-align:center;
-	vertical-align: top;
-	min-width:20px;
-	
-	&.large{
-		height:23px;
-		font-size:@fontSizeLarge + 1;
-		line-height: @fontSizeLarge;
-		padding:4px 4px 4px 4px;
-	}
+    max-height: 300px;
+    overflow-y: auto;
+    
+    p {
+        margin: 10px 20px;
+        font-size: 15px;
+        
+        &.warning {
+            color: red;
+        }
+        
+        &.match-columns {
+            color: white;
+        }
+    }
 
-	&.xlarge{
-		height:32px;
-		font-size:@fontSizeXLarge;
-		line-height: @fontSizeXLarge;
-		padding: 5px 7px 5px 7px;
-	}
+    table {
+        margin: 15px auto;
+        width: 75%;
 
-	&.disabled{
-		pointer-events:none;
-	}
+        thead {
+            font-size: 20px;
+            tr {
+                th {
+                    padding-left: 10px;
+                }
+            }
+        }
 
-	.loading-icon{
+        tbody {
+            font-size: 15px;
 
-		svg{
-			animation-name: rotate; 
-		    animation-duration: 1s; 
-		    animation-iteration-count: infinite;
-		    animation-timing-function: linear;
-		}
-	}
-}
+            tr {
+                td {
+                    padding-top: 5px;
+                    padding-bottom: 5px;
+                    width: 50%;
 
-.boldButton(@color){
-	background:@color;
-	color:@buttonTextDefault;
-	&:hover, &.active{
-		background:darken(@color, 10%);
-	}
-}
+                    &.variable 
+                    {
+                        p {
+                            margin: 0;
+                            border: 1px solid gray;
+                            padding-left: 10px;
+                            color: white;
+                            line-height: 1.5;
+                        }
+                    }
 
-.btn-bold{
+                    .form-field.select-field.no-label {
+                        margin: 0;
+                        
+                        select {
+                            height: 25px;
+                            border: 1px solid gray;
+                        }
 
-	.boldButton(@textDefault);
-	color:@textDark;
-	
-	&.primary{
-		.boldButton(@primary);
-	}	
+                        .caret {
+                            color: white;
+                            padding-top: 1px;
+                            padding-right: 10px;
 
-	&.secondary{
-		.boldButton(@secondary);
-	}
+                            .svg-inline--fa {
+                                height: 20px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
 
-	&.warning{
-		.boldButton(@warning);
-	}
+.new-tag{
+    display: inline-block;
+    width:150px;
+    height:@inputHeight;
+    vertical-align: top;
+    margin-top: 1px;
+    margin-left:2px;
+    input{
+        width:100%;
+        height:@inputHeight;
+        display: inline-block;
+        background:none;
+        border:none;
+        color:@textDefault;
+        font-size:@fontSizeSmall;
+        box-sizing:border-box;
+        vertical-align: top;
+        border-radius:0px;
+        appearance:none;
 
-	&.danger{
-		.boldButton(@danger);
-	}
+        &:hover{
+            background:rgba(0,0,0,0.2);
+        }
 
-	&.disabled{
-		background:@backgroundLight;
-		color: @textDark;
-	}
+        &:focus{
+            background:rgba(0,0,0,0.2);
+        }
+    }
 }
 
-.defaultButton(@color){
-	color:@color;
+.asset-type-cell {
+    font-size: 1.2em;
+    margin-left: 4px;
 }
-.btn-default{
-	
-	background:@backgroundDark;
-	&:hover, &.active{
-		background:darken(@backgroundDark, 5%);
-	}
-	border:1px solid @backgroundLight;
-	
-	&.primary{
-		.defaultButton(@primary);
-	}	
-
-	&.secondary{
-		.defaultButton(@secondary);
-	}
-
-	&.warning{
-		.defaultButton(@warning);
-	}
-
-	&.danger{
-		.defaultButton(@danger);
-	}	
 
-	&.disabled{
-		background:@backgroundLight;
-		color: @textDark;
-		border: 1px solid @textDark;
-	}
+.tags-wrapper {
+    display: inline-block;
 }
 
-.subtleButton(@color){
-	color:@color;
+.file-hidden {
+    display: none;
 }
 
-.btn-subtle{
-	
-	&:hover, &.active{
-		background:@backgroundDark;
-	}
-	
-	&.primary{
-		.defaultButton(@primary);
-	}	
+.uploads-menu {
+    width: 320px;
+    height: 175px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    background: @background;
 
-	&.secondary{
-		.defaultButton(@secondary);
-	}
+    .uploads-controls {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 5px;
+    }
 
-	&.warning{
-		.defaultButton(@warning);
-	}
+    .uploads-list {
+        width: 100%;
+        box-sizing: border-box;
+        margin-top: 5px;
+        padding: 5px;
+        border-top: 1px solid #494949;
 
-	&.danger{
-		.defaultButton(@danger);
-	}	
+        .ongoing-upload {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            margin-bottom: 5px;
+        }
+    }
 
-	&.disabled{
-		color: @textDark;
-	}
-}
+    .form-field{
 
-.btn-tab{
-	min-width:@tabWidth;
-	display: inline-block;
-	padding:0px 10px 0px 10px;
-	font-size:@fontSizeLarge;
-	height:calc(@tabHeight -2px);
-	user-select: none;
-	cursor:pointer;
-	text-align:center; 
-	box-sizing: border-box;
-	line-height: 19px;
-	margin:0px;
-}
-
-@headerHeight: 50px;
-@defaultBGColor: #212124;
-@defaultBorderColor: #494949;
-@defaultBorderStyle: 4px solid #494949;
-@defaultMaxWidth: 100%;
+        vertical-align:top;
+        label{
+            width:120px;
+        }
 
-/* cyrillic-ext */
-@font-face {
-  font-family: 'OswaldHeader';
-  font-style: normal;
-  font-weight: 400;
-  src: url(https://cdn.imposium.com/header/fonts/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUtiYySUhiCXABTV.woff) format('woff');
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'OswaldHeader';
-  font-style: normal;
-  font-weight: 400;
-  src: url(https://cdn.imposium.com/header/fonts/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUJiYySUhiCXABTV.woff) format('woff');
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'OswaldHeader';
-  font-style: normal;
-  font-weight: 400;
-  src: url(https://cdn.imposium.com/header/fonts/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUliYySUhiCXABTV.woff) format('woff');
-  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+        .form-field-content{
+            width:calc(100% - 120px);
+        }
+    }
 }
-/* latin-ext */
-@font-face {
-  font-family: 'OswaldHeader';
-  font-style: normal;
-  font-weight: 400;
-  src: url(https://cdn.imposium.com/header/fonts/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUhiYySUhiCXABTV.woff) format('woff');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+
+.asset-filter {
+    padding: 7px;
+    border-bottom: 1px solid #494949;
+    background: @background;
+    display:inline-block;
+    &:hover{
+        background:@backgroundLight;
+    }
 }
-/* latin */
-@font-face {
-  font-family: 'OswaldHeader';
-  font-style: normal;
-  font-weight: 400;
-  src: url(https://cdn.imposium.com/header/fonts/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUZiYySUhiCXAA.woff) format('woff');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+
+.assets-paginator {
+    width: 100%;
+    height: 25px;
+    background-color: @background;
+    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
+    border-top: 2px solid rgba(0, 0, 0, 0.1);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .total-assets {
+        border-radius: 3px;
+        background: @backgroundHighlight;
+        padding: 1px 4px;
+        font-size: 12px;
+    }
+
+    .jump-to-wrapper {
+        display: flex;
+        align-items: center;
+
+        .jump-to-page {
+            .inputMixin;
+            width: 30px;
+            margin: 0 3px;
+        }
+    }
 }
 
-.font-style {
-    font-family: 'OswaldHeader', 'Oswald', sans-serif;
-    text-transform: uppercase;
-    color: white;
+.tags-column {
+    position:relative;
+    padding-right:50px;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    width: 100%;
+    padding: 0.6rem;
+    box-sizing: border-box;
+    font-size: 13px;
+
+    .form-field {
+        margin: 0 0.6rem 0 0;
+    }
 }
 
-.secondary-font-style {
-    font-family: 'Roboto Condensed',sans-serif;
-    font-weight: 500;
+.centered-cell {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .form-field-content {
+        margin-left: 0;
+    }
 }
 
-.no-select {
-    -webkit-touch-callout: none;
-      -webkit-user-select: none;
-       -khtml-user-select: none;
-         -moz-user-select: none;
-          -ms-user-select: none;
-              user-select: none;
+.menu-count-superscript {
+    vertical-align: top;
+    font-size: 11px;
+    margin-left: 0.1em;
+    display: inline-block;
+    margin-top: -3px;
 }
 
-.flex-row {
+.asset-status-cell{
+    width:100%;
+    height:100%;
     display: flex;
+    justify-content: center;
     align-items: center;
-    box-sizing: content-box;
+
+    .status-indicator{
+        width:5px;
+        height:100%;
+        box-sizing:border-box;
+
+        &.processing{
+            background:#c5b73d;
+        }
+
+        &.complete{
+            background:#307f35;
+        }
+    }
 }
 
-.anchor {
-    .font-style;
-    cursor: pointer;
-    font-size: @fontSizeDefault;
-    text-decoration: none;
+.ongoing-upload-inner{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%
+}
 
-    &:visited {
-        color: white;
+.asset-preview-background{
+    border:1px solid @backgroundDark;
+    background-color: @background;
+    &.transparent{
+        .chess;
     }
 
-    &:hover {
-        color: #2d8ceb;
+    &.hidden{
+        opacity: 0;
     }
 }
+.close-icon-preview{
+    z-index: 9999 !important;
+    justify-content: flex-end;
+    display: flex;
+    height: 30px !important;
+    align-items: center
+}
 
-.circle-style {
-    .no-select;
-    border-radius: 50%;
-    width: 28px;
-    height: 28px;
-    font-size: 14px;
-    text-align: center;
-    line-height: 28px;
+.auth-gate {
+  .layer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.btn-reset {
-    padding: 0;
-    border: none;
-    font: inherit;
-    color: inherit;
-    background-color: transparent;
-    cursor: pointer;
-    outline: none;
-    box-sizing: border-box;
-    .no-select;
-    .font-style;
+
+@menuWidth:125px;
+@menuPadding:3px;
+@menuTop: 20px;
+
+.button-menu{
+    display: inline-block;
+    vertical-align: top;
+    position: relative;
+
+    .menu{
+        background: @backgroundDark;
+        position:absolute;
+        top:@menuTop;
+        min-width:@menuWidth;
+        padding:@menuPadding;
+        z-index:1000;
+
+        &.right{
+            left: 0;
+        }
+
+        &.left{
+            right: 0;
+        }
+    }
 }
 
-.faux-select {
-    .btn-reset;
-    display: flex;
-    align-items: center;
-    font-size: 14px;
+.button-menu-item{
+    padding:@menuPadding;
+    box-sizing: border-box;
+    cursor:pointer;
 
-    svg {
-        margin-bottom: -1px;
-        margin-left: 5px;
+    &:hover{
+        background:@background;
     }
 }
 
-.ellipsis {
-    white-space: nowrap; 
-    overflow-x: hidden;
-    text-overflow: ellipsis;
+.active {
+    color: @primary
 }
 
-.imposium-header {
-    .flex-row;
-    z-index: 100000;
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    width: 100%;
-    height: @headerHeight;
-    background-color: @backgroundDark;
-    border-bottom: 4px solid @backgroundHighlight;
-    font-size: 16px;
-    line-height: 1.5;
 
-    .inner-content {
-        .flex-row;
-        width: 100%;
-        max-width: @defaultMaxWidth;
-        justify-content: space-between;
-        margin: 0px 15px;
+@buttonMargin:2px;
 
-        .inner-left {
-            .flex-row;
+.imposium-btn{
 
-            .title {
-                .flex-row;
-                cursor: pointer;
-                margin-right: 20px;
-                text-decoration: none;
+	display: inline-block;
+	box-sizing: border-box;
+	border-radius:2px;
+	user-select: none;
+	cursor:pointer;
+	padding:2px 3px 2px 3px;
+	margin:@buttonMargin;	
+	font-size:@fontSizeDefault;
+	line-height: @fontSizeDefault;
+	text-align:center;
+	vertical-align: top;
+	min-width:20px;
+	
+	&.large{
+		height:23px;
+		font-size:@fontSizeLarge + 1;
+		line-height: @fontSizeLarge;
+		padding:4px 4px 4px 4px;
+	}
 
-                .logo {
-                    width: 30px;
-                    height: 30px;
-                    margin: 0px 5px 0px 0px;
-                    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAMAAABG8BK2AAAAM1BMVEX////////////////////////////////////////////////////////////////////lEOhHAAAAEHRSTlMAECAwQFBgcICPn6+/z9/vIxqCigAAAkJJREFUWMO1WMmigyAMFEUBWf//a9+hak2csLR9ubXqwEwmYZmm/w+lN3uEXj6DmI1PhUSwo1DKxIIiuXlgInuRI+gfgHQD2Vya4VUDZImlJ/JaRdly6Yy9guJKf0SR2F5GIi6/QCklL79AKSWp73SR9dnKJ8HzNd8zbY4/9eHa86X0xDEUhrguK0p0pbDkVVKqhpn9LPRMYUEWwr0vcPOe468QlsRWyfU1fqCwIBHpre/zoaPSJwYLp4OMd/YUC2HRdBDj9/gRwgIhsfMczXKC1rgnIGCHLtQ8VjaPmqZpUlLBnJwThOUii9VkqXmiKKWvN4iZ+oHB3lyGNWNGD7x+ApKx0gcMHTxI5tmg8qR+71IYwTy2DlM8TUxW2Dwe2vLuUA07iH6IWIfJEXcQNwYDc3vz5IcwO4TJLRi24+JdunM2WWkozaDEKx3XQ0qlBFAh7DMVW5RK8VX7vT5bHl1Xg16gZJiNWj8IlF4vpkaBnwNdBe5go/SVurx/ZuQuChbe1obgSen1aG5Qyi1Kx4CxSsk3F4aj2ZqRfp7EJWSurS65tbq87bTLa10HpcvbyzeUrnef1uGUdGXrkZW4wWGUnLTO0clw5dhn5x4Fb2DIoTCBrQ2nBKuGHtE0eNJDyfFD3VuzcMSp9/EzV+z1zcmDZOmSJ46joJPQMA4+T43iZOmOQPlfoAydzWL1KL52nqBt65Kjh1jsuF7QoaWK6bvs2GpA2aqpN/QuaOS3wZugdeetLvttnj4Ipa096tLZtQrxBxFKwFrUKkYaAAAAAElFTkSuQmCC');
-                    background-size: 30px 30px;
-                    background-repeat: no-repeat;
-                }
+	&.xlarge{
+		height:32px;
+		font-size:@fontSizeXLarge;
+		line-height: @fontSizeXLarge;
+		padding: 5px 7px 5px 7px;
+	}
 
-                .heading {
-                    .font-style;
-                    margin: 0;
-                    font-size: 20px;
-                    font-weight: normal;
-                }
-            }
+	&.disabled{
+		pointer-events:none;
+	}
 
-            .btn-toggle-services {
-                .faux-select;
-            }
-        }
+	.loading-icon{
 
-        .inner-right {
-            .flex-row;
+		svg{
+			animation-name: rotate; 
+		    animation-duration: 1s; 
+		    animation-iteration-count: infinite;
+		    animation-timing-function: linear;
+		}
+	}
+}
 
-            a{
-                border:none;
-            }
-            
-            .btn-help {
-                .circle-style;
-                margin-left: 15px;
-                font-size:28px;
-            }
-            
-            .btn-toggle-orgs {
-                .btn-reset;
-                .circle-style;
-                margin-left: 15px;
-            }
-            
-            .btn-toggle-story {
-                .faux-select;
+.boldButton(@color){
+	background:@color;
+	color:@buttonTextDefault;
+	&:hover, &.active{
+		background:darken(@color, 10%);
+	}
+}
 
-                .story-name {
-                    .ellipsis;
-                    max-width: 220px;
-                }
-            }
+.btn-bold{
 
-            .btn-logout {
-                .btn-reset;
-                padding: 10px 0px;
-                font-size: 14px;
-            }
-        }
-    }
+	.boldButton(@textDefault);
+	color:@textDark;
+	
+	&.primary{
+		.boldButton(@primary);
+	}	
 
-    .service-menu {
-        width: 320px;
-        max-height: 400px;
-        overflow: auto;
-        display: flex;
-        flex-direction: column;
-        padding-top: 5px;
+	&.secondary{
+		.boldButton(@secondary);
+	}
 
-        .service-menu-section {
-            width: 100%;
-            padding: 5px;
-            box-sizing: border-box;
+	&.warning{
+		.boldButton(@warning);
+	}
 
-            .service-menu-heading {
-                .secondary-font-style;
-                font-size: @fontSizeDefault;
-                text-transform: uppercase;
-                color: #b1b1b1;
-                border-bottom: 1px solid #5f5f5f;
-                box-sizing: border-box;
-                padding-left: 2px;
-                margin-bottom: 5px;
-            }
+	&.danger{
+		.boldButton(@danger);
+	}
 
-            .service-menu-anchors {
-                width: 100%;
-                display: flex;
-                flex-wrap: wrap;
+	&.disabled{
+		background:@backgroundLight;
+		color: @textDark;
+	}
+}
 
-                .anchor-wrapper {
-                    width: 50%;
-                    padding: 5px;
-                    box-sizing: border-box;
+.defaultButton(@color){
+	color:@color;
+}
+.btn-default{
+	
+	background:@backgroundDark;
+	&:hover, &.active{
+		background:darken(@backgroundDark, 5%);
+	}
+	border:1px solid @backgroundLight;
+	
+	&.primary{
+		.defaultButton(@primary);
+	}	
 
-                    .icon-fixed {
-                        width: 22px;
-                    }
+	&.secondary{
+		.defaultButton(@secondary);
+	}
 
-                    a {
-                        .anchor;
-                        display: flex;
-                        align-items: center;
-                        color: white;
-                        font-size: @fontSizeDefault;
-                    }
+	&.warning{
+		.defaultButton(@warning);
+	}
 
-                    &.doc {
-                        svg {
-                            color: #4D8C71;
-                        }
-                    }
-                }
-            }
-        }
-    }
+	&.danger{
+		.defaultButton(@danger);
+	}	
 
-    .stories-menu {
-        width: 240px;
-        max-height: 400px;
-        display: flex;
-        flex-direction: column;
-        overflow: auto;
+	&.disabled{
+		background:@backgroundLight;
+		color: @textDark;
+		border: 1px solid @textDark;
+	}
+}
 
-        .no-stories-dialog {
-            .font-style;
-            font-size: 12px;
-            text-align: center;
-            padding: 0.3em;
-        }
+.subtleButton(@color){
+	color:@color;
+}
 
-        .btn-change-story {
-            .btn-reset;
-            .ellipsis;
-            max-width: 100%;
-            min-height: 35px;
-            font-size: 12px;
-            border-bottom: 1px solid #494949;
-            box-sizing: content-box;
-            margin: 0;
-            border-radius: 0;
-            padding: 0 5px;
+.btn-subtle{
+	
+	&:hover, &.active{
+		background:@backgroundDark;
+	}
+	
+	&.primary{
+		.defaultButton(@primary);
+	}	
 
-            &:last-child {
-                border-bottom: unset;
-            }
+	&.secondary{
+		.defaultButton(@secondary);
+	}
 
-            &:hover {
-                background-color: #494949;
-            }
-        }
-    }
+	&.warning{
+		.defaultButton(@warning);
+	}
 
-    .orgs-menu {
-        width: 240px;
-        max-height: 400px;
-        overflow: auto;
+	&.danger{
+		.defaultButton(@danger);
+	}	
 
-        .orgs-menu-active-org {
-            .font-style;
-            .flex-row;
-            padding: 10px;
-            border-bottom: 1px solid @defaultBorderColor;
-            background-color: @defaultBorderColor;
+	&.disabled{
+		color: @textDark;
+	}
+}
 
-            .active-first-char {
-                .circle-style;
-                width: 40px;
-                height: 40px;
-                font-size: 18px;
-                line-height: 40px;
-                margin-right: 10px;
-            }
-        }
+.btn-tab{
+	min-width:@tabWidth;
+	display: inline-block;
+	padding:0px 10px 0px 10px;
+	font-size:@fontSizeLarge;
+	height:calc(@tabHeight -2px);
+	user-select: none;
+	cursor:pointer;
+	text-align:center; 
+	box-sizing: border-box;
+	line-height: 19px;
+	margin:0px;
+}
+
+
+@cardHeaderHeight:25px;
+@cardHeaderHeightSmall:21px;
+@cardHeaderHeightLarge:35px;
+
+.card{
+	background: lighten(@background, 3%);
+	border:1px solid @backgroundLight;
+	margin-bottom:5px;
+
+	.card-header{
+		color:@headerTextDefault;
+		height:@cardHeaderHeight;
+		box-sizing: border-box;
+		padding:5px;
+		position:relative;
+		margin-bottom:5px;
+
+		.header-buttons{
+			position: absolute;;
+			right:0px;
+			top:0px;
+		}
+	}
+	
+	.card-content{
+		padding:5px;
+	}
+	
+	&.small{
+		.card-header{
+			height:@cardHeaderHeightSmall;
+			padding:3px;
+		}	
+		margin-bottom:2px;
+
+		.card-content{
+			padding:3px;
+		}
+	}
+
+	&.large{
+		.card-header{
+			height:@cardHeaderHeightLarge;
+		}
+
+		.header-buttons{
+			right: 4px;
+			top: 4px;
+		}
+	}
 
-        .menu-item {
-            .btn-reset;
-            width: 100%;
-            padding: 10px 0px;
-            font-size: 12px;
-            border-bottom: 1px solid @defaultBorderColor;
+	&.closed{
+		height:@cardHeaderHeight;
+		overflow: hidden;
 
-            .inactive-first-char {
-               .circle-style;
-               margin-right: 10px;
-            }
+		&.small{
+			height:@cardHeaderHeightSmall;
+		}
 
-            &.inactive-org-button {
-                .flex-row;
-                box-sizing: border-box;
-                padding: 10px;
-            }
+		&.large{
+			height:@cardHeaderHeightLarge;
+		}
+	}
+}
 
-            &:last-of-type {
-                border-bottom: none;
-            }
-        }
+.controlled-list{
 
-        .orgs-menu-footer {
-            .flex-row;
-            justify-content: space-between;
-            border-top: 1px solid @defaultBorderColor;
+	width:100%;
 
-            .email {
-                .secondary-font-style;
-                .ellipsis;
-                color: #b1b1b1;
-                font-size: 12px;
-                text-transform: lowercase;
-                padding: 10px 15px;
-            }
+	.item{
+		position:relative;
+		width:100%;
+		height:@inputHeight;
+		margin-top:@fieldMargin / 2;
+		margin-bottom:@fieldMargin / 2;
 
-            .btn-logout {
-                .btn-reset;
-                font-size: 12px;
-                padding: 10px 15px;
-            }
-        }
-    }
-}
+		&:hover{
+			background:@background;
+			.buttons{
+				display: block;
+			}
+		}
 
+		.buttons{
+			display: none;
+			position:absolute;
+			right:0px;
+			top:0px;
+		}
+	}
+}
 .ip-table-wrapper {
     width: 100%;
     min-width: 360px;
@@ -938,6 +988,29 @@ body{
     }
 }
 
+.determinate-loader {
+    width: 100%;
+    height: 20px;
+    position: relative;
+    border: 1px solid @backgroundLight;
+    border-radius: 5px;
+
+    .progress-bg {
+        .layer;
+        background-color: @backgroundHighlight;
+        transform-origin: left;
+        border-radius: 5px;
+        transition: transform 50ms @easeOutQuad;
+    }
+
+    .progress-copy {
+        .layer;
+        text-align: center;
+        line-height: 20px;
+        border-radius: 5px;
+    }
+}
+
 
 .imposium-dropdown {
     position: absolute;
@@ -949,60 +1022,14 @@ body{
     z-index: 2147483647;
 }
 
-h1, h2, h3, h4, h5 {
-    font-family: 'Oswald', sans-serif;
-    color:@headerTextDefault;
-    display: inline-block;
-}
-
-h1{
-	font-size:@fontSizeXLarge;
-	margin-bottom:5px;
-}
-
-h2{
-	font-size:@fontSizeLarge;
-	line-height: @fontSizeLarge;
-	margin-bottom:3px;
-}
-
-h3{
-	font-size:@fontSizeDefault;
-	line-height:@fontSizeDefault;
-	margin-bottom:2px;
-}
-
-.text-primary{
-	color:@primary;
-}
-
-.text-secondary{
-	color:@secondary;
-}
-
-.text-danger{
-	color:@danger;
-}
-
-.text-large{
-	font-size:@fontSizeLarge;
-}
 
-.horizontal-rule{
-	width:100%;
-	height:2px;
-	box-sizing: border-box;
-	margin-top:5px;
-	margin-bottom:5px;
-	
-	&.default{
-		border-top:1px solid @backgroundLight;
-		border-bottom:1px solid @backgroundDark;
-	}
-	&.subtle{
-		border-top:1px solid fadeout(@backgroundLight, 60%);
-		border-bottom:1px solid fadeout(@backgroundDark, 60%);
-	}
+.font-preview{
+	.layer;
+	text-align: center;
+	background: white;
+	color:black;
+	font-weight: normal;
+	font-size:80px;
 }
 
 @labelWidth:100px;
@@ -1300,476 +1327,475 @@ h3{
 	right:0px;
 	top:@inputHeight;
 	width:100%;
-	z-index:10000;
-	display: none;
-}
-
-.react-autosuggest__suggestions-container--open{
-	display: block;
-}
-.react-autosuggest__suggestions-list{
-	list-style: none;
-}
-.react-autosuggest__suggestion{
-	padding-left:5px;
-	box-sizing:border-box;
-	margin-bottom:2px;
-	cursor: pointer;
-}
-.react-autosuggest__suggestion--first{
-
-}
-.react-autosuggest__suggestion--highlighted{
-	background: @backgroundLight;
-}
-.react-autosuggest__section-container{
-
-}
-.react-autosuggest__section-container--first{
-
-}
-.react-autosuggest__section-title{
-
-}
-
-.caret{
-	display: block;
-	width: 18px;
-	height: 100%;
-	text-align: center;
-	padding-top: 3px;
-	box-sizing: border-box;
-	user-select: none;
-	pointer-events: none;
-	color:lighten(@inputBackground, 10%);
-    position: absolute;
-    left: -18px;
-}
-
-
-@cardHeaderHeight:25px;
-@cardHeaderHeightSmall:21px;
-@cardHeaderHeightLarge:35px;
-
-.card{
-	background: lighten(@background, 3%);
-	border:1px solid @backgroundLight;
-	margin-bottom:5px;
-
-	.card-header{
-		color:@headerTextDefault;
-		height:@cardHeaderHeight;
-		box-sizing: border-box;
-		padding:5px;
-		position:relative;
-		margin-bottom:5px;
-
-		.header-buttons{
-			position: absolute;;
-			right:0px;
-			top:0px;
-		}
-	}
-	
-	.card-content{
-		padding:5px;
-	}
-	
-	&.small{
-		.card-header{
-			height:@cardHeaderHeightSmall;
-			padding:3px;
-		}	
-		margin-bottom:2px;
-
-		.card-content{
-			padding:3px;
-		}
-	}
-
-	&.large{
-		.card-header{
-			height:@cardHeaderHeightLarge;
-		}
-
-		.header-buttons{
-			right: 4px;
-			top: 4px;
-		}
-	}
+	z-index:10000;
+	display: none;
+}
 
-	&.closed{
-		height:@cardHeaderHeight;
-		overflow: hidden;
+.react-autosuggest__suggestions-container--open{
+	display: block;
+}
+.react-autosuggest__suggestions-list{
+	list-style: none;
+}
+.react-autosuggest__suggestion{
+	padding-left:5px;
+	box-sizing:border-box;
+	margin-bottom:2px;
+	cursor: pointer;
+}
+.react-autosuggest__suggestion--first{
 
-		&.small{
-			height:@cardHeaderHeightSmall;
-		}
+}
+.react-autosuggest__suggestion--highlighted{
+	background: @backgroundLight;
+}
+.react-autosuggest__section-container{
 
-		&.large{
-			height:@cardHeaderHeightLarge;
-		}
-	}
 }
+.react-autosuggest__section-container--first{
 
-@modalPadding:5px;
+}
+.react-autosuggest__section-title{
 
-.modal{
-	
-	z-index:10000;
-	.layer;
+}
 
-	.modal-bg{
-		.layer;
-		background: fadeout(@backgroundDark, 20%);
-	}
+.caret{
+	display: block;
+	width: 18px;
+	height: 100%;
+	text-align: center;
+	padding-top: 3px;
+	box-sizing: border-box;
+	user-select: none;
+	pointer-events: none;
+	color:lighten(@inputBackground, 10%);
+    position: absolute;
+    left: -18px;
+}
 
-	.modal-container{
-		position: absolute;
-		background: @background;
-		padding:@modalPadding;
-		box-sizing: border-box;
-		border:1px solid @backgroundDark;
+@headerHeight: 50px;
+@defaultBGColor: #212124;
+@defaultBorderColor: #494949;
+@defaultBorderStyle: 4px solid #494949;
+@defaultMaxWidth: 100%;
 
-		.modal-content{
-			position:absolute;
-			top:0px;
-			left:0px;
-			height:100%;
-			width:100%;
-			box-sizing:border-box;
-			padding:5px;
-		}
-	}
+/* cyrillic-ext */
+@font-face {
+  font-family: 'OswaldHeader';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://cdn.imposium.com/header/fonts/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUtiYySUhiCXABTV.woff) format('woff');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'OswaldHeader';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://cdn.imposium.com/header/fonts/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUJiYySUhiCXABTV.woff) format('woff');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'OswaldHeader';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://cdn.imposium.com/header/fonts/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUliYySUhiCXABTV.woff) format('woff');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'OswaldHeader';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://cdn.imposium.com/header/fonts/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUhiYySUhiCXABTV.woff) format('woff');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'OswaldHeader';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://cdn.imposium.com/header/fonts/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUZiYySUhiCXAA.woff) format('woff');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
+.font-style {
+    font-family: 'OswaldHeader', 'Oswald', sans-serif;
+    text-transform: uppercase;
+    color: white;
+}
 
-@menuWidth:125px;
-@menuPadding:3px;
-@menuTop: 20px;
+.secondary-font-style {
+    font-family: 'Roboto Condensed',sans-serif;
+    font-weight: 500;
+}
 
-.button-menu{
-    display: inline-block;
-    vertical-align: top;
-    position: relative;
+.no-select {
+    -webkit-touch-callout: none;
+      -webkit-user-select: none;
+       -khtml-user-select: none;
+         -moz-user-select: none;
+          -ms-user-select: none;
+              user-select: none;
+}
 
-    .menu{
-        background: @backgroundDark;
-        position:absolute;
-        top:@menuTop;
-        min-width:@menuWidth;
-        padding:@menuPadding;
-        z-index:1000;
+.flex-row {
+    display: flex;
+    align-items: center;
+    box-sizing: content-box;
+}
 
-        &.right{
-            left: 0;
-        }
+.anchor {
+    .font-style;
+    cursor: pointer;
+    font-size: @fontSizeDefault;
+    text-decoration: none;
 
-        &.left{
-            right: 0;
-        }
+    &:visited {
+        color: white;
+    }
+
+    &:hover {
+        color: #2d8ceb;
     }
 }
 
-.button-menu-item{
-    padding:@menuPadding;
+.circle-style {
+    .no-select;
+    border-radius: 50%;
+    width: 28px;
+    height: 28px;
+    font-size: 14px;
+    text-align: center;
+    line-height: 28px;
+}
+
+.btn-reset {
+    padding: 0;
+    border: none;
+    font: inherit;
+    color: inherit;
+    background-color: transparent;
+    cursor: pointer;
+    outline: none;
     box-sizing: border-box;
-    cursor:pointer;
+    .no-select;
+    .font-style;
+}
 
-    &:hover{
-        background:@background;
+.faux-select {
+    .btn-reset;
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+
+    svg {
+        margin-bottom: -1px;
+        margin-left: 5px;
     }
 }
 
-.active {
-    color: @primary
+.ellipsis {
+    white-space: nowrap; 
+    overflow-x: hidden;
+    text-overflow: ellipsis;
 }
 
+.imposium-header {
+    .flex-row;
+    z-index: 100000;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: @headerHeight;
+    background-color: @backgroundDark;
+    border-bottom: 4px solid @backgroundHighlight;
+    font-size: 16px;
+    line-height: 1.5;
 
-@tabHeight:25px;
-@tabWidth:80px;
-
-.tabs{
-    .layer;
-    .tab-header{
-        white-space: nowrap;
-        position: absolute;
-        top:0px;
-        left:0px;
-        background: lighten(@backgroundLight, 4%);
-        width:100%;
-        height:@tabHeight;
-        box-sizing:border-box;
-        border-bottom:2px solid @primary;
+    .inner-content {
+        .flex-row;
+        width: 100%;
+        max-width: @defaultMaxWidth;
+        justify-content: space-between;
+        margin: 0px 15px;
 
-        .tab-header-option{
-            min-width:@tabWidth;
-            display: inline-block;
-            padding-left:5px;
-            padding-right:5px;
-            font-size: @sectionFontSize;
-            height:100%;
-            user-select: none;
-            cursor:pointer;
-            text-align:center;
-            box-sizing: border-box;
+        .inner-left {
+            .flex-row;
 
-            &:hover{
-                background:lighten(@backgroundLight, 5%);
-            }
+            .title {
+                .flex-row;
+                cursor: pointer;
+                margin-right: 20px;
+                text-decoration: none;
 
-            &.active{
-                background:lighten(@backgroundLight, 10%);
-                border-bottom: 2px solid @primary;
-                font-weight: 700;
-            }
-        }
+                .logo {
+                    width: 30px;
+                    height: 30px;
+                    margin: 0px 5px 0px 0px;
+                    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAMAAABG8BK2AAAAM1BMVEX////////////////////////////////////////////////////////////////////lEOhHAAAAEHRSTlMAECAwQFBgcICPn6+/z9/vIxqCigAAAkJJREFUWMO1WMmigyAMFEUBWf//a9+hak2csLR9ubXqwEwmYZmm/w+lN3uEXj6DmI1PhUSwo1DKxIIiuXlgInuRI+gfgHQD2Vya4VUDZImlJ/JaRdly6Yy9guJKf0SR2F5GIi6/QCklL79AKSWp73SR9dnKJ8HzNd8zbY4/9eHa86X0xDEUhrguK0p0pbDkVVKqhpn9LPRMYUEWwr0vcPOe468QlsRWyfU1fqCwIBHpre/zoaPSJwYLp4OMd/YUC2HRdBDj9/gRwgIhsfMczXKC1rgnIGCHLtQ8VjaPmqZpUlLBnJwThOUii9VkqXmiKKWvN4iZ+oHB3lyGNWNGD7x+ApKx0gcMHTxI5tmg8qR+71IYwTy2DlM8TUxW2Dwe2vLuUA07iH6IWIfJEXcQNwYDc3vz5IcwO4TJLRi24+JdunM2WWkozaDEKx3XQ0qlBFAh7DMVW5RK8VX7vT5bHl1Xg16gZJiNWj8IlF4vpkaBnwNdBe5go/SVurx/ZuQuChbe1obgSen1aG5Qyi1Kx4CxSsk3F4aj2ZqRfp7EJWSurS65tbq87bTLa10HpcvbyzeUrnef1uGUdGXrkZW4wWGUnLTO0clw5dhn5x4Fb2DIoTCBrQ2nBKuGHtE0eNJDyfFD3VuzcMSp9/EzV+z1zcmDZOmSJ46joJPQMA4+T43iZOmOQPlfoAydzWL1KL52nqBt65Kjh1jsuF7QoaWK6bvs2GpA2aqpN/QuaOS3wZugdeetLvttnj4Ipa096tLZtQrxBxFKwFrUKkYaAAAAAElFTkSuQmCC');
+                    background-size: 30px 30px;
+                    background-repeat: no-repeat;
+                }
 
-        .tab-header-menu {
-            .button-menu {
-                .imposium-btn {
+                .heading {
+                    .font-style;
                     margin: 0;
+                    font-size: 20px;
+                    font-weight: normal;
                 }
             }
-        }
-    }
-    .tab-content{
-        overflow-y: auto;
-        .layer;
-        top:@tabHeight;
-        height:calc(100% - @tabHeight);
 
-        .tab-content-wrapper{
-            .layer;
+            .btn-toggle-services {
+                .faux-select;
+            }
         }
-    }
-}
 
+        .inner-right {
+            .flex-row;
 
-.controlled-list{
+            a{
+                border:none;
+            }
+            
+            .btn-help {
+                .circle-style;
+                margin-left: 15px;
+                font-size:28px;
+            }
+            
+            .btn-toggle-orgs {
+                .btn-reset;
+                .circle-style;
+                margin-left: 15px;
+            }
+            
+            .btn-toggle-story {
+                .faux-select;
 
-	width:100%;
+                .story-name {
+                    .ellipsis;
+                    max-width: 220px;
+                }
+            }
 
-	.item{
-		position:relative;
-		width:100%;
-		height:@inputHeight;
-		margin-top:@fieldMargin / 2;
-		margin-bottom:@fieldMargin / 2;
+            .btn-logout {
+                .btn-reset;
+                padding: 10px 0px;
+                font-size: 14px;
+            }
+        }
+    }
 
-		&:hover{
-			background:@background;
-			.buttons{
-				display: block;
-			}
-		}
+    .service-menu {
+        width: 320px;
+        max-height: 400px;
+        overflow: auto;
+        display: flex;
+        flex-direction: column;
+        padding-top: 5px;
 
-		.buttons{
-			display: none;
-			position:absolute;
-			right:0px;
-			top:0px;
-		}
-	}
-}
+        .service-menu-section {
+            width: 100%;
+            padding: 5px;
+            box-sizing: border-box;
 
-@sectionPadding:7px 5px 5px 5px;
-@sectionHeaderHeight:25px;
-@loaderHeight:6px;
-@sectionFontSize:14px;
-@headerPadding:2px;
+            .service-menu-heading {
+                .secondary-font-style;
+                font-size: @fontSizeDefault;
+                text-transform: uppercase;
+                color: #b1b1b1;
+                border-bottom: 1px solid #5f5f5f;
+                box-sizing: border-box;
+                padding-left: 2px;
+                margin-bottom: 5px;
+            }
 
-.section{
-	.layer;
+            .service-menu-anchors {
+                width: 100%;
+                display: flex;
+                flex-wrap: wrap;
 
-	.section-header{
-		background:lighten(@backgroundLight, 10%);
-		border-bottom:2px solid @primary;
-		width:100%;
-		height:@sectionHeaderHeight;
-		padding-left:5px;
-		padding-right:5px;
-		box-sizing: border-box;
-		margin-bottom:5px;
-		position: relative;
-		white-space: nowrap;
-		text-overflow: ellipsis;
+                .anchor-wrapper {
+                    width: 50%;
+                    padding: 5px;
+                    box-sizing: border-box;
 
-		.title{
-			font-size:@sectionFontSize;
-		}
+                    .icon-fixed {
+                        width: 22px;
+                    }
 
-		.tab {
-			display: inline-block;
-			padding: 0 0.28em;
-			box-sizing: border-box;
-			cursor: pointer;
-			color: @textDefault;
-			font-size: @sectionFontSize;
-			background-color: @tooltipBackgroundLight;
-			height: calc(100% - 2px);
-			margin-top: 2px;
-			opacity: 1;
-			border-top-left-radius: 3px;
-			border-top-right-radius: 3px;
-			margin-right: 2px;
+                    a {
+                        .anchor;
+                        display: flex;
+                        align-items: center;
+                        color: white;
+                        font-size: @fontSizeDefault;
+                    }
 
-			&.last-child {
-				margin-right: 0;
-			}
+                    &.doc {
+                        svg {
+                            color: #4D8C71;
+                        }
+                    }
+                }
+            }
+        }
+    }
 
-			&:hover {
-				background-color: @primary;
-				color: @buttonTextDefault;
-			}
+    .stories-menu {
+        width: 240px;
+        max-height: 400px;
+        display: flex;
+        flex-direction: column;
+        overflow: auto;
 
-			&.active {
-				background-color: @primary;
-				color: @buttonTextDefault;
-				opacity: 1;
-			}
-		}
+        .no-stories-dialog {
+            .font-style;
+            font-size: 12px;
+            text-align: center;
+            padding: 0.3em;
+        }
 
-		.buttons{
-			position: absolute;
-			right:3px;
-			top:1px;
-		}
-	}
+        .btn-change-story {
+            .btn-reset;
+            .ellipsis;
+            max-width: 100%;
+            min-height: 35px;
+            font-size: 12px;
+            border-bottom: 1px solid #494949;
+            box-sizing: content-box;
+            margin: 0;
+            border-radius: 0;
+            padding: 0 5px;
 
-	.section-content{
-		.layer;
-		top:@sectionHeaderHeight;
-		height:calc(100% - @sectionHeaderHeight);
-		padding:@sectionPadding;
-		box-sizing:border-box;
-		overflow-y: auto;
-	}
+            &:last-child {
+                border-bottom: unset;
+            }
 
-	.loading-bar{
-	    position: absolute;
-	    top:23px;
-	    width:100%;
-	    height:@loaderHeight;
-	    background: @primary;
-	    background-size: 10px 10px;
-	    background-image: linear-gradient(
-	        45deg,
-	        rgba(black, 0.2)  25%,
-	        transparent       25%,
-	        transparent       50%,
-	        rgba(black, 0.2)  50%,
-	        rgba(black, 0.2)  75%,
-	        transparent       75%,
-	        transparent
-	    );
-	    animation: barberpole 0.5s linear infinite;
-	}
+            &:hover {
+                background-color: #494949;
+            }
+        }
+    }
 
-	@keyframes barberpole {
-	  from { background-position: 0 0; }
-	  to   { background-position: 20px 10px; }
-	}
-}
+    .orgs-menu {
+        width: 240px;
+        max-height: 400px;
+        overflow: auto;
 
-.determinate-loader {
-    width: 100%;
-    height: 20px;
-    position: relative;
-    border: 1px solid @backgroundLight;
-    border-radius: 5px;
+        .orgs-menu-active-org {
+            .font-style;
+            .flex-row;
+            padding: 10px;
+            border-bottom: 1px solid @defaultBorderColor;
+            background-color: @defaultBorderColor;
 
-    .progress-bg {
-        .layer;
-        background-color: @backgroundHighlight;
-        transform-origin: left;
-        border-radius: 5px;
-        transition: transform 50ms @easeOutQuad;
-    }
+            .active-first-char {
+                .circle-style;
+                width: 40px;
+                height: 40px;
+                font-size: 18px;
+                line-height: 40px;
+                margin-right: 10px;
+            }
+        }
 
-    .progress-copy {
-        .layer;
-        text-align: center;
-        line-height: 20px;
-        border-radius: 5px;
-    }
-}
+        .menu-item {
+            .btn-reset;
+            width: 100%;
+            padding: 10px 0px;
+            font-size: 12px;
+            border-bottom: 1px solid @defaultBorderColor;
 
-.imposium-tag {
-    padding: 3px 4px 3px 5px;
-    margin: 2.5px;
-    box-sizing: border-box;
-    border-radius: 5px;
-    background: @backgroundLight;
-    font-size: 11px;
-    border-left-width: 4px;
-    border-left-style: solid;
-    display: inline-block;
-    position: relative;
-    cursor:pointer;    
-    user-select:none;
+            .inactive-first-char {
+               .circle-style;
+               margin-right: 10px;
+            }
 
-    &:hover{
-        .remove-tag{
-            scale:1;
-            opacity: 1;
-            transition:scale 200ms @easeOutQuad 600ms, opacity 150ms @easeOutQuad 600ms;
+            &.inactive-org-button {
+                .flex-row;
+                box-sizing: border-box;
+                padding: 10px;
+            }
+
+            &:last-of-type {
+                border-bottom: none;
+            }
         }
-    }
 
-    .remove-tag{
-        scale:0;
-        opacity: 0;
-        transition:scale 50ms @easeOutQuad 0ms, opacity 50ms @easeOutQuad 0ms;
-        position:absolute;
-        width:16px;
-        height:16px;
-        border-radius:50%;
-        right:-10px;
-        top:-5px;
-        background:@backgroundHighlight;
-        z-index:100;
+        .orgs-menu-footer {
+            .flex-row;
+            justify-content: space-between;
+            border-top: 1px solid @defaultBorderColor;
 
-        svg {
-            fill: @textDefault;
-            margin-left: 4px;
-            margin-top: 2px;
-            cursor: pointer;
+            .email {
+                .secondary-font-style;
+                .ellipsis;
+                color: #b1b1b1;
+                font-size: 12px;
+                text-transform: lowercase;
+                padding: 10px 15px;
+            }
+
+            .btn-logout {
+                .btn-reset;
+                font-size: 12px;
+                padding: 10px 15px;
+            }
         }
     }
 }
 
-@spinnerSize:20px;
 
-.spinner {
+.horizontal-rule{
+	width:100%;
+	height:2px;
+	box-sizing: border-box;
+	margin-top:5px;
+	margin-bottom:5px;
 	
-	display: inline-block;
-	width:@spinnerSize;
-	height:@spinnerSize;
-	line-height: 100%;
+	&.default{
+		border-top:1px solid @backgroundLight;
+		border-bottom:1px solid @backgroundDark;
+	}
+	&.subtle{
+		border-top:1px solid fadeout(@backgroundLight, 60%);
+		border-bottom:1px solid fadeout(@backgroundDark, 60%);
+	}
+}
 
-	.icon{
-		font-size:18px;
-		text-align:center;
-		width:@spinnerSize;
-		height:@spinnerSize;
-		vertical-align: middle;
-		animation-name: rotate; 
-	    animation-duration: 1s; 
-	    animation-iteration-count: infinite;
-	    animation-timing-function: linear;
-		color: @secondary;
+@modalPadding:5px;
 
-	    svg{
-	    	width:100%;
-	    	height:100%;
-	    }
+.modal{
+	
+	z-index:10000;
+	.layer;
+
+	.modal-bg{
+		.layer;
+		background: fadeout(@backgroundDark, 20%);
 	}
-}
 
-@keyframes rotate {
-    from {transform: rotate(0deg);}
-    to {transform: rotate(360deg);}
+	.modal-container{
+		position: absolute;
+		background: @background;
+		padding:@modalPadding;
+		box-sizing: border-box;
+		border:1px solid @backgroundDark;
+
+		.modal-content{
+			position:absolute;
+			top:0px;
+			left:0px;
+			height:100%;
+			width:100%;
+			box-sizing:border-box;
+			padding:5px;
+		}
+	}
 }
 
 .no-access {
@@ -1796,305 +1822,434 @@ h3{
         display: flex;
         flex-direction: column;
 
-        .no-access-heading {
-            margin-bottom: 8px;
-            text-align: center;
-            font-weight: 400;
-        }
+        .no-access-heading {
+            margin-bottom: 8px;
+            text-align: center;
+            font-weight: 400;
+        }
+
+        a {
+            text-align: center;
+            color: @primary;
+            text-decoration: none;
+            font-size: 16px;
+        }
+    }
+}
+
+.media-player{
+
+	.layer;
+
+	.inner-viewer{
+		position:absolute;
+
+		img{
+			width:100%;
+			height:100%;
+			outline:1px solid darken(@backgroundDark, 10%);
+			.chess
+		}
+
+		video{
+			width:100%;
+			height:100%;
+			outline:1px solid darken(@backgroundDark, 10%);
+		}
+
+		audio{
+			width:100%;
+			height:100%;
+			outline:1px solid darken(@backgroundDark, 10%);
+		}
+	}
+}
+
+.preview-not-available{
+    position: absolute;
+    top:50%;
+    left:50%;
+    margin-left:-150px;
+    margin-top:-150px;
+    width:300px;
+    height:300px;
+    text-align:center;
+
+    .icon{
+        margin-bottom:20px;
+        svg{
+            width:50px;
+            height:50px;
+        }
+    }
+} 
+.publish-status-indicator{
+  display: inline-block;
+  padding:3px;
+  border-radius: 2px;
+  background-color: @backgroundDark;
+  vertical-align: top;
+  box-sizing: border-box;
+  height: 24px;
+  margin-top: 2px;
+  color:@textDefault;
+
+  .spinner{
+    width:16px;
+    height:16px;
+    margin-right:5px;
 
-        a {
-            text-align: center;
-            color: @primary;
-            text-decoration: none;
-            font-size: 16px;
-        }
+    .icon{
+      width:16px;
+      height:16px;
     }
+  }
 }
 
 
-.tooltipMixin(@textColor, @bgColor){
-	color: @textColor !important;
-	background-color: @bgColor !important;
-	padding:1px 4px !important;
-	border-radius:0px !important;
-	transition: opacity 0.1s ease-out !important;
-	opacity:1 !important;
-
-	&.place-top{
-		margin-top:-4px !important;
-	}
+.publish-wizard{
 
-	&.place-bottom{
-		margin-bottom:-4px !important;
-	}
+    padding-top:30px;
 
-	&.place-left{
-		margin-left:-4px !important;
-	}
+    .missingColumns{
+        margin: 15px;
+        color: red;
+        word-break: break-word;
+    }
+    
+    .publish-wizard-header{
+        position:absolute;
+        padding:2px;
+        padding-left:5px;
+        color:@primary;
+        box-sizing: border-box;
+        top:0px;
+        left:0px;
+        height:25px;
+        width:100%;
+        border-bottom:2px solid @primary;
+    }
 
-	&.place-right{
-		margin-right:-4px !important;
-	}
+    .publish-status-indicator{
+        position: absolute;
+        right: 2px;
+        top: 28px;
+    }
 
- 	&:after {
-	 	border:none !important;
- 	}
-}
+    .publish-header {
+        display: inline-block;
+        padding: @headerPadding;
+        width: 100%;
+        font-size: @sectionFontSize;
+        box-sizing: border-box;
+        border-bottom: 2px solid @primary;
+        color: @primary;
+        font-weight: 700;
+    }
 
-.imposium-button-tooltip-light{
-	.tooltipMixin(@headerTextDefault, @tooltipBackgroundLight);
-}
+    .next-button {
+        position: absolute;
+        text-align: center;
+        padding-bottom: 10px;
+        width: 100%;
+        bottom: 0;
+        right: 0;
+    }
 
-.imposium-button-tooltip-dark{
-	.tooltipMixin(@headerTextDefault, @backgroundDark);
-}
-.auth-gate {
-  .layer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+    .publish-status{
+        width: 60%;
+        font-size: @sectionFontSize;
+        color: white;
+        text-align: left;
+        font-weight: normal;
+    }
 
+    .publish-wizard-error{
+        padding:10px;
+        box-sizing: border-box;
+        background-color: @backgroundLight;
+    }
 
-.new-tag{
-    display: inline-block;
-    width:150px;
-    height:@inputHeight;
-    vertical-align: top;
-    margin-top: 1px;
-    margin-left:2px;
-    input{
+    .lower-buttons{
+        margin-top:10px;
+        left:0px;
         width:100%;
-        height:@inputHeight;
-        display: inline-block;
-        background:none;
-        border:none;
-        color:@textDefault;
-        font-size:@fontSizeSmall;
-        box-sizing:border-box;
-        vertical-align: top;
-        border-radius:0px;
-        appearance:none;
+        text-align: center;
+    }
 
-        &:hover{
-            background:rgba(0,0,0,0.2);
+    .link-wrapper{
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    .big-link{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin:5px 2px 0px 2px;
+        width:calc(50% - 7.5px);
+        height:100px;
+        background: darken(@background, 0.5%);
+        border:1px solid darken(@background, 4%);
+        cursor:pointer;
+        position: relative;
+
+        &.disabled{
+            pointer-events: none;
+          h1{
+            color:@backgroundHighlight;
+          }
         }
 
-        &:focus{
-            background:rgba(0,0,0,0.2);
+        h1{
+            text-align: center;
+            width:100%;
+        }
+
+        &:hover{
+            background:lighten(@background, 1%);
+            h1{
+                color:@primary;
+            }
         }
     }
 }
 
-.asset-type-cell {
-    font-size: 1.2em;
-    margin-left: 4px;
-}
+.progress-bar {
 
-.tags-wrapper {
-    display: inline-block;
+    progress {
+      border-radius: 7px;
+      width:10em;
+      background: @primary;
+      height:@loaderHeight;
+      border-radius: 7px;
+      background-size: 10px 10px;
+      background-image: linear-gradient(
+              45deg,
+              rgba(black, 0.2)  25%,
+              transparent       25%,
+              transparent       50%,
+              rgba(black, 0.2)  50%,
+              rgba(black, 0.2)  75%,
+              transparent       75%,
+              transparent
+      );
+      animation: barberpole 0.5s linear infinite;
+    }
+    progress::-webkit-progress-bar {
+      border-radius: 7px;
+      background: transparent;
+    }
+    progress::-webkit-progress-value {
+      background-color: white;
+      border-radius: 7px;
+      transition : width 0.5s ease;
+    }
 }
 
-.file-hidden {
-    display: none;
-}
 
-.uploads-menu {
-    width: 320px;
-    height: 175px;
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    background: @background;
+@sectionPadding:7px 5px 5px 5px;
+@sectionHeaderHeight:25px;
+@loaderHeight:6px;
+@sectionFontSize:14px;
+@headerPadding:2px;
+
+.section{
+	.layer;
+
+	.section-header{
+		background:lighten(@backgroundLight, 10%);
+		border-bottom:2px solid @primary;
+		width:100%;
+		height:@sectionHeaderHeight;
+		padding-left:5px;
+		padding-right:5px;
+		box-sizing: border-box;
+		margin-bottom:5px;
+		position: relative;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+
+		.title{
+			font-size:@sectionFontSize;
+		}
+
+		.tab {
+			display: inline-block;
+			padding: 0 0.28em;
+			box-sizing: border-box;
+			cursor: pointer;
+			color: @textDefault;
+			font-size: @sectionFontSize;
+			background-color: @tooltipBackgroundLight;
+			height: calc(100% - 2px);
+			margin-top: 2px;
+			opacity: 1;
+			border-top-left-radius: 3px;
+			border-top-right-radius: 3px;
+			margin-right: 2px;
 
-    .uploads-controls {
-        width: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 5px;
-    }
+			&.last-child {
+				margin-right: 0;
+			}
 
-    .uploads-list {
-        width: 100%;
-        box-sizing: border-box;
-        margin-top: 5px;
-        padding: 5px;
-        border-top: 1px solid #494949;
+			&:hover {
+				background-color: @primary;
+				color: @buttonTextDefault;
+			}
 
-        .ongoing-upload {
-            display: flex;
-            flex-direction: column;
-            align-items: flex-start;
-            margin-bottom: 5px;
-        }
-    }
+			&.active {
+				background-color: @primary;
+				color: @buttonTextDefault;
+				opacity: 1;
+			}
+		}
 
-    .form-field{
+		.buttons{
+			position: absolute;
+			right:3px;
+			top:1px;
+		}
+	}
 
-        vertical-align:top;
-        label{
-            width:120px;
-        }
+	.section-content{
+		.layer;
+		top:@sectionHeaderHeight;
+		height:calc(100% - @sectionHeaderHeight);
+		padding:@sectionPadding;
+		box-sizing:border-box;
+		overflow-y: auto;
+	}
 
-        .form-field-content{
-            width:calc(100% - 120px);
-        }
-    }
-}
+	.loading-bar{
+	    position: absolute;
+	    top:23px;
+	    width:100%;
+	    height:@loaderHeight;
+	    background: @primary;
+	    background-size: 10px 10px;
+	    background-image: linear-gradient(
+	        45deg,
+	        rgba(black, 0.2)  25%,
+	        transparent       25%,
+	        transparent       50%,
+	        rgba(black, 0.2)  50%,
+	        rgba(black, 0.2)  75%,
+	        transparent       75%,
+	        transparent
+	    );
+	    animation: barberpole 0.5s linear infinite;
+	}
 
-.asset-filter {
-    padding: 7px;
-    border-bottom: 1px solid #494949;
-    background: @background;
-    display:inline-block;
-    &:hover{
-        background:@backgroundLight;
-    }
+	@keyframes barberpole {
+	  from { background-position: 0 0; }
+	  to   { background-position: 20px 10px; }
+	}
 }
 
-.assets-paginator {
-    width: 100%;
-    height: 25px;
-    background-color: @background;
-    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
-    border-top: 2px solid rgba(0, 0, 0, 0.1);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+.shortcuts-menu {
+    padding: 5px;
+    box-sizing: border-box;
+    background: @background;
 
-    .total-assets {
-        border-radius: 3px;
-        background: @backgroundHighlight;
-        padding: 1px 4px;
+    table {
+    tr {
+      td {
         font-size: 12px;
-    }
+        padding: 0.2em;
 
-    .jump-to-wrapper {
-        display: flex;
-        align-items: center;
+        &.hotkey-cell {
+          font-weight: 600;
+          text-align: right;
+        }
 
-        .jump-to-page {
-            .inputMixin;
-            width: 30px;
-            margin: 0 3px;
+        &.shortcut-desc {
+          padding: 0.2em 0.2em 0.2em 1.2em;
         }
+      }
     }
+  }
 }
 
-.tags-column {
-    position:relative;
-    padding-right:50px;
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-    width: 100%;
-    padding: 0.6rem;
-    box-sizing: border-box;
-    font-size: 13px;
+@spinnerSize:20px;
 
-    .form-field {
-        margin: 0 0.6rem 0 0;
-    }
-}
+.spinner {
+	
+	display: inline-block;
+	width:@spinnerSize;
+	height:@spinnerSize;
+	line-height: 100%;
 
-.centered-cell {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+	.icon{
+		font-size:18px;
+		text-align:center;
+		width:@spinnerSize;
+		height:@spinnerSize;
+		vertical-align: middle;
+		animation-name: rotate; 
+	    animation-duration: 1s; 
+	    animation-iteration-count: infinite;
+	    animation-timing-function: linear;
+		color: @secondary;
 
-    .form-field-content {
-        margin-left: 0;
-    }
+	    svg{
+	    	width:100%;
+	    	height:100%;
+	    }
+	}
 }
 
-.menu-count-superscript {
-    vertical-align: top;
-    font-size: 11px;
-    margin-left: 0.1em;
-    display: inline-block;
-    margin-top: -3px;
+@keyframes rotate {
+    from {transform: rotate(0deg);}
+    to {transform: rotate(360deg);}
 }
 
-.asset-status-cell{
-    width:100%;
-    height:100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    .status-indicator{
-        width:5px;
-        height:100%;
-        box-sizing:border-box;
 
-        &.processing{
-            background:#c5b73d;
-        }
+@compConfigWidth:280px;
 
-        &.complete{
-            background:#307f35;
-        }
-    }
-}
+.static-composition-editor{
 
-.ongoing-upload-inner{
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    width: 100%
-}
+	.layer;
 
-.asset-preview-background{
-    border:1px solid @backgroundDark;
-    background-color: @background;
-    &.transparent{
-        .chess;
-    }
+	.composition-config{
+		position: absolute;
+		left:0;
+		width:@compConfigWidth;
+		height:100%;
+		overflow-y: scroll;
+		background: @background;
+		padding-left:5px;
+		padding-right:5px;
+		box-sizing: border-box;
+	}
 
-    &.hidden{
-        opacity: 0;
-    }
-}
-.close-icon-preview{
-    z-index: 9999 !important;
-    justify-content: flex-end;
-    display: flex;
-    height: 30px !important;
-    align-items: center
+	.composition-preview{
+		.layer;
+		left:@compConfigWidth;
+		width:calc(100% - @compConfigWidth);
+	}
 }
 
-.media-player{
-
+.static-composition-renderer{
 	.layer;
+	font-family:'Arial';
+	border:2px solid @backgroundLight;
+}
 
-	.inner-viewer{
-		position:absolute;
-
-		img{
-			width:100%;
-			height:100%;
-			outline:1px solid darken(@backgroundDark, 10%);
-			.chess
-		}
-
-		video{
-			width:100%;
-			height:100%;
-			outline:1px solid darken(@backgroundDark, 10%);
-		}
+.composition-renderer-layer{
+	position: absolute;
+	transform-origin:center center;
+}
 
-		audio{
-			width:100%;
-			height:100%;
-			outline:1px solid darken(@backgroundDark, 10%);
-		}
+.composition-text-layer{
+	will-change:transform;
+	.layer;
+
+	.inner-text{
+		display: inline-block;
 	}
 }
 
-
 @viewerBtnHeight:30px;
 @storyViewerVarWidth:250px;
 @storyViewerHeaderHeight:35px;
@@ -2198,512 +2353,357 @@ h3{
     }
 
     .ansi-cyan-bg {
-        background-color: @logCyan;
-    }
-
-    .ansi-white-bg {
-        background-color: @logWhite;
-    }
-
-    .ansi-bright-black-bg {
-        background-color: @logBlack;
-    }
-
-    .ansi-bright-red-bg {
-        background-color: @danger;
-    }
-
-    .ansi-bright-green-bg {
-        background-color: @info;
-    }
-
-    .ansi-bright-yellow-bg {
-        background-color: @logYellow;
-    }
-
-    .ansi-bright-blue-bg {
-        background-color: @primary;
-    }
-
-    .ansi-bright-magenta-bg {
-        background-color: @logMagenta;
-    }
-
-    .ansi-bright-cyan-bg {
-        background-color: @logCyan;
-    }
-
-    .ansi-bright-white-bg {
-        background-color: @logWhite;
-    }
-}
-
-.running-prompt{
-
-    &.error-wrapper {
-        width: 250px;
-    }
-    
-    position: absolute;
-    width:200px;
-    height:150px;
-    text-align: center;
-    top:50%;
-    left:50%;
-    margin-top:-75px;
-    margin-left:-100px;
-}
-
-.story-viewer{
-    
-    .layer;
-    
-    background:@backgroundDark;
-
-    .buttons{
-        position:absolute;
-        top:0px;
-        left:0px;
-        width:100%;
-        height:@viewerBtnHeight;
-        box-sizing: border-box;
-        padding:1px;
-        background:lighten(@backgroundDark, 5%);
-    }
-    
-    .log{
-        .layer;
-        overflow-y: scroll;
-        padding:10px;
-        box-sizing:border-box;
-    }
-
-    .variables{
-        position: absolute;
-        top:0px;
-        left:0px;
-        width:@storyViewerVarWidth;
-        height:100%;
-        padding:10px;
-        box-sizing:border-box;
-        background:darken(@background, 1%);
-        border-right:1px solid @backgroundDark;
-        overflow-y: scroll;
-    }
-
-    .viewer-content{
-        position:absolute;
-        left:@storyViewerVarWidth;
-        top:0px;
-        height:100%;
-        width:calc(100% - @storyViewerVarWidth);
-
-        .content-header{
-            .layer;
-            box-sizing: border-box;
-            padding-top:4px;
-            padding-left:4px;
-            height:@storyViewerHeaderHeight;
-            background:darken(@background, 1%);
-
-            .output{
-                margin-top:4px;
-                margin-right:5px;
-                display: inline-block;
-                vertical-align: top;
-            }
-
-            .right-interface{
-                position: absolute;
-                right: 8px;
-                top: 8px;
-                text-align: right;
-            }
-        }
-
-        .content-wrapper{
-            .layer;
-            top:@storyViewerHeaderHeight;
-            height:calc(100% - @storyViewerHeaderHeight);
-        }
-    }
-}
-
-
-
-.variable-default-upload{
-
-    width:100%;
-    min-height:@inputHeight;
-    background: @background;
-    top:50%;
-    left:50%;
-    text-align:center;
-    box-sizing: border-box;
-    cursor:pointer;
-    
-    &:hover{
-        outline:1px solid @primary;
-    }
-
-    .default-preview{
-        width:100%;
-    }
-
-    .btn-wrapper{
-        position: absolute;
-        top:0px;
-        right:0px;
-    }
-}
-
-.preview-not-available{
-    position: absolute;
-    top:50%;
-    left:50%;
-    margin-left:-150px;
-    margin-top:-150px;
-    width:300px;
-    height:300px;
-    text-align:center;
-
-    .icon{
-        margin-bottom:20px;
-        svg{
-            width:50px;
-            height:50px;
-        }
-    }
-} 
-
-@compConfigWidth:280px;
-
-.static-composition-editor{
-
-	.layer;
-
-	.composition-config{
-		position: absolute;
-		left:0;
-		width:@compConfigWidth;
-		height:100%;
-		overflow-y: scroll;
-		background: @background;
-		padding-left:5px;
-		padding-right:5px;
-		box-sizing: border-box;
-	}
-
-	.composition-preview{
-		.layer;
-		left:@compConfigWidth;
-		width:calc(100% - @compConfigWidth);
-	}
-}
-
-.static-composition-renderer{
-	.layer;
-	font-family:'Arial';
-	border:2px solid @backgroundLight;
-}
-
-.composition-renderer-layer{
-	position: absolute;
-	transform-origin:center center;
-}
-
-.composition-text-layer{
-	will-change:transform;
-	.layer;
-
-	.inner-text{
-		display: inline-block;
-	}
-}
-
-.font-preview{
-	.layer;
-	text-align: center;
-	background: white;
-	color:black;
-	font-weight: normal;
-	font-size:80px;
-}
-.shortcuts-menu {
-    padding: 5px;
-    box-sizing: border-box;
-    background: @background;
+        background-color: @logCyan;
+    }
 
-    table {
-    tr {
-      td {
-        font-size: 12px;
-        padding: 0.2em;
+    .ansi-white-bg {
+        background-color: @logWhite;
+    }
 
-        &.hotkey-cell {
-          font-weight: 600;
-          text-align: right;
-        }
+    .ansi-bright-black-bg {
+        background-color: @logBlack;
+    }
 
-        &.shortcut-desc {
-          padding: 0.2em 0.2em 0.2em 1.2em;
-        }
-      }
+    .ansi-bright-red-bg {
+        background-color: @danger;
     }
-  }
-}
-#ct-container {
-  .ct-toast {
-    padding: 0.5em 1em;
-    min-height: unset;
-    position: absolute;
-    bottom: 5em;
-    background-color: @backgroundDark;
-    border-top: 1px solid @backgroundHighlight;
-    border-bottom: 1px solid @backgroundHighlight;
-    border-right: 1px solid @backgroundHighlight;
-    color: @textDefault;
-    .ct-text-group {
-      margin-left: 1em;
+
+    .ansi-bright-green-bg {
+        background-color: @info;
     }
-  }
-}
 
+    .ansi-bright-yellow-bg {
+        background-color: @logYellow;
+    }
 
-.publish-wizard{
+    .ansi-bright-blue-bg {
+        background-color: @primary;
+    }
 
-    padding-top:30px;
+    .ansi-bright-magenta-bg {
+        background-color: @logMagenta;
+    }
 
-    .missingColumns{
-        margin: 15px;
-        color: red;
-        word-break: break-word;
+    .ansi-bright-cyan-bg {
+        background-color: @logCyan;
+    }
+
+    .ansi-bright-white-bg {
+        background-color: @logWhite;
+    }
+}
+
+.running-prompt{
+
+    &.error-wrapper {
+        width: 250px;
     }
     
-    .publish-wizard-header{
+    position: absolute;
+    width:200px;
+    height:150px;
+    text-align: center;
+    top:50%;
+    left:50%;
+    margin-top:-75px;
+    margin-left:-100px;
+}
+
+.story-viewer{
+    
+    .layer;
+    
+    background:@backgroundDark;
+
+    .buttons{
         position:absolute;
-        padding:2px;
-        padding-left:5px;
-        color:@primary;
-        box-sizing: border-box;
         top:0px;
         left:0px;
-        height:25px;
         width:100%;
-        border-bottom:2px solid @primary;
+        height:@viewerBtnHeight;
+        box-sizing: border-box;
+        padding:1px;
+        background:lighten(@backgroundDark, 5%);
+    }
+    
+    .log{
+        .layer;
+        overflow-y: scroll;
+        padding:10px;
+        box-sizing:border-box;
     }
 
-    .publish-status-indicator{
+    .variables{
         position: absolute;
-        right: 2px;
-        top: 28px;
+        top:0px;
+        left:0px;
+        width:@storyViewerVarWidth;
+        height:100%;
+        padding:10px;
+        box-sizing:border-box;
+        background:darken(@background, 1%);
+        border-right:1px solid @backgroundDark;
+        overflow-y: scroll;
     }
 
-    .publish-header {
-        display: inline-block;
-        padding: @headerPadding;
-        width: 100%;
-        font-size: @sectionFontSize;
-        box-sizing: border-box;
-        border-bottom: 2px solid @primary;
-        color: @primary;
-        font-weight: 700;
-    }
+    .viewer-content{
+        position:absolute;
+        left:@storyViewerVarWidth;
+        top:0px;
+        height:100%;
+        width:calc(100% - @storyViewerVarWidth);
 
-    .next-button {
-        position: absolute;
-        text-align: center;
-        padding-bottom: 10px;
-        width: 100%;
-        bottom: 0;
-        right: 0;
-    }
+        .content-header{
+            .layer;
+            box-sizing: border-box;
+            padding-top:4px;
+            padding-left:4px;
+            height:@storyViewerHeaderHeight;
+            background:darken(@background, 1%);
 
-    .publish-status{
-        width: 60%;
-        font-size: @sectionFontSize;
-        color: white;
-        text-align: left;
-        font-weight: normal;
-    }
+            .output{
+                margin-top:4px;
+                margin-right:5px;
+                display: inline-block;
+                vertical-align: top;
+            }
 
-    .publish-wizard-error{
-        padding:10px;
-        box-sizing: border-box;
-        background-color: @backgroundLight;
+            .right-interface{
+                position: absolute;
+                right: 8px;
+                top: 8px;
+                text-align: right;
+            }
+        }
+
+        .content-wrapper{
+            .layer;
+            top:@storyViewerHeaderHeight;
+            height:calc(100% - @storyViewerHeaderHeight);
+        }
     }
+}
 
-    .lower-buttons{
-        margin-top:10px;
+
+@tabHeight:25px;
+@tabWidth:80px;
+
+.tabs{
+    .layer;
+    .tab-header{
+        white-space: nowrap;
+        position: absolute;
+        top:0px;
         left:0px;
+        background: lighten(@backgroundLight, 4%);
         width:100%;
-        text-align: center;
-    }
+        height:@tabHeight;
+        box-sizing:border-box;
+        border-bottom:2px solid @primary;
 
-    .link-wrapper{
-        display: flex;
-        flex-wrap: wrap;
-    }
+        .tab-header-option{
+            min-width:@tabWidth;
+            display: inline-block;
+            padding-left:5px;
+            padding-right:5px;
+            font-size: @sectionFontSize;
+            height:100%;
+            user-select: none;
+            cursor:pointer;
+            text-align:center;
+            box-sizing: border-box;
 
-    .big-link{
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin:5px 2px 0px 2px;
-        width:calc(50% - 7.5px);
-        height:100px;
-        background: darken(@background, 0.5%);
-        border:1px solid darken(@background, 4%);
-        cursor:pointer;
-        position: relative;
+            &:hover{
+                background:lighten(@backgroundLight, 5%);
+            }
 
-        &.disabled{
-            pointer-events: none;
-          h1{
-            color:@backgroundHighlight;
-          }
+            &.active{
+                background:lighten(@backgroundLight, 10%);
+                border-bottom: 2px solid @primary;
+                font-weight: 700;
+            }
+        }
+
+        .tab-header-menu {
+            .button-menu {
+                .imposium-btn {
+                    margin: 0;
+                }
+            }
+        }
+    }
+    .tab-content{
+        overflow-y: auto;
+        .layer;
+        top:@tabHeight;
+        height:calc(100% - @tabHeight);
+
+        .tab-content-wrapper{
+            .layer;
         }
+    }
+}
 
-        h1{
-            text-align: center;
-            width:100%;
+.imposium-tag {
+    padding: 3px 4px 3px 5px;
+    margin: 2.5px;
+    box-sizing: border-box;
+    border-radius: 5px;
+    background: @backgroundLight;
+    font-size: 11px;
+    border-left-width: 4px;
+    border-left-style: solid;
+    display: inline-block;
+    position: relative;
+    cursor:pointer;    
+    user-select:none;
+
+    &:hover{
+        .remove-tag{
+            scale:1;
+            opacity: 1;
+            transition:scale 200ms @easeOutQuad 600ms, opacity 150ms @easeOutQuad 600ms;
         }
+    }
 
-        &:hover{
-            background:lighten(@background, 1%);
-            h1{
-                color:@primary;
-            }
+    .remove-tag{
+        scale:0;
+        opacity: 0;
+        transition:scale 50ms @easeOutQuad 0ms, opacity 50ms @easeOutQuad 0ms;
+        position:absolute;
+        width:16px;
+        height:16px;
+        border-radius:50%;
+        right:-10px;
+        top:-5px;
+        background:@backgroundHighlight;
+        z-index:100;
+
+        svg {
+            fill: @textDefault;
+            margin-left: 4px;
+            margin-top: 2px;
+            cursor: pointer;
         }
     }
 }
+h1, h2, h3, h4, h5 {
+    font-family: 'Oswald', sans-serif;
+    color:@headerTextDefault;
+    display: inline-block;
+}
 
-.progress-bar {
+h1{
+	font-size:@fontSizeXLarge;
+	margin-bottom:5px;
+}
 
-    progress {
-      border-radius: 7px;
-      width:10em;
-      background: @primary;
-      height:@loaderHeight;
-      border-radius: 7px;
-      background-size: 10px 10px;
-      background-image: linear-gradient(
-              45deg,
-              rgba(black, 0.2)  25%,
-              transparent       25%,
-              transparent       50%,
-              rgba(black, 0.2)  50%,
-              rgba(black, 0.2)  75%,
-              transparent       75%,
-              transparent
-      );
-      animation: barberpole 0.5s linear infinite;
-    }
-    progress::-webkit-progress-bar {
-      border-radius: 7px;
-      background: transparent;
-    }
-    progress::-webkit-progress-value {
-      background-color: white;
-      border-radius: 7px;
-      transition : width 0.5s ease;
-    }
+h2{
+	font-size:@fontSizeLarge;
+	line-height: @fontSizeLarge;
+	margin-bottom:3px;
 }
 
-.publish-status-indicator{
-  display: inline-block;
-  padding:3px;
-  border-radius: 2px;
-  background-color: @backgroundDark;
-  vertical-align: top;
-  box-sizing: border-box;
-  height: 24px;
-  margin-top: 2px;
-  color:@textDefault;
+h3{
+	font-size:@fontSizeDefault;
+	line-height:@fontSizeDefault;
+	margin-bottom:2px;
+}
 
-  .spinner{
-    width:16px;
-    height:16px;
-    margin-right:5px;
+.text-primary{
+	color:@primary;
+}
 
-    .icon{
-      width:16px;
-      height:16px;
+.text-secondary{
+	color:@secondary;
+}
+
+.text-danger{
+	color:@danger;
+}
+
+.text-large{
+	font-size:@fontSizeLarge;
+}
+#ct-container {
+  .ct-toast {
+    padding: 0.5em 1em;
+    min-height: unset;
+    position: absolute;
+    bottom: 5em;
+    background-color: @backgroundDark;
+    border-top: 1px solid @backgroundHighlight;
+    border-bottom: 1px solid @backgroundHighlight;
+    border-right: 1px solid @backgroundHighlight;
+    color: @textDefault;
+    .ct-text-group {
+      margin-left: 1em;
     }
   }
 }
 
-.align-columns { 
 
-    max-height: 300px;
-    overflow-y: auto;
-    
-    p {
-        margin: 10px 20px;
-        font-size: 15px;
-        
-        &.warning {
-            color: red;
-        }
-        
-        &.match-columns {
-            color: white;
-        }
-    }
+.tooltipMixin(@textColor, @bgColor){
+	color: @textColor !important;
+	background-color: @bgColor !important;
+	padding:1px 4px !important;
+	border-radius:0px !important;
+	transition: opacity 0.1s ease-out !important;
+	opacity:1 !important;
 
-    table {
-        margin: 15px auto;
-        width: 75%;
+	&.place-top{
+		margin-top:-4px !important;
+	}
 
-        thead {
-            font-size: 20px;
-            tr {
-                th {
-                    padding-left: 10px;
-                }
-            }
-        }
+	&.place-bottom{
+		margin-bottom:-4px !important;
+	}
 
-        tbody {
-            font-size: 15px;
+	&.place-left{
+		margin-left:-4px !important;
+	}
 
-            tr {
-                td {
-                    padding-top: 5px;
-                    padding-bottom: 5px;
-                    width: 50%;
+	&.place-right{
+		margin-right:-4px !important;
+	}
 
-                    &.variable 
-                    {
-                        p {
-                            margin: 0;
-                            border: 1px solid gray;
-                            padding-left: 10px;
-                            color: white;
-                            line-height: 1.5;
-                        }
-                    }
+ 	&:after {
+	 	border:none !important;
+ 	}
+}
 
-                    .form-field.select-field.no-label {
-                        margin: 0;
-                        
-                        select {
-                            height: 25px;
-                            border: 1px solid gray;
-                        }
+.imposium-button-tooltip-light{
+	.tooltipMixin(@headerTextDefault, @tooltipBackgroundLight);
+}
 
-                        .caret {
-                            color: white;
-                            padding-top: 1px;
-                            padding-right: 10px;
+.imposium-button-tooltip-dark{
+	.tooltipMixin(@headerTextDefault, @backgroundDark);
+}
 
-                            .svg-inline--fa {
-                                height: 20px;
-                            }
-                        }
-                    }
-                }
-            }
-        }
+
+.variable-default-upload{
+
+    width:100%;
+    min-height:@inputHeight;
+    background: @background;
+    top:50%;
+    left:50%;
+    text-align:center;
+    box-sizing: border-box;
+    cursor:pointer;
+    
+    &:hover{
+        outline:1px solid @primary;
+    }
+
+    .default-preview{
+        width:100%;
+    }
+
+    .btn-wrapper{
+        position: absolute;
+        top:0px;
+        right:0px;
     }
 }
+