﻿/* GLOBAL VARIABLES */
:root {
    --new-vsa-blue-background: #192F43;
    --new-vsa-light-blue-background: #17ADD0;
}


/* PRINTING, NO PRINTING */
@media print
{
    .no-print{
        display:none !important;
    }

    .print-container{
    }

    html, body, .view-label {
        height: auto !important;
        font-size: 12pt !important; /* changing to 10pt has no impact */
    }

    h1 {
        font-size: 18pt !important;
        font-weight: bold !important;
    }

    h2 {
        font-size: 16pt !important;
        font-weight: bold !important;
        border-bottom: 2px solid #000000;
        margin-bottom: 0;
    }

    h3 {
        font-size: 13pt !important;
        font-weight: bold !important;
        margin-top: .5em;
    }

    .col-md-6{
    }

    @page {
        size: A4 portrait !important;
    }
}

/* MARGINS */
.mb-5{
    margin-bottom: .5em;
}
.mb1{
    margin-bottom: 1em;
}

/* TABLE HEADERS */
/* BROUGHT OVER FROM V 4.6.2 */
.table .thead-dark th {
    color: #fff !important;
    background-color: #343a40 !important;
    border-color: #454d55 !important;
}

.list-group-item-success {
    background-color: #002C42 !important;
    color: #FFFFFF !important;
    border: 1px solid #DDDDDD !important;
}
.list-group-item.active {
    background-color: #13ADD0 !important;
    color: #FFFFFF !important;
    border: 1px solid #DDDDDD !important;
}

.alert-primary {
    background-color: #CCE5FF;
    border-color: #B8DAFF;
    color: #004085;
}


.vsa-home h4 {
    color: #48a9a6
}

.vsa-home .btn-lg {
    padding: 15px 20px;
    width: 50%;
}

.vsa-home .vsa-section:hover {
    text-decoration: none;
}

.vsa-home .vsa-imageround img {
    width: 300px;
    height: 300px;
    border-radius: 150px;
}

.vsa-imageround img {
    overflow: hidden;
    width: 260px;
    height: 260px;
    border-radius: 200px;
}

.vsa-content-page .btn-lg {
    margin-bottom: 20px;
    padding: 15px 20px;
}


.vsa-subheading {
    background-color: #000000;
    height: 260px;
}

.vsa-industry .vsa-subheading {
    background-color: #1a1a73;
}

.vsa-industry .btn-lg {
    background-color: #1a1a73;
}

.vsa-industry .vsa-featuredlinks h3 {
    color: #1a1a73;
}

.vsa-industry .vsa-section .form-control {
    box-shadow: 0 0 1px #ffffff, 0 0 5px #1a1a73;
}

.vsa-home .vsa-industry .vsa-imageround img {
    border: 10px solid #1a1a73;
}

.vsa-home .vsa-imageround {
    padding-top: 60px;
}

.vsa-home .vsa-consumer .vsa-imageround img {
    border: 10px solid #3e095d;
}

.vsa-consumer .vsa-subheading {
    background-color: #3e095d;
}

.vsa-consumer .btn-lg {
    background-color: #3e095d;
}

.vsa-consumer .vsa-featuredlinks h3 {
    color: #3e095d;
}

.vsa-consumer .vsa-section .form-control {
    box-shadow: 0 0 1px #ffffff, 0 0 5px #3e095d;
}

.vsa-subheading .vsa-imageround {
    float: right;
}

.vsa-subheading h1, .vsa-subheading h2, .vsa-subheading h3, .vsa-subheading h4, .vsa-subheading h5 {
    color: #ffffff;
}

.vsa-subheading h1 {
    margin-top: 50px;
}

.vsa-header {
    padding-top: 20px;
    border: none;
    color: #FFFFFF;
    margin-bottom: 0px;
    background-color: var(--new-vsa-blue-background);
}

.vsa-header .weblink > li > a {
    color: #000000;
}

