body {min-heihgt:100%; background:#ffffff;}

#page-wrapper {padding:30px; margin-top:75px; min-height:100% !important; border:none;}
.navbar-top-links li:last-child {margin-right:0px;}
.navbar-brand {padding:15px !important;}
.navbar-top-links li a { line-height: 45px; min-height: 75px; padding: 15px;}

#sidebar-wrapper {margin-top:75px; height: calc(100% - 75px); position:fixed}
.sidebar {box-shadow:none; border-radius:none; margin-top:1px; height:100%; border-right:1px solid #e7e7e7;}
.version {position:absolute; left:0px; bottom:0px; font-size:10px; color:#ccccc; padding:10px; width:250px; text-align:center; border-top:1px solid #dedede; margin:0px; color:#666666}
#profile { background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #f8f8f8 0px, #ffffff 100%) repeat scroll 0 0; padding: 15px 0;}
#profile hr {margin:15px 15px 10px}
.profile-userpic img { float: left; margin: 0 auto 0;  -webkit-border-radius: 50% !important; -moz-border-radius: 50% !important; border-radius:50%; border:1px solid #bbbbbb}
.profile-usertitle { text-align: left; margin-top: 0px; color: #333333; padding-left:0px;}
.profile-usertitle-title { font-size: 12px; font-weight: normal; margin-bottom: 15px; color:#0e72b5;}
.profile-usertitle-name { font-size: 15px; font-weight: normal; margin-bottom: 7px; color:#233746; display:block;}
#credito { padding: 0 15px; display:block;}
.credito-text { text-align: left; margin-top: 0px; color: #333333; padding-left:0px;}
.credito-disponibile { font-size: 12px; font-weight: normal; margin-bottom: 3px; color:#233746; display:block;}
.credito-autorizzato { font-size: 12px; font-weight: normal; color:#233746; display:block;}
.credito-disponibile strong, .credito-autorizzato strong {color:#0e72b5; font-size:13px;}

.prezzo-totale {font-size:14px; font-weight:bold;}
.prezzo-totale h5 {margin:0px; text-transform:uppercase; letter-spacing:1px;}
.prezzo .badge { background-color: #f3f3f3; border-radius: 0; color: #000; font-size: 13px;}
.prezzo-totale .badge {font-size: 14px;}
.prezzo {height:100%;}

.pagamento {height:100%;}
.tipo-pagamento-nome {margin-left:10px;}
.tipo-pagamento {
    border: 1px dotted #cccccc;
    margin-bottom: 1% !important;
    margin-right: 1%;
    min-height: 180px !important;
    padding-bottom: 20px;
    padding: 15px !important;
    text-indent:15px;
    width: 49%;
    display: block;
    appearance: button;
    }
form input[type="radio"]:checked + label {
   background: yellow;
 }

.condizioni input {margin-right:10px;}

.progress {margin:10px 0 0;}
.error-field {font-family:verdana;color: #a94442;font-size:12px;text-align:center;} /* STEFANO - qui ho messo display none, è da controllare la visibilità via js */
.error-field-spans {color:#000000}


.jumbotron {padding:30px; background-color:#f9f9f9; border:1px solid #eeeeee}
.jumbotron h3 {margin-top:0px; font-size:30px; color:#233746}
.icona-ok {color:#0e72b5}
.icona-no {color:#e5322d}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {background:transparent !important; border:1px transparent solid !important;}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover a {background:#559cd9; color:#ffffff}


/* Absolute Center Spinner */
.loading_old{
  position: fixed;
  z-index: 999;
  height: 2em;
  width: 2em;
  overflow: show;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

/* Transparent Overlay */
.loading_old:before {
  content: '';
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index:1001;
}

/* :not(:required) hides these rules from IE9 and below */
.loading_old:not(:required) {
  /* hide "loading..." text */
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

.loading_old:not(:required):after {
  content: '';
  display: block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  -webkit-animation: spinner 1500ms infinite linear;
  -moz-animation: spinner 1500ms infinite linear;
  -ms-animation: spinner 1500ms infinite linear;
  -o-animation: spinner 1500ms infinite linear;
  animation: spinner 1500ms infinite linear;
  border-radius: 0.5em;
  -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
  box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
}


/*
 * Row with equal height columns
 * --------------------------------------------------

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}
 */
/*





/* Animation */

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/*==========  Non-Mobile First Method  ==========*/

    /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {
/*		.tipo-pagamento {padding:15px 0 20px; width:100%}
		.tipo-pagamento label {width:100%}
*/
    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {
		#sidebar-wrapper {position:relative; margin-top:75px; width:100%; height:auto;}
		#page-wrapper  {margin-top:125px;}
		.navbar-top-links {float:right;}
		.navbar-toggle {margin-right:30px; margin-top:15px; border-radius:0px;}
		.navbar-top-links li:last-child {margin-right:30px;}
    .version, #profile {display:none;}
    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {
		.tipo-pagamento {padding:15px 0 20px; width:100%}

    }

    /* Custom, iPhone Retina */ 
    @media only screen and (max-width : 320px) {

    }

/*--------------------------------------------------------------------------
  Profile container
  Thanks to keenthemes' bootstrap snippet for a starting point for the styles
  http://bootsnipp.com/snippets/featured/user-profile-sidebar 
--------------------------------------------------------------------------*/
/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}
.material-switch > input[type="checkbox"] {
    display: none;   
}

.material-switch > label {
    cursor: pointer;
    height: 0px;
    position: relative; 
    width: 40px;  
}

.material-switch > label::before {
    background: rgb(0, 0, 0);
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    content: '';
    height: 16px;
    margin-top: -8px;
    position:absolute;
    opacity: 0.3;
    transition: all 0.4s ease-in-out;
    width: 40px;
}
.material-switch > label::after {
    background: rgb(255, 255, 255);
    border-radius: 16px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    content: '';
    height: 24px;
    left: -4px;
    margin-top: -8px;
    position: absolute;
    top: -4px;
    transition: all 0.3s ease-in-out;
    width: 24px;
}
.material-switch > input[type="checkbox"]:checked + label::before {
    background: inherit;
    opacity: 0.5;
}
.material-switch > input[type="checkbox"]:checked + label::after {
    background: inherit;
    left: 20px;
}
#notifications {
  cursor: pointer;
  position: fixed;
  right: 0px;
  z-index: 9999;
  top: 0px;
  margin-top: 22px;
  margin-right: 15px;
  max-width: 400px;  
}
.progress-bar {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background-color: #007bff;
    transition: width .6s ease;
}

.progress {
    display: -ms-flexbox;
    display: flex;
    height: 1rem;
    overflow: hidden;
    font-size: .75rem;
    background-color: #cfdae4;
    border-radius: .25rem;
}