@font-face {
	font-family: 'Proxima Nova Rg';
	src: url('../fonts/ProximaNova-Bold.woff2') format('woff2'),
	url('../fonts/ProximaNova-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Proxima Nova Rg';
	src: url('../fonts/ProximaNova-Regular.woff2') format('woff2'),
	url('../fonts/ProximaNova-Regular.woff') format('woff');
	font-weight: lighter;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Proxima Nova Rg';
	src: url('../fonts/ProximaNova-Semibold.woff2') format('woff2'),
	url('../fonts/ProximaNova-Semibold.woff') format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
/*@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 100 700;
  src: url('/pdf-filler/wp-content/plugins/ask-a-lawyer-custom/fonts/icons.woff2') format('woff2');
}

.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}*/
.material-symbols-rounded {
	visibility: hidden;
}
.fonts-loaded .material-symbols-rounded {
	visibility: visible;
}
.custom-fontsize
{
	font-size: 20px;
}
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Proxima Nova Rg", sans-serif;
}
:root {
	--vh: 1vh;
}
html,body
{
	margin: 0;
	padding: 0;
	overflow: hidden; /* Prevent scroll */
	height: 100%;
	background-color: #212121;
}
.main-container
{
	background-color: #212121;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: flex-end;
	align-items: center;
	transition: all 0.3s ease-in-out;
	width: 100%;
}
.rest-container
{
	background-color: #212121;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: space-between;
	align-items: stretch;
	height: 100vh;
	transition: all 0.3s ease-in-out;
	width: 100%;
	min-height: 100%;
	height: calc(var(--vh, 1vh) * 100);
}
.rest-container.menu-opened
{
	width: calc(100% - 240px);
}
.header
{
	display: flex;
	/*padding: 20px 10px;*/
	align-items: center;
	flex-direction: row;
	justify-content: space-between;
	/*position: absolute;*/
	width: 100%;
}
.header-left,.header-right
{
	display: flex;
	position: absolute;
}
.header-right
{
	right: 32px;
	top: 25px;
}
.header-left
{
	left: 10px;
	top: 20px;
}
.button {
	display: flex;
	cursor: pointer;
	color: #2f2f2f;
	background-color: white;
	padding: 10px 20px;
	border: 1px #676767;
	border-style: solid;
	border-radius: 50px;
	justify-content: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 400;
	text-transform: capitalize;
	text-align: center;
	align-items: center;
	margin: 5px;
}
.button:hover {
	color: white;
	background-color: transparent;
}
.logo
{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: center;
	align-items: center;
	margin-bottom: 50px;
	transition: 0.3s opacity ease-in-out,0.3s max-height ease-in-out,0.3s margin ease-in-out;
}
.logo img
{
	width: 80%;
	max-width: 600px;
	height: auto;
}
.logo label
{
	font-weight: bold;
	color: white;
	font-size: 52px;
	margin-left: 12px;
}
.middle
{
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: center;
	align-items: center;
	transition: 0.3s opacity ease-in-out,0.3s max-height ease-in-out,0.3s margin ease-in-out;
}
.subtitle
{
	color: white;
	font-size: 30px;
	margin-left: 25px;
	margin-bottom: 50px;
	transition: 0.3s opacity ease-in-out,0.3s max-height ease-in-out,0.3s margin ease-in-out;
}
.search
{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin-bottom: 50px;
	position: relative;
}
.search-dummy
{
	display: none;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin-bottom: 50px;
}
.search-dummy span
{
	color: #757575;
}
.search input,.search textarea,.search-dummy .input-dummy
{
	padding: 15px 45px 15px 15px;
	background: transparent;
	width: 80%;
	font-size: 18px;
	border: solid #3a3d3e 2px;
	border-radius: 5px;
	color: white;
	max-width: 800px;
	overflow: hidden;
	resize: none;
	min-height: 56px;
}
.search input:focus,.search textarea:focus
{
	border: solid #3a3d3e 2px;
	border-radius: 5px;
	outline: none !important;
}
.search input:disabled
{

}


.button-arrow
{
	margin-left: -40px;
	cursor: pointer;
	color:white;
}
.button-arrow img
{
	width: 30px;
	vertical-align: middle;
}
.search .button-arrow img:first-of-type {
	display: block;
}

.search .button-arrow img:last-of-type {
	display: none;
}

.search .button-arrow.active img:first-of-type {
	display: none;
}

.search .button-arrow.active img:last-of-type {
	display: block;
}

.green-indicator
{
	color:#5e6161;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: flex-start;
	align-items: center;
	font-size: 18px;
	margin-bottom: 50px;
	width: 100%;
	max-width: 800px;
	margin-left: 25px;
	transition: 0.3s opacity ease-in-out,0.3s max-height ease-in-out,0.3s margin ease-in-out;
}
.green-indicator img
{
	width: 15px;
	height: auto;
	margin-right: 10px;
}
.footer
{
	text-align: center;
	padding: 20px 10px;
	width: 80%;
	margin: 0 auto;
	background-color: #212121;
	transition: 0.3s opacity ease-in-out,0.3s max-height ease-in-out,0.3s margin ease-in-out;
}
.footer span
{
	color: #aeaeae;
}
.footer a
{
	color:white;
}
.featured-answer-lawyer 
{
	display: flex;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: flex-start;
	align-items: center;
	margin: 10px;
}
.featured-answer-lawyer img 
{
	width: 70px!important;
	height: 70px!important;
	border-radius: 50%;
}
.lawyers
{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	max-width: 800px;
	margin-left: 20px;
	transition: 0.3s opacity ease-in-out,0.3s max-height ease-in-out,0.3s margin ease-in-out;
}
.lawyer-info 
{
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: center;
	align-items: flex-start;
	color: #526064;
	font-weight: bold;
	margin-right: 20px;
	margin-left: 20px;
}
.rating-container {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: center;
	align-items: center;
	margin-bottom: 5px;
	margin-top: 5px;
}
.rating-container label
{
	white-space: nowrap;
}
#RatingBar 
{
	margin: auto;
	position: relative;
	margin-right: 5px;
}
#back 
{
	position: absolute;
	left: 0;
}
#front 
{
	position: relative;
	left: 0;
	overflow: hidden;
}
.empty-star 
{
	color: #ccc;
	display: table-cell;
	max-width: 100%;
	font-weight: 700;
}
.star 
{
	color: #FFD700;
	display: table-cell;
	max-width: 100%;
	font-weight: 700;
}
.empty-star::before 
{
	content: "★";
	margin: 2px;
}
.star::before 
{
	content: "★";
	margin: 2px;
}
.lawyer-status 
{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: center;
	align-items: center;
}
.lawyer-status-circle 
{
	width: 8px;
	height: 8px;
	background: green;
	border-radius: 50%;
	margin-right: 5px;
}
.overlay {
	display: none;
	justify-content: center;
	align-items: center;
	top: 0;
	left: 0;
	position: absolute;
	width: 100vw;
	height: 100dvh;
	background-color: rgb(0, 0, 0, 0.7);
	z-index: 1000;
}
.login-popup {
	display: block;
	width: 400px;
	background-color: #fff;
	border-radius: 10px;
	padding: 20px;
}
.login-header {
	display: flex;
	justify-content: end;
	width: 100%;
}
.close {
	cursor: pointer;
}
.login-body 
{
	padding-left: 40px;
	padding-right: 40px;
}
.login-title, .logout-title {
	position: relative;
	justify-content: center;
	font-size: 24px;
	font-weight: 800;
	margin-bottom: 35px;
	width: 100%;
	display: flex;
}
.social-media {
	display: flex;
	flex-direction: column;
	margin-top: 30px;
	align-items: center;
}
.sm-btn {
	display: flex;
	width: 100%;
	cursor: pointer;
	padding: 10px;
	border: 1px solid #dcdcdc;
	border-radius: 5px;
	margin-bottom: 8px;
	gap: 10px;
}
.social-media .sm-btn > span {
	display: flex;
	justify-content: center;
	width: 100%;
}
.login-separator {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 20px 0;
	color: #adadad;
	font-size: 11px;
}
.login-separator > span {
	width: 24%;
	border: 1px solid #dcdcdc;
}
.login-body > input[type="email"] {
	margin-bottom: 20px;
}

.login-body > input, .mnl-frm > input {
	box-sizing: border-box;
	outline: 0;
	height: 50px;
	width: 100%;
	border: 0.5px solid #d8d8d8;
	border-radius: 10px;
	padding: 15px;
	font-size: 14px;
}
.login-cta {
	cursor: pointer;
	background-color: #3284ff;
	color: #fff;
}

.login-cta, .sec-cta {
	justify-content: center;
	margin: 20px 0;
	padding: 10px 20px;
	border-radius: 10px;
	width: 100%;
	display: flex;
	outline: 0;
	border: 0;
}
.login-cta:hover {
	background: #3273ff;
}
.login-cta:disabled {
	background: #a4c9ff;
	color: #fff;
	border-color: transparent;
	cursor: not-allowed;
}
.login-creds {
	display: flex;
	justify-content: center;
	font-size: 11px;
	color: #adadad;
	gap: 5px;
	margin-bottom: 20px;
}
.login-creds > span, .sec-cta {
	color: #3284ff;
	cursor: pointer;
}

.edt-eml, .login-creds > span {
	font-weight: 600;
}
.sm-btn:hover {
	background-color: #f9fafc;
}
.login-body > input:active, .login-body > input:hover {
	border: 0.5px solid #8b8b8b;
}
.sidebar
{
	width: 0px;
	background-color: black;
	height: 100vh;
	transition: 0.2s width;

}
.sidebar.open
{
	width: 300px;
	padding: 20px;
}
.chat-container
{
	height: 100%;
	width: 100%;
	margin: auto;
	overflow: auto;
	display: none;
	overflow-y: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
	padding-top: 80px;
}
.chat-container::-webkit-scrollbar 
{
	display: none;
}
.sidebar-logo
{
	/*margin: auto;*/
	text-align: left;
}
.sidebar-logo img
{
	width: 100%;
	cursor: pointer;
	max-width: 200px;
}

#login-btn span:first-of-type {
	display: block;
}

