.vcloudizar_containervm {
	display: flex;
}

.vcloudizar_loadingvm{
	flex-direction: column;
	justify-content: center;
	position: relative;
	text-align: center;
	display: flex;
    margin: auto;
}

#vcloudizar_loadingTextVM {
	font-size: 18px;
	margin-bottom: 10px;
	margin-top: 10%;
	text-align: center;
	overflow-y: hidden;
}

#vcloudizar_loadingSpinnerVM {
	border: 4px solid rgba(150, 150, 150, 0.3);
	border-top: 4px solid #cf1229c2;
	border-radius: 50%;
	width: 30px;
	height: 30px;
	animation: spin 1s linear infinite;
	margin: 0 auto;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.vcloudizar_blockvm {
	margin: 10px;
	width: 100%;
	border-radius: 5px;
	overflow-y: hidden;
}

#vcloudizar_VMUL {
	max-height: 500px;
	overflow-y: auto;
}

ul, #vcloudizar_VMUL{
	list-style-type: none;
	padding: 0;
	padding-bottom: 5px;
}

#vcloudizar_VMUL .vcloudizar_caret, #vcloudizar_VMUL .vcloudizar_caretvm {
	cursor: pointer;
	user-select: none;
	text-decoration: none;
	display: block;
	padding: 5px 0 5px 20px;
}

#vcloudizar_VMUL .vcloudizar_caretvm {
	font-size: 12px;
}

#vcloudizar_VMUL .vcloudizar_caret:hover, #vcloudizar_VMUL .vcloudizar_caretvm:hover {
	background-color: #e1e1e1;
	color: #333;
}

#vcloudizar_VMUL .vcloudizar_caret::before {
	content: "\25B6";
	color: #777;
	display: inline-block;
	margin-right: 6px;
}

#vcloudizar_VMUL .vcloudizar_caret-down::before {
	transform: rotate(90deg);
}

#vcloudizar_VMUL .vcloudizar_nested {
	display: none;
	margin-left: -10px;
}

#vcloudizar_VMUL .vcloudizar_active {
	display: block;
	padding-left: 1.5rem;
}

#vcloudizar_search-containervm {
	position: relative;
	padding-left: 10px;
	padding-right: 12px;
}

#vcloudizar_searchInputVM {
	border: 1px solid var(--tblr-border-color);
	padding-right: 30px;
	width: 100%;
}

#vcloudizar_clearButtonVM {
	position: absolute;
	right: 24px;
	top: 52%;
	transform: translateY(-50%);
	cursor: pointer;
	font-size: 1.2em;
	color: #999;
}

#vcloudizar_clearButtonVM:hover {
	color: #333;
}

#vcloudizar_searchvmlist {
	transition: width 0.3s ease;	
}

.vcloudizar_expand-searchvmlist {
	width: 25% !important;
	overflow: hidden;
}

#vcloudizar_toggleSearchButtonVM {
	display: none;
	cursor: pointer;
	transition: background-color 0.3s;
	margin-bottom: 20px;
	padding: 10px;
	text-align: center;
	text-decoration: none;
	font-size: 16px;
	border-radius: 4px;
}

.vcloudizar_itemtitle {
	flex: 1;
	margin-top: 10px;
	margin-bottom: 5px;
	font-size: 16px;
	text-align: center
}

#vcloudizar_resetVMButton {
	float: right;
    background: none;
    border: none;
    font-size: 20px;
    color: var(--tblr-btn-color-text);
    cursor: pointer;
    position: relative;
    text-align: right;
	top: 0px;
    right: 10px;
}

#vcloudizar_timePeriodMonitoring, #vcloudizar_consolidationMonitoring {
	border: 1px solid var(--tblr-border-color) !important;
}

.vcloudizar_list-group-item-button {
	background-color: transparent !important; 
	border: none !important;
}

#vcloudizar_vmstatus {
	width: 100%;
	overflow: hidden;
	--tblr-gutter-x: 1rem;
	box-sizing: border-box;
}

#vcloudizar_vmstatus .row {
	margin-left: 0;
	margin-right: 0;
	display: flex;
	flex-wrap: wrap;
}

