@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@100;200;400;600;700&display=swap');
@import url('https://cdn.jsdelivr.net/npm/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css');

:root {
    --buttons: rgba(50, 112, 223, 1);
    --widgetbackground: rgba(255, 255, 255, 1);
    --dashboardbackground: rgba(231, 236, 242, 1);
    --text: rgba(14, 14, 14, 1);
    --background: rgba(21, 46, 76, 1);
    --interactive: rgba(1, 114, 170, 1);
    --greyborder: rgba(200, 200, 200, 1);
    --white: rgba(255, 255, 255, 1);
    --black: rgba(0, 0, 0, 1);
    --fontfamily: 'Plus Jakarta Sans', sans-serif;
    --boxshadowhovertransition: 300ms box-shadow cubic-bezier(0.46, 0.03, 0.52, 0.96);
    --generaltransition: .15s all ease-in-out;
    --borderradiusboxes: 8px;
    --borderradiusbuttons: 5px;
    --textshadow: 0 0 7px black;
    --tileboxshadow: 0 3px 10px 0px rgba(0, 0, 0, .1);
    --inputfieldborder: #ddd;
    --charterblue: rgba(1, 114, 170, 1);
}

body {
    color: var(--text) !important;
    background-color: var(--dashboardbackground) !important;
    font-family: var(--fontfamily);
}

a,
.a,
.entitylist table thead tr th,
label,
.page-copy p {
    color: var(--background) !important;
    font-family: var(--fontfamily) !important;
    font-weight: 400 !important;
    font-size: 12px !important;
}

/* Makes the site scale properly to mobile and tablet */
.container {
    /* max-width: 100%; */
    max-width: 1170px !important;
}

/* Cursors */
table thead tr th {
    cursor: pointer;
}

/* ----------------------------------------- */
/* Start Private Mode */
/* ----------------------------------------- */

.private-mode-text>u>a,
.private-mode-signin-text>b>u>a {
    color: var(--white) !important;
}

.private-mode-banner {
    min-height: auto;
    height: 2px;
    background-color: black;
    overflow: hidden;
    transition: var(--generaltransition);
}
.private-mode-banner:hover {
    min-height: inherit;
    height: 30px;
    background-color: #222043;
    overflow: inherit;
    transition: var(--generaltransition);
}

/* ----------------------------------------- */
/* End Private Mode */
/* ----------------------------------------- */

/* ----------------------------------------- */
/* Start Redeem Invitation */
/* ----------------------------------------- */

ul.nav-account li a[title="Redeem invitation"],
ul.nav-account li a[title="Register"] {
    display: none;
}

/* ----------------------------------------- */
/* End Redeem Invitation */
/* ----------------------------------------- */



/* ----------------------------------------- */
/* Start Navbar */
/* ----------------------------------------- */


.navbar {
    padding: 0;
}
/* Site Logo */
img.site-logo {
    width: 180px;
}

/* Hide search in top nav */
.navbar li.nav-item a#search {
    display: none;
}

/* Mobile navbar button */
.navbar-dark .navbar-toggler {
    border: none !important;
    background-color: transparent;
}
/* Mobile navbar button on focus */
.navbar-dark .navbar-toggler:focus {
    background-color: transparent !important;
    box-shadow: none;
}

/* Text color of links in top-level of navigation */
.navbar .menu-bar>.navbar-nav>li>a {
    color: var(--white) !important;
    text-decoration: none;
    padding: 15px;
}

/* No underlines or background color changes on hover or focus on top-level of navigation */
.navbar .menu-bar>.navbar-nav>li>a:hover,
.navbar .menu-bar>.navbar-nav>li>a:focus {
    color: var(--dashboardbackground) !important;
    text-decoration: none !important;
    transition: var(--generaltransition);
    background-color: transparent !important;
}

/* Background color of top level navigation when hovering */
.navbar .navbar-nav>.open>a,
.navbar .navbar-nav>li>a:hover {
    background-color: transparent !important;
    outline: none;
}

/* Hides that UGLY divider between each link in the top-level nav */
.divider-vertical {
    display: none !important;
}

.dropdown-menu,
.navbar .navbar-nav>li>a:focus {
    border: none !important;
    outline: none !important;
}



/* Start Sub Menu */

/* Remove default dropdown menu arrow */
.nav-item .dropdown-toggle::after {
    border-top: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;
}
.dropdown-toggle::after {
    font-family: "FabricMDL2Icons";
    content: "\E70D";
    display: inline-block;
    vertical-align: middle;
}

/* Styles the drop-down menu from the top nav */
nav ul.nav li.dropdown ul.dropdown-menu {
    background-color: var(--white) !important;
    border-radius: var(--borderradiusboxes) !important;
    overflow: hidden;
}

/* Styles the links in the dropdown menu from the top nav */
nav ul.nav li.dropdown ul.dropdown-menu>li>a {
    color: var(--black) !important;
    text-decoration: none !important;
    /* padding: inherit !important; */
    border: none !important;
    border-color: transparent;
    margin-left: 0 !important;
    padding: 3px 10px;
    transition: var(--generaltransition);
}

/* Hover state sub menu items */
nav ul.nav li.dropdown ul.dropdown-menu>li:hover,
nav ul.nav li.dropdown ul.dropdown-menu>li:focus {
    background-color: var(--dashboardbackground);
    transition: var(--generaltransition);
    margin-left: 0 !important;
    border: none !important;
}

/* Styles the links when hovering in the dropdown menu from the top nav */
nav ul.nav li.dropdown ul.dropdown-menu>li>a:hover {
    color: var(--black);
    text-decoration: none;
    border-color: transparent;
    background-color: var(--dashboardbackground) !important;
    transition: var(--generaltransition);
    padding: 3px 10px;
}

.navbar.static-top {
    background-color: var(--background) !important;
    box-shadow: none !important;
}

/* Hides the site title from the header */
h1.siteTitle {
    display: none !important;
}

/* Start Navigation Icons */
nav>ul>li>a:before {
    content: "";
    display: block;
    height: 14px;
    width: 14px;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: -2px;
    /* top: 50%;
    translate: 0 -50%; */
}

nav>ul>li>a[title="Dashboard"]:before,
nav>ul>li>a[title="Home"]:before  {
    /* background-image: url('/hut-white.png'); */
    font-family: "FabricMDL2Icons";
    content: "\e80f";
    
}

nav>ul>li>a[title="My Charter Team"]:before,
nav>ul>li>a[title="Charter Team"]:before {
    background-image: url('/group-white.png');
}

nav>ul>li>a[title="Order Management"]:before,
nav>ul>li>a[title="My Orders"]:before,
nav>ul>li>a[title="Orders"]:before {
    /* background-image: url('/blank-page-white.png'); */
    font-family: "FabricMDL2Icons";
    content: "\EFE0";
    display: inline-block;
    vertical-align: middle;
}

