html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/*Added form Delete Modal*/
.modal-new {
    display: none;
    position: fixed;
    z-index: 1;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
    padding-top: 60px;
}

.modal-content-new {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 65%;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.button-container {
    display: flex;
}

body {
    font-family: "Lato", sans-serif;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    color: #0077cc;
    width: 100%;
}

.headerLeft{
    display: flex;
    align-items: center;
}

.headerRight{
    margin-left: auto;
}

/* Fixed sidenav, full height */
.SideNavBar {
    width: 200px;
    top: 0;
    background-color: aliceblue;
    border-radius: 10px;
}

/* Style the sidenav links and the dropdown button */
.SideNavBar a, .dropdown-btn {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 16px;
    display: block;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    outline: none;
    color: #0077cc;
    white-space: pre-line;
}

/* On mouse-over */
.SideNavBar a:hover, .dropdown-btn:hover {
    color: darkred;
}

/* Add an active class to the active dropdown button */
.active {
    background-color: aliceblue;
    color: #0077cc;
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
    display: none;
    background-color: aliceblue;
    padding-left: 8px;
    color: #0077cc;
}

/* Optional: Style the caret down icon */
.fa-caret-down {
    float: right;
    padding-right: 8px;
}

.parent {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.main {
    display: flex;
    flex-grow: 1;
}

.content {
    flex-grow: 1;
    border-radius: 10px;
    flex-direction: row;
}

/* --------- Non-flexbox related styles --------- */
.child {
    display: flex;
    margin: 1px;
    background-color: white;
    border-radius: 10px;
    border: 1px solid black;
}

body {
    background-color: white;
    font-family: Verdana;
}
.PageContent {
    position: relative;
    width: 100%;
    flex-direction: row;
}

.PageForm {
    margin-bottom: 10px;
    width: 100%;
}

.LoginTitle{
    width:100%;
    text-align: left;
}

.LoginLabel{
    width: 125px;
    text-align: right;
}

.LoginField {
    width: 300px;
    margin-left: 5px;
}

.LoginEmail {
    width: 300px;
}

.LoginId{
    width: 300px;
}

.RecordEdit {
    width: 100%;
    align-content: flex-start;
    align-items: flex-start;
}

.ApiRequestLabel {
    width: 125px;
    text-align: right;
}

.ApiRequestField {
    width: 300px;
    margin-left: 5px;
}

.ApiRequestNote {
    width: 65%;
    height: 200px;
    overflow: auto;
    text-align: left;
    vertical-align: text-top;
    margin-left: 5px;
}

.ApiRequestText {
    width: 65%;
    height: 200px;
    overflow: auto;
    text-align: left;
    vertical-align: text-top;
    margin-left: 5px;
}

.AppSourceLabel {
    width: 125px;
    text-align: right;
}

.AppSourceField {
    width: 300px;
    margin-left: 5px;
}

.ChangeLabel {
    width: 125px;
    text-align: right;
}

.ChangeField {
    width: 300px;
    margin-left: 5px;
}

.ChildLabel {
    width: 125px;
    text-align: right;
}

.ChildField {
    width: 300px;
    margin-left: 5px;
}

.ChildCertDDL {
    width: 300px;
    margin-left: 5px;
    height: 37px;
}

.ChildStatusDDL {
    width: 350px;
    margin-left: 5px;
    height: 37px;
}

.ChildSgliDDL {
    width: 300px;
    margin-left: 5px;
    height: 37px;
}

.ChildDeathGratuityDDL {
    width: 300px;
    margin-left: 5px;
    height: 37px;
}

.ChildStatusLabel {
    width: 125px;
    text-align: right;
}

.ChildStatusField {
    width: 300px;
    margin-left: 5px;
}

.CivilServiceLabel {
    width: 125px;
    text-align: right;
}

.CivilServiceField {
    width: 300px;
    margin-left: 5px;
}

.ErrorContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    height: 100%;
    width: 100%;
}

.ErrorContent {
    margin: 20px;
}

.DualSpouseLabel {
    width: 200px;
    text-align: right;
}

.DualSpouseField {
    width: 300px;
    margin-left: 5px;
}

.DualSpouseBranchDDL {
    width: 400px;
    margin-left: 5px;
    height: 37px;
}

.DualSpouseRankDDL {
    width: 300px;
    margin-left: 5px;
    height: 37px;
}

.DualSpouseSbpOptionDDL {
    width: 300px;
    margin-left: 5px;
    height: 37px;
}

.DualSpouseSvcConDDL {
    width: 100px;
    margin-left: 5px;
    height: 37px;
}

.MemberLabel {
    width: 200px;
    text-align: right;
}

.MemberField {
    width: 300px;
    margin-left: 5px;
}

.MemberFieldDisabled {
    width: 300px;
    margin-left: 5px;
    background-color: #e9ecef; /* Athens Gray */
}

.MemberSourceDDL {
    width: 400px;
    margin-left: 5px;
    height: 37px;
}

.MilitaryBranchLabel {
    width: 125px;
    text-align: right;
}

.MilitaryBranchField {
    width: 300px;
    margin-left: 5px;
}

.MilitaryComponentLabel {
    width: 125px;
    text-align: right;
}

.MilitaryComponentField {
    width: 300px;
    margin-left: 5px;
}

.MilitaryInfoLabel {
    width: 200px;
    text-align: right;
}

.MilitaryInfoField {
    width: 300px;
    margin-left: 5px;
}

.MilitaryInfoSexDDL {
    width: 100px;
    margin-left: 5px;
}

.MilitaryInfoBranchDDL {
    width: 400px;
    margin-left: 5px;
    height: 37px;
}

.MilitaryInfoComponentDDL {
    width: 300px;
    margin-left: 5px;
    height: 37px;
}

.MilitaryInfoStatusDDL {
    width: 300px;
    margin-left: 5px;
    height: 37px;
}

.MilitaryInfoRankDDL {
    width: 300px;
    margin-left: 5px;
    height: 37px;
}

.MilitaryInfoAnnuityDDL {
    width: 300px;
    margin-left: 5px;
    height: 37px;
}

.MilitaryInfoYesNoDDL {
    width: 100px;
    margin-left: 5px;
    height: 37px;
}

.MilitaryInfoDisabilityPctDDL {
    width: 100px;
    margin-left: 5px;
    height: 37px;
}

.MilitaryInfoSgliDDL {
    width: 300px;
    margin-left: 5px;
    height: 37px;
}

.MilitaryInfoDeathGratuityDDL {
    width: 300px;
    margin-left: 5px;
    height: 37px;
}

.MilPayGradeLabel {
    width: 125px;
    text-align: right;
}

.MilPayGradeField {
    width: 300px;
    margin-left: 5px;
}

.MilStatusLabel {
    width: 125px;
    text-align: right;
}

.MilStatusField {
    width: 300px;
    margin-left: 5px;
}

.OsbrButton {
    margin-left: 10px;
}

.OsbrButtonDiv {
}

.OsbrLabel {
    margin-top: 5px;
    margin-left: 10px;
}

.OsbrHouseholdDDL {
    margin-left: 5px;
    width: 50px;
    height: 37px;
}

.NoteLabel {
    width: 125px;
    text-align: right;
}

.NoteField {
    width: 300px;
    margin-left: 5px;
}

.NoteTextLabel {
    width: 125px;
    text-align: right;
    vertical-align: top;
}

.TextEditfield {
    display: flex;
    align-items: self-start;
    vertical-align: top;
}

.NoteText {
    width: 65%;
    height: 200px;
    overflow: auto;
    text-align: left;
    vertical-align: text-top;
    margin-left: 5px;
}

.PolicyLabel {
    width: 125px;
    text-align: right;
}

.PolicyField {
    width: 300px;
}

.PolicyCodeDDL {
    width: 475px;
    height: 37px;
}

.PolicyTypeDDL {
    width: 300px;
    height: 37px;
}

.PolicyCodeLabel {
    width: 125px;
    text-align: right;
}

.PolicyCodeField {
    width: 300px;
    margin-left: 5px;
}

.PolicyTypeLabel {
    width: 125px;
    text-align: right;
}

.PolicyTypeField {
    width: 300px;
    margin-left: 5px;
}

.RankLabel {
    width: 125px;
    text-align: right;
}

.RankField {
    width: 300px;
    margin-left: 5px;
}

.RankBranchDDL {
    width: 300px;
    margin-left: 5px;
    height: 37px;
}

.RankPayGradeDDL {
    width: 350px;
    margin-left: 5px;
    height: 37px;
}

.RoleLabel {
    width: 125px;
    text-align: right;
}

.RoleField {
    width: 300px;
    margin-left: 5px;
}

.SBPOptionLabel {
    width: 125px;
    text-align: right;
}

.SBPOptionField {
    width: 300px;
    margin-left: 5px;
}

.SocialSecurityInfoLabel {
    width: 200px;
    text-align: right;
}

.SocialSecurityInfoField {
    width: 300px;
    margin-left: 5px;
}

.SocialSecurityInfoDDL {
    width: 350px;
    margin-left: 5px;
    height: 37px;
}

.SocialSecurityInfoStatusDDL {
    width: 400px;
    margin-left: 5px;
    height: 37px;
}

.SocialSecurityInfoTypeDDL {
    width: 300px;
    margin-left: 5px;
    height: 37px;
}


.SocialSecurityStatusLabel {
    width: 125px;
    text-align: right;
}

.SocialSecurityStatusField {
    width: 300px;
    margin-left: 5px;
}

.SocSecIndexTypeLabel {
    width: 125px;
    text-align: right;
}

.SocSecIndexTypeField {
    width: 300px;
    margin-left: 5px;
}

.SpouseLabel {
    width: 200px;
    text-align: right;
}

.SpouseField {
    width: 300px;
    margin-left: 5px;
}

.SpouseTypeDDL {
    width: 300px;
    margin-left: 5px;
    height: 37px;
}

.SpouseTitleDDL {
    width: 300px;
    margin-left: 5px;
    height: 37px;
}

.SpouseCertDDL {
    width: 300px;
    margin-left: 5px;
    height: 37px;
}

.SpouseSexDDL {
    width: 300px;
    margin-left: 5px;
    height: 37px;
}

.SpouseStatusDDL {
    width: 300px;
    margin-left: 5px;
    height: 37px;
}

.SpouseCsrsDDL {
    width: 300px;
    margin-left: 5px;
    height: 37px;
}

.SpouseSgliDDL {
    width: 300px;
    margin-left: 5px;
    height: 37px;
}

.SpouseDeathGratuityDDL {
    width: 300px;
    margin-left: 5px;
    height: 37px;
}

.SpouseStatusLabel {
    width: 125px;
    text-align: right;
}

.SpouseStatusField {
    width: 300px;
    margin-left: 5px;
}

.SpouseTypeLabel {
    width: 125px;
    text-align: right;
}

.SpouseTypeField {
    width: 300px;
    margin-left: 5px;
}

.TraceLabel {
    width: 125px;
    text-align: right;
}

.TraceField {
    width: 300px;
    margin-left: 5px;
}

.TraceText {
    width: 65%;
    height: 400px;
    overflow: auto;
    text-align: left;
    vertical-align: text-top;
    margin-left: 5px;
}

.UserLabel {
    width: 125px;
    text-align: right;
}

.UserField {
    width: 300px;
    margin-left: 5px;
}

.UserRoleLabel {
    width: 125px;
    text-align: right;
}

.UserRoleField {
    width: 300px;
    margin-left: 5px;
}

.ContactInfoLabel {
    width: 125px;
    text-align: right;
}

.ContactInfoLabelHdr {
    width: 300px;
    text-align: right;
}

.ContactInfoLabelMsg {
    width: 300px;
    text-align: right;
}


.ContactInfoField {
    width: 300px;
    margin-left: 5px;
}

.AddressBlock {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    box-sizing: border-box;
}

.FastAdminbody {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.wrapper {
    display: flex;
}

.wrapper > div {
    text-align: left;
}

.col-1 {
    width: 10%;
}

.col-2 {
    padding-top: 4px;
    width: 30%;
}

.col-3 {
    padding-top: 4px;
    flex: 1; /* takes remaining space */
}