/**
* Icon shortcut styles
*/
/*.ux-desktop-shortcut {
    cursor: pointer;
    text-align: center;
    padding: 8px;
    margin: 8px;
    width: 64px;
}

.ux-desktop-shortcut-icon {
    width: 48px;
    height: 48px;
    background-color: transparent;
    background-repeat: no-repeat;
}

.ux-desktop-shortcut-text {
    font: normal 10px tahoma,arial,verdana,sans-serif;
    text-decoration: none;
    padding-top: 5px;
    color: white;
}

.x-view-over .ux-desktop-shortcut-text {
    text-decoration: underline;
}
*/

/**
* Various icon classes
*/
/*.accordion-shortcut {
    background-image: url(../resources/images/im48x48.png);
}

.cpu-shortcut {
    background-image: url(../resources/images/statusLarge.png);
}

.grid-shortcut {
    background-image: url(../resources/images/grid48x48.png);
}

.notepad-shortcut {
    background-image: url(../resources/images/notepadLarge.png);
    width: 46px;
    height: 46px;
}*/

/**
* The TaskBar
*/
/*.ux-start-button-icon {
    background-image: url(../resources/images/taskbar/sencha.gif) !important;
    background-color: transparent;
}

.ux-taskbar {
    padding-left: 4px !important;
}

div.ux-taskbar div.x-toolbar {
    background: transparent none;
    border: 0 none;
    padding: 0;
}

.ux-desktop-windowbar .x-btn-inner,
.x-nbr .ux-desktop-windowbar .x-btn-icon-text-left button {
    text-align: left !important;
}
*/

/**
*
*/

/*!
* Ext JS Library 4.0
* Copyright(c) 2006-2011 Sencha Inc.
* licensing@sencha.com
* http://www.sencha.com/license
*/
.custom-width {
    width: 100px !important;
}

.border-none {
    border-style: none !important;
}

.general-inline {
    display: inline-block;
    vertical-align: middle;
    width: 25;
    font-family: Helvetica;
    font-size: 154%;
    color: #666666;
    margin: 0 0 0 20 !important;
}

.general-inline-width {
    display: inline-block;
    vertical-align: middle;
    width: 11;
}

.absolute-height {
    height: 100% !important;
}

.absolute-height-ifrs {
    height: 100% !important;
}

.main-video-container {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
}

.desktop-responsive-card-margin {
    margin-bottom: 20px;
}

.desktop-responsive-card-xs {
    width: 120 !important;
}

.add-position-absolute {
    position: absolute !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.add-position-absolute::-webkit-scrollbar {
    display: none;
}

#poweredby {
    position: absolute;
    bottom: 40px;
    right: 20px;
    z-index: 15000;

    /* IE 5-7 */
    filter: alpha(opacity=70);
    /* Netscape */
    -moz-opacity: 0.7;
    /* Safari 1.x */
    -khtml-opacity: 0.7;
    /* Good browsers */
    opacity: 0.7;
}

#poweredby div {
    position: relative;
    width: 150px;
    height: 25px;
    background-image: url(../images/powered-by-ext-js.png);
    background-repeat: no-repeat;
}

/* The simple background image PNG does not work in IE6-8, but does in IE9 */
.x-ie6 #poweredby div,
.x-ie7 #poweredby div,
.x-ie8 #poweredby div {
    background-image: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/powered-by-ext-js.png', sizingMethod='scale');
}

/*----------------------------------------------------
    Start Button
*/

.selected-grid-dd {
    background-color: #77BC71;
}

.ux-start-button-icon {
    background-size: 18px 14px;
    background-color: transparent;
    background-repeat: no-repeat;
}

.ux-start-button .x-btn-arrow {
    background-image: none;
}

.ux-taskbar {
    padding-left: 4px !important;
}

/*
    Start Button (Black)
*/

.ux-desktop-black .ux-start-button {
    height: 28px;
    padding: 0px;
    display: block;
}

.ux-desktop-black .ux-start-button em {
    margin-top: 5px;
}

