/* Large devices (large desktops, 1200px and up) */
@media (max-width: 1200px) {
	#dashboard #d-balance #balance-value {
		font-size: 40px;
	}

	#dashboard #d-off-duty .heading span {
		display: inline-block;
	}
}

/* Medium devices (desktops, 992px and up) */
@media (max-width: 992px) {
	.list-group .list-group-item .list-group-item-text .row div.list-group-item-periods,
	.list-group .list-group-item .list-group-item-text .row div.list-group-item-desc {
		flex-direction: column;
	}

	.list-group .list-group-item .list-group-item-text .row div.list-group-item-periods p,
	.list-group .list-group-item .list-group-item-text .row div.list-group-item-desc p {
		white-space: normal;
		text-align: center;
	}

	.list-group .list-group-item .list-group-item-text .row div.list-group-item-periods p:first-child,
	.list-group .list-group-item .list-group-item-text .row div.list-group-item-desc p:first-child {
		margin-right: 0 !important;
		margin-top: 5px;
	}

	#dashboard #d-off-duty:after {
		transform: translateY(10px) rotate(20deg);
	}
}

/* Small devices (tablets, 768px and up) */
@media (max-width: 768px) {
	.form-control::-moz-placeholder,
	.form-group .form-control::-moz-placeholder {
	  font-weight: normal;
	  font-size: 14px;
	}
	.form-control:-ms-input-placeholder,
	.form-group .form-control:-ms-input-placeholder {
	  font-weight: normal;
	  font-size: 14px;
	}
	.form-control::-webkit-input-placeholder,
	.form-group .form-control::-webkit-input-placeholder {
	  font-weight: normal;
	  font-size: 14px;
	}

	body {
		font-size: 14px;
	}

	.margin-top-15-sm {
		margin-top: 15px;
	}

	/* Main nav */
	#main-nav {
		width: 280px;
		min-width: 280px;
		max-width: 280px;
		transition: transform .2s ease-out;
		transform: translateX(-280px);
		z-index: 15000;
	}
	#main-nav.responsive-toggle {
		transform: translateX(0);
	}

	/* Page header */
	.page-header {
		left: 0;
		padding: 13px 24px 13px 58px;
		background: rgba(52, 73, 94, 1);
		color: #fff;
		box-shadow: none;
	}
	.page-header h1 {
		font-size: 20px;
	}
	.page-header button img {
		margin-right: 0;
	}
	.page-header button img+span {
		display: none;
	}
	.page-header #disconnect {
		background: rgba(52, 73, 94, 1);
	}
	.page-header #disconnect::before {
		background: rgba(0, 0, 0, 0) linear-gradient(to right, rgba(52, 73, 94, 0), rgba(52, 73, 94, 0.5), rgba(52, 73, 94, 0.8), rgba(52, 73, 94, 1)) repeat scroll 0 0
	}
	div#avatar-icon,
	img#avatar-icon {
		background: rgba(255,255,255,.15);
		color: #fff;
		font-size: 12px;
	}
	div#avatar-icon.user-first-initial-a, div#avatar-icon.user-first-initial-n { background: rgba(255,255,255,.15) ; }
	div#avatar-icon.user-first-initial-b, div#avatar-icon.user-first-initial-o { background: rgba(255,255,255,.15) ; }
	div#avatar-icon.user-first-initial-y, div#avatar-icon.user-first-initial-p { background: rgba(255,255,255,.15) ; }
	div#avatar-icon.user-first-initial-d, div#avatar-icon.user-first-initial-q { background: rgba(255,255,255,.15) ; }
	div#avatar-icon.user-first-initial-e, div#avatar-icon.user-first-initial-m { background: rgba(255,255,255,.15) ; }
	div#avatar-icon.user-first-initial-f, div#avatar-icon.user-first-initial-r { background: rgba(255,255,255,.15) ; }
	div#avatar-icon.user-first-initial-g, div#avatar-icon.user-first-initial-s { background: rgba(255,255,255,.15) ; }
	div#avatar-icon.user-first-initial-h, div#avatar-icon.user-first-initial-t { background: rgba(255,255,255,.15) ; }
	div#avatar-icon.user-first-initial-i, div#avatar-icon.user-first-initial-u { background: rgba(255,255,255,.15) ; }
	div#avatar-icon.user-first-initial-j, div#avatar-icon.user-first-initial-v { background: rgba(255,255,255,.15) ; }
	div#avatar-icon.user-first-initial-k, div#avatar-icon.user-first-initial-w { background: rgba(255,255,255,.15) ; }
	div#avatar-icon.user-first-initial-l, div#avatar-icon.user-first-initial-x { background: rgba(255,255,255,.15) ; }
	div#avatar-icon.user-first-initial-c, div#avatar-icon.user-first-initial-z { background: rgba(255,255,255,.15) ; }

	.page-header #menu-opener {
		position: absolute;
		top: 2px;
		left: 6px;
		display: block;
		border-radius: 50%;
		width: 37px;
		height: 37px;
		text-align: center;
		cursor: pointer;
		padding-top: 10px;
	}
	.page-header #menu-opener:hover {
		opacity: 0.8;
	}

	h2 {
		font-size: 16px;
	}

	#avatar-icon {
		height: 34px;
		width: 34px;
	}

	/* Body content */
	#body-content {
		padding: 10px 15px 20px;
		margin-left: 0;
		margin-top: 48px;
	}
	#body-content.contains-tabs {
		margin-top: 95px;
		padding-top: 0;
	}

	/* Alerts */
	#alert-wrapper {
		bottom: 0;
		right: 0;
		left: 0;
		border-radius: 0;
		display: block;
	}
	.alert {
		margin: 0;
		border-radius: 0
	}

	/* Forms */
	.form-control {
		font-size: 14px;
	}
	.form-group.label-floating label.control-label, .form-group.label-placeholder label.control-label,
	.form-group .checkbox label, .form-group .radio label, .form-group label {
		font-size: 14px;
	}
	.checkbox .checkbox-material, label.checkbox-inline .checkbox-material {
		top: 5px;
	}
	.checkbox .checkbox-material .check, label.checkbox-inline .checkbox-material .check {
		margin-right: 5px;
	}

	/* Footer */
	#body-content > footer {
	margin: 20px -15px -19px;
	}

	/* Backdrop */
	.backdrop {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0,0,0,.65);
		z-index: 12000;
	}

	/* List group */
	.list-group:not(.list-group-modal) {
		margin: -10px -15px -20px;
    }
	#body-content.contains-tabs .list-group {
		margin-top: 0;
    }

    .list-group .list-group-item {
        padding: 12px;
    }

    .list-group .list-group-item .row-picture img,
    .list-group .list-group-item .row-action-primary img,
    .list-group .list-group-item .row-picture i,
    .list-group .list-group-item .row-action-primary i,
    .list-group .list-group-item .row-picture label,
    .list-group .list-group-item .row-action-primary label,
	.list-group .list-group-item .row-picture div.avatar-icon,
	.settings-div .avatar-icon
	 {
        height: 35px;
        width: 35px;
    }
	.list-group .list-group-item .row-picture div.avatar-icon,
	.settings-div div.avatar-icon {
    	font-size: 12px;
	}
    .list-group .list-group-item .list-group-item-heading {
        font-size: 15px;
        line-height: 1em;
    }
    .list-group .list-group-item .list-group-item-text {
        font-size: 13px;
	}
	#list-event-pending.list-group .list-group-item .list-group-item-text {
		margin-left: -50px;
	}
    .list-group-item-text .material-icons {
        font-size: 20px;
    }
    .list-group-item-text img {
        width: 20px;
        height: 20px;
    }
    .list-group .list-group-separator::before {
        width: calc(100% - 63px);
    }
	.list-group .list-group-item-heading-2el {
 		display: block;
 	}

	.ui-tabview.ui-tabview-top > .ui-tabview-nav {
		margin: 0;
		background: rgba(52, 73, 94, 1);
		border-bottom: none;
		position: fixed;
		z-index: 6;
		left: 0;
		right: 0;
		top: 48px;
	}
	.ui-tabview .ui-tabview-nav li a {
		color: rgba(255,255,255, 0.46);
	}
	.ui-tabview .ui-tabview-nav li.ui-tabview-selected a,
	.ui-tabview .ui-tabview-nav li.ui-state-disabled a,
	.ui-tabview .ui-tabview-nav li.ui-state-processing a {
		color: #fff;
	}
	.ui-tabview .ui-tabview-nav li.ui-state-disabled a {
		color: rgba(255,255,255, 0.54);
	}
	.ui-tabview .ui-tabview-nav li.ui-tabview-selected {
		border-bottom-color: rgba(255,255,255,.4);
	}
	.ui-tabview .ui-tabview-panel {
		padding: 0;
	}

	/* Search */
	.ui-tabview.ui-tabview-top .form-group {
		margin-bottom: 0;
	}
	.ui-tabview.ui-tabview-top .form-group .search-before {
		top: 10px;
		left: 18px;
		color: rgba(255,255,255,.2);
	}
	.ui-tabview.ui-tabview-top .form-group input#search {
		margin: 3px 8px 6px;
		width: calc(100% - 16px); /* margin 8px right + left */
		background: rgba(255,255,255,.05);
		color: #fff;
		box-shadow: none;
		font-weight: 300;
		transition: background .2s ease-in;
	}	
	.ui-tabview.ui-tabview-top .form-group input#search:hover,
	.ui-tabview.ui-tabview-top .form-group input#search:focus {
		box-shadow: none;
		background: rgba(255,255,255,.15);
	}
	.ui-tabview.ui-tabview-top .form-group input#search + button#resetSearch {
		top: 7px;
		right: 10px;
		color: #fff;
	}

	/* Notification */
	.notif {
		width: 100%;
		left: 0;
		transform: inherit;
		margin: 0;
		border-radius: 0;
		top: inherit;
		bottom: 0;
	}

	/* Button round */
	.btn.btn-fab {
		height: 48px;
		min-width: 48px;
		width: 48px;
	}

  .btn.btn-fab.btn-fab-small {
    height: 36px;
    min-width: 36px;
    width: 36px;
  }

  .list-group .list-group-item .list-group-item-text .row div.list-group-item-periods,
  .list-group .list-group-item .list-group-item-text .row div.list-group-item-desc {
	  flex-direction: row;
  }

  .list-group .list-group-item .list-group-item-text .row div.list-group-item-periods p,
  .list-group .list-group-item .list-group-item-text .row div.list-group-item-desc p {
	  white-space: initial;
	  text-align: left;
  }

  .list-group .list-group-item .list-group-item-text .row div.list-group-item-periods p:first-child,
  .list-group .list-group-item .list-group-item-text .row div.list-group-item-desc p:first-child {
	  margin-right: 10px !important;
	  margin-top: 0;
  }

  input-modal .ui-calendar .ui-datepicker {
	  margin-top: -245px;
  }

  #dashboard {
	margin-right: -15px;
	margin-left: -15px;
  }
}

