:root {
    --vbg-background: var(--gs1-color-white, var(--gs1-white, #fff));
    --vbg-blue: var(--gs1-color-blue, var(--gs1-blue, #002c6c));
    --vbg-orange: var(--gs1-color-orange, var(--gs1-orange, #f26334));
    --vbg-bg: var(--gs1-color-ui-1, #f0f5fa);
    --vbg-border: var(--gs1-color-ui-3, #c4d7ed);
    --vbg-dark-gray: var(--gs1-dark-gray, #454545);
    --vbg-dark-medium-gray: #888b8d;
    --vbg-light-gray-shade: #d8d8d8;
    --vbg-link: var(--gs1-color-link-accessible, var(--gs1-color-link, var(--gs1-link, #008dbd)));
    --vbg-badge: var(--gs1-color-slate-accessible, var(--gs1-color-slate, var(--gs1-slate, #89aadb)));
    --vbg-key-type: var(--gs1-color-forest-accessible-dark-1, var(--gs1-color-forest-accessible, #008037));
}
.input-group .btn {padding: 0.375rem 0.75rem}
.form-group.field-gtin .input-group {max-width: 23em}
.form-group.field-gtin .input-group-btn button, #vbg-search .input-group-btn button {height: 2.5rem; font-size: 1rem}

.vbg-result .result-info {display: flex; align-items: center; flex-direction: column; gap: 0.5rem; border-left-width: 0.25rem; margin: 1.25rem 0}
.vbg-result .result-info img {max-width: 2.5rem; width: 50%}
.vbg-result .result-info p {margin: 0}
.vbg-result .alert p {margin-bottom: 0.5rem}
.vbg-result .alert p:last-child {margin-bottom: 0}

.vbg-search {margin: 1rem 0}
.v-search .product-info .content-module-wrapper {margin-bottom: 1.125rem; border-top: none}

.v-search .product-info .content-module .img {margin-bottom: 0.5rem}
.v-search .product-info .content-module .img img {margin: auto; vertical-align: middle}
.v-search .product-info .img-responsive {object-fit: contain}
.v-search .product-info .img img {cursor: pointer; -webkit-transition: 0.3s; transition: 0.3s}
.v-search .product-info .img img:hover {opacity: .75}

.v-search .product-info h3, .v-search .company-info h3, .v-search .gln-info h3 {font-weight: 400; color: var(--vbg-blue)}  /* TODO: review */

.vbg-result table.data {margin: 0; table-layout: fixed}
.vbg-result table.data tr {border-bottom: 1px solid var(--vbg-light-gray-shade)}
.vbg-result table.data tr:last-of-type {border-bottom: none}
.vbg-result table.data th, .vbg-result table.data td {display: block; font-size: 0.875rem; border: none; line-height: 1.25}

.vbg-result table.data th {color: var(--vbg-dark-gray); font-weight: normal; padding: 0.4rem 0.4rem 0.125rem}
.vbg-result table.data td {padding: 0.4rem 0.4rem 0.4rem 1.25rem}
.vbg-result table.data td, table.data td a {color: var(--vbg-blue); font-weight: bold}
.vbg-result table.data td a:hover {color: var(--vbg-link)}
.vbg-result table td.unknown {color: var(--vbg-dark-medium-gray); filter: brightness(85%); font-weight: normal}
.vbg-result table.data td li {border-bottom: none; line-height: 1.2}
.vbg-result table.data td ul li:first-child {padding-top: 0}
.vbg-result .info-data {margin-top: 1.25rem}
.vbg-result .info-data p {color: var(--vbg-dark-medium-gray); font-size: 0.75rem; font-weight: 300; line-height: 1.125rem}

.vbg-result ul.target-markets {list-style: none; padding-left: 0}

@media (min-width: 768px) {
  .vbg-result .result-info {flex-direction: row}
  .vbg-result .result-info img {width: 100%}
}
@media (min-width: 992px) {
  .vbg-result table.data th, .vbg-result table.data td {display: table-cell; line-height: 1rem; padding: 0.625rem 0}
  .vbg-result table.data th {width: 14rem; padding-right: 1.25rem}
  .vbg-result .product-info .no-img th {max-width: 19rem; width: 30%}
}

.vbg-result .i18n-items {list-style: none; padding-left: 0; margin-bottom: 0}
.vbg-result .i18n-item {display: flex; align-items: center; column-gap: 0.25rem;}
.vbg-result .i18n-items > li:last-of-type {margin-bottom: 0}
.vbg-result .image-url .i18n-item span {white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
.vbg-result .i18n-item .badge {display: inline-block; text-align: center; background-color: var(--vbg-badge); width: 3rem; padding: 2px 0; margin: 0}
.vbg-result .i18n-item span + span {flex: 1 1 50%}
.vbg-result .badge-gpc {background-color: var(--vbg-orange); color: var(--gs1-white, #fff)}
.vbg-result .badge-key-type {background-color: var(--vbg-key-type); color: var(--gs1-color-forest-accessible-light-1, var(--gs1-white, #fff)); padding: 2px 10px; margin-right: 0.25rem}

.img-modal .modal-dialog {width: 95vh}
.img-modal .modal-content {background: transparent; -webkit-box-shadow: none; box-shadow: none; border: none}
.img-modal .modal-body {padding: 0}
.img-modal img {cursor: default; margin: auto; max-height: 100vh}
.modal-backdrop.in {opacity: 0.85}
#detail-modal .modal-dialog {max-width: 800px}
#detail-modal .modal-title {font-weight: 700}

.vbg-result code {background: none; color: var(--vbg-dark-medium-gray)}  /* TODO: review */
small.description {color: var(--vbg-dark-medium-gray)}

.errorlist li {font-size: 0.75rem; color: var(--bs-danger)}  /* TODO: review */

#vbg-search {margin: 0; background-color: var(--vbg-background)}
#vbg-search #id_search_type {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 16px;
    list-style: none;
    margin: 10px 0;
    padding-left: 0;
    padding-bottom: calc(0.75rem + 2.4vw);
}
#vbg-search #id_search_type li {
    position: relative;
    display: block;
    border: none;
    padding: 0;
    margin-bottom: 0;
    line-height: 1.5;
    flex-basis: 100%;
}
#vbg-search #id_search_type li.active {position: relative}
#vbg-search #id_search_type li input {opacity: 0; position: absolute; top: 4px; left: 4px; margin: 0}
#vbg-search #id_search_type li label {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: var(--vbg-bg);
    border: 1px solid var(--vbg-border);
    border-radius: 4px;
    padding: 1.125em;
    height: 100%;
    width: 100%;
    cursor: pointer;
    margin-bottom: 0
}
#vbg-search #id_search_type li.active label {background: var(--vbg-blue)}
#vbg-search #id_search_type li label span {color: var(--vbg-blue)}
#vbg-search #id_search_type li label .title {
    font-weight: 400;
    font-size: calc(15.2px + 0.4vw);
    line-height: 1.2;
    margin: 0.125rem 0;
    white-space: pre-wrap;
    word-break: break-word;
    word-wrap: break-word;
}
#vbg-search #id_search_type li label .description {
    font-weight: 300;
    font-size: 0.75em!important;
    margin-bottom: 0;
    display: none;
}
#vbg-search #id_search_type li.active label span {color: var(--vbg-background)}
#vbg-search #id_search_type li label img {width: fit-content}
#vbg-search #id_search_type li.active label img {
    filter: invert(82%) sepia(57%) saturate(840%) hue-rotate(325deg) brightness(94%) contrast(111%);
}
#vbg-search #search-filters .filter-option {display: none}
#vbg-search #search-filters .filter-option.active {display: block}

#vbg-search #search-licensee .filters .form-control, #vbg-search #search-licensee .filters .form-select {margin-bottom: 0.75rem}
#vbg-search #search-licensee .optional-fields-toggle label:before {
    content: " ";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("../img/icon-plus.9ee188e03c0d.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    vertical-align: bottom;
}
#vbg-search #search-licensee .full .optional-fields-toggle label:before {
    background-image: url("../img/icon-minus.add4ebc296cd.svg");
}
#vbg-search #search-licensee .optional-fields-toggle {position: relative; margin-left: -20px; font-size: 0.875em}
#vbg-search #search-licensee .optional-fields-toggle input {opacity: 0; position: absolute; left: -1em}
#vbg-search fieldset .optional-fields {display: none}
#vbg-search fieldset.full .optional-fields {display: block}

#vbg-search fieldset input {padding-left: 40px; background: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.75 0c5.4 0 9.75 4.35 9.75 9.75a9.72 9.72 0 01-1.883 5.774l.083.076 5.85 5.85c.6.6.6 1.5 0 2.1-.6.6-1.5.6-2.1 0L15.6 17.7l-.073-.086A9.72 9.72 0 019.75 19.5 9.73 9.73 0 010 9.75C0 4.35 4.35 0 9.75 0zm0 1.5c-4.5 0-8.25 3.75-8.25 8.25S5.25 18 9.75 18 18 14.25 18 9.75c0-4.417-3.612-8.11-8-8.246L9.75 1.5z' fill='%23414345' fill-rule='evenodd'/%3E%3C/svg%3E") no-repeat 12px center / 16px}

.vbg-result {margin-top: 1rem}
.vbg-result .nav-tabs .tab-title {display: none}

.vbg-result .card.result-detail {border: none; background-color: transparent}
.vbg-result .card.result-detail > .card-body {padding: 0}
.vbg-result .card.result-detail .card-body .tab-pane {background-color: var(--vbg-background); border: 1px solid; border-color: var(--bs-border-color); border-top: none}
.vbg-result .card.result-detail .card-body .tab-pane {padding: calc(1.2rem + 2.4vw)}
.vbg-result .card.result-detail .card {border: none; box-shadow: none}
.vbg-result .card.result-detail .card.title {font-size: calc(1.0214285714rem + 0.9714285714vw)}

#lookup-error {margin-top: 0.6rem}

.vbg-result .gln-info h5 {font-size: 1rem; font-weight: 700; margin: 1rem 0; border-bottom: none!important}

.vbg-result .licensee-info table .more-info {display: none}
.vbg-result .licensee-info table td.company-name {color: var(--vbg-link); text-transform: uppercase; cursor: pointer}
#detail-modal .modal-footer {text-align: right}

.vbg-result .accordion-header {margin-top: 0}
.vbg-result .accordion-button:focus {box-shadow: none}

.gln-info table.company tbody th {width: 30%}

.g-recaptcha {margin-top: 1rem}

@media screen and (min-width: 768px) {
    .vbg-result .nav-tabs .tab-title {display: block}
    .vbg-result .nav-tabs .tab-title-short {display: none}
    #vbg-search #id_search_type li label {
        align-items: flex-start;
        flex-direction: column;
    }
    #vbg-search #id_search_type li.active label {
        clip-path: polygon(0 0,0 100%,100% 100%,100% 25%,75% 0);
    }
    #vbg-search #id_search_type li label .description {display: block}
}
@media (min-width: 1200px) {
    #vbg-search {padding: 2.375rem 3rem}
    #vbg-search #id_search_type {padding-bottom: 2rem}
    #vbg-search #id_search_type li label .title {font-size: 1.25em}
    .vbg-result .card-title {font-size: 1.75rem}
    .vbg-result .card.result-detail .card-body .tab-pane {padding: 3rem}
}

@media only screen and (min-width: 768px) {
    #vbg-search #id_search_type {flex-direction: row; justify-content: space-between}
}
@media (min-width: 992px) {
    #vbg-search #id_search_type li.active::before {
        content: "";
        position: absolute;
        bottom: -25px;
        left: 0;
        right: 0;
        width: 100%;
        height: 20px;
        background-image: url("data:image/svg+xml,%3Csvg width='224' height='20' viewBox='0 0 224 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 5.20923H224' stroke='%23C4D7ED' stroke-width='1.75686'/%3E%3Cpath d='M111.086 13.2561L105.271 6.74622C104.585 5.98028 105.142 4.77734 106.184 4.77734H117.815C118.048 4.77715 118.277 4.84276 118.473 4.96632C118.669 5.08989 118.824 5.26616 118.92 5.47404C119.017 5.68192 119.05 5.91259 119.016 6.13843C118.982 6.36427 118.882 6.5757 118.728 6.74741L112.913 13.2549C112.799 13.3825 112.658 13.4847 112.501 13.5547C112.344 13.6248 112.173 13.661 112 13.661C111.827 13.661 111.656 13.6248 111.498 13.5547C111.341 13.4847 111.2 13.3825 111.086 13.2549V13.2561Z' fill='%23C4D7ED'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: cover;
    }
}
@media (orientation: portrait) {
  .img-modal .modal-dialog {width: 95vw}
}