@import url(https://use.fontawesome.com/releases/v5.0.6/css/all.css);@charset "UTF-8";

/* cyrillic-ext */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Ubuntu Medium'), local('Ubuntu-Medium'), url(https://fonts.gstatic.com/s/ubuntu/v14/4iCv6KVjbNBYlgoCjC3jvWyNL4U.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Ubuntu Medium'), local('Ubuntu-Medium'), url(https://fonts.gstatic.com/s/ubuntu/v14/4iCv6KVjbNBYlgoCjC3jtGyNL4U.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Ubuntu Medium'), local('Ubuntu-Medium'), url(https://fonts.gstatic.com/s/ubuntu/v14/4iCv6KVjbNBYlgoCjC3jvGyNL4U.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Ubuntu Medium'), local('Ubuntu-Medium'), url(https://fonts.gstatic.com/s/ubuntu/v14/4iCv6KVjbNBYlgoCjC3js2yNL4U.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Ubuntu Medium'), local('Ubuntu-Medium'), url(https://fonts.gstatic.com/s/ubuntu/v14/4iCv6KVjbNBYlgoCjC3jvmyNL4U.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local('Ubuntu Medium'), local('Ubuntu-Medium'), url(https://fonts.gstatic.com/s/ubuntu/v14/4iCv6KVjbNBYlgoCjC3jsGyN.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*$body-bg: #f5f8fa;*/

/*$body-bg: #f5f8fa;*/

/*-----------------------------------------------------------------------------------
                     Cresent Custom CSS as of 25-01-2019
------------------------------------------------------------------------------------*/

table {
  width: 100%;
  margin: 20px auto;
  word-wrap: break-word;
  /*table-layout: fixed;*/
}

.cell-width-control {
  width:150px;
}

/* Override ol text colour that was dark black and not matching with <p> text */
ol {
  color:#888888;
}

ol li {
  margin:0 0 1em 0;
}

.list-group-item-action:hover{
  color:#ffffff;
  background-color: rgb(252,176,53);
}

.list-group-item.active{
  color:#ffffff;
  background-color: rgb(252,176,53);
  border-color: rgb(252,176,53);
}

.list-group-item-action:hover p,
.list-group-item.active p{
  color: #fff;
}

.upload-img img { /* BG color so logos with white parts can be seen */
  background-color: #ebebeb;
  max-width:100%;
}

.btn-reset {

  float:right;
  margin:0;
  padding:0;
  cursor:pointer;
  color:#fff;
  opacity: 1;
  font-weight: 500;
  font-size:1.5rem;
  background-color: transparent;
  border:0;
  -webkit-appearance:none;
  line-height:1;
}

button.csv,
.bs-btn-manual {
  cursor:pointer;
  display:inline-block;
  font-weight:400;
  text-align:center;
  white-space:nowrap;
  vertical-align:middle;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  border:1px solid transparent;
  padding:.375rem .75rem;
  font-size:1rem;
  line-height:1.5;
  border-radius:.25rem;
  transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  background-color: #72C7AF;
  color:#fff;
  font-family: inherit;
  -webkit-appearance:button;
  touch-action: manipulation;
}

button.csv:hover,
.bs-btn-manual {
  background-color: #5ea38f;
  color: #1b1e21;
}

.close:hover {
  color:#fff;
  opacity: 1;
}

.popover,
.popover-title {
  font-size: inherit;
  border-radius: 0;
  border:none;
}

.popover-title,
.popover-content,
.popover-navigation {
  padding:1rem;
}

.popover,
.popover-navigation,
.popover-content {
  background-color: #393A3E;
  color:#ffffff;
}

.popover-title {
  color:#fff;
  background-color: rgb(252,176,53);
}

.popover.top>.arrow,
.popover.left>.arrow,
.popover.right>.arrow,
.popover.bottom>.arrow{
  left:-16px;
}

.popover.left > .arrow.my-account-dd {
  right:-16px;
  left:auto;
}

#welcome-admin,
#welcome-user {
  height:0;
  min-height:0;
  opacity: 0;
}

.tour-backdrop {
  opacity: .6;
  filter: alpha(opacity=60);
}

.popover .btn[data-role="next"] {
  margin-left:6px;
}

.popover.top>.arrow:after {
  border-top-color:#393A3E;
}

.popover.right>.arrow:after {
  border-right-color:#393A3E;
}

.popover.bottom>.arrow:after {
  border-bottom-color:#393A3E;
}

.popover.left>.arrow:after {
  border-left-color:#393A3E;
}

.popover.left >.arrow,
.popover.right >.arrow {
    border-width:0px;
}

#tourCustomNext,
#onDemandCustomNext {
  margin-left:6px;
}

/*.popover>.arrow:after {
    border-style:none;
}*/

.badge {
  font-size: inherit;
}

table.dataTable thead th.hideFilters.sorting {
  pointer-events: none;
}

table.dataTable thead th.hideFilters.sorting:before,
table.dataTable thead th.hideFilters.sorting:after {
  display:none;
  content:"";
}

/*thead th#hideFilters:before {
  display:none;
  content:"";
}*/

.row.extra-pad {
  padding-left:15px;
  padding-right:15px;
}

.row.full-height {
  height:100%;
}

#notificationContent .card {
  height:100%;
}

@-webkit-keyframes rotation {
from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}

@-webkit-keyframes rotation2 {
  from {
    opacity: 0;
    -webkit-transform: rotate(0deg);
  }
  to {
    opacity: 1;
    -webkit-transform: rotate(359deg);
  }
}

@-webkit-keyframes delayText {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

#fullBtn {

  float:right;
}

/*.mdlBtn svg,
.mdlBtn img {
  height:24px;
  margin:auto;
}*/

.content {
  width:100%;
}
.responsive-cell{
  display:none;
}
.Rtable {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 3em 0;
  padding: 0;
  width:100% !important;
}
.Rtable-cell {
  box-sizing: border-box;
  flex-grow: 1;
  padding: 0.8em 1.2em;
  overflow: hidden;
  list-style: none;
  background-color: #F2F2F2;
}

.Rtable-cell.row-cell:hover {
  cursor:pointer;
}

.header-cell {
  font-weight: 600;
  background-color: rgb(1,50,61);
  color: #fff;
}

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

/*.course-dropdown p {
    color: #004E58;
}*/

/* Table column sizing
================================== */
.Rtable--2cols > .Rtable-cell  { width: 50%; }
.Rtable--3cols > .Rtable-cell  { width: 33.33%; }
.Rtable--4cols > .Rtable-cell  { width: 25%; }
.Rtable--5cols > .Rtable-cell  { width: 20%; }
.Rtable--6cols > .Rtable-cell  { width: 16.6%; }
.Rtable--7cols > .Rtable-cell  { width: 14.2%; }
.Rtable--8cols > .Rtable-cell  { width: 12.2%; }

