html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    font-size: 10px;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    font-family: 'Fira Sans', sans-serif;
    background: #46c7d3;
}

a:active, a:selected, abasic tutorial
:visited, a:focus{
    border: none;
    outline: none;
}

button::-moz-focus-inner {
    border: 0;
}

button:active, button:selected, button:visited, button:focus {
    outline: none;
}

.button{
    width: 90%;
    margin: 2em auto 1.5em auto;
    display:block;
    border-radius: 4rem;
    border: none;
    background: #54CDD0;
    color: white;
    font-size: 1.7rem;
    padding: 1rem;
    text-align: center;
}

.panel {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.panel.verticalScroll{
    overflow-y: scroll;
}

.hide {
    display: none !important;
}

.disabled {
    opacity: .3;
    pointer-events: none;
}

#overlay {
    z-index: 500;
    background: #F0F0AC;
    display: none;
}

#overlay.show {
    display: block;
}

.initializing {
    transition: none;
}

#startup-panel {
    text-align: center;
    position: relative;
    -moz-box-sizing: border-box;
    background-image: url(images/320/bg_tutorials.png);
    background-position: center;
    background-size: 100%;
}

#main-panel,
#group-panel,
#application-panel, 
#log-panel{
    background: white;
}

#pairing-panel {
    background-image: url(images/320/bg_welcome.jpg);
    background-position: center;
    background-size: 100%;
}

section[role="region"] > header:first-child h1{
    color: #46C7D3;
}

/*
 * Generic tweaks for BB
 */

#webview-overlay > header:first-child,
#application-panel > header:first-child,
#group-panel > header:first-child,
#main-panel > header:first-child,
#security-panel > header:first-child,
#log-panel > header:first-child,
#log-panel > #log-subheader{
    background: #0A404A !important;
}

#group-panel > header > h1{
    padding-left: 6rem;
}

#group-panel > header > i{
    position: absolute;
    left: 3rem;
    height: 100%;
    width: 23px;
    background-image: url('images/icons-submenu/icn_folder_header.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 23px 26px;
}

section[role="region"] > header:first-child .icon.icon-refresh {
    background-image: url('images/320/icn_refresh.png');
}

section[role="region"] > header:first-child .icon.icon-menu {
    background-image: url('images/320/icn_menu.png');
    background-size: 75%;
    background-repeat: no-repeat;
    background-position: center;
}

section[role="region"] > header:first-child .icon.icon-back {
    background-image: url('images/320/icn_back.png');
    background-size: 100%;
}

section[role="region"] > header:first-child .icon.icon-close {
    background-image: url('images/320/icn_more.png');
    transform: rotate(45deg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.5rem;
}



/*
 * STARTUP
 */

#startup-panel-logo {
    width: 100%;
    height: 23rem;
    background-size: 11.7rem auto;
    background-repeat: no-repeat;
    background-image: url('images/logo_landing.png');
    background-position: center 6rem ;
}

#startup-panel-form {
    position: absolute;
    bottom: 6rem;
}

#startup-panel h1 {
    height: 4.7rem;
    width: 100%;

    -moz-box-sizing: border-box;
    padding: 1rem 2rem;

    color: white;
    font-size: 2.7rem;
    font-weight: 300;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#startup-panel h2 {
    height: 4.2rem;
    width: 100%;

    -moz-box-sizing: border-box;
    padding: 0 2rem;

    color: white;
    line-height: 2.1rem;
    font-size: 1.8rem;
    font-weight: 300;
    overflow: hidden;
    text-overflow: ellipsis;
}

#startup-panel h3 {
    height: 3.3rem;
    width: 100%;

    -moz-box-sizing: border-box;
    padding: 1rem 2rem;

    color: white;
    font-size: 1.3rem;
    font-weight: 300;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


#startup-tutorial-step1-login,
#startup-tutorial-register,
#startup-tutorial-login,
#startup-signin-button {
    display: inline-block;
    padding: 1rem 3rem;
    border: .1rem solid #475663;
    margin-top: 1rem;

    background: #FFF;
    color: #0e8fa0;
    border-radius: 5rem;
    font-size: 1.7rem;
    font-weight: 300;
}

#startup-tutorial-button {
    width: 100%;
    height: 5rem;

    position: fixed;
    bottom: 0;
    left: 0;

    background: transparent;
    border: none;
    font-size: 1.2rem;
    line-height: 0;
    color: white;
    font-weight: 300;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#startup-tutorial-button:after {
    content: '';
    width: 3rem;
    height: 3rem;
    position: absolute;
    background-image: url('images/320/back.png');
    left: calc(50% - 1.5rem);
    top: 2.3rem;
    transform: rotate(-90deg);
    background-repeat: no-repeat;
    background-position: center;
}

/*
 * Generic styles of tutorial
 */

#pairing-panel > header:first-child,
#pairing-tutorial-panel > header:first-child,
#startup-tutorial-panel > header:first-child,
#basic-tutorial-panel > header:first-child {
    position: relative;
    background: none  !important;
}

#pairing-panel > header:first-child span,
#pairing-tutorial-panel > header:first-child span,
#startup-tutorial-panel > header:first-child span,
#basic-tutorial-panel > header:first-child span{
    display: block;
    background-image: url('images/320/back.png');
    background-repeat: no-repeat;
    background-position: center;
    width: 5rem;
    height: 5rem;
    transform: rotate(90deg);
    left: calc(50% - 2.5rem);
    position: absolute;
}

.tutorial-long-text {
    position: absolute;
    bottom: 0;
    height: 18rem;
    width: 100%;
    padding: 0.5rem 2rem;
    -moz-box-sizing: border-box;
    text-align: center;
    font-weight: 300;
}

.tutorial-long-text h1 {
    font-size: 3rem;
    max-height: 8rem;
    overflow: hidden;
    color: white;
    padding-bottom: 4rem; // last line appears cut on the bottom
}

.tutorial-long-text h3 {
    padding: 1rem 2rem;
    -moz-box-sizing: border-box;
    font-size: 2rem;
    color: #A9E1E2;
    height: 7rem;
}

.tutorial footer.tutorial-steps-indicator{
    display: block;
    text-align: center;
    width: 100%;
    height: 1rem;
    position:absolute;
    bottom: 1rem;
}

.tutorial footer.tutorial-steps-indicator div{
    display:inline-block;
    height: 1rem;
    width: 1rem;
    background-image: url(images/320/tutorial_page_other.png);
    background-size: 100%;
}

.tutorial[data-current-step="1"] footer.tutorial-steps-indicator div:nth-of-type(1),
.tutorial[data-current-step="2"] footer.tutorial-steps-indicator div:nth-of-type(2),
.tutorial[data-current-step="3"] footer.tutorial-steps-indicator div:nth-of-type(3),
.tutorial[data-current-step="4"] footer.tutorial-steps-indicator div:nth-of-type(4),
.tutorial[data-current-step="5"] footer.tutorial-steps-indicator div:nth-of-type(5),
.tutorial[data-current-step="6"] footer.tutorial-steps-indicator div:nth-of-type(6),
.tutorial[data-current-step="7"] footer.tutorial-steps-indicator div:nth-of-type(7),
.tutorial[data-current-step="8"] footer.tutorial-steps-indicator div:nth-of-type(8),
.tutorial[data-current-step="9"] footer.tutorial-steps-indicator div:nth-of-type(9){
    background-image: url(images/320/tutorial_page_current.png);
}

