/* hover like a link */

.faux-link:hover {
  font-style: italic;
  cursor:pointer;
}

/* mini ñapa para las tabs */

#trip-tabs a {
  padding: 10px !important;
}

/* */

nav .btn-group {
  margin-top: 8px;
}

#pageWrapper {
  width: 95%;
  margin: 0 auto;
}

/*** administration page ***/
#admin-routes li.selected,
#modaladminblocks li.selected {
  background-color: #99FF99
}
#admin-routes li,
#modaladminblocks  li {
  list-style-type: none; 
}

#admin-blocks .panel img {
  max-width: 50%;
}

input[role=combobox] {
  padding: 0 10px;
}

/* styling admin/actividades' react-data-grid */
.react-grid-Header {
  background-color: rgb(248, 248, 248);
  background-image: linear-gradient(rgb(255, 255, 255) 0px, rgb(248, 248, 248) 100%);
  background-repeat: repeat-x;
}

/* ReactDataGrid uses checkboxes to select a row
 * i want an "EDIT" button, so... ÑAPA! */
input.react-grid-checkbox { 
  opacity: 1;
}
.normal input.react-grid-checkbox::after {
  content: " Editar ";
  color: white;
  background-color: rgb(50, 175, 212);
  border-radius: 3px;
  padding: 2px 3px;
}
.deleting input.react-grid-checkbox::after {
  content: " Elim. ";
  color: white;
  background-color: red;
  border-radius: 3px;
  padding: 2px 3px;
}
input.react-grid-checkbox::after:hover {
  background-color: red;
}

/* Markdown editors' height */
.OptionEntry .CodeMirror {
  min-height: 150px;
  height:200px;
}

/* for Desglose.jsx */
.ellipsisReservation > div, 
.ellipsisReservation > div > p, 
.ellipsisReservation > div > p > span {
  width: 180px;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

td.ellipsis {
  text-align: center;
  max-width: 150px;
  text-overflow : ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* https://www.npmjs.com/package/react-animate-reorder */
.reorder-wrapper-item {
  position: relative;
  transition: top 1s ease-in;
}

/* better checkboxes */
/* .squaredFour */
.squaredFour {
	width: 20px;
	position: relative;
	margin: 20px auto;
}

.squaredFour label {
	width: 20px;
	height: 20px;
	cursor: pointer;
	position: absolute;
	top: 0;
	left: 0;
	background: #fcfff4;
	background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	border-radius: 4px;
	box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
}

.squaredFour label:after {
	content: '';
	width: 9px;
	height: 5px;
	position: absolute;
	top: 4px;
	left: 4px;
	border: 3px solid #333;
	border-top: none;
	border-right: none;
	background: transparent;
	opacity: 0;
	transform: rotate(-45deg);
}

.squaredFour label:hover::after {
	opacity: 0.5;
}

.squaredFour input[type=checkbox] {
	visibility: hidden;
}

.squaredFour input[type=checkbox]:checked + label:after {
	opacity: 1;
}
/* end .squaredFour */

/* make notifications fit in */
.notification {
  -webkit-box-shadow: 3px 3px 10px rgba(0,0,0,0.4) !important;
  box-shadow: 3px 3px 10px rgba(0,0,0,0.4) !important;
}

/* tweaks */
span.input-group-btn button {
  margin-right: 8px;
}

/* slimmer navbar */
/* this couldnt be styled from jsx */
.NavigationNavbar .navbar-nav li[role=presentation] a {
  padding: 17px;
}

@media print {

  ul.nav.nav-tabs{
    display:none !important;
  }
  div.row.tripPageRow{
    display:none !important;
  }
  div.stickyHeader{
    display:none !important;
  }
  table thead.realHeader{
    display:table-header-group !important;
  }
  td ::after{
    display:none !important;
  }
  tr.sr, tr.sr td{
    background-color: white !important;
    border-color: rgb(128, 128, 128);
    border-top:1px solid black !important;
    border-bottom:1px solid black !important;
  }
  tr.nn, tr.nn td{
    background-color: #e6f2ff !important;
    border-color: rgb(128, 128, 128);
    border-top:1px solid black !important;
    
    border-bottom:1px solid black !important;
  }
  tr.res, tr.res td{
    background-color: #b3e6cc !important;
    border-color: rgb(128, 128, 128);
    border-top:1px solid black !important;
    
    border-bottom:1px solid black !important;
  }
  tr.pag, tr.pag td{
    background-color: #ffd699 !important;
    border-color: rgb(128, 128, 128);
    border-top:1px solid black !important;
    
    border-bottom:1px solid black !important;
  }
  tr.wtf, tr.wtf td{
    background-color: #ff9999 !important;
    border-color: rgb(128, 128, 128);
    border-top:1px solid black !important;
    
    border-bottom:1px solid black !important;
  }
  tr.trDia, tr.trDia td{
    background-color: yellow !important;
    border-color: rgb(128, 128, 128);
    border-top:1px solid black !important;
    
    border-bottom:1px solid black !important;
  }
  button.btn-default.desgloseDetails{
    display:none !important;
  }
  button.btn-default.btnDetalles{
    display:none !important;
  }
  button.btn-default.desgloseDownload{
    display:none !important;
  }
  .btn-group.botoneraDesglose .btn{
    display:none !important;
  }
  .btn-group.botoneraDesglose .active{
    display:block !important;
    visibility: hidden !important;
    position: relative !important;
    font-size: 16px !important;
    /*background-color: #fff !important;
    background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%) !important;
    border-color: #ccc !important;
    color: rgb(51, 51, 51) !important;
    text-shadow: 0 1px 0 #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075) !important;*/
  }
  .btn-group.botoneraDesglose .active:after{
    visibility: visible !important;
    display: block !important;
    border:1px solid black !important;
    border-radius: 5px !important;
    padding:5px !important;
  } 
  .btn-group.botoneraDesglose .btn-default.active:after{
    content:'Sin reservar'!important; 
   
  } 
  .btn-group.botoneraDesglose .btn-info.active:after{
    content:'No necesita'!important; 
   
  }
  .btn-group.botoneraDesglose .btn-success.active:after{
    content:'Reservado'!important; 
   
  }
  .btn-group.botoneraDesglose .btn-warning.active:after{
    content:'Pagado'!important; 
   
  }
  .btn-group.botoneraDesglose .btn-danger.active:after{
    content:'WTF!'!important; 
   
  }
}