.primaryBtn{
height: 3rem;
background: linear-gradient(84.18deg, #0D1B2A 57.35%, rgba(13, 27, 42, 0.72) 105.35%);
background-blend-mode: multiply;
/*box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.3);*/
box-shadow: 0px 2px 4px rgba(45,35,66,0.4),0px 7px 13px -3px rgba(45,35,66,0.3),inset 3px -3px 0px rgba(0,0,0,1);
border-radius: 1.25rem;
color: var(--mincBtnText);
border: none;
position: relative;
overflow: hidden;
display: block;
    padding: 0.5rem 2.5rem;
    font-size: 1.3rem;
width: 100%;
cursor: pointer;
}

.primaryBtn:hover{
    -webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
}

.primaryBtn.slideUpAbsolute:hover{
    -webkit-transform: translateY(-50%,-2px);
-ms-transform: translateY(-50%,-2px);
transform: translate(-50%,-2px);
}

.primaryBtn:active{
    box-shadow: inset 0px 3px 7px rgba(0,0,0,1);
}

.primaryBtn span {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  --shineColor: rgba(255,255,255,0.2);
  background: radial-gradient( circle closest-side,var(--shineColor),transparent );

  transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 0;
animation: slide-up 0.4s ease;
  
}

.primaryBtn:hover span {
  width: 250px;
  height: 250px;
}


.secondaryBtn{
    background: linear-gradient(50.06deg, #0D1B2A 62.24%, rgba(13, 27, 42, 0.72) 112.51%);
background-blend-mode: multiply;
border-radius: 1.25rem;
color: var(--mincBtnText);
border: none;
position: relative;
overflow: hidden;
    padding: 0.5rem 1.25rem;
    font-size: 1rem;
width: 100%;
display: flex;
align-items: center;
opacity: 0.92;
cursor: pointer;
}

.secondaryBtn-outline{
    background:  var(--bg);
background-blend-mode: multiply;
border-radius: 1.25rem;
color: var(--fontDark);
border: none;
position: relative;
overflow: hidden;
    padding: 0.5rem 1.25rem;
    font-size: 1rem;
width: 100%;
display: flex;
align-items: center;
opacity: 0.92;
cursor: pointer;
border: 1px solid var(--mincAccentBlue);
}

.modal-footer .secondaryBtn, .modal-footer .secondaryBtn-outline{
display: inline-block;
width: unset;
}

.listBtn{
    font-family: var(--font-apple-system) !important;
   font-size: var(--font-size-regular);
    color: var(--fontDark);
border: 1px solid lightgray;
position: relative;
overflow: hidden;
padding: var(--border-padding);
/*padding: var(--mainMargin) 1rem;*/
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
opacity: 1;
cursor: pointer;
border-left: 0;
border-right: 0;
border-top: 0;
background: var(--bg);
border: none;
min-height: 3.5rem;
height: auto;
border-radius: var(--border-radius-button);
}

.listBtn::before {
  content: '';
  position: absolute;
  height: 1px;
  width: 85%;
  background: rgba(0, 0, 0, 0.05);
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.listBtn:hover::before{
    width: 0;
}
#program-list-btnContainer .listBtn{
padding: 0rem var(--border-padding);
/*padding: 0.15rem 1rem;*/
}

.listBtn:hover{
    /*background: #f5f5f5;*/
    background: var(--body);
box-shadow: rgba(0, 0, 0, 0.2) 0 1px 3px;
/*transform: scale(1.02);*/
z-index: 9;
}

.listBtn:active{
/*background: #ededed;*/
background: #eff5fa;
}

.listBtnNav{
    /*margin-left: auto;*/
}

.listBtnNav .nav-link{
    padding: 0;
}

.listBtn .col{
    padding: 0;
}

.listBtnMain{
    display: flex;
height: auto;
min-height: inherit;
align-items: center;
}

.listBtnNav{
    display: flex;
flex-direction: row;
height: auto;
min-height: inherit;
align-content: center;
justify-content: end;
gap: 1rem;
}

.listBtnNav span {
  width: auto;
  height: inherit;
  padding: 0.5rem;
  display: flex;
  place-items: center;
}

.listBtnNav span span {
  padding: 0;
}

.listBtnNav span span::before {
  margin: 0;
}

.listBtnNav span:hover {
  background: white;
  border-radius: var(--border-radius-box)
}


/*.listBtnNav svg {
  height: calc(24px + 1.5rem);
  padding: 0.95rem 0.25rem !important;
}

.listBtnNav svg:hover {
  background: white;
  border-radius: 0.2rem;
}*/

.btn.primary ion-icon{
    color: var(--bg);
}

.mui-icon {
  display: grid;
  place-items: center;
  cursor: pointer;
}

.notesIcon-mui{
width: auto;
  display: inline-block;
  position: absolute;
  cursor: pointer;
}

.btn .material-symbols-outlined {
  font-size: var(--font-size);
}

.dragIcon, .searchIcon, .clearSearchIcon{
  font-family: 'IcoFont' !important;
    -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  align-items: center;
   min-width: 14px;
min-height: 14px;
justify-content: center;
cursor: pointer;
font-size: var(--font-size);
display: inline-flex;
}

.searchIcon, .clearSearchIcon{
    font-size: 1.25rem;
}

.dragIcon::before{
    content: '\ef0b';
}

.searchIcon::before{
    content: '\ed1b';
}

.clearSearchIcon::before{
    content: '\eede';
}

/*.infoIcon,*/
.addIcon, .listViewIcon, .saveIcon, .cancelIcon, .reorderIcon, .notesIcon,
.editIcon, .colorIcon, .deleteIcon, .duplicateIcon, .linkIcon, .restrictIcon, 
.timerIcon, .stopwatchIcon, .metronomeIcon, .weightsIcon, .prevIcon, .nextIcon, .cloudUploadIcon, 
.playIcon, .draggableIcon, .draggableAllIcon, .backArrowIcon, .ellipsisIcon, .expandIcon, .compressIcon,
.checkIcon, .pasteIcon{
   display: inline-flex !important;
   align-items: center;
   min-width: 14px;
min-height: 14px;
justify-content: center;
cursor: pointer;
}

/* .infoIcon::before, */
.addIcon::before, .listViewIcon::before, .saveIcon::before, .cancelIcon::before, .duplicateIcon::before,
.notesIcon::before, .reorderIcon::before, .editIcon::before, .colorIcon::before, .linkIcon::before, .deleteIcon::before, 
.restrictIcon::before, .prevIcon::before, .nextIcon::before, .cloudUploadIcon::before, .backArrowIcon::before, 
.ellipsisIcon::before, .expandIcon::before, .compressIcon::before, .checkIcon::before, .pasteIcon::before
{
        font-family: "Font Awesome 6 Free";
   font-weight: 900;
   margin-right: 0.25rem;
}

.icon-only::before{
    margin: 0;
}

.timerIcon::before, .stopwatchIcon::before, .metronomeIcon::before, .weightsIcon::before{
margin-bottom: 0.25rem;
}

.timerIcon::before, .stopwatchIcon::before, .metronomeIcon::before, 
.weightsIcon::before, .draggableIcon::before, .draggableAllIcon::before{
    content: '';
height: 2rem;
width: 2rem;
}

.draggableIcon::before{
background: url(../assets/images/draggable.png) no-repeat center center/contain;
/*height: var(--font-size);*/
/*width: var(--font-size);*/
}

.draggableAllIcon::before{
background: url(../assets/images/draggable-all.png) no-repeat center center/contain;
height: var(--font-size);
width: var(--font-size);
}

.playIcon::before{
    content: '';
/*height: var(--font-size);*/
/*width: var(--font-size);*/
margin-right: 0.25rem;
}

.playIcon::before{
background: url(../assets/images/png/play2.png) no-repeat center center/contain;
}

.timerIcon::before{
background: url(hourglass.png) no-repeat center center/contain;
}

.stopwatchIcon::before{
background: url(stopwatch.png) no-repeat center center/contain;
}

.metronomeIcon::before{
background: url(metronome.png) no-repeat center center/contain;
}

.weightsIcon::before{
background: url(weight.png) no-repeat center center/contain;
}

.checkIcon::before{
    content: "\f058";
}

.expandIcon::before{
    content: "\f065";
}

.compressIcon::before{
    content: "\f066";
}

.ellipsisIcon::before{
    content: "\f141";
}

.backArrowIcon::before{
   content: "\f177";
}

.cloudUploadIcon::before{
   content: "\f0ee";
}

.prevIcon::before{
   content: "\f104";
}

.nextIcon::before{
   content: "\f105";
}

.notesIcon::before{
   content: "\f328";
}

/*.infoIcon::before{
   content: "\f05a";
}*/

.restrictIcon::before{
   content: "\f056";
}


.pasteIcon::before{
/*   content: "\f0ea";*/
   content: '\f328';
   margin: 0;
}


.duplicateIcon::before{
   content: "\f0c5";
}


.deleteIcon::before{
   /*content: "\f1f8";*/
   content: "\f2ed";
}

.addIcon::before{
   content: "\f067";
}


.listViewIcon::before{
   content: "\f03a";
}

.saveIcon::before{
   content: "\f0c7";
}

.cancelIcon::before{
   content: "\f00d";
}

.reorderIcon::before{
    content: "\f884";
}

.editIcon::before{
    content: "\f044";
}

.colorIcon::before{
    content: "\f5aa";
    margin: 0;
font-size: var(--font-size-button-primary);
}

.linkIcon::before{
    content: "\f0c1";
    margin: 0;
    font-size: var(--font-size-button-primary);
}

.listBtnIcon{
margin-right: 0.5rem;
   height: 25px;
}

.listBtnPictureIcon{
margin-right: var(--border-padding);
height: 50px;
border-radius: 50px;
width: 50px;
object-fit: cover;
}


/*.listBtn-DuplicateIcon:hover {
    background: #fdfdfd;
    border-radius: 0.2rem;
}
.listBtn-DuplicateIcon {
    height: 24px;
    width: 24px;
    margin-left: auto;
}*/

.secondaryBtnIcon {
  margin-right: 0.5rem;
  height: 25px;
}

.tertiaryBtn {
    font-size: 16px;
    background: transparent;
    border: none;
    color: var(--fontDark);
    cursor: pointer;
    font-weight: bold;
}

.tertiaryBtn:active {
    text-decoration: underline;
}

.dock-container .secondaryBtn, .dock-container .primary.btn{
    width: auto;
/*top: 1rem;*/
}

.btn-absolute-right{
position: absolute;
right: 1rem;
}

.btn-absolute-left{
position: absolute;
left: 1rem;
}

.dock-container .tertiaryBtn{
  background: none;
  border: none;
  position: absolute;
  /*top: 1rem;*/
padding: 0.5rem 1.25rem 0.5rem 0;
  font-size: 1rem;
}

.dock-container .btn.left{
padding: 0.5rem 1.25rem;
  position: absolute;
  /*top: 1rem;*/
}

.excerptBtn {
  cursor: pointer;
  text-decoration: underline;
  color: gray;
  margin-left: 10px;
}

.deleteBtn, .notesIconSVG {
/*  height: 24px;
  width: 18px;*/
  height: var(--font-size);
width: auto;
  display: inline-block;
  position: absolute;
  cursor: pointer;
}


#newProgramDataContainer .deleteBtn,
#editProgramDataContainer .deleteBtn,
#newProgramDataContainer .deleteIcon,
#editProgramDataContainer .deleteIcon{
  right: 0;
  top: 0;
  z-index: 9;
  position: absolute;
right: 0;
padding: calc(var(--border-padding) / 2);
width: 2rem;
height: 100%;
}

#newProgramDataContainer .duplicateIcon,
#editProgramDataContainer .duplicateIcon{
    position: absolute;
right: 2rem;
top: 0;
padding: calc(var(--border-padding) / 2);
width: 2rem;
height: 100%;
z-index: 9;
}

