.f-c-tt {
  opacity: 1;
  padding: .25em;
  z-index: 5000;
}

.f-c-tt.hidden {
  position: absolute !important; 
  top: -9999px !important; 
  left: -9999px !important;
  opacity: 0;
}

.f-c-tt > div {
  font-size: var(--flex-text-xs) !important;
  color: var(--flex-text-white);
  background: var(--flex-bg-dark);
  box-shadow: var(--flex-shadow-tooltip);
  -webkit-box-shadow: var(--flex-shadow-tooltip);
  -moz-box-shadow: var(--flex-shadow-tooltip);
  border: 0;
  border-radius: var(--flex-border-radius-default);
  margin: auto;
  padding: .25em 1em;
  transition: var(--flex-transation-opacity-inout);
  opacity: 1;
  /*text-align: center;*/
  display: inline-block;
}
  
.f-c-tt > div > * {
  font-size: inherit;
  margin: 0;
}

.f-c-tt-left {
  padding-left: 0 !important;
}

.f-c-tt-right {
  padding-right: 0 !important;
}

.f-c-tt-center {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.f-c-tt-auto,
.f-c-tt-middle {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.f-c-tt-bottom {
  padding-bottom: 0 !important;
}

.f-c-tt-top {
  padding-top: 0 !important;
}

.f-c-tt-sm { max-width: 200px; }

.f-c-tt-md { max-width: 350px; }

.f-c-tt-lg { max-width: 500px; }

.f-c-tt-xl { max-width: 600px; }