/* DBIM icons (manual, chapter 3). Every icon is a file from the DBIM Toolkit's icon library
   (dbimtoolkit.digifootprint.gov.in, Visual Library, Iconography), taken through its own Download dialog (Line, SVG,
   the Blue swatch) and kept unchanged in images/icons/.

   On a page an icon is   <i class="dbim-ico dbim-ico-NAME"></i>   The element is painted with one colour and cut to the
   shape of the file, so the same file serves every colour:
     24px, in buttons and in text: the colour of the text around it (white on a dark button, yellow in high contrast)
     32, 48 and 64px, where an icon stands for a picture: the key colour (yellow in high contrast)
   The sizes are the manual's four. header.jsp links this file with its own version number; a page without the header
   (the error pages) links it itself. */
.dbim-ico,
.tempus-dominus-widget .fa-solid {
    display: inline-block;
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    /* level with the lower-case letters, and no taller than a line of 16px text */
    vertical-align: middle;
    margin-top: -0.25rem;
    margin-bottom: -0.25rem;
    /* nothing shows until a rule below names the file */
    -webkit-mask-image: linear-gradient(transparent, transparent);
    mask-image: linear-gradient(transparent, transparent);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
/* The colour is laid on only where the browser can cut it to the icon's shape. A browser that cannot (Opera Mini's
   data-saving mode, Internet Explorer, the oldest feature phones) would show a solid square in place of every icon;
   this way it shows nothing there, and the words beside the icon still say what the button does */
@supports ((-webkit-mask-image: none) or (mask-image: none)) {
    .dbim-ico,
    .tempus-dominus-widget .fa-solid { background-color: currentColor; }
}
/* base-layout.css draws the accordion's plus and minus the same way: no square there either in such a browser */
@supports not ((-webkit-mask-image: none) or (mask-image: none)) {
    .accordion-button::after,
    .accordion-button:not(.collapsed)::after { background-color: transparent; }
}

.dbim-ico-32 { width: 2rem; height: 2rem; }
.dbim-ico-48 { width: 3rem; height: 3rem; }
.dbim-ico-64 { width: 4rem; height: 4rem; }
/* An icon that stands for a picture has its own colour. It must not take the colour of the text around it: SFC styles
   its YouTube links with see-through text, which would hide the icon */
.dbim-ico-32,
.dbim-ico-48,
.dbim-ico-64 {
    margin-top: 0;
    margin-bottom: 0;
    color: var(--dbim-c1);
}
html.dbim-hc .dbim-ico-32,
html.dbim-hc .dbim-ico-48,
html.dbim-hc .dbim-ico-64 { color: yellow; }
/* SFC's landing banner keeps its light picture in high contrast (its own text stays dark blue there): yellow would
   vanish on it */
html.dbim-hc .chakshu-banner .dbim-ico { color: var(--dbim-c1); }

/* Where 64px does not fit, the next of the manual's sizes down, as the old pictures were smaller there (60px under
   1000px) and shrank with their column. An icon also grows with the site's larger text, which a picture did not.
   - a card's picture column (two twelfths of the card): 48px under 1200px, 32px on phones (the column is about 30px)
   - beside a title: 48px on tablets and phones */
@media (max-width: 1199.98px) {
    .col-2 > .dbim-ico-64 { width: 3rem; height: 3rem; }
}
@media (max-width: 991.98px) {
    .dbim-ico-64 { width: 3rem; height: 3rem; }
}
@media (max-width: 767.98px) {
    .col-2 > .dbim-ico-64 { width: 2rem; height: 2rem; }
}

/* In a button the 24px icon takes the room the old glyph had (16px; 20px in a large button), so every button is as
   wide as it was and a label wraps only where it wrapped before */
.btn > .dbim-ico {
    margin-left: -0.25rem;
    margin-right: -0.25rem;
}
.btn-lg > .dbim-ico {
    margin-left: -0.125rem;
    margin-right: -0.125rem;
}
/* In the header, the menu button and the date picker an icon is a box of its own, not part of a line of text (the
   header's search button had a 24px drawing already) */
.dbim-header .dbim-ico,
.dbim-nav .dbim-ico,
.tempus-dominus-widget .fa-solid {
    margin: 0;
}

/* The menu button (phones and tablets): the icon in the key colour, in the box that Bootstrap's own drawing had (1.5em
   of the button's font size: 30px, and 24px in the feedback app), so the button keeps its size. In high contrast the
   button is yellow, and the icon black on it */
.dbim-nav .navbar-toggler .dbim-ico {
    margin: calc((1.5em - 1.5rem) / 2);
    color: var(--dbim-c1);
}
html.dbim-hc .dbim-nav .navbar-toggler .dbim-ico { color: black; }

/* The plus and minus of an accordion row (drawn by base-layout.css from add.svg and remove.svg): 24px. The margins keep
   a one-line row as tall, and its text as wide, as with the 20px drawing (a title that just fitted would wrap otherwise) */
.accordion { --bs-accordion-btn-icon-width: 1.5rem; }
.accordion-button::after {
    margin-top: -0.125rem;
    margin-bottom: -0.125rem;
    margin-right: -0.25rem;
}

/* Windows contrast themes (forced colours) replace background colours, which would erase every icon */
@media (forced-colors: active) {
    .dbim-ico,
    .tempus-dominus-widget .fa-solid {
        forced-color-adjust: none;
        background-color: CanvasText;
    }
    .btn .dbim-ico,
    button .dbim-ico { background-color: ButtonText; }
    /* a link, and a link drawn as a button: these themes show its label in the link colour */
    a .dbim-ico,
    a.btn .dbim-ico { background-color: LinkText; }
}

/* The icons */
.dbim-ico-accessibility { -webkit-mask-image: url(../images/icons/accessibility.svg); mask-image: url(../images/icons/accessibility.svg); }
.dbim-ico-account-balance { -webkit-mask-image: url(../images/icons/account-balance.svg); mask-image: url(../images/icons/account-balance.svg); }
.dbim-ico-acts-and-policies { -webkit-mask-image: url(../images/icons/acts-and-policies.svg); mask-image: url(../images/icons/acts-and-policies.svg); }
.dbim-ico-add { -webkit-mask-image: url(../images/icons/add.svg); mask-image: url(../images/icons/add.svg); }
.dbim-ico-announcement { -webkit-mask-image: url(../images/icons/announcement.svg); mask-image: url(../images/icons/announcement.svg); }
.dbim-ico-arrow-backward { -webkit-mask-image: url(../images/icons/arrow-backward.svg); mask-image: url(../images/icons/arrow-backward.svg); }
.dbim-ico-arrow-downward { -webkit-mask-image: url(../images/icons/arrow-downward.svg); mask-image: url(../images/icons/arrow-downward.svg); }
.dbim-ico-arrow-forward { -webkit-mask-image: url(../images/icons/arrow-forward.svg); mask-image: url(../images/icons/arrow-forward.svg); }
.dbim-ico-block { -webkit-mask-image: url(../images/icons/block.svg); mask-image: url(../images/icons/block.svg); }
.dbim-ico-chat { -webkit-mask-image: url(../images/icons/chat.svg); mask-image: url(../images/icons/chat.svg); }
.dbim-ico-check { -webkit-mask-image: url(../images/icons/check.svg); mask-image: url(../images/icons/check.svg); }
.dbim-ico-chevron-left { -webkit-mask-image: url(../images/icons/chevron-left.svg); mask-image: url(../images/icons/chevron-left.svg); }
.dbim-ico-chevron-right { -webkit-mask-image: url(../images/icons/chevron-right.svg); mask-image: url(../images/icons/chevron-right.svg); }
.dbim-ico-close { -webkit-mask-image: url(../images/icons/close.svg); mask-image: url(../images/icons/close.svg); }
.dbim-ico-community { -webkit-mask-image: url(../images/icons/community.svg); mask-image: url(../images/icons/community.svg); }
.dbim-ico-complaint { -webkit-mask-image: url(../images/icons/complaint.svg); mask-image: url(../images/icons/complaint.svg); }
.dbim-ico-contact-mail { -webkit-mask-image: url(../images/icons/contact-mail.svg); mask-image: url(../images/icons/contact-mail.svg); }
.dbim-ico-contact-support { -webkit-mask-image: url(../images/icons/contact-support.svg); mask-image: url(../images/icons/contact-support.svg); }
.dbim-ico-cyber-crime { -webkit-mask-image: url(../images/icons/cyber-crime.svg); mask-image: url(../images/icons/cyber-crime.svg); }
.dbim-ico-dark-contrast { -webkit-mask-image: url(../images/icons/dark-contrast.svg); mask-image: url(../images/icons/dark-contrast.svg); }
.dbim-ico-date { -webkit-mask-image: url(../images/icons/date.svg); mask-image: url(../images/icons/date.svg); }
.dbim-ico-default-cursor { -webkit-mask-image: url(../images/icons/default-cursor.svg); mask-image: url(../images/icons/default-cursor.svg); }
.dbim-ico-delete { -webkit-mask-image: url(../images/icons/delete.svg); mask-image: url(../images/icons/delete.svg); }
.dbim-ico-edit { -webkit-mask-image: url(../images/icons/edit.svg); mask-image: url(../images/icons/edit.svg); }
.dbim-ico-facebook { -webkit-mask-image: url(../images/icons/facebook.svg); mask-image: url(../images/icons/facebook.svg); }
.dbim-ico-feedback { -webkit-mask-image: url(../images/icons/feedback.svg); mask-image: url(../images/icons/feedback.svg); }
.dbim-ico-gallery { -webkit-mask-image: url(../images/icons/gallery.svg); mask-image: url(../images/icons/gallery.svg); }
.dbim-ico-hacker { -webkit-mask-image: url(../images/icons/hacker.svg); mask-image: url(../images/icons/hacker.svg); }
.dbim-ico-headphones { -webkit-mask-image: url(../images/icons/headphones.svg); mask-image: url(../images/icons/headphones.svg); }
.dbim-ico-help { -webkit-mask-image: url(../images/icons/help.svg); mask-image: url(../images/icons/help.svg); }
.dbim-ico-hide-image { -webkit-mask-image: url(../images/icons/hide-image.svg); mask-image: url(../images/icons/hide-image.svg); }
.dbim-ico-highlight-links { -webkit-mask-image: url(../images/icons/highlight-links.svg); mask-image: url(../images/icons/highlight-links.svg); }
.dbim-ico-id-card { -webkit-mask-image: url(../images/icons/id-card.svg); mask-image: url(../images/icons/id-card.svg); }
.dbim-ico-instagram { -webkit-mask-image: url(../images/icons/instagram.svg); mask-image: url(../images/icons/instagram.svg); }
.dbim-ico-invert { -webkit-mask-image: url(../images/icons/invert.svg); mask-image: url(../images/icons/invert.svg); }
.dbim-ico-link { -webkit-mask-image: url(../images/icons/link.svg); mask-image: url(../images/icons/link.svg); }
.dbim-ico-location { -webkit-mask-image: url(../images/icons/location.svg); mask-image: url(../images/icons/location.svg); }
.dbim-ico-manage-accounts { -webkit-mask-image: url(../images/icons/manage-accounts.svg); mask-image: url(../images/icons/manage-accounts.svg); }
.dbim-ico-menu { -webkit-mask-image: url(../images/icons/menu.svg); mask-image: url(../images/icons/menu.svg); }
.dbim-ico-mobile-install { -webkit-mask-image: url(../images/icons/mobile-install.svg); mask-image: url(../images/icons/mobile-install.svg); }
.dbim-ico-multiple-documents { -webkit-mask-image: url(../images/icons/multiple-documents.svg); mask-image: url(../images/icons/multiple-documents.svg); }
.dbim-ico-open-in-new { -webkit-mask-image: url(../images/icons/open-in-new.svg); mask-image: url(../images/icons/open-in-new.svg); }
.dbim-ico-pending-actions { -webkit-mask-image: url(../images/icons/pending-actions.svg); mask-image: url(../images/icons/pending-actions.svg); }
.dbim-ico-phone { -webkit-mask-image: url(../images/icons/phone.svg); mask-image: url(../images/icons/phone.svg); }
.dbim-ico-phone-in-talk { -webkit-mask-image: url(../images/icons/phone-in-talk.svg); mask-image: url(../images/icons/phone-in-talk.svg); }
.dbim-ico-publications { -webkit-mask-image: url(../images/icons/publications.svg); mask-image: url(../images/icons/publications.svg); }
.dbim-ico-record-voice-over { -webkit-mask-image: url(../images/icons/record-voice-over.svg); mask-image: url(../images/icons/record-voice-over.svg); }
.dbim-ico-refresh { -webkit-mask-image: url(../images/icons/refresh.svg); mask-image: url(../images/icons/refresh.svg); }
.dbim-ico-remove { -webkit-mask-image: url(../images/icons/remove.svg); mask-image: url(../images/icons/remove.svg); }
.dbim-ico-report { -webkit-mask-image: url(../images/icons/report.svg); mask-image: url(../images/icons/report.svg); }
.dbim-ico-revert { -webkit-mask-image: url(../images/icons/revert.svg); mask-image: url(../images/icons/revert.svg); }
.dbim-ico-router { -webkit-mask-image: url(../images/icons/router.svg); mask-image: url(../images/icons/router.svg); }
.dbim-ico-saturation { -webkit-mask-image: url(../images/icons/saturation.svg); mask-image: url(../images/icons/saturation.svg); }
.dbim-ico-search { -webkit-mask-image: url(../images/icons/search.svg); mask-image: url(../images/icons/search.svg); }
.dbim-ico-send { -webkit-mask-image: url(../images/icons/send.svg); mask-image: url(../images/icons/send.svg); }
.dbim-ico-share { -webkit-mask-image: url(../images/icons/share.svg); mask-image: url(../images/icons/share.svg); }
.dbim-ico-shield-lock { -webkit-mask-image: url(../images/icons/shield-lock.svg); mask-image: url(../images/icons/shield-lock.svg); }
.dbim-ico-site-map { -webkit-mask-image: url(../images/icons/site-map.svg); mask-image: url(../images/icons/site-map.svg); }
.dbim-ico-skip-to-content { -webkit-mask-image: url(../images/icons/skip-to-content.svg); mask-image: url(../images/icons/skip-to-content.svg); }
.dbim-ico-smartphone { -webkit-mask-image: url(../images/icons/smartphone.svg); mask-image: url(../images/icons/smartphone.svg); }
.dbim-ico-text-size-decrease { -webkit-mask-image: url(../images/icons/text-size-decrease.svg); mask-image: url(../images/icons/text-size-decrease.svg); }
.dbim-ico-text-size-increase { -webkit-mask-image: url(../images/icons/text-size-increase.svg); mask-image: url(../images/icons/text-size-increase.svg); }
.dbim-ico-time { -webkit-mask-image: url(../images/icons/time.svg); mask-image: url(../images/icons/time.svg); }
.dbim-ico-verified-user { -webkit-mask-image: url(../images/icons/verified-user.svg); mask-image: url(../images/icons/verified-user.svg); }
.dbim-ico-view { -webkit-mask-image: url(../images/icons/view.svg); mask-image: url(../images/icons/view.svg); }
.dbim-ico-warning { -webkit-mask-image: url(../images/icons/warning.svg); mask-image: url(../images/icons/warning.svg); }
.dbim-ico-x { -webkit-mask-image: url(../images/icons/x.svg); mask-image: url(../images/icons/x.svg); }
.dbim-ico-youtube { -webkit-mask-image: url(../images/icons/youtube.svg); mask-image: url(../images/icons/youtube.svg); }

/* The date picker (Tempus Dominus) names its own icons by another library's classes. Here they are the Toolkit's
   drawings. The Toolkit has no upward arrow: its downward arrow is turned round */
.tempus-dominus-widget .fa-clock { -webkit-mask-image: url(../images/icons/time.svg); mask-image: url(../images/icons/time.svg); }
.tempus-dominus-widget .fa-calendar { -webkit-mask-image: url(../images/icons/date.svg); mask-image: url(../images/icons/date.svg); }
.tempus-dominus-widget .fa-arrow-up { -webkit-mask-image: url(../images/icons/arrow-downward.svg); mask-image: url(../images/icons/arrow-downward.svg); transform: rotate(180deg); }
.tempus-dominus-widget .fa-arrow-down { -webkit-mask-image: url(../images/icons/arrow-downward.svg); mask-image: url(../images/icons/arrow-downward.svg); }
.tempus-dominus-widget .fa-chevron-left { -webkit-mask-image: url(../images/icons/chevron-left.svg); mask-image: url(../images/icons/chevron-left.svg); }
.tempus-dominus-widget .fa-chevron-right { -webkit-mask-image: url(../images/icons/chevron-right.svg); mask-image: url(../images/icons/chevron-right.svg); }
.tempus-dominus-widget .fa-calendar-check { -webkit-mask-image: url(../images/icons/date.svg); mask-image: url(../images/icons/date.svg); }
.tempus-dominus-widget .fa-trash { -webkit-mask-image: url(../images/icons/delete.svg); mask-image: url(../images/icons/delete.svg); }
.tempus-dominus-widget .fa-xmark { -webkit-mask-image: url(../images/icons/close.svg); mask-image: url(../images/icons/close.svg); }