/*!!!!!! PRINT ONLY WITH CHROME !!!!!!!!!*/

/* Styles d'impression supprimés - Utilisation du téléchargement PDF uniquement */

/* Styles pour le bouton d'impression */
.print-btn {
  cursor: pointer;
  transition: color 0.3s ease;
  margin-left: 10px;
}

.print-btn:hover {
  color: #7AC144 !important;
}

body,
html {
  zoom: 0.94;
  height: 100%;
  width: 100%;
  font-family: "Segoe UI";
  margin: 0;
}

.material-icons {
  font-family: "Material Icons";
  font-weight: normal;
  font-style: normal;
  font-size: 2.6vw; /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: "liga";
}

.material-icons.orange {
  color: #7AC144;
}

.header {
  background-color: #747474;
  font-size: 2.8ch;
  width: 100%;
  height: 2.3em;
  text-align: center;
  color: white;
  border-bottom: 1px solid black;
}

.header .name {
  text-align: left;
  font-size: larger;
  margin-bottom: 0px;
}

.header b {
  margin-left: 30px;
}
.header .name .firstname {
  color: #7AC144;
}

.header .headline {
  text-align: left;
  font-size: larger;
  margin-bottom: 0px;
}

.header .headline .yearsxp {
  color: #7AC144;
}

.header .toggle-lang{
  top: -4px;
}

.sidebar {
  float: left;
  width: 25%;
  font-size: 1.7ch;
  background-color: #747474;
  color: rgb(255, 255, 255);
}

.sidebar .profil {
  margin: 18px 9px;
  text-align: justify;
  font-size: 2ch;
}

.sidebar .photo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 15px;
  width: 13em;
  border: 1px solid white;
}

.sidebar .status {
  display: block;
  font-size: 2.5ch;
  font-weight: bold;
  text-align: center;
}

.sidebar .skilllayout {
  font-size: 1.7ch;
  margin-left: 1.2em;
  margin-bottom: 3em;
}

.sidebar .skilllayout > .name {
  margin-bottom: 0.5em;
  text-transform: uppercase;
  border-bottom: 1px solid #000000;
}


.sidebar .skilltype {
  font-size: 1.7ch;
  margin-top: 0.8em;
  margin-bottom: 1.4em;
}

.sidebar .skilltype > .name {
  font-weight: 500;
}

.sidebar .skillsubtype > .name {
  margin-left : 10px;
  margin-right: 20px;
  
}

.sidebar .skillprogress {
  height: 8px;
  width: 75%;
  margin: 2px 10px 7px 28px;
}

.sidebar .icons-text {
  margin-top: -1px;
  margin-left: 10px;
}

.progress {
  background-color: #ffffff !important;
  border: 1px solid black;
  border-radius: 0px !important;
}

.progress-bar {
  background: #7AC144 !important;
}

.main {
  /* background-color: #E9EBEE; */
}

.main .section {
  margin-top: 8px;
  margin-bottom: 15px;
   /* page-break-inside:avoid; */
}

.main .section .name {
  /*background-color:gainsboro;*/

}

.main .section .name i {
  font-size: 6ch;
  margin-left: 9px;
  color: black;
}

.main .section .name span {
  text-transform: uppercase;
  font-weight: bold;
  font-size: larger;
  color: black;
  margin-left: 6px;
  margin-top: 12px;
}

/* @media print {
  pre, blockquote {page-break-inside: avoid;}
} */

/* The actual timeline (the vertical ruler) */
.timeline {
  position: relative;
  margin: 0;
  font-size: 1.8ch;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
  content: "";
  position: absolute;
  width: 1px;
  background-color: black;
  top: 0;
  bottom: 0;
  left: 0;
  margin-left: 36px;
  margin-right: 8px;
}

/* The circles on the timeline */
.timeline .container::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  left: 18px;
  background-color: black;
  border: 3px solid #ffffff;
  top: 18px;
  border-radius: 50%;
  z-index: 1;
}

