roundcube-multibox/plugins/xskin/assets/styles/larry_mobile.scss

@import "_larry_common";

html,
body {
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: none; /* prevents text resizing when user rotates the iphone-type device */
}

// fixes the problem with content scrolling on mobiles; larry uses overflow:hidden to avoid a bounce effect
// but it causes problems on mobile
body.noscroll {
    overflow-y: initial !important;
}

img {
    border: 0;
}

p {
    padding: 3px 8px 3px 8px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

fieldset {
    margin: 0;
    border: none;
    padding: 0;
}

a,
a:hover,
a:active,
a:visited {
    text-decoration: none;
    outline: none;
    color: #0a67ca;
}

a.iconlink:hover {
    text-decoration: none;
}

a.button.pressed,
a.button:active,
input.button:active {
    background-image: none;
}

select {
    width: 100%;
    padding: 10px;
    -webkit-appearance: menulist;
    min-height: 40px;
    border-radius: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

select,
textarea,
input[type="text"],
input[type="password"] {
    width: 100%;
    border: 1px solid #ddd !important;
    border-radius: 0;
    padding: 10px 5px;
    background: #fefefe !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

select {
    background: #f1f1f1 !important;
    background: -moz-linear-gradient(top, #f5f5f5 0%, #EAEAEA 100%) !important;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#EAEAEA)) !important;
    background: -o-linear-gradient(top, #f5f5f5 0%, #EAEAEA 100%) !important;
    background: -ms-linear-gradient(top, #f5f5f5 0%, #EAEAEA 100%) !important;
    background: linear-gradient(top, #f5f5f5 0%, #EAEAEA 100%) !important;
}

fieldset legend {
    display: block;
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    color: #333;
    padding: 8px 0;
    margin-bottom: 20px !important;
    width: 100%;
    text-align: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

fieldset fieldset legend {
    border-bottom: 1px dotted #ddd;
    padding: 10px 0;
    margin-bottom: 10px;
    text-align: left;
}

input[type="checkbox"],
input[type="radio"] {
    width: 24px !important;
    height: 24px !important;
}

input.button {
    display: block;
    margin-bottom: 10px !important;
    padding: 8px !important;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
}

input[type='button'],
.popup-box a,
.popup-box #sections-table td,
#mailFoldersBox a,
#addressList a,
.contactfieldbutton.deletebutton,
.iframe a.active,
#subscriptionTable td.name,
div.buttonBox a,
#message-objects div a.button,
input.button.mainaction,
input.button.mainaction:active,
#contactphoto .formlinks a {
    display: inline-block;
    background: #888;
    border: none;
    color: #fff;
    -webkit-appearance: none;
}

body.iframe {
    position: static;
    background: #fff;
    margin: 0;
    min-width: 300px !important;
}

body.iframe .footerleft.floating,
#composeview-bottom .formbuttons.floating {
    position: static;
}

.contentbox .boxtitle,
body.iframe .boxtitle {
    position: static;
    color: #333;
    background: none;
    border-bottom: 1px solid #ccc;
    margin: 0;
    box-sizing: border-box;
    height: auto !important;
    padding: 10px;
}

.footerleft,
.footerright {
    padding: 0 10px 20px 10px;
    text-align: center;

    input.button {
        width: 100%;
        margin: 0 0 10px 0 !important;
    }
}

.formbuttons input.button,
.formbuttons input.button:active {
    background-image: none;
}

.settings-page .formbuttons {
    margin-top: 0;
    padding-top: 20px !important;
    border-top: 1px solid #ccc;
}

ul.proplist li,
table.propform td {
    width: auto;
    background: #fff;
    border: none;
}

table.propform td:last-child {
    padding-right: 0;
}

body.iframe .footerleft.floating:before,
#composeview-bottom .formbuttons.floating:before {
    background: none;
}

#toplogo {
    display: none;
}

.listbox {
    background: transparent;
}

.listbox table.listing {
    background: transparent;
}

ul.treelist li a:focus,
ul.listing .listitem a:focus,
ul.listing .listitem span:focus,
ul.listing.focus .listitem.focused span {
    background: transparent;
    color: #333 !important;
}

.minwidth {
    min-width: 0 !important;
}

.uibox {
    border-radius: 0;
    border: none !important;
}

.listbox .listitem.selected,
.listbox .tablink.selected,
.listbox .listitem.selected > a,
.listbox .tablink.selected > a,
.listing tbody tr.unfocused td,
.listing tbody tr.selected td,
.listing li.selected,
.listing li.selected > a,
ul.listing li {
    color: #333;
    background: transparent;
}

div.ui-dialog.ui-draggable {
    width: 94% !important;
}

.popup-box .dropbutton a.disabled {
    opacity: 0.5;
}

#main-menu a.active {
    background: #fff;
}

#mainscreen {
    background-color: #fff;
}

#mainscreencontent { /* rc 1.1 */
    top: 0;
    background-color: #fff;
}

.listing.focus tbody tr.focused > td:first-child {
    border-left: none;
}

ul.toolbarmenu li a.active:hover,
ul.toolbarmenu li a.active:focus {
    background: transparent;
}

#xsidebar,
#xsidebar-button {
    display: none;
}

#pagejumper {
    display: block;
    max-width: 150px;
    margin: auto;
}

#pagejump-selector {
    padding: 0;
    margin: 0;
}

/* gestures */

#mainscreencontent.gesture-refresh {
    border-top: 1px solid #ddd;
}

#mailview-right.gesture-pan:before {
    position: absolute !important;
    font-size: 50px;
    font-weight: bold;
    color: #ddd;
}

#mailview-right.gesture-pan.prev:before {
    top: 20px;
    left: 10px;
}

#mailview-right.gesture-pan.next:before {
    top: 20px;
    right: 10px;
}


#mailview-right.gesture-pan.prev.ready:before,
#mailview-right.gesture-pan.next.ready:before {
    color: #afafaf;
}

#mainscreen.progress:before {
    position: absolute !important;
    font-size: 60px;
    font-weight: bold;
    color: #afafaf;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -30px;
}

#mainscreen.refresh:before {
    position: absolute !important;
    top: 10px;
    left: 50%;
    margin-left: -15px;
    font-size: 30px;
    font-weight: bold;
    color: #ddd;
}

#mainscreen.refresh.ready:before {
    color: #afafaf;
}

/* message stack */

#messagestack {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0;
}

#messagestack div {
    width: 100%;
    margin: 0;
    border-radius: 0;
    border: none;
    text-shadow: none;
    box-sizing: border-box;
    overflow: hidden;
    color: #fff !important;
    background: #888;
}

