.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{
    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);
}

#program-list-btnContainer .listBtn{
padding: 0.15rem 1rem;
}

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

.listBtn:active{
background: #ededed;
}

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

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

.listBtn .col{
    padding: 0;
}

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

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




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

.addIcon::before, .listViewIcon::before, .saveIcon::before, .cancelIcon::before, .duplicateIcon::before, .infoIcon::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
{
        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";
}

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

.deleteIcon::before{
   content: "\f1f8";
}

.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: 1rem;
}

.linkIcon::before{
    content: "\f0c1";
    margin: 0;
    font-size: 1rem;
}

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

.listBtnPictureIcon{
margin-right: var(--border-padding);
height: 40px;
border-radius: 50px;
width: 40px;
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;
  display: inline-block;
  position: absolute;
  cursor: pointer;
}

#newProgramDataContainer .deleteBtn,
#editProgramDataContainer .deleteBtn {
  right: 1rem !important;
  z-index: 99;
}

.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;
}



/*.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;
}




.btn{
    border-radius: 0.25rem;
    display: inline-flex;
place-items: center;
/*padding: .625rem 1rem .5rem;*/
padding: 0.5rem 0.825rem;
}

/*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*/


.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, .primary:focus, .primary:active: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;

}


/*.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);
    background: white;
    border: 1px solid transparent;
    box-shadow: none;
}

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

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



/*#F0F0F0*/