/* ************************
********* CLOCK ***********
*************************** */
.timer-group {
	height: 308px;
	margin: 0 auto;
	position: relative;
	width: 308px;
  }
  
  .timer {
	border-radius: 50%;
	height: 100px;
	overflow: hidden;
	position: absolute;
	width: 100px;
  }
  
  .timer:after {
	background: transparent;
	border-radius: 50%;
	content: "";
	display: block;
	height: 80px;
	left: 10px;
	position: absolute;
	width: 80px;
	top: 10px;
  }
  
  .timer .hand {
	float: left;
	height: 100%;
	overflow: hidden;
	position: relative;
	width: 50%;
  }
  
  .timer .hand span {
	border: 50px solid rgba(0, 255, 255, .4);
	border-bottom-color: transparent;
	border-left-color: transparent;
	border-radius: 50%;
	display: block;
	height: 0;
	position: absolute;
	right: 0;
	top: 0;
	transform: rotate(225deg);
	width: 0;
  }
  
  .timer .hand:first-child {
	transform: rotate(180deg);
  }
  
  .timer .hand span {
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
  }
  
  .timer .hand:first-child span {
	animation-name: spin1;
  }
  
  .timer .hand:last-child span {
	animation-name: spin2; 
  }
  
  .timer.hour {
	background: rgb(0 0 0 / 8%);
	height: 308px;
	left: 0;
	width: 308px;
	top: 0;
  }
  
  .timer.hour .hand span {
	animation-duration: 3600s;
	border-top-color: #b02a37;
	border-right-color: #b02a37;
	border-width: 160px;
  }
  
  .timer.hour:after {
	height: 268px;
	left: 20px;
	width: 268px;
	top: 20px;
  }
  
  .timer.minute {
	background: rgb(0 0 0 / 5%);
	height: 258px;
	left: 25px;
	width: 258px;
	top: 25px;
  }
  
  .timer.minute .hand span {
	animation-duration: 60s;
	border-top-color: #0d6efd;
	border-right-color: #0d6efd;
	border-width: 135px;
  }
  
  .timer.minute:after {
	height: 218px;
	left: 10px;
	width: 218px;
	top: 10px;
  }
  
  .timer.second {
	background: rgba(0, 0, 0, .2);
	height: 210px;
	left: 49px;
	width: 210px;
	top: 49px;
  }
  
  .timer.second .hand span {
	animation-duration: 1s;
	border-top-color: rgba(255, 255, 255, .15);
	border-right-color: rgba(255, 255, 255, .15);
	border-width: 110px;
  }
  
  .timer.second:after {
	height: 204px;
	left: 2px;
	width: 204px;
	top: 2px;
  }
  
  .face {
	background: white;
    border-radius: 50%;
    height: 200px;
    left: 54px;
    position: absolute;
    width: 200px;
    text-align: center;
    top: 54px;
  }
  
  .face h2 {
	font-weight: 300; 
  }
  
  .face span {
	border-radius: 20px;
    font-size: 35px;
    font-weight: 400;
    position: absolute;
    top: 40%;
    width: 180px;
    left: 5%;
  }
  
  @keyframes spin1 {
	0% {
	  transform: rotate(225deg);
	}
	50% {
	  transform: rotate(225deg);
	}
	100% {
	  transform: rotate(405deg);
	}
  }
  
  @keyframes spin2 {
	0% {
	  transform: rotate(225deg);
	}
	50% {
	  transform: rotate(405deg);
	}
	100% {
	  transform: rotate(405deg);
	}
  }


.clock {
	width: calc(19vw + 150px);
	height: calc(19vw + 150px);
	max-width: 320px;
	max-height: 320px;
	margin: 0 auto;
	position: relative;
	border-radius: 100%;
	background: #f8f9fa4a;
	border: 6px solid #212529;
	-webkit-box-shadow: 5px 5px 15px 0px rgb(55 55 55 / 45%);
	-moz-box-shadow: 5px 5px 15px 0px rgb(55 55 55 / 45%);
	box-shadow: 5px 5px 15px 0px rgb(55 55 55 / 45%);
}

