#clockdiv, .divCenter, .portfolio-grid {
    text-align: center;
}

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 100%;
    height: auto;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.index {
    flex: 1;
}

.flexOnly {
    display: flex;
}

.flex-item {
    width: auto;
    height: auto;
    margin: 7px;
}
.raw-item {
    width: 5rem;
}

.flexAuto {
    width: auto;
    margin: auto;
}

.teacherMark {
    background-color: #d8d1be;
}

.studentMark {
    right: 10px;
    position: fixed;
    border: 3px solid #73AD21;
    top: 100px;
}
.refreshButton {
    right: 10px;
    position: fixed;
    top: 150px;
}
.studentName {
    right: 10px;
    position: fixed;
    border: 1px dashed #663399;
    top: 45%;
    word-wrap: break-word;
    max-height: fit-content;
    font-family: 'Arial';
    font-weight: bold;
    text-align: center;
    min-height: 15px;
}

.contentScroll {
    width: 66.66666666666666%;
    float: right;
    margin-left: 230px;
    padding-bottom: 30px;
    max-height: 420px;
    overflow: scroll;
    position: relative;
    min-height: 400px;
    padding-right: 15px;
    padding-left: 15px;
}

.FFClass {
    margin-left: 3px;
    margin-right: 3px;
}

.rowDirection {
    -ms-flex-direction: row;
    -o-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
}

.RWClass {
    -webkit-flex: auto;
    -ms-flex: auto;
    -o-flex: auto;
    flex: auto;
    padding: 5px;
    border: 1px solid brown;
    min-width: 90%;
    background-color: #EBEBE4;
}

.examform {
    height: 100%;
    background-color: #fffaf0;
    max-width: 85%;
    margin: auto;
    overflow-y: scroll;
    padding-left: 12px;
    padding-right: 12px;
}

.formexam {
    padding: 0 8px;
    box-shadow: 1px 1px 11px 2px #888;
}

.textareawriting, .textareawritingAnswer, .textareawritingLA {
    display: block;
    font-family: Times New Roman,serif;
    font-size: 14pt;
    padding: .5rem .75rem;
    line-height: 1.25;
    color: #464a4c;
    background-color: #fff;
    word-wrap: break-word;
}

.questiongroup {
    margin-bottom: 15px;
    width: 95%;
    margin-top: 15px;
    min-height: 20px;
}

.dragFi {
    overflow: auto;
}

.btnmarginright {
    margin-right: 10px;
}

.textareawriting, .textareawritingLA {
    margin: auto;
    width: 95%;
}

.textareawriting {
    min-height: 130px;
}

.textareawritingLA {
    min-height: 200px;
}

.textareawritingAnswer {
    width: 87%;
    min-height: 130px;
}

#clockdiv, #clockdiv div > span, #clockdiv > div, .boxFI {
    display: inline-block;
}

.btn-group:hover {
    background-color: #fff;
    color: #000;
    border: 1px solid #e7e7e7;
}

.fieldsetGroup {
    padding: 20px 20px 10px;
    margin-right: 0;
    border: 1px solid silver;
    clear: both;
    margin-left: 0;
    margin-bottom: 20px;
    background-color: #f1f1f1;
    box-shadow: 0 2px 4px 0 #000,0 2px 10px 0 #000 !important;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12) !important;
}

.inputFG, .inputRW {
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: .5px dashed;
}

.btnSubmit {
    color: #FFF;
    background-color: #4CAF50;
}

    .btnSubmit:hover {
        color: #FFF;
        box-shadow: 0 8px 16px 0 #000,0 6px 20px 0 #000;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);
        outline-width: 0;
    }

.circle, .circle-inner, .circle-inner-inner, .circle-small {
    box-shadow: 0 0 5px #000000;
    box-shadow: 0 0 5px rgba(0,0,0,.2);
}

.inputRW {
    margin-left: 1%;
    min-width: 80%;
    width: 90%;
    padding: 5px;
}

.inputFG {
    min-width: 150px;
    background-color: #fff;
    margin-left: 2px;
    padding: 3px;
    margin-right: 2px;
}

#clockdiv {
    font-family: sans-serif;
    color: #fff;
    font-weight: 100;
    font-size: 30px;
}

    #clockdiv > div {
        margin: 1px;
    }

    #clockdiv div > span {
        padding: 15px;
        -ms-border-radius: 3px;
        border-radius: 3px;
        background: #00816A;
    }

.boxFI {
    min-width: 120px;
    margin-left: 2px;
    height: 25px;
    margin-right: 2px;
    border-bottom: 1px solid #000;
    background-color: #f5edb2;
}

.contentsFI {
    width: 100px;
    height: 20px;
}

.spanFI {
    font-size: 20px;
    line-height: 20px;
    margin-left: 20%;
    vertical-align: middle;
}

.cd-top.cd-is-visible {
    visibility: visible;
    opacity: 1;
}

.cd-top.cd-fade-out {
    opacity: .5;
}

.portfolio-grid {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    width: 100%;
}

    .portfolio-grid li {
        color: #1f911f;
        display: inline-block;
        margin: 5px;
        vertical-align: top;
        min-width: 200px;
        width: fit-content;
        height: auto;
        text-align: center;
    }

    .portfolio-grid div {
        width: fit-content;
        padding: 5px;
        height: 100%;
        margin: auto;
    }

.marginBottom {
    margin-bottom: 20px;
}

.marginBottom2 {
    margin-bottom: 2.5%;
}

.box1 {
    margin-bottom: 5%;
    position: relative;
    display: block;
    padding: 5px;
    background-color: #fff;
}

.customcontainer {
    display: flex;
    padding: 20px 20px 10px;
    clear: both;
    margin: 20px 0;
}

.licustom {
    display: flex;
    min-height: 35px;
    margin-bottom: 5%;
}

.flex {
    width: 45%;
    padding: 10px;
}

.dropClass, .fitContent {
    width: fit-content;
}

.dropClass {
    display: inline-block;
    min-width: 120px;
    min-height: 25px;
    margin-right: 2px;
    padding: 5px;
    border: 1px solid #332e2e;
    background-color: #f5edb2;
}

#myBtn, #return-to-top {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 999;
    outline: 0;
    background-color: #078a05;
    cursor: pointer;
    padding: 15px;
    color: #fff;
}

.fixedright, .studentMark {
    right: 10px;
    position: fixed;
}

#myBtn, #return-to-top {
    background-color: rgba(7,138,5,.5);
}

#myBtn {
    border: none;
    border-radius: 50%;
}

    #myBtn:hover, #return-to-top:hover {
        background-color: #555;
    }

#return-to-top {
    border: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.liPA, .liRA, .move {
    cursor: move;
}

