/* Instance surface defaults: one value per background variable (docs/design-system/instance-variables.md). A portal's
   custom CSS loads later and replaces any of them in its own :root. The rules keep the same value as their fallback
   for the pages that do not load this file (print previews). The band's own paint, --homepage-pushes-background, is
   not set here: by default it is a gradient where the rule paints a background and shade 500 where only a colour can
   apply. */
:root {
  --page-background: var(--gray-100);
  --homepage-bottom-background: var(--page-background);
  --homepage-pushes-hover-background: var(--primary-fill);
  --homepage-pushes-divider: rgba(var(--gray-0-rgb), 0.3);
  --panel-header-background: var(--primary-500);
  --header-top-bar-background: var(--gray-100);
  --header-official-icon-background: var(--primary-fill);
  --header-brand-bar-background: var(--gray-0);
  --header-menu-bar-background: var(--gray-50);
  --header-dropdown-background: var(--gray-0);
  --header-dropdown-hover-background: var(--gray-50);
  --procedures-panel-background: var(--gray-0);
  --procedures-panel-active-background: var(--gray-50);
}

/* Consistent cost-row spacing, including the legacy first/separator rows. */
.summary-cost .costostable tr.cost td,
.summary-cost .costostable tr.cost.separator td,
.summary-cost .costostable tr:nth-child(1).cost td {
    padding: 12px 0;
}

.summary-cost .costostable tr.cost td .costValue {
    line-height: 2em;
}

/* Also matched as `.nav > li > a`, whose specificity (0,1,2) beats a bare class,
   so name the anchor here rather than reaching for !important. */
.disclaimer-color,
.nav > li > a.disclaimer-color {
	display:none;
}
.diaporama .diaporama-slides img {
min-height: 450px;
}
footer img {
    max-height: 45px;
}

.navbar-header .navbar-brand:first-of-type img {
    -webkit-filter: none;
}

/* CSS Document */



.diaporama .diaporama-slides img {
   top: -40%;
}
#Menu {
    background-color: var(--gray-0);
}
header.navbar .navbar-brand {
    color: var(--ereg-link-color, var(--gray-1000));
}

.diaporama .diaporama-slides .slider-text.active {
    font-weight: var(--ereg-link-weight, 700);
    /*text-transform: uppercase;*/
}
.procedure-button {
    color: var(--button-current-color, var(--primary-500));
}
.cd-panel .cd-panel-container {
    background: var(--primary-500);
}
.homepage-pushes, .homepage-push {
    background: var(--homepage-pushes-background, linear-gradient(var(--primary-fill),var(--primary-fill-active)));
    background-color: var(--homepage-pushes-background, var(--primary-fill)); /* fallback where the gradient does not paint */
}
.homepage-push.push-link:hover {
    background: var(--homepage-pushes-hover-background, var(--primary-fill));
}
body a:hover {
    color: var(--ereg-link-color, var(--gray-900));
}
/* The white hover here was written for a blue panel this file used to force with
   !important. The panel is the product's now (site.css wins it on specificity), and it
   is white, so white-on-white made the label vanish on hover. site.css already ships a
   readable hover; leaving that alone is the fix. Do not restore a colour here without
   also owning the background it sits on. */

/*google translation related styles*/

/*div#google_translate_element {
    margin-top: 15px;
    margin-left: 20px;

}*/
.goog-te-menu-value {
    font-family: inherit;
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 1px;
}
/*end of google translation related styles*/

.link-footer-item.separator {
    font-weight: 500;
    text-transform: uppercase;
    border-top: 1px solid var(--gray-200);
    padding-top: 15px;
}


header.navbar .navbar-toggle:hover .icon-bar, header.navbar .navbar-toggle:focus .icon-bar, header.navbar .navbar-toggle:active .icon-bar {
    background: #e34b4a;
}

