.card {
    border: none;
    border-radius: 1px;
}

/* .card-text-block {
            height: 7rem;
            overflow: hidden;
        } */

.communaute-card {
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: 0.25rem;
}

.dots {
    height: 4px;
    width: 4px;
    margin-bottom: 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block
}

.badge {
    padding: 7px;
    padding-right: 9px;
    padding-left: 16px;
    /* box-shadow: 5px 6px 6px 2px #e9ecef */
}

.user-img {
    margin-top: 4px;
    margin-right: 10px;
}

.check-icon {
    font-size: 17px;
    color: #c3bfbf;
    top: 1px;
    position: relative;
    margin-left: 3px
}

.form-check-input {
    margin-left: 0px !important;
    cursor: pointer
}

.form-check-input:focus {
    box-shadow: none
}

.icons i {
    margin-left: 8px
}

.reply {
    margin-left: 12px
}

.reply small {
    color: #b7b4b4
}

/* .reply small:hover {
            color: green;
            cursor: pointer
        } */

.reply_dark {
    margin-left: 12px
}

.reply_dark small {
    color: #323232;
}

.comment {
    background-color: #fbfbfb;
    border: 1px solid #d5d5d5;
}

.comment_submit_block {
    border-top: 1px solid #d5d5d5;
}


/* //------------------------------------------------------------------ */
.input {
    border: 1px solid #ccc;
    font-family: inherit;
    font-size: inherit;
    padding: 1px 1px;
    /* padding: 1px 6px; */
}

.input-wrap {
    position: relative;
}

.input-wrap .input {
    position: absolute;
    width: 100%;
    left: 0;
}

.width-machine {
    /*   Sort of a magic number to add extra space for number spinner */
    padding: 0 0.2rem;
    /* padding: 0 1rem; */
}



/* STYLE 2 */

/* #loader */
.lds-hourglass {
    display: inline-block;
    position: fixed;
    width: 80px;
    height: 80px;
    left: 50%;
    top: 50%;
    z-index: 10;
}

.lds-hourglass:after {
    content: " ";
    display: block;
    border-radius: 50%;
    width: 0;
    height: 0;
    margin: 8px;
    box-sizing: border-box;
    border: 32px solid #fff;
    border-color: #e51b24 transparent #b11b1b transparent;
    animation: lds-hourglass 1.2s infinite;
}

