/* common controls */
.optionMenu {
    position: relative;
}

.optionMenu .menu{
    width: 200px;
    position: absolute;
    background: white;
    border-radius: 3px;
    padding: 10px;
    z-index: 1;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.49);
    transition: 0.3s ease;
    opacity:0;
    visibility:hidden;
}

.functionSearch .optionMenu .menu{
    position: fixed;
}

.optionMenu .menu.shown {
    opacity: 1;
    visibility: visible;
    z-index: 9001;
}

.optionMenu .menu .item.disabled{
    cursor: default;
    opacity: 0.3;
}

.optionMenu .menu.bottomUp{
    bottom:0;
}

.optionMenu .menu.right{
    left: auto;
    right:0;
}
.optionMenu .menu.bottom {
    top: auto;
    bottom: 0;
}

.optionMenu > .ddButton{
    cursor:pointer;
}

.optionMenu .menu .item{
    cursor: pointer;
    border-radius: 10px;
}

.functionSearch .optionMenu .menu .item{
    line-height: 1.5em;
}

.optionMenu .menu .item.moveTo{
    margin-left:20px;
}

.functionSearch .role .optionMenu{
    display: none;
}

.simplified .optionMenu, .guest .optionMenu {
    display: none;
}

.functionSearch {
    background-color: rgb(255, 255, 255);
    border-radius: 4px;
    position: relative;
    display: block;
    margin: 10px auto;
    border-radius: 25px;
    width: 30vw;
    -webkit-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
}

.functionSearch.compact{
    width: 250px;
    background-color: rgba(0, 0, 0, 0.1);
    border: solid 2px rgba(255, 255, 255, 1);
    margin-right:0px;
    height:34px;
    border-radius: 15px;
    box-sizing: border-box;
}

.phone .functionSearch.compact{
    display:none;
    width: auto;
}

.phone .functionSearch.compact:not(.active) > .glyph{
    right: 5px;
}

.functionSearch.compact > .glyph{
    color: white;
    opacity: 1;
    font-size: 1.3em;
    right: 10px;
}

.functionSearch:hover {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

 .functionSearch.compact:hover{
     box-shadow: none;
     border-width: 3px;
 }

.functionSearch.active{
    width:31vw !important;
    min-width: 400px;
}

.functionSearch.compact.active{
    width:30vw !important;
}

.phone .functionSearch.compact.active{
    position: fixed;
}

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

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

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

.functionSearch input {
    width: 100%;
    margin: 0;
    line-height: 20px;
    background: none;
    border: none;
    position: relative;
    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;
    height: 30px;
    padding: 8px 20px;
    font-size: 1.3em;
    font-weight: 600;
}
.functionSearch.active.compact input:not(.itemEnquiryText) {
    margin-top:0px; /* when functionSearch is active we remove the 2px border */
}

.functionSearch.compact input:not(.itemEnquiryText) {
     padding:0px 10px;
     font-size: var(--ciaFontSizeFunctionSearch);
     font-weight: normal;
     color: white;
}

.phone .functionSearch.compact {
    background-color: rgba(0, 0, 0, 0);
}

.functionSearch > .glyph{
    position: absolute;
    right: 18px;
    top: 50%;
    margin-top: -12px;
    opacity: 0.6;
}
.functionSearch:hover > .glyph{
    opacity: 0.8;
}

 .functionSearch.compact.active > .glyph{
    color: rgba(0,0,0,0.5);
    opacity: 1;
}

/* 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: calc(100% - 70px);
}

.phone .functionSearch.shown input{
    width:90%;
}

.functionSearch input:not(.itemEnquiryText):focus,
.functionSearch.shown input:not(.itemEnquiryText){
    color: rgba(0,0,0,0.5);
    outline: none;
}


.functionSearch.shown{
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.functionSearch.shown > .glyph{
    display: none;
}

.functionSearch .suggestionPane {
    display:none;
    z-index:1001;
    width:100%;
    min-width: 100%;
    background-color: #fff;
    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;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    text-align:left;
    margin-top:-3px;
}


.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;
    right: 0;
    left: 0;
    min-width: initial;
    max-height: initial;
}

 .entSearchItem  a.disabled{
     cursor: default;
 }


 .functionSearch  span.altLabel:empty{
     display: none;
 }

.functionSearch mark {
    background-color: transparent;
}

.functionSearch .suggestionPane > .funcs, .functionSearch .suggestionPane > .roles {
    overflow: auto;
    padding: 5px 10px;
    min-height: 5em;
}

.singleRole .functionSearch .roles{
    display: none;
}

.functionSearch .suggestionPane > .roles {
    border-top: solid 1px rgba(0, 0, 0, 0.05);
}

 .functionSearch .entSearchItem {
     text-decoration: none;
     font-size: 1.2em;
     display: flex;
     align-items: center;
     position: relative;
 }


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

/*  Options menu item */
 .functionSearch .menu .pinRole{
     display: none;
 }

 .functionSearch .roles .menu .help{
     display: none;
 }

 .functionSearch .roles .menu .pinRole{
     display: block;
 }

/* 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.03);
}

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


.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 .funcLink .iconContainer {
     padding:0;
     border-radius:50%;
     background-color: rgba(0,0,0,0.5);
}

.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 .noResultsContent
{
    display: none;
    text-align: center;
    margin: 20px 10px;
    padding: 10px;
    opacity: 0.3;
}

 .functionSearch .noResults > * {
     display: none;
 }

 .functionSearch .noResults > .noResultsContent{
     display: block;
 }

.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.41.0');
}

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


/** Search bar sizing and positioning for iPad and iPad Pro */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    body.scrolled.searchActive .themedSmallLogo{
        display: none !important;
    }

    body.scrolled.searchActive .bannerMiddle {
        justify-content: center;
    }

    .bannerMiddle .bannerTitle {
        left:200px;
        right:200px;
    }

    .functionSearch.active {
        z-index:3;
    }

    .functionSearch.compact, .functionSearch.compact.active{
        width: 30vw !important;
        min-width: auto;
    }

    body.scrolled .functionSearch{
        width: 25vw !important;
    }
}


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