.transparent-bordered-button,
a.transparent-bordered-button {
    border: var(--button-border-shorthand, 1px solid var(--primary-500));
}
.bigmenu .sub-menu.active {
        background-color: var(--procedures-panel-active-background, var(--gray-50));
}

@media (max-width: 1024px) {
    div#google_translate_element {
    /*margin-left: 0px;*/
    border: none;
    margin-bottom: 20px;
}
}

.navbar-nav > li > a {
     margin-top: 6px;
}

header .second-nav ul.nav>li.active a {
    color: var(--ereg-link-color, var(--primary-700));
}
header .second-nav ul.nav>li:hover a {
    color: var(--ereg-link-color, var(--primary-700));
}

header .second-nav ul.nav>li.active {
    border-bottom: 3px solid var(--primary-700);
}
.diaporama {
    min-height: 500px;
}


#main-nav .navbar-nav.navbar-right>li>a {
    margin-top: 16px;
}

header.navbar .navbar-nav>li>.dropdown-menu>li .btn {
    background: var(--button-current-background, var(--primary-fill));
}

.btn-contrib:hover {
    color: var(--button-current-color, var(--gray-0));
}

.panel-top > div:first-child {
    flex: 1;
}
/*.main-search-fields .main-search-fields-submit {
    background: #1c88c2;
}*/

#Diapo .main-search-fields .main-search-fields-submit {
    color: var(--primary-fill-text);
    background: linear-gradient(var(--primary-fill),var(--primary-fill-active));
}
.filters-tabs .nav-tabs>li.active>a {
    border-top: none;
    background: linear-gradient(var(--primary-fill),var(--primary-fill-active));
}
.filters-tabs .nav-tabs>li>a.default-search {
    border-top: none;
}
.filters-tabs .nav-tabs>li.active>a:hover, .filters-tabs .nav-tabs>li.active>a:focus {
    background: var(--primary-fill);
    background-color: var(--primary-fill);
    border-top: none;
	color: var(--ereg-link-color, var(--primary-fill-text));
}
.filters-tabs .nav-tabs>li>a:focus, .filters-tabs .nav-tabs>li>a:hover {
    border-top: none;
    color: var(--ereg-link-color, var(--gray-0));
    background-color: rgba(var(--gray-1000-rgb), .6);
}
footer {
    padding: 5rem 0 4rem;
}
.bigmenu .sub-menu span {
    font-size: 1.7rem;
}

.footer-title { 
font-size: 10px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 20px; } 
footer img { 
margin-bottom:10px; 
} 

.filters-tabs .nav-tabs>li>a {
    border-top: none;
}
@media screen and (max-width: 640px) {
  #Footer div {
    text-align: center;
    margin-bottom: 20px;
  }
	#Footer {
	padding-bottom: 0px;
	}
}
@media screen and (max-width: 768px) {
   header.navbar .navbar-brand img {
       max-width: 138px;
       height: auto;
   }
}

/* eping */
.eping-footer-block-image-container {
    width: 15%;
}

.eping-footer-block-image {
    width: 100%;
}

.eping-footer-block-text {
    width: 71%;
    padding-top: 0;
}

.eping-footer-block-button {
    width: 11%;
}

.grecaptcha-badge {
    z-index: 2000;
}

