@charset "UTF-8";

.hline-bottom-select {
    padding-bottom: 10px;
    border-bottom: 2px solid #3232F1 !important /* whichever color you prefer */
}

.hline-bottom {
    padding-bottom: 10px;
    border-bottom: 2px solid #9191F7 !important /* whichever color you prefer */
}
.hline-bottom-padding {
    padding-bottom: 10px;
    border-bottom: 2px solid #9191F7 !important /* whichever color you prefer */
}
.hline-bottom-1px-padding {
    padding-bottom: 10px;
    border-bottom: 1px solid #9191F7 !important /* whichever color you prefer */
}
.hline-bottom-no-padding {
    border-bottom: 2px solid #9191F7 !important /* whichever color you prefer */
}
.hline-bottom-1px-no-padding {
    border-bottom: 1px solid #9191F7 !important /* whichever color you prefer */
}
.hline-bottom-normal {
    padding-bottom: 10px;
    border-bottom: 2px solid #9191F7 !important /* whichever color you prefer */
}

.hline-top-no-padding {
    border-top: 2px solid #9191F7 !important /* whichever color you prefer */
}
.hline-top-1px-no-padding {
    border-top: 1px solid #9191F7 !important /* whichever color you prefer */
}

.hline-top-padding {
    padding-top: 10px;
    border-top: 2px solid #9191F7 !important /* whichever color you prefer */
}
.hline-top-1px-padding {
    padding-top: 10px;
    border-top: 1px solid #9191F7 !important /* whichever color you prefer */
}

.smartass_basic_font {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 18px;
letter-spacing: 0.5px;
color: #9191F7;
opacity: 0.6;

}

.smartpass_menu_item {
cursor:pointer;
font-family: 'Space Grotesk';
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 16px;
text-align: center;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #8A8A99;
}

.smartpass_menu_item:hover {
background-color:#6262F4;
color: #FFFFFF;
}

/* see js for handling
.req-fin-bank-entry {
  background-color:#f18f01;
  color: #FFFFFF;
}

.req-fin-bank-entry:hover {
  background-color:#6262F4;
  color: #FFFFFF;
}
*/

.form .fa-search {
    top: 20px;
    left: 20px;
    color: #9ca3af
}

.form span {
    position: absolute;
    right: 17px;
    top: 13px;
    padding: 1px;
}

/** Date Calendar DatePicker */
.ui-datepicker {
    font-family: 'Space Grotesk';
    background: #3232F1;
    border: 1px solid #28286D;
    color: #EEE;
}

.ui-datepicker .ui-datepicker-title {
    font-family: 'Space Grotesk';
	margin: 0 2.3em;
	line-height: 1.8em;
	text-align: center;
    color:#FFFFFF;
    background:#28286D;
}

.ui-datepicker table {
	width: 100%;
	font-size: .7em;
	border-collapse: collapse;
	font-family: 'Space Grotesk';
	margin: 0 0 .4em;
    color:#FFFFFF;
    background:#3232F1;
}
/*This is date TD */
.ui-datepicker td {
	border: 0;
	background:#000000;
	padding: 1px;
}

/** SmartPass Card hover highlight. */
/** .et_pb_module.smartpass_card_clickable:hover{ */
.et_pb_module .et_pb_text_inner .smartpass_card_clickable:hover {
	border: 5px solid #9191F7;
}

/** Scrollable Div used within the SmartPass Details Modal view. */
/**  background-color: #fed9ff; width: 600px; height: 150px; text-align: center; */
div.scrollable {
  overflow-x: auto;
  overflow-y: auto;
  /*padding: 20px;*/
}

