/* CSS Document */
 :root {
  --color-google-red: #EA4335;
  --color-google-yellow: #FBBC04;
  --color-google-blue: #4285F4; 
  --color-google-green: #34A853;  
}

 body {
   margin: 0;
   padding: 0;
   color: #999999;
   text-align: center;
   background: rgb(0, 0, 0);
   background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 1) 0%, rgba(87, 87, 87, 1) 100%);
   background: -o-linear-gradient(bottom, rgba(0, 0, 0, 1) 0%, rgba(87, 87, 87, 1) 100%);
   background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(87, 87, 87, 1) 100%);
   font-family: 'Montserrat', sans-serif;
 }

 button,
 input[type="submit"],
 input[type="reset"] {
   background: none;
   color: inherit;
   border: none;
   padding: 0;
   font: inherit;
   cursor: pointer;
   outline: inherit;
 }

 .wrapper {
   min-height: 100vh;
 }

 .card {
   width: 460px;
   background: rgb(0, 0, 0);
   background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 1) 0%, rgba(68, 68, 68, 1) 100%);
   background: -o-linear-gradient(bottom, rgba(0, 0, 0, 1) 0%, rgba(68, 68, 68, 1) 100%);
   background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(68, 68, 68, 1) 100%);
   margin: 2px;
   border: 1px solid #101010;
 }

 .card-header {
   width: 100%;
   border-bottom: 1px solid rgb(0, 0, 0);
   display: flex;
   flex-direction: row;
   align-items: center;
   padding: 0 20px 10px 20px;
   position: relative;
 }

 .headline-tag {
   flex-grow: 1;
   margin-top: 10px;
   text-align: left;
   padding: 20px;
 }

 .headline-tag h1 {
   color: white;
   margin: 0;
   font-size: 1.6rem;
 }

 .headline-tag p {
   padding: 0;
   margin: 0;
   font-size: .8rem;
   text-align: left !important;
 }

 .cv-content {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
   font-size: .8rem;
   margin-top: 10px;
   padding: 10px 0;
   border-top: 1px solid rgba(0, 0, 0, .3);
 }

 .cv-content a {
   text-decoration: none;
   color: rgb(233, 233, 233);
   text-decoration: none;
 }

 .cv-content a:hover {
   color: white;
 }

 .cv-content-ico {
   margin-right: 5px;
 }

 .cv-content-ico i {
   color: #999999;
 }

 .card-title {
  font-size: 1.5em;
 }
 .card-body {
   width: 100%;
   overflow: hidden;
   padding: 0;
 }

 .card-footer {
   position: fixed;
   width: 100%;
   bottom: 0;
   margin: 0 0 10px 0;
   padding: 0;
   background: rgb(0, 0, 0, 0.5);
 }

 .card img {
   width: 110px;
   height: 110px;
 }

 .img-content {
   position: relative;
   z-index: 0;
 }

 .flags-content {
   position: absolute;
   z-index: 1;
   left: 44%;
   transform: translateX(-44%);
   bottom: -3px;
   height: 15px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   width: 90px;
 }

 .flag {
   width: 21px;
   height: 15px;
   background: gray;
   display: flex;
   flex-direction: row;
   align-items: stretch;
   position: relative;
   z-index: 2;
 }

 .flag:before {
   content: '';
   display: block;
   height: 12px;
   width: 12px;
   position: absolute;
   z-index: 3;
   top: -5px;
   right: -7px;
   background: rgb(0, 0, 0, 1);
   color: white;
   text-align: center;
   font-size: 8px;
   border-radius: 50% 50% 50% 50%;
 }

 .flag.vertical {
   flex-direction: column;
 }

 .flag span {
   flex-grow: 1;
 }

 .flag:nth-child(1):before {
   content: ' 6 ';
 }

 .flag:nth-child(2):before {
   content: ' 2 ';
 }

 .flag:nth-child(3):before {
   content: ' 10 ';
 }

 .flag.ro span:nth-child(1) {
   background-color: #002B7F;
 }

 .flag.ro span:nth-child(2) {
   background-color: #FCD116;
 }

 .flag.ro span:nth-child(3) {
   background-color: #CE1126;
 }

 .flag.it span:nth-child(1) {
   background-color: #008c45;
 }

 .flag.it span:nth-child(2) {
   background-color: #f4f5f0;
 }

 .flag.it span:nth-child(3) {
   background-color: #cd212a;
 }

 .flag.lu span:nth-child(1) {
   background-color: #F6343F;
 }

 .flag.lu span:nth-child(2) {
   background-color: white;
 }

 .flag.lu span:nth-child(3) {
   background-color: #00A2E1;
 }