.functionSearch.compact input::-webkit-input-placeholder { color: white; }
.functionSearch.compact.active input::-webkit-input-placeholder { color: rgba(0,0,0,0.4); }

body.searchActive #WpContentContainer, .phone .functionSearch .suggestionPane {
    overflow: hidden;
}

/* Enquiry Search styles */
.itemEnqContainer .itemLabel i{
    font-size: 13px;
}

.itemEnqContainer input{
    height:8px;
    font-size: 13px;
}

.enqSearchV2 , .enqAction{
    cursor:pointer;
}

.enqAction .ddButton .glyph{
    color: lightgray;
    padding-bottom: 2px;
}

.enqAction .ddButton .glyph.loading{
    animation: rotation 2s infinite linear;
}
@keyframes rotation{
    from{
        transform: rotate(0deg);
    }
    to{
        transform:rotate(359deg);
    }
}

.itemEnqContainer .itemLabel{
    font-size: 12px;
}

.itemEnqContainer .itemEnquiryText{
    padding-left: 0px;
    font-size: 14px;
}

/* ROLE MENU STYLES STARTs */

.roleHoverMenu .roleLabel {
    border-radius: 4px;
}

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

.roleHoverMenuPanel {
    position: fixed;
    width:100%;
    z-index: 100;
    left: 0;
    right: 0;
    top: calc(var(--ciaHeightHeader) - 10px) ;
    margin: 0;
    display: none;
    box-shadow: none;
    background: transparent;
}

.roleHoverMenuPanel > .tabHandles{
    padding: 10px 20px;
    filter:drop-shadow(1px 1px 2px lightgray);
}

.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:hover{
    background-color: transparent;
}

.roleHoverMenuPanel .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;
    position:relative;
}

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

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

.roleHoverMenuPanel.shown{
    display: block;
    width:100%;
}

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

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

.roleHoverMenuPanel .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.41.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);
}

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

.roleHoverMenuPanel .iconContainer > span {
    padding:0;
    display:block;
    position:relative;
    width:100%;
    height:100%;
    text-align:center;
    border-radius:50%;
    background-size: 100% 100%;
    background-image:url('https://cdn.t1cloud.com/cianywhere/content/base/icons/64/c2default.png?v=12.0.41.0'); /*default image when no icon exists*/
}

/* ROLE MENU STYLES ENDs */

/* For iPad */
@media (max-width: 1024px) and (min-width: 601px) {
    .functionSearch .suggestionPane > .roles {
        overflow: scroll;
        max-height: 160px !important;
    }
}

@media (max-height: 820px) and (min-width: 601px) {
    .phone .functionSearch .suggestionPane  {
        max-height: 110vw !important;
    }
}


.tile > .header {
    min-height: 160px;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    position: relative;
}
.tile.expanded > .header{
    min-height: 90px;
    position: relative;
}

.tile .header > .iconContainer {
    display: flex;
    justify-content: space-around;
    transform: scale(0.90625, 0.90625);
    image-rendering: -webkit-optimize-contrast;
    border-radius: 50%;
    -moz-border-radius:50%;
    margin-top: 12px;
    align-self: flex-start;
}

.tile .header > h4 {
    display: flex;
    letter-spacing:-0.5px;
    font-size:0.85rem;
    color:inherit;
    margin-top:15px;
    margin-bottom:8px;
    font-weight: 600;
    width:100%;
}

.tile.expanded .header > h4 {
    /*height: 4em;*/
}

/*.tile.expanded .header > .alertCount {
    margin-top:-15px;
}*/


.workplaceRoles .tile:not(.disabled):not(.folder):hover .iconContainer {
    width: 32px;
    height: 32px;
    transform: scale(1) translate(0, 0);
}

.tile .header .iconContainer > span {
    border-radius: 50%;
}

.tile .header .tileIcon:before {
    margin-top: -3px;
    display: block;
}

.tile .header .iconContainer > span
{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    box-shadow: 0 2px 3px #0000005c;
}

.tile .header .iconContainer .glyph{
    font-size: 32px;
}

.tile .title{
    line-height: 1.3em;
}



/********************* Tile options button *****************************/


.tile .tileButton {
    position: absolute;
    z-index: 1;
    bottom: calc((50px - 16px -  20px) / 2 ); /*--css variable calculation: workplaceTileHeight - iconSize - titleBottomButtonPadding--*/
    cursor: pointer;
}

.tile .tileButton.expand{
    display: none;
    right: 44px;
}

.simplified .tile .tileButton.expand, .guest .tile .tileButton.expand{
    right: calc((50px - 16px - 20px) / 2 );
}

.tile:not(.role) > .hyperlink{
    bottom: 50px; /*--css variable for active tile bottom section--*/
}

/* Tile option menu */

.tile .optionMenu{
    position: absolute;
    bottom: calc((50px - 16px -  20px) / 2 ); /*--css variable calculation: workplaceTileHeight - iconSize - titleBottomButtonPadding--*/
    right: calc((50px - 16px -  20px) / 2 ); /*--css variable calculation: workplaceTileHeight - iconSize - titleBottomButtonPadding--*/
}

.tile .optionMenu > .ddButton  {
    padding:10px;
}

.tile .optionMenu > .ddButton >  .icon12 {
    margin:2px;
}

.tile .optionMenu .menu{
    left: -5px;
    top: 0;
}

.optionMenu .menu .icon16{
    display:inline-block;

}

.optionMenu .menu .item {
    padding:10px;
    border-radius:0 !important;
    display: flex;
}

.optionMenu .menu .item.sectionTitle {
    margin-top:10px;
    position:relative;
    padding-top:14px;
}

.optionMenu .menu .item.sectionTitle:hover{
    cursor:default;
}

.optionMenu .menu .item.sectionTitle:before {
    content:"";
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:2px;
    background-color:rgba(0,0,0,0.1);
}

