@charset "UTF-8";
/**
 * THINKS4 Cascading Style Sheets
 * 
 * 1.00 2017/01/06 M.Nishio 新規作成
 * 
 * @author M.Nishio
 * @since 2017/01/06
 # Rev.001-01 #29380 【本番】医療機関P オーダリングシステムで指示書が出力できない
 */
/** 全体設定 */
html {font-size:14px;}
body {
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Meiryo UI','メイリオ',Verdana,'ＭＳ Ｐゴシック',sans-serif;
	padding-top: 50px;
	padding-bottom: 30px;
	margin-bottom: 40px;
	line-height: 1.42857143;
}
@-ms-viewport {
	width: auto;
}
input::-ms-clear, input::-ms-reveal {
	display:none
}
h1, .h1 {
	font-size: 36px;
}
h2, .h2 {
	font-size: 30px;
}
h3, .h3 {
	margin-top: 10px;
	font-weight: bold;
	font-size: 24px;
}
h4, .h4 {
	font-size: 18px;
}
h5, .h5 {
	font-size: 14px;
}
h6, .h6 {
	font-size: 12px;
}
hr {
	margin-top: 10px;
	margin-bottom: 10px;
	border-color: #ccc;
}
a:not(.btn) {
	text-decoration: underline;
}
a[data-toggle="tab"],
a.list-group-item,
.dropdown-menu > a {
	text-decoration: none;
}
/** セクション設定 */
fieldset {
	margin-top: 15px;
}
legend {
	font-size: 18px;
	margin-bottom: 5px;
	border-bottom: 1px solid #ccc;
}
legend .form-control-plaintext {
	font-size: 18px;
}
legend:before {
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	font-weight: bold;
	text-rendering: auto;
	-webkit-font-mdoothing: antialiased;
	-moz-osx-font-mdoothing: grayscale;
	content: "\f02c";
	margin-right: 2px;
}

/** グループ設定 */
.group-box {
	border: 1px dashed #ccc;
	margin: 5px 0;
	padding: 5px;
}

/** フォーム設定 */
.form-control {
	height: 24px;
	padding: 1px 3px;
}
.form-control-plaintext {
	min-height: 24px;
	padding: 2px 0px;
	vertical-align: middle;
}
.form-control[disabled],
fieldset[disabled] .form-control {
	cursor: default;
}
@media (max-width: 767px) {
	.form-control-plaintext {
		width: auto;
	}
	.form-control,
	.form-control-plaintext,
	.form-check {
		margin-bottom: 8px !important;
	}
	td .form-control {	
		margin-bottom: 0px;
	}
}

/** 必須設定 */
.required:after {
	margin-left: 2px;
	font-size: 12px;
	font-weight: bold;
	content: "必須";
	color: white;
	background-color: red;
	border-radius: 4px;
	padding: 1px 2px;
}

/** 名称ラベル設定 */
.naming-label {
	display: inline-block;
	line-height: 1.42857143;
	padding: 7px 15px;
	font-weight: bold;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	background: #fff;
	border: 3px solid #ff3942;
	border-radius: 6px;
	color: #ff3942;
}

/** フォームラベル設定 */
.col-form-label {
	padding-top: 0;
	padding-bottom: 0;
	font-weight: 700;
}