.vsa-footer {
    background-color: #292929;
    color: #ffffff;
    padding-top: 20px;
    height: 120px;
    width: 100%;
    margin-top: 50px;
}

.vsa-footer h2, .vsa-footer > h2 > a, .vsa-footer h2 a, .vsa-footer h2 a:hover{
    color: var(--new-vsa-light-blue-background) !important;
    text-transform: uppercase;
    font-size: 34px !important;
    text-decoration: none !important;
}

.vsa-footer .h6, .vsa-footer h6 {
    color: #ffffff;
}

.vsa-footer a{
    color: #ffffff !important;
    font-size: 20px;
    text-decoration: none;
}

.icon-white{
    color: #FFFFFF !important;
}

.vsa-social {
    width: 150px;
    height: 150px;
    /*border-radius: 75px;*/
    /*background-color: #ffffff;*/
    color: #000000;
    position: absolute;
    top: -35px;
    right: 55px;
    color: grey;
    padding-top: 40px;
}

    .vsa-social img {
        width: 40px;
    }

.vsa-section {
    padding-top: 20px;
}

    .vsa-section td {
        padding-left: 5px;
    }

    .vsa-section th {
        padding-left: 5px;
    }

    .vsa-section thead {
        padding-left: 5px;
    }

        .vsa-section thead tr {
            height: 40px;
        }

    .vsa-section h1 .vsa-section h2 .vsa-section h3 .vsa-section h4 .vsa-section h5 {
        padding-top: 0px;
    }

.vsa-childsection {
    margin-bottom: 10px;
}

    .vsa-childsection .btn-lg {
        text-align: left;
        margin-top: 20px;
        margin-bottom: 0px;
    }

    .vsa-childsection .btn, .vsa-childsection .panel-title {
        white-space: inherit;
    }

    .vsa-childsection .well {
        padding-top: 5px;
    }

.well h4 {
    padding-top: 15px;
}

.navbar-inverse {
    background-color: var(--new-vsa-blue-background) !important;
    color: #FFFFFF !important;
    /*background-color: #ffffff;*/
    border-color: none;
}

.vsa-header .navbar-inverse .navbar-nav > li > a {
    color: #FFFFFF !important;
}

.vsa-section .breadcrumb {
    margin-bottom: 0px;
}

.vsa-section .xrm-editable-adx_weblinkset {
    margin-top: 20px;
}

.breadcrumb > li > a {
    color: #555555;
}

.jumbotron h1, .jumbotron h2, .jumbotron h3, .jumbotron h4, .jumbotron h5 {
    color: #333333;
}

.jumbotron .btn-lg {
    margin-top: 15px;
}

.btn-primary:active, .btn-primary:focus {
    text-decoration: none;
}

.vsa-featuredlinks .img-responsive {
    width: 100%;
}

.vsa-featuredlinks .vsa-childsection {
    margin-bottom: 40px;
}

.navbar-nav > li > .dropdown-menu {
    background-color: var(--new-vsa-blue-background) !important;
    color: #FFFFFF !important;
}

/* REMOVE LEFT MARGIN ON LINKS IN TOP NAV */
.dropdown-menu > li > a{
    margin-left: 0em !important;
    color: #FFFFFF !important;
}

.dropdown-menu > li > a:active,
.dropdown-menu > li > a:hover {
    background-color: var(--new-vsa-light-blue-background) !important;
    color: #FFFFFF !important;
}

/* List pages, details drop down links */
li > a.details-link, li > a.details-link:hover, li > a.details-link:active,
li > a.edit-link, li > a.edit-link:hover, li > a.edit-link:active{
    background-color: var(--new-vsa-light-blue-background) !important;
    color: #FFFFFF !important;
}

