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


body {
    background-color:#000000;
    color:#2b0850;
    font-family: proximaNovaCondensedRegular, 'Courier New', Courier, monospace;
    margin:0px;
    padding:0px;
}

#appContainer {
    display: block;
    
    /*position: relative;*/
    position: fixed;
    top:0; 
    left:50%;
    transform:translateX(-50%);
    align-items: center;
    justify-content: center;
    height: 100%;
    background:url(./assets/images/premium-case-cutaway.png) no-repeat center center;
    background-size: cover;
    /*border:1px solid #111;*/
    aspect-ratio: 9/16;
    margin:auto;
}

.appUILayer {
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

/* this is the shiny case with the cut out that shows the texture cogs */
#premiumCaseOverlayCutaway {
    background:url(./assets/images/premium-case-solo-01-shadow.png) no-repeat center center;
    background-size: cover;
}

/* this is the regular shiny case they see when first launching the app */
#premiumCaseOverlaySolid{
    background:url(assets/images/premium-case-full.png) no-repeat center center;
    background-size: cover;
}

#textureSampleShadows {
    background:url(assets/images/premium-case-solo-01-shadow.png) no-repeat center center;
    background-size: cover;
}

.textureAssemblyContainer {
    position:relative;
    height:71%;
    margin-top:23.8%;
    margin-right:auto;
    margin-left:auto;
    width:33%;
}


.textureSlot {
    height:25%;
    width:100%;
    position:relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(236, 214, 197, 1);
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    border-bottom:1px dashed #ffffff;
    text-align:center;
    overflow:hidden;
}


.textureCogsContainer {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}
.textureCogsContainer img {
    height:100%;
}

#textureClickRegions {
    display:none;
}

.textureSlotClickRegion {
    background-color:transparent;
    border:none;
}

.textureSlotClickRegion:hover {
    background-color:rgba(255, 255, 255, 0.1);
    cursor: pointer;
}

.textureLibPreviewImage {
    height:150px;
}

.appHoverElement {
    margin:0px;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    display:none;
}

#inputSaveTextureName {
    background-color:white !important;
    color:purple !important;
    width:100% !important;
}
#btnSaveTextureName {
    color:#38115e !important;
    width:100% !important;
    border-radius:0px !important;
    border:1px solid #38115e !important;
    text-transform: uppercase !important;
}

#textureLibrary {
    margin-left:10px !important;
}

#textureCogTable img {
    width:150px;
}

#textureCogTable img:hover {
    cursor: pointer;
    outline:1px solid purple;
}

#acpDesignControls {
    left:40px;
    top:5px;
    
    width:auto;
    transform:translate(-50%);
    padding:8px;
    border:1px solid rgb(218,165,32);
    border-radius:3px;
    background-color: rgba(218,165,32, 0.25);
}

#acpTextureTitle {
    position:absolute;
    display:none;
    bottom: 8%;
    left:50%;
    transform:translateX(-50%);
    width:auto;
    text-align:center;
    color:#fff;
    font-family: proximaNovaCondensedRegular, 'Courier New', Courier, monospace;
    font-size:33px;
    top:auto;
    letter-spacing: .2rem;
    text-transform: uppercase;
}
.acpTextureTitleModelName {
    font-size:14px;
    letter-spacing: .1rem;
    text-align: left;;
}
.acpTextureTitleTextureName {
    width:max-content;
    max-width:100%;
    line-height: normal;;
}
.acpTextureTitleBrandName {
    text-align:right;
}

.app-menu-header {
    font-family: proximaNovaCondensedRegular, 'Courier New', Courier, monospace;
    text-transform: capitalize;
    color:rgb(218,165,32);
    font-size:12px;
    padding:5px;
    text-align:center;
}

.app-menu {
    background: rgba(91, 0, 112, 0.85);
    border: 1px solid rgb(91, 0, 112);
}

#acpDesignControls ul {
    list-style-type:none;
    padding:0px;
    margin:0px;
}

#acpDesignControls ul li a {
    width:100%;
}

#acpDesignControls input[type="text"] {
    width:50px;
    background:none;
    border:1px solid #38115e;
    color:rgb(218,165,32);
    text-align: center;;
}

#acpDesignControls h5 {
    font-size:10px;
    margin:0px 0px 8px 0px;
}

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

#btnCloseProfile {
    position:absolute;
    right:10px;
}


.saved-texture-link {
    font-family: proximaNovaCondensedRegular, 'Courier New', Courier, monospace;
    display:block;
    color:goldenrod;
    text-decoration:none;
    padding:5px;
}

.saved-texture-link:hover {
    color:#38115e;
    text-decoration:underline;
    background-color:goldenrod;
    cursor:pointer;
}



/* 

Bootstrap Overrides 

- Gold: fec20e
- Purple: 38115e 
- Darker purple: 2b0850
  
*/
.btn-success {
    background-color: #fec20e;
    border: 1px solid goldenrod;
    color:#38115e;
}

.btn-success:hover {
    background-color: #fec20e;
    border: 1px solid goldenrod;
}