body {
    margin: 0;
    overflow: hidden;
    -webkit-tap-highlight-color:transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;    
}

input {
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-line-break: auto;
    -webkit-line-clamp: none;    
    border: 1px solid #c0c9ca;
    font: 18px 'Open Sans',Arial,Helvetica,sans-serif;    
    color: #455557;
    border: 1px #c0c9ca solid;
    background-color: white;
    box-shadow: none;
    border-radius: 0px;
    text-indent: 0px;
    tab-size: 8;
    stroke-width: 1;
    stroke-dashoffset: 0;
    padding: 1px;
    margin: 3px;
    line-height: normal;
    letter-spacing: normal;
    height: 32px;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    flex-grow: 0;
    flex-shrink: 1;
    display: inline-block;
    border-width: 1px;
    border-style: solid;
    baseline-shift: baseline;
}

select {
    border: 1px solid #c0c9ca;
    font: 18px 'Open Sans',Arial,Helvetica,sans-serif;    
    color: #455557;    
}

input:focus {
    box-shadow: 0px 0px 5px rgba(96,177,188,0.35);
    border: 1px #60b1bc solid;    
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}

select:focus {
    box-shadow: 0px 0px 5px rgba(96,177,188,0.35);
    border: 1px #60b1bc solid;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
}

.input-error {
    box-shadow: 0px 0px 5px rgba(224,92,92,0.75), inset 0px 6px 25px rgba(224,92,92,0.55) !important;
    border: 1px #cb5757 solid !important;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

.input-alert {
    box-shadow: 0px 0px 5px rgba(231,227,121,0.75), inset 0px 6px 25px rgba(231,227,121,0.55) !important;
    border: 1px #d2cd4d solid !important;
}

.hidden {
    display: none;
}

input[type=number]::-webkit-outer-spin-button {
    display: none;
}
input[type=number]::-webkit-inner-spin-button {
    display: none;
}

/*******************************************************/
/***          iOS7 switch                            ***/
/*******************************************************/

.ios7-switch {
    display: inline-block;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}

.ios7-switch input {
    opacity: 0;
    position: absolute;
}

.ios7-switch input + span {
    position: relative;
    display: inline-block;
    width: 1.65em;
    height: 1em;
    background: white;
    box-shadow: inset 0 0 0 0.0625em #e9e9e9;
    border-radius: 0.5em;
    vertical-align: -0.15em;
    transition: all 0.40s cubic-bezier(.17,.67,.43,.98);
}

.ios7-switch:active input + span,
.ios7-switch input + span:active {
    box-shadow: inset 0 0 0 0.73em #e9e9e9;
}

.ios7-switch input + span:after {
    position: absolute;
    display: block;
    content: '';
    width: 0.875em;
    height: 0.875em;
    border-radius: 0.4375em;
    top: 0.0625em;
    left: 0.0625em;
    background: white;
    box-shadow: inset 0 0 0 0.03em rgba(0,0,0,0.1),
                0 0 0.05em rgba(0,0,0,0.05),
                0 0.1em 0.2em rgba(0,0,0,0.2);
    transition: all 0.25s ease-out;
}

.ios7-switch:active input + span:after,
.ios7-switch input + span:active:after {
    width: 1.15em;
}

.ios7-switch input:checked + span {
    box-shadow: inset 0 0 0 0.73em #4cd964;
}

.ios7-switch input.blue:checked + span {
    box-shadow: inset 0 0 0 0.73em #5B98CC;
}

.ios7-switch input:checked + span:after {
    left: 0.7125em;
}

.ios7-switch:active input:checked + span:after,
.ios7-switch input:checked + span:active:after {
    left: 0.4375em;
}

/* accessibility styles */
.ios7-switch input:focus + span:after {
    box-shadow: inset 0 0 0 0.03em rgba(0,0,0,0.15),
                0 0 0.05em rgba(0,0,0,0.08),
                0 0.1em 0.2em rgba(0,0,0,0.3);
    background: #fff;
}

.ios7-switch input:focus + span {
    box-shadow: inset 0 0 0 0.0625em #dadada;
}

.ios7-switch input:focus:checked + span {
    box-shadow: inset 0 0 0 0.73em #33be4b;
}

.ios7-switch input.blue:focus:checked + span {
    box-shadow: inset 0 0 0 0.73em #5B98CC;
}

/* reset accessibility style on hover */
.ios7-switch:hover input:focus + span:after {
    box-shadow: inset 0 0 0 0.03em rgba(0,0,0,0.1),
                0 0 0.05em rgba(0,0,0,0.05),
                0 0.1em 0.2em rgba(0,0,0,0.2);
    background: #fff;
}

.ios7-switch:hover input:focus + span {
    box-shadow: inset 0 0 0 0.0625em #e9e9e9;
}

.ios7-switch:hover input:focus:checked + span {
    box-shadow: inset 0 0 0 0.73em #4cd964;
}

.ios7-switch:hover input.blue:focus:checked + span {
    box-shadow: inset 0 0 0 0.73em #5B98CC;
}

/*******************************************************/
/***          Standard fonts and font-sizes          ***/
/*******************************************************/

.font-page-title {font: 26px 'Open Sans',Arial, Helvetica, sans-serif;}
.font-h1 {font: 30px 'Open Sans',Arial, Helvetica, sans-serif;}
.font-h2 {font: 28px 'Open Sans',Arial, Helvetica, sans-serif;}
.font-h3 {font: 26px 'Open Sans',Arial, Helvetica, sans-serif;}
.font-h4 {font: 24px 'Open Sans',Arial, Helvetica, sans-serif;}
.font-h5 {font: 22px 'Open Sans',Arial, Helvetica, sans-serif;}
.font-h6 {font: 20px 'Open Sans',Arial, Helvetica, sans-serif;}
.font-h1-narrow {font: 30px 'Open Sans Condensed',Arial, Helvetica, sans-serif;}
.font-h2-narrow {font: 28px 'Open Sans Condensed',Arial, Helvetica, sans-serif;}
.font-h3-narrow {font: 26px 'Open Sans Condensed',Arial, Helvetica, sans-serif;}
.font-h4-narrow {font: 24px 'Open Sans Condensed',Arial, Helvetica, sans-serif;}
.font-h5-narrow {font: 22px 'Open Sans Condensed',Arial, Helvetica, sans-serif;}
.font-h6-narrow {font: 20px 'Open Sans Condensed',Arial, Helvetica, sans-serif;}
.font-p1 {font: 22px 'Open Sans',Arial, Helvetica, sans-serif;}
.font-p2 {font: 21px 'Open Sans',Arial, Helvetica, sans-serif;}
.font-p3 {font: 20px 'Open Sans',Arial, Helvetica, sans-serif;}
.font-p4 {font: 19px 'Open Sans',Arial, Helvetica, sans-serif;}
.font-p5 {font: 18px 'Open Sans',Arial, Helvetica, sans-serif;}
.font-p6 {font: 17px 'Open Sans',Arial, Helvetica, sans-serif;}
.font-p7 {font: 16px 'Open Sans',Arial, Helvetica, sans-serif;}
.font-p8 {font: 15px 'Open Sans',Arial, Helvetica, sans-serif;}

/***************************************/
/***          Top statusbar          ***/
/***************************************/

#statusbar {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 32px;
    background-color:white;
    z-index:999;
    color: black;
    overflow: hidden;
}

