.functionSearch {
    background-color:rgba(255,255,255,0.1);
    border-radius:4px;
    position:relative;
    border-radius:3px;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
    margin:5px;
}

.phone .functionSearch{
    margin: 0;
}

.functionSearch:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.functionSearch.active {
    background-color: #fff;

    -webkit-transition: background-color 0.2s ease-in-out;
    -moz-transition: background-color 0.2s ease-in-out;
}

.phone .functionSearch, .easy .functionSearch {
    display: block;
}

.phone .blindOptions .functionSearch, .easy .blindOptions .functionSearch {
    margin: 5px;
}

.functionSearch.active {
    background-color: #fff;
}

.functionSearch input {
    width: 120px;
    margin: 0;
    height: 20px;
    line-height: 20px;
    padding: 4px;
    background: none;
    border: solid 1px transparent;
    border: solid 1px rgba(255,255,255,0.1);
    position: relative;
    border-radius: 3px;
    outline: none;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
}

.functionSearch:not(.active) input{
    color:white;
}

/* Hide clear buttons */
.functionSearch input::-ms-clear {  display: none; width : 0; height: 0; }
.functionSearch input::-webkit-search-cancel-button { display: none; }

.phone .functionSearch input, .easy .functionSearch input {
    width: 100% !important;
    padding-right:40px;
}

.functionSearch input:focus,
.functionSearch.shown input{
    width: 230px;
}

.functionSearch .suggestionPane {
    display:none;
    z-index:1001;
    width:auto;
    min-width: 400px;
    background-color: #fff;
    border: solid 1px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    -moz-shadow: 0 1px 3px rgba(0,0,0,0.2);
    position: absolute;
    max-height: 300px;
    overflow: hidden;
}


 .functionSearch.shown .suggestionPane
 {
    display: block;
}

 .functionSearch.enqInput .suggestionPane, .functionSearch .suggestionPane.empty {
     display: none;
 }

 .phone  .functionSearch .suggestionPane,  .easy  .functionSearch .suggestionPane {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: rgba(255,255,255,0.5);
    right: 0;
    left: 0;
    min-width: initial;
    margin-top: 5px;
    max-height: initial;
 }

 .functionSearch  span.itemLabel
{
    display: block;
}

 .functionSearch a.enq  span.itemLabel {
     margin-right: 45px;
 }

.functionSearch .itemLabel, .functionSearch .altLabel, .functionSearch .roleTitle {
    padding: 2px 0;
}

 .functionSearch mark {
      background-color: transparent;
 }

 .functionSearch .suggestionPane > .funcs, .functionSearch .suggestionPane > .roles {
    overflow: auto;
 }

.functionSearch .suggestionPane > .funcs {
    border-bottom: solid 10px rgba(0, 0, 0, 0.2);
}

.functionSearch .entSearchItem {
    display: block;
    padding-top: 5px;
    padding-bottom: 8px;
    padding-left: 40px;
    min-height: 2em;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    position: relative;
    text-decoration: none;
}

.functionSearch .roles .entSearchItem {
    cursor: pointer;
}

/* Phone menu */
.blindOptions .functionSearch .suggestionPane .entSearchItem, .blindOptions .functionSearch {
    color: initial;
}

.functionSearch a.selected {
    background-color: white;
}

/*.functionSearch a:hover {
    background-color: rgba(0,0,0,0.05);
}*/

 .functionSearch .disabled:hover .itemLabel {
     text-decoration: none;
 }

.functionSearch .entSearchItem span {
    vertical-align: middle;
    line-height: 1.4em;
}

.functionSearch .entSearchItem.disabled {
    cursor: default;
    opacity: 0.7;
}

.functionSearch .entSearchItem.disabled .iconContainer {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
}

.functionSearch .iconContainer {
    position:absolute;
    left: 8px;
}

.functionSearch .funcLink .iconContainer {
    top: 8px;
    padding:0;
    border-radius:50%;
    background-image:url('https://cdn.t1cloud.com/cianywhere/content/base/images/whitegrad54opac100.png?v=12.0.50.0');
    background-repeat:repeat-x;
    background-position:0 -25px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.35);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

.functionSearch .role .iconContainer {
    top: 5px;
}

.functionSearch .iconContainer > span {
    padding:0;
    display:block;
    position:relative;
    width:100%;
    height:100%;
    text-align:center;
    border-radius:50%;
}

.functionSearch .suggestionPane .iconContainer:after {
    position:absolute;
    top:0;
    left:0;
    right:0;
    border-radius: 4px 4px 0 0;
}

.functionSearch .suggestionPane .iconContainer:after {
    height:8px;
}

.functionSearch .iconContainer > span
{
    background-size: 100% 100%;
}

.functionSearch > .iconContainer {
    left: 3px;
    top: 3px;
}

.functionSearch.enqInput input {
    border-color: transparent !important;
    outline: none;
    padding-left: 30px;
    box-shadow: none;
}
.functionSearch.enqInput input:focus {
    border-radius: 0;
}

.functionSearch .suggestionPane .glyph:before
{
    margin: 3px 0;
}

.functionSearch input.placeholderVisible
{
    color: white !important;
}

.functionSearch .noResults
{
    text-align: center;
    margin: 20px 10px;
    padding: 10px;
    opacity: 0.3;
}

.functionSearch .enqSearch {
    display: block;
    position: absolute;
    top: 5px;
    bottom: 5px;
    right: 0;
    width: 40px;
    border-left: 1px solid rgba(0,0,0,0.1);
}

.functionSearch .enqSearch > .icon16 {
    position: absolute;
    top: 50%;
    margin-top: -12px;
    right: 10px;
}

.functionSearch .funcLink.cifunction .iconContainer > span {
    background-image:url('https://cdn.t1cloud.com/cianywhere/content/base/icons/64/cidefault.png?v=12.0.50.0');
   }

.functionSearch .funcLink .iconContainer > span {
    background-image:url('https://cdn.t1cloud.com/cianywhere/content/base/icons/64/c2default.png?v=12.0.50.0');
}

@media only screen and (device-width: 768px) and (orientation: portrait) {
	
	.bannerMiddle .bannerTitle {
		left:200px;
		right:200px;
	}
	
	#UserNavigation .loggedUser {
		display:none;
	}
	
    .functionSearch:before {
        font-family: 'iconGlyph';
        content:"\F044";
        font-size:16px;
        line-height:30px;
        padding:0 7px;
        display:block;
        float:left;
        color:#fff;
        -webkit-font-smoothing: antialiased;
    }

    .functionSearch input {
        width: 105px;
        width:30px;
		height:30px;
        margin-left:-30px;
		padding-left:24px;
		box-sizing:border-box;
    }
	
	.functionSearch.active {
		z-index:1;
	}
	
	.functionSearch.active input {
		padding-left:4px;
	}

    .functionSearch.enqInput input {
        max-width: 105px;
    }

    /* Shrink to fit nicely with */
    .functionSearch input:focus,
    .functionSearch.active input {
        width: 140px; 
    }
}


/** Phone stuff */

.functionSearchButton {
    position: absolute;
    display: none;
    right: 0;
    top: 0;
    width: 50px;
    height: 100%;
    border-bottom-left-radius: 0 !important;
    border-top-left-radius: 0 !important;
}

.functionSearch.active .functionSearchButton {
    display: block;
}


.hasSearchResult > .pageContent > *:not(.functionSearch){
    display: none !important;
}

.functionSearch .fsClearButton {
    display: none;
    border-radius: 12px;
    border: solid 1px rgba(0, 0, 0, 0.1);
    position: absolute;
    right: 55px;
    top: 4px;
    padding: 4px;
    color: rgba(0, 0, 0, 0.5);
}

body.easy .functionSearch .fsClearButton {
    color: black;
}

.functionSearch.hasClear.active .fsClearButton {
    display: block;
}

.functionSearch.hasClear.active > input {
    padding-right: 85px;
}


/* Scroll bar style */

.functionSearch ::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0.02);
}

.functionSearch *, body.easy input::-moz-placeholder {
    opacity: 1;
}

.phone .entSearchItem.ciworkplace {
    display: none;
}

/*-- Placeholder style --*/

