/********************
* Body and defaults *
********************/
body {
	font-family: 'Roboto', sans-serif;
	/*font-size: 0.95em;*/
	background-color: #DDD;
}

/* No 'spinner' on number inputs - Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* No 'spinner' on number inputs - Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.form-control {
	border-radius: 0.0rem;
}


/**********
* Sidebar *
**********/
#sidebar-wrapper {
    display: flex;
}

#sidebar {
    width: 250px;
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%;
    z-index: 300;
    background: #222;
    color: #fff;
	transition: 0.5s;
	overflow: hidden;
}

#sidebar-header {
	width: 250px;
	height: 50px;
	background-color: #0093d5; /* #00ada7; */
	padding-left: 18px;
	padding-top: 14px;
	font-size: 1.06em;
	font-weight: 700;
	transition: 0.5s;
	transition-property: width;
	border-bottom: 1px solid #222; /* same as sidebar background color */
}

#sidebar-content {
	font-size: 1em;
}

#sidebar-content a:link, #sidebar-content a:visited, #sidebar-content a:hover {
	text-decoration: none;
	color: #fff;
}

.sidebar-item {
	width: 250px;
	padding-left: 18px;
	padding-bottom: 14px;
	padding-top: 14px;
	border-bottom: 1px solid #444;
	opacity: 0.65;
}

.sidebar-item:hover {
	opacity: 1;
	cursor: pointer;
}

.sidebar-item-active {
	opacity: 1;
}

.sidebar-item img {
	width: 20px;
	margin-top: -3px;
	margin-right: 16px;
}

.sidebar-divider {
	width: 100%;
}


/**********
* Topbar *
**********/

#topbar-mobile {
	display: none;
	position: fixed;
	top: 0px;
	width: 100%;
	height: 40px;
	z-index: 200;
	background-color: #0093d5; /* #00ada7; */
	padding-top: 8px;
	font-size: 1.06em;
	font-weight: 700;
	color: #fff;
	text-align: center;
}

#topbar {
	position: fixed;
	top: 0px;
	left: 250px; /* 250px = sidebar width */
	height: 50px;
	width: calc(100% - 250px); /* 250px = sidebar width */
	background-color: white;
	z-index: 100;
	transition: 0.5s;
	border-bottom: 1px solid #DDD; /* same as body background color */
}

.topbar-button {
	float: left;
	width: 60px;
	height: 100%;
}

.topbar-icon {
	padding: 12px 19px;
	opacity: 0.5;
}

.topbar-icon img {
	width: 20px;
}

.topbar-icon:hover {
	opacity: 0.8;
	cursor: pointer;
}

#topbar-text {
	font-size: 1.2em;
	padding-top: 12px;
	padding-left: 19px;
}

#topbar-time {
	width: 100px;
	height: 100%;
	padding-top: 6px;
	text-align: center;
	font-size: 0.8em;
}


/*************
* Sub topbar *
**************/
#sub-topbar {
	position: fixed;
	top: 50px;
	left: 250px; /* 250px = sidebar width */
	height: 42px; /* Also used in settings.php */
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	width: calc(100% - 250px); /* 250px = sidebar width */
	background-color: white;
	z-index: 100;
	transition: 0.5s;
	border-bottom: 1px solid #DDD; /* same as body background color */
	user-select: none;
}

.sub-topbar-tab, .sub-topbar-tab-selected {
	float: left;
	border-right: 1px solid #DDD; /* same as body background color */
	height: 100%;
	color: #999;
	padding: 9px 24px;
	text-align: center;
	white-space: nowrap;
}

.sub-topbar-tab-selected {
	background-color: #2d5c76;
	color: white;
}

.sub-topbar-tab:hover {
	cursor: pointer;
	color: #222;
}

.sub-topbar-tab-selected:hover {
	cursor: pointer;
}


/*************
* Login page *
**************/
#login-page {
	position: relative;
	min-width: 320px;
}

#login-topbar {
	position: relative;
	height: 50px;
	background-color: #0093d5; /* #00ada7; */
	padding-top: 14px;
	font-size: 1.06em;
	font-weight: 700;
	color: #fff;
	text-align: center;
}

