@charset "utf-8";

/* Original style.css */

body{
	padding: 0px;
	margin: 0px;
        font-family:arial, helvetica, georgia, serif;
	
}
.contenitore{
	margin-bottom: 60px;
	margin-top: 212px;
}
.contenitore_splash{
	margin-bottom: 0px;
	margin-top: 0px;
}
.contenuto{
	
}
.header{
	background-image: url("../img/bg_header.png");
	background-repeat:repeat-x; 
	display: flex;
	justify-content: center;
	flex-direction: column;
	flex-wrap: wrap;
         align-items: center;
	
}
.res_cont{
	max-width: 600px;
}
.res_cont_int{
	width: 800px;
	display: flex;
	justify-content: space-between;
	padding: 15px;
	align-items: center;
	
}
.splash_med{
	
	text-align: center;

    display: flex;
	margin-left: 30px;
	margin-right: 30px;
	margin-top: 60px;
}
.splash_logo{

	display: flex;
	margin-left: 30px;
	margin-right: 30px;
	margin-top: 30px;
}
.resizer_img{
  max-width: 100%;
  height: auto;
  align-self: center;
}

.title_bar{
	background-image: url("../img/pattern.jpg");
	background-size: contain;
	height: 212px;
	display: flex;
	justify-content: center;
	position: fixed;
	z-index: 999999;
	width: 100%;
	top: 0px;
	
}
.logo_int{
	max-width: 300px;
	margin-right: 10px;
}
.img_int{
	max-width: 200px;
}
.img_app{
	max-width: 250px;
}
.img_ric{
	max-width: 140px;
}
.img_not{
	max-width: 140px;
}
.img_nf{
	max-width:400px;
}
.testo{
	font-family: 'Roboto', sans-serif;
	display: flex;
	justify-content: center;

}
.testo h1{
	font-weight: bold;
	font-size: 16px;
	color: #1d7777;
	line-height: 20px;
	margin-bottom: 0px
}
.testo p{
	font-weight: 400;
	font-size: 16px;
	color: #606060;
	line-height: 23px;
	text-align: justify;
	margin-bottom: 0px;
	width: 100%;
}
.buttons{
	font-family: 'Roboto', sans-serif;
	display: flex;
	justify-content: center;
	font-size: 19px;

	
}
.big_button{
	background-color: #00b3b7;
	color: #ffffff;
	display: flex;
	justify-content: center;
	text-decoration: none;
	text-align: center;
	margin-bottom: 10px;
	height: 50px;
	width: 100%;
	max-width: 500px;
	align-items: center;
	border-radius: 10px;
}
.conferma{
	color: #606060;
	display: flex;
	justify-content: center;
	text-decoration: none;
	text-align: center;
	margin-bottom: 10px;
	height: 50px;
	width: 100%;
	max-width: 500px;
	align-items: center;
	border-radius: 10px;
}
.footer{
	font-family: 'Roboto', sans-serif;
	background-color: #002245;
	color: #ffffff;
	font-size: 12px;
	display: flex;
	height: 50px;
	justify-content:space-between;
	
	margin-right: 10px;
	align-items: center;
	position: fixed;
	z-index: 999999;
        left: 0;
        bottom: 0;
        width: 100%;
}
.footer a{
	margin-right: 20px;
	color: #ffffff;
	text-decoration: none;
}
.backback img{
	height: 30px;
	margin-left: 20px;
}
.formz{
	display: flex;
	justify-content: center;
	width: 100%;
}
.rigaform{
	display: flex;
	width: 100%;
	justify-content:space-between;
}
.rigaform_special{
	display: flex;
	width: 100%;
	justify-content:space-between;
}
.rigaform input{
	width: 100%;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	margin: 7px 20px 10px 0px;
	border: 0px;
	border-radius: 0px;
	border-bottom: 1px solid #999999;
	color: #333333;
}
.rigaform textarea{
	width: 100%;
	height: 50px;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	margin: 7px 20px 10px 0px;
	border: 0px;
	border-radius: 0px;
	border-bottom: 1px solid #999999;
	color: #333333;
}
.rigaform select{
	width: 100%;
	
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	margin: 7px 20px 10px 0px;
	border: 0px;
	border-radius: 0px;
	border-bottom: 1px solid #666666;
	color: #777777;
	height: 39px;
	margin-top: 0px;
	-webkit-appearance: none;
}

