@media only screen and (max-width: 768px) {
    /* For mobile phones: */
   .app-header {
      background-image: /**DO_NOT_REMOVE_THIS waves.png*/url("../../images/waves.png")/**DO_NOT_REMOVE_THIS_END waves.png*/;
      background-repeat: no-repeat;
      background-position: 0px -180px;
      background-size: auto;
      min-height: 60px;
      max-height: 60px;
      background-color: #36536b;
      color: #ddd;
      font-size: 20px;
      overflow: visible;
   }

   .ui-view-container {
      margin-top: 30px;
   }

   .nav-menu-button {
      display: block;
   }

   .leftSidebarView {
      display: none;
      width: 35vh;
   }

   .versa-logo {
      height: 40px;
      width: auto;
      margin-top: 5px;
   }

   .slogan-mobile {
      padding-right: 10px;
      padding-top: 2px;
      display: block;
   }

   .slogan {
      display: none;
   }

   .show-only-mobile {
      display: block;
   }

   .show-except-mobile {
      display: none;
   }

   .menu_left_button {
      background: transparent;
      border: none;
      padding-top: 16px;
      padding-left: 20px;
   }

   .burger {
      color: silver;
      font-size: 20px;
   }

   .contentView {
      overflow: auto;
   }

   .container-body {
      margin-top: 10px;
   }

   .ledyellow, .ledgreen, .ledgrey, .ledred {
      position: absolute;
      bottom: 2px;
      left: 0px;
      width: 10px;
      height: 10px;
      right: auto !important;
   }

   .lifecycle-header {
      height: 35px;
   }

   .lifecycle-header .lifecycle-title {
      font-size: 12px !important;
      width: 50%;
   }

   .lifecycle-header .lifecycle-title.selected {
      width: 50%;   
      font-size: 12px !important;  
   }

   .margin-wan-port {
      width: auto;
   }

   .bootstrap-content {
      margin: 5px;
      margin-left: 2px;
   }

   .bootstrap-content .panel {
      max-width: 99vw;
   }

   .container-body .item {
      flex-grow: 1; /* default 0 */
      margin: 2px 5px 2px 5px!important; 
      min-width: 300px !important;
   }

   .left-aligner {
      position: absolute;
      right: 1px;
      /*left: auto;*/
      bottom: 4px;
      /*top: 0px;*/
   }

   .mobile-a-drop {
    position: absolute;
    /* top: 0px; */
    right: 9px;
    /*bottom: -30px;*/
	}

   /*.logout {
      position: relative !important;
      right: 30px !important;
   }*/

   .logout-mobile {
	   	position: absolute;
	    /* left: 1px; */
	    /*bottom: 1px;*/
	    /*background-color: #bfa5a5;*/
	    padding: 0px;
	    margin: 0px;
	    right: -4px;
	    width: 100%;
	    height: 100%;
	    top: 9px;

   }

   /*Table to be responsive */
   .mobile-table-conf table,.mobile-table-conf thead,.mobile-table-conf tbody,.mobile-table-conf th,.mobile-table-conf td,.mobile-table-conf tr {
   		padding: 5px;
		display: block;
		-webkit-touch-callout: none; /* iOS Safari */
	    -webkit-user-select: none; /* Safari */
	     -khtml-user-select: none; /* Konqueror HTML */
	       -moz-user-select: none; /* Firefox */
	        -ms-user-select: none; /* Internet Explorer/Edge */
	            user-select: none; /* Non-prefixed version, currently
	                                  supported by Chrome and Opera */
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	.mobile-table-conf thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

    .mobile-table-conf tr {
      margin: 0 0 1rem 0;
    }

    .mobile-table-conf td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 22% !important; 
	}

    td:before { 
		position: absolute;
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}

	.mobile-table-conf td:nth-of-type(1):before { content: "Name"; }
	.mobile-table-conf td:nth-of-type(2):before { content: "MAC"; }
	.mobile-table-conf td:nth-of-type(3):before { content: "Oper"; }
	.mobile-table-conf td:nth-of-type(4):before { content: "Admin"; }
	.mobile-table-conf td:nth-of-type(5):before { content: "Tenant"; }
	.mobile-table-conf td:nth-of-type(6):before { content: "VRF"; }
	.mobile-table-conf td:nth-of-type(7):before { content: "IP"; }
	.mobile-table-conf td:nth-of-type(8):before { content: "Type"; }

	.login-wrapper {
		width: 100% !important;
        height: 320px !important;
       /*padding: 20px;*/
        margin: 0px !important;
        /*margin: -125px 0 0 -260px;*/
        position: absolute;
        top: 30% !important;
        left: 0px !important ;
	}

	.table>tbody>tr>td {
		line-height: 1.0 !important;
	}

  .err-table {
    border: 1px solid black;
    padding: 5px;
  }

	.login-wrap {
		position: relative;
		width: auto !important;
		margin: 0 auto;
		height: auto;
	}

	.login-wrapper-2 {
      	background:#0b3d59;
    	width: 100% !important;
        height: 320px;
        margin: 0px !important;
    	position: absolute;
        top: -15% !important;
        left: 0px !important;
        border-radius: 25px;
        /*text-transform: lowercase;*/
	}

	.login-wrapper-2 .title .versa-login-logo-text {
	    color: #0090bc;
	    /* float: right; */
	    margin-top: 30px;
	    /* margin-right: 34px; */
	    left: 11px;
	    position: relative;
	    font-size: 14px;
	}
	.login-wrapper-2 .title .versa-login-logo {
	    width: 52% !important;
	    height: auto !important;
	}

	.form-horizontal .controls {
    	margin-left: 0px !important;
    	width: 90%;
	}

	.form-horizontal {
		display: flex;
    /*background-color: #a96060;*/
    width: 100%;
    flex-direction: column;
    align-content: center;
    align-items: center;
    /*justify-content: right;*/
	}

   .modelImageOnSMDevices {
      width: 92vw;
      margin: 0px
   }
   .advantechfwa1010vc {
      max-height: 195px;
   }
   
  .ui-accordion .ui-accordion-content {
    padding: 5px;
    overflow: visible;
  }
  .panel-body {
    padding: 5px;
  } 
  .column-mobile {
    width: 100vw;
  }

  .reachability-input {
    width: 50vh;
    margin-left: 10px;
  }
}