:root {
	/* --themecolor: #d50000; */
	--themecolor: #022553;
	/* --themecolordark: #9b0000; */
	--themecolordark: #010A1B;
	/* --themecolorlight: #ff5131; */
	--themecolorlight: #043C86;
	--themecoloractive: #67A844;
	--buttonActive: #46722E;
	--buttonActiveOver:#90C672;
	--buttoInactive: #7B8D8D;
	--buttonInactiveOver:#A4B0B0;
}

html {font-size: .8rem;}

table td { padding: .05rem !important; max-width: 100% !important; vertical-align: middle !important; text-align: center; }
table th { padding: .05rem !important; max-width: 100% !important; text-align: center; white-space: nowrap; overflow: hidden;}
table th div {  cursor: col-resize;}

@media print {
    #printableArea {
        background-color: white;
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        margin: 0;
        padding: 4rem;
        font-size: 14px;
        line-height: 18px;
    }
}

a.disabled {
	pointer-events: none;
	cursor: default;
}

.inline-flex {
	display: inline-flex;
}

#petshopButton {
	cursor: pointer;
}

.logo {
	max-width: 100%;
	max-height: 1.5rem;
}

.logo-login {
	/*rectangular logo*/
	margin:auto;
	width: 200px;
	object-fit: cover;
	/*square logo*/
	/*
	max-height: 10rem;
	max-width: 10rem;
	margin:auto;
	height: 80px;
    width: 140px;
    object-fit: cover;
	*/
}

.logo-login-form {
	margin:auto;
	width: 200px;
	margin-top: 20px;
	object-fit: cover;
}

.welcome .nav-item a {
	/* text-transform: capitalize; */
	text-transform: uppercase;
	font-size: 1.1rem;
	font-weight: bold;
}

.welcome .nav-link.active{
	background-color: #F6F7F7;
	border-top: solid var(--themecolordark) .5rem;
	border-bottom: none;
	border-left: none;
	border-right: none;
	font-weight: 700;
}

.nav-tabs .nav-link:hover{
	border-bottom-color: var(--themecolordark);
	border-top: none;
	border-left: none;
	border-right: none;
}

.welcome .nav-link.active:hover{
	border-top: solid  var(--themecolor) .5rem;
	border-bottom: none;
	border-left: none;
	border-right: none;
	font-weight: 700;
}


.welcome .nav-tabs {
	border-bottom: none;
}

.welcome .col {
	padding: 0rem;
}

.welcome .nav-link {
	border-bottom: solid  var(--themecolor) .5rem;
	text-transform: uppercase;
}

.welcome .tab-pane.active {
	background: #F6F7F7;
	padding-top: 2rem;
	padding-bottom: 2rem;
	padding-left: 0;
	padding-right: 0;
	height: 60vh;
}

.welcome .tab-pane a {
	padding: 1rem;
}

/*
.welcome .tab-pane a div {
	background: white;
	text-align: center;
	color: #25221e;
	font-weight: 400;
	font-size: 1.1rem;
	border-left: 1px solid grey;
	border-bottom: 1px solid grey;
	padding: .5rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
	border-radius: 30px;
}
*/

.container {
	max-width: 95%;
}

.ribbon {
	text-align: center;
	margin-bottom: .25rem;
}

.ribbon .tasto {
	background:  var(--themecolor);
	color:white;
	padding: .1rem;
	border:solid white 1px;
	cursor: pointer;
}

.ribbon .tasto:hover {
	color:white;
	background-color:  var(--themecolordark);
	text-decoration: none;
}

.ribbon a {
	color: white;
}

.tasto p {
	padding:.1rem;
	margin: 0rem;
/*	margin-top: -.5rem;*/
}

.btn-secondary {
	background-color: white;
	color:#5a6268;
}

.dropdown img {
	max-width: 1rem;
}

.dropdown button {
	width: 100%;
}

.logout-dropdown {
	padding-left: 0rem !important;
	padding-right: 0rem !important;
}

.dropdown {
	padding-left: 0px !important;
	padding-right: 0px !important;
}

.align-center {
	width: 95%;
	margin: 0px auto;
	float: none;
}

.large-button {
	width: 100%;
}

.large-max {
	width: 100%;
}

.card-header {
	background: var(--themecolor);
	color:white;
	padding: .5rem;
}

.managePictures {
	position: absolute;
	top: .25rem;
	left: .5rem;
}

