/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  /* Set the fixed height of the footer here */
  height: 60px;
  line-height: 60px; /* Vertically center the text there */
}

.overlay {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-color: #393e46;
}

    .overlay .box {
        width: 80%;
        margin: 0 auto;
        height:2600px;
        background-color: #ffffff;
        margin-top: 10px;
        border-radius: 10px;
        text-align: center;
    }

        .overlay .box .head-name {
            padding-top: 20px;
            text-align: center;
            color: #393e46;
            font-weight: bold;
        }

        .overlay .box .name-field {
            margin: 0px auto;
            margin-top: 20px;
            border: 0;
            font-weight: bold;
            padding: 10px;
            width: 90%;
            border-bottom: 3px solid #4ecca3;
            color: #393e46;
            height: 40px;
        }

            .overlay .box .name-field:focus {
                outline: none;
            }

        .overlay .box .continue-name {
            border: none;
            margin: 0 auto;
            margin-top: 30px;
            color: #ffffff;
            font-weight: bold;
            background-color: #4ecca3;
            padding: 12px 20px;
            border-radius: 10px;
            transition: opacity 0.5s;
        }

            .overlay .box .continue-name:hover {
                opacity: 0.8;
                cursor: pointer;
            }

            .overlay .box .continue-name:focus {
                outline: 0;
            }


.main {
    display: flex;
    /*padding: 0 12%;*/
    padding: 0 0;
    margin-top: 5vh;
    width: 100%;    
}

    .main .create-join {
        width: 85%;
        margin-right: 50px;
    }

        .main .create-join .text .head {
            font-size: 36px;
            font-weight: bold;
            color: #393e46;
        }

        .main .create-join .text .subtext {
            font-size: 24px;
            color: #6f6f6f;
            margin-top: 10px;
        }

        .main .create-join .createroom-butt {
            width: 100%;
            margin-top: 60px;
            font-size: 24px;
            font-weight: bold;
            background-color: #4ecca3;
            color: white;
            text-align: center;
            padding: 10px 20px;
            border: none;
            border-radius: 10px;
            border: 2px solid #4ecca3;
            transition: 0.3s;
        }

            .main .create-join .createroom-butt:hover {
                background-color: white;
                border: 2px solid #4ecca3;
                color: #4ecca3;
                cursor: pointer;
            }

            .main .create-join .createroom-butt:focus {
                outline: none;
            }

        .main .create-join .createroom-clicked {
            width: 100%;
            margin-top: 60px;
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            padding: 10px 20px;
            border: none;
            border-radius: 10px;
            background-color: white;
            border: 2px solid #4ecca3;
            color: #4ecca3;
        }

            .main .create-join .createroom-clicked:focus {
                outline: none;
            }

        .main .create-join .roomcode {
            width: 100%;
            margin-top: 30px;
            font-size: 24px;
            color: #393e46;
            text-align: center;
            padding: 10px 0;
            border: none;
            border-bottom: 3px solid #232931;
            border-top: 2px solid white;
            font-weight: bold;
        }

            .main .create-join .roomcode:focus {
                background-color: white;
                border: 0;
                border-bottom: 3px solid #232931;
                border-top: 2px solid white;
                outline: none;
                border-radius: 0;
            }

        .main .create-join .roomcode-error {
            border-bottom: 3px solid #d31c1c;
        }

        .main .create-join .joinroom {
            margin-top: 20px;
            width: 100%;
            text-align: right;
            font-size: 24px;
            font-weight: bold;
            color: #232931;
        }

            .main .create-join .joinroom:hover {
                cursor: pointer;
                text-decoration: underline;
            }

    .main .video-cont {
        width: 100%;
        text-align: center;
    }

.main .video-cont .video-self {
  height: 400px;
  width: 100%;
  background-color: #393e46;
  border-radius: 10px;
  object-fit: cover;
}
.main .video-cont .settings {
  margin: 0 auto;
  display: flex;
  margin-top: 10px;
  width: 100px;
}
.main .video-cont .settings .device {
  background-color: #4ecca3;
  border-radius: 100px;
  padding: 10px;
  width: 40px;
  height: 40px;
  margin-right: 10px;
  color: white;
}
.main .video-cont .settings .device:hover {
  background-color: #393e46;
  cursor: pointer;
}
.main .video-cont .settings .nodevice {
  background-color: #b12c2c;
  border-radius: 100px;
  padding: 10px;
  width: 40px;
  height: 40px;
  margin-right: 10px;
  color: white;
}
.main .video-cont .settings .nodevice:hover {
  background-color: #393e46;
  cursor: pointer;
}

/*canvas {
    border: 1px solid black;
    border-radius: 10px;
    width: 500px;
    height: 500px;
}*/

/*#oggettoMobile {
    background-color: #ad2624;
    width: 100px;
    height: 100px;
    border-radius: 50px;
    position: relative;
    cursor: pointer;
}*/

