@media only screen
        and (max-width: 1000px) {
          .desktopOnly { display:none; }
        }
	      .no-scroll { overflow:hidden; }




	      .modalCloseButton { color:#aaa; float:right; font-size:28px; font-weight:bold; text-decoration:none; cursor:pointer; }
        .modalScrollCloseButton_containerOuter { position:absolute; top:10; right:0; width:35px;  }
        .modalScrollCloseButton_containerInner { position:relative; }
        .modalScrollCloseButton { color:#aaa; font-size:28px; font-weight:bold; text-decoration:none; cursor:pointer; position:fixed; }
        .modalCloseButton:hover, .modalCloseButton:focus, .modalScrollCloseButton:hover, .modalScrollCloseButton:focus { color:black; }


        .modalButtonSaveEdits, .modalScrollButtonSaveEdits {
          background-color:var(--appColor_green2); border: 1px solid var(--appColor_green1); border-radius:4px; color:white;
          padding: 6px 17px; text-align:center; text-decoration:none; outline:none; cursor:pointer; font-size:12px;
        }
        .modalButtonSaveEdits:hover, .modalScrollButtonSaveEdits:hover {
          background-color:var(--appColor_blue1); border: 1px solid var(--appColor_blue1);
        }
        .modalScrollButtonSaveEdits { position:fixed; }

        @media only screen
        and (max-width: 1000px) {
          .modalButtonSaveEdits, .modalScrollButtonSaveEdits { font-size:14px;  }
        }




        /* _________________________________

        MODAL:  Load Screen 1
        ____________________________________ */

        @keyframes animate_opacity_0-to-70p {
          from {opacity: 0}
          to {opacity: 0.7}
        }
        #modalLoadScreen {
          opacity:0.7; background-color:var(--appColor_loadBackground1); text-align:center;
          animation-name:animate_opacity_0-to-70p; animation-duration:0.2s;
          z-index: 10;
        }
        #modalLoadScreenContent {
          margin:auto; width:300px; height:100px; position:relative; opacity:1; text-align:center;
        }


        /* _________________________________

        MODAL FRAMEWORK
        ____________________________________ */


        .modalBackdrop {
          font-size:15px; display:none; position:fixed; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.4);
          animation-name:fadeIn; animation-duration:0.3s;
        }
        .modalBackdrop_tableCenter1 { position:absolute; display:table; top:0; left:0; width:100vw; height:100vh; }
        .modalBackdrop_tableCenter2 { position:relative; display:table-cell; vertical-align:middle; max-height:98vh; }
        
        .modalBackdrop_tableCenter1_top1 { position:absolute; display:table; top:11%; left:0; width:100vw; height:100vh; box-sizing:border-box;  }
        .modalBackdrop_tableCenter2_top1 { position:relative; display:table-cell; vertical-align:top; max-height:98vh; box-sizing:border-box; }

        .modalContent {
          background-color:white; border:2px solid var(--appColor_modalBorders1); border-radius:5px; position:relative; overflow:scroll; margin:auto;
          box-sizing:border-box;
        }
        .modalContent input, .modalContent select { font-size:14px; }
        .modalContentInner { padding:0px 20px; }



        /* _________________________________________________

        MODAL:  Helper
        ____________________________________________________ */

        /* added CLASS for budget2, but should prob change all instances to class? */
        #modal_helper { z-index:8; }
        .modal_helper { z-index:7; }

        #modal_helper .modalScrollCloseButton,
        .modal_helper .modalScrollCloseButton,
        .modal_standard .modalScrollCloseButton { color:var(--appColor_modalCloseButton1); }

        #modal_helper .modalScrollCloseButton:hover,
        .modal_helper .modalScrollCloseButton:hover,
        .modal_standard .modalScrollCloseButton:hover { color:black; transform: translateX(1px) scale(1.6,1.5); }

        #modal_helper .modalContent,
        .modal_helper .modalContent {
          background-color:var(--appColor_grey1); color:black; font-size:22px; padding:50px 50px; padding-bottom:30px; min-width:340px; width:50%; max-width:900px; height:auto;
          margin:auto; overflow:auto;
        }

        #modal_helper_text { padding-bottom:40px; }

        @media only screen
        and (max-width: 1000px) {
          #modal_helper .modalContent {
            font-size:19px; padding: 50px 30px; padding-bottom:0px; min-width:240px; width:70%;
          }
        }




          
  @keyframes animate_slideIn_fromTop_200px {
    from { top:-210px; opacity:0; }
    to { top:0; opacity:1; }
  }
  
  @keyframes animate_slideIn_fromBottom_200px {
    from { bottom:-210px; opacity:0; }
    to { bottom:0; opacity:1; }
  }
  
  @keyframes animate_slideIn_fromLeft_200px {
    from { left:-130px; opacity:0; }
    to { left:0; opacity:1; }
  }
  
  @keyframes animate_slideIn_fromRight_200px {
    from { right:-130px; opacity:0; }
    to { right:0; opacity:1; }
  }
  
  
  
  
  
  .animate_old-top {
    animation-name: animatetop;
    animation-duration: 0.3s;
  }
  @keyframes animatetop {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
  }
  
  @keyframes animateMenu {
    from {opacity: 0}
    to {opacity: 1}
  }
  
  @keyframes animateMenuDropper {
    from { opacity:0; transform: translateY(-20%) }
    to { opacity:1; transform: translateY(0%) }
  }
  
  
  
  
  
  .animate_fadeIn {
    animation-name: fadeIn;
    animation-duration: 0.5s;
  }
  @keyframes fadeIn {
    from {opacity: 0}
    to {opacity: 1}
  }
  
  
  
  
  /*___________________________
  
   ENTRANCES
  ___________________________*/
  
  
  
  .stretchLeft {
	  animation-name: stretchLeft;
	  -webkit-animation-name: stretchLeft;	
	  
	  animation-duration: 1s;	
	  -webkit-animation-duration: 1s;
          
	  animation-timing-function: ease-out;	
	  -webkit-animation-timing-function: ease-out;	
	  
	  transform-origin: 100% 0%;
	  -ms-transform-origin: 100% 0%;
	  -webkit-transform-origin: 100% 0%; 
  }
	@keyframes stretchLeft {
	  0% { transform: scaleX(0.3); }
	  40% { transform: scaleX(1.02); }
	  60% { transform: scaleX(0.98); }
	  80% { transform: scaleX(1.01); }
	  100% { transform: scaleX(0.98); }				
	  80% { transform: scaleX(1.01); }
	  100% { transform: scaleX(1); }							
	}
	@-webkit-keyframes stretchLeft {
	  0% { -webkit-transform: scaleX(0.3); }
	  40% { -webkit-transform: scaleX(1.02); }
	  60% { -webkit-transform: scaleX(0.98); }
	  80% { -webkit-transform: scaleX(1.01); }
	  100% { -webkit-transform: scaleX(0.98); }				
	  80% { -webkit-transform: scaleX(1.01); }
	  100% { -webkit-transform: scaleX(1); }	
  }
	
	
	
	
	
	.pullUp {
	  animation-name: pullUp;
	  -webkit-animation-name: pullUp;	

	  animation-duration: 1.1s;	
	  -webkit-animation-duration: 1.1s;
	  animation-timing-function: ease-out;	
	  -webkit-animation-timing-function: ease-out;	

	  transform-origin: 50% 100%;
	  -ms-transform-origin: 50% 100%;
	  -webkit-transform-origin: 50% 100%; 	
  }
  @keyframes pullUp {
    0% { transform: scaleY(0.1); }
	  40% { transform: scaleY(1); }
	  60% { transform: scaleY(1); }
	  80% { transform: scaleY(1); }
	  100% { transform: scaleY(1); }											
  }
  @-webkit-keyframes pullUp {
    0% { -webkit-transform: scaleY(0.1); }
	  40% { -webkit-transform: scaleY(1); }
	  60% { -webkit-transform: scaleY(1); }
	  80% { -webkit-transform: scaleY(1); }
	  100% { -webkit-transform: scaleY(1); }					
  }
  
  
  .pullDown {
	  animation-name: pullDown;
	  -webkit-animation-name: pullDown;	

	  animation-duration: 1.1s;	
	  -webkit-animation-duration: 1.1s;
	  animation-timing-function: ease-out;	
	  -webkit-animation-timing-function: ease-out;	

	  transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
	  -webkit-transform-origin: 50% 0%; 	
  }
  @keyframes pullDown {
    0% { transform: scaleY(0.1); }
	  40% { transform: scaleY(1); }
	  60% { transform: scaleY(1); }
	  80% { transform: scaleY(1); }
	  100% { transform: scaleY(1); }											
  }
  @-webkit-keyframes pullDown {
    0% { -webkit-transform: scaleY(0.1); }
	  40% { -webkit-transform: scaleY(1); }
	  60% { -webkit-transform: scaleY(1); }
	  80% { -webkit-transform: scaleY(1); }
	  100% { -webkit-transform: scaleY(1); }					
  }
	
	
	
	
	
	.animate-expandUp {
	  animation-name: expandUp;
	  -webkit-animation-name: expandUp;	
	  animation-duration: 1s;	
	  -webkit-animation-duration: 1s;
	  animation-timing-function: ease;	
	  -webkit-animation-timing-function: ease;
	  visibility: visible !important;	
  }
  @keyframes expandUp {
    0% { transform: translateY(100%) scale(0.6) scaleY(0.5); }	
    60% { transform: translateY(-7%) scaleY(1.12); }	
    75% { transform: translateY(3%); }	
    100% { transform: translateY(0%) scale(1) scaleY(1); }					
  }
  @-webkit-keyframes expandUp {
    0% { -webkit-transform: translateY(100%) scale(0.6) scaleY(0.5); }	
    60% { -webkit-transform: translateY(-7%) scaleY(1.12); }	
    75% { -webkit-transform: translateY(3%); }	
    100% { -webkit-transform: translateY(0%) scale(1) scaleY(1); }					
  }
        
        
  .animate-slideExpandUp {
	  animation-name: slideExpandUp;
	  -webkit-animation-name: slideExpandUp;	
	  animation-duration: 1.6s;	
	  -webkit-animation-duration: 1.6s;
	  animation-timing-function: ease-out;	
	  -webkit-animation-timing-function: ease-out;
	  visibility: visible !important;	
  }
  @keyframes slideExpandUp {
    0% { transform: translateY(100%) scaleX(0.5); }
	  30% { transform: translateY(-8%) scaleX(0.5); }	
	  40% { transform: translateY(2%) scaleX(0.5); }
	  50% { transform: translateY(0%) scaleX(1.1); }
	  60% { transform: translateY(0%) scaleX(0.9); }
	  70% { transform: translateY(0%) scaleX(1.05); }			
	  80% { transform: translateY(0%) scaleX(0.95); }
	  90% { transform: translateY(0%) scaleX(1.02); }	
	  100% { transform: translateY(0%) scaleX(1); }					
  }
  @-webkit-keyframes slideExpandUp {
    0% { -webkit-transform: translateY(100%) scaleX(0.5); }
	  30% { -webkit-transform: translateY(-8%) scaleX(0.5); }	
	  40% { -webkit-transform: translateY(2%) scaleX(0.5); }
	  50% { -webkit-transform: translateY(0%) scaleX(1.1); }
	  60% { -webkit-transform: translateY(0%) scaleX(0.9); }
	  70% { -webkit-transform: translateY(0%) scaleX(1.05); }			
	  80% { -webkit-transform: translateY(0%) scaleX(0.95); }
	  90% { -webkit-transform: translateY(0%) scaleX(1.02); }	
	  100% { -webkit-transform: translateY(0%) scaleX(1); }						
  }
        
	
	/* shakes at end */
	.flipInX {
    -webkit-animation-name: flipInX;
    animation-name: flipInX;
    
    animation-duration: 1.1s;	
	  -webkit-animation-duration: 1.1s;

	  animation-timing-function: ease-out;	
	  -webkit-animation-timing-function: ease-out;	
  }
	@keyframes flipInX {
      from {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0;
      }
      40% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
      }
      60% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
      }
      80% {
        -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
      }
      to {
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
      }
  }
        
        
        
  /* no shake at end */
  .flipInX-soft {
    -webkit-animation-name: flipInX-soft;
    animation-name: flipInX-soft;
    
    animation-duration: 1.1s;	
    -webkit-animation-duration: 1.1s;

	  animation-timing-function: ease-out;	
	  -webkit-animation-timing-function: ease-out;	
  }
	@keyframes flipInX-soft {
    from {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
      transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
      opacity: 0;
    }
    40% {
      -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
      transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    }
    to {
      -webkit-transform: perspective(400px);
      transform: perspective(400px);
    }
  }
  
  
  
  
  
  
	/* HOVERS */
	
	
	.animate-pulse {
	  animation-name: pulse;
	  -webkit-animation-name: pulse;	

	  animation-duration: 2s;	
	  -webkit-animation-duration: 2s;

	  animation-iteration-count: infinite;	
	  -webkit-animation-iteration-count: infinite;			
  }
  @keyframes pulse {
    0% { transform: scale(0.9); opacity:0.7; }	
    50% { transform: scale(1); opacity:1; }	
    100% { transform: scale(0.9); opacity:0.7; }						
  }
	@-webkit-keyframes pulse {
    0% { -webkit-transform: scale(0.95); opacity:0.7; }	
    50% { -webkit-transform: scale(1); opacity:1; }	
    100% { -webkit-transform: scale(0.95); opacity:0.7; }						
  }
  
  
  .animate-float {
  	  animation-name: float;
  	  -webkit-animation-name: float;	

  	  animation-duration: 2s;	
  	  -webkit-animation-duration: 2s;

  	  animation-iteration-count: infinite;	
  	  -webkit-animation-iteration-count: infinite;			
  }
  @keyframes float {
    0% { transform: translateY(0%); }	
    50% { transform: translateY(8%); }	
    100% { transform: translateY(0%); }						
  }
  @-webkit-keyframes float {
    0% { -webkit-transform: translateY(0%); }	
    50% { -webkit-transform: translateY(8%); }	
    100% { -webkit-transform: translateY(0%); }						
  }
  
  
  .animate-tossing {
  	  animation-name: tossing;
  	  -webkit-animation-name: tossing;	

  	  animation-duration: 2.5s;	
  	  -webkit-animation-duration: 2.5s;

  	  animation-iteration-count: infinite;	
  	  -webkit-animation-iteration-count: infinite;			
  }
  .animate-tossingSlow {
  	  animation-name: tossing;
  	  -webkit-animation-name: tossing;	

  	  animation-duration: 5s;	
  	  -webkit-animation-duration: 5s;

  	  animation-iteration-count: infinite;	
  	  -webkit-animation-iteration-count: infinite;			
  }
  @keyframes tossing {
    0% { transform: rotate(-4deg); }	
    50% { transform: rotate(4deg); }	
    100% { transform: rotate(-4deg); }						
  }
  @-webkit-keyframes tossing {
    0% { -webkit-transform: rotate(-4deg); }	
    50% { -webkit-transform: rotate(4deg); }	
    100% { -webkit-transform: rotate(-4deg); }						
  }
        
        
        
  .animate-left-right {
  	  animation-name: left-right;
  	  -webkit-animation-name: left-right;	

  	  animation-duration: 4s;	
  	  -webkit-animation-duration: 4s;

  	  animation-iteration-count: infinite;	
  	  -webkit-animation-iteration-count: infinite;			
  }
  @keyframes left-right {
    0% { transform: translateX(-8%); }	
    50% { transform: translateX(29%); }	
    100% { transform: translateX(-8%); }						
  }
  @-webkit-keyframes left-right {
    0% { -webkit-transform: translateX(-8%); }	
    50% { -webkit-transform: translateX(29%); }	
    100% { -webkit-transform: translateX(-8%); }						
  }
  
  
  .animate-spin360 {
  	  animation-name: spin360;
  	  -webkit-animation-name: spin360;

  	  animation-duration: 8s;	
  	  -webkit-animation-duration: 8s;

  	  animation-iteration-count: infinite;
  	  -webkit-animation-iteration-count: infinite;
  }
  @keyframes spin360 {
    0% { transform: rotate(0deg); }	
    50% { transform: rotate(180deg); }	
    100% { transform: rotate(0deg); }						
  }
  @-webkit-keyframes spin360 {
    0% { -webkit-transform: rotate(0deg); }	
    50% { -webkit-transform: rotate(180deg); }	
    100% { -webkit-transform: rotate(0deg); }						
  }/* https://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

.toggle-switch {
  position:relative; height:50px;
  background: rgba(213,213,213,0.25); border-radius:3px; border:1px solid rgba(0,0,0,0.3); 
}
.toggle-switch.toggle-shadow-inset1 {
  border:0px;
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
}

.toggle-switch .switch-label {
  position:relative; float:left; line-height:26px; font-size:18px; text-align:center;
  color:rgba(0,0,0,0.35); text-shadow: 0 1px 1px rgba(0,0,0,0.15); /*color:rgba(255, 255, 255, 0.35); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);*/
  padding:10px 0; margin:auto; cursor:pointer; 
  z-index:2;
}
.toggle-switch .switch-label:active { font-weight:600; }
.toggle-switch .switch-label-off { padding-left:0px; }
.toggle-switch .switch-label-on { padding-right:0px; }


