@font-face {
    font-family: 'FuturaPT';
    src: url('../fonts/FuturaPT.eot'),
    url('../fonts/FuturaPT.ttf');
}

@font-face {
    font-family: 'FuturaPT';
    src: url('../fonts/FuturaPTBoldNew.eot'),
    url('../fonts/FuturaPTBoldNew.ttf');
    font-weight: bold;
}

@font-face {
    font-family: 'Calibri';
    src: url('../fonts/Calibri.eot'),
    url('../fonts/Calibri.ttf');
}

@font-face {
    font-family: 'Calibri-Bold';
    src: url('../fonts/Calibri-Bold.eot'),
    url('../fonts/Calibri-Bold.ttf');
}

@font-face {
    font-family: 'Arial Black';
    font-style: normal;
    font-weight: bold;
    src: url('../fonts/ArialBlackBold.eot'),
    url('../fonts/ArialBlackBold.ttf');
}

html, body {
    min-height: 100% !important;
    height: 100%;
}

html {
    scroll-behavior: smooth;
}

body{
    font-family: FuturaPT;
    font-variant: normal;
    margin: 0;
    font-size: 16px;
    color:  #373e4a;

    /* Disable Text selection */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                          supported by Chrome, Edge, Opera and Firefox */
}

a {
    text-decoration: none;
    color: #0066a4;
}

input, select{
    font-family: FuturaPT;
    margin: 10px 0 0 0;
    padding: 5px;
    width: calc(80% - 14px);
    font-size: 16px;
    border-radius: 4px;
}

/* Login */
#loginbody{
    margin: auto;
    text-align: center;
    padding: 20px 0 20px;
    width: 550px;
    /*height: 100%;*/
    margin-top: 50px;
    background-color:  #e5e5e5;
    border-radius: 8px;
    text-align: center;
}

#loginbody .logo {
    width: 70%;
}

#loginbody select{
    width: 80%;
}

#loginbody h1{
    font-size: 30px;
    font-weight: 800;
    color:  #003768;
}

#loginbody .chosen-container{
    margin: 10px 0 0 0;
    width: 80%;
}

#loginbody button{
    height: auto;
    padding: 12px 20px 12px 20px;
    margin: 10px 10px 0 10px;
    font-size: 20px;
}

#loginbody button:disabled{
    cursor: default;
    background-color:  #96a0aa;
}

#loginbody button:focus{
    outline-style: none;
    padding: 10px 18px 10px 18px;
}

#loginbody label {
    display: block;
    width: 68%;
    margin-top: 5%;
    margin-bottom: 5%;
    padding-left: 20%;
    font-size: 1rem;
    text-align: justify;
}

#loginbody label input[type=checkbox] {
    position: absolute;
    left: 12%;
    top: 30px;
    width: 13px;
    height: 13px;
    padding: 0;
    margin: 0;
    vertical-align: middle;
    overflow: hidden;
    transform: scale(1.2);
}

@media screen and (max-width: 470px) {
    #loginbody {
        position: relative;
        top: 0;
        left: 0;
        max-width: calc(100% - 40px);
        /*min-height: calc(100% - 40px);*/
        width: auto;
        height: auto;
        margin: 20px;
    }
}
/* /Login */

@media only screen{
    button{
        /*
        margin-top: 30px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        */
    }
}

@media only screen and (max-width: 600px) {
    /* for error messages in mobile version */
    #top{
        margin: 0px 10px 0px 10px !important;
    }
    #unsupported_browser{
        margin: 0px 10px 0px 10px !important;
        font-size: 15px !important;
        text-align: left;
        padding: 20px 10px 20px 10px !important;
    }
    #sitebody{
        margin: 15px 10px 0px 10px !important;
        /*margin: 20px !important;*/
        width: 95% !important;
        display: inline-block !important;
        padding: 0px !important;
        font-size: 15px !important;
        /*max-height: calc(100% - 120px);*/
    }
}

#top{
    margin: 0px 60px 0 60px;
    top: 0px;
    /*overflow: hidden;*/
    height: auto;
    padding-bottom: 0px;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    /*background: url("../images/bground.jpg") fixed repeat-x #fff;*/
    /*background:  #373e4a;*/
}

