/*

SCREEN

*/

/* Import */
@import "reset.less";
@import "elements.less";

/* Variables */

@uitvaartBodyBackgroundBruin: #7E5B40;
@uitvaartDonkerBruin        : #483931;
@uitvaartGold               : #c59f73;

body {
  height                 : 100%;
  background-color       : @uitvaartBodyBackgroundBruin;
  background             : no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size   : cover;
  -o-background-size     : cover;
  background-size        : cover;
  font-family            : helvetica, arial, sans-serif;
  overflow               : auto;
}

.navbar-nav {
  // background-color: @uitvaartDonkerBruin;
  margin       : 0;
  padding      : 0;
  border-radius: 15px;
}

.nav-link {
  background-color: @uitvaartDonkerBruin;
  border-left     : @uitvaartBodyBackgroundBruin 1px solid;
  border-bottom   : @uitvaartBodyBackgroundBruin 1px solid;
  padding-left    : 10px;
  color           : white;
  padding-left    : 10px !important;
  padding-right   : 10px !important;
  margin-left     : 8px;
  margin-right    : 8px;

  border-radius: 5px;
}

.nav-link:hover {
  background-color: white;
  color           : @uitvaartDonkerBruin;
}

.nav-link.dropdown-toggle:hover {
  background-color: white;
  color           : @uitvaartDonkerBruin;
}

nav ul :active {
  background-color: white;
  color           : @uitvaartBodyBackgroundBruin;
}

nav ul li a {
  color: white;
}

nav a :hover {
  color: @uitvaartBodyBackgroundBruin;
}

nav .dropdown-menu,
nav .dropdown-item {
  background-color: @uitvaartDonkerBruin;
  color           : white;
}

nav .dropdown-menu:not(:last-child),
nav .dropdown-item:not(:last-child) {
  border-bottom: @uitvaartBodyBackgroundBruin 1px solid;
}

//Logo/person poly, cirlcle, square
.img_style_poly {
  clip-path  : polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
  //clip-path: circle(50% at 50% 50%);
}

.img_style_round {
  clip-path: circle(50% at 50% 50%);
}

.img_style_square {
  clip-path: none !important;
}

.color_preview {
  margin-left: 2px;
  padding-top: 3px;
  padding-left: 20px;
  border: solid 1px lightgray;

}

h2 {
  background-color: #ffffff;
  color           : @uitvaartDonkerBruin;
  padding         : 15px;
  margin          : 10px 0;
  border-radius   : 3px;
}

#videoHolder {
  position   : absolute;
  width      : 900px;
  height     : 500px;
  top        : 50%;
  left       : 50%;
  margin-top : -250px;
  margin-left: -450px;
  clear      : both;
}

video,
.my-video-dimensions {
  height    : 500px;
  width     : 600px;
  display   : block;
  background: #000000;
  box-sizing: border-box;
  float     : left;
}

article#videoSideNote {
  height                    : 500px;
  width                     : 300px;
  background                : rgba(255, 255, 255, .5);
  display                   : block;
  float                     : left;
  box-sizing                : border-box;
  float                     : right;
  padding                   : 30px;
  border-top-right-radius   : 20px;
  border-bottom-right-radius: 20px;
}

article img#logo {
  border-radius: 5px;
  margin-bottom: 10px;
}

article img#overledene {
  border       : 3px solid #000000;
  height       : 240px;
  width        : 240px;
  box-sizing   : border-box;
  margin-bottom: 10px;
}

article#videoSideNote p {
  font-size  : 18px;
  font-weight: bold;
}

article#videoSideNote a {
  border-radius   : 5px;
  display         : block;
  width           : 70%;
  margin          : 15px auto;
  font-size       : 14px;
  padding         : 10px 5px;
  text-align      : center;
  font-weight     : bold;
  background-color: #483931;
  text-decoration : none;
  color           : #ffffff;
}

#logoutButton,
.logoutButton {
  background-color: @uitvaartDonkerBruin  !important;
  border-color    : @uitvaartDonkerBruin  !important;
  text-decoration : none;
}


.btn-brown {
  background-color: @uitvaartDonkerBruin  !important;
  border-color    : @uitvaartDonkerBruin  !important;
  color           : #ffffff !important;
  text-decoration : none;
}

// Navigation
.page-link {
  color: @uitvaartDonkerBruin  !important;
}

.page-item.active .page-link {
  background-color: @uitvaartDonkerBruin  !important;
  border-color    : @uitvaartDonkerBruin  !important;
  color           : #ffffff !important;
}

.custom-control-input:focus~.custom-control-label::before {
  /* when the button is toggled off 
it is still in focus and a violet border will appear */
  border-color: @uitvaartBodyBackgroundBruin  !important;
  /* box shadow is blue by default
but we do not want any shadow hence we have set 
all the values as 0 */
  box-shadow  :
    0 0 0 0rem rgba(0, 0, 0, 0) !important;
}

/*sets the background color of
switch to violet when it is checked*/
.custom-control-input:checked~.custom-control-label::before {
  border-color    : @uitvaartBodyBackgroundBruin  !important;
  background-color: @uitvaartBodyBackgroundBruin  !important;
}

