/* –––––––  just some general stuff  ––––––– */

* {
	margin: 0;
	padding: 0;
	
	font-size: 100%;
}

html { -webkit-text-size-adjust: 100%; }
body.loading-state { background: #000; }

body {
	background-color: #F7F7F8;	
	color: #000;
}

body, input, textarea {
	font-family: 'San Francisco Display', 'Helvetica Neue', Helvetica, 'Segoe UI', sans-serif;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;	
}

body.sf-font,
body.sf-font input,
body.sf-font textarea {
	font-family: -apple-system;
}



/* –––––––  that fancy header  ––––––– */

#the-header,
#the-header .view-title,
#the-header .view-title2 {
	position: fixed;
	
	top: 0;
	left: 0;
	
	width: 100%;
	height: 50px;
}

#the-header {
	background: #FFF;
	color: #000;

	z-index: 1001;	
	border-bottom: 1px solid #EDEDED;
}

#the-header .view-title,
#the-header .view-title2 {
	text-align: center;
	pointer-events: none;
	
	font-size: 16px;
	line-height: 53px;
}

.ui-medium-font, #the-header .view-title, #the-header .view-title2 { font-family: 'SanFranciscoDisplay-Semibold', 'HelveticaNeue-Medium', 'HelveticaNeue-Bold', 'Helvetica Neue', Helvetica, 'Segoe UI', sans-serif; }
.sf-font .ui-medium-font, .sf-font #the-header .view-title { font-family: -apple-system; font-weight: 600; }



/* –––––––  the remarkable auxorel UI-Kit  ––––––– */

.ui-background-transitioning,
#wrapper #the-tabbar.ui-background-transitioning {
	
	-webkit-transition: background 0.6s;
	-moz-transition: 	background 0.6s;
	-ms-transition: 	background 0.6s;
	-o-transition: 		background 0.6s;
	transition: 		background 0.6s;
}

.ui-bold { font-weight: bold; }
.ui-null {
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	transform: translateZ(0);
}

.ui-group {
	margin: 20px 0;
	margin-bottom: 50px;
}

.ui-group .ui-list-label {
	padding: 8px 16px;
	padding-top: 0;
	
	font-size: 16px;
	display: block;
}

.ui-group .ui-list {
	margin-top: 8px;
}

.ui-group .ui-list > .ui-item {
	background: #FFF;
	color: #000;
	
	border-bottom: 1px solid #EAEAEA;
	padding: 14px 16px;
	
	display: block;
	-webkit-touch-callout: none;
}

.ui-group.ui-vibrant .ui-list > .ui-item {
	background: #000;
	background: rgba(249, 252, 253, 0.05);
	
	color: #C0DDEA;
}

.ui-group .ui-list > .ui-item > .ui-dot {
	width: 8px;
	height: 8px;
	
	background: #9BBAC8;
	display: inline-block;
	
	margin: 2px;
	margin-left: 6px;
	
	border-radius: 4px;
}

.ui-group .ui-list > .ui-item > .ui-dot + span {
	padding-left: 6px;
}

#wrapper .ui-dot.ui-color-red { background: #FF7070; }
#wrapper .ui-dot.ui-color-lime { background: #D3FF70; }
#wrapper .ui-dot.ui-color-blue { background: #70bfff; }
#wrapper .ui-dot.ui-color-gray { background: #C9C9C9; }
#wrapper .ui-dot.ui-color-white { background: #FFFFFF; }
#wrapper .ui-dot.ui-color-orange { background: #F2A050; }
#wrapper .ui-dot.ui-color-yellow { background: #FFF633; }
#wrapper .ui-dot.ui-color-turquoise { background: #4eedc8; }

.ui-list > .ui-item > .ui-sidelabel {
	float: right;
	
	opacity: 0.4;
	padding-right: 5px;
}

.ui-group.ui-vibrant .ui-list > .ui-item.ui-item-mousedown {
	background: rgba(249, 252, 253, 0.15);
}

.ui-switch {
	background: #55666B;
	border-radius: 14px;
	
	height: 28px;
	width: 46px;
	
	-webkit-transition: background 0.25s;
	-moz-transition: 	background 0.25s;
	-ms-transition: 	background 0.25s;
	-o-transition: 		background 0.25s;
	transition: 		background 0.25s;
	
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	transform: translateZ(0);
}

.ui-list > .ui-item .ui-switch {
	margin-top: -4px;
	float: right;
}

.ui-switch.ui-on {
	background: #48CD5F;
}

.ui-switch > .ui-switch-element {
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	border-radius: 12px;
	
	background: #FFF;
	margin: 2px;
	
	height: 24px;
	width: 24px;
	
	-webkit-transition: 0.25s margin-left;
	-moz-transition: 0.25s margin-left;
	-ms-transition: 0.25s margin-left;
	-o-transition: 0.25s margin-left;
	transition: 0.25s margin-left;
	
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	transform: translateZ(0);
}

.ui-switch.ui-on > .ui-switch-element { margin-left: 20px; }
.ui-item.new-group { margin-top: 44px; }

.ui-item .ui-arrow-right {
	width: 8px;
	height: 19px;
	
	background: transparent url('../assets/icon_righty.png') no-repeat center center;
	background-size: 8px 15px;
  
	margin-right: 2px;
	
	opacity: 0.75;
	float: right;
}