.classicStyle .functionSearch input:focus::-webkit-input-placeholder {color: #656565;}
.classicStyle .functionSearch input:focus:-moz-placeholder { /* Firefox 18- */color: #656565;}
.classicStyle .functionSearch input:focus::-moz-placeholder { /* Firefox 19+ */color: #656565;}
.classicStyle .functionSearch input:focus:-ms-input-placeholder { /* IE 10+ */color: #656565;}
.classicStyle .functionSearch input:focus::-ms-input-placeholder { /* Edge */color: #656565;}
.classicStyle .functionSearch input:focus:placeholder-shown,
.classicStyle .functionSearch input:active:focus:placeholder-shown { /* Standard one last! */color: #656565;}

.phone  .classicStyle .functionSearch .suggestionPane,  .easy .classicStyle  .functionSearch .suggestionPane {
    background-color: transparent !important;
}

.classicStyle .functionSearch .suggestionPane > .funcs {
    border-bottom: solid 4px rgba(0, 0, 0, 0.1) !important;
}

.classicStyle .functionSearch .suggestionPane .entSearchItem {
    border-bottom: solid 1px #e6e6e6 !important;
    background-color: transparent !important;
}

.classicStyle .functionSearch .suggestionPane .entSearchItem:hover, .classicStyle .functionSearch .entSearchItem.selected {
    background-color: rgba(0, 0, 0, 0.05) !important;
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/images/whiteopac50.png?v=12.0.50.0') !important;
}

.roleHoverMenu + .glyph{
    margin:0 12px;
}

.roleHoverMenu .roleLabel {
    border-radius: 4px; 
    padding: 4px 5px;
    padding-left: 10px;    
}

.roleHoverMenu  .roleLabel:hover {
    text-decoration: underline;
    opacity: 1;
}

.roleHoverMenuPanel {
    position: fixed;
    z-index: 100;
    left: 0;
    right: 0;
    top: 30px;    
    margin: 0;
    display: none;
    box-shadow: none;
    background: transparent;
}

.roleHoverMenuPanel > .tabHandles{
    padding: 10px 20px;
    
}

.roleHoverMenuPanel > .tabContents
{
    padding-left:20px;
    width: auto;
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
    border-radius: 0 0 20px 20px;
}
.roleHoverMenuPanel .tabContents > div {
    width: auto;
    overflow-y: auto;
    max-height: 300px;
    min-height: 230px;
}

.roleHoverMenuPanel.functionSearch:hover{
    background-color: transparent;
}

.roleHoverMenuPanel.functionSearch .funcs > div{
    display: none;
}

.roleHoverMenuPanel .entSearchItem {
    width: 22%;
    background: none;
    text-align: left;
    border: none;
    align-items: baseline;
    justify-content: center;
    padding: 0 0 0 40px;
    height: 40px;
    display: flex;
    flex-direction: column;
    font-size: 1.1em;
    float:left;
    font-weight: 600;
}

.functionSearch.roleHoverMenuPanel .entSearchItem:hover {
    text-decoration: underline !important;
}

.roleHoverMenuPanel .entSearchItem .altLabel, .roleHoverMenuPanel .enqSearch, .functionSearch.roleHoverMenuPanel .roles {
    display: none;
}

.roleHoverMenuPanel.shown{
    display: block;
}

.roleHoverMenuPanel  .tabHandle{
    border-bottom-style:solid;
    border-bottom-width:2px;
    margin-right:40px;
}
.roleHoverMenuPanel  .tabHandle.pointer{
    border-color: transparent;
    text-decoration: none;
}
.workplace .tile.expanded {
}

.tile.active > .iconContainer > span{
    background-image:url('https://cdn.t1cloud.com/cianywhere/content/base/icons/64/c2default.png?v=12.0.50.0');
}

.tile .actTileLoader {
    display: none;
}

.tile.expanded.loading .actTileLoader {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.tile.expanded.loading .loaderBG {
    position: absolute;
    width: 48px;
    height: 48px;
    top: 50%;
    left: 50%;
    margin-top: -24px;
    margin-left: -24px;
    background: url('https://cdn.t1cloud.com/cianywhere/content/base/images/loaderlrg.gif?v=12.0.50.0') no-repeat;
    background: url('https://cdn.t1cloud.com/cianywhere/content/base/images/loadersprite.png?v=12.0.50.0') top left / 100% 100% no-repeat;
    background-size: 576px 48px;
    -webkit-animation: play .8s steps(12) infinite;
    -moz-animation: play .8s steps(12) infinite;
    -ms-animation: play .8s steps(12) infinite;
    -o-animation: play .8s steps(12) infinite;
    animation: play .8s steps(12) infinite;
}


@media all and (min-width:0\0) and (min-resolution: .001dpcm) /*IE9 doesn't support css animation'*/
{
   .tile.expanded.loading .loaderBG {
        background: url('https://cdn.t1cloud.com/cianywhere/content/base/images/loaderlrg.gif?v=12.0.50.0') no-repeat;
    }
}

@-webkit-keyframes play {
   from { background-position: 0; }
     to { background-position: -576px; }
}

@-moz-keyframes play {
   from { background-position: 0; }
     to { background-position: -576px; }
}

@-ms-keyframes play {
   from { background-position: 0; }
     to { background-position: -576px; }
}

@-o-keyframes play {
   from { background-position: 0; }
     to { background-position: -576px; }
}

@keyframes play {
   from { background-position: 0; }
     to { background-position: -576px; }
}




.majorTiles .tile.expanded {

}

.tile.expanded > .iconContainer {

}

.tile.expanded > h4 {
    transition: width, 0.3s ease;
}

.tile .activeTileContent, .popupTileContainer .tile > .activeTileContent {
    display: none;
}

.tile.expanded .activeTileContent {
    display: block;
    padding: 10px;
}

.expanded .activeTileHeader {
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 30px;
    line-height: 18px;
    padding: 6px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.1em;
}

.tile.expanded .hyperlink:hover + .activeTileContent .activeTileHeader h3 {
    text-decoration: underline;
}

.majorTiles .expanded.disabled .hyperlink:before {
    display: none;
}

.expanded .hyperlink:hover:before {
    opacity: 1;
}

.expanded.tile .activeTileHeader h4, .activeTileBody .status {
    opacity: 0.5;
}

.tile.expanded .emptyMessage {
    height: 32px;
    line-height: 16px;
    position: absolute;
    right: 0;
    left: 0;
    text-align: center;
    top: 50%;
    margin-top: -16px;
    opacity: 0.25;
}

.tile.expanded .emptyMessage > .icon16.glyph {
    margin: 0 auto;
}


.tile.active .bodyHeader {
    text-transform: uppercase;
    padding: 4px 10px;
    margin: 0 -10px;
    line-height: 16px;
    border-bottom: solid 1px rgba(0,0,0,0.05);
    background-color: rgba(0, 0, 0, 0.025);
}

.tile.expanded .activeTileHeader h2 {
    float: left;
    margin-right: 6px;
    line-height: 18px;
    padding: 0;
}

.tile.expanded .activeTileHeader h2[title=''] {
    background-color: transparent;
}

.tile.expanded .activeTileHeader h3 {
    text-overflow: ellipsis;
    overflow: hidden;
}


.actTileContentScroll {
    position: absolute;
    top: 25px;
    left: 0;
    right: 0;
    bottom: 52px;
    overflow: auto;
}

.embed.expanded > .iconContainer {
    display: inline-block;
    margin: 5px 0 0 15px;
}

.embed.expanded > h4 {
    width: auto;
    display: inline-block;
    vertical-align: top;
    line-height: 60px;
}

.embed.expanded > .hyperlink {
    bottom: auto;
    height: 60px;
}

.embed.expanded > .activeTileContent {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 25px;
    top:105px;
    padding: 0;
    overflow: hidden;
}

.tile.embed .tileIcon {
    background-size: cover;
}

.embed.row2.col3.expanded > .activeTileContent{
    top:75px;
}

.dual.expanded > .iconContainer {
    margin: 8px 0 4px 6px;
    transform: scale(0.7, 0.7) translate(0, -12px);
}

.dual.expanded > h4 {
    line-height: 1.5em;
    overflow: hidden;
    height: 1.5em;
    text-overflow: ellipsis;
	margin-top: -52px;
    padding: 0 74px;
}

.dual.expanded > .hyperlink {
    height: 50px !important;
}

.dual.expanded > .activeTileContent {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 30px;
    top: 60px;
    padding: 0;
    overflow: hidden;
    z-index: 1;
}

.dual.expanded > .activeTileContent:hover {
    -webkit-overflow-scrolling: touch;
    overflow: auto;
}

.tile.dual .tileIcon {
    background-size: cover;
}

.activeTileFileUpload .icon32 {
    margin: 20px auto;
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/32/sm/plus-green.png?v=12.0.50.0');
    background-size: 100%;
}

.activeTileFileUpload > span {
    display: block;
    text-align: center;
}

.activeTileBody .bottomLinks .dataItem span, .tile.active .bottomLinks a {
    font-family: Osans, Arial, sans-serif;
}

.tile.active .bottomLinks span.icon16 {
    font-family: iconGlyph;
}

.activeTileBody {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30px;
    top: 130px;
    padding: 0 10px;
    overflow: hidden;
    cursor: default;
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/images/whiteopac90.png?v=12.0.50.0');
    z-index: 1;
}


.ticker .activeTileBody {
    padding: 0;
    background-image: none;
}

.tile .dataItem .icon16, .activeTileBody a .icon16 {
    float: left;
    margin: 4px 4px 0 0;
}

.activeTileBody a, .activeTileBody a:hover {
    color: inherit;
}

.bottomLinks .icon16:before {
    content: "\E061";
}

.activeTileBody .bottomLinks {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-top: solid 2px rgba(0,0,0,0.05);
    background-color: rgba(255,255,255,0.25);
}

.activeTileBody .bottomLinks a {
    opacity: 1;
    padding: 0 10px;
    clear: left;
}

.activeTileBody .dataItem {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    border-radius: 0;
    line-height: 24px;
    font-family: Osans, Arial, sans-serif;
    opacity: 0.7;
    padding: 12px 10px;
    border-top: solid 1px rgba(0, 0, 0, 0.05);
}

.no-flex-support .activeTileBody .dataItem {
    display:block;
    padding: 12px 75px 12px 10px;
}

.activeTileBody .dataItem .leftContainer{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    flex: 1;
}

.activeTileBody .actTileContentScroll .topLink:first-child > .dataItem:first-child {
    border-top-color: transparent;
}


.activeTileBody .bottomLinks .dataItem:first-child {
    border-top-color: transparent;
}

.activeTileBody .hTabContentActions .dataItem {
    margin-left:0
}

.activeTileBody .noSubtitle > .dataItem {
    padding-right: 10px;
}

.activeTileBody a.dataItem {
    opacity: 1;
}

.activeTileBody a.dataItem:hover {
    background-color: rgba(255, 255, 255, 0.35);
    opacity: 1;
}

.activeTileBody .noSubtitle .dataItem > .status {
    display: none;
}

.activeTileBody .status {
    font-size: 0.9em;
    margin-left: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
}

.no-flex-support .activeTileBody .status {
    position: absolute;
    right: 10px;
    max-width: 65px;
}

.tile.expandable .cornerArrow, .tile .play {
    display: block;
    cursor: pointer;
    bottom: 0;
    position: absolute;
    opacity: 0.7;
    z-index: 2;
}

.tile.expandable .cornerArrow {
    width: 30px;
    height:30px;
    right: 0;
    z-index: 1;
    -webkit-transition-property: background-color, opacity;
    -moz-transition-property: background;
    -ms-transition-property: background;
}

.tile .play {
    width: 16px;
    height: 16px;
    padding: 4px;
    right: 0;
    top: 0;
    line-height: 16px;
    opacity: 0.5;
    transform: scale(0);
    -webkit-transform: scale(0);
    visibility: hidden;
}


/* folder tile and guest user dont see video play button */
.folder.tile .play, body.guest .tile .play {
    display: none !important;
}

.tile .cornerArrow {
    display: none;
}

.tile.expandable .cornerArrow {
    display: block;
}

.tile.expandable .cornerArrow:before {
    margin: 8px;
}

.tile.disabled .cornerArrow {
    opacity: 0.2;
}

.tile .play:before {
    margin-left: -1px;
}

/* Help link available only T1 University is available */
.t1UniOpen .play:focus,
.t1UniOpen .tile:hover .play,
.t1UniOpen.tablet .tile .play {
    transform: scale(1);
    -webkit-transform: scale(1);
    visibility: visible;
}

body.desktop .play:hover {
   opacity: 0.75;
}

body.desktop .tile.expandable .cornerArrow:hover{
    opacity: 0.75;
    background-color: rgba(0, 0, 0, 0.35);
}

.tile.expandable.expanded .cornerArrow:before {
    content: "\E053";
}

.dragging.tile.expandable .cornerArrow,
.dragging.tile.expandable .activeTileContent,
.dragging.tile.expandable .play {
    display: none;
}

.dragging.tile.active h4 {
    padding-top: 5px;
}

/********************* Back office active folder styles *****************************/
.backoffice.expanded > .iconContainer {
    vertical-align: top;
}

.backoffice.expanded > .activeTileContent {
    display: block;
    padding: 0;
    margin: 10px 5px;
}

.backoffice.expanded > h4 {
}

.backoffice .activeTileContent > .tile {
    position: relative !important;
    background: transparent;
    border: none !important;
    display: block;
    margin: 5px;
    width: auto;
    height: auto;
}

/* Hide tile contents inside tile */
.backoffice .tile .activeTileContent{
    display: none;
}

.backoffice .activeTileContent > .tile h4 {
    margin: 2px;
    height: auto;
    position: absolute;
    top: 0;
    z-index: -1;
    left: 25px;
    right: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    line-height: 1.5em;
}
.tile .activeTileContent > .tile > .iconContainer {
    width: auto;
    height: 20px;
    margin: 0;
    display: block;
    border-radius: 2px;
    background: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}
.activeTileContent .tile .notificationCount,
.activeTileContent .tile .play  {
    display: none !important;
}

.activeTileContent > .tile > .iconContainer > span {
    width: 20px;
}

.backoffice .tile .play, .backoffice .tile .cornerArrow { /* tile inside tile */
    display: none;
}

.tile.disabled .cornerArrow {
    z-index: -1;
}

.backoffice.expanded .iconContainer > span {
    background-size: cover;
}

/**************************************************/

.ticker.hTabContentBody {
    margin-top: 10px;
    bottom: auto !important;
}

.ticker .arrow {
    position: absolute;
    padding: 0;
    top: 0;
    bottom: 16px;
    background: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    opacity: 0.8;
    z-index: 2;
}

.ticker .arrow:hover {
    opacity: 1;
}

.ticker .arrow:hover .icon16 {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/images/whiteopac10.png?v=12.0.50.0');
    background-repeat: repeat;
}

body.desktop .tile.ticker .arrow:hover, .touch .tile.ticker .arrow {
    opacity: 1;
    background: url('https://cdn.t1cloud.com/cianywhere/content/base/images/blackopac10.png?v=12.0.50.0');
}


.ticker .left.arrow {
    left: 0;
}

.ticker .left .icon16, .ticker .right .icon16 {
    font-family: iconGlyph;
    font-size: 16px;
    text-align: center;
    line-height: 16px;
    display: block;
    -webkit-font-smoothing: antialiased;
    speak: none;

    color: #fff;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
    padding: 5px 0;
}

.ticker .left .icon16:before { content: "\E062"; }


.ticker .right.arrow {
    right: 0;
}

.ticker .right .icon16:before { content: "\E061";  }

.ticker .tickerScroller {
    height: 153px;

    overflow: hidden;
    white-space: nowrap;
}

.ticker .tickerItem.moveLeft {
    margin-left: -100%;
}


.ticker .tickerItem {
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    -webkit-transition: 0.3s ease-in-out;
    -webkit-transition-property: margin;
    background-size: cover;
    background-position: top left;
    border-radius: 0;
    position: relative;

}

.ticker .tickerItem img {
    width: 100%;
    height: 100%;
    display: block;
}

.tickerItem span {
    position: absolute;
    bottom: 0;
    width:100%;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.65);
    color: #fff;
    line-height: 16px;
}


.tile.hyper .activeTileBody {
    padding: 0;
}

.tile > .iconContainer {
    /*margin: 10px 34px;*/
    -webkit-transition: margin 0.2s ease-out;

    transition: margin,width,height, 0.1s ease-out;
}


.tile.folder > .iconContainer > .tileIcon {
    background-size: cover;
}

.hyperTabHandles {
    height: 50px;

    border-bottom: solid 1px rgba(0,0,0,0.05);
    box-sizing: border-box;
}

.hyperTabsContent {
    top: 50px;
}

.noIcon.hyperTabHandles {
    height: 25px;
    background-color: rgba(0, 0, 0, 0.025);
}
.noIcon.hyperTabsContent {
    top: 24px;
}

.hyperTabHandles .hTabHandle {
    float: left;
    height: 100%;
    padding: 4px 0;
    opacity: 0.80;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    border-bottom: solid 2px transparent;
    box-sizing: border-box;
}

.hyperTabHandles .hTabHandle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.hyperTabHandles .hTabHandle:hover {
    opacity: 0.75;
}
.tabs1.hyperTabHandles .hTabHandle {
    float: none;
}

.tabs2.hyperTabHandles .hTabHandle {
    width: 49.2%;
    margin-left: 1.6%;
}

.tabs2.hyperTabHandles .hTabHandle:first-child {
    margin-left: 0;
}

.tabs3.hyperTabHandles .hTabHandle {
    width: 32.4%;
    margin-left: 1.4%;
}

.tabs3.hyperTabHandles .hTabHandle:first-child {
    margin-left: 0;
}

.hTabHandle span {
    display: block;
    text-align: center;
}

.hTabHandle .htHandleLabel {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 2px 0;
}

.hTabHandle .icon16 {
    margin: 4px auto;
}

.noIcon .hTabHandle > .icon16{ display: none;}
.noIcon .hTabHandle > span { line-height: 16px; }
.tabs1 .hTabHandle > span{ text-align: left;text-transform: uppercase; padding-left:10px; }

.hyperTabsContent {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    white-space: nowrap;
    overflow: hidden;
}

.hyperTabHandles .hTabHandle.selected, .hyperTabsContent {
    opacity: 1;
    cursor: default;
}

.hyperTabHandles .hTabHandle.selected {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/images/whiteopac10.png?v=12.0.50.0');
    border-bottom: solid 2px;
}

.tabs1.hyperTabHandles .hTabHandle.selected {
    border-bottom-color:transparent;
}

.hTabHandle .notificationCount {
    position: absolute;
    top: 5px;
    right: 10px;
}

.hTabContent {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
    vertical-align: top;
    transition: margin 0.3s ease-in-out;
}

.hyperHeader {
    line-height: 16px;
}

.tile.hyper .activeTileBody {
    top: 130px;
}

.hTabContentBody {
    background: url('https://cdn.t1cloud.com/cianywhere/content/base/images/whiteopac5.png?v=12.0.50.0') repeat;
    background: rgba(255,255,255,0.05);
    position: absolute;
    top: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    right: 0;
    left: 0;
}


.hTabContentBody::-webkit-scrollbar-thumb:vertical,
.hTabContentBody::-webkit-scrollbar-thumb:horizontal {
	background-color: rgba(0, 0, 0, 0.15);
}

.hTabContentBody::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.25);
}

.hTabContentBody::-webkit-scrollbar-track {
	background-color: transparent !important;
    box-shadow: none !important;
}

.hTabContentBody::-webkit-scrollbar-track {
    background: transparent;
}

.hTabContentActions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255,255,255,0.25);
    border-top: solid 2px rgba(0,0,0,0.05);
    box-sizing: border-box;
}

.hyperTextItem {
    display: block;
    position: relative;
    border-top: solid 1px rgba(0, 0, 0, 0.05);
}

.hTabContentBody .hyperTextItem:first-child, .hTabContentActions > .dataItem:first-child {
    border-top-color:transparent;
}

.hyperTextItem .icon16 {
    display: inline-block;
    margin: 10px;
}

.hyperTextItem .userDetails {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -20px;
    z-index: 2;
    padding: 5px;
}

.hasUserImage.content > .header  {
    padding-right: 28px;
}

.hyperTextItem .content {
    padding-left: 30px;
    margin-top: -36px;
    display: block;
    padding-right: 10px;
}

.hyperTextItem a.content:hover {
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.35);
    background-repeat: repeat;
}

.hyperTextItem a.content:hover span.header > .leftContent {
    text-decoration: underline;
}

.hyperTextItem .content > * {
    text-overflow: ellipsis;
    overflow: hidden;
    display: block;
}

.hyperTextItem .content > span {
    display: block;
}

.hyperTextItem .content > span .rightContent {
    float: right;
    padding-bottom: 1px;
}

.hyperTextItem .content > .header {
    margin-top: 3px;
}

.hyperTextItem .content > span .leftContent {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    padding-bottom: 1px;
}


.hyperTextItem .hyperDesc {
    display: block;
}

.hyper .activeTileBody .dataItem {
    padding: 0 10px;
    margin: 0;
}

.discoveryOn .hasUpdates > .glyph {

}

/*--Active tile icon glyphs--*/

.tile.expandable .icon16:before { display: block; }
.hTabHandle .icon16.actTiletest:before,
.tile .icon16.actTileActioned:before { content:"\E184" }
.tile .icon16.actTileAdd:before { content: "\002B"; }
.tile .icon16.actTileAdded:before { content: "\E142"; }
.tile .icon16.actTileAdHocDevGoal:before { content:"\E279"; }
.tile .icon16.actTileAdHocPerfGoal:before { content:"\E278"; }
.tile .icon16.actTileAdHocSkills:before { content:"\E280"; }
.hTabHandle .icon16.actTileticker:before,
.tile .icon16.actTileAlarm:before { content: "\E154"; }
.hTabHandle .icon16.actTilerepeat:before,
.tile .icon16.actTileAnnualLeave:before { content: "\E189"; }
.tile .icon16.actTileAppeal1:before { content: "\E266"; }
.tile .icon16.actTileAppointment:before { content: "\E014"; }
.tile .icon16.actTileAppraisals:before { content:"\E276"; }
.tile .icon16.actTileBell:before { content:"\E290"; }
.tile .icon16.actTileBiEnquiry:before { content:"\E208" }
.tile .icon16.actTileBookings:before { content: "\E132"; }
.tile .icon16.actTileCamera:before { content:"\E288"; }
.tile .icon16.actTileCatalogueCategory:before { content: "\E017"; }
.tile .icon16.actTileCatalogueClass:before { content: "\220F"; }
.tile .icon16.actTileCatalogue:before { content: "\E232"; }
.tile .icon16.actTileCatalogueGroup:before { content: "\E234"; }
.tile .icon16.actTileCatalogueProduct:before { content: "\E249"; }
.tile .icon16.actTileCheckedIn:before { content: "\E193"; }
.tile .icon16.actTileCheckedOut:before { content: "\E224"; }
.tile .icon16.actTileClock:before { content: "\E068"; }
.tile .icon16.actTileCogs:before { content: "\E216"; }
.tile .icon16.actTileColumns:before { content: "\E291"; }
.tile .icon16.actTileCompetencies:before { content:"\E275"; }
.tile .icon16.actTileContract:before { content:"\E292"; }
.tile .icon16.actTileContracts:before { content:"\E293"; }
.tile .icon16.actTileCrosstab:before { content: "\E207"; }
.tile .icon16.actTileCPM-InProgress:before { content:"\E131" }
.tile .icon16.actTileDashboards:before { content: "\E080"; }
.tile .icon16.actTileDevelopmentGoals:before { content:"\E236"; }
.tile .icon16.actTileDocClock:before { content:"\E287"; }
.tile .icon16.actTileDot:before { content:"\E269"; }
.tile .icon16.actTileDownload:before { content: "\E05A"; }
.tile .icon16.actTileDraft:before { content:"\E289"; }
.tile .icon16.actTileEmail:before { content: "\E203"; }
.tile .icon16.actTileEmployeeAlert:before { content:"\E274"; }
.tile .icon16.actTileEngagements:before { content: "\E240"; }
.tile .icon16.actTileError:before { content: "\E185"; }
.tile .icon16.actTileExports:before { content:"\E294"; }
.tile .icon16.actTileEscalated:before { content: "\E157"; }
.tile .icon16.actTileFax:before { content: "\E201"; }
.tile .icon16.actTileFinancialDocument:before { content: "\E197"; }
.tile .icon16.actTileFolder:before { content: "\E056"; }
.tile .icon16.actTileGeneralCommunication:before { content:"\E272"; }
.tile .icon16.actTileGrouping:before { content:"\E299"; }
.tile .icon16.actTileHold:before { content: "\E156"; }
.tile .icon16.actTileHoliday:before { content: "\E196" }
.tile .icon16.actTileImports:before { content: "\E295"; }
.tile .icon16.actTileInactive:before { content: "\E155"; }
.tile .icon16.actTileInProgress:before { content: "\E199"; }
.tile .icon16.actTileInvitation:before { content: "\E033"; }
.tile .icon16.actTileLeave-Cancel:before { content: "\E209"; }
.tile .icon16.actTileLeave-Change:before { content: "\E206"; }
.tile .icon16.actTileLeave-Request:before { content: "\E205"; }
.tile .icon16.actTileLeaveRequests:before { content:"\E284"; }
.tile .icon16.actTileLicences:before { content:"\E281"; }
.tile .icon16.actTileLicencesExpired:before { content:"\E308"; }
.tile .icon16.actTileLocation:before { content: "\E215"; }
.tile .icon16.actTileMyRequisition:before { content: "\E187"; }
.tile .icon16.actTileNoApprovedPerformancePlan:before { content:"\E285"; }
.tile .icon16.actTileNoReports:before { content: "\E155"; }
.tile .icon16.actTileOlderMail:before { content: "\E183"; }
.tile .icon16.actTileOverdueAppraisal:before { content:"\E286"; }
.tile .icon16.actTilePending:before { content: "\E155"; }
.tile .icon16.actTilePerformanceGoals:before { content:"\E153"; }
.tile .icon16.actTilePerson:before { content: "\E050"; }
.tile .icon16.actTilePhone:before { content: "\E202"; }
.tile .icon16.actTilePriorityHigh:before { content:"\E268"; }
.tile .icon16.actTilePriorityLow:before { content:"\E270"; }
.tile .icon16.actTilePriorityNormal:before { content:"\E271"; }
.tile .icon16.actTilePurchaseOrder:before { content: "\E222"; }
.tile .icon16.actTilePurchaseReq:before { content: "\E016"; }
.tile .icon16.actTileRejected:before { content: "\E188"; }
.tile .icon16.actTileReload:before { content: "\E296"; }
.tile .icon16.actTileReloadDoc:before { content: "\E297"; }
.hyperTextItem .icon16:before,
.tile .icon16.actTileReport:before { content: "\E200"; }
.tile .icon16.actTileReportPacks:before { content: "\E198"; }
.tile .icon16.actTileRequest:before { content: "\E204"; }
.tile .icon16.actTileRequestPlane:before { content:"\E283"; }
.tile .icon16.actTileSearch:before { content: "\E044"; }
.tile .icon16.actTileSearch2:before { content: "\F044"; }
.tile .icon16.actTileSearchCatalogue:before { content: "\E163"; }
.tile .icon16.actTileSearchDocument:before { content: "\E162"; }
.tile .icon16.actTileShow:before { content: "\E148"; }
.tile .icon16.actTileSickDay:before { content: "\E195"; }
.tile .icon16.actTileSickLeave:before { content: "\002B"; }
.tile .icon16.actTileSkills:before { content:"\E277"; }
.tile .icon16.actTileSort:before { content: "\E298"; }
.tile .icon16.actTileStockTransactions:before { content: "\E165"; }
.tile .icon16.actTileSubmitted:before { content: "\E223"; }
.tile .icon16.actTileSupplier:before { content: "\E218"; }
.tile .icon16.actTileSupplierProfile:before { content: "\E235"; }
.tile .icon16.actTileSupplierProduct:before { content: "\E227"; }
.tile .icon16.actTileTask:before { content: "\E140"; }
.tile .icon16.actTileTeam:before { content: "\E211"; }
.tile .icon16.actTileTick:before { content: "\E066"; }
.tile .icon16.actTileTickCircle:before { content: "\E186"; }
.tile .icon16.actTileTickSquare:before { content: "\E140"; }
.tile .icon16.actTileTimesheets:before { content: "\E191"; }
.tile .icon16.actTileTimesheet-Draft:before { content: "\E210"; }
.tile .icon16.actTileTraining:before { content:"\E172"; }
.tile .icon16.actTileTrainingRequests:before { content:"\E282"; }
.tile .icon16.actTileTruck:before { content: "\E101"; }
.tile .icon16.actTileUnreadMail:before { content: "\E182"; }
.tile .icon16.actTileUpcomingTraining:before { content:"\E273"; }
.tile .icon16.actTileWarning:before { content: "\E135"; }
.tile .icon16.actTileZoomIn:before { content: "\E302"; }
.tile .icon16.actTileZoomOut:before { content: "\E303"; }



@media \0screen {

    .tickerItem span {
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#A5000000', endColorstr='#A5000000');
    }

    .tile .play, .tile.expanded .play {
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
    }

    .tile .play:hover, .tile.expanded .play:hover {
          filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
    }
}


/*-------------------------------------------POPUP TILE LIST --------------------------------*/
#popupTileContainerWrapper
{
    z-index: 9002;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    background: rgba(255, 255, 255, 0.5);
    
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    -ms-transition-property: opacity;
}

#popupTileContainerWrapper > .fixedWidth {
    height: 100%;
}

