/**
 * Main CSS
 *
 * This file is for layout/positioning/sizing. Anything related to colour should go in the
 * theme-*.css file(s) so we  have the option of having different colour schemes later.
 *
 * @author     Kitson Consulting <contact at kitson-consulting dot co dot uk>
 * @copyright  2019-2026 SIPit Pro Limited
 * @date       03/08/2026
 * @licence    All rights reserved
 * @package    sipitpro-web
 * @see        https://gui.sipitpro.com/
 */


/**
 * General layout
 */

html
{
	position: relative;
	min-height: 100%;
	min-width: 280px;
}

#main
{
	margin-top: 3rem;
	margin-bottom: 75px; /* Must be >= footer height */
}

#session-tracker
{
	display: none;
}

.navbar
{
	border-bottom-width: 1px;
	border-bottom-style: solid;
}

.navbar-brand
{
	padding: 0;
}

.navbar-text
{
	margin: 0 auto 0.3rem auto;
	padding-top: 0;
	padding-bottom: 0;
	font-size: 1.5rem;
}

.navbar .nav .nav-item > a
{
	margin: 0.375rem 0.5rem;
}

.navbar .lang-switcher-container
{
	margin-left: 0.5rem;
}

#main .content
{
	margin-top: 45px;
}

footer
{
	position: absolute;
	bottom: 0;
	min-height: 25px;
	line-height: 22px;
	border-top-width: 1px;
	border-top-style: solid;
}

footer .nav li
{
	margin-left: 1rem;
}

img
{
	height: auto;
}

br.responsive-break, #popup
{
	display: none;
}

/* Prepend a bulletpoint */
.bull::before
{
	content: '\2022';
	margin-right: 0.3rem;
}

/* Error messages using Bootstrap's 'Toasts' feature */
#toasts .toast
{
	margin-right: auto;
	margin-left: auto;
}

#toasts .toast:first-child
{
	margin-top: -1rem;
}

#toasts .toast:last-child
{
	margin-bottom: 2rem;
}

#toasts .toast .toast-header *
{
	background: none;
}

#toasts .toast .toast-header .fas
{
	padding-right: 0.5rem;
}


/**
 * Account section in header
 */

 #navbar
 {
	 /* This is aimed at very narrow viewports, to keep the drop-downs from shunting off-screen to the left */
	justify-content: flex-end;
 }

nav .user-section
{
	font-size: 22px;
}

/* Notification counter */
nav .user-section .badge
{
	position: absolute;
	font-size: 60%;
	font-family: sans--apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
	display: none;
}

/* Caret down symbol */
nav .user-section #account-menu .dropdown-toggle::after
{
	margin-left: 5px;
}

nav .user-section #notification-menu .dropdown-toggle::after
{
	display: none;
}

nav .user-section .dropdown-menu
{
	left: unset;
	right: 0;
	font-size: 14px;
	padding-top: 0;
}

.dropdown-menu,
.ui-menu
{
	border-style: solid none none solid;
	border-width: 1px;
}


/**
 * jQuery UI autocomplete - make it more consistent with Bootstrap dropdowns
 */
.ui-menu
{
	margin-top: -2px;
	padding: 0.5rem 0;
	border-radius: 0 0 0.25rem 0.25rem;

	/* Prevent autocomplete suggestions from spilling off page and breaking the footer */
	overflow-y: auto;
	overflow-x: hidden;
	padding-right: 20px;
}

.dropdown-menu .dropdown-header
{
	font-weight: bold;
	position: relative;
}

.dropdown-menu ul
{
	padding: 0;
}

.dropdown-menu li
{
	list-style-type: none;
}

.dropdown-menu .dropdown-item .fas
{
	width: 24px;
}

nav .user-section #account-menu .dropdown-menu .dropdown-header
{
	padding-left: 52px;
}

nav .user-section .dropdown-menu .dropdown-header .fas
{
	position: absolute;
	top: 50%;
	margin-top: -0.35rem;
	left: 1.6rem;
}

nav .user-section .dropdown-menu .dropdown-header .subtext
{
	font-weight: normal;
	display: block;
	font-size: 85%;
	margin: -0.2rem 0 0 1px;
}

