/* 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. */

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    font-size: 12px;
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;
}

.footer {
    position: fixed;
    bottom: 0px;
    font-size: 8px;
    width: 100%;
    white-space: nowrap;
    margin-top: 5px;
    /* Set the fixed height of the footer here */
    height: 4vh;
    line-height: 4vh; /* Vertically center the text there */
}

.navbar-toggler {
    border: none;
}

    .navbar-toggler > i {
        color: #fff;
    }

.popoutTray {
    bottom: 30px;
    width: 0;
    margin-top: 50px;
    top: 0;
    left: 0;
    position: fixed;
    z-index: 50;
    transition: 0.5s;
    overflow-x: hidden;
    background-color: #f8f9fa;
}


.popoutContactsTray {
    height: 100%;
    width: 0;
    margin-top: 50px;
    top: 0;
    right: 0;
    position: fixed;
    z-index: 50;
    transition: 0.5s;
    overflow-x: hidden;
    background-color: #f8f9fa;
}


    .popoutTray .closebtn, .popoutContactsTray .closebtn {
        position: absolute;
        top: -10px;
        right: 25px;
        font-size: 25px;
        color: #818181;
    }

    .popoutTray a, .popoutContactsTray a {
        text-decoration: none;
        display: block;
        transition: 0.3s;
    }

    .popoutTray a, .popoutContactsTray a {
        color: #000;
    }

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 15px;
}

    /* Hide default HTML checkbox */
    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.switch input[disabled]+.slider {
    cursor: default;
    opacity: 0.6;
}


label.switch {
    margin-bottom: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 5px;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 10px;
        width: 10px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }


input:checked + .slider {
    background-color: #871A6A;
}

input:focus + .slider {
    box-shadow: 0 0 1px #871A6A;
}

input:checked + .slider:before {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 32px;
}

    .slider.round:before {
        border-radius: 50%;
    }

/*Bootstrap*/
.btn-outline-none {
    border-color: transparent;
}

/*date picker*/
.ui-datepicker {
    z-index: 9999 !important; /* must be > than popup editor (1002) */
}

/*text wrapping in table*/
table.datatable tbody td {
    white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
    white-space: -webkit-pre-wrap; /*Chrome & Safari */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    white-space: pre-wrap; /* css-3 */
    overflow-wrap: break-word;
    -ms-word-break: break-all;
    word-wrap: break-word; /* Internet Explorer 5.5+ */
    word-break: break-all;
    white-space: normal;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.table tr td .btn {
    margin-top: -3.1px;
}

.field-validation-error {
    color: red;
}

.tab-content {
    min-height: 450px;
}

/*Progress spinner*/
.spinner {
    position: absolute;
    top: 40%;
    left: 0;
    width: 100%;
    display: block;
    height: 70%;
    color: #FFF;
    transform: translateY(-50%);
    z-index: 999999999;
    visibility: hidden;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 9999999;
    visibility: hidden;
}

.show {
    visibility: visible;
}

.hide {
    display: none;
}

.spinner, .overlay {
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

    .spinner.show {
        opacity: 1;
    }

    .overlay.show {
        opacity: 0.7;
    }

.navbar {
    position: fixed;
    border-bottom: none !important;
    padding-bottom: 5px;
    width: 100%;
    z-index: 50;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    background-color: inherit !important;
}

   .nav-item a i {
    color: #fff;
   }

.navbar > .container {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 100%;
        max-width: 100%;
}

.container .col-auto {
    display: block;
    flex: inherit;
}

.container-subheader h5 {
    color: #fff;
    margin-bottom: 2px;
}

.container-subheader h4 {
    color: #fff;
}

.container-subheader .headerlabel {
    color: #fff;
    font-size: smaller;
}


.container.main-content {
    padding: 10px;
    background-color: #fff;
    border-radius: 0.25rem;
    min-height: calc(100vh - 30vh);
}

.container.container-content {
    margin-top: 97.5px;
    padding: 0px 40px 20px 40px;
    background-color: transparent !important;
}

.card > .card-header {
    padding-bottom: 0px;
    background-color: transparent;
    border-bottom: none;
}

.cardAccountManager {
    border: 1px;
    margin-bottom: 10px;
}

    .cardAccountManager .card-body {
        padding-top: 5px;
        padding-bottom: 5px;
    }


.cardActivity {
    border: 1px;
    max-height: calc(100vh - 60vh);
    min-height: 150px;
    margin-bottom: 10px;
}

    .cardActivity .card-body {
        overflow-y: auto;
    }


.cardApps {
    padding: 10px;
    padding-bottom: 0px;
    border: 1px;
    min-height: calc(100vh - 140px) !important;
    margin-bottom: 10px;
}

.cardEvent {
    border: 1px;
    /*max-height: calc(100vh - 60vh);*/
    min-height: 150px;
    margin-bottom: 10px;
}


.cardEvent .card-body {
    overflow-y: auto;
}

.cardEvent .card-footer {
    padding-top: 0px;
    background-color: transparent;
    border-top: none;
}

.cardAdvert {
    background-color: transparent;
    border: none;
}

    .cardAdvert > .card-body {
        background-color: transparent;
        padding: 0px;
        max-height: 160px;
    }

.cardAdvert-reverse {
    background-color: transparent;
    border: none;
    flex-direction: column-reverse;
}

    .cardAdvert-reverse > .card-body {
        background-color: transparent;
        padding: 0px;
        flex: 0;
    }

.dashcard-1 {
    height: calc(100vh - 140px) !important;
}

.dashcard-2 {
    height: calc((100vh - 150px) / 2) !important;
}

.dashcard-3 {
    height: calc((100vh - 160px)/3) !important;
}

.dashcardImage-1 {
    max-height: calc(100vh - 140px) !important;
}

.dashcardImage-2 {
    max-height: calc((100vh - 150px) / 2) !important;
}

.dashcardImage-3 {
    max-height: calc((100vh - 160px)/3) !important;
}

.cardSimpleView {
    border: none;
    font-size: 1.2rem;
}

.appItemContainer {
    margin-right: -10px;
}

    .appItemContainer .card {
        width: 100% !important;
        margin-right: 10px !important;
        margin-bottom: 10px !important;
    }

#noApps img {
    width: 100%;
    max-width: 400px;
}


.tile-icon {
    position: relative;
    height: 0;
    padding: 56.25% 0 0 0;
}
#drpLocation + .btn-group {
    width: 100% !important;
}


