/*---------------------------------------
    init default
-----------------------------------------*/

html {
	height: 100%;
}

body {
	background-color: #f2f4f7;
  	height: 100%;
}

body::-webkit-scrollbar {
  width: .7em;
}
 
body::-webkit-scrollbar-thumb {
  background-color: rgba(7, 71, 166, .5);
  outline: 1px solid slategrey;
  border-radius: 8px;
}

body::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:active {
  background-color: rgba(7, 71, 166, .8);
}

body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

footer {
	background-color: #232a65;
}

h1, h2, h3 {
    color: #535bd4;
}

p {
	color: #6e6e6e;
}

a:hover, a:active, a:focus {
    color: #1dc9e3;
}

.btn.disabled, .btn:disabled {
    opacity: 1;
    cursor: not-allowed;
}

/*---------------------------------------
    Go Top Button
-----------------------------------------*/

.go-top {
    z-index: 99;
}

.go-top:hover {
    background: rgb(7, 71, 166);
}

/*---------------------------------------
    Bootstrap 3 : Changes              
-----------------------------------------*/

hr {
    border-top: 1px solid #ddd0d0;
}

/*---------------------------------------
    Classes
-----------------------------------------*/

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

*:hover.hover-danger {
    color: #f56a6a;
}

.bg-gradient-primary {
	background-image: linear-gradient(to right, #1dc9e3 0%, #535bd4 100%);
}

.bg-warning-secondary {
  background-color: #ffeb3b9e;
}

.btn-close {
  	position:absolute;
  	right:25px;
  	top:25px;
  	z-index:1;
}

.container-float {
  	position: absolute !important;
  	top: 0px;
  	height: 100%;
}

.container-float section {
  	margin-bottom: 0px;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-zoom-in {
  cursor: zoom-in;
}

.cursor-zoom-out {
  cursor: zoom-out;
}

.overhead {
  position: absolute !important;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
}

/*---------------------------------------
    Typorgraphy              
-----------------------------------------*/

.navbar-brand {
  	font-family: 'IBM Plex Serif', serif;
  	font-weight: 400;
}

.text-primary {
  	color: #535bd4 !important;
}

.text-secondary {
    color: rgb(66, 82, 110) !important;
}

/*---------------------------------------
	Buttons
----------------------------------------*/

.btn-primary.primary {
	background: #0069d9;
	border-top-color: #0069d9;
	border-right-color: #0069d9;
	border-bottom-color: #0069d9;
	border-left-color: #0069d9;
	color: #fff;
	border-radius: 100px;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 1px;
	padding: 14px 36px;
	margin-top: 26px;
	transition: all 0.4s ease-in-out;
}

.btn-primary-square {
  border-radius: 5px;
  font-size: 15px;
  padding: 10px 0px;
  margin-top: 0px;
}

.btn.focus, .btn:focus {
  box-shadow: initial;
}

.btn-outline-primary {
  border-top-color: #0069d9;
  border-right-color: #0069d9;
  border-bottom-color: #0069d9;
  border-left-color: #0069d9;
  color: #0069d9;
}

.btn-outline-primary:hover {
  background-color: #0069d9;
  color: #fff;
}

/*---------------------------------------
  Progress Bar
-----------------------------------------*/

.progressbar-body {
  position: fixed;
  top: 60px;
  left: 0;
  z-index: 100;
  width: 100%;
  display: flex;
  justify-content: flex-end !important;
}

.progressbar-body .progressbar-content {
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}

.progressbar-body span {
  background-color: #007bff;
  height: 8px;
}

/*---------------------------------------
  feature [rombo, circle]
-----------------------------------------*/

.feature-rombo {
	border: solid 2px rgba(210, 215, 217, 0.75);
	width: 100px;
	height: 100px;
	transform: rotate(45deg);
	text-align: center;
	margin-top: 1.5rem !important;
}

.feature-rombo i {
	transform: rotate(-47deg);
	line-height: 90px;
	color: #f56a6a;
}

.feature-circle {
  	border: solid 2px rgba(210, 215, 217, 0.75);
  	width: 100px;
  	height: 100px;
  	border-radius: 50%;
  	text-align: center;
}

.feature-circle i {
  	line-height: 100px;
  	color: #f56a6a;
}
.feature-circle img {
  	max-width: 90px !important;
  	margin: 0px 0px 0px -8px;
}

.feature-circle.selected,
.feature-circle.selected img {
  	-webkit-transition: all 0.50s ease;
  	transition: all 0.50s ease;
}
.feature-circle.selected {
  	box-shadow: inset 0 0 0 60px #007bff;
}
.feature-circle.selected img {
  	margin: -15px 0px 0px -15px;
  	max-width: 110px !important;
}

/*---------------------------------------
  Modal
-----------------------------------------*/

.modal-dialog .modal-header {
    padding-bottom: 0;
}

.modal-dialog .modal-title {
    color: #6c757d;
}

.modal-dialog .close {
  color: #6c757d;
  font-size: 20px;
  position: absolute;
  top: 30px;
  padding: 0;
  width: initial;
  height: initial;
}

.modal-dialog .modal-content {
    background-color: #fff;
    padding: initial;
    text-align: initial;
}

.modal::-webkit-scrollbar {
  width: .7em;
}
 
.modal::-webkit-scrollbar-thumb {
  background-color: rgba(7, 71, 166, .5);
  outline: 1px solid slategrey;
  border-radius: 8px;
}

.modal::-webkit-scrollbar-thumb:hover, .modal::-webkit-scrollbar-thumb:active {
  background-color: rgba(7, 71, 166, .8);
}

.modal::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.modal-backdrop {
    visibility: hidden !important;
}
.modal.show {
    background-color: rgba(0,0,0,0.5);
}

/*---------------------------------------
  Magnific PopUp
-----------------------------------------*/

.mfp-bg {
  z-index: 1055;
}

.mfp-wrap {
  z-index: 1056;
}

/*---------------------------------------
  Icons
-----------------------------------------*/

i.icon-circle {
  	border-radius: 50%;
}

i.icon-xs {
  	font-size: 14px !important;
}

i.icon-sm {
  	font-size: 20px !important;
}

i.icon-md {
  	font-size: 30px !important;
}

i.icon-lg {
  	font-size: 42px !important;
}

i.icon-xl {
  	font-size: 97px !important;
}

/*---------------------------------------
  Color Icons
-----------------------------------------*/

.icon-user {
  color: #007bff !important;
}

.icon-pencil {
  color: #0069d9 !important;
}

.icon-folder {
  color: #ffc107 !important;
}

.icon-graph {
  color: #1e7e34 !important;
}

.icon-list {
  color: #1e7e34 !important;
}

.icon-trash {
  color: #dc3545 !important;
}

.icon-copy {
  color: #007bff !important;
}

.icon-excel {
  color: #1e7e34 !important;
}

.icon-pdf {
  color: #dc3545 !important;
}

.icon-csv {
  color: #9835dc !important;
}

.icon-print {
  color: #3c3c3c !important;
}

.icon-question {
  color: #0069d9 !important;
}

/*---------------------------------------
   Ripple effect
-----------------------------------------*/

.ripple {
	position: relative;
	overflow: hidden;
}

.ripple span.ripple_Effect {
	position: absolute;
	background-color: #fff;
	transform: translate(-50%, -50%);
	pointer-events: none;
	border-radius: 50%;
	animation: ripple 1s linear infinite;
}

@keyframes ripple {
	0% {
		width: 0px;
		height: 0px;
		opacity: 0.5;
	}
	100% {
		width: 1000px;
		height: 1000px;
		opacity: 0;
	}
}

/*---------------------------------------
   Section
-----------------------------------------*/

section {
	margin-bottom: 80px;
}

.section-title {
	padding-top: 32px;
}

.section-title h1 {
	color: #535bd4;
}

/*---------------------------------------
   Section: home
-----------------------------------------*/

.home h1 {
    color: #fff;
}

.home .btn-primary {
    background: transparent;
    border-top-color: #ffffff;
    border-right-color: #ffffff;
    border-bottom-color: #ffffff;
    border-left-color: #ffffff;
    color: #ffffff;
    color: #ffffff;
    border-radius: 100px;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 14px 36px;
    margin-top: 26px;
    transition: all 0.4s ease-in-out;
}

.home .btn-primary:not(:disabled):not(.disabled).active,
.home .btn-primary:not(:disabled):not(.disabled):active,
.show > .home .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: transparent;
    border-color: #fff;
}

.home .ripple span {
	background-color: #fff;
}

.home h2 {
    color: #f0f0f0;
}

/*---------------------------------------
   Thumbs Img      
-----------------------------------------*/

.about-thumb img {
	width: 100%;
}

.about-thumb {
  	margin-bottom: 32px;
  	position: relative;
  	text-align: center;
}

.about-thumb .about-overlay h3 {
  	padding-bottom: 0px;
}

.about-thumb .about-overlay {
  	background-color: rgba(250,250,250,0.9);
  	border-radius: 2px;
  	position: absolute;
  	bottom: 0px;
  	width: 100%;
  	height: 100px;
  	overflow: hidden;
  	transition: height 450ms;
}

.about-thumb:hover .about-overlay {
  	height: 100%;
  	background-color: #ffffff;
  	color: #222;
  	padding-top: 30%;
  	opacity: 0.9;
}

.about-thumb:hover h4 {
  	color: #1dc9e3;
}

/*---------------------------------------
   Footer
-----------------------------------------*/

footer p {
	color: #fff;
}

footer .social-icon a {
	color: #fff;
}

footer a:hover, footer a:active, footer a:focus {
    color: #3FF;
}

/*---------------------------------------
    Navegacion              
-----------------------------------------*/

.navbar-light {
    background: #ffffff;
    border-bottom: 1px solid #e9e9e9b5;
    box-shadow: none;
    margin: 0 !important;
    z-index: 99;
}

.nav-link {
    padding: initial;
}

.navbar-light .navbar-nav .nav-link {
    color: #656565;
}

.navbar-light .navbar-brand {
    color: #535bd4;
    font-size: 26px;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 50px;
    margin: 0;
    margin-left: 0px;
}

.navbar-light .navbar-brand span {
  	color: #1dc9e3;
}

.navbar-light .navbar-nav li a {
    color: #656565;
    font-size: 18px;
    font-weight: 500;
    line-height: 50px;
    letter-spacing: 1px;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    padding-right: 20px;
    padding-left: 20px;
}

.navbar-light .navbar-nav > li a:hover {
    color: #1dc9e3;
}

.navbar-light .navbar-nav > li > a:hover,
.navbar-light .navbar-nav > li > a:focus {
    color: #656565;
    background-color: transparent;
}

.navbar-light .navbar-nav > .active > a,
.navbar-light .navbar-nav > .active > a:hover,
.navbar-light .navbar-nav > .active > a:focus {
    color: #1dc9e3;
    background-color: transparent;
}

.navbar-light .navbar-toggler {
     border: none;
     padding-top: 10px;
  }

.navbar-light .navbar-toggler .icon-bar {
    border-color: transparent;
  }

.navbar-light .navbar-toggler:hover,
.navbar-light .navbar-toggler:focus { 
  	background-color: transparent;
}

/*---------------------------------------
	navFixed
----------------------------------------*/

.navFixed {
    position: fixed;
    top: 0;
	  left: 0;
    padding-left: 0;
    padding-right: 0;
  	text-align: initial;
    z-index: 100;
}

.navFixed .navFixed-container {
  height: 100vh;
  background-color: rgb(7, 71, 166);
}

.navFixed .navbar-collapse {
  	align-items: initial;
}

.navFixed nav {
  	height: 100vh;
  	padding-left: 0px;
  	padding-right: 0px;
  	padding-top: 25px;
  	border-left: 1px solid #fff;
}

.navFixed nav:first-of-type {
  	z-index: 99;
  	border-left: none;
  	width: 100%;
}

.navFixed nav:first-of-type {
	-webkit-transition: width 0.3s ease-in-out;
	-moz-transition: width 0.3s ease-in-out;
	-o-transition: width 0.3s ease-in-out;
	transition: width 0.3s ease-in-out;
  	z-index: 99;
  	border-left: none;
  	width: 100%;
}

.navFixed nav:not(:first-of-type) {
	max-width: 100%;
	flex-basis: 0;
	flex-grow: 1;
	position: relative;
	width: 100%;
}

.navFixed nav.min {
    width: 25% !important;
}

.navFixed nav ul li {
  	padding: 12.5px 0px 12.5px 20px;
}

.navFixed nav:first-of-type ul li.active {
  	border-top: 1px solid #fff;
  	border-bottom: 1px solid #fff;
  	margin-right: -1px;
  	border-right: 1px solid rgb(7, 71, 166);
}

.navFixed nav ul li.onpage {
  	background-color: rgb(5, 54, 127);
}

.navFixed nav ul li a {
  	font-size: 15px;
  	color: #fff;
}

.navFixed nav ul li a i {
  	margin-right: 10px;
}

/* account */

.navFixed .navFixed-container.account {
  background-color: rgb(244, 245, 247);
}

.navFixed .account nav ul li.onpage {
    background-color: rgba(9, 30, 66, 0.06);
}

.navFixed .account nav ul li a {
    color: rgb(66, 82, 110);
}

.navFixed .account nav:first-of-type ul li.active {
    border-top: 1px solid rgb(66, 82, 110);
    border-bottom: 1px solid rgb(66, 82, 110);
    margin-right: -1px;
    border-right: 1px solid rgb(244, 245, 247);
}

.navFixed .account nav {
    border-left: 1px solid rgb(66, 82, 110);
}

/*---------------------------------------
	nav-into-content
----------------------------------------*/

.nav-into-content {
	padding-top: 20px;
}

.nav-into-content ul li {
	padding-top: 13px;
	padding-bottom: 13px;
	padding-left: 10px;
}

.nav-into-content ul li.active {
	background-color: #fff;
	border-left: 4px solid red;
}

.nav-into-content ul li a {
	color: #898b8c;
	font-weight: 400;
}

.nav-into-content ul li.active a {
	color: #000;
}

/*---------------------------------------
    bellNoty
-----------------------------------------*/

.bellNoty {
  	margin-left: 0.2rem !important;
  	margin-top: -.2rem !important;
  	position: absolute !important;
}

.bellNoty strong {
  	font-family: inherit;
  	background-color: #fa3e3e;
  	border-radius: 2px;
  	color: #fff;
  	padding: 1px 3px;
  	background-clip: padding-box;
  	display: inline-block;
  	font-size: 11px;
  	line-height: 1.3;
  	min-height: 13px;
  	width: auto;
  	max-width: 25px;
}

.navFixed nav.min .bellNoty {
	margin-left: -0.5rem !important;
	margin-top: -.7rem !important;
}

/*---------------------------------------
    Content user section
-----------------------------------------*/

.content-user section {
  background-color: #fff;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  border-radius: .25rem !important;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.content-user section .content-title {
  padding: 1rem 1rem .5rem 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #dee2e6;
}

.content-user section .content-title h3 {
  padding: 0;
  margin: 0;
  color: #4d4d4d;
}

.content-user section .content-title i {
  color: #b2b1c5;
}

.content-user section .content-title span {
  color: #898b96;
}

.content-user section .content {
  padding: 0 2rem 2rem 2rem;
}

/* account */

.content-user section {
  box-shadow: none;
}

/*---------------------------------------
    bellAlert
-----------------------------------------*/

.bellAlert {
  	position: absolute !important;
  	right: 0px;
  	z-index: 98;
}

.bellAlert i {
	color: #fff;
}

.account .bellAlert i { 
  color: rgb(66, 82, 110);
}

/*---------------------------------------
    Custom User Info
-----------------------------------------*/

#web_Foto_Perfil {
  	width: 130px !important;
  	border: 1px solid #fff;
}

