/*microsoft chatbot css*/
.floating-window .btn-chat#toggleButton2 {
    color: #1c8285;
    background-color: #fff;
    border-color: #1c8285;
}
img.ac-image.ac-selectable {
    filter: grayscale(1) brightness(3) !important;
}
#chatWindow .webchat__bubble__content a img {
    filter: brightness(10) !important;
}
.ac-textBlock p {
	color: #fff !important;
}
img.s-chaticon {
    max-width: 8%;
    padding: 6px 5px 5px 0;
}
#chatWindow .webchat__bubble__content a {
    color: #fff;
    text-decoration: underline;
}
#chatWindow .webchat__bubble__content a img {
    vertical-align: baseline;
}
.otgs-development-site-front-end,
.hide {
	display:none;
}
#btn-chat-container{
	display: flex;
	place-content: center space-between;
  align-items: center;
	position: fixed;
  top: 196px;
	right: 30px;
	width: 100%;
	max-width: 400px;
	background-color: #353838;
	border-radius: 15px 15px 0 0;
	box-shadow: rgb(0 0 0 / 20%) 0px 15px 20px, rgb(0 0 0 / 10%) 0px 6px 6px;
	background-color: #181818;
}
#btn_close_chat,
#chat-title {
	top: 196px;
	right: 30px;
  transition: all 150ms;
/* 	display: block; */
  width: 100%;
	border: none;
	line-height: 2;
	color: #fff;
}
#chat-title {
	text-align: left;
	padding-left: 4%;
	max-width: 79%;
}
#btn_close_chat {
	text-align: right;
	padding-right: 3%;
	cursor: pointer;
	max-width: 21%;
	color: #878787;
	border-radius: 0 15px 0 0;
	background: 
      linear-gradient(currentColor 0 0) 
      0 100% /var(--d, 0) 2px 
    no-repeat;
  transition:0.5s;
	border-left: 2px solid #292929;
	background-color: #181818;
}
#btn_close_chat:hover {
	--d: 100%;
	color:#fff;
}
#webchat,
#chatWindow {
	z-index: 99999;	
}
#webchat {
	position: fixed;
	height: calc(100% - 260px);
	width: 400px;
	top: 230px;
	overflow: hidden;
	right: 30px;
	border-radius: 0 0 15px 15px;
	border-top: 2px solid #000;
	box-shadow: inset 0px 1px 3px rgb(100 100 100 / 50%);
	box-shadow: 0px 0px 12px rgb(111 109 109 / 50%);
}
/* The popup chat - hidden by default */
#chatWindow {
	visibility: hidden;
	transition: visibility 1s, opacity 0.5s ease-out;
	opacity: 0;	
  }
#chatWindow.close_chat {
	visibility: visible;
	opacity: 1;
	transition: visibility 0s, opacity 0.5s ease-in;
}
@media (max-width: 1024.98px) {
	#webchat,
	#btn_close_chat,
	#btn-chat-container {
		border-radius: 0;
	}
	#webchat {
		top: 44px;
		transform: translateX(50%);
		right: 50%;
		height: calc(85vh - 44px);
		width: 100vw;
		max-width: 100%;
	}
	#chat-title {
		max-width: 75%;
	}
	#btn_close_chat {
		top: 0;
		right: 0;
		line-height: 3;
		max-width: 25%;
		padding: 0;
    text-align: center;
	}
	.floating-window {
    display: block !important;
	}
	#toggleButton2 {
    float: right;
	}
	#btn-chat-container {
    top: 0;
		right: 0;
		max-width: 100%;
	}
}
/*end of microsoft chatbot*/

/* Custom css for CRM form */
form #nbi-crm label {
    color: #222;
    font-weight: normal;
	text-align: left;
}
form #nbi-crm .hide-label {
    display: none;
}

form #nbi-crm div.lp-radioButtonsContainer {
    width: 100%;
}

form #nbi-crm input[type="radio"]+label {
    padding-left: 28px;
}

form #nbi-crm span.radioContainer {
    flex-direction: row;
    box-sizing: border-box;
    display: flex;
    place-content: center space-between;
    align-items: center;
}

/* Inputs (selectors for all inputs)  */
form #nbi-crm input-text,
form #nbi-crm input[type=text],
form #nbi-crm input[type=input],
form #nbi-crm input[type=password],
form #nbi-crm input[type=email],
form #nbi-crm input[type=number],
form #nbi-crm input[type=url],
form #nbi-crm input[type=tel],
form #nbi-crm input[type=search],
form #nbi-crm select {
    display: block;
    width: 100%;
    height: calc(1.6em + 1.6rem + 4px);
    padding: 0.8rem 0.75rem;
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.6;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 2px solid #d0d0d0;
    border-radius: 6px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    margin-bottom: 1rem;
}

