/* PURPOSE:
  1. PROVIDE FOR CONSISTENT CONTENT WIDTHS FOR ALL CONTENT PAGES
  2. PROVIDE CONSISTENT STYLING FOR ALL SERVICE PAGES
*/


/************************************/
/*  .service-page-title-html-style  */
/************************************/

.service-page-title-html-style { 
  display: flex;
  text-align: left;
  align-items: center;
  
}

/************************************/
/*  .service-page-title-div-style  */
/************************************/

.service-page-title-div-style { 
  display: flex;
  color: white;
  font-family: "Myriad-Pro-Bold";
  padding-top: 1rem;
  padding-bottom: 0px;
  flex: 1;
}

/*****************************************/
/*  .service-horizontal-line-html-style  */
/*****************************************/

/* common */

.service-horizontal-line-html-style { 
  display: flex;
  border-width: 5vh;
  height: 5px !important;
  opacity: unset;
  border-radius: 2px;
  margin-top: 0px;
  margin-bottom: 16px;
}

.about-horizontal-line-color { 
  background-image: linear-gradient(to right,rgba(233,195,30,1), black);
}

.contact-horizontal-line-color { 
  background-image: linear-gradient(to right,rgba(38,236,34,0.65), black);
}

/* projects */

.project-management-horizontal-line-color { 
  background-image: linear-gradient(to right,rgba(38,236,34,0.65), black);
}

.business-development-horizontal-line-color { 
  background-image: linear-gradient(to right,rgba(159,30,233,0.65), black);
}

.project-advisory-horizontal-line-color { 
  background-image: linear-gradient(to right,rgba(226,101,43,1), black);
}

.support-services-horizontal-line-color { 
  background-image: linear-gradient(to right,rgba(236,34,39,0.65), black);
}

.portfolio-horizontal-line-color { 
  background-image: linear-gradient(to right,rgba(43,172,226,1), black);
}

/* analytics */

.what-is-petrinex-horizontal-line-color { 
  background-image: linear-gradient(to right,rgba(43,172,226,1), black);
}

.what-we-do-horizontal-line-color { 
  background-image: linear-gradient(to right,rgba(38,236,34,0.65), black);
}

.data-horizontal-line-color { 
  background-image: linear-gradient(to right,rgba(159,30,233,0.65), black);
}

.use-cases-horizontal-line-color { 
  background-image: linear-gradient(to right,rgba(226,101,43,1), black);
}

.customer-id-infrastructure-analysis-horizontal-line-color { 
  background-image: linear-gradient(to right,rgba(43,172,226,1), black);
}

.market-quantification-horizontal-line-color { 
  background-image: linear-gradient(to right,rgba(38,236,34,0.65), black);
}

.measurement-compliance-intelligence-horizontal-line-color { 
  background-image: linear-gradient(to right,rgba(159,30,233,0.65), black);
}

.custom-analytics-horizontal-line-color { 
  background-image: linear-gradient(to right,rgba(226,101,43,1), black);
}

.alberta-sour-wells-horizontal-line-color { 
  background-image: linear-gradient(to right,rgba(226,101,43,1), black);
}

.alberta-rec-ratios-horizontal-line-color { 
  background-image: linear-gradient(to right,rgba(43,172,226,1), black);
}

.alberta-pipeline-incidents-horizontal-line-color { 
  background-image: linear-gradient(to right,rgba(38,236,34,0.65), black);
}

/*********************************************/
/*  .service-page-horizontal-line-div-style  */
/*********************************************/

.service-page-horizontal-line-div-style { 
  display: flex;
  padding-top: 0px;
  padding-bottom: 1rem !important;
  flex: 1;
}

/*********************************************/
/*  .service-html-style                      */
/*********************************************/

.service-html-style {
  display: block; /* this was required to make the dcc.Link stay where it is supposed to be */
  text-align: left;
  align-items: top;
  color: white !important;
  
  /*width: 100% !important;*/
}

/*********************************************/
/*  .service-div-style         */
/*********************************************/

