html {
    width: 100%;
}

body {
    overflow-x: hidden !important;
}

    body.show-spinner > main {
        overflow: hidden !important;
    }

    /* Hide everything under body tag */
    body.show-spinner > * {
        opacity: 0;
    }

    /* Spinner */
    body.show-spinner::after {
        content: " ";
        display: inline-block;
        width: 30px;
        height: 30px;
        border: 2px solid rgba(0, 0, 0, 0.2);
        border-radius: 50%;
        border-top-color: rgba(0, 0, 0, 0.3);
        animation: spin 1s ease-in-out infinite;
        -webkit-animation: spin 1s ease-in-out infinite;
        left: calc(50% - 15px);
        top: calc(50% - 15px);
        position: fixed;
        z-index: 1;
    }

.icon-button {
    padding: 0;
    font-size: 13px;
    width: 22px;
    height: 22px;
    line-height: 24px;
}

.heading-icon {
    color: #922c88;
    font-size: 15px;
    line-height: inherit;
    margin-right: 5px;
    vertical-align: middle;
}

@media (max-width: 767px) {
    .app-menu .app-menu-button {
        top: 0px
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    to {
        -webkit-transform: rotate(360deg);
    }
}


.search-sm input {
    padding: .65rem .95rem .75rem .65rem !important;
}

.search-sm:after {
    top: 10px;
}

.border-width-5px {
    border-width: 5px !important;
}

.border-color-school {
    border-color: #DBADEC !important;
}

.border-color-own {
    border-color: #C06BA6 !important;
}

.border-color-def {
    border-color: #B64694 !important;
}

.border-color-exp {
    border-color: #E075B2 !important;
}

.border-color-sum {
    border-color: #D4A8E5 !important;
}

.border-color-qa {
    border-color: #2E0C47 !important;
}

.audio-view {
    /*padding-left: 95px; */
}

.myAudio-dimensions {
    height: 28px;
}

.video-js {
    height: auto !important;
}

#mydiv {
    position: absolute;
    z-index: 9;
    text-align: center;
    background-color: black;
    padding: 0;
    height: 1px;
    width: 100%;
    margin: 0;
}

.logo {
    width: 150px;
    height: 50px;
}


.log-indicator {
    width: 30px;
    height: 30px;
    border: 2px solid #00365a;
    border-radius: 14px;
    display: inline-block;
    align-items: center;
    text-align: center;
    padding-top: 4px;
}



#profileImage {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #512DA8;
    font-size: 20px;
    color: #fff;
    text-align: center;
    padding: 6px;
    font-weight: bold;
}

.offlineProfileImage {
    background: #e7ddd2 !important;
    color: #cb401b !important;
}
.offlineProfileImage:before {
    z-index: -2;
    animation: beat-before 1.5s ease 100ms infinite;
}
    /* CSS comes here */
    #video {
    border: 1px solid black;
    width: 320px;
    height: 240px;
}

#photo {
    border: 1px solid black;
    width: 320px;
    height: 240px;
}

#canvas {
    display: none;
}

.camera {
    width: 340px;
    display: inline-block;
}

.output {
    width: 340px;
    display: inline-block;
}

#startbutton {
    display: block;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    bottom: 36px;
    padding: 5px;
    background-color: #6a67ce;
    border: 1px solid rgba(255, 255, 255, 0.7);
    font-size: 14px;
    color: rgba(255, 255, 255, 1.0);
    cursor: pointer;
}

.contentarea {
    font-size: 16px;
    font-family: Arial;
    text-align: center;
}

.numberCircle {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 2px;
    background: #fff;
    /* border: 2px solid #666; */
    color: #666;
    text-align: center;
    font: 18px Arial, sans-serif;
}

/* Firefox old*/
@-moz-keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

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

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
/* IE */
@-ms-keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
/* Opera and prob css3 final iteration */
@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.blink-image {
    -moz-animation: blink normal 2s infinite ease-in-out; /* Firefox */
    -webkit-animation: blink normal 2s infinite ease-in-out; /* Webkit */
    
    animation: blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
}

.hidden {
    display: none !important;
}

.recImg {
    width: 18px;
}

.btn-multiple-state .spinner > span {
    width: 6px;
    height: 6px;
    background-color: #fff;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.2s ease-in-out infinite both;
    animation: sk-bouncedelay 1.2s ease-in-out infinite both;
}



.rightMargin10 {
    margin-right: 10px;
}

.recName {
    color: white;
    font-size: 18px;
    vertical-align: middle;
    font-weight: bold;
    margin-right: 10px;
}

.cropperBtns [class^="iconsminds-"]:before {
    font-size: 18px;
    font-weight: bold !important;
}

.img-container {
    /* Never limit the container height here */
    max-width: 100% !important;
}

    .img-container img {
        /* This is important */
        width: 100% !important;
    }

.movableCardBody {
   position:sticky;
   top:70px
}

