html {
    font-size: 18px;
    height: 100%;
}

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

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

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

body {
    height: 80%;
}

.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

.full-height {
    height: 100%;
}


/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

.iodropdownBox {
    height: 30px;
}

.card {
    margin-top: 0px;
    border: 0px;
    background-color: white;
}

.card-body {
    padding-left: 0px;
}

.card-front {
    margin-top: 0px;
    border: 0px;
    background-color: white;
    color: black;
}

.card-shade {
    margin: 5px;
    border: 0px;
    background-color: white;
    color: black;
    border-radius: 20px;
    padding: 10px;
}

.valign {
    margin-top: auto;
    margin-bottom: auto;
    padding: 0px;
}

.table td, .table th {
    padding-left: 0px;
}

.nomargin {
    margin: 0px;
}

.row-fixedmargin {
    margin: 5px;
}

.card-warning {
    margin-top: 5px;
    border: 0px;
    background-color: orange;
}

.card-danger {
    margin-top: 5px;
    border: 0px;
    background-color: red;
}

.card-middle {
    margin-top: 0px;
    border: 0px;
    background-color: white;
}

.card-rear {
    margin-top: 0px;
    border: 0px;
    background-color: white;
}

.card-nav1 {
    margin-top: 5px;
    margin-bottom: 10px;
    border: none;
    background-color: #ffffff;
    border-radius: 20px;
}

.card-nav2 {
    margin-top: 5px;
    border: none;
    background-color: #ffffff;
    border-radius: 20px;
}

.card-nav3 {
    margin-top: 0px;
    border: 0px;
    background-color: #ffffff;
    border-radius: 20px;
}

.card-border {
    margin-top: 5px;
    padding: 10px;
    border: solid thin;
    background-color: #ffffff;
    border-radius: 5px;
}

.card-body-nopadding {
    padding: 0px;
}

.card-body-rear {
    padding-left: 0px;
    padding-right: 2px;
    padding-bottom: 0px;
    padding-top: 0px;
}

.col-nopadding {
    padding: 0px;
}

.nopadding {
    padding: 0px;
}

.border-card {
    margin-top: 0px;
    border: 1px solid #808080;
}

.icon-btn {
    width: 110px;
    height: 60px;
    padding: 5px;
}

a:hover {
    text-decoration: none;
}

.font-size20 {
    font-size: 20px;
}

.font-size24 {
    font-size: 24px;
}

.font-size30 {
    font-size: 30px;
}

.table-right {
    text-align: right;
}

.table-center {
    text-align: center;
}

.font-light {
    color: #ffffff !important;
}

.font-nav1 {
    color: #009DBC;
}

.backcolor-red {
    background-color: red;
}

.backcolor-green {
    background-color: green;
}

.backcolor-orange {
    background-color: orange;
}

.border-right {
    border-right: 1px solid;
}

.small-text {
    font-size: 14px;
    line-height: 20px;
}

.large-text {
    font-size: 24px;
}

.extra-large-text {
    font-size: 30px;
}

.container {
    max-width: 1240px;
}

.watermark {
    background-image: url(i/pattern-01.svg);
    background-repeat: no-repeat;
    background-position: right bottom;
}

.watermarkpensionpotential {
    background-image: url(i/pensionpotential.png);
    background-repeat: no-repeat;
    background-position: right bottom;
}

.transparent {
    background-color: transparent;
}

a.home {
    background: url(../i/psahomev2.png);
    width: 150px;
    text-indent: -9999px; /* hides the link text */
}

.blankbtn {
    border: none;
    background-color: white !important;
    color: black;
}

    .blankbtn:hover {
        color: blue;
    }


.box, .box_wideandtall, .box-red, .box-grey, .box-white, .box-white-wide, .box-white-red, .box-white-red-wide, .box-shallow, .box-red-shallow, .box-small, .box-lightblue, .box-wide, .box-red-wide, .box-lightblue-wide {
    position: relative;
    width: 160px;
    height: 160px;
    border: solid 1px #2D3081;
    overflow: hidden;
    white-space: nowrap;
    background-color: #2D3081;
    color: white;
    display: inline-flex;
    /*flex-direction: column; /* make main axis vertical */
    justify-content: center; /* center items vertically, in this case */
    align-items: center; /* center items horizontally, in this case */
    text-align: center;
    padding: 2px;
    font-size: 1.1rem;
}

.box_wideandtall {
    width: 300px;
    height: 250px;
    justify-content: center;
    margin: auto;
    display: grid;
    padding-top: 40px;
    padding-bottom: 40px;
}

.box:hover {
    background-color: lightblue;
    color: #2D3081;
}