@media (max-width: 991px) {
    #navbar > .row > .pull-right {
        float: none !important;
    }

    .vsa-subheading {
        height: auto;
    }

        .vsa-subheading h1 {
            margin-top: 20px;
        }

        .vsa-subheading h3, .vsa-subheading h2 {
            margin-bottom: 20px;
        }

    .vsa-section img {
        margin-bottom: 10px;
    }

    .navbar-brand img {
        height: 50px !important;
    }

    .navbar-brand {
        padding-top: 0px !important;
    }

    .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
        border-color: #e6e6e6;
    }

    .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
        background-color: #e6e6e6;
    }

    .navbar-collapse {
        margin-top: 40px;
        padding-top: 20px;
        background-color: white;
        box-shadow: 0 0 20px 0 #777777;
    }
}

@media (max-width: 767px) {
    .vsa-social {
        display: none;
    }

    .vsa-section {
        display: block;
        width: 100%;
    }

    .vsa-footer {
        position: relative;
    }
}

@media (max-width: 425px) {


    .vsa-subheading h1 {
        font-size: 30px;
    }

    .vsa-subheading h3, .vsa-subheading h2 {
        font-size: 18px;
    }

    .vsa-childsection .btn-lg {
        font-size: 16px;
    }

    .vsa-childsection .panel-title {
        font-size: 16px;
    }

    .vsa-section .btn-lg {
        font-size: 16px;
    }

    .vsa-section .panel-title {
        font-size: 16px;
    }

    .vsa-section {
        font-size: 14px;
    }
}

/* CUSTOM CSS Encore */
/* ********************************************************************************************* */

table[role="grid"] thead tr {
    background-color: #1A1A73;
}

    table[role="grid"] thead tr th, table[role="grid"] thead tr th a, table[role="grid"] thead tr th a:visited, table[role="grid"] thead tr th a:active {
        color: #FFFFFF;
    }

.ui-widget-content a {
    color: #2f5fef !important;
}

label {
    color: #666 !important;
    font-weight: bold !important;
    font-size: 15px !important;
}

#search-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    /*border: 3px solid #000000;*/
    max-width: 900px;
    margin: 0 auto;
}

    #search-container > * {
        flex: 1 100%;
    }

.vsa-section-heading {
    height: 40px;
    text-align: center;
    background-color: #1A1A73;
}

.vsa-sub-section-heading {
    height: 40px;
    text-align: center;
    background-color: #70645C;
}

.vsa-section-heading h3, .vsa-sub-section-heading h3 {
    color: #FFFFFF;
    margin: .1em auto 1em auto;
    font-weight: bold;
    padding-top: .25em;
}

#search-fields-container {
    border: 1px solid #808080;
    padding: 1.5em;
}

/*.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    margin: .5em auto;
}

.column {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
}

.column-left {
    text-align: right;
    padding-right: 1em;
}
*/

#submit-button {
    background-color: #1A1A73;
    color: #FFFFFF;
    width: 200px;
}

#submit-row {
    display: flex;
}

.submit {
    margin: auto;
}

.required-field {
    font-weight: bold;
    color: #660000;
}

#details-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
}

.details-left, .details-right {
    flex: 1;
    width: 48%;
    padding-left: .25em;
}

.details-left label, .details-right label {
    padding: 0em;
}

#search-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    margin-top: 1em;
}

.vsa-button {
    background-color: #1A1A73;
    color: #FFFFFF;
}

    .vsa-button:hover {
        color: #FFFFFF;
    }

button.spaced {
    margin-right: 2em;
}

/* SPINNER/LOADER */
#vsa-spinner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Optional: Add a semi-transparent background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Ensure the spinner is on top of other elements */
  }
  
  .vsa-loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

/*  ACCORDION */
#accordion {
}

    #accordion h3 {
        background-color: #1A1A73;
        color: #FFFFFF;
    }

        #accordion h3 div, #accordion h3 div p {
        }

.accordion-row {
    /*display: flex;*/
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
}

