/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

:root{
	--bs-body-font-weight: 600;
	--bs-btn-border-color: #7351e1;

  /*--primary-menu-color: #0012ff;*/
  --primary-menu-color: #000fd5;
  --primary-icon-color: #4653ff;

  --primary-color-lines: #4653ff;
  --primary-color: #430d97;
  --primary-color-lines: #b4bdcd;
}

html{
	height: 100vh;
}

::after,
::before {
    box-sizing: border-box;
    margin: 5px 0px 0px 0px;
    padding: 0;
}

a {
    text-decoration: none;
}

li {
    list-style: none;
}

/*
.lni {
    display: inline-block;
    font: normal normal normal 1em / 1 'lineicons';
    color: inherit;
    flex-shrink: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
*/

h1 {
    font-weight: 600;
    font-size: 1.5rem;
}

body {
    font-family: 'Poppins', sans-serif;
	height: 100vh;
}

.wrapper {
    display: flex;
	height: -webkit-calc(100vh - 60px); /*Chorme, Safari*/
	height: -moz-calc(100vh - 60px); /*IE9*/
	height: calc(100vh - 60px); /*IE*/
    min-height: 800px;
}

.main {
  /*min-height: 95vh;*/
  width: 100%;
  overflow: hidden;
  transition: all 0.35s ease-in-out;
  /*background-color: #e5eefeb8;*/
	margin-top: -20px;
}

#sidebar {
    width: 70px;
    min-width: 70px;
    z-index: 1000;
    /*transition: all .25s ease-in-out;*/
    /*background-color: #252a2f;*/
    display: flex;
    flex-direction: column;
	border-right: 1px solid #dadada;
	/*background: #ffffff;*/
	box-shadow: 0px 2px 2px #c0bdbd;
	
}

#sidebar.expand {
    width: 260px;
    min-width: 260px;
	/*background: #ffffff;*/
	box-shadow: 0px 2px 2px #c0bdbd;
}

.toggle-btn {
    background-color: transparent;
    cursor: pointer;
    border: 0;
    padding: 1rem 1.5rem;
}

.toggle-btn i {
    font-size: 1.5rem;
    color: #FFF;
}

.sidebar-logo {
    margin: auto 0;
}

.sidebar-logo a {
    /*color: #FFF;*/
	color: #818181;
    /*font-size: 1.15rem;*/
    font-weight: 600;
	text-decoration: none;
	padding-left: 42px;
}

#sidebar:not(.expand) .sidebar-logo,
#sidebar:not(.expand) a.sidebar-link span {
    display: none;
}

.sidebar-nav {
    /*padding: 2rem 0;*/
    padding: 0.5rem 0;
    flex: 1 1 auto;
}

a.sidebar-link {
    /*padding: .625rem 1.625rem; */
    padding: .625rem 1.5rem;
    /* color: #391632; */
    display: block;
    font-size: 0.9rem;
    white-space: nowrap;
    border-left: 3px solid transparent;
    /*color: #7d7d7d;*/
	/*font-size: 1rem;*/
	color: #5f5f5fe6;;
    font-weight: 600;
}

.sidebar-link i {
    font-size: 1.35rem;
    margin-right: .75rem;
}

/******/
i.lni {
    /*color: #571bdd;*/
	/*color: var(--bs-primary);*/
	color: var(--primary-menu-color);
    /* font-size: larger; */
    font-weight: bold;
}

a.sidebar-link:hover {
    /* background-color: rgba(255, 255, 255, .075); */
    /* background: darkgrey; */
    background: #c6d8f9;
    /* border-left: 3px solid #e3a00a; */
    border-left: 5px solid #03fb16;
    text-decoration: none;
    color: #571bdd;
}

.sidebar-item {
	position: relative;
    /*background: #252a2f;*/
}

/******/

.sidebar-item:hover {
	background: #99ade74f;
    color: #bb1286;
    /* font-weight: bold;*/
}

#sidebar:not(.expand) .sidebar-item .sidebar-dropdown {
    position: absolute;
    top: 0;
    left: 70px;
    /*background-color: #e2e6f180;*/
    background-color: #e2e6f1;
    padding: 0;
    min-width: 15rem;
    display: none;
}

