Fusion360 project browser dark theme (moved https://github.com/OmegaRogue/FusionStyle )

README.md

Base folder is C:\Program Files\Autodesk\webdeploy\production{currentID} dashboard_rel.css goes into OfflineJS\OfflineJS.zip

ActionMenu.css into Neutron\UI\Base\Resources\ActionMenu\style

MessageBox.css goes into C:\Program Files\Autodesk\webdeploy\production\48ac19808c8c18863dd6034eee218407ecc49825\Neutron\UI\Base\Resources\CSS

ActionMenu.css

/* :root {
	--scrollbar-color: #47474B;
    --scrollbar-hover-color: #47474B;
    --main-bg-color: #323232;
    --main-fg-color: #C0C0C6;
    --main-selected-bg-color: #4A4D51;
    --main-selected-fg-color: #EEEEEE;
    --main-active-bg-color: #354F85;
    --main-active-fg-color: var(--main-selected-fg-color);
    --outer-bg-color: #383838;
    --outer-fg-color: var(--main-fg-color);
    --outer-selected-bg-color: #4A4D51;
    --outer-hover-bg-color: var(--main-bg-color);
    --outer-selected-fg-color: var(--main-fg-color);
    --border-color: #2C2C2C;
    --link-fg-color: #287BDE;
    --button-blue-border-color: #354F85;
    --button-blue-bg-color: #354F85;
    --button-blue-fg-color: #EEEEEE;
    --button-blue-disabled-border-color: #5E6060;
    --button-blue-disabled-fg-color: #777777;
    --button-blue-disabled-bg-color: var(--main-bg-color);
    --button-grey-border-color: #242424;
    --button-grey-bg-color: #424447;
    --button-grey-fg-color: var(--main-fg-color);
    --button-grey-disabled-border-color: #242424;
    --button-grey-disabled-fg-color: #6A6A70;
    --button-grey-disabled-bg-color: var(--main-bg-color);
    --symbol-fg-color: #A5A5AA;
    --symbol-bg-color: var(--main-bg-color);
    --symbol-green-color: #669653;
    --symbol-hover-bg-color: #424447;
} */

* {
    color: #C0C0C6;
    /* background-color: #323232; */
    border-color: #2C2C2C;
    font-size: 13px;
}

QTAMItem#qtambaseitem {
    background-color: blue;
}

QFrame#itemseparator {
    color: #2C2C2C;
    background-color: #2C2C2C;
}

#cacheManagementControl {
    background-color: red;
    min-height: 64px;
}

QLabel#itemDescLabel {
    color: yellow;
    margin-right: 15px;
}


/*  cancel/pause/resume buttons */

QPushButton#actionMenuTextButton {
    background-color: #383838;
    color: #C0C0C6;
    border: none;
    padding: 0px;
}

QPushButton::hover#actionMenuTextButton {
    background-color: #323232;
    color: #C0C0C6;
}

QPushButton::pressed#actionMenuTextButton {
    background-color: #4A4D51;
    color: #C0C0C6;
}

#switchItem {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    background-color: #383838;
    padding-left: 32px;
}

#jobViewItem {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background-color: #383838;
}

#jobViewButton {
    padding-left: 16px;
    padding-right: 8px;
    border: none;
    background-color: #383838;
    color: #C0C0C6;
    text-align: left;
    min-height: 24px;
}

#jobViewButton:hover {
    background-color: #323232;
    color: #C0C0C6;
}

#jobViewButton:pressed {
    background-color: #4A4D51;
    color: #C0C0C6;
}


/* shutdown menu buttons */

QPushButton#quitButton {
    background-color: #424447;
    border-color: #242424;
    color: #C0C0C6;
    padding: 4px;
    border: none;
    border-radius: 3px;
}

QPushButton#quitButton:disabled {
    background-color: #323232;
    border-color: #242424;
    color: #6A6A70;
}


/* QPushButton#quitButton:hover {
    background-color: royalblue;
} */


/* QPushButton#quitButton:pressed {
    background-color: skyblue;
} */

QPushButton#cancelButton {
    background-color: #424447;
    border-color: #242424;
    color: #C0C0C6;
    padding: 4px;
    border: none;
    border-radius: 3px;
}

QPushButton#cancelButton:disabled {
    background-color: #323232;
    border-color: #242424;
    color: #6A6A70;
}


/* QPushButton#cancelButton:hover {
    background-color: olive;
}

QPushButton#cancelButton:pressed {
    background-color: navy;
} */

dashboard_rel.css

* {
    border: 0;
    margin: 0;
    padding: 0;
    outline: 0;
}

.noSelection {
    -webkit-user-select: none;
    user-select: none;
}

.waitCursor,
.waitCursor * {
    cursor: wait !important;
}

body {
    --scrollbar-color: #47474B;
    --scrollbar-hover-color: #47474B;
    --main-bg-color: #323232;
    --main-fg-color: #C0C0C6;
    --main-selected-bg-color: #4A4D51;
    --main-selected-fg-color: #EEEEEE;
    --main-active-bg-color: #354F85;
    --main-active-fg-color: var(--main-selected-fg-color);
    --outer-bg-color: #383838;
    --outer-fg-color: var(--main-fg-color);
    --outer-selected-bg-color: #4A4D51;
    --outer-hover-bg-color: var(--main-bg-color);
    --outer-selected-fg-color: var(--main-fg-color);
    --border-color: #2C2C2C;
    --link-fg-color: #287BDE;
    --button-blue-border-color: #354F85;
    --button-blue-bg-color: #354F85;
    --button-blue-fg-color: #EEEEEE;
    --button-blue-disabled-border-color: #5E6060;
    --button-blue-disabled-fg-color: #777777;
    --button-blue-disabled-bg-color: var(--main-bg-color);
    --button-grey-border-color: #242424;
    --button-grey-bg-color: #424447;
    --button-grey-fg-color: var(--main-fg-color);
    --button-grey-disabled-border-color: #242424;
    --button-grey-disabled-fg-color: #6A6A70;
    --button-grey-disabled-bg-color: var(--main-bg-color);
    --symbol-fg-color: #A5A5AA;
    --symbol-bg-color: var(--main-bg-color);
    --symbol-green-color: #669653;
    --symbol-hover-bg-color: #424447;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 14px;
    color: var(--main-fg-color);
    background: var(--outer-bg-color);
    border-color: var(--border-color) !important;
    overflow: hidden;
}

body.rightBorder {
    border-right: var(--border-color) 1px solid;
}


/* scrollbars for entire application */

::-webkit-scrollbar {
    height: 8px;
    width: 8px;
    -webkit-border-radius: 1ex;
    background: none;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-hover-color);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color);
    -webkit-border-radius: 1ex;
    -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0.4);
}

::-webkit-scrollbar-corner {
    background: var(--scrollbar-color);
}

::-webkit-scrollbar-track {
    background: none;
}


/* ToolTips */

.tooltipParent {}

.tooltipParent .tooltip,
#projecticon.tooltip {
    position: absolute;
    background: #515151;
    font-size: 13px;
    line-height: 20px;
    color: #ffffff;
    font-weight: bold;
    padding: 3px 13px 3px 13px;
    border-radius: 10px;
    z-index: 100;
    cursor: default;
    display: none;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
    box-shadow: 0 7px 23px 0 rgba(50, 50, 50, 0.41);
    -webkit-box-shadow: 0 7px 23px 0 rgba(50, 50, 50, 0.41);
}

.tooltipParent.projectName .tooltip {
    white-space: pre-wrap;
    word-wrap: break-word;
    max-width: 240px;
}

.tooltipParent .tooltip.right {
    right: 0;
}

.tooltipParent .tooltip.right30 {
    right: -30px;
}

.tooltipParent .tooltip.left {
    left: 0;
}

.tooltipParent .tooltip.center {
    left: 50%;
}

.tooltipParent .tooltip.bottom {
    top: 100%;
}

.tooltipParent .tooltip.top {
    bottom: 100%;
}

.tooltipParent .tooltip.top80 {
    bottom: 80%;
}

.tooltipParent .tooltip.left.top,
.tooltipParent .tooltip.right.top,
.tooltipParent .tooltip.right30.top {
    transform: translate(0, -6px);
    -webkit-transform: translate(0, -6px);
}

.tooltipParent .tooltip.left.bottom,
.tooltipParent .tooltip.down,
.tooltipParent .tooltip.right.bottom {
    transform: translate(0, 6px);
    -webkit-transform: translate(0, 6px);
}

.tooltipParent .tooltip.center.top {
    transform: translate(-50%, -6px);
    -webkit-transform: translate(-50%, -6px);
}

.tooltipParent .tooltip.center.bottom {
    transform: translate(-50%, 6px);
    -webkit-transform: translate(-50%, 6px);
}

.tooltipParent .tooltip.longtip {
    width: 305px;
    white-space: normal;
    overflow-wrap: normal;
}

.tooltipParent:not(._ttdisabled_):hover .tooltip,
#projecticon.tooltip {
    display: inline-block;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
    -webkit-animation-name: tooltipFadeIn;
    animation-name: tooltipFadeIn;
    opacity: 0;
}

@-webkit-keyframes tooltipFadeIn {
    0%,
    14%,
    100% {
        opacity: 0;
    }
    19%,
    95% {
        opacity: 1;
    }
}

@keyframes tooltipFadeIn {
    0%,
    14%,
    100% {
        opacity: 0;
    }
    19%,
    95% {
        opacity: 1;
    }
}

#alertOverlay {
    display: none;
    opacity: 0.5;
    position: fixed;
    top: 0px;
    left: 0px;
    background: #000000;
    width: 100%;
    z-index: 10;
}

#alertBox {
    display: none;
    position: absolute;
    border: 4px solid #646464;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    background: #FFFFFF;
    width: 300px;
    z-index: 10;
    padding-bottom: 10px;
}

#alertBox #alertTitle {
    background: #646464;
    font-size: 14px;
    font-weight: bold;
    padding: 6px;
    color: #FFFFFF;
    margin: 0 auto;
    text-align: left;
}

#alertBox #alertMessage {
    background: #FFFFFF;
    padding: 15px 6px;
    color: #000000;
    font-weight: bold;
    text-align: center;
}

#alertBox .div4OK {
    position: relative;
    width: 50%;
    float: left;
    text-align: center;
}

#alertBox .div4Cancel {
    position: relative;
    width: 50%;
    float: right;
    text-align: center;
}

#alertBox .alertButton {
    position: relative;
    display: block;
    margin-top: 10px;
    background: #646464;
    padding: 3px;
    color: #FFFFFF;
    border: 1px solid #646464;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    width: 50px;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
}

#alertBox .alertButton:hover {
    background-color: #888888;
    opacity: 0.8;
}

#alertBox .alertButton:active {
    background-color: #7698DB;
    opacity: 1.0
}

._hover_ {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

._hover_:hover {
    opacity: 1;
}


/* dataViewBoard */

#dataViewBoard {
    overflow: hidden;
}


/* topButton */

#dataViewBoard .topButton {
    position: absolute;
}

#dataViewBoard .topButton.users {
    background-image: -webkit-image-set(url(assets/people_16.png) 1x, url(assets/people_16@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: center center;
}

#dataViewBoard .topButton.users ._hover_ {
    background-image: -webkit-image-set(url(assets/people_16_hover.png) 1x, url(assets/people_16_hover@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: center center;
}

#dataViewBoard .topButton.project {
    background-image: -webkit-image-set(url(assets/project_16.png) 1x, url(assets/project_16@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: center center;
}

#dataViewBoard .topButton.project ._hover_ {
    background-image: -webkit-image-set(url(assets/project_16_hover.png) 1x, url(assets/project_16_hover@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: center center;
}

#dataViewBoard .topButton.search {
    background-image: -webkit-image-set(url(assets/search_16.png) 1x, url(assets/search_16@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: right center;
}

#dataViewBoard .topButton.search._disabled_ {
    background-image: -webkit-image-set(url(assets/search_16_dis.png) 1x, url(assets/search_16_dis@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: right center;
}

#dataViewBoard .topButton.search:not(._disabled_) ._hover_ {
    background-image: -webkit-image-set(url(assets/search_16_hover.png) 1x, url(assets/search_16_hover@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: right center;
}

#dataViewBoard .topButton.leave {
    background-image: -webkit-image-set(url(assets/chevron_10x14.png) 1x, url(assets/chevron_10x14@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: center center;
}

#dataViewBoard .topButton.leave ._hover_ {
    background-image: -webkit-image-set(url(assets/chevron_hover_10x14.png) 1x, url(assets/chevron_hover_10x14@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: center center;
}

#dataViewBoard .topButton.close {
    background-image: -webkit-image-set(url(assets/close_normal_10.png) 1x, url(assets/close_normal_10_@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: center center;
}

#dataViewBoard .topButton.close ._hover_ {
    background-image: -webkit-image-set(url(assets/close_hover_10.png) 1x, url(assets/close_hover_10_@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: center center;
}

#dataViewBoard .topButton.searchBack {
    background-image: -webkit-image-set(url(assets/back_16.png) 1x, url(assets/back_16@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: left center;
}

#dataViewBoard .topButton.searchBack ._hover_ {
    background-image: -webkit-image-set(url(assets/back_16_hover.png) 1x, url(assets/back_16_hover@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: left center;
}

#dataViewBoard .projectsTitle {
    position: absolute;
    height: 23px;
    font-size: 16px;
    line-height: 23px;
    color: #646464;
}

#dataViewBoard .searchContextTitle {
    position: absolute;
    font-weight: bold;
    font-size: 12px;
    color: #646464;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}


/* dataViewToolbar */

#dataViewBoard .dataViewToolbar {}


/* delimiterLine */

#dataViewBoard .delimiterLine {
    position: absolute;
    background: #dbdbdb;
    transition: top 0.25s linear;
    -webkit-transition: top 0.25s linear;
}


/* project detail pane */

#dataViewBoard .projectDetailPane {}

#dataViewBoard .projectDetailPane .projectAvatar {
    position: absolute;
    border-radius: 3px;
    background-size: cover;
    background-position: center center;
    cursor: default;
    background-color: #eeeeee;
}

#dataViewBoard .projectDetailPane .projectAvatar.recent {
    background-image: -webkit-image-set(url('assets/recent_32.png') 1x, url('assets/recent_32@2x.png') 2x);
}

#dataViewBoard .projectDetailPane .projectAvatar.newproj {
    background-image: -webkit-image-set(url('assets/new_proj_32.png') 1x, url('assets/new_proj_32@2x.png') 2x);
}

#dataViewBoard .projectDetailPane .projectName {
    position: absolute;
    font-size: 24px;
    color: rgb(100, 100, 100);
    font-weight: normal;
    cursor: default;
}

#dataViewBoard .projectDetailPane .projectName:not(._disabled_):hover span {
    text-decoration: underline;
}

#dataViewBoard .projectDetailPane .projectName .textData {
    position: absolute;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
}

#dataViewBoard .projectDetailPane .actionButton {
    position: absolute;
    transition: top 0.25s linear;
    -webkit-transition: top 0.25s linear;
}

#dataViewBoard .projectDetailPane .teamHubContainer {
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

#dataViewBoard .projectDetailPane .teamHubImage {
    position: absolute;
    width: 70%;
    height: 70%;
    left: 15%;
    top: 15%;
    content: -webkit-image-set(url(assets/team_hub.gif) 1x, url(assets/team_hub@2x.gif) 2x);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

#dataViewBoard .projectDetailPane .teamHubImage.shaked {
    -webkit-animation: shake 0.1s ease-in-out 0.1s 6 alternate;
    -webkit-animation-delay: 0.5s;
}

#dataViewBoard .projectDetailPane .teamHubInfo {
    position: absolute;
    font-family: Artifakt ElementOfc;
    font-size: 14px;
    line-height: 19px;
    color: #00A8E4;
    bottom: 0;
    width: 100%;
    text-align: center;
    cursor: default;
}

#dataViewBoard .projectDetailPane .actionButton.refresh .refreshImage,
#dataViewBoard .projectDetailPane .actionButton.refreshAnim .refreshImage {
    width: 100%;
    height: 100%;
    background-image: -webkit-image-set(url(assets/refresh_16.png) 1x, url(assets/refresh_16@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: center center;
}

#dataViewBoard .projectDetailPane .actionButton.refresh._disabled_ .refreshImage {
    background-image: -webkit-image-set(url(assets/refresh_16_dis.png) 1x, url(assets/refresh_16_dis@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: center center;
}

#dataViewBoard .projectDetailPane .actionButton.refresh:not(._disabled_) ._hover_ {
    background-image: -webkit-image-set(url(assets/refresh_16_hover.png) 1x, url(assets/refresh_16_hover@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: center center;
}

#dataViewBoard .projectDetailPane .actionButton.refreshAnim .refreshImage {
    -webkit-animation: rotating 1.5s linear infinite;
    animation: rotating 1.5s linear infinite;
}

@-webkit-keyframes shake {
    from {
        -webkit-transform: rotate(20deg);
    }
    to {
        -webkit-transform-origin: center center;
        -webkit-transform: rotate(-20deg);
    }
}

@keyframes rotating {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes rotating {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


/* activityFeedBoard */

#activityFeedBoard {
    position: relative;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 8pt;
    color: #666666;
    background: #dddddd;
    border-left: 1px solid #aeaeae;
    border-right: 1px solid #aeaeae;
    border-bottom: 1px solid #aeaeae;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    overflow-x: auto;
}

#activityTabContent {
    min-width: 284px;
}

.versionsPane .item .description {
    padding-top: 5px;
    padding-left: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: normal;
    height: 30px;
}

@-webkit-keyframes spinActivities {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

.loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 56px;
    height: 56px;
    margin: auto;
}

.loading .maskedCircle {
    width: 40px;
    height: 40px;
    border-radius: 24px;
    border: 3px solid dimgray;
}

.loading .mask {
    width: 24px;
    height: 24px;
    overflow: hidden;
}

.loading .spinner {
    position: absolute;
    left: 1px;
    top: 1px;
    width: 52px;
    height: 52px;
    -webkit-animation: spinActivities 1s infinite linear;
}

.tabPanes {
    position: absolute;
    padding-top: 7px;
    padding-bottom: 5px;
}

.tabPane {
    display: none;
}

.tabBar {
    position: absolute;
    cursor: default;
    padding: 3px 1px 0 0;
    left: -1px;
}

.tabBar .feedTab {
    height: 16px;
    position: relative;
    padding: 5px 9px;
    cursor: default;
    line-height: 16px;
    top: 1px;
    color: #666666;
    float: left;
}

.tabBar .feedTab.selected {
    padding: 4px 8px;
    border-left: 1px solid #adadad;
    border-top: 1px solid #adadad;
    border-right: 1px solid #adadad;
    background: #dddddd;
}

.tabBar.tabBarTop {
    border-bottom: 1px solid #adadad !important;
}

.detailsInA360 {
    position: absolute;
    text-align: right;
    margin-right: 6px;
    right: 6px;
    top: 6px;
    color: #666666;
    font-weight: normal;
}


/*
 * TODO(annams): Rename (here and in renderer.js) to specify class name as
 * goog-autocomplete-renderer
 */

.ac-renderer {
    position: absolute;
    background: #fff;
    border: 1px solid #666;
    -moz-box-shadow: 2px 2px 2px rgba(102, 102, 102, .4);
    -webkit-box-shadow: 2px 2px 2px rgba(102, 102, 102, .4);
    z-index: 100;
    margin-left: 6px;
    margin-right: 6px;
    margin-top: 4px;
    font-size: 12px;
    color: rgb(13, 13, 13);
    line-height: 36px;
}

.ac-renderer .email {
    font-size: 10px;
    color: rgba(13, 13, 13, 0.4);
}

.ac-row {
    cursor: pointer;
    padding-left: 10px;
    padding-right: 10px;
}

.ac-highlighted {
    font-weight: bold;
}

.ac-active {
    background-color: #4379A6;
    color: #F2F2F2;
}

.ac-active .email {
    font-size: 10px;
    color: #F2F2F2;
}

body {
    margin: 0px;
}

.popUpContainer .popupBorder,
.cke_dialog_body {
    border: 2px solid rgba(0, 0, 0, 0.6);
}

.defaultText {
    color: #666666;
    font-size: 13px;
    font-family: arial, sans-serif;
}

.popupBorder {
    border-color: #758086;
    border-width: 6px;
    border-style: solid;
    border-radius: 2px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
    background-color: #F3F3F3;
}

.popupBorder .tileHolder {
    margin-bottom: 0;
}

.tileTopBorderNoHeader {
    font-size: 0;
    line-height: 0;
}

.itemPopUpWrapper .tile,
.itemPopUpWrapper .tileBodyFooterDiv,
.itemPopUpWrapper .tileHeaderContent,
.itemPopUpWrapper .tileTopBorderNoHeader {
    -webkit-box-shadow: none;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
}

.tile {
    word-wrap: break-word;
}

.popUpContainer .tileHeader {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}

.tileBodyFooterDiv,
.navBarDropdownULStyle,
.navBarMenuItemNorm,
.tileBodyBackgroundColor,
.tileBodyFooterDiv .timeStamp,
.popUpContainer .tileHeader,
.cke_reset_all .cke_dialog_title {
    background-color: #F3F3F3;
}

.popUpContainer .tileTitle {
    padding: 0;
}

.popUpContainer .tileHeaderContent,
.cke_reset_all .cke_dialog_title {
    border-bottom: 1px solid #DEDEDE;
    margin: 0 10px;
}

.clearfix,
.hasLayout {
    zoom: 1;
}

.clearfix:after {
    display: block;
    visibility: hidden;
    clear: both;
    height: 0;
    content: " ";
    font-size: 0;
}

.tileHeaderContent {
    height: 40px;
    overflow: hidden;
}

.popupIconControls {
    float: right;
}

.popupIconControls:before {
    content: '';
    height: 40px;
    display: inline-block;
    vertical-align: middle;
}

.tileHeaderCloseBtnDiv {
    vertical-align: middle;
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('assets/close_dark.png');
    background-size: contain;
    cursor: default;
}

.popupHeaderContainer {
    padding-right: 20px;
    overflow: hidden;
    word-wrap: normal;
}

.popupHeaderContainer:before {
    min-height: 40px;
    vertical-align: middle;
    content: '';
    display: inline-block;
}

.popUpContainer .tileTitle h2 {
    text-transform: none;
    font-size: 1.857em;
    font-weight: normal;
    padding-bottom: 0px;
    padding-top: 0px;
}

.tileTitle h2 {
    margin: 0px;
    color: #333333;
    letter-spacing: .04em;
}

.popupHeaderLabel {
    display: inline-block;
    vertical-align: middle;
}

.itemPopUpWrapper .tileBodyFooterDiv {
    border-bottom: 0;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
}

.dBNone {
    display: none;
}

.tileBodyControls {
    padding: 10px 10px 6px 10px;
}

.bodyControlTabs {
    float: left;
}

.bodyControlActions {
    float: right;
}

.tileBodyContent {
    zoom: 1;
}

.doublePad {
    padding: 12px;
}

.rFloat,
.rightFloat {
    float: right;
    display: inline;
}

ul,
menu,
dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}

.midFonts,
.smallFonts {
    font-size: .9231em;
}

.buttonisedRadio.first {
    border-bottom-left-radius: 2px;
    border-top-left-radius: 2px;
}

.buttonisedRadio.selected {
    background-color: #4D86C3;
    color: #FFF;
    box-shadow: inset 0 1px 1px 1px rgba(0, 0, 0, 0.1), 0px 1px 2px 1px rgba(0, 0, 0, 0.25);
}

.buttonisedRadio {
    display: inline-block;
    vertical-align: top;
    padding: 5px 15px 3px;
    background-color: #FFF;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25);
    border: 1px solid #CCC;
    margin-right: -1px;
    cursor: default;
    float: left;
}

li {
    text-align: -webkit-match-parent;
}

.radioButtonTabsSpan {
    display: block;
    padding: 5px 0 7px;
}

.buttonisedRadio.last {
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    margin-right: 0;
}

.overflowHidden {
    overflow: hidden;
}

.normalText input[type="text"],
.defaultText input[type="text"] {
    resize: none;
}

.normalText input[type="text"],
.defaultText input[type="text"],
.normalText textarea,
.defaultText textarea {
    outline: none;
}

.normalText input[type="text"],
.defaultText input[type="text"],
.normalText input[type="button"],
.defaultText input[type="button"] {
    font-family: arial, verdana, sans-serif;
}

.normalText input[type="text"],
.defaultText input[type="text"] {
    color: inherit;
    font-size: 1em;
}

.qFormFieldBorderPad input,
.qFormFieldBorderPad textarea {
    width: 100%;
    border: 0;
    margin: 0 -1px 0 0;
    outline: none;
    float: left;
}

.input,
.textArea {
    background-color: transparent;
}

input:not([type]),
input[type="email"],
input[type="number"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="text"] {
    padding: 1px 0px;
}

h4 {
    display: block;
    -webkit-margin-before: 1.33em;
    -webkit-margin-after: 1.33em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}

.rFloat,
.rightFloat {
    float: right;
    display: inline;
}

.overflowHidden {
    overflow: hidden;
}

.qFormFieldBorderPad {
    width: 440px;
    padding: 5px 8px 6px;
    background-color: #FFF;
    border: 1px solid #CCC;
    box-shadow: inset 0 1px 1px 1px rgba(0, 0, 0, 0.1);
}

.toggleSwitch.toggleSwitchOn {
    background: #4675AB;
}

.toggleSwitch {
    position: relative;
    height: 30px;
    width: 56px;
    border-radius: 3px;
}

.toggleSwitchInput {
    display: none;
}

.toggleSwitchLabel {
    position: relative;
    z-index: 2;
    float: left;
    width: 56px;
    line-height: 26px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    text-align: center;
    cursor: default;
}

.toggleSwitchLabelOff {
    padding-left: 2px;
}

.icon16 {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    font-family: arial, sans-serif;
}

.iconPublicSharingTick16 {
    cursor: default;
    background-image: url('assets/publicSharingTick.png');
}

.dw_container {
    display: flex;
    padding-bottom: 5px;
}

.iconDerivedWarning {
    background-image: -webkit-image-set(url('assets/info_16.png') 1x, url('assets/info_16@2x.png') 2x);
    background-repeat: no-repeat;
    width: 20px;
    height: 32px;
    justify-content: center;
    position: relative;
    float: left;
}

.toggleSwitchLabel em.iconPublicSharingTick16 {
    position: absolute;
    top: 7px;
    left: 7px;
}

.toggleSwitchLabelOn {
    padding-right: 2px;
}

.toggleSwitchOn em.iconPublicSharingCross16 {
    background-image: none;
    position: absolute;
    top: 4px;
    right: 6px;
    border-radius: 3px;
    padding: 3px;
    margin-left: -3px;
}

.toggleSwitchOff em.iconPublicSharingTick16 {
    background-image: none;
    position: absolute;
    top: 4px;
    right: 6px;
    border-radius: 3px;
    padding: 3px;
    margin-left: -2px;
}

.toggleSwitchOn .toggleSwitchSelection {
    left: 28px;
}

.publicSharingUrlRow {
    padding-bottom: 10px;
}

.publicShareLink {
    border-bottom: 1px solid #CCC;
    padding-bottom: 25px;
}

.publicSharingDwdToggleDiv {
    padding-bottom: 10px;
}

.publicSharingPwdToggleDiv {
    padding-bottom: 10px;
}

.toggleSwitch.toggleSwitchOff {
    background: #DDD;
}

.toggleSwitchOff em.iconPublicSharingTick16 {
    background-image: none;
}

.iconPublicSharingCross16 {
    cursor: default;
    background-image: url('assets/publicSharingCross.png');
    position: absolute;
    top: 7px;
    left: 33px;
}

.btnStyle {
    margin: 0;
    display: inline-block;
    text-decoration: none;
    text-align: center;
    text-transform: capitalize;
    padding-left: 13px;
    padding-right: 12px;
    border-radius: 3px;
    outline-color: transparent;
    box-sizing: content-box;
    color: #4675AB;
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    cursor: default;
}

.vertBtnPad {
    padding-top: 6px;
    padding-bottom: 7px;
}

.txtPadLt {
    position: absolute;
    left: 479px;
}

.publicSharingLabel {
    padding-top: 5px;
}

.tileHeaderContent {
    border-bottom-color: #DAD0C7;
    border-bottom-width: 0px;
    border-bottom-style: dotted;
    border-top-color: #CFCFCF;
    border-top-width: 0px;
    border-top-style: solid;
    border-left-color: #CFCFCF;
    border-left-width: 0px;
    border-left-style: solid;
    border-right-color: #CFCFCF;
    border-right-width: 0px;
    border-right-style: solid;
    background-repeat: no-repeat;
    background-image: none;
    background-color: transparent;
    -webkit-border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 0px;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.toggleSwitchSelection {
    display: block;
    position: absolute;
    z-index: 1;
    top: 4px;
    left: 4px;
    width: 24px;
    height: 22px;
    background: #F7F7F7;
    border-radius: 3px;
    -webkit-transition: left 0.15s ease-out;
    -moz-transition: left 0.15s ease-out;
    -o-transition: left 0.15s ease-out;
    transition: left 0.15s ease-out;
}

@font-face {
    font-family: 'Open Sans';
    src: url('font/OpenSans-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

#client_block_message {
    width: 430px;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #777;
    margin: auto;
    padding: 0 30px 20px;
    line-height: 2em;
}

body.client_block {
    background-color: white;
    border-radius: 3px;
    border: solid 1px #EFEFEF;
    box-shadow: 0 2px 5px #000000;
    font-family: 'Open Sans', Arial, sans-serif;
}

#client_block_message * {
    margin: 10px 0 10px;
}

#client_block_message h1 {
    font-size: 22px;
    font-weight: bold;
    text-align: left;
    padding: 30px 0 0;
    margin: 10px 0 0;
}

#client_block_message a {
    color: #00A5E1;
    text-decoration: none;
}

#client_button_paragraph {
    margin-top: 20px
}

#client_block_message button.client_draconian_install {
    color: #FFFFFF;
    background-color: #00A5E1;
    border: 1px solid #00A5E1;
    margin: auto 10px;
}