.height-400px {
    height: 400px !important;
}

.bootstrap-select.form-control-sm .dropdown-toggle {
    padding: 0.15rem 0.25rem;
}

.filter-control {
    width: 150px;
    color: #212529;
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    padding: 0.4rem;
    margin: 2px;
}

.filter-calendar {
    display: inline-block;
    width: 100px;
}

.multiselect-container {
    width: 180px;
    max-height: 140px;
    overflow-y: scroll;
}

.documentstore-multiselect-dropdown + .btn-group .multiselect-container {
    max-height: 485px;
    overflow-y: scroll;
}

    .documentstore-multiselect-dropdown + .btn-group .multiselect-container.dropdown-menu {
        width: 295px;
        max-width: 70vw;
        overflow-x: hidden;
    }

    .multiselect-container > li > a > label {
        margin: 0;
        height: 100%;
        cursor: pointer;
        color: #000000;
        padding: 3px 20px 3px 10px;
    }

.multiselect-native-select select + div button.form-control.form-control-sm::after {
    position: absolute;
    top: 10px;
    right: 10px;
}
.multiselect-native-select select + div button.form-control.form-control-sm {
    position: relative;
}

.btn:focus, .btn.focus {
    outline-width: 10px;
    box-shadow: none;
}

.unpin:hover {
    opacity: 0.7;
    color: #fff;
}

.app-content {
    max-width: 15vh;
    max-height: 15vh;
    margin: auto
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/*.filter-control-lg {
    width: 150px;
    color: #212529;
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    padding: 0.4rem 5rem;
    margin: 3px;
}*/

.input-number {
    width: 60px;
    padding: 0.4rem;
    color: #212529;
    background-color: #f8f9fa;
    border: 1px solid #ced4da;
    margin: 3px;
}

.contact-modal-title {
    margin-bottom: 0;
    line-height: 1.5;
    font-weight: bold;
}

.contact-modal {
    position: absolute;
    top: 65px;
    left: 0;
    z-index: 1050;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0;
    padding-right:0 15px !important;
}

.contact-modal-dialog {
    max-width: 31vw;
    min-width: 31vw;
    margin-top: 0.5vw;
    float: right;
    padding:0 15px;
}

.contact-modal-header {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 1rem 2rem;
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem;
    color: #871a6a;
}

.contact-modal-content {
    height: calc(100vh - 110px) !important;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border-radius: 0.3rem;
    outline: 0;
}

.contact-modal-close {
    float: right;
    font-size: 0.75vw;
    font-weight: 700;
    line-height: 2;
    color: #007bff;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
    padding: 0;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.contact-modal-body {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1rem 2rem;
    overflow-y: auto;
}

.contactName {
    color: #000 !important;
}

#chatFilterHashtag + div .form-control.form-control-sm::after {
    position: absolute;
    top: 10px;
    right: 10px;
}

#msgDiv {
    flex-basis: 0px;
}