#messagestack div a,
#messagestack div.loading,
#messagestack div.error,
#messagestack div.warning,
#messagestack div.confirmation {
    color: #333;
    font-weight: normal;
}

#messagestack div a {
    text-decoration: underline;
}

/* message bar */

#message {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    text-align: center;
}

#login-form #message div,
#message div.loading,
#message div.warning,
#message div.error,
#message div.notice,
#message div.confirmation,
#message-objects div.notice {
    color: #000;
    font-weight: normal;
    background-color: #fff;
    padding: 6px 30px;
    border: 1px solid #ccc;
}

#message div.error, #message div.warning {
  background-color: #FFC9CC;
}

#message div.confirmation {
  background-color: #DDFFC9;
}



/* main menu */

#main-menu {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: #ccc;
}

#main-menu a {
    display: block;
    float: left;
    border-radius: 0;
    padding: 12px !important;
    text-align: center;
    color: #fff;
    width: 32px;
    height: 26px !important;
    border: 0 !important;
}

#rcmKSearchpane {
    max-height: 100%;
}

/* message list */

#messagetoolbar,
#messagelistfooter,
#searchfilter {
    display: none;
    height: auto;
}

#mainscreen,
#mainscreen.offset,
.minimal #mainscreen,
.minimal #mainscreen.offset {
    top: 50px;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0;
}

#mailviewsplitterv {
    display: none;
}

#mailview-right {
    position: static;
    background-color: #eee;
}

// fix cut content on lumia
#mailview-right,
#composeview-right {
    width: 100% !important;
}

#mailview-top {
    top: 0;
    border: none;
}

#messagelistcontainer {
    top: 20px;
    bottom: 0;
    border-top: 1px solid #ddd;
}

#current-folder {
    height: 20px;
    font-weight: normal;
    background: #fff;
}

#current-folder span {
    display: inline-block;
    padding: 2px 0 0 5px;
    margin: 0;
}

#messagelistcontainer table,
#messagelistcontainer table thead {
    display: none;
}

#messagelistcontainer table#messagelist,
#messagelistcontainer table#messagelist tbody {
    display: block;
}

#messagelist tr {
    display: block;
    position: relative;
    height: 60px;
    width: 100%;
    border-bottom: 1px solid #ddd;
    overflow: hidden;
}

#messagelist tr.even {
    background: #FFFEFC;
}

#messagelist td {
    display: none;
    position: absolute;
    border: none;
    padding: 0;
    background-color: transparent;
    color: #333 !important;
}

#messagelist tr.selected,
#messagelist tr.unfocused {
    background-color: #E0EEFF !important;
}

#messagelist tr td {
    background-color: transparent !important;
}

#messagelist tr.selected td a,
#messagelist tr.selected td span,
#messagelist tr.unfocused td a,
#messagelist tr.unfocused td span {
    color: #333 !important;
}

#messagelist td.subject {
    display: block;
    top: 0;
    left: 0;
    right: 5px;
    bottom: 0;
    z-index: 2;
    width: auto;
}

#messagelist td.subject a {
    position: absolute;
    display: block;
    left: 0;
    right: 105px;
    top: 0;
    bottom: 0;
    padding: 10px 0 0 5px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#messagelist td.from,
#messagelist td.to,
#messagelist td.fromto {
    display: block;
    left: 5px;
    bottom: 10px;
    font-weight: normal;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: transparent !important;
}

#messagelist td.date {
    display: block;
    right: 5px;
    bottom: 6px;
    font-weight: normal;
    width: auto;
    /* we need to cover the overlapped to/from when the message action links are open */
    background: #fff !important;
    padding: 4px 0 4px 6px;
}

#messagelist tr.selected td.date,
#messagelist tr.unfocused td.date {
    background: #ddd !important;
}

#messagelist td.status {
    display: block;
    right: 30px;
    padding-top: 8px !important;
    background: transparent !important;
}

#messagelist td.attachment {
    display: block;
    right: 45px;
    padding-top: 8px !important;
    background: transparent !important;
}

#messagelist td.flag {
    display: block;
    right: 63px;
    padding-top: 8px !important;
    background: transparent !important;
}

#messagelist td.subject .msgicon {
    display: none;
    position: absolute;
    right: 90px;
    top: 8px;
    height: 16px;
    width: 16px;
}

#messagelist td.subject span.msgicon.replied,
#messagelist td.subject span.msgicon.forwarded,
#messagelist td.subject span.msgicon.replied.forwarded {
    display: block;
}

#countcontrols {
    margin-top: 20px;
}

#countcontrols > span {
    display: block;
    margin: 0 0 10px 0;
    text-align: center;
}

#countcontrols .pagenavbuttons a {
    padding: 12px;
    margin: 0;
}

#messagelist tr.selected,
#messagelist tr.unfocused {
    background-color: #ddd !important;
}

.records-table tr.selected td,
.records-table.focus tr.selected td {
    background: #ddd;
}

.records-table thead tr th {
    color: #fff;
    background: #aaa;
}

#messagelist tr.message {
    z-index: 1;
    background: #fff;
}

.message-action-read {
    position: absolute;
    left: 0;
    height: 45px;
    width: 60px;
    z-index: 0;
    display: none;
    padding-top: 15px;
    text-align: center;
    background: #a61fa6;

    &:before {
        color: #fff;
        font-size: 30px;
    }
}

.message-action-read.unread {
    background: #3399ff;
}

.message-action-links {
    position: absolute;
    right: 0;
    height: 60px;
    width: 180px;
    z-index: 0;
    display: none;
}

.message-action-links a {
    display: inline-block;
    width: 60px;
    height: 45px;
    text-align: center;
    padding-top: 15px;
}

.message-action-links a:before {
    color: #fff;
    font-size: 30px;
}

.message-action-links a.mal-flag {
    background: #ff7600;
}

.message-action-links a.mal-unflag {
    background: #ff7600;
    display: none;
}

.message-action-links a.mal-more {
    background: #aaa;
}

.message-action-links a.mal-delete {
    background: #af0013;
}

.message-action-links.flagged a.mal-flag {
    display: none;
}

.message-action-links.flagged a.mal-unflag {
    display: inline-block;
}

/* single message view */

#mailview-right.uibox {
    border: none;
}

#mailview-right #messageheader {
    background-color: #fff;
    padding-left: 10px;
    /* header and message body must be absolutely positioned with set heights, we limit the height header height
    otherwise if there are many addresses there, there body becomes so small that you can't read anything
    it would be best if the entire screen scrolled, but I wasn't able to get this working without longer messages
    being cut at the bottom */
    max-height: 200px;
}