#popupTileContainerWrapper, #popupTileContainer {
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition:0.3s ease-in-out;
    -ms-transition:0.3s ease-in-out;
}

#popupTileContainer
{
    left: 0;
    right: 0;
    height: 0;
    position: absolute;
    z-index: 9010; 
    overflow:hidden;

    -webkit-transition-property: height, margin;
    -moz-transition-property: height, margin;
    -ms-transition-property: height, margin;
}

.minor #popupTileContainer {
    top: auto;
    border: none;
}

.folder #popupTileContainer {
    top: 50%;
}

#popupTileContainer > header
{
    padding: 10px 45px;
    position: relative;
}

#popupTileContainer > header:before {
    font-family: iconGlyph;
    font-size: 16px;
    text-align: center;
    line-height: 30px;
    display: block;
    -webkit-font-smoothing: antialiased;
    speak: none;
    content: "\E056";
    position: absolute;
    top: 10px;
    left: 15px;
}

#popupTileContainer > header div, 
#popupTileContainer > header input.editGroupTitle
{
    font-size: 1.6em;
    padding: 2px 4px;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-radius: 3px;
    height: 32px;
}

#popupTileContainer button.close, #VideosPopup > button {
    position: absolute;
    right: 5px;
    top: 10px;
    background: transparent;
    border: none;
    box-shadow: none;
    opacity: 0.75;
    z-index: 1;
}

