/*html {*/
/*    position: relative;*/
/*    min-height: 100%;*/
/*}*/
html, body {
  height: 100vh;
}

ul {
  list-style-type: none;
}

/*body {*/
/*  margin-bottom: 60px; !* Margin bottom by footer height *!*/
/*}*/

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px; /* Set the fixed height of the footer here */
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}


#clientlogo {
  width: 200px;
}

.navbar, .footer {
  background: #4f6f8c !important;
}

.page-footer {
  background: #4f6f8c;
}

#banner {
  background: #012e65 !important;
  height: 65px;
}

#welcome {
  color: antiquewhite;
}

.task-opt {
  max-width: 300px !important;
}

.task-opt1 {
  max-width: 100px !important;
}

/* FontAwesome for working BootSnippet :> */

@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
#team {
  background: #eee !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #108d6f;
  border-color: #108d6f;
  box-shadow: none;
  outline: none;
}

.btn-primary {
  color: #fff;
  background-color: #007b5e;
  border-color: #007b5e;
}

section {
  padding: 60px 0;
}

section .section-title {
  text-align: center;
  color: #007b5e;
  margin-bottom: 50px;
  text-transform: uppercase;
}

#team .card {
  border: none;
  background: #ffffff;
}

.image-flip:hover .backside,
.image-flip.hover .backside {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  transform: rotateY(0deg);
  border-radius: .25rem;
}

.image-flip:hover .frontside,
.image-flip.hover .frontside {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.mainflip {
  -webkit-transition: 1s;
  -webkit-transform-style: preserve-3d;
  -ms-transition: 1s;
  -moz-transition: 1s;
  -moz-transform: perspective(1000px);
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transition: 1s;
  transform-style: preserve-3d;
  position: relative;
}

.frontside {
  position: relative;
  -webkit-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  z-index: 2;
  margin-bottom: 30px;
}

.backside {
  position: absolute;
  top: 0;
  left: 0;
  background: white;
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  -webkit-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
  -moz-box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
  box-shadow: 5px 7px 9px -4px rgb(158, 158, 158);
}

.frontside,
.backside {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: 1s;
  -webkit-transform-style: preserve-3d;
  -moz-transition: 1s;
  -moz-transform-style: preserve-3d;
  -o-transition: 1s;
  -o-transform-style: preserve-3d;
  -ms-transition: 1s;
  -ms-transform-style: preserve-3d;
  transition: 1s;
  transform-style: preserve-3d;
}

.frontside .card,
.backside .card {
  min-height: 312px;
}

.backside .card a {
  font-size: 18px;
  /*color: #007b5e !important;*/
  color: red !important;
}

.frontside .card .card-title,
.backside .card .card-title {
  color: #8c2727 !important;
  font-size: 30px;
  font-size: 3.5vw;
}

.backside .card .card-title {
  color: whitesmoke !important;
  font-weight: bolder !important;
  font-size: 24px;
}

.backside .card {
  color: whitesmoke !important;
  background: #012e65;
}

.frontside .card .card-body img {
  width: 120px;
  height: 120px;
  /*border-radius: 50%;*/
}


/*.abc {*/
/*opacity: 0.5 !important;*/
/*}*/


/*test code*/


.mainboard {
  /*background-color: #79aec8;*/
}

.toolbar {
  background-color: #4f6f8c;
  color: whitesmoke;
  height: 500px;
  width: 500px;
}

.formarea {

}

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

#answer-area {
  /*background-color: #4f6f8c;*/
}

#answertableheader {
  display: none;
}

.infopanel {
  background-color: #012e65;
  position: absolute;
  right: 22px;
  width: 101px !important;
}

.my-category {
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100px !important;
}

#categorylist {
  border: 1px solid rebeccapurple;
}


.my-vars {
  display: none;
}

.mainarea {
  margin-top: 150px;
  margin-left: 300px;
}

.mainsidearea {
  margin-top: 150px;
}

#rt_sidebar {
  width: 350px !important;
}

#myChart {
  background-color: #4f6f8c !important;
}

.my-build {
  /*border: 1px dotted red;*/
}

.w-5 {
  width: 5%;
}

.w-10 {
  width: 10%;
}

.w-30 {
  width: 30%;
}

.w-35 {
  width: 35%;
}

.w-40 {
  width: 40%;
}

.w-45 {
  width: 45%;
}