/* ribbon */
.ribbon {
  position: absolute;
  display: block;
  width: 140px;
  height: 140px;
  right: 0;
  top: 0;
}


.wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  top: -8px;
  left: 8px;
  overflow: hidden;
}
.wrap:before, .wrap:after {
  content: ""; 
  position: absolute;
}
.wrap:before {
  width: 30px;
  height: 8px;
  right: 89px;
  background: #252e03;
  border-radius: 4px 4px 0px 0px;
  top: -1px;
}
.wrap:after {
  width: 8px;
  height: 30px;
  right: -1px;
  top: 89px;
  background: #252e03;
  border-radius: 0px 4px 4px 0px;
}
.wrap-rotate {
  width: 200px;
  height: 30px;
  line-height: 12px;
  position: absolute;
  top: 30px;
  right: -50px;
  z-index: 1;
  overflow: hidden;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  background: rgb(213,241,53);
  background: linear-gradient(0deg, rgba(213,241,53,1) 0%, rgba(204,255,0,1) 100%); 
  text-align: center;
  color: black;
  font-size: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wrap-rotate span:first-child {
  font-size: 14px;
  font-weight: bold;
}


 .card-footer ul li {
   list-style: none;
   font-size: 30px;
   width: 40px;
   height: 40px;
 }

 .card-footer nav {
   padding: 5px 0 19px 0;
 }

 .card-footer nav p {
   font-size: 12px;
   text-align: center;
 }

 .card h1 {
   font-weight: bold;
 }

 .card p {
   text-align: justify;
 }

 .card-footer ul li a {
   color: #f4f4f4;
 }

 .card-footer ul li.linkedin a:hover {
   color: #2867b2;
 }

 .card-footer ul li.behance a:hover {
   color: #1769ff;
 }

 .card-footer ul li.dribbble a:hover {
   color: #ea4c89;
 }

 .card-footer ul li.instagram a:hover {
   color: #ffdc80;
 }

 .card-footer ul li.twitter a:hover {
   color: #1da1f2;
 }

 .card-footer ul li.pinterest a:hover {
   color: #e60023;
 }

 .card-footer ul li.strava a:hover {
   color: #fc5200;
 }
 .card-footer ul li.threads a:hover {
  color: gray;
}

 /*=== Carousel carousel-indicators ===*/
 .carousel-item {
   min-height: 220px;
   min-width: 220px;
   padding: 20px;
 }


 .carousel-indicators {
   position: fixed;
   bottom: 0;
 }

 .carousel-indicators button {
   width: 12px !important;
   height: 12px !important;
   background-color: #1a1a1a;
   border-radius: 50% !important;
   margin: 0 5px;
   border: 2px solid #262626 !important;
 }

 .carousel-indicators button.active {
   background-color: white;
   border-color: white;
 }

 .carousel-control-prev {
   left: -70px;
 }

 .carousel-control-next {
   right: -70px;
 }

 /*Form*/
 .form-content {
   display: block;
   height: auto;
   text-align: left;
   clear: both;
   margin-bottom: 30px;
 }

 .form-content button {
   border-radius: 0;
   background-color: black;
   color: white;
   border: 1px solid white;
 }

 .form-content button:focus,
 .form-content button:hover {
   background-color: white;
   color: black;
 }

 .valid-feedback,
 .invalid-feedback {
   font-size: 12px;
 }

 .form-label {
   font-size: 14px;
 }

 .form-label {
   color: white;
 }

 input.form-control.invalid {
   border-color: #dc3545 !important;
   padding-right: calc(1.5em + .75rem);
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e") !important;
   background-repeat: no-repeat;
   background-position: right calc(.375em + .1875rem) center;
   background-size: calc(.75em + .375rem) calc(.75em + .375rem);
 }

 textarea.form-control,
 input.form-control {
   color: gray;
   background-color: black;
   border-radius: 0;
   font-size: 14px;
   border: none;
   border-bottom: 2px solid #262626;
   padding: 10px;
 }

 ::-webkit-input-placeholder {
   /* Chrome/Opera/Safari */
   font-size: 12px;
   font-style: italic;
 }

 ::-moz-placeholder {
   /* Firefox 19+ */
   font-size: 12px;
   font-style: italic;
 }

 :-ms-input-placeholder {
   /* IE 10+ */
   font-size: 12px;
 }

 :-moz-placeholder {
   /* Firefox 18- */
   font-size: 12px;
   font-style: italic;
 }

 /* Chrome, Safari, Edge, Opera */
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }

 /* Firefox */
 input[type=number] {
  appearance: textfield;
   -moz-appearance: textfield;
 }

 .do-the-math {
   width: 160px;
 }

 /*hp*/

 .grecaptcha-badge,
 .form-label-hp {
   display: none !important;
 }

 .card img.math-image {
   width: 60px;
   height: 36px;
   margin-top: 0;
 }

 .form-control.math {
   width: 60px;
   padding-top: 8px;
   padding-bottom: 7px;
 }

 .message-sent {
   width: 100%;
   height: 100%;
   display: none;
   margin-bottom: 30px;
 }

 .spinner-content {
   display: none;
 }

 /*Chart*/
 .chart-content-body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 20px;
 }
 .chart-content-box {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-bottom: 20px;
 }
 .chart-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 0;
 }
 .chart-title {
  display: flex;
  font-size: 14px;
  text-align: center;
  width: 100%;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 16px;
  color: white;
 }
 .chart {
  position: relative;
  transform:rotate(270deg);
  width:100px;
  height:100px;
  z-index:1
}

