@charset "utf-8";
/* PECO.apps Custom */
.form-hirozonal.bordered .form-group{
	border-bottom				: 1px solid rgba(153,153,153,0.3);	
	padding						: 10px 10px;
	height						: auto;
}
.form-hirozonal.bordered .form-group:last-child{
	border-bottom				: none !important;	
}


.user-bar-control i{
    -o-transition				:.2s;
    -ms-transition				:.2s;
    -moz-transition				:.2s;
    -webkit-transition			:.2s;	
}
.flip {
	-moz-transform				: scale(-1, 1);
	-webkit-transform			: scale(-1, 1);
	-o-transform				: scale(-1, 1);
	-ms-transform				: scale(-1, 1);
	transform					: scale(-1, 1);
}
.rotate {
    -webkit-transform			: rotate(180deg);
    -moz-transform				: rotate(180deg);
    -o-transform				: rotate(180deg);
    -ms-transform				: rotate(180deg);
    filter						: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}


/* NAVIGATION DROP DOWN */
.open > .dropdown-menu {
  -webkit-transform				: scale(1, 1);
  transform						: scale(1, 1);  
  opacity						: 1;
  box-shadow					: rgba(0,0,0,0.5) 0px 3px 3px 2px !important;
  border-radius					: 0px !important;
}
  
.dropdown-menu {
  opacity						:.0;
  -webkit-transform-origin		: top;
  transform-origin				: top;
  -webkit-animation-fill-mode	: forwards;  
  animation-fill-mode			: forwards; 
  -webkit-transform				: scale(1, 0);
  transform						: scale(1, 0);  
  display						: block; 
          transition			: all 0.1s linear;
  -webkit-transition			: all 0.1s linear;
}

/* Table Controls */
.table td.controls{
	width: 70px;
	text-align: right;	
}
.table td.controls.sm{
	width: 70px;
	text-align: right;	
}
.table td.controls.md{
	width: 100px;
	text-align: right;	
}
.table td.controls.lg{
	width: 150px;
	text-align: right;	
}
.table td .progress-group {
	margin: 0px 0px !important;	
	padding: 0px 0px !important;
	margin-top: -4px !important;
}
.table td .progress {
	margin: 0px 0px !important;	
	padding: 0px 0px !important;	
}
.table td .progress-text, .table td .progress-number {
	font-size: 10px;
	margin: 0px 0px !important;	
	padding: 0px 0px !important;	
}

.table.table-hover tr{
	cursor: pointer !important;
	transition:linear 0.2s;
	-webkit-transition: linear 0.2s;
	-moz-transition:linear 0.2s;
	-o-transition:linear 0.2s;
}
.table.table-hover tr td:first-child{
	font-weight: bold;	
}
.table tr td .td-desc{
	font-size: 12px !important;
	color: #09F;
	line-height: 0px !important;
}
.table tr td.desc{
	word-wrap: normal;
	white-space: normal;
	width: 150px;	
}

.table .datatable-form{
	z-index: 9999 !important;
	display: none;	
}


/* INPUT WITH ICON */
.input-icon .fa{
	position: absolute !important;
	color: #ccc;
	z-index 1;
}
.input-icon .fa.success{
	position: absolute !important;
	color: rgba(0,204,0,0.7) !important;
	z-index 1;
}
.input-icon.right .fa{
	position: absolute !important;
	right: 15px;
	margin: 10px 10px !important;
	float: right !important;
	z-index 1;
}
.input-icon.left .form-control{
	padding-left: 30px !important;
	z-index: 2;
}
.input-icon.right .form-control{
	padding-right: 30px !important;
	z-index: 2;
}

/* TIME CLOCK DESIGN */
#ch1{
	color: #09C;	
}
#ch2{
	color: #09C;	
}
#clock1::last-word {
  color: #F00!important;
}

.login-logo, .register-logo{
	margin-bottom: 5px !important;
	padding-bottom: 0px !important;	
}