.conferma .sub_title{
	font-size: 15px;
	color: #606060;
	margin-top: 2px
}
.sub_title{
	font-size: 15px;
	color: #bee5e4;
	margin-top: 2px
}


@keyframes click-wave {
  0% {
    height: 30px;
    width: 30px;
    opacity: 0.35;
    position: relative;
  }
  100% {
    height: 100px;
    width: 100px;
    margin-left: -40px;
    margin-top: -40px;
    opacity: 0;
  }
}

.option-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  position: relative;
  top: 13.33333px;
  right: 0;
  bottom: 0;
  left: 0;
  height: 30px;
  width: 30px;
  transition: all 0.15s ease-out 0s;
  background: #cbd1d8;
  border: none;
  color: #ffffff!important;
  cursor: pointer;
  display: inline-block;
  margin-right: 0.5rem;
  outline: none;
  position: relative;
  z-index: 1000;
  border-radius: 5px;
	
}
.option-input:hover {
  background: #9faab7;
	
}
.option-input:checked {
  background: #00b3b7;
	
}
.option-input:checked::before {
  height: 30px;
  width: 30px;
  position: absolute;
/*	z-index: 888888;*/
  content: "\2714 \fe0e";
	color: #ffffff!important;
  display: inline-block;
  font-size: 26.66667px;
  text-align: center;
  line-height: 30px;
	
}
.option-input:checked::after {
  -webkit-animation: click-wave 0.65s;
  -moz-animation: click-wave 0.65s;
  animation: click-wave 0.65s;
  background: #00b3b7;
  content: '';
  display: block;
  position: relative;
  z-index: 100;
	
	
}

label{
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	color:#777777;
}



.wrapper{
		flex-wrap: wrap;
}
.columnize{
	flex-direction: column;
}
.centerer{
	justify-content:center;
	text-align: center;
}
.spacer{
	margin-top: 20px;
}
.nopadding{
	padding: 0px;
}
@media (max-width: 500px){

.res_cont{
	max-width: 800px!important;
	
}
.res_cont_int{
	width: 500px;
	display: flex;
	
}
.title_bar{

	height: 122px;

}
.logo_int{
	width: 200px;
	margin-right: 10px;
}
.img_int{
	width: 130px;
}
.img_app{
	width: 130px;
}
.img_ric{
	width: 100px;
}
.img_not{
	width: 80px;
}
.img_nf{
	width: 200px;
}
.contenitore{
	margin-top: 112px;
}
}





/******************************************************************************/

/* Removed styles */

/******************************************************************************/


body.admin div.contenitore {
    margin-top: 0px; /*was 212px*/
    margin-bottom: 0px; /*was 60px ported to padding of contenuto_int */
    height: 100%;
}

body.admin div.contenuto_int {
    position:relative;
    min-height:100%;
    padding-bottom: 80px; /*50px footer height + 30px upon footer */
}

body.admin#MedicalShifts div.contenuto_int {
    padding-bottom: 0px; /*50px footer height + 30px upon footer */
}

body.admin div.title_bar {
    position: relative;
}

body.admin .footer {
    position:absolute;
    bottom: 0;  /* considering div.contenitore margin-bottom */
}

html:not(.public), body {
    height:100%;
}




/******************************************************************************/

/* Added styles */

/******************************************************************************/

html {
    scroll-behavior: smooth;
}

body.admin:not(#AdminIndex) .title_bar {
    height:122px;
}

body.admin:not(#AdminIndex) .logo_int {
    width:200px;
}

body.admin:not(#AdminIndex) .img_int {
    width:130px;
}

#MedicalShifts .title_bar {
    height:62px !important;
}

#MedicalShifts .logo_int {
    width:100px !important;
}