.tutorial-steps-container {
    height: calc(100% - 10rem);
}

.tutorial-step {
    height: 100%;
    width: 100%;
    display: none;
    position: relative;
}

.tutorial-step-info {
    position: absolute;
    bottom: 0;
    height: 14rem;
    width: 100%;
    padding: 0.5rem 2rem;
    -moz-box-sizing: border-box;
    text-align: center;
    font-weight: 300;
}

.tutorial-step-info h1 {
    font-size: 2.4rem;
    overflow: hidden;
    color: white;
    padding-bottom: 0.5rem;
    margin-left: 2rem;
    margin-right: 2rem;
}

.tutorial-step-info h3#startup-version{
    color:#fff;
}

.tutorial-step-info h3 {
    padding: 1rem 0.5rem;
    -moz-box-sizing: border-box;
    font-size: 1.7rem;
    color: #A9E1E2;
    height: 7rem;
}

.tutorial-step-current {
    display: block;
}

.tutorial-navigation {
    height: 5rem;
    width: 100%;
    position: absolute;
    bottom: 50%;
}

.tutorial-arrow {
    position: absolute;
    height: 5rem;
    width: 5rem;
    background: transparent;
    background-image: url(images/320/back.png);
    background-repeat: no-repeat;
    background-position: center;
    border: 0;
}

.tutorial-right {
    right: 0;
    transform: rotate(180deg);
}

.tutorial-left {
    left: 0;
}


/*
 * Basic tutorial
 */

#basic-tutorial-panel[data-current-step="1"] #tutorial-arrow-left, 
#basic-tutorial-panel[data-current-step="9"] #tutorial-arrow-right{
    display: none;
}

#basic-tutorial-panel{
    background-position: center 6rem, center;
    background-size: 20rem auto, 100%;
    background-repeat: no-repeat;
}
#basic-tutorial-panel[data-current-step="1"] {
    background-image: url(images/320/help_step_0.png), url(images/320/bg_tutorials.png);
}

#basic-tutorial-panel[data-current-step="2"] {
    background-image: url(images/320/help_step_1.png), url(images/320/bg_tutorials.png);
}

#basic-tutorial-panel[data-current-step="2"] .tutorial-step-info{
    height: 18rem;
}


#basic-tutorial-panel[data-current-step="3"] {
    background-image: url(images/320/help_step_2.png), url(images/320/bg_tutorials.png);
}

#basic-tutorial-panel[data-current-step="4"] {
    background-image: url(images/320/help_step_3.png), url(images/320/bg_tutorials.png);
}

#basic-tutorial-panel[data-current-step="5"] {
    background-image: url(images/320/help_step_4.png), url(images/320/bg_tutorials.png);
}

#basic-tutorial-panel[data-current-step="6"] {
    background-image: url(images/320/help_step_5.png), url(images/320/bg_tutorials.png);
}

#basic-tutorial-panel[data-current-step="7"] {
    background-image: url(images/320/help_step_6.png), url(images/320/bg_tutorials.png);
}

#basic-tutorial-panel[data-current-step="8"] {
    background-image: url(images/320/help_step_9.png), url(images/320/bg_tutorials.png);
}

#basic-tutorial-panel[data-current-step="9"] {
    background-image: url(images/320/help_step_10.png), url(images/320/bg_tutorials.png);
}

#basic-tutorial-panel[data-current-step="2"] .tutorial-step-info{
    top: 25rem;
}

#basic-tutorial-panel[data-current-step="8"] .tutorial-step-info{
    top: 22rem;
}

/*
 * Pairing tutorial
 */
#pairing-tutorial-panel[data-current-step="1"] .tutorial-left {
    display: none;
}

#pairing-tutorial-panel[data-current-step="4"] .tutorial-right {
    display: none;
}

#pairing-tutorial-panel .tutorial-step-info{
    height: 16rem;
}

#pairing-tutorial-panel[data-current-step="1"],
#pairing-tutorial-panel[data-current-step="2"], 
#pairing-tutorial-panel[data-current-step="3"],
#pairing-tutorial-panel[data-current-step="4"]{
    background-position: center 6rem, center;
    background-size: auto 40%, 100% auto;
    background-repeat: no-repeat;
}

#pairing-tutorial-panel[data-current-step="1"] {
    background-image: url(images/320/service_help_step_0.png), url(images/320/bg_tutorials.png);
}

#pairing-tutorial-panel[data-current-step="2"] {
    background-image: url(images/320/service_help_step_1.png), url(images/320/bg_tutorials.png);
}

/*
* Pairing step 3 with different languages
*/

html[locale="en"] #pairing-tutorial-panel[data-current-step="3"] {
    background-image: url(images/320/en/service_help_step_2.png), url(images/320/bg_tutorials.png);
}
html[locale="es"] #pairing-tutorial-panel[data-current-step="3"] {
    background-image: url(images/320/es/service_help_step_2.png), url(images/320/bg_tutorials.png);
}
html[locale="pt"] #pairing-tutorial-panel[data-current-step="3"] {
    background-image: url(images/320/pt/service_help_step_2.png), url(images/320/bg_tutorials.png);
}
html[locale="de"] #pairing-tutorial-panel[data-current-step="3"] {
    background-image: url(images/320/de/service_help_step_2.png), url(images/320/bg_tutorials.png);
}

/*
* Pairing step 4 with different languages
*/

html[locale="en"] #pairing-tutorial-panel[data-current-step="4"] {
    background-image: url(images/320/en/service_help_step_3.png), url(images/320/bg_tutorials.png);
}
html[locale="es"] #pairing-tutorial-panel[data-current-step="4"] {
    background-image: url(images/320/es/service_help_step_3.png), url(images/320/bg_tutorials.png);
}
html[locale="pt"] #pairing-tutorial-panel[data-current-step="4"] {
    background-image: url(images/320/pt/service_help_step_3.png), url(images/320/bg_tutorials.png);
}
html[locale="de"] #pairing-tutorial-panel[data-current-step="4"] {
    background-image: url(images/320/de/service_help_step_3.png), url(images/320/bg_tutorials.png);
}

/*
 * Startup tutorial
 */
#startup-tutorial-panel[data-current-step="1"] .tutorial-left {
    display: none;
}

#startup-tutorial-panel[data-current-step="6"] .tutorial-right {
    display: none;
}


#startup-tutorial-panel{
    background-position: center 6rem, center;
    background-size: 20rem auto, 100%;
    background-repeat: no-repeat;
}

#startup-tutorial-panel[data-current-step="1"] {
    background-image: url(images/320/logo_landing.png), url(images/320/bg_tutorials.png);
    background-size: 12rem auto, 100%;
    background-position: center 4rem, center;
}
#startup-tutorial-panel[data-current-step="2"] {
    background-image: url(images/320/help_step_0.png), url(images/320/bg_tutorials.png);
}