#top .visible {
    opacity: 1;
    margin-top: 10px;
}

#mainnavi{
    z-index: 140;
    font-size:0.69em;
    font-size: 14px;
    border-left: 1px solid  #003768;
    border-bottom: 1px solid  #003768;
    border-right: 1px solid  #003768;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top: 7px solid  #003768;
    background-color: white;
    position:relative;
    font-weight: bold;
}

#mainnavi .devmode{
    float: left;
    width: inherit;
    height: 60px;
    display: table;
    background-color:  #ef4035;
    color:  #fff;
    border-bottom-left-radius: 8px;
}

#mainnavi .devmode span{
    display: table-cell;
    vertical-align: middle;
    padding: 0 5px 0 5px;
    font-weight: normal;
}

#mainnavi #logospace {
    float: left;
    cursor: pointer;
}
#mainnavi #logospace img{
    margin: 8px;
    height: 40px;
}

#mainnavi #menus{
    display: inline-block;
    /*width: 100%;*/
    height: 100%;
    min-height: 60px;
    float: left;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    max-width: calc(100% - 115px);
}

#mainnavi #menus a{
    display: inline-block;
    text-decoration: none;
    font-weight: 600;
    margin: 20px 20px;
    white-space: nowrap;
    position: relative;
    cursor: pointer;
}

#mainnavi #menus .logintitle{
    display: table;
    position: relative;
    float: left;
    height: 100%;
    width: 100%;
    min-height: 60px;
}

#mainnavi #menus .logintitle span{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color:  #373e4a;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
}

#mainnavi .userdata{
    position: absolute;
    right: 0px;
    top: 0;
    text-align: right;
    background-color:  #003768;
    border-bottom-right-radius: 8px;
    color: white;
    height: 100%;
    background-image: linear-gradient( #003768,#0066a4);
    font-size: 16px;
}

#mainnavi .userdata .info{
    border-left: 1px solid white;
    border-right: 1px solid white;
    float: left;
    width: inherit;
    text-align: left;
    height: 100%;
    display: table;
    padding: 0 10px 0 10px;
}

#mainnavi .userdata .info span{
    display: table-cell;
    vertical-align: middle;
}

#mainnavi .userdata .abmelden{
    display: table;
    float: right;
    width: inherit;
    height: 100%;
    padding: 0 10px 0 10px;

}

#mainnavi .userdata .abmelden:hover{
    text-decoration: underline;
    cursor: pointer;
}

#mainnavi .userdata .abmelden span{
    display: table-cell;
    vertical-align: middle;
}

#sitebody{
    position: relative;
    /*color:#95a7c4;*/
    margin: 10px 0px 10px 60px;
    /*padding: 10px;*/
    width: calc(100% - 120px);
    height: calc(100% - 90px);
    background-color:  #e5e5e5;
    border-radius: 8px;
    text-align: center;
}

#unter_entwicklung{
    padding: 50px;
    widt: 100%;
    height: auto;
    font-size: 20px;
    font-weight: bold;
}

#unsupported_browser{
    padding: 50px;
    widt: 100%;
    height: auto;
    font-size: 20px;
    font-weight: bold;
    text-align: left;
}

#dynamic{
    /* position:fixed;
    top: calc((100% - 500px)/2);
    left: calc((100% - 500px)/2);
    */
    margin: auto;
    text-align: center;
    padding: 20px 0 20px;
    width: 550px;
    /*height: 100%;*/
    margin-top: 50px;
    background-color:  #e5e5e5;
    border-radius: 8px;
    text-align: center;
}

#dynamic .logo {
    width: 70%;
}

#dynamic select{
    margin: 10px 0 0 0;
    padding: 5px;
    width: 83%;
    font-size: 16px;
}

.datenschutz{
    text-align: justify;
    margin: 10px auto 0 auto;
    padding: 5px;
    width: 82%;
    font-size: 12px;
}

.datenschutz input[type=checkbox]{
    margin-right: 10px;
    -moz-transform: scale(1.50);
    -webkit-transform: scale(1.50);
    -o-transform: scale(1.50);
    transform: scale(1.50);
}

h1{
    font-size: 30px;
    font-weight: 800;
    color:  #003768;
}

