@import url("../guidelines_variables.css");

.modal-showcases-form-webform .webform-progress-tracker .progress-step.is-active .progress-text .progress-title,
.modal-api-form-webform .webform-progress-tracker .progress-step.is-active .progress-text .progress-title{
    text-align: left;
    letter-spacing: 0px;
    color: #FFFFFF;
    text-transform: uppercase;
    opacity: 1;
}
.modal-showcases-form-webform .webform-progress-tracker .progress-step .progress-text .progress-title,
.modal-api-form-webform .webform-progress-tracker .progress-step .progress-text .progress-title{
  color: var(--webform-inactive);
}

/* ########################################################## */
/*#################### WEB FORM ##########################àà */
/* ########################################################### */



/* .modal-showcases-form-webform, */

.modal-showcases-form-webform,
.popup-history-dialog-class.ui-dialog.ui-corner-all.ui-widget,
.popup-api-idea-dialog-class.ui-dialog.ui-corner-all.ui-widget,
.modal-api-form-webform.ui-dialog.ui-corner-all.ui-widget{
  width:  65vw!important;
    overflow: hidden;
}


.webform-request-api
{
    width:  65vw!important;
    overflow: hidden;
}


.modal-showcases-form-webform #title-api-form,
.modal-api-form-webform #title-api-form
{
    margin-top: 7vh;
    margin-left: 7vh;
    text-align: left;
    text-transform: uppercase;
}

h3#title-api-form {
    color: #ffffff;
}

.webform-submission-api-form-form .messages__wrapper {
    position: absolute;
    margin: 0 auto;
    width: 34%;
    z-index: 21;
    overflow-wrap: break-word;
}
.webform-submission-new-showcases-form .messages__wrapper {
    position: absolute;
    margin: 0 auto;
    width: 34%;
    z-index: 21;
    overflow-wrap: break-word;
}

.webform-progress{
    width: 22vw;
    background: var(--webform-bg);
    opacity: 1;
    float: left;
    position: relative;
    margin: 0 auto;
}


.modal-api-form-webform
{
   --heigh-vh:92vh;
}

.modal-showcases-form-webform [data-drupal-messages],
.modal-api-form-webform [data-drupal-messages]{
  display: flex;
  /* grid-column-start: column1;
  grid-column-end: column-end;
  grid-row-start: line0;
  grid-row-end: span line1; */
  /* flex: 0 0 100%; */
  grid-row-start: line0;
    grid-column-start: column0;
    z-index: 100;
}

.progress-step
{
  grid-row-start: line0;
  grid-row-end: line-end;
  grid-column-start: column0;
  grid-column-end: column1;
  display: flex;
left: 25px;
width: -moz-max-content;
width: -webkit-max-content;
width: -o-max-content;
width: -ms-max-content;
width: max-content;
position:relative;

}
.modal-showcases-form-webform .webform-submission-new-showcases-form >
.js-form-wrapper.form-wrapper.form-group:not(.webform-wizard-pages-links),
.modal-api-form-webform .webform-submission-api-form-form >
.js-form-wrapper.form-wrapper.form-group:not(.webform-wizard-pages-links) {
    overflow-y: auto;
    float: right;
    position: relative;
    background: #fff;
    max-height: 461px;
    width: 65%;
    padding: 20px 20px 50px 20px;
}

.progress-step:not(:last-child){
height: 20%;
       right: 0;
}

#webform-submission-new-showcases-form-ajax .progress-step:not(:last-child) {
       height: 105px;
}

.modal-api-form-webform  .webform-progress-tracker.progress-tracker{
  flex-direction: column;
 width:200px;
 height: 350px;
 margin: 0;
 margin-top: 10vh;
 margin-left: 4vh;
}

.modal-showcases-form-webform .webform-progress-tracker.progress-tracker{
  flex-direction: column;
 width:200px;
 height: 205px;
 margin: 0;
 margin-top: 10vh;
 margin-left: 4vh;

}


.webform-progress-tracker .progress-step .progress-marker.custom-tracker
{
  border-radius:50%;
    border: 2px solid #BFBFBF;
    opacity: 1;
}

.webform-progress-tracker .progress-step.is-active .progress-marker.custom-tracker {
    border-radius:50%;
    border: 2px solid #f8cc00;
    opacity: 1;
}
.webform-progress-tracker .progress-step:not(.is-active) .progress-marker.custom-tracker{
  background-color:transparent!important ;
      color: transparent;
    font-weight: 700;
    height: 16px;
       width: 16px;
    /* position: relative; */
    position: absolute;
    /* left: 5px; */
    left: 5.7px;
    top: 5px;
}


