/* Common */
/*
 * Common Styles
 */

/* BS vars */
:root {
    --bs-body-line-height: 1.7;
    --bs-body-color: #343F52;
}

body {
    font-family: Figtree,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";
}

/* Disable collapse animation */
.collapsing {
    transition: none;
}

.profile-avatar {
    display: inline-block; 
    vertical-align: middle;
    width: 35px;
    height: 35px;
    overflow: hidden;
    border-radius: 50%;

    img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
}

/*
 * CSS Variables
 */
:root {
    --font-size-base:                14px;
    --line-height-base:              1.428571429;
    --line-height-computed:          20px;
    --border-radius-base:            6px;

    --gray-base:                     #000;
    --gray-darker:                   #222;
    --gray-dark:                     #333;
    --gray:                          #555;
    --gray-light:                    #777;
    --gray-lighter:                  #eee;

    --state-success-text:            #3c763d;
    --state-success-bg:              #dff0d8;
    --state-success-border:          #d6e9c6;

    --state-info-text:               #31708f;
    --state-info-bg:                 #d9edf7;
    --state-info-border:             #bce8f1;

    --state-warning-text:            #8a6d3b;
    --state-warning-bg:              #fcf8e3;
    --state-warning-border:          #faebcc;

    --state-danger-text:             #a94442;
    --state-danger-bg:               #f2dede;
    --state-danger-border:           #ebccd1;

    --callout-padding:               20px;
    --callout-border-radius:         var(--border-radius-base);
    --callout-border:                var(--gray-lighter);

    --callout-info-bg:               #f4f8fa;
    --callout-info-text:             var(--state-info-text);
    --callout-info-border:           var(--state-info-border);

    --callout-warning-bg:            #faf8f0;
    --callout-warning-text:          var(--state-warning-text);
    --callout-warning-border:        var(--state-warning-border);

    --callout-danger-bg:             #fdf7f7;
    --callout-danger-text:           var(--state-danger-text);
    --callout-danger-border:         var(--state-danger-border);

    --callout-success-bg:            #f9fdf7;
    --callout-success-text:          var(--state-success-text);
    --callout-success-border:        var(--state-success-border);
}


/* Layouts */
/*
 * Default Layout (All pages)
 */

/* Used by the fixed navigation */
body {
    padding-top: 0px;
}

header#layout-header {
    .navbar-brand {
        padding-left: 50px;
        background-image: url('../themes/etp/assets/images/logo.png');
        background-size: auto 80%;
        background-repeat: no-repeat;
        background-position: 7px 50%;
    }
}

.jumbotron {
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
}


/* Pages */
.page-account {
    .form-login {
        padding: 1rem;
        max-width: 400px;
    }

    .section-title {
        padding-bottom: 0.5rem;
        margin-bottom: 0.5rem;
        > h5 {
            margin-bottom: 0;
            margin-top: 0.25rem;
        }
    }

    .section-actions {
        padding-top: 0.5rem;
    }

    .account-editor {
        .editor-edit {
            padding-top: 0.25rem;
        }
    }

    .account-devices {
        .device-item {
            font-size: .875rem;
            padding: 0.5rem 0;

            .device-agent-icon {
                width: 2rem;
                height: 2rem;
                > i {
                    position: relative;
                    font-size: 2rem;
                    top: -0.5rem;
                }
            }

            &:last-child {
                padding-bottom: 0;
            }
        }
    }
}


/* Controls */
/*
 * Callouts
 */

.callout {
    margin-bottom: var(--line-height-computed);
    padding: var(--callout-padding);
    border-left: 3px solid var(--callout-border);

    h4 {
        margin-top: 0;
        margin-bottom: 5px;
    }
    p:last-child {
        margin-bottom: 0;
    }
}

.callout-danger {
    background-color: var(--callout-danger-bg);
    border-color: var(--callout-danger-border);
    h4 {
        color: var(--callout-danger-text);
    }
}

.callout-warning {
    background-color: var(--callout-warning-bg);
    border-color: var(--callout-warning-border);
    h4 {
        color: var(--callout-warning-text);
    }
}

.callout-info {
    background-color: var(--callout-info-bg);
    border-color: var(--callout-info-border);
    h4 {
        color: var(--callout-info-text);
    }
}

.callout-success {
    background-color: var(--callout-success-bg);
    border-color: var(--callout-success-border);
    h4 {
        color: var(--callout-success-text);
    }
}

body .control-user-notifications .notifications-popover {
    position: fixed;
    right: 1rem;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 0.25rem;
}

@media only screen and (max-width: 600px) {
    body .control-user-notifications .notifications-popover {
        right: 0;
    }
}

.mini-notifications {
    .badge {
        opacity: 0;
    }
    &.has-unread .badge {
        opacity: 1;
    }
}


/* Elements */
.modal-dialog[data-ajax-updating],
.modal-dialog:not([data-ajax-updating]) + .modal-loading {
    display: none;
}