.ui-item .ui-arrow-right.dark-arrow {
	background-image: url('../assets/arrow_right_black.png');
	opacity: 0.2;
}

.ui-segmented-control {
    background: #FFFFFF;
    color: #FFF;
    
	border-radius: 3px;
	
    padding: 1px;
    height: 32px;
}

.ui-segmented-control .ui-segmented-control-item {
    width: 48px;
    height: 32px;
	
    background: #FFFFFF;
    display: inline-block;
	
	
    margin-left: 1px;
}

.ui-segmented-control .ui-segmented-control-item.active {
    background: #39ECDE;
}

.ui-segmented-control .ui-segmented-control-item:first-child {
	margin-left: 0;
}



/* –––––––– the georgeous tab view –––––––– */

#the-tabbar {
	position: fixed;
	
	width: 100%;
	height: 61px;
	
	bottom: 0;
	z-index: 1005;
	
	background: #FDFDFD;
	border-top: 1px solid #EDEDED;
}

#the-tabbar .tabbar-content {
	text-align: center;
	align-items: center;
}

#the-tabbar .tab-button {
	width: 24px;
	height: 61px;
	
	padding: 0 25px;
	display: inline-block;
}

#the-tabbar div.tab-button {
	background: transparent url('../assets/tabs.png') center center no-repeat;
	background-size: 259px 124px;

	width: 60px;
	height: 44px;

	padding: 0;
	margin: 8px 5px;
}

#the-tabbar div.tab-button-vocabulary { background-position: 7px 0; }
#the-tabbar div.tab-button-settings { background-position: -212px 0; }
#the-tabbar div.tab-button-papers { background-position: -142px 0; }
#the-tabbar div.tab-button-formulas { background-position: -68px 0; }

#the-tabbar div.tab-button-vocabulary.selected { background-position: 7px -71px; }
#the-tabbar div.tab-button-settings.selected { background-position: -212px -71px; }
#the-tabbar div.tab-button-papers.selected { background-position: -142px -71px; }
#the-tabbar div.tab-button-formulas.selected { background-position: -68px -72px; }