nav>ul>li>a[title="Charter Services"]:before,
nav>ul>li>a[title="Services"]:before {
    background-image: url('/call-center-white.png');
}

nav>ul>li>a[title="Marketplace"]:before {
    font-family: "FabricMDL2Icons";
    content: "\E7BF";
}

nav>ul>li>a[title="Executive Reporting"]:before {
    font-family: "FabricMDL2Icons";
    content: "\E999";
}

nav>ul>li>a[title="Dashboards"]:before {
    font-family: "FabricMDL2Icons";
    content: "\EB05";
}
nav>ul>li>a[title="Cases"]:before {
    font-family: "FabricMDL2Icons";
    content: "\EB54";
}
nav>ul>li:last-child>a:before {
    font-family: "FabricMDL2Icons";
    content: "\E77B";
}

nav>ul>li>a[title="Support"]:before {
    background-image: url('/question-white.png');
    
}
nav>ul>li>a[title="Sign Out"]:before {
    /* background-image: url('/question-white.png'); */
    font-family: "FabricMDL2Icons";
    content: "\F3B1";
}
nav>ul>li>a[title="Sign In"]:before,
nav>ul>li>a[title="Sign in"]:before,
nav>ul>li>a[aria-label="Sign in"]:before {
    /* background-image: url('/question-white.png'); */
    font-family: "FabricMDL2Icons";
    content: "\e72e";
}

/* End Navigation Icons */

/* ----------------------------------------- */
/* End Navbar */
/* ----------------------------------------- */

/* ----------------------------------------- */
/* Start Main Content */
/* ----------------------------------------- */

#mainContent,
#content-container {
    background-color: var(--dashboardbackground);
    /*border-radius: var(--borderradiusboxes);
    padding-top: 12px;*/
}
.columnBlockLayout {
    margin-top: 30px !important;
}
/* Tightens up front page tiles in mobile and tablet */
@media screen and (max-width: 767px) {
    .columnBlockLayout {
        margin-top: inherit !important;
        margin-bottom: inherit !important;
    }
}

/* ----------------------------------------- */
/* End Main Content */
/* ----------------------------------------- */


/* ----------------------------------------- */
/* Start Sections */
/* ----------------------------------------- */

/*.columnBlockLayout {
    background-color: var(--dashboardbackground) !important;
}
.welcomerow {
    border-radius: 50px;
}
.columnBlockLayout img {
    height: inherit !important;
}
.sectionBlockLayout {
    display: table;
    width: 100%;
}*/

/* ----------------------------------------- */
/* End Sections */
/* ----------------------------------------- */





/* ----------------------------------------- */
/* Start Option Tiles */
/* ----------------------------------------- */

.option__tile {
    text-decoration: none;
    background-color: var(--white);
    border-radius: var(--borderradiusboxes);
    box-shadow: 0 3px 10px 0px rgba(0, 0, 0, .1);
    display: block;
    padding: 20px;
}

/* ----------------------------------------- */
/* End Option Tiles */
/* ----------------------------------------- */


/* ----------------------------------------- */
/* Start Dashboard Tiles */
/* ----------------------------------------- */


.dashboard-tile-container {
    padding-top: 50px !important;
    padding-bottom: 75px !important;
    display: flex;
    flex-wrap: wrap;
}
.dashboard-tile-wrapper {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    text-align: center;
}
.dashboard-tile {
    background-color: var(--white);
    border-radius: var(--borderradiusboxes);
    box-shadow: 0 3px 10px 0px rgba(0, 0, 0, .1);
    display: block;
    padding: 50px 20px;
    text-decoration: none;
}

/* How a tile reacts when hovered on */
.dashboard-tile:hover {
    box-shadow: 0 3px 10px 0px rgba(0, 0, 0, .3);
    transition: var(--generaltransition);
    /* transition: var(--boxshadowhovertransition); */
    text-decoration: none !important;
    transform: scale(1.05);
}
.dashboard-tile.coming-soon:hover {
    box-shadow: none;
    transition: none;
    transform: none;
}

/* Heck. Let's stop ALL buttons from underlining when hovered on */
a:not(.btn):hover {
    text-decoration: none !important;
}

/* Sets the width of the icon centers it in the tile */
.dashboard-tile img, 
.dashboard-tile-icon {
    width: 75px;
    height: 75px;
    margin: 20px auto;
    display: block;
    text-align: center;
}
.dashboard-tile-icon::before {
    font-family: "FabricMDL2Icons";
    font-size: 60px;
    color: var(--background);
}
.icon-group::before {
    content: "\E902";
}
.icon-documentset::before {
    content: "\EED6";
}
.icon-projectmanagement::before {
    content: "\E840";
}
.icon-headsetsolid::before {
    content: "\F348";
}
.icon-shoppingcart::before {
    content: "\E7BF";
}
.icon-ringer::before {
    content: "\EA8F";
}
.dashboard-tile p.dashboard-tile-title {
    font-size: 16px !important;
}
/* Makes all child elements of the tiles blocks so we can position them easier */
.dashboard-tile p.dashboard-tile-title,
.dashboard-tile p.dashboard-tile-desc {
    display: block;
}

/* More overriding of tile underlines when hovering */
.dashboard-tile:hover p.dashboard-tile-title,
.dashboard-tile:hover p.dashboard-tile-desc {
    text-decoration: none;
}

/* Sets the font size of the tile description */
.dashboard-tile p.dashboard-tile-desc {
    font-size: 14px;
}
.dashboard-tile-notifications > .dashboard-tile {
    position: relative;
}
/* .dashboard-tile-notifications > .dashboard-tile::before {
    content: "3";
    position: absolute;
    right: 4px;
    top: 4px;
    background: red;
    height: 22px;
    width: 22px;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
} */

.dashboard-tile-notifications
/*.dashboard-tile-support,*/
/*.dashboard-tile-projects,*/
/*.dashboard-tile-charter-team*/ {
    /* pointer-events: none;
    opacity: 0.5; */
}
a.dashboard-tile {
    position: relative;
    overflow: hidden;
}
.dashboard-tile-wrapper.coming-soon {
    pointer-events: none;
    opacity: 0.5 !important;
}
.dashboard-tile-wrapper.coming-soon a {
    box-shadow: none !important;
}
.dashboard-tile-wrapper.coming-soon a::before
/*.dashboard-tile-support a::before,*/
/*.dashboard-tile-projects a::before,*/
/*.dashboard-tile-charter-team a::before*/ {
    content: "Coming soon...";
    display: block;
    position: absolute;
    background: rgba(100, 100, 100, 0.9);
    color: white;
    padding: 10px;
    transform: rotate(43deg) translate(-50%, -50%);
    z-index: 100;
    top: 25%;
    left: 83%;
    width: 100%;
    text-align: center;
    box-shadow: 10px 5px 71px -14px rgba(0, 0, 0, 0.75);
    border-radius: 22px;
    transform-origin: top left;

}





