body {
      margin: 0;
      height: 100%;
      position: relative;
      font-family: sans-serif;
    }

    header {
      box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
      padding-top: 10px;
    }

    nav {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px 0;
    }

    .logo-title {
      margin-top: 0;
      font-family: sans-serif;
      color: #444444;
    }

    button {
      background-color: #0078ab;
      width: 100%;
      color: white;
      padding: 15px;
      margin: 10px 0px;
      border: none;
      cursor: pointer;
      font-size: 16px;
    }

    input[type=text],
    input[type=password] {
      width: 100%;
      margin: 8px 0;
      padding: 12px 20px;
      display: inline-block;
      border: 1px solid #cccccc;
      box-sizing: border-box;
      font-size: 14px;
    }

    button:hover {
      opacity: 0.7;
    }

    .language-section {
      max-width: 500px;
      margin: 0 auto;
      padding-top: 20px;
      font-family: sans-serif;
      font-size: 15px;
    }

    .login-section {
      max-width: 500px;
      margin: 0 auto;
      padding-top: 20px;
      font-family: sans-serif;
      font-size: 14px;
    }

    .video-section {
      border: 1px solid #cccccc;
      border-radius: 4px;
      background: #f9f9f9;
      margin-bottom: 70px !important;
      background-image: url('../images/frame.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      margin: 0 auto;
      padding: 20px;
      margin-top: 30px;
      max-width: 1240px;
    }

    #login-screen {
      display: block;
    }

    
    #centeralert {
      display: none;
    }

    .centeralert {
      text-align: center;
      margin-top: 70px;
    }

    .v-alert {
      width: 400px;
      margin: 0 auto;
      padding: 20px 20px 30px;
      background-color: #ff5252;
      border: 1px solid #e64444;
      color: #ffffff;
      box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.4);
    }

    .v-alert-content {
      display: inline-block;
    }

    .v-alert-iocn {
      display: inline-block;
      font-size: 40px;
      margin-bottom: 15px;
    }

    .error-msg {
      background-color: #dc2f2f;
      color: #ffffff;
      font-size: 16px;
      padding: 10px;
    }

    #error-alert {
      display: none;
    }

    .footer-left {
    width: 50%;
    float: left;
    display: inline-block;
    }
	
	.maintenance-section {
    max-width: 600px;
    margin: 0 auto;
    margin-top: 120px;
    font-family: sans-serif;
    font-size: 15px;
    text-align: center;
    border: 1px solid #e2e2e2;
    padding: 40px;
    border-radius: 5px;
    box-shadow: 0px 0px 1px rgba(0,0,0,0.5);
	}
	.maintenance-section img {
    display: inline-block;
    width: 50px;
    height: 50px;
    padding-right: 20px;
	}
	
	.fa-eye:before {
		content: "\f06e";
	}
	.fa-eye-slash:before {
		content: "\f070";
	}
	.input-group{
		position: relative;
	}
	.input-group #togglePassword{
		position: absolute;
		right: 10px;
		top: 20px;
	}

    footer {
      position: fixed;
      background-color: #ffffff;
      bottom: 0px;
      width: 100%;
      box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
      border-top: 1px solid #ccc;
      font-size: 14px;
    }

    .footer-right {
    float: left;
    text-align: right;
    width: 50%;
    display: inline-block;
    }

    .footer-right p a {
      text-decoration: none	;  
    }
	.footer-left p {
      padding-left: 20px;	  
    }
	.footer-right p {
      padding-right: 20px;	  
    }

    @media only screen and (min-width: 768px) and (max-width: 1024px) {
      .video-section {
        margin: 50px !important;
      }
    }
	@media only screen and (min-width: 320px) and (max-width: 568px){
		.login-section,.language-section,nav {
        padding: 10px;
      }
	  .v-alert {
			width: 90%;
			margin: 0 auto;
			padding: 20px;			
		}
		.error-msg {    
			margin: 0 5px;
			font-size: 14px;
		}
		.video-section{
			width: 250px;
		}
		video{
			height: 250px;
		}
	}
	@media only screen and (min-width: 375px) and (max-width: 812px) and (orientation: portrait) { 
		.login-section,.language-section,nav {
        padding: 20px;
      }
	  .v-alert {
			width: 90%;
			margin: 0 auto;
			padding: 20px;			
		}
		.error-msg {    
			margin: 0 5px;
			font-size: 14px;
		}
		.video-section{
			width: 300px;
		}
		video{
			height: 300px;
		}
		
	}

	/* Landscape */
	@media only screen and (min-width: 375px) and (max-width: 812px) and (orientation: landscape) { 
		video{
			height: 100%;
		}
		footer {
			position: relative;
			box-shadow: none;
		}
	}