/* Big Smartphone */
@media (max-width: 560px) {
	.list-group .list-group-item .list-group-item-text .row div.list-group-item-periods,
	.list-group .list-group-item .list-group-item-text .row div.list-group-item-desc {
		flex-direction: column;
	}

	.list-group .list-group-item .list-group-item-text .row div.list-group-item-periods p,
	.list-group .list-group-item .list-group-item-text .row div.list-group-item-desc p {
		white-space: normal;
		text-align: center;
	}

	.list-group .list-group-item .list-group-item-text .row div.list-group-item-periods p:first-child,
	.list-group .list-group-item .list-group-item-text .row div.list-group-item-desc p:first-child {
		margin-right: 0 !important;
		margin-top: 5px;
	}

	#dashboard #d-balance,
	#dashboard #d-reminder,
	#dashboard #d-upcoming,
	#dashboard #d-off-duty {
		padding-left: 40px;
	}
	#dashboard #d-balance > div:first-child:before,
	#dashboard #d-off-duty > div:first-child:before {
		font-size: 28px;
		top: 7px;
		left: -34px;
	}

	#dashboard #d-reminder > div:first-child:before,
	#dashboard #d-upcoming > div:first-child:before {
		font-size: 26px;
		top: 7px;
		left: -34px;
	}

	#dashboard #d-reminder ul, #dashboard #d-upcoming ul {
		margin-left: -28px;
	}
}

/* Smartphone */
@media (max-width: 380px) {
	input-modal .ui-calendar .ui-datepicker {
		left: 10px;
	}

	#dashboard #d-balance, #dashboard #d-reminder, #dashboard #d-upcoming, #dashboard #d-off-duty {
		padding-left: 12px;
	}
	#dashboard #d-balance .heading, #dashboard #d-reminder .heading, #dashboard #d-upcoming .heading, #dashboard #d-off-duty .heading {
		padding-left: 25px;
	}
	#dashboard #d-balance > div:first-child:before {
		left: -3px;
		font-size: 24px;
		top: 9px;
	}
	#dashboard #d-off-duty > div:first-child:before,
	#dashboard #d-reminder > div:first-child:before,
	#dashboard #d-upcoming > div:first-child:before {
		left: -3px;
		font-size: 22px;
		top: 9px;
	}

	#dashboard #d-reminder ul, #dashboard #d-upcoming ul {
		margin-left: 0;
	}
}

/* Small smartphone */
@media (max-width: 330px) {
	/* Settings */
	.settings-div {
		flex-direction: column;
		align-items: flex-start;
	}
}