@font-face {
    font-family: "Poppins-Medium";
    src: url("../fonts/Poppins-Medium.ttf");

}

@font-face {
    font-family: "Poppins-Semibold";
    src: url("../fonts/Poppins-SemiBold.ttf");

}

@font-face {
    font-family: "Poppins-ExtraBold";
    src: url("../fonts/Poppins-ExtraBold.ttf");

}


body {
    margin: 0;
    font-family: 'Poppins-Medium';
    background-color: #F2F5F9;
}

button.close {
    position: absolute;
    right: 1rem;
}

.bg-darkblue {
    background-color: #ffffff;
    color: #20293A;
    border-radius: 15px;
}

.buttonModerator {
    background-color: #43f09c;
    color: #ffffff;
    padding: 5px 15px;
    font-family: 'Poppins-Semibold';
    border: none;
    cursor: pointer;
    text-align: center;
}

.buttonModerator:hover {
    background-color: #19223F;
}

.buttonPeople {
    background-color: #19223F;
    color: #ffffff;
    padding: 5px 15px;
    font-family: 'Poppins-Semibold';
    border: none;
    cursor: pointer;
    text-align: center;
}

.buttonPeople:hover {
    background-color: #43f09c;
    transition: background-color .5s linear;
}

#start-voting-krb,
#start-voting-swot-strength,
#start-voting-swot-weakness,
#start-voting-swot-oportunity,
#start-voting-swot-threat,
#start-voting-strategy {
    display: none;
}

.numberVote {
    background-color: #20293A;
    /* background-image: linear-gradient(to right, #539AD4, #67DFF1); */
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    display: inline-block;
    text-align: center;
    border-radius: 100%;
    margin-right: 10px;
}

.numberVote.voted {
    background-color: #43f09c;
}

.fw-heavy {
    font-family: Poppins-ExtraBold;
}

.fw-semibold {
    font-family: Poppins-Semibold;
}

.modal-header {
    border-bottom: 0;
}

.modal-title {
    margin: 0 auto;
    font-weight: bold;
}

.modal-content {
    border-radius: 30px;
}

.modal-body {
    padding: 0 1rem;
}

.btn.focus,
.btn:focus {
    box-shadow: none;
}

.bootbox-body {
    border-radius: 30px;
    padding: 30px;
    background-image: linear-gradient(to right, rgba(83, 154, 212, 0.1), rgba(103, 223, 241, 0.1));
}

.modal-footer {
    border-top: 0;
    justify-content: center;
}

.btn-yes {
    border-radius: 100%;
    background-color: #43F09C;
    color: #ffffff;
    font-weight: bold;
    font-size: 20px;
    padding: 15px;
}

.btn-yes:hover {
    background-color: rgba(67, 240, 156, 0.5);
}

.btn-no,
.button-okay {
    border-radius: 100%;
    background-color: #19223F;
    color: #ffffff;
    font-weight: bold;
    font-size: 20px;
    padding: 15px 17px;
}

.btn-no:hover,
.button-okay:hover {
    background-color: rgba(25, 34, 63, 0.5);
}

#login-page {
    overflow: hidden;
}

.login {
    /* background-image: linear-gradient(to right, #539AD4, #67DFF1); */
    background-color: #F2F5F9;
}

.login input {
    background-color: transparent;
    border: none;
    color: #212529;
    width: 80%;
}

.login input::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #97A3B6;
    opacity: 1;
    /* Firefox */
}

.login button {
    background-color: #19223F;
    color: #ffffff;
    width: 150px;
    font-family: 'Poppins-Semibold';
    border: none;
    font-size: 14px;
    cursor: pointer;
    height: 40px;
}

.button {
    font-family: 'Poppins-Semibold' !important;
}

.info {
    height: 70vh;
}


.menu {

    /* background-image: radial-gradient(circle, #19223F, #19223F, #000000); */
    background-color: #111729;
    height: 100vh;
    position: fixed;
    z-index: 10;
}

.neon_logo {
    margin-bottom: 50px;
    /*max-width: 100%;*/
    width: 100%;
}

.menu button {
    /* background-image: linear-gradient(to right, #67DFF1, #539AD4); */
    background-color: #111729;
    color: #c3c5c9;
    width: 100%;
    border: none;
    font-size: 14px;
    cursor: pointer;
    height: 5vh;
    vertical-align: end;
    text-align: left;

}

