/*app
#app {
    max-width: 100%;
}*/

#app {
    margin-right: initial!important;
}

/*dark skin*/
#app.dark , #app.dark #main-wrapper, #app.dark #navi  {
    background-color: dimgrey;
}

#app.dark .top_title {
    color: white;
}

#app.dark .ui.inverted.segment, .ui.inverted.menu, .ui.inverted.segments .segment, .ui.primary.inverted.segment {
    background: #2b2b2b!important;
}
#app.dark .developed_by {
	filter: brightness(1);
}


.trash.alternate.icon {
    /*position: absolute;*/
    right: 1vh;
    cursor: pointer;
    opacity: .7 !important;
    text-decoration: none;
}

.stats_refresh:hover, .trash.alternate.icon:hover {
    opacity: 1!important;
}
/**disabled style override*/
.disabled {
    opacity: 0.7!important;
    pointer-events: none!important;
}
/*.ui.inverted.table {
    background: #2b2b2b !important;
}*/
.stats_refresh {
    transition: all 0.15s ease-in-out;
    opacity: .7!important;
    position: absolute;
    /*right: 3vh;*/
    right: 5px;
    text-align: right!important;
    cursor: pointer;
    font-size: x-large!important;
    background: radial-gradient(circle, rgba(255,255,255,1) 50%, rgba(0,0,0,0) 100%);;
}

@media only screen and (max-width: 388px) {
    .stats_refresh {
        opacity: 1!important;
    }
}

#app.dark .stats_refresh {
    background: radial-gradient(circle, rgba(43,43,43,1) 50%, rgba(0,0,0,0) 100%);
}
.title_refresh {
    display: flex;

}
.developed_by {
	display: inline;
    height: 55px;
	opacity: .7;
    filter: brightness(0);
    /*position: absolute;
    right: 0px;
    top: 5px;
    margin-right: 10px;*/
}
.blinking {
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

#charts-wrapper div.ui.looping   {
    cursor: pointer;
    width: fit-content;
}

#charts-wrapper h3.top {
    display: inline-flex;
}
.tiny.red.link.asterisk.blinking.icon {
    position: absolute;
}

.hide_settings_tips_container {
    align-items: center!important;
    justify-content: flex-end!important;
}

@media only screen and (min-width: 768px) {
    #overall_pie_title {
        max-width: 13vw;
    }
}

/*prevent long press text selection*/
#filtered_top_recipients, #filtered_top_senders,#charts-wrapper span {
     -webkit-touch-callout: none;
        -webkit-user-select: none;    
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none; 
}
/*fix of refresh button blocks span*/
@media only screen and (max-width: 445px) {
    #filtered_top_recipients, #filtered_top_senders,#charts-wrapper span {
        max-width: 80%;
        white-space: break-spaces;
        display: inline-block;
    }
}

@media only screen and (max-width: 869px) and (min-width: 768px) {
    /*hide exit and stats text at main menu if narrow width*/
    #emails_list > div.ui.menu > div.right.menu > a:nth-child(4) > span, #emails_list > div.ui.menu > div.right.menu > a:nth-child(3) > span {
        display: none;
    }
}
/*fix of hidden data tooltip appearance*/
[data-tooltip]::after {
    white-space: break-spaces!important;
    z-index: 2!important;
}
[data-tooltip]::before {
    z-index: 2!important;
}
/*.hidable.hide {
    display:none!important;
}*/
/*#app.dark #emails_list > div.top_title > div.logo > div.field.wrapper, #app.dark div.logo.login {
    filter: invert(1);
}*/

#app.dark .top_title {
    text-shadow: 3px 1px 3px black;
}

#app.dark i.close.icon::before {
    color: white!important;
}

#app.dark .ui.toggle.checkbox input:focus:checked~label {
    color:inherit;
}

#app.dark .ui.toggle.checkbox label::before {
    background: black;
}

#app.dark .ui.toggle.checkbox input:checked~label::before {
    background: #2185d0;
}

#app.dark select, #app.dark input {
    background-color: #696969;
    color: white;
}

/*#app.dark #emails-list > thead {
    background: inherit!important;
}*/

#app.dark .hide-sticky-header-button {
    /*background-color: #1b1c1d;*/
    background-color: inherit!important;
}

#app.dark .filter_linked span/*:not(.multiple)*/{
    background: linear-gradient(0deg, white, white) no-repeat left bottom / 6px var(--bg-h);
}

