@import url("base.css");


:root {
--darkGreen: #15563A;
}
/* ==|== primary styles =====================================================
   Author: Silverink
   ========================================================================== */

/* ==|== Easibuild Structural Elements =====================================================
   Structural elements such as mainContent/Wide, submenu etc. Ideally these elements will change
   to HTML5 tags...  aside, article etc.
   ========================================================================== */
   .aboutHeader {background-color: #EAEAEA;}
body, html {min-height: 100vh; } 
body { position: relative; min-height: 100vh;padding-top: 63px; } 

body[data-itemid="1"] {padding-top: 0px}
#alertPanel {position: fixed; right: 0px; z-index: 9999; }

/*
#backupsTable th, #machineTable th {
	cursor: pointer;
}
#backupsTable td, #machineTable td {
	cursor: pointer;
	font-size: 0.8rem;
}
#backupsTable tr:has(.fVerifyImg) {
	background-color: #fcfaf1;
	--bs-table-accent-bg: none;
  }

  #backupsTable tr:has(.fVerifyImg):hover {
	background-color: #fffbea;
	--bs-table-accent-bg: none;
  }
	*/


  #machineTable {position: relative;}

 



.btn.text-white svg {fill: #fff; height: 24px; margin-right: 5px;}

.btn-label {
	position: relative;
	left: -12px;
	display: inline-block;
	padding: 6px 12px;
	background: rgba(0, 0, 0, 0.15);
	border-radius: 3px 0 0 3px;
}

.btn-labeled {
	padding-top: 0;
	padding-bottom: 0;
  text-align: left;
}

.btn {
	margin-bottom: 10px;
}

  /* body[data-template="Open"] {background-color: rgba(78, 161, 140, 0.252);} */
  .breadcrumb {text-transform: capitalize; margin-bottom: 0px; background-color: #fff; color: #444; padding: 15px;}
  .breadcrumb-item  {color: #222;}
  .breadcrumb-item.active  {color: ##444;}
  .breadcrumb-item a {color: #222}
  
  .profileList .list-group-item {
    border-left: 3px solid #ccc; /* Default border color */
    border-right-color: transparent; /* Change border-right color on hover */
    border-top-color: transparent; /* Change border-right color on hover */
    border-bottom-color: transparent; /* Change border-right color on hover */
    padding: 5px;
    margin-bottom: 5px;
  }
  
  .profileList .list-group-item:hover {
    border-left-color: #021F13; /* Change border-left color on hover */
    border-right-color: transparent; /* Change border-right color on hover */
    border-top-color: transparent; /* Change border-right color on hover */
    border-bottom-color: transparent; /* Change border-right color on hover */


  }
  
  .profileList .list-group-item.active {
    background-color: transparent; /* No background color on select */
    border-left-color: #15563A; /* Dark green border color on select */
    font-weight: bold; /* Bold text on select */
    color: #222;
    border-right-color: transparent; /* Change border-right color on hover */
    border-top-color: transparent; /* Change border-right color on hover */
    border-bottom-color: transparent; /* Change border-right color on hover */

  }

  .form-check {
    display: flex;
    align-items: center;
  }
 .home-section {position: relative;}



.dataTables_length .form-select {width: auto; display: inline-block;}
.dataTables_length,  .dataTables_filter{margin-bottom: 30px;}
.dataTables_filter input[type='search'] {display: inline-block; width: auto; margin-left: 15px;}
.form-switch .form-check-input[type=checkbox] {
  border-radius: 2em;
  height: 30px;
  width: 60px;
}

h1, h2 {font-weight: 900;}
.offcanvas-top.h-auto {
  bottom: initial;
}

.contactContainer { background-image: url("/download/images/cloud1.jpg"); background-position: left center; background-repeat: no-repeat; background-size: contain;}
	.emailCard {background-color: rgba(250,250,250,0.92);  backdrop-filter: blur(10px);}
.dashboardLeftColumnPanel {margin-left: -12px; background: rgba(245, 246, 245, 0.5);  border-bottom: 1px solid rgba(0,0,0,0.2); border-right: 1px solid rgba(0,0,0,0.2); box-shadow: 5px 0px 4px rgba(0,0,0,0.05);}

#dashboardContainer > div > div.col-12.col-sm-9.p-4.h-100 > div.row.mb-5 {margin-bottom: 0px !important;}


	/* Custom styles for pill buttons */
	.backup-pills .nav-link {
		border-radius: 50px;
		border: 2px solid #ccc;
		color: #333;
		padding: 5px 20px;
		font-size: 1rem;
	}
	.backup-pills .nav-link.active {
		background-color: #007f3e;
		border-color: #007f3e;
		color: white;
	}
	.backup-pills .nav-link:not(.active):hover {
		border-color: #007f3e;
	}
	.backup-pills .nav-link .radio-icon {
		width: 15px;
		height: 15px;
		display: inline-block;
		border-radius: 50%;
		margin-right: 10px;
		border: 2px solid currentColor;
	}
	.backup-pills .nav-link.active .radio-icon {
		background-color: currentColor;
	}

	.custom-radio-btn {
		display: none;
	}
	
	.custom-label {
		display: inline-flex;
		align-items: center;
		border-radius: 50px;
		border: 2px solid #ccc;
		color: #333;
		padding: 10px 20px;
		font-size: 16px;
		cursor: pointer;
		transition: all 0.3s;
	}
	
	.custom-label:hover {
		border-color: #007f3e;
	}
	
	.custom-radio-btn:checked + .custom-label {
		background-color: #007f3e;
		border-color: #007f3e;
		color: white;
	}
	
	.custom-label .radio-icon {
		width: 20px;
		height: 20px;
		display: inline-block;
		border-radius: 50%;
		margin-right: 10px;
		border: 2px solid currentColor;
	}
	
	.custom-radio-btn:checked + .custom-label .radio-icon {
		background-color: currentColor;
	}
.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* FOOTER */

.footer {
  position: relative;
  margin-top: 0px;
  display: block;
  width: 100%;
  /* Set the fixed height of the footer here */
  background-color: #021F13;
  color: #fff;
  font-size: 0.8rem;
}
.footer a {color: #fff;}

/* END FOOTER */

.lightRed {
  background-color: #f0aaaa !important
}

#logsBody pre {word-wrap: break-word; max-width: 100%;overflow-wrap: break-word; white-space: pre-wrap;}
.sepBar {border-left: 1px solid #efefef; margin-right: 15px; margin-left: 15px;}

.icn {width: 18px;}

.startMachine, .stopMachine {cursor: pointer;}


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

.dataTables_filter {float: right;}
img {max-width: 100%; height: auto !important;}

.navbar-brand img {width: auto; height: auto; max-height:40px; cursor: pointer;}
#topBanner {background: rgba(255,255,255,1); box-shadow: 0 0 3px rgba(0,0,0,0.2);}

/* ==|== Everything Else =====================================================================
   Alphabetically ordered unles it's nested (.level2 will be nested with #submenu for example)
   =========================================================================================== */

   #priceComparison .card .bg-primary {background-color: #DCF2E8 !important;}
   #priceComparison .card .bg-light {background-color: #EAEAEA !important;}
#fpImageDiv {border-bottom: 5px solid var(--darkGreen); padding-top: 60px;}
.carousel-caption {text-align: left; padding-bottom: 0px; left: auto; bottom: 1.5vw; right: auto; width: 100%;}
.carousel-caption .heading, .carousel-caption  .Desc {font-size: 1.2rem; letter-spacing: 0.1rem;}
.carousel-caption  .heading {font-weight: 600;}

.carousel-caption  .Desc {font-weight: 900;}


#csCarousel .carousel-item {aspect-ratio: 16/9; width: 100%;}
	#csCarousel .carousel-background {height: 100%; width: 100%; background-size: cover; background-repeat: no-repeat;}

	#csCarousel .carousel-caption {background: rgba(21, 86, 58,0.7); padding: 1rem; position: absolute; right: 3vw; width:45vw;}
	#csCarousel .carousel-caption blockquote {font-size: 2.5vw; font-weight: 800; font-style: italic; position: relative; padding: 1rem;}
	#csCarousel .carousel-caption blockquote::before {
		font-family: Arial, Helvetica, sans-serif;
		content: open-quote;
		position: absolute; left: -0.3em; top: 1rem;

		font-size: 5em;
		line-height: 0.1em;
		margin-right: 0.25em;
		color: rgba(21, 86, 58,1);
	  }
	  
	  #csCarousel .carousel-caption blockquote::after {
		font-family: Arial, Helvetica, sans-serif;
		position: absolute; right: 0.1em; bottom: -0.2rem;
		content: close-quote;
		font-size: 5em;
		line-height: 0.4em;
		margin-right: -0.25em;
		vertical-align: -1em;
		color: rgba(21, 86, 58,1);
	  }
	  #csCarousel h5 {font-size: 2vw; line-height: 140%;}
	  
.copyTextSpan {cursor: pointer;}


.deleteExclusion {cursor: pointer;}


.icon {width: 22px; height: 22px;}
#map_canvas {width: 100%; min-height: 150px;}

.navbar-toggle {border: 1px solid #efefef;}
	.navbar-toggle .icon-bar {background: #efefef;}

  .machineExclusionListContainer {max-height: 350px; overflow-y: auto;}

  #offcanvasBlockingPanel { background-image: url(panelBg.svg); background-repeat: no-repeat; background-size: cover; background-position: left top;}

/* NEWS */
.newsFrontPage figure {min-height: 300px; background-size: cover;}
.newsImage {padding-top: 56%; background-size: cover; background-repeat: none;}

.shieldImageBG {filter: saturate(0.4); opacity: 0.9;}
/* SILVERINK LINK */
#silverinkWebDesign {
	font-size: 10px;
	font-family: helvetica, arial;
	margin-left: -2px;
	margin-top: 5px;
}
#silverinkWebDesign 	a {
	color: #888;
}

.kbAccordion img {margin-top: 15px; margin-bottom: 15px; max-width: 100%; border: 1px solid #888; box-shadow: 0px 0px 8px rgba(0,0,0,0.1); cursor:zoom-in; display: block; max-width: 70%; }

.accordion-header {font-weight: bold;}
.accordion-button.collapsed {background-color: #444; color: #fff;}
.accordion-button:not(.collapsed) {background-color: #1e8055; color: #fff;
}
.accordion-button:not(.collapsed):after {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")}

.accordion-button.collapsed:after {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")}
/* KB MODAL */
/* The Modal (background) */
/* The Modal (background) */
/* The Modal (background) */


.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	padding-top: 100px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
  }
  
  .highlight {
    background-color: #e9f4ef;
	font-weight: bold;
}

  /* Modal Content (Image) */
  .modal-content {
	position: relative;
	margin: auto;
	display: block;
	max-width: 100%;
  }
  
  .modal-content img {
	max-width: 100%;
	display: block;
  }
  
  /* The Close Button */
  .close {
	position: absolute;
	display: block;
	top: -10px;
	right: -10px;
	color: #fff;
	background-color: #165e3f;
	border-radius: 45px;
	font-size: 22px;
	font-weight: bold;
	line-height: 15px;
	padding: 5px;
	padding-top: 3px;
	padding-bottom: 8px;
	padding-left: 7px; padding-right: 7px;
	cursor: pointer;
  }
  

  

.subMenuParent {color: #444; font-weight: bold;}
.subMenuParent a {color: #444; text-decoration: none; text-transform: uppercase;}
#SubMenuUl {text-transform: capitalize;}
#SubMenuUl .selected {font-weight: bold;}
.showProfileDD {min-width: 320px;}




.verify-list {
	list-style: none;
	padding: 0;
	margin-top: 15px;
}

.verify-list li {
	padding-left: 40px;
	position: relative;
	margin-bottom: 15px;
}

.verify-list li::before {
	content: url('/styles/icon-fullverify.svg');
	width: 21px;
	height: 21px;
	position: absolute;
	left: 0px;
	top: 5px;
}


.restore-list {
	list-style: none;
	padding: 0;
	margin-top: 15px;
	margin-bottom: 30px;
}

.restore-list li {
	padding-left: 40px;
	margin-bottom: 15px;
	position: relative;
}

.restore-list li::before {
	content: "";
	width: 22px;
	height: 28.58px; /* Adjusted height to maintain aspect ratio */
	background-image: url('/styles/shield-bullet.svg');
	background-size: contain;
	background-repeat: no-repeat;
	transform: translateY(-50%);
	position: absolute;
	left: 0px;
	top: 20px;
}

/* ==|== media queries ======================================================
   Media Queries for Responsive Design.
   These override the primary ('mobile/desktop first') styles
   Modify as content requires.
   ========================================================================== */


/*===============================*/
/* 480 - LANDSCAPE MOBILE LAYOUT */
/*===============================*/

@media only screen and (min-width: 480px) {
  /* Style adjustments for viewports 480px and over go here */


}

/* Default / large desktop */
.fpSignUp {
  max-width: 635px;
  width: 100%;
  height: auto;
}

/* Desktop ≤ 1024px */
@media (max-width: 1024px) {
  .fpSignUp {
    max-width: 390px;
  }
}

/* Tablet and below */
@media (max-width: 768px) {
  .fpSignUp {
    max-width: 250px;
  }
}


/*=====================*/
/* 768 - TABLET LAYOUT */
/*=====================*/
@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */
  .carousel-caption .heading, .carousel-caption  .Desc {font-size: 2rem;}
  #mobileMenu {display: none !important;}
  #offcanvasBlockingPanel { background-image: url(panelBg.svg); background-repeat: no-repeat; background-size: cover; background-position: right top;}

  #topMenu .nav-item {font-size: 11px;}


}




/*=======================*/
/* 1036 (lg) - DESKTOP LAYOUT */
/*=======================*/
@media only screen and (min-width: 1035px) {
  /* Style adjustments for viewports 1024px and over go here */
  .carousel-caption .heading, .carousel-caption  .Desc {font-size: 3rem;}

  #fpImageDiv {border-bottom: 10px solid var(--darkGreen);}

  .navbar-brand img {max-height:60px;}
    #topMenu .nav-item {font-size: 13px;}

}

/*=======================*/
/* 1200 (xl) - DESKTOP LAYOUT */
/*=======================*/
@media only screen and (min-width: 1200px) {
    /* Style adjustments for viewports 1024px and over go here */

	#csCarousel .carousel-item {aspect-ratio: 21/9; width: 100%;}
	#csCarousel .carousel-background {height: 100%; width: 100%; background-size: cover; background-repeat: no-repeat;}

	#csCarousel .carousel-caption {background: rgba(21, 86, 58,0.7); padding: 1rem; position: absolute; right: 3vw; width: 24vw;}
	#csCarousel .carousel-caption blockquote {font-size: 1.4vw; font-weight: 800; font-style: italic; position: relative; padding: 1rem;}
	#csCarousel .carousel-caption blockquote::before {
		font-family: Arial, Helvetica, sans-serif;
		content: open-quote;
		position: absolute; left: -0.3em; top: 1rem;
		font-size: 5em;
		line-height: 0.1em;
		margin-right: 0.25em;
		color: rgba(21, 86, 58,1);
	  }
	  
	  #csCarousel .carousel-caption blockquote::after {
		font-family: Arial, Helvetica, sans-serif;
		position: absolute; right: 0.1em; bottom: -0.2rem;
		content: close-quote;
		font-size: 5em;
		line-height: 0.4em;
		margin-right: -0.25em;
		vertical-align: -1em;
		color: rgba(21, 86, 58,1);
	  }
	  #csCarousel h5 {font-size: 1.2vw; line-height: 140%;}

	  /* gDk menusize override */
	  #topMenu .nav-item {font-size: 16px;}
  }

  
/* 1400 (xxl) - DESKTOP LAYOUT */
/*=======================*/
@media only screen and (min-width: 1400px) {
    /* Style adjustments for viewports 1024px and over go here */  
	  #topMenu .nav-item {font-size: 18px;}

  }
  


/* WIDE DESKTOP LAYOUT */
@media only screen and (min-width: 1200px) {
  /* Style adjustments for viewports 1200px and over go here */
}



/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}

  @media (min-width: 575px) {
    #profileList {
      display: block;
    }
  }


  /* PAYG CALC */
.bar-wrapper {
  max-width: 100%;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.provider-bar {
  height: 40px;
  line-height: 40px;
  color: white;
  font-weight: bold;
  padding-left: 10px;
  border-radius: 5px;
  transition: width 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.label-wrapper {
  flex-basis: 130px;
  margin-left: 10px;
  font-weight: bold;
  white-space: nowrap;
  text-align: right;
}
    .lightsafe { background-color: #34a853; }
    .aws { background-color: #f90; color: #000; }
    .azure { background-color: #00a4ef; }
    .google { background-color: #f73f3b; }