html {
	font-size: 16px;
}

html * {
	box-sizing: border-box;
}
body {
	/* background: #f7f7f7; */
	overflow-y: hidden;
}
.calc-main {
	position: absolute;
}
.calc-small {
	margin-left: -8.125rem;
}

/* ------- calculator housing ------- */

.calc-main {
	display: block;
	/* width: 30rem; */ /* only needed in Chrome extension */
	width: 700px;
	max-width: 100%;
	padding: 1rem 0.625rem 1.125rem;
	font-family: 'Noto Sans', sans-serif;
	top: 0;
	left: 0;
	/*border-radius: 0.75rem;*/
	/*box-shadow:
		inset  0rem -2.375rem 0.3125rem rgba(  0,   0,   0, 0.8),
		inset  0rem   0.375rem 0.25rem rgba(255, 255, 255, 0.25),
		inset  0rem   0.125rem 0.0625rem rgba(255, 255, 255, 0.25),
		inset  0.1875rem   0rem 0.1875rem rgba(255, 255, 255, 0.25),
		inset -0.25rem   0rem 0.25rem rgba(  0,   0,   0, 0.75);*/
	background: white;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#141414', endColorstr='#282828',GradientType=0 ); /* IE6-9 */
}
.calc-main:after {
	content: "";
	display: block;
	clear: both;
}

.basic-calculator {
	width: 374px;
	max-width: 100%;
}

.basic-calculator .calc-right {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}

.basic-calculator .calc-right > div {
	width: calc(25% - 0.625rem);
}

.basic-calculator .calc-right .calc-zero {
	width: calc(50% - 0.625rem);
}

.basic-calculator .calc-right .calc-eq {
	left: 75%;
}

.calc-small {
	/* width: 15rem; */ /* only needed in Chrome extension */
}

/* --------- display --------- */

.calc-display {
	position: relative;
	height: 4.6875rem;
	margin: 0 0.3125rem 0.375rem 0.3125rem;
	padding: 0 1rem;
	border-radius: 0.3125rem;
	border: 0.0625rem solid #e6e6e6;
	/*box-shadow:
		inset 0 1.875rem 0.0625rem rgba(255, 255, 255, 0.25),
		inset 0 -0.0625rem 0.125rem rgba(255, 255, 255, 0.5),
		inset 0  0.125rem 0.1875rem rgba(  0,   0,   0, 0.40);*/
	/*font-size: 2.8125rem;
	line-height: 3.8125rem;*/
	font-size: 3rem;
	line-height: 4.6875rem;
	text-align: right;
	white-space: nowrap;
	color: #333;
	cursor: default;
	text-shadow: 0 -0.0625rem 0 rgba(0, 0, 0, 0.01); /* for nicer/smoother rendering */
	background: white;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edefe0', endColorstr='#babea2',GradientType=0 ); /* IE6-9 */
}
.calc-rad {
	position: absolute;
	bottom: 0.125rem;
	font-size: 1.25rem;
	line-height: 1.25rem;
	left: 0.6875rem;
}
.calc-small .calc-rad {
	display: none;
}
.calc-hold {
	position: absolute;
	right: 0.3125rem;
	bottom: 0.0625rem;
	font-size: 0.5rem;
	line-height: 0.8125rem;
	color: #666;
	height: 0.75rem;
}

/* ----- display helper buttons ----- */

.calc-buttons {
	position: absolute;
	top: 0.125rem;
	left: 0.125rem;
	opacity: .35;
	height: 0.875rem;
	width: 0.875rem;
	transition:
			opacity 0.15s ease-in;
}
.calc-buttons:hover {
	opacity: 0.75;
	height: 100%;
	width: 1.0625rem;
}
.calc-buttons div {
	position: absolute;
	top: 0.0625rem;
	height: 0.6875rem;
	width: 0.6875rem;
	font-size: 0.5rem;
	text-align: center;
	text-decoration: none;
	line-height: 0.75rem;
	text-indent: 0.0625rem;
	color: #333;
	cursor: default;
	border-radius: 50%;
	border: 0.0625rem solid #444;
}
.calc-buttons .calc-smaller {
	opacity: 0;
}
.calc-buttons .calc-ln {
	font-size: 1.0625rem;
	line-height: 0.125rem;
	overflow: hidden;
	opacity: 0;
}
.calc-buttons:hover div {
	transition:
			opacity 0.15s ease-in,
			top 0.25s ease-out;
}