.w-60 {
  width: 60%;
}

.w-65 {
  width: 65%;
}

.w-70 {
  width: 70%;
}

/* this is the right sidebar that contains the information for the
   item selected.*/
/*.sidenav {*/
/*    !*height: 400px; !* Full-height: remove this if you want "auto" height *!*!*/
/*    width: 23%; !* Set the width of the sidebar *!*/
/*    position: absolute; !* Fixed Sidebar (stay in place on scroll) *!*/
/*    z-index: 1; !* Stay on top *!*/
/*    top: 100px; !* Stay at the top *!*/
/*    right: 1px;*/
/*    !*background-color: darkgrey; !* Black *!*!*/
/*    !*overflow: scroll; !* Disable horizontal scroll *!*!*/
/*    !*padding-top: 20px;*!*/
/*    !*padding-bottom: 40px;*!*/
/*}*/

.sidenav {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.case-card {
  height: 80px;
  width: 335px;
  /*border: 1px solid #8c2727;*/
  /*margin-left: 2px;*/
  padding: 5px 12px;
  overflow: hidden;
}


.card-body {
  overflow: scroll;
  max-height: 120px;
  padding: 0.5vw;
}

.card-buttons {
  display: block;
}

.card-buttons a {
  padding: 1px 10px;
  /*display: none;*/
}

#nav_right {
  display: block;
}

.card {
  /*    height: 100% !important; */
  max-height: 300px;
}

.lst-dtl {
  display: block;
}

.btn-sma {
  padding: 0;
}

/*#counter {*/
/*    display: none;*/
/*}*/

.container-login {
  padding: 16px;
  margin: auto;
  width: 400px;
}

.container-login label {
  margin-top: .5rem;
  margin-bottom: 0;
}

.container-login input[type=text], input[type=password], .container-login input[type=email] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.container-login form {
  border: 3px solid #f1f1f1;
}

.container-login button {
  background-color: #012e65;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

.container-login button:hover {
  opacity: 0.8;
}

.container-login .error {
  color: red;
  font-style: italic;
}

.container-login h3 {
  padding: 20px;
}

#id_competency {
  overflow: hidden !important;
  max-width: 300px;
}

.ui-autocomplete {
  position: absolute;
  z-index: 2150000000 !important;
  cursor: default;
  border: 2px solid #ccc;
  padding: 5px 0;
  border-radius: 2px;
}

.authinput {
  border: none !important;
}

#authlist1 li, #authlist2 li {
  list-style-type: none;
}

#nav_right .list-group-item {
  padding: 0.5px;
}

#nav_right .list-group-item:hover {
  background-color: darkblue;
  color: white;
}

div.scroll-me {
  width: 100%;
  height: 360px;
  overflow-y: scroll;
}


.double {
  zoom: 2;
  transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  -o-transform: scale(2);
  -moz-transform: scale(2);
  transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
}


#btn-addauth {
  background-color: #023082b5;
  color: #fff;
}

.sidebar {
  background-color: #e5e9ee !important;
}

.font-weight-bold {
  color: #dc3545;
  font-size: 1rem;
}

#clientlogo {
  width: auto;
  height: 65px;
}

.pagination a {
  color: #023082b5;
}

.custom-control:nth-child(1) {
  padding-left: 0;
}

.sticky-section {
  position: fixed;
  width: 80%;
}

.case-list {
  max-height: 300px;
  margin-bottom: 5px;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);
}

.scrolling-box {
  display: block;
  height: 65vh;
  overflow-y: scroll;
  overflow-x: hidden;
}

#case-detail.scrolling-box {
  height: 75vh;
}

#response-stats-scenario.scrolling-box {
  height: 10vh;
}

#inline-edit-case.scrolling-box {
  height: calc(100vh - 320px);
}

@media screen and (min-height: 900px) {
  .scrolling-box {
    height: 75vh;
  }

  div.scroll-me {
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }
}

/*Overrides*/
.nav-link {
  text-transform: uppercase;
}

.sidebar-heading {
  font-size: .875rem !important;
  /*border: 1px solid black ;*/
  /*padding: 4px 22px 4px 8px;*/
  /*background-color: #012e65;*/
  color: #023c82b5;
  /*border-radius: 5px;*/
  font-weight: bold;
}

.sidebar .nav-link.active {
  color: #fff !important;
  background-color: #788495 !important;
}