.optionMenu .menu .item:not(.sectionTitle):hover{
    background-color:rgba(0,0,0,0.03);
}


.optionMenu .menu .item > *{
    display:inline-block;
    margin-right:10px;
}

.optionMenu .menu .item > a:hover {
    color:inherit;
    text-decoration:none;
}

.optionMenu .sub.menu{
    left: 85%;
    bottom: 0;
}

.hasSubMenu:hover .sub.menu{
    visibility:visible;
    opacity:1;
}


.tile .tileButton.options {
    left: 5px;
}

.tileOptions .dropdownPanel{
    border-radius: 20px;
}

.tileOptions .dropdownPanel > div{
    padding: 15px;
}
.tileOptions .dropdownPanel .dropdownPanelListItem{
    margin: 5px 0;
}

.tileOptions .dropdownPanel .dropdownPanelListItem > a{
    padding-left: 35px;
}

.optionMenu .menu .ungroup {
    display: none;
}

.minorTiles .optionMenu .sectionTitle{
    display: none;
}


.minorTiles .optionMenu .ungroup {
    display: block;
}

/* Todo move to js */
.tile .tileButton.expand .glyph:before {
    font-size:14px;
    line-height:14px;
    margin-bottom:2px;
    min-width:16px;
}


.tile.expanded .tileButton.expand .glyph:before{
    content: "\E063";
}


/* hide tile button */
.tile.expandable .tileButton.expand {
    display: block;
}


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

/* Loading content */

.tile .actTileLoader {
    display: none;
}

.tile.expanded .animated-background .icon128{
    font-size:260px;
    line-height:160px;
}

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

.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: 100px;
    line-height: 50px; /*--css variable for active tile bottom section--*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.1em;
    text-align: left;
    font-weight: bold;
}

.expanded .activeTileHeader > [role="heading"] {
    padding-top:0;
    padding-bottom:0;
}


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

.tile.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 {
    height: 50px;
    display: flex;
    align-items: center;
    border-bottom: solid 1px rgba(0,0,0,0.05);
}

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

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

.tile.expanded .activeTileHeader h3 {
font-weight: normal;
font-size: 0.9em;
text-overflow: ellipsis;
overflow: hidden;
}

.actTileContentWrapper{
    display: flex;
    position: absolute;
    min-width: 100%;
    bottom: 0px;
    top: 50px;
    flex-flow: column;
}

.actTileContentScroll {
    flex-grow:1;
    overflow: auto;
}

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

.embed.expanded > .activeTileContent, .dual.expanded > .activeTileContent {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 40px;
    top: 105px;
    padding: 0;
    overflow: hidden;
}

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

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



.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.41.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: 16px;
    right: 16px;
    bottom: 50px; /*--css variable for active tile bottom section--*/
    top: 92px;
    overflow: hidden;
    cursor: default;
    /*background-color: white;*/
    z-index: 1;
}


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

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

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

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

.activeTileBody .bottomLinks {
height:auto !important;
border-top: solid 2px rgba(0,0,0,0.05);
background-color: rgba(255,255,255,0.25);
}

.activeTileBody .bottomLinks a {
opacity: 1;
padding: 5px 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;
}

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

/********************* Back office active folder styles *****************************/

.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 .tileButton.expand, .tile.disabled .tileButton.expand {
    display: none;
}

.disabled.tile h4{
    opacity: 0.6;
}

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

.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.41.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.41.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 2px rgba(0,0,0,0.05);
    box-sizing: border-box;
    display: flex;
}

.hyperTabsContent {
    top: 50px;
}

.hyperTabHandles .hTabHandle {
    height: calc(100% + 2px);
    opacity: 0.80;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    border-bottom: solid 2px transparent;
    box-sizing: border-box;
    margin-right: 20px;
    padding:0 4px;
    display: flex;
    align-items: center;
}

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

.hyperTabHandles .hTabHandle:hover {
    opacity: 1;
}

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

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

.hTabHandle .icon16 {
    display: none;
}

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

    display: flex;
    flex-direction: row;
}

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

.hyperTabHandles .hTabHandle.selected {
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: grey;
    font-weight: bold;
}

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

.hTabHandle .notificationCount {
    margin-left: 10px;
    text-align: center;
    box-shadow: none;
    max-width: 3em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hTabContent {
    display: flex;
    position: relative;
    min-width: 100%;
    flex-flow: column;
    transition: margin 0.3s ease-in-out;
}

.hyperHeader {
    font-weight: normal;
    font-size: 1em;
    line-height: 16px;
}

.hTabContentBody {
    flex-grow: 1;
    background: rgba(255,255,255,0.05);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}


.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 {
    background-color: rgba(255,255,255,0.25);
    border-top: solid 2px rgba(0,0,0,0.05);
    box-sizing: border-box;
    height: auto !important;
    color:inherit !important;
}

.hTabContentActions > a .glyph  +  span {
    font-weight:600;
}

.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: 32px;
    margin-top: -36px;
    display: block;
    padding-top: 10px;
    padding-right: 10px;
    position:relative;
}