#mailview-right #messageheader h2.subject {
    margin: 0 60px 0 0;
}

#messageheader {
    z-index: 1;
    background: transparent;
}

#messageheader .countdisplay,
#messageheader .moreheaderstoggle,
#messageheader #contactphoto {
    display: none;
}

#messageheader #countcontrols {
    margin: 0;
    right: 0;
    top: 3px;
}

#formatcontrols {
    display: none;
}

#all-headers {
    height: auto;
    min-height: 100px;
}

#messagecontent {
    padding-top: 10px;
    margin-top: 10px;
}

#messagecontent .leftcol,
#messagecontent .rightcol {
    margin: 0;
    float: none;
    width: auto;
    background: transparent;
}

#messagebody p.image-attachment {
    margin: 0;
    padding: 10px 0;
    border-top: 1px solid #ddd;
}

.attachmentslist li a:hover {
    text-decoration: none;
}

#attachment-list li a.drop {
    font-size: 0 !important;
}

#attachment-list li a.drop:before {
    font-size: 20px;
}

#message-objects #remote-objects-message {
    background-image: none;
    padding: 10px;
    margin: 0 10px 10px 10px;
    line-height: 1.8em;
}

.mail-page #mainscreencontent #messagepartheader,
.mail-page #mainscreencontent #messagepartcontainer {
    position: static;
    width: 100% !important;
}

.mail-page #mainscreencontent #messagepartcontainer .iframebox {
    position: static;
}

.mail-page #mainscreencontent #messagepartcontainer #messagepartframe {
    height: 500px;
}

/* taskbar */

#header {
    top: 0;
    display: none;
}

#toplogo,
#topline,
.minmodetoggle {
    display: none !important;
}

#topnav,
.minimal #topnav {
    position: static;
    display: block;
    background: transparent;
    border: none;
    margin: 0;
    padding: 0;
    height: auto;
    color: #000;
}

#taskbar {
    position: static;
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    background: transparent;

    :before {
        display: none;
    }
}

#taskbar .button-inner,
.minimal #taskbar .button-inner {
    position: static;
    display: block;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
    width: auto !important;
    text-indent: 0 !important;
}

#taskbar a,
.minimal #taskbar a,
#taskbar .button-inner span,
.minimal #taskbar .button-inner span {
    background: none !important;
}

#taskbar a span.tooltip {
    display: none !important;
}

#taskbar a span.button-inner {
    font-size: 100%;
}

/* folder list */

#mailview-left {
    display: none;
}

#mailview-left.popup-box {
/*     width: auto !important; */
}

#mailview-left #mailboxcontainer {
    position: static;
    background: transparent;
    border: none;
    margin: 0;
    padding: 0;
    top: 0;
}

.listbox .scroller,
.listbox .boxfooter,
.boxfooter .listbutton {
    position: static;
    width: auto;
    background: transparent;
    border: none;
}

#folderlist-footer {
    position: absolute;
    top: 13px;
    right: 15px;
    left: auto;
    bottom: auto;


    #mailboxmenulink {
        display: none !important;
    }

    #quotadisplay {
        position: relative;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-image: none;
        color: #fff;

        &:before {
            position: relative;
            top: 2px;
            margin-right: 8px;
            font-size: 1.4em;
        }
    }
}

#mailboxmenulink {
    color: #fff !important;
}

/* settings / address book */

#preferences-details {
    padding-bottom: 0;
}

#preferences-box {
    border: none;
}

#settings-sections,
#settings-sections h2,
.splitter {
    display: none;
}

.listbox .listitem,
.listbox .tablink,
.listing tbody td,
.listing li {
    border: none;
}

.listbox .listitem a,
.listbox .tablink a,
.listing tbody td,
.listing li a {
    padding: 8px;
}

ul.listing li ul {
    border-top: 1px solid #ddd;
}

#addressview-left,
#addressview-right,
#settings-right,
#settings-right .contentbox,
#settings-right .iframebox,
#pluginbody.contentbox {
    position: static;
    width: auto !important;
}

#directorylist li {
    background: none;
}

#sections-table tbody td,
#sections-table .listitem span,
#settings-sections .listitem a,
#settings-sections .tablink a {
    background-image: none !important;
}

#directorylist li a,
#contacts-table .contact td.name,
#sections-table tbody td.section,
#settings-sections span.listitem a,
#settings-sections span.tablink a {
    background-image: none !important;
    padding: 8px !important;
}

#directorylist li.contactgroup a {
    padding-left: 24px !important;
}

#directorylist li.addressbook div.collapsed,
#directorylist li.addressbook div.expanded {
    top: 4px;
    right: 20px;
    left: auto;
    bottom: auto;
    background: none;
}

#addressview-left div.uibox,
#addressview-right div.uibox {
    position: relative;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    float: none;
    width: 100% !important;
    margin: 0;
    max-height: 180px;
    min-height: 100px;
    overflow-y: auto;
    border-bottom: 1px solid #ddd !important;
}

#settings-right .uibox.listbox {
    position: absolute;
    height: 150px;
    width: 100% !important;
    overflow-y: auto;
    border-bottom: 3px solid #ddd !important;
    background: #fff;
}

#settings-right .uibox.listbox .scroller {
    overflow-y: visible;
}

#settings-right .uibox.listbox .scroller td {
    border: none;
}

#settings-right .uibox.contentbox,
#settings-right #enigmacontent-box {
    position: absolute !important;
    top: 153px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

#settings-right .uibox.contentbox .iframebox,
#settings-right #enigmacontent-box .iframebox {
    height: 100%;
}

#preferences-details fieldset.advanced .advanced-toggle {
    display: inline-block;
    font-size: 0.8em !important;
    max-width: 50px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: normal !important;
    margin-top: 10px;
}

#contacts-box {
    min-height: 500px !important;
    overflow-y: auto;
}

#settings-right div.uibox.contentbox {
    max-height: none;
    overflow: hidden;
    background-color: transparent;
}

#settings-right .scroller {
    padding: 0;
}

#addressview-left .countdisplay,
#addressview-right .countdisplay,
#settings-right .countdisplay {
    display: none;
}

#addressview-left .boxpagenav,
#addressview-right .boxpagenav,
#settings-right .boxpagenav {
    position: static;
    padding: 8px 5px;
}

#addressview-left .boxfooter,
#addressview-right .boxfooter,
#settings-right .boxfooter {
    position: absolute;
    top: 2px;
    right: 8px;
    left: auto;
    bottom: auto;
    border: none;
    font-weight: bold;
    padding: 0;
    margin: 0;
}