.contactName {
    color: #000 !important;
}

.simpleViewContactTitle {
    font-size: 1.34rem;
    color: #871a6a;
    font-weight: bold;
}

.simpleView-font {
    font-size: 1.2rem;
}

.multiselect-native-select .multiselect-container.dropdown-menu {
    width: 100%;
    overflow-x: hidden;
}

/*.login-input {
    padding: 0 60px;
}*/

#watermark {
    margin-top: 0.7vw !important;
    opacity: 0.8;
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -sand-transform: rotate(-45deg);
    transform: rotate(-45deg);
    font-size: 0.6vw !important;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff
}

/*Terms and conditions, terms of use and privacy policy counters*/
.termsDocument > li {
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 10px;
}

.termsDocument > ol {
    padding-left: 0px;
    counter-increment: lists;
    counter-reset: items;
    list-style-type: none;
    display: block;
}

.termsDocument > ol > li::before {
    content: counters(lists, "", decimal) "." counters(items, "", decimal) " ";
    counter-increment: items;
}

.termsDocument > ol > li {
    padding-bottom: 10px;
    padding-top: 10px;
}


.termsDocument > ol > ol {
    padding-left: 20px;
    list-style-type: none;
    counter-reset: subitems;
    display: block;
}

.termsDocument > ol > ol > li::before {
    content: counters(lists, "", decimal) "." counters(items, "", decimal) "." counters(subitems, "", decimal) " ";
    counter-increment: subitems;
}

.termsDocument > ol > ol > li {
    padding-bottom: 10px;
    padding-top: 10px;
}
input[type="file" i] {
    overflow: hidden;
}

.multi-select-list-control .btn-group {
    width: 100%;
}

.multi-select-list-control .btn-group button{
    overflow: hidden;
}

.unpin {
    opacity: 0.4;
    color: background;
}

/*List of tags*/
.tags {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tags li {
    display: inline-block;
    height: 24px;
    line-height: 24px;
    position: relative;
    font-size: 11px;
    margin: 2px 5px 2px 12px;
    padding: 0 10px 0 12px;
    background: #9b9898;
    color: #fff;
    text-decoration: none;
    -moz-border-radius-bottomright: 4px;
    -webkit-border-bottom-right-radius: 4px;
    border-bottom-right-radius: 4px;
    -moz-border-radius-topright: 4px;
    -webkit-border-top-right-radius: 4px;
    border-top-right-radius: 4px;
}

.tags li:before {
    content: "";
    float: left;
    position: absolute;
    top: 0;
    left: -12px;
    width: 0;
    height: 0;
    border-color: transparent #9b9898 transparent transparent;
    border-style: solid;
    border-width: 12px 12px 12px 0;
}

.tags li:after {
    content: "";
    position: absolute;
    top: 10px;
    left: 0;
    float: left;
    width: 4px;
    height: 4px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background: #fff;
    -moz-box-shadow: -1px -1px 2px #fff;
    -webkit-box-shadow: -1px -1px 2px #fff;
    box-shadow: -1px -1px 2px #fff;
}

.anchor-tooltip {
    font-size: 18px;
    text-decoration: none;
}

.multiselect {
    width: 100% !important;
    background: #fff;
    border-radius: 2px !important;
    border: 1px solid #d0d0d0;
}

.multiselect .multiselect-selected-text {
    text-align: left;
    float: left;
    width: 95%;
}

.multiselect-fullwidth .btn-group {
    width: 100%;
}

.table-select{
    background-color: transparent;
    color: #fff;
}

.table-select > option{
    color: #000;
}

#report-container {
    height: 85vh; 
}

.clear-frame iframe {
    border: none;
}

