.flexcontainer {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  

 
  /*border: 1px solid #2a4f73;
  -webkit-justify-content: center;
   justify-content: center;*/
}

.cuerpo{

    /*display: none;*/
    
}

.flexdoc{
 
   -webkit-flex: 5 0 0;
   flex: 4 0 0;
}

.flexform{
  padding-left: 2em;
   -webkit-flex: 1 0 0;
   flex: 1 0 0;
}



#home-1{

	
margin-top: -53px;


}

#home-2{

	
margin-top: 80px;


}

:focus {
outline: 0;
}

.input,.label-1{


    vertical-align: middle;
  display: inline-block;
  /*width: 45%;*/
  

}
.label-1{

    width: 76px;
  margin-top: -6px;
    width: 109px;
    text-align:left;
}
.Buscar,.Count{

    vertical-align: middle;
  display: inline-block;

    width: 46%;
}

.Count{

    margin-top: -12px;
  text-align: right;
  font-size: 15px;

}

#container{

	width: 100%;
	text-align: center;
}

.fileUpload {
    position: relative;
    overflow: hidden;
   
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}


.navbar-brand
{
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    margin: auto;
    display: inline-block;
    /*background: rgb(37,63,148);*/
    background: #000;
}

.caret{

	font-color: white;

}

.btn-primary{

    vertical-align: middle;
  display: inline-block;


 
}



.sms{

    width: 500px;
}

.title{

    cursor: pointer;
    
    color: blue;
}

.title:hover{

    text-decoration: underline;

}

.cuerpo{


    margin-top: 9em;
    margin-left: 2.5cm;
    margin-right: 2.5cm;
    z-index: 1;

   
}

.header {
    width: 100%;
    position: fixed;
    margin-top: -133px;
    opacity: 0.88;
    background: #253F94;
    height: 100px;
    z-index: 3;
}

.header1{

       width: 100%;

  position: fixed;
   margin-top: -12em;

  opacity: 0.9;
  background: #000;
  height: 96px;
  z-index: 3;

}

.container {
    
    max-width: 1272px;
   
    -webkit-display: -webkit-box;
    -webkit-display: -webkit-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
   
    flex-direction: column;
    justify-content: center; 


}

.text-menu,.iconito,.iconito-c{

vertical-align: middle;
display: inline-block;
width: 45%;

}

.iconito{

    width: 10%; 
}
.iconito-c{

    width: 17%; 
}
.iconito-x{

    width: 13%; 
    padding-right: 6px;
}

.iconito-i{

    width: 13%; 
    padding-right: 5px;
}


.container-header {

   
    /*background: rgb(37,63,148);*/
    background: #253F94;
    
    
   
     margin-right: auto;
  margin-left: auto;
    -webkit-display: -webkit-box;
    -webkit-display: -webkit-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
   
    flex-direction: row;
    justify-content: center; 


}


.container-user{

   
    /*background: rgb(37,63,148);*/
    background: #253F94;
    padding-right: 3em;
    height: 23px;
    
    -webkit-display: -webkit-box;
    -webkit-display: -webkit-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
   
    flex-direction: column;
    flex-direction: row-reverse;
    margin-top: -31px;
    


}

.dropdown-header,.dropdown-header:hover{

    color: white;
    padding: 10px;
    
}


.item {
    /* background: rgb(37,63,148); */

    height: 86px;
    text-align: center;
    line-height: 100px;
    font-weight: bold;
    font-family: sans-serif;
    color: #594255;
    margin-top: -48px;
}


.foot,.foot:hover{

    color: #fff;
    cursor:pointer;
    font-family: 'Open Sans', sans-serif;

}




/*Sidebar*/

.form-control{

    height: 33px;
}

/*Sidebar*/

#Chat{

        width: 100%;
  background: #253F94;
  
  color: white;
  padding: 1em;

 height:50%; 
 overflow: scroll;
 overflow-x: hidden;
overflow-y: scroll;


}

#chatinput{

    margin: 2em;
  margin-left: 43px;
}

.Buscar,.Count{

    vertical-align: middle;
  display: inline-block;

      width: 47%;
}
.Buscar{
 
  margin-bottom: -6px;
    margin-left: 0em;
}

.Count{

    margin-top: -12px;
  text-align: right;
  font-size: 15px;
  width: 100%;

}

#titlechat,#bienvenido{

       vertical-align: middle;
  display: inline-block;
  width: 48%;
}

#contenchat{

    padding: 2em;
}



/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
    display: table;
    content: " ";
}

a {
  text-decoration: none
}
.clearfix:after {
    clear: both;
}


/* Component.css */
*,
*:after,
*::before {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body,
.st-container,
.st-pusher,
.st-content {
    height: 100%;
}


.st-content,
.st-content-inner {
    position: relative;
}

.st-container {

    position: relative;
    overflow: hidden;
    

    margin-left: -119px;
  width: 40%;
  height: 35em;
 /*margin-top: -48em;*/

}






.st-pusher {
    position: relative;
    left: 0;
    z-index: 99;
    height: 100%;

    margin-left: 117px;

    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
}

.st-pusher::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}

.st-menu-open .st-pusher::after {
    width: 100%;
    height: 100%;
    opacity: 1;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;

    width:20em;

}

.st-menu {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    visibility: hidden;
    width: 300px;
    height: 100%;
    background: #48a770;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
      background: #253F94;
    color:white;
}

