/* Fonts */
@font-face {
    font-family: "FrutigerLTStd45Light";
    src: url("../fonts/FrutigerLTStd-Light.otf");
}
@font-face {
    font-family: "FrutigerLTStd55Roman";
    src: url("../fonts/FrutigerLTStd-55-Roman.ttf");
}
@font-face {
    font-family: "FrutigerLTStd65Bold";
    src: url("../fonts/Frutiger-LT-Std-65-Bold.ttf");
}

/* Reset styles */
* { margin:0; padding:0; }
.clear { clear: both; }
fieldset { border: none;}
html { width: 100%; height: 100%; background-color: #fff;}

*:fullscreen, *:-webkit-full-screen, *:-moz-full-screen {
    background-color: rgba(255,255,255,0);
}

::backdrop
{
    background-color: #fff;
}

::-webkit-scrollbar {
    -webkit-appearance: none;
    /*border-radius: 4px;*/
    width: 7px;
    height: 7px;
    background-color: #dfe2e0;
}
::-webkit-scrollbar-thumb {
    /*border-radius: 4px;*/
    background-color: #00A0DF;
    /*background-color: rgba(0,0,0,.5);*/
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}


/* Global style */
body { width: 100%; height: 100%; position: relative; overflow: hidden; -webkit-tap-highlight-color:  rgba(255, 255, 255, 0); background-color: rgba(255,255,255,0); font-family: Arial;}

/* This SIGNIFICANTLY improves scrolling performance of our PDF images */
body {
    -webkit-overflow-scrolling: touch;
}

.page { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; display: none; background-color: #fff;}
.page#loading { display: block; background: url("../img/background.png") center center no-repeat; background-size: contain;}

.button { display: block; cursor: pointer;}
.go-back {
    position: absolute;
    left: 20px;
    top: 10px;
    text-decoration: none;
    font-size: 14px;
    background-color: #999;
    border: 1px solid #888;
    padding: 6px 14px;
    border-radius: 28px;
    color: white;
    z-index: 90;
}

.novo-nordisk-logo { position: absolute; right: 30px; bottom: 13px; width: 49px; height: 34px; background: url("../img/novo_nordisk_logo.png") no-repeat; -webkit-background-size: 49px 34px; background-size: 49px 34px;}

.global-search {
    position: absolute;
    top: 9px;
    right: 20px;
    width: 210px;
    height: 20px;
    font-size: 13px;
    border-radius: 6px;
    padding: 5px 5px 5px 5px;
    border: 1px solid #888;
    padding-left: 8px;
    z-index: 90;
    box-sizing: initial;
}

.global-search-close {
    z-index: 91;
    position: absolute;
    right: 4px;
    top: 7px;
    width: 35px;
    height: 35px;
    cursor: pointer;
    background-image:url("../img/icon-close-2.png");
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position:center;
    display: none;
}

.content-foot-note {
    text-align:center;
    position: absolute;
    bottom: 64px;
    width: 100%;
    color: #ccc;
    font-size:12px;
}

/* Loading page */
#loading {}
#loading .loading-text { position: absolute; left: calc(50% - 110px); top: calc(50% + 20px); width: 220px; height: 40px; font-size: 20px; color: #fff; }
#loading .waiting-text { 
    position: absolute; 
    left: calc(50% - 155px);
    top: calc(50% - 80px);
    width: 310px;
    height: 40px; font-size: 20px; color: #fff; }
#loading .cannot-download {position: absolute; left: calc(50% - 265px); top: calc(50% + 20px); width: 530px; text-align:center; font-size: 15px; color: #fff;}
#loading .progress-bar-container {position: absolute; left: calc(50% - 250px); top: calc(50% - 7px); width: 500px; height: 10px; padding: 2px; text-align: left; background-color: #ccc; box-sizing: initial !important;}
#loading .progress-bar {background-color:#2D8BCE; height: 10px; width: 0px; transition: width 0.25s;}
#loading .progress-bar.waiting {
    -webkit-animation: progress-bar-stripes 2s linear infinite;
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-color: #2D8BCE;
    width: 100%;
    background-size: 40px 40px;
    animation: progress-bar-stripes 2s linear infinite;
}
@-webkit-keyframes progress-bar-stripes{from{background-position:40px 0}to{background-position:0 0}}

#loading .long-download-notice {position: absolute; left: calc(50% - 250px); top: calc(50% + 80px); width: 500px; height: 20px; text-align: center; font-size: 13px; color: #fff;}

#internet-required .message { position: absolute; left: calc(50% - 310px); top: calc(50% + 20px);  width: 620px; height: 40px; text-align: center; font-size: 20px; color: red;}
/* Homepage */
.top-border { width: 100%; height: 50px; background-color: #f6f6f6; }
.body {
    position: relative;
    width: 100%;
    height: calc(100% - 110px); /* Without top status bar for iPad*/
    background-color: #5c5c5c;
    background-image: url("../img/background-gray.png");
    background-size: contain;
}
.body .title { position: absolute; left: 50px; top: 70px; font-size: 26px; color: #444; font-weight: normal; }
.body .title-underline {
    position: absolute;
    left: 0px;
    top: 104px;
    border: 0px none;
    border-top: 1px dashed #444;
    color: #444;
    height: 0px;
    width: 404px;
}

.body.customer-facing .title {color: white;}
.body.customer-facing .title-underline {border-color: white}

#homepage .body .vertical-separator {
    position: absolute;
    top: 0px; 
    left: 510px;
    height: 100%;
    width: 1px;
    background-color: #000;
    border-width: 0px 1px;
    border-color: #fff;

}

#homepage .body .button { /**position: relative; top: 280px;*/ padding: 24px 0; border: 0; border-radius: 54px; width: 234px; height: 60px; text-align: center; font-size: 18px; color: #fff; vertical-align: middle; line-height: 30px;}

#homepage .body .version-number {
    position: absolute;
    bottom: 20px;
    left: 10px;
    font-size: 12px;
    color: #555;
}

#loading .footer-text { position: absolute; width: 100%; text-align: center; bottom: 70px; color: #fff; font-size: 10px;}
#homepage .footer-text { position: absolute; margin: 0 auto; left: 0px; right: 0px; width: 70%; text-align: center; bottom: 20px; color: #444; font-size: 10px;}
#level-tile .footer-text { display: none; }
#level-tile.tile-rows .footer-text { display: block; position: absolute; margin: 0 auto; left: 0px; right: 0px; width: 70%; text-align: center; bottom: 20px; color: #444; font-size: 10px;}
#assets .footer-text { display: block; position: absolute; margin: 0 auto; left: 0px; right: 0px; width: 70%; text-align: center; bottom: 20px; color: #444; font-size: 10px;}

.footer { width: 100%; height: 60px; background-color: #f6f6f6; }
.footer .change-user { display: none; position: absolute; left: 15px; bottom: 10px; padding: 0 5px; font-size: 10px; line-height: 30px; color: #444; cursor: pointer; }

#level .body { background-image: url("../img/background-blue.png"); background-position: center;  background-position-y: -120px; background-repeat: no-repeat;}

/* Level 1 and 2 */
#level .body { background-color: #54beda;}

#level .slider-wrapper {position: absolute; left: 0px; top: 22vh; width: 100%; height: 260px; }
#level .empty-slider { display: none; position: absolute; left: 0px; top: 300px; width: 100%; height: 50px; text-align: center; font-size: 25px; color: #444;}
#level #slider { }
#level #slider .sp-button { display: none; }

.ms-staff-carousel { max-width: 1024px;}

#level .level2 {
    display: none;
    position: absolute;
    left: 0;
    top: 56vh;
    width: 100%;
    height: 140px;
    /*background: url("../img/ios6-background.png") repeat;*/
    background: linear-gradient(#999, #aaa, #bbb,#bbb,#aaa,#999);
}
#level .level2 .arrow-up {
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 25px solid #999;
    position: absolute;
    left: calc(50% - 30px);
    top: -24px;
}

#level .level2 {}
#level .level2 .items { margin-top: 20px; width: 100%; text-align: center; overflow: hidden;}
#level .level2 .items .item { cursor: pointer; padding: 0 5px;  width: 100px; height: 100px; display: inline-block; vertical-align: middle;}
#level .level2 .icons .icon1 { position: absolute; left: 380px; background: url("../img/non-retail-value-prop.png") no-repeat; -webkit-background-size: 100px 100px; background-size: 100px 100px;}
#level .level2 .icons .icon2 { position: absolute; left: 520px; background: url("../img/resource-center-2.png") no-repeat; -webkit-background-size: 100px 100px; background-size: 100px 100px;}

#level .this-page { position: absolute; width: 100%; text-align: center; bottom: 50px; color: #444; font-size: 10px;}

/* Level Tile */
#level-tile {}
#level-tile .body { background: #fff; width: 100%; height: calc(100% - 139px);}
#level-tile .body .assets-column { 
    width: 416px;
    float: left;
    height: 100%;
    background: #ededed;
    position: relative;
}
#level-tile .body .assets-column .title-box {
    position: relative;
    height: 160px;
    background: #00a7e1;
}
#level-tile .body .assets-column .title-box.empty {
    background: #00a7e1 url("../img/solutions.png") center center no-repeat;
    background-size: contain;
}