#VideosPopup > button {
    opacity: 1;
}

#popupTileContainer button.close .icon16 {
    background: none;
}

#popupTileContainer button.close:hover, #popupTileContainer button.close:active,  #VideosPopup > button:active {
    opacity: 1;
}

#popupTileContainer button.close .icon16:before {
    font-family: iconGlyph;
    font-size: 16px;
    text-align: center;
    line-height: 16px;
    display: block;
    -webkit-font-smoothing: antialiased;
    content: "\E058";
}

#PopupHeader
{
    display: block;
    min-height: 23px;
    line-height: 26px;
    border: solid 1px transparent;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
}

.folder .editable #PopupHeader:hover
{
    cursor: pointer;
    border: solid 1px #c4c4c4;
}

#popupTileContainer .inputClearButton {
    margin-top: 4px;
}

#popupTileContainer > .content
{
    position: relative;
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch;
}

#popupTileContainer > .content {
    height: 85%;
}

.folder #popupTileContainer > .content {
    min-height: 315px;
}

#popupTileContainer input.editGroupTitle
{
    display: none;
    outline: none;

}

#popupTileContainer .loader
{
    position: absolute;
    left: 45%;
    top: 45%;
    width: 100px;
    height: 33px;
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/images/loaderv2.gif?v=12.0.50.0');
    border: rgba(0, 0, 0, 0.2) 1px solid;
    border-radius: 5px;
}

