html { max-width: 1280px;  margin: 5px auto; }
body{
    font-family: "Open Sans",Arial,Helvetica,sans-serif;
    /*background: #f5f6f6 url("../img/bg.png") repeat scroll 0 0;*/
    background: white;
}

@font-face {
    font-family: 'Questrial-Regular';
    src: url('/fonts/Questrial-Regular.ttf');
}
@font-face {
    font-family: 'Roboto-Black';
    src: url('/fonts/Roboto-Black.ttf');
}
@font-face {
    font-family: 'Roboto-BlackItalic';
    src: url('/fonts/Roboto-BlackItalic.ttf');
}
@font-face {
    font-family: 'Roboto-Bold';
    src: url('/fonts/Roboto-Bold.ttf');
}
@font-face {
    font-family: 'Roboto-BoldItalic';
    src: url('/fonts/Roboto-BoldItalic.ttf');
}
@font-face {
    font-family: 'Roboto-Italic';
    src: url('/fonts/Roboto-Italic.ttf');
}
@font-face {
    font-family: 'Roboto-Light';
    src: url('/fonts/Roboto-Light.ttf');
}
@font-face {
    font-family: 'Roboto-LightItalic';
    src: url('/fonts/Roboto-LightItalic.ttf');
}
@font-face {
    font-family: 'Roboto-Medium';
    src: url('/fonts/Roboto-Medium.ttf');
}
@font-face {
    font-family: 'Roboto-MediumItalic';
    src: url('/fonts/Roboto-MediumItalic.ttf');
}
@font-face {
    font-family: 'Roboto-Regular';
    src: url('/fonts/Roboto-Regular.ttf');
}
@font-face {
    font-family: 'Roboto-Thin';
    src: url('/fonts/Roboto-Thin.ttf');
}
@font-face {
    font-family: 'Roboto-ThinItalic';
    src: url('/fonts/Roboto-ThinItalic.ttf');
}

.container {
    display:flex;
    flex-wrap:wrap;
    flex-direction:row;
    justify-content:flex-start;
    align-items:stretch;

}
header {
    height: 100px;
    padding: 0 15px;

}

.left {
    order:1;
    flex-basis:100%;
    height:800px;
    border-left: solid 1px #5aa738;
    border-bottom: solid 1px #5aa738;
}
.middle {order:3; background: white; flex-basis:100%; height:800px; position: relative; }
.right {order:2; flex-basis:100%; height:800px; border-left: solid 1px #5aa738; border-right: solid 1px #5aa738; border-bottom: solid 1px #5aa738;}

.left, .right {
    display: block;
    min-height: 100%;
    font-size: 13px;
    list-style: outside none none;
    margin: 0;
    position: relative;
    width: 100%;
    color: #000000;
    font-weight: 400;
    line-height: normal;
    padding: 0;
    text-decoration: none !important;
}

.left > *, .right > * {
    padding: 4px;
}
@media screen and (min-width:600px) {
    .container {
        flex-wrap:nowrap;
        box-sizing: border-box;
    }

    .left {
        flex-basis:250px;
        order:1;
        max-height: 800px;
        overflow: scroll;
    }
    .middle {
        /*flex-basis:1;*/
        flex-basis:fit-content;
        order:2;
    }
    .right {
        flex-basis:250px;
        order:3;
    }
}

.left, .middle, .right {
    border-bottom: solid 1px #5aa738;
}

#header {
    border-bottom: solid 3px #ffffff;
    position: relative;
    height: 50px;
    display: inline-block;
    width: 100%;
}

#header span {
    padding-left: 20px;
    width: 20%;
}

#header .header-logo {
    height: 90%;
}

#header .header-menu {
    margin: 0 auto;
    display: block;
    text-align: right;
    height: 100%;
    width: 80%;
    float: right;
}

#header .header-menu a {
    padding: 10px;
    padding-bottom: 2px;
    line-height: 40px;
    color: #222222;
    font-family: 'Roboto-Light', Helvetica, Arial, sans-serif;
    text-decoration: none;
}

#header .header-menu a.active {
    border-bottom: solid 2px #007a8b;
}

.left ul, .right ul {
    font-size: 13px;
    line-height: 0.5em;
    list-style: outside none none;
    margin-top: 0;
}
.left ul li, .right ul li {
    color: #707679;
    display: block;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    padding: 10px 10px 10px 11px;
    position: relative;
    border-bottom: solid 1px #5aa738;
}