#MedicalShifts .img_int {
    width:80px !important;
}

body:not(.admin) a.home {
    position:absolute;
    color:white;
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
    text-shadow: 1px 1px 2px #0000003b;
    font-weight:bold;
    padding-left: 0.35em;
    margin-top: -1em;
}

.menu {
    font-family: 'Roboto', sans-serif;
    display: flex;
    justify-content: center;
    /*background: #9cd0cc;*/
    /*background: #d0f3f0;*/
    background: #74b5b1;
}

.menu .res_cont_int {
    padding:0px;
}

.menu a {
    display:inline-block;
    padding:4px;
    margin:10px 0px;
    font-weight:bold;
    color: #fdfdfd;
    text-decoration: none;
}


.menu a svg {
    /*margin-bottom: 3px;*/    
}

.menu a:not(:first-of-type):before {
    /*content: ' | ';*/
}

.menu a.current, .menu a:hover {
    color: #e2fdfb;
    /*color: #034446;*/ 
    /*color: #00b3b7;*/
}

.menu a:hover {
    text-decoration:underline;
}


body.admin .title_bar,
body.admin .footer {
    z-index: auto;
}

.hidden {
    display:none;
}

.hidden_imp {
    display:none !important;
}

.error {
    color:#dc3545 !important;
}

div.wait_div {
    position:fixed;
    left:0;
    top:0;
    height:100%;
    width:100%;
    z-index:1000000;
}

a {
    cursor:pointer;
}

a.disabled, textarea.disabled {
    opacity:0.5;
    filter: grayscale(1);
    cursor: default;
}

.bold {
    font-weight: bold;
}

.grey {
    filter: grayscale(0.5) brightness(1.5);
}

.text-left {
    text-align:left !important;
}

.no-margin-top {
    margin-top:0px; 
    padding-top:0px;
}

#ControlHeadMedical {
    margin-bottom:1em;
}

#SelectedMedical button.exit {
    display: inline-block;
    margin-left: 0.5em;
    padding: 0em 0.5em;    
}

#Calendar-container {
    /*margin-top:1em;*/
}

#Calendar-container {
    padding:1em;
    padding-top:0em;
}

@media only screen and (max-width: 550px) {
  .became-rows {
    display: block !important;
  }
  #Calendar-container {
      padding:0px;
  }
}


#AdminOpenCalendar {
    filter: hue-rotate(341deg);    
}

/*
 * Loading effect 
 * https://codemyui.com/pure-css-skeleton-screen-gleam-animation-for-light-dark-and-grey-mode-card-ui/
 *
 */