.webform-progress-tracker .progress-step:not(.is-active) .progress-marker::before,
.webform-progress-tracker .progress-step:hover .progress-marker::before,
.webform-progress-tracker .progress-step .progress-marker::after {
    visibility: hidden !important;
}


.webform-progress-tracker .progress-step.is-active .progress-marker.custom-tracker {
  background-color: var( --webform-bullets)  !important;
  color: transparent;
  height: 28px;
  width: 28px;
  position: absolute;
}

.progress-step.is-active .progress-marker::before  {
  background-color: var( --webform-bullets)  !important;
}
.progress-step:not(.is-active) .progress-marker::before  {
  background-color: transparent  !important;
}


.custom-tracker{

  color: transparent;
}

.progress-step:not(:last-child)::after {
    content: '';
    display: block;
    position: absolute;
    /* z-index: -10; */
    z-index: 1;
   /* top: 40px; */
       top: 47px;
    bottom: 12px;
    /* width: 44px; */
        width: 55px;
    height: 2px;
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
    transform: rotate(90deg);
    /* left: -8.5px; */
        left: -13.9px;
    background-color: #ffffff;
}
.progress-step:not(.is-active) .progress-text{
    margin-left: 25px;
}
.progress-step.is-active .progress-text{
    margin-left: 25px;
}

.progress-step.showcases:not(:last-child)::after {
    content: '';
    display: block;
    position: absolute;
    /* z-index: -10; */
    z-index: 1;
   /* top: 40px; */
       top: 64px;
    bottom: 12px;
    /* width: 44px; */
        width: 90px;
    height: 2px;
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
    transform: rotate(90deg);
    /* left: -8.5px; */
        left: -30.9px;
    background-color: #ffffff;
}
.progress-step.showcases:not(.is-active) .progress-text{
    margin-left: 25px;
}
.progress-step.showcases.is-active .progress-text{
    margin-left: 25px;
}



/* .modal-api-form-webform .ui-dialog-buttonpane.ui-widget-content{

    width: 600px;
    float: right;
    height: 0;
    z-index: 10;
} */
.modal-showcases-form-webform,
.webform-request-api,
.popup-api-idea-dialog-class,
.modal-api-form-webform
{
    background: var( --white_color);
    box-shadow: 0px 0px 54px #0000001C;
}

.modal-showcases-form-webform .ui-dialog-buttonpane.ui-widget-content,
.modal-api-form-webform .ui-dialog-buttonpane.ui-widget-content{

    width: 600px;
    /* float: right; */
    height: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    flex-flow: column;
    padding: 0;
    margin: 0;
    position: absolute;
    right: calc((65vw - 22vw - 650px)/2);
    justify-content: flex-end;
}

.modal-showcases-form-webform .ui-dialog-buttonset.form-actions,
.modal-api-form-webform .ui-dialog-buttonset.form-actions
{   margin: auto;
    /*margin-top: -55px;*/
    margin-top: -50px;
}
.modal-showcases-form-webform .ui-front.ui-dialog-content.ui-widget-content,
.modal-api-form-webform .ui-front.ui-dialog-content.ui-widget-content
{
    z-index: 0;
    padding: 0;
}
.modal-showcases-form-webform .form-wrapper.form-group:not(.webform-wizard-pages-links),
.modal-api-form-webform .form-wrapper.form-group:not(.webform-wizard-pages-links){
    margin: auto;
    position: relative;
}
.modal-showcases-form-webform .form-wrapper.form-group:not(.webform-wizard-pages-links)>a {
    float: left;
    position: absolute;
    top: -25px;
    left: -190px;
}
.modal-showcases-form-webform .form-type-select:not(.webform-has-field-suffix),
.modal-api-form-webform .form-type-select:not(.webform-has-field-suffix){
    display: flex;
    flex-flow: column;

}
.modal-showcases-form-webform .form-type-select.webform-has-field-suffix label,
.modal-api-form-webform  .form-type-select.webform-has-field-suffix label
{
width: 100%;
}

.webform-progress-tracker .progress-step.is-active .progress-text .progress-title{
color: var( --webform-active);
}

.webform-progress-tracker .progress-step .progress-text .progress-title{
  color: var( --white_color);
}

/* bottoni */

