@media only screen and (min-width: 700px) {
body  {
    /*background-color:#e4e3c8;*/
    font-family:'Arial','Open Sans','sans-serif';
    font-size:0.63vw;
    font-style:normal;
    color:#000000;
}
.top {
    font-family:'Arial','Open Sans','sans-serif';
    text-align:center;
}
.topnav {
  background-color: #056672;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}
.intro {
    width:50vw;
    margin:auto;
    font-family:'Arial','Open Sans','sans-serif';
    font-size:10pt;
    color:#000000;
   background-color:#dcf3f7; /* #7ae8f9;*/
   display:none;
   border:2px solid green;
    
}
.panelmain {
   width:100%;max-width:100%;background-color:pink; border:1px solid black;
}
.bigpanel {
    width:100%;max-width:100%;background-color:pink;
}
.namedrop {
    width:100%;
    font-size:12pt;
    background-color:#e5e5e5;
}
.flexcontainer {
  display: flex;
  flex-direction: row;
  justify-content:  space-between;
  margin-left:0;
  font-size:14pt;
 /*c0f794*/
}
/* Style the navigation menu */
.topnav {
  overflow: hidden;
  background-color: #7ae8f9;
  position: relative;
}
.topnav #myLinks {
  display: none;
  color: #ffffff;
   /*background-color:#056672;*/
}
/* Style navigation menu links */
.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
  background-color:#056672;
}

/* Style the hamburger menu */
.topnav a.icon {
  background: #056672;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  scale:1.2;
}
/* Menu background color */
#myLinks {
    background-color:#056672;
    color:white;
}
/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the active link (or home/logo) */
.active {
  background-color: #4CAF50;
  color: white;
  text-align:left;
  font-style:italic;
  font-weight:bold;
}
.wrapper  {
    width:100%;
    /*height:100%;
    margin:auto;*/
}
.l2 {width:40%;margin:auto;background-color:white;font-weight:normal;color:black;}
.l2 li:hover{font-weight:background-color:yellow;bold;color:black;}
.l3 {font-weight:normal;color:black;}

.l3:hover{font-weight:bold;color:red;}
.menublock {
    color:#979797 !important;
    padding:0.7vw;
    width: 78%;
    margin:auto;
    border-radius:8px;
    font-size:0.9vw;
    font-weight:normal;
    text-align:center;
    background-image:url(https://www.immelmandental.com/images/menublock.png);
    background-repeat:no-repeat;
    background-position: center; 
    display:block;
   }
.menublock a:hover  {
    color:black;
}
.menuitem  {   padding-top:10px;  }
/* MODAL START -- FOR DOWNLOADING PROCEDURE CODES FILE SELECTED ON MAIN ADMIN PAGE  OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO*/
/* The Modal (background) */
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none; /* Hidden by default */
  z-index: 1; /* Sit on top */
  width: 18vw; /* Full width */
  height: 60vh; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  font-family:'Open Sans','Arial', sans-serif;
}
.modal a:hover {
    background-color:yellow;
    font-weight:bold;
}
div li {
   background-color:yellow;
    font-weight:bold; 
}  

}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 90%; /* Could be more or less, depending on screen size */
  font-family:'Open Sans','Arial', sans-serif;
}

/* The Close Button */
.close {
  color: black;
  float: right;
  font-size: 28px;
  font-weight: bold;
   background-color: white;
}

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


                


