/**
 * --------------------------------------------------------
 * OneClick Framework
 * Common CSS
 * Shared Styles
 * Version: 2.0.0
 * --------------------------------------------------------
 */

/* ========================================================
   CSS Variables
======================================================== */

:root{

	/* Brand */

	--ocf-primary:#2271b1;
	--ocf-primary-hover:#135e96;

	/* Status */

	--ocf-success:#46b450;
	--ocf-warning:#ffb900;
	--ocf-danger:#d63638;
	--ocf-info:#72aee6;

	/* Neutral */

	--ocf-white:#ffffff;
	--ocf-black:#000000;

	/* Background */

	--ocf-bg:#f6f7f7;
	--ocf-surface:#ffffff;

	/* Text */

	--ocf-text:#1d2327;
	--ocf-text-light:#646970;

	/* Border */

	--ocf-border:#dcdcde;

	/* Radius */

	--ocf-radius-xs:3px;
	--ocf-radius-sm:6px;
	--ocf-radius:8px;
	--ocf-radius-lg:12px;
	--ocf-radius-xl:18px;

	/* Shadow */

	--ocf-shadow-xs:
		0 1px 2px rgba(0,0,0,.05);

	--ocf-shadow:
		0 2px 8px rgba(0,0,0,.08);

	--ocf-shadow-lg:
		0 12px 30px rgba(0,0,0,.15);

	/* Transition */

	--ocf-transition:
		all .25s ease;

	/* Width */

	--ocf-container:1400px;

}

/* ========================================================
   Reset
======================================================== */

*,
*::before,
*::after{

	box-sizing:border-box;

}

html{

	scroll-behavior:smooth;

	-webkit-text-size-adjust:100%;

}

body{

	margin:0;

	padding:0;

	background:var(--ocf-bg);

	color:var(--ocf-text);

	font-family:

		-apple-system,

		BlinkMacSystemFont,

		"Segoe UI",

		Roboto,

		Helvetica,

		Arial,

		sans-serif;

	font-size:16px;

	line-height:1.6;

}

img{

	max-width:100%;

	height:auto;

	border:0;

	display:block;

}

svg{

	max-width:100%;

}

iframe{

	max-width:100%;

	border:0;

}

figure{

	margin:0;

}

hr{

	border:none;

	border-top:1px solid var(--ocf-border);

	margin:35px 0;

}

/* ========================================================
   Typography
======================================================== */

h1,
h2,
h3,
h4,
h5,
h6{

	margin-top:0;

	margin-bottom:18px;

	font-weight:600;

	line-height:1.25;

	color:var(--ocf-text);

}

h1{

	font-size:36px;

}

h2{

	font-size:30px;

}

h3{

	font-size:24px;

}

h4{

	font-size:20px;

}

h5{

	font-size:18px;

}

h6{

	font-size:16px;

}

p{

	margin:0 0 18px;

	color:var(--ocf-text-light);

}

small{

	font-size:13px;

}

strong{

	font-weight:600;

}

em{

	font-style:italic;

}

blockquote{

	margin:30px 0;

	padding:18px 24px;

	border-left:4px solid var(--ocf-primary);

	background:#fff;

	font-style:italic;

}

code{

	padding:2px 6px;

	background:#f3f4f5;

	border:1px solid var(--ocf-border);

	border-radius:4px;

	font-family:

		Consolas,

		Monaco,

		monospace;

	font-size:13px;

}

pre{

	padding:20px;

	background:#1d2327;

	color:#fff;

	border-radius:8px;

	overflow:auto;

	font-size:14px;

	line-height:1.6;

}

pre code{

	padding:0;

	border:none;

	background:transparent;

	color:inherit;

}

/* ========================================================
   Links
======================================================== */

a{

	color:var(--ocf-primary);

	text-decoration:none;

	transition:var(--ocf-transition);

}

a:hover{

	color:var(--ocf-primary-hover);

	text-decoration:none;

}

a:focus{

	outline:2px solid var(--ocf-primary);

	outline-offset:2px;

}

/* ========================================================
   Lists
======================================================== */

ul,
ol{

	margin:0 0 20px 22px;

	padding:0;

}

li{

	margin-bottom:8px;

}

/* ========================================================
   Container
======================================================== */

.ocf-container{

	width:100%;

	max-width:var(--ocf-container);

	margin-left:auto;

	margin-right:auto;

	padding-left:20px;

	padding-right:20px;

}

