html{
	font-size: 90%;
}

body{
	background-color: #d6d6d6;
	font-family: 'Roboto', sans-serif;
}


#topo{
	
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,0275d8+100&0.19+89,1+100 */
background: -moz-linear-gradient(top, rgba(0,0,0,0.19) 0%, rgba(2,104,192,0.19) 89%, rgba(2,117,216,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.19) 0%,rgba(2,104,192,0.19) 89%,rgba(2,117,216,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0.19) 0%,rgba(2,104,192,0.19) 89%,rgba(2,117,216,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#30000000', endColorstr='#0275d8',GradientType=0 );	
	
	
}

.side-item{
	color: darkblue;
	margin-top: 20px;
}

 .important{
 	color:darkred;
 	font-weight: bolder;
 	font-size: 110%;
 }
 
pre{
	font-family: 'Roboto', sans-serif;
	font-size: inherit;
}

h1,h2,h3,h4,h5{
	margin: 15px 0px;
}

p+h3{
	margin-top: 40px;
	font-size: 18pt;
}

ins{
	text-decoration: none;
	font-family: "Material Icons";
	font-size: 15pt;
	line-height: inherit;
	vertical-align: -15%;
	display: inline-block;
	opacity: 0.7;
	margin-right: 3px;
}

fieldset{
	padding: 15px;
	border: 1px solid #eee;
	border-radius: 10px;
	margin-bottom: 20px;
}

.card{
	min-width: 250px;
	max-width: 250px;
}

.col-card{
	margin-bottom: 20px;
	max-width: 280px;
}

.nav-link-big{  
   	font-size: 19px !important;
 	height: 55px !important;
 	line-height: 39px !important;
 }
 
 .card:hover{
 box-shadow: 5px 5px 5px #b8b8b8;
 
 }
.card-title a,
.card-title a:hover {
  color: #2b3f49;
  text-decoration: none;
}
 
 li.active{
 	background-color: #2b3f49 !important;
 }
    
@media (min-width:992px){
#user-nav{
	border-right: 1px hsla(0,0%,100%,0.4) solid;
	border-left: 1px hsla(0,0%,100%,0.4) solid;
	margin-right: 5px;
}

#plan-nav{
  border-right: 1px hsla(0,0%,100%,0.4) solid;
  margin-right: 5px;
  padding-right: 5px;
}
}

.nav-link{
	font-size: 12px;
	height: 43px;
	line-height: 30px;
}

.content{
	padding-bottom: 15px;
}

.control{
	margin-left: 3px;
}

.main-container{
	background-color: white;
	box-shadow: 1px 1px 6px 2px rgba(0,0,0,0.3);
	border: 1px solid #AAA;
}

.container {
    padding-right: 0px;
    padding-left: 0px;
}

@media (min-width: 1100px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 95%;
    }
}

.footer-note{
	margin:10px;
	color: #777;
	font-size: 70%;
}

.navbar{
	margin-bottom: 15px;
	min-height: 50px;
	border-top: #00ffff 1px solid;
	border-bottom: #ff6800 2px solid;
	background: #002227 !important;
}

.navbar-toggler{
	background: #0f383e;
}

.navbar a,
.navbar a:hover {
	color: white !important;
}

.navbar a[href]:hover{
	color: #ffa668 !important;
}

.navbar-inverse .navbar-nav .nav-link:focus, .navbar-inverse .navbar-nav .nav-link {
    color: rgba(255,255,255,.75);
}

.navbar-inverse .navbar-nav .nav-link:focus, .navbar-inverse .navbar-nav .nav-link:hover {
    color: rgba(255,255,255, 1);
}

#topo{
	height: 120px;
	position: relative;
}

#topo a.home{
	display: block;
	position: absolute;
	top: 0;
	bottom:0;
	left: 0;
	right: 0;
}

.main-photo {
	height: 250px;
	width: 100%;
	background-size: cover;
	border: 1px solid #cfc;
	margin-bottom: 20px;
}

#logo img{
	margin:15px;
	position: absolute;
}

#supertitle{
	font-family: 'Roboto', sans-serif;
	font-size: 48px;
	position: absolute;
	bottom: 48px;
	left: 10px;
	font-weight: bolder;
	text-shadow: 2px 2px #AAA;
}

#title{
	font-size: 24px;
	position: absolute;
	bottom: 40px;
	left: 10px;
	line-height: 100%;
}

#subtitle{
	font-size: 18px;
	position: absolute;
	bottom: 14px;
	left: 10px;
}

#sys-name{
	color: white;
	font-size: 18px;
	line-height: 35px;
	flex: 1;
}

#sys-name a,
#sys-name a:hover{
	color: inherit;
	text-decoration: none;
}

#navbarSupportedContent{
	align-items: right;
	justify-content: flex-end;
}

.btn_tag{
	color: white;
    padding: 3px 5px;
    line-height: 110%;
    border-radius: 10px;
    margin: 1px;
    font-size: x-small;
}