/* ----------------------------------------- */
/* End Dashboard Tiles */
/* ----------------------------------------- */



/* ----------------------------------------- */
/* Start Typography */
/* ----------------------------------------- */


h1,
h2,
h3,
h4,
h5,
p,
nav ul li a,
.navbar-static-top.navbar .menu-bar>.navbar-nav>li>a,
footer .footer-bottom,
footer .footer-bottom p,
label,
input.form-control,
.filterLabel {
    font-family: var(--fontfamily) !important;
    font-weight: 200 !important;
}

.navbar-static-top.navbar .menu-bar>.navbar-nav>li>a,
footer .footer-bottom,
footer .footer-bottom p,
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a,
.entitylist .entity-grid.entitylist table tbody,
.entitylist .entity-grid.entitylist .view-pagination ul.pagination li a,
button,
.entitylist table tbody,
.filterLabel,
.downloadLabel,
.entriesPerPageLabel,
select[name="myInvoicesTable_length"],
select[name="invoiceDetailsTable_length"] {
    font-size: 12px !important;
    font-weight: 200 !important;
}



/* ----------------------------------------- */
/* End Typography */
/* ----------------------------------------- */







/* ----------------------------------------- */
/* Start Footer */
/* ----------------------------------------- */

footer .footer-bottom,
footer .footer-bottom p {
    background-color: var(--background) !important;
    color: var(--white) !important;
}

/* ----------------------------------------- */
/* End Footer */
/* ----------------------------------------- */








/* ----------------------------------------- */
/* Start Dataverse Table Styling */
/* ----------------------------------------- */

table {
    width: 100% !important;
}

/* Mobile view of table */
@media screen and (max-width: 767px) {
    .table-responsive {
        border: none !important;
    }
}




/* Stop wrapping on column headers */
table thead tr th a {
    white-space: nowrap;
}

/* Stop wrapping on table cells */
table tbody tr td {
    white-space: nowrap;
}

/* Wrap notes */
#notescontrol .notes .note .description {
    white-space: normal;
}

/* Remove attachment border in notes */
.entity-timeline .note .attachment-outer-border {
    border: none !important;
}

/* Hide "Created By" */
.entity-timeline .note .attachment-outer-border .createdby {
    display: none;
}

/* Filter Button Styling */
/* ul#entitylist-filters+.pull-right button {
    background-color: var(--buttons);
    border-color: var(--buttons);
    color: var(--white);
    border-radius: var(--borderradiusbuttons);
}
.filterButtons button.btn {
    margin-right: 2px;
}
.filterButtons button.btn:hover {
    cursor: pointer;
}
ul#entitylist-filters+.pull-right button:hover {
    border-color: var(--background);
    background-color: var(--background);
    transition: var(--generaltransition);
}

.filterButtons .filterLabel {
    display: block;
} */



/* Change properties of the filters box */
.entitylist .panel-body {
    border-radius: var(--borderradiusboxes);
}

/* Filter Text Input */
ul#entitylist-filters input {
    background-color: var(--white) !important;
    border-color: #ddd;
    box-shadow: none !important;
    border-radius: 0 15px 15px 0;
}

/* Style filter icon to left of input */
.entitylist .entitylist-filter-option-text .input-group-addon {
    border-radius: 15px 0 0 15px;
}

/* Hide border around filters box */
.entitylist .panel-default {
    border-color: transparent;
}

/* Change background of table to white */
.entitylist {
    background-color: var(--white) !important;
    padding: 16px;
    border-radius: var(--borderradiusboxes);
    box-shadow: 0 3px 10px 0px rgba(0, 0, 0, .1);
    margin-bottom: 24px;
}

/* Stops immediate child of entitylist from inheriting properties of parent. They share the class "entitylist */
.entity-grid.entitylist {
    padding: inherit;
    border-radius: 0;
    box-shadow: none;
    border: none;
}

/* Hover state of table header */
.entitylist .entity-grid.entitylist table thead tr th a:hover {
    color: inherit;
    text-decoration: none;
}

/* Text color of header text when hovered and focus */
.entitylist .entity-grid.entitylist table thead tr th a:hover,
.entitylist .entity-grid.entitylist table thead tr th a:focus,
.entitylist .entity-grid.entitylist table thead tr th .a:hover,
.entitylist .entity-grid.entitylist table thead tr th .a:focus {
    color: var(--black);
    background-color: var(--white);
}

/* Removes outline around header when clicked for sorting */
.entitylist .entity-grid.entitylist table thead tr th a:focus {
    outline: none !important;
}

/* Bold the header for the column that's currently being sorted */
.entitylist th[aria-sort="ascending"],
.entitylist th[aria-sort="descending"],
.entitylist th[aria-label*="sorting"] {
    font-weight: 600 !important;
}

/* .entitylist th[aria-sort="ascending"]::after,
.entitylist th[aria-sort="descending"]::after {
    display: block;
    float: right;
}

.entitylist th[aria-sort="ascending"]::after {
    content: '\2303';
}

.entitylist th[aria-sort="descending"]::after {
    content: '\2303';
    transform: rotate(180deg);
}*/

/* Change size of up and down arrows when sorting columns */
.entitylist .entity-grid.entitylist table thead tr th a .fa-arrow-down::before,
.entitylist .entity-grid.entitylist table thead tr th a .fa-arrow-up::before {
    font-size: 8px !important;
}

/* Align up and down arrows on headers better vertically */
.entitylist .entity-grid.entitylist table thead tr th a .fa-arrow-down,
.entitylist .entity-grid.entitylist table thead tr th a .fa-arrow-up {
    top: 0;
}

/* Remove background color, border and inset box shadow from Search input field on lists */
.entitylist-search input.form-control,
input.form-control {
    border: none;
    background-color: transparent !important;
    box-shadow: none !important;
}

.entitylist-search input.form-control:focus,
input.form-control:focus,
input.form-control:focus-visible,
input.form-control:focus-within {
    border-color: #ddd;
}

/* Add a border to search input and button */
.entitylist-search,
div[id*="myTable"] label input[type="search"],
input[type="search"]

/*#myTable_filter label input,
#myTable2_filter label input,
#myTable3_filter label input*/
    {
    border: 1px solid var(--dashboardbackground);
    border-radius: var(--borderradiusboxes);
    overflow: hidden;
}

/* Styles Tom's hybrid table's search box */
div[id*="myTable"] label input[type="search"],
input[type="search"]

