:root {
    --client-primary: #00aad5;
    --client-primary-text: #fff;
    --client-secondary: #f3f3f4;
    --client-secondary-text: #000;

    /* Custom client variables for content areas */
    --primark-item-navigation-font: "Primark Basis", sans-serif;
    --primark-item-navigation-width: 1800px;
    --primark-item-navigation-tile-gap: 50px;
    --primark-item-navigation-tile-size: 300px;
    --primark-item-navigation-tile-font-size: 32px;
    --primark-item-navigation-tile-font-size-xl: 54px;
    --primark-item-navigation-tile-padding: 20px;
    --primark-item-navigation-tile-background: var(--client-primary-text);
    --primark-item-navigation-tile-colour: var(--client-primary);
    --primark-item-navigation-tile-hover-background: #a1daea;
    --primark-item-navigation-tile-hover-colour: var(--client-primary-text);
}

.client-primary {
    color: var(--client-primary-text);
    background-color: var(--client-primary);
}

.client-secondary {
    color: var(--client-secondary-text);
    background-color: var(--client-secondary);
}

/* #region Primark Fonts */
@font-face {
    font-family: 'Primark Basis';
    src: url('/v4/content/fonts/PrimarkBasis-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Primark Basis';
    src: url('/v4/content/fonts/PrimarkBasis-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}
/* #endregion */

/* #region Primark custom item nav pages */
.primark-navigation-layout {
    font-family: var(--primark-item-navigation-font);
}

.primark-navigation-layout > ul {
    display: flex;
    gap: var(--primark-item-navigation-tile-gap);
    flex-direction: row;
    max-width: var(--primark-item-navigation-width);
    width: 100%;
    flex-wrap: wrap;

    list-style: none;
    padding: unset;
    padding-right: var(--primark-item-navigation-tile-gap);
    padding-left: var(--primark-item-navigation-tile-gap);
    margin: unset;
    margin-right: auto;
    margin-left: auto;

    font-family: var(--primark-item-navigation-font);
}

div.primark-item-general-content {  /* Adds padding specific to the item nav pages - omit this style if being used elsewhere. */
    padding-top: 70px;
    padding-bottom: 120px;
}

.primark-navigation-layout > ul > li > a {
    display: inline-block;
}

.primark-navigation-layout > ul > li:not(:has(a)) {  /* New lines (tiles) with no anchor tags - these visually will appear as disabled links */
    opacity: 0.8;
    cursor: not-allowed;
}

.primark-navigation-layout > ul > li > a,
.primark-navigation-layout > ul > li:not(:has(a)) {
    line-height: 1em;
    width: var(--primark-item-navigation-tile-size);
    height: var(--primark-item-navigation-tile-size);
    text-decoration: none;
    text-align: right;
    align-content: end;
    padding: var(--primark-item-navigation-tile-padding);
    text-transform: uppercase;
    font-size: var(--primark-item-navigation-tile-font-size-xl);
    font-weight: 400;
    color: var(--primark-item-navigation-tile-colour);
    background-color: var(--primark-item-navigation-tile-background);

    transition: background 0.2s ease, color 0.2s ease;
}

.primark-navigation-layout > ul > li > a:hover {
    color: var(--primark-item-navigation-tile-hover-colour);
    background-color: var(--primark-item-navigation-tile-hover-background);
}

.primark-navigation-layout > ul > li > a > span {
    font-size: var(--primark-item-navigation-tile-font-size);
    font-weight: 700;
}
/* #endregion */

/*
    #region KendoUI Overrides for .client-primary and .client-secondary buttons
*/
.k-button.client-primary:disabled,
.k-button.client-secondary:disabled {
    opacity: 0.5 !important;
    filter: brightness(1.0) !important;
}

.k-button.client-primary:disabled {
    color: var(--client-primary-text) !important;
    background-color: var(--client-primary) !important;
}

.k-button.client-secondary:disabled {
    color: var(--client-secondary-text) !important;
    background-color: var(--client-secondary) !important;
}

.k-button.client-primary,
.k-button.client-secondary {
    filter: brightness(1.0);
}

.k-button.client-primary {
    border: 1px solid var(--client-primary);
}

.k-button.client-primary:hover,
.k-button.client-secondary:hover {
    filter: brightness(1.1);
    background-image: unset;
}

.k-button.client-primary:active,
.k-button.client-secondary:active {
    filter: brightness(0.95);
    background-image: unset;
}

.k-button.client-primary:hover,
.k-button.client-primary:active {
    color: var(--client-primary-text);
    background-color: var(--client-primary);
}

.k-button.client-secondary:hover,
.k-button.client-secondary:active {
    color: var(--client-secondary-text);
    background-color: var(--client-secondary);
}

.k-button.client-primary,
.k-button.client-secondary {
    background-image: none;
}

.k-button.client-primary:focus,
.k-button.client-secondary:focus {
    box-shadow: none !important;
}
/*#endregion*/

.dark {
    background-color: #777;
    color: #fff;
    border: 1px solid #fff;
    border-collapse:collapse;
}

.darkHeader {
    background-color: #ddd !important;
    font-size:inherit !important;
    font-weight:bold !important;
    text-align: center !important;
}

.login-help {
    float: right !important;
    font-size: 20px;
    font-weight: 200;
    color: #ffffff;
    cursor: pointer;
    display: none;
}

.login-dropdown {
    right: 30px;
}

#login-btn {
    
}

.logo-container{    
    background-color: #09adda;
    text-align:center;
    padding: 15px 0px;
}

.title {
}

.logo {
    text-align:center;
}

.logocontainer .logo {
	max-width: 30%;
}

.uiBar {
    background-color: #eee; 
    border-bottom: 1px solid #ccc;
}
.quick-nav-container { 
  padding: 5px 15px;
  background-color: #09adda;
  text-transform: uppercase;
  margin-left: -15px;
  margin-right:-15px;
}

.medium {
    background-color: #ccc;
    border: 1px solid #fff;
    border-collapse:collapse;
}

.lightbottom {
    border-bottom: 2px solid #ddd;
}

.box {
    width:100px;
    border:1px solid #999;
}

.orange {
    background-color: #FF9900;
}

.red {
    background-color: #FF0000;
}

.green {
    background-color: #33CC00;
}

.yellow {
    background-color: #FFFF00;
}

.bgPanel {
    background-color: #f1f1f1;
    padding:7px;
}

.smallest {
    font-size: x-small;
}

.w-set {
    position:relative;
    width:90% !important;
}

.textBox {
    width: 95% !important;
    font-weight:bold;
    margin-top: 5px;
}

.panelBar {
    border-top: 4px solid #00aad5;
    background-color: #00aad5;
    border-bottom: 3px solid #00aad5;
}

.panelBar h5 {
    color:#fff;
    font-weight:bold;
    display: inline-block;
}

.panelBar h4 {
    display: inline-block;
    padding-right:2px;
    font-weight:bold;
    color: #fff;
}

.top {
    padding-top:10px;
    margin-top:10px;
}

.base {
    padding-bottom:10px;
    border-bottom: 3px solid #d5d5d5;
}

.k-grid td {
   overflow: visible;
   white-space: normal;
   vertical-align: top !important;
}

.g-dirty {
    background-color: #ff6a00;
}

.filename {
   word-wrap: break-word ;
   /*word-break: break-all ;*/
   word-break:normal;
}

.ui-resizable-handle, .ui-resizable-e {
    border-left: 1px solid #ccc;
}

.popText {
    line-height:1.5em;
    border-bottom: 1px dashed #999;
    padding-bottom:5px;
    margin-bottom:5px;
}

.btnSearch {
    background-color: #999 !important;
    color: #fff !important;
}

#header_bg
{
    position: relative;
    margin: 0px;
    color: #000;
    padding: 0px;
    background-color: #eee;
    border-bottom: 1px solid #606060;
    border-top: 1px solid #606060;
    /*height: 62px;*/
}

.k-alt
{
    background-color: #F5F5F6;
}

#recycleBinGrid  
{
    border: 1px solid #A0D6BE;
}

#recycleBinGrid .k-grid-header .k-header
{
    background-color: #D6E8E0;
}

#recycleHdr .k-header 
{
    background-color: #A0D6BE;
}

header h1, #header h1
{
    font-weight: bold;
    margin: 0;
    color: #000;
    border: none;
    line-height: 1em;
}

.middleAlign 
{
    vertical-align:text-bottom;
}

.empty-grid {
    color: #888;
    background: #eee;
    height: 100%;
    text-align: center;
    line-height: 100px;
}

.force-left {
    text-align: left !important;
}

.force-right {
    text-align: right !important;
}

.top-logo {
    text-align:center !important;
}

.notifyUserList {
    overflow-y:auto;
    overflow-x:hidden;
}

.userGrid {
    height:550px;
    border:1px solid #dbdbde !important;
    line-height:2em;
    overflow-y:auto;
    overflow-x:hidden;
}

.gridRow {
    border-collapse:collapse !important;
}

.fullgrid {
    width:95%;
    margin:auto;
}

.textEdit {
    width: 100%; 
    border-collapse: collapse; 
    border: 1px solid #dbdbde !important;
    margin: 3px;
    line-height:1.5em;
}

.userInfo {
    height:380px;
    overflow:auto;
    border-collapse:collapse;
}

.userInput {
    line-height: 1.5em !important;
    width: 300px;
    margin-top:7px;
}

#distributionGroups {
    
}

#txtCount {
    font-weight:normal !important;
}

#treeview {
    min-height:100% !important;
    overflow-x: hidden;
}

.k-listview:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.formsToolbar {
    background-image: linear-gradient(to right,#09adda 0%,#09adda 85%) !important;
    background-color: #09adda;
    color: white;
    width: 100%;
    z-index:1 !important;
}