

<!--
  mainColor: [#FF4602]
  mainColorCustom: [#FF4602]
-->

html, body {
    height: 100%;
    /*
    font-family: 'Roboto', sans-serif;
    */
    font-family: 'Montserrat', sans-serif;
}

.pmaas-header {
    height: 60px;
}
.pmaas-navbar-header {
  top: 60px;
}
.pmaas-content {
    padding-top: 120px; /* height of header + navbar*/
}

.pmaas-navbar-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.ptfc-search-control-feedback {
  position: absolute; 
  z-index: 2; 
  display: block; 
  width: 2.375rem; 
  height: 2.375rem; 
  line-height: 2.375rem; 
  text-align: center; 
}

.ptfc-search-control, .ptfc-search-control-dashboard {
  padding-left: 2rem;
}
.ptfc-search-control::placeholder {
  opacity: 0.5; color: #FF4602; /* blue */
}
.ptfc-search-control-dashboard::placeholder {
  opacity: 0.5; 
}

.ptfc-img100 {
  max-width:100px; 
  width:100%; 
  max-height:100px; 
  height:100%;
}

.fill-height {
  min-height: 100%;
}

.fill-width {
  min-width: 100%;
}

.fill {
  min-height: 100%;
  min-width: 100%;
}

.shadow2 {
  -webkit-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}
.boxTop {
   box-shadow: 0px 0px 10px #cccccc;
   -webkit-box-shadow: 0px 0px 10px #cccccc;
   -moz-box-shadow: 0px 0px 10px #cccccc;
}
.container.shadow {
    padding-left:0;
    padding-right:0;
}

@keyframes shadow-pulse
{
  /* 
  orange FFAB91 = 255, 171, 145
  error B00020
  */
  0% {
    /* 
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2); 
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    */
    color: #FFFFFF;
  }
  10% { color: #FFAB91; }
  20% { color: #FFFFFF; }
  30% { color: #FFAB91; }
  40% { color: #FFFFFF; }
  100% { color: #FFFFFF; }
}
.shadow-pulse
{
  animation: pmaas-pulse 3s 3; /* infinite */
}

.ptfc-heartbeat {
	animation: ptfc-heartbeat 0.5s infinite alternate;
  animation-delay: 2.0s;
  -webkit-animation-delay: 2.0s;
	transform-origin: center;
}
@keyframes ptfc-heartbeat {
	30% { transform: scale(1.0); }
  to { transform: scale(1.2); }
}

.ptfc-popout-repeat {
	animation: ptfc-popout-repeat 4.0s infinite ;
  animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
	transform-origin: center;
}
@keyframes ptfc-popout-repeat {
	from { transform: scale(1.0); }
  5% { transform: scale(0.0); }
  15% { transform: scale(1.2); }
	20% { transform: scale(1.0); }
  to { transform: scale(1.0); }
}

/* Productific modals, popovers, tooltips */
.modal-header {
  color: #FFFFFF;
  background-color: #FF4602;
}
.modal-title {
  color: #FFFFFF;
}
.modal-content {
  border: 0px solid #FF4602;
}
.modal .close {
    color: #FFFFFF; 
    opacity: 1;
}

/* Bootstrap modal backdrop fix for stacked modals: disable bootstrap's backdrop and add my own */
/* */
.modal-backdrop {
    visibility: hidden !important;
}
.modal:after { 
  content: ""; 
  display: block; 
  background: rgba(0,0,0, .5); 
  position: fixed; top: 0; 
  bottom: 0; 
  width: 100%; 
  z-index: -1; 
}


.popover {
  border: 1px solid #cccccc;
}
.popover-header {
  color: #FFFFFF;
  background-color: #FF4602;
  margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;
  border: 1px solid #ffffff;
}
.popover-body {
  
 } 

.tooltip-inner {
  color: #FFFFFF;
  background-color: #FF4602;
}
.tooltip.bs-tooltip-right .arrow:before {
    border-right-color: #FF4602 !important;
}
.tooltip.bs-tooltip-left .arrow:before {
    border-left-color: #FF4602 !important;
}
.tooltip.bs-tooltip-bottom .arrow:before {
    border-bottom-color: #FF4602 !important;
}
.tooltip.bs-tooltip-top .arrow:before {
    border-top-color: #FF4602 !important;
}

/*
body {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}
*/

.pmaas-inverted {
  background-color: #FF4602;
  color: #ffffff;
}

.ptfc-sticky-top {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

@keyframes slideInFromBottom {
  0% {
    transform: translate(-50%,150%);
    -ms-transform: translate(-50%,150%);
  }
  100% {
    transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
  }
}

.ptfc-overlay-popover {
  animation: 1s ease-out 0s 1 slideInFromBottom;
  width: 98%;
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translate(-50%,0%);
  -ms-transform: translate(-50%,0%);
  background-color: #ffffff; 
  border-color: #FF4602;
  border: 1px solid #FF4602;
  border-radius: 5px;
  z-index: 100;
}

.ptfc-radiobutton-top {
  vertical-align: top;
  margin-top: 7px;
}

.pmaas-card-header {
  background-color: #1976D2;
  color: #ffffff;
  padding: 3px 6px 3px 6px; /* top right bottom left */
  margin-bottom: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}

.max-width, max-width800 {
  margin-right: auto;
  margin-left: auto;  
  max-width: 800px;
}

.max-width1000 {
  margin-right: auto;
  margin-left: auto;  
  max-width: 1200px;
}

.max-width1200 {
  margin-right: auto;
  margin-left: auto;  
  max-width: 1200px;
}

.max-width1500 {
  margin-right: auto;
  margin-left: auto;  
  max-width: 1500px;
}

.max-width1800 {
  margin-right: auto;
  margin-left: auto;  
  max-width: 1800px;
}

.card {
  margin-right: auto;
  margin-left: auto;  
  /* max-width: 600px; */
}

.overlayInactive {
  display: block;
  background-color: #cccccc15;
  z-index: 2;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 10px;
  /* cursor: pointer; */
}

.form-single {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.form-single .checkbox {
  font-weight: 400;
}
.form-single .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}
.form-single .form-control:focus {
  z-index: 2;
}
.form-single label {
  margin-bottom: 0px;
}
/*
.form-single input[id="loginEmail"], .form-single input[id="oldPassword"], .double-input-top {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-single input[id="loginPassword"], .form-single input[id="newPassword"], .double-input-bottom {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.form-single label[id="labelEmail"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
*/
.loading_saving {
  margin: 0 8px 0 0;
  -webkit-animation: spin 2s ease-in-out infinite;
  animation: spin 2s ease-in-out infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.loading_saving_large {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #FF4602;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s ease-in-out infinite;
  animation: spin 2s ease-in-out infinite;
}

.pmaas-vcenter-hack {
  transform: translateY(-50%);
}

/* slider, switch */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.custom-switch .custom-control-label::before {
  left: -2.25rem;
  width: 1.75rem;
  pointer-events: all;
  border-radius: 0.5rem;
}

/* custom-switch from https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css */
.custom-switch .custom-control-label::after {
  top: calc(0.25rem + 2px);
  left: calc(-2.25rem + 2px);
  width: calc(1rem - 4px);
  height: calc(1rem - 4px);
  background-color: #adb5bd;
  border-radius: 0.5rem;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .custom-switch .custom-control-label::after {
    transition: none;
  }
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  background-color: #fff;
  -webkit-transform: translateX(0.75rem);
  transform: translateX(0.75rem);
}

.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: #FF4602;
}


.pmaas-badge-parent {
  position: relative; 
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
}

.pmaas-badge-child {
  position: absolute;
  right: 2px;
  top: -0px;
  
  /* background-color: #ff0000;*/
  z-index: 9; 
  text-align: center;
  font-size: 10px;
  font-weight: bold;
  color: #FF4602; 
}

.nobr	{ white-space:nowrap; }

.ptfc-breakwords {
  overflow-wrap: break-word !important;
}
.ptfc-breakall {
  word-break: break-all;
}

input:checked + .slider {
  background-color: #FF4602;
}

input:checked + .slider_red {
  background-color: #F44336 !important;
}

input:focus + .slider {
  box-shadow: 0 0 1px #FF4602;
}

input:checked + .slider:before {
  -webkit-transform: translateX(16px);
  -ms-transform: translateX(16px);
  transform: translateX(16px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 24px;
}

.slider.round:before {
  border-radius: 50%;
}

.toast {
    width:200px;
    height:20px;
    height:auto;
    position:absolute;
    left:50%;
    margin-left:-100px;
    bottom:50px;
    background-color: #383838;
    color: #F0F0F0;
    /*font-family: Calibri;*/
    font-size: 20px;
    padding:10px;
    text-align:center;
    border-radius: 2px;
    -webkit-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
    -moz-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
    box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
}

.pmaas-scrollable-menu {
    height: auto;
    max-height: 550px;
    overflow-x: hidden;
}

.pmaas-dropdown-submenu {
    position: relative;
}

.pmaas-dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}

.ptfc-kpi-card {
  overflow: hidden;
  position: relative;
  display: inline-block;
  /* float: left; */
  padding: 1em;
  width: 240px;
  min-width: 180px;
  margin-left: 0.5em;
  margin-right: 0.5em;
  margin-top: 0.5em;
}
.ptfc-kpi-card-value {
  display: block;
  font-size: 200%;  
  font-weight: bolder;
  text-align: left;
  color: #FF4602;
}
.ptfc-kpi-card-text {
  display:block;
  /* font-size: 70%; */
  color: #424242 ;
  padding-left: 0.2em;
  text-align: left;
}
.ptfc-kpi-card-text-line {
  border-top: solid #FF4602;
  display:block;
  /* font-size: 70%; */
  color: #424242 ;
  padding-left: 0.2em;
  text-align: left;
}
.ptfc-kpi-card-icon {  
  float: right;
  font-size:400%;
  position: absolute;
  top:0.5rem;
  right:0.5rem;
  opacity: .3; color: #FF4602;
}

.kpi-row {
  display: flex;
}

.kpi-tile {
  text-align: center;
  /* p1=0.25 p2=0.5 p3=1 p4=1.5 p5=3 */
  /* padding: 0rem 0.5rem 0rem 0.5rem; */
  margin-left: 0px;
  margin-top: 5px;
  margin-right: 20px;
  margin-bottom: 5px;
}

.kpi-value {
  /* p1=0.25 p2=0.5 p3=1 p4=1.5 p5=3 */
  padding: 0rem 0rem 0rem 0rem; 
  margin: 0rem 0rem 0rem 0rem; 
  color: #1976D2;
}

.kpi-value-secondary {
  /* p1=0.25 p2=0.5 p3=1 p4=1.5 p5=3 */
  padding: 0rem 0rem 0rem 0rem; 
  margin: 0rem 0rem 0rem 0rem; 
  font-size: 24px;
  font-weight: bold;
  /* color: #1976D2; */
  color: #2196F3;
  opacity: 1.0;
}

.kpi-trend-up {
  /* p1=0.25 p2=0.5 p3=1 p4=1.5 p5=3 */
  padding: 0rem 0rem 0rem 0rem; 
  margin: 0rem 0rem 0rem 0rem; 
  font-size: 24px;
  font-weight: bold;
  color: #4CAF50; /* green */
  opacity: 1.0;
}
.kpi-trend-down {
  /* p1=0.25 p2=0.5 p3=1 p4=1.5 p5=3 */
  padding: 0rem 0rem 0rem 0rem; 
  margin: 0rem 0rem 0rem 0rem; 
  font-size: 24px;
  font-weight: bold;
  /* color: #4CAF50; /* green */
  opacity: 1.0;
}

.kpi-value-public {
  /* p1=0.25 p2=0.5 p3=1 p4=1.5 p5=3 */
  padding: 0rem 0rem 0rem 0rem; 
  margin: 0rem 0rem 0rem 0rem; 
  color: #FF4602;
}

[data-toggle="collapse"].collapsed .if-not-collapsed {
  display: none;
}
[data-toggle="collapse"]:not(.collapsed) .if-collapsed {
  display: none;
}

/* PMaaS colors */
h1, h2, h3, h4, h5 {
  color: #424242 ;
}

h1.ptfc-header {
  font-size: 24px;
}

h3 {
  margin-top:24px;
}

.text-crop-3 {
  -webkit-line-clamp: 3;
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.content-crop {
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
  mask-image: linear-gradient(180deg, #000 60%, transparent);
  max-height:  150px;
}
.content-crop2 {
    width: 300px;
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 3px solid #777;
    max-height:200px;
    overflow:hidden;
    text-overflow: ellipsis;
    content: "";
    position:relative;
}
.content-crop2:before {
    content:'';
    width:100%;
    height:100%;    
    position:absolute;
    left:0;
    top:0;
    background:linear-gradient(transparent 150px, white);
}

.darklink a, .darklink a:link, .darklink a:active, .darklink a:visited, .darklink a:hover, .darklink a:focus {
  color: #424242 ;
  text-decoration: none;
}

.link-underline-only, .link-underline-only:link, .link-underline-only:active, .link-underline-only:visited, .link-underline-only:hover, .link-underline-only:focus {
  color: inherit;
}

.muted-link, .muted-link:link, .muted-link:active, .muted-link:visited, .muted-link:hover, .muted-link:focus {
  color: #424242 ;
  text-decoration: none;
}
.muted-link-a a, .muted-link-a a:link, .muted-link-a a:active, .muted-link-a a:visited, .muted-link-a a:hover, .muted-link-a a:focus {
  color: #424242 ;
  text-decoration: none;
}
.ptfc-muted-link a, .ptfc-muted-link a:link, .ptfc-muted-link a:active, .ptfc-muted-link a:visited, .ptfc-muted-link a:hover, .ptfc-muted-link a:focus {
  text-decoration: none;
}


/* buttons on internal pages */
.btn-primary {
  border: 0px solid #FF4602 !important;   
  background: #FF4602 !important;  
  color: #ffffff !important;
}
.btn-primary.active, .btn-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
	color: #ffffff !important;
	background: #FF4602 !important;
}

/* buttons on public feedback pages */
.btn-outline-primary {
  border: 1px solid #FF4602 !important;   
  color: #FF4602 !important;  
}
.btn-outline-primary.active, .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
	color: #ffffff !important;
	background: #FF4602 !important;
}
.btn-outline-primary.disabled:hover {
  color: #FF4602 !important;
	background: #ffffff !important;
}

/* white buttons */
.btn-white, .btn-white.active, .btn-white:focus, 
.btn-white:active, .btn-white.disabled:hover  {
	border: 1px solid #ffffff !important;
  color: #ffffff !important;
	background: #FF4602 !important;
}
.btn-white:hover  {
	border: 1px solid #ffffff !important;
  color: #FF4602 !important;
	background: #ffffff !important;
}

.btn-outline-secondary {
  background: #ffffff !important;
}

.btn-outline-secondary, .btn-outline-secondary.active, .btn-outline-secondary:focus, .btn-outline-secondary.disabled:hover  {
  color: #9E9E9E !important; 
}
.btn-outline-secondary:hover  {
	color: #ffffff !important;
  background: #9E9E9E !important;
}


.btn-circle {
  border-radius: 50%;
}


/* progressbar */
.progressbar_container {
  width: 100%;
  position: absolute;
  z-index: 1;
}
.progressbar {
  counter-reset: step;
}
.progressbar li {
  list-style-type: none;
  float: left;
  width: 25%;
  position: relative;
  text-align: center;
  color: #9E9E9E;
}
.progressbar li:before {
  content:counter(step);
  counter-increment: step;
  width: 30px;
  height: 30px;
  border: 2px solid #9E9E9E;
  display: block;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  line-height: 27px;
  background-color: white;
  color: #9E9E9E;
  text-align: center;
  font-weight: bold;
}
.progressbar li:after {
  content: '';
  position: absolute;
  width:100%;
  height: 2px;
  background: #9E9E9E;
  top: 15px;
  left: -50%;
  z-index: -1;
}
.progressbar li:first-child:after {
  content: none;
}
.progressbar li.done {
  color: #3aac5d;
}
.progressbar li.done:after{
  background: #3aac5d;
}
.progressbar li.done:before{
  border-color: #3aac5d;
  background: #3aac5d;
  color: white;
}
.progressbar li.active {
  color: #FF4602;
  font-weight: bold;
}
.progressbar li.active:after{
  /* background: #FF4602; */
}
.progressbar li.active:before{
  border-color: #FF4602;
  background: #FF4602;
  color: white;
}

/* color classes for icons etc. */
.pmaasColorBlue {
   color: #FF4602 ;
}
.pmaasColorMain {
   color: #FF4602 ;
}
.pmaasColorBlueDark {
   color: #1976D2 ;
}
.pmaasColorLightGrey {
   color: #999999 ;
}
.pmaasColorGrey {
   color: #757575 ;
}
.pmaasDarkGrey {
  color: #424242 ;
  /* font-weight:400; */
}
.pmaasColorWarn {
   color: #E65100 ;
}
.pmaasSmallcaps {
  font-variant: small-caps;
}

/* navbar toggler */
.pmaas-toggler.navbar-toggler {
  border: none;
  /* border-color: #FF4602; */
}

/*
.pmaas-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' 
      xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(013,071,161, 0.7)' 
      stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 
      16h24M4 24h24'/%3E%3C/svg%3E");
}
*/

.pmaas-shadow-navbar {
    -webkit-box-shadow: 3px 3px 3px #cccccc;
    -moz-box-shadow:    3px 3px 3px #cccccc;
    box-shadow:         3px 3px 3px #cccccc;
    z-index:9;
}
.pmaas-shadow-popup {
    -webkit-box-shadow: 3px 3px 3px #cccccc;
    -moz-box-shadow:    3px 3px 3px #cccccc;
    box-shadow:         3px 3px 3px #cccccc;
    z-index:9;
}

.row.pmaas-vdivider2 [class*='col']:not(:last-child):after {
  background: #eeeeee;
  width: 3px;
  content: "";
  display:block;
  position: absolute;
  top:0;
  bottom: 0;
  right: 0;
  min-height: 70px;
} 

.row.pmaas-vdivider {
  overflow: hidden;
}
.row.pmaas-vdivider > div[class^="col"] {
  /*  
  padding-bottom: 100px;
  margin-bottom: -100px;
  */
  border-left: 3px solid #eeeeee;
  /* border-right: 3px solid #eeeeee; */
}
.row.pmaas-vdivider div[class^="col"]:first-child {
  border-left: none;
}
.row.pmaas-vdivider div[class^="col"]:last-child {
  border-right: none;
}


.btn-feedback {
  border: 1px solid #FF4602;  
  color: #FF4602 ;  
  background: #FFFFFF;
}
.btn-feedback.active, .btn-feedback:hover, .btn-feedback:focus, .btn-feedback:active {
	color: #FFFFFF ;
  background: #FF4602 ;
}
.btn-feedback.disabled:hover {
  color: #999999 ;
	background: #FFFFFF ;
}

  /*
  border-radius: 10em;
  border: 2px solid #fff;
  */

.nav-pills .nav-item { border-radius: 17px; border: 1px solid transparent; } 
.nav-pills .nav-item .nav-link {  border-radius: 17px; border: 1px solid transparent; color: #FF4602; }
.nav-pills .nav-item .nav-link:visited {  border-radius: 17px; border: 1px solid transparent; color: #FF4602; }
.nav-pills .nav-item .nav-link:active {  border-radius: 17px; border: 1px solid transparent; color: #FFFFFF !important; background-color: #FF4602; }
.nav-pills .nav-item .nav-link.active {  border-radius: 17px; border: 1px solid transparent; color: #FFFFFF !important; background-color: #FF4602; }
.nav-pills .nav-item .nav-link:hover {  border-radius: 17px; border: 1px solid #FF4602; color: #FF4602; }

.pmaas-nav-pills .nav-item { margin-right: 5px; }
.pmaas-nav-pills .nav-item .nav-link { opacity: 0.5; color: #FFFFFF; background-color: transparent; border: 1px solid transparent; }
.pmaas-nav-pills .nav-item .nav-link:link { opacity: 0.5; color: #FFFFFF; background-color: transparent; }
.pmaas-nav-pills .nav-item .nav-link:visited { opacity: 0.5; color: #FFFFFF; }
.pmaas-nav-pills .nav-item .nav-link:active { opacity: 1.0; color: #FFFFFF; }
.pmaas-nav-pills .nav-item .nav-link.active { opacity: 1.0; color: #FFFFFF; }
.pmaas-nav-pills .nav-item .nav-link:hover { opacity: 1.0; color: #FFFFFF; }

.pmaas-nav-dashboard .nav-item .nav-link:active { opacity: 1.0; color: #FFFFFF; background-color: #ffffff66; }
.pmaas-nav-dashboard .nav-item .nav-link.active { opacity: 1.0; color: #FFFFFF; background-color: #ffffff66; }
.pmaas-nav-dashboard .nav-item .nav-link:hover { opacity: 1.0; color: #FFFFFF; border: 1px solid #ffffff; }

.pmaas-scrollbar-blue::-webkit-scrollbar {
  width: 5px;
}
.pmaas-scrollbar-blue::-webkit-scrollbar-track {
  background: #FF4602; 
}
.pmaas-scrollbar-blue::-webkit-scrollbar-thumb {
  background: #ffffff66; 
}
.pmaas-scrollbar-blue::-webkit-scrollbar-thumb:hover {
  background: #ffffff; 
}

.pmaas-scrollbar-white::-webkit-scrollbar {
  width: 5px;
}
.pmaas-scrollbar-white::-webkit-scrollbar-track {
  background: #ffffff; 
}
.pmaas-scrollbar-white::-webkit-scrollbar-thumb {
  background: #2196F366; 
}
.pmaas-scrollbar-white::-webkit-scrollbar-thumb:hover {
  background: #2196F3;
}

/* 
.pmaas-nav-dashboard .nav-item .nav-link { 
  margin-top: 0px !important; margin-bottom: 0px !important; 
  padding-top: 0px !important; padding-bottom: 0px !important; 
}
*/

/*
.nav-item:hover, .nav-item:visited, .nav-link:hover, .nav-link:visited  { color: #FFFFFF; }
.nav-item.active, .nav-link.active { color: #FFFFFF; border-bottom: 2px solid #FFFFFF; }
 */
.nav-link-noborder { opacity: 0.5; color: #FFFFFF; background-color: transparent; }
.nav-link-noborder:hover, .nav-link-noborder:visited { opacity: 1.0; color: #FFFFFF; border-bottom: 0px; }

/* in tabs use classic style  */
.nav-tabs .nav-link { color: #424242; }
.nav-tabs .nav-link:visited { color: #FFFFFF; }
.nav-tabs .nav-link.active { color: #000000; }
.nav-tabs .nav-link:hover { color: #000000; }

/*
.nav-tabs .nav-item { color: #424242; }
.nav-tabs .nav-item:visited { color: #424242; }
.nav-tabs .nav-item.active { color: #FF4602; }
.nav-tabs .nav-item:hover { color: #FF4602; }
*/
/*
ul.nav, ul.nav li, ul.nav li a, ul.nav li.active {
    color: #FFFFFF ;
}
ul.nav li , {
    color: #FFFFFF ;
}*/
a, a:link a:active a:visited a:hover {
    color: #FF4602;
}

.ptfc-border{
  border: 1px solid #9E9E9E;
}

.ptfc-hidden {
  display: none !important;
}

.color-white { color: #FFFFFF; }
.color-black { color: #000000; }

.ptfc-color-primary { color: #FF4602; /* blue */ }
.ptfc-bg-primary {    background-color: #FF4602; /* blue */ }
.ptfc-bg-warning {    background-color: #E65100; /* blue */ }
.ptfc-bg-error {    background-color: #B00020; /* blue */ }
.ptfc-feedback-bg-primary {    background-color: #FF4602; /* blue */ }
.ptfc-color-primary-transp { opacity: 0.5; color: #FF4602; /* blue */ }
.ptfc-halftransparent { opacity: 0.5; }

.ptfc-color-primary-dark { color: #1976D2; }
.ptfc-bg-primary-dark { background-color: #1976D2; }

.ptfc-color-primary-light{ color: #90CAF9; }
.ptfc-bg-primary-light { background-color: #90CAF9; }

.ptfc-color-secondary { color: #FFAB91; /* deep orange */ }
.ptfc-bg-secondary { background-color: #FFAB91; /* deep orange */ }

.ptfc-color-secondary-light { color: #FFCC80; /* deep orange */ }
.ptfc-bg-secondary-light { background-color: #FFCC80; /* deep orange */ }

.ptfc-color-secondary-dark { color: #F57C00; /* deep orange */ }
.ptfc-bg-secondary-dark { background-color: #F57C00; /* deep orange */ }

.ptfc-color-error { color: #B00020; }

.ptfc-color-lightgrey { color: #EEEEEE; }
.ptfc-color-grey { color: #9E9E9E; }
.ptfc-color-darkgrey { color: #616161; }

.ptfc-bg-color-lightgrey { background-color: #EEEEEE; }
.ptfc-bg-color-grey { background-color: #9E9E9E; }
.ptfc-bg-color-darkgrey { background-color: #616161; }

.ptfc-color-lightgray { color: #EEEEEE; }
.ptfc-color-gray { color: #9E9E9E; }
.ptfc-color-darkgray { color: #616161; }

.ptfc-icon-glow {        /* #FFCC80 secondary-light    rgba(0,0,0,0.3)  */
  -webkit-filter:drop-shadow(3px 3px 2px #FFCC8099);      
          filter:drop-shadow(3px 3px 2px #FFCC8099);
  &:hover {
  -webkit-filter:drop-shadow(5px 5px 4px #FFCC8066);      
          filter:drop-shadow(5px 5px 4px #FFCC8066);
  } 
}

.ptfc-bg-standout {
  border-radius: 17px;
  //background: #E3F2FD;
  border: 1px solid #90CAF9;
  padding-top: 10px;
  padding-bottom: 10px;
}

[contenteditable]:active, [contenteditable]:focus {
  outline: 2px dotted #FF4602;
  border-radius: 17px;//15px
}


/*
https://material.io/design/color/the-color-system.html#tools-for-picking-colors
Blue 
50  #E3F2FD
100 #BBDEFB
200 #90CAF9 **** light ****
300 #64B5F6
400 #42A5F5
500 #2196F3 **** main ****
600 #1E88E5
700 #1976D2 **** dark/icon ****
800 #1565C0
900 #0D47A1 **** links ****
A100 #82B1FF
A200 #448AFF
A400 #2979FF
A700 #2962FF

Gray
50  #FAFAFA
100 #F5F5F5
200 #EEEEEE
500 #9E9E9E
700 #616161

Orange 
50 #FFF3E0
100 #FFE0B2
200 #FFCC80 **** light ****
300 #FFB74D
400 #FFA726
500 #FF9800 **** main ****
600 #FB8C00
700 #F57C00 **** dark/icon ****
800 #EF6C00
900 #E65100 **** links ****
A100 #FFD180
A200 #FFAB40
A400 #FF9100
A700 #FF6D00

Deep Orange 
50  #FBE9E7
100 #FFCCBC
200 #FFAB91
300 #FF8A65
400 #FF7043
500 #FF5722
600 #F4511E
700 #E64A19
800 #D84315
900 #BF360C
A100 #FF9E80
A200 #FF6E40
A400 #FF3D00
A700 #DD2C00

Teal 
50 #E0F2F1
100 #B2DFDB
200 #80CBC4
300 #4DB6AC
400 #26A69A
500 #009688
600 #00897B
700 #00796B
800 #00695C
900 #004D40
A100 #A7FFEB
A200 #64FFDA
A400 #1DE9B6
A700 #00BFA5

Indigo 
50  #E8EAF6
100 #C5CAE9
200 #9FA8DA
300 #7986CB
400 #5C6BC0
500 #3F51B5
600 #3949AB
700 #303F9F
800 #283593
900 #1A237E
A100 #8C9EFF
A200 #536DFE
A400 #3D5AFE
A700 #304FFE
*/