/*@media all and (max-width: 1200px) {
  .Rtable-hide {
    display:none;
  }

  .Rtable--8cols > .Rtable-cell  {
    width: 14%;
  }
}*/

@media all and (max-width: 1150px) {
  .Rtable-hide-md {
    display:none;
  }
  .Rtable--8cols > .Rtable-cell  {
    width: 20%;
  }
}

@media all and (max-width: 700px) {
  .Rtable-hide-sm {
    display:none;
  }

  .Rtable-center-sm {
    text-align: center !important;
  }

  .Rtable--8cols > .Rtable-cell  {
    width: 33.3%;
  }
}

@media all and (max-width: 470px) {
  .Rtable-hide-xs {
    display:none;
  }

  .Rtable--8cols > .Rtable-cell  {
    width: 50%;
  }
}
/*@media all and (max-width: 992px) {
  .Rtable--collapse {
    display: block;
    overflow:hidden;
  }
  .header-cell {
    display:none;
  }
  .responsive-cell{
    display:inline-block;
  }
  .course-name-cell {
    font-weight: 600;
    background-color: #72C7AF;
    color: #fff;
  }
  .Rtable--collapse > .Rtable-cell {
    width: 100% !important;
    position:relative;
  }
  .Rtable--collapse > .Rtable-cell--foot {
    margin-bottom: 1em;
  }
  .launch-restart {
    text-align: left;
  }
}*/

div.dt-buttons{
  float:left;
  padding: .75rem 1.25rem;
}

table.dataTable{
  margin-top: 20px !important;
  margin-bottom: 20px !important;

}
.dataTables_filter{
  padding: .75rem 1.25rem;
  margin-bottom: 0;
  background-color: rgba(0,0,0,.03);
  border-bottom: 1px solid rgba(0,0,0,.125);
  border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
}

.dt-button{
  padding: .25rem .5rem;
  font-size: .875rem;
  line-height: 1.5;
  border-radius: .2rem;
  background-color: rgb(252,176,53);
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  line-height: 1.5;
  border-radius: .25rem;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.button-page-length{
  margin: 0.3em;
  width: 7em;
}

.buttons-columnVisibility{
  margin: 0.3em;
  width: 12em;
  background-color:#aaddcf !important;
}
.buttons-columnVisibility.active{
  background-color:#72C7AF !important;
}



div.dt-button-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2001;
}

div.dt-button-collection {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  margin-top: 3px;
  padding: 8px 8px 4px 8px;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.4);
  background-color: white;
  overflow: hidden;
  z-index: 2002;
  border-radius: 5px;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
  -webkit-column-gap: 8px;
  -moz-column-gap: 8px;
  -ms-column-gap: 8px;
  -o-column-gap: 8px;
  column-gap: 8px;
}

.alert.logged-in-as {
  /*margin-bottom:2em;*/
  padding:0.5rem 1rem;
}

.navbar-brand {
  margin-right:0;
}

.modal.static {
  position:relative;
}

@-webkit-keyframes rotate-infinite {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100%  {
    -webkit-transform: rotate(360deg);
  }
}

.loading-spinner {
  -webkit-animation: rotate-infinite .8s linear infinite;
  border: 8px solid rgb(252,176,53);
  border-right-color: transparent;
  border-radius: 50%;
  display: none;
  height: 40px;
  width: 40px;
}

#faq-tab-content img {
  max-width:100%;
  margin-bottom:2em;
}

.row.equal-height > [class*='col-'] {
  flex-direction: column;
}

.row.equal-height .card {
  height:100%;
}

.readNotification {
  width:100%;
  max-width:100%;
}

.popover.tour.admin .arrow {
  display:none;
}

.custom-dash{
  width:15px;
}

#sidebar.active ul li a .custom-dash {
  width:25px;
}

.custom-enroll{

  width:23px;
  margin-left: -2px;
}

#sidebar.active ul li a .custom-enroll {
  width:40px;
}

 progress, progress[role] {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   border: none;
   background-size: auto;
   height:10px;
   width: 100%;
 }

::-webkit-progress-bar{
  background: #DEDEDE;
}

::-webkit-progress-value {
  background: #47737A;
}

::-moz-progress-bar {
  background: #47737A;
}

.multi-module{
/*  min-height:800px;*/
/*  background-image: url('/img/mist/BG.png');*/
  background-repeat: no-repeat;
  background-size:cover;
  background-position:center;
}

.profile-picture {
  border-radius: 100%;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  overflow: hidden;
}

.profile-picture-lg {
  width: 60px;
  height: 60px;
  margin: 0 auto 0.5em auto;
}

.profile-picture-sm {
  width: 25px;
  height: 25px;
  margin: 0 auto;
}

.profile-picture img,
.profile-name svg:not(:root).svg-inline--fa {
  width: 100%;
  height:auto;
}

/*-----------------------------------------------------------------------------------
                              Sidebar Style
------------------------------------------------------------------------------------*/

.wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

/*#sidebar{
  float:left;
}*/

.align-logo {
  margin-top: -10px;
}

.sidebar-logo {
  height: 40px;
  width: 40px;
  margin-top: -10px;
  float:right;
  max-width: 100px;
}

.logo-text {
  width:115px;
  height:40px;
  margin:10px 0 10px 0;
  float:left;
}

@media (max-width: 767px) {
  .sidebar-logo-sm {
    max-height: 40px;
    max-width: 40px;
    -webkit-transition: -webkit-transform 1s;
    transition: transform 1s;

  }
}

@media (min-width: 768px) {
  .sidebar-logo-sm {
    max-height: 40px;
    -webkit-transition: -webkit-transform 1s;
    transition: transform 1s;
    padding-bottom: 2px;
  }
}



.sidebar-logo-sm.animate-c-clockwise {
  -webkit-transform: rotate(-360deg);
  transform: rotate(-360deg);
}

.sidebar-logo-sm.animate-clockwise {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}

.sidebar-logo-sm.animate-return {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

#logoIcon{
    opacity:0;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}

#logoIconROND{
  opacity:0;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}


@media (max-width: 767px) {
  #sidebar.active {
    min-width: 50px;
    max-width: 50px;
  }
}

@media (min-width: 768px) {
  #sidebar.active {
    min-width: 80px;
    max-width: 80px;
  }
}

#sidebar.active ul.components {
  padding: 0 0;
}

#sidebar.active ul li a {
  padding: 20px 5px;
  text-align: center;
  font-size: 0.85em;
}

