*,
body {
    margin: 0;
    padding: 0;
}

/* header  */
.header {
    padding: 5px 10px;
    background-color: #1cabe2;
    display: flex;
    align-items: center;
    height: 16vh;
    box-shadow: 0px 4px 10px #000;
}

.header .headerBox {
    display: flex;
    justify-content: space-between;
    width: 100%;
    text-shadow: 1px 1px 3px #000;
}

.header .titleBox h1 {
    font-size: 6vh;
    color: #fff;
    margin: 0;
    margin-bottom: 1vh;
    font-weight: 600;
}

.header .titleBox h3 {
    font-size: 3vh;
    color: #fff;
    margin: 0;
    /* font-weight: 600; */
}

.header .titleBox p {
    color: #fff;
    margin: 0;
    text-transform: uppercase;
    /* font-weight: 600; */

}

.header .menuBox {
    display: flex;
    align-items: center;
    justify-content: right;
}



.header .menuBox .menuLink a {
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    width: 13vh;
    min-width: 120px;
    padding: 2px 10px;
    text-align: center;
    display: block;
    margin: 0;
    font-size: 2vh;
}

.header .menuBox .menuLink a:after {
    content: "";
    height: 2px;
    width: 0;
    background-color: #fff;
    display: block;
    position: relative;
    margin: auto;
    box-shadow: 0px 0px 3px #000;
}

/* .header .menuBox .menuLink a:hover {
    color: #1a3d48;
    text-shadow: none;
    transform: translateY(-2px);
    transition: all 0.3s;
} */

.header .menuBox .menuLink a:hover:after {
    width: 82px;
    transition: all 0.3s;
}

.header .menuBox #searchBtn,
.header .menuBox .srchBtn {
    font-size: 20px;
    color: #fff;
    width: auto;
    background-color: #1a3d48 !important;
    padding: 0px 10px;
}

.header .menuBox .srchBtn:hover {
    /* color: #1a3d48; */
    background-color: #597979;
}


#autoFillSearchBoxList{
	text-shadow: none;
    margin-left: -15px;
    margin-top: 9px;
    width: 200px;
    padding: 4px 0;
}
#autoFillSearchBoxList td{
    padding-left: 3px;
}

#autoFillSearchBoxList td:hover{
	font-weight: 600;
    background-color: #1cabe2;
}
/* body */



.backLogo {
    position: absolute;
    width: auto;
    height: 77vh;
    z-index: -1;
    opacity: 0.2;
}

.bodyMap .backLogo {
    opacity: 0.049;
    height: 88vh;
}

.backLogor {
    right: 0;

}

.backLogol {
    left: 0;
    rotate: 180deg;
}

