/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

@import url('https://fonts.googleapis.com/css?family=Raleway:100,300,400');

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

@media (min-width: 1200px) {
  .container {
    width: 75%;
  }
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */

    /* Vue */

    [v-cloak] {
        display: none;
    }

    /* Common > Elements */

    /* blink - https://codepen.io/anasandoval90/pen/jPXxaR */
    @-webkit-keyframes blinker {
      from {opacity: 1.0;}
      to {opacity: 0.0;}
    }
    .blink {
        text-decoration: blink;
        -webkit-animation-name: blinker;
        -webkit-animation-duration: 1s;
        -webkit-animation-iteration-count:infinite;
        -webkit-animation-timing-function:ease-in-out;
        -webkit-animation-direction: alternate;
    }

    /* http://stackoverflow.com/questions/6900124/how-to-make-certain-text-not-selectable-with-css */
    .unselectable {
        -webkit-user-select: none; /* Chrome/Safari */        
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* IE10+ */

        /* Rules below not implemented in browsers yet */
        -o-user-select: none;
        user-select: none;
    }

    /* pace.js */
    
    /* https://github.com/HubSpot/pace/issues/127 */
    .pace-running .pace-container {
        zoom: 1;
        filter: alpha(opacity=10);
        opacity: 0.1;
    }
    .pace-done .pace-container {
        zoom: 1;
        filter: alpha(opacity=100);
        opacity: 1;
        -webkit-transition: opacity 1s linear;
        -moz-transition: opacity 1s linear;
        -o-transition: opacity 1s linear;
        transition: opacity 1s linear;
    }

    /* form */

    input.form-control,
    select.form-control {
        padding: 0.25rem 0.5rem;
        font-size: 14px;
        height: 28px!important;
    }

    input.form-control-sm,
    select.form-control-sm {
        font-weight: 300;
        font-size: 0.8rem;
    }

    .custom-file-control,
    .custom-file-control::before,
    .custom-file-control::after {
        padding: 0.1rem 0.25rem;
        height: 28px;
    }

    span.input-group-addon {
        padding: 0.25rem 0.5rem;
        font-size: 14px;   
    }

    .form-group label {
        display: block;
        text-align: center;
        font-size: 14px;
    }

    .has-danger label {
      color: #d9534f;
    }

    @media (min-width: 576px) {

        .form-group label {
            display: inline-block;
            text-align: left;
        }

    }

    label.form-required .required:after {
        content: "*";
        color: #a94442;
        line-height: 0;
        font-size: 0.95rem!important;
        position: relative;
    }

    .form-control-feedback {
        font-size: 0.8rem;
        font-weight: bold;
    }

    i.info-tooltip {
        color: #666;
        font-size: 80%;
    }

    /* event edit / create page error notice */

    #error-notice {
        position: fixed;
        z-index: 1000;
        width: 100%;
        top: 35%;
        left: 0;
        display: flex;
        justify-content: center;
    }
    #error-notice div.error {
        text-align: center;
        width: 75%;
        border-radius: 4px;
        background-color: rgba(189, 54, 47, 0.9);
        -webkit-box-shadow: 3px 3px 10px 0 rgba(0,0,0,0.5), 0 0 0 1px rgba(0,,0,0.04);
        box-shadow: 3px 3px 10px 0 rgba(0,0,0,0.5), 0 0 0 1px rgba(0,0,0,0.04);
        color: #fff;
    }
    #error-notice div.error a {
        color: #fff;
    }

    /* Layout */

    body, .btn {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Raleway', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
        font-weight: 400;
    }

    body.private-body {
        padding-top: 54px;
        background: #ddd;
    }

    body.private-body.modal-open {
        padding-right: 0!important;
    }
    .modal-dialog {
        max-width: 90%;
        margin: 2rem auto;
    }

    @media (min-width: 576px) {

        .modal-dialog {
            max-width: 75%
        }

    }

    .input-group-btn.b button {
        border-radius: 0.25rem !important;
    }

    ul.clean-list {
        list-style-type: none;
    }

    ol.breadcrumb {
        padding: 10px 15px;
        margin: 0;
        font-size: 0.9rem;
        border-radius: 0;
    }

    .navbar-toggler-icon {
        width: 1em;
    }

/* left navigation */

    nav.left-nav {
        position: relative;
        background: #4c6b8a;
        min-height: calc(100vh - 50px);
        height: 100%;
        z-index: 1000;
        font-size: 0.8rem;
    }

    nav.left-nav ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    nav.left-nav * {
        color: #fff;
        text-decoration: none;
    }

    nav.left-nav li.active {
        background: #3c556e;
    }

    nav.left-nav .parent:hover,
    nav.left-nav ul.nav-submenu li a:hover {
        background: #3c556e;
    }

    nav.left-nav .parent i {
        width: 15px;
        text-align: center;
    }

    nav.left-nav .parent a {
        padding: 0.75rem;
    }

    nav.left-nav ul.nav-submenu {
        background: #44607c;
    }
    nav.left-nav ul.nav-submenu li {
        display: flex;
    }
    nav.left-nav ul.nav-submenu li a {
        font-size: 0.75rem;
        font-weight: 100;
        padding: 0.35rem 1rem;
        width: 100%;
    }

    a.toggle-submenu[aria-expanded="false"]::after {
        min-width: 15px;
        text-align: center;
        font-weight: bold;
        font-size: 1rem;
        content: '+';
    }

    a.toggle-submenu[aria-expanded="true"]::after {
        min-width: 15px;
        text-align: center;
        font-weight: bold;
        font-size: 1rem;
        content: '-';
    }

