:root{
    --primary-color: #0D6EFC;
    --secondary-color: #0D6EFC;
    --border-color: #0D6EFC;
}

body {
	background-color: #f8f9fa;
}

.no-scroll {
overflow: hidden;
}

.edit-exercise-modal .exercise-title {
font-weight: 500;
font-size: 12px;
}

.edit-exercise-modal .close-exercise-modal {
padding: 10px;
position: absolute;
top: 10px;
right: 10px;
background: rgb(230, 230, 230);
border-radius: 4px;
cursor: pointer;
}

.edit-exercise-modal .modal-content {
border: 0px solid #fff;
}

.edit-exercise-modal .modal-content .form-label {
font-weight: 500;
font-size: 14px;
}

.edit-exercise-modal .modal-header {
background: rgb(241, 241, 241);
border: 0px solid #fff;
display: block;
}

.edit-exercise-modal .modal-title {
font-weight: 600;
}

.edit-exercise-modal .modal-title-content {
margin-bottom: 0px;
font-size: 12px;
color: rgba(0, 0, 0, 0.51);
}

.edit-exercise-modal .modal-body {
padding: 10px;
background: #fff;
border-radius: 0px 0px 4px 4px;
}




.filters-modal .close-filters {
padding: 10px;
position: absolute;
top: 10px;
right: 10px;
background: rgb(230, 230, 230);
border-radius: 4px;
cursor: pointer;
}

.filters-modal .modal-content {
border: 0px solid #fff;
}

.filters-modal .modal-content .form-label {
font-weight: 500;
font-size: 14px;
}

.filters-modal .modal-header {
background: rgb(241, 241, 241);
border: 0px solid #fff;
display: block;
}

.filters-modal .modal-title {
font-weight: 600;
}

.filters-modal .modal-title-content {
margin-bottom: 0px;
font-size: 12px;
color: rgba(0, 0, 0, 0.51);
}

.filters-modal .modal-body {
padding: 10px;
background: #fff;
border-radius: 0px 0px 4px 4px;
}

.page-overlay {
    background: rgba(0, 0, 0, 0.7);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
display: none;
}

.page-overlay.show {display: block;}

.filter-box.show {
display: block;
}

.sortable-container {
}

#exercises-chosen .item {
border: 3px dashed rgba(204, 204, 204, 0.58);
padding: 8px;
height: auto!important;
background-color: #f2f2f2;
border-radius: 4px;
cursor: move;
}

.ui-sortable-helper .item {
border: 3px dashed rgba(204, 204, 204, 0.58);
padding: 8px;
height: auto!important;
background-color: #ffffcc!important;
border-radius: 4px;
}

.steps-header {
border-radius: 4px;
border-left: 10px solid rgba(13, 110, 252, 0.15);
}

.steps-header .title {
margin-left: 10px;
font-weight: 700;
color: #212529;
margin-bottom: 0px;
}

.steps-header .content {
margin-left: 10px;
font-weight: 400;
color: rgba(33, 37, 41, 0.63);
margin-bottom: 0px;
font-size: 16px;
}

.exercise-item {
box-shadow: 0 2rem 2rem rgba(0,0,0,.03)!important;
border: 2px solid #fff!important;
border-radius: 6px;
height: 100%;
}

.exercise-item.checked {
    border: 2px solid var(--primary-color)!important;
    border-radius: 6px;
}

.filter-block {
padding: 10px 10px;
background: rgb(242, 242, 242);
text-align: center;
border-radius: 4px;
}

.no-more {
padding: 30px 10px;
background: rgb(242, 242, 242);
text-align: center;
border-radius: 4px;
}

.no-more .title {
font-weight: 700;
}

.no-more .content {
font-size: 16px;
color: rgba(0, 0, 0, 0.7);
margin-bottom: 0px;
}

.no-more .no-more-icon {
font-size: 50px;
color: rgba(255, 116, 116, 0.7);
}

.main-content {
margin-bottom: 100px;
}

.cursor {
	cursor: pointer;
}

.smaller {
    font-size: 0.7em;
}

.breadcrumb-bar {
padding: 10px;
background: #f2f2f2;
}

.breadcrumb-bar .breadcrumb {
display: flex;
flex-wrap: wrap;
padding: 0 0;
margin-bottom: 0px;
list-style: none;
}

.breadcrumb-bar .breadcrumb li {
font-size: 12px;
color: #000;
}

.breadcrumb-bar .breadcrumb li a {
font-size: 12px;
color: #000;
text-decoration: none;
font-weight: 700;
}

.floating-actions-message {
position: fixed;
display: none;
bottom: 110px;
z-index: 9999;
right: 50%;
left: 50%;
padding: 10px;
margin: auto;
background: rgb(252, 64, 64);
text-align: center;
border-radius: 4px;
min-width: 300px;
font-family: 'Rubik', sans-serif;
box-shadow: 0 10px 20px rgba(0, 0, 0, 1), 0 6px 6px rgba(0, 0, 0, 0.04);
font-size: 12px;
color: #fff;
}

.floating-actions-message.success {
    background: green;
}

.floating-actions-message.error {
background: rgb(252, 64, 64);
}

.floating-actions {
position: fixed;
display: block;
bottom: 0px;
z-index: 999;
right: 50%;
left: 50%;
padding: 10px;
margin: auto;
background: #212529;
text-align: center;
border-radius: 4px 4px 0px 0px;
min-width: 300px;
font-family: 'Rubik', sans-serif;
box-shadow: 0 10px 20px rgba(0, 0, 0, 1), 0 6px 6px rgba(0, 0, 0, 0.04);
}

.floating-actions .title {
display: block;
font-weight: 600;
color: #fff;
margin-bottom: 0px;
font-size: 16px;
}