#app.dark .filter_linked span/*:not(.multiple)*/:where(:hover, :focus-visible) {
    background-size: 100% var(--bg-h);
}

/* fix of calendar arrow*/
.ui.bottom.left.popup::before {
    z-index: -1;
}

/* for tips details tag */
details {
    display: inline!important;
    text-indent: 5px;
}

details[open] {
    display: contents!important;
}

details[open] > summary {
    display: none!important;
}

summary {
    cursor: pointer;
}

/* autorefresh rotation icon */
.rotate{
  animation: rotate 1s linear; 
}
@keyframes rotate{
  to{ transform: rotate(360deg); }
}

/*menu styling*/
.ui.vertical.menu .menu .item {
    padding: 1em!important;
    font-size: inherit!important;
    color: inherit!important;
}

@media only screen and (max-width: 767px) {
    .ui.vertical.menu .menu .item {
        display: flex;
        flex-direction: column;
    }
    .ui.vertical.menu .menu .item span {
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 4em
    }
}

.ui.vertical.inverted.menu .menu .item, .ui.vertical.inverted.menu .menu .item a:not(.ui) {
    color: white!important;
}

.ui.vertical.menu a{
    text-align: left!important;
}

.ui.vertical.menu i{
    float:left!important;
}

/*.togglesettips {
    min-height: 40px;
    background: rgb(0 0 0 / 2%)!important;
}


#app.dark .togglesettips {
    background: rgb(255 255 255 / 7%)!important;
}*/

.ui.vertical.menu {
    width:100%!important;
}

/*logo*/
#main-wrapper {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.logo img {
    width: 100px;
    height: 60px;
}
.api_error_container {
    width: 100%;
    overflow: auto;
}

.logo {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
}

@media only screen and (min-width: 811px) {
    .logout {
        margin-top: 1em;
        /*margin-bottom: 1em;*/
    }
}

#login > div.logo.login {
    width: 100%;
    justify-content: center;
}
#login {
    margin-top: 5vh;
}
.logo img {
    box-shadow: 3px 3px 3px 0 rgba(34,36,38,.15);
    /*background: white;*/
}
.title {
    text-overflow: ellipsis;
    /*white-space: nowrap;*/
    overflow: hidden;
}
.title h1 {
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 20px;
    margin-right: 20px;

}
#main-wrapper > h1 {
    text-align: center;
}
.top_title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2em;
}
@media only screen and (min-width: 811px) and (max-width: 1069px) {
    .top_title {
        margin-bottom: 2em;
    }
}

/* logout section*/
.logout button {
    max-width: 100px;
}

#user-settings .checkbox {
    margin-right: 15px;
    margin-top: 1em;
}

/* on top from bottom offset */
#back-to-top {
    bottom: 150px!important;
    right: 50px!important;
}

/*to mark mouse over table row*/
.emails-list tr:hover td{
    background-color: rgb(255 255 255 / 30%);
}

/*for all tables*/
/*.emails-list td:not(:last-child), .emails-list th {*/
#emails-list > tbody > tr > td, #emails-list > thead > tr > th {
/*.emails-list td, .emails-list th {*/
    /*text-align: center!important;*/
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 0.78em!important;
    padding-right: 0.78em!important;
}

/*for resizable tables

.emails-list:is(.resizable) td, .emails-list:is(.resizable) th {
  white-space: nowrap;
}*/

/* for non-resizable tables*/
.emails-list:not(.resizable) td:hover, .emails-list:not(.resizable) th:hover  {
    overflow: auto;
    white-space: initial!important;
    text-overflow: initial;
}
.emails-list:not(.resizable) {
  table-layout: fixed;
}

.emails-list:not(.resizable) #timestamp, .emails-list:not(.resizable) #queue_id, .emails-list:not(.resizable) #first_attempt, .emails-list:not(.resizable) #last_attempt {
    width: 8%;
}
.emails-list:not(.resizable) #status, .emails-list:not(.resizable) #size {
    width: 9%;
}
.emails-list:not(.resizable) #subject {
    width: 25%;
}


#auth-list #index {
    transform: scale(1);
    width: 7%;
}

#acc_list {
    transition: transform 0.3s ease;
}
@media (max-width: 450px) {
  #acc_list {
    transform: scale(0.8);
    transform-origin: top center;
  }
}

.ui.form {
    max-width: initial!important;
}