div.detalles {
    font-size: 12px;
    overflow: hidden;
    color: #939393;
}
.oculto {
    display: none;
}
.ocultar_flash {
    width:0; height:0; overflow:hidden;
}

.mostrar_subscriber {
    width:640px; height:480px;
}

.mostrar_broadcaster {
    width:220px; height:165px;
}

.pointer {
    cursor: pointer;
}

#datos_vehiculo_header {
    min-height: 20px;
}

#titulo_peritacion {
    font-size: 18px; margin-bottom: 4px; margin-left: 15px;
}
#detalles_vehiculo {
    font-size: 13px; font-weight: bold; margin-left: 15px;
}

#ver_documentacion {
    margin-left: 30px;

}

div#ver_video a, div#ver_documentacion a {
     margin-bottom: 30px;
 }
div#ver_video a, div#ver_documentacion a {
    text-decoration: none !important;
     font-size: 16px;
    color: darkgreen;
}

.left h4, .right h4 {
    background-color: #696969;
    color: white;
    font: 12px/2 Arial;
    padding-left: 10px !important;
    margin-top: 0;
    margin-bottom: 0;
}


/*    --------------------------------------------------
	:: Grids
	-------------------------------------------------- */

 .grid-container {
     display: grid;
     grid-template-columns: auto auto;
     /*background-color: #007A8B;*/
     padding: 5px;
 }
.grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 0px;
    text-align: left;
    margin: 5px;
    margin-bottom: 0px;
}

/*    --------------------------------------------------
	:: Login Section
	-------------------------------------------------- */
#login {
    padding-top: 50px
}
#login .form-wrap {
    width: 30%;
    margin: 0 auto;
}
#login h1 {
    color: #1fa67b;
    font-size: 18px;
    text-align: center;
    font-weight: bold;
    padding-bottom: 20px;
}
#login .form-group {
    margin-bottom: 25px;
}
#login .checkbox {
    margin-bottom: 20px;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
#login .checkbox.show:before {
    content: '\e013';
    color: #1fa67b;
    font-size: 17px;
    margin: 1px 0 0 3px;
    position: absolute;
    pointer-events: none;
    font-family: 'Glyphicons Halflings';
}
#login .checkbox .character-checkbox {
    width: 25px;
    height: 25px;
    cursor: pointer;
    border-radius: 3px;
    border: 1px solid #ccc;
    vertical-align: middle;
    display: inline-block;
}
#login .checkbox .label {
    color: #6d6d6d;
    font-size: 13px;
    font-weight: normal;
}
#login .btn.btn-custom {
    font-size: 14px;
    margin-bottom: 20px;
}
#login .forget {
    font-size: 13px;
    text-align: center;
    display: block;
}

/*    --------------------------------------------------
	:: Inputs & Buttons
	-------------------------------------------------- */
.form-control {
    color: #212121;
}
.btn-custom {
    color: #fff;
    background-color: #1fa67b;
}
.btn-custom:hover,
.btn-custom:focus {
    color: #fff;
}

#btn-login {
    align-items: flex-start;
    background-color: #5aa738;
    background-image: none;
    border-bottom-color: rgba(0, 0, 0, 0);
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-image-outset: 0;
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
    border-left-color: rgba(0, 0, 0, 0);
    border-left-style: solid;
    border-left-width: 1px;
    border-right-color: rgba(0, 0, 0, 0);
    border-right-style: solid;
    border-right-width: 1px;
    border-top-color: rgba(0, 0, 0, 0);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-top-style: solid;
    border-top-width: 1px;
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    cursor: pointer;
    display: block;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant-caps: normal;
    font-weight: normal;
    height: 40px;
    letter-spacing: normal;
    line-height: 18px;
    margin: 0 0 20px 0;
    padding: 10px 16px 16px 10px;
    text-align: center;
    text-indent: 0;
    text-shadow: none;
    text-transform: none;
    vertical-align: middle;
    white-space: nowrap;
    width: 216px;
    word-spacing: 0;
    line-height: 30px;
}

