.overlay {
    width: 0;
    height: 0;
    position: fixed;
    top: -10px;
    left: -10px;
}

body{
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.paraButton{
    color:#000;
    background:#FFF;
    border:0;
    padding:10px;
    width:100%;
    margin:5px 0;
    background-size:30px;
    background-repeat:no-repeat;
    background-position:10px;
}
.videoTitle{
    border-top:30px solid #CCC;
    color:#FFF;
    font-size:30px;
    font-weight:500;
    background:#666;
    padding:10px;
}
.videoBlurb{
    padding:20px;
    text-align:center;
    font-size:24px;
    width:50%;
    margin:0 25%;
}
.videoList {
    overflow-y: scroll;
    float: left;
    background:#333;
    height: 70%;
    position: relative;
    display: block;
    width: 100%;
    margin: 20px 0;
}

.videoManager {
    position: absolute;
    background: #CCC;
    z-index: 1;
    color: #000;
    transition: 0.3s;
    width: 80%;
    left: 10%;
    top: -100%;
    height: 80%;
}

.queryManager{
    position:absolute;
    background:#CCC;
    z-index:1;
    color:#000;
    transition:0.3s;
    width:80%;
    left:10%;
    top:-100%;
    height:80%;
}

.managerButton{
    width:25px;
    height:25px;
    float:right;
    background:#FFF;
    border:0;
    margin:0 0 0 5px;
    background-size:25px;
    background-repeat:no-repeat;
    background-position:center;
}
.paradocsDemo{
    width:100%;
    background-color:#DDD;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    overflow:hidden;
}
.filterButton {
    float: right;
    background: #FFF;
    color: #FFF;
    border: 0;
    padding: 10px;
}

.managerHeader {
    padding: 10px;
    height: 20px;
    font-weight: 700;
    color:#FFF;
    background-color: #CCC;
}

.paraButton:hover{
    background-color:#FFF;
}

.reportCellHeader {
    background-color: #91f5ff !important;
}
.reportCell {
    width: 166px;
    height: 27px;
    font-size: 16px;
    position: absolute;
    background: transparent;
    padding: 5px;
    resize: none;
    font-family: Courier New, Courier, monospace;
    font-weight: 900;
    font-size: 14px;
    overflow: hidden;
    border: 0;
}

.cellGrid{
    width:100%;
    height:100%;
    margin:20px 0;
    background-image:url("../assets/cellGrid.png");
    background-size:177px 40px;
    background-position:30px;
}

.loginBox{
    width:60%;
    background:#CCC;
    text-align:center;
    position:absolute;
    height:calc(100% - 80px);
    top:40px;
    left:20%;
    z-index:1;
    transition:0.3s;
}
.loginInput {
    height: 10%;
    width: 40%;
    float: left;
    margin: 10px 30% 0 30%;
    font-size: 40px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    text-align: center;
}
.twoFactorCode {
    height: 10%;
    width: 40%;
    float: left;
    margin: 5% 30% 0 30%;
    font-size: 40px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    text-align: center;
}
.twoFactorMessage{
    font-size:200%;
    letter-spacing:0.15em;
}
.twoFactorSubMessage {
    margin:5% 25% 0 25%;
    width:50%;
    font-size: 125%;
    letter-spacing: 0.15em;
}
.loginButton {
    width: 40%;
    margin: 10px 30%;
    height: 6%;
    background: #FFF;
    color: #000;
    border:0;
    font-size: 150%;
    line-height:3%;
    padding: 3% 0;
}
.header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.paradox {
    width: calc(100vw - 430px);
    height: calc(100vh - 180px);
    transition: 0.4s;
    margin: 64px 0 0 64px;
    background-color: #fff;
    background-size: 100% !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
    /*box-shadow: #999 25px 35px;*/
}

.content{
    width:100vw;
    height:100vh;
    overflow:hidden;
    display:block;
    position:absolute;
    top:0;
    background:#006974;
    left:0;
}

.canvas {
    width: calc(100vw - 315px);
    height: calc(100vh - 64px);
    position: absolute;
    top: 64px;
    left: 64px;
    transition: 0.3s;
    background: #AAA;
    overflow: auto;
}

.controls-top {
    width: 100%;
    position: absolute;
    height: 64px;
    top: 0vh;
    z-index: 1;
    left: 0vw;
    background: #FFF;
    overflow-x: scroll;
    overflow-y: hidden;
}

.controls-left {
    width: 63px;
    position: absolute;
    left: 0vw;
    border-right: 1px solid #FFF;
    top: 64px;
    z-index: 1;
    height: calc(100vh - 64px);
    background: #FFF;
}
.artMode{
    right:0px;
}
.documentMode{
    right:-300px;
}
.reportMode {
    right: -500px;
}

.controls-right {
    width: 250px;
    transition: 0.3s;
    position: absolute;
    z-index: 1;
    right: 0vw;
    top: 64px;
    border-left: 1px solid #FFF;
    height: calc(100vh - 64px);
    background: #DDD;
}

.mainMenu {
    position: absolute;
    left: 0px;
    margin: 8px;
    top: 0px;
    height: 64px;
    width: calc(100% - 64px);
    overflow-x: scroll;
}

.menuItem {
    float: left;
    display: block;
    color: #000;
    padding: 5px 16px;
    user-select: none;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: 0.2s;
}

    .menuItem:hover {
        background-color: #FFF;
    }

.subMenu {
    position: fixed;
    top: 60px;
    background: #CCC;
    color: #FFF;
    z-index: 5;
    overflow: hidden;
    transition: 0.6s;
    width: 180px;
}

    .subMenu ul {
        margin: 0;
        padding: 0;
        float: left;
    }

.subMenuItem {
    background: #CCC;
    color: #000;
    padding: 10px 30px;
    display: block;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: 0.2s;
    width: 100%;
}

    .subMenuItem:hover {
        background: #FFF;
    }

.fontSelector {
    width: 160px;
    background: #CCC;
    color: #000;
    padding: 10px 15px;
    border-radius: 0px;
    margin-top: -6px;
    border: 0px solid #FFF;
    background: #CCC;
}

.fontSizeSelector {
    width: 100px;
    background: #CCC;
    color: #000;
    padding: 10px 15px;
    border-radius: 0px;
    margin-top: -6px;
    border: 0px solid #FFF;
    background: #CCC;
}

.sizeSelector {
    width: 75px;
    background: #CCC;
    color: #000;
    padding: 10px 15px;
    border-radius: 0px;
    margin-top: -6px;
    border: 0px solid #FFF;
    background: #CCC;
}

.colorInputField {
    width: 60px;
    height: 20px;
    background: #CCC;
    color: #FFF;
    padding: 3px 10px;
    border-radius: 0px;
    border: 0px solid #FFF;
    float: right;
}

.propertyGroup {
    width: calc(100% - 20px);
    padding: 10px;
    min-height: 30px;
    float: left;
    display: block;
    font-size: 12px;
}

.queryCheckbox{
    float:left;
    position:absolute;
    left:0;
}

.halfWidth {
    width: 50%;
    float: left;
    display: block;
}

.a10 {
    background-image: url(../assets/a10.png);
}

.a11 {
    background-image: url(../assets/a11.png);
}

.a12 {
    background-image: url(../assets/a12.png);
}

.a13 {
    background-image: url(../assets/a13.png);
}

.a14 {
    background-image: url(../assets/a14.png);
}

.a15 {
    background-image: url(../assets/a15.png);
}

.a16 {
    background-image: url(../assets/a16.png);
}

.a17 {
    background-image: url(../assets/a17.png);
}

.a18 {
    background-image: url(../assets/a18.png);
}

.a19 {
    background-image: url(../assets/a19.png);
}

.a20 {
    background-image: url(../assets/a20.png);
}

.a21 {
    background-image: url(../assets/a21.png);
}
.a25 {
    background-image: url(../assets/a25.png);
}
.a26 {
    background-image: url(../assets/a26.png);
}
.a27 {
    background-image: url(../assets/a27.png);
}

.a30 {
    background-image: url(../assets/a30.png);
}
.a31 {
    background-image: url(../assets/a31.png);
}
.a32 {
    background-image: url(../assets/a32.png);
}
.a33 {
    background-image: url(../assets/a33.png);
}
.a34 {
    background-image: url(../assets/a34.png);
}
.a35 {
    background-image: url(../assets/a35.png);
}
.a36 {
    background-image: url(../assets/a36.png);
}
.a37 {
    background-image: url(../assets/a37.png);
}



.b10 {
    background-image: url(../assets/b10.png);
}

.b11 {
    background-image: url(../assets/b11.png);
}

.b12 {
    background-image: url(../assets/b12.png);
}

.b13 {
    background-image: url(../assets/b13.png);
}

.b14 {
    background-image: url(../assets/b14.png);
}

.b15 {
    background-image: url(../assets/b15.png);
}

.b16 {
    background-image: url(../assets/b16.png);
}

.b17 {
    background-image: url(../assets/b17.png);
}

.b18 {
    background-image: url(../assets/b18.png);
}

.b19 {
    background-image: url(../assets/b19.png);
}

.b20 {
    background-image: url(../assets/b20.png);
}

.b21 {
    background-image: url(../assets/b21.png);
}

.b22 {
    background-image: url(../assets/b22.png);
}

.b23 {
    background-image: url(../assets/b23.png);
}

.b24 {
    background-image: url(../assets/b24.png);
}

.b25 {
    background-image: url(../assets/b25.png);
}

.c1 {
    background-image: url(../assets/c1.png);
}

.button {
    width: 50px;
    height: 50px;
    float: left;
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    margin: 0 5px;
    transition: 0.2s;
}

    .button:hover {
        background-color: #FFF;
    }

.buttonLight {
    width: 50px;
    height: 50px;
    float: left;
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    background-color: #FFF;
    margin: 0 5px;
    transition: 0.2s;
}

    .buttonLight:hover {
        background-color: #999;
    }

.paraLogo {
    width: 64px;
    height: 64px;
    float: left;
    display: block;
    background-image:url(../assets/paralogo.png);
    background-position: center;
    background-size: 60%;
    background-repeat: no-repeat;
    transition: 0.3s;
}

    .paraLogo:hover {
        background-color: #666;
    }

.colorPalette {
    background: #CCC;
    width: 322px;
    height: 276px;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: 0.4s;
    z-index: 1;
}

.colorBox {
    width: 240px;
    height: 160px;
    margin: 8px;
    background-image: url(../assets/palette.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    z-index: 1;
}

.colorInput {
    width: 40%;
    color: #FFF;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 2.5%;
    float: left;
    display: block;
    font-size: 12px;
}

.colorBlockA {
    width: 44px;
    height: 44px;
    border: 5px solid #FFF;
    margin-top: -166px;
    margin-right: 10px;
    float: right;
    display: block;
    background: #000;
}

.colorBlockB {
    width: 44px;
    height: 44px;
    border: 5px solid #FFF;
    margin-top: -102px;
    margin-right: 10px;
    float: right;
    display: block;
    background: #FFF;
}

.toolBlock {
    width: 0px;
    height: 0px;
    margin-top: -38px;
    margin-right: 10px;
    border-left: 25px solid #999;
    border-top: 28px solid #999;
    border-right: 28px solid transparent;
    float: right;
}

.toolsMenu {
    height: calc(100vh - 340px);
    overflow-y: scroll;
    border-bottom: 3px solid #CCC;
}

    .toolsMenu ul {
        margin: 0;
        padding: 0;
    }

.colorSettings {
    padding: 5px;
}

.colorPaletteClose {
    background: #DDD;
    color: #000;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 5px;
    width: 32px;
    height: 32px;
    text-align: center;
    font-size: 18px;
    margin-left: 300px;
    margin-top: -35px;
    position: absolute;
    line-height: 30px;
    transform: rotate(315deg);
    transition: 0.4s;
    z-index: 2;
}

.schemaControl {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 10px;
    border-bottom: 1px solid #000;
    width: calc(90% - 20px);
    margin: 10px 5%;
    height: 17%;
    overflow-y: scroll;
}
.propertyControl {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 10px;
    border-bottom: 1px solid #000;
    width: calc(90% - 20px);
    margin: 10px 5%;
    height: 25%;
    overflow-y: scroll;
}
.propertyControlTall {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 10px;
    border-bottom: 1px solid #000;
    width: calc(90% - 20px);
    margin: 10px 5%;
    height: 60%;
    overflow-y: scroll;
}
.propertyControlTall::-webkit-scrollbar{
    display:none;
}

.layerControl {
    color: #000;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 10px;
    border-bottom: 1px solid #000;
    width: calc(90% - 20px);
    margin: 10px 5%;
    height: 35%;
    overflow-y: scroll;
}

.layer {
    border: 1px solid #000;
    width: 180px;
    height: 140px;
    margin: 10px 0;
    background-color: #FFF;
    color: #000;
    font-size: 12px;
    padding: 10px;
    text-align: right;
}

.propertyOutlineColorBlock {
    width: 50px;
    height: 30px;
    margin-top: -7px;
    background: #FFF;
    float: right;
}

.propertyFillColorBlock {
    width: 50px;
    height: 30px;
    margin-top: -7px;
    float: right;
    background: #FFF;
}

.propertyTextColorBlock {
    width: 50px;
    height: 30px;
    float: right;
    margin-top: -7px;
    background: #FFF;
}

.propertyInputField {
    width: 40px;
    height: 30px;
    float: right;
    margin-top: -7px;
    background: #FFF;
    border: 0px solid #000;
}

.properties {
    margin-top: 20px;
}

.horizontalRuler {
    height: 32px;
    background: #CCC;
    width: 100%;
    padding: 0 0 0 30px;
    float: left;
    display: block;
    z-index: 1;
}

    .horizontalRuler::-webkit-scrollbar {
        display: none;
    }

.verticalRuler::-webkit-scrollbar {
    display: none;
}



.verticalRuler {
    width: 32px;
    background: #CCC;
    height: calc(100% - 66px);
    float: left;
    z-index: 0;
    display: block;
    position: relative;
}

.rulerBitH {
    width: 53px;
    float: left;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: block;
    color: #000;
    padding: 5px;
    z-index: 1;
    height: 24px;
    border-right: 1px solid #666;
}

.rulerBitY {
    width: 53px;
    float: left;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: block;
    color: #000;
    padding: 5px;
    height: 32px;
    z-index: 1;
    border-right: 1px solid #666;
    transform: rotate(90deg);
    margin: 0 0 22px -22px
}

.object {
    position: absolute;
}

.circleObj {
    width: 100px;
    height: 100px;
    border: 3px solid #000;
    background: #FFF;
    border-radius: 999px;
}

.squareObj {
    width: 100px;
    height: 100px;
    border: 3px solid #000;
    background: #FFF;
}

.textObj {
    background: #FFF;
    border-top: 0px solid #FFF;
    border-left: 0px solid #FFF;
    border-right: 1px solid #666;
    border-bottom: 1px solid #666;
    padding: 10px;
    width: 200px;
    height: 100px;
    font-size: 16px;
    z-index: 1;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.effectControl {
    color: #000;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 10px;
    border-bottom: 1px solid #000;
    width: calc(90% - 20px);
    margin: 10px 5%;
    height: 20%;
    overflow-y: scroll;
}

.effectList {
    font-size: 14px;
    margin: 10px 0;
    background: #FFF;
    padding: 5px;
}

.selectedItemBorder {
    animation: selectedObject 1s infinite;
    position: absolute;
    transition: 0.3s;
}

.paintBlob {
    position: absolute;
    width: 32px;
    height: 32px;
    border-radius: 999px;
}

.grid {
    background-image: url(../assets/grid.png);
    background-size: 32px;
    width: 100vw;
    height: 100vh;
    z-index: 2;
    display: none;
    position: absolute;
    top: 106px;
    left: 106px;
    pointer-events: none;
}

.saveFileInput {
    padding: 10px;
    border: 2px solid #CCC;
    width: calc(100% - 20px);
    margin: 20px 0;
    display: block;
    background: #FFF;
}

.imageImportInput {
    padding: 10px;
    border: 2px solid #CCC;
    width: calc(100% - 20px);
    margin: 20px 0;
    display: block;
    background: #FFF;
}
.importButton{
    padding:10px 20px;
    border:2px solid #999;
    font-size:16px;
}

.saveFileBox {
    position: fixed;
    top: 130vh;
    left: 30vw;
    width: 40vw;
    min-height: 300px;
    height: 30vh;
    background: #CCC;
    border: 3px solid #AAA;
    border-radius: 0px;
    padding: 20px;
    transition: 0.3s;
}
.imageImportBox {
    position: fixed;
    top: 130vh;
    left: 30vw;
    width: 40vw;
    min-height:300px;
    height: 30vh;
    background: #CCC;
    border: 3px solid #AAA;
    border-radius: 0px;
    padding: 20px;
    transition: 0.3s;
}

.layerImp {
    width: 80%;
    height: 80%;
    margin: 4% 10%;
    float: left;
    display: block;
    background-size: 100% !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.versionBox {
    position: absolute;
    bottom: 0;
    right: 0;
    color: #E00;
    background: #006974;
    z-index: 1;
    font-family: Arial;
    padding: 5px;
    animation: versionAnimation 4s infinite;
}

.modeSelector {
    background: #CCC;
    padding: 10px;
    font-family: Arial;
    width: 164px;
    position:absolute;
    top:0px;
    right:0px;
}

.documentBase{
    width:80%;
    margin:5% 10%;
    height:90%;
    font-size:2em;
    background:transparent;
}

.modeSwitch {
    background-color: #093;
    background-image: url("../assets/a22.png");
    float: left;
    width: 144px;
    height: 44px;
    float: left;
    background-size: 33px;
    text-align:right;
    padding-right:20px;
    font-weight:700;
    line-height:44px;
    background-repeat: no-repeat;
    background-position: 10px;
    display: block;
    transition: 0.2s;
    color:#FFF;
}
}

.cell {
    border: 1px solid #FFF;
    width: 82px;
    padding: 5px;
    height: 28px;
    float: left;
    font-family: Arial;
}

.controls-top::-webkit-scrollbar {
    display: none;
}

.toolsMenu::-webkit-scrollbar {
    display: none;
}

.layerControl::-webkit-scrollbar {
    display: none;
}

.schemaControl::-webkit-scrollbar {
    display: none;
}

.propertyControl::-webkit-scrollbar {
    display: none;
}

.effectControl::-webkit-scrollbar {
    display: none;
}

.mainMenu::-webkit-scrollbar {
    display: none;
}

.datasetList::-webkit-scrollbar {
    display: none;
}
.tableList::-webkit-scrollbar {
    display: none;
}
.columnList::-webkit-scrollbar {
    display: none;
}
.whereClauses::-webkit-scrollbar {
    display: none;
}
@keyframes versionAnimation {
    0% {
        border: 3px solid rgb(0, 0, 0)
    }

    40% {
        border: 3px solid rgb(0, 0, 0)
    }

    50% {
        border: 3px dotted rgb(200, 0, 0)
    }

    90% {
        border: 3px dotted rgb(200, 0, 0)
    }

    100% {
        border: 3px solid rgb(0, 0, 0)
    }
}

@keyframes selectedObject {
    0% {
        border: 3px solid rgb(100, 0, 0)
    }

    50% {
        border: 3px dashed rgb(200, 0, 0)
    }

    100% {
        border: 3px solid rgb(100, 0, 0)
    }
}

@keyframes selectedColor {
    0% {
        border: 5px solid rgba(0,0,0,0)
    }

    50% {
        border: 5px solid rgba(180,0,0,1)
    }

    100% {
        border: 5px solid rgba(0,0,0,0)
    }
}

@keyframes selectedTool {
    0% {
        background-color: rgba(100, 0, 0, 0.5)
    }

    50% {
        background-color: rgba(180,0,0,1)
    }

    100% {
        background-color: rgba(100, 0, 0, 0.5)
    }
}

@keyframes unselectedColor {
    0% {
        border: 5px solid rgba(0,0,0,0)
    }

    100% {
        border: 5px solid rgba(0,0,0,0)
    }
}

.datasetButton {
    background: #CCC;
    color: #FFF;
    padding: 10px;
    border: 0;
    margin: 7px 10px;
    float:right;
}

.datasetSelector {
    position: absolute;
    top: -650px;
    height: 100%;
    left: 200px;
    width: 1200px;
    background: #CCC;
    z-index: 10;
    transition: 0.3s;
    font-family: Arial;
    color: #FFF;
    padding: 10px;
    overflow: hidden;
}

.datasetList {
    width: 15%;
    float: left;
    padding: 10px;
    border-right: 3px solid #999;
    height: calc(100% - 60px);
    overflow-y: auto;
}

.tableList {
    width: 15%;
    float: left;
    padding: 10px;
    border-right: 3px solid #999;
    height: calc(100% - 60px);
    overflow-y: auto;
}


.columnList {
    width: 15%;
    padding: 10px;
    border-right: 3px solid #999;
    float: left;
    height: calc(100% - 60px);
    overflow-y: auto;
}


.whereClauses {
    width: calc(55% - 250px);
    padding: 10px;
    float: left;
    height: calc(100% - 60px);
    overflow-y: auto;
}

.schema {
    background-image: url("/assets/a21.png");
}
.model {
    background-image: url("/assets/a34.png");
}
.parameter {
    background-image: url("/assets/a35.png");
}

.table {
    background-image: url("/assets/a28.png");
}
.column {
    background-image: url("/assets/a29.png");
}


.schemaButtonSlim {
    width: calc(100% - 60px);
    padding: 10px 10px;
    background-color: #CCC;
    border-width: 0 0 2px 0;
    border-style: solid;
    border-color: #999;
    text-align: left;
    text-indent:10px;
    font-size:14px;
    padding-right: 60px;
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: calc(100% - 20px);
    color: #000;
}
.schemaButton{
    width:100%;
    padding:15px 10px;
    background-color:#CCC;
    border-width:0 0 2px 0;
    border-style:solid;
    border-color:#999;
    text-align:right;
    padding-right:60px;
    background-size:30px;
    background-repeat:no-repeat;
    background-position:calc(100% - 20px);
    color:#000;
}
.schemaButton:hover{
    background-color:#FFF;
}

.dbSchemas {
    margin-top:10px;
    background: #FFF;
}
.dbTables {
    margin-top: 10px;
    background: #FFF;
}
.dbColumns {
    margin-top: 10px;
    background: #FFF;
}
.dbCommand {
    background:#000;
    width:100%;
    overflow-y:auto;
    word-wrap:anywhere;
    font-size:14px;
    line-height:20px;
    height:100%;
    display:block;
    margin:10px 0;
    color:#FFF;
    font-family:Courier New, Courier, monospace;
}
.datasetRow {
    border-bottom: 1px solid #FFF;
    color: #FFF;
    padding: 10px;
}

.tableRow {
    border-bottom: 1px solid #FFF;
    color: #FFF;
    padding: 10px;
}

.whereInput {
    padding: 10px;
    color: #FFF;
    background: #FFF;
    width: 100%;
    border: 0;
    margin: 5px 0;
}

.queryList {
    margin-top: 20px;
}
.filterItem {
    border-width: 0 0 3px 0;
    border-style: solid;
    border-color: #999;
    background-color: transparent;
    float: left;
    width: calc(100% - 20px);
    padding: 10px;
    position: relative;
    background-size: 24px;
    background-repeat: no-repeat;
    line-height:32px;
    text-align: right;
    text-indent:15px;
    background-position: 5px;
}
.filterItem input:nth-child(1){
    margin-top:12px;
}
.filterInput {
    background: #EEE;
    color: #000;
    padding: 10px;
    float:right;
    border:0;
    margin-left: 20px;
}
.filterSelect {
    background: #EEE;
    border:0;
    padding: 10px;
    float: right;
    margin-left: 20px;
}

.queryItem {
    border-width: 0 0 3px 0;
    border-style: solid;
    border-color: #999;
    background-color: transparent;
    float: left;
    width: calc(100% - 20px);
    padding: 10px;
    position: relative;
    background-size: 24px;
    background-repeat: no-repeat;
    color: #000;
    text-align: right;
    background-position: 5px;
}

.optionList {
    padding: 10px;
    color: #FFF;
    width: 100%;
    border: 0;
    background: #FFF;
}

.completeReport {
    position:absolute;
    right:10px;
    bottom:10px;
    float: right;
    background: #FFF;
    color: #FFF;
    border: 0;
    font-size: 24px;
    padding: 20px;
}
.templateManagementBox {
    position: fixed;
    top: 130vh;
    left: 25vw;
    width: 50vw;
    min-height: 400px;
    height: 50vh;
    border: 3px solid #AAA;
    border-radius: 0px;
    padding: 20px;
    z-index: 100;
    transition: 0.3s;
}

.templateNameInput {
    padding: 10px;
    border: 2px solid #CCC;
    width: calc(100% - 20px);
    margin: 10px 0;
    display: block;
    background: #FFF;
}

.templateFileInput {
    padding: 10px;
    border: 2px solid #CCC;
    width: calc(100% - 20px);
    margin: 10px 0;
    display: block;
    background: #FFF;
}

.templateItem {
    background: #EEE;
    border-bottom: 2px solid #AAA;
    padding: 15px;
    cursor: pointer;
    transition: 0.2s;
}

    .templateItem:hover {
        background: #DDD;
    }

.templateItemName {
    font-size: 16px;
    font-weight: 600;
    color: #000;
    margin-bottom: 5px;
}

.templateItemId {
    font-size: 12px;
    color: #666;
}