::-webkit-input-placeholder { color: #ccc !important; opacity: 1; }
:-ms-input-placeholder { color: #ccc; }
::-ms-input-placeholder { color: #ccc; }
pre{ color: #c7c7c7; }
html{
	--black: #000;
    --grad: radial-gradient(
		      at top, #cb9aff, #7315d6 90%), url('/assets/xplanet/images/30d6dc3fe005a9966e07292893f74279_w200.gif') 50% 50% / 100% 100% !important;
   font-size: 16px;	
	min-height: 1vh;
	height: 100%;
	background: black;
} 
@media(max-width: 761px) {
	html{ font-size: 15px; }	
}

html,body{ background: black; min-height: 100vh; height: 100vh;   color: white; font-family: "Orbitron"}
		 

body{ margin: 0;  color: white; 
	min-height: 100vh;  
	background-repeat: no-repeat;  
	font-weight: 400; 
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale; 
	background: black; 

} 
body.has_header #page-content{
	padding-top: 40px;
    padding-bottom: 60px;
}
h1,h2,h3,h4,h5,h6{ 
	font-family: aviano-future, sans-serif; 
	font-weight: 700; 
	font-style: normal;
	text-transform: uppercase;
	margin: 0;
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

@media(max-width: 768px) {
	h1{ font-size: 1.8rem; }
}

a{ text-decoration: none !important;}
a:hover{ color: inherit !important;}
.pointer{ cursor: pointer; }
h5{
	font-size: 1.1rem;
}
.badge-white{
	background: white;
	color: black;
}
header{
			
    min-height: 67px;
    position: relative;
    --aug-br1-width: 50px !important;
    --aug-br1-height: 40% !important;
    --aug-br1: calc(25% - 50px) !important;
    --aug-bl1: calc(25% - 50px) !important;
    --aug-bl1-height: 40% !important;
    --aug-bl1-width: 50px !important;
    --aug-border-all: 3px !important; 
    --aug-inlay-all: 0px !important;
	--aug-border-bg: var(--grad) !important; 
	--aug-inlay-bg: black !important;  
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
                                  
    top: -60px;								 
    transition: 0.15s ease all;
}
header:hover{
	top: 0;
}
header .hamburger{
	position: absolute;
	bottom:0;
	left: 0;
	right: 0;
	height: 46px;
	text-align: center;		 
}
header .hamburger:after{ 
    content: "\f0c9";
    font-family: 'FontAwesome';
    color: white;
    font-size: 30px;
    transition: 0.15s ease all; 
    display: block;
}
header:hover .hamburger:after{ 
	transform: rotate(90deg);
}
img.blured {
    filter: blur(2px);
}

@media(min-width: 761px) {
	
	header{
		
   	 min-height: 113px;
	}
	
}
#app{
	
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
footer{ 
	margin-top:auto;
	overflow: hidden; position: relative; min-height: 50px; 
	z-index: 1; 
}   
footer .col-6{
	 
    --aug-inlay-all: 0px !important; 
	--aug-inlay-bg: #7315d6 !important;
	position: relative;
}
footer .col-6:first-child{
	
	--aug-tr1-width: 50px !important;
    --aug-tr1-height: 48px !important; 
	
}
footer .col-6:last-child{
	
	--aug-tl1-width: 50px !important;
    --aug-tl1-height: 48px !important; 
    margin-left: auto;
    text-align: right;
	
}
footer .col-6 > span{ 
	position: absolute;
	top:50%;
	transform: translateY(-50%);
	z-index: 100;
	width: 100%;
	
}
footer .col-6:first-child span{
	left: 5px;
}
footer .col-6:last-child span{
	right: 5px;
}
#app_content{
	position: relative;  
	z-index: 1;
	min-height: calc(100vh - 50px);
	
    background:black;
}
.footer_line{
	--aug-br1-width: 50px !important;
    --aug-br1-height: 48px !important;
    --aug-br1: calc(25% - 50px) !important;
    --aug-bl1: calc(25% - 50px) !important;
    --aug-bl1-height: 48px;
    --aug-bl1-width: 50px !important;
    --aug-border-all: 3px !important;
    --aug-inlay-all: 0px !important;
    --aug-border-bg: var(--grad) !important;
    --aug-border-top: -3px;
    --aug-inlay-bg: transparent;
	--aug-inlay-bg: #000 !important;
    min-height: 51px;
    position: absolute;
    width: 100%;
    left:0;
    bottom: -50px;
	
}

@media(max-width: 761px) {
	
	.footer_line{
		display: none;
	}
	
}

header #open_menu{ position: relative; z-index: 99;}
.modal .modal-dialog{ overflow-x: hidden; }
header .container{padding: 13px 0 ;   line-height: 39px; height: 67px; } 
.select2-selection__arrow:after {
    content: "\f25a";
    font-family: 'FontAwesome';
    position: absolute;
    right: 12px;
    width: 20px;
    height: 20px;
    top: 0;
}
.select2-results__options{
	
    max-height: 420px;
    overflow-y: scroll;
}

::-webkit-scrollbar {
  width: 7px;
}
 
::-webkit-scrollbar-track {
  background: white;
}
 
::-webkit-scrollbar-thumb {
  background: var(--grad);
  outline: none;
}



@media(min-width: 761px) {
  header .container:after{
    	display: block;
  } 
}

a{ color:#fff; }
.bg-black{ background: #0e0e0e !important; }
.bg-grad{ background: var(--grad) !important; }
.text-white ,
.text-white p{ color: white !important; }
.text-black{ color: black !important; }
  
.message-bar {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    border-radius: 0 !important;
    border: none;
    z-index: 1000;
}

.message-bar p{ margin-bottom: 0; }
 /* CARD */
 
  
 .card{
	background: transparent;
    padding: 0;
    --aug-border: initial;
    --aug-border-all: 3px;
	--aug-border-bg: var(--grad); 

    --aug-inlay: initial;
    --aug-inlay-all: 0px;
    --aug-inlay-opacity: 0;

    --aug-clip-br1: initial;
    --aug-clip-tl1: initial;
    --aug-b-extend1: 50%;
    
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
    
 }
 .card.big{
	 
    --aug-br1-height: 40px;
    --aug-br1-width: 40px;
    --aug-tl1-height: 40px;
    --aug-tl1-width: 40px;
 }
 
 .card.has_logo .card-header{
	 text-align: center;
 }
 
 
.card.has_logo .card-header{
	padding-left: 0;	
	padding-right: 0; 
	text-transform: uppercase; 
		
}
.card .card-header.border{
	
    --aug-border: initial;
    --aug-border-all: 3px;
    --aug-border-bg: var(--grad);
    border: none !important;
}

.card.has_logo .card-header .card-title{
	position: relative;
	min-height: 80px; 
}
.card.has_logo .card-header .card-title span{
	padding: 10px 20px;
	display: block;
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
}
.card.has_logo .card-header .card-title:before,
.card.has_logo .card-header .card-title:after{
	content:"";
	display: block;
	height: 3px;
	width:100%; 
	background: var(--grad);
}
.card.has_logo .card-header .card-title:after{
	position: absolute;
	bottom: 0;
}
.card.has_logo .card-header{ padding: 0; }
/*.card.has_logo .card-header:before{
	content:"";
	background-image: var(--logo);
	background-size: contain;
	background-repeat: no-repeat;
	width: 60%; 
    position: relative;
    display: block;
    min-height: 130px;
    margin: 10px auto;
    background-position-x: 50%;
    background-position-y: 50%;
}*/
.card .card-body{ font-size: 0.8rem; } 
.card .card-body p{ font-size: 1rem; } 

.locked{ position: relative; display: block; }
.locked span.lock:before{
	content:"";
	position: absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	z-index: 2; 
	
    background: url(/assets/xplanet/images/lock.png?v=2) center center no-repeat;
    width: 50px;
    height: 100px;
    background-size: contain;

}
.locked  span.lock span{
	
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 10000;
    background: #7315d657;
    padding: 5px;
    z-index: 2;
}
.locked  span.lock:after{
	content:'';
	position: absolute;
	top:0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.8);
	z-index: 1;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 10px;
}
 
@media(min-width: 768px) {
	.form-group { 
		background: transparent;
		border: none;
		border-radius: 0;
		overflow: visible;
	    --aug-border: initial;
	    --aug-border-all: 3px;
		--aug-border-bg: var(--grad);  
	    --aug-inlay: initial;
	    --aug-inlay-all: 0px;
	    --aug-inlay-opacity: 0; 
	    --aug-clip-br1: initial;   
	}
	.form-group:not(.normal) label{
		position: absolute;
		right:0px;
		top: 0px;
		bottom: 0;
		margin: 0;
		font-family: aviano-future, sans-serif; 
		transition: .5s ease all; 
		background: var(--grad);
		color: white;
		padding: 0 10px;
		line-height: 37px;
	}  
} 


.form-group.gold { 
	background: transparent;
	border: none;
	border-radius: 0;
	overflow: visible;
    --aug-border: initial;
    --aug-border-all: 3px;
	--aug-border-bg: var(--grad);  
    --aug-inlay: initial;
    --aug-inlay-all: 0px;
    --aug-inlay-opacity: 0; 
    --aug-clip-br1: initial;   
}
.form-group.gold label{
	position: absolute;
	right:0px;
	top: 0px;
	bottom: 0;
	margin: 0;
	font-family: aviano-future, sans-serif; 
	transition: .5s ease all; 
	background: var(--grad);
	color: black;
	padding: 0 10px;
	line-height: 37px;
}  


.form-group label{ 
	font-family: aviano-future, sans-serif; 
} 
.form-group:not(.normal) input:focus ~ label,
.form-group:not(.normal) textarea:focus ~ label,
.select2-container--open ~ label{
	
	right: -700px;
}
.form-group input, .form-group select, .form-group textarea,
.form-group input:-webkit-autofill, .form-group select:-webkit-autofill, .form-group textarea:-webkit-autofill{
	border: none;
	background: transparent !important;
	color: white !important;
	-webkit-box-shadow:0 0 0 50px black inset;
	-webkit-text-fill-color: #ccc !important;
	border-radius: 0;
} 
.form-control.no-border{
	-webkit-box-shadow: none; 
}
.form-group.normal input,
.form-group.normal textarea,
.form-group.normal select{
	border: 2px solid #B58424 !important;
}
.form-control:focus{
	border-color: none; 
    box-shadow: 0 0 0 0.1rem hsl(41deg 66% 47% / 67%);
}


@media(min-width: 768px) {
	.bg-black .form-group input, .bg-black .form-group select, .bg-black .form-group textarea,
	.bg-black .form-group input:-webkit-autofill, .bg-black .form-group select:-webkit-autofill, .bg-black .form-group textarea:-webkit-autofill{
		-webkit-box-shadow:0 0 0 50px #0e0e0e inset;
	}
}

.select2 *{ outline: none; }
.select2-container [class^="select2-selection"]{ height: 36px;
	line-height: 37px; }
.select2-dropdown{ background: black; border: none; }

.dd-open{ 
	--aug-border-bg: var(--grad); 
    --aug-border-all: 3px; 
 }
 
.dd-open.select2-dropdown--above{ padding-top: 20px;}
.dd-open.select2-dropdown--below{ padding-bottom: 30px;}
.dd-open .select2-search:after{
	content:"";
	height: 1px;
	background: var(--grad);
	position: absolute;
	bottom: 0;
	display: block;
	width: 100%;
	left: 0px;
}
.dd-open .select2-search--dropdown{ position: relative; }
.dd-open .select2-search__field{ 
	background: transparent; outline: none; outline-offset: 0; border: none; color: white; 
}

/* MIXIN */
.borderd{
	
	--aug-border-bg: var(--grad);  
}
.embed{
	position: relative;
	height: 0;
	padding-bottom: 56.25%;
	overflow: hidden;
}
.embed iframe,
.embed video{
	position: absolute;
	top:0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	border: none;
} 
.modal-content{

    --aug-border: initial;
    --aug-border-all: 7px;
    --aug-border-bg: radial-gradient(
      at top, transparent 30%, #7315d6 90%), url('/assets/xplanet/images/30d6dc3fe005a9966e07292893f74279_w200.gif') 50% 50% / 100% 100%;

    --aug-inlay: initial;
    --aug-inlay-all: 4px;
    --aug-inlay-bg: black;
    --aug-inlay-opacity: 0.8;

    --aug-clip-b1: initial;
    --aug-clip-b2: initial;
    --aug-b-extend1: 50%;
    
		    
    --aug-clip-t1: initial;
    --aug-clip-t2: initial;
    --aug-clip-r1: initial;
    --aug-clip-r2: initial;
    --aug-clip-l1: initial;
    --aug-clip-l2: initial;
    --aug-t-extend1: 50%;
    --aug-r-extend1: 50%;
    --aug-l-extend1: 50%;
    padding: 30px;
}
.modal-dialog, .container.center {
    min-height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: auto;
}

.modal-content{
	background: transparent;
	border: none; 
}  
.modal-content .close {
    border-radius: 100%;
    background: white;
    opacity: 1;
    width: 30px;
    height: 30px;
    position: absolute;
    right: 0px;
    top: -10px;
    outline: none;
}
 
  
.modal-backdrop.show{ opacity:1; 
    background: url(/assets/xplanet/images/modal.png?v=1) top center repeat;
    background-size: 3%;}

body.modal-open #app{
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
}

.card_program .desc{ min-height: 150px; 
	
    display: flex;
    align-items: center;
    padding: 15px 0;
    
}
.certificate_card{
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }

    to {
        -webkit-transform: rotateY(359deg);
        -moz-transform: rotateY(359deg);
        -ms-transform: rotateY(359deg);
        -o-transform: rotateY(359deg);
        transform: rotateY(359deg);
    }
}
    
    
.card_program .lock{
	
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.card_program:hover .lock{
        -webkit-animation: rotation 1s infinite linear;
        -moz-animation: rotation 1s infinite linear;
        -ms-animation: rotation 1s infinite linear;
        -o-animation: rotation 1s infinite linear;
        animation: rotation 1s infinite linear;
} 
 .progress{
	background-color: transparent; 
    border-radius: 0;
    height: 1.4rem;
    width: 100%;
}
 .progress .progress-bar{ background: var(--grad); 
	border-color:#0e0e0e;
	border-width: 4px 0 5px 6px;
	border-style: solid;	
}

.card_program .bottom{
	height: 42px;
	display: flex;
	align-items: center;
}
.left_menu ul li:first-child{
	border-top:1px solid  #1f1f1f;
}
.left_menu ul li{
	padding: 10px 0;
	border-color: #1f1f1f;
	border-style: solid;
	border-width: 0 0 1px 0;
	font-family: aviano-future, sans-serif;
	text-transform: uppercase;
	font-size: 1.1rem;
}

@media(max-width: 768px) {
  .modal-dialog, .container.center {
    min-height: calc(100vh - 20px);
  }
}
 
@media(min-width: 1360px) {
  #page-content [class^="container"]:not(.container-fluid) {
    max-width: 1360px;
  }
  .card_program .desc{
	  min-height: 125px;
  }
}
 
.embed .enlarge{
	cursor: pointer;
	background: black;
    position: absolute;
    top: -60px;
    right: 0;
    z-index: 155;
    padding: 5px 6px;
    transition: 0.5s ease all;
    --aug-border-all: 2px !important; 
	--aug-border-bg: var(--grad) !important; 
}
.embed .enlarge:before{
	font-family: FontAwesome;
	content:"\f065";
	color: white;
}
.embed_container #center{  transition: 0.5s ease all;}
.embed:hover .enlarge{ top:0; }
.embed-enlarged .embed_container #left,
.embed-enlarged .embed_container #right{ display: none; }
 

.embed-enlarged .embed .enlarge:before{ content:"\f066"; }
.bookmarks_list{ position: relative;}
.bookmarks_list:empty:before{ content: "Nessun segnalibro"; display: block; text-align: center;}
.bookmarks_list.loading:before{
	content:"";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.8);
}
.bookmarks_list.loading:after{
	font-family: FontAwesome;
	content:"\f021";
	position: absolute;
	top:50%;
	left:50%;
	margin:-15px 0 0 -15px;
	font-size: 30px;
	-webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear;
}
 

.attachment_list:empty:before{ content: "Nessun allegato"; display: block; text-align: center;}
.attachment_list [data-ext]:before {
    content: attr(data-ext);
    text-transform: uppercase;
    background: rgba(0,0,0,0.9);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
}
ul#bookmarks { list-style: none; padding: 0;  }
ul#bookmarks li{ display: flex; justify-content: space-between;  }
ul#bookmarks li i{ font-weight: bold; cursor: pointer; }

#bookmarks_modal.add .delete,
#bookmarks_modal.add .mod_title,
#bookmarks_modal.mod .add_title{ display: none; }






.select2 *{ outline: none; }
.select2-container [class^="select2-selection"]{ height: 36px;
	line-height: 37px; }
.select2-dropdown{ background: black; border: none; }
.select2-container .select2-selection--single .select2-selection__rendered{ padding-left: 24px;}
.dd-open{ 
	--aug-border-bg: var(--grad); 
    --aug-border-all: 3px; 
 }
 
.dd-open.select2-dropdown--above{ padding-top: 20px;}
.dd-open.select2-dropdown--below{ padding-bottom: 30px;}
.dd-open .select2-search:after{
	content:"";
	height: 1px;
	background: var(--grad);
	position: absolute;
	bottom: 0;
	display: block;
	width: 100%;
	left: 0px;
}
.dd-open .select2-search--dropdown{ position: relative; }
.dd-open .select2-search__field{ 
	background: transparent; outline: none; outline-offset: 0; border: none; color: white; 
}
.dd-open .select2-results__option{
	position: relative;
    padding: 10px 20px;
    border-bottom: 1px solid #333; 
    font-size: 14px;
    line-height: 18px;
    -webkit-font-smoothing: antialiased;
}
.dd-open .select2-results__option:last-child{
	border-bottom: none !important;
}
.dd-open .select2-results__option .percentage{ 
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    line-height: 21px;
}
.dd-open .select2-results__option--highlighted{
	font-weight: bold;
	cursor: pointer;
}
.dd-open .select2-results__option--selected {
    font-weight: bold;
    text-decoration: underline;
}

.with_icon .select2-results__option{
	padding-right: 40px !important;
}

.with_icon .icon{
	background: var(--grad);
	color: black;
	border-radius: 100%;
    width: 20px;
    height: 23px;
    text-align: center;
}
 

.transcription .transcription_body{
	height: 290px;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 1rem;
}
.transcription .read_all:after{
	content: "(Leggi Tutto)";
}
.transcription.open  .transcription_body{
	height: 100%;
	overflow: none;
	text-overflow: none;
	
}
.transcription.open .read_all:after{
	content: "(Chiudi)";
}
.transcription h1 {
    font-size: 1.2rem;
} 
.transcription h2 {
    font-size: 1.15rem;
} 
.transcription h3 {
    font-size: 1.05rem;
} 
.transcription h4,.transcription h5,.transcription h6 {
    font-size: 1rem;
} 

.open_card h4:after{
	content: " (Apri) ";
	font-size: 1rem;
}
.open_card.open h4:after{
	content: " (Chiudi) ";
	font-size: 1rem;
} 
.open_card .card-body{
	display: none;
} 
.open_card.open .card-body{
	display: block;
}




.jp-gui{
	position: relative;
	outline: none !important;
}
.jp-gui.jp-no-volume {
    width: 432px;
}

@media(max-width: 761px) {
	.jp-gui.jp-no-volume {
		width:100%;	
	}
}

.jp-gui ul {
    margin: 0;
    padding: 0;
}
.jp-gui .jp-download {
    position: absolute;
    top: 49px;
    right: 23px;
} 
.jp-gui ul li {
    position: relative;
    float: left;
    list-style: none;
    margin: 27px 2px 0;
    padding: 4px 0;
    cursor: pointer;
}
.jp-gui ul li a {
    margin: 0 4px;
    outline: none;
}
.jp-gui li.jp-repeat,
.jp-gui li.jp-repeat-off {
    margin-left: 344px;
}
.jp-gui li.jp-mute,
.jp-gui li.jp-unmute {
    margin-left: 5px;
}
.jp-gui li.jp-volume-max {
    margin-left: 120px;
}
.jp-gui .jp-no-solution,
.jp-gui li.jp-pause,
.jp-gui li.jp-repeat-off,
.jp-gui li.jp-unmute {
    display: none;
}
.jp-gui .jp-progress-slider {
    position: absolute;
    height: 23px;
    width: 100%;
    left: 0;
    top: 0;
    
    --aug-border-bg: var(--grad);
    --aug-border-all: 3px;
}
.jp-gui .jp-progress-slider .ui-slider-range{
    background: var(--grad);
    border-color: #0e0e0e;
    border-width: 4px 0 5px 6px;
    border-style: solid;
    height:20px;
    top: 2px;
    position: relative;
}
    
.jp-gui .jp-stop {
    margin-left: 5px;
}
.jp-gui .jp-progress-slider .ui-slider-handle {
    cursor: pointer;
}
.jp-gui .jp-volume-slider {
    position: absolute;
    top: 34px;
    left: 508px;
    width: 100px;
    height: 0.8rem;
}
.jp-gui .jp-volume-slider .ui-slider-handle {
    height: 0.8em;
    width: 0.8em;
    cursor: pointer;
}
.jp-gui.jp-no-volume .jp-volume-slider {
    display: none;
}
.jp-gui .jp-current-time,
.jp-gui .jp-duration {
    position: absolute;
    top: 30px;
    font-size: 0.8em;
    cursor: default;
    text-shadow: none;
}
.jp-gui .jp-current-time {
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
}
.jp-gui .jp-duration {
    right: 0;
}
.jp-gui .jp-clearboth {
    clear: both;
}



ul li a.active{ font-weight: bold; text-decoration: underline !important; } 
table th, table td{ color: white; }
.table thead th{
	font-family: aviano-future, sans-serif;
	font-weight: 600;
	border-top: 0;
	border-bottom: 1px solid #4e4e4e;
}
.table tbody td{ border-top-color: #292929  ;}
[id^=qea] [data-cd]:before {
	    content: attr(data-cd);
	    position: absolute;
	    right: 0;
	    top: 0;
	    background: var(--grad);
	    color: black;
	    padding: 2px 10px;
	    text-transform: uppercase;
	    font-size: 11px;
	    font-weight: bold;
	    width: 100%;
	}

.schedule{ text-transform: uppercase; font-weight: bold; font-size: 12px; margin-bottom: 20px;}


.group_title{ position: relative; }
.group_title:after{
	content:"";
	width: 250px;
	height: 1px;
	background: #f1f1f1;
	position: absolute;
	bottom: -15px; 
	left: 50%;
	transform: translateX(-50%);
	max-width: calc(100% - 20px);
}
.lesson_list{ list-style: none; padding: 0; }
.lesson_list li{ padding: 9px 5px; border-bottom: 1px solid #2d2d2d; text-transform: uppercase; position: relative; }
.lesson_list li.completed:before{ content:"\f05d"; font-family: FontAwesome; position: absolute; top:50%; transform: translateY(-50%); left: -10px; }
.lesson_list li:last-child{ border: none; }
.lesson_list li.active a{ font-weight: bold;}



input::-webkit-datetime-edit-day-field:focus,
input::-webkit-datetime-edit-month-field:focus,
input::-webkit-datetime-edit-year-field:focus {
    background: #333; 
    outline: none;
}
.datepicker-days td, .datepicker-days th, .datepicker {
    background: black;
    border-radius: 0 !important;
}
.datepicker table tr td.day.focused, .datepicker table tr td.day:hover{ color: black}
.datepicker{ padding: 0 !important; }
.datepicker-dropdown.datepicker-orient-top:after{ border-color: black !important;}
.datepicker-days {padding: 14px; }
.datepicker-days thead{ border-bottom: 2px solid white;} 


[id^="kpi"] .tab-content th{ background: black; }
td.editable{ background: white; color: black; }
td.not-editable{ background: #ccc; color: black; }
.nav-tabs{ border: none;}
.nav-tabs:after{
	content:"";
	background: var(--grad);
	width: 100%;
	position: relative;
	bottom: 0;
	height: 3px;
}
.nav-tabs .nav-link, .nav-tabs .nav-link,.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active,
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover{ border: none;  }
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{ background: var(--grad); text-decoration: none !important;color:  black !important; }
.nav-tabs .nav-item.show .nav-link:hover, .nav-tabs .nav-link.active:hover{ color:  black !important;} 


	#open_menu{ position: relative; }
	#open_menu .badge{ position: absolute; top:-5px; right:-23px;}
	
	#menu { display: none;  position: fixed; width: 360px; height:300px; right:10%; top:50px; z-index: 10; }
	.popover_menu{ background: transparent;  max-width: 100%;}
	
	.popover_menu .popover-body{ background: transparent; width: 100%; padding: 0; }
	
	.popover_menu hr{ border-bottom: 1px solid #707070; }
	.popover_menu ul.menu li{
		border-bottom: 1px solid #707070;
		padding: 10px 0 10px 40px;
		font-size: 16px;
	}
	.popover_menu .row.top{
		padding-left: 20px; 
	}
	.popover_menu .middle{ position: relative; }
	
	.popover_menu .top a{ position: relative; }
	.popover_menu .top a .badge{ position: absolute;
	    right: -10px;
	    top: -15px; }
	.popover_menu .row.top > div{ text-align: center; padding: 8px 0;}
	.popover_menu .row.bottom .divider,
	.popover_menu .row.top .divider{ 
		border-right: 1px solid #707070;
	}
	/*+.popover_menu .row.bottom > div:nth-child(2),
	.popover_menu .row.bottom > div:nth-child(3){
		border-left: 1px solid #707070;
		border-right: 1px solid #707070;
	}*/
	.popover_menu .row.bottom > div a{
		/*display: flex;*/
		align-self: center;
	}
	
	.popover_menu .row.bottom > div a i{
		padding: 0 10px;
		align-self: center;
	}
	.popover_menu .row.bottom > div  a span{
		align-self: center;
		
	} 
	.popover_menu ul a{ position: relative; }
	.popover_menu a:hover{ color: white !important;  }
	.popover_menu ul.menu a.active:before,
	.popover_menu ul.menu a:hover:before{
		font-family: "FontAwesome";
		content: "\f00c";
	    position: absolute;
	    left: -20px;
	    top: -2px;
		
	}
	.popover_menu ul.notify{
		position: absolute;
		top:0;
		left: 0;
		width: 100%;
		height: 270px;
		overflow-y: scroll;
	}
	.popover_menu ul.notify li{
		border-bottom: 1px solid #707070;
		padding: 10px 10px 10px 50px;
		font-size: 14px;
		position: relative;
	}
	.popover_menu ul.notify li:before{
		font-family: "FontAwesome";
		content:"\f0f3";
	    color: white;
	    position: absolute;
	    left: 14px;
	    font-size: 25px;
	    top: 50%;
	    transform: translateY(-50%);
	}
	.popover_menu ul.notify li.nobell:before{
		content:"";
	}
	.popover_menu ul.notify li.read:before,
	.popover_menu ul.notify li.read a,
	.popover_menu ul.notify li.read a:hover{
		color: #757575 !important;
	}


	@media(min-width: 761px) {
		
		.popover_menu .popover-body{
			width: 400px;
		}
	}
	
	
	.card-trial,.card-light {
	    position: relative;
	    background: var(--grad);
	    width: 100%;
	    height:25px;
	    left: 0;
	    top: 10px;
	    margin-top: -25px;
	    text-align: center;
    }
    .card-trial:after,
    .card-light:after {
	    color: black; 
	    font-size: 16px;
	    font-weight: bold;
	    line-height: 25px;
	}
	
    .card-trial:after {
	    content: "TRIAL";
	    color: black; 
	    font-size: 16px;
	    font-weight: bold;
	    line-height: 25px;
	}
    .card-light:after {
	    content: "LIGHT";
	    color: black; 
	    font-size: 16px;
	    font-weight: bold;
	    line-height: 25px;
	}
	
.embed.trial:before{
    content: "QUESTO VIDEO E' DISABILITATO";
    background: var(--grad);
    height: 50px;
    width: 100%;
    position: absolute;
    bottom: 0;
    line-height: 50px;
    text-align: center;
    color: black;
    font-weight: bold;
}


	.card_locked:before{
	    content: "";
	    position: absolute; 
	    z-index: 10;
	    width: 100%;
	    top: 0;
	    bottom: 0;
		background: rgba(0,0,0,0.8); 
	}
	
		#rating{ position: relative; }
	#rating.open .cta_rating{ position: relative; }
	#rating.open .cta_rating:before{
		font-family: FontAwesome;
		content:"\f0a7";
	    position: absolute;
	    left: 50%; 
	    margin-left: -10px;
	    font-size: 40px; 
		animation: MoveUpDown 1s linear infinite;
		z-index: 10;
	}
	
	@keyframes MoveUpDown {
	  0%, 100% {
	    top: -50px;
	  }
	  50% {
	    top: -30px;
	  }
	}

	.ratings-stars{ position: relative; display: inline-block; }
	.ratings-stars:before{
		font-family: FontAwesome;
		content:"\f006\f006\f006\f006\f006";
		font-size: 30px;
		color: #464646;
		letter-spacing: 0.24rem;
	}
	.ratings-stars .ratings{
		position: absolute;
	    top: 0;
	    left: 0;
	    white-space: nowrap;
	    overflow: hidden;
	}
	.ratings-stars .ratings:before{
		font-family: FontAwesome;
		content:"\f005\f005\f005\f005\f005";
		font-size: 30px;
		color: #FAF290;
		letter-spacing: 0.24rem;
	}
	
	
	
.rating-stars {
	display: flex;
	display: -ms-flexbox;
	position: relative;
	height: 14px;
	font-size: 1.4rem;
	margin-bottom: 2.8rem;
}

.rating-stars a {
	color: #dabd4d !important;
	text-indent: -9999px;
	letter-spacing: 1px;
	width: 28px;
	font-size: 30px;
	height: 28px;
	    justify-self: center;
}
 
.rating-stars a:before {
	content: '';
	position: absolute;
	left: 0;
	height: 28px;
	line-height: 1;
	font-family: FontAwesome;
	text-indent: 0;
	overflow: hidden;
	white-space: nowrap;
} 

.rating-stars a.active:before,
.rating-stars a:hover:before { content: '\f005\f005\f005\f005\f005';  }
.rating-stars .star-1 { z-index: 10; }
.rating-stars .star-2 { z-index: 9; }
.rating-stars .star-3 { z-index: 8; }
.rating-stars .star-4 { z-index: 7; }
.rating-stars .start-5 { z-index: 6; }
.rating-stars .star-1:before { width: 28px; }
.rating-stars .star-2:before { width: 56px; }
.rating-stars .star-3:before { width: 84px; }
.rating-stars .star-4:before { width: 112px; }
.rating-stars .star-5:before { content: '\f006\f006\f006\f006\f006'; }


	.slideout { 
		position: relative;
		left: 0;
		-webkit-transition-duration: 0.3s;
		-moz-transition-duration: 0.3s;
		-o-transition-duration: 0.3s;
		transition-duration: 0.3s;
	}
	.slideout > a{
		border: none;
		margin-left: -4px;
	}
	.slideout_inner {
	  position: absolute;
	  top: 0;
	  min-height: 40px;
	  left: -300px;
	  width: 300px;
	  -webkit-transition-duration: 0.3s;
	  -moz-transition-duration: 0.3s;
	  -o-transition-duration: 0.3s;
	  transition-duration: 0.3s;
	  padding: 20px;
	}
	.slideout_inner .media-body{ 
	    white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    align-self: center;
	}
	.slideout.active {
	  left: 300px;
	} 
	
	.slideout.active ~ .slideout{
		left: -100px;
	}

	#flip{
		position: fixed;
		top:calc(60px + 2%);
		z-index: 100; 
	}
	
	@media(max-width: 761px) {
		#flip{
			display: none;
		}
	}
 
	#flip i{
		font-size: 20px;
		width: 30px;
	}
	img.zoom{
		transition: .5s ease all;
	}
	img.zoom:hover{
		zoom: 1.5;
	}
	
	@keyframes rotation {
	  0% {
	    transform: rotate3d(0, 1, 0, 0deg);
	  }
	  50% {
	    transform: rotate3d(0, 1, 0, 180deg);
	  }
	  100% {
	    transform: rotate3d(0, 1, 0, 360deg);
	  }
	}
	.coin { 
	    width: 200px;
	    height: 200px;
	    text-align: center;
	    animation-name: rotation;
	    animation-iteration-count: infinite;
	    animation-timing-function: linear;
	    animation-duration: 3.5s; 
	    transform-style: preserve-3d;
	    margin: 0 auto;
	}
	.face {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  border-radius: 50%;
	  backface-visibility: hidden;
	}
	.heads { 
	  z-index: 2;
	  transform: rotateY(0deg);
	}
	.tails { 
	  z-index: 1;
	  transform: rotateY(180deg);
	}
	
	select option{
		background: rgba(0,0,0,0.9);
		color: white;
	}
	
	
		.btn{  
		    --aug-clip-tl1: initial;
		    --aug-round-tr1: initial;
		    --aug-clip-br1: initial;
		    --aug-round-bl1: initial;
		    --aug-border: initial;
		    --aug-inlay: initial;
		    --aug-border-all: 4px;
		    --aug-inlay-all: 2px;
		    --aug-border-bg: #cacbce;
		    --aug-inlay-bg: black;
		    --aug-inlay-opacity: 0.95;
		    --aug-tl1: 40px;
		    --aug-br1: 40px;
		    --aug-tr1: 10px;
		    --aug-bl1: 10px;
		    color: #cccccc;
		    text-align: center;
		    padding: 20px;
		    width: 100%;
		    margin: 0.25rem auto;
			font-size: 1rem;
		    transition: 0.5s ease all;
					
		}
		.btn-large{
		    font-size: 1.75rem; 
		}
		.btn.btn-block{
			width:100%;
		}
		.btn:hover{
		    --aug-tr1: 20px;
		    --aug-bl1: 20px;
		    --aug-tl1: 50px;
		    --aug-br1: 50px;
		    --aug-border-bg: gold;

			color: white;
		}
	
	
		@media (prefers-reduced-motion: reduce) {
		  *, ::before, ::after {
		    animation-delay: -1ms !important;
		    animation-duration: 1ms !important;
		    animation-iteration-count: 1 !important;
		    background-attachment: initial !important;
		    scroll-behavior: auto !important;
		    transition-duration: 0s !important;
		    transition-delay: 0s !important;
		  }
		} 
		.glitch {
		  font-weight: 700;
		  text-transform: uppercase;
		  position: relative;
		
		  text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
		    -0.025em -0.05em 0 rgba(0, 255, 0, 0.75),
		    0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
		
		  animation: glitch 500ms infinite;
		}
	
		.glitch span {
		  position: absolute;
		  top: 0;
		  left: 0;
		}
		
		.glitch span:first-child {
		  animation: glitch 650ms infinite;
		  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
		  transform: translate(-0.025em, -0.0125em);
		  /* color: green; */
		  opacity: 0.8;
		}
		
		.glitch span:last-child {
		  animation: glitch 375ms infinite;
		  clip-path: polygon(0 80%, 100% 20%, 100% 100%, 0 100%);
		  transform: translate(0.0125em, 0.025em);
		  /* color: red; */
		  opacity: 0.8;
		}
		
		/* https://web.dev/prefers-reduced-motion/#(bonus)-forcing-reduced-motion-on-all-websites */
		
		@keyframes glitch {
		  0% {
		    text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
		      -0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
		      -0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
		  }
		  14% {
		    text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
		      -0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
		      -0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
		  }
		  15% {
		    text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
		      0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
		      -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
		  }
		  49% {
		    text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
		      0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
		      -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
		  }
		  50% {
		    text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
		      0.05em 0 0 rgba(0, 255, 0, 0.75), 0 -0.05em 0 rgba(0, 0, 255, 0.75);
		  }
		  99% {
		    text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
		      0.05em 0 0 rgba(0, 255, 0, 0.75), 0 -0.05em 0 rgba(0, 0, 255, 0.75);
		  }
		  100% {
		    text-shadow: -0.025em 0 0 rgba(255, 0, 0, 0.75),
		      -0.025em -0.025em 0 rgba(0, 255, 0, 0.75),
		      -0.025em -0.05em 0 rgba(0, 0, 255, 0.75);
		  }
		}  
	
	#bg{
			position: fixed;
			z-index: -1;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
		}
		#bg:before{
			content:"";
			background: url('/assets/xplanet/images/bg.jpeg') top center no-repeat;
			width: max(100vw, calc(100vh * 1.77));
			height: max(100vh, calc(100vw * 0.56));
			position: absolute;
			top:50%; 
			left: 50%;
			transform: translate(-50%, -50%);
    background-size: cover;
			
		}
		#bg:after{
			content:"";
			background: rgba(0,0,0,.5);
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 0;
			
		}
		#bg iframe{
			position: absolute;
			top:0;
			bottom:0;
			width: max(100vw, calc(100vh * 1.77));
			height: max(100vh, calc(100vw * 0.56));
		}
		
