@import url('https://fonts.googleapis.com/css?family=Raleway|Poppins|Montserrat|Roboto&display=swap');
body{
font-family:Poppins;
//overflow-x:hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
border:none;
z-index:0;
position:relative;
font-size:16px;
}
.hs {
  display: grid;
  overflow-x: scroll;
  padding-bottom: calc(.75 * var(--gutter));
  margin-bottom: calc(-.25 * var(--gutter));
}

.hs:before,
.hs:after {
  content: '';
  width: 10px;
}
.x{width:30px;text-align:center;float:center;}
.mainchart{display:inline-block;border:1px solid #DDDDDD;margin-bottom:5px;}
.widthfuller {width:99%;heightX:98%;background:transparent url("https://app.insys.co/images/noimage.png") repeat scroll 0% 0%;overflow:hidden;vertical-align:top;}
.noborder{border:none;}
.redstar{color:red;}
.grayinput{background:#EEEEEE;}
#grayinput{background:#EEEEEE;}
.bordernone{border:none;}
.withscrolld {
            width:1200px;
            overflow-x: scroll;
            white-space: nowrap;
}
.withscrollm {
            width:300px;
            overflow-x: scroll;
            white-space: nowrap;
}
.wait{color:#00AA00;}
.success{color:#00AA00;}
.fail{color:#AA0000;}
.fontsize15{font-size:15px!important;}
.fontsize60p{font-size:60%;}
.fontsize70p{font-size:70%;}
.fontsize80p{font-size:80%;}
#fontsize80p{font-size:80%;}
#fontsize90p{font-size:90%;}
#goback{width:20px;margin-bottom:-5px;margin-right:10px;}
#product{margin-top:-7px;}
#padding7px{padding:7px;}
#margintop10px{margin-top:10px;}
#margin2px{margin:2px;}
#margin-2px{margin:-2px;}
.inlineblock{display:inline-block;}
#inlineblock{display:inline-block;}
.greenback{background:#00AA00;color:#FFFFFF;}
#greenback{background:#00AA00;color:#FFFFFF;}
.blueback{background:#0000AA;color:#FFFFFF;}
#blueback{background:#0000AA;color:#FFFFFF;}
.redback{background:#AA0000;color:#FFFFFF;}
#redback{background:#AA0000;color:#FFFFFF;}
.greyback{background:#DDDDDD;color:#000000;}
#greyback{background:#DDDDDD;color:#000000;}
.redtext{color:red;}
.greytext{color:#DDDDDD;}
.bluetext{color:blue;}
.greentext{color:green;}
.logoutBtn{color:#0000EE;}
.menuitem{padding:7px;line-height:40px;font-weight:bold;margin-top:15px;font-size:99%;text-transform:uppercase;}
.menuitemm:hover{padding:7px;border:solid 2px orange;font-weight:bold;margin-top:5px;font-size:99%;background:#111111;}
.dashmenuitem{padding:7px;border-radius:1px;line-height:40px;font-weight:bold;margin-top:5px;font-size:130%;margin-right:5px;}
.dashmenuitem:hover{padding:7px;border-radius:1px;font-weight:bold;margin-top:5px;font-size:130%;color:#DDDDDD;}
.displaynone{display:none;}
#displaynone{display:none;}
.fontbold{font-weight:bold;}
#fontbold{font-weight:bold;}
iframe 
{
  overflow-x:hidden;
  overflow-Y:hidden;
display:block;
}
.center {
  display: flex;
  align-items: center;
  height: 50px;
  //border: 3px solid green;
}
.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  font-family: arial;
  line-height: 1.8em;
}

e {display:block;}

a.active{
   color: red;
   background-color: #000000;
}

.header{
background:#F4F4FF;
padding-top:5px;
padding-right:20px;
padding-left:10px;
height:60px;
display:block;
}
.headertext {
padding-top:13px;
float:right;
display:block;
text-align:right;
text-transform:uppercase;
line-height:27px;
}

@media print {
.no-print {
display: none;
padding:2px;
  		}
}

@media screen {
.print {
display: none;
padding:2px;
  	}
}

a.red_link{
	color: red;
	float: left;
	font-weight: bold;
	text-decoration: none;
}

h1, h2 {
	clear: both;
	font-weight:bold;
	//color: #333399;
}

.system_logo{
	float:right;
	margin-top:10px;
}

.sidebar{
width:270px;
padding:10px;
border:1px solid #dddddd;
box-shadow: 2px 2px 1px 0px #999999;
border-radius:5px;
line-height:160%;
margin:9px auto;
list-type:none;
display:inline-block
verticalign:top;
vertical-align:text-top;
background:#F4F4FF;
position:relative;
display:none;
}

.sidebar a{color:blue;}

.sidebar li{padding-left:5px;padding-right:5px;}

.search_box{
	background-color:#ccc;
	padding:5px;
}

ul{
	margin:2px 0px 0px 1px;
	padding:0px;
}
li {margin-left:19px;}

.go_back{
	background-color:#ccc;
	text-align:center;
	padding:5px 10px;
}

h3{
	font-size:19px;
	font-weight:bold;
}

h4{
	font-size:17px;
	font-weight:bold;
}

h5{
    margin-bottom:20px;
    display:block;
}

.title{
font:15px Arial;
font-weight:bold;
text-transform:uppercase;
border:none;
padding:7px;
}

.op_log{
	float:right;
	font-weight:bold;
}

.subheader{
	margin-bottom:3px;
}

.op_info_bar2{
	background-color:#eee;
	padding:5px 5px;
	margin-top:1px;
color:blue;
border-radius:5px;
}

.client_info{
font-weight:bold;
color:black;
background:#eeeeee;
padding:11px;
padding-left:11px;
display:block;
margin-bottom:9px;
text-transform:uppercase;
box-shadow: 1px 1px 1px #ccc;
height:auto;
}

.summary{
    font-weight:bold;
	font-size:105%;
    text-transform:uppercase;
    background:#AAEEEE;
    color:#555555;
    padding:7px;
    border-radius:5px;
    margin:3px;
    display:inline-block;
}

.client_summary{
	font-weight:bold;
text-transform:uppercase;
}

.crud{
	float:right;
}

a.ed_prof{
	font-weight:bold;
}

a.del_prof{
	font-weight:bold;
	color:red;
}

table{border:none;z-index:1;overflow:auto;}
tr{border:none;z-index:1;}
th{
	padding:7px 10px;
	text-align:left;
	z-index:1;
}

td{padding:3px;padding-left:5px;min-width:40px;line-height:23px;border-bottom:1px solid #EEEEEE;z-index:1;}

th.once{
	background-color:#eee;
	padding:5px 10px;
	text-align:left;
	width:500px;
}

.labels{
	font-weight:bold;
}

.footer{
padding:5px;
margin-left:-5px;
text-align:center;
position:relative;
display:block;
font-size:80%;
}

p{font-size:16px;}

a{
color:blue;
text-decoration:none;
font-weight:bold;
}

.errors{
	color:red;
	font-weight:bold;
}

.multi_view{
	font-weight:bold;
	line-height:250%;
}

.docs{
	line-height:250%;
}

.no{
	color:green;
}

.header2{
	max-width:680px;
	width:100%;
	padding-top:10px;
}

.header_content{
	float:right;
	font-weight:bold;
	text-align:right;
	margin:5px;
	padding:5px;
	//display:block;
}

#quotation{
	border:2px solid #ccc;
	max-width:700px;
	width:100%;
	display:block;
}

.quotation_info_bar{
	//background-color:#CCCCCC;
	padding:5px 5px;
	//margin:10px 10px 0px 10px;
	font-weight:bold;
}

.quotation_info_bar2{
	//background-color:#eee;
	padding:10px 10px;
	margin:0px 15px 0px 15px;
	font-weight:bold;
}

.quote_notes{
	margin-left:15px;
	margin-bottom:15px;
	font-weight:bold;
	font-size:16px;
	text-decoration:underline;
}

.wrapper{
	max-width:900px;
}

.tabular{
border:1px solid #ccc;
}
.doc_title{
font-weight:bold;
font-size:95%;
padding:10px;
display:block;
text-transform:uppercase;
box-shadow: 1px 1px 1px #ccc;
height:auto;
width:100%;
min-width:290px;
color:#EEEEEE;
border:none;
box-shadow:none;
opacity:0.9;
font-family:Arial;
}
.doc_title1{
font-weight:bold;
font-size:95%;
padding:10px;
display:block;
text-transform:uppercase;
box-shadow: 1px 1px 1px #ccc;
height:auto;
width:100%;
min-width:290px;
border:none;
box-shadow:none;
opacity:0.9;
font-family:Arial;
background:#AAAAAA;
color:#111111;
margin-bottom:2px;
}
.doc_title_icon{height:20px;margin-bottom:-4px;}
#dash_icon{height:25px;opacity:0.9;}
.all_quotation_cont{
	line-height:20px;
	word-spacing:3px;
}

form{
	margin:0px;
	padding:0px;
}

input.pos_field {
	min-width:200px;
	border-radius:2px;
	border:1px solid #7ac9b7;
	padding:4px 4px;
}

::placeholder{
    color:#777777;
    font-size:90%;
}

pos_field{
	min-width:200px;
	border-radius:2px;
	padding:4px 4px;
}

.homebutton{background:#eeeeee;color:#00AA00;//font-weight:bold;padding:2%;border-radius:7px;display:inline-block;max-width:40%;width:100%;margin:5px;text-align:center;text-decoration:none;box-shadow:1px 2px 1px #999999;text-transform:capitalize;}
.homebutton:hover{background:#dddddd;}
.dashbutton{//font-weight:bold;padding:5px;border-radius:7px;display:inline-block;max-width:159px;width:47%;margin:2px;margin-bottom:7px;text-align:center;text-decoration:none;text-transform:capitalize;line-height:20px;font-size:95%;opacity:0.7;}
.dashbutton2{//font-weight:bold;padding:5px;border-radius:7px;display:inline-block;max-width:150px;width:47%;margin:2px;//margin-bottom:7px;text-align:center;text-decoration:none;text-transform:capitalize;line-height:20px;font-size:85%;opacity:0.7;}
.dashbutton:hover{background:#333333;color:#009900;}
.dashbutton0{//font-weight:bold;padding:5px;border-radius:7px;display:inline-block;max-width:150px;width:47%;margin:2px;margin-bottom:7px;text-align:center;text-decoration:none;text-transform:capitalize;line-height:20px;font-size:95%;opacity:0.7;} 
.dashbutton0:hover{background:#333333;color:#009900;}
.dashbutton1{//font-weight:bold;padding:5px;border-radius:7px;display:inline-block;max-width:150px;width:47%;margin:2px;margin-bottom:7px;text-align:center;text-decoration:none;text-transform:capitalize;line-height:20px;font-size:95%;opacity:0.7;}
.dashbutton1:hover{background:#333333;color:#009900;}
.dashbutton200{background:#EEEFFF;//font-weight:bold;padding:7px;border-radius:7px;display:inline-block;max-width:233px;width:45%;margin:2px;margin-bottom:7px;text-align:center;text-decoration:none;box-shadow:1px 2px 1px #999999;min-height:75px;text-transform:capitalize;line-height:20px;font-size:95%;opacity:0.7;}
.dashbutton200:hover{background:#333333;color:#009900;}
.dashbutton300{font-weight:bold;padding-left:4px;padding-right:4px;padding-top:10px;padding-bottom:10px;border-radius:5px;display:inline-block;max-width:159px;width:47%;margin:2px;margin-bottom:7px;text-align:left;text-decoration:none;text-transform:capitalize;line-height:20px;font-size:95%;opacity:0.7;}
.dashbutton300:hover{background:#333333;color:#009900;}
.bluebutton{width:220px;background:#000099;color:white !important;padding:5px;margin:5px;text-decoration:none;border-radius:5px;display:inline-block;opacity:0.9;box-shadow: 2px 2px 3px 0px #aaaaaa;text-align:center;text-transform:capitalize;}
.bluebutton:hover{background:#0000FF;}
.greenbutton0{width:220px;background:#009900;color:white !important;padding:10px;margin:5px;text-decoration:none;border-radius:5px;display:inline-block;opacity:0.9;box-shadow: 2px 2px 3px 0px #aaaaaa;text-align:center;text-transform:capitalize;}
.greenbutton0:hover{background:#00FF00;}
.greenbutton{background:#009900;color:white !important;text-align:left;float:left;margin:5px;display:inline-block;width:100px;text-transform:capitalize;}
.greenbutton:hover{background:#00FF00;color:#009900;}
.respbutton{color:#EEEEEE;opacity:0.7;min-width:130px;max-width:150px;width:47%;padding:7px;margin:2px;text-decoration:none;border-radius:5px;display:inline-block;text-align:center;text-transform:capitalize;line-height:20px;margin-top:10px;}
.respbutton:hover{//background:#0000FF;}
.buttonpercent{font-size:105%;margin-bottom:5px;display:block;font-weight:bold;line-height:29px;}
#buttonbackgreen{background:#00AA00;color:#EEEEEE;}
#buttonbackblue{background:#0000AA;color:#EEEEEE;}
#buttonbackred{background:#AA0000;color:#EEEEEE;}
.blinking{
animation:blinkingText 2s infinite;
}
img{margin:1px;}
@keyframes blinkingText{
    0%{     background: #F00; color:white;padding:5px;}
    39%{    background: transparent; color:white;padding:5px;}
    79%{    background:transparent;  color:white;padding:5px;}
    100%{   background: #F00; color:white;padding:5px;border:}
}

.blinking1{
animation:blinkingText1 2s infinite;
}
@keyframes blinkingText1{
    0%{     color:red;padding:5px;}
    39%{    background: transparent; color:#ddd;padding:5px;}
    79%{    background:transparent;  color:#ddd;padding:5px;}
    100%{   color:red;padding:5px;border:}
}

input[type="text"],input[type="number"],input[type="email"],input[type="password"]{
	max-width:500px;
	min-width:50px;
	border-radius:2px;
	margin-top:3px;
	margin-bottom:5px;
	padding:9px;
	width:100%;
	display:inline-block;
	border:1px solid #CCCCCC;
	background:#FFFFEA;
}
input[type="date"],input[type="time"],input[type="month"],input[type="year"]{
	max-width:500px;
	min-width:125px;
	border-radius:2px;
	margin-top:3px;
	margin-bottom:5px;
	padding:9px;
	width:100%;
	display:inline-block;
	border:1px solid #CCCCCC;
	background:#FFFFEA;
	//font-size:85%;
}

input[type="submit"],input[type="button"]{
	border-radius:2px;
	margin-right:2px;
	margin-top:5px;
	padding:7px;
	border:1px solid #00AA00;
	color:#00AA00;
	//border:none;
}
input[type="submit"]:hover,input[type="button"]:hover{
	border-radius:2px;
	margin-top:5px;
	padding:7px;
	border:1px solid #00AA00;
	background:#00AA00;
    color:white;
}
input[type="file"]{
	font-size:80%;
}

textarea{
	border-radius:2px;
	padding:8px;
	width:100%;
	min-height:35px;
	max-width:500px;
	min-width:200px;
	border:1px solid #CCCCCC;
	background:#FFFFEA;
}
.cke_contents{border:solid 1px #CCCCCC;background-color:#FFFFEA;}
.floatright{float:right;}
.textalignright{text-align:right;}
.textaligncenter{text-align:center;}
.textalignleft{text-align:left;}
#textalignright{text-align:right;}
#textaligncenter{text-align:center;}
#textalignleft{text-align:left;}
.searchinput{width:120px !important;font-size:85%;display:inline-block;}

.pos_client{
	border-radius:2px;
	border:1px solid #aaa;
	padding:5px 5px;
}

select.pos_options{
	border-radius:2px;
	padding:4px 4px;
}

select{
	border-radius:2px;
	margin:1px;
	padding:9px;
	max-width:500px;
	min-width:50px;
	width:100%;
	border:1px solid #CCCCCC;
	background:#FFFFEA;
}

.submit{
	background: #2ea2cc;
	border-color: #0074a2;
	-webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,.5),0 1px 0 rgba(0,0,0,.15);
	box-shadow: inset 0 1px 0 rgba(120,200,230,.5),0 1px 0 rgba(0,0,0,.15);
	color: #fff;
	text-decoration: none;
	padding:4px;
	margin-top:5px;
	width:100px;
	border-radius:5px;
}

.submit:hover{
	background: #0074a2;
	border-color: #0074a2;
	-webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,.5),0 1px 0 rgba(0,0,0,.15);
	box-shadow: inset 0 1px 0 rgba(120,200,230,.5),0 1px 0 rgba(0,0,0,.15);
	color: #fff;
	margin-top:5px;
	text-decoration: none;
	padding:4px;
	width:100px;
	border-radius:5px;
}

.submit2{
	background:#0074a2;
	color: #fff;
	margin-top:5px;
	text-decoration: none;
	padding:4px;
	width:80px;
	border-radius:5px;
}

legend{
	font-weight:bold;
	text-transform:uppercase;
	position:relative;
	z-index:0;
}
.sales{
	background:#FFFFDA;
	padding:5px;
	margin-bottom:5px;
	display:block;
	border:1px solid #EEEEEE;
	font-weight:bold;
}

.errors{
	color:red;
	font-weight:bold;
}

.messages{
	color:green;
	font-weight:bold;
}

.dated{
	float: right;
}

.profiletabletd {
        width:240px;
}

.profiletableth {
        width:190px;
}

//RESPONSIVENESS

mennu {
display:block;
padding:7px;
text-align:center;
margin:top:7px;
float:center;
text-align:center;
//background:#eeeeee;
}

tablett {
display:block;
padding:7px;
text-align:center;
margin-top:7px;
float:center;
text-align:center;
//background:#eeeeee;
}

mobilee {
display:block;
padding:7px;
text-align:center;
margin-top:7px;
float:center;
text-align:center;
}

headd {
font-weight:bold;
color:red;
display:block;
}

head2 {
text-align:center;
font-weight:bold;
padding:5px;
text-transform:uppercase;
vertical-align:middle;
display:block;
text-align:center;
float:middle;
margin:0 auto;
}
.table-container
{
//margin: 0 0 1em;
min-height:300px;
height:100%; 
width:100%; 
overflow:auto;
}
@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
}
@media screen and (min-width: 968px) {
.mennu {display: none;}
.tabb {display: none;}
    .withscroll {
            width:1000px;
            white-space: nowrap;
    }
#container{
overflow-x:hidden;
margin-right:7px;
margin-left:7px;
border:none;
min-height:490px;
//min-height:80vh;
width:99%;
max-width:1500px;
vertical-align:top;
display:block;
float:center;
}
}
@media screen and (max-width: 967px) {
.head2 {display: none;}
.tabb {display: none;}
.withscroll {
width:300px;
white-space: nowrap;
    }
#container{
overflow-x:hidden;
margin-right:11px;
margin-left:7px;
margin:auto;
border:none;
width:97%;
overflow:auto;
min-height:500px;
//height:100vh;
vertical-align:top;
display:block;
float:center;
}
}
@-ms-viewport{
width: device-width;
}
salefields {width:40px;}
sms {display:block;color:red;}
  @media screen and (max-width: 400px) {
    table td:before {
      content: attr(data-label);
      float: left;
      //text-transform: uppercase;
      font-weight: bold;
    }
  }
.sort1{width:69px;padding:4px;font-size:80%;display:inline-block;float:right;}
.sort2{width:130px;font-size:80%;display:inline-block;}
.menu1{padding:5px;margin-top:-7px;width:100px;font-weight:bold;opacity:0.7;border-radius:5px;}
//LIGHTBOX
/* Style the Image Used to Trigger the Modal */
#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
  margin: auto;
  display: block;
  width: 40%;
  max-width: 400px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption { 
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 75px;
  right: 35px;
  color: #f1f1f1;
  font-size: 65px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}

.select2-dropdown {
 top: 22px !important;
 left: 8px !important;
 padding:15px;
}
.deleteform{float:right;display:inline-block;margin-top:-8px;}
.delete{width:30px;margin-top:-5px;display:inline-block;}
.edit{width:25px;//margin-bottom:-5px;margin-left:7px;}
.add{width:25px;margin-bottom:-5px;margin-left:7px;display:inline-block;}
.nanobar {
  width: 100%;
  height: 4px;
  z-index: 9999;
  top:0
}
.bar {
  width: 0;
  height: 100%;
  transition: height .3s;
  background:#0000FF;
}
/* Center the loader */
#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 250px;
  height: 250px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid blue;
  border-bottom: 16px solid blue;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 }
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom {
  from{ bottom:-100px; opacity:0 }
  to{ bottom:0; opacity:1 }
}

#myDiv {
  display: none;
  text-align: center;
}
<!--///BOF SEARCH POP////-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
* {
  box-sizing: border-box;
}

.openBtn {
  background: #f1f1f1;
  border: none;
  padding: 1px 1px;
  font-size: 20px;
  cursor: pointer;
  border-radius:5px;
  border:1px solid #eeeeee;
  display:inline-block;
}

.openBtn:hover {
  background: #bbb;
}
.button {background:#111111;color:#EEEEEE;padding:1px;font-size:75%;float:right;text-decoration:none;}
.overlaym {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  overflow-x: hidden;
  transition: 0.5s;
}
@media screen and (max-height: 450px) {
  .overlaym a {font-size:18px;}
  .overlaym .closebtn {
  font-size: 30px;
  top: 15px;
  right: 35px;
  }
}
.overlay7{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 1;
  z-index:9999;
}
.overlay7:target {
  visibility: visible;
  opacity: 1;
  background:#111111;
}
#overlay7{
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.9); /* Black background with opacity */
  z-index: 9999; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}
#text7{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 14px;
  line-height:18px;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  text-transform:Capitalize;
  border: 2px dotted #00AA00;
  padding:10px;
  min-width:200px;
  background:#000000;
}
.select2-container .select2-container--default .select2-container--open{z-index:-999;}
.overlay { 
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  top: 20;
  left: 20;
  background-color:#000000;
  z-index:9999;
}
.overlay-content {
  position: relative;
  top: 46%;
  width: 95%;
  text-align: center;
  margin-top: 30px;
  margin: auto;
  padding:15px;
  background-color:#000000;
  z-index:9999;
}

.overlay .closebtn {
  position: absolute;
  top: 30px;
  bottom: 70px;
  right: 65px;
  font-size: 30px;
  cursor: pointer;
  color: white;
}

.overlay .closebtn:hover {
  color: #ccc;
}

.overlay input[type=text] {
  padding: 15px;
  font-size: 17px;
  border: none;
  float: left;
  width: 95%;
  background-color: white;
}

.overlay input[type=text]:hover {
  background: #f1f1f1;
}

.overlay button {
  float: left;
  width: 20%;
  padding: 15px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.overlay button:hover {
  background: #bbb;
}
<!--///EOF SEARCH POP///-->
.overlaym-content {
  position: relative;
  top: 5%;
  left:20;
  width: 100%;
  text-align: left;
  padding:10px;
  z-index:9999;
  opacity: 1;
}

.overlaym a {
  padding: 5px;
  text-decoration: none;
  font-size: 18px;
  color: #FFFFFF;
  display: block;
  transition: 0.3s;
  padding-left:20px;
  padding-right:20px;
}

.overlaym a:hover, .overlaym a:focus {
  color: #f1f1f1;
}

.overlaym .closebtn {
  position: absolute;
  top: -28px;
  right: 25px;
  font-size: 50px;
  padding-bottom:5px;
  padding-left:12px;
  padding-right:12px;
}

#cb1 {
  visibility: hidden;
}
input#cb1::after {
  visibility: visible;
  content: "Show";
  color: #EEEEEE;
  background: #00AA00;
  //background:transparent url("https://app.insys.co/images/showpass0.png") no-repeat;
  padding: 5px;
  margin: 3px;
}
input#cb1:checked::after {
  content: "Hide";
  color: #EEEEEE;
  background: #AA0000;
 // background:transparent url("https://app.insys.co/images/showpass1.png") no-repeat;
 padding: 5px;
 margin: 3px;
}
#cb2 {
  visibility: hidden;
}
input#cb2::after {
  visibility: visible;
  content: "Show";
  color: #EEEEEE;
  background: #00AA00;
  //background:transparent url("https://app.insys.co/images/showpass0.png") no-repeat;
  padding: 5px;
  margin: 3px;
}
input#cb2:checked::after {
  content: "Hide";
  color: #EEEEEE;
  background: #AA0000;
 // background:transparent url("https://app.insys.co/images/showpass1.png") no-repeat;
 padding: 5px;
 margin: 3px;
}

/* BOF BOTTOM MENU */
.navbar {
  overflow: hidden;
  position: fixed;
  bottom: -3;
  width: 100%;
  float:center;
  text-align:center;
  margin: 0 auto;
  padding-left: 2%;
  padding-top:3px;
}

/* Style the links inside the navigation bar */
.navbar a {
  float: left;
  display: block;
  color: #FFFFFF;
  text-align: center;
  padding: 10px 10px;
  text-decoration: none;
  font-size: 16px;
  border-top-right-radius:4px;
  border-top-left-radius:4px;
  margin:2px;
  width:13%;
}

/* Change the color of links on hover */
.navbar a:hover {
  background-color: #EEEEEE;
}

/* Add a green background color to the active link */
.navbar a.active {
  background-color: #AA0000;
  color: #FFFFFF;
  //border:2px solid #AA0000;
}

/* Hide the link that should open and close the navbar on small screens */
.navbar .icon {
  display: none;
}
/* EOF BOTTOM MENU */