.hyperTextItem a.content:hover {
    text-decoration: none;
    background-color: rgba(0, 0, 0, 0.03);  /*--css variable for hover style of active tile items--*/
    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 {
    font-weight: 600;
    margin-top: 3px;
}

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


.hyperTextItem .hyperDesc {
    display: block;
    font-size: 0.9em;
}

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

.hyper .activeTileBody a.dataItem:hover {
    text-decoration:none;
    background-color: rgba(0, 0, 0, 0.025);  /*--css variable for hover style of active tile items--*/
}

.discoveryOn .hasUpdates > .glyph {

}

@media (max-width: 600px){
    .bodyHeader + .activeTileBody{
        top:142px;
    }
}

/*--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"; }

/* Tile background and product colour*/

/*.wp-v2 .tile .iconContainer,*/
.wp-v2 .tile .Blue .iconContainer         { background-color: #94dfff; }
.wp-v2 .tile .DarkBlue .iconContainer     { background-color: #5eb8ff; }
.wp-v2 .tile .LightBlue .iconContainer     { background-color: #d8eeff; }
.wp-v2 .tile .DarkTeal .iconContainer     { background-color: #00a2a2; }

.wp-v2 .tile .Green  .iconContainer       { background-color: #6ee070; }
.wp-v2 .tile .Grey   .iconContainer       { background-color: #d5d5d5; }
.wp-v2 .tile .Lime   .iconContainer       { background-color: #a6f567; }
.wp-v2 .tile .Maroon  .iconContainer      { background-color: #d5564e; }

.wp-v2 .tile .Yellow  .iconContainer      { background-color: #fffb72; }
.wp-v2 .tile .Purple  .iconContainer      { background-color: #ff54ca; }
.wp-v2 .tile .Orange   .iconContainer     { background-color: #ffb533; }


.wp-v2 .tile .Blue         { border-color: #94dfff; }
.wp-v2 .tile .DarkBlue     { border-color: #5eb8ff; }
.wp-v2 .tile .LightBlue     { border-color: #d8eeff; }
.wp-v2 .tile .DarkTeal     { border-color: #00a2a2; }

.wp-v2 .tile .Green        { border-color: #6ee070; }
.wp-v2 .tile .Grey         { border-color: #d5d5d5; }
.wp-v2 .tile .Lime         { border-color: #a6f567; }
.wp-v2 .tile .Maroon       { border-color: #d5564e; }

.wp-v2 .tile .Yellow       { border-color: #fffb72; }
.wp-v2 .tile .Purple       { border-color: #ff54ca; }
.wp-v2 .tile .Orange       { border-color: #ffb533; }


/*-------------------------------------------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.41.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;
}


body{
    overflow: hidden;
}

#WpPlaceholder{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: block;
}

.noContent #WpPlaceholder{
    display: none;
}

#MainContainer {
    background-color: white;
    overflow: hidden;
}

/** 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: 180px;
    left: 0;
    right: 0;
    /*padding-bottom: 0;*/
    /*width: auto;*/
    /*min-height: 500px;*/
    /*bottom: 25px;*/
    width: 100%;
}

.wp-o-loaded #MainContainer > .contentContainer{
    position: relative;
    top: auto;
    left: 0;
    right: 0;
}

/* iPad Landscape */

header #GoBack{
    display: none;
}

header .bottomBar {
    height: 310px;
}
.collapsedHeader header .bottomBar {
    height: var(--ciaHeightHeader);
}


@media (max-width: 1600px) {
    header .bottomBar {
        height: 175px;
    }
}

@media (max-width: 600px) {
    header .bottomBar {
        height: 70px;
    }
}

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

    .bannerLeftSection .fav {
        visibility: hidden;
    }

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

#GlobalHeader, .searchWorkplace {
    z-index: 1001;
    position: relative;
    transition: border 0.5s ease-in;
}

.collapsedHeader #GlobalHeader{
    height: var(--ciaHeightHeader);
    transition: height 0.5s ease-in;
}


#GlobalHeader > .topBar > .fixedWidth {
    height:var(--ciaHeightHeader);
}

#WorkplaceScrollerWrapper {
    position: relative;
}


#WpContentContainer{
    overflow-y: auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}

/* Roles Navigator */

#RolesPanel{
    height:100%;
    overflow: hidden;
    margin-right: 70px;
}

#RolesPanel .role{
    min-width: 100px;
    justify-content: center;
    white-space: nowrap;
}

.portraitMode #RolesPanel .role {
    min-width: auto;
    padding: 0;
}

.workplaceRoles {
    white-space: normal;
    display: none;
    vertical-align: top;
    width:100%;
    position: relative;
    transition: 0.5s ease-in-out;
}

.workplaceRoles.current{
    display: inline-block;
}

.slideToLeft, .slideToLeft .funcGrpTabsContainer{
    margin-left:-100%;
}
.slideToRight .funcGrpTabsContainer{
    margin-left:100%;
}

.workplaceRoles .centerTileContainer {
    position: relative;
}

.centerTileContainer .majorTiles {
    position: relative;
    overflow: auto;
    padding: 2vh 5vh;
    min-height: 500px;
    padding-bottom:80px;
}

/* Minor tiles style */
.centerTileContainer .minorTiles{
    position: fixed;
    visibility: hidden;
    top: 65px;
    left: 5vw;
    right: 5vw;
    z-index: 9001;
    transition: 0.3s ease;
    bottom: 115px;
    opacity: 0;
    display: flex;
    flex-flow: column;
    box-shadow: 0 3px 5px rgba(0,0,0,0.5);
}

.minorTiles .bArrow {
    position: absolute;
    BOTTOM: -8px;
    width: 16px;
    height: 16px;
    transform: rotate(45deg);
    left: 50%;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
}

.centerTileContainer .minorTiles.show{
    visibility: visible;
    opacity: 1;
}

.centerTileContainer .minorTiles.show > header{
    min-height:50px;
}

.worpklaceNavigator {
    width: 100%;
    position: relative;
}
.folderBg{
    visibility: hidden;
    position: absolute;;
    left:0;
    right: 0;
    bottom: 0;
    top:0;
    z-index: 9000;
    background:rgba(0,0,0,0.2);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.folderShown .folderBg{
    opacity: 1;
    visibility: visible;
}

.role.tile {
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    font-size: 0.875rem;

}

.workplaceNavContainer .tile.role{
    box-shadow: 0 0 0 transparent;
    border-radius: 1px;
    width: auto;
    box-sizing: border-box;
    padding: 10px 1vw;
    position: relative;
    margin:0;
}

.workplaceNavContainer .tile.role:hover, .workplaceNavContainer .tile.role.onHover {
    background-color: rgba(0, 0, 0, 0.03);  /*--css variable for hover style of active tile items--*/
}

.workplaceNavContainer .tile.role .title {
    line-height: 3em;
    vertical-align: middle;
    padding: 0 1vw;
}


/* Roles browser */
.workplaceRoles .breadcrumb > *{
    display: none;
}

.workplaceRoles .breadcrumb .mediumText {
    font-size: 1.3em;
    text-transform: capitalize;
}

.workplaceRoles .breadcrumb > .linkRole,.editable .workplaceRoles .breadcrumb > .pin{
    display: flex;
}
.workplaceRoles .breadcrumb > .pin{
    margin-left: 20px;
}

.workplaceRoles.rolesBrowser .breadcrumb {
    display:none;
}

.workplaceRoles.browse .breadcrumb > *:not(.pin) {
    display: flex;
}

.tablet .rolesBrowser .centerTileContainer .majorTiles {
    padding-left: 1vw;
    padding-right: 1vw;
}

.rolesBrowser .wpProductWrapper{
    display: flex;
    width: 100%;
    margin-bottom: 50px;
}

.rolesBrowser .wpProductWrapper.filtered{
    display: none;
}

.rolesBrowser .wpProductInfo {
    margin-right: calc(3vw - 8px);
    margin-top:8px;
    margin-bottom:8px;
    background: rgba(0,0,0,0.05);
    padding: 20px;
    border-radius: 10px;
}

#PinnedRolesSection .wpProductInfo{
    background: rgba(255, 255, 255, 0.5);
}

.rolesBrowser .wpProductInfo .info {
    width: 150px;
    height: 100%;
    border-radius: 10px;
    text-align: left;
    flex-flow: column;
    display: flex;
    text-transform: capitalize;
    line-height: 2em;
}

.rolesBrowser .tile.role .roleType {
    display: none;
    position: absolute;
    bottom: 9px;
    font-size: 0.8em;
    left: 50px;
    color: rgba(0, 0, 0, 0.5);
    border: solid 1px rgba(0,0,0,0.1);
    padding: 2px 5px;
    border-radius: 5px;
    opacity: 0.7;
}

.dispRoleType .tile.role .title{
    margin-top: 0;
}
.dispRoleType  .rolesBrowser .tile.role .roleType {
    display: block;
}

.rolesBrowser .wpProductInfo .name {
    letter-spacing: -0.5px;
    font-size: 0.875rem;
    font-weight:bold;
    overflow:hidden;
    text-overflow: ellipsis;
}

.rolesBrowser #PinnedRolesSection.shown{
    transition:0.3s ease;
    min-height: 100px;
    visibility:visible;
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: solid 1px rgba(0, 0, 0, 0.11);
    box-shadow: 0 5px 0 rgba(0, 0, 0, 0.05);
}

#PinnedRolesSection {
    height: 0;
    min-height: 0;
    visibility: hidden;
    padding-bottom: 0;
    margin-bottom: 0;
}

.rolesBrowser .tile.role:hover{
    background-color: white;
    box-shadow: 0 5px 7px rgba(0, 0, 0, 0.1);
}

.rolesBrowser .tile.role {
    height: 80px;
    width: 250px;
    transition: box-shadow 0.2s ease-in-out;
}

.rolesBrowser .role .header .glyph{
    transform: scale(1.33);
    opacity: 0.7;
    transition: 0.3s ease;
    margin-left: 10px;
    margin-right: 20px;
}

.rolesBrowser .role:hover .header .glyph{
    opacity: 0.9;
    transform: scale(1.6);
}

.rolesBrowser .majorTiles .role.browser > .header {
    min-height: 100%;
    border: none;
    margin: 0 15px;
    flex-flow: row;
    align-items: center;
}

.majorTiles .role.browser .tileButton.expand{
    display: block;
    right: 4px;
    z-index: -1;
}

.role.browser .header > label {
    height: 100%;
    max-height: 100%;
    font-weight:normal;
    color:inherit;
    display:block;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index:1;
}

.majorTiles .role > .content{
    min-height: 50px;
    margin: 10px 20px;
}

#ProductList{
    flex-direction: column;
    border-radius: 10px;
}
#ProductList.filterOn{
    background-color: rgba(0,0,0,0.03);
}

#ProductList .productListItem {
    text-transform: capitalize;
    cursor: pointer;
}

#ProductList .cFilterOn, #ProductList .prodList,
#ProductList.filterOn .filterOption{
    display: none;
}

#ProductList.filterOn .filterOption.cFilterOn{
    display: flex;
}

#ProductList.filterOn .prodList {
    display: block;
}


.rolesBrowser .centerTileContainer .majorTiles{
    padding-top: 2vh;
}

/** Role Bar Height adjustments */


.workplaceNavContainer,
.workplaceNavContainer .role.tile {
    height: 60px;
}

body.dockedHeader #UserDelegationBar{
    position: fixed;
    z-index: 1000;
    width: 100%;
    top: var(--ciaHeightHeader);
}

body.dockedHeader .workplaceNavContainer{
    position: fixed;
    top: calc(var(--ciaHeightHeader) + var(--ciaHeightUserDelegationBar));
    z-index: 1000;
    left: 0;
    right: 0;
}

.workplaceNavContainer{
    background-color: white;
}

body.dockedHeader #WorkplaceScrollerWrapper{
    margin-top: 60px;
}

.pin{
    transition: 0.3s ease;
    cursor: pointer;
    z-index: 1;
    padding-right: 2px;
    padding-bottom: 2px;
    border-radius: 20px;
    box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
}

.pin:hover
{
    opacity: 0.7;
}

.unpinRole, .pin.pinRole:hover{
    transform: rotate(-45deg);
}

.pinRole, .pin.unpinRole:hover{
    transform: rotate(0deg);
}

.role .pin{
    display: none;
}

.editable .role .pin {
    display: block;
    right: 5px;
    top: 5px;
}
.home .breadcrumb .pin, .myRole .breadcrumb .pin, body.noPinning .pin, .body.simplified .pin{
    display: none !important;
}

.workplaceNavContainer {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    position:relative;
}

.singleRole .workplaceNavContainer{
    display: none;
}

.simplified .workplaceNavContainer .optionMenu, .guest .workplaceNavContainer .optionMenu,
.simplified .minorTiles header .optionMenu, .guest .minorTiles header .optionMenu{
    display: none;
}


.tile.scaleHide{
    transform: scaleX(0);
    width:0 !important;
    margin:0 !important;
    min-width: 0 !important;
}

.tile.moveTo{
    position: absolute;
    z-index: 10010;
}

/*--Tile dragging--*/

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



.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.tile:hover > .iconContainer .glyph:before {
    opacity: 1;
}


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

.alertCount {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 5px;
    line-height:10px;
    min-width:20px;
    box-sizing:border-box;
    order: 1;
    flex: 0 0 auto;
}

.alertCount:empty {
    display: none;
}

.centerTileContainer .tile:not(.expanded) .alertCount{
    position: absolute;
    right: 5px;
    top: 32px;
}

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

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

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

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


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

.tile.expanded h4 title{
    color: white;
}

.dragging.tile {
    opacity: 0.8;
}

.tile {
    width:150px;
    margin:8px;
    height: 210px;
    float: left;
    position: relative;
    background-color: white;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
    border-radius: 15px;
    z-index: auto;
}

.tile.dragging{
    position: absolute;
}

.tile:not(.expanded) > .header {
    flex-flow: column;
    align-items:flex-start;
    border-bottom-style: solid;
    border-bottom-width:2px;
}

.tile.positioned{
    position: absolute;
}

.tile.hBGCol{
    overflow: hidden;
}

.tile.col2.expanded { width: 316px; }
.tile.col3.expanded { width: 482px; }
.tile.col4.expanded { width: 648px; }

.tile.row2.expanded,
.tile.embed.expanded, .tile.embedded.expanded, .tile.dual.expanded { height: 436px; }
.tile.row3.expanded { height: 626px;}
.tile.row4.expanded { height: 626px;}


/* Minor tiles popup */

.minorTiles > .content::-webkit-scrollbar-track {
    background-color: rgba(255,255,255,0.2);
}


.minorTiles > .content {
    overflow-y: auto;
}


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


/*  New func group */

.funcGrpTabsContainer {
    text-align: center;
    position: fixed;
    bottom: 45px;
    left: 0;
    right: 0;
    z-index: 1;
    justify-content: center;
    min-width: 100%;
    transition: margin 0.5s ease-in-out;
}

.funcGrpTab {
    position: relative;
    margin: 0 10px 5px 10px;
    white-space: nowrap;
    overflow: hidden;
    min-width: 130px;
}

.optionMenu .menu .addFolderGroup {
    display: block;
    font-style: italic;
}

.browse .addFolderGroup, .simplified .addFolderGroup, .guest .addFolderGroup{
    display: none;
}

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

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

.funcGrpTab .pointerArrowB {
    display: none;
}


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

.funcGrpTab.selected > div {
    box-shadow: none;
    border: transparent;

}
.funcGrpTab .tileFG:hover {
    box-shadow: 0 0px 5px rgba(0,0,0,0.3);
}

.funcGrpTab > div {
    cursor: pointer;
    justify-content: center;
}

.addFolderGroup .glyph{
    float: left;
    margin-top: -3px;
}

/* Rename folder options */

.minorTiles > header .optionMenu{
    visibility: hidden;
}

.minorTiles.folderTiles > header .optionMenu{
    visibility: visible;
}

.txtFolderName {
    border: solid 1px rgba(0, 0, 0, 0.2);
    padding: 10px 10px;
    margin-left: 15px;
    border-radius: 12px;
    display: none;
}

body.editFolder .minorTiles .txtFolderName{
    display: block;
}
body.editFolder .minorTiles > header .title {
    display: none;
}

.wpPopupWrapper{
    position: absolute;
    left:0;
    right: 0;
    top: 0;
    bottom:0;
    background: rgba(0,0,0,0.3);
    display: none;
    z-index: 9001;
    align-items: center;
    justify-content: center;
}

.wpPopupWrapper.shown{
    display: flex;
}

.wpPopup{
    background: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.35);
    padding: 10px;
    border-radius: 10px;
}

.wpPopup .footer button{
    padding: 10px 15px;
}
.wpPopup .footer .btnCancel{
    background: transparent;
}
.wpPopup .content{
    min-width: 500px;
}

.wpPopup input{
    border-style: solid;
    border-width: 1px;
    border-radius: 5px;
    padding: 10px;
    font-size: 1.3em;
}

.wpPopupWrapper .folderContent, .wpPopupWrapper .pinContent{
    display: none;
}

.wpPopupWrapper.newFolder .folderContent, .wpPopupWrapper.pinRoles .pinContent{
    display: block;
}


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

.shake-animation {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}


/**** Discover styles */

.tile .header .status {
    text-transform: uppercase;
    cursor: pointer;
    visibility: hidden;
    border: solid 1px rgba(0,0,0,0.2);
    border-radius: 30px;
    padding: 4px 10px;
    font-size: 0.8em;
    margin-bottom:5px;
    z-index: 2;
}

.tile .header .status:hover {
    border-color:rgba(0,0,0,0.6);
}

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

.discoveryOn .discovered .tile .header .status {
    transform: scaleY(1);
}

/*.tile.expanded .header .status{
    left: 72px;
    bottom: 10px;
}*/

#BtnCancelDisco {
  display: none;
}