#web_User_Nav span {
  	font: 16px Monaco, MonoSpace;
  	height: 85px;
  	position: absolute;
  	top: -17px;
  	left: 49%;
  	transform-origin: bottom center;
}

.account #web_Foto_Perfil {
    border: 1px solid rgb(7, 71, 166);
}

/*---------------------------------------
   Mobile Responsive         
-----------------------------------------*/

@media (max-width:575.98px) {

	/*---------------------------------------
		Section || max-width:575.98px
	-----------------------------------------*/

  section:first-of-type {
    margin-top: 50px;
  }

	/*---------------------------------------
		Nevagation || max-width:575.98px
	-----------------------------------------*/

	.navbar {
		padding: 0rem 0rem;
	}

	.navbar-brand {
		padding-top: 0rem;
		padding-bottom: 0rem;
		padding-left: 1rem;
	}

	/*---------------------------------------
		Bootstrap *-sm-none || max-width:575.98px
	-----------------------------------------*/

  	.shadow-sm-none {
    	box-shadow: initial !important;
  	}

  	.border-sm-none {
    	border: none !important;
  	}

    .pb-sm-2 {
      padding-bottom: .5rem !important;
    }

	/*---------------------------------------
		bellNoty || max-width:575.98px
	-----------------------------------------*/

  	.bellNoty {
	    margin-left: initial !important;
	    margin-top: initial !important;
  	}

	/*---------------------------------------
		navFixed || max-width:575.98px
	-----------------------------------------*/

  	.navFixed {
    	z-index: 98;
    	margin-top: 50px;
    	position: sticky;
  	}

  	.navFixed .navHeader {
    	padding-bottom: 5px;
  	}

  	.navFixed nav ul li {
    	padding: 8px 0px 8px 20px;
  	}

	/*---------------------------------------
		nav-into-content || max-width:575.98px
	-----------------------------------------*/

	.nav-into-content ul li.active {
		border-left: none;
		border-right: none;
		border-top: 2px solid rgb(7, 71, 166);
		border-bottom: 2px solid rgb(7, 71, 166);
	}

	/*---------------------------------------
		content_user || max-width:575.98px
	-----------------------------------------*/

  	.content-user {
    	width: 100%;
    	padding-right: 15px;
    	padding-left: 15px;
    	margin-right: auto;
    	margin-left: auto;
  	}

}

@media (max-width:767.98px) {


}

@media (max-width:991.98px) {

}

@media (max-width:1199.98px) {

}

/* Changes:
	navbar-fixed-top : fixed-top
	navbar-default : navbar-light
	navbar-right : ml-auto
	img-responsive : img-fluid
 */