/**************************** BI Dashboard *************************/

#popupTileContainerWrapper.bi .content
{
    height: 100%;
}

#popupTileContainer .content .tile
{
    float: none;
}

.workplacePopupWrapper .navigation {
    display: none;
}


#pageLoader > * {
    position: absolute;
    top: 50%;
    left: 50%;
}

#pageLoader .t1Logo {
    width: 205px;
    height: 45px;
    margin-left: -102px;
    margin-top: -16px;
    border-top: solid 1px rgba(0,0,0,0.2);
}

.screenReader-text {
    position: absolute;
    left: -999px;
    width: 1px;
    height: 1px;
    top: auto;
}

.screenReader-text:focus {
    color: white;
    display: inline-block;
    height: auto;
    width: auto;
    position: static;
    margin: auto auto 1px;
}

#MainContainer {
    background-color: transparent;
}

    #MainContainer > *, .tile {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

/** To fix input text selection **/

.tablet .fixedWidth, .tablet #MainContainer {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
}

.tablet .fixedWidth {
    max-width: 100%;
}

#MainContainer > .contentContainer {
    min-height: 100%;
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    padding-bottom: 0;
    width: auto;
    min-height: 500px;
    bottom: 25px;
    width: 100%;
}

/* iPad Landscape */

body.ios7.landscapeMode {
    height: 100% !important;
    min-height: 100% !important;
}

body.ipad.landscapeMode.ios7 > #MainContainer {
    min-height: 100% !important;
}

body.ios7.landscapeMode > #MainContainer > .contentContainer {
    height: auto;
    min-height: 500px !important;
}


#popupTileContainerWrapper {
    min-height: 600px;
    min-height: 607px;
}

#GlobalFooter {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    width: auto;
}

.bannerLeftSection {
    display: inline-block !important;
}

    .bannerLeftSection .fav {
        visibility: hidden;
    }

.topBar .fixedWidth > div > ul > li {
    z-index: 1001;
}

#GlobalHeader, .searchWorkplace {
    z-index: 1001;
    position: relative;
}

    .searchWorkplace .controlContainer {
        margin-left: 10px;
        -webkit-transition: 0.2s linear;
        -moz-transition: 0.2s linear;
        -webkit-transition-property: margin;
    }

    .searchWorkplace .controlContainer {
        margin-left: 60px;
    }

    .searchWorkplace, .searchWorkplace .fixedWidth {
        height: 0;
    }

        .searchWorkplace .textBoxControl {
            display: inline-block;
            margin-top: -35px;
        }

#WorkplaceScrollerWrapper {
    position: relative;
    /*test to remove js heights*/
    /*box-sizing: border-box;
    padding-bottom: 160px;*/
}

.workplace {
    height: 100%;
    min-height: 100%;
}

#popupTileContainer > .content {
    margin: 0 38px;
}

.bi #popupTileContainer > .content,
#popupTileContainer.popupMenuList > .content {
    position: relative;
    margin: 0 40px;
}


/*
***************************************** Navigation ******************************************************
*/

.navigation {
    width: 40px;
}

.workplace .navigation, #popupTileContainer .navigation {
    position: absolute;
    z-index: 1000;
    top: 0;
}

#popupTileContainer .navigation {
    background: none;
    bottom: 0;
    display: none;
}

    #popupTileContainer .navigation.next:hover {
        background-position: top right;
    }

.navigation .icon {
    opacity: 0.3;
    transition: opacity 0.3s;
}

.navigation.enabled .icon {
    opacity: 0.7;
}

    .navigation.enabled .icon:hover {
        opacity: 0.9;
    }

.navigation .icon:before {
    font-family: iconGlyph;
    font-size: 24px;
    text-align: center;
    display: block;
    -webkit-font-smoothing: antialiased;
    speak: none;
}

.navigation.prev .icon:before {
    content: "\E062";
}

.navigation.next .icon:before {
    content: "\E061"
}

.navigation.enabled:hover, .navigation.enabled:hover .icon {
    cursor: pointer;
}

/* Roles Navigator */

#RolesPanel .navigation {
    width: 39px;
    width: 40px;
    position: relative;
}

#RolesPanel .navigation.prev {
    float: left;
    background: none;
    margin-right: 1px;
}

#RolesPanel .navigation.next {
    float: right;
    background: none;
    margin-left: 1px;
}

#popupTileContainer.popupMenuList .navigation {
    display: block;
}

.workplace .navigation.prev,
#RolesPanel .navigation.prev {
    background-position: top left;
}

.navigation.next {
    right: 0;
    top: 0;
}

.navigation .icon {
    position: absolute;
    top: 50%;
    margin-top: -30px;
    width: 40px;
}

.workplace .navigation {
    bottom: 150px;
}

.workplaceNavigator .navigation .icon {
    width: 40px;
    top: 0;
    margin: 0;
}

.workplace .content {
    white-space: nowrap;
    overflow: hidden;
}

.workplaceRoles {
    white-space: normal;
    display: inline-block;
    vertical-align: top;
}

    .workplaceRoles h1 {
        font-size: 1.6em;
        font-weight: normal;
        height: auto;
        padding: 15px 0;
        margin: 0 40px;
    }

    .workplaceRoles .leftTileContainer {
        width: 118px;
        float: left;
        margin-left: 40px;
    }

    .workplaceRoles .rightTileContainer {
        width: 118px;
        float: right;
    }

    .workplaceRoles .centerTileContainer {
        position: relative;
        display: block;
        height: 100%;
        margin: 0 40px;
        /*test to remove js heights*/
        /*height: auto !important;
    box-sizing: border-box;
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;*/
    }

.centerTileContainer .majorTiles {
    margin: 0 18px;
    position: relative;
}

.worpklaceNavigator {
    width: 100%;
    position: relative;
}

.workplaceRoles.home {
    position: relative;
}

.recycleBin {
    display:none;
    position: absolute;
    top: 5px;
    width: 60px;
    height: 55px;
    right: 30px;
    background-color: rgba(255,255,255,0.1);
    border-radius: 32px;
    -ms-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -webkit-transition: 0.3s linear;
    -moz-transition: 0.3s linear;
    -webkit-transition-property: -webkit-transform, background, color;
    -moz-transition-property: -moz-transform, background, color;
}

.workplaceRoles.home .recycleBin {
    display: block;
}

.recycleBin:before {
    font-family: iconGlyph;
    font-size: 32px;
    text-align: center;
    line-height: 32px;
    margin-top: 8px;
    display: block;
    -webkit-font-smoothing: antialiased;
    speak: none;
    content: "\E057";
}

.recycleBin.on {
    opacity: 0.8;
    background-color: rgba(255,255,255,0.5);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
}

.recycleBin.interact, .recycleBin.deleted.interact {
    background-position: center -80px;
}

.recycleBin.deleted {
    background-position: center bottom;
}

.role.tile {
    width: 160px;
    box-sizing: border-box;
    padding-bottom: 14px;
}

.role.tile {
    position: relative;
    margin: 0;
    border: none;
    float: left;
    cursor: pointer;
    overflow: hidden;
    padding-right: 10px;
    transition: none;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
}

    .role.tile.selected .inlineHeader {
        opacity: 1;
    }

#FilterPanel {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    box-shadow: 3px -3px 5px rgba(0,0,0,0.3);
    -webkit-overflow-scroll: touch;
    max-height: 200px;
    overflow-y: auto;
    width: auto;
}

    #FilterPanel.shown {
        visibility: visible;
        opacity: 1;
        z-index: 1;
    }

#PinnedRoles {
    float: left;
    -webkit-transition: height 0.3s ease-in;
}

.role .roleAction {
    display: none;
    font-size: 16px;
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    bottom: 0;
}

#FilterRoles > .tile.role.filterRole {
    border: solid 1px rgba(255,255,255,0.1);
}

.tile.role.filterRole .inlineHeader {
    margin-left: 0;
    box-sizing: border-box;
}