button{
    color: #fff;
    height: auto;
    -moz-border-radius: 200px;
    border-radius: 4px;
    margin: 30px 0px 0px 0px;
    padding: 12px 20px 12px 20px;
    font-size: 12px;
    background-color:  #373e4a;
    border: none;
    text-align: center;
    cursor: pointer;
    font-size: 20px;
    margin: 10px;
    /* padding: 12px; */
}

button:disabled{
    cursor: default;
    background-color:  #96a0aa;
}

button:focus{
    outline-style: none;
}

#remoteAudio{
    display: none;
}

#remoteVideo{
    max-width: 100%;
    max-height: 100%;
    height: calc(100% - 50px); /* Thumbnail div minheight is 50px */
    margin: 0 0 -3px 0;
    z-index: 1;
    object-fit:cover;
}

#localVideo{
    max-height: 100%;
    max-width: 100%;
    width: 100%;
    z-index: 1;
}

.partner_info{
    position: absolute;
    top: 0;
    width: 100%;
    display: block;
    text-align: left;
    margin: 10px;
    line-height: 30px;
}

.partner_info .hidden{
    display: none;
}

.partner_info .show {
    display: block;
}

.video_buttons{
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
    display: block;
}

#video_buttons_1 {
    top: 0;
    z-index: 20;
}

#video_buttons_2{
    position: relative;
    margin-top: -65px;
    z-index: 25;
}

#video_buttons_3{
    z-index: 20;
}

.round-button {
    display:inline-block;
    width:50px;
    height:50px;
    line-height:50px;

    border-radius: 50%;
    color:#f5f5f5;
    text-align:center;
    text-decoration:none;

    background-color: #333 !important;

    font-size:20px;
    font-weight:bold;
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: center;
    margin: 5px;
    opacity: .5;
}

.round-button-active{
    animation-name: button_onclick;
    animation-duration: 0.8s;
}

/* Standard syntax */
@keyframes button_onclick{
    from {background-color:  #ef4035;}
    to {background-color: limegreen;}
}

.round-button:focus { outline-style: none; }

.round-button:disabled, .round-button:hover:disabled{
    background-color:  #96a0aa;
}

.round-button:hover {
    background:  #ef4035;
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: center;
    opacity: 1 !important;
}

.camera, .camera:hover{
    float: inherit;
    /* background-image: url("/images/camera.png"); */
    /* background-image: url("/images/app_camera_shot_w.png"); */
    background-image: url("/images/app_camera_shooter_w1.png");
    opacity: 1 !important;
}

.camera:disabled, .camera:hover:disabled{
    /*background-color: rgba(248, 247, 216, 0.7);*/
    background-image: url("/images/app_camera_shooter_disabled.png");
}

.switchcamera, .switchcamera:hover{
    /* background-image: url("/images/switch_camera.png"); */
    background-image: url("/images/app_flip_camera_w.png");
}
sbutton:hover:focus:active {
    top: 2px;
    outline: 0 !important;
}

.reconnect, .reconnect:hover{
    float: right;
    /* background-image: url("/images/reconnect.png"); */
    background-image: url("/images/app_reload_w.png");
}

.stopstream, .stopstream:hover{
    background-image: url("/images/stop.png");
}

.savephoto, .savephoto:hover{
    background-size: 25px;
    background-image: url("/images/save.png");
}

.logout, .logout:hover{
    float: right;
    /* background-image: url("/images/logout.png"); */
    background-image: url("/images/app_close_w.png");
}

.mic, .mic:hover{
    float: right;
    background-image: url("/images/app_mic.png");
}

.mic_disabled, .mic_disabled:hover{
    float: right;
    background-image: url("/images/app_mic_disabled.png");
}

.micswitch, .micswitch:hover{
    float: right;
    background-size: 40px;
    background-image: url("/images/app_mic_switch.png");
    display: none;
}

#video_quality {
    background-size: contain;
    width: 50px;
    height: 50px;
    display: block;
    float: right;
    margin: 5px;
}

#video_quality.low_144 {
    background-image: url("/images/icon_quality_144p.png");
}

#video_quality.low_240 {
    background-image: url("/images/icon_quality_240p.png");
}