@keyframes lds-hourglass {
    0% {
        transform: rotate(0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    50% {
        transform: rotate(900deg);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    100% {
        transform: rotate(1800deg);
    }
}

/* END #loader */

/* #loader2 */
.lds-ellipsis {
    display: inline-block;
    position: relative;
    left: 37%;
    width: 80px;
    height: 80px;
}

.lds-ellipsis div {
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #f28b90;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(24px, 0);
    }
}

/* END #loader2 */


/* STYLE 3 */

/* style.css*/

/* Media Queries */

/* Small Devices*/

@media (min-width: 0px) {
    * {
        box-sizing: border-box;
    }

    body {
        margin: 0;
        padding: 0;
        background-color: lightcyan;
        color: #414142;
        position: relative;
    }

    .title {
        margin-bottom: 55px;
        text-align: center;
    }

    .audio-recording-container {
        width: 100%;
        /* height: 65vh; */
        /* view port height*/
        /*targeting Chrome & Safari*/
        display: -webkit-flex;
        /*targeting IE10*/
        display: -ms-flex;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /*horizontal centering*/
        align-items: center;
    }

    .start-recording-button {
        font-size: 70px;
        color: #435f7a;
        cursor: pointer;
        opacity: .5;
        margin-bottom: 30px;
    }

    .start-recording-button:hover {
        opacity: 1;
    }

    .recording-contorl-buttons-container {
        /*targeting Chrome & Safari*/
        display: -webkit-flex;
        /*targeting IE10*/
        display: -ms-flex;
        display: flex;
        justify-content: space-evenly;
        /*horizontal centering*/
        align-items: center;
        width: 334px;
        margin-bottom: 30px;
    }

    .cancel-recording-button,
    .stop-recording-button {
        font-size: 70px;
        cursor: pointer;
    }

    .cancel-recording-button {
        color: red;
        opacity: 0.7;
    }

    .cancel-recording-button:hover {
        color: rgb(206, 4, 4);
    }

    .stop-recording-button {
        color: #33cc33;
        opacity: 0.7;
    }

    .stop-recording-button:hover {
        color: #27a527;
    }

    .recording-elapsed-time {
        /*targeting Chrome & Safari*/
        display: -webkit-flex;
        /*targeting IE10*/
        display: -ms-flex;
        display: flex;
        justify-content: center;
        /*horizontal centering*/
        align-items: center;
    }

    .red-recording-dot {
        font-size: 25px;
        color: red;
        margin-right: 12px;
        /*transitions with Firefox, IE and Opera Support browser support*/
        animation-name: flashing-recording-dot;
        -webkit-animation-name: flashing-recording-dot;
        -moz-animation-name: flashing-recording-dot;
        -o-animation-name: flashing-recording-dot;
        animation-duration: 2s;
        -webkit-animation-duration: 2s;
        -moz-animation-duration: 2s;
        -o-animation-duration: 2s;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-iteration-count: infinite;
        -o-animation-iteration-count: infinite;
    }

    /* The animation code */
    @keyframes flashing-recording-dot {
        0% {
            opacity: 1;
        }

        50% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-webkit-keyframes flashing-recording-dot {
        0% {
            opacity: 1;
        }

        50% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-moz-keyframes flashing-recording-dot {
        0% {
            opacity: 1;
        }

        50% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @-o-keyframes flashing-recording-dot {
        0% {
            opacity: 1;
        }

        50% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    .elapsed-time {
        font-size: 32px;
    }

    .recording-contorl-buttons-container.hide {
        display: none;
    }

    .overlay {
        position: absolute;
        top: 0;
        height: 100vh;
        width: 100%;
        background-color: rgba(82, 76, 76, 0.35);
        /*targeting Chrome & Safari*/
        display: -webkit-flex;
        /*targeting IE10*/
        display: -ms-flex;
        display: flex;
        justify-content: center;
        /*horizontal centering*/
        align-items: center;
    }

    .overlay.hide {
        display: none;
    }

    .browser-not-supporting-audio-recording-box {
        /*targeting Chrome & Safari*/
        display: -webkit-flex;
        /*targeting IE10*/
        display: -ms-flex;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /*horizontal centering*/
        align-items: center;
        width: 317px;
        height: 119px;
        background-color: white;
        border-radius: 10px;
        padding: 15px;
        font-size: 16px;
    }

    .close-browser-not-supported-box {
        cursor: pointer;
        background-color: #abc1c05c;
        border-radius: 10px;
        font-size: 16px;
        border: none;
    }

    .close-browser-not-supported-box:hover {
        background-color: #92a5a45c;
    }

    .close-browser-not-supported-box:focus {
        outline: none;
        border: none;
    }

    .audio-element.hide {
        display: none;
    }

    .text-indication-of-audio-playing-container {
        height: 20px;
    }

    .text-indication-of-audio-playing {
        font-size: 20px;
    }

    .text-indication-of-audio-playing.hide {
        display: none;
    }

    /* 3 Dots animation*/
    .text-indication-of-audio-playing span {
        /*transitions with Firefox, IE and Opera Support browser support*/
        animation-name: blinking-dot;
        -webkit-animation-name: blinking-dot;
        -moz-animation-name: blinking-dot;
        -o-animation-name: blinking-dot;
        animation-duration: 2s;
        -webkit-animation-duration: 2s;
        -moz-animation-duration: 2s;
        -o-animation-duration: 2s;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-iteration-count: infinite;
        -o-animation-iteration-count: infinite;
    }

    .text-indication-of-audio-playing span:nth-child(2) {
        animation-delay: .4s;
        -webkit-animation-delay: .4s;
        -moz-animation-delay: .4s;
        -o-animation-delay: .4s;
    }

    .text-indication-of-audio-playing span:nth-child(3) {
        animation-delay: .8s;
        -webkit-animation-delay: .8s;
        -moz-animation-delay: .8s;
        -o-animation-delay: .8s;
    }

    /* The animation code */
    @keyframes blinking-dot {
        0% {
            opacity: 0;
        }

        50% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }

    /* The animation code */
    @-webkit-keyframes blinking-dot {
        0% {
            opacity: 0;
        }

        50% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }

    /* The animation code */
    @-moz-keyframes blinking-dot {
        0% {
            opacity: 0;
        }

        50% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }

    /* The animation code */
    @-o-keyframes blinking-dot {
        0% {
            opacity: 0;
        }

        50% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }
}

/* Medium devices */

@media (min-width: 768px) {}

/* Large devices */

@media (min-width: 992px) {}

/*Ipad pro view*/

/*
  @media (min-width: 1024px) {

  } */

/* Extra Large devices */

@media (min-width: 1200px) {}



.btn_ctrl_lessonPages button,
.btn_ctrl_lessonPages a button,
.btn_ctrl_lessonPages div button {
    width: 100%;
    width: -moz-available;
    /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;
    /* Mozilla-based browsers will ignore this. */
    width: fill-available;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 2vh;
}

.label_publier {
    width: 100%;
    width: -moz-available;
    /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;
    /* Mozilla-based browsers will ignore this. */
    width: fill-available;
}

/* STYLE 4 */
#scrollIcon .material-icons {
    color: black;
}

#scrollIcon:hover .material-icons {
    color: #dc3545;
}


/* Google icons */
.material-symbols-rounded {
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}


/* Conversation description */
.response-form {
    margin-top: 20px;
}

.user-img {
    object-fit: cover;
    height: 40px;
    width: 40px;
}

#conversation_textarea {
    border: 1px solid #ced4da;
    transition: border-color 0.3s;
}

#conversation_textarea:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
}

.btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}


/* Enregistrement audio */
.circle-microphone-container {
    display: inline-block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #f44336;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.microphone-icon {
    font-size: 48px;
    color: white;
}

.circle-microphone-container.pulsating {
    animation: pulse 1.2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.7);
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 20px rgba(244, 67, 54, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(244, 67, 54, 0);
    }
}

.audio-element {
    width: 100%;
}
/* END Enregistrement audio */


.button-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.button-container a {
    text-decoration: none;
}

#load-more-btn-prev {
    margin-right: auto;
}

#load-more-btn-next {
    margin-left: auto;
}

.radio-bloc-reponses {
    background-color: white;
}

.radio-bloc-reponses {
    max-width: 10cm !important;
}