/** フォームインライン設定 */
@media (min-width: 576px) {
	.form-inline .form-group {
		margin-bottom: 1rem;
		display: block;
	}
	.form-inline .form-check,
	.form-inline label {
		display: inline-flex;
	}
	.form-inline .form-control {
		width: 100%;
		display: block;
	}
}
@media (min-width: 768px) {
	.form-inline .form-group {
		margin: 4px 0px;
		width: 100%;
		display: -ms-flexbox;
		display: flex;
		-ms-flex: 0 0 auto;
		flex: 0 0 auto;
		-ms-flex-flow: row wrap;
		flex-flow: row wrap;
		-ms-flex-align: baseline;
		align-items: baseline;
	}
	.form-inline label {
		display: -ms-flexbox;
		display: flex;
		-ms-flex-align: center;
		align-items: center;
		-ms-flex-pack: center;
		justify-content: flex-start;
	}
	.form-inline .form-control {
		width: auto;
		vertical-align: baseline;
	}
	.form-inline .form-control-plaintext {
		width: auto;
	}
	.form-inline .col-form-label {
		margin: 2px 0px;
		min-width: 120px;
	}
	.form-inline .tab-pane .col-form-label {
		min-width: 110px;
	}
	.form-inline .card .col-form-label {
		min-width: 105px;
	}
	.form-inline .multiple-groups .col-form-label {
		vertical-align: top;
	}
	.form-inline .form-group .inline-control,
	.form-inline .form-group .multiple-rows,
	.form-inline .form-group .form-table {
		display: inline-block;
	}
	.multiple-rows .row {
		margin-bottom: 8px;
	}
	.multiple-rows .row:last-child {
		margin-bottom: 0px;
	}
	.form-inline .form-control.width-full {
		width: 100%;
	}
	.form-inline .form-control.size-full {
		width: 80%;
	}
	.form-inline .form-control.size-xl {
		min-width: 320px;
	}
	.form-inline .tab-pane .form-control.size-xl {
		min-width: 315px;
	}
	.form-inline .card .form-control.size-xl {
		min-width: 310px;
	}
	.form-inline .form-control.size-lg {
		min-width: 170px;
	}
	.form-inline .form-control.size-md {
		max-width: 80px;
	}
	.form-inline .form-control.size-sm {
		max-width: 40px;
	}
}
@media (min-width: 992px) {
	.form-group.multiple-groups {
		margin-bottom: 0px;
	}
}

/** コントロール設定 */
.inline-control input,
.inline-control select,
.inline-control label,
.inline-control div:not(.dropdown-menu),
.inline-control span {
	display: inline-block;
	width: auto;
	margin-bottom: auto;
}
@media (min-width: 576px) {
	.inline-control input.form-control,
	.inline-control select.form-control,
	.inline-control label.form-control,
	.inline-control div.form-control:not(.dropdown-menu),
	.inline-control span.form-control {
		display: inline-block;
		width: auto;
	}
}

/** インプット設定 */
input.form-control.days {
	width: 100px;
}
input.form-control.months {
	width: 75px;
}
input.form-control.tel {
	width: 120px;
}
input.form-control.machine {
	width: 150px;
}
input.form-control.spin {
	min-width: 45px;
	text-align: right;
}
input.form-control.numeric {
	text-align: right;
}
input[type="radio"],
input[type="checkbox"] {
	height: 17px;
	width: 17px;
	margin-top: 2px;
}
input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"].disabled,
input[type="checkbox"].disabled,
fieldset[disabled] input[type="radio"],
fieldset[disabled] input[type="checkbox"] {
	cursor: default;
}

/** プルダウン設定 */
select {
	max-width: 100% !important;
}

/** テキストエリア設定 */
textarea {
/*	resize: none;*/
}

/** セレクト設定 */
.bootstrap-select {
	background-color: transparent;
}
.bootstrap-select .btn {
	padding: 1px 7px 2px 7px;
	height: 24px;
	margin-top: 0px;
}
@media (max-width: 767px) {
	.bootstrap-select .btn {
		margin-top: -2px;
	}
}
.bootstrap-select.btn-group .dropdown-menu > a {
	padding: 3px 7px;
}

/** アイコン設定 */
button i,
a:not(.back-to-top) i,
label i,
div.modal-option i {
	margin-right: 2px;
}

/** ボタン設定 */
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
/*
	-webkit-filter: grayscale(1);
	filter: gray;
	filter: grayscale(1);
*/
	opacity: 1;
	background-color: #a1a1a1;
	border-color: #969696;
	cursor: not-allowed;
}

/** ラベル設定 */
label {
	font-weight: 700;
}

label.has-error,
.has-error label {
	color: red;
}

.has-error .text-muted,
.has-error .col-form-label,
.has-error .radio,
.has-error .checkbox,
.has-error .form-check,
.has-error.radio label,
.has-error.checkbox label,
.has-error.form-check label {
	color: red;
}

.has-error .form-control {
	border-color: red;
}
.has-error .form-control:focus {
	border-color: red;
}
.has-error .input-group-text {
	color: red;
	border-color: red;
}
.has-error .form-control-feedback {
	color: red;
}
.has-error .bootstrap-select .dropdown-toggle,
.error .bootstrap-select .dropdown-toggle {
	border-color: red;
}

