<style>
* {
  box-sizing: border-box;
}
html,body {
  height:100%;
  width:100%;
  margin:0;
  padding: 0;
  overflow: hidden;
}

form {
  margin:auto;
}

.mfs-login {
/*
  background-color: #0e6cc4;
  background: rgba(100, 100, 100, 1) url('background.jpg') no-repeat center center fixed;
*/
  background: rgba(100, 100, 100, 1) url('background.jpg') no-repeat center center fixed;
  background-size: cover;
  background-blend-mode: screen;
  overflow:auto;
  display:flex;
  margin:auto;
}
.mfs-login form {
  width: 380px;
  background: rgba(255,255,255,0.5);
  box-shadow: 0 0 5px 0 rgba(0,0,0,0.4);

  height: 330px;
  border: 1px solid;
  border-color: #e4e4e4;

  padding-left: 25px;
  padding-top: 25px;
}

.mfs-error {
  margin: auto;
  background: rgba(255,255,255,0.8);
  box-shadow: 0 0 5px 0 rgba(0,0,0,.4);
  font-family: "Segoe UI Webfont", -apple-system, "Helvetica Neue", "Lucida Grande", "Roboto", "Ebrima", "Nirmala UI", "Gadugi", "Segoe Xbox Symbol", "Segoe UI Symbol", "Meiryo UI", "Khmer UI", "Tunga", "Lao UI", "Raavi", "Iskoola Pota", "Latha", "Leelawadee", "Microsoft YaHei UI", "Microsoft JhengHei UI", "Malgun Gothic", "Estrangelo Edessa", "Microsoft Himalaya", "Microsoft New Tai Lue", "Microsoft PhagsPa", "Microsoft Tai Le", "Microsoft Yi Baiti", "Mongolian Baiti", "MV Boli", "Myanmar Text", "Cambria Math";
  width: 380px;
  padding-top: 15px;
  padding-bottom: 15px;
  text-align: center;
  border: 1px solid;
  border-color: #e4e4e4;
  color: red;
}

.mfs-login input[type="text"] {
  border: 0;
  outline: 0;
  background: transparent;
  border-bottom: 2px solid black;
  width: calc(100% - 30px);
  font-style: bold;
}

.mfs-login input[type="password"] {
  border: 0;
  outline: 0;
  background: transparent;
  border-bottom: 2px solid black;
  width: calc(100% - 30px);
  font-style: bold;
}

.mfs-h1 {
  color: green;
  font-style: bold;
  font-size: 42px;
  font-weight: 100;
  background: url("sipway.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 53px 64px;
  padding-left: 65px;
}

h2 {
  font-color: black;
  font-style: bold;
  font-size: 18pt;
}

/* Style the header */
.mfs-header {
  width: 100%;
  height: 25px;
  background: url("sipway.png");
  background-repeat: no-repeat;
  background-position: 10px 7px;
  background-size: 27px 32px;
  background-color: #000;
  padding: 10px;
  padding-left: 50px;
  color: #e5e5e5;
  text-align: left;
  font-size: 18px;
  overflow: hidden;
}

.mfs-wrapper {
  background: #f4f4f4;
  left: 0px;
  height: calc(100% - 25px);
  width: 100%;
  overflow: hidden;
  margin:0;
  padding:0;
}
/* Clear floats after the columns */
.mfs-wrapper:after {
  content: "";
  display: table;
  clear: both;
}

/* Create columns that floats next to each other */
.mfs-column {
  float: left;
  height: 100%;
  overflow: auto;
}

.mfs-left-nav {
  background: #dfdfdf;
  color: black;
  width: 200px;
  margin-left: 0px;
  overflow-x: hidden;
  font-size: 16px;
}

/* Side navigation links */
.mfs-left-nav a {
  color: #111;;
  padding: 16px;
  text-decoration: none;
  display: block;
  white-space:nowrap;
}
.mfs-left-nav span {
  margin-right:20px;
}

/* Change color on hover */
.mfs-left-nav a:hover {
  background-color: #c4c4c4;;
  color: black;
}

.mfs-content {
  color: black;
  width: calc(100% - 200px);
}
.mfs-content-wrapper {
  margin-top: 10px;
  padding: 10px;
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 20px;
  width: calc(100%-80px);
}
.mfs-content h2 {
  margin-top: 0px;
  padding-bottom: 10px;
  border-bottom: 1px solid grey;
  font-size: 14px;
  font-weight: bold;
  overflow:hidden;
  white-space:nowrap;
}
.mfs-content span {
  margin-right:7px;
  overflow:hidden
}
.mfs-form {
  margin-top: 0px;
  margin-left: 40px;
  margin-right: 40px;
  background-color: #ffffff;
  overflow:auto;
}
.mfs-privacy {
  position:fixed;
  bottom:0px;
  right:0px;
  z-index:10;
  background: rgba(0,0,0,0.6);
  width:100%;
}
.mfs-privacy a {
  color: white;
  text-decoration: none;
  display: block;
  white-space:nowrap;
  font-family: "Segoe UI Webfont", -apple-system, "Helvetica Neue", "Lucida Grande", "Roboto", "Ebrima", "Nirmala UI", "Gadugi", "Segoe Xbox Symbol", "Segoe UI Symbol", "Meiryo UI", "Khmer UI", "Tunga", "Lao UI", "Raavi", "Iskoola Pota", "Latha", "Leelawadee", "Microsoft YaHei UI", "Microsoft JhengHei UI", "Malgun Gothic", "Estrangelo Edessa", "Microsoft Himalaya", "Microsoft New Tai Lue", "Microsoft PhagsPa", "Microsoft Tai Le", "Microsoft Yi Baiti", "Mongolian Baiti", "MV Boli", "Myanmar Text", "Cambria Math";
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
  margin-left: 8px;
  margin-right: 8px;
}
.mfs-privacy a:hover {
  text-decoration: underline;
}
.mfs-privacy span {
  text-align:left;
  float:right;
}

.mfs-widget {
  float: left;
  width: 380px;
  background: rgba(255,255,255,1);
  /*box-shadow: 0 0 5px 0 rgba(0,0,0,.4);*/
  box-shadow: 2px 2px 0 #e6e6e6;
  border: 1px solid #e6e6e6;
  border-color: #e4e4e4;
  margin:35px;
  margin-top:0px;
  padding:20px;
  overflow-x:hidden;
  cursor:pointer;
}
.mfs-widget:hover {
  box-shadow: 2px 2px 0 #095930;
  border: 1px solid #095930;
}
.mfs-error {
  float: left;
  color:red;
  cursor:auto;
}
.mfs-checkbox {
  float: left;
  width: 180px;
  overflow: hidden;
}
.mfs-checkbox input[type=checkbox]:checked + label {
  font-weight: bold;
} 
.mfs-clearfix:after {
  content: ".";
  clear: both;
  display: block;
  visibility: hidden;
  height: 0px;
}


@media (max-width: 600px) {
  .mfs-left-nav {
     width: 50px;
  }
  .mfs-content {
     width: calc(100% - 50px);
  }
  .mfs-widget {
     width: calc(100% - 110px);
  }
}