a#client_close_button {
    color: #6E6E6E;
    background-color: #FAFAFA;
    border: 1px solid #A2A2A2;
    margin: auto;
}

a#client_close_button,
#client_block_message button.client_draconian_install {
    font-size: 13px;
    font-family: 'Open Sans', Arial, sans-serif;
    line-height: 18px;
    text-align: center;
    border-radius: 3px;
    height: 34px;
    padding: 8px 40px 8px 40px;
}

#client_block_message button.client_draconian_install:hover {
    background-color: #42B6DF;
    border: 1px solid #42B6DF;
}

#client_block_message button.client_draconian_install:active {
    background-color: #007FBE;
    border: 1px solid #007FBE;
}

a#client_close_button:hover {
    border: 1px solid #C9C9C9;
    background-color: #FFFFFF;
}

a#client_close_button:active {
    border: 1px solid #A1A1A1;
    background-color: #E8E8E8;
}

#client_close_control {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 20px;
    height: 20px;
    background-image: url("assets/close_normal_10_@2x.png");
    text-decoration: none;
}

#client_close_control:hover {
    background-image: url("assets/close_hover_10_@2x.png");
}

@font-face {
    font-family: 'Open Sans';
    src: url('font/OpenSans-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

#os_block_message {
    width: 450px;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 13px;
    font-weight: normal;
    color: #777;
    margin: auto;
    padding: 0 30px 20px;
    line-height: 2em;
}

body.os_block {
    background-color: white;
    border-radius: 3px;
    border: solid 1px #EFEFEF;
    box-shadow: 0 2px 5px #000000;
    font-family: 'Open Sans', Arial, sans-serif;
}

#os_block_message * {
    margin: 10px 0 10px;
}

#os_block_message h1 {
    font-size: 22px;
    font-weight: bold;
    text-align: left;
    padding: 30px 0 0;
    margin: 10px 0 0;
}

#os_block_message a {
    color: #00A5E1;
    text-decoration: none;
}

#os_button_paragraph {
    margin-top: 20px
}

a#os_close_button {
    color: #FFFFFF;
    background-color: #00A5E1;
    border: 1px solid #00A5E1;
    font-size: 13px;
    font-family: 'Open Sans', Arial, sans-serif;
    line-height: 18px;
    text-align: center;
    border-radius: 3px;
    height: 34px;
    padding: 8px 40px 8px 40px;
    margin: auto;
}

a#os_close_button:hover {
    background-color: #42B6DF;
    border: 1px solid #42B6DF;
}

a#os_close_button:active {
    background-color: #007FBE;
    border: 1px solid #007FBE;
}

#os_close_control {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 20px;
    height: 20px;
    background-image: url("assets/close_normal_10_@2x.png");
    text-decoration: none;
}

#os_close_control:hover {
    background-image: url("assets/close_hover_10_@2x.png");
}

body {
    margin: 0px;
}

.defaultText {
    color: #666666;
    font-size: 13px;
    font-family: arial, sans-serif;
}

#snapshotBoard {
    position: relative;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 8pt;
    color: #666666;
    background: #dddddd;
    top: 0px;
    bottom: 9px;
    left: 0px;
    right: 0px;
}

#snapshotBoard .topToolbar {
    position: relative;
    text-align: center;
    left: 0px;
    right: 0px;
    height: 28px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: lightgray;
}

#snapshotBoard .topInfobar {
    position: relative;
    height: 28px;
    left: 50%;
    right: 50%;
    transform: translate(-50%, -16px);
    background-color: gray;
}

#snapshotBoard .imageContainer {
    position: absolute;
    overflow: hidden;
    top: 28px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    -webkit-user-select: none;
    user-select: none;
    background-image: none;
}

#snapshotBoard .snapshot {
    position: relative;
    background: none;
    cursor: move;
}

#snapshotBoard .button {
    width: 16px;
    height: 16px;
    float: left;
    color: #222222;
    background: transparent;
    cursor: pointer;
    margin: 3px;
    padding: 2px;
    -webkit-user-select: none;
    user-select: none;
    border: transparent 1px solid;
}

#snapshotBoard .button:hover {
    border: gray 1px solid;
}

#snapshotBoard .button.download {
    width: 16px;
    height: 16px;
    background: url('assets/download.png') no-repeat center center;
}

#snapshotBoard .button.fitAll {
    width: 16px;
    height: 16px;
    background: url('assets/fit_all.png') no-repeat center center;
}

#snapshotBoard .button.zoomTrueSize {
    background: url('assets/zoom_to_true_size.png') no-repeat center center;
    width: 16px;
    height: 16px;
}

#snapshotBoard .button.disabled {
    pointer-events: none;
    color: #bbbbbb;
    border: #dddddd 1px solid;
}

#snapshotBoard .topToolbar .info {
    height: 28px;
    color: #222222;
    background: transparent;
    line-height: 28px;
    text-align: center;
    margin: 6px 3px 6px 3px;
}

#snapshotBoard .topToolbar .info.thick {
    font-weight: bold;
}

#snapshotBoard .topToolbar .info.thick.version {
    background: #bbbbbb;
    border-radius: 2px;
    padding: 3px 3px;
}

#snapshotBoard .snapshot.preload {
    position: absolute;
    width: 34px;
    height: 34px;
    top: 50%;
    left: 50%;
    margin-top: -17px;
    margin-left: -17px;
    background: url('assets/preloader.gif') no-repeat center center;
    box-shadow: none;
}

.goog-tooltip {
    position: absolute;
    background: #515151;
    font-size: 12px;
    line-height: 14px;
    max-width: 170px;
    color: #ffffff;
    font-weight: bold;
    padding: 3px 13px 3px 13px;
    border-radius: 10px;
    z-index: 15;
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
    box-shadow: 0 7px 23px 0 rgba(50, 50, 50, 0.41);
    -webkit-box-shadow: 0 7px 23px 0 rgba(50, 50, 50, 0.41);
}

.arrowStrip {
    position: absolute;
    top: 100px;
    left: 100px;
    transition: height 0.25s ease-out;
    -webkit-transition: height 0.25s ease-out;
    z-index: 10;
}

.arrowStrip .contentContainer {
    position: relative;
    padding: 9px 14px 9px 14px;
    background: #BFD7F3;
}

.arrowStrip .arrowUp {
    position: relative;
    top: 0;
    left: 18px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #BFD7F3;
}

.arrowStrip .contentContainer .cross {
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 10px;
    height: 10px;
    cursor: default;
    background: url("assets/close_cross.png") no-repeat left center;
}

.breadcrumbsBar {
    position: absolute;
    font: 12px Arial;
    transition: opacity 1s linear;
    -webkit-transition: opacity 1s linear;
    transition: top 0.25s linear;
    -webkit-transition: top 0.25s linear;
}

.breadcrumbsBar .endFade {
    position: absolute;
    right: 0;
    top: 0;
    height: 18px;
    width: 10px;
    z-index: 5;
    /* background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(231, 231, 231, 0)), color-stop(100%, rgba(231, 231, 231, 1))); */
    /* background: -webkit-linear-gradient(left, rgba(231, 231, 231, 0) 0%, rgba(231, 231, 231, 1) 100%); */
    /* background: linear-gradient(to right, rgba(231, 231, 231, 0) 0%, rgba(231, 231, 231, 1) 100%); */
}

.breadcrumbsBar .content {
    line-height: 18px;
    height: 18px;
    font: 12px Arial;
    display: flex;
    display: -webkit-flex;
    flex-flow: row nowrap;
    -webkit-flex-flow: row nowrap;
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
    align-items: center;
    overflow-x: hidden;
    overflow-y: visible;
}

.breadcrumbsBar .content .item {
    color: var(--outer-fg-color);
    padding-left: 3px;
    padding-right: 2px;
    cursor: default;
    flex-shrink: 0;
    -webkit-flex-shrink: 0;
    height: 18px;
    line-height: 18px;
}

.breadcrumbsBar .content .item:hover {
    background-color: var(--outer-hover-bg-color);
}

.breadcrumbsBar .content .item.ellipsis,
.breadcrumbsBar .content.short .item.tohide {
    display: none;
}

.breadcrumbsBar .content.short .item.ellipsis {
    display: block;
}

.breadcrumbsBar .content.short.nodots .item.ellipsis {
    display: none;
}

.breadcrumbsBar .content .item.sep,
.breadcrumbsBar .content .item.disabled.sep:hover {
    width: 10px;
    height: 18px;
    background: url("assets/fldsep.svg") no-repeat center center;
    background-size: 10px 16px;
}

.breadcrumbsBar .content .item.sep.last {
    display: none;
}

.breadcrumbsBar .content.lastArrowVisible .item.sep.last {
    display: block;
}

.breadcrumbsBar .content .item.sep:hover {
    background: url("assets/fldsep_hover.svg") no-repeat center center;
    background-size: 10px 16px;
}

.breadcrumbsBar .content .project {
    display: flex;
    display: -webkit-flex;
    flex-flow: row nowrap;
    -webkit-flex-flow: row nowrap;
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
    align-items: center;
    padding-left: 0px;
    padding-right: 0px;
    overflow: hidden;
}

.breadcrumbsBar .content .project .icon {
    flex-shrink: 0;
    -webkit-flex-shrink: 0;
    width: 16px;
    height: 18px;
    background: url("assets/project.svg") no-repeat center left;
    background-size: 16px 15px;
    padding-right: 3px;
    padding-left: 1px;
}

.breadcrumbsBar .content .project .home {
    flex-shrink: 0;
    -webkit-flex-shrink: 0;
    width: 16px;
    height: 18px;
    background: url("assets/home.svg") no-repeat center left;
    background-size: 16px 15px;
    padding-right: 3px;
    padding-left: 1px;
}

.breadcrumbsBar .content .project .arrow {
    flex-shrink: 0;
    -webkit-flex-shrink: 0;
    width: 10px;
    height: 18px;
    background: url("assets/fldsep.svg") no-repeat center center;
    background-size: 10px 16px;
    /*background-size: contain;*/
    padding-left: 3px;
    padding-right: 2px;
}

.breadcrumbsBar:not(.branching) .content .project .arrow {
    display: none;
}

.breadcrumbsBar.branching .content .project.activated .icon,
.breadcrumbsBar.branching .content .project:hover .icon,
.breadcrumbsBar:not(.branching) .content .project .icon:hover {
    background: url("assets/project_hover.svg") no-repeat center left;
    background-size: 16px 15px;
}

.breadcrumbsBar.branching .content .project.activated .home,
.breadcrumbsBar.branching .content .project:hover .home,
.breadcrumbsBar:not(.branching) .content .project .home:hover {
    background: url("assets/home_hover.svg") no-repeat center left;
}

.breadcrumbsBar.branching .content .project.activated .arrow,
.breadcrumbsBar.branching .content .project:hover .arrow {
    background: url("assets/fldsep_hover.svg") no-repeat center center;
    background-size: 10px 16px;
    /*background-size: contain;*/
}

.breadcrumbsBar .content .branch {
    display: flex;
    display: -webkit-flex;
    width: auto;
    flex-flow: row nowrap;
    -webkit-flex-flow: row nowrap;
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
    align-items: center;
    padding-left: 3px;
    padding-right: 3px;
    overflow: hidden;
}

.breadcrumbsBar .content.short .branch {
    max-width: 17px;
    text-overflow: clip;
    white-space: nowrap;
    overflow: hidden;
}

.breadcrumbsBar:not(.popupshown) .content.short .branch:hover {
    max-width: 400px;
}

.breadcrumbsBar .content .branch .icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    -webkit-flex-shrink: 0;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border-width: 2px;
    border-style: solid;
}

.breadcrumbsBar .content .branch .label {
    margin-left: 6px;
}

.breadcrumbsBar .content .item.ellipsis,
.breadcrumbsBar .content .item.last:not(.sep) {
    font-weight: bold;
}

.breadcrumbsBar .popup {
    padding: 5px 0 5px 0;
    border: 1px solid #cacaca;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background: white;
    font: 12px Arial;
    cursor: default;
    opacity: 0;
    -webkit-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
}

.breadcrumbsBar .popup.branchlist {
    position: absolute;
    left: 38px;
    top: -8px;
    max-width: 340px;
    min-width: 100px;
    z-index: 200;
}

.breadcrumbsBar .popup.subfolderlist {
    position: absolute;
    top: -8px;
    z-index: 200;
}

.breadcrumbsBar .popup .coverarrow {
    position: absolute;
    width: 3px;
    height: 22px;
    left: -4px;
}

.breadcrumbsBar .popup .item {
    position: relative;
    padding-right: 12px;
    line-height: 22px;
    height: 22px;
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: default;
    color: #484848;
}

.breadcrumbsBar .popup.branchlist .item {
    padding-left: 33px;
}

.breadcrumbsBar .popup.subfolderlist .item {
    padding-left: 12px;
}

.breadcrumbsBar .popup .item.selected {
    font-weight: bold;
}

.breadcrumbsBar .popup.subfolderlist .item.disabled {
    color: #cacaca;
    text-align: center;
}

.breadcrumbsBar .popup .item:not(.disabled):hover {
    background-color: #f5f6f7;
}

.breadcrumbsBar .popup .branch .circle {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    position: absolute;
    display: inline-block;
    border-width: 2px;
    border-style: solid;
    top: 0;
    left: 12px;
    bottom: 0;
    margin: auto;
}

.breadcrumbsBar .popupcover {
    position: absolute;
    left: 23px;
    top: 22px;
    max-width: 326px;
    min-width: 100px;
    z-index: 200;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 0.3s, opacity 0.3s;
}

.breadcrumbsBar.branching .popupcover {
    left: 61px;
    max-width: 288px;
}

.breadcrumbsBar:not(.popupshown) .ellipsis:hover .popupcover {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
}

.breadcrumbsBar .popup.folderlist {
    position: relative;
    opacity: 1;
}

.folderlist:after,
.folderlist:before {
    bottom: 100%;
    left: 19px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
}

.folderlist:after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #ffffff;
    border-width: 6px;
    margin-left: -6px;
}

.folderlist:before {
    border-color: rgba(202, 202, 202, 0);
    border-bottom-color: #cacaca;
    border-width: 7px;
    margin-left: -7px;
}

.breadcrumbsBar .folderlist .item {
    background: url("assets/fldsep.svg") no-repeat left;
    background-size: 10px 16px;
}

.breadcrumbsBar .folderlist .item:hover {
    color: #484848;
}

.breadcrumbsBar .folderlist .item:last-child {
    font-weight: normal;
}

.imgNewBranch {
    background-image: url("assets/create branch.svg");
    background-position: 11px center;
}

.imgNewBranch.disabled {
    background-image: url("assets/create branch - disabled.svg");
    background-position: 11px center;
}

.imgMilestone {
    background-image: url("assets/create milestone.svg");
    background-position: 11px center;
}

.imgMilestone.disabled {
    background-image: url("assets/create milestone - disabled.svg");
    background-position: 11px center;
}

.imgMergePull {
    background-image: url("assets/pull.svg");
    background-position: 11px center;
}

.imgMergePull.disabled {
    background-image: url("assets/pull - disabled.svg");
    background-position: 11px center;
}

.imgMergePush {
    background-image: url("assets/push.svg");
    background-position: 11px center;
}

.imgMergePush.disabled {
    background-image: url("assets/push - disabled.svg");
    background-position: 11px center;
}

.imgPrjManage {
    background-image: url("assets/history.svg");
    background-position: 7px center;
}

.imgPrjManage.disabled {
    background-image: url("assets/history - disabled.svg");
    background-position: 7px center;
}

.comboButton {
    position: relative;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 116.7%;
    cursor: default;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 67px;
    height: 28px;
}

.comboButton .action {
    position: relative;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    border-left: 1px solid #979797;
    border-top: 1px solid #979797;
    border-bottom: 1px solid #979797;
    width: 40px;
    height: 28px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-repeat: no-repeat;
}

.comboButton.disabled .action {
    border-left: 1px solid #bdbdbd;
    border-top: 1px solid #bdbdbd;
    border-bottom: 1px solid #bdbdbd;
}

.comboButton .down {
    position: absolute;
    top: 0;
    left: 40px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border: 1px solid #979797;
    background-image: url("assets/down_arrow.svg");
    background-position: center center;
    background-repeat: no-repeat;
    width: 27px;
    height: 28px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.comboButton.disabled .down {
    border: 1px solid #bdbdbd;
    background-image: url("assets/down_arrow - disabled.svg");
}

.comboButton:not(.disabled):not(.textComboButton):not(.textComboButtonTHOImp) .action:hover,
.comboButton:not(.disabled):not(.textComboButton):not(.textComboButtonTHOImp) .down:hover,
.comboButton:not(.disabled):not(.textComboButton):not(.textComboButtonTHOImp) .down.clicked {
    background-color: #FAFAFA;
}

.comboButton .list {
    position: absolute;
    left: 0;
    top: 28px;
    background-color: #FFFFFF;
    border: 1px solid #cacaca;
    border-radius: 3px;
    padding: 5px 0 5px 0;
    z-index: 200;
    max-width: 350px;
    width: auto;
    -webkit-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
}

.comboButton .list:empty {
    -webkit-transition: none;
    transition: none;
}

.comboButton .list .item {
    font: 12px Arial;
    font-weight: normal;
    position: relative;
    height: 22px;
    line-height: 22px;
    padding-left: 34px;
    padding-right: 12px;
    color: #6b6b6b;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: default;
    background-repeat: no-repeat;
}

.comboButton .list .item:hover {
    background-color: #f5f6f7;
}

.comboButton .list .item.current {
    font-weight: bold;
}

.comboButton .list .item.disabled {
    font-weight: normal;
    color: #bdbdbd;
    background-color: transparent;
}

.comboButton .list .item.tooltipParent .tooltip {
    left: 10px;
    top: 100%;
    white-space: pre-wrap;
    width: 290px;
    transform: translate(0, 2px);
    -webkit-transform: translate(0, 2px);
}

.textComboButton {
    z-index: 100;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: bold;
    float: left;
    width: initial;
    top: 30%;
}

.textComboButton .action {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    width: initial;
    border: none;
    top: 30%;
    float: left;
    text-transform: uppercase;
    color: rgb(100, 100, 100);
}

.textComboButton .down {
    position: relative;
    float: left;
    left: 4px;
    top: 1px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border: none;
}

.textComboButton .list .item {
    padding-left: 12px;
}

.textComboButtonTHOImp {
    z-index: 100;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: bold;
    float: left;
    width: initial;
    top: 25px;
}

.textComboButtonTHOImp .action {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    width: initial;
    border: none;
    top: 30%;
    float: left;
    text-transform: uppercase;
    color: var(--main-fg-color);
}

.textComboButtonTHOImp .action .tooltipParent {
    height: 18px;
    line-height: 18px;
}

.textComboButtonTHOImp .down {
    position: relative;
    float: left;
    left: 4px;
    top: 1px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border: none;
}

.textComboButtonTHOImp .list .item {
    padding-left: 12px;
}

.commentHere {
    padding-bottom: 6px;
}

.commentHere .commentHereStaticText {
    color: #B7B7B7;
    height: 60px;
    padding: 6px 6px 6px 6px;
    overflow: auto;
    text-align: center;
}

.commentHere .commentHereStaticText .firstLine {
    color: #666666;
    text-align: center;
}

.commentHere .commentHereStaticText .nextLine {
    color: #989898;
    text-align: center;
}

.commentHere #commentHereContentBar {
    margin: 0px;
    padding: 0px;
    position: relative;
}

.commentHere .commentHereEditBoxContainer {
    margin-left: 6px;
    margin-right: 6px;
    padding: 6px;
    border: #b9b9b9 1px solid;
    background-color: white;
}

.commentHere .commentHereEditBoxContainer.withSnapshotPreview {
    margin-right: 92px;
}

.commentHere .commentHereEditBox {
    height: 66px;
    width: 100%;
    color: #000000;
    overflow: auto;
    resize: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}

.commentHere .commentHereEditBox::-webkit-input-placeholder {
    color: #b9b9b9;
}

.commentHere .commentHereEditBox.active {
    color: #000000;
    /* ??? is it needed? */
}

.commentHere .commentHereButtonsBar {
    height: 30px;
}

.commentHere .commentButton {
    height: 22px;
    color: #222222;
    background: transparent;
    cursor: default;
    line-height: 22px;
    text-align: center;
    margin: 6px 6px 6px 6px;
    -webkit-user-select: none;
    user-select: none;
}

.commentHere .commentButton.cameraButton {
    float: left;
    width: 16px;
    background: url("assets/snapshot_16.png") no-repeat center center;
    background-size: contain;
}

.commentHere .commentButton.cameraButton.active {
    float: left;
    width: 16px;
    background: url("assets/snapshot_selected_16.png") no-repeat center center;
    background-size: contain;
}

.commentHere .commentButton.postCancelButton {
    float: right;
    max-width: 67px;
    margin-right: 5px;
    width: 35%;
    background: #e9e9e9;
    border: 1px solid #b9b9b9;
    color: #676767;
}