.ocf-container-fluid{

	width:100%;

	padding-left:20px;

	padding-right:20px;

}

/* ========================================================
   Sections
======================================================== */

.ocf-section{

	padding:50px 0;

}

.ocf-section-sm{

	padding:25px 0;

}

.ocf-section-lg{

	padding:80px 0;

}
/* ========================================================
   Grid System
======================================================== */

.ocf-row{

	display:flex;

	flex-wrap:wrap;

	margin-left:-15px;

	margin-right:-15px;

}

[class^="ocf-col-"],
[class*=" ocf-col-"]{

	position:relative;

	width:100%;

	padding-left:15px;

	padding-right:15px;

}

.ocf-col-1{flex:0 0 8.333333%;max-width:8.333333%;}
.ocf-col-2{flex:0 0 16.666667%;max-width:16.666667%;}
.ocf-col-3{flex:0 0 25%;max-width:25%;}
.ocf-col-4{flex:0 0 33.333333%;max-width:33.333333%;}
.ocf-col-5{flex:0 0 41.666667%;max-width:41.666667%;}
.ocf-col-6{flex:0 0 50%;max-width:50%;}
.ocf-col-7{flex:0 0 58.333333%;max-width:58.333333%;}
.ocf-col-8{flex:0 0 66.666667%;max-width:66.666667%;}
.ocf-col-9{flex:0 0 75%;max-width:75%;}
.ocf-col-10{flex:0 0 83.333333%;max-width:83.333333%;}
.ocf-col-11{flex:0 0 91.666667%;max-width:91.666667%;}
.ocf-col-12{flex:0 0 100%;max-width:100%;}

/* ========================================================
   CSS Grid
======================================================== */

.ocf-grid{

	display:grid;

	gap:20px;

}

.ocf-grid-2{

	grid-template-columns:repeat(2,1fr);

}

.ocf-grid-3{

	grid-template-columns:repeat(3,1fr);

}

.ocf-grid-4{

	grid-template-columns:repeat(4,1fr);

}

.ocf-grid-5{

	grid-template-columns:repeat(5,1fr);

}

.ocf-grid-6{

	grid-template-columns:repeat(6,1fr);

}

/* ========================================================
   Flex Utilities
======================================================== */

.ocf-flex{

	display:flex;

}

.ocf-inline-flex{

	display:inline-flex;

}

.ocf-flex-wrap{

	flex-wrap:wrap;

}

.ocf-flex-nowrap{

	flex-wrap:nowrap;

}

.ocf-flex-column{

	flex-direction:column;

}

.ocf-flex-row{

	flex-direction:row;

}

.ocf-items-start{

	align-items:flex-start;

}

.ocf-items-center{

	align-items:center;

}

.ocf-items-end{

	align-items:flex-end;

}

.ocf-items-stretch{

	align-items:stretch;

}

.ocf-justify-start{

	justify-content:flex-start;

}

.ocf-justify-center{

	justify-content:center;

}

.ocf-justify-end{

	justify-content:flex-end;

}

.ocf-justify-between{

	justify-content:space-between;

}

.ocf-justify-around{

	justify-content:space-around;

}

.ocf-justify-evenly{

	justify-content:space-evenly;

}

/* ========================================================
   Gap Helpers
======================================================== */

.ocf-gap-5{gap:5px;}
.ocf-gap-10{gap:10px;}
.ocf-gap-15{gap:15px;}
.ocf-gap-20{gap:20px;}
.ocf-gap-25{gap:25px;}
.ocf-gap-30{gap:30px;}
.ocf-gap-40{gap:40px;}

/* ========================================================
   Display Helpers
======================================================== */

.ocf-block{display:block;}
.ocf-inline{display:inline;}
.ocf-inline-block{display:inline-block;}
.ocf-hidden{display:none !important;}
.ocf-visible{display:block !important;}

/* ========================================================
   Width Helpers
======================================================== */

.ocf-w-25{width:25%;}
.ocf-w-33{width:33.333333%;}
.ocf-w-50{width:50%;}
.ocf-w-75{width:75%;}
.ocf-w-100{width:100%;}

.ocf-max-400{max-width:400px;}
.ocf-max-600{max-width:600px;}
.ocf-max-800{max-width:800px;}
.ocf-max-1000{max-width:1000px;}

/* ========================================================
   Height Helpers
======================================================== */

.ocf-h-100{

	height:100%;

}

.ocf-min-vh-100{

	min-height:100vh;

}

