/*
  CSS specific to the Fact Sheet FlexForm

  ff_Group "nesting" resource: https://blog.logrocket.com/native-css-nesting/#:~:text=CSS%20nesting%20is%20the%20ability,them%20under%20a%20single%20selector
*/

:root {
  --Flx-Font-Family: Inter, -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
  --Flx-Page-Y: 80px !important;
  --Flx-Page-BG: #fbfaff;
  --Flx-Header-BG:#683ab8;
  --Flx-Border-BG:#f012be;
  --Flx-Form-Border:#683ab833;
  --Flx-Form-Border-Bot:#683ab811;
  --Flx-Form-BG:white;
  --Flx-Section-BG: #f12ec3;
  --Flx-Section-FG: white;
  --Flx-Section-WBG: #f5f2fa;
  --Flx-Btn-BG: #683ab8 ;
  --Flx-Btn-FG: white;
  --Flx-Btn-HV: #f12ec3;
  --Flx-Hint-BG: #f12ec322;
  --Flx-Hint-BR: #683ab833;
  --Flx-Label-Size: 1.3em;
  --Flx-Label-FG: black;
  --Flx-Required-BG:#f012beAA;
  --iR-TLIcon-Size:3em;
  --Flx-Radius-Size: 50px;
  --BzRv-Color-Review: #7209B7;
} 

* {
  font-family: var(--Flx-Font-Family);
}

html, body {
  background-color: var(--Flx-Page-BG) !important;
  position: fixed !important;
  height: 99.5vh !important;
}


.Flx_SearchForm .Flx_Form_Before {
  margin-top: 0px !important;
  padding: 75px 0px 10px 0px;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  width: 80vw;
}


.Flx_SearchForm .Flx_Form {
  margin-top: -10px !important;
  width: 98vw;
  background-color: transparent;
  box-shadow: 3px 0px 6px -5px #00000055, -3px 7px 6px -5px #00000055;
} 

.Flx_SearchForm .SearchBox {
  padding: 0px 50px 30px 50px;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--Flx-Form-BG);
}

.Flx_SearchForm .ResultsBox {
  margin-top: 25px;
  background-color: var(--Flx-Form-BG);
  width: 100vw;
}



.Flx_Page {
  margin-top: -15px;
  position: absolute;
  width: 100%;
  height: calc(100vh - 129px) !important;
  background-color: var(--Flx-Page-BG) !important;
}

.Flx_Page:before {
  content: "";
  position: fixed;
  top: -35px;
  left: -5px;
  width: 100vw;
  height: 100px;
  box-shadow: 0px 5px 5px -5px #000000;
  border-bottom-right-radius: var(--Flx-Radius-Size);
  background-color: #f2F2f2;
  z-index: 100;
  overflow: hidden;
}  


.Flx_MstrTvlAuth .Flx_Form_Before {
  margin-top: 0px !important;
  padding: 75px 15px 50px 20px;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}


.Flx_MstrTvlAuth .Flx_Form {
  margin-top: -10px !important;
  padding: 0px 15px 50px 20px;
  max-width: 1280px;
  width: calc(100vw - (var(--Flx-Radius-Size) * 2.5));
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;
  background-color: var(--Flx-Form-BG);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-radius: var(--Flx-Radius-Size);
  box-shadow: 3px 0px 6px -5px #00000055, -3px 7px 6px -5px #00000055;
} 

.Flx_Header {
  display: block;
  overflow: visible !important;
  position: relative;
  background-color: var(--Flx-Header-BG);
  border-left: 10px solid var(--Flx-Border-BG);
  border-right: 10px solid #00000033;
  border-bottom-left-radius: var(--Flx-Radius-Size);
  border-bottom-right-radius: var(--Flx-Radius-Size);
  border-top-right-radius: var(--Flx-Radius-Size);
  border-top-left-radius: var(--Flx-Radius-Size);
  box-shadow: inset -5px 0px 5px -5px #00000000, inset 2px 0px 2px 0px #00000055, 5px 5px 5px -5px #000000;
  height: 90px;
  margin-top: 18px;
  margin-left: 25px;
  min-width: 300px;
  width: 30vw;
  z-index: 200;
}  