/*
@media (min-width: 992px){
	#sys-name{
		position: absolute;
		padding: 5px 10px;
		top:0;
		left:0;
		right: 0;
		border-bottom: 1px solid white;
	}
	.navbar{
		padding-top: 40px;
	}
}
*/

.equip-list article {
	padding: 10px;
	position: relative;
	background: rgba(0,0,0,0.1);
	border-radius: 5px;
	margin: 5px;
	margin-bottom: 15px;
	border: hsl(120, 60%, 30%) 1px solid;
	box-shadow: 2px 2px 2px #ccc;
}

.equip-list article:nth-of-type(odd){
	background: rgba(0,0,0,0.05);
}

.equip-list article .equip-header{
	padding-left: 110px;
	padding-right: 240px;
	min-height: 90px;
	position: relative;
}

.equip-list article .equip-header>p {
	margin: 0;
}

.equip-list article .equip-name{
	font-weight: bold;
}

.equip-list article a.equip-req{
	background: hsl(135, 100%, 35%);
	color: white;
	font-weight: bold;
	text-align: center;
	display: block;
	border-radius: 4px;
	padding: 6px 10px;
	width: 200px;
	position: absolute;
	right: 20px;
	top: 20px;
}

.equip-list article a.equip-req:focus,
.equip-list article a.equip-req:hover{
	text-decoration: none;
	background:  hsl(135, 100%, 25%);
}

.equip-list article a.equip-req:active{
	background:  hsl(135, 100%, 15%);
}

.equip-list article .equip-photo{
	background-color: #efefef;
	background-size: cover;
	background-position: center center;
	border: 1px solid #ccc;
	border-radius: 5px;
	width: 90px;
	height: 90px;
	position: absolute;
	left: 0px;
	top: 0px;
}

.equip-list article .equip-photo.empty{
	background-image: url("../images/no-equip-image.png");
}

.equip-list article .equip-photo.empty::before{
	content: "foto indisponível";
	color: #666;
	position: absolute;
	bottom: 5px;
	left: 0px;
	right: 0px;
	text-align: center;
	margin: auto;
}

.equip-list article .equip-details-body{
	margin: 5px;
	margin-top: 20px;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	background: #ddd;
}

.side-item{
	color: hsl(24, 100%, 45%);
	font-size: 12pt;
	font-weight: bold;
	margin-bottom: 5px;
}

.side-content p{
	font-size: 10pt;
}

.location-map{
	border: hsl(24, 100%, 50%) 1px solid;
	position: relative;
	overflow: hidden;
}

.top_bar{
	height: 45px;
	background: #262721;
	border-bottom: #0af6f4 solid 1px;
	margin-bottom: 20px;
	width: 100%;
	position: relative;
	top: 0px;
	left: 0px;
	box-sizing: content-box;

}

#usp_banner{

	color: #d0d0d0;
	text-decoration: none;
	background: transparent url('../images/logo_usp_small.png') no-repeat top left;
	display:block;
	padding: 13px;
	padding-left: 120px;
	height: 45px;
	width: 400px;
	float: left;
}

.finished-requests article{
	opacity: 0.7;
}


.request-list article{
	padding: 10px;
	margin: 30px 30px;
	border: 1px solid hsl(180, 40%, 50%);
	border-radius: 5px;
	box-shadow: 1px 1px 2px #ccc;
	position: relative;
}

.request-list article .request-header{
	position: relative;
	padding-right: 230px;
	padding-left: 100px;
	min-height: 60px;
	margin-bottom: 10px;
}

.request-list article .request-header>div{
	font-weight: bold;
}

.request-list .request-id::before{
	content: "# ";
}

.request-list article .request-header>div.request-equip{
	font-size: 16pt;
}

.request-list article .request-details{
	font-weight: bold;
}

.request-list article .request-header>div.request-id{
	background: #002227;
	color: white;
	border-radius: 5px;
	padding: 12px;
	position: absolute;
	top: 0px;
	left: 0px;
}

.request-list article .request-header>div.request-status{
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	padding: 5px;
	width: 225px;
	text-align: center;
	background: white;
	border: 1px solid #ccc;
	border-radius: 5px;
}

.request-list article .request-header>div.request-status::before{
	content: "status atual:";
	display: block;
	font-weight: normal;
	font-size: .8em;
}

.request-list article .msg-link,
.request-list article .new-msg-link{
	background: white;
	padding: 5px 10px;
	border-radius: 5px;
	border: hsl(180, 40%, 50%) 1px solid;
	font-weight: bold;
	position: absolute;
	color: hsl(180, 40%, 30%);
	font-size: 10pt;
}

.request-list article .msg-link {
	top: 70px;
	right: 10px;
}

.request-list article .new-msg-link {
	top: 70px;
	right: 147px;
}

.request-list article .msg-link .msg-link-label::before{
	content: "forum";
}

.request-list article .new-msg-link .new-msg-link-label::before{
	content: "chat";
}

.request-list article .msg-link .msg-link-label::before,
.request-list article .new-msg-link .new-msg-link-label::before{
	font-family: "Material Icons";
	margin-right: 10px;
	vertical-align: middle;
	text-rendering: optimizeLegibility;
	font-weight: normal;
	font-size: 18pt;
	line-height: 18pt;
}