#password, #usuario {
    background-color: rgba(255, 255, 255);
    background-image: none;
    border-bottom-color: rgb(204, 204, 204);
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-image-outset: 0;
    border-image-repeat: stretch;
    border-image-source: none;
    border-left-color: rgba(204, 204, 204, 0);
    border-left-style: none;
    border-left-width: 0px;
    border-right-style: none;
    border-right-width: 0px;
    border-top-style: none;
    border-top-width: 0px;
    box-sizing: border-box;
    color: rgb(33, 33, 33);
    cursor: auto;
    display: block;
    font-family: 'Questrial-Regular', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant-caps: normal;
    font-weight: normal;
    height: 34px;
    letter-spacing: normal;
    line-height: 30px;
    margin: 30px 0 0;
    padding: 6px 12px 12px 6px;
    text-align: center;
    text-indent: 0;
    text-shadow: none;
    text-transform: none;
    transition-delay: 0s, 0s;
    transition-duration: 0.15s, 0.15s;
    transition-property: border-color, box-shadow;
    transition-timing-function: ease-in-out, ease-in-out;
    width: 100%;
    word-spacing: 0;
    outline: none;
}

#multimedia {
    position: relative;
}

#otroPichorro, #videoEmisor, #videoEmisor video {
    width:  220px;
    height: 165px;
    /*background-imagend-color: #00b3ee;*/
    vertical-align: top;
    right: 0px;
    position: absolute;
}

#pichorro, #videoReceptor {
    width: 640px;
    height: 480px;
    position: relative;
    /*!*background-colorolor: #c12e2a;*!*/
    display: inline-block;
    /*vertical-align: top;*/
    /*-webkit-transform: rotate(-90deg);*/
    /*-moz-transform: rotate(-90deg);*/
    /*-o-transform: rotate(-90deg);*/
    /*-ms-transform: rotate(-90deg);*/
    /*transform: rotate(-90deg);*/
    /*position: absolute;*/
    /*top: -80px;*/
    /*left: 80px;*/
}

#videoReceptor video{
    width: 640px;
    height: 470px;
}

object:focus {
    outline:none;
}

#video-holder, .video-element {
    width: 100%;
    height: 100%;
    min-height: 480px;
}

#video-holder {
    max-width: 640px;
    margin: 0 auto;
}

#video-container {
    border-radius: 5px;
    background-color: #e3e3e3;
    padding: 10px;
}

#status-field {
    text-align: center;
    padding: 10px;
    color: #fff;
    margin: 10px 0;
}

.status-alert {
    background-color: rgb(227, 25, 0);
}

.status-message {
    background-color: #aaa;
}

#event-log-field {
    background-color: #c0c0c0;
    border-radius: 6px;
    padding: 10px;
    margin: 14px;
}

ot-publisher,ot-subscriber,ot-layout {
    display: block;
    height: 500px;
    overflow: hidden;
}
ot-layout {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#publisher {
    display: inline-block;
    width: 252px;
    height: 189px;
    overflow: hidden;
    background-color: #0aa66e;
}
#subscriber {
    display: inline-block;
    width: 640px;
    height: 480px;
    overflow: hidden;
    background-color: #7a43b6;
}
li.encargo_online {
    cursor: pointer;
}

#geoposicion {
    border-top: inset 1px #f0fff0;
    height: 250px;
    position: absolute;
    width: 95%;
    bottom: 0;
    overflow: auto;
}

#fotos {
    border-top: inset 1px #f0fff0;
    height: 250px;
    position: absolute;
    width: 100%;
    bottom: 0;
    font-size: 10px;
    overflow: auto;
}

[v-cloak] {
    display: none;
}

.btn.btn-primary {
    background: #117a8b;
}

.btn.btn-danger {
    background: #b12028;
}

.app-primary-gradient {
    background: #000000 linear-gradient(to right, #007a8b, #6c9ba9) !important;
    border-style: none !important;
}

.app-secundary-gradient {
    background: #000000 linear-gradient(to right, #b12028, #daa3a8) !important;
    border-style: none !important;
}

.app-primary-gradient {
    background: #000000 linear-gradient(to right, #007a8b, #6c9ba9) !important;
    border-style: none !important;
}

.app-warning-gradient {
    background: #000000 linear-gradient(to right, #5aa738, #6c9ba9) !important;
    border-style: none !important;
}

.app-neutral {
    background: #222222 !important;
    border-style: none !important;
}

#fotos{
    display: flex;
    padding: 5px;
    flex-direction: column;
}

#pictures-dni, #picture-video{
    display: flex;
    flex-wrap: wrap;
    padding: 5px;
}

#picture-container{
    display: flex;
    flex-direction: column;
    width: 200px;
    justify-content: center;
    padding: 5px;
    position: relative;
    height: 150px;
}
#picture-container > img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2px;
}
#picture-container #buttonActions{
    width: 95%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    opacity: 0;
    position: absolute;
    transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s;
}
#picture-container #buttonActions:hover{
    opacity: 1;
}