.boxfooter .listbutton {
    display: inline-block;
    width: auto;
    height: auto;
    background: #aaa;
    color: #fff;
    padding: 5px 10px;
    margin-left: 10px;
    min-width: 24px;
    text-align: center;
}

.boxfooter .listbutton .inner {
    text-indent: 0;
    background: none;
    font-weight: bold;
    width: auto;
    height: auto;
    text-align: center;
}

#folderlist-content {
    height: auto !important;
}

#headerbuttons {
    top: 60px;
}

#headerbuttons input.button {
    padding-left: 4px !important;
    padding-right: 4px !important;
    max-height: 31px;
}

#rcmdraglayer,
.iframe-dragdrop-fix {
    display: none !important;
}

table.propform td.title {
    padding-right: 10px;
    white-space: normal;
}

.uibox .boxtitle,
.uibox .listing thead td {
    border-bottom: 1px solid #ddd;
    background: none !important;
    color: #333;
}


.listbox .listitem a,
.listbox .tablink a,
.listing tbody td,
.listing li a {
    color: #333;
}

#rcmrowidentitieslink, /* these links are added by myroundcube and lead to main sections */
#rcmrowfolderslink {
    display: none;
}

#pluginbody.contentbox .boxtitle {
    background: none;
}

#pluginbody.contentbox table {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#contactphoto {
    position: static;
    width: 100%;
}

#contactphoto .formlinks {
    margin-left: 130px;
}

#contactphoto .formlinks br {
    display: none;
}

#contactpic {
    float: left;
}

#contacthead .names input,
#contacthead .addnames input {
    display: block;
    width: 100%;
}

#contacthead .addfield {
    padding: 5px 0;
}

.contactfieldgroup {
    background: none;
}

a.deletebutton {
    position: static;
    display: block;
    margin-top: 5px !important;
    width: auto;
}

#contactsectioncontact legend {
    background: none;
    border-bottom: 1px solid #ddd;
    padding-left: 0;
}

#contactsectioncontact select {
    margin: 0;
    min-height: 0;
}

#contacts-table tbody tr.selected.focused>td:first-child {
    border-left: none;
}

#directorylist li.contactgroup input {
    margin-left: 20px;
    box-sizing: border-box;
    width: 90%;
}

#groupoptionsmenu li a[aria-disabled=true],
#mailboxoptionsmenu a {
    color: #ccc;
}

#mailboxoptionsmenu a[aria-disabled=false] {
    color: #333;
}

#contactphoto .formlinks a {
    margin-bottom: 5px;
    padding: 5px;
    width: 97%;
}

#folderslist-header a.search {
    display: none;
}

table.propform td.title {
    width: 40%;
    padding-left: 0;
}

table.propform td[colspan="2"] {
    padding-left: 0;
}

table.propform textarea {
    min-width: 0;
}

#preferences-details fieldset.advanced .advanced-toggle {
    display: none;
}

#preferences-details fieldset.advanced .propform {
    display: block !important;
}

.skinselection span.skinitem span.skinauthor,
.skinselection span.skinitem span.skinlicense {
    display: none;
}

/* tabs */

.tabsbar {
    border-bottom: 1px solid #ddd;
    overflow: hidden;
}

.tabsbar .tablink {
    background: transparent;
}

.tabsbar .tablink a {
    display: inline-block;
    background: transparent;
    padding: 5px;
    min-height: 30px;
}

.tabsbar .tablink.selected a {
    border: 1px solid #ddd;
}

.tabsbar .tablink.selected {
    background: transparent;
}

.tabsbar .tablink.selected a {
    background: #ddd;
    color: #333;
}

/* popup boxes */

.moved-container {
    /* this is applied to #main-menu and #mainscreen when popup is visible, it prevents horizontal page scrolling */
    position: fixed !important;
}

.popup-box,
#quicksearchbar,
#mailview-left,
#addressbooktoolbar,
#folder-selector {
    position: absolute !important;
    display: none;
    top: 0 !important;
    left: 0 !important;
    right: 105px !important;
    border: none !important;
    border-radius: 0;
    background: #fff !important;
    padding: 0 4px 0 0 !important; /* lines underlining buttons look strange with the shadow, make them end before the shadow begins */
    margin: 0 !important;
    min-height: 100%;
    height: 100%;
    width: auto !important;
    z-index: -2 !important;
    overflow-x: hidden;
    overflow-y: auto !important; /* myroundcube jappix plugin sets this to hidden on #header */
    -webkit-box-shadow: inset -6px 0 6px -4px #9a9a9a !important;
    box-shadow: inset -6px 0 6px -4px #9a9a9a !important;
}

.popup-box.overlay-popup {
    z-index: -1 !important;
}

.popupmenu { /* these have a style left: 10px that can't be removed, compensating */
    margin-left: -10px;
    padding-left: 10px;
}

.popup-box .popup-close {
    background: #e7e7e7;
    height: 50px;
    margin: 0 -4px 0 0; /* popup has a 4px right padding, but the header shouldn't */
    /* a little bit darker looks better because the background is grey */
    -webkit-box-shadow: inset -6px 0 6px -4px #505050 !important;
    box-shadow: inset -6px 0 6px -4px #505050 !important;
}

.popup-box .popup-close a,
#quicksearchbar .popup-close a  {
    display: block;
    border-radius: 0;
    padding: 12px;
    margin: 0;
    color: #fff !important;
    border: 0 !important;
    background: transparent;
    font-weight: bold;
}