.TI_Logo {
  position:fixed; 
  right: 50px; 
  width: 150px; 
  z-index: 150;
  top: 15px;
  --filter: hue-rotate(78deg) brightness(1);
}


#Flx_Logo {
  background-color: RGBA(255, 255, 255, 1);
  padding: 5px 15px 5px 15px;
  border-radius: 25px;
  opacity: .95;
  max-width: 200px;
  height: 60px;
  margin-left: 20px;
  margin-top: 7px;
  object-fit: scale-down;
}



.Flx_AppName  {
  font-weight: 600;
  font-size: 1.4em;
  text-align: left;
  margin: 0;
  position: absolute;
  top:0px;
  left: 0px;
  color: transparent !important;
  height: 100%;
  width: 100%;
}

.Flx_AppName:before  {
  content: "iRequest";
  position: absolute;
  top: -30px;
  left: 160px;
  font-size: 5em;
  width: 119%;
  height: 134%;
  color: #fde3f708;
  border-radius: var(--Flx-Radius-Size);
  overflow: hidden;
}  

.btnFlxHolder {
  --border-top-right-radius: var(--Flx-Radius-Size);
  --margin-left: -5px;
}

.Flx_Section_Wrap {
  margin: 50px 0 10px 0;
  position: relative;
  background-color: transparent; 
  border-radius: var(--Flx-Radius-Size);
  width: calc(100% + (var(--Flx-Radius-Size) * 2));
  transform: translateX(calc(var(--Flx-Radius-Size) * -1));
  order-top: 1px var(--Flx-Form-Border) solid;
  order-left: 1px var(--Flx-Form-Border) solid;
  order-right: 1px var(--Flx-Form-Border) solid;
  order-bottom: 1px #00000011 solid;
  box-shadow: inset -1px 2px 4px 0px #00000033;
  background-color: var(--Flx-Section-WBG);
}

.Flx_Section  {
  margin: 0px;
  padding:.5em 1em;
  width: 30%;
  background-color: var(--Flx-Section-BG);
  border-radius: var(--Flx-Radius-Size);
  font-size: 1.2em !important;
  font-weight: 600;
  color: var(--Flx-Section-FG);
  box-shadow: inset 2px 0px 2px -1px #00000088;
  border-left:5px solid #683ab8;
  border-right:5px solid #ffffff55;
  min-width: 250px;
}

.Flx_Section .material-symbols-outlined {
  text-shadow: 0px -1px 1px #000000AA;
}

.Flx_Hint {
  margin-top:40px !important;
  margin-bottom:10px !important;
  background-color: var(--Flx-Hint-BG);
  padding:10px;
  --border: 1px solid var(--Flx-Hint-BR);
  border-radius: 6px;
  border-left: 10px #00000033 solid;
  padding-left: 15px;

  & img {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    vertical-align: text-top;
    transform: translateX(-5px);
  }
}

.Flx_Hint .material-symbols-outlined {
  font-weight: 600;
  margin-right: 5px;
}

.Bind .BindLbl {
  font-size: var(--Flx-Label-Size) !important;
  color: var(--Flx-Label-FG) !important;
  font-weight: 400 !important;
}

.BindSubLbl {
  display: flex;
  align-items: center;
  line-height: 2em;
}


 opacity: .9;
}  

.BindFld.qm_Textarea {
  height: fit-content !important;
  max-height: 300px;
  min-height: 100px;
  overflow: auto;
}


.FlexForm_Container {
  overflow: auto;
  height: 100vh;
}


.BindFld.ff_Textarea {
  height: fit-content !important;
  max-height: 300px; 
  min-height: 100px;
  overflow: auto;
}

.Bind .FlxSvrField.row {
  margin-bottom: 25px;
}




.ff_SvrField .BindFldCont  {
  width: 200px !important;
  display: inline-block;
}

.ff_SvrField .BindFldSubLabel {
  display: inline-block;
  margin-left: 15px;
}

.ff_Group {
  position: relative;
  width: 95vw;
  vertical-align: middle;

  .BindCont {
    display: inline-flex !important;
    min-width: 45vw !important;
  }

  & input {
    width: 50vw !important;
  }
}