#level-tile .body .assets-column .title-box .selected-category-name {
    color: #fff;
    font-size: 30px;
    font-family: "FrutigerLTStd45Light";
    position: absolute;
    left: 10px;
    bottom: 10px;
}
#level-tile .body .assets-column .title-box .category-assets-filters {
    position: absolute;
    top: 15px;
    height: 50px;
    width: 100%;
    background: #146588;
    display: none;
    /*background: #146588 url("../img/upline.png");*/
}
#level-tile.tile-6 .body .assets-column .title-box .category-assets-filters {
    display: block;    
}
#level-tile.tile-6 .body .assets-column .title-box.empty .category-assets-filters {
    display: none;    
}

#level-tile .body .assets-column .title-box .category-assets-filters .filter-item {
    width: 114px;
    height: 28px;
    margin: 11px 8px 0px;
    background-color: #fff;
    border: none;
    border-radius: 14px;
    display: inline-block;
    opacity: 0.5;
    cursor: pointer;
}

#level-tile .body .assets-column .title-box .category-assets-filters .filter-item.active {
    opacity: 1;
}
#level-tile .body .assets-column .title-box .category-assets-filters .immediate {
    color: #D53226;
}
#level-tile .body .assets-column .title-box .category-assets-filters .immediate .number {
    background-color: #D53226;
}
#level-tile .body .assets-column .title-box .category-assets-filters .priority {
    color: #F9B616;
}
#level-tile .body .assets-column .title-box .category-assets-filters .priority .number {
    background-color: #F9B616;
}
#level-tile .body .assets-column .title-box .category-assets-filters .fyi {
    color: #24A649;
}
#level-tile .body .assets-column .title-box .category-assets-filters .fyi .number{
    background-color: #24A649;
}

#level-tile .body .assets-column .title-box .category-assets-filters .number {
    width: 28px;
    height: 28px;
    font-family: "FrutigerLTStd55Roman";
    text-align: center;
    line-height: 28px;
    text-align: center;
    color: #fff;
    display: inline-block;
    border: none;
    border-radius: 14px;
}
#level-tile .body .assets-column .title-box .category-assets-filters p {
    display: inline-block;
    width: calc(100% - 28px);
    text-align: center;
    line-height: 28px;

}

#level-tile .body .assets-column .assets-list {
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100% - 160px);
    padding-bottom: 30px;
}
#level-tile .body .assets-column .assets-list.empty {
    background: url("../img/tile-assets.png") no-repeat;
    background-size: cover;
}

#level-tile .body .assets-column .assets-list .asset {
    position: relative;
    width: 330px;
    margin: 34px 0 34px 25px;
}

#level-tile .body .assets-column .assets-list .asset .created {
    position: relative;
    color: #00a7e1;
    font-size: 12px;
    font-family: "FrutigerLTStd65Bold";
}
#level-tile .body .assets-column .assets-list .asset .created.unread:after {
    content: " ";
    background: url("../img/envelope.png") no-repeat;
    background-size: 18px 12px;
    -webkit-background-size: 18px 12px;
    width: 18px;
    height: 12px;
    position: absolute;
    right: -26px;
    top: 0px;
}

#level-tile .body .assets-column .assets-list .asset h3 {
    color: #000;
    font-size: 16px;
    font-family: "FrutigerLTStd65Bold";
    line-height: 26px;
}

#level-tile .body .assets-column .assets-list .asset h3::before {
    font-weight: bold;
    font-size: 24px;
    vertical-align: bottom;
}

#level-tile .body .assets-column .assets-list .asset h3.read-type-immediate::before {
    content: "!";
    color: #D53226;
}

#level-tile .body .assets-column .assets-list .asset h3.read-type-priority::before {
    content: "!";
    color: #F9B616;
}

#level-tile .body .assets-column .assets-list .asset h3.read-type-fyi::before {
    content: "!";
    color: #24A649;
}

