/*Debugging only
* { border: 1px solid black; }*/

.tooltip-class1 .tooltip-inner {
    background-color: #192abb;
}

.flex-fill {
    flex: 1 1 auto;
}

#keymojiNameDiv {
    font-family: Montserrat;
    font-weight: normal;
    font-size: 24px;
    line-height: 24px;
    text-align: left;
    color: #22262a;
}

#keymojiAttributionTextDiv {
    white-space: wrap;
    word-break: break-all;
}

#soundDiv {    
    width: 100%;
    bottom: 20px;
}





.stickyPosition {
    position: sticky;
}

#keymoji3DShowContent {
    overflow: hidden;
    position: relative;
    width: 100%;    
}

#keymojiOfferBuyButton {
    position: absolute;
    left: 150px;
}

#keymojiOfferBuyButton .buyBtn {
    height: 55px;
    border-radius: 10px;
}

.priceDiv {
    background-color: #adff2f;
    width: 220px;
    padding: 10px;
    border-radius: 10px;
}

.priceDiv > small {
    font-size: 20px;
    vertical-align: top;
}

#keymojiPriceDiv {
    font-family: Montserrat;
    font-weight: lighter;
    font-size: 40px;
    letter-spacing: 0.03em;
    line-height: 35px;
    text-align: left;
    color: #192abb;
}

.infoText,
#buyMessage {
    font-weight: 300;
    font-size: 17px;
    letter-spacing: 0.03em;
    line-height: 37px;
    text-align: left;
    color: #707070;
    margin-bottom: 0;
}

.ar-button-text {
    font-size: 1.25em;
    color: #192ABB;
}

.ar-button-text .keymoji-img {
    width: 70px;
    height: 80px;
    margin-left: -32px;
}

#keymojiDetailsDiv .detailContent {
    background-color: white;
}

model-viewer {
    background: white;
    height: 100%;
    width: 100%;
    position: absolute;
}

#keymojiCategoriesDiv .bg-info {
    border: #192ABB 1px solid !important;
    background-color: #90EE90!important;
    color: #192ABB!important;
    margin-right: 8px;
}

#keymojiLevelDiv {
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border: 1px solid #000000;
    border-radius: 50%;
}

.borderLevel-b {
    border-bottom: 1px solid #A4A4A4;
}

.imgWidht {
    width: 32px;
}

#progress {
    position: absolute;
    width: calc(90%);
    height: 10px;
    /*color: rgba(255, 255, 255, 0.75);*/
    color: white;
    box-shadow: 0px 0px 8px 6px rgba(173, 255, 47, 0.25);
    border: 2px solid currentColor;
    border-radius: 10px;
    top: calc(50% - 5px);
    left: calc(5%);
    opacity: 0;
    transition: opacity 0.3s 0.3s;
}

#progress.show {
    transition-delay: 0s;
    opacity: 1;
}

#progress>.bar {
    width: 100%;
    height: 100%;
    color: #152eff;
    background-color: currentColor;
    transform-origin: top left;
    transform: scaleX(0);
}

#detailsParentDiv .h-100,
#detailsParentDiv .h-75 {
    height: calc(100vh - 180px)!important;
    padding-bottom: 15px;
}
#detailsParentDiv .h-75 {

}


.attributeToggle {
    position: relative;
    display: block;
    width: 100%;
    padding: 10px;
    text-decoration: none;
    margin-bottom: 5px;
    cursor: pointer;
  }
  
  .arrow {
    position: absolute;
    top: 20px;
    right: 20px;
  }
  
  .arrow::before,
  .arrow::after {
    position: relative;
    content: '';
    display: block;
    width: 10px;
    height: 1px;
    background: black;
    transition: 0.3s ease-in-out;
  }
  
  .arrow::before {
    transform: rotate(45deg);
  }
  
  .arrow::after {
    left: 6px;
    top: -1px;
    transform: rotate(-45deg);
  }
  
  

  
  .attributeToggle.active .arrow::before {
    transform: rotate(-45deg);
  }
  
  .attributeToggle.active .arrow::after {
    transform: rotate(45deg);
  }

.position-fixednew {
    position: relative !important;
}

@media (min-width: 900px) {
    #keymojiNameDiv {
        font-family: Montserrat;
        font-weight: normal;
        font-size: 37px;
        line-height: 40px;
        text-align: left;
        color: #22262a;
    }
    
    .ar-button-text {
        font-size: 2.5em;
        color: #192ABB;
        padding-right: 0em;
    }
    #detailsParentDiv .h-100 {
        height: 73vh!important;
    }
    
    #detailsParentDiv .h-75 {
        height: 93% !important;
    }
    #detailsParentDiv .h-7 {
        height: 7% !important;
    }
    .width60 {
        width: 60%;
    }
    .position-fixednew {
        position: fixed !important;
    }
    
}
@media (min-width: 900px) {
    #detailsParentDiv .h-100 {
        height: calc(100vh - 180px)!important;
    }
    
    #detailsParentDiv .h-75 {
        height: 93% !important;
    }
    #detailsParentDiv .h-7 {
        height: 7% !important;
    }
}
@media (min-width: 1400px) {
    #detailsParentDiv .h-100 {
        height: calc(100vh - 150px)!important;
    }
    
    #detailsParentDiv .h-75 {
        height: 93% !important;
    }
    #detailsParentDiv .h-7 {
        height: 7% !important;
    }
}