.outer-clock-face {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 100%;
	background: transparent;
	background: #fefefc;
	-webkit-box-shadow: inset 5px 5px 15px 0px rgb(55 55 55 / 45%);
	-moz-box-shadow: inset 5px 5px 15px 0px rgb(55 55 55 / 45%);
	box-shadow: inset 5px 5px 15px 0px rgb(55 55 55 / 45%);
	overflow: hidden;
}

.outer-clock-face::after {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	transform: rotate(90deg)
}

.outer-clock-face::before,
.outer-clock-face::after,
.outer-clock-face .marking {
	content: '';
	position: absolute;
	width: 5px;
	height: 100%;
	background: rgb(0 0 0 / 20%);
	z-index: 0;
	left: 49%;
}

.outer-clock-face .marking {
	background: rgba(0, 0, 0, .125);
	width: 3px;
}

.outer-clock-face .marking.marking-one {
	-webkit-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	transform: rotate(30deg)
}

.outer-clock-face .marking.marking-two {
	-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	transform: rotate(60deg)
}

.outer-clock-face .marking.marking-three {
	-webkit-transform: rotate(120deg);
	-moz-transform: rotate(120deg);
	transform: rotate(120deg)
}

.outer-clock-face .marking.marking-four {
	-webkit-transform: rotate(150deg);
	-moz-transform: rotate(150deg);
	transform: rotate(150deg)
}

.inner-clock-face {
	position: absolute;
	top: 10%;
	left: 10%;
	width: 80%;
	height: 80%;
	background: #fefefc;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
	z-index: 1;
}

.hr,
.min,
.sec {
	width: 5px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -100%);
	transform-origin: bottom;
	z-index: 2;
	border-radius: 2em;
}

.pin {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 1em;
	height: 1em;
	border-radius: 100px;
	background: white;
	border: 2px solid #1b1b1b;
	border-radius: 10rem;
	margin: auto;
	z-index: 10;
}

.hr,
.min {
	background-color: #000;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
}

.hr {
	height: 30%;
}

.min {
	height: 35%;
}

.sec {
	height: 45%;
	background-color: #ff4b3e;
	transform-origin: 50% 85%;
}


/* **************************
******** BUTTON ICONS *******
*************************** */
.js-btn.active .mdi-play-circle-outline {
	opacity: 1;
	color: #198754 !important;
}

.js-btn.active .mdi-play-circle-outline:before {
	content: "\F040C";
}

.js-btn.active .mdi-pause-circle-outline {
	opacity: 1;
	color: #0d6efd !important;
}

.js-btn.active .mdi-pause-circle-outline:before {
	content: "\F03E5";
}

.js-btn.active .mdi-stop-circle-outline {
	opacity: 1;
	color: #dc3545 !important;
}

.js-btn.active .mdi-stop-circle-outline:before {
	content: "\F0666";
}

/* **************************
***** NEGATIVE MARGIN *******
*************************** */
.ms-n3 {
	margin-left: -1.2rem;
}

/* **************************
******** TEXT-SIZE **********
*************************** */
.text-xs {
	font-size: 0.875rem;
}

.fw-middle {
	font-weight: 500;
}

/* **************************
******** TEXT-COLOR *********
*************************** */

.text-gray-light {
	color: rgb(0 0 0 / 50%);
}

.text-hover-success:hover,
.text-hover-warning:hover,
.text-hover-danger:hover,
.text-hover-danger:hover,
.text-hover-primary:hover {
	transition: 0.6s;
	opacity: 1;
	cursor: pointer;
}

.text-hover-success:hover {
	color: #198754 !important;
}

.text-hover-warning:hover {
	color: #ffc107 !important;
}

.text-hover-danger:hover {
	color: #dc3545 !important;
}

.text-hover-primary:hover {
	color: #0d6efd !important;
}

.text-hover-black:hover {
	transition: 0.6s;
	color: #000;
}

/* ************************
********* BORDER **********
*************************** */
.border-dashed {
	background-color: unset;
	border-top: dashed 1px rgba(0, 0, 0, .125);
	opacity: 1;
}

