html, body {
    font-family: Verdana,sans-serif;
    font-size: 15px;
    line-height: 1.5;
    background-color: #303e45 !important;
    overflow-x: hidden;
}

.styling-container {
    padding: 0.01em 16px;
    position: relative;
    height: 98vh
}
.styling-bar {
    width: 100%;
    overflow: hidden;
}

.styling-bar .styling-bar-item {
    padding: 8px 16px;
    float: left;
    background-color: inherit;
    color: inherit;
    width: auto;
    border: none;
    outline: none;
    display: block;
}
.hoverpadding {
    padding: 10px;
    height: 90%;
    transition: .25s ease;
}
.hoverpadding:hover {
    padding: 1px;
    height: 100%;
}
#first-map {
    width: 100%;
    height: 30vh;
    position: relative;
    outline: none;
    border : solid 1px white;
}

.btn-1 {
    color: #fff!important;
    background-color: #009688!important;
    border-color: #009688;
}
.btn-2 {
  	color: #000;
    background-color: #f1f1f1;
    border-color: #f1f1f1;
}
 .btn-3 {
  	color: #fff !important;
    background-color: #57707d !important;
    border-color: #57707d;

}
 .btn-4 {
  	color: #fff !important;
    background-color: #009688 !important;
    border-color: #3a4b53;
}

 .btn-5 {
  	color: #000!important;
    background-color: #cddc39!important;
    /* width: 90%!important; */
    right : 15px;
}

.btn{
	width: 100%;
    padding: 8px 16px;
	border-radius: 0px;
}
.btn:hover {
	color: #000;
    background-color: #ccc;
    border-color: #ccc;
}

.btn-image {
    /* opacity: 0.7; */
    cursor: pointer;
}
.btn-image:hover {
    /* opacity: 1; */
    cursor: pointer;
}

.btn-image:active {
      -webkit-transform: scale(1.1);
    transform: scale(1.1);
}


.form-control {
	border-radius: 0px;
}
.basemap{
	background-color: #3a4b53 !important;
}
.basemap .btn{
	    text-align : unset;
}

.tab-container{
    position: absolute;
    top: 8vh;
    margin-top: -35px;
    left: 50%;
    display: table-cell;
    float: right!important;
}
.tab {
	white-space: normal;
	border: none;
    display: inline-block;
    outline: 0;
    padding: 6px 16px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none!important;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    margin-left: -5px;

}
.tab:hover {
	color: #000!important;
    background-color: #ccc!important;
    border-color: #ccc;
}
.tab-active {
	color: #3511C6 !important;
    background-color: #becbd2 !important;
}

.styling-dark-grey{
	color: #fff!important;
    background-color: #616161!important;
}
.styling-grey{
	color: #3511C6 !important;
    background-color: #becbd2 !important;
}

.map-container {
	position: relative;
	background-color: #ddd;
    width: 100%;
    height: 89vh;
    border: solid 5px #becbd2;
    border-radius: 5px;
}

.legend {
	color: #05c9b5 !important;
    background-color: #f5f7f8 !important;
	position: absolute;
    top: 0px;
    right: 0px;
    z-index: 999;
    width: 17%;
    height: 100%;
    font-size: 14px;
    font-family: "PT Sans", sans-serif;
    padding: 8px 16px!important;
}

.legend-mobile {
    color: #000 !important;
    background-color: #f5f7f8 !important;
    width: 100%;

    font-size: 12px;
    font-family: "PT Sans", sans-serif;
    padding: 8px 46px!important;
}

.second-map{
	position: absolute;
    top: 0px;
    left: 0px;
    z-index: 999;
    width: 83%;
    height: 100%;
    background-color: #57707d;
}

.flood{
	margin: 0px 15px 15px 0px; width: 100%;
}

#FloodZone2button{
	overflow-wrap: break-word;
	height: 4vh;
	opacity: 1;
   	width: 100%;
	background-color: rgb(172, 213, 255);
}
#FloodZone3button{
	overflow-wrap: break-word; height: 4vh; opacity: 0.2; width: 100%; background-color: rgb(70, 77, 148);
}
#Areasbenefittingfromflooddefencesbutton{
overflow-wrap: break-word; height: 4vh; opacity: 0.2; width: 100%; background: repeating-linear-gradient(45deg, rgb(96, 109, 188), rgb(96, 109, 188) 3px, rgb(255, 255, 255) 3px, rgb(255, 255, 255) 5px);
}
#Floodstorageareabutton{
	overflow-wrap: break-word; height: 4vh; opacity: 0.2; width: 100%; background: radial-gradient(circle at center center, rgb(0, 203, 255) 50%, transparent 22%) 0% 0% / 8px 8px, rgb(238, 238, 238);
}
#Flooddefencebutton{
	overflow-wrap: break-word; padding: 1px; height: 1vh; width: 100%; opacity: 0.2; background-color: orange;
}
#Mainriverbutton{
	overflow-wrap: break-word; padding: 1px; height: 1vh; width: 100%; opacity: 0.2; background-color: dodgerblue;
}

