/******************************************************************************************************** 
* THESE ARE THE MAIN CLASSES FOR SHOWING THE MODEL VIEWER
* 1) scene-container: Id of the div that the model will be injected into
* 2) placeholder: Id of the div that will act as a stand-in before the model is loaded
* 3) placeholder-action: Id of the div that has a play button (with font awesome image) to trigger loading of the model
*********************************************************************************************************/
:root{
    --line-height: 26px;
    --font-size: 16px;  
    --sci-primary: #282660;  /*#0A3B5C*/
    --sci-primary-rgb: 40, 38, 96;  /*10, 59, 92*/
    --sci-secondary: #26ACE2;
    --sci-secondary-rgb: 38, 172, 226;
    --sci-highlight:#AAD349;
    --sci-highlight-rgb: 170, 211, 73;
    --sci-background-opacity: 0.3;
}

#viewer {
    position: absolute;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(var(--sci-primary-rgb), 0.2);
}

#viewer.splash{
    background-image: url(/img/scinomix-two-tone-blue.svg);
    background-repeat: no-repeat;
    background-size: 50%;
    background-position: center;
}

#selector{
    background-color: var(--sci-primary);
    /* background: var(--sci-primary) linear-gradient(to bottom right, rgba(255,255,255,0.0) 25%, var(--sci-secondary) 100%) */
}

#selectorLabel .btn-close{
    margin-left: -1.25em !important;
}

#selector h5{
    text-align: center;
    width: 100%;        
    border-bottom: solid 2px var(--sci-secondary);
    line-height: 2em;
}

.card-list h4 {
    font-size: 1rem;
    background-color: var(--sci-secondary);
    color: white;
    text-align: center;
    margin-left: calc(var(--bs-offcanvas-padding-y)* -1);
    margin-right: calc(var(--bs-offcanvas-padding-y)* -1);
}

div.card{
    border-radius: 3px;
    overflow: hidden;
    background-color: #f7f7f7;
    margin-bottom: 16px;
    border-width: 0px;
}

div.card:has(.btn.disabled){
    opacity:0.5
}

div.card .thumbnail{
    position: relative;
    overflow: hidden;
    text-align: center;
    padding-top: 6px;
}

div.card .thumbnail img{
    max-width: 250px;
    max-height: 250px;
}

div.card a{
    color: var(--sci-primary);
    text-decoration: none;
    border: 0px;
}

div.card .title{
    padding: 8px 12px 4px;
    font-size: calc(var(--font-size));
    font-weight: 500;
    line-height: calc(var(--line-height));
    text-align: center;
    border-top: solid 1px var(--sci-primary);
}

#controls{
    position: fixed;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
}

#controls a{
    background-color: rgb(var(--sci-primary-rgb)) ;
    border-radius:  0px var(--bs-border-radius) var(--bs-border-radius) 0px !important;
    border-left: none;
    padding: 0.5rem;
}

#errorDisplay{
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 75%;
    top: 50%;
    overflow-wrap:break-word;
    transform: translateY(-50%);
}
.cachedInd{
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
}

.modelInd{
    position: absolute;
    right: 0.25rem;
    color: var(--bs-border-color);
    display: inline;
}

div.offcanvas-body hr{
    color: var(--sci-secondary);
    border-top: 2px solid;
    opacity: 1;
}

/* STYLES FOR MODAL DIALOG USING THE DIALOG HTML ELEMENT */
@media only screen and (min-width: 576px) {
    dialog{
        max-width: 500px;
    }
}

dialog[open]{
    animation: slide-up 0.4s ease-out;
}

dialog::backdrop{
    background-color: rgba(0,0,0,0.7);
}

.modal-footer button{
    width: 90px;
}

@keyframes slide-up{
    0%{
        opacity:0;
        transform: translate(0,15px);
    }
    100%{
        opacity: 1;
        transform: translate(0,0);
    }
}


/*STYLES FOR TOAST MESSAGES*/

.toast{
    --bs-toast-font-size: 1rem;
}

.toast .toast-body .indicator{
    height: 100%;
    padding-right: 1rem;
}

.toast.text-bg-success .toast-body .indicator:before{
    /*fa-check-circle*/
    content: "\f058";
}

.toast.text-bg-info .toast-body  .indicator:before{
    /*fa-info-circle*/
    content: "\f05a";
}

.toast.text-bg-warning .toast-body  .indicator:before{
    /*fa-warning*/
    content: "\f071";
}

.toast.text-bg-danger .toast-body  .indicator:before{
    /*fa-times-circle*/
    content: "\f057";
}

.btn-close{
    --bs-btn-close-focus-shadow:none;
}

@media only screen and (min-width: 576px) {
    .toast{
        --bs-toast-max-width: 700px;
    }
}

div.footer{
    .form-check{
        padding-left: 0px;
        margin-bottom: 0px;
    }

    .form-switch{
        padding-left: 0px;
    }

    .form-check-input{
        float: right;
        margin-top: -0.02rem;
    }

    .form-switch .form-check-input {
        margin-left: 0px;
    }

    .form-switch.form-switch-lg {
        margin-bottom: 1.5rem; /* JUST FOR STYLING PURPOSE */
    }
      
    .form-switch.form-switch-lg .form-check-input {
        height: 2rem;
        width: calc(3rem + 0.75rem);
        border-radius: 4rem;
        -webkit-border-radius: 4rem;
        -moz-border-radius: 4rem;
        -ms-border-radius: 4rem;
        -o-border-radius: 4rem;
    }
}

div.progress{
 height: 0.5em;
}

.progress-bar{
    background-color: var(--sci-highlight);
}