/* Font faces for Bauhaus */
@font-face {
    font-family: 'Bauhaus';
    src: url('/fonts/BauhausRegular.ttf') format('truetype');
}
@font-face {
    font-family: 'BauhausBold';
    src: url('/fonts/BauhausBold.ttf') format('truetype');
}
@font-face {
    font-family: 'BauhausBoldItalic';
    src: url('/fonts/BauhausBoldItalic.ttf') format('truetype');
}
@font-face {
    font-family: 'BauhausItalic';
    src: url('/fonts/BauhausItalic.ttf') format('truetype');
}

/* General styles */
.hidden {
    display: none;
}

.errorText {
    color: red;
}

header {
    width: 100%;
    background: url('../images/bg-header.png') no-repeat top center;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.3);
}
header .top-header {
    padding: 10px;
    /*background-color: #144898;*/
    color: white;
}
header .center-header {
    padding: 10px 0;
}
header .logo img {
    max-width: 100%;
    height: auto;
}
header .hotline .item {
    padding: 0 15px;
    border-left: 1px solid #e6e6e6;
}

/* Form styles */
.register-btn, .authenticate-btn {
    width: 364px;
    height: 48px;
    display: flex;
    padding: 0px;
    font-size: 16px;
    border-radius: 8px;
    box-shadow: 0px 2px 14px rgba(120, 174, 236, 0.2);
    cursor: pointer;
    margin-bottom: 5px;
    border: none;

    justify-content: center;
    align-items: center;
    align-self: stretch;
    background: #346BC0;
}
.register-btn {
    background-color: #346BC0;
    color: white;
    padding: 11px 26px;
    gap: 10px;

    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.authenticate-btn {
    background-color: #DABC38;
    color: white;
}
.register-btn:hover {
    background-color: #45a049;
}
.authenticate-btn:hover {
    background-color: #e53935;
}

.keypass-fido2-title{
    font-family: 'Bauhaus';
    font-style: normal;
    font-size: 80px;
    font-weight: 400;
    line-height: 100px;
    /* or 125% */
    letter-spacing: -0.25px;
    color: #144898;
    margin-top: 20px;
    margin-bottom: 10px;
    flex: none;
    align-self: stretch;
}
.fido-authenticator-title{
    font-family: 'Bauhaus';
    font-style: normal;
    font-size: 80px;
    font-weight: 400;
    line-height: 100px;
    /* or 125% */
    letter-spacing: -0.25px;
    color: #144898;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
}

.img-svg img {
    max-width: 80%;
    height: auto;
}

.solution-info{
    left: 0px;
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 34px;
    color: #414141;
    text-align: justify;
}

.italic-underline {
    font-style: italic;
    text-decoration: underline;
}

.right-column {
    /*margin-top: 120px;
    background: url('../images/Demo.png') no-repeat top center;
    background-size: contain;
    */
}

.demo-form {
    position: relative; /* Reference point for the absolute-positioned elements */
    z-index: 2; /* Higher z-index ensures it stays on top */
    /*width: 100%;*/
    width: 384px;
    padding: 10px;
    margin-top: 120px;
    margin-left: 50px;
    background-color: rgba(255, 255, 255, 0.9); /* Transparent white background */
    border: 1px solid #BFBFBF;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.border-top-left{
    position: absolute;
    z-index: 1; /* Lower z-index to make it appear behind the form */
    top: 100px; /* Adjust to appear just outside the form */
    left: 30px;
    width: 63px;
    height: 63px;
    background: rgba(27, 96, 203, 0.08);
    border-radius: 10px;
}
.border-top-right{
    position: absolute;
    z-index: 1; /* Lower z-index to make it appear behind the form */
    top: 40px; /* Align to the top of the form */
    right: 0px; /* Align to the right of the form */
    width: 200px;
    height: 200px;
    background: rgba(27, 96, 203, 0.08);
    border-radius: 10px;
}
.border-bottom-right{
    position: absolute;
    z-index: 1; /* Lower z-index to make it appear behind the form */
    bottom: 0px; /* Align to the bottom of the form */
    right: 0px; /* Align to the right of the form */
    width: 135px;
    height: 135px;
    background: rgba(27, 96, 203, 0.08);
    border-radius: 10px;
}

.keypass-fido2-certification {
    width: 75%; /* Make image responsive */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Ensure it's a block-level element */
    /* margin: 0 auto; Center image horizontally */
    padding: 20px;
    background-color: white;
    box-shadow: 10px 10px 5px #aaaaaa;
    border-radius: 5px;
    margin-bottom: 50px;
}

.form-label {
    font-family: 'Public Sans';
    font-style: normal;
    font-weight: 400;
    /*font-size: 13px;*/
    line-height: 15px;
    color: rgba(47, 43, 61, 0.9);
}

.demo-form input[type="email"] {
    width: 364px;
}

:root {
    --demo-form-height: 300px; /* Adjust this value as needed */
    --border-size: 135px;
}

/*mobile devices screen -- Portrait Mode (Vertical Display)*/
@media (max-width: 480px) {

    nav ul li {
        margin: 10px 0;
    }

    article {
        width: 100%;
        margin: 10px 0;
    }

	header {
        font-size: 18px;
    }
    header .top-header {
        text-align: center;
        line-height: normal;
    }
    header .center-header .logo img {
        width: 100%; /* Make the logo responsive */
        height: auto;
    }
    header .center-header .hotline {
        display: none; /* Hide the hotline on mobile */
    }
    header .top-header .faq {
        display: none; /* Hide the faq on mobile */
    }

    .panel-div-double {
        flex-direction: column; /* Stack the columns vertically */
        height: auto;
        gap: 0;
    }

    .left-column, .right-column {
        width: 100%;
        padding: 10px;
        margin-top: 0;
        margin-left: 0;
    }

    .left-column {
        margin-bottom: 10px; /* Add some spacing below the left column */
    }

    /* Adjust padding and margins */
    .demo-form {
        width: 100%;
        padding: 10px;
        margin-top: 5px;
        margin-left: 0px;
    }
    .demo-form input[type="email"] {
        width: 100%; /* Make the email input field responsive */
    }
    .img-svg img {
        max-width: 60%;
        height: auto;
    }

    .border-top-left{
        position: absolute;
        z-index: 1; /* Lower z-index to make it appear behind the form */
        top: -32px; /* Adjust to appear just outside the form */
        left: -32px;
        width: 63px;
        height: 63px;
        background: rgba(27, 96, 203, 0.08);
        border-radius: 10px;
    }
    .border-top-right{
        position: absolute;
        z-index: 1; /* Lower z-index to make it appear behind the form */
        top: -32px; /* Align to the top of the form */
        width: 100px;
        height: 100px;
        background: rgba(27, 96, 203, 0.08);
        border-radius: 10px;
    }
    .border-bottom-right{
        position: absolute;
        z-index: 1; /* Lower z-index to make it appear behind the form */
        bottom: -32px;
        width: 135px;
        height: 135px;
        background: rgba(27, 96, 203, 0.08);
        border-radius: 10px;
    }

	.buttons {
        flex-direction: column;
    }

    .register-btn, .authenticate-btn {
        width: 100%; /* Make buttons take full width */
    }

    #status {
        width: 100%; /* Make the status message responsive */
    }

    .flag {
        padding: 10px 0;
        text-align: center;
    }

    .flag a img {
        width: 30px; /* Reduce flag image size */
    }

    .keypass-fido2-title {
        width: 100%; /* Make it fit within the screen */
        font-size: 40px; /* Adjust font size for mobile */
        line-height: 50px;
        margin-top: 10px;
        margin-bottom: 5px;
        text-align: left;
    }

    .fido-authenticator-title {
        width: 100%; /* Make it fit within the screen */
        font-size: 40px; /* Adjust font size for mobile */
        line-height: 50px;
        margin-top: 5px;
        margin-bottom: 5px;
        text-align: center;
    }

    .solution-info {
        width: 100%; /* Make it fit within the screen */
        font-size: 12px; /* Reduce text size */
        padding: 10px;
        height: auto; /* Allow for flexible height */
    }

    scrollable-content {
        overflow-x: auto; /* Horizontal scroll if content overflows */
        overflow-y: auto; /* Vertical scroll if content overflows */
        max-height: 150vh; /* Limit the height to viewport height if needed */
        -webkit-overflow-scrolling: touch; /* Enable smooth scrolling for iOS */
    }

    .keypass-fido2-certification{
        max-width: 70%; /* Ensure the image does not overflow */
        height: auto;
        padding: 20px;
        margin-bottom: 15px;
    }
}