#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

#return-to-top:hover i {
    color: #fff;
    top: 5px;
}

.fitContentHeight {
    height: 200px;
    min-height: 200px;
    text-align: center;
    overflow-y: scroll;
    word-wrap: break-word;
}

.green {
    color: green;
}

.red {
    color: red;
}

.none-style {
    list-style-type: none;
}

.textLeft {
    text-align: left;
}

.lineHeight {
    line-height: 2;
}

@media (min-width:768px) {
    .modal-dialog.as-container {
        width: 750px;
    }
}

@media (min-width:992px) {
    .modal-dialog.as-container {
        width: 970px;
    }
}

@media (min-width:1200px) {
    .modal-dialog.as-container {
        width: 1170px;
    }
}

.dialogPopup {
    width: 75%;
}

.liPA, .liRA, .placeholder {
    border: 2px solid green;
    color: #000;
    width: fit-content;
    list-style-type: none;
}

.modal-dialog.as-container .modal-content {
    float: none;
    margin: auto;
}

.liRA {
    padding: 10px;
    margin: 10px;
}

.liPA {
    padding: 5px;
    margin: 10px;
}

.placeholder {
    padding: 10px;
    margin: 10px;
    background-color: silver;
}

.containerLA {
    display: flex;
    flex-direction: row;
    padding-left: 10px;
    padding-bottom: 40px;
}

.submitButton {
    margin: 10px;
    width: 100%;
    padding-left: 40px;
}

.studentMark {
    border: 3px solid #73AD21;
    top: 100px;
}

.main-controls, .rightAnswer {
    padding: .5rem 0;
}

canvas {
    display: block;
    margin-bottom: .5rem;
}

.buttons {
    display: flex;
    flex-direction: row;
    padding-left: 10px;
    padding-bottom: 40px;
}

.marginLeft {
    margin-left: 10px;
}

.automargin {
    margin: auto;
    width: fit-content;
    width: -moz-fit-contentt-content;
}

.visualizer {
    height: 60px;
}

.inputMark {
    font-size: 1.2em;
    color: red;
}

.paddingLeft {
    padding-left: 40px;
}

.backGreen {
    background-color: #adff2f;
}

.fixedleft {
    position: fixed;
    height: 50%;
    margin-left: -2%;
    width: 12%;
}

.fixedright {
    display: flex;
    float: right;
    width: 8%;
    height: 30px;
    border: 2px solid #00f;
    margin-left: -1%;
    z-index: 999;
    justify-content: center;
    color: red;
    font-weight: 700;
}

.circle, .circle-big, .circle-inner, .circle-inner-inner, .circle-small {
    display: block;
    top: 50%;
    left: 50%;
    position: fixed;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: #eee;
}

.circle {
    width: 180px;
    height: 180px;
    border: 10px inset #85e0f2;
    margin-left: -100px;
    margin-top: -100px;
    border-radius: 200px;
    -moz-animation: rotate 5s infinitelinear;
    -webkit-animation: rotate 5s infinite linear;
    animation: rotate 5s infinite linear;
}

.circle-small {
    width: 150px;
    height: 150px;
    border: 6px outset #85e0f2;
    margin-left: -81px;
    margin-top: -81px;
    border-radius: 156px;
    -moz-animation: rotate-rev 3s infinite linear;
    -webkit-animation: rotate-rev 3s infinite linear;
    animation: rotate-rev 3s infinite linear;
}

.circle-big {
    width: 210px;
    height: 210px;
    border: 4px dotted #85e0f2;
    margin-left: -109px;
    margin-top: -109px;
    border-radius: 214px;
    -moz-animation: rotate-rev 10s infinite linear;
    -webkit-animation: rotate-rev 10s infinite linear;
    animation: rotate-rev 10s infinite linear;
}

.circle-inner {
    width: 80px;
    height: 80px;
    background-color: #85e0f2;
    margin-left: -40px;
    margin-top: -40px;
    border-radius: 80px;
    -moz-animation: pulse 1.5s infinite ease-in;
    -webkit-animation: pulse 1.5s infinite ease-in;
    animation: pulse 1.5s infinite ease-in;
    opacity: 1;
}

.circle-inner-inner {
    width: 100px;
    height: 100px;
    background-color: #4a7c86;
    margin-left: -50px;
    margin-top: -50px;
    border-radius: 100px;
    -moz-animation: pulse 1.5s infinite ease-in;
    -webkit-animation: pulse 1.5s infinite ease-in;
    animation: pulse 1.5s infinite ease-in;
}