#login-container {
	max-width: 440px;
	margin: 0 auto;
	padding: 50px 20px;
}

#login-box {
	padding: 30px 20px;
	background-color: white;
	border-radius: 6px;
	box-shadow: 4px 4px 10px #888;
}

/* Fixes issue with width of datetimepicker when week numbers are shown */
.bootstrap-datetimepicker-widget.dropdown-menu {
	width: auto !important;
}

.sd-img-invert {
	-webkit-filter: invert(1); /* safari 6.0 - 9.0 */
    filter: invert(1);
}

#sd-page-content {
    position: fixed;
	left: 250px; /* 250px = sidebar width */
	top: 50px; /* 50px = topbar height */
	width: calc(100% - 250px); /* 250px = sidebar width */
	min-width: 320px; /* Determines minimal width for whole site (min-width on body does not work because of bootstrap mediaquery settings) */
    padding: 30px 20px;
    min-height: calc(100% - 50px); /* 50px = topbar height */
    position: absolute;
	transition: 0.5s;
}


.sd-table table, .sd-table-noselect table {
	/* min-width: 1000px; /* table will get it's own horizontal scroll bar */
	font-size: 0.95em;
	border: 1px solid #dee2e6;
}

.sd-table th, .sd-table-noselect th {
	background-color: #ecedee;
	font-size: 0.95em;
}

