﻿
#msform {
	width: 100%;
	margin: 0px auto;	
	position: relative;
    padding-left: 0px;
    padding-right: 0px;

}

.fieldset {
	width: 100%;
    /*max-width: 860px;*/
	margin: 0px 3% auto auto;

	background: white;	
	border-radius: 3px;	
	padding: 0px 5px;	
	box-sizing: border-box;    	

    display: block;

    /*border: solid 1px #c4e3f3;*/    
    /*border-top: solid 5px #c4e3f3;*/
}

.modal-header {
    padding: 0px 15px 15px 15px !important;
}

a.list-group-item {
    color: #337ab7;
}   

.panelEmpresa {
    padding-right: 1px !important;
}

.col-foto-encabezado {
    padding-left: 0px;
    padding-right: 0px;
}

.foto-encabezado {
    width: 100%; 
    height: 315px;
}

.col-foto-perfil {
    position: relative;
    top: -215px; /* Coloca la foto de perfil dentro de la foto de encabezado de la empresa */
    left: 5px;
    margin-bottom: -170px;
}


.foto-perfil {
    width: 160px; 
    height: 160px;
}


.panel-control{
    width: 100%;       
    margin-left: 7%;  
    max-width: 860px;  
}

.list-group-item {
    padding: 10px 5px !important;
}

.btnFlechaDerecha {
    position: relative;
    float: right;
}


.menu-calendario {
    display: none;
}


.fieldsetCalendario {
    width: 100%;
    margin-left: 7%;
    background: white;    
    border-radius: 3px;    
    padding: 15px 5px;
    box-sizing: border-box;
    display: block;
    /*max-width: 860px;*/

    border: solid 1px #c4e3f3;    
    border-top: solid 5px #c4e3f3;
}

#panelDerecho {
    padding-right: 0px !important;
}

.datePickeIzq {
    margin-left:0%;
}


.calendarioIzq h4 datepicker {
    padding:0px;
    margin-left:5%;

}


#btnImgPerfil {
    position:relative; 
    top:55px; 
    right:52px;
}

#btnImgPerfilBorrar {
    position: relative;
    top: 55px;
    right: 67px;
}

.nombreEmpresa {
    margin-left: 20px;
}

/*--------------------------------------------------------------------------*/
/* Clase para mostrar un "breadcrumb" (menú) dentro de otro */
.breadcrumb {
    padding-bottom: 0px !important;
    font-size: 12px;
    font-family: 'Open Sans',Arial;
}

.breadcrumbReload {
    padding: 0px !important;
    margin: 0px !important;
}

.breadcrumbLeft {
    padding-left: 5px !important;    
}

.colPanelControl {
    display: none;
}

/*--------------------------------------------------------------------------*/


.handle.ui-sortable-handle {
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: grab;
}

.handle.ui-sortable-handle:active {
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: grabbing;
}


.table-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background:  #fff;
  opacity: 0.8;
}

.table-loading-inner {
  width: 100%;
  height: 100%;
}

@media (max-width: 992px) {

    #msform {
        margin-top: 0px !important;
    }

    .menu-calendario {
        display: block;
        margin-top: 20px;
    }

    .panel-control-hide {
        display: none;
    }

    .colPanelControl {
        display: block;
    }

    .row {
        /*=========================================================
        Soluciona el error del desbordamiento de los componentes
        al lado izquierdo.
        =========================================================*/
        margin-left: 0 !important;
    }

    #panelDerecho {
        padding-left: 0px !important;
    }

    .col-md-3, .col-md-9,.col-md-12, 
    .col-sm-4, .col-sm-6, .col-sm-12, 
    .col-xs-6 {
        padding-right: 0px !important;
        padding-left: 0px !important;
    }

    .modal-header {
        padding: 15px 1px 1px 1px !important;
    }

    .modal-body {
        padding: 15px 1px 1px 1px !important;
    }

    .modal-footer {
        padding: 15px 1px 1px 1px !important;
    }
}