@media screen and (min-width: 340px) { #the-tabbar div.tab-button { margin: 8px 10px; } }
@media screen and (min-width: 440px) { #the-tabbar div.tab-button { margin: 8px 12px; } }
@media screen and (min-width: 520px) { #the-tabbar div.tab-button { margin: 8px 15px; }	}

.ding-notification {
	position: fixed;

	top: -100px;
	left: 0;

	width: 100%;
	height: 80px;

	background-color: rgba(0, 0, 0, 0.66);
	box-shadow: 0 2px 5px rgba(0,0,0,0.25);

	color: #FFF;
	z-index: 100000;

	-webkit-transition: 0.5s top cubic-bezier(0.73, 0.04, 0.16, 0.97);
	-moz-transition: 0.5s top cubic-bezier(0.73, 0.04, 0.16, 0.97);
	-ms-transition: 0.5s top cubic-bezier(0.73, 0.04, 0.16, 0.97);
	-o-transition: 0.5s top cubic-bezier(0.73, 0.04, 0.16, 0.97);
	transition: 0.5s top cubic-bezier(0.73, 0.04, 0.16, 0.97);
	
	-webkit-backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px) brightness(120%);
	backdrop-filter: blur(10px);
}

.ding-notification.shown { top: 0; }
.ding-notification .content b, .ding-notification .content span { display: block; }

.ding-notification .content {
	padding: 24px 14px;
	line-height: 21px;
	padding-bottom: 14px;
}

.ding-notification .close {
	width: 18px;
	height: 18px;

	background: transparent url('../assets/closer_thingy.png') no-repeat center center;
	background-size: 18px 18px;

	position: fixed;

	right: 20px;
	margin-top: 38px;

	cursor: pointer;
}


body.header-tinybar .ding-notification {
	height: 66px;
}

.ding-notification .content .icon {
	width: 16px;
	height: 16px;
	
	background: #FFF;
	position: absolute;
	
	margin-top: 3px;   
	border-radius: 4px;
}

.ding-notification .content .icon + b,
.ding-notification .content .icon + b + span {
	padding-left: 25px;
}

.ding-notification .content span { color: rgba(255, 255, 255, 0.8); }
.sh-fader{z-index:99998;position:fixed;left:0;top:0;width:100%;height:100%;background:#ddd;background:rgba(25,25,25,0.5)}.sh-fader + .sh-alert + .sh-fader,.sh-popover + .sh-fader,.sh-select-menu-open + .sh-fader{background:rgba(25,25,25,0.001)}.sh-close-button{color:#555;display:block;cursor:pointer;text-align:right;font-size:26px;margin-top:30px;padding-right:15px;margin-bottom:-7px;font-weight:700}@-moz-keyframes sh-dialog-animation{0%{opacity:0;-moz-transform:scale(0.25,0.25);transform:scale(0.25,0.25)}65%{opacity:1;-moz-transform:scale(1.02,1.02);transform:scale(1.02,1.02)}100%{opacity:1;-moz-transform:scale(1,1);transform:scale(1,1)}}@keyframes sh-dialog-animation{0%{opacity:0;transform:scale(0.25,0.25)}65%{opacity:1;transform:scale(1.02,1.02)}100%{opacity:1;transform:scale(1,1)}}@-webkit-keyframes sh-dialog-animation{0%{opacity:0;-webkit-transform:scale3d(0.25,0.25,1);transform:scale3d(0.25,0.25,1)}65%{opacity:1;-webkit-transform:scale3d(1.02,1.02,1);transform:scale3d(1.02,1.02,1)}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}@-moz-keyframes sh-popover-animation{0%{opacity:0;-moz-transform:scale(0.25,0.25);transform:scale(0.25,0.25);margin-top:-6%}65%{opacity:1;-moz-transform:scale(1.02,1.02);transform:scale(1.02,1.02);margin-top:.2%}100%{opacity:1;-moz-transform:scale(1,1);transform:scale(1,1);margin-top:0}}@keyframes sh-popover-animation{0%{opacity:0;transform:scale(0.25,0.25);margin-top:-6%}65%{opacity:1;transform:scale(1.02,1.02);margin-top:.2%}100%{opacity:1;transform:scale(1,1);margin-top:0}}@-webkit-keyframes sh-popover-animation{0%{opacity:0;-webkit-transform:scale3d(0.25,0.25,1);transform:scale3d(0.25,0.25,1);margin-top:-6%}65%{opacity:1;-webkit-transform:scale3d(1.02,1.02,1);transform:scale3d(1.02,1.02,1);margin-top:.2%}100%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);margin-top:0}}@keyframes sh-fadein-animation{0%{opacity:0}100%{opacity:1}}@-moz-keyframes sh-fadein-animation{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes sh-fadein-animation{0%{opacity:0}100%{opacity:1}}.sh-pop-animation,.sh-alert{-webkit-animation-duration:450ms;-webkit-animation-name:sh-dialog-animation;-webkit-animation-timing-function:ease-in-out;-moz-animation-duration:450ms;-moz-animation-name:sh-dialog-animation;-moz-animation-timing-function:ease-in-out;animation-duration:450ms;animation-name:sh-dialog-animation;animation-timing-function:ease-in-out}.sh-popover{-webkit-animation-duration:450ms;-webkit-animation-name:sh-popover-animation;-webkit-animation-timing-function:ease-in-out;-moz-animation-duration:450ms;-moz-animation-name:sh-popover-animation;-moz-animation-timing-function:ease-in-out;animation-duration:450ms;animation-name:sh-popover-animation;animation-timing-function:ease-in-out}.sh-fadein,.sh-fader{-webkit-animation-duration:250ms;-webkit-animation-name:sh-fadein-animation;-webkit-animation-timing-function:ease-in-out;-moz-animation-duration:250ms;-moz-animation-name:sh-fadein-animation;-moz-animation-timing-function:ease-in-out;animation-duration:250ms;animation-name:sh-fadein-animation;animation-timing-function:ease-in-out}.sh-popover .sh-arrow{background:transparent url(../sapphire/sh-assets/popover-arrow@2x.png) top left no-repeat;background-size:45px 26px;width:45px;opacity:1;height:26px;margin-top:-25px;background-size:32px 19px;width:32px;height:20px;margin-top:-18px}.sh-popover{border-radius:4px;background:#FFF;background:rgba(255,255,255,1);-moz-box-shadow:0 0 6px 0 rgba(0,0,0,0.16);box-shadow:0 0 6px 0 rgba(0,0,0,0.16);z-index:99999}.sh-popovercontent{padding:17px 22px}

.ding-notification .notification-actions {
	border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.ding-notification .notification-actions[data-count="2"] .notification-action {
	width: 50%;
	width: calc(50% - 10px);
	display: inline-block;
}

.ding-notification .notification-actions .notification-action {
	background: rgba(255, 255, 255, 0.8);
	border-radius: 4px;
	margin: 8px 4px;
	padding: 7px 0;
	text-align: center;
	color: #000;
	cursor: default;
}

.ding-notification.has-actions { height: 126px; }
body.header-tinybar .ding-notification.has-actions { height: 112px; }

.ding-notification .notification-actions[data-count="1"] .notification-action {
	width: calc(100% - 14px);
	margin-left: 6px;
}
.ding-notification.has-actions:not(.shown) { top: -130px; }
body:not(.header-tinybar) .ding-notification.has-actions .content { padding-bottom: 10px; }

#wrapper .ding-notification { height: auto !important; }
body:not(.header-tinybar) .ding-notification.has-actions:not(.shown) { top: -155px; }

body.header-tinybar .ding-notification .content { padding-top: 12px; }
body.header-tinybar .ding-notification .close { margin-top: 26px; }

.ding-notification .content .icon[data-icon="update"] {
	
	background: transparent url('../assets/aux_yaay.png') no-repeat -273px -355px;
	background-size: 292px 512px;
}


.auxorel-add-to-homescreen .arrow {
	background-image: url('../sapphire/sh-assets/popover-arrow-round.png');
	background-size: 31px 12px;
	height: 12px;
	width: 32px;
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
	margin-left: 104px;
}

.auxorel-add-to-homescreen {
	position: fixed;
	bottom: 22px;
	margin-left: -125px;
	left: 50%;
	width: 250px;
	height: 165px;
	background: #FFF;
	border-radius: 10px;
	z-index: 10002;
	box-shadow: 0 18px 15px rgba(0, 0, 0, 0.12);
}

.auxorel-add-to-homescreen .content {
	height: 165px;
	background: transparent url('../assets/aux_addwebapp.png') no-repeat center 50px;
	background-size: 224px 94px;
}

.auxorel-add-to-homescreen .icon {
	width: 64px;
	height: 64px;
	background: transparent url('../assets/auxorel_logo.png') no-repeat center center;
	background-size: 64px 64px;
	border-radius: 18px;
	margin-top: -32px;
	margin-bottom: -32px;
	margin-left: 93px;
	box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.auxorel-add-to-homescreen .content .close {
	width: 50px;
	height: 50px;
	background: transparent url('../assets/closer_thingy_dark.png') no-repeat center center;
	background-size: 14px 14px;
	cursor: pointer;
	float: right;
}


/*
	settings screen
*/

body[data-active-tab="settings-content"] { background: #302F35; color: #FFF; }
body[data-active-tab="settings-content"] header#the-header {
	color: #FFF;
	background: #26252A;
	border-bottom: 1px solid #44414C;
}

#the-header .header-settings .view-title,
#the-header .header-settings .settings-back-btn {
	font-family: 'Avenir Next', 'Helvetica Neue', 'Segoe UI', sans-serif;
	font-weight: 500;
	letter-spacing: -0.5px;
}

body[data-active-tab="settings-content"] div#the-tabbar {
	background-color: #26252A;
	border-top: 1px solid #44414C;
}

body:not(.header-tinybar) #the-header .header-settings .view-title { padding-top: 12px; }
body[data-active-tab="settings-content"]:not(.header-tinybar) #the-header { height: 60px; }

body.header-tinybar #the-header .header-settings .settings-back-btn { margin-top: 9px; }
body.header-tinybar #the-header .header-settings .view-title { line-height: 55px; }

body.header-tinybar[data-active-tab="settings-content"] .settings-wrapper,
body[data-active-tab="papers-content"] .papers-wrapper,
body[data-active-tab="vocabulary-content"] .vocabulary-wrapper,
body[data-active-tab="formulas-content"] .formulas-wrapper { padding-top: 50px; }

body:not(.header-tinybar)[data-active-tab="settings-content"] .settings-wrapper { padding-top: 61px; }

.settings-wrapper .ui-group.main-settings { margin-top: 30px; 6}
.settings-wrapper .ui-list > .ui-item {
	background: #283437;
	color: #F9F8FD;
	margin-bottom: 1px;
	background: #3D3B43 url('../assets/aux_yaay.png') no-repeat -397px -166px;
	background-size: 446px 781px;
	padding-left: 58px;
	margin-bottom: 0;
	font-family: 'Avenir Next', 'Helvetica Neue', 'Segoe UI', sans-serif;
	font-weight: 500;
	letter-spacing: -0.5px;
	font-size: 15px;
	border-bottom: 1px solid #4B4854;
}

.settings-wrapper .ui-group .ui-list > .ui-item[data-action="about-auxorel"] { background-position: -397px -285px; }
.settings-wrapper .ui-group .ui-list > .ui-item:first-child { border-top: 1px solid #4B4854; }

.settings-wrapper .ui-group .ui-list > .ui-item.ui-touchable:active,
.settings-wrapper .ui-list > .ui-item.ui-touchable:active { background-color: #333138; }

.settings-push-view-active .header-settings .settings-back-btn,
.vocabulary-push-view-active .header-vocabulary .vocabulary-back-button,
.vocabulary-push-view-active .header-vocabulary .view-title2,
.formulas-push-view-active .header-formulas .formulas-back-button,
.formulas-push-view-active .header-formulas .view-title2 {
	opacity: 1;
	pointer-events: all;
	
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	-o-transform: translateX(0);
	transform: translateX(0);
}

.header-vocabulary .view-title2,
.header-formulas .view-title2 { opacity: 0; pointer-events: none; }

#wrapper.vocabulary-push-view-active .header-vocabulary .view-title2,
#wrapper.formulas-push-view-active .header-formulas .view-title2 { pointer-events: none; }

.header-settings .settings-back-btn,
.header-vocabulary .vocabulary-back-button,
.header-formulas .formulas-back-button {
	padding: 7px 14px;
	padding-left: 30px;
	padding-bottom: 13px;
	
	font-size: 16px;
	margin-top: 5px;
	
	background: transparent url('../assets/back_arrows.png') no-repeat 14px -102px;
	background-size: 14px 132px;
	
	opacity: 0;
	cursor: default;
	
	display: inline-block;
	pointer-events: none;
}

.header-settings .settings-back-btn,
.header-vocabulary .vocabulary-back-button,
.header-vocabulary .view-title2,
.header-formulas .formulas-back-button,
.header-formulas .view-title2 {
	-webkit-transform: translateX(95px);
	-moz-transform: translateX(95px);
	-ms-transform: translateX(95px);
	-o-transform: translateX(95px);
	transform: translateX(95px);
}

body:not(.header-tinybar) #the-header .header-settings .settings-back-btn { margin-top: 21px; }

.header-settings .view-title,
.header-settings .settings-back-btn,
.header-vocabulary .vocabulary-back-button,
.header-vocabulary .view-title2,
.header-formulas .formulas-back-button,
.header-formulas .view-title2 {
	
	-webkit-transition: .6s all cubic-bezier(.1,.7,.1,1);
	-moz-transition: .6s all cubic-bezier(.1,.7,.1,1);
	-ms-transition: .6s all cubic-bezier(.1,.7,.1,1);
	-o-transition: .6s all cubic-bezier(.1,.7,.1,1);
	transition: .6s all cubic-bezier(.1,.7,.1,1);
}

.settings-push-view-active .header-settings .view-title,
.vocabulary-push-view-active .header-vocabulary .view-title ,
.formulas-push-view-active .header-formulas .view-title {
	-webkit-transform: translateX(-95px);
	-moz-transform: translateX(-95px);
	-ms-transform: translateX(-95px);
	-o-transform: translateX(-95px);

	transform: translateX(-95px);
	opacity: 0;
}


.settings-wrapper .info-inner .info-title {
	background-color: #FFDA29;
	background-image: linear-gradient(-180deg, #FFDB28 0%, #FFC355 100%);
	height: 150px;
	text-align: center;
	font-size: 50px;
	font-weight: 200;
	font-family: 'HelveticaNeue-Thin', 'Hevetica Neue', 'Segoe UI', sans-serif;
	line-height: 140px;
	cursor: default;
	vertical-align: middle;
	box-shadow: 0 1px 28px rgba(255, 196, 83, 0.7);
}

.settings-wrapper .info-inner .info-version {
	text-align: center;
	padding-top: 25px;
}

.settings-wrapper .info-inner .info-madeby {
	text-align: center;
	margin-top: 20px;
	
	color: #FF437B;
}

.settings-wrapper .info-inner .info-madeby b {
	display: block;
	font-family: 'HelveticaNeue-Medium', 'Helvetica Neue', 'Segoe UI', sans-serif;
	font-weight: 500;
}

.info-inner .info-madeby {
	color: #FFF !important;
}

.info-inner .info-actions .ui-list > .ui-item[data-action="reset-cache"] {
	color: #FFF;
	margin-top: 10px;
	line-height: 18px;
	padding-top: 12px;
	border-top: 1px solid #4B4854;
}

#ui-sheet-reset-orel p,
#ui-sheet-really-reset-orel p {
	padding: 15px;
}
#ui-sheet-reset-orel .cancel-button,
#ui-sheet-really-reset-orel .cancel-button {
	color: #007AFF;
	font-weight: 500;
}

#ui-sheet-reset-orel .confirm-button,
#ui-sheet-really-reset-orel .confirm-button {
	color: red;
	font-weight: normal;
}

#ui-sheet-reset-orel .sheet-title,
#ui-sheet-really-reset-orel .sheet-title {
	margin-left: -12px;
}

.info-thanksto table {
	width: 85%;
	margin: 0 auto;
	margin-top: 24px;
}

.info-thanksto table td:first-child {
	font-weight: bold;
}

.info-thanksto td {
	padding-bottom: 12px;
	vertical-align: top;
}

.settings-wrapper .info-inner .info-madeby {
	padding-bottom: 85px;
}

.info-inner .info-cookies {
	width: 83%;
	margin: 0 auto;
	margin-top: 20px;
	border-top: 1px solid #FFF;
	border-bottom: 1px solid #FFF;
	padding: 13px 0;
	font-size: 14px;
	text-align: center;
}

body[data-active-tab="settings-content"] .settings-push-view-about header#the-header {
	background-color: #E0BB00;
	border-bottom: 1px solid #E0BB00;
}

.info-inner .info-actions .ui-list > .ui-item {
	height: 48px;
	background-image: none;
	text-align: center;
	font-family: 'Helvetica Neue', sans-serif;
	font-size: 16px;
	font-weight: normal;
	letter-spacing: 0;
	padding-left: 0;
	line-height: 46px;
	color: #FF5641;
}

.ui-list .ui-item span.subtitle {
	font-size: 13px;
	display: block;
	color: #9793A2;
}


.ui-sheet {
	position: fixed;
	z-index: 1111;
	
	left: 0;
	top: 101%;
	
	height: 100%;
	width: 100%;
	
	background: #F7F7F8;
	color: #000;
	
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	
	-webkit-transition: 0.5s -webkit-transform cubic-bezier(0.18, 0.66, 0.22, 1);
	-moz-transition: 0.5s -moz-transform cubic-bezier(0.18, 0.66, 0.22, 1);
	-ms-transition: 0.5s -ms-transform cubic-bezier(0.18, 0.66, 0.22, 1);
	-o-transition: 0.5s -o-transform cubic-bezier(0.18, 0.66, 0.22, 1);
	transition: 0.5s all cubic-bezier(0.18, 0.66, 0.22, 1);
}

.ui-sheet-header {
	border-bottom: 1px solid #E5E5E5;
	background: #FFF;
    
	text-align: center;
    font-weight: 500;
	
	padding: 12px 0;
	padding-top: 14px;
	
	cursor: default;
}


.ui-sheet-header .cancel-button {
    color: #007AFF;
	
	padding: 10px 12px;
	top: 4px;
    
	font-size: 16px;
	
    font-weight: normal;
    position: fixed;
}

.ui-sheet-header .confirm-button {
    color: #007AFF;
	
	padding: 10px 12px;
	top: 4px;
    
	font-size: 16px;
	padding-right: 13px;
	
    position: fixed;
    font-weight: 500;
	
    right: 0px;
}

body.sf-font .ui-sheet-header .confirm-button,
body.sf-font .ui-sheet-header .sheet-title { font-weight: 600; }

.ui-sheet-header .cancel-button:active,
.ui-sheet-header .confirm-button:active {
	color: #0F447E;
	color: #990034;
}

.ui-sheet-header .sheet-title {
	pointer-events: none;
}


@media screen and (min-width: 650px) {
	
	#wrapper .settings-wrapper .settings-inner {
		width: 40%;
		float: left;
		display: block !important;
		background: #302F35;
		border-right: 1px solid #45434C;
	}
	
	body[data-active-tab="settings-content"] .settings-push-view-about header#the-header {
		background: #26252A;
		border-bottom: 1px solid #44414C;
	}
	
	.settings-wrapper .support-inner,
	.settings-wrapper .info-inner,
	.settings-wrapper .learn-options-inner {
		width: 59%;
		width: calc(60% - 16px);
		float: right;
	}
	
	#the-header .header-settings .settings-back-btn {
		margin-left: 40%;
		border-left: 1px solid #4B4854;
	}
	
	.settings-wrapper .info-inner { width: calc(60% - 1px); }
	.settings-wrapper > div {
		height: 100%;
		overflow: scroll;
	}
	
}