.ui-dialog-buttonset.form-actions button{
    text-align: center;
    text-transform: uppercase;
    background-color: var( --yellow_color);
}
.ui-dialog-buttonset.form-actions button.cancell-class-btn{
    text-align: center;
    color: #000000;
    text-transform: uppercase;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    opacity: 1;
}


.ui-dialog-buttonset.form-actions .button .icon.glyphicon{
  display: none;
}

.ui-dialog-buttonset.form-actions button.cancell-class-btn{
  background: var(--button3-inactive-bg);
  border: solid var(--button3-inactive-border) 1px;
  color: var(--button3-inactive);

}
.ui-dialog-buttonset.form-actions button.cancell-class-btn:hover{
    background: var(--button3-hover-bg);
    border: solid var(--button3-hover-border) 1px;
    color: var(--button3-hover);
}
.ui-dialog-buttonset.form-actions button.cancell-class-btn:active{
  background: var(--button3-active-bg);
  border: solid var(--button3-active-border) 1px;
  color: var(--button3-active);

}

.ui-dialog-buttonset.form-actions button.draft-class-btn{
  background: var(--button1-inactive-bg);
  border: solid var(--button1-inactive-border) 1px;
  color: var(--button1-inactive);

}
.ui-dialog-buttonset.form-actions button.draft-class-btn:hover{
  background: var(--button1-hover-bg);
  border: solid var(--button1-hover-border) 1px;
  color: var(--button1-hover);

}
.ui-dialog-buttonset.form-actions button.draft-class-btn:active{
  background: var(--button1-active-bg);
  border: solid var(--button1-active-border) 1px;
  color: var(--button1-active);

}
.ui-dialog-buttonset.form-actions button.webform-button--next{
  background: var(--button1-inactive-bg);
  border: solid var(--button1-inactive-border) 1px;
  color: var(--button1-inactive);

}
.ui-dialog-buttonset.form-actions button.webform-button--next:hover{
  background: var(--button1-hover-bg);
  border: solid var(--button1-hover-border) 1px;
  color: var(--button1-hover);

}
.ui-dialog-buttonset.form-actions button.webform-button--next:active{
  background: var(--button1-active-bg);
  border: solid var(--button1-active-border) 1px;
  color: var(--button1-active);

}
.ui-dialog-buttonset.form-actions button.webform-button--submit{
  background: var(--button1-inactive-bg);
  border: solid var(--button1-inactive-border) 1px;
  color: var(--button1-inactive);

}
.ui-dialog-buttonset.form-actions button.webform-button--submit:hover{
  background: var(--button1-hover-bg);
  border: solid var(--button1-hover-border) 1px;
  color: var(--button1-hover);

}
.ui-dialog-buttonset.form-actions button.webform-button--submit:active{
  background: var(--button1-active-bg);
  border: solid var(--button1-active-border) 1px;
  color: var(--button1-active);

}
.ui-dialog-buttonset.form-actions button.webform-button--previous{
  background: var(--button1-inactive-bg);
  border: solid var(--button1-inactive-border) 1px;
  color: var(--button1-inactive);

}
.ui-dialog-buttonset.form-actions button.webform-button--previous:hover{
  background: var(--button1-hover-bg);
  border: solid var(--button1-hover-border) 1px;
  color: var(--button1-hover);

}
.ui-dialog-buttonset.form-actions button.webform-button--previous:active{
  background: var(--button1-active-bg);
  border: solid var(--button1-active-border) 1px;
  color: var(--button1-active);

}
.ui-dialog-buttonset.form-actions button.btn-secondary{
  background: transparent;
  border: solid black 1px;
  color: black;

}

 .ui-dialog-buttonset.form-actions button{
    width:140px;
    height: 48px;
    width: max-content;
    min-width: fit-content;
    max-width: max-content;
    height: 5.7vh;
    object-fit: contain;
    border-radius: 4px;
    background-color: var( --yellow_color);
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    min-width: 100px;
    text-align: center;
}

 .ui-dialog-titlebar{
  display: none;
}
/* ********************/
/* IMPROVE CHOOSEN UI */
/* ********************/

.modal-showcases-form-webform .form-item-used-e-api .chosen-container.chosen-container-multi,
.modal-showcases-form-webform .form-item-tag .chosen-container.chosen-container-multi,
.modal-api-form-webform .form-item-applications .chosen-container.chosen-container-multi,
.modal-api-form-webform .form-item-tag .chosen-container.chosen-container-multi,
.modal-api-form-webform .form-item-mercati .chosen-container.chosen-container-multi {
padding: 0px !important;
width: auto !important;
height: inherit !important;

}
.modal-showcases-form-webform .form-item-used-e-api .chosen-container.chosen-container-multi,
.modal-showcases-form-webform .form-item-tag .chosen-container,
.modal-api-form-webform .form-item-applications .chosen-container,
.modal-api-form-webform .form-item-tag .chosen-container{
max-width: 305px !important;
min-width: 100px !important;
}

