/*===================
Variables Cobalt 2.0 interpreted by Dylan Goddard, 2022, dylan.goddard@cae.com, dgoddarddesign@gmail.com
===================*/
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@300;400;500;700&family=Red+Hat+Text:wght@300;400;500;700&display=swap');
:root {
    /*==================
    Colours
    ==================*/
    /*Primary Colours*/
    --brightblue:#2969F2;
    --darkblue:#06103D;
    --paleblue:#608FF4;
    --white:#ffffff;
    --blue900:#F7F9FE;
    --blue800:#F0F4FD;
    --blue700:#D3DFFB;
    --blue400:#2969F2;
    --blue300:#2256C6;
  --blue200:#163984;
    

    /*Accent Colours*/
    --brightgreen:#B4F62A;

    /*Neutral Colours*/
    --gray:#E3E3E3;
    --palegrey:#F8F8F8;
    --darkgrey:#202528;
    --black:#000000;
    --neutral900: #F7F7F7;
    --neutral800: #EBECED;
    --neutral700: #D2D5D7;
    --neutral075:#181C1E;

    /*Secondary Colours*/
    --yellow:#F59B40;
    --orange:#F55C38;
    --teal:#1ED4B2;
    --turquoise:#31C6DE;
    --indigo:#4C41BB;
    --pink:#E23E90;
  --green400:#2CBE7C;
  
/*   opacities */
  --white-trans-4:rgba(255,255,255,0.4);
  --white-trans-25:rgba(255,255,255,0.25);

     /*==================
    Fonts
    ==================*/
    --font-body:"Red Hat Text", "Avenir", "Montserrat", sans-serif;
    --font-title:"Red Hat Display", "Avenir", "Montserrat", sans-serif;
    --font-base-size:16px; /*use multiples of EM from here on*/
    --font-colour:var(--black);
  
    --font-size-title:2em;
    --font-size-header:1.5em;
    --font-size-header-small:1.25em;
    --font-size-sub-header: 1em;
    --font-size-body: 1em;
    --font-size-medium: 0.85em;
    --font-size-small:0.75em;
    /*==================
    Borders etc...
    ==================*/
    --border-style: 1px solid; /*remember to add colour as required*/
    --border-radius-small:4px;
    --border-radius-medium:8px;
    --border-radius-large:16px;
    --border-radius-huge:24px;
  
  /*===================
  Drop Shadows
  ===================*/
  --shadow-01:0 1px 8px rgba(0,0,0,0.08); /*Inactive Tabs*/
  --shadow-02:0 2px 16px rgba(0,0,0,0.08); /*Active Tabs, Main Containers*/
  --shadow-03:0 3px 24px rgba(0,0,0,0.08); /*Popovers, dropdown menus, Temporary raised states*/
  --shadow-04:0 4px 32px rgba(0,0,0,0.08); /* Popups and Panels*/

  }
/*==================
Helper Classes
==================*/
.flex-group-row {
  display:flex !important;;
  flex-direction:row !important;
  justify-content: space-between;
}
  /*===================
  Buttons
  ====================*/
.ui-button,
.basicbutton,
input[type="button"]{
  background-color:var(--brightblue)!important;
  border:0 !important;
  padding:4px 8px;
  font-family:var(--font-body) !important;
  border-radius:var(--border-radius-medium)!important;
  font-weight:500 !important;
  outline: 0;
}
.ui-button:hover,
.basicbutton:hover,
input[type="button"]:hover{
  background-color:var(--blue300) !important;
}
.ui-button:active,
.basicbutton:active,
input[type="button"]:active{
  background-color:var(--blue200) !important;
}
  /*=======================
  Maximize layout to take advantage of all available screen space
  =======================*/

  body {
    overflow: hidden;
    font-size:var(--font-base-size);
    background-image:unset;
  }

  body .bodycontainer {
    width:100%;
    font-family:var(--font-body);
    display:flex;
    flex-direction:column;
    overflow: hidden;
    height:100vh;
  }
  body .content {
    position:relative;
    width:100%;
    display:flex;
    top:initial;
    bottom:initial;
    left:initial;
    right:initial;
    flex-direction: row;
    overflow: hidden;
    flex: 1;
    background-color:unset;
  }
.ui-widget-overlay {
  z-index:9999;
}

  /*===================
  Global Components - Header, MainMenu, Footer, Page Title, Tab Groups, search criteria
  ===================*/
