/*----------------------------------------------------------
	002 — APP SHELL + TOOLBAR
----------------------------------------------------------*/

/*----------------------------------------------------------
	YAHAN SIRF IS MODULE KA APNA HISSA HAI

	Template ka design aur theme — hero, badges, pills, steps,
	features, ads, cards, tables, toast aur poora app shell —
	assets/global-custom-web.css me hai (sections 001-013 aur
	101-122). Wo global pehle load hoti hai.

	Pehle har module un rules ki apni naql rakhta tha. Wo naqlein
	yahan se nikal di gayi hain: har wo rule jo global wale se
	hu-ba-hu ek tha, hata diya gaya, aur jo alag tha wo waisa hi
	chhora gaya — kyunke module ki CSS global ke BAAD load hoti
	hai aur us ka apna faisla jeetta hai.

	Naya rule likhne se pehle global me dekh len. Agar wahan
	pehle se hai, to yahan dobara na likhen.
----------------------------------------------------------*/
.pc-app{
	position: relative;			/* confirm dialog isi ke andar baithta hai */
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface);
	box-shadow: var(--wiz-shadow-sm);
	overflow: hidden;
	margin-bottom: 1.25rem;
}

.pc-bar{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: .85rem 1.1rem;
	border-bottom: 1px solid var(--wiz-border);
	background: var(--wiz-surface-2);
}

.pc-bar-brand{
	display: flex;
	align-items: center;
	gap: .7rem;
	min-width: 0;
}

.pc-bar-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border-radius: var(--wiz-radius-btn);
	font-size: 1.1rem;
	color: #fff;
	background: linear-gradient(135deg, var(--wiz-primary) 0%, #4f46e5 100%);
}

.pc-bar-title{
	font-family: var(--wiz-font-display);
	font-size: 1rem;
	font-weight: 700;
	color: var(--wiz-text);
	line-height: 1.25;
}

.pc-bar-sub{
	font-size: .74rem;
	color: var(--wiz-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pc-bar-actions{
	display: flex;
	align-items: center;
	gap: .4rem;
	flex-shrink: 0;
}

.pc-icon-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-btn);
	background: var(--wiz-surface);
	color: var(--wiz-text-muted);
	font-size: .9rem;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.pc-icon-btn:hover{
	color: var(--wiz-primary);
	border-color: var(--wiz-primary);
	background: color-mix(in srgb, var(--wiz-primary) 8%, transparent);
}

.pc-icon-btn:focus-visible{
	outline: 2px solid var(--wiz-primary);
	outline-offset: 2px;
}


/*----------------------------------------------------------
	003 — TOOL NAVIGATION

	Bees calculators, ek hi qatar me — aur chhoti screen par ye qatar
	side me scroll hoti hai.

	Wrap karne dena aasan hota, magar phir toolbar chaar qataron ka ban
	jata aur asal calculator screen se neeche dhakel jata. Scroll me
	qatar hamesha ek rehti hai; jo tab khula ho use JS khud nazar me le
	aata hai.
----------------------------------------------------------*/

.pc-tabs-wrap{
	border-bottom: 1px solid var(--wiz-border);
	background: var(--wiz-surface);
}

.pc-tabs{
	display: flex;
	gap: .15rem;
	padding: .4rem .6rem 0;
	overflow-x: auto;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.pc-tabs::-webkit-scrollbar{
	height: 4px;
}

.pc-tabs::-webkit-scrollbar-thumb{
	background: var(--wiz-border);
	border-radius: 999px;
}

.pc-tab{
	display: inline-flex;
	align-items: center;
	gap: .38rem;
	flex-shrink: 0;
	padding: .5rem .8rem;
	border: 0;
	border-bottom: 2px solid transparent;
	background: transparent;
	font-size: .82rem;
	font-weight: 600;
	color: var(--wiz-text-muted);
	white-space: nowrap;
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}

.pc-tab:hover{
	color: var(--wiz-primary);
	background: color-mix(in srgb, var(--wiz-primary) 6%, transparent);
}

.pc-tab.is-active{
	color: var(--wiz-primary);
	border-bottom-color: var(--wiz-primary);
}

.pc-tab:focus-visible{
	outline: 2px solid var(--wiz-primary);
	outline-offset: -2px;
}

.pc-tab-emoji{
	font-size: .95rem;
	line-height: 1;
}

.pc-body{
	padding: 1.25rem;
}

.pc-view{
	display: none;
}

.pc-view.is-active{
	display: block;
}


/*----------------------------------------------------------
	004 — SPLIT LAYOUT, PANELS, FIELDS

	Bari screen par bayen taraf sawal, dayen taraf jawab. Jawab ko
	inputs ke NEECHE rakhne ka matlab hai ke lambe panel (grade,
	split) par jawab screen se bahar chala jata hai aur user ko
	scroll kar ke dekhna parta hai ke us ne kya poochha tha.
----------------------------------------------------------*/

.pc-split{
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
	gap: 1rem;
	align-items: start;
}

.pc-panel{
	padding: 1.1rem 1.15rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface-2);
	min-width: 0;
}

.pc-panel-title{
	font-family: var(--wiz-font-display);
	font-size: 1rem;
	font-weight: 700;
	color: var(--wiz-text);
	margin: 0 0 .2rem;
}

.pc-panel-sub{
	font-size: .8rem;
	line-height: 1.6;
	color: var(--wiz-text-muted);
	margin: 0 0 1rem;
}

.pc-field{
	margin-bottom: .9rem;
}

.pc-field:last-of-type{
	margin-bottom: 1rem;
}

.pc-label{
	display: block;
	font-size: .8rem;
	font-weight: 600;
	color: var(--wiz-text);
	margin-bottom: .3rem;
}

/*
	Input ke andar nishan (currency, %) — bahar likhne se qatar toot
	jati hai aur phone par nishan apni alag line me chala jata hai.
*/
.pc-input-wrap{
	position: relative;
}

.pc-input{
	font-size: .95rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	background: var(--wiz-surface);
}

.pc-input:focus{
	border-color: var(--wiz-primary);
	box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--wiz-primary) 18%, transparent);
}