#video_quality.low_360 {
    background-image: url("/images/icon_quality_360p.png");
}

#video_quality.medium_480 {
    background-image: url("/images/icon_quality_480p.png");
}

#video_quality.high_720 {
    background-image: url("/images/icon_quality_720p.png");
}

#video_quality.high_1080 {
    background-image: url("/images/icon_quality_1080p.png");
}

#video_quality.low_144 .low_144,
#video_quality.low_240 .low_240,
#video_quality.low_360 .low_360,
#video_quality.medium_480 .medium_480,
#video_quality.high_720 .high_720,
#video_quality.high_1080 .high_1080 {
    display: block;
}

#video_quality.medium {
    background-image: url("/images/circle_orange.png");
}

#video_quality.high {
    background-image: url("/images/circle_green.png");
}

#video_quality .video_quality_title {
    display : none;
    height  : 100%;
    width   : 100%;
}

#video_quality.invisible {
    visibility: hidden;
}

#snapButton{
    background-size: 40px !important;
}

.totop, .totop:hover{
    border-color:  #96a0aa;
    background-image: url("/images/app_totop_w.png");
    display: none;
    position: fixed;
    bottom: 5px;
    right: 0px;
    z-index: 20;
}

.vorherige, .vorherige:hover{
    background-image: url("/images/app_next.png");
    position: absolute;
    top: calc(50% - 25px);
    right: -75px;
}

.nachste, .nachste:hover{
    background-image: url("/images/app_prev.png");
    position: absolute;
    top: calc(50% - 25px);
    left: -75px;
}

.snapPhotos{
    display: block;
    position: absolute;
    min-height: 51px;
    padding: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color:  #e5e5e5;
    border-radius: 8px;
    text-align: center;
    z-index: 21;
}

.snapPhotos .bigphotos{
    text-align: center;
    padding: 10px;
    height: 800px;
}

.snapPhotos .bigphotos canvas {
    margin: 0 0 -3px 0;
    /*max-width: calc(100% - 80px);*/
}
.modal-content .canvas-container,
.snapPhotos .bigphotos .canvas-container {
    position: absolute;
    margin: 0 auto;
}

canvas-container{
    overflow: scroll;
}

.snapPhotos .thumbnails{
    top: 0;
    width: 100%;
    min-height: 41px;
    z-index: 100;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background-color:  #373e4a;
    padding: 10px 0 0 0;
    margin: 0;
    transition: all 0.4s ease-in-out;
}

.snapPhotos .thumbnails #thumbnails-control {
    position: absolute;
    top: 10px;
    right: 3px;
    cursor: pointer;
}

.snapPhotos .thumbnails ul{
    text-align: left;
    margin: 0 30px 0 0;
    padding-left: 0;
    display: flex;
    overflow-x: auto;
}

.snapPhotos .thumbnails ul li{
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 0 0 10px 10px;
    border-radius: 8px;
    border: 1px solid white;
    cursor: pointer;
}
.snapPhotos .thumbnails ul li:hover {
    opacity: 0.8;
}

.snapPhotos .thumbnails ul li canvas {
    display: none;
}

.snapPhotos .thumbnails ul li span.material-icons {
    position: absolute;
    font-size: 30px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    color: white;
    opacity: 0;
    transition: .3s ease;
}

.snapPhotos .thumbnails ul li:hover span.material-icons {
    opacity: 1;
}

.snapPhotos .thumbnails ul li .title{
    font-weight: bold;
    text-align: center;
    color: white;
    width: 100px;
    padding: 5px 0;
    font-size: 16px;
}


.snapPhotos .thumbnails ul li canvas{
    display: none;
    margin: 0;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.snapPhotos .thumbnails ul li canvas:hover{
    cursor: pointer;
}

/* Expand */
.snapPhotos.expanded .thumbnails ul li canvas {
    display: block;
}

#global_in_progress{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 310;
    width: 100%;
    height : 100%;
    min-height : 100px;
    /*background-image: url("../images/ProgressIcon.gif");*/
    background-image: url("../images/pos_logo_min.gif");
    background-repeat: no-repeat;
    background-size: 100px;
    background-position: center center;
    background-color: rgba(255,255,255,0.7);
    display: none;
}

