.registerTag {
    margin: 50px auto 50px auto;
    width: 700px; /* TODO: Rule to remove/change, both parts should be in the center of the screen, and change between them like Tabs! */
}
.tagAddress {
    margin: 50px auto 50px auto;
    width: 500px; /* TODO: Rule to remove/change, both parts should be in the center of the screen, and change between them like Tabs! */
}
.topTags {
    margin: 50px auto 50px auto;
    width: 600px; /* TODO: Rule to remove/change, both parts should be in the center of the screen, and change between them like Tabs! */
}
.about {
    margin: 50px auto 50px auto;
    width: 600px; /* TODO: Rule to remove/change, both parts should be in the center of the screen, and change between them like Tabs! */
}
.howto {
    margin: 50px auto 50px auto;
    width: 1100px; /* TODO: Rule to remove/change, both parts should be in the center of the screen, and change between them like Tabs! */
}
.infoText {
    position: absolute;
    bottom: 16px;
}
.transferTagPopUp {
    z-index: 100;
    width: 100%;
    height: 99%;
    position: absolute;
    left:0;
    top:0;
    background-color: #a9a9a9cc;
}
.transferTag { /* Appears in a popup! */
    /*display: inline-block;*/
    height: 100%;
    width: 100%;
    z-index: 101;
    position: relative;
}
.transferTag--center { /* Appears in a popup! */
    /*z-index: 101;*/
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.removeTagging {
    float: left;
    width: 60%; /* TODO: Rule to remove/change, both parts should be in the center of the screen, and change between them like Tabs! */
}
.gainsChangeToReceive {
    margin: 50px auto 50px auto;
    width: 700px; /* TODO: Rule to remove/change, both parts should be in the center of the screen, and change between them like Tabs! */
}
.listSubList {
    /*list-style-type: disclosure-closed;*/
    /*list-style-type: disclosure-open;*/
    /*list-style-type: lower-alpha;*/
    list-style-type: lower-roman;
}
.howToSteps {
    /*transition: height 10s ease-in, opacity 1s ease-in;*/
    /*transition: height 10s ease-in;*/
    /*transition: max-height 1s ease-out, opacity 0s;*/
    /*transition: all 1s ease-in;*/
    transition: opacity 0.15s ease-out, max-height 0.15s ease-in; /* Close expanded How-To steps much faster*/
    max-height: 0px;
    overflow-y: hidden;
    opacity: 0;
}
.howToSteps.howToSteps--show {
    /*transition: opacity 1s ease-in-out;*/
    /*transition: all 1s ease-in;*/
    transition: all 1s ease-in;
    max-height: 9000px;
    opacity: 1;
}
.howToDescription {
    margin-left: 1em;
}
.showSteps {
    color: #FF7F00;
    margin-left: 1em;
    cursor: pointer;
}
.hideSteps {
    color: deepskyblue;
}
h3.howToTopic {
    position: relative;
}
.howToTopicInside:before {
    content: ' ';
    position: absolute;
    top: 3px;
    left: 0px;
    background: url('howto/images/arrow.png') no-repeat;
    width: 100%;
    height: 100%;
}
.howToTopicInside {
    margin-left: 25px;
}
.testingEnvNotif {
    z-index: 99900;
    width: 300px;
    height: 30px;
    top: -10px;
    left: 10px;
    position: absolute;
}
.testingEnvNotif-msg {
    color: #FF7F00;
    font-size: larger;
}
.tag-l-pack--center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.tag-l-box-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.tag-l-box--horizontal {
    -webkit-box-orient: horizontal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
}
.tag-l-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.tag-l-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.tag-tab {
    cursor: pointer;
    border: 1px solid transparent;
    padding: 0.54em 0.6em;
    margin: 0 0.5em 0 0.5em;
    color: #777777;
    background-color: #fff;
    background-image: none;
    border-color: #000;
}
.tag-tab--active {
    cursor: initial !important;
    color: #5fa2dd;
    background-color: #fff;
    background-image: none;
    border-color: #000;
}
.tag-notification {
    z-index: 201;
    position: absolute;
    width: 99%;
    background-color: #ccc;
    background-image: none;
    /*padding-left: 10px;*/
    /*padding-right: 5px;*/
    border-radius: 25px;
    position: absolute;
}
.tag-notification--smaller {
    /*width: 97.5% !important;*/
}
.tag-notification--type-error {
    z-index: 201;
    background-color: #ff5555 !important;
}
.tag-notification--type-warn {
    z-index: 201;
    background-color: #ffcc00 !important;
}
.tag-notification--type-info {
    z-index: 201;
    background-color: #00ccff !important;
}
.tag-notification--type-action {
    z-index: 201;
    background-color: #00ff00 !important;
}
.tag-notification .tag-notification-msg {
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 25px;
    padding-left: 10px;
    padding-right: 5px;
}
.tag-notification .tag-close-icon {
}
.tag-notification-msg {
    float: left;
    word-wrap: break-word;
    word-break: break-all;
}
.tag-close-icon {
    float: right;
    width: auto;
    cursor: pointer;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    /*color: inherit;*/
    /*background-color: inherit;*/
    text-align: center;
    cursor: pointer;
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
}
.tag-btn-refresh-top {
    margin-top: 10px;
    float:right;
}
@keyframes hotspotanimchange {
    0%   {background-color: red;}
    25%  {background-color: #FF7F00;}
    50%  {background-color: yellow;}
    75%  {background-color: #FFFF7F;}
    100% {background-color: white;}
}
@keyframes hotspotanimchange2 {
    0%  {background-color: #FF7F00;}
    33%  {background-color: yellow;}
    66%  {background-color: #FFFF7F;}
    100% {background-color: white;}
}
@keyframes hotspotanimchange3 {
    0%   {background-color: yellow;}
    50%  {background-color: #FFFF7F;}
    100% {background-color: white;}
}
@keyframes hotspotanimchange4 {
    0%   {background-color: #FFFF7F;}
    100% {background-color: white;}
}
.tag-anim-change {
    animation-name: hotspotanimchange;
    animation-duration: 30s;
}
.tag-anim-change2 {
    animation-name: hotspotanimchange2;
    animation-duration: 22.5s;
}
.tag-anim-change3 {
    animation-name: hotspotanimchange3;
    animation-duration: 15s;
}
.tag-anim-change4 {
    animation-name: hotspotanimchange4;
    animation-duration: 7.5s;
}