/*body {
    background-color: black;
    color: white;
}*/

.whisperFullScreenHelpIntro {
    font-size: 77px;
    margin-top: 13px;
    
    color: #2e2f46;
    display: block;
    margin: auto;
    background-color: white;
    border-radius: 1000px;
    text-align: center;
    padding-top: 4px;
    width: 100px;
    height: 100px;
    margin-top: 10px;

}


.whisperFullscreenUI, whisperFullNode {
    display: none;
  }
  
  .whisperFullscreen .whisperFullNode {
    display:block!important;
  }
  .whisperFullscreen .whisperFullscreenUI {
    background: rgb(0, 0, 0);
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    margin: 0 !important;
    z-index: 1000000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .whisperFullscreen header {
    display: none;
  }


.bottomWhisperButton {    
    position: fixed;
    bottom: 0px;
}

.bottomWhisperButton a {
    color:white;
}

.bigRecordSettingsPanel {

    margin-top: 13px;
    float: left;
    color: white;
    margin-left: 10px;
}

@media screen and (max-width: 768px) {
.bigRecordSettingsPanel {
    margin-top: 5px !important;
}
}

.bigRecord {
    width: 200px;
    height: 200px;
    border-radius: 200px!important;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

    outline: none;
    border: none;

    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 34px;

}
.bigRecord span {
    position: relative;
    z-index: 2;
}

.bigRecordAvatar {

    background-image: url(https://localmind.ai/wp-content/plugins/gomind-personas/include/personas/tmc_v2.png);
    background-size: contain;
    width: 100%;
    height: 100%;
    border-radius:200px;
}

.micmeter {
    color:white!important;
    opacity: 0.8!important;
}

.bigRecordStatus {
    bottom: calc(50vh - 165px);
    text-align: center;
    position: fixed;
    left: 50%;
    transform: translate(-50%, -50%);
}

.bigRecord i {
    color:rgb(163, 163, 163)
}

/*.bigRecord.speaking {*/
    /*background-color:green!important;*/
    /*animation: speakingAnimation 4s infinite;*/
    /*transition: transform 0.5s;*/ /* ease-in-out;*/
/*}*/

.bigRecord {
    /*background-color:green!important;*/
    /*animation: speakingAnimation 4s infinite;*/
    transition: transform 0.5s; /* ease-in-out;*/
}

.bigRecord.speaking .bigRecordStatus{
    display:none;
}

.bigRecord.speakingPeriod {
    color:#0000ff00;
}

.bigRecord.speakingPeriod .bigRecordStatus {
   display:none;
}

.bigRecord.speakingPeriod .spinnerbg {
    display:none;
 }

.bigRecord.speaking .spinnerbg {
    display:none;
}

.bigRecord.speaking .bigRecordThinking {
content: ""
}

@keyframes speakingAnimation {
    0% {
        transform: scale(0.8);
    }
    5% {
        transform: scale(0.85);
    }
    10% {
        transform: scale(0.9);
    }
    15% {
        transform: scale(0.95);
    }
    20% {
        transform: scale(1);
    }
    25% {
        transform: scale(0.9);
    }
    30% {
        transform: scale(0.85);
    }
    35% {
        transform: scale(0.8);
    }
    40% {
        transform: scale(0.9);
    }
    45% {
        transform: scale(0.95);
    }
    50% {
        transform: scale(1);
    }
    55% {
        transform: scale(0.85);
    }
    60% {
        transform: scale(0.9);
    }
    65% {
        transform: scale(0.95);
    }
    70% {
        transform: scale(0.8);
    }
    75% {
        transform: scale(0.85);
    }
    80% {
        transform: scale(0.9);
    }
    85% {
        transform: scale(0.95);
    }
    90% {
        transform: scale(0.85);
    }
    95% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(0.8);
    }
}



.bigRecord .spinnerbg {
    position: absolute;
    font-size: 190px;
    /*z-index: 1;*/
    /*opacity: 0.5;*/
}

.bigRecord .fa-microphone {
    font-size: 170px;
}

.bigRecord .fa-stop, .bigRecord .fa-ellipsis {
    font-size: 95px;
}

.bigRecord .fa-stop {
    opacity: 0.1;
}

.bigRecord .micmeter {
    position: absolute;
    font-size: 10px;
    /*z-index: 1;*/
    opacity: 0.5;
}
.fa-spin-fast {
    -webkit-animation: fa-spin 0.6s infinite linear;
    animation: fa-spin 0.6s infinite linear;
}
.recordUI button:disabled {
    display: none;
}
.recordUI {
    

}

.recordUISmall {
    .bigRecord {
        color:white;
        width: 20px;
        max-width: 20px;
        height: 20px;
        padding: 0;
        border: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        
    }

    .bigRecord i {
        color: unset;
    }


    .startRecord, .exitRecord {
        background: none;
        
        border: 5px;
        border-color: white;
        border-width: 2px;
        border-style: solid;
        border-radius: 30px;
        background-color: #ffffff00;
        
    }


    .stopRecord {
        background: red;
        

        .spinnerbglrg  {
            color:rgba(255, 255, 255, 0.5)
        }
    }

    .exitRecord {
        background: red;
        
        /*background: rgb(192, 82, 82);*/
    }

    
    .transcriptGenerating {
        /*background: rgba(255, 255, 255, 0.5);*/
        /*background: rgb(192, 82, 82);*/
        background: #FF9800;
        /*background: none;*/
        .spinnerbglrg  {
            color:rgba(255, 255, 255, 0.5)
        }
        
        /*opacity:1;*/
    }


    .bigRecord span {
        opacity: 0;
    }

    .bigRecord .spinnerbg {
        position: absolute;
        font-size: 14px;
        /*z-index: 1;*/
        /*opacity: 0.5;*/
    }

    .bigRecord .spinnerbglrg {
        position: absolute;
        font-size: 20px;
        /*z-index: 1;*/
        /*opacity: 0.5;*/
    }

}
#recordUI1 {
    background-color: #00b1c5;
}
#recordUI2 {
    background-color: #00ff00;
}
#recordUI3 {
    background-color: #0000ff;
}