/* GLOBAL */
*                       { font-family: 'Open Sans', sans-serif; }
html                    { font-size:16px; }
body                    { padding-top: 50px; }
.breadcrumb             { background-color:transparent !important; }
a:hover, a:focus        { text-decoration:none; }
h2                      { font-size: 1.4rem;}

h2.section-title {
    color: #bbb;    
    font-size: 0.9rem;
    border-bottom: 1px solid #bbb;
    text-transform: uppercase;
    padding-bottom:5px;
}
h2.section-title a     { color: #bbb; }

.pageActionButtonContainer { position: absolute; right:0px; top:0px; }
.pageActionButtonHeader { position:relative; }
        
        
.baseMessageContainer   { margin: 10px 30px;}
.fileinput-button {  position: relative;  overflow: hidden;  display: inline-block; }
.fileinput-button input {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  opacity: 0;
  -ms-filter: 'alpha(opacity=0)';
  font-size: 200px !important;
  direction: ltr;
  cursor: pointer;
}
.dropdown-fileinput-list-item .fileinput-button {
	display:block;
	padding: 3px 20px;
}

/* AVATAR */
.main .avatar {	width:160px; max-width:100%;z-index:101; }
.main .avatarSmall {	width:90px; max-width:100%;z-index:101; }
.avatarContainer {  position:relative; display:block; max-width:160px; box-sizing: border-box; }
.avatarContainer .avatar { display:block; }
.avatarContainer:hover .avatarUploadOverlay {opacity:1.0; }
/* todo replace by :before */
.avatarContainer .avatarUploadOverlay { 
     position:absolute;
     left:0;
     top:0;
     width:100%;
     height:100%;
     opacity:0;
     text-decoration:none;
     z-index:100;
     background-color:rgba(73,154,208,0.7);
     border-radius:50%; 
     overflow:hidden;
     box-sizing: border-box;
     -webkit-transition:all 200ms ease-out;
     -o-transition:all 200ms ease-out;
     -moz-transition:all 200ms ease-out;
 }
 .avatarContainer .avatarUploadOverlay i {
     position:absolute;
     text-align:center;
     width:60px;
     height:60px;
     font-size:60px;
     line-height:1;
     color:#FFF;
     top:50%;
     left:50%;
     z-index:2;
     margin:-30px 0 0 -30px;    
     font-style:normal;
     font-weight:normal;
     display:inline-block;
     box-sizing: border-box;     
     -moz-transition:all 200ms ease-out;
     -webkit-transition:all 200ms ease-out;
     -o-transition:all 200ms ease-out;
     -ms-transition:all 200ms ease-out;
     transition:all 200ms ease-out;
 } 
    

.label-form { font-size:100%; font-weight:normal; }

.form-group                     { margin-bottom:9px; }
.form-control                   { padding-top:3px; padding-bottom:3px;	height:28px; }
.input-group .input-group-btn a,
.input-group .input-group-btn button,
.input-group .input-group-addon { padding-top:3px; padding-bottom:3px; }
.input-group-addon { min-width:40px;}
.requiredIcon { opacity: 0.5;}
.hideRequiredIcons .requiredIcon { display:none;}
.hideRequiredIcons {
	opacity:0.5;
}
.labelPaddingFix { padding-left:30px; }
/* hide ugly number spinners on firefox */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield;
}

.input-group-transparent .input-group-addon,
.input-group-transparent input,
.input-transparent.form-control {
    background-color:transparent;
    box-shadow:none;
    border-width:0px;
    cursor: default;
}
.input-group-transparent input[type="text"]:disabled {
   background-color:transparent;
   cursor:default;
   box-shadow: none;
   webkit-box-shadow:none;
}

/* Collapseable icons */
.panel-heading .panel-title > a:before {
    font-family: 'Glyphicons Halflings';  
    content: "\e114";    
    float: left;        
    color: grey;
    padding-right:20px;         
}

.panel-heading .panel-title > a.collapsed:before {  content: "\e080"; }
.panel-heading .panel-title > a { display:block;}

