@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body { touch-action: pan-x pan-y; }

.montserrat { font-family: "Montserrat", serif;font-optical-sizing: auto;font-style: normal}
#modal-container-paywall {width:100%;height:100%;background: rgba(0,0,0,0.5);position:fixed;top:0;left:0;display:none}
.container-modal { position:fixed;top:0;left:0;z-index:100;background-color: rgba(0,0,0,0.7);width:100%;height:100% }
.modal-paywall { display:flex;flex-direction:column;align-items:flex-start;padding:20px;height:100%;width:100%;position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);background-color: rgba(255,255,255,1) }
.modal-paywall-head { display:flex;align-items:center;justify-content:space-between;width:100% }
.modal-paywall-footer { margin-top:auto;padding:0 40px;width:100% }
#close-modal { cursor:pointer }
.title > h3 { font-size:1.4rem }
.title { padding:0 40px 0 0 }
.form-row { display:flex;align-items:center;padding:10px 0 0;flex-direction:column; }
.form-label { width:100% }
.form-input { width:100% }
.form-button { width:100%;margin:5px 0 }
.subscribe-box { display:flex;flex-direction:row;margin-bottom:1rem;align-items:center }
.subscribe-box > div { margin:0 0 1rem 0 }
.check-request { width:100% }
.response, .check-response { margin:5px 0 0 0;font-size:90% }
.pointer { cursor:pointer}
.form-control:focus { box-shadow: none!important; border: 1px solid #ced4da!important}
.smallest { font-size:70% }

form[name='profile'] br { display:none }
form[name='profile'] input {background-color:#ffffff!important;border-color:#ced4da!important}
form[name='profile'] input:read-only {background-color:#e4ecf9!important;border-color:#00254A!important}

form[name='paywall'] input[type="text"], form[name='paywall'] input[type="date"] {background-color:#ffffff!important;border-color:#ced4da!important}
form[name='paywall'] input[type="text"]:read-only, form[name='paywall'] input[type="date"]:read-only {background-color:#cdcdcd!important;border-color:#333333!important}

form[name='ticket'] textarea, form[name='ticket'] input:not([type="button"]):not([type="submit"]),form[name='payment'] textarea, form[name='payment'] input:not([type="button"]):not([type="submit"]) {padding:.375rem .75rem;border-radius:.375rem!important;border:1px solid #ced4da!important}

form[name='ticket'] input[type="radio"], form[name='payment'] input[type="radio"], form[name='paywall'] input[type="radio"] {padding:0!important;background-color:#ffffff!important}
form[name='payment'] input[type="checkbox"] {padding:0!important;background-color:#ffffff;border-radius:none!important}
form[name='ticket'] input:checked[type="radio"], form[name='payment'] input:checked[type="radio"], form[name='paywall'] input[type="radio"] {padding:0!important;border-color:#00254A!important;background-color:#00254A!important;accent-color:unset!important}
form[name='payment'] input:checked[type="checkbox"] {padding:0!important;border-color:#00254A!important;background-color:#00254A!important;accent-color:unset!important}

.btn-blue { background-color:#00254A!important;color:#ffffff!important;border:1px solid #000!important } 
.btn-blue:hover { background-color:#00254A!important;color:#ffffff!important;border:1px solid #000!important }
.btn-green { background-color:#3aab71!important;color:#ffffff!important;border:1px solid #000!important } 
.btn-green:hover { background-color:#3aab71!important;color:#ffffff!important;border:1px solid #000!important }

.btn-gray { background-color:#e4ecf9!important;color:#ffffff!important;border:1px solid #000!important } 

.right-bottom-edge { border-bottom-right-radius:0!important }
.left-bottom-edge { border-bottom-left-radius:0!important }

.bg-light-gray { background-color: #d9dde6;}
.bg-azul { background-color: #b5bbcf!important;}
.bg-gray { background-color: #e4ecf9!important}
.bg-light { background-color:#f6f8fa!important}
.bg-light-blue { background-color: #2256c2!important;}
.bg-blue { background-color:#00254A!important;color:#ffffff!important}
.bg-blue.active a, .bg-blue.active, .bg-blue > a:hover { background-color:#ffffff!important;color:#00254A!important}
.bg-blue a { color:#ffffff!important; text-decoration: none!important; display:block!important }
/*.bg-blue.active a { color:#00254A!important; text-decoration: none!important; display:block!important }*/
.bg-blue-alpha { background-color:#00254ACC}

.border-block-start-blue { border-block-start:#00254A!important }

.border-top-blue { border-top:1px solid #00254A}
.border-blue { border:1px solid #00254A}
.border-black { border:1px solid #000000}
.border-white { border:1px solid #ffffff}
.border-white-top { border-top:1px solid #ffffff}
.border-white-right { border-right:1px solid #ffffff}

.status-open { background-color: #ffb007;color:#ffffff;font-size: small }
.status-order-created { background-color: #00254A;color:#ffffff;font-size: small }
.status-reminded { background-color: #ed0000;color:#ffffff;font-size: small }
.status-paid { background-color: #44abff;color:#ffffff;font-size: small }
.status-completed { background-color: #3aab71;color:#ffffff;font-size: small }

.status-orange { background-color: #ffb007;color:#ffffff;font-size: small }
.status-red { background-color: #ed0000;color:#ffffff;font-size: small }
.status-blue { background-color: #00254A;color:#ffffff;font-size: small }
.status-azure { background-color: #44abff;color:#ffffff;font-size: small }
.status-light-azure { background-color: #e4ecf9;color:#ffffff;font-size: smaller }
.status-gray { background-color: #a8a8a8;color:#ffffff;font-size: smaller }

.text-gray { color: #6f6e6e }
.text-blue { color: #00254A }
.text-purple { color: #cd3366 }

.loader { width:100%;height:100%;position:fixed;top:0;left:0;background:rgba(0,0,0,0.5);z-index:10000}
.response-good { background-color: #3aab71;color:#ffffff;font-size: small;border-radius:10px;padding:0.5rem;margin:0.4rem 0;font-weight:bold;line-height:1.4rem }
.response-bad { background-color: #ffb007;color:#000000;font-size: small;border-radius:10px;padding:0.5rem;margin:0.4rem 0;font-weight:bold;line-height:1.4rem }
.response-bad a, .response-good a { color:#ffffff }

.sticky-menu {
	position:fixed;
	z-index:100;
	bottom:0;
	left:0;	width:96%;
}

.sticky-bottom-to-menu {
	position:fixed;
	z-index:100;
	bottom:64px;
	left:0;
	width:100%;
}

.max-width-comment { max-width:90% }

.form-container { width:600px;border:2px solid #000000;border-radius:15px;margin:0 auto;padding:10px}

#icon{ position: relative;}
#attachments_mobile {
    position: absolute;
    top: 0;
    left: 2px;
    width: 44px;
    height: 42px;
    opacity: 0;
    z-index: 10000;
}
#attached_files ul {
	list-style-type: none; padding:0; margin:0;
}

.pb-15 { margin-bottom:10rem}

/* Wrapper step */
.step-wrapper {
	display: flex;
	gap: 4px;
	margin-bottom: 1.5rem;
}

.step-item {
	flex: 1;
	text-align: center;
}

.step-label {
	font-size: 0.95rem;
	margin-bottom: 2px;
	font-weight: bold;
}

.step-bar-start {
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

.step-bar-end {
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}

.step-bar {
  height: 20px;
  background-color: #ccc;
  transition: background-color 0.3s ease;
  border-radius: 4px;
}

.step-item.active .step-bar {
  background-color: #2256c2;
}


.step-container {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 700px;
}
  

.step-track {
  display: flex;
  transition: transform 0.4s ease-in-out;
}

.step-pane {
  flex: 0 0 100%;
  width: 100%;
  box-sizing: border-box;
}

/* Compattiamo il primo step */
.step-pane.row.g-1 > div {
    margin-bottom: 4px !important;
}

.step-pane.row.g-1 {
    row-gap: 4px !important;
}

select#type {
	box-shadow: none;
	background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEwMCAxMDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4Ij4KPGc+Cgk8cGF0aCBkPSJNNDkuOTk4LDBMMjcsMzYuNDk4bDQ2LDAuMDA0TDQ5Ljk5OCwweiBNNTAuMDA0LDEwMEw3Myw2My41MDJsLTQ2LTAuMDA0TDUwLjAwNCwxMDB6IiBmaWxsPSIjMDAwMDAwIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
	background-position: center right 8px;
	background-repeat: no-repeat;
	padding-right: 1.5em;
	cursor: pointer;
}

@media only screen and (min-width: 1024px) {

	.pb-15 { margin-bottom:inherit}

    .modal-paywall { width:50%;height:auto;border-radius:10px;border:2px solid #00254A }
    .modal-paywall-body { padding-bottom:20px;width:100% }
    .title > h3 { font-size:2rem }
    .title { padding:0 }
    .subscribe-box { flex-direction:row }
    .subscribe-box > div { margin:0 1rem 0 0 }
	.form-row { display:flex;align-items:center;padding:10px 0;flex-direction:row; }
	.form-label { margin-right:1rem;width:160px }
	form[name="payment"] .form-label { margin-right:1rem;width:100%!important }
	.form-input { width:300px }
	.form-button { margin-right:1rem;width:250px }
	.check-request { width:220px }
}