@media screen and (min-width: 950px) {
	
	#wrapper .settings-wrapper .settings-inner {
		width: 30%;
	}
	
	.settings-wrapper .support-inner,
	.settings-wrapper .info-inner,
	.settings-wrapper .learn-options-inner {
		width: 69%;
		width: calc(70% - 16px);
	}

	.settings-wrapper .info-inner { width: calc(70% - 1px); }
	#the-header .header-settings .settings-back-btn { margin-left: 30%; }
	
}



/*		the actual vocabulary tab		*/

.header-vocabulary .vocabulary-edit-button,
.header-vocabulary .vocabulary-add-button,
.header-formulas .formulas-add-button {
	color: #FFA500;
	font-size: 16px;
	
	position: fixed;
	
	top: 7px;
	padding: 10px;
	
	cursor: default;
	opacity: 1;
	
	-webkit-transition: 0.25s opacity cubic-bezier(0.18, 0.66, 0.22, 1);
	-moz-transition: 0.25s opacity cubic-bezier(0.18, 0.66, 0.22, 1);
	-ms-transition: 0.25s opacity cubic-bezier(0.18, 0.66, 0.22, 1);
	-o-transition: 0.25s opacity cubic-bezier(0.18, 0.66, 0.22, 1);
	transition: 0.25s opacity cubic-bezier(0.18, 0.66, 0.22, 1);
}