.margin-top-10{
	margin-top: 10px;	
}
.margin-top-20{
	margin-top: 20px;	
}
.margin-top-40{
	margin-top: 40px;	
}
.margin-top-60{
	margin-top: 60px;	
}



/*Messagebox */
.divMessageBox {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 100000;
}
/*
.MessageIE{
    background-image: url("@{base-url}/bg.png");
    
}*/
.MessageBoxContainer {
  top: 35%;
  color: white;
  position: relative;
  width: 100%;
  background-color: #232323;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 20px;
}

.MessageBoxMiddle {
  position: relative;
  left: 20%;
  width: 60%;
}

.MessageBoxMiddle .MsgTitle {
  letter-spacing: -1px;
  font-size: 24px;
  font-weight: 300;
  position: relative;
  left: 80px;
  z-index: 2 !important;
}

.MessageBoxMiddle .pText {
  font-style: 30px;
  position: relative;
  left: 80px;
  z-index: 2 !important;
}
@media (max-width: 790px){
	.MessageBoxMiddle {
	  position: relative;
	  width: 100% !important;
	  left: 0px;
	  right: 0px;
	}
	.MessageBoxMiddle .MsgTitle {
	  left: 0px;
	}
	.MessageBoxMiddle .pText {
	  left: 0px;
	}
}
.MessageBoxMiddle .MsgTitle .fa {
  font-size: 5em !important;
  margin-top: 0 !important;
  position: absolute !important;
  top: 5px !important;
  left: -150px !important;
  z-index: 1 !important;
  -webkit-opacity: 0.4 !important;
     -moz-opacity: 0.4 !important;
      -ms-opacity: 0.4 !important;
       -o-opacity: 0.4 !important;
          opacity: 0.4 !important;
}
.MessageBoxContainer input {
  width: 50%;
  padding: 5px;
}
.MessageBoxContainer select {
  width: 50%;
  padding: 5px;
}
.MessageBoxButtonSection {
  width: 100%;
  height: 30px;
}
.MessageBoxButtonSection button {
  float: right;
  margin-right: 7px;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 14px;
  font-weight: bold;
  
}
/* End of MessageBox */
.LoadingBoxContainer {
  top: 20%;
  color: white;
  position: relative;
  width: 100%;
  background-color: #232323;
}
.LoadingBoxMiddle {
  position: relative;
  left: 20%;
  width: 50%;
  padding: 10px;
}
.LoadingBoxContainer .MsgTitle {
  font-size: 26px !important;
}
.LoadingBoxContainer .pText {
  font-style: 30px !important;
}
#LoadingPoints {
  position: absolute;
}
/* bigBoxes */
.bigBox {
  position: fixed;
  right: 10px;
  bottom: 10px;
  background-color: #004d60;
  padding-left: 10px;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 5px;
  width: 390px;
  height: 150px;
  color: white;
  z-index: 99999;
  box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  border-left: 5px solid rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
.bigBox span {
  font-size: 17px !important;
  font-weight: 300!important;
  letter-spacing: -1px;
  padding: 5px 0 !important;
  display: block;
}
.bigBox p {
  font-size: 13px !important;
  margin-top: 10px !important;
}
#divMiniIcons {
  position: fixed;
  width: 415px !important;
  right: 10px !important;
  bottom: 180px !important;
  z-index: 9999!important;
  float: right!important;
}
.botClose {
  position: absolute;
  right: 10px;
  height: 16px;
  width: 15px;
  cursor: pointer;
  font-size: 18px;
  opacity: .5;
  display: block;
  top: 15px;
}
.botClose:hover {
  opacity: 1;
}
#divMiniIcons .cajita {
  text-align: center;
  vertical-align: middle;
  padding: 4px 6px;
  color: #FFF;
  float: right;
  cursor: pointer;
  display: block;
  background-color: #F00;
  font-size: 17px;
  margin-left: 4px;
  margin-top: 5px;
}
#divMiniIcons .cajita:active {
  top: 1px;
  left: 1px;
  position: relative;
}
.cajita img {
  width: 23px;
  height: 23px;
  padding-left: 3px;
  padding-top: 3px;
}
.bigBox .bigboxicon {
  font-size: 30px !important;
  text-align: left;
  position: absolute;
  top: 120px;
  left: 6px;
  z-index: 0;
}
.bigBox .bigboxnumber {
  width: 100%;
  text-align: right;
  font-size: 25px;
}
/* End of  bigBoxes */
/* SmallBox */
#divSmallBoxes {
  position: fixed;
  right: 0;
  top: 50px;
  z-index: 9999;
}

