/* =========================================================
   ROK RANKING FRAMEWORK
========================================================= */

.rok-ranking-framework {
	width: 100%;
	box-sizing: border-box;
}

.rok-ranking-framework *,
.rok-ranking-framework *::before,
.rok-ranking-framework *::after {
	box-sizing: border-box;
}


/* =========================================================
   HEADER
========================================================= */

.rok-ranking-framework-header {
	width: 100%;
	max-width: 850px;
	margin: 0 auto 28px;
	padding: 0;
	text-align:center;
}


/* =========================================================
   EYEBROW
========================================================= */

.rok-ranking-framework-eyebrow {
	display: block;

	margin: 0 0 10px;
	padding: 0;

	color: #FE7D02;

	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;

	letter-spacing: 0.08em;
	text-transform: uppercase;
}


/* =========================================================
   HEADING
========================================================= */

.rok-ranking-framework-heading {
	margin: 0 0 8px;
	padding: 0;
	color: #111111;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.15;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.rok-ranking-framework-description {
	margin: 0;
	padding: 0;
	color: #333333;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.55;
}


/* =========================================================
   TABLE WRAPPER
========================================================= */

.rok-ranking-framework-table-wrap {
	width: 100%;

	overflow-x: auto;

	background: #ffffff;

	border: 1px solid #E2E2E2;
	border-radius: 6px;
}


/* =========================================================
   TABLE
========================================================= */

.rok-ranking-framework-table {
	width: 100%;

	margin: 0;
	padding: 0;

	border-collapse: collapse;
	border-spacing: 0;

	table-layout: fixed;
}


/* =========================================================
   TABLE HEADER
========================================================= */

.rok-ranking-framework-table thead th {
	padding: 10px 10px;

	background: #EEEEEE;

	color: #737373;

	font-size: 8px;
	font-weight: 600;
	line-height: 1.2;

	text-align: left;
	text-transform: uppercase;
	letter-spacing: 0.05em;

	border: 0;
}


/* =========================================================
   COLUMN WIDTHS
========================================================= */

.rok-ranking-framework-table th:nth-child(1),
.rok-ranking-framework-table td:nth-child(1) {
	width: 27%;
}

.rok-ranking-framework-table th:nth-child(2),
.rok-ranking-framework-table td:nth-child(2) {
	width: 9%;
}

.rok-ranking-framework-table th:nth-child(3),
.rok-ranking-framework-table td:nth-child(3) {
	width: 17%;
}

.rok-ranking-framework-table th:nth-child(4),
.rok-ranking-framework-table td:nth-child(4) {
	width: 47%;
}


/* =========================================================
   TABLE BODY
========================================================= */

.rok-ranking-framework-table tbody tr {
	border-bottom: 1px solid #E2E2E2;

	transition:
		background-color 0.2s ease;
}

.rok-ranking-framework-table tbody tr:last-child {
	border-bottom: 0;
}

.rok-ranking-framework-table tbody tr:hover {
	background-color: #FFF9F4;
}


/* =========================================================
   TABLE CELLS
========================================================= */

.rok-ranking-framework-table tbody td {
	padding: 8px 10px;

	color: #111111;

	font-size: 9px;
	font-weight: 400;
	line-height: 1.4;

	vertical-align: middle;

	border: 0;
}


/* =========================================================
   FACTOR
========================================================= */

.rok-ranking-framework-factor {
	font-weight: 600 !important;
}


/* =========================================================
   WEIGHT
========================================================= */

.rok-ranking-framework-weight {
	white-space: nowrap;
}


/* =========================================================
   COVERAGE
========================================================= */

.rok-ranking-framework-coverage {
	white-space: nowrap;
}


/* =========================================================
   BADGE
========================================================= */

.rok-ranking-framework-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	padding: 3px 7px;
	border-radius: 20px;
	font-weight: 600;
	line-height: 1;

	white-space: nowrap;
}


/* =========================================================
   GREEN BADGE
========================================================= */

.rok-ranking-framework-badge-green {
	background: #D8F8E7;
	color: #15945B;
}


/* =========================================================
   YELLOW BADGE
========================================================= */

.rok-ranking-framework-badge-yellow {
	background: #FFF1C9;
	color: #B77A00;
}


/* =========================================================
   ORANGE BADGE
========================================================= */

.rok-ranking-framework-badge-orange {
	background: #FFE3CF;
	color: #D96500;
}


/* =========================================================
   ADDRESS
========================================================= */

.rok-ranking-framework-address {
	color: #333333 !important;
}


/* =========================================================
   ELEMENTOR EDITOR
========================================================= */

.elementor-editor-active
.rok-ranking-framework-table-wrap {
	overflow-x: auto;
}

.elementor-editor-active
.rok-ranking-framework-table {
	display: table;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

	.rok-ranking-framework-heading {
		font-size: 28px;
	}

	.rok-ranking-framework-table {
		min-width: 700px;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

	.rok-ranking-framework-header {
		margin-bottom: 22px;
	}

	.rok-ranking-framework-eyebrow {
		font-size: 10px;
	}

	.rok-ranking-framework-heading {
		font-size: 25px;
	}

	.rok-ranking-framework-description {
		font-size: 13px;
	}

	/*
	 * Keep table readable on mobile.
	 * User can horizontally scroll.
	 */
	.rok-ranking-framework-table {
		min-width: 700px;
	}

}