.pc-input.has-prefix{
	padding-left: 2.5rem;
}

.pc-input.has-suffix{
	padding-right: 2.3rem;
}

.pc-input.is-wrong{
	border-color: #dc2626;
}

.pc-input.is-wrong:focus{
	box-shadow: 0 0 0 .2rem rgba(220, 38, 38, .18);
}

/* number input ke chhote teer — jagah khate hain, kaam kuch nahi karte */
.pc-input::-webkit-outer-spin-button,
.pc-input::-webkit-inner-spin-button{
	-webkit-appearance: none;
	margin: 0;
}

.pc-input[type="number"]{
	-moz-appearance: textfield;
	appearance: textfield;
}

.pc-affix{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: .82rem;
	font-weight: 600;
	color: var(--wiz-text-muted);
	pointer-events: none;
}

.pc-affix-money{
	left: .85rem;
	max-width: 2.4rem;
	overflow: hidden;
	white-space: nowrap;
}

.pc-affix-unit{
	right: .85rem;
}

.pc-hint{
	display: block;
	font-size: .75rem;
	line-height: 1.6;
	color: var(--wiz-text-muted);
	margin-top: .3rem;
}

/*
	GHALTI KA PAIGHAAM

	Khali rehne par jagah bhi nahi leta, warna har khane ke neeche ek
	khali qatar bani rehti aur form bekaar me lamba lagta.
*/
.pc-error{
	display: none;
	font-size: .76rem;
	line-height: 1.55;
	color: #dc2626;
	margin-top: .3rem;
}

.pc-error.is-on{
	display: block;
}

.pc-error.is-on::before{
	content: "⚠ ";		/* sirf rang par bharosa nahi — nishan bhi */
}

[data-bs-theme="dark"] .pc-error{
	color: #f87171;
}

.pc-actions{
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.pc-actions .btn i{
	margin-right: .25rem;
}

.pc-frac{
	display: flex;
	align-items: center;
	gap: .5rem;
}

.pc-frac .pc-input{
	width: 6.5rem;
	text-align: center;
}

.pc-frac-slash{
	font-size: 1.3rem;
	color: var(--wiz-text-muted);
}


/*----------------------------------------------------------
	005 — NATEEJA
----------------------------------------------------------*/

.pc-panel-out{
	position: sticky;
	top: calc(var(--wiz-nav-h, 72px) + 16px);
	background: color-mix(in srgb, var(--wiz-primary) 6%, transparent);
	border-color: color-mix(in srgb, var(--wiz-primary) 22%, transparent);
}

.pc-out-label{
	display: block;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wiz-text-muted);
	margin-bottom: .35rem;
}