#level-tile .body .assets-column .assets-list .asset .description {
    color: #000;
    font-size: 14px;
    font-family: "FrutigerLTStd55Roman";
}

#level-tile .body .assets-column .assets-list .asset .read-more {
    color: #00a7e1;
    font-size: 14px;
    font-family: "FrutigerLTStd65Bold";
    margin: 4px 0;
    line-height: 30px;
}

#level-tile .body .assets-column .assets-filters {
    position: absolute;
    bottom: 0px;
    margin: 10px 10px;
    width: calc(100% - 20px);
    color: #394B7F;
    font-weight: bold;
    font-size: 12px;
    height: 80px;
    line-height: 22px;
    display: none;
}

#level-tile.tile-6 .body .assets-column .assets-filters {
    display: block;
}

#level-tile.tile-6 .body .assets-column .assets-list.empty + .assets-filters {
    display: none;
}

#level-tile.tile-6 .body .assets-column .assets-filters span {
    cursor: pointer;
    opacity: 0.5;
}

#level-tile.tile-6 .body .assets-column .assets-filters span.active {
    opacity: 1;
}

#level-tile.tile-6 .body .assets-column .assets-list {
    height: calc(100% - 260px);
}
#level-tile.tile-6 .body .assets-column .assets-list.empty {
    height: calc(100% - 160px);
}

#level-tile .body .categories-column {
    width: calc(100% - 416px);
    float: right;
    height: 100%;
    overflow-x: auto;
}

#level-tile .body .categories-column .tile {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
}

#level-tile .body .categories-column .tile.floatLeft {
    float: left;
    margin: 0px 1.5px 1px 0;
}

#level-tile .body .categories-column .tile.floatRight {
    float: right;
    margin-bottom: 1px;
}

#level-tile .body .categories-column .tile.width100percent {
    width: 950px;
    width: 100%;
}

#level-tile .body .categories-column .tile.width60percent {
    width: 540px;
    width: calc(60% - 1px);
}

#level-tile .body .categories-column .tile.width50percent {
    width: 475px;
    width: calc(50% - 1px);
}

#level-tile .body .categories-column .tile.width40percent {
    width: 408px;
    width: calc(40% - 1px);
}

#level-tile .body .categories-column .tile.width30percent {
    width: 269px;
    width: calc(30% - 1px);
}

#level-tile .body .categories-column .tile.heightLarge { height: 391px; }
#level-tile .body .categories-column .tile.heightExtraLarge { height: 442px; }
#level-tile .body .categories-column .tile.heightMiddle { height: 297px; }
#level-tile .body .categories-column .tile.heightSmall { height: 195px; }

#level-tile .body .categories-column .tile .category-title {
    position: absolute;
    left: 0px;
    bottom: 10px;
    padding: 0 20px 0 10px;
    border: none;
    border-radius: 0 18px 18px 0;
    color: #000;
    font-size: 14px;
    line-height: 36px;
    height: 36px;
    font-family: "FrutigerLTStd55Roman";
    background-color: rgba(204,204,204,0.8);
}

/*#level-tile .body .categories-column .tile .unread-number {
    position: absolute;
    right: 10px;
    bottom: 10px;
    border: none;
    border-radius: 18px;
    color: #fff;
    font-size: 14px;
    line-height: 36px;
    height: 36px;
    width: 36px;
    font-family: "FrutigerLTStd55Roman";
    background-color: rgba(0,167,225,0.8);
    text-align: center;
}*/
#level-tile .body .categories-column .tile .unread-number {
    position: absolute;
    right: 10px;
    bottom: 10px;
}
#level-tile .body .categories-column .tile .unread-number span {
    width: 30px;
    height: 30px;
    line-height: 30px;
    color: #fff;
    border: none;
    border-radius: 15px;
    font-family: "FrutigerLTStd55Roman";
    text-align: center;
    margin: 0 4px;
    display: inline-block;
}

#level-tile .body .categories-column .tile .unread-number .immediate {
    background-color: #D53226;
}
#level-tile .body .categories-column .tile .unread-number .priority {
    background-color: #F9B616;
}
#level-tile .body .categories-column .tile .unread-number .fyi {
    background-color: #24A649;
}


#level-tile .footer { height: 89px; background: #fff;}

#level-tile .body .asset-column {
    display: none;
    position: absolute;
    width: calc(100% - 416px);
    top: 0px;
    right: 0px;
    height: 100%;
    background-color: #fff;
}
#level-tile .body .asset-column .content {
    padding: 20px;
}

#level-tile .body .asset-column .content h3 {
    width: 80%;
    font-size: 20px;
    font-family: "FrutigerLTStd65Bold";
}

#level-tile .body .asset-column .content .description {
    margin: 20px 0;
    font-size: 18px;
    font-family: "FrutigerLTStd45Light";
    overflow: hidden;
    overflow-y: scroll;
    max-height: 814px;
}
#level-tile .body .asset-column .content .description.video {
    max-height: 280px;
}

#level-tile .body .asset-column .content video {
    width: 100%;
}

#level-tile .body .asset-column .close {
    position: absolute; right: 5px; top: 5px; width: 40px; height: 40px; background-image: url("../img/icon-close.png"); background-size: 40px 40px; cursor: pointer;
}

#level-tile .asset.ondemand:after {
    position: absolute;
    right: -48px;
    top: 0px;
    content: "";
    background: url("../img/ondemand.png") no-repeat;
    width: 40px;
    height: 40px;

}

#level-tile .asset.online:after {
    position: absolute;
    right: -48px;
    top: 0px;
    content: "";
    background: url("../img/online.png") no-repeat;
    width: 40px;
    height: 40px;    
}
#level-tile .static-info { display: none;}

/* Level Tile Rows */
#level-tile.tile-rows {}
#level-tile.tile-rows .body {
    height: calc(100% - 140px);
    overflow: hidden;
}
#level-tile.tile-rows .body .assets-column .title-box {
    background: #6600a1;
}
#level-tile.tile-rows .body .assets-column .title-box.empty {
    background: #6600a1 url(../img/saxenda.png) center center no-repeat;
    background-size: contain;
}

#level-tile.tile-rows .body .assets-column .assets-list.empty {
    background: url(../img/saxenda-side.png);
    background-size: auto;
}
#level-tile.tile-6 .body .assets-column .title-box {
    background: #00a7e1;
}
#level-tile.tile-6 .body .assets-column .title-box.empty {
    background: #ededed url(../img/medical-logo.png) center center no-repeat;
    background-size: 179px 140px;
}
#level-tile.tile-rows .body .categories-column .tile .category-title {display: none;}
#level-tile.tile-rows .body .categories-column .tile .unread-number { display: none;}

