/* 
Custom CSS
Colori cambiati sul main theme con le variabili definite qui
*/

:root {
    --primary: hsla(220.87, 51.88%, 26.08%, 1);
    --primary-5: hsla(221, 52%, 26%, 0.05);
    --primary-10: hsla(221, 52%, 26%, 0.1);
    --primary-20: hsla(221, 52%, 26%, 0.2);
    --primary-30: hsla(221, 52%, 26%, 0.3);
    --primary-40: hsla(221, 52%, 26%, 0.4);
    --primary-50: hsla(221, 52%, 26%, 0.5);
    --primary-60: hsla(221, 52%, 26%, 0.6);
    --primary-70: hsla(221, 52%, 26%, 0.7);
    --primary-80: hsla(221, 52%, 26%, 0.8);
    --primary-90: hsla(221, 52%, 26%, 0.9);
    --primary-d-1: hsl(222, 48%, 22%);
    --primary-d-2: hsl(223, 44%, 18%);
    --primary-d-3: hsl(225, 39%, 15%);
    --primary-d-4: hsl(226, 33%, 11%);
    --primary-d-5: hsl(229, 32%, 7%);
    --primary-l-1: hsl(225, 28%, 38%);
    --primary-l-2: hsl(228, 18%, 50%);
    --primary-l-3: hsl(229, 18%, 62%);
    --primary-l-4: hsl(230, 18%, 74%);
    --primary-l-5: hsl(231, 18%, 87%);
    --secondary: hsla(208.71, 70%, 39.22%, 1);
    --secondary-5: hsla(209, 70%, 39%, 0.05);
    --secondary-10: hsla(209, 70%, 39%, 0.1);
    --secondary-20: hsla(209, 70%, 39%, 0.2);
    --secondary-30: hsla(209, 70%, 39%, 0.3);
    --secondary-40: hsla(209, 70%, 39%, 0.4);
    --secondary-50: hsla(209, 70%, 39%, 0.5);
    --secondary-60: hsla(209, 70%, 39%, 0.6);
    --secondary-70: hsla(209, 70%, 39%, 0.7);
    --secondary-80: hsla(209, 70%, 39%, 0.8);
    --secondary-90: hsla(209, 70%, 39%, 0.9);
    --secondary-d-1: hsl(210, 63%, 34%);
    --secondary-d-2: hsl(211, 57%, 28%);
    --secondary-d-3: hsl(213, 50%, 21%);
    --secondary-d-4: hsl(215, 42%, 15%);
    --secondary-d-5: hsl(216, 31%, 9%);
    --secondary-l-1: hsl(214, 42%, 52%);
    --secondary-l-2: hsl(216, 41%, 62%);
    --secondary-l-3: hsl(217, 41%, 72%);
    --secondary-l-4: hsl(219, 41%, 81%);
    --secondary-l-5: hsl(219, 41%, 91%);
    --tertiary: hsla(355.14, 82.22%, 44.12%, 1);
    --tertiary-5: hsla(355, 82%, 44%, 0.05);
    --tertiary-10: hsla(355, 82%, 44%, 0.1);
    --tertiary-20: hsla(355, 82%, 44%, 0.2);
    --tertiary-30: hsla(355, 82%, 44%, 0.3);
    --tertiary-40: hsla(355, 82%, 44%, 0.4);
    --tertiary-50: hsla(355, 82%, 44%, 0.5);
    --tertiary-60: hsla(355, 82%, 44%, 0.6);
    --tertiary-70: hsla(355, 82%, 44%, 0.7);
    --tertiary-80: hsla(355, 82%, 44%, 0.8);
    --tertiary-90: hsla(355, 82%, 44%, 0.9);
    --tertiary-d-1: hsl(358, 73%, 38%);
    --tertiary-d-2: hsl(1, 67%, 31%);
    --tertiary-d-3: hsl(3, 64%, 24%);
    --tertiary-d-4: hsl(6, 60%, 17%);
    --tertiary-d-5: hsl(14, 61%, 9%);
    --tertiary-l-1: hsl(4, 68%, 56%);
    --tertiary-l-2: hsl(7, 74%, 65%);
    --tertiary-l-3: hsl(8, 81%, 75%);
    --tertiary-l-4: hsl(9, 88%, 83%);
    --tertiary-l-5: hsl(10, 96%, 92%);
    --bg-body: hsl(222, 55%, 98%);
    --bg-surface: hsla(0, 0%, 100%, 1);
    --text-body: hsla(0, 0%, 25%, 1);
    --text-title: hsla(0, 0%, 0%, 1);
    --border-primary: hsla(0, 0%, 50%, 0.25);
    --shadow-primary: hsla(0, 0%, 0%, 0.15);
    --light: hsl(85, 0%, 100%);
    --light-5: hsla(0, 0%, 100%, 0.05);
    --light-10: hsla(0, 0%, 100%, 0.1);
    --light-20: hsla(0, 0%, 100%, 0.2);
    --light-30: hsla(0, 0%, 100%, 0.3);
    --light-40: hsla(0, 0%, 100%, 0.4);
    --light-50: hsla(0, 0%, 100%, 0.5);
    --light-60: hsla(0, 0%, 100%, 0.6);
    --light-70: hsla(0, 0%, 100%, 0.7);
    --light-80: hsla(0, 0%, 100%, 0.8);
    --light-90: hsla(0, 0%, 100%, 0.9);
    --dark: hsla(0, 0%, 0%, 1);
    --dark-5: hsla(0, 0%, 0%, 0.05);
    --dark-10: hsla(0, 0%, 0%, 0.1);
    --dark-20: hsla(0, 0%, 0%, 0.2);
    --dark-30: hsla(0, 0%, 0%, 0.3);
    --dark-40: hsla(0, 0%, 0%, 0.4);
    --dark-50: hsla(0, 0%, 0%, 0.5);
    --dark-60: hsla(0, 0%, 0%, 0.6);
    --dark-70: hsla(0, 0%, 0%, 0.7);
    --dark-80: hsla(0, 0%, 0%, 0.8);
    --dark-90: hsla(0, 0%, 0%, 0.9);
    --success: hsl(136, 95%, 56%);
    --success-5: hsla(136, 95%, 56%, 0.05);
    --success-10: hsla(136, 95%, 56%, 0.1);
    --success-20: hsla(136, 95%, 56%, 0.2);
    --success-30: hsla(136, 95%, 56%, 0.3);
    --success-40: hsla(136, 95%, 56%, 0.4);
    --success-50: hsla(136, 95%, 56%, 0.5);
    --success-60: hsla(136, 95%, 56%, 0.6);
    --success-70: hsla(136, 95%, 56%, 0.7);
    --success-80: hsla(136, 95%, 56%, 0.8);
    --success-90: hsla(136, 95%, 56%, 0.9);
    --error: hsl(351, 95%, 56%);
    --error-5: hsla(351, 95%, 56%, 0.05);
    --error-10: hsla(351, 95%, 56%, 0.1);
    --error-20: hsla(351, 95%, 56%, 0.2);
    --error-30: hsla(351, 95%, 56%, 0.3);
    --error-40: hsla(351, 95%, 56%, 0.4);
    --error-50: hsla(351, 95%, 56%, 0.5);
    --error-60: hsla(351, 95%, 56%, 0.6);
    --error-70: hsla(351, 95%, 56%, 0.7);
    --error-80: hsla(351, 95%, 56%, 0.8);
    --error-90: hsla(351, 95%, 56%, 0.9);
    --text-xs: clamp(0.73rem, calc(-0.01vw + 0.73rem), 0.72rem);
    --text-s: clamp(0.87rem, calc(0.04vw + 0.86rem), 0.9rem);
    --text-m: clamp(1.05rem, calc(0.12vw + 1.02rem), 1.13rem);
    --text-l: clamp(1.26rem, calc(0.22vw + 1.21rem), 1.41rem);
    --text-xl: clamp(1.51rem, calc(0.37vw + 1.43rem), 1.76rem);
    --text-2xl: clamp(1.81rem, calc(0.58vw + 1.69rem), 2.2rem);
    --text-3xl: clamp(2.17rem, calc(0.85vw + 2rem), 2.75rem);
    --text-4xl: clamp(2.6rem, calc(1.23vw + 2.36rem), 3.43rem);
    --hero-title-size: var(--text-4xl);
    --post-title-size: var(--text-2xl);
}