#startup-tutorial-panel[data-current-step="3"] {
    background-image: url(images/320/help_step_1.png), url(images/320/bg_tutorials.png);
}

#startup-tutorial-panel[data-current-step="4"] {
    background-image: url(images/320/help_step_2.png), url(images/320/bg_tutorials.png);
}

#startup-tutorial-panel[data-current-step="5"] {
    background-image: url(images/320/help_step_3.png), url(images/320/bg_tutorials.png);
}

#startup-tutorial-panel[data-current-step="6"] {
    background-image: url(images/320/help_step_6_bis.png), url(images/320/bg_tutorials.png);
    background-size: 12rem auto, 100%;
    background-position: center 2rem, center;
}

#startup-tutorial-panel[data-current-step="6"] .tutorial-step-info{
    height: 24rem;
}

#startup-tutorial-panel[data-current-step="6"] h3{
    height: 5rem;
}

#startup-tutorial-panel[data-current-step="1"] .tutorial-step-info{
    height: 22rem;
}

#startup-tutorial-panel[data-current-step="1"] h3{
    height: 6rem;
}

#startup-step-6-contact{
    color: white;
    margin-left: 0.5em;
    text-decoration: none;
}

/*
 * Signin
 */

#signin-panel {
    background-image: url('images/logo_landing.png'), url(images/320/bg_tutorials.png);
    background-position: center 7rem, center;
    background-size: 9rem auto, 100%;
    background-repeat: no-repeat;
    font-size: 1.3rem;
    color: white;
    text-align: center;
}

#signin-panel .icon.icon-back{	
    background-image: url('images/320/icn_back_white.png');	
}	

section[role="region"].notification-overlay header.special > h1,	
#signin-panel header h1{	
    color: #fff;	
}

#signin-panel #signin-forgot-password,
#signin-panel #signin-no-account{
    color: #56eded;
    margin-top: 1rem;
}

#signin-panel #signin-register{
    color: #eee;
}

#signin-panel.typing {
    background-image: url(images/320/bg_tutorials.png);
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}

#signin-panel.typing #login-version{
    display: none;
}

#signin-panel header:first-child{
    background: transparent !important;
}

#signin-panel  > header:first-child:after {
    background: none;
}

#signin-panel section {
    -moz-box-sizing: border-box;
    padding: 0 2rem;
    position: absolute;
    bottom: 3rem;
    left: 0;
    width: 100%;
}

.signin-input {
    text-align: center;
    color: #888888;
    width: 100%;
    border: .1rem solid #475663;
    height: 4rem;
    position: relative;
    padding: 0 2rem;
    font-size: 2rem;
    -moz-box-sizing: border-box;
    background: white;
}


#authenticate {
    -moz-box-sizing: border-box;
    padding: 1rem 2rem;
    margin: 1rem auto 2rem auto;
    font-size: 1.5rem;
    background: #00b9be;
    color: white;
    border: .1rem solid #eee;
    border-radius: 5rem;
}

.signin-input:-moz-focus-inner {
    border: 0;
    padding: 0;
}

.signin-input {
    width: 100%;
    height: 3.5rem;
    font-size: 1.3rem;
}

.signin-input:first-child {
    margin-bottom: 1rem;
}

#signin-error {
    color: white;
    font-size: 1.2rem;
    line-height: 2.4rem;
    text-align: center;
}

#signin-panel #login-version{
    color:red;
    font-size: 1.7rem;
    color: #fff;
    margin-bottom: 1rem;
}

/*
 * main
 */

#log-panel >.bottom-button a{
    display: table-cell;
    vertical-align: middle;
    text-decoration: none;
    color: #fff;
    position: relative;
}

.bottom-button {
    position: fixed;
    bottom: 0;
    font-size: 1.5rem;
    border-radius: 0 !important;
    background: #08879B;
    border: none;
    color: #fff;
    height: 4rem;
    width: 100%;
    z-index: 1;
    text-align: center;
}

.bottom-button:after {
    content: '';
    background: #08879B;
    width: 3rem;
    height: 3rem;
    position: absolute;
    left: calc(50% - 1.5rem);
    border-radius: 1.5rem;
    top: -1.5rem;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
}

#group-panel > .bottom-button:after,
#main-panel > .bottom-button:after,
#pairing-panel > .bottom-button:after{
    background-repeat: no-repeat;
    background-position: center;
}

#group-panel > .bottom-button:after,
#main-panel > .bottom-button:after{
    background-size: 14px;
    background-image: url(images/320/icn_more.png);
}

#pairing-panel > .bottom-button:after{
    background-size: 2rem;
    background-image: url(images/320/icn_pairing_small.png);
}

#log-panel > .bottom-button:after{
    background-image: url(images/320/icn_stats.png);
}

#log-panel > .bottom-button{
    display:table;
}

/*
* LATCHON
*/

#lock-all-operations,
#lock-all-applications{
    height:11rem;   
}

.latchonOff, .latchonOn{
    background-size: 100%;
    position: absolute;
    height: 11rem;
    border: 1px solid #0A404A;
    width: 100%;
}

.latchonOff{
    background-image: url(images/latchon/bg_latch_off.png);
}

.latchonOn{
    background-image: url(images/latchon/bg_latch_on.png);
}

.canalOff, .canalOn{
    position:absolute;
    height: 9rem;
    background-size: 100%;
    background-repeat: no-repeat;
    width: 90%;
    left: 5%;
    top: 6rem;
}

.canalOff{
    background-image: url(images/latchon/canal_unlock.png);
}

.canalOn{
    background-image: url(images/latchon/canal_lock.png);
}

.latchonTextOff, 
.latchonTextOn{
    position: absolute;
    top: 8rem;
    z-index: 1;
    background-color: transparent;
    font-size: 1.6rem;
    line-height: 2rem;
    font-weight: 200;
}

.latchonTextOff{
    color: #70979D;
    right: calc(10% + 3.5rem);
    text-align: right;
}

.latchonTextOn{
    color: #46C6D2;
    left: calc(10% + 3.5rem);
}

.latchonArrowOff, 
.latchonArrowOn{
    position:absolute;
    width: 1.2rem;
    height: 3.5rem;
    top: 8.3rem;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.latchonArrowOff{
    right: calc(10% + 1rem);
    background-image: url(images/latchon/arrow_right.png);
}

.latchonArrowOn{
    left: calc(10% + 1rem);
    background-image: url(images/latchon/arrow_left.png);
}

#lock-all-operations-switch,
#lock-all-applications-switch{
    position: absolute;
    width: 8rem;
    height: 7rem;
    top: 6.5rem;
    left: 5%;
    margin: 0rem;
    padding: 0rem;
}

.latchonSwitchOff, .latchonSwitchOn{

    position: absolute;
    background-size: auto 8.2rem;
    background-repeat: no-repeat;
    background-position: center;

    display: inline-block;
    height: 8.3rem;
    width: 8.3rem;   
}

.latchonSwitchOff{
    opacity: 1;
    background-image: url(images/latchon/nodo_unlock.png);
}

.latchonSwitchOn{
    opacity: 0;
    background-image: url(images/latchon/nodo_lock.png);
}