/** タブナビ設定 */
.nav-tabs {
	margin-top: 5px;
	border-bottom: none;
}
.nav .nav-item .nav-link {
	padding: 5px 15px;
	border: 1px solid #ddd;
	border-bottom-color: transparent;
}
.nav .nav-item .nav-link.active,
.nav .nav-item .nav-link.active:hover,
.nav .nav-item .nav-link.active:focus {
/*
	background-color: #f3fff3;
*/
	background-color: #e6eff9;
}
.nav-pills .nav-item .nav-link.active,
.nav-pills .nav-item .nav-link.active:hover,
.nav-pills .nav-item .nav-link.active:focus {
	color: #555;
}
.tab-content {
	margin-bottom: 10px;
	padding: 10px;
/*
	background-color: #f3fff3;
*/
	background-color: #e6eff9;
	border: 1px solid #ddd;
	border-radius: 4px;
	border-top-left-radius: 0px;
}

/** 折り返し設定 */
.flap {
	white-space: normal!important;
	word-break: break-all;
}

/** テーブル設定(パネル) */
.card-table {
	margin-bottom: 3px;
}
.card-table .table thead tr th {
	line-height: 20px;
	padding: 3px;
	white-space: nowrap;
}
.card-table .table tbody th,
.card-table .table tbody td {
	padding: 3px;
	vertical-align: middle;
}

/** テーブル設定(Chromeのバグ対策) */
.table-responsive>table, .fixed-table-body>table {
	border: 1px solid #ddd !important;;
}

/** テーブル設定 */
.table-group {
	display: none;
}
.bootstrap-table {
	margin-bottom: 8px;
}
.bootstrap-table .fixed-table-pagination div.pagination,
.bootstrap-table .fixed-table-pagination .pagination-detail {
	margin-top: 0px;
	margin-bottom: 5px;
}
.bootstrap-table .fixed-table-pagination .pagination-detail {
	margin-top: 7px;
}
.bootstrap-table .fixed-table-toolbar .bs-bars {
	margin-top: 0px;
	margin-bottom: -7px;
	line-height: normal;
}
.bootstrap-table .fixed-table-toolbar .bs-bars .table-label {
	margin-bottom: 10px;
}
.bootstrap-table .fixed-table-pagination .pagination-info {
	line-height: normal;
	margin-left: 5px;
}
.bootstrap-table .fixed-table-container {
	background-color: #cceeff;
}
.bootstrap-table .fixed-table-container .table thead th {
	border-right: 1px solid #dddddd;
}
.bootstrap-table .fixed-table-container .table thead th:last-child {
	border-right: none;
}
.bootstrap-table .fixed-table-container .table thead th .th-inner,
.bootstrap-table .fixed-table-container .table tbody td .th-inner {
	line-height: 20px;
	padding: 3px;
	white-space: nowrap;
}
.bootstrap-table .fixed-table-container .table tbody tr.selected td {
	background-color: inherit;
}
.bootstrap-table .fixed-table-container .bs-checkbox {
	min-width: 39px;
}
.bootstrap-table .fixed-table-container .form-control,
.bootstrap-table .fixed-table-container .radio-inline,
.bootstrap-table .fixed-table-container .checkbox-inline {
	margin-bottom: 0px !important;
}
.bootstrap-table .fixed-table-container .radio-inline input[type="radio"],
.bootstrap-table .fixed-table-container .checkbox-inline input[type="checkbox"] {
	margin-top: 2px !important;
	margin-left: -20px !important;
}

.bootstrap-table .fixed-table-border {	
	display: none;
}

.bootstrap-table .table:not(.table-condensed),
.bootstrap-table .table:not(.table-condensed) > tbody > tr > th,
.bootstrap-table .table:not(.table-condensed) > tfoot > tr > th,
.bootstrap-table .table:not(.table-condensed) > thead > tr > td,
.bootstrap-table .table:not(.table-condensed) > tbody > tr > td,
.bootstrap-table .table:not(.table-condensed) > tfoot > tr > td {
	padding: 3px;
	vertical-align: middle;
	white-space: nowrap;
}
.table > thead > tr > th {
	background-color: #cceeff;
}
.table > tbody > tr {
	background-color: #ffffff;
}
.table-striped > tbody > tr:nth-child(odd) {
	background-color: #f9f9f9;
}
.table-striped > tbody > tr:nth-child(even) {
	background-color: #ffffff;
}

/** 位置設定 */
@media (min-width: 768px) {
	.float-md-left {
		float: left !important;
	}
	.float-md-right {
		float: right !important;
	}
	.float-md-center {
		text-align: center !important;
	}
}
@media (min-width: 992px) {
	.float-lg-left {
		float: left !important;
	}
	.float-lg-right {
		float: right !important;
	}
	.float-lg-center {
		text-align: center !important;
	}
}
@media (min-width: 1200px) {
	.float-xl-left {
		float: left !important;
	}
	.float-xl-right {
		float: right !important;
	}
	.float-xl-center {
		text-align: center !important;
	}
}

