/* ************************

********* 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-progress {

	width: 100%;

	height: 100%;

	position: absolute;

}



.circular-progress-bg {

	left: 2.5%;

	top: 2.5%;

	width: 95%;

	height: 95%;

	position: absolute;

	border-radius: 50%;

	background: white;

	z-index: 2;

}



.circular-progress {

	width: 100%;

	height: 100%;

	position: absolute;

	border-radius: 50%;

	z-index: 1;

}



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

*************************** */



input:checked + label i.mdi-play-circle-outline {

	opacity: 1;

	color: #198754 !important;

}



input:checked + label i.mdi-play-circle-outline:before {

	content: "\F040C";

}



input:checked + label i.mdi-pause-circle-outline {

	opacity: 1;

	color: #0d6efd !important;

}



input:checked + label i.mdi-pause-circle-outline:before {

	content: "\F03E5";

}



input:checked + label i.mdi-stop-circle-outline {

	opacity: 1;

	color: #dc3545 !important;

}



input:checked + label i.mdi-stop-circle-outline:before {

	content: "\F0666";

}



.disabled.btn-pause i {

    pointer-events: none;        

	opacity: .4;

}



/* **************************

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

*************************** */

#reminderModalProjectList hr:last-child,
.project-notes hr:last-child{

	display: none;

}

.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 !important;

}



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

/**************************************************/



.project-toggle {

	background-color: #dc3545;

}





.project-toggle:checked {

	background-color: #198754;

}



.project-toggle.paused {

	background-color: #0d6efd;

}



.form-switch .form-check-input {

	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");

}



.btn-add-note:disabled {

	background-color: #C1C1C1!important;

}