.border-dashed-left:after {
	content:"";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 18px;
    height: 100%;
    height: inherit;
	border-left: dashed 1px rgba(0, 0, 0, .125);
}
/* ************************
******* OVERRIDES *********
*************************** */
hr {
	opacity: .15;
}
.bg-light {
	background-color: #f8f9fab5 !important;
}
.z-index-1{
	z-index: 1;
}
.cursor-pointer{
	cursor: pointer;
}

input.cursor-pointer::-webkit-calendar-picker-indicator {
    cursor: pointer;
  }
/* ************************
********* OPACITY ***********
*************************** */
.opacity-0 {
	opacity: 0;
}

.opacity-25 {
	opacity: .25;
}

.opacity-50 {
	opacity: .5;
}

.opacity-75 {
	opacity: .75;
}

.opacity-100 {
	opacity: 1;
}


/* *************************
****** ICON-SIZE ***********
*************************** */
.mdi {
	line-height: 1;
}
.mdi-18 { font-size: 18px; }
.mdi-24 { font-size: 24px; }
.mdi-32 { font-size: 32px; }
.mdi-36 { font-size: 36px; }
.mdi-48 { font-size: 48px; }
/**************************************************/
/* Selectable Font Size For Bootstrap Breakpoints */

@media (min-width:576px) {
	.fs-sm-1 {
		font-size: calc(1.375rem + 1.5vw) !important;
	}

	.fs-sm-2 {
		font-size: calc(1.325rem + .9vw) !important;
	}

	.fs-sm-3 {
		font-size: calc(1.3rem + .6vw) !important;
	}

	.fs-sm-4 {
		font-size: calc(1.275rem + .3vw) !important;
	}

	.fs-sm-5 {
		font-size: 1.25rem !important;
	}

	.fs-sm-6 {
		font-size: 1rem !important;
	}

}

@media (min-width:768px) {
	.accordion-header .lh-sm {
		line-height: 3 !important;
	}

	.fs-md-1 {
		font-size: calc(1.375rem + 1.5vw) !important;
	}

	.fs-md-2 {
		font-size: calc(1.325rem + .9vw) !important;
	}

	.fs-md-3 {
		font-size: calc(1.3rem + .6vw) !important;
	}


	.fs-md-4 {
		font-size: calc(1.275rem + .3vw) !important;
	}


	.fs-md-5 {
		font-size: 1.25rem !important;
	}


	.fs-md-6 {
		font-size: 1rem !important;
	}
}

@media (min-width:992px) {
	.fs-lg-1 {
		font-size: calc(1.375rem + 1.5vw) !important;
	}

	.fs-lg-2 {
		font-size: calc(1.325rem + .9vw) !important;
	}

	.fs-lg-3 {
		font-size: calc(1.3rem + .6vw) !important;
	}


	.fs-lg-4 {
		font-size: calc(1.275rem + .3vw) !important;
	}


	.fs-lg-5 {
		font-size: 1.25rem !important;
	}


	.fs-lg-6 {
		font-size: 1rem !important;
	}
}

@media (min-width:1200px) {
	.fs-xl-1 {
		font-size: calc(1.375rem + 1.5vw) !important;
	}

	.fs-xl-2 {
		font-size: calc(1.325rem + .9vw) !important;
	}

	.fs-xl-3 {
		font-size: calc(1.3rem + .6vw) !important;
	}


	.fs-xl-4 {
		font-size: calc(1.275rem + .3vw) !important;
	}


	.fs-xl-5 {
		font-size: 1.25rem !important;
	}


	.fs-xl-6 {
		font-size: 1rem !important;
	}
}

@media (min-width:1400px) {

	.fs-xxl-1 {
		font-size: calc(1.375rem + 1.5vw) !important;
	}

	.fs-xxl-2 {
		font-size: calc(1.325rem + .9vw) !important;
	}

	.fs-xxl-3 {
		font-size: calc(1.3rem + .6vw) !important;
	}


	.fs-xxl-4 {
		font-size: calc(1.275rem + .3vw) !important;
	}


	.fs-xxl-5 {
		font-size: 1.25rem !important;
	}


	.fs-xxl-6 {
		font-size: 1rem !important;
	}
}

/* Selectable Font Size For Bootstrap Breakpoints */
/**************************************************/