@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700");

:root {
  --main-color: #6699cc;
}

/***********************************************************************************************************************
 * AUTHENTICATION FORMS, PAGE
***********************************************************************************************************************/
.auth-box {
  -moz-box-shadow: 1px 2px 10px 0 rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 1px 2px 10px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 1px 2px 10px 0 rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  width: 90%;
  height: 500px;
  margin: 0 auto;
  background-color: #fff; }
.auth-box:before {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  content: ' ';
  vertical-align: middle;
  height: 100%; }
.auth-box .content {
  display: inline-block;
  vertical-align: middle;
  /*vertical-align: auto;
  *zoom: 1;
  *display: inline;*/
  width: 99%;
  vertical-align: middle; }
.auth-box .left {
  /*float: left;
  width: 42%;
  height: 100%;*/
  padding: 0 15px;
  text-align: center; }
.auth-box .left:before {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  content: ' ';
  vertical-align: middle;
  height: 100%; }
.auth-box .right {
  /*float: right;
  width: 58%;
  height: 100%;
  position: relative;*/
  /*background-image: url("../../app/img/left.jpg");*/
  background-repeat: no-repeat;
  background-size: cover; }
.auth-box .right:before {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  content: ' ';
  vertical-align: middle;
  height: 100%; }
.auth-box .right .text {
  position: relative;
  padding: 0 30px;
  color: #fff; }
.auth-box .right .heading {
  margin-top: 0;
  margin-bottom: 5px;
  font-size: 50px;
  font-weight: 300; }
.auth-box .right p {
  margin: 0;
  font-size: 25px;
  font-weight: 300; }
.auth-box .right .overlay {
  position: absolute;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  /*background: rgba(99, 156, 185, 0.92); }*/
  background: rgba(55, 99, 172, 0.79);
}
.auth-box .header {
  margin-bottom: 30px; }
.auth-box .lead {
  margin-top: 5px;
  font-size: 18px;
  text-align: center; }
.auth-box .form-auth-small .btn {
  margin-top: 20px; }
.auth-box .form-auth-small .element-left {
  float: left; }
.auth-box .form-auth-small .element-right {
  float: right; }
.auth-box .form-auth-small .bottom {
  margin-top: 0px;
  text-align: center; }
.auth-box.lockscreen {
  width: 50%;
  padding: 40px 60px; }
.auth-box.lockscreen .logo {
  margin-bottom: 30px; }
.auth-box.lockscreen .user {
  margin-bottom: 30px; }
.auth-box.lockscreen .user .name {
  font-size: 18px;
  margin-top: 10px; }
@media screen and (min-width: 1440px) {
  .auth-box.lockscreen {
    width: 35%; } }
@media screen and (max-width: 1279px) {
  .auth-box {
    width: 90%; }
  .auth-box .left {
    top: 3.3em; } }
@media screen and (max-width: 1023px) {
  .auth-box .left {
    width: 100%;
    position: inherit;
    padding: 15px; }
  .auth-box .right {
    display: none; } }
@media screen and (max-width: 992px) {
  .auth-box {
    width: 70%; }
  .auth-box.lockscreen {
    width: 50%;
    padding: 40px 20px; } }
@media screen and (max-width: 640px) {
  .auth-box {
    width: 90%; }
  .auth-box .content {
    width: 95%; }
  .auth-box.lockscreen {
    width: 90%; } }


/***********************************************************************************************************************
PROJECT STYLES
************************************************************************************************************************/

.tab-content-cliente {
  clear: both;
}

.project-item .left {
  float: left
}

.project-item .right {
  float: right
}

.project-item .panel-title a {
  color: #717d84
}

.project-item .panel-title a:hover, .project-item .panel-title a:focus {
  text-decoration: underline
}

.project-item .label-pending {
  background-color: #e9edf1;
  border: 1px solid #ced7df;
  color: #8b97a6
}

.project-item .info {
  margin-bottom: 25px
}

.project-item .info:last-child {
  margin-bottom: 0
}

.project-item .info .title, .project-item .info .value {
  display: block;
  margin-bottom: 3px
}

.project-item .info .title {
  color: #a0aeba;
  font-size: 12px
}

.project-item .info .value {
  font-size: 13px
}

.project-item .info .leader-picture {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  width: 30px;
  margin-right: 8px;
  margin-top: 2px
}

.project-item .progress-chart {
  margin-bottom: 3px
}

.project-item .progress-chart .percent {
  font-size: 18px;
  line-height: 110px;
  color: #a0aeba
}

.project-item .task {
  text-align: center
}

.project-item .task .task-progress {
  margin-bottom: 8px;
  font-size: 12px;
  color: #a0aeba
}

.project-item .controls {
  margin-top: 30px
}

.project-item .controls a {
  margin-right: 15px;
  font-size: 13px;
  color: #a0aeba
}

.project-item .controls a:hover, .project-item .controls a:focus {
  text-decoration: underline
}

.project-item .controls a:hover i, .project-item .controls a:focus i {
  text-decoration: none
}

.project-item .controls a i {
  margin-right: 5px;
  font-size: 14px;
  color: #0af
}

@media screen and (max-width: 640px) {
  .project-item .panel-body .right {
    float: left;
    margin-top: 20px
  }

  .project-item .controls a {
    display: block;
    margin-bottom: 10px
  }

  .project-item .controls a:last-child {
    margin-bottom: 0
  }
}

.project-heading {
  padding: 25px
}

.project-heading .project-logo {
  width: 50px;
  border: 1px solid #eaeff2
}

.project-heading .project-title {
  margin-top: 0;
  margin-bottom: 5px;
  font-size: 20px;
  font-weight: normal
}

@media screen and (max-width: 640px) {
  .project-heading .media {
    margin-bottom: 10px
  }

  .project-heading .project-title {
    font-size: 16px
  }

  .project-heading .text-right {
    text-align: left
  }
}

.project-subheading {
  background-color: #fafbfc;
  margin: 25px -20px 0 -20px;
  padding: 25px;
  border-top: 1px solid #eaeff2;
  border-bottom: 1px solid #eaeff2
}

.project-metrics .main-info-item .title {
  margin-bottom: 5px;
  font-size: 13px;
  color: #a0aeba
}
.project-metrics .main-info-item .title, .project-metrics .main-info-item .value {
  display: block
}

.project-metrics.milestone-section .main-info-item .title {
  font-size: 12px
}

.project-metrics.milestone-section .main-info-item .value {
  font-size: 13px
}

.project-info {
  margin-bottom: 30px
}

.project-info .info-heading {
  margin: 0 0 15px 0;
  font-size: 13px;
  color: #a0aeba
}

.project-info .project-description {
  line-height: 1.7
}

.project-accordion {
  color: #7b8186
}

.project-accordion .panel-heading {
  padding: 0;
  background-color: #f8f9fa
}

.project-accordion .panel-heading .panel-title {
  display: block;
  font-size: 15px;
  font-weight: normal
}

.project-accordion .panel-heading .panel-title > a {
  display: block;
  padding: 15px 12px;
  color: #717d84
}

.project-accordion .panel-heading .panel-title > a:hover, .project-accordion .panel-heading .panel-title > a:focus {
  color: #717d84
}

.project-accordion .panel-heading .panel-title > a > .icon-indicator {
  min-width: 18px
}

.project-accordion .panel-heading .panel-title .toggle-icon {
  float: right;
  color: #c6d2dd
}

.project-accordion .panel-heading + .panel-collapse > .panel-body {
  border-top: none;
  background-color: #fafbfc
}

.project-accordion .panel-heading .label {
  margin-left: 10px
}

.project-accordion .panel-heading .note {
  margin-left: 10px;
  font-size: 12px;
  color: #a0aeba
}

.project-milestone .milestone-section {
  margin-bottom: 45px
}

.project-milestone .milestone-section:last-child {
  margin-bottom: 0
}

.project-milestone .milestone-heading {
  margin: 0 0 12px 0;
  font-size: 12px;
  color: #a0aeba
}

.project-milestone .milestone-description {
  margin-bottom: 0;
  font-size: 14px
}

.project-milestone .panel-footer {
  padding-top: 25px;
  padding-bottom: 25px;
  background-color: #f2f5f8
}

.project-milestone .panel-footer .btn {
  padding-top: 8px;
  padding-bottom: 8px
}

@media screen and (max-width: 640px) {
  .project-milestone .panel-heading .milestone-title {
    display: block
  }

  .project-milestone .panel-heading .label, .project-milestone .panel-heading .note {
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    *zoom: 1;
    *display: inline;
    margin-top: 5px;
    margin-left: 20px
  }

  .project-milestone .panel-heading .panel-title .toggle-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    margin-top: -7.5px
  }

  .project-milestone .panel-footer .btn {
    display: block;
    margin-bottom: 8px
  }
}

.table-project-tasks > thead > tr {
  font-size: 12px
}

.table-project-tasks > tbody > tr {
  font-size: 13px
}

.table-project-tasks > tbody > tr > td.divider {
  background-color: #fff;
  text-align: center
}

.table-project-tasks .task-indicator {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  width: 10px;
  height: 10px;
  margin-right: 3px;
  background-color: #7b8186;
  position: relative;
  top: -1px
}

.table-project-tasks .task-indicator.success {
  background-color: #53c265
}

.table-project-tasks .task-indicator.warning {
  background-color: #F3BB23
}

.table-project-tasks .task-indicator.danger {
  background-color: #ff4402
}

.table-project-tasks .actions a {
  color: #a0aeba;
  margin-right: 5px
}

.table-project-tasks .actions a i {
  font-size: 14px
}

.list-project-progress .project-name {
  display: block;
  margin-bottom: 10px
}

.list-project-progress .project-name:hover, .list-project-progress .project-name:focus {
  color: #fff
}

.list-project-progress .progress {
  width: 85%;
  float: left
}

.list-project-progress .percentage {
  float: right;
  position: relative;
  top: -9px;
  color: #fff
}

/***********************************************************************************************************************
Switch select
************************************************************************************************************************/
.switch-input {
  display: block;
  position: relative;
  line-height: 1;
  margin-bottom: 4px;
  padding: 10px 60px 0 0;
  cursor: pointer;
  font-weight: normal;
  color: #a0aeba
}

.switch-input input {
  position: absolute;
  left: -9999px
}

.switch-input input:checked + i {
  border-color: #2ab442;
  background-color: #53D76A
}

.switch-input input:checked + i:before {
  right: 33px;
  background-color: #2ab442
}

.switch-input input:checked + i:after {
  content: attr(data-swon-text);
  text-align: right;
  color: #fff
}

.switch-input i {
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  content: '';
  display: block;
  position: absolute;
  top: 6px;
  right: 0;
  min-width: 50px;
  height: 20px;
  border-width: 1px;
  border-style: solid;
  border-color: #e1e3ea;
  background: #f8f9fa;
  font-style: normal
}

.switch-input i:before {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-transition: right 0.1s ease-in;
  -moz-transition: right 0.1s ease-in;
  -ms-transition: right 0.1s ease-in;
  -o-transition: right 0.1s ease-in;
  transition: right 0.1s ease-in;
  content: '';
  display: block;
  position: absolute;
  top: 4px;
  right: 4px;
  width: 10px;
  height: 10px;
  background-color: #bdc6d0
}

.switch-input i:after {
  content: attr(data-swoff-text);
  position: absolute;
  top: 2px;
  right: 8px;
  left: 8px;
  font-weight: normal;
  font-size: 10px;
  line-height: 15px;
  color: #929aa5
}
/***********************************************************************************************************************
Forbbiden cursor
************************************************************************************************************************/
.not-allowed{
  cursor: not-allowed;
}
/***********************************************************************************************************************
Layout Table
************************************************************************************************************************/
.layout-table {
  display: table;
  width: 100%
}

.layout-table .cell {
  display: table-cell
}

.layout-table .cell.valign-top {
  vertical-align: top
}

.layout-table .cell.valign-middle {
  vertical-align: middle
}

.layout-table .cell.valign-bottom {
  vertical-align: bottom
}

@media screen and (max-width: 640px) {
  .layout-table, .layout-table .cell {
    display: block
  }

  .layout-table .cell {
    margin-bottom: 10px
  }

  .layout-table .cell.text-right {
    text-align: left
  }
}
/***********************************************************************************************************************
Widget metric
************************************************************************************************************************/

.widget-metric_1 .icon-wrapper {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  display: block;
  position: relative;
  width: 50px;
  height: 50px;
  float: left;
  text-align: center;
  color: #fff;
  overflow: hidden
}

.widget-metric_1 .icon-wrapper i {
  font-size: 17px;
  line-height: 50px
}

.widget-metric_1 .icon-wrapper:after {
  display: block;
  position: absolute;
  top: 23px;
  left: 4px;
  content: "";
  background-color: rgba(255, 255, 255, 0.2);
  width: 130%;
  height: 100%;
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  transform: rotate(-30deg)
}

.widget-metric_1 .right {
  padding-left: 65px
}

.widget-metric_1 .value {
  margin-right: 5px;
  font-size: 24px;
  font-weight: 300
}

.widget-metric_1 .change-icon {
  position: relative;
  left: 2px;
  font-size: 18px
}

.widget-metric_1 .fa-sort-down {
  top: -6px
}

.widget-metric_1 .title {
  display: block;
  font-size: 12px;
  color: #a0aeba
}

.widget-metric_1.animate:hover .icon-wrapper {
  -webkit-animation-duration: .3s;
  animation-duration: .3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-iteration-count: 2;
  animation-iteration-count: 2
}

.widget-metric_1.animate:hover .change-up {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite
}

.widget-metric_1.animate:hover .change-down {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite
}

.widget-metric_2 .icon {
  float: left;
  font-size: 30px;
  color: #a0aeba
}

.widget-metric_2 .right {
  padding-left: 60px
}

.widget-metric_2 .right span {
  display: block
}

.widget-metric_2 .title {
  font-size: 13px;
  color: #a0aeba
}

.widget-metric_2 .value {
  margin: 8px 0;
  font-size: 28px;
  font-weight: 300;
  line-height: 1
}

.widget-metric_2 .percentage {
  font-size: 15px
}

.widget-metric_2 .menu {
  line-height: 2.2
}

.widget-metric_2.animate:hover .icon {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1
}

.list-widget-vertical .widget-metric_2 {
  margin: 35px 0;
  padding: 0 25px
}

.widget-metric_3 {
  text-align: center
}

.widget-metric_3 .value {
  font-size: 46px;
  font-weight: 300;
  display: block
}

.widget-metric_3 .note {
  font-size: 13px;
  color: #a0aeba
}

.widget-metric_4 {
  text-align: center
}

.widget-metric_4 .chart {
  display: block;
  margin: 12px 0
}

.widget-metric_4 .note {
  font-size: 13px;
  color: #a0aeba
}

.widget-metric_5 {
  text-align: center
}

.widget-metric_5 .list-value {
  margin: 8px 0
}

.widget-metric_5 .list-value > li {
  margin: 0 10px
}

.widget-metric_5 i {
  font-size: 28px;
  color: #a0aeba
}

.widget-metric_5 .percentage {
  display: block;
  font-size: 13px
}

.widget-metric_5 .note {
  font-size: 13px;
  color: #a0aeba
}

.widget-metric_6 .icon-wrapper {
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  display: block;
  position: relative;
  width: 50px;
  height: 50px;
  float: left;
  text-align: center;
  color: #fff;
  overflow: hidden
}

.widget-metric_6 .icon-wrapper i {
  font-size: 20px;
  line-height: 50px
}

.widget-metric_6 .right {
  padding-left: 65px
}

.widget-metric_6 .value {
  margin-right: 5px;
  font-size: 24px;
  font-weight: 300
}

.widget-metric_6 .title {
  display: block;
  font-size: 12px;
  color: #a0aeba
}

.widget-metric_6.animate:hover .icon-wrapper {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: tada;
  animation-name: tada;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1
}

@media screen and (max-width: 640px) {
  .widget-metric_6 {
    margin-bottom: 15px
  }
}

.widget-metric_7 .icon {
  float: left;
  font-size: 22px
}

.widget-metric_7 .right {
  padding-left: 40px
}

.widget-metric_7 .right span {
  display: block
}

.widget-metric_7 .title {
  font-size: 13px;
  color: #a0aeba
}

.widget-metric_7 .value {
  margin-bottom: 5px;
  font-size: 15px;
  line-height: 1
}

.widget-metric_8 .heading {
  margin-bottom: 15px
}

.widget-metric_8 .title {
  float: left;
  line-height: 1.8
}

.widget-metric_8 .dropdown {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  float: right
}

.widget-metric_8 .toggle-dropdown {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  width: 23px;
  height: 23px;
  line-height: 20px;
  display: block;
  border: 1px solid #c6d2dd;
  text-align: center;
  font-size: 16px;
  color: #c6d2dd
}

.widget-metric_8 .toggle-dropdown:hover, .widget-metric_8 .toggle-dropdown:focus {
  background-color: #f9fafb
}

.widget-metric_8 .toggle-dropdown i {
  margin: 0;
  font-size: 14px
}

.widget-metric_8 i {
  margin-right: 5px;
  font-size: 21px
}

.widget-metric_8 .value {
  font-size: 23px;
  font-weight: 300
}

.widget-metric_8 .progress {
  margin-top: 5px;
  margin-bottom: 15px
}

.widget-metric_8 .info {
  margin: 0;
  color: #a0aeba;
  font-size: 12px
}

.widget-metric_8 .icon-change {
  font-size: 12px
}

.widget-metric_9 .title {
  display: block;
  line-height: 1;
  font-size: 28px;
  font-weight: 300;
  color: #a0aeba
}

.widget-metric_9 .value {
  display: block;
  line-height: 1.6;
  font-size: 48px;
  font-weight: 300
}

.widget-metric_9 .percentage {
  display: block;
  font-size: 15px;
  margin-bottom: 3px
}

.widget-metric_9 .percentage i {
  font-size: 24px;
  position: relative;
  top: 4px;
  vertical-align: middle
}

.widget-metric_9 .percentage .icon-down {
  top: -8px
}

.widget-metric_10 {
  text-align: center
}

.widget-metric_10 .title {
  display: block;
  font-size: 16px
}

.widget-metric_10 .value {
  display: block;
  margin: 3px 0
}

.widget-metric_10 .number {
  font-size: 24px
}

.widget-metric_10 .symbol {
  font-size: 15px;
  color: #a0aeba
}

.widget-metric_11 .bottom {
  margin-top: 10px
}

.widget-metric_11 .left {
  float: left
}

.widget-metric_11 .right {
  float: right;
  line-height: 4.3;
  text-align: right
}

.widget-metric_11 .value {
  display: block;
  font-size: 28px;
  font-weight: 300
}

.widget-metric_11 .change {
  color: #a0aeba
}
/***********************************************************************************************************************
Widget list verical
************************************************************************************************************************/


.list-widget-vertical {
  margin: 0
}

.list-widget-vertical > li {
  border-bottom: 1px solid #e9eef2
}

.list-widget-vertical > li:last-child {
  border-bottom: none
}

.list-widget-vertical.no-border > li {
  border-bottom: none;
  margin-bottom: 40px
}

.list-widget-vertical.no-border > li:last-child {
  margin-bottom: 0
}

.list-widget-vertical.no-border.spacing-25 > li {
  margin-bottom: 25px
}


/***********************************************************************************************************************
Custom text colors
************************************************************************************************************************/

.custom-bg-black {
  background-color: #000 !important
}

.custom-text-black {
  color: #000
}

.custom-bg-white {
  background-color: #FFF !important
}

.custom-text-white {
  color: #FFF
}

.custom-text-blue {
  color: #0E9BE2
}

.custom-bg-blue2 {
  background-color: #4A90E2 !important
}

.custom-text-blue2 {
  color: #4A90E2
}

.custom-bg-blue3 {
  background-color: #45AEEF !important
}

.custom-text-blue3 {
  color: #45AEEF
}

.custom-bg-blue4 {
  background-color: #85B5EA !important
}

.custom-text-blue4 {
  color: #85B5EA
}

.custom-bg-deepblue {
  background-color: #3763AC !important;
  opacity: 0.8 !important;
}

.custom-bg-green {
  background-color: #7CAC25 !important
}

.custom-text-deepblue {
  color: #3763AC !important;
}

.custom-text-white {
  color: #FFF !important;
}

.custom-text-green {
  color: #7CAC25
}

.custom-text-grey {
  color: #5e6773 !important;
}

.custom-bg-green2 {
  background-color: #1DBB8E !important
}

.custom-text-green2 {
  color: #1DBB8E
}

.custom-bg-green3 {
  background-color: #5BD37E !important
}

.custom-text-green3 {
  color: #5BD37E
}

.custom-bg-orange {
  background-color: #FF4402 !important
}

.custom-text-orange {
  color: #FF4402
}

.custom-bg-orange2 {
  background-color: #F89B03 !important
}

.custom-text-orange2 {
  color: #F89B03
}

.custom-bg-purple {
  background-color: #AB7DF6 !important
}

.custom-text-purple {
  color: #AB7DF6
}

.custom-bg-yellow {
  background-color: #F3BB23 !important
}

.custom-text-yellow {
  color: #F3BB23
}

.custom-bg-lightseagreen {
  background-color: #20b2aa !important
}

.custom-text-lightseagreen {
  color: #20b2aa
}

.custom-bg-red {
  background-color: #ff4402 !important
}

.custom-text-red {
  color: #ff4402
}

.custom-bg-main-color {
  background-color: var(--main-color) !important
}

.custom-text-main-color {
  color: var(--main-color) !important
}
/***********************************************************************************************************************
Custom badges
************************************************************************************************************************/
.badge {
  font-weight: normal
}

.badge-primary {
  background-color: #3763AC
}

.badge-success {
  background-color: #41B314
}

.badge-warning {
  background-color: #e4cb10
}

.badge-danger {
  background-color: #F9354C
}

.badge-info {
  background-color: #5bc0de
}

.separator{
  border-style: none;
}
/***********************************************************************************************************************
Image adjust
************************************************************************************************************************/
.navbar-default .brand {
  float: left;
  padding: 0 40px;
  position: relative;
  top: 0 !important;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
  color: #008fd6;
}
.navbar-default .navbar-nav > li > a {
  color: #1f6ad0;
  font-weight: 300;
}.navbar-default {
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
   -moz-box-shadow: 0 0px 10px 2px rgba(86, 99, 116, 0.25);
   -webkit-box-shadow: 0 0px 10px 2px rgba(86, 99, 116, 0.25);
   box-shadow: 0 0px 10px 2px rgba(86, 99, 116, 0.25);
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
   border-radius: 0;
   /*padding-top: 20px;*/
   margin: 0;
   border: none;
   background: #F8F8F8 !important;

 }
.navbar-btn button {
  font-size: 18px;
  padding: 0 20px;
  line-height: 1;
  vertical-align: middle;
  border: none;
  background: none;
  outline: none;
  color: var(--main-color);
}.navbar-btn button:hover, .navbar-btn button:focus {
   color: var(--main-color);
   opacity: 0.8;
 }

.layout-topnav .navbar-default .navbar-nav > li > a {
  color: inherit;
}

.layout-topnav .navbar-default .navbar-nav > li.open > a, .layout-topnav .navbar-default .navbar-nav > li.open > a:hover {
  color: inherit;
  opacity: 0.8;
}

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
  color: inherit;
  opacity: 0.8;
}

