html,body { height: 100%!important; }
body { background-image: url("../img/page_background_lighter.png"); background-size:cover; }
.btn-shape {  }
#color_p span { text-transform: capitalize; }
#color_p span:last-child { margin-right: 10px; }
#color_p span{ font-weight: normal!important; }
#color_p span.active{ font-weight: bold!important; }
.stones-status-dots { font-size: 0.5rem; margin-left: -4px; }
.stone-table-res { width: 100%; }
.stone-table-res td { width: 25%; text-align: center; }
.stones-checkbox-container { padding-top: 23px; }
.index .card-stones-container { cursor: pointer; }
.transparent-iframe { width: 100%; border:0px; min-height: 600px;}
.index .col-sm-6 p.text-uppercase { margin-bottom: 0.5rem; }
:root{--blue:#1e4a89;}
a { color: #1e4a89; }

.btn {
    border-width:2px;
}

.btn-primary, .bg-primary, .characteristics-container span.input-group-text {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e4a89+0,85ace7+27,1e4a89+79,85ace7+100 */
    background: #1e4a89; /* Old browsers */
    background: -moz-linear-gradient(45deg,  #1e4a89 0%, #85ace7 27%, #1e4a89 79%, #85ace7 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(45deg,  #1e4a89 0%,#85ace7 27%,#1e4a89 79%,#85ace7 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(45deg,  #1e4a89 0%,#85ace7 27%,#1e4a89 79%,#85ace7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e4a89', endColorstr='#85ace7',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    border-color: #1e4a89;
}

.min-h-allegati { min-height: 300px; display: flex; justify-content: center; align-items: center; }
.btn-primary:not([disabled]):not(.disabled).active, .btn-primary:not([disabled]):not(.disabled):active, .show>.btn-primary.dropdown-toggle { background-color: #85ace7; border-color: #85ace7; }
.btn-secondary, .btn-secondary:hover { border-color: #1e4a89; }
.btn-light, .btn-light:hover { border-color: #1e4a89; }
.btn-light img { filter: invert(100%); }
.btn-light:not([disabled]):not(.disabled).active, .btn-light:not([disabled]):not(.disabled):active, .show>.btn-light.dropdown-toggle { border-color: #1e4a89; }
.btn-img { height: 30px; display: block; margin: 0 auto; }
.btn-shape { padding: 0; padding-top:8px; line-height: 1.5rem; width: 66px; height: 66px; overflow: hidden; text-transform: uppercase; font-size: 0.6rem; text-align: center; margin-bottom: 5px; }
.btn-carat { margin-bottom: 5px; margin-left:2.5px; margin-right:2.5px; }
.btn-color { margin-bottom: 5px; }
.btn-color { margin-left:2.5px; margin-right:2.5px; text-transform: uppercase;}
.btn-clarity { margin-right:2.5px; margin-bottom: 5px; }
.proportions_clarity_cut-parent label { width: 50px; }
.btn-proportions_clarity_cut.btn.btn-light, .btn-proportions_clarity_pol.btn.btn-light, .btn-proportions_clarity_sym.btn.btn-light { margin-right:2.5px; margin-bottom: 5px; }
.btn-proportions_clarity_cut.btn.btn-primary, .btn-proportions_clarity_pol.btn.btn-primary, .btn-proportions_clarity_sym.btn.btn-primary { margin-right:2.5px; margin-bottom: 5px; }
.proportions_clarity_cut-parent .btn-preset { margin-left:10px; margin-bottom: 5px; width: 65px; }
.btn-fluorescence { margin-right:2.5px; margin-bottom: 5px; text-transform: uppercase; }
.btn-availability_status { text-transform: uppercase; }
.btn-certificate { margin-right:2.5px; margin-bottom: 5px; text-transform: uppercase; }
.btn-carat, .btn-clarity { text-transform: uppercase; }
.search-result-button { display: flex; }
.search-result-button .btn, .stone-result-button .btn, .nav-diamond-detail li { 
    margin-bottom: 5px; 
    margin-left:2.5px; 
    margin-right:2.5px; 
    flex:1; 
    border-color: transparent;
    background-color: transparent;
    color: #1e4a89;
}
.nav-diamond-detail li a { color: #000000!important; text-align: center; }
.stone-result-button  { display: flex; }
.search-result-button .btn i, .stone-result-button .btn i, .nav-diamond-detail li a i { display: block; }
.btn-transparent { background-color: transparent; border-color: transparent; color: white;}

.characteristics-container .input-group-prepend { width: 50%; }
.characteristics-container span.input-group-text { width: 100%; color: white; text-align: left;}

.badges_container { display: flex; justify-content: center; align-items: center; height: 100%; flex-flow: column; }
.badges_container img { width: 100%; }

.badges_container a { display: block; width: 100%; text-align: center; }

#add_carat_row_button, #fancy_color_button, #white_color_button { cursor: pointer; }

.btn-link-dark {
    font-weight: 700;
    color: #212529;
    background-color: transparent;
    text-decoration: none;
}

.btn-link-dark:hover { text-decoration: none; }


#stone_results_inner {
    height: calc(100% - 150px);
    overflow: scroll;
}

#stone_results_inner {
    font-size: 0.9rem;
}

#stone_results_inner .card-body {
    padding: 0.5rem;
}

#stone_results_inner .card-body > .row {
    margin: 0;
}

@media (min-width: 992px)
{
    .modal-lg, .modal-xl {
        max-width: 800px;
    }
}

@media (min-width: 1200px)
{
    .modal-xl {
        max-width: 1140px;
    }
}

#modalDetailStone .modal-content {
    background: transparent;
    border: 0;
}

#modalDetailStone .modal-dialog {
    margin-top: -0.1vh;
}

#modalDetailStone iframe {
    height: 90vh;
    border: 0;
}

#modalDetailStone .close {
    color: #fff;
    text-shadow: 0 1px 0 #000;
}