#newProgramDataContainer .deleteIcon::before,
#editProgramDataContainer .deleteIcon::before{
     font-size: var(--font-size);
width: var(--font-size);
}

#newProgramDataContainer .duplicateIcon::before,
#editProgramDataContainer .duplicateIcon::before{
   font-size: var(--font-size);
}

/*#newProgramDataContainer .ssBucketHeader .duplicateIcon,
#editProgramDataContainer .ssBucketHeader .duplicateIcon,
#newProgramDataContainer .ssBucketHeader .deleteBtn,
#editProgramDataContainer .ssBucketHeader .deleteBtn,
#newProgramDataContainer .ssBucketHeader .deleteIcon,
#editProgramDataContainer .ssBucketHeader .deleteIcon,
#newProgramDataContainer .ssBucketHeader .handle,
#editProgramDataContainer .ssBucketHeader .handle{
    top: 1rem;
}
*/
.editBtn{
  cursor: pointer;
  text-decoration: underline;
  position: relative;
  margin-left: 11px;
  display: inline-block;
  font-size: 1rem;
  line-height: 1.1rem;
  color: var(--fontDark);
  text-transform: capitalize;
  font-size: var(--font-size-button-tertiary);
}



/*.editBtn, .editBtn.btn.tertiary {
  cursor: pointer;
  text-decoration: underline;
  position: relative;
  margin-left: 11px;
  display: inline-block;
  color: var(--fontDark);
}*/