#lock-all-operations.satellite > i{
    float:left;
    width: 2rem;
    height: 1.2rem;
    top: 8.5rem;
    left: calc(50% - 1rem);
    position: relative;
    background-image: url(images/operation-detail/satellite_icon_bar.png);
    background-repeat: no-repeat;
    background-size: auto 1.2rem;
    background-position: center;
}

.orange-switch .latchonSwitchOff{
    background-image: url(images/latchon/nodo_unlock_ext.png);
}

.orange-switch .latchonSwitchOn{
    background-image: url(images/latchon/nodo_lock_ext.png);
}

#log-entries-list-empty{
    text-align:center;
    font-size: 1.6rem;	
    padding: 2.5rem;	
    color: #485764;    	
}

#group-operations-list,
#operation-detail,
#operations-list,
#applications-list{
    box-shadow: 0px 1px 7px 0px rgba(0,0,0,0.4);
}

#group-operations-list-empty{
    text-align:center;
    font-size: 1.6rem;
    padding: 2.5rem;
    color: #485764;    
}

#group-operations-list-container li,
#operations-list li,
#applications-list li{
    background-color: #E9EAEB;
    border-bottom: 1px solid #C5C6C8;
    font-weight: 200;
}

li.silent i {
    height: 15px;
    width: 15px;
    position: absolute;
    right: 8.2rem;
    top: calc(50% - 0.7rem);
    background-image: url(images/icons-submenu/icn_silent_list.png);
    background-size: 100%;
}

#applications-list li > a > p,
#applications-list li > a > p {
    padding-right: 0.5rem;
}

#operations-list li.satellite > a > p,
#operations-list li.silent > a > p,
#applications-list li.satellite > a > p,
#applications-list li.silent > a > p {
    padding-right: 3.5rem;
}

#group-operations-list li.satellite.silent > a > p,
#operations-list li.satellite.silent > a > p,
#applications-list li.satellite.silent > a > p{
    padding-right: 5.5rem;
}

li.satellite i:last-of-type {
    height: 25px;
    width: 25px;
    position: absolute;
    right: 8rem;
    top: calc(50% - 0.7rem);
    background-image: url(images/icons-submenu/icn_satelite.png);
    background-size: 20px auto;
    background-repeat: no-repeat;
}

#applications-list li.group{
    display: table;
    width: calc(100% + 1.5rem);
    overflow: hidden;
    margin-left: -1.5rem;
}

#applications-list li.group > i,
#applications-list li.group > p{
    display: table-cell;
    vertical-align: middle;
}

#applications-list li.group > i:first-of-type{
    overflow: hidden;
    width: 6rem;
    height: 6rem;
    position: relative;
    z-index: 1;
    float:left;
    background-image: url("images/icons-submenu/icn_folder_list.png");
    background-size: 24px auto;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 0.7rem;
}

#applications-list li.group > i:last-of-type{
    height: 100%;
    width:2rem;
    position:relative;
    right:2rem;
    background-image: url("images/icons-submenu/arrow_to_folder.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 20px;
}

#operation-detail section.operation-option p{
    letter-spacing: -0.5px;
    text-shadow: 0 1px 0 #fff;
    font-weight: 300;
    letter-spacing: -0.5px;
    font-size: 1.6rem !important;
}

#operations-list li p,
#applications-list li p{
    color: #666;
    letter-spacing: -0.5px;
    text-shadow: 0 1px 0 #fff;
    font-size: 1.6rem;
    white-space: pre;
}

#applications-list li.group > p{
    padding: 0rem 0.5rem;
    text-overflow: ellipsis;
    overflow: hidden;
    transform: none;
    width: 20rem;
    vertical-align: middle;
    float:left;
    top: 1rem;
}

#application-list-empty {
    max-height: calc(100% - 9rem);
    padding: 2rem;
    -moz-box-sizing: border-box;
    overflow: hidden;
    display: none;
}

#application-list-empty h1 {
    font-size: 2.4rem;
    margin-top: 10rem;
    margin-bottom: 1rem;
    color: #333;
    position: relative;
    text-align: center;
    -moz-box-sizing: border-box;
    font-weight: 300;
}

#application-list-empty p {
    color: #007D96;
    text-align: center;
    font-size: 1.3rem;
    line-height: 1.5rem;
    font-weight: 300;
    margin-bottom: 1rem;
}

#application-list-empty button{
    width: 80%;
    margin: auto;
    display:block;
    padding: 0.5rem;
    border-radius: 4rem;
    border: none;
    background: #54CDD0;
    color: white;
    font-size: 1.3rem;
}

#application-list-empty button span a{
    vertical-align: middle;
    display: table-cell;
}

#application-list-empty button span{
    display: table;
    margin: auto;
    height: 31px;
}

#application-list-empty #welcome-see-pairing-tutorial:before{
    content: "";
    display: block;
    background: url("images/320/icn_pairing.png") no-repeat;
    background-size: 100% auto, auto auto;
    width: 31px;
    height: 31px;
    float: left;
}

#main-panel > header > div{
    display: inline-block;
    background-image: url(images/320/logo_dashboard.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 100%;
    height: 3rem;
    width: 10rem;
    margin: 1rem 0.5rem;
}

#main-panel.empty #application-list-empty {
    display: block;
    height: 100%;
    background-image: url(images/320/latch_welcome.png), url(images/320/bg_welcome.jpg);
    background-position: center 1rem, center;
    background-size: auto 27%, 100% auto;
    background-repeat: no-repeat;
}

#main-panel.empty #lock-all-applications,
#main-panel.empty #application-list-container {
    display: none;
}

#application-list-container,
#group-operations-list-container,
#operations-list-container{
    background-color: #C2CFD2;
    height:100%;
}

#application-list-container {
    overflow-x: hidden;
    overflow-y: scroll;
    height: calc(100% - 20rem);
}

.application-list-submenu{
    background-color: #fff !important;
    text-align: center;
    padding: 1rem 0rem 0.5rem 0rem;
    height: 6rem;
}

.application-list-submenu .submenu-item{
    display: inline-block;
    width: 25%;
    height: 100%;
    margin-top: 0.7rem;
    margin-left: -0.3rem;
}

.application-list-submenu .submenu-item i{
    background-repeat: no-repeat;
    background-size: auto 2.3rem;
    background-position: center center;
    display: block;
    height: 55%;
}

.application-list-submenu .submenu-item span{
    color: #606060;
    font-size: 0.8rem;
    font-weight: 400;
}

/*
* Hide those icons that should not be displayed
*/

.application-list-submenu.submenu-group #submenu-log, 
.application-list-submenu.submenu-group #submenu-move, 
.application-list-submenu.submenu-group #submenu-silent{
    display: none;
} 

.application-list-submenu.submenu-app #submenu-delete{
    display: none;
}

.application-list-submenu.submenu-app-in-group #submenu-delete{
    display: none;
}

#operations-list .application-list-submenu #submenu-move{
    display: none;
}

/*
* Submenu items
*/

#submenu-rename i{
    background-image: url("images/icons-submenu/icn_rename.png");
}