#sidebar.active ul li a span {
  display: none;
}

#sidebar.active ul li a .dash-icon {
  margin: auto;
  display: block;
  font-size: 2.1em;
  margin-bottom: 5px;
}

#sidebar.active ul ul a {
  padding: 10px !important;
}

/*#sidebar.active .sidebar-header {
  background-color: transparent;
  padding-bottom: 0;
  height: 60px;
}*/

#sidebar .sidebar-header .expand-btn {
  font-size: 1.3em;
  float: right;
  margin-right: 0px;
  padding:0;
  width:18px;
  height:100%;
  /*margin-left: -20px;*/
}

#sidebar.active .sidebar-header .expand-btn {
  font-size: 1.3em;
  float: right;
  margin-right: 0px;
  padding:0;
  width:18px;
  /*margin-left: -20px;*/
}

#sidebar.active .sidebar-header .btn {
  border-radius: 0px 0px;
  /*width: 80px;*/
}

#sidebar.active .sidebar-header strong {
  display: block;
}

#sidebar.active a[aria-expanded="false"]::before,
#sidebar.active #sidebar.active a[aria-expanded="true"]::before {
  top: auto;
  bottom: 5px;
  right: 50%;
  -webkit-transform: translateX(50%);
  transform: translateX(50%);
}

@media (max-width: 768px) {
  #sidebar.active a[aria-expanded="false"]::before,
  #sidebar.active #sidebar.active a[aria-expanded="true"]::before {
    top: auto;
    bottom: 5px;
    right: 50%;
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
  }
}

@media (max-width: 768px) {
  #sidebar.active {
    margin-left: 0 !important;
  }
}

#sidebar {
  min-width: 210px;
  max-width: 250px;
  background: #393A3E;
  color: #fff;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

#sidebar ul.components {
  padding: 20px 0;
}

#sidebar ul li a {
  text-align: left;
  padding: 15px;
  font-size: 15px;
  display: block;
}

#sidebar ul li a:hover,
#sidebar ul li a:focus {
  color: #fff;
  background: #212123;
  border-left: 3.2px solid rgb(252,176,53);
  opacity: 1;
}

#sidebar ul li a span {
  margin-left: 7px;
}

#sidebar ul li a i {
  margin-right: 10px;
}

#sidebar ul li.active {
  color: #fff;
  background: #343538;
  border-left: 3px solid rgb(252,176,53);
}

#sidebar .sidebar-header {
  /*padding: 20px;*/
  background: #262525;
  height: 60px;
}

#sidebar .sidebar-header .btn {
  /*padding: 0.3em 0.4em;*/
  border-radius: 0 0;
}

#sidebar .sidebar-header .expand-btn {
  font-size: 1.3em;
  float: right;

}

#sidebar .sidebar-header .expand-btn:hover,
#sidebar .sidebar-header .expand-btn:focus {
  background: #777676;
}

#sidebar .sidebar-header strong {
  display: none;
  font-size: 1.8em;
}

/*@media (max-width: 768px) {

  #sidebar .sidebar-header strong {
    display: block;
  }

  #sidebar ul li a {
    padding: 20px 10px;
  }

  #sidebar ul li a i {
    margin-right: 0;
    display: block;
  }

  #sidebar ul ul a {
    padding: 10px !important;
  }

  #sidebar ul li a i {
    font-size: 1.3em;
  }
}*/

#sidebarCollapse > button {
  background: none;
  color: inherit;
  border: none;
  cursor: pointer;
  height:100%;
  padding:0;
}

@media (max-width: 767px) {

  #sidebarCollapse {
    display: none;
  }
  #sidebarCollapse span {
    display: none;
  }
}

i span {
  display: inline-block;
}

.bottomLogo {
  position: fixed;
  bottom: 0;
  list-style: none;
  text-align: left;
  padding: 0px;
  margin-left: 15px;
}
@media (min-width: 992px) {
  .full-height-menu {
    min-height: 93vh;
  }
}

/*-----------------------------------------------------------------------------
                             Top Nav Bar
------------------------------------------------------------------------------*/

.top-navbar {
  padding: 0px 0px;
  height: 60px;
}

.top-navbar .white {
  color: #fff;
}

.menu-top-option a {
  padding: 19px 14px;
  font-size: 15px;
}

.menu-top-option a:hover,
.menu-top-option a:focus {
  background: #212123;
  color: #fff;
  border-left: none;
}

@media (max-width: 992px) {
  /*.menu-top-option > .dropdown-menu {
    position: static;
    float: none;
  }*/
}

.top-selector,
.company-selector {
  left: auto;
  border-radius: 0px 0px;
  margin: 0px 0px;
  right: 0;
  background-color: #393A3E;
}

.panel-login .top-selector {
  left:0;
}

.top-selector a,
.company-selector a {
  padding: 15px;
  color: #fff;
}

.top-selector {
  width: 305px;
}

.top-selector p {
  color: #fff;
}

@media (max-width: 992px) {
  /*.top-selector {
    width: 100%;
  }*/
}

.company-selector {
  width: 315px;
}

.expand-btn2 {
  display: none;
}

.logo-top {
  width: 7.5em;
  height: 2.3em;
  margin-top: -10px;
  padding-left: 2px;
  padding-top: 2px;
}

.top-icons {
  font-size: 1.2em;
}

p.header {
  font-size: large;
}

.navbar {
  background: #fff;
  border: none;
  border-radius: 0;
  margin-bottom: 16px;
  -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
          box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  height:60px;
}

.navbar-btn {
  -webkit-box-shadow: none;
          box-shadow: none;
  outline: none !important;
  border: none;
}

.navbar-right a {
  color: #000;
}

/*---------- Notifications  Option -----------*/

.btn .badge {
  top: -11px;
}

.notifications a {
  padding: 19px 3px 19px 16px;
}

.notifications a:hover {
  background: #212123;
  color: #fff;
  border-left: none;
}

@media (max-width: 992px) {
  /*.notifications > .dropdown-menu {
    position: static;
    float: none;
  }*/
}

.badge-notify {
  background: #e82525;
  color: #fff;
  position: relative;
  top: -14px;
  left: -6px;
  font-size: 72%;
}

.sender-name {
  font-weight: bold;
}

.messages p {
  font-size: 13px;
  margin-bottom: 6px;
}

p.timestamp {
  font-size: small;
  font-style: italic;
  line-height: 0;
}

.justify-content-center {
  margin: auto;
}

.profile-name p span {
  font-size: 13px;
}

/* -------------Snackbar---------- */

