/*
 * Sirius su Bootstrap 5.3: quello che in Bootstrap 4 alpha era diverso e che main.css e custom.css danno per scontato.
 * Prima parte: vale ovunque e riporta il PC com'era. Seconda parte (sotto 1024 px): telefono e tablet.
 */
:root {
	--bs-link-color: #0275d8; --bs-link-color-rgb: 2,117,216;
	--bs-link-hover-color: #014c8c; --bs-link-hover-color-rgb: 1,76,140;
	--bs-border-radius: .25rem; --bs-border-radius-sm: .2rem; --bs-border-radius-lg: .3rem;
	--bs-primary: #0275d8; --bs-primary-rgb: 2,117,216;
	--bs-success: #5cb85c; --bs-success-rgb: 92,184,92;
	--bs-info: #5bc0de; --bs-info-rgb: 91,192,222;
	--bs-warning: #f0ad4e; --bs-warning-rgb: 240,173,78;
	--bs-danger: #d9534f; --bs-danger-rgb: 217,83,79;
}
a { text-decoration: none; }
a:hover { text-decoration: underline; }
a.btn:hover, a.nav-link:hover, a.dropdown-item:hover, a.page-link:hover, a.list-group-item:hover, a.navbar-brand:hover, a.badge:hover, a.label:hover, .sidebar-1 a:hover { text-decoration: none; }
label { margin-bottom: .5rem; }

/* barra in alto: in alpha e' fatta di float */
.navbar-fixed-top { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; }
.navbar.navbar-1 { display: block; flex-wrap: nowrap; }
.navbar-1 > .nav.navbar-nav { display: block; }
.navbar-1 > .nav.navbar-nav > .nav-item { float: left; }
.navbar-1 > .navbar-brand { float: left; margin-right: 1rem; padding-top: .25rem; padding-bottom: .25rem; font-size: 1.25rem; }
.navbar-1 .nav-link { padding: .425rem 0; }

/* tabelle: lo sfondo e il colore li decide il tema */
.table { --bs-table-bg: transparent; --bs-table-color: inherit; --bs-table-color-state: inherit; --bs-table-border-color: rgba(127,127,127,.3); color: inherit; }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: rgba(127,127,127,.08); color: inherit; }
.table-hover > tbody > tr:hover > * { --bs-table-bg-state: rgba(127,127,127,.12); color: inherit; }

/* moduli */
select.form-control { appearance: auto; }
.form-control-sm, .form-control-lg { min-height: 0; }