.Tab {
    font-family: 'Arial', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 0.813rem;
    letter-spacing: normal;
    color: #333333;
    vertical-align: none;
    text-align: center;
    line-height: normal;
    text-transform: none;
}

.TabHeader {
    font-family: 'Arial', sans-serif;
    font-style: normal;
    font-size: 1rem;
    text-align: left;
    padding-top: 0.75rem;
    font-weight: bold;
}

.GroupTileText {
    color: #FFFFFF;
    font-weight: normal;
    text-align: center !important;
    max-width: 100vh !important;
    word-wrap: break-word;
    padding: 2px 2px 2px 2px;
    margin: 0px;
    box-sizing: border-box;
    width: 100%;
    align-self: center;
    position: absolute;
    font-size: 1.25vmax;
}

#ApplicationGroupAppCard > a > .card-body > .GroupTileText {
    font-size: 1vmax;
}

.GroupModal-AppCard {
    width: 12vw;
    height: 6vw;
    border-radius: 5px;
    box-shadow: none;
    font-family: 'Segoe UI Bold', 'Segoe UI Regular', 'Segoe UI', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 1rem;
    color: #FFFFFF;
    margin: 0.5rem;
}

.modal-Tab {
    font-family: 'Arial', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 13px;
    letter-spacing: normal;
    color: #333333;
    vertical-align: none;
    text-align: center;
    line-height: normal;
    text-transform: none;
}

.GroupModal-Img {
    height: 4vw;
    margin-left: 4vw;
    margin-right: 4vw;
    margin-top: 0.2vw;
}

.GroupModal-AppName {
    color: #fff;
    font-weight: lighter;
    font-size:0.8vw;
    padding: 0.5rem 0.25rem;
    text-align: center !important;
}

.FavAppTile {
    border-width: 0px;
    left: 0.375rem;
    top: 0px;
    width: 13vw;
    height: 7vh;
    border-radius: 0.25rem;
}

.FavAppTileImg {
    width: 2vmax;   
    margin-top: 0.5vw;
}

.FavAppTileText {
    width: 100%;
    border-width: 0px;
    font-family: 'Segoe UI', sans-serif;
    font-weight: 400;
    font-style: normal;
    padding: 0.75vw 0.2vw 0 0.5vw !important;
    font-size: 0.8vmax;
    color: #FFFFFF;
    text-align: right !important;
}

.FavHighlight {
    color: #FFFFFF;
}

.GroupScrollable {
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 2rem;
}

.AppDisabled {
    background-color: #a8a8a8 !important;
}

.AppComingSoon {
    margin-top: 0.95rem !important;
    font-size: 0.95rem !important;
    margin-left: 0.3rem;
}

.FavAppCardBox {
    margin-top: 0.25rem !important;
    margin-right: 0.25rem !important;
    margin-bottom: 0.25rem !important;
    margin-left: 1rem !important;
}

.NewDashcard-1 {
    height: auto !important;
}

.appItemContainer .NewAppTile-row-3 {
    min-height: 100px;
    height: calc((40vh - -6vw) / 3);
}

.appItemContainer .NewAppTiles-3 {
    -ms-flex: 0 0 calc(33.333337% - 10px);
    flex: 0 0 calc(33.333337% - 10px);
    max-width: calc(32vw- 1rem);
    margin-right: 1.18rem;
    margin-bottom: 2rem;
    /*max-width: 20vw;*/
}


.Modal-GroupAppCard {
    margin-top: 0.4rem !important;
    margin-bottom: 0.4rem !important;
    padding-left: 1rem;
}

    .ApplicationModal {
        position: relative;
        flex: 1 1 auto;
        padding: 1rem 1rem;
        overflow-y: overlay;
        overflow-x: hidden;
    }

.ApplicationModal-GroupImg {
    height: 6.5vh;
    margin-right: 0.5rem;
    margin-top: 0.6rem;
}

.GroupApp-modal-dialog {
    margin: 10vh 20vw;
}

#GroupAppModal {
    height: 29vw !important;
    width: 55vw !important;
}

#GroupHeader {
    font-size: 1.8vh;
    color: #CF2057 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

#DivClose {
    font-size: 1vw
}

.ModalHeader {
    font-size: 0.8vw;
}

.ModalCloseBtn {
    font-size: 0.8vw;
}

#FavouritesTabHeader {
    font-size: 0.8vw
}

#RecentlyUsedTabHeader {
    font-size: 0.8vw
}