.wmenu * > a {
  color: inherit !important;
}

/* PARA LA LIBRERIA DEL MENU DRAG & DROP */
.popover {
  max-width: 100% !important;
}

/* PARA LOS SELECTS QUE USAN LA LIBRERIA SELECT2 */
.select2-container{
  width: 100% !important;
}

/* EFECTO OPACITY PARA ITEMS MENU AL CARGAR */
.opacity7 {
  opacity: 0.7;
}

/* PARA EL MÓDULO DE BIBLIOTECA MULTIMEDIA */
#breadcrumbs > li, .file-item {
  cursor: pointer !important;
}

.w100 {
  width: 100%;
}

.w50 {
  width: 50%;
}

.verticalAlignTable{
  vertical-align: middle;
}

/* PARA CENTRAR CONTENIDO DENTRO DE DIV*/
.col-centered{
  float: none;
  margin: 0 auto;
}

/***********************************************************************************************************************
Custom margin
************************************************************************************************************************/
.custom-list-contacts > li {
  margin-bottom: 10px;
}

.custom-margin-0-auto {
  margin:0 auto !important;
}

.custom-margin-30 {
  margin: 30px;
}

/***********************************************************************************************************************
Custom padding
************************************************************************************************************************/

.custom-padding-left-30 {
  padding-left: 30px !important;
}