#submenu-move i{
    background-image: url("images/icons-submenu/icn_move.png");
}

#submenu-silent.silent-on i{
    background-image: url("images/icons-submenu/icn_silent_on.png");
}

#submenu-silent.silent-off i{
    background-image: url("images/icons-submenu/icn_silent_off.png");
}

#submenu-log i{
    background-image: url("images/icons-submenu/icn_log.png");
}

#submenu-delete i{
    background-image: url("images/icons-submenu/icn_delete_folder.png");
}

.subheader #applications-header{
    position:relative;
    top: -1rem;
}

#applications-header, 
#applications-sub-header{
    color: #00B9BE;
    display: block;
    width: calc(100% - 8rem);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    border:none;
    padding: 0rem;
    margin-left: 3.1rem;
}

#applications-sub-header{
    position:relative;
    top: -2.3rem;
}

.greyCover:after {	
    content:'\A';	
    position:absolute;	
    width:100%; height:100%;	
    opacity:0.15;	
    top:0; left:0;	
    background:rgba(0,0,0,0.3);	
}

.greyCover p,	
[data-type="list"] li p.blurred{
    color: #888 !important;
}

#operations-total-lock-info{
    margin: 0px 1.5rem 1rem 1.5rem;
}

#operations-total-lock-info h1{
    font-size: 2rem;
    padding-top: 2rem;
    margin-bottom: 1rem;
    vertical-align: bottom;
}

#operations-total-lock-info p{
    font-size: 1.4rem;
    color: #1090a0;
    line-height: 1.7rem;
}

#operations-total-lock-info h1:before{
    content: "";
    display: block;
    background: url("images/320/bullet_all_locked.png") no-repeat scroll 0% 0% transparent;
    width: 26px;
    height: 26px;
    float: left;
    margin: -0.6rem 0.5rem 0 0;
    margin-top: -0.6rem;
}

.orangeRibbon{
    display: table;
    background-color: #F19300;
    color: #fff;
    font-size: 1.5em;
    padding: 1rem;
}

.orangeRibbon > *{
    display: table-cell;
    vertical-align: middle;
}

.orangeRibbon span{
    display: inline-block;
    width: calc(100% - 6em);
    margin: 0.5em;
}

.orangeRibbon > i{
    display: inline-block;
    width: 2rem;
    height: 2rem;
    background-image: url(images/320/bt_close_ffffff_press.png);
    background-size: 1.4rem;
    background-position: center;
    background-repeat: no-repeat;
}

.ribbonImage{
    display: inline-block;
    background-image: url(images/icn_modified.png);
    background-repeat: no-repeat;
    background-size: 2em 2em;
    height: 2em;
    width: 2em;
    margin: 0.5em;
}
.pack-switch.orange-switch input:checked + span:after {
    background: url(images/switch/background_orange_enabled.png) no-repeat scroll 0rem 0rem / 9.2rem 2.7rem #E6E6E6 !important;
}

.pack-switch.orange-switch input:not(:checked) + span:after {
    background: url(images/switch/background_orange_disabled.png) no-repeat scroll -3rem 0rem / 9.2rem 2.7rem #E6E6E6 !important;
}

#applications-list .group .orange-circle:before{
    right: 5rem;
    left: unset;
}

li.satellite .orange-circle:before,
li.silent .orange-circle:before{
    left: -4.5em;
}

li.silent.satellite .orange-circle:before{
    left: -7.5rem;
}

li.silent.satellite i:last-of-type{
    right: 10rem;
}

.orange-circle:before{
    content: ''; 
    border: 0.4em solid #F19300;
    position: absolute;
    left: -3em;
    top: calc(50% - 0.5em);
    border-radius: 50%;
}

.pack-switch.schedule-switch input:checked + span:after {
    background: url(images/switch/background_schedule_enabled.png) no-repeat scroll 0rem 0rem / 9.2rem 2.7rem #E6E6E6 !important;	
}	

.pack-switch.schedule-switch input:not(:checked) + span:after {	
    background: url(images/switch/background_schedule_disabled.png) no-repeat scroll -3rem 0rem / 9.2rem 2.7rem #E6E6E6 !important;	
}

/*
 * application-panel
 */

[data-type="list"] li p:first-of-type {
    padding: 0px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.settingsPanel [data-type="list"] li p:first-of-type {
    transform: none;
}

label.pack-switch{
    height: 6rem;
}

#operations-list-container {
    padding: 0 !important;
    height: calc(100% - 15rem);
    overflow: auto;
}

#operation-detail {
    display: none;
    padding: 0 !important;
    overflow-x: hidden;
    overflow-y: scroll;
    height: calc(100% - 16rem);
}

#operation-detail .operation-option ul p{
    white-space: normal;
    line-height: 2.2rem;
    font-size: 1.6rem;
    width: 65%;
}

#operation-detail ul li a p:not(:only-child):first-child{
    top: 2.3rem;
}

#operation-detail ul li a p:not(:only-child):last-child{
    margin-top: 0.8rem;
    font-size: 1.3rem !important;
    color: #999;
}

#operation-detail > .operation-option i{
    position: relative;
    float: left;
    margin-right: 0.3rem;
    margin-left: -0.5rem;
    height: 6rem;
    width: 32px;
    background-size: auto 22px;
    background-repeat: no-repeat;
    background-position: center;
}

#operation-detail > #enable-autoclose-by-use-container .mandatory{
    height: auto;
} 

#operation-detail > #enable-autoclose-by-use-container .mandatory div:last-of-type{
    font-size: 1.2rem;
    line-height: 1.4rem;
    color: #777;
    margin: 0rem 1rem 2rem 1rem;

}

#operation-detail > #enable-autoclose-by-use-container .mandatory div:first-of-type{
    color: #00B9BE;
    font-size: 2rem;
    position: relative;
    top: 2rem;
    right: 2rem;
    float: right;
}

#operation-detail > #enable-autoclose-by-use-container li:not(.mandatory) div{
    display: none;
}

#operation-detail > #enable-autoclose-by-use-container.operation-option i{
    background-image: url(images/operation-detail/icn_autoclose.png);
}

#operation-detail > #enable-autoclose-container.operation-option i{
    background-image: url(images/operation-detail/icn_autoclose_time.png);
}

#operation-detail > #enable-schedule-container.operation-option i{
    background-image: url(images/operation-detail/icn_schedule.png);
}

#operation-detail > #enable-otp-switch-container.operation-option i{
    background-image: url(images/operation-detail/icn_otp.png);
}

#operation-detail #blue-ribbon{
    height: 2rem;
    width: 100%;
    color: #fff;
    display: table;
    font-weight: 600;
    background-image: url(images/operation-detail/schedule_bar.png);
    background-repeat: no-repeat;
    background-size: cover;
}

#operation-detail #blue-ribbon > *{
   display:table-cell;
}

#operation-detail #blue-ribbon > i:first-of-type{
    width: 2rem;
    padding: 0px;
    margin: 0px;
    background-image: url(images/operation-detail/schedule_bar_icon.png);
    background-repeat: no-repeat;
    background-size: auto 1.2rem;
    background-position: right;
}

