.card_fields {
max-height:80vh;
height: auto;
width:auto;
}
#svg-pan {
  height: 100%;
}
html,body {
  height: 100%;
}
.apphome {
  background-color: #999a01;
}
/* Set a background image by replacing the URL below */
/* body {
  background-color: #999a01;
  background-color: rgb(153,154,1)
}
.card-body {
  background-color: rgb(153,150,1)
} */

.no-transition { /* https://stackoverflow.com/questions/13119906/turning-off-twitter-bootstrap-navbar-transition-animation */
  -webkit-transition: height 0.01s;
  -moz-transition: height 0.01s;
  -ms-transition: height 0.01s;
  -o-transition: height 0.01s;
  transition: height 0.01s;
}
#sidebar .navbar-nav li.active > a {
	background-color: #dee2e6;
	color: #fff;
}
.dropdown-icon {
    min-width: 1rem;
}
.img-center{
display: block;
margin-left: auto;
margin-right: auto;
}
.addFileTumb{
height:120px;	
}
.addFileClose{
    right:20px;
    position: absolute;
}
/* https://tympanus.net/Tutorials/CustomFileInputs/ */
.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.inputfile + label {
/*     max-width: 80%; */
/*     font-size: 1.25rem; */
/*     20px */
/*     font-weight: 700; */
/*     text-overflow: ellipsis; */
/*     white-space: nowrap; */
/*     cursor: pointer; */
/*     display: inline-block; */
    overflow: hidden;
/*     padding: 0.625rem 1.25rem; */
    /* 10px 20px */
}

.inputfile:focus + label,
.inputfile.has-focus + label {
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}

.inputfile + label * {
    /* pointer-events: none; */
    /* in case of FastClick lib use */
}

/* style 4 */

/* .inputfile-4 + label {
    color: #d3394c;
}

.inputfile-4:focus + label,
.inputfile-4.has-focus + label,
.inputfile-4 + label:hover {
    color: #722040;
}

.inputfile-4 + label figure {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #d3394c;
    display: block;
    padding: 20px;
    margin: 0 auto 10px;
}

.inputfile-4:focus + label figure,
.inputfile-4.has-focus + label figure,
.inputfile-4 + label:hover figure {
    background-color: #722040;
}

.inputfile-4 + label svg {
    width: 100%;
    height: 100%;
    fill: #f1e5e6;
}
 *//* https://tympanus.net/Tutorials/CustomFileInputs/ */

.no-border {
    border: 0;
    box-shadow: none; /* You may want to include this as bootstrap applies these styles too */
}

.svgMax {
max-width:100%;
max-height:80vh;
height: auto;
width:auto;
}
.svgPlayMax {
	display: block;
    position: absolute;
/*    top: 0;*/
    left: 0;
    width: 100%;
    background: #fff;
}
.svgPlayMax100 {
    height: 100vh;
}
.svgPlayMax75 {
    height: 75vh;
}
.svgPlayMax50 {
    height: 50vh;
}
.svgPlayMax25 {
    height: 25vh;
}
.playIframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}

.playtoolbar{
    position: absolute;
    top: 0;
    left: 0;
}
.remove-padding {
 padding-left: 0;
 padding-right: 0;
 margin-left: 0;
 margin-right: 0
 }
.form-control_focus {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}
/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
/*   margin-bottom: 60px; */
/* background-color:#999a01; */
}
.bg-light-beta{
    border-top: 3px solid #0088cc;
    background-color: #999a01;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  line-height: 60px; /* Vertically center the text there */
  background-color: #f5f5f5;
}

/* https://stackoverflow.com/questions/36562597/change-the-icon-size-of-material-design-icon */
/* Rules for sizing the icon. */
.material-icons.md-12 { font-size: 12px; }
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