.shimmer-fx {
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: placeHolderShimmer;
    -webkit-animation-timing-function: linear;
    background: #eee;
    background-image: linear-gradient(to right, #eee 0%, #ccc 20%, #eee 60%, #eee 100%);
    background-repeat: no-repeat;
    background-size: 800px 104px;
    position: relative;
    opacity: 0.75;
}

.placeholder {
    position:relative;
}
.placeholder .shimmer-fx {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    border-radius:0px;
}
.placeholder .shimmer-fx.white > div:not(.abc) {
    background: #fff;
}
.placeholder .shimmer-fx > div {
    display:inline-block;
    position:absolute;
}

.big_button.shimmer-fx {
    background: #00b3b7;
    background-image: linear-gradient(to right, #00b3b7 0%, #65caca 20%, #00b3b7 60%, #00b3b7 100%);
}

/*.up_title.shimmer-fx, .sub_title.shimmer-fx {
    border-radius:0px;
    background: #fff;
    background-image: linear-gradient(to right, #fff 0%, #eee 20%, #fff 60%, #fff 100%);
}

.up_title.shimmer-fx {
    display:inline-block;
    margin:4px;
    height:12px;
    width:10em;

.sub_title.shimmer-fx {
    display:inline-block;
    margin:4px;
    height:10px;
    width:14em;
}
}*/


@-webkit-keyframes placeHolderShimmer {
  0% {
    background-position: -468px 0
  }
  100% {
    background-position: 468px 0
  }
}


/*
 *
 * Ripple effect
 *
 */

.big_button, a.ripple {
  background-position: center;
  transition: background 0.8s;
}

.big_button:hover, a.ripple:hover {
    color: #d5feff;
    background: #00b3b7 radial-gradient(circle, transparent 1%, #00b3b7 1%) center/15000%;
}

.big_button:active, a.ripple:active {
    background-color: #0ec3c7;
    background-size: 100%;
    transition: background 0s;
}

.big_button.btn-danger:hover {
    color: #dc3545;
    background: #fff radial-gradient(circle, transparent 1%, #dc3545 1%) center/15000%;
}

.big_button.btn-danger:active {
    background-color: #0ec3c7;
    background-size: 100%;
    transition: background 0s;
}

.big_button.discard:hover {
    color: #fff;
    background: #aaa radial-gradient(circle, transparent 1%, #bbb 1%) center/15000%;
}

.big_button.discard:active {
    background-color: #999;
    background-size: 100%;
    transition: background 0s;
}

/*
 * jsGrid
 *
 */

.jsgrid-cell {
    overflow:hidden;
}




/* Shaking fx */

.shake-fx {
  animation: shake-fx 0.5s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake-fx {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-1px, -1px, 0);
  }

  40%, 60% {
    transform: translate3d(-2px, -2px, 0);
  }
}



/*
 *
 * Theme site buttons into some bootstrap and fullcalendar elements
 *
 */

.toast-custom {
    z-index: 1000; 
    left: calc(50% - 200px);
    margin-bottom: 2em;
}

.toast-custom > div {
     box-shadow: 2px 6px 13px 5px #4c4c4c66;
}

body.admin .modal-header {
    background: #d4efed;
}

.big_button.btn {
    /*display:inline-block;
    width:auto;
    height:auto;
    line-height:36px;
    padding:.375rem 2rem;*/
    font-size: 19px;  /* original site theme size */
}


.big_button.discard {
    background-color: #999;
}

.big_button.discard:hover {
    background-color: #ccc;
}

.big_button.btn-danger {
    background-color: #dc3545;
}

.big_button.btn-danger:hover {
    color: #ffdbdb;
    background-color: #bb2d3b;
}

/* bootstrap primary button in admin area (da completare) */

.admin .btn-primary
{
    color: white; /* original #0d6efd */
    border-color: #1d7777; /* idem */
    background-color: #1d7777;
}

.admin .btn-primary.soft {
    border-color: white;
    background-color: #1d777799;
}

.admin .btn-primary:hover
{
    color: white; /* original #0d6efd */
    border-color: #1d7777; /* idem */
    background-color: #1d7777cc; /* idem */
}

.admin .btn-check:active+.btn-primary, 
.admin .btn-check:checked+.btn-primary, 
.admin .btn-primary.active, 
.admin .btn-primary.dropdown-toggle.show, 
.admin .btn-primary:active {
    color: white; /* original #0d6efd */
    border-color: #1d7777 !important; /* idem */
    background-color: #1d7777 !important; /* idem */
}

.btn-check:focus+.btn-primary, .btn-primary:focus {
    box-shadow: 0 0 0 .25rem #1d77774f; /*rgba(13,110,253,.5);*/
}

.btn-primary:active:focus, .show>.btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .25rem #1d777799; /*rgba(13,110,253,.5);*/
}


/* primary outline */

.admin .btn-outline-primary
{
    color: #1d7777; /* original #0d6efd */
    border-color: #1d7777; /* idem */
}

.admin .btn-outline-primary:disabled {
    opacity:0.5;
}

.admin .btn-outline-primary:hover
{
    color: white; /* original #0d6efd */
    border-color: #1d7777; /* idem */
    background-color: #1d7777; /* idem */
}

.admin .btn-outline-primary.soft:hover {
    background-color: #1d777799; /* idem */
}

.admin .btn-check:active+.btn-outline-primary, 
.admin .btn-check:checked+.btn-outline-primary, 
.admin .btn-outline-primary.active, 
.admin .btn-outline-primary.dropdown-toggle.show, 
.admin .btn-outline-primary:active {
    color: white; /* original #0d6efd */
    border-color: #1d7777 !important; /* idem */
    background-color: #1d7777 !important; /* idem */
}