#global_in_progress .wrapper {
    display: none;
    position: fixed;
    width: 120px;
    height: 120px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 212;
}

/* IE doesnt Support supports() function */
@supports (transform: translate(-50%)) {
    #global_in_progress {
        background-image: none;
    }
    #global_in_progress .wrapper {
        display: block;
    }
}

#global_in_progress .wrapper .outer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(180deg, #ef4035 0%, #003768 50%);
    animation: rotation 1s linear infinite;
}
#global_in_progress .wrapper .outer .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 99%;
    height: 99%;
    background: radial-gradient(50% 96% at bottom, white 99%, transparent) top no-repeat, radial-gradient(50% 100% at top, white 99%, transparent) bottom no-repeat;
    background-size: 100% 50%;
}
#global_in_progress .wrapper .logo {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    top: 35px;
    left: 35px;
    z-index: 213;
}
/* Remove dotted line on Firefox*/
#global_in_progress .wrapper .outer,
#global_in_progress .wrapper .outer:focus,
#global_in_progress .wrapper .outer::-moz-focus-inner,
#global_in_progress .wrapper .outer .inner,
#global_in_progress .wrapper .outer .inner:focus,
#global_in_progress .wrapper .outer .inner::-moz-focus-inner {
    border: none;
    outline: 0;
    outline-width: 0;
    outline-style: none;
    -moz-outline-style: none;
}
#global_in_progress .wrapper .outer .inner.samsungbrowser {
    background-size: 100% 50.2%;
}
@supports (-moz-appearance:none) {
    #global_in_progress .wrapper .outer .inner {
        background-size: 100% 50.4%;
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

#global_in_progress .wrapper {
    animation: fadein 2s;
    -moz-animation: fadein 2s;
    -webkit-animation: fadein 2s;
    -o-animation: fadein 2s;
}

#global_in_progress #possvg .st0 {fill: #ef4035;}
#global_in_progress #possvg .st1{fill: #0066a4;}
#global_in_progress #possvg .st2{fill: #003768;}

/* FADE IN */
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

#global_alert{
    position:fixed;
    z-index: 400;
    width: 100%;
    height : 100%;
    min-height : 100%;
    background-color: rgba(255,255,255,0.7);
    display: none;
    vertical-align: middle;
    text-align: center;
}
#global_alert .middle{
    display: table-cell;
    vertical-align: middle;
}

#global_alert .middle .dynamic{
    background-color: white;
    display: inline-block;
    margin: -10% auto 0 auto;
    padding: 15px 20px 15px 20px;
    border: 1px solid  #003768;
    border-radius: 3px;
    -webkit-box-shadow: 5px 5px 15px 0px  #96a0aa;
    -moz-box-shadow: 5px 5px 15px 0px  #96a0aa;
    box-shadow: 5px 5px 15px 0px  #96a0aa;
}

#global_alert .middle .dynamic .text{
    overflow: auto;
    max-height: 600px;
}

#global_alert .middle .dynamic button{
    margin: 5px 0 0 0;
}

#impress{
    font-size: 12px;
    margin-top: 10px;
    margin-left: 10px;
    text-align: center;
    color: #acacac;
}

#nicht_bereit{
    font-size: 16px;
    position: fixed;
    z-index: 20;
    width: 100%;
    height : 100%;
    text-align: center;
    display: table;
}
#nicht_bereit .middle{
    display: table-cell;
    vertical-align: middle;
}

#nicht_bereit .middle .dynamic{
    background-color: white;
    display: inline-block;
    margin: -10% auto 0 auto;
    border-radius: 10px;
    color: #fff;
    background-color: #333;
    opacity: .7;
    padding: 10px 15px 10px 15px;
}


#partner_name span{
    font-weight: bold;
}

#requirements{
    border-collapse: collapse;
    border-spacing: 0px;
}

#requirements td{
    background-size: 20px !important;
    padding: 10px 0 10px 25px;
    background-repeat: no-repeat;
    border: none;
    /*background-position: center left;*/
    background-position-x: 12px;
    background-position-y: center;

}

#requirements .android{
    background-image: url("/images/os_android.png");
}

