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

article {
    min-height: 100vh;
}

h3 {
    margin-left: auto;
    margin-right: auto;
}

.config-table {
    border-collapse: separate;
    border-spacing: 4px 0px;
}

.notification-count, .unseen-events-count {
    position: absolute;
    right: -9px;
    top: -9px;
    width: 15px;
    height: 15px;
    line-height: 15px !important;
    border: none;
    border-radius: 50%;
    color: white;
    background-color: #FF495C;
    text-align: center;
    font-size: 9px;
    font-family: monospace;
    text-decoration: none;
    z-index: 5;
}

.unseen-events-count {
    top: 3px;
    left: 25px;
}

.param-slide {
    width: 90%;
}

/* Red blink background */
.bkg-red-blink {
    background-color: #FF495C;
    color: white;
    animation: blinker 1.5s linear infinite;
}

/* Square buttons */
[class^="btn-round"] {
    width: 125px;
    height: 125px;
    border: none;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
    color: white;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 13px;
    cursor: pointer;
}

/* Size of the icons in the square buttons */
[class^="btn-round"] img.icon {
    max-height: inherit;
    width: 30%;
    height: 30%;
}

.btn-round-green {
    box-shadow: rgb(0 0 0) 0px 10px 13px -12px, rgb(0 0 0 / 15%) 0px 0px 10px 2px;
}
.btn-round-red {
    box-shadow: 0px 0px 5px 0.5px rgb(0 0 0 / 80%) inset;
}
.btn-round-blue {
    background-color: #5473e8;
}
.btn-round-green {
    background-color: #15bf7f;
}
.btn-round-red {
    background-color: #FF495C;
}
.btn-round-none {
    background-color: #43414100;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.btn-round-blue:hover {
    transition-duration: 0.2s;
    background-color: #4e69cd;
}
.btn-round-green:hover {
    transition-duration: 0.2s;
    background-color: #12a16a;
}
.btn-round-red:hover {
    transition-duration: 0.2s;
    background-color: #ff3347;
}

[class^="btn-semi-circle"] {
    width: 62.5px;
    height: 125px;
}

[class^="btn-semi-circle"] img.icon {
    max-height: inherit;
    width: 45%;
    height: 45%;
}

.btn-semi-circle-red-left {
    border-radius: 125px 0 0 125px;
    background-color: #FF495C;
    box-shadow: 0px 0px 5px 0.5px rgb(0 0 0 / 80%) inset;
}

.btn-semi-circle-blue-right {
    border-radius: 0 125px 125px 0;
    background-color: #13273a;
    box-shadow: 0px 0px 2px 0px #000000;
}

.btn-semi-circle-red-left:hover {
    transition-duration: 0.2s;
    background-color: #ff3347;
}

.btn-semi-circle-blue-right:hover {
    transition-duration: 0.2s;
    background-color: #19344d;
}

.bottom-buttons, .top-buttons {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    column-gap: 40px;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99;
    width: 100%;
    height: 50px;
    background-color: #0e1e2f;
    box-shadow: 0px -2px 10px 1px rgba(0, 0, 0, 0.394);
}

.top-buttons {
    position: inherit;
    box-shadow: none;
    justify-content: space-between;
    z-index: 20;
}

.bottom-buttons > div {
    display: flex;
    align-items: center;
    height: 95%;
}
.bottom-buttons div.current-tab {
    border-bottom: 1px solid #5473e8;
}
.bottom-buttons img, .top-buttons img {
    height: 30px;
}

.main-buttons {
    display: grid;
    grid-template-columns: repeat(1, 100%);
    justify-content: center;
}

.item {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
}

.main-container {
    width: auto;
    display: grid;
    grid-template-columns: repeat(1, 100%);
    align-items: start;
    margin: 0px 20px 0px 20px;
}

#motion-stats-container {
    display: grid;
    grid-template-columns: repeat(1, 100%);
    row-gap: 10px;
    align-items: center;
}

#motion-stats-container div {
    height: 250px !important;
}

#motion-events-captures-container {
    display: grid;
    grid-template-columns: repeat(1, 100%);
    justify-content: center;
    overflow-x: auto;
    overflow-y: auto;
}