.admin .btn-check:active+.btn-outline-primary:focus, 
.admin .btn-check:checked+.btn-outline-primary:focus, 
.admin .btn-outline-primary.active:focus, 
.admin .btn-outline-primary.dropdown-toggle.show:focus, 
.admin .btn-outline-primary:active:focus {
    box-shadow: 0 0 0 .25rem #1d77774f; /*rgba(13,110,253,.5);*/
}

.btn-check:focus+.btn-outline-primary, .btn-outline-primary:focus {
    box-shadow: 0 0 0 .25rem #1d777788; /*rgba(13,110,253,.5);*/
}

.admin .form-check-input:checked {
    background-color: #1d7777;
    border-color: #1d7777;
}

/* fullcalendar buttons */
.admin .fc-button-primary {
    background-color: #1d7777;
}

.form-select.tight {
    width:auto;
}


/*
 * fullcalendar headers uppercase
 *
 */

.fc-header-toolbar .fc-center {
    text-transform:uppercase;
}

th.fc-day-header {
    /*text-transform:uppercase;*/
}


/*
 *
 * form message
 *
 */

.form-msg {
    display:none;
    position:absolute;
    font-weight:bold;
    margin-top: -1.25em;
}

.form-msg > .success {
    /*border-color: #198754;*/
    color: #669fa0;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: left calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
    padding-left: calc(1.5em + .75rem);
 }
 
.form-msg > .error {
    color: #dc3545;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: left calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
    padding-left: calc(1.5em + .75rem);
 }
 
  
 /*
  * Full-calendar custom theming
  *
  */
 
 .fc-button-primary {
     
 }
 
 
 
 /*
  * Other...
  *
  */
 
#DoctorName {
     margin-bottom: 1em;
}


.uploadProgressBar {
    /*border: 1px solid #0099CC;*/
    padding: 1px;
    position: relative;
    height: 1em;
    /*border-radius: 3px;*/
    /*margin: 10px;*/
    text-align: left;
    /*background: #fff;*/
    /*box-shadow: inset 1px 3px 6px rgb(0 0 0 / 12%);*/
}

.uploadProgressBar .progress-bar {
    height: 100%;
    /*border-radius: 3px;*/
    background-color: #23888a3d;
    width: 0;
    transition: width 2s;
    /*box-shadow: inset 1px 1px 10px rgb(0 0 0 / 11%);*/
}

.uploadProgressBar .status {
    top: 0px;
    left: 50%;
    position: absolute;
    display: inline-block;
    color: #00000042;
    font-weight: bold;
    font-size: 11pt;    
}

#RecipesList label {
    cursor: pointer;
}


    ul.file-list {
        margin: 0;
        margin-bottom: 0.5em;
        padding: 0;
    }
    
    ul.file-list li {
        list-style-type: none;
        display: inline-block;
        border-radius: 5px;
        background: #00b3b7; /*#002245;*/
        color: white;
        font-size: 9pt;
        padding: 0.25em 2em 0.25em 1em;
        margin-right:0.25em;
        margin-bottom:0.25em;
        text-align: center;
    }   
    
    ul.file-list li svg {
        display:block;
        width:100%;
        padding:0.5em 0em;
    }
    
    ul.file-list.big li {
        font-size: inherit;
        font-weight:bold;
        line-height: 14pt;
    }    
    
    ul.file-list.big li a {
        display: inline-block;
        padding-bottom:0.25em;
    }
    
    ul.file-list.big li span {
        font-size: 8pt;
        font-weight: normal;
        text-decoration:none;
        display: inline-block;
    }
    
    ul.file-list li a.x {
        color: white;
        text-decoration: none;
        display: inline-block;
        transform: rotate(45deg);
        font-family: monospace;
        font-size: 2em;
        position: absolute;
        line-height: 0.5em;
        margin-left: 0.25em;
    }