#requirements .apple{
     background-image: url("/images/os_apple.png");
}

#requirements .browser_chrome{
    background-image: url("/images/browser_chrome.png");
}

#requirements .browser_firefox{
    background-image: url("/images/browser_firefox.png");
}

#requirements .browser_opera{
    background-image: url("/images/browser_opera.png");
}

#requirements .browser_android{
    background-image: url("/images/browser_android.png");
}

#requirements .browser_safari{
    background-image: url("/images/browser_safari.png");
}

.browsercheck_table {
    width: 100%;
    text-align: center;
    border: 0;
    border-collapse: separate;
    /*border-spacing: 0 5px;*/
    border-spacing: 10px;
}

.browsercheck_table thead {
    border-bottom:  #003768;
}

.browsercheck_table thead tr th {
    border-bottom: 1px solid  #003768;
    border-collapse: separate;
    border-spacing: 5px 5px;
    background-position-x: 10px;
    background-position-y: center;
    background-size: 25px;
    background-repeat: no-repeat;
    font-size: 18px;
    padding: 10px 10px 10px 30px;
}

.browsercheck_table tbody tr#first td {
    border-top: 3px solid #4d4d4d;
    border-collapse: separate;
    border-spacing: 5px 5px;
}

#requirements > tfoot > tr > td {
    padding: 0;
    height: 48px;
}

#requirements > tfoot > tr > td > a > img {
    width: 135px;
}

#mit_photo_box{
    position: absolute;
    left: 10px;
    top: -40px;
    height: 75px !important;
    width: 75px !important;
    border-radius: 50%;
    border: 7px solid #fefefe;
    background: url("/images/mit_default.jpg") 50% 50% no-repeat;
    background-size: 75px;
    overflow:hidden;
    text-align: center;
    z-index: 35;
}

#mit_photo_box.hidden{
    display: none;
}

#mit_photo {
    height: 75px;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    z-index: 30;
}

.browser_check{
    font-size: 30px;
    padding-left: 55px;
    line-height: 40px;
    height: 40px;
    margin-bottom: 30px;
}

.check_success{
    background-image: url("/images/check_success.png");
    background-size: 40px;
    background-repeat: no-repeat;
    border: none;
}

.check_failed{
    background-image: url("/images/check_failed.png");
    background-size: 40px;
    background-repeat: no-repeat;
    border: none;
}

/* Modal */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 300; /* Sit on top */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /*overflow: auto; !* Enable scroll if needed *!*/
    /*background-color: rgb(0,0,0); !* Fallback color *!*/
    /*background-color: rgba(0,0,0,0.4); !* Black w/ opacity *!*/
    border-top-left-radius:  10px;
    border-top-right-radius:  10px;
    border-bottom-left-radius:  10px;
    border-bottom-right-radius:  10px;
    transition: all ease 1s;
    -webkit-box-shadow: 0 5px 15px 3px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0 5px 15px 3px rgba(0, 0, 0, 0.7);
    box-shadow: 0 5px 15px 3px rgba(0, 0, 0, 0.7);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
}

.modal-content header {
    position: relative;
    /*margin-bottom: 20px;*/
    min-height: 50px;
    line-height: 50px;
    text-align: center;
    background-color:  #373e4a;
    border-top-left-radius:  10px;
    border-top-right-radius:  10px;
    color: #acc3d5;
}

/* The Close Button */
.modal-content header .modalclose {
    position: absolute;
    top: 0;
    right: 20px;
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.modal-content footer {
    background-color:  #373e4a;
    border-bottom-left-radius:  10px;
    border-bottom-right-radius:  10px;
}

.modal-content .photo-container {
    overflow: auto;
    text-align: center;
}

.modalclose:hover,
.modalclose:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
/* Modal END */

/** TOAST BEGIN */
#toast {
    visibility: hidden;
    max-width: 50px;
    height: 50px;
    margin: auto;
    background-color:  #2f6995;
    color:  #fff;
    text-align: center;
    border-radius: 2px;
    position: fixed;
    z-index: 150;
    left: 0;
    right:0;
    bottom: 30px;
    font-size: 17px;
    white-space: nowrap;
}
#toast #icon{
    width: 50px;
    height: 50px;
    float: left;
    padding-top: 16px;
    padding-bottom: 16px;
    box-sizing: border-box;
    background-color:  #003768;
    color: #fff;
}
#toast #text{
    color: #fff;
    padding: 16px;
    overflow: hidden;
    white-space: nowrap;
}