/* select */
.b_sel_lt{
    cursor: nw-resize;
}
.b_sel_rt{
    cursor: ne-resize;
}
.b_sel_rb{
    cursor: se-resize;
}
.b_sel_lb{
    cursor: sw-resize;
}
.b_sel_t{
    cursor: n-resize;
}
.b_sel_r{
    cursor: e-resize;
}
.b_sel_b{
    cursor: s-resize;
}
.b_sel_l{
    cursor: w-resize;
}
.b_sel_rec{
    cursor: move;
}
.b_sel_or{
    stroke-width:30;
    stroke:#80bdff;
    fill-opacity:0.1;
}
.b_sel_rec{
    stroke-width:10;
    fill:gray;
    stroke-dasharray:100 100;
    stroke:black;
    stroke-opacity:0.8;
    fill-opacity:0.1;
/*    pointer-events:none; /* This ons is needed if you want to deselect or drag the shape*/
}
.b_sel_field{
    stroke-width:30;
    stroke:#80bdff;
    fill-opacity:0.1;
/*    pointer-events:none; /* This ons is needed if you want to deselect or drag the shape*/
}
.pAddField,.pRemoveField
{
	cursor: pointer;
}

.icon-whatsapp{
  background-image : url(../images/WhatsApp.png);
  background-size: cover;
  display: inline-block;
   height: 80px;
   width: 80px;
}
.icon-facebook{
  background-image : url(../images/facebook.png);
  background-size: cover;
  display: inline-block;
   height: 80px;
   width: 80px;
}
.icon-zoekAlfa{
  background-image : url(../images/zoekAlfa.png);
  background-size: cover;
  display: inline-block;
   height: 18px;
   width: 18px;
}
.icon-zoekAlfalist{
  background-image : url(../images/zoekAlfalist.png);
  background-size: cover;
  display: inline-block;
   height: 18px;
   width: 18px;
}
.icon-zoekFonet{
  background-image : url(../images/zoekFonet.png);
  background-size: cover;
  display: inline-block;
   height: 18px;
   width: 18px;
}
.icon-zoekStam{
  background-image : url(../images/zoekStam.png);
  background-size: cover;
  display: inline-block;
   height: 18px;
   width: 18px;
}
/* horizontal line with centered text */
.hr {
  display: flex;
  align-items: center;
  text-align: center;
}

.hr::before,
.hr::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #000;
}

.hr:not(:empty)::before {
  margin-right: .25em;
}

.hr:not(:empty)::after {
  margin-left: .25em;
}

.cursor-alias {cursor: alias;}
.cursor-all-scroll {cursor: all-scroll;}
.cursor-auto {cursor: auto;}
.cursor-cell {cursor: cell;}
.cursor-context-menu {cursor: context-menu;}
.cursor-col-resize {cursor: col-resize;}
.cursor-copy {cursor: copy;}
.cursor-crosshair {cursor: crosshair;}
.cursor-default {cursor: default;}
.cursor-e-resize {cursor: e-resize;}
.cursor-ew-resize {cursor: ew-resize;}
.cursor-grab {cursor: -webkit-grab; cursor: grab;}
.cursor-grabbing {cursor: -webkit-grabbing; cursor: grabbing;}
.cursor-help {cursor: help;}
.cursor-move {cursor: move;}
.cursor-n-resize {cursor: n-resize;}
.cursor-ne-resize {cursor: ne-resize;}
.cursor-nesw-resize {cursor: nesw-resize;}
.cursor-ns-resize {cursor: ns-resize;}
.cursor-nw-resize {cursor: nw-resize;}
.cursor-nwse-resize {cursor: nwse-resize;}
.cursor-no-drop {cursor: no-drop;}
.cursor-none {cursor: none;}
.cursor-not-allowed {cursor: not-allowed;}
.cursor-pointer {cursor: pointer;}
.cursor-progress {cursor: progress;}
.cursor-row-resize {cursor: row-resize;}
.cursor-s-resize {cursor: s-resize;}
.cursor-se-resize {cursor: se-resize;}
.cursor-sw-resize {cursor: sw-resize;}
.cursor-text {cursor: text;}
.cursor-w-resize {cursor: w-resize;}
.cursor-wait {cursor: wait;}
.cursor-zoom-in {cursor: zoom-in;}
.cursor-zoom-out {cursor: zoom-out;}

.alertOffline{
  position:absolute;
  bottom:0;
  right:20px;
}
.visibleDeleteBook {
  animation: movein 0.5s ease forwards, moveout 0.5s 6s ease forwards;
}
#deleteBook {
  position:fixed;
  /*  bottom:0; */
  left:20px;
  z-index: 999;
}
@keyframes movein {
  from { bottom: -100px; }
  to   { bottom: 20px; }
}
@keyframes moveout {
  from { bottom: 20px; }
  to   { bottom: -100px; }
}