/* NEEDED FOR WIDGETS
   
   Styles that we'll need to fix so they don't overrun client styles 
   .modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    background-color: #000000;
  }

  .modal-backdrop.fade {
    opacity: 0;
    filter: alpha(opacity=0);
  }

  .modal-backdrop.in {
    opacity: 0.5;
    filter: alpha(opacity=50);
  }
*/
   
  /* 8/17 Backgrounds */
  
  
  
  /* 5/10 Styles */
  body.df-pagebody { font-family: 'Open Sans', sans-serif; }
  
  #df_navpane { margin: 15px 0px 0px 10px; width: 240px; }
  #df_navpanel { width: 240px; overflow: hidden; }
  
  #df_sidepane { margin: 15px 10px 15px 0px; }
  #df_contentpane { margin-top: 0px; margin-bottom: 0px; padding: 15px 0px 10px; }
  
  #df_navpane .panel { margin-bottom: 6px; border: none; }
  #df_navpane .panel-heading { background-color: #555555; color: #FFFFFF; 
      border-bottom: 1px solid #E2E2E2; padding: 12px 8px; }
  #df_navpane .panel-heading a:hover { text-decoration: none; }
  #df_navpanel h3.panel-title { font-size: 14px; text-transform: uppercase; }
  #df_navpane .list-group-item { padding: 8px; border-left-width: 0px; border-right-width: 0px; border-color: #E2E2E2;}
  #df_navpane .list-group-item .badge { border-radius: 0; padding: 2px 6px 3px; margin-top: 1px; margin-right: -2px; background-color: #999999; font-size: 11px; font-weight: normal; }
  #df_navpane .list-group-item.active .badge { background-color: #FFFFFF; }
  #df_navpane .df-isnew .badge { background-color: #555555; }
  
  #df_blog_toggle .badge { margin-left: 12px; }
  #df_blog .df-morestories { font-weight: bold; }
  #df_blog { overflow-y: auto; }
  #df_blog .df-story { position: relative; height: 38px; padding: 0px; }
  #df_blog .df-title { font-size: 13px; font-weight: bold; position: absolute; left: 10px; top: 2px; }
  #df_blog .df-date { font-size: 11px; position: absolute; right: 10px; bottom: 2px; }
  
  /*
  #df_discussionlist { background-color: #E2E2E2; }
  */
  #df_navpanel > .panel { background-color: transparent; }
  #df_discussionlist { background-color: transparent; }
  #df_discussionlist .list-group-item.df-folderlink { background-color: #8F8F8F; color: #FFFFFF; margin-top: 5px; padding: 5px 8px;}
  
  #df_discussionlist .df-bookmark .df-bm-delete { background-color: transparent; position: absolute; top: 0px; right: 0px; padding: 0px 6px 6px 12px; }
  
  .df-messagelist { background-color: #FFFFFF; }
  /*
  .df-blog .df-blogentry-header, .df-blog .df-eventmsg { background-color: #8F8F8F; color: #FFFFFF; }
  .df-blog .df-blogentry-body { background-color: #E2E2E2; }
  */
  
  .df-message .df-envelope .row { margin: 0px; }
  .df-message .df-avatar { width: 54px; }
  
  .df-message .df-host { font-size: 11px; text-transform: uppercase; display: block; margin: 3px auto 0px; }
  
  .df-message.df-poll .progress { margin: 8px 0px; }
  .df-message.df-poll ul { margin-bottom: 0px; }
  .df-message.df-poll p { margin: 0px; }
  .df-message.df-poll .df-btnbar { margin-top: 12px; }
  .df-message.df-poll .df-question { margin: 10px 0px; }
  
  /* new 9/2017 */
  .df-messagelist .panel-heading, .df-messagelist .panel-footer {background-color: #8F8F8F;
    color: #FFFFFF; }
  .df-messagelist .panel-heading a { color: #FFFFFF; font-weight: bold; }
  .df-messagelist .panel-heading .pagination a { background-color: #8F8F8F; 
    border-color: #428bca; }
  .df-messagelist .panel-heading .pagination .active a { background-color: #428bca; }
  .df-messagelist .panel-heading .dropdown-menu > li > a { color: #282828; font-weight: normal; }
  /* end new */
  
  .df-messagelist .panel-heading .df-contentlink { font-size: 14px; padding-right: 10px; }
  
  #df_sharemenu { padding: 10px; min-width: 278px; color: #333333; }
  #df_sharemenu .df-closemsgshare { background-color: transparent; position: absolute; top: 0px; right: 0px; padding: 0px 6px 6px 12px; }
  #df_sharemenu h2 { margin: 0px 0px 8px 0px; font-size: 14px; font-weight: bold; }
  #df_sharemenu input { width: 100%; margin-bottom: 8px; }
  
  #df_sidepane h3 { margin-top: 0px; margin-bottom: 0px; }
  
  .df-sidebar .df-component { margin-bottom: 20px; }
  .df-sidebar .df-adspace { margin-bottom: 20px; }

  .df-sidebar .df-chatcenter .df-info { padding-left: 2px; margin-bottom: 4px; }
  
   
  
  .df-msgcontents { padding-left: 74px; padding-top: 0px; position: relative; top: -4px; height: auto; }
  .df-xs .df-msgcontents { padding-left: 10px; padding-top: 12px; top: 0px; }
  .df-xs .df-message .media { height: 54px; }
    
  .df-discpanel .df-disclisthdr { padding: 8px 4px; background-color: #FFFFFF; }
  .df-discpanel .df-fltrbtn { padding: 5px 5px; text-align: left; }
  .df-discpanel .df-fltrbtn span { display: inline-block; padding: 0px 3px; width: 85px; }
  .df-discpanel .df-new { padding: 5px 4px; font-size: 12px; }
  .df-discpanel .df-new i { margin-right: 2px; font-size: 11px; }
  
  
  
  
  .df-contenthead { position: relative; }
  .df-contenthead h1 { display: inline-block; background-color: #FFFFFF; padding: 12px 12px 3px 13px; margin: 0px; font-size: 24px; position: relative; border-bottom: none; box-shadow: none; 
    border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; }
  .df-contenthead .df-subhead { height: 15px; width: 100%; background-color: #FFFFFF; margin-top: -2px; border-top-left-radius: 0px; margin-bottom: 6px; }
  .df-xs .df-contenthead .df-subhead { height: 6px; margin-bottom: 0px; }
  .df-xs .df-contenthead h1 { padding: 6px 8px 6px 8px; }
   
 
  
  .df-stream { padding: 0px; }
  .df-stream .btn.df-mainnav { margin-left: 15px; }
  .df-xs .df-stream .btn.df-mainnav { margin-left: 0px; }
  .df-stream li.media { background-color: #FFFFFF; padding: 10px 15px; margin-bottom: 6px; margin-top: 0px; }
  .df-activities h3 { font-size: 12px; color: #333333; }
  .df-activities h3 a { font-weight: bold; }
  .df-activities p.df-excerpt { font-size: 16px; padding: 4px 0px 6px; border-bottom: 1px solid #CCCCCC; }
  .df-activities .df-date,
    .df-activities .df-more { font-size: 10px; padding: 3px 0px 0px; }
  .df-announcement h3 { font-size: 16px; color: #333333; margin-bottom: 10px; }
  .df-announcement .pull-left { max-width: 80px; max-height: 120px; }
  
  
  
  .df-gobtn { background-color: #555555; color: #FFFFFF; }
  
  .df-stream .df-welcome { padding: 15px; background-color: #F4F4F4 }
  .df-stream .df-sectionhead { background-color: #555555; color: #FFFFFF; 
      padding: 12px 15px; margin-bottom: 7px; }
  .df-stream .df-sectionhead h2 { margin: 0px; font-size: 20px; }
  
  .df-xs .df-stream .df-sectionhead,
    .df-xs .df-stream .panel.df-welcome { position: relative; margin-top: 15px; }
  .df-xs .df-stream .df-sectionhead .df-insethead,
    .df-xs .df-stream .panel.df-welcome .df-insethead { font-weight: bold; font-size: 12px; position: absolute; top: -10px; left: 7px; padding: 2px 8px; background-color: #000000; color: #FFFFFF; }
  
  #df_discussions_hd.df-sectionhead h2 { display: inline; }
  .df-xs #df_discussions_hd.df-sectionhead h2.df-xshide { display: none; }
    
  .df-xs .df-sectionhead.df-chathead .df-gobtn { margin-top: -6px; }
  .df-xs #df_discussions_hd.df-sectionhead span.df-xsonly { display: inline-block; margin-top: 4px; padding-bottom: 4px; }
  
  .df-xs .df-xsonly.df-clear { clear: both; }
  
  .df-stream .df-messagelist .panel-heading { background-color: #8F8F8F; color: #FFFFFF; }
  .df-messagelist .panel-heading .df-discussioninfo {font-size: 12px; }
  .df-stream .df-messagelist .panel-heading a { color: #FFFFFF; }
  .df-stream .df-messagelist .dropdown-menu li a { color: #333333; }
  .df-stream .df-messagelist.df-current .panel-heading { background-color: #428bca; color: #FFFFFF; transition: background-color 1s ease-in-out;}
  .df-stream .df-messagelist.df-current .panel-heading a { color: #FFFFFF; }
  
  /* http://stackoverflow.com/questions/23038598/bootstrap-panels-larger-than-content-when-combined-with-a-floating-div */
  .df-messagelist .panel-body:before, .df-messagelist .panel-body:after {clear: none;} 
   
  .modal-content .df-announcement { border: none; padding-bottom: 10px; }
  
  #df_mainstream_loading {
           position:fixed;
           height: 34px;
           bottom:40px;
           margin: 0px auto;
           z-index: 1000;
           background: rgba(0, 0, 0, .4);
           color: #FFFFFF;
           border: 1px solid #D9D9D9;
           padding: 6px 10px;
        }
  #df_mainstream_loading p { margin: 0px; }
  #df_mainstream_end { padding: 12px; }
 
  #df_main_search input.form-control { padding: 5px 10px; height: 32px; border-color: #5cb85c;} 
  #df_main_search_btn { padding: 5px 8px; }
  .df-xs #df_main_search { display: none; }
  .df-xs .df-contenthead button { margin-right: 8px; }
  
  #df_discussionlist .df-nomsgs a { font-weight: bold; text-decoration: underline; } 
    
  /* For small/mobile devices */
  .df-xs .df-middle { margin-left: 0px; width: 100%;  }
  .df-xs .df-row { position: relative; }
  .df-xs #df_contentpane { padding-top: 0px; }
  .df-xs #df_contentpane .panel-heading { padding: 6px 8px 2px 8px; }
  .df-xs #df_contentpane .panel-body { padding: 8px; }
  .df-xs #df_navpanel { width: 100%; background-color: #eeeeee; border-right: 2px solid #999999; border-bottom: 2px solid #999999; }
  .df-xs #df_navpane .in { z-index: 10; }
  .df-mobile-head { height: 40px; border-right: 2px solid #999999; }
  .df-mobile-head h2 { display: inline-block; padding: 7px 8px; font-size: 24px; margin: 0px; }
  .df-mobile-head .btn { background-color: transparent; margin: 4px; border: 2px solid #FFFFFF; border-radius: 4px; }
  .df-xs #df_navpane { width: 300px; border-width: 0px; margin: 0px; }
  .df-xs #df_navpanel .df-btnbar .panel-heading { padding-top: 4px; padding-bottom: 4px; }
    
  
  h1.df-contenttitle, h2.df-contentitle { font-size: 24px; margin-top: 0px; }
  
  
  #df_discussionlist {overflow-y: auto;}
   
 
  
  #df_navpane .list-group-item,
    #df_navpane .panel-heading,
    #df_navpane .panel { border-radius: 0px; }
  #df_navpane .panel-heading { cursor: pointer; }
    
  #df_navpanel { padding: 0px; margin: 0px; }
  #df_navpanel .panel { margin-top: 0px; }
  #df_discussionlist .df-more { font-weight: bold; }
  #df_searchlabel { padding: 2px 10px; background-color: #333333; color: #FFFFFF; font-size: 12px; }
  
  #df_navpanel .df-startpanel .panel-heading { padding: 5px 8px; }
  #df_navpanel .df-startpanel .btn { padding: 4px 10px; }
  #df_navpanel .df-startpanel .btn-info { margin-right: 8px; color: #000000; }
    
   #df_navpanel .df-onestream { position: relative; color: white; }
   #df_navpanel .df-disclisthdr .df-onestream { padding: 5px 8px; }
     
    
  .df-discussionlist h4 { font-size: 13px; margin-bottom: 2px; font-weight: normal; }
  .df-discussionlist .df-isnew h4 { font-weight: bold; }
  .df-discussionlist p { font-size: 11px; }
  
  .df-discussionlist .df-folderlink h4 { font-weight: bold; margin: 0px; }
  
  .df-custompage { background-color: #FFFFFF; color: #333333; }
  .df-custompage.panel { padding: 15px; }
    
  .df-messagelist .df-contenttitle { margin: 0px; }
  .df-messagelist .df-nav-bottom {  border-top: 1px solid #eeeeee; padding: 10px; }
  .df-messagelist .pagination { margin: 10px 0px 0px 0px; }
  .df-xs .df-messagelist .pagination { margin-top: 5px; }
  .df-messagelist .pager { height: 32px; margin-top: 0px; }
  .df-messagelist .pager .previous a {margin-right: 10px; }
  .df-messagelist .pager .next a {margin-left: 10px; }
  
  .df-messagelist .df-adspace-inline { border-top: 1px solid #eeeeee; padding: 8px 0px; }
   
  .df-honormsgsize {font-size: 14px; } 
  
    .touch textarea.df-honormsgsize { font-size: 16px; }
    .touch input.df-honormsgsize { font-size: 16px; }
  
  .df-msgbody {overflow-x: auto; font-size: 14px; }
  
  .df-msgbody img.emoticon, .cke_editable img.emoticon { height: 18px; width: 18px; } 
  .df-msgbody a { text-decoration: underline; }
  .df-msgbody table { border-collapse: separate; }
  
  .df-message {padding-bottom: 20px; }
  
  .df-message .df-messageactions { padding-right: 10px; padding-top: 8px; height: 34px; }
  .df-xs .df-message .df-messageactions { padding-right: 0px; }
  .df-message .df-actions a { color: #428bca; }
  .no-touch .df-messageactions { opacity: .3; transition: opacity 1s ease-in-out; }
  .no-touch .df-active .df-messageactions { opacity: 1.0; }
  
  .df-message .df-envelope {padding: 5px; margin: 0px; height: 32px; }
  .df-message .df-envelope .row div { padding: 0px 4px; }
  .df-message .media { padding: 0px 10px; margin-top: 10px; }
  .df-message .df-ps {padding-right: 10px; font-style: italic; }
  .df-message .df-showmore {margin-top: 10px; }
  .df-message .dropdown-menu.df-ccs li { padding: 2px 8px; }
  
  .df-msgbody .df-quote { font-style: italic; font-size: inherit; padding: 4px 16px; margin-bottom: 12px; }
  .df-msgbody .df-quote p { margin: 8px 16px; }
  
  /* Initial implementation (no card) */
  .df-embedded.media .pull-left { max-width: 150px; }
  .df-embedded.media { border: 1px solid #333333; margin: 15px; padding: 15px; }
  .df-xs .df-embedded.media .pull-left { max-width: 100px; }
  .df-xs .df-embedded.media { height: auto; }
  
  /* Embedded Card */
  .df-embeddable { max-width: 680px; }
  .df-embedded { width: auto; color: #333333; margin: 10px 0px; } 
  .df-embedded .df-head { vertical-align: baseline; padding-bottom: 3px; }
  .df-embedded .df-head img {display: inline; height: 16px; width: 16px; max-width: 16px; margin-right: 4px; }
  .df-embedded .df-body { padding: 0px; border: 1px solid #CCCCCC; border-left-width: 8px; 
      border-top-right-radius: 4px; border-top-left-radius: 0px; border-bottom-right-radius: 4px; border-bottom-left-radius: 0px;
      background-color: #FFFFFF;}
  .df-embedded .df-body iframe { width: 100%; height: auto; }
  .df-embedded .df-media, .df-embedded .df-desc { padding: 10px; }
  .df-embedded .media .pull-left { max-width: 150px; margin-bottom: 10px; }
  .df-embedded .media-object { display-block; height: auto; max-width: 100%;}
  .df-embedded.df-photo .df-body img { max-height: 800px; }
  /* this is a copy of .img-responsive */
  .df-embedded img.responsive { display: block; height: auto; max-width: 100%; }
  .df-xs .df-embedded .media .pull-left { max-width: 100%; float: none; display: block; }
  .df-xs .df-embedded .media .media-body { clear: both; }
  .df-xs .df-embedded .media { height: auto; }
  
  .df-sig-frame { width: 100%; border: 0px; height: auto; }
    
  .df-messagelist .df-replyto { margin-left: 20px; margin-bottom:10px; border: 2px solid #CCCCCC; border-radius: 6px; padding: 10px; position: relative;}
  .df-messagelist .df-replyto:after 
    {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 15px 15px 0;
    border-color: #FFFFFF transparent;
    display: block;
    width: 0;
    z-index: 1;
    bottom: -15px;
    left: 92%;
    }

  .df-messagelist .df-replyto:before 
    {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 16px 16px 0;
    border-color: #CCCCCC transparent;
    display: block;
    width: 0;
    z-index: 0;
    bottom: -18px;
    left: 92%;
    }
  
  
    
  /* Kluges for panel height silliness */
  #df_newmsgpnl .df-post { height: 581px; }
  .df-post .panel-body { height: 421px; }
  .df-post .form-group { height: 34px; }
  .df-xs .df-post .form-group { height: auto; margin-bottom: 5px; }
  .df-pollfield { height: 34px; }
  .df-pollfieldh { height: 76px; }
  .df-xs .df-pollfield, .df-xs .df-pollfieldh {height: auto; margin-bottom: 5px; }
  
  form.df-newmsg { margin-top: 15px; }
  .df-xs form.df-newmsg { margin-top: 0px; }
  form .df-editor { margin-bottom: 15px; position: relative;}
  .df-xs form .df-editor { margin-top: 10px; }
  .df-editor .cke_bottom { color: #333333; }
  .mention-suggestions.dropdown-menu li { padding: 2px 6px; }
  
  .df-editor .cke_editable img { max-width: 100%; }
  .df-editor .cke_editable { background-color: #FFFFFF; color: #333333; padding: 8px; 
    font-size: 14px; }
  
  .btn.df-cc { position: absolute; top: 0px; right: 1px; }
  .df-post .bootstrap-tagsinput { border-radius: 0px; }
  
  #df_msgform { position: relative; }
  .df-xs .df-postactions .col-xs-6.df-bot { padding-top: 15px; }
  .df-sm .df-postactions, .df-md .df-postactions, .df-lg .df-postactions,
    .df-sm .df-btnrow, .df-md .df-btnrow, .df-lg .df-btnrow { height: 30px; }
  
  #df_postoptions { width: 90%; height: auto; position: absolute; bottom: 10px; right: 10px; z-index: 10; margin: 0px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);}
  #df_postoptions .panel-body {background-color: #F4F4F4 ; padding: 10px 15px;  overflow-x: auto; width: 100%; height: auto;}
  #df_postoptions .form-control { height: auto; }
  #df_postoptions .form-group { height: auto; margin-bottom: 10px; }
  #df_postoptions .df-title {font-weight: bold; margin-bottom: 0px; }
  #df_postoptions .help-block { margin-top: 0px; margin-bottom: 5px; }
  #df_optionsclose { position: absolute; top: 2px; right: 2px; background-color: transparent; border: none; }
  
  
  
  
  
    
 
  .df-searchdlg button.df-adv {margin-right: 15px; }
  
  /* position should be the same as the margins given above */
  div.affix {
    position: fixed; 
    top: 15px;
    left: 10px;
  }
  div.affix-top {
      position: static;
  }
  div.affix-bottom {
      position: absolute;
      left: 0px;
  }
  
  @media (max-width: 767px) {
    .df-right { display: none; }
    .df-middle { margin-left: 0px; margin-right: 0px; }
  }
  @media (min-width: 768px) {
    .df-right { display: none; }
    .df-left { float: left; }
    .df-middle { margin-left: 260px; margin-right: 10px; }
  }
  @media (min-width: 992px) {
     .df-right { display: inline-block; float: right; width: 180px;  }
     .df-left { float: left; }
     .df-middle { margin-left: 260px; margin-right: 200px; }
  }
  @media (min-width: 1100px) {
     .df-right {  display: inline-block; float: right; width: 200px;  }
     .df-left { float: left; }
     .df-middle { margin-left: 260px; margin-right: 220px; }
  }
  
/* control center mode */
#df_mainbody.df-cc .df-middle, #df_mainbody.df-lb .df-middle { margin-right: 10px; }
.df-xs #df_mainbody.df-cc .df-middle, .df-xs #df_mainbody.df-lb .df-middle { margin-right: 0px; }
#df_mainbody.df-cc .df-right, #df_mainbody.df-lb .df-right { display: none; }

#df_mainbody.df-cc .df-ccpanel { background-color: #FFFFFF; color: #222222; }
#Control_Title { width: 100%; margin: 0px 0px 10px 0px; height: 36px; background-color: whitesmoke;}
#Control_Title .breadcrumb { margin-bottom: 0px; }
#Control_Display { width: 100%; margin: 0px; }
#df_ccmenu .list-group-item.df-section { background-color: #8F8F8F; color: #FFFFFF; padding: 8px;}
#df_ccmenu .list-group.panel { margin: 5px 0px 0px 0px; }
/* #df_ccmenu .df-sectionmenu .df-premium { background-color: #E4E4E4; } */
#df_ccmenu a.df-ccpremonly { color: #888888; }
#df_ccnav { background-color: #E2E2E2; }
#df_ccmenu .list-group-item { padding-left: 24px; }
#df_ccmenu .list-group-item .fa { width: 8px }
#df_ccmenu a.df-ccpagelink.active { background-color: #FFFFFF; font-weight: bold; }
 
span.cke_bottom { position: relative; padding: 2px 2px 0px 2px; }
span.df-attach { position: absolute; top: 3px; left: 2px; }
span.cke_attachmentlist { padding: 0px; height: 24px; margin-left: 20px;}
  
  /* For FuelUX Pillbox (used for attachment list, e.g.) */
  /*
.fuelux .pillbox {
  padding: 3px;
}
*/

.fuelux .pillbox ul {
  display: inline-block;
  margin: 0;
  padding: 0; /* DF */
}

.fuelux .pillbox li {
  display: inline-block;
  float: left;
  padding: 1px 4px 2px;
  margin: 0px 2px;
  font-size: 11.844px;
  font-weight: bold;
  line-height: 21px;
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  vertical-align: baseline;
  cursor: pointer;
  background-color: #999999;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}

.fuelux .pillbox li:after {
  position: relative;
  top: -2px;
  float: right;
  padding-left: 4px;
  font-size: 20px;
  font-weight: bold;
  line-height: 20px;
  color: #000000;
  text-shadow: 0 1px 0 #ffffff;
  content: " \00D7";
  opacity: 0.2;
  filter: alpha(opacity=20);
}

.fuelux .pillbox li:hover:after {
  opacity: 0.4;
  filter: alpha(opacity=40);
}

/* Probably should build these from theme */
.fuelux .pillbox li.status-important {
  background-color: #b94a48;
}

.fuelux .pillbox li.status-warning {
  background-color: #f89406;
}

.fuelux .pillbox li.status-success {
  background-color: #468847;
}

.fuelux .pillbox li.status-info {
  background-color: #3a87ad;
}