/*==================
Controls and Inputs
===================*/
input, select, textarea, .basicinputarea, .customdropdown {
  border:2px solid var(--gray) !important;
  border-radius:8px;
  background-color:var(--white) !important;
  color:var(--black);
  font-size:var(--font-base-size) !important;
  font-family:var(--font-body) !important;
  padding: 6px 16px;
  height:auto;
  box-sizing:border-box;
}
/* .customdropdown only */
.customdropdown {
    background: url('../images/icons/chevrondown.png');
    background-repeat: no-repeat;
    background-position: top 50% right 12px;
    background-size: 12px auto;
}
.customdropdown > div {
  color:var(--neutral075);
  padding:0;
}
input:focus, select:focus, textarea:focus {
  box-shadow:var(--shadow-01);
  outline:0;
}
.searchboxpanel {
  background-image:none;
  height: auto;
text-align: right;
  padding:0;
  border:0;
}
.searchbox {
  background-image:url('../images/buttonsearch.png');
  background-position: 5px center;
  background-repeat:no-repeat;
  padding-left: 30px;
  height:auto;
  box-sizing: border-box;
}
.searchbox:focus,
.searchbox:active,
.searchbox:not(:placeholder-shown) {
  padding-left: 10px;
  background-image:none;
}
.searchbox:focus::placeholder,
.searchbox:active::placeholder {
  color:transparent;
}
/*===============
Toggles (dressed-up checkboxes)
===============*/
.basicinput .bigcheckbox {
  font-size:1em;
  color:#fff;
  background-color:var(--paleblue);
  border:0;
  padding:4px 12px;
  border-radius:var(--border-radius-large);
  /*! box-sizing: inherit; */
  display: inline-block;
  font-variant: all-small-caps;
}
.basicinput .bigcheckbox.bigcheckboxselected {
  background-color:var(--brightblue);
}
/* this is commonly the YES/NO toggle, but can also show > 2 options */
/* new custom class to denote toggle style */
.option-toggle {
  background-color:var(--paleblue);
  color:var(--white);
  border-radius:var(--border-radius-large);
  max-width: fit-content;
  border:2px solid var(--paleblue)
}
/*===============
Actual Checkboxes
===============*/
.basiccheckbox {
  width: 220px;
  float: left;
  background-image: url('../images/icons/checkboxes/default.png');
  background-repeat: no-repeat;
  background-position: left top;
  padding-left: 22px;
  margin: 2px;
  margin-bottom: 4px;
  cursor: pointer;
}
.checkboxitemlist .tablerow:hover .basiccheckbox,
.basiccheckbox:hover {
  background-image: url('../images/icons/checkboxes/hover.png');
}
.checkboxitemlist .tablerow:hover .basiccheckbox.basiccheckboxselected,
.basiccheckbox.basiccheckboxselected:hover {
  background-image: url('../images/icons/checkboxes/selected.png');
}
.basiccheckbox.basiccheckboxselected {
  background-image: url('../images/icons/checkboxes/selected.png');
}

.basiccheckbox.basiccheckboxselecteddisabled {
  background-image: url('../images/icons/checkboxes/selected-disabled.png');
}

.checkboxitemlist .tablerow:active .basiccheckbox {
  background-image: url('../images/icons/checkboxes/pressed.png');
}
/*==================
checkboxes in lists
====================*/
.checkboxitemlist .listvalue:first-child,
.checkboxitemlist .listcolumn:first-child{
  vertical-align: top;
  flex:unset;
}

/*  warning message banner */
.warningmessage {
	/*! display: initial; */
	width: 80vw;
	opacity: 1;
	background-color: var(--orange);
	position: fixed;
  top:24px !important;
  left:50% !important;
  transform: translateX(-50%);
	color: #fff;
	font-size:1em;
	text-align: left;
	padding: 16px;
	border-radius: 16px;
	border-left:0;
	z-index: 300;
  font-weight:500;
/*   display:flex !important; */
  justify-content:space-between;
  box-shadow:var(--shadow-04);
}
.warningmessage >div:nth-child(2) {
/*   display:none; */
  color:rgba(0,0,0,0)
}
    .warningmessage > div:nth-child(2):after {
        font-family: "FontAwesome";
        content: "\f057";
        font-size: 1.2em !important;
        font-weight: 400;
        color: var(--white)
    }

/* datepicker */