.ux-desktop-black .ux-start-button .x-btn-inner {
    color: black;
    font-size:11px;
    font-weight: bold;
}

.ux-desktop-black .ux-start-button {
    background-image: -moz-linear-gradient(center top , #E4F3FF, #D9EDFF 48%, #C2D8F2 52%, #C6DCF6);
    border-radius: 8px 8px 8px 8px;
    border-color: #81A4D0;
}

/*----------------------------------------------------
    Start Menu
*/

.ux-start-menu-toolbar .x-btn-inner {
    text-align: left;
}

.ux-start-menu-toolbar {
    padding: 4px !important;
}

/*----------------------------------------------------
    TaskBar
*/

/* Use high specificity selector to override default styling*/
div.ux-taskbar div.x-toolbar {
    background: transparent none;
    border: 0 none;
    padding: 0;
}

.ux-desktop-windowbar .x-btn-inner,
.x-nbr .ux-desktop-windowbar .x-btn-icon-text-left button {
    text-align: left !important;
}

/*
    TaskBar (Black)
*/

.ux-desktop-black .ux-taskbar {
    background: transparent url('../images/taskbar/black/taskbar-start-panel-bg.gif') repeat-x left top;
    border-color: transparent;
    /*height: 30px;*/
}

.ux-desktop-black .ux-taskbar .x-splitter {
    background: transparent url(../images/taskbar/black/taskbar-split-h.gif) no-repeat scroll 0 -2px;
}

.ux-desktop-black .ux-taskbar .x-toolbar-text {
    color: white !important;
}

.ux-desktop-black .ux-taskbar .x-btn-default-toolbar-small-over {
    background-color: yellow;
}

.ux-desktop-black .ux-taskbar .x-btn-inner {
    color: white;
}

.ux-desktop-black .ux-taskbar .x-btn-pressed .x-btn-inner, .ux-taskbar .x-btn-over .x-btn-inner {
    color: black;
}

/*----------------------------------------------------
    Tray Clock
*/

.ux-desktop-trayclock {
    text-align: center;
    vertical-align: middle;
    padding-top: 0;
    padding-bottom: 0;
}

/*----------------------------------------------------
    Desktop DataView
*/

.ux-wallpaper {
    /*background-color: #231F20;*/
    background-color: #FFF;
}

.ux-wallpaper-tiled {
    background-repeat: repeat;
}

.ux-wallpaper-centered {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 720px 495px;
}

.ux-desktop-shortcut {
    cursor: pointer;
    text-align: center;
    padding: 8px;
    margin: 8px;
    width: 64px;
}

.ux-desktop-shortcut-icon {
    width: 48px;
    height: 48px;
    background-color: transparent;
    background-repeat: no-repeat;
}

.ux-desktop-shortcut-text {
    font: normal 10px tahoma,arial,verdana,sans-serif;
    text-decoration: none;
    padding-top: 5px;
    /*color: white;*/
    color: black;
}

.texto_icono_blanco .ux-desktop-shortcut-text {
    color: white !important
}

.x-view-over .ux-desktop-shortcut-text {
    text-decoration: underline;
}


/*----------------------------------------------------
    Various icon classes
*/

/*----------------------------------
/** FLAT SHORTCUT ICONS */
.gralRpt_flat {
    background-image: url(../shortcuts/flat/gralRpt.png);
    background-size: 48px 48px;
}

.lastPosition_flat {
    background-image: url(../shortcuts/flat/lastPosition.png);
    background-size: 48px 48px;
}

.settings_flat {
    background-image: url(../shortcuts/flat/settings.png);
    background-size: 48px 48px;
}

.users_flat {
    background-image: url(../shortcuts/flat/users.png);
    background-size: 48px 48px;
}

.interaction_flat {
    background-image: url(../shortcuts/flat/interaction.png);
    background-size: 48px 48px;
}

.groups_flat {
    background-image: url(../shortcuts/flat/groups.png);
    background-size: 48px 48px;
}

/*----------------------------------
/** CIRCULAR SHORTCUT ICONS */
.gralRpt_circle {
    background-image: url(../shortcuts/circles_dash/gralRptIcon.png);
    background-size: 40px 40px;
}

.lastPosition_circle {
    background-image: url(../shortcuts/circles_dash/lastPositionIcon.png);
    background-size: 40px 40px;
}

.settings_circle {
    background-image: url(../shortcuts/circles_dash/configIcon.png);
    background-size: 40px 40px;
}

.users_circle {
    background-image: url(../shortcuts/circles_dash/usersProfileIcon.png);
    background-size: 40px 40px;
}

.users_ald_circle {
    background-image: url(../shortcuts/circles_dash/contractsMyAldIcon.png);
    background-size: 40px 40px;
}

.historical_circle {
    background-image: url(../shortcuts/circles_dash/costsReportIcon.png);
    background-size: 40px 40px;
}

.driversReport_cirlce {
    background-image: url(../shortcuts/circles_dash/drivers-report.png);
    background-size: 40px 40px;
}

.cpservices_circle {
    background-image: url(../shortcuts/circles_dash/servicesReportIcon.png);
    background-size: 40px 40px;
}

.fleetManagement_circle {
    background-image: url(../shortcuts/circles_dash/fleetManagementIcon.png);
    background-size: 40px 40px;
}

.groups_circle {
    background-image: url(../shortcuts/circles_dash/groupsIcon.png);
    background-size: 40px 40px;
}

.vehicles_circle {
    background-image: url(../shortcuts/circles_dash/vehiclesIcon.png);
    background-size: 40px 40px;
}

.geofences_circle {
    background-image: url(../shortcuts/circles_dash/geofencesIcon.png);
    background-size: 40px 40px;
}

.alertsConf_circle {
    background-image: url(../shortcuts/circles_dash/alertsConfIcon.png);
    background-size: 40px 40px;
}

.alertsFeed_circle {
    background-image: url(../shortcuts/circles_dash/recentAlertsIcon.png);
    background-size: 40px 40px;
}

.alertsRpt_circle {
    background-image: url(../shortcuts/circles_dash/alertReportsIcon.png);
    background-size: 40px 40px;
}

.int_point_circle {
    background-image: url(../shortcuts/circles_dash/interestPointIcon.png);
    background-size: 40px 40px;
}

.maintenance_circle {
    background-image: url(../shortcuts/circles/mantenimientos.png);
    background-size: 40px 40px;
}

.drivers_circle {
    background-image: url(../shortcuts/circles_dash/driversIcon.png);
    background-size: 40px 40px;
}

.visits_circle {
    background-image: url(../shortcuts/circles/Visits.png);
    background-size: 40px 40px;
}

.scheduledReports_circle {
    background-image: url(../shortcuts/circles_dash/scheduledReportsIcon.png);
    background-size: 40px 40px;
}

.fleetIndicators_circle {
    background-image: url(../shortcuts/circles_dash/fleetIndicatorsIcon.png);
    background-size: 40px 40px;
}

.incidence_circle {
    background-image: url(../shortcuts/circles_dash/incidenceIcon.png);
    background-size: 40px 40px;
}

.multiTrack_circle {
    background-image: url(../shortcuts/circles/multi_rastreo.png);
    background-size: 40px 40px;
}

.documents_circle {
    background-image: url(../shortcuts/circles_dash/documentsIcon.png);
    background-size: 40px 40px;
}

.suppliers_circle {
    background-image: url(../shortcuts/circles_dash/suppliersIcon.png);
    background-size: 40px 40px;
}

.aldBi_circle {
    background-image: url(../shortcuts/circles_dash/scheduledReportsIcon.png);
    background-size: 40px 40px;
}

.x-ie6 .accordion-shortcut {
    background-image: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/im48x48.png', sizingMethod='scale');
}

.x-ie6 .cpu-shortcut {
    background-image: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/statusLarge.png', sizingMethod='scale');
}

.x-ie6 .grid-shortcut {
    background-image: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/grid48x48.png', sizingMethod='scale');
}

.x-ie6 .notepad-shortcut {
    background-image: none;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/notepadLarge.png', sizingMethod='scale');
}

/*----------------------------------------------------
    ICON-CLS
*/
.gralRpt_circle_icon {
    background-image: url( ../shortcuts/circles/reporte_general_16.png ) !important;
}

.lastPosition_circle_icon {
    background-image: url(../shortcuts/circles/ultima_posicion_16.png);
    /*background-size: 48px 48px;*/
}

.settings_circle_icon {
    background-image: url(../shortcuts/circles/configuracion_16.png);
    /*background-size: 48px 48px;*/
}

.users_circle_icon {
    background-image: url(../shortcuts/circles/usuarios_16.png);
    /*background-size: 48px 48px;*/
}

.users_ald_circle_icon {
    background-image: url(../shortcuts/circles/usuario_de_vehiculo_16.png);
   /* background-size: 48px 48px; */
}

.historical_circle_icon {
    background-image: url(../shortcuts/circles/historial_de_usuario_16.png);
   /* background-size: 48px 48px; */
}

.driversReport_cirlce_icon {
    background-image: url(../shortcuts/circles/reporte_general_16.png);
    /* background-size: 40px 40px; */
}

.cpservices_circle_icon {
    background-image: url(../shortcuts/circles/Puntos_de_control_16.png);
    /*background-size: 48px 48px;*/
}

.fleetManagement_circle_icon {
    background-image: url(../shortcuts/circles/admon_flotilla_16.png);
    /* background-size: 48px 48px; */
}

.groups_circle_icon {
    background-image: url(../shortcuts/circles/grupos_16.png);
    /*background-size: 48px 48px;*/
}

.vehicles_circle_icon {
    background-image: url(../shortcuts/circles/vehiculos_16.png);
    /*background-size: 48px 48px;*/
}

.geofences_circle_icon {
    background-image: url(../shortcuts/circles/geocercas_16.png);
    /*background-size: 48px 48px;*/
}

.alertsConf_circle_icon {
    background-image: url(../shortcuts/circles/configuracion_de_alertas_16.png);
}

.alertsFeed_circle_icon {
    background-image: url(../shortcuts/circles/alertas_recientes_16.png);
}

.alertsRpt_circle_icon {
    background-image: url(../shortcuts/circles/reporte_de_alertas_16.png);
}

.int_point_circle_icon {
    background-image: url(../shortcuts/circles/puntos_de_interes_16.png);
}

.maintenance_circle_icon {
    background-image: url(../shortcuts/circles/mantenimientos_16.png);
}

.drivers_circle_icon {
    background-image: url(../shortcuts/circles/operadores_16.png);
}

.visits_circle_icon {
    background-image: url(../shortcuts/circles/Visits_icon.png);
}

.scheduledReports_circle_icon {
    background-image: url(../shortcuts/circles/reportes_programados_16.png);
}

.fleetIndicators_circle_icon {
    background-image: url(../shortcuts/circles/indicadores_flotillas_16.png);
}

.incidence_circle_icon {
    background-image: url(../shortcuts/circles/incidencias_16.png);
}

.multiTrack_circle_icon {
    background-image: url(../shortcuts/circles/multi_rastreo_16.png);
}

.documents_circle_icon {
    background-image: url(../shortcuts/circles/documentos_16.png);
}

.suppliers_circle_icon {
    background-image: url(../shortcuts/circles/supplier_16.png);
}

.aldbi_circle_icon {
    background-image: url(../shortcuts/circles/reportes_programados_16.png);
}
/*----------------------------------------------------
    FONTS
*/

@font-face {
    font-family: 'Ald';
    src: url("../fonts/rssr.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Pictos';
    src: url("../pictos/pictos.eot");
    src: url("../pictos/pictos.eot?#iefix") format("embedded-opentype"), url("../pictos/pictos.woff") format("woff"), url("../pictos/pictos.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Entypo';
    src: url("../entypo/entypo.eot");
    src: url("../entypo/entypo.eot?#iefix") format("embedded-opentype"), url("../entypo/entypo.woff") format("woff"), url("../entypo/entypo.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-size: 25px;
}

.entypo-glyph > .x-btn-wrap > a > .x-btn-glyph {
    /*font-size: 15px;*/
    margin-left: -15px;
    width: 40px;
}



/*----------------------------------------------------
    DEFAULT SENCHA
*/
.video {
    background-image: url(../images/gears.gif);
}

.bogus {
    background-image: url( ../images/bogus.png ) !important;
}

.notepad {
    background-image: url( ../images/bogus.png ) !important;
}

.logout {
    background-image: url( ../images/logout.gif ) !important;
}

.settings {
    background-image: url( ../images/gears.gif ) !important;
}

.gridcell-icon {
    width: 16px;
    height: 16px;
}

.icon-grid {
    background-image:url( ../images/grid.png ) !important;
}
.add {
    background-image:url(../../shared/icons/fam/add.gif) !important;
}
.option {
    background-image:url(../../shared/icons/fam/plugin.gif) !important;
}
.remove {
    background-image:url(../../shared/icons/fam/delete.gif) !important;
}
.save {
    background-image:url(../../shared/icons/save.gif) !important;
}
.accordion {
    background-image:url(../images/accordian.gif) !important;
}
.tabs {
    background-image:url(../images/tabs.gif) !important;
}

/*----------------------------------------------------
    IM window icons
*/

.user {
    background-image:url( ../../shared/icons/fam/user.gif ) !important;
}

.user-add {
    background-image:url(../../shared/icons/fam/user_add.gif) !important;
}

.user-delete {
    background-image:url(../../shared/icons/fam/user_delete.gif) !important;
}

.connect {
    background-image:url(../../shared/icons/fam/connect.gif) !important;
}

.user-girl {
    background-image:url(../../shared/icons/fam/user_female.gif) !important;
}

.user-kid {
    background-image:url(../../shared/icons/fam/user_green.gif) !important;
}

.user-suit {
    background-image:url(../../shared/icons/fam/user_suit.gif) !important;
}

#PPMiniCart form {
    width: 500px !important;
    margin-left: 0% !important;
    top: -65px !important;
    margin-top: 4% !important;
}

#PPMiniCart {
    z-index: 99999 !important;
}


/*
** li este estilo modifica el como se ve el listado en la vista de help.
** ul li button: Este da un estilo a los botones que estan dentro de un ul asi mismo dentro de un li
*/
.help{
	list-style: none;
	background: url(../shortcuts/circles/diamond2.png) left bottom no-repeat;
	padding-left: 10px;
    margin-left: -30px;
}

.help2{
	list-style: none;
	background: url(../shortcuts/circles/diamond3.png) left bottom no-repeat;
	padding-left: 10px;
    margin-left: -30px;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.verde{

    list-style: none;
	background: url(../icons/vehicle_move.png) left bottom no-repeat;
    background-size: 30px 30px;
    padding-left: 30px;
    padding-bottom: 30px;
}

.amarillo{

    list-style: none;
	background: url(../icons/vehicle_off.png) left bottom no-repeat;
	background-size: 30px 30px;
    padding-top: 30px;
}

.rojo{
    list-style: none;
	background: url(../icons/vehicle_stop.png) left bottom no-repeat;
	background-size: 30px 30px;
    padding-top: 30px;
}

.gris{
    list-style: none;
	background: url(../icons/vehicle_error.png) left bottom no-repeat;
	background-size: 30px 30px;
    padding-top: 30px;
}

.morado{
    list-style: none;
	background: url(../icons/vehicle_speedViolation.png) left bottom no-repeat;
	background-size: 30px 30px;
    padding-top: 30px;
}

#help_button{
    padding: 2.0px 7.0px 2.0px 7.0px;
    color: rgb(102,102,102);
    background-color: rgb(238,238,238);
    border: 1.0px solid rgb(204,204,204);
    text-decoration: none;
    margin-top:10px;
    margin-left:10px;
    border-radius:15px;
    cursor: pointer;
}
/*
** Aqui se encuentra el estilo de el slider.
*/
/* http://www.menucool.com */

#sliderFrame, #sliderFrame div {
    box-sizing: content-box;
}

/*slider frame*/
#sliderFrame
{
    width:720px;
    height:635px;
    margin:0 auto; /*center-aligned*/
    padding:20px;
    background:#191919;
    border:1px solid #066;
    border-radius:6px;
}

#slider, #slider div.sliderInner {
    width:700px;height:350px;/* Must be the same size as the slider images */
}