.edit-case {
  background-color: #023082b5;
  border-color: #023082b5;
}

.btn-primary:hover, .btn-primary:focus {
  background-color: #f5bb3e;
  border-color: #f5bb3e;
}

.cc-btn-primary {
  background-color: #788495cc;
  border-color: #788495;
  color: #fff;

}

.feather {
  width: 25px !important;
  height: 25px !important;
}

.cc-btn-create {
  background-color: #337ab7;
  border-color: #337ab7;
  color: #fff;
}

.author-list-item {
  border: 1px solid #788495;
  border-radius: 5px;
  margin-bottom: 3px;
  padding: 3px;
}

.authors {
  border: none;
}

#auth-sect {
  height: 125px;
}

/*create-exam screen card flip*/
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
/*.flip-card {*/
/*    background-color: transparent;*/
/*    width: 100%;*/
/*    height: 200px;*/
/*    !*border: 1px solid #f1f1f1;*!*/
/*    perspective: 1000px; !* Remove this if you don't want the 3D effect *!*/
/*}*/

/*!* This container is needed to position the front and back side *!*/
/*.flip-card-inner {*/
/*    position: relative;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    transition: transform 0.8s;*/
/*    transform-style: preserve-3d;*/
/*}*/

/*!* Do an horizontal flip when you move the mouse over the flip box container *!*/
/*.flip-card:hover .flip-card-inner {*/
/*    transform: rotateY(180deg);*/
/*}*/

/*!* Position the front and back side *!*/
/*.flip-card-front, .flip-card-back {*/
/*    position: absolute;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    -webkit-backface-visibility: hidden; !* Safari *!*/
/*    backface-visibility: hidden;*/
/*}*/

/*!* Style the front side (fallback if image is missing) *!*/
/*.flip-card-front {*/
/*    !*background-color: #bbb;*!*/
/*    !*color: black;*!*/
/*}*/

/*!* Style the back side *!*/
/*.flip-card-back {*/
/*    background-color: white;*/
/*    !*color: white;*!*/
/*    transform: rotateY(180deg);*/
/*}*/


#search-text {
  border: 1px solid #788495;
  border-radius: 5px;
}

#tags > .list-group-item, #priority-area > .list-group-item {
  margin-right: 5px;
  margin-bottom: 2px;
  padding: 2px;
  cursor: pointer;
}

/*custom widths*/

/*custom overrides*/
.form-group {
  margin-bottom: 0;
}

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

.align-left {
  text-align: left;
}

.hide-rationale {
  display: none;
}

/*red asterisks for required fields*/
.col-form-label {
  font-weight: bold;
  font-size: 1.1rem;
}

label#img-label input[type="file"] {
  display: none !important;
}


.img-wrap {
  position: relative;
  display: inline-block;
  font-size: 0;
}

.img-wrap .cc-close {
  position: absolute;
  top: 4px;
  right: 2px;
  z-index: 100;
  background-color: transparent;
  /*padding: 5px 2px 2px;*/
  padding-bottom: 2px;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  opacity: .2;
  /*text-align: center;*/
  font-size: 22px;
  line-height: 22px;
  border-radius: 35%;
}

.img-wrap:hover .cc-close {
  opacity: 1;
}

.not-included input[type="text"] {
  background-color: #eee;
  color: #aaa;
}

.row-selected {
  background: #788495cc;
}

.avail-quest-rows {
  width: 80%;
}

.ui-state-default {
  cursor: move;
  background: none;
  border: none;
}

.sortable-icons > svg {
  padding-top: 7px;
}

#answer-table {
  overflow: auto;
}

#case-detail::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

#case-detail::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

.table-row {
  cursor: pointer;
}

div.dataTables_wrapper div.dataTables_paginate ul.pagination {
  justify-content: flex-start;
  margin-bottom: 5px;
}

.dtsp-title {
  display: none;
}

#dtsp > div > div.dtsp-titleRow > .btn {
  font-size: 0.6rem;
  padding: 5px;
  margin-bottom: -15px;
}

div.dtsp-searchPane div.dataTables_scrollBody {
  height: 150px !important;
}

.dth {
  padding: 5px;

}

#dtsp div.dtsp-searchPanes {
  margin-bottom: -10px;
}


#case-list_filter {
  text-align: right;
}

