.logo img{
    max-width: 100%;
}

.topleftlogo{
    padding: 0px 10% 0px 10%;
}

.topnav {
    margin-left: -4rem;
    width: 111%;
}

.form-signin {
    background-color: #fff;
}

.bg-dark .nav>li.active>a, .bg-dark .nav>li:focus>a, .graph-svg-tip .nav>li.active>a, .graph-svg-tip .nav>li:focus>a {
    background-color: #8270a9;
}

.bg-dark .nav>li:hover>a, .graph-svg-tip .nav>li:hover>a {
    background-color: #666666;
}

.layout {
    padding: .2rem!important;
}

.nav{
    padding-right: 2rem;
}

.sub-menu .nav-item span{
    font-size: -1;
    color:#888888;
}

dd {
    width: 90%;
}

dt {
    width: 90%;
}

.form-signin {
    text-align: center;
}

.form-signin .logo img{
    max-width: 30%;
}

.form-label {
    text-align: left;
}
.login-message {
    padding-bottom: 10px;
}

/*  COMMENTED to fix shift down of icon
.input-icon-addon {
    margin-top: 45px;
}
*/

.center {
    text-align: center;
}

.appId {
    font-size:   200%;
    font-weight: 800;
    color:  #adb5bd;
    text-align: center;
}

.appId-invert {
    font-size:   200%;
    font-weight: 800;
    color:  #222222;
    text-align: center;
}

.email-link a{
    font-size: 1.5em;
    font-weight: bold;
    color: #aa0000;
}

.bg-white a, .dropzone-wrapper .dz-preview a, .dropzone .dz-preview a, .editor-preview-side a {
    color: #466ad0;
}

.text-unset a {
    color: #EEEEEE;
}

.team-member{
    font-size: 1.5em;
}

.modal-content {
    position: relative;
    background: rgb(255, 255, 255) ; 
    opacity: 1;;
}

div .form-group .btn-default {
    background: gray;
    color: black;
}

div .form-group .btn-purple {
    background-color: #886ab5;
    color: white;
    border-color: black;
    border-radius: 10px;
}
div .btn-purple {
  background-color: #886ab5;
  color: white;
  border-radius: 10px;
  border-color: #886ab5;
}

div .btn-purple:hover {
  background-color :white ;
  color: #886ab5;
  border-radius: 10px;
  border-color: #886ab5;
}

div .btn-blue {
  background-color: #3B7EB9;
  color: white;
  border-radius: 10px;
  border-color: #3B7EB9;
}

div .btn-blue:hover {
  background-color: white;
  color: #3B7EB9;
  border-radius: 10px;
  border-color: #3B7EB9;
}

div .img-round-6 {
    border-radius: 6px;

}

div .img-sm{
  width:50px;
  height:50px;
}

div .img-md{
  width:100px;
  height:100px;
}
div .img-lg{
  width:150px;
  height:150px;
}
div .img-xl{
  width:200px;
  height:200px;
}

.icon-unsubscribed{
  filter: invert(83%) sepia(10%) saturate(149%) hue-rotate(16deg) brightness(112%) contrast(76%);
}

.icon-subscribed{
  filter: invert(90%) sepia(26%) saturate(4368%) hue-rotate(3deg) brightness(108%) contrast(107%);
}

/**  KPIs **/
.icon {  
    float: right;
    font-size:500%;
    position: absolute;
    top:0rem;
    right:-0.3rem;
    opacity: .16;
  }
  
  
  #container
  {
    width: 1200px;
    display: flex;
  }
  
  .grey-dark
  {
    background: #495057;
    color: #efefef;
  }
  
  .red-gradient {
    background: linear-gradient(180deg, rgba(207,82,82,1) 0%, rgba(121,9,9,1) 80%);
    color: #fff;
  }
  .red {
    background: #a83b3b;
    color: #fff;
  }
  
  
  .purple
  {
    background: #886ab5;
    color: #fff;
  }
  
  .orange {
    background: #ffc241;
    color: #fff;
  }

  .indigo {
    background: #6610f2;
    color: #fff;
  }
  
  .slate-blue {
    background: #3B7EB9;
    color: #fff;
  }

  .kpi-card
  {
    overflow: hidden;
    position: relative;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.75);;
    display: inline-block;
    float: left;
    padding: 1em;
    border-radius: 0.3em;
    font-family: sans-serif;  
    width: 240px;
    min-width: 180px;
    margin-left: 0.5em;
    margin-top: 0.5em;
  }
  
  .card-value {
    display: block;
    font-size: 200%;  
    font-weight: bolder;
  }
  
  .card-text {
    display:block;
    font-size: 70%;
    padding-left: 0.2em;
  }

  .flex-container{
    display: flex;
    width: 500px;
  }

  .text-truncate{
    white-space: wrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 80px;
    max-width: 300px;
  }

  @media only screen and (max-width: 800px) {
    /* For mobile phones: */
    [class*="col-"] {
      width: 100%;
    }
    /*below does not work...*/
    [class*="kpi-"]{
      width: 100%;
    }
  }

/** SEARCH BAR **/
  .search-wrap {
    width: 300px;
    vertical-align: middle;
    float: right;
    display: inline-flex;
  }

  .search-hover {
    border: 1px solid #ccc;
    outline: none;
    background-size: 22px;
    background-position: 13px;
    border-radius: 5px;
    width: 25px;
    height: 40px;
    padding: 5px;
    transition: all 0.5s;
  }
  .search-hover:hover {
    width: 300px;
    padding-left: 25px;
  }
  .search-icon:hover + .search-hover{
    width: 300px;
    padding-left: 25px;
  }
  
  .input-icon-addon {
    left: unset;
    right: 0;
  }