.commentHere .commentButton.postCancelButton:hover {
    color: #ffffff;
    border: 1px solid #a4a4a4;
    background: #6699cc;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6699cc), color-stop(100%, #376697));
    background: -webkit-linear-gradient(top, #6699cc 0%, #376697 100%);
    background: linear-gradient(to bottom, #6699cc 0%, #376697 100%);
}

.commentHere .commentButton.postCancelButton:active {
    color: #ffffff;
    border: 1px solid #b9b9b9;
    background: #5286bc;
}

.commentHere .commentButton.disabled,
.commentHere .commentButton.disabled:hover,
.commentHere .commentButton.disabled:active {
    color: #bababa;
    cursor: default;
    border: 1px solid #b9b9b9;
    background: #e9e9e9;
}

.commentHere .previewImg {
    position: absolute;
    top: 0px;
    right: 6px;
    max-width: 80px;
    background: #EEEEEE;
}

.commentHereBottomSeparator {
    clear: both;
    padding: 0;
    height: 1px;
    background-color: #989898;
    display: none;
}

.commentHere .commentButton.linkObjectButton {
    float: left;
    width: 16px;
    background: url("assets/commentLinkObject.png") no-repeat center center;
    cursor: default;
}

.commentHere .commentButton.linkObjectButton.active {
    background: url("assets/commentLinkObjectActive.png") no-repeat center center;
    cursor: default;
    border: none;
}

.commentHere .commentButton.linkObjectButton.disabled {
    background: url("assets/commentLinkObject.png") no-repeat center center;
    opacity: 0.5;
    cursor: default;
    border: none;
}

.commentHere .commentButton.linkPointButton {
    float: left;
    width: 16px;
    background: url("assets/commentLinkPoint.png") no-repeat center center;
    cursor: default;
}

.commentHere .commentButton.linkPointButton.active {
    background: url("assets/commentLinkPointActive.png") no-repeat center center;
    cursor: default;
    border: none;
}

.commentHere .commentButton.linkPointButton.disabled {
    opacity: 0.5;
    background: url("assets/commentLinkPoint.png") no-repeat center center;
    cursor: default;
    border: none;
}

.commentHereLinkButton {
    position: absolute;
    width: 16px;
    height: 16px;
    left: 10px;
    bottom: 10px;
    background: url("assets/commentLinkActive.png") no-repeat center center;
    background-size: contain;
    z-index: 20;
}

.commentHere .commentButton.refreshButton {
    float: right;
    width: 20px;
    background: url("assets/refresh_16.png") no-repeat center center;
}

.commentHere .commentButton.refreshAnim {
    float: right;
    width: 20px;
    background: url("assets/refresh_16_anim.gif") no-repeat center center;
}

.contextMenu {
    position: absolute;
    min-width: 150px;
    background: #ffffff;
    border: #d2d2d2 1px solid;
    z-index: 20;
    opacity: 0;
    overflow: hidden;
    border-radius: 3px;
    color: #484848;
}

.contextMenu.popupMenu {
    top: 0;
    overflow: visible;
    min-width: 130px;
}

.contextMenu .item {
    position: relative;
    padding: 0 12px 0 12px;
    cursor: default;
    font-size: 12px;
    white-space: nowrap;
    line-height: 22px;
}

.contextMenu .separator {
    margin: 11px 12px 11px 12px;
    background-color: #d2d2d2;
    height: 1px;
}

.contextMenu .item:hover {
    background-color: #f5f6f7
}

.contextMenu .item.disabled {
    cursor: default;
    opacity: 0.5;
}

.contextMenu .item.disabled:hover {
    opacity: 0.5;
    /* don't highlight disabled items on hover */
    /* make sure this matches the default background color */
    background: #ffffff;
}

.contextMenu.checkable .item {
    padding: 0px 10px 0 27px;
    background-image: -webkit-image-set(url(assets/check_unsel.png) 1x, url(assets/check_unsel@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: 7px center;
}

.contextMenu .noImage.item {
    background-image: none;
}

.contextMenu.checkable .item.checked {
    background-image: -webkit-image-set(url(assets/check_sel.png) 1x, url(assets/check_sel@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: 7px center;
}

.contextMenu.checkable .item.unsel {
    padding: 0px 10px 0 27px;
    background-image: -webkit-image-set(url(assets/radio_unsel.png) 1x, url(assets/radio_unsel@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: 7px center;
}

.contextMenu.checkable .item.sel {
    background-image: -webkit-image-set(url(assets/radio_sel.png) 1x, url(assets/radio_sel@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: 7px center;
}

.hiddenContextMenuInput {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 1px;
    height: 1px;
    opacity: 0;
}


/*.contextMenu .item.popupItem
{
    background-image: -webkit-image-set(url(assets/menu_item_list_16.png) 1x,
                                        url(assets/menu_item_list_16@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: 97% 50%;
    position: relative;
}

.item.popupItem .contextMenu {
    visibility: hidden;
    min-width: 100px;
    right: 100%;
}

.item.popupItem:hover .contextMenu {
    visibility: visible;
    opacity: 1;
}*/

.errorMessageBar {
    position: absolute;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-align: center;
    visibility: hidden;
    background: #c0d9ef;
    padding: 4px 10px 4px 10px;
    opacity: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    transition: visibility 0s 1s, opacity 1s linear;
    -webkit-transition: visibility 0s 1s, opacity 1s linear;
}

.errorMessageBar.shown {
    visibility: visible;
    opacity: 1;
    z-index: 1;
    transition: opacity 1s linear;
    -webkit-transition: opacity 1s linear;
}

.errorMessageBar .messageContainer {
    color: #646464;
}

.errorMessageBar.permanent .messageContainer {
    padding-right: 23px;
}

.errorMessageBar .closeBtn {
    position: absolute;
    background-image: -webkit-image-set(url('assets/close_normal_10.png') 1x, url('assets/close_normal_10_@2x.png') 2x);
    background-repeat: no-repeat;
    background-position: center center;
}

.expandPopup {
    position: absolute;
    height: auto;
    padding-top: 7px;
    cursor: default;
}

.expandPopup.usePositionAnim {
    transition: left 0.25s ease-out, top 0.25s ease-out, height 0.25s ease-out;
    -webkit-transition: left 0.25s ease-out, top 0.25s ease-out, height 0.25s ease-out;
}

.expandPopup .contentContainer {
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    background: var(--main-bg-color);
    color: var(--main-fg-color);
    height: auto;
    font-size: 12px;
    padding: 12px 10px 0px 10px;
}

.expandPopup .contentContainer:after,
.expandPopup .contentContainer:before {
    bottom: 100%;
    left: -100px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
}

.expandPopup .contentContainer.leftCol:after,
.expandPopup .contentContainer.leftCol:before {
    left: 149px;
}

.expandPopup .contentContainer.rightCol:after,
.expandPopup .contentContainer.rightCol:before {
    left: 328px;
}

.expandPopup .contentContainer:after {
    border-color: var(--border-color);
    border-bottom-color: var(--border-color);
    border-width: 5.5px;
    margin-left: -5.5px;
}

.expandPopup .contentContainer:before {
    border-color: var(--border-color);
    border-bottom-color: var(--border-color);
    border-width: 7px;
    margin-left: -7px;
}


/* top info */

.expandPopup .contentContainer .topInfo {
    position: relative;
    color: var(--main-fg-color);
    font-size: 12px;
    line-height: 18px;
}

.expandPopup .contentContainer .topInfo .fileName {
    font-weight: bold;
    font-size: 18px;
    line-height: normal;
    color: var(--main-fg-color);
    text-overflow: ellipsis;
    overflow: hidden;
}

.expandPopup .header .selectable,
.expandPopup .contentContainer .topInfo .linkA360,
.expandPopup .tabCtrl .tab .content .showAll {
    color: var(--link-fg-color);
}

.expandPopup .header .selectable:hover,
.expandPopup .contentContainer .topInfo .linkA360:hover,
.expandPopup .tabCtrl .tab .content .showAll:hover {
    color: var(--link-fg-color);
}

.expandPopup .inUse,
.expandPopup .collaborationData,
.expandPopup .lastUpdate,
.expandPopup .by {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.expandPopup .inUse,
.expandPopup .collaborationData {
    padding-bottom: 8px;
}

.expandPopup .by {
    padding-bottom: 12px;
}

.expandPopup .showHistory {
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.expandPopup .inUse span,
.expandPopup .collaborationData p span,
.expandPopup .lastUpdate span,
.expandPopup .by span {
    font-weight: bold;
    color: var(--main-fg-color);
}

.expandPopup.offline .inUse,
.expandPopup.offline .collaborationData,
.expandPopup.offline .by {
    display: none;
}

.expandPopup .contentContainer .topInfo .stored {
    padding-bottom: 18px;
    line-height: 18px;
}

.expandPopup.offline .contentContainer .topInfo .stored {
    padding-top: 12px;
    padding-bottom: 12px;
}

.expandPopup .contentContainer .topInfo .stored:empty {
    padding-top: 0px;
    padding-bottom: 10px;
}

.expandPopup .contentContainer .topInfo .stored>div {
    display: inline-block;
    height: 18px;
    line-height: 18px;
}

.expandPopup .contentContainer .topInfo .stored .name {
    color: var(--main-fg-color);
    font-weight: bold;
    padding: 0 2px 0 3px;
}

.expandPopup .contentContainer .topInfo .stored .branchicon {
    margin: 0 2px 0 3px;
    width: 12px;
    height: 12px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border-width: 2px;
    border-style: solid;
}

.expandPopup .contentContainer .topInfo .stored .sep {
    padding: 0 2px 0 3px;
    width: 10px;
    background: url("assets/fldsep.svg") no-repeat center center;
    background-size: 10px 16px;
    color: var(--main-fg-color);
}

.expandPopup .header {
    position: relative;
    line-height: 22px;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.expandPopup .header .selector {
    position: absolute;
    height: 2px;
    width: 0px;
    top: 0;
    left: 0;
    background: var(--link-fg-color);
    padding-bottom: -100%;
}

.tabHeaderAnim {
    transition: left 0.25s ease-out, width 0.25s ease-out;
    -webkit-transition: left 0.25s ease-out, width 0.25s ease-out;
}

.expandPopup .header .selectable {
    display: inline-block;
    position: relative;
    padding-left: 10px;
    padding-right: 10px;
}

.expandPopup .header .selectable::before {
    content: attr(data-title);
}

.expandPopup .header .selected::after {
    position: absolute;
    content: attr(data-title);
    left: 0;
    right: 0;
    background: var(--outer-selected-bg-color);
    color: var(--outer-selected-fg-color);
    font-weight: bold;
    text-align: center;
}

.expandPopup.offline .tabCtrl {
    display: none;
}

.expandPopup .tabCtrl .tabs {
    position: relative;
}

.centercenter {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.expandPopup .tabCtrl .tab .splash {
    display: none;
}

.expandPopup .tabCtrl .tab .content {
    padding: 6px 0 6px 0;
}

.expandPopup .tabCtrl .tab .splash>div {
    min-height: 64px;
}

.expandPopup .tabCtrl .tab .splash .msg {
    font-size: 11px;
    color: var(--main-fg-color);
    text-align: center;
}

@keyframes rotating {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

.expandPopup .tabCtrl .tab .splash .spin {
    background-image: url(assets/spinner.svg);
    background-repeat: no-repeat;
    background-position: center center;
    width: 24px;
    height: 24px;
    animation: rotating 1.5s linear infinite;
    -webkit-animation: rotating 1.5s linear infinite;
}

.expandPopup .tabCtrl .tab.load .content,
.expandPopup .tabCtrl .tab.empty .content {
    display: none;
}

.expandPopup .tabCtrl .tab.load .splash,
.expandPopup .tabCtrl .tab.empty .splash {
    display: block;
}

.expandPopup .tabCtrl .tab.load .splash .loader {
    display: block;
}

.expandPopup .tabCtrl .tab.load .splash .msg {
    display: none;
}

.expandPopup .tabCtrl .tab.empty .splash .loader {
    display: none;
}

.expandPopup .tabCtrl .tab.empty .splash .msg {
    display: block;
}

.expandPopup .tabCtrl .tab .content .listItem {
    position: relative;
    width: 100%;
    height: 52px;
    font-size: 11px;
}

.expandPopup .tabCtrl .tab .content .list.showSubset .listItem.initHidden {
    display: none;
}

.expandPopup .tabCtrl .tab .content .listItem.selectable:before {
    position: absolute;
    left: -10px;
    right: -10px;
    top: 0;
    bottom: 0;
    background-color: var(--main-selected-bg-color);
    content: ' ';
    display: none;
}

.expandPopup .tabCtrl .tab .content .listItem.selectable:hover:before {
    display: block;
}

.expandPopup .listItem .itemIndex {
    font-size: 12px;
    font-weight: bold;
    text-align: right;
    padding-right: 6px;
}

.expandPopup .listItem .milestoneItemIndex {
    background-image: url("assets/tip.svg");
    background-position: center;
    background-repeat: no-repeat;
    height: 14px;
}

.expandPopup .listItem .revisionMilestoneItemIndex {
    background-image: url("assets/revision_milestone_16.png");
    background-position: center;
    background-repeat: no-repeat;
    height: 16px;
}

.expandPopup .list.onenum .itemIndex {
    min-width: 14px;
}

.expandPopup .list.twonum .itemIndex {
    min-width: 21px;
}

.expandPopup .list.twonum .milestoneItemIndex,
.expandPopup .list.twonum .revisionMilestoneItemIndex {
    min-width: 21px;
    padding-right: 7px;
}

.expandPopup .list.threenum .itemIndex {
    min-width: 27px;
}

.expandPopup .list.threenum .milestoneItemIndex,
.expandPopup .list.threenum .revisionMilestoneItemIndex {
    min-width: 27px;
    padding-right: 13px;
}

.expandPopup .listItem .itemThumbnail {
    background-size: 40px 40px;
    width: 40px;
    height: 40px;
    border: 1px solid #dddddd;
    border-radius: 3px;
}

.expandPopup .listItem .itemRest {
    height: 40px;
    padding-left: 6px;
    width: 265px;
}

.expandPopup .listItem .itemTitle,
.expandPopup .listItem .itemDescription {
    color: var(--main-fg-color);
    font-weight: normal;
    height: 20px;
    line-height: 20px;
}

.expandPopup .listItem .milestoneItemHeight {
    height: 14px;
    line-height: 14px;
}

.expandPopup .listItem .itemTitle span,
.expandPopup .tabUses .listItem .itemTitle,
.expandPopup .tabUsedIn .listItem .itemTitle,
.expandPopup .tabDrawings .listItem .itemTitle {
    font-weight: bold;
    color: var(--main-fg-color);
}

.expandPopup .tabUses .listItem .milestoneItemIcon,
.expandPopup .tabUsedIn .listItem .milestoneItemIcon,
.expandPopup .tabDrawings .listItem .milestoneItemIcon {
    background-image: url("assets/tip.svg");
    background-position: right;
    background-repeat: no-repeat;
}

.expandPopup .tabUses .listItem .revisionMilestoneItemIcon,
.expandPopup .tabUsedIn .listItem .revisionMilestoneItemIcon,
.expandPopup .tabDrawings .listItem .revisionMilestoneItemIcon {
    background-image: url("assets/revision_milestone_16.png");
    background-position: right;
    background-repeat: no-repeat;
}

.expandPopup .listItem span.nameSpan {
    font-weight: normal;
    color: var(--main-fg-color);
    float: right;
}

.expandPopup .listItem span.bySpan {
    font-weight: normal;
    color: var(--main-fg-color);
    float: right;
}

.expandPopup .listItem .vernum {
    background-color: var(--button-grey-bg-color);
    border-color: var(--button-grey-border-color);
    color: var(--button-grey-fg-color);
    line-height: 16px;
    padding-left: 6px;
    padding-right: 6px;
    border-radius: 2px;
}

.expandPopup .listItem .exclamation {
    line-height: 16px;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background-image: url('assets/triangle.svg');
    background-repeat: no-repeat no-repeat;
    background-position: center center;
}

.expandPopup .listItem .itemTools {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -6px;
    /* background: linear-gradient(to right, rgba(247, 252, 254, 0) 0px, rgba(247, 252, 254, 1) 10px); */
    padding-left: 10px;
    display: none;
}

.expandPopup .listItem .itemTools .verticalThreeDots:hover,
.expandPopup .listItem .itemTools.selected .verticalThreeDots {
    background-image: url('assets/more_vertical_click.png');
    background-size: 25px 25px;
    background-repeat: no-repeat no-repeat;
    background-position: center center;
}

.expandPopup .listItem .itemTools.selected,
.expandPopup .tabCtrl .tab .content .listItem.selectable:hover .itemTools {
    display: flex;
    flex-direction: row;
    align-items: center;
}


/* Milestone: button with vertical three dots */

.expandPopup .listItem .itemTools .verticalThreeDots {
    background-image: url('assets/more_vertical.png');
    background-size: 3px 15px;
    background-repeat: no-repeat no-repeat;
    background-position: center center;
}

.expandPopup .listItem .itemTools .verticalThreeDots,
.expandPopup .listItem .itemTools .cmdOpen,
.expandPopup .listItem .itemTools .cmdPromote {
    position: relative;
    width: 15px;
    height: 15px;
    padding: 6px;
}

.expandPopup .listItem .itemTools .cmdOpen {
    background-image: url('assets/open.svg');
    background-size: 15px 15px;
    background-repeat: no-repeat no-repeat;
    background-position: center center;
}

.expandPopup .listItem .itemTools .cmdPromote {
    background-image: url('assets/promote.svg');
    background-size: 15px 15px;
    background-repeat: no-repeat no-repeat;
    background-position: center center;
}


/* Milestone: button with save */

.expandPopup .listItem .cmdMilestoneSave {
    background-image: url('assets/milestone_save.svg');
    background-size: 16px 16px;
    background-repeat: no-repeat no-repeat;
    background-position: center center;
}


/* Milestone: button with cancel */

.expandPopup .listItem .cmdMilestoneCancel {
    background-image: url('assets/milestone_cancel.svg');
    background-size: 16px 16px;
    background-repeat: no-repeat no-repeat;
    background-position: center center;
}

.expandPopup .listItem .cmdMilestoneSave,
.expandPopup .listItem .cmdMilestoneCancel {
    display: flex;
    position: relative;
    width: 15px;
    height: 15px;
    padding: 6px;
}

.expandPopup .tabCtrl .tab .content .list:not(.showSubset) .showAllItem {
    display: none;
}

.expandPopup .tabCtrl .tab .content .showAll {
    font-size: 12px;
}

.expandPopup .tabCtrl .tab .content .inaccessibleFileItem {
    position: relative;
    width: 100%;
    height: 52px;
    font-size: 11px;
}

.expandPopup .tabCtrl .tab .content .list.showSubset .inaccessibleFileItem.initHidden {
    display: none;
}

.expandPopup .tabCtrl .tab .content .inaccessibleFileItem.selectable:before {
    position: absolute;
    left: -10px;
    right: -10px;
    top: 0;
    bottom: 0;
    background-color: #f7fcfe;
    content: ' ';
    display: none;
}

.expandPopup .tabCtrl .tab .content .inaccessibleFileItem.selectable:hover:before {
    display: block;
}

.expandPopup .inaccessibleFileItem .itemThumbnail1,
.expandPopup .inaccessibleFileItem .itemThumbnail2,
.expandPopup .inaccessibleFileItem .itemThumbnail3 {
    background-size: 40px 40px;
    width: 40px;
    height: 40px;
}

.expandPopup .inaccessibleFileItem .itemThumbnail1 {
    background-image: url('assets/inaccessible_file_1.svg');
}

.expandPopup .inaccessibleFileItem .itemThumbnail2 {
    background-image: url('assets/inaccessible_files_2.svg');
}

.expandPopup .inaccessibleFileItem .itemThumbnail3 {
    background-image: url('assets/inaccessible_files_3.svg');
}

.expandPopup .inaccessibleFileItem .itemRest {
    height: 40px;
    padding-left: 6px;
    width: 265px;
    display: flex;
    flex-direction: row;
}

.expandPopup .inaccessibleFileItem .itemTitle {
    color: #646464;
    font-weight: normal;
    height: 20px;
    line-height: 20px;
}

.expandPopup .inaccessibleFileItem .itemDescription {
    color: #646464;
    font-weight: normal;
    height: 20px;
    line-height: 20px;
    padding-left: 6px;
}

.expandPopup .inaccessibleFileItem .itemTitle span,
.expandPopup .tabUses .inaccessibleFileItem .itemTitle,
.expandPopup .tabUsedIn .inaccessibleFileItem .itemTitle,
.expandPopup .tabDrawings .inaccessibleFileItem .itemTitle {
    font-weight: bold;
    color: #000;
}

.expandPopup .inaccessibleFileItem .cmdDetails {
    background-color: #6896C8;
    border-radius: 3px;
    box-sizing: border-box;
    color: #ffffff;
    display: none;
    font-family: Arial;
    font-size: 12px;
    font-weight: bold;
    height: 28px;
    line-height: 28px;
    padding: 0 10px;
    transition: top 0.25s linear;
    -webkit-box-sizing: border-box;
    -webkit-transition: top 0.25s linear;
}

.expandPopup .inaccessibleFileItem .cmdDetails:hover {
    background-color: #70A2C6;
}

.expandPopup .inaccessibleFileItem .cmdDetails._disabled_ {
    background-color: #BDBDBD;
}

.expandPopup .tabCtrl .tab .content .inaccessibleFileItem.selectable:hover .cmdDetails {
    display: initial;
}

.projectsPane .filterbox {
    position: absolute;
    border-top: var(--border-color) 1px solid;
}

.projectsPane .filterbox input {
    position: relative;
    width: 100%;
    height: 22px;
    top: 6px;
    border: var(--border-color) 1px solid;
    border-radius: 4px;
    color: var(--main-fg-color);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bolder;
    padding-left: 6px;
    padding-right: 4px;
    -webkit-appearance: none;
}

.projectsPane .filterbox .hasFocus {
    background-color: var(--main-bg-color);
}

.projectsPane .filterbox .noFocus {
    background-color: var(--main-bg-color);
}

.projectsPane .filterbox .noFocus:hover {
    background-color: var(--main-bg-color);
}

.fullpagespinner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background-color: #dddddd;
}

.fullpagespinner.hiding {
    transition: opacity 0.35s ease-out;
    -webkit-transition: opacity 0.35s ease-out;
}

.fullpagespinner .info {
    visibility: visible;
    display: block;
    position: absolute;
    padding: 4px 0px 4px 0px;
    opacity: 1;
    text-overflow: ellipsis;
    width: 100%;
    top: 50%;
    -webkit-transform: translateY(50%);
    -moz-transform: translateY(50%);
    -ms-transform: translateY(50%);
    -o-transform: translateY(50%);
    transform: translateY(50%);
}

.fullpagespinner .info,
.fullpagespinner .info a,
.fullpagespinner .info a:visited {
    color: #646464;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-align: center;
}

.itemGlyph {
    min-width: 22px;
    height: 22px;
    border-radius: 3px;
    background-color: rgb(119, 189, 13);
    position: absolute;
    line-height: 21px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: default;
    right: 8px;
    top: 8px;
}

.itemGlyph.lower {
    background-color: #CCCCCC;
    top: 34px;
}

.itemGlyph.pin {
    display: none;
    background-color: #CCCCCC;
    padding-right: 22px;
}

.itemGlyph._disabled_ {
    display: none;
}

.itemGlyph .glyphimg {
    width: 22px;
    height: 22px;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    top: 0;
    right: 0;
}

.itemGlyph .memberimg {
    background-image: -webkit-image-set(url('assets/user_48.png') 1x, url('assets/user_48@2x.png') 2x);
}

.itemGlyph .joinimg {
    background-image: url('assets/plus_16.svg');
    background-size: 16px 16px;
    border-radius: 3px;
    background-color: #CCCCCC;
}

.itemGlyph .bellimg {
    background-image: url('assets/bell_16.svg');
    background-size: 16px 16px;
    border-radius: 3px;
    background-color: #CCCCCC;
}

.itemGlyph .pinimg {
    background-image: url('assets/pin.svg');
    background-color: var(--symbol-green-color);
    color: var(--symbol-green-color);
    background-size: 18px 18px;
    border-radius: 3px;
}

.itemGlyph .unpinimg {
    background-image: url('assets/pin.svg');
    background-size: 18px 18px;
    color: var(--symbol-green-color);
    border-radius: 3px;
}

.itemGlyph .checkmarkimg {
    background-size: 16px 16px;
    background-image: url('assets/check_mark.svg');
}

.itemGlyph .crossimg {
    background-size: 16px 16px;
    background-image: url('assets/cross.svg');
}

.itemGlyph:hover {
    background-image: none;
    background-color: var(--symbol-bg-color);
    display: inline-block;
}

.itemGlyph:hover._disabled_ {
    display: none;
}

.itemGlyph .glyphText {
    font-size: 12px;
    font-family: arial, sans-serif;
    color: var(--symbol-fg-color);
    display: none;
    padding-right: 3px;
    padding-left: 3px;
    border-radius: 3px;
}

.itemGlyph:hover.cross {
    background-color: #dd2222;
}

.itemGlyph:hover .glyphText {
    display: inline-block;
    color: var(--symbol-green-color);
}

.offline .itemGlyph {
    background-color: var(--symbol-bg-color);
    color: var(--symbol-fg-color);
}

.offline .itemGlyph:hover {
    background-color: var(--symbol-hover-bg-color);
}

.offline .itemGlyph.join .glyphText {
    background-color: var(--symbol-bg-color);
    color: var(--symbol-fg-color);
}

.itemGlyph:hover .memberimg {
    display: none;
}

.itemGlyph:hover .joinimg {
    display: none;
}

.itemGlyph:hover .bellimg {
    display: none;
}

.itemGlyph:hover .unpinimg {
    display: none;
}

.itemGlyph:hover .checkmarkimg {
    display: none;
}

.itemGlyph:hover .crossimg {
    display: none;
}

.inplaceedit {
    -webkit-animation: glow 2000ms ease-out infinite alternate;
    border: 1px solid #1d94ff;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    text-shadow: 0 -1px 0 #aad2ff;
    z-index: 10;
    background: #f4f4f5;
    border-color: #1d94ff;
    box-shadow: 0 0 5px rgba(29, 147, 254, 0.20), inset 0 0 5px rgba(29, 148, 255, 0.10), 0 2px 0 #aad2ff;
    outline: none;
    position: absolute;
    overflow: hidden;
}

@-webkit-keyframes glow {
    0% {
        border-color: rgba(18, 156, 255, 0.9);
        box-shadow: 0 0 5px rgba(18, 156, 255, 0.2), inset 0 0 5px rgba(18, 156, 255, 0.1), 1px 1px 1px rgba(18, 156, 255, 0.1);
    }
    100% {
        border-color: rgba(18, 156, 255, 0.68);
        box-shadow: 0 0 20px rgba(18, 156, 255, 0.88), inset 0 0 10px rgba(18, 156, 255, 0.4), 1px 1px 1px rgba(18, 156, 255, 0.1);
    }
}

@keyframes glow {
    0% {
        border-color: rgba(18, 156, 255, 0.9);
        box-shadow: 0 0 5px rgba(18, 156, 255, 0.2), inset 0 0 5px rgba(18, 156, 255, 0.1), 1px 1px 1px rgba(18, 156, 255, 0.1);
    }
    100% {
        border-color: rgba(18, 156, 255, 0.68);
        box-shadow: 0 0 20px rgba(18, 156, 255, 0.88), inset 0 0 10px rgba(18, 156, 255, 0.4), 1px 1px 1px rgba(18, 156, 255, 0.1);
    }
}

.milestoneedit {
    -webkit-animation: milestoneglow 2000ms ease-out infinite alternate;
    font-size: 11px;
}

.milestonenameedit {
    font-weight: bold;
    color: #000;
}

.milestonedescedit {
    font-weight: normal;
    color: #646464;
}

@-webkit-keyframes milestoneglow {
    0% {
        border-color: rgba(18, 156, 255, 0.6);
        box-shadow: 0 0 5px rgba(18, 156, 255, 0.2), inset 0 0 5px rgba(18, 156, 255, 0.1), 1px 1px 1px rgba(18, 156, 255, 0.1);
    }
    100% {
        border-color: rgba(18, 156, 255, 0.38);
        box-shadow: 0 0 5px rgba(18, 156, 255, 0.58), inset 0 0 5px rgba(18, 156, 255, 0.4), 1px 1px 1px rgba(18, 156, 255, 0.1);
    }
}

@keyframes milestoneglow {
    0% {
        border-color: rgba(18, 156, 255, 0.6);
        box-shadow: 0 0 5px rgba(18, 156, 255, 0.2), inset 0 0 5px rgba(18, 156, 255, 0.1), 1px 1px 1px rgba(18, 156, 255, 0.1);
    }
    100% {
        border-color: rgba(18, 156, 255, 0.38);
        box-shadow: 0 0 5px rgba(18, 156, 255, 0.58), inset 0 0 5px rgba(18, 156, 255, 0.4), 1px 1px 1px rgba(18, 156, 255, 0.1);
    }
}

.invite {
    position: relative;
    width: 348px;
    font-size: 12px;
}

.invite .invitecontent {
    position: relative;
    width: 276px;
    height: auto;
    overflow: hidden;
    background-color: #ffffff;
    border-radius: 3px;
}

.invite .inviteinputcontent {
    overflow: auto;
    border-radius: 3px;
}

.invite .token {
    position: relative;
    display: inline-block;
    float: left;
    height: 18px;
    line-height: 18px;
    text-align: center;
    background-color: #eff2f7;
    border-radius: 2px;
    color: #646464;
    border: 1px solid #ccd5e4;
    cursor: default;
    margin: 4px 0px 4px 4px;
    padding: 0px 20px 0px 2px;
}

.invite .token .close {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 20px;
    height: inherit;
    background: url('assets/close_cross.png') no-repeat center;
    cursor: default;
}

.invite input {
    color: #646464;
    border: none;
    box-sizing: border-box;
    height: 28px;
    font-style: italic;
    min-width: 138px;
    max-width: inherit;
    width: 100%;
    float: left;
    -webkit-appearance: none;
    border-radius: 3px;
    padding-left: 4px;
}

.invite input:disabled {
    -webkit-user-select: none;
    user-select: none;
}

.invite input[type="search"]::-webkit-search-decoration,
.invite input[type="search"]::-webkit-search-cancel-button,
.invite input[type="search"]::-webkit-search-results-button,
.invite input[type="search"]::-webkit-search-results-decoration {
    display: none;
}


/* taken from #projectDetailData .actionButton.upload */

.invite .invitebtn {
    position: absolute;
    transition: top 0.25s linear;
    -webkit-transition: top 0.25s linear;
    /*.contributors .actionButton.upload {*/
    background-color: var(--button-blue-bg-color);
    color: var(--button-blue-fg-color);
    border-color: var(--button-blue-border-color);
    font-weight: bold;
    font-size: 12px;
    border-radius: 3px;
    cursor: default;
    /*.contributors .rbtn { */
    right: 0px;
    top: 0px;
    height: 28px;
    line-height: 28px;
    width: 62px;
    text-align: center;
}


/* .invite .invitebtn:hover {
    background-color: #70A2C6;
} */

.invite .invitebtn._disabled_ {
    background-color: var(--button-blue-disabled-bg-color);
    color: var(--button-blue-disabled-fg-color);
    border-color: var(--button-blue-disabled-border-color);
}

.invite .inputResp {
    width: inherit;
    height: 28px;
    line-height: 28px;
    text-align: center;
}

.invite .thoUpgradePane {
    position: relative;
    top: 2px;
    font-family: Arial;
    font-size: 12px;
    line-height: 14px;
    color: #666666;
    height: 162px;
    border-radius: 4px;
    border-left-style: solid;
    border-left-color: #0696D7;
    border-left-width: 4px;
    background-color: #FFFFFF;
    padding-top: 16px;
    padding-left: 12px;
    padding-right: 8px;
}

.invite .thoUpgradePane .sideInfoLine {
    height: 178px;
    width: 4px;
    background-color: #0696D7;
    position: absolute;
}

.invite .thoUpgradePane .teamIsAvailableInfo {
    height: 14px;
    width: 324px;
    font-weight: bold;
}

.invite .thoUpgradePane .suggestUpgradeInfo {
    height: 56px;
    width: 324px;
    padding-top: 8px;
}

.invite .thoUpgradePane .suggestNote {
    padding-top: 14px;
}

.invite .skipUpgradeBtn {
    height: 28px;
    width: 200px;
    position: absolute;
    top: 134px;
    left: 29px;
    transition: top 0.25s linear;
    -webkit-transition: top 0.25s linear;
    color: #666666;
    font-family: Arial;
    font-size: 12px;
    font-weight: 500;
    line-height: 28px;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    border: 1px solid #c0c0c0;
    border-radius: 2px;
}

.invite .skipUpgradeBtn:hover {
    box-shadow: 0 0 5px #c0c0c0;
    cursor: pointer;
}

.invite .upgradeBtn {
    height: 28px;
    width: 66px;
    position: absolute;
    top: 134px;
    left: 256px;
    transition: top 0.25s linear;
    -webkit-transition: top 0.25s linear;
    background-color: #6896C8;
    color: #FFFFFF;
    font-family: Arial;
    font-weight: bold;
    font-size: 12px;
    border-radius: 3px;
    cursor: pointer;
    right: 0px;
    line-height: 28px;
    text-align: center;
}

.invite .upgradeBtn:hover {
    background-color: #70A2C6;
    cursor: pointer;
}

.lastRefreshTime {
    position: absolute;
    display: block;
}

.lastRefreshTime .label {
    margin-top: 9px;
    font: 12px Arial;
    color: #6B6B6B;
}

.replyInput {}

.replyInput.disabled {}

.replyInput.inProgress {}

.replyInput textarea {
    color: #000000;
    border: #b9b9b9 1px solid;
    resize: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    /* because of width 100% + padding */
    -webkit-box-sizing: border-box;
    word-wrap: break-word;
    transition: height 0.15s ease-out 0.15s;
    -webkit-transition: height 0.15s ease-out 0.15s;
}

.replyInput textarea::-webkit-input-placeholder {
    color: #b9b9b9;
}

.replyInput textarea.hidden {
    position: absolute;
    left: 0;
    top: -100000px;
    height: 0;
    visibility: hidden;
    transition: none;
    -webkit-transition: none;
}

.replyInput .buttonsContainer {
    text-align: right;
    overflow: hidden;
    height: 0;
    transition: height 0.2s ease-out;
    -webkit-transition: height 0.2s ease-out;
}

.replyInput.active .buttonsContainer {
    height: 28px;
}

.replyInput .buttonsContainer .replyButton {
    display: inline-block;
    font-size: 8pt;
    cursor: default;
    line-height: 22px;
    text-align: center;
    margin: 4px 0 0 6px;
    width: 67px;
    height: 22px;
    background: #e9e9e9;
    border: 1px solid #b9b9b9;
    color: #676767;
    -webkit-user-select: none;
    user-select: none;
}

.replyInput .buttonsContainer .replyButton:hover {
    color: #ffffff;
    border: 1px solid #a4a4a4;
    background: #6699cc;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6699cc), color-stop(100%, #376697));
    background: -webkit-linear-gradient(top, #6699cc 0%, #376697 100%);
    background: linear-gradient(to bottom, #6699cc 0%, #376697 100%);
}

.replyInput .buttonsContainer .replyButton:active {
    color: #ffffff;
    border: 1px solid #b9b9b9;
    background: #5286bc;
}

.replyInput.disabled .buttonsContainer .replyButton,
.replyInput.disabled .buttonsContainer .replyButton:hover,
.replyInput.disabled .buttonsContainer .replyButton:active,
.replyInput.inProgress .buttonsContainer .replyButton,
.replyInput.inProgress .buttonsContainer .replyButton:hover,
.replyInput.inProgress .buttonsContainer .replyButton:active {
    color: #bababa;
    cursor: default;
    border: 1px solid #b9b9b9;
    background: #e9e9e9;
    pointer-events: none;
}

.replyInput .buttonsContainer .additionalInfoContainer {
    position: relative;
    display: none;
    margin: 4px 0 0 0;
    height: 22px;
    line-height: 22px;
    text-align: right;
    font-size: 8pt;
    -webkit-user-select: none;
    user-select: none;
}

.replyInput .buttonsContainer .additionalInfoContainer.visible {
    display: inline-block;
}

.replyInput .buttonsContainer .additionalInfoContainer .errorMessage {
    color: #ff0000;
}

.replyInput .buttonsContainer .additionalInfoContainer .spinnerContainer {
    position: absolute;
    top: 5px;
    right: 10px;
}

.searchbox {
    position: absolute;
}

.searchbox .searchbtn {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #6896C8;
    background-image: -webkit-image-set(url(assets/search_16_white.png) 1x, url(assets/search_16_white@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 0 5px 5px 0;
    height: 22px;
    width: 28px;
    cursor: default;
}

.searchbox .searchbtn:hover,
.searchbox .searchbtn:focus {
    background-color: #70A2C6;
}

.searchbox input {
    position: absolute;
    top: 0;
    left: 0;
    color: #555555;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bolder;
    height: 22px;
    width: 275px;
    padding-left: 6px;
    -webkit-appearance: none;
}

.dashboardSelect {
    position: absolute;
    height: 23px;
    font-size: 16px;
    color: #646464;
}

.dashboardSelect .contextBtn {
    position: absolute;
    left: 0;
    top: 0;
    background: url("assets/triangle_white.png") #b8b8b8 no-repeat center center;
    background-size: 6px 4px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    cursor: default;
}

.dashboardSelect .projectName {
    display: inline-block;
    padding: 0 15px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: url("assets/triangle.png") no-repeat right center;
    background-size: 6px;
    cursor: default;
}

.dashboardSelect .projectName:hover {
    color: #6693CC;
    background: url("assets/triangle_hover.png") no-repeat right center;
    background-size: 6px;
}

#dashboardSelectMenu {
    position: absolute;
    padding: 10px;
    border: 2px solid #808080;
    height: 0;
    overflow: hidden;
    background-color: #F7F7F7;
    z-index: 10;
    font-size: 12px;
    left: 12px;
    transition: height 0.2s ease-out;
    -webkit-transition: height 0.2s ease-out;
    border-radius: 2px;
    color: #484848;
    max-width: 350px;
}

#dashboardSelectMenu .option {
    padding: 1px 5px 1px 30px;
    cursor: default;
    background: no-repeat 4px center;
    background-size: 22px;
    height: 30px;
    overflow: hidden;
}

#dashboardSelectMenu .option.corrupted {
    background-image: url("assets/alert_icon_orange.png");
}

#dashboardSelectMenu .option div {
    padding: 0px 4px 0px 4px;
    cursor: default;
    height: 30px;
    line-height: 30px;
    white-space: nowrap;
}

#dashboardSelectMenu .optionSeparator {
    margin: 8px 0px;
    cursor: default;
    background-color: lightgray;
    height: 1px;
}

#dashboardSelectMenu .option:hover div {
    background-color: #bebebe;
}

.selectableList {
    position: absolute;
    overflow: hidden;
}

.selectableList .listScrollContainer {
    position: absolute;
    left: 0;
    top: 0;
    overflow: auto;
}

.selectableList .listContainer {
    overflow: visible;
    position: relative;
}


/* group */

.selectableList .listGroup {
    position: absolute;
    left: 0;
    width: 100%;
    cursor: default;
    font-size: 12px;
    line-height: 12px;
    padding: 13px 2px 15px 0;
    font-weight: bold;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--main-fg-color);
    text-transform: uppercase;
    transition: top 0.25s ease-out;
    -webkit-transition: top 0.25s ease-out;
}

.selectableList .listGroup.fakeListGroup {
    top: 0;
    padding: 13px 0 15px 0;
    display: none;
    transition: none;
    -webkit-transition: none;
    z-index: 10;
    background: var(--outer-bg-color);
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
}

.selectableList .listGroup.h_delimiter {
    padding: 8px 2px 0px 0;
    height: 21px;
}

.selectableList .listGroup .titleContainer,
.selectableList .listGroup.fakeListGroup .titleContainer {
    position: relative;
    height: 12px;
}

.selectableList .listGroup.h_delimiter .titleContainer {
    margin: 0px 0px 0px 2px;
    border-top: #cccccc 1px solid;
}

.selectableList .listGroup .actionButton,
.selectableList .listGroup.fakeListGroup .actionButton {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--button-blue-bg-color);
    color: var(--button-blue-fg-color);
    border: var(--button-blue-border-color);
    border-radius: 3px;
    height: 28px;
    text-transform: none;
}


/* .selectableList .listGroup .actionButton:hover,
.selectableList .listGroup.fakeListGroup .actionButton:hover {
    background: #70A2C6;
} */

.selectableList .listGroup .actionButton._disabled_,
.selectableList .listGroup.fakeListGroup .actionButton._disabled_ {
    background: var(--button-blue-disabled-bg-color);
    color: var(--button-blue-disabled-fg-color);
    border: var(--button-blue-disabled-border-color);
}

.selectableList .listGroup .actionButton .label,
.selectableList .listGroup.fakeListGroup .actionButton .label {
    color: var(--button-blue-fg-color);
    font-weight: bold;
    font-size: 12px;
    line-height: 28px;
    padding: 0 7px 0 7px;
}

.selectableList .listGroup .actionButton .label._disabled_,
.selectableList .listGroup.fakeListGroup .actionButton .label._disabled_ {
    color: var(--button-blue-disabled-fg-color);
}


/* item */

.selectableList .listItem {
    position: absolute;
    left: 0;
    width: 100%;
    background: var(--main-bg-color);
    border-radius: 3px;
    border: var(--border-color) 1px solid;
    cursor: default;
    overflow: hidden;
    opacity: 0;
}

.selectableList .listItem.useAnimation {
    transition: top 0.25s ease-out, opacity 0.25s ease-out;
    -webkit-transition: top 0.25s ease-out, opacity 0.25s ease-out;
}

.selectableList .listItem.hide {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
}

.selectableList .listItem.selected {
    border: rgb(102, 149, 202) 1px solid;
}

.selectableList .errorMessage {
    position: absolute;
    height: 26px;
    width: 100%;
    bottom: 0px;
    left: 0px;
    z-index: 50;
    line-height: 26px;
    box-sizing: content-box;
    color: #ffffff;
    font-weight: 500;
    background-color: #c0d9ef;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transition: -webkit-transform 0.35s ease-out;
    transition: transform 0.35s ease;
}

.selectableList .errorMessage.showByScale {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}

.selectableList .errorMessage .content {
    padding-left: 7px;
    padding-right: 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
}

.selectableList:hover .listItem {
    overflow: visible;
}

.spinner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 28px;
    height: 28px;
    margin: auto;
    z-index: 10;
}

.spinner .spin {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background-image: url(assets/spinner.svg);
    background-repeat: no-repeat;
    background-position: center center;
    width: 24px;
    height: 24px;
    animation: spinAnimation 1.5s linear infinite;
    -webkit-animation: spinAnimation 1.5s linear infinite;
}

@-webkit-keyframes spinAnimation {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}


/*smaller version*/

.spinnerSmall {
    position: absolute;
    top: 0;
    right: 0;
    width: 14px;
    height: 14px;
    margin: auto;
    z-index: 10;
}

.spinnerSmall .spin {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background-image: url(assets/spinner.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 13px;
    height: 13px;
    animation: spinAnimation 1.5s linear infinite;
    -webkit-animation: spinAnimation 1.5s linear infinite;
}

.statusLabel {
    min-width: 22px;
    height: 22px;
    border-radius: 3px;
    background-color: #CCCCCC;
    position: absolute;
    line-height: 21px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: default;
    right: 8px;
    top: 8px;
}

.statusLabel .text {
    font-size: 12px;
    font-family: arial, sans-serif;
    color: #ffffff;
    padding-right: 4px;
    padding-left: 4px;
}

.swipeControl {
    position: absolute;
    overflow: hidden;
    transition: top 0.25s linear 0.75s;
    -webkit-transition: top 0.25s linear 0.75s;
}

.swipeControl.moveImmediatelyDown {
    transition: top 0.25s linear;
    -webkit-transition: top 0.25s linear;
}

.swipeControl .swipePanel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateX(0);
    -webkit-transform: translateX(0);
}

.swipeControl .swipePanel.enableSwipeAnimation {
    transition: transform 0.25s ease-out;
    -webkit-transition: -webkit-transform 0.25s ease-out;
}

.swipeControl .swipePanel .swipePane {
    position: absolute;
    top: 0;
    height: 100%;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
}

#tabsCtrl {
    position: absolute;
}

#tabsCtrl .tabs {
    position: absolute;
}


/* tabButton */

#tabsCtrl .tabs .tabButton {
    cursor: default;
    position: absolute;
    height: 26px;
    /* border: 1px solid #979797; */
    font-size: 12px;
    /* color: #646464; */
    text-align: center;
    line-height: 26px;
    top: 0px;
}

#tabsCtrl .tabs .tabButton:hover {
    background: var(--outer-hover-bg-color);
}

#tabsCtrl .tabs .tabButton.selected {
    background: var(--outer-selected-bg-color);
}

#tabsCtrl .tabs .tabButton:first-child {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
}

#tabsCtrl .tabs .tabButton:last-child {
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
}

#tabsCtrl .defaultTabPane {
    position: absolute;
}

.uploadProgressBarContainer {
    position: absolute;
    z-index: 15;
    transition: top 0.25s ease-out;
    -webkit-transition: top 0.25s ease-out;
}

.uploadProgressBarContainer .uploadProgressBar {
    position: absolute;
    top: 100%;
    height: 0px;
    width: 100%;
    background: #d1d1d1;
    cursor: default;
    transition: top 0.25s ease-out;
    -webkit-transition: top 0.25s ease-out;
}

.uploadProgressBarContainer .uploadProgressBar.spacer:before {
    border-top: 1px solid rgb(231, 231, 231);
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 10px;
    right: 10px;
    content: "";
}

.uploadProgressBarContainer .uploadProgressBar .statusText {
    position: absolute;
    font-size: 12px;
    color: #000000;
    text-align: left;
    width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uploadProgressBarContainer .uploadProgressBar .errorIndicator {
    position: absolute;
    width: 14px;
    height: 100%;
    top: 0;
    left: 140px;
    z-index: 16;
    background: url("assets/alert_icon_gray.png") no-repeat center center;
    background-size: contain;
    visibility: hidden;
    overflow: visible;
}

.uploadProgressBarContainer .uploadProgressBar.error .errorIndicator {
    visibility: visible;
}

.uploadProgressBarContainer .uploadProgressBar .errorIndicator .errorIndicatorPopup {
    position: absolute;
    bottom: 35px;
    left: -60px;
    width: 260px;
    border: #000000 2px solid;
    display: none;
    z-index: 10;
}

.uploadProgressBarContainer .uploadProgressBar .errorIndicator:hover .errorIndicatorPopup,
.uploadProgressBarContainer .uploadProgressBar .errorIndicator:hover .errorIndicatorPopup:hover {
    display: block
}

.uploadProgressBarContainer .uploadProgressBar .errorIndicator .errorIndicatorPopup .popupTitleContainer {
    color: #ffffff;
    font-size: 12px;
    padding: 0 0 0 5px;
    background: #000000;
}

.uploadProgressBarContainer .uploadProgressBar .errorIndicator .errorIndicatorPopup .popupTitleContainer .popupTitle {
    padding: 0 24px 0 0;
    line-height: 24px;
    background: url("assets/alert_icon_orange.png") no-repeat right center;
    display: inline-block;
}

.uploadProgressBarContainer .uploadProgressBar .errorIndicator .errorIndicatorPopup .popupMessage {
    color: #000000;
    font-size: 12px;
    padding: 5px;
    text-align: left;
    background: #ffffff;
}

.uploadProgressBarContainer .uploadProgressBar .errorShortMessage {
    position: absolute;
    font-size: 8px;
    color: #000000;
    text-align: left;
    left: 125px;
    bottom: 3px;
    visibility: hidden;
}

.uploadProgressBarContainer .uploadProgressBar.error .errorShortMessage {
    visibility: visible;
}

.uploadProgressBarContainer .uploadProgressBar .progressContainer {
    position: absolute;
    background: #ffffff;
    width: 205px;
    border-radius: 6px;
    left: 160px;
}

.uploadProgressBarContainer .uploadProgressBar .progressContainer .progressIndicator {
    position: absolute;
    background: #4f86be;
    border-radius: 6px;
    left: 0;
    top: 0;
    height: 100%;
    transition: width 0.15s ease-out;
    -webkit-transition: width 0.15s ease-out;
}

.uploadProgressBarContainer .uploadProgressBar.error .progressContainer .progressIndicator {
    background-color: #4f86be;
    background-size: 30px 30px;
    background-image: linear-gradient(135deg, rgba(231, 231, 231, 1) 0%, rgba(231, 231, 231, 1) 25%, rgba(231, 231, 231, 0) 25%, rgba(231, 231, 231, 0) 50%, rgba(231, 231, 231, 1) 50%, rgba(231, 231, 231, 1) 75%, rgba(231, 231, 231, 0) 75%, rgba(231, 231, 231, 0) 100%);
    animation: moveProgressAnim 2s linear infinite;
    -webkit-animation: moveProgressAnim 2s linear infinite;
}

@-webkit-keyframes moveProgressAnim {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -60px -60px;
    }
}

@keyframes moveProgressAnim {
    0% {
        background-position: 0 0;
    }
    to {
        background-position: -60px -60px;
    }
}

.uploadProgressBarContainer .uploadProgressBar .expandButton {
    position: absolute;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMTcgMTciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik0xNCwxN2wtMTQsMGwwLC0xNGwxMiwwbC0yLDItOCwwYzAsMyAwLDYgMCwxMGwxMCwwbDAsLThsMiwtMmwwLDEyN1pNMTcsMGwwLDYuN2wtMSwwbDAsLTVsLTksOWwtMC43LC0wLjdsOSwtOWwtNSwwbDAsLTFsNiwwWiIgc3R5bGU9ImZpbGw6IzY2NjsiLz48L3N2Zz4=");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.uploadProgressBarContainer .uploadProgressBar .expandButton:hover {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMTcgMTciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxwYXRoIGQ9Ik0xNCwxN2wtMTQsMGwwLC0xNGwxMiwwbC0yLDItOCwwYzAsMyAwLDYgMCwxMGwxMCwwbDAsLThsMiwtMmwwLDEyN1pNMTcsMGwwLDYuN2wtMSwwbDAsLTVsLTksOWwtMC43LC0wLjdsOSwtOWwtNSwwbDAsLTFsNiwwWiIgc3R5bGU9ImZpbGw6IzMzMzsiLz48L3N2Zz4=");
    cursor: default;
}