.st-menu::after {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgb(37,63,148);
    content: '';
    opacity: 1;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

.st-menu-open .st-menu::after {
    width: 0;
    height: 0;
    opacity: 0;
    -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
    transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}



/* content style */
.st-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.st-menu h2 {
    margin: 0;
    padding: 1em;
    color: rgba(0,0,0,0.4);
    text-shadow: 0 0 1px rgba(0,0,0,0.1);
    font-weight: 300;
    font-size: 2em;
}

.st-menu ul li a {
    display: block;
    padding: 1em 1em 1em 1.2em;
    outline: none;
    box-shadow: inset 0 -1px rgba(0,0,0,0.2);
    color: #f3efe0;
    text-transform: uppercase;
    text-shadow: 0 0 1px rgba(255,255,255,0.1);
    letter-spacing: 1px;
    font-weight: 400;
    -webkit-transition: background 0.3s, box-shadow 0.3s;
    transition: background 0.3s, box-shadow 0.3s;
}

.st-menu ul li:first-child a {
    box-shadow: inset 0 -1px rgba(0,0,0,0.2), inset 0 1px rgba(0,0,0,0.2);
}

.st-menu ul li a:hover {
    background: rgba(0,0,0,0.2);
    box-shadow: inset 0 -1px rgba(0,0,0,0);
    color: #fff;
}

/* Individual effects */

/* Effect 7: 3D rotate in */

.st-effect-7.st-container {
    -webkit-perspective: 1500px;
    perspective: 1500px;
    -webkit-perspective-origin: 0% 50%;
    perspective-origin: 0% 50%;
}

.st-effect-7 .st-pusher {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.st-effect-7.st-menu-open .st-pusher {
    -webkit-transform: translate3d(300px, 0, 0);
    transform: translate3d(300px, 0, 0);
}

.st-effect-7.st-menu {
    -webkit-transform: translate3d(-100%, 0, 0) rotateY(-90deg);
    transform: translate3d(-100%, 0, 0) rotateY(-90deg);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.st-effect-7.st-menu-open .st-effect-7.st-menu {
    visibility: visible;
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    -webkit-transform: translate3d(-100%, 0, 0) rotateY(0deg);
    transform: translate3d(-100%, 0, 0) rotateY(0deg);
}

/* Effect 8: 3D rotate out */



/* Fallback example for browsers that don't support 3D transforms (and no JS fallback) */
.no-csstransforms3d .st-pusher,
.no-js .st-pusher {
    padding-left: 300px;

}


.usuario{
  margin-left:56px;
}

 /*Responsive*/


 @media (min-width: 0px) and (max-width: 600px) {

        .cuerpo {
          margin-left:0cm;
          margin-right: 0cm;
          padding-top: 2em;

        }

        .container-user{

        padding-right: 0em;
        margin-top: 10px;
        height: 40px;
        flex-direction: column;
        text-align: center;

        }

        .dropdown {
        position: relative;
        height: 50px;
        padding-left: 0px;
        

        }

        .navbar{

            margin-top: 0px;
        }
        .dropdown-menu{

          top: 73%;
          left: -45px;

        }

        .usuario{

        top: 73%;
        left: 76px;
        text-align: left;

        }
      .container {

      flex-direction: row;
      justify-content: center;
      }


          /* margin-left: 3cm; */
  /* margin-right: 3cm; */
 


    }


/*Checkboxes*/


@import "http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css";


label {
  cursor: pointer;
  display: inline-block;
  font-size: 1em; /* label font size will scale up the checkbox */
}
label input[type="checkbox"] {
  display: none; /* Hide default checkbox */
}
/* Prevent text for being selected 
 * This fixes repeated clicks to auto-select text line
*/
label input[type="checkbox"] + .label-text {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Style custom checkbox 
 * Unckecked style
*/
label input[type="checkbox"] + .label-text:before {
  content: "\f096"; /* Equivalent to fa-square-o */
  font-family: "FontAwesome";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  width: 1em;
  display: inline-block;
  margin-right: 5px;
}
/* Checked style */
label input[type="checkbox"]:checked + .label-text:before {
  content: "\f14a"; /* equivalent to fa-check-square */ 
  color: #3F56A1; /* set color */
  -webkit-animation: tick 150ms ease-in;
  animation: tick 150ms ease-in;
}
/* disabled checkbox */
label input[type="checkbox"]:disabled + .label-text {
  color: #aaaaaa;
}
label input[type="checkbox"]:disabled + .label-text:before {
  content: "\f0c8"; /* equivalent to fa-square */
  color: #666666;
}
/* keyframes for animation */
@-webkit-keyframes tick {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  90% {
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes tick {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  90% {
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}


/*Progress bar*/

.progre {
width: 200px;

}

.progressi {
overflow: hidden;
height: 18px;

background-color: #253F94;
background-image: -moz-linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: -ms-linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#253F94), to(#f9f9f9));
background-image: -webkit-linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: -o-linear-gradient(top, #f5f5f5, #f9f9f9);
background-image: linear-gradient(top, #253F94, #f9f9f9);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#f9f9f9', GradientType=0);

-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;

}

.progressi .barr {
width: 0%;
height: 18px;
  
  
background-color: #253F94;
background-image: -moz-linear-gradient(top, #253F94, #0480be);
background-image: -ms-linear-gradient(top, #253F94, #0480be);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#253F94), to(#0480be));
background-image: -webkit-linear-gradient(top, ##253F94, #0480be);
background-image: -o-linear-gradient(top, #149bdf, #0480be);
background-image: linear-gradient(top, #253F94, #253F94);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#149bdf', endColorstr='#0480be', GradientType=0);
  
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
  
-webkit-transition: width 0.6s ease;
-moz-transition: width 0.6s ease;
-ms-transition: width 0.6s ease;
-o-transition: width 0.6s ease;
transition: width 0.6s ease;
}