#sidebar:not(.expand) .sidebar-item:hover .has-dropdown+.sidebar-dropdown {
    display: block;
    /*max-height: 15em;*/
    width: 100%;
    opacity: 1;
}

#sidebar.expand .sidebar-link[data-bs-toggle="collapse"]::after {
    border: solid;
    border-width: 0 .075rem .075rem 0;
    content: "";
    display: inline-block;
    padding: 2px;
    position: absolute;
    right: 1.5rem;
    top: 1.4rem;
    transform: rotate(-135deg);
    transition: all .2s ease-out;
    border-width: 0px 0.175rem 0.175rem 0;
    padding: 4px;
    top: 0.8rem;
}

#sidebar.expand .sidebar-link[data-bs-toggle="collapse"].collapsed::after {
    transform: rotate(45deg);
    transition: all .2s ease-out;
}.container-fluid.text-center.foot {
	height: 32px;
}


#sidebar.expand .sub{
	background: #f0f4fff7;
}

/************************************************/

  /* Main Section */
  .main{
	  /*padding: 20px;*/
	  width: 100%;
    background: #eef0ff;
	}
  .main-top{
    /*display: flex;*/
    width: 100%;
  }
  .main-top i{
    /*position: absolute;
    right: 0;
    margin: 10px 30px;*/
    color: rgb(110, 109, 109);
    cursor: pointer;
  }

  .main-skills{
    display: flex;
    margin-top: 20px;
	  background: white;
    border-radius: 15px;
}
  .main-skills .card{
    width: 25%;
  margin: 10px;
  background: #fff;
  text-align: center;
  border-radius: 20px;
  padding: 10px;
  box-shadow: 0 20px 35px rgba(0, 0, 0, 0.1);
}
  .main-skills .card h3{
    margin: 10px;
  text-transform: capitalize;
}
  .main-skills .card p{
    font-size: 12px;
}
  .main-skills .card button{
   background: #ff9af269;
    color: #7326e9;
  padding: 7px 15px;
  border-radius: 10px;
  margin-top: 15px;
  cursor: pointer;
}
  .main-skills .card button:hover{
    background: rgba(223, 70, 15, 0.856);
}
  .main-skills .card i{
    font-size: 22px;
  padding: 10px;
}

 /* Courses */
  .main-course{
    margin-top:20px ;
  text-transform: capitalize;
}
  .course-box{
    width: 100%;
  height: 300px;
  padding: 10px 10px 30px 10px;
  margin-top: 10px;
  background: #fff;
  border-radius: 10px;
  /*box-shadow: 0 10px 7px rgb(30 26 26 / 37%);*/
}
  .course-box ul{
    list-style: none;
  display: flex;
}
  .course-box ul li{
    margin: 10px;
  color: gray;
  cursor: pointer;
}
  .course-box ul .active{
    color: #000;
  border-bottom: 1px solid #000;
}
  .course-box .course{
    display: flex;
}
  .box{
    width: 33%;
  padding: 10px;
  margin: 10px;
  border-radius: 10px;
  background: rgb(237, 242, 255);
  /*box-shadow: 0 20px 35px rgba(0, 0, 0, 0.1);*/
}
  .box p{
    font-size: 12px;
  margin-top: 5px;
}
  .box button{
    background: #000;
  color: #fff;
  padding: 7px 10px;
  border-radius: 10px;
  margin-top: 3rem;
  cursor: pointer;
}
  .box button:hover{
    background: rgba(0, 0, 0, 0.842);
}
  .box i{
    font-size: 7rem;
  float: right;
  margin: -20px 20px 20px 0;
}
  .html{
    color: rgb(25, 94, 54);
}
  .css{
    color: rgb(104, 179, 35);
}
  .js{
    color: rgb(28, 98, 179);
}
/************************************************/
/************************************************/


