﻿@media all {

	.map-frame { width: 100%; min-height: 250px; }
	.map-frame-small { height: 300px; }

	map-ko-component .map-ko-component { height: 100%; display:flex; flex-direction: column; }
    map-ko-component .map-ko-component .map-ko-container { flex-grow: 1; position: relative; }
    map-ko-component .map-ko-component .map-ko-container .loading { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-color:rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; color: #FFFFFF; font-size: 18px; }
    map-ko-component .map-ko-component .map-ko-container .loading .loading-icon { margin-left: 5px; }

	map-ko-component .map-ko-component .header { background-color: #00205c;color: #FFFFFF;padding: 0px 15px; }

	map-ko-component .map-ko-component .footer { display: flex; padding: 10px 15px; font-size: 0.9vw; background-color: #FFFFFF; }
	map-ko-component .map-ko-component .footer .footer-element:not(last-child) { padding-right: 30px; }
	map-ko-component .map-ko-component .footer .disclaimer { flex: 6; }
	map-ko-component .map-ko-component .footer .map-source { flex: 3; }
	map-ko-component .map-ko-component .footer .map-logo { flex: 2; text-align: center; }
	map-ko-component .map-ko-component .footer .map-logo img { width: 10em; }

	map-ko-component .map-ko-component .map-spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; }
	map-ko-component .map-ko-component .map-spinner .lds-dual-ring { display: inline-block; }
	map-ko-component .map-ko-component .map-spinner .lds-dual-ring::after { content: " "; display: block; width: 50px; height: 50px; margin: 1px; border-radius: 50%; border: 4px solid #fff; border-color: #f89938 transparent #f89938 transparent; animation: lds-dual-ring 1.2s linear infinite; -ms-animation: lds-dual-ring 1.2s linear infinite; }

    /************************
	* ArcGis map popup overrides
	************************/
	map-ko-component .map-ko-component .map-ko-container .esri-popup { z-index: 4; }
		map-ko-component .map-ko-component .map-ko-container .esri-popup header,
		map-ko-component .map-ko-component .map-ko-container .esri-popup section,
		map-ko-component .map-ko-component .map-ko-container .esri-popup .esri-popup__content { display: flex; }

	/* Popups */
	map-ko-component .map-ko-component .map-ko-container .esri-popup__main-container { min-width: 280px; width: fit-content; }
		map-ko-component .map-ko-component .map-ko-container .esri-popup__main-container h2.esri-popup__header-title { margin-top: 6px; margin-bottom: 6px; font-size: 14px; font-weight: 400; }	
	map-ko-component .map-ko-component .map-ko-container .esri-popup__main-container .esri-popup section { flex-direction: row; }

	/* Widgets */
	map-ko-component .map-ko-component .map-ko-container h3.esri-widget__heading, h4.esri-widget__heading, h5.esri-widget__heading, h6.esri-widget__heading { font-size: 14px; margin-top: 0; margin-bottom: 8px; }

	/* Legend */
	map-ko-component .map-ko-component .map-ko-container .esri-ui { position: unset; }

	map-ko-component .map-ko-component .map-ko-container .esri-expand__content.esri-expand__content--expanded { z-index: 2; }

	map-ko-component .map-ko-component .map-ko-container .esri-legend.esri-widget.esri-widget--panel { width: auto; }

	map-ko-component .map-ko-component .map-ko-container .esri-legend.esri-widget.esri-widget--panel > div { display: flex; }

	map-ko-component .map-ko-component .map-ko-container .esri-legend__service { padding: 10px 5px 10px 5px; }

		map-ko-component .map-ko-component .map-ko-container .esri-legend__service:first-child { padding-left: 10px; }

		map-ko-component .map-ko-component .map-ko-container .esri-legend__service:last-child { padding-right: 10px; }

	/* ----- Popups ----- */
	/* header */
	map-ko-component .map-ko-component .map-ko-container .esri-popup__header { border-bottom: 1px solid #F2F2F2; }
	map-ko-component .map-ko-component .map-ko-container .esri-popup__header h2.esri-popup__header-title .fa { font-size: 18px; margin-right:5px; }	

	/* content */

		map-ko-component .map-ko-component .map-ko-container .esri-popup__main-container .esri-popup__content { margin-top: 10px; margin-bottom: 10px; }
			map-ko-component .map-ko-component .map-ko-container .esri-popup__main-container .esri-popup__content .esri-feature__content-element.esri-feature__text { padding-bottom: 3px; margin-bottom: 0; }

	/******************************************************
	* Specific for virus maps (maybe to be move elsewhere)
	*******************************************************/
			map-ko-component .map-ko-component .map-ko-container .esri-popup__main-container .esri-popup__content .esri-feature__content-element.esri-feature__text:last-of-type { padding-bottom: 0; }
			map-ko-component .map-ko-component .map-ko-container .esri-popup__main-container .esri-popup__content .esri-feature__content-element.esri-feature__text .virus-code { background-color: #797979; color: white; padding: 2px 5px; font-size: 0.9em; }
			map-ko-component .map-ko-component .map-ko-container .esri-popup__main-container .esri-popup__content .esri-feature__content-element.esri-feature__text .virus-link { margin-top: 5px; padding: 5px; text-align: center; background-color: #f2f2f2; }
		map-ko-component .map-ko-component .map-ko-container .esri-popup__main-container .esri-popup__content .esri-feature__content-element.esri-feature__text .virus-link a:hover { color: #FF8710; }

	map-ko-component .map-ko-component .map-ko-container .esri-feature__main-container .esri-feature__content-element.esri-feature__text { padding: 0 7px 3px; }
	map-ko-component .map-ko-component .map-ko-container .esri-feature__main-container .activity-type-section { padding-bottom: 15px; }
	
	/* print widget */
	/* hide advanced options ( not a clean solution,
		but https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Print.html
		does not have an option to hide
			- the advanced options section
			- size selector ) */
	map-ko-component .map-ko-component .map-ko-container .esri-print__container .esri-print__advanced-options-section { display: none; }
	map-ko-component .map-ko-component .map-ko-container .esri-print__container .esri-print__size-container { display: none; }

	/* hide the "Layout" / "Map only" tab strip: map-only export is not offered and the
		layout panel is the tab selected by default */
	map-ko-component .map-ko-component .map-ko-container .esri-print__container .esri-print__layout-tab-list { display: none; }

	/* hide the layout template dropdown and the title input: the Layout_Template GP
		parameter is set programmatically from the point/polygon basemap mode
		(see _getPrintLayoutTemplate in map-ko-component.js) */
	map-ko-component .map-ko-component .map-ko-container .esri-print__container .esri-print__form-section-container:has(select[data-target-property="layout"]) { display: none; }
	/* map-ko-component .map-ko-component .map-ko-container .esri-print__container .esri-print__form-section-container:has(input[data-input-name="title"]) { display: none; } */

	map-ko-component .map-ko-component .map-ko-container .esri-print__container .esri-print__form-section-container label { width: 100%; }
	map-ko-component .map-ko-component .map-ko-container .esri-print__container .esri-print__form-section-container label input { width: 100%; display: block; }

	map-ko-component .map-ko-component .map-ko-container .esri-print__container .esri-print__form-section-container { margin-bottom: 5px; }

	/* disclaimer widget */
	map-ko-component .map-ko-component .map-ko-container .map-disclaimer-widget { background-color: #FFFFFF; padding: 10px 12px; min-width: 320px; max-height: 400px; overflow-y: auto; font-size: 12px; line-height: 1.4; }

	/* disclaimer widget icon */
	.esri-component .esri-widget--button:has(.esri-icon-notice-triangle) { background-color: #f89938; }
	.esri-component .esri-widget--button .esri-icon-notice-triangle { color: #000000; }

@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}