@import url("font-awesome.min.css");

.carousel-indicators .active {
    background-color: #AAA !important;
}

.carousel-indicators li {
    background-color: #CCC !important;
}

.carousel-control-prev-icon {
    filter: invert(100%);
}

.carousel-control-next-icon {
    filter: invert(100%);
}

.collapse {
    display: block !important;
}

.bg-dark {
    background-color: #343a40 !important;
}

.navbar-dark .navbar-brand {
    color: #fff;
}

#accessCode {
    user-select: all;
}

.questionBlock {
    margin-bottom: 10px;
}

.answerGroup {
    margin-left: 30px;
    display: inline-block;
    width: 100%;
}

.w3-modal-content {
    transition: width 0.4s;
}

.modal-left {
    background-color: #fff;
    padding: 0;
    outline: 0;
    border-radius: 8px;
    border:none;
    height: 750px;
    display: inline-block;
    left: 0;
    width: 0;
    transition: width 0.4s;
    float: left;
    margin-top: 10px;
}

.vl {
    border-left: 1px solid #CCC;
    height: 600px;
    position: absolute;
    left: 50%;
    margin-left: -3px;
    top: 10px;
}

.modal-left .w3-modal-header {
    padding: 0;
    width: 0;    
    white-space: nowrap;
    overflow: hidden;
    transition: width 0.4s;
    text-align: center;
    background-color: #BBB;
}

.btn-primary.sideButton {
    float: left;
    z-index: 1;
    margin-top: 10px;
    margin-left: 10px;
    color: #FFF !important;
}

.modal-left.sideOpen .w3-modal-header {
    /* width: 299px;*/
    width: 339px;
}

.modal-left.sideOpen {
    width: 340px;
    border: solid #BBB 1px;
}

.w3-modal-content.sideOpen {
    width: 1220px !important;
}

.compassCanvas {
    margin-left: 30px;
    margin-top: -70px;
}

.sideContainer {
    width: 0;
}

.sideOpen .sideContainer {
    width: auto;
}

.candidateDiv {
    width: 0;
    height: 0;
    overflow: hidden;
    padding: 5px;
    margin: 5px;
    border-radius: 5px;
    border: 0;
    position: relative;
}

.sideOpen .candidateDiv {
    border: solid #BBB 3px;
    height: 58px;
    width: 97%;
}

.candidateName {
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    width: 0;
    position: absolute;
    top: 15px;
    left: 10px;
}

.scrollPanel {
    overflow-y: hidden;
    height: 692px;

}

.sideOpen .scrollPanel {
    overflow-y: scroll;
}

.sideOpen .candidateName {
    width: 220px;
    transition: width 0.4s;
}

.sideOpen .buttonContainer {
    width: 110px;
    transition: width 0.4s;
}

.buttonContainer {
    width: 0;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    right: 0;
}

@media (max-width: 993px) {
    .sideButton {
        visibility: hidden;
    }
}

.hidden {
    display: none;
}

.editBlock {
    height: 0;
    margin: 20px;
    transition-timing-function: ease-in-out;
    -webkit-transition: height 0.5s;
    transition: height 0.5s;
    overflow: hidden;
    margin-bottom: 0;
}

.editBlock.shown {
    height: 40px;
}

.editBlock.shown.colorPicker {
    height: 110px;
}

.w3-modal#myModal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 20; /* Sit on top */
    padding-top: 35px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Header */
.w3-modal-header {
    padding: 2px 16px;
    background-color: #DDD;
    color: white;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

/* Modal Body */
.w3-modal-body {
    padding: 2px 16px;
    width:100%;
}

/* Modal Footer */
.w3-modal-footer {
    padding: 2px 16px;
    background-color: #DDD;
    color: white;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

#modal-footer {
    margin: auto;
    display: table;
}

/* Modal Content */
.w3-modal-content {
    position: relative;
    border-radius: 5px;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s;
}

#keyCanvas {
    background-color: #FFF;
    width: 402px;
    height: 400px;
    transform: rotate(-270deg);
    overflow-y: scroll;
}

.square {
    height: 40px;
    width: 40px;
    border: 1px solid #000;
    float: left;
    margin: 10px;
    margin-right: 0px;
}

.squareContainer {
    float: left;
}

.squareContainer input {
    margin: 10px;
    float: left;
    height: 40px;
    width: 215px;
}

.teamTag.key {
    right: -175px;
    bottom: 50%;
    transform: rotate(-90deg);
    -webkit-transition: right 0.5s;
    transition: right 0.5s;
}

