@media screen {
    .payment-logo{
        margin: 40px
    }
    .payment-card{

        -webkit-box-shadow: 0 7px 14px 0 rgba(60,66,87, 0.12), 0 3px 6px 0 rgba(0,0,0, 0.12);
        box-shadow: 0 7px 14px 0 rgba(60,66,87, 0.12), 0 3px 6px 0 rgba(0,0,0, 0.12);
        border-radius: 4px;

    }
    .payment-card .divider--light-bottom-1{
        box-shadow: inset 0 -1px #e3e8ee;
        -webkit-box-shadow: inset 0 -1px #e3e8ee;
}
    .payment-card .card-header{
        text-align: center;
    }
    .payment-card .card-small{

        color: #697386;
    font-size: 14px;
        text-align: center;
    }
    .payment-card .card-title{
        text-align: center;
    }
    .payment-card .card-bg{
        background-color: #f7fafc;
        padding: 32px;
    }
    .payment-card table{
        background: #fff;
        border:0;
        margin-bottom: 1.25rem;
        table-layout: auto;
        display: grid;
        width: 100%;

    }
    .payment-card table thead {
        -webkit-box-shadow:  inset 0 -1px #e3e8ee;
        box-shadow: inset 0 -1px #e3e8ee;
        background-color: transparent ;
    }
    .payment-card table tr.even, .payment-card table tr.alt, .payment-card table tr:nth-of-type(even) {
        -webkit-box-shadow:  inset 0 -1px #e3e8ee;
        box-shadow: inset 0 -1px #e3e8ee;
        background-color: transparent ;
    }
    .payment-card fieldset{
        background-color: #fff;
        padding: 15px;
        width: 100px;
        height: 100px;
    }
    .payment-card fieldset img{
        height: 100%;
    }
    .payment-card .card-toolbar input[type="radio"]{
        display:none;
    }
    .payment-card .card-toolbar label{
        display:block;
        padding: 0;
        margin: 0;
    }
    .payment-card .card-toolbar{
        display:flex;
        justify-content:center;
    }


    .Margin-bottom--4 {
        margin-bottom: 4px;
    }

    .Margin-top--16 {
        margin-top: 16px;
    }
    .Padding-vertical--16 {
        padding-top: 16px;
        padding-bottom: 16px;
    }
    .Padding-bottom--12 {
        padding-bottom: 12px;
    }
    .Padding-all--32 {
        padding: 32px;
    }
    .Margin-left--32 {
        margin-left: 32px;
    }
    .Margin-bottom--32 {
        margin-bottom: 32px;
    }
    .Margin-top--32 {
        margin-top: 32px;
    }


    .notification-dot {
        height: 7px;
        width: 7px;
        background-color: #FA3E3E;
        border-radius: 50%;
        display: inline-block;
    }
    .antialiased {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    #portokasse-logo{
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='138' height='23.24999' viewBox='0 0 138 23.24999'%3E%3Cdefs%3E%3Cstyle%3E.a{fill:%23c61111;}.b{fill:%231a171b;}%3C/style%3E%3C/defs%3E%3Ctitle%3Eportokasse%3C/title%3E%3Cpath class='a' d='M12.206,8.248h4.78c3.192,0,4.7,1.465,3.81,4.582a6.03341,6.03341,0,0,1-6,4.562h-1.69L11.6,22.656H8.082L12.206,8.248m2.604,6.626a2.60331,2.60331,0,0,0,2.477-2.065c.407-1.43-.1-2.05-1.494-2.05h-.92l-1.18,4.11H14.81v.005M30.106,8c4.307,0,5.443,3.22,4.232,7.452-1.21,4.23-4.19,7.45-8.496,7.45-4.307,0-5.422-3.22-4.21-7.45C22.84,11.22,25.798,8,30.105,8h.001M26.54,20.467c2.035,0,3.407-2.25,4.198-5.015.792-2.766.707-5.016-1.33-5.016-2.035,0-3.386,2.25-4.177,5.016-.79,2.766-.72,5.015,1.31,5.015H26.54M66.962,8c4.307,0,5.443,3.22,4.233,7.452-1.21,4.23-4.19,7.45-8.497,7.45s-5.42-3.22-4.21-7.45C59.698,11.22,62.654,8,66.962,8M63.395,20.467c2.036,0,3.408-2.25,4.2-5.015.79-2.766.706-5.016-1.33-5.016-2.035,0-3.386,2.25-4.178,5.016-.79,2.766-.728,5.015,1.308,5.015h0'/%3E%3Cpath class='b' d='M110.028,11.18a5.96243,5.96243,0,0,0-2.745-.744,2.33,2.33,0,0,0-2.442,1.568c-.75,2.622,5.5,1.404,4.03,6.523a6.4908,6.4908,0,0,1-6.48,4.376,13.06861,13.06861,0,0,1-3.86-.598l1-2.808a6.97354,6.97354,0,0,0,3.03.888,2.65454,2.65454,0,0,0,2.68-1.713c.8-2.787-5.48-1.425-4.01-6.564C101.34,11.674,102.56,8,107.57,8a13.46558,13.46558,0,0,1,3.374.495l-.918,2.684.002.001m10.725,0a5.96243,5.96243,0,0,0-2.745-.744,2.32757,2.32757,0,0,0-2.44,1.568c-.75,2.622,5.49,1.404,4.026,6.523a6.4925,6.4925,0,0,1-6.48,4.376,13.01914,13.01914,0,0,1-3.858-.598l.996-2.808a6.94659,6.94659,0,0,0,3.024.888,2.65027,2.65027,0,0,0,2.676-1.713c.797-2.787-5.485-1.425-4.015-6.564.124-.434,1.347-4.108,6.36-4.108a13.45871,13.45871,0,0,1,3.374.495l-.91,2.684-.008.001'/%3E%3Cpath class='a' d='M52.577,10.85l-3.257-.003.744-2.6h10.03l-.745,2.6h-3.26l-3.38,11.808H49.2l3.377-11.808v.003'/%3E%3Cpath class='b' d='M93.52,19.435H88.826l-1.95,3.22H83.49L92.584,8.25h3.857l.68,14.408h-3.6v-3.22l-.001-.003m.18-8.42h-.043L90.167,17H93.53l.17-5.986v.001'/%3E%3Cpath class='a' d='M34.277,22.61h3.51l1.707-5.795h.78l.34.097.245.146.14.244.14.34.05.488.05.633.04,3.847H45l-.195-4.675-.05-.633-.048-.487-.098-.39-.15-.292-.2-.243-.2-.195-.29-.098-.39-.097v-.05l.58-.096.484-.195.44-.2.39-.2.34-.25.343-.25.243-.294.245-.243.39-.583.296-.487.147-.44.1-.29.1-.49.094-.44v-.38l-.05-.39-.095-.34-.15-.294-.198-.246-.244-.245-.24-.244-.34-.143-.29-.145-.39-.15-.39-.096-.39-.04-.927-.05h-5.46l-4.13,14.37v.011m6.826-11.93h1.412l.294.047.24.05.19.096.14.098.14.1.192.29.1.3v.29l-.05.29-.05.25-.144.39-.194.34-.246.34-.34.25-.34.24-.39.2-.44.1-.484.05h-1.12l1.072-3.7.018-.021'/%3E%3Cpath class='b' d='M75.158,8.195H78.67l-1.7,5.948h.043l5.384-5.948h3.94L79.78,14.948l2.803,7.662H78.385l-1.902-6.608H76.44L74.55,22.61H71.038l4.12-14.415m49.156.145h8.636l-.72,2.51h-5.25l-.922,3.21h4.993l-.72,2.513h-4.99l-1.04,3.622h5.51l-.72,2.51h-8.89L124.32,8.34h-.006'/%3E%3C/svg%3E");
    }
    .left-event{
        left:-3%;
    }
    .nomargin{
        margin: 0!important;
    }
    body {
        background: #ffffff;
        color: #555555;
        padding: 0;
        margin: 0;
        font-family: "Lato","Open Sans", sans-serif;
        font-weight: normal;
        font-style: normal;
        line-height: 1.5;
        position: relative;
        cursor: auto;
    }


    h1, h2, h3, h4, h5, h6 {
        font-family: "Lato","Open Sans", sans-serif;
    }
    .subheader {
        line-height: 1.4;
        color: #191c1e;
        font-weight: normal;
        margin-top: 0.2rem;
        margin-bottom: 0.5rem;
    }

    .row {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0;
        margin-bottom: 0;
        max-width: 80rem;
    }

    .header {
        padding-top: 20px;
    }

    fieldset {
        margin-top: 0px;
        margin-bottom: 20px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        padding: 15px;
    }

    fieldset {
        border: 1px solid #efefef;
        padding: 1.25rem;
        margin: 1.125rem 0;
    }

    .success-color {
        color: #43ac6a !important;
    }
    .success-color-bg {
        background-color: #43ac6a !important;
    }
    .warning-color {
        color: #F1C933 !important;
    }
    .warning-color-bg {
        background-color: #F1C933 !important;
    }
    .fb-messenger-color-bg{
        background-color:#0084ff!important;
    }
    .telegram-color-bg{
        background-color:#0088cc!important;
    }
    .whatsapp-color-bg{
        background-color:#25d366!important;
    }

    .alert-color {
        color: #ac5a62 !important;
    }
    .alert-color-bg {
        background-color: #ac5a62 !important;
    }

    .provision-pricing-table {
        border: 1px;
        margin-left: 0;
        margin-bottom: 0;
        padding: 5px;

        background: #f7f7f7;
    }

    .provision-pricing-table .provision-title {
        background-color: #f7f7f7;
        padding: 0.625rem;
        text-align: center;
        color: #555555;
        font-weight: bold;
        font-size: 1rem;
        font-family: "Open Sans", sans-serif;
        font-weight: normal;
        color: #555555;
    }

    .provision-pricing-table li {
        background: none !important;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .provision-pricing-table .provision-bullet-item {
        background-color: #f7f7f7;
        padding: 0.3125rem;
        text-align: center;
        color: #777777;
        font-size: 0.875rem;
        font-weight: normal;
        border-bottom: none;
        padding: 5px 10px;
    }

    .text-center {
        text-align: center !important;
    }

    .only-on-hover {
        color: #cfcfcf !important;
    }

    .auth-plain {
        padding-right: 0px;
        padding-left: 0px;
        padding-top: 0px;
    }

    .left-solid {
        margin-top: 0px;
        margin-bottom: 0px;
    }

    .signup-panel {
        border-radius: 5px;
        padding: 15px;
        margin-top: 30px;
        margin-bottom: 30px;
    }



    .signup-panel i {
        font-size: 80%;
        line-height: 50px;
        color: #999;
    }

    .signup-panel form input, .signup-panel form span {
        height: 50px;
    }

    .signup-panel .welcome {
        font-size: 26px;
        text-align: center;
        margin-left: 0;
    }

    .signup-panel p {
        font-size: 80%;
        text-align: justify;
    }

    .signup-panel ul {
        font-size: 80%;
        list-style-type: none;
        padding-left: 20px;
    }

    .signup-panel li {
        position: relative;
        padding-left: 20px;
        margin-bottom: 10px
    }


    .signup-panel .button {
        margin-left: 35%;
    }

    .newusers {
        background: #fff;
    }

    /*NOTIFICATIONS*/
    #notification_li {
        position: relative
    }

    #notificationContainer {
        background-color: #fff;
        border: 1px solid rgba(100, 100, 100, .4);
        -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
        overflow: visible;
        position: absolute;
        margin-left: auto;
        width: 100%;
        max-width: 400px;
        z-index: 1000;
        display: none;
    }

    @media (min-width: 801px) {
        #notificationContainer {
            left: 60%;
            top: 70%;

        }

    }


    #notificationContainer:before {
        content: '';
        display: block;
        position: absolute;
        width: 0;
        height: 0;
        color: transparent;
        border: 10px solid black;
        border-color: transparent transparent white;
        margin-top: -20px;
        margin-left: 188px;
    }

    #notificationTitle {
        font-weight: bold;
        padding: 8px;
        font-size: 13px;
        background-color: #ffffff;
        position: fixed;
        z-index: 1000;
        width: 384px;
        border-bottom: 1px solid #dddddd;
    }

    #notificationsBody {
        padding: 33px 0px 0px 0px !important;
        min-height: 300px;
        overflow-y: scroll;
    }

    #notificationFooter {
        background-color: #e9eaed;
        text-align: center;
        font-weight: bold;
        padding: 8px;
        font-size: 12px;
        border-top: 1px solid #dddddd;
    }

    .note {

        color: #333;
        display: block;
        outline: none;
        padding: 7px 27px 7px 8px;
        position: relative;
    }

    .note a {
        color: #333 !important;
        cursor: pointer;
        text-decoration: none;

    }

    .notificationUL {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    .notificationUL li {
        border-bottom: 1px solid #ddd;
        overflow: hidden;
        position: relative;

    }

    .not_img {
        background-repeat: no-repeat;
        background-size: 50px 50px;
        display: block;
        height: 50px;
        margin-right: 8px;
        width: 50px;
    }

    .clearfix {
        zoom: 1;
    }

    .clearfix:after {
        clear: both;
        content: ".";
        display: block;
        font-size: 0;
        height: 0;
        line-height: 0;
        visibility: hidden;
    }

    .leftfloat {
        float: left;
    }

    .small {
        font-size: 12px;
        font-weight: normal;
    }




    .frontend input[type="radio"] {
        margin: 0 0 0 0;
    }



    .side-nav a{
        display: inline-block !important;
    }
    .side-nav ul{
        margin-left: 0.5rem;
        margin-bottom: 0;
    }

    .jpamaske {
        border: 0 !important;
    }

    .jpamaske table thead tr th, .jpamaske tr, .jpamaske td, .jpamaske table tbody tr th, .jpamaske table tbody tr td, .jpamaske table tr td {
        padding-left: 0 !important;
        line-height: 0 !important;
        padding-top: 0 !important;
    }

    .jpamaske tr {
        background: none !important;
        padding-left: 0 !important;
        line-height: 0 !important;
        padding-top: 0 !important;
    }

    #yourId {
        width: 400px;
        height: 208px;
        position: relative;
        margin: 50px 70px 20px;
        border: 3px solid #FFF;
        box-sizing: content-box;
        -moz-box-sizing: content-box;
        border-radius: 2px;
        background-image: url(../img/placeholder.png);
        background-repeat: no-repeat;
        background-position: center;
        box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.1);
    }

    .text-right {
        text-align: right;
    }
    .results  .result{
        padding-top: 1em;
    }
    .results a{
        color:#555555;
    }
    .top-bar{
        background-color: transparent;
        z-index: 1000;
    }
    .top-bar-section .typeahead-list  li {
        width: 100%;
        background-color: #e7e7e7;
    }
    .top-bar-section,.top-bar-section .has-form, .top-bar-section li:not(.has-form) a:not(.button), .top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button), .top-bar-section li:not(.has-form) a:not(.button){
        background-color: transparent;
        border-color: #b9b9b9;
        color: rgba(0,0,0,0.86);
    }
    .typeahead-search-icon{

        font-size: 13px;
        display: block;
        background: none;
    }
    .typeahead-list{
        background-color: #fff;
    }
    .search-button:before {
        position: absolute;
        font-family: 'Font Awesome 5 Solid';
        top: 18%;
        left: 40%;
        content: "\f002";
        color:#fff;
    }

    .top-bar-section .typeahead-list li:not(.has-form) a:not(.button) {
        line-height: inherit;
        background-color: #fff;
        width:100%;
        padding: 7px;
    }
    .search .search-field {
        height: 50px;
        background-color: white !important;
        background-image: url('/img/search.png') !important;
        background-position: 10px 15px !important;
        background-repeat: no-repeat !important;
        background-size: 20px 20px !important;
        padding-left: 40px;
        opacity: 1;
    }



    blockquote {
        padding: 10px 20px;
        margin: 0 0 20px;
        font-size: 17.5px;
        border-left: 5px solid #eee;
    }
    .sidebar{
        padding-left: 4%;
    }
    .top-bar-section ul li>a{
        font-family: "Lato","Open Sans", sans-serif;
    }
    input[type="text"][readonly]{
        background-color: #F0F0F0;
        cursor:not-allowed;

    }
    .mailbox{
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;

        -webkit-flex-flow: row wrap;
        justify-content: space-around;

    }
    .mail-row{
        box-shadow: 0 5px 30px rgba(0,0,0,.1);
        z-index: 10;
        width: auto;
        max-width: 26rem;
        border-radius: 8px;
        cursor: pointer;
        margin: 10px !important;

        padding: 10px;
    }
    .btn-outline-full-width, .btn-outline-full-width:hover {
        border: 2px solid white;
        background-color: transparent;
        color: white;
        padding: 14px 28px;
        font-size: 16px;
        cursor: pointer;
        display: inline-block;
        width: 100%;
        font-weight: bold;
        text-align: center;
        margin-top: 10px;
    }
    .btn-outline, .btn-outline:hover {
        border: 2px solid white;
        background-color: transparent;
        color: white;
        padding: 3px 5px;
        font-size: 16px;
        cursor: pointer;
        display: inline-block;
        font-weight: bold;
        text-align: center;
    }
    /* Shared */
    .loginBtn {
        box-sizing: border-box;
        position: relative;
        width: 15.5em;
        margin: 0.2em;
        padding: 0 15px 0 46px;
        border: none;
        text-align: left;
        line-height: 34px;
        white-space: nowrap;
        border-radius: 0.2em;
        font-size: 16px;
        color: #FFF;

    }
    .loginBtn:before {
        content: "";
        text-align: center;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        box-sizing: border-box;
        position: absolute;
        top: 0;
        left: 0;
        width: 34px;
        height: 100%;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
    }
    .loginBtn:focus {
        outline: none;
    }
    .loginBtn:active {
        box-shadow: inset 0 0 0 32px rgba(0,0,0,0.1);
    }


    /* Facebook */
    .loginBtn--facebook {
        background-color: #4C69BA;
        background-image: linear-gradient(#4C69BA, #3B55A0);
        text-shadow: 0 -1px 0 #354C8C;
    }
    .loginBtn--facebook:before {
        /*border-right: #364e92 1px solid;*/
        font-family: "Font Awesome 5 Brands";
        font-weight: 400;
        content: "\f39e";
    }
    .loginBtn--facebook:hover,
    .loginBtn--facebook:focus {
        background-color: #5B7BD5;
        background-image: linear-gradient(#5B7BD5, #4864B1);
    }
    /*Twitter*/
    .loginBtn--twitter {
        background-color: #0081ce; /* fallback color */
        background: -moz-linear-gradient(top, #00aced, #0081ce);
        background: -ms-linear-gradient(top, #00aced, #0081ce);
        background: -webkit-linear-gradient(top, #00aced, #0081ce);

        text-shadow: 0 -1px 0 #354C8C;
    }
    .loginBtn--twitter:before {
        /*border-right: #357ebd 1px solid;*/
        font-family: "Font Awesome 5 Brands";
        font-weight: 400;
        content: "\f099";
    }
    .loginBtn--twitter:hover{
        background-color: #00aced; /* fallback color */
        background: -moz-linear-gradient(top, #0081ce, #00aced);
        background: -ms-linear-gradient(top, #0081ce, #00aced);
        background: -webkit-linear-gradient(top, #0081ce, #00aced);
    }
    /*Telegram*/
    .loginBtn--telegram {
        fill: url(#w) #447799;
        background-color: #54a9eb;
        background-image: linear-gradient(#54a9eb, #1d98dc);
        text-shadow: 0 -1px 0 #354C8C;
    }
    .loginBtn--telegram:before {
        /*border-right: #357ebd 1px solid;*/
        font-family: "Font Awesome 5 Brands"; content: "\f3fe";
    }
    /*Amazon*/
    .loginBtn--amazon {
        /*background-color: #54a9eb;*/
        background:-webkit-gradient( linear, left top, left bottom, color-stop(.05, #f6dd9f), color-stop(1, #f0c24d));
        color:#222;
    }
    .loginBtn--amazon:before {
        /*border-right: #c5a65a 1px solid;*/
        font-family: "Font Awesome 5 Brands"; content: "\f270";
    }
    /* Google */
    .loginBtn--google {
        background-color: #c33219; /* fallback color */
        background: -moz-linear-gradient(top, #e64522, #c33219);
        background: -ms-linear-gradient(top, #e64522, #c33219);
        background: -webkit-linear-gradient(top, #e64522, #c33219);
        /*border: 1px solid #c33219;*/
        text-shadow: 0 -1px -1px #972412;
    }
    .loginBtn--google:before {
        /*border-right: #BB3F30 1px solid;*/
        font-family: "Font Awesome 5 Brands"; content: "\f1a0";
    }
    .loginBtn--google:hover,
    .loginBtn--google:focus {
        background-color: #e64522; /* fallback color */
        background: -moz-linear-gradient(top, #c33219, #e64522);
        background: -ms-linear-gradient(top, #c33219, #e64522);
        background: -webkit-linear-gradient(top, #c33219, #e64522);
    }
    /* Netid */
    .loginBtn--netid {
        text-shadow: 0 -1px -1px #5e9322;
        background-color: #76b82a; /* fallback color */
        background: -moz-linear-gradient(top, #76b82a, #92d546);
        background: -ms-linear-gradient(top, #76b82a, #92d546);
        background: -webkit-linear-gradient(top, #76b82a, #92d546);
    }
    .loginBtn--netid:before {
        /*border-right: #BB3F30 1px solid;*/
        /* font-family: "Font Awesome 5 Brands"; content: "\f1a0";*/
        content:'';
        background-image: url('https://netid.ahoi.cloud/images/netid.svg');
        background-size: 35px 35px;
        background-position: center center;
        background-repeat: no-repeat;
    }
    .loginBtn--netid:hover,
    .loginBtn--netid:focus {
        background-color: #76b82a; /* fallback color */
        background: -moz-linear-gradient(top, #76b82a, #92d546);
        background: -ms-linear-gradient(top, #76b82a, #92d546);
        background: -webkit-linear-gradient(top, #76b82a, #92d546);
    }

    @-webkit-keyframes netid {
        0%   { background-color: #76b82a; /* fallback color */
            background: -moz-linear-gradient(top, #76b82a, #92d546);
            background: -ms-linear-gradient(top, #76b82a, #92d546);
            background: -webkit-linear-gradient(top, #76b82a, #92d546);}
        25%  {    background: -webkit-gradient(linear,left top,left bottom,from(#ffe688),to(#ffcf20));
            background: -webkit-linear-gradient(#ffe688,#ffcf20);
            background: -moz-linear-gradient(#ffe688,#ffcf20);
            background: -o-linear-gradient(#ffe688,#ffcf20);
            background: linear-gradient(#ffe688,#ffcf20);}
        50%  {background-color: #1c449b;}
        75% {background: radial-gradient(circle at center 20%,#3d70b7 0%,#003d8f 100%);}
        100% {background: #f0001e;}
    }
    @keyframes netid {
        0%   { background-color: #76b82a; /* fallback color */
            background: -moz-linear-gradient(top, #76b82a, #92d546);
            background: -ms-linear-gradient(top, #76b82a, #92d546);
            background: -webkit-linear-gradient(top, #76b82a, #92d546);}
        25%  {    background: -webkit-gradient(linear,left top,left bottom,from(#ffe688),to(#ffcf20));
            background: -webkit-linear-gradient(#ffe688,#ffcf20);
            background: -moz-linear-gradient(#ffe688,#ffcf20);
            background: -o-linear-gradient(#ffe688,#ffcf20);
            background: linear-gradient(#ffe688,#ffcf20);}
        50%  {background-color: #1c449b;}
        75% {background: radial-gradient(circle at center 20%,#3d70b7 0%,#003d8f 100%);}
        100% {background: #f0001e;}
    }
    @keyframes changeLogo {
        0% {
            background-image: url('https://netid.ahoi.cloud/images/netid.svg');
        }
        25% {
            background-image: url('https://netid.ahoi.cloud/images/webde.svg');
        }
        50% {
            background-image: url('https://netid.ahoi.cloud/images/gmxnet.svg');
        }
        50% {
            background-image: url('https://netid.ahoi.cloud/images/1und1.svg');
        }
        100% {
            background-image: url('https://netid.ahoi.cloud/images/7pass.svg');
        }
    }
    /* Web.de */
    .loginBtn--webde {
        text-shadow: 0 -1px -1px #ffcf20;
        background: -webkit-gradient(linear,left top,left bottom,from(#ffe688),to(#ffcf20));
        background: -webkit-linear-gradient(#ffe688,#ffcf20);
        background: -moz-linear-gradient(#ffe688,#ffcf20);
        background: -o-linear-gradient(#ffe688,#ffcf20);
        background: linear-gradient(#ffe688,#ffcf20);
    }
    .loginBtn--webde:before {
        /*border-right: #BB3F30 1px solid;*/
        /* font-family: "Font Awesome 5 Brands"; content: "\f1a0";*/
        content:'';
        background-image: url('https://netid.ahoi.cloud/images/webde.svg');
        background-size: 35px 35px;
        background-position: center center;
        background-repeat: no-repeat;
    }
    .loginBtn--webde:hover,
    .loginBtn--webde:focus {
        background: -webkit-gradient(linear,left top,left bottom,from(#ffe688),to(#ffcf20));
        background: -webkit-linear-gradient(#ffe688,#ffcf20);
        background: -moz-linear-gradient(#ffe688,#ffcf20);
        background: -o-linear-gradient(#ffe688,#ffcf20);
        background: linear-gradient(#ffe688,#ffcf20);
    }
    /* 1und1.de */
    .loginBtn--1und1 {
        text-shadow: 0 -1px -1px #003d8f;
        background: -webkit-radial-gradient(circle at center 20%,#3d70b7 0%,#003d8f 100%);
        background: -moz-radial-gradient(circle at center 20%,#3d70b7 0%,#003d8f 100%);
        background: -o-radial-gradient(circle at center 20%,#3d70b7 0%,#003d8f 100%);
        background: radial-gradient(circle at center 20%,#3d70b7 0%,#003d8f 100%);
    }
    .loginBtn--1und1:before {
        /*border-right: #BB3F30 1px solid;*/
        /* font-family: "Font Awesome 5 Brands"; content: "\f1a0";*/
        content:'';
        background-image: url('https://netid.ahoi.cloud/images/1und1.svg');
        background-size: 35px 35px;
        background-position: center center;
        background-repeat: no-repeat;
    }
    .loginBtn--1und1:hover,
    .loginBtn--1und1:focus {
        background: -webkit-radial-gradient(circle at center 20%,#3d70b7 0%,#003d8f 100%);
        background: -moz-radial-gradient(circle at center 20%,#3d70b7 0%,#003d8f 100%);
        background: -o-radial-gradient(circle at center 20%,#3d70b7 0%,#003d8f 100%);
        background: radial-gradient(circle at center 20%,#3d70b7 0%,#003d8f 100%);
    }
    /* Gmx.net */
    .loginBtn--gmxnet {
        text-shadow: 0 -1px -1px #1c449b;
        background-color: #1c449b;
    }

    .loginBtn--gmxnet:before {
        /*border-right: #BB3F30 1px solid;*/
        /* font-family: "Font Awesome 5 Brands"; content: "\f1a0";*/
        content:'';
        background-image: url('https://netid.ahoi.cloud/images/gmxnet.svg');
        background-size: 35px 35px;
        background-position: center center;
        background-repeat: no-repeat;
    }
    .loginBtn--gmxnet:hover,
    .loginBtn--gmxnet:focus {
        background-color: #1c449b;
    }
    /* 7pass */
    .loginBtn--7pass {
        text-shadow: 0 -1px -1px #f0001e;
        background-color: #f0001e;
    }

    .loginBtn--7pass:before {
        /*border-right: #BB3F30 1px solid;*/
        /* font-family: "Font Awesome 5 Brands"; content: "\f1a0";*/
        content:'';
        background-image: url('https://netid.ahoi.cloud/images/7pass.svg');
        background-size: 35px 35px;
        background-position: center center;
        background-repeat: no-repeat;
    }
    .loginBtn--7pass:hover,
    .loginBtn--7pass:focus {
        background-color: #f0001e;
    }
    .background-line {
        color: #717171;
        display: table;
        margin: 6px 0;
        white-space: nowrap;
    }
    .background-line:after, .background-line:before {
        border-top: 1px solid #E5E5E4;
        content: '';
        display: table-cell;
        position: relative;
        top: 1em;
        width: 50%;
    }
    .sb{
        height: 50px;
        font-size: 30px;
        width: 50px;
        text-align: center;
        text-decoration: none;
        text-indent: -9999px;
    }
    .sb:before {
        text-align: center;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        box-sizing: border-box;
        position: absolute;
        top: 0;
        left: 0;
        width: 64px;
        padding: 10px;
        height: 100%;
        text-indent:0;
    }
    .sb:hover {
        opacity: 0.7;
    }
    .breadcrumbs>* {
        color: #555555;

    }
    .breadcrumb, .text--uppercase {
        text-transform: uppercase!important;
    }
    .push-tiny--left, .push-tiny--sides {
        margin-left: 12px!important;
    }
    .push-tiny--right, .push-tiny--sides {
        margin-right: 12px!important;
    }
    img:not([src]) {
        visibility: hidden;
    }
    img[data-src],
    img[data-srcset] {
        display: block;
        min-height: 1px;
    }

    /* Fixes Firefox anomaly during image load */
    @-moz-document url-prefix() {
        img:-moz-loading {
            visibility: hidden;
        }
    }
    .eventImage{
        display: block;
        min-height: 1px;
        max-width:100%; height: 100%; position: fixed;
        z-index: -1000;
    }
    #eventGalleryImageSearch{
        margin: 0!important;
    }
    body.event{
        display: flex;
        flex-direction: column;
        height: 100vh; /* Avoid the IE 10-11 `min-height` bug. */
    }
    .content {
        flex: 1 0 auto; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
    }
    .footer {
        flex-shrink: 0; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
    }
    .starred{
        color:#ffe01b;
    }
    .select2-result-repository{
        padding-top: 4px;
        padding-bottom: 3px;
    }
    .select2-result-repository__avatar {
        float: left;
        width: 60px;
        margin-right: 10px;
    }
    .select2-result-repository__meta {
         margin-left: 70px;
     }
    .select2-result-repository__title {
        color: black;
        font-weight: 700;
        word-wrap: break-word;
        line-height: 1.1;
        margin-bottom: 4px;
    }
    .select2-result-repository__description {
        font-size: 13px;
        color: #777;
        margin-top: 4px;
    }
    .select2-result-repository__statistics {
        display: inline-block;
        color: #aaa;
        font-size: 11px;
    }
    .nav-top{
        /*
        background: #fff;
        border-color: rgba(0,0,0,0.14);
        color: rgba(0,0,0,0.54);
        fill: rgba(0,0,0,0.54);
        border-bottom: 1px solid rgba(0,0,0,0.14);
        -webkit-transition: box-shadow 200ms ease-in-out;
        transition: box-shadow 200ms ease-in-out;
        -webkit-box-shadow: 1px 1px transparent;
        box-shadow: 0 2px 0 rgba(0,0,0,.03);*/


        background: rgba(255,255,255,0.9);
        border-bottom: 1px solid #f1f1f1;
    }
    @media only screen and (min-width: 40.0625em){

        .top-bar-section .dropdown li:not(.has-form):not(.active)>a:not(.button) {
            background:#fff;
            color: #555;

        }
        .top-bar-section .dropdown {

            border: 1px solid rgba(0,0,0,0.14);
        }

        .top-bar-section .has-dropdown>a:after {
            border-color: rgba(0,0,0,0.4) transparent transparent transparent;

        }
        .top-bar-section .dropdown li label {
            background: #fff;
            color:#555;
            white-space: nowrap;
            border-bottom: 1px solid rgba(0,0,0,0.14);
        }
        .contain-to-grid .top-bar {
            margin: 0 auto;
            margin-bottom: 0;
            max-width: 90rem;
        }
        .contain-to-grid .search {
            margin: 0 auto;
            margin-bottom: 0;
            max-width: 88rem;
        }

    }

    .support-button{
        color: #555555;
    }
    .support-button:hover{
        cursor: pointer;
        color: #555555;
    }
    .support-button:hover  fieldset{
        border: 1px solid #158cfb !important    ;
        cursor: pointer;
    }
    .font-changer span {
        cursor: pointer;
    }
    .js-font-decrease {
        font-size: 75%;
    }
    .js-font-increase {
        font-size: 125%;
    }
    .tabs dd>a, .tabs .tab-title>a {

        font-family: "Lato","Open Sans", sans-serif;
        font-weight: normal;
        font-size: 1rem;
        padding: 1rem 2rem;
    }
}



@media print {

    .header, .side-nav,.nav-top, .stack,.search {
        display: none;
    }

    @page {
        margin: 2cm;
    }

    a {
        text-decoration: none;

    }

    a:after {
        display: none;
        content: "";

    }


}
@media (prefers-color-scheme: dark) {
    body {
        color: hsla(0, 100%, 100%,0.85);
        background-color: hsl(0, 0%, 7%);
    }
    a{
        color: hsla(0, 100%, 100%,0.85);
    }
    .payment-card{

        -webkit-box-shadow: 0 7px 14px 0 rgba(60,66,87, 0.12), 0 3px 6px 0 rgba(255,255,255, 0.12);
        box-shadow: 0 7px 14px 0 rgba(60,66,87, 0.12), 0 3px 6px 0 rgba(255,255,255, 0.12);
        border-radius: 4px;

    }
    .payment-card .card-toolbar input[type=radio]:checked + label fieldset {
        border: 1px solid #fff;
    }
    .payment-card fieldset {
        background-color: #121212;
        border: 1px solid #121212;
    }
    .payment-card .card-bg {
        background-color: #1F1A24;
    }
    .payment-card table {
        background-color: transparent;
    }
    .subheader,label,.has-tip {

        color: hsla(0, 100%, 100%,0.85);

    }
    .progress {
        background-color:   hsl(210, 10%, 62%);;
        border: 1px solid  hsl(210, 10%, 62%);
        height: 1.5625rem;
        margin-bottom: 0.625rem;
        padding: 0.125rem;
    }
    input[type="text"][readonly] {
        background-color: hsl(0, 0%, 7%);
        color: hsla(0, 100%, 100%,0.85);
        cursor: not-allowed;
    }
    .dropzone {
        background-color: hsl(0, 0%, 7%)!important;
        color: hsla(0, 100%, 100%,0.85)!important;
    }
    .nav-top {
        background-color: hsl(0, 0%, 7%);
        border-bottom: 1px solid #f1f1f1;
    }
    .typeahead__dropdown .typeahead__dropdown-item>a, .typeahead__list .typeahead__item>a{
        color: hsla(0, 100%, 100%,0.85);
    }
    .top-bar-section,.top-bar-section .has-form, .top-bar-section li:not(.has-form) a:not(.button), .top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button), .top-bar-section li:not(.has-form) a:not(.button){
        background-color: hsl(0, 0%, 7%);
        border-color: #b9b9b9;
        color: hsla(0, 100%, 100%,0.85);
    }
    .top-bar-section .dropdown li label {
        background-color: hsl(0, 0%, 7%);
        color: hsla(0, 100%, 100%,0.60);
        white-space: nowrap;
        border-bottom: 1px solid rgba(255,255,255,0.14);
    }

    h1, h2, h3, h4, h5, h6 {
        color: hsla(0, 100%, 100%,0.85);
    }
    table  tr th, table tr td, table thead tr th, table thead tr td {
        color: hsl(0, 100%, 100%);

    }

    table thead {
        background: #343a40;
    }
    table tr.even, table tr.alt, table tr:nth-of-type(even) {
    background-color: rgba(255,255,255,.05);
    }
    table {
        background-color: #343a40;
        border: solid 1px #f1f1f1;

    }
    .alert-color {
        color: #CF6679 !important;
    }
    input:not([type]), input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="color"], textarea{
        background-color: hsl(0, 0%, 7%);
        color: hsl(0, 100%, 100%);

    }
    input:not([type]):focus, input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="color"]:focus, textarea:focus{
        background-color: hsl(0, 0%, 7%);
        filter: contrast(88%);
        border-color: #fff;
}
    input:not([type]):hover, input[type="text"]:hover, input[type="password"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="month"]:hover, input[type="week"]:hover, input[type="email"]:hover, input[type="number"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="time"]:hover, input[type="url"]:hover, input[type="color"]:hover, textarea:hover{
        background-color: hsl(0, 0%, 7%);
        filter: contrast(94%);
    }
    .search .search-field {
        filter: brightness(0) invert(1);
        background-color: transparent !important;
    }
    .reveal-modal {

        background-color: hsl(0, 0%, 7%);
        padding: 1.875rem;
        border: solid 1px #666;
        box-shadow: 0 0 10px rgba(255,255,255,0.4);
    }
    .panel {
        border-color: #d8d8d8;
        background: #343a40;
        color: hsla(0, 100%, 100%,0.85);
    }
    .tabs dd.active>a, .tabs .tab-title.active>a {
        background-color: rgba(255,255,255,.05);
        color: hsla(0, 100%, 100%,0.90);
    }
    .tabs dd>a:hover, .tabs .tab-title>a:hover {
        background-color: rgba(255,255,255,.08);
    }
    .tabs dd>a, .tabs .tab-title>a {
        display: block;
        background-color: #343a40;
        color: hsl(0, 100%, 100%);


    }
    button.secondary, .button.secondary {
        background-color: rgba(255,255,255,.05);
        border-color: #b9b9b9;
        color: hsla(0, 100%, 100%,0.90);
    }
    button.secondary:hover, button.secondary:focus, .button.secondary:hover, .button.secondary:focus {
        color: hsla(0, 100%, 100%,0.90);
    }
    button.secondary:hover, button.secondary:focus, .button.secondary:hover, .button.secondary:focus {
        background-color: #343a40;
    }
    select:focus {
        background-color: #343a40;
        border-color: #999;
    }
    select {
        background-color: #343a40;
        border-color: #fff;
        color: hsla(0, 100%, 100%,0.85);
    }
    .typeahead__dropdown, .typeahead__list {

        color: hsla(0, 100%, 100%,0.85);
        background-color: hsl(0, 0%, 7%);

    }
    .typeahead__dropdown>li>a, .typeahead__list>li>a {

        color: hsla(0, 100%, 100%,0.85);
    }
    #org_logo{
        filter: brightness(0) invert(1);
    }
    .select2-container--default .select2-results__option .select2-results__option, .select2-results__option {

        background: #343a40;
        color: hsla(0, 100%, 100%,0.85);
    }
    .select2-container--default .select2-results__group {
        background: #343a40;
        color: hsla(0, 100%, 100%,0.85);
    }
    p{
        color: hsla(0, 100%, 100%,0.85);
    }
    .support-button{
        color: hsla(0, 100%, 100%,0.85);
    }
    .support-button:hover{
        color: hsla(0, 100%, 100%,0.85);
    }
    .pricing-table .description,.pricing-table .cta-button {
        background: #343a40;

    }

}