#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%;
    white-space: nowrap;
}

.home .optionMenu .addToHome,
.optionMenu .removeFromHome,
.home .dontSave .optionMenu {
    display: none;
}

.home .optionMenu .removeFromHome
{
    display: block;
}

.home .optionMenu .item.hidden{
display :none;
}


#HoverContainer {

}

.hoverTileContainer{
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    height: 0;
    z-index: 10;
    visibility: hidden;
    background: white;
    padding:10px 0 0;
    height:230px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    border-top: solid 1px rgba(0, 0, 0, 0.1);
    border-radius: 0 0 20px 20px;
}
.hoverTileContainer.shown{
    visibility: visible;
}

.tileListView{
    height:100%;
    overflow-y: auto;
}

.tileListView .tile {
    position: relative;
    display: inline-block;
    float: left;
    width: 23% !important;
    height: 35px !important;
    margin: 5px;
    transition: none;
    background: none;
    box-shadow: none;
}

@media (max-width: 800px) {
    .tileListView .tile {  width: 80% !important;   }
}

.tileListView .tile > a{
    bottom: 0 !important;
}

.tileListView h1{
    padding: 0 0 10px 10px;
    font-size: 1.5em;
    font-weight: normal;
}

.tileListView .tile .header {
    min-height: auto;
    flex-flow: row;
    border-bottom:none;
}