/* ========================================================
   Margin Helpers
======================================================== */

.ocf-m-0{margin:0;}

.ocf-mt-5{margin-top:5px;}
.ocf-mt-10{margin-top:10px;}
.ocf-mt-15{margin-top:15px;}
.ocf-mt-20{margin-top:20px;}
.ocf-mt-30{margin-top:30px;}
.ocf-mt-40{margin-top:40px;}
.ocf-mt-50{margin-top:50px;}

.ocf-mb-5{margin-bottom:5px;}
.ocf-mb-10{margin-bottom:10px;}
.ocf-mb-15{margin-bottom:15px;}
.ocf-mb-20{margin-bottom:20px;}
.ocf-mb-30{margin-bottom:30px;}
.ocf-mb-40{margin-bottom:40px;}
.ocf-mb-50{margin-bottom:50px;}

.ocf-ml-auto{

	margin-left:auto;

}

.ocf-mr-auto{

	margin-right:auto;

}

/* ========================================================
   Padding Helpers
======================================================== */

.ocf-p-0{padding:0;}

.ocf-p-5{padding:5px;}
.ocf-p-10{padding:10px;}
.ocf-p-15{padding:15px;}
.ocf-p-20{padding:20px;}
.ocf-p-30{padding:30px;}
.ocf-p-40{padding:40px;}
.ocf-p-50{padding:50px;}

/* ========================================================
   Text Alignment
======================================================== */

.ocf-text-left{

	text-align:left;

}

.ocf-text-center{

	text-align:center;

}

.ocf-text-right{

	text-align:right;

}

.ocf-text-justify{

	text-align:justify;

}

/* ========================================================
   Responsive
======================================================== */

@media (max-width:992px){

	.ocf-grid-4,
	.ocf-grid-5,
	.ocf-grid-6{

		grid-template-columns:repeat(2,1fr);

	}

}

@media (max-width:768px){

	.ocf-row{

		margin-left:0;

		margin-right:0;

	}

	[class^="ocf-col-"],
	[class*=" ocf-col-"]{

		flex:0 0 100%;

		max-width:100%;

		padding-left:0;

		padding-right:0;

	}

	.ocf-grid-2,
	.ocf-grid-3,
	.ocf-grid-4,
	.ocf-grid-5,
	.ocf-grid-6{

		grid-template-columns:1fr;

	}

	.ocf-flex{

		flex-wrap:wrap;

	}

	.ocf-container,
	.ocf-container-fluid{

		padding-left:15px;

		padding-right:15px;

	}

}
/* ========================================================
   Buttons
======================================================== */

.ocf-btn{

	display:inline-flex;

	align-items:center;

	justify-content:center;

	gap:8px;

	padding:10px 18px;

	border:1px solid transparent;

	border-radius:var(--ocf-radius);

	background:var(--ocf-primary);

	color:#fff;

	font-size:15px;

	font-weight:600;

	cursor:pointer;

	text-decoration:none;

	transition:var(--ocf-transition);

	user-select:none;

}

.ocf-btn:hover{

	background:var(--ocf-primary-hover);

	color:#fff;

	transform:translateY(-1px);

}

.ocf-btn:focus{

	outline:2px solid var(--ocf-primary);

	outline-offset:2px;

}

.ocf-btn:disabled,
.ocf-btn.ocf-disabled{

	opacity:.6;

	cursor:not-allowed;

	pointer-events:none;

}

.ocf-btn-success{

	background:var(--ocf-success);

}

.ocf-btn-warning{

	background:var(--ocf-warning);

	color:#1d2327;

}

.ocf-btn-danger{

	background:var(--ocf-danger);

}

.ocf-btn-outline{

	background:transparent;

	border-color:var(--ocf-primary);

	color:var(--ocf-primary);

}

.ocf-btn-outline:hover{

	background:var(--ocf-primary);

	color:#fff;

}

.ocf-btn-sm{

	padding:6px 12px;

	font-size:13px;

}

.ocf-btn-lg{

	padding:14px 24px;

	font-size:17px;

}

.ocf-btn-block{

	display:flex;

	width:100%;

}

/* ========================================================
   Forms
======================================================== */

.ocf-form-group{

	margin-bottom:20px;

}

.ocf-label{

	display:block;

	margin-bottom:8px;

	font-weight:600;

	color:var(--ocf-text);

}