.popup-box h5,
.popup-box h2.boxtitle {
    position: absolute;
    left: 50px;
    right: 10px;
    top: 15px;
    margin: 0;
    padding: 0;
    font-weight: bold;
    font-size: 1.2em;
    text-align: left;
    border: 0;
    color: #fff;
    background-color: transparent;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.popup-box h2 span {
    color: #fff;
}

.popup-box h2.boxtitle img {
    display: none;
}

.popupmenu h5 {
    /* compensating left: 10px, margin: -10px on .popupmenu */
    left: 60px;
}

.popup-box select {
    display: block;
    margin-top: 10px;
    width: 98% !important;
    max-width: 98% !important;
    box-sizing: border-box;
    padding: 5px;
}

.popup-box .listbox {
    overflow-y: visible;
}

.popup-box li {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.popupmenu li a:hover {
    background: transparent;
}

.popup-box span {
    color: #333;
}

.popup-box #sections-table thead {
    display: none;
}

.popup-box h5 span.rightalign {
    float: right;
    padding-right: 40px;
}

.popup-box .divider {
    padding-bottom: 5px;
    border-bottom: 1px solid #E0E0E0;
    margin-bottom: 15px;
}

.popup-box ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.popup-box span.dropbutton {
    display: block;
}

.popup-box span.dropbutton a {
    position: static;
}

.popup-box .dropbutton .dropbuttontip {
    background: transparent;
    left: 0;
    width: auto;
}

.popup-box a,
.popup-box span.dropbutton a,
ul.toolbarmenu li a.active,
.popup-box #sections-table td,
#mailFoldersBox a,
#addressList a,
.contactfieldbutton.deletebutton,
.iframe a.disabled,
.iframe a.active,
#subscriptionTable td.name,
div.buttonBox a,
#mailboxlist li.mailbox a,
ul.toolbarmenu li a,
#taskbar a,
#taskbar a.button-selected,
.minimal #taskbar a,
#quicksearchbar a.search-apply,
#quicksearchbar a.search-reset,
#composeheaders a.iconlink.edit,
.popup-box ul.toolbarmenu li a.icon,
.popup-box .listing li a,
#tb_label_popuplink {
    display: block !important;
    padding: 15px;
    margin: 0;
    border-radius: 0 !important;
    color: #333;
    height: auto !important;
    text-indent: 0 !important;
    background: transparent;
    border-bottom: 1px solid #ddd !important;
    width: auto;
}

.popup-box h5 a {
    padding: 0;
    color: #fff;
}

.moreheaderstoggle .iconlink {
    background: none;
}

.popup-box .boxfooter a {
    background: transparent !important;
}

.popup-box .search-apply {
    border-top: 1px solid #ddd !important;
}

.popup-box .compose {
    display: none !important;
}

.popup-box .boxtitle {
    background: none !important;
    color: #333;
}

.popup-box a.icon span,
.popup-box span.icon {
    background: transparent !important;
    padding: 0 !important;
}

.popup-box.sidebar-popup .content-container { /* mobile sidebar */
    padding: 15px;
}

.popup-box.sidebar-popup .bottom-links {
    border-top: 1px solid #ddd;
}

#folder-selector {
    margin: 0;
    padding: 0;
}

#folder-selector a span {
    padding-left: 10px !important;
}

#mailboxlist ul,
#mailboxlist li,
#mailboxlist li:first-child,
#mailboxlist li.mailbox ul {
    position: relative;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
}

#mailboxlist li.mailbox ul {
    margin-left: 20px;
}

#mailboxlist li.mailbox div.treetoggle,
#mailboxlist li.mailbox ul li div.treetoggle {
    top: 0;
    left: auto;
    right: 0;
    width: 42px;
    height: 30px;
    z-index: 999;
    text-align: center;
    padding-top: 12px;
}

#subscription-table .treetoggle {
    top: 3px !important;
}

#subscription-table .treetoggle:before {
    padding-top: 0 !important;
}

#mailboxlist li.mailbox a .unreadcount {
    position: static;
    display: inline-block;
    margin-left: 15px;
    background: transparent !important;
}

#mailboxlist li.mailbox .unreadcount {
    color: #333;
}

#main-menu a.active {
    color: #960000;
}

.funnel-filter span,
.funnel-search span {
    display: none;
    float: right;
}

.funnel-filter.active span,
.funnel-search.active span {
    display: block;
}

#messagesearchtools {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.listbox .boxfooter {
    height: auto;
}

#header #topnav {
    background: transparent !important;
}

#interface-options #switch-mobile-skin {
    padding-top: 20px;
}

.button-interface-options span {
    display: inline-block;
    height: 16px;
    width: 16px;
    margin-right: 5px;
    margin-top: 3px;
}

#skin-color-select:after {
    display: block;
    content: " ";
    clear: both;
    visibility: hidden;
    font-size: 0;
}

#skin-color-select a {
    display: inline-block !important;
    border: none !important;
    height: 26px !important;
    width: 26px !important;
    float: left;
    margin: 5px;
}

#skin-color-select br {
    display: none;
}

a.button {
    color: #333;
}

#messagetoolbar a.button.enigma {
    background-image: none;
}

#enigmamenu {
    color: #333;
}

#enigmamenu td {
    padding: 10px;
}

/* search popup */

form[name='rcmqsearchform'] {
    display: block !important;
    margin: 20px 10px 0 10px;
}

input#quicksearchbox {
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    font-size: 120%;
    font-weight: normal;
    margin-bottom: 20px;
}

#quicksearchbar li {
    display: block;
    width: 100%;
    margin-bottom: 5px;
    padding-left: 2px !important;
}

#quicksearchbar a.search-apply {
    clear: both;
}

#quicksearchbar a#searchmenulink,
#quicksearchbar a#searchreset {
    display: none !important;
}

#quicksearchbar li.separator {
    clear: both;
    width: 100%;
}

#quicksearchbar li.separator label {
    font-weight: bold;
    font-style: normal;
    font-size: 1.2em;
    color: #333;
}

/* compose page */

#composeview-right,
#compose-content,
#compose-attachments,
#composebodycontainer {
    position: static;
}

#composeheaders {
    background: none;
    padding-left: 0;
    padding-top: 5px;
}

#composeview-left,
#composeheaders .formlinks {
    display: none;
}

#composeoptionstoggle {
    left: auto;
    right: 0;
    top: 0;
    bottom: 0;
}

#composeheaders table.compose-headers {
    margin-right: 22px;
    width: auto;
}

#composeheaders .editfield a.iconlink.edit {
    display: none !important;
}

.popup-box a.iconlink.edit {
    display: block !important;
}

.moreheaderstoggle .iconlink {
    color: #333;
    text-align: center;
}

#composeheaders a.iconlink.edit {
    margin-top: 5px;
}

#composeheaders .headers-table .editfield textarea {
    padding: 8px;
    min-height: 50px;
}

#composeheaders .formlinks a {
    background: none;
    padding: 5px 10px 5px 0;
}

#composeheaders td.title a.cancel {
    background: none;
    text-indent: 0;
    font-size: 1.4em;
    font-weight: bold;
    color: #888;
    height: auto;
    width: auto;
    top: -14px;
    right: -6px;
}

.moreheaderstoggle {
    background: #eee;
}

#composeoptions {
    border-top: none;
    margin-right: 22px;
}

#composeoptions .composeoption {
    display: block;
}

#composeoptions .composeoption select,
#composeoptions .composeoption input {
    width: auto;
}

#composeoptions .composeoption select {
    margin-left: 5px;
}

#composebodycontainer,
#composebody {
    min-height: 300px;
}

#composeoptions .composeoption {
    padding-right: 0;
}

#composebody {
    font-size: 1rem;
    overflow-y: auto;
}