#ApplicationGroupAppCard {
    width: 7vw;
    height: 11vh !important;
    margin-right: 1.25rem;
}

#ApplicationGroupHeader {
    border-bottom: 1px solid rgba(183, 13, 127, 1);
    font-size: 1vw
}

.application-card {
    width: 7vw;
    height: 9vh;
    border-radius: 5px;
    box-shadow: none;
    font-family: 'Segoe UI', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 11px;
    color: #000000 !important;
}

.commingsoonMark {
    margin-top: 8px !important;
    font-size: 9px !important;
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -sand-transform: rotate(-45deg);
    transform: rotate(-45deg);
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

#groupTitle {
    font-family: 'Segoe UI Semibold', 'Segoe UI Regular', 'Segoe UI', sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 0.8vw;
}

#GroupAppName {
    width: 7vw;
    font-size: 0.8vw;
}

.favourite-card {
    border-width: 0px;
    height: 7vh;
    border: none;
    border-radius: 5px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.group-card {
    height: 102px;
    border: none;
    border-radius: 5px;
    box-shadow: none;
    font-family: 'Segoe UI Bold', 'Segoe UI Regular', 'Segoe UI', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 11px;
    color: white !important;
}

.cardText {
    font-family: 'Segoe UI', sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 0.8vw;
    color: #FFFFFF;
    text-align: right !important;
}

.application-tabpane {
    height: 38vh;
}

.Application-Img {
    height: 8vh;
    position: relative;
    left: 6px;
    zoom: 50%;
}

.FavAppIconAppModal {
    float: right;
    font-size: 0.75vw;
}

.AppModalImg {
    margin-left: 2.25rem;
}

.AppModalImgCS {
    margin-left: -0.5rem;
}

#quickLinkBody {
    width: 29vw !important;
}

#QuickLinkText {
    font-size: 1.75vh;
}

#QuickLinkImg {
    height: 8vh;
    width: 4vw;
}

/*media overrides*/

@media (max-width: 420px) {
    .contact-modal-content {
        height: calc(95vh - 110px) !important;
    }

    .TabHeader {
        font-size: 4.8vw !important;
    }

    .FavAppTileImg {
        width: 11vmin !important;
        margin-top: 1.5vw !important;
    }

    .FavAppTile {
        width: 68vw !important;
        height: 7vh !important;
    }

    .FavAppTileText {
        width: 16rem !important;
        font-size: 4.5vmin !important;
        margin-top: 1vh;
        margin-left: 5vw !important;
    }

    #fvrtapps {
        max-height: 15vh;
    }

    .appItemContainer .NewAppTile-row-3 {
        min-height: 7vh !important;
    }

    .appItemContainer .NewAppTiles-3 {
        flex: 0 0 calc(95% - 10px);
    }

    .appItemContainer .card {
        max-width: 75vw !important;
        max-height: 7vh !important;
    }

    .GroupTileText {
        font-size: 3.5vmin !important;
    }

    .GroupApp-modal-dialog {
        margin: 1vh 1vw;
    }

    #GroupAppModal {
        height: 130vw !important;
        width: 80vw !important;
    }

    #GroupHeader {
        font-size: 3vw;
    }

    #DivClose {
        font-size: 3vw;
    }

    .GroupModal-AppCard {
        width: 48vw !important;
        height: 12vh !important;
    }

    .GroupModal-Img {
        height: 7.5vh !important;
        margin-left: 16vw;
        margin-right: 9vw;
    }

    .GroupModal-AppName {
        font-size: 3.5vw !important;
    }

    #watermark {
        margin-top: 3vw !important;
        font-size: 2.5vw !important;
    }

    #ApplicationModal {
        max-width: 100vw !important;
        margin-top: 0rem !important;
    }

    .ModalHeader {
        font-size: 4vw;
    }

    .ModalCloseBtn {
        font-size: 3vw;
    }

    #FavouritesTabHeader {
        font-size: 3vw
    }

    #RecentlyUsedTabHeader {
        font-size: 3vw
    }

    #ApplicationGroupAppCard {
        width: 100vw !important;
        height: 7vh !important;
        margin-left: 2vw;
        margin-right: 2vw;
    }

    #ApplicationGroupHeader {
        border-bottom: 1px solid rgba(183, 13, 127, 1);
        font-size: 4vw
    }

    .application-card {
        width: 100%;
        height: 10vh;
    }

    .ApplicationModal-GroupImg {
        height: 8vh;
        margin-right: 0.5rem;
        margin-top: 0.4rem;
    }

    .commingsoonMark {
        font-size: 0.6rem !important;
    }

    #GroupAppName {
        width: 24vw;
        font-size: 3vw;
    }

    #groupTitle {
        font-size: 3vw;
    }

    #groupApplications {
        max-height: 25vh;
        overflow-x: auto;
    }

    #groups {
        overflow-x: auto;
        max-height: 15rem;
    }

    .AppModalImg {
        margin-left: 7vw;
    }

    .AppModalImgCS {
        margin-left: -3vw;
    }

    .FavAppIconAppModal {
        float: right;
        font-size: 2.5vw;
    }

    .Application-Img {
        zoom: 65%;
    }
}