.ui-datepicker {
  border:0;
  border-radius:var(--border-radius-large) !important;
  box-shadow:var(--shadow-04);
  padding:16px;
  font-family:var(--font-body) !important;
}
.ui-datepicker .ui-datepicker-header {
  padding:0 !important;
}
.ui-datepicker .ui-datepicker-header {
  padding:0 !important;
}
.ui-datepicker .ui-datepicker-title {
  float:left;
  margin:0;
  color:var(--brightblue);
}
.ui-datepicker .ui-datepicker-prev {
  left:unset;
  right:32px
}
.ui-datepicker .ui-datepicker-prev, 
.ui-datepicker .ui-datepicker-next {
  position:absolute;
  top:0px;
  background-color:unset;
  border:0;
  border-radius:var(--border-radius-medium);
  cursor:pointer;
}
.ui-datepicker .ui-datepicker-prev:hover, 
.ui-datepicker .ui-datepicker-next:hover {
  background-color:var(--neutral800);
  border:0;
}
.ui-datepicker .ui-datepicker-prev:active, 
.ui-datepicker .ui-datepicker-next:active {
  background-color:var(--neutral700);
  border:0;
}
.ui-datepicker table thead {
  color:var(--neutral700);
  border-bottom:1px solid var(--neutral700);
}
.ui-datepicker-calendar .ui-state-default {
  background-color:unset !important;
  border:0 !important;
  color:var(--neutral075) !important;
  text-align: center;
  border-radius:var(--border-radius-medium);
  padding:8px;
}
.ui-datepicker-calendar .ui-state-default:hover {
  background-color:var(--neutral800) !important;
}
.ui-datepicker-calendar .ui-state-default:active {
  background-color:var(--neutral700) !important;
}
.ui-datepicker-calendar .ui-state-default.ui-state-active {
  background-color:var(--neutral900) !important;
}
/*=========
Header
==========*/
body .header {
  position:initial;
  height:64px;
  display:flex;
  width:100%;
  align-items:center;
  padding:0;
  margin:0;
  justify-content:space-between;
  padding:0px 24px; 
  box-sizing:border-box;
  background-color:var(--white);
/*   border-bottom:2px solid var(--gray); */
  box-shadow: var(--shadow-02);
  align-items: center;
}

body .header img {
  /*! height:48px; */
}
body .header >div:first-child {
  position:initial;
}
body .header .headeractionbar {
  padding:0;
  height: 100%;
}
body .header .headeractionbar > div {
  display:flex !important;
  height: 64px;
}
body .header >div:last-child {
  display:none;
}
.appuser {
  /*! background-color:var(--brightblue); */
  /*! padding:8px 16px; */
  /*! border-radius:var(--border-radius-medium); */
  color:var(--neutral075);
  display:flex;
  align-items: center;
  padding-left:24px;
  margin-right:0;
  border-left: 1px solid var(--neutral700);
}
.appuser:after {
  content:"";
  width:24px;
  height:24px;
  background:url('../images/icons/user.png');
  display: inline-block;
  background-size: cover;
  margin-left:8px;
}
.controlpanelarrow {
  display:none;
}
.helplink {
  border:0;
  display:flex;
  align-items: center;
  margin-right:24px;
  padding-right: 0;
}

.helplink i {
  display:none;
}
.helplink a {
  height:24px;
}
.helplink a:after {
  content:"";
  width:24px;
  height:24px;
  background:url('../images/icons/help.png');
  display: inline-block;
  background-size: cover;
}
.logout {
  color: unset;
  font-weight: normal;
  border-left: unset;
  padding-left: 0;
  margin-right:24px;
  cursor: pointer;
  align-items:center;
  display: flex;
}
.logout:after {
  content:"";
  width:24px;
  height:24px;
  background:url('../images/icons/logout.png');
  display: inline-block;
  background-size: cover;
}
.applicationusermenu {
  z-index:100;
  background-color:var(--white) !important;
  color: var(--neutral075);
  top:64px !important;
  right:32px !important;
  border-radius:var(--border-radius-medium);
  box-shadow:var(--shadow-03);
  padding:16px;
  width:initial;
}
.applicationusermenu > div:first-letter {
  color:rgba(255, 255,255,0);
}
/*===================================
Menu
===================================*/
/* A special case for the back button */

/* First I will remove the background PNG */
.mainmenuitem,
.mainmenubackbutton{
  background-image:none;
  padding:0;
  border:1px solid #000;
  padding:0 20px;
  position:relative;
  border-color:var(--palegrey);
  color: var(--darkgrey);
  border-right:0;
  border-left:0;
  height:64px;
  box-sizing:border-box;
  border-bottom: 0;
	display: flex;
	align-items: center;
}
.mainmenuitem .menuitemtitle {
  font-size:var(--font-size-medium);
  font-weight:400;
  color:inherit;
  padding:20px;
}
.mainmenubackbutton:hover,
.mainmenuitem:hover {
  background-color: var(--neutral800);
}
.mainmenuitem:active {
  background-color:var(--neutral700);
}
.mainmenuitem.mainmenuitemselected {
  color:var(--blue400) !important;
  background-color:var(--blue800) !important;
  font-weight:600 !important;
}
.mainmenuitem.mainmenuitemselected:hover {
  background-color:var(--blue700) !important;
}
.mainmenuitem.mainmenuitemselected:active {
  background-color:var(--blue800) !important;
}
.mainmenuitem.mainmenuitemselected .menuitemtitle {
  font-weight:400;
}

