:root {
    --primaryColor: #007BFF;
}

.btn-outline-primary {
    color: var(--primaryColor) !important;
    border-color: var(--primaryColor) !important;
}

.btn-primary {
    background-color: var(--primaryColor) !important;
    border-color: var(--primaryColor) !important;
    color: #fff !important;
}

.btn-outline-primary:hover {
    color: #fff !important;
    background-color: var(--primaryColor) !important;
}

nav input{
    width: 300px !important;
    margin: 0 auto;
    background-color: #f1f1f1 !important;
    border-radius: 18px !important;
}

.img-box{
    height: 150px;
    position: relative;
}

.img-box-mini{
    height: 75px;
    width: 75px;
}

.img-box img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.img-box.square, .img-box.square img{
    height: 0; padding-bottom: 100%; background-size: cover;
}

.caption-box{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
}

.btn-pill{
    border-radius: 18px;
}

select.form-control{
    width: 120px;
    border-radius: 18px;
}

.select-mini{
    width: 65px;
}

.scroll-slider{
    overflow-x: auto;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #aaa;
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.truncate {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

.title{
    font-weight: bold;
}

.card{
    overflow: hidden;
}

.minH90{
    min-height: 90vh;
}

select:focus,
select:active,
textarea:hover, 
input:hover, 
textarea:active, 
input:active, 
textarea:focus, 
input:focus,
button:focus,
button:active,
button:hover,
label:focus,
.btn:active,
.btn.active
{
    outline:0px !important;
    -webkit-appearance:none;
    box-shadow: none !important;
}

.my-model{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    overflow-y: auto;
    z-index: 100;
}

.my-model-content{
    width: 80%;
    /*max-height: 100vh;*/
    background-color: #fff;
    margin: 24px auto;
    overflow-y: auto;
}

.my-model-close{
    color: #fff;
    text-align: right;
    padding-top: 12px;
    padding-right: 18px !important;
    font-size: 24px;
}

.my-model-content .my-model-close{
    color: #000;
}

:root {
    --animate-duration: 500ms;
}

.my-model-content > .my-model-close{
    display: none;
}

.my-model-inner{
    padding: 32px 24px;
}

@media (max-width: 768px)
{
    .my-model-content{
        width: 100%;
        height: 100%;
        margin: 0;
    }

    .my-model > .my-model-close{
        display: none;
    }

    .my-model-content > .my-model-close{
        display: block;
    }

    .img-box-tall{
        height: 300px;
    }

}

.img-box-tall{
    height: 400px;
}

.img-box-short{
    height: 60px;
    width: 60px;
}

.pointer{
    cursor: pointer;
}

.loader{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 100;
}

.spinner-border{
    border: .25em solid var(--primaryColor);
    border-right-color: transparent;
}

.cart-icon{
    position: relative;
}

.cart-icon:hover{
    text-decoration: none;
}

.cart-icon i{
    font-size: 32px;
}

.cart-icon span{
    border-radius: 12px;
    position: absolute;
    top: -14px;
    right: -8px;
}

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

main{
    height: 90vh;
}

.floating{
    position: fixed;
    right: 20px;
    bottom: 20px;
    background-color: var(--primaryColor);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    z-index: 99;
}

.cart-icon i{
    color: #fff;
}


.list.card .info{
    max-width: calc(100% - 75px);
}

.cover.card, .cover_square.card{
    
}