@media (max-width: 380px) {
    #groupApplications {
        max-height: 16vh;
        overflow-x: auto;
    }

    #groups {
        overflow-x: auto;
        max-height: 9rem;
    }

    .FavAppTileImg {
        margin-top: 1vw !important;
    }
}

@media (min-width: 576px) {
    .container {
        max-width: 100%;
    }

    .appItemContainer .tiles-2, .appItemContainer .tiles-3, .appItemContainer .tiles-max {
        -ms-flex: 0 0 calc(50% - 10px);
        flex: 0 0 calc(50% - 10px);
        max-width: calc(50% - 10px);
    }

    
}

@media (max-width: 576px) {
    #fvrtapps {
        display: flex;
        flex-wrap: wrap;
        max-height: 12rem;
    }

    #modalGroupApps {
        padding: 6rem 3rem;
    }

    .GroupScrollable #pinnedApps {
        padding-left: 3rem !important;
    }

    #report-container {
        height: 85vh;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 100%;
    }

        .container.container-content {
            position: absolute;
            margin-top: 4vh;
            top: 65px;
        }

    header {
        padding-bottom: 157.5px;
    }

    #pinnedApps > .row > .appItemContainer {
        height: calc(100vh - 40vh)
    }

        #pinnedApps > .row > .appItemContainer > .card > a {
            font-size: 25px;
        }

    .appItemContainer .tiles-max {
        -ms-flex: 0 0 calc(25% - 10px);
        flex: 0 0 calc(25% - 10px);
        max-width: calc(25% - 10px);
    }

    .appItemContainer .tiles-3 {
        -ms-flex: 0 0 calc(33.333337% - 10px);
        flex: 0 0 calc(33.333337% - 10px);
        max-width: calc(33.333337% - 10px);
    }

        .appItemContainer .tiles-3 .app-content {
            max-width: 9vw !important;
            max-height: 9vw !important;
        }

    .appItemContainer .tiles-4 {
        -ms-flex: 0 0 calc(25% - 10px);
        flex: 0 0 calc(25% - 10px);
        max-width: calc(25% - 10px);
    }

    .appItemContainer .tile-row-2 {
        min-height: 210px;
        height: calc((100vh - 170px) / 2);
    }

        .appItemContainer .tile-row-2 .app-content {
            max-width: 15vh !important;
            max-height: 15vh !important;
        }

    .appItemContainer .tile-row-3 {
        min-height: 150px;
        height: calc((100vh - 180px) / 3);
    }

        .appItemContainer .tile-row-3 .app-content {
            max-width: 8vh !important;
            max-height: 8vh !important;
        }

    #fvrtapps {
        display: flex;
    }

    .select2-container {
        width: 20vw !important;
    }

    .nav-link-menu {
        font-size: 1.2rem !important;
        padding-right: 0.5rem;
        padding-left: 0.5rem;
        color: #fff;
    }

    #groupApplications {
        max-height: 15vh;
        overflow-y: auto;
        overflow-x: hidden;
    }

}

@media (max-width: 992px) {
    .popoutTray {
        bottom: 65px;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        font-size: 1rem !important;
    }

    .select2-container {
        width: 95% !important;
    }

    .select2-results__option {
        font-size: 10px !important;
    }

    .select2-search--dropdown .select2-search__field {
        font-size: 10px !important;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 100%;
    }
   
    .appItemContainer .tiles-max {
        -ms-flex: 0 0 calc(20% - 10px);
        flex: 0 0 calc(20% - 10px);
        max-width: calc(20% - 10px);
    }

        .appItemContainer .tiles-max .app-content {
            max-width: 8vh !important;
            max-height: 8vh !important;
        }
}