#delete-preview,
#snackbar-delete,
#snackbar-saved-in-form1,
#snackbar-saved-in-form2,
#snackbar-saved-in-form3,
#snackbar-saved-in-form4,
#snackbar-saved,
#snackbar-saved-lg {
  visibility: hidden;
  background-color: #333;
  color: #fff;
  border-radius: 2px;
  padding: 16px;
  position: absolute;
  text-align: center;
  font-size: 17px;
}

#delete-preview,
#snackbar-delete {
  min-width: 250px;
  margin-left: -125px;
  z-index: 1051;
  left: 50%;
  top: 20%;
}

/*#snackbar-saved-in-form1, #snackbar-saved-in-form2, #snackbar-saved-in-form3 {
  @extend %snackbar-content;
  z-index: 5;
  position: absolute;
  width: 100%;
  margin-top: -20px;
  margin-left:-20px;
}*/

#snackbar-saved-in-form1 {
  z-index: 5;
  position: absolute;
  width: 100%;
  margin-top: -20px;
  margin-left: -20px;
}

#snackbar-saved-in-form2 {
  z-index: 5;
  position: absolute;
  width: 100%;
  margin-top: -20px;
  margin-left: -20px;
}

#snackbar-saved-in-form3 {
  z-index: 5;
  position: absolute;
  width: 100%;
  margin-top: -20px;
  margin-left: -20px;
}

#snackbar-saved-in-form4 {
  z-index: 5;
  position: absolute;
  width: 100%;
  margin-top: -20px;
  margin-left: -20px;
}

#snackbar-saved {
  min-width: 501px;
  z-index: 1051;
  left: 50%;
  bottom: auto;
  top: 70px;
  right: auto;
  margin-left: -259px;
}

#snackbar-saved-lg {
  min-width: 932px;
  z-index: 1051;
  left: 50%;
  bottom: auto;
  top: 70px;
  right: auto;
  margin-left: -440px;
}

#snackbar-saved.show,
#snackbar-delete.show,
#snackbar-saved-lg.show,
#snackbar-saved-in-form1.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

#snackbar-saved.show,
#snackbar-delete.show,
#snackbar-saved-lg.show,
#snackbar-saved-in-form2.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

#snackbar-saved.show,
#snackbar-delete.show,
#snackbar-saved-lg.show,
#snackbar-saved-in-form3.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

#snackbar-saved.show,
#snackbar-delete.show,
#snackbar-saved-lg.show,
#snackbar-saved-in-form4.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

#delete-preview.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s;
  animation: fadein 0.5s;
}

@-webkit-keyframes fadein {
  from {
    top: 30px;
    opacity: 0;
  }

  to {
    top: 70px;
    opacity: 1;
  }
}

@keyframes fadein {
  from {
    top: 30px;
    opacity: 0;
  }

  to {
    top: 70px;
    opacity: 1;
  }
}

@-webkit-keyframes fadeout {
  from {
    top: 70px;
    opacity: 1;
  }

  to {
    top: 30px;
    opacity: 0;
  }
}

@keyframes fadeout {
  from {
    top: 70px;
    opacity: 1;
  }

  to {
    top: 30px;
    opacity: 0;
  }
}

/*----------Inside Forms--------*/

@-webkit-keyframes fadein-in {
  from {
    top: 0px;
    opacity: 0;
  }

  to {
    top: 55px;
    opacity: 1;
  }
}

@keyframes fadein-in {
  from {
    top: 0px;
    opacity: 0;
  }

  to {
    top: 55px;
    opacity: 1;
  }
}

@-webkit-keyframes fadeout-in {
  from {
    top: 55px;
    opacity: 1;
  }

  to {
    top: 0;
    opacity: 0;
  }
}

@keyframes fadeout-in {
  from {
    top: 55px;
    opacity: 1;
  }

  to {
    top: 0;
    opacity: 0;
  }
}

.fade-enter-active,
.fade-leave-active {
  -webkit-transition: opacity .5s;
  transition: opacity .5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

#loader-wrapper {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.71);
  z-index: 1000;
}

#loader {
  z-index: 1001;
  /* anything higher than z-index: 1000 of .loader-section */
  position: absolute;
  border-radius: 50%;
  border: 3px solid transparent;
  top: 45%;
  left: 50%;
  right: 0;
  border: 5px solid transparent;
  /* Light grey */
  border-top: 5px solid #72C7AF;
  border-bottom: 5px solid #72C7AF;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
          animation: spin 2s linear infinite;
}

#loader:before {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 3px solid transparent;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-top-color: #B9DCE1;
  -webkit-animation: spin 3s linear infinite;
  /* Chrome, Opera 15+, Safari 5+ */
  animation: spin 3s linear infinite;
  /* Chrome, Firefox 16+, IE 10+, Opera */
}

#loader:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 3px solid transparent;
  top: 15px;
  left: 15px;
  right: 15px;
  border-top-color: #C3DD88;
  -webkit-animation: spin 1.5s linear infinite;
  /* Chrome, Opera 15+, Safari 5+ */
  animation: spin 1.5s linear infinite;
  /* Chrome, Firefox 16+, IE 10+, Opera */
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

.loaded #loader {
  opacity: 0;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.loaded #loader-wrapper {
  visibility: hidden;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition: all 0.3s 0.6s ease-out;
  transition: all 0.3s 0.6s ease-out;
}

/* FAQ*/

.faq-nav {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin: 0 0 32px;
  border-radius: 2px;
  border: 1px solid #ddd;
  -webkit-box-shadow: 0 1px 5px rgba(85, 85, 85, 0.15);
          box-shadow: 0 1px 5px rgba(85, 85, 85, 0.15);
}

.faq-nav .nav-link {
  border-bottom: 1px solid #ddd;
  border-radius: 0;
}

.faq-nav .nav-link:hover {
  background-color: #e6e6e6;
}

.faq-nav .nav-link.active {
  background-color: #72C7AF;
}

.faq-nav .nav-link:last-of-type {
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  border-bottom: 0;
}

#faq-tab-content .btn-link {
  color: #000;
  width: 100%;
  text-align: left;
}

#faq-tab-content .btn-link:hover,
#faq-tab-content .btn-link:focus,
#faq-tab-content .btn-link:active,
#faq-tab-content .btn-link:hover:active {
  text-decoration: none;
  font-weight: bold;
}

.accordion > .card:not(:first-child) {
  border-top: 0;
}