.calc-buttons:hover .calc-smaller {
	top: 0.9375rem;
	opacity: 0.75;
}
.calc-buttons:hover .calc-ln {
	top: 1.8125rem;
	opacity: 0.75;
}
.calc-buttons .calc-info:hover, .calc-buttons .calc-smaller:hover, .calc-buttons .calc-ln:hover {
	opacity: 1;
}

/* -------- key board -------- */

.calc-left, .calc-right {
	position: relative;
	float: left;
	/*width: 15rem;*/
	width: 50%;
}

.calc-small .calc-left {
	display: none;
}
.calc-f17 {
	font-size: 1.0625rem;
}
.calc-f18 {
	font-size: 1.125rem;
}
.calc-f19 {
	font-size: 1.1875rem;
}
.calc-f21 {
	font-size: 1.3125rem;
}
.calc-main textarea {
	position: absolute;
	width: 0.0625rem;
	height: 0.0625rem;
	left: 0.25rem;
	top: 0.25rem;
	border: 0;
	background-color: transparent;
}

/* -------- key board keys -------- */

.calc-left > div, .calc-right > div {
	margin: 0.3125rem;
	position: relative;
	/*width: 3.125rem;
	height: 1.75rem;*/
	width: calc(25% - 0.625rem);
	height: 2.625rem;
	background-color: #dfe1e5;
	border: 0.0625rem solid #dfe1e5;
	/*box-shadow: 0 0.0625rem rgba(255, 255, 255, 0.1);*/
	border-radius: 0.375rem;
	overflow: hidden;
	float: left;
	cursor: pointer;
}

.calc-left > div > div, .calc-right > div > div {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	border: 0.0625rem solid #dfe1e5;
	border-radius: 0.375rem;
	color: black;
	/*text-shadow: 0 -0.0625rem 0 rgba(0, 0, 0, 0.5);*/
	text-align: center;
	background: #dfe1e5;
	font-size: 1.25rem;
	/*border-top-left-radius: 0.375rem;
	border-top-right-radius: 0.375rem;
	border-bottom-left-radius: 1.625rem 0.375rem;
	border-bottom-right-radius: 1.625rem 0.375rem;
	box-shadow:
		inset 0 -0.9375rem 0.0625rem rgba(  0,   0,   0, 0.25),
		inset 0   0.0625rem 0.0625rem rgba(255, 255, 255, 0.4),
		inset 0   0.375rem 0.375rem rgba(255, 255, 255, 0.25);
	border: none;*/
	white-space: nowrap;
}

.calc-left .calc-active > div, .calc-right .calc-active > div {
	background: #b5b5b5;
	border-color: #b5b5b5;
}

/*.calc-left > div > div:hover, .calc-right > div > div:hover {
	text-shadow:
		0rem  0rem  0.5rem  rgb(255, 230, 186),
		0rem  0rem 1.375rem  rgb(255, 255, 255),
		0rem -0.0625rem  0rem rgba(  0,   0,   0, 0.5);
}*/
.calc-right .calc-eq {
	/*height: 4.25rem;*/
	height: 5.9375rem;
	position: absolute;
	bottom: 0;
	left: 75%;
	background-color: #10408E;
	border-color: #10408E;
}

.calc-down {
	padding-top: 2.5rem;
}
.calc-radxy sup {
	padding-bottom: 0.25rem;
	display: block;
	position: absolute;
	left: 0.875rem;
	top: 0.375rem;
}
.calc-radxy em {
	font-weight: normal;
	font-size: 1rem;
	padding-right: 0.125rem;
}
.calc-right .calc-zero {
	/*width: 6.875rem;*/
	width: calc(50% - 0.625rem);
}
.calc-right .calc-zero div {
	text-align: left;
}
/*.calc-right .calc-zero span {
	padding-left: 1.375rem;
}*/
.calc-blank {
	border-color: transparent;
	background: none;
	background-image: none;
	box-shadow: none;
	clear: right;
}
.calc-right .calc-grey > div {
	background-color: #dfe1e5;
}
.calc-right .calc-grey {
	background-color: #dfe1e5;
}