.chart svg {
  position: absolute;
  top: 0;
  left: 0;
}

.main-stop {
  stop-color: red;
}
.alt-stop {
  stop-color: green;
}

.outer {
  fill: transparent;
  stroke: var(--color);
  stroke-width: 10;
  stroke-dasharray: 251px;
  stroke-dashoffset: calc(251px - (251px * var(--number)) / 100);
  stroke-linecap: round;
}

.inner {
  fill:transparent;
  stroke: rgb(35, 35, 35);
  stroke-width: 10;
}

.circle-info {
  display:flex;
  flex-direction:column;
  position:absolute;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:16px;
  z-index:1;
  font-size: 14px;;
}

 /*Timeline Journey*/
 .card-content-overflow {
   width: 100%;
   overflow-x: hidden;
 }

 .card-content {
   overflow-y: auto;
   max-height: 320px;
   width: calc(100% + 20px);
 }
 .card-content.timeline {
  padding-left: 20px;
 }
 .timeline-journey {
   display: flex;
   flex-direction: column;
   text-align: left;
   margin: 20px 0;
   position: relative;
   z-index: 0;
 }

 .timeline-journey:before {
   content: "";
   width: 11px;
   height: 11px;
   display: block;
   background: rgba(255, 255, 255);
   position: absolute;
   left: -20px;
   top: 3px;
   border: 3px solid #424242;
   border-radius: 50% 50% 50% 50%;
   z-index: 2;
 }

 .timeline-journey:after {
   content: "";
   position: absolute;
   left: -15px;
   top: 11px;
   width: 1px;
   height: calc(100% + 20px);
   background-color: #303030;
   z-index: 1;
 }

 .timeline-journey:last-child:after {
   height: auto;
 }
 .timeline-journey:first-child:before,
 .timeline-journey:hover:before {
   background-color: #ffffff;
   border: 4px solid #ffffff;
 }

 .timeline-journey:hover .timeline-journey-body a,
 .timeline-journey:hover .timeline-journey-header p {
   color: white;
 }

 .timeline-journey-header {
   display: flex;
   flex-direction: row;
   align-items: center;
 }

 .timeline-journey-header p {
   font-size: 11px;
   margin-bottom: 5px;
   display: flex;
   flex-direction: row;
   align-items: center;
 }

 .timeline-journey-header p i {
   margin: 0 5px;
 }

 .timeline-journey-body {
   margin-left: 10px;
 }

 .timeline-journey-body h2 {
   font-weight: bold;
   color: white;
   font-size: 20px;
   margin-bottom: 5px;
 }

 .timeline-journey-body a {
   color: #999999;
   text-decoration: none;
   font-size: 14px;
   display: flex;
   flex-direction: row;
   align-items: center;
 }

 .timeline-journey-body a:hover,
 .timeline-journey-body a:focus {
   color: white;
 }

 .timeline-journey-body a i {
   color: white;
   margin: 0 5px;
   font-size: 10px;
 }

 .timeline-journey-body-content {
   display: flex;
   flex-direction: row;
   align-items: center;
 }

 .timeline-journey-body-content .flags-content {
   position: static;
   transform: none;
   width: auto;
   margin: 0 5px 0 0;
   z-index: 0;
 }

 .timeline-journey-body-content p {
   margin-bottom: 0;
 }

 .timeline-journey-body-content .flag::before {
   display: none;
 }