/* #myTable_filter label input,
#myTable2_filter label input,
#myTable3_filter label input */
    {
    height: 31px;
    padding: 6px 12px;
    font-size: 15px;
    line-height: 1.42857;
    background-color: var(--white);
    margin-left: 10px;
}

div[id*="myTable"] label input[type="search"]:focus,
input[type="search"]:focus,
input[type="search"]:focus-visible,
input[type="search"]:focus-within

/* #myTable_filter label input:focus,
#myTable2_filter label input:focus,
#myTable3_filter label input:focus */
    {
    border-color: #ddd;
    outline: none;
}

table thead tr th.sorting {
    position: relative;
}

/* Sets TH sorting asc and desc icons */
table thead tr th.sorting.sorting_asc:after,
table thead tr th.sorting.sorting_desc:after {
    /* content: "▲"; */
    content: "\2303";
    /*height: 5px;
    width: 5px;*/
    display: block;
    /*float: right;*/
    /*text-align: center;
    font-size: 8px;
    margin-top: 3px;*/
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
}

table thead tr th.sorting.sorting_desc:after {
    transform: rotate(180deg) translate(0, 50%);
}

/* Gets rid of outline when focus-visible */
div[id*="myTable"] label input:focus-visible {
    outline: none;
}

/* Floats the search in Tom's table to the right */
.dataTables_filter {
    float: right;
    font-size: 12px;
}

/* Centers and styles the number of results drop down at top of screen */
.dataTables_length {
    text-align: center;
    font-size: 12px;
}

/* Centers and styles status row */
.dataTables_info {
    text-align: center;
    font-size: 12px;
    font-weight: 200;
}

/* Styles Pagination */
/* .dt-paging,
.dt-info {
    text-align: center;
}

.dt-info {
    font-family: var(--fontfamily);
    font-size: 12px;
    font-weight: 200;
    word-spacing: 2px;
}

.dataTables_paginate a.disabled,
.dt-paging button.dt-paging-button.disabled {
    color: #ccc !important;
    cursor: not-allowed !important;
}

.dataTables_paginate a.previous span,
.dataTables_paginate a.next span {
    display: none;
}

.dataTables_paginate a.previous::before,
.dataTables_paginate a.next::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.dataTables_paginate a.previous::before {
    content: "<";
}

.dataTables_paginate a.next::before {
    content: ">";
}

.dataTables_paginate a.paginate_button,
.dt-paging button.dt-paging-button {
    display: inline-block;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    position: relative;
    border: none;
    background-color: transparent;
    margin-left: 3px;
}

.dataTables_paginate a.paginate_button:hover,
.dt-paging button.dt-paging-button:hover {
    cursor: pointer;
}

.paginate_button.current {
    position: relative;
}

.paginate_button span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.dataTables_paginate span a.paginate_button.current,
.dt-paging .dt-paging-button.current {
    background-color: var(--interactive) !important;
    color: var(--white) !important;
}
*/

/* Styes the number of results drop down input */
div[id*="myTable"] label select,
select {
    border: 1px solid var(--dashboardbackground) !important;
    border-radius: var(--borderradiusboxes) !important;
    padding: 6px 12px;
    font-weight: 200;
    font-size: 12px;
}

select[name="myRecentInvoicesTable_length"]::before {
    content: "Test";
}

/* Gets rid of outline when focus-visible */
#myTable_length label select:focus-visible,
select:focus-visible {
    outline: none;
}

/* Remove button background on search */
/* .entitylist-search .input-group-btn button {
    background-color: none !important;
    border: none !important
} */

/* Change default color of search icon */
/* .entitylist-search .input-group-btn button .fa-search::before {
    color: rgba(0, 0, 0, 0.5);
} */

/* Change search button hover state */
/* .entitylist-search .input-group-btn button:hover {
    background-color: transparent !important;
    border: none;
}*/

/* Change placeholder text color in search box */
::placeholder {
    color: rgba(0, 0, 0, 0.5);
}

/* Change search button hover state */
/* .entitylist-search .input-group-btn button:hover .fa-search::before {
    color: var(--black);
    transition: var(--generaltransition);
} */

/* Highlights row on hover */
.entitylist table tbody tr:hover {
    background-color: var(--dashboardbackground);
    transition: var(--generaltransition);
}

/* Stop pagination from wrapping */
.entitylist .entity-grid.entitylist .view-pagination ul.pagination li a {
    white-space: nowrap;
}

/* Change selected color in pagination */
.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover {
    background-color: var(--interactive) !important;
    height: 32px;
    width: 32px;
}

/* Reset size of pagination selected circles */
.pagination>li>a,
.pagination>li>span {
    width: inherit;
    height: inherit;
}

/* Center pagination to table */
.jquery-bootstrap-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Disabled pagination arrow styling */
.pagination>.disabled>span,
.pagination>.disabled>span:hover,
.pagination>.disabled>span:focus,
.pagination>.disabled>a,
.pagination>.disabled>a:hover,
.pagination>.disabled>a:focus {
    color: #ccc;
    background-color: transparent !important;
    border-color: #ddd;
    cursor: not-allowed;
}

/* Text color of current page in pagination */
a[aria-current="page"] {
    color: var(--white) !important;
}

/* Centers pagination on Tom's custom tables */
.dataTables_paginate {
    text-align: center;
    margin-top: 12px;
}

/* Styling of drop down button on individual row items */
td[aria-label="action menu"] .dropdown button {
    border-color: transparent;
    outline: none;
    border-radius: var(--borderradiusbuttons);
}

.dropdown.action:focus-visible {
    outline: none !important;
}