/* Then replace with Font-awesome or other icon */
.mainmenuitem:before,
.mainmenubackbutton:before {
  font-family:"FontAwesome";
  font-size:1.25em;
  display:block;
  float:left;
  width:20px;
  height:20px;
  background-repeat:no-repeat;
  background-size:contain;
}
/* each menu item gets a unique icon. I will list them here in the order they appear in the menu. */
    .mainmenubackbutton:before {
        content: "";
        background-image: url('../images/icons/arrowleft.png');
    }
.mainmenuitem.mainmenuitemhome:before {
  content:"";
  background-image:url('../images/icons/home.png');
}
.mainmenuitem.mainmenuitemdomains:before {
  content:"";
  background-image:url('../images/icons/customers.png');
}
.mainmenuitem.mainmenuitemusers:before {
  content:"";
  background-image:url('../images/icons/users.png');
}
.mainmenuitem.mainmenuitemdevicelog:before {
  content:"";
  background-image:url('../images/icons/devicelog.png');
}
.mainmenuitem.mainmenuitemassessments:before {
  content:"";
  background-image:url('../images/icons/assessments.png');
}
.mainmenuitem.mainmenuitemcourses:before {
  content:"";
  background-image:url('../images/icons/training.png');
}
.mainmenuitem.mainmenuitemtemplates:before {
  content:"";
  background-image:url('../images/icons/templates.png');
}
.mainmenuitem.mainmenuitemqualifications:before {
  content:"";
  background-image:url('../images/icons/certificates.png');
}
.mainmenuitem.mainmenuitemreports:before {
  content:"";
  background-image:url('../images/icons/analytics.png');
}
.mainmenuitem.mainmenuitemtaskanalyses:before {
  content:"";
  background-image:url('../images/icons/task.png');
}
.mainmenuitem.mainmenuitemsyllabuses:before {
  content:"";
  background-image:url('../images/icons/curricula.png');
}
.mainmenuitem.mainmenuitemworkflows:before {
    content: "\f1e0";
    color: var(--darkgrey) !important;
}
.mainmenuitem.mainmenuitemsettings:before {
  content:"";
  background-image:url('../images/icons/settings.png');
}
.mainmenuitem.mainmenuitemregulatorydocuments {
    display: none !important;
}
.mainmenuitem.mainmenuitemregulatorydocuments:before {
  content:"";
  background-image:url('../images/icons/devicelog.png');
}

.mainmenuitem .menuitemsubtitle {
  font-size:0.8em;
  color:inherit;
  display: block;
}
body .content #mainmenu {
  background-color:#fff;
  min-width:236px;
  box-shadow:var(--shadow-01);
  position:relative;
  z-index:99;
}
  body .content #mainmenu .mainmenu {
    position:initial;
    background-color:#fff;
    color:#505050;
    width:100%;
    flex: 0 0 auto;
  }
  .mainmenubackbutton {
    display:none !important;
  }
  
/*===================================
Main 
===================================*/
body .content .contentcontainer {
  flex: 0 1 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: auto;
}
body .content #panelmain {
  padding:24px 0 0 0;
  background-color:var(--neutral900);
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  height: 100%;
  flex-wrap: wrap;
  align-content: flex-start;
  overflow: auto;
}
#panelmain div[id^="panel"] {
 height:auto;
  /*! overflow:hidden; */
  display: flex;
  flex-direction: column;
  width:100%;
}
/*Title and Search Box*/
#panelmain div[id^="panel"] #paneltitle { /*Page Title*/
  font-size:var(--font-size-title);
  padding:24px;
  color:var(--darkgrey);
  overflow:hidden;
  height:100%;
  font-weight: 700;
  flex: 5;
  box-sizing: border-box;
}
#panelmain div[id^="panel"] #paneltitle+div { /*search box*/
  /*! display:flex !important; */
}
.searchbox {
  text-align:left;
}
.searchboxpanel #searchbox {
  height:auto;
}