.btn.btn-primary {
	background: var(--themecolor);
	color:white;
	border: var(--themecolor);
	border-width: 1px;
	border-style: solid;
}

.btn.btn-primary:hover {
	background: var(--themecolordark);
	color:white;
	border: var(--themecolordark);
	border-width: 1px;
	border-style: solid;
}

.btn-outline-danger:hover {
    color: var(--themecolor) !important;
    background-color: transparent !important;
    border-color: transparent !important;
}

.btn-outline-danger {
    border-color: var(--themecolordark);
}

.btn.btn-link {
	color:var(--themecolor);
}

.btn.btn-link:hover {
	color:var(--themecolordark);
}

.money {
	max-height:2.5rem;
}

.tab-contanti .table {
	padding:.5rem;
}

/* Customize the label (the container) */
.radioContainer {
    display: block;
    position: relative;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin: 0rem;
}

/* Hide the browser's default radio button */
.radioContainer input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: -.4rem;
    left: -.2rem;
    height: 1rem;
    width: 1rem;
    background-color: #CCCCCC;
    border-radius: 25%;
}

/* On mouse-over, add a grey background color */
.radioContainer:hover input~.checkmark {
    background-color: #A3A3A3;
}

/* When the radio button is checked, add a blue background */
.radioContainer input:checked~.checkmark {
    background-color: var(--themecolor);
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    z-index: 0;
}

/* Show the indicator (dot/circle) when checked */
.radioContainer input:checked~.checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.radioContainer .checkmark:after {
    top: .25rem;
    left: .25rem;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: white;
}

/*.table-striped {
	text-align: center !important;
}*/

#example th {
	z-index: 50;
}

#example th, #example td, #cassa th, #cassa td {
	border-left: 1px #e0e0e0 solid;
}

td.colPulsanti {
	display: table-cell;;
}

.scontrino-header p {
	font-weight: bold;
	margin-bottom: 0rem;
	text-transform: uppercase;
}

.scontrino-header .telefono {
	margin-bottom: 2rem;
}

.scontrino-body .name {
	text-align: left;
}

.scontrino-body .quantity {
	text-align: right;
}

.scontrino-body .price {
	text-align: right;
}

.scontrino-body .total {
	font-weight: bold;
}

.scontrino-body tfoot {
	border-top: solid black 2px;
}

.border-dark {
	border: 1px gray solid;
	height: 14rem;
}

.scontrino-footer p {
	font-weight: bold;
	margin-bottom: 0rem;
	text-transform: uppercase;
	font-size: 0.8rem;
}

.scontrino-footer .cassiere {
	margin-top:2rem;
}

.printableTable thead, .printableTable tfoot {
	background-color: #EBEDEF;
	border: solid black 1px;
}

.printableTable tbody tr {
	border: solid black 1px;
}

.azioni {
	min-width: 5rem;
}

.none {
	display: none;
}

.bnone {
	border: none;
}

.brnone {
	border-radius: 0rem;
}

.buttons-columnVisibility.active{
	background-color: var(--buttonActive);
}

.buttons-columnVisibility.active:hover{
	background-color: var(--buttonActiveOver);
}

.buttons-columnVisibility{
	background-color: var(--buttoInactive);
	color: white;
}

.buttons-columnVisibility:hover{
	background-color: var(--buttonInactiveOver);
	color: white;
}

#custombuttons {
	margin-bottom: .25rem;
}

#custombuttons .col-1{
	padding: 0rem;
}

#custombuttons a {
	padding-top: 0rem;
	padding-bottom: 0rem;
}

.ordini-parcheggiati ul {
	padding-left: 0rem;
}
.ordini-parcheggiati li {
	list-style: none;
	display: inline-flex;
	background-color: #38C172;
	border-radius: 50%;
	width: 1.5rem;
	line-height: 1.5rem;}

.ordini-parcheggiati li span {
	margin-left: auto;
	margin-right: auto;
}

.checkout-buttons button,
.checkout-buttons input {
	padding: .1rem .5rem;
	height: 3rem;
}

.checkout-buttons button,
.checkout-buttons h5,
.checkout-buttons h6 {
	font-size: .8rem;
}

.checkout-buttons h5 {
	background-color: gray;
	color: white;
	height: 1.5rem;
	border-radius: .5rem .5rem 0rem 0rem;
	text-align: center;
	padding-top: .3rem;
	margin-bottom: 0rem;
}