#FilterPanel .filterRole {
    display: block;
    float: none;
    width: auto;
    padding-right: 15px;
}

#FilterRoles.noFilter {
    display: none;
}

#FilterRoles {
    float: left;
    position: relative;
}

.filterRole .activeTick {
    display: none;
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 100;
    opacity: 0.7;
}

.filtered .filterRole.selected .activeTick {
    display: block;
    opacity: 1;
}

#FilterPanel .iconContainer {
    display: none;
}

#FilterPanel .inlineHeader {
    padding-left: 10px;
}

.navigation .icon {
    line-height: 60px;
    height: 60px;
}

/** Role Bar Height adjustments */

.workplaceNavigator > * {
    min-height: 45px;
}

.workplaceNavContainer,
.workplaceNavContainer .role.tile,
.workplaceNavContainer .navigation .icon  {
    height: 45px;
}

.workplaceNavContainer .navigation .icon {
    line-height: 45px;
}

#WorkplacePages, #FilterPanel {
    bottom: 45px;
}

.funcGrpTabsContainer, #WpBottomLinks {
    bottom: 55px;
}

/** double role bar height */
.dblRoleBar .workplaceNavContainer, .dblRoleBar .role.tile, .dblRoleBar .workplaceNavContainer .navigation .icon {
    height: 60px;
}

.dblRoleBar .workplaceNavContainer .navigation .icon {
    line-height: 60px;
}

.dblRoleBar #WorkplacePages, .dblRoleBar #FilterPanel {
    bottom: 60px;
}

.dblRoleBar .funcGrpTabsContainer, .dblRoleBar #WpBottomLinks {
    bottom: 75px;
}

body.noRole.guest .funcGrpTabsContainer {
    bottom: 30px;
}

.role.home {
    position: absolute;
    left: 0;
    -webkit-transition: all 0.3s ease;
}

.tile.role.home,
.tile.role.my, .tile.role.portalRole {
    width: 85px;
    padding-right: 0;
}

#RolesPanel .homeWrapper {
    width: 85px;
    float: left;
}

#RolesPanel > .role > .pin {
    display: none;
}

.role.home .roleAction {
    display: none !important;
}

.role.tile .iconContainer {
    margin: 0;
}

.onDark .role.tile .iconContainer {
    color: #fff;
}

#RolesScrollerWrapper {
    position: relative;
    height: 72px;
    width: auto;
    overflow: hidden;
}

    #RolesScrollerWrapper > div {
        height: 100%;
        padding: 0;
        overflow: hidden;
    }

/* ------------- Pin Roles -----------*/


.role.tile .pin {
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=35);
    opacity: 0.35;
}

.role .pin {
    display: none;
}

.role.filterRole .pin {
    display: none !important;
}

.role:hover .pin,
.pinnedRoles .role .pin {
    display: block;
}

.tile.role .pin:hover {
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    opacity: 1;
}

.pinnedRoles .role .pin {
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=75);
    opacity: 0.75;
}

.notAllowedPin #RolesScrollerWrapper .pin, .delegatedUser .role .pin {
    display: none;
}

.workplaceNavContainer {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.workplaceNavigator.singlePage .navigation {
    display: none;
}

/*--Pages--*/


#WorkplacePages {
    width: 100%;
    position: absolute;
    text-align: center;
}

/* Standard size (width + margin) is 10px */
.pages span {
    display: inline-block;
    vertical-align: top;
    width: 4px;
    height: 4px;
    border-radius: 4px;
    margin-right: 5px;
    margin-top: 2px;
    opacity: 0.2;
}

/* size 7px */
.s7px span {
    margin-right: 3px;
}
/* size 5px */
.s5px span {
    margin-right: 1px;
    width: 4px;
    height: 4px;
}
/* size 3px */
.s3px span {
    width: 2px;
    margin-right: 1px;
}
/* size 1px */
.s1px span {
    width: 2px;
    margin-right: 0;
}

.pages span.current {
    opacity: 0.9;
}


.searchMenuList::-webkit-input-placeholder,
.searchMenuList:-moz-placeholder,
.searchMenuList:-ms-input-placeholder {
    color: #000;
}


#popupTileContainerWrapper .tile.more, #popupTileContainerWrapper .tile.folder {
    z-index: 9011;
}

    #popupTileContainerWrapper .tile.more:after, #popupTileContainerWrapper .tile.folder:after {
        content: "";
        display: block;
        position: relative;
        margin: -8px auto;
        height: 16px;
        width: 16px;
        border-left: solid 1px;
        border-top: solid 1px;
        -ms-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        z-index: 9011;
    }

.home.tile.interact:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(255,255,255,0.1);
}

.role.tile.animateClick {
    -webkit-transform: scale(1.1);
}

#popupTileContainerWrapper .tile.animateClick {
    -webkit-transform: none;
}

/*--Tile dragging--*/

.tile.draggedPlaceholder > * {
    opacity: 0.3;
}

.tile > .iconContainer:hover, .tile.droppedDown > .iconContainer {
    text-decoration: none;
}

#popupTileContainerWrapper .tile.mydashboard > .iconContainer > span,
#popupTileContainerWrapper .tile.pwthumbnail > .iconContainer > span {
    border: none;
}

/*--64x64 icons--*/

.tile.def > .iconContainer > span {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/64/default.png?v=12.0.50.0');
    background-repeat: no-repeat;
    background-position: center;
}

.tile.def.mydashboard > .iconContainer > span {
    background: none;
    background-repeat: no-repeat;
}

.tile.folder > .iconContainer > span {
    background: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/64/folderframes.png?v=12.0.50.0') no-repeat center 0;
}

.tile.groupOpen > .iconContainer > span {
    background: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/64/folderframes.png?v=12.0.50.0') no-repeat center -132px;
}

.tile.more > .iconContainer > span {
    background: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/64/more.png?v=12.0.50.0') no-repeat center;
}

.tile.workplaceAlerts > .iconContainer > span {
    background: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/64/alert.png?v=12.0.50.0') no-repeat center;
}

body > .tile.dashboards > .iconContainer > span {
    background: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/64/gauge.png?v=12.0.50.0') no-repeat center !important;
}

.tile.dashboards > .iconContainer > span {
    border-radius: 0;
    border: solid 1px transparent;
    border: none;
    margin: 0;
}

.tile.cifunction > .iconContainer > span {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/64/cidefault.png?v=12.0.50.0');
}

.tile.ci2function > .iconContainer > span {
    background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/64/c2default.png?v=12.0.50.0');
}

.tile.bidashboard.mydashboard > .iconContainer > span {
    background-image: none;
}

.tile.pwthumbnail > .iconContainer > span {
    background-image: none;
    margin-bottom: -64px;
}

.tile.mydashboard > .iconContainer {
    background-repeat: no-repeat;
    background-position: center;
}

.suggestionPane .funcLink > .iconContainer:hover > span,
#workplaceScroller .tile > .iconContainer:hover > span:after, #popupTileContainerWrapper .tile > .iconContainer:hover > span:after {
    background-color: rgba(255, 255, 255, 0.2);
}

.dragL {
    background: url('https://cdn.t1cloud.com/cianywhere/content/base/images/insertlinel.png?v=12.0.50.0') no-repeat top left;
    background-size: 19px 100%;
}

.dragR {
    background: url('https://cdn.t1cloud.com/cianywhere/content/base/images/insertliner.png?v=12.0.50.0') no-repeat top right;
    background-size: 19px 100%;
}

.tile.dragging {
    z-index: 9003;
    -webkit-transform: scale(1.2);
}

    .tile.dragging.proxy {
        opacity: 0.5;
    }

.tile.addTo .type, .tile.delete .type {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 16px;
    height: 16px;
    padding: 4px;
    border-radius: 12px;
    background-color: #fff;
}

    .tile.addTo .type:before {
        content: "\E146";
        color: #000;
    }

    .tile.delete .type:before {
        content: "\E067";
        color: #ff0000;
    }


.tile.dragging h4 {
    height: auto;
}

.tile.draggedPlaceholder h4 {
    opacity: 0.2;
}

/*--More--*/

.tile.droppedDown > .iconContainer > span:after {
    height: 0;
    bottom: 0;
    border: none;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
}


.functionSearch .funcLink.role .iconContainer > span:before,
.tile.addTo .type, .tile.delete .type {
    font-family: iconGlyph;
    font-size: 16px;
    text-align: center;
    line-height: 16px;
    display: block;
    -webkit-font-smoothing: antialiased;
    speak: none;
}

.role .glyph:before {
    content: "\E050";
    opacity: 0.8;
}

.role.tile:hover > .iconContainer .glyph:before {
    opacity: 1;
}

.role.home .glyph:before {
    content: "\E04F";
}

.role.tile > .iconContainer span {
    border: none;
}

/*--Workplace Nav Hover and Selected styles--*/

.role.tile.selected:after {
    content: "";
    position: absolute;
    height: 4px;
    left: 0;
    bottom: 0;
    right: 0;
}

.filterRole.tile.selected:after {
    display: none;
}

.role.tile .iconContainer {
    position: absolute;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    border: solid 1px transparent;
}

.role.tile .iconContainer .glyph {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.role.tile .iconContainer, .role.tile .iconContainer .glyph {
    width: 32px;
    height: 40px;
}

.tile.role .inlineHeader {
    display: block;
    padding: 0 5px 0 32px;
    overflow: hidden;
    text-align: left;
    white-space: nowrap;
}

#FilterPanel .filterRole .inlineHeader {
    white-space: normal;
}

.role.home .inlineHeader, .role.my .inlineHeader, .role.portalRole .inlineHeader {
    padding-right: 0;
}

.centerTileContainer .majorTiles .tile, #popupTileContainer .content .tile {
    border-radius: 3px;
}