/* Styling of hover state on drop down button on individual row items */
td[aria-label="action menu"] .dropdown button:hover,
td[aria-label="action menu"] .dropdown button:active,
td[aria-label="action menu"] .dropdown button:focus,
td[aria-label="action menu"] .dropdown button:focus-visible {
    transition: var(--generaltransition);
    color: var(--black);
    background-color: transparent;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* */
.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:focus-visible,
.dropdown-menu>li>a:active {
    border-color: transparent !important;
}

/* Hover state of text links in rows */
table tr td a:hover,
table tr td a:focus {
    color: var(--black);
    text-decoration: none !important;
}

/* Let's hide that UGLY tooltip when hovering over a hyperlink in the table, shall we? */
.tooltip-inner,
.tooltip-arrow {
    display: none;
}

/* Center the content of table cells vertically EVERYWHERE */
.table>thead>tr>th,
.table>thead>tr>td,
.table>tbody>tr>th,
.table>tbody>tr>td,
.table>tfoot>tr>th,
.table>tfoot>tr>td {
    vertical-align: middle;
    font-size: 12px;
    padding: 8px;
    white-space: nowrap;
}

/* Float the record number picker to the left and the search box to the right*/
#myTable_wrapper .dataTables_length,
#QuoteDetailsTable_wrapper .dataTables_length,
.modal-body #invoiceDetailsTable_length,
.dt-layout-row:first-child .dt-start {
    width: 50%;
    float: left;
    text-align: left;
}

#myTable_wrapper .dataTables_filter,
#QuoteDetailsTable_wrapper .dataTables_filter,
.modal-body #invoiceDetailsTable_filter,
.dt-layout-row:first-child .dt-end {
    width: 50%;
    float: right;
}

.dt-end .dt-search label[for="dt-search-0"] {
    text-align: right;
}

/* Hide the actions column in the grid */
th[aria-label="Actions"],
td[aria-label="action menu"] {
    display: none;
}
/* Ahow the actions column in the grid for these specific exceptions */
.customer-admin-login-management th[aria-label="Actions"],
.customer-admin-login-management td[aria-label="action menu"] {
    display: table-cell;
}

/* ----------------------------------------- */
/* End Dataverse Table Styling */
/* ----------------------------------------- */






/* ----------------------------------------- */
/* Start Pagination */
/* ----------------------------------------- */

ul.pagination li.page-item.active a {
    background-color: var(--charterblue) !important;
}


/* ----------------------------------------- */
/* End Pagination */
/* ----------------------------------------- */







/* ----------------------------------------- */
/* Start Modals */
/* ----------------------------------------- */

/* Blurs background when modal open */
.modal-open .modal {
    backdrop-filter: blur(14px);
    transition: var(--generaltransition);
}

/* Puts a pretty border radius on the modal window */
.modal .modal-dialog {
    border-radius: var(--borderradiusboxes);
    overflow: hidden;
    box-shadow: 0 3px 10px 0px rgba(0, 0, 0, .1);
}

/* Remove margin top from modal header text */
.modal .modal-dialog .modal-content .modal-header h4 {
    margin-top: 0;
}

/* Increases size of modal close 'X' */
.modal .modal-dialog .modal-content .modal-header button.close,
.modal .modal-dialog .modal-content .modal-header button.btn-close,
.modal .modal-dialog .modal-content .modal-header button.btn-close > span,
.modal .modal-dialog .modal-content .modal-header button.maximize,
.modal .modal-dialog .modal-content .modal-header button.btn-maximize,
.modal .modal-dialog .modal-content .modal-header button.btn-maximize > span {
    font-size: 34px !important;
    margin-top: -6px;
    display: block;
}

/* Remove unnessary padding in modal body */
.modal-body {
    padding: 0 !important;
}

.modal-body .tab-column {
    background-color: var(--dashboardbackground);
}

/* Remove UGLY border around modal content */
.crmEntityFormView,
.entitylist,
.modal-content,
.popover-content {
    border: none !important;
}

.crmEntityFormView {
    background: transparent !important;
}
.crmEntityFormView label {
    background: transparent !important;
}

/* Adds a bit of top padding for the fieldset */
.crmEntityFormView fieldset {
    padding-top: 16px !important;
}

/* Remove focus outline on line items when clicking on them in a modal */
.crmEntityFormView .form-control.readonly:focus,
.crmEntityFormView .form-control[readonly][disabled]:focus,
.form-readonly .form-control:focus {
    outline: none !important;
}

/* Set left padding of section title in modals */
fieldset legend.section-title {
    padding-left: 28px;
    border-bottom: 1px solid var(--interactive) !important;
}

/* Form cell font size in modals */
html[dir=ltr] .crmEntityFormView .cell input[type=text],
html[dir=ltr] .crmEntityFormView .cell select,
html[dir=ltr] .crmEntityFormView .cell textarea {
    font-size: 14px;
    font-weight: 400 !important;
}

/* Make form text areas a bit taller in modals */
html[dir=ltr] .crmEntityFormView .cell textarea {
    min-height: 75px;
    overflow-y: scroll;
}

.modal-body .columnBlockLayout {
    margin-top: 0;
    margin-bottom: 10px;
}

.modal-body .crmEntityFormView .tab {
    margin-bottom: 0;
}

/* Remove ugle icon from modal title */
.modal-header h4>span.fa {
    display: none;
}

.modal-footer {
    background-color: var(--dashboardbackground);
}

fieldset legend.section-title {
    border-bottom: 1px solid var(--greyborder) !important;
}
/* ----------------------------------------- */
/* End Modals */
/* ----------------------------------------- */








/* ----------------------------------------- */
/* Start Filter Panel */
/* ----------------------------------------- */

ul#entitylist-filters {
    float: left;
    margin-bottom: 0;
}

label.entitylist-filter-option-group-label.h4 {
    font-size: 12px;
    margin-top: 0;
}

/* ----------------------------------------- */
/* End Filter Panel */
/* ----------------------------------------- */


/* ----------------------------------------- */
/* Start Table Filters */
/* ----------------------------------------- */


/* ----------------------------------------- */
/* End Table Filters */
/* ----------------------------------------- */




/* ----------------------------------------- */
/* Start Dashboard Styling */
/* ----------------------------------------- */

/* Center text horizontally and vertically in the image below it */
.col-md-4.columnBlockLayout p a {
    margin-top: 80px;
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: var(--white);
    text-shadow: var(--textshadow);
}

.col-md-8.columnBlockLayout p a {
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: var(--white);
    text-shadow: var(--textshadow);
}

.col-md-8.columnBlockLayout a[alt="NotificationCentre"]+p a {
    margin-top: -116px;
}

.col-md-8.columnBlockLayout a[alt="OrderSummary"]+p a,
.col-md-8.columnBlockLayout a[alt="ActiveTickets"]+p a,
.col-md-8.columnBlockLayout a[alt="ActiveProjects"]+p a {
    margin-top: -84px;
}

.col-md-4.columnBlockLayout p:hover a,
.col-md-4.columnBlockLayout p a:hover,
.col-md-8.columnBlockLayout p:hover a,
.col-md-8.columnBlockLayout p a:hover {
    text-decoration: none;
}

.col-md-4.columnBlockLayout img[name="CustomerProfile copy.jpg"] {
    margin-top: -10px;
}

.col-md-4.columnBlockLayout img[name="KPI1.jpg"] {
    margin-top: -2px;
}

.col-md-4.columnBlockLayout img[name="KPI2.jpg"] {
    margin-top: 5px;
}

.col-md-4.columnBlockLayout a img,
.col-md-8.columnBlockLayout a img {
    border-radius: var(--borderradiusboxes);
    box-shadow: var(--tileboxshadow);
    position: relative;
    opacity: 0.85;
}

.col-md-4.columnBlockLayout a:hover img,
.col-md-8.columnBlockLayout a:hover img {
    opacity: 1;
    transition: var(--generaltransition);
}

.col-md-4.columnBlockLayout a img::before,
.col-md-8.columnBlockLayout a img::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.4);
}

