@charset "utf-8";

/* RESET
---------------------------------------- */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}

ul,ol {list-style:none;}

blockquote, q {quotes:none;}
blockquote:before, blockquote:after,q:before, q:after {content:''; content:none;}

a {margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; outline:none;}

del {text-decoration:line-through;}

abbr[title], dfn[title] {border-bottom:1px dotted; cursor:help;}

table {border-collapse:collapse; border-spacing:0;}

input, select {vertical-align:middle;}

img {vertical-align:bottom; border:none; font-size:0; line-height:0;}

em {font-style:normal;}

body {-webkit-text-size-adjust:none; font-family: Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ƒqƒ‰ƒMƒmŠpƒS ProN W3', 'ƒ‚ƒŠƒTƒ VƒS R', 'Droid Sans', ƒƒCƒŠƒI, 'sans-serif'; font-size:14px;}

address {font-style:normal;}

* {box-sizing: border-box;}

/*
 *	COMMON CLASS
 *
 *------------------------------------*/

.layout-fixed {table-layout: fixed;}

.w15 {width: 15px !important;}
.w20 {width: 20px !important;}
.w30 {width: 30px !important;}
.w40 {width: 40px !important;}
.w50 {width: 50px !important;}
.w60 {width: 60px !important;}
.w70 {width: 70px !important;}
.w80 {width: 80px !important;}
.w90 {width: 90px !important;}
.w100 {width: 100px !important;}
.w110 {width: 110px !important;}
.w120 {width: 120px !important;}
.w130 {width: 130px !important;}
.w140 {width: 140px !important;}
.w150 {width: 150px !important;}
.w160 {width: 160px !important;}
.w170 {width: 170px !important;}
.w180 {width: 180px !important;}
.w190 {width: 190px !important;}
.w200 {width: 200px !important;}
.w210 {width: 210px !important;}
.w220 {width: 220px !important;}
.w230 {width: 230px !important;}
.w240 {width: 240px !important;}
.w250 {width: 250px !important;}
.w260 {width: 260px !important;}
.w270 {width: 270px !important;}
.w280 {width: 280px !important;}
.w290 {width: 290px !important;}
.w300 {width: 300px !important;}
.w320 {width: 320px !important;}
.w400 {width: 400px !important;}
.w500 {width: 500px !important;}
.w600 {width: 600px !important;}
.w100p {width: 100% !important;}
.wa {width: auto !important;}

.h50 {height: 50px !important;}
.h100 {height: 100px !important;}
.h150 {height: 150px !important;}
.h200 {height: 200px !important;}
.h300 {height: 300px !important;}
.h400 {height: 400px !important;}

.mt0 {margin-top: 0 !important;}
.mt10 {margin-top: 10px !important;}
.mt20 {margin-top: 20px !important;}
.mt30 {margin-top: 30px !important;}

.mb10 {margin-bottom: 10px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb30 {margin-bottom: 30px !important;}

.ml10 {margin-left: 10px !important;}
.ml20 {margin-left: 20px !important;}
.ml30 {margin-left: 30px !important;}

.mr10 {margin-right: 10px !important;}
.mr20 {margin-right: 20px !important;}
.mr30 {margin-right: 30px !important;}

.taL, .tal {
	text-align: left !important;
}
.taC, .tac {
	text-align: center !important;
}
.taR, .tar {
	text-align: right !important;
}
.fL {
	float: left !important;
}
.fR {
	float: right !important;
}
.cB {
	clear: both;
}
.fwB, .fwb {
	font-weight: bold !important;
}

.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

small {font-size: 0.8em; color: #666;}
em.valid {font-weight: bold; color: #0A0;}
em.error {font-weight: bold; color: #F00;}

.hidden {display: none !important;}


/*
 *	LAYOUT
 *
 *------------------------------------*/

@media (min-width:701px) {
	body {padding-top: 40px;}
	header {position: fixed; left: 0; top: 0; z-index: 9999; width: 100%; height: 40px; background: #000; color: #FFF;}
	header h1 {float: left; width: 200px; padding: 10px 15px; text-align: center; line-height: 20px; background: #8134AF; font-size: 20px; color: #FFF;}
	header a {color: #FFF; text-decoration: none;}
	header .utility {float: right; width: calc(100% - 300px); overflow: hidden;}
	header .utility li {float: right; border-left: 1px solid #333;}
	header .utility-button a {float: left; display: block; padding: 10px 15px; line-height: 20px; }
	header .utility-label {padding: 10px 15px; line-height: 20px; }
	header .utility-form {height: 40px; padding: 5px 15px;}
	header .utility-button .toggle-nav {display: none;}

	.container {padding-left: 200px; transition: all 300ms 0s ease-in;}
	.container.hide-nav {padding-left: 40px;}
	.container.no-nav {padding-left: 0;}

	.navigation {position: fixed; left: 0; top: 40px; z-index: 9999; width: 200px; height: calc(100vh - 40px); overflow: scroll; background: #444; color: #FFF; transition: all 300ms 0s ease-in;}
	.hide-nav .navigation {width: 40px;}
	.primary-nav li {}
	.primary-nav li a {position: relative; display: block; padding: 10px 10px 10px 40px; line-height: 20px; color: #FFF; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
	.primary-nav li a i {position: absolute; left: 10px; top: 10px; width: 20px; height: 20px; text-align: center; line-height: 20px; font-size: 16px;}
	.primary-nav li a:hover {background: #b984d8;}
	.primary-nav li.child a {background: #666;}
	.primary-nav li.child a:hover {background: #b984d8;}
	.primary-nav .switch-account {display: none;}
	.contents {padding: 20px;}
}

@media (max-width:700px) {
	body {padding-top: 40px;}
	header {position: fixed; left: 0; top: 0; z-index: 9999; width: 100%; height: 40px; background: #000; color: #FFF;}
	header h1 {float: left; width: 200px; padding: 10px 15px; text-align: center; line-height: 20px; background: #8134AF; font-size: 20px; color: #FFF;}
	header a {color: #FFF; text-decoration: none;}
	header a {color: #FFF; text-decoration: none;}
	header .utility {float: right; width: calc(100% - 200px); overflow: hidden;}
	header .utility li {float: right;}
	header .utility-button a {float: left; display: block; padding: 10px 15px; line-height: 20px; }
	header .utility-label {display: none;}
	header .utility-form {display: none;}

	.navigation {position: fixed; right: -200px; top: 40px; z-index: 9999; width: 200px; height: calc(100vh - 40px); overflow: scroll; background: #444; color: #FFF; transition: all 300ms 0s ease-in;}
	.show-nav.navigation {right: 0;}
	.primary-nav li a {position: relative; display: block; padding: 10px 10px 10px 40px; line-height: 20px; color: #FFF; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
	.primary-nav li a i {position: absolute; left: 10px; top: 10px; width: 20px; height: 20px; text-align: center; line-height: 20px; font-size: 16px;}
	.primary-nav li a:hover {background: #b984d8;}
	.primary-nav li.child a {background: #666;}
	.primary-nav li.child a:hover {background: #b984d8;}
	.primary-nav .toggle-nav {display: none;}
	.primary-nav .switch-account {padding: 10px;}

	.contents {padding: 10px;}
}

/*
 *	TITLE
 *
 *------------------------------------*/

@media (min-width:701px) {
	.page-title {margin: -20px -20px 20px; padding: 20px; line-height: 20px; font-size: 18px; background: #EEE; color: #000; border-bottom: 1px solid #DDD;}
}

@media (max-width:700px) {
	.page-title {margin: -10px -10px 20px; padding: 20px; line-height: 20px; font-size: 18px; background: #EEE; color: #000; border-bottom: 1px solid #DDD;}
}

.section-title {margin: 40px -10px 20px; padding: 10px 20px; line-height: 20px; font-size: 16px; background: #EEE; color: #000; border-left: 5px solid #DDD;}

/*
 *	BUTTON
 *
 *------------------------------------*/

a {
    color: #8134AF;
}

.btn {
	display: inline-block;
	text-decoration: none;
	color: #444;
	background: #EEE;
	border: none;
}
.btn:hover {
	/* opacity: 0.8; */
}
.btn-tiny {
	margin-right: 5px;
	padding: 1px 5px;
	border-radius:3px;
    font-size:14px;
    font-weight: normal;
}
.btn-small {
	padding: 3px 15px;
	border-radius:5px;
    font-size:14px;
    font-weight: normal;
}
.btn-medium {
	padding: 10px 0;
	min-width: 200px;
	text-align: center;
	border-radius:5px;
    font-size:16px;
    font-weight: normal;
}

.btn.btn-primary {
	color: #FFF;
	background: #DD2A7B;
    border-bottom: 2px solid #7c0c3f;
}
.btn.btn-proceed {
	color: #FFF;
	background: #8134AF;
    border-bottom: 2px solid #450f66;
}
.btn.btn-plain {
	color: #000;
	background: #CCC;
	border-bottom: 2px solid #AAA;
}
.btn.btn-primary:hover {
    border-bottom: 2px solid #DD2A7B;
}
.btn.btn-proceed:hover {
    border-bottom: 2px solid #8134AF;
}
.btn.btn-plain:hover {
    border-bottom: 2px solid #CCC;
}

/*
 *	SYSTEM MESSAGE
 *
 *------------------------------------*/

.message-wrap {
	display: none;
	position:fixed;
	left: 0;
	top: 0;
	z-index: 9999;
	width: 100%;
	height: 100%;
	padding-top: 50px;
	background:rgba(0, 0, 0, 0.5);
}

.sys-message-wrap {
	display: block;
	width: 50%;
	min-width: 300px;
	margin: 0 auto 20px;
	padding: 10px 15px;
	border: 1px solid #888;
	text-align: left;
	background: #EEE;
	color: #000;
}
.sys-message-wrap.sys-message-error {
	border: 1px solid #F00;
	background: #FEE;
	color: #F00;
}
.sys-message-wrap.sys-message-success {
	border: 1px solid #0A0;
	background: #EFE;
	color: #0A0;
}
.sys-message-wrap p {
	margin-bottom: 10px;
}
.sys-message-wrap p:last-child {
	margin-bottom: 0;
}

p.sys-error-inline {
	margin-bottom: 5px;	
	color: #F00;
}

.loader-wrap {
	display: none;
	position:fixed;
	left: 0;
	top: 0;
	z-index: 9999;
	width: 100%;
	height: 100%;
	padding-top: 50px;
	background:rgba(0, 0, 0, 0.7);
}
.loader {
    position: absolute;
    margin: auto;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 40px;
    height: 40px;
    border: 5px solid #DD2A7B;
    border-top: 5px solid #CFE;
    border-radius: 20px;
    animation: spin 0.5s linear infinite;
    -webkit-animation: spin 0.5s linear infinite;
    -moz-animation: spin 0.5s linear infinite;
    -ms-animation: spin 0.5s linear infinite;
}
.loader-progress {
	display: none;
    position: absolute;
    margin: auto;
    left: 0;
    top: 120px;
    right: 0;
    bottom: 0;
    width: 50%;
    height: 40px;
	border: 1px solid #CCC;
	background: #FFF;
}
.loader-progress-bar {
	width: 0;
	height: 38px;
	background: #DD2A7B;
}
.loader-progress-rate {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 38px;
	line-height: 38px;
	text-align: center;
}


@keyframes spin {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
@-webkit-keyframes spin {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
    0% {-moz-transform: rotate(0deg);}
    100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes spin {
    0% {-ms-transform: rotate(0deg);}
    100% {-ms-transform: rotate(360deg);}
}


.pager {position: relative; height: 50px; margin-bottom: 10px; line-height: 50px; text-align: center; background: #FFF; border-bottom: 1px solid #CCC;}
.pager-prev,
.pager-next {position: absolute; top: 10px; width: 100px; height: 30px; padding: 6px 0; text-align: center; text-decoration: none; border: 1px solid #CCC;}
.pager-prev::before,
.pager-next::before {font-size: 16px; color: #8134AF;}
.pager-prev {left: 10px;}
.pager-next {right: 10px;}

.modal-wrap {display: none; position:fixed; left: 0; top: 0; z-index: 10000; width: 100%; height: 100%; padding-top: 50px; background:rgba(0, 0, 0, 0.5);}
.modal-inner {position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 10002; width: 90vw; max-width: 780px; height: 80vh; margin: auto; padding: 20px; background: #FFF;}
.modal-layer {position: absolute; left: 0; top: 0; z-index: 9997; width: 10001%; height: 100%; background:rgba(0, 0, 0, 0.1);}
.modal-close-button {position: absolute; right: -10px; top: -10px; z-index: 10003; width: 30px; height: 30px; line-height: 28px; text-align: center; background: #FFF; border: 1px solid #EEE; border-radius: 15px; color: #AAA; cursor: pointer;}
.modal-close-button::before {content: "\f00d"; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased;}
.modal-body {width: 100%; height: 100%; overflow: scroll;}
.modal-body::after {content: ""; display: block; clear: both;}

/*
 *	parts
 *
 *------------------------------------*/

.tabs {height: 40px; margin: 0 -10px 10px; padding:0 10px; border-bottom:1px solid #CCC;}
.tabs::after {content:""; display: block; clear: both;}
.tabs a {display: block; float: left; height: 40px; margin: 0 5px; padding: 10px; line-height: 18px; border: 1px solid #CCC; background: #FFF; color: #333; text-decoration: none; border-radius: 5px 5px 0 0;}
.tabs a.active {color: #8134AF; border-bottom: 1px solid #FFF;}

.box {margin: 15px 0; padding: 15px; background: #EEE; border: 1px solid #CCC;}
.box p {margin: 15px 0;}
.box p:first-child {margin-top: 0;}
.box p:last-child {margin-bottom: 0;}
.box.box-notice {background: #FFC; border: 1px solid #CC4;}
.box.box-error {background: #FEE; border: 1px solid #F00; color: #C00;}
.box.box-success {background: #EFE; border: 1px solid #0A0; color: #080;}

.card-list::after {content: ""; display: block; clear: both;}
.card {float: left; margin: 10px; background: #EEE; text-align: center;}
.card-head {position: relative; padding: 10px; background: #dbc9e5; overflow: hidden;}
.card-head-title {height: 25px; line-height: 25px; font-size: 15px; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.card-head-image {width: 150px; height: 150px; margin: 10px auto; border-radius: 75px; background: #CCC; overflow: hidden;}
.card-head-image img {width: 150px; height: 150px; object-fit: cover;}
.card-head-subtitle {height: 20px; line-height: 20px; font-size: 13px; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.card-head-mark {height: 30px; line-height: 30px; font-size: 18px; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.card-head-mark small {font-size: 13px;}
.card-head-button {position: absolute; right: -40px; top: -40px; display: block; width: 80px; height: 80px; padding-top: 50px; line-height: 30px; text-align: center; font-size: 16px; background: #8134AF; color: #FFF; transform:rotate(45deg); opacity: 0.3;}
.card-body-label {height: 20px; line-height: 20px; font-size: 12px; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.card-body-mark {height: 30px; line-height: 30px; font-size: 18px; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.card-foot-label {height: 20px; line-height: 20px; font-size: 10px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.card-foot-mark {height: 25px; line-height: 25px; font-size: 15px; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.card .cols {padding: 5px;}
.card .cols::after {content: ""; display: block; clear: both;}
.card .col-1 {width: 100%; padding: 5px;}
.card .col-2 {float: left; width: 50%; padding: 5px;}
.card .col-3 {float: left; width: 33.33%; padding: 5px;}
.card .col-4 {float: left; width: 250%; padding: 5px;}

@media (min-width:1521px) {
	.card {width: calc(20% - 20px);}
}

@media (max-width:1520px) and (min-width:1201px) {
	.card {width: calc(25% - 20px);}
}

@media (max-width:1200px) and (min-width:881px) {
	.card {width: calc(33.33% - 20px);}
}

@media (max-width:880px) and (min-width:501px) {
	.card {width: calc(50% - 20px);}
}

@media (max-width:500px) {
	.card {width: calc(100% - 20px);}
}

@media (min-width:1361px) {
	.hide-nav .card {width: calc(20% - 20px);}
}

@media (max-width:1360px) and (min-width:1041px) {
	.hide-nav .card {width: calc(25% - 20px);}
}

@media (max-width:1040px) and (min-width:721px) {
	.hide-nav .card {width: calc(33.33% - 20px);}
}

@media (max-width:720px) and (min-width:501px) {
	.hide-nav .card {width: calc(50% - 20px);}
}

.table-vertical {margin: 15px 0; border-collapse: collapse;}
.table-vertical th {padding: 10px; background: #DDD; border: 1px solid #FFF; text-align: left; vertical-align: middle;}
.table-vertical td {padding: 10px; background: #EEE; border: 1px solid #FFF;}

.table-horizontal {margin: 15px 0; border-collapse: collapse;}
.table-horizontal th {padding: 10px 15px; background: #DDD; border: 1px solid #FFF; text-align: left;}
.table-horizontal td {padding: 10px 15px; background: #EEE; border: 1px solid #FFF;}

.table-list {margin: 15px 0; border-collapse: collapse;}
.table-list th {padding: 5px 10px; vertical-align: middle; background: #DDD; border: 1px solid #FFF; text-align: left;}
.table-list td {padding: 5px 10px; vertical-align: middle; background: #EEE; border: 1px solid #FFF;}
.table-list thead th {text-align: center;}

th.sortable {position: relative; cursor: pointer;}
th.sortable:hover {background: #DDE;}
th.sortable:hover::after {content: "\f0d7"; position: absolute; right: 5px; top: 50%; margin-top: -7px; line-height: 14px; font: normal normal normal 14px/1 FontAwesome; color: #8134AF; font-size: 14px; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
th.sortable.sortable-asc {background: #DDE;}
th.sortable.sortable-asc::after {content: "\f0d8"; position: absolute; right: 5px; top: 50%; margin-top: -7px; line-height: 14px; font: normal normal normal 14px/1 FontAwesome; color: #8134AF; font-size: 14px; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
th.sortable.sortable-asc:hover::after {content: "\f0d7";}
th.sortable.sortable-desc {background: #DDE;}
th.sortable.sortable-desc::after {content: "\f0d7"; position: absolute; right: 5px; top: 50%; margin-top: -7px; line-height: 14px; font: normal normal normal 14px/1 FontAwesome; color: #8134AF; font-size: 14px; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
th.sortable.sortable-desc:hover::after {content: "\f0d8";}

.table-horizontal.table-compact th,
.table-horizontal.table-compact td {padding: 8px;}

tr.clickable {cursor: pointer;}
tr.clickable:hover th {background: #EEF;}
tr.clickable:hover td {background: #DDE;}

.pseudo-table {text-align: left;}
.pseudo-table > .tr::after {content: ""; display: block; clear: both;}
.pseudo-table > .tr > .th {float: left; margin-bottom: 10px; font-weight: bold;}
.pseudo-table > .tr > .td {float: left; margin-bottom: 20px;}
@media (min-width:501px) {
	.pseudo-table .col-200-in-500 {width: 200px;}
}
@media (max-width:500px) {
	.pseudo-table .col-200-in-500 {width: 100%;}
}


.pseudo-table-flex {border-top: 1px solid #CCC; border-left: 1px solid #CCC;}
.pseudo-table-flex > .tr {display: flex;}
.pseudo-table-flex > .tr > .th {display: flex; align-items: center; justify-content: center; flex-basis: 1px; padding: 5px; border-bottom: 1px solid #CCC; border-right: 1px solid #CCC; background: #EEE;}
.pseudo-table-flex > .tr > .td {display: flex; align-items: center; flex-basis: 1px; padding: 5px; border-bottom: 1px solid #CCC; border-right: 1px solid #CCC;}
.pseudo-table-flex > .tr > .td.tac {justify-content: center;}
.pseudo-table-flex > .tr > .td.tar {justify-content: flex-end;}
.pseudo-table-flex .col-1 {flex-grow: 1;}
.pseudo-table-flex .col-2 {flex-grow: 2;}
.pseudo-table-flex .col-3 {flex-grow: 3;}
.pseudo-table-flex .col-4 {flex-grow: 4;}
.pseudo-table-flex .col-5 {flex-grow: 5;}
.pseudo-table-flex .flex-button {justify-content: center; background: #EEE; color: #8134AF; cursor: pointer;}

.show-if {display: none !important;}
@media (min-width:450px) {
	.show-if-gt-450 {display: flex !important;}
}
@media (min-width:600px) {
	.show-if-gt-600 {display: flex !important;}
}
@media (min-width:750px) {
	.hide-nav .show-if-gt-750 {display: flex !important;}
}
@media (min-width:930px) {
	.show-if-gt-750 {display: flex !important;}
}
@media (min-width:900px) {
	.hide-nav .show-if-gt-900 {display: flex !important;}
}
@media (min-width:1080px) {
	.show-if-gt-900 {display: flex !important;}
}

.userinfo {display: block; text-decoration: none; color: #000;}
.userinfo::after {content: ""; display: block;clear: both;}
.userinfo .profile-image {float: left; width: 40px; height: 40px; border-radius: 20px; background: #EEE; overflow: hidden;}
.userinfo .profile-image img {width: 40px; height: 40px; object-fit: cover;}
.userinfo .user-name {float: right; width: calc(100% - 50px); height: 20px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.userinfo .profile-name {float: right; width: calc(100% - 50px); height: 20px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #666;}

/*
 *	pages
 *
 *------------------------------------*/

.listing-list-wrap {height: calc(100vh - 300px); padding: 5px; overflow: scroll; border: 5px solid #EEE;}

/*
 *	control
 *
 *------------------------------------*/

input[type=text],input[type=number],input[type=email],input[type=password] {width: 100%; height: 30px; padding: 5px; border-radius: 5px; box-sizing:border-box; border: 1px solid #888;}
input[type="number"] {text-align: right;}
input[disabled] {background: #CCC;}

select {width: 100%; height: 30px; padding: 5px; border-radius: 5px; box-sizing:border-box; border: 1px solid #888;}
textarea {width: 100%; min-height: 50px; padding: 5px; border-radius: 5px; box-sizing:border-box; border: 1px solid #888}
label {display: inline-block; padding: 2px 5px;}