/* FLEX_LP-custom.css */

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(1080deg);
    }
}

.logo-spin {
	animation-name: spin;
	animation-duration: 3s;
	animation-iteration-count: 1;
}

/* :::::::[sidebar]::::::: */
.sidebar-body .row {margin-left: -30px; margin-right: -30px;}
.sidebar-body .block {padding-left: 30px;padding-right: 30px;}


/* :::::::[floating header]::::::: */
/* floating header | position controlled by toggle ("" | float-top) */
.float-top {
    position: absolute;
    top: 0;
    z-index: 1024;
    width: 100%;
    transition: ease background .3s;
}

/* floating header | hover state */
.float-top:hover {background: #fff;}

/* reverse logo colors when hovered */
#HEAD.float-top:hover svg.logo-white path {fill: #002843;}

/* :::::::[floating labels]::::::: */
/* requires mktoForm-floatingLabels.js (requires jQuery) */
/* requires Marketo form label setting set to "Above" (instead of "Left") */

/* underlined form fields */
body.floatingLabels-on form.mktoForm input[type=url], 
body.floatingLabels-on form.mktoForm input[type=text], 
body.floatingLabels-on form.mktoForm input[type=date], 
body.floatingLabels-on form.mktoForm input[type=tel], 
body.floatingLabels-on form.mktoForm input[type=email], 
body.floatingLabels-on form.mktoForm input[type=number], 
body.floatingLabels-on form.mktoForm textarea.mktoField, 
body.floatingLabels-on form.mktoForm select.mktoField {
    z-index: 0;
    padding:20px 0px 5px 8px !important;
}

/* overlay labels atop inputs */
body.floatingLabels-on form.mktoForm label.mktoLabel {
    font-weight: normal !important;
    font-size: 0.9em !important;
    z-index: 1 !important;
    position:absolute;
    margin-top:10px;
    transition:ease all .3s !important;
    margin-left:8px;
    padding-top: 0.5rem !important;
}

/* push labels above inputs when clicked / not-empty */
body.floatingLabels-on form.mktoForm label.mktoLabel.activeLabel {
    margin-top:0px;
    transition:ease all .3s !important;
    font-size:0.7em !important;
}
body.floatingLabels-on ::-moz-placeholder{color: transparent !important;}
body.floatingLabels-on ::-webkit-input-placeholder{color: transparent !important;}
body.floatingLabels-on :-ms-input-placeholder{color: transparent  !important;}
body.floatingLabels-on ::placeholder{color: transparent !important;}


/* EDIT Form Theme for "Labels Left" to account for stacked and unstacked layout */
/* define grid for labels-left to move error dialog below input */
/* media queries should be the SAME CSS */

form.mktoForm .mktoError {word-break: break-word;}
form.mktoForm.mktoLayoutLeft > div.mktoFormRow {
    display: block !important;
}
label#LblsubscriptionProductUpdatesLaunches {
    float:left !important;
    text-align: left !important;
}

form.mktoForm {
    padding-left: 10% !important;
    padding-right: 10% !important;
}

/* Pref Center Rows and Labels */
.mktoForm .mktoFieldWrap, .mktoForm .mktoFormCol, .mktoForm .mktoFormRow  {
    width: 100% !important;
    display: block !important;
}
	
.mktoForm .mktoFormRow  {
	border-top: 1px solid lightgray !important;
	padding-top: 16px;
	padding-bottom: 16px;
}

.mktoForm .mktoLabel {
    width: 100% !important;
    padding: 10px 0px 0px 0px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
	font-weight: normal !important;
	display: block !important;
	width: max-content !important;
	color: #33475b !important;
}

.mktoForm .mktoLabel > span {
	font-size: 14px !important;
}

div.mktoForm .mktoHtmlText {
    width: 100% !important;
}

form.mktoForm .mktoLogicalField.mktoCheckboxList {
    width: 100% !important;
}

form.mktoForm label.mktoLabel {
    max-width: calc(100% - 90px) !important;
}