#slider {
    background:black url(loading.gif) no-repeat 50% 50%;
    position:relative;
    margin:0 auto; /*center-aligned*/
    transform: translate3d(0,0,0);
}

/* the link style (if an image is wrapped in a link) */
#slider a.imgLink, #slider .video {
    z-index:2;
    position:absolute;
    top:0px;left:0px;border:0;padding:0;margin:0;
    width:100%;height:100%;
}
#slider .video {
    background:transparent url(video.png) no-repeat 50% 50%;
}

/* Caption styles */
#slider div.mc-caption-bg, #slider div.mc-caption-bg2 {
    position:absolute;
    width:400px;
    height:auto;
    padding:10px 0;
    left: 100px; /*if the caption needs to be aligned from right, specify by right instead of left. i.e. right:20px;*/
    bottom: -40px;/*if the caption needs to be aligned from top, specify by top instead of bottom. i.e. top:150px;*/
    z-index:3;
    overflow:hidden;
    font-size:0;
}
#slider div.mc-caption-bg {
    /* NOTE: Its opacity, when background is not transparent, is to be set through the sliderOptions.captionOpacity setting in the js-image-slider.js file.*/
    background:transparent;/* or any other colors such as White, or: background:none; */
}
#slider div.mc-caption-bg2 {
    background:none;
}
#slider div.mc-caption {
    font:bold 13px/16px Arial;
    color:#ccc;
    z-index:4;
    text-align:center;
    background:none;
}
#slider div.mc-caption a {
    color:#66FFFF;
}


