/* 
Custom Stylesheet 
BY Nunik Zain Suroya
*/
body,
html {
	height: 100%;
}

main {
	background: url(https://psbsurvey.smputama.sch.id/assets/img/symphony.png);
	padding-bottom: 75px;
	min-height: 100%;
}

.mrm {
	margin-right: 10px;
}

.no-p {
	padding: 0px !important;
}

.no-m {
	margin: 0px !important;
}

.mb {
	margin-bottom: 10px !important;
}

.mb-25 {
	margin-bottom: 25px !important;
}

.point {
	padding-right: 15px !important;
}

.tab-custom {
	background-color: #b2b2b2;
	margin: 8px 0;
	padding: 16px;
	border-radius: 6px;
	transition: 0.3s;
}

.tab-custom > a {
	color: #fff;
	white-space: nowrap;
}

.tab-custom.active {
	background-color: #2196f3;
}

.tab-custom:hover {
	background-color: #2196f3;
}

.upper {
	text-transform: uppercase;
}

.small {
	font-size: 10px;
}

.bold {
	font-weight: bold;
}

.nowrap {
	white-space: nowrap !important;
}

.cards-container {
	column-break-inside: avoid;
}

.cards-container .card {
	display: inline-block;
	overflow: visible;
}

div.material-table .table-footer {
	white-space: nowrap !important;
}

@media only screen and (max-width: 600px) {
	.cards-container {
		-webkit-column-count: 1;
		-moz-column-count: 1;
		column-count: 1;
	}
	.hide-tb {
		display: none !important;
	}
	.pd-r {
		padding: 0px !important;
	}
	.full_r {
		width: 100%;
	}
}

@media only screen and (min-width: 601px) {
	.cards-container {
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
	}
}

@media only screen and (min-width: 993px) {
	.cards-container {
		-webkit-column-count: 3;
		-moz-column-count: 3;
		column-count: 3;
	}
}

.full-width {
	width: 100%;
}

.text-center {
	text-align: center;
}

.icon-block {
	padding: 0 15px;
}

.icon-block .material-icons {
	font-size: inherit;
}

.nav-bottom {
	/* position: sticky; */
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 1000;
	background: white;
	padding-top: 10px;
	border-top: 1px solid #ddd;
}

.tabs-icon {
	font-size: 10px;
	overflow: hidden;
}

.tabs-icon i {
	display: block;
	margin-top: 0px;
	margin-bottom: -15px;
	font-size: 24px;
}

.tabs-icon a.active {
	background-color: #f3f3f3;
}

/* OVERWRITE MATERIAL CSS MIN WIDTH FOR MOBILE */

.tabs .tab {
	min-width: 50px !important;
	text-transform: none;
}

.tabs .tab a {
	font-size: 12px;
	color: #b1b1b1;
}

.tabs .tab a:hover,
.tabs .tab a.active {
	color: #1a237e;
}

nav ul a {
	color: #1a237e;
}

.no-pd {
	padding: 0 !important;
}

.no-mg {
	margin: 0 !important;
}

.no-mg-top {
	margin-top: 0 !important;
}

.align-right {
	text-align: right;
}

/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 600px) {
	.pd-logo {
		max-height: 56px;
	}
	.sembunyi {
		display: none !important;
	}
	.modal-size {
		min-height: 80% !important;
		width: 100% !important;
	}
	.bold-r {
		font-weight: 600;
		padding-top: 10px !important;
	}
	.small-r {
		font-size: 12px;
		padding: 10px 0 5px 0 !important;
	}
	.none {
		display: none !important;
	}

	/* ul.stepper .step .step-content {
        margin-right: 0px !important;
    }
    div.material-table .table-title {
        font-size: 14px !important;
    }
    div.material-table .table-header {
        padding: 0px !important;
    }
    div.material-table table th:first-child,
    div.material-table table td:first-child {
        padding: 0px !important;
    }
    div.material-table .table-footer .material-pagination li:first-child {
        margin: 0px !important;
    }
    div.material-table .table-footer {
        padding-right: 0px !important;
    }
    .tb-col {
        min-width: 100% !important;
        padding: 0px !important;
    } */
	div.material-table .table-footer .dataTables_length {
		display: none !important;
	}
}

/* Small devices (portrait tablets and large phones, 600px and up) */

@media only screen and (min-width: 600px) {
	.pd-logo {
		max-height: 64px;
	}
	.tab-hide {
		display: none !important;
	}
	.modal-size {
		width: 90% !important;
	}
}

/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 768px) {
	.pd-logo {
		max-height: 64px;
	}
	.modal-size {
		width: 80% !important;
	}
}

/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 992px) {
	.pd-logo {
		max-height: 64px;
	}
	.hidden {
		display: none !important;
	}
	.modal-size {
		width: 70% !important;
	}
}

@media only screen and (max-width: 992px) {
}

div.material-table {
	padding: 0;
}

div.material-table .hiddensearch {
	padding: 0 14px 0 24px;
	border-bottom: solid 1px #dddddd;
	display: none;
}

div.material-table .hiddensearch input {
	margin: 0;
	border: transparent 0 !important;
	height: 48px;
	color: rgba(0, 0, 0, 0.84);
}

