.padded {
    padding: 1rem;
}

.padded-top {
    padding-top: 1rem;
}
.padded-left {
    padding-left: 1rem;
}
.padded-right {
    padding-right: 1rem;
}
.padded-bottom {
    padding-bottom: 1rem;
}


.icon {
    width: 50px;
    height: auto;
}

.icon-100 {
    width: 100px;
    height: auto;
}

/*Accordion*/

.accordion {
    transition: 0.5s;
}

.accordion * {
    transition: .25s;
}

.accordion-content {
    display: none;
}

.accordion-header:hover {
    cursor: pointer;
    color: blue;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.25);
}

.accordion-tab {
    padding: 1rem 0.5rem 1rem 1rem;
    background: #ccc;
}

.accordion-tab.active {
    background: #eee;
}

.accordion-tab.active>.accordion-header {
    font-family: 'arial rounded bold';
}

.accordion-tab.active>.accordion-header:hover {
    cursor: auto;
    color: black;
    text-shadow: none;
}

.accordion-tab.active>.accordion-content {
    display: block;
    padding-left: 1rem;
}

sup:hover {
    cursor: pointer;
}

.img-caption {
    background: black;
    color: white;
    text-align: center;
    padding: 5px 2px;
}

.img-fill {
    width: 100%;
    height: auto;
}

.img-fill-height {
    height: 100%;
    width: auto;
}

.no-decoration {
    list-style: none;
}

.padded-left {
    padding-left: 1rem;
}

.img-rounded {
    width: 100%;
    height: auto;
    border-radius: 50%;
}

.team-member:hover {
    cursor: pointer;
}

.greeting {
    padding: 1rem;
    text-align: center;
    font-family: 'arial rounded bold';
    font-size: 2rem;
    margin: 1rem;
    border-radius: 10px;
}

.greeting:empty {
    display: none;
}

.search-selector:empty {
    display: none;
}

.search-selector {
    position: static;
    z-index: 2000;
    max-height: 200px;
    width: 90%;
    overflow-x: hidden;
    overflow-y: scroll;
    border-radius: 5px;
    border: solid 0.5px #333;
    padding: 5px;
}

.search-selector * {
    width: 100%;
}

.search-selector *:active {
    background: #8cf;
    color: blue;
}

.toolbox {
    display: none;
}

.toolbox.active {
    display: block;
}

.pointer:hover {
    cursor: pointer;
    color: #555;
}

.pointer {
    color: #0275d8;
}

.tab-panel div[class^='col'] {
    text-align: center;
    color: #777;
    background-color: #aaa;
    padding: 1rem;
    border-radius: 15px 15px 0 0;
    border: solid 0.5px #777;
}

.tab-panel div[class^='col']:hover {
    cursor: pointer;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.25);
    color: #333;
    border: solid 0.5px #333;
}