.header-vocabulary .vocabulary-add-button,
.header-formulas .formulas-add-button {
	right: 2px;
	font-size: 28px;
	top: 4px;
	line-height: 20px;
	padding-bottom: 16px;
}

.ui-group .ui-list > .ui-item:first-child { border-top: 1px solid #EAEAEA; }

span.ui-label.ui-list-label.ui-bold.ui-list-descriptive-label {
	color: #D2D2D2;
	font-size: 12px;
	padding-top: 12px;
	padding-bottom: 0;
	text-transform: uppercase;
}

.ui-group .ui-list-label {
	padding: 8px 16px;
	padding-top: 0;
	font-size: 16px;
	display: block;
}

.ui-group .ui-item.ui-touchable:active { background-color: #F1F1F1; }

#ui-sheet-vocabulary-add-list .cancel-button,
#ui-sheet-vocabulary-add-list .confirm-button,
#ui-sheet-vocabulary-add-word .cancel-button,
#ui-sheet-vocabulary-add-word .confirm-button,
#ui-sheet-vocabulary-edit-list .cancel-button,
#ui-sheet-vocabulary-edit-list .confirm-button,
#ui-sheet-vocabulary-learn .cancel-button,
#ui-sheet-vocabulary-learn .confirm-button,
#ui-sheet-vocabulary-learn-results .confirm-button {
	color: #FFA500;
}

.vocabulary-add-list-inner,
.vocabulary-add-word-inner,
.vocabulary-edit-list-inner {
	padding-top: 40px;
	padding-bottom: 30px;
}

.vocabulary-add-list-title,
.vocabulary-add-list-subject,
.vocabulary-add-list-description,
.vocabulary-edit-list-title,
.vocabulary-edit-list-subject,
.vocabulary-edit-list-description,
.vocabulary-add-word-title,
.vocabulary-add-word-translation,
.vocabulary-add-word-forms,
.vocabulary-delete-word-button {
	background: #FFF;
	border-top: 1px solid #EFEFEF;
	border-bottom: 1px solid #EFEFEF;
	padding: 14px 12px;
	margin-bottom: 22px;
}

.vocabulary-add-list-title input,
.vocabulary-add-word-title input,
.vocabulary-edit-list-title input {
	background: #FFF;
	border: none;
	outline: none;
	width: 100%;
	height: 30px;
	font-size: 23px;
	font-weight: 300;
}

.vocabulary-add-list-subject,
.vocabulary-edit-list-subject {
	margin-bottom: 0;
	border-bottom: none;
	padding: 12px 14px;
	margin-top: 36px;
}

.vocabulary-add-word-title {
	margin-bottom: 0px;
	border-bottom: 0;
}

.vocabulary-add-list-subject select,
.vocabulary-add-list-description textarea,
.vocabulary-edit-list-subject select,
.vocabulary-edit-list-description textarea,
.vocabulary-add-word-translation input,
.vocabulary-add-word-forms input {
	background: #FFF;
	
	border: none;
	outline: none;
	
	width: 100%;
	font-size: 16px;
	
	-webkit-appearance: none;
	-moz-appearance: none;
	-o-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

.vocabulary-add-list-description textarea,
.vocabulary-edit-list-description textarea {
	resize: none;
	height: 120px;
}

.vocabulary-inner .no-vocabulary-main-lists,
.vocabulary-detail-inner .no-vocabulary-words,
.formulas-inner .no-formulas-main-lists,
.formulas-category-inner .no-formulas-items {
	text-align: center;
	font-size: 15px;
	padding-top: 75px;
	color: #969696;
	cursor: default;
}

.vocabulary-inner .no-vocabulary-main-lists span,
.vocabulary-detail-inner .no-vocabulary-words span,
.formulas-inner .no-formulas-main-lists span,
.formulas-category-inner .no-formulas-items span {
	font-size: 22px;
	cursor: default;
	
	padding: 0 4px;
	color: #A7A7A7;
}

.header-vocabulary .vocabulary-back-button,
.header-formulas .formulas-back-button {
	color: #FFA500;
	margin-top: 10px;
	
	background-position: 14px 6px;
}

.vocabulary-push-view-active .header-vocabulary .vocabulary-edit-button { opacity: 0; pointer-events: none; }
.header-vocabulary .vocabulary-back-button:active { color: #b77700; }

.formulas-push-view-active .header-formulas .formulas-edit-button { opacity: 0; pointer-events: none; }
.header-formulas .formulas-back-button:active { color: #009517; }

.vocabulary-words-list .ui-item span,
.vocabulary-learn-results-mistakes .ui-item span {
	font-size: 20px;
	display: block;
}

.vocabulary-words-list .ui-item span.translation,
.vocabulary-words-list .ui-item span.forms,
.vocabulary-learn-results-mistakes .ui-item span.translation,
.vocabulary-learn-results-mistakes .ui-item span.forms {
	font-size: 16px;
	display: block;
	color: #FFA501;
	padding-top: 2px;
}

.vocabulary-words-list .ui-item span.forms,
.vocabulary-learn-results-mistakes .ui-item span.forms {
	color: #A9A9A9;
	font-size: 14px;
}

.vocabulary-learn-results-mistakes .ui-item span.translation, .vocabulary-learn-results-mistakes .ui-item span.forms { color: #9999A5; }

.vocabulary-words-list .ui-item .ui-arrow-right { margin-top: -32px; }
.vocabulary-words-list .ui-item span.forms + .ui-arrow-right { margin-top: -42px; }

.ui-group.vocabulary-words-list, .ui-group.vocabulary-main-list,
.ui-group.formulas-inner-list, .ui-group.formulas-main-list { padding-bottom: 60px; }

body:not(.header-tinybar) .ui-group.vocabulary-words-list, .ui-group.vocabulary-main-list,
body:not(.header-tinybar) .ui-group.formulas-inner-list, .ui-group.formulas-main-list { padding-bottom: 100px; }


.vocabulary-detail-inner .vocabulary-detail-information {
	text-align: center;
	padding-top: 30px;
	padding-bottom: 10px;
}

.vocabulary-detail-inner .vocabulary-detail-information .vocabulary-detail-title {
	font-size: 24px;
	font-weight: 500;
	
	padding: 0 20px;
	padding-bottom: 10px;
}

.vocabulary-detail-inner .vocabulary-detail-information .vocabulary-detail-subtitle {
	font-size: 15px;
	color: #393948;
	
	padding: 0 20px;
	padding-bottom: 20px;
}

.vocabulary-detail-inner .vocabulary-detail-information .vocabulary-detail-learn-button,
.vocabulary-detail-inner .vocabulary-detail-information .vocabulary-detail-edit-button {
	color: #FFA500;
	border: 1px solid #FFA500;
	display: inline-block;
	padding: 5px 12px;
	border-radius: 3px;
	cursor: default;
}

.vocabulary-detail-inner .vocabulary-detail-information .vocabulary-detail-learn-button:active,
.vocabulary-detail-inner .vocabulary-detail-information .vocabulary-detail-edit-button:active {
	background: #FFA500;
	color: #F7F7F8;
}

.vocabulary-detail-inner .vocabulary-detail-information .vocabulary-detail-edit-button {
	margin-right: 5px;
	font-weight: normal;
}

.vocabulary-delete-word-button {
	text-align: center;
	color: #FF3A3A;
	
	margin-top: 40px;
}

.vocabulary-delete-word-button:active { background: #F1F1F1; }

#ui-sheet-vocabulary-learn .vocabulary-learn-progress {
	position: fixed;
	height: 2px;
	background: #FFAF1D;
	width: 0;
	margin-top: -27px;
}



#ui-sheet-vocabulary-learn .vocabulary-learn-card {
	
	background: #FFF;
	margin: 25px 20px;
	box-shadow: 0 8px 20px rgba(0,0,0,0.05);
	border-radius: 3px;
	padding-bottom: 30px;
	
}


#ui-sheet-vocabulary-learn .vocabulary-learn-card,
#ui-sheet-vocabulary-learn .vocabulary-learn-card .vocabulary-learn-card-forms,
#ui-sheet-vocabulary-learn .vocabulary-learn-card .vocabulary-learn-card-abfrage {
	
	-webkit-transition: 0.25s background, 0.25s border-color;
	-moz-transition: 0.25s background, 0.25s border-color;
	-ms-transition: 0.25s background, 0.25s border-color;
	-o-transition: 0.25s background, 0.25s border-color;
	transition: 0.25s background, 0.25s border-color;
}

#ui-sheet-vocabulary-learn .vocabulary-learn-card.correct,
#ui-sheet-vocabulary-learn .vocabulary-learn-card .vocabulary-learn-card-forms.correct,
#ui-sheet-vocabulary-learn .vocabulary-learn-card .vocabulary-learn-card-abfrage.correct { background: #58FF97; border-color: #58FF97; }

#ui-sheet-vocabulary-learn .vocabulary-learn-card.wrong,
#ui-sheet-vocabulary-learn .vocabulary-learn-card .vocabulary-learn-card-forms.wrong,
#ui-sheet-vocabulary-learn .vocabulary-learn-card .vocabulary-learn-card-abfrage.wrong { background: #FF8A81; border-color: #FF8A81; }

#ui-sheet-vocabulary-learn .vocabulary-learn-card .vocabulary-learn-card-word {
	font-size: 36px;
	font-weight: 300;
	text-align: center;
	padding: 44px 12px;
}

#ui-sheet-vocabulary-learn .vocabulary-learn-card .vocabulary-learn-card-abfrage input,
#ui-sheet-vocabulary-learn .vocabulary-learn-card .vocabulary-learn-card-forms input {
	border: none;
	outline: none;
	width: 100%;
	font-size: 16px;
	height: 36px;
	line-height: 36px;
	background: transparent;
}

#ui-sheet-vocabulary-learn .vocabulary-learn-card .vocabulary-learn-card-abfrage { border-top: 1px solid #F5F5F5; }

#ui-sheet-vocabulary-learn .vocabulary-learn-card .vocabulary-learn-card-abfrage,
#ui-sheet-vocabulary-learn .vocabulary-learn-card .vocabulary-learn-card-forms {
	padding: 4px 12px;
	border-bottom: 1px solid #F5F5F5;
}