@-moz-keyframes rotate {
    0% {
        -moz-transform: rotate(0);
    }

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

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

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

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

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

@-moz-keyframes rotate-rev {
    0% {
        -moz-transform: rotate(0);
    }

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

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

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

@keyframes rotate-rev {
    0% {
        transform: rotate(0);
    }

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

@-moz-keyframes pulse {
    0%,100% {
        -moz-transform: scale(.1);
        opacity: .2;
    }

    50% {
        -moz-transform: scale(1);
        opacity: .8;
    }
}

@-webkit-keyframes pulse {
    0%,100% {
        -webkit-transform: scale(.1);
        opacity: .2;
    }

    50% {
        -webkit-transform: scale(1);
        opacity: .8;
    }
}

@keyframes pulse {
    0%,100% {
        transform: scale(.1);
        opacity: .2;
    }

    50% {
        transform: scale(1);
        opacity: .8;
    }
}

.to-top {
    position: fixed;
    z-index: 9999;
    bottom: 0;
    right: 0;
    display: none;
}

.spinner-circle {
    top: calc(50% - 30px);
    left: calc(50% - 30px);
    width: 51.2px;
    height: 51.2px;
    border-width: 12.8px;
    border-color: #555 transparent;
    opacity: .7;
    -webkit-animation: spinner-rotate-outer 2s 0s ease-in-out infinite;
    -moz-animation: spinner-rotate-outer 2s ease-in-out infinite;
    -o-animation: spinner-rotate-outer 2s ease-in-out infinite;
    -ms-animation: spinner-rotate-outer 2s ease-in-out infinite;
    animation: spinner-rotate-outer 2s ease-in-out infinite;
}

    .spinner-circle .text {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin-top: 1.6em;
        text-align: center;
        font-size: 80%;
        color: hsla(0,0%,0%,.4);
    }

    .spinner-circle, .spinner-circle:after, .spinner-circle:before {
        position: absolute;
        background-color: transparent;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        border-style: solid;
    }

        .spinner-circle:before {
            content: '';
            position: absolute;
            width: 25.6px;
            height: 25.6px;
            border-width: 6.4px;
            border-color: #000 transparent;
            top: 7px;
            left: 7px;
            opacity: .9;
            -webkit-animation: spinner-rotate-inner 3s linear infinite;
            -moz-animation: spinner-rotate-inner 3s linear infinite;
            -o-animation: spinner-rotate-inner 3s linear infinite;
            -ms-animation: spinner-rotate-inner 3s linear infinite;
            animation: spinner-rotate-inner 3s linear infinite;
        }

        .spinner-circle:after {
            content: '';
            width: 0;
            height: 0;
            border-width: 28.4px;
            top: -2.1px;
            left: -3.2px;
            opacity: .6;
            -webkit-animation: spinner-rotate-single-2 7s 0s ease-in-out infinite;
            -moz-animation: spinner-rotate-single-2 7s 0s ease-in-out infinite;
            -o-animation: spinner-rotate-single-2 7s 0s ease-in-out infinite;
            -ms-animation: spinner-rotate-single-2 7s 0s ease-in-out infinite;
            animation: spinner-rotate-single-2 7s 0s ease-in-out infinite;
            border-color: transparent transparent transparent #4dc3ff;
            -webkit-box-shadow: 2px 0 2px #4dc3ff;
            box-shadow: 2px 0 2px #4dc3ff;
        }

@-webkit-keyframes spinner-rotate-outer {
    0% {
        -webkit-transform: rotateZ(0);
        -moz-transform: rotateZ(0);
        -o-transform: rotateZ(0);
        -ms-transform: rotateZ(0);
        transform: rotateZ(0);
    }

    100% {
        -webkit-transform: rotateZ(360deg);
        -moz-transform: rotateZ(360deg);
        -o-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
}

@-o-keyframes spinner-rotate-outer {
    0% {
        -webkit-transform: rotateZ(0);
        -moz-transform: rotateZ(0);
        -o-transform: rotateZ(0);
        -ms-transform: rotateZ(0);
        transform: rotateZ(0);
    }

    100% {
        -webkit-transform: rotateZ(360deg);
        -moz-transform: rotateZ(360deg);
        -o-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
}

@-ms-keyframes spinner-rotate-outer {
    0% {
        -webkit-transform: rotateZ(0);
        -moz-transform: rotateZ(0);
        -o-transform: rotateZ(0);
        -ms-transform: rotateZ(0);
        transform: rotateZ(0);
    }

    100% {
        -webkit-transform: rotateZ(360deg);
        -moz-transform: rotateZ(360deg);
        -o-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
}

@keyframes spinner-rotate-outer {
    0% {
        -webkit-transform: rotateZ(0);
        -moz-transform: rotateZ(0);
        -o-transform: rotateZ(0);
        -ms-transform: rotateZ(0);
        transform: rotateZ(0);
    }

    100% {
        -webkit-transform: rotateZ(360deg);
        -moz-transform: rotateZ(360deg);
        -o-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
    }
}

@-webkit-keyframes spinner-rotate-inner {
    0% {
        -webkit-transform: rotateZ(60deg);
        -moz-transform: rotateZ(60deg);
        -o-transform: rotateZ(60deg);
        -ms-transform: rotateZ(60deg);
        transform: rotateZ(60deg);
    }

    100% {
        -webkit-transform: rotateZ(420deg);
        -moz-transform: rotateZ(420deg);
        -o-transform: rotateZ(420deg);
        -ms-transform: rotateZ(420deg);
        transform: rotateZ(420deg);
    }
}

@-o-keyframes spinner-rotate-inner {
    0% {
        -webkit-transform: rotateZ(60deg);
        -moz-transform: rotateZ(60deg);
        -o-transform: rotateZ(60deg);
        -ms-transform: rotateZ(60deg);
        transform: rotateZ(60deg);
    }

    100% {
        -webkit-transform: rotateZ(420deg);
        -moz-transform: rotateZ(420deg);
        -o-transform: rotateZ(420deg);
        -ms-transform: rotateZ(420deg);
        transform: rotateZ(420deg);
    }
}

@-ms-keyframes spinner-rotate-inner {
    0% {
        -webkit-transform: rotateZ(60deg);
        -moz-transform: rotateZ(60deg);
        -o-transform: rotateZ(60deg);
        -ms-transform: rotateZ(60deg);
        transform: rotateZ(60deg);
    }

    100% {
        -webkit-transform: rotateZ(420deg);
        -moz-transform: rotateZ(420deg);
        -o-transform: rotateZ(420deg);
        -ms-transform: rotateZ(420deg);
        transform: rotateZ(420deg);
    }
}

@keyframes spinner-rotate-inner {
    0% {
        -webkit-transform: rotateZ(60deg);
        -moz-transform: rotateZ(60deg);
        -o-transform: rotateZ(60deg);
        -ms-transform: rotateZ(60deg);
        transform: rotateZ(60deg);
    }

    100% {
        -webkit-transform: rotateZ(420deg);
        -moz-transform: rotateZ(420deg);
        -o-transform: rotateZ(420deg);
        -ms-transform: rotateZ(420deg);
        transform: rotateZ(420deg);
    }
}

@-moz-keyframes spinner-rotate-single-1 {
    0%,100% {
        -webkit-transform: rotateZ(56deg);
        -moz-transform: rotateZ(56deg);
        -o-transform: rotateZ(56deg);
        -ms-transform: rotateZ(56deg);
        transform: rotateZ(56deg);
    }

    20% {
        -webkit-transform: rotateZ(-132deg);
        -moz-transform: rotateZ(-132deg);
        -o-transform: rotateZ(-132deg);
        -ms-transform: rotateZ(-132deg);
        transform: rotateZ(-132deg);
    }

    40% {
        -webkit-transform: rotateZ(-250deg);
        -moz-transform: rotateZ(-250deg);
        -o-transform: rotateZ(-250deg);
        -ms-transform: rotateZ(-250deg);
        transform: rotateZ(-250deg);
    }

    60% {
        -webkit-transform: rotateZ(40deg);
        -moz-transform: rotateZ(40deg);
        -o-transform: rotateZ(40deg);
        -ms-transform: rotateZ(40deg);
        transform: rotateZ(40deg);
    }

    70% {
        -webkit-transform: rotateZ(-80deg);
        -moz-transform: rotateZ(-80deg);
        -o-transform: rotateZ(-80deg);
        -ms-transform: rotateZ(-80deg);
        transform: rotateZ(-80deg);
    }
}

@-webkit-keyframes spinner-rotate-single-1 {
    0%,100% {
        -webkit-transform: rotateZ(56deg);
        -moz-transform: rotateZ(56deg);
        -o-transform: rotateZ(56deg);
        -ms-transform: rotateZ(56deg);
        transform: rotateZ(56deg);
    }

    20% {
        -webkit-transform: rotateZ(-132deg);
        -moz-transform: rotateZ(-132deg);
        -o-transform: rotateZ(-132deg);
        -ms-transform: rotateZ(-132deg);
        transform: rotateZ(-132deg);
    }

    40% {
        -webkit-transform: rotateZ(-250deg);
        -moz-transform: rotateZ(-250deg);
        -o-transform: rotateZ(-250deg);
        -ms-transform: rotateZ(-250deg);
        transform: rotateZ(-250deg);
    }

    60% {
        -webkit-transform: rotateZ(40deg);
        -moz-transform: rotateZ(40deg);
        -o-transform: rotateZ(40deg);
        -ms-transform: rotateZ(40deg);
        transform: rotateZ(40deg);
    }

    70% {
        -webkit-transform: rotateZ(-80deg);
        -moz-transform: rotateZ(-80deg);
        -o-transform: rotateZ(-80deg);
        -ms-transform: rotateZ(-80deg);
        transform: rotateZ(-80deg);
    }
}

@-o-keyframes spinner-rotate-single-1 {
    0%,100% {
        -webkit-transform: rotateZ(56deg);
        -moz-transform: rotateZ(56deg);
        -o-transform: rotateZ(56deg);
        -ms-transform: rotateZ(56deg);
        transform: rotateZ(56deg);
    }

    20% {
        -webkit-transform: rotateZ(-132deg);
        -moz-transform: rotateZ(-132deg);
        -o-transform: rotateZ(-132deg);
        -ms-transform: rotateZ(-132deg);
        transform: rotateZ(-132deg);
    }

    40% {
        -webkit-transform: rotateZ(-250deg);
        -moz-transform: rotateZ(-250deg);
        -o-transform: rotateZ(-250deg);
        -ms-transform: rotateZ(-250deg);
        transform: rotateZ(-250deg);
    }

    60% {
        -webkit-transform: rotateZ(40deg);
        -moz-transform: rotateZ(40deg);
        -o-transform: rotateZ(40deg);
        -ms-transform: rotateZ(40deg);
        transform: rotateZ(40deg);
    }

    70% {
        -webkit-transform: rotateZ(-80deg);
        -moz-transform: rotateZ(-80deg);
        -o-transform: rotateZ(-80deg);
        -ms-transform: rotateZ(-80deg);
        transform: rotateZ(-80deg);
    }
}

@-ms-keyframes spinner-rotate-single-1 {
    0%,100% {
        -webkit-transform: rotateZ(56deg);
        -moz-transform: rotateZ(56deg);
        -o-transform: rotateZ(56deg);
        -ms-transform: rotateZ(56deg);
        transform: rotateZ(56deg);
    }

    20% {
        -webkit-transform: rotateZ(-132deg);
        -moz-transform: rotateZ(-132deg);
        -o-transform: rotateZ(-132deg);
        -ms-transform: rotateZ(-132deg);
        transform: rotateZ(-132deg);
    }

    40% {
        -webkit-transform: rotateZ(-250deg);
        -moz-transform: rotateZ(-250deg);
        -o-transform: rotateZ(-250deg);
        -ms-transform: rotateZ(-250deg);
        transform: rotateZ(-250deg);
    }

    60% {
        -webkit-transform: rotateZ(40deg);
        -moz-transform: rotateZ(40deg);
        -o-transform: rotateZ(40deg);
        -ms-transform: rotateZ(40deg);
        transform: rotateZ(40deg);
    }

    70% {
        -webkit-transform: rotateZ(-80deg);
        -moz-transform: rotateZ(-80deg);
        -o-transform: rotateZ(-80deg);
        -ms-transform: rotateZ(-80deg);
        transform: rotateZ(-80deg);
    }
}

@keyframes spinner-rotate-single-1 {
    0%,100% {
        -webkit-transform: rotateZ(56deg);
        -moz-transform: rotateZ(56deg);
        -o-transform: rotateZ(56deg);
        -ms-transform: rotateZ(56deg);
        transform: rotateZ(56deg);
    }

    20% {
        -webkit-transform: rotateZ(-132deg);
        -moz-transform: rotateZ(-132deg);
        -o-transform: rotateZ(-132deg);
        -ms-transform: rotateZ(-132deg);
        transform: rotateZ(-132deg);
    }

    40% {
        -webkit-transform: rotateZ(-250deg);
        -moz-transform: rotateZ(-250deg);
        -o-transform: rotateZ(-250deg);
        -ms-transform: rotateZ(-250deg);
        transform: rotateZ(-250deg);
    }

    60% {
        -webkit-transform: rotateZ(40deg);
        -moz-transform: rotateZ(40deg);
        -o-transform: rotateZ(40deg);
        -ms-transform: rotateZ(40deg);
        transform: rotateZ(40deg);
    }

    70% {
        -webkit-transform: rotateZ(-80deg);
        -moz-transform: rotateZ(-80deg);
        -o-transform: rotateZ(-80deg);
        -ms-transform: rotateZ(-80deg);
        transform: rotateZ(-80deg);
    }
}

@-moz-keyframes spinner-rotate-single-2 {
    0%,100% {
        -webkit-transform: rotateZ(-24deg);
        -moz-transform: rotateZ(-24deg);
        -o-transform: rotateZ(-24deg);
        -ms-transform: rotateZ(-24deg);
        transform: rotateZ(-24deg);
    }

    10% {
        -webkit-transform: rotateZ(142deg);
        -moz-transform: rotateZ(142deg);
        -o-transform: rotateZ(142deg);
        -ms-transform: rotateZ(142deg);
        transform: rotateZ(142deg);
    }

    20% {
        -webkit-transform: rotateZ(-87deg);
        -moz-transform: rotateZ(-87deg);
        -o-transform: rotateZ(-87deg);
        -ms-transform: rotateZ(-87deg);
        transform: rotateZ(-87deg);
    }

    30% {
        -webkit-transform: rotateZ(-345deg);
        -moz-transform: rotateZ(-345deg);
        -o-transform: rotateZ(-345deg);
        -ms-transform: rotateZ(-345deg);
        transform: rotateZ(-345deg);
    }

    40% {
        -webkit-transform: rotateZ(86deg);
        -moz-transform: rotateZ(86deg);
        -o-transform: rotateZ(86deg);
        -ms-transform: rotateZ(86deg);
        transform: rotateZ(86deg);
    }

    50% {
        -webkit-transform: rotateZ(175deg);
        -moz-transform: rotateZ(175deg);
        -o-transform: rotateZ(175deg);
        -ms-transform: rotateZ(175deg);
        transform: rotateZ(175deg);
    }

    60% {
        -webkit-transform: rotateZ(-245deg);
        -moz-transform: rotateZ(-245deg);
        -o-transform: rotateZ(-245deg);
        -ms-transform: rotateZ(-245deg);
        transform: rotateZ(-245deg);
    }

    70% {
        -webkit-transform: rotateZ(4deg);
        -moz-transform: rotateZ(4deg);
        -o-transform: rotateZ(4deg);
        -ms-transform: rotateZ(4deg);
        transform: rotateZ(4deg);
    }

    80% {
        -webkit-transform: rotateZ(-132deg);
        -moz-transform: rotateZ(-132deg);
        -o-transform: rotateZ(-132deg);
        -ms-transform: rotateZ(-132deg);
        transform: rotateZ(-132deg);
    }

    90% {
        -webkit-transform: rotateZ(345deg);
        -moz-transform: rotateZ(345deg);
        -o-transform: rotateZ(345deg);
        -ms-transform: rotateZ(345deg);
        transform: rotateZ(345deg);
    }
}

@-webkit-keyframes spinner-rotate-single-2 {
    0%,100% {
        -webkit-transform: rotateZ(-24deg);
        -moz-transform: rotateZ(-24deg);
        -o-transform: rotateZ(-24deg);
        -ms-transform: rotateZ(-24deg);
        transform: rotateZ(-24deg);
    }

    10% {
        -webkit-transform: rotateZ(142deg);
        -moz-transform: rotateZ(142deg);
        -o-transform: rotateZ(142deg);
        -ms-transform: rotateZ(142deg);
        transform: rotateZ(142deg);
    }

    20% {
        -webkit-transform: rotateZ(-87deg);
        -moz-transform: rotateZ(-87deg);
        -o-transform: rotateZ(-87deg);
        -ms-transform: rotateZ(-87deg);
        transform: rotateZ(-87deg);
    }

    30% {
        -webkit-transform: rotateZ(-345deg);
        -moz-transform: rotateZ(-345deg);
        -o-transform: rotateZ(-345deg);
        -ms-transform: rotateZ(-345deg);
        transform: rotateZ(-345deg);
    }

    40% {
        -webkit-transform: rotateZ(86deg);
        -moz-transform: rotateZ(86deg);
        -o-transform: rotateZ(86deg);
        -ms-transform: rotateZ(86deg);
        transform: rotateZ(86deg);
    }

    50% {
        -webkit-transform: rotateZ(175deg);
        -moz-transform: rotateZ(175deg);
        -o-transform: rotateZ(175deg);
        -ms-transform: rotateZ(175deg);
        transform: rotateZ(175deg);
    }

    60% {
        -webkit-transform: rotateZ(-245deg);
        -moz-transform: rotateZ(-245deg);
        -o-transform: rotateZ(-245deg);
        -ms-transform: rotateZ(-245deg);
        transform: rotateZ(-245deg);
    }

    70% {
        -webkit-transform: rotateZ(4deg);
        -moz-transform: rotateZ(4deg);
        -o-transform: rotateZ(4deg);
        -ms-transform: rotateZ(4deg);
        transform: rotateZ(4deg);
    }

    80% {
        -webkit-transform: rotateZ(-132deg);
        -moz-transform: rotateZ(-132deg);
        -o-transform: rotateZ(-132deg);
        -ms-transform: rotateZ(-132deg);
        transform: rotateZ(-132deg);
    }

    90% {
        -webkit-transform: rotateZ(345deg);
        -moz-transform: rotateZ(345deg);
        -o-transform: rotateZ(345deg);
        -ms-transform: rotateZ(345deg);
        transform: rotateZ(345deg);
    }
}

@-o-keyframes spinner-rotate-single-2 {
    0%,100% {
        -webkit-transform: rotateZ(-24deg);
        -moz-transform: rotateZ(-24deg);
        -o-transform: rotateZ(-24deg);
        -ms-transform: rotateZ(-24deg);
        transform: rotateZ(-24deg);
    }

    10% {
        -webkit-transform: rotateZ(142deg);
        -moz-transform: rotateZ(142deg);
        -o-transform: rotateZ(142deg);
        -ms-transform: rotateZ(142deg);
        transform: rotateZ(142deg);
    }

    20% {
        -webkit-transform: rotateZ(-87deg);
        -moz-transform: rotateZ(-87deg);
        -o-transform: rotateZ(-87deg);
        -ms-transform: rotateZ(-87deg);
        transform: rotateZ(-87deg);
    }

    30% {
        -webkit-transform: rotateZ(-345deg);
        -moz-transform: rotateZ(-345deg);
        -o-transform: rotateZ(-345deg);
        -ms-transform: rotateZ(-345deg);
        transform: rotateZ(-345deg);
    }

    40% {
        -webkit-transform: rotateZ(86deg);
        -moz-transform: rotateZ(86deg);
        -o-transform: rotateZ(86deg);
        -ms-transform: rotateZ(86deg);
        transform: rotateZ(86deg);
    }

    50% {
        -webkit-transform: rotateZ(175deg);
        -moz-transform: rotateZ(175deg);
        -o-transform: rotateZ(175deg);
        -ms-transform: rotateZ(175deg);
        transform: rotateZ(175deg);
    }

    60% {
        -webkit-transform: rotateZ(-245deg);
        -moz-transform: rotateZ(-245deg);
        -o-transform: rotateZ(-245deg);
        -ms-transform: rotateZ(-245deg);
        transform: rotateZ(-245deg);
    }

    70% {
        -webkit-transform: rotateZ(4deg);
        -moz-transform: rotateZ(4deg);
        -o-transform: rotateZ(4deg);
        -ms-transform: rotateZ(4deg);
        transform: rotateZ(4deg);
    }

    80% {
        -webkit-transform: rotateZ(-132deg);
        -moz-transform: rotateZ(-132deg);
        -o-transform: rotateZ(-132deg);
        -ms-transform: rotateZ(-132deg);
        transform: rotateZ(-132deg);
    }

    90% {
        -webkit-transform: rotateZ(345deg);
        -moz-transform: rotateZ(345deg);
        -o-transform: rotateZ(345deg);
        -ms-transform: rotateZ(345deg);
        transform: rotateZ(345deg);
    }
}

@-ms-keyframes spinner-rotate-single-2 {
    0%,100% {
        -webkit-transform: rotateZ(-24deg);
        -moz-transform: rotateZ(-24deg);
        -o-transform: rotateZ(-24deg);
        -ms-transform: rotateZ(-24deg);
        transform: rotateZ(-24deg);
    }

    10% {
        -webkit-transform: rotateZ(142deg);
        -moz-transform: rotateZ(142deg);
        -o-transform: rotateZ(142deg);
        -ms-transform: rotateZ(142deg);
        transform: rotateZ(142deg);
    }

    20% {
        -webkit-transform: rotateZ(-87deg);
        -moz-transform: rotateZ(-87deg);
        -o-transform: rotateZ(-87deg);
        -ms-transform: rotateZ(-87deg);
        transform: rotateZ(-87deg);
    }

    30% {
        -webkit-transform: rotateZ(-345deg);
        -moz-transform: rotateZ(-345deg);
        -o-transform: rotateZ(-345deg);
        -ms-transform: rotateZ(-345deg);
        transform: rotateZ(-345deg);
    }

    40% {
        -webkit-transform: rotateZ(86deg);
        -moz-transform: rotateZ(86deg);
        -o-transform: rotateZ(86deg);
        -ms-transform: rotateZ(86deg);
        transform: rotateZ(86deg);
    }

    50% {
        -webkit-transform: rotateZ(175deg);
        -moz-transform: rotateZ(175deg);
        -o-transform: rotateZ(175deg);
        -ms-transform: rotateZ(175deg);
        transform: rotateZ(175deg);
    }

    60% {
        -webkit-transform: rotateZ(-245deg);
        -moz-transform: rotateZ(-245deg);
        -o-transform: rotateZ(-245deg);
        -ms-transform: rotateZ(-245deg);
        transform: rotateZ(-245deg);
    }

    70% {
        -webkit-transform: rotateZ(4deg);
        -moz-transform: rotateZ(4deg);
        -o-transform: rotateZ(4deg);
        -ms-transform: rotateZ(4deg);
        transform: rotateZ(4deg);
    }

    80% {
        -webkit-transform: rotateZ(-132deg);
        -moz-transform: rotateZ(-132deg);
        -o-transform: rotateZ(-132deg);
        -ms-transform: rotateZ(-132deg);
        transform: rotateZ(-132deg);
    }

    90% {
        -webkit-transform: rotateZ(345deg);
        -moz-transform: rotateZ(345deg);
        -o-transform: rotateZ(345deg);
        -ms-transform: rotateZ(345deg);
        transform: rotateZ(345deg);
    }
}

@keyframes spinner-rotate-single-2 {
    0%,100% {
        -webkit-transform: rotateZ(-24deg);
        -moz-transform: rotateZ(-24deg);
        -o-transform: rotateZ(-24deg);
        -ms-transform: rotateZ(-24deg);
        transform: rotateZ(-24deg);
    }

    10% {
        -webkit-transform: rotateZ(142deg);
        -moz-transform: rotateZ(142deg);
        -o-transform: rotateZ(142deg);
        -ms-transform: rotateZ(142deg);
        transform: rotateZ(142deg);
    }

    20% {
        -webkit-transform: rotateZ(-87deg);
        -moz-transform: rotateZ(-87deg);
        -o-transform: rotateZ(-87deg);
        -ms-transform: rotateZ(-87deg);
        transform: rotateZ(-87deg);
    }

    30% {
        -webkit-transform: rotateZ(-345deg);
        -moz-transform: rotateZ(-345deg);
        -o-transform: rotateZ(-345deg);
        -ms-transform: rotateZ(-345deg);
        transform: rotateZ(-345deg);
    }

    40% {
        -webkit-transform: rotateZ(86deg);
        -moz-transform: rotateZ(86deg);
        -o-transform: rotateZ(86deg);
        -ms-transform: rotateZ(86deg);
        transform: rotateZ(86deg);
    }

    50% {
        -webkit-transform: rotateZ(175deg);
        -moz-transform: rotateZ(175deg);
        -o-transform: rotateZ(175deg);
        -ms-transform: rotateZ(175deg);
        transform: rotateZ(175deg);
    }

    60% {
        -webkit-transform: rotateZ(-245deg);
        -moz-transform: rotateZ(-245deg);
        -o-transform: rotateZ(-245deg);
        -ms-transform: rotateZ(-245deg);
        transform: rotateZ(-245deg);
    }

    70% {
        -webkit-transform: rotateZ(4deg);
        -moz-transform: rotateZ(4deg);
        -o-transform: rotateZ(4deg);
        -ms-transform: rotateZ(4deg);
        transform: rotateZ(4deg);
    }

    80% {
        -webkit-transform: rotateZ(-132deg);
        -moz-transform: rotateZ(-132deg);
        -o-transform: rotateZ(-132deg);
        -ms-transform: rotateZ(-132deg);
        transform: rotateZ(-132deg);
    }

    90% {
        -webkit-transform: rotateZ(345deg);
        -moz-transform: rotateZ(345deg);
        -o-transform: rotateZ(345deg);
        -ms-transform: rotateZ(345deg);
        transform: rotateZ(345deg);
    }
}

.wordWrap {
    word-wrap: break-word;
}

.wrongAnswer {
    background-color: #b7191961;
    background-color: rgba(183, 25, 25, 0.38);
    min-width: 100px;
    border: gray solid 1px;
    margin: 2px;
    width: fit-content;
}

.rightAnswer {
    background-color: greenyellow;
    min-width: 100px;
    margin: 2px;
    width: fit-content;
    border: gray solid 1px;
}

.correntAnswer {
    background-color: yellow;
    min-width: 100px;
    width: fit-content;
    margin: 2px;
    border: gray solid 1px;
    padding: 2px;
}

.flexHalfLeft {
    width: 35%;
}

.flexHalfRight {
    width: 60%;
}

.form-control {
    height: 30px;
}

input[type='file'] {
    color: transparent;
}

.custom-inputfile {
    font-size: 14px;
}

.removefile {
    width: 77px;
}

.showtree, .toexpand, .removerow {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.showtree, .toexpand {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('../sysimage/hide.PNG');
}

.downlevel {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('../sysimage/down.png');
    height: 20px;
    width: 20px;
    margin: 0 10px 0 10px;
}

.uplevel {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('../sysimage/up.png');
    height: 20px;
    width: 20px;
    margin: 0 10px 0 0px;
}

.controltree {
    height: 25px;
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    float: left;
}

.showtree2 {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('../sysimage/left.png');
    height: 20px;
    width: 20px;
    margin-left: 10px;
}

.showtree {
    height: 25px;
    float: left;
    padding-bottom: 18px;
    /* Center and scale the image nicely */
}

.Select-control, .Select-input, .form-control {
    height: 30px;
}

.Select--single > .Select-control .Select-value, .Select-placeholder {
    line-height: 25px;
}

#divtree {
    padding-left: 0;
    padding-right: 0;
    border-top: 1px solid #c0c0c0;
}

.custom-font-size, .form-control {
    font-size: 13px;
}

.dropdowntree-name, .dropdown-menu {
    font-size: 17px;
}

.form-group {
    margin-bottom: 7px;
}

.autocomplete {
    /*the container must be positioned relative:*/
    position: relative;
    display: inline-block;
}

.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
}

    .autocomplete-items div {
        padding: 10px;
        cursor: pointer;
        background-color: #fff;
        border-bottom: 1px solid #d4d4d4;
        height: 25px;
        line-height: 1px;
    }

        .autocomplete-items div:hover {
            /*when hovering an item:*/
            background-color: #e9e9e9;
        }

.autocomplete-active {
    /*when navigating through the items using the arrow keys:*/
    background-color: DodgerBlue !important;
    color: #ffffff;
}

.child-modal {
    width: 70%;
    margin: 0 auto;
}

.ag-header-cell-label .ag-header-cell-text {
    white-space: normal !important;
}
/*.ag-scrolls .ag-row {
    position: initial;
    white-space: nowrap;
    width: 100%;
}*/
.toexpand {
    height: 16px;
    width: 16px;
}

.modal-dialog {
    overflow-y: initial !important;
}

.scroll_popup {
    height: 600px;
    overflow-y: auto;
}

.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > .pull-right-container {
    left: 250px !important;
}

.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right), .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
    width: 250px !important;
}

.ag-fresh {
    font-size: 13px;
}

.heightGrid {
    width: 100%;
    height: 70vh;
    max-height: 700px;
    min-height: 400px;
}

.modalGrid {
    width: 100%;
    height: 50vh;
    max-height: 500px;
    min-height: 400px;
}


.mediumGrid {
    width: 100%;
    height: 400px;
    max-height: 415px;
    min-height: 350px;
}

.smallGrid {
    width: 100%;
    height: 200px;
    max-height: 200px;
    min-height: 200px;
}

.popupGrid {
    width: 100%;
    height: 300px;
    max-height: 300px;
    min-height: 200px;
}

.customInput {
    margin-left: -15px;
    width: 116px;
}

.col125 {
    width: 125px !important;
}

.margintop4 {
    margin-top: 4px !important;
}

.colxs4Custom {
    width: 325px;
    margin: 0;
    padding: 0;
}

.sourceXS1 {
    width: 30px;
    font-size: 20px;
}

.smallcontrol {
    width: 80px;
    margin-left: -8px;
}

.tinyControl {
    width: 145px;
}

.smallestControl {
    width: 80px;
}

.col80 {
    width: 80px;
}

.flexCustom {
    display: inline-flex;
    flex-direction: row;
}

.col40 {
    width: 40px;
}

.margin4 {
    margin: 4px;
}

.col135 {
    width: 135px;
    text-align: center;
}

.scrollauto {
    -webkit-overflow-scrolling: touch; /* Lets it scroll lazy */
    -webkit-overflow-scrolling: auto; /* Stops scrolling immediately */
}

/*loading*/
div.parentLoading {
    border: 5px solid transparent;
    border-top: 5px solid #ff8330;
    border-radius: 200px;
    -webkit-animation: spin 2s infinite linear;
}

.first {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

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

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

.datetime {
    color: black;
}

.separatorjs {
    font-weight: bold;
    color: black;
}

.inputnumber {
    font-weight: bold;
    color: black;
}

.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: #fff;
    border-bottom: 1px solid #d4d4d4;
    height: 25px;
    line-height: 1px;
    border-radius: 2px;
    overflow-x: hidden;
}

    .autocomplete-items div:hover {
        /*when hovering an item:*/
        background-color: #abe65d;
        background-color: rgb(171, 230, 93);
        ;
    }

.huge-dialog {
    width: 85% !important;
}

.big-dialog {
    width: 75%;
}

.small-dialog {
    width: 35%;
}


#parent {
    position: absolute;
    height: 100%;
    min-height: 500px;
    margin: 0;
    padding: 0;
    width: 100%;
}

#div1 {
    position: relative;
    float: left;
    min-height: 500px;
    height: 100%;
    width: 50%;
    background-color: #A2A;
}

#div2 {
    position: relative;
    float: left;
    min-height: 500px;
    height: 100%;
    width: 40%;
    background-color: #BBB;
}