#bodyRecorderheadAudio_Html5_api, #stepRecorderheadAudio_Html5_api {
    height: 50px;
}

.docs-demo #imgcontainer .cropper-line.line-n
, .docs-demo #imgcontainer .cropper-line.line-e
, .docs-demo #imgcontainer .cropper-line.line-w
,.docs-demo #imgcontainer .cropper-point.point-n
, .docs-demo #imgcontainer .cropper-point.point-e
, .docs-demo #imgcontainer .cropper-point.point-w
, .docs-demo #imgcontainer .cropper-point.point-ne
, .docs-demo #imgcontainer .cropper-point.point-nw
, .docs-demo #imgcontainer .cropper-point.point-se
, .docs-demo #imgcontainer .cropper-point.point-sw{
    display:none
}

hr[class*="stepInd"]::before {
    color: white;
    background: #184f90;
    border: black 1px solid;
    bottom: 0;
    position: absolute;  
}

hr.stepInd1::before {
    content: "Step 1";
}

hr.stepInd2::before {
    content: "Step 2";
}

hr.stepInd3::before {
    content: "Step 3";
}

hr.stepInd4::before {
    content: "Step 4";
}

hr.stepInd5::before {
    content: "Step 5";
}

hr.stepInd6::before {
    content: "Step 6";
}
hr.stepInd7::before {
    content: "Step 7";
}

hr.stepInd8::before {
    content: "Step 8";
}
hr.stepInd9::before {
    content: "Step 9";
}
hr.stepInd10::before {
    content: "Step 10";
}
hr.stepInd11::before {
    content: "Step 11";
}
hr.stepInd12::before {
    content: "Step 12";
}
hr.stepInd13::before {
    content: "Step 13";
}
hr.stepInd14::before {
    content: "Step 14";
}
hr.stepInd15::before {
    content: "Step 15";
}
hr.stepInd16::before {
    content: "Step 16";
}

hr.stepInd17::before {
    content: "Step 17";
}


hr.stepInd18::before {
    content: "Step 18";
}


hr.stepInd19::before {
    content: "Step 19";
}
hr.stepInd20::before {
    content: "Step 20";
}
hr.stepInd21::before {
    content: "Step 21";
}
hr.stepInd22::before {
    content: "Step 22";
}
hr.stepInd23::before {
    content: "Step 23";
}
hr.stepInd24::before {
    content: "Step 24";
}
hr.stepInd25::before {
    content: "Step 25";
}

hr.stepInd26::before {
    content: "Step 26";
}
hr.stepInd27::before {
    content: "Step 27";
}
hr.stepInd28::before {
    content: "Step 28";
}
hr.stepInd29::before {
    content: "Step 29";
}

hr.stepInd30::before {
    content: "Step 30";
}
hr.stepInd31::before {
    content: "Step 31";
}
hr.stepInd32::before {
    content: "Step 32";
}

hr.stepInd33::before {
    content: "Step 33";
}
hr.stepInd34::before {
    content: "Step 34";
}
hr.stepInd35::before {
    content: "Step 35";
}
hr.stepInd36::before {
    content: "Step 36";
}
hr.stepInd37::before {
    content: "Step 37";
}
hr.stepInd38::before {
    content: "Step 38";
}
hr.stepInd39::before {
    content: "Step 39";
}
hr.stepInd40::before {
    content: "Step 40";
}

hr.stepInd41::before {
    content: "Step 41";
}
hr.stepInd42::before {
    content: "Step 42";
}
hr.stepInd43::before {
    content: "Step 43";
}
hr.stepInd44::before {
    content: "Step 44";
}
hr.stepInd45::before {
    content: "Step 45";
}
hr.stepInd46::before {
    content: "Step 46";
}
hr.stepInd47::before {
    content: "Step 47";
}
hr.stepInd48::before {
    content: "Step 48";
}
hr.stepInd49::before {
    content: "Step 49";
}
hr.stepInd50::before {
    content: "Step 50";
}
    
.recControls {
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.docs-demo #imgcontainer .cropperPointS {
    font-size: 20px;
    background-color:white;
    color: black;
    border: lightgrey;
    border-style: dotted;
}

.playControl{

}

    .playControl:hover {
        text-decoration: none;
      /*  opacity: '50%';*/
    }

.activePlaylist {
    color: blue;
    font-weight: bold;
}

.playlistQueue{
    cursor:pointer;
}

#playlistplayer{
    margin-top:6ex;
    float:right;
}

.linkLabel{
    color:black
}

.linkanchor{
    color:blue
}

.recordingDtls {
    display: block !important;
    position: inherit !important;
    margin-left: 2em !important;
}

.noImageUpload {
    height: 10em;
    font-size: 2em;
    text-align: center;
    margin:auto
}

.recImg{
    width:16px;
    margin: 0 1em;
}
.capcharefreshicon {
    position: absolute;
    height: 29px;
    left: 148px;
    top: 8px;
}