/* General
-------------------------------------------------- */

body { color: #000; }

body { font-family: 'Roboto', sans-serif; }

h1, h2, h3 { color: #666666; font-weight: 400; }
h2 { color: #333; font-weight: 400; }
h4 { font-weight: 500; margin-top: 30px; }
h5 {
  border-bottom: 1px solid silver;
  padding-bottom:10px;
  margin-top:30px;
  font-weight:bold;
  color: orange;
  font-size:110%;
}

/* breadcrumbs */
.breadcrumb { color: #888888; }
.breadcrumb a { color: #888888; }
.breadcrumb > li + li:before {
  padding: 0 5px;
  color: #ccc;
  content: ">";
}

/* planner */
.pfp_planner textarea {
    width: 100%;
    height: 120px;
    resize: none;
    font-size: 90%;
    border: 1px solid silver;
}

.pfp_planner textarea.supahigh {
    height: 320px;
}

.pfp_planner textarea.disabled {
    border:0;
    color: #666666;
    background-color: transparent;
}

/* responsive header backend */
.module {
  background: url(../../image/header/1.jpg);
  /* background-attachment: fixed; */
  background-position: top center;
  background-repeat: no-repeat;
  width: 100%;
  height: 240px;
  position: relative;
  overflow: hidden;
}
.module > header {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px 20px;
  /* 
  background: inherit;
  background-attachment: fixed;
  */
}
.module > header > h1 {
  margin: 0;
  color: white;
  position: relative;
  z-index: 1;
  letter-spacing:-2px;
  margin-left:5px;
  /* text-shadow: 0 0 3px gray, 0 0 5px gray; */
}
.module > header > h1 > small {
  color: #00BFFF;
  font-weight: bold;
  letter-spacing:0;
  text-shadow: 0 0 3px #0000FF, 0 0 5px #00BFFF;
}

* {
  box-sizing: border-box;
}

/* circle */
.pfp_circle
{
    width:50px;
    height:50px;
    border-radius:50%;
    font-size:20px;
    color:#000;
    line-height:50px;
    text-align:center;
    background:#efefef
}

/*
.dd {
    overflow: hidden;
    text-overflow: ellipsis;
}
*/

/*
* { font-family: 'Playfair Display', serif; }
h1 { font-family: 'Playfair Display', serif; }
h2 { font-family: 'Playfair Display', serif; }
*/

/* functional */
.nowrap {
    white-space: nowrap;
}

.pfp_overflow {
    overflow: scroll;
}

.pfp_big {
    font-size: 18px;
}
.pfp_bold {
    font-weight: bold;
}

.pfp_status td {
  background-color:black;
  color:white;
}

.pfp_active_filter {
    background-color: gray;
    color:white
}

.small { font-size: 15px; }
.marker { background-color: yellow; }
.nomargin { margin: 0; }
a.nounderline { text-decoration: none; }

/* favicon */
.soft { color: gray; }
a.soft:hover { color: #efefef; }

.pfp_label_group { color: silver; font-size: 120%; }

.pfp_divide {
    margin-top: 60px;
    margin-bottom: 60px;
}

.plogo { max-height:30px; padding-right:10px; }

.pfpdis {
    color: silver;
}

.pfp_element {
    color:#fff;
    background-color:silver;
}
.pfp_big_checkbox {width: 30px; height: 30px;}

/* hq message */
.pfp_message {
    padding: 10px;
    border: 1px solid silver;
    color: white;
    background-color: silver;
    margin-bottom: 20px;
    font-size: 120%;
}

/* align/center vertical */
.pfp_center_vertical {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

/* truncate table cell */
.pfp_truncate {
  display: table;
  table-layout: fixed;
  width: 100%;
}

/* 20190826 updated */
div.pfp_truncated {
  overflow: hidden; /* new */
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /*
  display: inline-block;
  max-width: 100%;
  */
}

/* NEW ellipsis (bad try) */
/*
.table { table-layout: fixed; }
.table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
*/

/* external urls */
#content a[href^="http://"]:not([href*="pfpro.local"]):after,
#content a[href^="https://"]:not([href*="pfpro.local"]):after{
    /* content: " (EXTERNAL)" */ 
    content: " " url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);
}

/* progress bar */
.ui-progressbar {
    position: relative;
}
.progress-label {
    position: absolute;
    left: 50%;
    top: 4px;
    font-weight: bold;
    text-shadow: 1px 1px 0 #fff;
}

/* ff image responsive bug */

.img-responsive { 
    /* other definitions */
    width:100%;
}

/* same height (BOOTSTRAP default) */

.row-height {
  display: table;
  table-layout: fixed;
  height: 100%;
  width: 100%;
}
.col-height {
  display: table-cell;
  float: none;
  height: 100%;
}
.col-top {
  vertical-align: top;
}
.col-middle {
  vertical-align: middle;
}
.col-bottom {
  vertical-align: bottom;
}

/* TTF
-------------------------------------------------- */
@font-face {        |
    font-family: 'Babe-alicious'; 
    src: url(../libs/fonts/BABE.svg);
}

.pfpbabe { font-family: 'Babe-alicious', sans-serif } 

/* Sticky footer styles
-------------------------------------------------- */

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 20em;
}

/* footer */

#footer {
    background-color: #222;
    border-top: 1px solid #e9ebed;
    padding:20px 0;
    color: #9d9d9d;
}

#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20em;
}

/* Modal :: center vertical */

.modal {
    text-align: center;
}

@media screen and (min-width: 768px) { 
    .modal:before {
        display: inline-block;
        vertical-align: middle;
        content: " ";
        height: 100%;
    }
}

.modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}

/* form :: required field */

.required::after {
    color: #d00;
    content: "*";
    position:absolute;
    right:7px;
}
.rrequired::after {
    color: #d00;
    font-family: 'FontAwesome';
    font-weight: normal;
    font-size: 14px;
    content: "\f069";
    position:absolute;
    right:-5px;
    top:7px;
}

/* table */

th { border-top: 1px solid black; }
th.header { background-color: silver; color: white; }
th.status { background-color: #efefef; color: gray; font-weight: normal; }


/* label ???*/

.lab-box{
    position:relative;
    padding:45px 15px 15px;
    margin:0;
    border-color:#e5e5e5 #eee #eee;
    border-style:solid;
    border-width:1px 0;
    -webkit-box-shadow:inset 0 3px 6px rgba(0,0,0,.05);
    box-shadow:inset 0 3px 6px rgba(0,0,0,.05)
}
.lab-label{
    position:absolute;
    top:15px;
    left:15px;
    font-size:12px;
    font-weight:700;
    color:#959595;
    text-transform:uppercase;
    letter-spacing:1px;
    content:"Example"
}



/* icon classes */

/*
    class:  fa-rip
    task:   add cross before content
    usage:  <i class="fa-rip">...
*/
.fa-rip:before { content: "†"; font-weight:bold; }




/* RENAME: various classes */

/*
    class:  margin-XX
    task:   margin top/bottom
    usage:  <div class="margin-05">...
*/
.margin-05 { margin: 0.5em 0; }
.margin-10 { margin: 1.0em 0; }
.margin-15 { margin: 1.5em 0; }
.margin-20 { margin: 2.0em 0; }
.margin-25 { margin: 2.5em 0; }
.margin-30 { margin: 3.0em 0; }




/* pfp_ classes */

/*
    class:  pfp_flex
    task:   column height: flex
    usage:  <div class="row pfp_flex">...
*/
.pfp_flex {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}


/*
    class:  pfp_iframe
    task:   column height: flex
    usage:  <iframe class="pfp_iframe">...
*/
.pfp_iframe {
    width:100%;height:250px;border:0;background-color:#efefef;padding:20px;
}



/*!
 * Tab drop for Bootstrap
 *
 * Copyright 2012 Stefan Petre
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 */
.nav-tabs,
.nav-pills {
  position: relative;
}



select option:disabled {
    color: silver;
}



/* dropdown */

/*
    class:  dropdown-submenu ...
    task:   button multi dropdown
    usage:  ...
*/
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}




/* CSS used here will be applied after bootstrap.css */
.badge-notify-alt{
  background:red;
  position:relative;
  top: -14px;
  left: -35px;
  font-size:20px;
}

/* CSS used here will be applied after bootstrap.css */
.badge-notify {
  background:red;
  position:relative;
  top: -11px;
  right: -30px;
  font-size:10px;
  padding: 4px;
}

.navbar-top-links .dropdown-menu li a div {
    white-space: normal;
}
  
@media(min-width:768px) {

  .navbar-top-links li {
      display: inline-block;
  }

  /*
  .navbar-top-links li:last-child {
      margin-right: 15px;
  }
  */

  .navbar-top-links li a {
      padding: 15px;
      min-height: 50px;
  }

  .navbar-top-links .dropdown-menu li {
      display: block;
  }

  /*
  .navbar-top-links .dropdown-menu li:last-child {
      margin-right: 0;
  }
  */

  .navbar-top-links .dropdown-menu li a {
      padding: 3px 20px;
      min-height: 0;
  }

  .navbar-top-links .dropdown-menu li a div {
      white-space: normal;
  }

  .navbar-top-links .dropdown-messages,
  .navbar-top-links .dropdown-tasks,
  .navbar-top-links .dropdown-alerts {
      width: 310px;
      min-width: 0;
  }

  /*
  .navbar-top-links .dropdown-messages {
      margin-left: 5px;
  }

  .navbar-top-links .dropdown-tasks {
      margin-left: -59px;
  }

  .navbar-top-links .dropdown-alerts {
      margin-left: -123px;
  }

  .navbar-top-links .dropdown-user {
      right: 0;
      left: auto;
  }
  */

  /*
  .navbar-top-links .dropdown-messages,
  .navbar-top-links .dropdown-tasks,
  .navbar-top-links .dropdown-alerts {
      margin-left: auto;
  }
  */
}



.pfp_preview {
     font-size:400%
}

@media(max-width:767px){
    .pfp_preview {
         font-size:180%
    }
    .btn-responsive {
        padding:4px 9px;
        font-size:90%;
        line-height: 1.2;
    }
}
@media(max-width:991px){
    #NOheader { margin-bottom:45px; }
    body { margin-top:50px; }
}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}

