/*
 * MikoPBX - free phone system for small business
 * Copyright © 2017-2023 Alexey Portnov and Nikolay Beketov
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License along with this program.
 * If not, see <https://www.gnu.org/licenses/>.
 */

div.pusher {
    padding-top: 40px
}

body > .grid {
    height: 100%;
}

body {
    background: #f1f4f5;
}

/* Search field */
#top-menu-search {
    min-width: 500px;
    padding-top: 0;
    padding-bottom: 0;
}

.prevent-word-wrap {
    white-space: nowrap;
}
.ui.placeholder.segment .button.prevent-word-wrap{
    max-width: 25rem;
}

/* Sidebar menu button */
#sidebar-menu-button {
    display: none;
}

.sidebar-menu {
    padding-bottom: 50px;
}

.pusher {
    display: block;
    min-height: 0;
    flex-direction: initial;
}
.pusher > .full.height {
    display: block;
    flex: none !important;
}


/*******************************
         Sidebar Layout
*******************************/

#example > .pusher > .full.height {
    display: flex;
    flex-direction: row;
}
#example:not(.site) > .pusher > .full.height {
    background-color: #FFFFFF;
}

/* page layout */
.full.height > .toc {
    position: fixed;
    z-index: 1;
    background-color: #1b1c1d;
    width: 260px;
    flex: 0 0 auto;
    height: 100vh;
}
.full.height > .toc .ui.menu {
    border-radius: 0;
    border-width: 0 1px 0 0;
    box-shadow: none;
    margin: 0;
    width: inherit;
    will-change: transform;
    max-height: 100vh;
    overflow: auto;
}
.article {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 280px;
    margin-right: 10px;
    padding-top: 1px;
}

.full.height > .toc .ui.menu::-webkit-scrollbar {
    -webkit-appearance: none;
}
.full.height > .toc .ui.menu::-webkit-scrollbar-track {
    background-color: rgba(255, 255, 255, 0);
}
.full.height > .toc .ui.menu::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0);
}
.full.height > .toc .ui.menu:hover::-webkit-scrollbar-track {
    background-color: rgba(255, 255, 255, 0.1);
}
.full.height > .toc .ui.menu:hover::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.25);
}

.pusher > .footer,
.article > .footer {
    border-top: 1px solid #DDDDDD;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.08) inset;
    background-color: #FAFAFA;
    padding-top: 2em;
}

/* Drag and prop tables point view BEGIN */
.dragHandle {
    cursor: move;
}

.hoveringRow td {
    -moz-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.8);
    -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.8);
}

.hoveringRow td:first-child {
    -moz-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.8);
    -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.8);
}

.hoveringRow td:last-child {
    -moz-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.8);
    -webkit-box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.8);
}

.hoveringRow td:after {
    content: "";
    width: 3px;
    height: 100%;
    background-color: #F5F8FB;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

/* Drag and prop tables point view END*/

/* Users avatars */
td.disabled img {
    filter: opacity(50%);
}

/* Code editor */
.application-code {
    position: relative;
    width: 100%;
    min-height: 600px;
}

/* Add gap from the bottom line */
#content-frame {
    padding-bottom: 25px;
}

/* Sort icons on tables */
th.sorting_asc:after {
    display: inline-block;
    opacity: 1;
    margin: 0 .25rem 0 0;
    width: 1.18em;
    height: 1em;
    font-family: Icons;
    font-style: normal;
    font-weight: 400;
    text-decoration: inherit;
    text-align: center;
    speak: none;
    font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    content: "\f0d8";
}

th.sorting_desc:after {
    display: inline-block;
    opacity: 1;
    margin: 0 .25rem 0 0;
    width: 1.18em;
    height: 1em;
    font-family: Icons;
    font-style: normal;
    font-weight: 400;
    text-decoration: inherit;
    text-align: center;
    speak: none;
    font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    content: '\f0d7';
}

th.sorting:after {
    display: inline-block;
    opacity: 1;
    margin: 0 .25rem 0 0;
    width: 1.18em;
    height: 1em;
    font-family: Icons;
    font-style: normal;
    font-weight: 400;
    text-decoration: inherit;
    text-align: center;
    speak: none;
    font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    content: '\f0dc';
}

tr {
    cursor: pointer;
}

/* Audio player section */
#audio-player-segment {
    display: none;
}

#audio-player-segment div.fields {
    margin: 0;
}

/* License information */
span.features {
    color: grey;
    font-size: x-small
}

/* Password weakens progress bar */
.password-score-section, .ssh-password-score-section {
    display: none;
}

/* Sidebar with debug info */
#debug-info {
    background: #fff;
}

/* Main logo on the sidebar */
.item.logo {
    padding: 7px 10px 7px 50px !important;
}

.item.logo img {
    margin-right: 50px;
!important;
}

/* Main logo on the auth page */
#login-logo {
    width: 10em;
}

/* User forwarding dropdown field */
.ui.form .inline.field > .selection.dropdown.forwarding-select,
.ui.form .inline.fields .field > .selection.dropdown.forwarding-select,
.ui.form .fields .field > .selection.dropdown.forwarding-select,
.ui.form .field > .selection.dropdown.forwarding-select {
    min-width: 400px;
    max-width: 500px;
}

/* PBX Version */
div#pbx-version {
    position: fixed;
    right: 4px;
    bottom: 1px;
    font-size: 12px;
    z-index: -1;
    color: grey;
}

/* Extend dropdown length */
@media only screen and (min-width: 992px) {
    .ui.search.dropdown .menu {
        max-height: 30rem;
    }
}