.request-list article .msg-link .badge{
	position: absolute;
	top: -8px;
	right: -8px;
}

.request-list article .msg-link,
.request-list article .new-msg-link{
	text-decoration: none;
}

.request-list article .request-header>div.request-date::before{
	content: "agendada para: ";
	font-weight: normal;
}

.request-list article .request-header>div.request-author::before{
	content: "por: ";
	font-weight: normal;
}

.request-list article .request-header>div.request-created::before{
	content: "em: ";
	font-weight: normal;
}

.request-list article .request-header>div.request-author>span{
	color: hsla(0, 0%, 0%, 0.4);
}

.request-list article:nth-of-type(odd){
	background: rgba(0,0,0,0.05);
}

.request-list article:nth-of-type(even){
	background: rgba(0,0,0,0.10);
}

.request-log .card{
	background: hsla(60,40%,20%,0.1);
	background-image: url('../images/chat-pattern-02.png'), url('../images/chat-pattern-01.png');
	background-position: top left, 0px 200px;
	border-radius: 5px;
	padding: 15px;
	margin-top: 2px;
	overflow: hidden;
	position: relative;
	border: #999 1px solid;
}

.request-log .msg{
	display: block;
	max-width: 600px;
	padding: 5px 15px;
	background: hsl(0, 0%, 80%);
	margin: 5px;
	border-radius: 7px;
	position: relative;
}

.request-log .msg.me{
	margin-right: auto;
	margin-left: 10px;
	background: hsl(24, 100%, 100%);
	box-shadow: 2px 2px 2px #666;
}

.request-log .msg::before{
	content: "";
	display: block;
	width: 0;
	height: 0;
	position: absolute;
	border: 10px transparent solid;
	top:0;
	bottom: 0;
	margin: auto;
}

.request-log .msg.me::before{
	left: -20px;
	border-right-color: hsl(24, 100%, 100%);
}

.request-log .msg.other::before{
	right: -20px;
	border-left-color: hsl(120, 50%, 95%);
}

.request-log .msg.other{
	margin-right: 10px;
	margin-left: auto;
	background: hsl(120, 50%, 95%);
	box-shadow: -2px 2px 2px #666;
}

.request-log .msg.status-change{
	background: hsl(200, 100%, 85%);
}

.request-log .msg.status-change::before{
	display: none;
}

.request-log .msg.status-change .msg-body::before{
	content: "ALTEROU O STATUS: ";
	margin-right: 5px;
	font-size: 10px;
	vertical-align: middle;
}

.request-log .msg.status-change .status-to,
.request-log .msg.status-change .status-from{
	border: hsla(0, 0%, 0%, 1) 1px solid;
	border-radius: 5px;
	display: inline-block;
	padding: 2px 5px;
	font-weight: 700;
	color: white;
	background: hsla(0, 0%, 0%, .6);
}

.request-log .msg.status-change .status-transition::before{
	font-family: "Material Icons";
	font-weight: bold;
	content: "forward";
	font-size: 14pt;
	vertical-align: middle;
	display: inline-block;
	margin: 0px 5px;
}

.request-log .msg .msg-header{
	font-size: 8pt;
	color: hsla(0,0%,0%,0.7);
	margin-bottom: 5px;
	border-bottom: hsla(0,0%,0%,0.2) 1px solid;
	font-weight: 700;
}

.request-log .msg .msg-header *::before,
.request-log .msg .msg-header *::after{
	color: hsla(0,0%,0%,0.4);
}

.request-log .msg .msg-date::before{
	content: " em ";
}

.request-log .msg .msg-body pre{
	padding: 5px;
	margin-bottom: 10px;
	font-size: 11pt;
	font-weight: 500;
	font-family: 'Roboto', sans-serif;
	white-space: pre-wrap;
}

.request-details-modal dd{
	border: 1px solid #ccc;
	border-radius: 5px;
	padding: 5px;
	background: #dedede;
}

@media (min-width: 992px){
	.navbar-toggleable-md .navbar-collapse{
		width: auto;
	}
	#home-nav{
		display: none;
	}
}

@media (max-width: 992px){
	.request-list article .request-header>div.request-date::before{
		content: "para: ";
	}
	.equip-list article .equip-header{
		padding-left: 10px;
		padding-right: 10px;
	}

	.equip-list article a.equip-req,
	.equip-list article .equip-photo{
		position: relative;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: 5px auto;
	}
	.equip-list article a.equip-req{
		width: auto;
	}
}

@media screen and (max-width: 770px) {
	#supertitle{
		font-size: 36px;
		bottom: 50px;
	}

  #title{
		font-size: 20px;
		bottom: 22px;
  }

  #subtitle{
		font-size: 14px;
		bottom: 2px;
	}

	.request-list article .request-header{
		padding-right: 5px;
		padding-left: 5px;
		padding-top: 120px;
	}

	.request-log .msg{
		max-width: 230px;
	}

}