/* Hide scrollbar for Chrome, Safari and Opera */
.scrollable-nobars::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scrollable-nobars {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/** Modal Bootstrap used for right side details. */
 .modal.fade .modal-bottom,
 .modal.fade .modal-left,
 .modal.fade .modal-right,
 .modal.fade .modal-top {
     position: fixed;
	 /* position: absolute; */
     z-index: 4055;
     top: 20px;
     left: 0;
     right: 0;
     bottom: 0;
     margin: 0;
     max-width: 100%
 }

 .modal.fade .modal-right {
     left: auto !important;
     transform: translate3d(100%, 0, 0);
     transition: transform .3s cubic-bezier(.25, .8, .25, 1)
 }

 .modal.fade .modal-left {
     right: auto !important;
     transform: translate3d(-100%, 0, 0);
     transition: transform .3s cubic-bezier(.25, .8, .25, 1)
 }
 .modal.fade.show .modal-bottom,
 .modal.fade.show .modal-left,
 .modal.fade.show .modal-right,
 .modal.fade.show .modal-top {
     transform: translate3d(0, 0, 0)
 }

 
.w-sm {
     width: 200px
}

.w-md {
     width: 320px
}

.w-lg {
     width: 480px
} 

.w-xl {
     width: 640px
} 

 .modal-content,
 .modal-footer,
 .modal-header {
     border: none;
	 background-color: #050548;
 }

 .h-100 {
     height: 100% !important
 }

 .list-group.no-radius .list-group-item {
     border-radius: 0 !important
 }

 .btn-light {
     color: #212529;
     background-color: #f5f5f6;
     border-color: #f5f5f6
 }

 .btn-light:hover {
     color: #212529;
     background-color: #e1e1e4;
     border-color: #dadade
 }

 .modal-footer {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     padding: 1rem;
     border-top: 1px solid rgba(160, 175, 185, .15);
     border-bottom-right-radius: .3rem;
     border-bottom-left-radius: .3rem
 }

/** SmartPass Buttons for beatriz design. */
.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #3232F1 !important;
	text-transform: none;
	font-size: 14px;
    /* background-color: #632377 !important; */
    /* background-color: #8064A2 !important; */
    /* background-color: #AB59FC !important; */
}

.btn-transparent {
	background-color: transparent !important; 
}

/** Bootstrap input text field. */
.form-control {
    color: #FFFFFF !important;
	background-color: #28286D !important;
	/* background-color: #8064A2 !important; */
	border: 0px solid #3232F1 !important;
	border-radius: 2px !important;
}

/*
.smp-text-input {
  border: 0px solid #3232F1 !important;
  border-radius: 2px !important;
}
*/

/** placeholder text in an input text field. */
::placeholder {
	color: white !important;
	opacity: 0.5 !important;
	font-style: italic !important;
}
/*
.btn-primary {
        color: #FCFCFC;
        background-color: #AB59FC;
        border: 1px dashed #7B61FF;
        box-sizing: border-box;
        border-radius: 5px;
}
*/	
.spbtn-base {
    border: 1px dashed #7B61FF;
    box-sizing: border-box;
    border-radius: 5px;
}

.spbtn-base-text {
    font-family: Space Grotesk;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 0.5px;
    color: #FCFCFC;
}

.spbtn-primary-initial {
    background-color: #AB59FC;
    border-radius: 5px;
}
    
.spbtn-secondary-initial {
    background: #3232F1;
    border-radius: 5px;
}

.spbtn-subtle-initial {
    /* No background */
    border: 2px solid #AB59FC;
    border-radius: 5px;
}

.spbtn-textonly-initial {
    /* Link/Small */
    font-family: Space Grotesk;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    /* or 143% */
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 0.5px;
    text-decoration-line: underline;
    /* Primary/Lightest */
    color: #9191F7;
}

/* Shared, common properties button. */
/* not OO: .spbtn-base { */
.spbtn-primary-initial, .spbtn-secondary-initial, .spbtn-subtle-initial, .spbtn-textonly-initial {
    /* button common */
    border: 1px dashed #7B61FF;
    box-sizing: border-box;
    border-radius: 5px;
}