.tileListView .tile .iconContainer{
    width: 24px !important;
    height: 24px !important;
    min-width: 24px;
    min-height: 24px;
    margin:5px 10px;
}
.tileListView .tile .header > h4{
    margin-top: 8px;
    font-size: 0.8rem;
}

.tileListView .tile .iconContainer > .tileIcon
{
    min-width: 24px;
    min-height: 24px;
    height: 100%;
    width: 100%;
    font-size: 24px;
}

.tileListView .tile > h4
{
    display: inline-block;
    width: auto;
    vertical-align: top;
    padding: 13px 0;
}
.tileListView .tile .activeTileContent, .tileListView .tile .tileOptions, .tileListView .tile .actTileLoader, .tileListView .tile .cornerArrow{
    display: none;
}

.hoverTileContainer .groups{
    position: absolute;
    right: 0;
    width: 200px;
    padding: 60px 30px;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.04);
}

.tileListView .tile .optionMenu, .tileListView .tile .tileButton.expand{
    display: none;
}

.hoverTileContainer .groups .group{
    margin: 15px 5px;
}

.funcGrpTab .text{
    overflow: hidden;
    text-overflow: ellipsis;
}

.funcGrpTab > * {
    line-height: 1.3em;
}

body.bgBlocker #MainContainer:after {
    content: "";
    position: absolute;
    z-index: 2000;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #0000004d;
}
.hoverTileContainer .tabHandle{
    font-size:1.1em;
    margin-left: 40px;
}
.hoverTileContainer .tabHandle:not(.pointer){
    border-bottom-width: 2px;
    border-bottom-style: solid;
}


