@import "../../../Base/Content/sass/compass";
@import "../../../Base/Content/sass/bootstrap/mixins";
@import "../../../Base/Content/sass/bootstrap/variables";
@import "../../Branding/Content/Partials/Variables";

.no-panel {
    position: fixed;
    /*top: 85px;*/
    height: 100%;
    right: 0;
    margin-left: -1px;
    margin-top: -5px;
    overflow: hidden;
    /*width:100%;
		min-width:400px;*/
    z-index: 1030;
    background-color: #f4f4f4;
    padding: 25px; /* kræver box-sizing border-box for korrekt bredde udregning */
    line-height: 20px;
    border-left: 1px solid #c8c8c8;
    box-sizing: border-box !important;
    display: none;
    /*width: 341px;*/
    /* kræver at vi sætter bredden dynamisk i forhold til hvor iconet er  - $(document).width() - ($('.no-icon').offset().left + $('.no-icon').width()); */
}

.no-panel.expanded {
    display: block;
}

.no-panel h1 {
    font-size: 28px;
    font-weight: 100;
}

.no-panel h3 {
    font-size: 17px;
    font-weight: 400;
}

.no-panel > ul {
    padding: 0;
    list-style: none;
}

.no-panel > ul > li > ul {
    list-style: none;
    padding: 0 15px 0 15px;
}

.no-panel > ul > li > h3 > .ms-Icon {
    vertical-align: bottom;
    padding-right: 10px;
}

.no-panel > ul > li > h3 > .ms-Icon.ms-Icon--Message {
    margin-bottom: -2px;
}

.no-icon {
	vertical-align: top;
	padding-left: 11px;
	padding-right: 11px;
	line-height: 34px;
	font-size: 17px;
	position: relative;

	.no-button {
		line-height: 34px;
		font-size: 22px;
		top: 3px;
		position: relative;
	}

	.glyphicons-conversation {
		@include transform(rotateY(180deg));
	}
}

.wt-notificationPanel .ms-promotedActionButton.no-icon {
    margin-right: 0;
}

/*.wt-notificationPanel .wizdom-icon {
		color:#666;
	}

	.wt-notificationPanel .wizdom-icon:hover {
		color: #23527c;
	}*/

.no-icon.is-active {
    background-color: #f4f4f4;
    border-bottom: 1px solid #f4f4f4;
    border-left: 1px solid #c8c8c8;
}

.no-items-container, .no-settings p {
    line-height: 16px;
    font-size: 12px;
}

/* unreads */
.no-item {
    padding: 5px 5px 5px 10px;
    border-top: 1px solid #e2e2e2;
    border-left: 4px solid black;
}

.no-item:last-child {
    border-bottom: 1px solid #e2e2e2;
}

.no-divider {
    border-bottom: 1px solid #e2e2e2;
}

.no-divider-dark {
    border-bottom: 1px solid #d2d2d2;
}

.no-heading {
    font-weight: 600;
}

.no-link {
    cursor: pointer;
}

.no-heading a, .no-heading a:hover, .no-heading a:visited {
    color: #363636;
}

.no-heading .text-muted {
    font-weight: normal;
}

.no-spacerForIcon {
    margin-right: 15px;
}

.no-presence-picture {
    float: left;
    width: 40px;
}

.no-presence-picture-spacing {
    margin-left: 40px;
}

.no-presence-picture .avatar-frame img {
    border-radius: 30px;
    width: 30px;
    height: 30px;
}

.no-showmore {
    padding: 5px 0px 0px 10px;
    margin-bottom: -12px;
}

.no-panel .no-hidemenu {
    i {
        vertical-align: middle;
    }
}

.no-settings h3 {
    margin-bottom: 5px;
}

.no-settings p {
    padding-left: 27px;
}

.no-empty, .no-loader {
    padding-left: 12px;
    margin-top: -5px;
}

.no-has-unread {
	color: #fff;
	position: absolute;
	font-size: 11px;
	top: 2px;
	left: 22px;
	background-color: #e9001b;
	line-height: 20px;
	padding: 0 5px;
	border-radius: 10px;
	z-index: 1;
}

.no-scroll-fit {
    height: 100px;
}

.notification-close {
    position: absolute;
    top: 8px;
    right: 16px;
}

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

    .no-panel {
        width: calc(100%) !important;
        top: 0;
        z-index: 1041;
    }

    .no-panel.expanded .no-hidemenu {
    }
}