.col-md-4.columnBlockLayout p a,
.col-md-8.columnBlockLayout p a {
    z-index: 10;
}

/* ----------------------------------------- */
/* End Dashboard Styling */
/* ----------------------------------------- */




/* ----------------------------------------- */
/* Start Profile Page Styling */
/* ----------------------------------------- */

/* Styles the profile info box */
/*.well.profile-info {
    border-radius: var(--borderradiusboxes);
    background-color: var(--dashboardbackground);
}*/
/* Makes the profile photo a circle */
.well.profile-info img {
    border-radius: 50%;
}

/* Styles profile security box */
/*.panel.panel-default.nav-profile {
    border-radius: var(--borderradiusboxes);
    overflow: hidden;
}*/
.well {
    border: none;
    box-shadow: none;
    -webkit-box-shadow: none;
}

/* Breadcrumb Styling */
ul.breadcrumb li a,
.breadcrumb>li+li:before,
.breadcrumb>.active {
    color: var(--dashboardbackground) !important;
}

.breadcrumb>li+li:before {
    padding: 0 1px;
    font-weight: 100;
}

/* Style the page title */
.page-header h1 {
    color: var(--dashboardbackground) !important;
}

/* Style Chart Titles */
h2.chart-title {
    font-size: 22px;
}
h3.chart-title {
    font-size: 18px;
    text-align: center;
}

/* Hide "No data available" */
div.nodata[role="alert"] {
    display: none;
}

/* Style dashboard charts */
rect.highcharts-background {
    fill: transparent !important;
}

.alert-info {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
    border-radius: .25rem;
}

/* .btn-info,
.btn-info:hover {
    color: #fff !important;
    background-color: var(--buttons);
    border-color: var(--buttons);
    border-radius: 2px;
} */

/* Textarea */
html[dir=ltr] .crmEntityFormView .cell textarea,
html[dir=ltr] .crmEntityFormView .cell select {
    /* background-color: transparent !important; */
    border: 1px solid var(--inputfieldborder);
    border-radius: var(--borderradiusboxes);
}

.form-horizontal .radio,
.form-horizontal .checkbox {
    padding: 0 28px 20px;
}
input[readonly="readonly"],
textarea[readonly="readonly"] {
    padding-top: 0;
    background: transparent !important;
}
textarea[readonly="readonly"] {
    border: none;
    background-color: transparent !important;
}

/* ----------------------------------------- */
/* End Profile Page Styling */
/* ----------------------------------------- */



/* ----------------------------------------- */
/* Start Form Styling */
/* ----------------------------------------- */

input.form-control {
    background-color: var(--white) !important;
    border: 1px solid var(--inputfieldborder);
    border-radius: var(--borderradiusboxes);
}

input[readonly="readonly"] {
    background-color: transparent !important;
    border: inherit !important;
}

.nav-tabs>li>a {
    border-radius: 8px 8px 0 0;
}

.nav-tabs>li>a:focus,
.nav-tabs>li>a:focus-visible,
.nav-tabs>li>a:focus-within,
.nav-tabs>li>a:active,
a:focus {
    outline: none !important;
}


/* ----------------------------------------- */
/* End Form Styling */
/* ----------------------------------------- */



/* ----------------------------------------- */
/* Start Button Styling */
/* ----------------------------------------- */

/* button.btn-primary {
    background-color: var(--buttons) !important;
    border-radius: 5px;
    padding: 5px 10px;
}

button.btn-primary:hover {
    padding: 5px 10px;
}

.btn {
    border-radius: 5px;
}

.btn,
.btn:hover,
.btn:focus,
.btn:active,
.btn:focus-visible,
.btn:focus-within,
button.dt-button {
    outline: none !important;
}

button.dt-button.buttons-copy:hover,
button.dt-button.buttons-csv:hover,
button.dt-button.buttons-excel:hover,
button.dt-button.buttons-pdf:hover,
button.btn.btn-outline-primary:hover {
    color: var(--background) !important;
}

.btn-default {
    border-radius: 5px !important;
}

.btn-default:hover {
    transition: var(--generaltransition);
    color: var(--white) !important;
}

button.btn-primary:hover {
    transition: var(--generaltransition);
    border: 1px solid var(--background);
} 
    
.btn,
.btn:hover,
.btn:focus,
.btn:visited,
.btn:focus-visible,
.btn:focus-within,
button.dt-button {
    outline: none;
    border: 1px solid transparent;
    padding: 5px 10px;
    line-height: 1.5;
    border-radius: 5px;
}
*/

/* Sets the default color of text in buttons within the table. Like the actions menu */
/* .button2,
.btn-default {
    color: var(--background) !important;
}*/

/* Download button styling */
button.btn.btn-download {
    border: none;
    background-color: transparent !important;
    color: var(--background) !important;
    font-family: inherit;
    font-weight: 400 !important;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    cursor: pointer;
}
button.btn.btn-download:hover {
    border: none !important;
}
button.btn.btn-download::before {
    font-family: "FabricMDL2Icons";
    content: "\E896";
    display: inline-block;
}

/* Default button appearance */
.btn-default,
.btn-primary {
    color: var(--charterblue) !important;
    border-color: var(--charterblue) !important;
    background-color: transparent !important;
    border-width: 1px !important;
}
.btn-default:hover,
.btn-primary:hover {
    color: white !important;
    background-color: var(--charterblue) !important;
}
    

/* ----------------------------------------- */
/* End Button Styling */
/* ----------------------------------------- */



/* ----------------------------------------- */
/* Start Custom Table Styling */
/* ----------------------------------------- */

.entitylist .entity-grid .table-responsive table tbody tr td.OrderTotal,
.entitylist .entity-grid .table-responsive table tbody tr td.invoiceTotal,
.entitylist .entity-grid .table-responsive table tbody tr td.daysPastDue,
.entitylist .entity-grid .table-responsive table tbody tr td.UnitPrice,
.entitylist .entity-grid .table-responsive table tbody tr td.ExtendedPrice,
.entitylist .entity-grid .table-responsive table tbody tr td.UnitCost,
th.DaysPastDueHeader,
th.UnitPriceHeader,
th.ExtendedPriceHeader,
th.OrderTotalHeader,
th.UnitCostHeader,
th.UnitCostHeader {
    text-align: right;
}

th.QuantityHeader,
td.Quantity {
    text-align: center;
}

/* .filterButtons,
.dataTables_length,
.dataTables_filter {
    display: inline-block;
    width: 33%;
}*/
.dataTables_filter {
    text-align: right;
}

.entitylist .entity-grid .table-responsive table tbody tr td.negative-value,
td.daysPastDue {
    color: red;
}

.card-body, .list-group-item {
    background-color: transparent !important;
}

