body {
    background: rgb(0,63,181);
    background: radial-gradient(circle, rgba(0,63,181,1) 0%, rgba(0,37,105,1) 32%, rgba(0,0,0,1) 100%);
}

footer {
    opacity: .5;
}

.filter-shadow {
    -webkit-filter: drop-shadow(.3em .3em .3em #000);
    filter: drop-shadow(.3em .3em .3em #000);
}

.checkerboard {
    /* The image used */
    background-image: url("/views/img/checkerboard.gif");
    background-repeat: repeat;
}

.stars-text {
    font-size: .7em;
}

.previewWrapper {
    clear: both;
    content: "";
    display: table;
}  
.previewImage {
    position: absolute;
    width: 90%; 
    max-width: 300px; 
    max-height: 225px; 
    object-fit: contain;   
}  

.alert-size {
    width: 25%;
    display: inline-block; 
    margin: 0 auto;
}

#modalImagePicker .modal-dialog {
    width: 75% !important;
    max-width: none !important;
}

a {
    color: #4285F4;
}

a:hover {
    color: #ffffff;
}

input,textarea,select {
    background-color: lightgrey !important;
}

.chip {
    border-radius: 6em;
    margin: 5px 5px 5px 5px;
    padding: 0px 15px 0px 15px;
    vertical-align: center;
    display: inline;
    background-color: #666;
    white-space: nowrap;
}

.StripeElement {
    background-color: white;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid transparent;
    box-shadow: 0 1px 3px 0 #e6ebf1;
    -webkit-transition: box-shadow 150ms ease;
    transition: box-shadow 150ms ease;
}
.StripeElement--focus {
    box-shadow: 0 1px 3px 0 #cfd7df;
}
.StripeElement--invalid {
    border-color: #fa755a;
}
.StripeElement--webkit-autofill {
    background-color: #fefde5 !important;
}

@media (max-width: 575.98px) {
   .bookPropGrip {
        font-size: 1em; 
        width: 50%; 
        position: relative; 
        display: block; 
        top: -1em;
        text-align: right;
        left: 3em;
    }
    .pagePropGrip {
        font-size: 1em; 
        width: 50%; 
        position: relative; 
        display: block; 
        top: -1em;
        text-align: right;
        left: 3em;
    }
    .layerPropGrip {
        font-size: 1em; 
        width: 50%; 
        position: relative; 
        display: block; 
        top: -1em;
        text-align: right;
        left: 3em;
    }

    .grid-rowheight {
        height: 8rem;
    }
    
}

@media (min-width: 575.98px) {
    .bookPropGrip {
        font-size: 1em; 
        position: relative; 
        display: block; 
        top: -1em;
        left: 0em;
        text-align: center;
        width: 90%; 

    }
    .pagePropGrip {
        font-size: 1em; 
        position: relative; 
        display: block; 
        top: -1em;
        left: 0em;
        text-align: center;
        width: 90%; 
    }
    .layerPropGrip {
        font-size: 1em; 
        position: relative; 
        display: block; 
        top: -1em;
        left: 0em;
        text-align: center;
        width: 90%; 
    }
    .grid-rowheight {
        height: 5.5rem;
    }
    
}