.SmallBox {
  position: absolute;
  right: 5px;
  top: 0px;
  width: 420px;
  color: #FFF;
  z-index: 9999;
  overflow: hidden;
  border: 1px solid transparent;
}
.SmallBox:hover {
  border: 1px solid #fff;
  cursor: pointer;
}
.SmallBox .foto .fa {
  font-size: 50px !important;
  position: absolute;
  left: 17px;
  top: 5px;
}
.SmallBox .textoFull {
  width: 93%;
  float: left;
  padding-left: 20px;
}
.SmallBox .textoFoto {
  width: 78%;
  margin: 3px 20px 3px 80px;
  float: left;
}
.miniPic {
  position: absolute;
  bottom: 8px;
  right: 9px;
}
.miniIcono {
  height: 100%;
  font-size: 20px !important;
}
.SmallBox span {
  font-size: 17px !important;
  font-weight: 300;
  letter-spacing: -1px;
  display: block;
  margin: 4px 0;
}
.SmallBox p {
  font-size: 13px !important;
  margin-top: 2px;
}
/* End of SmallBox */
#pageslide {
  /* These styles MUST be included. Do not change. */
  display: none;
  position: absolute;
  position: fixed;
  top: 0;
  height: 100%;
  z-index: 999999;
  /* Specify the width of your pageslide here */
  width: 305px;
  padding: 20px;
  /* These styles are optional, and describe how the pageslide will look */
  background-color: #004d60;
  color: #FFF;
  -webkit-box-shadow: inset 0 0 5px 5px #222;
  -moz-shadow: inset 0 0 0px 0px #222;
  box-shadow: inset 0 0 0px 0px #222;
}
.purehtml {
  color: white;
  font-size: 16px !important;
}
/* Mobile Phones */
@media screen and (max-width: 450px) and (max-width: 767px) {
  /* SmallBox Responsive */
  #divSmallBoxes {
    position: fixed;
    width: 90%;
    right: 0;
    top: 0;
  }
  .SmallBox {
    width: 95%;
  }
  .SmallBox:hover {
    box-shadow: 0px 0px 10px #888888;
    cursor: pointer;
  }
  .SmallBox span {
    font-size: 16px !important;
    /*font-weight:bold;*/
  }
  .SmallBox p {
    font-size: 12px !important;
    margin-top: 2px;
  }
  .SmallBox .textoFull {
    width: 93%;
    float: left;
    padding-left: 20px;
  }
  .SmallBox .textoFoto {
    width: 55%;
    margin: 3px 20px 3px 80px;
    float: left;
  }
  /* End of SmallBox Responsive*/
  /* bigBoxes Responsive */
  .bigBox {
    position: fixed;
    right: 10px;
    bottom: 10px;
    background-color: #004d60;
    padding-left: 10px;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 5px;
    width: 88%;
    height: 150px;
    color: white;
    z-index: 99999;
  }
  /* End of  bigBoxes  Responsive */
  /*Messagebox Responsive */
  .divMessageBox {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 100000;
  }
  .MessageBoxContainer {
    top: 25%;
    color: white;
    position: relative;
    width: 100%;
    background-color: #232323;
  }
  .MessageBoxMiddle {
    position: relative;
    left: 0;
    width: 100%;
    padding: 3px;
  }
  .MessageBoxMiddle .MsgTitle {
    font-size: 22px !important;
  }
  .MessageBoxMiddle .pText {
    font-size: 10px !important;
  }
  .MessageBoxContainer input {
    width: 50%;
    padding: 5px;
  }
  .MessageBoxContainer select {
    width: 50%;
    padding: 5px;
  }
  .MessageBoxButtonSection {
    width: 100%;
    height: 30px;
  }
  .MessageBoxButtonSection button {
    float: right;
    margin-right: 5px;
    padding-left: 15px;
    padding-right: 15px;
  }
  /* End of MessageBox Responsive */
}