#motion-events-captures-acquit-container {
    position: fixed;
    bottom: 85px;
    right: 25px;
}

#motion-events-captures-acquit-container .acquit-events-btn {
    min-width: 50px;
    height: 50px !important;
}

#motion-events-captures-acquit-container .acquit-events-btn img {
    width: 37px !important;
    padding-left: 7px !important;
}

.event-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 10px;
}

.event-date-container {
    margin: auto;
    width: 100%;
    height: 100%;
}

.event-date {
    display: flex;
    margin-top: 15px;
    margin-bottom: 5px;
    align-items: center;
    justify-content: space-between;
}

.event-date p:first-child {
    font-size: 18px;
}

.event-previous-next-btns {
    display: flex;
    column-gap: 10px;
    justify-content: center;
}

.event-metadata {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    column-gap: 20px;
    align-items: center;
    width: 100%;
}

.event-camera-name {
    align-self: center;
}

.event-files-count {
    display: flex;
    align-items: center;
    column-gap: 5px;
    justify-content: flex-end;
}

.event-camera {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 25px;
    row-gap: 25px;
    width: 100%;
    max-height: 800px;
    overflow-y: auto;
}

.event-row {
    width: 100%;
    /* min-height: 150px; */
}

.event-loading {
    background-color: #152637;
    border-radius: 20px;
    min-height: 150px;
}

.event-loading img {
    height: 40px;
}

#events-captures-div, #motion-configuration-div {
    width: 100%;
}

.motion-conf-file-container {
    max-width: 100%;
}

.motion-conf-file-container > div:first-child {
    display: flex;
    align-items: center;
    column-gap: 10px;
}

.camera-name {
    width: 200px;
    font-size: 18px;
    padding-right: 10px;
    border-right: 1px solid #24405c66;
}

.camera-name input[type=text] {
    font-size: 18px !important;
    background-color: #182b3e !important;
}

.motion-file-info-btns-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.motion-file-btns {
    width: 10%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    row-gap: 35px;
}

.motion-file-btns > div:first-child {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    row-gap: 5px;
}

#autostart-btn-div, #alert-btn-div {
    display: flex;
    justify-content: center;
}

#alert-btn-div span {
    margin-left: 4px;
    margin-right: 4px;
}

.camera-configuration-div {
    max-width: 100%;
}

.camera-config-table tbody {
    width: 100%;
    display: table;
}

/* do not display the grid layout buttons on mobile */
#live-grid-layout-btns {
    display: none;
}

#camera-grid-container {
    display: grid;
    grid-template-columns: 100%;
    justify-content: space-evenly;
    margin: 0px 0px 50px 0px;
    column-gap: 30px;
    row-gap: 30px;
}

[class^="grid-icon"] {
    display: grid !important;
    width: 18px;
    height: 18px;
}

.grid-icon-2 {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 2px !important;
    row-gap: 2px;
}

.grid-icon-3 {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2px !important;
    row-gap: 2px;
}

.grid-icon-4 {
    grid-template-columns: repeat(4, 1fr);
    column-gap: 2px !important;
    row-gap: 2px;
}

[class^="grid-icon"] div {
    background-color: white;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 !important;
}

.add-camera-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    border-radius: 20px;
}

.add-camera-container:hover {
    border: 1px solid #213446;
}

.add-camera-container img {
    width: 50px;
    height: 50px;
}

.camera-container {
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 20px;
    background-color: #182b3e;
    box-shadow: rgb(0 0 0) 0px 10px 13px -12px, rgb(0 0 0 / 15%) 0px 0px 10px 2px;
}

.camera-output {
    height: 100%;
}

.camera-btn-div {
    width: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 15px;
    border-top: 0.5px solid #9fafbf24;
}

.camera-image > img {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 4px;
}
.camera-image video {
    width: 100%;
    max-width: 100vw;
    max-height: 100vh;
    margin-left: auto;
    margin-right: auto;
    border-radius: 20px 20px 0 0;
}