.identipic-error  { margin:auto;height:auto;position:relative;top:25%;border:0px solid #5e5e5e;background-color:#e8e8e8;text-align:center;font-family:'Arial','Open Sans',sans-serif;font-size:10pt;}
.close {
    /*color: #aaaaaa;*/
    color: #8e8e8e;
    float: none;
    font-size: 0.9vw;
    font-weight: bold;
    margin-right:0.4vw;
    cursor:pointer;
}
.close:hover,
.close:focus {
    color: #000000;
    text-decoration: none;
    cursor: pointer;
}
td,tr {
    margin-left:8px;
    padding:5px;
}
.table {
        max-width:500px;
    }
.dateselect[ width:4vw;font-size:16pt;]     
#depday #depday2 { width:4vw;font-size:16pt;}   
.tdl  {  width:40%; font-size:14pt;text-align:center;color:black;}
.tdla  {  width:15%; font-size:14pt;text-align:center;color:black;}
.tdr  {  width:40%; font-size:14pt; color:black;}
.tdra  {  width:40%; font-size:14pt; color:black;}
.tdrb {  width:40%; font-size:14pt; color:black;}
.tduser {text-align:center;border-color:#e8e8e8;cursor:pointer;}
.tduser:hover  {background-color:#fff3ba;}
.tdprac  {
    padding-left:3px;
    /*width:22%;*/
    height:1.85vh;
    font-family:'Arial','Open Sans', sans-serif;
    font-size:0.56vw;
}

.table {
        max-width:600px;
    }

.img-responsive  {
    width: 100%;
    height: auto;
}
select,input {
    /*padding: 1px;*/
    border: 0px;
    border-color:white;
    border-radius: 4px;
    background-color: white;
    font-family: 'Open Sans', 'Arial', sans-serif;
    font-weight:200;
    font-size:9pt;
    color:black;
    width:auto;
    /*min-width: 80px; */
    padding-left:3px;
    /*-webkit-appearance: menulist-button;*/
    height: 20px;
    -webkit-appearance: none;
    appearance: none;
    text-indent:1px;
    text-overflow:auto;
}
.ui-select{width: 100%}
/* This is to remove the arrow of select element in IE */

input[type="radio"]{
    -webkit-appearance: radio;
    -moz-appearance: radio;
    -o-appearance: radio;
    appearance: radio;
}
input[type="checkbox"]{
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    -o-appearance: checkbox;
    appearance: checkbox;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}
label {
    font-family: 'Lato', 'Arial',sans-serif;
    font-weight:100;
    font-size:10pt
}
.table1 {
    position:relative;
    top:0;
    font-family: 'Lato', 'Arial', sans-serif;
    max-width:500px;
    border-collapse: separate;
    border-spacing: 1px 5px;
    border: black solid 1px !important;
    background-color:#e4e3c8;
    /*padding:15px;*/
    color:#1a1e38;
    /*color:#979797;
    /*border-color:#979797;*/
    line-height:1;
}
.table2 {
    font-family: 'Lato', 'Arial', sans-serif;
    max-width:500px;
    border-spacing: 1px 5px;
    border:none;
    background-color:white;
    padding:15px;
    color:#1a1e38;
    }
.table-update  { max-width:360px;min-width:360px;background-color:#e5e5e5;padding:4px;border:0px solid #e8e8e8;border-radius:5px;font-family:'Arial','Open Sans','sans-serif';font-size:9pt; }
.table-update input[type=text]  { font-size:9pt; }
.table-users  { margin:auto;min-width:40vw;background-color:#e5e5e5;padding:2px;font-size:0.63vw;border:none;border-collapse:separate;border-radius:6px;border-spacing: 1px;table-layout:fixed; }
.table-users select {
    -moz-background-image: none;
    -webkit-background-image: none;
    -ms-background-image: none;
    -o-background-image: none;
    background-image: none;
    height:1.85vh;
    font-size:8pt;
    -webkit-appearance: none;
    appearance: none;
    text-indent:0.01px;
    text-overflow:'';
}
.table-users input[type=text] { font-size:9pt; }
.table-users input[type=email] { font-size:9pt; }
select::-ms-expand {display: none; }
.tbody-register  { max-width:35vw;display:none;  }
.sectionhead  {
    color:#979797; font-size:14pt; font-weight:normal; text-align:center; background-color:white;
}
.mainfrate {
    width:50vw;
    height:20vh;
    background-color:#e5f4f9;
    color:black;
    font-family:'Arial',sans-serif;
    font-size:14pt;
    border:0px solid blue;
}
.lev1  {
    color:#979797; font-size:16pt; font-weight:normal; text-align:center; background-color:white;
}
.divL {
    width:25%;
    height:6vh;
    background-color:green;
    float:left;
    text-align:center;
}
.divR {
    width:25%;
    height:6vh;
    /*background-color:yellow;/*#fccfb5;/*#fccfb5    #E5E5E5*/
    float:right;
    text-align:center; 
}
.btnL {
    float:right;
    width:25%;
    /*margin-left:10vw;*/
}
.btnR {
    float:left;
    width:25%;
    /*margin-right:10vw;*/
}

.mybtn {
	width:100%;
	background-color:#E5E5E5; /*#e4e3c8; /* #f1f1f1;    #edeaea */
	border:none;
	border-radius: 8px;
	font-family:'Arial', 'Open Sans','sans-serif';
	font-size:14pt;
	color:black;
	font-weight:100;
	height:25px;
	padding-top:2px;
}
.mybtn:hover {font-weight:bold;}
.mybutton {
    background-color: white;
    border: none;
    border-radius:5px;
    /*color: #727272;*/
    color:#5badd3;
    padding: 2px 4px;
    text-align: center;
    text-decoration: none;
    /*display: inline-block;*/
    font-size: 0.56vw;
    margin: 4px 2px;
    cursor: pointer;
    width:auto;
}
.mybutton:hover {color: black;font-weight:bold;}
.backbtn {
	width:48%;
	background-color:#E5E5E5; /*#e4e3c8; /* #f1f1f1;    #edeaea */
	border:none;
	border-radius: 8px;
	font-family:'Arial', 'Open Sans','sans-serif';
	font-size:8pt;
	color:black;
	font-weight:100;
	height:25px;
	padding-top:0;
	text-align:center;
	margin:2px;
}
.backbtn:hover {font-weight:bold;}
.antibot  {
    border:1px;
    text-align:center;
    font-weight:bold;
}
#submit { font-weight: 600; }
#postal { display: none; }
#responsible { display: none; }
.checkbox{
    padding:0;
    height: 30px;
    width: 30px;
}
/*XXXXXXXXXXXXX END OF NEW CODE XXXXXXXXXXXX*/
div:hover {
    -webkit-animation-play-state: paused; /* Safari 4.0 - 8.0 */
    -moz-animation-play-state: paused;
    animation-play-state: paused;
}
img {
    width: auto;
    height: auto;   
}
#services  { 
position:relative;
top:14.5%;
font-family:'lato', 'Arial', sans-serif;
font-size:10pt;
font-weight:200;
color:black;
}
#slidera {
    position:absolute;
    padding:0;
    top:0;
    left:35%;
    width:65%;
    /*align:center center fixed;*/
}
#staticpic  {
    display:none;
}
#call  {
    display:none;
}
.bg  {
    width:500px;     
    background:#ffffff !important; 
    color:black;
    box-shadow: 2px 2px 5px gray;
    z-index:88;   
}
.bgtop  {
    width:500px;  
    background:#ffffff;
    top:-190px;
    margin-left:-15%;
    z-index:88;
    
}

#leftcol  { width:70%;margin-left:15%; }  /*z-index:20;*/

#tablesect1  {margin-top:-5%;width:100%;}
#tablesect2  {margin-top:-0.5%;width:100%;}
#tablesect3  {margin-top:-3.9%;width:100%;}
#tablesect4  {margin-top:-1%;width:100%;}
#tablesect5  {margin-top:-1.7%;width:100%;}
#tablesect6  {margin-top:0;width:100%;}
#tablesect7  {margin-top:0;width:100%;}

/* FOR SMALLER FULL HD SCREEN  */

/*input[type="radio"]{
    -webkit-appearance: radio;
}
input[type="checkbox"]{
    -webkit-appearance: checkbox;
    opacity:1;
    background:white;
}
input::-webkit-calendar-picker-indicator {
  display: none;
} 
.table-update  {
    border:none;
    color:black;
    width:auto;
}
#tablesect1  {margin-top:-4.2%h;;width:100%;}
#tablesect2  {margin-top:-0.5%;;width:100%;}
#tablesect3  {margin-top:-8.2%;;width:100%;}
#tablesect4  {margin-top:-2.8%;;width:100%;}
#tablesect5  {margin-top:-2%;;width:100%;}
#tablesect6  {margin-top:0;width:100%;}
#tablesect7  {margin-top:0;;width:100%;}

*/
/* END SMALLER FULL HD SCREEN  */


body {width:100vw;margin:0;}
#leftcol {width:100vw !important;min-width:60vw;margin:0;text-align:center;}
input[type="radio"]{
    -webkit-appearance: radio;
}
input[type="checkbox"]{
    -webkit-appearance: checkbox;
    opacity:1;
    background:white;
}
input::-webkit-calendar-picker-indicator {
  display: none;
}
.bgtop  {
    max-width:280px;
    background:#ffffff;
}
.table1 {
    position:relative;
    top:0;
    max-width:400px;
    border-collapse: separate;
    border-spacing: 1px 15px;
    border: black solid 0px !important;
    background-color:#e4e3c8;
    /*padding:15px;*/
    color:#1a1e38;
}
.table-update  {
    border:none;
    color:black;
    width:auto;
    /*max-width:100%;
    min-width:100%;*/
}
select,input,textarea {
    padding: 1px;
    color:black;
    width:auto;
    height:25px !important;
    font: inherit;
}
#tablesect1  {margin-top:-4.2%;;width:100%;}
#tablesect2  {margin-top:-4.2%;;width:100%;}
#tablesect3  {margin-top:-11%;;width:100%;}
#tablesect4  {margin-top:-2.8vh;;width:100%;}
#tablesect5  {margin-top:-2vh;;width:100%;}
#tablesect6  {margin-top:0;width:100%;}
#tablesect7  {margin-top:0;;width:100%;}
/* END SMALLER SCREEN  */


h2,h3,h4,h5  {
    color:#686868;
}

span {
    width: 100%;
    display: block;
}

.fm_input  {
    text-align:center;
    width:280px;
    line-height: 200%;
    font-size:12pt;
    border-radius:4px;
    box-shadow: 10px 10px 5px #dbdbdb;
    margin-bottom:10px;
    
}
.dummy {
    margin-top: 100%;
}


/* Popup container */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
}
/* The actual popup (appears on top) */
.popup .popuptext {
    visibility: hidden;
    width: 200px;
    background-color: #fff;
    color: #9b9caa;
    text-align: center;
    border-style: solid;
    border-width: 10px;
    border-color:#8fc2d6;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 30%;
    margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    -moz-animation: fadeIn 1s;
    animation: fadeIn 1s
}