.floating-actions .content {
display: block;
font-weight: 300;
color: rgba(255, 255, 255, 0.57);
margin-bottom: 10px;
font-size: 12px;
}

.floating-actions .content b {
font-weight: 700;
color: rgba(255, 255, 255, 0.8);
}

.floating-actions .btn {
color: #fff;
border-radius: 2px;
font-size: 12px;
width: 32%;
}

.floating-actions .btn.filter {
background: var(--primary-color);
}

.floating-actions .btn.reset {
background: rgb(195, 70, 21);
}

.floating-actions .btn.inactive {
background: rgb(85, 85, 85);
}

.floating-actions .btn.right, .floating-actions .btn.left {
background: #fff;
color: #000;
}

.floating-actions .btn.send {
background: rgb(57, 131, 39);
}


.steps.step-two {
	display: none;
}

.exercise-image {
width: 100%;
aspect-ratio: 4 / 2;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin: 0px auto;
border-radius: 4px 4px 0px 0px;
  position: relative;
}


.exercise-image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
border-radius: 4px 4px 0px 0px;
  background-color: rgba(0, 0, 0, 0.08);
}

.exercise-item .title {
font-size: 14px;
margin-bottom: 8px;
}

.exercise-item .content {
font-size: 12px;
margin-bottom: 0px;
color: rgb(129, 129, 129);
}

/***** Sidebar Start *****/

ul.submenu {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.sidebar {
    min-height: calc(100vh - 0px);
    position: sticky;
    z-index: 0;
    top: 0;
}

.mobile-sidebar {
    min-height: 0px !important;
    position: sticky;
    z-index: 0;
    top: 0;
}

.navbar {
    z-index: 999;
}

.sidebar .sidebar-nav-link .bi.icon {
    margin-right: 8px;
    display: inline-block;
    border-radius: 60px;
    padding: 0.3em 0.6em;
    background: #fff;
}

.nav-item-icon-divider {
    border-right: 2px solid rgba(249, 249, 249, 0.04);
    margin-right: 10px;
    position: relative;
    margin-left: 10px;
}

.sidebar .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #000;
    font-weight: 600;
    background-color: #f1f1f1;
}

.sidebar .nav-link .bi {
    margin-right: 8px;
    display: inline-block;
    border-radius: 60px;
    padding: 0.3em 0.6em;
    background: rgba(255, 255, 255, 0.15);
}

.sidebar .nav-link.active .bi {
    display: inline-block;
    border-radius: 60px;
    padding: 0.3em 0.6em;
    background: #0D6EFC;
    color: #fff;
}

.sidebar .nav-link {
    padding: 6px 15px 6px 6px;
    font-size: 15px;
    line-height: 24px;
    color: #fff;
    font-weight: 400;
    border-radius: 4px;
    border: none;
    position: relative;
    margin-bottom: 4px;
    background: rgba(255, 255, 255, 0.04);
}

.sidebar .nav-item.active .nav-link {
    color: #000;
    font-weight: 500;
    background-color: #fff;
}

.sidebar .nav-item.active .nav-link .bi {
    color: #fff;
    background-color: var(--primary-color);
}

.sidebar .nav-link:hover {
    color: #fff;
    font-weight: 500;
    background-color: var(--primary-color);
}

.sidebar .nav-link:hover .bi {
    color: var(--secondary-color);
    background-color: #fff;
}

.sidebar .sidebar-header {
    padding: 10px 15px 10px 15px;
    background: rgba(255, 255, 255, 0.04);
    font-size: 15px;
    line-height: 24px;
    color: #fff;
    font-weight: 300;
    border-radius: 4px;
    border: none;
    border-left: 4px solid rgb(84, 84, 84);
    position: relative;
    margin-bottom: 4px;
    display: block;
    text-decoration: none;
}

/***** Sidebar End *****/



@media only screen and (max-width: 990px) {
.floating-actions {
transform: translateX(-50%);
}
.floating-actions-message {
transform: translateX(-50%);
}
.filter-box {
transform: translateX(-50%);
  left: 50%;
}

}



/***** Checkbox *****/
.exercise-action {
position: absolute;
top: 15px;
right: 15px;
}

.exercise-edit {
position: absolute;
bottom: 50px;
left: 0px;
cursor: pointer;
}

.exercise-edit-icon {
padding: 5px 10px;
background: rgba(0, 0, 0, 0.33);
border-radius: 0px;
font-size: 12px;
color: #fff;
font-weight: 500;
}

input[type="checkbox"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  /* Remove most all native input styles */
  appearance: none;
  /* For iOS < 15 */
  background-color: rgba(255, 255, 255, 0.5);
  /* Not removed via appearance */
  margin: 0;

  font: inherit;
  color: currentColor;
  width: 1.15em;
  height: 1.15em;
  padding: 10px;
  border: 0.15em solid rgba(255, 255, 255, 0.5);
  border-radius: 100%;
  transform: translateY(-0.075em);

  display: grid;
  place-content: center;
  cursor: pointer;
  box-shadow: 0 0rem 2rem rgba(0,0,0,0.5)!important;
}

input[type="checkbox"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transform-origin: bottom left;
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--form-control-color);
  /* Windows High Contrast Mode */
  background-color: #fff;
}
input[type="checkbox"]:checked {
background-color: var(--primary-color);
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}

input[type="checkbox"]:focus {
  outline: max(2px, 0.15em) solid currentColor;
  outline-offset: max(2px, 0.15em);
}

input[type="checkbox"]:disabled {
  --form-control-color: var(--form-control-disabled);

  color: var(--form-control-disabled);
  cursor: not-allowed;
}