.content {
    margin: 20px;
    text-align: center;
}

.alert {
    max-width: 50%;
    margin-top: -35px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 12px;
    border-radius: 3px;
    font-size: 1.6rem;
    border-width: 2px;
    border-style: solid;
    text-align: center;
}

.alert-error {
    border-color: darkred !important;
    color: white !important;
    font-size: small !important;
    border-color: rgba(255, 0, 0, .4) !important;
    background-color: #e0dfda !important;
    color: red !important;
}

.alert-info {
    border-color: #0abf53 !important;
    background-color: #0abf53 !important;
    opacity: 0.75 !important;
    color: black !important;
    font-size: small !important;
    border-color: rgba(10, 191, 83, .4) !important;
    background-color: #ededf5 !important;
    color: #0abf53 !important;
}

/* New navbar */
#container {
    width: 100% !important;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.navbar {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0px;
}

.navbar img {
    background-color: white;
    border-radius: 10px;
}

nav a:hover {
    text-decoration: underline;
}


.nav-item a {
    color: white !important;
    /*font-family: "Lucida Console", "Courier New", monospace;*/
}

body.offcanvas-active {
    overflow: hidden;
}

img {
    padding: 5px;
}


.offcanvas-header {
    display: none;
}

/* ============ mobile view ============ */
@media all and (max-width: 991px) {

    .offcanvas-header {
        display: block;
    }

    .mobile-offcanvas {
        visibility: hidden;
        transform: translateX(-100%);
        border-radius: 0;
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        z-index: 1200;
        width: 80%;
        overflow-y: scroll;
        overflow-x: hidden;
        transition: visibility .3s ease-in-out, transform .3s ease-in-out;
    }

    .mobile-offcanvas.show {
        visibility: visible;
        transform: translateX(0);
    }

    .mobile-offcanvas .container, .mobile-offcanvas .container-fluid {
        display: block;
    }

}

/* ============ mobile view .end// ============ */
li.active > a {
    border-bottom: 1px solid white;
}

/* end navbar */


/* Table stuff employees */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

body {
    font-family: 'Open Sans', sans-serif
}

.green {
    color: green
}

/* form validation hour registration */
input[type="time"]:valid {
    color: green;
}

input[type="time"]:valid ~ .input-validation::before {
    content: "✓";
    color: green;
}

input[type="time"]:invalid {
    color: red;
}

/* Success mark hour registration */
.success-animation {
    margin: 150px auto;
}

.checkmark {
    width: 20%;
    height: 20%;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #4bb71b;
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px #4bb71b;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
    position: relative;
    top: 5px;
    right: 5px;
    margin: 0 auto;
}

.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #4bb71b;
    fill: #fff;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;

}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes scale {
    0%, 100% {
        transform: none;
    }

    50% {
        transform: scale3d(1.1, 1.1, 1);
    }
}

@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 30px #4bb71b;
    }
}

/* Employee registration */
.mb-1 {
    content: "*";
    color: red;
    display: inline;
}

.mb-0 {
    display: inline;
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border: 0 solid transparent;
    border-radius: .25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 6px 0 rgb(218 218 253 / 65%), 0 2px 6px 0 rgb(206 206 238 / 54%);
    background-color: #FDFDFD;
}

.me-2 {
    margin-right: .5rem !important;
}

.iti__flag {
    background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.15/img/flags.png");
}


@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .iti__flag {
        background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.15/img/flags@2x.png");
    }
}

/*textarea:focus, input:focus {*/
/*    outline: none;*/
/*}*/


/* Timepicker hour registration */
.md-timepicker {
    background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg width='20px' height='20px' viewBox='0 0 20 20' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch --%3E%3Ctitle%3Ebaseline-schedule-24px%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='baseline-schedule-24px' transform='translate(-2.000000, -2.000000)'%3E%3Cpath d='M11.99,2 C6.47,2 2,6.48 2,12 C2,17.52 6.47,22 11.99,22 C17.52,22 22,17.52 22,12 C22,6.48 17.52,2 11.99,2 Z M12,20 C7.58,20 4,16.42 4,12 C4,7.58 7.58,4 12,4 C16.42,4 20,7.58 20,12 C20,16.42 16.42,20 12,20 Z' id='Shape' fill='%239B9B9B' fill-rule='nonzero'%3E%3C/path%3E%3Cpolygon id='Shape' points='0 0 24 0 24 24 0 24'%3E%3C/polygon%3E%3Cpolygon id='Shape' fill='%239B9B9B' fill-rule='nonzero' points='12.5 7 11 7 11 13 16.25 16.15 17 14.92 12.5 12.25'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat;
}

input.timepicker {
    font-size: 16px;
    padding: 0 0 .5em 0;
    width: 100px;
    border: none;
    border-bottom: 1px solid #d8d8d8;
    transition: border-color .5s ease-out;
    margin-left: 30px;
}

/*input:focus {*/
/*    border-bottom: 2px solid #0369b1;*/
/*}*/


.search-icon {
    float: right;
    margin-right: 6px;
    margin-top: -27px;
    position: relative;
    z-index: 2;
}

.searchbar {
    margin: 10px;
}

/**
 * Error color for the validation plugin
 */

.error {
    color: #e74c3c;
  position: relative;
  animation: shake .1s linear;
  animation-iteration-count: 3;
  border: 1px solid red;
  outline: none;
}

