@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; }