#vcloudizar_vmstatus .col-sm-5,
#vcloudizar_vmstatus .col-sm-7 {
	padding-left: var(--tblr-gutter-x);
	padding-right: var(--tblr-gutter-x);
	box-sizing: border-box;
}

.vcloudizar_nav-button-item{
	border-radius: 8px !important;
	font-size: 16px;
	padding: 4px !important;
	border: 1px solid rgba(101, 109, 119, 0.16) !important
}

.vcloudizar_nav-vm {
	background-color: #f8f9fa;
	border: none;
	border-radius: 0;
	padding: 10px 20px;
	transition: background-color 0.3s, transform 0.3s;
}

.vcloudizar_nav-vm:hover {
	background-color: transparent;
	transform: scale(1.05);
}

.vcloudizar_nav-vm i {
	font-size: 1.5rem;
}

.vcloudizar_container-navvm .nav-pills .nav-link.active {
	background-color: #007bff;
	color: white;
}

.vcloudizar_container-navvm .nav-pills {
	justify-content: center;
}

.vcloudizar_container-navvm {
	overflow: hidden;
	padding-top: 10px;
	padding-bottom: 10px;
}

@media (max-width: 576px) {
	#vcloudizar_vmstatus {
		--tblr-gutter-x: 0.5rem;
	}

	#vcloudizar_vmstatus .row {
		flex-direction: column;
	}

	#vcloudizar_vmstatus .col-sm-5,
	#vcloudizar_vmstatus .col-sm-7 {
		width: 100%;
		padding-left: var(--tblr-gutter-x);
		padding-right: var(--tblr-gutter-x);
	}
}

@media only screen and (max-width: 600px) {
	.vcloudizar_table-chart {
		height: 350px;
	}

	.vcloudizar_containervm {
	  display: flex;
	  flex-direction: column;
	}

	#vcloudizar_searchvmlist {
		flex: 1;
		display: block;
		width: 95% !important;
	}
	
	#vcloudizar_toggleSearchButtonVM.show {
		display: block;
	}
	
	#vcloudizar_toggleSearchIndicatorVM {
        display: inline-block;
        margin-right: 5px;
        transition: transform 0.3s;
	}
	  
	#vcloudizar_searchvmlist.hide {
		display: none;
	}

	#vcloudizar_vmscalediv {
		height: 1130px !important;
	}
}

#vcloudizar_vmscalediv {
	height: 1000px;
}

.vcloudizar_caretsnapshot {
    background-color: #fbfbfb;
    border-radius: 5px !important;
    border: 2px solid #b9b9bd1a !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.vcloudizar_snapshot-action-buttons {
    display: flex;
}

.vcloudizar_snapshot-action-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: 10px;
}
                                
#vcloudizar_SNAPSHOTUL {
    overflow-y: auto;
    margin-left: -20px;
    text-align: left;
}

ul#vcloudizar_SNAPSHOTUL {
    list-style-type: none;
    padding: 0;
    padding-bottom: 5px;
}

#vcloudizar_SNAPSHOTUL .vcloudizar_caret-down, #vcloudizar_SNAPSHOTUL .vcloudizar_caretsnapshot {
    text-decoration: none;
    display: block;
    padding: 5px 0 5px 5px;
}


#vcloudizar_SNAPSHOTUL .vcloudizar_caretsnapshot {
    font-size: 14px;
    margin-bottom: 10px;
}

#vcloudizar_SNAPSHOTUL .vcloudizar_caret-down::before {
    content: "\25B6";
    color: #777;
    display: inline-block;
    margin-right: 6px;
    transform: rotate(90deg);
}

#vcloudizar_SNAPSHOTUL .vcloudizar_caret-down.vcloudizar_active::before {
    transform: rotate(90deg);
}

#vcloudizar_SNAPSHOTUL .vcloudizar_snapshot-action-buttons {
    display: inline-flex;
    gap: 5px;
    margin-left: 15px;
}

#vcloudizar_SNAPSHOTUL .vcloudizar_snapshot-action-button {
    background: none;
    border: none;
    cursor: pointer;
}

#vcloudizar_SNAPSHOTUL ul {
    margin-left: -14px;
    padding-left: 5px;
}