.pc-out-big{
	font-family: var(--wiz-font-display);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--wiz-primary);
	font-variant-numeric: tabular-nums;
	word-break: break-word;
}

.pc-out-big small{
	display: block;
	margin-top: .2rem;
	font-family: var(--wiz-font-body, inherit);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--wiz-text-muted);
}

/* jab jawab hi nahi banta */
.pc-out-big.is-empty{
	font-size: 1.6rem;
	color: var(--wiz-text-muted);
	opacity: .6;
}

.pc-out-extra{
	display: flex;
	flex-direction: column;
	gap: .3rem;
	margin-top: .8rem;
}

.pc-out-extra:empty{
	margin-top: 0;
}

.pc-out-row{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
	padding: .35rem 0;
	border-bottom: 1px dashed var(--wiz-border);
	font-size: .82rem;
}

.pc-out-row:last-child{
	border-bottom: 0;
}

.pc-out-row span{
	color: var(--wiz-text-muted);
}

.pc-out-row b{
	color: var(--wiz-text);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/*
	Barhna / ghatna / munafa / nuqsaan.

	Rang doosre darje ka ishara hai: alfaz aur nishan pehle aate hain,
	taake rang na dikhne par bhi matlab poora rahe.
*/
.pc-tag{
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	margin-top: .5rem;
	padding: .25rem .6rem;
	border-radius: 999px;
	font-family: var(--wiz-font-body, inherit);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: 0;
}

.pc-tag.is-up{
	color: #15803d;
	background: rgba(34, 197, 94, .12);
	border: 1px solid rgba(34, 197, 94, .3);
}

.pc-tag.is-down{
	color: #b45309;
	background: rgba(245, 158, 11, .12);
	border: 1px solid rgba(245, 158, 11, .3);
}

.pc-tag.is-flat{
	color: var(--wiz-text-muted);
	background: var(--wiz-surface);
	border: 1px solid var(--wiz-border);
}

[data-bs-theme="dark"] .pc-tag.is-up{	color: #4ade80; }
[data-bs-theme="dark"] .pc-tag.is-down{	color: #fbbf24; }

.pc-out-work{
	font-family: var(--wiz-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
	font-size: .78rem;
	line-height: 1.75;
	color: var(--wiz-text-muted);
	white-space: pre-wrap;
	word-break: break-word;
}

.pc-out-work:not(:empty){
	margin-top: .8rem;
	padding: .55rem .7rem;
	border-radius: var(--wiz-radius-btn);
	background: var(--wiz-surface);
	border: 1px solid var(--wiz-border);
}

.pc-out-actions{
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: .9rem;
}

.pc-code{
	font-size: .8rem;
	color: var(--wiz-primary);
	background: color-mix(in srgb, var(--wiz-primary) 8%, transparent);
	padding: .15rem .4rem;
	border-radius: 5px;
	white-space: nowrap;
}


/*----------------------------------------------------------
	006 — SEGMENTED CONTROL + NOTES
----------------------------------------------------------*/

.pc-seg{
	display: inline-flex;
	padding: .2rem;
	border-radius: var(--wiz-radius-btn);
	background: var(--wiz-surface);
	border: 1px solid var(--wiz-border);
	flex-shrink: 0;
}

.pc-seg-btn{
	border: 0;
	background: transparent;
	padding: .35rem .75rem;
	border-radius: calc(var(--wiz-radius-btn) - 2px);
	font-size: .8rem;
	font-weight: 600;
	color: var(--wiz-text-muted);
	white-space: nowrap;
	transition: color .15s ease, background .15s ease;
}

.pc-seg-btn:hover{
	color: var(--wiz-primary);
}

.pc-seg-btn.is-on{
	color: #fff;
	background: var(--wiz-primary);
}

.pc-seg-btn:focus-visible{
	outline: 2px solid var(--wiz-primary);
	outline-offset: 1px;
}

/* chaar option ek qatar me nahi samate — lipatne dena parta hai */
.pc-seg-wrap{
	flex-wrap: wrap;
}

.pc-seg-sm .pc-seg-btn{
	padding: .28rem .6rem;
	font-size: .76rem;
}

.pc-note{
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	padding: .75rem .9rem;
	border-radius: var(--wiz-radius-card);
	font-size: .8rem;
	line-height: 1.7;
	color: var(--wiz-text-muted);
	background: color-mix(in srgb, var(--wiz-primary) 6%, transparent);
	border: 1px solid color-mix(in srgb, var(--wiz-primary) 22%, transparent);
}

.pc-note i{
	color: var(--wiz-primary);
	font-size: .95rem;
	margin-top: .15rem;
	flex-shrink: 0;
}

.pc-note b{
	color: var(--wiz-text);
}

.pc-hist-calc{
	font-family: var(--wiz-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
	font-size: .8rem;
	color: var(--wiz-text-muted);
}

.pc-hist-result{
	font-weight: 700;
	color: var(--wiz-text);
}

.pc-hist-when{
	white-space: nowrap;
	color: var(--wiz-text-muted);
	font-size: .78rem;
}

.pc-empty{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 2.4rem 1rem;
	border: 1px dashed var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface-2);
}

.pc-empty-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: .7rem;
	border-radius: var(--wiz-radius-card);
	font-size: 1.4rem;
	color: var(--wiz-primary);
	background: color-mix(in srgb, var(--wiz-primary) 12%, transparent);
}

.pc-empty-title{
	font-family: var(--wiz-font-display);
	font-size: 1rem;
	font-weight: 700;
	color: var(--wiz-text);
}

.pc-empty-note{
	font-size: .82rem;
	color: var(--wiz-text-muted);
	max-width: 26rem;
}


/*----------------------------------------------------------
	007b — PRESETS, QATAREIN, FAVORITES
----------------------------------------------------------*/

.pc-presets{
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
	margin-top: .4rem;
}

.pc-preset{
	padding: .2rem .55rem;
	border: 1px solid var(--wiz-border);
	border-radius: 999px;
	background: var(--wiz-surface);
	font-size: .74rem;
	font-weight: 600;
	color: var(--wiz-text-muted);
	font-variant-numeric: tabular-nums;
	transition: color .15s ease, border-color .15s ease;
}

.pc-preset:hover{
	color: var(--wiz-primary);
	border-color: var(--wiz-primary);
}

.pc-preset:focus-visible{
	outline: 2px solid var(--wiz-primary);
	outline-offset: 1px;
}

/* grade aur split ki barhti ghatti qatarein */
.pc-rows td{
	padding: .4rem .35rem;
	vertical-align: middle;
}

.pc-rows td:first-child{
	padding-left: 0;
}

.pc-rows .form-control{
	font-size: .85rem;
	font-variant-numeric: tabular-nums;
	background: var(--wiz-surface);
}

.pc-row-drop{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-btn);
	background: var(--wiz-surface);
	color: var(--wiz-text-muted);
	font-size: .8rem;
	transition: color .15s ease, border-color .15s ease;
}

.pc-row-drop:hover{
	color: #dc2626;
	border-color: #dc2626;
}

.pc-row-drop:focus-visible{
	outline: 2px solid var(--wiz-primary);
	outline-offset: 1px;
}

/* favorites — card, kyunke har ek ka apna naam aur apne buttons hain */
.pc-fav{
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: .9rem 1rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface-2);
}

.pc-fav-name{
	font-family: var(--wiz-font-display);
	font-size: .92rem;
	font-weight: 700;
	color: var(--wiz-text);
	word-break: break-word;
}

.pc-fav-tool{
	display: inline-block;
	margin-top: .2rem;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--wiz-primary);
}