.ocf-input,
.ocf-select,
.ocf-textarea{

	width:100%;

	padding:10px 12px;

	border:1px solid var(--ocf-border);

	border-radius:var(--ocf-radius);

	background:#fff;

	color:var(--ocf-text);

	font-size:15px;

	transition:var(--ocf-transition);

}

.ocf-input:focus,
.ocf-select:focus,
.ocf-textarea:focus{

	border-color:var(--ocf-primary);

	box-shadow:0 0 0 3px rgba(34,113,177,.15);

	outline:none;

}

.ocf-textarea{

	min-height:140px;

	resize:vertical;

}

.ocf-checkbox,
.ocf-radio{

	display:flex;

	align-items:center;

	gap:8px;

	margin-bottom:10px;

}

.ocf-help{

	display:block;

	margin-top:6px;

	font-size:13px;

	color:var(--ocf-text-light);

}

/* ========================================================
   Input Group
======================================================== */

.ocf-input-group{

	display:flex;

	align-items:stretch;

}

.ocf-input-group .ocf-input{

	border-radius:var(--ocf-radius) 0 0 var(--ocf-radius);

}

.ocf-input-group .ocf-btn{

	border-radius:0 var(--ocf-radius) var(--ocf-radius) 0;

}

/* ========================================================
   Cards
======================================================== */

.ocf-card{

	background:var(--ocf-surface);

	border:1px solid var(--ocf-border);

	border-radius:var(--ocf-radius);

	box-shadow:var(--ocf-shadow);

	overflow:hidden;

}

.ocf-card-header{

	padding:18px 22px;

	border-bottom:1px solid var(--ocf-border);

	font-weight:600;

}

.ocf-card-body{

	padding:22px;

}

.ocf-card-footer{

	padding:18px 22px;

	border-top:1px solid var(--ocf-border);

	background:#fafafa;

}

.ocf-card-hover{

	transition:var(--ocf-transition);

}

.ocf-card-hover:hover{

	transform:translateY(-3px);

	box-shadow:var(--ocf-shadow-lg);

}

/* ========================================================
   Tables
======================================================== */

.ocf-table{

	width:100%;

	border-collapse:collapse;

	background:#fff;

	border:1px solid var(--ocf-border);

}

.ocf-table thead{

	background:#f3f4f5;

}

.ocf-table th{

	padding:14px 16px;

	text-align:left;

	font-weight:600;

	border-bottom:1px solid var(--ocf-border);

}

.ocf-table td{

	padding:14px 16px;

	border-bottom:1px solid #ececec;

	vertical-align:top;

}

.ocf-table tbody tr:hover{

	background:#fafafa;

}

.ocf-table-striped tbody tr:nth-child(even){

	background:#fcfcfc;

}

.ocf-table-responsive{

	width:100%;

	overflow-x:auto;

}

/* ========================================================
   List Group
======================================================== */

.ocf-list{

	list-style:none;

	margin:0;

	padding:0;

}

.ocf-list li{

	padding:12px 16px;

	border-bottom:1px solid var(--ocf-border);

}

.ocf-list li:last-child{

	border-bottom:none;

}

/* ========================================================
   Media Object
======================================================== */

.ocf-media{

	display:flex;

	align-items:flex-start;

	gap:16px;

}

.ocf-media-image{

	flex:0 0 auto;

}

.ocf-media-body{

	flex:1;

	min-width:0;

}

/* ========================================================
   Divider
======================================================== */

.ocf-divider{

	height:1px;

	background:var(--ocf-border);

	margin:30px 0;

}

/* ========================================================
   Responsive Forms
======================================================== */

@media (max-width:768px){

	.ocf-input-group{

		flex-direction:column;

	}

	.ocf-input-group .ocf-input,

	.ocf-input-group .ocf-btn{

		border-radius:var(--ocf-radius);

		width:100%;

	}

	.ocf-input-group .ocf-btn{

		margin-top:10px;

	}

	.ocf-btn{

		width:100%;

	}

}
/* ========================================================
   Alerts / Notices
======================================================== */

.ocf-alert{

	position:relative;

	padding:16px 20px;

	margin:20px 0;

	border:1px solid transparent;

	border-left-width:4px;

	border-radius:var(--ocf-radius);

	background:#fff;

	box-shadow:var(--ocf-shadow);

}

.ocf-alert-success{

	border-left-color:var(--ocf-success);

	background:#edf9ef;

	color:#1d2327;

}

