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

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

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

body{
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 14px;
    color: #000000;
    background: rgb(231, 231, 231);
    overflow: hidden;
}

body.rightBorder{
	border-right: #979797 1px solid;
}

/* scrollbars for entire application */
::-webkit-scrollbar{
    height: 8px;
    width: 8px;
    -webkit-border-radius: 1ex;
    background: none;
}

::-webkit-scrollbar-thumb:hover {
    background: #979797;
}

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

::-webkit-scrollbar-corner{ background: #d9d9d9; }

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

/* ToolTips */
.tooltipParent{

}

.tooltipParent .tooltip,
#projecticon.tooltip {
    position: absolute;
    background: #515151;
    font-size: 12px;
    line-height: 14px;
    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: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\0/;
margin-right: -1px\0/;
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: #6b6b6b;
    padding-left: 3px;
    padding-right: 2px;
    cursor: default;
    flex-shrink: 0;
    -webkit-flex-shrink: 0;
    height: 18px;
    line-height: 18px;
}

.breadcrumbsBar .content .item:hover {
    color: #6894ca;
}

.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 {
    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.activated.sep,
.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 .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 .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) .action:hover,
.comboButton:not(.disabled) .down:hover,
.comboButton:not(.disabled) .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);
}

.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 #dddddd;
    border-radius: 3px;
    background: #ffffff;
    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: rgba(255, 255, 255, 0);
    border-bottom-color: #ffffff;
    border-width: 5.5px;
    margin-left: -5.5px;
}
.expandPopup .contentContainer:before {
    border-color: rgba(202, 202, 202, 0);
    border-bottom-color: #dddddd;
    border-width: 7px;
    margin-left: -7px;
}

/* top info */
.expandPopup .contentContainer .topInfo{
    position: relative;
    color: #646464;
    font-size: 12px;
    line-height: 18px;
}

.expandPopup .contentContainer .topInfo .fileName{
    font-weight: bold;
    font-size: 18px;
    line-height: normal;
    color: #333333;
    text-overflow: ellipsis;
    overflow: hidden;
}

.expandPopup .header .selectable,
.expandPopup .contentContainer .topInfo .linkA360,
.expandPopup .tabCtrl .tab .content .showAll {
    color: #6896c8;
}

.expandPopup .header .selectable:hover,
.expandPopup .contentContainer .topInfo .linkA360:hover,
.expandPopup .tabCtrl .tab .content .showAll:hover {
    color: #00a4e1;
}

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

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

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

.expandPopup .inUse span,
.expandPopup .lastUpdate span,
.expandPopup .by span
{
    font-weight: bold;
    color: #333333;
}

.expandPopup.offline .inUse,
.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: #333333;
    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: #6b6b6b;
}

.expandPopup .header {
    position: relative;
    line-height: 22px;
    border-bottom: 1px solid #979797;
    white-space: nowrap;
}

.expandPopup .header .selector{
    position: absolute;
    height: 2px;
    width: 0px;
    top: 0;
    left: 0;
    background: #6896c8;
    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: #ffffff;
    color: #333333;
    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: #646464;
    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: #f7fcfe;
    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 .list.onenum .itemIndex {
    min-width: 14px;
}

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

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

.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: #646464;
    font-weight: normal;
    height: 20px;
    line-height: 20px;

}

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

.expandPopup .listItem .vernum {
    background-color: #c3c3c3;
    color: white;
    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 .tabCtrl .tab .content .listItem.selectable:hover .itemTools {
    display: flex;
    flex-direction: row;
    align-items: center;
}

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

.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: #dbdbdb 1px solid;
}

.projectsPane .filterbox input {
    position: relative;
    width: 100%;
    height: 22px;
    top: 6px;
    border: #dbdbdb 1px solid;
    border-radius: 4px;
    color: #555555;
    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: #ffffff;
}

.projectsPane .filterbox .noFocus {
    background-color: #e7e7e7;
}

.projectsPane .filterbox .noFocus:hover {
    background-color: #ffffff;
}.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 .pinimg{
    background-image: url('assets/pin.svg');
    background-size: 18px 18px;
}

.itemGlyph .unpinimg{
    background-image: url('assets/pin.svg');
    background-size: 18px 18px;
}

.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: rgb(119,189,13);
    display: inline-block;
}

.itemGlyph .glyphText{
    font-size:12px;
    font-family: arial, sans-serif;
    color:#ffffff;
    display: none;
    padding-right: 3px;
    padding-left: 3px;
}

.itemGlyph:hover .glyphText{
    display: inline-block;
}

.itemGlyph:hover .memberimg{
     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);
    }
}.invite {
    position: absolute;
    width:348px;
    font-size: 12px;
    overflow: hidden;
}

.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: #6896C8;
    color: #FFFFFF;
    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: #8A8A8A;
}

.invite .inputResp {
    width:inherit;
    height: 28px;
    line-height: 28px;
    text-align: center;
}
.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: rgb(100, 100, 100);
    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: rgb(231, 231, 231);
    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;
}

.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: #6896C8;
    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: #8A8A8A;
}

.selectableList .listGroup .actionButton .label,
.selectableList .listGroup.fakeListGroup .actionButton .label{
    color: #ffffff;
    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: white;
}

/* item */
.selectableList .listItem{
    position: absolute;
    left: 0;
    width: 100%;
    background: #ffffff;
    border-radius: 3px;
    border: #ffffff 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;
}.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;
}
.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,
#tabsCtrl .tabs .tabButton.selected{
    background: #FAFAFA;
}

#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;
}
.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;
    z-index: 5;
    background-repeat: no-repeat;
    border: 1px solid rgb(231, 231, 231);
    border-radius: 3px;
    overflow: hidden;
}

.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: #fdfdfd;
    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.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.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: 6px;
    padding-right: 6px;
    text-align: center;
    font-size: 11px;
    color: #FFFFFF;
    background-color: #C3C3C3;
    border-radius: 2px;
}

/* 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:hover,
.designsPane .datalistNode .versionNumber.selected {
    background-color: #646464;
}

/* 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: #646464;
}

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

/* 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;
}
/*
 * 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: absolute;
    overflow: auto;
}

/* 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: transparent;
    border: 1px solid #979797;
    border-radius: 3px;
    height: 28px;
    padding: 0 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#projectDetailData .actionButton.newFolder .textData {
    color: #6b6b6b;
    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_ {
    border-color: #bdbdbd;
}

#projectDetailData .actionButton.newFolder._disabled_ .textData {
    color: #bdbdbd;
}

#projectDetailData .actionButton.upload {
    background-color: #6896C8;
    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: #BDBDBD;
}

#projectDetailData .actionButton.upload .textData {
    color: #ffffff;
    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;
}

@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: rgb(100, 100, 100);
}

.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: 48px;
    min-width: 290px;
    font-size: 12px;
    color: rgb(100, 100, 100);
}

/* list item */
.projectsPane .projectListItem span.thelink{
    text-decoration: underline;
    color: #4675A8;
    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 .projectName{
    position: relative;
    font-weight: bold;
    padding: 0 0 7px 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: #4675A8;
    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; }
}