.activitiesPane {
    margin-top: 6px;
    position: relative;
    font-size: 12px;
    overflow: auto;
}

.inactivated {
    cursor: default;
    pointer-events: none;
    background-color: grey;
}

.activitiesPane.savingInProgress {}


/* activity group node */

.activitiesPane .group {
    position: relative;
    border: #a7a9ac 1px solid;
    background: #e9e9e9;
    margin: 6px 6px 6px 6px;
}

.activitiesPane .group:first-child {
    margin-top: 0;
}

.activitiesPane .group.active {
    border: SteelBlue 2px solid;
}


/*used for header footer as well as messageRow*/

.activitiesPane .group .hideComment {
    display: none;
    overflow: hidden;
}

.activitiesPane .group.showHidden .messageRow.hideComment {
    display: block;
    overflow: auto;
}

.activitiesPane .group .version {
    float: left;
    color: #666666;
    padding: 0 6px 0 6px;
}

.activitiesPane .group .author {
    padding: 0 0 0 6px;
    float: left;
}

.activitiesPane .group .timeCapsule {
    float: right;
    right: 0px;
    top: 0px;
    text-align: right;
    color: #666666;
    font-weight: normal;
}

.activitiesPane .group.deleting {
    pointer-events: none;
}


/* header */

.activitiesPane .group .groupHeader {
    position: relative;
    color: #000000;
    overflow-x: scroll;
}