/******************** Content loading placeholder **********************/

@keyframes placeHolderShimmer{
    0%{
        background-position: -468px 0
    }
    100%{
        background-position: 468px 0
    }
}

.animated-background {
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background-size: 800px 104px;
    position: relative;
}

.tile > .animated-background{
    box-shadow: none;
}


footer .tryNewContainer{
    display: block;
}

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

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

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

 */

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

#flow a.viewShortcuts{
    display: none;
}

.content .noContent {
    display: none;
    padding-top: 6%;
    flex-direction: column;
}

.noContent .colWhite{
    background: rgba(0,0,0,0.1);
}

.noContent:only-child{
    display: flex;
}

/***************** Marketing banner **********************/

.bannerSplash {
    transition: 0.3s ease-in;
    margin: 10px auto 0;
    width:auto;
    border-radius: 20px;
    background: white;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}

.bannerSplash .graphic{
    background-image: url("https://cdn.t1cloud.com/cianywhere/content/base/images/discovery/2020a/splashbanner.svg?v=12.0.41.0");
    width: 330px;
    height: 80px;
}

.bannerSplash button{
    background: transparent !important;
    padding: 10px !important;
    border-radius: 10px !important;
}

.bannerSplash .content{
    line-height: 1.6em;
}

.bannerSplash .rightContent{
    text-align: right;
    min-width: 200px;
}

.bannerSplash.dismissed{
    margin-top: -80px;
    transform: scaleY(0);
}

.welcomeSplashWrapper{
    z-index: 9003;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    overflow: auto;
    background: rgba(0, 0, 0, 0.8);
    -webkit-transition: 0.5s ease-in-out;
    -webkit-transition-property: opacity;
}

.welcomeSplash{
    margin: 0 auto;
}

.videosContent{
    width: 60vw;
    height: 80vh;
}

.welcomeSplash button{
    background: transparent;
    color: white;
    border-color: white;
    background-image: none;
}

.welcomeSplash > button{
    position: absolute;
    padding: 4px;
    border-radius: 16px;
    border: none;
    top: 15px;
    right: 15px;
    z-index: 1;
}

.welcomeSplashWrapper.shown{
    opacity:1;
}

.welcomeSplash .t1UniversityLink.disabled{
    opacity: 0.6;
    cursor: default;
}

.welcomeSplash iframe{
    border-radius:20px;
}

.btnHeaderCollapse
{
    position: absolute;
    right: 15px;
    top: 50%;
    color: black;
    padding: 10px;
    margin-top: -18px;
    border-right: 6px;
    cursor: pointer;
    border-radius:50%;
}
.btnHeaderCollapse:hover{
    background-color: rgba(0,0,0,0.05);
}
.btnHeaderCollapse .e102, .btnHeaderCollapse.collapsed .e105{
    display: none;
}
.btnHeaderCollapse.collapsed .e102{
    display: block;
}

@media (max-width: 1000px){
    #RolesPanel{
        overflow-x: auto;
    }
    #RolesPanel .role.tile {
        min-width: fit-content;
    }
}