.role.tile.selected {
    background-color: rgba(0,0,0,0.05);
}

/*.role .iconContainer.tileIcon:after {
    content: "";
    display: block;
    position: absolute;
    left: 26px;
    top: -2px;
    border-top: solid transparent 22px;
    border-bottom: solid transparent 22px;
    border-left: solid rgba(0,0,0,0.2) 12px;
}
.role.selected .iconContainer.tileIcon {
    background: #df6c00;
    color: white;
}
.role.tile .iconContainer {
    background: rgba(0,0,0,0.2);
    padding-left: 5px;
    top: -2px;
    width: 20px;
}*/

.role.tile .inlineHeader > span {
    display: table;
    table-layout: fixed;
    width: 100%;
    overflow: hidden;
}

.tile.role .title {
    display: table-cell;
    height: 4em;
    vertical-align: middle;
}

.tile.selected > .iconContainer > span:hover {
    background-color: transparent;
}

.tile.workplaceAlerts > .iconContainer .notificationCount {
    top: 39%;
    left: 50%;
    margin-left: -14px;
    right: auto;
    border: solid 1px transparent;
    background: none;
    color: initial;
    box-shadow: none;
    -webkit-box-shadow: none;
    width: 24px;
    overflow: hidden;
}

.notificationCount.scalePulse {
    -webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
}

.notificationCount.scaleHide {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
}

.role.tile .notificationCount {
    top: 4px;
    right: -4px;
    width: auto;
    height: auto;
    padding: 1px 4px;
    margin: 0;
    border-radius: 7px;
}

.workplace .centerTileContainer .tile > .iconContainer .type, #popupTileContainer .tile > .iconContainer .type {
    position: absolute;
    left: -1px;
    bottom: -1px;
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: center;
    display: none;
}

/* Browsers */

.workplace .content, .workplaceRoles {
    height: 100%;
    /*test to remove js heights*/
    /*height: 100% !important;*/
}

.flowOpenerMenu {
    height: 0;
    bottom: 145px !important /* For workplace*/;
}

.flowOpenerMenu #FlowTile {
    margin-right: 50px;
}

.flowOpenerMenu .flowBubble .bubbleArrow {
    right: 70px;
}

.tablet #RolesPanel {
    height: auto;
}

.tablet .contentContainer {
    min-height: 570px;
}

.tablet #WorkplaceScrollerWrapper .navigation {
    display: none;
}

.tablet .workplaceRoles .leftTileContainer {
    margin-left: 0;
}

.tablet .workplaceRoles .rightTileContainer {
    margin-right: 0;
}

.tablet #RolesScrollerWrapper {
    overflow-y: auto !important;
}

.tablet .workplace .content {
    overflow-y: auto !important;
}


.tablet .workplaceRoles, #workplaceScroller {
    overflow-y: hidden !important;
    padding: 0;
}


.tablet .centerTileContainer .majorTiles {
    margin: 0;
}

.tablet .workplace .navigation {
    bottom: 81px;
}

.tablet .workplaceRoles.home .recycleBin {
    bottom: 85px;
}

/* ------------- Pin Roles -----------*/
.tablet .role .pin {
    display: none !important;
}

.tablet.landscapeMode .workplaceRoles {
    height: 100%;
}

.tablet.portraitMode .workplaceRoles {
    height: 100%;
    /*width: 768px;*/
}

    .tablet.portraitMode .workplaceRoles .centerTileContainer {
        padding-left: 30px;
        /*max-height: 900px;*/
    }

        .tablet.portraitMode .workplaceRoles .centerTileContainer .majorTiles {
            margin: 0 auto;
        }

@media screen and (max-width: 800px) {
    .tablet .role.tile, .tablet #FilterPanel {
        width: 118px;
    }

    .tablet .role.home, .role.my {
        width: 70px;
    }

    .compact .role.tile, .compact #FilterPanel {
        width: 100px;
    }

    .compact .role.home, .compact .role.my, .compact .role.portalRole, .compact #RolesPanel .homeWrapper {
        width: 70px;
    }
}

@media screen and (max-width: 1024px) {
    .tablet .role.tile, .tablet #FilterPanel {
        width: 118px;
    }

    .tablet .role.home, .role.my {
        width: 85px;
    }

    .compact .role.tile, .compact #FilterPanel {
        width: 100px;
    }

    .compact .role.home, .compact .role.my, .compact .role.portalRole, .compact #RolesPanel .homeWrapper {
        width: 70px;
    }
}


.tablet.portraitMode #RolesPanel .navigation {
    width: 30px;
}

.tablet.portraitMode .workplaceNavigator .navigation .icon {
    width: 30px;
}

/* ************************************
*****************IE 8 Support *********
***************************************/

@media \0screen {

    #MainContainer > .contentContainer {
        top: 65px;
    }

    .home .recycleBin.on {
        background-image: url("https://cdn.t1cloud.com/cianywhere/content/base/images/blackopac15.png?v=12.0.50.0");
    }

    .startNav li:first-child {
        background: none;
    }

    #FunctionSearch {
        background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/images/whiteopac20.png?v=12.0.50.0');
    }

    .tile > .iconContainer > span, #popupTileContainerWrapper .tile > .iconContainer > span {
        border: solid 1px #222222;
    }

    .centerTileContainer .majorTiles .tile, #popupTileContainer .content .tile {
        border-color: transparent;
    }

    .tile, #ShowMinorTiles a {
        background: url('https://cdn.t1cloud.com/cianywhere/content/base/images/blackopac5.png?v=12.0.50.0') repeat top left;
    }

    .workplaceRoles .tile.activeTile.expanded {
        background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/images/activetilebg.png?v=12.0.50.0');
    }

    .workplaceNavigator .tile {
        border-right-color: transparent;
        background-image: none;
    }

    .centerTileContainer {
        overflow-y: auto;
        margin-right: 40px;
        height: 90%;
    }

    .home .recycleBin {
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
    }

        .home .recycleBin.on {
            filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
        }

    #popupTileContainerWrapper {
        background: url('https://cdn.t1cloud.com/cianywhere/content/base/images/whiteopac20.png?v=12.0.50.0') !important;
    }

    .pages span {
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
    }

        .pages span.current {
            filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
        }

    .navigation .icon {
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=10);
    }

    .navigation.enabled .icon {
        filter: none;
    }

    #popupTileContainer .tile, #popupTileContainer .tile * {
        user-select: none;
    }

    #popupTileContainerWrapper .tile.more:after, #popupTileContainerWrapper .tile.folder:after, #ShowMinorTiles.less.more a:before {
        display: none;
    }

    #FunctionSearch .suggestionPane .funcLink.role > .iconContainer > span,
    .suggestionPane .funcLink.cifunction > .iconContainer > span,
    .suggestionPane .funcLink.ci2function > .iconContainer > span,
    .suggestionPane .funcLink.bidashboard > .iconContainer > span,
    .suggestionPane .funcLink.mydashboard > .iconContainer > span {
        background-image: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/24/workplace/wpsearchsprites.png?v=12.0.50.0');
        background-position: 0 0;
    }

    .suggestionPane .funcLink.cifunction > .iconContainer > span {
        background-position: -48px 0;
    }

    .suggestionPane .funcLink.ci2function > .iconContainer > span {
        background-position: -24px 0;
    }

    .suggestionPane .funcLink.bidashboard > .iconContainer > span,
    .suggestionPane .funcLink.mydashboard > .iconContainer > span {
        background-position: -72px;
    }

    #FilterPanel .filterRole .activeTick {
        display: none !important;
    }
}



/* Hide functionality for public access */
body.guest.noRole .workplaceNavContainer /* Bottom role bar */,
body.noRole .navigation /* Navigation */,
body.noRole #WorkplacePages{
    display: none;
}

/* When the role bar is hidden */
.guest.noRole #ShowMinorTiles {
    bottom: 40px;
}


body.s .userNavigation .buttonLabel {
    display: none;
}

body.s .bannerTitle {
    display: none;
}

body.s #FunctionSearch input:focus {
    width: auto;
}

#MainContainer {
    background: transparent;
}

#MainContainer > .contentContainer {
    background-color: transparent !important;

}

#PageTitle {

    margin-top: -5px;
    border-radius: 0 0 8px 8px;
}

#PageTitle .logo {
    display: none;
}

#PageTitle.themedSmallLogo .logo {
    display: block;
}

.themedSmallLogo {
    padding: 0 2px;
    width: 200px;
    height: 35px;
}

.themedSmallLogo .logo {
    height: 30px;
    width: 100%;
    margin-top: 5px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.simplified > .workplaceNavContainer, .simplified .navigation {
    display: none;
}

/** delegation bar  **/

.msgBar {
    border-top: solid 1px rgba(255, 255, 255, 0.3);
}

.noContentWrapper {
   position: absolute;
    top: 20%;
    left: 0;
    font-size: 2.5em;
    line-height: 1.5em;
    z-index: 1;
    opacity: 0.5;
    right: 0;
    text-align: center;
}

.noContentWrapper > .glyph {
    width: auto;
    margin-bottom: 20px;
}

.noContentWrapper a {
    text-decoration: underline;
    color: white;
}

.noContentBg {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0.8;
}
body.noContent .noContentBg {
    display: block;
}
body.noContent .noContentWrapper {
    display: block !important;
}

body.guest.noContent .bannerRight, body.guest.noContent .bannerLeft,
body.noContent #PanWpDiscoButtons, body.noContent .wpLinkRegion,
body.noContent .navigation, body.noContent .workplaceNavContainer {
    display: none !important;
}

#workplaceScroller .workplaceRoles.shown {
    display: inline-block;
}