#login-btn span:last-of-type {
	display: none;
}

#menu-btn span:first-of-type,#burger-btn span:first-of-type {
	display: block;
}

#menu-btn span:last-of-type,#burger-btn span:last-of-type {
	display: none;
}
#menu-btn.active span:first-of-type,#burger-btn.active span:first-of-type {
	display: none;
}

#menu-btn.active span:last-of-type,#burger-btn.active span:last-of-type {
	display: block;
}

#search-btn,#menu-btn {
	cursor: pointer;
	display: flex;
	border-radius: 100px;
	justify-content: center;
	align-items: center;
	color: #9b9b9b;
	width: 40px;
	height: 40px;
}
#menu-btn img
{
	width: 20px;
}
#burger-btn {
	cursor: pointer;
	display: none;
	border-radius: 100px;
	justify-content: center;
	align-items: center;
	color: #9b9b9b;
	width: 40px;
	height: 40px;
}
#new-chat-btn {
	cursor: pointer;
	display: none;
	border-radius: 100px;
	justify-content: center;
	align-items: center;
	color: #9b9b9b;
	width: 50px;
	height: 50px;
}
#search-btn:hover,#menu-btn:hover,#burger-btn:hover
{
	background-color: #ffffff2b;
}
#new-chat 
{
	display: flex;
	padding: 10px;
	border-radius: 100px;
	justify-content: center;
	justify-self: flex-end;
	cursor: pointer;
	align-items: center;
	color: #8e8e8e;
	width: 40px;
	height: 40px;
}
#new-chat:hover
{
	background-color: #ffffff2b;
}
.sidebar-icons
{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin: 0px 6px;
}
.sidebar-history
{
	list-style: none;
	line-height: 30px;
	font-size: 16px;
	font-weight: 100;
	color: #5d5d5d;
	overflow-y: scroll;
	max-height: 75vh;
	-ms-overflow-style: none;
	scrollbar-width: none;
	margin-top: 20px;
}
.sidebar-history > li {
	justify-content: space-between;
	font-size: 14px;
	font-weight: 200;
	padding: 0 0 0 10px;
	cursor: pointer;
	align-items: center;
	display: flex;
	margin-bottom: 5px;
}
.sidebar-history > li:hover {
	border-radius: 8px;
	background-color: #ffffff2b;
}
.conversation-title 
{
	overflow: hidden;
	text-overflow: clip;
	white-space: nowrap;
	color: whitesmoke;
	max-width: 100%;
}
.conversation-sub.no-icon .conversation-title {
	max-width: 100%;
}
.conversation-sub.no-icon span:first-of-type
{
	visibility: collapse;
}
.conversation-sub
{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	overflow: hidden;
}
.conversation-sub span:first-of-type
{
	margin-right: 10px;
}
.more {
	visibility: hidden;
	padding: 12px;
	color: #adadad;
}