.activitiesPane .group .deletingCommentMask {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.75);
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    z-index: 1001;
    overflow: hidden;
    visibility: hidden;
}

.activitiesPane .group .deletingCommentMask.deleting {
    visibility: visible;
}

.activitiesPane .group .groupHeader .headLine {
    position: relative;
    left: 0px;
    right: 0px;
    height: 22px;
    padding-left: 6px;
    padding-right: 6px;
    line-height: 22px;
    color: #000000;
    background: #d2d2d2;
}

.activitiesPane .group .groupHeader .headerMessageWrapper {
    position: relative;
}

.activitiesPane .group .status {
    position: absolute;
    top: 6px;
    right: 18px;
    -webkit-border-radius: 2px;
    border: 1px solid #8e8c8c;
    cursor: pointer;
}

.activitiesPane .group .deleteComment {
    position: absolute;
    margin-right: 3px;
    margin-top: 9px;
    top: 0px;
    right: 0px;
    width: 10px;
    height: 10px;
    background: url("assets/close_cross.png") no-repeat center center;
    background-size: contain;
    visibility: hidden;
}

.activitiesPane .group .deleteComment:hover {
    cursor: pointer;
}

.activitiesPane .group .groupHeader:hover .headerMessageWrapper .deleteComment {
    visibility: visible;
}

.activitiesPane .group .groupContent .messageRow:hover .deleteComment {
    margin-top: 0px;
    visibility: visible;
}

.activitiesPane .group .groupHeader.groupContentPresent {
    border-bottom: #989898 1px solid;
}

.activitiesPane .group .messageText {
    position: relative;
    margin: 0 15px 0 6px;
    padding-top: 6px;
    padding-bottom: 6px;
    text-align: justify;
    font-size: 12px;
    font-weight: normal;
    overflow: hidden;
    max-height: 54px;
    line-height: 15px;
    white-space: normal;
    word-wrap: break-word;
    clear: left;
}

.activitiesPane .group .seeMore {
    position: relative;
    line-height: 15px;
    padding-top: 6px;
    font-size: 12px;
    margin: 0 15px 0 6px;
    text-align: justify;
    cursor: pointer;
}

.activitiesPane .group .groupHeader .headerMessage.previewTitle {
    color: #666666;
}

.activitiesPane .group .groupHeader .displayUrl {
    position: relative;
    display: block;
    margin: 0 3px 0 17px;
    padding-top: 5px;
    padding-bottom: 5px;
    white-space: pre-line;
    overflow: visible;
    text-decoration: none;
}

.activitiesPane .group .groupHeader .displayDelim {
    position: relative;
    margin: 0 3px 0 17px;
}

.activitiesPane .group .headerFooter {
    cursor: default;
    position: relative;
}


/* arrow-right */

.activitiesPane .group .footerTriangle {
    position: absolute;
    left: 9px;
    margin: auto;
    top: 0px;
    bottom: 0px;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid #989898;
}


/* arrow-down */

.activitiesPane .group.showHidden .footerTriangle {
    left: 7px;
    top: auto;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #989898;
}

.activitiesPane .group .footerText {
    font-size: 10px;
    padding: 0 0 0 16px;
}

.activitiesPane .linkButton {
    float: left;
    margin-left: 6px;
    width: 16px;
    height: 16px;
    background: url("assets/commentLink.png") no-repeat center center;
    background-size: contain;
}


/* content */

.activitiesPane .group .groupContent {
    position: relative;
}

.activitiesPane .group .groupContent .messageRow {
    overflow: auto;
    position: relative;
    border-top: #a7a9ac 1px solid;
    color: #000000;
}

.activitiesPane .group .groupContent .messageRow .deletingReplyMask {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.75);
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    z-index: 1001;
    overflow: hidden;
    visibility: hidden;
}

.activitiesPane .group .groupContent .messageRow .deletingReplyMask.deleting {
    visibility: visible;
}

.activitiesPane .group .groupContent .messageRow.editOnly {
    padding-top: 3px;
    padding-bottom: 3px;
    border-bottom: none;
}

.activitiesPane .group .groupContent .messageRow.editOnly:last-child {
    padding-bottom: 5px;
}

.activitiesPane .group .groupContent .messageRow.editOnly:first-child {
    padding-top: 5px;
}

.activitiesPane .group .messageRow .messageTitleBar {
    position: relative;
    left: 0px;
    right: 0px;
    height: 22px;
    padding-top: 6px;
    padding-left: 0px;
    padding-right: 6px;
}

.activitiesPane .group .messageRow .messageTitleBar .timeCapsule {
    padding-top: 6px;
}

.activitiesPane .group .messageRow .messageTextWrapper {
    position: relative;
}

.activitiesPane .group .messageRow .messageTextWrapper .messageText {
    padding-top: 0px;
    position: relative;
    padding-bottom: 6px;
}

.activitiesPane .group .messageRow .messageTextWrapper .seeMore {
    padding-bottom: 6px;
}

.activitiesPane .group .groupContent .messageRow span {
    color: #3c33a8;
    cursor: pointer;
    text-decoration: underline;
}

.activitiesPane .group .groupContent .replyContainer {
    position: relative;
    padding: 6px;
    border-top: #a7a9ac 1px solid;
    color: #000000;
}

.activitiesPane .group .groupContent .replyContainer .replyInput {
    visibility: visible;
}

.activitiesPane.savingInProgress .group .groupContent .replyContainer .replyInput {
    visibility: hidden;
}

.activitiesPane .group .promptAction {
    position: relative;
    background-color: steelblue;
    padding: 6px;
    color: white;
}

.activitiesPane .group .promptAction .prompt {
    position: relative;
    left: 0px;
    margin-right: 76px;
    min-height: 22px;
}

.activitiesPane .group .promptAction .action {
    position: absolute;
    right: 0px;
    width: 60px;
    height: 20px;
    top: 50%;
    margin-top: -15px;
    border: white 1px solid;
    background: #5285B0;
    text-align: center;
    cursor: pointer;
}