.checkout-buttons h6 {
	background-color: white;
	border: 1px solid gray;
	height: 1.5rem;
	border-radius: 0rem 0rem .5rem .5rem;
	text-align: center;
	padding-top: .3rem;
	width: 100%;
}

#selectColumns .dt-button-collection {
	padding: 0rem;
	top: .25rem !important;
}

#selectColumns .btn-group {
	width: 100%;
	height: 0rem;
	display: flex;
}

#selectColumns button {
	padding-bottom: 0rem;
	display: none;
}

#selectColumns button::after {
	content: none;
}
.uiScaledImageContainer {
    width: 300px;
    height: 300px;
    position: relative;
    overflow: hidden;
}

.uiScaledImageContainer .scaledImageFitHeight {
    height: 100%;
    min-height: initial;
    width: auto;
}

.uiScaledImageContainer .scaledImageFitWidth {
    height: auto;
    min-height: initial;
    width: 100%;
}

/* PREVIEW UPLOAD */
#previewUpload {
	padding-bottom: .5rem;
	text-align: center;
}

#cancelUpload {
	color: white;
	position: absolute;
	z-index: 9;
}

#cancelUpload:hover {
	color: red;
	text-decoration: none;
}

.underlined:hover {
	text-decoration: underline;
	cursor:pointer;
}

.underlined:hover .mdi {
	color: darkred;
}

.logoPreview {
	max-height:10rem;
	max-width:100%;
}

/*NOT WORKING*/
.notworking {
	background-color: var(--themecolor) !important;
	color:white !important;
}
.notworking:hover {
	background-color: var(--themecolordark) !important;
	color:white !important;
}

/*STEP 2*/
.step2 {
	background-color:#9EDBF5 !important;
}

/*Colori*/
.blu {
	background-color: #45579C;
	color: white;
}
.verde {
	background-color: #43942B;
	color: white;
}
.arancio {
	background-color: #E7631A;
	color: white;
}
.giallo {
	background-color: #F9F528;
	color: black;
}

.outlined {
	border: 1px solid #ced4da;
	background-color: white;
	color: black;
}

#ordiniparcheggiati {
	padding: .8rem;
	margin-bottom: 0rem;
}

#ordiniparcheggiati a {
	color:white;
}

#ordiniparcheggiati li {
	font-size: .8rem;
	list-style: none;
	display: inline;
	background-color: #77E754;
	padding: 1.1rem 1.4rem;
    border-radius: 50%;
    color: black;
	margin-right: .2rem;
}

#ordiniparcheggiati li.corrente {
	background-color: #43942B;
	color: white;
}

.pagina-collaboratore .th,
.pagina-collaboratore .td,
.pagina-cliente th,
.pagina-cliente td,
.pagina-fornitore th,
.pagina-fornitore td {
	padding:.2rem;
}

.pagina-collaboratore table,
.pagina-cliente table,
.pagina-fornitore table {
	margin-bottom: .1rem;
}

.pagina-collaboratore label,
.pagina-articolo label,
.pagina-cliente label,
.pagina-fornitore label {
    margin-bottom: .1rem;
    margin-top: .3rem;
}

.pagina-collaboratore .form-control,
.pagina-articolo .form-control,
.pagina-cliente .form-control,
.pagina-fornitore .form-control {
    padding: .2rem;
    height: 1.7rem;
}

.pagina-articolo .form-group {
	margin-bottom: .2px;
}

.pagina-collaboratore .centerColumn,
.pagina-cliente .centerColumn,
.pagina-fornitore .centerColumn {
    border-left: solid 1px gray;
    border-right: solid 1px gray;
    padding-left: .5rem;
    padding-right: .5rem;
}

.pagina-collaboratore .leftColumn,
.pagina-cliente .leftColumn,
.pagina-fornitore .leftColumn {
    padding-right: .5rem;
}

.pagina-collaboratore .rightColumn,
.pagina-cliente .rightColumn,
.pagina-fornitore .rightColumn {
    padding-left: .5rem;
}

/*Chat*/
.chat-window {
	height: 80vh;
}
.chat-current {
	position: relative;
	background-color: red;
}

.chat-current-thread {
	background-color: lightgray;
}
.chat-current-thread, .chat-not-current-thread {
	padding: .25rem;
	margin: 0rem;
	border-radius: .5rem;
}

