*       { margin:0; padding:0; text-align:center; }
html    { max-width: 100%; }
body    { max-width: 100%; text-align:center; margin:0 auto; background-color:#222; font-size:100%; }
img     { background-color:transparent; border:0; }
a       { font-family:'Open Sans',sans-serif; color:#5d5b5b; text-decoration:none; }

#osdiv     { position:relative; width:100%; height:1em; background-color:#fff; z-index:2; }
#os        { position:absolute; right:14px; bottom:5px; width:100px; z-index:3; }


.switch                        { position:relative; display:inline-block; width:60px; height:34px; }                                                                             /* The switch - the box around the slider */
.switch input                  { opacity:0; width:0; height:0; }                                                                                                                 /* Hide default HTML checkbox */
.slider                        { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#ccc;           -webkit-transition:.4s; transition:.4s; } /* The slider */
.slider:before                 { position:absolute; content:""; height:26px; width:26px; left:4px; bottom:4px; background-color:white; -webkit-transition:.4s; transition:.4s; }
input:checked + .slider        { background-color: #2196F3; }
input:focus   + .slider        { box-shadow:0 0 1px #2196F3;  }
input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); }
.slider.round                  { border-radius: 34px; } /* Rounded sliders */
.slider.round:before           { border-radius: 50%;  } 

.searchbox                     { position:relative; width:250px; box-sizing:border-box; border:2px solid #ccc; border-radius:4px; font-size:1em; background-color:white; padding: 12px 20px 12px 40px; -webkit-transition: width .4s ease-in-out; transition: width .4s ease-in-out; }
.searchbox:focus               { width:100%; }
.div_searchbox                 { position:relative; }
.div_searchbox i               { position:absolute; left:0; top:8px; padding:9px 8px; color:#aaa;}

.button_ok           { width:98%; background-color:#96C11F; border:0; padding:4% 0; margin:5px auto 0 auto; min-height:60px; text-align:center; font-family:'Open Sans',sans-serif; font-size:100%; color:#fff; border-radius:10px; cursor:pointer; -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; transition:background-color .3s; -webkit-transition:background-color .3s; }
.button_ok:hover     { background-color:#81a61b; }
.button_back         { width:98%; background-color:#3c3c3c; border:0; padding:4% 0; margin:5px auto 0 auto; min-height:60px; text-align:center; font-family:'Open Sans',sans-serif; font-size:100%; color:#fff; border-radius:10px; cursor:pointer; -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; transition:background-color .3s; -webkit-transition:background-color .3s; }
.button_back:hover   { background-color:#333333; }
.button_gray         { width:98%; background-color:#505050; border:0; padding:4% 0; margin:5px auto 0 auto; min-height:60px; text-align:center; font-family:'Open Sans',sans-serif; font-size:100%; color:#fff; border-radius:10px; cursor:pointer; -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; transition:background-color .3s; -webkit-transition:background-color .3s; }
.button_gray:hover   { background-color:#333333; }
.button_orange       { width:98%; background-color:#ff8300; border:0; padding:4% 0; margin:5px auto 0 auto; min-height:60px; text-align:center; font-family:'Open Sans',sans-serif; font-size:100%; color:#fff; border-radius:10px; cursor:pointer; -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; transition:background-color .3s; -webkit-transition:background-color .3s; }
.button_orange:hover { background-color:#d56d00; }
.button_blue         { width:98%; background-color:#336699; border:0; padding:4% 0; margin:5px auto 0 auto; min-height:60px; text-align:center; font-family:'Open Sans',sans-serif; font-size:100%; color:#fff; border-radius:10px; cursor:pointer; -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; transition:background-color .3s; -webkit-transition:background-color .3s; }
.button_blue:hover   { background-color:#003960; }
.button_del          { width:98%; background-color:#f55151; border:0; padding:4% 0; margin:5px auto 0 auto; min-height:60px; text-align:center; font-family:'Open Sans',sans-serif; font-size:100%; color:#fff; border-radius:10px; cursor:pointer; -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; transition:background-color .3s; -webkit-transition:background-color .3s; }
.button_del:hover    { background-color:#d54646; }

 @keyframes fadein         { from { opacity:0; } to { opacity: 1; } }
 @-moz-keyframes fadein    { from { opacity:0; } to { opacity: 1; } }
 @-webkit-keyframes fadein { from { opacity:0; } to { opacity: 1; } }
 @-ms-keyframes fadein     { from { opacity:0; } to { opacity: 1; } }
 @-o-keyframes fadein      { from { opacity:0; } to { opacity: 1; } }