/****************************************CARD Payment********/
.card--container{
	/*background: #fff;*/
	/*padding: 2rem;*/
	border-radius: 10px;
	text-align: left;
	width: 100%;
	margin-top: 20px;
}
.card--wrapper{
	/*display: flex;
	flex-wrap: wrap;
	gap:1rem;
	display: flex;
    justify-content: space-around;*/
	display: inline-block;
}
.main--tittle{
	color: rgba(133,99,186,255);
	padding-bottom: 10px;
	font-size: 15px;
}
.payment--card{
	background: rgb(229, 223, 223);
	border-radius: 10px;
	padding: 1.2rem;
	width: 290px;
	height: 150px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: all 0.5s ease-in-out;
	display: inline-flex;
	margin: 20px;
}
.payment--card:hover{
	transform: translateY(-5px);
}
.card--header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}
.ammount{
	display: flex;
	flex-direction: column;
  /*color: aliceblue;*/
}
.tittle{
	font-size: 12px;
	font-weight: 200;
  text-align: left;
}
.ammount--value{
	font-size: 24px;
	font-family: "Courier New", Courier, monospace;
	font-weight: 600;
}

.amount--purple{
  color: var(--bs-btn-border-color);
  font-size: x-large;
}

.det-paq{
  color: var(--bs-btn-border-color);
  margin-top: 10px;
  font-size: 0.7rem;
}


.icon{
	color: #fff;
	padding: 1rem;
	height: 60px;
	width: 60px;
	text-align: center;
	border-radius: 50%;
	font-size: 1.5rem;
	background: red;
}

.svg-inline--fa{
  /*
  height: 2rem;
  color: aliceblue;
  */
  height: 1.2rem;
  padding-right: 0.7rem;
  /*color: var(--primary-menu-color);*/
}

/***/
.svg-inline--fa.fa-w-9 {
  width: 60px;
}

.svg-inline--fa.fa-w-16,
.svg-inline--fa.fa-w-18,
.svg-inline--fa.fa-w-20 {
    width: unset;
}
/***/

.card-detail{
	font-size: 18px;
	color: #777777;
	letter-spacing: 2px;
	font-family: "Courier New", Courier, monospace;
}

.light-red{background: rgb(254, 208, 208);}
.light-purple{background: rgb(254, 226, 255);}
.light-green{background: rgb(235, 254, 235);}
.light-blue{background: rgb(208, 208, 254);}

.dark-red{background: rgb(254, 0, 0);}
.dark-purple{background: rgb(157, 69, 157);}
.dark-green{background: rgb(69, 157, 69);}
.dark-blue{background: rgb(76, 76, 254);}


/*****************flowbite********/
/*
.gap-3 {
  gap: .75rem;
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid {
  display: grid;
}
.mb-2 {
  margin-bottom: .5rem;
}

:is(.dark .dark\:bg-gray-600) {
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
}
.bg-orange-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 248 241 / var(--tw-bg-opacity));
}
.bg-teal-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(237 250 250 / var(--tw-bg-opacity));
}
.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(235 245 255 / var(--tw-bg-opacity));
}
.rounded-lg {
  border-radius: .5rem;
}
.justify-center {
  justify-content: center;
}
.items-center {
  align-items: center;
}
.flex-col {
  flex-direction: column;
}
.h-\[78px\] {
  height: 78px;
}
.flex {
  display: flex;
}
*/

.bal-resume{
  display: flex;
  justify-content: space-around;
}

.bal-resume .card--header{
  margin-bottom: 0px;
  background: #e9e9ff;
  padding: 2px 10px;
  border-radius: 7px;
}

.bal-detalle-neg {
  margin-left: 33px;
  color: red;
  font-size: 12px;
  background: bisque;
  border-radius: 9px;
  padding: 1px 4px;
}

.bal-detalle-pos {
  margin-left: 33px;
  color: green;
  font-size: 12px;
  background: lightgreen;
  border-radius: 9px;
  padding: 1px 4px;
}

select.xyz{
  float: right;
  border: 0px;
  outline: 0px;
  font-size: x-small;
  color: #696969;
  font-weight: 600;
  background: transparent;
}

.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
  font-size: 12px;
}

.vl {
  border-left: 5px solid var(--primary-menu-color);
  height: 32px;
}

.vsp{
  border-left: 5px solid transparent;
}


.barcontainer {
  background-color: #c5cae9;
  position: relative;
  margin-left: 4px;
  width: 6px;
  height: 40px;
  float: left;
  padding-top: 0px;
}

.bar {
  background-color: #225cff;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 0%;
  box-sizing: border-box;
  animation: grow 0.5s ease-out forwards;
  transform-origin: bottom;
}

@keyframes grow {
  from {
    transform: scaleY(0);
  }
}


/****************************************CARD Payment********/