#level-tile.tile-rows .static-info { display: block;}
#level-tile.tile-rows .saxenda-prescribing-information {
    width: 100%;
    height: 65px;
    background: #6600a1 url(../img/saxenda-prescribing-information.png) center center no-repeat;
    background-size: cover;
}

#level-tile.tile-rows .body .assets-column .assets-list .asset .created.unread:after {
    display: none;
}

#level-tile.tile-rows .body .assets-column .assets-list .asset .created {
    display: none;
}
#level-tile.tile-rows .body .assets-column .assets-list .training-video-tile {
    display: none;
}




/* Level 3 */

#resources .body {background-image: url("../img/background-blue.png"); background-position: center; background-position-x: 75px; background-position-y: -120px;}

#resources .items {
    position: absolute;
    top: 120px; left: 0px;
    width: 100%;
    height: 64vh;
    overflow-y: scroll;
}

#resources .item {
    position: relative;
    background-color: #d6d6d6;
    border: 1px solid #999;
    width: 42%;
    float: left;
    margin-left: 50px;
    height:120px;
    border-radius: 10px;
    background: linear-gradient(#f6f6f6, #d6d6d6, #d6d6d6, #a6a6a6);
    box-shadow: inset 1px -1px 3px #888;
    cursor: pointer;
    margin-bottom:20px;
    margin-top:20px;
}

#resources .item img {
    float:left;
    width:120px;
    height:120px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

#resources .item h4 {
    padding: 10px;
    width:50%;
    font-size: 20px;
    color: #0088d4;
    height: 102px;
    display: table-cell;
    vertical-align: middle;
}

#resources .item.ondemand:after {
    position: absolute;
    right: 4px;
    bottom: 6px;
    content: "";
    background: url("../img/ondemand.png") no-repeat;
    width: 40px;
    height: 40px;
}

#resources .item.online:after {
    position: absolute;
    right: 4px;
    bottom: 6px;
    content: "";
    background: url("../img/online.png") no-repeat;
    width: 40px;
    height: 40px;    
}


/* Popups */
.popup { display: none;}
.popup .close { position: absolute; right: 5px; top: 5px; width: 40px; height: 40px; background-image: url("../img/icon-close.png"); background-size: 40px 40px; cursor: pointer; }
#pdf-iframe.popup .close { width: 90px; height: 30px; left: 16px; top: 80px; background-image: url("../img/close-red.png"); background-size: 90px 30px; opacity: 0.8; }

.popup .close-hidden {position: absolute;
                      right: calc(50% - 125px);
                      bottom: 10px;
                      opacity: 1;
                      width: 250px;
                      height: 80px;
                      line-height: 16px;
                      font-size: 16px;
                      cursor: pointer;}
.popup#search { z-index: 2100; width: 100%; height: 100%; position: absolute; top: 50px; background-color: white;}

.popup#search h1 {
    padding: 10px;
    color: #999;
    font-weight: normal;
    border-bottom: 1px solid #999;
    font-size: 26px;
}

.popup#search h1 .close-search {
    width: 40px;
    height: 40px;
    background-image: url("../img/icon-close.png");
    background-size: 40px 40px;
    cursor: pointer;
    float:right;
    margin-top:-5px;
}

.popup#search ul { height: calc(100% - 102px); overflow-y: scroll; list-style: none; }
.popup#search ul li {
    font-size: 18px;
    padding: 5px;
    height: 80px;
    border-bottom: 1px solid #bbb;
    position: relative;

}

.popup#search ul li img {
    width: 80px;
    height: 80px;
    float: left;
    border-radius: 6px;
}

.popup#search ul li h4 {
    float: left;
    margin-left: 20px;
    margin-top: 34px;
    width: calc(100% - 130px);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.popup#search ul li .view {
    color: white;
    background-color: #aaa;
    border-radius: 28px;
    float: right;
    margin-right: 20px;
    margin-top: 22px;
    text-decoration: none;
    padding: 10px 15px;
}
/* Html App Single */
.popup#app-single { position: absolute; left: 0px; top: 0px; z-index: 2150; width: 100%; height: 100%; background-color: #fff;}
.popup#app-single iframe { width: 100%; height: 100%; overflow: hidden; border: none;}
/* Html App iframe */
.popup#app-iframes { position: absolute; left: 0px; top: 0px; z-index: 2150; width: 100%; height: 100%; background-color: #fff;}
.popup#app-iframes .app-iframe {position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; }
.popup#app-iframes iframe { width: 100%; height: 100%; overflow: hidden; border: none;}

#app-iframes-navigation {
    z-index: 2000;
    position: absolute;
    right: 0px;
    top: 50px;
    width: 80px;
    height: 718px;
    background: #272d6a;
    padding-top: 58px;
    -webkit-box-shadow: -5px 0px 15px -2px rgba(0,0,0,0.75);
    -moz-box-shadow: -5px 0px 15px -2px rgba(0,0,0,0.75);
    box-shadow: -5px 0px 15px -2px rgba(0,0,0,0.75);
}

.app-iframes-navigation-open-button {
    display: none;
    z-index: 2002;
    position: absolute;
    right: 0px;
    top: 60px;
    font-size: 40px;
    line-height: 40px;
    width: 50px;
    height: 40px;
    color: white;
    background-color: #272d6a;
    border-top-left-radius: 10px;
    border: none;
    text-align: center;
    border-bottom-left-radius: 10px;

    width: 0px;
    height: 0px;
}

#app-iframes-navigation .arrows {
    margin-top: 20px;
    padding: 0 5px;
}

#app-iframes-navigation .arrows .arrow-left,
#app-iframes-navigation .arrows .arrow-right {
    width: 45%;
    text-align: center;
    height: 40px;
    display: inline-block;
    font-size: 36px;
    color: white;
    border: 1px solid white;
    border-radius: 5px;
}

#app-iframes-navigation .arrows .arrow-left {
    float: left;
}

#app-iframes-navigation .arrows .arrow-right {
    float: right;
}

#app-iframes-navigation .items .item { cursor: pointer; padding: 0 5px;  margin-top: 20px; width: 70px; height: 70px; display: inline-block; vertical-align: middle;}

#app-iframes-navigation .home-application {
    display: inline-block;
    width: 70px;
    height: 70px;
    margin: 0 5px;
    vertical-align: middle;
    text-align: center;
    /* padding-top: 40px; */
    border-radius: 10px;
    border: 1px solid white;
    background-image: url('../img/home_icon.png');
    background-size: 40px;
    background-position: center;
    background-repeat: no-repeat;
}