.session-bar-timer { 
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 100000;
  display: none;
}
.session-bar-timer .session-bar-timer-content{
  top: 35%;
  color: white;
  position: relative;
  width: 100%;
  background-color: #232323;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 20px;
}
.session-bar-timer .session-bar-timer-middle{
  position: relative;
  left: 30%;
  width: 50%;
  height: 100px;
 }
.session-bar-timer .session-bar-timer-title{
  letter-spacing: -1px;
  font-size: 24px;
  font-weight: 300;
  position: relative;
  left: 10px;
  z-index: 2 !important;
}


.session-bar-timer .session-bar-timer-title .fa{
  font-size: 5em !important;
  margin-top: 0 !important;
  position: absolute !important;
  top: 5px !important;
  left: -150px !important;
  z-index: 1 !important;
  -webkit-opacity: 0.4 !important;
     -moz-opacity: 0.4 !important;
      -ms-opacity: 0.4 !important;
       -o-opacity: 0.4 !important;
          opacity: 0.4 !important;
}
.session-bar-timer .session-bar-timer-p{
  font-style: 30px;
  position: absolute !important;
  left: 10px !important;
  z-index: 2 !important;
}

.session-bar-timer .session-bar-timer-btn-group {
  width: 100%;
  height: 30px;
  margin-top: 30px;
  right: 50px;
}
.session-bar-timer .session-bar-timer-btn-group a {
  float: right;
  margin-right: 7px;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 14px;
  font-weight: bold;
}
@media (max-width: 790px){
	.session-bar-timer .session-bar-timer-middle {
	  position: relative;
	  width: 100% !important;
	  left: 0px;
	  right: 0px;
	  height: auto;
	}
	.session-bar-timer .session-bar-timer-title {
	  left: 0px;
	}
	.session-bar-timer .session-bar-timer-p {
	  left: 0px;
	}
	.session-bar-timer .session-bar-timer-btn-group {
	  margin-top: 50px;
	  right: 5PX;
	}
}
#idletimeout a { color:#fff; font-weight:bold }
#idletimeout span { font-weight:bold }
/*
 * RESET BOOTSTRAP DEFAULT IE FILTER
 */
[class^="bg-"],
[class*=" bg-"] {
  filter: none !important;
}
/* TEXT ALIGN */
.text-align-center{
	text-align: center !important;	
}
.text-align-left{
	text-align: left !important;	
}
.text-align-right{
	text-align: right !important;	
}


/*
 * TEXT COLOR
 */
.txt-color-blue {
  color: #57889c !important;
}
.txt-color-blueLight {
  color: #92a2a8 !important;
}
.txt-color-blueDark {
  color: #4c4f53 !important;
}
.txt-color-green {
  color: #356e35 !important;
}
.txt-color-greenLight {
  color: #71843f !important;
}
.txt-color-greenDark {
  color: #496949 !important;
}
.txt-color-red {
  color: #a90329 !important;
}
.txt-color-yellow {
  color: #b09b5b !important;
}
.txt-color-orange {
  color: #b19a6b !important;
}
.txt-color-orangeDark {
  color: #a57225 !important;
}
.txt-color-pink {
  color: #ac5287 !important;
}
.txt-color-pinkDark {
  color: #a8829f !important;
}
.txt-color-purple {
  color: #6e587a !important;
}
.txt-color-darken {
  color: #404040 !important;
}
.txt-color-lighten {
  color: #d5e7ec !important;
}
.txt-color-white {
  color: #ffffff !important;
}
.txt-color-grayDark {
  color: #525252 !important;
}
.txt-color-magenta {
  color: #6e3671 !important;
}
.txt-color-teal {
  color: #568a89 !important;
}
.txt-color-redLight {
  color: #a65858 !important;
}
/*
 * BACKGROUNDS
 */