.custom-padding-5 {
  padding: 5px !important;
}


/***********************************************************************************************************************
Custom modal
************************************************************************************************************************/
.custom-modal-xlg {
  width:1200px !important;
}


/***********************************************************************************************************************
Custom width
************************************************************************************************************************/
.custom-width-100 {
  width:100% !important;
}

.custom-width-90 {
  width:100% !important;
}

.custom-width-95 {
  width:95% !important;
}

.custom-width-98 {
  width:98% !important;
}

/***********************************************************************************************************************
Custom height
************************************************************************************************************************/
.custom-height-100 {
  height:100% !important;
}


/***********************************************************************************************************************
Custom table
************************************************************************************************************************/
th.custom-width-0 {
  width: 0%;
}

th.custom-width-10 {
  width: 10%;
}

th.custom-width-90 {
  width: 90%;
}

.table th, td.custom-align-center {
  /*text-align: center !important;*/ /* ALEJANDRO. COMENTADO PORQUE NO ENCUENTRO PORQUÉ SE CREÓ Y DEFORMA EL DISEÑO */
}

td.custom-text-table a {
}

td.custom-celda-bk-1 {
  background-color: #eaf4f8 !important;
}

td.custom-celda-bk-2 {
  background-color: #fff !important;
}

span.custom-text-md {
  font-size: 16px !important;
  color: #000000 !important;
}