.bodySection .background {
    background-color: #ffffff7d;
    border-top: 3px solid #415777;
    border-bottom: 3px solid #415777;
    height: 78vh;

    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.bodySection .ackn,
.bodySection .desc {
    padding: 5px 20px;
    font-size: 2vh;
}


/* map  */
.mapDiv {
    display: grid;
    grid-template-columns: 3.5fr 1.5fr;
    padding: 0 10px;
}

.mapDiv .map {
    display: grid;
    grid-template-columns: repeat(11, 1fr);
}

.mapDiv .map div {
    /* width: 80px;
    height: 80px; */
    width: 6.7vw;
    height: 13vh;
    display: inline-block;
    margin: auto;
}

/* .mapDiv .map div:last-child {
    grid-column: 7/9;
    width: 13.4vw;
}

.mapDiv .map div:last-child a {
    display: flex;
}

.mapDiv .map div:last-child a .stateName {
    font-size: 20px;
    transition: all 0.5s;
}

.mapDiv .map div:last-child a img {
    position: unset;
    margin: 0;
} */

/* last child */
.mapDiv .map .oldIndia {
    grid-column: 7/9;
    width: 13.4vw;
}

.mapDiv .map .oldIndia a {
    display: flex;
}

.mapDiv .map .oldIndia a .stateName {
    font-size: 20px;
    transition: all 0.5s;
}

.mapDiv .map .oldIndia a img {
    position: unset;
    margin: 0;
}

.mapDiv .map div a {
    /* background-color: #232e3e; */
    background-color: #1cabe2;
    width: 100%;
    height: 100%;
    margin: auto;
    display: block;
    transform: scale(0.95);
    transition: all 0.3s;
    text-decoration: none;
    background-size: cover;

    box-shadow: 0px 0px 3px 0px #000;
}

.mapDiv .map div a .stateName {
    width: 100%;
    height: 100%;
    text-align: center;
    align-items: center;
    font-weight: 400;
    text-shadow: 1px 1px 3px #000;
    color: #fff;
    font-size: 13px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    transition: all 0.5s;
}

.mapDiv .map div a img {
    /* width: 100%; */
    position: relative;
    height: 100%;
    z-index: -1;
    /* filter: opacity(0.5); */
    margin-top: -16vh;
    border: 1px solid transparent;
    padding: 3px;
}

.mapDiv .map div a .viewMap {
    display: none;
}

.mapDiv .map div a:hover .viewMap {
    display: block;
    font-size: 12px;
    background-color: #d12800;
    padding: 0 7px;
    border-radius: 5px;
    margin-bottom: 2px;
}

.mapDiv .map div a:hover .stateName {
    justify-content: space-between;
    transition: all 0.5s;
}

.mapDiv .map div a:hover img {
    padding: 0;
}

.mapDiv .map div a:hover {
    font-size: 13px;
    background-color: #23354f;
    transform: scale(1);
    transition: all 0.3s;

    position: relative;
    z-index: 1;
}

.mapDiv .indiaDiv {
    text-align: center;
    filter: drop-shadow(2px 4px 6px black);
}

.mapDiv .indiaDiv img {
    width: 280px;
    margin: auto;
    filter: drop-shadow(2px 4px 6px black);
}

/* map page  */
.bodyMap {
    height: 89vh;
}

#mainLeftPanel{
	background-color: #e0e9fb;
	padding-top: 15px;
    border-right: 1px solid #a0befb;
}

.scrollable {
	overflow-x: unset !important;
    overflow-y: auto !important;
}

.mapBody #leftPnlDiv{
	padding: 3px;
	padding-top: 0;
}

.leftPanCol{
	background-color: transparent !important;
}

.mapBody{
	display: grid !important;
    grid-template-columns: 1fr 4fr !important;
    height: 100% !important;
}

.mapBody #layerTab,
.mapBody #searchTab,
.mapBody #queryTab{
	margin: 0;
	margin-top: 5px;
	background-color: #00182e;
}

.mapBody .selMenuTabCol{
	/* background-color: #232e3e !important; */
	background-color: #2f415b !important;
}

.mapBody #layerDiv,
.mapBody #searchDiv,
.mapBody #queryDiv{
	/* background-color: #232e3e !important; */
	background-color: #2f415b !important;
	padding: 0 3px;
}


#searchTab #searchLayer{
	margin: 2px 0;
}

#searchTab #searchObject{
	width: 98% !important;
}

#searchTab #searchObjName #dropDownList{
	width: 15px !important;
    margin-left: -16px!important;
    height: 23px !important;
    margin-top: 1px !important;
    border-radius: 3px;
}

.mapBody #layerDiv input[type="checkbox"],
#layerDiv input[type="checkbox"]{
	margin-right: 5px;
}

#autoFillDialog{
	max-width: 15.6vw !important;
	width: 15.6vw !important;
}

#autoFillDialog a{
	background: #fff !important;
    padding-left: 5px;
    text-decoration: none;
}

#autoFillDialog a:hover{
	background-color: #95caff !important;
}

.mapBody #searchDiv #searchTab1{
	margin: 4px 0;
}
.mapBody #queryDiv #queryDataVal{
    width: 100% !important;
}

.mapPanel,
.leftPanel {
    width: 100% !important;
    height: 89vh;
}
.mapPanel>#container {
    background-color: transparent !important;
    padding: 3px;
    /* filter: drop-shadow(0px 0px 3px black); */
}