.toggle-switch .switch-input { display:none; }
.toggle-switch .switch-input:checked + .switch-label {
  font-weight:600;
  color: rgba(0, 0, 0, 0.65);
  text-shadow: 0 1px rgba(255, 255, 255, 0.25);
  -webkit-transition: 0.15s ease-out;
  -moz-transition: 0.15s ease-out;
  -ms-transition: 0.15s ease-out;
  -o-transition: 0.15s ease-out;
  transition: 0.15s ease-out;
  -webkit-transition-property: color, text-shadow;
  -moz-transition-property: color, text-shadow;
  -ms-transition-property: color, text-shadow;
  -o-transition-property: color, text-shadow;
  transition-property: color, text-shadow;
}
.toggle-switch .switch-input:checked + .switch-label-on ~ .switch-selection {
  left: 60px;
  /* Note: left: 50%; doesn't transition in WebKit */
}
  
.toggle-switch .switch-selection {
  display:block; position:absolute;
  height:100%; top:0px; left:0px; border-radius:3px; background-color:#65bd63;
  z-index: 1;
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  -webkit-transition: left 0.15s ease-out;
  -moz-transition: left 0.15s ease-out;
  -ms-transition: left 0.15s ease-out;
  -o-transition: left 0.15s ease-out;
  transition: left 0.15s ease-out;
  /*
  width: 58px;
  height: 22px;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9dd993), color-stop(100%, #65bd63));
  background-image: -webkit-linear-gradient(top, #9dd993, #65bd63);
  background-image: -moz-linear-gradient(top, #9dd993, #65bd63);
  background-image: -ms-linear-gradient(top, #9dd993, #65bd63);
  background-image: -o-linear-gradient(top, #9dd993, #65bd63);
  background-image: linear-gradient(top, #9dd993, #65bd63);
  */
}
.toggle-switch.toggle-shadow-inset1 .switch-selection {
  height:91%; top:2px; left:2px;
}