/* Html App iframe*/
.popup#online-app-iframe { position: absolute; left: 0px; top: 0px; z-index: 2150; width: 100%; height: 100%; background-color: #fff;}
.popup#online-app-iframe iframe { width: 100%; height: 100%; overflow: hidden; border: none;}
/* Pdf Iframe */
.popup#pdf-iframe { position: absolute; left: 0px; top: 0px; z-index: 2650; width: 100%; height: 100%; background-color: #fff;}
.popup#pdf-iframe div.wrapper {
    width: 100%;
    height: 100%;
}
.popup#pdf-iframe iframe { width: 100%; height: 100%;}

/* Video Frame */
.popup#video-frame { z-index: 2150; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-color: #fff; }
.popup#video-frame video { position: absolute; left:2%; top:2%; width: 96%; height: 96%;}
.popup#video-frame iframe { position: absolute; left:2%; top:2%; width: 96%; height: 96%;}
.popup#video-frame embed { position: absolute; left:2%; top:2%; width: 96%; height: 96%;}
.popup#video-frame .play-button { display: none; position: absolute; left:2%; top:2%; width: 96%; height: 96%; background: url("../img/asset-type-other.jpg") no-repeat; background-size: 40px 40px; background-position: center center;}

/* Change log */
.popup#change-log { position: absolute; left: 0px; top: 0px; z-index: 2150; width: 100%; height: 100%; background-color: #fff;}
.popup#change-log .wrapper { width: 100%; padding: 10px; height: calc(100% - 20px); overflow-y: scroll;}
.popup#change-log .wrapper .item { margin-bottom: 20px; display: inline-block; clear: both;}
.popup#change-log .wrapper h2 { margin-bottom: 10px; color: #999; font-weight: normal; font-size: 20px; }
.popup#change-log .wrapper h3 { font-size: 16px; margin-top: 10px; margin-bottom: 10px;}
.popup#change-log .wrapper ul { margin-bottom: 10px; list-style-type: none; }
.popup#change-log .wrapper li { clear: both; font-size: 18px; line-height: 40px;}
.popup#change-log .wrapper li img { margin-right: 5px; float: left; width: 40px; height: 40px; }
.popup#change-log .wrapper li span { float: left;}
.show-change-log {
    display: none;
    position: absolute;
    top: 10px;
    right: 260px;
    color: #fff;
    background-color: #aaa;
    border-radius: 28px;
    text-decoration: none;
    padding: 7px 15px;
    font-size: 14px;
}

/* New for Biopharm */
#homepage .body .resource-types { position: absolute; left:0px; top: 0px;  width: 100%; height: 100%;}

#homepage .body .resource-types .resource-type {
    position: relative;
    padding: 0;
    float: left;
    width: 50%;
    height: 100%;
    display: inline-block;
}

#homepage .body .resource-types .resource-type span {
    vertical-align: middle;
    display: table-cell;
    position: relative;
    text-align: center;
}

#homepage .body .resource-types .resource-type .custom-button {
    padding: 10px 10px;
    font-size: 36px;
    color: #fff;
    border: 1px solid #f3f2ea;
    border-radius: 25px;
    text-align: center;
    min-width: 262px;
    position: absolute;
    left: calc(50% - 131px);
    top: calc(50% - 26px);
}

#homepage .body .resource-types .resource-type .custom-button.green {
    background-color: rgba(110,181,65,0.5);
}

#homepage .body .resource-types .resource-type .custom-button.blue {
    background-color: rgba(0,91,171,0.5);
}

#debug-info {
    background-color: #dedede	;
    position: absolute;
    top: 400px;
    width: 970px;
    left: 10px;
    height: 250px;
    overflow: scroll;
    color: black;
    padding:10px;
}

#debug-info.hidden {
    opacity: 0;
}
.send_checker { position: absolute; z-index: 10; right: 0px; top: 0px; width: 38px; height: 38px; background: url("../img/checker_empty.png") no-repeat center center; -webkit-background-size: 28px 28px; background-size: 28px 28px; cursor: pointer;}
.send_checker.checked { background: url("../img/checker_checked.png") no-repeat center center; -webkit-background-size: 28px 28px; background-size: 28px 28px; }

#send-by-email {
    display: none;
    position: absolute;
    right: 76px;
    top: 78px;
    text-align: center;
    text-decoration: none;
    min-width: 20px;
    min-height: 20px;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #c1c1c1;
    box-sizing: content-box;
    line-height: 20px;
    background-position: center -26px;
    opacity: 0.5;
    background-color: #fff;
}

#send-by-email.active {
    opacity: 1;
    cursor: pointer;
}
#send-by-email img {
    width: 24px;
    vertical-align: middle;
    border: none;
}

#overlay { display:none; background-color: #000; opacity: 0.5; position: fixed; left: 0; top: 0; overflow: hidden; z-index: 1000; width: 100%; height: 100%;}

#calendar {
    background: #fff;
}
#calendar .body {
    height: calc(100vh - 90px);
    overflow: hidden;
    background: #fff;
}
#calendar .footer {
    position: relative;
    background-color: #fff;
}
.calendar-button {
    width: 42px;
    height: 42px;
    background: url("../img/calendar.png") no-repeat;
    background-size: cover;
    margin: 24px 0 0 10px;
    display: inline-block;
}
#calendar .back{
    width: 114px;
    height: 42px;
    background: url("../img/back_uni.png") no-repeat;
    background-size: cover;
    margin: 24px 0 0 10px;
    display: inline-block;
}

#calendar-container {
    margin: 25px;
}

#calendar .fc-unthemed td.fc-today {
    background: #169ED9;
}

#calendar .fc-unthemed td.fc-today .fc-day-number {
    color: #fff;
}

#calendar .fc-event, 
#calendar .fc-event-dot {
    background: #24285F;
}



.swal2-container {
    z-index: 3000 !important;
}

.open-print {
    position: absolute;
    right: 4px;
    bottom: 6px;
    background: url("../img/print.png") no-repeat;
    background-size: cover;
    width: 40px;
    height: 40px;
}

#level-tile .send-email {
    background: url("../img/envelope.png") no-repeat;
    background-size: 21px 14px;
    -webkit-background-size: 21px 14px;
    width: 21px;
    height: 14px;
    display: inline-block;
    margin-left: 4px;
    /*    position: absolute;
        right: -26px;
        top: 0px;*/
}

#app-button {
    display: none;
    position: absolute;
    z-index: 2000;
}