.ocf-alert-info{

	border-left-color:var(--ocf-info);

	background:#eef7ff;

	color:#1d2327;

}

.ocf-alert-warning{

	border-left-color:var(--ocf-warning);

	background:#fff8e5;

	color:#1d2327;

}

.ocf-alert-danger{

	border-left-color:var(--ocf-danger);

	background:#fdecec;

	color:#1d2327;

}

.ocf-alert-close{

	position:absolute;

	right:14px;

	top:12px;

	cursor:pointer;

	font-size:20px;

	line-height:1;

	opacity:.7;

}

.ocf-alert-close:hover{

	opacity:1;

}

/* ========================================================
   Badges
======================================================== */

.ocf-badge{

	display:inline-block;

	padding:4px 10px;

	border-radius:999px;

	font-size:12px;

	font-weight:600;

	line-height:1.4;

}

.ocf-badge-primary{

	background:var(--ocf-primary);

	color:#fff;

}

.ocf-badge-success{

	background:var(--ocf-success);

	color:#fff;

}

.ocf-badge-warning{

	background:var(--ocf-warning);

	color:#1d2327;

}

.ocf-badge-danger{

	background:var(--ocf-danger);

	color:#fff;

}

.ocf-badge-info{

	background:var(--ocf-info);

	color:#1d2327;

}

.ocf-badge-light{

	background:#ececec;

	color:#1d2327;

}

/* ========================================================
   Tabs
======================================================== */

.ocf-tabs{

	display:flex;

	flex-wrap:wrap;

	gap:6px;

	border-bottom:1px solid var(--ocf-border);

	margin-bottom:25px;

}

.ocf-tab{

	padding:12px 18px;

	background:#fff;

	border:1px solid var(--ocf-border);

	border-bottom:none;

	border-radius:var(--ocf-radius) var(--ocf-radius) 0 0;

	cursor:pointer;

	transition:var(--ocf-transition);

}

.ocf-tab:hover{

	background:#f8f9fa;

}

.ocf-tab.active{

	background:var(--ocf-primary);

	color:#fff;

	border-color:var(--ocf-primary);

}

.ocf-tab-panel{

	display:none;

	padding:24px;

	border:1px solid var(--ocf-border);

	border-radius:0 0 var(--ocf-radius) var(--ocf-radius);

	background:#fff;

}

.ocf-tab-panel.active{

	display:block;

}

/* ========================================================
   Accordion
======================================================== */

.ocf-accordion{

	border:1px solid var(--ocf-border);

	border-radius:var(--ocf-radius);

	overflow:hidden;

	background:#fff;

}

.ocf-accordion-item{

	border-bottom:1px solid var(--ocf-border);

}

.ocf-accordion-item:last-child{

	border-bottom:none;

}

.ocf-accordion-header{

	padding:16px 20px;

	cursor:pointer;

	font-weight:600;

	background:#fafafa;

	transition:var(--ocf-transition);

}

.ocf-accordion-header:hover{

	background:#f3f4f5;

}

.ocf-accordion-content{

	display:none;

	padding:20px;

	background:#fff;

}

.ocf-accordion-item.active .ocf-accordion-content{

	display:block;

}

/* ========================================================
   Modal
======================================================== */

.ocf-modal{

	position:fixed;

	inset:0;

	display:none;

	align-items:center;

	justify-content:center;

	background:rgba(0,0,0,.55);

	z-index:99999;

	padding:20px;

}

.ocf-modal.active{

	display:flex;

}

.ocf-modal-dialog{

	width:100%;

	max-width:700px;

	background:#fff;

	border-radius:var(--ocf-radius-lg);

	box-shadow:var(--ocf-shadow-lg);

	overflow:hidden;

}

.ocf-modal-header{

	display:flex;

	align-items:center;

	justify-content:space-between;

	padding:20px 24px;

	border-bottom:1px solid var(--ocf-border);

}

.ocf-modal-body{

	padding:24px;

}

.ocf-modal-footer{

	padding:18px 24px;

	border-top:1px solid var(--ocf-border);

	display:flex;

	justify-content:flex-end;

	gap:10px;

}

.ocf-modal-close{

	cursor:pointer;

	font-size:22px;

	line-height:1;

}

/* ========================================================
   Dropdown
======================================================== */

.ocf-dropdown{

	position:relative;

	display:inline-block;

}

