@import url("https://use.fontawesome.com/releases/v5.6.3/css/all.css");

html {
    font-size:16px;
}

body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color:#052C5B;
}

table { height:1px; }
tr { height:100%; }
td { padding:0rem; }
td > div { height:100%; }

video { border:0.1rem solid black!important; cursor:pointer; background-color:#585858!important; }

.u-list-unstyled{padding:0;list-style:none}
.nav-item .sub-nav{display:none}
.nav-item:hover .sub-nav{display:block}
.nav-item:hover{position:relative}
.nav-item:hover .sub-nav-wrapper{position:absolute;left:0;top:3.6rem;padding-top:0.1rem;z-index:10;}
.sub-nav-wrapper-content{background-color:#052C5B;border-radius:0.5rem;}
.sub-nav-item .navbar-brand{padding:0.6rem 0.8rem!important;}
.sub-nav .sub-nav-item:hover{background-color:#074692;}
.sub-nav .sub-nav-item:first-child:hover{border-radius:0.5rem 0.5rem 0rem 0rem;}
.sub-nav .sub-nav-item:last-child:hover{border-radius:0rem 0rem 0.5rem 0.5rem;}

.field {
    margin-top:1.5rem;
}

.mg-left-xs {
    margin-left:0.5rem;
}

.mg-left-sm {
    margin-left:1rem;
}

.mg-left {
    margin-left:1.5rem;
}

.mg-left-md {
    margin-left:2rem;
}

.mg-left-lg {
    margin-left:2.5rem;
}

.mg-right-xs {
    margin-right:0.5rem;
}

.mg-right-sm {
    margin-right:1rem;
}

.mg-right {
    margin-right:1.5rem;
}

.mg-right-md {
    margin-right:2rem;
}

.mg-right-lg {
    margin-right:2.5rem;
}

.mg-top-xs {
    margin-top:0.5rem;
}

.mg-top-sm {
    margin-top:1rem;
}

.mg-top {
    margin-top:1.5rem;
}

.mg-top-md {
    margin-top:2rem;
}

.mg-top-lg {
    margin-top:2.5rem;
}

.mg-bottom-xs {
    margin-bottom:0.5rem;
}

.mg-bottom-sm {
    margin-bottom:1rem;
}

.mg-bottom {
    margin-bottom:1.5rem;
}

.mg-bottom-md  {
    margin-bottom:2rem;
}

.mg-bottom-lg  {
    margin-bottom:2.5rem;
}

.no-padding {
    padding:0!important;
}

.clickable {
    cursor:pointer;
}

.hidden {
    display:none!important;
}

.my-board, .gallery-item {
    color:#69a2ff;
    padding:0.4rem 0.4rem 0rem 0.4rem;
    margin:0.35rem;
    border:0.1rem solid purple;
    display:inline-block;
    vertical-align:top;
}

.board-cell:not(.board-cell-edit), .used-cell:not(.used-cell-edit), .gallery-item:not(.gallery-item-edit){
    cursor:pointer;
}

.my-board:hover, .my-board:focus, .my-board:active, .gallery-item:hover, .gallery-item:focus, .gallery-item:active {
    text-decoration:none;
}

.my-board, .board-cell, .empty-cell, .used-cell, .gallery-item, .task, .planning, .event, .wide-event {
    position:relative;
}

.my-board .add-overlay, .gallery-item .add-overlay, .task .add-overlay {
    position:absolute;
    left:50%;
    top:50%;
    font-size:5rem;
    margin-left:-2.25rem;
    margin-top:-2.5rem;
}

.gallery-item .play-overlay {
    position:absolute;
    left:50%;
    top:50%;
    font-size:5rem;
    margin-left:-2.5rem;
    margin-top:-2.6rem;
}

.my-board .edit-overlay, .board-cell .edit-overlay, .used-cell .edit-overlay, .gallery-item .edit-overlay, .task .edit-overlay {
    position:absolute;
    left:0.2rem;
    bottom:0.2rem;
    font-size:1.2rem;
}

.event .edit-overlay {
    position:absolute;
    left:0.2rem;
    top:0.2rem;
    font-size:1.2rem;
}

.my-board .remove-overlay, .board-cell .remove-overlay, .used-cell .remove-overlay, .gallery-item .remove-overlay, .task .remove-overlay {
    position:absolute;
    right:0.2rem;
    bottom:0.2rem;
    font-size:1.2rem;
}

.event .remove-overlay {
    position:absolute;
    right:0.2rem;
    top:0.2rem;
    font-size:1.2rem;
}

.my-board .link-overlay, .board-cell .link-overlay, .gallery-item .link-overlay, .task .link-overlay {
    position: absolute;
    left:50%;
    transform:translate(-50%, 0);
    bottom:-0.2rem;
    font-size:1.6rem;
}

.hidden-board, .hidden-task, .hidden-gallery-item {
    opacity:0.45;
}

.image-nm {
    max-width:40rem;
    max-height:40rem;
}

.fa-plus {
    color:#008c46;
}

.communication-board-container {
    padding:1rem 0rem;
}

.communication-board {
    border:0.15rem solid purple;
}

.communication-board td {
    text-align:center;
    padding:0;
    margin:0;
    background-color:#747474;
    color:#fff;
}

.empty-cell {
    width:16rem;
    height:16rem;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0.1rem solid purple;
}

.empty-cell-sm {
    width:14.5rem;
    height:14.5rem;
}

.empty-cell-lg {
    width:18rem;
    height:18rem;
}

.empty-cell-xlg {
    width:20rem;
    height:20rem;
}

.empty-cell .add-overlay {
    position:absolute;
    left:50%;
    top:50%;
    font-size:5rem;
    margin-left:-2.25rem;
    margin-top:-2.5rem;
}

.board-cell {
    padding:0.4rem 0.4rem 0rem 0.4rem;
    border:0.1rem solid purple;
}

.used-cell {
    padding:0.4rem 0.4rem 0rem 0.4rem;
    border:0.1rem solid purple;
}

.hidden-cell {
    opacity:0.25;
}

.reply-cell {
    padding:0.4rem 0.4rem 0rem 0.4rem;
    border:0.25rem solid purple;
    cursor:pointer;
}

.cell-img img, .sentence-strip-img img {
    max-width:100%;
    max-height:100%;
}

.cell-img {
    width:15rem;
    height:11.4rem;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.cell-text {
    width:15rem;
    height:3.6rem;
    font-size:1.4rem;
    font-weight:600;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.my-board.add .cell-text {
    line-height:1.6rem;
}

.used-cell-sm .cell-img, .board-cell-sm .cell-img, .reply-cell-sm .cell-img {
    width:13rem;
    height:9.5rem;
}

.used-cell-sm .cell-text, .board-cell-sm .cell-text, .reply-cell-sm .cell-text{
    width:13rem;
    height:3.5rem;
    font-size:1.15rem;
}

.used-cell-lg .cell-img, .board-cell-lg .cell-img, .reply-cell-lg .cell-img {
    width:17rem;
    height:13.2rem;
}

.used-cell-lg .cell-text, .board-cell-lg .cell-text, .reply-cell-lg .cell-text {
    width:17rem;
    height:3.8rem;
    font-size:1.6rem;
}

.used-cell-xlg .cell-img, .board-cell-xlg .cell-img, .reply-cell-xlg .cell-img {
    width:19rem;
    height:15rem;
}

.used-cell-xlg .cell-text, .board-cell-xlg .cell-text, .reply-cell-xlg .cell-text {
    width:19rem;
    height:4rem;
    font-size:1.8rem;
}

.inline {
    display:inline-block;
}

.favorite-sentence-strip-cell {
    color:#000;
    padding:0.3rem 0.3rem 0rem 0.3rem;
    border:0.05rem solid purple;
    margin:0.2rem 0.07rem;
    display:inline-block;
}

.favorite-sentence-strip-cell .sentence-strip-img {
    width:9rem;
    height:6.8rem;
}

.favorite-sentence-strip-cell .sentence-strip-text {
    width:9rem;
    height:2.2rem;
    font-size:1rem;
}

.sentence-strip-cell {
    color:#000;
    background-color:#e6ac00;
    padding:0.3rem 0.3rem 0rem 0.3rem;
    border:0.05rem solid purple;
    margin:0.2rem;
    display:inline-block;
    cursor:pointer;
}

.sentence-strip-img {
    width:10.5rem;
    height:8.3rem;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.sentence-strip-text {
    width:10.5rem;
    height:2.2rem;
    font-size:1rem;
    font-weight:600;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

/*.sentence-strip-cell-sm .sentence-strip-img {
    width:9rem;
    height:7rem;
}

.sentence-strip-cell-sm .sentence-strip-text {
    width:9rem;
    height:2rem;
    font-size:0.9rem;
}

.sentence-strip-cell-lg .sentence-strip-img {
    width:12rem;
    height:9.5rem;
}

.sentence-strip-cell-lg .sentence-strip-text {
    width:12rem;
    height:2.5rem;
    font-size:1.2rem;
}

.sentence-strip-cell-xlg .sentence-strip-img {
    width:13.5rem;
    height:10.7rem;
}

.sentence-strip-cell-xlg .sentence-strip-text {
    width:13.5rem;
    height:2.8rem;
    font-size:1.3rem;
}*/

.gallery-item-img img {
    max-width:100%;
    max-height:100%;
}

.gallery-item-img {
    width:15rem;
    height:11.4rem;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.gallery-item-text {
    width:15rem;
    height:3.6rem;
    font-size:1.4rem;
    font-weight:600;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.gallery-item.add .gallery-item-text {
    line-height:1.6rem;
}

.gallery-item-sm .gallery-item-img {
    width:13rem;
    height:9.5rem;
}

.gallery-item-sm .gallery-item-text {
    width:13rem;
    height:3.5rem;
    font-size:1.15rem;
}

.gallery-item-lg .gallery-item-img {
    width:17rem;
    height:13.2rem;
}

.gallery-item-lg .gallery-item-text {
    width:17rem;
    height:3.8rem;
    font-size:1.6rem;
}

.gallery-item-xlg .gallery-item-img {
    width:19rem;
    height:15rem;
}

.gallery-item-xlg .gallery-item-text {
    width:19rem;
    height:4rem;
    font-size:1.8rem;
}

.tracker-overlay {
    position:absolute;
    margin-left: auto;
    margin-right: auto;
    left:0;
    right:0;
    text-align:center;
    bottom:0.01rem;
    font-size:0.7rem;
    max-width:5rem;
}

.centered, .sub-header h2 {
    text-align:center;
    margin: 0 auto;
}

.align-center {
    text-align:center;
}

.align-right {
    text-align:right;
}

td a, td div {
    display:inline-block;
    width:100%;
}

.used-cell, .used-cell:hover, .used-cell:focus, .used-cell:active, .reply-cell, .reply-cell:hover, .reply-cell:focus, .reply-cell:active, .used-item, .used-item:hover, .used-item:focus, .used-item:active {
    color:#000;
    text-decoration:none;
}

.task:hover, .task:focus, .task:active {
    text-decoration:none;
}

.task-category {
    display:block;
}

.favorite-sentence-strip {
    display:block;
    background-color:#69c8ff;
    border:0.2rem solid #69a2ff;
    padding:0.5rem 0.8rem; 0rem; 0.8rem;
    margin:1rem;
}

#no-favorite-sentence-strips {
    background-color:#69a2ff;
    padding:0.5rem 0.8rem; 0.5rem 0.8rem;
}

.sentence-strip {
    display:block;
}

.sentence-strip-container {
    min-width:90%;
    min-height:13.6rem;
    background-color:#69c8ff;
    border:0.2rem solid #69a2ff;
    display:inline-block;
    padding:0.9rem;
}

/*.sentence-strip-container-sm {
    min-height:11.9rem;
    padding:0.8rem;
}

.sentence-strip-container-lg {
    min-height:15.3rem;
    padding:1rem;
}

.sentence-strip-container-xlg {
    min-height:16.8rem;
    padding:1rem;
}*/

.favorite-sentence-strip a, .favorite-sentence-strip a:hover, .favorite-sentence-strip a:focus, .favorite-sentence-strip a:active {
    color:#000;
    text-decoration:none;
}

label {
    display:block;
    font-size:1.5rem;
    font-weight:600;
}

.label-inline {
    display:inline-block;
    font-size:1rem;
    font-weight:normal;
}

.is-required>label:first-of-type:after{content:"*";margin-left:.1875rem;color:#c34646}

.fragment {
    display:none;
}

.popup.visible, .fragment.visible, .transparent-popup.visible, .iframe-popup.visible {
    display:block
}

.popup {
    display:none;
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-color:rgba(0,4,29,.75);
    z-index:1000000;
}

.iframe-popup {
    display:none;
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-color:rgba(0,4,29,.75);
    z-index:6;
}

.white{color:white;}

.step-container {
    position:relative;
    border:0.05rem solid white;
    color:white;
    padding:0.5rem;
}

.black{color:black;}

.iframe-popup .close{position:absolute;top:0.3rem;right:1rem;cursor:pointer;color:white;}

.popup-inner {
    position:absolute;
    top:50%;
    left:50%;
    width:calc(100% - 2rem);
    max-width:65rem;
    max-height:calc(100vh - 5rem);
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    -webkit-box-shadow:0 4px 8px 0 rgba(0,4,29,.12);
    box-shadow:0 4px 8px 0 rgba(0,4,29,.12);
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
    background-color:#fff;
    padding:2rem 2rem 1rem 2rem;
}

.popup-inner-sm {
    max-width:30rem;
}

.popup-inner-lg {
    max-width:78rem;
}

.popup-inner-xlg {
    max-width:80%;
    max-height:95%;
}

.popup-inner-xxlg {
    max-width:90%;
    max-height:95%;
}

.transparent-popup {
    display:none;
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-color:rgba(0,4,29,.9);
    z-index:6;
}

.popup-inner-transparent {
    position:absolute;
    top:50%;
    left:50%;
    width:calc(100% - 2rem);
    max-height:90vh;
    max-width:90vw;
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    -webkit-transform:translate(-50%,-50%);
    transform:translate(-50%,-50%);
}

.image-tile, .video-tile {
    display:none;
}

.image-tile.visible, .video-tile.visible {
    display:inline-block;
}

.gallery-popup {
    display:none;
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-color:rgba(0,4,29,1);
    z-index:6;
    overflow-x:auto;
    overflow-y:auto;
    height:100%;
    flex-direction:column
}

.gallery-close-container {
    min-height:2.5rem;
    flex-shrink:0;
}

.gallery-close, .gallery-close:hover {
    color:white;
    position:absolute;
    right:0.5rem;
    cursor:pointer;
    font-size:1.5rem;
    font-weight:bold;
}

.gallery-popup.visible {
    display:flex;
}

.gallery-inner-popup {
    color:white;
    word-break:break-word;
    min-width:100%;
    display:flex;
    align-items:center;
    flex: 1 1 auto;
    overflow-y: auto;
    height:0px;
}

.gallery-media {
    position: relative;
    min-width:45rem;
    max-width:45rem;
    min-height:26rem;
    max-height:26rem;
}

.gallery-media video, .gallery-media img {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin: auto;
    max-width:45rem;
    max-height:26rem;
}

.gallery-media iframe {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin: auto;
    min-width:40rem;
    max-width:40rem;
    min-height:26rem;
    max-height:26rem;
}

.gallery-media video {
    background-color:white;
}

.gallery-media-description {
    min-width:45rem;
    max-width:45rem;
}

::-webkit-scrollbar {
    width:10px;
    height:10px;
}

::-webkit-scrollbar-track {
    background:#f1f1f1;
}

::-webkit-scrollbar-thumb {
    background:#888;
}

::-webkit-scrollbar-thumb:hover {
    background:#555;
}

.close{position:absolute;top:0.3rem;right:0.5rem;cursor:pointer}

.transparent-close-container {
    padding-bottom:2rem;
}

.transparent-close, .transparent-close:hover {
    color:white;
    position:relative;
    font-size:2rem;
    cursor:pointer;
}

.success {color:#00cc00;}
.error {color:#ff0000;}


.planning-container {
    max-height:32rem;
    max-width:66rem;
    overflow:auto;
}

.planning tr th {
	min-width:4.5rem;
	max-width:4.5rem;
	height:3.4rem;
    padding:0;
    margin:0;
    border-right:0.05rem solid black;
}

.planning tr:first-child th {
    position:sticky;
    top:0;
    z-index:10000;
    background-color:#B1D0EF;
	min-width:8.6rem;
	max-width:8.6rem;
	border:none;
}

.planning tr:first-child th:first-child {
    position:sticky;
    top:0;
    z-index:10000;
    background:none;
    border:none;
	min-width:4.5rem;
	max-width:4.5rem;
}

.planning tr:last-child th {
	height:1rem;
    border:none;
    border-top:0.05rem solid black;
}

.planning tr:last-child th .time {
    margin-top:-1.9rem;
}

.planning tr td {
    padding:0rem;
    margin:0rem;
    min-height:100%;
    border-top:0.05rem solid black;
    border-right:0.05rem solid black;
    background-color:grey;
    vertical-align:top;
}

.day {
    text-align:center;
    color:purple;
    padding:0.2rem 0.5rem 0.5rem 0.5rem;
}

.time {
    margin-top:-3.8rem;
    color:purple;
    text-align:right;
    padding:1rem;
}

.event {
    padding:0rem 0.3rem 0.3rem 0.3rem;
	text-align:top;
    vertical-align:top;
    margin:0rem;
    top:0;
    bottom:0;
}

.event:hover, .event:focus, .event:active {
    text-decoration:none;
}

.no-event {
    width:8.6rem;
    height:4.1rem;
	background-color:grey;
	text-align:top;
    vertical-align:top;
    margin:0rem;
}

.event-img img, .wide-event-img img {
    max-width:100%;
    max-height:100%;
}

.event-text {
    margin-top:0.3rem;
    width:7.8rem;
    height:3.3rem;
    font-size:1rem;
    font-weight:600;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

#nowPlanning td, #todayPlanning td {
    padding-bottom:1rem;
}

.wide-event {
    cursor:pointer;
    padding:0.3rem;
    border:0.05rem solid black;
    text-align:top;
    vertical-align:middle;
    width:20rem;
    padding:0.5rem 0rem;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
}

.wide-event-img-container {
    display:none;
}

.wide-event-text {
    width:20rem;
    padding:0rem 0.5rem;
    font-weight:600;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    margin:0;
}

.wide-event-text p {
    margin-bottom:0rem;
    font-size:1.8rem;
}

.wide-event-text canvas {
    padding-top:0rem;
}

@media screen and (min-width:58.5rem){
    .wide-event {
        padding:0.8rem 0rem;
        min-width:55rem;
        max-width:55rem;
        min-height:26.6rem;
        max-height:26.6rem;
        -webkit-box-orient:horizontal;
        -ms-flex-direction:row;
        flex-direction:row;
    }

    .wide-event-img-container {
        display:block;
        min-width:25rem;
        max-width:25rem;
        min-height:25rem;
        max-height:25rem;
        background-color:black;
    }

    .wide-event-img {
        width:25rem;
        height:25rem;
        display:flex;
        padding:0.5rem;
        align-items:center;
        justify-content:center;
        overflow:hidden;
    }

    .wide-event-text-container {
        min-width:15rem;
        max-width:15rem;
    }

    .wide-event-text {
        width:15rem;
        padding:0.5rem;
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
        -ms-flex-direction:column;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        overflow:hidden;
        margin:0;
        position:absolute;
        top:50%;
        -ms-transform:translateY(-50%);
        transform:translateY(-50%);
    }

    .wide-event-text canvas {
        padding-top:1.6rem;
    }
}


@media screen and (min-width:74.5rem){
    .wide-event {
        padding:1.25rem 0rem;
        min-width:71.5rem;
        max-width:71.5rem;
        min-height:34rem;
        max-height:34rem;
    }

    .wide-event-img-container {
        min-width:31.5rem;
        max-width:31.5rem;
        min-height:31.5rem;
        max-height:31.5rem;
    }

    .wide-event-img {
        width:31.5rem;
        height:31.5rem;
    }

    .wide-event-text-container {
        min-width:20rem;
        max-width:20rem;
    }

    .wide-event-text {
        width:20rem;
    }

    .wide-event-text p {
        font-size:2.5rem;
    }
}

.task {
    color:#69a2ff;
    background-color:#052C5B;
    padding:0.4rem 0.4rem 0rem 0.4rem;
    margin:0.35rem;
    border:0.1rem solid purple;
    display:inline-block;
}

.task-img img {
    max-width:100%;
    max-height:100%;
}

.task-img {
    width:15rem;
    height:11.4rem;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.task-text {
    width:15rem;
    height:3.6rem;
    font-size:1.4rem;
    font-weight:600;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.task.add .task-text {
    line-height:1.6rem;
}

.favorite {
    position:absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    bottom:0.2rem;
    font-size:0.5rem;
    color:#FFD700;
    max-width:1rem;
}

.edit-task .favorite {
    cursor:default;
}

#header {
    background-color:#052C5B;
}

#main-menu {
    padding:0rem 0.8rem;
    z-index:100000;
}

#logo {
    padding:0rem;
    margin-right:0.5rem;
}

#profile-name {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    color:#00a8f3;
    font-size:1.1rem;
    margin-left:0.3rem;
    margin-right:0.8rem;
}

.user-header {
    /*background-color:#e00049!important;*/
}

.user-header #profile-name{
    /*color:black;*/
}

#profiles-back {
    margin-left:0.5rem;
    margin-right:0.5rem;
}

.nav-item {
    padding:0rem;
    text-align:center;
    vertical-align:middle;
    color:#fff;
}

.nav-item:not(.dropdown):hover{background-color:#074692;}

.nav-item.dropdown {
    padding:0rem;
}

.nav-item .navbar-brand {
    font-size:1.1rem;
    color:#fff;
    width:100%;
    height:100%;
    text-align: center;
    vertical-align: middle;
    padding:1rem 1rem;
    margin:0rem;
}

.nav-item .navbar-brand.active {
    -webkit-box-shadow:inset 0px -2px 0px 0px #fff;
    -moz-box-shadow:inset 0px -2px 0px 0px #fff;
    box-shadow:inset 0px -2px 0px 0px #fff;
}

.dropdown-menu {
    margin:0rem;
    padding:0rem;
    border-radius:0.6rem;
    background-color:#fff;
}

.dropdown-item {
    font-size:1.1rem;
    width:100%;
    height:100%;
    text-align:center;
    vertical-align:middle;
    color:#000000!important;
    padding:0.5rem 0.5rem!important;
}

.dropdown-toggle {
    padding:0rem;
}

.dropdown-toggle:after {
   content:none;
}

.dropdown-toggle i {
    font-size:1.5rem;
    color:#fff;
}

.dropdown-menu .dropdown-item:first-child:hover, .dropdown-menu .dropdown-item:first-child:focus, .dropdown-menu .dropdown-item.active:first-child{border-radius:0.65rem 0.65rem 0rem 0rem;}
.dropdown-menu .dropdown-item:last-child:hover, .dropdown-menu .dropdown-item:last-child:focus, .dropdown-menu .dropdown-item.active:last-child{border-radius:0rem 0rem 0.65rem 0.65rem;}

.dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active {
    background-color:#e5e5e5;
}

.dropdown-divider {
    margin:0rem;
}

#footer {
    background-color:#052C5B;
    color:#fff;
    text-align:center;
    margin: 0 auto;
    padding:0.5rem 1rem 1rem 1rem;
}

#footer nav a {
    color:#fff;
    text-decoration: none;
}

.horizontal-box {
    display:flex;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
    -ms-flex-direction:row;
    flex-direction:row;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    justify-content:space-between;
}

.min-width-box-sm div {
    min-width:4rem;
}

.min-width-box div {
    min-width:8rem;
}

.min-width-box-lg div {
    min-width:12rem;
}

.vertical-box {
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
    -ms-flex-direction:column;
    flex-direction:column;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;
    align-items:center;
    justify-content:center;
}

.library-image {
    cursor:pointer;
    max-width:16rem;
    max-height:12rem;
    margin:0.5rem;
}

.library-image-sm {
    cursor:pointer;
    max-width:12rem;
    max-height:8rem;
    margin:0.5rem;
}

.form-container {
    max-width:40rem;
    margin:auto;
}

.form-container-lg {
    max-width:45rem;
    margin:auto;
}

.footer-section {
    vertical-align:top;
    display:inline-block;
    list-style-type:none;
    padding:0rem;
    margin:0rem 1rem;
    min-width:11rem;
    max-width:11rem;
}

.footer-section li {
    margin-top:0.8rem;
}

.footer-section li a {
    padding-bottom:0.15rem;
}

.footer-section li a.active {
    border-bottom: 2px solid white;
}

#ucll-footer-logo {
    max-width:19rem;
}

@media screen and (min-width:25rem){
    #ucll-footer-logo {
        max-width:23rem;
    }
}

@media screen and (min-width:31rem){
    #ucll-footer-logo {
        max-width:27rem;
    }
}

.play-strip-button {
    min-width:3.3rem;
    max-width:3.3rem;
    min-height:3.3rem;
    max-height:3.3rem;
    line-height:3.3rem;
    padding-left:0.27rem;
    -moz-border-radius:50%;
    border-radius:50%;
    color:#fff;
    background-color:#052C5B;
    text-align:center;
    font-size:1.85rem;
    cursor:pointer;
    margin:0.7rem;
}

.remove-strip-cell-button {
    min-width:3.3rem;
    max-width:3.3rem;
    min-height:3.3rem;
    max-height:3.3rem;
    line-height:3.3rem;
    padding-right:0.15rem;
    -moz-border-radius:50%;
    border-radius:50%;
    color:#fff;
    background-color:#052C5B;
    font-size:1.7em;
    cursor:pointer;
    margin:0.7rem;
}

.reset-strip-button {
    min-width:3.3rem;
    max-width:3.3rem;
    min-height:3.3rem;
    max-height:3.3rem;
    line-height:3.3rem;
    -moz-border-radius:50%;
    border-radius:50%;
    color:#fff;
    background-color:#052C5B;
    text-align:center;
    font-size:1.7rem;
    cursor:pointer;
    margin:0.7rem;
}

.favorite-strip-button {
    min-width:2.7rem;
    max-width:2.7rem;
    min-height:2.7rem;
    max-height:2.7rem;
    line-height:2.7rem;
    padding-bottom:0.1rem;
    -moz-border-radius:50%;
    border-radius:50%;
    color:#fff;
    background-color:#052C5B;
    text-align:center;
    font-size:1.5rem;
    cursor:pointer;
}

.config-button {
    position:relative;
    min-width:2.7rem;
    max-width:2.7rem;
    min-height:2.7rem;
    max-height:2.7rem;
    line-height:2.7rem;
    -moz-border-radius:50%;
    border-radius:50%;
    color:#fff;
    background-color:#052C5B;
    text-align:center;
    font-size:1.6rem;
    cursor:pointer;
}

.back-button {
    position:absolute;
    top:0.5rem;right:0.5rem;
    color:#fff;
    font-size:1.6rem;
}

.stop-edit-button .fa-ban, .config-button .fa-ban {
    position:absolute;
    top:25%;
    left:25%;
    font-size:1.4rem;
    color:rgba(217, 83, 79, 0.9);
}

.stop-edit-button {
    position:relative;
    min-width:2.7rem;
    max-width:2.7rem;
    min-height:2.7rem;
    max-height:2.7rem;
    line-height:2.7rem;
    padding-bottom:0.1rem;
    -moz-border-radius:50%;
    border-radius:50%;
    color:#fff;
    background-color:#052C5B;
    text-align:center;
    font-size:1.5rem;
    cursor:pointer;
}

.edit-button, .remove-button {
    min-width:2.7rem;
    max-width:2.7rem;
    min-height:2.7rem;
    max-height:2.7rem;
    line-height:2.7rem;
    padding-bottom:0.1rem;
    -moz-border-radius:50%;
    border-radius:50%;
    color:#fff;
    background-color:#052C5B;
    text-align:center;
    font-size:1.5rem;
    cursor:pointer;
}

.edit-button-sm, .remove-button-sm {
    min-width:2rem;
    max-width:2rem;
    min-height:2rem;
    max-height:2rem;
    line-height:2rem;
    font-size:1rem;
}

.save-strip-button, .arrow-button {
    position:relative;
    min-width:2.7rem;
    max-width:2.7rem;
    min-height:2.7rem;
    max-height:2.7rem;
    line-height:2.7rem;
    -moz-border-radius:50%;
    border-radius:50%;
    color:#fff;
    background-color:#052C5B;
    text-align:center;
    font-size:1.6rem;
    cursor:pointer;
}

.save-strip-button .fa-ban {
    position:absolute;
    top:12%;
    left:13%;
    font-size:2rem;
    color:rgba(217, 83, 79, 0.9);
}

.arrow-button-sm {
    min-width:2rem;
    max-width:2rem;
    min-height:2rem;
    max-height:2rem;
    line-height:2rem;
    font-size:1.2rem;
}

.play-audio-button {
    min-width:2.5rem;
    max-width:2.5rem;
    min-height:2.5rem;
    max-height:2.5rem;
    -moz-border-radius:50%;
    border-radius:50%;
    color:#fff;
    background-color:#052C5B;
    text-align:center;
    font-size:1.6rem;
    cursor:pointer;
    margin:0.7rem;
}

.admin-list {
    overflow: auto;
    max-height: 26rem;
}

.green-button, .green-button:hover {
    color: #32c532;
    text-decoration: none;
}

.red-button, .red-button:hover {
    color: #d60b12;
    text-decoration: none;
}

.grey-button, .grey-button:hover {
    color: #b0b0b0;
    text-decoration: none;
}

i {
    cursor:pointer;
}

.admin-list td {
    padding:0.5rem 1rem;
}

.hyperlink{text-decoration:none;color:#2D84D9;cursor:pointer;}
.hyperlink:active, .hyperlink:focus, .hyperlink:hover{text-decoration:underline}

input[type=text] {
    width:20rem;
    padding:0.5rem;
    border-radius:10px;
    border-color:grey;
    text-align:center;
}

.field-input {
    min-width:92%;
    max-width:92%;
    padding:0.5rem;
    border-radius:10px;
    border-color:grey;
}

.field-input:focus, .fixed-field-input:focus, .large-field-input:focus, .small-field-input:focus, .tiny-field-input:focus, input[type=text]:focus {
    outline:none;
    border-color:#1573d1;
}

.fixed-field-input {
    min-width:17rem;
    max-width:17rem;
    padding:0.5rem;
    border-radius:10px;
    border-color:grey;
    text-align:center;
}

@media screen and (min-width:27rem){
    .fixed-field-input {
        min-width:20rem;
        max-width:20rem;
    }
}

@media screen and (min-width:35rem){
    .field-input {
        min-width:92%;
        max-width:92%;
    }
}

@media screen and (min-width:45rem){
    .field-input {
        min-width:95%;
        max-width:95%;
    }
}

.large-field-input {
    min-width:28rem;
    max-width:28rem;
    padding:0.5rem;
    border-radius:10px;
    border-color:grey;
    text-align:center;
}

.medium-field-input {
    min-width:17rem;
    max-width:17rem;
    padding:0.5rem;
    border-radius:10px;
    border-color:grey;
    text-align:center;
}

.small-field-input {
    min-width:11rem;
    max-width:11rem;
    padding:0.5rem;
    border-radius:10px;
    border-color:grey;
    text-align:center;
}

.tiny-field-input {
    min-width:7rem;
    max-width:7rem;
    padding:0.5rem;
    border-radius:10px;
    border-color:grey;
    text-align:center;
}

::-webkit-input-placeholder {
   text-align: center;
}

::-moz-placeholder {
   text-align: center;
}

:-ms-input-placeholder {
   text-align: center;
}

.medium-textarea { width:20rem;height:4.5rem;padding:.5rem 1rem;resize:none;border-radius:10px;border-color:grey; }

.large-textarea { width:20rem;height:7rem;padding:.5rem 1rem;resize:none;border-radius:10px;border-color:grey; }

.xlarge-textarea { width:20rem;height:12rem;padding:.5rem 1rem;resize:none;border-radius:10px;border-color:grey; }

.medium-textarea:focus, .large-textarea:focus, .xlarge-textarea:focus {
    outline:none;
    border-color:#1573d1;
}

.video {
    width:100%;
    height:100%;
}

.video-wrap {
    position:relative;
    width:100%;
    height:0;
    padding-bottom:56.25%;
}

.video-wrap-sm {
    position:relative;
    width:60%;
    height:0;
    padding-bottom:33%;
}

.video-wrap-md {
    position:relative;
    width:100%;
    height:0;
    padding-bottom:55%;
}

.video-wrap iframe, .video-wrap-sm iframe, .video-wrap-md iframe {
    position:absolute;
    top:0;
    left:0;
    right:0;
    margin:auto;
}

.data-table th, .data-table td {
    border:2px solid grey;
    padding:0.5rem 1rem;
}

.profile {
    cursor:pointer;
}

.profile-list {
    overflow: auto;
}

.profiles-list {
    overflow:auto;
    max-height:30rem;
}

.submenu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.submenu li{
    margin-left:0.5rem;
    margin-right:0.5rem;
    margin-top:0.5rem;
    margin-bottom:0.5rem;
    float:left;
}

.submenu li a {
  display: block;
  text-decoration: none;
}

.cookies-table {
    width: 100%;
    overflow: auto;
}

.cookies-table tbody {
    background:#fff;
}

.section {
    background:rgba(177,208,239,0.5);
    padding:1rem 0rem;
    border-radius:8px;
}

.padded-section {
    background:rgba(177,208,239,0.5);
    padding:1rem;
    border-radius:8px;
}

@media screen and (min-width:85rem){
    .section {padding:1.5rem 0rem;}
    .padded-section {padding:1.5rem;}
}

.window-container {
    padding:1rem;
    text-align:center;
    margin: 0 auto;
}

.window-container .btn-outline-primary {color:white}

@media screen and (min-width:85rem){
    .window-container {padding:1rem 2rem 1.5rem 2rem;}
}

.content-container {
    background-color:#fdfcfc;
    padding-top:1.5rem;
    padding-bottom:4rem;
    width:100%;
    -webkit-box-shadow:1px 4px 8px 1px rgba(0,5,30,.15);
    box-shadow:1px 4px 8px 1px rgba(0,5,30,.15);
}

.content-container-sm {
    padding-top:1rem;
    padding-bottom:3rem;
}

.overflow {
    overflow:auto;
}

.fixed-content {
    margin:0 auto;
    max-width:99%;
}

.content, .small-content, .large-content {
    margin:0 auto;
    max-width:93%;
}

@media screen and (min-width:60rem){
    .content {max-width:90%;}
    .small-content {max-width:85%;}
    .large-content {max-width:93%;}
}

@media screen and (min-width:75rem){
    .content {max-width:85%;}
    .small-content {max-width:70%;}
}

@media screen and (min-width:85rem){
    .content {max-width:75%;}
    .small-content {max-width:55%;}
    .large-content {max-width:93%;}
}

@media screen and (min-width:98rem){
    .large-content {max-width:85%;}
}

@media screen and (min-width:112rem){
    .large-content {max-width:75%;}
}

.sub-header-container {
    background:#DEACF1;
    padding-top:1rem;
    padding-bottom:1rem;
    width:100%;
}

.sub-header {
    margin:0 auto;
    max-width:75%;
}

.sub-header h2 {
    margin:0rem;
}

.accordion-button {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
}

.accordion-button.is-active, .accordion-button:hover {
    background-color: #ccc;
}

.accordion-button:after {
    content: '\02795';
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
}

.accordion-button.is-active:after {
    content: "\2796";
}

.accordion-panel {
    padding:1rem;
}

#color, #color option {
    font-size:1.2rem;
}

.add {
    background-color:#052C5B;
    color:#008c46!important;
}

.dark-blue-bg {
    background-color:#08306e;
    color:white!important;
}

.blue-bg {
    background-color:#69a2ff;
    color:black!important;
}

.orange-bg {
    background-color:#e6ac00;
    color:black!important;
}

.green-bg {
    background-color:#008c46;
    color:white!important;
}

.purple-bg {
    background-color:#4d0a66;
    color:white!important;
}

.red-bg {
    background-color:#870744;
    color:white!important;
}

.azure-bg {
    background-color:#0ba3b8;
    color:white!important;
}

.dark-blue-bg .edit-overlay, .dark-blue-bg .link-overlay, .dark-blue-bg .remove-overlay, .dark-blue-bg .tracker-overlay {
    color:white!important;
}

.blue-bg .edit-overlay, .blue-bg .link-overlay, .blue-bg .remove-overlay, .blue-bg .tracker-overlay {
    color:black!important;
}

.orange-bg .edit-overlay, .orange-bg .link-overlay, .orange-bg .remove-overlay, .orange-bg .tracker-overlay {
    color:black!important;
}

.green-bg .edit-overlay, .green-bg .link-overlay, .green-bg .remove-overlay, .green-bg .tracker-overlay {
    color:white!important;
}

.purple-bg .edit-overlay, .purple-bg .link-overlay, .purple-bg .remove-overlay, .purple-bg .tracker-overlay {
    color:white!important;
}

.red-bg .edit-overlay, .red-bg .link-overlay, .red-bg .remove-overlay, .red-bg .tracker-overlay {
    color:white!important;
}

.azure-bg .edit-overlay, .azure-bg .link-overlay, .azure-bg .remove-overlay, .azure-bg .tracker-overlay {
    color:white!important;
}

.selected-bg {
    background-color:black;
    color:white!important;
    opacity:1;
}

.selected-bg .link-overlay {
    color:white!important;
}

.fabutton {
    background:none;
    padding:0px;
    border:none;
}

.column-icon {
    cursor:default;
}

.green {
    color:#339933;
}

.red {
    color:#d9534f;
}

.selected-sentence-strip-cell {
    color:white!important;
    background-color:black!important;
}

.loader-container {
     position:relative;
}

.loader {
    position: absolute;
    top:50%;
    left:50%;
    margin-top:-50px;
    margin-left:-50px;
    width:100px;
    height:100px;
    border:12px solid #f3f3f3;
    border-top:12px solid #3498db;
    border-radius:50%;
    animation:spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}