body
{
  position: relative;

  margin: 0px;
  

  /*background-color: rgb(247, 245, 250);*/
 
  background-color: rgba(0, 10, 29, 1.0);
  

  --mdc-theme-primary: #0045ac;
  --mdc-theme-secondary: rgb(146, 184, 124);
  --mdc-theme-secondary-linearGradientMid: rgba(146, 184, 124, 0.25);

  font-family: 'Raleway', sans-serif;
}

.debuggingOutput
{
  display: none;
}
body.displayDebuggingOutput .debuggingOutput
{
  display: block;
}

div
{ 
  /*transition: all 0.3s linear;

  transition: opacity 0.6s ease;*/

  box-sizing: border-box;
}

select, input
{
  /*font-size: 1.01em;*/
  font-weight: 400;
  font-size: 1.01em;

  font-family: 'Ubuntu', sans-serif;
  font-weight: lighter;
  
}
button
{
  border-style:  none;
  background-color: transparent;

  color: black;

  font-family: 'Ubuntu', sans-serif;
  font-weight: lighter;

}
button:focus, input:focus
{
  outline: none;
}
button:hover
{
  background-color: rgba(255,255,255, 0.1);

  cursor: pointer;
}


.loadingModal
{
  background-color: rgba(0,0,0,0.2);

  z-index: 99998;
}

.loadingHeart
{
	height: 100%;
	width: 100%;

	background-image: url("/nginxStaticFiles/modules/eventDrivenInterface/@UI/graphics/psychadelicHeart.trans.gif");
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}


.notificationBell
{
  background-image: url("/nginxStaticFiles/projects/creditCommons/graphics/bell.png");
  background-repeat: no-repeat;
  background-size: contain;
}




.appLandingPage
{
  /*z-index: 20;*/

  background-color: rgba(0, 10, 29, 1.0);
  
  color: #fff689;
}
.appLandingPage .siteTitle
{
  font-size: 1.5em;
  font-weight: 400;
}
.appLandingPage .byLine
{
  font-weight: 200;
  margin-bottom: 16px;
}

.appLandingPage button
{
  height: 48px;
  max-width: 300px;
  
  margin-top: 16px;

  padding-left: 16px;
  padding-right: 16px;

  border-style: solid;
  border-width: 1px;
  border-color: #fff689;
  
  color: #fff689;
}

.appBar
{
  flex-basis: 64px;
  justify-content: space-between;

  border-bottom: 1px darkblue solid;

  background-color: rgba(0,10,29,1.0);
  color: #fff689;
}

.appContents
{
  background-color: rgb(247, 245, 250);
  /*height: calc(100% - 64px);*/
}


