#fraud_message, #message{
    display: none;
    color: #cc0000;
}

#button_codecheck{
    margin-bottom: 1em;
}

.container, .container_enter_code, #container_bulletpoints_highlights, #container_trafficlight_lights, #container_explanation{
    display: flex;
    flex-flow: column;
    align-content: center;
}

#container_explanation{
    align-items: center;
}

.image_explanation{
    max-height: 10em;
    max-width: 10em;
    margin-top: 2em;
    margin-bottom: 1em;
}

#container_trafficlight_lights{
    margin: 0 auto 1em auto;
}

#container_trafficlight_name{
    margin-bottom: 1em;
}

.icon_update{
    height: 2em;
    opacity: 0;
}

.icon_update_active{ 
    animation-name: icon_update;
    animation-duration: 1s;
}

@keyframes icon_update {
  50%  {opacity: 0.8;}
  100% {transform: rotate(360deg);}
}

.icon_button{
    height: 4em;
    opacity: 0.8;
    transition: 0.2s;
    padding: 0.5em;
}

.icon_button:hover{
    background: rgba(192,192,192,.2);
    border-radius: 50%;
    box-shadow:0 1px 1px rgba(0,0,0,.1);
    cursor: pointer;
}

.icon_button:active{
    background: rgba(192,192,192,.8);
}

.note_card{
    background-color: #fff;
    color: rgba(0, 0, 0, 0.87);
    max-width: 75vw;
    margin: 1em auto 1em auto;
    padding: 0.5em;
    border-radius: 4px;
    font-size: 1.5em;
    font-weight: 100;
    border:1px solid #c6c6c6;
    box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
    text-align: center;
    font-family: "Roboto", sans-serif;
}

#container_bulletpoints_highlights div{
    margin-top: 1em;
}

#container_trafficlight_type{    
    display: none;
}

.container_trafficlight_type{
    align-items: center;
    justify-content: center;
}

#trafficlight_type1{
    margin-right: 2em;
}

#trafficlight_type3{
    margin-left: 2em;
}

#container_enter_code_inputbox, .container_trafficlight_type{
    display: flex;
    flex-flow: row;
    align-content: center;
    margin: 1em auto 1em auto;
    
}

.code_input, .input_standard{
    margin: 0 0.25em 0 0.25em;
}

.input_standard{
    font-size: 2em;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #dfe1e5;
    max-width: 80vw;
}

.input_standard:hover{
    border:1px solid #c6c6c6;
    box-shadow:0 1px 1px rgba(0,0,0,.1);
}

.code_input > input{
    font-size: 2em;
    text-align: center;
    max-width: 3em;
    border-radius: 0.5em;
    border: 1px solid #dfe1e5;
}

.code_input > input:hover{
    border:1px solid #c6c6c6;
    box-shadow:0 1px 1px rgba(0,0,0,.1);
}

#container_userlink, #container_adminlink{
    display: block;
    max-width: 90vw;
}

#trafficlight_userlink, #trafficlight_adminlink{
    display: block;
    font-size: 1em;
    color: #3366cc;
    word-break: break-all;
}

#trafficlight_userlink:hover, #trafficlight_adminlink:hover{
    color: #003399;
}

#trafficlight_share_adminlink_options_container, #trafficlight_share_userlink_options_container{
    display: none;
}

#trafficlight_share_adminlink_options, #trafficlight_share_userlink_options{
    display: flex;
    flex-flow: column;
    align-items: center;    
}

#icon_share_user{
    margin-bottom: 2em;
}

@media (min-width: 60em){
    .code_input > input{
        max-width: 5em;
    }
    
    .code_input{
        margin: 0 0.5em 0 0.5em;
    }
    
    #container_bulletpoints_highlights{
        display: flex;
        flex-flow: row;
        align-content: center;
        margin: 1em auto 1em auto;
    }
    #container_bulletpoints_highlights div{
        margin: 0 1em 0 1em;
    }        
}

.button_standard{
    background-image:linear-gradient(to top,#f5f5f5,#f1f1f1);
    background-color: #f2f2f2;
    color: #5F6368;
    margin: 0.5em;
    padding: 0.5em;
    border: 1px solid #f2f2f2;
    border-radius: 4px;
    font-size: 1.5em;
    text-decoration: none;
}

.button_standard:hover{
    background-color:#f8f8f8;
    background-image:linear-gradient(to top,#f8f8f8,#f1f1f1);
    border:1px solid #c6c6c6;
    box-shadow:0 1px 1px rgba(0,0,0,.1);
    color:#222;
    cursor: pointer;
}

.button_standard:focus{
    border:1px solid #669900;
    outline:none
}

.button_standard:disabled{
    color:#cecece;
}

.trafficlight{
    height: 15vh;
    width: 15vh;
    border-radius: 50%;
    margin-bottom: 0.5em;
    box-shadow: 0 1px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
    box-sizing: border-box;    
}

.trafficlight_fullscreen{
    height: 32vh;
    width: 32vh;
}

.trafficlight_fullscreen2{
    height: 48vh;
    width: 48vh;
}

.trafficlight_fullscreen1{
    height: 98vmin;
    width: 98vmin;
}

.trafficlight:hover{    
    cursor: pointer;
    border:1px solid #c6c6c6;
    box-shadow:0 1px 1px rgba(0,0,0,.1);
}

.trafficlight_tiny{
    height: 3vh;
    width: 3vh;
}

.trafficlight_type{
    background-image:linear-gradient(to top,#f5f5f5,#f1f1f1);
    background-color: #f2f2f2;
    color: #5F6368;
    margin: 0.5em;
    padding: 0.5em;
    border: 1px solid #f2f2f2;
    border-radius: 4px;
    font-size: 1.5em;
}

.trafficlight_type:hover{
    background-color:#f8f8f8;
    background-image:linear-gradient(to top,#f8f8f8,#f1f1f1);
    border:1px solid #c6c6c6;
    box-shadow:0 1px 1px rgba(0,0,0,.1);
    color:#222;
    cursor: pointer;
}

.trafficlight_type:active{
    border:1px solid #669900;
}

.trafficlight_red{
    background: #cc0000;
}

.trafficlight_yellow{
    background: #ffcc00;
}

.trafficlight_green{
    background: #99cc33;
    margin-bottom: 0;
}

.trafficlight_red_green{
    background: linear-gradient(to right, #cc0000, #cc0000, #ffffff, #99cc33, #99cc33);
    margin-bottom: 0;
}

.trafficlight_red_green_is_red{
    background: #cc0000;
}

.trafficlight_red_green_is_green{
    background: #99cc33;
}

.trafficlight_inactive{
    background-image:linear-gradient(to top,#f5f5f5,#f1f1f1);
    background-color: #f2f2f2;
}

#trafficlight_green_hide{
    position: absolute;    
}

.active_type{
    border:1px solid #669900;
}

img {max-width:100%;}

.main{
    width: 90vw;
    margin: auto;
}

.logo_header{
    margin-top: 1em;
}

.agb{
    color: #cecece;
    text-decoration: none;
    padding: 0.25em;
    
}

.agb:hover{   
    box-shadow:0 1px 1px rgba(0,0,0,.1);
    color:#222;
    cursor: pointer;
    border-radius: 4px;
}

.agb:focus{
    border:1px solid #c6c6c6;
    outline:none
}

.link_start{
    height: 1em;
    opacity: 0.5;
    margin: 0.5em;
}

.link_start:hover{
    opacity: 1;
}

body{
    font-family: "Roboto", sans-serif;
    text-align: center;
}

footer{
    margin-top: 2em;
}