@media (max-width: 600px){

    /* Popup on Small Screens */
    .wpPopup{
        width:100%;
        margin:10px;
    }

    .wpPopup .content{
        min-width:unset !important;
    }

    .wpPopup .content .styleContainer .textBoxControl,
    .wpPopup .content .styleContainer .textBoxControl .tbcEditorField{
        width:100% !important;
    }

    #MainContainer, .fixedWidth{
        min-width: auto;
    }

    .topBar > .fixedWidth{
        padding-left:5px ;
        padding-right:5px ;
    }

    .topBar .bannerRight > *{
        margin: 0;
        display: none;
    }
    .topBar .bannerRight > #UserNavigation,
    .topBar .bannerRight > #ShowFlow
    {
        display: block;
    }

    .topBar .userNavigation > button .loggedUser{
        display: none;
    }
    .bottomBar .functionSearch{
        width: auto;
    }

    .functionSearch.compact{
        width: 250px !important;
    }

    .topBar .functionSearch.compact.active {
        width: 70vw !important;
        min-width: auto;
        border: none;
        z-index: 2;
    }

    #PageTitle{ margin: 0; }

    #GlobalFooter{
        display: none;
    }

    #WpContentContainer #GlobalFooter{
        display: block;
        position: relative;
        box-shadow: none;
        height:auto;
        background: transparent;
      	z-index:1;
    }

    #WpContentContainer #GlobalFooter .alignLeft{
        display: none;
    }

    #WpContentContainer #GlobalFooter #FooterRightControls{
        margin:20px 0;
    }

    footer #FooterRightControls > button, footer #FooterRightControls > button.tryNewContainer{
        padding: 10px;
    }

    .funcGrpTabsContainer{
        height: auto;
        position: relative;
        margin-top: 15px;
        display: block;
        bottom:auto;
    }

    .funcGrpTab{
        margin: 5px 8px;
        padding: 5px;
    }
    .funcGrpTab > *{
        padding: 15px;
        font-size: 1.2em;
    }
    .breadcrumb{
        margin:15px 0;
    }
    .workplaceRoles.browse .breadcrumb > .linkProduct{
        display:none;
    }
    .workplaceRoles.browse .breadcrumb > .linkProduct+.icon16{
        display:none;
    }

    /* MARKETING BANNER */

    .bannerSplash.flexCntr{
        display: block;
        margin: 10px 8px 2px;
        overflow: hidden;
        border-radius: 5px;
    }
    .bannerSplash .graphic{
        height: 100px;
        width:auto;
        background-size: cover;
        background-position-x: -18px;
    }
    .bannerSplash .rightContent{
        padding: 15px;
        margin-right: 0;
    }
    .bannerSplash .content{
        padding-top: 15px;
    }

    /***/

    .topBar .themedSmallLogo > .logo{
        background-position: center;
    }

    header .topBar .buttonWithLabel{
        margin: 5px;
        min-width: auto;
    }

    /* ROLES BAR */

    #RolesPanel{
        margin-right: 0;
    }

    .btnHeaderCollapse {
        display: none;
    }

    /***/

    .rolesBrowser .wpProductWrapper{
        display: block;
        margin-bottom: 0;
    }

    .filterOption{
        padding: 10px 5px;
    }
    .rolesBrowser .tile.role{
        width: calc( 50% - 18px);
        margin: 5px;
        margin-left: 10px;
    }

    /* TILES CONTAINER */
    .centerTileContainer .majorTiles, .centerTileContainer .minorTiles > .content{
        padding: 0;
        min-height: auto;
    }
    .rolesBrowser .majorTiles .role.browser > .header{
        margin: 0 5px;
    }

    /* MINOR TILES */
    .centerTileContainer .minorTiles {
        bottom: -1px;
        left: 0;
        right: 0;
        top: 0;
        border-radius: 0;
    }
    .centerTileContainer .minorTiles > .content{
        padding: 0;
    }

    .tile{
        width: auto;
        float: none;
        height: auto;
        border-radius: 6px;
    }

    .tile:not(.role):not(.expanded) > .hyperlink{
        bottom: 0 !important;
    }

    .tile.expanded{
        width:auto !important;
    }

    .tile:not(.expanded) > .header, .tile.expanded > .header{
        flex-flow: row;
        align-items: center;
        margin: 0 20px;
    }
    .tile:not(.expanded) > .header{
        border: none;
        min-height: auto;
    }

    .tile .header > .iconContainer{
        margin: 10px;
        margin-left: 0;
        align-self: center;
    }
    .tile .header > h4{
        margin-top:8px;
        margin-right: 40px;
    }

    .tile .icon64 {
        width: 48px;
        height: 48px;
        line-height: 48px;
        min-width: 48px;
        min-height: 48px;
        font-size: 48px;
    }

    .tile .optionMenu, .tile .tileButton{
        top: 16px;
        bottom: auto;
    }

    .tile.expanded .optionMenu, .tile.expanded .tileButton{
        top: 24px;
    }

    .centerTileContainer .tile .header .alertCount {
        position: absolute;
        left: 25px;
        right:auto;
        top: 10px;
        box-shadow: -3px 3px 5px white;
    }

    /* ALL ROLES */
    .rolesBrowser .role .header .glyph{
        font-size: 16px;
        margin-right: 10px;
    }

    .wpProductRoles{
        display: flex;
        flex-wrap: wrap;
    }

    .rolesBrowser .wpProductInfo{
        margin: 10px;
        padding: 10px;
    }
    .rolesBrowser .wpProductInfo .info{
        flex-flow: row;
        width: auto;
    }
    .rolesBrowser .wpProductInfo .name{
        margin: 0 10px 0 0;
        flex: 1;
    }

    #ProductList{
        margin-bottom:10px;
    }

    .welcomeSplash > *{
        text-align: center;
    }
    .welcomeSplash .flexCntr{
        flex-direction: column;
    }

    .topBar .userNavigation .dropdownPanel{
        top: 60px;
        position: fixed;
        right: 10px !important;
        left: 10px !important;
    }

    .bottomBar .functionSearch.active {
        width: 90vw !important;
        min-width: auto;
    }

    .functionSearch .suggestionPane, .easy .functionSearch .suggestionPane{
        background-color: white !important;
        margin-top: 0;
    }

    .phone .functionSearch:hover{
        width: inherit;
    }

    .optionMenu .menu{
        left: auto !important;
        right: 30px !important;
    }
}