.collapse.show .card-body {
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

/*---------------------------------------------------------------------------------
                                      Buttons
---------------------------------------------------------------------------------*/

.petrol-btn-link,
.teal-btn-link {
  background-color: transparent;
  font-weight: bold;
}

.petrol-btn-link:focus,
.teal-btn-link:focus,
.petrol-btn-link.focus,
.teal-btn-link.focus {
  outline: none !important;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border-color: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.closebtn,
.closebtn2 {
  float: right;
  margin-top: -5px;
}

.closebtn:focus,
.closebtn2:focus {
  outline: 0px !important;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.teal-btn {
  background-color: rgb(252,176,53);
  color: #fff;
}

.teal-btn:hover,
.teal-btn:focus,
.teal-btn:active {
  background-color: rgb(1,50,61);
  color: #fff;
}

.petrol-btn {
  background-color: rgb(1,50,61);
  color: #fff;
}



.scarlet-btn {
  background-color: rgb(252,176,53);
  color: #fff;
}

.scarlet-btn:hover,
.scarlet-btn:focus,
.scarlet-btn:active {
  background-color: rgb(1,50,61);
}

.petrol-btn-link {
  color: #004E58;
}

.teal-btn-link {
  color: #004E58;
}

.teal-btn-linkspan {
  color: #000;
  font-weight: normal;
}

.closebtn {
  font-size: 17px;
}

.closebtn2 {
  font-size: 24px !important;
  line-height: 1;
  font-weight: 600;
}

.fixed-btn {
  margin-top: -20px;
  margin-bottom: 15px;
}

.btn-align {
  margin-top: 28px;
}

button:focus {
  outline: 0px;
}

.btn {
  font-size: 0.9375rem;
}

button.close {
  color: #fff;
  opacity: 1;
  font-weight: 500;
}

/* Overriding BS4 style to allow multiple buttons aligned to the right on modal header */

@media (min-width:1080px){
  .modal-header {
    /*justify-content: flex-end;*/
  }

  .align-self-item {
    align-self: flex-start;
  }

  .modal-header-btn-container {
    align-items: baseline;
    margin-left:auto;
    display:block;
  }

  .modal-header-btn-container .close {
    padding:0;
    margin: 0 0 0 10px;
  }

  /*.modal-header .close {
    margin: -1rem;
  }*/
}

/* END OVERRIDE */

.btn-outline-light {
  border-color: transparent;
  font-size: 0.9375rem;
}

/*-------------------------------------------------------------------------------------
                                    Dashboard buttons
---------------------------------------------------------------------------------------*/

.teal-color {
  background-color: rgb(1,50,61);
  color: #fff;
}

.petrol-color {
  background-color: rgb(1,50,61);
  color: #fff;
}

.light-blue-color {
  background-color: #B9DCE1;
  color: #fff;
}

.scarlet-color {
  background-color:  rgb(1,50,61);
  color:#ffffff;
}

.scarlet-text {
  color: #D8272D;
}

.sand-color {
  background-color: #D2CCBC;
}

.fresh-green-color {
  background-color:  rgb(1,50,61);
  color: #fff;
}

.teal-text {
  color: rgb(252,176,53);
}

.fresh-green-text {
  color: rgb(252,176,53);
}

.light-blue-color-text {
  color: #B9DCE1;
}

.dark-green-color {
  background-color: rgb(1,50,61);
  color: #fff;
}

/*-----------------------------------------------------------------------------------------
                                 Dashboard Tabs
------------------------------------------------------------------------------------------*/

.tab-content {
  margin-bottom: 50px;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  background-color: transparent;
  border-color: transparent;
}

.nav-tabs > a#nav-company-tab.active {
  border-bottom: 3px solid rgb(252,176,53);
}

.nav-tabs > a#nav-system-tab.active {
  border-bottom: 3px solid rgb(252,176,53);
}

.nav-tabs > a#nav-user-tab.active {
  border-bottom: 3px solid rgb(252,176,53);
}

.nav-tabs > a#nav-training-tab.active {
  border-bottom: 3px solid rgb(252,176,53);
}

.nav-tabs > a#nav-license-tab.active {
  border-bottom: 3px solid rgb(252,176,53);
}

.nav-tabs > a#nav-knowhow-reports-tab.active {
  border-bottom: 3px solid rgb(252,176,53);
}

@media (max-width: 1024px) {
  .nav-tabs .nav-link {
    font-size: 13px;
    padding: 10px;
  }
}

.btn-option {
  height: 11em;
  width: 16em;
  color: #fff;
  margin-bottom: 15px;
}

.btn-option-system {
  margin-bottom:1em;
}

.btn-option-system .btn {
  width:100%;
  height:100%;
}

.tabSml {
  white-space: normal;
  word-wrap:break-spaces;
  margin-bottom: 1em;
}

@media (min-width: 992px) {

  .tabSml {
    min-width:150px;
  }

}

.tabSmlContent{
  height:100%;
}

.tabSml h6 {
  font-size:1em;
}

.tabSml .card {
  border:1px solid #72C7AF;
}

.tabSml .card:hover {
  border:1px solid #c6c8ca;
}