#composeview-bottom {
    height: auto !important;
}

#compose-attachments {
    position: static;
    width: auto;
    background: none !important;
    margin-top: 10px;
    border: none;

    // Hide the attachment menu button because xmobile.popup is not set on newly uploaded attachments so the menu
    // doesn't work. We decided to hide it instead because it's not essential.
    #attachment-list a.drop {
        display: none;
    }
}

.attachmentslist li a,
#compose-attachments ul li {
    font-weight: normal;
}

#compose-attachments input {
    width: 100% !important;
    box-sizing: border-box;
}

#compose-attachments a.button {
    width: 80%;
}

#composequicksearch {
    background: none;
    margin: 0;
    padding: 20px 8px 10px 8px;
}

#contactsearchbox {
    padding: 18px 12px;
}

#compose-contacts {
    top: 52px;
    padding-bottom: 20px;
}

#compose-contacts .listsearchbox {
    background: transparent;
    padding: 8px;
    margin-top: 0;
}

#compose-contacts .scroller {
    border-top: 0;
}

#searchmenulink,
#compose-contacts #searchreset,
a.button.extwin,
#aria-label-composecontacts,
#compose-contacts .listsearchbox .reset {
    display: none !important;
}

#compose-contacts #directorylist {
    border: none;
}

#contacts-table {
    margin-bottom: 10px;
}

#contacts-table td span {
    display: block;
    padding: 8px;
}

#contacts-table .selected td span {
    background: #eee;
}

#compose-contacts li a,
#contacts-table td {
    background: none;
    padding-left: 8px;
}

#compose-contacts .boxfooter {
    padding: 0 8px;
}

#compose-contacts #directorylist {
    margin: 0 8px;
}

#compose-contacts #directorylist li a {
    padding: 14px 12px !important;
}

#compose-contacts .boxfooter a {
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 10px 0;
}

#compose-contacts .boxpagenav {
    position: static;
    width: 100%;
    margin: 0;
    padding: 0 8px;
    text-align: center;
}

#compose-contacts .boxpagenav a {
    display: inline-block !important;
}

.searchbox input,
#quicksearchbar input {
    font-size: 1rem;
    font-weight: normal;
}

ul.toolbarmenu.selectable li a.selected {
    background: none;
}

.toolbarmenu.selectable li a.selected:before {
    padding-right: 10px;
}

.composeoption label.switchbox {
    position: relative;
    top: 4px;
}

/* pager */

#countcontrols {
    margin: 20px 0 50px 0;
}

/* listoptions */

.ui-dialog-titlebar {
    //display: none !important;
}

#listoptions {

    fieldset {
        float: none;
        margin: 0;
    }

    legend {
        margin-bottom: 0 !important;
    }

    ul {
        display: block;
    }

    li {
        width: 45%;
        float: left;
        padding: 4px 0 !important;
        background: none !important;
    }
}

/* ui dialogs */

div.ui-dialog,
div.ui-dialog.ui-draggable {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
}

.ui-dialog .ui-button.ui-dialog-titlebar-close {
    right: -10px;
}

.ui-dialog .ui-dialog-titlebar,
.ui-dialog .ui-dialog-content {
    padding: 10px;
}

.ui-dialog .ui-dialog-title {
    font-size: 1em;
}

.ui-dialog .hint,
.ui-dialog .formbuttons {
    margin: 0;
    padding: 5px 0;
}

.ui-dialog .formbuttons input.button {
    width: auto;
}

/* plugin: new user dialog */

#newuserdialog tr,
#newuserdialog td {
    display: block;
}

#newuserdialog table td.title {
    text-align: left;
}

#newuserdialog table td input,
#newuserdialog table td textarea {
    width: 100%;
}

#newuserdialog table td input {
    margin-bottom: 5px;
}

/* plugin: filters */

#filtersetmenu-menu,
#filtermenu-menu {
    margin-top: 0 !important;
}

#filterslist tbody tr.disabled td,
#filtersetslist tbody tr.disabled td,
#filtersetslist tbody td {
    color: #333;
    font-weight: normal;
}

#filterslist tbody tr.selected td,
#filtersetslist tbody tr.selected td {
    font-weight: bold !important;
}

#filtersscreen {
    position: static;
}

#settings-right #filtersetslistbox {
    width: 50% !important;
    right: auto;
}

#filtersscreen #filterslistbox {
    width: 50% !important;
    right: 0;
    left: auto;
}

#filter-form {
    min-width: 0;
}

#filter-form select,
#filter-form input[type=text],
#filter-form textarea {
    display: block;
    padding: 5px;
    margin: 5px 0;
    max-width: 100%;
    width: 100%;
    min-height: 40px;
}

#filter-form br {
    display: none;
}

#filter-form legend {
    margin-bottom: 10px !important;
}

#filter-form label[for=_allof],
#filter-form label[for=_anyof],
#filter-form label[for=_any] {
    padding-left: 10px;
}

#filter-form label[for=_anyof] {
    margin-left: -6px;
}

#filter-form label[for=_allof]:after,
#filter-form label[for=_anyof]:after {
    content: " ";
    display: block;
    clear: both;
    padding-left: 20px;
}

#filter-form #_allof,
#filter-form #_anyof,
#filter-form #_any {
    float: left;
    margin-bottom: 10px;
}

#filter-form div.rulerow {
    margin-top: 20px;
}

#filter-form div.rulerow,
#filter-form div.actionrow {
    background: #eee;
    border: 1px solid #ddd;
}

#filter-form .rulerow td,
#filter-form .actionrow td {
    display: block;
    width: 100%;
    padding: 5px 10px;
    box-sizing: border-box;
}

#filter-form .rowbuttons {
    text-align: left;
}

#filter-form .rowbuttons a {
    display: inline-block !important;
    background: #fff;
    padding: 5px 10px;
    height: auto;
    text-align: center;
    font-weight: bold;
    font-size: 1.5em;
}

#filter-form .rowbuttons a.add:before {
    content: "+";
}

#filter-form .rowbuttons a.del:before {
    content: "-";
}

#filter-form .rulerow span.listarea {
    display: block;
    margin-bottom: 10px;
    border: none !important;
    padding: 0;
}

#filter-form .rulerow span.listarea .listelement {
    height: auto !important;
    background: transparent !important;
}

#filter-form .rulerow span.listarea .listelement span.reset {
    margin-top: 10px;
    padding-right: 10px;
    display: none;
}

#filter-form .rulerow span.listarea input[type=text] {
    padding: 10px !important;
    height: auto !important;
}