#statusbar-content {
    position: relative;
    margin: 0px auto;
    height: 40px;
    width: 990px;
}

#statusbar-content .statusbar-content-item {
    margin: 0px auto;
    height: 40px;
}

#statusbar-content-mainmenu {
    margin-left: 30px;
    transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
}

.statusbar-content-item ul.topmenu {
    float: right;
    margin-right: 30px;
}

.statusbar-content-item ul.topmenu li {
    float: left;
    display: block;
    margin: 7px 20px 5px 20px;
    font: 20px 'Open Sans Condensed',Arial,Helvetica,sans-serif;
    text-transform: uppercase;
    color: #595959;
    cursor: pointer;
    transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
}

.statusbar-content-item ul.topmenu li:hover {
    color: #ed1c24;
    text-shadow: 0px 0px 5px rgba(237,28,36,0.25);    
}

.homeicon {
    background-image: url('../../../images/home/logo_hd.png');
    background-repeat: no-repeat;
    background-size: 130px;
    width: 130px;
    height: 40px;
    background-position-y: 3px;
    margin-left: 30px;
    float: left;
    cursor: pointer;
}

#statusbar #menu_icon {
    width: 40px;
    height: 40px;
    cursor: pointer;
    float: left;
    margin: 0px;
    display: block;
    background-image: url('../../../images/common/menu_icon.png');
    background-position: 10px 10px;
    background-repeat: no-repeat;
}