.tabSml .tabSmlContent {
  transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.tabSml .tabSmlContent:hover {
  cursor:pointer;
  background-color: #c6c8ca;
}

.btn-option:hover,
.btn-option:focus {
  background-color: #c6c8ca;
  color: #6b6a6a;
}

.btn-option.focus,
.btn-option:focus {
  -webkit-box-shadow: none;
          box-shadow: none;
}



@media (min-width: 992px) and (max-width: 1299px) {
  .btn-option {
    max-width: 12.5em;
  }

  .btn-option h6 {
    font-size: 14px;
  }
}

@media (min-width: 1300px) and (max-width: 1500px) {
  .btn-option {
    max-width: 12.8em;
    height: 10em;
  }

  .btn-option h6 {
    font-size: 14px;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  .btn-option {
    max-width: 10em;
  }
}

/*-----------------------------------------------------------------------------------------
                                      Line Dividers
------------------------------------------------------------------------------------------*/

.line,
.line2 {
  width: 100%;
  height: 1px;
  border-bottom: 1px dashed #ddd;
}

.line {
  margin: 20px 0;
}

.line2 {
  margin: 20px 0;
}

/* ------------------------------------------------------------------------------------------
                                    GENERAL STYLING
----------------------------------------------------------------------------------------------*/

[v-cloak] {
  display: none;
  visibility: hidden;
}

body {
  /*font-family: 'Open Sans', sans-serif;*/
  font-family: 'Ubuntu', sans-serif !important;
  background: #fafafa;
  font-size: 0.9375rem;
}

p {
  font-size: 1em;
  line-height: 1.7em;
  color: #888888;
}

h1,h2,h3,h4,h5,h6{
line-height: 1.4;
}

a,
a:hover,
a:focus {
  color: inherit;
  text-decoration: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.set-content-width {
  font-size: 9px;
  color: #fafafa;
  margin: 0px;
  visibility: hidden;
}

.font-weight-bold-2 {
  font-weight: 600 !important;
}

.hidden,
.open {
  display: block;
}

.hide {
  display: none;
}

.no-show {
  visibility: hidden;
}

.content {
  min-height: 100vh;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.main-content {
  padding: 20px;
  max-width: 100%;
}

.breadcrumb {
  background-color: transparent;
  font-size: 13px;
}

ol.breadcrumb {
  margin-bottom:0;
  padding-top:0;
}

.home-title {
  /*margin-top: -20px;*/
  margin-bottom: 24px;
}

.gray-color {
  background-color: #e8e8e8;
  color: #000;
  padding: 10px;
}

.gray-color-2 {
  background-color: #ededed;
  color: #000;
  padding: 8px;
  margin-left: 1px;
  margin-right: 1px;
}

.gray-color-2 p {
  color: #989494;
  text-align: center;
}

.system-color {
  background-color: #393A3E;
  color: #FFF;
}

.vl {
  border-right: 1.5px solid rgba(0, 0, 0, 0.125);
  padding: 1.25rem;
}

.add-remove {
  padding-top: 0px;
}

input[type=date] {
  -webkit-appearance: initial;
}

.modal-header {
  padding: 10px;
  border-bottom: 1px solid #fff;
  overflow:hidden;
}

hr.hr-inside {
  margin-top: 2px;
  margin-bottom: 12px;
}

.fa-rotate-45 {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

ul.filter {
  margin-bottom: -7px !important;
}

.filter li {
  font-weight: 500;
  list-style: none;
}

.filter li.filt-title {
  margin-left: -41px;
  padding-left: 8px;
  border-bottom: 1px solid #cbcccc;
  padding-bottom: 4px;
  padding-top: 0px;
  margin-bottom: -5px;
  font-weight: 600;
}

.no-side-padding {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.top-20 {
  margin-top: 20px;
}

.mg-r-5 {
  margin-right: 5px;
}

.mg-b-3 {
  margin-bottom: 3px;
}

.mg-r-10 {
  margin-right: 10px;
}

.add-bar {
  padding-right: 8px;
  padding-left: 8px;
}

.page-link {
  color: #004E58;
}

.page-link:hover {
  color:  rgb(252,176,53);
}

.page-item.active .page-link {
  background-color: rgb(252,176,53);
  border-color:  rgb(252,176,53);
}

.show-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.show-list-2 {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.show-list li {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  margin-top: -1px;
  /* Prevent double borders */
  padding: 10px;
  text-decoration: none;
  font-size: 17px;
  color: black;
  display: block;
}

.show-list-2 li {
  border-bottom: 1px solid #ddd;
  margin-top: -1px;
  /* Prevent double borders */
  padding: 10px;
  text-decoration: none;
  font-size: 17px;
  color: black;
  display: block;
}

.show-list-3 li {
  border-bottom: 1px solid #ddd;
  font-size: 17px;
}


.c-inside,
.c-inside2 {
  font-weight: 600;
  color: #393A3E;
}

.c-inside {
  min-height: 38px;
}

.c-inside2 {
  min-height: 41px;
}

.search-bar {
  width: 20%;
  margin-right: 20px;
}

@media (max-width: 992px) {
  .search-bar {
    width: 97%;
    margin-left: 15px;
  }
}

.inner-search-bar {
  width: 20%;
  margin-right: 20px;
  height: 32px;
}

.inner-search-bar-2 {
  width: 30%;
  margin-right: 5px;
  height: 32px;
}

.inner-search-bar-3 {
  width: 100%;
  margin-right: 0px;
  height: 32px;
  padding-right: 13px;
  padding-left: 13px;
  margin-bottom: 7px;
}

.search-bar input,
.inner-search-bar input,
.inner-search-bar-2 input {
  border: none;
}

.btn-outline-secondary {
  background-color: #b9bbbe;
  border-color: #b9bbbe;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
  background-color: rgb(252,176,53);
}

.custom-control2 {
  position: relative;
  display: block;
  min-height: 1.5rem;
  padding-left: 0;
}

.custom-control {
  margin-left: -27px;
  margin-top: 13px;
}

.parent-list th:first-child {
  color: #fff;
}

.upload-drop-zone {
  color: #ccc;
  border: 2px dashed #ccc;
  line-height: 100px;
  text-align: center;
}

input[type="file"] {
  display: none;
}

.inputfile {
  border-radius: .25rem;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  width: 100%;
  text-align: center;
  margin-top: 5px;
}

.validation-error {
  display:block;
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
  position: relative;
  padding: .75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: .25rem;
}

#edit-company-form .form-row {
  margin-bottom: 9px;
}

.upload-img {
  margin-top: 20px;
}

.form-check {
  padding-top: 8px;
}

label {
  margin-bottom: .3rem;
}

.form-control {
  margin-bottom: 5px;
  font-size: 0.9375rem;
}

.card-title {
  border-bottom: none !important;
  min-height: 31px;
  font-size: 17px;
}

.card-header {
  padding: 5px 0px 5px 11px;
}

.card-header.stats {
  padding:.75rem 1.25rem;
}
.card-header.stats h4 {
  margin:0;
}

.main-option-body {
  min-height: 710px;
}

.parent-card {
  border: 0px;
}

.parent-body {
  padding: 0;
  padding-top: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.parent-card > div.card {
  border: 0px;
}

.info-cards {
  height: 200px;
  overflow-y: auto;
}

.info-cards2 {
  padding: 0;
  height: 200px;
}

.pby {
  position: fixed;
  bottom: 8px;
  font-size: 13px;
  color: #ced4da85;
}

.cresent-logo {
  margin-left:-3px;
  width: 6em;
  height: auto;
  margin-top: -4px;
}

#sidebar.active div.bottomLogo.pby a.c-logo img.cresent-logo {
  width: 4.6em;
  margin-left: 0px;
}

.graphic {
  width: 430px;
}

.date {
  background-color: #72C7AF;
  color: #fff;
  padding: 7px;
  float: right;
  border-radius: 3px;
  font-size: 12px;
}

.option-collapse {
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  position: relative;
  margin-top: 0;
  /* margin-top: -$section-option-h - 25px;*
  @media (min-width: 1106px) and (max-width: 1300px ){
   margin-top: -180px;}*/
}

#system-tab .option-collapse {
  margin-top: 0;
}

.option-collapse.sml {
  margin-top: -140px;
}

@media (min-width: 1300px) and (max-width: 1500px) {
  .option-collapse {
    margin-top: -175px;
  }

  #system-tab .option-collapse {
    margin-top: 0;
  }
}

@media (max-width: 1115px) {
  .collapse2 {
    margin-top: -361px;
  }
}

.c-inside {
  font-weight: 600;
  color: #393A3E;
  min-height: 38px;
}

.c-inside2 {
  font-weight: 600;
  min-height: 41px;
  color: #393A3E;
}

.card-header button.petrol-btn-link.collapsed:before {
  content: "\F107";
  font-family: "Font Awesome 5 Free";
  font-size: 14px;
}

.card-header button.petrol-btn-link:before {
  content: "\F106";
  font-family: "Font Awesome 5 Free";
  font-size: 14px;
}

button.teal-btn-link.collapsed:before {
  content: "\F107";
  font-family: "Font Awesome 5 Free";
  font-size: 14px;
}

button.teal-btn-link:before {
  content: "\F106";
  font-family: "Font Awesome 5 Free";
  font-size: 14px;
}

.table thead th {
  font-weight: 600;
  color: #004E58;
}

table.add-table {
  margin-top: 30px;
}

table.table-striped.add-table td,
table.table-striped.add-table thead th {
  width: 1px;
}

table.table-striped td,
table.table-striped thead th {
  /*width: 150px;*/
  padding: 3px 5px 3px 17px;
  vertical-align: middle;
  border-top: transparent;
}

table.table-striped thead tr:hover,
table.table-striped thead tr:focus,
table.table-striped thead tr:active {
  background-color: transparent;
}

table.table-striped.align-table td:first-child,
table.table-striped.align-table thead th:first-child {
  min-width: 250px;
}

table.table-striped.parent-table td:first-child,
table.table-striped.parent-table thead th:first-child {
  min-width: 250px;
}

table.parent-table {
  margin-top: -12px;
}

table.parent-table td:first-child,
table.parent-table thead th:first-child {
  padding-bottom: 32px;
}

table.parent-table tbody tr:first-child {
  background-color: #fff;
}

table.parent-table th {
  border-top: none;
  color: #004E58;
}

table.parent-table tr {
  padding-bottom: 4px;
}

/*.table .thead-teal th{
  background-color: $teal-color;
  border-color:$teal-color;
  color: #fff;
}*/

@media (max-width: 1450px) {
  .table .thead-teal {
    font-size: 13px;
  }

  .table .thead-teal th:nth-of-type(2) {
   /* width: 209px;*/
  }

  .table .thead-teal th span {
    visibility: hidden;
  }
}
.table .thead-teal th {
  background-color: #72C7AF;
  border-color: #72C7AF;
  color: #fff;
}

.table .thead-teal th:first-child {
  /*width: 208px;*/
}

@media (max-width: 1450px) {
  .table .thead-teal th:first-child {
    /*width: 140px;*/
  }
}

/*.table .thead-teal th.dates {
  width: 190px;
  padding-bottom: 5px;
}*/

.table-hover tbody tr.course-dropdown {
  background-color: transparent;
}

.course-dropdown {
  width:100%;
  padding-top: 10px;
}

table.courses-table tr {
  -webkit-box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.1);
}

table.courses-table td {
  padding: 15px 5px 15px 10px;
}

table.table.courses-table {
  border-collapse: separate !important;
  border-spacing: 0 8px;
}

table.table.courses-table tr.course-dropdown td {
  border-top: 0px;
  border-spacing: 0 0;
}

.show-count {
  border: 1px solid rgba(0, 0, 0, 0.125);
  background-color: #fff;
  border-radius: .25rem;
  margin-bottom: 15px;
}

@media (min-width: 1440px) and (max-width: 1671px) {
  .show-count {
    min-height: 130px;
  }
}

.show-count-p {
  font-size: 14px;
}

.show-number {
  font-size: 30px;
  font-weight: bold;
  line-height: 7px;
}
.scrollbar-y-190 {
  height: 190px;
  overflow-y: auto;
}

.scrollbar-y-250 {
  height: 250px;
  overflow-y: auto;
  padding: 0px;
  padding-top: 10px;
}

.scrollbar-y-350 {
  height: 350px;
  overflow-y: auto;
  padding: 10px;
}

.scrollbar-y-420 {
  height: 420px;
  overflow-y: auto;
}

.scrollbar-y-560 {
  max-height: 560px;
  overflow-y: auto;
}

.scrollbar-y-624 {
  height: 624px;
  overflow-y: auto;
  padding: 0px;
  padding-top: 10px;
}

.scrollbar-y-650 {
  height: 650px;
  overflow-y: auto;
  padding: 0px;
  padding-top: 10px;
}

.max-scrollbar-y-550 {
  max-height: 550px;
  overflow-y: auto;
}

.max-scrollbar-y-650 {
  max-height: 650px;
  overflow-y: auto;
  padding: 0px;
  padding-top: 10px;
}

.add-action {
  height: 550px;
  overflow-y: auto;
}

.modal-title {
  font-size: 1.1rem;
}

.modal-content {
  border: none;
}

.modal-footer > div {
  padding: 0;
}

.align-expanded-modal {
  left: -360px;
}

.expanded-modal {
  width: 930px;
}

.extra-expanded-modal {
  width: 1230px;
}

.delete-warning {
  border: 1px solid #b9bbbe;
  background-color: #333;
  color: #fff;
  -webkit-box-shadow: 1px 3px 20px 3px #929292;
          box-shadow: 1px 3px 20px 3px #929292;
}

.delete-warning p {
  color: #d4d6d8;
}

.delete-warning > .modal-header {
  text-align: center;
  background-color: #ed634f;
}

.m-footer {
  padding: 1rem;
  border-top: 1px solid #e9ecef;
}

.dot-green {
  color: #99dc7c;
}

.dot-red {
  color: #dc3545;
}

.dot-blue {
  color: #348edc;
}

.dot-yellow {
  color: #d88134;
}

.course-content {
  padding: 0 !important;
}

.course-desc {
  border: none;
  padding: 10px;
}

.video-js {
  width: 100% !important;
  height: 100% !important;
}

.input-group > .custom-select:not(:last-child),
.input-group > .form-control:not(:last-child) {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  table.courses-table thead tr {
    -webkit-box-shadow: none;
            box-shadow: none;
  }

  table.courses-table tr {
    -webkit-box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.1);
            box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.1);
  }

  #snackbar-saved {
    left: 49.5%;
  }

  /*.card-header {
    &.c-inside2, &.c-inside {
      background-color: rgba(0, 0, 0, 0.08);
      //rgba(237,237,237,1)
    }
  }*/
}

