/* Colour variables */



/******************
  Text Colours
*******************/
.workupPlum { color: #42033D; }
.workupPink { color: #973A90; }
.workupPink300 { color: #FFA2AB; }
.workupPink400 { color: #FE6E7A; }
.workupYellow { color: #FFCA05; }
.workupPalePink { color: #FFCFD2; }
.workupOrange { color: #ED942B; }
.workupPaleBlue { color: #7ED6EA; }
.workupAqua { color: #9DF7E5; }
.workupDark { color: #111111; }
.workupLight { color: #F5F5F5; }
.workupTeal300 { color: #5DEBD4; }
.workupCarrot300 {color: #F1B258; }
.workupSkyBlue300 { color: #73D6EA; }
.colourTeal { color: #2CD5BF; }
.colourTeal800 { color: #105F58; }
.colourTeal500 { color: #13B9A6; }
.colourYellow { color: #FFCA05; }
.colourRed { color: #F83B51; }
.colourGrey { color: #888888; }
.colourGrey800 { color: #454545; }
.colourViolet { color: #973A90; }
.colourCarrott { color: #ED942B; }
.colourCarrot300 { color: #F1B258; }
.colourSkyBlue500 { color: #1B9FBF; }
.colourPink600 { color: #E5193A; }
.colorBlack { color: #3d3d3d; }
.colorGrey { color: #888888; }
.colorGrey200 { color: #d1d1d1; }
.textDark { color: #3d3d3d; }
.textSecondary { color: #5d5d5d; }

/* Bullet Colours */
.bulletYellow {
    background-color: #FFCA05;
    color: #ffffff;
}
.bulletOrange {
    background-color: #ED942B;
    color: #ffffff;
}
.bulletTeal600 {
    background-color: #0C9588;
    color: #ffffff;
}
.bulletCarrot600 {
    background-color: #CC5513;
    color: #ffffff;
}
.bulletPaleBlue {
    background-color: #7ED6EA;
    color: #ffffff;
}
.bulletSkyBlue600 {
    background-color: #1980A1;
    color: #ffffff;
}

/* Background Colours */
.workupPlumBack { background-color: #42033D; }
.workupPinkBack { background-color: #973A90; }
.workupYellowBack { background-color: #FFCA05; }
.workupPalePinkBack { background-color: #FFCFD2; }
.workupOrangeBack { background-color: #ED942B; }
.workupPaleBlueBack { background-color: #7ED6EA; }
.workupAquaBack { background-color: #9DF7E5; }
.workupDarkBack { background-color: #111111; }
.workupLightBack { background-color: #F5F5F5; }
.workupLightBlueBack { background-color: #EFF4FA; /* very pale blue for dashboard etc */ }
.backgroundTeal400 { background-color: #2CD5BF; }
.backgroundGrey100 { background-color: #E7E7E7; }

/* Project Task Colours */
.todoColour { color: #A93914; }
.todoBarColour { background-color: #A93914 !important; } /* Carrot 700 */
.todoBackColour { background-color: #FEF7EC; }/* Carrot 700 ? */
.inProgressColour { color: #0C9588; }/* Carrot 50 */
.inProgressBarColour {  background-color: #0c9588 !important; }/* Teal 600 */
.inProgressBackColour { background-color: #f0fdfa; }
.onHoldColour { color: #973a90; }
.onHoldBarColour { background-color: #973a90 !important; }
.onHoldBackColour { background-color: #fdf6fd; }
.completeColour { color: #1e475b; }
.completeBarColour { background-color: #1e475b !important; }
.completeBackColour { background-color: #eefbfd; }

/* Font styles */

.f10 { font-size: 10px; }
.f11 { font-size: 11px; }
.f12 { font-size: 12px; }
.f13 { font-size: 13px; }
.f14 { font-size: 14px; }
.f15 { font-size: 15px; }
.f16 { font-size: 16px; }
.f18 { font-size: 18px; }
.f20 { font-size: 20px; }
.f24 { font-size: 24px; }
.f28 { font-size: 28px; }
.f32 { font-size: 32px; }

.op5 { opacity: 0.5; }
.op7 { opacity: 0.7; }

.f300 { font-weight: 300; }
.f400 { font-weight: 400; }
.f500 { font-weight: 500; }
.f600 { font-weight: 600; }
.f700 { font-weight: 700; }
.f800 { font-weight: 800; }
.f900 { font-weight: 900; }



/* Button Colours, are these used anywhere? */
.btnYellow {
    background-color: #FFCA05;
    color: #111;
}
.btnYellow:hover {
    background-color: #FFE143;
    color: #111;
}
.btnOrange {
    background-color: #ED932A;
    color: white;
}
.btnOrange:hover {
    background-color: #E6751A;
    color: #ffffff;
}
.btnLightBlue {
    background-color: #7ED6EA;
    color: white;
}
.btnLightBlue:hover {
    background-color: #1980A1;
    color: #ffffff;
}

/* Heading styles and colours */
h1, h2, h3, h4, h5 {
    color: #42033D; /* plum */
}
.subheading {
    padding: 4px;
}

/* Button and link Styles */
.btn-outline-primary {
    color: #973A90;
    border-color: #973A90;
    border-radius: 8px;
    height: 36px;
}
.btn-outline-primary:hover {
    color: #CE67CA;
    border-color: #CE67CA;
}
.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle {
    background-color: #CE67CA;
    border-color: #CE67CA;
}
.btn-outline-primary:focus, .btn-outline-primary.focus {
    background-color: #CE67CA;
    border-color: #CE67CA;
    color: #ffffff;
    box-shadow: 0 0 0 0.2rem rgba(151, 58, 144, 0.25);
}
.btn-primary.disabled, .btn-primary:disabled {
    color: #fff;
    background-color: #CE67CA;
    border-color: #CE67CA;
}
a, .btn-link {
    color: #973A90;
}
a:hover {
    color: #42033D;
    text-decoration: underline;
}
.btn-primary {
    color: #fff;
    border-color: #973A90;
    background-color: #973A90;
    border-radius: 8px;
    height: 36px;
}
.btn-primary:hover {
    color: #fff;
    background-color: #CE67CA;
    border-color: #CE67CA;
}
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active, .show > .btn-primary.dropdown-toggle {
    background-color: #CE67CA;
    border-color: #CE67CA;
}
.btn-primary:focus, .btn-primary.focus {
    background-color: #CE67CA;
    border-color: #CE67CA;
    box-shadow: 0 0 0 0.2rem rgba(151, 58, 144, 0.25);
}
.btn-outline-primary.disabled, .btn-outline-primary:disabled {
    color: #fbabfc;
    background-color: transparent;
}
.btn-link:hover {
    color: #42033D;
    text-decoration: underline;
}
.btn-outline-primary:hover {
    color: #fff;
    background-color: #42033D;
    border-color: #42033D;
}
.bigButton {
    border-radius: 70px;
/*    padding: 12px 20px 12px 20px;
*/    width: 45%;
}
.medButton {
    border-radius: 70px;
    padding: 6px 12px 6px 12px;
    width: 45%;
}
.buttonPrimary {
    background-color: #fff;
    border: 1px solid #973a90;
    border-radius: 8px;
    color: #973a90;
    height: 36px;
}

.buttonPrimary:hover {
    background-color: #FDF6FD; /* #34495E; */ /*#334486;*/
    border: 1px solid #973A90;
    color: #973a90;
}

/* Pills, lozenges */
.plumLozenge {
    border: 1px solid #973a90;
    border-radius: 50px;
    height: 36px;
    padding: 8px 16px 8px 16px;
    color: #5d5d5d;
    background-color: #fdf6fd;
    margin-left: 8px;
}
.whiteLozenge {
    border: 1px solid #e7e7e7;
    border-radius: 50px;
    height: 36px;
    padding: 8px 16px 8px 16px;
    color: #973a90;
    background-color: #fff;
    margin-left: 8px;
}
.nav-pills .nav-link {
    background-color: #fff;
    border: 1px solid #dddddd;
    border-radius: 20px;
    color: #5d5d5d;
    height: 36px;
}
.nav-pills .nav-item {
    padding: 4px;
}
.nav-pills .nav-link:hover {
    background-color: #FDF6FD; /* #34495E; */ /*#334486;*/
    border: 1px solid #973A90;
    color: #973a90;
    border-radius: 20px;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    /* color: #fff; */
    background-color: #FDF6FD; /* #34495E; */ /*#334486;*/
    border: 1px solid #973A90;
    color: #973a90;
    border-radius: 20px;
}


/* Modal dialog styles */
/*.modal-header {
    background-color: #42033D;*/ /* plum */
/*}*/
.modal-title {
    color: #3d3d3d;
}
.modal-header {
    padding: 0.5rem;
    color: #3d3d3d;
    background: #ffff;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-bottom: 0px;
    /*padding: 16px;*/
}
.modal-content {
    border-radius: 16px;
    padding: 6px 12px;
}
.modal-footer {
    border: 0px;
    padding: 0px;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    display: flex;
    justify-content: space-around;
}
.close {
    color: #3d3d3d;
    opacity: 0.50;
}
.close:hover {
    opacity: 1;
}

/* Navigation Menus */
#myNavbar .nav-item a:hover {
    text-decoration: none;
    font-weight: bold;
    /*color: #39C5E6;*/ /*#acd433; green*/ /*#ffd800 yellow */
}
#myNavbar .dropdown-menu {
    background-color: #42033D;
}
#myNavbar .dropdown-item:hover {
    text-decoration: none;
    font-weight: bold;
    background-color: #42033D;
    color: #ffffff;
}
#myNavbar a:hover {
    font-weight: bold;
    text-decoration: none;
    color: #ffffff;
}

/* Page Containers */
.container-fluid {
    background-color: #ffffff;
    border-top-left-radius: 10px;
}
.contentWrapper {
    background-color: #EFF4FA;
}
.pageContainer {
    background-color: #fff;
    border-top-left-radius: 10px;
    height: calc(100% - 94px);
}
.headerContainer {
    padding-left: 15px;
    padding-right: 15px;
    height: 94px;
}
.contentContainer {
    background-color: #EFF4FA;
    height: 100%;
    padding-left: 15px;
    padding-right: 15px;
    border-top: 2px solid #d1d1d1;
}

/* Table Styles */
th, td {
    padding: 6px;
}


/* Miscellaneous styles */
.boldHeader {
    font-family: "antique-olive", sans-serif;
    font-weight: 700
}
/* Login/Signup etc */
.boxStyle {
    border: 4px solid #973A90; /* Plum */
    background-color: #EFF4FA; /* very pale blue */
}
.nameHighlight {
    color: #973A90;
    font-size: 1.1rem;
}
.ibox-content small {
    color: #42033D;
}



/* Syncfusion style overrides */
.e-schedule-event-tooltip {
    background-color: #973A90;
}
.e-tooltip-wrap.e-popup {
    background-color: #973A90;
    border: 1px solid #973A90;
    border-bottom-right-radius: 6px;
}
.e-tooltip-wrap .e-tip-content {
    color: #fff;
    background-color: #973A90;
}
.e-grid .e-gridheader .e-headercelldiv {
    color: #42033D;
}
.e-chip-list.e-selection .e-chip.e-active.e-outline {
    background-color: #42033D;
    border-color: #42033D;
}
.e-pager .e-currentitem, .e-pager .e-currentitem:hover {
    background: #973A90;
    color: #fff;
}
.e-schedule .e-timeline-view .e-appointment, .e-schedule .e-timeline-month-view .e-appointment {
    height: 52px;
}

/* Chips when disabled, selected(active) and others */
.e-chip-list.e-selection .e-chip.e-active.e-outline.e-disabled {
    background-color: #973A90;
    border-color: #42033d;
    color: #fff;
}
.e-chip-list.e-chip.e-outline.e-disabled, .e-chip-list .e-chip.e-outline.e-disabled {
    background: #fff;
    border-color: #fff;
    color: #fff;
}
.e-schedule .e-agenda-view .e-appointment {
    border-left: 3px solid #973A90;
}
.e-schedule .e-agenda-view .e-day-date-header.e-current-day {
    color: #973A90;
}
table td .weekend {
    background-color: #f5d9f5 !important;
}
.e-schedule .e-timeline-view .e-date-header-wrap table td.e-current-day, .e-schedule .e-timeline-month-view .e-date-header-wrap table td.e-current-day {
    color: #973a90;
}
.e-pager .e-currentitem /* Grid Pager*/
{
    border-bottom: 2px solid #42033D;
}
.e-pager .e-numericitem {
    color: #42033D;
}
.e-dlg-header-content {
    background-color: #34495E;
    color: #fff;
}
.e-dlg-header {
    color: #fff;
}
.e-dialog {
    border: 0px;
    border-radius: 6px;
}
.e-icon-dlg-close {
    color: #fff;
    opacity: 1;
}
/* Multi select chips */
.e-chip-list.e-chip.e-outline.e-active, .e-chip-list .e-chip.e-outline.e-active {
    background-color: #42033D;
    border-color: #42033D;
}
.e-input-group, .e-input-group.e-control-wrapper {
    border-radius: 8px;
}
.e-listview .e-list-item.e-focused, .e-listview .e-list-item.e-focused.e-active.e-checklist {
    background-color: #973a90;
    color: #fff;
}
.e-checkbox-wrapper .e-frame.e-check, .e-css.e-checkbox-wrapper .e-frame.e-check {
    background-color: #973a90;
    border-color: #973a90;
    color: #fff;
}
.e-checkbox-wrapper:hover .e-frame.e-check, .e-css.e-checkbox-wrapper:hover .e-frame.e-check {
    background-color: #973a90;
    border-color: #973a90;
    color: #fff;
}
.e-checkbox-wrapper:hover .e-frame:not(.e-check), .e-checkbox-wrapper:hover .e-frame:not(.e-stop)::before, .e-css.e-checkbox-wrapper:hover .e-frame:not(.e-check), .e-css.e-checkbox-wrapper:hover .e-frame:not(.e-stop)::before {
    content: "\e718";/* "\e774"; these are syncfusion icon codes and vary per library these are different in BS4 and 5. Appears on the checkbox list hover */ 
}




/* Kanban card*/
.e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card, .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container .e-card {
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 6px;
    box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, .132), 0 .3px .9px 0 rgba(0, 0, 0, .108);
    margin-bottom: 12px;
    min-height: 50px;
}
.e-kanban .e-card-footer-css {
    align-self: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 16px;
    width: 16px;
    margin-right: 8px;
}
.kanbanCard {
    font-family: 'Sora', sans-serif;
}
.kanbanIcon {
    margin-right: 4px;
    font-size: 0.8rem;
}
.kanbanDescription { margin-top: 6px; }
.e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-wrapper .e-card {
    border-radius: 8px;
}
.fluent-dark .e-kanban .e-kanban-table.e-content-table .e-card .e-card-tag.e-card-label,
.bootstrap-dark .e-kanban .e-kanban-table.e-content-table .e-card .e-card-tag.e-card-label,
.highcontrast .e-kanban .e-kanban-table.e-content-table .e-card .e-card-tag.e-card-label {
    background: #4b5563;
    color: #fff;
}
/* Sets Kanban column background colour but not the header */
.e-kanban .e-kanban-table.e-content-table .e-content-row:not(.e-swimlane-row) td {
    background-color: #f2f4f6;
    border-bottom-left-radius: 0px 0px 8px 8px;
}
/* Kanban header elements */
.e-kanban .e-kanban-table .e-header-cells {
    background-color: #f2f4f6;
    border-radius: 8px 8px 0px 0px;
}


/* Form and Input Styles */
.control-label {
    font-weight: 700;
}
.form-control {
    padding-left: 4px;
}
.form-group {
    padding: 4px 4px 4px 8px;
    margin-bottom: 4px;
}
.form-group label {
    color: #111111; /* grey 950 #973A90; */
    margin-bottom:4px;
}
.form-inline label {
    color: #111111; /* grey 950 #973A90; */
}
.formBox .form-group label {
    color: #111111; /* grey 950 #973A90; */
    font-weight: 600;
}
.formBox .form-inline label {
    color: #111111; /* grey 950 #973A90; */
    font-weight: 600;
    margin-bottom:6px;
}
.e-switch-wrapper .e-switch-on, .e-css.e-switch-wrapper .e-switch-on {
    background-color: #973A90;
    color: #fff;
}
.e-switch-wrapper.e-focus .e-switch-inner.e-switch-active, .e-switch-wrapper:focus .e-switch-inner.e-switch-active, .e-css.e-switch-wrapper.e-focus .e-switch-inner.e-switch-active, .e-css.e-switch-wrapper:focus .e-switch-inner.e-switch-active {
    background-color: #FFCFD2;
    border-color: #FFCFD2;
    outline: none;
}
.e-switch-wrapper .e-switch-inner.e-switch-active, .e-css.e-switch-wrapper .e-switch-inner.e-switch-active {
    background-color: #FFCFD2;
    border-color: #FFCFD2;
}
/* number input when has focus */
.e-input-group:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error), .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error) {
    border-color: ##973A90;
    /*box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);*/
}
.form-control:disabled, .form-control[readonly] {
    background-color: #fff; /*  #F0FDFA; */
    border: 0px;
    opacity: 1;
    padding-left: 0px;
}
.form-control:focus {
    border-color: #973A90;
    box-shadow: 0 0 0 0.2rem rgba(151, 58, 144, 0.25);
}
.largeInput {
    height: 40px;
    border-radius: 8px;
    background: var(--Workup-Product-Grey-grey-50, #F6F6F6);
    border: 0px;
}
.form-control {
    border-radius: 8px; 
}
select:disabled { /* Hides drop down for a disabled select element */
    -moz-appearance: none;
    -webkit-appearance: none;
}
.inputDate {
    border-color: #CED4DA;
    border-radius: 0.25rem;
}
.toolbarSelect {  /* rounded select drop-down for toolbars */
    background-color: #fff;
    border: 1px solid #e7e7e7;
    border-radius: 20px;
    width: 120px;
    padding: 6px;
    height: 36px;
    margin-right: 8px;
}
.formRow {
    margin-left:0px; margin-right:0px;
}
input.e-input, .e-input-group input, .e-input-group.e-control-wrapper input, .e-input-group input.e-input, .e-input-group.e-control-wrapper input.e-input {
    height: calc(1.2em + 0.5rem + 2px);
}
/* Avatar styles */
.workupAvatar {
    font-size: 18px;
    height: 44px;
    width: 44px; 
    background-color: #973A90;
    color:#ffffff;
}
.workupAvatar24 {
    font-size: 14px;
    height: 24px;
    width: 32px; 
    background-color: #973A90;
    color:#ffffff;
}
.workupAvatar32 {
    font-size: 16px;
    height: 32px;
    width: 32px; 
    background-color: #973A90;
    color:#ffffff;
}
.e-avatar.e-avatar-xlarge {
    font-size: 18px;
    height: 44px;
    width: 44px;
    background-color: #973A90;
    color: #ffffff;
}
.initials {
    font-size: 18px;
    height: 44px;
    background-color: #973A90;
}

/* Are these still used?? */
.scheduleCard i {
    font-size: 0.8rem;
    color: #FFFFFF;
    padding-right: 6px;
}
.statsRow {
    background-color: #FEF4FF;
    border-radius: 8px;
    margin: 4px;
    padding-top: 4px;
}
.loginBanner {
    display: flex;
    height: 700px;
    padding: 96px 40px 630px 40px;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
    border-radius: 20px;
    background: linear-gradient(180deg, #31132F 41%, #ED942B 100%);
}
.custom-select { /* for multiselect boxes */
    border-radius: 8px;
}
.availSummary {
    font-size: 14px;
    text-align: center;
    padding-top: 12px;
}




/* Various panels, boxes and box styles */
.rounded4 { border-radius: 4px; }
.rounded8 { border-radius: 8px; }
.rounded10 { border-radius: 10px; }
.rounded12 { border-radius: 12px; }
.rounded50 { border-radius: 50%; }

.billingBox {
    margin: 10px;
    padding: 6px;
    border-radius: 10px;
    border: 1px solid var(--Workup-Product-Grey-grey-200, #D1D1D1);
    background: var(--Workup-Product-Grey-white, #FFF);
    /* Shadows/01 */
    /*box-shadow: 0px 4px 8px -4px rgba(17, 17, 17, 0.25), 0px -2px 1px 0px rgba(17, 17, 17, 0.04) inset;*/
}
.detailsBox {
    padding: 8px;
    margin-bottom: 6px;
}
.usersBox {
    border-radius: 8px;
    border: 1px solid var(--Workup-Product-Sky-Blue-sky-blue-200, #AEE8F3);
    background: var(--Workup-Product-Sky-Blue-sky-blue-50, #EEFBFD);
}
.selectOptionBox {
    /*width: 90%;*/
    border-radius: 8px;
    border: 1px solid #d1d1d1;
    margin: auto;
    padding: 8px;
    margin-bottom: 12px;
}
.formBox { /* container for fields on a form */
    border-radius:10px; 
    padding:8px; 
    border: 1px solid #d1d1d1;
    margin: 4px 4px 8px 4px;
}


/* Image styles */
.roundedImageStrip {
    border-radius: 20px;
    height: 40px;
    margin-right: -10px;
}
.roundedImageStrip32 {
    border-radius: 50%;
    height: 32px;
    margin-right: -10px;
}
.roundedImage {
    border-radius: 20px;
    height: 40px;
}
.roundedImage32 {
    border-radius: 50%;
    height: 32px;
}
.roundedImage40 {
    border-radius: 50%;
    height: 40px;
}
.roundedImage60 {
    border-radius: 50%;
    height: 60px;
}
.roundedImage80 {
    border-radius: 50%;
    height: 80px;
}

/* Progress Bars */
.progressBarLeft {
    height: 12px;
    border-radius: 20px 0px 0px 20px;
    background: #13B9A6
}
.progressBarRight {
    height: 12px;
    border-radius: 0px 20px 20px 0px;
    background: #e7e7e7;
}
.progressBarComplete {
    height: 12px;
    border-radius: 20px 20px 20px 20px;
    background: #13B9A6;
    width: 100%;
}
.progressBarEmpty {
    height: 12px;
    border-radius: 20px 20px 20px 20px;
    background: #e7e7e7;
    width: 100%;
}
.roundedVerticalBar {
    display: flex;
    height: 40px;
    background-color: #f6f6f6;
    width: 30px;
    margin: 4px;
    border-radius: 4px 4px 0px 0px;
}
.coloredVerticalBar {
    align-self: flex-end;
    width: 30px;
    height: 50%;
    background-color: #ee742b;
    border-radius: 4px 4px 0px 0px;
}
.roundedVerticalBarWide {
    display: flex;
    height: 40px;
    background-color: #f6f6f6;
    width: 50px;
    margin: 4px;
    border-radius: 4px 4px 0px 0px;
}
.coloredVerticalBarWide {
    align-self: flex-end;
    width: 50px;
    height: 50%;
    background-color: #ee742b;
    border-radius: 4px 4px 0px 0px;
}
.roundedHorizontalBar {
    display: flex;
    height: 12px;
    background-color: #f6f6f6;
    width: 100%;
    margin: 4px;
    border-radius: 20px 20px 20px 20px;
}
.coloredHorizontalBar {
    align-self: flex-start;
    width: 30px;
    height: 12px;
    background-color: #ee742b;
    border-radius: 20px 0px 0px 20px;
}


/* Icon styles */
.selectCircle {
    border-radius: 30px;
    background-color: #0C9588;
    color: #fff;
    width: 28px;
    height: 28px;
    font-size: 14px;
    display: flex !important;
    text-align: center;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: 0px;
    /*         flex: 0 0 22px;
 */
}
.plainCircle {
    border-radius: 30px;
    width: 28px;
    height: 28px;
    border: 1px solid var(--Workup-Product-Grey-grey-600, #5D5D5D);
    color: var(--Workup-Product-Grey-grey-50, #F6F6F6);
    font-size: 12px;
    display: flex !important;
    text-align: center;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    /*         flex: 0 0 22px;
 */
}
.yellowCircle {
    border-radius: 50%;
    background-color: #FFF9C2;
    padding: 4px;
    height: 30px;
    width: 30px;
    text-align: center;
}
.pinkCircle {
    border-radius: 50%;
    background-color: #ffcfd2;
    color: #42033d;
    font-size: 13px;
    padding: 4px;
    padding-top: 8px;
    height: 32px;
    width: 32px;
    text-align: center;
}

/* Dialog styles */
.plainDialog {
    border-radius: 16px;
    min-height: 550px;
    background-color: #fff;
}
.dialogBodyHeading {
    text-align: center;
    /* margin: 10px; */
    padding: 4px 8px 4px 8px;
}
.dialogHeader {
    text-align: right;
    padding: 6px 6px 4px 4px;
}
.dialogFooter {
    text-align: center;
    margin-bottom: 10px;
    padding: 8px;
    border-top: 0px;
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 60px;
}
.modal-body {
    padding: 4px 4px 4px 4px;
}
.dialogBodyHeading h3 {
    margin-bottom:2px;
    font-size: 18px;
    font-weight: 500;
    color:  #3d3d3d;
}
.dialogBodyHeading p {
    font-size: 14px;
    color: #888888;
    margin: 2px 60px;
}

/* Tabs */
.nav-tabs {
    background-color: #fff;
    border-bottom: 0px;
    margin: 0px;
}
.nav-tabs .nav-link {
    color: #5d5d5d;
    font-weight: 400;
}
.tab-childdata #tabs .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    border: 0px #fff;
    border-bottom: 6px solid #13B9A6; /* Teal 500 */
    background-color: #fff;
    color: #111111;
    font-weight: 600;
    border-radius: 0px;
}
.nav-item {
    padding-bottom: 0px;
    margin-right: 8px;
}
.tab-pane {
    padding-top:6px;
}

/* Counter style tiles for top of various pages/grids/wigets */
.displayTile {
    border-radius: 8px;
    width: 200px;
    height: 65px;
    margin: 0px 10px 0px 0px;
}
.plumTile {
    border: 1px solid #901889; /* plum 800 */
    background-color: #fef4ff; /* plum 50*/
}
.pinkTile {
    border: 1px solid #c20e2f; /* pink 700*/
    background-color: #fff1f1; /* pink 50 */
}
.tealTile {
    border: 1px solid #105f58; /* teal 800 */
    background-color: #f0fdfa; /* teal 50*/
}
.carrotTile {
    border: 1px solid #a93914; /* carrot 700 */
    background-color: #fef7ec; /* carrot 50 */
}
.blueTile {
    border: 1px solid #1f556b; /* sky blue 800 */
    background-color: #eefbfd; /* sky blue 50 */
}
.violetTile {
    border: 1px solid #b247ac; /* violet 600 */
    background-color: #f5d9f5; /* violet 200 */
}
.tileIconLeft {
    display: flex;
    width: 35%;
    text-align: center;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}
.tileCounter {
    font-weight: 700;
    font-size: 18px;
    color: #454545;
    padding: 6px 0px;
}
.tileLabel {
    font-weight: 400;
    font-size: 13px;
    color: #454545;
}
.tileRightPanel {
    display: flex;
    flex-direction: column;
/*    justify-content: center;
*/    padding: 4px;
}

/* Dashboard Widget Styles */
.widgetBox50 {
    /*         width: 50%;
             padding: 8px;*/
    border: 1px solid #d1d1d1;
    border-radius: 10px;
    background-color: #fff;
}
.widgetBox100 {
    /*         width: 100%;
 */ padding: 8px;
    border: 1px solid #d1d1d1;
    border-radius: 10px;
    background-color: #fff;
}
.widgetContent {
    padding: 8px;
    height: 250px;
    overflow-y: auto;
    overflow-x: hidden
}
.widgetHeader {
    padding: 8px 8px 0px 8px;
}

.card-view .item {
    width: 100%;
}

.cardView {
    border-radius: 10px;
    border: 1px solid #d1d1d1;
    background-color: white;
    overflow: hidden;
    margin-bottom: 20px;
    transition: box-shadow 0.3s ease;
    padding: 10px 10px 0px 10px;
}

.cardView-body {
    background-color: white;
}

.skill-level {
    display: flex;
    gap: 4px;
    align-items: center;
}

.skill-square {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #000;
    border-radius: 2px;
    position: relative;
    cursor: pointer;
}

.skill-square::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #333 transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-in-out;
}


.progressSpacer {
        width: 20px;
        margin: 0px 5px;
        height: 16px;
        border-bottom: 4px solid #9DF7E5;
    }

    .solidTealCircle {
        border-radius: 30px;
        background-color: #13B9A6;
        color: #fff;
        width: 28px;
        height: 28px;
        font-size: 14px;
        display: flex !important;
        text-align: center;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        border: 0px;
        /*         flex: 0 0 22px;
     */
    }
    .borderTealCircle {
        border-radius: 30px;
        width: 28px;
        height: 28px;
        border: 1px solid #13B9A6;
        color: #111111;
        font-size: 12px;
        display: flex !important;
        text-align: center;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        /*         flex: 0 0 22px;
     */
    }

    .form-check-label {
        padding-left: 26px !important;
        padding-top: 4px !important;
    }

/* Hierarchy styles */
.tree {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    min-width: max-content;
}

.treeScrollWrapper {
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 1rem;
    padding: 20px;
}

.hierachyNode {
    border: 1px solid #ccc;
    padding: 10px 15px;
    border-radius: 8px;
    background-color: #f9f9f9;
    position: relative;
    transition: background 0.3s;
    text-align: center;
    line-height: 1.4;
    height: 150px;
    width: 210px;
    box-sizing: border-box;
    border-width: 3px;
}

    .hierachyNode.expandable {
        cursor: pointer;
    }


    .hierachyNode:hover {
        background-color: #e9e9e9;
    }

.node-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

    .node-wrapper:not(.collapsed) .hierachyNode.expandable::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        width: 2px;
        height: 22px;
        background-color: #ccc;
        transform: translateX(-50%);
    }

    .node-wrapper.collapsed .hierachyNode.expandable::after {
        display: none;
    }

.horizontal-connector {
    position: absolute;
    height: 2px;
    background-color: #ccc;
    margin-top: 19px;
    margin-bottom: 20px;
    top: 150px;
}

.extra-space {
    position: relative;
    height: 2px;
    background-color: #fff;
    margin-top: 19px;
    margin-bottom: 20px;
}

.children {
    display: flex;
    gap: 20px;
    justify-content: center;
    position: relative;
}

    .children::before {
        content: none;
    }

    .children > div {
        position: relative;
    }

        .children > div::before {
            content: '';
            position: absolute;
            top: -22px;
            left: 50%;
            height: 22px;
            border-left: 2px solid #ccc;
            transform: translateX(-50%);
        }

.collapsed .children {
    display: none;
}

.collapsed .horizontal-connector {
    display: none;
}

.profile-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 0.3rem;
    border: 2px solid rgba(255, 255, 255, 0.7);
    border-color: #757373;
}

.initials-icon {
    background-color: transparent;
    color: #3b3939;
    font-weight: bold;
    font-size: 0.9rem;
    text-align: center;
    line-height: 40px;
    font-family: sans-serif;
    user-select: none;
    display: block;
    margin: 0 auto;
}

.subtasklist {
    margin-left: 0px;
    padding-left: 4px;
}

.listelement {
    display: flex;
    align-items: center;
    font-size: 0.7rem;
}
/* Chat bot styles */
.chatMessages h3 {
    font-size:16px;
}