/* 2 Password visibility icon*/

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

.input-icons i {
    position: relative;
}

.icon {
    padding: 10px;
    min-width: 50px;
    text-align: center;   
}

/*Password progress bar*/

*:focus {
    outline-style: none;
}

input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 6px;
    border: 1px solid #ddd;
}

    input[type="button"],
    input[type="submit"] {
        width: unset;
    }

#progress {
    height: 5px;
    width: 100%;
    margin-top: 0.6em;
}

#progress-bar {
    width: 0%;
    height: 100%;
    transition: width 500ms linear;
    border-radius: 30px;
}

.progress-bar-danger {
    background: #d00;
}

.progress-bar-warning {
    background: #f50;
}

.progress-bar-success {
    background: #080;
}

/* ------------------------------------------------------------ Pre Login */

.LoginHeader {


}

    .LoginHeader .navbar-brand {
        margin: 0 auto;
    }


.PreLoginHeader {
    margin-bottom: 50px;
}

.LoginBox > h1 {
    text-align: center;
}

.PreLoginHeader .navbar .container a {
    /*margin-left: auto;*/
    margin-right: auto;
}

.PreLoginHeader .navbar  {
    padding:20px;
}

.PreLoginHeader .navbar-brand {
    margin-top: 0;
    margin-bottom: 0;
}

header.PreLoginHeader ~ .PageFooter .FooterElementsContainer {
    display: none;
}

/* ------------------------------------------------------------ Header */
.Header > div {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 50px;
    line-height: 1em;
}

.Header > .container > div {
    margin: 0 auto;
    padding-left: 73px;
}

/* ------------------------------------------------------------ Login */
.LoginLogo {
    width: 400px;
    height: 145px;
    max-width: 100%;
    margin: 4vh auto 0 auto;
    background-size: contain;
    background-repeat: no-repeat;
}

.LoginHeader.Header a.LightModeToggle {
    margin-right: 0;
}

.LoginBox.ContentPanel,
.LoginBoxWide.ContentPanel {
    padding: 30px;
}

.LoginBox {
    width: 400px;
    max-width: 100%;
    margin: 0 auto 30px auto;
}

.LoginBoxWide {
    width: 600px;
    max-width: 100%;
    margin: 15px auto 15px auto;
}

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