#case-list_paginate .page-link {
  line-height: 0.8;
  padding: .4rem .6rem;
}

#case-list-detail #case-detail-scrolling-box {
  height: calc(100vh - 350px);
  overflow: auto;
}

#case-detail-pane #case-detail-scrolling-box {
  height: calc(100vh - 450px);
  overflow: auto;
}

#case-detail-pane.full-screen-on #case-detail-scrolling-box{
  height: calc(100vh - 295px);
  overflow: auto;
}


#badgecounter:hover {
  cursor: pointer;
}

/*FAB button to add new Case or Exam*/
.fab-container {
  position: fixed;
  bottom: 50px;
  right: 50px;
  z-index: 999;
  cursor: pointer;
}

.fab-icon-holder {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: #016fb9;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.fab-icon-holder:hover {
  opacity: 0.8;
}

.fab-icon-holder i {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 25px;
  color: #ffffff;
}

.fab {
  width: 60px;
  height: 60px;
  background: #d23f31;
}

.fab-options {
  list-style-type: none;
  margin: 0;
  position: absolute;
  bottom: 70px;
  right: 0;
  opacity: 0;
  transition: all 0.3s ease;
  transform: scale(0);
  transform-origin: 85% bottom;
}

.action-fab-options {
  list-style-type: none;
  margin: 0;
  position: absolute;
  bottom: 70px;
  right: 0;
  opacity: 0;
  transition: all 0.3s ease;
  transform: scale(0);
  transform-origin: 85% bottom;
}

.fab:hover + .fab-options,
.fab-options:hover {
  opacity: 1;
  transform: scale(1);
}

.fab-options li {
  display: flex;
  justify-content: flex-end;
  padding: 5px;
}

.fab-label {
  padding: 2px 5px;
  align-self: center;
  user-select: none;
  white-space: nowrap;
  border-radius: 3px;
  font-size: 16px;
  background: #666666;
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  margin-right: 10px;
}

#case-detail-scenario-text {
  white-space: pre-wrap;
}

div.dtsp-verticalContainer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
}

div.dtsp-verticalContainer div.dtsp-verticalPanes,
div.dtsp-verticalContainer div.container {
  width: 30%;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 0;
}

div.dtsp-verticalContainer div.dtsp-verticalPanes {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 26%;
}

div.dtsp-verticalPanes {
  margin-right: 20px;
}

div.dtsp-title {
  margin-right: 0px !important;
  margin-top: 13px !important;
}

input.dtsp-search {
  min-width: 0px !important;
  padding-left: 0px !important;
  margin: 0px !important;
}

div.dtsp-verticalContainer div.dtsp-verticalPanes div.dtsp-searchPanes {
  flex-direction: column;
  flex-basis: 0px;
}

div.dtsp-verticalContainer div.dtsp-verticalPanes div.dtsp-searchPanes div.dtsp-searchPane {
  flex-basis: 0px;
}

div.dtsp-verticalContainer div.container {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 60%;
}

div.dtsp-panesContainer {
  /*border: 1px solid #ccc;*/
  border-radius: 6px;
  padding: 5px;
}

/*Alert Message*/
#cc-alert-message {
  display: block;
  position: sticky;
  width: 50%;
  top: 175px;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}

.cc-alert-message {
  opacity: 0;
}

.show-alert-message {
  opacity: 1;
  transition: all ease-in 500ms;
  z-index: 1000 !important;
}

.hide-alert-message {
  opacity: 0;
  transition: all ease-in 500ms;
  z-index: -1 !important;
}

.htmx-indicator {
  opacity: 0;
  transition: opacity 500ms ease-in;
}

.htmx-request .htmx-indicator {
  opacity: 1
}

.htmx-request.htmx-indicator {
  opacity: 1
}

/*bootstrap override of the modal-dialog*/
.modal-dialog {
  max-width: 80%;
}

.modal-header {
  display: block;
}

.cc-label {
  font-weight: bold;
  color: red;
}


.opacity-0 {
  opacity: 0 !important;
}

.opacity-1 {
  opacity: 0.2 !important;
}

.opacity-2 {
  opacity: 0.4 !important;
}

.opacity-3 {
  opacity: 0.6 !important;
}

.opacity-4 {
  opacity: .8 !important;
}

.opacity-5 {
  opacity: 1 !important;
}


.step-not-complete:hover {
  opacity: 1 !important;
}