#operation-detail #blue-ribbon.satellite > i:last-of-type{
    width: 1rem;
    padding-right: 1rem;
    background-image: url(images/operation-detail/satellite_icon_bar.png);
    background-repeat: no-repeat;
    background-size: auto 1.2rem;
    background-position: left;
}

#operation-detail #blue-ribbon > span:first-of-type{
    padding: 0.5rem 0.5rem;
}


#application-panel.detail #operation-detail {
    display: block;
}

#application-panel.detail #operations-list-container  {
    display: none;
}

#application-panel.tree #operations-list-container {
    overflow-x: hidden;
    overflow-y: scroll;
}

[draggable = "true"]{
    opacity: 100%;
    background-color: #FFF;
}
#enable-autoclose-container .twoLevels p:first-child{
    padding-bottom: 1.2rem;
}

/*
 * application detail
 */

.pdm-on .pdm-h-button {
    transform: rotate(-180deg);
}

.pdm-on .pdm-options {
    display: block;
}

#op-detail-switch {
    position: absolute;
    height: 10.63rem;
    width: 30rem;
    left: calc(50% - 15rem);
    top: calc(50% - 5.3rem);

}

.switch-part {
    height: 100%;
    float: left;
    width: calc(100% / 3);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center;
    border: 0;
    padding: 0;
    margin-left: -0.2rem;
}

#switch-locked {
    background-image: url(images/switch/btn_locked_off.png)
}
#switch-sched {
    background-image: url(images/switch/btn_sched_off.png)
}
#switch-unlocked {
    background-image: url(images/switch/btn_unlocked_off.png)
}

#switch-locked.on {
    background-image: url(images/switch/btn_locked_on.png)
}
#switch-sched.on {
    background-image: url(images/switch/btn_sched_on.png)
}
#switch-unlocked.on {
    background-image: url(images/switch/btn_unlocked_on.png)
}

.pull-down-menu {
    background: #ddd;
    box-shadow: 0 .2rem .2rem .1rem #ccc;
}

#operation-detail section:first-child {
    margin-top: 0;
}

#operation-detail .operation-option {
    display:table;
    width: 100%;
    vertical-align: middle;
    background-color: #E9EAEB;
    border-bottom: 1px solid #C5C6C8;
}

#operation-detail .operation-option p{
    color: #475663;
}

#pdm-autoretrieve-header{
    text-align: center;
    width: 90%;	
    margin: 2rem auto;	
    padding: 0rem;
    border-radius: 4rem;	
    background: #54CDD0;	
    color: white;	
    font-size: 1.6rem;	
}

.pdm-header {
    background-color: #ddd;
    color: #475663;
    position: relative;
    line-height: 4.5rem;
    font-size: 2rem;
    padding-left: 4.5rem;
    -moz-box-sizing: border-box;
}

.pdm-header:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4rem;
    height: 100%;
    display: block;
}

.pdm-h-schedule:after {
    background-image: url(images/icn_schedule.png);
    background-size: auto 1.7rem;
    background-position: center;
    background-repeat: no-repeat;
}

.pdm-h-button {
    float: right;
    display: block;
    height: 100%;
    border: 0;
    width: 4rem;
    margin-right: 1rem;
    background: transparent;
    background-image: url(images/arrow_down.png);
    background-repeat: no-repeat;
    background-position: center;
}

.pdm-options {
    display: none;
}

.pdm-option {
    height: 4rem;
    position: relative;
    padding: 0 1.5rem;
    -moz-box-sizing: border-box;
    font-weight: 300;
}

.pdm-option-test {
    display: inline-block;
    height: 100%;
    width: 50%;
    line-height: 4rem;
    font-size: 1.7rem;
}

.pdm-option-value {
    text-align: right;
    float: right;
    display: inline-block;
    height: 100%;
    width: 50%;
    line-height: 4rem;
    font-size: 1.7rem;
}

.pdm-option input {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

#applications-header-icon-box{
    position: absolute;
    top: 1rem;
}

#applications-header-section:not(.detail) #applications-header-icon-box{
    display: none;
}

#applications-header-section.detail #applications-sub-header,
#applications-header-section.detail #applications-header{
    display:block;
    margin-right: 8rem;
    margin-left: 3rem;
    padding-left: 0rem;
    width: calc(100% - 14rem);
}

#application-panel > header i{
    display: inline-block;
    width: 2rem;
    height: 2rem;
    margin-right: 0.7rem;
    margin-top: 0.7rem;
    position: relative;
    left: 22rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

#application-panel > header i#applications-header-log{
    background-image: url(images/icons-submenu/icn_log_header.png);
}

#application-panel > header i#applications-silent-on{
    background-image: url(images/icons-submenu/icn_silent_header_off.png);
}

#application-panel > header i#applications-silent-off{
    background-image: url(images/icons-submenu/icn_silent_header_on.png);
}

/*
 * pairing
 */


#pairing-panel section {
    height: calc(100% - 10rem);
    overflow: auto;
    -moz-box-sizing: border-box;
    padding: 2rem;
    color: white;
}

#pairing-panel section p {
    margin-top: 1.5rem;
    font-size: 1.5rem;
    text-align: center;
    line-height: 2.2rem;
    font-weight: 300;
    text-align: center;
    color: #0B889A;
}

#pairing-panel-code {
    display: none;
}

#pairing-panel.generate-code #pairing-panel-info {
    display: none;
}

#pairing-panel-info img {
    background-image: url("images/320/icn_pairing.png");
    background-repeat: no-repeat;
    background-size: 100%;
    height: 11rem;
    width: 11rem;
    display: block;
    margin: -1rem auto 4rem auto;

}

#pairing-panel.generate-code #pairing-panel-code {
    display: block;
}

#show-pairing-tutorial {
    border: none;
    width: 100%;
    color: white;
    text-align: center;
    font-size: 1.5rem;
    border-radius: 0;
}

#code-generated {
    display: block;
    -moz-box-sizing: border-box;
    padding: 1rem;
    width: 100%;
    font-size: 4.5rem;
    text-align: center;
    margin-bottom: 1.5rem;
    color:#000;
    letter-spacing: 2px;
}

progress[value] {
    height: 0.3rem;
    background: white;
    border: none;
    -moz-box-sizing: border-box;
}
/*
 * pairing-tutorial
 */

body.pairing-tutorial #main-panel {
    transform: translateY(-100%);
    background: white;
    background-image: url(images/tutorial.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center 5rem;
}


/*
 * Building Blocks tweaks
 */

section[data-type="list"] {
    padding: 0 !important;
}

[data-type="list"] li {
    padding: 0 1.5rem;
}


section[role="region"] > header:first-child > button:after,
section[role="region"] > header:first-child > a:after {
    background: none !important;
}

.operationLogo {
    width: auto !important;
    height: 100% !important;
    margin-top: 0rem;
    margin-left: -1.5rem;
    margin-right: 0.7rem;
}

section[role="status"] {
    animation-name: hide;
    animation-duration: .3s;
    animation-fill-mode: forwards;
}

section[role="status"].onviewport {
    animation-name: show;
}

section[role="status"].hidden {
    visibility: hidden;
    display: none;
}