div.material-table .hiddensearch input:active {
	border: transparent 0 !important;
}

div.material-table table {
	table-layout: fixed;
}

div.material-table .table-header {
	height: 64px;
	padding-left: 24px;
	padding-right: 14px;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	display: flex;
	-webkit-display: flex;
	border-bottom: solid 1px #dddddd;
}

div.material-table .table-header .actions {
	display: -webkit-flex;
	margin-left: auto;
}

div.material-table .table-header .btn-flat {
	min-width: 36px;
	padding: 0 8px;
}

div.material-table .table-header input {
	margin: 0;
	height: auto;
}

div.material-table .table-header i {
	color: rgba(0, 0, 0, 0.54);
	font-size: 24px;
}

div.material-table .table-footer {
	height: 56px;
	padding-left: 24px;
	padding-right: 14px;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
	-webkit-align-items: center;
	align-items: center;
	font-size: 12px !important;
	color: rgba(0, 0, 0, 0.54);
}

div.material-table .table-footer .dataTables_length {
	display: -webkit-flex;
	display: flex;
}

div.material-table .table-footer label {
	font-size: 12px;
	color: rgba(0, 0, 0, 0.54);
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	/* works with row or column */
	flex-direction: row;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}

div.material-table .table-footer .select-wrapper {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	/* works with row or column */
	flex-direction: row;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}

div.material-table .table-footer .dataTables_info,
div.material-table .table-footer .dataTables_length {
	margin-right: 32px;
}

div.material-table .table-footer .material-pagination {
	display: flex;
	-webkit-display: flex;
	margin: 0;
}

div.material-table .table-footer .material-pagination li:first-child {
	margin-right: 24px;
}

div.material-table .table-footer .material-pagination li a {
	color: rgba(0, 0, 0, 0.54);
}

div.material-table .table-footer .select-wrapper input.select-dropdown {
	margin: 0;
	border-bottom: none;
	height: auto;
	line-height: normal;
	font-size: 12px;
	width: 40px;
	text-align: right;
}

div.material-table .table-footer select {
	background-color: transparent;
	width: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	height: auto;
	margin-left: 20px;
}

div.material-table .table-title {
	font-size: 20px;
	color: #000;
}