/** パネル設定 */
.card {
	background-color: transparent;
	margin-bottom: 15px;
}
.card-header {
	padding: 5px 15px;
}
.card-header label {
	margin-bottom: 0px;
	padding: 1px 0px;
}

/** モーダル設定 */
.modal {
	padding-left: 0px !important;
}
.modal.notify {
	z-index: 10011 !important;
}
.modal.notify + .modal-backdrop  {
	z-index: 10010 !important;
}
.modal-body .close {
	position: absolute;
	right: 15px;
}
.modal-footer {
	padding: 5px 15px;
}
.modal-backdrop.fade {
	filter: alpha(opacity=100);
	opacity: 1;
	background-color: rgba(0, 0, 0, 0);
	transition: background-color .15s linear;
}
.modal-backdrop.show {
	filter: alpha(opacity=100);
	opacity: 1;
	background-color: rgba(0, 0, 0, 0.3);
}
.modal-backdrop.in {
	filter: alpha(opacity=100);
	opacity: 1;
	background-color: rgba(0, 0, 0, 0.3);
}
.modal-body .modal-option {
	margin-left: 15px;
	margin-top: 3px;
}
@media (min-width: 768px) {
	.modal-xl {
		width: 691px;
		margin: 30px auto;
	}
}
@media (min-width: 992px) {
	.modal-xl {
		width: 921px;
		margin: 30px auto;
	}
}
@media (min-width: 1200px) {
	.modal-xl {
		width: 1080px;
		margin: 30px auto;
	}
}

/** サイン設定 */
.signature {
	display: inline-block;
	width: 300px;
}
.signature-body {
	width: 100%;
	height: 90px;
	border-radius: 4px;
	border: 1px solid #ddd;
	padding: 3px;
}
.signature-body canvas {
	width: 100%;
	height: 100%;
}
.signature-footer {
	margin-top: 5px;
	width: 100%;
}

/** ナビゲーション設定 */
.navbar-btn {
	margin-top: 12px;
	margin-bottom: 12px;
}
.navbar-btn i {
	margin-right: 0px;
}
@media (min-width: 768px) {
	.navbar .navbar-brand {
		margin-left: 0px;
	}
}
.navi-container .btn {
	margin-top: 8px;
	margin-bottom: 8px;
	margin-left: 3px;
}
.navbar-brand {
	width: 145px;
	height: 19px;
	background: url('../img/logo.png');
	background-size: cover;
	margin: 16px 5px 15px 5px !important;
	padding: 0px;
}
.navbar-environment {
	float: left;
	margin-top: 1px;
	padding: 10px 1px;
}
.navbar-environment span {
	color: white;
	background-color: red;
}
/* NEW!アイコン */
.navbar-new {
	position: relative;
	background: #ff2059;
	border-radius: 4px;
	color: #fff;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	padding: 1px 3px 2px;
	top: 7px;
	left: 142px;
	line-height: 1.5;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	text-decoration: none!important;
}
.navbar-new:hover {
	color: #fff;
	background: #ef0541;
}
.navbar-new:focus {
	color: #fff;
}

/** メニュー設定 */
.side-menu {
	height: 100%;
	width: 0px;
	position: fixed;
	top: 51px;
	bottom: 20px;
	left: 0px;
	z-index: 10;
	background-color: #f8f8f8;
	overflow: hidden;
	border-right: 1px solid #e7e7e7;
	transition: all 300ms 0s ease;
	display: none;
}
.side-menu.open {
	width: 250px;
	overflow-y: auto;
}
.list-group-item {
	border: none;
	border-bottom: 1px solid #e7e7e7;
	margin-bottom: 0px;
	padding: 1px 5px;
	white-space: nowrap;
	line-height: 2;
}

/** フォローメニュー*/
a[data-target="#menuZ00000"],
div[id="menuZ00000"] a {
    background: #91b6c9;
    color: #fff;
    border-radius: 0!important;
}
a[data-target="#menuZ00000"],
div[id="menuZ00000"] a {
    border-bottom: 1px #7ca6ba solid;
}
div[id="menuZ00000"] a:last-child {
    border-bottom: 1px #e7e7e7 solid;
}
a[data-target="#menuZ00000"]:hover,
a[data-target="#menuZ00000"]:focus,
div[id="menuZ00000"] a:hover,
div[id="menuZ00000"] a:focus {
    background: #6499b4cc;
    color: #fff;
    border-radius: 0!important;
}