.custom-file-upload input[type="file"], .secondaryBtn input[type="file"], .primary.btn input[type="file"] {
  display: none;
}


.custom-file-upload
{

background: #fdfdfd;
z-index: 9;
border-radius: 1.25rem;
padding: 5px 15px;
border: 1px solid var(--dark);
cursor: pointer;
color: var(--fontDark);
}

#exercise_video_upload_btn{
bottom: 0;
transition: all 0.5s;
}

#exercise_video_upload_btn.replace{
right: 1rem;
bottom: 1rem;
position: absolute;
}

#exercise_video_upload_btn.new{
    left: 50%;
transform: translateX(-50%);
bottom: 4rem;
margin: 0;
}

.custom-file-upload.replace{
position: absolute;
right: 1rem;
top: 1rem;
/*top: calc(1rem * 2);*/
}

.custom-file-upload.new{
  top: -50px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}
}

.custom-file-upload input[type="file"], .secondaryBtn input[type="file"], .primary.btn input[type="file"]{
    display: none;
}


.editable{
    border: 1px solid lightgray;
    padding: 3px 7px;
    border-radius: 0.625rem;
    cursor: text;
}

#exercise_details_editToolbar{
    position: absolute;
width: 100%;
padding: 0 1rem;
/*top: 1rem;*/
height: auto;
/*background: red;*/
text-align: right;
}