/* Table CDR */
#cdr-table {
    font-size: 12px;
}

/* CDR player */
.cdr-player .ui.range {
    height: 15px;
}

.cdr-player .ui.range .inner {
    margin: 2px 0px 0px 0px;
    height: 11px;
}

.cdr-player .ui.range .inner .thumb {
    height: 14px;
    width: 14px;
}

.cdr-player .ui.range .inner .track-fill,
.cdr-player .ui.range .inner .track {
    top: 5px;
}

.ui.very.basic.cdr-player tr td {
    border-top: none;
}

.ui.very.basic.cdr-player tr.cdr-label {
    color: grey;
    font-size: 0.65rem;
    position: absolute;
    margin-top: -13px;
    margin-left: 27px;
}

.ui.very.basic.cdr-player tr.cdr-label i.icons .top.right.corner.icon {
    font-size: 5px;
}

/* Fix size bugs */
.ui.large.form .field .dropdown,
.ui.large.form .field input,
.ui.large.form .inline.fields .field input {
    font-size: 1.12rem;
}

.ui.large.form .field .ui.selection.dropdown > .delete.icon,
.ui.large.form .field .ui.selection.dropdown > .dropdown.icon,
.ui.large.form .field .ui.selection.dropdown > .search.icon {
    top: .68571429em;
}

.ui.large.form .ui.icon.button,
.ui.large.form .ui.buttons .button,
.ui.large.form .ui.buttons {
    font-size: 1.2rem;
}

/* Staff extension status width */
td.extension-status {
    min-width: 21px;
}

/* Angled headers on Firewall page */
th.firewall-category {
    height: 140px;
    white-space: nowrap;
}

th.firewall-category > div {
    transform: /* Magic Numbers */ translate(16px, 59px) /* 45 is really 360 - 45 */ rotate(315deg);
    width: 20px;
}

th.firewall-category > div > span {
    border-bottom: 1px solid #ccc;
    padding: 5px 1px;
    font-size: 0.9rem;
    display: inline-block;
    min-width: 65px;
}

#firewall-table tbody > tr {
    background: white;
}

#firewall-table tbody > tr > td {
    padding: 0.5em 0.5em;
}

#firewall-table tbody > tr > td.marks {
    border-right: 1px solid rgba(34, 36, 38, .15);
}

#firewall-table tbody > tr > td:first-child {
    border-right: 1px solid rgba(34, 36, 38, .15);
    border-left: 1px solid rgba(34, 36, 38, .15);
}

#firewall-table tbody > tr > td:last-child {
    border-right: 1px solid rgba(34, 36, 38, .15);
}

#firewall-table tbody > tr:last-child > td {
    border-bottom: 1px solid rgba(34, 36, 38, .15);
}

/**
Sound player slider
 */
#play-slider {
    margin-top: 10px;
}

/**
Log file content
 */
#log-content-readonly {
    min-height: 480px;
}

/**
Delete button on little extensions table
 */
#extensionsTable .button.delete-row-button,
#additional-hosts-table .button.delete-row-button {
    font-size: 0.8rem;
}


/**
Blur passwords, secrets
 */
.confidential-field:not(:focus):not(:hover) {
    color: transparent !important;
    text-shadow: 0 0 6px rgba(0,0,0,0.7);
}

/**
Sets minimum width for advice bell on main menu header
 */
#show-advice-button {
    min-width: 50px;
}


/**
Sets padding to correct show slider labels inside segment block
 */
#pbx-records-term-slider {
    padding-left: 35px;
    padding-right: 35px;
    margin-top: 5px;
}

/*
Limit fields width
 */
.field.max-width-100{
    max-width: 100px;
}
.field.max-width-200{
    max-width: 200px;
}
.field.max-width-250{
    max-width: 250px;
}
.field.max-width-300{
    max-width: 300px;
}
.field.max-width-400{
    max-width: 400px;
}
.field.max-width-500{
    max-width: 500px;
}
.field.max-width-800{
    max-width: 800px;
}


/* Remove Fixed Sidebar /  Show Top Bar */
@media only screen and (max-width: 1144px) {

    /* Hide Fixed Sidebar */
    .full.height > .toc {
        display: none;
    }

    .full.height > .article {
        margin-left: 0px;
    }

    /* Less Left Padding */
    .main.container,
    .fixed.menu > .container {
        margin-left: 2em !important;
    }


    /* 100% Menu Width */
    .fixed.menu > .container {
        margin-left: 0em !important;
        margin-right: 0em !important;
        width: 100% !important;
        max-width: none !important;
    }

    #top-left-logo {
        display: none;
    }

    #sidebar-menu-button {
        display: block;
    }

}

@media only screen and (min-width: 1000px) and (max-width: 1220px) {
    #top-menu-search {
        min-width: 350px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1000px) {
    #top-menu-search {
        min-width: 400px;
    }
    .hide-on-mobile {
        display: none;
    }

    .ui.inverted.menu .item.hide-on-tablet{
        display: none;
    }

}


@media only screen and (max-width: 768px) {
    #top-left-logo {
        display: none;
    }
    #sidebar-menu-button {
        display: block;
    }
    #top-menu-search {
        min-width: 300px;
    }
    .hide-on-mobile {
        display: none;
    }
    .ui.inverted.menu .item.hide-on-tablet{
        display: none;
    }
}

/**
Plugins extensions settings button
 */
a.ui.button.pbx-extensions-settings {
    margin-top: -7px;
}