body #searchcriteria.searchcriteriapanel {
  background-color:var(--white);
  position:relative;
  z-index:50;
  margin:0 !important;
  padding:24px 24px 0 24px !important;
  display:flex;
  border-radius:  0;
  border:0;
  flex-direction:row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

/* follow PBI 51591
===================================================================*/
body #searchfiltergroup.searchfiltergrouppanel {
    padding: 24px 0 0 24px;
    display: flex;
    background-color: var(--white);
}
body #searchfiltergroup.searchfiltergrouppanel .search-cpn {
    margin-right: 15px;
}
body #searchfiltergroup .filterbutton {
    width: 83px !important;
    cursor: pointer;
    text-align: left;
    padding: 6px 30px;
    height: auto;
    border: 2px solid var(--brightblue) !important;
    background-color: var(--white) !important;
    color: var(--brightblue);
    background-image: url('../images/icons/filter-expanded.png');
    background-position: 5px center;
    background-repeat: no-repeat;
    background-size: 20px;
}

body #searchfiltergroup .filterbutton.hidestatus {
    background-image: url('../images/icons/filter.png') !important;
    background-size: 16px;
    background-position: 7px center;
}

/* This is a new containing div for the filter/table/pagination area
===================================================================*/
.contentwrapper {
	flex: 1;
	height: 100%;
	box-shadow: var(--shadow-04);
	display: flex;
	flex-direction: column;
	border-radius: var(--border-radius-medium);
}

/* folow PBI 44875
===================================================================*/
body #searchcriteria.searchcriteriapanel .input-group {
    display: flex;
    flex-direction: column;
    margin: 0em 1em 1em 0em;
    flex: 1;
    flex-basis: 20%;
}

body #searchcriteria.searchcriteriapanel .basicinput > * {
    box-sizing: border-box;
    width: 100% !important;
}

body #searchcriteria.searchcriteriapanel .basicinput {
    width: 100% !important;
    margin: initial !important;
}

body #searchcriteria.searchcriteriapanel .useradmin-input {
    width: 25% !important;
}

.input-group {
  display:flex;
  flex-direction:column;
  margin:0em 1em 1em 0em;
  /*! flex: 1; */
}
.basiclabelnarrow {
  width:initial !important;
  margin:initial !important;
  font-size:0.8em;
  font-weight:normal;
}

.basicinput {
  width:initial !important;
  margin:initial !important;
}
.basicinput >*{
  /*! padding:4px 8px; */
  box-sizing:border-box;
  width:initial !important;
}
.date-group {
  display:flex;
  align-items: center;
  gap: 10px;
}
body #searchcriteria.searchcriteriapanel div:empty {
  display:none;
}

/*====================
This is typically the tables/lists
====================*/
body .itemlist {
  position:relative;
  background-color:var(--white);
  margin:0;
  z-index:21;
  padding:24px 0px 24px 0px;
  box-sizing:border-box;
  overflow:auto;
  /*! height:100%; */
  flex: 1;
  display: flex;
  flex-direction: column;
  /*! border-top:16px solid var(--white); */
  border-bottom:16px solid var(--white);
  /*! border-radius: var(--border-radius-large); */
}
body #searchcriteria.searchcriteriapanel +.itemlist {
  border-radius:0;
}

/* Table formatting */

.tabletitlerow, .tablerow, .tablerownohover {
    display: flex;
    width: 100%;
    background-color: #fff;
    justify-content: flex-start;
    flex-wrap: nowrap;
    font-weight: 400;
}
.tabletitlerow {
  font-weight:600;
  position: sticky;
  margin-top:15px;
  text-transform:lowercase;
}
.tabletitlerow .listcolumn {
  padding:0 24px 16px 24px !important;
}
.sortablecolumn {
  background-image:unset;
}
/* new icons for sortable */