/*sets the background color of
switch to violet when it is active*/
.custom-control-input:active~.custom-control-label::before {
  background-color: @uitvaartBodyBackgroundBruin  !important;
  border-color    : @uitvaartBodyBackgroundBruin  !important;
}

/*sets the border color of switch
to violet when it is not checked*/
.custom-control-input:focus:not(:checked)~.custom-control-label::before {
  border-color: @uitvaartBodyBackgroundBruin  !important;
}


//->Start form
.formcontainer {
  position     : absolute;
  display      : block;
  top          : 50%;
  left         : 50%;
  background   : rgba(255, 255, 255, 0.5);
  overflow     : auto;
  border-radius: 20px;
  border       : thin solid @uitvaartGold;
}

.form-signin {
  width : 80%;
  margin: auto;
}

.form-signin img {
  width        : 400px;
  height       : auto;
  margin       : 20px 0px 10px 0px;
  border-radius: 5px;
}

.form-signin .checkbox {
  font-weight: 400;
}

.form-signin .form-control {
  position  : relative;
  box-sizing: border-box;
  height    : auto;
  padding   : 10px;
  font-size : 16px;
}

.form-signin .form-control:focus {
  z-index: 2;
}

.form-signin input {
  margin      : 5px 0;
  border-color: @uitvaartGold;
  color       : @uitvaartDonkerBruin  !important;
}

.form-signin button[type="submit"] {
  background-color: @uitvaartDonkerBruin  !important;
  border-color    : @uitvaartDonkerBruin  !important;
  text-decoration : none;
}


.form-signin a{
  font-weight: 700;
  display:block;
  text-align: center;
  color: @uitvaartDonkerBruin;
  margin: 10px auto;
  text-decoration: underline;
}


.dashboard-img-container {
  padding-top: 100%;
  position   : relative;
}


.dashboard-img-badge-viewers {
  position: absolute;
  top     : 10px;
  right   : 10px;
  z-index : 10;
}

.dashboard-img-badge-status {
  position: absolute;
  top     : 10px;
  left    : 10px;
  z-index : 10;
}

.stream-status-ready {
  color: red;
}

.stream-status-live {
  color: blue;
}

.dashboard-img {
  text-align: center;
  position  : absolute;
  top       : 0px;
  width     : 285px !important;
  height    : 285px !important;
}

.img_preview {
  object-fit: scale-down;
  width     : 100%;
  height    : 200px;
}


#unlockHostname{
  -webkit-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -ms-user-select: none;
}

#unlockHostname:hover{
  cursor: pointer;
}

//->Afsluiten form

@media (max-width: 64em) {
  //->Start mobile

  #videoHolder {
    position: relative;
    width   : 100%;
    padding : 15px;
    height  : auto;
    top     : 0;
    left    : 0;
    margin  : 0;
  }

  vjs-tech {
    height    : auto;
    width     : 100% !important;
    display   : block !important;
    background: #000000;
    box-sizing: border-box !important;
    ;
    float: none;
  }

  video-js {
    height    : auto;
    width     : 100% !important;
    display   : block !important;
    background: #000000;
    box-sizing: border-box !important;
    ;
    float: none;
  }

  article#videoSideNote {
    height                    : auto;
    width                     : 100%;
    background                : rgba(255, 255, 255, .5);
    display                   : block;
    float                     : none;
    box-sizing                : border-box;
    padding                   : 30px;
    border-top-right-radius   : 20px;
    border-top-left-radius    : 20px;
    border-bottom-right-radius: 0px;
  }

  article img#logo {
    border-radius: 5px;
    display      : block;
    margin       : 0 auto;
    margin-bottom: 10px;
  }

  article img#overledene {
    border       : 3px solid #000000;
    height       : 240px;
    width        : 240px;
    box-sizing   : border-box;
    display      : block;
    margin       : 0 auto;
    margin-bottom: 10px;
  }

  article#videoSideNote p {
    font-size    : 18px;
    font-weight  : bold;
    display      : block;
    margin       : 0 auto;
    margin-bottom: 10px;
    text-align   : center;
  }

  article#videoSideNote a {
    border-radius   : 5px;
    display         : block;
    width           : 70%;
    margin          : 15px auto;
    font-size       : 14px;
    padding         : 10px 5px;
    text-align      : center;
    font-weight     : bold;
    background-color: #483931;
    text-decoration : none;
    color           : #ffffff;
  }

  .dashboard-card {
    width: 100% !important;
  }

  .card {
    width: 100% !important;
  }

  .dashboard-card img {
    display: none;
  }

  .dashboard-img-container {
    padding-top: 0%;
    position   : relative;
    overflow   : hidden;
  }

  .dashboard-img {
    position: absolute;
    top     : 0;
    left    : 0;
    bottom  : 0;
    right   : 0;
  }

  .nav-link {
    margin-left     : 0px;
    margin-right    : 0px;
  }
}

//->Afsluiten mobile