#exercise_details_editToolbar .deleteBtn, 
#program_details_editToolbar .deleteBtn{
left: 1rem;
}

#exercise_details_editToolbar .deleteIcon, 
#program_details_editToolbar .deleteIcon{
left: 1rem;
position: absolute;
top: 50%;
transform: translateY(-50%);
}

form .deleteIcon{
    position: absolute;
    right: 1rem;
    top: 1.25rem;
}

.deleteIcon{
    color: var(--delete-red-color);
}


.btn{
    border-radius: 0.25rem;
    display: inline-flex;
place-items: center;
/*padding: .625rem 1rem .5rem;*/
padding: 0.5rem 0.825rem;
text-transform: uppercase;
    font-size: var(--font-size-button-primary);
font-family: var(--font-apple-system) !important;
}



/*.text-button.primary{
    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif !important;
    font-size: var(--font-size-button-primary);
}*/
 .primary.btnImgIcon::before{
    height: var(--font-size-button-primary);
    width: var(--font-size-button-primary);
 }
 .tertiary.btnImgIcon::before{
    height: var(--font-size-button-tertiary);
    width: var(--font-size-button-tertiary);
}
/*.text-button.tertiary{
    font-size: var(--font-size-button-tertiary);
}*/

/*svg path{
fill: var(--btncolor);
}
*/
/*svg path:hover, svg path:focus{
fill: var(--btncolordark);
}

svg path:active{
fill: var(--btncolorlightdark);
}*/



.loading-spinner1 {
  display: inline-block;
  width: 80px;
  height: 80px;
}
.loading-spinner1:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}





/*SET 1*/