/* Pref Center Custom Checkboxes and Toggles */
.mktoForm input[type="checkbox"].mktoField+label {
    position: relative  !important;
    width: 52px !important;
    height: 26px !important;
    border: 2px solid #D2D4DB !important;
    -webkit-border-radius: 3px !important;
    -moz-border-radius: 3px !important;
    -ms-border-radius: 3px !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    padding: 0 !important;
    float: right !important;
}
.mktoForm input[type="checkbox"].mktoField+label:before, .mktoForm input[type="checkbox"].mktoField+label:after {
    width: 45px !important;
    height: 100% !important;
    line-height: 26px !important;
    padding: 0 10px !important;
    float: right !important;
    text-align: center !important;
    border: none !important;
    color: #9194A0 !important;
    margin: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    background-color: transparent !important;
    font-weight: 500 !important;
    z-index: 1 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}
.mktoForm input[type="checkbox"].mktoField+label:before {
    content: '';
    left: 0;
    right: auto !important;
    border-top-left-radius: 3px !important;
    border-bottom-left-radius: 3px !important;
}
.mktoForm input[type="checkbox"].mktoField+label:after {
    content: '';
    right: 0 !important;
    left: auto !important;
    border-top-right-radius: 3px !important;
    border-bottom-right-radius: 3px !important;
}
.mktoForm input[type="checkbox"].mktoField+label .loaderImg {
    width: 26px;
    height: 36px;
    top: 0;
    right: 0;
    display: block;
    position: absolute;
    z-index: 99;
    -webkit-transition: all ease-in-out 350ms;
    -moz-transition: all ease-in-out 350ms;
    -ms-transition: all ease-in-out 350ms;
    transition: all ease-in-out 350ms;
    background-color: #fff;
    background-image: url('https://go.hashicorp.com/rs/845-ZLF-191/images/loaderGrey.gif');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
}
.mktoForm input[type="checkbox"].mktoField+label .toggleHandle {
    width: 26px !important;
    height: 26px !important;
    display: block !important;
    border-radius: 3px !important;
    background-color: #e0e0e0 !important;
    position: absolute !important;
    left: 0px !important;
    top: 0px !important;
    z-index: 99 !important;
    -webkit-transition: all ease-in-out 350ms;
    -moz-transition: all ease-in-out 350ms;
    -ms-transition: all ease-in-out 350ms;
    transition: all ease-in-out 350ms;
    -webkit-box-shadow: 1px 3px 2px 2px rgba(0,0,0,0.09);
    -moz-box-shadow: 1px 3px 2px 2px rgba(0,0,0,0.09);
    -ms-box-shadow: 1px 3px 2px 2px rgba(0,0,0,0.09);
    box-shadow: 1px 2px 3px 2px rgba(0,0,0,0.09);
}
.mktoForm input[type="checkbox"]:checked.mktoField+label {
    background-color: #002A4E !important;
    color: #fff !important;
    border-color: #002A4E !important;
}
.mktoForm input[type="checkbox"]:checked.mktoField+label::before {
    border: none !important;
    color: #fff !important;
    background-color: transparent !important;
}
.mktoForm input[type="checkbox"]:checked.mktoField+label::after {
    border: none !important;
    content: '';
    line-height: 26px !important;
    width: 45px !important;
    height: 100% !important;
    right: 0 !important;
    left: auto !important;;
    font-weight: 500 !important;
    color: #90939f !important;
    background-color: transparent !important;
}
.mktoForm input[type="checkbox"]:checked.mktoField+label .loaderImg {
    left: 0 !important;
    right: auto !important;
    background-color: #002A4E !important;
}
.mktoForm input[type="checkbox"]:checked.mktoField+label .toggleHandle {
    right: 0 !important;
    left: auto !important;
    top: 0 !important;
    -webkit-box-shadow: -1px 3px 2px 2px rgba(0,0,0,0.09);
    -moz-box-shadow: -1px 3px 2px 2px rgba(0,0,0,0.09);
    -ms-box-shadow: -1px 3px 2px 2px rgba(0,0,0,0.09);
    box-shadow: -1px 3px 2px 2px rgba(0,0,0,0.09);
}
.mktoForm input[type="checkbox"]:checked.mktoField+label .toggleHandle::after {
    content: '\f00c' !important;
    color: #002A4E !important;
    font-size: 14px !important;
	line-height: 26px !important;
	margin-left: 6px !important;
	font-family: "Font Awesome 5 Free" !important;
	font-weight: 700 !important;
    position: absolute !important;
}
	