.glyphicon-refresh-animate {
    -animation: spin .7s infinite linear;
    -webkit-animation: spin2 .7s infinite linear;
    font-size: 22px;
}

@-webkit-keyframes spin2 {
    from {
        -webkit-transform: rotate(0deg);
    }

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

@keyframes spin {
    from {
        transform: scale(1) rotate(0deg);
    }

    to {
        transform: scale(1) rotate(360deg);
    }
}

.button-grid {
    font-size: 15px;
}


.jumbotron {
    padding: 2rem 1rem;
    margin-bottom: 2rem;
    background-color: #e9ecef;
    -ms-border-radius: 0.3rem;
    border-radius: 0.3rem;
}

@media (min-width: 576px) {
    .jumbotron {
        padding: 4rem 2rem;
    }
}

.jumbotron-fluid {
    padding-right: 0;
    padding-left: 0;
    -ms-border-radius: 0;
    border-radius: 0;
}

.borderRight {
    border-right: 1px solid #c0c0c0;
}

.parentDiv {
    position: absolute;
    /*height:100%;*/
    /*min-height: 500px;*/
    max-height: 900px;
    min-height: fit-content;
    margin: 0;
    padding: 0;
    width: 95%;
}

.slibarLeft {
    position: relative;
    float: left;
    min-height: 500px;
    max-height: 900px;
    min-height: fit-content;
    height: auto;
    width: 25%;
    /*background-color:#A2A;*/
    background-color: #e9ecef;
}

.contentRight {
    position: relative;
    left: 25%;
    min-height: 500px;
    min-height: fit-content;
    min-width: 100px;
    height: auto;
    max-height: 900px;
    /*width:auto;*/
    width: 60%;
    /*background-color:#BBB;*/
}

/**custom resizable*/

/*.page-container {
    /*margin: 20px;}*/
/* horizontal panel*/
.panel-container {
    display: flex;
    flex-direction: row;
    border: 1px solid silver;
    overflow: hidden;
    /* avoid browser level touch actions */
    touch-action: none;
}

.panel-left {
    flex: 0 0 auto;
    /* only manually resize */
    /*padding: 10px;*/
    width: 300px;
    min-height: 200px;
    min-width: 150px;
    white-space: nowrap;
    background-color: #fff;
}

.splitter {
    flex: 0 0 auto;
    width: 7px;
    background: url(../../Content/sysimage/resize.png) center center no-repeat #e6eaec;
    min-height: 200px;
    cursor: col-resize;
    background-color: #e6eaec;
}

.panel-right {
    flex: 1 1 auto;
    /* resizable */
    /*padding: 10px;*/
    width: 100%;
    min-height: 200px;
    min-width: 200px;
    background: #fff;
}

.btnNewDevice {
    float: right;
    margin-right: 1.5%;
    display: none;
}

.btnAddMaterial {
    height: 26px;
    line-height: 2%;
}

.overFlowText {
    white-space: nowrap;
    /*width: fit-content;*/
    overflow: hidden;
    text-overflow: ellipsis;
}


.content-wrapper {
    background-color: #d4e7f1 !important;
    /*max-height: 688px !important;
    min-height: 688px !important;*/

}

.control-tree {
    height: 30px;
    /*border-bottom: 1px solid #808080;*/
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}
.floatRight {
    float: right !important;
}
.flex-row-reverse {
    -webkit-box-orient: horizontal!important;
    -webkit-box-direction: reverse!important;
    -ms-flex-direction: row-reverse!important;
    flex-direction: row-reverse!important;
}

.d-flex {
    display: -webkit-box!important;
    display: -ms-flexbox!important;
    display: flex!important;
}
.page-container {
    background-color: lightgray;
}
#btnShowLabtest {
    height: 30px;
    float: left;
    padding-bottom: 18px;
    margin-right: 5px;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('sysimage/hide.PNG');
}
.ag-blue {
   font-family: Arial, Helvetica, sans-serif;
}
.input-group-prepend {
    margin-right: -1px;
    display: flex;
}
.input-group-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: .375rem .75rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    text-align: center;
    white-space: nowrap;
    background-color: #e9ecef;
    border: 1px solid #ced4da;
    border-radius: .25rem;
}
.floatLeft {
    float : left;
}
.marginBottom2vh{
    margin-bottom : 2vh;
}