/*
 *   Settings
 */
.invisible{
    height: 0px;
    width: 0px;
    border: 0px;
    padding: 0px;
    margin: 0px;
}

.settingsPanel{
    background-color: white;
}

ul[data-type = "settingsList"]{
    overflow: visible !important;
}

li[data-type = "settingsOption"]{
    height: calc(100% - 16rem) !important;
    padding: 1.2rem;
}

li[data-type = "settingsOption"] p{
    white-space: normal !important;
    line-height: 2rem !important;
}
li[data-type = "settingsOption"] label.pack-checkbox{
    width: 4rem !important;
    height: 4rem !important;
}

.modalDialog {	
    position: fixed;	
    font-family: Arial, Helvetica, sans-serif;	
    top: 0;
    right: 0;	
    bottom: 0;	
    left: 0;	
    background: rgba(0,0,0,0.4);	
    z-index: 99999;	
    opacity:0;	
    transition: opacity 400ms ease-in;	
    pointer-events: none;	
    display: table;	
    width:100%;	
    height:100%;	
    margin: auto;
}	

.modalDialog > div{	
    width: 90%;	
    height: 100%;	
    display: table;    	
    margin: auto;	
}	

.modalDialog:target {	
    opacity:1;	
    pointer-events: auto;	
}	

.modalDialog div.content {	
    width: 90%;	
    padding:0rem 0rem 1rem 0rem;	
    border-radius: 3px;	
    overflow-y: hidden;	
    display: table-cell;	
    vertical-align: middle;	
    word-break: break-all;
}	

.modalDialog div.content > h2{	
    background-color: #00B9BE;	
    margin: 0rem;	
    padding: 1.2rem 2rem;	
    color: white;	
    font-size: 1.5rem;
    font-weight: 400;	
    border-radius: 3px 3px 0px 0px;	
}	

#log-filter-openModal h2{
    text-align: center;
}

#submenu-move-openModal .content > div:first-of-type > i {
    width: 16px;
    height: 16px;
    
    display: inline-block;
    position: relative;
    top: 2rem;
    left: 0.5rem;
    float: left;
    
    padding-top: 0.2rem;
    
    background-image: url("images/icons-submenu/icn_folder_none.png");
    background-size: 16px;
    background-position: center center;
    background-repeat: no-repeat;
}

.modalDialog .close,
.modalDialog .modalButton {	
    display: block;	
    margin: 2rem auto 0.5rem auto;	
    padding: 1rem;	
    background: #00B9BE;	
    color: #fff;	
    text-align: center;	
    text-decoration: none;	
    border-radius: 3px;	
}	

.modalDialog div.content > div{	
    background: #fff;	
    padding: 1rem;	
    text-align: center;
}

.modalDialog div.content > div:last-of-type{
    border-radius: 0px 0px 3px 3px;	
    padding: 1rem 0rem;
    width: calc(100% - 4rem);
}

.modalDialog div.content > ul{	
    font-size: 1.5rem;	
    color: #868789;	
    display: table;	
    border-collapse: collapse;	
    width: 100%;	
    overflow-y: scroll;	
    background: #fff;	

}	

.modalDialog div.content > ul> li{	
    border-bottom: 1px solid #D8D9DA;	
    padding: 1rem 2rem;	
    display: table-row;	
    font-weight: 200;
}	

.modalDialog div.content > ul> li:last-of-type{	
    border-bottom: none;
}	

.modalDialog div.content > ul> li > i,	
.modalDialog div.content > ul> li > p{	
    display: table-cell;	
    vertical-align: middle;	
    padding-top: 0.7rem;	
    padding-bottom: 0.7rem;	
}	

.modalDialog div.content > ul> li > i{	
    background-repeat: no-repeat;	
    background-position: center;	
    background-size: 16px 16px;	
    height: 16px;	
    width: 16px;	
    padding-left: 4rem;	
}	

.modalDialog div.content > ul> li > .amount{	
    width: 2rem;	
}

#rename-openModal.modalDialog div.content > div:first-of-type,
#submenu-move-openModal.modalDialog div.content > div:first-of-type{
    display: block;
    border-radius: 0;
}

#rename-openModal.modalDialog div.content > div > input,
#submenu-move-openModal.modalDialog div.content > div > input{
    margin: auto auto;
    font-size: 1.3rem;
    border: 0px;
    width: 90%;
    background-image: none;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-radius: 0;
    padding: 0rem 1rem 0.5rem 1rem;
}

#submenu-move-openModal.modalDialog div.content > div > input{
    padding: 0rem 1rem 0.5rem 3rem;
    width: calc(90% - 2rem);
}

#submenu-move-openModal.modalDialog div.content > ul> li{
    height: 3rem;
}

#submenu-move-openModal.modalDialog div.content > ul> li > i:first-of-type{
    background-image: url(images/icons-submenu/icn_folder_none.png);
}

#submenu-move-openModal.modalDialog div.content > ul> li.checked > i:first-of-type{
    background-image: url(images/icons-submenu/icn_folder_checked.png);
}

#log-filter-openModal.modalDialog div.content > ul> li > i:last-of-type{
    background-image: url(images/icons-submenu/select_empty.png);
}

#log-filter-openModal.modalDialog div.content > ul> li.checked > i:last-of-type{
    background-image: url(images/icons-submenu/select_tick.png);
}

#submenu-move-openModal.modalDialog div.content > ul> li.checked > i:last-of-type{
    background-image: url(images/icons-submenu/select_radio.png);
}

#submenu-move-openModal.modalDialog div.content > ul> li > i:last-of-type{
    background-image: url(images/icons-submenu/select_empty.png);
}

#submenu-move-openModal.modalDialog div.content > ul> li > i,	
#submenu-move-openModal.modalDialog div.content > ul> li > p{	
    padding-top: 0.3rem;	
    padding-bottom: 0.3rem;	
}

#submenu-move-openModal.modalDialog div.content > ul> li > p {
    transform: none;
    color: #B1B3B3;
    width: 20rem;
    overflow: hidden;
    text-overflow: ellipsis;
    float:left;
}

#submenu-move-openModal.modalDialog div.content > ul> li.checked > p {
    color: #007D95;
}


#third-party-openModal .content > div,
#log-statistics-openModal .content > div,
#log-filter-openModal .content > div,
#blocked-openModal .content > div,
#rename-openModal .content > div,
#close-all-sessions-openModal .content > div,
#close-single-session-openModal .content > div,
#submenu-delete-group-openModal .content > div,
#submenu-move-openModal .content > div{
    display: table;
    padding-left: 2rem;
    padding-right: 2rem;
    border-collapse:separate;
    border-spacing:5px;
    border-radius: 0px;
}

#third-party-openModal .modalButton,
#log-statistics-openModal .modalButton,
#log-filter-openModal .modalButton,
#blocked-openModal .modalButton,
#rename-openModal .modalButton,
#close-all-sessions-openModal .modalButton,
#close-single-session-openModal .modalButton,
#submenu-delete-group-openModal .modalButton,
#submenu-move-openModal .modalButton {	
    display: table-cell;
    height: 2rem;
    font-size: 1.4rem;
    vertical-align: middle;
    max-width: 4rem;
    word-break: normal;
}	