.mapDivBox,
.bodyMap .queryDiv {
    border: 1px solid red;
}

.bodyMap .queryDiv .accordion-header button {
    padding: 5px;
    font-weight: 600;
}

.mapDivBox {
    text-align: center;
    filter: drop-shadow(0px 0px 3px #000);
}

.bodyMap .queryDiv {
    margin-right: 5px;
}

.bodyMap .queryDiv .oldMap {
    width: 100%;
    border-radius: 5px;
    margin-bottom: 3px;
    border: 1px solid #000;
    font-weight: 600;
}

.bodyMap #queryRangeDiv #btnRangeDone,
.bodyMap #btnQueryRange{
	margin-bottom: 5px;	
}

.bodyMap #queryDataColor{
	height: 22px;
    margin-top: 4px !important;
}

.headerMap {
    color: #fff;
    padding: 0 5px;
    background-color: #1cabe2;
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    height: 5vh;
    text-shadow: 1px 1px 3px #000;
    box-shadow: 0px 4px 10px #000;
    position: relative;
}

.headerMap .nav {
    position: unset;
/*     right: 10px; */
/*     top: 1px; */
    z-index: 22;
}

.headerMap .nav button {
    display: grid;
    text-align: center;
    justify-content: center;
    min-width: 88px;
    font-size: 12px;
    padding: 2px 3px;
    border: 1px solid #0dcaf0 !important;
    background-color: #0dcaf0 !important;
}

.headerMap .nav #refreshMenu,
.headerMap .nav #backBtn{
    border-radius: 3px 0 0 3px;
}

.headerMap .nav #backBtn .btn-name{
	margin-left: -52px;
    margin-top: -2px;
}

.headerMap .nav button i,
.headerMap .nav button svg {
    margin: auto;
    font-size: 3.2vh;
    
    width: 3.2vh;
    height: 3.2vh;
}

.headerMap .nav button:focus,
.headerMap .nav button:visited,
.headerMap .nav button:hover{
	 border-radius: 3px !important;
	 background-color: #0dcaf0 !important;
}

.headerMap .nav #zoomMenu:hover,
.headerMap .nav button:hover{
	 color: #fff !important;
}

.headerMap .nav button:hover .btn-name{
	
	color:#000;
	transform: translateY(4.1vh);
	transition: all 0.3s;
}

.headerMap .nav button:hover i,
.headerMap .nav button:hover svg{
	transform: scale(1.3);
    filter: drop-shadow(1px 1px 1px #000);
    
}

.headerMap .nav button:hover .rbtn g{
    fill: #fff;
}



.headerMap .mapName {
    font-size: 3vh;
    margin: 0;
    padding: 3px;
    font-weight: 600;
}

.headerMap .nav button .btn-name{

	color:transparent;
	position: absolute;

    background-color: #0dcaf0;
    padding: 2px;
    border-radius: 0 0 2px 2px;
    z-index: -1 !important;
    border: none;
    min-width: 84px;
    width: auto;
    margin: auto;
    text-align: center;
    transform: translateY(0);
    transition: all 0.3s;
}

div:has(#ui-id-1){
	height: 24px;
    padding: 0 20px;
    margin-top: 5px;
    
    cursor: grab;	
}

#divQueryDataViewer{
	width: 100% !important;
}

#divQueryDataViewer #sampleDataViewer tr:last-child td{
	width: 100%;
    float: none !important;
    text-align: center;
}

#divQueryDataViewer #sampleDataViewer tr:last-child td input{
	padding: 2px 10px;
	background-color: #1cabe2;
	font-weight: 600;
    border: none;
    border-radius: 2px;
    margin-top: 5px;
}

#divQueryDataViewer #sampleDataViewer tr:last-child td input:hover {
    color: #fff;
    box-shadow: 0px 0px 6px #000;
}

div:has(#divQueryDataViewer){
	background-color: #2f415b;
/*     width: 19vw !important; */
/*     left: 3px !important; */
/*     bottom: 9vh !important; */
/*     top: auto !important; */
}