nav .user-section .dropdown-menu .dropdown-divider:nth-child(2)
{
	margin-top: 0;
}

nav .user-section #notification-menu .dropdown-menu
{
	width: 400px;
}

nav .user-section #notification-menu .dropdown-menu .dropdown-item
{
	position: relative;
	padding: 0.5rem 2rem 0.75rem;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	white-space: normal;
}

nav .user-section #notification-menu .dropdown-item .toggle-read
{
	position: absolute;
	top: 50%;
	margin-top: -1.2rem;
	right: 0;
}

nav .user-section #notification-menu .dropdown-item .toggle-read:hover::before
{
	content: '\f192';
}

nav .user-section #notification-menu .dropdown-item .toggle-read::before
{
	font-size: 80%;
	font-family: 'Font Awesome 5 Free';
	content: '\f111'; /* fa-bell */
	font-weight: normal;
}

nav .user-section #notification-menu .dropdown-item.unread .toggle-read::before
{
	font-weight: 900;
}

.btn-group .btn.fas
{
	transition: none;
}

.btn-group .btn.fas:active,
.btn-group .btn.fas:focus
{
	box-shadow: none;
}

.btn .fas
{
	padding-right: 0.2rem;
	opacity: 0.8;
}

.btn:hover .fas
{
	opacity: 1;
}

.btn-round
{
	border-radius: 50%;
	padding: 0.5rem;
}

.btn-round.fa-times
{
	padding: 0.3rem 0.5rem;
}

.btn-round.fa-minus
{
	padding: 0.3rem 0.4rem 0.4rem 0.4rem;
}

.btn-round.fa-star
{
	padding: 0.4rem 0.4rem 0.5rem 0.4rem;
}

.btn-round.fa-phone-volume
{
	padding: 0.4rem 0.5rem;
}


/**
 * Forms
 */

meter,
meter.form-control
{
	/* Reset the default appearance */
	-webkit-appearance: none;
	appearance: none;

	/* Applicable only to Firefox */
	background: none;
	background-color: none;

	/* Our custom bits */
	position: absolute;
	margin-top: -7px;
	height: 3px;
	padding: 0 15px 0 5px;
	width: 100%;
}

meter::-webkit-meter-bar,
meter.form-control::-webkit-meter-bar
{
	background: none;
	transition: width .4s linear;
}

meter[value="1"]::-webkit-meter-optimum-value { background: red; }
meter[value="2"]::-webkit-meter-optimum-value { background: orange; }
meter[value="3"]::-webkit-meter-optimum-value { background: yellow; }
meter[value="4"]::-webkit-meter-optimum-value { background: green; }

meter[value="1"]::-moz-meter-bar { background: red; }
meter[value="2"]::-moz-meter-bar { background: orange; }
meter[value="3"]::-moz-meter-bar { background: yellow; }
meter[value="4"]::-moz-meter-bar { background: green; }

.feedback
{
	color: #99aabb;
	font-size: 90%;
	padding: 0 .25em;
	margin-top: 1em;
}

.form-check-label
{
	margin-left: 0.5rem;
}

/* Give some space to buttons/links at end of forms next to submit button */
.form-group:last-child a.btn
{
	margin-left: 0.5rem;
}

#main .fas.dropdown-toggle::after
{
	/* Hide Bootstrap's caret-down in favour of our FontAwesome ellipsis */
	display: none;
}

.dropdown-menu .dropdown-item::after
{
	font-family: 'Font Awesome 5 Free';
	font-weight: 500;
	position: absolute;
	right: 1rem;
}

.dropdown-menu ul.checkboxes .dropdown-item::after
{
	content: '\f0c8';
}

.dropdown-menu ul.checkboxes .dropdown-item.checked::after
{
	content: '\f14a';
}

.dropdown-menu ul.radios .dropdown-item::after
{

	content: '\f111';
}

.dropdown-menu ul.radios .dropdown-item.checked::after
{
	content: '\f192';
}

.input-group-append label.input-group-text
{
	cursor: pointer;
}


/**
 * Account page
 */

html.account h3
{
	margin-top: 3rem;
}

html.add-minutes form#top_up_minutes
{
	margin-top: 2rem;
}