.ocf-dropdown-menu{

	position:absolute;

	top:100%;

	left:0;

	min-width:220px;

	background:#fff;

	border:1px solid var(--ocf-border);

	border-radius:var(--ocf-radius);

	box-shadow:var(--ocf-shadow);

	padding:8px 0;

	display:none;

	z-index:1000;

}

.ocf-dropdown.open .ocf-dropdown-menu{

	display:block;

}

.ocf-dropdown-menu a{

	display:block;

	padding:10px 16px;

	color:var(--ocf-text);

}

.ocf-dropdown-menu a:hover{

	background:#f6f7f7;

}

/* ========================================================
   Pagination
======================================================== */

.ocf-pagination{

	display:flex;

	flex-wrap:wrap;

	gap:8px;

	align-items:center;

	margin-top:25px;

}

.ocf-page{

	display:flex;

	align-items:center;

	justify-content:center;

	min-width:38px;

	height:38px;

	padding:0 12px;

	border:1px solid var(--ocf-border);

	border-radius:var(--ocf-radius-sm);

	background:#fff;

	text-decoration:none;

	color:var(--ocf-text);

	transition:var(--ocf-transition);

}

.ocf-page:hover{

	background:#f3f4f5;

}

.ocf-page.active{

	background:var(--ocf-primary);

	border-color:var(--ocf-primary);

	color:#fff;

}

/* ========================================================
   Navigation
======================================================== */

.ocf-nav{

	display:flex;

	flex-wrap:wrap;

	gap:10px;

	list-style:none;

	margin:0;

	padding:0;

}

.ocf-nav a{

	display:block;

	padding:10px 16px;

	border-radius:var(--ocf-radius);

	color:var(--ocf-text);

	transition:var(--ocf-transition);

}

.ocf-nav a:hover{

	background:#f3f4f5;

}

.ocf-nav .active a{

	background:var(--ocf-primary);

	color:#fff;

}

/* ========================================================
   Breadcrumb
======================================================== */

.ocf-breadcrumb{

	display:flex;

	flex-wrap:wrap;

	align-items:center;

	gap:8px;

	font-size:14px;

	margin-bottom:20px;

}

.ocf-breadcrumb a{

	color:var(--ocf-primary);

}

.ocf-breadcrumb-separator{

	color:var(--ocf-text-light);

}

/* ========================================================
   Responsive
======================================================== */

@media (max-width:768px){

	.ocf-tabs{

		flex-direction:column;

		border-bottom:none;

	}

	.ocf-tab{

		border-radius:var(--ocf-radius);

		border-bottom:1px solid var(--ocf-border);

	}

	.ocf-modal-dialog{

		max-width:100%;

	}

	.ocf-modal-footer{

		flex-direction:column;

	}

	.ocf-pagination{

		justify-content:center;

	}

}
/* ========================================================
   Progress Bars
======================================================== */

.ocf-progress{

	width:100%;

	height:10px;

	background:#ececec;

	border-radius:999px;

	overflow:hidden;

	position:relative;

}

.ocf-progress-sm{

	height:6px;

}

.ocf-progress-lg{

	height:16px;

}

.ocf-progress-bar{

	width:0;

	height:100%;

	background:var(--ocf-primary);

	border-radius:999px;

	transition:width .35s ease;

}

.ocf-progress-success .ocf-progress-bar{

	background:var(--ocf-success);

}

.ocf-progress-warning .ocf-progress-bar{

	background:var(--ocf-warning);

}

.ocf-progress-danger .ocf-progress-bar{

	background:var(--ocf-danger);

}

/* ========================================================
   Spinner
======================================================== */

.ocf-spinner{

	display:inline-block;

	width:22px;

	height:22px;

	border:3px solid rgba(0,0,0,.15);

	border-top-color:var(--ocf-primary);

	border-radius:50%;

	animation:ocf-spin .8s linear infinite;

}

.ocf-spinner-sm{

	width:16px;

	height:16px;

	border-width:2px;

}

.ocf-spinner-lg{

	width:36px;

	height:36px;

	border-width:4px;

}

@keyframes ocf-spin{

	from{

		transform:rotate(0deg);

	}

	to{

		transform:rotate(360deg);

	}

}

/* ========================================================
   Skeleton Loader
======================================================== */

.ocf-skeleton{

	position:relative;

	overflow:hidden;

	background:#ececec;

	border-radius:6px;

}

.ocf-skeleton::after{

	content:"";

	position:absolute;

	inset:0;

	transform:translateX(-100%);

	background:linear-gradient(

		90deg,

		transparent,

		rgba(255,255,255,.45),

		transparent

	);

	animation:ocf-skeleton 1.3s infinite;

}