/*
.primary{
    color: white;
    background: var(--btncolor);
}

.primary:active{
    color: white;
    background: var(--btncolorlightdark);
}

.primary:hover, .primary:focus{
    color: white;
    background: var(--btncolordark);
}



.secondary{
    color: var(--btncolor);
    background: white;
    border: 1px solid var(--btncolor);
    box-shadow: none;

}

.secondary:active{
    color: white;
    background: var(--btncolorlight);
}

.secondary:hover, .secondary:focus{
    color: white;
    background: var(--btncolor);
}




.tertiary{
    color: var(--btncolor);
    background: white;
    border: 1px solid transparent;
    box-shadow: none;
}

.tertiary:active{
    color: white;
    border: 1px solid var(--btncolorlight);
}

.tertiary:hover, .tertiary:focus{
    color: var(--btncolor);
    border: 1px solid var(--btncolor);
}*/





/*SET 2*/

/*.primary{
    color: white;
    background: var(--btncolor);
    box-shadow: none;

}

.primary:active{
    color: white;
    background: var(--btncolorlightdark);
    box-shadow: none;

}

.primary:hover, .primary:focus{
    color: white;
    background: var(--btncolordark);
    box-shadow: none;

}



.secondary{
    color: black;
    background: #ededed;
    box-shadow: none;
    border: none;
}

.secondary:active{
    color: white;
    background: var(--btncolorlight);
    box-shadow: none;

}

.secondary:hover, .secondary:focus{
    color: white;
    background: var(--btncolor);
    box-shadow: none;

}


.tertiary{
    color: black;
    background: white;
    border: 1px solid #ededed;
    box-shadow: none;
}

.tertiary:active{
    color: black;
    background: #ededed;
    box-shadow: none;

}

.tertiary:hover, .tertiary:focus{
    color: black;
    background: #ededed;
    border: 1px solid #ededed;
    box-shadow: none;

}



.fourth{
    color: black;
    background: white;
    border: 1px solid transparent;
    box-shadow: none;
}

.fourth:active{
    color: black;
    border: 1px solid #ededed;
    box-shadow: none;
}

.fourth:hover, .fourth:focus{
    color: black;
    border: 1px solid #ededed;
    box-shadow: none;
}*/







/*SET 3*/

.btn.cta, .btn.cta:hover{
    box-shadow: var(--box-shadow-button) !important;
}

.btn.cta:active{
    box-shadow: none !important;
}

.primary{
    color: white;
    background: var(--btncolor);
    box-shadow: none;
    border: 1px solid transparent;
}

.primary:active{
    color: white;
    background: var(--btncolorlightdark);
    box-shadow: none;

}

.primary:hover{
    color: white;
    background: var(--btncolordark);
    box-shadow: none;

}


.secondary{
    color: black;
    background: var(--border-color-default);
    box-shadow: none;
    border: 1px solid transparent;
}

.secondary:active{
    color: white;
    background: var(--btncolorlight);
    box-shadow: none;

}

.secondary:hover{
    color: white;
    background: var(--btncolor);
    box-shadow: none;

}


/*.secondary{
    color: black;
    background: white;
    border: 1px solid #ededed;
    box-shadow: none;
}

.secondary:active{
    color: black;
    background: #ededed;
    box-shadow: none;

}

.secondary:hover, .secondary:focus, .secondary:active:focus{
    color: black;
    background: #ededed;
    border: 1px solid #ededed;
    box-shadow: none;
    
}*/



.tertiary{
    color: var(--btncolor-nogradient-op80-black2);
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
}

.tertiary:active{
    color: var(--btncolor-nogradient-op80-black2);
    /*border: 1px solid #ededed;*/
    box-shadow: none;
    background: var(--border-color-default);
}

.tertiary:hover, .tertiary:active{
    color: var(--btncolor);
    /*border: 1px solid #ededed;*/
    box-shadow: none;
    background: var(--body2);
}

.tertiary.right{
    margin-right: -0.825rem;
}

.tertiary.left{
    margin-left: -0.825rem;
}

.btn:focus {
  box-shadow: none;
}

.btn.red{
    color: red;
}

.btn.disabled{
box-shadow: none;
border: 1px solid transparent;
color: var(--fontDark);
cursor: not-allowed;
}

/*#F0F0F0*/