@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

a:link,
a:active,
a:visited {
    color: black;
    text-decoration: none;
}

.st_bar {
    height: 3em;
    padding: 5px;
}

.st_logo img {
    height: 3em;
    margin-right: 10px;
}

.st_path {
    font-size: 1.5em;
}

.st_pathStep {
    vertical-align: middle;
}

.st_pathActionIcon {
    vertical-align: middle;
    margin-right: -5px;
}

.st_selected {
    font-weight: bold;
    color: red;
}

.st_status {
    font-size: 1em;
    padding: 5px;
    border-radius: 5px;
}

.st_statusWait {
    color: black;
    background-color: gray;
}

.st_statusConnected {
    color: lightgreen;
}

.st_statusTry {
    color: white;
    background-color: orange;
}

.st_statusLost {
    color: white;
    background-color: orange;
}

.st_statusError {
    color: white;
    background-color: red;
}

.st_mainLevelBarVertical {
    width: 13rem;
    margin-right: 20px;
    display: block;
    overflow-y: auto;
}

.st_mainLevelBarHorizontal {
    margin-bottom: 20px;
    overflow-x: auto;
}

.st_mainLevelBarDisabled {
    opacity: 0.5 !important;
    box-shadow: none !important;
}

.st_content {
    _margin-top: 1em;
    margin-bottom: 1em;
    padding: 20px;
    _font-size: 1.5em;
}

