:root {
    --main-color-white: #FFFFFF;
    /*--main-color-green: #45BA93;*/
    --main-color-green: #028957;
    /*--main-color-blue: #486FB0;*/
    --main-color-blue: #014589;
    --main-color-grey: #D1D3D4;
    --main-color-medium-grey: #808080;
    --main-color-orange: #ee7901;
    --main-color-magenta: #ee01ed;
    --main-color-black: #030004;
    --main-color-text: #58595B;
    --main-color-warning: #EF5E54;
    --main-color-light-grey: #E6E7E8;
    --main-color-dark-grey: #58595B;
    --main-color-red: #EF5E54;
    --main-color-yellow: #FAAF4C;
    --main-color-light-green: #cce5d6;
    --main-color-light-blue: #01b3ee;

    --bs-nav-link-padding-x: 1rem;
    --bs-nav-link-padding-y: 0.5rem;
    --bs-table-bg: var(--main-color-green);
}

html, body, a {
    font-family: 'Oxygen', sans-serif;
    color: var(--main-color-text, #58595B);
}

a {
	cursor: pointer;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
    color: green;
}

label {
    margin-bottom: 0.5rem;
}

.navbar {
    --bs-navbar-padding-x: 1rem;
    --bs-navbar-padding-y: 0.5rem;
}

/*   BACKGROUND   */

.bg-gradient-md {
    background-color: var(--main-color-blue);
    background-image: linear-gradient(90deg, var(--main-color-blue), var(--main-color-green));
}

.bg-gradient-md-45 {
    background-color: transparent;
    background-image: linear-gradient(45deg, var(--main-color-blue), var(--main-color-green));
}

.bg-green {
    background-color: var(--main-color-green)!important;
}

.bg-blue {
    background-color: var(--main-color-blue)!important;
}

.bg-grey {
	background-color: var(--main-color-light-grey)!important;
}

.bg-red {
	background-color: var(--main-color-red)!important;
}

.bg-yellow {
	background-color: var(--main-color-yellow)!important;
}

.bg-light-green {
    background-color: var(--main-color-light-green)!important;
}

.bg-light-green > * {
    background-color: var(--main-color-light-green)!important;
}

.bg-light-blue {
    background-color: var(--main-color-light-blue)!important;
}

.bg-white {
	background-color: var(--main-color-white);
}

/*   TEXT   */

.text-white {
    color: var(--main-color-white)!important;
}

.text-light-grey {
    color: var(--main-color-light-grey)!important;
}

.text-green {
    color: var(--main-color-green)!important;
}

.text-blue {
    color: var(--main-color-blue)!important;
}

.text-dark-grey {
    color: var(--main-color-text)!important;
}

.text-red {
    color: var(--main-color-red)!important;
}

.text-yellow {
    color: var(--main-color-yellow)!important;
}

.text-grey {
    color: var(--main-color-grey)!important;
}

.text-medium-grey {
    color: var(--main-color-medium-grey)!important;
}

.text-light-blue {
    color: var(--main-color-light-blue)!important;
}

.text-orange {
    color: var(--main-color-orange)!important;
}

.text-magenta {
    color: var(--main-color-magenta)!important;
}

.text-black {
    color: var(--main-color-black)!important;
}

/*   WIDTH   */

.w-5 {
    width: 5%!important;
}
.w-10 {
    width: 10%!important;
}
.w-15 {
    width: 15%!important;
}
.w-20 {
    width: 20%!important;
}
/*w-25 provided by Bootstrap*/
.w-30 {
    width: 30%!important;
}
.w-35 {
    width: 35%!important;
}
.w-40 {
    width: 40%!important;
}
.w-45 {
    width: 45%!important;
}
/*w-50 provided by Bootstrap*/
.w-55 {
    width: 55%!important;
}
.w-60 {
    width: 60%!important;
}
.w-65 {
    width: 65%!important;
}
.w-70 {
    width: 70%!important;
}
/*w-75 provided by Bootstrap*/
.w-80 {
    width: 80%!important;
}
.w-85 {
    width: 85%!important;
}
.w-90 {
    width: 90%!important;
}
.w-95 {
    width: 95%!important;
}


/* BUTTON */

.btn {
    border: 1px solid transparent;
}

.btn-outline-secondary {
    border-color: var(--main-color-dark-grey);
}

.btn-blue {
    color: var(--main-color-white);
    background-color: var(--main-color-blue);
    border-color: var(--main-color-blue);
    --bs-btn-hover-bg: var(--main-color-blue);
}

.btn-blue:disabled {
    color: var(--main-color-white);
    background-color: var(--main-color-blue);
}

.btn-grey {
    color: var(--main-color-white);
    background-color: var(--main-color-grey);
    border-color: var(--main-color-grey);
}

.btn-green {
    color: var(--main-color-white);
    background-color: var(--main-color-green);
    border-color: var(--main-color-green);
    --bs-btn-hover-bg: var(--main-color-green);
}

.btn-red {
    color: var(--main-color-white);
    background-color: var(--main-color-red);
    border-color: var(--main-color-red);
    --bs-btn-hover-bg: var(--main-color-red);
}

.btn-navbar {
    --bs-btn-hover-bg: var(--main-color-grey);
}

.btn-navbar.show {
    background-color: var(--main-color-light-grey) !important;
    border-color: var(--main-color-light-grey) !important;
}

.btn.btn-navbar {
    border-bottom-color: var(--main-color-light-grey);
}
/* bootstrap lg break point */
@media (max-width: 992px) {
    .btn.btn-navbar {
        border-top-color: transparent !important;
        border-left-color: transparent !important;
        border-right-color: transparent !important;
    }
    .btn.btn-navbar:hover {
        background-color: transparent;
    }
}

.btn:hover {
	color: var(--main-color-grey);
}

/* INPUT GROUP */
.input-group-prepend > button:focus, .input-group-append > button:focus {
	box-shadow: none;
}

/* FONT SIZE */
.font-size-xs {
	font-size:1vw;
}

.font-size-s {
	font-size:1.2vw;
}

.font-size-m {
	font-size:1.5vw;
}

.font-size-l {
	font-size:1.7vw;
}

.font-size-xl {
	font-size:2.2vw;
}

.font-uc {
	text-transform: uppercase;
}

.font-bold {
	font-weight: bold;
}

.hide {
	display: none!important;
}

/*CHECKBOX*/

.form-check {
    padding-left: 2rem;
}

.form-check .form-check-label {
  color: var(--main-color-text);
  padding-top:5px;
  padding-left:0.5rem;
}

.form-check .form-check-input {
    height: 1.5rem;
    width: 1.5rem;
    margin-left: -1.5rem;
    border-color: var(--main-color-grey);
    border-radius: 0.25rem;
  }

.form-check-input:checked {
  background-color: var(--main-color-blue);
  border-color: #0d6efd;
}

/*SWITCH*/
.form-check .form-switch .form-check-label {
    
}
.form-check .form-switch .form-check-label::before,
.form-check .form-switch .form-check-label::after {
    border-radius: 1rem;
}
.form-check .form-switch .form-check-label::before {
    width: 50px;
}
.form-check .form-switch .form-check-label::after {
    width: 21px;
    height: 21px;
}
.form-check .form-switch .form-check-input:checked~.form-check-label::after {
    transform: translateX(1.5rem);
}

/*CHECKBOX*/
.white-box {
	background-color: white;
	border: 1px solid var(--main-color-dark-grey);
	border-radius: .25rem;
}

/*RADIO*/

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: var(--main-color-grey) !important;
}

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

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