#vcloudizar_SNAPSHOTUL ul ul {
    margin-left: -7px;
}

#vcloudizar_SNAPSHOTUL li::before {
    content: "";
    display: block;
    position: absolute;
    top: calc(var(--spacing, 1.5rem) / -2);
    left: 0px;
    width: calc(var(--spacing, 1.5rem) + -3px);
    height: calc(var(--spacing, 1.5rem) + 3px);
    border: solid #ddd;
    border-width: 0 0 2px 2px;
}

#vcloudizar_SNAPSHOTUL li {
    position: relative;
    padding-left: calc(2 * var(--spacing, 1.5rem) - var(--radius, 25px) - 2px);
    list-style-type: none;
    border-left: 2px solid transparent;
}

#vcloudizar_SNAPSHOTUL li::after {
    content: "";
    display: none;
    position: absolute;
    top: calc(var(--spacing, 1.5rem) / 2 - var(--radius, 8px) + 2px);
    left: calc(var(--spacing, 1.5rem) - var(--radius, 15px) - 2px);
    width: calc(2 * var(--radius, 8px));
    height: calc(2 * var(--radius, 8px));
    border-radius: 50%;
    background: #ddd;
}

#vcloudizar_SNAPSHOTUL #vcloudizar_snapshotli::after, #vcloudizar_SNAPSHOTUL #vcloudizar_snapshotli::before {
    display: none;
}

.vcloudizar_snapshot-action-button i.fa-solid {
	transition: color 0.3s ease, text-shadow 0.3s ease;
}

.vcloudizar_snapshot-action-button i.fa-solid.fa-undo:hover {
	color: #2c82c9;
	text-shadow: 0 0 5px #2c82c9;
}

.vcloudizar_snapshot-action-button i.fa-solid.fa-pencil:hover {
	color: #004d28;
	text-shadow: 0 0 5px #004d28;
}

.vcloudizar_snapshot-action-button i.fa-solid.fa-trash:hover {
	color: #d63939;
	text-shadow: 0 0 5px #f15959;
}

.vcloudizar_confirmbuttonsnapshotrestore {
	background-color: #206bc4 !important;
}

.vcloudizar_confirmbuttonsnapshotrestore:hover {
    background-color: #185a9d !important;
}

.vcloudizar_confirmbuttonsnapshotdelete {
	background-color: #d63939 !important;
}

.vcloudizar_confirmbuttonsnapshotdelete:hover {
    background-color: #d61c1c !important;
}

.vcloudizar_confirmbuttonsnapshotcreate {
	background-color: #006834 !important;
}

.vcloudizar_confirmbuttonsnapshotcreate:hover, #vcloudizar_addSnapshotButton:hover {
    background-color: #004d28 !important;
}

.vcloudizar_power-button {
	color: var(--tblr-btn-color-text)!important;
}

#vcloudizar_addSnapshotButton {
	background-color: #006834;
	color: var(--tblr-gray-100);
	border: none;
	padding: 5px 10px;
	cursor: pointer;
	border-radius: 5px;
	font-size: 14px;
    width: 80px;
    height: 35px;
}

.vcloudizar_backup-action-buttons {
    display: flex;
}

.vcloudizar_backup-action-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: 10px;
}
                                
#vcloudizar_BACKUPUL {
    overflow-y: auto;
    margin-left: -20px;
    text-align: left;
}

ul#vcloudizar_BACKUPUL {
    list-style-type: none;
    padding: 0;
    padding-bottom: 5px;
}

#vcloudizar_BACKUPUL .vcloudizar_caret-down, #vcloudizar_BACKUPUL .vcloudizar_caretbackup {
    text-decoration: none;
    display: block;
    padding: 5px 0 5px 5px;
}


#vcloudizar_BACKUPUL .vcloudizar_caretbackup {
	display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 5px;
}

#vcloudizar_BACKUPUL .vcloudizar_caret-down::before {
    content: "\25B6";
    color: #777;
    display: inline-block;
    margin-right: 6px;
    transform: rotate(90deg);
}

#vcloudizar_BACKUPUL .vcloudizar_caret-down.vcloudizar_active::before {
    transform: rotate(90deg);
}