.active {
    background-image: none !important;
    background-color: #E3E8EF !important;
    color: #20293A !important;
    font-family: Poppins-ExtraBold;
}


/* .menu .button-1 {
    margin-top: 5vh;
} */

#menu button:hover {
    /* background-image: linear-gradient(to right, #539AD4, #67DFF1); */
    background-color: #333a4a;
    cursor: pointer;
    color: #c3c5c9;
    border-radius: 5px;

}

#menu .active {
    /* background-image: linear-gradient(to right, #539AD4, #67DFF1); */
    background-color: #333a4a !important;
    color: #c3c5c9 !important;
    border-radius: 5px;
    vertical-align: end;

}

/* .hello {
    background-image: linear-gradient(to right, #539AD4, #67DFF1);
    color: #ffffff;
    width: 230px;
    border: none;
    font-size: 12px;
    height: 35px;

} */


input:focus {
    outline: none !important;
}

button:focus {
    outline: none !important;
}

#user {
    font-family: 'Poppins-Medium';
}

.title {
    font-size: 27px;
    font-family: Poppins-Semibold;
}

.add {
    /* background-image: linear-gradient(to right, #539AD4, #67DFF1); */
    background-color: #E3E8EF;
    color: #20293A;
    width: 200px;
    border: none;
    font-size: 12px;
    height: 40px;
}

.table td,
.table th {
    border-bottom: 1px solid #c3c5c9;
    border-top: 1px solid transparent;
}

#r-meetings td {
    border-bottom: 1px solid #c3c5c9;
}



/* registered meetings */

.table thead th {
    border-bottom: 2px solid transparent;
    color: #20293A;
    font-family: Poppins-ExtraBold;
    font-size: 19px;
}



#add-meeting:hover {
    /* background-image: linear-gradient(to right, #67DFF1, #539AD4); */

    cursor: pointer;
}

.attend-meeting {
    /* background-image: linear-gradient(to right, #539AD4, #67DFF1); */
    display: inline-block;
    color: #97A3B6;
    border: none;
    font-size: 14px;
    margin-right: 10px;
    padding: 5px 10px;
    border-radius: 20px;
}

.attend-meeting:hover {
    cursor: pointer;
    color: #19223F;
}

.edit-meeting {
    /* background-image: linear-gradient(to right, #539AD4, #67DFF1); */
    display: inline-block;
    color: #97A3B6;
    border: none;
    font-size: 14px;
    margin-right: 10px;
    padding: 5px 10px;
    border-radius: 20px;
}

.edit-meeting:hover {
    /* background-image: linear-gradient(to right, #67DFF1, #539AD4); */
    cursor: pointer;
    color: #19223F;
}

.remove {
    display: inline-block;
    color: #97A3B6;
    border: none;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 20px;
}

.remove:hover {
    background: #de4856 !important;
    cursor: pointer;
}

.bg-danger.remove {
    color: #ffffff;
}


/*new meeting*/

.subtittle {
    font-family: Poppins-Semibold;
    font-size: 18px;
}

.hr1 {
    border: 0;
    height: 1px;
    /* background-image: linear-gradient(to right, #539AD4, #67DFF1); */
    background-color: #c3c5c9;
}

.inputBlue {
    background-color: #c3c5c9;
    border: none;
    border-radius: 5px;
    color: #212529;
    width: 50vw;
    padding: 5px 20px;
}

#administrator {
    background-color: #c3c5c9;
    border: none;

    color: #212529;
    width: 20vw;
}

#local {
    background-color: #c3c5c9;
    border: none;

    color: #212529;
    width: 20vw;
}

#date {
    background-color: #c3c5c9;
    border: none;

    color: #212529;
    width: 15vw;
}

.moderator {
    background-color: #c3c5c9;
    border: none;
    border-radius: 5px;
    color: #212529;
    width: 100%;
    max-width: 100%;
    padding: 5px 20px;
}

.doctor {
    background-color: #c3c5c9;
    border: none;
    border-radius: 5px;
    color: #212529;
    width: 100%;
    max-width: 100%;
    padding: 5px 20px;
}

.email {
    background-color: #c3c5c9;
    border: none;
    border-radius: 5px;
    color: #212529;
    width: 100%;
    max-width: 100%;
    padding: 5px 20px;
}

