@font-face {
  font-family: proximaNovaCondensedRegular;
  src: url(./assets/fonts/147);
}

@font-face {
  font-family: proximaNovaSemibold;
  src: url(./assets/fonts/173);
}

:root {
    --flpro-purple: rgba(50,39,107,1);
    --flpro-purple-translucent: rgba(50,39,107,.50);
    --flpro-purple-transparent: rgba(50,39,107,.15);
    --flpro-gold: goldenrod;
    --flpro-green: green;
}
.icon-traffic-source {
    color:silver;
}
.fa-fansly-logo {
    color: skyblue;
}
.fa-vixen-logo {
    color: black;
}
.fa-rickys-room-logo-01 {
    color: red;
}
.data-table-text {
    font-family: proximaNovaCondensedRegular, sans-serif;
    font-size: 0.9em;
    color:grey;
}

.data-table-text.sub-text {
    font-size: 0.8em;
    color:gray;
    font-style: italic ;
}   

.order-overview-table {
    --bs-table-bg: none;;
}
.order-details {
    overflow: hidden; /* Crucial for animation */
    max-height: 0;
    transition: max-height 0.5s ease-out; /* Adjust duration and easing */
}
.order-details.revealed {
    max-height: 400px; /* Set to a value that can accommodate the content */
    transition: max-height 0.5s ease-in; /* Adjust duration and easing */
}
.order-details th {
    background-color:var(--flpro-purple-translucent);
    color:white;
}   
.order-details td {
    background-color:aliceblue;
}
.order-expand-icon:hover {
    cursor:pointer;
}
body {
    padding-top:60px;
    color:white;
}

a {
    color:var(--flpro-gold);
    text-decoration:none;
}

h5 {
    font-family: proximaNovaSemibold, sans-serif;
    font-size: .7em;
    font-weight: normal;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing:0.3rem;
    text-align: center;
    color:silver;
}
h4 {
    text-align:center;
    font-family: proximaNovaCondensedRegular, sans-serif;
}
#homeHeader {
    text-align:center;
    background-color:var(--flpro-purple-translucent)
}
.btn-primary {
    background-color:var(--flpro-gold) !important;
    border-color:var(--flpro-gold) !important;
    color:white;
}

.btn-secondary {
    background-color:var(--flpro-purple) !important;
    border-color:var(--flpro-purple) !important;
    color:white;
}

.loading-element {
    display:none;
}
.pro-text-link {
    cursor:pointer;
    color:goldenrod;
    text-decoration:none;
    font-size:large;
}


.legalese {
    font-family: proximaNovaCondensedRegular, sans-serif;
    font-size: 0.8em;
    color:lightgray;
    margin-top:20px;
}

#myVideo {
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1  ;
}

.met {
    color:lightgreen !important;
}

#password-conditions > ul {
    list-style-type: none;
    padding-left: 0;
}
#homeLogo {
    max-width:80%;
    margin-top:30px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    display: block;
}

.btn {
    min-width:40%;
    width:40%
}

.app-panel {
    display:none;
    overflow:auto;
}

.videoPlayer {
    display:none;
}

.branding .brand-logo {
    height:30px;
}

#dashboard {
    background-color:white;
    color:grey;
    
    padding-top:50px;
}

#dashTopNav {
    background-color:var(--flpro-purple);
    color:white;
}
#dashBottomNav {
    height:80px;
    align-items:center;
    text-align:center;

    & > div > i {
        line-height:normal;
    }
    & > div > span {
        font-size:11px;
    }
}

.dash-nav {
    background-color:var(--flpro-purple);
    color:lightgray;
}

#dashBottomNav .selected-nav-item {
    color:var(--flpro-gold);
}

#dashBottomNav .menu-item:hover:not(.selected-nav-item) {
    color:white;
    cursor:pointer; 
    transition: color 0.3s ease;
}
.dash {
    display:none;
    padding:20px;
}
.square-box {
      width: 100%; /* Ensures the box takes the full width of its column */
      padding-bottom: 100%; /* Creates the square aspect ratio */
      position: relative; /* Essential for positioning content inside */
      background-color: #f0f0f0; /* Example background */
      margin-bottom: 15px; /* Add some spacing between squares */
    }

