/* Body */
body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; }

/* Layout */
.layout-col { }
.col-menu { position: absolute; left: 0; top: 0; height: 100%; width: 0px; padding: 0; transition: all .5s ease; box-shadow: 5px 0 5px -5px #333; z-index:2; background-color:white; }
.col-main { height: 100%; float: left; top: 0; left: 0px; z-index: unset !important; width: 100%; position:relative; transition: all .5s ease; overflow:auto; }
.col-user { position: absolute; left: 0; top: 0; z-index: 3; padding:10px; cursor:pointer; width:100%; }
.col-menu.open { width: 250px;   }
.col-main.open { width: calc(100% - 250px); left:250px; }

/* Layout dynamic */
.col-social { height: 100%; width: 0; position: absolute; z-index: 1; top: 0; left: 0; background-color: #f1f1f1; overflow: hidden; transition: all .5s ease; width: 315px; }
.col-work { transition: margin-left .5s; position: relative; height: 100%; overflow: hidden; margin-left: 315px; background-color: #d1d1d1; }

/* Menu items */
.nav-list { list-style: none; padding:6px 14px; margin:0; padding-top:55px; transition: all .5s ease; opacity:0; }
.col-menu.open .nav-list { opacity: 1; }
.nav-list > li {  position: relative; margin: 8px 0; list-style: none; }
.nav-list li a { display: flex; height: 100%; width: 100%; border-radius: 12px; align-items: center; text-decoration: none; transition: all .4s ease; color: #333; }
.nav-list li i {
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  border-radius: 12px;
  min-width:50px;  
  text-align: center;
}
.nav-list li a .links_name {
  color: #333;
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: .4s;
}
.col-menu.open .links_name {
  width: 100%;
  overflow: hidden;
  opacity: 1;
}
.li-sep {
  background-color: #8fadc5;
  height: 1px !important;
  width: 100%;
  margin: 0 auto;
  opacity: .6;
}
.nav-list li a:hover {
  background: #f1f1f1; color: #2f89fc;
}
.nav-list li.active a {
  background: #e8f4ff; 
  color: #2f89fc;
}
.nav-list li.active a i {
  color: #2f89fc;
}
.nav-list li.active a .links_name {
  color: #2f89fc;
  font-weight: 500;
}
.col-menu .logo-details {
  height: 40px;
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  opacity:0;
}

.logo-details, .nav-list { pointer-events: none; user-select: none; }

.col-menu.open .logo-details, .col-menu.open .nav-list {
    opacity:1; 
    pointer-events: initial !important;
    user-select: initial !important;
}

.col-menu.open .logo-menu { background-color: #288AFC; }
.col-menu .logo-menu:hover { background-color: #288AFC; box-shadow: 5px 0px 1px -2px #c1c1c1; }

.col-menu .logo-details .box_name {
  color: #333;
  font-size: 20px;
  font-weight: 600;
  opacity: 0;
  transition: all .5s ease;
  width: 135px;
  padding-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.logo-box {
  height: 60px;
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  cursor: pointer;
}
.box-image {
  border-radius: 50%;
  overflow: hidden;
  width: 40px;
  height:40px;
  background-color: #2f89fc;
  color: white;
  text-align: center;
  vertical-align:central;
}
.col-menu .logo-details #btn {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    font-size: 22px;
    transition: all .4s ease;
    font-size: 23px;
    text-align: center;
    cursor: pointer;
    opacity: 0;
    transition: all .5s ease;
}
.col-menu.open .logo-details #btn { opacity: 1; }
.logo-box > img { margin-left: 10px; transition: all .5s ease; opacity:0;}
.col-menu.open .logo-box > img { opacity:1; }
.col-menu li.profile {
  position: fixed;
  height: 60px;
  width: 78px;
  left: 0;
  bottom: -8px;
  padding: 10px 14px;
  background: #f1f1f1;
  transition: all .5s ease;
  overflow: hidden;
  z-index: 990;
  opacity:0;
}
.col-menu.open li.profile {
  width: 250px;
  opacity:1;
}

/* "Save my activities", the guest's last entry. Fixed rather than left in the list because the
   profile card below it is fixed too: an item in the flow would sit wherever the list happened to
   end, which on a short menu is nowhere near the bottom. Everything else here mirrors .profile so
   the two open and close together. */
.col-menu li.menu-save {
  position: fixed;
  left: 0;
  bottom: 78px;
  width: 78px;
  margin: 0;
  padding: 0 14px;
  transition: all .5s ease;
  z-index: 990;
}
.col-menu.open li.menu-save { width: 250px; }

/* Two shapes for one entry. Closed there is 50px of usable width, which is an icon and nothing
   else; open there is room to say why. Swapped rather than scaled, because a card squeezed into a
   rail is neither. */
.col-menu li.menu-save .ms-card { display: none; }
.col-menu.open li.menu-save .ms-card {
  display: block;
  position: relative;
  /* The right strip is the drawing's, reserved by the padding so every line inside clears it
     without carrying a padding of its own. Inside the card, not bleeding off it: it is part of
     the panel rather than something the panel is sitting on. */
  padding: 14px 66px 14px 14px;
  border-radius: 14px;
  border: 1px solid #e2e9fb;
  background-color: #F6F8FC;
  background-image: url("../images/keep_progress.png");
  background-repeat: no-repeat;
  background-position: right 2px bottom 8px;
  background-size: 100px auto;
}
.col-menu.open li.menu-save .ms-mini { display: none; }

/* Folded: the badge and nothing else. The drawing goes with the rest - at this height it would be
   a sliver of a clipboard - and the whole strip becomes the way back, so there is no second small
   button to aim at. */
.col-menu.open li.menu-save.is-collapsed .ms-card {
  padding: 8px 10px;
  background-image: none;
  cursor: pointer;
}
.col-menu.open li.menu-save.is-collapsed .ms-close,
.col-menu.open li.menu-save.is-collapsed .ms-title,
.col-menu.open li.menu-save.is-collapsed .ms-text,
.col-menu.open li.menu-save.is-collapsed .ms-cta {
  display: none;
}
.col-menu.open li.menu-save.is-collapsed .ms-head {
  margin: 0;
  padding: 0;
}
.col-menu.open li.menu-save.is-collapsed .ms-card:hover {
  border-color: #c9d9f7;
}

.col-menu li.menu-save .ms-mini {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  width: 50px;
  border-radius: 12px;
  background: #f4f7ff;
  color: #288AFC;
}
.col-menu li.menu-save .ms-mini i { font-size: 20px; min-width: 0; }

/* Small and grey until pointed at: it is a way out, not an action, and a card offering to keep
   somebody's work should not lead with a way to dismiss it. The badge row keeps a padding clear
   for it, since that row reaches into the same corner. */
.ms-close {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  width: 22px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #a9b6cf;
  cursor: pointer;
  z-index: 2;
}
.ms-close:hover { background: #e3ecff; color: #1B74DD; }
.ms-close i { font-size: 16px; height: auto; line-height: 1; min-width: 0; }

/* The badge reaches into the strip the artwork left free at the top - the drawing sits low, so
   nothing is there to collide with, and "1 activity completed" stops breaking across two lines
   with empty space beside it. */
.ms-head { display: flex; align-items: center; gap: 6px; margin: 0 -52px 9px 0; padding-right: 26px; }
.ms-check {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  width: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  background: #e0eaff;
  color: #1B74DD;
}
.ms-check i { font-size: 16px; height: auto; line-height: 1; min-width: 0; }
/* A pill, as in the mock: the number is the argument and it should read as a badge, not as a
   caption under the tick. */
.ms-count {
  padding: 3px 8px;
  border-radius: 999px;  
  font-size: 9pt;
  font-weight: 600;
  color: #1B74DD;
  line-height: 1.2;
  white-space: nowrap;
}

.ms-title { margin: 0 -24px 5px 0; font-size: 10.5pt; font-weight: 700; color: #1e293b; line-height: 1.25; }
.ms-text { margin: 0 0 11px; font-size: 8pt; color: #64748b; line-height: 1.45; }

/* Higher specificity than .nav-list li a, which would otherwise stretch this to the row height
   and strip its background. */
.col-menu.open li.menu-save a.ms-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 34px;
  /* The text column, not the card: full width here means "as wide as the copy beside it", which
     is what stops the label breaking across two lines. */
  width: 100%;
  padding: 0 10px;
  border-radius: 10px;
  /* The product's own blue, and its own hover - a button this prominent should not introduce a
     second one. */
  background: #288AFC;
  color: #fff;
  font-size: 8.5pt;
  font-weight: 600;
  white-space: nowrap;
}
.col-menu.open li.menu-save a.ms-cta:hover { background: #1B74DD; color: #fff; }

/* On the page it points at. Not disabled - it is still the way back if they wandered off inside
   the form - just no longer asking for a click it does not need. */
.col-menu.open li.menu-save.is-here a.ms-cta { background: #16a34a; }
.col-menu.open li.menu-save.is-here a.ms-cta:hover { background: #15803d; color: #fff; }
.col-menu.open li.menu-save a.ms-cta i { font-size: 18px; height: auto; line-height: 1; min-width: 0; }
li.profile img {
  height: 40px;
  width: 40px !important;
  object-fit: cover;
  border-radius: 6px;
  margin: 2.5px;
    margin-right: 2.5px;
  margin-right: 10px;  
  max-width: unset !important;
}
.col-menu li.profile .name_user { font-size: 15px; }
.col-menu li.profile .job { font-size:12px;}
.col-menu li.profile .name_user, .col-menu li.profile .job {  
  font-weight: 400;
  color: #333;
  /* The organization line is a caption under the name, not a second name - see the grey it takes
     further down, which overrides this. */
  white-space: nowrap;
  width: 125px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.col-menu li .profile-details {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  cursor: pointer;
}

.col-menu .profile #log_out {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: #d1d1d1;
  width: 50px;
  height: 60px;
  line-height: 60px;
  border-radius: 0;
  transition: all .5s ease;
  cursor: pointer;
}
.logo-menu { opacity:1; position:absolute; display: flex; width: 47px; top:0; left:0px; transition: all .5s ease; background-color:#c1c1c1; padding:5px 6px;              
             box-shadow: 5px 0px 1px -2px #e1e1e1; border-radius: 0 0 5px 0;
}
.col-menu.open .logo-menu {    
     overflow:hidden;
     width:0;
     box-shadow: none;
     border-radius:0;
}
.logo-menu i {
  color: white;
  height: 30px;
  min-width: 30px;
  font-size: 28px;
  text-align: center;
  line-height: 30px;
  margin-right: 5px;
}
.logo-menu img {
  height: 25px;
  width: 25px !important;
  object-fit: cover;
  border-radius: 6px;
  margin: 2.5px;
    margin-right: 2.5px;
  margin-right: 2.5px;
  margin-right: 10px;
  background-color: #2f89fc;
  max-width: unset !important;
}

/* dynamics */
.col-dynamic-container { background-color:#c1c1c1; }
.dynamic-table {
    overflow: hidden;
    background-color: white;
    height: 100px;
    color: #444;
    font-size: 10pt;
    position:relative;
    cursor:pointer;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;            
    transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    
    filter: grayscale(30%);
}
.dynamic-table:hover {
    background-position:bottom;
    opacity:1;
    filter:unset;
}
.col-dynamic { position:relative; }
.dynamic-table img {
    width:150%;
    position:absolute; 
    left:50%; top:50%;
    transform: translate(-50%, -50%);
}
.dynamic-tooltip {
    position:absolute;
    width: 500px;
    padding:10px;
    top: 110%;
    left:0%;/* transform:translate(-50%);*/
    background-color:#e1e1e1; z-index:999;
}
.dynamic-tt-container {
    width:100%;
    position:absolute;
    top:99%;
    z-index:999;
    left:2px;
    display:none;
}
.col-dynamic:hover .dynamic-tt-container {    
    display: block !important;
}

.dynamic-tt-container:after {
	top: -20px;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;

}
.create-container > .col-md-3:nth-child(2) .dynamic-tooltip {
    left:50%; transform: translate(-50%);
}   
.create-container > .col-md-3:nth-child(3) .dynamic-tooltip {
    left:50%; transform: translate(-50%);
} 
.create-container > .col-md-3:nth-child(4) .dynamic-tooltip {
    right:2px; left:unset !important;
} 
.dynamic-tt-container:after {
	border-color: rgba(136, 183, 213, 0);
	border-bottom-color: #e1e1e1;
	border-width: 10px;
	margin-left: -10px;
}
.dynamic-title { position:absolute; bottom:0; left:0; width:100%; height:20px;
                 
}
.dynamic-title-back { position: absolute; width:100%; height: 100%; background-color: #000;
                      opacity: 0.5; z-index:995;
}
.dynamic-title-span { position: absolute; left:50%; top:50%; transform:translate(-50%,-50%);
                      color:white; z-index:995; text-shadow: 2px 2px 3px #000 !important;
                      display:inline-flex; white-space:nowrap; font-size:9pt; text-transform:uppercase;
}
.dynamic-title-span i { margin-right:10px; font-size:14pt; }
.fun-tag { position: absolute; left:5px; top:-25px; background-color: hotpink; color:white; border-radius:4px; z-index:995;
           padding:2px 10px;font-size:8pt;box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}
.general-tag { background-color: #0086DF; color:white; border-radius:4px; z-index:995; float:left;
           padding:2px 10px;font-size:8pt;box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}
.team-tag { background-color: #2EBA43; color:white; border-radius:4px; z-index:995; float:left;
           padding:2px 10px;font-size:8pt;box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}
.notavailable-tag { position: absolute; left:5px; top:-25px; background-color: #999; color:white; border-radius:4px; z-index:996;
           padding:2px 10px;font-size:8pt;box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}
.col-hashtag { height:50px; padding-top:15px; padding-left:0px; }
.title-table { max-width: 293px;
background-color: #ebebeb;
padding-left: 30px; cursor:pointer;margin-right: -15px;
margin-left: -15px; width:100%;
padding-top:5px;
display:inline-flex;
padding-right:10px;
position:relative;
margin-top:25px;
}
.title-table > i:first-of-type { font-size:14pt; margin-right: 10px; color:#243654; }
.title-table > i:last-of-type { position:absolute; right:10px; top:4px; color:#243654; }
.title-table:hover span { text-decoration:underline !important;}
.title-table:hover { background-color:#e9e9e9;}
.create-container { padding-top:0px; }
.card-hdn {  }
.card-na { opacity:0.5; }
.dt-images,.dt-info { float:left; padding:5px; }
.dt-info { font-size: 10pt; color:#444; }
.dt-info h3 { font-size:12pt; font-weight:bold;}
.dt-info p { padding-bottom:0; margin-bottom:0; display:inline-flex; width:100%;}
.dt-info i { font-size:14pt; margin-right:5px; }
.dt-info i:last-of-type { margin-left:10px; }
.dt-images img { width:48%; margin-right:1%; float: left; margin-bottom:1%; border:1px solid #333; }

/* forms */
.schd-box { padding-top:15px;}
.form-list {
  height: 100%;
  width: 0;
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #ECF8FF;   
  width: 315px;
  padding:10px 15px;
  border-left:1px solid #2B3750;
}

.form-data {
  position: relative;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  margin-right: 315px;
  background-color: white;
  padding:20px 40px;
}
.form-right > form > .row { padding: 4px 4px 0 0; }
.row-title { margin-bottom: 20px;}
.create-tab { margin-bottom: 0px; margin-top:15px; }
.form-activity-list { background-color:#f9f9f9; margin-top: 20px; border-radius: 5px; padding:10px; }

/* dynamic form */
.ul-activity, .ul-activity > li { list-style:none; margin: 0; padding:0; }
.ul-activity > li { background-color: white; border-radius: 5px; padding: 10px; margin-top:15px;}
.text-bg-primary { background-color: #2f89fc;  }
.accordion-button { padding: 0.7rem 1rem !important; }
.badge.bg-primary { padding:0; height: 30px; width:30px; font-size: 12pt; padding: 8px 10px;  }
.accordion-item { margin-top: 7px; border-top: 1px solid rgba(0,0,0,.125) !important;  }
.accordion-button:not(.collapsed) { background-color: #F4FBFF !important; }
.accordion-handle { cursor: move; height:48px; width:130px; position: absolute; top:0; left:0; z-index:10; }
.accordion-header { position: relative; }

/* The organization line under the user's name. A flex row rather than an icon dropped into text:
   an icon sits on the baseline, and the baseline of a 12px glyph is not the middle of the line
   beside it. The name keeps the ellipsis the rule above gives it - the icon must not be what gets
   truncated, so it is the span that shrinks. */
.col-menu li.profile .job {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Undoing `.nav-list li i`, which makes every icon in this list a 50x50 block with a 50px line
   height - right for a nav row, and what shoved this whole card apart when a 12px line inherited
   it. Everything that rule sets has to be said again here; setting only the font size left the box
   behind. */
.col-menu li.profile .job i {
  flex: 0 0 auto;
  height: auto;
  min-width: 0;
  line-height: 1;
  font-size: 14px;
  color: #64748b;
}

.col-menu li.profile .job span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Grey, because it is a caption: it says which organization the name above is signed in under, and
   at the same weight as the name it read as a second line of equal standing. Darkens with the icon
   on hover - together, so the line reacts as one thing rather than in two halves. */
.col-menu li.profile .job,
.col-menu li.profile .job i { color: #666; transition: color .15s ease; }

.col-menu li.profile .profile-details:hover .job,
.col-menu li.profile .profile-details:hover .job i { color: #333; }

/* ── The profile card's menu ───────────────────────────────────────────────── */

/* Positioned by script against the card it belongs to, so only the look is here. Fixed and in the
   page rather than in the rail: `.col-menu` has a z-index and is therefore a stacking context, and
   a menu inside it could never be ordered against a backdrop outside it - raising the menu raised
   the whole navigation with it. */
.profile-menu {
  position: fixed;
  z-index: 1001;
  min-width: 222px;
  padding: 6px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
}

.profile-menu[hidden] { display: none; }

/* Its own class rather than Bootstrap's .dropdown-item: this menu is no longer a dropdown, and
   borrowing the class would mean inheriting a row height meant for something else. */
.profile-menu .pm-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #333;
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
}

.profile-menu button.pm-item { cursor: pointer; }
.profile-menu button.pm-item:hover,
.profile-menu a.pm-item:hover { background: #f1f5f9; color: #288AFC; }

.profile-menu .pm-item i { flex: 0 0 auto; font-size: 16px; line-height: 1; color: #64748b; }
.profile-menu .pm-item span { overflow: hidden; text-overflow: ellipsis; }
.profile-menu .pm-tick { margin-left: auto; color: #288AFC; }

/* The one already in use: named, ticked, and not a button, because pressing it would switch to
   where you already are and reload the page to arrive back.

   The name stays black - it is a name, and the blue was making it read as a link into somewhere.
   The colour goes on the icon and the tick, which is where "this is the one" belongs. */
.profile-menu .pm-item.is-active { background: #e8f4ff; color: #333; font-weight: 600; }
.profile-menu .pm-item.is-active i { color: #288AFC; }
.profile-menu .pm-item.is-muted { color: #94a3b8; }

.profile-menu .pm-header {
  padding: 6px 10px 2px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #94a3b8;
}

/* After the rule above, not before it: same specificity, so the later one wins. Every section
   carries a heading now, and the first would otherwise sit lower than the two that follow a
   divider - it has the panel's own padding above it already. */
.profile-menu .pm-header:first-child { padding-top: 2px; }

.profile-menu .pm-divider { margin: 4px 0; border: 0; border-top: 1px solid #eef2f6; }

.col-menu li.profile .profile-details { border-radius: 8px; }

/* The pointer down onto the card the menu belongs to. Two triangles, one a pixel below the other:
   the lower is the border colour and the upper the panel's white, so the arrow carries the same
   outline as the box it grows out of. Centred on the menu, which is the width of the card.

   The panel has no overflow of its own, so nothing clips them. */
.profile-menu::before,
.profile-menu::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
}

.profile-menu::before {
  bottom: -9px;
  margin-left: -8px;
  border-top: 9px solid #e2e8f0;
}

.profile-menu::after {
  bottom: -8px;
  margin-left: -8px;
  border-top: 9px solid #fff;
}

/* The language row at the top of the menu. Three flags on one line rather than three rows: they
   fit, and stacked they would be as tall as everything under them put together. */
.profile-menu .pm-flags {
  display: flex;
  gap: 4px;
  padding: 2px;
}

.profile-menu .pm-flag {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  padding: 6px 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.profile-menu .pm-flag img {
  width: 22px;
  height: auto;
  display: block;
  border-radius: 2px;
  /* Dimmed until chosen or pointed at, so the one in use is the one the eye lands on - six full
     colour flags in a row is a row with no answer in it. */
  opacity: .45;
  transition: opacity .15s ease;
}

.profile-menu .pm-flag:hover { background: #f1f5f9; }
.profile-menu .pm-flag:hover img { opacity: .85; }

.profile-menu .pm-flag.is-on {
  background: #e8f4ff;
  border-color: #cfe6ff;
  cursor: default;
}
.profile-menu .pm-flag.is-on img { opacity: 1; }

.profile-menu .pm-flag-wait {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 8px 0;
  color: #94a3b8;
}