/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

:root {
  --bg-color-dark: #D6DAE5;
  --bg-color-primary: #F1F5FF;
  --bg-color-secondary: #E8EEF7;
  --color-white: #FFFFFF;
  --box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
  --default-font: "Source Sans Pro";
  --font-color-black: #1f3d67;
  --font-color-dark-blue: #5166A2;
  --font-size-normal: calc(0.8625rem + 1vw);
  --font-size-small: calc(1rem * 17 / 18); /* 17px */
  --font-size-tiny: calc(1rem * 16 / 24);
  --semi-bold: 600;
  --modal-overlay-background: rgba(47, 55, 75, 0.7);

  --button-bg-color: #305688;
  --button-font-size: calc(1rem * 20 / 18); /* 20px */
  --button-shadow: 2px 2px 4px rgb(140 153 203 / 25%);

  --separator-color: #C3D2EB;
  --password-border-color: #7A9DCC;

  --error-status: #F71A35;
  --color-bleepish: #ED225C;
}

:focus {
	outline: none;
}

html, body {
	position: fixed;
	overflow: hidden;
}

html {
	width: 100%;
	height: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	font-family: var(--default-font);
	font-size: var(--font-size-normal);
	letter-spacing: 0.5px;
}

*, *:before, *:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}

body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0 1.5rem;
	overflow-y: auto;
	background: var(--bg-color-dark);
	color: var(--font-color-black);
	font-family: var(--default-font);
}

.icon {
	fill: currentColor;
	width: 1em;
	height: 1em;
	vertical-align: text-top;
	overflow: hidden;
}

.view-container {
	max-width: 35rem;
	margin: 0 auto;
}

.bleepa-logo-section {
	display: flex;
	flex: 1;
	justify-content: center;
	position: relative;
	width: 16rem;
	margin: 1rem auto;
}

	.bleepa-logo-section img {
		width: 11.5rem;
	}

.rounded-main-element {
	position: relative;
	border-radius: 1em;
	box-shadow: var(--box-shadow);
	background-color: var(--bg-color-primary);
	padding: 1rem;
	margin-bottom: 1.2rem;
	font-size: 0.8rem;
}

	.rounded-main-element--opacity {
		background-color: var(--bg-color-secondary);
	}

	.rounded-main-element--space {
		padding: 1.5rem 1rem 2rem;
	}

.header-literal {
	display: flex;
	justify-content: center;
	margin: 0 auto 1.5rem;
	text-align: center;
	font-size: 1.4rem;
	font-weight: var(--semi-bold);
}

	.header-literal--secondary {
		font-size: 1.2rem;
    	margin-bottom: 1rem;
	}

.description {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.1rem;
	margin-bottom: 1rem;
	text-align: left;
}

.description-header {
	margin-bottom: 0.8rem;
}

.pin-section {
	position: relative;
	margin: 0 auto 1rem;
	width: 18rem;
}

.password-inputs-group {
	display: flex;
    justify-content: center;
    margin-bottom: 0.4rem;
}
    .password-inputs-group--error .password-input {
    	border-color: var(--error-status);
    }

.password-input {
	height: 3.7rem;
	width: 2.6rem;
    margin: 0 0.2rem;
	font-weight: var(--semi-bold);
	font-size: 2rem;
	text-align: center;
	background-color: var(--color-white);
	border: 1px solid var(--password-border-color);
	border-radius: 0.3rem;
	color: var(--font-color-dark-blue);
	padding: 0;
	user-select: none;
	caret-color: transparent;
}

	.password-input:focus {
		border-width: 2px;
		border-color: var(--color-bleepish);
	}

    .password-input:first-of-type {
        margin-left: 0;
    }

    .password-input:last-child {
        margin-right: 0;
    }

.error-status {
    display: none;
    font-size: var(--font-size-tiny);
    color: var(--error-status);
}

.handle-pin-code-buttons {
	position: relative;
	margin-top: 1rem;
}