.sd-table tr:nth-child(even), .sd-table-noselect tr:nth-child(even) { background-color: #f9f9f9; }
.sd-table tr:nth-child(odd), .sd-table-noselect tr:nth-child(odd) { background-color: #ffffff; }

/*
.sd-table tr:nth-child(even):not(.skip-nth-child), .sd-table-noselect tr:nth-child(even):not(.skip-nth-child) { background-color: #f9f9f9; }
.sd-table tr:nth-child(odd):not(.skip-nth-child), .sd-table-noselect tr:nth-child(odd):not(.skip-nth-child) { background-color: #ffffff; }
*/

.sd-table tr:hover {
	background-color: #daecff;
	cursor: pointer;
}

.sd-table th:hover {
	cursor: default;
}


.sd-table th,	
.sd-table td,
.sd-table-noselect th,
.sd-table-noselect td {
	padding: 0.3rem;	/* Same as Bootstrap's table-sm */
}

.sd-table-600px { min-width: 600px !important; }
.sd-table-800px { min-width: 600px !important; }
.sd-table-1000px { min-width: 1000px !important; }
.sd-table-1200px { min-width: 1200px !important; }
.sd-table-1400px { min-width: 1400px !important; }
.sd-table-1600px { min-width: 1600px !important; }

.sd-tr-noselect {
	color: gray;
	pointer-events:none;
}

/*
.sd-asset-children-table { min-width: 1000px !important; }
.sd-asset-tickets-table { min-width: 600px !important; }
.sd-logentries-table { min-width: 600px !important; }
.sd-assetsofthistype-table {  min-width: 1000px !important; }
.sd-asset-list-table { min-width: 1400px !important; }
.sd-asset-type-list-table { min-width: 600px !important; }
.sd-account-list-table { min-width: 1400px !important; }
.sd-location-list-table { min-width: 1400px !important; }
.sd-project-list-table { min-width: 600px !important; }
.sd-ticket-list-table { min-width: 1000px !important; }
*/

.sd-col-sort-icon {
	display: inline-block;
	width: 18px;
	margin-left: 6px;
	margin-right: 4px;
	opacity: 0.2;
	/* Make not selectable */
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
}

.sd-col-sort-icon:hover {
	opacity: 1;
	cursor: pointer;
	filter: invert(0.5) sepia(1) saturate(50) hue-rotate(200deg); /* Make SVG blue */
}

.sd-col-sort-icon-selected {
	display: inline-block;
	width: 18px;
	margin-left: 6px;
	margin-right: 4px;
	opacity: 1;
	filter: invert(0.5) sepia(1) saturate(50) hue-rotate(200deg); /* Make SVG blue */
	/* Make not selectable */
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
}

.sd-col-sort-icon-selected:hover {
	cursor: pointer;
}

.sd-not-selectable {
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
}

.sd-label {
	font-size: 0.9025em; /* Same as sd-table header font size (0.95em * 0.95em) */
	font-weight: 700;
	/* Make not selectable */
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
}

.mandatory::after {
	content: " *";
	color: red;
}

.sd-inline-icon {
	display: inline-block;
	width: 18px;
	opacity: 0.5;
	/* Make not selectable */
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
}

.sd-inline-icon:hover {
	opacity: 0.8;
	cursor: pointer;
}

.sd-inline-icon img {
	margin-top: -4px;
}

.sd-input {
	font-size: 0.95em;
}

.sd-textarea {
	font-size: 0.95em;
	min-height: 200px;
 	resize: none;
	overflow-y: hidden;
}

.sd-btn, .sd-btn-group > .btn {
	padding: 0.35rem 0.6rem;
	font-size: 0.95rem;
	line-height: 1.5;
	border-radius: 0.2rem;
}

.sd-btn-inline {
	padding-top: 31px;
	padding-bottom: 10px;
}

.sd-btn-below {
	padding-top: 12px;
	padding-bottom: 16px;
}

.sd-hoverpointer:hover {
	cursor: pointer;
}

.sd-openclose {
	display: inline-block;
	height: 20px;
	width: 20px;
	transition: 0.25s;
	transform: rotate(0deg);
	cursor: pointer;
}

.sd-openclose img {
	filter: invert(0.5) sepia(1) saturate(50) hue-rotate(200deg); /* Make SVG blue */
	-webkit-filter: invert(0.5) sepia(1) saturate(50) hue-rotate(200deg); /* Make SVG blue on safari 6.0 - 9.0 */
	margin-top: -2px;
	transition: 0.25s;
}

.sd-number-up-down {
	background-color: #e9ecef;
	border: 1px solid #ced4da;
	border-radius: 0 0.25rem 0.25rem 0; /* top left, top right, bottom right, bottom left */
	width: 22px;
}

.sd-number-up-down img {
	height: 100%; 
	margin-bottom: 10px;
	margin-left: 2px;
}

.sd-number-up-arrow {
	position: absolute; /* I give up trying to get this div to stack on top of the down arrow */
	top: 0px;
	height: 50%;
	width: 21px; 
	border-bottom: 1px solid #ced4da;
}
.sd-number-up-arrow:hover, .sd-number-down-arrow:hover {
	cursor: pointer;
}

.sd-number-down-arrow {
	position: absolute; /* I give up trying to get this div to stack below the up arrow */
	bottom: 0px;
	height: 50%;
	width: 21px; 
	border-top: 1px solid #ced4da;
}

.sd-small-label {
	font-size: 0.95em;
	font-weight: bold;
	margin-bottom: 2px;
	color: #212529 !important;
}



/*
.sd-inline-icon img {
	width: 20px;
}

.sd-inline-icon:hover {
	cursor: pointer;
}
*/

.sd-zeroheight {
	transition: 0.5s;
	overflow-y: hidden;
	max-height: 0px;
}

.sd-remarks-datetime {
	display: inline-block;
	margin-left: 10px;
	font-size: 0.9025em; /* Same as sd-label */
}

.sd-remarks-datetime:hover {
	cursor: pointer;
	color: #087bff;
}

.sd-inline-checkbox {
	display:inline-block;
	margin-left:40px;
}

.sd-filter-result-text {
	font-size: 0.95em;
	margin-bottom: 8px;
	color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
	width: 100%;
	padding-top: 2px;
	padding-left: 4px;
}

.sd-asset-details-in-ticket-text {
	font-size: 0.95em;
	margin-bottom: 10px;
	margin-left: 2px;
}

.sd-attachments-div {
	border: 1px solid #ced4da;
	height: auto;
	width: 100%;
}

.sd-attachments-div-disabled {
	border: 1px solid #ced4da;
	background-color: #e9ecef;
	height: auto;
	width: 100%;
}

.sd-checkbox {
	padding-left: 0rem;
	padding-top: 8px;
	padding-bottom: 8px;
}

.sd-check {
	display: inline-block;
	width: 20px;
	margin-left: 2px;
	margin-right: 4px;
	opacity: 1;
	filter: invert(0.5) sepia(1) saturate(50) hue-rotate(100deg); /* Make SVG blue */
	/* Make not selectable */
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
}

#attachments.highlight {
 	border: 1px solid green;
}

.attachment-item {
    position: relative;
	vertical-align: top;
    display: inline-block;
	font-size: 0.9em;
	color: #6c757d;
    text-align: center;
    width: 120px;
	margin: 10px 5px 5px 0px;
}

.attachment-item:hover {
	cursor: pointer;
}

.attachment-button {
	display: none;
	position: absolute;
	left: 48px;
	top: 24px;
}

.attachment-caption {
    display: block;
	font-size: 0.9em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#advanced-filter-container {
	display: block;
	background-color: white; /* #f9f9f9; */
	margin-bottom: 15px;
	font-size: 0.95em;
	border: 1px solid #dee2e6;
	border-radius: 0.25rem;
}

#advanced-filter-head {
	display: block;
	width: 100%;
	background-color: #ecedee;
	top: 0px;
	padding: 0.3rem;
	font-weight: bold;
}