/** フッター設定 */
.footer {
	position: fixed;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 20px;
	background-color: #f8f8f8;
	z-index: 1030;
	border-top: 1px solid #e7e7e7;
}

/** ローダー設定 */
.loader {
	z-index:10020;
	position:fixed;
	height:100%;
	width:100%;
	top:0;
	left:0;
	background-color: rgba(0, 0, 0, 0.1);
	display: none;
}
.loader > div {
	position:absolute;
	top:50%;
	left:50%;
	-webkit-transform: translateY(-50%) translateX(-50%);
	transform: translateY(-50%) translateX(-50%);
	background-color: rgba(255, 255, 255, 0.7);
	border-radius: 10px;
	text-align: center;
	padding: 10px 5px 5px 5px;
}

/** ヒント設定 */
.hint-content {
	display: none !important;
}
/** ポップオーバー設定  */
.popover-error .popover-body {
	color: red;
}
.popover-contents .popover-body {
	background-color: #333333;
	color: #eeeeee;
}
/** トップへ戻る設定 */
.back-to-top {
	cursor: pointer;
	position: fixed;
	bottom: 30px;
	right: 10px;
	display:none;
	z-index: 1030;
}
.back-to-top.btn-other01 {
	color: rgba(255, 255, 255, 0.7);
	background-color: rgba(153, 204, 255, 0.7);
	border-color: rgba(128, 191, 255, 0.7);
}
.back-to-top.btn-other01:hover {
	color: rgba(255, 255, 255, 0.7);
	background-color: rgba(102, 178, 255, 0.7);
	border-color: rgba(66, 161, 255, 0.7);
}

/** オーダーステータス基本設定 */
ul li.single,
ul li.double {
	display: inline-block;
	width: 15%;
	margin: 0px 25px 0px 0px;
	vertical-align: middle;
	min-height: 66px;
}
ul.travel-status li.single {
	display: inline-block;
	width: 13%;
	margin: 0px 25px 0px 0px;
}
ul li.single:last-child {
	margin: 0;
}
ul li.single:not(.arrow-off)::before,
ul li.double:not(.arrow-off)::before {
	position: absolute;
	width: 0px;
	height: 0px;
	border: 14px solid transparent;
	display: block;
	content: "";
	top: 20px;
	border-left: 10px solid #ececec;
	z-index: 1;
	margin: 0px 0px 0px -18px;
}
.step {
	position: relative;
	margin-top: 10px;
	text-align: center;
	clear: both;
	width: 100%;
}
.double .step {
	margin-top: 5px;
}
.step .order-item {
	margin-bottom: 1px;
	padding-left: 2px;
	line-height: 3.2em;
	text-align: center;
	color: #555;
	font-size: 13px;
	border-radius: 2px;
}
.step.on .order-item {
	color: #fff;
}
.double .order-item {
	line-height: 2em;
}
.step .order-label {
	line-height: 3.2em;
	font-weight: bold;
}
.order-time {
	font-size: 10px;
	text-align: center;
	width: 95px;
	margin-right: auto;
	margin-left: auto;
}
@media (max-width: 767px) {
	ul li.single,
	ul li.double,
	ul.travel-status li.single {
		width: 100%;
		margin: 0px 0px 20px 0px;
	}
	ul li.single:not(.arrow-off)::before,
	ul li.double:not(.arrow-off)::before {
		border: 16px solid transparent;
		border-top: 10px solid #d1e2e2;
		top: auto;
		left: 0px;
		right: 0px;
		margin: -15px auto 0px auto;
	}
	ul li.single.empty {
		display: none;
	}
	.step {
		margin-top: 0px;
	}
	.double .step {
		display: inline-block;
		margin-top: 0px;
		width: 49%;
	}
	.double .clerk {
		float: right;
	}
	.double .order-item {
		line-height: 3.2em;
	}
	.step .order-label {
		line-height: 1.42857143;
	}
}
@media (min-width: 768px) and (max-width: 991px) {
	.order-status .order-time {
		margin-left: -5px;
	}
	.travel-status .order-time {
		margin-left: -3px;
	}
}
/** オーダーステータスパターン設定(医療機関) */
ul.medical .step .order-item {
	background-color: rgba(84, 197, 214, 0.16) !important;
}
ul.medical .step.on .order-item {
	background-color: rgba(84, 197, 214, 1) !important;
}
ul.medical .step1 .order-item::before {content: "医療機関入力"}