.btn {
  background-color: var(--Flx-Btn-BG) !important;
  color: var(--Flx-Btn-FG) !important;
}

.btn:hover {
    background-color: var(--Flx-Btn-HV) !important;
}

#AJAXReults {
  padding: 25px;
}




.BindReq .BindFldReq:after {
  border-bottom-color: var(--Flx-Required-BG) !important;
}


.datepicker-date-display {
  background-color: #6936F5 !important;
}

.datepicker-cancel, .datepicker-done, td.is-today, .select-dropdown span {
  color: #6936F5 !important;
}

.datepicker-table td.is-selected {
  background-color: #6936F5;
  color: #fff;
}

.iRequestTimeLine {
  margin-left: auto;
  margin-right: auto;
  margin: 0px 50px;
}

.iRequestTimeLine .material-symbols-outlined {
  font-size: var(--iR-TLIcon-Size);
  vertical-align: middle;
}

.iRequestTimeLine .iR-TLIcon,.iRequestTimeLine .iR-TL6 {
  position: relative;
  color:#00000033;
  width: 19% !important;
}
.iRequestTimeLine .iR-TL6 {
  width: 5% !important;
}

.iRequestTimeLine .iR-TLIcon.iR-Active {
   color:#f012be;
}


.iRequestTimeLine .iR-TLIcon.iR-Done {
   color:#6936F533;
}

.iRequestTimeLine .iR-TLIcon.iR-Link {
   color:#03a4e9;
}


.iRequestTimeLine .iR-TLIcon:after {
  content: attr(data-ddt);
  position: absolute;
  padding-left: 10px;
  padding-bottom: 15px;
  left: calc(var(--iR-TLIcon-Size) + 1.3em);
  top:calc((var(--iR-TLIcon-Size) / 2) - 8px);
  width: calc(100% - var(--iR-TLIcon-Size) - 1.5em );
  height: 1px;
  border-bottom: 1px dotted #CCC;
  font-size: .7em;
  color: #6936F588;
  font-weight: 600;
}



.iRequestTimeLine .iR-Done.iR-TLIcon:after {
  border-bottom-color: #6936F566;
}

.iRequestTimeLine .iR-TL6:after {
  width: 22% !important;
  border-bottom: none;
}


 .iRequestTimeLine .iR-TL1:before
,.iRequestTimeLine .iR-TL2:before
,.iRequestTimeLine .iR-TL3:before
,.iRequestTimeLine .iR-TL4:before
,.iRequestTimeLine .iR-TL5:before
,.iRequestTimeLine .iR-TL6:before {
  content:"";
  position: absolute;
  left: calc(((100% - var(--iR-TLIcon-Size)) / 2.5) * -1);
  width: calc(100% - var(--iR-TLIcon-Size));
  top:calc(var(--iR-TLIcon-Size) + 5px);
  color:#CCC;
  font-size: .9em;
  white-space: pre;
  text-align: center;
}  

.iRequestTimeLine .iR-TLIcon.iR-Active:before {
   color:#f012be;
   font-weight: 600;
}




.iRequestTimeLine .iR-TLIcon.iR-Done:before {
   color:#6936F588;
}

.iRequestTimeLine .iR-TLIcon.iR-Link:before {
   color:#03a4e9;
   text-decoration: underline;
   text-decoration-color: #03a4e955;
   text-decoration-style: dashed;
}

.iRequestTimeLine:hover .iR-TLIcon.iR-Link:before {
  background-color: #03a4e911;
  border-radius: 10px;
}  



 .iRequestTimeLine .iR-TL1:before
,.iRequestTimeLine .iR-TL2:before 
,.iRequestTimeLine .iR-TL3:before 
,.iRequestTimeLine .iR-TL4:before 
,.iRequestTimeLine .iR-TL5:before 
,.iRequestTimeLine .iR-TL6:before 
{
  content:attr(data-content);
}