.material-symbols-rounded, .nav-link:hover .more {
	visibility: visible;
}
.selected {
	cursor: default;
	background-color: #303030;
	border-radius: 10px;
}
.date-separator
{
	font-weight: bold;
	font-size: 18px;
}
.conversation
{
	max-width: 800px;
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	height: auto;
}
.chat-container .chat.outgoing
{
	background: #303030;
	max-width: 85%;
}
.chat.outgoing
{
	padding: 16px;
	display: flex;
	align-self: flex-end;
	border-radius: 10px;
	color:whitesmoke;
}
.chat .chat-content {
	display: flex;
	max-width: 1200px;
	width: 100%;
	justify-content: space-between;
	align-items: flex-start;
}
.chat .chat-details {
	display: flex;
	align-items: center;/*flex-end*/
	width: 100%;
}
.msg {
	width: 100%;
	margin-bottom: 0;
	flex-direction: column;
	display: flex;
}
.msg a
{
	color: #0075d6;
	text-decoration: underline;
}
.outgoing .msg p:first-child {
	padding: 0 12px;
	margin: 0;
	text-align: left;
	font-weight: 400 !important;
	font-size: 1rem;
	outline: 0;
	white-space: pre-wrap;
	line-height: 1.5rem;
	word-break: break-word;
}