[id^="auth"] #app_content,
[id^="auth"] #page-content{
	min-height: 100vh; height:100vh;
}


		#welcome{
			
		    --aug-border: initial;
		    --aug-border-all: 7px;
		    --aug-border-bg: radial-gradient(
		      at top, transparent 30%, #7315d6 90%), url('/assets/xplanet/images/30d6dc3fe005a9966e07292893f74279_w200.gif') 50% 50% / 100% 100%;
		
		    --aug-inlay: initial;
		    --aug-inlay-all: 4px;
		    --aug-inlay-bg: black;
		    --aug-inlay-opacity: 0.5;
		
		    --aug-clip-b1: initial;
		    --aug-clip-b2: initial;
		    --aug-b-extend1: 50%;
		    
				    
		    --aug-clip-t1: initial;
		    --aug-clip-t2: initial;
		    --aug-clip-r1: initial;
		    --aug-clip-r2: initial;
		    --aug-clip-l1: initial;
		    --aug-clip-l2: initial;
		    --aug-t-extend1: 50%;
		    --aug-r-extend1: 50%;
		    --aug-l-extend1: 50%;
		    
		    
		    padding: 150px 50px 100px 50px;
		    background: rgba(0,0,0,0.7);    
		}  
		
@keyframes float {
	0% {
/*		box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);*/
		transform: translatey(0px);
	}
	50% {
/*		box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);*/
		transform: translatey(-10px);
	}
	100% {
		/*box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);*/
		transform: translatey(0px);
	}
}
.card_program{
	transform: translatey(0px);
	animation: float 3s ease-in-out infinite;
	animation-delay: var(--delay); 
	position: relative; 
	margin-bottom:30px;
}