/* ------ built-in navigation bullets wrapper that is relative to the #slider ------*/
#slider div.navBulletsWrapper  {
    display:none;
}

/* --------- Others ------- */

#slider div.loading
{
    width:100%; height:100%;
    background:transparent url(loading.gif) no-repeat 50% 50%;
    filter: alpha(opacity=60);
    opacity:0.6;
    position:absolute;
    left:0;
    top:0;
    z-index:9;
}

#slider img, #slider>b, #slider a>b {
    position:absolute; border:none; display:none;
}

#slider div.sliderInner {
    overflow:hidden;
    -webkit-transform: rotate(0.000001deg);/* fixed the Chrome not crop border-radius bug*/
    position:absolute; top:0; left:0;
}

#slider>a, #slider video, #slider audio {display:none;}


/* -- thumbnails -- */
#thumbs
{
    margin-top:50px;
    text-align:center;
    font-size:0;
}
#thumbs .thumb
{
    display:inline-block;
    *display:inline;zoom:1;/*IE6, IE7 hack*/
    margin:0 1px;/*this determins the distance between each thumbnail*/
    border:1px solid #333;
    padding:4px;
    background:black;
}

#thumbs .thumb img{border:1px solid #555; cursor:pointer; width:70px; height:44px; opacity:0.5;filter:alpha(opacity=50);}
#thumbs .thumb-on img{border:1px solid #999; opacity:1;filter:alpha(opacity=100);}
#slider div {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}}

#sliderFrame #btnAdd
{
  cursor: pointer;
  background: url('app/view/resources/icons/plus_add.png') no-repeat;
  margin-left: 670px;
  width: 34px;
  height: 34px;
  border: 0px;
  margin-bottom: -34px;
  z-index: 300;
  position:relative\"
}