.activitiesPane .group .promptAction .action:hover {
    background: linear-gradient(#6193C9, #3A669B);
}

.activitiesPane .group .promptAction .action:active {
    background: #5284BE;
}

.activitiesPane .thumbnailWrapper {
    float: left;
    margin-left: 6px;
    width: 106px;
    height: 106px;
    border: #B5B5B5 1px solid;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.activitiesPane .thumbnail {
    display: block;
    position: absolute;
    margin: 0 auto;
    width: 106px;
    height: auto;
    cursor: pointer;
}

.activitiesPane .thumbnailWrapper .viewThumbnail {
    visibility: hidden;
    pointer-events: none;
    align-items: center;
}

.activitiesPane .thumbnail:hover~.viewThumbnail.mask {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: rgba(255, 255, 255, 0.5);
    visibility: visible;
    z-index: 10;
}

.activitiesPane .thumbnail:hover~.viewThumbnail.icon {
    position: absolute;
    width: 36px;
    height: 36px;
    left: 35px;
    top: 40%;
    margin-top: -26px;
    background: url("assets/view_thumbnail.png") no-repeat center center;
    background-size: contain;
    visibility: visible;
    z-index: 20;
}

.activitiesPane .thumbnail:hover~.viewThumbnail.text {
    margin: 6px;
    margin-top: 56px;
    text-align: center;
    font-size: 12px;
    color: #3B7ED0;
    visibility: visible;
    z-index: 30;
}

.activitiesPane::-webkit-scrollbar {
    width: 6px;
    background: none;
    margin: 0 3px 0 3px;
}

.activitiesPane::-webkit-scrollbar-thumb,
.activitiesPane::-webkit-scrollbar-thumb:hover {
    background: #bdbbbc;
    -webkit-border-radius: 2px;
    border: 1px solid #8e8c8c;
    height: 58px;
}

.activitiesPane::-webkit-scrollbar-corner {
    background: #c8c9cb;
}

.activitiesPane::-webkit-scrollbar-track {
    background: #c8c9cb;
}

.goog-tooltip {
    position: absolute;
    background: #515151;
    font-size: 12px;
    line-height: 14px;
    max-width: 170px;
    color: #ffffff;
    font-weight: bold;
    padding: 3px 13px 3px 13px;
    border-radius: 10px;
    z-index: 15;
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
    box-shadow: 0 7px 23px 0 rgba(50, 50, 50, 0.41);
    -webkit-box-shadow: 0 7px 23px 0 rgba(50, 50, 50, 0.41);
}

a.mention {
    color: #0696D7;
    font-weight: 400;
    text-decoration: none;
}

.dataViewHeader {
    position: absolute;
    height: 32px;
    width: 401px;
    background-color: var(--outer-bg-color);
    color: var(--outer-fg-color);
}

.dataViewHeader .headerTitleBtn {
    position: absolute;
    height: 32px;
    max-width: 305px;
    color: var(--outer-fg-color);
    font-family: Arial;
    font-size: 14px;
    line-height: 32px;
    white-space: nowrap;
}


/* .headerTitleBtn:hover {
    background-color: #bbbbbb;
} */

.dataViewHeader .headerTitleBtn.headerTitleBtnEnabled::after {
    content: url("assets/down_arrow.svg");
    position: relative;
    float: left;
    margin-left: 8px;
    margin-right: 8px;
    transform: scale(0.7);
}

.dataViewHeader .singleUserIcon::before {
    content: url('assets/permission-individual-16.svg');
    position: relative;
    height: 16px;
    width: 16px;
    margin-left: 8px;
    margin-right: 8px;
    margin-top: 2px;
}

.dataViewHeader .teamAccountIcon::before {
    content: url('assets/forums-16.svg');
    position: relative;
    height: 16px;
    width: 16px;
    margin-left: 8px;
    margin-right: 8px;
    margin-top: 2px;
}

.dataViewHeader .headerTitleBtn .textData {
    display: block;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dataViewHeader .headerSearchButton {
    position: absolute;
    width: 32px;
    height: 32px;
    left: 337px;
    background-image: -webkit-image-set(url('assets/search_16_tho.svg') 1x, url('assets/search_16_tho.svg') 2x);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 16px 16px;
}

.dataViewHeader .headerCapacity {
    position: absolute;
    background: #CCCCCC;
    border-radius: 3px;
    width: 84px;
    height: 32px;
    left: 220px;
    line-height: 32px;
    white-space: nowrap;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.dataViewHeader .headerCapacity::before {
    position: relative;
    content: url("assets/icon-pill-count.svg");
    background-size: 100% 100%;
    width: 16px;
    float: left;
    height: 16px;
    margin-left: 8px;
    margin-right: 2px;
    margin-top: 2px;
    background-repeat: no-repeat;
}

.dataViewHeader .headerCapacity:hover {
    background-color: #bbbbbb;
    cursor: default;
}

.dataViewHeader .headerCapacity .textData {
    display: block;
    position: relative;
    font-family: Arial;
    font-size: 13px;
    height: 20px;
    text-align: left;
    color: #666666;
}

.dataViewHeader .headerSearchButton._disabled_ {
    position: absolute;
    background-image: -webkit-image-set(url('assets/search_16_tho_dis.svg') 1x, url('assets/search_16_tho_dis.svg') 2x);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 16px 16px;
}

.dataViewHeader .headerSearchButton:not(._disabled_) ._hover_ {
    background-image: url('assets/search_16_tho.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 16px 16px;
    background-color: var(--symbol-hover-bg-color);
}

.dataViewHeader .headerCloseButton {
    position: absolute;
    left: 369px;
    width: 32px;
    height: 32px;
    background-image: -webkit-image-set(url('assets/illustration_close.svg') 1x, url('assets/illustration_close.svg') 2x);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 16px 16px;
}

.dataViewHeader .headerCloseButton:not(._disabled_) ._hover_ {
    background-image: url('assets/illustration_close.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 16px 16px;
    background-color: var(--symbol-hover-bg-color);
}

.dataViewHeader .headerRefresh,
.dataViewHeader .headerRefreshAnim {
    position: absolute;
    left: 305px;
    width: 32px;
    height: 32px;
}

.dataViewHeader .headerRefresh .headerRefreshImage,
.dataViewHeader .headerRefreshAnim .headerRefreshImage {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: -webkit-image-set(url('assets/sync_16.svg') 1x, url('assets/sync_16.svg') 2x);
    background-size: 16px 16px;
}

.dataViewHeader .headerRefresh._disabled_ .headerRefreshImage,
.dataViewHeader .headerRefreshAnim._disabled_ .headerRefreshImage {
    background-image: -webkit-image-set(url('assets/sync_16_dis.svg') 1x, url('assets/sync_16_dis.svg') 2x);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 16px 16px;
}

.dataViewHeader .headerRefresh:not(._disabled_) ._hover_ {
    background-image: url('assets/sync_16.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
    background-color: var(--symbol-hover-bg-color);
}

.dataViewHeader .headerRefreshAnim .headerRefreshImage {
    -webkit-animation: rotating 1.5s linear infinite;
    animation: rotating 1.5s linear infinite;
}

.designsPane {
    position: absolute;
    overflow: auto;
    transition: height 0.15s linear, top 0.25s linear;
    -webkit-transition: height 0.15s linear, top 0.25s linear;
}

.designsPane.tileView {}

.designsPane.listView {}


/* datalist node */

.designsPane .datalistNode {
    position: absolute;
    cursor: default;
    background-repeat: no-repeat;
    border: 1px solid var(--border-color);
    border-radius: 3px;
}

.designsPane .container {
    opacity: 0;
    transition: left 0.25s ease-out, top 0.25s ease-out, opacity 0.25s ease-out;
    -webkit-transition: left 0.25s ease-out, top 0.25s ease-out, opacity 0.25s ease-out;
}

.designsPane .datalistNode .errorMessage {
    position: absolute;
    min-height: 26px;
    width: 100%;
    bottom: 0px;
    left: 0px;
    z-index: 50;
    line-height: 22px;
    box-sizing: content-box;
    color: #ffffff;
    font-weight: 500;
    background-color: #c0d9ef;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transition: -webkit-transform 0.35s ease-out;
    transition: transform 0.35s ease;
}

.designsPane .datalistNode .errorMessage.showByScale {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}

.designsPane .datalistNode .errorMessage .content {
    padding-left: 7px;
    padding-right: 7px;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: center;
}

.designsPane .datalistNode.inAction {
    cursor: default;
}


/* datalistNode in tile view */

.designsPane.tileView .datalistNode {
    width: 168px;
    height: 168px;
    background-color: #EDEDED;
    background-position: center center;
    background-size: contain;
}

.designsPane .datalistNode.selected {
    border: 1px solid #6693CC;
}

.designsPane.tileView .datalistNode.folderNode {
    background-color: #EDEDED;
}

.designsPane.tileView .datalistNode .folder {
    width: 168px;
    height: 168px;
    background-image: url("assets/folder.png");
    background-position: center 40%;
    background-size: 96px 78px;
    background-color: transparent;
    background-repeat: no-repeat;
}

.designsPane.tileView .datalistNode .folderUp {
    width: 168px;
    height: 168px;
    background-image: url("assets/folder-up.png");
    background-size: 166px 166px;
    background-color: transparent;
}


/* datalistNode in list view */

.designsPane.listView .datalistNode {
    height: 68px;
    width: 348px;
    background-color: var(--main-bg-color);
    background-position: left center;
    background-size: 68px 68px;
}

.designsPane.listView .datalistNode .folder,
.designsPane.listView .datalistNode .folderUp {
    position: absolute;
    top: 0;
    left: 0;
    height: 68px;
    width: 68px;
    border: none;
}

.designsPane.listView .datalistNode .folder {
    background-image: url("assets/folder-list.png");
}

.designsPane.listView .datalistNode .folderUp {
    background-image: url("assets/folder-up-list.png");
}


/* image */

.designsPane .datalistNode img.backgroundImage {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.25s ease-out;
    -webkit-transition: opacity 0.25s ease-out;
}

.designsPane.tileView .datalistNode .container {
    width: 100%;
    height: 100%;
}

.designsPane.tileView .datalistNode div.folder,
.designsPane.tileView .datalistNode div.folderUp,
.designsPane.tileView .datalistNode img.backgroundImage {
    width: 100%;
    height: 100%;
    opacity: 1;
    background-color: #EDEDED;
}

.designsPane.tileView .datalistNode img.backgroundImage.defaultImgBackground {
    content: url('assets/default_node_background@2x.png');
}

.designsPane.listView .datalistNode div.folder,
.designsPane.listView .datalistNode div.folderUp,
.designsPane.listView .datalistNode img.backgroundImage {
    width: 68px;
    height: 68px;
    opacity: 1;
    background-color: #EDEDED;
}

.designsPane.listView .datalistNode img.backgroundImage.defaultImgBackground {
    content: -webkit-image-set(url('assets/default_node_background.png') 1x, url('assets/default_node_background@2x.png') 2x);
}


/* file type */

.designsPane .datalistNode .fileType {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 16px;
    height: 16px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
}

.designsPane .datalistNode.fusionFile .fileType {
    background-image: -webkit-image-set(url('assets/fusion_file.png') 1x, url('assets/fusion_file@2x.png') 2x);
}

.designsPane .datalistNode.f3dFile .fileType {
    background-image: -webkit-image-set(url('assets/f3d.png') 1x, url('assets/f3d@2x.png') 2x);
}

.designsPane .datalistNode.simFile .fileType {
    background-image: -webkit-image-set(url('assets/sim.png') 1x, url('assets/sim@2x.png') 2x);
}

.designsPane .datalistNode.camFile .fileType {
    background-image: -webkit-image-set(url('assets/fusion_file.png') 1x, url('assets/fusion_file@2x.png') 2x);
}

.designsPane .datalistNode.docFile .fileType {
    background-image: -webkit-image-set(url('assets/doc.png') 1x, url('assets/doc@2x.png') 2x);
}

.designsPane .datalistNode.f2tFile .fileType {
    background-image: -webkit-image-set(url('assets/f2t.png') 1x, url('assets/f2t.png') 2x);
}

.designsPane .datalistNode.fbrdFile .fileType {
    background-image: -webkit-image-set(url('assets/fbrd.png') 1x, url('assets/fbrd.png') 2x);
}

.designsPane .datalistNode.fschFile .fileType {
    background-image: -webkit-image-set(url('assets/fsch.png') 1x, url('assets/fsch.png') 2x);
}

.designsPane .datalistNode.fprjFile .fileType {
    background-image: -webkit-image-set(url('assets/fprj.png') 1x, url('assets/fprj.png') 2x);
}

.designsPane .datalistNode.flbrFile .fileType {
    background-image: -webkit-image-set(url('assets/flbr.png') 1x, url('assets/flbr.png') 2x);
}

.designsPane .datalistNode.pdfFile .fileType {
    background-image: -webkit-image-set(url('assets/pdf.png') 1x, url('assets/pdf@2x.png') 2x);
}

.designsPane .datalistNode.iptFile .fileType {
    background-image: -webkit-image-set(url('assets/ipt.png') 1x, url('assets/ipt@2x.png') 2x);
}

.designsPane .datalistNode.excelFile .fileType {
    background-image: -webkit-image-set(url('assets/excel.png') 1x, url('assets/excel@2x.png') 2x);
}

.designsPane .datalistNode.wordFile .fileType {
    background-image: -webkit-image-set(url('assets/word.png') 1x, url('assets/word@2x.png') 2x);
}

.designsPane .datalistNode.pptFile .fileType {
    background-image: -webkit-image-set(url('assets/ppt.png') 1x, url('assets/ppt@2x.png') 2x);
}

.designsPane .datalistNode.imgFile .fileType {
    background-image: -webkit-image-set(url('assets/image.png') 1x, url('assets/image@2x.png') 2x);
}

.designsPane .datalistNode.vidFile .fileType {
    background-image: -webkit-image-set(url('assets/video.png') 1x, url('assets/video.png') 2x);
}

.designsPane .datalistNode.asmFile .fileType {
    background-image: -webkit-image-set(url('assets/iam.png') 1x, url('assets/iam@2x.png') 2x);
}

.designsPane .datalistNode.dwgFile .fileType {
    background-image: -webkit-image-set(url('assets/dwg.png') 1x, url('assets/dwg@2x.png') 2x);
}

.designsPane .datalistNode.dxfFile .fileType {
    background-image: -webkit-image-set(url('assets/dxf.png') 1x, url('assets/dxf@2x.png') 2x);
}

.designsPane .datalistNode.txtFile .fileType {
    background-image: -webkit-image-set(url('assets/txt.png') 1x, url('assets/txt.png') 2x);
}

.designsPane .datalistNode.cadFile .fileType {
    background-image: -webkit-image-set(url('assets/cad.png') 1x, url('assets/cad.png') 2x);
}

.designsPane .datalistNode.sldprtFile .fileType {
    background-image: -webkit-image-set(url('assets/sldprt.png') 1x, url('assets/sldprt@2x.png') 2x);
}

.designsPane .datalistNode.sldasmFile .fileType {
    background-image: -webkit-image-set(url('assets/sldasm.png') 1x, url('assets/sldasm@2x.png') 2x);
}

.designsPane .datalistNode.fssdFile .fileType {
    background-image: -webkit-image-set(url('assets/setup_sheet.png') 1x, url('assets/setup_sheet@2x.png') 2x);
}

.designsPane .datalistNode.fsscFile .fileType {
    background-image: -webkit-image-set(url('assets/setup_sheet_configuration.png') 1x, url('assets/setup_sheet_configuration@2x.png') 2x);
}

.designsPane .datalistNode.folderNode .fileType {
    background-image: -webkit-image-set(url(assets/folder_16.png) 1x, url(assets/folder_16@2x.png) 2x);
    bottom: 5px;
}

.designsPane .datalistNode.folderUp .fileType {
    display: none;
}

.designsPane.listView .datalistNode .fileType {
    top: 5px;
    left: 73px;
}

.designsPane.listView .datalistNode.folderNode .fileType {
    display: none;
}

.hide {
    display: none;
}


/* explicit cache management spinner */

.designsPane .datalistNode .ecmSpinner {
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 16px;
    height: 16px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-image: -webkit-image-set(url(assets/spinner.png) 1x, url(assets/spinner@2x.png) 2x);
    z-index: 5;
    -webkit-animation: rotating 1s linear infinite;
    animation: rotating 1s linear infinite;
}


/* version number */

.designsPane .datalistNode .versionNumber {
    position: absolute;
    right: 5px;
    bottom: 5px;
    z-index: 5;
    line-height: 16px;
    padding-left: 5px;
    padding-right: 10px;
    font-size: 10px;
    color: var(--button-grey-fg-color);
    border: 1px solid var(--button-grey-border-color);
    background-color: var(--button-grey-bg-color);
    border-radius: 2px;
    text-align: left;
    cursor: pointer;
    -webkit-animation: 0.5s ease;
    animation: 0.5s ease;
}


/* Activate / DeActivate control */

.designsPane .datalistNode .capacityButton {
    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    min-width: 84px;
    width: auto;
    left: 84px;
    bottom: 5px;
    line-height: 20px;
    padding-left: 6px;
    padding-right: 14px;
    font-size: 12px;
    z-index: 11;
    background: #EEEEEE;
    border: 1px solid #C3C3C3;
    border-radius: 50px;
    text-align: center;
    cursor: pointer;
    -webkit-animation: 0.5s ease;
    animation: 0.5s ease;
}

.designsPane.tileView .datalistNode .capacityButton {
    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    height: 18px;
    min-width: 84px;
    left: 10px;
    top: 5px;
    background: #EEEEEE;
    border: 1px solid #C3C3C3;
    border-radius: 50px;
    text-align: center;
    cursor: pointer;
    -webkit-animation: 0.5s ease;
    animation: 0.5s ease;
}

.designsPane .datalistNode .capacityButton:hover {
    border: 2px solid rgba(128, 128, 128, 0.25);
}

.designsPane .datalistNode .capacityButton::after {
    position: absolute;
    width: 7px;
    height: 4px;
    right: 4px;
    top: 8px;
    content: " ";
    background: url("assets/triangle.png");
    background-size: 100% 100%;
    float: left;
    background-repeat: no-repeat;
}

.designsPane .datalistNode .capacityButton.inactiveDesign::before {
    position: relative;
    top: 2px;
    left: 1px;
    content: " ";
    padding-left: 4px;
    padding-right: 4px;
    background: url("assets/icon-read-only.svg");
    background-size: 100% 100%;
    width: 16px;
    float: left;
    height: 16px;
    background-repeat: no-repeat;
}

.designsPane .datalistNode .capacityButton.activeDesign::before {
    position: relative;
    top: 2px;
    left: 1px;
    content: " ";
    padding-left: 4px;
    padding-right: 4px;
    background: url("assets/icon-editable.svg");
    background-size: 100% 100%;
    width: 16px;
    float: left;
    height: 16px;
    background-repeat: no-repeat;
}

.designsPane .datalistNode .capacityButton .capacityMenu {
    position: absolute;
    width: auto;
    height: 56px;
    left: 0;
    top: 20px;
    background: #ffffff;
    border: #d2d2d2 1px solid;
    z-index: 6 !important;
    opacity: 0;
    border-radius: 3px;
    color: #484848;
    float: left;
    visibility: hidden;
    -webkit-appearance: none !important;
}

.designsPane .datalistNode .capacityButton .capacityMenu div {
    float: left;
    color: black;
    padding: 4px 4px 2px 4px;
    text-decoration: none;
    width: 140px;
    display: block;
    text-align: left;
    position: relative;
    font-size: 12px;
}

.designsPane .datalistNode .capacityButton .capacityMenu .capacityMenuEditableItem .editableIcon {
    position: relative;
    top: 2px;
    left: 1px;
    content: url("assets/icon-editable.svg");
    padding-left: 2px;
    padding-right: 2px;
    background: transparent;
    background-size: 100% 100%;
    width: 16px;
    float: left;
    height: 16px;
    background-repeat: no-repeat;
}

.designsPane .datalistNode .capacityButton .capacityMenu .capacityMenuEditableItem.unchecked::before {
    position: relative;
    content: " ";
    align-items: center;
    padding-left: 2px;
    padding-right: 2px;
    background: transparent;
    background-size: 100% 100%;
    width: 8.26px;
    float: left;
    height: 6.81px;
    background-repeat: no-repeat;
}

.designsPane .datalistNode .capacityButton .capacityMenu .capacityMenuEditableItem.checked::before {
    position: relative;
    left: 1px;
    content: url("assets/icon-checkmark.svg");
    align-items: center;
    padding-left: 2px;
    padding-right: 2px;
    background: transparent;
    background-size: 100% 100%;
    width: 8.26px;
    float: left;
    height: 6.81px;
    background-repeat: no-repeat;
}

.designsPane .datalistNode .capacityButton .capacityMenu .capacityMenuEditableItem.checked {
    font-weight: bold;
}

.designsPane .datalistNode .capacityButton .capacityMenu .capacityMenuReadOnlyItem .readonlyIcon {
    position: relative;
    top: 2px;
    left: 1px;
    content: url("assets/icon-read-only.svg");
    padding-left: 2px;
    padding-right: 2px;
    background: transparent;
    background-size: 100% 100%;
    width: 16px;
    float: left;
    height: 16px;
    background-repeat: no-repeat;
}

.designsPane .datalistNode .capacityButton .capacityMenu .capacityMenuReadOnlyItem.unchecked::before {
    position: relative;
    left: 1px;
    content: " ";
    align-items: center;
    padding-left: 2px;
    padding-right: 2px;
    background: transparent;
    background-size: 100% 100%;
    width: 8.26px;
    float: left;
    height: 6.81px;
    background-repeat: no-repeat;
}

.designsPane .datalistNode .capacityButton .capacityMenu .capacityMenuReadOnlyItem.checked::before {
    position: relative;
    left: 1px;
    content: url("assets/icon-checkmark.svg");
    align-items: center;
    padding-left: 2px;
    padding-right: 2px;
    background: transparent;
    background-size: 100% 100%;
    width: 8.26px;
    float: left;
    height: 6.81px;
    background-repeat: no-repeat;
}

.designsPane .datalistNode .capacityButton .capacityMenu .capacityMenuReadOnlyItem.checked {
    font-weight: bold;
}


/* Show Capacity dropdown view*/

.designsPane .datalistNode .capacityButton .capacityMenu.show {
    display: block;
    opacity: 1;
    visibility: visible;
}


/* Control Capacity button disabled view*/

.designsPane .datalistNode .capacityButton.disabled {
    cursor: default;
    pointer-events: none;
    background-color: transparent;
}


/* Control Capacity button disabled view when capacity reached the limit*/

.designsPane .datalistNode .capacityButton.inactiveDesign.disabled {
    background-color: rgba(231, 231, 231, 0.5);
    color: rgba(0, 0, 0, 0.5);
    pointer-events: auto;
    border: none;
}

.designsPane .datalistNode .capacityHubIcon {
    position: absolute;
    display: flex;
    right: 5px;
    top: 5px;
    z-index: 11;
}

.designsPane .datalistNode .capacityHubIcon .personalHubIcon {
    position: relative;
    content: url("assets/icon-personal-hub.svg");
    background: #FFFFFF;
    background-size: 100% 100%;
    width: 18px;
    height: 18px;
    opacity: 0.95;
    border-radius: 1px;
    background-repeat: no-repeat;
}

.designsPane .datalistNode .capacityHubIcon .teamHubIcon {
    position: relative;
    content: url("assets/icon-team-hub.svg");
    background: #FFFFFF;
    background-size: 100% 100%;
    width: 18px;
    height: 18px;
    opacity: 0.95;
    border-radius: 1px;
    background-repeat: no-repeat;
}


/* Control Capacity button disabled tootltip view when capacity reached the limit*/

.designsPane .datalistNode .capacityButton.inactiveDesign.disabled .capacityFullToolTipText {
    position: absolute;
    visibility: hidden;
    background: #444444;
    color: #dbdbdb;
    border-radius: 3px;
    padding: 4px;
    font-size: 12px;
    text-align: left;
    width: 150px;
    height: auto;
    white-space: normal;
    z-index: 12;
    top: 140%;
    left: 0%;
}

.designsPane .datalistNode .capacityButton.inactiveDesign.disabled .capacityFullToolTipText::after {
    content: " ";
    position: absolute;
    bottom: 100%;
    /* At the top of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #444444 transparent;
}

.designsPane .datalistNode .capacityButton:hover.inactiveDesign.disabled .capacityFullToolTipText {
    visibility: visible;
}

.designsPane .datalistNode .capacityHubIcon .capacityToolTipText {
    position: absolute;
    visibility: hidden;
    background: #444444;
    color: #dbdbdb;
    border-radius: 3px;
    padding: 6px;
    font-size: 12px;
    text-align: left;
    width: 150px;
    height: auto;
    white-space: normal;
    z-index: 12;
    top: 150%;
    right: 0%;
}

.designsPane .datalistNode .capacityHubIcon .capacityToolTipText::after {
    content: " ";
    position: absolute;
    bottom: 100%;
    /* At the top of the tooltip */
    left: 92%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #444444 transparent;
}

.designsPane .datalistNode .capacityHubIcon:hover .capacityToolTipText {
    visibility: visible;
}


/* milestone version */

.designsPane .datalistNode .milestone,
.designsPane .datalistNode .revisionMilestone {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 5px;
    right: 5px;
}


/* milestone version - tip version is a milestone */

.designsPane .datalistNode .milestone.latest {
    background-image: url("assets/Tip Flag.svg");
}


/* milestone version - milestone was added to a non-tip version */

.designsPane .datalistNode .milestone.old {
    background-image: url("assets/Non-tip Flag.svg");
}

.designsPane .datalistNode .revisionMilestone.latest {
    background-image: url("assets/revision_milestone_16.png");
}

.designsPane .datalistNode .revisionMilestone.old {
    background-image: url("assets/revision_milestone_historical.svg");
}


/* released indicator */

.designsPane .datalistNode .releasedVersion {
    position: absolute;
    left: 73px;
    bottom: 5px;
    z-index: 5;
    line-height: 16px;
    padding-left: 6px;
    padding-right: 6px;
    text-align: center;
    font-size: 11px;
    color: #008080;
    background-color: #FFFFFF;
    border-radius: 2px;
    border-width: 2px;
    border-style: solid;
    border-color: #008080;
}

.designsPane .datalistNode .versionNumber::after {
    position: absolute;
    top: 6px;
    right: 1px;
    content: " ";
    background: url("assets/triangle.png");
    background-size: 100% 100%;
    width: 7px;
    float: left;
    height: 5px;
    background-repeat: no-repeat;
}


/* .designsPane .datalistNode .versionNumber:hover {
    border: var(--button-grey-border-color);
}

.designsPane .datalistNode .versionNumber.selected {
    box-shadow: 0 0 3px 1px rgba(0, 173, 255, .54);
} */


/* version number CONTENT_NOT_AVAILABLE */

.designsPane .datalistNode .CNA {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 26px;
    height: 26px;
    background-color: #FFFFFF;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-image: -webkit-image-set(url(assets/info_cna_16.png) 1x, url(assets/info_16@2x.png) 2x);
    z-index: 5;
}

.designsPane.listView .datalistNode .CNAtooltip {
    right: 5px;
    top: 100%;
}

.designsPane.tileView .datalistNode .CNAtooltip {
    right: 5px;
    top: 100%;
    white-space: pre-wrap;
    min-width: 110px;
    max-width: 160px;
    transform: translate(0, 3px);
    -webkit-transform: translate(0, 3px);
}

.designsPane .datalistNode.folderNode .versionNumber,
.designsPane .datalistNode.folderNode .CNA {
    display: none;
}

@keyframes rotating {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes rotating {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


/* three dots */

.designsPane .datalistNode .xrefOutOfDate {
    display: none;
    position: absolute;
    right: 35px;
    bottom: 5px;
    width: 16px;
    height: 16px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-image: -webkit-image-set(url(assets/out_of_date_16.png) 1x, url(assets/out_of_date_16@2x.png) 2x);
    z-index: 5;
}

.designsPane .datalistNode .xrefOutOfDate ._hover_ {
    background-image: -webkit-image-set(url(assets/out_of_date_16.png) 1x, url(assets/out_of_date_16@2x.png) 2x);
    background-color: transparent;
    background-size: 16px 16px;
    /* icon is 16x16, with 1px top and bottom transparent area. This gives graphics of requested 14px in height */
    background-repeat: no-repeat;
    background-position: center;
}

.designsPane .datalistNode.folderNode .xrefOutOfDate {
    display: none;
}


/* description */

.designsPane.tileView .descriptionFrame {
    position: absolute;
    width: 100%;
    height: 26px;
    bottom: 0;
    background: #ffffff;
    opacity: 0.95;
    color: #646464;
}

.designsPane.tileView .descriptionFrame.offlineMode {
    height: 46px;
}

.designsPane.tileView .descriptionFrame.offlineMode.supportBranching {
    height: 62px;
}

.designsPane.tileView .descriptionFrame.offlineMode .branchName {
    text-overflow: ellipsis;
    font-size: 12px;
    padding: 5px 26px 0px 42px;
    white-space: nowrap;
    overflow: hidden;
}

.designsPane.tileView .descriptionFrame.offlineMode .branchColor {
    position: absolute;
    width: 12px;
    height: 12px;
    bottom: 4px;
    left: 26px;
    border-radius: 50%;
    border-width: 1px;
    border-style: solid;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.designsPane.listView .descriptionFrame {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}


/* description text */

.designsPane.tileView .datalistNode .descriptionFrame .descriptionText {
    text-overflow: ellipsis;
    font-size: 12px;
    padding: 5px 40px 0px 26px;
    top: 0px;
    white-space: nowrap;
    overflow: hidden;
}

.designsPane.listView .datalistNode .descriptionFrame .descriptionText {
    margin: 5px 5px 0 94px;
    line-height: 16px;
    font-family: Arial;
    font-size: 13px;
    font-weight: bold;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: var(--main-fg-color);
}

.designsPane.tileView .datalistNode.folderNode .descriptionFrame .descriptionText {
    padding-top: 5px;
}

.designsPane.listView .datalistNode.folderNode .descriptionFrame .descriptionText,
.designsPane.listView .datalistNode.folderNodeUp .descriptionFrame .descriptionText {
    margin: 5px 0 0 73px;
}


/* description text details*/

.designsPane.tileView .datalistNode .descriptionFrame .descriptionTextDetail {
    display: none;
}

.designsPane.listView .datalistNode.folderNode .descriptionTextDetail,
.designsPane.listView .datalistNode.folderNodeUp .descriptionTextDetail,
.designsPane.listView .datalistNode.uploadItem .descriptionTextDetail {
    display: none;
}

.designsPane.listView .datalistNode .descriptionFrame .descContainer {
    margin: 5px 5px 0 94px;
    height: 21px;
    line-height: 21px;
    overflow: hidden;
    display: flex;
    display: -webkit-flex;
    flex-direction: row;
    -webkit-flex-direction: row;
    justify-content: flex-start;
    -webkit-justify-content: flex-start;
    align-items: center;
    -webkit-align-items: center;
}

.designsPane.listView .datalistNode .descriptionFrame .descContainer .searchItemTextDetail {
    display: inline-block;
    font-family: Arial;
    font-size: 12px;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #979797;
    /*height: 21px;*/
    white-space: nowrap;
}

.designsPane.listView .datalistNode .descriptionFrame .descContainer .searchItemTextDetail.rebnd {
    margin-left: 5px;
}

.designsPane.listView .datalistNode .descriptionFrame .descContainer .branchColorContainer {
    margin-left: 1px;
    width: 12px;
    line-height: 21px;
}

.designsPane.listView .datalistNode .descriptionFrame .descContainer .branchColor {
    width: 12px;
    height: 12px;
    top: 0px;
    bottom: 0px;
    left: 0px;
    margin: auto;
    border-radius: 50%;
    border-width: 1px;
    border-style: solid;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.designsPane.listView .datalistNode .descriptionFrame .descriptionTextDetail {
    margin: 5px 5px 0 73px;
    font-family: Arial;
    font-size: 12px;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #979797;
    height: 21px;
    white-space: nowrap;
}

.designsPane.listView .datalistNode .descriptionFrame .descriptionTextDetail.search {
    margin: 0px 5px 0 94px;
}

.designsPane .descriptionFrame .capacityUnSavedFileTooltip {
    visibility: hidden;
}

.designsPane .descriptionFrame:hover .capacityUnSavedFileTooltip {
    position: absolute;
    visibility: visible;
    bottom: 50%;
    left: 50%;
    background: #444444;
    color: #dbdbdb;
    border-radius: 5px;
    padding: 10px;
    font-size: 11px;
    z-index: 12;
}


/* next set button */

.designsPane .nextSetBtn {
    position: absolute;
    border: #c6c6c6 1px solid;
    color: #444444;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    cursor: default;
    line-height: 27px;
}

.designsPane .marker {
    position: relative;
    margin: 9px 0px 20px 0px;
    background-color: #dbdbdb;
    height: 1px;
    width: 348px;
}


/* In use by on design */

.designsPane .designInUseBy {
    white-space: pre;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 26px;
}


/* In use by on the tile view */

.designsPane.tileView .designInUseBy {
    position: absolute;
    padding: 5px 5px 5px 0;
    top: 0px;
    color: #CCCCCC;
    font-size: 11px;
}


/* In use by on the list view */

.designsPane.listView .designInUseBy {
    position: absolute;
    bottom: 0px;
    padding-left: 68px;
    padding-right: 36px;
    font-size: 11px;
    color: #646464;
}

.designsPane .truncatedList {
    color: #05A7DF;
}

.inUseByTooltip {
    background: #444444;
    color: #dbdbdb;
    border-radius: 5px;
    padding: 10px;
    font-size: 11px;
    z-index: 6;
}


/*Added for inUsedByIcons main node*/

.designsPane .inUseByIcons {
    display: flex;
    white-space: pre;
    align-items: center;
    box-sizing: border-box;
    height: 26px;
}


/* In use by on the tile view */

.designsPane.tileView .inUseByIcons {
    position: absolute;
    padding-top: 5px;
    padding-left: 5px;
}


/* In use by on the list view */

.designsPane.listView .inUseByIcons {
    position: absolute;
    bottom: 0px;
    padding-left: 5px;
    padding-right: 90px;
}


/*Added for inUsedByIcons main node*/

.designsPane .inUseByIcons .collboratorIconGroup {
    display: flex;
}


/* image node for displaying circular avtar/icon */

.designsPane .inUseByIcons .usebByIconImg-circle {
    position: relative;
    top: 0;
    left: 0;
    opacity: 0;
    margin: 0 0 0 0;
    transition: opacity 0.25s ease-out;
    -webkit-transition: opacity 0.25s ease-out;
}


/* icon image node in tile view */

.designsPane.tileView .inUseByIcons .usebByIconImg-circle {
    width: 18px;
    height: 18px;
    opacity: 1;
}


/* icon image node in list view */

.designsPane.listView .inUseByIcons .usebByIconImg-circle {
    width: 18px;
    height: 18px;
    opacity: 1;
}


/*
 * Copyright 2009 The Closure Library Authors. All Rights Reserved.
 *
 * Use of this source code is governed by the Apache License, Version 2.0.
 * See the COPYING file for details.
 */


/*
 * Standard styling for menus created by goog.ui.MenuRenderer.
 *
 * @author attila@google.com (Attila Bodis)
 */

.goog-menu {
    background: #fff;
    border-color: #ccc #666 #666 #ccc;
    border-style: solid;
    border-width: 1px;
    cursor: default;
    font: normal 13px Arial, sans-serif;
    margin: 0;
    outline: none;
    padding: 4px 0;
    position: absolute;
    z-index: 20000;
    /* Arbitrary, but some apps depend on it... */
}


/*
 * Copyright 2009 The Closure Library Authors. All Rights Reserved.
 *
 * Use of this source code is governed by the Apache License, Version 2.0.
 * See the COPYING file for details.
 */


/*
 * Standard styling for menus created by goog.ui.MenuItemRenderer.
 *
 * @author attila@google.com (Attila Bodis)
 */


/**
 * State: resting.
 *
 * NOTE(mleibman,chrishenry):
 * The RTL support in Closure is provided via two mechanisms -- "rtl" CSS
 * classes and BiDi flipping done by the CSS compiler.  Closure supports RTL
 * with or without the use of the CSS compiler.  In order for them not
 * to conflict with each other, the "rtl" CSS classes need to have the @noflip
 * annotation.  The non-rtl counterparts should ideally have them as well, but,
 * since .goog-menuitem existed without .goog-menuitem-rtl for so long before
 * being added, there is a risk of people having templates where they are not
 * rendering the .goog-menuitem-rtl class when in RTL and instead rely solely
 * on the BiDi flipping by the CSS compiler.  That's why we're not adding the
 * @noflip to .goog-menuitem.
 */

.goog-menuitem {
    color: #000;
    font: normal 13px Arial, sans-serif;
    list-style: none;
    margin: 0;
    /* 28px on the left for icon or checkbox; 7em on the right for shortcut. */
    padding: 4px 7em 4px 28px;
    white-space: nowrap;
}


/* BiDi override for the resting state. */


/* @noflip */

.goog-menuitem.goog-menuitem-rtl {
    /* Flip left/right padding for BiDi. */
    padding-left: 7em;
    padding-right: 28px;
}


/* If a menu doesn't have checkable items or items with icons, remove padding. */

.goog-menu-nocheckbox .goog-menuitem,
.goog-menu-noicon .goog-menuitem {
    padding-left: 12px;
}


/*
 * If a menu doesn't have items with shortcuts, leave just enough room for
 * submenu arrows, if they are rendered.
 */

.goog-menu-noaccel .goog-menuitem {
    padding-right: 20px;
}

.goog-menuitem-content {
    color: #000;
    font: normal 13px Arial, sans-serif;
}


/* State: disabled. */

.goog-menuitem-disabled .goog-menuitem-accel,
.goog-menuitem-disabled .goog-menuitem-content {
    color: #ccc !important;
}

.goog-menuitem-disabled .goog-menuitem-icon {
    opacity: 0.3;
    -moz-opacity: 0.3;
    filter: alpha(opacity=30);
}


/* State: hover. */

.goog-menuitem-highlight,
.goog-menuitem-hover {
    background-color: #d6e9f8;
    /* Use an explicit top and bottom border so that the selection is visible
   * in high contrast mode. */
    border-color: #d6e9f8;
    border-style: dotted;
    border-width: 1px 0;
    padding-bottom: 3px;
    padding-top: 3px;
}


/* State: selected/checked. */

.goog-menuitem-checkbox,
.goog-menuitem-icon {
    background-repeat: no-repeat;
    height: 16px;
    left: 6px;
    position: absolute;
    right: auto;
    vertical-align: middle;
    width: 16px;
}


/* BiDi override for the selected/checked state. */


/* @noflip */

.goog-menuitem-rtl .goog-menuitem-checkbox,
.goog-menuitem-rtl .goog-menuitem-icon {
    /* Flip left/right positioning. */
    left: auto;
    right: 6px;
}

.goog-option-selected .goog-menuitem-checkbox,
.goog-option-selected .goog-menuitem-icon {
    /* Client apps may override the URL at which they serve the sprite. */
    background: url(//ssl.gstatic.com/editor/editortoolbar.png) no-repeat -512px 0;
}


/* Keyboard shortcut ("accelerator") style. */

.goog-menuitem-accel {
    color: #999;
    /* Keyboard shortcuts are untranslated; always left-to-right. */
    /* @noflip */
    direction: ltr;
    left: auto;
    padding: 0 6px;
    position: absolute;
    right: 0;
    text-align: right;
}


/* BiDi override for shortcut style. */


/* @noflip */

.goog-menuitem-rtl .goog-menuitem-accel {
    /* Flip left/right positioning and text alignment. */
    left: 0;
    right: auto;
    text-align: left;
}


/* Mnemonic styles. */

.goog-menuitem-mnemonic-hint {
    text-decoration: underline;
}

.goog-menuitem-mnemonic-separator {
    color: #999;
    font-size: 12px;
    padding-left: 4px;
}


/*
 * Copyright 2009 The Closure Library Authors. All Rights Reserved.
 *
 * Use of this source code is governed by the Apache License, Version 2.0.
 * See the COPYING file for details.
 */


/*
 * Standard styling for menus created by goog.ui.MenuSeparatorRenderer.
 *
 * @author attila@google.com (Attila Bodis)
 */

.goog-menuseparator {
    border-top: 1px solid #ccc;
    margin: 4px 0;
    padding: 0;
}

.neutronFiles {
    position: absolute;
    overflow: hidden;
    font-size: 12px;
}

.neutronFiles .verticalSeparator.left {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    background: #757575;
}

.neutronFiles .filesContainer {
    position: absolute;
    top: 0;
    left: 1px;
    overflow: auto;
}


/* file */

.neutronFiles .neutronFile {
    position: relative;
    cursor: pointer;
    color: #000000;
    height: 20px;
    line-height: 20px;
    padding: 4px 5px 4px 30px;
    border-bottom: #757575 1px solid;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.neutronFiles .neutronFile:hover {
    background: #b7b7b7;
}

.neutronFiles .neutronFile.active {
    background: #757575;
    color: #ffffff;
}


/* file close btn */

.neutronFiles .neutronFile .closeBtn {
    position: absolute;
    cursor: pointer;
    left: 10px;
    top: 9px;
    width: 10px;
    height: 10px;
    background: url("assets/close_dark_gray.png") no-repeat center center;
    background-size: contain;
}

.neutronFiles .neutronFile.active .closeBtn {
    background: url("assets/close_white.png") no-repeat center center;
}

.peoplePane {
    position: relative;
    overflow: auto;
    top: 15px;
}


/* list item */

.peoplePane .listItem {
    border: none;
}

.peoplePane .peopleListItem {
    padding: 7px 7px 7px 49px;
    position: relative;
    min-width: 292px;
    min-height: 32px;
    font-size: 12px;
    line-height: 18px;
    color: rgb(100, 100, 100);
}

.peoplePane .peopleListItem .peopleAvatar {
    position: absolute;
    top: 7px;
    left: 7px;
    width: 32px;
    height: 32px;
    border-radius: 16px;
    background-color: #eeeeee;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    line-height: 32px;
    color: white;
    text-align: center;
}

.peoplePane .peopleListItem .defaultIcon {
    background-image: url("assets/defaultAvatar.png");
}

.peoplePane .peopleListItem .peopleModerator {
    background: -webkit-image-set(url(assets/moderator_16.png) 1x, url(assets/moderator_16@2x.png) 2x) no-repeat left center;
    padding: 0 0 0 20px;
}

.peoplePane .peopleListItem .fullName {
    font-weight: bold;
}

.peoplePane .peopleListItem .primaryEmail {
    color: #42A8E1;
    max-width: 260px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.peoplePane .peopleListItem .primaryEmail:hover {
    color: #2A6496;
    text-decoration: underline;
    cursor: default;
}

.peoplePane .bottomMessage {
    background-color: #cccccc;
    color: #ffffff;
    line-height: 22px;
    font-size: 12px;
    font-weight: bold;
    padding-left: 8px;
    margin-top: 8px;
}

#projectDetailData {
    position: absolute;
}

#projectDetailData .actionButton {
    position: absolute;
    transition: top 0.25s linear;
    -webkit-transition: top 0.25s linear;
}


/* BUTTONS ON LEFT */

#projectDetailData .actionButton.createBranch {
    background-image: url("assets/create branch.svg");
    background-repeat: no-repeat;
    background-position: center center;
}

#projectDetailData .actionButton.createBranch._disabled_ {
    background-image: url("assets/create branch - disabled.svg");
    background-repeat: no-repeat;
    background-position: center center;
}

#projectDetailData .actionButton.createBranch:not(._disabled_) ._hover_ {
    background-image: url("assets/create branch - hover.svg");
    background-repeat: no-repeat;
    background-position: center center;
}

#projectDetailData .actionButton.createMilestone {
    background-image: url("assets/create milestone.svg");
    background-repeat: no-repeat;
    background-position: center center;
}

#projectDetailData .actionButton.createMilestone._disabled_ {
    background-image: url("assets/create milestone - disabled.svg");
    background-repeat: no-repeat;
    background-position: center center;
}

#projectDetailData .actionButton.createMilestone:not(._disabled_) ._hover_ {
    background-image: url("assets/create milestone - hover.svg");
    background-repeat: no-repeat;
    background-position: center center;
}

#projectDetailData .actionButton.pull {
    background-image: url("assets/pull.svg");
    background-repeat: no-repeat;
    background-position: center center;
}

#projectDetailData .actionButton.pull._disabled_ {
    background-image: url("assets/pull - disabled.svg");
    background-repeat: no-repeat;
    background-position: center center;
}

#projectDetailData .actionButton.pull:not(._disabled_) ._hover_ {
    background-image: url("assets/pull - hover.svg");
    background-repeat: no-repeat;
    background-position: center center;
}

#projectDetailData .actionButton.push {
    background-image: url("assets/push.svg");
    background-repeat: no-repeat;
    background-position: center center;
}