#addDoctor:hover {

    cursor: pointer;
}

.generate {
    /* background-image: linear-gradient(to right, #539AD4, #67DFF1); */
    background-color: #c3c5c9;
    color: #212529;
    width: 250px;
    border: none;
    font-size: 12px;
    height: 40px;
    font-family: Poppins-Semibold;
}


#generate-meeting:hover {
    /* background-image: linear-gradient(to right, #67DFF1, #539AD4); */
    background-color: #9D9D9C;
    cursor: pointer;
    color: #212529;
    font-family: Poppins-Semibold;

}




::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

input:focus {
    outline: none !important;

}

.round {
    position: relative;
}

.round label {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
    height: 28px;
    left: 15px;
    position: absolute;
    top: 0;
    width: 28px;
}

.round label:after {
    border: 2px solid #fff;
    border-top: none;
    border-right: none;
    content: "";
    height: 6px;
    left: 7px;
    opacity: 0;
    position: absolute;
    top: 8px;
    transform: rotate(-45deg);
    width: 12px;
}

.round input[type="checkbox"] {
    visibility: hidden;
}

.round input[type="checkbox"]:checked+label {
    background-color: #19223F;
    border-color: #19223F;
}

.round input[type="checkbox"]:checked+label:after {
    opacity: 1;
}

/*Moderator*/


.input-field {
    background-color: #19223F;
    border: none;
    border-radius: 45px;
    color: #ffffff;
    width: 30vw;
}

#moderator .tabs {
    /* background-image: linear-gradient(to right, #539AD4, #67DFF1); */
    background-color: transparent;
    color: #677489;
    width: 100%;
    border: none;
    font-size: 16px;
    height: 5vh;
    font-family: 'Poppins-Medium';
    border: 1px solid #E3E8EF;
}


#moderator .tabs:hover {
    /* background-image: linear-gradient(to right, #67DFF1, #539AD4); */
    background-color: #E3E8EF;
    cursor: pointer;
    color: #20293A;
    font-family: Poppins-ExtraBold;
}

.save:hover {
    cursor: pointer;
    background-color: #20293A !important;
    color: #ffffff !important;
}

.videosdk {
    height: 25vh;
    max-height: 25vh;
    padding-block: 15px;
    overflow-y: hidden;
    overflow-x: auto;
    display: none;
}

.content {
    height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
}

.attendeesDiv {
    display: none;
}

/*Moderator-inserted-info*/

.table-title {
    font-family: Poppins-Semibold;

}

/* .table-inserted td {
    border-left: 1px solid #2760BF;
}*/

.table-inserted td,
.table-inserted th {
    border-bottom: 1px solid #c3c5c9;
    /* border-top: 1px solid #19223F; */
}

.table-inserted thead th {
    /* border-bottom: 2px solid #19223F; */
    color: #19223F;
    font-family: Poppins-ExtraBold;

}

.Edit {
    border-right: none;
    color: #19223F;
    ;
}

.Edit:hover {
    font-family: Poppins-ExtraBold;
    cursor: pointer
}

/*index*/

.shift-big-logo {
    max-width: 60%;
    border-radius: 25px;
}

/*Vote*/

#vote {
    background-color: #E3E8EF !important;
    color: #20293A !important;
    width: 180px;
    border: none;
    font-size: 16px;
    height: 40px;
}

#vote:hover {
    cursor: pointer;
    background-color: #20293A !important;
    color: #ffffff !important;
}

#nextSwotToVote {
    background-color: #E3E8EF !important;
    color: #20293A !important;
    width: 180px;
    border: none;
    font-size: 16px;
    height: 40px;
}

#nextSwotToVote:hover {
    cursor: pointer;
    background-color: #20293A !important;
    color: #ffffff !important;
}

.range-wrap {
    position: relative;
    margin: 0 auto 3rem;
}

.range {
    width: 100%;

}

.bubble {
    margin-top: 25px;
    background: #539AD4;
    color: white;
    padding: 4px 12px;
    position: absolute;
    border-radius: 4px;
    left: 50%;
    transform: translateX(-50%);
}

.bubble::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 2px;
    background: #539AD4;
    top: -1px;
    left: 50%;
}

