\\r\\n
\\r\\n \\r\\n\\r\\n \\r\\n
\\r\\n
\\r\\n
\\r\\n \\r\\n
\\r\\n \\r\\n \\r\\n {{'LocationSearch.click' | translate}} \\r\\n \\r\\n {{'LocationSearch.filterInstructions' | translate}}\\r\\n \\r\\n \\r\\n \\r\\n \\r\\n
\\r\\n
\\r\\n \\r\\n \\r\\n {{'LocationSearch.click' | translate}} \\r\\n \\r\\n {{'LocationSearch.filterInstructions2' | translate}}\\r\\n \\r\\n \\r\\n \\r\\n \\r\\n
\\r\\n \\r\\n \\r\\n \\r\\n
\\r\\n \\r\\n \\r\\n
\\r\\n \\r\\n \\r\\n \\r\\n
\\r\\n
\\r\\n \\r\\n
\\r\\n \\r\\n \\r\\n {{'LocationSearch.click' | translate}} \\r\\n \\r\\n {{'LocationSearch.filterInstructions' | translate}}\\r\\n \\r\\n \\r\\n \\r\\n \\r\\n
\\r\\n
\\r\\n \\r\\n \\r\\n {{'LocationSearch.click' | translate}} \\r\\n \\r\\n {{'LocationSearch.filterInstructions2' | translate}}\\r\\n \\r\\n \\r\\n \\r\\n \\r\\n
\\r\\n \\r\\n \\r\\n
\\r\\n \\r\\n \\r\\n
\\r\\n \\r\\n
\\r\\n \\r\\n
\\r\\n \\r\\n \\r\\n {{'LocationSearch.filterInstructions3' | translate}}\\r\\n \\r\\n \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n \\r\\n \\r\\n
\\r\\n
\\r\\n
\\r\\n
{{'LocationSearch.CommonName' | translate }}
\\r\\n
\\r\\n
\\r\\n
{{'LocationSearch.LatinName' | translate }}
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n \\r\\n \\r\\n {{'LocationSearch.Name' | translate }}:\\r\\n \\r\\n {{ species.attributes.CommonName }}\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n \\r\\n {{'LocationSearch.Classification' | translate }}:\\r\\n \\r\\n {{ species.attributes.LatinName }}\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n {{ layerData && layerData.layers[i].name }} {{ 'LocationSearch.NotPresentMessage' | translate }}\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n \\r\\n
\\r\\n \\r\\n
\\r\\n \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n \\r\\n \\r\\n \\r\\n \\r\\n
\\r\\n \\r\\n\\r\\n\\r\\n\\r\\n\\r\\n
\\r\\n
\\r\\n \\r\\n
\\r\\n \\r\\n
\\r\\n {{ 'LocationSearch.Okay' | translate }} \\r\\n
\\r\\n
\\r\\n
\\r\\n
\"","module.exports = \"\\n@import url(\\\"https://fonts.cdnfonts.com/css/omnes\\\");\\n/* import the required JSAPI css */\\n#mapViewNode {\\n padding: 0;\\n margin: 0;\\n width: 100%; }\\n.esri-view {\\n height: 650px; }\\n.popupdetimg {\\n max-width: 100%;\\n max-height: 300px;\\n width: auto;\\n -o-object-fit: contain;\\n object-fit: contain; }\\n.btnswtch .btn-switch {\\n background: white; }\\n.ls-filter {\\n margin: 0;\\n left: 45px; }\\n.citizen-banner {\\n max-height: 65px !important; }\\n.citizen-banner .banner-title {\\n font-size: 23px;\\n margin-bottom: 2px;\\n padding-bottom: 8px; }\\n.citizen-banner .breadcrumbs {\\n padding-top: 8px; }\\n.ls-container {\\n min-height: 610px; }\\n.ls-container .ls-detail {\\n max-height: unset;\\n overflow-y: unset;\\n border-radius: 3px;\\n background-color: rgba(255, 255, 255, 0.8);\\n box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.15);\\n position: absolute;\\n top: 65px;\\n left: 45px;\\n margin: 0;\\n z-index: 1; }\\n.ls-container .ls-detail .ls-dethgt {\\n max-height: 375px;\\n overflow-y: auto;\\n padding-bottom: 10px; }\\n.ls-container .ls-detail .ls-row .ls-col.ls-col-active {\\n background-color: rgba(47, 136, 99, 0.8); }\\n.ls-container .ls-detail .ls-row .ls-col.ls-col-active p {\\n color: white; }\\n.ls-container .ls-detail .ls-row .ls-col.ls-col-active .flicn {\\n color: white; }\\n.ls-container .ls-detail .ls-row p {\\n font-size: 14px;\\n padding: 5px 0;\\n word-break: break-word; }\\n.ls-container .ls-detail .ls-row.ls-rowtitle {\\n background-color: rgba(0, 102, 162, 0.8); }\\n.ls-container .ls-detail .ls-row.ls-rowtitle p {\\n font-size: 18px; }\\n.ls-container .ls-detail .fldeticon {\\n position: absolute;\\n right: 15px;\\n top: 8px;\\n margin-bottom: 0;\\n color: white;\\n z-index: 9; }\\n.ls-container .dflex-center {\\n display: flex;\\n align-items: center; }\\n.ls-container .ls-filter-icons {\\n position: absolute;\\n top: 0;\\n margin: 0;\\n left: 0; }\\n.ls-container .ls-filter-icons .flicn {\\n border-radius: 3px;\\n background-color: #0066a2;\\n color: white;\\n box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.15);\\n padding: 8px;\\n margin: 0 0 30px 0px !important; }\\n@media (max-width: 767px) {\\n .ls-filter {\\n position: absolute !important; }\\n .ls-container .ls-detail {\\n max-height: 308px !important; }\\n .ls-container .ls-detail .ls-dethgt {\\n max-height: 280px !important;\\n overflow-y: auto; }\\n .ls-container .ls-detail {\\n top: 80px !important; }\\n .ls-container .ls-detail .fldeticon {\\n position: relative;\\n background: #0066a2;\\n text-align: right;\\n padding-left: 15px;\\n padding-right: 15px;\\n right: unset;\\n top: unset; }\\n .citizen-banner .banner-title {\\n margin-top: 25px; }\\n .banner-detail.innerpage .list-div {\\n top: 0 !important; } }\\n.infobtn:hover {\\n -webkit-transform: scale(1.3);\\n transform: scale(1.3); }\\n.infobtn .mediafile {\\n width: 80%;\\n height: 150px; }\\n.infobtn .audio-player {\\n margin-top: 90px; }\\n.species-detail-content .species-description {\\n padding-left: 0;\\n padding-right: 0; }\\n.dropup .dropdown-menu {\\n top: 55px; }\\n.instruction1-arabic p {\\n padding-left: 366px; }\\n.instruction1-arabic span {\\n float: right;\\n padding-top: 0px;\\n width: 15%; }\\n.instructions2-arabic {\\n padding: 15px 0px;\\n font-size: larger;\\n text-align: right;\\n margin-right: 49px; }\\n.instructions-en div {\\n width: 25%;\\n padding: 15px 0px;\\n text-align: center;\\n font-size: larger; }\\n.instructions-en .desc {\\n width: 64%;\\n padding-left: 46px;\\n float: left; }\\n.instructions-en .filter-inst {\\n float: left;\\n padding-top: 0px;\\n width: 20%; }\\n.instructions-ar div {\\n padding: 15px 0px;\\n font-size: larger;\\n text-align: right;\\n margin-right: 40px; }\\n.ls-speciesdet h3 {\\n word-break: break-word; }\\n.taximonial-box {\\n border: 1px solid #707070;\\n border-radius: 12px; }\\n.birds-content-padding {\\n padding-bottom: 0px; }\\n.media-text {\\n word-break: break-word; }\\ninput[type=range][orient=vertical] {\\n -webkit-writing-mode: bt-lr;\\n -ms-writing-mode: bt-lr;\\n writing-mode: bt-lr;\\n /* IE */\\n -webkit-appearance: slider-vertical;\\n /* WebKit */\\n width: 50px;\\n height: 100px;\\n padding: 5px 5px;\\n margin-right: 50px; }\\n.detail-titleiucn {\\n font-weight: 600;\\n display: inline-block;\\n margin-bottom: 10px;\\n font-size: 16px; }\\n.statusbtn {\\n display: inline-block;\\n border: 1px solid #707070;\\n padding: 7px 49px 10px;\\n margin: 0 10px;\\n border-radius: 24px;\\n background: #D7F2D7;\\n color: #101010;\\n font-size: 23px; }\\n.progress-container {\\n width: 100%;\\n position: relative;\\n z-index: 1;\\n margin-top: 41px; }\\n.progress-container .progressbar {\\n padding-left: 0; }\\n.progress-container .progressbar li {\\n float: left;\\n width: 11.111111%;\\n position: relative;\\n text-align: center;\\n list-style-type: none;\\n font-size: 12px; }\\n.progress-container .progressbar li .iucncode {\\n position: absolute;\\n top: 0;\\n left: 43%;\\n top: 9%;\\n font-size: 16px;\\n text-transform: uppercase;\\n color: black; }\\n.progress-container .progressbar li.activestat .iucncode {\\n color: white; }\\n.progress-container .progressbar li:before {\\n content: '';\\n width: 51px;\\n height: 51px;\\n border: 2px solid #bebebe;\\n display: block;\\n margin: -9px auto 10px auto;\\n border-radius: 50%;\\n background: white;\\n color: #bebebe;\\n text-align: center;\\n font-weight: bold; }\\n.progress-container .progressbar li:after {\\n content: '';\\n position: absolute;\\n width: 100%;\\n height: 3px;\\n background: #979797;\\n top: 15px;\\n left: -50%;\\n z-index: -1; }\\n.progress-container .progressbar li:first-child:after {\\n content: none; }\\n.statusbar {\\n height: auto;\\n position: relative;\\n margin: auto;\\n width: calc(100% - 0px); }\\n.statusbar:before {\\n content: \\\" \\\";\\n position: relative;\\n display: block;\\n width: 100%;\\n top: 22px;\\n height: 50px;\\n border-top: 1px dotted #707070; }\\n.statusbar .status-bubble {\\n background-color: #00a000;\\n border: 1px solid #E6E6E6;\\n border-radius: 50%;\\n background-color: #FFF0DC;\\n margin: 0 0 0 -15px;\\n position: absolute;\\n text-align: center;\\n top: 9px;\\n left: 0;\\n height: 40px;\\n width: 40px;\\n margin: -10px 0 0 -24px;\\n border: 1px solid #707070;\\n color: black; }\\n.statusbar .status-bubble .statustitle {\\n position: relative;\\n top: 15px;\\n display: inline-block; }\\n.statusbar .status-bubble .activestat {\\n color: white; }\\n.statusbar .status-bubble:nth-child(1) {\\n left: 0; }\\n.statusbar .status-bubble:nth-child(2) {\\n left: 12.5%; }\\n.statusbar .status-bubble:nth-child(3) {\\n left: 25%; }\\n.statusbar .status-bubble:nth-child(4) {\\n left: 37.5%; }\\n.statusbar .status-bubble:nth-child(5) {\\n left: 50%; }\\n.statusbar .status-bubble:nth-child(6) {\\n left: 62.5%; }\\n.statusbar .status-bubble:nth-child(7) {\\n left: 75%; }\\n.statusbar .status-bubble:nth-child(8) {\\n left: 87.5%; }\\n.statusbar .status-bubble:nth-child(9) {\\n left: 100%; }\\n.statusbar .status-bubble .status-bubble-label {\\n color: black;\\n text-transform: uppercase;\\n font-size: 16px;\\n line-height: 25px;\\n display: block;\\n width: 100%;\\n margin-top: 6px;\\n text-align: center;\\n padding-left: 0; }\\n@media (max-width: 767px) {\\n .ls-spmain.species-detail-content .species-description .species-text, .statusph {\\n padding-left: 10px !important;\\n padding-right: 10px !important; }\\n .statusbtn {\\n font-size: 18px; }\\n .statusbar .status-bubble {\\n height: 40px;\\n width: 40px; }\\n .statusbar .status-bubble .status-bubble-label {\\n font-size: 14px;\\n line-height: 25px;\\n padding-left: 0; }\\n .statustitle {\\n display: none !important; }\\n .activestat .statustitle {\\n display: inline-block !important;\\n left: -10px; } }\\n@media (max-width: 550px) {\\n .statusbtn {\\n font-size: 16px;\\n padding: 7px 15px 10px;\\n margin: 0; }\\n .activestat .statustitle {\\n font-size: 12px;\\n top: 10px; }\\n .statusbar:before {\\n left: -10px;\\n top: 11px; }\\n .statusbar .status-bubble {\\n height: 23px;\\n width: 23px; }\\n .statusbar .status-bubble .status-bubble-label {\\n font-size: 10px;\\n line-height: 12px; } }\\n.mediatext p {\\n color: white;\\n padding: 15px;\\n margin-top: 11px;\\n font-size: 14px;\\n max-height: 75px;\\n overflow-y: auto;\\n word-break: break-word; }\\n.zoomininput {\\n position: absolute;\\n top: 140px;\\n margin: 0;\\n left: 0; }\\n.zoomininput .zoominicon {\\n background: #e2e2e2;\\n height: 25px;\\n width: 25px;\\n position: relative;\\n left: 8px; }\\n.zoomininput .zoominicon.zoominminus {\\n top: 30px; }\\n.zoomininput .zoominicon .glyphicon {\\n top: 4px;\\n left: 6px;\\n color: #0066a2; }\\n.inputrangecustom {\\n height: 130px;\\n position: relative;\\n top: 15px; }\\n/* start homepage */\\n* {\\n margin: 0;\\n padding: 0;\\n box-sizing: border-box; }\\nh1, h2, h3, p, a {\\n font-family: 'Omnes', sans-serif; }\\n.hero-section {\\n height: 70vh;\\n color: white;\\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(\\\"https://i.ibb.co/PNmX3My/MG-2532-L-Houbara-Bustard.jpg\\\");\\n background-repeat: no-repeat;\\n background-size: cover;\\n background-position: center; }\\n.body {\\n height: 100vh;\\n color: white;\\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(\\\"https://i.ibb.co/GHMjC2Q/big1571134224.jpg\\\");\\n background-repeat: no-repeat;\\n background-size: cover;\\n background-position: center; }\\n.hero-section-page8 {\\n height: 70vh;\\n color: white;\\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(\\\"https://i.ibb.co/GHMjC2Q/big1571134224.jpg\\\");\\n background-repeat: no-repeat;\\n background-size: cover;\\n background-position: center; }\\n.hero-section-page20 {\\n height: 70vh;\\n color: white;\\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(\\\"https://i.ibb.co/sHmB2Rr/maxresdefault-1.jpg\\\");\\n background-repeat: no-repeat;\\n background-size: cover;\\n background-position: center; }\\n.hero-section-page21 {\\n height: 70vh;\\n color: white;\\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(\\\"https://i.ibb.co/yWz67Db/Mangroves-min.jpg\\\");\\n background-repeat: no-repeat;\\n background-size: cover;\\n background-position: center; }\\n.hero-section-page17 {\\n height: 70vh;\\n color: white;\\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(\\\"https://i.ibb.co/LvVH8kT/update-falcons-fly-free.jpg\\\");\\n background-repeat: no-repeat;\\n background-size: cover;\\n background-position: center; }\\n.hero-section-page15 {\\n height: 70vh;\\n color: white;\\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(\\\"https://i.ibb.co/Hd8tm6n/maxresdefault.jpg\\\");\\n background-repeat: no-repeat;\\n background-size: cover;\\n background-position: center; }\\n.hero-text {\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n justify-content: center;\\n height: 100%;\\n font-size: 1.4em;\\n letter-spacing: 9px; }\\n.hero-section-page16 {\\n height: 70vh;\\n color: white;\\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(\\\"https://i.ibb.co/Rj6Dq7y/deserthare2ead0.jpg\\\");\\n background-repeat: no-repeat;\\n background-size: cover;\\n background-position: center; }\\n.hero-section-specie-page {\\n height: 70vh;\\n color: white;\\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(\\\"https://i.ibb.co/mb5yWrY/Screenshot-2021-12-22-at-15-02-08.png\\\");\\n background-repeat: no-repeat;\\n background-size: cover;\\n background-position: center; }\\n.hero-section-habitat-page {\\n height: 70vh;\\n color: white;\\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(\\\"https://i.ibb.co/9wy9p9Z/8ebcd85a55212d01925406be12c7a584.jpg\\\");\\n background-repeat: no-repeat;\\n background-size: cover;\\n background-position: center; }\\n.hero-section-page18 {\\n height: 70vh;\\n color: white;\\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(\\\"https://i.ibb.co/QCfB69Z/180613094738-02-coral.jpg\\\");\\n background-repeat: no-repeat;\\n background-size: cover;\\n background-position: center; }\\n.hero-section-habitat-page-aquatic {\\n height: 70vh;\\n color: white;\\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(\\\"https://i.ibb.co/hD6y8ww/borneo-storlazzi-600.jpg\\\");\\n background-repeat: no-repeat;\\n background-size: cover;\\n background-position: center; }\\n.hero-section-page12 {\\n height: 70vh;\\n color: white;\\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(\\\"https://i.ibb.co/YZFhYNQ/highlight-03-en.jpg\\\");\\n background-repeat: no-repeat;\\n background-size: cover;\\n background-position: center; }\\n.hero-section-cityzen {\\n height: 70vh;\\n color: white;\\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(\\\"https://i.ibb.co/QQj0Rww/919e98bae391ad1498543bcb98ae553a-sand-cat-sands.jpg\\\");\\n background-repeat: no-repeat;\\n background-size: cover;\\n background-position: center; }\\n.hero-section-page11 {\\n height: 70vh;\\n color: white;\\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(\\\"https://i.ibb.co/1MLbgRg/Hawksbill-Turtles-01.jpg\\\");\\n background-repeat: no-repeat;\\n background-size: cover;\\n background-position: center; }\\n.hero-section-page10 {\\n height: 70vh;\\n color: white;\\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(\\\"https://i.ibb.co/Qc4Q7C9/medium.jpg\\\");\\n background-repeat: no-repeat;\\n background-size: cover;\\n background-position: center; }\\n.hero-section-page13 {\\n height: 70vh;\\n color: white;\\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(\\\"https://i.ibb.co/tbqfmzP/80815af092f71b1f20dfa4bd6f1cb735.jpg\\\");\\n background-repeat: no-repeat;\\n background-size: cover;\\n background-position: center; }\\n.hero-section-page14 {\\n height: 70vh;\\n color: white;\\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(\\\"https://i.ibb.co/smFST4x/Screenshot-2021-12-22-at-15-02-08.png\\\");\\n background-repeat: no-repeat;\\n background-size: cover;\\n background-position: center; }\\n.hero-text {\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n justify-content: center;\\n height: 100%;\\n font-size: 1.4em;\\n letter-spacing: 9px; }\\n.hero-img {\\n position: relative;\\n height: 85vh; }\\n.hero-section .hero-img {\\n position: relative;\\n height: 60vh; }\\n.page-19-hero img {\\n height: 90vh; }\\n.content p {\\n font-size: 20px;\\n color: white; }\\n.content {\\n position: absolute;\\n bottom: -40px;\\n text-align: center;\\n left: 50%;\\n -webkit-transform: translate(-50%, -50%);\\n transform: translate(-50%, -50%); }\\n.main-chart {\\n display: block;\\n overflow: hidden;\\n text-align: center;\\n background: #f6f6f6; }\\n.main-chart button {\\n width: 100%;\\n padding: 35px 0px;\\n border: none;\\n background: white; }\\n.main-chart .active-button {\\n background: #f6f6f6; }\\n.main-chart button a {\\n color: black;\\n font-weight: bold;\\n font-size: 30px; }\\n.main-chart p {\\n font-size: 16px;\\n font-weight: 500;\\n padding: 25px 0px; }\\n.main-chart-content {\\n max-width: 1200px;\\n margin: auto; }\\n.main-chart-content-inner {\\n padding: 0px 100px; }\\n.main-chart-content-inner img {\\n width: 100%;\\n margin: 25px 0px;\\n border-radius: 25px;\\n height: 350px;\\n position: relative;\\n opacity: 0.7;\\n z-index: -1; }\\n.main-chart-content-inner h4 {\\n position: absolute;\\n top: 0px;\\n left: 50%;\\n top: 85%;\\n -webkit-transform: translate(-50%, -50%);\\n transform: translate(-50%, -50%);\\n color: white;\\n z-index: 1;\\n opacity: 1; }\\n.news {\\n padding: 25px 50px; }\\n.news h2 {\\n padding: 50px 0px;\\n font-size: 30px;\\n font-weight: 600; }\\n.news h4 {\\n font-size: 22px;\\n padding: 10px 0px; }\\n.news-item {\\n padding-top: 25px; }\\n.news-inner img {\\n width: 100%; }\\n.news-inner button {\\n border: none;\\n background: white; }\\n.news-inner button a {\\n text-decoration: none;\\n color: black; }\\n.right a {\\n margin: 0px 10px; }\\n.right .fb {\\n padding: 14px 22px;\\n border: 2px solid white;\\n border-radius: 50%; }\\n.right .insta {\\n padding: 14px 18px;\\n border: 2px solid white;\\n border-radius: 50%; }\\n.right .twitter {\\n padding: 14px 18px;\\n border: 2px solid white;\\n border-radius: 50%; }\\n.footer ul li {\\n list-style: none;\\n color: white; }\\n.footer a {\\n color: white; }\\n.menu {\\n display: flex; }\\n.bottom-app {\\n padding-top: 100px; }\\n.bottom-app .apps a {\\n margin: 0px 10px; }\\n.footer {\\n background: url(\\\"https://i.ibb.co/3mkCyyL/Latest-publication-on-Proximate-underwater-soundscape-of-a-North-Sea-offshore-petroleum-exploration.jpg\\\");\\n background-repeat: no-repeat;\\n background-size: cover;\\n padding: 25px 50px; }\\n.apps {\\n position: absolute;\\n right: 20px;\\n display: flex; }\\n.sidemenu ul {\\n position: absolute;\\n right: 10px;\\n z-index: 1000;\\n top: 100px; }\\n.sidemenu ul li {\\n list-style: none; }\\n.sidemenu ul li a {\\n color: white;\\n text-decoration: none; }\\n@media only screen and (max-width: 992px) {\\n .content {\\n position: absolute;\\n bottom: -60px;\\n width: 100%; }\\n .footer-logo {\\n display: none; }\\n .footer-bg img {\\n height: 100vh; }\\n .menu {\\n flex-direction: column; }\\n .right {\\n flex-direction: column; }\\n .left {\\n padding-top: 80px; }\\n .apps {\\n position: relative;\\n text-align: center;\\n flex-direction: column;\\n margin: auto; }\\n .sidemenu ul {\\n display: none; }\\n .apps {\\n top: -100px; } }\\n@media only screen and (max-width: 768px) {\\n .footer-bg img {\\n width: 100%;\\n position: absolute;\\n top: 0px;\\n left: 0px;\\n z-index: -1;\\n height: 120vh; }\\n .left {\\n padding-top: 150px; }\\n .apps {\\n top: -100px; } }\\n.logo {\\n width: 250px;\\n margin-top: 0px; }\\n/* end homepage */\\n/* start page19 */\\n.page-19-birds-section {\\n padding-top: 20px;\\n padding-bottom: 25px;\\n text-align: center; }\\n.page-19-birds-section p {\\n font-size: 20px;\\n font-weight: 300 !important; }\\n.button-abc a button {\\n background: #399ab6;\\n color: white;\\n border: none;\\n outline: none;\\n width: 50px;\\n height: 50px;\\n margin: 10px 5px;\\n border-radius: 3px;\\n font-size: 24px; }\\n.button4 {\\n display: flex;\\n justify-content: center;\\n flex-wrap: wrap !important; }\\n.button4 button {\\n width: 130px;\\n margin: 10px 8px;\\n background: #235e65;\\n border: none;\\n outline: none;\\n color: white;\\n border-radius: 3px;\\n padding: 8px 10px; }\\n.sort-birds {\\n padding: 0px 200px; }\\n.sort-birds button {\\n background: #399ab6;\\n color: white;\\n border: none;\\n outline: none;\\n width: 40px;\\n height: 40px;\\n margin: 10px 0px;\\n border-radius: 3px; }\\n.sort-birds-inner {\\n border-top: 2px solid #399ab6;\\n margin: 0px 50px;\\n padding-bottom: 0px; }\\n.sort-birds-inner img {\\n width: 250px; }\\n.sort-birds-inner .single-sort-birds {\\n margin: 25px 0px; }\\n.sort-birds-inner .single-sort-birds h5 {\\n color: #399ab6; }\\n.sort-birds-inner .single-sort-birds p {\\n font-size: 20px;\\n font-weight: 400;\\n color: black; }\\n.sort-birds-inner .sort-birds-text {\\n padding: 0px 10px; }\\n@media only screen and (max-width: 992px) {\\n .page19nav {\\n background: transparent; }\\n .logo {\\n width: 250px;\\n margin-top: 0px; }\\n .sort-birds {\\n padding: 0px 20px; }\\n .page-19-birds-section {\\n padding: 0px 20px; }\\n .page-19-hero img {\\n height: 700px; }\\n .sort-birds-inner img {\\n width: 200px; }\\n .page-19-hero img {\\n margin-top: 200px; }\\n .page-19-hero .hero-img {\\n position: relative;\\n height: 85vh; }\\n .hero-section {\\n height: 70vh; } }\\n@media only screen and (max-width: 768px) {\\n .hero-section {\\n height: 50vh; }\\n .sort-birds-inner img {\\n width: 180px; } }\\n/* end page19 */\\n/* start page 20 */\\n.page20-section {\\n text-align: center;\\n padding: 0px 200px;\\n padding-top: 20px; }\\n.birds20-dual-banner-main {\\n padding: 0px 300px; }\\n.birds20-dual-banner {\\n max-width: 1020px;\\n display: flex;\\n border-top: 2px solid black;\\n margin: auto; }\\n.birds20-dual-banner img {\\n width: 400px;\\n margin: 50px 20px; }\\n.button-20-ex-lc {\\n max-width: 1020px;\\n border-top: 2px solid black;\\n padding-bottom: 50px;\\n margin: auto;\\n position: relative;\\n display: block;\\n overflow: hidden;\\n display: flex;\\n justify-content: center;\\n text-align: center; }\\n.button-20-ex-lc p {\\n border: none;\\n outline: none;\\n width: 90px;\\n height: 90px;\\n line-height: 100px;\\n color: white;\\n background: #c8e3d9;\\n font-size: 24px;\\n font-weight: 600;\\n margin: 0px 5px;\\n margin-top: 20px;\\n float: left;\\n overflow: hidden; }\\n.button-20-ex-lc .active-button {\\n background: #057f53; }\\n.page20-form {\\n max-width: 1000px; }\\n.second-collumn {\\n padding-left: 50px; }\\n.page20-form-main {\\n max-width: 1020px;\\n padding: 20px 50px;\\n border-top: 2px solid black;\\n margin: auto; }\\n.page20-form {\\n max-width: 1000px;\\n padding: 0px 25px;\\n margin: auto;\\n background: #e4f1ec;\\n margin-bottom: 50px; }\\n.page20-form-main {\\n max-width: 1020px;\\n padding: 20px 10px;\\n border-top: 2px solid black;\\n margin: auto; }\\n.page20-form li {\\n width: 180px;\\n list-style: none;\\n font-weight: bold; }\\n.page20-form span {\\n text-decoration: none;\\n color: black;\\n padding: 0px 50px; }\\n.page20-data {\\n margin: 20px 0px; }\\n.page20-form h6 {\\n font-weight: bold;\\n padding-top: 25px; }\\n@media only screen and (max-width: 1024px) {\\n .page-19-hero .hero-img {\\n position: relative;\\n height: 70vh; } }\\n@media only screen and (max-width: 992px) {\\n .page20-section {\\n padding: 0px 25px; }\\n .second-collumn {\\n padding-left: 15px; }\\n .button-20-ex-lc {\\n flex-direction: inherit; } }\\n@media only screen and (max-width: 768px) {\\n .birds20-dual-banner {\\n flex-direction: column; }\\n .birds20-dual-banner-main {\\n padding: 0px 25px; }\\n .birds20-dual-banner img {\\n width: 250px;\\n margin: 20px auto; }\\n .button-20-ex-lc {\\n display: block; } }\\n/* end page 20 */\\n/* start page 18 */\\n.clock-page18 {\\n max-width: 1200px;\\n margin: auto; }\\n.clock-page18 p {\\n font-weight: bolder; }\\n.quetion span {\\n font-size: 18px;\\n font-weight: 600; }\\n.quetion form label {\\n font-size: 22px;\\n line-height: 40px;\\n padding-left: 10px; }\\n.quetion form input {\\n width: 20px;\\n height: 18px;\\n border: 2px solid red; }\\n.button-action {\\n flex-wrap: wrap; }\\n.button-action button {\\n width: 250px;\\n font-size: 24px;\\n font-weight: bolder;\\n margin: 10px 10px;\\n border: none;\\n background: #98b0cb;\\n padding: 10px 0px;\\n border-radius: 25px;\\n color: white; }\\n.button-action .active {\\n background: #6489b1; }\\n/* end page 18 */\\n.footer-logo {\\n width: 250px; }\\n/* start page-16 */\\n.glossery-page16 {\\n padding: 25px 0px;\\n padding-bottom: 50px; }\\n.glossery-page16 h5 {\\n color: #156daa;\\n font-size: 18px;\\n line-height: 16px; }\\n.glossery-page16 p {\\n font-size: 16px;\\n font-weight: 500 !important; }\\n.glossery-item-page16 {\\n padding-top: 10px; }\\n/* end page-16 */\\n.captcha {\\n background-color: #f9f9f9;\\n border: none;\\n border-radius: 5px;\\n color: #4c4a4b;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n border-radius: 25px;\\n margin: auto;\\n margin-bottom: 50px; }\\n@media screen and (max-width: 500px) {\\n .captcha {\\n flex-direction: column; }\\n .text {\\n margin: 0.5em !important;\\n text-align: center; }\\n .logo {\\n -ms-grid-row-align: center !important;\\n align-self: center !important; }\\n .spinner {\\n margin: 2em 0.5em 0.5em 0.5em !important; }\\n .ls-container .ls-detail {\\n width: 80%; } }\\n.text {\\n font-size: 16px;\\n font-weight: 500; }\\n.spinner {\\n position: relative;\\n width: 2em;\\n height: 2em;\\n display: flex;\\n margin: 2em 1em;\\n align-items: center;\\n justify-content: center; }\\n.captcha input[type=\\\"checkbox\\\"] {\\n position: absolute;\\n opacity: 0;\\n z-index: -1; }\\n.captcha input[type=\\\"checkbox\\\"] + .checkmark {\\n display: inline-block;\\n width: 2em;\\n height: 2em;\\n background-color: #fcfcfc;\\n border: 2.5px solid #c3c3c3;\\n border-radius: 3px;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n cursor: pointer; }\\n.captcha input[type=\\\"checkbox\\\"] + .checkmark span {\\n content: '';\\n position: relative;\\n /*\\r\\n\\tposition:absolute;\\r\\n\\tborder-bottom:3px solid;\\r\\n\\tborder-right:3px solid;\\r\\n\\tborder-color:#029f56;*/\\n margin-top: -3px;\\n -webkit-transform: rotate(45deg);\\n transform: rotate(45deg);\\n width: .75em;\\n height: 1.2em;\\n opacity: 0; }\\n.captcha input[type=\\\"checkbox\\\"] + .checkmark > span:after {\\n content: '';\\n position: absolute;\\n display: block;\\n height: 3px;\\n bottom: 0;\\n left: 0;\\n background-color: #029f56; }\\n.captcha input[type=\\\"checkbox\\\"] + .checkmark > span:before {\\n content: '';\\n position: absolute;\\n display: block;\\n width: 3px;\\n bottom: 0;\\n right: 0;\\n background-color: #029f56; }\\n.captcha input[type=\\\"checkbox\\\"]:checked + .checkmark {\\n -webkit-animation: 2s spin forwards;\\n animation: 2s spin forwards; }\\n.captcha input[type=\\\"checkbox\\\"]:checked + .checkmark > span {\\n -webkit-animation: 1s fadein 1.9s forwards;\\n animation: 1s fadein 1.9s forwards; }\\n.captcha input[type=\\\"checkbox\\\"]:checked + .checkmark > span:after {\\n -webkit-animation: .3s bottomslide 2s forwards;\\n animation: .3s bottomslide 2s forwards; }\\n.captcha input[type=\\\"checkbox\\\"]:checked + .checkmark > span:before {\\n -webkit-animation: .5s rightslide 2.2s forwards;\\n animation: .5s rightslide 2.2s forwards; }\\n@-webkit-keyframes fadein {\\n 0% {\\n opacity: 0; }\\n 100% {\\n opacity: 1; } }\\n@keyframes fadein {\\n 0% {\\n opacity: 0; }\\n 100% {\\n opacity: 1; } }\\n@-webkit-keyframes bottomslide {\\n 0% {\\n width: 0; }\\n 100% {\\n width: 100%; } }\\n@keyframes bottomslide {\\n 0% {\\n width: 0; }\\n 100% {\\n width: 100%; } }\\n@-webkit-keyframes rightslide {\\n 0% {\\n height: 0; }\\n 100% {\\n height: 100%; } }\\n@keyframes rightslide {\\n 0% {\\n height: 0; }\\n 100% {\\n height: 100%; } }\\n.captcha .logo {\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n height: 100%;\\n align-self: flex-end;\\n margin: 0.5em 1em; }\\n.captcha .logo img {\\n height: 2em;\\n width: 2em; }\\n.captcha .logo p {\\n color: #9d9ba7;\\n margin: 0;\\n font-size: 1em;\\n font-weight: 700;\\n margin: .4em 0 .2em 0; }\\n.captcha .logo small {\\n color: #9d9ba7;\\n margin: 0;\\n font-size: .8em; }\\n::-moz-selection {\\n background-color: transparent;\\n color: teal; }\\n::selection {\\n background-color: transparent;\\n color: teal; }\\n::-moz-selection {\\n background-color: transparent;\\n color: teal; }\\n.message-page12 textarea {\\n width: 100%;\\n max-width: 1000px;\\n height: 200px;\\n background: #98b0cb;\\n color: white;\\n border: none;\\n outline: none;\\n border-radius: 25px;\\n z-index: -1; }\\n.page-12 button {\\n width: 100%;\\n max-width: 1000px;\\n font-size: 24px;\\n font-weight: bolder;\\n margin: 10px 10px;\\n border: none;\\n background: #316297;\\n padding: 10px 0px;\\n border-radius: 25px;\\n color: white; }\\n.vision-mission {\\n max-width: 1000px;\\n background: #98b0cb;\\n margin: auto;\\n height: 200px;\\n border-radius: 25px;\\n color: white;\\n margin-top: 35px; }\\n.vision-mission h3 {\\n padding-top: 50px; }\\n.page-10 img {\\n width: 100%;\\n padding-top: 10px; }\\n.page-10 p {\\n padding: 25px 25px;\\n font-size: 18px;\\n font-weight: 500 !important;\\n text-align: left; }\\n.page-9 img {\\n width: 100%;\\n border-radius: 25px; }\\n.single-news-page9 {\\n margin: 50px 0px; }\\n.news-desc-page9 {\\n padding: 20px 10px; }\\n.news-desc-page9 h5 {\\n text-align: left;\\n border-bottom: 2px solid #235e65;\\n padding-bottom: 15px; }\\n.news-desc-page9 span {\\n text-align: left;\\n font-weight: 400;\\n padding-bottom: 10px;\\n display: block;\\n width: 100%; }\\n.news-desc-page9 p {\\n text-align: left;\\n font-size: 17px;\\n font-weight: 400 !important;\\n word-spacing: normal; }\\n.news-desc-page9 button {\\n margin-top: -10px; }\\n.circle,\\n.circle:before,\\n.circle:after {\\n border-radius: 50%; }\\n.menumain {\\n height: 100vh; }\\n@media (max-width: 402px) {\\n .menumain {\\n height: 76vh; } }\\n.menunav {\\n position: absolute;\\n display: block;\\n left: 50%;\\n -webkit-transform: translateX(-35%);\\n transform: translateX(-35%);\\n margin: 25px auto;\\n min-width: 10em;\\n width: 70%;\\n max-width: 40em; }\\n.menunav ul {\\n position: relative;\\n padding: 50%;\\n max-width: 0;\\n max-height: 0;\\n list-style: none; }\\n.menunav li {\\n position: absolute; }\\n.slice {\\n overflow: hidden;\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 40%;\\n height: 40%;\\n -webkit-transform-origin: 100% 100%;\\n transform-origin: 100% 100%; }\\n/* Cell orientation */\\n.coconut {\\n -webkit-transform: rotate(13deg) skewX(40deg);\\n transform: rotate(13deg) skewX(40deg); }\\n.vanilla {\\n -webkit-transform: rotate(64.43deg) skewX(40deg);\\n transform: rotate(64.43deg) skewX(40deg); }\\n.orange {\\n -webkit-transform: rotate(115.86deg) skewX(40deg);\\n transform: rotate(115.86deg) skewX(40deg); }\\n.almond {\\n -webkit-transform: rotate(167.29deg) skewX(40deg);\\n transform: rotate(167.29deg) skewX(40deg); }\\n.grape {\\n -webkit-transform: rotate(218.71deg) skewX(40deg);\\n transform: rotate(218.71deg) skewX(40deg); }\\n.blackberry {\\n -webkit-transform: rotate(270.14deg) skewX(40deg);\\n transform: rotate(270.14deg) skewX(40deg); }\\n.cherry {\\n -webkit-transform: rotate(321.57deg) skewX(40deg);\\n transform: rotate(321.57deg) skewX(40deg); }\\n.menunav label {\\n cursor: pointer; }\\n.slice label {\\n display: block;\\n width: 200%;\\n height: 200%;\\n -webkit-transform: skew(-40deg) rotate(-65deg);\\n transform: skew(-40deg) rotate(-65deg);\\n line-height: 1.9;\\n text-align: center;\\n color: white;\\n font-weight: bold; }\\n.slice label span {\\n display: block; }\\n.slice label:hover {\\n color: white;\\n background-color: transparent;\\n transition: all 0.5s ease; }\\n.circle .menuname:hover {\\n color: white;\\n transition: color 0.5s ease; }\\n.menudesc {\\n width: 280px; }\\n/* Cell background colors */\\n.coconut label,\\n.ococonut:checked ~ nav .unsel {\\n background-size: 40%;\\n background-position: center;\\n background-blend-mode: multiply;\\n background-color: powderblue; }\\n.vanilla label,\\n.ovanilla:checked ~ nav .unsel {\\n background-size: 40%;\\n background-position: center;\\n background-blend-mode: multiply;\\n background-color: #20b2aa; }\\n.orange label,\\n.oorange:checked ~ nav .unsel {\\n background-size: 40%;\\n background-position: center;\\n background-blend-mode: multiply;\\n background-color: lightseagreen; }\\n.almond label,\\n.oalmond:checked ~ nav .unsel {\\n background-size: 40%;\\n background-position: center;\\n background-blend-mode: multiply;\\n background-color: paleturquoise; }\\n.grape label,\\n.ogrape:checked ~ nav .unsel {\\n background-size: 40%;\\n background-position: center;\\n background-blend-mode: multiply;\\n background-color: lightskyblue; }\\n.blackberry label,\\n.oblackberry:checked ~ nav .unsel {\\n background-size: 40%;\\n background-position: center;\\n background-blend-mode: multiply;\\n background-color: rgba(0, 0, 0, 0.4); }\\n.cherry label,\\n.ocherry:checked ~ nav .unsel {\\n background-size: 40%;\\n background-position: center;\\n background-blend-mode: multiply;\\n background-color: lightblue; }\\n.circle .slice img {\\n position: absolute;\\n top: 62%;\\n -webkit-transform: rotate(-38deg) skewX(17deg);\\n transform: rotate(-38deg) skewX(17deg);\\n left: 52%;\\n height: 35px;\\n width: 75px;\\n z-index: 100; }\\n.slice label {\\n font-weight: 700;\\n line-height: 5; }\\n.circle label {\\n font-weight: 700;\\n line-height: 5;\\n font-size: 0.8em; }\\n.slice p {\\n width: 100px;\\n margin-left: 185px; }\\n.unsel {\\n z-index: 2;\\n top: 34%;\\n left: 34%;\\n width: 32%;\\n height: 32%;\\n text-align: center;\\n background-color: wheat;\\n display: none; }\\n.unsel label {\\n display: block;\\n width: 100%;\\n height: 100%;\\n line-height: 9; }\\n.middle {\\n z-index: 1;\\n top: 19%;\\n left: 19%;\\n width: 40%;\\n height: 40%;\\n text-align: center;\\n background-size: cover;\\n background-blend-mode: multiply;\\n background-color: paleturquoise;\\n background-position: center;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n border: 7px solid white; }\\n.middle .mainHeading {\\n font-size: 1.3em;\\n font-weight: 700;\\n color: white;\\n display: inline-block;\\n border-bottom: 1px solid white;\\n padding: 0.2em 1.4em;\\n margin-bottom: 0.2em; }\\n.middle .mainText {\\n color: white;\\n font-weight: 500;\\n line-height: 1.5;\\n font-size: 0.8em; }\\n.middle > div {\\n margin-top: 3em; }\\n.menunav {\\n position: absolute;\\n left: 50%; }\\n.visible {\\n display: none;\\n position: absolute;\\n margin: 250px 0 0 250px; }\\n.hidden {\\n display: none; }\\n.visible ul {\\n list-style-type: none; }\\n.visible details ul {\\n list-style-type: square; }\\n.visible a {\\n font-size: 120%;\\n text-decoration: none;\\n color: purple; }\\n.Reseau a {\\n font-size: 160%; }\\n.Reseau a:hover {\\n color: red; }\\n.circle label span {\\n -webkit-transform: rotate(-180deg);\\n transform: rotate(-180deg); }\\n/* Media */\\n@media (max-width: 992px) {\\n .menunav {\\n -webkit-transform: translateX(-55%);\\n transform: translateX(-55%);\\n margin-top: -20px; }\\n .circle label {\\n font-size: 0.8em; }\\n .middle > div {\\n margin-top: 0; }\\n .circle {\\n width: 500px;\\n height: 500px;\\n overflow: hidden; }\\n .circle li {\\n width: 50%;\\n height: 50%; }\\n .middle {\\n top: 24%;\\n left: 24%; }\\n .menunav ul {\\n padding: 55%; } }\\n@media (max-width: 992px) and (max-width: 608px) {\\n .menumain {\\n height: 20vh; }\\n .circle .slice img {\\n height: 30px;\\n width: 70px; } }\\n@media (max-width: 992px) {\\n #carouselExampleIndicators {\\n margin-top: -100px;\\n width: 100%;\\n max-height: 70vh; }\\n #carouselExampleIndicators img {\\n max-height: 70vh; } }\\n@media (max-width: 992px) and (max-width: 992px) {\\n .homenav {\\n background: #fe632a; }\\n #carouselExampleIndicators {\\n margin-top: 0px; } }\\n@media (max-width: 992px) {\\n .species-pie {\\n background: #dff0e1; }\\n .habitat-pie {\\n background: #f7ddd0; }\\n .aquatic-pie {\\n background: #d2e2f0; }\\n .species-btn {\\n background: #dff0e1;\\n border-bottom: 1px solid yellowgreen;\\n padding: 35px 0px; }\\n .species-btn button {\\n border: none;\\n outline: none;\\n font-weight: 800;\\n font-size: 24px;\\n background: #dff0e1;\\n border-bottom: 2px solid black; }\\n .habitat-btn {\\n background: #f7ddd0;\\n border-bottom: 1px solid yellowgreen;\\n padding: 35px 0px; }\\n .habitat-btn button {\\n border: none;\\n outline: none;\\n font-weight: 800;\\n font-size: 24px;\\n background: #f7ddd0;\\n border-bottom: 2px solid black; }\\n .aquatic-btn {\\n background: #d2e2f0;\\n border-bottom: 1px solid yellowgreen;\\n padding: 35px 0px; }\\n .aquatic-btn button {\\n border: none;\\n outline: none;\\n font-weight: 800;\\n font-size: 24px;\\n background: #d2e2f0;\\n border-bottom: 2px solid black; }\\n /* Container holding the image and the text */\\n .citizen-page1 {\\n position: relative;\\n text-align: center;\\n color: white;\\n padding: 0px 50px; }\\n .citizen-page1 img {\\n width: 100%;\\n height: 70vh;\\n margin-bottom: 50px; }\\n .citizen-page1 h2 {\\n color: black;\\n font-weight: bolder;\\n padding: 50px 0px; }\\n /* Centered text */\\n .citizen-page1 .centered {\\n position: absolute;\\n top: 75%;\\n left: 50%;\\n -webkit-transform: translate(-50%, -50%);\\n transform: translate(-50%, -50%); }\\n .citizen-page1 .centered p {\\n color: white;\\n font-weight: bolder; }\\n .habitatepagebtn button {\\n border: none;\\n outline: none;\\n font-weight: 800;\\n font-size: 24px;\\n border-bottom: 2px solid black;\\n background: none;\\n margin: 20px 20px; }\\n .page-citizen {\\n display: flex;\\n justify-content: center;\\n align-items: center; }\\n .form-row {\\n margin: 25px 0px; }\\n .name {\\n width: 200px;\\n text-align: left;\\n font-size: 18px;\\n font-weight: bolder; }\\n .form-row input {\\n width: 300px;\\n background: #98b0cb;\\n border: none;\\n outline: none;\\n padding: 10px 10px;\\n border-radius: 15px;\\n position: relative; }\\n .form-row textarea {\\n width: 600px;\\n height: 200px;\\n background: #98b0cb;\\n border: none;\\n outline: none;\\n padding: 10px 10px;\\n border-radius: 15px;\\n position: relative; } }\\n@media (max-width: 992px) and (max-width: 992px) {\\n .form-row textarea {\\n width: 350px;\\n height: 150px;\\n background: #98b0cb;\\n border: none;\\n outline: none;\\n padding: 10px 10px;\\n border-radius: 15px;\\n position: relative; } }\\n@media (max-width: 992px) {\\n .form-row .img-input {\\n position: absolute;\\n right: 10px;\\n top: 10px; }\\n .drag {\\n display: flex;\\n justify-content: center;\\n align-items: center; } }\\n@media (max-width: 992px) and (max-width: 502px) {\\n .drag {\\n flex-direction: column; }\\n .form-row textarea {\\n width: 300px;\\n height: 150px;\\n background: #98b0cb;\\n border: none;\\n outline: none;\\n padding: 10px 10px;\\n border-radius: 15px;\\n position: relative; } }\\n@media (max-width: 992px) {\\n .ct button {\\n width: 100%;\\n max-width: 1000px;\\n font-size: 24px;\\n font-weight: bolder;\\n margin: 10px 10px;\\n border: none;\\n background: #316297;\\n padding: 10px 0px;\\n border-radius: 25px;\\n color: white; }\\n .page-8-btn button {\\n width: 200px;\\n border: none;\\n outline: none;\\n background: none;\\n margin: 10px 0px;\\n padding: 4px 0px;\\n font-weight: bolder; }\\n .page-8-btn .btnclr1 {\\n background: #6489b1;\\n color: white; }\\n .page-8-btn .btnclr2 {\\n background: #a0d2a4;\\n color: white; }\\n .page-8-btn .btnclr3 {\\n background: #81bec4;\\n color: white; }\\n .page-8-btn .btnclr4 {\\n background: #55a47e;\\n color: white; }\\n .modal-dialog {\\n opacity: 0.6;\\n color: #1c7eb6;\\n font-weight: bolder; }\\n .profile-inf {\\n padding-bottom: 25px; }\\n .profile-inf h6 {\\n color: black;\\n position: relative; }\\n .profile-inf i {\\n position: absolute;\\n right: 10px;\\n margin-top: -50px; }\\n .modal-content .dlt {\\n background: green !important;\\n color: #1c7eb6;\\n padding: 10px 25px;\\n border: none;\\n border-radius: 10px;\\n color: white; } }\\n.ls-filter-icons {\\n position: absolute;\\n top: 0;\\n margin: 0;\\n left: 0;\\n z-index: 1; }\\n.ls-filter {\\n margin: 0;\\n left: 45px; }\\n.pa-0 {\\n padding: 0 !important; }\\n.filteropt {\\n padding-top: 0;\\n padding-bottom: 0; }\\n.filter-title {\\n font-size: 16px;\\n padding-top: 8px;\\n padding-bottom: 8px; }\\n.cinfofilter .cinfofiltertitle {\\n min-width: 120px;\\n display: inline-block;\\n margin-bottom: 0; }\\n.cinfofilter .chekbox-custom {\\n display: inline-block;\\n font-weight: 400;\\n padding-right: 10px;\\n padding-left: 20px; }\\n.ng5-slider-bar-wrapper {\\n top: auto;\\n left: 0;\\n margin: 0 0 0 -16px;\\n padding: 0 0 0 0px !important;\\n height: 100%;\\n width: 32px; }\\n.ng5-slider-span {\\n padding: 0px !important; }\\n.chekbox-custom {\\n font-size: 16px;\\n display: inline-block;\\n font-weight: 300;\\n margin: 0 10px !important;\\n padding: 0px 20px; }\\n.ls-filter {\\n border-radius: 3px;\\n background-color: rgba(255, 255, 255, 0.75);\\n padding: 8px;\\n position: absolute;\\n top: 0;\\n margin: 10px 10px 10px 0px;\\n padding: 10px 10px 10px 20px; }\\n.cinfofilterrow {\\n position: absolute;\\n top: 10px; }\\n.cinfofilter {\\n z-index: 99;\\n background: #ffffffd9;\\n width: 100%;\\n margin: auto;\\n box-shadow: 0 0 5px 0 #0000002e; }\\n.filteropt {\\n display: flex;\\n align-items: center;\\n justify-content: space-between; }\\n.checkmark {\\n position: absolute;\\n top: 5px;\\n left: 0;\\n height: 14px;\\n width: 14px;\\n border: 1px solid #d7d7d7;\\n background-color: #ffffff; }\\n.checkmark:after {\\n left: 4px;\\n top: 1px;\\n width: 4px;\\n height: 8px;\\n border: solid white;\\n border-width: 0 2px 2px 0;\\n -webkit-transform: rotate(45deg);\\n transform: rotate(45deg); }\\n.cinfofilter .cinfofiltertitle {\\n text-align: left;\\n font-size: 18px; }\\n@media (max-width: 765px) {\\n .ccd2 {\\n justify-content: flex-start;\\n flex-wrap: wrap; }\\n .cinfofilterrow {\\n position: initial; }\\n .cinfofilter .cinfofiltertitle {\\n text-align: left;\\n font-size: 14px;\\n padding: 4px 6px 4px 6px !important;\\n max-width: 50px !important; }\\n .cinfofilterrow {\\n margin: 0px !important; } }\\n::ng-deep .ng5-slider.ng5-slider-vertical .ng5-slider-bar-wrapper {\\n top: auto;\\n left: 0;\\n margin: 0 0 0 -16px;\\n padding: 0 0 0 16px;\\n height: 100%;\\n width: 0px !important; }\\n.pull-right {\\n position: absolute;\\n right: 0px;\\n top: 0px; }\\n@media (max-width: 600px) {\\n .ls-filter {\\n padding: 0px;\\n display: flex;\\n flex-wrap: wrap; } }\\n.searchicon {\\n position: absolute;\\n bottom: 5%;\\n left: 0%;\\n margin-bottom: 15px;\\n display: block;\\n z-index: 9999;\\n right: 0%;\\n top: 20% !important; }\\n.dropup .dropdown-toggle::after {\\n display: none; }\\n.locationDiv {\\n display: flex; }\\n.locationDiv_rlt {\\n display: flex;\\n justify-content: center; }\\n.filterDiv {\\n width: 30%;\\n display: inline-block;\\n padding-left: 1%; }\\n.locationText {\\n width: 40%;\\n display: inline-block; }\\n.modal-dialog {\\n opacity: 1.0;\\n color: #1c7eb6;\\n font-weight: bolder; }\\n.locationsearchicon {\\n height: 1px;\\n background: #0000001c;\\n margin: 10px 0px 10px 0px; }\\n.ngucarouselPointDefault .ngucarouselPoint {\\n padding: 0px !important; }\\n.ngucarouselPoint {\\n list-style-type: none;\\n text-align: center;\\n padding: 0px;\\n margin-top: -20px;\\n margin-bottom: 0px;\\n white-space: nowrap;\\n overflow: auto;\\n box-sizing: border-box; }\\n.box-style {\\n padding: 6px;\\n border: 1px solid gray;\\n color: black;\\n border-radius: 50%; }\\n.social-dropdown {\\n display: block !important; }\\n.modal-body {\\n padding: 0px !important; }\\n.ls-sptitle {\\n padding: 20px !important; }\\n@media (max-width: 991px) {\\n .socialicon.locationsearchicon .searchicon {\\n top: 1rem !important;\\n left: -1rem; }\\n .ls-sptitle {\\n padding: 0px !important; }\\n .box-style {\\n padding: 4px;\\n border: 1px solid gray;\\n color: black;\\n border-radius: 50%; }\\n .box-style-text {\\n font-size: 12px !important; } }\\n@media (max-width: 992px) {\\n .modal-dialog {\\n opacity: 1.0;\\n color: #1c7eb6;\\n font-weight: bolder; }\\n .modal-body {\\n padding: 14px !important; } }\\n@media (max-width: 767px) {\\n .modal {\\n padding-right: 0 !important;\\n padding-left: 0 !important; } }\\n@media screen and (max-width: 700px) {\\n .locationDiv {\\n display: flex;\\n flex-direction: column-reverse; }\\n .filterDiv {\\n width: 100%; }\\n .locationText {\\n width: 100%; } }\\n\"","import { Component, OnInit, OnChanges, Inject, PLATFORM_ID, OnDestroy, ViewEncapsulation } from '@angular/core';\r\nimport { loadModules } from 'esri-loader';\r\nimport { NgxSpinnerService } from 'ngx-spinner';\r\nimport { isPlatformBrowser } from '@angular/common';\r\nimport { ActivatedRoute, Router } from '@angular/router';\r\nimport { NguCarousel } from '@ngu/carousel';\r\nimport { Options } from 'ng5-slider';\r\nimport { MapService } from '../../../conservation-info/arcGis-map.service';\r\nimport { SpeciesService } from '../../../home/species/species.service';\r\nimport { StorageService } from '../../../core/storage.service';\r\nimport { environment } from '../../../../environments/environment';\r\nimport { HeaderService } from '../../../shared/header/header.service';\r\nimport { debug } from 'console';\r\n\r\n\r\ndeclare const $: any;\r\n\r\ninterface SimpleSliderModel {\r\n value: number;\r\n options: Options;\r\n}\r\n\r\n@Component({\r\n selector: 'app-location-search-mobile-ar',\r\n templateUrl: './location-search-mobile-ar.component.html',\r\n styleUrls: ['./location-search-mobile-ar.component.scss'],\r\n // encapsulation: ViewEncapsulation.None\r\n})\r\n\r\nexport class LocationSearchMobileArComponent implements OnInit, OnDestroy {\r\n verticalSlider1: SimpleSliderModel = {\r\n value: 10,\r\n options: {\r\n floor: 1,\r\n ceil: 20,\r\n vertical: true\r\n }\r\n };\r\n\r\n\r\n public show: boolean = false;\r\n public buttonName: any = 'Show';\r\n\r\n\r\n locationFilterDiv = false;\r\n locationFilterDetailDiv = false;\r\n selectedLayer = '';\r\n map: any;\r\n mapView: any;\r\n layerUrl = '';\r\n layerData: any;\r\n featureLayers = [];\r\n graphicsLayer;\r\n speciesList = [];\r\n currentLongitude = 54.37098285294529;\r\n currentLatitude = 24.452524894549093;\r\n token = '';\r\n speciesDetails = [];\r\n speciesMedia = [];\r\n divider = 0;\r\n isSpeciesNotAvailable = false;\r\n isSpeciesEmpty = true;\r\n validity: number;\r\n isBrowser: boolean;\r\n colorArray = [];\r\n currentLayer: number;\r\n currentSpecies: string;\r\n currentSpeciesCommonName: string;\r\n currentSpeciesLatinName: string;\r\n carouselBanner: NguCarousel;\r\n currentShareUrl: string;\r\n conservationList: any;\r\n currentLanguage = this.storageService.getValue('CurrentLanguage');\r\n lods = [{\r\n \"level\": 0,\r\n \"resolution\": 156543.03392800014,\r\n \"scale\": 5.91657527591555E8\r\n }, {\r\n \"level\": 1,\r\n \"resolution\": 78271.51696399994,\r\n \"scale\": 2.95828763795777E8\r\n }, {\r\n \"level\": 2,\r\n \"resolution\": 39135.75848200009,\r\n \"scale\": 1.47914381897889E8\r\n }, {\r\n \"level\": 3,\r\n \"resolution\": 19567.87924099992,\r\n \"scale\": 7.3957190948944E7\r\n }, {\r\n \"level\": 4,\r\n \"resolution\": 9783.93962049996,\r\n \"scale\": 3.6978595474472E7\r\n }, {\r\n \"level\": 5,\r\n \"resolution\": 4891.96981024998,\r\n \"scale\": 1.8489297737236E7\r\n }, {\r\n \"level\": 6,\r\n \"resolution\": 2445.98490512499,\r\n \"scale\": 9244648.868618\r\n }, {\r\n \"level\": 7,\r\n \"resolution\": 1222.992452562495,\r\n \"scale\": 4622324.434309\r\n }, {\r\n \"level\": 8,\r\n \"resolution\": 611.4962262813797,\r\n \"scale\": 2311162.217155\r\n }, {\r\n \"level\": 9,\r\n \"resolution\": 305.74811314055756,\r\n \"scale\": 1155581.108577\r\n }, {\r\n \"level\": 10,\r\n \"resolution\": 152.87405657041106,\r\n \"scale\": 577790.554289\r\n }, {\r\n \"level\": 11,\r\n \"resolution\": 76.43702828507324,\r\n \"scale\": 288895.277144\r\n }, {\r\n \"level\": 12,\r\n \"resolution\": 38.21851414253662,\r\n \"scale\": 144447.638572\r\n }, {\r\n \"level\": 13,\r\n \"resolution\": 19.10925707126831,\r\n \"scale\": 72223.819286\r\n }, {\r\n \"level\": 14,\r\n \"resolution\": 9.554628535634155,\r\n \"scale\": 36111.909643\r\n }, {\r\n \"level\": 15,\r\n \"resolution\": 4.77731426794937,\r\n \"scale\": 18055.954822\r\n }, {\r\n \"level\": 16,\r\n \"resolution\": 2.388657133974685,\r\n \"scale\": 9027.977411\r\n }, {\r\n \"level\": 17,\r\n \"resolution\": 1.1943285668550503,\r\n \"scale\": 4513.988705\r\n }, {\r\n \"level\": 18,\r\n \"resolution\": 0.5971642835598172,\r\n \"scale\": 2256.994353\r\n }, {\r\n \"level\": 19,\r\n \"resolution\": 0.29858214164761665,\r\n \"scale\": 1128.497176\r\n }];\r\n\r\n today = new Date();\r\n year = this.today.getFullYear();\r\n processYear = this.year - 5;\r\n\r\n constructor(\r\n @Inject(PLATFORM_ID) platformId: string,\r\n private mapService: MapService,\r\n public speciesService: SpeciesService,\r\n private spinner: NgxSpinnerService,\r\n public storageService: StorageService,\r\n private route: ActivatedRoute,\r\n private router: Router,\r\n private headerService: HeaderService,\r\n ) {\r\n\r\n if (this.storageService.getValue('CurrentLanguage') != 'ar') {\r\n this.storageService.setValue('CurrentLanguage', 'ar');\r\n window.location.reload();\r\n }\r\n\r\n this.isBrowser = isPlatformBrowser(platformId);\r\n this.layerUrl = 'https://enviroportal.ead.ae/server/rest/services/Enviroportal/TerrestrialBiodiversity/MapServer';\r\n this.isBrowser = isPlatformBrowser(platformId);\r\n this.colorArray = [\r\n '#fb8c00',\r\n '#f4c41e',\r\n '#808080',\r\n '#000033',\r\n '#33cc33',\r\n '#fb8c00',\r\n '#f4c41e',\r\n '#808080',\r\n '#000033',\r\n '#33cc33',\r\n ];\r\n this.currentLayer = null;\r\n this.currentSpecies = '';\r\n this.router.routeReuseStrategy.shouldReuseRoute = () => false;\r\n this.currentShareUrl = '';\r\n }\r\n\r\n ngOnInit() {\r\n\r\n\r\n // if (this.storageService.getValue('CurrentLanguage') != 'ar') {\r\n // this.storageService.setValue('CurrentLanguage', 'ar');\r\n // window.location.reload();\r\n // }\r\n\r\n\r\n // this.storageService.setValue('CurrentLanguage')\r\n this.headerService.sendUpdateBackgroundImage('assets/images/location_search.jpg');\r\n if (this.isBrowser) {\r\n this.spinner.show();\r\n // setTimeout(() => {\r\n // this.spinner.show();\r\n // }, 1);\r\n loadModules([\r\n 'esri/Map',\r\n 'esri/views/MapView',\r\n 'esri/layers/TileLayer',\r\n 'esri/Basemap',\r\n 'dojo/domReady!',\r\n ])\r\n .then(([EsriMap, EsriMapView, TileLayer, Basemap]) => {\r\n this.token = this.route.snapshot.data['tokenInfo'].result.token;\r\n this.validity = this.route.snapshot.data['tokenInfo'].result.expires;\r\n this.setCredentials(this.token, this.validity);\r\n this.mapService.loadLayerInfo(this.layerUrl, this.token)\r\n .subscribe(SpeciesData => {\r\n this.layerData = SpeciesData;\r\n this.spinner.hide();\r\n }, error => {\r\n this.spinner.hide();\r\n });\r\n\r\n let streetsTile = new TileLayer({\r\n url: \"https://arcgis.sdi.abudhabi.ae/arcgis/rest/services/Pub/BaseMapAra_LightGray_WM/MapServer\"\r\n });\r\n\r\n let grayBase = new Basemap({\r\n baseLayers: [streetsTile]\r\n });\r\n this.map = new EsriMap({\r\n basemap: grayBase\r\n });\r\n\r\n this.mapService.geolocation()\r\n .subscribe((location: any) => {\r\n this.currentLatitude = location.location.lat;\r\n this.currentLongitude = location.location.lng;\r\n this.mapView = new EsriMapView({\r\n container: 'mapViewNode',\r\n map: this.map,\r\n zoom: 8,\r\n center: [this.currentLongitude, this.currentLatitude],\r\n constraints: {\r\n lods: this.lods\r\n },\r\n ui: {\r\n components: ['attribution']\r\n }\r\n });\r\n\r\n this.loadMarker(this.currentLongitude, this.currentLatitude);\r\n this.mapView.on('click', (evt) => {\r\n // Search for symbols on click's position\r\n this.mapView.hitTest(evt.screenPoint)\r\n .then((response) => {\r\n if (response && response.results && response.results.length === 0) {\r\n this.loadMarker(evt.mapPoint.longitude, evt.mapPoint.latitude);\r\n this.getSpecies(evt);\r\n }\r\n // Retrieve the first symbol\r\n const graphic = response.results[0].graphic;\r\n if (graphic) {\r\n // We now have access to its attributes\r\n this.loadSpecieOnClick(graphic.attributes);\r\n }\r\n });\r\n });\r\n this.mapView.when(() => {\r\n this.checkTileLoad();\r\n // if (this.layerData !== null) {\r\n //this.spinner.hide();\r\n $('#location-search-disclaimer').modal('show');\r\n // }\r\n });\r\n }, error => {\r\n this.mapView = new EsriMapView({\r\n container: 'mapViewNode',\r\n map: this.map,\r\n zoom: 8,\r\n center: [this.currentLongitude, this.currentLatitude],\r\n constraints: {\r\n lods: this.lods\r\n },\r\n ui: {\r\n components: ['attribution']\r\n }\r\n });\r\n\r\n this.loadMarker(this.currentLongitude, this.currentLatitude);\r\n\r\n this.mapView.on('click', (evt) => {\r\n // Search for symbols on click's position\r\n this.mapView.hitTest(evt.screenPoint)\r\n .then((response) => {\r\n if (response && response.results && response.results.length === 0) {\r\n this.loadMarker(evt.mapPoint.longitude, evt.mapPoint.latitude);\r\n this.getSpecies(evt);\r\n }\r\n // Retrieve the first symbol\r\n const graphic = response.results[0].graphic;\r\n if (graphic) {\r\n // We now have access to its attributes\r\n this.loadSpecieOnClick(graphic.attributes);\r\n }\r\n });\r\n });\r\n //this.map.resize();\r\n //this.map.reposition();\r\n });\r\n\r\n setInterval(() =>\r\n this.mapService.loadToken()\r\n .subscribe(data => {\r\n this.token = data.result.token;\r\n this.validity = data.result.expires;\r\n this.setCredentials(data.result.token, data.result.expires);\r\n })\r\n , 1800000);\r\n }).catch(err => {\r\n console.error(err);\r\n });\r\n this.speciesService.getConservationStatusList('IUCN')\r\n .subscribe(statusList => {\r\n this.conservationList = statusList.result[0].conservationStatusList;\r\n });\r\n }\r\n }\r\n\r\n\r\n\r\n\r\n checkTileLoad() {\r\n if (this.isBrowser) {\r\n setInterval(() => {\r\n if (this.mapView.map.allLayers.items[0].loaded) {\r\n this.spinner.hide();\r\n return;\r\n }\r\n }, 1000);\r\n }\r\n }\r\n\r\n loadMarker(longitude, latitude) {\r\n loadModules([\r\n 'esri/layers/GraphicsLayer',\r\n 'esri/Graphic',\r\n 'esri/symbols/PictureMarkerSymbol',\r\n 'esri/geometry/Point',\r\n ])\r\n .then(([GraphicsLayer, Graphic, PictureMarkerSymbol, EsriPoint]) => {\r\n this.map.remove(this.graphicsLayer);\r\n const point = new EsriPoint([longitude, latitude]);\r\n this.graphicsLayer = new GraphicsLayer();\r\n const pictureMarkerSymbol = new PictureMarkerSymbol({\r\n 'url': 'assets/images/icons/marker.svg',\r\n 'height': 40,\r\n 'width': 40,\r\n });\r\n this.graphicsLayer.add(new Graphic(point, pictureMarkerSymbol));\r\n this.map.add(this.graphicsLayer);\r\n });\r\n }\r\n\r\n loadSpecieOnClick(attribute) {\r\n this.showSpecies(attribute.LatinName);\r\n }\r\n\r\n setCredentials(token, expires) {\r\n loadModules([\r\n 'esri/identity/IdentityManager',\r\n ])\r\n .then(([esriIdM]) => {\r\n const serverInfo = {\r\n 'server': 'https://enviroportal.ead.ae/server',\r\n 'tokenServiceUrl': 'https://enviroportal.ead.ae/server/tokens/',\r\n 'adminTokenServiceUrl': 'https://enviroportal.ead.ae/server/admin/generateToken',\r\n 'shortLivedTokenValidity': 60,\r\n 'currentVersion': 10.051,\r\n 'hasServer': true\r\n };\r\n const credentials = {\r\n 'userId': 'SpeciesApp',\r\n 'server': 'https://enviroportal.ead.ae/server',\r\n 'token': token,\r\n 'expires': expires,\r\n 'validity': 60,\r\n 'ssl': false,\r\n 'creationTime': new Date().getTime(),\r\n 'scope': 'server',\r\n 'resources': [\r\n this.layerUrl + '/0',\r\n this.layerUrl + '/1',\r\n this.layerUrl + '/2',\r\n this.layerUrl + '/3',\r\n this.layerUrl + '/4',\r\n ]\r\n };\r\n const idObject = {\r\n 'serverInfos': [\r\n serverInfo\r\n ],\r\n 'oAuthInfos': [],\r\n 'credentials': [\r\n credentials\r\n ]\r\n };\r\n esriIdM.destroyCredentials();\r\n esriIdM.initialize(idObject);\r\n esriIdM.tokenValidity = 720;\r\n });\r\n }\r\n\r\n addRemoveLayer(layerId) {\r\n this.locationFilterDetailDiv = true;\r\n this.selectedLayer = this.selectedLayer ? '' : layerId\r\n loadModules([\r\n 'esri/layers/FeatureLayer',\r\n ])\r\n .then(([FeatureLayer]) => {\r\n let definitionExpression = '';\r\n // tslint:disable-next-line:max-line-length\r\n if (layerId === 3) {\r\n definitionExpression = \"((X BETWEEN \" + (this.currentLongitude - 0.035) + \" AND \" + (this.currentLongitude + 0.035) + \") AND (Y BETWEEN \" + (this.currentLatitude - 0.035) + \" AND \" + (this.currentLatitude + 0.035) + \")) AND (ConfidenceLevel=1) AND START_DATE >= '\" + this.processYear + \"'\";\r\n } else {\r\n definitionExpression = '((X BETWEEN ' + (this.currentLongitude - 0.035) + ' AND ' + (this.currentLongitude + 0.035) + ') AND (Y BETWEEN ' + (this.currentLatitude - 0.035) + ' AND ' + (this.currentLatitude + 0.035) + ')) AND (ConfidenceLevel=1)';\r\n }\r\n //definitionExpression = '((X BETWEEN ' + (this.currentLongitude - 0.035) + ' AND ' + (this.currentLongitude + 0.035) + ') AND (Y BETWEEN ' + (this.currentLatitude - 0.035) + ' AND ' + (this.currentLatitude + 0.035) + ')) AND (ConfidenceLevel=1)';\r\n if (this.featureLayers[layerId] === undefined) {\r\n if (this.currentLayer === layerId) {\r\n this.currentLayer = null;\r\n this.currentSpecies = '';\r\n }\r\n const trailheadsRenderer = {\r\n 'type': 'simple',\r\n 'symbol': {\r\n 'type': 'picture-marker',\r\n 'url': 'assets/images/' + layerId + '.png',\r\n 'width': 20,\r\n 'height': 20\r\n }\r\n };\r\n this.featureLayers[layerId] = new FeatureLayer(this.layerUrl + '/' + layerId,\r\n {\r\n outFields: ['*'],\r\n definitionExpression: definitionExpression,\r\n // renderer: trailheadsRenderer, // set the visualization on the layer\r\n });\r\n this.map.add(this.featureLayers[layerId]);\r\n this.getSpeciesData(layerId, definitionExpression);\r\n } else {\r\n if (this.currentLayer === layerId) {\r\n this.resetcurrentLayer(this.currentLayer);\r\n }\r\n this.map.remove(this.featureLayers[layerId]);\r\n this.featureLayers[layerId] = undefined;\r\n this.speciesList[layerId] = [];\r\n this.isSpeciesEmpty = this.featureLayers.every(element => element === undefined);\r\n }\r\n })\r\n .catch(err => {\r\n console.error(err);\r\n });\r\n }\r\n\r\n resetcurrentLayer(currentLayer) {\r\n loadModules([\r\n 'esri/layers/FeatureLayer',\r\n ])\r\n .then(([FeatureLayer]) => {\r\n this.featureLayers.forEach((layer, index) => {\r\n if (this.featureLayers[index] !== undefined && index !== currentLayer) {\r\n const trailheadsRenderer = {\r\n 'type': 'simple',\r\n 'symbol': {\r\n 'type': 'picture-marker',\r\n 'url': 'assets/images/' + index + '.png',\r\n 'width': 20,\r\n 'height': 20\r\n }\r\n };\r\n let definitionExpressionCurrentLayer = '';\r\n // tslint:disable-next-line:max-line-length\r\n if (index === 3) {\r\n definitionExpressionCurrentLayer = \"((X BETWEEN \" + (this.currentLongitude - 0.035) + \" AND \" + (this.currentLongitude + 0.035) + \") AND (Y BETWEEN \" + (this.currentLatitude - 0.035) + \" AND \" + (this.currentLatitude + 0.035) + \")) AND (ConfidenceLevel=1) AND START_DATE >= '2017'\";\r\n } else {\r\n definitionExpressionCurrentLayer = '((X BETWEEN ' + (this.currentLongitude - 0.035) + ' AND ' + (this.currentLongitude + 0.035) + ') AND (Y BETWEEN ' + (this.currentLatitude - 0.035) + ' AND ' + (this.currentLatitude + 0.035) + ')) AND (ConfidenceLevel=1)';\r\n }\r\n //definitionExpressionCurrentLayer = '((X BETWEEN ' + (this.currentLongitude - 0.035) + ' AND ' + (this.currentLongitude + 0.035) + ') AND (Y BETWEEN ' + (this.currentLatitude - 0.035) + ' AND ' + (this.currentLatitude + 0.035) + ')) AND (ConfidenceLevel=1)';\r\n this.featureLayers[index] = new FeatureLayer(this.layerUrl + '/' + index,\r\n {\r\n outFields: ['*'],\r\n definitionExpression: definitionExpressionCurrentLayer,\r\n // renderer: trailheadsRenderer, // set the visualization on the layer\r\n });\r\n this.map.add(this.featureLayers[index]);\r\n this.getSpeciesData(index, definitionExpressionCurrentLayer);\r\n }\r\n });\r\n this.currentLayer = null;\r\n this.currentSpecies = '';\r\n });\r\n }\r\n\r\n showSpecies(scientificName) {\r\n this.carouselBanner = {\r\n grid: { xs: 1, sm: 1, md: 1, lg: 1, all: 0 },\r\n slide: 1,\r\n speed: 400,\r\n interval: 4000,\r\n point: {\r\n visible: true,\r\n },\r\n load: 2,\r\n loop: false,\r\n touch: true\r\n };\r\n this.locationFilterDiv = false;\r\n this.locationFilterDetailDiv = false;\r\n\r\n this.currentSpeciesCommonName = '';\r\n this.currentSpeciesLatinName = '';\r\n this.currentShareUrl = '';\r\n this.speciesService.loadSpeciesDetail(scientificName)\r\n .subscribe((data: any) => {\r\n this.speciesDetails = data.result.speciesDetails;\r\n this.speciesMedia = this.speciesService.sortSpeciesMedia(data.result.speciesMediaInfo, this.speciesDetails);\r\n this.speciesDetails.forEach(fields => {\r\n\r\n if ((fields.values[0].fieldName).includes('Common Name') || (fields.values[0].fieldName).includes('الاسم الشائع')) {\r\n this.currentSpeciesCommonName = fields.values[0].fieldValue;\r\n }\r\n\r\n // tslint:disable-next-line:max-line-length\r\n if ((fields.values[0].fieldName).includes('Scientific Name') || (fields.values[0].fieldName).includes('الاسم العلمي')) {\r\n this.currentSpeciesLatinName = fields.values[0].fieldValue;\r\n }\r\n });\r\n this.currentShareUrl = environment.appUrl + '/species-detail/' + data.result.speciesId;\r\n this.isSpeciesNotAvailable = false;\r\n this.showNoDataModal();\r\n }, error => {\r\n this.speciesDetails = [];\r\n this.speciesMedia = [];\r\n this.currentSpeciesCommonName = '';\r\n this.currentSpeciesLatinName = '';\r\n this.currentShareUrl = '';\r\n this.showNoDataModal();\r\n this.isSpeciesNotAvailable = true;\r\n });\r\n }\r\n OnChanges() {\r\n console.log(\"changes\")\r\n const val = $('#nodatapopup')\r\n console.log({ val })\r\n }\r\n showNoDataModal() {\r\n\r\n if (this.isBrowser) {\r\n $('#nodatapopup').modal('show');\r\n }\r\n }\r\n\r\n removeSpecies() {\r\n setTimeout(() => {\r\n this.speciesDetails = [];\r\n this.speciesMedia = [];\r\n this.currentSpeciesCommonName = '';\r\n this.currentSpeciesLatinName = '';\r\n this.currentShareUrl = '';\r\n }, 500);\r\n }\r\n\r\n getSpecies(event) {\r\n loadModules([\r\n 'esri/layers/FeatureLayer'\r\n ])\r\n .then(([FeatureLayer]) => {\r\n this.currentLayer = null;\r\n this.currentSpecies = '';\r\n this.currentLatitude = event.mapPoint.latitude;\r\n this.currentLongitude = event.mapPoint.longitude;\r\n this.mapView.goTo({\r\n center: [this.currentLongitude, this.currentLatitude],\r\n zoom: (this.mapView.zoom > 8) ? this.mapView.zoom : 8\r\n });\r\n this.featureLayers.forEach((layer, index) => {\r\n const trailheadsRenderer = {\r\n 'type': 'simple',\r\n 'symbol': {\r\n 'type': 'picture-marker',\r\n 'url': 'assets/images/' + index + '.png',\r\n 'width': 20,\r\n 'height': 20\r\n }\r\n };\r\n let definitionExpression = '';\r\n // tslint:disable-next-line:max-line-length\r\n if (index === 3) {\r\n definitionExpression = \"((X BETWEEN \" + (this.currentLongitude - 0.035) + \" AND \" + (this.currentLongitude + 0.035) + \") AND (Y BETWEEN \" + (this.currentLatitude - 0.035) + \" AND \" + (this.currentLatitude + 0.035) + \")) AND (ConfidenceLevel=1) AND START_DATE >= '2017'\";\r\n } else {\r\n definitionExpression = '((X BETWEEN ' + (this.currentLongitude - 0.035) + ' AND ' + (this.currentLongitude + 0.035) + ') AND (Y BETWEEN ' + (this.currentLatitude - 0.035) + ' AND ' + (this.currentLatitude + 0.035) + ')) AND (ConfidenceLevel=1)';\r\n }\r\n //definitionExpression = '((X BETWEEN ' + (this.currentLongitude - 0.035) + ' AND ' + (this.currentLongitude + 0.035) + ') AND (Y BETWEEN ' + (this.currentLatitude - 0.035) + ' AND ' + (this.currentLatitude + 0.035) + ')) AND (ConfidenceLevel=1)';\r\n if (layer !== undefined) {\r\n this.map.remove(this.featureLayers[index]);\r\n this.featureLayers[index] = new FeatureLayer(this.layerUrl + '/' + index,\r\n {\r\n outFields: ['*'],\r\n definitionExpression: definitionExpression,\r\n // renderer: trailheadsRenderer\r\n });\r\n this.map.add(this.featureLayers[index]);\r\n this.getSpeciesData(index, definitionExpression);\r\n }\r\n });\r\n });\r\n }\r\n\r\n getSpeciesData(layerId, definitionExpression) {\r\n this.mapService.getSpeciesData(this.layerUrl, layerId, definitionExpression, this.token)\r\n .subscribe((data: any) => {\r\n // Filter birds data based on CommonName field in asc order\r\n if (layerId === 3) {\r\n data.features = data.features.sort(function (a, b) {\r\n let x = a.attributes.CommonName.toUpperCase(),\r\n y = b.attributes.CommonName.toUpperCase();\r\n return x == y ? 0 : x > y ? 1 : -1;\r\n });\r\n }\r\n this.speciesList[layerId] = data.features;\r\n this.isSpeciesEmpty = false;\r\n this.speciesList[layerId] = this.speciesList[layerId]\r\n .filter((elem, index, self) => self.findIndex((t) => ((t.attributes.LatinName).trim() === (elem.attributes.LatinName).trim())) === index);\r\n this.speciesList[layerId] = this.speciesList[layerId]\r\n .filter((elem) => elem.attributes.LatinName !== null && elem.attributes.CommomName !== null && elem.attributes.LatinName !== '');\r\n\r\n });\r\n }\r\n\r\n loadSpecieFeatureLayer(LatinName, index) {\r\n loadModules([\r\n 'esri/layers/FeatureLayer'\r\n ])\r\n .then(([FeatureLayer]) => {\r\n let trailheadsRenderer = {};\r\n if (LatinName !== this.currentSpecies) {\r\n this.currentSpecies = LatinName;\r\n let definitionExpression = '';\r\n // tslint:disable-next-line:max-line-length && quotemark \r\n definitionExpression = '((X BETWEEN ' + (this.currentLongitude - 0.035) + ' AND ' + (this.currentLongitude + 0.035) + ') AND (Y BETWEEN ' + (this.currentLatitude - 0.035) + ' AND ' + (this.currentLatitude + 0.035) + ') AND ( LatinName = ' + \"'\" + LatinName + \"'\" + \")) AND (ConfidenceLevel=1) AND START_DATE >= '2017'\";\r\n //definitionExpression = '((X BETWEEN ' + (this.currentLongitude - 0.035) + ' AND ' + (this.currentLongitude + 0.035) + ') AND (Y BETWEEN ' + (this.currentLatitude - 0.035) + ' AND ' + (this.currentLatitude + 0.035) + ') AND ( LatinName = ' + \"'\" + LatinName + \"'\" + ')) AND (ConfidenceLevel=1)';\r\n trailheadsRenderer = {\r\n 'type': 'simple',\r\n 'symbol': {\r\n 'type': 'picture-marker',\r\n 'url': 'assets/images/' + index + '.png',\r\n 'width': 20,\r\n 'height': 20\r\n }\r\n };\r\n this.featureLayers.forEach((layer, layerIndex) => {\r\n this.map.remove(this.featureLayers[layerIndex]);\r\n });\r\n this.featureLayers[index] = new FeatureLayer(this.layerUrl + '/' + index,\r\n {\r\n outFields: ['*'],\r\n definitionExpression: definitionExpression,\r\n // renderer: trailheadsRenderer,\r\n });\r\n this.map.add(this.featureLayers[index]);\r\n this.currentLayer = index;\r\n } else if (LatinName === this.currentSpecies) {\r\n this.currentSpecies = '';\r\n this.currentLayer = null;\r\n let definitionExpression = '';\r\n // tslint:disable-next-line:max-line-length && quotemark\r\n definitionExpression = \"((X BETWEEN \" + (this.currentLongitude - 0.035) + \" AND \" + (this.currentLongitude + 0.035) + \") AND (Y BETWEEN \" + (this.currentLatitude - 0.035) + \" AND \" + (this.currentLatitude + 0.035) + \")) AND (ConfidenceLevel=1) AND START_DATE >= '2017'\";\r\n // definitionExpression = '((X BETWEEN ' + (this.currentLongitude - 0.035) + ' AND ' + (this.currentLongitude + 0.035) + ') AND (Y BETWEEN ' + (this.currentLatitude - 0.035) + ' AND ' + (this.currentLatitude + 0.035) + ')) AND (ConfidenceLevel=1)';\r\n this.map.remove(this.featureLayers[index]);\r\n this.featureLayers.forEach((layer, layerIndex) => {\r\n if (this.featureLayers[layerIndex] !== undefined) {\r\n trailheadsRenderer = {\r\n 'type': 'simple',\r\n 'symbol': {\r\n 'type': 'picture-marker',\r\n 'url': 'assets/images/' + layerIndex + '.png',\r\n 'width': 20,\r\n 'height': 20\r\n }\r\n };\r\n this.featureLayers[layerIndex] = new FeatureLayer(this.layerUrl + '/' + layerIndex,\r\n {\r\n outFields: ['*'],\r\n definitionExpression: definitionExpression,\r\n // renderer: trailheadsRenderer,\r\n });\r\n this.map.add(this.featureLayers[layerIndex]);\r\n }\r\n });\r\n }\r\n });\r\n }\r\n\r\n adjustZoom(zoomValue) {\r\n // console.log(this.mapView.zoom, zoomValue);\r\n this.mapView.zoom = parseInt(zoomValue, 10);\r\n }\r\n\r\n switchLocationFilter() {\r\n this.locationFilterDiv = !this.locationFilterDiv;\r\n }\r\n\r\n switchLocationFilterDetailView() {\r\n this.locationFilterDetailDiv = !this.locationFilterDetailDiv;\r\n }\r\n\r\n ngOnDestroy() {\r\n if (this.isBrowser) {\r\n loadModules([\r\n 'esri/identity/IdentityManager',\r\n ])\r\n .then(([esriIdM]) => {\r\n esriIdM.destroyCredentials();\r\n });\r\n }\r\n }\r\n\r\n\r\n\r\n\r\n toggle() {\r\n\r\n\r\n this.show = !this.show;\r\n\r\n // CHANGE THE NAME OF THE BUTTON.\r\n if (this.show)\r\n this.buttonName = \"Hide\";\r\n else\r\n this.buttonName = \"Show\";\r\n }\r\n\r\n\r\n\r\n\r\n}\r\n","module.exports = \"
\\r\\n
\\r\\n \\r\\n\\r\\n \\r\\n
\\r\\n
\\r\\n
\\r\\n \\r\\n
\\r\\n \\r\\n \\r\\n {{'LocationSearch.click' | translate}} \\r\\n \\r\\n {{'LocationSearch.filterInstructions' | translate}}\\r\\n \\r\\n \\r\\n \\r\\n \\r\\n
\\r\\n
\\r\\n \\r\\n \\r\\n {{'LocationSearch.click' | translate}} \\r\\n \\r\\n {{'LocationSearch.filterInstructions2' | translate}}\\r\\n \\r\\n \\r\\n \\r\\n \\r\\n
\\r\\n \\r\\n \\r\\n \\r\\n
\\r\\n \\r\\n \\r\\n
\\r\\n \\r\\n \\r\\n \\r\\n
\\r\\n
\\r\\n \\r\\n
\\r\\n \\r\\n \\r\\n {{'LocationSearch.click' | translate}} \\r\\n \\r\\n {{'LocationSearch.filterInstructions' | translate}}\\r\\n \\r\\n \\r\\n \\r\\n \\r\\n
\\r\\n
\\r\\n \\r\\n \\r\\n {{'LocationSearch.click' | translate}} \\r\\n \\r\\n {{'LocationSearch.filterInstructions2' | translate}}\\r\\n \\r\\n \\r\\n \\r\\n \\r\\n
\\r\\n \\r\\n \\r\\n
\\r\\n \\r\\n \\r\\n
\\r\\n \\r\\n
\\r\\n \\r\\n
\\r\\n \\r\\n \\r\\n {{'LocationSearch.filterInstructions3' | translate}}\\r\\n \\r\\n \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n \\r\\n \\r\\n
\\r\\n
\\r\\n
\\r\\n
{{'LocationSearch.CommonName' | translate }}
\\r\\n
\\r\\n
\\r\\n
{{'LocationSearch.LatinName' | translate }}
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n \\r\\n \\r\\n {{'LocationSearch.Name' | translate }}:\\r\\n \\r\\n {{ species.attributes.CommonName }}\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n \\r\\n {{'LocationSearch.Classification' | translate }}:\\r\\n \\r\\n {{ species.attributes.LatinName }}\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n {{ layerData && layerData.layers[i].name }} {{ 'LocationSearch.NotPresentMessage' | translate }}\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n \\r\\n
\\r\\n \\r\\n
\\r\\n \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n \\r\\n \\r\\n \\r\\n \\r\\n
\\r\\n \\r\\n \\r\\n \\r\\n \\r\\n \\r\\n
\\r\\n
\\r\\n \\r\\n
\\r\\n \\r\\n
\\r\\n {{ 'LocationSearch.Okay' | translate }} \\r\\n
\\r\\n
\\r\\n
\\r\\n
\"","module.exports = \"\\n@import url(\\\"https://fonts.cdnfonts.com/css/omnes\\\");\\n/* import the required JSAPI css */\\n#mapViewNode {\\n padding: 0;\\n margin: 0;\\n width: 100%; }\\n.esri-view {\\n height: 650px; }\\n.popupdetimg {\\n max-width: 100%;\\n max-height: 300px;\\n width: auto;\\n -o-object-fit: contain;\\n object-fit: contain; }\\n.btnswtch .btn-switch {\\n background: white; }\\n.ls-filter {\\n margin: 0;\\n left: 45px; }\\n.citizen-banner {\\n max-height: 65px !important; }\\n.citizen-banner .banner-title {\\n font-size: 23px;\\n margin-bottom: 2px;\\n padding-bottom: 8px; }\\n.citizen-banner .breadcrumbs {\\n padding-top: 8px; }\\n.ls-container {\\n min-height: 610px; }\\n.ls-container .ls-detail {\\n max-height: unset;\\n overflow-y: unset;\\n border-radius: 3px;\\n background-color: rgba(255, 255, 255, 0.8);\\n box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.15);\\n position: absolute;\\n top: 65px;\\n left: 45px;\\n margin: 0;\\n z-index: 1; }\\n.ls-container .ls-detail .ls-dethgt {\\n max-height: 375px;\\n overflow-y: auto;\\n padding-bottom: 10px; }\\n.ls-container .ls-detail .ls-row .ls-col.ls-col-active {\\n background-color: rgba(47, 136, 99, 0.8); }\\n.ls-container .ls-detail .ls-row .ls-col.ls-col-active p {\\n color: white; }\\n.ls-container .ls-detail .ls-row .ls-col.ls-col-active .flicn {\\n color: white; }\\n.ls-container .ls-detail .ls-row p {\\n font-size: 14px;\\n padding: 5px 0;\\n word-break: break-word; }\\n.ls-container .ls-detail .ls-row.ls-rowtitle {\\n background-color: rgba(0, 102, 162, 0.8); }\\n.ls-container .ls-detail .ls-row.ls-rowtitle p {\\n font-size: 18px; }\\n.ls-container .ls-detail .fldeticon {\\n position: absolute;\\n right: 15px;\\n top: 8px;\\n margin-bottom: 0;\\n color: white;\\n z-index: 9; }\\n.ls-container .dflex-center {\\n display: flex;\\n align-items: center; }\\n.ls-container .ls-filter-icons {\\n position: absolute;\\n top: 0;\\n margin: 0;\\n left: 0; }\\n.ls-container .ls-filter-icons .flicn {\\n border-radius: 3px;\\n background-color: #0066a2;\\n color: white;\\n box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.15);\\n padding: 8px;\\n margin: 0 0 30px 0px !important; }\\n@media (max-width: 767px) {\\n .ls-filter {\\n position: absolute !important; }\\n .ls-container .ls-detail {\\n max-height: 308px !important; }\\n .ls-container .ls-detail .ls-dethgt {\\n max-height: 280px !important;\\n overflow-y: auto; }\\n .ls-container .ls-detail {\\n top: 80px !important; }\\n .ls-container .ls-detail .fldeticon {\\n position: relative;\\n background: #0066a2;\\n text-align: right;\\n padding-left: 15px;\\n padding-right: 15px;\\n right: unset;\\n top: unset; }\\n .citizen-banner .banner-title {\\n margin-top: 25px; }\\n .banner-detail.innerpage .list-div {\\n top: 0 !important; } }\\n.infobtn:hover {\\n -webkit-transform: scale(1.3);\\n transform: scale(1.3); }\\n.infobtn .mediafile {\\n width: 80%;\\n height: 150px; }\\n.infobtn .audio-player {\\n margin-top: 90px; }\\n.species-detail-content .species-description {\\n padding-left: 0;\\n padding-right: 0; }\\n.dropup .dropdown-menu {\\n top: 55px; }\\n.instruction1-arabic p {\\n padding-left: 366px; }\\n.instruction1-arabic span {\\n float: right;\\n padding-top: 0px;\\n width: 15%; }\\n.instructions2-arabic {\\n padding: 15px 0px;\\n font-size: larger;\\n text-align: right;\\n margin-right: 49px; }\\n.instructions-en div {\\n width: 25%;\\n padding: 15px 0px;\\n text-align: center;\\n font-size: larger; }\\n.instructions-en .desc {\\n width: 64%;\\n padding-left: 46px;\\n float: left; }\\n.instructions-en .filter-inst {\\n float: left;\\n padding-top: 0px;\\n width: 20%; }\\n.instructions-ar div {\\n padding: 15px 0px;\\n font-size: larger;\\n text-align: right;\\n margin-right: 40px; }\\n.ls-speciesdet h3 {\\n word-break: break-word; }\\n.taximonial-box {\\n border: 1px solid #707070;\\n border-radius: 12px; }\\n.birds-content-padding {\\n padding-bottom: 0px; }\\n.media-text {\\n word-break: break-word; }\\ninput[type=range][orient=vertical] {\\n -webkit-writing-mode: bt-lr;\\n -ms-writing-mode: bt-lr;\\n writing-mode: bt-lr;\\n /* IE */\\n -webkit-appearance: slider-vertical;\\n /* WebKit */\\n width: 50px;\\n height: 100px;\\n padding: 5px 5px;\\n margin-right: 50px; }\\n.detail-titleiucn {\\n font-weight: 600;\\n display: inline-block;\\n margin-bottom: 10px;\\n font-size: 16px; }\\n.statusbtn {\\n display: inline-block;\\n border: 1px solid #707070;\\n padding: 7px 49px 10px;\\n margin: 0 10px;\\n border-radius: 24px;\\n background: #D7F2D7;\\n color: #101010;\\n font-size: 23px; }\\n.progress-container {\\n width: 100%;\\n position: relative;\\n z-index: 1;\\n margin-top: 41px; }\\n.progress-container .progressbar {\\n padding-left: 0; }\\n.progress-container .progressbar li {\\n float: left;\\n width: 11.111111%;\\n position: relative;\\n text-align: center;\\n list-style-type: none;\\n font-size: 12px; }\\n.progress-container .progressbar li .iucncode {\\n position: absolute;\\n top: 0;\\n left: 43%;\\n top: 9%;\\n font-size: 16px;\\n text-transform: uppercase;\\n color: black; }\\n.progress-container .progressbar li.activestat .iucncode {\\n color: white; }\\n.progress-container .progressbar li:before {\\n content: '';\\n width: 51px;\\n height: 51px;\\n border: 2px solid #bebebe;\\n display: block;\\n margin: -9px auto 10px auto;\\n border-radius: 50%;\\n background: white;\\n color: #bebebe;\\n text-align: center;\\n font-weight: bold; }\\n.progress-container .progressbar li:after {\\n content: '';\\n position: absolute;\\n width: 100%;\\n height: 3px;\\n background: #979797;\\n top: 15px;\\n left: -50%;\\n z-index: -1; }\\n.progress-container .progressbar li:first-child:after {\\n content: none; }\\n.statusbar {\\n height: auto;\\n position: relative;\\n margin: auto;\\n width: calc(100% - 0px); }\\n.statusbar:before {\\n content: \\\" \\\";\\n position: relative;\\n display: block;\\n width: 100%;\\n top: 22px;\\n height: 50px;\\n border-top: 1px dotted #707070; }\\n.statusbar .status-bubble {\\n background-color: #00a000;\\n border: 1px solid #E6E6E6;\\n border-radius: 50%;\\n background-color: #FFF0DC;\\n margin: 0 0 0 -15px;\\n position: absolute;\\n text-align: center;\\n top: 9px;\\n left: 0;\\n height: 40px;\\n width: 40px;\\n margin: -10px 0 0 -24px;\\n border: 1px solid #707070;\\n color: black; }\\n.statusbar .status-bubble .statustitle {\\n position: relative;\\n top: 15px;\\n display: inline-block; }\\n.statusbar .status-bubble .activestat {\\n color: white; }\\n.statusbar .status-bubble:nth-child(1) {\\n left: 0; }\\n.statusbar .status-bubble:nth-child(2) {\\n left: 12.5%; }\\n.statusbar .status-bubble:nth-child(3) {\\n left: 25%; }\\n.statusbar .status-bubble:nth-child(4) {\\n left: 37.5%; }\\n.statusbar .status-bubble:nth-child(5) {\\n left: 50%; }\\n.statusbar .status-bubble:nth-child(6) {\\n left: 62.5%; }\\n.statusbar .status-bubble:nth-child(7) {\\n left: 75%; }\\n.statusbar .status-bubble:nth-child(8) {\\n left: 87.5%; }\\n.statusbar .status-bubble:nth-child(9) {\\n left: 100%; }\\n.statusbar .status-bubble .status-bubble-label {\\n color: black;\\n text-transform: uppercase;\\n font-size: 16px;\\n line-height: 25px;\\n display: block;\\n width: 100%;\\n margin-top: 6px;\\n text-align: center;\\n padding-left: 0; }\\n@media (max-width: 767px) {\\n .ls-spmain.species-detail-content .species-description .species-text, .statusph {\\n padding-left: 10px !important;\\n padding-right: 10px !important; }\\n .statusbtn {\\n font-size: 18px; }\\n .statusbar .status-bubble {\\n height: 40px;\\n width: 40px; }\\n .statusbar .status-bubble .status-bubble-label {\\n font-size: 14px;\\n line-height: 25px;\\n padding-left: 0; }\\n .statustitle {\\n display: none !important; }\\n .activestat .statustitle {\\n display: inline-block !important;\\n left: -10px; } }\\n@media (max-width: 550px) {\\n .statusbtn {\\n font-size: 16px;\\n padding: 7px 15px 10px;\\n margin: 0; }\\n .activestat .statustitle {\\n font-size: 12px;\\n top: 10px; }\\n .statusbar:before {\\n left: -10px;\\n top: 11px; }\\n .statusbar .status-bubble {\\n height: 23px;\\n width: 23px; }\\n .statusbar .status-bubble .status-bubble-label {\\n font-size: 10px;\\n line-height: 12px; } }\\n.mediatext p {\\n color: white;\\n padding: 15px;\\n margin-top: 11px;\\n font-size: 14px;\\n max-height: 75px;\\n overflow-y: auto;\\n word-break: break-word; }\\n.zoomininput {\\n position: absolute;\\n top: 140px;\\n margin: 0;\\n left: 0; }\\n.zoomininput .zoominicon {\\n background: #e2e2e2;\\n height: 25px;\\n width: 25px;\\n position: relative;\\n left: 8px; }\\n.zoomininput .zoominicon.zoominminus {\\n top: 30px; }\\n.zoomininput .zoominicon .glyphicon {\\n top: 4px;\\n left: 6px;\\n color: #0066a2; }\\n.inputrangecustom {\\n height: 130px;\\n position: relative;\\n top: 15px; }\\n/* start homepage */\\n* {\\n margin: 0;\\n padding: 0;\\n box-sizing: border-box; }\\nh1, h2, h3, p, a {\\n font-family: 'Omnes', sans-serif; }\\n.hero-section {\\n height: 70vh;\\n color: white;\\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(\\\"https://i.ibb.co/PNmX3My/MG-2532-L-Houbara-Bustard.jpg\\\");\\n background-repeat: no-repeat;\\n background-size: cover;\\n background-position: center; }\\n.body {\\n height: 100vh;\\n color: white;\\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(\\\"https://i.ibb.co/GHMjC2Q/big1571134224.jpg\\\");\\n background-repeat: no-repeat;\\n background-size: cover;\\n background-position: center; }\\n.hero-section-page8 {\\n height: 70vh;\\n color: white;\\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(\\\"https://i.ibb.co/GHMjC2Q/big1571134224.jpg\\\");\\n background-repeat: no-repeat;\\n background-size: cover;\\n background-position: center; }\\n.hero-section-page20 {\\n height: 70vh;\\n color: white;\\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(\\\"https://i.ibb.co/sHmB2Rr/maxresdefault-1.jpg\\\");\\n background-repeat: no-repeat;\\n background-size: cover;\\n background-position: center; }\\n.hero-section-page21 {\\n height: 70vh;\\n color: white;\\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(\\\"https://i.ibb.co/yWz67Db/Mangroves-min.jpg\\\");\\n background-repeat: no-repeat;\\n background-size: cover;\\n background-position: center; }\\n.hero-section-page17 {\\n height: 70vh;\\n color: white;\\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(\\\"https://i.ibb.co/LvVH8kT/update-falcons-fly-free.jpg\\\");\\n background-repeat: no-repeat;\\n background-size: cover;\\n background-position: center; }\\n.hero-section-page15 {\\n height: 70vh;\\n color: white;\\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(\\\"https://i.ibb.co/Hd8tm6n/maxresdefault.jpg\\\");\\n background-repeat: no-repeat;\\n background-size: cover;\\n background-position: center; }\\n.hero-text {\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n justify-content: center;\\n height: 100%;\\n font-size: 1.4em;\\n letter-spacing: 9px; }\\n.hero-section-page16 {\\n height: 70vh;\\n color: white;\\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(\\\"https://i.ibb.co/Rj6Dq7y/deserthare2ead0.jpg\\\");\\n background-repeat: no-repeat;\\n background-size: cover;\\n background-position: center; }\\n.hero-section-specie-page {\\n height: 70vh;\\n color: white;\\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(\\\"https://i.ibb.co/mb5yWrY/Screenshot-2021-12-22-at-15-02-08.png\\\");\\n background-repeat: no-repeat;\\n background-size: cover;\\n background-position: center; }\\n.hero-section-habitat-page {\\n height: 70vh;\\n color: white;\\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(\\\"https://i.ibb.co/9wy9p9Z/8ebcd85a55212d01925406be12c7a584.jpg\\\");\\n background-repeat: no-repeat;\\n background-size: cover;\\n background-position: center; }\\n.hero-section-page18 {\\n height: 70vh;\\n color: white;\\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(\\\"https://i.ibb.co/QCfB69Z/180613094738-02-coral.jpg\\\");\\n background-repeat: no-repeat;\\n background-size: cover;\\n background-position: center; }\\n.hero-section-habitat-page-aquatic {\\n height: 70vh;\\n color: white;\\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(\\\"https://i.ibb.co/hD6y8ww/borneo-storlazzi-600.jpg\\\");\\n background-repeat: no-repeat;\\n background-size: cover;\\n background-position: center; }\\n.hero-section-page12 {\\n height: 70vh;\\n color: white;\\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(\\\"https://i.ibb.co/YZFhYNQ/highlight-03-en.jpg\\\");\\n background-repeat: no-repeat;\\n background-size: cover;\\n background-position: center; }\\n.hero-section-cityzen {\\n height: 70vh;\\n color: white;\\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(\\\"https://i.ibb.co/QQj0Rww/919e98bae391ad1498543bcb98ae553a-sand-cat-sands.jpg\\\");\\n background-repeat: no-repeat;\\n background-size: cover;\\n background-position: center; }\\n.hero-section-page11 {\\n height: 70vh;\\n color: white;\\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(\\\"https://i.ibb.co/1MLbgRg/Hawksbill-Turtles-01.jpg\\\");\\n background-repeat: no-repeat;\\n background-size: cover;\\n background-position: center; }\\n.hero-section-page10 {\\n height: 70vh;\\n color: white;\\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(\\\"https://i.ibb.co/Qc4Q7C9/medium.jpg\\\");\\n background-repeat: no-repeat;\\n background-size: cover;\\n background-position: center; }\\n.hero-section-page13 {\\n height: 70vh;\\n color: white;\\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(\\\"https://i.ibb.co/tbqfmzP/80815af092f71b1f20dfa4bd6f1cb735.jpg\\\");\\n background-repeat: no-repeat;\\n background-size: cover;\\n background-position: center; }\\n.hero-section-page14 {\\n height: 70vh;\\n color: white;\\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)), url(\\\"https://i.ibb.co/smFST4x/Screenshot-2021-12-22-at-15-02-08.png\\\");\\n background-repeat: no-repeat;\\n background-size: cover;\\n background-position: center; }\\n.hero-text {\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n justify-content: center;\\n height: 100%;\\n font-size: 1.4em;\\n letter-spacing: 9px; }\\n.hero-img {\\n position: relative;\\n height: 85vh; }\\n.hero-section .hero-img {\\n position: relative;\\n height: 60vh; }\\n.page-19-hero img {\\n height: 90vh; }\\n.content p {\\n font-size: 20px;\\n color: white; }\\n.content {\\n position: absolute;\\n bottom: -40px;\\n text-align: center;\\n left: 50%;\\n -webkit-transform: translate(-50%, -50%);\\n transform: translate(-50%, -50%); }\\n.main-chart {\\n display: block;\\n overflow: hidden;\\n text-align: center;\\n background: #f6f6f6; }\\n.main-chart button {\\n width: 100%;\\n padding: 35px 0px;\\n border: none;\\n background: white; }\\n.main-chart .active-button {\\n background: #f6f6f6; }\\n.main-chart button a {\\n color: black;\\n font-weight: bold;\\n font-size: 30px; }\\n.main-chart p {\\n font-size: 16px;\\n font-weight: 500;\\n padding: 25px 0px; }\\n.main-chart-content {\\n max-width: 1200px;\\n margin: auto; }\\n.main-chart-content-inner {\\n padding: 0px 100px; }\\n.main-chart-content-inner img {\\n width: 100%;\\n margin: 25px 0px;\\n border-radius: 25px;\\n height: 350px;\\n position: relative;\\n opacity: 0.7;\\n z-index: -1; }\\n.main-chart-content-inner h4 {\\n position: absolute;\\n top: 0px;\\n left: 50%;\\n top: 85%;\\n -webkit-transform: translate(-50%, -50%);\\n transform: translate(-50%, -50%);\\n color: white;\\n z-index: 1;\\n opacity: 1; }\\n.news {\\n padding: 25px 50px; }\\n.news h2 {\\n padding: 50px 0px;\\n font-size: 30px;\\n font-weight: 600; }\\n.news h4 {\\n font-size: 22px;\\n padding: 10px 0px; }\\n.news-item {\\n padding-top: 25px; }\\n.news-inner img {\\n width: 100%; }\\n.news-inner button {\\n border: none;\\n background: white; }\\n.news-inner button a {\\n text-decoration: none;\\n color: black; }\\n.right a {\\n margin: 0px 10px; }\\n.right .fb {\\n padding: 14px 22px;\\n border: 2px solid white;\\n border-radius: 50%; }\\n.right .insta {\\n padding: 14px 18px;\\n border: 2px solid white;\\n border-radius: 50%; }\\n.right .twitter {\\n padding: 14px 18px;\\n border: 2px solid white;\\n border-radius: 50%; }\\n.footer ul li {\\n list-style: none;\\n color: white; }\\n.footer a {\\n color: white; }\\n.menu {\\n display: flex; }\\n.bottom-app {\\n padding-top: 100px; }\\n.bottom-app .apps a {\\n margin: 0px 10px; }\\n.footer {\\n background: url(\\\"https://i.ibb.co/3mkCyyL/Latest-publication-on-Proximate-underwater-soundscape-of-a-North-Sea-offshore-petroleum-exploration.jpg\\\");\\n background-repeat: no-repeat;\\n background-size: cover;\\n padding: 25px 50px; }\\n.apps {\\n position: absolute;\\n right: 20px;\\n display: flex; }\\n.sidemenu ul {\\n position: absolute;\\n right: 10px;\\n z-index: 1000;\\n top: 100px; }\\n.sidemenu ul li {\\n list-style: none; }\\n.sidemenu ul li a {\\n color: white;\\n text-decoration: none; }\\n@media only screen and (max-width: 992px) {\\n .content {\\n position: absolute;\\n bottom: -60px;\\n width: 100%; }\\n .footer-logo {\\n display: none; }\\n .footer-bg img {\\n height: 100vh; }\\n .menu {\\n flex-direction: column; }\\n .right {\\n flex-direction: column; }\\n .left {\\n padding-top: 80px; }\\n .apps {\\n position: relative;\\n text-align: center;\\n flex-direction: column;\\n margin: auto; }\\n .sidemenu ul {\\n display: none; }\\n .apps {\\n top: -100px; } }\\n@media only screen and (max-width: 768px) {\\n .footer-bg img {\\n width: 100%;\\n position: absolute;\\n top: 0px;\\n left: 0px;\\n z-index: -1;\\n height: 120vh; }\\n .left {\\n padding-top: 150px; }\\n .apps {\\n top: -100px; } }\\n.logo {\\n width: 250px;\\n margin-top: 0px; }\\n/* end homepage */\\n/* start page19 */\\n.page-19-birds-section {\\n padding-top: 20px;\\n padding-bottom: 25px;\\n text-align: center; }\\n.page-19-birds-section p {\\n font-size: 20px;\\n font-weight: 300 !important; }\\n.button-abc a button {\\n background: #399ab6;\\n color: white;\\n border: none;\\n outline: none;\\n width: 50px;\\n height: 50px;\\n margin: 10px 5px;\\n border-radius: 3px;\\n font-size: 24px; }\\n.button4 {\\n display: flex;\\n justify-content: center;\\n flex-wrap: wrap !important; }\\n.button4 button {\\n width: 130px;\\n margin: 10px 8px;\\n background: #235e65;\\n border: none;\\n outline: none;\\n color: white;\\n border-radius: 3px;\\n padding: 8px 10px; }\\n.sort-birds {\\n padding: 0px 200px; }\\n.sort-birds button {\\n background: #399ab6;\\n color: white;\\n border: none;\\n outline: none;\\n width: 40px;\\n height: 40px;\\n margin: 10px 0px;\\n border-radius: 3px; }\\n.sort-birds-inner {\\n border-top: 2px solid #399ab6;\\n margin: 0px 50px;\\n padding-bottom: 0px; }\\n.sort-birds-inner img {\\n width: 250px; }\\n.sort-birds-inner .single-sort-birds {\\n margin: 25px 0px; }\\n.sort-birds-inner .single-sort-birds h5 {\\n color: #399ab6; }\\n.sort-birds-inner .single-sort-birds p {\\n font-size: 20px;\\n font-weight: 400;\\n color: black; }\\n.sort-birds-inner .sort-birds-text {\\n padding: 0px 10px; }\\n@media only screen and (max-width: 992px) {\\n .page19nav {\\n background: transparent; }\\n .logo {\\n width: 250px;\\n margin-top: 0px; }\\n .sort-birds {\\n padding: 0px 20px; }\\n .page-19-birds-section {\\n padding: 0px 20px; }\\n .page-19-hero img {\\n height: 700px; }\\n .sort-birds-inner img {\\n width: 200px; }\\n .page-19-hero img {\\n margin-top: 200px; }\\n .page-19-hero .hero-img {\\n position: relative;\\n height: 85vh; }\\n .hero-section {\\n height: 70vh; } }\\n@media only screen and (max-width: 768px) {\\n .hero-section {\\n height: 50vh; }\\n .sort-birds-inner img {\\n width: 180px; } }\\n/* end page19 */\\n/* start page 20 */\\n.page20-section {\\n text-align: center;\\n padding: 0px 200px;\\n padding-top: 20px; }\\n.birds20-dual-banner-main {\\n padding: 0px 300px; }\\n.birds20-dual-banner {\\n max-width: 1020px;\\n display: flex;\\n border-top: 2px solid black;\\n margin: auto; }\\n.birds20-dual-banner img {\\n width: 400px;\\n margin: 50px 20px; }\\n.button-20-ex-lc {\\n max-width: 1020px;\\n border-top: 2px solid black;\\n padding-bottom: 50px;\\n margin: auto;\\n position: relative;\\n display: block;\\n overflow: hidden;\\n display: flex;\\n justify-content: center;\\n text-align: center; }\\n.button-20-ex-lc p {\\n border: none;\\n outline: none;\\n width: 90px;\\n height: 90px;\\n line-height: 100px;\\n color: white;\\n background: #c8e3d9;\\n font-size: 24px;\\n font-weight: 600;\\n margin: 0px 5px;\\n margin-top: 20px;\\n float: left;\\n overflow: hidden; }\\n.button-20-ex-lc .active-button {\\n background: #057f53; }\\n.page20-form {\\n max-width: 1000px; }\\n.second-collumn {\\n padding-left: 50px; }\\n.page20-form-main {\\n max-width: 1020px;\\n padding: 20px 50px;\\n border-top: 2px solid black;\\n margin: auto; }\\n.page20-form {\\n max-width: 1000px;\\n padding: 0px 25px;\\n margin: auto;\\n background: #e4f1ec;\\n margin-bottom: 50px; }\\n.page20-form-main {\\n max-width: 1020px;\\n padding: 20px 10px;\\n border-top: 2px solid black;\\n margin: auto; }\\n.page20-form li {\\n width: 180px;\\n list-style: none;\\n font-weight: bold; }\\n.page20-form span {\\n text-decoration: none;\\n color: black;\\n padding: 0px 50px; }\\n.page20-data {\\n margin: 20px 0px; }\\n.page20-form h6 {\\n font-weight: bold;\\n padding-top: 25px; }\\n@media only screen and (max-width: 1024px) {\\n .page-19-hero .hero-img {\\n position: relative;\\n height: 70vh; } }\\n@media only screen and (max-width: 992px) {\\n .page20-section {\\n padding: 0px 25px; }\\n .second-collumn {\\n padding-left: 15px; }\\n .button-20-ex-lc {\\n flex-direction: inherit; } }\\n@media only screen and (max-width: 768px) {\\n .birds20-dual-banner {\\n flex-direction: column; }\\n .birds20-dual-banner-main {\\n padding: 0px 25px; }\\n .birds20-dual-banner img {\\n width: 250px;\\n margin: 20px auto; }\\n .button-20-ex-lc {\\n display: block; } }\\n/* end page 20 */\\n/* start page 18 */\\n.clock-page18 {\\n max-width: 1200px;\\n margin: auto; }\\n.clock-page18 p {\\n font-weight: bolder; }\\n.quetion span {\\n font-size: 18px;\\n font-weight: 600; }\\n.quetion form label {\\n font-size: 22px;\\n line-height: 40px;\\n padding-left: 10px; }\\n.quetion form input {\\n width: 20px;\\n height: 18px;\\n border: 2px solid red; }\\n.button-action {\\n flex-wrap: wrap; }\\n.button-action button {\\n width: 250px;\\n font-size: 24px;\\n font-weight: bolder;\\n margin: 10px 10px;\\n border: none;\\n background: #98b0cb;\\n padding: 10px 0px;\\n border-radius: 25px;\\n color: white; }\\n.button-action .active {\\n background: #6489b1; }\\n/* end page 18 */\\n.footer-logo {\\n width: 250px; }\\n/* start page-16 */\\n.glossery-page16 {\\n padding: 25px 0px;\\n padding-bottom: 50px; }\\n.glossery-page16 h5 {\\n color: #156daa;\\n font-size: 18px;\\n line-height: 16px; }\\n.glossery-page16 p {\\n font-size: 16px;\\n font-weight: 500 !important; }\\n.glossery-item-page16 {\\n padding-top: 10px; }\\n/* end page-16 */\\n.captcha {\\n background-color: #f9f9f9;\\n border: none;\\n border-radius: 5px;\\n color: #4c4a4b;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n border-radius: 25px;\\n margin: auto;\\n margin-bottom: 50px; }\\n@media screen and (max-width: 500px) {\\n .captcha {\\n flex-direction: column; }\\n .text {\\n margin: 0.5em !important;\\n text-align: center; }\\n .logo {\\n -ms-grid-row-align: center !important;\\n align-self: center !important; }\\n .spinner {\\n margin: 2em 0.5em 0.5em 0.5em !important; }\\n .ls-container .ls-detail {\\n width: 80%; } }\\n.text {\\n font-size: 16px;\\n font-weight: 500; }\\n.spinner {\\n position: relative;\\n width: 2em;\\n height: 2em;\\n display: flex;\\n margin: 2em 1em;\\n align-items: center;\\n justify-content: center; }\\n.captcha input[type=\\\"checkbox\\\"] {\\n position: absolute;\\n opacity: 0;\\n z-index: -1; }\\n.captcha input[type=\\\"checkbox\\\"] + .checkmark {\\n display: inline-block;\\n width: 2em;\\n height: 2em;\\n background-color: #fcfcfc;\\n border: 2.5px solid #c3c3c3;\\n border-radius: 3px;\\n display: flex;\\n justify-content: center;\\n align-items: center;\\n cursor: pointer; }\\n.captcha input[type=\\\"checkbox\\\"] + .checkmark span {\\n content: '';\\n position: relative;\\n /*\\r\\n\\tposition:absolute;\\r\\n\\tborder-bottom:3px solid;\\r\\n\\tborder-right:3px solid;\\r\\n\\tborder-color:#029f56;*/\\n margin-top: -3px;\\n -webkit-transform: rotate(45deg);\\n transform: rotate(45deg);\\n width: .75em;\\n height: 1.2em;\\n opacity: 0; }\\n.captcha input[type=\\\"checkbox\\\"] + .checkmark > span:after {\\n content: '';\\n position: absolute;\\n display: block;\\n height: 3px;\\n bottom: 0;\\n left: 0;\\n background-color: #029f56; }\\n.captcha input[type=\\\"checkbox\\\"] + .checkmark > span:before {\\n content: '';\\n position: absolute;\\n display: block;\\n width: 3px;\\n bottom: 0;\\n right: 0;\\n background-color: #029f56; }\\n.captcha input[type=\\\"checkbox\\\"]:checked + .checkmark {\\n -webkit-animation: 2s spin forwards;\\n animation: 2s spin forwards; }\\n.captcha input[type=\\\"checkbox\\\"]:checked + .checkmark > span {\\n -webkit-animation: 1s fadein 1.9s forwards;\\n animation: 1s fadein 1.9s forwards; }\\n.captcha input[type=\\\"checkbox\\\"]:checked + .checkmark > span:after {\\n -webkit-animation: .3s bottomslide 2s forwards;\\n animation: .3s bottomslide 2s forwards; }\\n.captcha input[type=\\\"checkbox\\\"]:checked + .checkmark > span:before {\\n -webkit-animation: .5s rightslide 2.2s forwards;\\n animation: .5s rightslide 2.2s forwards; }\\n@-webkit-keyframes fadein {\\n 0% {\\n opacity: 0; }\\n 100% {\\n opacity: 1; } }\\n@keyframes fadein {\\n 0% {\\n opacity: 0; }\\n 100% {\\n opacity: 1; } }\\n@-webkit-keyframes bottomslide {\\n 0% {\\n width: 0; }\\n 100% {\\n width: 100%; } }\\n@keyframes bottomslide {\\n 0% {\\n width: 0; }\\n 100% {\\n width: 100%; } }\\n@-webkit-keyframes rightslide {\\n 0% {\\n height: 0; }\\n 100% {\\n height: 100%; } }\\n@keyframes rightslide {\\n 0% {\\n height: 0; }\\n 100% {\\n height: 100%; } }\\n.captcha .logo {\\n display: flex;\\n flex-direction: column;\\n align-items: center;\\n height: 100%;\\n align-self: flex-end;\\n margin: 0.5em 1em; }\\n.captcha .logo img {\\n height: 2em;\\n width: 2em; }\\n.captcha .logo p {\\n color: #9d9ba7;\\n margin: 0;\\n font-size: 1em;\\n font-weight: 700;\\n margin: .4em 0 .2em 0; }\\n.captcha .logo small {\\n color: #9d9ba7;\\n margin: 0;\\n font-size: .8em; }\\n::-moz-selection {\\n background-color: transparent;\\n color: teal; }\\n::selection {\\n background-color: transparent;\\n color: teal; }\\n::-moz-selection {\\n background-color: transparent;\\n color: teal; }\\n.message-page12 textarea {\\n width: 100%;\\n max-width: 1000px;\\n height: 200px;\\n background: #98b0cb;\\n color: white;\\n border: none;\\n outline: none;\\n border-radius: 25px;\\n z-index: -1; }\\n.page-12 button {\\n width: 100%;\\n max-width: 1000px;\\n font-size: 24px;\\n font-weight: bolder;\\n margin: 10px 10px;\\n border: none;\\n background: #316297;\\n padding: 10px 0px;\\n border-radius: 25px;\\n color: white; }\\n.vision-mission {\\n max-width: 1000px;\\n background: #98b0cb;\\n margin: auto;\\n height: 200px;\\n border-radius: 25px;\\n color: white;\\n margin-top: 35px; }\\n.vision-mission h3 {\\n padding-top: 50px; }\\n.page-10 img {\\n width: 100%;\\n padding-top: 10px; }\\n.page-10 p {\\n padding: 25px 25px;\\n font-size: 18px;\\n font-weight: 500 !important;\\n text-align: left; }\\n.page-9 img {\\n width: 100%;\\n border-radius: 25px; }\\n.single-news-page9 {\\n margin: 50px 0px; }\\n.news-desc-page9 {\\n padding: 20px 10px; }\\n.news-desc-page9 h5 {\\n text-align: left;\\n border-bottom: 2px solid #235e65;\\n padding-bottom: 15px; }\\n.news-desc-page9 span {\\n text-align: left;\\n font-weight: 400;\\n padding-bottom: 10px;\\n display: block;\\n width: 100%; }\\n.news-desc-page9 p {\\n text-align: left;\\n font-size: 17px;\\n font-weight: 400 !important;\\n word-spacing: normal; }\\n.news-desc-page9 button {\\n margin-top: -10px; }\\n.circle,\\n.circle:before,\\n.circle:after {\\n border-radius: 50%; }\\n.menumain {\\n height: 100vh; }\\n@media (max-width: 402px) {\\n .menumain {\\n height: 76vh; } }\\n.menunav {\\n position: absolute;\\n display: block;\\n left: 50%;\\n -webkit-transform: translateX(-35%);\\n transform: translateX(-35%);\\n margin: 25px auto;\\n min-width: 10em;\\n width: 70%;\\n max-width: 40em; }\\n.menunav ul {\\n position: relative;\\n padding: 50%;\\n max-width: 0;\\n max-height: 0;\\n list-style: none; }\\n.menunav li {\\n position: absolute; }\\n.slice {\\n overflow: hidden;\\n position: absolute;\\n top: 0;\\n left: 0;\\n width: 40%;\\n height: 40%;\\n -webkit-transform-origin: 100% 100%;\\n transform-origin: 100% 100%; }\\n/* Cell orientation */\\n.coconut {\\n -webkit-transform: rotate(13deg) skewX(40deg);\\n transform: rotate(13deg) skewX(40deg); }\\n.vanilla {\\n -webkit-transform: rotate(64.43deg) skewX(40deg);\\n transform: rotate(64.43deg) skewX(40deg); }\\n.orange {\\n -webkit-transform: rotate(115.86deg) skewX(40deg);\\n transform: rotate(115.86deg) skewX(40deg); }\\n.almond {\\n -webkit-transform: rotate(167.29deg) skewX(40deg);\\n transform: rotate(167.29deg) skewX(40deg); }\\n.grape {\\n -webkit-transform: rotate(218.71deg) skewX(40deg);\\n transform: rotate(218.71deg) skewX(40deg); }\\n.blackberry {\\n -webkit-transform: rotate(270.14deg) skewX(40deg);\\n transform: rotate(270.14deg) skewX(40deg); }\\n.cherry {\\n -webkit-transform: rotate(321.57deg) skewX(40deg);\\n transform: rotate(321.57deg) skewX(40deg); }\\n.menunav label {\\n cursor: pointer; }\\n.slice label {\\n display: block;\\n width: 200%;\\n height: 200%;\\n -webkit-transform: skew(-40deg) rotate(-65deg);\\n transform: skew(-40deg) rotate(-65deg);\\n line-height: 1.9;\\n text-align: center;\\n color: white;\\n font-weight: bold; }\\n.slice label span {\\n display: block; }\\n.slice label:hover {\\n color: white;\\n background-color: transparent;\\n transition: all 0.5s ease; }\\n.circle .menuname:hover {\\n color: white;\\n transition: color 0.5s ease; }\\n.menudesc {\\n width: 280px; }\\n/* Cell background colors */\\n.coconut label,\\n.ococonut:checked ~ nav .unsel {\\n background-size: 40%;\\n background-position: center;\\n background-blend-mode: multiply;\\n background-color: powderblue; }\\n.vanilla label,\\n.ovanilla:checked ~ nav .unsel {\\n background-size: 40%;\\n background-position: center;\\n background-blend-mode: multiply;\\n background-color: #20b2aa; }\\n.orange label,\\n.oorange:checked ~ nav .unsel {\\n background-size: 40%;\\n background-position: center;\\n background-blend-mode: multiply;\\n background-color: lightseagreen; }\\n.almond label,\\n.oalmond:checked ~ nav .unsel {\\n background-size: 40%;\\n background-position: center;\\n background-blend-mode: multiply;\\n background-color: paleturquoise; }\\n.grape label,\\n.ogrape:checked ~ nav .unsel {\\n background-size: 40%;\\n background-position: center;\\n background-blend-mode: multiply;\\n background-color: lightskyblue; }\\n.blackberry label,\\n.oblackberry:checked ~ nav .unsel {\\n background-size: 40%;\\n background-position: center;\\n background-blend-mode: multiply;\\n background-color: rgba(0, 0, 0, 0.4); }\\n.cherry label,\\n.ocherry:checked ~ nav .unsel {\\n background-size: 40%;\\n background-position: center;\\n background-blend-mode: multiply;\\n background-color: lightblue; }\\n.circle .slice img {\\n position: absolute;\\n top: 62%;\\n -webkit-transform: rotate(-38deg) skewX(17deg);\\n transform: rotate(-38deg) skewX(17deg);\\n left: 52%;\\n height: 35px;\\n width: 75px;\\n z-index: 100; }\\n.slice label {\\n font-weight: 700;\\n line-height: 5; }\\n.circle label {\\n font-weight: 700;\\n line-height: 5;\\n font-size: 0.8em; }\\n.slice p {\\n width: 100px;\\n margin-left: 185px; }\\n.unsel {\\n z-index: 2;\\n top: 34%;\\n left: 34%;\\n width: 32%;\\n height: 32%;\\n text-align: center;\\n background-color: wheat;\\n display: none; }\\n.unsel label {\\n display: block;\\n width: 100%;\\n height: 100%;\\n line-height: 9; }\\n.middle {\\n z-index: 1;\\n top: 19%;\\n left: 19%;\\n width: 40%;\\n height: 40%;\\n text-align: center;\\n background-size: cover;\\n background-blend-mode: multiply;\\n background-color: paleturquoise;\\n background-position: center;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n border: 7px solid white; }\\n.middle .mainHeading {\\n font-size: 1.3em;\\n font-weight: 700;\\n color: white;\\n display: inline-block;\\n border-bottom: 1px solid white;\\n padding: 0.2em 1.4em;\\n margin-bottom: 0.2em; }\\n.middle .mainText {\\n color: white;\\n font-weight: 500;\\n line-height: 1.5;\\n font-size: 0.8em; }\\n.middle > div {\\n margin-top: 3em; }\\n.menunav {\\n position: absolute;\\n left: 50%; }\\n.visible {\\n display: none;\\n position: absolute;\\n margin: 250px 0 0 250px; }\\n.hidden {\\n display: none; }\\n.visible ul {\\n list-style-type: none; }\\n.visible details ul {\\n list-style-type: square; }\\n.visible a {\\n font-size: 120%;\\n text-decoration: none;\\n color: purple; }\\n.Reseau a {\\n font-size: 160%; }\\n.Reseau a:hover {\\n color: red; }\\n.circle label span {\\n -webkit-transform: rotate(-180deg);\\n transform: rotate(-180deg); }\\n/* Media */\\n@media (max-width: 992px) {\\n .menunav {\\n -webkit-transform: translateX(-55%);\\n transform: translateX(-55%);\\n margin-top: -20px; }\\n .circle label {\\n font-size: 0.8em; }\\n .middle > div {\\n margin-top: 0; }\\n .circle {\\n width: 500px;\\n height: 500px;\\n overflow: hidden; }\\n .circle li {\\n width: 50%;\\n height: 50%; }\\n .middle {\\n top: 24%;\\n left: 24%; }\\n .menunav ul {\\n padding: 55%; } }\\n@media (max-width: 992px) and (max-width: 608px) {\\n .menumain {\\n height: 20vh; }\\n .circle .slice img {\\n height: 30px;\\n width: 70px; } }\\n@media (max-width: 992px) {\\n #carouselExampleIndicators {\\n margin-top: -100px;\\n width: 100%;\\n max-height: 70vh; }\\n #carouselExampleIndicators img {\\n max-height: 70vh; } }\\n@media (max-width: 992px) and (max-width: 992px) {\\n .homenav {\\n background: #fe632a; }\\n #carouselExampleIndicators {\\n margin-top: 0px; } }\\n@media (max-width: 992px) {\\n .species-pie {\\n background: #dff0e1; }\\n .habitat-pie {\\n background: #f7ddd0; }\\n .aquatic-pie {\\n background: #d2e2f0; }\\n .species-btn {\\n background: #dff0e1;\\n border-bottom: 1px solid yellowgreen;\\n padding: 35px 0px; }\\n .species-btn button {\\n border: none;\\n outline: none;\\n font-weight: 800;\\n font-size: 24px;\\n background: #dff0e1;\\n border-bottom: 2px solid black; }\\n .habitat-btn {\\n background: #f7ddd0;\\n border-bottom: 1px solid yellowgreen;\\n padding: 35px 0px; }\\n .habitat-btn button {\\n border: none;\\n outline: none;\\n font-weight: 800;\\n font-size: 24px;\\n background: #f7ddd0;\\n border-bottom: 2px solid black; }\\n .aquatic-btn {\\n background: #d2e2f0;\\n border-bottom: 1px solid yellowgreen;\\n padding: 35px 0px; }\\n .aquatic-btn button {\\n border: none;\\n outline: none;\\n font-weight: 800;\\n font-size: 24px;\\n background: #d2e2f0;\\n border-bottom: 2px solid black; }\\n /* Container holding the image and the text */\\n .citizen-page1 {\\n position: relative;\\n text-align: center;\\n color: white;\\n padding: 0px 50px; }\\n .citizen-page1 img {\\n width: 100%;\\n height: 70vh;\\n margin-bottom: 50px; }\\n .citizen-page1 h2 {\\n color: black;\\n font-weight: bolder;\\n padding: 50px 0px; }\\n /* Centered text */\\n .citizen-page1 .centered {\\n position: absolute;\\n top: 75%;\\n left: 50%;\\n -webkit-transform: translate(-50%, -50%);\\n transform: translate(-50%, -50%); }\\n .citizen-page1 .centered p {\\n color: white;\\n font-weight: bolder; }\\n .habitatepagebtn button {\\n border: none;\\n outline: none;\\n font-weight: 800;\\n font-size: 24px;\\n border-bottom: 2px solid black;\\n background: none;\\n margin: 20px 20px; }\\n .page-citizen {\\n display: flex;\\n justify-content: center;\\n align-items: center; }\\n .form-row {\\n margin: 25px 0px; }\\n .name {\\n width: 200px;\\n text-align: left;\\n font-size: 18px;\\n font-weight: bolder; }\\n .form-row input {\\n width: 300px;\\n background: #98b0cb;\\n border: none;\\n outline: none;\\n padding: 10px 10px;\\n border-radius: 15px;\\n position: relative; }\\n .form-row textarea {\\n width: 600px;\\n height: 200px;\\n background: #98b0cb;\\n border: none;\\n outline: none;\\n padding: 10px 10px;\\n border-radius: 15px;\\n position: relative; } }\\n@media (max-width: 992px) and (max-width: 992px) {\\n .form-row textarea {\\n width: 350px;\\n height: 150px;\\n background: #98b0cb;\\n border: none;\\n outline: none;\\n padding: 10px 10px;\\n border-radius: 15px;\\n position: relative; } }\\n@media (max-width: 992px) {\\n .form-row .img-input {\\n position: absolute;\\n right: 10px;\\n top: 10px; }\\n .drag {\\n display: flex;\\n justify-content: center;\\n align-items: center; } }\\n@media (max-width: 992px) and (max-width: 502px) {\\n .drag {\\n flex-direction: column; }\\n .form-row textarea {\\n width: 300px;\\n height: 150px;\\n background: #98b0cb;\\n border: none;\\n outline: none;\\n padding: 10px 10px;\\n border-radius: 15px;\\n position: relative; } }\\n@media (max-width: 992px) {\\n .ct button {\\n width: 100%;\\n max-width: 1000px;\\n font-size: 24px;\\n font-weight: bolder;\\n margin: 10px 10px;\\n border: none;\\n background: #316297;\\n padding: 10px 0px;\\n border-radius: 25px;\\n color: white; }\\n .page-8-btn button {\\n width: 200px;\\n border: none;\\n outline: none;\\n background: none;\\n margin: 10px 0px;\\n padding: 4px 0px;\\n font-weight: bolder; }\\n .page-8-btn .btnclr1 {\\n background: #6489b1;\\n color: white; }\\n .page-8-btn .btnclr2 {\\n background: #a0d2a4;\\n color: white; }\\n .page-8-btn .btnclr3 {\\n background: #81bec4;\\n color: white; }\\n .page-8-btn .btnclr4 {\\n background: #55a47e;\\n color: white; }\\n .modal-dialog {\\n opacity: 0.6;\\n color: #1c7eb6;\\n font-weight: bolder; }\\n .profile-inf {\\n padding-bottom: 25px; }\\n .profile-inf h6 {\\n color: black;\\n position: relative; }\\n .profile-inf i {\\n position: absolute;\\n right: 10px;\\n margin-top: -50px; }\\n .modal-content .dlt {\\n background: green !important;\\n color: #1c7eb6;\\n padding: 10px 25px;\\n border: none;\\n border-radius: 10px;\\n color: white; } }\\n.ls-filter-icons {\\n position: absolute;\\n top: 0;\\n margin: 0;\\n left: 0;\\n z-index: 1; }\\n.ls-filter {\\n margin: 0;\\n left: 45px; }\\n.pa-0 {\\n padding: 0 !important; }\\n.filteropt {\\n padding-top: 0;\\n padding-bottom: 0; }\\n.filter-title {\\n font-size: 16px;\\n padding-top: 8px;\\n padding-bottom: 8px; }\\n.cinfofilter .cinfofiltertitle {\\n min-width: 120px;\\n display: inline-block;\\n margin-bottom: 0; }\\n.cinfofilter .chekbox-custom {\\n display: inline-block;\\n font-weight: 400;\\n padding-right: 10px;\\n padding-left: 20px; }\\n.ng5-slider-bar-wrapper {\\n top: auto;\\n left: 0;\\n margin: 0 0 0 -16px;\\n padding: 0 0 0 0px !important;\\n height: 100%;\\n width: 32px; }\\n.ng5-slider-span {\\n padding: 0px !important; }\\n.chekbox-custom {\\n font-size: 16px;\\n display: inline-block;\\n font-weight: 300;\\n margin: 0 10px !important;\\n padding: 0px 20px; }\\n.ls-filter {\\n border-radius: 3px;\\n background-color: rgba(255, 255, 255, 0.75);\\n padding: 8px;\\n position: absolute;\\n top: 0;\\n margin: 10px 10px 10px 0px;\\n padding: 10px 10px 10px 20px; }\\n.cinfofilterrow {\\n position: absolute;\\n top: 10px; }\\n.cinfofilter {\\n z-index: 99;\\n background: #ffffffd9;\\n width: 100%;\\n margin: auto;\\n box-shadow: 0 0 5px 0 #0000002e; }\\n.filteropt {\\n display: flex;\\n align-items: center;\\n justify-content: space-between; }\\n.checkmark {\\n position: absolute;\\n top: 5px;\\n left: 0;\\n height: 14px;\\n width: 14px;\\n border: 1px solid #d7d7d7;\\n background-color: #ffffff; }\\n.checkmark:after {\\n left: 4px;\\n top: 1px;\\n width: 4px;\\n height: 8px;\\n border: solid white;\\n border-width: 0 2px 2px 0;\\n -webkit-transform: rotate(45deg);\\n transform: rotate(45deg); }\\n.cinfofilter .cinfofiltertitle {\\n text-align: left;\\n font-size: 18px; }\\n@media (max-width: 765px) {\\n .ccd2 {\\n justify-content: flex-start;\\n flex-wrap: wrap; }\\n .cinfofilterrow {\\n position: initial; }\\n .cinfofilter .cinfofiltertitle {\\n text-align: left;\\n font-size: 14px;\\n padding: 4px 6px 4px 6px !important;\\n max-width: 50px !important; }\\n .cinfofilterrow {\\n margin: 0px !important; } }\\n::ng-deep .ng5-slider.ng5-slider-vertical .ng5-slider-bar-wrapper {\\n top: auto;\\n left: 0;\\n margin: 0 0 0 -16px;\\n padding: 0 0 0 16px;\\n height: 100%;\\n width: 0px !important; }\\n.pull-right {\\n position: absolute;\\n right: 0px;\\n top: 0px; }\\n@media (max-width: 600px) {\\n .ls-filter {\\n padding: 0px;\\n display: flex;\\n flex-wrap: wrap; } }\\n.searchicon {\\n position: absolute;\\n bottom: 5%;\\n left: 0%;\\n margin-bottom: 15px;\\n display: block;\\n z-index: 9999;\\n right: 0%;\\n top: 20% !important; }\\n.dropup .dropdown-toggle::after {\\n display: none; }\\n.locationDiv {\\n display: flex; }\\n.locationDiv_rlt {\\n display: flex;\\n justify-content: center; }\\n.filterDiv {\\n width: 30%;\\n display: inline-block;\\n padding-left: 1%; }\\n.locationText {\\n width: 40%;\\n display: inline-block; }\\n.modal-dialog {\\n opacity: 1.0;\\n color: #1c7eb6;\\n font-weight: bolder; }\\n.locationsearchicon {\\n height: 1px;\\n background: #0000001c;\\n margin: 10px 0px 10px 0px; }\\n.ngucarouselPointDefault .ngucarouselPoint {\\n padding: 0px !important; }\\n.ngucarouselPoint {\\n list-style-type: none;\\n text-align: center;\\n padding: 0px;\\n margin-top: -20px;\\n margin-bottom: 0px;\\n white-space: nowrap;\\n overflow: auto;\\n box-sizing: border-box; }\\n.box-style {\\n padding: 6px;\\n border: 1px solid gray;\\n color: black;\\n border-radius: 50%; }\\n.social-dropdown {\\n display: block !important; }\\n.modal-body {\\n padding: 0px !important; }\\n.ls-sptitle {\\n padding: 20px !important; }\\n@media (max-width: 991px) {\\n .socialicon.locationsearchicon .searchicon {\\n top: 1rem !important;\\n left: -1rem; }\\n .ls-sptitle {\\n padding: 0px !important; }\\n .box-style {\\n padding: 4px;\\n border: 1px solid gray;\\n color: black;\\n border-radius: 50%; }\\n .box-style-text {\\n font-size: 12px !important; } }\\n@media (max-width: 992px) {\\n .modal-dialog {\\n opacity: 1.0;\\n color: #1c7eb6;\\n font-weight: bolder; }\\n .modal-body {\\n padding: 14px !important; } }\\n@media (max-width: 767px) {\\n .modal {\\n padding-right: 0 !important;\\n padding-left: 0 !important; } }\\n@media screen and (max-width: 700px) {\\n .locationDiv {\\n display: flex;\\n flex-direction: column-reverse; }\\n .filterDiv {\\n width: 100%; }\\n .locationText {\\n width: 100%; } }\\n\"","import { Component, OnInit, OnChanges, Inject, PLATFORM_ID, OnDestroy, ViewEncapsulation } from '@angular/core';\r\nimport { loadModules } from 'esri-loader';\r\nimport { NgxSpinnerService } from 'ngx-spinner';\r\nimport { isPlatformBrowser } from '@angular/common';\r\nimport { ActivatedRoute, Router } from '@angular/router';\r\nimport { NguCarousel } from '@ngu/carousel';\r\nimport { Options } from 'ng5-slider';\r\nimport { MapService } from '../../../conservation-info/arcGis-map.service';\r\nimport { SpeciesService } from '../../../home/species/species.service';\r\nimport { StorageService } from '../../../core/storage.service';\r\nimport { environment } from '../../../../environments/environment';\r\nimport { HeaderService } from '../../../shared/header/header.service';\r\nimport { debug } from 'console';\r\n\r\ndeclare const $: any;\r\n\r\ninterface SimpleSliderModel {\r\n value: number;\r\n options: Options;\r\n}\r\n\r\n@Component({\r\n selector: 'app-location-search-mobile',\r\n templateUrl: './location-search-mobile.component.html',\r\n styleUrls: ['./location-search-mobile.component.scss'],\r\n // encapsulation: ViewEncapsulation.None\r\n})\r\n\r\nexport class LocationSearchMobileComponent implements OnInit, OnDestroy {\r\n verticalSlider1: SimpleSliderModel = {\r\n value: 10,\r\n options: {\r\n floor: 1,\r\n ceil: 20,\r\n vertical: true\r\n }\r\n };\r\n\r\n\r\n public show: boolean = false;\r\n public buttonName: any = 'Show';\r\n\r\n\r\n locationFilterDiv = false;\r\n locationFilterDetailDiv = false;\r\n selectedLayer = '';\r\n map: any;\r\n mapView: any;\r\n layerUrl = '';\r\n layerData: any;\r\n featureLayers = [];\r\n graphicsLayer;\r\n speciesList = [];\r\n currentLongitude = 54.37098285294529;\r\n currentLatitude = 24.452524894549093;\r\n token = '';\r\n speciesDetails = [];\r\n speciesMedia = [];\r\n divider = 0;\r\n isSpeciesNotAvailable = false;\r\n isSpeciesEmpty = true;\r\n validity: number;\r\n isBrowser: boolean;\r\n colorArray = [];\r\n currentLayer: number;\r\n currentSpecies: string;\r\n currentSpeciesCommonName: string;\r\n currentSpeciesLatinName: string;\r\n carouselBanner: NguCarousel;\r\n currentShareUrl: string;\r\n conservationList: any;\r\n currentLanguage = this.storageService.getValue('CurrentLanguage');\r\n lods = [{\r\n \"level\": 0,\r\n \"resolution\": 156543.03392800014,\r\n \"scale\": 5.91657527591555E8\r\n }, {\r\n \"level\": 1,\r\n \"resolution\": 78271.51696399994,\r\n \"scale\": 2.95828763795777E8\r\n }, {\r\n \"level\": 2,\r\n \"resolution\": 39135.75848200009,\r\n \"scale\": 1.47914381897889E8\r\n }, {\r\n \"level\": 3,\r\n \"resolution\": 19567.87924099992,\r\n \"scale\": 7.3957190948944E7\r\n }, {\r\n \"level\": 4,\r\n \"resolution\": 9783.93962049996,\r\n \"scale\": 3.6978595474472E7\r\n }, {\r\n \"level\": 5,\r\n \"resolution\": 4891.96981024998,\r\n \"scale\": 1.8489297737236E7\r\n }, {\r\n \"level\": 6,\r\n \"resolution\": 2445.98490512499,\r\n \"scale\": 9244648.868618\r\n }, {\r\n \"level\": 7,\r\n \"resolution\": 1222.992452562495,\r\n \"scale\": 4622324.434309\r\n }, {\r\n \"level\": 8,\r\n \"resolution\": 611.4962262813797,\r\n \"scale\": 2311162.217155\r\n }, {\r\n \"level\": 9,\r\n \"resolution\": 305.74811314055756,\r\n \"scale\": 1155581.108577\r\n }, {\r\n \"level\": 10,\r\n \"resolution\": 152.87405657041106,\r\n \"scale\": 577790.554289\r\n }, {\r\n \"level\": 11,\r\n \"resolution\": 76.43702828507324,\r\n \"scale\": 288895.277144\r\n }, {\r\n \"level\": 12,\r\n \"resolution\": 38.21851414253662,\r\n \"scale\": 144447.638572\r\n }, {\r\n \"level\": 13,\r\n \"resolution\": 19.10925707126831,\r\n \"scale\": 72223.819286\r\n }, {\r\n \"level\": 14,\r\n \"resolution\": 9.554628535634155,\r\n \"scale\": 36111.909643\r\n }, {\r\n \"level\": 15,\r\n \"resolution\": 4.77731426794937,\r\n \"scale\": 18055.954822\r\n }, {\r\n \"level\": 16,\r\n \"resolution\": 2.388657133974685,\r\n \"scale\": 9027.977411\r\n }, {\r\n \"level\": 17,\r\n \"resolution\": 1.1943285668550503,\r\n \"scale\": 4513.988705\r\n }, {\r\n \"level\": 18,\r\n \"resolution\": 0.5971642835598172,\r\n \"scale\": 2256.994353\r\n }, {\r\n \"level\": 19,\r\n \"resolution\": 0.29858214164761665,\r\n \"scale\": 1128.497176\r\n }];\r\n\r\n today = new Date();\r\n year = this.today.getFullYear();\r\n processYear = this.year - 5;\r\n\r\n constructor(\r\n @Inject(PLATFORM_ID) platformId: string,\r\n private mapService: MapService,\r\n public speciesService: SpeciesService,\r\n private spinner: NgxSpinnerService,\r\n public storageService: StorageService,\r\n private route: ActivatedRoute,\r\n private router: Router,\r\n private headerService: HeaderService,\r\n ) {\r\n\r\n if (this.storageService.getValue('CurrentLanguage') != 'en-US') {\r\n this.storageService.setValue('CurrentLanguage', 'en-US');\r\n window.location.reload();\r\n }\r\n\r\n this.isBrowser = isPlatformBrowser(platformId);\r\n this.layerUrl = 'https://enviroportal.ead.ae/server/rest/services/Enviroportal/TerrestrialBiodiversity/MapServer';\r\n this.isBrowser = isPlatformBrowser(platformId);\r\n this.colorArray = [\r\n '#fb8c00',\r\n '#f4c41e',\r\n '#808080',\r\n '#000033',\r\n '#33cc33',\r\n '#fb8c00',\r\n '#f4c41e',\r\n '#808080',\r\n '#000033',\r\n '#33cc33',\r\n ];\r\n this.currentLayer = null;\r\n this.currentSpecies = '';\r\n this.router.routeReuseStrategy.shouldReuseRoute = () => false;\r\n this.currentShareUrl = '';\r\n }\r\n\r\n ngOnInit() {\r\n\r\n // if (this.storageService.getValue('CurrentLanguage') != 'en-US') {\r\n // this.storageService.setValue('CurrentLanguage', 'en-US');\r\n // window.location.reload();\r\n // }\r\n\r\n\r\n this.headerService.sendUpdateBackgroundImage('assets/images/location_search.jpg');\r\n if (this.isBrowser) {\r\n this.spinner.show();\r\n // setTimeout(() => {\r\n // this.spinner.show();\r\n // }, 1);\r\n loadModules([\r\n 'esri/Map',\r\n 'esri/views/MapView',\r\n 'esri/layers/TileLayer',\r\n 'esri/Basemap',\r\n 'dojo/domReady!',\r\n ])\r\n .then(([EsriMap, EsriMapView, TileLayer, Basemap]) => {\r\n this.token = this.route.snapshot.data['tokenInfo'].result.token;\r\n this.validity = this.route.snapshot.data['tokenInfo'].result.expires;\r\n this.setCredentials(this.token, this.validity);\r\n this.mapService.loadLayerInfo(this.layerUrl, this.token)\r\n .subscribe(SpeciesData => {\r\n this.layerData = SpeciesData;\r\n this.spinner.hide();\r\n }, error => {\r\n this.spinner.hide();\r\n });\r\n\r\n let streetsTile = new TileLayer({\r\n url: \"https://arcgis.sdi.abudhabi.ae/arcgis/rest/services/Pub/BaseMapEng_LightGray_WM/MapServer\"\r\n });\r\n\r\n \r\n\r\n\r\n let grayBase = new Basemap({\r\n baseLayers: [streetsTile]\r\n });\r\n this.map = new EsriMap({\r\n basemap: grayBase\r\n });\r\n\r\n this.mapService.geolocation()\r\n .subscribe((location: any) => {\r\n this.currentLatitude = location.location.lat;\r\n this.currentLongitude = location.location.lng;\r\n this.mapView = new EsriMapView({\r\n container: 'mapViewNode',\r\n map: this.map,\r\n zoom: 8,\r\n center: [this.currentLongitude, this.currentLatitude],\r\n constraints: {\r\n lods: this.lods\r\n },\r\n ui: {\r\n components: ['attribution']\r\n }\r\n });\r\n\r\n this.loadMarker(this.currentLongitude, this.currentLatitude);\r\n this.mapView.on('click', (evt) => {\r\n // Search for symbols on click's position\r\n this.mapView.hitTest(evt.screenPoint)\r\n .then((response) => {\r\n if (response && response.results && response.results.length === 0) {\r\n this.loadMarker(evt.mapPoint.longitude, evt.mapPoint.latitude);\r\n this.getSpecies(evt);\r\n }\r\n // Retrieve the first symbol\r\n const graphic = response.results[0].graphic;\r\n if (graphic) {\r\n // We now have access to its attributes\r\n this.loadSpecieOnClick(graphic.attributes);\r\n }\r\n });\r\n });\r\n this.mapView.when(() => {\r\n this.checkTileLoad();\r\n // if (this.layerData !== null) {\r\n //this.spinner.hide();\r\n $('#location-search-disclaimer').modal('show');\r\n // }\r\n });\r\n }, error => {\r\n this.mapView = new EsriMapView({\r\n container: 'mapViewNode',\r\n map: this.map,\r\n zoom: 8,\r\n center: [this.currentLongitude, this.currentLatitude],\r\n constraints: {\r\n lods: this.lods\r\n },\r\n ui: {\r\n components: ['attribution']\r\n }\r\n });\r\n\r\n this.loadMarker(this.currentLongitude, this.currentLatitude);\r\n\r\n this.mapView.on('click', (evt) => {\r\n // Search for symbols on click's position\r\n this.mapView.hitTest(evt.screenPoint)\r\n .then((response) => {\r\n if (response && response.results && response.results.length === 0) {\r\n this.loadMarker(evt.mapPoint.longitude, evt.mapPoint.latitude);\r\n this.getSpecies(evt);\r\n }\r\n // Retrieve the first symbol\r\n const graphic = response.results[0].graphic;\r\n if (graphic) {\r\n // We now have access to its attributes\r\n this.loadSpecieOnClick(graphic.attributes);\r\n }\r\n });\r\n });\r\n //this.map.resize();\r\n //this.map.reposition();\r\n });\r\n\r\n setInterval(() =>\r\n this.mapService.loadToken()\r\n .subscribe(data => {\r\n this.token = data.result.token;\r\n this.validity = data.result.expires;\r\n this.setCredentials(data.result.token, data.result.expires);\r\n })\r\n , 1800000);\r\n }).catch(err => {\r\n console.error(err);\r\n });\r\n this.speciesService.getConservationStatusList('IUCN')\r\n .subscribe(statusList => {\r\n this.conservationList = statusList.result[0].conservationStatusList;\r\n });\r\n }\r\n }\r\n\r\n checkTileLoad() {\r\n if (this.isBrowser) {\r\n setInterval(() => {\r\n if (this.mapView.map.allLayers.items[0].loaded) {\r\n this.spinner.hide();\r\n return;\r\n }\r\n }, 1000);\r\n }\r\n }\r\n\r\n loadMarker(longitude, latitude) {\r\n loadModules([\r\n 'esri/layers/GraphicsLayer',\r\n 'esri/Graphic',\r\n 'esri/symbols/PictureMarkerSymbol',\r\n 'esri/geometry/Point',\r\n ])\r\n .then(([GraphicsLayer, Graphic, PictureMarkerSymbol, EsriPoint]) => {\r\n this.map.remove(this.graphicsLayer);\r\n const point = new EsriPoint([longitude, latitude]);\r\n this.graphicsLayer = new GraphicsLayer();\r\n const pictureMarkerSymbol = new PictureMarkerSymbol({\r\n 'url': 'assets/images/icons/marker.svg',\r\n 'height': 40,\r\n 'width': 40,\r\n });\r\n this.graphicsLayer.add(new Graphic(point, pictureMarkerSymbol));\r\n this.map.add(this.graphicsLayer);\r\n });\r\n }\r\n\r\n loadSpecieOnClick(attribute) {\r\n this.showSpecies(attribute.LatinName);\r\n }\r\n\r\n setCredentials(token, expires) {\r\n loadModules([\r\n 'esri/identity/IdentityManager',\r\n ])\r\n .then(([esriIdM]) => {\r\n const serverInfo = {\r\n 'server': 'https://enviroportal.ead.ae/server',\r\n 'tokenServiceUrl': 'https://enviroportal.ead.ae/server/tokens/',\r\n 'adminTokenServiceUrl': 'https://enviroportal.ead.ae/server/admin/generateToken',\r\n 'shortLivedTokenValidity': 60,\r\n 'currentVersion': 10.051,\r\n 'hasServer': true\r\n };\r\n const credentials = {\r\n 'userId': 'SpeciesApp',\r\n 'server': 'https://enviroportal.ead.ae/server',\r\n 'token': token,\r\n 'expires': expires,\r\n 'validity': 60,\r\n 'ssl': false,\r\n 'creationTime': new Date().getTime(),\r\n 'scope': 'server',\r\n 'resources': [\r\n this.layerUrl + '/0',\r\n this.layerUrl + '/1',\r\n this.layerUrl + '/2',\r\n this.layerUrl + '/3',\r\n this.layerUrl + '/4',\r\n ]\r\n };\r\n const idObject = {\r\n 'serverInfos': [\r\n serverInfo\r\n ],\r\n 'oAuthInfos': [],\r\n 'credentials': [\r\n credentials\r\n ]\r\n };\r\n esriIdM.destroyCredentials();\r\n esriIdM.initialize(idObject);\r\n esriIdM.tokenValidity = 720;\r\n });\r\n }\r\n\r\n addRemoveLayer(layerId) {\r\n this.locationFilterDetailDiv = true;\r\n this.selectedLayer = this.selectedLayer ? '' : layerId\r\n loadModules([\r\n 'esri/layers/FeatureLayer',\r\n ])\r\n .then(([FeatureLayer]) => {\r\n let definitionExpression = '';\r\n // tslint:disable-next-line:max-line-length\r\n if (layerId === 3) {\r\n definitionExpression = \"((X BETWEEN \" + (this.currentLongitude - 0.035) + \" AND \" + (this.currentLongitude + 0.035) + \") AND (Y BETWEEN \" + (this.currentLatitude - 0.035) + \" AND \" + (this.currentLatitude + 0.035) + \")) AND (ConfidenceLevel=1) AND START_DATE >= '\" + this.processYear + \"'\";\r\n } else {\r\n definitionExpression = '((X BETWEEN ' + (this.currentLongitude - 0.035) + ' AND ' + (this.currentLongitude + 0.035) + ') AND (Y BETWEEN ' + (this.currentLatitude - 0.035) + ' AND ' + (this.currentLatitude + 0.035) + ')) AND (ConfidenceLevel=1)';\r\n }\r\n //definitionExpression = '((X BETWEEN ' + (this.currentLongitude - 0.035) + ' AND ' + (this.currentLongitude + 0.035) + ') AND (Y BETWEEN ' + (this.currentLatitude - 0.035) + ' AND ' + (this.currentLatitude + 0.035) + ')) AND (ConfidenceLevel=1)';\r\n if (this.featureLayers[layerId] === undefined) {\r\n if (this.currentLayer === layerId) {\r\n this.currentLayer = null;\r\n this.currentSpecies = '';\r\n }\r\n const trailheadsRenderer = {\r\n 'type': 'simple',\r\n 'symbol': {\r\n 'type': 'picture-marker',\r\n 'url': 'assets/images/' + layerId + '.png',\r\n 'width': 20,\r\n 'height': 20\r\n }\r\n };\r\n this.featureLayers[layerId] = new FeatureLayer(this.layerUrl + '/' + layerId,\r\n {\r\n outFields: ['*'],\r\n definitionExpression: definitionExpression,\r\n // renderer: trailheadsRenderer, // set the visualization on the layer\r\n });\r\n this.map.add(this.featureLayers[layerId]);\r\n this.getSpeciesData(layerId, definitionExpression);\r\n } else {\r\n if (this.currentLayer === layerId) {\r\n this.resetcurrentLayer(this.currentLayer);\r\n }\r\n this.map.remove(this.featureLayers[layerId]);\r\n this.featureLayers[layerId] = undefined;\r\n this.speciesList[layerId] = [];\r\n this.isSpeciesEmpty = this.featureLayers.every(element => element === undefined);\r\n }\r\n })\r\n .catch(err => {\r\n console.error(err);\r\n });\r\n }\r\n\r\n resetcurrentLayer(currentLayer) {\r\n loadModules([\r\n 'esri/layers/FeatureLayer',\r\n ])\r\n .then(([FeatureLayer]) => {\r\n this.featureLayers.forEach((layer, index) => {\r\n if (this.featureLayers[index] !== undefined && index !== currentLayer) {\r\n const trailheadsRenderer = {\r\n 'type': 'simple',\r\n 'symbol': {\r\n 'type': 'picture-marker',\r\n 'url': 'assets/images/' + index + '.png',\r\n 'width': 20,\r\n 'height': 20\r\n }\r\n };\r\n let definitionExpressionCurrentLayer = '';\r\n // tslint:disable-next-line:max-line-length\r\n if (index === 3) {\r\n definitionExpressionCurrentLayer = \"((X BETWEEN \" + (this.currentLongitude - 0.035) + \" AND \" + (this.currentLongitude + 0.035) + \") AND (Y BETWEEN \" + (this.currentLatitude - 0.035) + \" AND \" + (this.currentLatitude + 0.035) + \")) AND (ConfidenceLevel=1) AND START_DATE >= '2017'\";\r\n } else {\r\n definitionExpressionCurrentLayer = '((X BETWEEN ' + (this.currentLongitude - 0.035) + ' AND ' + (this.currentLongitude + 0.035) + ') AND (Y BETWEEN ' + (this.currentLatitude - 0.035) + ' AND ' + (this.currentLatitude + 0.035) + ')) AND (ConfidenceLevel=1)';\r\n }\r\n //definitionExpressionCurrentLayer = '((X BETWEEN ' + (this.currentLongitude - 0.035) + ' AND ' + (this.currentLongitude + 0.035) + ') AND (Y BETWEEN ' + (this.currentLatitude - 0.035) + ' AND ' + (this.currentLatitude + 0.035) + ')) AND (ConfidenceLevel=1)';\r\n this.featureLayers[index] = new FeatureLayer(this.layerUrl + '/' + index,\r\n {\r\n outFields: ['*'],\r\n definitionExpression: definitionExpressionCurrentLayer,\r\n // renderer: trailheadsRenderer, // set the visualization on the layer\r\n });\r\n this.map.add(this.featureLayers[index]);\r\n this.getSpeciesData(index, definitionExpressionCurrentLayer);\r\n }\r\n });\r\n this.currentLayer = null;\r\n this.currentSpecies = '';\r\n });\r\n }\r\n\r\n showSpecies(scientificName) {\r\n this.carouselBanner = {\r\n grid: { xs: 1, sm: 1, md: 1, lg: 1, all: 0 },\r\n slide: 1,\r\n speed: 400,\r\n interval: 4000,\r\n point: {\r\n visible: true,\r\n },\r\n load: 2,\r\n loop: false,\r\n touch: true\r\n };\r\n this.locationFilterDiv = false;\r\n this.locationFilterDetailDiv = false;\r\n\r\n this.currentSpeciesCommonName = '';\r\n this.currentSpeciesLatinName = '';\r\n this.currentShareUrl = '';\r\n this.speciesService.loadSpeciesDetail(scientificName)\r\n .subscribe((data: any) => {\r\n this.speciesDetails = data.result.speciesDetails;\r\n this.speciesMedia = this.speciesService.sortSpeciesMedia(data.result.speciesMediaInfo, this.speciesDetails);\r\n this.speciesDetails.forEach(fields => {\r\n\r\n if ((fields.values[0].fieldName).includes('Common Name') || (fields.values[0].fieldName).includes('الاسم الشائع')) {\r\n this.currentSpeciesCommonName = fields.values[0].fieldValue;\r\n }\r\n\r\n // tslint:disable-next-line:max-line-length\r\n if ((fields.values[0].fieldName).includes('Scientific Name') || (fields.values[0].fieldName).includes('الاسم العلمي')) {\r\n this.currentSpeciesLatinName = fields.values[0].fieldValue;\r\n }\r\n });\r\n this.currentShareUrl = environment.appUrl + '/species-detail/' + data.result.speciesId;\r\n this.isSpeciesNotAvailable = false;\r\n this.showNoDataModal();\r\n }, error => {\r\n this.speciesDetails = [];\r\n this.speciesMedia = [];\r\n this.currentSpeciesCommonName = '';\r\n this.currentSpeciesLatinName = '';\r\n this.currentShareUrl = '';\r\n this.showNoDataModal();\r\n this.isSpeciesNotAvailable = true;\r\n });\r\n }\r\n OnChanges() {\r\n console.log(\"changes\")\r\n const val = $('#nodatapopup')\r\n console.log({ val })\r\n }\r\n showNoDataModal() {\r\n\r\n if (this.isBrowser) {\r\n $('#nodatapopup').modal('show');\r\n }\r\n }\r\n\r\n removeSpecies() {\r\n setTimeout(() => {\r\n this.speciesDetails = [];\r\n this.speciesMedia = [];\r\n this.currentSpeciesCommonName = '';\r\n this.currentSpeciesLatinName = '';\r\n this.currentShareUrl = '';\r\n }, 500);\r\n }\r\n\r\n getSpecies(event) {\r\n loadModules([\r\n 'esri/layers/FeatureLayer'\r\n ])\r\n .then(([FeatureLayer]) => {\r\n this.currentLayer = null;\r\n this.currentSpecies = '';\r\n this.currentLatitude = event.mapPoint.latitude;\r\n this.currentLongitude = event.mapPoint.longitude;\r\n this.mapView.goTo({\r\n center: [this.currentLongitude, this.currentLatitude],\r\n zoom: (this.mapView.zoom > 8) ? this.mapView.zoom : 8\r\n });\r\n this.featureLayers.forEach((layer, index) => {\r\n const trailheadsRenderer = {\r\n 'type': 'simple',\r\n 'symbol': {\r\n 'type': 'picture-marker',\r\n 'url': 'assets/images/' + index + '.png',\r\n 'width': 20,\r\n 'height': 20\r\n }\r\n };\r\n let definitionExpression = '';\r\n // tslint:disable-next-line:max-line-length\r\n if (index === 3) {\r\n definitionExpression = \"((X BETWEEN \" + (this.currentLongitude - 0.035) + \" AND \" + (this.currentLongitude + 0.035) + \") AND (Y BETWEEN \" + (this.currentLatitude - 0.035) + \" AND \" + (this.currentLatitude + 0.035) + \")) AND (ConfidenceLevel=1) AND START_DATE >= '2017'\";\r\n } else {\r\n definitionExpression = '((X BETWEEN ' + (this.currentLongitude - 0.035) + ' AND ' + (this.currentLongitude + 0.035) + ') AND (Y BETWEEN ' + (this.currentLatitude - 0.035) + ' AND ' + (this.currentLatitude + 0.035) + ')) AND (ConfidenceLevel=1)';\r\n }\r\n //definitionExpression = '((X BETWEEN ' + (this.currentLongitude - 0.035) + ' AND ' + (this.currentLongitude + 0.035) + ') AND (Y BETWEEN ' + (this.currentLatitude - 0.035) + ' AND ' + (this.currentLatitude + 0.035) + ')) AND (ConfidenceLevel=1)';\r\n if (layer !== undefined) {\r\n this.map.remove(this.featureLayers[index]);\r\n this.featureLayers[index] = new FeatureLayer(this.layerUrl + '/' + index,\r\n {\r\n outFields: ['*'],\r\n definitionExpression: definitionExpression,\r\n // renderer: trailheadsRenderer\r\n });\r\n this.map.add(this.featureLayers[index]);\r\n this.getSpeciesData(index, definitionExpression);\r\n }\r\n });\r\n });\r\n }\r\n\r\n getSpeciesData(layerId, definitionExpression) {\r\n this.mapService.getSpeciesData(this.layerUrl, layerId, definitionExpression, this.token)\r\n .subscribe((data: any) => {\r\n // Filter birds data based on CommonName field in asc order\r\n if (layerId === 3) {\r\n data.features = data.features.sort(function (a, b) {\r\n let x = a.attributes.CommonName.toUpperCase(),\r\n y = b.attributes.CommonName.toUpperCase();\r\n return x == y ? 0 : x > y ? 1 : -1;\r\n });\r\n }\r\n this.speciesList[layerId] = data.features;\r\n this.isSpeciesEmpty = false;\r\n this.speciesList[layerId] = this.speciesList[layerId]\r\n .filter((elem, index, self) => self.findIndex((t) => ((t.attributes.LatinName).trim() === (elem.attributes.LatinName).trim())) === index);\r\n this.speciesList[layerId] = this.speciesList[layerId]\r\n .filter((elem) => elem.attributes.LatinName !== null && elem.attributes.CommomName !== null && elem.attributes.LatinName !== '');\r\n\r\n });\r\n }\r\n\r\n loadSpecieFeatureLayer(LatinName, index) {\r\n loadModules([\r\n 'esri/layers/FeatureLayer'\r\n ])\r\n .then(([FeatureLayer]) => {\r\n let trailheadsRenderer = {};\r\n if (LatinName !== this.currentSpecies) {\r\n this.currentSpecies = LatinName;\r\n let definitionExpression = '';\r\n // tslint:disable-next-line:max-line-length && quotemark \r\n definitionExpression = '((X BETWEEN ' + (this.currentLongitude - 0.035) + ' AND ' + (this.currentLongitude + 0.035) + ') AND (Y BETWEEN ' + (this.currentLatitude - 0.035) + ' AND ' + (this.currentLatitude + 0.035) + ') AND ( LatinName = ' + \"'\" + LatinName + \"'\" + \")) AND (ConfidenceLevel=1) AND START_DATE >= '2017'\";\r\n //definitionExpression = '((X BETWEEN ' + (this.currentLongitude - 0.035) + ' AND ' + (this.currentLongitude + 0.035) + ') AND (Y BETWEEN ' + (this.currentLatitude - 0.035) + ' AND ' + (this.currentLatitude + 0.035) + ') AND ( LatinName = ' + \"'\" + LatinName + \"'\" + ')) AND (ConfidenceLevel=1)';\r\n trailheadsRenderer = {\r\n 'type': 'simple',\r\n 'symbol': {\r\n 'type': 'picture-marker',\r\n 'url': 'assets/images/' + index + '.png',\r\n 'width': 20,\r\n 'height': 20\r\n }\r\n };\r\n this.featureLayers.forEach((layer, layerIndex) => {\r\n this.map.remove(this.featureLayers[layerIndex]);\r\n });\r\n this.featureLayers[index] = new FeatureLayer(this.layerUrl + '/' + index,\r\n {\r\n outFields: ['*'],\r\n definitionExpression: definitionExpression,\r\n // renderer: trailheadsRenderer,\r\n });\r\n this.map.add(this.featureLayers[index]);\r\n this.currentLayer = index;\r\n } else if (LatinName === this.currentSpecies) {\r\n this.currentSpecies = '';\r\n this.currentLayer = null;\r\n let definitionExpression = '';\r\n // tslint:disable-next-line:max-line-length && quotemark\r\n definitionExpression = \"((X BETWEEN \" + (this.currentLongitude - 0.035) + \" AND \" + (this.currentLongitude + 0.035) + \") AND (Y BETWEEN \" + (this.currentLatitude - 0.035) + \" AND \" + (this.currentLatitude + 0.035) + \")) AND (ConfidenceLevel=1) AND START_DATE >= '2017'\";\r\n // definitionExpression = '((X BETWEEN ' + (this.currentLongitude - 0.035) + ' AND ' + (this.currentLongitude + 0.035) + ') AND (Y BETWEEN ' + (this.currentLatitude - 0.035) + ' AND ' + (this.currentLatitude + 0.035) + ')) AND (ConfidenceLevel=1)';\r\n this.map.remove(this.featureLayers[index]);\r\n this.featureLayers.forEach((layer, layerIndex) => {\r\n if (this.featureLayers[layerIndex] !== undefined) {\r\n trailheadsRenderer = {\r\n 'type': 'simple',\r\n 'symbol': {\r\n 'type': 'picture-marker',\r\n 'url': 'assets/images/' + layerIndex + '.png',\r\n 'width': 20,\r\n 'height': 20\r\n }\r\n };\r\n this.featureLayers[layerIndex] = new FeatureLayer(this.layerUrl + '/' + layerIndex,\r\n {\r\n outFields: ['*'],\r\n definitionExpression: definitionExpression,\r\n // renderer: trailheadsRenderer,\r\n });\r\n this.map.add(this.featureLayers[layerIndex]);\r\n }\r\n });\r\n }\r\n });\r\n }\r\n\r\n adjustZoom(zoomValue) {\r\n // console.log(this.mapView.zoom, zoomValue);\r\n this.mapView.zoom = parseInt(zoomValue, 10);\r\n }\r\n\r\n switchLocationFilter() {\r\n this.locationFilterDiv = !this.locationFilterDiv;\r\n }\r\n\r\n switchLocationFilterDetailView() {\r\n this.locationFilterDetailDiv = !this.locationFilterDetailDiv;\r\n }\r\n\r\n ngOnDestroy() {\r\n if (this.isBrowser) {\r\n loadModules([\r\n 'esri/identity/IdentityManager',\r\n ])\r\n .then(([esriIdM]) => {\r\n esriIdM.destroyCredentials();\r\n });\r\n }\r\n }\r\n\r\n\r\n\r\n\r\n toggle() {\r\n\r\n\r\n this.show = !this.show;\r\n\r\n // CHANGE THE NAME OF THE BUTTON.\r\n if (this.show)\r\n this.buttonName = \"Hide\";\r\n else\r\n this.buttonName = \"Show\";\r\n }\r\n\r\n\r\n\r\n\r\n}\r\n","module.exports = \"
\\r\\n\"","import {Component, OnInit, Inject, PLATFORM_ID} from '@angular/core';\r\nimport {isPlatformBrowser} from '@angular/common';\r\n\r\n@Component({\r\n selector: 'app-location-search',\r\n templateUrl: './location-search.component.html'\r\n})\r\n\r\nexport class LocationSearchComponent implements OnInit {\r\n\r\n isBrowser: boolean;\r\n\r\n constructor(\r\n @Inject(PLATFORM_ID) platformId: string\r\n ) {\r\n this.isBrowser = isPlatformBrowser(platformId);\r\n }\r\n\r\n ngOnInit() {\r\n }\r\n\r\n}\r\n","import {NgModule} from '@angular/core';\r\nimport {Routes, RouterModule} from '@angular/router';\r\n\r\nimport { HomeComponent } from './home/home.component';\r\nimport { ConservationInfoComponent } from './conservation-info/conservation-info.component';\r\nimport { ErrorResponseComponent } from './shared/error-response/error-response.component';\r\nimport { MasterCategoryResolver } from './resolver/master-category.resolver';\r\nimport { TokenResolver } from './resolver/ArcGIS-token.resolver';\r\nimport { PublicInteractionRoutingModule } from './public-interaction/public-interaction-routing.module';\r\nimport { PersonalListRoutingModule } from './personal-list/personal-list-routing.module';\r\nimport { SpeciesRoutingModule } from './home/species/species-routing.module';\r\nimport { GlobalRoutingModule } from './global/global-routing.module';\r\nimport { AuthenticationRoutingModule } from './authentication/authentication-routing.module';\r\nimport { AdvanceSearchRoutingModule } from './advanced-search/advanced-search-routing.module';\r\nimport { PageNotFoundComponent } from './shared/page-not-found/page-not-found.component';\r\nimport { InternalServerErrorComponent } from './shared/internal-server-error/internal-server-error.component';\r\nimport { ConservationInfoBrowserComponent } from './conservation-info/conservation-info-browser/conservation-info-browser.component';\r\nimport { ConservationInfoMobileComponent } from './conservation-info/conservation-info-mobile/conservation-info-mobile.component';\r\n\r\nimport { ConservationInfoMobileArComponent } from './conservation-info/conservation-info-mobile-ar/conservation-info-mobile-ar.component';\r\nconst routes: Routes = [\r\n {\r\n path: '', component: HomeComponent,\r\n resolve: {categoryData: MasterCategoryResolver}\r\n },\r\n\r\n {\r\n path: 'conservation-information',\r\n component: ConservationInfoComponent,\r\n resolve: { tokenInfo: TokenResolver }\r\n },\r\n {\r\n path:'mobile-view-conversion',\r\n component:ConservationInfoMobileComponent,\r\n resolve: { tokenInfo: TokenResolver }\r\n },\r\n {\r\n path:'mobile-view-conversion-ar',\r\n component:ConservationInfoMobileArComponent,\r\n resolve: { tokenInfo: TokenResolver }\r\n },\r\n {\r\n path: 'error',\r\n component: ErrorResponseComponent\r\n },\r\n {\r\n path: 'page-not-found',\r\n component: PageNotFoundComponent\r\n },\r\n {\r\n path: 'no-internet-connection',\r\n component: InternalServerErrorComponent\r\n },\r\n {\r\n path: 'species',\r\n redirectTo: ''\r\n },\r\n {\r\n path: '**',\r\n redirectTo: 'page-not-found'\r\n }\r\n];\r\n@NgModule({\r\n imports: [\r\n RouterModule.forRoot(routes),\r\n PublicInteractionRoutingModule,\r\n PersonalListRoutingModule,\r\n SpeciesRoutingModule,\r\n GlobalRoutingModule,\r\n AuthenticationRoutingModule,\r\n AdvanceSearchRoutingModule\r\n ],\r\n exports: [RouterModule],\r\n providers: [MasterCategoryResolver]\r\n})\r\nexport class AppRoutingModule {\r\n}\r\n","module.exports = \"
\\r\\n
\\r\\n
\\r\\n
\\r\\n \\r\\n
\\r\\n \\r\\n
\\r\\n \\r\\n\\r\\n
\\r\\n
\\r\\n
\\r\\n \\r\\n
\\r\\n \\r\\n
\\r\\n\"","module.exports = \"\"","import {Component, OnInit, Inject, PLATFORM_ID} from '@angular/core';\r\nimport {TranslateService} from '@ngx-translate/core';\r\nimport {Router, NavigationEnd, NavigationStart} from '@angular/router';\r\n\r\nimport {AuthenticationService} from './authentication/authentication.service';\r\nimport {StorageService} from './core/storage.service';\r\nimport {Constants} from './core/constant';\r\n\r\nimport {TransferState, makeStateKey} from '@angular/platform-browser';\r\nimport {isPlatformBrowser} from '@angular/common';\r\nimport {SpeciesService} from './home/species/species.service';\r\nimport {GlobalService} from './global/global.service';\r\nimport {environment} from '../environments/environment';\r\nimport { ErrorService } from './shared/error-response/error.service';\r\n\r\n\r\ndeclare var ga: Function;\r\ndeclare const $: any;\r\n\r\nconst CURRENT_LANG = makeStateKey('CURRENT_LANG');\r\nconst IMAGE_FIELD_DATA = makeStateKey('IMAGE_FIELD_DATA');\r\n@Component({\r\n selector: 'app-root',\r\n templateUrl: './app.component.html',\r\n styleUrls: ['./app.component.scss']\r\n})\r\nexport class AppComponent implements OnInit {\r\n backgroundImage: string;\r\n title = 'app';\r\n routeUrl: string;\r\n wrapperClass: string;\r\n CurrentLanguage = '';\r\n isBrowser: boolean;\r\n\r\n constructor(public translate: TranslateService,\r\n private router: Router,\r\n private storageService: StorageService,\r\n private authenticationService: AuthenticationService,\r\n private state: TransferState,\r\n private speciesService: SpeciesService,\r\n private globalService: GlobalService,\r\n private errorService: ErrorService,\r\n \r\n @Inject(PLATFORM_ID) platformId: string,\r\n ) {\r\n this.isBrowser = isPlatformBrowser(platformId);\r\n this.router.events.subscribe(() => this.routeUrl = this.router.url);\r\n if (this.isBrowser) {\r\n this.router.events.subscribe(event => {\r\n if(event instanceof NavigationStart) {\r\n }\r\n if (event instanceof NavigationEnd) {\r\n ga('set', 'page', event.urlAfterRedirects);\r\n if (((event.urlAfterRedirects.split('?'))[0]).replace('/', '') !== '') {\r\n if (((event.urlAfterRedirects.split('?'))[0]).replace('/', '').includes('species-detail')) {\r\n ga('send', 'pageview', {\r\n 'page': ((event.urlAfterRedirects.split('?'))[0]),\r\n 'title': 'Species-detail'\r\n });\r\n } else {\r\n ga('send', 'pageview', {\r\n 'page': ((event.urlAfterRedirects.split('?'))[0]),\r\n 'title': ((event.urlAfterRedirects.split('?'))[0]).replace('/', '')\r\n });\r\n }\r\n } else {\r\n ga('send', 'pageview', {\r\n 'page': ((event.urlAfterRedirects.split('?'))[0]),\r\n 'title': 'Home'\r\n });\r\n }\r\n }\r\n });\r\n }\r\n }\r\n \r\n\r\n ngOnInit() {\r\n // document.addEventListener('contextmenu', event => event.preventDefault())\r\n this.globalService.updateMetaTag('image', environment.appUrl + '/assets/images/main-logo.png');\r\n this.speciesService.imageFieldData = this.state.get(IMAGE_FIELD_DATA, '' as any);\r\n this.CurrentLanguage = this.state.get(CURRENT_LANG, '' as string);\r\n // tslint:disable-next-line:max-line-length\r\n const lang = this.storageService.getValue('CurrentLanguage') !== '' ? this.storageService.getValue('CurrentLanguage') : Constants.DEFAULT_LANG;\r\n if (this.CurrentLanguage === '' || this.CurrentLanguage !== lang) {\r\n this.CurrentLanguage = lang;\r\n this.state.set(CURRENT_LANG, lang as string);\r\n }\r\n if (this.storageService.getValue('AccessToken') && this.isBrowser) {\r\n this.authenticationService.setLoginStatus(true);\r\n }\r\n if (this.storageService.getValue('CurrentLanguage') === '') {\r\n this.storageService.setValue('CurrentLanguage', Constants.DEFAULT_LANG);\r\n }\r\n this.translate.use(this.CurrentLanguage);\r\n // tslint:disable-next-line:max-line-length\r\n if (this.speciesService.imageFieldData === null || this.speciesService.imageFieldData === undefined || this.speciesService.imageFieldData === '') {\r\n this.saveGenericData();\r\n }\r\n if (this.isBrowser) {\r\n window.addEventListener('popstate', (event) => {\r\n $('.modal').modal('hide');\r\n // if (this.CurrentLanguage !== lang) {\r\n // window.location.reload();\r\n // }\r\n });\r\n }\r\n }\r\n\r\n switchLanguage(language: string) {\r\n this.translate.use(language);\r\n }\r\n\r\n hasMatches(checker, ...values: string[]): boolean {\r\n let matchFound = false;\r\n this.wrapperClass = 'page-content-wrapper';\r\n // check for null or undefined first\r\n if (this.routeUrl) {\r\n for (let i = 0; i < values.length; i++) {\r\n if (this.routeUrl.indexOf(values[i]) > -1) {\r\n matchFound = true;\r\n this.wrapperClass = '';\r\n break;\r\n }\r\n }\r\n } else if (this.routeUrl === '/' && checker) {\r\n matchFound = true;\r\n this.wrapperClass = '';\r\n }\r\n return matchFound;\r\n }\r\n\r\n saveGenericData() {\r\n this.speciesService.getMasterCategories()\r\n .subscribe(data => {\r\n data.result.masterData.forEach(masterData => {\r\n if (masterData.code === 'FIELDTYPE') {\r\n const ImageFieldData = masterData.masterGenericDetails.filter(fieldData => fieldData.valueEn === 'Image')[0];\r\n this.speciesService.imageFieldData = ImageFieldData;\r\n this.state.set(IMAGE_FIELD_DATA, ImageFieldData as object);\r\n }\r\n });\r\n }, error => {\r\n this.errorService.checkError(error);\r\n });\r\n }\r\n}\r\n","import { BrowserModule, TransferState } from '@angular/platform-browser';\r\nimport { HttpClientModule, HttpClient } from '@angular/common/http';\r\nimport { BrowserTransferStateModule } from '@angular/platform-browser';\r\nimport { NgModule } from '@angular/core';\r\nimport { TranslateModule, TranslateLoader } from '@ngx-translate/core';\r\nimport { TranslateHttpLoader } from '@ngx-translate/http-loader';\r\nimport { NgxSpinnerModule } from 'ngx-spinner';\r\nimport { HTTP_INTERCEPTORS } from '@angular/common/http';\r\nimport { TokenInterceptor } from './core/token.interceptor';\r\nimport { HashLocationStrategy, LocationStrategy } from '@angular/common';\r\nimport { AppRoutingModule } from './app-routing.module';\r\nimport { AppComponent } from './app.component';\r\nimport { AccountModule } from './account/account.module';\r\nimport { GlobalModule } from './global/global.module';\r\nimport { ConservationInfoModule } from './conservation-info/conservation-info.module';\r\nimport { HomeModule } from './home/home.module';\r\nimport { PersonalListModule } from './personal-list/personal-list.module';\r\nimport { PublicInteractionModule } from './public-interaction/public-interaction.module';\r\nimport { SharedModule } from './shared/shared.module';\r\nimport { AuthenticationModule } from './authentication/authentication.module';\r\nimport { exportTranslateStaticLoader } from './global/translator/translate-static-loader';\r\nimport { TokenResolver } from './resolver/ArcGIS-token.resolver';\r\nimport { UrlSerializer } from '@angular/router';\r\nimport { DefaultUrlSerializer, UrlTree } from '@angular/router';\r\n \r\n\r\n\r\nexport class LowerCaseUrlSerializer extends DefaultUrlSerializer {\r\n parse(url: string): UrlTree {\r\n // Optional Step: Do some stuff with the url if needed.\r\n\r\n // If you lower it in the optional step\r\n // you don't need to use \"toLowerCase\"\r\n // when you pass it down to the next function\r\n return super.parse(url.split('?')[0].toLowerCase() + (url.split('?')[1] === undefined ? '' : ('?' + url.split('?')[1])));\r\n }\r\n}\r\n\r\n\r\n@NgModule({\r\n declarations: [\r\n AppComponent\r\n ],\r\n imports: [\r\n BrowserModule.withServerTransition({ appId: 'ead-web-portal' }), // <-- here\r\n HttpClientModule,\r\n BrowserTransferStateModule,\r\n NgxSpinnerModule,\r\n TranslateModule.forChild({\r\n loader: {\r\n provide: TranslateLoader,\r\n useFactory: exportTranslateStaticLoader,\r\n deps: [HttpClient, TransferState]\r\n }\r\n }\r\n ),\r\n AppRoutingModule,\r\n AccountModule,\r\n AuthenticationModule,\r\n ConservationInfoModule,\r\n GlobalModule,\r\n HomeModule,\r\n PersonalListModule,\r\n PublicInteractionModule,\r\n SharedModule,\r\n ],\r\n providers: [\r\n { provide: LocationStrategy, useClass: HashLocationStrategy },\r\n {\r\n provide: HTTP_INTERCEPTORS,\r\n useClass: TokenInterceptor,\r\n multi: true\r\n },\r\n {\r\n provide: UrlSerializer,\r\n useClass: LowerCaseUrlSerializer\r\n },\r\n TokenResolver\r\n ],\r\n bootstrap: [AppComponent]\r\n})\r\nexport class AppModule {\r\n}\r\n\r\nexport function HttpLoaderFactory(http: HttpClient) {\r\n return new TranslateHttpLoader(http, './assets/i18n/');\r\n}\r\n","import { Injectable } from '@angular/core';\r\nimport { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';\r\nimport { AuthenticationService } from './authentication.service';\r\nimport { HeaderService } from '../shared/header/header.service';\r\ndeclare const $: any;\r\n\r\n@Injectable()\r\nexport class AuthGuard implements CanActivate {\r\n constructor(\r\n private authenticationService: AuthenticationService,\r\n private headerService: HeaderService,\r\n private router: Router\r\n ) {}\r\n\r\n canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {\r\n const url: string = state.url;\r\n return this.checkLogin(url);\r\n }\r\n\r\n checkLogin(url: string): boolean {\r\n let isLoggedIn = false;\r\n this.authenticationService.getLoginStatus()\r\n .subscribe(loginStatus => {\r\n isLoggedIn = loginStatus;\r\n });\r\n if (isLoggedIn) { return true; }\r\n\r\n // Store the attempted URL for redirecting\r\n this.authenticationService.redirectUrl = url;\r\n this.authenticationService.currentUrl = this.router.url;\r\n // Navigate to the login page with extras\r\n this.headerService.showLoginPrompt();\r\n return false;\r\n }\r\n}\r\n","import {NgModule} from '@angular/core';\r\nimport {RouterModule} from '@angular/router';\r\n\r\nimport {LoginComponent} from './login/login.component';\r\nimport {RegistrationComponent} from './registration/registration.component';\r\nimport {ForgotPasswordComponent} from './forgot-password/forgot-password.component';\r\nimport { ForgotConfirmComponent } from './forgot-confirm/forgot-confirm.component';\r\nimport { RegisterConfirmComponent } from './register-confirm/register-confirm.component';\r\nimport { RecaptchaModule } from 'ng-recaptcha';\r\n\r\n@NgModule({\r\n imports: [\r\n RouterModule.forChild([\r\n {path: 'sign-in', component: LoginComponent},\r\n {path: 'sign-up', component: RegistrationComponent},\r\n {path: 'forgot-password', component: ForgotPasswordComponent},\r\n {path: 'forgot-password-confirm', component: ForgotConfirmComponent},\r\n {path: 'sign-up-confirm', component: RegisterConfirmComponent},\r\n ]),\r\n RecaptchaModule\r\n ],\r\n exports: [RouterModule]\r\n})\r\n\r\nexport class AuthenticationRoutingModule {\r\n}\r\n","module.exports = \"\"","import {Component, OnInit} from '@angular/core';\r\n\r\n@Component({\r\n selector: 'app-authentication',\r\n templateUrl: './authentication.component.html'\r\n})\r\nexport class AuthenticationComponent implements OnInit {\r\n\r\n constructor() {\r\n }\r\n\r\n ngOnInit() {\r\n }\r\n\r\n}\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { ReactiveFormsModule } from '@angular/forms';\r\nimport { HttpClient } from '@angular/common/http';\r\nimport { TranslateModule, TranslateLoader } from '@ngx-translate/core';\r\nimport { TranslateHttpLoader } from '@ngx-translate/http-loader';\r\nimport { NgxSpinnerModule } from 'ngx-spinner';\r\n\r\nimport { AuthenticationRoutingModule } from './authentication-routing.module';\r\n\r\nimport { AuthenticationComponent } from './authentication.component';\r\nimport { LoginComponent } from './login/login.component';\r\nimport { RegistrationComponent } from './registration/registration.component';\r\nimport { ForgotPasswordComponent } from './forgot-password/forgot-password.component';\r\nimport { LogoutComponent } from './logout/logout.component';\r\nimport { AuthenticationService } from './authentication.service';\r\nimport { RegisterConfirmComponent } from './register-confirm/register-confirm.component';\r\nimport { ForgotConfirmComponent } from './forgot-confirm/forgot-confirm.component';\r\nimport { CoreModule } from '../core/core.module';\r\nimport { AuthGuard } from './auth-guard.service';\r\n\r\n\r\n@NgModule({\r\n imports: [\r\n CommonModule,\r\n ReactiveFormsModule,\r\n TranslateModule.forRoot({\r\n loader: {\r\n provide: TranslateLoader,\r\n useFactory: HttpLoaderFactory,\r\n deps: [HttpClient]\r\n }\r\n }),\r\n NgxSpinnerModule,\r\n AuthenticationRoutingModule,\r\n CoreModule\r\n ],\r\n declarations: [\r\n AuthenticationComponent,\r\n LoginComponent,\r\n RegistrationComponent,\r\n ForgotPasswordComponent,\r\n LogoutComponent,\r\n RegisterConfirmComponent,\r\n ForgotConfirmComponent\r\n ],\r\n exports: [\r\n LogoutComponent\r\n ],\r\n providers: [\r\n AuthenticationService,\r\n AuthGuard,\r\n ]\r\n})\r\nexport class AuthenticationModule {}\r\n\r\nexport function HttpLoaderFactory(http: HttpClient) {\r\n return new TranslateHttpLoader(http);\r\n}\r\n","import {Injectable} from '@angular/core';\r\nimport { BehaviorSubject } from 'rxjs';\r\nimport { BaseService } from '../core/base.service';\r\nimport { TranslateService } from '@ngx-translate/core';\r\nimport { Router } from '@angular/router';\r\nimport { AuthConstants } from '../core/constant';\r\nimport { StorageService } from '../core/storage.service';\r\n\r\n@Injectable()\r\nexport class AuthenticationService {\r\n public isUserLoggedIn = new BehaviorSubject
(false);\r\n redirectUrl = '';\r\n currentUrl = '';\r\n constructor(\r\n public http: BaseService,\r\n public translate: TranslateService,\r\n private router: Router,\r\n private storageService: StorageService\r\n ) {}\r\n\r\n loginUser(credentials: any) {\r\n const body = {\r\n 'emailId': credentials.userName,\r\n 'password': credentials.password\r\n };\r\n return this.http.post(AuthConstants.LOGIN, body);\r\n }\r\n\r\n registerUser(user: any) {\r\n let profession = '';\r\n if (user.profession === 'Other') {\r\n profession = user.otherProfession;\r\n } else {\r\n profession = user.profession;\r\n }\r\n const body = {\r\n 'fullName': user.name,\r\n 'displayName': user.displayName,\r\n 'emailId': user.email,\r\n 'password': user.passwords.password,\r\n 'mobileNumber': user.contact,\r\n 'profession': profession\r\n };\r\n return this.http.post(AuthConstants.REGISTER, body);\r\n }\r\n\r\n resetUserPassword(email) {\r\n const body = {\r\n 'emailId': email\r\n };\r\n return this.http.post(AuthConstants.RESET_PASSWORD, body);\r\n }\r\n\r\n resendRegisterLink(email) {\r\n const body = {\r\n 'emailId': email\r\n };\r\n return this.http.post(AuthConstants.RESEND_LINK, body);\r\n }\r\n\r\n logout(checker) {\r\n this.storageService.removeValue('AccessToken');\r\n this.storageService.removeValue('UserName');\r\n this.setLoginStatus(false);\r\n console.log(this.isUserLoggedIn);\r\n if (checker) {\r\n this.router.navigate(['']);\r\n }\r\n }\r\n\r\n setLoginStatus(value) {\r\n this.isUserLoggedIn.next(value);\r\n \r\n }\r\n\r\n getLoginStatus(): BehaviorSubject {\r\n return this.isUserLoggedIn;\r\n }\r\n}\r\n","module.exports = \"\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n \\r\\n
\\r\\n
\\r\\n
\\r\\n
{{'Authentication.PasswordResetLinkMessage' | translate }} \\r\\n
{{'Authentication.PasswordResetLinkMessageExtended' | translate }}
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
{{'Authentication.ForgotYourPassword' | translate }} \\r\\n
{{'Authentication.ForgotPasswordMessage' | translate }}
\\r\\n
\\r\\n\\r\\n \\r\\n
\\r\\n
\\r\\n
\\r\\n\\r\\n\"","module.exports = \".remberme {\\n width: auto;\\n min-height: auto;\\n display: inline-block; }\\n\\n.sign-page {\\n min-height: 100vh;\\n background-repeat: no-repeat;\\n background-size: cover;\\n background-position: center; }\\n\\n.sign-page-form {\\n margin: auto;\\n padding: 40px; }\\n\\n.signin-img {\\n background-image: url('forget.jpg'); }\\n\\n.logo1 {\\n width: 300px; }\\n\\n.title {\\n font-family: \\\"Omnes\\\", sans-serif;\\n font-size: 26px;\\n font-weight: 800;\\n text-transform: uppercase;\\n color: white;\\n text-align: center;\\n margin: 20px 0 30px 0px; }\\n\\n.discription {\\n color: white;\\n font-size: 16px;\\n font-weight: 600;\\n text-align: center;\\n width: 360px;\\n margin: auto;\\n margin: 50px auto; }\\n\\n.form-row {\\n margin: 25px 0 0 0px;\\n display: flex;\\n justify-content: center;\\n align-items: center; }\\n\\n.m50 {\\n margin: 50px auto !important; }\\n\\n.alert {\\n padding: 0.5rem 1rem;\\n margin-bottom: 1rem;\\n border: 1px solid transparent;\\n border-radius: 0.25rem;\\n margin-top: 0.5rem;\\n position: absolute;\\n width: 98%; }\\n\\n.form-row .value {\\n width: 100%;\\n background: #e8f1fda6;\\n border: none;\\n outline: none;\\n padding: 10px 10px;\\n border-radius: 15px;\\n position: relative; }\\n\\n.input-group {\\n position: relative !important;\\n display: flex;\\n flex-wrap: wrap !important;\\n align-items: stretch !important;\\n width: 100% !important; }\\n\\n.input-group input:focus-visible {\\n outline: none; }\\n\\n.form-row .value .input--style-5 {\\n background: #b4d5ff00;\\n border: none;\\n width: 100%; }\\n\\n.form-row .name {\\n font-size: 22px !important;\\n font-weight: bolder !important;\\n color: white; }\\n\\n.fgt-password {\\n font-size: 18px;\\n color: white;\\n font-weight: 600; }\\n\\n.signBtn {\\n background: #ffffffe8;\\n color: #2563AF;\\n font-size: 26px;\\n font-weight: 600;\\n border: none;\\n border-radius: 18px;\\n padding: 10px;\\n text-transform: uppercase; }\\n\\n.white-text {\\n color: white !important;\\n font-size: 16px;\\n font-weight: 600; }\\n\\n/* The container */\\n\\n.radio-div {\\n display: block;\\n position: relative;\\n padding-left: 40px;\\n cursor: pointer;\\n font-size: 18px;\\n -webkit-user-select: none;\\n -moz-user-select: none;\\n -ms-user-select: none;\\n user-select: none;\\n user-select: none;\\n color: white;\\n font-weight: 600;\\n line-height: 30px; }\\n\\n/* Hide the browser's default checkbox */\\n\\n.radio-div input {\\n position: absolute;\\n opacity: 0;\\n cursor: pointer;\\n height: 0;\\n width: 0; }\\n\\n/* Create a custom checkbox */\\n\\n.checkmark {\\n position: absolute;\\n top: 0;\\n left: 0;\\n height: 30px;\\n width: 30px;\\n background: #e8f1fda6;\\n border: none;\\n border-radius: 4px; }\\n\\n/* On mouse-over, add a grey background color */\\n\\n.radio-div:hover input ~ .checkmark {\\n background: #e8f1fda6; }\\n\\n/* When the checkbox is checked, add a blue background */\\n\\n.radio-div input:checked ~ .checkmark {\\n background-color: #2196F3; }\\n\\n/* Create the checkmark/indicator (hidden when not checked) */\\n\\n.checkmark:after {\\n content: \\\"\\\";\\n position: absolute;\\n display: none; }\\n\\n/* Show the checkmark when checked */\\n\\n.radio-div input:checked ~ .checkmark:after {\\n display: block; }\\n\\n/* Style the checkmark/indicator */\\n\\n.radio-div .checkmark:after {\\n left: 12px;\\n top: 6px;\\n width: 6px;\\n height: 16px;\\n border: solid white;\\n border-width: 0 3px 3px 0;\\n -webkit-transform: rotate(45deg);\\n transform: rotate(45deg); }\\n\\n@media (max-width: 600px) {\\n .discription {\\n width: 100%; } }\\n\"","import { Component, OnInit } from '@angular/core';\r\nimport {FormControl, FormGroup, FormBuilder, Validators} from '@angular/forms';\r\nimport {DefaultValidator} from '../../shared/Validator/default.validator';\r\nimport { AuthenticationService } from '../authentication.service';\r\nimport { Router } from '@angular/router';\r\nimport { NgxSpinnerService } from 'ngx-spinner';\r\nimport { ErrorService } from '../../shared/error-response/error.service';\r\n\r\n@Component({\r\n selector: 'app-forgot-password',\r\n templateUrl: './forgot-password.component.html',\r\n styleUrls: ['./forgot-password.component.scss']\r\n})\r\nexport class ForgotPasswordComponent implements OnInit {\r\n errorMessage: string;\r\n forgotPasswordForm = new FormGroup({\r\n email: new FormControl(),\r\n });\r\n\r\n constructor(\r\n private fb: FormBuilder,\r\n private authenticationService: AuthenticationService,\r\n private router: Router,\r\n private spinner: NgxSpinnerService,\r\n private errorService: ErrorService\r\n ) {\r\n this.createForm();\r\n }\r\n\r\n createForm() {\r\n this.forgotPasswordForm = this.fb.group({\r\n email: ['', DefaultValidator.MANDATORY_FIELD],\r\n });\r\n }\r\n\r\n ngOnInit() {\r\n }\r\n\r\n goToResetPassword() {\r\n this.spinner.show();\r\n this.authenticationService.resetUserPassword(this.forgotPasswordForm.value.email)\r\n .subscribe( response => {\r\n this.spinner.hide();\r\n if (response.result) {\r\n this.errorMessage = '';\r\n this.router.navigate(['/forgot-password-confirm']);\r\n }\r\n }, error => {\r\n this.errorMessage = this.errorService.checkError(error);\r\n this.spinner.hide();\r\n });\r\n }\r\n\r\n}\r\n","module.exports = \"
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
{{'Authentication.SignIn' | translate }} \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n\"","module.exports = \".remberme {\\n width: auto;\\n min-height: auto;\\n display: inline-block; }\\n\\n.sign-page {\\n min-height: 100vh;\\n background-repeat: no-repeat;\\n background-size: cover;\\n background-position: center; }\\n\\n.sign-page-form {\\n margin: auto;\\n padding: 40px; }\\n\\n.signin-img {\\n background-image: url('login01.png'); }\\n\\n.logo1 {\\n width: 300px; }\\n\\n.title {\\n font-family: \\\"Omnes\\\", sans-serif;\\n font-size: 26px;\\n font-weight: 800;\\n text-transform: uppercase;\\n color: white;\\n text-align: center;\\n margin: 20px 0 40px 0px; }\\n\\n.form-row {\\n margin: 25px 0 0 0px !important;\\n display: flex;\\n justify-content: center;\\n align-items: center; }\\n\\n.form-row .value {\\n width: 100%;\\n background: #e8f1fda6;\\n border: none;\\n outline: none;\\n padding: 10px 10px;\\n border-radius: 15px;\\n position: relative; }\\n\\n.input-group {\\n position: relative !important;\\n display: flex;\\n flex-wrap: wrap !important;\\n align-items: stretch !important;\\n width: 100% !important; }\\n\\n.input-group input:focus-visible {\\n outline: none; }\\n\\n.form-row .value .input--style-5 {\\n background: #b4d5ff00;\\n border: none;\\n width: 100%; }\\n\\n.form-row .name {\\n font-size: 22px !important;\\n font-weight: bolder !important;\\n color: white; }\\n\\n.fgt-password {\\n font-size: 18px;\\n color: white;\\n font-weight: 600; }\\n\\n.signBtn {\\n background: #ffffffe8;\\n color: #2563AF;\\n font-size: 26px;\\n font-weight: 600;\\n border: none;\\n border-radius: 18px;\\n padding: 10px;\\n text-transform: uppercase; }\\n\\n.white-text {\\n color: white !important;\\n font-size: 16px;\\n font-weight: 600; }\\n\\n/* The container */\\n\\n.radio-div {\\n display: block;\\n position: relative;\\n padding-left: 40px;\\n cursor: pointer;\\n font-size: 18px;\\n -webkit-user-select: none;\\n -moz-user-select: none;\\n -ms-user-select: none;\\n user-select: none;\\n user-select: none;\\n color: white;\\n font-weight: 600;\\n line-height: 30px; }\\n\\n/* Hide the browser's default checkbox */\\n\\n.radio-div input {\\n position: absolute;\\n opacity: 0;\\n cursor: pointer;\\n height: 0;\\n width: 0; }\\n\\n/* Create a custom checkbox */\\n\\n.checkmark {\\n position: absolute;\\n top: 0;\\n left: 0;\\n height: 30px;\\n width: 30px;\\n background: #e8f1fda6;\\n border: none;\\n border-radius: 4px; }\\n\\n/* On mouse-over, add a grey background color */\\n\\n.radio-div:hover input ~ .checkmark {\\n background: #e8f1fda6; }\\n\\n/* When the checkbox is checked, add a blue background */\\n\\n.radio-div input:checked ~ .checkmark {\\n background-color: #2196F3; }\\n\\n/* Create the checkmark/indicator (hidden when not checked) */\\n\\n.checkmark:after {\\n content: \\\"\\\";\\n position: absolute;\\n display: none; }\\n\\n/* Show the checkmark when checked */\\n\\n.radio-div input:checked ~ .checkmark:after {\\n display: block; }\\n\\n/* Style the checkmark/indicator */\\n\\n.radio-div .checkmark:after {\\n left: 12px;\\n top: 6px;\\n width: 6px;\\n height: 16px;\\n border: solid white;\\n border-width: 0 3px 3px 0;\\n -webkit-transform: rotate(45deg);\\n transform: rotate(45deg); }\\n\"","import {Component, OnInit, Inject, PLATFORM_ID} from '@angular/core';\r\nimport {FormControl, FormGroup, FormBuilder} from '@angular/forms';\r\nimport {Router} from '@angular/router';\r\nimport {NgxSpinnerService} from 'ngx-spinner';\r\nimport * as Crypto from 'crypto-js';\r\n\r\nimport {AuthenticationService} from '../authentication.service';\r\nimport {StorageService} from '../../core/storage.service';\r\nimport {ErrorService} from '../../shared/error-response/error.service';\r\nimport {PassKeyConstants} from '../../core/constant';\r\nimport {isPlatformBrowser} from '@angular/common';\r\n\r\n@Component({\r\n selector: 'app-login',\r\n templateUrl: './login.component.html',\r\n styleUrls: ['./login.component.scss']\r\n})\r\nexport class LoginComponent implements OnInit {\r\n errorMessage: string;\r\n isRememberMe: boolean;\r\n signInForm = new FormGroup({\r\n userName: new FormControl(),\r\n password: new FormControl()\r\n });\r\n isBrowser: boolean;\r\n\r\n constructor(\r\n private fb: FormBuilder,\r\n private router: Router,\r\n private authenticationService: AuthenticationService,\r\n private storageService: StorageService,\r\n private spinner: NgxSpinnerService,\r\n private errorService: ErrorService,\r\n @Inject(PLATFORM_ID) platformId: string\r\n ) {\r\n this.isBrowser = isPlatformBrowser(platformId);\r\n this.errorMessage = '';\r\n this.isRememberMe = false;\r\n }\r\n\r\n createForm(userName, password) {\r\n this.signInForm = this.fb.group({\r\n userName: [userName, {updateOn: 'blur'}],\r\n password: [password],\r\n });\r\n }\r\n\r\n ngOnInit() {\r\n if (this.isBrowser) {\r\n this.checkRememberMe();\r\n }\r\n }\r\n\r\n goToLogin() {\r\n this.spinner.show();\r\n this.authenticationService.loginUser(this.signInForm.value)\r\n .subscribe(response => {\r\n this.saveCredentials();\r\n this.storageService.setValue('AccessToken', response.result.token);\r\n this.storageService.setValue('UserName', response.result.displayName);\r\n this.authenticationService.setLoginStatus(true);\r\n if (this.authenticationService.redirectUrl) {\r\n this.router.navigateByUrl(this.authenticationService.redirectUrl);\r\n } else {\r\n this.router.navigate(['']);\r\n }\r\n this.spinner.hide();\r\n }, error => {\r\n this.spinner.hide();\r\n this.errorMessage = this.errorService.checkError(error);\r\n this.signInForm.controls['password'].reset();\r\n });\r\n }\r\n\r\n rememberMe(status) {\r\n this.isRememberMe = status;\r\n }\r\n\r\n saveCredentials() {\r\n \r\n if (this.isBrowser) {\r\n if (this.signInForm.value.userName !== '' && this.signInForm.value.password !== '' && this.isRememberMe) {\r\n const user = Crypto.AES.encrypt(this.signInForm.value.userName.trim(), PassKeyConstants.PASS_KEY.trim()).toString();\r\n const key = Crypto.AES.encrypt(this.signInForm.value.password.trim(), PassKeyConstants.PASS_KEY.trim()).toString();\r\n this.setCredentials(user, key);\r\n } else if (!this.isRememberMe) {\r\n if (this.storageService.getLocalStorageValue('UserName') !== '' && this.storageService.getLocalStorageValue('Password') !== '') {\r\n this.setCredentials('', '');\r\n }\r\n }\r\n this.signInForm.reset();\r\n }\r\n }\r\n\r\n checkRememberMe() {\r\n if (this.storageService.getLocalStorageValue('UserName') !== '' && this.storageService.getLocalStorageValue('Password') !== '') {\r\n this.isRememberMe = true;\r\n // tslint:disable-next-line:max-line-length\r\n const userName = Crypto.AES.decrypt(this.storageService.getLocalStorageValue('UserName').trim(), PassKeyConstants.PASS_KEY.trim()).toString(Crypto.enc.Utf8);\r\n // tslint:disable-next-line:max-line-length\r\n const password = Crypto.AES.decrypt(this.storageService.getLocalStorageValue('Password').trim(), PassKeyConstants.PASS_KEY.trim()).toString(Crypto.enc.Utf8);\r\n this.createForm(userName, password);\r\n } else {\r\n this.isRememberMe = false;\r\n this.createForm('', '');\r\n }\r\n }\r\n\r\n setCredentials(user, key) {\r\n this.storageService.setLocalStorageValue('UserName', user);\r\n this.storageService.setLocalStorageValue('Password', key);\r\n }\r\n\r\n}\r\n","module.exports = \"\\r\\n
\\r\\n
\\r\\n \\r\\n\\r\\n\\r\\n \\r\\n\\r\\n \\r\\n
\\r\\n \\r\\n
\\r\\n
{{'Authentication.LogoutBodyAlert' | translate }}
\\r\\n
\\r\\n {{'Authentication.LogoutNo' | translate }} \\r\\n {{'Authentication.LogoutYes' | translate }} \\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n\"","module.exports = \".close {\\n position: absolute;\\n right: 0;\\n color: white;\\n top: 0;\\n padding: 10px; }\\n\\n.logout-modal .logout-header {\\n background-color: #0066a2; }\\n\\n.logout-modal .logout-body {\\n text-align: center;\\n margin: 0px;\\n background-image: url('profile_popup_banner.jpg'); }\\n\\n.logout-modal {\\n margin-top: 0%; }\\n\\n.modal-header {\\n padding: 8px; }\\n\\n.modal-body {\\n padding: 30px !important; }\\n\\n.logout-buttons {\\n justify-content: space-around;\\n margin: 0px; }\\n\\n@media (max-width: 700px) {\\n .logout-buttons {\\n margin: 10px; } }\\n\"","import { Component, OnInit } from '@angular/core';\r\nimport { Router } from '@angular/router';\r\nimport { AuthenticationService } from '../authentication.service';\r\nimport { StorageService } from '../../core/storage.service';\r\n\r\n@Component({\r\n selector: 'app-logout',\r\n templateUrl: './logout.component.html',\r\n styleUrls: ['./logout.component.scss']\r\n})\r\nexport class LogoutComponent implements OnInit {\r\n user: any;\r\n constructor(\r\n private router: Router,\r\n private authenticationService: AuthenticationService,\r\n private storageService: StorageService\r\n ) { }\r\n\r\n ngOnInit() {\r\n }\r\n\r\n logout() {\r\n this.authenticationService.logout(true);\r\n }\r\n}\r\n","module.exports = \"
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
{{'Authentication.ThankYou' | translate }} {{'Authentication.JustOneMoreStep' | translate }} \\r\\n
{{'Shared.Hi' | translate }} {{ (userName? userName: '') }}, {{'Authentication.VerificationLinkMessage' | translate }}
\\r\\n
{{'Authentication.LinkQuestion' | translate }} {{'Authentication.Resend' | translate }}
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n \"","module.exports = \"\"","import { Component, OnInit, OnDestroy } from '@angular/core';\r\nimport { AuthenticationService } from '../authentication.service';\r\nimport { Router } from '@angular/router';\r\nimport { StorageService } from '../../core/storage.service';\r\nimport { NgxSpinnerService } from 'ngx-spinner';\r\nimport { ErrorService } from '../../shared/error-response/error.service';\r\n\r\n@Component({\r\n selector: 'app-register-confirm',\r\n templateUrl: './register-confirm.component.html',\r\n styleUrls: ['./register-confirm.component.scss']\r\n})\r\nexport class RegisterConfirmComponent implements OnInit, OnDestroy {\r\n userName: string;\r\n userEmail: string;\r\n constructor(\r\n private storageService: StorageService,\r\n private spinner: NgxSpinnerService,\r\n private router: Router,\r\n private authenticationService: AuthenticationService,\r\n private errorService: ErrorService\r\n ) {\r\n this.userName = '';\r\n this.userEmail = '';\r\n }\r\n\r\n ngOnInit() {\r\n if (this.storageService.getValue('UserName') && this.storageService.getValue('UserEmail')) {\r\n this.userName = this.storageService.getValue('UserName');\r\n this.userEmail = this.storageService.getValue('UserEmail');\r\n } else {\r\n this.router.navigate(['']);\r\n }\r\n }\r\n\r\n resendLink() {\r\n this.spinner.show();\r\n this.authenticationService.resendRegisterLink(this.userEmail)\r\n .subscribe(response => {\r\n this.spinner.hide();\r\n }, error => {\r\n this.spinner.hide();\r\n this.errorService.checkError(error);\r\n });\r\n }\r\n ngOnDestroy() {\r\n this.storageService.removeValue('UserName');\r\n this.storageService.removeValue('UserEmail');\r\n }\r\n\r\n}\r\n","module.exports = \"
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
{{'Authentication.SignUp' | translate }} \\r\\n\\r\\n
\\r\\n
\\r\\n\\r\\n\\r\\n
\\r\\n\\r\\n
\\r\\n
{{'Authentication.Email' | translate }} ({{'Authentication.UserName' | translate\\r\\n }}) *
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n \\r\\n {{'Validation.EmailRequired' | translate }}\\r\\n
\\r\\n \\r\\n {{'Validation.InvalidEmail' | translate }}\\r\\n
\\r\\n \\r\\n\\r\\n
\\r\\n
\\r\\n\\r\\n\\r\\n
\\r\\n\\r\\n
\\r\\n
{{'Authentication.Password' | translate }} *
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n
\\r\\n \\r\\n {{'Validation.PasswordRequired' | translate }}\\r\\n
\\r\\n \\r\\n {{'Validation.NewPasswordCharacters' | translate }}\\r\\n \\r\\n
\\r\\n
\\r\\n
![](\\\"assets/images/icons/close.png\\\"){kind=icon}
\\r\\n {{ errorMessage }}\\r\\n ![](\\\"assets/images/information.svg\\\")
\\r\\n ![](\\\"assets/images/tick.png\\\")
\\r\\n ![](\\\"assets/images/drag1.png\\\")
\\r\\n ![](\\\"assets/images/nodatafound.png\\\")
\\r\\n ![](\\\"assets/images/icons/socialicon.svg\\\"){kind=icon}
\\r\\n ![](\\\"assets/images/leftArrow.png\\\")
\\r\\n ![](\\\"assets/images/rightArrow.png\\\")
\\r\\n ![](\\\"assets/images/noimagebanner.png\\\"\\r\\n)
\\r\\n ![](\\\"assets/images/logo.png\\\"){kind=logo}
\\r\\n \\r\\n ![](\\\"assets/images/forgot-confirm.png\\\")
\\r\\n ![](\\\"assets/images/logo1.png\\\"){kind=logo}
\\r\\n ![](\\\"assets/images/signup-confirm.png\\\"/)
\\r\\n ![\\\"\\\"](\\\"assets/images/icons/CIaquatic.png\\\"){kind=icon}
\\r\\n ![\\\"\\\"](\\\"assets/images/icons/CIterrestrial.png\\\"){kind=icon}
\\r\\n \\r\\n ![](\\\"assets/images/icons/searchclose.png\\\"){kind=icon}
\\r\\n ![](\\\"assets/images/placeholderSmall.png\\\")
\\r\\n ![](\\\"assets/images/icons/add.png\\\"){kind=icon}
{{ 'SpeciesList.AddEditOptions' | translate }}\\r\\n ![\\\"\\\"](\\\"assets/img/mg/03.jpg\\\")
\\r\\n ![\\\"\\\"](\\\"assets/img/mg/3/03-01.png\\\")
\\r\\n \\r\\n \\r\\n ![\\\"\\\"](\\\"assets/img/mg/3/03-02.png\\\")
\\r\\n \\r\\n \\r\\n \\r\\n \\r\\n ![\\\"\\\"](\\\"assets/img/mg/3/03-09.png\\\")
\\r\\n \\r\\n \\r\\n \\r\\n \\r\\n ![\\\"\\\"](\\\"assets/img/mg/3/03-08.png\\\")
\\r\\n \\r\\n \\r\\n \\r\\n \\r\\n \\r\\n ![\\\"\\\"](\\\"assets/img/mg/3/03-07.png\\\")
\\r\\n \\r\\n \\r\\n \\r\\n \\r\\n \\r\\n ![\\\"\\\"](\\\"assets/img/mg/3/03-03.png\\\")
\\r\\n \\r\\n \\r\\n \\r\\n \\r\\n ![\\\"\\\"](\\\"assets/img/mg/3/03-04.png\\\")
\\r\\n \\r\\n \\r\\n \\r\\n \\r\\n ![\\\"\\\"](\\\"assets/img/mg/3/03-05.png\\\")
\\r\\n \\r\\n \\r\\n \\r\\n \\r\\n ![\\\"\\\"](\\\"assets/img/mg/3/03-06.png\\\")
\\r\\n \\r\\n \\r\\n ![\\\"\\\"](\\\"assets/img/mg/02.jpg\\\")
\\r\\n ![\\\"\\\"](\\\"assets/img/mg/2/02-01.png\\\")
\\r\\n \\r\\n\\r\\n \\r\\n \\r\\n ![\\\"\\\"](\\\"assets/img/mg/2/02-02.png\\\")
\\r\\n \\r\\n \\r\\n \\r\\n \\r\\n ![\\\"\\\"](\\\"assets/img/mg/2/02-03.png\\\")
\\r\\n \\r\\n\\r\\n \\r\\n \\r\\n \\r\\n ![\\\"\\\"](\\\"assets/img/mg/2/02-04.png\\\")
\\r\\n \\r\\n\\r\\n \\r\\n \\r\\n \\r\\n ![\\\"\\\"](\\\"assets/img/mg/2/02-05.png\\\")
\\r\\n \\r\\n\\r\\n \\r\\n \\r\\n \\r\\n ![\\\"\\\"](\\\"assets/img/mg/2/02-06.png\\\")
\\r\\n \\r\\n\\r\\n \\r\\n \\r\\n \\r\\n ![\\\"\\\"](\\\"assets/img/mg/2/02-07.png\\\")
\\r\\n \\r\\n\\r\\n \\r\\n \\r\\n \\r\\n ![\\\"\\\"](\\\"assets/img/mg/2/02-08.png\\\")
\\r\\n \\r\\n\\r\\n \\r\\n \\r\\n \\r\\n ![\\\"\\\"](\\\"assets/img/mg/2/02-09.png\\\")
\\r\\n \\r\\n\\r\\n \\r\\n \\r\\n \\r\\n ![\\\"\\\"](\\\"assets/img/mg/2/02-10.png\\\")
\\r\\n \\r\\n\\r\\n \\r\\n \\r\\n \\r\\n ![\\\"\\\"](\\\"assets/img/mg/2/02-11.png\\\")
\\r\\n \\r\\n\\r\\n \\r\\n \\r\\n \\r\\n ![\\\"\\\"](\\\"assets/img/mg/2/02-12.png\\\")
\\r\\n \\r\\n\\r\\n \\r\\n ![\\\"\\\"](\\\"assets/img/mg/01.jpg\\\")
\\r\\n ![\\\"\\\"](\\\"assets/img/mg/1/01-01.png\\\")
\\r\\n \\r\\n \\r\\n ![\\\"\\\"](\\\"assets/img/mg/1/01-02.png\\\")
\\r\\n \\r\\n \\r\\n \\r\\n \\r\\n \\r\\n ![\\\"\\\"](\\\"assets/img/mg/1/01-03.png\\\")
\\r\\n \\r\\n \\r\\n \\r\\n \\r\\n ![\\\"\\\"](\\\"assets/img/mg/1/01-04.png\\\")
\\r\\n \\r\\n\\r\\n \\r\\n \\r\\n \\r\\n ![\\\"\\\"](\\\"assets/img/mg/1/01-05.png\\\")
\\r\\n \\r\\n\\r\\n \\r\\n \\r\\n \\r\\n ![\\\"\\\"](\\\"assets/img/mg/1/01-06.png\\\")
\\r\\n \\r\\n\\r\\n \\r\\n \\r\\n \\r\\n ![\\\"\\\"](\\\"assets/img/mg/1/01-07.png\\\")
\\r\\n \\r\\n\\r\\n \\r\\n \\r\\n \\r\\n ![\\\"\\\"](\\\"assets/img/mg/1/01-08.png\\\")
\\r\\n \\r\\n\\r\\n \\r\\n ![](\\\"assets/images/speaker.svg\\\")
\\r\\n ![](\\\"assets/images/icons/like.svg\\\"){kind=icon}
\\r\\n ![](\\\"assets/images/icons/fav.svg\\\"){kind=icon}
\\r\\n ![](\\\"assets/images/icons/list.svg\\\"){kind=icon}
\\r\\n {{'SpeciesDetail.TakeNote' | translate }} \\r\\n {{'SpeciesDetail.MyNote' | translate }} \\r\\n ![\\\"\\\"](\\\"assets/images/placeholder.png\\\")
\\r\\n ![](\\\"assets/images/icons/delete.png\\\"){kind=icon}
\\r\\n ![](\\\"assets/images/icons/checkmark.png\\\"){kind=icon}
\\r\\n ![](\\\"assets/images/icons/trash.png\\\"){kind=icon}
\\r\\n ![](\\\"assets/images/wrong.png\\\")
\\r\\n ![](\\\"assets/images/google.png\\\")
\\r\\n ![](\\\"assets/images/apple.png\\\")
\\r\\n