.homeLogoDiv
{
  height: 100%;

  align-self: flex-start;

  padding-left: 32px;

  /*margin: 4px;*/
  /*border-radius: 50%;*/
}
.homeLogoDiv
{
  color: #fff689;
  font-weight: 540;
}
.homeLogoDivImage
{ 
  height: 100%;
  width: 64px;

  background-image: url("/nginxStaticFiles/projects/creditCommons/graphics/mccLogo.transparentBackground.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size:  70%;
}
.userInfoDiv
{
}
.appBar .userLoggedIn button
{
  max-width: 300px;
  
  padding-left: 16px;
  padding-right: 16px;

  border-style: solid;
  border-width: 1px;
  border-color: #fff689;
  
  color: #fff689;
}
.appBar .userLoggedIn > button
{
  margin-top: 16px;
  margin-bottom: 16px;
}
.mainUserAvatar
{
  box-sizing: border-box;

  height: 64px;
  width: 64px;

  
  padding: 8px;

  cursor: pointer;
}
.avatarImage
{
  border-radius: 50%;
  background-image: url("/nginxStaticFiles/projects/creditCommons/graphics/defaultUser.png");

  background-size:contain;
  background-repeat: no-repeat;
  background-position: center;
}
.userIsOnlineIndicator
{
  width: 8px;
  height: 8px;
  
  right: 4%;
  top: 6%;

  background-color: blue;

  border-radius: 50%;
  border: 1px white solid;
}
.userIsOnlineIndicator.online
{
  background-color: green;
}

.userMenuFromAvatar
{
  z-index: 110;

  width: 250px;
  /*min-height: 200px;*/
  left: calc(-250px + 64px);
  top: 64px;
  padding: 16px;
  
  background-color: rgba(0,10,29,1.0);
  color: #fff689;
  
}
.appBar .userLoggedIn .userMenuFromAvatarButtonGroup
{
  margin-top: 16px;
}
.appBar .userLoggedIn .userMenuFromAvatarButtonGroup .logoutButton
{
  height: 48px;
}




.pocSidebar 
{
  flex-basis: 200px;
  min-width: 200px;

  background-color: lightgray;
  border-right: 2px darkgrey solid;
}
@media only screen and (max-width: 600px) {
  .pocSidebar {
    flex-basis: 64px;
    min-width: 74px;
  }
  .pocMenuItem.longDisplayName
  {
    display: none;
  }
  .pocMenuItem.shortDisplayName
  {
    display: block;
  }
}




.pocLedgerHierarchy
{
  z-index: -1;

  flex-grow: 1;
  opacity: 0.1;
  justify-content: center;


  transition: all 0.6s ease;
  user-select: none;



}
/*.pocLedgerHierarchy.appInitialised
{
  opacity: 0.3;
  
}*/
.pocLedgerHierarchy > svg
{
  width: 50%;
  max-width: 600px;

}
.ledgerGroupSVGElement > circle
{
  stroke-width:0.26458332;
  stroke:#000000;
  stroke-opacity:1;
  fill: rgba(0,0,0,0);
}

/*.pocLedgerHierarchy .ledgerGroupSVGElement circle:hover, 
.pocLedgerHierarchy .ledgerGroupSVGElement text:hover

{
  fill: red;
}*/
.pocMainContent
{
  padding-right: 30px;
  padding-left: 16px;
  padding-top: 16px;
}

.pocLedgerHierarchy .ledgerGroupSVGElement > text
{
  font-size: 0.6em;
}




/*appAttentionCluster*/
.appAttentionCluster_container
{
}

.appAttentionClusterNode_container .positionedNodes
{
	/*position: relative;*/
	background-color: #56baed;

}


.appAttentionClusterNodeDiv
{
	position: absolute;
  
  	width: fit-content;
  	/*max-width: 300px;*/

  	padding: 4px;

	border: 1px solid black;
  	border-radius: 4px;

  	background-color: lightgray;

  	overflow-wrap: anywhere;
}

.appAttentionClusterNodeDiv > .dragBar
{
  height: 10px;
  background-color: blue;

  border-radius: 3px 3px 0px 0px;
}


.unPositionedNodes
{

	border-radius: 8px;

	background-color: lightblue;
}
.unPositionedNodes .appAttentionClusterNodeDiv
{
	position: static;
  	margin-right: 20px;

  	margin-left: 8px;
  	margin-top: 8px;
  	margin-bottom: 8px;

}

.unPositionedNodes .namespaceShortcutButtonContainer,
.unPositionedNodes .contextFancytreeContainer,
.unPositionedNodes .editPanel
{
	display: none;
}


.contextFancytree_container
{
	min-height: 30px;
	min-width: 200px;



}
/*
.contextFancytreeDiv
{
	height: 100%;
}

*/



/* fancy tree theming
*/
.projectContainer ul.fancytree-container 
{
	background-color: transparent;
}



.notificationsMenu
{
  box-sizing: border-box;

  height: 64px;
  width: 64px;

  
  padding: 16px;

}
.notificationImage
{
  background-image: url("/nginxStaticFiles/projects/creditCommons/graphics/mail.png");

  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

}
.notificationsUnseenIndicator
{
  display: none;
  width: 8px;
  height: 8px;
  background-color: grey;
  border-radius: 50%;
  border: 1px white solid;
  right: -4px;
  top: 0px;
}
.notificationsUnseenIndicator.areUnseenNotifications
{
  display: block;
  background-color: green;
}
.notificationsContainer, .notificationActionContainer
{
  width: 400px;
  min-height: 400px;

  border-radius: 16px;
  padding: 40px 32px;

  background-color: rgba(255, 255, 255, 0.8);
}
.notificationsListContainer.zeroItemsInList
{
  height: 128px;
  width: 128px;
  
  overflow: hidden;

  background-size: contain;
  background-image: url(/nginxStaticFiles/projects/creditCommons/graphics/noEntry.png);
}

.notificationsContainer .closeButton.buttonLeaf, .notificationActionContainer .closeButton.buttonLeaf
{ 
  top: 2px;
  left: 2px;
  
  width: fit-content;  
}
.notificationsListContainer .nextButton.buttonLeaf
{ 
  bottom: 2px;
  right: 2px;
  
  width: fit-content;  
}
.notificationsListContainer .backButton.buttonLeaf
{ 
  bottom: 2px;
  left: 2px;
  
  width: fit-content;  
}
.notificationListItem
{
  margin-top: 2px;
  box-sizing: border-box;

  padding: 8px;

  border: 1px transparent solid;
  border-radius: 8px;

}
.notificationListItem:hover
{
  /*border-color: blue;*/
  background-color: rgba(0,0,255, 0.2);
  /*box-shadow: 0px 0px 7px rgba(101, 159, 232, 1.0);*/
}
/*.rowTitle
{ height: 64px;

  font-size: 1.3em;
  color: rgb(20,20,20);
}*/








.scanningForLedgerMembershipContainer.memberOfZeroLedgers
{
  background-color: rgba(98,98,100,1.0);
}
.scanningLedgerStatus
{
  width: 400px;
  min-height: 360px;

  padding-bottom: 24px;

  border-radius: 16px;
  background-color: rgba(255,255,255,0.8);
  
}
.scanningLedgerStatus .spinner
{
  transform: scale(0.5);
}
.scanningLedgerStatus .title
{
  margin: 12%;
  text-align: center;
}
.ledgerScanResultsContainer
{
  width:      40%;
  max-width:  300px;
  min-width:  200px;

  font-size:  1.3em;

  border-radius: 1.3em;
}
.ledgerScanResultDiv
{
  margin-bottom: 16px;
  padding: 1px 0.46em;

  border-radius: 1.5em;
  box-shadow: 0px 0px 7px rgba(101, 159, 232, 1.0);
}
.resultIndicator .userFound
{
  color: rgba(77, 198, 59, 1.0);
}
.resultIndicator .userNotFound
{
  font-size: 0.9em;

  color: rgba(101, 159, 232, 1.0);
}
.continueToApp
{
  position: absolute;
  right: 2px;
  bottom: 2px;
}



/*App Main Behaviour */
.buttonContainer .hasWaitingNotifications_indicator
{
  top: calc(50% - 5px);
  right: 5px;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  border-color: white;
  border-width: 1px;
  border-style: solid;
  background-color: green;
  display: none;
}
.buttonContainer.hasWaitingNotifications .hasWaitingNotifications_indicator
{
  display: block;
}

.pocMenuItem
{
  padding: 4px;
  border-bottom: 1px grey solid;

  min-height: 40px;

  margin-left: 16px;

  text-align: left;
  border-left: 1px darkgrey solid;

  transition: color 0.2s ease;
}
.pocMenuItem.hasWaitingNotifications
{
  background-color: red;
}
.selectLedgerMenu > .menuTitleDiv
{
  min-height: 40px;
  border-bottom: 1px darkgrey solid;
}

.pocMenuItem.disabled
{
  color: rgb(177,177,177);

}

.pocMenuItem:hover
{
  background-color: darkgrey;
  cursor: pointer;
}
.pocMenuItem.disabled:hover
{
  background-color: lightgray;
  cursor: default;

}


.ledgerLogo
{
  font-weight: 550;
  
}

.ledgerMenuItem
{
  padding: 4px;
}
.ledgerMenuItem:hover
{
  background: lightgray;
}
.ledgerNotificationIconDiv
{
  height: 26px;
  width: 26px;

  padding: 4px;


}
.ledgerNotificationIconDiv:hover
{
  background-color: lightgrey;
}
.ledgerNotificationIconHasWaitingNotifications_indicator
{
  top: 3px;
  right: 3px;
  height: 8px;
  width: 8px;
  border-radius: 50%;
  border-color: white;
  border-width: 1px;
  border-style: solid;
  background-color: green;
  display: none;
}
.ledgerNotificationIconDiv.hasWaitingNotifications .ledgerNotificationIconHasWaitingNotifications_indicator
{
  display: block;

}


/* user profile tab */
.userProfileFieldsContainer
{
  width: 100%;
  max-width: 400px;
}
.profilePageRowDiv
{
  margin-top: 16px;
  padding: 4px;
}
.userProfileFieldsContainer .editable
{
  border: transparent 1px solid;
}
.userProfileFieldsContainer .editable:hover
{
  border-color: blue;
}
.largeProfilePictureDiv
{
  width: 128px;
  height: 128px;
  
  border-radius: 50%;
  background-size:contain;
  background-repeat: no-repeat;
}

/* members tab */
.membersContentDiv
{
  max-width: 800px;
  width: 100%;

  margin-top:32px;
}
.membersContainer
{

}

.membersListItem
{
  margin-top: 16px;
  margin-left: 16px;
  margin-right: 16px;

  padding-bottom: 8px;

  border-bottom: blue 1px solid;
}

.membersListItem .picture
{
  height: 64px;
  width: 64px;
  background-size: contain;
  background-repeat: no-repeat;
}


/* transactions tab */
.transactionsContentDiv, .ledgerTabContentDiv
{
  max-width: 800px;
  width: 100%;

  margin-top:32px;
}
.transactionsContentDiv .title, .ledgerTabContentDiv .title
{
  font-size: 1.3em;
}
.newTransactionDiv
{
  padding: 4px;
  border: 1px blue solid;
}
.newTransactionDiv:hover
{
  background-color: rgba(0,0,255, 0.2);
}

.viewPendingTransactionsContainer
{
  margin-top: 16px;

  padding: 8px;
  border: 1px blue solid;

}
.viewPendingTransactionsContainer.open
{
  background-color: rgba(0,0,255, 0.13);
}
.pendingTransactionsOpenableRow
{
  padding: 0px 8px;

  border-radius: 2px;
}
.pendingTransactionsOpenableRow:hover
{
  background-color: rgba(0,0,255, 0.2);
}
.pendingTransactionsOpenableTitle
{
  font-size: 1.1em;
}
.pendingTransactionsOpenableRow .plusSign
{
  font-size: 1.5em;
}
.pendingTransactionsListContainer
{
    transition: height 0.3s ease;
}


.recentTransactionsTitleRow
{
  margin-top: 16px;
  font-size: 1.5em;
}
.recentTransactionsListContainer
{

  box-sizing: border-box;
  padding: 8px;
}

.recentTransactionListItem
{
  margin-top: 2px;
  box-sizing: border-box;

  padding: 8px;

  border: 1px transparent solid;
  border-radius: 8px;

}
.recentTransactionListItem:hover
{
  /*border-color: blue;*/
  background-color: rgba(0,0,255, 0.2);
  /*box-shadow: 0px 0px 7px rgba(101, 159, 232, 1.0);*/
}
.recentTransactionListItem .dateTime
{ 
}
.recentTransactionListItem .counterpartyID
{ color: blue;
  font-weight: bold;
}
.descriptionColumn
{ 
  /*color: blue;
  font-weight: bold;*/

}
@media only screen and (max-width: 850px) {
  .descriptionColumn {
    display: none;
  }
}
.recentTransactionListItem .balance
{ height: 1em;
}
.recentTransactionListItem .amount
{ font-weight: bold;  
}


.recentTransactions_detailToggle
{
  width: 64px;
}
.recentTransactions_dateTime
{
  /*max-width: 200px;
  width: 200px;*/

  text-align: left;
}
.recentTransactions_balance
{
  /*width: 100px;*/

  text-align: right;
}


.newTransactionMainContent
{
  width: 400px;
  height: 400px;
  overflow: hidden;

  border-radius: 16px;
  padding: 40px 32px;

  background-color: rgba(255, 255, 255, 0.8);
}

.newTransactionMainContent .closeButton.buttonLeaf
{ 
  top: 2px;
  left: 2px;
  
  width: fit-content;  
}
.newTransactionMainContent .nextButton.buttonLeaf
{ 
  bottom: 2px;
  right: 2px;
  
  width: fit-content;  
}
.newTransactionMainContent .backButton.buttonLeaf
{ 
  bottom: 2px;
  left: 2px;
  
  width: fit-content;  
}

.newTransactionMainContent .transactionSummary
{
  margin-bottom: 16px;

  height: 10em;

  padding-bottom: 8px;
  border-bottom: 1px rgba(101, 159, 232, 1.0) solid;
}
.newTransactionMainContent .transactionSummary > div
{
  background: linear-gradient(transparent, rgba(101, 159, 232, 0.15) );
  padding: 2px;
  border-radius: 8px;

  padding-right: 16px;
  padding-left: 16px;
}
.newTransactionMainContent .inputElement
{
  background-color: rgba(220, 220, 220, 1.0);
}

.newTransactionRow
{
  /*margin-top: 16px;*/
}
.rowTitle
{ 
  /*height: 64px;*/
  color: rgb(20,20,20);
}

.sendCreditTo, .getCreditFrom
{ 
  /*margin:   20px;*/
  /*padding:  20px;*/
  
  height: 128px;
  width: 128px;

  border-radius:8px;

  border-style: solid;
  border-color: transparent;
  border-width: 2px;

  background-repeat: no-repeat;
  background-size: contain;
}
.sendCreditTo
{
  background-image: url(/nginxStaticFiles/projects/creditCommons/graphics/moneyOut.png);
}
.getCreditFrom
{
  background-image: url(/nginxStaticFiles/projects/creditCommons/graphics/moneyIn.png);
}
.sendCreditTo.selected, .getCreditFrom.selected
{
    border-color: rgba(101, 159, 232, 1.0);
}

.targetAccountPhase select, .quantityAndDescriptionPhase input
{
  height: 64px;

  padding: 8px;

  border-width: 2px;
  border-radius: 8px;
  border-color: rgba(101, 159, 232, 1.0);
  border-style: solid;

  font-weight: 400;

  outline: none;
}
.quantityAndDescriptionPhase .description
{
  padding-left: 13px;
}


.quantityAndDescriptionPhase input:focus
{
 outline: none;
}
input.quantityOfCredit
{
  font-size: 3em;
  text-align: center;
  font-family: monospace;
}

.transactionSummaryPhase
{
  text-align: center;

}
.submitTransactionForValidation
{
  height: 100px;
  width: 100px;
}

.validationResponsePhase .approveCancelButtonGroup button
{
  margin: 16px;

  height: 100px;
  width: 100px;

  padding: 16px;
}
.validationResponsePhase .approveCancelButtonGroup .cancelTransaction
{
  border-width: 2px;
  border-radius: 8px;
  border-color: rgba(101, 159, 232, 1.0);
  border-style: solid;
} 



/*local theme things*/
.noEntryImage
{
  height: 64px;
  width: 64px;
  background-size: contain;

  background-image: url(/nginxStaticFiles/projects/creditCommons/graphics/noEntry.png);
}

.buttonLeaf
{
  padding: 6px 12px;
  background-color: rgba(101, 159, 232, 1.0);
  border-radius: 16px 2px 16px 2px;

  cursor: pointer;
  /*user-select: none;*/

}
.buttonLeaf.buttonLeafReversed
{
  border-radius: 2px 16px 2px 16px;
}
.buttonLeaf.buttonLeafSymetric
{
  border-radius: 16px 16px 16px 16px;
}

.buttonLeaf.disabled, .buttonLeaf:disabled
{
  color: lightgray;
  background-color: rgba(101, 159, 232, 0.3);
  cursor: wait;
}
.buttonLeaf:hover
{
  background-color: rgba(92, 145, 211, 1.0);
}
.buttonLeaf.disabled:hover, .buttonLeaf:disabled:hover
{
  color: lightgray;
  background-color: rgba(101, 159, 232, 0.4);
  cursor: wait;
}




.projectTitle
{ display: none; 
}
.projectContainer
{
  position: relative;
  z-index: 10;
}


.socketConnectionState
{
  display: none;
}
.creditCommons_container
{ display: none; 
}



.projectContainer > .mdcTopAppBar
{
  /*background-color: #0045ac;*/
}

.linearMajorBackground_90
{ 
  background: linear-gradient(90deg, var(--mdc-theme-secondary-linearGradientMid, rgba(146, 184, 124, 0.25)) 0%, var(--mdc-theme-secondary, rgba(148, 186, 126, 1.0)) 40%);

}
/*
.userInfoDiv
{
  background: linear-gradient(90deg, rgba(146, 184, 124, 0.25) 0%, rgba(148, 186, 126, 1.0) 40%);
}*/


.userJourneyLog.demoLayout *
{
  transition: all 4s ease 0.5s;
  position: relative;

}

.editProfileDetails_primaryContainer
{
  max-width: 600px;


}
.demoLayout .editProfileDetails_primaryContainer:before
{
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
  margin: -3px; 
  border-radius: inherit; /* !importanté */
  background: linear-gradient(180deg, rgba(146, 184, 124, 0.25) 0%, rgba(148, 186, 126, 0.4) 63.54%, #498328 100%);;
}



.editProfileDetails_primaryContainer > div
{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gravatarImage > img
{
    width: 200px;
}



.demoLayout .editProfileDetails_primaryContainer
{
  /*margin: auto;*/
  width: 80%;
  background-color: rgba(255,255,255,0.8);
  max-width: 600px;
  border-radius: 32px;
  padding: 28px;

  /*position: flex;
  align-items: center;*/
}


.demoLayout .gravatarImage
{
  /*order: -1;*/
  font-size: 0px;
}
.demoLayout .gravatarImage > img
{
  width: 128px;

  border-radius: 50%;
}

.demoLayout .button:disabled
{
  opacity: 0;
}




/*.editProfileDetails_1_container
{
  display: flex;
  flex-direction: column;
  align-items: center;

}
.editProfileDetails_2_container
{
  display: flex;
  flex-direction: column;
  align-items: center;
  
}
.editProfileDetails_3_container
{
  display: flex;
  flex-direction: column;
  align-items: center;
  
}
*/


/* *********************************    spinner*/

.wrapper {
  width: 100%;
  height: 100%;
  /*background: whitesmoke;*/
  position: absolute;
  z-index: 0;


}

.flex-center {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
}

.container {
  width: 10em;
  height: 10em;
  position: relative;
  background-color: rgba(255,255,255,0.05);

  background-image: url("/nginxStaticFiles/projects/creditCommons/graphics/mccLogo.transparentBackground.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size:  contain;
  border-radius: 50%;
}
.container .dot {
  background: rgba(0,0,0,0.2);
  content: "";
  border-radius: 0.5em;
  margin-top: -0.5em;
  margin-left: auto;
  margin-right: auto;
  width: 1em;
  height: 1em;
  -webkit-animation-name: bounce;
          animation-name: bounce;
  -webkit-animation-duration: 6500ms;
          animation-duration: 6500ms;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-transition-timing-function: cubic-bezier(0, 0.99, 0, 0.1);
          transition-timing-function: cubic-bezier(0, 0.99, 0, 0.1);
}

.container-dot {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.dot-a {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
.dot-a .dot {
  -webkit-animation-delay: 0ms;
          animation-delay: 0ms;
}

.dot-b {
  -webkit-transform: rotate(-22.5deg);
          transform: rotate(-22.5deg);
}
.dot-b .dot {
  -webkit-animation-delay: -406.25ms;
          animation-delay: -406.25ms;
}

.dot-c {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.dot-c .dot {
  -webkit-animation-delay: -812.5ms;
          animation-delay: -812.5ms;
}

.dot-d {
  -webkit-transform: rotate(-67.5deg);
          transform: rotate(-67.5deg);
}
.dot-d .dot {
  -webkit-animation-delay: -1218.75ms;
          animation-delay: -1218.75ms;
}

.dot-e {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.dot-e .dot {
  -webkit-animation-delay: -1625ms;
          animation-delay: -1625ms;
}

.dot-f {
  -webkit-transform: rotate(-112.5deg);
          transform: rotate(-112.5deg);
}
.dot-f .dot {
  -webkit-animation-delay: -2031.25ms;
          animation-delay: -2031.25ms;
}

.dot-g {
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
}
.dot-g .dot {
  -webkit-animation-delay: -2437.5ms;
          animation-delay: -2437.5ms;
}

.dot-h {
  -webkit-transform: rotate(-157.5deg);
          transform: rotate(-157.5deg);
}
.dot-h .dot {
  -webkit-animation-delay: -2843.75ms;
          animation-delay: -2843.75ms;
}

@-webkit-keyframes bounce {
  0%, 100% {
    -webkit-transform: translatey(0);
            transform: translatey(0);
  }
  50% {
    -webkit-transform: translatey(10em);
            transform: translatey(10em);
  }
}

@keyframes bounce {
  0%, 100% {
    -webkit-transform: translatey(0);
            transform: translatey(0);
  }
  50% {
    -webkit-transform: translatey(10em);
            transform: translatey(10em);
  }
}



/* Animated Icons*/

.svg-box {
    display:inline-block;
    position: relative;
    width:150px;
}

.green-stroke {
    stroke:#7CB342;
}

.red-stroke {
    stroke: #FF6245;
}

.yellow-stroke {
    stroke: #FFC107;
}

.blue-stroke {
    stroke: #077fff;
}


.circular circle.path {
    stroke-dasharray: 330;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    opacity: 0.4;
    animation: 0.7s draw-circle ease-out;
}

/*------- Checkmark ---------*/
.checkmark{
  stroke-width: 6.25;
    stroke-linecap: round;
  position:absolute;
    top: 56px;
    left: 49px;
    width: 52px;
    height: 40px;
}

.checkmark path {
    animation: 1s draw-check ease-out;
}

@keyframes draw-circle {
    0% {
        stroke-dasharray: 0,330;
        stroke-dashoffset: 0;
        opacity: 1;
    }

    80% {
        stroke-dasharray: 330,330;
        stroke-dashoffset: 0;
        opacity: 1;
    }

    100%{
        opacity: 0.4;
    }
}

@keyframes draw-check {
    0% {
        stroke-dasharray: 49,80;
        stroke-dashoffset: 48;
        opacity: 0;
    }

    50% {
        stroke-dasharray: 49,80;
        stroke-dashoffset: 48;
        opacity: 1;
    }

    100% {
        stroke-dasharray: 130,80;
        stroke-dashoffset: 48;
    }
}

/*---------- Cross ----------*/

.cross {
    stroke-width:6.25;
    stroke-linecap: round;
    position: absolute;
    top: 54px;
    left: 54px;
    width: 40px;
    height: 40px;
}

.cross .first-line {
    animation: 0.7s draw-first-line ease-out;
}

.cross .second-line {
    animation: 0.7s draw-second-line ease-out;
}

@keyframes draw-first-line {
    0% {
        stroke-dasharray: 0,56;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 0,56;
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dasharray: 56,330;
        stroke-dashoffset: 0;
    }
}

@keyframes draw-second-line {
    0% {
        stroke-dasharray: 0,55;
        stroke-dashoffset: 1;
    }

    50% {
        stroke-dasharray: 0,55;
        stroke-dashoffset: 1;
    }

    100% {
        stroke-dasharray: 55,0;
        stroke-dashoffset: 70;
    }
}

.alert-sign {
    stroke-width:6.25;
    stroke-linecap: round;
    position: absolute;
    top: 40px;
    left: 68px;
    width: 15px;
    height: 70px;
    animation: 0.5s alert-sign-bounce cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.alert-sign .dot {
    stroke:none;
    fill: #FFC107;
}

@keyframes alert-sign-bounce {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}