.styling-section {
	display: inline-flex;
	margin-top: 2vh;
}

.circle {
	width: 30px; height: 30px; border-radius: 50%;  margin-right: 5px;
}



/* 12.01.2022 - Changes - Editing modal info */

.popover-header {
    color:black;
}

.styled-thead td {
    background:#cddc39;
}

.swal-text {
    text-align:left;
}

.legend {
    overflow:auto ;
}

.swal2-info {
    color: #009688  !important;
    border-color: #009688  !important;
}

#tableResults > table > tbody > tr > td:nth-child(2) {
    white-space: nowrap;
}

.swal2-styled.swal2-confirm {
    background-color:#009688 !important;
}

.swal2-styled.swal2-confirm:hover {
    background-color:#05c9b5 !important;
}

.flex-nav-container {
    display:flex; 
    width:100%; 
    justify-content:space-between; 
    align-items:center;
}

/* GRID */

.parent {
    padding:0 20px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: auto;
    grid-column-gap: 20px;
    grid-row-gap: 10px;
    }
    
    .div1 { grid-area: 1 / 1 / 2 / 6; }
    .div2 { grid-area: 2 / 1 / 6 / 5; }
    .div3 { grid-area: 2 / 5 / 3 / 6; }
    .div4 { grid-area: 3 / 5 / 4 / 6; }
    .div5 { grid-area: 4 / 5 / 5 / 6; }
    .div6 { grid-area: 5 / 5 / 6 / 6; } 

.basemap-btn:active, .basemap-btn:focus {
    background:#009688;
    color:white;
    outline:none !important;
    box-shadow:none !important;
}
#btnNextSteps:focus, #btnNextSteps:active {
    background:#cddc39 !important;
    outline:none !important;
    box-shadow:none !important;
}

.ui-menu {
    z-index:9999 !important;
}
.expanding-menu{
    border: 1px solid #ccc;
    color: #000 !important;
    background-color: #f5f7f8 ;
    position: absolute;
    top: 0px; 
    font-size: 12px;
    font-family: "PT Sans", sans-serif;
    right: 17%;
    width: 17%;
    z-index: 9999;
   
}


ul.main_menu{
    list-style: none;
    padding: 0 0;
    position: relative;
    float: left;
    width: 100%;
    height: auto;
    text-align: center;
    margin-bottom: 0px;
    cursor: pointer;
   
  }
  .main_menu li{
    border: 1px solid rgb(137, 136, 136);
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center; 
    font-size: 14px;
    color: #05c9b5;
    font-weight: bold;
    

  }
  .main_menu li:hover{
    background-color: #e9e9e9 ;
  }

  ul.sub_menu{
    list-style: none;
    position: relative;
    float: left;
    width: 100%;
    background: #f5f7f8;
    overflow: hidden;
    transition: all ease 250ms;
    text-align: center;
    padding: 0px;
    display: none;
    
    
  }
  .sub_menu li{
    font-size: 14px;
    border-top: none;
    border-bottom: none;
    color:#05c9b5;
    font-weight: initial;
    justify-content: space-between;
  }
  .grey-text-div{
    display: none;
    text-align: center;
  }
   .grey-text{
    font-size: 12px;
    
    
   }
   .legend_1{
    /* overflow:hidden; */
   }
.hidden{
    display: none;
}
.accItem{
    display: flex;
    align-items: center;
  
}
.ml-2{
    margin-left: 2px;
}
.modal-vtab{
    background: white;
    border: 1px solid #dee2e6;
    width: 75%;
    border-radius: 10px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

}
.modal-vtab a{
    color: #44a13b; 
}
.vtab-active{
    background: #44a13b;
}
.vtab-active a{
    color: white !important;
}
.model-htab{
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 5px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 22%;
}
.model-htab a{
    color: #44a13b !important; 
}
.htab-active{
    background: #44a13b;
}
.htab-active a{
    color: white !important;
}
.modal-table{
    color: #000;
    width: 100%;
    margin-bottom: 3rem;
    text-align: center;
    border-color: #ccc;
    border-collapse: separate;
    border-spacing: 1px;
}
.modal-table th{
    background-color: #8faadc;
}
.modal-table td{
    background-color: #eaeff7;
}
.modal-table th,td{
    height: 35px;
    padding: 5px;
    overflow-wrap: break-word;
    
}
.drop-down{
    color: black;
    max-width: 200px;
    width: 200px;
}
tbody {
    display: block;
    height: 100px;
    overflow: auto;
}
thead, tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.table-container{
    height: 141px;
    margin-top: 2px;
}
.reference , .amount {
    font-size: 12px;
}
.tooltip.left{
     margin-left: -10px; 
    }