@keyframes ocf-skeleton{

	100%{

		transform:translateX(100%);

	}

}

/* ========================================================
   Tooltip
======================================================== */

.ocf-tooltip{

	position:relative;

	cursor:help;

}

.ocf-tooltip::after{

	content:attr(data-tooltip);

	position:absolute;

	left:50%;

	bottom:calc(100% + 10px);

	transform:translateX(-50%);

	background:#1d2327;

	color:#fff;

	padding:6px 10px;

	border-radius:6px;

	font-size:12px;

	white-space:nowrap;

	opacity:0;

	pointer-events:none;

	transition:opacity .2s ease;

	z-index:999;

}

.ocf-tooltip:hover::after{

	opacity:1;

}

/* ========================================================
   Fade Animation
======================================================== */

.ocf-fade-in{

	animation:ocfFade .35s ease;

}

@keyframes ocfFade{

	from{

		opacity:0;

	}

	to{

		opacity:1;

	}

}

/* ========================================================
   Slide Animation
======================================================== */

.ocf-slide-up{

	animation:ocfSlideUp .35s ease;

}

@keyframes ocfSlideUp{

	from{

		opacity:0;

		transform:translateY(16px);

	}

	to{

		opacity:1;

		transform:translateY(0);

	}

}

/* ========================================================
   Pulse
======================================================== */

.ocf-pulse{

	animation:ocfPulse 1.8s infinite;

}

@keyframes ocfPulse{

	0%{

		transform:scale(1);

	}

	50%{

		transform:scale(1.04);

	}

	100%{

		transform:scale(1);

	}

}

/* ========================================================
   Avatar
======================================================== */

.ocf-avatar{

	width:48px;

	height:48px;

	border-radius:50%;

	object-fit:cover;

	display:block;

}

.ocf-avatar-sm{

	width:32px;

	height:32px;

}

.ocf-avatar-lg{

	width:72px;

	height:72px;

}

/* ========================================================
   Image Helpers
======================================================== */

.ocf-img-rounded{

	border-radius:var(--ocf-radius);

}

.ocf-img-circle{

	border-radius:50%;

}

.ocf-img-shadow{

	box-shadow:var(--ocf-shadow);

}

/* ========================================================
   Timeline
======================================================== */

.ocf-timeline{

	position:relative;

	margin:20px 0;

	padding-left:30px;

}

.ocf-timeline::before{

	content:"";

	position:absolute;

	left:10px;

	top:0;

	bottom:0;

	width:2px;

	background:var(--ocf-border);

}

.ocf-timeline-item{

	position:relative;

	margin-bottom:25px;

}

.ocf-timeline-item::before{

	content:"";

	position:absolute;

	left:-25px;

	top:4px;

	width:12px;

	height:12px;

	border-radius:50%;

	background:var(--ocf-primary);

}

.ocf-timeline-title{

	font-weight:600;

	margin-bottom:6px;

}

.ocf-timeline-time{

	font-size:13px;

	color:var(--ocf-text-light);

	margin-bottom:8px;

}

/* ========================================================
   Empty State
======================================================== */

.ocf-empty{

	padding:50px 20px;

	text-align:center;

	color:var(--ocf-text-light);

}

.ocf-empty-icon{

	font-size:48px;

	margin-bottom:15px;

	opacity:.45;

}

/* ========================================================
   Responsive Media
======================================================== */

@media (max-width:768px){

	.ocf-avatar-lg{

		width:56px;

		height:56px;

	}

	.ocf-timeline{

		padding-left:24px;

	}

	.ocf-timeline-item::before{

		left:-20px;

	}

}
/* ========================================================
   Utility Classes
======================================================== */

.ocf-hidden{

	display:none !important;

}

.ocf-visible{

	display:block !important;

}

.ocf-invisible{

	visibility:hidden !important;

}

.ocf-overflow-hidden{

	overflow:hidden !important;

}

.ocf-relative{

	position:relative;

}

.ocf-absolute{

	position:absolute;

}

.ocf-fixed{

	position:fixed;

}

.ocf-sticky{

	position:sticky;

	top:0;

}

/* ========================================================
   Border Helpers
======================================================== */

.ocf-border{

	border:1px solid var(--ocf-border);

}

.ocf-border-top{

	border-top:1px solid var(--ocf-border);

}