/**
 * Register page and change password page
 */

#distributor_code
{
	text-transform: uppercase;
}

#password-strength-help
{
	position: absolute;
	top: 0;
	right: 0;
}

#password-strength-text
{
	text-transform: lowercase;
}

.form-text.password-repeat
{
	position: relative;
	top: -0.8rem;
}


/**
 * Call log page
 */

html.call-log #filter-form
{
	margin-top: 2rem;
}


/**
 * Dashboard page
 */

html.dashboard h3
{
	font-size: 1.5rem;
	font-size: 1.5rem;
	margin-bottom: 0.8rem;
}

html.dashboard #main
{
	margin-top: 0;
}

/* Make vertical scrollbar on right-hand column visible when it exists */
html.dashboard #container
{
	padding-right: 0;
}
html.dashboard #main > .row
{
	margin-right: 0;
}

html.dashboard #main > .row > *
{
	padding-top: 5px;
	margin-bottom: 3rem;
}

html.dashboard #toasts
{
	position: absolute;
	top: 80px;
	z-index: 99;
	left: 20px;
	border: none !important;
}

html.dashboard #toasts .toast:first-child
{
	margin-top: unset;
}


/**
 * Dashboard - Codecs panel
 */

.flag
{
	position: relative;
	width: 25px;
	margin: -5px 0.2rem 0 0.5rem;
}

.codec-instructions,
.codec-instructions-hide-text
{
	display: none;
}

#my-codecs-container .top
{
	position: relative;
}

#my-codecs-container .top .add-codec,
#new-call-container #toggle-new-call
{
	position: absolute;
	right: 0;
	top: 3px;
	max-width: 40%;
}

#active-connections-container > h3
{
	max-width: 40%;
}

.new-call-buttons
{
	min-height: 2rem;
	margin-bottom: 1rem;
}

#toggle-new-call
{
	white-space: nowrap;
}

#show-favourite-connections
{
	margin-top: 3px;
}

#save-connection,
#favourite-connection-name,
#cancel-favourite-connections,
#favourite-connections,
.save-connection,
.favourite-connection-name,
.cancel-favourite-connections
{
	display: none;
}

.favourite-connection-table-actions
{
	display: flex;
	align-items: center;
}

#favourite-connection-table
{
	width: 100%;
}

#favourite-connection-table th, #favourite-connection-table td
{
	font-size: .7rem;
}

th[aria-sort='none']::after,
th[aria-sort='ascending']::after,
th[aria-sort='descending']::after
{
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
}

th[aria-sort='none']::after
{
	content: '\f0dc';
}

th[aria-sort='ascending']::after
{
	content: '\f0d8';
}

th[aria-sort='descending']::after
{
	content: '\f0d7';
}

th.sorter-false::after
{
	content: '';
}

#my-codecs-container .top .form-row,
#active-connections-content
{
	margin-top: 30px;
}

.active-connection-favourite
{
	margin-top: 0.5em;
	margin-left: 1em;
}

.active-connection-favourite > *
{
	margin-right: 0.2em;
}

#my-codecs-container .top .btn.dropdown-toggle
{
	position: absolute;
	right: 0;
	top: 50%;
	margin-top: -1rem;
}

/* Make sure there's space reserved for the status badge */
#my-codecs-container .dropdown-menu .dropdown-item.checked
{
	padding-right: 4rem;
}

#my-codecs-content
{
	margin-top: 10px;
}

.codec,
.call,
#credit-status-content
{
	position: relative;
	padding: 0.5rem 10px;
	margin-bottom: 0.5rem;
	border-width: 1px;
	border-style: solid;
	border-radius: 4px;
}

.codec-list .codec
{
	min-height: 75px;
}

.codec .codec-top
{
	position: relative;
	padding-right: 150px; /* Force .last-seen etc. to go onto a new line instead of overlapping with .status.badge */
}

.codec .name,
.codec .friend
{
	display: inline-block;
}

.codec .friend,
.codec .last-seen
{
	margin-left: 0.2rem;
	display: inline-block; /* Required to stop 'last seen' breaking onto two lines unnecessarily on small devices, which caused .status-container to overlap with Codec name */
	position: relative;
	bottom: 2px;
}