/**/	
.mktoForm .mktoRadioList>label, .mktoForm .mktoCheckboxList>label {
    margin-left: 1.5em !important;
    margin-top: 0.1em !important;
    margin-bottom: 0.3em !important;
    line-height: 1.2em !important;
    display: block !important;
    min-height: 12px !important;
}
.mktoLogicalField.mktoCheckboxList.mktoHasWidth {
    width: 100% !important;
}
	
	
/**/
.mktoForm input[type="checkbox"].mktoField+label:after {
    right: 0 !important;
    top: 0 !important;
  left:unset !important;
}
.mktoLogicalField.mktoCheckboxList.mktoHasWidth {
    width: 100% !important;
    float: right !important;
}


.mktoForm .mktoOffset {
    display: none;
}

.mktoForm .mktoRadioList > label, .mktoForm .mktoCheckboxList > label {
    padding: 15px 0 0 0 !important;
    margin-left: 0 !important;
}
.mktoLogicalField.mktoCheckboxList.mktoHasWidth.mktoValid {
    opacity: 1 !important;
}
.mktoForm input[type="checkbox"]:checked.mktoField+label::after {
    right:0 !important;
    left:unset !important;
}
	
	
/*interactive toggles*/
.mktoForm input[type="checkbox"].mktoField+label:hover {
    background-color: #9194A0 !important;
    border-color: #9194A0 !important;
    color: #fff !important;
}
.mktoForm input[type="checkbox"]:checked.mktoField+label:hover {

border-color: #9194A0 !important;
background-color: #9194A0 !important;

}
	
/*limits width of buttons*/	
.mktoLogicalField.mktoCheckboxList.mktoHasWidth {
    width: auto !important;
    float: right !important;
}
.mktoForm input[type="checkbox"].mktoField+label {
    position: relative;
    width: 52px !important;
    height: 26px !important;
    border: 2px solid #D2D4DB !important;
    -webkit-border-radius: 3px !important;
    -moz-border-radius: 3px !important;
    -ms-border-radius: 3px !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    margin: 0;
    padding: 0;
    float: right !important; 
}
	
/*Off Toggle*/
.mktoForm input[type="checkbox"].mktoField+label:after  {
    width: 45px !important;
    height: 100% !important;
    line-height: 26px !important;
    padding: 0 10px !important;
    position: absolute !important;
    text-align: center !important;
    border: none !important;
    color: #9194A0 !important;
    margin: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    background-color: transparent !important;
    font-weight: 500
    z-index: 1 !important;
    font-weight: 600;
    font-size: 14px;
}	
/*On Toggle*/
.mktoForm input[type="checkbox"].mktoField+label:before  {
    width: 45px !important;
    height: 100% !important;
    line-height: 26px !important;
    padding: 0 10px !important;
    position: absolute !important;
    text-align: center !important;
    border: none !important;
    color: #9194A0;
    margin: 0;
    top: 0;
    bottom: 0;
    background-color: transparent !important;
    font-weight: 500;
    z-index: 1 !important;
    font-weight: 600;
    font-size: 14px;
}
	
	
.mktoForm label.mktoLabel.mktoHasWidth {
    width: calc(100% - 100px) !important;
    padding-right: 100px !important;
	text-align: left !important;
	padding-top: 0px !important;
}	
	
.mktoForm label {
   font-weight: bold;
   font-size: 20px;
}	

/* form button span container */
span.mktoButtonWrap.mktoNative {
    width: 100% !important;
}