#projectDetailData .actionButton.push._disabled_ {
    background-image: url("assets/push - disabled.svg");
    background-repeat: no-repeat;
    background-position: center center;
}

#projectDetailData .actionButton.push:not(._disabled_) ._hover_ {
    background-image: url("assets/push - hover.svg");
    background-repeat: no-repeat;
    background-position: center center;
}

#projectDetailData .actionButton.projectHistory {
    background-image: url("assets/history.svg");
    background-repeat: no-repeat;
    background-position: center center;
}

#projectDetailData .actionButton.projectHistory._disabled_ {
    opacity: 0.5
}

#projectDetailData .actionButton.projectHistory:not(._disabled_) ._hover_ {
    background-image: url("assets/history - hover.svg");
    background-repeat: no-repeat;
    background-position: center center;
}


/* BUTTONS ON RIGHT */

#projectDetailData .actionButton.settings {
    background-image: -webkit-image-set(url(assets/settings_16.png) 1x, url(assets/settings_16@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: center center;
}

#projectDetailData .actionButton.settings ._hover_ {
    background-image: -webkit-image-set(url(assets/settings_16_hover.png) 1x, url(assets/settings_16_hover@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: center center;
}

#projectDetailData .actionButton.newFolder {
    background-color: var(--button-grey-bg-color);
    border: 1px solid var(--button-grey-border-color);
    border-radius: 3px;
    height: 28px;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#projectDetailData .actionButton.newFolder .textData {
    color: var(--button-grey-fg-color);
    border-color: var(--button-grey-border-color);
    font-family: Arial;
    font-weight: normal;
    font-size: 12px;
    line-height: 28px;
}


/* #projectDetailData .actionButton.newFolder:not(._disabled_):hover {
    background-color: #fafafa;
} */

#projectDetailData .actionButton.newFolder._disabled_ {
    background-color: var(--button-grey-disabled-bg-color);
    color: var(--button-grey-disabled-fg-color);
    border-color: var(--button-grey-disabled-border-color);
}

#projectDetailData .actionButton.newFolder._disabled_ .textData {
    color: var(--button-grey-disabled-fg-color);
}

#projectDetailData .actionButton.upload {
    background-color: var(--button-blue-bg-color);
    color: var(--button-blue-fg-color);
    border-color: var(--button-blue-border-color);
    border-radius: 3px;
    height: 28px;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}


/* #projectDetailData .actionButton.upload:hover {
    background-color: #70A2C6;
} */

#projectDetailData .actionButton.upload._disabled_ {
    background-color: var(--button-blue-disabled-bg-color);
    color: var(--button-blue-disabled-fg-color);
    border-color: var(--button-blue-disabled-border-color);
}

#projectDetailData .actionButton.upload .textData {
    color: var(--button-blue-fg-color);
    font-family: Arial;
    font-weight: bold;
    font-size: 12px;
    line-height: 28px;
}

#projectDetailData .actionButton.recover {
    border: 1px solid #979797;
    border-radius: 3px;
    height: 28px;
    width: 82px;
    padding: 0 10px;
    background-image: -webkit-image-set(url(assets/recovery.png) 1x, url(assets/recovery@2x.png) 2x);
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#projectDetailData .actionButton.recover.progress {
    background-image: none;
}

#projectDetailData .actionButton.openOnWeb {
    background-image: url(assets/open_on_web_16.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 16px 16px;
}

#projectDetailData .actionButton.openOnWeb:hover {
    background-image: url(assets/open_on_web_16_hover.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 16px 16px;
}

@keyframes rotating {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

#projectDetailData .actionButton.recover.progress:before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: 3px;
    left: 31px;
    background-image: url(assets/spinner.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 16px 16px;
    animation: rotating 1.5s linear infinite;
    -webkit-animation: rotating 1.5s linear infinite;
}

#projectDetailData .actionButton.recover.tooltipParent .tooltip.left10 {
    left: -10px;
}

#projectDetailData .actionButton.recover.tooltipParent .tooltip.left10.bottom {
    transform: translate(0, 6px);
    -webkit-transform: translate(0, 6px);
}

#projectDetailData .actionButton.recover:not(._disabled_):hover {
    background-color: #fafafa;
}

#projectDetailPeople {
    position: absolute;
}

.projectsPane {
    position: absolute;
    overflow: hidden;
}

.projectsPane .closeButton {
    position: absolute;
    background-image: -webkit-image-set(url('assets/close_normal_10.png') 1x, url('assets/close_normal_10_@2x.png') 2x);
    background-repeat: no-repeat;
    background-position: center center;
}

.projectsPane .closeButton ._hover_ {
    background-image: -webkit-image-set(url('assets/close_hover_10.png') 1x, url('assets/close_hover_10_@2x.png') 2x);
    background-repeat: no-repeat;
    background-position: center center;
}

.projectsPane .searchButton {
    position: absolute;
    background-image: -webkit-image-set(url('assets/search_16.png') 1x, url('assets/search_16@2x.png') 2x);
    background-repeat: no-repeat;
    background-position: center center;
}

.projectsPane .searchButton._disabled_ {
    position: absolute;
    background-image: -webkit-image-set(url('assets/search_16_dis.png') 1x, url('assets/search_16_dis@2x.png') 2x);
    background-repeat: no-repeat;
    background-position: center center;
}

.projectsPane .searchButton:not(._disabled_) ._hover_ {
    background-image: -webkit-image-set(url('assets/search_16_hover.png') 1x, url('assets/search_16_hover@2x.png') 2x);
    background-repeat: no-repeat;
    background-position: center center;
}

.projectsPane .refresh,
.projectsPane .refreshAnim {
    position: absolute;
}

.projectsPane .refresh .refreshImage,
.projectsPane .refreshAnim .refreshImage {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: -webkit-image-set(url('assets/refresh_16.png') 1x, url('assets/refresh_16@2x.png') 2x);
}

.projectsPane .refresh._disabled_ .refreshImage,
.projectsPane .refreshAnim._disabled_ .refreshImage {
    background-image: -webkit-image-set(url('assets/refresh_16_dis.png') 1x, url('assets/refresh_16_dis@2x.png') 2x);
    background-repeat: no-repeat;
    background-position: center center;
}

.projectsPane .refresh:not(._disabled_) ._hover_ {
    background-image: -webkit-image-set(url('assets/refresh_16_hover.png') 1x, url('assets/refresh_16_hover@2x.png') 2x);
    background-repeat: no-repeat;
    background-position: center center;
}

.projectsPane .refreshAnim .refreshImage {
    -webkit-animation: rotating 1.5s linear infinite;
    animation: rotating 1.5s linear infinite;
}

@keyframes rotating {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes rotating {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.projectsPane .backToLast {
    position: absolute;
}

.projectsPane .backToLast .textData {
    font-size: 0.7em;
    color: var(--outer-fg-color);
}

.projectsPane .backToLast:hover .textData {
    text-decoration: underline;
}

.projectsPane .title {
    position: absolute;
    font-size: 24px;
    color: rgb(100, 100, 100);
    font-weight: normal;
    cursor: default;
    white-space: nowrap;
}

.projectsPane .title:not(._disabled_):hover {
    text-decoration: underline;
}

.projectsPane .title .textData {
    display: block;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}


/* list item */

.projectsPane .projectListItem {
    padding: 7px 7px 7px 49px;
    position: relative;
    min-height: 52px;
    min-width: 290px;
    font-size: 12px;
    color: #C0C0C6;
}

.projectsPane .listItem .projectListItem>.projectInfoTip {
    word-wrap: break-word;
    padding-right: 22px;
    display: none;
}

.projectsPane .projectListItem>.itemGlyph.join:hover+.projectInfoTip {
    display: inline;
}


/* item selected */

.projectsPane .listItem.selected .projectListItem>.projectInfoTip {
    display: inline;
}

.projectsPane .listItem.selected .projectListItem>.itemGlyph.join .joinimg {
    display: none;
}

.projectsPane .listItem.selected .projectListItem>.itemGlyph.join .glyphText {
    display: inline-block;
}

.projectsPane .projectListItem.needPunchOut>.punchOutButton {
    cursor: pointer;
    min-width: 80px;
    padding: 0 7px 0 7px;
    line-height: 28px;
    font-size: 12px;
    color: blue;
    background: transparent;
    border-radius: 4px;
    display: block;
}

.projectsPane .projectListItem.needPunchOut>.punchOutButton:hover {
    cursor: pointer;
    color: darkcyan;
    background: darkkhaki;
    border-radius: 4px;
    display: block;
}

.projectsPane .projectListItem.closeNoAccess {
    background: lightgrey;
}

.projectsPane .projectListItem.openAccess {
    background: lightgrey;
}


/* list item */

.projectsPane .projectListItem span.thelink {
    text-decoration: underline;
    color: var(--link-fg-color);
    cursor: default;
}

.projectsPane .projectListItem.corrupted {
    background: url("assets/alert_icon_orange.png") no-repeat right top;
    background-size: 12px;
}

.projectsPane .projectListItem .projectThumbnail {
    position: absolute;
    top: 7px;
    left: 7px;
    width: 32px;
    height: 32px;
    border-radius: 3px;
    background-color: #eeeeee;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.projectsPane .projectListItem:hover .itemGlyph.pin {
    display: inline-block;
}

.projectsPane .projectListItem .projectThumbnail.recent {
    background-image: -webkit-image-set(url('assets/recent_32.png') 1x, url('assets/recent_32@2x.png') 2x);
}

.projectsPane .projectListItem .projectThumbnail.newproj {
    background-image: -webkit-image-set(url('assets/new_proj_32.png') 1x, url('assets/new_proj_32@2x.png') 2x);
}

.projectsPane .projectListItem .projectThumbnail.active {
    background-image: -webkit-image-set(url('assets/recent_32.png') 1x, url('assets/recent_32@2x.png') 2x);
}

.projectsPane .projectListItem .projectThumbnail.editable {
    background-image: -webkit-image-set(url('assets/editable_32.png') 1x, url('assets/editable_32@2x.png') 2x);
}

.projectsPane .projectListItem .projectName {
    position: relative;
    font-weight: bold;
    padding: 0 0 9px 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin-right: 29px;
}

.projectsPane .projectListItem .projectDescription {
    position: relative;
    overflow: auto;
    word-wrap: break-word;
    padding-right: 22px;
}

.projectsPane .projectListItem .f {
    background-color: #FFF99A;
}

.projectsPane .projectListItem .projectReason span.thelink {
    text-decoration: underline;
    color: var(--link-fg-color);
    cursor: default;
    word-wrap: break-word;
    padding-right: 0;
}


/*.projectsPane .projectListItem .projectReason span.thelink{*/


/*padding-right: 0;*/


/*}*/


/* dataViewToolbar */

.dataViewToolbar {
    position: absolute;
    font-size: 12px;
    width: 348px;
    height: 32px;
    background: #ffffff;
    border-radius: 3px;
}

.dataViewToolbar .toolbarButton {
    position: absolute;
    width: 20px;
    /* this will drive the size of the hoover-highlight */
    height: 20px;
    top: 6px;
    /* toolbar has height 32, as our height is 20, we have (32-20) / 2 = 6 */
    cursor: default;
}

.dataViewToolbar .toolbarButton.tileBtn {
    background-image: -webkit-image-set(url(assets/grid_view_16_inactive.png) 1x, url(assets/grid_view_16_inactive@2x.png) 2x);
    background-color: transparent;
    background-size: 16px 16px;
    /* icon is 16x16, with 1px top and bottom transparent area. This gives graphics of requested 14px in height */
    background-repeat: no-repeat;
    background-position: center;
}

.dataViewToolbar .toolbarButton.tileBtn ._hover_ {
    background-image: -webkit-image-set(url(assets/grid_view_16_hover.png) 1x, url(assets/grid_view_16_hover@2x.png) 2x);
    background-color: transparent;
    background-size: 16px 16px;
    /* icon is 16x16, with 1px top and bottom transparent area. This gives graphics of requested 14px in height */
    background-repeat: no-repeat;
    background-position: center;
}

.dataViewToolbar .toolbarButton.tileBtn.select {
    background-image: -webkit-image-set(url(assets/grid_view_16.png) 1x, url(assets/grid_view_16@2x.png) 2x);
    background-color: transparent;
    background-size: 16px 16px;
    /* icon is 16x16, with 1px top and bottom transparent area. This gives graphics of requested 14px in height */
    background-repeat: no-repeat;
    background-position: center;
}

.dataViewToolbar .toolbarButton.tileBtn.select ._hover_ {
    background-image: -webkit-image-set(url(assets/grid_view_16_hover.png) 1x, url(assets/grid_view_16_hover@2x.png) 2x);
    background-color: transparent;
    background-size: 16px 16px;
    /* icon is 16x16, with 1px top and bottom transparent area. This gives graphics of requested 14px in height */
    background-repeat: no-repeat;
    background-position: center;
}

.dataViewToolbar .toolbarButton.listBtn {
    background-image: -webkit-image-set(url(assets/list_normal_16_inactive.png) 1x, url(assets/list_normal_16_inactive@2x.png) 2x);
    background-color: transparent;
    background-size: 16px 16px;
    /* icon is 16x16, with 1px top and bottom transparent area. This gives graphics of requested 14px in height */
    background-repeat: no-repeat;
    background-position: center;
}

.dataViewToolbar .toolbarButton.listBtn ._hover_ {
    background-image: -webkit-image-set(url(assets/list_normal_16_hover.png) 1x, url(assets/list_normal_16_hover@2x.png) 2x);
    background-color: transparent;
    background-size: 16px 16px;
    /* icon is 16x16, with 1px top and bottom transparent area. This gives graphics of requested 14px in height */
    background-repeat: no-repeat;
    background-position: center;
}

.dataViewToolbar .toolbarButton.listBtn.select {
    background-image: -webkit-image-set(url(assets/list_normal_16.png) 1x, url(assets/list_normal_16@2x.png) 2x);
    background-color: transparent;
    background-size: 16px 16px;
    /* icon is 16x16, with 1px top and bottom transparent area. This gives graphics of requested 14px in height */
    background-repeat: no-repeat;
    background-position: center;
}

.dataViewToolbar .toolbarButton.listBtn.select ._hover_ {
    background-image: -webkit-image-set(url(assets/list_normal_16_hover.png) 1x, url(assets/list_normal_16_hover@2x.png) 2x);
    background-color: transparent;
    background-size: 16px 16px;
    /* icon is 16x16, with 1px top and bottom transparent area. This gives graphics of requested 14px in height */
    background-repeat: no-repeat;
    background-position: center;
}

.dataViewToolbar .toolbarButton.foldersBtn {
    background-image: url('assets/foldersBtn_b.png');
}

.dataViewToolbar .toolbarButton.foldersBtn.select {
    background-image: url('assets/foldersBtn.png');
}

.dataViewToolbar .description {
    position: absolute;
    top: 10px;
    -webkit-user-select: none;
    user-select: none;
}

.dataViewToolbar .sortToolbarButton {
    position: absolute;
    height: 14px;
    line-height: 14px;
    cursor: default;
    font-size: 12px;
    text-align: center;
    -webkit-user-select: none;
    user-select: none;
    font-weight: normal;
    color: #A7A7A7;
    margin: 9px 0px 9px 0;
}

.dataViewToolbar .sortToolbarButton.name {
    text-align: left;
}

.dataViewToolbar .sortToolbarButton.select {
    font-weight: bold;
    color: #555555;
}

.dataViewToolbar .sortToolbarButton:hover {
    color: #6693CC;
}

.dataViewToolbar .sortToolbarButton.hidden {
    visibility: hidden;
}

.dataViewToolbar .sortToolbarButton.recentNameDelimiter {
    width: 1px;
    height: 12px;
    background-color: #555555;
}

.dataViewToolbar .sortToolbarButton.recentNameDelimiter.hidden {
    visibility: hidden;
}


/* toolbarEllipsisPopup */

.toolbarEllipsisPopup {
    position: absolute;
    padding: 10px 38px 0 0;
    overflow: hidden;
    transition: height 0.25s linear, padding 0.25s linear, top 0.25s linear;
    -webkit-transition: height 0.2s linear, padding 0.2s linear, top 0.25s linear;
}

.toolbarEllipsisPopup .arrowUp {
    position: absolute;
    top: 0;
    right: 39px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #ffffff;
}


/* notificationMessageToolbar */

.notificationMessageToolbar {
    width: 350px;
    margin-bottom: 0.5em;
    /* these should match that of dropdown (projectDetailData.css) */
    font-size: 12px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear;
    border: 1px solid #979797;
    background: #FAFAFA;
}

.notificationMessageToolbar:last-child {
    margin-bottom: 0;
}

.notificationMessageToolbar.hidden {
    -webkit-transition: height 0.3s linear, margin-bottom 0.3s linear, opacity 0.3s linear;
    transition: height 0.3s linear, margin-bottom 0.3s linear, opacity 0.3s linear;
    opacity: 0;
    margin-bottom: 0;
}

.notificationMessageToolbar.overflow_hidden {
    overflow: hidden;
}

.notificationMessageToolbar>div {}

.notificationMessageToolbar .toolbarButton {
    width: 20px;
    /* this will drive the size of the hoover-highlight */
    cursor: default;
}

.notificationMessageToolbar .toolbarButton.closeBtn {
    margin: 1em 3px 1em 0.5em;
    background-image: -webkit-image-set(url(assets/close_normal_10.png) 1x, url(assets/close_normal_10_@2x.png) 2x);
    background-color: transparent;
    background-size: 10px 10px;
    /* icon is 16x16, with 1px top and bottom transparent area. This gives graphics of requested 14px in height */
    background-repeat: no-repeat;
    background-position: center;
}

.notificationMessageToolbar .toolbarButton.closeBtn ._hover_ {
    background-image: -webkit-image-set(url(assets/close_normal_10.png) 1x, url(assets/close_normal_10_@2x.png) 2x);
    background-color: transparent;
    background-size: 10px 10px;
    /* icon is 16x16, with 1px top and bottom transparent area. This gives graphics of requested 14px in height */
    background-repeat: no-repeat;
    background-position: center;
}

.notificationMessageToolbar .toolbarButton.closeBtn.select {
    background-image: -webkit-image-set(url(assets/close_normal_10.png) 1x, url(assets/close_normal_10_@2x.png) 2x);
    background-color: transparent;
    background-size: 10px 10px;
    /* icon is 16x16, with 1px top and bottom transparent area. This gives graphics of requested 14px in height */
    background-repeat: no-repeat;
    background-position: center;
}

.notificationMessageToolbar .toolbarButton.closeBtn.select ._hover_ {
    background-image: -webkit-image-set(url(assets/close_normal_10.png) 1x, url(assets/close_normal_10_@2x.png) 2x);
    background-color: transparent;
    background-size: 10px 10px;
    /* icon is 16x16, with 1px top and bottom transparent area. This gives graphics of requested 14px in height */
    background-repeat: no-repeat;
    background-position: center;
}

.notificationMessageToolbar .toolbarButton.closeBtn.right5 {
    margin-right: 5px;
}

.notificationMessageToolbar .description {
    -webkit-user-select: none;
    user-select: none;
}

.notificationMessageToolbar .msgToolbarButton {
    margin: 1em 0.5em 1em 5px;
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
    font-weight: normal;
    color: #A7A7A7;
}

.notificationMessageToolbar .msgToolbarButton.name {
    text-align: left;
    text-decoration: underline;
}

.notificationMessageToolbar .msgToolbarButton.select {
    color: #646464;
}

.notificationMessageToolbar .msgToolbarButton:hover {
    color: #646464;
    cursor: default;
}

.notificationMessageToolbar .msgToolbarButton.hidden {
    visibility: hidden;
}

.notificationMessageToolbar .msgToolbarButton.notext {
    opacity: 0;
}

.notificationMessageToolbar .refreshToolbarButton {
    margin: 1em 0px 1em 0.5em;
    line-height: 14px;
    cursor: default;
    text-align: center;
    -webkit-user-select: none;
    user-select: none;
    color: #A7A7A7;
    max-width: 120px;
}

.notificationMessageToolbar .refreshToolbarButton.name {
    text-align: left;
    text-decoration: underline;
}

.notificationMessageToolbar .refreshToolbarButton.select {
    color: #646464;
}

.notificationMessageToolbar .refreshToolbarButton:hover {
    color: #6693CC;
    cursor: default;
}

.notificationMessageToolbar .refreshToolbarButton.hidden {
    visibility: hidden;
}

.notificationMessageToolbar .refreshToolbarButton.notext {
    opacity: 0;
}

.notificationMessageToolbar .refreshToolbarButton.newBranch {
    text-decoration: none;
    color: #5286BD
}

.notificationMessageToolbar .refreshToolbarButton.newBranch:hover {
    text-decoration: none;
    color: #5286BD;
    cursor: default;
}


/* toolbarEllipsisMsgPopup */

.toolbarEllipsisMsgPopup {
    position: absolute;
    padding: 0px 38px 0 0;
    /* no padding on top, otherwise invisible strip will capture clicks to data panel project detail actions */
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity 1s linear;
    transition: opacity 1s linear;
    z-index: 9;
    /*transition: height 0.25s linear, padding 0.25s linear, top 0.25s linear;
    -webkit-transition: height 0.2s linear, padding 0.2s linear, top 0.25s linear;*/
}

.toolbarEllipsisMsgPopup.show {
    visibility: visible;
    opacity: 1;
}

.toolbarEllipsisMsgPopup .boxShadow {
    position: absolute;
    /*top: 40px;*/
    width: 350px;
    background-color: rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 2px 10px 15px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 2px 10px 15px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 2px 10px 15px 0px rgba(0, 0, 0, 0.5);
    /*    -webkit-transition: height 0.3s linear;
    transition: height 0.3s linear;
    */
}


/* toolbarEllipsisMsgPopup */

.zeroDocMessageEllipsisMsgPopup {
    position: absolute;
    height: 0px;
    top: 65px;
    width: 100%;
    overflow: hidden;
}


/* zeroDocMessageToolbar */

.zeroDocMessageToolbar {
    position: absolute;
    height: 28px;
    right: 54px;
    background: rgb(88, 137, 178);
    border-radius: 3px;
    z-index: 10;
}

.zeroDocMessageToolbar .toolbarButton {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 4px;
    right: 4px;
    cursor: default;
}

.zeroDocMessageToolbar .toolbarButton.zeroDocCloseBtn {
    background-image: -webkit-image-set(url(assets/close_white.png) 1x, url(assets/close_white.png) 2x);
    background-color: transparent;
    background-size: 10px 10px;
    /* icon is 16x16, with 1px top and bottom transparent area. This gives graphics of requested 14px in height */
    background-repeat: no-repeat;
    background-position: center;
}

.zeroDocMessageToolbar .toolbarButton.zeroDocCloseBtn ._hover_ {
    background-image: -webkit-image-set(url(assets/close_white.png) 1x, url(assets/close_white.png) 2x);
    background-color: transparent;
    background-size: 10px 10px;
    /* icon is 16x16, with 1px top and bottom transparent area. This gives graphics of requested 14px in height */
    background-repeat: no-repeat;
    background-position: center;
}

.zeroDocMessageToolbar .msgToolbarButton {
    position: relative;
    line-height: 28px;
    cursor: default;
    text-align: center;
    -webkit-user-select: none;
    user-select: none;
    color: #A7A7A7;
    font-family: Arial;
    font-weight: normal;
    font-size: 12px;
    padding-left: 10px;
    padding-right: 45px;
    color: rgb(255, 255, 255);
}

.zeroDocMessageToolbar .arrowUp {
    position: absolute;
    top: -10px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid rgb(88, 137, 178);
}

.zeroDocMessageRefreshToolbar {
    position: absolute;
    width: 100%;
    height: 5px;
    top: 30px;
}

.zeroDocMessageRefreshToolbar .refreshToolbarButton {
    position: relative;
    top: 230px;
    width: 160px;
    line-height: 14px;
    cursor: default;
    font-size: 12px;
    text-align: center;
    -webkit-user-select: none;
    user-select: none;
    font-weight: normal;
    color: #A7A7A7;
    margin: auto;
}


/*
    DIVIDER
*/

.ctl_divider {
    background: #d2d2d2
}

.ctl_divider.ctl_horizontal {
    height: 1px
}

.ctl_divider.ctl_vertical {
    width: 1px
}


/*
    CROSS BUTTON
*/

.ctl_crossButton {
    position: relative
}

.ctl_crossButton:before,
.ctl_crossButton:after {
    position: absolute;
    left: 50%;
    top: -20%;
    content: ' ';
    height: 139%;
    width: 1px;
    background: #6c6c6c;
    -webkit-transition: background 0.2s ease-out;
    transition: background 0.2s ease-out;
}

.ctl_crossButton:hover:before,
.ctl_crossButton:hover:after {
    background: #a2a2a2;
}

.ctl_crossButton:active:before,
.ctl_crossButton:active:after {
    background: #4e4e4e;
}

.ctl_crossButton:before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.ctl_crossButton:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.ctl_crossButton.white:before,
.ctl_crossButton.white:after {
    background: rgba(255, 255, 255, 1);
    width: 2px;
}

.ctl_crossButton.white:hover:before,
.ctl_crossButton.white:hover:after {
    background: rgba(255, 255, 255, 0.7);
}


/*
    SIMPLE ARROW BUTTON
*/

.ctl_simpleArrowButton {
    position: relative
}

.ctl_simpleArrowButton:after {
    content: '';
    display: block;
    position: absolute;
    margin: auto;
    bottom: 0;
    top: 0;
    right: 0;
    left: 0;
    width: 75%;
    height: 75%;
    border-right: 1px solid #6c6c6c;
    border-bottom: 1px solid #6c6c6c;
}

.ctl_simpleArrowButton.ctl_bold:after {
    border-right: 2px solid #6c6c6c;
    border-bottom: 2px solid #6c6c6c;
}

.ctl_simpleArrowButton.ctl_top:after {
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
    bottom: auto;
    top: 15%;
}

.ctl_simpleArrowButton.ctl_right:after {
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
    right: auto;
    left: 0;
}

.ctl_simpleArrowButton.ctl_down:after {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    bottom: auto;
    top: 0;
}

.ctl_simpleArrowButton.ctl_left:after {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    right: auto;
    left: 15%;
}


/*
    CONTEXT MENU
*/

.ctl_contextMenu {
    position: absolute;
    background: #ffffff;
    border-radius: 3px;
    border: #d2d2d2 1px solid;
    z-index: 20;
    overflow: hidden;
    opacity: 0;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 116.7%;
    color: #6c6c6c;
    padding: 3px 0 1px 0;
}

.ctl_contextMenu.checkable {}

.ctl_contextMenu .item {
    position: relative;
    line-height: 2.15em;
    padding: 0 12px 0 12px;
    text-align: left;
    cursor: default;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ctl_contextMenu .item.disabled {
    color: #bdbdbd
}

.ctl_contextMenu .item:not(.disabled):hover {
    background: #f5f6f7
}

.ctl_contextMenu.checkable .item {
    padding: 0 12px 0 22px;
}

.ctl_contextMenu .separator {
    margin: 5px 12px 5px 12px;
    background-color: #d2d2d2;
    height: 1px;
}

.ctl_contextMenu.checkable .item.checked {
    background-image: -webkit-image-set(url("../assets/check_mark_16.png") 1x, url("../assets/check_mark_16@2x.png") 2x);
    background-repeat: no-repeat;
    background-position: 3px center;
}


/*
    BRANCHING DROPDOWN
*/

.ctl_branchingDropdown {
    position: relative;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 116.7%;
    cursor: default;
    background: #ffffff;
    border: #d2d2d2 1px solid;
    color: #6c6c6c;
    border-radius: 3px;
    height: 2.571em;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: border 0.2s ease-out;
    transition: border 0.2s ease-out;
}

.ctl_branchingDropdown.pushed {
    border: #00a6e2 1px solid
}

.ctl_branchingDropdown.invisibleBorder {
    border: transparent 1px solid
}

.ctl_branchingDropdown .circle {
    position: absolute;
    top: 0;
    left: 12px;
    bottom: 0;
    width: 0.85em;
    height: 0.85em;
    margin: auto;
    display: inline-block;
    border-radius: 50%;
    border-width: 1px;
    border-style: solid;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.ctl_branchingDropdown .dropdownTitle {
    line-height: 2.571em;
    padding: 0 2.14em 0 2.14em;
    cursor: default;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-backface-visibility: hidden;
}

.ctl_branchingDropdown.singleItem .dropdownTitle {
    padding: 0 0.64em 0 2.14em;
}

.ctl_branchingDropdown .dropdownExpander {
    position: absolute;
    margin: auto;
    bottom: 0;
    top: 0;
    right: 12px;
    width: 0.857em;
    height: 0.84em;
    background: url("../assets/disclosure_arrow.svg") no-repeat right bottom;
    background-size: contain;
}

.ctl_branchingDropdown.singleItem .dropdownExpander {
    display: none;
}

.ctl_branchingDropdown .dropdownPopup {
    position: absolute;
    top: 100%;
    left: -1px;
    min-width: 100%;
    max-height: 12.84em;
    /* 6 * 2.14em */
    overflow-y: auto;
    background: #ffffff;
    border-radius: 3px;
    border: #00a6e2 1px solid;
    z-index: 10;
    padding: 0.3em 0 0.3em 0;
}

.ctl_branchingDropdown .dropdownPopup .dropdownPopupItem {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 2.14em;
    padding: 0 0.64em 0 2.14em;
}

.ctl_branchingDropdown .dropdownPopup .dropdownPopupItem:first-child {}

.ctl_branchingDropdown .dropdownPopup .dropdownPopupItem:last-child {}

.ctl_branchingDropdown .dropdownPopup .dropdownPopupItem.selected {}

.ctl_branchingDropdown .dropdownPopup .dropdownPopupItem.colored {}

.ctl_branchingDropdown .dropdownPopup .dropdownPopupItem:hover {
    background: #f5f6f7
}

.ctl_branchingDropdown .dropdownPopup .dropdownPopupItem.disabled {
    color: #bdbdbd
}

.ctl_branchingDropdown .dropdownPopup .dropdownPopupItem.disabled:hover {
    background: none
}

.ctl_branchingDropdown .dropdownPopup .dropdownPopupItem.disabled .circle {
    opacity: 0.3
}


/*
    BLUE BUTTON
*/

.ctl_blueButton {
    position: relative;
    padding: 0 1.2em 0 1.2em;
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-size: 116.7%;
    font-weight: 300;
    color: #ffffff;
    border-radius: 3px;
    background: #00a6e2;
    line-height: 2.571em;
    height: 2.571em;
    cursor: default;
    border: #00a6e2 1px solid;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: background 0.2s ease-out, border 0.2s ease-out;
    transition: background 0.2s ease-out, border 0.2s ease-out;
}

.ctl_blueButton:hover {
    background: #3ab5e1;
    border: #3ab5e1 1px solid;
}

.ctl_blueButton:active {
    background: #007ec0;
    border: #007ec0 1px solid;
}

.ctl_blueButton.disabled {
    background: #a5e0f5;
    border: #a5e0f5 1px solid;
}

.ctl_learnMore {
    position: relative;
    font-family: 'Open Sans', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    cursor: default;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #00A5E1;
}

.ctl_learnMore:hover {
    color: 42B6DF;
}

.ctl_learnMore:active {
    color: #007FBE;
}

.ctl_cursorDefault {
    cursor: default;
}


/*
    GRAY BUTTON
*/

.ctl_grayButton {
    position: relative;
    padding: 0 1.2em 0 1.2em;
    font-family: 'Open Sans', monospace;
    font-style: normal;
    font-size: 116.7%;
    font-weight: 300;
    color: #848484;
    border-radius: 3px;
    background: #fafafa;
    line-height: 2.4em;
    height: 2.4em;
    cursor: default;
    border: #a2a2a2 1px solid;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: background 0.2s ease-out, border 0.2s ease-out;
    transition: background 0.2s ease-out, border 0.2s ease-out;
}

.ctl_grayButton:hover {
    background: #ffffff;
    border: #d2d2d2 1px solid;
}

.ctl_grayButton:active {
    background: #e9e9e9;
    border: #adadad 1px solid;
}


/*
    INPUT FORM
*/

.ctl_inputForm {}

.ctl_inputForm .ctl_inputFormRow {
    margin: 23px 0 0 0;
}

.ctl_inputForm .ctl_inputFormRow:first-child {
    margin: 47px 0 0 0;
}

.ctl_inputForm input {
    font-family: 'Open Sans', monospace;
    font-weight: 300;
    font-style: normal;
    font-size: 116.7%;
    color: #6c6c6c;
    border: #d2d2d2 1px solid;
    border-radius: 3px;
    /*line-height: 2.641em;*/
    height: 2.571em;
    padding: 0 0.857em 0 0.857em;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: border 0.2s ease-out;
    transition: border 0.2s ease-out;
}

.ctl_inputForm input:focus {
    border: #00a6e2 1px solid
}

.ctl_inputForm input::-webkit-input-placeholder {
    color: #bdbdbd;
}

.ctl_inputForm textarea {
    font-family: 'Open Sans', monospace;
    font-weight: 300;
    font-style: normal;
    font-size: 116.7%;
    line-height: 1.58em;
    color: #6c6c6c;
    border: #d2d2d2 1px solid;
    border-radius: 3px;
    padding: 7px 12px 7px 12px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    resize: none;
}

.ctl_inputForm textarea:focus {
    border: #00a6e2 1px solid
}

.ctl_inputForm textarea::-webkit-input-placeholder {
    color: #bdbdbd;
}


/*
    DIALOG BUTTONS CONTAINER
*/

.ctl_dialogButtonsContainer {
    position: relative;
    padding: 47px 0 35px 0;
}

.ctl_dialogButtonsContainer>div {
    margin-right: 17px
}

.ctl_dialogButtonsContainer>div:last-child {
    margin-right: 0
}


/*
    CIRCLE IMAGE
*/

.ctl_circleImage {
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}


/*
    DIALOG STATUS MESSAGE
*/

.ctl_dialogStatusMessageOverlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.85);
    opacity: 0;
    -webkit-transition: opacity 0.2s ease-out;
    transition: opacity 0.2s ease-out;
}

.ctl_dialogStatusMessage {
    text-align: center;
    padding: 25px;
    opacity: 0;
    -webkit-transform: scale(0.8, 0.8);
    transform: scale(0.8, 0.8);
    -webkit-transition: opacity 0.2s ease-out, -webkit-transform 0.2s ease-out;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.ctl_dialogStatusMessage.show {
    opacity: 1;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
}


/*
    BREADCRUMBS BAR
*/

.ctl_breadcrumbsBar {}


/* item */

.ctl_breadcrumbsBar .ctl_breadcrumbsBarItem {
    margin-right: 6px;
    padding-right: 1em;
    min-height: 1em;
}

.ctl_breadcrumbsBar .ctl_breadcrumbsBarItem:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 0.5em;
    background: url("../assets/next_path_arrow.svg") no-repeat center center;
    background-size: contain;
}

.ctl_breadcrumbsBar .ctl_breadcrumbsBarItem:last-child:after {
    display: none
}


/* branch */

.ctl_breadcrumbsBar .ctl_breadcrumbsBarItem.branch {}

.ctl_breadcrumbsBar .ctl_breadcrumbsBarItem.branch .branchIcon {
    width: 1em;
    height: 1em;
    border-radius: 50%;
    margin-right: 6px;
}

.ctl_breadcrumbsBar .ctl_breadcrumbsBarItem.branch.collapsed .branchIcon {
    margin: 0;
}

.ctl_breadcrumbsBar .ctl_breadcrumbsBarItem.branch.collapsed .branchName {
    display: none;
}

.ctl_breadcrumbsBar .ctl_breadcrumbsBarItem.branch:hover .branchIcon {
    margin-right: 6px;
}

.ctl_breadcrumbsBar .ctl_breadcrumbsBarItem.branch:hover .branchName {
    display: block
}


/* folder */

.ctl_breadcrumbsBar .ctl_breadcrumbsBarItem.folder {
    padding-left: 1em;
    min-width: 1em;
}

.ctl_breadcrumbsBar .ctl_breadcrumbsBarItem.folder:last-child {
    padding-left: 1.5em;
}

.ctl_breadcrumbsBar .ctl_breadcrumbsBarItem.folder:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1em;
    background: url("../assets/folder_icon.svg") no-repeat center center;
    background-size: contain;
}

.ctl_breadcrumbsBar .ctl_breadcrumbsBarItem.folder:hover {
    padding-left: 1.5em;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.ctl_breadcrumbsBar .ctl_breadcrumbsBarItem.folder:not(:last-child) .folderName {
    display: none;
}

.ctl_breadcrumbsBar .ctl_breadcrumbsBarItem.folder:hover .folderName {
    display: block;
}


/*
    DIALOG PROGRESS UI
*/

.ctl_dialogProgressStatusMessageOverlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 1);
    opacity: 0;
    -webkit-transition: opacity 0.2s ease-out;
    transition: opacity 0.2s ease-out;
}