/*Credentials*/

.credentials {
  display: flex;
  text-align:left;
  gap: 10px;
  margin: 20px 20px 0 0;
  flex-wrap:wrap ;
}

.credentials:not(:last-child) {
  padding-bottom: 10px;
  border-bottom: 1px solid #262626;
}

.credentials-left,
.credentials-right {
  display: flex;
  align-items: flex-start;
}

.credentials-left {
  padding: 5px;
  display: flex;
  align-items: flex-start;
  width: 60px;
}

.credential-logo {
  border-radius: 50%;
  height: 50px;
  width: 50px;
  background-repeat: no-repeat;
  background-size:40px auto;
  background-position: center;
  background-color: white;
}

.credential-logo.udemy {
  background-image: url(/images/credentials/Udemy_logo.svg);
}
.credential-logo.google {
  background-image: url(/images/credentials/Google_logo.svg);
}
.credential-logo.udacity {
  background-image: url(/images/credentials/Udacity_logo.svg);
  fill: #175CFF;
}

.credentials-right {
  flex-grow: 1;
  flex-direction: column;
  font-size: 0.8em;
  flex-wrap: wrap;
  flex-basis: calc(100% - 70px);
}

.credentials-title {
  color: white;
  font-weight: bold;
  font-size: 1.3em;
  line-height: 1.3em;
  margin-bottom: 5px;
}

.credential-provider {
font-weight: bold;
font-size: 1rem;
}

.credential-issue-date {
  display: flex;
  font-size: .6rem;
}

a.credential-link {
  text-decoration: none;
  display: flex;
  align-items: center;
  color: white;
  gap: 5px;
  margin-top: 5px;
}

a.credential-link:focus span,
a.credential-link:hover span {
  text-decoration: underline;
}

a.credential-link i {
  font-size: 10px;
}