@keyframes shake {
  0% {
    left: -5px;
  }
  100% {
    right: -5px;
  }
}

svg {
    color: blue;
}

.intl-tel-input {
    display: table-cell;
}

.intl-tel-input .selected-flag {
    z-index: 4;
}

.intl-tel-input .country-list {
    z-index: 5;
}

/*.input-group .intl-tel-input .form-control {*/
/*    border-top-left-radius: 4px;*/
/*    border-top-right-radius: 0;*/
/*    border-bottom-left-radius: 4px;*/
/*    border-bottom-right-radius: 0;*/
/*}*/

/* Extra spinner for loading */

#loading_spinner {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 3px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    border-top-color: blue;
    animation: spin 1s ease-in-out infinite;
    -webkit-animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to {
        -webkit-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    to {
        -webkit-transform: rotate(360deg);
    }
}

/* Availability calendar */
.calendar {
    width: 400px;
    min-height: 300px;
    border: 1px solid #666;
    background-color: #888888;
    border-radius: 25px;
}

.headline {
    padding: 10px 0;
    text-align: center;
    position: relative;
    color: #555;
    border-bottom: 1px solid #bbb;
}
.month {
}

.divider {
    color: #ad0;
}

.year {
    color: #bbb;
}

.click-left,
.click-right {
    cursor: pointer;
    position: absolute;
}

.click-left {
    left: 5px;
}

.click-right {
    right: 5px;
}



.weekdays,
.days {
    text-align: center;
    margin: 0 auto;
}

.weekdays * {
    width: 40px;
    margin: 10px 6px;
    color: #bbb;
    display: inline-block;
}

.date {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #222;
/ / Hack to prevent 1 px offset animation margin: 2 px 8 px;
    color: #bbb;

}
.out-of-scope {
    color: #555;
}

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
}



.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #04abeb !important;
    border-color: #04abeb !important;
}

.bg-primary {
    background-color: #222222 !important;
}

.dropdown-menu {
    background-color: #222222;
    color: #222222;
}
 .dropdown-item:hover {
    background-color: #888888;
     display:block;
}
.ui-corner-all {
    background: #222222;
}

.chart-container {
  margin: auto;
}

li {
    list-style-type: none;
}




/* Timeline availability */
.timeline {
	list-style-type: none;
	display: flex;
	justify-content: center;
	padding-top: 45px;
	padding-left: 0;
	width: 100%;
}

.timeline li {
	transition: all 200ms ease-in;
	width: 100%;
}

.timeline .status {
	padding: 0px 40px;
	display: flex;
	justify-content: center;
	border-top: 2px solid orange;
	position: relative;
	transition: all 200ms ease-in;
}
.timeline .status label {
	font-weight: 600;
	margin-top: 1rem;
	text-align: center;
}
.timeline .status:before {
	content: "";
	width: 25px;
	height: 25px;
	background-color: orange;
	text-align: center;
	border-radius: 25px;
	border: 1px solid orange;
	position: absolute;
	top: -15px;
	transition: all 200ms ease-in;
}

.timeline li.complete .status {
	border-top: 2px solid green;
}
.timeline li.complete .status:before {
	background-color: green;
	border: none;
	transition: all 200ms ease-in;
}
.timeline li.complete .status label {
	color: green;
}

@media (max-width: 768px) {
	.timeline .status:before {
		content: "";
		width: 25px;
		height: 25px;
		background-color: white;
		border-radius: 25px;
		border: 1px solid #ddd;
		position: absolute;
		top: 25%;
		left: -13px;
	}
	.timeline .status {
		padding: 0px 40px;
		display: flex;
		justify-content: flex-start;
		border-top: none;
		border-left: 2px solid #d6dce0;
		position: relative;
		transition: all 200ms ease-in;
	}
	.timeline li.complete .status {
		border-top: none;
		border-left: 2px solid green;
	}
	.timeline {
		list-style-type: none;
		display: block;
		justify-content: center;
		padding-top: 20px;
		padding-left: 40px;
		width: 100%;
	}
}

.timeline .status.clickable label {
	cursor: pointer;
}
.timeline .status.clickable:before {
	cursor: pointer;
}

.btn-close {
    background-color:white;
}

/*$(".timeline .status").on("click", function() {*/
/*	let parent = $(this).closest("li");*/
/*	let element = $(this);*/
/*	$(".timeline li").removeClass("complete");*/
/*	parent.addClass("complete");*/
/*	parent.prevAll("li").addClass("complete");*/
/*});*/

/* hour registraiton page */
.selectize-input.not-full > input {
    width: 100% !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  background: #04abeb !important;
  color: white;
  border-radius: 6px;
    margin:100px;
    padding:10px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: blue;
    color: black !important;
    border-radius: 6px;
    margin: 100px;
    padding: 10px;
}

.currencyinput {
    border: 1px inset #ccc;
}
.currencyinput input {
    border: 0;
}

.valuePadding {
  border: 1px inset #ccc;
}
.valuePadding input {
  padding:0;
}


.tooltip-inner {
    max-width: 300px; /* Adjust width */
    text-align: left; /* Align text */
    background-color: #f8f9fa; /* Light background */
    color: #212529; /* Dark text */
}

.table-sm {
    font-size: 12px; /* Smaller font */
}