.cc-flex {
  flex: 1;
}

.progress-bar {

}

.cc-workflow-select-cases, .cc-workflow-prepare {
  background-color: #dc3545;
}

.cc-workflow-template-complete, .cc-workflow-in-progress {
  background-color: #ffc107;
}

.cc-workflow-administration-flow, .cc-workflow-processing {
  background-color: #007bff;
}

.cc-workflow-validation {
  background-color: #6610f2;
}

.cc-workflow-reporting {
  background-color: #17a2b8;
}

.cc-workflow-complete {
  background-color: #28a745;
}

.cc-workflow-cancelled {
  background-color: #6c757d;
}

.step-not-complete {
  background-color: #d4d4d4;
  border: 1px solid white;
  border-top: 3px solid white;
  border-bottom: 3px solid white;
  transition: opacity .25s ease-in-out !important;
  -moz-transition: opacity .25s ease-in-out !important;
  -webkit-transition: opacity .25s ease-in-out !important;

}

table.dataTable td.dt-control:before {
  background: #016fb9;
}

#cc-exam-header {
  /*position: fixed;*/
  /*width: 80%;*/
  background: white;
  z-index: 100;
  top: 4em;
  /*padding-top: 1em;*/
}

div.dataTables_wrapper div.dataTables_filter {
  text-align: left;
}

#datatables-container {
  /*margin-top: 3em;*/
}

#cc-exam-stats .card-text, #cc-exam-stats .card-title {
  text-align: center;
  font-size: 16px;
  font-size: 1vw;
}


#cc-exam-stats .card {
  min-width: 6em;
  max-width: 10em;
  background-color: #e9e9e9;
  box-shadow: 5px 5px 5px #ccc;
}

#cc-exam-stats .card-text {
  font-size: 1.5em;
  font-weight: bold;
}


span.published {
  background: #28a745;
  color: white;
}

span.archived {
  background: #6c757d;
  color: white;
}

span.draft {
  background: #ffc107;
}

span.needs-attention {
  background: #dc3545;
  color: white;
}

div.published {
  border-left: 6px solid #28a745;
}

div.archived {
  border-left: 6px solid #6c757d;
}

div.draft {
  border-left: 6px solid #ffc107;
}

div.flagged {
  border-left: 6px solid #dc3545;
}

/*edit response*/
/*.response-order {*/
/*  width: 2em;*/
/*  border: 0;*/
/*  padding: 0;*/
/*}*/

/*.response-text {*/
/*  min-width: 300px;*/
/*  border: 0;*/
/*  padding: 0;*/
/*}*/

/*.question-text {*/
/*  width: 100%;*/
/*  border: 0;*/
/*  padding: 0;*/
/*}*/

input.cc-check-disabled {
  pointer-events: none;
}

/*Tooltip CSS for Administration tab to show help text*/
.administrationtooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.administrationtooltiptext {
  visibility: hidden;
  /*width: 120px;*/
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the administrationtooltip text - see examples below! */
  top: -5px;
  left: 105%;
  z-index: 1;
}

/* Show the administrationtooltip text when you mouse over the administrationtooltip container */
.btn-tooltip:hover ~ .administrationtooltiptext {
  visibility: visible;
}

/* Delete participant*/
.delete-participant:hover {
  cursor: pointer;
}

#modal-report {
  height: calc(100vh - 260px);
  overflow-y: scroll !important;
}

#modal-wrapper {
  max-height: calc(100vh - 260px);
}

button.dtsp-showAll, button.dtsp-collapseAll, button.dtsp-clearAll {
    display: none;
}

.progress {
  height: 35px;
}


/*test*/
#overview-chart-data-section {
  height: 450px;
}

#workflow-list-group-container {
  width: 50%;
}

#template-iframe {
  height: calc(100vh - 310px);
  width: 100%;
}

.stats-cards .card {
  max-width: 180px;
  border-color: #012e65;
  background-color: #CCCCCC;
}

.stats-cards .card-body {
  background-color: white;
}

.stats-cards .card-text {
  font-size: larger;
  font-weight: 800;
}

.stats-cards .score-zone-green {
  background-color: #28a745;
  color: white;
}

.stats-cards .score-zone-yellow {
  background-color: #ffc107;
  color: black;
}

.stats-cards .score-zone-red {
  background-color: #dc3545;
  color: white;
}