.chat-container .chat {
	padding: 15px 10px;
	display: flex;
	justify-content: center;
	color: whitesmoke;
	margin-bottom: 5px;
	margin-top: 5px;
}
.chat-details img
{
	height: 24px;
	align-self: flex-start;
	border-radius: 50%;
	width: 24px;
}
.msg p:first-child 
{
	font-weight: 400 !important;
	font-size: 1rem;
	margin-bottom: 10px;
}
.chat .chat-details p, .msg p:first-child {
	white-space: pre-wrap;
	line-height: 1.5rem;
	padding: 0 50px 0 10px;
	word-break: break-word;
}
.chat .typing-animation {
	padding-left: 10px;
	display: inline-flex;
}
.typing-animation .typing-dot:first-child {
	margin-left: 0;
}
.typing-animation .typing-dot {
	height: 7px;
	width: 7px;
	border-radius: 50%;
	margin: 0 3px;
	opacity: 0.7;
	background: whitesmoke;
}
.dot1
{
	animation: animateDots 1.5s 0.2s ease-in-out infinite;
}
.dot2
{
	animation: animateDots 1.5s 0.3s ease-in-out infinite;
}
.dot3
{
	animation: animateDots 1.5s 0.4s ease-in-out infinite;
}
@keyframes animateDots {
	0%,
	44% {
		transform: translateY(0);
	}
	28% {
		opacity: 0.4;
		transform: translateY(-6px);
	}
	44% {
		opacity: 0.2;
	}
}

.radio-options {
	display: flex;
	flex-direction: column;
	max-width: 500px;
	gap: 10px;
	padding-top: 10px;
}
.radio-options>label {
	border: 1px solid #676767;
	border-radius: 10px;
	color: whitesmoke;
	padding: 10px;
	max-width: 500px;
	font-size: 1rem;
	font-weight: 200;
	cursor: pointer;
}

.radio-options label {
	display: flex;
}
.radio-options label span {
	display: flex;
}
input[type=radio] {
	border: .15em solid whitesmoke;
	border-radius: 50%;
	justify-content: center;
	color: whitesmoke;
	display: flex;
	appearance: none;
	background-color: transparent;
	margin: 0 8px 0 4px;
	font: inherit;
	width: 1.15em;
	height: 1.15em;
}
input[type=radio]::before {
	content: "";
	width: .65em !important;
	height: .65em !important;
	border-radius: 50%;
	box-shadow: inset 1em 1em whitesmoke;
	transition: transform 120ms ease-in-out;
	align-self: center;
	transform: scale(0);
}
input[type=radio]:checked::before {
	transform: scale(1)
}
.radio-options>label:hover {
	background-color: #ffffff2b;
}
.radio-options>label:has(input[type=radio]:checked) {
	background-color: #ffffff2b;
}
.radio-options>button{
	cursor: pointer;
	width: 100px;
	margin-top: 10px;
	padding: 10px;
	border-radius: 1rem;
	color: whitesmoke;
	background-color: #ffffff2b;
	align-self: flex-end;
	outline: 0;
	border: 0;
	font-size: 16px;
}
.radio-options>button:hover
{
	background-color: #8b8b8b;
}
.chat-details .featured-answer-lawyer
{
	margin: 20px 10px!important;
}
.profile-btn 
{
	background-color: #689f38;
	color: whitesmoke;
	border-radius: 50%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	text-align: center;
	vertical-align: middle;
	width: 40px;
	height: 40px;
}
.profile-btn label
{
	cursor: pointer;
	padding: 10px 15px;
	text-transform: capitalize;
}
.settings
{
	background-color: #2f2f2f;
	border-radius: 25px;
	border: 2px solid #444444;
	padding: 15px;
	min-width: 250px;
	position: absolute;
	right: 10px;
	top: 70px;
}