.teamTag {
    height: 50px;
    width: 402px;
    background: #343a40;
    position: fixed;
    right: 60px;
    bottom: 0;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    color: #FFF;
    text-align: center;
    font-size: 20px;
    line-height: 45px;
    z-index: 20;
    -webkit-transition: height 0.5s;
    transition: height 0.5s;
}

.key.teamTag:hover {
    right: -100px;
    height: 50px;
}

.key.teamTag.hovered {
    right: -100px;
    height: 50px;
}

.key.teamTag.open {
    right: 100px;
    height: 50px;
}

.teamTag:hover {
    height: 100px;
}

.teamTag.hovered {
    height: 100px;
}

.teamTag.open {
    height:445px;
}

.deleteBtn {
    height: 50px;
    width: 0;
    background: #ff1a1a;
    position: fixed;
    right: 0px;
    top: 60px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    color: #FFF;
    text-align: center;
    font-size: 20px;
    line-height: 45px;
    z-index: 20;
    -webkit-transition: width 0.2s;
    transition: width 0.2s;
}

#virtualTeam {
    background-color: #FFF;
    color: #333;
    height: initial;
    width: 400px;
}

.dot {
    height: 20px;
    width: 20px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    left: -100px;
    top: -100px;
    z-index: 20;
}

html {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

body {
    background: #fff;
}

.vis-network {
    background: #FFF;
}

.col-sm-2 {
    margin-top: 15px;
}

.form-control {
    margin-top: 5px;
}

select.form-control {
    margin-right: 5px;
}

.group {
    background: #DDD;
    margin-top: 10px;
    padding: 10px;
    border-radius: 5px;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Carousel */
.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}

/* Make .svg files in the carousel display properly in older browsers */
.carousel-inner .item img[src$=".svg"] {
    width: 100%;
}

/* QR code generator */
#qrCode {
    margin: 15px;
}

.loader {
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #286c9a;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}

#loaderContainer {
    position: absolute;
    left: 47%;
    top: 45%;
    z-index: 1;
    text-align: center;
}
input[type=range] {
    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
    width: 100%; /* Specific width is required for Firefox. */
    background: transparent; /* Otherwise white in Chrome */
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
}

input[type=range]:focus {
    outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-ms-track {
    width: 100%;
    cursor: pointer;
    /* Hides the slider so custom styles can be added */
    background: transparent;
    border-color: transparent;
    color: transparent;
}
/* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 1px solid #000000;
    height: 36px;
    width: 16px;
    border-radius: 3px;
    background: #ffffff;
    cursor: pointer;
    margin-top: -14px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
}

/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
    border: 1px solid #000000;
    height: 36px;
    width: 16px;
    border-radius: 3px;
    background: #ffffff;
    cursor: pointer;
}

/* All the same stuff for IE */
input[type=range]::-ms-thumb {
    border: 1px solid #000000;
    height: 36px;
    width: 16px;
    border-radius: 3px;
    background: #ffffff;
    cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    background: #3071a9;
    border-radius: 1.3px;
    border: 0.2px solid #010101;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #367ebd;
}

input[type=range]::-moz-range-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    background: #3071a9;
    border-radius: 1.3px;
    border: 0.2px solid #010101;
}

input[type=range]::-ms-track {
    width: 100%;
    height: 8.4px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    border-width: 16px 0;
    color: transparent;
}

input[type=range]::-ms-fill-lower {
    background: #2a6495;
    border: 0.2px solid #010101;
    border-radius: 2.6px;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

input[type=range]:focus::-ms-fill-lower {
    background: #3071a9;
}

input[type=range]::-ms-fill-upper {
    background: #3071a9;
    border: 0.2px solid #010101;
    border-radius: 2.6px;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

input[type=range]:focus::-ms-fill-upper {
    background: #367ebd;
}

/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
    /* Hide captions */
    .carousel-caption {
        display: none;
    }
}

@media screen and (max-width: 1025px) {
    .scrollPanel {
        height: 607px;
    }

    .modal-left {
        height: 665px;

    }

    .compassCanvas {
        margin-top: -45px;
    }

    .sideOpen .compassCanvas {
        margin-top: 15px;
    }

    .group {
        display: none;
    }

    .carousel-control-next {
        display: none;
    }

    .carousel-control-prev {
        display: none;
    }

    .carousel-indicators {
        display: none;
    }

    .carousel-caption {
        bottom: 0px;
    }

    #virtualTeam {
        height: initial;
        width: 400px;
    }

    .teamTag.open {
        height:445px;
    }

    .teamTag {
        width: 402px;
    }
}

@media (max-width: 801px) {
    .w3-modal-content {
        width: 700px !important;
    }

    canvas {
        width: 620px;
    }

    .dot {
        height: 17px;
        width: 17px;
    }
}