#queryInfoViewer td{
	border: 1px solid #cbcbcb;
    padding-left: 5px;
}

#queryInfoViewer tr:first-child{
	position: sticky;
    top: -1px;
    background-color: #00182e;
}

#queryInfoViewerExportBtn tr{
	background-color: #2f415b!important;
}

#queryInfoViewerExportBtn table td{
	padding: 3px 0;
}
.comMapBody .ui-dialog-titlebar-close,
button.ui-dialog-titlebar-close{
	background-color: transparent !important;
	border: none;
}
.comMapBody .ui-dialog-titlebar-close span{
	display: none; 
}

button.ui-dialog-titlebar-close:before {
    content: "X";
    padding: 0;
    font-size: 12px;
    line-height: 0px;
    font-weight: 600;
    color: #fd3838;
    
    position: relative;
    top: -2px;
}

.headerMap .nav #backBtn{
	background-color: #0ba1bf !important;
    color: #fff;
}

#openDMap{
	background-color: #00182e;
    border: none;
    padding: 2px;
    border-radius: 3px;
}

.bodyMap #searchTab1 input[type=button],
.bodyMap #queryRangeDiv #btnRangeDone,
.bodyMap .selMenuHeadCol input[type=button],
.bodyMap #queryTab #btnQueryRange,
.bodyMap #queryTab #btnQueryDisplay{
	cursor: pointer;
    background-color: #0ba1bf !important;
    border: none;
    border-radius: 3px;
    color: white;
    padding: 2px 3px;
    border: 1px solid #00182e;
}

.bodyMap #searchTab1 input[type=button]:hover,
.bodyMap #queryRangeDiv #btnRangeDone:hover,
.bodyMap .selMenuHeadCol input[type=button]:hover,
.bodyMap #queryTab #btnQueryRange:hover,
.bodyMap #queryTab #btnQueryDisplay:hover{
    background: #05829b !important;
}


.bodyMap #queryInfoViewer tr td:last-child{
	text-align: center;
}
/* compare */

.compMap{
	display: grid;
    grid-template-columns: 1fr 1fr;
    height: 56vh;
}

.compmapName{
	text-align: center;
	background-color: #1cabe2;
    color: #fff;
    border: 1px solid #fff;
    
    border-top: none;
    border-bottom: none;
    
    font-weight: 600;
    text-shadow: 0 0 3px #000;
}

.compmap {
    height: 50vh;
}

.compmap #container01,
.compmap #container11{
	background: transparent !important;
   /*  filter: drop-shadow(0px 1px 3px #000); */
   
}

.compMapHeader{
	display: grid;
    grid-template-columns: 1.5fr 2fr 2.5fr 2.5fr 1.5fr;
    height: 38vh;
    background-color: #e0e9fb;
}

.comMapBody .headerSearchTab {
    border: 1px solid #a0befb;
}

.comMapBody #layerDiv table tr:first-child td,
.comMapBody #searchTab tr:first-child td,
.comMapBody #queryTab tr:first-child td,
.comMapBody #queryInfoViewer tr:first-child td,
.comMapBody #queryRangeViewer>tbody>tr:first-child td{
	height: 5vh;
	max-height: 5vh;
	background-color: #00182e ;
	padding: 0 !important;;
	border: none !important;
}

.comMapBody #queryDiv #queryRangeDiv #queryRangeViewer tr td,
.comMapBody #queryPDiv #queryTab tr td,
.comMapBody #searchDiv #searchTab tr td,
.comMapBody #layerDiv table tr td{
	padding: 5px;
}
.comMapBody .rback{
	background-color: #2f415b !important;
}

.comMapBody #queryDiv #queryInfoViewerExportBtn td,
.comMapBody #queryDataRange,
.comMapBody #layerDiv,
.comMapBody #layerDiv table,
.comMapBody #searchDiv,
.comMapBody #searchDiv #searchTab,
.comMapBody #queryPDiv #queryTab{
	background-color: #2f415b !important;
}