#modalOrderStone .btn-light {
    border-color: transparent;
    background: transparent;
}

#modalOrderStone .btn-light.active {
    color: #1e4a89;
    border-color: #1e4a89;
}

#stoneResultsLegends div {
    text-align: center;
    font-size: 0.6rem;
}

#cartCounter {
    position: relative;
    display: none;
}

.numberCircle {
    background: #28a745;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    color: #ffffff;
    display: inline-block;
    font-weight: bold;
    line-height: 1em;
    text-align: center;
    font-size: 0.5em;
    padding: 0.5em;
    width: 2em;

    position: absolute;
    left: -17px;
    top: 2px;
}

#nav-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    /* Set the fixed height of the footer here */
    height: 60px;
    line-height: 60px; /* Vertically center the text there */
}

.index { overflow: hidden; }
.index .container-main { overflow: hidden; height: calc(100% - 155px)!important; }
.container-main > .row { height: 100%!important; }
#stone_filters { overflow: scroll; height: 100%!important; }

.btn-circle { 
    width: 70px; 
    height: 70px; 
    padding: 10px 16px; 
    border-radius: 35px; 
    font-size: 12px; 
    text-align: center; 
} 

#advancedSearchButton { margin-bottom: 20px; color: #1e4a89; }
#advancedSearchButton i { font-size: 1.5rem; }
#nav-footer p { color: white; margin: 0; }

#cart_results { height: 100%; }

#reportTable {
    width: 100%;
    color: white;
    text-transform: uppercase;
}

#reportTable td {
    width: 20%;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1rem;
}

.characteristics-container { text-transform: uppercase; }

.login, .registration { overflow: hidden; }

.searchOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000d4;
    z-index: 999;
    display: none;
}

.shake {
/* Start the shake animation and make the animation last for 0.5 seconds */
animation: shake 0.5s;

/* When the animation is finished, start again */
animation-iteration-count: infinite;
}
  
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

#cart_results {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
@media (min-width: 576px) {
    #cart_results {
        max-width: 540px;
    }
}
@media (min-width: 768px) {
    #cart_results {
        max-width: 720px;
    }
}
@media (min-width: 992px) {
    #cart_results {
        max-width: 960px;
    }
}
@media (min-width: 1200px)
{
    #cart_results {
        max-width: 1140px;
    }
}

.close {
    opacity: 1!important;
}


@media (min-width: 992px) { 
    .container-main{
        zoom: 80%;
    }
}