/* FONTS */
@font-face {
    font-family: 'Roobert-light';
    src: url('/font/Roobert-Light.eot');
    src: url('/font/Roobert-Light.eot?#iefix') format('embedded-opentype'),
        url('/font/Roobert-Light.woff2') format('woff2'),
        url('/font/Roobert-Light.woff') format('woff'),
        url('/font/Roobert-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roobert-bold';
    src: url('/font/Roobert-Bold.eot');
    src: url('/font/Roobert-Bold.eot?#iefix') format('embedded-opentype'),
        url('/font/Roobert-Bold.woff2') format('woff2'),
        url('/font/Roobert-Bold.woff') format('woff'),
        url('/font/Roobert-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


/****************************/
/*    GENERAL               */
/****************************/

:root {
  --duration: 0.4s;
}

body{
    font-size: 1rem;
    color: #000;
}

h1, h2, h3  {
    font-weight: bold;
    line-height: 1.2;
}

.btn-commit{
  margin: 0px 10px 10px 10px;
}

.btn{
  border-radius: 0;
}

.hidden{
  display: none;
}

.div-transition.hidden {
  display: block;
  opacity: 0;
}

.div-transition {
  transition: opacity 1s ease;
}

.full-width-div{
    width: 100vw;
    position: relative;
    margin-left: -50vw;
    left: 50%;
}


/* HEADER **** */
.header-logo {
    text-align: center;
}

header>h1{
  font-family: Roobert-light;
  font-weight: normal;
	text-align: center;
    padding-top: 30px;
}



/*******************
 * FOOTER *
 * ***********/
 @media (min-width: 768px){
.seven-cols .col-md-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 14.285714285714285714285714285714%;
    flex: 0 0 14.285714285714285714285714285714%;
    max-width: 14.285714285714285714285714285714%;
}
}

.footer-partner {
    text-align: center;
}

.footer-partner img {
    height: 100px;
}

.footer-copyright {
    background-image: linear-gradient(to right, #0081B8, #00AC69);
    min-height: 40px;
    margin-top: 30px;
    text-align: center;
    padding-top: 10px;
    color: white;
}

footer hr{
    border-top: 2px solid rgb(0 0 0 / 32%);
}


.badge-pill{
	margin-bottom: 8px;
}

main{
	max-width: 1700px;
	margin: 0 auto;
	padding: 0 var(--space);
}

body { 
  font-family: Roobert-light;
}

.container { 
  margin: 20px auto; 
  flex-basis: 0;
  flex-grow: 999;
  min-width: 40%;
}

/***************/
/**** INTRO ****/
/***************/
.toolkit-home-header {
    text-align: center;
    background-image: url(/img/home-bg.png);
    background-position: center left;
    background-repeat: repeat-x;
    padding: 30px 0px;
    margin-top: -20px;
}

.intro-paragraph {
    margin: 30px 0px;
}

.intro-languages {
    text-align: center;
    margin: -20px 0px 20px;
    display: none;
}

.intro-steps-row {
    margin: 20px 0px;
}

.intro-steps {
    margin: 50px 0px 50px 50px;
}

.intro-steps-info {
    background: url(/img/info-steps_EN.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

a.disabled {
    pointer-events: none;
    cursor: default;
    color: grey;
}

.intro-text {
    text-align: justify;
    margin-bottom: 40px;
}

.intro-title h1 {
    color: #0081B8;
}

.intro-title h1 span {
    color: #00AC69;
}

.toolkit-home-header-logo img {
    width: 100%;
    max-width: 657px;
}

.download-header {
    background-image: url(/img/separator-bg.png);
    background-position: center left;
    background-repeat: repeat-x;
    min-height: 50px;
    text-align: center;
    padding: 2px 0px;
}

.download-header h1 {
    color: white;
}

.download-buttons {
    background-color: #e8e8e8;
    text-align: center;
    padding: 40px 0px 40px 0px;
    margin-bottom: 50px;
}

.download-button img {
    margin-bottom: 10px;
}

.download-button h4 {
    color: black;
}

.start-challenge {
    text-align: center;
    margin-bottom: 30px;
}

.start-challenge img {
    width: 80%;
    max-width: 586px;
}

.start-challenge img:hover{
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
    transform: scale(1.2);
}


/******************************************/
/*               LOGIN                    */
/******************************************/
.login-box {
    width: 360px;
    margin: 2% auto;
    border: 2px solid #0081b8;
    border-radius: 20px;
}

.login-box-body {
    margin-bottom: 20%;
    padding: 20px;
}

.login-logo {
    margin-bottom: 30%;
}

.login-logo img {
    width: 100%;
}

p.login-box-msg {
    font-size: 1.2em;
}



/****************************************************************/
/********* TABS V2   ********************************************/
/****************************************************************/
*{
  margin: 0;
  padding: 0;
}

.clear{
  clear: both;
}


.slide-toggle{
  display: none;
}

.slidemenu{
  font-family: Roobert-light, Roboto, arial, sans-serif;
  margin: 50px auto;
  overflow: hidden;
}

.slidemenu label.label-slidemenu{
  width: 16.6%;
  text-align: center;
  display: block;
  float: left;
  color: #FFF;
  opacity: 0.3;
  padding: 30px 15px 30px 15px;
  height: 180px;
}

.slidemenu label.label-slidemenu:hover{
  cursor: pointer;
}

.slidemenu label.label-slidemenu span{
  display: block;
  padding: 10px;   
  font-size: 16px; 
}

.svg-icon-nav img {
    height: 60px;
}

label[for=slide-item-governance]
{
    background-color: #0a436e;
}

label[for=slide-item-sustainable]
{
    background-color: #77214e;
}

label[for=slide-item-social]
{
    background-color: #e17e79;
}

label[for=slide-item-supply]
{
    background-color: #c99c0d;
}

label[for=slide-item-production]
{
    background-color: #317c37;
}

label[for=slide-item-waste]
{
    background-color: #e72b2c;
}



.category-section{
  margin-top: 30px;
}


/*Bar Style*/

.slider{
  width: 100%;
  height: 5px;
  display: block;
  background: #ccc;
  margin-top: 10px;
  border-radius: 5px;
}

.slider .bar{
  width: 16.6%;
  height: 5px;
  background: #333;
  border-radius: 5px;
}

/*Animations*/
.slidemenu label, .slider .bar {
  transition: all 500ms ease-in-out;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
}

/*Toggle*/

.slidemenu .slide-toggle:checked + label{
  opacity: 1;
}



.slidemenu #slide-item-governance:checked ~ .slider .bar{ margin-left: 0; }
.slidemenu #slide-item-governance:checked ~ #governance-section{ display: block; }

.slidemenu #slide-item-sustainable:checked ~ .slider .bar{ margin-left: 16.6%; }
.slidemenu #slide-item-sustainable:checked ~ #sustainable-section{ display: block; }

.slidemenu #slide-item-social:checked ~ .slider .bar{ margin-left: 33.2%; }
.slidemenu #slide-item-social:checked ~ #social-section{ display: block; }

.slidemenu #slide-item-production:checked ~ .slider .bar{ margin-left: 49.8%; }
.slidemenu #slide-item-production:checked ~ #production-section{ display: block; }

.slidemenu #slide-item-supply:checked ~ .slider .bar{ margin-left: 66.4%; }
.slidemenu #slide-item-supply:checked ~ #supply-section{ display: block; }

.slidemenu #slide-item-waste:checked ~ .slider .bar{ margin-left: 83%; }
.slidemenu #slide-item-waste:checked ~ #waste-section{ display: block; }

.category-section{ display: none; }

.not-allowed {
    cursor: not-allowed;
}



/************************/
/****  SWITCH BUTTON  ***/
/************************/
.checker {
  display: block;
  font-size: min(20vmin, 30px);
  height: 1em;
  width: 2.5em;
  box-sizing: content-box;
  padding: 0.15em;
  border-radius: 0.25em;
  transition: transform var(--duration) ease;
  cursor: pointer;
}

.checkmark {
  width: 1em;
  height: 1em;
  transition: transform var(--duration) ease;
  transform: translateX(-0.4em);
  z-index: 5;
}
.checkmark svg {
  display: block;
  background: #e5e5e5;
  transform: translateX(0.4em);
  border-radius: 0.15em;
  transition: background-color var(--duration) ease, transform calc(var(--duration) * 1.5) ease;
}
.checkmark svg path {
  stroke-dasharray: 90 90;
  stroke-dashoffset: 90;
  transition: stroke-dashoffset calc(var(--duration) / 3) linear calc(var(--duration) / 3);
}

.checkbox {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.4;
  visibility: hidden;
}
.checkbox:checked ~ .checkmark {
  transform: translate(1.9em);
}
.checkbox:checked ~ .checkmark svg {
  background: #77c44c;
  transform: translate(-0.4em);
}
.checkbox:checked ~ .checkmark svg path {
  stroke-dashoffset: 0;
}

.check-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: white;
  z-index: 2;
}
.check-bg:before, .check-bg:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: inherit;
}
.check-bg:after {
  background: white;
}
.check-bg:before {
  transition: transform var(--duration) ease;
  transform: translateY(30%);
  transform-origin: bottom center;
  background: black;
  filter: blur(0.25em);
  opacity: 0.2;
  z-index: -1;
}

.checker.checker:active {
  transform: scale(0.85);
  transition-duration: calc(var(--duration) / 2);
}
.checker.checker:active .check-bg::before {
  transform: translateY(0) scale(0.8);
  opacity: 0.2;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  position: relative;
}


/***************/
/*   ACTIONS   */
/***************/
.category-action{
  padding: 20px 20px 20px 35px;
}

.category-desc{
  margin-bottom: 30px;
}

.category-action-odd{
  background-color: #cccccc;
}

.category-action-even{
  background-color: #e6e6e6;
}

label.checker{
    margin-right: 0;
    margin-left: auto;
}

textarea.custom-action,textarea.custom-action:focus{
  background-color: #FFFFFF;
  padding: 10px;
}

button.cancel-custom-action {
    padding: 10px;
    margin-right: 30px;
    margin-top: 20px;
    border-radius: 500%;
    background-color: red;
    color: white;
}

.close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus {
    background-color: #f55b5b;
    color: white;
}

.div-custom-action {
    transition: all 500ms ease-in-out;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
}

.action-category-row {
    margin-right: 0px;
}

.category-icon {
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    min-height: 0px;
}

.category-1-en {
    background-color: #0a436e;
    background-image: url('/img/governance-action_EN.png');
}

.category-2-en {
    background-color: #77214e;
    background-image: url('/img/sustainable-action_EN.png');
}

.category-3-en {
    background-color: #e17e79;
    background-image: url('/img/social-action_EN.png');
}

.category-4-en {
    background-color: #317c37;
    background-image: url('/img/production-action_EN.png');
}

.category-5-en {
    background-color: #c99c0d;
    background-image: url('/img/supply-action_EN.png');
}

.category-6-en {
    background-color: #e72b2c;
    background-image: url('/img/waste-action_EN.png');
}
.category-1-es {
    background-color: #0a436e;
    background-image: url('/img/governance-action_ES.png');
}

.category-2-es {
    background-color: #77214e;
    background-image: url('/img/sustainable-action_ES.png');
}

.category-3-es {
    background-color: #e17e79;
    background-image: url('/img/social-action_ES.png');
}

.category-4-es {
    background-color: #317c37;
    background-image: url('/img/production-action_ES.png');
}

.category-5-es {
    background-color: #c99c0d;
    background-image: url('/img/supply-action_ES.png');
}

.category-6-es {
    background-color: #e72b2c;
    background-image: url('/img/waste-action_ES.png');
}


/***************/
/*   INPUTS    */
/***************/
.challenge-form-inputs{
  color: black;
  font-weight: bold;
  margin: 0px;
}

.challenge-form-inputs-active{
    padding: 30px 30px 60px 30px;
    border: 2px solid #0081b8;
}

.challenge-form-inputs .input.number {
    margin-bottom: 20px;
}

.challenge-form-inputs .custom-control.custom-radio {
    margin-top: 10px;
}

.actions-title {
    background-color: #00ac69;
    color: white;
    margin-bottom: 0;
    padding: 10px;
}

.actions-desc {
    color: black;
    text-align: justify;
}

.challenge-inputs-title {
    margin-top: 50px;
    padding: 10px 10px 2px 10px;
    background-color: #0081B8;
    color: white;
}

.challenge-form-inputs input {
    box-shadow: inset 0 -1px 0 #0081b8;
}

.challenge-form-inputs .btn-commit {
  background-color: #00ac69;
}

.btn-recalculate-challenge{
    margin-top: 20px;
}

.challenge-attachment {
    text-align: center;
}

.challenge-attachment i {
    font-size: 80px;
    margin: 20px;
}

.challenge-approve-div {
    margin: 30px;
    text-align: center;
}

div#official-inputs {
    padding-bottom: 100px;
}

input.form-control[disabled] {
    color: #0081b8;
}

.challenge-form-inputs.challenge-form-official.row {
    padding: 30px 30px 60px 30px;
    border: 2px solid #0081b8;
}

/*****************/
/*   REPORTS     */
/*****************/
.output-icon{
    margin-right: 20px;
}

.output-icon img {
    width: 80px;
}

.summary-output {
    text-align: left;
    width: 100vw;
    margin-left: calc(-50vw + 50% - 8px);
    position: relative;
    background-color: #00ac69;
    background-image: url(/img/report-bg.png);
    background-size: contain;
    padding-bottom: 30px;
}

h1.summary-title {
    color: white;
    padding-top: 30px;
    text-transform: uppercase;
}

.output-item-wrap {
    background-color: white;
    color: color;
    margin-top: 20px;
    height: 100%;
    border-radius: 20px;
}

.output-item {
    display: flex;
    /* -webkit-box-pack: center; */
    -ms-flex-pack: center;
    justify-content: center;
    padding: 3rem 2.22222rem 2.38889rem;
}

.output-title h4 {
    font-size: 16px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: .61111rem;
    text-align: left;
}

span.output-units {
    font-size: 18px;
    text-transform: none;
}

.summary-output [class*="col-"] {
  margin-bottom: 30px;
}

.actions-output {
    margin-top: 30px;
}

.report-upload-section {
    text-align: center;
    margin: 50px;
}

button#btn-upload-commitment {
    background-color: #00ac69;
}

h5.input-submitted-title {
    font-size: 1em;
    color: black;
  /*  font-weight: bold; */
    margin-bottom: 0.5rem;
}

h4.input-submitted {
    color: #0081b8;
    margin-bottom: 0px;
   /* border-bottom: 1px dotted #ddd; */
    height: calc(2.81875rem + 0rem);
    font-size: 1rem;
    padding-top: 10px;
    font-weight: 600;
}

.input-item-even {
    background-color: #cccccc;
    padding: 20px;
}

.input-item-odd {
    background-color: #e6e6e6;
    padding: 20px;
}

.div-contributors {
    margin-top: 50px;
    margin-bottom: 50px;
}

.contributors-title {
    background-color: #8b8b8b;
    color: white;
    margin-bottom: 0;
    padding: 10px 10px 2px 10px;
}

.contributors-logos {
    text-align: center;
}

.contributor-logo-item img {
    height: 100px;
    max-width: 100%;
}

.contributor-logo-item {
    margin-top: 20px;
}

.add-contributor-btn .btn-add {
    margin-top: 30px;
}

.summary-title-city h1 {
    text-transform: uppercase;
    text-align: center;
    color: #0081b8;
    font-size: 2.5em;
}

.summary-title-city {
    margin-top: 50px;
}


/*******************
 *  THANKS *
 * **********/

 .thanks-text {
    font-size: 9.75rem;
    line-height: 1;
    color: #00ac69;
}

.thanks-paragraph{
    margin: 80px;
    text-align: center;
}