.codec .status.badge
{
	position: absolute;
	top: 10px;
	right: 50px; /* Should match 'padding-right' value for .codec-list .codec */
}

.codec .btn-group
{
	position: absolute;
	right: 0;
	top: 50%;
	margin-top: -2px;
}


/**
 * Dashboard - Make Connection panel
 */

#new-call-container
{
	position: relative;
}

#new-call-content
{
	padding-right: 15px;
	padding-bottom: 2rem;
	margin-bottom: 2rem;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}

#new-call-content,
#new-call-content #alg-container,
#new-call-content #submit-container
{
	display: none;
}

#new-call-content #submit-container
{
	margin-top: 1rem;
}

#client-dest-wrapper
{
	position: relative;
}

#client-dest-number
{
	border-right: 0;
}

#client-dest-toggle
{
	border-left: 0;
	border-radius: 0 0.25rem 0.25rem 0;
	padding-left: 0.5rem;
	padding-right: 0.25rem;
}

#client-dest-wrapper .input-group-append
{
	padding-right: 0;
}

#client-dest-toggle i
{
	font-size: 0.85em;
	padding-right: 2px;
}

#client-dialled-numbers
{
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1050;
	border: 1px solid rgba( 0, 0, 0, 0.15 );
	border-top: 0;
	border-radius: 0 0 0.25rem 0.25rem;
	max-height: 12rem;
	overflow-y: auto;
}

#client-dialled-numbers a
{
	display: block;
	padding: 0.25rem 0.75rem;
	text-decoration: none;
}

#submit-container > div > *
{
	margin-right: 0.2em;
}

#cancel-call
{
	display: none;
	margin: 0 auto;
}

#start-call
{
	display: block;
	margin: 0 auto;
}

#call-progress-container
{
	text-align: center;
	margin-top: 1.5rem;
}


/**
 * Dashboard - Current Connections panel
 */

.call
{
	padding-right: 15px;
}

.call .codec,
.call .codec:hover
{
	display: block;
	text-align: center;
	margin-bottom: 0;
	text-decoration: none;
	cursor: default;
}

.call .top
{
	margin-bottom: 0.5rem;
}

.call .top .sender
{
	padding-right: 0;
}

.call .top .receiver
{
	padding-left: 0;
}

.call .top .codec-link
{
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-left-width: 6px;
	border-left-style: solid;
}

.call .flag
{
	height: 1em;
	width: auto;
	margin: 0 0 0 0.3rem;
	vertical-align: middle;
}

.call .name-line
{
	/* Keep the codec icon glued to the name text instead of wrapping onto its own line */
	white-space: nowrap;
}

.codec-link.quality-good
{
	border-left-color: #28a745;
}

.codec-link.quality-middle
{
	border-left-color: #ffc107;
}

.codec-link.quality-poor
{
	border-left-color: #dc3545;
}

.call .connection-symbol-container,
#new-call-content .connection-symbol-container
{
	padding-left: 0;
	padding-right: 0;
}

.call .connection-symbol-container .connection-symbol.line
{
	/*-webkit-animation: connection-active 1s infinite;
	-moz-animation: connection-active 1s infinite;
	-o-animation: connection-active 1s infinite;
	-ms-animation: connection-active 1s infinite;*/
	animation: connection-active 1s infinite;
}

.call .connection-symbol-container .connection-symbol.line.ringing
{
	animation: connection-ringing 1s infinite;
}

/* A FontAwesome icon representing a connection */
.connection-symbol-container .connection-symbol.fas
{
	font-size: 1.2rem;
    margin: 0 0.3rem;
}

/* A line representing a connection */
.connection-symbol-container .connection-symbol.line
{
	border-style: none none solid none;
	border-width: 2px;
	width: 100%;
	height: 0;
	display: inline-block;
	position: absolute;
	top: 50%;
	margin: -1px 0 0 0;
}

.connection-symbol-container .connection-symbol.line.ringing
{
	border-style: none none dashed none !important;
}

#new-call-content .connection-symbol-container .connection-symbol.line
{
	top: 50px;
}

.call .duration
{
	margin-right: 1rem;
}