.ocf-border-bottom{

	border-bottom:1px solid var(--ocf-border);

}

.ocf-rounded{

	border-radius:var(--ocf-radius);

}

.ocf-rounded-lg{

	border-radius:var(--ocf-radius-lg);

}

.ocf-circle{

	border-radius:50%;

}

/* ========================================================
   Shadow Helpers
======================================================== */

.ocf-shadow-none{

	box-shadow:none;

}

.ocf-shadow-sm{

	box-shadow:var(--ocf-shadow-xs);

}

.ocf-shadow{

	box-shadow:var(--ocf-shadow);

}

.ocf-shadow-lg{

	box-shadow:var(--ocf-shadow-lg);

}

/* ========================================================
   Background Helpers
======================================================== */

.ocf-bg-white{

	background:var(--ocf-white);

}

.ocf-bg-primary{

	background:var(--ocf-primary);

	color:#fff;

}

.ocf-bg-success{

	background:var(--ocf-success);

	color:#fff;

}

.ocf-bg-warning{

	background:var(--ocf-warning);

	color:#1d2327;

}

.ocf-bg-danger{

	background:var(--ocf-danger);

	color:#fff;

}

.ocf-bg-info{

	background:var(--ocf-info);

	color:#1d2327;

}

/* ========================================================
   Text Helpers
======================================================== */

.ocf-text-primary{

	color:var(--ocf-primary);

}

.ocf-text-success{

	color:var(--ocf-success);

}

.ocf-text-warning{

	color:var(--ocf-warning);

}

.ocf-text-danger{

	color:var(--ocf-danger);

}

.ocf-text-info{

	color:var(--ocf-info);

}

.ocf-text-muted{

	color:var(--ocf-text-light);

}

.ocf-text-bold{

	font-weight:700;

}

.ocf-text-uppercase{

	text-transform:uppercase;

}

.ocf-text-lowercase{

	text-transform:lowercase;

}

.ocf-text-capitalize{

	text-transform:capitalize;

}

/* ========================================================
   Cursor Helpers
======================================================== */

.ocf-pointer{

	cursor:pointer;

}

.ocf-not-allowed{

	cursor:not-allowed;

}

/* ========================================================
   User Selection
======================================================== */

.ocf-no-select{

	user-select:none;

}

.ocf-select-text{

	user-select:text;

}

/* ========================================================
   Dark Mode
======================================================== */

@media (prefers-color-scheme:dark){

	:root{

		--ocf-bg:#1f1f1f;

		--ocf-surface:#2b2b2b;

		--ocf-text:#f3f3f3;

		--ocf-text-light:#c5c5c5;

		--ocf-border:#454545;

	}

	body{

		background:var(--ocf-bg);

		color:var(--ocf-text);

	}

	.ocf-card,
	.ocf-modal-dialog,
	.ocf-table,
	.ocf-alert,
	.ocf-accordion,
	.ocf-tab-panel{

		background:var(--ocf-surface);

		color:var(--ocf-text);

	}

	.ocf-table thead{

		background:#333;

	}

	.ocf-input,
	.ocf-select,
	.ocf-textarea{

		background:#2b2b2b;

		color:#fff;

		border-color:#555;

	}

	code{

		background:#333;

		color:#fff;

	}

}

/* ========================================================
   Print
======================================================== */

@media print{

	.ocf-btn,
	.ocf-modal,
	.ocf-spinner,
	.ocf-tooltip::after{

		display:none !important;

	}

	body{

		background:#fff;

		color:#000;

	}

	.ocf-card,
	.ocf-table{

		box-shadow:none;

		border:1px solid #999;

	}

	a{

		color:#000;

		text-decoration:underline;

	}

}

/* ========================================================
   Accessibility
======================================================== */

:focus-visible{

	outline:2px solid var(--ocf-primary);

	outline-offset:2px;

}

[aria-hidden="true"]{

	display:none !important;

}

.screen-reader-text{

	position:absolute;

	width:1px;

	height:1px;

	padding:0;

	margin:-1px;

	overflow:hidden;

	clip:rect(0,0,0,0);

	white-space:nowrap;

	border:0;

}

/* ========================================================
   Reduced Motion
======================================================== */

@media (prefers-reduced-motion:reduce){

	*,
	*::before,
	*::after{

		animation:none !important;

		transition:none !important;

		scroll-behavior:auto !important;

	}

}

/* ========================================================
   End of OneClick Framework Common CSS
======================================================== */