.timeline-ends{
  content: "";
  position: absolute;
  z-index:1000;
  width: 8px;
  background-color:#ffffff;
  top: 32px;
  bottom: 0;
  left: 0;
  margin-left: 19px; /*20px*/
  margin-right: 10px;
}


.timeline .container {
  margin-left: 11px;
  margin-bottom: 0;
 /* margin-right: 16px;*/
  padding: 10px 40px 0px 40px;
  position: relative;
  background-color: inherit;
}

.timeline .layout {
  border-radius: 7px;
  background-color:#F1F1F1;
  
  /*box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 20px 0 rgba(0, 0, 0, 0.19);*/
  width: 100%; 
}

.timeline .caption {  
  padding: 5px 10px 5px 10px;
  font-weight: bold;
  background-color: #c6ddb5;
  border-top-right-radius: 7px;
  color: #272727;
  border: 1px solid lightgrey;
}

.timeline .date {
  margin: 0 0 0 10px;
  /*font-family: monospace;*/
  font-weight: 700;
  /*font-size: larger;*/
}

.timeline .date > span {
  font-family: "Segoe UI";
  font-style: italic;
  font-weight: 600;
}

.timeline .content {
  margin: 0 5px 0 15px;
  
}

.timeline .project {
  font-weight: 500;
}

.timeline .content ul {
  list-style-type: circle;
  padding-inline-start: 22px;
  padding-bottom: 0;
  margin-bottom: 0;
}

.timeline .content ul li:before {
  position: absolute;
  margin-left: -12px;
}

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

.timeline .keywords{
  color: black;
  margin: 4px 0;
}

.timeline .keywords a{
  font-family: monospace;
  font-size: 1.5ch;
  font-weight: lighter;
  background-color: #ffffff;
  padding: 3px 6px;
  margin : 1px 3px;
  border: 1.5px solid #7AC144;
  border-radius: 5px;
  font-weight: 600;
}

.timeline .techno {
  padding: 5px 5px 5px 20px;
  background-color: #d3d3d3;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;  
  border: 1px solid lightgrey;
  line-height: 1.8;
}

/* The actual timeline 2 (the vertical child ruler) */
.childtimeline {
  position: relative;
  margin: 0;
  /* background-color: #E9EBEE ; */
  /*font-size: 1.4ch;*/
}

/* The actual timeline (the vertical child ruler) */
.childtimeline::after {
  content: "";
  position: absolute;
  width: 1px;
  background-color: black;
  top: 0;
  bottom: 0;
  left: 0;
  margin-left: 14px;
  margin-right: 10px;
}

/* The circles on the timeline */
.childtimeline .sublayout::before {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  left: -24px;
  background-color: black;
  border: 3px solid #F1F1F1;
  top: 8px;
  border-radius: 50%;
  z-index: 1;
}

.childtimeline .sublayout {
  margin-left: 32px;
  margin-bottom: 16px;
  padding: 5px 0px 0px 10px;
  position: relative;
  background-color: inherit;
  /*width: 95.3%; */ 
  background-color: #e4e2e2;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
}

.childtimeline-ends{
  content: "";
  position: absolute;
  z-index:1000;
  width: 10px;
  background-color:#F1F1F1;
  top: 20px;
  bottom: 0;
  left: -21px; /*-17px*/
  /*border: 1px solid lightgrey;*/
}

.childtimeline .date {
  margin: 0 0 0 0px;
}

.childtimeline .content {
  border-radius: 0px;
  background-color: #e4e2e2;
  margin: 0 5px 0 3px;
  /*border: 1px solid lightgrey;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 20px 0 rgba(0, 0, 0, 0.19);*/
}

.sublayout .techno {
  margin-left: -11px;
  padding: 5px 5px 5px 20px;
  background-color: #d3d3d3;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
}

.footer {
  clear: both;
  height: 2.5em;
  width: 100%;
  background-color: #1867AB;
  font-size: 1.4ch;
  color: white;
}

.footer i {
  margin: 0 15px 0 10px;
}