#app-button button {
    background-color: #253369;
    border-color: #253369;
    text-decoration: none;
    -webkit-appearance: button;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    color: #fff;
}

.special-submenu {
    display: none;
    position: absolute;
    z-index: 2000;
}

.special-submenu .btn-secondary,
.special-submenu .btn-secondary:not(:disabled):not(.disabled):active, 
.special-submenu .btn-secondary:not(:disabled):not(.disabled).active, 
.special-submenu .show > .btn-secondary.dropdown-toggle {
    background-color: #253369;
    border-color: #253369;
}


/* Assets */

#assets .container { position: relative; margin: 0 auto; width: 96vw; max-width: 1200px; padding: 0;}
#assets .header { height: 100px;}
#assets .header .welcome { position: absolute; left: 0px; top: 10px; width: 243px; height: 56px; background: url("../img/welcome-scg.png") no-repeat; background-size: contain;}
#assets .header .logo { position: absolute; right: 0px; top: 10px; width: 348px; height: 75px; background: url("../img/janssen_logo.png") no-repeat; background-size: contain;}
#assets .header .logo span { position: absolute; right: 0px; bottom: -10px; color: #666; font-size: 12px;}

#assets ul { list-style: none;}
#assets ul li { cursor: pointer; }
#assets .design-bar-short { margin-top: 20px; display: block; width: 100%; height: 28vw; max-height: 43px; background: url("../img/desing-bar-short.png") center center no-repeat; background-size: contain;}
#assets .design-bar-short .homepage { float: left; display: inline-block; margin-left: 10px; line-height: 43px; max-height: 43px; color: #fff; }
/*#assets .design-bar-short .favorites { display: block; }*/
/*#assets .design-bar-short .favorites2 { display: block; }*/

#assets .columns { position: relative; margin-top: 30px;}
#assets .left-column { position: relative; float: left; margin-top: 50px; width: 19%; }
#assets .left-column::after { position: absolute; right: 0px; top: 0px; content: ""; width: 1px; height: 100%; background: #139FDA;}

#assets .left-column .button.homepage { margin: 0 0 0 10px; width: 44px; height: 33px; background: url("../img/home_button.png") no-repeat; background-size: contain; }
#assets .left-column .category-type-img { margin: 0 10px; height: 120px; background-repeat: no-repeat; background-position: left center; background-size: contain; background-color: #fff;}
#assets .left-column .category-type-title { margin: 0 10px; color: #00467E; font-weight: bold; font-size: 20px;}
#assets .left-column p { margin: 10px 0 0 10px;font-size: 12px;}
#assets .left-column .category { margin: 20px 0 0 10px;}
#assets .left-column .category li { padding: 5px 0; line-height: 20px; font-size: 14px; color: #00467E; }
#assets .left-column .category li.active { color: #00A0DF; font-weight: bold;  }

#assets .right-column { position: relative; float: right; margin-top: 24px; width: 78%; }
#assets .right-column .tags-container {}
#assets .right-column .tags-container .tags {}
#assets .right-column .tags-container .tags li { float: left; margin: 0 7px 10px; display: inline-block; overflow: hidden; width: 120px; line-height: 30px; height: 30px; font-size: 12px; color: #fff; text-align: center; background-color: #003479}
#assets .right-column .tags-container .tags li.active { background-color: #139FDA; }

#assets .right-column .search { float: right;}
#assets .right-column .search input { display: inline-block; padding: 0 20px; width: 204px; height: 28px; line-height: 28px; border: 1px solid #00A0DF; border-radius: 12px; background: transparent; color: #B3B3B3; text-align: center; font: 400 13.3333px Arial;}
#assets .right-column .search .button { display: inline-block; margin-left: 10px; height: 30px; line-height: 30px; font-size: 16px; color: #fff; text-align: center; padding: 0 20px; border: none; border-radius: 12px; background-color: #00A0DF; }

/*#favorites .right-column .reset-filters,*/
/*#favorites2 .right-column .reset-filters,*/
#assets .right-column .reset-filters { display: none; margin: 10px; padding: 10px 0; font-size: 12px; clear: both; border-bottom: 1px solid #ccc;}
/*#favorites .right-column .reset-filters span,*/
/*#favorites2 .right-column .reset-filters span,*/
#assets .right-column .reset-filters span { display: inline-block; margin-left: 10px; height: 26px; line-height: 26px; font-size: 14px; color: #fff; text-align: center; padding: 0 10px; border: none; border-radius: 10px; background-color: #00A0DF; }

#assets .right-column .assets-container { margin-top: 20px; height: calc(100vh - 250px); overflow-x: auto;}
#assets .right-column .assets-container .assets { margin-left: 40px; }
#assets .right-column .assets-container .assets li { margin: 14px 0; position: relative; min-height: 60px; display: flex; clear: both; border-bottom: 1px solid #ccc;}
#assets .right-column .assets-container .assets li .img { float: left; margin: 0 10px; width: 44px; height: 55px; background-repeat: no-repeat; background-position: left center; background-size: contain;}
#assets .right-column .assets-container .assets li .img { background-image: url("../img/asset-type-other.jpg"); }
#assets .right-column .assets-container .assets li .img.pdf { background-image: url("../img/asset-type-pdf.png"); }
#assets .right-column .assets-container .assets li .img.ppt { background-image: url("../img/asset-type-ppt.png"); }
#assets .right-column .assets-container .assets li .img.video { background-image: url("../img/asset-type-video.png"); }
#assets .right-column .assets-container .assets li .text-container { margin-left: 30px; margin-bottom: 14px; float: left; display: table; height: 100%; width: calc(100% - 100px);}
#assets .right-column .assets-container .assets li .text {display: table-cell; vertical-align: middle; }
#assets .right-column .assets-container .assets li .text h3 { 
    display: block;
    font-size: 1.17em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;

}
#assets .right-column .assets-container .assets li .text h3 span {
    color: #00A0DF;
}
#assets .right-column .assets-container .assets li .text small { margin-bottom: 6px; font-size: 16px; color: #003479; line-height: 16px;}
/*#assets .right-column .assets-container .assets li .text small .favorite { margin-right: 4px; display: inline-block; text-align: center; line-height: 32px; color: #fff; font-weight: bold; font-size: 16px; vertical-align: sub; width: 25px; height: 24px; background: url("../img/favorite-dark.png") no-repeat; background-size: contain;}
#assets .right-column .assets-container .assets li .text small .favorite:hover { background: url("../img/favorite-active.png") no-repeat; background-size: contain; }
#assets .right-column .assets-container .assets li .text small .favorite.active { background: url("../img/favorite-active.png") no-repeat; background-size: contain;}
#assets .right-column .assets-container .assets li .text small .favorite.active:hover { background: url("../img/favorite-dark.png") no-repeat; background-size: contain;}
#assets .right-column .assets-container .assets li .text small .favorite2 { margin-right: 4px; display: inline-block; text-align: center; line-height: 32px; color: #fff; font-weight: bold; font-size: 16px; vertical-align: sub; width: 25px; height: 24px; background: url("../img/favorite-dark.png") no-repeat; background-size: contain;}
#assets .right-column .assets-container .assets li .text small .favorite2:hover { background: url("../img/favorite-active.png") no-repeat; background-size: contain; }
#assets .right-column .assets-container .assets li .text small .favorite2.active { background: url("../img/favorite-active.png") no-repeat; background-size: contain;}
#assets .right-column .assets-container .assets li .text small .favorite2.active:hover { background: url("../img/favorite-dark.png") no-repeat; background-size: contain;}*/
#assets .right-column .assets-container .assets li .text small { display: block; margin: 5px 0; clear: both;}
#assets .right-column .assets-container .assets li .text small span { padding-right: 10px; display: inline-block; font-size: 12px; color: #000; }
#assets .right-column .assets-container .assets li .text small span.red { color: red; }
#assets .right-column .assets-container .assets li .text p { font-size: 14px; color: #00A0DF; }
#assets .right-column .assets-container .assets li .text p a { 
    display: inline-block;
    margin: 5px 0;
    height: 20px;
    line-height: 20px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    padding: 0 10px;
    border: none;
    border-radius: 12px;
    background-color: #003479;
    text-decoration: none;
}