.settings div:hover
{
	background-color: #424242;
	border-radius: 25px;
}

.settings div
{
	display: flex;
	color: whitesmoke;
	margin-bottom: 10px;
	vertical-align: middle;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	align-items: center;
	cursor: pointer;
	padding: 5px 10px;
}
.settings div:last-of-type
{
	margin-bottom: 0px;
}
.settings div span 
{
	margin-right: 10px;
	cursor: pointer;
}
.settings div label
{
	cursor: pointer;
}
.settings hr
{
	border: 1px solid #404040;
	margin-bottom: 10px;
}
.plans-popup
{
	max-width: 600px;
	width: 80%;
	background-color: #2f2f2f;
	border: 1px solid #3d3d3d;
	border-radius: 10px;
}
.plans-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 30px;
	border-bottom: 1px solid #3d3d3d;
	color: whitesmoke;
	font-size: 22px;
	font-weight: 800;
}
.plans-body, label {
	display: flex;
}
.plan-left, .plan-right {
	width: 50%;
	padding: 20px 40px;
	gap: 20px;
	display: flex;
}
.plan, .plan-left {
	flex-direction: column;
	border-right: 1px solid #3d3d3d;
}
.plan-right {
	flex-direction: column;
}

.plan-left > span:first-child, .plan-right > span:first-child, .plan > span:first-child {
	font-weight: 600;
	font-size: 16px;
	color: whitesmoke;
}
.plan-left > span:nth-child(2), .plan-right > span:nth-child(2), .plan > span:nth-child(2) {
	font-weight: 400;
	font-size: 14px;
	color: whitesmoke;
}
.plan-left > button {
	padding: 10px 0;
	border: 0;
	border-radius: 10px;
	font-weight: 500;
	font-size: 15px;
	color: #6f6f6f;
	background-color: #4b4b4b;
}
.plan-left > ul, .plan-right > ul, .plan > ul {
	font-weight: 400;
	font-size: 14px;
	color: whitesmoke;
	line-height: 30px;
	list-style-type: "\2713";
}
.plan-right > button {
	cursor: pointer;
	padding: 10px 20px;
	border: 0;
	border-radius: 10px;
	font-weight: 500;
	font-size: 15px;
	color: whitesmoke;
	background-color: #1392ec;
}
.plan-left > ul > li, .plan-right > ul > li, .plan > ul > li, .settings li:first-child {
	padding-left: 10px;
}