@media (max-width: 768px) {
  a#homeDropdown.dropdown-toggle::after,
  a#courseDropdown.dropdown-toggle::after {
    margin-right: 5px;
  }

  .expand-btn2 {
    display: block;
  }
}

@media (max-width: 992px) {
  button.navbar-toggler {
    margin-left: 15px;
  }
  .top-navbar {
    padding:10px 0 10px 0;
  }
}

@media (max-width: 1381px) {
  .vl {
    border-right: transparent;
  }
}

#closeModsCourse {
  padding-top:3px;
}

@media (max-width: 1080px) {
  .modal-dialog,
  .modal-body,
  .modal-content,
  .modal,
  .expanded-modal {
    width: 100%;
    max-width: 100% !important;
    margin: 0;
  }

  .modal-header-btn-container .close {
    padding:0;
    margin: 0 0 0 10px;
  }
  .align-expanded-modal {
    left: 0;
  }

  .modal {
    height: 100%;
    background-color: #fff;
  }

  .modal-dialog,
  .modal-content,
  .modal {
    padding: 0 !important;
  }

  .modal-body {
    padding: 12px !important;
  }

  #iterative-background .modal-body{
    padding:0 !important;
  }

  .modal-header,
  .modal-content {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-radius: 0px;
  }
}

@media (max-width: 850px){
  /*mobile settings for modal window box*/

  /*.modal-header{*/
  /*  display:none;*/
  /*}*/

  .modal-body {
    padding: 5px !important;
  }
}