#filter-form .formbuttons input[type=button] {
    margin: 0;
    width: 100%;
    max-width: 100%;
    padding: 12px !important;
}

#filter-form .formbuttons label {
    display: block;
    margin: 20px 0 20px 0;
}

#filter-form .formbuttons label input {
    margin: 0;
}

#filtersetmenulink span,
#filtermenulink span {
    display: none;
}


/* plugin: calendar (old) */

.ui-tabs ul {
    white-space: nowrap;
}

.ui-tabs .ui-tabs-nav li {
    padding: 0;
}

.ui-tabs .ui-tabs-nav li a {
    padding: 10px 3px;
    font-weight: normal;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    color: #333;
}

.ui-datepicker td span,
.ui-datepicker td a {
    padding-top: 10px;
    padding-bottom: 10px;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.ui-dialog-content .tabsbar .tablink.selected a {
    background: #aaa;
    color: #fff;
}

.ui-widget-header {
    background: #e4e4e4;
}

.calendar-page #calendar-header {
    left: 0;
    right: 0;
    border: none;
    background: #ddd;
}

.calendar-page #message,
.calendar-page #calquicksearchbar,
.calendar-page #taskstogglecontainer,
.calendar-page #calusernamecontent small {
    display: none !important;
}

.calendar-page #sectionslist,
.calendar-page #prefs-box,
.calendar-page #calendar-container,
.calendar-page #calendar,
.calendar-page #tasks {
    left: 0;
    right: 0;
    width: 100%;
    display: block !important; /* tasks can be toggled with #taskstogglecontainer - we don't allow that */
}

.calendar-page #sectionslist,
.calendar-page #tasks {
    visibility: hidden;
    margin-top: 0;
    top: 0;
}

.calendar-page #sectionslist {
    border: none;
}

.calendar-page .boxtitle {
    height: auto;
}

.calendar-page #sectionslist .boxtitle a {
    display: inline-block;
    padding: 10px 14px 8px 14px;
    border: 1px solid #aaa;
    background: #fff;
}

.calendar-page #prefs-box {
    border: none;
    border-bottom: 1px solid #aaa;
}

.calendar-page #todaybutton {
    top: 65px !important;
}

.calendar-page #todaybutton center {
    text-align: left;
}

.calendar-page select {
    width: auto;
}


.calendar-page .fc-view.fc-agenda {
    overflow-y: auto;
    height: 2000px !important;
}

.calendar-page .fc-view.fc-agenda div {
    height: auto !important;
}

.calendar-page #filters-table-content tr td:first-child,
.calendar-page #subscription-table-content tr td:first-child {
    width: 1%;
}

.calendar-page #subscriptiontoggle-content,
.calendar-page #subscriptiontoggle-content {
    border-bottom: none;
}

.calendar-page input#summary {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
}

.calendar-page span#startfulltext,
.calendar-page span#endfulltext {
    display: block;
    margin-bottom: 10px;
}

.calendar-page select#prioritysel {
    margin-bottom: 10px;
    width: 100%;
}

.calendar-page select#categories {
    margin-top: 10px;
    width: 100%;
}

.calendar-page input#location {
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 10px;
}

.calendar-page #taskscontent {
    height: auto !important;
}

#taskbar a.button-calendar span.button-inner,
#taskbar a.button-calendar.button-selected span.button-inner {
    color: #333;
}

.calendar-page #datepicker-title,
.calendar-page #weeknumber,
.calendar-page #tasksheader,
.calendar-page #tasksheader th,
.calendar-page #prefs-box {
    background: #fff;
    border-top: none;
}

.calendar-page #weeknumber {
    border-bottom: none;
}

.calendar-page #tasks th, td {
    font-size: 1em;
}

.calendar-page #tasksheader th {
    font-weight: bold;
    border-bottom: none;
}

/* plugin calendar (new) */

@media screen and (max-device-width: 1024px){
    body.calendarmain {
        overflow: hidden;
    }

    body.calendarmain #mainscreen {
         min-width: 0 !important;
        min-height: 520px !important;
    }

    body.calendarmain #header {
        min-width: 0 !important;
    }
}

html body.calendarmain div#mainscreen {
    min-width: 0 !important;
}

#calendarsidebartoggle {
    display: none;
}

#calendarsidebar {
    right: 10px;
    top: 20px;
    width: auto !important;
    visibility: hidden;
    overflow-y: auto;
}

#calendar {
    left: 0 !important;
    top: 20px;
}

#calendar #message {
    display: none !important;
}

.fc-header-right {
    display: none;
}

.fc-header-left {
    white-space: nowrap;
    width: 10%;
}

.fc-header-title h2 {
    font-size: 0.8em;
    text-align: left;
}

#calendar .fc-header {
    position: relative;
    top: -10px;
}

#calendar .fc-view {

}

#calendar .fc-view table {

}

#calendar .fc-button {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    height: auto !important;
    line-height: 2em !important;
}

.fc-button:before {
    display: block;
    text-align: center;
    padding-top: 0 !important;
}

.fc-button-inner { /* myroundcube calendar, kolab calendar doesn't have fc-button-inner */
    float: none;
    display: block;
}

#timezonedisplay {
    display: none;
}

/* plugin tasks */

.tasklistview #sidebar {
    width: 100% !important;
    top: 20px;
    visibility: hidden;
}

.tasklistview #mainview-right {
    left: 10px !important;
    right: 10px !important;
    top: 20px;
}

.tasklistview #quickaddform input {
    display: inline-block;
}

.tasklistview #mainview-right #quickaddinput {
    width: 80%;
    padding: 14px;
}

.tasklistview #mainview-right #quickaddbox input.button {
    width: 30px;
}

#taskselector {
    overflow-x: auto;
}

/* other plugins */

.myrc_sprites {
    background-image: none !important;
}

#keyboardInputMaster,
img.keyboardInputInitiator,
.updatepm.myrcmessage {
    display: none;
}

#ifplcontainer {
    color: #000;
}

#ifplcontainer label {
    color: #333;
}

#ifplcontainer p {
    padding-top: 5px;
    background: transparent;
}

#div.idle_timeout_box {
    left: 10px;
    right: 10px;
    width: auto;
    min-width: 0;
    background-image: none;
    margin: 0;
}

#fancybox-wrap {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    padding-left: 5px;
    padding-right: 5px;
}

#fancybox-content {
    width: auto !important;
}

#fancybox-close {
    right: 0;
    top: 0;
}

.fancybox-bg {
    display: none !important;
}

#helptoolbar {
    top: 0;
}

.readtext {
    width: auto !important;
}

.readtext pre {
    white-space: normal;
}

