.hide{
  display: none;}
.image-full-width { width: 100%;display: block; }
.block{
  background-color: white;
  padding: 1% 2%;
  margin-bottom: 20px ;}
.block:after{
  content: "";
  display: table;
  clear: both;}
.block.checks{
  padding: 0 2rem;}

.title{
  height:8rem;
  line-height: 8rem;
  background-color: white;
  border-top: solid 2px #E2E2E2;
  border-bottom: solid 1px #E2E2E2;
  font-family:'Nexa', sans-serif;
  font-weight: bold;
  font-size: 3rem;
  padding-left:2rem;}
.title.align{
  display: inline-block;
  border: none;}
.title.no-background{
  background-color: transparent;}
.title.no-border-top{
  border-top: none;}
.title.no-border-bottom{
  border-bottom: none;}
.intro{
  background-color: white;
  font-family:'Nexa', sans-serif;
  font-style: italic;
  font-size: 14px;
  color: #999;
  padding-left:2rem;}

.elements.no-padding-top{ padding-top: 0; }
.elements .title{
  height: 6rem;
  line-height: 6rem;
  font-size: 2.5rem;}

.subtitle{
  height: 3rem;
  margin-bottom: 3rem;
  padding-left: 10px;
  font-size: 1.8rem;
  line-height: 3rem;
  font-weight: bold;
  color: #FF6D22;
  border-bottom: solid #E2E2E2 1px;}
.subtitle.align + .quick-search {
  position: absolute;
  top: -7px;
  right: 0;
  margin: 0;
}
.subtitle.align + .quick-search input,
.subtitle.align + .quick-search button {
  line-height: 1;
  height: 30px;
}

.thirdtitle{
  font-family: "Nexa", sans-serif;
  font-weight: bold;
  font-size: 2.5rem;
  margin-bottom: 2rem;
  line-height: 2.5rem;}

.fourthtitle{
  font-size: 1.5rem;
  font-weight: bold;
  height: 4rem;
  line-height: 4rem;
  padding-left: 2rem;
  border-top: solid 2px #E7EAEC;
  border-bottom: solid 1px #E7EAEC;
  background-color: white;}

.fivetitle{
  position: relative;
  font-weight: bold;
  height: 4rem;
  line-height: 4rem;
  color: #FF6D22;
  background-color: white;}

.sixtitle{
  font-size: 2rem;
  font-weight: bold;}

.categorytitle {
  font-weight: bold;
  color:#FF6D22;
  font-size: 2rem;}

.title .buttons {
  float: right;}

.orange{
  color:#FF6D22 !important;}

button.remove{
  background-color: #EDEDED;
  color: #6C6F71;
  border: none;}

.back{
  margin-top: 2rem;}




button.fit{
  font-size: 11px;
  height: 32px;
  line-height: 31px;}

/* -- LIST -------------------------------------------------------- */
.list{
  margin-bottom: 20px;}

.list .avatar{
  width: 40px;
  height: 40px;
  margin-right: 20px;
  float: left;
  border-radius: 10px;
  background-size: cover;
  background-position: center;}
.list .name{
  font-weight: bold;
  font-size: 2rem;
  line-height: 20px;}
.list .infos{
  color:#999;}
.list .infos span{
  display: inline-block;
  vertical-align: middle;
  margin-right:10px;}
.list .infos span.industry{
  display: inline-block;
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;}
.list .icon{
  position: absolute;
  font-size: 3.5rem;
  line-height: 4rem;
  right: 20px;
  top: 20px;
  color:#999;}
.list .icon.icon-remove{ cursor: pointer; font-size: 2.3rem; }

.row{
  cursor: pointer;
  vertical-align: middle;
  min-height: 80px;
  background-color: white;
  border-top:solid #E2E2E2 1px;
  padding: 2rem 2rem;
  box-sizing: border-box;}
.row.a, .row.b, .row.c, .row.edit{
  padding: 0 2rem;}
.row.a .avatar,.row.b .avatar,.row.c .iconFirst,.row.edit .avatar{
  margin-top: 2rem;
  width: 40px;
  height: 40px;
  margin-right: 2rem;
  float: left;
  background-position: center;
  background-size: cover;
  border-radius: 10px;}
.row.a .icon,.row.b .icon{
  position: absolute;
  font-size: 3.5rem;
  right: 20px;
  top: 20px;
  color:#D1D1D1;}
.row.a .name,.row.b .name{
  font-weight: bold;
  font-size: 2rem;
  margin-top: 1.9rem;}
.row.a .infos{
  color:#999;}
.row.a .infos span{
  margin-right:10px;}
.row .status {
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  margin-left: 1rem;
  vertical-align: middle;
  border-radius: 50%;
  border: 1px solid #999;
}
.row .status.ok {
  background-color: green;
}
.row .status.warn {
  background-color: orange;
}
.row .status.oldies {
  background-color: #D1D1D1;
}
.row .status.na {
  background-color: #828282;
}
.row.b .name,.row.c .name,.row.edit .name{
  line-height: 8rem;
  margin-top: 0;}
.row.c .iconFirst{
  font-size: 2rem;
  margin-top:2.4rem;
  margin-right: 1rem;
  width: auto;
  color:#D1D1D1;}
.row.c .name{
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1.6rem;}
.row.result{
  padding: 0 2rem;
  line-height: 8rem;}
.row.result .percent{
  position:absolute;
  right: 2rem;
  color:#D1D1D1;}
.row.result .date{
  position:absolute;
  right: 35%;}
.row.edit .icon-edit{
  color: #676a6c;
  float: right;
  font-size: 2.2rem;
  height: 2rem;}

.row.doc a{
  color: #676a6c;
  text-decoration: none;}
.row.doc:hover{
  color: #FF6D22;}
.row.doc .icon-doc{
  font-size: 2rem; }
.row.doc .icon-edit,.row.doc .icon-load{
  float: right;
  font-size: 2.2rem;
  height: 2rem;}
.row.doc .icon-load.mr-top{
  margin-top: -40px;}
.row.categorytitle{
  cursor: default;}
.row.doc .name{
  text-decoration: none;}
.row.no-pointer{
  cursor: default;}

/* -- MODAL ------------------------------------------------------- */
.black{
  position: fixed;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);}

.modal{
  position: fixed;
  background-color: white;
  padding:1% 2%;
  margin: 0 auto;
  left: 0;
  right: 0;}
.modal .close{
  position: absolute;
  top:-65px;
  right: 0;}
.modal .close:before{
  cursor: pointer;
  font-family: "Nexa", sans-serif;
  content: "x";
  color: white;
  font-size: 5rem;}
.modal .section { padding: 0 15px; }
.modal button{
  margin-right: 1.5rem;}
.modal .add{}
.modal .add input{
  margin-right: 1rem;
  margin-left: 22%;
  width: 60%;}
.modal .add button{
  padding: 0 1rem;}
.modal.account{
  width:80%;}
.modal.drone{
  max-width: 400px;
  width: 80%;}

/* -- FORMS ------------------------------------------------------- */
.entry.mrb{ margin-bottom: 20px; }
.entry, .ppk-option{
  width: 100%;
  margin-bottom:3rem;}
.entry *{
  margin-bottom:0}

.entry label, .entry .label-like{
  vertical-align: middle;
  text-align: right;
  padding-right: 4%;
  width: 18%;
  display: inline-block; }
p.input-like{
  color: #999999;
  border-radius: 4px;
  padding: 1rem;
  border: solid 1px #E7EAEC;
  background-color: #F9F9F9;
  vertical-align: middle;
  display: inline-block;
  width: 70%;}
.entry .label-like{ font-weight: 600; }
.ppk-option .label{
  display: block;
  font-weight: 600;
  text-transform: capitalize;
  padding-bottom: 15px;}
.changelog-info {
  font-weight: 600;
  display: inline-block;}
.changelog-user {
  font-weight: bold;
  display: inline-block;}

@media (min-width: 1000px) {
  .ppk-option input { margin-bottom: 0; }
}

.entry input,.entry select,.entry .box{
  width: 60%;
  display: inline-block;
  vertical-align: middle;}

.entry input[type="radio"],.entry input[type="checkbox"]{
  width: auto;}

.entry input[type="checkbox"]{
  margin-right: .5rem;}

.entry label.radio{
  vertical-align: middle;
  color: #999;
  width: auto;
  font-size: 1.3rem;}

.entry label.checkbox{
  display: inline;
  vertical-align: middle;
  color: #999;
  width: auto;
  font-size: 1.3rem;
  white-space: pre-line;}

.entry label.checkbox:after{
  content: "\a"}

.entry .avatar{
  margin-right: 10px;
  vertical-align: middle;
  display: inline-block;
  width: 10rem;
  height: 10rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  background-size: cover;
  background-origin: border-box;
  background-position: center;
  border-radius: 2rem;}

.entry.sub{
  margin-left: 2rem;}

.text input{
  display: block;
  width: 100%;
  font-family: "WorkSans", sans-serif;
  font-weight: normal;
  font-size: 2rem;}

.text textarea{
  display: block;
  width: 100%;
  height: 30rem;
  resize: vertical;}

.side button{
  width: 100%;}

.checks .entry {
  margin-bottom: 1rem;}

.spec{
  padding: 0.5rem 4rem 0.5rem 2rem;
  background-color: white;
  border-bottom:solid #E2E2E2 1px;}
.spec p {
  margin-bottom: 0;}
.spec .name {
  font-weight: bold;}
.spec .description{
  color: #999999;}
.spec .icon-remove{
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 1rem;
  height: 2rem;
  font-size: 1.5rem;
  cursor: pointer;}

.spec .icon-remove:hover{
  color:#FF6D22;}

.addSpec {
  padding: 1rem 2rem;
  background-color: white;}
.addSpec button{
  margin: 0;}

/* Avatar */
.entry.avatar .drag{
  display: none;
  width: 60%;
  height: 12rem;
  line-height: 12rem;
  text-align: center;
  color: hsla(204, 2%, 48%, 1);
  outline: 2px dashed #b8b8b8;
  border-radius: 2rem;
  transition: .2s;}
body.dragover .entry.avatar .drag{
  display: inline-block;}
body.dragover .entry.avatar .main{
  display: none;}

.entry.avatar.dragover .drag{
  background-color: #FF6D22;
  color: white;
  outline-color: white;
  outline-offset:-2rem;}

input.picture{
  display: block;
  top: 1rem;
  position: absolute;
  width: 220px;
  margin-left: 22%;
  height: 10rem;
  z-index: 2;
  cursor: pointer;
  opacity: 0;}

button.submit{
  transition: .3s;}

button.submit.disabled{
  pointer-events: none;
  cursor: default;
  background-color: #E2E2E2;
  color: #999999;
  border-color: #999999}

/* Input Document */

div.document{
  height: auto;
  cursor: pointer;
  background-color:white;
  line-height:4rem;
  padding: 0 2rem;
  contain: content;
  border-bottom:1px solid #e7eaec;}
div.document:hover{
  background-color: #EDEDED;}

input.source{
  display: block;
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  margin: 0;
  height: 4rem;
  z-index: 2;
  cursor: pointer;
  opacity: 0;}

body .document .main{
  display: inline;}
body .document .drag{
  display: none;}
body.dragover .document .drag{
  transition: .3s;
  display: block;
  text-align: center;
  line-height: 8rem;
  height: 8rem;
  border-radius: 10px;
  outline: dashed #e2e2e2 2px;
  margin: 2rem 0;
  color: #cccccc;}
body.dragover div.document.dragover .drag{
  background-color: #FF6D22;
  color: white;
  outline-color: white;
  outline-offset: -1rem;}
body.dragover .document .main{
  display: none;
  height: 4rem;}
body.dragover input.source{
  height: 12.4rem;}


.input-add {}
.input-add-content { padding-bottom: 15px; }
.input-add-footer {}
.input-add .inputs .icon-remove{
  cursor: pointer;
  position: absolute;
  right: 10px;
  line-height: 38px;
  font-size: 1.5rem;
  color: #fa6e00;}
.input-add .inputs{ display: block; }
.input-add .inputs.full{ display: block; width: 100%; }
.input-add .inputs input, .input-add .inputs select,
.input-add-footer form input, .input-add-footer form select{
  border-radius: 0;}
.input-add .inputs input, .input-add .inputs select { margin-bottom: -1px; }
.input-add .inputs input:last-child{ margin-bottom: 0; }
.input-add span {
  vertical-align: middle;
  margin: 5px;
}
.input-add input.half, .input-add select.half {
  display: inline-block;
  vertical-align: middle;
  width: 50%;}
.input-add.ppk-options select {
  width: calc(30% - 40px);}
.input-add-footer .button-primary.fit{
  margin: 3px 0 0 0;
  vertical-align: middle;
  float: right;}

/* -- QUICK SEARCH ------------------------------------------------ */
form.quick-search {
  position: relative;
  float: right;
  margin-top: 1rem;
  display: inline-block;
  margin-bottom: 0;}
form.quick-search .entry {margin-bottom: 0;}
form.quick-search input[type="text"] {
  width: 100%;
  padding-right: 120px; /* TO CHANGE when picto is up */
  border-radius: 0;}
form.quick-search button {
  position: absolute;
  right: 0;
  margin: 0;
  border-radius: 0;}
form.quicke-search .submit-search {
  display: inline-block;}
form.quick-search .clear-search {
  right: 108px;
  padding: 0 12px;
  color: #D1D1D1;
  border: none;
}


/* -- SUBNAVIGATION ----------------------------------------------- */

.subnav{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  background-color: white;
  border-bottom: solid #E2E2E2 2px;
  color: #999;}

.subnav .nav{
  width: 100%;
  cursor: pointer;
  display: inline-block;
  line-height: 5rem;
  margin-right: 4rem;
  font-weight: bold;}

.subnav .nav:hover{
  color: #676A6C;
  border-bottom: solid #FF6D22 2px;}

.subnav .nav .icon{
  margin-right: .5rem;}

.hasSubnav{
  margin-top: 15rem;}

.hasSubnav.two{
  margin-top: 10rem;}

.hasSubnav.four{
  margin-top: 20rem;}

.hasSubnav.five{
  margin-top: 25rem;}

@media (min-width: 1000px) {
  .subnav{
    height: 5rem;}
  .subnav .nav{
    width: auto;}
  .hasSubnav, .hasSubnav.four, .hasSubnav.two, .hasSubnav.five{
    margin-top: 5rem;}
}
@media (max-width: 1000px), (max-height: 590px) {
  .modal .close{
    position: absolute;
    top: -18px;
    right: 10px;}
  .modal .close:before{
    color: #676A6C;}
}

/* -- TABS -------------------------------------------------------- */

.tabs .tab{
  cursor: pointer;
  position: relative;
  top: 1px;
  display: inline-block;
  padding: 2rem;
  font-family: "Nexa", sans-serif;
  font-weight:bold;
  font-size: 2rem;
  margin-right: 1rem;
  text-align: center;
  min-width: 10rem;
  background-color: #fbfbfb;
  border-top:2px solid #E7EAEC;}
.tabs .select{
  cursor: default;
  z-index: 2;
  background-color: white;}

/* -- CARD -------------------------------------------------------- */
.card:nth-child(4n+1){
  margin-left: 0}
.card{
  cursor: pointer;
  background-color: white;
  margin-bottom: 2rem;}
.card .image{
  margin: 0;
  background-position: center;
  background-size: cover;
  height: 200px;
  background-color: #EDEDED;}
.card .text{
  transition: .3s;
  margin: 0;
  text-align: center;
  font-weight: bold;
  background-color: white;
  height: 40px;
  line-height: 40px;
  border-top:solid #E2E2E2 2px;}
.card:hover .text{
  border-top: solid #FF6D22 2px;}
.card .image.addCard{
  background-size: 7rem;
  background-repeat: no-repeat;}

/* -- STATS ------------------------------------------------------- */
.stats.big{
  border-radius: 10px;
  height: 180px;
  background-color: white;
  border:solid #E2E2E2 1px;
  text-align: center;
  margin-bottom:2%;}
.stats.big div.name{
  margin: 40px 0 20px 0;
  color:#FF6D22;
  white-space: pre;
  overflow: hidden;}
.stats.big div.number{
  font-size: 5rem;
  line-height: 50px;
  font-weight: bold;}

.bigs.u-inner.stats { margin-bottom: 30px; }
.stats{
  border-radius: 10px;}
.stats.export{ margin-top: 30px; }
.stats .content {
  background-color: #fff; }
.stats.export .content { padding: 30px 25px 1px; }
.stats.export .content .choice-of-data-form input[type="date"] {
  margin-right: 0; }
.stats.export .content button.button-primary { margin-right: 0; }
.summary-footer .summary { padding-top: 0; }
@media (min-width: 1700px) {
  .stats.export .content .choice-of-data-form input[type="date"] { flex-grow: 2; }
}
@media (max-width: 1000px) {
  .stats.export .content .choice-of-data-form input[type="date"] { flex-grow: 3; }
  .stats, .stats.export{
    margin-top: 0;
    margin-bottom: 2%; }
}
.stats.little{
  min-height: 90px;
  margin-bottom:2%;
  background-color: #FF4920;
  color: white;
  text-align: right;
  padding: 15px 20px 15px 75px;}
.stats.little .name{
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 16px;}
.stats.little span{
  position: absolute;
  top: 0;
  left: 10px;
  font-size:400%;
  line-height: 90px;}
.stats.little p{
  margin: 0;}
.stats.little p.number{
  font-weight: bold;
  font-size: 4rem;
  line-height: 40px;}

.stats.middle{
  margin-bottom:2%;
  height: 180px;
  background-color: white;
  border:solid #E2E2E2 1px;
  text-align: center;}
.stats.middle .name{
  margin: 40px 0 20px 0;
  color:#FF6D22;}
.stats.middle .number{
  font-size: 5rem;
  line-height: 50px;
  font-weight: bold;}

.summary {
  display: flex;
  justify-content: space-between;
  background: #fff;
  padding: 25px;}
.summary .line:first-child .col { padding-left: 15px; }
.summary .line:last-child .col { padding-right: 15px; }
.summary .line .col {
  white-space: nowrap;
  font-size: 1em;
  padding: 10px 0;
  border-bottom: 1px solid #E2E2E2; }
.summary .line .col.legend:before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #E2E2E2;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px; }
.summary .line .col.legend.orange:before { background-color: #FF6D22; }
.summary .line .col:last-child { border-bottom: none; }
.summary .line { flex: 1; }
.graph {
  margin-bottom: 20px;
  min-height: 380px;
  background-color: white;
  overflow: hidden;}
.graph.pie { position: relative; min-height: inherit; margin-bottom: -67px; }
.graph.pie .chart-container { margin-left: -12px; }
.graph.pie:after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto; }
.graph.pie .pie-chart.chart-draw-area { position: relative; }
.graph.pie .chart-container:after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 56px; left: 20px;
  width: 125px;
  height: 125px;
  margin: auto;
  border-radius: 50%;
  background-color: #fff; }
@media (max-width: 1300px) {
  .graph.pie .chart-container:after {
    width: 105px;
    height: 105px; }
}
@media (max-width: 1150px) {
  .graph.pie .chart-container:after {
    width: 85px;
    height: 85px; }
}
@media (max-width: 1000px) {
  .graph.pie .chart-container:after {
    width: 125px;
    height: 125px; }
}
.graph.pie .chart-legend { display: none; }
.summary {
  background-color: #fff; }
.graph .name{
  height: 60px;
  line-height: 60px;
  border-top: solid #E2E2E2 2px;
  border-bottom: solid #E2E2E2 2px;}
.graph .name span{
  font-weight: bold;
  font-size: 2.5rem;
  margin-left: 20px;}
body.flights .chart-container>.title,
.graph .graph-svg-tip.comparison span.title,
.graph .title{
  display: none;}
.graph .graph-svg-tip.comparison .svg-pointer{
  border-top-color: orange;}
.graph .graph-svg-tip.comparison strong{
  color: white;
  border-radius: 2px;
  background-color: orange;
  line-height: 26px;
  height: 20px;
  text-align: center;
  font-size: 2rem;}
.graph .graph-svg-tip.comparison .data-point-list{
  border-radius: 2px;
  padding: 10px;
  background-color: orange;}
.graph .chart-container .graph-svg-tip ul.data-point-list li{
  padding: 0;
  min-width: 50px;
  border-top:none !important;}
.graph .chart-container{
  width: 100%;}
.graph svg.chart {
  width: 100%;}
.graph.ctm{
  margin-bottom: 0;
  min-height: initial;
  background-color: white;
  overflow: initial;}

.chart-container .sub-title,
.chart-container .title{ display: none; }
.choice-of-data-form{
  display: flex;
  justify-content: space-between;
  align-items: baseline;}
.choice-of-data-form label{
  text-align: right;
  flex: .5;
  margin-right: 10px;}
.choice-of-data-form input[type="date"]{
  flex: 1;
  margin-right: 10px;}
.choice-of-data-form button.button-primary{ margin-right: 0; }
.choice-of-data ul{ list-style: none; }
.choice-of-data li.value span{
  cursor: pointer;}
.choice-of-data li.value.selected span{
  text-decoration: underline;}

.view.elearning .card {
  display: inline-block;
  text-align: center;
  float: none;
  vertical-align: top;}
.view.elearning .card .name{
  font-size: 1.6rem;
  font-weight: bold;
  margin-top: 1rem;
  margin-bottom: -0.2rem;}
.view.elearning .card .buttons{
  text-align: center;}
.view.elearning .card .description{
  margin-bottom: 1rem;}
.view.elearning .card .users{
  margin-bottom: .5rem;}
.view.elearning .card .products{
  margin-bottom: 1rem;}
.view.elearning .card .users span,
.view.elearning .card .products span{
  color: #999;
  font-style: 14px; }
.view.elearning .card button:nth-child(1){
  margin-right: 2rem;}
.view.elearning .card button{
  margin: 0;
  margin-bottom: 1rem;
  padding: 0 1rem;}
.view.elearning .card .progress{
  background-color: #FF6D22;
  height: 0.5rem;}

.view.elearning .timeline{
  text-align: center;
  margin-bottom: 2rem;}
.view.elearning .timeline .line{
  display: inline;
  box-shadow: inset 0px 0px 0px 7px #f5f5f5;
  background-color: #d6d7d8;}
.view.elearning .timeline .line div{
  border-radius: 100%;
  background-color: #D6D7D8;
  width: 3rem;
  height: 3rem;
  line-height: 3rem;
  font-family: "Nexa";
  text-align: center;
  display: inline-block;
  font-weight: bold;
  font-size: 1.4rem;
  color: white;
  border: 16px solid whitesmoke;}
.view.elearning .timeline .chapter{
  margin-right: 8%;}
.view.elearning .timeline .chapter:last-child{
  margin-right: 0;}
.view.elearning .timeline .line .quizz{
  font-size: 2rem;
  font-weight: normal;
  background-color: whitesmoke;
  color: #D6D7D8;}
.view.elearning .timeline .chapter.pass{
  background-color: #FF6D22;}
.view.elearning .timeline .quizz.pass{
  color:#FF6D22;}
.view.elearning .results .block{
  padding: 0;}
.view.elearning .startQuizz.block,
.view.elearning .validateQuizz.block{
  padding: 8rem 2rem;
  text-align: center;}

.view.elearning .icon-success,
.view.elearning .icon-fail{
  font-size: 8rem;
  margin-bottom: -34px;}

.view.elearning .block{
  padding: 2rem 2rem;}
.view.elearning .quizz .sixtitle{
  font-size: 2.5rem;}
.view.elearning .quizz .progress{
  margin-top: -.5rem;
  color:#bebebe}
.view.elearning .quizz .answers .answer {
  transition: .2s;
  cursor: pointer;
  padding: 2rem 2rem;
  background-color: #f7f7f7;
  color: #9c9c9c;
  font-size: 2rem;
  margin-top: 2rem;
  margin-bottom: 2rem;}
.view.elearning .quizz .answers .answer:hover {
  color: #ff6d22;}
.view.elearning .quizz .answers .answer:hover .id{
  border: 1px solid #ff6d22;}
.view.elearning .quizz .answers .answer .id{
  font-weight: bold;
  display: inline-block;
  text-align: center;
  text-transform: uppercase;
  border: 1px solid #9c9c9c;
  border-radius: 50%;
  line-height: 2.5rem;
  height: 2.5rem;
  width: 2.5rem;
  margin-right: 1.5rem;}
.view.elearning .quizz .answers .answer.select {
  color: white;
  background-color: #FF6D22;}
.view.elearning .quizz .answers .answer.select .id{
  border: 1px solid white;}
.view.elearning .block.quizz .image{
  margin: 0 auto;
  width: 50%;
  height: 20rem;
  border-radius: 10px;
  background-position: center;
  background-size: cover;}
.view.elearning .block.quizz button{
  margin: 0;
  float: right;}
.view.elearning .block.quizz button{
  transition: 0.3s;}
.view.elearning .block.quizz button[disabled]{
  cursor: default;
  border-color: #bfbfbf77;
  background-color: #f7f7f7;
  color: #bfbfbf;}
.view.elearning.finish .head{
  margin-bottom: 4rem;
  text-align: center;}
.view.elearning.finish .block .sixtitle {
  margin-top: 2rem;
  margin-bottom: 1rem;}
.view.elearning.finish .block .description {
  margin-bottom: 2rem;}

.view.elearning.finish .block .detail {
  margin-bottom: 2rem;}
.view.elearning.finish .block .sixtitle {
  margin-bottom: 0rem;}
.view.elearning.finish .block .answered span,
.view.elearning.finish .block .correct span {
  text-transform: uppercase;
  font-weight: bold;}

.view.elearning .buttons.nav {
  display: flex;
  justify-content:space-between;}
.view.elearning  .buttons.nav button.transparent{
  opacity: 0;
  pointer-events: none;}
.view.elearning  .buttons.nav button{
  min-width: 20rem;
  margin: 0;}
.view.elearning.finish .block button {
  margin: 0;}
.view.elearning.finish .bar{
  margin: 0 auto;
  margin-bottom: 2rem;
  display: block;
  height: 2px;
  width: 20rem;
  background-color: #FF6D22;
  text-align: center;}
.view.elearning.finish .block p{
  margin: 0;
  color: #999999;}

.view.elearning .pdf{
  display: block;
  margin: 0 auto;
  max-width: 80rem;
  width: 100%;
  height: 80rem;}
.view.elearning .video{
  display: block;
  margin: 0 auto;
  max-width: 80rem;
  width: 100%;
  height: 45rem;
  margin-bottom: 4rem;}
.view.elearning iframe.video video{
  width: 80% !important;}
.view.elearning .noresult{
  text-align: center;
  line-height: 45px;
  margin: 0;}
>>>>>>> 2f3ddf9... init elearning for all