.ui.button>.icon {
    margin:0!important;
}

#login-form-wrapper > form > div > div {
    max-width: 50%;
}

/* sort stylings*/

.emails-list th:not(#refresh-button), .emails-list td {
    transition: none!important;
    cursor: pointer!important;
}

/*.emails-list th.asc {
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7)!important;
    background-position: center right!important;
    background-repeat: no-repeat!important;

}

.emails-list th.desc {
    background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7)!important;
    background-position: center right!important;
    background-repeat: no-repeat!important;
}*/

.emails-list th.desc::after {
    font-family: icons;
    content: "\f078";
    margin-left: 7px
    /*display: flex;
    justify-content: center;*/
}

.emails-list th.asc::after {
    font-family: icons;
    content: "\f077";
    margin-left: 7px
    /*display: flex;
    justify-content: center;*/
}

/*.sorted_column {
    background-color: #e1dcdc!important;
}*/
/*for sticky pager*/
#navi {
    z-index: 5;
    position: sticky;
    bottom: 0;
    width: 100%;
    opacity:1;
    background: white;
    justify-content: center;
    flex-wrap: wrap;
}

/*change notification z-index and fix of notie blurring when modal blur is on in firefox*/
.notie-alert {
    z-index: 1002!important;
    filter: initial!important;
}

/*fix sematicui paddings
.ui.fluid.container:has(.login) {
    height: 70%!important;
}*/

.ui.fluid.container {
        margin-top:1em;
        width: 100%!important;
        height: initial;

}

@media only screen and (min-width: 1400px) {
    .ui.fluid.container {
        padding-left: 12em;
        padding-right: 12em;
    }
}
@media only screen and (max-width: 1400px) {
    .ui.fluid.container {
        padding-left: 1em;
        padding-right: 1em;
    }
    
    
}

@media only screen and (max-width: 810px) {
    .hide_settings_tips_container {
        margin: auto!important;
        flex-direction: column!important;
        margin-top: 1em;
    }
    .hide_settings_tips {
        margin-bottom: 20px;
    }
}

/*fix semanticui dropdown style*/
.ui.selection.dropdown {
    padding:initial!important;
}

#user-settings, #tips {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    justify-content: flex-end;
}
/*to fill empty space vertically in #user-settings and #tips*/
.ui.segment:last-child {
    flex: 1;
}

#by, #equal {
    display: flex;
    align-items: center;
    justify-content: center;
    width: initial;
    margin-bottom: initial;
}

 #equal {
    opacity: .7;
    transition: all 0.15s ease-in-out;
    cursor: pointer;
 }

 #equal:hover {
    opacity: 1;

 }

@media only screen and (max-width: 767px){
    #user-settings, #tips {
        padding-left: 0;
        padding-right: 0;
        }

    /* sticky header button styling */
    .hide-sticky-header-button {
        width: 100%;
        text-align: center;
        /*position: sticky;*/
        top: 0px;
        opacity: .85;
        padding: 10px;
        background-color: #fff;
        transition: opacity 0.5s ease-out;
        z-index: 4;
        cursor: pointer;
    }

    #by, #equal {
        width: 100%;
        margin-bottom: 15px;
    }
}

#emails_list {
    width: 100%;
}

@media only screen and (min-width: 768px) and (max-width: 963px) {
    #filters-wrapper > div.five.wide.column {
        width: 55%!important;
    }
    #filters-wrapper > div.four.wide.column {
        width: 100%!important;
    }
}

@media only screen and (min-width: 767px) and (max-width: 1000px){
    #refresh-button button span, #user-settings > div.logo  button span{
        display:none!important
    }
}

@media only screen and (max-width: 500px) {
    .title {
        max-width: 40%;
    }
}

@media only screen and (max-width: 375px) {
    .title {
        display: none;
    }
}

.ui.grid+.grid {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/*all buttons except ui.buttons div*/
button:not(.navi), #footer {
    width:100%;
	display: flex;
	justify-content: space-between;
}
/* fix of calendar z-index over modals*/
.ui.popup {
    z-index:6!important;
}
/* calendar  ellipsis hidden inputs*/
#rangestart input, #rangeend input {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* fix of modal long strings*/
/*#email-metadata {
    table-layout: fixed
}*/

/*fix of modal height*/
.ui.modal>.scrolling.content {
    max-height: calc(85vh)!important;
}

/* fix of popups over modal */
.ui.top.center.popup {
    z-index: 99999!important;
}