.datetimepicker-icon {
	position: relative;
	top: 1px;
	display: inline-block;
	width: 20px;
	height: 20px;
}

.sidebar-item-count {
	display: inline-block;
	margin-left: 4px;
	width: 20px;
	height: 20px;
	line-height: 22px;
	border-radius: 50%;
	font-size: 12px;
	color: white;
	text-align: center;
	background-color: red;
	padding-right: 1px;
}

.info-circle {
	display: inline-block;
	margin-left: 6px;
	width: 16px;
	height: 16px;
	line-height: 18px;
	border-radius: 50%;
	font-size: 12px;
	color: white;
	font-weight: bold;
	text-align: center;
	background-color: #0093d5;
	/*padding-right: 1px; */
}

.datetimepicker-icon-time 			{ background-image: url('/images/time-line.svg'); opacity: 0.8; } /*arrow-right-s-line*/
.datetimepicker-icon-calendar 		{ background-image: url('/images/calendar-2-line.svg'); opacity: 0.8; }
.datetimepicker-icon-chevron-up 	{ background-image: url('/images/arrow-up-s-line.svg'); }
.datetimepicker-icon-chevron-down 	{ background-image: url('/images/arrow-down-s-line.svg'); }
.datetimepicker-icon-chevron-left 	{ background-image: url('/images/arrow-left-s-line.svg'); }
.datetimepicker-icon-chevron-right 	{ background-image: url('/images/arrow-right-s-line.svg'); }
.datetimepicker-icon-screenshot 	{ background-image: url('/images/focus-3-line.svg'); }
.datetimepicker-icon-trash 			{ background-image: url('/images/delete-bin-6-line.svg'); }
.datetimepicker-icon-remove			{ background-image: url('/images/close-line.svg'); }

/* New for teamplanner */
.isclickable:hover { cursor: pointer;; }
label { white-space: nowrap; }


.week-number-row { 
	background-color: #0093d5;
	color: white;
	font-weight: 700;
}
.week-number-row-selectable { 
	background-color: white;
	color: black;
	font-weight: 700;
	border-bottom: 1px solid black;
}
/*td.week-number-row, td.week-number-row-selectable { vertical-align: bottom; }*/
.week-number-row:hover { cursor: default; }
.week-number-row-selectable:hover { background-color: #daecff; cursor: pointer; }

.day-date-row {
	border-bottom: 1px solid black;
	font-weight: bold;
}

.non-selectable-row { background-color: white; }
.non-selectable-row:hover { cursor: default; }

.tiny-button {
	display: inline-block;
 	padding: 0.25rem 0.5rem;
	margin: 0;
    font-family: inherit;
	font-size: .875rem;
    font-weight: 400;
	text-align: center;
    vertical-align: middle;
	color: #212529;
    line-height: 1;
    background-color: #f1f2f3;
    /*border-color: #f8f9fa;*/
	border-radius: 0.2rem;
	border: 1px solid transparent;
	user-select: none;
	/*transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
	text-transform: none;*/
	-webkit-appearance: button;
}

.tiny-button:not([disabled]):hover {
	color: #212529;
    background-color: #d2d6da;
    border-color: #dae0e5;
}

.tiny-button:disabled, .tiny-button.disabled {
  opacity: 0.65;
}


.medium-text {
	font-size: 0.95em;
}

#close-week-details-container {
	display: block;
	background-color: white; /* #f9f9f9; */
	margin-bottom: 15px;
	/*font-size: 0.95em;*/
	border: 1px solid #dee2e6;
	border-radius: 0.25rem;
}