.sortablecolumn:after {
  content:"";
  width:20px;
  height:20px;
  display:block;
  background-image: url("../images/icons/sort.png");
  float: right;
  background-size:cover;
  background-position: center;
  background-repeat: no-repeat;
}
.sortablecolumn.sortascicon:after {
  content:"";
  width:20px;
  height:20px;
  display:block;
  background-image: url("../images/icons/sortAsc.png");
  float: right;
  background-size:cover;
  background-position: center;
  background-repeat: no-repeat;
}
.sortablecolumn.sortdescicon:after {
  content:"";
  width:20px;
  height:20px;
  display:block;
  background-image: url("../images/icons/sortDesc.png");
  float: right;
  background-size:cover;
  background-position: center;
  background-repeat: no-repeat;
}
.tabletitlerow .listcolumn {
  padding:8px 24px;
  font-size:var(--font-size-medium);
}
.tablerow:nth-child(even) {
  /*! background-color:var(--palegrey) */
}
.tablerow {
  border-bottom:1px solid var(--gray);
}
.tablerow:hover {
  background-color:var(--neutral800);
}
.tablerow:active {
  background-color: var(--neutral700);
}
.tablerowselected {
  background-color:var(--blue900);
  /*! color:var(--white); */
}
.tablerow.tablerowselected:hover {
  background-color: var(--blue800);
}
.tablerow.tablerowselected:active {
  background-color: var(--blue700);
}
.listcolumn {
  border-left:0;
  border-right:0;
}
.listcolumn, .listvalue {
  flex:1;
  padding: 13.5px 24px !important;
  flex-basis: 1;
  font-size:var(--font-size-body);
  border-right:0;
  text-align:left !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tooltip {
    display: block;
    position: absolute;
    white-space: normal;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    word-break: break-all;
    width: max-content;
    z-index: 999999;
}
.tablerow:last-child > .listvalue {
/*  this is done to override something in general.css  */
  padding-bottom:24px;  
}
/* for some reason this one cell is formatted differently than all of the others. */
.listvalue.assessmentresult >div > div > div{
  padding:13.5px 24px;
}
/* the first column usually contains the name which is typically longer text length than the others. */
.tablerownohover .listvalue:not(.checkbox-column):first-child,
.tabletitlerow .listcolumn:not(.checkbox-column):first-child,
.tablerow .listvalue:not(.checkbox-column):first-child{
    flex:2;
}
.table-has-checkbox-column .tablerownohover .listvalue.name-column,
.table-has-checkbox-column .tabletitlerow .listcolumn.name-column,
.table-has-checkbox-column .tablerow .listvalue.name-column{
    flex:4;
}

body .listpaging {
  font-family: var(--font-body);
  font-size: 0.75em;
  border-top: 1px solid var(--neutral700);
  padding:24px;
  margin-bottom: 0;
  background-color:var(--white);
  border-radius:0;
  
}

/*========================
THIS IS CRITICAL
=========================*/
#paneltemplates {
  display:flex;
  flex-direction:column;
  overflow: hidden;
  /*! height: 100%; */
}
/*Tab Group*/
.featuretabbar {
  display:block;
  padding: 0px !important;
  margin:0;
  position: relative;
  background-color:var(--white);
  border-radius:0;
  overflow: hidden;
}
.featuretabbar >div {
  display:flex !important;
  float:none;
  justify-content: flex-start;
  border-bottom: 2px solid var(--gray)
}
 /*remove empty spacers*/
.featuretabbar div >div:not(.featuretab){
  display:none;
  width:0;
  opacity:0;
  position:absolute;
}


.featuretab {
  /*! flex:1; */
  font-size:var(--font-size-base);
  border-radius:0;
  padding:16px 24px !important;
  color:var(--black);
  background-color:var(--white);
  z-index:0;
  position:relative;
  margin-bottom: -2px; 
  font-weight:500;
}
.featuretab:hover {
  background-color:var(--palegrey);
  color:var(--black);
}
.featuretab::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: var(--gray);
}
    .featuretab.featuretabselected {
        color: var(--brightblue) !important;
        background-color: #fff;
        z-index: 20;
    }
    .featuretab.featuretabselected::after {
        background-color: var(--brightblue);
    }
.featuretab.featuretabselected:hover {
  background-color:#fff;
}
.ui-dialog .featuretab {
  font-size:0.8em;
  
}
/*===================================
Footer
===================================*/
body .bodycontainer .footer {
  z-index:100;
  height: initial;
  display: block;
  background-color: unset !important;
  width: auto !important;
}
body .bodycontainer .footer .newbutton {
  display:none; 
}
body .bodycontainer .footer .footertoolbar {
  display:flex !important;
  justify-content: center;
  margin:0px auto;
  padding:0;
  background-color:var(--brightblue);
  /*! transform: translateX(-50%); */
  /*! position: relative; */
  /*! left: 50%; */
  box-shadow: var(--shadow-02);
  width: 100% !important;
}
    body .bodycontainer .footer .footerbutton {
        float: none;
        display: block;
        width: auto;
        padding: 36px 16px 0 16px;
        margin: 8px 16px;
        border-radius: var(--border-radius-medium);
        /*! flex: 1; */
        height: initial;
        white-space: nowrap;
        position: relative;
    }