.box-white:hover {
    background-color: lightblue;
    color: #2D3081;
}

.box-wide {
    width: 100%;
    height: 70px;
}

.box-red, .box-red-shallow, .box-red-wide {
    background-color: #AD0A40;
    color: white;
}

.box-grey {
    border: solid 2px #2D3081;
    background-color: lightgray;
    color: #2D3081 !important;
}

.box-white, .box-white-wide {
    border: solid 2px #2D3081;
    background-color: white;
    color: #2D3081 !important;
}

.box-white-wide {
    width: 100%;
    height: 70px;
}

.box-red-wide {
    width: 100%;
    height: 70px;
}

.box-lightblue, .box-lightblue-wide {
    border: solid 2px #009DBC;
    background-color: #009DBC;
    color: white !important;
}

.box-lightblue-wide {
    width: 100%;
    height: 70px;
}

.box-white-red, .box-white-red-wide {
    border: solid 2px #AD0A40;
    background-color: white;
    color: #AD0A40 !important;
}

.box-white-red-wide {
    width: 100%;
    height: 70px;
}

.box-shallow {
    height: 50px;
}

.box-red-shallow {
    height: 50px;
}


.box-small {
    height: 38px;
    width: 28px;
}

.box-child {
    background-color: darkgray;
    border: solid 1px darkgray;
}

.box-child-light {
    background-color: white;
    color: darkgray;
    border: solid 2px darkgray;
}

.btn-primary {
    background-color: #2D3081;
    border-color: #2D3081;
    border-radius: 0px;
}

.btn-outline-primary {
    border-radius: 0px;
    border-color: #2D3081;
    color: #2D3081;
}

.btn-danger {
    background-color: #AD0A40;
    border-color: #AD0A40;
    border-radius: 0px;
}

.btn-outline-danger {
    border-radius: 0px;
}

.min-table-row {
    height: 60px;
}

.form-control {
    border-radius: 0px;
    border-color: #2D3081;
}

.padding-top {
    padding-top: 15px;
}

.padding-left {
    padding-left: 15px;
}

.padding {
    padding: 5px;
}

h2 {
    padding-top: 10px !important;
}

.padding-left-right {
    padding-left: 30px;
    padding-right: 30px;
}


.MultiLineTextBox {
    height: 200px !important;
}

.red-text {
    color: red;
}

.progress-bar {
    display: none;
    padding: 5px;
    background-color: lightgray;
    color: white;
}


.ganavbaradmin {
    border: 0px;
    padding: 0px;
    padding-top: 100px;
    background-color: var(--green);
    color: white;
}


/*Green colour = #00A98C
Burnt yellow = #FF8500
Purple colour = #91388C*/

/*Dark grey PP colour = #2F3045 top meny bar
Beige PP colour = #DFCEA1
Lilac PP colour = #D7D5E3*/



.ganavbaritemadmin, .ganavbaritemadminchild {
    position: relative;
    margin-top: 0px;
    width: 100%;
    height: 50px;
    border: solid 1px var(--green);
    overflow: hidden;
    white-space: nowrap;
    background-color: var(--green);
    color: white;
    display: inline-flex;
    /*flex-direction: column; /* make main axis vertical */
    justify-content: left; /* center items horizontally, in this case */
    align-items: center; /* center items vertically, in this case */
    text-align: center;
    padding: 2px;
    padding-left: 30px;
    font-size: 1.3rem;
}

.ganavbaritemadminchild {
    padding-left: 90px;
    font-size: 1.2rem;
}

.ganavbaritemadmin_selected {
    background-color: #FF8500;
    border: solid 1px #FF8500;
}

.btn_pp_purple {
    background-color: var(--green);
    border-color: var(--green);
    color: white;
    width: 200px;
}

    .btn_pp_purple:hover {
        background-color: #99DCD1;
        border-color: #99DCD1;
        color: white;
    }

.navbarpp {
    background-color: #2F3045;
    color: white;
}


    .navbarpp .navbar-toggler-icon {
        display: inline-block;
        width: 1.5em;
        height: 1.5em;
        vertical-align: middle;
        content: "";
        background: no-repeat center center;
        background-size: 100% 100%;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
    }

    .navbarpp .navbar-toggle {
        background: none;
        border: none;
        color: #f8f8ff;
    }

    /*.navbarpp .navbar-toggle, span {
            background: #f8f8ff; 
        }
    */

    .navbarpp .navbar-toggler {
        color: #f8f8ff;
    }

    .navbarpp a:link, a:visited, a:active {
        /*color: #f8f8ff;*/
        background-color: transparent;
        text-decoration: none;
    }