@media all and (max-width: 767px) {
    .text-left-xs   { text-align:left; }
    .text-center-xs { text-align:center; }
    .text-right-xs  { text-align:right; }   
}
@media all and (min-width: 768px) and (max-width: 991px) {
    .text-left-sm   { text-align:left; }
    .text-center-sm { text-align:center; }
	.text-right-sm  { text-align:right; }

}
@media all and (min-width: 992px) and (max-width: 1199px) {
    .text-left-md   { text-align:left; }
    .text-center-md { text-align:center; }
    .text-right-md  { text-align:right; }    
}
@media all and (min-width:  1200px){
    .text-left-lg   { text-align:left; }
    .text-center-lg { text-align:center; }
    .text-right-lg  { text-align:right; }    
}

ul.noBulletList, ul.noBulletList li {  padding:0; margin:0; list-style-type:none; }
ul.noBulletList li                  { margin-bottom:6px; }
ul.noBulletList li .listIcon        { margin-right: 10px;}
ul.noBulletList li .fileSize        { color:#aaa; margin-left:7px;}
#progress       		{ margin-top:10px; }
.progress-bar   		{ width:0%; height:20px; background-color:red;}
.deemphasized    		{ opacity:0.4; }
.unknownPercentage 		{ opacity:0.2;}

/* Date picker fix*/
.ui-datepicker {
	z-index:5000 !important;
}
.ui-datepicker-title .ui-datepicker-month, .ui-datepicker-title .ui-datepicker-year {
    color:#555;
}

/* Modal dialogs */
.modal .searchContainerBody tr:hover { background-color: #eee; cursor:pointer; }
.modal.loading .searchContainer { position:relative; }
.modal.loading .searchContainer .loaderOverlay {
    background-color: rgba(255,255,255,0.6);
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index:10;
    background-image: url('/assets/images/ajax-loader-slower.gif');
    background-position: center center;
    background-repeat: no-repeat;
}
.searchContainer > form { z-index: 1; }
@media (min-width: 1300px) {
    .modal-dialog {
        width:1000px;
    }
}
@media (min-width: 1900px) {
    .modal-dialog {
        width:1500px;
    }
}

/* Top navigation */

.navbar-fixed-top           { border: 0; /* Hide default border to remove 1px line.*/ }
.navbar                     { z-index:95; background-color:transparent; background-image:none; }
.navbar .sidebar-toggle { margin-left:15px;}
.navbar .userMenu-toggle { padding:0; border:0;}
.navbar .userMenu-toggle:focus, .navbar .userMenu-toggle:hover { background-color:transparent;}
.navbar .sidebar-toggle:focus { background-color:transparent;}
.navbar .sidebar-toggle:hover { background-color:#155C8B;}
.navbar .sidebar-toggle { border-color:white; }
.navbar-header				{ background-color:#127CC2;}
.navbar #logo-client        { max-width:400px;	padding:9px 5px 3px 35px; max-height:50px; box-sizing:border-box; }
.navbar .avatar             { max-width: 40px; margin-right:10px; }
.userMenuWrapper #dropdownUserMenu           { border:none; background-color:transparent;}
.userMenuWrapper .dropdown-menu li a:hover   { background-color: #eee; background-image:none; }
.userMenuWrapper            { padding-right:30px;padding-top:5px; display: inline-flex;}
.userMenuWrapper #tinklerButton           { border:none; background-color:transparent; color:darkgrey;}
.tinklerRemoveButton { border:none; background-color:transparent;}
.tinklerRemoveButton:focus {outline:0;}
#tinklerButton:focus {outline:0;}
.tinkler-badge {background-color: darkred;position: fixed !important;margin-top:10px;margin-left:-10px;display:none;}
#tinklerContainer {}
.tinklerNotificationDiv {background-color: white; border-radius: 20px;padding: 10px;margin-bottom: 10px;}
.tinklerNotificationDivMuted{background-color: white; border-radius: 20px;padding: 10px;margin-bottom: 10px;color:#b1b1b1!important;}
.tinklerNotificationDivMuted a{color:#b1b1b1;}
.tinklerNotificationDivMuted .tinklerNotificationDate{color:#b1b1b1;}
.tinklerNotification {margin-bottom: 5px;}
.tinklerRemoveButton:hover {color:darkred;}
.tinklerNotificationTitle{font-weight: bold; text-transform: capitalize}
.tinklerNotificationDate{color:grey;}
.tinklerNotificationComment{border-left: 4px solid darkgrey;margin-top:5px;padding-left:10px;}
@media (min-width: 1200px) {
	.navbar { background-color:#dadadb; }
}
@media (max-width: 1200px) {
    .navbar-header { display:block; float:none;}
    .navbar-header button {display: inline; } /* overrule bootstrap */
    #navbar {display: none !important; } 
}

/* Hamburger navigation */

#navbarHamburger ul { padding:0;margin:0;list-style-type:none; }
#hamburgerMenu .navbar-collapse { padding:0; }
#navbarHamburger ul li { border-bottom:1px solid white; }
#navbarHamburger ul li a { display:block; text-align:right; background-color:white; background-color:rgba(255,255,255,0.9); padding:4px 20px; color:#127CC2;  line-height:2.0em;}
#navbarHamburger ul li a:hover { color: white; background-color: #127cc2; background-color: rgba(18, 124, 194, 0.8); }
#navbarHamburger li.current a { font-weight:bold; }
#hamburgerMenu .navbar-collapse.collapse { display:none !important; } /* correct default bootstrap behaviour */
#hamburgerMenu .navbar-collapse.collapse.in { display:block !important; } /* correct default bootstrap behaviour */

/* Side navigation */
.sidebar #logo-ixgram { display: none;}
.sidebar .fa,
.sidebar .gi { display:none;}
    
.sidebar {
    position: fixed;
    top: 0px;
    bottom: 0;
    left: 0;
    z-index: 999;
    display: block;
    padding: 0px;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content.*/ 
    background-color: #127cc2;
    background-color: rgba(18, 124, 194, 0.96);
    border-right: 1px solid #eee;        
}

.sidebar  ul { padding:0; margin:0; list-style-type: none;  }

/* sidenav - generic */        
.sidebar  li a                              { display:block; padding:10px 10px; margin:0px 0px 0px 0px; color:white; font-weight:300; font-size: 0.8rem; text-decoration: none;}    
.sidebar  li a:hover, .sidebar  li a:focus  { text-decoration:none; background-color: rgba(255, 255, 255, 0.1);  }

/* sidenav - first layer */
.sidebar > ul > li              { border-left:2px solid #338ecb ; padding:0; margin:0px 0px 0px 0px; }
.sidebar > ul > li.current      { border-left:2px solid white; background-color:#338ecb; background-color:rgba(51, 142, 203, 0.7); padding:0px 0px 16px 0px; }
.sidebar > ul > li.current.menuLeaf { padding:0px 0px 0px 0px; /* remove additional padding for leaf menu elements */ }
.sidebar > ul > li.current > a                              { font-weight:normal; padding:10px 10px;}

/* sidenav - second layer */
.sidebar > ul > li > ul                                     { display:none; }
.sidebar > ul > li.current > ul                             { display:block;   }
.sidebar > ul > li.current > ul > li > a                    { display:block; padding:4px 10px 4px 40px; font-size:0.8rem;}
.sidebar > ul > li.current > ul > li.current > a            { font-weight:normal; }

/* sidenav - third layer */
.sidebar > ul > li > ul > li > ul                                   { display:none; }
.sidebar > ul > li.current > ul > li.current  > ul                  { display:block; padding-left:3px; }    
.sidebar > ul > li.current > ul > li.current a                      { font-style:italic;}

.sidebar > ul > li.current > ul > li.current > ul > li a            { font-style:normal; padding:4px 10px 4px 50px; font-size:0.7rem; }
.sidebar > ul > li.current > ul > li.current > ul > li.current a    { font-weight:bold; }

/* sidenav - fourth layer */
.sidebar > ul > li > ul > li > ul > li > ul                                         { display:none; }
.sidebar > ul > li.current > ul > li.current > ul > li.current  > ul                { display:block; padding-left:3px; }    
.sidebar > ul > li.current > ul > li.current > ul > li.current  a                   { font-style:italic;}

.sidebar > ul > li.current > ul > li.current > ul > li.current > ul > li a          { font-style:normal; padding:4px 10px 4px 60px; font-size:0.6rem; }
.sidebar > ul > li.current > ul > li.current > ul > li.current > ul > li.current a  { font-weight:bold; }

/* sidenav - fifth layer */
.sidebar > ul > li > ul > li > ul > li > ul > li > ul                                         { display:none; }
.sidebar > ul > li.current > ul > li.current > ul > li.current> ul > li.current  > ul                { display:block; padding-left:3px; }    
.sidebar > ul > li.current > ul > li.current > ul > li.current> ul > li.current  a                   { font-style:italic;}

.sidebar > ul > li.current > ul > li.current > ul > li.current > ul > li.current > ul > li a          { font-style:normal; font-weight:normal; padding:4px 10px 4px 65px; font-size:0.6rem; }
.sidebar > ul > li.current > ul > li.current > ul > li.current > ul > li.current > ul > li.current a  { font-weight:bold; }


/* SPECIAL CASE : always display all children if current (myxgram for instance) */
.sidebar > ul > li.displayAllChildrenIfCurrent.current > ul,
.sidebar > ul > li.displayAllChildrenIfCurrent.current > ul  > li > ul { display:block; }      


@media (min-width: 768px) {
	.sidebar .fa, 
    .sidebar .gi { display:inline-block;}
    .sidebar #logo-ixgram            { display: inline; width:160px; padding:10px 0px 10px 10px; }
 
    .sidebar  li a,
    .sidebar > ul > li.current > ul > li > a {
       font-size: 1.0rem;
    }
    .sidebar > ul > li.current > ul > li.current > ul > li a { 
       font-size: 0.9rem;
    }
    .sidebar > ul > li.current > ul > li.current > ul > li.current > ul > li a,
    .sidebar > ul > li.current > ul > li.current > ul > li.current > ul > li.current > ul > li a {
       font-size: 0.7rem;
    }
}
@media (min-width: 1200px) {
   .sidebar { background-color: rgba(18, 124, 194, 1.0); }
   .sidebar > ul > li.current { background-color:rgba(51, 142, 203, 1.0); }
}

/* Main content area */

.main               { padding: 20px;  z-index:90; }
.main .page-header  { margin-top: 0; }

@media (min-width: 768px) {
  .main             { padding-right: 40px; padding-left: 40px; }
}

/* Breadcrumbs */
.breadcrumb         { padding-left: 0px; }

/* Page - Sign in */

.form-signin, .form-signin-footer, .form-signin-logo-container  {  
    max-width: 360px;
    padding: 15px;
    margin: 0 auto;
    font-weight:300; 
}
body#page-signin                                            {  padding-top: 40px;  padding-bottom: 70px;  background-color: #eee; }
.form-signin-logo-container                                 {  text-align:center; }
.form-signin-logo-container img                             {  max-width:100%; }
.form-signin                                                {  padding:20px;   }
.form-signin .form-signin-heading, .form-signin .checkbox   {  margin-bottom: 10px; }
.form-signin .form-signin-heading                           {  text-align:center; }
.form-signin .checkbox                                      {  font-weight: normal;}
.form-signin .form-control                                  {  position: relative;  height: auto; box-sizing: border-box;  padding: 10px;  font-size: 16px; }
.form-signin .form-control:focus                            {  z-index: 2; }
.form-signin input[type="email"]                            {  margin-bottom: -1px; border-bottom-right-radius: 0;  border-bottom-left-radius: 0;}
.form-signin input[type="password"]                         {  margin-bottom: 10px; border-top-left-radius: 0;  border-top-right-radius: 0;}
.form-signin-logo-container                                 {  text-align: center; margin-bottom:0px; padding:0 60px; }
.form-signin .forgotPasswordLinkWrapper                     {  padding:13px 0px 0px 0px; }
.form-signup-legal-footer a                                 {  padding: 0px 20px; font-weight:300; }
.form-signin .form-signin-errors                            {  font-weight:bold; padding:10px 0px 20px 0px; color:red; }
.form-signin #recaptcha_area                                {  margin: 30px 0px 20px 0px;}
.form-signup-legal-footer                                   {  background-color:transparent; }
.form-signin-footer                                         { color:#AAAAAA; }

@media (min-width: 480px) {
	.form-signin { background-color:white;  border-radius:10px; }
    .form-signin-logo-container {  margin-bottom:40px; }	
}

.passwordValidationDetails ul       { list-style-type:none; padding:0; margin:20px 10px 20px 10px; }
.passwordValidationDetails .valid   { color:green;}
.passwordValidationDetails .invalid { color:red;}
.passwordValidationDetails .icon     { padding-right:10px;}
.validationBad            { 
	background-color:#ffdddd !important;
	background-image: url('/assets/images/invalid.png');
	background-size: 20px 20px;
    background-position: right 10px center;
    background-repeat: no-repeat;
}
.validationGood                    { 
	background-color:#ddffdd !important;
	background-image: url('/assets/images/valid.png');
	background-size: 20px 20px;
    background-position: right 10px center;
    background-repeat: no-repeat;
}

@media screen and (max-width: 768px) ,
       screen and (max-height: 600px) {
    /* override default bootstrap behaviour for fixed bottom navbar */
    .form-signup-legal-footer   { position:static; display:block; padding: 5px 10px; }
    .form-signup-legal-footer a { display:block; }
}

/* Page - Client > Dashboard */

@media screen and (min-width: 768px) {
    .clientDashboardPage > .row           { padding:30px 0px 0px 0px;}
    .clientDashboardPage .statBox         { margin: 5px 0px;}
}
/* Page - Overview section  */
.overviewSection                    { margin-top:2rem; }
.overviewSection .sectionLogo       { font-size:4rem; }  
.overviewSection .sectionLogo, .overviewSection .sectionTitle { text-align:center;}
.overviewSection .sectionTitle { margin-bottom:40px;}


/* Global - Statistics boxes */

.statBox                            { margin:5px 0px; padding: 10px 0px; display:block;  }
.statBox table { width: 100%; max-width:390px;}
a.statBox                           { cursor:pointer; color: #333333;}
a.statBox:hover                     { background-color: #f0f0f0;}
.statBox .statIcon                  { font-size:3rem; color: #bebebe; text-align: left; width:105px; }
.statBox .statIcon img              { width:80px; max-width:100%; }
.statTitle                 { font-size:0.9rem; text-transform: uppercase; font-weight:bold; text-align:left; }
.statBox .statNumber                { font-size:1.1rem;  text-align:left;}
.statFootnote              { font-size:0.9rem;  font-weight:300; line-height:1.4em;  text-align:left; }
.statBox .statSide                  { font-size:1.1rem; font-weight:300; text-align:right; padding-top:0px; padding-left:15px;color:#999;}
.statBox .statSide.negative         { color:red; }
.statBox .statSide.neutral,
a.statBox .statSide.neutral         { color:#999; }
.statBox .statSide.positive         { color:green; }
.statWarning .statTitle,
.statWarning .statFootnote,
.statWarning .statNumber            { color:red; }
a.statBox  .statGood .statFootnote  { color:green; }
.sumLineDiv                         { max-width:100%; background-image: url('/assets/images/icons/sum-line.png'); background-position:top right; background-repeat:no-repeat; height: 23px; }
.statFooter { text-align: left;padding-left:90px; }

@media (min-width: 1200px) {
	.statBox .statIcon                  {  text-align:right; }
	.statBox .statTitle                 {  text-align:right; }
	.statBox .statNumber                {  text-align:right; }
	.statFootnote              {  text-align:right; }
    .statFooter { text-align: right; padding-left:0; }
}

/* No Bootstrap breakpoint*/
@media (min-width: 1600px) {
	.statBox .statNumber { font-size:1.8rem; }
	.statBox .statSide  { font-size:1.8rem; }
	.statBox .statSide { min-width:40px;}
}

/* Global - Tables */
.table-responsive {
	-ms-overflow-style:scrollbar; /* CHECK windows phone, perhaps default is what we want (but won't work in IE edge, small window) */
}
thead tr th {
    background-color:white;
}
.table tbody tr:hover               { background-color:#ddd; cursor:default; }
.table.table-row-click tbody tr:hover { cursor:pointer; }         
.paginationNav                      { text-align: center; }
 
 
.table .noResultsRow td             { font-size:1.6rem; text-align:center;padding:60px 20px; font-style:italic; }
.table .noResultsRowSmall td        { font-size:1.0rem; text-align:center;padding:20px 20px; font-style:italic; }

.datedRows .date { }
.datedRows .time { opacity:0.5; padding-left:5px; font-style:italic;}
        
        
.sortButtonASC, .sortButtonDESC, .sortButtonNotCurrent {
	display:inline-block;
	width: 28px; height:28px; vertical-align:middle; cursor:pointer;
} 
.sortButtonASC                      { background-image:url('/assets/images/sort-icon-asc.png');}
.sortButtonDESC                     { background-image:url('/assets/images/sort-icon-desc.png');}
.sortButtonNotCurrent               { background-image:url('/assets/images/sort-icon-not-current.png');}
.pageControlWrapper                 { padding-top:1rem; }
table .deemphasizedLight            { opacity: 0.8; font-style:italic; }
table th.deemphasizedLight          { font-weight:normal; }

/* Global - Forms */

.main .form-horizontal .control-label {
    text-align:left;
}
.main .smallInputControl,
.modal .smallInputControl { max-width:5rem; display:inline;    }
.main .mediumInputControl          { max-width:10rem;  display:inline; }


/* Global - Text */
.main p.intro                       { font-size:1.3rem; font-weight:300;}
.small, small                       { opacity:0.6;}

/* Facebook */
#facebook .colleagueName  { display:block;  text-align:center; padding:16px 10px 10px 10px; }
#facebook .colleague      { margin:10px;    text-align:center; }
#facebook .colleague img  { width:100px; }
#facebook .colleague img:hover { opacity:0.6;}

/* Birthdays & events */

.eventList .date, 
.eventList .eventDescription { display: table-cell;  vertical-align:top; }
.eventList .title, 
.eventList .subTitle         { display:block; }
.eventList .date             { padding-right:6px; }
.eventList .title            { font-weight:bold; }
.eventList li                { margin-bottom: 6px; }
.eventList                   { padding:0; margin:0; list-style-type:none;}


.birthDayList .countDown     { display:none; } 
.birthDayList .name          { font-weight:bold; padding-top:0px;}
.birthDayList                { padding:0; margin:0; list-style-type:none; }   
.birthDayList li             { margin-bottom:4px;}  
.birthDayList .birthday      { font-style:italic; }
.birthDayList .date          { padding-right:6px; }
.birthDayList .dateWrapper   { box-sizing:border-box; }
.birthDayList .date, 
.birthDayList .name          { display:table-cell; vertical-align:top;  box-sizing:border-box; }
.birthDayList .avatar                   { max-width:60px; }
.birthDayList .avatar-wrapper           { display:none;}

@media (min-width: 768px) {
	.eventList .title       { line-height: 1.7rem; }
    .eventList li           { margin-bottom: 10px; }
    .eventList .date        { color:#777; width:70px; font-weight:300; font-size:1.2rem; padding-right:0px; }
    .eventList .subTitle    { font-weight:300; }

    .eventCalendar .title   { line-height: 1.7rem; margin-top: 0px; vertical-align:middle;}
    .eventCalendar .date    { color:#777; width:70px; font-weight:300; font-size:1.2rem; vertical-align:middle; padding-right:0px; }
    .eventCalendar .date,
    .eventCalendar .time    { display:block; width:auto; color:#777;  font-weight:300; font-size:0.9rem; vertical-align:middle;} 

    .birthDayList li          { margin-bottom:10px; }
    .birthDayList .name       { padding-top:5px; }   
   
    .birthDayList .date       { width:70px; color:#777;  font-weight:300; }   
    .birthDayList .date       { font-size: 1.2rem; }               
    .birthDayList .countDown  { display:block; padding-left:70px; }
    .birthDayList li          { margin-bottom:20px;}
    .birthDayList             { margin-top:30px; }
    .birthDayList .avatar-wrapper           { display:block; padding-left:70px;}
       
}
.birthDayCalendar, .birthDayCalendar li { padding:0; margin:0; list-style-type:none;}
.birthDayCalendar > li                  { margin-bottom:50px;}
.birthDayCalendar .birthDayList { margin-top:0px;}
.birthDayCalendar .panel-heading a { display:block; }
.birthDayCalendar .panel-title { font-size:13px;}
.birthDayCalendar .panel-heading { padding: 5px 15px;}
/* OPTIONAL (don't show empty months) .birthDayCalendar > li.monthWithoutBirthDays { display:none; }  */ 
@media (min-width: 768px) {
	.birthDayCalendar h2                    { margin-bottom:20px;}    
    .birthDayCalendar .birthDayList .date 	{ width:50px; }
}


/* INTRANET - DOCUMENTS */
.documentFolderList, .documentFolderList li {
    list-style-type:none;
    padding:0;
    margin:0;
}

/* INTRANET - NEWS */
.newsArticleSummary .meta-data, 
.newsArticleFull .meta-data             { color:#bbb; font-size:0.8rem; margin:5px 0px 5px 0px; padding:0;}
.newsArticleSummary img                 { width:190px; margin:0px 20px 10px 0px; }
.newsArticleSummary .intro              { line-height:1.6; }
.news-archive-wrapper                   { padding-top:30px; }
.news-archive-wrapper a                 { text-transform:uppercase; color:#bbb;}
.newsArticleSummary .media-heading      { font-weight:300; font-size:1.3rem; margin:5px 0px 0px 0px; padding:0; }
.newsArticleSummary.media               { margin-top:25px;}
.newsArticleFull #newsArticleImage      { width:250px; margin: 0px 20px 10px 0px; }
.newsArticleFull .meta-data             { margin-bottom:20px;}

@media (min-width: 1200px) {
    .intranet-internal-news             { padding-right:100px; }    
}

/* PHOTO CROPPER */
#photoCropper #photoCropArea        { background-color:#eeeeee; margin-top:30px; border:2px solid #ccc; }
#photoCropper #photoCropImageCell   { vertical-align:top; padding-left:10px; padding-top:10px; }
#photoCropper #photoUploadWrapper   { border-radius:20px; width:300px; height:300px; overflow:hidden; position:relative; }
#photoCropper #photo                { position:absolute; }        
#photoCropper #photoSizeArea        { margin-top:20px; }

#photoCropper #sliderHorizontal     { width:300px;margin-top:10px;margin-left:10px;margin-bottom:10px;background-color:white; background-image:none; height:0.5em !important;}
#photoCropper #sliderVertical       { height:280px;margin-top:5px;margin-left:10px;margin-right:10px;background-color:white; background-image:none; width:0.5em !important; }
#photoCropper #sliderVerticalCell   { vertical-align:top; padding-bottom:20px; padding-top:10px; }

#photoCropper #photoSizeArea #sliderSizeCell        { padding-top:5px;  vertical-align:top; }
#photoCropper #photoSizeArea #zoomOutButtonCell     { padding-right:10px;vertical-align:top; }
#photoCropper #photoSizeArea #zoomInButtonCell      { padding-left:10px;vertical-align:top; }
#photoCropper #photoSizeArea #zoomOutButtonCell a   { font-size:1.3rem;}
#photoCropper #photoSizeArea #zoomInButtonCell a    { font-size:2rem;}
#sliderSize                                         { width:150px;margin-left:5px;margin-bottom:30px; }
#photoCropper #sliderSize .ui-slider-handle, 
#photoCropper #sliderHorizontal .ui-slider-handle { 
    width:1.0em !important; height:2.0em !important; top: -.8em; 
}
#photoCropper #sliderVertical .ui-slider-handle { 
    width:2.0em !important; height:1.0em !important;left: -.8em; 
}   
   
/* CHECKLIST */
.checklist tbody tr.emptyContent th { color:red; }
   	
/* MYXGRAM */
h2.myXgramCategory                  { color: #127cc2 !important; font-weight:300; }    
.myXgramCategorySection             { border:1px solid #ddd; margin: 40px 0px 40px 0px; }
.myXgramCategorySection h3          { color:white; margin:0px 0px 0px 0px; font-weight:bold; font-size:0.8rem; background-color:#a0a0a1; padding:8px 10px; text-transform:uppercase;}    
.myXgramCategorySection h3:before   { content: "\F03A\00a0\00a0"; font-family: FontAwesome;  }    
.myXgramItem                        { display:block;text-align:center;margin:10px 20px;}
.myXgramItem:hover                  { background-color:#e1eef8; text-decoration:none;}
.myXgramItem .count                 { font-size:1.5rem; font-weight:300; }    
.myXgramItem .title                 { background-color:#127cc2;color:white;display:block;padding:3px 10px;font-size:0.8rem;}    
.myXgramItem.warning .title         { background-color:#c20000;}
.myXgramItem.warning .count         { color:#c20000;}
.myXgramItem.warning:hover          { background-color:#f6dadb;}    
.myXgramItem.empty .title           { background-color:#d3d3d4;}
.myXgramItem.empty .count           { color:#d3d3d4;}
.myXgramItem.empty:hover            { background-color:white;}    
@media (min-width: 768px) {
     .myXgramItem .count                 { font-size:3rem;  }
     .myXgramItem                        { margin:30px 50px;}
}  

/* COLLAPSE MENU */
@media screen and (max-width: 1199px) {
	.row-offcanvas {
	   position: relative;
	   -webkit-transition: all .25s ease-out;
	        -o-transition: all .25s ease-out;
	           transition: all .25s ease-out;
	 }
	 .sidebar-offcanvas {
       -webkit-transition: all .25s ease-out;
            -o-transition: all .25s ease-out;
               transition: all .25s ease-out;
     }
     .navbar { z-index: 200; }
     .sidebar-offcanvas { z-index:150; }
	 .row-offcanvas-left .sidebar-offcanvas { left: -100%; }
	 .row-offcanvas-left.active .sidebar-offcanvas { left: 0; }
	 .sidebar-offcanvas { top: 56px; }
	 
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .row-offcanvas-left
  .sidebar-offcanvas { left: -50%; /* 6 columns */ }
  .row-offcanvas-left.active { left: 0; /* 6 columns */ }
  .sidebar-offcanvas { position: fixed; width: 50%; bottom:0; /* 6 columns */ }
}
@media screen and (max-width: 767px) {
  .sidebar-offcanvas { left: -100%; /* 12 columns */ }
  .row-offcanvas-left.active { left: 0; /* 12 columns */ }
  .sidebar-offcanvas { position: fixed; width: 100%; bottom:0; /* 12 columns */ }
}

.pageloaderbackground {
    background: lightgrey;
    opacity: 0.8;
    position: fixed;
    width:      100%;
    height:     100%;
    z-index:    10;
    top:        0;
    left:       0;
    display: none;

}

.pageloader {
    border: 2vh solid white;
    border-top: 2vh solid #127cc2;
    border-radius: 50%;
    width: 20vh;
    height: 20vh;
    animation: spin 2s linear infinite;
    margin: 0 auto;
    position: relative;
    top: 40vh;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.invoiceEmail {height: 80vh;width:100%;overflow: scroll;}

@media(max-width:767px){
    .invoicingTabContainer {height: 95vh; width: 100%; padding: 0%; background-color: white;}
    .invoicingTabButtonsContainer {height: 95vh; width: 100%; padding: 0%;}
    .invoicingTabPdfviewer {width:100%; height: 95vh; overflow: scroll;}
    .invoicingPdfContainer {height: 95vh; width: 100%; padding: 0%; background-color: white;}
}
@media(min-width:768px){
    .invoicingTabContainer {padding: 0%; background-color: white;}
    .invoicingTabButtonsContainer {padding-left:3em;right:3em;top:10vh;position: fixed; height: 85vh;width:40%;}
    .invoicingTabPdfviewer {height: 80vh;width:100%;overflow: scroll;}
    .invoicingPdfContainer {height: 95vh; padding: 0%; background-color: white;}
}

.holidayRequestItem { margin-bottom: 20px;}
.holidayRequestDatePart { font-size: 1.2rem; font-weight:300; color: #777; }
.holidayRequestDescriptionPart { font-weight: bold;  }
.holidayRequestNamePart {font-weight:bold; padding: 3px 0px 3px 0px; }


.forceWidthRevert { width: revert !important; }