@media print {

    .noprint {
      display: none;
    }
    #header, #footer {
      display: none;
    }

    a:after { display:none }

    /*
    #content { 
        width: auto; margin: 0 5%; 
        padding: 0; 
        border: 0; 
        float: none !important; 
        color: black; 
        background: transparent; 
    }
    */

    .pfp_element { font-weight:bold; }

    div#content { 
        margin-left: 5%; 
        padding-top: 1em; 
        /*border-top: 1px solid silver;*/
    }

}










.pfpwell {
  background-color:lightblue;background-image: linear-gradient(lightblue, white 60%, #1D9CE5);
  background: linear-gradient(to bottom, rgba(178,225,255,1) 0%,rgba(102,182,252,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

  background: #f2f5f6;
  background: -moz-linear-gradient(top, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f5f6), color-stop(37%,#e3eaed), color-stop(100%,#c8d7dc));
  background: -webkit-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);
  background: -o-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);
  background: -ms-linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f5f6', endColorstr='#c8d7dc',GradientType=0 );
  background: linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);
}

.pfpwell-locked {
  background: linear-gradient(to bottom, rgba(241,231,103,1) 0%,rgba(254,182,69,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}









/*!
 * Start Bootstrap - Simple Sidebar (http://startbootstrap.com/)
 * Copyright 2013-2016 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
 */


/* Toggle Styles */


/* Sidebar Styles */

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-nav li {
    text-indent: 20px;
    line-height: 40px;
}

.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #999999;
}

.sidebar-nav li a:hover {
    text-decoration: none;
    color: #fff;
    background: rgba(255,255,255,0.2);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
    height: 65px;
    font-size: 18px;
    line-height: 60px;
}

.sidebar-nav > .sidebar-brand a {
    color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover {
    color: #fff;
    background: none;
}

@media(min-width:768px) {
    #wrapper {
        padding-left: 250px;
    }

    #wrapper.toggled {
        padding-left: 0;
    }

    #sidebar-wrapper {
        width: 250px;
    }

    #wrapper.toggled #sidebar-wrapper {
        width: 0;
    }

    #page-content-wrapper {
        padding: 20px;
        position: relative;
    }

    #wrapper.toggled #page-content-wrapper {
        position: relative;
        margin-right: 0;
    }
}