span.custom-text-xs {
  font-size: 12px !important;
  color: #a09d9d !important;
}

div.custom-panel-body {
  background-color: #eaf4f8 !important;
}

/***********************************************************************************************************************
Custom margin
************************************************************************************************************************/
h3.panel-heading {
  font-family: Oswald;
  font-size:18px !important;
}
/***********************************************************************************************************************
Pensado para que las etiquetas hr tengan más visibilidad
************************************************************************************************************************/
.strong-ruler{
  width: 100%;
  height: 1px;
  background-color:#e3e3e3;
}
/***********************************************************************************************************************
Pensado para alinear verticalmente los contenidos de las rows
************************************************************************************************************************/
.vertical-align {
  display: flex;
  align-items: center;
}

/***********************************************************************************************************************
Pensado para alinear horizontalmente los contenidos de las columnas
************************************************************************************************************************/
.text-align-left {
  text-align: left !important;
}

.text-align-center {
  text-align: center !important;
}

/***********************************************************************************************************************
Pensado para la mano del cursor
************************************************************************************************************************/
.cursor-hand {
  cursor: pointer !important;
   cursor: hand !important;
}

/***********************************************************************************************************************
Pensado para colores
************************************************************************************************************************/
.bg-color-f8f9fa {
  background-color: #f8f9fa !important;
}