/* bottoni: colori di 4 alpha */
.btn-primary { --bs-btn-bg: #0275d8; --bs-btn-border-color: #0275d8; --bs-btn-hover-bg: #025aa5; --bs-btn-hover-border-color: #01549b; --bs-btn-active-bg: #025aa5; --bs-btn-active-border-color: #01549b; --bs-btn-disabled-bg: #0275d8; --bs-btn-disabled-border-color: #0275d8; }
.btn-success { --bs-btn-bg: #5cb85c; --bs-btn-border-color: #5cb85c; --bs-btn-hover-bg: #449d44; --bs-btn-hover-border-color: #419641; --bs-btn-active-bg: #449d44; --bs-btn-active-border-color: #419641; --bs-btn-disabled-bg: #5cb85c; --bs-btn-disabled-border-color: #5cb85c; }
.btn-info { --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #fff; --bs-btn-bg: #5bc0de; --bs-btn-border-color: #5bc0de; --bs-btn-hover-bg: #31b0d5; --bs-btn-hover-border-color: #2aabd2; --bs-btn-active-bg: #31b0d5; --bs-btn-active-border-color: #2aabd2; --bs-btn-disabled-bg: #5bc0de; --bs-btn-disabled-border-color: #5bc0de; }
.btn-warning { --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #fff; --bs-btn-bg: #f0ad4e; --bs-btn-border-color: #f0ad4e; --bs-btn-hover-bg: #ec971f; --bs-btn-hover-border-color: #eb9316; --bs-btn-active-bg: #ec971f; --bs-btn-active-border-color: #eb9316; --bs-btn-disabled-bg: #f0ad4e; --bs-btn-disabled-border-color: #f0ad4e; }
.btn-danger { --bs-btn-bg: #d9534f; --bs-btn-border-color: #d9534f; --bs-btn-hover-bg: #c9302c; --bs-btn-hover-border-color: #c12e2a; --bs-btn-active-bg: #c9302c; --bs-btn-active-border-color: #c12e2a; --bs-btn-disabled-bg: #d9534f; --bs-btn-disabled-border-color: #d9534f; }
.btn-secondary { --bs-btn-color: #373a3c; --bs-btn-hover-color: #373a3c; --bs-btn-active-color: #373a3c; --bs-btn-disabled-color: #373a3c; --bs-btn-bg: #fff; --bs-btn-border-color: #ccc; --bs-btn-hover-bg: #e6e6e6; --bs-btn-hover-border-color: #adadad; --bs-btn-active-bg: #e6e6e6; --bs-btn-active-border-color: #adadad; --bs-btn-disabled-bg: #fff; --bs-btn-disabled-border-color: #ccc; }

/* finestre: stessa larghezza e crocetta a destra anche se nell'HTML viene prima del titolo */
.modal { --bs-modal-width: 600px; }
.modal-lg { --bs-modal-width: 900px; }
.modal-header .close { order: 5; margin-left: auto; color: inherit; opacity: .8; text-shadow: none; padding: .25rem .5rem; } /* con la palette scura la crocetta nera non si vedeva */

/* schede con margine come in alpha */
.card { margin-bottom: .9375rem; }

/* SweetAlert 2.11: testo scuro su fondo chiaro anche con la palette scura; pulsanti del tema */
.swal2-popup { font-size: 1rem; }
.swal2-container { z-index: 2060; }

/* in 4 alpha era larga il 100%: senza, accanto a un titolo float la tabella si stringe e resta tagliata (gestionaleNew) */
.table-responsive { display: block; width: 100%; }

/* Entrati: con il menu aperto e 3 colonne strette, "Telefonata" usciva dal bottone: margini interni minori, il bottone resta uguale */
.text-widget-2 .btn.p-50 { padding-left: .5rem !important; padding-right: .5rem !important; }

/* Bottoni piccoli delle liste (height o max-height nello stile): l'icona o la lettera restavano sul bordo in basso */
.btn.btn-circle[style*="height"] { padding-top: 0; padding-bottom: 0; line-height: 16px; }
.btn.btn-circle[style*="height"] > h6 { margin: 0 !important; line-height: 16px; font-size: .75rem; }

/* Appunto per lo sviluppatore nella barra (solo utente 2): dove non sta su una riga copriva il contenuto e spingeva fuori le icone */
@media (max-width: 1699.98px) { .navbar-1 > .nav.navbar-nav.gm-nota-dev { display: none; } }
@media (max-width: 1023.98px) { .navbar-1 > .nav.navbar-nav.pull-left:not(.toggle-layout) { display: none; } }

/* piede fuori dal contenuto: i margini negativi della riga facevano sporgere la pagina di 5 px */
.footer > .row { margin-left: 0; margin-right: 0; }

/* Orologio (bootstrap-timepicker): le frecce usavano glyphicon, font che qui non c'e': senza non si vedevano e non si potevano toccare */
.bootstrap-timepicker-widget .glyphicon-chevron-up::before { content: "\25B2"; }
.bootstrap-timepicker-widget .glyphicon-chevron-down::before { content: "\25BC"; }
.bootstrap-timepicker-widget table td a { display: block; padding: 4px 0; }
.bootstrap-timepicker-widget table td a, .bootstrap-timepicker-widget table td a * { color: #333 !important; }

/* Elenchi di preventivi e travel gift: una parola lunga nel testo allargava la tabella e la colonna Comandi usciva dalla pagina */
/* Solo la colonna di testo prima di Comandi (qui le righe sono th): su tutte le colonne di #tabella spezzava anche date e sigle a 1280 in polaris2.php */
#tabella tbody > tr > th:nth-last-child(2) { overflow-wrap: anywhere; }

/* Tendina Ordina delle tabelle a schede: esiste solo sotto 1024 px, la crea gm-sirius.js */
.gm-rwd-ordina { display: none; }

/* Polaris, anagrafiche: una mail lunga non deve far sporgere la tabella a 1280 px. Solo Email/PEC: su tutte le colonne spezzava anche P.IVA e "Fornitore" */
#tabella_anagrafiche td:nth-child(8) { overflow-wrap: anywhere; }
@media (min-width: 1164px) and (max-width: 1399.98px) { #tabella_anagrafiche td, #tabella_anagrafiche th { padding-left: 6px; } #tabella_anagrafiche td { padding-right: 6px; } }

/* Barra e menu su schermi senza colonna fissa (la soglia e' quella di main.css) */
@media (max-width: 1163px) {
	[data-layout][data-direction="ltr"] .sidebar-outer-wrapper { transition: left .25s ease-in-out; }
	body.gm-menu-aperto[data-direction="ltr"] .sidebar-outer-wrapper { left: 0 !important; box-shadow: 0 0 18px rgba(0,0,0,.5); z-index: 1060; }
	body.gm-menu-aperto::after { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 1050; }
	.close-sidebar { display: inline-block; }
}

/* =============================================================================
   Telefono e tablet. Il PC non cambia.
   ============================================================================= */
@media (max-width: 1023.98px) {
	.row, .container-fluid, .container { --bs-gutter-x: 1.25rem; }

	/* barra: su una riga, sopra il contenuto. Comandano le icone, il logo si stringe */
	[data-layout][data-direction="ltr"] .navbar.navbar-1 { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; height: 60px; padding: 0 8px !important; left: 0 !important; right: 0 !important; background-size: cover; }
	.navbar-1 > .nav.navbar-nav { flex: none; display: flex; }
	.navbar-1 > .nav.navbar-nav.pull-right { order: 3; float: none !important; }
	.navbar-1 > .nav.navbar-nav.toggle-layout { order: 0; margin-right: 6px; }
	.navbar-1 > .navbar-brand { order: 1; flex: 1 1 0; min-width: 0; margin: 0; padding: 0; float: none; overflow: hidden; }
	.navbar-1 > .navbar-brand img { height: 40px !important; width: auto !important; max-width: 100%; margin: 0 !important; object-fit: contain; object-position: left center; }
	.navbar-1 .nav-link { padding: 4px 6px; }
	.navbar-1 .nav-item img { width: 30px !important; margin: 0 !important; }
	.navbar-1 .nav-link .label { position: absolute; }
	.navbar-1 .toggle-layout .nav-link { padding: 8px 6px; font-size: 22px; line-height: 1; cursor: pointer; }

	/* contenuto */
	[data-layout][data-direction="ltr"] .main { padding-top: 70px; padding-left: 10px !important; padding-right: 10px !important; max-width: 100%; min-width: 0; }
	.main { overflow-wrap: anywhere; }
	.main * { max-width: 100%; min-width: 0; }
	.main img, .main iframe, .main video, .main embed, .main object, .main canvas { height: auto; }
	.main img { height: auto !important; }
	.main img[style*="background-image"], .main img[width][height] { height: revert-layer !important; }
	.main pre, .main code { white-space: pre-wrap; word-break: break-word; }
	.main [style*="white-space:nowrap"], .main [style*="white-space: nowrap"], .main .nowrap { white-space: normal !important; }
	.main [style*="position:absolute"][style*="left"], .main [style*="position: absolute"][style*="left"] { max-width: calc(100vw - 20px); }

	/* griglia: i margini negativi non devono uscire dal contenuto */
	.main .row { margin-left: 0; margin-right: 0; --bs-gutter-x: .75rem; }
	.main > .row:first-child { --bs-gutter-x: .5rem; }
	.main [class*="col-xs-"], .main [class*="col-sm-"], .main [class*="col-md-"], .main [class*="col-lg-"], .main [class*="col-xl-"] { padding-left: .375rem; padding-right: .375rem; }
	.footer { padding-left: 10px; padding-right: 10px; }

	/* moduli */
	.main input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=image]), .main select, .main textarea { max-width: 100%; box-sizing: border-box; }
	.main .btn { white-space: normal; overflow-wrap: normal; }
	.main .btn-lg { font-size: 1rem; padding-left: .5rem; padding-right: .5rem; }
	/* Polaris: bottoni in alto senza incastri fra colonne di altezza diversa; tendina a selezione multipla larga quanto la colonna */
	.main .gm-pol-nav { display: flex; flex-wrap: wrap; }
	.main .multiselect-dropdown { display: block; width: 100% !important; }
	.main .form-inline { display: block; }
	.main .form-inline .form-control, .main .form-inline .form-group { display: block; width: 100%; margin-left: 0; }
	.main .input-group { display: flex; flex-wrap: nowrap; width: 100%; }
	.main .input-group > .form-control { flex: 1 1 0; width: auto; min-width: 0; }
	.main .input-group-addon, .main .input-group-btn { flex: none; width: auto; }
	.main .select2-container { width: 100% !important; }
	.main .note-editor { width: 100% !important; }
	.main .ck.ck-editor, .main .ck.ck-editor__main { max-width: 100%; }
	.main .ck.ck-toolbar > .ck-toolbar__items { flex-wrap: wrap !important; max-width: 100%; }
	.main .ck.ck-toolbar__separator { display: none; }
	.main .ck.ck-toolbar { flex-wrap: wrap; }
	.main label { white-space: normal; }

	/* schede in alto (nav-tabs): vanno a capo */
	.main .nav-tabs, .main .nav-pills { display: flex; flex-wrap: wrap; }
	.main .nav-tabs .nav-link, .main .nav-pills .nav-link { padding: .5rem .6rem; }

	/* DataTables */
	[data-direction="ltr"] div.dataTables_wrapper div.dataTables_length, [data-direction="ltr"] div.dataTables_wrapper div.dataTables_filter { float: none; width: 100%; text-align: left; margin-bottom: 6px; }
	[data-direction="ltr"] div.dataTables_wrapper div.dataTables_length label, [data-direction="ltr"] div.dataTables_wrapper div.dataTables_filter label { display: block; white-space: normal; text-align: left; }
	[data-direction="ltr"] div.dataTables_wrapper div.dataTables_filter input { width: calc(100% - 60px); min-width: 0; display: inline-block; }
	[data-direction="ltr"] div.dataTables_wrapper div.dataTables_info { white-space: normal; float: none; }
	[data-direction="ltr"] div.dataTables_wrapper div.dataTables_paginate { white-space: normal; float: none; text-align: center; margin: 10px 0; }
	[data-direction="ltr"] div.dataTables_wrapper div.dataTables_paginate .paginate_button { display: inline-block; padding: 8px 11px; }
	.dt-buttons { display: flex; flex-wrap: wrap; gap: 4px; float: none; margin-bottom: 6px; }
	.dt-buttons .btn { float: none !important; margin: 0 !important; }
	.gm-rwd-ordina { display: block; width: 100%; margin: 6px 0 10px; box-sizing: border-box; padding: .375rem .5rem; color: #373a3c; background: #fff; border: 1px solid #ccc; border-radius: .25rem; }

	/* tabelle a schede: la classe gm-rwd la mette scripts/gm-sirius.js solo su schermi piccoli */
	table.gm-rwd { display: block; width: 100% !important; border: 0; background: transparent; table-layout: auto; }
	table.gm-rwd > caption { display: block; }
	table.gm-rwd > thead { display: none; }
	table.gm-rwd > tbody, table.gm-rwd > tfoot { display: block; width: 100%; }
	table.gm-rwd > tbody > tr, table.gm-rwd > tfoot > tr { display: block; width: 100%; margin: 0 0 10px; border: 1px solid rgba(127,127,127,.55); border-radius: 4px; box-sizing: border-box; overflow: hidden; container-type: inline-size; }
	table.gm-rwd > tbody > tr > td:not(.hidden):not([style*="display:none"]):not([style*="display: none"]),
	table.gm-rwd > tbody > tr > th:not(.hidden),
	table.gm-rwd > tfoot > tr > td:not(.hidden),
	table.gm-rwd > tfoot > tr > th:not(.hidden) { display: block; width: auto !important; min-height: 20px; height: auto !important; position: relative; border: 0 !important; border-top: 1px solid rgba(127,127,127,.25) !important; text-align: left !important; white-space: normal !important; box-sizing: border-box; overflow-wrap: anywhere; }
	table.gm-rwd > tbody > tr > td, table.gm-rwd > tbody > tr > th, table.gm-rwd > tfoot > tr > td, table.gm-rwd > tfoot > tr > th { padding: 7px 8px !important; }
	table.gm-rwd > tbody > tr > td:first-child, table.gm-rwd > tbody > tr > th:first-child { border-top: 0 !important; }
	table.gm-rwd > tbody > tr > td[data-label]:not(.dataTables_empty):not(.hidden):not([style*="display:none"]):not([style*="display: none"]), table.gm-rwd > tbody > tr > th[data-label]:not(.hidden):not([style*="display:none"]):not([style*="display: none"]), table.gm-rwd > tfoot > tr > td[data-label]:not(.hidden) { display: flow-root; padding-left: 38cqw !important; }
	table.gm-rwd > tbody > tr > td[data-label]:not(.dataTables_empty)::before, table.gm-rwd > tbody > tr > th[data-label]::before, table.gm-rwd > tfoot > tr > td[data-label]::before { content: attr(data-label); float: left; width: calc(38cqw - 14px); margin-left: calc(8px - 38cqw); font-weight: 700; opacity: .8; font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; white-space: normal; }
	table.gm-rwd > tbody > tr > td:empty { display: none; }
	table.gm-rwd td > table:not(.gm-rwd), table.gm-rwd td > .table:not(.gm-rwd) { width: 100% !important; }
	table.gm-rwd > thead > tr > [hidden], table.gm-rwd > tbody > tr > [hidden], table.gm-rwd > tfoot > tr > [hidden] { display: none !important; }
	table.gm-rwd.hidden, table.gm-rwd.hide { display: none; }
	table.gm-rwd > tbody > tr.hidden, table.gm-rwd > tbody > tr.hide { display: none; }
	table.gm-rwd:not(.gm-rwd-modulo) > tbody > tr > td:not([data-label]):not(.dataTables_empty):not(:only-child) { padding-left: 38% !important; }
	/* tabelle di impaginazione (senza intestazione): una cella sotto l'altra */
	table.gm-rwd.gm-rwd-modulo > tbody > tr { border: 0; margin: 0; background: transparent; overflow: visible; container-type: normal; }
	table.gm-rwd.gm-rwd-modulo > tbody > tr > td:not(.hidden), table.gm-rwd.gm-rwd-modulo > tbody > tr > th:not(.hidden) { border: 0 !important; padding: 4px 0 !important; }
	/* menu e bottoni nelle schede */
	table.gm-rwd > tbody > tr:has(.dropdown-menu) { overflow: visible; }
	table.gm-rwd > tbody > tr:has(.open) { position: relative; z-index: 30; }
	.main table.gm-rwd td .dropdown-menu { min-width: 170px; max-width: calc(100vw - 40px); }
	.main table.gm-rwd td .dropdown-menu * { max-width: none; }
	table.gm-rwd td .btn { margin: 2px 4px 2px 0; }
	/* su telefono e tablet si toccano con un dito */
	table.gm-rwd td .btn.btn-circle[style*="height"] { height: auto !important; max-height: none !important; min-height: 32px; min-width: 42px; padding: 7px 10px; line-height: 18px; }
	table.gm-rwd td .btn.btn-circle[style*="height"] > h6 { line-height: 18px; }

	/* finestre: dentro lo schermo, titolo e piede sempre visibili */
	.modal { --bs-modal-margin: .5rem; }
	.modal-dialog, .modal-lg, .modal-xl { max-width: calc(100vw - 16px); margin-left: auto; margin-right: auto; }
	.modal .modal-body { overflow-wrap: anywhere; }
	.modal .modal-body img { max-width: 100%; height: auto; }
	.modal .modal-body img.media-object { max-width: none; height: 50px; flex: none; } /* foto del profilo nei messaggi delle task: si schiacciava */
	.modal table { max-width: 100%; }
	.dropdown-menu { max-width: calc(100vw - 16px); }

	/* selettore colori della barra: dentro lo schermo */
	.theme-selector { max-width: 100vw; }

	/* owl: il nastro e' piu' largo dello schermo per costruzione (lo taglia owl-stage-outer) */
	.main .owl-stage { max-width: none; }
	/* i menu nascosti di main.css restano nel flusso: il testo su una riga farebbe sporgere la pagina (quote) */
	.main .dropdown-item { white-space: normal; }
	/* un bottone float accanto non deve stringere la tabella (gestionale) */
	.main .table-responsive { clear: both; }
	/* Messaggi: la barra fissa del PC qui coprirebbe l'inizio dell'elenco */
	.main#main[style*="position:fixed"] { position: relative !important; padding-bottom: 0; }
	.main#main[style*="position:fixed"] ~ .main { padding-top: 0 !important; margin-top: 0 !important; }
	.main#main[style*="position:fixed"] ~ .main > .row { margin-top: 0 !important; }
}

/* Sfondi di preventivi e travel gift, 4 per riga: un nome su due righe (Compleanno) sfalsava la griglia */
@media (max-width: 1199.98px) {
	.main .gm-sfondo label { font-size: .72rem; overflow-wrap: normal; white-space: nowrap; max-width: 100%; }
	.main .row:has(> .gm-sfondo) { display: flex; flex-wrap: wrap; }
	.main .row > .gm-sfondo { float: none; flex: 0 0 25%; width: 25%; }
}

/* Sotto la loro soglia col-md/lg/xl non sono float: senza clear coprono i col-xs float prima di loro e i campi non si toccano piu' (mappa di quote) */
@media (max-width: 991.98px) { .main .row > [class*="col-lg-"]:not([class*="col-xs-"]):not([class*="col-md-"]):not([class*="col-sm-"]) { clear: both; } }
@media (max-width: 767.98px) { .main .row > [class*="col-md-"]:not([class*="col-xs-"]):not([class*="col-sm-"]) { clear: both; } }
@media (max-width: 543.98px) { .main .row > [class*="col-sm-"]:not([class*="col-xs-"]) { clear: both; } }

/* Promemoria delle task: sei scelte su una riga spezzavano le parole sul telefono */
@media (max-width: 575.98px) { .modal-body .gm-rem-col { flex: 0 0 33.333%; width: 33.333%; } .modal-body .gm-rem-col label { overflow-wrap: normal; } }

/* Telefono: i campi affiancati con col-xs-* vanno uno sotto l'altro, altrimenti non si leggono */
@media (max-width: 575.98px) {
	.main [class*="col-xs-"]:has(> .form-control, > select, > textarea, > input[type="file"], > input[type="text"], > input[type="number"], > input[type="date"]),
	.modal-body [class*="col-xs-"]:has(> .form-control, > select, > textarea, > input[type="file"], > input[type="text"], > input[type="number"], > input[type="date"]) { width: 100%; flex: 0 0 100%; }
	.main .col-xs-3:has(> .search-words) { order: 3; margin-top: 6px; }
	.modal-body [class*="col-xs-"]:has(> .form-group > .form-control) { width: 100%; flex: 0 0 100%; }
	/* Climate: il bottone Indietro sta su una riga sua, nella colonna stretta si tagliava */
	.main .col-xs-2.bs-media:has(> a.btn) { width: 100%; flex: 0 0 100%; }
	/* mesi di Destination Center: sei per riga */
	.main .finance-widget-1 > .row > .col-xs-1.bs-media { width: 16.66667%; flex: 0 0 16.66667%; }
}
@media (max-width: 575.98px) {
	/* bottoni grandi affiancati a due a due (Polaris, nuova pratica): le parole lunghe devono stare intere */
	.main .btn-lg.btn-block { font-size: .78rem; padding-left: .25rem; padding-right: .25rem; }
	/* Polaris, modulo fattura: una colonna sola, altrimenti date e tendine restano tagliate */
	#xml [class*="col-"] { width: 100%; flex: 0 0 100%; max-width: 100%; }
	/* Polaris, ricevute: titolo sotto i bottoni, accanto a loro le parole si spezzavano */
	.main a.pull-right ~ h2 { clear: both; }
	/* Polaris, cambia tipo: le parole lunghe dei bottoni devono stare intere */
	.swal-wide .swal2-html-container .btn { font-size: .72rem; padding-left: .2rem; padding-right: .2rem; }
}