.modal-api-form-webform .form-item {
	margin-top: 15px;
}


/* refinement grafici */
.modal-api-form-webform [data-webform-key="life_cycle"] .select-wrapper {
  width: 100%;
}
.modal-api-form-webform  [data-webform-key="usage_policies"] .select-wrapper {
  width: 100%;
}
.modal-api-form-webform  [data-webform-key="tecnical_detail"] .select-wrapper {
  width: fit-content;
}
.modal-api-form-webform  [data-webform-key="overview"] .select-wrapper {
  width: 50%;
}

.modal-showcases-form-webform .panel-title,
.webform-request-api .panel-title,
.modal-api-form-webform .panel-title{
font-weight: 700;
}
.modal-showcases-form-webform .panel-default > .panel-heading,
.webform-request-api .panel-default > .panel-heading,
.modal-api-form-webform .panel-default > .panel-heading{
background-color: transparent;
border-color: transparent;
  border: none;
}

.modal-api-form-webform [data-drupal-selector="edit-data-format-checkboxes"] > legend{
display: none;
}
.modal-api-form-webform [data-drupal-selector="edit-access-meachanism-checkboxes"] > legend{
display: none;
}
.modal-showcases-form-webform  .panel-default,
.modal-api-form-webform .panel-default {

  border: none;
}
.modal-api-form-webform [data-drupal-selector="edit-data-format-checkboxes"] .fieldset-wrapper > div
{display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 200px;
}
.modal-api-form-webform [data-drupal-selector="edit-data-format"] .panel-body
{
  padding-top: 0;
  padding-bottom: 0;
}

/* Request E-api */

/* .webform-request-api */

/* ############################################# */
.view-id-header_detail_api_.view-display-id-embed_mini_api .view-content{

  display: flex;
}

.view-id-header_detail_api_.view-display-id-embed_mini_api .view-content .views-row > div
{
display: inline-flex;
}
.header-request{
  height: 80px;
  display: flex;
  align-items: center;
  background: var(--webform-bg) 0% 0% no-repeat padding-box;

}
.view-id-header_detail_api_.view-display-id-embed_mini_api .view-content .views-row
 {
   /*   position: relative;
    right: -24vw; */

    width: fit-content;
    position: absolute;
    right: 0;
    top: -30px;
  }

  .webform-request-api .ui-front.ui-dialog-content.ui-widget-content{
   overflow-x: hidden;
    padding: 0em !important;
   }


.webform-submission-request-api-form{
  padding: 1em;
}

.header-request h2{
  color: var( --yellow_color);
}

.header-request h3{
color: var( --white_color);
}

.header-req-title{
  margin-left: 30px;
}
 .view-id-header_detail_api_.view-display-id-embed_mini_api
 .field-api-detail-mini-title a {
    color: var( --white_color);
  }

.webform-submission-request-api-form .form-item-title,
.webform-submission-request-api-form .form-item-api
{
  display: none;
}
.webform-submission-request-api-form {
  margin: auto;
}
.webform-submission-request-api-form .form-item{

  margin-left: 0;
/* margin-right: auto; */

width: 40vw;
}
/* .webform-request-api{

  height: 600px!important;
} */

.form-item-indications-about-integration-timeline,
.form-item-mockup,
.form-item-estimated-traffic,
.form-type-webform-document-file,
.form-item-showcase-name{
    margin-left: 0;
  width: 20vw !important;
}

 /* [data-webform-key="overview"]
{width: 40vw;
    margin: auto;
  } */

.webform-submission-request-api-form  [data-webform-key="overview"] {

width: 40vw;
	margin-left: 5%;
	margin-top: 3%;
}

.heade-name-api{
display: block;
    position: relative;
    margin-top: 15px;
}
#webform-submission-new-showcases-form-ajax{
  background: var(--webform-bg);
  overflow: hidden;
}


.webform-submission-form legend {
    margin-bottom: 0;
    font-weight: 700;
    display: block;
    width: 100%;
    padding: 0;
    border: none;
	font-size: 16px;
}

.webform-submission-form .form-required:after {
	display: none !important;
}