.simple-button {
    color: var(--font-color-dark-blue);
    cursor: pointer;
    text-decoration: underline;
}

.paste-to-clipboard {
    position: absolute;
	right: 0;
}

.without-pin-code {
    position: absolute;
    margin-top: 2rem;
}

.organisation-choice {
	position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 17rem;
    height: 1rem;
    margin: auto;
	text-align: center;
}

.action-buttons {
    display: flex;
    flex-direction: column;
	margin-top: 7rem;
}

.button {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 1.8rem;
	font-weight: var(--semi-bold);
	text-decoration: none;
	border: 1px solid var(--button-bg-color);
	border-radius: 0.4rem;
	box-shadow: var(--button-shadow);
	margin: 0.8rem auto;
	cursor: pointer;
	width: 65%;
	color: var(--color-white);
	background: var(--button-bg-color);
}

/* MESSAGE BOX */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    z-index: 1;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: var(--modal-overlay-background);
    cursor: default;
}

.message-box {
	position: relative;
	width: 50%;    
	top: 40%;
	background-color: var(--color-white);
	margin: auto;
	user-select: none;
	color: var(--color-dark);
	transform: translateY(-50%);
	box-shadow: var(--modal-shadow);
	cursor: auto;
	padding: 1.5rem 1rem 1rem;
}

.message-box-heading {
	min-height: 1.25em;
	text-align: center;
}

.message-box-content {
	padding: 0 2rem;
	line-height: 1.2rem;
	margin-top: 1.5em;
	margin-bottom: 1.75em;
}

.message-box-title {
	font-size: var(--font-size-small);
	font-weight: var(--semi-bold);
}

.close-icon {
	position: absolute;
	top: 1.2rem;
	right: 2.5rem;
	cursor: pointer;
}

.message-box-buttons {
	border-top: 0.01rem solid var(--separator-color);
	display: flex;
	justify-content: space-between;
	padding: 0 0.25em;
}

.message-box--single {
	justify-content: flex-end;
}

.message-box-button {
	color: var(--color-accent-800);
	padding: 1rem 2rem 0;
	cursor: pointer;
}

.disabled {
	user-select: none;
	pointer-events: none;;
	cursor: default;
	opacity: 0.5;
}

.font-bold {
	font-weight: var(--semi-bold);
}

.block-separator {
	display: flex;
	align-items: center;
	margin-bottom: 1rem;
}

    .block-separator .line {
		width: 100%;
		height: 1px;
		background: var(--separator-color);  
		margin-left: 1rem;
    }

@media (min-width: 667px) {
    .pin-section {
        width: 15.5rem;
    }

	.password-input {		
	    margin: 0 0.3rem;
		width: 2.1rem;
    	height: 3.3rem;
    }

    .rounded-main-element {
    	padding: 1.5rem 4rem;	
	}
}

@media (min-width: 767px) {
	.rounded-main-element {
    	padding: 2rem 5rem;	
	}

	.message-box {
		font-size: var(--font-size-small);
		padding: 1rem 0.5rem;
		width: 100%;
	}
}

@media (max-width: 415px) {
    .pin-section {
        width: 16rem;
    }

    .password-input {
        width: 2.3rem;
    }
}

@media (orientation: landscape) {
    :root {
        --main-list-padding: 0 5rem;
    }
}

@media (orientation: landscape) and (max-width: 991px) {
    :root {
        --main-list-padding: 0 3rem;
    }
}

@media (orientation: landscape) and (max-width: 1440px) {
    :root {
        --font-size-normal: var(--base-font-px);
    }
}

@media (orientation: landscape) and (min-width: 1441px) {
    :root {
        --font-size-normal: calc(0.8625rem + 0.1vw);
    }
}

@media (orientation: landscape) and (min-width: 1920px) {
    :root {
        --font-size-normal: calc(0.8625rem + 0.3vw);
    }
}