.calc-right .calc-num > div {
	background-color: #f1f3f4;
	border: 0.0625rem solid #f1f3f4;
	/*box-shadow:
		inset 0 -0.8125rem 0.0625rem rgba(50,   50,  50, 0.5),
		inset 0   0.0625rem 0.0625rem rgba(255, 255, 255, 0.25),
		inset 0   0.5rem 0.375rem rgba(255, 255, 255, 0.2);*/
}
.calc-right .calc-num {
	background-color: #f1f3f4;
	border-color: #f1f3f4;
}
.calc-right .calc-blue > div {
	background-color: #10408E;
	border: none;
	color: white;
	/*box-shadow:
		inset 0 -0.8125rem 0.0625rem rgba(148,  77,  18, 0.20),
		inset 0  0.4375rem  0.375rem rgba(255, 255, 255, 0.3),
		inset 0  0.375rem  0.375rem rgba(255, 255, 255, 0.1);*/
}
.calc-left > div:active, .calc-right > div:active,
.calc-left .calc-press, .calc-right .calc-press {
	box-shadow:
			0 0.0625rem 0.0625rem 0 rgba(60,64,67,0.30),
			0 0.0625rem 0.1875rem 0.0625rem rgba(60,64,67,0.15);
}
/*.calc-left > div:active > div, .calc-right > div:active > div,
.calc-left .calc-press > div, .calc-right .calc-press > div {
	background: none;
	box-shadow:
		0 0.0625rem 0.0625rem 0 rgba(60,64,67,0.30),
		0 0.0625rem 0.1875rem 0.0625rem rgba(60,64,67,0.15);
}*/
.calc-left .calc-active, .calc-right .calc-active {
	border-color: #b5b5b5;
	background: #b5b5b5;
}
.calc-grey.calc-active > div {
	background-color: #b5b5b5;
	border-color: #b5b5b5;
}
.calc-left .calc-second {
	background-color: #b5b5b5;
	border-color: #b5b5b5;
}
.calc-left .calc-second div {
	background-color: #b5b5b5;
	border-color: #b5b5b5;
	/*color: #EA6811;*/
}
sup, sub {
	font-size: 0.625rem;
	line-height: 0;
	padding-left: 0.0625rem;
}

/********** Honorlock ************/
#honorlock-logo {
	position: absolute;
	width: 1.375rem;
	top: -1.875rem;
	left: 0.25rem;
}
.st0 {
	fill: #2563b1;
}
.notation {
	font-size: 1.875rem;
}

/********** Font-family: Noto Sans ************/
/* cyrillic-ext */
@font-face {
	font-family: 'Noto Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v8/o-0IIpQlx3QUlC5A4PNr6DRASf6M7VBj.woff2) format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
	font-family: 'Noto Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v8/o-0IIpQlx3QUlC5A4PNr4TRASf6M7VBj.woff2) format('woff2');
	unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* devanagari */
@font-face {
	font-family: 'Noto Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v8/o-0IIpQlx3QUlC5A4PNr5DRASf6M7VBj.woff2) format('woff2');
	unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* greek-ext */
@font-face {
	font-family: 'Noto Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v8/o-0IIpQlx3QUlC5A4PNr6TRASf6M7VBj.woff2) format('woff2');
	unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
	font-family: 'Noto Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v8/o-0IIpQlx3QUlC5A4PNr5jRASf6M7VBj.woff2) format('woff2');
	unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
	font-family: 'Noto Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v8/o-0IIpQlx3QUlC5A4PNr6jRASf6M7VBj.woff2) format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
	font-family: 'Noto Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v8/o-0IIpQlx3QUlC5A4PNr6zRASf6M7VBj.woff2) format('woff2');
	unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: 'Noto Sans';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v8/o-0IIpQlx3QUlC5A4PNr5TRASf6M7Q.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@media screen and (max-width: 26.875rem) {
    html.scientific-calc {
		font-size: 10px;
	}
}

@media screen and (max-width: 17.5rem) {
    html.basic-calc {
        font-size: 10px;
    }
}

@media screen and (max-width: 16.125rem) {
    html.scientific-calc {
        font-size: 7px;
    }
}


@media screen and (max-width: 13.75rem) {
    html.basic-calc {
        font-size: 7px;
    }
}