/*btn*/
.btn_icon {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	font-size: 1.375rem;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 1px .375rem rgba(0, 0, 0, 0.6);
	cursor: pointer;
	text-decoration: none;
}

a.btn_icon:hover {
	text-decoration: none;
}

.btn_text,
.btn_tab {
	border-radius: 2rem;
	font-size: 1.1rem;
	font-weight: bold;
	padding: 0.25rem 0.875rem;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	cursor: pointer;
	text-decoration: none;
}

a.btn_text:hover {
	text-decoration: none;
}

.icon_sm {
	width: 2rem;
	height: 2rem;
	font-size: 1.05rem;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.text_sm {
	font-size: 1rem;
}

/*input*/
.checkbox_control,
.radio_control {
	position: relative;
	margin-bottom: .5rem;
	min-height: 36px;
	min-width: 36px;
}

.checkbox_control label,
.radio_control label {
	margin-bottom: 0;
}

.checkbox_element,
.radio_element {
	display: block;
	position: relative;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.checkbox_element input,
.radio_element input {
	position: absolute;
	opacity: 0;
}

.checkbox_element_range,
.radio_element_range {
	position: absolute;
	width: 36px;
	height: 36px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.checkbox_label,
.radio_label {
	padding-left: 2.5rem;
	display: flex;
	min-height: 36px;
	align-items: center;
}

.checkbox_style input:disabled,
.checkbox_style .checkbox_label.disabled,
.radio_style input:disabled,
.radio_style .radio_label.disabled {
	cursor: default;
}

/*checkbox*/
.checkbox_element input {
	opacity: 0;
	cursor: pointer;
}

.checkbox_element {
	height: 36px;
	width: 36px;
	cursor: pointer;
}

.checkbox_label {
	min-height: 36px;
	cursor: pointer;
}

.tickmark {
	position: absolute;
	z-index: 1;
	top: 8px;
	left: 8px;
	height: 20px;
	width: 20px;
	border-radius: 20%;
}

.tickmark:after {
	content: "";
	position: absolute;
	display: none;
}

.checkbox_element input:checked~.tickmark:after {
	display: block;
}

.checkbox_element .tickmark:after {
	left: 7px;
	top: 3px;
	width: 6px;
	height: 12px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.under_checkbox_collapse,
.under_radio_collapse {
	padding-left: 2.5rem;
}

/*radio*/
.radio_element input {
	opacity: 0;
	cursor: pointer;
}

.radio_element {
	height: 36px;
	width: 36px;
	cursor: pointer;
}

.radio_label {
	min-height: 36px;
	cursor: pointer;
}

.radiomark {
	position: absolute;
	z-index: 1;
	top: 8px;
	left: 8px;
	height: 20px;
	width: 20px;
	border-radius: 50%;
}

.radiomark:after {
	content: "";
	position: absolute;
	display: none;
}

.radio_element input:checked~.radiomark:after {
	display: block;
}

.radio_element .radiomark:after {
	width: .9rem;
	height: .9rem;
	border-radius: 50%;
	background-color: rgb(99, 160, 204);
	border: 3px solid rgb(255, 255, 255);
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

/*switch*/
.switch_style {
	display: flex;
	align-items: center;
}

.switch_element {
	position: relative;
	display: inline-block;
	width: 36px;
	height: 20.4px;
}

.switch_element input {
	opacity: 0;
	width: 0;
	height: 0;
}

.switch_slip {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
	border-radius: 34px;
}

.switch_slip:before {
	position: absolute;
	content: "";
	height: 15.6px;
	width: 15.6px;
	left: 2.4px;
	bottom: 2.4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
	border-radius: 50%;
}

input:checked+.switch_slip {
	background-color: rgb(99, 160, 204);
}

input:focus+.switch_slip {
	box-shadow: 0 0 1px rgb(99, 160, 204);
}

input:checked+.switch_slip:before {
	-webkit-transform: translateX(15.6px);
	-ms-transform: translateX(15.6px);
	transform: translateX(15.6px);
}


/*list_table*/
.list_table {
	border-collapse: separate;
	border-spacing: 0px .375rem;
}

.list_head .d-table-cell,
.list_body .d-table-cell,
.list_head td,
.list_body td {
	padding: .25rem .5rem;
}

.list_body {
	/*filter: drop-shadow(0 0.1rem 0.1rem rgba(0, 0, 0, 0.1));*/
	filter: drop-shadow(0 0.1rem 0.1rem rgba(0, 0, 0, 0.2));
}

.list_body .d-table-cell:first-child,
.list_body td:first-child {
	border-top-left-radius: .375rem;
	border-bottom-left-radius: .375rem;
}

.list_body .d-table-cell:last-child,
.list_body td:last-child {
	border-top-right-radius: .375rem;
	border-bottom-right-radius: .375rem;
}

/*list_row*/
.list_container .list_body {
	filter: drop-shadow(0 0.1rem 0.1rem rgba(0, 0, 0, 0.2));
	border-radius: .375rem;
	margin: .375rem 0;
}

.list_container .list_body [class*="col"] {
	padding-top: .25rem;
	padding-bottom: .25rem;
}

/*list_tool*/
.list_tool .btn_primary:not(:first-child) {
	margin-left: .5rem;
}

.list_tool .btn_warn {
	margin-left: 1rem;
}

/*tag*/
.tag_frame {
	padding: .25rem .5rem;
	border-radius: .25rem;
	font-size: 1rem;
	width: auto;
	font-weight: bolder;
}

/*inputbox_inside_icon*/
.inputbox_inside_icon {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

/*link*/
.link {
	font-weight: bolder;
}

.link:hover {
	text-decoration: none;
}

/*ratio*/
.box_1to1 {
	width: 100%;
}

.box_1to1:after {
	content: "";
	display: block;
	padding-bottom: 100%;
}

.box_16to9 {
	width: 100%;
}

.box_16to9:after {
	content: "";
	display: block;
	padding-bottom: calc(100%*9/16);
}

/*tab_pills*/
.tab_pills {
	font-size: 1.05rem;
}

.tab_pills .nav-item:first-child {
	border-top-left-radius: .375rem;
	border-bottom-left-radius: .375rem;
}

.tab_pills .nav-item:last-child {
	border-top-right-radius: .375rem;
	border-bottom-right-radius: .375rem;
}

/*dialog*/
.dialog_style {
	border: none;
	box-shadow: 0 2px 6px #ccc;
	border-radius: .25rem;
	box-shadow: 0 0.25rem 0.75rem rgb(0 0 0 / 10%);
	width: 350px;
	padding: 0rem;
}

.dialog_style::backdrop {
	background-color: rgba(0, 0, 0, 0.1);
}

.dialog_style .dialog_header,
.dialog_style .dialog_body {
	padding: .25rem .5rem;
	font-size: .9rem;
}

.dialog_style .dialog_header {
	display: inline-flex;
	width: 100%;
	border-bottom: 1px solid rgb(200, 200, 200);
}

.dialog_style .dialog_header .title {
	display: flex;
	flex-grow: 1;
}

.close_btn,
.close_btn:focus {
	outline: none;
	background-color: transparent;
	border: 0;
	color: rgb(150, 150, 150);
}

.dialog_style.hide {
	-webkit-animation: hide 1s ease normal;
}

@-webkit-keyframes hide {
	to {
		opacity: 0;
	}
}