/* Making marks for UL and OL list visible in description class */
.description ul,
.description ol {
    padding-left: 20px;
}

.description {
    font-size: 10pt;
    font-family: Verdana; 
}



/* Weekly communication section in header of level-tile page */
#level-tile {}
#level-tile .top-menu-container { display: none; position: absolute; left: 420px; line-height: 50px;}
#level-tile .top-menu-container .title { display: inline-block; margin-right: 10px;}
#level-tile .top-menu-container ul  { list-style: none; display: inline-block;}
#level-tile .top-menu-container ul li { font-size: 16px; margin-left: 25px; display: inline-block; padding-left: 46px; background-position: center left; background-repeat: no-repeat; background-size: 36px; }



@media (max-width: 800px) {

    #calendar .body {
        height: auto;
        overflow: scroll;
    }
}


/* Special side menu */

#special-slidemenu {
    background: rgba(244,244,244,0.95);
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    /*background-color: #fff;*/
    overflow: hidden;
    padding-top: 60px;
    transition: 0.5s;
    z-index: 2600;
}
#special-slidemenu .button-area {
    margin-bottom: 1px; width: calc(100% - 20px); font-weight: 600; font-size: 16px; color: #000; padding: 5px 10px;
    color: #001864;
}
#special-slidemenu .button-area.category-title {
    font-weight: 800;
    font-size: 18px;
}

#special-slidemenu span {
    font-size: 12px;    
}

#special-slidemenu .assets {
    margin-left: 10px;
}

#special-slidemenu .closebtn {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 36px;
    margin-left: 50px;
    color: #000;
    text-decoration: none;
}
#special-slidemenu .special-slidemenu-content {
    overflow-y: auto;
    height: 100%;
}

/*.special-slidemenu-opener { 
    position: absolute;
    left: 130px; 
    bottom: 10px;
    width: 46px;
    height: 46px;
    background:#253369 url("../img/briefcase.png") no-repeat center center;
    background-size: 74%;
    border: 1px solid transparent;
    border-color: #253369;
    border-radius: 8px;
}*/


#solution-template {
    display: none;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 0;
    /*background-color: #fff;*/
    border-top: 1px solid #000;
    z-index: 2600;
    /*background-color: rgba(25bacground-color: #e9ecef;5,255,255,1);*/
    background-color: #e9ecef;
}

#solution-template .close-button {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 36px;
    margin-left: 50px;
    color: #000;
    text-decoration: none;
}

#solution-template .top-logo {
    display: none;
}

#solution-template .top-menu {
    width: 100%;
    margin-top: 30px;
    float: right;
    /*margin-bottom: 16px;*/
}
#solution-template .top-menu .item {
    height: 56px;
    float: none;
    display: inline-flex;
    align-items: center;
    font-size: 18px;
    position: relative;
    font-weight: bold;
    padding-left: 10px;
    color: #5f6368;
}
#solution-template .top-menu .item.active::before {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    bottom: 0;
    content: '';
    display: block;
    height: 3px;
    left: 0;
    margin: 0 8px;
    position: absolute;
    right: 0;    
}
#solution-template .top-menu .item.red {

}
#solution-template .top-menu .item.red::before {
    background-color: #d93025;
}
#solution-template .top-menu .item.grey::before {
    background-color: #9E978E;
}
#solution-template .top-menu .item.dark-blue::before {
    background-color: #114581;
}
#solution-template .top-menu .item.light-blue::before {
    background-color: #00A7E1;
}
#solution-template .top-menu .item.active.red {
    color: #d93025;
}
#solution-template .top-menu .item.active.grey {
    color: #9E978E;
}
#solution-template .top-menu .item.active.dark-blue {
    color: #114581;
}
#solution-template .top-menu .item.active.light-blue {
    color: #00A7E1;
}

#solution-template .back-to-categories {
    display: none;
}

#solution-template .categories-column {
    width: 0px;
    float: left;
    display: none;
    left: -280px;
}

#solution-template .categories-column .logo {
    padding: 10px;
    margin-bottom: 20px;
}

#solution-template .categories-column .logo img {
    display: table-cell;
    margin: 0 auto;
}

#solution-template .categories-column .title {
    padding-left: 10px;
    font-size: 20px;
    line-height: 40px;
    font-size: 20px;
    font-weight: bold;
}

#solution-template .categories-column .item {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 36px;
    padding-left: 10px;
    line-height: 36px;
    font-size: 20px;
}
#solution-template .categories-column .item.active {
    -webkit-border-radius: 0 16px 16px 0;
    border-radius: 0 16px 16px 0;
    background-color: #ccc;
    -webkit-box-shadow: inset 0 0 0 1px transparent;
    box-shadow: inset 0 0 0 1px transparent;
    font-weight: bold;
}

#solution-template.fullscreen {
    height: 100% !important;
    border-top: none;
    
}