select.deco {
    background: #fff;
    color: #333;
    padding: 0;
    margin: 0;
    border: 1px solid #333;
    height: auto;
}

#header h5 select.deco {
    padding: 2px;
    margin: 0;
    border: none;
    height: auto;
    min-height: 0;
    display: inline-block !important;
}

#header h5 select.deco option {
    color: #333;
    background: #fff;
}

.remotehint {
    width: auto;
    left: 0;
    right: 0;
    padding: 2px;
    background: #fff;
    color: #333;
    border: none;
    text-align: center;
    margin: 0;
}

/* fix containers that must be moved when showing popup boxes but that don't have left set to 0 */

#filter_bar {
    left: 0;
    padding-left: 10px;
}

#messagetoolbar a.markasjunk2,
#messagetoolbar a.markasjunk2Sel,
#messagetoolbar a.markasnotjunk2,
#messagetoolbar a.markasnotjunk2Sel {
    background: transparent;
}

#messagelist td.subject:before {
    float:right;
    margin-top:8px;
    color:#aaa;
}

#messagelist tr.selected td.subject:before,
#messagelist tr.unfocused td.subject:before {
    color:#000;
}

.folderlist li.mailbox div.treetoggle {
    left:8px;
    top:2px;
    background-image:none!important;
}

#subscription-table li a,
#messagelist td span {
    background-image:none!important;
}

#full-headers .more-headers {
    background:none;
    top:-30px;
    font-size:1.6em;
    color:#666;
}

#attachment-list .delete,
#attachment-list .drop {
    background:none;
    text-indent:0;
    top:2px;
    width:auto;
    font-size:1.6em;
    color:#666;
}

#attachment-list .delete {
    padding-right:30px!important;
}

.attachmentslist li a {
    padding-right:55px;
}

.rcmaddcontact {
    font-size:1.4em;
}

.rcmaddcontact img {
    display:none;
}

#preferences-details fieldset.advanced .advanced-toggle {
    background:none;
    font-size:1.4em;
    text-indent:0;
    color: #333;
    height:auto;
    width:auto;
}

#messagestack div:after {
    background-image:none!important;
    padding-top:10px;
    padding-left:4px;
    font-size:1.2em;
    color:#fff!important;
}

#messagestack div.loading:after {
    background-image:none!important;
}

.boxpagenav a.icon,
#countcontrols a.button {
    background:#888;
    background-image:none!important;
    color:#fff;
    text-indent:0;
    font-size:1.2em;
    min-width:25px;
    height:auto;
    border:none;
    text-align:center;
}

.boxpagenav a.icon {
    text-indent:0;
    color:#fff;
}

.boxpagenav a.icon.disabled,
.pagenav a.button.disabled {
    background:#aaa!important;
}

.pagenav a.button span {
    display:none!important;
}

#messageheader .pagenav a.button {
    background:transparent!important;
    color:#666;
    font-size:1.6em;
    min-width:20px;
}

#messageheader .pagenav a.button.disabled {
    background:transparent!important;
    color:#aaa;
}

#calendarsidebar {
    top:10px;
}

#calendartoolbar {
    margin-top:5px;
}

.calendarmain .fc-state-default .fc-button-inner,
.calendarmain .fc-state-hover .fc-button-inner,
#helptoolbar a.button,
#calendartoolbar a.button,
#taskstoolbar a.button {
    background:none!important;
    height:auto!important;
    border:none;
}

#calendar .fc-button-inner:before,
#calendartoolbar a.button:before,
#helptoolbar a.button:before,
#taskstoolbar a.button:before {
    display:block;
    font-size:2.1em;
    padding-bottom:4px;
    text-align:center;
    height:auto;
}

#calendar .fc-button-inner,
#calendartoolbar a.button,
#taskstoolbar a.button {
    padding-top:0;
}

#helptoolbar a.button {
    padding-top:10px;
}

/* login page */
.login-page.xmobile {
    #login-form {
        width: 100% !important;
        margin: 0 !important;
        padding: 0;
        box-sizing: border-box;
        color: #333;

        #logo {
            display: block;
            box-sizing: border-box;
            max-width: 100%;
            margin: auto;
            padding: 10px;
        }

        h1 {
            display: none;
        }

        button {
            border: none;
        }

        #message {
            padding-left: 8px;
            padding-right: 8px;
        }

        #message div {
            display: block;
            border: none;
            overflow: hidden;
            background-image: none;
            padding-left: 8px;
            padding-right: 8px;
        }

        div.box-inner {
            width: 100%;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            border: none;
            box-shadow: none !important;
            background: transparent;
        }

        .box-bottom {
            background: none;
        }

        form {
            background: transparent;
            padding: 10px;
        }

        form table {
            width: 100%;
        }

        form > table:first-of-type > tbody > tr > td {
            display: block;
            text-align: left;
            width: 100%;
            padding: 10px 0 0 0;
            color: #333;
            white-space: normal !important; /* fix problems caused by the vkeyboard plugin */
        }

        input[type='text'],
        input[type='password'],
        td select {
            font-size: 1.2em;
            padding: 10px;
            margin: 0;
            width: 100%;
            border: 1px solid #ccc;
        }

        input.button,
        input.button:active {
            border: none;
            background: #aaa;
            color: #fff;
        }

        p {
            width: 100%;
            padding: 0;
        }

        .formbuttons {
            margin: 20px 0 !important;
            padding: 0 !important;
        }

        #bottomline {
            position: static;
            text-align: center;
            margin-top: 0;
            background: transparent;
            font-size: 1em;

            &, a {
                color: #333;
            }
        }

        #rcmloginsubmit {
            font-size: 1.2em;
            padding: 10px;
            width: 100%;
            margin: 0 0 20px 0;
        }

        #login-title {
            margin-top: 20px;
        }
    }

    #vendor-branding {
        display: none;
    }
}

/* plugin xemail_schedule */

a.button.scheduled {
    background-image: none !important;
}

/* plugin: xquote */

#sidebar-xquote .box-content {
    padding: 8px;
}

div[aria-describedby=scheduled-message-dialog] {
    div.ui-dialog-titlebar {
        display: block !important;
    }
}

#scheduled-table {
    table, tr, td {
        display: block;
    }

    th, .from {
        display: none;
    }

    .buttons button {
       color: #fff;
    }


    .subject {
        font-weight: bold;
    }
}

/* plugin: enigma */

#keystoolbar {
    display: none;
}

/* plugin: thunderbird_labels */

#tb_label_popuplink  {
    &.disabled {
        color: #999;
    }

}

/* plugin: ident_switch */

#plugin-ident_switch-account {
    margin: 4px;
}