/*fix of modal email details scroll right move*/
#app > div.ui.dimmer.modals.page.transition.visible.active {
    overflow-x: hidden;
}

#email-metadata td {     
    /*white-space: break-spaces;*/
    overflow: hidden;
    text-overflow: ellipsis; 
    max-width: 87vw;
}
/*
#email-metadata td:hover {
    overflow: auto;
    text-overflow: initial; 
}
*/
#mail-modal > div.content > ul {
    overflow: auto;
}

@media only screen and (max-width: 767px) {
    .filter_linked span {
        display: flex;
        flex-direction: column;
        max-width: fit-content;
    }
    /*.filter_linked span span {
        padding-bottom: 3px;
        --bg-h: 1px;
        background: linear-gradient(0deg, black, black) no-repeat left bottom / 6px var(--bg-h);
        transition: background-size .2s;
    }
    .filter_linked span span:where(:hover, :focus-visible) {
        background-size: 100% var(--bg-h);
        background-position-x: left;
    }*/



}

.filter_linked span/*:not(.multiple)*/{
  padding-bottom: 3px;
  --bg-h: 1px;
    background: linear-gradient(0deg, black, black) no-repeat left bottom / 6px var(--bg-h);
  transition: background-size .2s;
}

.filter_linked span/*:not(.multiple)*/:where(:hover, :focus-visible) {
    background-size: 100% var(--bg-h);
    background-position-x: left;
}
/*multiple mail_to table list styling
.filter_linked span.multiple {
    display: flex;
    max-width: fit-content;
}*/
.multiple_with_aliases {
    display: inline-flex;
    flex-wrap: wrap;
}

.multiple_with_aliases span{
    margin-right: 5px;
}
#emails-list td.filter_linked.multiple_with_aliases {
    display: flex !important;
    align-items: baseline;
    flex-direction: column;
    flex-wrap: nowrap;
}

#mail_to_details {
    display: flex!important;
    flex-direction: column;
    max-width: 100%!important;
    /*to create proper vertical column of recipients*/
    flex-wrap: nowrap;
}

/*@media only screen and (max-width: 767px)
    td.mail_to {
        border-top: 1px rgba(0, 0, 0, .1) solid !important;
        border-bottom: 1px rgba(0, 0, 0, .1) solid !important;
    }
}*/

td.multiple_mailtos, #mail_to_details {
    max-height: 30vh;
    display: block;
    /*display: list-item;*/
    overflow-y: auto!important;

}

#emails-list td.multiple_with_aliases.multiple_mailtos {
    border-top: 1px rgba(0, 0, 0, .1) solid !important;
    border-bottom: 1px rgba(0, 0, 0, .1) solid !important;
}

#emails-list:not(.JPadding) td.subject {
    white-space: nowrap;
    overflow-y: auto !important;
}

/*div.multiple_with_aliases, td.mail_to > span.multiple {
    margin-left: 2em;
    counter-increment: div;
    display: list-item;
}

div.multiple_with_aliases::marker, td.mail_to > span.multiple::marker {
    display: list-item!important;
    content: counter(div) ". ";
}*/

.filter_linked span.multiple span, .ui.top:not(.calendar) span/*, .filter_linked span.multiple*/ {
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    max-width: fit-content;
}



/*.filter_linked span:hover {
    cursor: pointer;
    background-color: #ffffff9e;
    transition: all .15s ease-in;
    border-radius: 5px;
    padding: 10px;
}*/

/* modal arrows*/
.next_email, .prev_email {
    display: flex;
    position: absolute;
    height: 100%;
    color: white;
    width: 100px;
    justify-content: space-evenly;
    align-items: flex-start;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    outline: none;
}

.next_email:hover, .next_email:focus {
    transition: all 0.15s ease-in-out;
    background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.4) 100%);
}
.prev_email:hover, .prev_email:focus {
    transition: all 0.15s ease-in-out;
    background: linear-gradient(90deg, rgba(0,0,0,.4) 40%, rgba(0,0,0,0) 100%);
}

.next_email {
    right: -100px;
}
.prev_email {
    left: -100px;
}

@media only screen and (min-width: 1000px){
    .next_email:hover, .next_email:focus {
        transition: all 0.15s ease-in-out;
        background: linear-gradient(90deg, rgba(0,0,0,.4) 40%, rgba(0,0,0,0) 100%);
    }
    .prev_email:hover, .prev_email:focus {
        transition: all 0.15s ease-in-out;
        background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.4) 100%);
    }
}