body {
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    min-width: 400px;
    background-image: none;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.LinkBlock {
    display: block;
    height: 100%;
    width: 100%;
}

.InlineBlock {
    display: inline-block
}

.Hide {
    display: none;
}

@media screen and (max-width: 1199px) {
    .container {
        max-width: 100%;
    }
}

@media screen and (max-width: 991px) {
    .container {
        max-width: 100%;
    }
}

@media screen and (max-width: 767px) {
    .container {
        max-width: 100%;
    }
}

/* ------------------------------------------------------------ Show/ Hide Desktop/mobile */
@media screen and (max-width: 992px) {
    .DesktopOnly {
        display: none;
    }
}

@media screen and (min-width: 993px) {
    .MobileOnly {
        display: none;
    }
}

/* ------------------------------------------------------------ Widths */
.Width120px {
    width: 120px;
}

.MaxWidth60px {
    max-width: 60px;
}

.MaxWidth80px {
    max-width: 80px;
}

.Width100px {
    max-width: 100px!important;
}

.WidthAuto {
    width: auto;
}

.MaxWidth175px {
    max-width: 175px;
}

/* ------------------------------------------------------------Alignments */
table.VerticalAlignMiddle td {
    vertical-align: middle !important;
}


/* ------------------------------------------------------------ Typography */
h1 {
    font-weight: 600;
    font-size: 1.7rem;
    line-height: 2.23rem;
    margin-bottom: 15px;
}

h2 {
    font-weight: 600;
    font-size: 1.7rem;
    line-height: 1.8rem;
    margin-bottom: 10px;
}

h3 {
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.6rem;
    margin-bottom: 10px;
}

h4 {
    font-weight: 600;
    font-size: 1.2rem;
    line-height: 1.5rem;
    margin-bottom: 8px;
}

    h4.Nested {
        margin-bottom: 0;
    }

h5 {
    font-weight: 800;
    font-size: 1.05rem;
    line-height: 1.5rem;
    margin-bottom: 0px;
}

p {
    font-size: 1em;
    line-height: 1.3em;
    margin-bottom: 8px;
}

.TextSmall {
    font-size: 0.8em;
    line-height: 1em;
}
/* ------------------------------------------------------------ Links */
a:link,
a:visited {
    text-underline-offset: 4px;
}

    a:link > i {
        text-decoration: underline;
    }

.Header a:link > i {
    text-decoration: none;
}

/* ------------------------------------------------------------ Scheme Selector */
.SchemeSelector {
    color: #2e2e2e;
    background-color: white;
}

/* ------------------------------------------------------------ Header */
.Header > div {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 50px;
    line-height: 1em;
}

    .Header > div > a {
       
    }

    /* ------------------------------------------------------------ Header Icons */
    .Header a i.fa-solid {
        font-size: 24px;
    }

    /* Toggle Icon */
    .Header a .fa-solid.fa-toggle-on,
    .Header a .fa-solid.fa-toggle-off {
        font-size: 33px;
    }

    /* Light Mode Toggle Icon */
    .Header a.LightModeToggle {
        margin-left: 10px;
    }

    /* Dark Mode Toggle Icon */
    .Header a.DarkModeToggle {
        margin-right: 13px;
        transform: rotate(-180deg);
    }

    /* Inset Sun Icon */
    .Header a i.fa-solid.SunIcon {
        position: relative;
        left: -34px;
        font-size: 13px;
        top: -8px;
    }

    /*  Moon Icon */
    .Header a i.fa-solid.MoonIcon {
        left: -31px;
    }

    /* Inset Sun Icon */
    .Header a i.fa-solid.SunIcon {
        left: -34px;
    }

    /*  Moon Icon */
    .Header a i.fa-solid.MoonIcon,
    .Header a i.fa-solid.SunIcon {
        position: relative;
        font-size: 13px;
        top: -7px;
    }

    /* Message Icon */
    .Header .fa-solid.fa-message {
        margin-right: -8px;
    }

    /* Message Link */
    .Header .MessagesLink {
        width: 23px;
    }
/* ------------------------------------------------------------ Header */
.HeaderMessageNumber {
    display: inline-block;
    position: relative;
    top: -17px;
    left: -15px;
}

    .HeaderMessageNumber > span {
        display: inline-block;
        position: absolute;
        text-decoration: none;
        font-size: 12px;
    }

/* ------------------------------------------------------------ Logo and Menu */
body > header.LogoAndMenu {
    margin-bottom: 15px;
}

/* ------------------------------------------------------------ Logo */
.navbar {
    padding: 20px;
}

.navbar-brand {
    background-repeat: no-repeat;
    background-size: contain;
}

@media screen and (max-width: 767px) {
    .navbar-brand {
        margin: 0 auto;
    }
}

/* ------------------------------------------------------------ Main Menu */
header > .navbar.MainMenu .navbar-nav .nav-link {
    font-size: 1.1rem;
    padding-right: 20px;
    font-weight: 600;
}

header > .navbar.MainMenu .navbar-nav .nav-item {
    border-top-width: 0;
}

header > .navbar.MainMenu .navbar-nav .dropdown-item {
    transition: all 0.1s ease-in-out;
}

@media screen and (max-width: 767px) {
    header > .navbar.MainMenu .navbar-nav {
        padding: 10px 0;
    }


    header > .navbar.MainMenu .navbar-collapse {
        margin-top: 12px;
        border-style: solid;
    }

    header > .navbar.MainMenu .navbar-nav .nav-link {
        font-size: 1.2rem;
        padding: 12px 15px 12px 15px;
    }

    header > .navbar.MainMenu .navbar-nav li:last-child .dropdown-menu {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}

/* ------------------------------------------------------------ Dropdown Menu */
header > .navbar.MainMenu .dropdown-menu {
    border-width: 0;
    box-shadow: 0px 0px 5px 0px rgb(0, 0, 0, 0.2);
}

@media screen and (min-width: 768px) {
    header > .navbar.MainMenu .dropdown:hover .dropdown-menu {
        display: block;
        margin: 0;
    }
}

@media screen and (min-width: 768px) {
    header > .navbar.MainMenu .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}

@media screen and (max-width: 767px) {
    header > .navbar.MainMenu .dropdown-menu {
        border-radius: 0
    }

        header > .navbar.MainMenu .dropdown-menu .dropdown-item {
            padding: .5rem .5rem .5rem .5rem;
        }
}

header > .navbar.MainMenu .navbar-nav .nav-item .dropdown-item {
    padding: 6px 15px 4px 15px;
}

/* ------------------------------------------------------------ Main Menu Burger Toggle */
.NavToggle {
    border-width: 0;
    background-color: transparent;
    font-size: 25px;
    padding: 0;
    margin: 0;
    min-width: 0;
}

@media screen and (min-width: 768px) {
    .NavToggle {
        display: none;
    }
}

/* ------------------------------------------------------------ Main Content */
.MainContent {
    flex: 1 0 auto;
}

/* ------------------------------------------------------------ Footer */
body > .PageFooter {
    width: 100%;
    flex-shrink: 0;
    padding: 15px 0 15px 0;
    min-height: 92px;
}

.FooterElementsContainer {
    /*display: none;*/
    text-align:center;
}

.FooterElementsContainer a {
    text-decoration: none
}

/* ------------------------------------------------------------ Buttons  */
button,
.btn,
.LinkButton {
    min-width: 100px;
    margin-bottom: 10px;
    margin-right: 10px;
    border-style: solid;
}

    button:focus,
    .btn:focus,
    .LinkButton:focus {
        box-shadow: none;
    }

    button.btn.Small,
    button.Small,
    .btn.Small,
    .LinkButton.Small {
        min-width: 70px;
    }

    .btn.disabled,
    .btn:disabled,
    fieldset:disabled .btn {
        opacity: 0.6;
    }

/* ------------------------------------------------------------ Reveal Buttons  */
    button.reveal,
    .btn.reveal,
    .LinkButton.reveal {
        min-width: 25px;
        margin-right: 0;
        margin-left: 10px;
        padding-left: 0;
        padding-right: 0;
    }

/* ------------------------------------------------------------ Link Buttons  */
.LinkButton {
    display: inline-block;
    text-decoration: none;
}

/* ------------------------------------------------------------ Modal Buttons  */
.ModalCloseIcon {
    font-size: 30px;
}

a.ModalCloseIcon:link > i {
    text-decoration: none !important;
}

/* ------------------------------------------------------------ Carousel */
.CarouselContainer {
    width: 100%;
}

.Carousel {
    width: 100%;
    min-height: 276px;
}


    .Carousel.ContentPanel {
        padding: 0;
    }

        .Carousel.ContentPanel h1 {
            margin-top: 18px;
        }

@media screen and (max-width: 991px) {
    .CarouselContainer {
        display: none;
    }
}

/* ------------------------------------------------------------ Welcome Panel */
.WelcomePanel {
    padding: 10px 0 30px 0;
    text-align: center;
    font-size: 1.1em;
}

@media screen and (max-width: 991px) {
}

/* ------------------------------------------------------------ Show More */
.DashboardTiles .TileMore {
    text-align: right;
    max-height: 26px;
    top: -4px;
    position: relative;
}

    .DashboardTiles .TileMore a {
        position: relative;
        font-size: 1.35rem;
    }

        .DashboardTiles .TileMore a .fa-solid {
            font-weight: 600;
        }


        .DashboardTiles .TileMore a .fa-arrow-up,
        .DashboardTiles .TileMore a .fa-arrow-down {
            font-size: 1.6rem;
            top: -8px;
            position: relative;
        }

        .DashboardTiles .TileMore a:hover {
            cursor: pointer;
        }
/* ------------------------------------------------------------ Dashboard Tiles */
.Tile {
    margin-bottom: 10px;
}

.DashboardTiles .ContentPanel {
    padding-bottom: 0;
}

/* ------------------------------------------------------------ Dashboard Tile Icons */
.DashboardTiles .ImageContainer > a > div,
.DashboardTiles .IconContainer > a > div {
    height: 150px;
    margin-bottom: 30px;
    border-style: solid;
}

.DashboardTileContentContainer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

    .DashboardTileContentContainer > div {
        width: 100%;
    }

/* ------------------------------------------------------------ Dashboard Tile Images */
.DashboardTiles .ImageContainer a div {
    background-position: center center !important
}

/* ------------------------------------------------------------ Dashboard Tile Button */
.DashboardTiles .TileButtonContainer {
    margin-bottom: 30px;
    margin-top: 6px;
}

    .DashboardTiles .TileButtonContainer .btn {
        min-width: 80px;
        margin: 0;
    }

/* ------------------------------------------------------------ Dashboard Tile Detail */
.DashboardTiles h2 {
    font-size: 1.6rem;
    line-height: 1.5rem;
    margin-bottom: 10px;
    margin-top: 10px;
}

.DashboardTiles p {
    line-height: 1.2em;
    margin-bottom: 6px;
}

/* ------------------------------------------------------------ Dashboard Tile (Mobile) */
@media screen and (max-width: 575px) {
    .DashboardTiles .IconContainer > a > div {
        max-width: 200px;
        margin: 0 auto;
        margin-bottom: 9px;
    }

    .DashboardTileContentContainer {
        width: 100%;
        margin: 0 auto;
        max-width: 325px;
        margin-bottom: 10px
    }

    .DashboardTiles .TileButtonContainer {
        text-align: center;
    }

    .DashboardTiles .TileMore {
        text-align: center;
        margin-top: 5px;
        margin-bottom: 0px;
    }

        .DashboardTiles .TileMore a,
        .DashboardTiles .TileMore a .fa-arrow-up,
        .DashboardTiles .TileMore a .fa-arrow-down {
            font-size: 2rem;
        }

    .DashboardTiles .TileIntro p {
        margin-bottom: 9px;
        text-align: center;
    }

    .DashboardTiles h2 {
        margin-top: -10px;
        text-align: center;
    }

    .DashboardTiles .TileButtonContainer .btn {
        margin: 3px 0 0 0;
    }

    .DashboardTiles .Detail {
        margin-bottom: 0px;
        margin-top: 10px
    }

    .DashboardTiles .ImageContainer a div {
        min-height: 250px;
        margin-bottom: 15px;
    }
}

/* ------------------------------------------------------------ Dashboard Tiles Case tracking */
.CaseTrackingDetail .fa-regular.fa-circle {
    border-radius: 50%;
}

.CaseTrackingDetail .InProgressCase > .fa-solid.fa-circle {
    display: none;
}

.CaseTrackingDetail .PendingCase > .fa-solid.fa-circle,
.CaseTrackingDetail .DoneCase .fa-solid.fa-circle {
    display: none;
}


/* ------------------------------------------------------------ Lists */
/* Basic List */
ul.BasicList i.fa-solid,
ul.BasicList i.fa-regular {
    margin-right: 10px;
}

ul.BasicList {
    margin: 0 0 5px 0;
    padding: 0;
    text-align: left;
}

    ul.BasicList li {
        padding: 3px 0 3px 0;
        text-align: left;
        list-style-type: none;
    }

    /* Basic List */
    ul.BasicList i.fa-solid,
    ul.BasicList i.fa-regular {
        margin-right: 10px;
    }

ul.BulletList li {
    margin-bottom: 1px;
}

/* ------------------------------------------------------------ Data Table */
table.DataTable {
    width: 100%;
    margin-bottom: 15px;
}

    table.DataTable th {
        padding: 10px 10px 5px 10px;
        vertical-align: top;
        font-weight: 700;
        font-size: 1.15rem;
        line-height: 1.3rem;
    }

    table.DataTable tfoot th {
        font-size: 1rem;
    }

    table.DataTable td {
        padding: 12px 10px 10px 10px;
        vertical-align: top;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        line-height: 1.3rem;
    }

    /* ------------------------------------------------------------ Remove padding start and end of table row */
    table.DataTable thead > tr > th:first-child,
    table.DataTable tfoot > tr > th:first-child,
    table.DataTable tbody > tr > td:first-child {
        padding-left: 0;
    }

    table.DataTable thead > tr > th:last-child,
    table.DataTable tfoot > tr > th:last-child,
    table.DataTable tbody > tr > td:last-child {
        padding-right: 0;
    }

/* ------------------------------------------------------------ Data Table Navigation */
.DataTableNavigation i {
    font-size: 30px;
}

.DataTableNavigation i {
    font-size: 30px;
}

.DataTableNavigation a,
.DataTableNavigation a i {
    text-decoration: none;
}

.DataTableNavigation h4 {
    margin-bottom: 0;
    margin-top: 4px;
}

/* ------------------------------------------------------------ Data Table/List Buttons */
.DataTable td > .btn.Small,
.DataList .btn.Small {
    margin-bottom: 0;
    margin-right: 0;
}

/* ------------------------------------------------------------ Content Panel */
.ContentPanel {
    border-style: solid;
    padding: 18px;
    position: relative;
    margin-top: 17px;
    margin-bottom: 17px;
}

    /* Page Header */
    .ContentPanel .PageHeader {
        text-align: center;
    }

        .ContentPanel .PageHeader > h2 {
            font-size: 2.2rem;
            line-height: 2.2rem;
            margin: 10px 40px 15px 40px;
        }

@media screen and (max-width: 767px) {
    .ContentPanel .PageHeader > h2 {
        margin-bottom: 12px;
        margin: 15px 5px 15px 5px;
    }
}

/* ------------------------------------------------------------ Quick Links */
.QuickLinks {
    position: relative;
    padding-left: 0;
    padding-right: 0;
}

    .QuickLinks .QuickLink {
        margin-bottom: 15px;
    }

.QuickLink i {
    font-size: 20px;
}


.QuickLinks .QuickLink > a {
    display: block;
    border-style: solid;
    padding: 11px 18px 11px 18px;
    font-weight: 700;
    text-decoration: none;
}

    .QuickLinks .QuickLink > a > div.row > div {
        align-self: center;
    }

        .QuickLinks .QuickLink > a > div.row > div:nth-child(2) {
            text-align: right;
        }

/* ------------------------------------------------------------ Text Block */
.TextBlock {
    margin-bottom: 20px;
}

/* ------------------------------------------------------------ Text Alignments */
.AlignRight {
    text-align: right;
}

.AlignLeft {
    text-align: left;
}

.AlignCenter {
    text-align: center;
}

@media screen and (min-width: 576px) {
    .AlignRightDesktop {
        text-align: right;
    }
}

/* ------------------------------------------------------------ Text Formatting */
.Underline {
    width: calc(100% - 1.5rem);
    margin: 0 auto;
    height: 1px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    margin-bottom: 5px;
}

.NoWrap {
    white-space: nowrap;
}

/* ------------------------------------------------------------ Forms */
.form-label,
.form-control {
    display: initial;
    margin-bottom: 5px;
}

/*  AlignToInput */
.AlignToInput {
    margin-top: 10px;
}

@media screen and (max-width: 575px) {
    .AlignToInput {
        margin-top: 0;
    }

    .form-control {
        margin-bottom: .75rem;
    }

    .ResponsiveLabelPairs > div:nth-child(odd) > label {
        margin-bottom: 0.2rem;
    }

    .ResponsiveLabelInputPairs > div:nth-child(odd) > label {
        margin-bottom: 0.2rem;
    }
}

body .form-group {
    line-height: 1.3rem;
}

/* Inputs */
.form-control:focus {
    border-color: transparent !important;
}

.form-control,
.form-select {
    display: initial;
}

.form-control,
.form-select,
.input-group-text {
    border-width: 1px;
    padding: 0.45rem 0.75rem 0.35rem 0.75rem;
}

textarea.form-control {
    padding: 0.45rem 0.45rem 0.45rem 0.45rem;
}

.FormGroupDivider {
    margin: 0 0 1rem 0;
}

hr.Divider {
    height: 1px;
    opacity: 1.0;
}

body.DarkMode .form-select,
body.DarkMode .form-select:valid:not([multiple]):not([size]) {
    background-image: url("../images/generic/DownArrowDarkMode.png");
}

.invalid-feedback {
    font-style: italic;
    margin-top: -10px;
    font-size: 1rem;
    margin-bottom: 10px;
}

.field-validation-error {
    display: block;
    margin-bottom: 10px;
}

/*  Invalid */
.form-control.is-invalid,
.was-validated .form-control:invalid,
.form-select.is-invalid:not([multiple]):not([size]),
.form-select.is-invalid:not([multiple])[size="1"],
.was-validated .form-select:invalid:not([multiple]):not([size]),
.was-validated .form-select:invalid:not([multiple])[size="1"] {
    background-image: none;
}

/*  Prepend */
span.input-group-text + input[type="text"] {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/*  Append */
.input-group.has-append input[type="text"] {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group.has-append span.input-group-text {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.form-control.SortCode {
    width: 37px;
    margin-right: 4px;
}

.col-form-label {
    line-height: 1.3;
    margin-top: 1px;
    word-break: break-word;
}

.RequiredInput {
    margin-left: 2px;
}
/* ------------------------------------------------------------ Tabs */
.tab-content {
    padding: 20px;
    border-radius: 3px;
    margin-top: -1px;
}

.nav.nav-tabs {
    border-bottom-width: 0;
    font-weight: bold;
}

    .nav.nav-tabs .nav-link {
        border-radius: 0 !important;
    }

.nav-tabs .nav-link:hover {
    border-color: transparent;
}

@media screen and (min-width: 767px) {
    body .nav-link.active {
        border-bottom-width: 0px;
    }
}

/* ------------------------------------------------------------ Symbols (£ and %) */
.SymbolBeforeInput {
    margin-left: -0.9rem;
    margin-right: 5px;
}

.SymbolAfterInput {
    margin-left: 4px;
}

/* ------------------------------------------------------------ Articles */
article {
    line-height: 1.25rem;
}

/* ------------------------------------------------------------ Spacers */
.Spacer {
    display: block;
    margin-top: 10px;
}

.SpacerLarge {
    display: block;
    height: 40px;
}

.MobileSpacerLarge {
    display: none;
}

.SpacerAndLine {
    width: calc(100% - 1.5rem);
    margin: 0 auto;
    height: 1px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    margin-bottom: 10px;
    margin-top: 10px;
}

@media screen and (max-width: 575px) {
    .MobileSpacerLarge {
        display: block;
        height: 40px;
    }
}

/* ------------------------------------------------------------ Alert */
.InlineAlert {
    text-align: center;
    vertical-align: middle;
    width: 100%;
    line-height: 1.2rem;
    color: white;
    min-height: 100px;
}

/* ------------------------------------------------------------ Footer Alert, Success */
.FooterSuccess,
.FooterAlert {
    text-align: center;
    vertical-align: middle;
    width: 100%;
    line-height: 1.2rem;
    color: white;
    min-height: 100px;
    padding-left: 20px;
    padding-right: 20px;
}

    .FooterSuccess > div,
    .FooterAlert > div,
    .InlineAlert > div {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100px;
    }

/* ------------------------------------------------------------ Page Specific - Investment Managers */
.InvestmentManagers .form-group img {
    width: 100%;
    margin-bottom: 10px;
    border-radius: 5px;
}

.InvestmentManagers label {
    justify-content: left;
    align-items: center;
    display: flex;
}

@media screen and (max-width: 576px) {
    .InvestmentManagers .form-group img {
        max-width: 200px;
        display: block;
        margin: auto auto;
    }

    .InvestmentManagers label {
        justify-content: center;
        margin-bottom: 30px;
    }
}

/* ------------------------------------------------------------ Popup - Show Last Login Details */
.ShowLastLogin {
    padding: 20px 0 17px 0;
    font-size: 1rem;
    text-align: center;
}

/* ------------------------------------------------------------ Popup - Survey */
.Survey {
    padding: 20px 0 17px 0;
    font-size: 1rem;
    text-align: center;
}

/* ------------------------------------------------------------ Page Specific - Sitemap */
.Sitemap a {
    text-decoration: none;
}

/* Icon */
.ContentPanel .SitemapIcon {
    display: inline-block;
    width: 36px;
    height: 36px;
    border-style: solid;
    text-align: center;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

    .ContentPanel .SitemapIcon i {
        font-size: 21px;
    }

.SitemapText {
    position: relative;
    top: -31px;
    left: 45px;
    text-decoration: underline;
}

/* ------------------------------------------------------------ Page Specific - Useful Links */
.UsefulLinksFlex {
    align-items: center;
    justify-content: center;
    line-height: 1.2rem;
}

    .UsefulLinksFlex img {
        max-width: 200px;
        width: 100%;
        box-shadow: 0px 0px 4px -2px rgba(0,0,0,0.75);
    }


@media screen and (max-width: 767px) {
    .UsefulLinks h2 {
        margin-bottom: 0 !important;
    }

    .UsefulLinksFlex > div {
        text-align: center;
    }

    .UsefulLinksFlex img {
        margin-top: 25px;
    }
}

/* ------------------------------------------------------------ Page Specific  */

/* ------------------------------------------------------------ Syncfusion Date Picker */
/* Date Picker */
.e-control-wrapper.e-date-wrapper {
    max-width: 175px;
}

.e-control-wrapper.e-date-wrapper .e-input {
    padding-left: 0!important;
}

/* Remove Red underline from Date Picker */
.e-input-group:not(.e-float-icon-left):not(.e-float-input).e-input-focus::before,
.e-input-group:not(.e-float-icon-left):not(.e-float-input).e-input-focus::after {
    width: 0 !important
}

/* Date Icon */
.e-date-wrapper:not(.e-filled) .e-date-icon.e-icons {
    margin-top: 3px !important
}

.e-date-wrapper .e-input-group-icon.e-date-icon {
    font-size: 20px;
}

/* Calendar Container */
.e-date-wrapper {
    padding: 0.15rem 0.60rem !important;
    border-width: 1px !important;
}

    /* X Clear Icon */
    .e-date-wrapper .e-clear-icon:hover {
        background: none !important;
    }

    /* Background */
    .e-date-wrapper .e-input-group-icon:hover {
        background: none !important;
        background-image: none !important;
        background-color: none !important;
    }

/* ------------------------------------------------------------ Syncfusion Calendar Popup */
/* Background */
.e-calendar .e-header,
.e-calendar .e-header *,
.e-calendar * {
    background: none !important;
    background-image: none !important;
    background-color: none !important;
}

    /* Background */
    .e-calendar .e-header,
    .e-calendar .e-header *,
    .e-calendar * {
        background: none !important;
        background-image: none !important;
        background-color: none !important;
    }

.e-calendar .e-content td span {
    padding: 4px !important;
    border-color: transparent !important;
}

/* Today Cell */
.e-calendar .e-today {
    background: none !important;
}

/* Today Inner Cell */
.e-calendar .e-content td.e-today > span {
   margin-top: -6px !important;
}

/* Today Selected */
.e-calendar .e-content td.e-today.e-selected > span {
    background: none !important;
    border-color: transparent !important;
    margin-top: 0 !important;
    padding-top: 2px !important;
    font-size: 0.9rem !important;
}

/* Prev Next */
.e-calendar button {
    min-width: unset;
    margin-top: -5px;
}

/* Today Selected (not available via inspect element) */
.e-cell.e-selected.e-focused-date.e-today {
}

    /* Today Selected (not available via inspect element) */
    .e-cell.e-selected.e-focused-date.e-today > span.e-day {
        box-shadow: none !important;
    }

/* ------------------------------------------------------------ Syncfusion Remove Background Colors (All controls) */
.e-grid .e-table,
.e-control.e-toolbar,
.e-pager,
.e-table,
.e-grid .e-content,
.e-grid .e-gridcontent,
.e-pager .e-pagercontainer,
.e-pager .e-currentitem,
.e-pager .e-currentitem:hover,
.e-pager .e-numericitem,
.e-pager .e-prevpagedisabled,
.e-pager .e-prevpage,
.e-pager .e-nextpage,
.e-pager .e-nextpagedisabled,
.e-pager .e-lastpagedisabled,
.e-pager .e-lastpage,
.e-pager .e-firstpage,
.e-pager .e-firstpagedisabled,
.e-pager .e-spacing.e-numericitem:not(.e-active):not(.e-np):not(.e-pp):hover,
.e-grid.e-gridhover .e-row tr:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-editedrow):not(.e-detailrow):hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowcollapse:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-rtl .e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-rowdragdrop:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell), .e-grid.e-gridhover .e-row:not(.e-disable-gridhover):not(.e-detailrow):hover .e-detailrowexpand:not(.e-cellselectionbackground):not(.e-active):not(.e-updatedtd):not(.e-indentcell),
.e-pager .e-pager-default:hover,
.e-pager .e-currentitem.e-numericitem.e-focused {
    background-color: transparent;
}

/* ------------------------------------------------------------ Syncfusion Input */
.e-input-group.e-control-wrapper {
    border-width: 1px;
    padding: 0.30rem 0.75rem 0.30rem 0.75rem;
}

    input.e-input,
    .e-input-group input.e-input,
    .e-input-group input,
    .e-input-group.e-control-wrapper input.e-input,
    .e-input-group.e-control-wrapper input,
    .e-float-input input.e-input,
    .e-float-input input,
    .e-float-input.e-control-wrapper input.e-input,
    .e-float-input.e-control-wrapper input,
    .e-input-group input.e-input:focus,
    .e-input-group.e-control-wrapper input.e-input:focus,
    .e-float-input.e-control-wrapper input:focus,
    .e-float-input input:focus,
    .e-input-group.e-input-focus input.e-input,
    .e-input-group.e-control-wrapper.e-input-focus input.e-input,
    .e-float-input.e-control-wrapper.e-input-focus input,
    .e-float-input.e-input-focus input {
        padding-left: 0;
    }

/* ------------------------------------------------------------Synfusion Grid  */
.e-grid .e-toolbar {
    border-top-width: 0;
    padding: 8px 16px !important;
}

.e-grid .e-toolbar-items .e-toolbar-item.e-search-wrapper .e-search {
    padding-left: 5px;
}

.e-grid .e-toolbar-items .e-toolbar-item .e-btn {
    background-color: #004771 !important;
    border-radius: 0.20rem !important;
    padding: 0.375rem 0.75rem !important;
    width: 130px !important;
}

.e-grid .e-toolbar-item .e-tbar-btn .e-tbar-btn-text {
    color: white !important;
    font-size: 15px;
    font-weight: 600 !important;
}

.e-grid .e-toolbar-items .e-toolbar-item .e-btn:hover {
    opacity: 0.7 !important;
}

.e-grid,
.e-grid .e-toolbar,
.e-grid .e-rowcell,
.e-grid .e-gridheader,
.e-grid .e-headercontent {
    border-left-width: 0;
    border-right-width: 0 !important;
}


.e-toolbar.e-control {
    box-shadow: none;
}

/* Paging */
.e-pager .e-pagerdropdown {
    width: 88px;
}

#LoginReports .e-headercontent {
    margin-top: 15px;
}


body .e-grid td.e-active {
    background-color: transparent;
}

.e-grid .e-focused:not(.e-menu-item):not(.e-editedbatchcell) {
    box-shadow: none;
}

.e-input-group .e-input[readonly],
.e-input-group.e-control-wrapper .e-input[readonly],
.e-float-input input[readonly],
.e-float-input.e-control-wrapper input[readonly],
.e-float-input textarea[readonly],
.e-float-input.e-control-wrapper textarea[readonly] {
    background: transparent;
}


/* ------------------------------------------------------------ Accessibility */
header.Header a:focus-visible,
a.navbar-brand:focus-visible,
ul.navbar-nav > li > a:focus-visible,
button.btn:focus-visible,
.main a:focus-visible,
.DashboardTiles .IconContainer a:focus-visible > div,
.TileMore > a:focus-visible,
.FooterElementsContainer a:focus-visible {
    outline-width: 2px;
    border-radius: 3px;
    outline-style: solid;
    outline-offset: 2px;
}

button.btn:focus-visible,
.DashboardTiles .IconContainer a:focus-visible > div {
    outline-offset: 1px;
}

a:link {
    outline-offset: 3px;
}

ul.navbar-nav .dropdown-item,
.DashboardTiles .IconContainer a {
    outline-width: 0
}

/* ------------------------------------------------------------ Temp - Syncfusion Placeholders*/
.SyncfusionControlContainer {
    display: block;
    margin: 15px 0 15px 0;
}

    .SyncfusionControlContainer span {
        display: block;
        text-align: center;
        width: 100%;
        padding: 9px 18px 7px 18px;
        padding: 9px 18px 7px 18px;
        border: 1px solid #000;
        border-radius: 0px;
        font-weight: 700;
    }

/* ------------------------------------------------------------ Temp - Carousel BG image*/
.CarouselImage {
    width: 100%;
    height: 100%;
    background-image: url("../images/temp/Family.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left top;
    min-height: 276px;
}


/* ------------------------------------------------------------ Make Login Scheme Choice Table into a List */

@media screen and (max-width: 992px) {
    #schemesGrid,
    #schemesGrid .e-gridheader {
        border-color: transparent !important;
    }

    #schemesGrid th {
        display: none;   
    }

    #membertable_wrapper .e-content {
        overflow: hidden;
        overflow-y: hidden!important;
    }

    #schemesGrid_content_table td:not(.e-hide) {
        display: block;
        width: 100%;
        box-sizing: border-box;
        border-color: transparent !important;
        width: 100vh;
    }


    #membertable_wrapper .e-rowcell[data-colindex="4"]::before {
        content: "Client: ";
        display: inline-block;
        width: 120px;
        float: left;
        font-weight: bold;
    }

    #membertable_wrapper .e-rowcell[data-colindex="5"]::before {
        content: "Scheme: ";
        display: inline-block;
        width: 120px;
        float: left;
        font-weight: bold;
    }

    #membertable_wrapper .e-rowcell[data-colindex="6"]::before {
        content: "Status: ";
        display: inline-block;
        width: 120px;
        float: left;
        font-weight: bold;
    }

    #membertable_wrapper .e-rowcell[data-colindex="7"]::before {
        content: "Joined: ";
        display: inline-block;
        width: 120px;
        float: left;
        font-weight: bold;
    }

    #membertable_wrapper .e-rowcell[data-colindex="8"] {
      display: inline-block;
       margin-left: 120px;
       margin-bottom: 30px;
       margin-top: -5px;
    }

}

/* ------------------------------------------------------------ Temp */
#IncorrectAnswers,
.alert.alert-danger {
    display: none;
}

/* ------------------------------------------------------------ Scheme Fonts */
/* Global font */
@font-face {
    font-family: BodyFont;
    src: url("../fonts/PTSans-Regular.ttf");
}

/* Menu font */
@font-face {
    font-family: MenuFont;
    src: url("../fonts/PTSans-Regular.ttf");
}

/* Heading font */
@font-face {
    font-family: HeaderFont;
    src: url("../fonts/PTSans-Regular.ttf");
}