.custom-calendar-item:hover * {
  cursor: pointer !important;
  color: #FFF !important;
  background-color: var(--main-color);
}

.disabledLink {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}

.height-55 {
  height: 55px;
  max-height: 55px;
}

/* linea de separación de la cabecera y el nav */
hr.cabecera {
  margin-bottom: 0px !important;
}

.btn-active {
  opacity: 0.8 !important;
}

.banner-iframe {
  width: 100% !important;
  min-height: 300px;
}

.border-danger {
  border: 1px solid #dc3545 !important;
}

.border-success {
  border: 1px solid #28a745 !important;
}

.border-info {
  border: 1px solid #17a2b8 !important;
}

.border-warning {
  border: 1px solid #ffc107 !important;
}

.center-menu {
  float: none;
  margin: 0 auto;
  display: table;
  table-layout: fixed;
}

.margin-top-50 {
  margin-top: 50px !important
}

.margin-bottom-50 {
  margin-bottom: 50px !important
}

.wmenu * .dropdown-menu {
  background-color: #FFF !important;
  color: #333 !important;
}

.direction-left-to-right {
 direction: ltr;
}

.direction-right-to-left {
 text-align: right;
}

@media (max-width:767px) {
  .widget-render * [data-hidden-small="1"] {
    display: none !important;
  }
}