#statusbar #menu_icon:hover {
    background-image: url('../../../images/common/menu_icon_hover.png');    
}

#statusbar-content-solution-button-box {
    float: right;
    height: 40px;
}

//Prezi progress

.statusbar_prezi_progress {
    width: 800px;
    margin: 0 auto;
    height: 40px;
}

.statusbar_prezi_progress_temp {
    width: 800px;
    margin: 0 auto;
    height: 40px;
}

.statusbar_prezi_progress table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.statusbar_prezi_progress table td {
    height: 40px;
    overflow: hidden;
}

.statusbar_prezi_progress table td div {
    width: 10px;
    height: 10px;
    margin: auto auto;
    border-radius: 50%;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    transition: all 0.8s ease;        
}

.statusbar_prezi_progress table td div.color_grey {
    background-color: #c7c7c7;    
}

.statusbar_prezi_progress table td div.color_a {background-color: #00709f; width: 12px;height: 12px;}
.statusbar_prezi_progress table td div.color_b {background-color: #009eb4; width: 12px;height: 12px;}
.statusbar_prezi_progress table td div.color_c {background-color: #e5ac00; width: 12px;height: 12px;}
.statusbar_prezi_progress table td div.color_d {background-color: #c2ce1a; width: 12px;height: 12px;}
.statusbar_prezi_progress table td div.color_e {background-color: #195fa7; width: 12px;height: 12px;}
.statusbar_prezi_progress table td div.color_f {background-color: #8b2e8a; width: 12px;height: 12px;}
.statusbar_prezi_progress table td div.color_g {background-color: #bf006e; width: 12px;height: 12px;}

//Plan summary

#statusbar_plan_summary {
    width: 960px;
    margin: 0 auto;
    height: 40px;
}

/***********************************/
/***          Left menu          ***/
/***********************************/

.menu {
    font: 16px 'Open Sans',Arial,Helvetica,sans-serif;
    z-index: 0;
    width: 400px;
    position: fixed;
    overflow: auto;
    height: 600px;
    background-color: #434343;
    color: #c4cccd;
    display: none;
}

.menu .menu-container {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.menu .top-menu {
    position: absolute;
    top: 0px;    
    width: 100%;
}

.menu .bottom-menu {
    position: absolute;
    bottom: 0px;
    width: 100%;
}

.menu ul {
    width: 100%;
}

.menu ul li {
    padding: 8px 10px 8px 35px;
    transition: all 0.2s ease-out;
    -webkit-transition: all 0.2s ease-out;
}

.menu ul li:hover {
    background-color: #323232;
    cursor: pointer;
}

.menu .top-menu ul li {
    width: 100%;
    border-bottom: 1px solid #515151;
}

.menu .bottom-menu ul li {
    width: 100%;
    border-top: 1px solid #515151;
}

.menu ul.prezi {
    margin-top: 20px;
}

.menu ul.prezi li.title:hover {
    cursor: default;
}

.menu ul.prezi li {
    font: 15px 'Open Sans',Arial,Helvetica,sans-serif;
    padding: 6px 10px 6px 35px;
}

.menu ul.prezi li.title {    
    border-top: 1px solid #515151;
    font: 14px 'Open Sans',Arial,Helvetica,sans-serif;
    font-weight: bold;
    padding: 4px 10px 4px 20px;
    background: rgba(81,81,81,0.5);
}


/***********************************/
/***          Container          ***/
/***********************************/

#page {
    position: relative;
    left: 0px;
    top: 0px;
    -webkit-box-shadow: -2px 0px 17px 0px rgba(0, 0, 0, 0.7);
    -moz-box-shadow:    -2px 0px 17px 0px rgba(0, 0, 0, 0.7);
    box-shadow:         -2px 0px 17px 0px rgba(0, 0, 0, 0.7);
    width: 500px;
    height: 500px;
}

.container {
    position: absolute;
    width: 100px;
    height: 100px;
    top:32px;
/*    overflow-y: auto;
    overflow-x: hidden;*/
    overflow: hidden;
    -webkit-transform: translateZ(0);/*translate3d(1%, 0, 0);*/
}

.container1 {
    left:0px;
    background-color: white;
}
.container2 {
    background-color: white;
    display: none;
}

/*******************************/
/***          LOGIN          ***/
/*******************************/

#login_container {
    background-repeat: no-repeat;
    height: 100%;
    overflow: hidden;
    background-color: #f9f9f9;
    background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #ffffff 20%, #c9c9c9 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(20%,#ffffff), color-stop(100%,#c9c9c9)); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#ffffff 20%,#c9c9c9 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#ffffff 20%,#c9c9c9 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#ffffff 20%,#c9c9c9 100%); /* IE10+ */
    background: radial-gradient(ellipse at center, #ffffff 0%,#ffffff 20%,#c9c9c9 100%);    
}

#login_column {
    width: 482px;
    height: 100%;
    margin: 0px auto;
}

#login_title {
    margin: 70px auto 40px auto;
    width: 296px;
    height: 72px;
    background-image: url('../../../images/login/login_title.png');
    background-repeat: no-repeat;
}

#login_content {
    position: relative;
    /*border: 1px solid #e5e5e5;*/
    border: none;
    border-radius: 12px;
    background-color: white;
    width: 480px;
    height: 390px;
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.05);
    -webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.05);
    -moz-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.05);
    border-radius: 17px;
}