.comMapBody #menuDiv,
.comMapBody #queryRangeViewer,
.comMapBody #queryPDiv,
.comMapBody #searchDiv,
.comMapBody #layerDiv{
	height: 100%;
}

.comMapBody #queryDiv {
	height: 100% !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #2f415b !important;
}
.comMapBody #queryDiv #queryInfoDiv,
.comMapBody #queryDiv #queryRangeDiv{
	height: 30vh !important;
}

.comMapBody #queryDiv #queryInfoViewerExportBtn{
	height: 7vh;
    width: 100%;
}

.comMapBody #queryDiv #queryInfoViewerExportBtn table{
	width: 100%;
}


.comMapBody #searchDiv #searchTab1{
	margin:auto;
	margin-top: 5vh;
	width: 70%;
}

.comMapBody table tr td #queryDataOper{
	height: 25px;
}

.comMapBody table tr td #queryDataColor{
	height: 25px;
    margin-top: 5px !important;
    width: 100% !important;
    min-width: 35px;
}

.comMapBody #searchDiv #searchMap,
.comMapBody #queryPDiv #queryTab #btnQueryDisplay,
.comMapBody #queryPDiv #queryTab #btnQueryRange,
.comMapBody #queryDiv #btnRangeDone,
.comMapBody #queryDiv #queryInfoViewerExportBtn td input[type="button"]{
	cursor: pointer;
    background-color: #0ba1bf !important;
    border: none;
    border-radius: 3px;
    font-weight: 600;
    color: white;
    padding: 0 3px;
    border: 1px solid #00182e;
}

.comMapBody #searchDiv #searchMap:hover,
.comMapBody #queryPDiv #queryTab #btnQueryDisplay:hover,
.comMapBody #queryPDiv #queryTab #btnQueryRange:hover,
.comMapBody #queryDiv #btnRangeDone:hover,
.comMapBody #queryDiv #queryInfoViewerExportBtn td input[type="button"]:hover{
    background: #05829b !important;
}

.comMapBody #menuDiv table tr td{
	background-color: #0ba1bf !important;	
	width: 33.33% !important;
    height: 50% !important;
}

.comMapBody #menuDiv table tr td span{
	font-size: 12px;
	display: none;
    margin-top: 10px;
    translate: 0 15px;
    color: #fff;
    position: absolute;
    width: 4.35vw;
    margin: 0;
    padding: 0;  
    transition: all 0.3s;
}

.comMapBody #menuDiv table tr td:hover{
	background: #05829b !important;
}
.comMapBody #menuDiv table tr td:hover>span{
	display: block;
	color: #fff;
	translate: 0;
	transition: all 0.3s;
}

.comMapBody .backLogor{
	height: 63vh;
    bottom: 0;
    opacity: 0.05;
}

.comMapBody #queryInfoViewer tr td:nth-child(2),
.comMapBody #queryInfoViewer tr td:last-child{
	text-align: center;
}


/* footer  */
.footer {
	background-color: #1cabe2;
    padding: 2px;
    display: flex;
    align-items: center;
    height: 6vh;
    box-shadow: 0px -4px 10px #000;
    width: 100%;
    font-size: 2vh;
}

.footer .footerBox {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    color: #fff;
    width: 100%;
    text-shadow: 1px 1px 3px #000;
}

.footer .footerBox>div{
 	padding: 0 10px;
}

.footer .footerBox .pwrdBy{
	text-align: center;
}

.footer .footerBox .ridd{
	text-align: right;
}

.footer .footerBox .ridd a {
    color: #fff;
    text-decoration: none;
}

.footer .footerBox .ridd img {
    width: 30px;
    filter: drop-shadow(1px 1px 3px black);
}

/* others  */
body {
  scrollbar-color: #00182e transparent ;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 5px;
    box-shadow: inset 0 0 3px #000;
}

::-webkit-scrollbar-thumb:hover {
    box-shadow: inset 0 0 3px #fff;
    background-color: #00182e;
}

::-webkit-scrollbar-track {
    /* box-shadow: inset 0 0 3px #000; */
    border-radius: 5px;
    background-color: transparent;
}