@charset "utf-8";



* { box-sizing: border-box; }

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	border: 0;
	font: inherit;
	font-size: 100%;
	margin: 0;
	padding: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, main, nav, section { display: block; }
body {
	background-color: #f0f0f0;/*#e2e2e2;*/
	color: #444;/*#6b6b6b;*/
	-webkit-font-smoothing: subpixel–antialiased;
	-moz-osx-font-smoothing: auto;
	line-height: 1.3;
	text-rendering: optimizeLegibility;
}
ol, ul, ol li, ul li { list-style: none; }
table {
	border-collapse: collapse;
	border-spacing: 0;
}
html {
	font-size: 14px;
	font-weight: 400;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}
html, body { height: 100%; }
p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl { clear: none; }
img {
	border: none;
	height: auto;
	-ms-interpolation-mode: bicubic;
	line-height: 1;
	margin: 0;
	overflow: hidden;
	padding: 0;
	vertical-align: bottom;
	max-width: 100%;
}
a:link, a:visited {
	color: #4e6adb;
	text-decoration: none;
	transition: color 0.2s;
}
a:hover, a:active { color: #f90; }
a:focus { outline: none; }

a img { transition: opacity 0.2s; }
a:hover img { opacity: 0.6; }





/* フォント -------------------------------------------------------------------------------------*/
body,
input,
textarea,
select,
.error .error-balloon { font-family: "游ゴシック", "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }

#mypage .cube .value,
#mypage .box .value,
.num,
.num input { font-family: Arial, Helvetica, sans-serif; }










/* フォーム -------------------------------------------------------------------------------------*/
.item .label {
	display: inline-block;
	font-size: 1rem;
	line-height: 1.2;
	margin-top: 7px;
	text-align: right;
	vertical-align: top;
}
.item .value {
	display: inline-block;
	margin-left: 8px;
	vertical-align: top;
	width: 200px;
}
.item.but input {
	border-radius: 3px 0 0 3px;
	display: block;
	float: left;
	vertical-align: middle;
	width: 172px;
}
.item.but a {
	background-color: #fff;
	border-top: solid 1px #fff;
	border-right: solid 1px #fff;
	border-bottom: solid 1px #fff;
	border-radius: 0 3px 3px 0;
	display: block;
	height: 28px;
	float: left;
	vertical-align: middle;
	width: 28px;
}

label,
input,
textarea,
select {
	-webkit-appearance: none;
	-moz-appearance: none;
	border-radius: 0;
	font-size: 1rem;
}

input[type="text"],
input[type="password"] {
	border: solid 1px #fff;
	border-radius: 3px;
	height: 28px;
	padding: 0 5px;
	width: 100%;
}
textarea {
	border: none;
	padding: 8px;
}
::-webkit-input-placeholder { color: #c2c2c2; }
::-moz-placeholder { color: #c2c2c2; }
:-ms-input-placeholder { color: #c2c2c2; }

/* リストボックス */
.select select {
	-moz-appearance: none;
	-webkit-appearance: none;
	-o-appearance: none;
	-ms-appearance: none;
	appearance: none;
	background: none transparent;
	border: 0;
	border-radius: 0;
	box-sizing: content-box;
	color: inherit;
	font-size: inherit;
	padding: 0;
	vertical-align: middle;
}
.select {
	background-color: #fff;
	border: solid 1px #fff;
	border-radius: 3px;
	display: inline-block;
	*display: inline;
	height: 28px;
	margin-left: 1px;
	overflow: hidden;
	/* padding-top: 2px; */
	position: relative;
	vertical-align: middle;
	*zoom: 1;
}
.select select {
	color: #000;
	font-size: 1rem;
	width: calc(100% - 20px);
	height: 100%;
	padding: 0 20px 0 3px;
	min-width: 60px;
}
.select:after {
	background: url(../../images/form_select_arrow.png) no-repeat center;
	background-size: 20px 30px;
	content: "";
	display: block;
	pointer-events: none;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 20px;
}

/* チェックボックス、ラジオボタン */
input[type="radio"],
input[type="checkbox"] { /*display: none;*/
	position: absolute;
	opacity: 0;
}
.radio,
.checkbox {
	cursor: pointer;
	font-size: 1rem;
	height: 28px;
	line-height: 28px;
	padding-left: 25px;
	position: relative;
	z-index: 0;
}
.radio:after,
.checkbox:after {
	background-color: #fff;
	border: solid 1px #fff;
	content: "";
	display: block;
	height: 14px;
	position: absolute;
	top: 3px;
	left: 0;
	width: 14px;
	z-index: 1;
}
.radio:after { border-radius: 50%; }
.radio:before {
	background-color: #4e6adb;
	border-radius: 50%;
	content: "";
	display: block;
	height: 8px;
	opacity: 0;
	position: absolute;
	top: 7px;
	left: 4px;
	width: 8px;
	z-index: 2;
}
input[type="radio"]:checked + .radio:before { opacity: 1; }
.checkbox:before {
	border-right: 3px solid #4e6adb;
	border-bottom: 3px solid #4e6adb;
	display: block;
	content: "";
	height: 8px;
	opacity: 0;
	position: absolute;
	top: 1px;
	left: 4px;
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	width: 5px;
	z-index: 2;
}
input[type="checkbox"]:checked + .checkbox:before { opacity: 1; }


/* 必須 */
.item.required .label { color: #1543b5 !important; }
.required input[type="text"],
.required input[type="password"],
.required .select,
.required .radio:after,
.required .checkbox:after,
.item.but.required a { border-color: #648fc8 !important; }

/* 読み取り専用 */
.item.but.readonly a,
.readonly input[type="text"],
.readonly input[type="password"],
.readonly textarea {
	background-color: #f0f0f0;
	border-color: #f0f0f0;
}

/* 入力不可 */
.item.but.disabled a,
.disabled input[type="text"],
.disabled input[type="password"],
.disabled textarea {
	background-color: #f0f0f0;
	border-color: #f0f0f0;
	color: #999;
}

.item.readonly a:hover,
.item.disabled a:hover { cursor: default; }
.item.readonly a:hover img,
.item.disabled a:hover img { opacity: 1; }


/* 変更時*/
.item.mod .label { color: #ff9400; }
.mod input[type="text"],
.mod input[type="password"],
.mod .select,
.mod .radio:after,
.mod .checkbox:after,
.item.but.mod a {
    background-color: #ff9400;
    color: #fff; }
.mod .mod-text {
    color: #ff9400;
    display: block;
    padding-top: 3px;
}

/* エラー */
.item.error .label { color: #ff1d25 !important; }
.error input[type="text"],
.error input[type="password"],
.error .select,
.error .radio:after,
.error .checkbox:after,
.item.but.error a { border-color: #ff1d25 !important; }
.error .error-text {
	color: #ff1d25;
	display: block;
	padding-top: 3px;
}
.error .error-balloon {
	background-color: rgba(255, 29, 37, 0.8);
	border-radius: 3px;
	color: #fff;
	display: none;
	font-size: 0.857rem;
	font-weight: 600;
	padding: 5px;
	position: fixed;
	text-align: justify;
}
.error .error-balloon.balloon-show { display: block; }





/* 共通 -----------------------------------------------------------------------------------------*/
.hidden {
    display: none;
}
/* ボタン ---------------------------------------------------------------------------------------*/
.button a {
	background: linear-gradient(0deg, rgba(234, 234, 234, 1) 29%, rgba(255, 255, 255, 1) 100%);
	border: solid 1px #b2b2b2;
	border-radius: 3px;
	color: #6b6b6b;
	display: block;
	text-align: center;
}
.button a:hover,
.button a:focus { background: linear-gradient(0deg, rgba(204, 204, 204, 1) 29%, rgba(240, 240, 240, 1) 100%); }
.button a img {
	margin-right: 5px;
	opacity: 1;
	vertical-align: middle;
}
.button.button-normal a {
	font-size: 0.928rem;
	height: 29px;
	line-height: 29px;
}
.button.button-icon a img { margin-right: 0; }

/* 変更ボタン */
.button.butedit a {
	font-size: 0.857rem;
	height: 19px;
	line-height: 19px;
	width: 40px;
}



/* フッターボタン -------------------------------------------------------------------------------*/
.button-footer {
	display: none;
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: 999997;
}

/* ボタン領域 */
.button-footer .button-area {
	background-color: rgba(0, 0, 0, 0.7);
	padding-bottom: 10px;
	text-align: center;
}
.button-footer .button-area li {
	display: inline-block;
	padding-top: 10px;
}
.button-footer .button-area li a{
    cursor: pointer;
}
.button-footer .button-area li p {
	display: inline-block;
	margin: 5px;
}
.button-footer .button-area li p.butcancel { margin-right: 20px; }
.button-footer .button-area .message {
	color: #fff;
	font-size: 1.142rem;
	font-weight: 600;
	margin: 0 10px;
}
.button-footer .button-area .button a { width: 110px; }


/* メッセージ領域 */
.button-footer .message-area,
.button-footer .message-modal-area,
.button-footer .message-area-panel { display: none; }
.button-footer .message-area li,
.button-footer .message-modal-area li,
.button-footer .message-area-panel li,
.message-modaldialog-area li {
	color: #fff;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 1px;
	padding: 8px 50px 5px 15px;
	position: relative;
	text-align: center;
}

/*
 * message-area: 普通のマスタ画面
 * message-modal-area: 承認者変更モーダルタイプの画面
 * message-area-panel: マイページにある各パネル
 * message-modaldialog-area: 従業員検索ダイアログタイプの画面
*/
.button-footer .message-area li:after,
.button-footer .message-modal-area li:after,
.button-footer .message-area-panel li:after,
.message-modaldialog-area li:after {
	background-color: rgba(0, 0, 0, 0.2);
	background-image: url(../../images/but_message_close.png);
	background-size: 21px auto;
	content: "";
	height: 21px;
	position: absolute;
	top: 5px;
	right: 5px;
	width: 21px;
}
.button-footer .message-area .error,
.button-footer .message-modal-area .error,
.button-footer .message-area-panel .error,
.message-modaldialog-area .error { background-color: #ff005c; }
.button-footer .message-area .success,
.button-footer .message-modal-area .success,
.button-footer .message-area-panel .success,
.message-modaldialog-area .success{ background-color: #34c767; }


/* Message -------------------------------------------------------------------------------------*/

#badgeMsgCounter,
#btnAllCloseMsg {
	z-index: 10000;
	position: absolute;
	display: none;
	height: 50px;
	background: rgba(0, 0, 0, 0.4);
	border-radius: 15px;
}

#badgeMsgCounter {
	bottom: 10px;
	left: 10px;
	width: 60px;
}

#btnAllCloseMsg {
	bottom: 70px;
	left: 10px;
	width: 60px;
}

#badgeMsgCounter span,
#btnAllCloseMsg span {
	display: inline-block;
	width: 100%;
	line-height: 50px;
	text-align: center;
	font-size: 2rem;
	color: #fff;
	cursor: default;
}

#btnAllCloseMsg span {
	cursor: pointer;
}

.button-footer .message-area {
 	max-height: 250px;
 	overflow: hidden;
}


/* テーブル -------------------------------------------------------------------------------------*/
/* ヘッダー */
.tablearea th {
	background-color: #6e7bb6;/*#9fa0a0;*/
	border-right: solid 1px #fff;
	box-sizing: content-box;
	color: #fff;
	font-size: 0.857rem;
}
.tablearea th img { max-width: none; }

/* 行 */
.tablearea td {
	background-color: #fff;
	border-right: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
	box-sizing: content-box;
	font-size: 1rem;
	padding: 5px 0;
	text-align: center;
}
.tablearea td img { max-width: none; }
.tablearea td.directcell,
 .tablearea td.modalcell { padding: 0; }
.tablearea input {
	background: none;
	border: none;
	color: inherit;
	height: 28px;
	text-align: center;
	width: 90%;
}
.tablearea td.num,
.tablearea td.num input { font-size: 1.071rem; }
.tablearea.listeditmode .num input {
	background-color: #fff;
	border: solid 1px #ccc;
	color: #000;
}









/* Wrapper --------------------------------------------------------------------------------------*/
.header, .article, .footer { width: 100%; }
.wrapper {
	margin: 0 auto;
	width: 98%;
	max-width: 1080px;
}
.header .wrapper,
.searchbar .wrapper,
.searchoption .wrapper { max-width: none; }
.searchbar .wrapper { margin-left: 1.5%; min-width: 97%; }





/* ヘッダー -------------------------------------------------------------------------------------*/
.header {
	background-color: #fff;
	border-bottom: solid 1px #808080;
	height: 47px;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999999;
}

/* ロゴ */
.header h1 {
	float: left;
	margin-top: 12px;
}
 .header h1 img { width: 113px; }

/* 設定 */
.header .config {
	background-repeat: no-repeat;
	background-size: 22px auto;
	float: right;
	font-size: 1rem;
	margin-top: 12px;
	padding-left: 28px;
	white-space: nowrap;
}
.header .config .honor {
	font-size: 0.714rem;
	font-weight: 400;
}
.header .config a { padding-left: 8px; }
.header .config img { width: 22px; cursor: pointer; }
.header .config .name {
	display: inline-block;
	overflow: hidden;
	vertical-align: middle;
}

/* 検索ボタン（SP） */
.header .butsearchsp { display: none; }

/* グローバルメニュー ---------------------------------------------------------------------------*/
.spnav { display: none; }

.menulayer {
	display: none;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1003;
}


.global {
	float: left;
	margin-top: 12px;
	margin-left: 2%;
}

/* メインメニュー */
.global .mainmenu {  }
.global .mainmenu > li {
	float: left;
	position: relative;
	text-align: center;
	z-index: 1004;
}
.global .mainmenu > li > a {
	border-bottom: solid 2px #fff;
	color: inherit;
	display: inline-block;
	font-size: 0.928rem;
	height: 24px;
	line-height: 26px;
	margin: 0 0.9em;
}
.global .mainmenu > li > a:hover,
.global .mainmenu > li > a.on {
	border-color: #4e6adb;
	color: #4e6adb;
	font-weight: 600;
}

/* サブメニュー */
.submenu {
	border-top: solid 1px #808080;
	display: none;
	position: absolute;
	top: 37px;
	left: 0;
	white-space: nowrap;
	z-index: 1005;
}
.submenu a {
	background-color: #fff;
	border-right: solid 1px #808080;
	border-bottom: solid 1px #808080;
	border-left: solid 1px #808080;
	color: inherit;
	display: block;
	font-size: 1rem;
	height: 34px;
	line-height: 34px;
	padding: 0 1em;
	text-align: left;
}
.submenu a:hover, .submenu a.on {
	background-color: #4e6adb;
	color: #fff;
}




/* ボディー -------------------------------------------------------------------------------------*/
.article { }
.body { padding-top: 169px; padding-bottom: 100px; }




/* フッター -------------------------------------------------------------------------------------*/
.basewrapper {
	position: relative;
	height: auto !important;
	height: 100%;
	min-height: 100%;
	width: 100%;
}
.footer {
	background-color: #e1e1e1;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 99998;
}
.footer.fixed {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
}

/* ページトップ */
.pagetop {
	display: none;
	height: 53px;
	position: fixed;
	right: 20px;
	bottom: 48px;
	width: 53px;
	z-index: 999998;
}

.pagetop.absolute {
	position: absolute;
	bottom: 63px;
}
.pagetop a {
	background-color: #4e6adb;
	border-radius: 50%;
	box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.2);
	display: block;
	height: 53px;
	width: 53px;
}


/* コピーライト */
.footer .copyright {
	background-color: #4e6adb;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1rem;
	height: 43px;
	line-height: 43px;
	text-align: center;
}






/* サーチバー -----------------------------------------------------------------------------------*/
.searchbar {
	background-color: #f0f0f0;
	border-top: solid 1px #fff;
	border-right: solid 1px #e1e1e1;
	border-bottom: solid 1px #ccc;
	overflow: hidden;
	position: fixed;
	top: 47px;
	left: 0;
	width: 100%;
	z-index: 20;
}
.searchbar.fixed { position: fixed; }

/* 検索オプションが開いている状態 */
.searchbar.open .searchoption {
    display: block;
}

/* 検索オプション開閉ボタン */
.searchbar .butsearchoption {
	float: left;
	margin-top: 12px;
}
.searchbar .butsearchoption a {
	background-image: url(../../images/searchbar_icon_arrow.png);
	background-size: 19px auto;
	display: block;
	height: 19px;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	width: 19px;
}
.searchbar.open .butsearchoption a { background-image: url(../../images/searchbar_icon_arrow_open.png); }


/* 検索条件 */
.searchbar .searchcondition { float: left; }

.searchbar li {
	border-right: solid 1px #fff;
	float: left;
	height: 23px;
	margin: 10px 0;
	padding: 0 10px;
	position: relative;
}
.searchbar li:after {
	border-left: solid 1px #ccc;
	content: "";
	height: 23px;
	position: absolute;
	top: 0;
	right: 0;
}
.searchbar li.noborder,
.searchbar li.arrow,
.searchbar .searchoption li:last-child { border-right: none; }
.searchbar li.noborder:after,
.searchbar li.arrow:after,
.searchbar .searchoption li:last-child:after { border-left: none; }

.searchbar li.inneritem { display: table; }
.searchbar li .inneritem {
	display: table-cell;
	padding-right: 10px;
	vertical-align: top;
}
.searchbar li .inneritem:last-child { padding-right: 0; }

.searchbar .label {
	font-size: 0.857rem;
	margin-top: 6px;
}
.searchbar .value-label {
	margin-top: 4px;
	display: inline-block;
}
.searchbar .value { width: auto; }
.searchbar .value input { width: 95px; }
.searchbar .item.but input { width: 72px; }
.searchbar .item.but .value.date input { width: 92px; }
.searchbar .item.but a {
	height: 23px;
	width: 23px;
}
.searchbar input[type="text"] { height: 23px; }
.searchbar .select {
	height: 23px;
	padding-top: 0;
}
.searchbar .radio,
.searchbar .checkbox {
	font-size: 0.857rem;
	height: 23px;
	line-height: 23px;
	margin-left: 1px;
}


/* 検索ボタン */
.searchbar .butsearch {
	float: left;
	padding-top: 7px;
	padding-left: 10px;
	position: relative;
}
.searchbar .butsearch a { width: 95px; }

/* キャンセルボタン */
.searchbar .butcancel { display: none; }

/* 該当件数 */
.searchbar .searchnumber {
	float: right;
	font-size: 0.857rem;
	font-weight: 600;
	margin-top: 14px;
	padding-left: 10px;
}

/* IE 11用 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	input[type="text"], .radio, .checkbox, .select {
		line-height: 28px;
	}

	.searchbar input[type="text"], .searchbar .radio, .searchbar .checkbox, .searchbar .select {
		line-height: 26px;
	}
}

/* サーチオプション -----------------------------------------------------------------------------*/
.searchoption {
	display: none;
	width:100%;
}
.searchoption .searchcondition { margin-left: 19px; }





/* タイトルバー ---------------------------------------------------------------------------------*/
.titlebar {
	background-color: #f0f0f0;/*#e1e1e;*/
	border-bottom: solid 1px #fff;
	padding-bottom: 15px;
	position: absolute;
	top: 92px;
	width: 100%;
	z-index: 10;
	padding-left: 1.5%;
}
.titlebar:after {
	border-bottom: solid 1px #ccc;
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
}
.titlebar.fixed { position: fixed; }

/** 付属情報 */
.titlebar .attachedInfo {
    padding-top: 10px;
    font-size: 0.875rem;
}

/* 従業員情報 */
.titlebar .employee {
    float: left;
}
.titlebar .employee span { font-weight: 600; }
.titlebar .employee br { display: none; }
/* 申請情報 */
.titlebar .application {
    float: left;
}
.titlebar .application span { font-weight: 600; }
.titlebar .application .state {
    color: #f00;
}

/* 休暇残日数 */
.titlebar .holiday {
	float: right;
}
.titlebar .holiday span { font-weight: 600; }
.titlebar .holiday br { display: none; }

.titlebar .titleLink {
    clear: both;
}
/* ページタイトル */
.titlebar h2 {
	border-left: solid 5px #4e6adb;
	color: #4e6adb;
	float: left;
	font-size: 2rem;
	height: 30px;
	line-height: 30px;
	margin-top: 15px;
	padding-left: 10px;
}


/* 表示切替、ボタン */
.titlebar ul {
	border-right: solid 1px #fff;
	border-left: solid 1px #ccc;
}
.titlebar li {
	border-right: solid 1px #ccc;	border-left: solid 1px #fff;
	float: left;
	text-align: center;
}

/* 表示切替 */
.titlebar .changeviewsp { display: none; }
.titlebar .changeview {
	float: left;
	margin-top: 10px;
	margin-left: 50px;
}
.titlebar .changeview li { padding: 0px 20px; }
.titlebar .changeview a {
	color: inherit;
	font-size: 1rem;
	/* font-weight: 600; */
	line-height: 30px;
	padding: 0 0.3em;
}
.titlebar .changeview a:hover,
.titlebar .changeview a.on {
	border-bottom: solid 2px #4e6adb;
	color: #4e6adb;
}

/* ボタン */
.titlebar .editbutton {
	float: right;
	margin-top: 10px;
}
.titlebar .editbutton ul { float: left; }
.titlebar .editbutton li { padding: 0 3px; }
.titlebar .editbutton li a { display: block; }
.titlebar .editbutton li.on a,
.titlebar .editbutton li a:hover { background-color: #4e6adb; }
.titlebar .editbutton li a:hover img { opacity: 1; }

.titlebar .editbutton .off a {
	cursor: default;
	opacity: 0.4;
}
.titlebar .editbutton .off a:hover { background: none; }

.titlebar .buttitlebar {
	float: left;
	margin-left: 10px;
	width: 115px;
}










/* ローディング ---------------------------------------------------------------------------------*/
.loadinglayer {
	background-color: rgba(0, 0, 0, 0.7);
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 99999999;
}
.loadinglayer #loaderImage {
	background-size: auto 32px;
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

/* Content loader icon  ---------------------------------------------------------------------------------*/
/* Animation */
 @keyframes rotate {
 to {
  transform: rotate(1turn)
 }
}

/* Content loader style */
.loading-content__anim {
  width: 20px;
  height: 20px;
  display: inline-block;
  border: 3px solid rgba(189, 189, 189, 0.25);
  border-left-color: rgba(78, 106, 219);
  border-top-color: rgba(78, 106, 219);
  border-radius: 50%;
  animation: rotate 600ms infinite linear;
 }







/* float clear */
.cf { zoom: 1; }
.cf:after { clear: both; content: ""; display: block; }

li[not-active="true"] a {
	cursor: not-allowed;
}

.checkbox-margin ul {
	text-align: left;
	margin-left: 100px;
}