#export-details-container {
	display: block;
	background-color: white; /* #f9f9f9; */
	margin-bottom: 15px;
	/*font-size: 0.95em;*/
	border: 1px solid #dee2e6;
	border-radius: 0.25rem;
	padding: 0px;
}


#close-week-details-head, #export-details-head {
	display: block;
	width: 100%;
	background-color: #ecedee;
	top: 0px;
	padding: 0.3rem;
	font-weight: bold;
}

.week-closed-text-color {
	color: #999; /* grey */
}

.selectableTD:hover {
	background-color: #c4d9f0;
}

.clickable-text:hover {
	cursor: pointer;
}

#full-page-overlay {
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: 900;
	/*cursor: not-allowed;*/
	background-color: rgba(0,0,0,0.4);
}

#email-edit-container {
	position: fixed;
	display: none;
	width: 1000px;
	height: 750px;
	top: calc(50% - 400px);
	left: calc(50% - 500px);
	background-color: white; /* Black background with opacity */
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
	z-index: 910;
}

#email-edit-head {
	display: block;
	width: 100%;
	height: 40px;
	/*background-color: #ecedee; */
	background-color: #0093d5;
	color: white;
	font-weight: 700;
	padding-left: 8px;
	padding-top: 9px;
}

/*
@-webkit-keyframes flash-background-anim {
    0% {
        background-color: #e9ecef;
    }
	25% {
		background-color: White;
	}
    100% {
        background-color: #e9ecef;
    }
}
    
.flash-background-anim {
    -webkit-animation-name: flash-background-anim;
    -webkit-animation-duration: 750ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
}    
*/

/* Status text colors */
.status-open { color: #999; } /* grey */
.status-accepted { color: #090; } /* green */
.status-approved { color: #090; } /* green */
.status-declined { color: #AF0000; } /* dark red */
.status-planning-issue { color: #FF6600; } /* orange */ 
.status-new { color: #004FE0; } /* blue */

/* General text colors */
.text-grey { color: #999; }
.text-green { color: #090; }
.text-red { color: #AF0000; }
.text-orange { color: #FF6600; }
.text-blue { color: #004FE0; }

/* To be deleted item */
.item-marked-for-deletion {
	color: #004FE0;
	text-decoration: line-through;
}

/* New (or changed) item */
.item-new {
	color: #004FE0;
}

/* Employee dashboard */
.employee-layout-row { display: table-row; }
.employee-layout-col { display: table-cell; }
.employee-dashboard-greeting { font-size: 1.3em; }

/* Employee planning details */
.employee-planning-details-textbox {
	/* Mostly a copy of bootstrap.css -> form-control */
	font-size: 0.95em;
	display: block;
	width: 100%;
	padding: 0.375rem 0.75rem;
	font-weight: 400;
	line-height: 1.5;
	/*color: #495057;*/ 
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ced4da;
}

.employee-off-time-details-textbox {
	/* Mostly a copy of bootstrap.css -> form-control */
	font-size: 0.95em;
	display: block;
	width: 100%;
	padding: 0.375rem 0.75rem;
	font-weight: 400;
	line-height: 1.5;
	/*color: #495057;*/ 
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid #ced4da;
}

.employee-off-time-details-checkbox {
	display:inline-block;
	/*margin-left:10px;*/
}

/* External partner pages */
.external-partner-layout-row { display: table-row; }
.external-partner-layout-col { display: table-cell; }