.ctl_dialogStatusContainer {}

.ctl_dialogProgressSpinner {
    display: none;
    width: 32px;
    height: 32px;
    background-image: -webkit-image-set(url('../assets/progress_spinner.png') 1x, url('../assets/progress_spinner@2x.png') 2x);
    background-position: center center;
    background-size: 32px 32px;
    background-color: transparent;
    background-repeat: no-repeat;
    -webkit-animation: spinAnimation 1s infinite linear;
}

.ctl_dialogProgressSpinner.showSpinner {
    display: block;
}

@-webkit-keyframes spinAnimation {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}

.ctl_dialogMessage {
    text-align: center;
    opacity: 0;
    -webkit-transition: opacity 0.2s ease-out, -webkit-transform 0.2s ease-out;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.ctl_dialogStatusContainer.showMsg .ctl_dialogMessage {
    opacity: 1;
}

.ctl_dialogMessage.asProgressMsg {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 13px;
    color: #808080;
    cursor: default;
    line-height: 18px;
    padding: 14px 25px 0px 25px;
}

.ctl_dialogMessage.asStatusMsg {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 200%;
    color: #6c6c6c;
    cursor: default;
    opacity: 1;
    padding: 25px;
}

.ctl_dialogMessage.asStatusMsg.upper {
    padding: 0 25px 8px 25px;
    color: #808080;
    line-height: normal;
}

.ctl_dialogMessage.asStatusMsg.below {
    padding: 8px 25px 0 25px;
    font-size: 109%;
    color: #808080;
    line-height: normal;
}

.ctl_dialogMessage b {
    font-weight: 600;
    color: #2d2d2d;
}


/*
    SMALL SPINNER
*/

.ctl_smallProgressSpinner {
    display: none;
    width: 16px;
    height: 16px;
    background-image: -webkit-image-set(url('../assets/spinner.png') 1x, url('../assets/spinner@2x.png') 2x);
    background-position: center center;
    background-size: 16px 16px;
    background-color: transparent;
    background-repeat: no-repeat;
    -webkit-animation: spinAnimation 1s infinite linear;
}

.ctl_smallProgressSpinner.showSpinner {
    display: block;
}

.ctl_smallProgressSpinner.posAbsolute {
    position: absolute;
}


/*
    OPEN SANS
*/


/* Light */

@font-face {
    font-family: 'Open Sans';
    src: url('../font/OpenSans-Light.ttf');
    font-weight: 300;
    font-style: normal;
}


/* Light Italic */

@font-face {
    font-family: 'Open Sans';
    src: url('../font/OpenSans-LightItalic.ttf');
    font-weight: 300;
    font-style: italic;
}


/* Regular */

@font-face {
    font-family: 'Open Sans';
    src: url('../font/OpenSans-Regular.ttf');
    font-weight: 400;
    font-style: normal;
}


/* Italic */

@font-face {
    font-family: 'Open Sans';
    src: url('../font/OpenSans-Italic.ttf');
    font-weight: 400;
    font-style: italic;
}


/* Semi-Bold */

@font-face {
    font-family: 'Open Sans';
    src: url('../font/OpenSans-Semibold.ttf');
    font-weight: 600;
    font-style: normal;
}


/* Semi-Bold Italic */

@font-face {
    font-family: 'Open Sans';
    src: url('../font/OpenSans-SemiboldItalic.ttf');
    font-weight: 600;
    font-style: italic;
}


/* Bold */

@font-face {
    font-family: 'Open Sans';
    src: url('../font/OpenSans-Bold.ttf');
    font-weight: 700;
    font-style: normal;
}


/* Bold Italic */

@font-face {
    font-family: 'Open Sans';
    src: url('../font/OpenSans-BoldItalic.ttf');
    font-weight: 700;
    font-style: italic;
}


/* Extra-Bold */

@font-face {
    font-family: 'Open Sans';
    src: url('../font/OpenSans-ExtraBold.ttf');
    font-weight: 800;
    font-style: normal;
}


/* Extra-Bold Italic */

@font-face {
    font-family: 'Open Sans';
    src: url('../font/OpenSans-ExtraBoldItalic.ttf');
    font-weight: 800;
    font-style: italic;
}


/*
    BASE
*/

.ft_baseForMeasurement {
    font-size: 12px
}


/*
    FONT TYPES
*/

.ft_title {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 200%;
    color: #6c6c6c;
    cursor: default;
}

.ft_subTitle {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 116.7%;
    color: #000000;
    cursor: default;
}

.ft_sectionTitle {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 100%;
    color: #6c6c6c;
    cursor: default;
}

.ft_placeholder {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-style: italic;
    font-size: 116.7%;
    color: #bdbdbd;
    cursor: default;
}

.ft_buttonText,
.ft_dialogText {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 116.7%;
    color: #6c6c6c;
    cursor: default;
}

.ft_dialogLightText {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 116.7%;
    color: #adadad;
    cursor: default;
}

.ft_whiteText,
.ft_lightText,
.ft_text {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 100%;
    color: #6c6c6c;
    line-height: 150%;
    cursor: default;
}

.ft_lightText {
    color: #adadad;
}

.ft_whiteText {
    color: #ffffff;
}

.ft_text strong,
.ft_lightText strong,
.ft_whiteText strong {
    font-weight: 600
}

.ft_text b,
.ft_lightText b {
    font-weight: 600;
    color: #2d2d2d;
}

.ft_whiteText b {
    font-weight: 600;
    color: #ffffff;
}

.ft_text a {
    text-decoration: none;
    color: #00a6e2;
}

.ft_text a:hover {
    color: #3ab5e1;
}

.ft_text a:active {
    color: #007ec0;
}

.ft_smallText {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 75%;
    color: #6c6c6c;
    cursor: default;
}

.ft_error {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 108%;
    color: #E94D4D;
    cursor: default;
}


/*
    UTILIZATION
*/

.ft_capitalize {
    text-transform: uppercase
}

.ft_threeDots {
    white-space: nowrap;
    overflow: hidden;
    /* !important */
    text-overflow: ellipsis;
}


/*
    LAYOUT
*/

.l_layout {
    display: flex;
    display: -webkit-flex;
    -webkit-flex-direction: row;
    flex-direction: row;
}

.l_layout.l_verticalLayout {
    -webkit-flex-direction: column;
    flex-direction: column;
}


/* vertical align content */

.l_layout.l_vAlignContentTop {
    -webkit-align-content: flex-start;
    align-content: flex-start;
}

.l_layout.l_vAlignContentMiddle {
    -webkit-align-content: center;
    align-content: center;
}

.l_layout.l_vAlignContentBottom {
    -webkit-align-content: flex-end;
    align-content: flex-end;
}


/* horizontal align content  */

.l_layout.l_alignContentSpaceBetween {
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.l_layout.l_alignContentLeft {
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}

.l_layout.l_alignContentCenter {
    -webkit-justify-content: center;
    justify-content: center;
}

.l_layout.l_alignContentRight {
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}


/* items */

.l_layout.l_vAlignItemsBaseline {
    -webkit-align-items: baseline;
    align-items: baseline;
}

.l_layout.l_vAlignItemsTop {
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

.l_layout.l_vAlignItemsBottom {
    -webkit-align-items: flex-end;
    align-items: flex-end;
}

.l_layout.l_vAlignItemsMiddle {
    -webkit-align-items: center;
    align-items: center;
}

.l_layout.l_vAlignItemsStretch {
    -webkit-align-items: stretch;
    align-items: stretch;
}


/* wrap */

.l_layout.l_flex_wrap {
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
}


/*
    COLUMN
*/

.l_column {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.l_column.l_flexible {
    -webkit-flex-grow: 999;
    flex-grow: 999;
}

.l_column.l_fixed {
    -webkit-flex-grow: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.l_column.l_canGrow {
    -webkit-flex-grow: 999;
    flex-grow: 999;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.l_column.l_canShrink {
    -webkit-flex-grow: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 999;
    flex-shrink: 999;
}


/*
    TABLE
*/

.l_table {
    display: table;
}

.l_tableRow {
    display: table-row;
}

.l_tableCell {
    display: table-cell;
}


/* ToolTips */

.t_tooltipParent {}

.t_tooltipParent .t_tooltip,
.tooltipMerge {
    position: absolute;
    background: rgba(68, 68, 68, 0.95);
    padding: 14px 12px 14px 12px;
    border-radius: 3px;
    z-index: 100;
    cursor: default;
    display: none;
    white-space: nowrap;
    -webkit-user-select: none;
    user-select: none;
}

.t_tooltipParent .t_tooltip.merge {
    min-width: 25em;
    font-size: 133%;
    white-space: normal;
}

.t_tooltipParent .t_tooltip.right {
    right: 0;
}

.t_tooltipParent .t_tooltip.right30 {
    right: -30px;
}

.t_tooltipParent .t_tooltip.left {
    left: 0;
}

.t_tooltipParent .t_tooltip.center {
    left: 50%;
}

.t_tooltipParent .t_tooltip.bottom {
    top: 100%;
}

.t_tooltipParent .t_tooltip.top {
    bottom: 100%;
}

.t_tooltipParent .t_tooltip.top80 {
    bottom: 80%;
}

.t_tooltipParent .t_tooltip.left.top,
.t_tooltipParent .t_tooltip.right.top,
.t_tooltipParent .t_tooltip.right30.top {
    transform: translate(0, -6px);
    -webkit-transform: translate(0, -6px);
}

.t_tooltipParent .t_tooltip.left.bottom,
.t_tooltipParent .t_tooltip.right.bottom {
    transform: translate(0, 6px);
    -webkit-transform: translate(0, 6px);
}

.t_tooltipParent .t_tooltip.center.top {
    transform: translate(-50%, -6px);
    -webkit-transform: translate(-50%, -6px);
}

.t_tooltipParent .t_tooltip.center.bottom {
    transform: translate(-50%, 6px);
    -webkit-transform: translate(-50%, 6px);
}

.t_tooltipParent:hover .t_tooltip {
    display: inline-block;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-name: t_tooltipFadeIn;
    animation-name: t_tooltipFadeIn;
    opacity: 0.95;
}

.t_tooltipParent .t_tooltipBridge {
    position: absolute;
    background-color: transparent;
    left: 0;
    width: 100%;
    height: 6px;
    display: none;
}

.t_tooltipParent:hover .t_tooltipBridge {
    display: inline-block;
}

.t_tooltipParent .t_tooltipBridge.bottomSide {
    top: 100%;
}

.t_tooltipParent .t_tooltipBridge.topSide {
    bottom: 100%;
}

@-webkit-keyframes t_tooltipFadeIn {
    0%,
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0.95;
    }
}

@keyframes t_tooltipFadeIn {
    0%,
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0.95;
    }
}

MessageBox.css

/*
	Note: Some of the styles are set directly from C++
*/

QDialog {
    background-color: #3B3B3B;
    border: 1px solid;
    border-color: #404040;
}

QLabel,
QCheckBox,
QRadioButton,
QPushButton {
    font-family: Artifakt Element, Arial, Sans-Serif;
}


/* */


/* QLabel, QCheckBox, QRadioButton */


/* */

QLabel,
QCheckBox,
QRadioButton {
    color: #C0C0C6;
    /* background-color: plum; */
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
}

QLabel#titleLabel {
    background-color: #383838;
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
}

QLabel#messageLabel {
    margin-bottom: 8px;
}

QCheckBox {
    margin-bottom: 8px;
}

QRadioButton {
    margin-left: 8px;
    margin-bottom: 8px;
}


/* */


/* QPushButtons */


/* */

QPushButton {
    background-color: #424447;
    color: #C0C0C6;
    font-size: 12px;
    border: 1px solid #242424;
    border-radius: 2px;
    /* Qt doesn't appear to support the "box-sizing: border-box" property, so need to subtract 1px on all sides   */
    height: 22px;
    padding-left: 11px;
    padding-right: 11px;
}

QPushButton:disabled {
    border-color: #242424;
    color: #6A6A70;
    background-color: #323232;
}


/* QPushButton:hover {
    background-color: purple;
} */


/* QPushButton:pressed {
    background-color: indigo;
} */

QPushButton:default {
    background-color: #354F85;
    color: #EEEEEE;
    border: 1px solid #354F85;
}

QPushButton:default:disabled {
    background-color: #323232;
    border: 1px solid #5E6060;
    color: #777777;
}


/* QPushButton:default:hover {
    background-color: teal;
    border: 1px solid turquoise;
}

QPushButton:default:pressed {
    background-color: #007EC0;
    border: 1px solid #007EC0;
} */

QPushButton#CloseButton {
    border: none;
    width: 20px;
    height: 20px;
}

QPushButton#CloseButton:disabled {
    background-color: transparent;
    border: none;
}


/* QPushButton#CloseButton:hover {
    background-color: transparent;
    border: none;
}

QPushButton#CloseButton:pressed {
    background-color: transparent;
    border: none;
} */


/* */


/* QFrames */


/* */

QFrame#titleSeparator {
    color: #2C2C2C;
}

QFrame#statusIndicatorInfo {
    color: transparent;
    background-color: #38ABDF;
}

QFrame#statusIndicatorWarning {
    color: transparent;
    background-color: #FBB549;
}

QFrame#statusIndicatorError {
    color: transparent;
    background-color: #EB5555;
}


/* Windows' button area requires additional padding to achieve the correct height */

QFrame#standardActions {
    padding-bottom: 12px
}

Fixed some small color issues with the new folder button