.pc-fav-calc{
	margin-top: .5rem;
	font-family: var(--wiz-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
	font-size: .76rem;
	line-height: 1.6;
	color: var(--wiz-text-muted);
	word-break: break-word;
}

.pc-fav-result{
	margin-top: .4rem;
	font-size: .9rem;
	font-weight: 700;
	color: var(--wiz-text);
	word-break: break-word;
}

.pc-fav-actions{
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-top: auto;
	padding-top: .8rem;
}

.pc-hist-tool{
	font-size: .78rem;
	color: var(--wiz-text-muted);
	white-space: nowrap;
}

.pc-hist-calc{
	font-family: var(--wiz-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
	font-size: .78rem;
	color: var(--wiz-text-muted);
}

.pc-hist-result{
	font-weight: 700;
	color: var(--wiz-text);
}

.pc-hist-when{
	white-space: nowrap;
	color: var(--wiz-text-muted);
	font-size: .76rem;
}

.pc-ask-field{
	margin-bottom: 1rem;
}


/*----------------------------------------------------------
	008 — SETTINGS
----------------------------------------------------------*/

.pc-settings{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1rem;
}

.pc-set-group{
	padding: 1.05rem 1.1rem;
	border: 1px solid var(--wiz-border);
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface-2);
}

.pc-set-title{
	display: flex;
	align-items: center;
	gap: .45rem;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wiz-text-muted);
	margin: 0 0 .8rem;
}

