/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/

/* 
    Created on : 05-feb-2018, 18:36:12
    Author     : cristian
    Primary 		= #476BB2
	Primary Dark 	= #3c61ab
*/

/**
 *	GENERAL
 */
.text-shadow {
	text-shadow: 1px 1px 0px #333333;
}

.center {
	margin: 0 auto;
	display: block;
	text-align: center;
}

.img-center {
	margin: 0 auto;
	display: block;
}

/**
 * FORM
 */



.btn-form {
	width: 100%;
}

.btn-control  {
	padding: 0.2rem 0.45rem !important;
	margin-right: 0.2rem;
	margin-bottom: 0.2rem;
}

.input-error input {
	padding: 3rem;
}

/**
 * CREAR / EDITAR FORM
 */

#form {
	width: 40rem;
	margin: 0 auto;
}

#form .form-group{
	display: flex;
	align-items: center;
}

#form label {
	text-align: right;
	font-weight: bold;
	color: #476BB2;
	padding: 0.375rem 1rem;
}

.color-container {
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
}

input[type=color].form-control {
	padding: 0px;
}

/**
 * ICONOS
 */
.cc-selector input{
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}

.cc-selector input:active +.drinkcard-cc{opacity: .9;}
.cc-selector input:checked +.drinkcard-cc{
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
}

.drinkcard-cc{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width:30px;
    height:30px;
    margin:.3rem;
    -webkit-transition: all 200ms ease-in;
       -moz-transition: all 200ms ease-in;
            transition: all 200ms ease-in;
    -webkit-filter: brightness(1.1) grayscale(1) opacity(.7);
       -moz-filter: brightness(1.1) grayscale(1) opacity(.7);
            filter: brightness(1.1) grayscale(1) opacity(.7);
}
.drinkcard-cc:hover{
    -webkit-filter: brightness(1) grayscale(.2) opacity(.9);
       -moz-filter: brightness(1) grayscale(.2) opacity(.9);
            filter: brightness(1) grayscale(.2) opacity(.9);
}


/**
 * NAV
 */

nav {
	display: inline-block;
	width: 100%;
	background-color: #476BB2;
}

#nav {
	background-color: #476BB2; 
}

#nav li {
	padding: .5rem;
	color: white;
	font-weight: 600;
	letter-spacing: .05rem;
	margin-right: .5rem;
}

#nav li.active {
	background-color: #3c61ab;
}

#nav a:hover {
	color: white;
	text-decoration: none;
	cursor: pointer;
}

#nav li:hover {
	background-color: #3c61ab;
}

#logout {
	color: white;
	font-weight: bold;
}

#logout a {
	font-weight: normal;
	color: white;
	text-decoration: underline;
	margin-left: .5rem;
}

/**
 * TOP
 */
#top-nav {
	background-color: #3c61ab;
	padding: .5rem;
}

#top-title {
	font-weight: 600;
	letter-spacing: .1rem;
	color: white;
	font-size: 1.1rem;
}

#top-title:hover {
	text-decoration: none;
}

/**
 * LOGIN
 */
#login-container {
	padding: 3rem;
}

#login-container input {
	margin-bottom: .5rem;
}

#login-logo {
	padding: 1rem;
	margin-bottom: 1rem;
}

#login-button {
	width: 100%;
}


/**
 * MAIN
 */

/** * INFORMACIÓN DEL CONTROL  */
#info-control header {
	color: #3c61ab;
	font-weight: bold;
}

html, body {
  height: 100%;
  min-height: 100%;
  margin: 0;
}

#map-container {
	width:100%;
	height: calc(100% - 122.4px); 
}

#map-controls {
	position: absolute;
	width: 100%;
	bottom: 0;
	background-color: #476bb2;
	color: white;
	padding: .5rem;
}

#map-controls > div > div { 
	vertical-align: middle;
}

#map-controls div { 
	display: inline;
}

#map-flotas {
	height: 100%;
	vertical-align: middle;
	float: right;
}

#map-flotas:hover {
	cursor: pointer;
	background-color: #3c61ab;
}

.fleets {
	display: none;
	position: absolute;
	bottom: 54px;
	width: 250px;
	max-height: 500px;
	white-space:nowrap;
	background-color: rgba(71, 107, 178, .7);
	color: white;
	font-weight: bold;
	overflow-x: hidden;
	overflow-y: scroll;
}

.flotas {
	display: block;
	position: absolute;
        text-align: center;
	bottom: 52px;
	width: 250px;
	max-height: 522px;
	background-color: rgba(71, 107, 178, .9);
	color: white;
	font-weight: bold;
	overflow-x: hidden;
	overflow-y: auto;
}
.flotas ul {
	list-style: none;	
	margin: 0;
	padding: 0;
}

.flotas  li {
	list-style: none;	
	margin: 0;
	padding: 0;
	padding: .5rem;
	width: 100%;
        font-size: 0.8em;
}

.flotas > ul > li:hover {
	background-color: rgba(71, 107, 178, .9);
	cursor: pointer;
}

#sub-map-fleets {
	right: 250px;
}

#map-fleets {
	right: 0;
}

.fleets ul {
	list-style: none;	
	margin: 0;
	padding: 0;
}

.fleets  li {
	list-style: none;	
	margin: 0;
	padding: 0;
	padding: .5rem;
	width: 100%;
}

.fleets > ul > li:hover {
	background-color: rgba(71, 107, 178, .9);
	cursor: pointer;
}

/** * CUERPO  */
body section:first-of-type {
	/*margin: 0 auto;*/
	/*width: 80%;*/
}

body > section {
	padding: 2rem;
}

/** * BOTONES DE ACCIÓN  */
#action-controls {
	display: inline;
}

#action-controls > article > button {
	margin-right: .5rem;
}

#action-controls aside {
	display: inline;
	float: right;
}

#action-controls label {
	margin-right: .5rem;
}
#action-controls aside select {
	display: inline;
	width: auto;
}

#action-controls aside b {
	margin-right: .5rem;
}

#action-controls > aside > button {
	margin-left: .5rem;
}

/** * TABLA * */
#table-container {
	margin-top: 1rem;
}

#table {
	width: 100% !important;
}

#table td {
    vertical-align:middle;
}

#table th {
	color: white;
	background-color: #476BB2;
}

#table tr td:first-child {
	font-weight: bold;
}

.remove-padding {
	padding-right: 0px !important;
	padding-left: 0px !important;
}

#table button {
	max-width: 2rem;
	margin: 0, 0;
}

.device-color {
    -webkit-box-shadow:inset 0px 0px 0px 5px white;
       -moz-box-shadow:inset 0px 0px 0px 5px white;
            box-shadow:inset 0px 0px 0px 5px white;
}

#licencias-caducadas { 
	margin-top: 1rem;
}


#licencias-caducadas a { 
	font-size: 14px;
}

#licencias-caducadas a:hover {
    cursor:pointer;
	text-decoration: underline !important;
}