#solution-template.fullscreen .top-menu {
    width: calc(100% - 280px);
    float: right;
}
#solution-template.fullscreen .categories-column {
    width: 260px;
    float: left;
    display: block;
    margin-top: 0px;
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100% - 86px);
    padding-bottom: 30px;
}
#solution-template.fullscreen .assets-column {
    width: calc(100% - 280px);
    float: right;
    background-color: rgba(242,245,245,0.8);
}

/* Assets list left column */
#solution-template .assets-column {
    width: 100%;
    float: right;
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100% - 86px);
}
#solution-template .assets-column .assets-list.empty {
    /*background: url("../img/tile-assets.png") no-repeat;*/
    /*background-size: cover;*/
}

#solution-template .assets-column .asset {
    position: relative;
    box-shadow: inset 0 -1px 0 0 rgba(100,121,143,0.122);
    background: rgba(242,245,245,0.8);
    color: #202124;
    display: flex;
    padding-bottom: 10px;
    padding-top: 10px;
    line-height: 22px;
}

#solution-template .assets-column .asset .created {
    position: relative;
    font-size: 18px;
    padding: 0 10px;
    line-height: 22px;
    margin-bottom: 0;
    width: 110px;
    text-align: right;
}

#solution-template .assets-column .asset h3 {
    font-size: 20px;
    line-height: 22px;
    padding: 0 10px;
    margin-bottom: 0;
    width: 300px;
    min-width: 500px;
    text-overflow: ellipsis;
    overflow: hidden;  
    white-space: nowrap;

}

#solution-template .assets-column .asset p {
    font-size: 18px;
    padding: 0 10px;
    line-height: 22px;
    margin-bottom: 0;
    text-overflow: ellipsis;
    overflow: hidden;  
    white-space: nowrap;
}



/* Asset right column */

#solution-template .asset-column {
    width: calc(100% - 280px);
    position: absolute;
    right: 0px;
    bottom: calc(-100% + 86px);
    background-color: rgba(255,255,255,1);
    display: none;
}
#solution-template.fullscreen .asset-column {
    height: calc(100% - 86px);
    overflow-x: auto;
}

#solution-template.fullscreen .asset-column .close-asset-button {
    position: absolute;
    top: 20px;
    right: 10px;
}


#solution-template.fullscreen .asset-column .content {
    padding: 20px;
}

#solution-template.fullscreen .asset-column .content h3 {
    width: 80%;
    font-size: 20px;
}

#solution-template.fullscreen .asset-column .content .description {
    margin: 20px 0;
    font-size: 18px;
    overflow: hidden;
    overflow-y: scroll;
    max-height: 814px;
}
#solution-template.fullscreen .asset-column .content .description.video {
    max-height: 280px;
}

#solution-template.fullscreen .asset-column .content video {
    width: 100%;
}


.Chevron{
    /*position:relative;*/
    display:block;
    height:25px;/*height should be double border*/
    width: 25px;
}
.Chevron:before,
.Chevron:after{
    position:absolute;
    display:block;
    content:"";
    border:12px solid transparent;/*adjust size*/
}
/* Replace all text `top` below with left/right/bottom to rotate the chevron */
.Chevron.top:before{
    top:0;
    border-top-color:#007bff;/*Chevron Color*/
}
.Chevron.top:after{
    top:-5px;/*adjust thickness*/
    border-top-color:rgba(255,255,255,1);/*Match background colour*/
}
.Chevron.left:before{
    right:0;
    border-right-color:#007bff;/*Chevron Color*/
}
.Chevron.left:after{
    right:-5px;/*adjust thickness*/
    border-right-color:rgba(255,255,255,1);/*Match background colour*/
}


/* Controls */
.controls {
    display: none;
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 10000;
}
.controls .toggle-fullscreen {
    cursor: pointer;
    display: inline-block;
    background: url("../img/icons8-color-48.png") no-repeat;
    background-size: cover;
    width: 24px;
    height: 24px;
    margin: 0 2px 0 0;
}
.controls .close {
    cursor: pointer;
    display: inline-block;  
    background: url("../img/icons8-close-window-48.png") no-repeat;
    background-size: cover;
    width: 24px;
    height: 24px;
    float: left;
    
}

.dev-test {
    display: none;
    position: absolute;
    left: 0px;
    top: 0px;
    background: #fff;
    border: 1px solid #000;
    width: 40vw;
    height: 100vh;
    z-index: 1000000;
    color: #000;    
    overflow-x: scroll;
}
.dev-test div {
    padding: 5px;
}
.dev-test .close-dev-test {
    position: absolute;
    right: 5px;
    top: 5px;
    font-size: 30px;
}

@media only screen and (max-width: 940px) {

    #solution-template .top-logo {
        display: block;
        width: 100%;
        clear: both;
        float: none;
    }

    #solution-template .top-logo .logo {
        padding: 10px;
        margin-bottom: 0px;
    }

    #solution-template .top-logo .logo img {
        display: table-cell;
        margin: 0 auto;
    }

    #solution-template .top-menu {
        float: none;
        width: 100%;
    }
    #solution-template.fullscreen .top-menu {
        float: none;
        width: 100%;
    }

    #solution-template .top-menu .item {
        display: block;
        width: calc(100% - 20px) !important;
        height: 36px;
    }

    #solution-template .top-menu .item.active {
        color: #5f6368 !important;
    }
    #solution-template .top-menu .item.active::before {
        display: none;
    }

    #solution-template .back-to-categories {
        display: block;
        margin: 10px;
        position: relative;
        margin-left: 0px;
    }    
    #solution-template .back-to-categories:after {
        border-right-color: rgb(233 236 239);
    }

    #solution-template .categories-column {
        float: none;
        width: 100%;
    }
    #solution-template.fullscreen .categories-column {
        float: none;
        width: 100%;
    }

    #solution-template .categories-column .item.active {
        background: none;
        font-weight: normal;
        box-shadow: none;
    }

    #solution-template .categories-column .logo {
        display: none;
    }

    #solution-template .assets-column,
    #solution-template.fullscreen .assets-column {
        display: none;
        width: 100%;
        float: none;
    }
    
    #solution-template .assets-column  {
        height: calc(100% - 120px);
    }

    #solution-template .assets-column .asset .created {
        font-size: 16px;
        width: 100px;
    }

    #solution-template .assets-column .asset h3 {
        width: auto;
        min-width: inherit;
        font-size: 18px;
    }

    #solution-template .assets-column .asset p {
        font-size: 16px;
    }

    #solution-template .asset-column {
        display: none;
        width: 100%;
        float: none;
    }


}