/* top navigation */

    nav.top-nav {
        background: #4c6b8a;
    }

    nav.top-nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
    }

    nav.top-nav ul li {
        flex: 1;
    }

    nav.top-nav ul li:hover {
        background: #3c556e;
    }

    nav.top-nav ul li a {
        text-align: center;
        color: #fff;
        text-decoration: none;
        font-size: 0.9em;
    }

    nav.top-nav ul li.active {
        text-align: center;
        color: #fff;
        font-size: 0.9em;
        background: #3c556e;
    }

    nav.top-nav div.icon {
        font-size: 1.15em;
    }

.shadow {
    -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);
    box-shadow:0 1px 3px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);
}

/* post frontend-backend */

.standard-border {
    border: 1px solid #ccc;
}

.card {
    border-color: hsl(213, 27%, 21%) hsl(220, 10%, 88%) hsl(220, 10%, 88%);
    border-radius: 4px;
    border-style: solid;
    border-width: 3px 1px 1px;
}
.card.standard-border {
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.25rem;
}

.card .toolbar {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
}

.data-table {
    margin: 0;
    padding: 0;
}

.dt-row {
    display: flex;
    flex-direction: row;
    border-left: 1px solid #eaeaea;
}
.dt-row.locked {
    background: #ddd;
}
a.dt-row-link {
    text-decoration: none;
}
a.dt-row-link:hover > .dt-row {
    background: #fafafa;
}

.dt-col {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    font-size: 0.85rem;
    flex: 1;
    border-right: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
}
.dt-col.actions {
    min-width: 100px;
    flex: 0;
    display: flex;
    justify-content: center;
}

.dt-col.header {
    background: #eaeaea;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.4rem;
    border-right: 1px solid #fff;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.dt-col.header.sortable:hover {
    background: #dedede;
    cursor: pointer;
}
.dt-col.header.sorted:after {
    margin-left: auto;
}
.dt-col.header.sorted.desc:after {
    content: '\25BC';
    font-size: 0.75rem;
    color: #bbb;
}
.dt-col.header.sorted.asc:after {
    content: '\25B2';
    font-size: 0.75rem;
    color: #bbb;
}

/* end post frontend-backend */

/* various elements */
#app-container {
    display: none;
}

/* player */
#theatre {
    background: #000;
}

#video-container {
    position: relative;
    padding-bottom: 56%;
    padding-top: 20px;
    height: 0;
}

#video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ==========================================================================
    Footer
   ========================================================================== */

.footer {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
}


.btn {
    line-height: 1;
}

.btn-xs, .btn-group-xs > .btn {
  padding: 0.15rem 0.4rem;
  font-size: 0.75rem;
  border-radius: 0.2rem;
}


/* bootstrap updates */

.border {
  border: 1px solid #e9ecef !important;
}

.border-0 {
  border: 0 !important;
}

.border-top-0 {
  border-top: 0 !important;
}

.border-right-0 {
  border-right: 0 !important;
}

.border-bottom-0 {
  border-bottom: 0 !important;
}

.border-left-0 {
  border-left: 0 !important;
}

.border-primary {
  border-color: #007bff !important;
}

.border-secondary {
  border-color: #868e96 !important;
}

.border-success {
  border-color: #28a745 !important;
}

.border-info {
  border-color: #17a2b8 !important;
}

.border-warning {
  border-color: #ffc107 !important;
}

.border-danger {
  border-color: #dc3545 !important;
}

.border-light {
  border-color: #f8f9fa !important;
}

.border-dark {
  border-color: #343a40 !important;
}

.border-white {
  border-color: #fff !important;
}

.rounded {
  border-radius: 0.25rem !important;
}

.rounded-top {
  border-top-left-radius: 0.25rem !important;
  border-top-right-radius: 0.25rem !important;
}

.rounded-right {
  border-top-right-radius: 0.25rem !important;
  border-bottom-right-radius: 0.25rem !important;
}

.rounded-bottom {
  border-bottom-right-radius: 0.25rem !important;
  border-bottom-left-radius: 0.25rem !important;
}

.rounded-left {
  border-top-left-radius: 0.25rem !important;
  border-bottom-left-radius: 0.25rem !important;
}

.rounded-circle {
  border-radius: 50% !important;
}

.rounded-0 {
  border-radius: 0 !important;
}