#toast.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
    animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
}

@-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes expand {
    from {min-width: 50px}
    to {min-width: 350px}
}

@keyframes expand {
    from {min-width: 50px}
    to {min-width: 350px}
}
@-webkit-keyframes stay {
    from {min-width: 350px}
    to {min-width: 350px}
}

@keyframes stay {
    from {min-width: 350px}
    to {min-width: 350px}
}
@-webkit-keyframes shrink {
    from {min-width: 350px;}
    to {min-width: 50px;}
}

@keyframes shrink {
    from {min-width: 350px;}
    to {min-width: 50px;}
}

@-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 60px; opacity: 0;}
}

@keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 60px; opacity: 0;}
}
/** TOAST END */



#mainnavi .userdata{
    /*visibility: hidden;*/
    font-weight: 600;
    position: absolute;
    right: 0;
    top: -7px;
    text-align: right;
    border-bottom-right-radius: 8px;
    color: white;
    height: calc(100% + 7px);
    background-color:  #003768;
    background-image: linear-gradient( #003768,#0066a4);
}
#mainnavi .userdata a{
    color: white;
}
#mainnavi .userdata #userdata_flags{
    float: left;
    width: inherit;
    height: 100%;
    padding: 0 10px 0 10px;
}

#mainnavi .userdata #userdata_flags a{
    padding: 4.5px;
    text-decoration: none;
}

#mainnavi .userdata #userdata_flags .sprachesel{
    /*position: relative;*/
    /*padding: 14px 3px 14px 3px;*/
    cursor: pointer;
    height: 100%;
    display: table;
}

#mainnavi .userdata #userdata_flags .sprachesel a{
    display: table-cell;
    vertical-align: middle;
}

#mainnavi .userdata #userdata_flags img{
    border: 0px;
    padding: 0px;
    margin: 0 0 2px 0;
    vertical-align: middle;
}

#mainnavi .userdata #userdata_flags #SprachenList{
    font-weight: normal;
    z-index: -1;
    /*visibility: hidden;*/
    min-width: 125px;
    width: auto;
    background-color: white;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    vertical-align: middle;
    border: 1px solid  #96a0aa;
    border-radius: 8px;
    position: fixed;
    margin-top: -180px;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}

#mainnavi .userdata #userdata_flags  #SprachenList a {
    float: left;
    display: inline-block;
    cursor: pointer;
}

/* Change color of dropdown links on hover */
#mainnavi .userdata #userdata_flags  #SprachenList a:hover {
    text-decoration: underline;
    border-radius: 8px;
}

#mainnavi .userdata #userdata_flags #SprachenList:after{
    content: "";
    position: absolute;
    left: 50%;
    margin-left: -50px;
    top: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0px 10px 10px 10px;
    border-color: transparent transparent  #96a0aa transparent;
}

#mainnavi .userdata #userdata_flags #SprachenList.visible{
    visibility: visible;
    opacity: 1;
    margin-top: 10px;
    height: auto;
}



#mainnavi .userdata #userdata_flags #SprachenList a {
    color: black;
    padding: 10px 15px 10px 10px;
}

#mainnavi .userdata #userdata_info{
    border-left: 1px solid white;
    float: left;
    width: inherit;
    text-align: left;
    height: 100%;
    display: table;
    padding: 0 10px 0 10px;
}

#mainnavi .userdata #userdata_info span{
    display: table-cell;
    vertical-align: middle;
}

#mainnavi .userdata #userdata_abmelden{
    border-left: 1px solid white;
    display: table;
    float: right;
    width: inherit;
    height: 100%;
    padding: 0 10px 0 10px;
}

#mainnavi .userdata #userdata_abmelden:hover{
    text-decoration: underline;
    cursor: pointer;
}

#mainnavi .userdata #userdata_abmelden span{
    display: table-cell;
    vertical-align: middle;
}