.accordion-left, .accordion-right {
    display: inline-block;
    flex: 1;
    padding-left: .25em;
}

.accordion-left {
    width: 20%;
}

.accordion-right {
    width: 76%;
}

    .accordion-left label, .accordion-right label {
        padding: 0em;
    }

h4.accordion-section {
    font-weight: bold;
    border-bottom: 2px solid #000000;
}

.iframe-modal-div {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    /*width: 100%;
    height: 100%;*/
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.iframe-modal-iframe {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

/* ********************************************************************************************* */

/* STAR RATING */

.star-me{
    display: inline-block;
    width: 25px;
    background-color: #E8E8E8;
    color: #E8E8E8;
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.25l-6.188 3.75 1.641-7.031-5.438-4.734 7.172-0.609 2.813-6.609 2.813 6.609 7.172 0.609-5.438 4.734 1.641 7.031z"/></svg>');
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.25l-6.188 3.75 1.641-7.031-5.438-4.734 7.172-0.609 2.813-6.609 2.813 6.609 7.172 0.609-5.438 4.734 1.641 7.031z"/></svg>');
    background-repeat: no-repeat;
}

.hidden-rating{
    visibility: hidden;
    height: 1px;
    margin: 0;
    padding: 0;
}

.rating {
    --dir: right;
    --fill: green;
    --fillbg: rgba(100, 100, 100, 0.15);
    --star: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.25l-6.188 3.75 1.641-7.031-5.438-4.734 7.172-0.609 2.813-6.609 2.813 6.609 7.172 0.609-5.438 4.734 1.641 7.031z"/></svg>');
    --stars: 5;
    --starsize: 3rem;
    --symbol: var(--star);
    --value: 1;
    --w: calc(var(--stars) * var(--starsize));
    --x: calc(100% * (var(--value) / var(--stars)));
    block-size: var(--starsize);
    inline-size: var(--w);
    position: relative;
    touch-action: manipulation;
    -webkit-appearance: none;
}

input.rating[type="range"] {
    width: auto !important;
    /*width: calc(5 * var(--starsize)) !important;*/
}

[dir="rtl"] .rating {
    --dir: left;
}

.rating::-moz-range-track {
    background: linear-gradient(to var(--dir), var(--fill) 0 var(--x), var(--fillbg) 0 var(--x));
    block-size: 100%;
    mask: repeat left center/var(--starsize) var(--symbol);
}

.rating::-webkit-slider-runnable-track {
    background: linear-gradient(to var(--dir), var(--fill) 0 var(--x), var(--fillbg) 0 var(--x));
    block-size: 100%;
    mask: repeat left center/var(--starsize) var(--symbol);
    -webkit-mask: repeat left center/var(--starsize) var(--symbol);
}

.rating::-moz-range-thumb {
    height: var(--starsize);
    opacity: 0;
    width: var(--starsize);
}

.rating::-webkit-slider-thumb {
    height: var(--starsize);
    opacity: 0;
    width: var(--starsize);
    -webkit-appearance: none;
}

.rating, .rating-label {
    display: block;
    font-family: ui-sans-serif, system-ui, sans-serif;
}

.rating-label {
    margin-block-end: 1rem;
}

.rating--nojs::-moz-range-track {
    background: var(--fillbg);
}

.rating--nojs::-moz-range-progress {
    background: var(--fill);
    block-size: 100%;
    mask: repeat left center/var(--starsize) var(--star);
}

.rating--nojs::-webkit-slider-runnable-track {
    background: var(--fillbg);
}

.rating--nojs::-webkit-slider-thumb {
    background-color: var(--fill);
    box-shadow: calc(0rem - var(--w)) 0 0 var(--w) var(--fill);
    opacity: 1;
    width: 1px;
}

[dir="rtl"] .rating--nojs::-webkit-slider-thumb {
    box-shadow: var(--w) 0 0 var(--w) var(--fill);
}

/* ********************************************************************************************* */