div.material-table table tr td {
	/* padding: 0 0 0 56px; */
	height: 48px;
	font-size: 13px;
	color: rgba(0, 0, 0, 0.87);
	border-bottom: solid 1px #dddddd;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

div.material-table table tr td a {
	color: inherit;
}

div.material-table table tr td a i {
	font-size: 18px;
	color: rgba(0, 0, 0, 0.54);
}

div.material-table table tr {
	font-size: 12px;
}

div.material-table table th {
	font-size: 12px;
	font-weight: 500;
	color: #757575;
	cursor: pointer;
	white-space: nowrap;
	/* padding: 0; */
	height: 56px;
	/* padding-left: 56px; */
	vertical-align: middle;
	outline: none !important;
}

div.material-table table th.sorting_asc,
div.material-table table th.sorting_desc {
	color: rgba(0, 0, 0, 0.87);
}

div.material-table table th.sorting:after,
div.material-table table th.sorting_asc:after,
div.material-table table th.sorting_desc:after {
	font-family: "Material Icons";
	font-weight: normal;
	font-style: normal;
	font-size: 16px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	word-wrap: normal;
	-webkit-font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
	content: "arrow_back";
	-webkit-transform: rotate(90deg);
	display: none;
	vertical-align: middle;
}

div.material-table table th.sorting:hover:after,
div.material-table table th.sorting_asc:after,
div.material-table table th.sorting_desc:after {
	display: inline-block;
}

div.material-table table th.sorting_desc:after {
	content: "arrow_forward";
}

div.material-table table tbody tr:hover {
	background-color: #eee;
}

div.material-table table th:first-child,
div.material-table table td:first-child {
	padding: 0 0 0 24px;
}

/* div.material-table table th:last-child,
div.material-table table td:last-child {
    padding: 0 14px 0 0;
} */

/**
 * Multiple Select2
 */

.select2-container--material {
	max-width: 100% !important;
	/**
     * Textbox
     */
	/**
     * Dropdown
     */
	/**
     * Options
     */
	/**
     * Focused textbox
     */
	/**
     * Disabled textbox
     */
}

.select2-container--material ::-webkit-input-placeholder {
	color: inherit;
}

.select2-container--material ::-moz-placeholder {
	color: inherit;
}

.select2-container--material :-ms-input-placeholder {
	color: inherit;
}

.select2-container--material ::-ms-input-placeholder {
	color: inherit;
}

.select2-container--material ::placeholder {
	color: inherit;
}

.select2-container--material .select2-selection {
	/* @extend input */
	overflow: visible;
	font: inherit;
	touch-action: manipulation;
	margin: 0;
	line-height: inherit;
	border-radius: 0;
	box-sizing: inherit;
	/* @extend .form-control */
	display: block;
	width: 100%;
	color: #55595c;
	background-clip: padding-box;
	border: 1px solid rgba(0, 0, 0, 0.15);
	/* padding: .5rem 0 .6rem; */
	font-size: 1rem;
	line-height: 1.5;
	background-color: transparent;
	background-image: none;
	border-radius: 0;
	margin-top: 0.2rem;
	margin-bottom: 1rem;
	/* @extend input[type=text] */
	background-color: transparent;
	border: none;
	border-bottom: 1px solid #ccc;
	border-radius: 0;
	outline: 0;
	/* width: 100%; */
	font-size: 1rem;
	box-shadow: none;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	min-height: 2.1rem;
}

.select2-container--material .select2-selection .select2-selection__rendered {
	padding-left: 0;
}

.select2-container--material
	.select2-selection--single
	.select2-selection__rendered {
	float: left;
}

.select2-container--material
	.select2-selection--single
	.select2-selection__arrow {
	float: right;
}

.select2-container--material .select2-selection--multiple {
	/**
     * Multiple selected options
     */
	/**
     * Multiple selected option clear button
     */
}

.select2-container--material
	.select2-selection--multiple
	.select2-selection__rendered {
	width: 100%;
}

.select2-container--material
	.select2-selection--multiple
	.select2-selection__rendered
	li {
	list-style: none;
}

.select2-container--material
	.select2-selection--multiple
	.select2-selection__choice {
	/* @extend .mdl-chip */
	height: 32px;
	line-height: 32px;
	padding: 0 12px;
	border: 0;
	border-radius: 16px;
	background-color: #dedede;
	display: inline-block;
	color: rgba(0, 0, 0, 0.87);
	margin: 2px 0;
	font-size: 0;
	white-space: nowrap;
	/* @extend .mdl-chip__text */
	font-size: 13px;
	vertical-align: middle;
	display: inline-block;
	float: left;
	margin-right: 8px;
	margin-bottom: 4px;
}

.select2-container--material
	.select2-selection--multiple
	.select2-selection__choice__remove {
	/* Hide default content */
	font-size: 0;
	opacity: 0.38;
	cursor: pointer;
	float: right;
	margin-top: 4px;
	margin-right: -6px;
	margin-left: 6px;
	-webkit-transition: opacity;
	transition: opacity;
}

.select2-container--material
	.select2-selection--multiple
	.select2-selection__choice__remove::before {
	content: "cancel";
	/* @extend .material-icons */
	font-family: "Material Icons";
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
	color: #000;
}

.select2-container--material
	.select2-selection--multiple
	.select2-selection__choice__remove:hover {
	opacity: 0.54;
}

.select2-container--material .select2-search--inline .select2-search__field {
	width: 100%;
	margin-top: 0;
	/* Match input[type=text] */
	height: 34px;
	line-height: 1;
}

.select2-container--material .select2-dropdown {
	border: 0;
}

.select2-container--material .select2-dropdown .select2-search__field {
	min-height: 2.1rem;
	margin-bottom: 16px;
	border: 0;
	border-bottom: 1px solid #ccc;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.select2-container--material .select2-dropdown .select2-search__field:focus {
	border-bottom: 1px solid #4285f4;
	box-shadow: 0 1px 0 0 #4585f4;
}

.select2-container--material .select2-results__options {
	/* @extend .zf-shadow-depth* */
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	/* @extend .dropdown-content */
	background-color: #fff;
	margin: 0;
	min-width: 100%;
	max-height: 650px;
	overflow-y: auto;
	z-index: 999;
	will-change: width, height;
	/* @extend .dropdown-content inline styles */
}

.select2-container--material .select2-results__option {
	/* @extend .dropdown-content li */
	cursor: pointer;
	clear: both;
	color: rgba(0, 0, 0, 0.87);
	line-height: 1.5rem;
	text-align: left;
	text-transform: none;
	/* @extend .dropdown-content li>a, .dropdown-content li>span */
	/* font-size: 1.2rem; */
	display: block;
	padding: 1rem;
	max-width: 100% !important;
	/**
     * Disabled options
     */
	/**
     * Selected option
     */
	/**
     * Active/hovered option
     */
}

.select2-container--material .select2-results__option[aria-disabled="true"] {
	/* @extend .select-dropdown li.disabled */
	color: rgba(0, 0, 0, 0.3);
	background-color: transparent !important;
	cursor: context-menu;
	/* @extend .disabled */
	cursor: not-allowed;
}

.select2-container--material .select2-results__option[aria-selected="true"] {
	/* @extend .dropdown-content li:active, .dropdow-content li:hover */
	color: #4285f4;
	background-color: #eee;
}

.select2-container--material
	.select2-results__option--highlighted[aria-selected] {
	background-color: #ddd;
}

.select2-container--material.select2-container--focus .select2-selection {
	/* @extend input[type=text]:focus */
	border-bottom: 1px solid #4285f4;
	box-shadow: 0 1px 0 0 #4585f4;
}

.select2-container--material.select2-container--disabled .select2-selection {
	/* @extend .select-wrapper input.select-dropdown:disabled */
	color: rgba(0, 0, 0, 0.3);
	cursor: default;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

.select2-container--material.select2-container--disabled.select2-container--focus
	.select2-selection {
	box-shadow: none;
}