/* ----------------------------------------- */
/* End Custom Table Styling */
/* ----------------------------------------- */




/* ----------------------------------------- */
/* Start Please Wait Spinner Message */
/* ----------------------------------------- */

.please-wait-spinner-message {
    text-align: center;
    font-size: 12px;
    font-weight: 200 !important;
    padding: 20px;
}

/* ----------------------------------------- */
/* End Please Wait Spinner Message */
/* ----------------------------------------- */





/* ----------------------------------------- */
/* Start Product Search */
/* ----------------------------------------- */

.searchBlock {
    padding-top: 60px;
}
.spin.spin-under-search-button {
    margin: 20px auto;
}

.searchBlock .searchFormContainer {
    text-align: center;
}

.searchBlock .searchFormContainer form input#productName {
    width: 550px;
    height: 46px;
    border-radius: 23px;
    border: 1px solid var(--greyborder);
    padding: 0 20px;
    text-align: center;
}

.searchBlock .searchFormContainer form input#productName::placeholder {
    opacity: 0.5;
}

.searchBlock .searchFormContainer form input#startDate,
.searchBlock .searchFormContainer form input#endDate {
    border: 1px solid var(--greyborder);
    font-family: var(--fontfamily) !important;
    font-weight: 200 !important;
    font-size: 12px !important;
    padding: 4px;
    border-radius: 20px;
    text-align: center;
}

.searchFormContainer form input#productName:focus-visible,
.searchFormContainer form input#startDate:focus-visible,
.searchFormContainer form input#endDate:focus-visible {
    border: 1px solid var(--interactive);
    outline: none;
}

.searchFormContainer form #exactMatch,
.searchFormContainer form #startDate {
    margin-right: 20px;
}

.resultsBlock {
    margin-top: 0 !important;
}

/* ----------------------------------------- */
/* End Product Search */
/* ----------------------------------------- */







/* ----------------------------------------- */
/* Start Contact Cards Grid */
/* ----------------------------------------- */

.team-list {
    margin-top: 18px;
}
.contact-grid .card {
    margin-bottom: 36px;
}
.contact-grid .card img.card-img-top {
    max-width: 100%;
    width: 240px;
    height: 150px;
    object-fit: cover;
    object-position: 0 -20px;
    border: 1px solid var(--black);
    filter: brightness(92%) sepia(45%);
    -webkit-filter: brightness(92%) sepia(45%);
}
.contact-grid .card:hover > img.card-img-top {
    filter: brightness(100%) sepia(0%);
    -webkit-filter: brightness(100%)sepia(0%);
    transition: all .5s ease-in-out;
}
.contact-grid .card h3.card-title {
    margin-bottom: 3px;
}
.contact-grid .card h5.card-subtitle {
    margin-top: 0;
    margin-bottom: 0;
}

/* ----------------------------------------- */
/* End Contact Cards */
/* ----------------------------------------- */


/* ----------------------------------------- */
/* Start Contact Cards LinkedIn */
/* ----------------------------------------- */

.linkedin > div > div {
    position: relative;
}
.linkedin .add-team-member {
    position: absolute;
    right: 10px;
    top: 6px;
    opacity: 0;
    transition: all .3s ease-in-out;
    display: flex;
    align-items: center;
}
.linkedin:hover .add-team-member {
    opacity: 1;
    color: rgba(100, 100, 100, 1);
}
.linkedin .add-team-member i {
    font-size: 20px;
    color: rgba(100, 100, 100, 1);
    margin-left: 5px;
}

.linkedin .card {
    margin-top: 12px;
    margin-bottom: 12px;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    padding-left: 0;
    padding-right: 0;
    background-color: rgba(255,255,255,0);
    border-radius: var(--borderradiusboxes);
    padding: 5px;
}
.linkedin .card:hover {
    box-shadow: 0 3px 10px 0px rgba(0, 0, 0, .1);
    background-color: rgba(255,255,255,1);
    transition: var(--generaltransition);
}

.linkedin .card img.card-img-top {
    height: 75px;
    width: 75px;
    object-fit: cover;
    object-position: center top;
    border-radius: 50%;
    border: 1px solid var(--background);
    float: left;
}

.linkedin .card .card-body {
    float: left;
    margin: 2px 12px;
}

.linkedin .modal .job-title,
.linkedin .modal .phone-number,
.linkedin .modal .email {
    /* color: #808080; */
    font-size: 12px !important;
    /* font-weight: 100; */
    line-height: 1.4 !important;
    display: block;
}
.linkedin .modal .job-title,
.linkedin .modal .phone-number,
.linkedin .modal .email {
    /* color: #808080; */
    font-size: 14px !important;
    /* font-weight: 100; */
    line-height: 1.4 !important;
    display: block;
    margin-bottom: 8px;
}
.linkedin .card .card-body h3,
.linkedin .card .card-body h5 {
    margin: 0;
}
.linkedin .modal h4 {
    margin-bottom: 8px;
    font-size: 36px;
}
.linkedin .modal .modal-dialog .modal-content .modal-body.team-member-modal-body {
    padding: 15px !important;
}
.linkedin .modal .modal-dialog .modal-content .modal-body.team-member-modal-body p.bio {
    margin: 10px auto;
    font-size: 14px !important;
    line-height: 1.6;
}

.linkedin .modal .modal-dialog .modal-content .modal-body.team-member-modal-body img {
    border: 1px solid var(--black);
}
.linkedin .modal .modal-footer .btn.btn-success {
    color: var(--white) !important;
    border-color: #664B8C !important;
    padding: 6px 20px !important;
    background-color: #5cb85c;
    border-color: #4cae4c !important;
}
.linkedin .modal .modal-footer .btn:hover {
    background-color: inherit !important;
    color: inherit !important;
    border-color: #664B8C !important;
    padding: 6px 20px !important;
}
.linkedin .card h3.card-title {
    font-weight: 400 !important;
    font-size: 20px;
}

/* ----------------------------------------- */
/* End Contact Cards LinkedIn */
/* ----------------------------------------- */





/* ----------------------------------------- */
/* Start Add/Edit Team Member Form */
/* ----------------------------------------- */

.add-new-team-member form button,
.add-new-team-member form button:hover {
    padding: 6px 20px !important;
    margin-top: 20px;
}

/* ----------------------------------------- */
/* End Add/Edit Team Member Form */
/* ----------------------------------------- */





/* ----------------------------------------- */
/* Start stuff I need to properly label and categorize... */
/* ----------------------------------------- */


/* Removes iframe border around PowerBI chart */
iframe {
    border: none;
}

/* Removes scroll bars on forms in modals */
html[dir=ltr] .crmEntityFormView .cell textarea {
    overflow-y: auto;
}