.service-div-style { 
  display: flex;
  font-family: "Roboto-Local-Light";
  background-color: rgba(255, 255, 255, 0.05);
  /* flex: 1; */
  max-width: 100%; /* this prevents Dash DataTables from forcing flex-box larger */
}

/*********************************************/
/*  .datatable-div-style         */
/*********************************************/

.datatable-div-style { 
  display: block;
  background-color: rgba(255, 255, 255, 0.05);
  max-width: 100%; /* this prevents Dash DataTables from forcing flex-box larger */
}

/*********************************************/
/*  .service-accordion-style         */
/*********************************************/

.service-accordion-style { 
  /* display: flex;*/
  font-family: "Roboto-Local-Light";
  background-color: rgba(255, 255, 255, 0.01);
  max-width: 100%; /* this prevents Dash DataTables from forcing flex-box larger */
}

/*********************************************/
/*  CUSTOM ACCORDION FONT SIZING         */
/*********************************************/

.accordion-button {
  font-size: 1.25rem;
}
/*
.accordion-button:not(.collapsed) {
  font-size: 1.25rem;
}
*/
/*********************************************/
/*  .service-description-style         */
/*********************************************/

.service-description-style {
  display: flex;
  font-family: "Myriad-Pro-Light";
  font-size: 1.3rem;
  
  /*flex-basis: 0;
  flex-grow: 4;*/
}

/*********************************************/
/*  .service-page-style         */
/*********************************************/

.service-page-style { /* this is the default settings for the html.P block that holds the title banner */
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 8px;  
}

/*********************************************/
/*  .about-text-portrait-box         */
/*********************************************/

.about-text-portrait-box { /* this is the default settings for the html.P block that holds the title banner */
  display: flex;
  align-items: center;
  flex-direction: row;
  /* flex-flow: nowrap */
}

/* USE CASE CARDS */

/*********************************************/
/*  .use-case-card-title
/*********************************************/

.use-case-card-title-html {
  font-family: "Myriad-Pro-Bold";
  color: white;
  margin: 10px;
}

.use-case-card-title-div {
  display: flex;
  flex: 1;
}

/*********************************************/
/*  .use-case-card-description
/*********************************************/

.use-case-card-description-html {
  font-family: "Myriad-Pro-Light";
  /* font-size: calc(1.1rem + 1.1vw); */
  font-size: calc(1.1rem + 0.5vw);
  font-weight: 300;
  line-height: 1.2;
  color: white;
  margin: 10px;
}

.use-case-card-description-div {
  display: flex;
  flex: 3;
}

/*********************************************/
/*  .use-case-card-button
/*********************************************/

.use-case-card-button {
  width: 100%;
  height: 40px;
  color: white;
  justify-content: center;
  background-color: rgb(13,110,253);
  text-decoration: none;
  border: none;
  border-radius: 5px;
  margin: 0px;
  padding: 0px;
}

.use-case-card-button-a {
  text-decoration: none;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

.use-case-card-button-div {
  display: flex;
  width: 100%;
  justify-content: center;
  /* flex: 1; */
  padding: 10px;
}

.use-case-card-body {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;  
  padding: 0px;
  flex: 1;
}



/*********************************************/
/*  .use-case-card
/*********************************************/

.use-case-card-div {
  display: flex;
  width: 48%;
  /* height: 375px; */
  /* height: auto; */
  /* background-color: rgba(255, 255, 255, 0.05); */
  background-color: transparent;
  border: 1px solid white;
  flex-flow: column nowrap;
  border-radius: 5px;

  /* flex: 1; */
}

.use-case-card-div img {
  /* width: 100%; */
  object-fit: cover;
  height: 200px;
}

/*********************************************/
/*  .use-case-card-container
/*********************************************/

.use-case-card-container {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-flow: row wrap;
  width: 100%;
  column-gap: 15px;
  row-gap: 15px;
  
}



/***********
/ mods
/***********/

@media screen and (max-width: 750px) {
  .about-text-portrait-box {
    flex-direction: column;
  }

  .use-case-card-div {
    width: 95%;
    /* height: 275px; */
  }

  .use-case-card-container {

    flex-direction: column;
    flex-wrap: nowrap;
    column-gap: 5px;
    row-gap: 5px;
  }


}