.fullscreen{
    z-index: 9999; 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    top: 0; 
    left: 0;
    background-color: aliceblue;
 }

.onerowGrid_0 {
    width: 100%;
    height: 63.6vh;
    max-height: 700px;
    min-height: 400px;
}

.onerowGrid_1 {
    width : 100%;
    height: 91vh;;
}

.paddingTop20 {
    padding-top : 20px;
}

.input-group .form-control {
    z-index : 0 !important;
}

.choosed {
    background-color : hotpink !important;
}

.autocomplete-items choosed {
     background-color : red !important;
}   

.rightcustom{
    margin-left: 0px;
    overflow-y: scroll;
    padding-left: 30px;
}
.box{
    margin-bottom: 10px !important;
}
.RWClass {
    -webkit-flex: auto;
    -ms-flex: auto;
    -o-flex: auto;
    flex: auto;
    padding: 5px;
    border: 1px solid brown;
    min-width: 90%;
    background-color: #EBEBE4;
}

.box1 {
    border: 2px solid #2A97AB;
    margin-bottom: 5%;
    position: relative;
    display: block;
    padding: 5px;
    max-height: 5px;
    text-align: center;
    background-color: #fff;
    min-height: 35px;
}
.rightBox {
    border: 2px solid #adff2f;
    text-align: center;
    margin-bottom: 5%;
    position: relative;
    min-width: 200px;
    margin: 5px;
    width: fit-content;
    padding: 5px;
    background-color: #fff;
    min-height: 35px;
}
.wrongBox {
    border: 2px solid #b54848;
    margin-bottom: 5%;
    text-align: center;
    position: relative;
    min-width: 200px;
    margin: 5px;
    width: fit-content;
    padding: 5px;
    background-color: #fff;
    min-height: 35px;
}
.correctBox {
    border: 2px solid #dddd5b;
    margin-bottom: 5%;
    text-align: center;
    position: relative;
    min-width: 200px;
    width: fit-content;
    margin: 5px;
    padding: 5px;
    background-color: #fff;
    min-height: 35px;
}