@media only screen and (max-width: 1000px){
    .next_email {
        right: 0;
        width: 70px;
    }
    .prev_email {
        left: 0;
        width: 70px;
    }
    .next_email i, .prev_email i { 
        filter: invert(1);
    }
    #app.dark .next_email i, #app.dark .prev_email i {
        filter: invert(0);
    }
}

.next_email i, .prev_email i {
    font-size: 2em!important;
    opacity: .5!important;
    position: sticky;
    top:50%;
    background: radial-gradient(circle, rgb(0 0 0) 0%, rgb(255 255 255 / 0%) 80%);
}

.next_email:hover i, .next_email:focus i, .prev_email:hover i, .prev_email:focus i {
    opacity: 1!important;
}

div.disabled.prev_email, div.disabled.next_email {
    pointer-events: none;
    opacity: 0.4;
    background-color: rgba(0,0,0, 0);
    /*display: none;*/
}
div.disabled.prev_email i, div.disabled.next_email i {
    opacity: 0!important;
}

input.disabled {
    pointer-events: none;
}

/*.inner_arrow {
	position: sticky;
    bottom: 50%;
}*/

/* modal close button fix*/
.ui.modal > i.close.icon {
    top: -2.5rem !important;
    right: -2.5rem !important;
}

i:not(.link).close.icon::before {
    cursor: pointer;
    position: absolute;
    font-size: 25px;
    color: black;
    left: -30px;
    top: 45px;
    text-shadow: none;
    z-index: 1002;
}

i.close.icon {
    cursor: pointer;
}

i.close.large.icon.link {
    /*position: absolute;
    right:0;
    top:1vh;*/
    width: 100%;
    display: inline-flex;
    justify-content: flex-end;
    padding: 5px;
}

/* remove left and right paddings on range sliders*/
.range {
    padding-left:0!important;
    padding-right:0!important;
}

/* charts ui loader*/
#charts-wrapper .ui.loader {
    margin-top: 10vh;
    position: relative;
    z-index: 1;
}
/*charts for mobile view*/
@media only screen and (max-width: 767px){
    canvas {
        min-height: 40vh;
    }
}

/*canvas context menu style*/
#app.dark .contextMenu {
    /*border:1px solid #dedede;*/
    border: 1px solid rgb(255 255 255 / 22%)!important;
    /*background-color:rgba(0,0,0,.9);*/
}

#app.dark .contextMenu hr {
    border: 1px solid rgb(255 255 255 / 22%);
}

.contextMenu hr {
    width:100%;
}

div.ui.menu.item.contextMenu.animate {
  visibility: visible!important;
  opacity: 1!important; 
}

.contextMenu{
    transition: opacity 0.15s ease-in-out;
    display: flex;
    justify-content: flex-start!important;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    border:1px solid black;
    opacity: 0;
    visibility: hidden;
    /*background:white;*/
    list-style:none;
    border-radius: 0 6px 6px;
    padding: 0 2px;
    /*width: fit-content;*/
    z-index:5;
    max-width: fit-content;
    max-height: 30vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.menu-item {
    font-size: 14px;
    line-height: 24px;
    font-family: sans-serif;
    padding: 4px 10px;
    max-width: 200px;
    text-align: left;
    /*overflow: hidden;*/
    text-overflow: ellipsis;
}

.menu-item:hover {
  /*background: #dddddd;*/
  text-decoration: underline;
  cursor: pointer;
}

.menu-item-nonhover {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.menu-item-nonhover > u {
    padding: 4px 10px;
}

#user-settings-wrapper {
    border:none;
    margin-top:0;
}

.ui.vertical.inverted.menu a.item {
    border: 1px solid rgb(255 255 255 / 15%)
}
.ui.vertical.menu a.item {
    border: 1px solid rgb(0 0 0 / 15%)
}

/*fix of dark theme sub icon tools*/
#user-settings-wrapper .bottom.right.corner.tools.icon {
    color: initial;

}
#app.dark #mail-modal .bottom.left.corner.icon {
    color: initial;
    left: -6px;
    bottom: -9px;
}
#mail-modal .bottom.left.corner.icon {
    left: -6px;
    bottom: -9px;
}

#user-settings-wrapper div.ui.toggle.checkbox {
    margin-right: 2em;
}