html[dir=ltr] .crmEntityFormView .cell textarea[readonly="readonly"] {
    border: none;
    background-color: transparent !important;
}

/* Add a dollar sign in front of all Ext Price in modals */
td[data-attribute="cr971_msoextendedprice"]::before,
td[data-attribute="cr971_msosellprice"]::before {
    content: "$";
}

.masterRow {
    display: flex;
    width: 100%;
    margin-bottom: 20px;
}


.filterButtonsCell,
.downloadButtonsCell,
.lengthCell,
.searchCell {
    flex: 1;
}

.searchCell input[type="search"] {
    margin-left: 0;
}

label[for*="dt-search"] {
    margin-bottom: 0;
    width: 181px;
    text-align: left;
}

.modal-body #mainContent .dt-search label[for*="dt-search"] {
    width: inherit;
    text-align: left;
}

.modal-body #mainContent .dt-length label {
    display: inline;
}

.dt-search {
    text-align: right;
}

label[for="dt-length-0"],
label[for="dt-length-1"],
label[for="dt-length-2"],
label[for="dt-length-3"],
label[for="dt-length-4"] {
    display: none !important;
}

#myInvoicesTable_info,
#invoiceDetailsTable_info,
#QuoteDetailsTable_info,
.dataTables_info {
    margin-bottom: 10px;
    word-spacing: 2px;
}

table#invoiceDetailsTable {
    width: 100% !important;
}

#invoiceDetailsTable_wrapper .dt-layout-row:first-child {
    display: flex;
    margin-bottom: 10px;
}

#invoiceDetailsTable_wrapper .dt-layout-row .dt-layout-cell.dt-start,
#invoiceDetailsTable_wrapper .dt-layout-row .dt-layout-cell.dt-end {
    flex: 1;
}


/* ----------------------------------------- */
/* End stuff I need to properly label and categorize... */
/* ----------------------------------------- */


/* ----------------------------------------- */
/* Start Skip to Content */
/* ----------------------------------------- */

.skip-to-content {
    display: none;
}

/* ----------------------------------------- */
/* End Skip to Content */
/* ----------------------------------------- */




/* ----------------------------------------- */
/* Start Case Page */
/* ----------------------------------------- */

.case-page div[data-name="Portal_CaseTab"] td.form-control-cell,
.case-page div[data-name="Portal_CaseTab"] td.status-cell {
    padding: 0 0 20px 0;
}
.case-page .crmEntityFormView .state, 
.case-page .crmEntityFormView .status {
    padding: 0;
}
.case-page .crmEntityFormView .cell {
    padding: 0 0 20px 0;
}
.case-page .crmEntityFormView .cell textarea {
    min-height: auto;
}
.case-page .crmEntityFormView .cell textarea#description {
    min-height: 200px;
}

/* ----------------------------------------- */
/* End Case Page */
/* ----------------------------------------- */






/* ----------------------------------------- */
/* Start Case Page Timeline Styling */
/* ----------------------------------------- */

/* .entity-timeline .col-lg-3.header,
.entity-timeline .col-lg-9.content {
    width: 100% !important;
    padding-top: 6px !important;
} */
.entity-timeline .from {
    border-bottom: 1px solid var(--bs-border-color);
}
.entity-timeline .col-lg-3.header {
    background: #DCDCDC;
    background: linear-gradient(180deg,rgba(220, 220, 220, 1) 0%, rgba(230, 230, 230, 1) 100%);
    /* border-radius: 5px 5px 0 0; */
}
.entity-timeline .note .row .content {
    border: 1px solid white !important;
    background: white !important;
    /* border-radius: 0 0 5px 5px;*/
}
.entity-timeline .col-lg-3.header .emailicon,
.entity-timeline .col-lg-3.header .phonecallicon {
    padding-left: 0 !important;
}
.entity-timeline .notes .note {
    background-color: white;
    padding: 0 10px 0 10px !important;
    margin-bottom: 25px;
    box-shadow: 0 0 10px -6px rgba(0, 0, 0, 0.6);
    /* border-radius: 5px; */
}
.entity-timeline .notes .note:hover {
    box-shadow: 0 0 18px -6px rgba(0, 0, 0, 0.6);
    transition: all 200ms ease-in-out;
}
.entity-timeline .ck-template {
    overflow-x: scroll;
}
.entity-timeline .ck-template p,
.entity-timeline p,
.entity-timeline .ck-template table.table tr td div,
.entity-timeline .ck-template table.table tr td div span,
.entity-timeline table.table tr td div,
.entity-timeline table.table tr td div span,
.entity-timeline .from {
    white-space: normal !important; /* Wraps lines and paragraphs preventing the content from leaking out of the box */
}
.entity-timeline #replyfwdmessage {
    /* display: none; */ /* Hides the original message in the case timeline in the portal */
}

/* ----------------------------------------- */
/* End Case Page Timeline Styling */
/* ----------------------------------------- */








/* ----------------------------------------- */
/* Start "Add Comment" button styling on individual Case page */
/* ----------------------------------------- */

#notescontrol .timelineheader .addnote {
    margin: 10px 0;
}

/* ----------------------------------------- */
/* End "Add Comment" button styling on individual Case page */
/* ----------------------------------------- */





/* ----------------------------------------- */
/* Start "Add Comment" modal styling on individual Case page */
/* ----------------------------------------- */

.modal .addnote input[name="file"] {
    font-size: 12px;
}
.modal .addnote.container {
    padding: 10px;
}

/* ----------------------------------------- */
/* End "Add Comment" modal styling on individual Case page */
/* ----------------------------------------- */



/* ----------------------------------------- */
/* Start modal styling on Cases page */
/* ----------------------------------------- */

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header .modal-actions {
  display: flex;
  gap: .25rem; /* small space between buttons */
  align-items: baseline;
}
.modal-header .btn-maximize,
.modal-header .btn-close {
    border: none;
    padding: 8px;
    display: flex !important;
    align-items: center;   /* vertical centering */
    justify-content: center; /* horizontal centering */
    background: transparent;
    cursor: pointer;
}
.btn.btn-default.clearlookupfield, .btn.btn-default.launchentitylookup {
    border: none;
}

/* Padding around the Submit button */
.crmEntityFormView .actions {
    padding: 0 28px 20px !important;
}

/* Pre-hover color on search buttons */
button.launchentitylookup {
    background-color: rgba(242,242,242,1) !important;
    border: 1px solid var(--inputfieldborder) !important;
    padding: 5px 20px !important;
}

/* ----------------------------------------- */
/* End modal styling on Cases page */
/* ----------------------------------------- */




/* ----------------------------------------- */
/* Start Contact Us */
/* ----------------------------------------- */

.contact-us {
    font-style: italic;
}

/* ----------------------------------------- */
/* Start Contact Us */
/* ----------------------------------------- */