.st_cards {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.st_card:hover {
    opacity: 0.8;
}

.st_cards_horizontal {
    display: block;
}

.st_card {
    background-color: dodgerblue;
    color: white;
    padding: 1rem;
    height: 4rem;
    width: 6rem;
    margin: 10px;
    _border: 1px dotted;
    border-radius: 5px;
    box-shadow: 10px 10px 6px 0px #949494;
    overflow: hidden;
    float: left;
}

.st_card_horizontal {
    float: none;
    display: inline-block;
    text-align: center;
}

.st_cardIcon {
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: auto 90%;
    -webkit-background-size: auto 90%;
    -moz-background-size: auto 90%;
    -o-background-size: auto 90%;
}

.st_cardImage {
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

.st_cardSteps {
    background-origin: content-box;
    background-size: contain;
    _background-position-y: bottom;
}

.st_cardTitle {
    color: navy;
    background-color: rgba(224, 255, 255, 0.8);
    display: block;
    /* 
	background-color: #e0ffff;
	display:inline;
	*/
    padding: 4px;
    margin-bottom: 8px;
    border-radius: 5px;
}

.st_cardTitle_expand {
    font-size: 1.5em;
    text-align: center;
}

.st_cards_expand {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border: 1px dotted;
    border-radius: 5px;
    padding: 10px;
    margin: 10px;
}

div.st_data_container {
    /* Tabelle Centrate */
    _display: flex;
    _flex-wrap: wrap;
    _justify-content: center;
    _align-items: start;
}

div.st_data_expand {
    float: left;
    margin-left: 5px;
    margin-bottom: 5px;
}

table.st_data {
    /* Tabelle Centrate */
    _margin: auto;
    border: #888888 1px dotted;
    border-collapse: collapse;
}

.st_dataCaption {
    text-align: left;
    color: white;
    font-weight: bold;
    font-size: 1.5em;
    background-color: dodgerblue;
    border: white 1px dotted;
    padding: 4px;
    margin: -4px;
}

.st_data_views {
    margin-bottom: 6px;
}

a .st_data_view,
a:link .st_data_view,
a:active .st_data_view,
a:visited .st_data_view {
    text-align: left;
    color: white;
    background-color: dodgerblue;
    border: white 1px dotted;
    padding: 4px;
    margin-right: 4px;
    text-decoration: none;
}

table.st_data th {
    text-align: left;
    color: white;
    background-color: dodgerblue;
    border: white 1px dotted;
    padding: 4px;
}

table.st_data th.st_dataGroup {
    text-align: left;
    color: white;
    font-size: 1.5em;
    border: white 1px dotted;
    padding: 4px;
}

table.st_data tr {
    vertical-align: middle;
}

table.st_data td {
    border: #888888 1px dotted;
    padding: 4px;
}

table.st_data_list {
    _white-space: nowrap;
}

table.st_data_list tr:nth-child(even) {
    background-color: #e8e8e8;
}

table.st_data_form tr:nth-child(odd) {
    background-color: #e8e8e8;
}

table.st_data_form_edit {
    width: 98%;
}

table.st_data_form_edit th {
    width: 1%;
    white-space: nowrap;
}

table.st_data_form_edit {
    background-color: #e8e8e8;
}

td.st_dataNum {
    text-align: right;
}

.st_help {
    font-size: 2em
}

.st_footer {
    height: 5em;
    text-align: center;
    padding-top: 5px;
}

.dialog {
    font-size: 12px;
    padding: 15px;
    overflow-x: auto;
    position: absolute;
    background-color: #EEEEEE;
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
    -moz-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
    box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
}

.dialogTitle {
    margin: auto;
    text-align: center;
    font-weight: bold;
}

TD.dialogTable {
    padding: 3px;
}

.dialogToolbar {
    margin: auto;
    text-align: center;
}

.inputs {
    display: flex;
    flex-wrap: wrap;
}

.inputBlocks {
    margin: 5px;
    padding: 5px;
    display: flex;
    flex-wrap: wrap;
    border: #cccccc 1px solid;
    border-radius: 6px;
}

.inputBlock,
.inputBlockTitle,
.inputBlockSelection {
    padding: 5px;
    background-color: #eeeeee;
    border-radius: 6px;
}

.inputBlockArea {
    display: flex;
    flex-wrap: wrap;
}

.button,
.button:active,
.miniButton,
.miniButton:active {
    background-color: #eeeeee;
    color: black;
    _background-color: gray;
    _color: #F0F0F0;
    border-color: #cccccc;
    border-radius: 6px;
    height: 35px;
    _padding: 1px 6px 1px 6px;
    margin: 1px 3px 1px 3px;
    outline: none;
}

.button:disabled,
.miniButton:disabled {
    filter: alpha(opacity=40);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    -moz-opacity: 0.4;
    -khtml-opacity: 0.4;
    opacity: 0.4;
}

.buttonPressed {
    background-color: #cccccc;
    border-top: solid #777 2px;
    border-left: solid #777 2px;
    border-bottom: solid #ddd 2px;
    border-right: solid #ddd 2px;
}

img.button,
img.button:active {
    height: 20px;
    vertical-align: middle;
}

.buttonPressed>img {
    background-color: #cccccc;
}

.miniButton,
.miniButton:active {
    height: 25px;
    padding: 1px 2px 1px 2px;
    outline: none;
}

img.miniButton,
img.miniButton:active {
    height: 15px;
    vertical-align: middle;
}

.warning {
    _width: 100%;
    height: auto;
    background-color: white;
    color: black;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    text-align: center;
}

.message {
    width: 80%;
    height: auto;
    position: absolute;
    left: 50%;
    margin-left: -40%;
    bottom: 10px;
    font-family: Calibri;
    font-size: 20px;
    padding: 10px;
    text-align: center;
}

.messageSub {
    background-color: #383838;
    color: #F0F0F0;
    padding: 10px;
    border-radius: 2px;
    -webkit-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
    -moz-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
    box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);
}

.messageRed {
    background-color: #fd9595 !important;
    color: black !important;
}

.messageYellow {
    background-color: #ffffa0 !important;
    color: black !important;
}

.messageGreen {
    background-color: #71c571 !important;
    color: white !important;
}

.flexbin {
    display: flex;
    overflow: hidden;
    flex-wrap: wrap;
    margin: -2.5px;
}

.flexbin:after {
    content: '';
    flex-grow: 999999999;
    min-width: 300px;
    height: 0;
}

.flexbin>* {
    position: relative;
    display: block;
    height: 300px;
    margin: 2.5px;
    flex-grow: 1;
}

.flexbin>*>img {
    height: 300px;
    object-fit: cover;
    max-width: 100%;
    min-width: 100%;
    vertical-align: bottom;
}

.flexbin.flexbin-margin {
    margin: 2.5px;
}

@media (max-width: 980px) {
    .flexbin {
        display: flex;
        overflow: hidden;
        flex-wrap: wrap;
        margin: -2.5px;
    }
    .flexbin:after {
        content: '';
        flex-grow: 999999999;
        min-width: 150px;
        height: 0;
    }
    .flexbin>* {
        position: relative;
        display: block;
        height: 150px;
        margin: 2.5px;
        flex-grow: 1;
    }
    .flexbin>*>img {
        height: 150px;
        object-fit: cover;
        max-width: 100%;
        min-width: 100%;
        vertical-align: bottom;
    }
    .flexbin.flexbin-margin {
        margin: 2.5px;
    }
}

@media (max-width: 400px) {
    .flexbin {
        display: flex;
        overflow: hidden;
        flex-wrap: wrap;
        margin: -2.5px;
    }
    .flexbin:after {
        content: '';
        flex-grow: 999999999;
        min-width: 100px;
        height: 0;
    }
    .flexbin>* {
        position: relative;
        display: block;
        height: 100px;
        margin: 2.5px;
        flex-grow: 1;
    }
    .flexbin>*>img {
        height: 100px;
        object-fit: cover;
        max-width: 100%;
        min-width: 100%;
        vertical-align: bottom;
    }
    .flexbin.flexbin-margin {
        margin: 2.5px;
    }
}

.gallery {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;
    margin-top: 10px;
    overflow: hidden;
}

.gallery img {
    width: 100%;
    height: auto;
    transition: 500ms;
    margin-bottom: 10px;
    opacity: 0.8;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
}

.gallery img:hover {
    opacity: 1;
}

.modal-img,
.model-vid {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: table
}

.modal-body {
    padding: 0px;
}

.modal-dialog {
    height: 100%;
    position: relative;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    border: none;
}

@media screen and (max-width: 767px) {
    .gallery {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
    .gallery div {
        margin: 0;
        width: 200px;
    }
    .modal-dialog {
        margin: 0 8vw;
    }
}

@media screen and (max-width: 479px) {
    .gallery {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
    .gallery div {
        margin: 0;
        width: 200px;
    }
}


/* Per annullare effetto Spectre */

html {
    box-sizing: initial
}


/* Poll */

a {
    text-decoration: none;
    color: black
}

.poll td {
    vertical-align: top;
    padding: 5px;
    border-radius: 6px;
    background-color: #d3d8ff
}

.label {
    font-size: 10px;
    _font-weight: bold;
    text-align: left;
    padding-bottom: 2px;
}

#logo {
    font-size: 10px;
    font-weight: bold;
    font-style: italic;
    float: right
}

#title {
    font-size: 15px;
    font-weight: bold
}

#ambientName {
    font-weight: bold;
    text-align: center
}