.call .btns-connection-control
{
	display: flex;
	flex-direction: column;
}

.call .btns-connection-control > div
{
	text-align: right;
}

.call .btns-connection-control div:first-child
{
	margin-bottom: .25rem;
}

.call .btn-container
{
	margin: 1rem;
	padding: 0 .5rem;
}

/* Rotate glyph on red phone buttons to indicate 'putting down the receiver' */
.call .btn-container .disconnect-call,
#cancel-call,
.cancel-call
{
	transform: rotate(-135deg);
}

.company-name
{
	font-style: italic;
}

.call .details-heading,
.call .details-heading:hover,
.codec .details-heading,
.codec .details-heading:hover
{
	display: inline-block;
	cursor: pointer;
	margin-top: 0;
	margin-bottom: 0.1rem;
	padding-left: 0.7rem;
	position: relative;
	text-decoration: none;
}

.call .details-heading,
.call .details-heading:hover
{
	display: flex;
	justify-content: space-between;
}

.call.expanded .details,
.codec.expanded .details
{
	margin-top: 5px;
	border-top-style: solid;
	border-top-width: 1px;
	padding: 0.5rem 0 5px 0;
	margin-left: 0;
	margin-right: 0;
}

.call .details-heading::before,
.codec .details-heading::before
{
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: '\f0da';
	position: absolute;
	left: 0.1rem;
}

.call.expanded .details-heading::before,
.codec.expanded .details-heading::before
{
	content: '\f0d7';
	left: 0;
}

.call.expanded .details > *
{
	margin-bottom: 0.5rem;
}

.call.expanded .details p
{
	margin-bottom: 0.3rem;
}


/**
 * Dashboard - Codec Status panel
 * Dashboard - Credit Status panel
 */

.btn-container .btn
{
	margin: 0.5rem 0.5rem 0 0;
}

#codec-status-content,
#credit-status-content
{
	margin-bottom: 0;
}

.codec .details p,
#credit-status-content p,
html.codec-status p,
html.credit-status p
{
	margin-bottom: 0.3rem;
}

.codec .details .btn,
#find-friend-codecs-content .btn,
#credit-status-content .btn
{
	padding: 0.25rem 0.5rem;
	font-size: 0.875rem;
	line-height: 1.5;
	border-radius: 0.2rem;
}


/**
 * Company list
 */

#company-list td
{
	vertical-align: middle;
}
#company-list .logo
{
	margin: 0 auto;
	display: block;
}


/**
 * Codec groups and Share groups
 */

html.codec-group-details .group-delete-form,
html.friend-group-details .group-delete-form
{
	text-align: right;
}

html.codec-group-details .group-delete-form .btn,
html.friend-group-details .group-delete-form .btn
{
	position: relative;
	top: 50%;
	margin-top: -1.75rem;
}

html.codec-group-details .group-details,
html.friend-group-details .group-details
{
	margin-top: 1rem;
	margin-bottom: 0;
}

html.friend-group-details .request-status
{
	margin-bottom: 3rem;
}

html.codec-group-details .table,
html.friend-group-details .table
{
	margin-top: 1rem;
}

html.codec-group-details td .btn,
html.friend-group-details td .btn,
html.share-wizard #selected-codecs .btn
{
	margin-right: 0.4rem;
}

html.codec-group-details #main > .btn-container,
html.friend-group-details #main > .btn-container
{
	margin-top: 4rem;
}

html.share-wizard #selected-codecs
{
	margin-bottom: 2rem;
}

.codec-to-share
{
	margin-bottom: 0.8rem;
}

.codec-name-small
{
	font-size: 0.8rem;
}

p.help
{
	margin-bottom: 3rem;
}

p.help.text-muted a
{
	opacity: 0.9;
}

.help-collapse
{
	margin-bottom: 2rem;
}

/**
 * Media queries aligned with Bootstrap's breakpoints
 */
