/* -------------------------------------- */
/* ----------- TABLE COLLAPSE ----------- */
/* -------------------------------------- */

/* expand modal from table row */
.team-member-table tr {cursor:pointer}

/* table bulk assign checkbox */
.table-checkbox {padding-left: 10px;}

/*
Generic Styling, for Desktops/Laptops
*/
table {
  width: 100%;
  border-collapse: collapse;
  word-wrap: break-word;
  font-size: 13px;
}

tr {padding-left: 10px;}

/* Zebra striping */
tr:nth-of-type(odd) {
  background: #303030;
}
th {
  background: #272727;
  font-weight: bold;
}
td, th {
  padding: 6px;
  border: none;
  text-align: left;
  padding-left: 10px;
}

/* assign users table */
.table-collapsed {
min-width: 100%;
}
.table-collapsed > thead {
  padding-bottom: 10px;
}
.table-dropdown-icon {
  background-color: transparent;
  border: none;
  color: #ff9800;
}
.table-collapsed .form-group{
  max-width: 300px;
}

.assign-rank-dropdown {
}
.dropdown-restricted {
max-width: 100%
}


/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
* Screen smaller than 760px */
@media
only screen and (max-width: 2000px) {

	/* Force table to not be like tables anymore */
	table.table-collapsed,
  .table-collapsed thead,
  .table-collapsed tbody,
  .table-collapsed th,
  .table-collapsed td,
  .table-collapsed tr {
		display: block;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	.table-collapsed thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	.table-collapsed tr { border: none; padding-left: 10px;}

	.table-collapsed td {
		/* Behave  like a "row" */
		border: none;
		border-bottom: none;
		position: relative;
		padding-left: 35%;
	}

	.table-collapsed td:before {
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 55%;
		padding-right: 10px;
		white-space: nowrap;
	}

  #unranked-users td:nth-of-type(1):before { content: "Name"; }
  #unranked-users td:nth-of-type(2):before { content: "Email"; }
  #unranked-users td:nth-of-type(3):before { content: "Added by"; }
  #unranked-users td:nth-of-type(4):before { content: "Added on"; }
  #unranked-users td:nth-of-type(5):before { content: "Rank"; }

  #group-interviewers td:nth-of-type(1):before { content: "Name"; }
  #group-interviewers td:nth-of-type(2):before { content: "Age"; }
  #group-interviewers td:nth-of-type(3):before { content: "Gender"; }
  #group-interviewers td:nth-of-type(4):before { content: "Location"; }
  #group-interviewers td:nth-of-type(5):before { content: "Languages"; }
  #group-interviewers td:nth-of-type(6):before { content: "Association"; }

}

/* ------------------------------------- */
/* TABLE MOBILE COLLAPSE */
/* ------------------------------------- */

/* Screen smaller than 760px */
@media
only screen and (max-width: 1440px) {

/* Force table to not be like tables anymore */
table.mobile-collapse,
.mobile-collapse thead,
.mobile-collapse tbody,
.mobile-collapse th,
.mobile-collapse td,
.mobile-collapse tr {
  display: block;
}

/* Hide table headers (but not display: none;, for accessibility) */
.mobile-collapse thead tr {
	position: absolute;
	top: -9999px;
	left: -9999px;
}

.mobile-collapse tr { border: none; padding-left: 10px;}

.mobile-collapse td {
	/* Behave  like a "row" */
	border: none;
	border-bottom: none;
	position: relative;
	padding-left: 35%;
}

.mobile-collapse td:before {
	/* Now like a table header */
	position: absolute;
	/* Top/left values mimic padding */
	top: 6px;
	left: 6px;
	width: 55%;
	padding-right: 10px;
	white-space: nowrap;
}

/* 	Data labels	*/
#group-table td:nth-of-type(1):before { content: "Name"; }
#group-table td:nth-of-type(2):before { content: "Rank"; }
#group-table td:nth-of-type(3):before { content: "Languages"; }

#rank-admin td:nth-of-type(1):before { content: "Name"; }
#rank-admin td:nth-of-type(2):before { content: "Association"; }
#rank-admin td:nth-of-type(3):before { content: "Languages"; }

#join-request-users td:nth-of-type(1):before { content: "Select"; }
#join-request-users td:nth-of-type(2):before { content: "Name"; }
#join-request-users td:nth-of-type(3):before { content: "Email"; }
#join-request-users td:nth-of-type(4):before { content: "Gender"; }
#join-request-users td:nth-of-type(5):before { content: "Age"; }
#join-request-users td:nth-of-type(6):before { content: "Languages"; }
#join-request-users td:nth-of-type(7):before { content: "Association"; }

#assigned-users td:nth-of-type(1):before { content: "Name"; }
#assigned-users td:nth-of-type(2):before { content: "Ranks"; }
#assigned-users td:nth-of-type(3):before { content: "Association"; }
#assigned-users td:nth-of-type(4):before { content: "Country"; }

#add-group-member-table td:nth-of-type(1):before { content: "Select"; }
#add-group-member-table td:nth-of-type(2):before { content: "Name"; }
#add-group-member-table td:nth-of-type(3):before { content: "Age"; }
#add-group-member-table td:nth-of-type(4):before { content: "Gender"; }
#add-group-member-table td:nth-of-type(5):before { content: "Location"; }
#add-group-member-table td:nth-of-type(6):before { content: "Languages"; }

/* 	Data Labels  */
  table#add-user-email-add	td:nth-of-type(1):before { content: "No."; }
  table#add-user-email-add  td:nth-of-type(2):before { content: "Email"; }

  table#add-user-email-alert	td:nth-of-type(1):before { content: "Email"; }
  table#add-user-email-alert  td:nth-of-type(2):before { content: "Alert"; }
  table#add-user-email-alert	td:nth-of-type(3):before { content: "Retry / Remove"; }

  table#assign-user-rank	td:nth-of-type(1):before { content: "Email"; }
  table#assign-user-rank  td:nth-of-type(2):before { content: "User Rank"; }

  table#assign-users	td:nth-of-type(1):before { content: "Email"; }
  table#assign-users  td:nth-of-type(2):before { content: "Project Manager"; }
  table#assign-users	td:nth-of-type(3):before { content: "Country Manager"; }
  table#assign-users	td:nth-of-type(4):before { content: "Field Manager"; }
  table#assign-users	td:nth-of-type(5):before { content: "Research Manager"; }
  table#assign-users	td:nth-of-type(6):before { content: "Dialer Operator"; }
  table#assign-users	td:nth-of-type(7):before { content: "Resource Manager"; }
  table#assign-users	td:nth-of-type(8):before { content: "Supervisor"; }
  table#assign-users	td:nth-of-type(9):before { content: "Survey Manager"; }
  table#assign-users	td:nth-of-type(10):before { content: "Quality Controller"; }
  table#assign-users	td:nth-of-type(11):before { content: "Agent"; }

  table#team-xs	td:nth-of-type(1):before { content: "Name"; }
  table#team-xs td:nth-of-type(2):before { content: "Position"; }


}



/* --------------------------------------- */
/* ------------- PANEL TABLE ------------- */
/* --------------------------------------- */

/* panel-table styling */
.panel-table {
  border: none;} /* not working */
.panel-table > tbody > tr:nth-child(odd) {
  background-color: transparent; /* striped background (or not) */}
.panel-table > tbody > tr:hover {
  background-color: #212121;cursor: pointer;}
.panel-table > thead > tr > th,
.panel-table > tbody > tr > td,
.panel-table > tfoot > tr > th {
    padding: 15px;
    text-align: left;
    border-bottom:1px solid #212121;}
.panel-table > tbody > tr > td {
  background-color: transparent; color: #999999;}
.panel-table > thead > tr > th, .panel-table > tfoot > tr > th{
  background-color: rgba(0, 150, 136, 0.8);}
.panel-table > tfoot {border: none !important;} /* not working */
/* panel-table styling */
.panel-table i{font-size: 18px;}