.flexHalfLeft {
    width: 35%;
}

.flexHalfRight {
    width: 60%;
}



.fixedleft {
    float: left;
    width: 13%;
    height: 50%;
    z-index: 9999;
    justify-content: center;
    font-weight: bold;
    position: fixed;
    right: 10px;
    top: 50px;
    left: 62px;
}

.fixedright {
    display: flex;
    position: fixed;
    right: 10px;
    float: right;
    width: 8%;
    height: 30px;
    border: 2px solid #00f;
    margin-left: -1%;
    z-index: 999;
    justify-content: center;
    color: red;
    font-weight: 700;
}


.fixedbottom {
    display: flex;
    float: right;
    width: 12%;
    height: 30px;
    border: 2px solid #00f;
    margin-left: -1%;
    z-index: 999;
    justify-content: center;
    color: red;
    font-weight: 700;
    position: fixed;
    right: 10px;
    bottom: 10%;
}
.margintop10 {
    margin-top: 10px !important;
}

.fixedfreestyle {
    display: flex;
    position: fixed;
    right: 0.5%;
    top: 45%;
    width: fit-content;
    z-index: 999;
    justify-content: center;
}


.wrongAnswer {
    margin: 2px;
    width: fit-content;
    min-height: 25px;
    display: inline-block;
    background-color: rgba(185, 35, 35, 0.27);
    color: #161615;
    /*text-align: center;*/
    min-width: 100px;
    width: fit-content;
    border: 1px solid #b54848;
    padding: 2px;
}