h1,h2,h3,h4,h5,h6 { font-family: 'Nunito Sans', sans-serif }
a,body,span,text { font-family: 'Nunito', sans-serif; }
a {color:var(--secondary); text-decoration:inherit}
a:hover {color:var(--secondary)}
hr {border-top: 1px solid var(--secondary-50)}
.logo-text {color:var(--secondary)}

.app-menu>ul>li>a>i {margin-left:-8px}
.app-menu>ul>li ul li a {font-size:var(--text-m)}

.app-header a * {transition:all .2s ease-in-out}
.app-header .nav-link i {filter:invert(41%) sepia(17%) saturate(674%) hue-rotate(182deg) brightness(95%) contrast(89%); color: var(--secondary) !important}
.app-header .nav-link:hover i {filter:invert(34%) sepia(23%) saturate(3309%) hue-rotate(195deg) brightness(109%) contrast(115%)}
.app-header .indicatore-notifica {transform:translate(-100%,-50%)!important}
.navbar .dropdown-menu-end {right:-10px}
.app-header .notifications-dropdown {max-width: 350px; width: 300px;}

.app-container {overflow:hidden}
.app-content .page-description {padding:30px 0}
.app-content .page-description.page-description-tabbed {padding-bottom: 0 }

/* DASHBOARD */
.progress-bar {font-size:1.2em; background-color: var(--secondary-60);  }
.widget-list .widget-list-content .widget-list-item .widget-list-item-description .widget-list-item-description-progress .progress  {height:20px}