/* LOADER SPINNER: Center the loader */
#loader {
  position: absolute;
  left: 50%;
  top: 45%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  background: url(https://www.immelmandental.com/images/pacemakerlogo_noP_transp.png); background-repeat: no-repeat; background-position: center center; margin-bottom:70px; background-size: 40px 40px;
  -webkit-animation: spin 1.5s linear infinite;
  -moz-animation: spin 1.5s linear infinite; 
  animation: spin 1.5s 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;
  -moz-animation-name: animatebottom;
  -webkit-animation-duration: 0.2s;
  -moz-animation-duration: 0.2s;
  animation-name: animatebottom;
  animation-duration: 0.2s
}

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

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}
.orig {
    width:500px;max-width:98vw;background-color:white;margin:auto;
}
.orig2 {
    border:0px solid black;font-size:8pt;width:100%;background-color:#e8e8e8;margin:auto;
    border-radius:5px;padding-left:5px;
}
.leftinput {
    width:98%;margin-left:5px;color:black;text-align:center;background-color:white;
}
.destinput {
    width:16%;
    border:4px solid #ffffff;
    border-radius:5px;
    -moz-border-radius:5px;
   -webkit-border-radius:5px;
    text-align:center;
    font-size:14pt;
}
#myDiv {
  display: none;
  text-align: center;
}
/* END LOADER SPINNER   XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
.nextbtn {
    width:5vw;
    height:3vh;
    border-radius:5px;
    background-color:white;
}
/* LOGIN FORM */
.loginform  {
    width:20%;
    height:20%;
    margin:auto;
    background-color:white;
    /*border:1px solid #e8e8e8;*/
    border-radius:6px;
    text-align:center;
}
.loginform input  {
    border:1px solid #e8e8e8;
    border-radius:4px;
    width:40%;
    text-align:center;
}
.loginform input:focus  {
    border:1px solid #0090ff;
    background-color:#fffce5;
}
#loginbutton:hover  {  font-weight:bold; }
#loginproceed:hover  {  font-weight:bold; }
/* PROGRESS BAR */
.progress-bar { 
	position:relative;
	top:5px;
	width:860px;
	height:12px !important;
    background:#aab7c1 !important;
	-moz-animation:fullexpand 40s ease-out infinite;
	-webkit-animation:fullexpand 40s ease-out infinite;
}
.b { 
    width:16vw;
    font-size:1vw;
}
.elementtop {
  align-items: center;
  font-size:0.9vw;
  background-color:#ffffff;/* #e5f4f9 */
  border-radius: 1px;
  display: flex;
  height: 50px;
  justify-content: center;
  margin-top: 1vh;
  margin-left: 0;
  width: 500px;
  height:5vh;
  border:0px solid #E5E5E5;
  font-weight:bold;
}
.elementf {
  align-items: center;
  font-size:10pt;
  background-color:#ffffff;/* #e5f4f9 */
  border-radius: 1px;
  display: flex;
  height: 150px;
  justify-content: center;
  margin-top: 1vh;
  margin-left: 0;
  width: 500px;
  height:5vh;
  border:0px solid #E5E5E5;
  font-weight:normal;
}

.element {
  align-items: center;
  font-size:0.8vw;
  background-color: #e5f4f9;
  border-radius: 30px;
  display: flex;
  height: 50px;
  justify-content: center;
  margin-top: 0;
  width: 40vw;
  height:5vh;
}

.element-1 {
  box-shadow: 
    12px 12px 16px 0 rgba(0, 0, 0, 0.25),
    -8px -8px 12px 0 rgba(255, 255, 255, 0.3);
    margin-left:6vw;
}

.element-2 {
  box-shadow: 
    12px 12px 16px 0 rgba(255, 255, 255, 0.3) inset,
    -8px -8px 12px 0 rgba(0, 0, 0, .25) inset;
}
}