/* ************************
********* CLOCK ***********
*************************** */
.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: -1px -1px 15px 0px rgb(55 55 55 / 45%);
	-moz-box-shadow: -1px -1px 15px 0px rgb(55 55 55 / 45%);
	box-shadow: -1px -1px 15px 0px rgb(55 55 55 / 45%);
}

/************  PROGRESS **************/
/* .clock .timer{
	position: absolute;
    top: 42%;
	left: 0;
    right: 0;
	font-size: 2em;
	width: fit-content;
    padding: 0 10px;
    margin: 0 auto;
	background: #ffffffe3;
    z-index: 10;
} */
.clock-progress{
	width: 100%;
    height: 100%;
    position: absolute;
}
.circular-progress-bg-min{
	left: 2.5%;
    top: 2.5%;
	width: 95%;
	height: 95%;
	position: absolute;
	border-radius: 50%;
	background: white;
	z-index: 2;
}
.circular-progress-min{
	width: 100%;
	height: 100%;
	position: absolute;
	border-radius: 50%;
	z-index: 1;
}
.circular-progress-bg-hour{
	left: 5%;
    top: 5%;
	width: 90%;
	height: 90%;
	position: absolute;
	border-radius: 50%;
	background: white;
	z-index: 3;
}
.circular-progress-hour{
	left: 2.5%;
    top: 2.5%;
	width: 95%;
	height: 95%;
	position: absolute;
	border-radius: 50%;
	z-index: 3;
}

/************  PROGRESS **************/

.outer-clock-face {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 100%;
	background: transparent;
	-webkit-box-shadow: inset -1px 1px 13px 2px rgb(55 55 55 / 45%);
	-moz-box-shadow: inset -1px 1px 13px 2px rgb(55 55 55 / 45%);
	box-shadow: inset -1px 1px 13px 2px rgb(55 55 55 / 45%);
	overflow: hidden;
	z-index: 3;
}

.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: 4;
	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: 5;
}

.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) {
	.accordion-header .lh-sm {
		line-height: 3 !important;
	}
	.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) {
	.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 */
/**************************************************/