.profile-settings 
{
	width: 100%;
	padding: 30px;
	list-style: none;
	line-height: 65px;
	color: whitesmoke;
}
.profile-settings > li, .sets {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.delete, .unsubscribe 
{
	justify-content: center;
	align-items: center;
	padding: 0 20px;
	background-color: red;
	border-radius: 5px;
	color: #fff;
}
.btn {
	align-items: center;
	padding: 0 20px;
	background-color: #303030;
	border-radius: 5px;
}
.btn, .delete, .unsubscribe {
	cursor: pointer;
	height: 40px;
	font-weight: 400;
	display: flex;
	font-size: 14px;
	outline: 0;
	border: 0;
	align-items: center;
}
.unsubscribe:disabled
{
	cursor: not-allowed;
	background-color: gray;
}

.plans-body.cancel-sub
{
	flex-direction: column;
	padding: 30px;
}
.cancel-sub div
{
	color: whitesmoke;
	font-weight: bold;
	margin-bottom: 20px;
}
.plans-header-sub
{
	display: flex;
	flex-direction: row;
	align-content: center;
	justify-content: center;
	align-items: center;
}
.plans-header-sub div
{
	margin: 0px 10px;
	margin: 0px 10px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.unhollow-green
{
	background-color: #296c47;
}
.unhollow-red
{
	background-color: red;
}
.hollow
{
	color: whitesmoke;
	border: 1px solid #4b4b4b;
	border-radius: 20px;
	min-width: 150px;
	text-align: center;
	justify-content: center;
}
.hollow:hover
{
	background-color: #4b4b4b;
}
.hollow:disabled
{
	background-color: #4b4b4b;
	cursor: not-allowed;
}
.checkout-info {
	display: flex;
	width: 100%;
	padding-top: 30px;
	gap: 40px;
	color:whitesmoke;
	max-width: 500px;
	flex-direction: column;
}
.billing-details input,.billing-details select,.billing-details button
{
	font-size: 16px!important;
}
.billing-details {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 50%;
}
.billing-details>span, .order-summary>span:first-child {
	font-size: 16px;
	font-weight: 600;
}
.billing-address, .inline-signup {
	display: flex;
	gap: 8px;
}
.email-address {
	width: 100%;
	border-radius: 10px;
	padding: 0 12px;
	border: 1px solid #3d3d3d;
}
#card-element,#card-element-modal, #inline-signup, .card-holder-name, .email-address {
	color: whitesmoke;
	height: 48px;
}
.card-holder-name, .email-address {
	background-color: transparent;
	outline: 0;
}
#inline-signup {
	cursor: pointer;
	width: 40%;
	padding: 10px;
	border-radius: 10px;
}
#inline-signup:disabled
{
	cursor: not-allowed;
	background-color: gray;
}
#card-element,#card-element-modal {
	padding: 14px 10px;
	border: 1px solid #3d3d3d;
	border-radius: 10px;
}
#checkout,#checkout-modal, #inline-signup, .plan-right>button {
	background-color: #1392ec;
}
button {
	outline: 0;
	border: 0;
}
.card-holder-name {
	border-radius: 10px;
	padding: 0 12px;
	border: 1px solid #3d3d3d;
}
.billing-address {
	height: 48px;
	width: 100%;
	justify-content: space-between;
}
.billing-address, .inline-signup {
	display: flex;
	gap: 8px;
}
.zip-code {
	border-radius: 10px;
	border: 1px solid #3d3d3d;
}
#country, .zip-code {
	background-color: transparent;
	height: 100%;
	padding: 0 20px;
	width: 100%;
	color: whitesmoke;
	outline: 0;
}
#country {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 10px;
	background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #3d3d3d, #3d3d3d);
	background-position: calc(100% - 20px) calc(1em + 7px), calc(100% - 15px) calc(1em + 7px), calc(100% - 2.9em) 0;
	background-size: 5px 5px, 5px 5px, 1px 3.5em;
	background-repeat: no-repeat;
	border: 1px solid #3d3d3d;
}
#checkout,#checkout-modal {
	cursor: pointer;
	padding: 16px 40px;
	border: 0;
	border-radius: 10px;
	font-weight: 500;
	font-size: 15px;
	color: whitesmoke;
}
#checkout:disabled,#checkout-modal:disabled
{
	cursor: not-allowed;
	background-color: gray;
}
.cancel-button
{
	background-color: red;
	cursor: pointer;
	padding: 16px 40px;
	border: 0;
	border-radius: 10px;
	font-weight: 500;
	font-size: 15px;
	color: whitesmoke;
}
.cancel-button:disabled
{
	cursor: not-allowed;
	background-color: gray;
}
.notice
{
	font-weight: normal!important;
	font-size: 12px!important;
}
.notice-red
{
	font-weight: normal !important;
	font-size: 14px !important;
	background-color: #fde2e1;
	color: #7e4c4c;
	padding: 10px;
	border-radius: 5px;
}
.success
{
	color:#078002!important;
}
.back {
	cursor: pointer;
	position: absolute;
	top: 10px;
	left: 0;
}
.mnl-frm {
	display: flex;
	flex-direction: column;
	gap: 15px;
}
.email-prev > span > span, .mnl-frm > div {
	font-size: 13px;
	font-weight: 300;
}
.email-prev {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 48px;
	width: 100%;
	font-size: 14px;
}
.email-prev > span {
	font-weight: 700;
}
.edt-eml {
	cursor: pointer;
	color: #3284ff;
}
.edt-eml, .login-creds > span {
	font-weight: 600;
}
.edt-eml, .forgot, .remember, .sm-btn {
	font-size: 14px;
}
.remember
{
	visibility: hidden;
}
.forgot {
	cursor: pointer;
}
.forgot:hover {
	text-decoration: underline;
}
.error {
	padding: 20px 0 5px;
	font-size: 12px;
	color: red;
}
.delete-chat-buttons-container
{
	display: flex;
	justify-content: flex-end;
	margin: 0!important;
	gap: 10px;
}
.delete-chat-buttons-container button
{
	min-width: 100px!important;
}
.abs-sidbar
{
	position: absolute;
	width: 220px;
	margin: 20px;
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: center;
	align-items: flex-start;
}
.abs-sidbar.open
{
	padding: 0px;
	margin: 0px;
	position: inherit;
}
.mobile-logo-container
{
	display: none;
	width: 100%;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: center;
	align-items: center;
}
.header-center
{
	text-align: center;
	display: flex;
	flex-direction: row;
	align-content: center;
	justify-content: center;
	align-items: center;
}
.mobile-logo
{
	width: 100%;
	color: white;
	font-size: 24px;
}