.alert.upcoming {background-color:#FCEACE; background-image: url(../../assets/images/backgrounds/Background_01.svg); background-repeat: no-repeat; background-size: cover; background-position: right;}

.educentre-popover {max-width:100%; border:none;}
.educentre-popover.rata-scaduta-popover .popover-body { background:var(--tertiary-l-5); border-radius: 5px;}
.educentre-popover.rata-scaduta-popover .popover-arrow:after,
.educentre-popover.rata-scaduta-popover .popover-arrow:before {border-top-color: var(--tertiary-l-5) !important; }
.popover-interaction.rata-scaduta:hover  {background:var(--secondary-5); cursor:pointer}

.nextbookedlessons-table img { width: 35px; height: 35px; border-radius: 16.5px;}
.nextbookedlessons-table td, .nextbookedlessons-table th { vertical-align: middle;}
.nextbookedlessons-table td:nth-child(4) {
   max-width:250px; white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis;}
.nextbookedlessons-table th:nth-child(3) ,.nextbookedlessons-table td:nth-child(3) {text-align: center;}
.nextbookedlessons-table tr th:last-child, .nextbookedlessons-table tr td:last-child { text-align: right;}


.form-control:focus {border-color:var(--secondary-l-1)}

.credits-details {max-width:50%}

.nav-item.nav-logout {border-left:1px solid var(--secondary)}

.modal .accordion-header:hover * {color: var(--secondary-l-1);}


.offcanvas .logo {padding-left:10px;}
.offcanvas-header {height:45px}

#teachers-page .card-footer {border-top: 1px solid var(--primary-l-5)}
#teachers-page .btn-group .btn-outline-secondary:hover,
#teacher-page .btn-group .btn-outline-secondary:hover  {background-color:var(--secondary-d-2); border-color: var(--secondary-d-2); color:var(--light) ;} 
.teacher-detail span {line-height: 1.4;}
.teacher-profile.teacher-avatar {max-width:120px; aspect-ratio: 1 / 1; width:100%; height:auto}
.video-wrap {max-height: 60vh; aspect-ratio: 16/9;}
#teacher-page table, .teacher-page table {margin-bottom:0}
#teacher-page table i, .teacher-page table i {display:block}
#teacherModal .modal-dialog {max-width:80%}
#teacherModal .modal-content {background:#F4F7FB}

#correzione .note-editing-area {pointer-events: none; position:relative;}
#correzione .note-editing-area::before { content:''; position:absolute; top:0; left:0; width:100%; height:100%; z-index:1000; background:rgba(255,255,255,0); pointer-events: none; }
#correzione .note-toolbar {pointer-events: none; position:relative;}
#correzione .note-toolbar::before { content:''; position:absolute; top:0; left:0; width:100%; height:100%; z-index:1000; background:rgba(255,255,255,0.75); pointer-events: none; }
#correzione .note-editing-area b {color:red}
#corrections-table tbody tr {height: 44px;}
#corrections-table tr th:last-child, #corrections-table tr td:last-child { text-align: right;}
#corrections-table tr td:first-child { max-width:200px; white-space: nowrap; overflow: hidden !important; text-overflow: ellipsis;}

.writing-assistance-active {font-weight:bold; }
.writing-assistance-active td {background-color: var(--secondary-5)}

.span_errore {
color: #d6494b !important; 
font-weight:bold; 
}
.span_correzione {
color: #279566 !important; 
font-weight:bold; 
}
.span_commento {
color: #3583ca !important; 
font-weight:bold; 
}
.span_evidenzia {
color: black; 
background-color: yellow;
font-weight:bold; 
}