/*
.iRequestTimeLine .iR-TL1:before {
  content:"Making\A Request";
}  
.iRequestTimeLine .iR-Done.iR-TL1:before {
  content:"Request\A Submitted";
}


.iRequestTimeLine .iR-TL2:before {
  content:"Request\A Queued";
}  
.iRequestTimeLine .iR-Active.iR-TL2:before {
  content:"Processing\A Request";
}  
.iRequestTimeLine .iR-Done.iR-TL2:before {
  content:"Processing\A Complete";
}    


.iRequestTimeLine .iR-TL3:before {
  content:"Awaiting \A Traveler";
}  
.iRequestTimeLine .iR-Done.iR-TL3:before {
  content:"Traveler\A Called";
}  


.iRequestTimeLine .iR-TL4:before {
  content:"Booking";
}  
.iRequestTimeLine .iR-Active.iR-TL4:before {
  content:attr(data-content);
}  
.iRequestTimeLine .iR-Done.iR-TL4:before {
  content:"Booking\A Complete";
}  

.iRequestTimeLine .iR-TL5:before {
  content:"eItinerary";
}  
.iRequestTimeLine .iR-Active.iR-TL5:before {
  content:"eItinerary\A Processing";
}  
.iRequestTimeLine .iR-Done.iR-TL5:before {
  content:"eItinerary\A Ready";
} 

 
.iRequestTimeLine .iR-Active.iR-TL6:before {
  content:"Trip In\A Progress";
}  
*/

.iRequestTimeLine .iR-TL6:before {
  --content:"Departure\A" attr(data-departure) "\A" attr(data-time);
  width: calc(170% - var(--iR-TLIcon-Size));
} 
.iRequestTimeLine .iR-Done.iR-TL6:before {
  --content:"Trip\A Complete";
  color:#f012be;
} 
.iRequestTimeLine .iR-Done.iR-TL6 {
  color:#f012be !important;
} 



@media only screen and (max-width: 601px) {
  
  .Flx_Form {
    width: calc(100vw - (var(--Flx-Radius-Size) * 1.2));
  }

  .Flx_Section_Wrap {
    width: calc(100% + (var(--Flx-Radius-Size)));
    transform: translateX(calc(var(--Flx-Radius-Size) * -.4));
  }

    .iRequestTimeLine .iR-TL1:before
  , .iRequestTimeLine .iR-TL2:before
  , .iRequestTimeLine .iR-TL3:before
  , .iRequestTimeLine .iR-TL4:before
  , .iRequestTimeLine .iR-TL5:before
  , .iRequestTimeLine .iR-TL6:before {
      left: calc(((100% - var(--iR-TLIcon-Size)) / 345)* -1);
      font-size: .6em;
      top: calc(var(--iR-TLIcon-Size) + 21px);
      font-weight: 600;
  }

  .Bind .BindLbl {
    font-weight: 600 !important;
  }

  .iRequestTimeLine {
    margin: 0px 10px;
    margin-right: 0px 20px;
  }

} 


*:not(.choices__list,.modal,.BindFld), *:before, *:after {
  box-shadow: none !important;
}


.Flx_SearchForm .ResultsBox {
  margin-left: 5vw;
  margin-right: 5vw;
  width: 90vw;
  padding: 10px;
  border-radius: 10px;
}

.Flx_SearchForm .ResultsBox .DTblG-Table {
  height: calc(100vh - 375px);
}


.Flx_SearchForm .Flx_Page {
    margin-top: -15px;
    position: absolute;
    width: 100%;
    height: calc(100vh - 25px) !important;
    background-color: var(--Flx-Page-BG) !important;
}

.btnAddPos {
  position: absolute;
  margin-left: 5vw;
  margin-top:  15px;
}


.DeclineNotebox {
    position: absolute;
    margin-top: 65px !important;
    
    max-width: 50%;
    right: 0px;
    z-index: 10;
}   

.DeclineNotebox .DeclineNote {
  background-color: #FDE3F7;
  position: relative;
  padding: 10px !important;
  border-radius: 5px;
  max-height: 75px;
  text-align: right;
  overflow: auto;
  border-left: 10px #00000033 solid;
}     

.ProfileGroupEV {
  border-top:1px solid #CCC;
  padding-top:20px;
}

.Bind .BindLbl.BindWrap {
  white-space: nowrap !important;
}