.camera-motion-indicator {
    position: absolute;
    top: 12px;
    left: 12px;
}
.camera-controls-container, #timelapse-controls-container {
    width: 100%;
    display: flex;
    column-gap: 10px;
    position: absolute;
    top: 0;
    margin: auto;
    box-sizing: border-box;
    padding: 10px 10px 0px 10px;
}
.camera-controls-container {
    display: grid;
}
#timelapse-controls-container {
    justify-content: end;
}
.camera-controls-container .round-btn-tr, #timelapse .round-btn-tr {
    width: 32px;
    height: 32px;
    opacity: 0.8;
    cursor: pointer;
    background-color: #00000030;
}
.camera-controls-container .round-btn-tr:hover, #timelapse .round-btn-tr:hover {
    opacity: 1;
}
.camera-controls-container .round-btn-tr img, #timelapse .round-btn-tr img {
    width: 22px;
    height: 22px;
}
.camera-ptz-btn-container {
    width: 100%;
    max-width: 100vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #0000007a;
    padding: 10px 0 10px 0;
}
.camera-ptz-btn-container img {
    width: 24px !important;
    height: 24px !important;
}
.camera-ptz-move-speed {
    max-height: 100px;
    writing-mode: vertical-lr;
    transform: rotate(180deg);
}
.camera-image-text-left, .camera-image-text-right {
    position: absolute;
    font-family: monospace;
    display: flex;
    flex-direction: column;
}
.camera-image-text-left {
    left: 5px;
    bottom: 5px;
}
.camera-image-text-right {
    right: 5px;
    bottom: 5px;
}
.camera-image {
    width: 100%;
    min-height: 150px;
}

video {
    touch-action: pan-x pan-y pinch-zoom !important;
}

.video-container {
    display: flex;
    justify-content: center;
    height: 100%;
}
.camera-disabled, .camera-unavailable {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 15px;
    min-height: 250px;
    height: 100%;
    max-height: 100vh;
}
.camera-disabled img, .camera-unavailable img {
    width: 64px;
    height: 64px;
}

#fullscreen {
    display: grid;
    row-gap: 15px;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    height: 100vh;
    max-height: 100vh;
    background-color: #182b3e;
    box-shadow: rgb(0 0 0) 0px 10px 13px -12px, rgb(0 0 0 / 15%) 0px 0px 10px 2px;
}
#fullscreen {
    grid-template-rows: 80% 20%;
}
#timelapse {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100vh;
}
#timelapse-picture {
    width: 100%;
    max-width: 100vw;
    max-height: 100vh;
}
#timelapse-controls {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%);
}
#timelapse input, #timelapse select {
    background: none;
    border: 1px solid #ffffff30;
    opacity: 0.8;
    cursor: pointer;
    background-color: #00000030;
}
#timelapse input:hover, #timelapse select:hover {
    opacity: 1;
}
#timelapse #picture-slider {
    width: 85vw;
}

.close-timelapse-btn, .close-fullscreen-btn {
    width: 50px;
    height: 50px;
}
#fullscreen img:first-child, #fullscreen video {
    max-height: 100% !important;
    max-width: 100% !important;
    margin: auto;
}

.hide {
    display: none;
}

footer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    row-gap: 40px;
    width: auto;
    height: 300px;
    flex-grow: 1;
    margin-top: 100px;
    padding: 30px 15px 50px 15px;
    box-shadow:
     0px 1px 1px 0px rgba(0, 0, 0, 0.5) inset,
     0px 2px 2px 0px rgba(109, 109, 109, 0.2);
    background-color:#182b3e;
}

footer #github img { width: 25px; }

.event-print-file-container {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    display: none;
    width: 100%;
    height: 100%;
    background-color: #0e1e2f;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.event-print-file {
    width: fit-content;
    max-width: 99%;
    margin: auto;
}

.event-print-file img, .event-print-file video {
    width: 100%;
    max-height: 90vh;
}

.event-media-row {
    background-color: #22384F;
    border-radius: 20px;
    box-shadow: 0px 1px 5px 0px rgb(13 13 13 / 50%);
    margin-bottom: 4px;
}

.event-media-row > div:first-child {
    display: flex;
    flex-direction: column;
    column-gap: 5px;
}

.event-media {
    position: relative;
}