a {
    color: var(--primary-link, #2471a8);
}

/* Give procedure content more room on large screens; retain Bootstrap gutters
   and selector priority so country column overrides remain effective. */
@media (min-width: 1200px) {
    :where(app-procedure #tableContent) > .sidebar-container {
        width: 32%;
    }
    :where(app-procedure #tableContent > #detailsPanel).col-md-8 {
        width: 68%;
    }
}

/* Currency chooser: shared sizing and clear states, at the existing selector priority. */
.box .sumTitle .currency-selector .selector {
    width: 112px;
    height: 40px;
    align-items: center;
    padding: 6px 10px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-small, 8px);
    box-shadow: none;
    cursor: pointer;
}
.box .sumTitle .currency-selector .selector .selected-value {
    align-items: center;
    flex: 1;
    font-size: 14px;
    line-height: 22px;
}
.box .sumTitle .currency-selector .selector .currency-flag {
    flex: 0 0 20px;
    margin-top: 0;
    margin-inline-end: 8px;
    border-radius: var(--radius-xsmall);
}
:where(.box .sumTitle .currency-selector .selector) .currency-flag {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.box .sumTitle .currency-selector .selector b {
    margin-inline-end: 0;
    font-size: 14px;
    line-height: 22px;
    font-weight: 600;
}
.box .sumTitle .currency-selector .options {
    top: calc(100% + 6px);
    margin: 0;
    padding: 4px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-small, 8px);
    box-shadow: 0 6px 20px rgba(var(--gray-1000-rgb, 0, 0, 0), .12);
}
.box .sumTitle .currency-selector .options li {
    align-items: center;
    height: 40px;
    padding: 8px 6px;
    border-radius: var(--radius-xsmall);
    font-size: 14px;
    line-height: 22px;
}
.box .sumTitle .currency-selector .options li:where([aria-pressed="true"]) {
    background-color: var(--gray-100);
}
.box .sumTitle .currency-selector .options li:hover {
    background-color: var(--gray-200);
}
.box .sumTitle .currency-selector .selector .selected-value:focus-visible,
.box .sumTitle .currency-selector .options li:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}
@media (max-width: 767px) {
    .box .sumTitle .currency-selector .selector,
    .box .sumTitle .currency-selector .options li {
        height: 44px;
    }
}

/* Attachment lists: preserve country hooks and the existing icon/label siblings. */
:where(app-attachments-list) .attachments {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--gray-200);
}

:where(app-attachments-list) div.attName {
    display: flex;
    align-items: center;
    gap: 8px;
}

:where(app-attachments-list .attName) > a {
    flex-shrink: 0;
}

:where(app-attachments-list .attName) img {
    display: block;
}

:where(app-attachments-list .attName) > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* The contact drawer fields already have their own borders. */
:where(#feedback-slider) fieldset {
    border: 0;
}

/* Directory pagination: centered icon controls and neutral page colours. */
.directory-pagination {
    --directory-pagination-color: var(--gray-700);
    border-radius: var(--radius-full, 50px);
    padding-inline: 12px;
}
.directory-pagination span,
.directory-pagination a,
.directory-pagination a:visited {
    color: var(--directory-pagination-color, var(--gray-700));
}
.directory-pagination span.active,
.directory-pagination span.active:hover {
    color: var(--gray-900);
}
.directory-pagination a:hover {
    --directory-pagination-color: var(--gray-900);
}
.directory-pagination span.prev a,
.directory-pagination span.next a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    font-size: 16px;
    line-height: 1;
    color: var(--directory-pagination-color, var(--gray-700));
}
.directory-pagination :where(.prev, .next) i {
    line-height: 1;
}
:where([dir="rtl"]) .directory-pagination :where(.prev, .next) i {
    transform: scaleX(-1);
}

:where([dir="rtl"]) .timeTable th:where(:not(:first-child)) {
    text-align: start;
    padding-inline-start: 40px;
}

/* Links use an underline instead of a focus ring for keyboard navigation. */
a:focus,
:where(a).btn:focus,
:where(a).btn:active:focus,
:where(a).btn.active:focus,
:where(a).btn.focus,
:where(a).btn:active.focus,
:where(a).btn.active.focus {
    outline: none;
}
a:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

/* Reserve equal number and thumbnail slots in requirement lists. */
:where(#section-requirements) div.reqPos {
    display: flex;
    flex: 0 0 54px;
    width: 54px;
}

:where(#section-requirements) div.reqPos em {
    flex: 0 0 20px;
}

:where(#section-requirements) div.reqPos a {
    flex: 0 0 34px;
}

