/* ==================== Overwrite modal size ====================*/
@media ( min-width :1200px) {
	body .modal-dialog.modal-xl {
		width: 1200px;
	}
}
@media ( min-width :992px) {
	body .modal-dialog.modal-lg {
		width: 900px;
	}
}
@media ( min-width :768px) {
	body .modal-dialog.modal-md {
		width: 600px;
	}
}
@media ( min-width :576px) {
	body .modal-dialog.modal-sm {
		width: 300px;
	}
}
body .modal-dialog {
	width: 95%;
}
.modal-content {
	background-color: var(--block-primary-color-2);
}
.modal-content .modal-header,
.modal-content .modal-detail>.modal-footer {
	border-color: var(--line-primary-translucent-color);
}
/* ==================== Overwrite tool-tip style ====================*/
.tooltip.top .tooltip-arrow,
.tooltip.top-left .tooltip-arrow,
.tooltip.top-right .tooltip-arrow {
	border-top-color: var(--block-primary-translucent-color-3);
}
.tooltip.left .tooltip-arrow {
	border-left-color: var(--block-primary-translucent-color-3);
}
.tooltip.right .tooltip-arrow {
	border-right-color: var(--block-primary-translucent-color-3);
}
.tooltip.bottom .tooltip-arrow,
.tooltip.bottom-left .tooltip-arrow,
.tooltip.bottom-right .tooltip-arrow {
	border-bottom-color: var(--block-primary-translucent-color-3);
}
.tooltip .tooltip-inner {
	color: var(--text-primary-color);
	background-color: var(--block-primary-translucent-color-3);
}
.tooltip.content-size-xs>.tooltip-inner {
	max-width: none;
	max-width: 100px;
}
.tooltip.content-size-sm>.tooltip-inner {
	min-width: 100px;
	max-width: 300px;
}
.tooltip.content-size-md>.tooltip-inner {
	min-width: 300px;
	max-width: 500px;
}
.tooltip.content-size-lg>.tooltip-inner {
	min-width: 500px;
	max-width: 600px;
}
.tooltip.content-size-xl>.tooltip-inner {
	min-width: 600px;
	max-width: 100%;
}

/* ==================== Overwrite drop-down-menu style ====================*/
.dropdown-menu {
	z-index: var(--z-index-level-general-1);
	background-color: var(--block-primary-color-3);
	border-width: 2px;
	border-style: solid;
	border-color: var(--line-primary-translucent-color);
	color: var(--text-primary-color);
}
.dropdown-menu>li>a {
	color: var(--text-primary-color);
}
.dropdown-menu .divider {
	background-color: var(--line-primary-translucent-color);
}

/* ==================== Overwrite button style ====================*/

.btn:focus:not(.btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger),
.btn:hover:not(.btn-default, .btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger) {
	color: var(--text-primary-color);
}
.btn-default,
.btn-default[disabled],
.btn-default[disabled]:focus {
	background-color: var(--block-primary-translucent-color-1);
	border-color: var(--line-primary-translucent-color);
	color: var(--text-primary-color);
}
.btn-default.active,
.btn-default:active,
.btn-default:focus,
.btn-default:hover {
	background-color: var(--block-primary-translucent-color-2);
	border-color: var(--line-primary-translucent-color);
	color: var(--text-obvious-color);
}

/* ==================== Overwrite form-control style ====================*/
.form-control {
	background-color: var(--block-primary-translucent-color-1);
	border-color: var(--line-primary-translucent-color);
	color: var(--text-primary-color);
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
	background-color: transparent;
}

/* ==================== Overwrite nav-tabs style ====================*/
.nav>li>a,
.nav>li>a:focus,
.nav-tabs>li>a,
.nav-tabs>li>a:focus,
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus {
	color: var(--text-primary-color);
}
.nav>li>a:hover,
.nav-tabs>li>a:hover,
.nav-tabs>li.active>a:hover {
	color: var(--text-obvious-color);
}
.nav>li>a:focus,
.nav>li>a:hover,
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
	background-color: var(--block-primary-translucent-color-1);
}

/* ==================== Overwrite nav-tabs style ====================*/
.table-hover>tbody>tr:hover>td, .table-hover>tbody>tr:hover>th {
	background-color: var(--block-primary-translucent-color-1);
}

/* ==================== Col style ====================*/
/* 
 * If the monitor width is more than 1200, we only set one kind grid in Bootstrap 3.
 * Now, we define two classes to set grid.
 * More than 1400: .uila-col-xl-
 * More than 1600: .uila-col-xxl-
 */
@media ( min-width :1400px) {
	.uila-col-xl-1, .uila-col-xl-10, .uila-col-xl-11, .uila-col-xl-12, .uila-col-xl-2, .uila-col-xl-3,
		.uila-col-xl-4, .uila-col-xl-5, .uila-col-xl-6, .uila-col-xl-7, .uila-col-xl-8, .uila-col-xl-9 {
		float: left
	}
	.uila-col-xl-12 {
		width: 100%
	}
	.uila-col-xl-11 {
		width: 91.66666667%
	}
	.uila-col-xl-10 {
		width: 83.33333333%
	}
	.uila-col-xl-9 {
		width: 75%
	}
	.uila-col-xl-8 {
		width: 66.66666667%
	}
	.uila-col-xl-7 {
		width: 58.33333333%
	}
	.uila-col-xl-6 {
		width: 50%
	}
	.uila-col-xl-5 {
		width: 41.66666667%
	}
	.uila-col-xl-4 {
		width: 33.33333333%
	}
	.uila-col-xl-3 {
		width: 25%
	}
	.uila-col-xl-2 {
		width: 16.66666667%
	}
	.uila-col-xl-1 {
		width: 8.33333333%
	}
}

@media ( min-width :1600px) {
	.uila-col-xxl-1, .uila-col-xxl-10, .uila-col-xxl-11, .uila-col-xxl-12, .uila-col-xxl-2, .uila-col-xxl-3,
		.uila-col-xxl-4, .uila-col-xxl-5, .uila-col-xxl-6, .uila-col-xxl-7, .uila-col-xxl-8, .uila-col-xxl-9 {
		float: left
	}
	.uila-col-xxl-12 {
		width: 100%
	}
	.uila-col-xxl-11 {
		width: 91.66666667%
	}
	.uila-col-xxl-10 {
		width: 83.33333333%
	}
	.uila-col-xxl-9 {
		width: 75%
	}
	.uila-col-xxl-8 {
		width: 66.66666667%
	}
	.uila-col-xxl-7 {
		width: 58.33333333%
	}
	.uila-col-xxl-6 {
		width: 50%
	}
	.uila-col-xxl-5 {
		width: 41.66666667%
	}
	.uila-col-xxl-4 {
		width: 33.33333333%
	}
	.uila-col-xxl-3 {
		width: 25%
	}
	.uila-col-xxl-2 {
		width: 16.66666667%
	}
	.uila-col-xxl-1 {
		width: 8.33333333%
	}
}