@media (min-width: 1200px) {
    .container {
        max-width: 100%;
    }

    #groupApplications {
        max-height: 25vh;
        overflow-y: auto;
    }
}

@media (min-width: 1920px) {
    .container {
        max-width: 100%;
    }

    #groupApplications {
        max-height: 30vh;
        overflow-y: auto;
        overflow-x: hidden;
    }
}

@media (min-width: 2200px) {
    .select2-container .select2-selection--single {
        height: 2.5vh;
    }

    .select2-container--default .select2-selection--single {
        border: 1px solid #ccc;
        border-radius: 0px;
    }

    .select2-container {
        width: 20vw;
    }

    .select2-search--dropdown .select2-search__field {
        font-size: 0.8vw;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 2.2vh;
        font-size: 0.8vw;
    }

    .select2-results__option {
        font-size: 0.8vw;
    }

    .select2-container--default .select2-results > .select2-results__options {
        max-height: 20vh;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow b {
        border-width: 1.2vh 1.1vh 0 1.1vh;
        left: 0.2vw;
        margin-left: -1.4vw;
        margin-top: -1.2vh;
        top: 2vh;
    }

    .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
        border-width: 0 1.2vh 1.2vh 1.2vh;
    }
}

@media (min-width: 420px) and (max-width: 825px) {

    .contact-modal-content {
        height: 70vh !important;
    }

    .GroupApp-modal-dialog {
        max-width: 825px;
        margin: 15vh 10vw;
    }

    .FavAppTile {
        width: 18vw !important;
        height: 4vh !important;
    }

        #GroupAppModal {
            height: 36vw !important;
            width: 72vw !important;
        }

        #GroupHeader {
            font-size: 1.75vw;
        }

        #DivClose {
            font-size: 1.75vw;
        }

        .GroupModal-AppCard {
            width: 21vw !important;
            height: 9vh !important;
        }

        .GroupModal-Img {
            height: 6.5vh !important;
            margin-left: 6vw;
            margin-right: 6vw;
        }

        .GroupModal-AppName {
            font-size: 1.75vw !important;
        }

    #watermark {
        margin-top: 1.5vw !important;
        font-size: 1.5vw !important;
    }

    #ApplicationModal {
        max-width: 50vw !important;
        margin-top: 0.5rem !important;
    }

    .ModalHeader {
        font-size: 2vw;
    }

    .ModalCloseBtn {
        font-size: 1.5vw;
    }

    #FavouritesTabHeader {
        font-size: 1.5vw
    }

    #RecentlyUsedTabHeader {
        font-size: 1.5vw
    }

    #ApplicationGroupAppCard {
        max-width: 100vw !important;
        height: 7vh !important;
        margin-right: 2vw;
        width: 9vw;
        padding: 2px;
    }

    #ApplicationGroupHeader {
        border-bottom: 1px solid rgba(183, 13, 127, 1);
        font-size: 2vw;
    }

    .GroupTileText {
        font-size: 1.2vmax !important;
    }

    #groupTitle {
        font-size: 1.5vw;
    }

    #groupApplications {
        max-height: 15vh;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .application-card {
        width: 12vw;
    }

    #GroupAppName {
        font-size: 1.8vw;
        width: 12vw;
    }

    .fas {
        font-size: 1.5vw
    }

    .AppModalImg {
        margin-left: 1rem;
    }

    .AppModalImgCS {
        height: 5vh;
        margin: 1.5rem -1rem;
    }

    .AppModalImg {
        height: 6.5vh;
        margin-right: 0.7rem;
        margin-top: 0.8rem;
    }

    .favourite-card {
        height: 6vh;
    }

    #favGroupAppTitle {
        font-size: 1.2vw !important;
    }

    .Application-Img {
        height: 4vh;
        position: relative;
        left: 6px;
    }

    #fvrtapps {
        display: flex;
        max-height: 20rem;
    }

    .FavAppTileText {
        font-size: 1.25vmax !important;
    }

    .FavAppTileImg {
        width: 2.5vmax;
        margin-top: 0.75vw;
    }

}