.pc-set-title i{
	color: var(--wiz-primary);
	font-size: .9rem;
}

.pc-set-row{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .8rem;
	padding: .45rem 0;
	border-bottom: 1px solid var(--wiz-border);
}

.pc-set-row:last-child{
	border-bottom: 0;
	padding-bottom: 0;
}

.pc-set-label{
	font-size: .82rem;
	font-weight: 600;
	color: var(--wiz-text);
	margin: 0;
}

.pc-set-row .form-select{
	max-width: 190px;
}

.pc-set-row .form-check-input:checked{
	background-color: var(--wiz-primary);
	border-color: var(--wiz-primary);
}


/*----------------------------------------------------------
	009 — CONFIRM DIALOG + TOAST
----------------------------------------------------------*/

.pc-ask{
	position: absolute;
	inset: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: color-mix(in srgb, var(--wiz-text) 35%, transparent);
	backdrop-filter: blur(2px);
}

.pc-ask-box{
	width: 100%;
	max-width: 380px;
	padding: 1.2rem 1.3rem;
	border-radius: var(--wiz-radius-card);
	background: var(--wiz-surface);
	border: 1px solid var(--wiz-border);
	box-shadow: var(--wiz-shadow-md);
}

.pc-ask-title{
	display: block;
	font-family: var(--wiz-font-display);
	font-size: 1rem;
	font-weight: 700;
	color: var(--wiz-text);
	margin-bottom: .3rem;
}

.pc-ask-note{
	display: block;
	font-size: .82rem;
	line-height: 1.6;
	color: var(--wiz-text-muted);
	margin-bottom: 1rem;
}

.pc-ask-actions{
	display: flex;
	justify-content: flex-end;
	gap: .5rem;
}


/*----------------------------------------------------------
	010 — FULL SCREEN

	Do soorat: browser ka Fullscreen API, aur (jab wo mana kar de) CSS
	wala fallback. Dono me app ke andar website ka header/footer nazar
	nahi aata — app poori screen le leta hai.
----------------------------------------------------------*/

.pc-app.is-full{
	position: fixed;
	inset: 0;
	z-index: 1055;
	width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	margin: 0;
	border: 0;
	border-radius: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

@supports not (height: 100dvh){

	.pc-app.is-full{
		height: 100vh;
		max-height: 100vh;
	}
}

.pc-app.is-full .pc-body{
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 1.25rem 1.5rem 1.5rem;
}

/* page ke peeche scroll na chale jab app poori screen par ho */
body.pc-locked{
	overflow: hidden;
}

/* :fullscreen me browser khud kaali background deta hai — apni le lete hain */
.pc-app:fullscreen{
	background: var(--wiz-body-bg);
	overflow-y: auto;
}


/*----------------------------------------------------------
	013 — RESPONSIVE
----------------------------------------------------------*/

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

	/*
		Do column ke liye jagah nahi bachi: 380px se tang jawab ka
		khana number ko tor deta hai.
	*/
	.pc-split{
		grid-template-columns: 1fr;
	}

	.pc-panel-out{
		position: static;
	}
}

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

	.pc-body{
		padding: 1rem .85rem;
	}

	.pc-bar-sub{
		display: none;		/* jagah sawal ko chahiye */
	}

	.pc-tabs{
		padding: .35rem .5rem 0;
	}

	.pc-out-big{
		font-size: 1.7rem;
	}

	/* jawab ko chipkana chhoti screen par ulta nuqsaan hai */
	.pc-panel-out{
		position: static;
	}

	.pc-actions .btn,
	.pc-out-actions .btn{
		flex: 1 1 auto;
	}

	.pc-set-row{
		flex-wrap: wrap;
	}

	.pc-set-row .form-select{
		max-width: 100%;
		width: 100%;
	}
}

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

	.pc-frac .pc-input{
		width: 100%;
	}

	.pc-seg{
		width: 100%;
	}

	.pc-seg-btn{
		flex: 1 1 0;
	}
}