.invalid-field{
	border-color: red;
	text-color: red;
}

p.error-text{
	color: red;
}

.hide{
	display: none;
}

/*Per avere i tab formattati in verde e con l'aspetto richiesto*/
.tab-green #tabs .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: var(--main-color-grey);
    background-color: transparent;
    border-bottom: 5px solid !important;
    font-size: 16px;
    font-weight: bold;
}

.tab-green .nav-link:hover {
    border: none;
}

.tab-green .nav-link.active {
    color: var(--main-color-green);
    background-color: transparent;
    border-color: transparent transparent var(--main-color-light-grey);
    border-bottom: 5px solid !important;
    font-size: 16px;
    font-weight: bold;
}

.nav-tabs .nav-link {
    border: none!important;
}

.tab-green .nav-link {
    color: var(--main-color-grey);
    border-bottom: 5px solid !important;
}
/*Per avere i tab formattati in verde e con l'aspetto richiesto*/

.left-border-green-box {
	background-color: white;
	border-left: 4px solid var(--main-color-green);
}

.bottom-border-green-box {
	background-color: white;
	border-bottom: 2px solid var(--main-color-green);
}

.bottom-border-box {
	background-color: white;
	border-bottom: 1px solid var(--main-color-dark-grey);
}

.bottom-border-grey-box {
	background-color: white;
	border-bottom: 1px solid var(--main-color-grey);
}