.idk {
	border: 1px solid #fff3;
	border-radius: 10px;
	min-width: 127px;
	padding: 10px 20px;
	cursor: pointer;
	color: whitesmoke;
	margin-bottom: -60px;
	font-size: 15px;
}
.idk:hover
{
	background-color: #fff3;
}

.aska {
	border: 1px solid #fff3;
	border-radius: 10px;
	min-width: 132px;
	padding: 10px 20px;
	cursor: pointer;
	color: whitesmoke;
	font-size: 15px;
}
.aska:hover
{
	background-color: #fff3;
}
.aska.selected
{
	background-color: #fff3;
}

.loading-container {
	display: flex;
	margin-left: 10px;
}
.loading-text {
	color: whitesmoke;
	font-size: 0.9rem;
	transition: opacity 0.3s;
}
.spinner {
	width: 24px;
	height: 24px;
	min-width: 24px;
	min-height: 24px;
	border: 4px solid #adadad;
	border-top-color: #007bff;
	border-radius: 50%;
	animation: 0.8s linear infinite spinner;
}
.no-thanks-button
{
	border: 1px solid #fff3;
	border-radius: 10px;
	min-width: 127px;
	padding: 10px 20px;
	cursor: pointer;
	color: whitesmoke;
	background: transparent;
	padding: 16px 40px;
}
.no-thanks-button:hover
{
	background: #fff3;
}

@keyframes spinner {
	to {
		transform: rotate(360deg);
	}
}
.new-chat
{
	width: 30px;
	height: 30px;
	min-width: 30px;
	min-height: 30px;
}
.fake-caret {
	display: inline-block;
	width: 1px;
	height: 1.2em;
	background-color: white;
	animation: blink 1s steps(1) infinite;
	vertical-align: bottom;
}
#scroll-btn
{
	display: none;
}

@keyframes blink {
	0%, 50% { opacity: 1; }
	50.01%, 100% { opacity: 0; }
}
.payment-options
{
	display: none;
}
.payment-options .radio-options label
{
	align-items: center;
	justify-content: space-between;
}
.lawyer-status-circle-moving img
{
	width: 8px!important;
	height: 8px!important;
	margin-right: 5px;
	vertical-align: middle;
	margin-bottom: 2px;
}
#inchat-subscribe-radio 
{
	flex-direction: row;
}
#inchat-subscribe-radio>label 
{
	width: 100%;
}
.notice a
{
	color:white;
	text-decoration: underline;
}
.segement-toggle-container
{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: center;
	align-items: center;
	gap: 5px;
}

#scroll-btn
{
	display: none;
	width: 50px;
	height: 50px;
	max-width: 50px;
	max-height: 50px;
	text-align: center;
	flex-direction: row;
	align-content: center;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: -70px;
	cursor: pointer;
}
#scroll-btn img
{
	width: 50px;
	height: 50px;
	max-width: 50px;
	max-height: 50px;
}

/* Container */
.switch {
	position: relative;
	display: inline-block;
	width: 25.5px;
	height: 14.45px;
}

/* Hide the checkbox */
.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