.bg-color-blue {
  background-color: #57889c !important;
}
.bg-color-blueLight {
  background-color: #92a2a8 !important;
}
.bg-color-blueDark {
  background-color: #4c4f53 !important;
}
.bg-color-green {
  background-color: #356e35 !important;
}
.bg-color-greenLight {
  background-color: #71843f !important;
}
.bg-color-greenDark {
  background-color: #496949 !important;
}
.bg-color-red {
  background-color: #a90329 !important;
}
.bg-color-yellow {
  background-color: #b09b5b !important;
}
.bg-color-orange {
  background-color: #c79121 !important;
}
.bg-color-orangeDark {
  background-color: #a57225 !important;
}
.bg-color-pink {
  background-color: #ac5287 !important;
}
.bg-color-pinkDark {
  background-color: #a8829f !important;
}
.bg-color-purple {
  background-color: #6e587a !important;
}
.bg-color-darken {
  background-color: #404040 !important;
}
.bg-color-lighten {
  background-color: #d5e7ec !important;
}
.bg-color-white {
  background-color: #ffffff !important;
}
.bg-color-grayDark {
  background-color: #525252 !important;
}
.bg-color-magenta {
  background-color: #6e3671 !important;
}
.bg-color-teal {
  background-color: #568a89 !important;
}
.bg-color-redLight {
  background-color: #a65858 !important;
}



/***
Mini chart containers
***/
.bar-chart,
.line-chart {
  display: none;
}

/***
Chats
***/
.chats {
  margin: 0;
  padding: 0;
  margin-top: -15px;
}
.chats li {
  list-style: none;
  padding: 5px 0;
  margin: 10px auto;
  font-size: 12px;
}
.chats li .body {
  display: block;
}
.chats li .avatar {
  height: 45px;
  width: 45px;
  -webkit-border-radius: 50% !important;
  -moz-border-radius: 50% !important;
  border-radius: 50% !important;
}
.chats li.in .avatar {
  float: left;
  margin-right: 10px;
}
.chats li.out .avatar {
  float: right;
  margin-left: 10px;
}
.chats li .name {
  color: #3590c1;
  font-size: 13px;
  font-weight: 400;
}
.chats li .datetime {
  color: #333;
  font-size: 13px;
  font-weight: 400;
}
.chats li .message {
  display: block;
  padding: 5px;
  position: relative;
}
.chats li.in .message {
  text-align: left;
  border-left: 2px solid #1BBC9B;
  margin-left: 65px;
  background: #fafafa;
}
.chats li.in .message .arrow {
  display: block;
  position: absolute;
  top: 5px;
  left: -8px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #1BBC9B;
}
.chats li.out .message {
  border-right: 2px solid #F3565D;
  margin-right: 65px;
  background: #fafafa;
  text-align: right;
}
.chats li.out .message .arrow {
  display: block;
  position: absolute;
  top: 5px;
  right: -8px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid #F3565D;
}
.chats li.out .name,
.chats li.out .datetime {
  text-align: right;
}

.chat-form {
  margin-top: 15px;
  padding: 10px;
  background-color: #e9eff3;
  overflow: hidden;
  clear: both;
}
.chat-form .input-cont {
  margin-right: 40px;
}
.chat-form .input-cont .form-control {
  border: 1px solid #ddd;
  width: 100%  !important;
  margin-top: 0;
  background-color: #fff !important;
}
.chat-form .input-cont .form-control:focus {
  border: 1px solid #4b8df9 !important;
}
.chat-form .btn-cont {
  margin-top: -42px;
  position: relative;
  float: right;
  width: 44px;
}
.chat-form .btn-cont .arrow {
  position: absolute;
  top: 17px;
  right: 43px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #4d90fe;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.chat-form .btn-cont .btn {
  margin-top: 8px;
}
.chat-form .btn-cont:hover .arrow {
  border-right-color: #0362fd;
}
.chat-form .btn-cont:hover .btn {
  background-color: #0362fd;
	
}