/** Hide all the links that have tabindex for hidden workplaces **/
.majorTiles [tabindex="0"], .majorTiles a[href], .majorTiles button {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
    -webkit-transition: opacity 0.3s ease;
}
/** Except for the current workplace */
.current [tabindex="0"], .current a[href], .current button {
    visibility: visible;
    opacity: 1;
}

#workplaceScroller .workplaceRoles {
    display: none;
}

.workplaceRoles .icon12:hover, .workplaceRoles .icon16:hover {
    opacity: 1;
}


.tile, .dragInPlaceholder {
    position: absolute;
    width:130px;
    margin: 10px;
    height: 130px;
}

.tile, .dragInPlaceholder, .tile.dragging.end {
    transition: all 0.3s ease-in-out;
    -webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
}

.tile.toBeMoved {
    display: none;
}

.tile.dragging {
    height: 100px;
    transition: none;
    -webkit-transition: none;
    -moz-transition:none;
    -ms-transition:none;
    padding-bottom: 15px;
}

.tile.dragging.end {
    -webkit-transform:translate3d(0,0,0) !important;
    transform:translate3d(0,0,0) !important;
    -ms-transform:translate3d(0,0,0) !important;
    -moz-transform:translate3d(0,0,0) !important;
}

.dragging.tile {
    opacity: 0.8;
}

.dragInPlaceholder  {
    outline: dashed 1px rgba(0, 0, 0, 0.15);
    border: dashed 1px rgba(255, 255, 255, 0.5);
}

.tile.col2.expanded { width: 280px; }
.tile.col3.expanded { width: 430px; }
.tile.col4.expanded { width: 580px; }

.tile.row2.expanded { height: 280px;}
.tile.row3.expanded { height: 430px;}
.tile.row4.expanded { height: 580px;}


.hasScrollBar.centerTileContainer:hover {
    overflow-y: auto !important;
}

.hasScrollBar.centerTileContainer::-webkit-scrollbar-track,
#popupTileContainer > .content::-webkit-scrollbar-track {
    background-color: rgba(255,255,255,0.2);
}

.hasScrollBar.centerTileContainer .majorTiles {
    margin-right: 0;
}

.tile.reports > .iconContainer > span {
    background: url('https://cdn.t1cloud.com/cianywhere/content/base/icons/48/reports.png?v=12.0.50.0') no-repeat center;
}

#WorkplacePages.pages span {
    background-color: #fff;
}

#ShowMinorTiles {
    display: none;
    font-size: 1.2em;
    position: absolute;
    bottom: 105px;
    left: 50%;
    width: 85px;
    padding-top: 5px;
    margin-left: -45px;

}

#ShowMinorTiles a {
    text-align: center;
    display: block;
    padding: 5px;
    line-height: 16px;
    text-decoration:none;
    -webkit-transition: padding 0.2s ease-in-out;
    -moz-transition: padding 0.2s ease-in-out;
}

#ShowMinorTiles .count {
    min-width: 20px;
    display: inline-block;
}

#ShowMinorTiles.active a {
    padding: 25px 5px 5px 5px;
}

#ShowMinorTiles.active a:before, .home.role.interact:before, .active .funcGrpTab > div:before {
    font-family: iconGlyph;
    font-size: 16px;
    text-align: center;
    line-height: 16px;
    display: block;
    -webkit-font-smoothing: antialiased;
    speak: none;
    content: "\E146";
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
}

.home.role.interact:before {
    top: auto;
    height: 120px;
    line-height: 140px;
    border-top-right-radius: 100%;
    bottom: -5px;
    width: 100px;
    border-top: dashed 1px rgba(0,0,0,0.5);
    text-align: left;
    padding-left: 35px;
}

.tablet.portraitMode #PageTitle h1 {
    width: 140px; /* To fit nicely with search input text box on focus */
 }


/*  New func group */

.funcGrpTabsContainer {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 1;
}

.funcGrpTab {
    height: 30px;
    font-size: 1.2em;
    min-width: 85px;
    display: inline-block;
    margin-right: 10px;
    position: relative;
    vertical-align: top;
}

.funcGrpTab.selected {
    z-index: 9003;
}

.active > .funcGrpTab {
    height: 60px;
}
.active > .funcGrpTab > div {
    padding-top: 35px;
}

.funcGrpTab .pointerArrowB {
    display: block;
}

.funcGrpTab .pointerArrowB .bg {
    top: -10px;
    opacity: 0;
    -webkit-transition: opacity 0.5s ease-in;
    transition: opacity 0.5s ease-in;
}

.funcGrpTab.selected .pointerArrowB .bg{
    opacity: 1;
}

.funcGrpTab.selected > div, .funcGrpTab > div:hover {
    border-bottom: 2px solid orangered;
}

.funcGrpTab > div {
    border-bottom: solid 2px transparent;
    cursor: pointer;
    text-align: center;
    display: block;
    padding: 5px;
    line-height: 16px;
    text-decoration: none;
}

.funcGrpTab .count {
    min-width: 20px;
    display: inline-block;
}

.funcGrpTab.empty .count {
    display: none;
}

#FuncGrpTabs.moreOnly.active .funcGrpTab, .funcGrpTab.empty {
    display: none;
}

.active .funcGrpTab.empty {
    display: inline-block;
}

.moreOnly.active #grpTabMORE {
    display: inline-block!important;
}

.funcGrpTab .notificationCount {
    position: absolute;
    right: -5px;
    top: -5px;
    padding: 1px 2px 3px;
}

.noAlerts .funcGrpTab .notificationCount,
.noAlerts .tileIcon .notificationCount {
    display: none !important;
}

.fixedWidth .role.tile:focus, .fixedWidth .role.tile .hyperlink:focus {
    outline: none;
}

/**** Discover styles */

.tile > .status {
    visibility: hidden;
    position: absolute;
    height: 12px;
    line-height: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    bottom: -10px;
    text-align: center;
    z-index: 1;
    text-transform: uppercase;
    cursor: pointer;
    top: 112px;
    left: 24px;
    right: 24px;
}

.discoveryOn .tile > .status {
    visibility: visible;
    transition: all 0.5s cubic-bezier(.87,-.41,.19,1.44);
    transform: scaleY(0);
    font-size: 0.8em;
}

.tile > .status > span {
    display: inline-block;
    border-radius: 6px;
    padding: 0 5px;
}

.updatesCount {
    display: none;
    position: absolute;
    left: 30px;
    bottom: 16px;
    height: auto;
    padding: 2px 3px;
    font-size: 0.7em;
}

.discoveryOn .updatesCount {
    display: block;
    border-radius: 6px;
}

.discoveryOn .discovered .tile > .status, .discoveryOn #popupTileContainer .tile > .status {
    transform: scaleY(1);
    bottom: 0;
}

.discoveryOn .discovered .tile.expanded > .status {
    top: 112px;
}

#BtnCancelDisco {
    visibility: hidden;
    margin-top: 0;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    min-width: 85px;
    text-align: center;
    right: 0;
    opacity: 0;
    border-radius: 2px;
}

#BtnCancelDisco.shown {
    visibility: visible;
    opacity: 1;
}

/*****Regional settings ***/
#WpBottomLinks {
    position: absolute;
    right: 10px;
}

.tile .region {
    position: absolute;
    right: 0;
    top: 0;
    line-height: 1.3em;
    font-size: 0.7em;
    text-transform: uppercase;
    text-align: center;
}

.durationSpinner {
    background-color: rgba(255, 255, 255, 0.5);
    padding: 10px;
    border-radius: 5px;
}

/** PLaceholder */
.place-header .placeholder {
    height: 24px;
    margin: 20px 50px 0;
    width: 30%;
}
.place-contents {
    margin: 15px 30px;
}
.place-contents .tile.expanded {
    background-color:rgba(0,0,0,0.2);
}

.place-contents .tile > .iconContainer {
    overflow:hidden;
}

.place-contents .tile > .title {
    height: 14px;
}

.place-contents .tile > .title.line1 {
    margin:20px 20px 5px;
}

.place-contents .tile > .title.line2 {
    margin:5px 30px 5px;
}

.place-contents .tile {
    display:inline-block;
    vertical-align:top;
    margin: 20px;
    position: relative;
    background-color: rgba(255,255,255,0.5);
}

.placeholder {
    background-color: rgba(0,0,0,0.3);
}

#workplaceScroller{
    width: 100%;
}

.pageSpinner {
    background-color: rgba(0, 0, 0, 0.43);
    border-radius: 8px;
    margin-top: 17%;
}

.contentContainer > div {
    opacity: 0;
    -webkit-transition: opacity 0.2s ease-in;
}

.contentContainer.wp-loaded > div {
    opacity: 1;
}

.workplaceCheckBox{
    cursor:pointer;
}
.workplaceCheckBox.readonly{
    cursor:default;
    opacity:0.5;
}

.interact.role.home{
    overflow: initial;
    -webkit-transform: scale(1.2) translate(8px,-10px);
    transform: scale(1.2) translate(8px,-10px);
    z-index: 9003; /* More than popup z-index */
}

.home.tile.interact:after{
    -webkit-transform: scale(3);
    transform: scale(3);
    border-radius: 100%;
    background: transparent;
}

.tile.dontSave .play{
    display:none;
}

/* tooltip */
#TipHolder{
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out;
    max-width: 300px;
    white-space: normal;
}

#TipHolder .tooltip_title {
    font-size: 1.2em;
    font-weight: 600;
    display: block;
    margin: 10px;
}

#TipHolder .tooltip_description {
    padding: 5px 0;
    line-height: 1.2em;
    margin: 10px;
}

#TipHolder.shown{
    opacity: 1;
    visibility: visible;
    z-index: 9005;
}

.msgBar button.switchToNewWorkplace {
    background: none;
    border: 0 none;
    box-shadow: none;
    color: #FFF;
    padding: 0;
    text-decoration: underline;
}

.msgBar button:hover.switchToNewWorkplace {
    background-image: none;
}