* {
    padding: 0.25rem;
}

select, input, textarea {
	margin: 0.25rem;
}

.nopad {
	padding: 0;
}

.nomargin {
	margin: 0;
}

body, td, section, input, textarea, option, select {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
	font-weight: normal;
	color: black;
}

input, textarea, option, select {
	background-color: white;
	font-weight: normal;
}

option {
	padding: 0;
}
select, textarea {
	padding: 2px;
}

body {
    /*padding: 0;*/
}

INPUT[type="text"] {
	background-color: white;
}

a:visited, a:active, a:hover, a:link, .phone {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-decoration: none;
	color: royalblue;
	vertical-align: top;	
}

#results a:visited, #results a:active, #results a:hover, #results a:link {
	padding: 0;
}

label {
    padding: 0;
}

mark {
    padding: 0;
}

hr {
	padding: 0;
}

.exact {
    background-color: yellow;
}

.related {
    background-color: greenyellow;
}

.translated {
    background-color: lightblue;
}

.error {
    color: red;
    font-weight: bold;
}

.message {
	color: orangered;
	font-weight: bold;
}

#loader {
    padding: 0;

    visibility: hidden;
    position: absolute;

            
    top: calc((100vh - 43px) / 2 - 12px);
    left: calc((100vw - 44px) / 2 - 12px);
    border: 12px solid #f3f3f3;
    border-radius: 50%;
    border-top: 12px solid #3498db;
    height: 43px;
    width: 44px;
             
    /*
    top: calc((100vh - 42px) / 2 - 10px);
    left: calc((100vw - 42px) / 2 - 10px);
    border: 10px solid #f3f3f3;
    border-radius: 50%;
    border-top: 10px solid #3498db;
    width: 42px;
    height: 42px;
    */

    -webkit-animation: spin 4s linear infinite;
    animation: spin 4s linear infinite;
    /*https://stackoverflow.com/questions/13176746/css-keyframe-animation-cpu-usage-is-high-should-it-be-this-way*/
    /*There is a "magic" property that will significantly cut-down the CPU usage*/
    /*transform: translateZ(0);*/
    transform: rotateZ(360deg);
    /*backface-visibility: hidden;
    perspective: 1000px;*/
    z-index: 102;
}

#loader2 {
    padding: 0;

    visibility: hidden;
    position: absolute;
    top: calc((100vh - 32px) / 2);
    left: calc((100vw - 32px) / 2);
    width: 32px;
    height: 32px;
    z-index: 101;
}

#center_icon {
	padding: 0;

	position: absolute;
	top: calc((100vh - 64px) / 2);
	left: calc((100vw - 64px) / 2);
	width: 64px;
	height: 64px;
	z-index: 100;

	opacity: 0.4;
	filter: alpha(opacity=40);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";

	/* https://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css */

	/*
	-webkit-filter: grayscale(100%); / * Safari 6.0 - 9.0 * /
    filter: grayscale(100%);
	*/

	filter: gray; /* IE6-9 */

    -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ -- Old WebKit */
    -webkit-filter: grayscale(100%); /* New WebKit */

	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%); 
	-o-filter: grayscale(100%);

	filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */

    /*filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale");*/ /* Firefox 3.5+ */
	/* Firefox 10+, Firefox on Android */
	/*filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");*/
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0\'/></filter></svg>#grayscale");

	filter: url(resources.svg#desaturate); /* older Firefox */
    filter: grayscale(100%); /* Current draft standard */
}

#center_icon_logo {
	padding: 0;

	position: absolute;
	top: calc((100vh - 256px) / 2 + 21px);
	left: calc((100vw - 256px) / 2);
	width: 256px;
	height: 256px;
	z-index: 100;

	opacity: 0.4;
	filter: alpha(opacity=40);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";

	/* https://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css */

	/*
	-webkit-filter: grayscale(100%); / * Safari 6.0 - 9.0 * /
    filter: grayscale(100%);
	*/

	filter: gray; /* IE6-9 */

    -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ -- Old WebKit */
    -webkit-filter: grayscale(100%); /* New WebKit */

	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%); 
	-o-filter: grayscale(100%);

	filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */

    /*filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale");*/ /* Firefox 3.5+ */
	/* Firefox 10+, Firefox on Android */
	/*filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");*/
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
	filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0\'/></filter></svg>#grayscale");

	filter: url(resources.svg#desaturate); /* older Firefox */
    filter: grayscale(100%); /* Current draft standard */
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

body {
    /*padding: 1.5em;*/
    background: #f8f8f8;
    font-family: sans-serif;
    line-height: 1.5;
}

img {
    padding: 0;
}

li *, li * * {
    vertical-align: text-top;/*move the bullet to the top*/
}

.striped tr:nth-child(odd) {
    background: #D0E0F1;
}

.striped tr:nth-child(even) {
    background: #FFFFFF;
}
.striped b {
	/*padding: 0;*/
}

.tabbed {
    float: left;
    width: 100%;
    padding: 0;
}

.tabbed > input {
    display: none;
}

.tabbed > section {

    padding: 0;
}

.tabbed > section > h1 {
    float: left;
    box-sizing: border-box;
    margin: 0;
    padding: 0.5em 0.5em 0;
    overflow: hidden;
    font-size: 1em;
    font-weight: normal;
}

.tabbed > input:first-child + section > h1 {
    padding-left: 1em;
}

.tabbed > section > h1 > label {
    display: block;
    padding: 0.25em 0.75em;
    border: 1px solid #ddd;
    border-bottom: none;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    box-shadow: 0 0 0.5em rgba(0,0,0,0.0625);
    background: #fff;
    cursor: pointer;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;

    height: 18px;
}

.tabbed > section > div {
    position: relative;
    z-index: 1;
    float: right;
    box-sizing: border-box;
    width: 100%;
    margin: 2.5em 0 0 -100%;
    padding: 0.5em 0.75em;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 0 0.5em rgba(0,0,0,0.0625);
    background: #fff;
}

.tabbed > input:checked + section > h1 {
    position: relative;
    z-index: 2;
}

.tabbed > input:not(:checked) + section > div {
    display: none;
}



.css-label {
	cursor: pointer;
}

.like_checkbox, .notlike_checkbox {
	display: none;
}
.like_checkbox:checked, .notlike_checkbox:checked {
	display: none;
}

.glyphicon-plus {
	display: none;
	color: green;
	font-weight: bold;
	font-size: 12px;
}
.glyphicon-minus {
	display: none;
	color: orangered;
	font-weight: bold;
	font-size: 12px;
}

.fa {
	/*color: white;*/
	/*line-height: 16px;*/
	border-radius: 0px;
	padding: 0;
	border: 1px solid transparent;
	display: block;
	width: 25px;
	height: 25px;
}

.fa-plus {
	/*
	padding-top: 2px;
	padding-right: 2px;
	padding-left: 2px;
	background-color: #3AC5C9;
	*/
	opacity: 0.5;
	filter: alpha(opacity=50);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

.fa-minus {
	/*
	padding-top: 1px;
	padding-right: 2px;
	padding-left: 2px;
	background-color: #E85764;
	*/
	opacity: 0.5;
	filter: alpha(opacity=50);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

.notlike_checkbox:checked + .glyphicon-minus, .notlike_checkbox:checked + .fa-minus {
	opacity: 1.0;
	filter: alpha(opacity=100);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

	border: 1px solid orangered;
}
.like_checkbox:checked + .glyphicon-plus, .like_checkbox:checked + .fa-plus {
	opacity: 1.0;
	filter: alpha(opacity=100);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

	border: 1px solid green;
}