.range {
    -webkit-appearance: none;
    width: 100%;
    height: 15px;
    border-radius: 25px;
    background: #E3E8EF;
    outline: none;
}

.range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #43f09c;
    cursor: pointer;
}

.swot-menu {
    font-size: 16px;
    text-align: center;
    padding: 0 20px;
    border: 1px solid #E3E8EF;
    border-radius: 45px;
    font-family: Poppins-Semibold;
}

.swot-menu:hover {
    cursor: pointer;
    background-color: #E3E8EF;
}

.swot-menu.voted {
    border: 1px solid #43f09c;
    background-color: #43f09c;
}

.menu-item-active {
    font-family: Poppins-Semibold;
    background-color: #E3E8EF;
    border-radius: 45px;
}

div[id*='ToVote'] {
    display: none;
}

/*Results*/

.progress-bar-container {

    height: 30px;
    margin-top: 20px;
    margin-bottom: 50px;
    border-radius: 45px;
    background-color: #ffffff;
    border: 2px solid #E3E8EF;

}

.progress-bar-indicator {
    height: 102%;
    /* background-image: linear-gradient(to right, #539AD4, #67DFF1); */
    background-color: #43F09C;
    border-radius: 45px;
}

.indicator-0 {
    width: 0%;
}

.indicator-1 {
    width: 10%;
}

.indicator-2 {
    width: 20%;
}

.indicator-3 {
    width: 30%;
}

.indicator-4 {
    width: 40%;
}

.indicator-5 {
    width: 50%;
}

.indicator-6 {
    width: 60%;
}

.indicator-7 {
    width: 70%;
}

.indicator-8 {
    width: 80%;
}

.indicator-9 {
    width: 90%;
}

.indicator-10 {
    width: 100%;
}


.save {
    background-color: #E3E8EF !important;
    color: #20293A !important;
}

/*administrator*/

hr.hr-gray {
    border-top: 15px solid #E3E8EF;
    border-radius: 5px;
}

#admin .tabs {
    /* background-image: linear-gradient(to right, #539AD4, #67DFF1); */
    background-color: transparent;
    color: #677489;
    width: 100%;
    border: none;
    font-size: 16px;
    height: 5vh;
    font-family: Poppins-Medium;
    border: 1px solid #E3E8EF;
}


#admin .tabs:hover {
    /* background-image: linear-gradient(to right, #67DFF1, #539AD4); */
    color: #20293A;
    cursor: pointer;
    background-color: #E3E8EF;

}



#admin table th {
    width: 20vw;
}

.table-admin td {
    border-left: 20px solid #ffffff;
}

.table-admin td,
.table-admin th {
    border-bottom: 1px solid #E3E8EF;
    border-top: 1px solid #ffffff;
    color: #97A3B6;
}

.table-admin td:first-child:hover {
    cursor: pointer;
    color: #111729 !important;
}

.table-admin thead th {
    border-bottom: 2px solid #ffffff;
    color: #20293A;
    font-family: 'Poppins-Medium';
    font-size: 16px;

}

#table-krb-unselected tr.krbS,
#table-strength-unselected tr.swotS,
#table-weakness-unselected tr.swotS,
#table-opportunity-unselected tr.swotS,
#table-threat-unselected tr.swotS,
#table-strategies-unselected tr.strategyS {
    background-color: #ff0000;
}

#table-krb-unselected tr.krbS td,
#table-strength-unselected tr.swotS td,
#table-weakness-unselected tr.swotS td,
#table-opportunity-unselected tr.swotS td,
#table-threat-unselected tr.swotS td,
#table-strategies-unselected tr.strategyS td {
    color: #ffffff;
}

#table-krb-selected tr.krbU,
#table-strength-selected tr.swotU,
#table-weakness-selected tr.swotU,
#table-opportunity-selected tr.swotU,
#table-threat-selected tr.swotU,
#table-strategies-selected tr.strategyU {
    background-color: #15ff00;
}

#table-krb-selected tr.krbU td,
#table-strength-selected tr.swotU td,
#table-weakness-selected tr.swotU td,
#table-opportunity-selected tr.swotU td,
#table-threat-selected tr.swotU td,
#table-strategies-selected tr.strategyU td {
    color: #ffffff;
}