form #nbi-crm input[type=text].lookup-behavior {
    background-position-x: 98%;
}

form #nbi-crm button[type='submit'] {
    background-color: #1C8285;
    display: inline-block;
    font-weight: 600;
    color: #fff;
    vertical-align: middle;
    user-select: none;
    border: 2px solid transparent;
    padding: 0.8rem 2.5rem;
    font-size: 1.25rem;
    line-height: 1.6;
    border-radius: 2rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    display: block;
    margin: 0 auto;
}

form #nbi-crm .lp-form-fieldInput.lookup-behavior {
    border: none;
}

/* custom radio and checkbox */
form .checkbox-left-row-aligned {
    height: 100%;
    flex-direction: row;
    box-sizing: border-box;
    display: flex;
    place-content: center flex-start;
    align-items: center;
}
form .checkbox-left-row-aligned span.lp-checkboxListItem {
    margin: 0 2% 3% 0;
}
form #nbi-crm .lp-required {
    color: #4A4A4A;
}
form #nbi-crm input[type="radio"],
form #nbi-crm input[type="checkbox"] {
    opacity: 0;
}

form #nbi-crm input[type="radio"] {
    width: 100%;
    margin-right: 0;
}

form #nbi-crm input[type="radio"]+label,
form #nbi-crm input[type="checkbox"]+label {
    position: relative;
    cursor: pointer;
}

form #nbi-crm input[type="checkbox"]+label {
    display: block;
    margin-left: 35px;
    margin-top: -21px;
}

form #nbi-crm input[type="radio"]+label::before,
form #nbi-crm input[type="checkbox"]+label::before {
    content: "";
    position: absolute;
    -webkit-transition: .25s all ease;
    -o-transition: .25s all ease;
    transition: .25s all ease;
    border: 2px solid #b2b2b2;
    width: 25px;
    height: 25px;
}

form #nbi-crm input[type="radio"]+label::before,
form #nbi-crm input[type="radio"]+label::after {
    left: -3px;
    top: -2px;
}

form #nbi-crm input[type="checkbox"]+label::before {
    left: -35px;
}

form #nbi-crm input[type="radio"]+label::after,
form #nbi-crm input[type="checkbox"]+label::after {
    content: "";
    position: absolute;
    width: 25px;
    height: 25px;
    -webkit-transition: .25s all ease;
    -o-transition: .25s all ease;
    transition: .25s all ease;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}

form #nbi-crm input[type="checkbox"]+label::after {
    left: -35px;
    top: 0;
}
form #nbi-crm input[type="checkbox"]+label:lang(fr)::after {
    top: 0;
}

form #nbi-crm input[type="checkbox"]+label::before,
form #nbi-crm input[type="checkbox"]+label::after {
    border-radius: 0.25rem;
}

form #nbi-crm input[type="radio"]+label::before,
form #nbi-crm input[type="radio"]+label::after {
    border-radius: 50%;
}

form #nbi-crm input[type="radio"]:checked+label::after,
form #nbi-crm input[type="checkbox"]:checked+label::after {
    background: black;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    content: "\2713";
    line-height: 1.6;
    text-align: center;
    color: #fff;
    font-size: 1rem;
    font-family: system-ui;
}

/* The background is removed in Windows high-contrast mode, so we
     need to set it explicitly here. `WindowText` is a system color
     that should work with whatever high contrast mode the user
     has set. */
@media screen and (-ms-high-contrast: active) {

    form #nbi-crm input[type="radio"]:checked+label::after,
    form #nbi-crm input[type="checkbox"]:checked+label::after {
        background: WindowText;
    }
}

form #nbi-crm input[type="radio"]:focus+label::before,
form #nbi-crm input[type="checkbox"]:focus+label::before,
form #nbi-crm input[type="text"]:focus,
form #nbi-crm input[type="input"]:focus,
form #nbi-crm input[type="password"]:focus,
form #nbi-crm input[type="email"]:focus,
form #nbi-crm input[type="number"]:focus,
form #nbi-crm input[type="url"]:focus,
form #nbi-crm input[type="tel"]:focus,
form #nbi-crm input[type="search"]:focus,
form #nbi-crm textarea:focus,
form #nbi-crm select:focus {
    /* The first box shadow makes the border thicker without
     moving the UI (like border-width would). */
    box-shadow: 0 0px 0px 1px #d77c04, 0 0px 8px #d77c04;
    /* Since box shadows don't show up in high contrast mode,
     we're adding a transparent outline (which does show up). */
    outline: 2px dotted transparent !important;
}

@media only screen and (max-width: 767px) {
    form #nbi-crm span.radioContainer {
        flex-direction: column;
        box-sizing: border-box;
        display: flex;
        place-content: flex-start space-evenly;
        align-items: flex-start;
    }
}
/* End of custom css for crm form */