.tab-panel div[class^='col'].active {
    color: #fff;
    background: linear-gradient(#18AFFF, #0E208C);
    box-shadow: 0 -1px 2px 2px rgba(0,0,0,0.25);
    z-index: 100;
    
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.drawer {
    position: fixed;
    width: 300px;
    padding: 0.5rem;
    top: 0;
    left: -300px;
    background-color: rgba(0,0,0,0.85);
    color: #ccc;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    transition: 1s;
/*    opacity: 0;*/
    z-index: 100;
    height: 100%;
}

.drawer.active {
    left: 0;
}
.drawer-toggler {
    position: relative;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    text-align: center;
    left: 300px;
    background-color: rgba(0,0,0,0.85);
    transform: rotate(90deg);
    transform-origin: 3%;
    padding: 0.25rem;
    width: 50%;
    
}

.drawer-toggler:hover {
    cursor: pointer;
    background-color: rgba(50,50,50,0.85);
}

.drawer-toggler:active {
    background-color: rgba(250,250,250,1);
    color: #333;
}

.drawer-content {
    position: relative;
    top: -10px;
    height: calc(100% - 1.5rem);
    width: 100%;
    overflow-y: scroll;
    
}

.drawer-content ul {
    list-style: none;
}

.drawer-btn {
    width: 95%;
}

.drawer hr {
    background: #fff;
}

.drawer .title:hover {
    font-weight: bolder;
    color: #fff;
    cursor: pointer;
}

.container-full-screen {
    height: 100vh;
    width: 100vw;
    position: relative;
}

.scroller {
    overflow: scroll;
}

.scroller-transverse {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}


.scroller-vertical {
    overflow-x: hidden;
    overflow-y: scroll;
}

.container-fill-height {
    height: 100%;
}

.float-bubble {
    z-index: 100;
    position: absolute;
}

.float-btn {
    z-index: 100;
    position: absolute;
    box-shadow: 2px 2px 4px 4px rgba(0,0,0,0.25);
    
}

.float-btn:active {
    box-shadow: none;
    background: #666;
}

.top-floater {
    top: 1rem;
    bottom: none;
}
.bottom-floater {
    bottom: 1rem;
    top: none;
}


.right-floater {
    right: 1rem;
}

.right-floater .right-left-toggler, .right-floater .up-down-toggler {
    float: left;
}

.left-floater .right-left-toggler, .left-floater .up-down-toggler {   
    float: right;
}

.left-floater {
    left: 1rem;
}

.slide-card {
    margin: 1rem 0.5rem;
    padding: 0rem 1rem 1rem 1rem;
    position: relative;
    border: solid 0.5px #aaa;
    border-radius: 15px;
    counter-increment: slideIndex;
}

.delete-slide-btn {
    background: red;
    color: white;
    
    top: 0.5rem;
    right: 0.5rem;
}

.move-down-btn {
    top: 0.5rem;
    right: 3rem;
}

.move-up-btn {
    top: 0.5rem;
    right: 5.5rem;
}



.slide-btn {
    width: 2rem;
    height: 2rem;
    border-radius: 1rem;
    padding: 0.4rem 0.5rem 0.5rem 0.5rem;
    position: absolute;
    text-align: center;
}

.slide-btn:hover {
    cursor: pointer;
    box-shadow: 0 0 2px 2px rgba(0,0,0,0.25);
}

.slide-img {
    margin: 1rem 0;
}

.slide-card:first-child .move-up-btn {
    display: none;
}

.slide-card:last-child .move-down-btn {
    display: none;
}

.slide-card::before {
    content: "Slide " counter(slideIndex)  ":";
    font-size: 2rem;
}

.rating-star {
    width: 18%;
    max-width: 20px;
    height: auto;
    margin: 1%;
}

.border-grey {
    border: solid 0.5px #999;
}
.border-white {
    border: solid 0.5px #fff;
}
.border-black {
    border: solid 0.5px #000;
}
.border-red {
    border: solid 0.5px #f00;
}
.display-center {
    display: block;
    margin: auto;
}
.cursor-parent {
    position: relative;
    cursor: none;
}
.cursor {
    position: fixed;
    display: none;
    
}

.cursor-parent:hover .cursor {
    display: block;
    z-index: 1000;
}

.margined {
    margin: 1rem;
}

/* Clock */
#minutes-hand {
    transform: rotate(-90deg);
    transform-origin: 3px 4.5px;
}
#seconds-hand {
    transform: rotate(-90deg);
    transform-origin: 0.5px 0.5px;
    box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.25);
}

#digital-clock {
    position: relative;
    width: 134px;
    height: 44px;
    padding: 1px;
    background: #eee;
    border-radius: 5px;
    left: 35px;
    top: 120px;
    box-shadow: 0 0 2px 2px rgba(0,0,0,0.25);
}

.digit {
    width: 20px;
    height: 40px;
    margin: 1px 1px;
/*    background: #333;*/
    display: inline-block;
    position: relative;
}

.digit-divider {
    width: 10px;
    height: 40px;
    margin: 1px 2px;
    display: inline-block;
    position: relative;
}

.digit-bar {
    height: 4px;
    width: 12px;
    position: absolute;
    background: #333;
    left: 4px;
    border-radius: 2px;
} 
.digit-bar.top {
    top: 0px; 
}
.digit-bar.middle {
    top: 18px;
}
.digit-bar.bottom {
    top: 36px; 
}

.digit-pillar {
    width: 4px;
    height: 12px;
    position: absolute;
    background: #333;
    border-radius: 2px;
}
.digit-pillar.top {
    top: 4px;
}
.digit-pillar.bottom {
    top: 24px;
}
.digit-pillar.left {
    left: 0px;
}
.digit-pillar.right {
    left: 16px;
}

.divider-dot {
    height: 4px;
    width: 4px;
    border-radius: 2px;
    position: absolute;
    background: #333;
    left: 2px;
}
.divider-dot.top {
    top: 12px;
}

.divider-dot.bottom {
    top: 28px;
}

.selected {
    border: solid 1px #F00;
}

.progress-bar {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 20px;
}

.drawer li {
    padding-bottom: 0.25rem;
    border-bottom: 0.5px solid rgba(255,255,255,0.25);
}