.a-nav-pp {
    color: #f8f8ff !important;
}

.navbarpp a:hover {
    color: #FF8500;
    background-color: transparent;
    text-decoration: underline;
}

.navbarpp .navbar-toggle {
    color: #f8f8ff;
    background: yellow !important;
}


.ganavbaritem_unlocked {
    position: relative;
    margin-top: 0px;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    border: solid 1px var(--green);
    overflow: hidden;
    white-space: nowrap;
    background-color: var(--green);
    color: white;
    display: inline-flex;
    justify-content: center; /* center items vertically, in this case */
    align-items: center; /* center items horizontally, in this case */
    text-align: center;
    padding: 2px;
    font-size: 1.1rem;
}

.ganavbaritem_selected {
    position: relative;
    margin-top: 0px;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    border: solid 1px #FF8500;
    overflow: hidden;
    white-space: nowrap;
    background-color: #FF8500;
    color: white;
    display: inline-flex;
    /*flex-direction: column; /* make main axis vertical */
    justify-content: center; /* center items vertically, in this case */
    align-items: center; /* center items horizontally, in this case */
    text-align: center;
    padding: 2px;
    font-size: 1.1rem;
}

.ganavbaritem_locked {
    position: relative;
    margin-top: 0px;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    border: solid 1px red;
    overflow: hidden;
    white-space: nowrap;
    background-color: white;
    color: red;
    display: inline-flex;
    justify-content: center; /* center items vertically, in this case */
    align-items: center; /* center items horizontally, in this case */
    text-align: center;
    padding: 2px;
    font-size: 1.1rem;
}

.ganavbaritem_incomplete {
    position: relative;
    margin-top: 0px;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    border: solid 1px var(--green);
    overflow: hidden;
    white-space: nowrap;
    background-color: white;
    color: #2D3081;
    display: inline-flex;
    /*flex-direction: column; /* make main axis vertical */
    justify-content: center; /* center items vertically, in this case */
    align-items: center; /* center items horizontally, in this case */
    text-align: center;
    padding: 2px;
    font-size: 1.1rem;
}

@media screen and (max-width: 765px) {
    .ganavbaritem_incomplete {
        padding-top: 5px !important;
    }
    .ganavbaritem_locked {
        padding-top: 5px !important;
    }
    .ganavbaritem_unlocked {
        padding-top: 5px !important;
    }
    .ganavbaritem_selected {
        padding-top: 5px !important;
    }
}


.ganavbaritem_label {
    color: #2F3045;
}

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


.btn-group, .btn-group-vertical {
    display: block;
}

.center-image-ganavbaritem {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40px;
}

.field-validation-valid {
    display: none;
}

.validation-summary-valid {
    display: none;
}

.annuity_tab_background {
    background-color: #cccccc;
    padding: 5px;
    padding-left: 2px;
    padding-right: 0px;
    padding-bottom: 2px;
}

.annuity_tab {
    background-color: #ffffff;
    padding: 10px;
    padding-right: 0px;
}

.annuity_tab_button {
    position: relative;
    margin-top: 0px;
    margin-right: 3px;
    width: 300px;
    height: 50px;
    border: none;
    overflow: hidden;
    white-space: nowrap;
    background-color: gray;
    color: white;
    display: inline-flex;
    /*flex-direction: column; /* make main axis vertical */
    justify-content: center; /* center items vertically, in this case */
    align-items: center; /* center items horizontally, in this case */
    text-align: center;
    padding: 2px;
    font-size: 1.1rem;
    cursor: pointer;
}

/*annuity_tab_button:hover {
    cursor: pointer;
}*/

.annuity_tab_button_selected {
    position: relative;
    margin-top: 0px;
    margin-right: 3px;
    width: 300px;
    height: 50px;
    border: none;
    overflow: hidden;
    white-space: nowrap;
    background-color: white;
    color: black;
    display: inline-flex;
    /*flex-direction: column; /* make main axis vertical */
    justify-content: center; /* center items vertically, in this case */
    align-items: center; /* center items horizontally, in this case */
    text-align: center;
    padding: 2px;
    font-size: 1.1rem;
    cursor: pointer;
}


.annuity_tab_button_short {
    width: 160px;
}

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 0px;
}

    .fileUpload input.upload {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
        padding: 0;
        font-size: 20px;
        cursor: pointer;
        opacity: 0;
        filter: alpha(opacity=0);
    }


footer {
    position: relative;
    padding-top: 20px;
    padding-bottom: 0px;
    background-color: #efeef3;
    text-align: center;
    width: 100%;
}