@media (min-width: 825px) and (max-width: 992px) {

    .FavAppTile {
        width: 15vw;
        height: 6vh;
    }

    .FavAppTileText {
        font-size: 1.1vmax;
    }

    .FavAppTileImg {
        width: 2.75vmax;
        margin-top: 0.75vw;
    }

}

#OldWatermark {
    margin-top: 2vw !important;
    opacity: 0.8;
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -sand-transform: rotate(-45deg);
    transform: rotate(-45deg);
    font-size: 1.2rem !important;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff
}

.OldUIAppComingSoon {
    margin-top: 0.95rem !important;
    font-size: 0.95rem !important;
    margin-left: 1.5rem;
}

.OldCard {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.25rem;
}

.appItemContainer .OldCard,
.appItemContainer > .OldCard > a > .card-body {
    color: #fff;
}

.appItemContainer .OldCard {
    width: calc(100% - 10px);
    margin-right: 10px;
    margin-bottom: 10px;
}

    .appItemContainer .OldCard .card-footer {
        border-top: none;
        background-color: transparent;
    }

.drag-list {
    padding: 0;
}

.drag-item {
    padding: 0.75rem;
    margin-bottom: 1rem;
    cursor: move;
    height: 7vh !important;
}
.ui-autocomplete.ui-front.ui-menu.ui-widget.ui-widget-content {
    /* Overridden Styles */
    position: absolute;
    z-index: 1050 !important;
    top: 0;
    left: 0;
    cursor: default;
    background-color: #fff !important;
    padding: 3px;
    border: 1px solid #ccc;
    max-height: 200px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    /* add padding to account for vertical scrollbar */
    padding-right: 20px;
}

.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
    background: #007bff !important;
}

.breadcrumb-firstApp + .breadcrumb-item::before {
    content: "> ..... >" !important;
    display: inline-block !important;
    padding-right: 0.5rem !important;
    padding-left: 0.5rem;
    color: #6c757d !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: ">" !important;
}

.table th, .table td {
    border-top: 0rem !important;
}

.tableHeader {
    font-size: small !important;
    font-weight: 500 !important;
}

.folder-style {
    color: #FFE78F !important;
}

.nav.nav-pills > .nav-item > .folder-link {
    background-color: transparent !important;
    color: black !important;
}

.fileApplist {
    height: 60vh !important;
    overflow-y: auto;
}

.breadcrumb-item.header-active {
    color: #007bff !important;
}

.breadcrumb-firstApp.header-active {
    color: #007bff !important;
}

.breadcrumb-item.headerText {
    font-weight: bold !important;
}

.header-active:hover {
    text-decoration: underline;
    cursor: pointer;
}

#folderData {
    height: 53vh !important;
    overflow-y: auto;
    overflow-x: hidden;
}

#MoveFolderList {
    height: 24vh !important;
    overflow-y: auto;
    overflow-x: hidden;
}

.table-hover tbody tr:hover .folderEllipsis {
    visibility: visible !important;
}

.table-hover tbody tr .folderEllipsis {
    visibility: hidden !important;
}

.itemText {
    cursor: pointer;
    width: 25rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#filesFolderTable tbody td {
    padding-top: 0.9rem !important;
}

.folderOpenTextSize {
    font-weight: bold !important;
}

.fileImageSize {
    font-size: 1.6em !important;
}

#drpCompany + .btn-group {
    width: 100% !important;
}

#drpCompany .multiselect {
    width: 150px;
    background: #fff;
    border-radius: 3px;
    border: 1px solid #d0d0d0;
}

    #drpCompany .multiselect .multiselect-selected-text {
        text-align: left;
        float: left;
        width: 95%;
    }

#drpCompany .multiselect-fullwidth .btn-group {
    width: 100%;
}

#filesFolderTable td {
    border: none !important;
    
}

@media only screen and (max-width: 1024px) {
    #BudgetSummaryHeader {
        text-align: center !important;
    }
}

@media (max-width: 766px) {
    #locationCode {
        justify-content: center !important;
    }
    #btnApplyDiv {
        text-align: center !important;
    }
    #BudgetSummaryHeader {
        padding-top:24px;
    }
}

.cardContainer {
    display: flex;
    flex-direction: column;
}

.cardItem {
    flex: 1;
}

.carousel-item {
    overflow: hidden;
    aspect-ratio: 9 / 5 !important;
    object-fit: contain !important;
}

.nonFav-item {
    padding: 0.75rem;
    margin-bottom: 1rem;
    height: 7vh !important;
}