@media only screen and (max-width: 1024px) {



    .info {
        height: 45vh;
    }

    .menu {
        height: 160vh;
        left: 0px;

    }

    .neon_logo {
        margin-top: 0vh;
        max-width: 100%
    }

    .animation {
        -webkit-animation: slide 0.5s forwards;
        -webkit-animation-delay: 2s;
        animation: slide 0.5s forwards;

    }

    @-webkit-keyframes slide {
        100% {
            left: 0;
        }
    }

    @keyframes slide {
        100% {
            left: 0;
        }
    }

    .animation2 {
        -webkit-animation: slide 0.5s forwards;
        -webkit-animation-delay: 2s;
        animation: slide2 0.5s forwards;

    }


    @-webkit-keyframes slide2 {
        100% {
            left: -380px;
        }
    }

    @keyframes slide2 {
        100% {
            left: -380px;
        }
    }



    .login button {
        background-color: #19223F;
        color: #ffffff;
        width: 100px;
        font-family: 'Poppins-Semibold';
        border: none;
        font-size: 14px;
        cursor: pointer;
    }

    .menu button {
        /* background-image: linear-gradient(to right, #67DFF1, #539AD4); */
        color: #c3c5c9;
        /* width: 200px; */
        border: none;
        font-size: 14px;
        cursor: pointer;
        height: 40px;
        vertical-align: middle;

    }



    /* 
    .menu .button-1 {
        margin-top: 1vh;
    } */


    /*new meeting*/

    #administrator {

        width: 50vw;
    }

    #local {

        width: 50vw;
    }

    #date {

        width: 50vw;
    }

    #meetingName {

        width: 50vw;
    }

    #meetingLink {
        width: 50vw;
    }

    #product {

        width: 50vw;
    }

    .moderator {

        width: 50vw;
    }

    .doctor {

        width: 50vw;
    }

    .email {
        width: 50vw;
    }

    .subtittle {
        font-size: 14px;
    }

    .round label {
        left: 30px;

    }

    /*moderator*/

    #moderator .tabs {
        width: 100%;
        font-size: 16px;
    }

    #admin .tabs {
        /*width: 100px;*/
        font-size: 16px;
    }


    .input-field {
        background-color: #19223F;
        border: none;
        border-radius: 5px;
        color: #ffffff;
        width: 70vw;
    }

    /*index*/


    .shift-big-logo {
        max-width: 90%;

    }

    /*vote*/

    .swot-menu {
        font-size: 12px;
        margin-right: 0px;
    }

    /*results*/
    .progress-bar-container {
        width: 50vw;
        height: 20px;
        margin-left: 10%;
        margin-bottom: 50px;
        margin-top: 10px;
        border-radius: 45px;



    }

    /*admin*/
}

.badge-pill-light-blue {
    background-color: #07e1f3 !important;
}

#vsdkDevicesWecamsSel {
    padding: 0px 0px 0px 45px;
    background-image: url('../img/camara.png') !important;
    background-repeat: no-repeat;
    background-size: auto;
    background-position: 1rem;
}

#vsdkDevicesMicsSel {
    padding: 5px 5px 5px 35px;
    background-image: url('../img/micro.png') !important;
    background-repeat: no-repeat;
    background-size: auto;
    background-position: 1rem;
}

#vsdkDevicesSpeakerSel {
    padding: 5px 5px 5px 35px;
    background-image: url('../img/speaker.png') !important;
    background-repeat: no-repeat;
    background-size: auto;
    background-position: 1rem;
}

#vsdkWebcamsSel {
    padding: 0px 0px 0px 45px;
    background-image: url('../img/camara.png') !important;
    background-repeat: no-repeat;
    background-size: auto;
    background-position: 1rem;
}

#vsdkMicsSel {
    padding: 5px 5px 5px 35px;
    background-image: url('../img/micro.png') !important;
    background-repeat: no-repeat;
    background-size: auto;
    background-position: 1rem;
}

#vsdkSpeakerSel {
    padding: 5px 5px 5px 35px;
    background-image: url('../img/speaker.png') !important;
    background-repeat: no-repeat;
    background-size: auto;
    background-position: 1rem;
}


/*iPad in portrait & landscape*/

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    /* STYLES GO HERE */
}

/*iPad 1 & 2 in landscapee*/


@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) {
    /* STYLES GO HERE */
}

/*iPad 1 & 2 in portrait*/

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) {
    /* STYLES GO HERE */
}