.square-content {
      position: absolute; /* Allows content to be positioned within the square-box */
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex; /* For centering content */
      align-items: center;
      justify-content: center;
      text-align: center;
}

.unselectable-text {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE 10+ */
  user-select: none;          /* Standard */
}

.skintone-fair {
    color: #f7e9df;
}
.skintone-light {
    color: #f1d3bd;
}

.skintone-latte {
    color: #cca799;
}

.skintone-medium {
    color: #b6784f;
}

.skintone-mocha {
    color: #906b56;
}

.skintone-dark {
    color: #271F1b;
}

#fleshToneMenu .fleshtone-option:hover {
    cursor:pointer;
}
#fleshToneMenu .fleshtone-option p {
    font-size:10px;
}
.icon-anatomy-upload,
.icon-signature-upload {
    color:grey
}
.icon-anatomy-upload:hover,
.icon-signature-upload:hover {
    cursor:pointer;
}

.icon-btn {
    user-select: none;
    /* For cross-browser compatibility, include vendor prefixes */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE 10+ and Edge */
}
#cameraSignatureCapture {
    display:none;
    width:100%;
    max-width:500px;
    height:auto;
    border:4px solid var(--flpro-purple);
    border-radius:10px;
}
#btnAddFirstProduct {
    display:none;
}
#dash_products .square-box:hover {
    outline: 4px solid var(--flpro-gold);
    cursor:pointer;
}
.anatomy-option:hover {
    cursor:pointer;
    color:var(--flpro-purple)
}
.anatomy-option.selected i {
    color:var(--flpro-gold);
}
#videoAnatomyScan {
    display:none;
}
#canvasSignatureCapture {
    width:100%;
    max-width:500px;
    height:auto;
    border-radius: 10px;
    border:4px solid var(--flpro-gold);
}
#signatureCaptureArea {
    display:none;
}
#signatureCaptureReviewArea {
    display:none;
    margin-bottom:20px;
    text-align:center;
}
.signature-pad {
    position:relative;
    display:inline-block;
    border:1px solid var(--flpro-purple); 
    background:var(--flpro-purple-translucent); 
    width:100%; 
    height:200px;
    text-align: center;
    padding-top:10px;
}

.signature-pad canvas {
   
    background:lightyellow; 
}

.signature-pad-button {
    margin-left:10px;
    color:grey;

}
.signature-pad-button:hover {
    cursor:pointer;
    color:var(--flpro-gold);
}
.signature-pad-toolbar {
    position:absolute;
    display:block;
    bottom:5px;
    right:5px;
}
#dash_earnings .legalese {
    color:grey;
}

#dash_earnings h1 {
    font-size:calc(2rem + .9vw);
    font-family: proximaNovaSemibold, sans-serif;
    color:var(--flpro-purple)
}

#tableEarningsOverview td[dataType="currency"] {
    text-align:right;
}

td[dataType="currency"] {
    text-align:right;
}

#overview-tab-pane .alert {
    background-color:var(--flpro-purple-transparent) !important;
}

#dashboard .alert.hidden {
    display:none;
}   

#signatureCaptureReviewArea,
#signatureCaptureArea {
    position:relative;
    display: none;
    width:100%;
    height:auto;
    justify-content: center;
    align-items: center;
    
}
#signatureCaptureReviewCopy,
.camera-aperature-overlay {
    position: absolute;
    
    text-align: center;;
    color: rgba(255,255,255,.5);
}
#signatureCaptureReviewCopy
{
    
    width:100%;
}

#floating2257Aliases {
    height: 90px;
}

.btn-set-build-option {
    margin-right:auto;
    margin-left:auto;
}
@media screen and (max-width: 768px) {
    body {
        padding-top:0px;
    }
    .navbar {
        display:none;
    }
    .btn {
        min-width:80%;
    }
    
}