@media (max-width: 1024px) and (orientation: landscape) {
    /* Styles for landscape mode on larger devices */
    nav ul li {
        margin: 10px 0;
    }

    article {
        width: 100%;
        margin: 10px 0;
    }

    header {
        font-size: 18px;
    }

    header .top-header {
        text-align: center;
        line-height: normal;
    }

    header .center-header .logo img {
        width: 80%; /* Adjust logo size for landscape */
        height: auto;
    }

    header .center-header .hotline,
    header .top-header .faq {
        display: none;
    }

    .panel-div-double {
        flex-direction: row; /* Switch to horizontal layout */
        gap: 20px;
    }

    .left-column, .right-column {
        width: 48%; /* Make columns share available space */
        margin: 0;
    }

    .demo-form {
        width: 100%;
        padding: 15px;
        margin-top: 100px;
        position: relative; /* Position relative to allow absolute positioning inside */
        /*height: var(--demo-form-height);*/
    }
    .demo-form input[type="email"] {
        width: 298px; /* Make the email input field responsive */
    }

    .img-svg img {
        max-width: 50%;
        height: auto;
    }

    .border-top-left {
        top: 80px;
    }

    .border-top-right {
        top: 30px;
        right: -80px;
    }

    .border-bottom-right {
        position: absolute;
        z-index: 1; /* Lower z-index to make it appear behind the form */
        top: calc(var(--demo-form-height));
        right: -80px;
        width: var(--border-size);
        height: var(--border-size);
        background:  rgba(27, 96, 203, 0.08);   /*#af7ac5 ;*/
        border-radius: 10px;
    }

    .buttons {
        flex-direction: row;
        gap: 10px;
    }

    .register-btn, .authenticate-btn {
        width: 298px;
    }

    #status {
        width: 100%;
    }

    .flag {
        padding: 10px 0;
        text-align: center;
    }

    .flag a img {
        width: 30px;
    }

    .keypass-fido2-title, .fido-authenticator-title {
        width: 100%;
        text-align: center;
    }
    .keypass-fido2-title {
        margin-bottom: 0px;
        font-size: 30px;
    }

    .solution-info {
        width: 100%;
        font-size: 13px;
        padding: 10px;
        height: auto;
    }

    .keypass-fido2-certification {
        max-width: 60%;
        height: auto;
        padding: 20px;
        margin-bottom: 15px;
    }
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .border-bottom-right {
    background: rgba(27, 96, 203, 0.08);    /*red;*/
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .demo-form {
      margin-left: 0px;
      width: 100%;
  }
  .demo-form input[type="email"] {
      width: 100%;
  }
  .register-btn, .authenticate-btn {
      width: 100%;
  }

  .border-top-left {
      margin-left: 0px;
      left: -5px;
  }
  .border-top-right {
      background: rgba(27, 96, 203, 0.08);    /*orange;*/

      left: calc(var(--demo-form-width) -  (var(--border-size)/2) - 60px);
  }
  .border-bottom-right {
      background: rgba(27, 96, 203, 0.08);    /*green;*/

      top: var(--demo-form-height);
      left: calc(var(--demo-form-width) -  (var(--border-size)/2) + 5px);
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .demo-form {
        margin-left: 0px;
        width: 100%;
    }
    .demo-form input[type="email"] {
        width: 100%;
    }
    .register-btn, .authenticate-btn {
        width: 100%;
    }

    .border-top-left {
        margin-left: 0px;
        left: -5px;
    }
    .border-top-right {
        background: rgba(27, 96, 203, 0.08);    /*blue;*/

        left: calc(var(--demo-form-width) -  150px);
    }
    .border-bottom-right {
        background: rgba(27, 96, 203, 0.08);    /*blue;*/

        top: var(--demo-form-height);
        left: calc(var(--demo-form-width) -  85px);
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .demo-form {
        margin-left: 50px;
        width: 100%;
    }
    .demo-form input[type="email"] {
        width: 100%;
    }
    .register-btn, .authenticate-btn {
        width: 100%;
    }

    .border-top-left {
        margin-left: 50px;
        left: -5px;
    }
    .border-top-right {
        background: rgba(27, 96, 203, 0.08);    /*orange;*/

        left: calc(var(--demo-form-width) -  (var(--border-size)/2) - 40px);
    }
    .border-bottom-right {
        background: rgba(27, 96, 203, 0.08);    /*orange;*/

        top: var(--demo-form-height);
        left: calc(var(--demo-form-width) -  (var(--border-size)/2) + 25px);
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .border-bottom-right {
    background: rgba(27, 96, 203, 0.08);    /*pink;*/
  }
}



footer{
	@include float(left,100%);
	background: #2e2e2e;
	color: white;
	padding: 95px 0 80px 0;
	.ft-left{
	    margin-top: -4px;
		>h4{
			font-size: 14px;
			font-weight: 600;
			margin-bottom: 35px;
		}
		p{
			font-size: 15px;
			letter-spacing: 0.5px;
			margin-bottom: 25px;
            margin-top: 25px;
		}

		.social-ft{
			@include float(left,100%);
			margin-top: 60px;
			a{
				color: white;
				margin-right: 35px;
				float: left;
				transition: 0.4s;
				width: 32px;
				height: 32px;
				border-radius: 50%;
				text-align: center;
				i{
					font-size: 18px;
					line-height: 32px;
				}
				&:hover{
					background: #37589b;
				}

			}
		}
	}
	.ft-right{
		margin-top: -4px;
		.link{
			@include float(left,100%);
			ul{
				li{
					float: left;
					a{
						padding: 0 30px;
						font-size: 15px;
						color: white;
						border-left: 1px solid #777777;
						font-weight: 600;
					}
					&:first-child{
						a{
							padding-left: 0;
							border-left: none;
						}
					}
				}
			}
		}
		.location{
			@include float(left,100%);
			h4{
				@include float(left,100%);
				font-size: 14px;
				font-weight: 400;
				text-transform: uppercase;
				margin-bottom: 5px;
				margin-top: 25px;
				i{
					margin-right: 10px;
				}
			}
			p{
				color: #c5c5c5;
				font-weight: 400;
				font-size: 14px;
				line-height: 27px;
				margin: 0;
				@include float(left,100%);
				a{
					color: #c5c5c5;
				}
				&.w50{
					width: auto;
				}
				i{
					margin-right: 12px;
					margin-top: 4px;
					float: left;
				}
			}
			span{
				float: left;
				padding: 0 50px;
				color: #777777;
			}
		}
	}

	.ft-center{
    		margin-top: -4px;
    		.link{
    			@include float(left,100%);
    			ul{
    				li{
    					float: center;
    					a{
    						padding: 0 30px;
    						font-size: 15px;
    						color: white;
    						border-left: 1px solid #777777;
    						font-weight: 600;
    					}
    					&:first-child{
    						a{
    							padding-left: 0;
    							border-left: none;
    						}
    					}
    				}
    			}
    		}
    		.location{
    			@include float(left,100%);
    			h4{
    				@include float(left,100%);
    				font-size: 14px;
    				font-weight: 400;
    				text-transform: uppercase;
    				margin-bottom: 5px;
    				margin-top: 25px;
    				i{
    					margin-right: 10px;
    				}
    			}
    			p{
    				color: #c5c5c5;
    				font-weight: 400;
    				font-size: 14px;
    				line-height: 27px;
    				margin: 0;
    				@include float(left,100%);
    				a{
    					color: #c5c5c5;
    				}
    				&.w50{
    					width: auto;
    				}
    				i{
    					margin-right: 12px;
    					margin-top: 4px;
    					float: left;
    				}
    			}
    			span{
    				float: center;
    				padding: 0 50px;
    				color: #777777;
    			}
    		}
    	}

}