:where(#section-requirements) div.reqPos img {
    margin-inline: 6px 12px;
}

/* Linked image defaults remain overridable by country stylesheets. */
.highslide img {
    border: none;
    box-shadow: none;
    border-radius: var(--radius-xsmall, 4px);
}

/* Match the existing requirement-image priority only for its conflicting properties. */
div.reqPos :where(.highslide) img {
    border: none;
    box-shadow: none;
}

/* Match the existing thumbnail selector priority. */
.box .thumb :where(.highslide) img,
.box .thumb-wide :where(.highslide) img {
    border-radius: var(--radius-xsmall, 4px);
}

/* Card images stay flush with their captions in both directions. */
.highslide img:where(:not(.thumb img, .thumb-wide img)),
div.reqPos :where(.highslide) img {
    margin-right: 12px;
}

/* Certification keeps its existing link hooks; only the decorative badge changes. */
.certified-bar:where(.certification-icon) {
    top: 50%;
    transform: translateY(-50%);
    font-size: 40px;
    line-height: 1;
    text-align: center;
    color: var(--panel-header-text, var(--primary-fill-text));
    text-shadow: none;
}

.certified-bar {
    inset-inline-end: 48px;
}

.certificationBox .certified:where(.certification-icon) {
    float: inline-start;
    width: 44px;
    margin-inline-end: 10px;
    font-size: 36px;
    line-height: 1;
    text-align: center;
    color: var(--primary-500);
}

/* Reserve equal number and thumbnail slots in requirement and legal lists. */
:where(#laws .plain) div.reqPos {
    display: flex;
    flex: 0 0 54px;
    width: 54px;
}

:where(#laws .plain) div.reqPos em {
    flex: 0 0 20px;
}

:where(#laws .plain) div.reqPos a {
    flex: 0 0 34px;
}

:where(#laws .plain) div.reqPos img {
    margin-inline: 6px 12px;
}

/* Summary laws share one leading thumbnail column and one text column. */
:where(#laws) .summary-law-item:where(:not(.plain)) {
    display: flex;
    padding-inline: 15px;
}

:where(#laws .summary-law-item:not(.plain)) div.reqPos {
    display: flex;
    flex: 0 0 28px;
    width: 28px;
}

:where(#laws .summary-law-item:not(.plain)) div.reqPos img {
    float: none;
    margin-inline: 0 12px;
}

:where(#laws .summary-law-item:not(.plain)) div.reqName {
    flex: 1;
    min-width: 0;
    width: auto;
    float: none;
    text-align: start;
    overflow-wrap: anywhere;
}

/* Centre law attachments on the first text line, including its 2px insets. */
:where(#laws) div.reqPos {
    display: flex;
    align-items: center;
    height: calc(1lh + 4px);
    padding-block: 0;
}
:where(#laws) .reqPos a {
    display: flex;
    align-items: center;
}

/* Separate law entries while keeping their article details together. */
:where(#laws .summary-law-item) + .summary-law-item {
    margin-block-start: 8px;
}

/* Cost-group headings belong to the fees that follow them. */
.summary-cost .costostable tr.cost.separator td {
    padding-block: 24px 0;
}
.summary-cost .costostable :where(tr.cost.separator) + tr.cost td {
    padding-top: 6px;
}

/* Keep the official-information link centred within the shared top stripe. */
.new-header .top-bar .content {
    margin-top: 0;
}

.new-header .top-bar .slogan {
    align-items: center;
    opacity: 1;
}

.new-header .top-bar .slogan .flag-icon {
    display: block;
    top: 0;
    border-radius: var(--radius-xxsmall);
}

.new-header .top-bar .slogan .official-site-more-info-toggler {
    color: var(--header-top-bar-accent, var(--gray-900));
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    text-transform: capitalize;
}

.breadcrumbs li + li a { color: var(--primary-link, #2471a8); }