/* Shared, common properties button. */
.spbtn-primary-initial, .spbtn-secondary-initial, .spbtn-subtle-initial {
    /* Text common */
    font-family: Space Grotesk;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    align-items: center;
    text-align: center;
    letter-spacing: 0.5px;
    color: #FCFCFC;
}

/** For: style type="text/css" id="timeline_history" */
.history-tl-container{
  font-family: "Space Grotesk",sans-serif;
  width:50%;
  margin:auto;
  display:block;
  position:relative;
}

.history-tl2-container{
  font-family: "Space Grotesk",sans-serif;
  margin:auto;
  display:block;
  /*position:relative;*/
}

.history-tl2-container .time-card-circle::before{
    position: absolute;
    left: 10px;
    top: 115px;
    content: "";
    display: block;
    border: 8px solid rgba(255, 255, 255, 0.74);
    border-radius: 500%; /*makes circle*/
    background: #258CC7;
    height: 30px;
    width: 30px;
	z-index: 1000;
    transition: all 500ms ease-in-out;
}

.history-tl2-container .time-card-connector::before{
    position: absolute;
    left: 13px;
    top: 129px;
    content: "";
    display: block;
	border-top: 2px solid #28286D !important;
    border-radius: 0%; /*no circle*/
    /* background: #258CC7; */
    height: 20px;
    width: 85px;
    transition: all 500ms ease-in-out;
}

.history-tl-container ul.tl{
    margin:20px 0;
    padding:0;
    display:inline-block;
}
.history-tl-container ul.tl li{
    list-style: none;
    margin:auto;
    margin-left:240px;
    min-height:50px;
    /*background: rgba(255,255,0,0.1);*/
    border-left:1px dashed #86D6FF;
    /*border-top:1px dashed #86D6FF;*/
    padding:0 0 30px 30px;
    position:relative;
}
.history-tl-container ul.tl li:last-child{ border-left:0;}
.history-tl-container ul.tl li::before{
    position: absolute;
    left: -20px;
    top: -10px;
    content: "";
	display: block;
    border: 8px solid rgba(255, 255, 255, 0.74);
    border-radius: 500%; /*makes circle*/
    background: #258CC7;
    height: 30px;
    width: 30px;
    transition: all 500ms ease-in-out;
}
.history-tl-container ul.tl li:hover::before{
    border-color:  #258CC7;
    transition: all 1000ms ease-in-out;
}
ul.tl li .item-title{
}
ul.tl li .item-detail{
    color:rgba(0,0,0,0.5);
    font-size:12px;
}
ul.tl li .timestamp{
    color: #8D8D8D;
    position: absolute;
  	width: 200px;
  	left: -50%;
    text-align: right;
    font-size: 12px;
}
/** End history timeline */

/** style type="text/css" morris hover */
.morris-hover {
  position:absolute;
  z-index:1000;
}
.morris-hover.morris-default-style {
  border-radius:10px;
  padding:6px;
  color:#666;
  background:rgba(255, 255, 255, 0.8);
  border:solid 2px rgba(230, 230, 230, 0.8);
  font-family:sans-serif;
  font-size:12px;
  text-align:center;
}
.morris-hover.morris-default-style .morris-hover-row-label {
  font-weight:bold;
  margin:0.25em 0;
}
.morris-hover.morris-default-style .morris-hover-point {
  white-space:nowrap;
  margin:0.1em 0;
}
svg { width: 100%; }
/** End Morris hover */

/* Custom checkbox */
/* Does not work, so replace with better checkbox css */
.smp-checkbox {
    /*display: inline-flex;**/
    cursor: pointer;
    position: relative;
}

.smp-checkbox > input {
    height: 15px;
    width: 15px;
    border: 5px solid #34495E;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    border-radius: 4px;
    outline: none;
    transition-duration: 0.3s;
    background-color: #41B883;
    cursor: pointer;
  }

.smp-checkbox > input:active {
    border: 2px solid #34495E;
}
smp-checkbox