/*.overlay img {
    z-index: 2
}*/


.outer-container {
    border: 1px dotted black;
   /* width: 100%;
    height: 100%;*/
    text-align: center;
}

.inner-container {
    border: 1px solid black;
    display: inline-block;
    position: relative;
}

.video-overlay {
    position: absolute;
    left: 0px;
    top: 0px;
    margin: 0px;
    padding: 0px 0px;
    width:20px;
    height:20px;
    background-color: rgba(0, 250, 0, 0.8);
    border-radius:10px;
}

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


.overlay .whiteboard-cont {
    height: 85vh;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    padding: 50px;
    padding-bottom: 0;
    /*min-height: 600px;*/
}

    .overlay .whiteboard-cont #whiteboard {
        background-color: white;
        border-radius: 10px;
        border: 1px solid gray;
    }

    .overlay .whiteboard-cont .colors-cont {
        position: absolute;
        right: 80px;
        top: 80px;
        display: flex;
        flex-direction: column;
    }

        .overlay .whiteboard-cont .colors-cont .black {
            height: 30px;
            width: 30px;
            border-radius: 50px;
            background-color: black;
            margin-top: 10px;
            margin-left: 4px;
        }

            .overlay .whiteboard-cont .colors-cont .black:hover {
                cursor: pointer;
            }

        .overlay .whiteboard-cont .colors-cont .red {
            height: 30px;
            width: 30px;
            border-radius: 50px;
            background-color: #e74c3c;
            margin-top: 10px;
            margin-left: 4px;
        }

            .overlay .whiteboard-cont .colors-cont .red:hover {
                cursor: pointer;
            }

        .overlay .whiteboard-cont .colors-cont .yellow {
            height: 30px;
            width: 30px;
            border-radius: 50px;
            background-color: #f1c40f;
            margin-top: 10px;
            margin-left: 4px;
        }

            .overlay .whiteboard-cont .colors-cont .yellow:hover {
                cursor: pointer;
            }

        .overlay .whiteboard-cont .colors-cont .green {
            height: 30px;
            width: 30px;
            border-radius: 50px;
            background-color: #badc58;
            margin-top: 10px;
            margin-left: 4px;
        }

            .overlay .whiteboard-cont .colors-cont .green:hover {
                cursor: pointer;
            }

        .overlay .whiteboard-cont .colors-cont .orange {
            height: 30px;
            width: 30px;
            border-radius: 50px;
            background-color: #e67e22;
            margin-top: 10px;
            margin-left: 4px;
        }

            .overlay .whiteboard-cont .colors-cont .orange:hover {
                cursor: pointer;
            }

        .overlay .whiteboard-cont .colors-cont .purple {
            height: 30px;
            width: 30px;
            border-radius: 50px;
            background-color: #9b59b6;
            margin-top: 10px;
            margin-left: 4px;
        }

            .overlay .whiteboard-cont .colors-cont .purple:hover {
                cursor: pointer;
            }

        .overlay .whiteboard-cont .colors-cont .blue {
            height: 30px;
            width: 30px;
            border-radius: 50px;
            background-color: #3498db;
            margin-top: 10px;
            margin-left: 4px;
        }

            .overlay .whiteboard-cont .colors-cont .blue:hover {
                cursor: pointer;
            }

        .overlay .whiteboard-cont .colors-cont .pink {
            height: 30px;
            width: 30px;
            border-radius: 50px;
            background-color: #fd79a8;
            margin-top: 10px;
            margin-left: 4px;
        }

            .overlay .whiteboard-cont .colors-cont .pink:hover {
                cursor: pointer;
            }

        .overlay .whiteboard-cont .colors-cont .brown {
            height: 30px;
            width: 30px;
            border-radius: 50px;
            background-color: #834c32;
            margin-top: 10px;
            margin-left: 4px;
        }

            .overlay .whiteboard-cont .colors-cont .brown:hover {
                cursor: pointer;
            }

        .overlay .whiteboard-cont .colors-cont .grey {
            height: 30px;
            width: 30px;
            border-radius: 50px;
            background-color: gray;
            margin-top: 10px;
            margin-left: 4px;
        }

            .overlay .whiteboard-cont .colors-cont .grey:hover {
                cursor: pointer;
            }

        .overlay .whiteboard-cont .colors-cont .eraser {
            height: 30px;
            width: 30px;
            font-size: 26px;
            margin-top: 10px;
            margin-left: 4px;
            color: #2b2b2b;
        }

            .overlay .whiteboard-cont .colors-cont .eraser:hover {
                cursor: pointer;
            }

        .overlay .whiteboard-cont .colors-cont .clearboard {
            height: 30px;
            width: 30px;
            font-size: 26px;
            margin-top: 10px;
            margin-left: 4px;
            color: #2b2b2b;
        }

            .overlay .whiteboard-cont .colors-cont .clearboard:hover {
                cursor: pointer;
            }