#user {
    text-align: center;
    font-size: 15px;
    font-weight: bold
}

#commands {
    text-align: right
}

.command img {
    vertical-align: middle;
    height: 1em
}

#workArea {
    padding: 10px
}

.questionTitle {
    font-size: 20px;
    font-weight: bold;
    text-align: center
}

.questionNote {
    font-size: 16px;
    font-style: italic;
    text-align: center
}

.questionCheck {
    margin-left: 15px;
    margin-right: 15px
}

.questions {
    font-size: 18px
}

.question {
    vertical-align: top
}

.result {
    font-size: 20px;
    font-weight: bold;
    text-align: center
}


/*
.button,.button_inactive {text-decoration:none; padding:4px; color:white; background-color:#22d4d4; border-radius:6px}	
.button,.button_inactive {text-decoration:none; padding:8px; color:black; background-color:#e0e54d; border-radius:6px}	
.button_inactive {color:gray; background-color:#c0c0c0}
.button img,.button_inactive img {vertical-align:middle;height:1em} 
*/

#commands,
#workArea {
    line-height: 180%
}




		
		*{
			font-family: 'Poppins', sans-serif;
		}
		
		#tableList{
			border-collapse: collapse;
		    background: #fff;
		    border-radius: 10px;
		    overflow: hidden;
		    width: 100%;
		    margin: 0 auto;
		    position: relative;
		    border-color: #36304a;
		    border-width: 1px;
		    color:#484541;
		}
		
		#tableHeader{
			height: 60px;
    		background: royalblue;
    		color:white;
		}
		
		#tableList tr{
			border-style:solid;
			border-width:1px;
			border-color:lightgrey;
		}
		
		#tableList tr:hover{
			background-color: #f5f5f5;
		}
		
		.mainDiv{
		    width: 98%;
		    height: 50px;
		    /* border-color: black; */
		    /* border-width: 1px; */
		    /* border-style: dashed; */
		    /* border-radius: 10px; */
		    padding: 7px;
		    margin-left: auto;
		    margin-right: auto;
		}
		
		#fileButton{
			height: 100%;
    		width: 100%;
		}
		
		#uploader{
			width:100%;
			height:50%;
		}
		
		
		#caption{
			text-align: left;
		    background-color: royalblue;
		    color: white;
		    padding-left: 10px;
		    padding-top: 5px;
		    padding-bottom: 5px;
		}
		
		#tableList td{
			padding:10px;
		}
		
		#filePath{
			margin-left:50px;
		}
		
		#pathContainer{
			margin-left:10px;
			display: inline;
		}
		
		.download{
    		border-radius: 20px;
    		padding: 6px;
    		visibility:hidden;
		}
		
		.delete{
			background-color: #f44336;
    		color: white;
    		border-radius: 20px;
    		padding: 6px;
    		visibility:hidden;
		}
		
		#tableList a:-webkit-any-link {
    		cursor: pointer;
    		text-decoration: none;
}


		.material-symbols-outlined {
		  font-variation-settings:
		  'FILL' 0,
		  'wght' 400,
		  'GRAD' 0,
		  'opsz' 48
		  color:black;
		}