body .bodycontainer .footer .footerbutton:hover {
  background-color:var(--paleblue);
  box-shadow: var(--shadow-04);
}
body .bodycontainer .footer .footerbutton {}

/*===============================
Some page-specific rules that are too minor to require their own css file.
===============================*/
/* Edit User Page */
#paneluser .featuretabbar + div {
  background-color:var(--white);
  margin-top:0 !important;
  border-top:0 !important;
  padding:24px !important;
}
#paneluser .itemrowseparator {
  display:none;
}

/* quickmenus in the toolbar like status etc... */

.toolbarquickmenu {
  z-index:1000;
  background-color: var(--white);
  border: 0;
  border-radius: var(--border-radius-large);
  box-shadow: var(--shadow-04);
  padding: 16px;
  width:auto !important;
}
.toolbarquickmenu > div {
  padding:4px 8px 4px 8px !important;
  color:var(--neutral075);
  border-radius:var(--border-radius-medium);
  background-image:none !important;
}
.toolbarquickmenu > div.menudisabled {
  color:var(--neutral700);
}
.toolbarquickmenu > div:hover {
  background-color:var(--neutral800);
}
.toolbarquickmenu > div:active {
  background-color:var(--neutral700);
}
/*===============================
Media Breakpoints
===============================*/
@media screen and (max-width:1251px) {
  .listcolumn, .listvalue {
    padding:16px;
  }

}
@media screen and (max-width:899px){
  body {
    font-size:var(--font-size-medium);
  }
}
@media screen and (max-width:767px) {
  
  body .content #mainmenu {
    min-width:unset;
  }
  .mainmenuitem .menuitemtitle {
    display:none;
  }
  body .bodycontainer .footer {
    left:60px;
  }
}
.mainmenubackbutton > div.menuitemtitle {
    font-size: var(--font-size-small);
    font-weight: 400;
    color: inherit;
    padding: 20px;
}
.flex-appeared {
    display: flex !important;
}


/*====================
Utils
====================*/
.flex-1 {
    flex:1 !important;
}
.flex-2 {
    flex: 2 !important;
}
.flex-3 {
    flex: 3 !important;
}
.flex-4 {
    flex: 4 !important;
}
.flex-5 {
    flex: 5 !important;
}
.ui-widget {
    z-index: 9999;
}

.pdl-10 {
    padding-left: 10px;
}

.pdl-20 {
    padding-left: 20px;
}

.pdl-30 {
    padding-left: 30px;
}

.pdl-40 {
    padding-left: 40px;
}

.pdl-50 {
    padding-left: 50px;
}

.pdl-60 {
    padding-left: 60px;
}

.editablearea {
    display: flex;
    align-items: center;
    min-width: 24px;
}

.editablelink,
.editablehistorylink {
    text-decoration: none;
}

.editablelink i,
.editablehistorylink i {
    font-size: 1.2em;
    margin-left: 10px;
    margin-top: 2px
}

#pagingcriteria.pagingcriteriapanel {
    background-color: var(--white);
    position: relative;
    z-index: 1;
    margin: 0 !important;
    padding: 10px !important;
    display: flex;
    border-radius: 0;
    border-top: 1px solid var(--neutral700);
    border-bottom: 1px solid var(--neutral700);
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

#pagingcriteria.pagingcriteriapanel .input-group {
    display: flex;
    flex-direction: column;
    margin: 0;
    flex: 1;
    justify-content: center;
    position:relative;
}

#pagingcriteria.pagingcriteriapanel .basicinput > * {
    box-sizing: border-box;
    width: 100% !important;
}

#pagingcriteria.pagingcriteriapanel .basicinput {
    width: 100% !important;
    margin: initial !important;
}

#pagingcriteria.pagingcriteriapanel .input-group-border-left::before {
    content: "";
    border-left: 1px solid var(--neutral700);
    height: 20px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

#pagingcriteria.pagingcriteriapanel .input-group-border-right::after {
    content: "";
    border-right: 1px solid var(--neutral700);
    height: 20px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

#pagingcriteria.pagingcriteriapanel .pagingnextprev-container {
  position: relative;
}

#pagingcriteria.pagingcriteriapanel .pagingnextprev-container::after {
  content: "";
  border-right: 1px solid var(--neutral700);
  height: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#pagingcriteria.pagingcriteriapanel .left-panel {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 15px;
}

#pagingcriteria.pagingcriteriapanel .left-panel .input-group {
    flex-direction: row;
    flex: none;
    padding-right: 15px;
    margin-bottom: 0;
}

#pagingcriteria.pagingcriteriapanel .right-panel {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