#vcloudizar_BACKUPUL .vcloudizar_backup-action-buttons {
    display: inline-flex;
    gap: 5px;
    margin-left: 15px;
}

#vcloudizar_BACKUPUL .vcloudizar_backup-action-button {
    background: none;
    border: none;
    cursor: pointer;
}

#vcloudizar_BACKUPUL ul {
    margin-left: -14px;
    padding-left: 5px;
}

#vcloudizar_BACKUPUL ul ul {
    margin-left: -7px;
}

#vcloudizar_BACKUPUL li::before {
    content: "";
    display: block;
    position: absolute;
    top: calc(var(--spacing, 1.5rem) / -2);
    left: 0px;
    width: calc(var(--spacing, 1.5rem) + -3px);
    height: calc(var(--spacing, 1.5rem) + 3px);
    border: solid #ddd;
    border-width: 0 0 2px 2px;
}

#vcloudizar_BACKUPUL li {
    position: relative;
    padding-left: calc(2 * var(--spacing, 1.5rem) - var(--radius, 25px) - 2px);
    list-style-type: none;
    border-left: 2px solid transparent;
}

#vcloudizar_BACKUPUL li::after {
    content: "";
    display: none;
    position: absolute;
    top: calc(var(--spacing, 1.5rem) / 2 - var(--radius, 8px) + 2px);
    left: calc(var(--spacing, 1.5rem) - var(--radius, 15px) - 2px);
    width: calc(2 * var(--radius, 8px));
    height: calc(2 * var(--radius, 8px));
    border-radius: 50%;
    background: #ddd;
}

#vcloudizar_BACKUPUL #vcloudizar_backupli::after, #vcloudizar_BACKUPUL #vcloudizar_backupli::before {
    display: none;
}

.vcloudizar_backup-action-button i.fa-solid {
	transition: color 0.3s ease, text-shadow 0.3s ease;
}

.vcloudizar_backup-action-button i.fa-solid.fa-undo:hover {
	color: #2c82c9;
	text-shadow: 0 0 5px #2c82c9;
}

.vcloudizar_confirmbuttonbackuprestore {
	background-color: #206bc4 !important;
	color: white;
}

.vcloudizar_confirmbuttonbackuprestore:hover {
    background-color: #185a9d !important;
}

.vcloudizar_spanbackupname {
	flex-grow: 1;
}

.vcloudizar_spanshotdescriptionnotep {
	margin-bottom: 0;
    color: grey;
    margin-left: 30px;
    max-height: 100px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-y: hidden;
}

.vcloudizar_table-containerstats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.vcloudizar_table-chartstats {
	flex-basis: calc(50% - 10px);
	box-sizing: border-box;
	margin-bottom: 10px;
	margin-top: 15px;
}

.vcloudizar_info-container {
	display: flex;
	align-items: baseline;
	justify-content: center;
}

.vcloudizar_rectangle-green,
.vcloudizar_rectangle-blue,
.vcloudizar_rectangle-cyan,
.vcloudizar_rectangle-red {
	display: inline-block;
	margin-right: 5px;
	width: 10px;
	height: 10px;
	flex-shrink: 0;
}

.vcloudizar_rectangle-green {
	background-color: rgba(25, 156, 52, 0.5);
	border: 1px solid rgba(25, 156, 52, 1);
}

.vcloudizar_rectangle-blue {
	background-color: rgba(25, 44, 76, 0.5);
	border: 1px solid rgba(25, 44, 76, 1);
}

.vcloudizar_rectangle-cyan {
	background-color: rgba(75, 192, 192, 0.2);
	border: 1px solid rgba(75, 192, 192, 1);
}

.vcloudizar_rectangle-red {
	background-color: rgba(207, 18, 41, 0.5);
	border: 1px solid rgba(207, 18, 41, 1);
}

.vcloudizar_chart-info {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
}

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

.vcloudizar_chart-info span {
	white-space: nowrap;
}

.vcloudizar_additional-stats {
	margin-top: 8px;
}

.vcloudizar_margin-10 {
	margin-left: 10px;
}

.vcloudizar_margin-30 {
	margin-left: 30px;
}