/* Extra-small devices */
@media (max-width: 575px)
{

	#favourite-connection-table .sip-name
	{
		word-wrap:break-word;
		max-width: 3rem;
	}

	.favourite-connection-table-actions form
	{
		margin-left: 5px;
	}

	#call-log th, #call-log td
	{
		font-size: .7rem;
	}

	#call-log .date-group-range
	{
		text-align: center;
	}

	.hide-for-mobile
	{
		display: none;
	}

	br.responsive-break
	{
		display: initial;
	}

	span.responsive-bull
	{
		display: none;
	}

	.navbar-brand
	{
		width: 25%;
		margin-top: -1%;
	}

	.navbar-brand img
	{
		width: 100%;
	}

	.navbar-text
	{
		font-size: 0.8rem;
		margin-top: 0.3rem;
	}

	nav .user-section
	{
		margin-right: -10px;
	}

	nav .user-section .nav-link
	{
		padding: 0.5rem 0.9rem;
	}

	nav .user-section .dropdown-menu
	{
		right: -10px;
		max-width: 290px;
	}

	.lang-switcher-container select
	{
		display: none;
	}

	#new-call-container .connection-symbol-container
	{
		display: none;
	}

	#footer
	{
		line-height: 1em;
		padding-top: 0.25rem;
	}

	#footer ul.float-sm-right
	{
		margin-bottom: 0.25rem;
		margin-top: 0.5rem;
	}

	#footer ul.float-sm-right *
	{
		margin-left: 0;
		margin-right: 0.5rem;
	}

	/* Shrink the decorative connector line (it doesn't need much room) so the codec
	   name/icon boxes can grow to fit their content with fewer line breaks. The
	   button column is left untouched so its buttons keep the width they need. */
	.call .top .connection-symbol-container
	{
		-ms-flex: 0 0 8.333333%;
		flex: 0 0 8.333333%;
		max-width: 8.333333%;
	}

	.call .top .sender,
	.call .top .receiver
	{
		-ms-flex: 1 1 0;
		flex: 1 1 0;
		max-width: none;
		min-width: 0;
	}

	/* Restore the sender/receiver call stats to two columns instead of stacking (col-sm-* only takes effect at 576px+) */
	.call .details.row > .sender,
	.call .details.row > .receiver
	{
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px)
{
	.favourite-connection-table-actions form
	{
		margin-left: 1rem;
	}

	#call-log th, #call-log td
	{
		font-size: .7rem;
	}

	#call-log .date-group-range
	{
		text-align: right;
	}

	#call-log .date-group-range input[type=date]
	{
		outline: none !important;
		box-shadow: none !important;
		color: inherit !important;
		background-color: inherit !important;
		border: none !important;
	}

	nav .user-section
	{
		margin-right: 0.8rem;
	}

	.form-text.password-repeat
	{
		top: 0.3rem;
	}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px)
{

}

/* Large devices (desktops, 992px and up) */
@media ( min-width: 992px )
{

	html.dashboard,
	html.dashboard body,
	html.dashboard .outer,
	html.dashboard #container,
	html.dashboard #main,
	html.dashboard #main > .row
	{
		overflow: hidden;
		height: 100%;
	}

	html.dashboard #main > .row > *
	{
		border-right-width: 1px;
		border-right-style: solid;
		overflow-x: hidden;
		overflow-y: auto;
		height: 100%;
	}

	.call .disconnect-call
	{
		right: 16%;
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px)
{
	#call-log th, #call-log td
	{
		font-size: 1rem !important;
	}

	.call .disconnect-call
	{
		right: 24%;
	}
}

/* Pagination Controls */
.pagination-nav
{
	margin: 2rem 0;
}

.pagination-nav .pagination
{
	gap: 0.25rem;
}

.pagination-nav .page-link
{
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
}

.pagination-nav .page-input-item
{
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0 0.5rem;
}

.pagination-nav .page-input
{
	width: 4rem;
	height: 2.5rem;
	text-align: center;
	padding: 0.25rem;
	border-radius: 0.25rem;
}

.pagination-nav .page-total
{
	white-space: nowrap;
	font-weight: 500;
}

/* Remove spinner arrows from number input */
.pagination-nav .page-input::-webkit-outer-spin-button,
.pagination-nav .page-input::-webkit-inner-spin-button
{
	-webkit-appearance: none;
	margin: 0;
}

.pagination-nav .page-input[type=number]
{
	-moz-appearance: textfield;
}