/* toggle button*/

/* Switch Flat
==========================*/
.switch {
  position: relative;
  display: block;
  vertical-align: top;
  width: 100px;
  height: 30px;
  padding: 3px;
  margin: 0 10px 10px 0;
  background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
  background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
  border-radius: 18px;
  box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  box-sizing:content-box;
}
.switch-wide{
  width:170px !important;
}
.switch-input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  box-sizing:content-box;
}
.switch-label {
  position: relative;
  display: block;
  height: inherit;
  text-transform: uppercase;
  background: #eceeef;
  border-radius: inherit;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
  box-sizing:content-box;
}
.switch-label:before, .switch-label:after {
  position: absolute;
  top: 50%;
  margin-top: -.5em;
  line-height: 1;
  -webkit-transition: inherit;
  -moz-transition: inherit;
  -o-transition: inherit;
  transition: inherit;
  box-sizing:content-box;
}
.switch-label:before {
  content: attr(data-off);
  right: 11px;
  color: #aaaaaa;
}
.switch-label:after {
  content: attr(data-on);
  left: 11px;
  color: #FFFFFF;
  opacity: 0;
}


.switch-input:checked ~ .switch-label:before {
  opacity: 0;
}
.switch-input:checked ~ .switch-label:after {
  opacity: 1;
}
.switch-handle {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 28px;
  height: 28px;
  background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
  background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
  border-radius: 100%;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.switch-handle:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -6px 0 0 -6px;
  width: 12px;
  height: 12px;
  background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
  background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
  border-radius: 6px;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
}
.switch-input:checked ~ .switch-handle {
  left: 74px;
  box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
}

/* Transition
========================== */
.switch-label, .switch-handle {
  transition: All 0.3s ease;
  -webkit-transition: All 0.3s ease;
  -moz-transition: All 0.3s ease;
  -o-transition: All 0.3s ease;
}

.switch-flat {
  margin-left: 2em;
  padding: 0;
  background: #FFF;
  background-image: none;
}
.switch-flat .switch-label {
  background: #FFF;
  border: solid 2px #eceeef;
  box-shadow: none;
}
.switch-flat .switch-label:after {
  color: #fff;
}
.switch-flat .switch-handle {
  top: 6px;
  left: 6px;
  background: #dadada;
  width: 22px;
  height: 22px;
  box-shadow: none;
}
.switch-flat .switch-handle:before {
  background: #eceeef;
}
.switch-flat .switch-input:checked ~ .switch-label {
  background: rgb(1,50,61);
  border-color: rgb(1,50,61);
  color: #fff;
}
.switch-flat .switch-input:checked ~ .switch-handle {
  left: 72px;
  background: #fff;
  box-shadow: none;
}

.switch-wide .switch-input:checked ~ .switch-handle {
  left: 142px;
  background: #fff;
  box-shadow: none;
}
@media (max-width: 510px) {
  .menu-top-option.hide-option,
  .hide-option {
    display:none;
  }
}



/* DRAG & DROP https://jqueryui.com/droppable/#photo-manager */

/*.options.custom-state-active { background: #eee; }
.options li { float: left; padding: 0.4em; text-align: center; }
.options li button { float: right; }
.options li img { width: 100%; cursor: move; }

#myDB { float: left; width: 100%; min-height: 18em; padding: 1%; }
#myDB h4 { line-height: 16px; margin: 0 0 0.4em; }
#myDB h4 .ui-icon { float: left; }*/

#myDB {
  min-height:300px;
}

/*.options li {
  height:100px;
}*/

#accordionMods .btn-link {
  color:#fff;
}

#accordionMods .btn-link.focus,
#accordionMods .btn-link:focus,
#accordionMods .btn-link:hover {
  text-decoration: none;
}

.tableDanger {
  background-color: #f8d7da;
  padding:0.5em;
}

.tableWarning {
  background-color: #fff3cd;
  padding:0.5em;
}

.tableSuccess {
  background-color: #d4edda;
  padding:0.5em;
}

@media (max-width: 850px) {
  .no-mobile {
    display: none;
  }
}

@media (min-width: 851px) {
  .mobile-course-details {
    display: none;
  }

  .no-mobile-line{
    display: none;
  }
}

.admin-btn:hover{
  background-color: #c6c8ca;
  color: #6b6a6a;
}

.multi-toggle{
  width: 300px;
}

.btn:hover, btn:focus{
  color:rgba(255,255,255,0.9) !important;
}

#switchLocale .active,
#switchLocaleMods .active {
  color:#212529;
  background-color: rgb(252,176,53);
}

.datepicker,
#submitwinddob {
  z-index:9999 !important
}

.container-course{
  min-width:87vw !important;
}

.cert-red {
  background-color: #f8d7da;
  padding:0.5em;
}

.cert-orange {
  background-color: #fff3cd;
  padding:0.5em;
}

.cert-green {
  background-color: #d4edda;
  padding:0.5em;
}

/* Hide vertical scrollbars where needed for modals */
/* Hide scrollbar for Chrome, Safari and Opera */
.hideScroll::-webkit-scrollbar {
  display: none !important;
}

/* Hide scrollbar for IE, Edge and Firefox https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp */
.hideScroll {
  -ms-overflow-style: none !important;  /* IE and Edge */
  scrollbar-width: none !important;  /* Firefox */
}