/*
 Global styles
*/

.p-4 { padding:4px; }
.pt-4 { padding-top:4px; }
.pb-4 { padding-bottom:4px; }
.pr-4 { padding-right:4px; }
.pl-4 { padding-left:4px; }
.m-4 { margin:4px; }
.mt-4 { margin-top:4px; }
.mb-4 { margin-bottom:4px; }
.mr-4 { margin-right:4px; }
.ml-4 { margin-left:4px; }

.p-8 { padding:8px; }
.pt-8 { padding-top:8px; }
.pb-8 { padding-bottom:8px; }
.m-8 { margin:8px; }

.p-20 {padding:20px;}
.pt-20 {padding-top:20px;}
.pb-20 {padding-bottom:20px;}
.pr-20 {padding-left:20px;}
.pl-20 {padding-right:20px;}

.m-20 {margin:20px;}
.mt-20 {margin-top:20px;}
.mb-20 {margin-bottom:20px;}
.mr-20 {margin-right:20px;}
.ml-20 {margin-left: 20px;}

.fa-trash:hover {
    color: #337ab7;
}
/*
 Lettering
*/
.rotate {
    transform: rotate(-90deg);
    float: left;
    padding-top:52px;
    top: 38px;
    position:relative;
    width:30px;
    height:120px;
}

.filtr_position {
    padding-left: 10px;
}



/*
  Kegs mobile view
*/
#menu-top {  border-bottom: 1px solid #999; position: fixed; top: 0px; width: 100%;
    background-color: #eee; font-size: 200%; z-index: 1000; }



#menu-bottom {  border-top: 1px solid #999; position: fixed; bottom: 0px; width: 100%;
    background-color: #ddd; font-size: 200%; }

.telefon-hidden { display: none; }

.telefon-selected-row { background-color: bisque !important; }
.telefon-disabled { opacity: 0.5; }

#telefon-manualform-detail { position: fixed; bottom: 4em; width: 100%; }
#telefon-camera-detail { position: fixed; bottom: 4em; width: 100%; height: 60%; background: #ddd; }

.table-responsive-pivaris {
    margin-bottom: 15px;
    overflow-y: hidden;
    border: 1px solid #ddd;
    min-height: .01%;
    overflow-x: auto;
    box-sizing: border-box;
}

/* Spinner
*/

.sk-folding-cube {
    margin: 20px auto;
    width: 40px;
    height: 40px;
    position: relative;
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}

.sk-folding-cube .sk-cube {
    float: left;
    width: 50%;
    height: 50%;
    position: relative;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}
.sk-folding-cube .sk-cube:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #333;
    -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
    animation: sk-foldCubeAngle 2.4s infinite linear both;
    -webkit-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}
.sk-folding-cube .sk-cube2 {
    -webkit-transform: scale(1.1) rotateZ(90deg);
    transform: scale(1.1) rotateZ(90deg);
}
.sk-folding-cube .sk-cube3 {
    -webkit-transform: scale(1.1) rotateZ(180deg);
    transform: scale(1.1) rotateZ(180deg);
}
.sk-folding-cube .sk-cube4 {
    -webkit-transform: scale(1.1) rotateZ(270deg);
    transform: scale(1.1) rotateZ(270deg);
}
.sk-folding-cube .sk-cube2:before {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}
.sk-folding-cube .sk-cube3:before {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}
.sk-folding-cube .sk-cube4:before {
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
}
@-webkit-keyframes sk-foldCubeAngle {
    0%, 10% {
        -webkit-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
    } 25%, 75% {
          -webkit-transform: perspective(140px) rotateX(0deg);
          transform: perspective(140px) rotateX(0deg);
          opacity: 1;
      } 90%, 100% {
            -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
            opacity: 0;
        }
}

@keyframes sk-foldCubeAngle {
    0%, 10% {
        -webkit-transform: perspective(140px) rotateX(-180deg);
        transform: perspective(140px) rotateX(-180deg);
        opacity: 0;
    } 25%, 75% {
          -webkit-transform: perspective(140px) rotateX(0deg);
          transform: perspective(140px) rotateX(0deg);
          opacity: 1;
      } 90%, 100% {
            -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
            opacity: 0;
        }
}

/* FADE-IN
*/
.fade-in {
    animation: fadeIn ease 1500ms;
    -webkit-animation: fadeIn ease 1500ms;
    -moz-animation: fadeIn ease 1500ms;
    -o-animation: fadeIn ease 1500ms;
    -ms-animation: fadeIn ease 1500ms;
}@keyframes fadeIn {
     0% {
         opacity:0;
     }
     100% {
         opacity:1;
     }
 }

@-moz-keyframes fadeIn {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

@-o-keyframes fadeIn {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}

@-ms-keyframes fadeIn {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
.text-shadow {
    text-shadow: 4px 2px 3px rgba(150, 150, 150, 1);
}
.box-shadow {
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.23);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.23);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.23);
}