#login_header {
    height: 20px;
    font: 19px 'Open Sans',Arial,Helvetica,sans-serif;
    padding: 15px 0px 15px 20px;
    color: #919a9b;
    letter-spacing: 0px;
    font-weight: normal;
    line-height: 21px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

#login_pic {
    height: 140px;
    background-image: url('../../../images/login/login_pic_small.jpg');
    background-position: 0px -30px;
    background-repeat: no-repeat;
}

#login_passreminder {
    padding: 16px 0px 0px 30px;
}

a.passreminder_login {
    font: 16px 'Open Sans',Arial,Helvetica,sans-serif;    
    color: #bdc8ca;
    letter-spacing: 0px;
    font-weight: normal;
    line-height: 21px;    
    text-transform: uppercase;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
}

a.passreminder_login:hover {
    color: #1ba9bd;
}

#card_container {
    display:none;
}

#login_input .button-login {
    border: none;
    margin: 15px 15px;
    width: 449px;
    height: 34px;
    background-color: #f2f2f2;
    border-radius: 8px;
    background-color: #8f8f8f;
    cursor: pointer;
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 22px;
    padding-top: 12px;
}

#login_input .button-login:hover {
    background-color: #878787;
}

#login_input .button-login:active {
    background-color: #7a7a7a;
}

#login_input .button-login:focus {
    background-color: #7a7a7a;
}

#login_input .input-box .user-logo {
    width: 46px;
    height: 46px;
    background-color: #f3f3f3;
    border-radius: 8px;
    float: left;
    background-image: url('../../../images/login/user_icon.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 19px;
}

#login_username {
    border: none;
    background-color: #fafafa;
    width: 360px;
    height: 31px;
    font: 19px 'Open Sans',Arial,Helvetica,sans-serif;
    padding: 5px 0px 0px 10px;
    color: #515151;
    letter-spacing: 0px;
    font-weight: normal;
    line-height: 21px; 
    border-radius: 4px;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

#login_username:hover,#login_username:focus,#login_username:active {
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    border: none;
    outline: 0;
}

#login_username:-webkit-autofill,
#login_username:-webkit-autofill:hover,
#login_username:-webkit-autofill:focus,
#login_username:-webkit-autofill:active {
    background: none !important;
    background-color: #fafafa !important;
    color: #919a9b !important;
    -webkit-box-shadow: 0 0 0px 1000px #fafafa inset;
}

#login_input .input-box .pass-logo {
    width: 46px;
    height: 46px;
    background-color: #f3f3f3;
    border-radius: 8px;
    float: left;
    background-image: url('../../../images/login/pass_icon.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 19px;
}

#login_password  {
    border: none;
    background-color: #fafafa;
    width: 360px;
    height: 31px;
    font: 19px 'Open Sans',Arial,Helvetica,sans-serif;
    padding: 5px 0px 0px 10px;
    color: #515151;
    letter-spacing: 0px;
    font-weight: normal;
    line-height: 21px;    
    border-radius: 4px;
}

#login_password:-webkit-autofill,
#login_password:-webkit-autofill:hover,
#login_password:-webkit-autofill:focus,
#login_password:-webkit-autofill:active {
    background: none !important;
    background-color: #fafafa !important;
    color: #919a9b !important;
    -webkit-box-shadow: 0 0 0px 1000px #fafafa inset;
}

#login_password:hover,#login_password:focus,#login_password:active {
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    border: none;
    outline: 0;
}

#login_input .input-box {
    margin: 15px 15px;
    height: 46px;
    background-color: #fafafa;
    border-radius: 8px;
}