/* The slider */
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #aeaeae;
	transition: 0.4s;
	border-radius: 14.45px;
}

/* The circle */
.slider::before {
	position: absolute;
	content: "";
	height: 11.05px;
	width: 11.05px;
	left: 1.7px;
	bottom: 1.7px;
	background-color: white;
	transition: 0.4s;
	border-radius: 50%;
}

/* Checked state */
input:checked + .slider {
	background-color: #0075d6;
}

input:checked + .slider::before {
	transform: translateX(11.05px);
}

@media only screen and (max-width: 1400px) 
{
	.header
	{
		/*position: inherit;*/
		/*border-bottom: 1px solid #676767;*/
		padding: 25px 32px;
		padding-top: calc(25px + env(safe-area-inset-top));
	}
	.header-left, .header-right {
		position: inherit;
	}
	.chat-container
	{
		padding-top: 0px;
	}
}

@media only screen and (max-width: 600px) 
{

	.chat-details > img:first-child {
		display: none;
	}

	#inchat-subscribe-radio 
	{
		flex-direction: column;
	}





	.conversation .chat.outgoing:first-of-type {
		margin-top: 20px;
	}

	#login-btn span:first-of-type {
		display: none;
	}

	#login-btn span:last-of-type {
		display: block;
		font-size: 30px;
		color:#8e8e8e;
	}
	#login-btn
	{
		margin: 0px;
		width: 30px;
		height: 30px;
		min-width: 30px;
		min-height: 30px;
		padding: 0px;
		background-color: transparent;
		border: navajowhite;
		color: white;
	}
	#new-chat-btn
	{
		display: flex;
		width: auto;
		height: auto;
		padding: 5px;
	}
	.plans-body 
	{
		flex-direction:column;
	}
	.plan-left, .plan-right 
	{
		width: 100%;
	}
	.sidebar-logo
	{
		display: block;
	}
	.header
	{
		border-bottom: 1px solid #676767;
		padding: 10px;
	}
	.footer
	{
		/*border-top: 1px solid #676767;*/
		width: 100%;
	}
	.footer a
	{
		text-decoration: none;
	}
	.mobile-logo-container
	{
		display: block;
	}
	.lawyers
	{
		flex-direction: column;
		justify-content: left;
		align-items: flex-start;
	}

	.green-indicator 
	{
		justify-content: left;
		margin-left: 0px;
		width: 90%;
		margin-bottom: 25px;
	}
	.date-separator
	{
		text-align: center;
	}
	.plans-header-sub div
	{
		max-width: 100px;
	}
	.conversation
	{
		max-width: 90%;
	}
	.sidebar.open
	{
		width: 85%;
		padding-top: calc(30px + env(safe-area-inset-top));
	}
	.abs-sidbar
	{
		display: none;
	}
	.abs-sidbar.open {
		padding: 0px;
		margin: auto;
		width: 90%;
		position: absolute;
		display: flex;
		flex-direction: column;
		align-content: center;
		justify-content: center;
		align-items: flex-start;
		z-index: 1;
	}
	.sidebar
	{
		position: absolute;
		left: 0;
		z-index: 1;
	}
	.sidebar-history
	{
		margin-top: 180px;
	}
	#burger-btn
	{
		display: flex;
	}
	.rest-container.menu-opened
	{
		width: 100%;
	}
	.sidebar-logo img
	{
		max-width: 100%;
	}

	.subtitle
	{
		text-align: center;
		margin-left: 0px;
		font-size: 28px;
		margin-bottom: 25px;
	}
	.search textarea
	{
		width: 90%;
	}
	.search
	{
		margin-bottom: 25px;
		margin-left: -5px;
		display: none;
		position: relative;
	}
	.search-dummy .input-dummy
	{
		width: 90%;
	}
	.search-dummy
	{
		margin-bottom: 25px;
		margin-left: -5px;
		display: flex;
	}
	.chat .chat-content {
		flex-direction: column;
	}
	.chat .chat-details p, .msg p:first-child 
	{
		padding: 0 10px 0 10px;
	}
	.idk,.aska
	{
		margin-left: 30px;
	}
	#signup-btn
	{
		display: none;
	}
	.middle
	{
		padding-bottom: calc(0px + env(safe-area-inset-bottom)); 
	}
	#upgrade-plan .checkout-info
	{
		width: 80%;
	}
}