.settings-wrapper .ui-switch:not(.ui-on) { background: #58565D; }
.settings-wrapper .learn-options-inner .ui-list > .ui-item .ui-switch.ui-on { background: #75DDC8; }

@media screen and (max-width: 335px) {
	.settings-wrapper .learn-options-group .ui-list > .ui-item {
		background-image: none;
		padding-left: 15px;
	}
}


.ding-notification span small.update-detail {
	font-size: 13px;
	line-height: 15px;
	display: block;
	padding-top: 7px;
	margin-top: 10px;
	padding-left: 1px;
	border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.vocabulary-learn-results-progress {
	padding: 0 15px;
	margin-top: 20px;
}

.vocabulary-learn-results-progress-bar {
	background: #E1E1E2;
	height: 2px;
	margin-bottom: 8px;
}

.vocabulary-learn-results-progress-bar-inner {
	width: 0%;
	height: 2px;
	
	background: #FFA707;
	
	-webkit-transition: 1.5s width;
	-moz-transition: 1.5s width;
	-ms-transition: 1.5s width;
	-o-transition: 1.5s width;
	transition: 1.5s width;
}

.vocabulary-learn-results-progress-text span {
	font-size: 34px;
	padding-right: 10px;
	color: #82828E;
}

.vocabulary-learn-results-progress-text {
	color: #B0B0BF;
}

.vocabulary-learn-results-mistakes .ui-item span b {
	font-weight: normal;
	color: #FFA501;
	text-decoration: line-through;
	padding-right: 5px;
}

.ui-item.no-mistakes {
	text-align: center;
	padding: 20px 16px;
}

.ui-item.no-mistakes span.subtitle {
	padding-top: 4px;
}

body:not(.header-tinybar) .ui-sheet-header {
	padding-top: 17px;
	padding-bottom: 11px;
}

body:not(.header-tinybar) .ui-sheet-header .confirm-button,
body:not(.header-tinybar) .ui-sheet-header .cancel-button {
	padding-top: 13px;
	padding-bottom: 11px;
}


/*	the actual formulas tab	 */

.header-formulas .formulas-add-button,
.header-formulas .formulas-back-button { color: #39E25A; }

.header-formulas .formulas-back-button { background-position: 14px -31px; }

.formulas-main-list .ui-item .icon {
	width: 28px;
	height: 24px;

	float: left;
	margin-right: 8px;

	background: transparent url('../assets/formulas.png') no-repeat -1px 0;
	background-size: 65px 194px;
}

.formulas-main-list .ui-item[data-category="economy"] .icon { background-position: -1px -31px; }
.formulas-main-list .ui-item[data-category="physics"] .icon { background-position: -1px -61px; }
.formulas-main-list .ui-item[data-category="chemistry"] .icon { background-position: 0px -88px; }
.formulas-main-list .ui-item[data-category="algebra"] .icon { background-position: -1px -115px; }
.formulas-main-list .ui-item[data-category="probability"] .icon { background-position: -1px -143px; }
.formulas-main-list .ui-item[data-category="other"] .icon { background-position: -1px -169px; }