/** オーダーステータスパターン設定(営業所) */
ul.office .step .order-item {
	background-color: rgba(131, 234, 87, 0.16) !important;
}
ul.office .step.on .order-item {
	background-color: rgba(131, 234, 87, 1) !important;
}
ul.office .step1 .order-item::before {content: "営業所入力"}

/** オーダーステータスパターン設定(代理店) */
ul.agency .step .order-item {
	background-color: rgba(253, 186, 90, 0.16) !important;
}
ul.agency .step.on .order-item {
	background-color: rgba(253, 186, 90, 1) !important;
}
ul.agency .step1 .order-item::before {content: "代理店入力"}

/** オーダーステータスパターン設定(旅行サービス) */
ul.travel .step .order-item {
	background-color: rgba(84, 197, 214, 0.16) !important;
}
ul.travel .step.on .order-item {
	background-color: rgba(84, 197, 214, 1) !important;
}
ul.travel .step1 .order-item::before {content: "旅行申込入力"}

/** オーダー入力状態 */
.state.step {
	background-color: #ffffff;
	border-radius: 6px;
	min-height: 41px;
	font-weight: 600;
	white-space: pre;
	margin-top: 0px;
}
.state.step.state-margin {
	margin-top: 3px;
}
.state.step.provisional,
.state.step.expired {
	border: 3px solid #ff3942;
	color: #ff3942;
	line-height: 1.4em;
}
.state.step.provisional::before {content: "基本契約\A仮承認"}
.state.step.expired::before {content: "基本契約\A期限切れ"}
.state.step.approved,
.state.step.canceled {
	border: 3px solid #52b6ff;
	color: #52b6ff;
	line-height: 2.8em;
}
.state.step.approved::before {content: "承認済"}
.state.step.canceled::before {content: "取消済"}
@media (max-width: 767px) {
	.state.step {
		margin-top: -10px !important;
	}
	.state.step.double {
		display: inline-block;
		width: 49%;
	}
	.state.step.state-margin {
		margin-top: 0px;
	}
	.state.step.state-right {
		float: right;
	}
}

/** タスクステータス */
.task-status {
	padding: 5px 0px 5px 15px;
	font-size: 12px;
	position: relative;
	float: left;
}
.task-status.status1 {
	padding: 5px 0px 5px 8px;
	z-index: 8;
}
.task-status.status2 {
	z-index: 7;
}
.task-status.status3 {
	z-index: 6;
}
.task-status.status4 {
	z-index: 5;
}
.task-status.status5 {
	z-index: 4;
}
.task-status.status6 {
	z-index: 3;
}
.task-status.status7{
	z-index: 2;
}
.task-status.status8{
	z-index: 1;
}
.task-status::after {
	width: 20px;
	height: 20px;
	display: block;
	content: '';
	position: absolute;
	top: 3px;
	transform: rotate(-45deg);
	z-index: -1;
	border-right: 1px solid #adadad;
	border-bottom: 1px solid #adadad;
	right: -10px;
}

.task-status.gray {
	background: #bbbbbb;
	border-top: #adadad 1px solid;
	border-bottom: #adadad 1px solid;
	border-left: #adadad 1px solid;
}
.task-status.gray::after {background:#bbbbbb;}

.task-status.orange {
	background: #fdba5a;
	border-top: #adadad 1px solid;
	border-bottom: #adadad 1px solid;
	border-left: #adadad 1px solid;
}
.task-status.orange::after {background: #fdba5a;}

.task-status.blue {
	background: #54c5d6;
	border-top: #adadad 1px solid;
	border-bottom: #adadad 1px solid;
	border-left: #adadad 1px solid;
}
.task-status.blue::after {background: #54c5d6;}

.task-status.green {
	background: #83ea57;
	border-top: #adadad 1px solid;
	border-bottom: #adadad 1px solid;
	border-left: #adadad 1px solid;
}
.task-status.green::after {background: #83ea57;}

.task-status.white{
	background: #fff;
	border-top: #adadad 1px solid;
	border-bottom: #adadad 1px solid;
	border-left: #adadad 1px solid;
}
.task-status.white::after {background: #fff;}