.modalButton.grey{
    background-color: #B0B2B3;
}

#blocked-openModal .content p,
#close-all-sessions-openModal .content > p,
#close-single-session-openModal .content > p,
#submenu-delete-group-openModal .content > p{
    background-color: #fff;
    padding: 1.5rem 1.5rem 0.5rem 1.5rem;
    font-size: 1.4rem;
    line-height: 2rem;
    color: #007D95;
    word-break: normal;
}

#blocked-openModal.modalDialog div.content > ul > li{
    display: block;
    margin: 0.5rem 2rem 0rem 3rem;
    padding: 0rem;
    color: #555;
    border: none;
}

/*
 *   Log
 */

#log-panel > #log-subheader{
    height: 4rem;
    text-align: center;
    display: table;
    border-spacing: 1rem;
    border-collapse:separate;
    padding-bottom: 1rem;
    width: 100%;
}

#log-panel > #log-subheader > div{
    border-radius: 24px;    
    font-size: 1.7rem;
    vertical-align: middle;    
    border: 2px solid #46C7D3;
    background-repeat: no-repeat;
    background-position: center;
    display: table-cell;
    color: #46C7D3;
}

#log-panel > #log-subheader > div.selected{
    background-color: #46C7D3;
    color: white;
}

#log-panel > #log-subheader > div:nth-of-type(1){
    padding: 0rem 0.5rem
}

#log-panel > #log-subheader > div:nth-of-type(2){
    background-image: url(images/icons-log/arrow_right.png);
    background-size: auto 20px;
}

#log-panel > #log-subheader > div:nth-of-type(2).selected{
    background-image: url(images/icons-log/arrow_right_white.png);
}

#log-panel > #log-subheader > div:nth-of-type(2) > div{
    display: inline-block;
    width: calc(50% - 1.5rem);
}

#log-panel > #log-subheader > div:nth-of-type(2) > div:first-child{
    text-align: right;
    margin-right: 1rem;
}

#log-panel > #log-subheader > div:nth-of-type(2) > div:last-child{
    text-align: left;
    margin-left: 1rem;
}

#log-panel > #log-subheader > div:nth-of-type(3){
    background-image: url(images/icons-log/box_event_select_btn.png);
    border-radius: 50%;
    width:44px;
    height:44px;
}

#log-panel > #log-entries-panel{
    max-height: 100%;
    overflow-y: scroll;
    height: calc(100% - 15.5rem);    
}

#log-panel > #log-entries-panel ul{
    list-style-type: none;
    margin: 0rem 3rem 0rem 1rem;
}

#log-panel > #log-entries-panel ul li.logEntry{
    width: 100%;
    margin: 0.5rem 0rem;
    height: 3rem;
    border-radius: 7px;
    padding: 1rem;
    display: table;   
}

#log-panel > #log-entries-panel ul li.logEntry:last-child{
    margin-bottom: 5.5rem;
}

#log-panel > #log-entries-panel ul li.logEntry > div{
    display:table-cell;
    margin: 0rem 0.5rem;
    vertical-align: middle;
}


#log-panel > #log-entries-panel ul li.logEntry > .icon{
    width: 2rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

#log-panel > #log-entries-panel ul li.logEntry > .text{
    font-size: 1.4rem;
    padding: 0rem 0.7rem 0rem 1.5rem;
}

#log-panel > #log-entries-panel ul li.logEntry > .dateTime{
    width:15%;
    padding-left: 0.7rem;
    text-align: right;
    font-weight: 400;
}

#log-panel > #log-entries-panel ul li.logEntry > .dateTime span{
    font-weight: normal;
}

#log-panel > #log-statistics-banner div a:active,
#log-panel > #log-statistics-banner div a{
    text-align: center;
    font-size: 1.7rem;
    color: white;
    position: relative;
    top: 5rem;
    text-decoration: none;
    display:block;
    opacity: 1;
    outline: 0;
    background-color: #08879B;
}

/*
*   Log entry colors
*/

#log-panel > #log-entries-panel ul li.logEntry.restored,
#log-panel > #log-entries-panel ul li.logEntry.locked{
    background-color: #CBEFF2;
    color: #00B9BE;
}

#log-panel > #log-entries-panel ul li.logEntry.unlocked{
    background-color: #ECECED;
    color: #838383;
}

#log-panel > #log-entries-panel ul li.logEntry.modified{
    background-color: #FBE0B7;
    color: #F19300;
}

#log-panel > #log-entries-panel ul li.logEntry.accessed{
    background-color: #FF9595;
    color: #890000;
}

#log-panel > #log-entries-panel ul li.logEntry.disabledByProvider{
    background-color: #F8C2C5;
    color: #E1231B;
}

#log-panel > #log-entries-panel ul li.logEntry.attempt{
    background-color: #B2D4DA;
    color: #017E96;
}

/*
*   Log entry icons
*/

.modalDialog div.content > ul> li.locked > i:first-of-type,
#log-panel > #log-entries-panel ul li.logEntry.locked .icon{
    background-image: url(images/icons-log/icn_alert_log_locked.png);
}

.modalDialog div.content > ul> li.unlocked > i:first-of-type,
#log-panel > #log-entries-panel ul li.logEntry.unlocked .icon{
    background-image: url(images/icons-log/icn_alert_log_unlocked.png);
}

.modalDialog div.content > ul> li.modified > i:first-of-type,
#log-panel > #log-entries-panel ul li.logEntry.modified .icon{
    background-image: url(images/icons-log/icn_alert_info.png);
}

.modalDialog div.content > ul> li.accessed > i:first-of-type,
#log-panel > #log-entries-panel ul li.logEntry.accessed .icon{
    background-image: url(images/icons-log/icn_alert_log_warning.png);
}

.modalDialog div.content > ul> li.restored > i:first-of-type,
#log-panel > #log-entries-panel ul li.logEntry.restored .icon{
    background-image: url(images/icons-log/icn_alert_log_enabled.png);
}

.modalDialog div.content > ul> li.disabledByProvider > i:first-of-type,
#log-panel > #log-entries-panel ul li.logEntry.disabledByProvider .icon{
    background-image: url(images/icons-log/icn_alert_log_disabled.png);
}

.modalDialog div.content > ul> li.attempt > i:first-of-type,
#log-panel > #log-entries-panel ul li.logEntry.attempt .icon{
    background-image: url(images/icons-log/icn_alert_log_attempt.png);
}

/*
*   Privacy
*/

#third-party-openModal.modalDialog .content .licenseText{
    max-height: 15rem;
    border-bottom: 1px solid #999;
    overflow-y: scroll;
    display: block;
}

#third-party-openModal.modalDialog .content .licenseText p:last-of-type{
    margin-bottom: 1rem;
}

#third-party-openModal.modalDialog .content .buttons .modalButton{
    margin: 0rem auto;
}

@keyframes show {
    from {
        transform: translateY(100%)
    }
    to {
        transform: translateY(0)
    }
}

@keyframes hide {
    from {
        transform: translateY(0)
    }
    to {
        transform: translateY(100%)
    }
}