/*ICONA TRIGGER COLLAPSE*/
.collapse-trigger::after {
    font-family: 'Material Icons';
    content: "\e5ce";
    position: absolute;
    top: 3px;
    right: 5px;
    font-size: 1.5rem;
}

.collapse-trigger.collapsed::after {
    content: "\e5cf";
}

/*ICONS*/

.icon-custom-sm {
    display: block;
    width: 24px;
    height: 24px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.icon-custom {
	display: block;
	width: 30px;
	height: 30px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.icon-custom-lg {
    display: block;
    width: 48px;
    height: 48px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.icon-custom-info {
	display: block;
	width: 50px;
	height: 50px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.icon-custom-menu {
    width: 24px;
    height: 24px;
}

.icon-insulin {
	background-image: url(../img/icon_insulin.png);
}

.icon-insulin-grey {
    background-image: url(../img/icon_insulin_grey.png);
}

.icon-insulin-pen-pump {
    width: 60px;
    background-image: url(../img/icon_insulin_pen_pump.png);
}

.icon-carb {
	background-image: url(../img/icon_carb.png);
}

.icon-heart-rate {
    background-image: url(../img/icon_heart_rate.png);
}

.icon-glu {
	background-image: url(../img/icon_glu.png);
}

.icon-ket {
	background-image: url(../img/one/icon_ketone_glApp.png);
}

.icon-illness {
	background-image: url(../img/one/icon_illness_glApp.png);
}

.icon-med {
	background-image: url(../img/one/icon_medication_glApp.png);
}

.icon-note {
	background-image: url(../img/one/icon_note_glApp.png);
}

.icon-sensor {
	background-image: url(../img/icon_sensor.png);
}

.icon-break {
	background-image: url(../img/icon_break.png);
}

.icon-lunch {
	background-image: url(../img/icon_lunch.png);
}

.icon-dinner {
	background-image: url(../img/icon_dinner.png);
}

.icon-night {
	background-image: url(../img/icon_night.png);
}

.icon-activity {
	background-image: url(../img/icon_activity.png);
}

.icon-check {
	background-image: url(../img/icon_check.png);
}

.icon-post-meal {
	background-image: url(../img/icon_post_meal.png);
}

.icon-pre-meal {
	background-image: url(../img/icon_pre_meal.png);
}

.icon-time {
	background-image: url(../img/icon_time.png);
}

.icon-cgm {
    width: 24px;
    height: 24px;
    background-size: 100% 80%;
    background-repeat: no-repeat;
    background-image: url(../img/icon_cgm_blue.png);
    background-position: center;
	
	background-image: url(../img/icon_cgm_blue.png);
}

.icon-pump {
    background-size: 100% 95%;
    background-repeat: no-repeat;
    background-position: center;
    
    background-image: url(../img/icon_pump.svg);
}

.btn.active .icon-cgm, .btn-blue .icon-cgm {
	background-image: url(../img/icon_cgm_grey.png);
}

.icon-ref {
	background-image: url(../img/icon_ref.png);
}

.icon-manuf {
	background-image: url(../img/icon_manufacturer.png);
}

.icon-date {
	background-image: url(../img/icon_date.png);
}

.green-box {
	color: var(--main-color-white);
    background-color: var(--main-color-green);
    border-color: var(--main-color-green);
    width: 100%;
}

.light-green-box {
	color: var(--main-color-white);
    background-color: var(--main-color-light-green);
    border-color: var(--main-color-light-green);
    width: 100%;
}

/*Custom icons colors*/
.icon-custom-blue {
    filter: invert(20%) sepia(42%) saturate(3687%) hue-rotate(196deg) brightness(87%) contrast(99%);
}

.icon-custom-green {
    filter: invert(43%) sepia(89%) saturate(5712%) hue-rotate(147deg) brightness(89%) contrast(98%);
}

.icon-custom-grey {
    filter: invert(41%) sepia(5%) saturate(99%) hue-rotate(169deg) brightness(93%) contrast(85%);
}

.btn-navbar.active .icon-custom-blue {
    filter: invert(100%) sepia(86%) saturate(34%) hue-rotate(169deg) brightness(89%) contrast(106%);
}

/*FLAGS*/

.flag-custom {
	display: block;
	width: 30px;
	height: 30px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	margin: auto;
}

.flag-AR-MA {
	background-image: url(../img/flag_AR_MA.png);
}

.flag-AR {
	background-image: url(../img/flag_AR.png);
}

.flag-DA {
	background-image: url(../img/flag_DA.png);
}

.flag-DE-AT {
	background-image: url(../img/flag_DE_AT.png);
}

.flag-DE {
	background-image: url(../img/flag_DE.png);
}

.flag-EL {
	background-image: url(../img/flag_EL.png);
}

.flag-EN-IE {
	background-image: url(../img/flag_EN_IE.png);
}

.flag-EN {
	background-image: url(../img/flag_EN.png);
}

.flag-ES {
	background-image: url(../img/flag_ES.png);
}

.flag-FR-BE {
	background-image: url(../img/flag_FR_BE.png);
}

.flag-FR-LU {
	background-image: url(../img/flag_FR_LU.png);
}

.flag-FR {
	background-image: url(../img/flag_FR.png);
}

.flag-HE {
	background-image: url(../img/flag_HE.png);
}

.flag-HU {
	background-image: url(../img/flag_HU.png);
}

.flag-IT {
	background-image: url(../img/flag_IT.png);
}

.flag-NB {
	background-image: url(../img/flag_NB.png);
}

.flag-NL {
	background-image: url(../img/flag_NL.png);
}

.flag-NL-BE {
	background-image: url(../img/flag_NL_BE.png);
}

.flag-PT {
	background-image: url(../img/flag_PT.png);
}

.flag-SV-FI {
	background-image: url(../img/flag_SV_FI.png);
}

.flag-SV {
	background-image: url(../img/flag_SV.png);
}

.flag-UK {
	background-image: url(../img/flag_UK.png);
}

/*SHAPES*/
.dot-s {
  height: 18px;
  width: 18px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}


@media (max-width: 767.98px) {
	.font-size-xs {
		font-size:8px;
	}
	
    .font-size-s {
		font-size:9px;
	}
	
    .font-size-m {
		font-size:11px;
	}
	
    .font-size-l {
		font-size:13px;
	}
	
	.font-size-xl {
		font-size:16px;
	}	
	
	.icon-custom {
		width: 25px;
		height: 25px;
	}
	
	.flag-custom {
		width: 25px;
		height: 25px;
	}
	
}

@media (min-width: 767.99px) {
	.font-size-xs {
		font-size:9px;
	}
	
    .font-size-s {
		font-size:10px;
	}

    .font-size-m {
		font-size:12px;
	}

    .font-size-l {
		font-size:14px;
	}
	
	.font-size-xl {
		font-size:17px;
	}
}

@media (min-width: 1200px) {
	.font-size-xs {
		font-size:12px;
	}
	
    .font-size-s {
		font-size:14px;
	}

    .font-size-m {
		font-size:16px;
	}

    .font-size-l {
		font-size:18px;
	}
	
	.font-size-xl {
		font-size:22px;
	}
}

.cursor-pointer {
	cursor: pointer;
}

.min-height-7 {
	min-height: 7%;
}

#cover-spin {
    position:fixed;
    width:100%;
    left:0;right:0;top:0;bottom:0;
    background-color: rgba(255,255,255,0.7);
    z-index:9999;
    display:none;
}

.loading-spin {
	z-index: 9999;
	display: none;
}

@-webkit-keyframes spin {
	from {-webkit-transform:rotate(0deg);}
	to {-webkit-transform:rotate(360deg);}
}

@keyframes spin {
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}

#cover-spin::after, .loading-spin::after {
    content:'';
    display:block;
    position:absolute;
    left:48%;top:40%;
    width:40px;height:40px;
    border-style:solid;
    border-color:var(--main-color-blue);
    border-top-color:transparent;
    border-width: 4px;
    border-radius:50%;
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite;
}

/* unvisited link */
.blue-link {
  color: var(--main-color-blue);
}

/* mouse over link */
.blue-link:hover {
  color: var(--main-color-light-blue);
}

/*MOBILE*/
@media only screen and (max-device-width: 450px) {
    
    :root {
        font-size: 27px;
    }
    
    .btn-add {
        font-size: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .font-size-s {
        font-size: 24px;
    }
    
    .font-size-m {
        font-size: 32px;
    }
    
    .font-size-xl {
        font-size: 48px;
    }
    
    .icon-cgm {
        height: 64px;
        width: 64px;
    }
    
    .icon-custom-lg {
        width: 80px;
        height: 80px;
    }
    
    /* TODO: trovare alternativa */
    .jconfirm-buttons > button {
        font-size: 20px !important;
    }
    
    .material-icons-lg {
        font-size: 48px;
    }
    
    .material-icons-xl {
        font-size: 64px;
    }
    
    .tab-green .nav-link.active {
        font-size: 27px;
    }
    
}