@media (min-width:768px) and (max-width:1199px){
  .widget-render * [data-hidden-medium="1"] {
    display: none !important;
  }
}

@media (min-width:1200px){
  .widget-render * [data-hidden-large="1"] {
    display: none !important;
  }
}
#main-div{
min-height: 100vh;
}

.wsliders{
        position:relative;
        overflow:hidden;
    }
    .contenedorsliders{
        width: 100%;
        height:100%;
        position:relative;
        margin-left: 0;
    }
    .contenedorsliders article{
        position: absolute;
        height:100%;
        z-index: -1;
    }
    .slidersCopia{
        width: 100%;
        height:100%;
        float:left;
    }
    .imageSlider{
        width:100%;
        height:100%;
    }
    .imageSlider video{
        width:100%;
        height:100%;
    }
    .contentSlider{
        width:100%;
        height:100%;
        position:absolute;
        overflow:hidden;
    }
    .contentSlider-txt{
        width: 100%;
        height:100%;
        overflow:hidden;
    }
    .contentSlider-txt h3{
        margin-top: 0;
        margin-bottom: 0;
        position: absolute;
    }
    .contentSlider-txt p{
        position: absolute;
    }
    @media(max-width: 768px){
        .contentSlider-txt h3{
        transform: translateY(-200px);
        max-width: calc(100vw - 20px);
        }
        .contentSlider-txt h3 span{

            color: #fff;
            font-size: 50px !important;
            font-weight: 300;
            text-align: center;
            text-transform: uppercase;
        }
    }
    .sliders-control {
        height: 40px;
        position: absolute;
        width: 100%;
        display: flex;
        justify-content: space-between;
        z-index: 4;
    }
    .sliders-control i {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #fff;
        opacity: 0.7;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor:pointer;
    }
    .sliders-control i:nth-of-type(1) {
        margin-left: 5px;
    }
    .sliders-control i:nth-of-type(2) {
        margin-right: 5px;
    }
    .sliders-control i:hover {
        opacity: 1;
    }
    .switchSlider{
        width:auto;
        height:auto;
        position:absolute;
        bottom:50px;
    }
    .switchSlider ul{
        list-style:none;
        overflow:hidden;
    }
    .switchSlider > ul > li{
        width:12px;
        height:12px;
        border-radius:50%;
        background:var(--second-color);
        float:left;
        margin-right:5px;
        cursor:pointer;
    }
    .switchSlider video{
        width: 100%;
        height: 100%;
        border-radius:50%;
    }
    .onSliderActivo {
        width:100%;
        height:100%;
        border-radius:50%;
        background: var(--main-color);
        position:relative;
        margin-left: 0;
    }
    .previmgSlider{
        justify-content: center;
    }
    .previmgSlider *{
        object-fit: cover;
        cursor: pointer;
    }
    .imgSliderActivo{
        opacity: 1 !important;
        border: var(--main-color) solid 5px  
    }
    .prevTituloSlider{
        position: absolute;
        flex-direction: column;
        top: 0;
        margin-top: 40px;
        margin-left: 40px;
    }
    .prevTituloSlider > div{
        display: flex;
        align-items: center;
        cursor: pointer;
        margin: 5px
    }
    .prevTituloSlider img{
        width: 50px;
        height: 50px;
        border-radius:50%;
        object-fit: cover;
    }
    .prevTituloSlider video{
        width: 50px;
        height: 50px;
        border-radius:50%;
        object-fit: cover;
    }
    .prevTituloSlider h3{
        margin-top: 0;
        margin-bottom: 0;
        margin-left: 5px;
    }
    .onTituloActivoSlider {
        scale: 1.3;
    }
    .divcomentariosimgSlider{
        display: flex;
        height: 100%;
        width: 100%;
        justify-content: center;
        gap: 10%;
        text-align: center;
    }
    .divcomentariosimgSlider > div{
        max-width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: fit-content;
    }
    .divcomentariosimgSlider > div > video,
    .divcomentariosimgSlider > div > img{
        width: 120px;
        height: 120px;
        border-radius:50%;
        object-fit: cover;
    }
    .divcomentariosimgSlider > div:first-child,
    .divcomentariosimgSlider > div:last-child{
        margin-top: 60px;
        scale: 0.7;
        cursor: pointer
    }
    .divcomentariosimgSlider h3,
    .divcomentariosimgSlider img,
    .divcomentariosimgSlider video {
    opacity: 1;
    transition: opacity 0.3s;
    }