body {
    background-image: linear-gradient( 68.4deg, rgba(99,251,215,1) -0.4%, rgba(5,222,250,1) 100.2% );
    background-repeat: no-repeat;
}

.navbar {
    background-color: transparent !important;
}

.nav-link,
.navbar-brand {
    cursor: pointer;
}

.nav-link {
    margin-right: 1em !important;
}

.dropdown-menu {
    border-radius: 7px;
}


main {
    height: 100%;
}

@media (min-width: 768px) {
    .cover-container {
        width: 80% !important;
    }
}

.cover-container {
    width: 100%;
}

.fixed-container {
    background-image: linear-gradient(120deg, #36d1dc, #3989FD);
    box-shadow: 10px 10px 5px darkcyan;
    color: mintcream;
    padding: 20px;
    border-radius: 10px;
    position: relative;
}

.floating-container {
    background-image: linear-gradient(120deg, #36d1dc, #3989FD);
    box-shadow: 10px 10px 5px darkcyan;
    color: mintcream;
    padding: 20px;
    border-radius: 10px;
    animation-name: FloatIn-right;
    animation-duration: 2s;
    position: relative;
}


.container-white-gradient {
    background-image: linear-gradient( 174.2deg, rgba(255,244,228,1) 7.1%, rgba(240,246,238,1) 67.4% ) !important;
    color: #083767;
}

.short-answer-textbox {
    display: inline;
    width: 250px;
    margin-top: 5px;
}

.card {
    color: black !important;
    direction: rtl;
    text-align: justify;
    padding: 0px;
    box-shadow: 10px 10px 5px lightslategrey;
}

.main-row {
    padding: 20px;
}

.flowchart {
    padding: 0px;
}

label {
    margin-top: 7px;
    margin-bottom: 2px;
}

fieldset label {
    margin-top: 2px;
    margin-bottom: 0px;
}

input, textarea, select {
    margin-bottom: 5px !important;
}

form #togglePassword, form #toggleRePassword {
    float: left;
    margin-top: -30px;
    margin-left: 10px;
    position: relative;
}

@media (max-width: 768px) {
    form #togglePassword, form #toggleRePassword {
        margin-top: -34px;
    }
}

.btn-group {
    margin-top: 20px;
    width: 100%;
}


    .btn-group a, .btn-group input {
        margin-right: 3px !important;
        margin-left: 3px !important;
        width: 50%;
        border-width: 2px;
    }

.form-header {
    margin-top: 20px;
}

@keyframes FloatIn-right {
    from {
        left: 100%;
    }

    to {
        left: 0px;
    }
}

@keyframes FloatIn-left {
    from {
        right: 100%;
    }

    to {
        right: 0px;
    }
}

.btn-add-child {
    width: 100px;
    height: 140px;
    background-image: url("/Images/plus-icon.png");
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: center;
    margin-bottom: 5px;
    cursor: pointer;
}

.btn-edit-child {
    width: 100px;
    height: 140px;
    background-image: url("/Images/documentIcon.png");
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: 160%;
    background-position: center;
    margin-bottom: 5px;
    color: darkblue;
    padding-top: 45px;
    background-color: transparent;
    border-color: transparent;
    font-size: large;
}

.timeline {
    background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(255,209,67,1) 0%, rgba(255,145,83,1) 90% );
    height: 10px;
    border-radius: 5px;
    position: relative;
}

.timeline-bullet {
    color: aliceblue;
    background-color: #FF9751;
    border-radius: 20px;
    padding: 6px;
    text-align: center;
    position: absolute;
    width: 40px;
    transition: 0.3s;
}

    .timeline-bullet:hover {
        width: 100%;
        right: 0px !important;
        z-index: 1;
    }

        .timeline-bullet:hover h7:after {
            content: 'test';
        }

.timeline-container {
    width: 100%;
}

hr.dashed {
    border-top: 2px dashed black;
    background-color: transparent;
    margin: 0px;
}

table.dataTable thead th, table.dataTable thead td, table.dataTable tfoot th, table.dataTable tfoot td {
    text-align: right !important;
}

.dataTables_filter .form-control {
    margin-right: 5px !important;
}

@media(max-width:992px) {
    .card {
        margin-bottom: 30px;
    }
}

.fade {
    transition: opacity .15s linear !important;
}

#resultAlert {
    position: fixed;
    right: 5px;
    bottom: 5px;
    z-index: 10;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    margin-bottom: 0;
}


.border_dashed {
    background-color: #FCF4E5;
    border: dashed;
    border-radius: 5px;
    border-color: darkslategray;
    border-width: 2px;
    color: #083767;
}

    .border_dashed:focus {
        outline: none;
    }

#textarea_Questionnaire_Title {
    font-weight: 500;
    line-height: 1.2;
    font-size: calc(1.375rem + 1.5vw);
    padding: 5px;
    min-width: 60%;
    height: 70px;
}

#input_Section_Title {
    font-weight: 500;
    line-height: 1.2;
    font-size: calc(1.275rem + 0.3vw);
}

#input_Option_Title {
    border-radius: 5px 0px 0px 5px;
}

#textarea_Question_Text {
    width: 50%;
}

textarea.border_dashed {
    resize: both;
    max-width: 100%;
}

#div_Sections {
    border: dashed;
    border-radius: 5px;
    border-color: darkslategray;
    border-width: 2px;
    min-height: 300px;
}

.main-content.row {
    min-height: 0px !important;
}

.input_Score {
    width: 50px;
    border-radius: 0px 5px 5px 0px;
    border-width: 2px;
}

    .input_Score:focus {
        outline: none;
    }


@media (max-width:575px) {

    #btn_Section, #btn_MultiChoice,
    #btn_ShortAns, #btn_LongAns,
    #btn_Option, #btn_MultiAnswer {
        border-radius: 0px;
        margin-top: 0px !important;
    }

    #btn_Section {
        border-radius: 5px 0px 0px 5px;
    }

    #btn_Option {
        border-radius: 0px 5px 5px 0px;
    }
}


.labTest_input {
    display: block;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    appearance: none;
    border-radius: 0px;
}

    .labTest_input:focus {
        outline: none;
    }

.font_bigger {
    font-size: 1.3rem;
}


#lebTestsCreateForm > label > input {
    width: 10rem;
    display: inline-block;
    margin-left: 5px;
    margin-top: 0px;
}

#lebTestsCreateForm > input[type=button] {
    font-size: 1.5rem;
    height: calc(1.9rem + 2px);
    width: calc(1.9rem + 2px);
    padding: 0.1px;
}

.transparent_deleteBtn {
    background-color: transparent;
    font-size: 1.5rem;
    color: darkred;
}

.grouped_deleteBtn {
    /*border-radius: 0px 5px 5px 0px;*/
    /*border: 2px solid darkslategray;*/
    font-size: 1.2rem;
    color: darkred;
    position: relative;
    right: 10px;
    bottom: 10px;
    padding: 0;
}



.list-group-item{
    cursor: pointer;
}

.list-group-item:hover {
    color: blue;
}


.link-loading {
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader {
    border: 5px solid transparent;
    border-radius: 50%;
    border-top: 5px solid white;
    border-right: 5px solid white;
    border-bottom: 5px solid white;
    height: 1vw;
    width: 1vw;
    padding: 5px;
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}


@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

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