.toggle-switch.switch-blue .switch-selection {
  background-color: #75BAE5;
}
.toggle-switch.switch-blue .switch-input:checked + .switch-label { /*color:white !important;*/ }

.toggle-switch.switch-white .switch-selection {
  background-color: #ffffff;
}
.toggle-switch.switch-yellow .switch-selection {
  background-color: #c4bb61;
}
.toggle-switch.switch-green .switch-selection {
  background-color: #A1ECD8;
}

.toggle-switch.width-200px { width:200px; }
.toggle-switch.width-200px .switch-label, .toggle-switch.width-200px .switch-selection { width:100px; }
.toggle-switch.toggle-shadow-inset1.width-200px .switch-label, .toggle-switch.toggle-shadow-inset1.width-200px .switch-selection { width:98px; }
.toggle-switch.width-200px .switch-input:checked + .switch-label-on ~ .switch-selection { left:100px; }

.toggle-switch.width-300px { width:300px; }
.toggle-switch.width-300px .switch-label, .toggle-switch.width-300px .switch-selection { width:150px; }
.toggle-switch.toggle-shadow-inset1.width-300px .switch-label, .toggle-switch.toggle-shadow-inset1.width-300px .switch-selection { width:148px; }
.toggle-switch.width-300px .switch-input:checked + .switch-label-on ~ .switch-selection { left:150px; }

.toggle-switch.width-500px { width:500px; }
.toggle-switch.width-500px .switch-label, .toggle-switch.width-500px .switch-selection { width:250px; }
.toggle-switch.toggle-shadow-inset1.width-500px .switch-label, .toggle-switch.toggle-shadow-inset1.width-500px .switch-selection { width:248px; }
.toggle-switch.width-500px .switch-input:checked + .switch-label-on ~ .switch-selection { left:250px; }

.toggle-switch.height-50px { height:48px; }
.toggle-switch.height-50px .switch-label { padding:10px 0; line-height:26px; }

.toggle-switch.height-35px { height:35px; }
.toggle-switch.height-35px .switch-label { padding:7px 0; line-height:20px; }