.rightAnswer {
    background-color: rgba(173, 255, 47, 0.8);
    background-color: #adff2f;
    min-width: 100px;
    margin: 2px;
    width: fit-content;
    min-height: 25px;
    display: inline-block;
    color: #161615;
    /*text-align: center;*/
    width: fit-content;
    border: 1px solid #078a05;
    padding: 2px;
}

.rightColor {
    background-color: #adff2f;
    background-color: rgba(173, 255, 47, 0.8);
    color: #161615;
    text-align: center;
}
.wrongColor {
     background-color: rgba(199, 82, 82, 0.77);
    background-color: rgba(181, 72, 72, 0.5);
    color: #161615;
    text-align: center;
}
.correctColor {
    background-color: #ffff00;
    background-color: rgba(255, 255, 0, 0.67);
    color: #161615;
    text-align: center;
}


.correntAnswer {
    background-color: rgba(255, 255, 0, 0.67);
    min-width: 100px;
    margin: 2px;
    min-height: 25px;
    display: inline-block;
    color: #161615;
    text-align: center;
    width: fit-content;
    border: 1px solid #b54848;
    padding: 2px;
}
.main-sidebar {
    position: fixed !important;
}

.fixdbotomleft {
    position: fixed;
    display: flex;
    float: left;
    z-index: 999;
    justify-content: center;
    font-weight: 700;
    left: 4.5%;
    bottom: 10%;
}