.event-media img:not(.icon), .event-media video {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 20px;
}

/* Event media full time */
.event-media-file-number {
    position: absolute;
    top: 4px;
    left: 7px;
}

.event-media-checkbox-container {
    position: absolute;
    top: 8px;
    right: 8px;
}

.event-container:hover .event-media-checkbox {
    visibility: visible;
}

.event-media-checkbox, .select-all-media-checkbox {
    width: 28px !important;
    height: 28px !important;
    opacity: 0.5;
}

.event-media-checkbox:hover, .select-all-media-checkbox:hover {
    opacity: 1;
}

.file-unavailable {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 5px;
    min-height: 180px;
    background: #181818de;
    border-radius: 20px 20px 2px 2px;
}

.file-unavailable p {
    width: 100%;
    text-align: center;
}

/* Scrollbar personnalisée */
/* Compatible Chrome uniquement */
/* width */
::-webkit-scrollbar {
    width: 6px;
}

/* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #252525;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #596EB5;
    border-radius: 5px;
}

/**
 *  Full page loading veil
 */
.body-veil {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    row-gap: 20px;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #0e1e2f;
    border-radius: 20px;
    z-index: 90;
}

.body-veil img:first-child {
    width: 120px;
    height: 120px;
    opacity: 0.1;
}

.body-veil img:last-child {
    width: 20px;
    height: 20px;
    opacity: 0.5;
}

/* Desktop configuration */
@media (min-width:1025px) {
    h3 {
        margin-left: 0px;
    }

    .param-slide {
        width: 29.5%;
    }

    .main-buttons-container {
        display: grid;
        align-items: center;
        height: 60vh;
    }

    .main-buttons {
        grid-template-columns: repeat(3, 30%);
    }

    [class^="btn-round"] {
        width: 230px;
        height: 230px;
    }

    [class^="btn-semi-circle"] {
        width: 115px;
        height: 230px;
    }

    .btn-semi-circle-red-left {
        border-radius: 250px 0 0 250px;
    }

    .btn-semi-circle-blue-right {
        border-radius: 0 250px 250px 0;
    }

    .main-container {
        grid-template-columns: repeat(1, 100%);
        justify-content: space-around;
    }

    #motion-events-captures-container {
        grid-template-columns: repeat(2, 45%);
        justify-content: space-between;
    }

    #motion-stats-container {
        width: 100%;
    }

    .event-date-container {
        width: 100%;
    }

    .event-container {
        display: flex;
        flex-direction: row;
        row-gap: 0px;
        column-gap: 10px;
    }

    .event-previous-next-btns {
        justify-content: flex-end;
    }

    .event-camera {
        grid-template-columns: repeat(4, 1fr);
    }

    .event-metadata {
        flex-direction: column;
        align-items: center;
        row-gap: 20px;
        width: 250px;
        margin-left: 20px;
        margin-right: 20px;
        margin-bottom: 0;
    }

    .event-camera-name {
        align-items: center;
    }

    .event-files-count {
        justify-content: center;
    }

    .event-id {
        align-self: center;
    }

    .event-media-checkbox, .select-all-media-checkbox {
        width: 22px !important;
        height: 22px !important;
    }

    .event-media-checkbox {
        visibility: hidden;
    }

    .play-picture-btn {
        max-width: 100%;
        max-height: 100%;
        object-fit: cover;
    }

    .motion-file-btns {
        width: auto;
    }

    .motion-file-btns > div:first-child {
        flex-direction: row;
    }

    #motion-configuration-div {
        width: 50%;
    }

    #live-grid-layout-btns {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    #live-grid-layout-btns > div:first-child {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        column-gap: 12px;
        margin-right: 15px;
    }

    #camera-grid-container {
        grid-template-columns: repeat(3, 1fr);
    }

    .camera-ptz-btn-container img {
        width: 30px !important;
        height: 30px !important;
    }

    #fullscreen {
        grid-template-rows: 85% 15%;
    }

    .bottom-buttons {
        justify-content: center;
        align-items: center;
        column-gap: 60px;
        padding-left: 15px;
    }

    .bottom-buttons-title {
        display: block;
    }
}