.credential-node {
  display: flex;
  flex-basis: 100%;
  flex-direction: row;
  margin: 0 0 0 6px;
  gap: 5px;
  i {
    color: gray;
    font-size: .5em;
    margin-top: 4px;
  }
  .credential-node-content {
    display: flex;
    flex-direction: column;
    margin: 0 ;
    .credentials-title {
      font-size: .8em;
      display: flex;
      align-items: center;
      margin-bottom: 0;
      color: whitesmoke;
     }
     a.credential-link {
      margin-top: 0;
     }
  }

}

/*AcceptCookies*/
.accept-cookies {
  display: flex;
  position: absolute;
  top: 10px;
  right: 10px;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #101010;
}
.accept-cookies-button {
  font-size: 20px;
  height: 40px;
  width: 40px;
  align-self: center;
}
.accept-cookies-button:hover {
color: white;
}

.toast-header{
  background-color: rgb(26, 26, 26);
  color: white;
}
.toast-body a {
  color: gainsboro;
  border-radius: 4px;
  border:solid 1px black;
  padding: 8px;
}
.toast-body a:focus,
.toast-body a:hover {
  color: whitesmoke;
  background-color: black;
}
 /*TableMobileScreen*/
 @media only screen and (max-width: 1024px) {
   .wrapper {
     height: 100%;
     min-height: 100vh;
     align-items: flex-start !important;
   }

   .card {
     width: 100%;
     margin-top: 50px;
     border: none;
     background: transparent;
   }

   .carousel-control-prev,
   .carousel-control-next {
     top: 0;
     position: fixed;
     height: 50px;
     width: 40px;
   }

   .carousel-control-next-icon,
   .carousel-control-prev-icon {
     width: 1.2rem;
     height: 1.2rem;
   }

   .carousel-control-prev {
     left: 0;
   }

   .carousel-control-next {
     right: 0;
   }

   .card-header {
     width: 100%;
     background: rgb(0, 0, 0, .75);
     position: fixed;
     top: 0;
     z-index: 1;
     margin: 0;
     padding: 5px;
   }

   .ribbon {display: none;}

   .card-header .img-content {
     display: flex;
     flex-direction: row;
     margin-left: 40px;
   }

   .card-header img {
     width: 40px;
     height: 40px;
     margin-top: 0 !important;
     border: none !important;
   }

   .card-header .flags-content {
     display: none;
   }

   .card-header .headline-tag {
     padding: 0;
     margin: 0 0 0 10px;
   }

   .card-header .headline-tag h1 {
     font-size: 16px;
   }

   .card-header .headline-tag p {
     text-align: left !important;
     font-size: 14px;
     line-height: 13px;
   }

   .cv-content {
     position: absolute;
     top: 5px;
     right: 40px;
     padding: 0;
     border: none;
   }


   .card-footer {
     margin-bottom: 0;
   }

   .card-footer ul li {
     width: 30px;
     height: 30px;
     font-size: 23px;
   }

   .card-footer nav {
     padding: 10px 0;
   }

   .card-footer nav p {
     display: none;
   }

   .carousel-indicators {
     display: none;
   }

   .flag::before {
     background-color: #0f0f0f;
   }

   .card img.math-image {
     margin-top: 0 !important;
   }

   .math-content {
     flex-direction: column !important;
   }

   .do-the-math {
     margin-bottom: 20px;
     width: 100%;
   }

   .form-control.math {
     width: 100%;
   }

   .card-content {
     overflow-y: visible;
     overflow-x: visible;
     max-height: none;
     width: auto;
     margin-bottom: 50px;
   }
   .accept-cookies {
    top: auto;
    bottom: 60px;
    position: sticky;
    left: 0;
    margin-left: auto;
   }
 }


 /*SM Screen*/
 @media only screen and (max-width: 500px) {

   .cv-content-text,
   .card-header .headline-tag p {
     display: none;
   }

   .card-header .headline-tag h1 {
     font-size: 20px;
   }

   .cv-content {
     right: 40px;
   }

   .cv-content-ico i {
     font-size: 20px;
   }
 }