body { min-width:400px;/* width:100%;*/ font-family: Arial; font-size: 16px; background: #FFF; color: black;padding:0 10px; line-height:1.5; margin:0; box-sizing: border-box;}

#body {  }

#drawing { display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-content: flex-start;
align-items: flex-start; }

.min_3d {  width:400px; height:300px; border: 0px solid green; margin: 2px 10px 5px 0;  box-sizing: border-box; float:left; display:none;}
.max_3d {  width:100%; border: 0px solid red; margin: -20px 0 5px 0; z-index:100;  display:block;}

a { cursor: pointer; }
a:visited { color: #0000FF; }
i {color: green; font-weight: bolder; font-style:normal;}
b {color: black; line-height:1.5; }
.ch { border-color: #dbdbdb; /*margin-bottom: 5px;*/margin:0;
-moz-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);}

a:hover{ color: #0000FF;}
.inline { display: inline-block; float: left; margin: 2px 10px 10px 0px; position:relative; line-height:1.5;}
/*.inline span{ position:absolute; left:5px; bottom:10px; font-size:12px; color:green;}*/

.close {  position:absolute; top:10px; right:10px; cursor:pointer; color:red; font-size:16px;}
#zh_mail { position:absolute; left:10px; top:60px; background: #FFF; font-size:16px; padding:40px 10px 10px 10px; display:block;border:1px solid green; border-radius:5px; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); opacity:0.95; white-space: pre-line; min-width:310px; }
#zh_mail input[type="text"] { font-size:16px; width:200px; }
#zh_mail input[type="submit"] { font-size:16px;  }
#zh_saved_books { position:absolute; right:20px; top:10px; font-size:12px;  }
#animate-spin { font-size:48px; color:green; }

#saved_ok { position:fixed; left:200px; top:10px; font-size:18px; color:green; opacity:0.8; }
#saved_message { position:absolute; left:20px; top:10px; font-size:14px; color:green; opacity:0.8;  }

#upper { position:fixed; right:10px; bottom:10px; display:none; color:#008000; font-size:30px;}

#calc_menu { background:#FFF; padding:5px; display:inline-block; border:1px solid green; margin:5px 0;}
#calc_menu a { font-size:26px; color:green; text-decoration: none; line-height: 1;}
.btn_frame_screen{ font-size:24px; color:green; text-decoration: none; border:1px solid green; position: absolute; top:5px; right: 5px; background:#FFF;z-index:1;}
.sp_calc
{
background:#FFFFD1;
background-image:url('https://www.zhitov.com/image/house32.png');
background-repeat: no-repeat;
background-position: 5px 5px;
padding: 5px 10px 5px 45px;
/*margin:0 0 15px 0;*/
margin:2px 10px 10px 0px;
border: 1px solid #00B800;
border-radius: 5px;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
color:#333; font-size: 14px; line-height:1.6;
display: inline-block;
white-space: nowrap;
}
.sp_calc li { color:#CC6600; }


#loader_div { position: fixed; top:0; left:0; width: 100%; height: 100%; background: #FFF; opacity: 0.5; }
.loader {
left: 50%;
top: 50%;
position: fixed;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); }
.loader #spinner {
box-sizing: border-box;
stroke: #008000;
stroke-width: 3px;
-webkit-transform-origin: 50%;
transform-origin: 50%;
-webkit-animation: line 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite, rotate 1.6s linear infinite;
animation: line 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite, rotate 1.6s linear infinite; }

@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0);
transform: rotate(0); }
to {
-webkit-transform: rotate(450deg);
transform: rotate(450deg); } }

@keyframes rotate {
from {
-webkit-transform: rotate(0);
transform: rotate(0); }
to {
-webkit-transform: rotate(450deg);
transform: rotate(450deg); } }

@-webkit-keyframes line {
0% {
stroke-dasharray: 2, 85.964;
-webkit-transform: rotate(0);
transform: rotate(0); }
50% {
stroke-dasharray: 65.973, 21.9911;
stroke-dashoffset: 0; }
100% {
stroke-dasharray: 2, 85.964;
stroke-dashoffset: -65.973;
-webkit-transform: rotate(90deg);
transform: rotate(90deg); } }

@keyframes line {
0% {
stroke-dasharray: 2, 85.964;
-webkit-transform: rotate(0);
transform: rotate(0); }
50% {
stroke-dasharray: 65.973, 21.9911;
stroke-dashoffset: 0; }
100% {
stroke-dasharray: 2, 85.964;
stroke-dashoffset: -65.973;
-webkit-transform: rotate(90deg);
transform: rotate(90deg); } }