.chat-user {
	/*height: 5vh;*/
	padding: .1rem 0rem;
	text-transform: capitalize;
	border-bottom: solid red 1px;
}
.chat-header {
	position: absolute;
	top: 0px;
	width: 100%;
	/*background-color: #182533;*/
	background-color: #D50000;
	border-bottom: 1px solid white;
}

.chat-header h2 {
	padding: .5rem;
	text-transform: capitalize;
	color: white;
	margin: 0rem;
}

.chat-message {
	width: fit-content;
	max-width: 37vh;
	word-break: break-all;
}
.chat-received-message p,
.chat-sent-message p {
	margin: 0rem;
}

.chat-received-message,
.chat-sent-message {
	padding: .5rem;
	border-radius: .5rem;
	margin-top: .25rem;
	color: white;
}

.chat-sent-message {
	margin-left: auto;
	margin-right: .5rem;
	background-color: #D50000;
	/*background-color: #2B5278*/;
}
.chat-received-message {
	margin-right: auto;
	margin-left: .5rem;
	/*background-color: #182533*/;
	background-color: #9B0000;
}

.chat-body {
	width: 100%;
	/*background-color: #0E1621;*/
	position: absolute;
	top:7vh;
	height: 68vh;
	max-height: 68vh;
	overflow-y: scroll;
	display: flex;
	align-content: flex-start;
}

.chat-input {
	position: absolute;
	top: 75vh;
	width: 100%;
}

.chat-unseen {
	background-color: rgb(224, 64, 64);
}

.chat-unseen h4 {
	color: #FFFFFF;
}

.currentPage {
	background-color: var(--themecoloractive);
}


.btn-viola {
	color: #ffffff;
	background-color: #611BBD;
	border-color: #130269;
}

.btn-viola:hover,
.btn-viola:focus,
.btn-viola:active,
.btn-viola.active,
.open .dropdown-toggle.btn-viola {
	color: #ffffff;
	background-color: #49247A;
	border-color: #130269;
}

.btn-viola:active,
.btn-viola.active,
.open .dropdown-toggle.btn-viola {
	background-image: none;
}

.btn-viola.disabled,
.btn-viola[disabled],
fieldset[disabled] .btn-viola,
.btn-viola.disabled:hover,
.btn-viola[disabled]:hover,
fieldset[disabled] .btn-viola:hover,
.btn-viola.disabled:focus,
.btn-viola[disabled]:focus,
fieldset[disabled] .btn-viola:focus,
.btn-viola.disabled:active,
.btn-viola[disabled]:active,
fieldset[disabled] .btn-viola:active,
.btn-viola.disabled.active,
.btn-viola[disabled].active,
fieldset[disabled] .btn-viola.active {
	background-color: #611BBD;
	border-color: #130269;
}

.btn-viola .badge {
	color: #611BBD;
	background-color: #ffffff;
}

.btn-modal {
    color: #000000;
    background-color: #D39E00;
    border-color: #D39E00;
}

.btn-modal:hover,
.btn-modal:focus,
.btn-modal:active,
.btn-modal.active,
.open .dropdown-toggle.btn-modal {
    color: #000000;
    background-color: #edb100;
    border-color: #D39E00;
}

.btn-modal:active,
.btn-modal.active,
.open .dropdown-toggle.btn-modal {
    background-image: none;
}

.btn-modal.disabled,
.btn-modal[disabled],
fieldset[disabled] .btn-modal,
.btn-modal.disabled:hover,
.btn-modal[disabled]:hover,
fieldset[disabled] .btn-modal:hover,
.btn-modal.disabled:focus,
.btn-modal[disabled]:focus,
fieldset[disabled] .btn-modal:focus,
.btn-modal.disabled:active,
.btn-modal[disabled]:active,
fieldset[disabled] .btn-modal:active,
.btn-modal.disabled.active,
.btn-modal[disabled].active,
fieldset[disabled] .btn-modal.active {
    background-color: #D39E00;
    border-color: #D39E00;
}

.btn-modal .badge {
    color: #D39E00;
    background-color: #000000;
}

#content {
	overflow-x: scroll;
	scroll-behavior: smooth;
}

/* Hide scrollbar for Chrome, Safari and Opera */
#content::-webkit-scrollbar {
	display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#content {
	-ms-overflow-style: none;  /* IE and Edge */
	scrollbar-width: none;  /* Firefox */
}