﻿@charset "UTF-8";



html {

	display: flex;

    justify-content: center;

    align-items: flex-start;

    width: 100%;

    height: auto;

    min-height: 100vh;

    font-family: Arial, Helvetica, sans-serif;    

}

body {

    padding: 100px 5%;

    background-color: #ddd;

    max-width: 900px;

    width: 100%;

}

.pageTitle {

    display: flex;

    flex-direction: row;

    width: 100%;

    height: 70px;

    border-bottom: solid thin #777; 

    justify-content: flex-start;

}

.linkIcon {

    max-height: 50px;

    min-height: 50px;

    max-width: 50px;

    min-width: 50px;

    align-self: center;

}

.pageTitle span {

    width: calc(100% - 100px);

    text-align: center;

    justify-content: center;

    display: flex;

    align-items: center;

    font-size: 1.4em;

    font-weight: 600;

    color: #444;

}

.btnWrap {

	display: flex;

	flex-direction: row;

	width: 100%;

	align-items: center;

	justify-content: center;

	margin-top: 30px;

}

.btnWrap2 {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
}

.bigWrap {
    display: flex;
    flex-direction: column;
}

.btnBackToLogin {
    background: none;
    color: #555;
    border: thin solid #555;
    border-radius: 5px;
    width: 150px;
}

.btnToReset {
    background: none;
    color: #555;
    border: thin solid #555;
    border-radius: 5px;
    width: 250px;
}

.btnTokenInsert {
    color: red;
}

#CmdSubmitToken {
    color: white !important;
    background-color: #555 !important;
    width: 145px !important;
    text-align: center !important;
}

#CmdResetIt {
    color: white;
    background-color: #555;
    width: 290px;
    text-align: center;
}

.resetTitle {
    display: block;
    width: 100%;
    height: 70px;
    border-bottom: solid thin #777;
    text-align: center;
}

.cenText {
    text-align: center;
}

input {
    width: 100%;
    max-width: 400px;
    height: 30px;
    padding: 5px;
    -webkit-appearance: none;
    border-style: none;
    border: thin solid #888;
    margin: 5px 0px 20px 0px;
    text-align: center;
    font-size: 1em;
}

.btn {

	height: 33px;

	width: 120px;

	color: #FFF;

	border-width: 0px;

	border-radius: 5px;

	text-align: center;

	align-self: center;

	align-items: center;

	display: flex;

	flex-direction: row;

	margin: 0px 0px 0px -12px;

}

#btnRetrieve1, #btnReturn, #mileageFirst {

    background: none;

    color: #555;

    border: thin solid #555;

    border-radius: 5px;

}

#mileageFirst {

    height: 33px;

	text-align: center;

	align-self: center;

	align-items: center;

	display: flex;

	flex-direction: row;

    padding: 0px 5px 0px 5px;

    text-decoration: none;

}



.person {

	position: relative;

	height: 10px;

	width: 10px;

	margin: -5px 0px 0px -25px;

}

.person:after {

    content: '';

    display: block;

    position: absolute;

    box-sizing: border-box;

    top: 8px;

    height: 8px;

    width: 16px;

    border: 2px solid #fff;

    border-bottom: 0px;

    border-radius: 5px;

}

.person:before {

    content: '';

    display: block;

    box-sizing: border-box;

    position: absolute;

    top: 0;

    left: 3px;

    height: 10px;

    width: 10px;

    border-radius: 50%;

    border: 2px solid #fff;

}

.spyglass {

	position: relative;

    display: block;

    border-radius: 30px;

    height: 6px;

    width: 6px;

    border: 2px solid #fff;

    margin: 0px 0px 0px -20px;

}

 .spyglass:after {

    content: "";

    height: 2px;

    width: 6px;

    background: #fff;

    position: absolute;

    top:7px;

    left:5px;

    -webkit-transform: rotate(45deg);

     -moz-transform: rotate(45deg);

      -ms-transform: rotate(45deg);

       -o-transform: rotate(45deg);

	 	transform: rotate(45deg);

}

.checkmark {

	display: block;

	width: 3px;

	height: 6px;

	border: solid #FFF;

	border-width: 0px 2px 2px 0px;

	transform: rotate(45deg);

	margin-left: -20px;

}

.equal {

	display: block;

	width: 9px;

	height: 3px;

	border: solid #FFF;

	border-width: 2px 0px 2px 0px;

	transform: rotate(0deg);

	margin-left: -20px;

}

.wrap {

    display: flex;

    flex-direction: column;

    align-items: center;

}