@media (max-width: 720px) and (min-width: 640px) {
    .foto-encabezado {
        width: 100%; 
        height: 290px;
    }

    .panel-control{
        width: 100%;       
        margin-left: 0%;    
    }

    .calendarioIzq h4 datepicker {
        padding:0px;
        margin: 0px auto;
    }

    .nombreEmpresa {
        margin-top: 40px;
        margin-left: 15px;
    }
}


@media (max-width: 640px) and (min-width: 480px) {
    .foto-encabezado {
        width: 100%; 
        height: 240px;
    }

    .foto-perfil {
        width: 120px; 
        height: 120px;
    }

    .col-foto-perfil {
        position: relative;
        top: -170px; /* Coloca la foto de perfil dentro de la foto de encabezado de la empresa */
        left: 0px;
        margin-bottom: -170px;
    }
    
    #btnImgPerfil {
        position:relative; 
        top:35px; 
        right:52px;
    }

    #btnImgPerfilBorrar {
        position: relative;
        top: 35px;
        right: 67px;
    }

    .calendarioIzq h4 datepicker {
        padding: 0px;
        margin: 0px auto;
    }

    .nombreEmpresa {
        margin-top: 40px;
        margin-left: 10px;
    }
}


@media (max-width: 480px) and (min-width: 320px) {
    .foto-encabezado {
        width: 100%; 
        height: 160px;
    }

    .foto-perfil {
        height: 80px; 
        width: 80px;        
        position: relative;
        top: 0px; 
        left: 0px;
        
    }

    .foto-perfil img {
        height: 80px;
        width: 80px;
        margin-top: 80px;
    }

    .col-foto-perfil {
        position: relative;
        top: -125px; /* Coloca la foto de perfil dentro de la foto de encabezado de la empresa */
        left: -5px;
        /*margin-bottom: -170px;*/
    }

    .nombreEmpresa {
        margin-top: 80px;
        margin-left: 5px;
    }

    #btnImgPerfil {
        position:relative; 
        top:15px; 
        right:52px;
    }

    #btnImgPerfilBorrar {
        position: relative;
        top: 15px;
        right: 67px;
    }

    .calendarioIzq h4 datepicker {
        padding:0px;
        margin: 0px auto;
    }
}


@media (max-width: 640px) {
    .urlEmpresa {
        width: 100%;
    }

    .ayuda {        
        max-width: 35px;
        width: 35px;        
    }

    .prefijoUrl {
        position: absolute;
        visibility: hidden;
        text-indent: -9999px;
        line-height: 0; /* Collapse the original line */
    }

        .prefijoUrl:after {
            content:"";
            color: transparent;
        }

    .img-prefijoUrl:before {
      content:"\e135"; /* ícono del mundo - url */
    }

    .img-prefijoUrl {
        position: relative;
        top: 1px;
        display: inline-block;
        font-family: "Glyphicons Halflings";
        font-style: normal;        
        line-height: 1;
    }

    .input-group span.input-group-btn,
    .input-group input,
    .input-group button{
        display: block;
        width: 100%;
        border-radius: 0;
        margin: 0;
    }

    .input-group {
        position: relative;   
    }

    .input-group span.data-up{
        position: absolute;
        top: 0;
    }

    .input-group span.data-dwn{
        position: absolute;
        bottom: 0;
    }

    .form-control.text-center {
        margin: 34px 0;
    }

    .input-group-btn:last-child>.btn, 
    .input-group-btn:last-child>.btn-group{
        margin-left:0;
    }
}


@media (max-width: 995px) {

    .panel-control{
        /*width: 94%;*/    
        margin: 20px auto;  
    }

    .fieldset {
        margin: 20px auto;
    }
    

    /*.col-foto-perfil {
        position: relative;
        top: -175px; 
        left: 0px;
        margin-bottom: -170px;
    }*/


    .fieldsetCalendario {  
        width: 100%;
        margin: 20px auto;
    }

    .calendarioIzq h4 datepicker {
        padding: 0px;
        margin: 0px auto;
    }
}


@media (max-width: 1420px) {
    .calendarioIzq h4 datepicker {
        padding:0px;
        margin: 0px auto;
    }
}

@media (max-width: 1300px) {
    .calendarioIzq h4 datepicker {
        padding:0px;
        margin: 0px auto;
    }
}