input[type="checkbox"] {
    /* display: none !important; */
    float: right !important;
    z-index: -1 !important;
}input[type="checkbox"] {
    display: none !important;
}

/* ======================================================= */

@media screen and (min-width:576px) and (max-width:768px) {

    form.mktoForm.mktoLayoutLeft .mktoFieldWrap {
        display: grid !important;  
       /* grid-template-columns: 120px auto; */
        grid-gap:0 10px;
        grid-template-areas: 
            "a b"
            "c d";
    }
    form.mktoForm.mktoLayoutLeft label.mktoLabel {
        grid-area: a;
        text-align: left !important;
    }
    form.mktoForm.mktoLayoutLeft input,
    form.mktoForm.mktoLayoutLeft textarea,
    form.mktoForm.mktoLayoutLeft select,
    form.mktoForm .mktoLogicalField {
        grid-area: b;
    }
    form.mktoForm.mktoLayoutLeft .mktoError {
        grid-area: d;
    }

    /* floating labels AND labels left */
    body.floatingLabels-on form.mktoForm.mktoLayoutLeft input[type] {
        padding-top: 8px !important;
    }
    body.floatingLabels-on form.mktoForm.mktoLayoutLeft label.mktoLabel {
        margin-top: 10px !important;
        font-size: 0.9em !important;
        position: relative !important;
        min-width: 600px !important;
    }
    .mktoForm .mktoFormRow  {
        padding-top: 16px !important;
        padding-bottom: 30px !important;
    }
}

@media screen and (min-width:991px) {
/* define grid for labels-left to move error dialog below input */
    form.mktoForm.mktoLayoutLeft .mktoFieldWrap {
        display: grid !important;
       /* grid-template-columns: 120px auto; */
        grid-gap:0 10px;
        grid-template-areas: 
        "a b"
        "c d";
    }
    form.mktoForm.mktoLayoutLeft label.mktoLabel {
        grid-area: a;
        text-align: left !important;

    }
    form.mktoForm.mktoLayoutLeft input,
    form.mktoForm.mktoLayoutLeft textarea,
    form.mktoForm.mktoLayoutLeft select,
    form.mktoForm .mktoLogicalField {
        grid-area: b;
    }
    form.mktoForm.mktoLayoutLeft .mktoError {
        grid-area: d;
    }

    /* floating labels AND labels left */
    body.floatingLabels-on form.mktoForm.mktoLayoutLeft input[type] {
        padding-top: 8px !important;
    }
    body.floatingLabels-on form.mktoForm.mktoLayoutLeft label.mktoLabel {
        margin-top: 10px !important;
        font-size: 0.9em !important;
    }
    
    .mktoForm input[type="checkbox"].mktoField+label {
        position: relative;
        width: 52px !important;
        height: 26px !important;
        border: 2px solid #D2D4DB !important;
        -webkit-border-radius: 3px !important;
        -moz-border-radius: 3px !important;
        -ms-border-radius: 3px !important;
        border-radius: 3px !important;
        cursor: pointer !important;
        margin: 0;
        padding: 0;
        float: right !important; 
    }
}


/* :::::::[custom modules]::::::: */
/* text boxes */
.textBox-light {
    background-color: rgb(255 255 255 / 70%); 
}
.textBox-dark {
    background-color: rgb(0 0 0 / 70%); 
    color: #fff;
}
.textBox-dark a {
    color: #fff !important;
}
.textBox-bottom-left, .textBox-bottom-right {
    padding: 20px;
}
@media screen and (min-width:991px){
    .textBox-bottom-left {
      position: absolute;
      bottom:30px;
      left:30px;
      width:40%;
      min-height: 50%;
  }
  .textBox-bottom-right {
      position: absolute;
      bottom:30px;
      right:30px;
      width:40%;
      min-height: 50%;
  }
}

/* offset containers */
@media screen and (min-width:991px) {
 .offset-bottom-lg-300 {
     margin-bottom: -300px !important; /* bottom offset (desktop only) */
 }   
}