#pagingcriteria.pagingcriteriapanel .right-panel .input-group {
    flex-direction: row;
    flex: none;
    padding-right: 15px;
    padding-left: 15px;
    margin-bottom: 0;
}

#pagingcriteria.pagingcriteriapanel .right-panel .input-group .basiclabelnarrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    font-size: 1rem;
}

#pagingcriteria.pagingcriteriapanel #ddlPageNumber, #pagingcriteria.pagingcriteriapanel #ddRowNumberPerPage {
    border: 0 !important;
    padding: 0;
    width: 50px;
}

#pagingcriteria.pagingcriteriapanel .pagingnextprev {
    font-size: 0.8rem;
}

#pagingcriteria.pagingcriteriapanel .pagingnextprev-wapper {
  padding-right: 0;
  display: block;
}

#pagingcriteria.pagingcriteriapanel .total-wapper {
  padding-left: 15px;
}

#pagingcriteria.pagingcriteriapanel #lblTotalItems {
  color: var(--neutral700);
  font-size: 1rem;
}

.buttondisabled {
    float: right;
    cursor: default;
    color: #ccc;
    pointer-events: none;
}

.ui-dialog-confirm-leave-rdmt .ui-dialog-titlebar-close {
  display: none;
}

.ui-dialog-confirm-leave-rdmt .ui-dialog-buttonset {
  width: 100%;
}

  .ui-dialog-confirm-leave-rdmt .ui-dialog-buttonset button {
    padding: 12px 12px !important;
  }
    .ui-dialog-confirm-leave-rdmt .ui-dialog-buttonset button:first-child {
      float: right;
    }
    .ui-dialog-confirm-leave-rdmt .ui-dialog-buttonset button:first-child:hover {
      background-color: var(--blue300) !important;
    }
    .ui-dialog-confirm-leave-rdmt .ui-dialog-buttonset button:last-child {
      float: left;
      margin-left: 0;
      background-color: var(--blue800) !important;
      color: var(--blue200) !important;
    }

.traineeassessmenthistorytable .tabletitlerow .listcolumn.history-revision,
.traineeassessmenthistorytable .tablerow .listvalue.history-revision {
  flex: none !important;
  width: 125px;
  box-sizing: border-box;
}

.assessmentcommentshistorytable .tabletitlerow .listcolumn.signed-date,
.traineeassessmenthistorytable .tabletitlerow .listcolumn.history-date,
.assessmentcommentshistorytable .tablerow .listvalue.signed-date,
.traineeassessmenthistorytable .tablerow .listvalue.history-date {
  flex: none !important;
  width: 125px;
  box-sizing: border-box;
}


.assessmentcommentshistorytable .tabletitlerow .listcolumn.signed-user,
.traineeassessmenthistorytable .tabletitlerow .listcolumn.history-user,
.assessmentcommentshistorytable .tablerow .listvalue.signed-user,
.traineeassessmenthistorytable .tablerow .listvalue.history-user {
  flex: none !important;
  width: 175px;
  box-sizing: border-box;
}

.traineeassessmenthistorytable .tabletitlerow .listcolumn.history-action,
.traineeassessmenthistorytable .tablerow .listvalue.history-action {
  flex: none !important;
  width: 225px;
  box-sizing: border-box;
}


.assessmentcommentshistorytable .tabletitlerow .listcolumn.signed-comment,
.traineeassessmenthistorytable .tabletitlerow .listcolumn.history-comment,
.assessmentcommentshistorytable .tablerow .listvalue.signed-comment,
.traineeassessmenthistorytable .tablerow .listvalue.history-comment {
  border-right: none !important;
  box-sizing: border-box;
}

.assessment-monitor-list .tablerow .listvalue .training-assessment-icon {
    background-image: url(../images/icons/training_course_icon.png);
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    float: right;
    margin-right: -3px;
}

.training-assessment-icon-tooltip {
    background-color: black;
    color: white;
    border-radius: 5px;
    padding: 4px 8px;
    position: fixed;
    font-size: 12px;
    line-height: 16px;
}

.listcolumn.checkbox-column, 
.listvalue.checkbox-column {
  flex: none;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.listvalue.checkbox-column .basiccheckbox {
  width: 20px;
  height: 20px;
  margin-left: 10px;
  box-sizing: border-box;
  margin-right: 0;
}

.dialog-desc {
  margin-bottom: 30px;
  margin-top: -5px;
}

#signingreminderbox .remark {
    font-size: 12px;
    color: #ff9800;
    margin-top: 4px;
}