.createFrame {

    width: 100%;

    height: 100%;



}



.framesCrea {

    height: 94.5%;

    width: 100%;

    background-color: rgba(0, 0, 0, 0.2);

    display: flex;

    justify-content: center;

    margin: auto;

    background-color: #333;

}



.navApp {

    height: 6%;

    width: 100%;

    background-image: linear-gradient(transparent, black);

    display: flex;

}



.botNavApp {

    width: 15vw;

    height: 100%;

    text-align: center;

    display: flex;

    justify-content: center;

    border-radius: .5vw .5vw 0 0;

    cursor: pointer;

    position: relative;
    font-size: 1vw;


}



.botNavApp div {

    margin: auto;

    font-size: 1.3vw;

    font-family: "Arial Black", sans-serif;

    color: #bbbbbb;

}



.botNavApp:hover {

    background-color: rgba(100, 100, 100, 0.5);

    color: ghostwhite;

}



.activeBotNav {

    color: deepskyblue;

    background-image: linear-gradient(black, #333);

    pointer-events: none;

}



.shareFrame {

    height: 100%;

    display: flex;

    justify-content: center;

    width: 100%;

    position: relative;

}



.divShare {

    width: 49%;

    height: 100%;

    margin: auto;


}



.selectFTable {



    height: 5%;

    width: 95%;

    margin: 4vh auto auto;

}



.labelRowShare {

    font-family: Segoe UI Historic, Segoe UI, Helvetica, Arial, sans-serif;

    font-size: 1.2vw;

    color: #bbbbbb;

}



.inputTdShare {

    position: relative;

    height: 4vh;

    width: 100%;

    border: solid thin rgba(200,200,200,0.2);

    background-color:#222;

}





.inputTdShare:hover {

    color: deepskyblue;

    background-color: rgba(0, 0, 0, 0.2);

}



.lebShareFile {

    z-index: -1;

    width: 100%;

    background-color: transparent;

    text-align: center;

    font-family: "Arial Black",sans-serif;

    font-size: 1.2vw;

    color: deepskyblue;

}

.selectOffice{

    width: 100%;

    height: 100%;

    color: deepskyblue;

    border: none;

    outline: none;

    text-align: center;

    background-color: transparent;

    font-family: "Arial Black",sans-serif;

    font-size: 1vw;

}



.fileInputShare {

    width: 100%;

    height: 100%;

    cursor: pointer;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    position: absolute;

    opacity: 0;

    background-color: transparent;

}

.infoShare{

    width: 95%;

    margin: 2vh auto;

    height:40vh;

    table-layout: auto;

    border-collapse: separate;

    white-space: nowrap;

}

.toDiv{

    font-size: 1.3vw;

    color: lightskyblue;

}



.frmTd{

    width: 100%;

}



.frmLabel{

    width: auto;

    font-family: "Arial Black",sans-serif;

    color: lightskyblue;

    font-size: 1.3vw;

}



.frmInput{

    width: 95%;

    border: none;

    outline: none;

    color: ghostwhite;

    background-color: #222;

    font-size: 1.1vw;

    font-family: monospace;

    height: 100%;

    padding-right: 1vw;

    padding-left: 1vw;

}



.frmInput:hover,.tosearch:hover{

    background-color: rgba(0,0,0,0.2);

}

.frmInput:focus,.tosearch:focus{

    background-color: rgba(0,0,0,0.2);

}





.listToDiv{

    width: 100%;

    padding-top: 1vh;

    padding-bottom: 1vh;

    background-color: rgba(0,0,0,0.2);

    margin: 2vh auto;

}

.tosearch{

    background-color: transparent;

    border: none;

    outline: none;

    color: ghostwhite;

    width: 25vw;

    font-size: 1.1vw;

    margin-right: 1vw;

    height: 4vh;

    font-family: monospace;

}

.addTo{

    cursor: pointer;

}

.addTo:hover{

    color: black;

    text-shadow: 0 0 .5vw ghostwhite;

    font-size: 1.3vw    ;

}

.subShe{

    text-align: center;

    font-family: "Arial Black",sans-serif;

    font-size: 1.5vw;

    background-color: rgba(200,200,200,0.2);

    color: lightskyblue;

    cursor: pointer;

    height: 5vh;

}

.subShe:hover{

    background-color: rgba(200,200,200,0.1);

    color: deepskyblue;

    transition: .3s;

}

.subShe:active{

    background-color: rgba(200,200,200,0.3);

    color: deepskyblue;

    transition: .3s;

}

.infoText{

     background-color: transparent;

    color: ghostwhite;

    border: none;

    outline: none;

    width: 100% ;

    resize: none;

    font-size: 1.1vw;

}



.infoText:hover{

    background-color: rgba(0,0,0,0.2);

}

.infoText:focus{

    background-color: rgba(0,0,0,0.2);

}

.textareaLeb{

    font-family: Arial, sans-serif;

    font-size: 1.1vw;

    color: #bbb;

}

.appRovFrame{

    width: 50%;

    height: 100%;

}



.approvalContainer{

    width: 95%;

    height: 87%;

    margin: auto;

    border-right: solid thin rgba(100,100,100,0.5);

    border-left: solid thin rgba(100,100,100,0.5);

    overflow-y: auto;



}

.headerApp{

    width: 95%;

    margin:.5% auto auto;

    height: 10%;

    border-right: solid thin rgba(100,100,100,0.5);

    border-left: solid thin rgba(100,100,100,0.5);

    background-color: rgba(100,100,100,.5);



}

.headerApp{

    display: flex;

    justify-content: center;

}

.holderSearch{

    margin: auto auto auto 1vw;

    height: 4vh;

    background-color: rgba(0,0,0,0.2);

    border-radius: 1vw;

}



.inS {

    border: none;

    outline: none;

    height: 100%;

    background-color: transparent;

    background-image: linear-gradient(to right,transparent,black);

    border-radius: 1vw;

    width: 15vw;

    color: #bbb;

    font-family: monospace;

    font-size: 1.2vw;

}





.inS:focus{

    width: 30vw;

    transition: .3s;

}



.ic{

    margin-left: 1vw;

    margin-right: 1vw;

    font-size: 1.4vw;

    color: deepskyblue;

}



.labelSms{

    font-family: Arial,sans-serif;

    font-size: 1vw;

    color: lightskyblue;

    width: auto;

    white-space: nowrap;

}

.contentSms{

    color: #bbb;

    font-family: Arial,sans-serif;

    width: 100%;

    white-space: nowrap;

    text-overflow: ellipsis;

    overflow: hidden;

    font-size: 1vw;

}

.appMessage{

    border-bottom: solid thin deepskyblue;

    width: 98%;

    margin: 1vh auto;

    cursor: pointer;

    table-layout: auto;

    border-collapse: separate;

    border-radius: .5rem;

    box-shadow: -.2rem .2rem .2rem black;

    background-color: #444;

    padding: .2rem;

}

.appMessage:hover{

    background-color: rgba(0,0,0,0.5);

}

.appViewer{

    width: 100%;

    height: 100vh;

    position: absolute;

    top: 0;

    left: 0;

    z-index: 3;

    background-color: rgba(200,200,200,0.5);



}

.controlApp{

    margin: auto;

    width: 28%;

    height: 98%;

    background-color: #999;

}

.objectViewer{

    margin: auto;

    width: 100%;

}

.canvasHold{

    width: fit-content;

    height: 90%;

    text-align: center;

    overflow: auto;

    margin: 1vh auto auto;

    border: solid thin grey;

    box-shadow: -.5vw 0 .5vw rgba(0,0,0,0.7),.5vw 0 .5vw rgba(0,0,0,0.7);

    position: relative;

}

.controlDiv{

    height: 6%;

    width: 100%;

    background-color: #222;

    margin:1vh auto auto;

    box-shadow: -.5vw 0 .5vw rgba(0,0,0,0.7),.5vw 0 .5vw rgba(0,0,0,0.7);

}

.tablecontroller{

    width: 100%;

    height: 100%;

    table-layout: auto;

    border-collapse: separate;

}

.tablecontroller td{

    height: 100%;

}



.controllBot,.mainControl{

    height: fit-content;

    width: fit-content;

    padding-left: 1vw;

    padding-right:1vw;

    color: deepskyblue;

    font-family: "Arial Black",sans-serif;

    font-size: 1.2vw;

    margin: auto;

    white-space: nowrap;

}

.ctrBot{

    cursor: pointer;



}

.ctrBot:hover{

    background-color: black;

    color: black;

    text-shadow: 0 0 .5vw ghostwhite;

    transition: .3s;



}

.fwr{

    border-radius: 1vw 100% 100% 1vw;

}

.bckr{

    border-radius: 100% 1vw 1vw 100%;

}

.exitViewApp{

    font-family: "Arial Black",sans-serif;

    font-size: 1.2vw;

    color: deepskyblue;

    margin-left: 1vw;

    cursor: pointer;

    width: fit-content;

    padding: .5vh 1vw;

    border-radius: 1vw;

}

.exitViewApp span{

    font-size: 1.5vw;

}

.exitViewApp:hover{

    background-color: black;

    text-shadow: 0 0 .5vw ghostwhite;

    transition: .3s;

    color: black;

}

.scalingRange{

    width: 25vw;

    height: 100%;

    horiz-align: right;

    margin-left: auto;

    margin-right: 1vw;

    border-collapse: separate;

    table-layout: fixed;

}

.slideZoom{
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 100%; /* Full-width */
    height: 1vh; /* Specified height */
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
    border: none;
    cursor: pointer;
    margin: auto;
}

.rangeVal{

    font-family: monospace;

    font-weight: bolder;

    color: deepskyblue;

    font-size: 1.2vw;

}

.esignHolder{

    position: absolute;

    top: 0;

    z-index: 5;

}

.rightLeb{

    font-family: "Arial Black",sans-serif;

    color: #bbbbbb;

    text-align: center;

    font-size: 1.1vw;

    margin: 1vh auto;

}

.searchBarRight{

    width: 100%;

    height: 6vh;

    background-color: rgba(0,0,0,0.2);

    margin: auto;

    display: flex;

}

.searchHolderBar{

    height: 5.5vh;

    margin: auto auto auto 1vw;

    color: #777;

    font-size: 1.5vw;

    border-radius: 1vw;

    padding-left: .5vw;

    width: fit-content;

    border: solid thin rgba(100,100,100,0.5);




}

.searchHolderBar:hover{

    background-color: rgba(0,0,0,0.2);

}



.inputrightBox{

    background-color: transparent;

    background-image: linear-gradient(to right,transparent,black);

    border: none;

    outline: none;

    height: 100%;

    color: #ccc;

    font-family: monospace;

    font-size: 1.1vw;

    border-radius: 0 1vw 1vw 0;

    padding-right: 1vw;

    width: 15vw;

    padding-left: .5vw;

}

.inputrightBox:focus{

    transition: .3s;

    width: 30vw;

}

.fileContent{

    width: 100%;

    margin: 1vh auto;

    height: 74vh;

    border-left: solid thin rgba(5,5,5,0.5);

    border-right: solid thin rgba(5,5,5,0.5);

    overflow-y: auto;

}

.docsStatTable{

    table-layout: auto;

    border-collapse: separate;

    width: 98%;

    margin: 1vh auto;

    border: solid thin ghostwhite;

    cursor: pointer;

}

.notSave{

    border: solid thin deepskyblue;

    background-color: rgba(0,0,0,0.5);

}



.docsStatTable td{

    padding: 5px;

    font-family: Arial,sans-serif;

    font-weight: bolder;

    color: #888;

}

.notSave td{

    color: deepskyblue;

}

.docsStatTable:hover{

    transition: .3s;

    background-color: rgba(0,0,0,0.5);

    color: deepskyblue;

}

.docsReturn{

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(100,100,100,0.9);

    display: flex;

    justify-content: center;



}

.listNameShare{

    font-family: Arial,sans-serif;

    color: #bbb;

    font-size: 1vw;

    padding: .5rem;

    cursor: pointer;

}

.listNameShare:hover{

    background-color: rgba(0,0,0,0.3);

    transition: .3s;

    color: ghostwhite;

}

.objectHolder{

    width: 70%;

    height: 98%;

    margin: auto;

}

.objectViewerReturn{

    width: 100%;

    height: 100%;

}

.returnControl{

    width: 28%;

    height: 94%;

    background-color: #555;

    margin: auto;

    padding-top: 2%;

    position: relative;

}

.docBord{

    border: solid thin rgba(200,200,200,0.5);

    padding-top: 1vh;

    padding-bottom: 1vh;

    margin: 3vh auto;

    width: 96%;

    position: relative;

    background-color: rgba(0,0,0,0.2);

    color: ghostwhite;

    font-family:monospace ;

    font-weight: bolder;

    font-size: 1vw;



}

.overFlowDoc{

    height: 45vh;

    overflow-y: auto;

}

.lebRetc{

    padding-left: 1vw;

    padding-right: 1vw;

    width: fit-content;

    position: absolute;

    top:-2vh;

    left: 1vw;

    font-family: "Arial Black",sans-serif;

    color: lightskyblue;

    background-color: #555;

    border-radius: 1vw;

    font-size: 1vw;

}

.contentDocs{

    width: 95%;

    height: fit-content;

    margin: auto;

}

.appDivCont{

    height: fit-content;

    width: 96%;

    margin-left: .5vw;

    margin-top: 1vh;

}

.printOut{

    font-family: "Arial Black",sans-serif;

    font-size: 1.5vw;

    color: #333;

    margin: auto;

    text-align: center;

    width: 100%;

    height: 10vh;

    background-color: #888;

    display: flex;

    justify-content: center;

    cursor: pointer;

    position: absolute;

    bottom: 23vh;

    text-decoration: none;

}

.saveToSystem{

    font-family: "Arial Black",sans-serif;

    font-size: 1.5vw;

    color: #333;

    margin: auto;

    text-align: center;

    width: 100%;

    height: 10vh;

    background-color: #888;

    display: flex;

    justify-content: center;

    cursor: pointer;

    position: absolute;

    bottom: 12vh;

}

.closeDocs{

    font-family: "Arial Black",sans-serif;

    font-size: 1.5vw;

    color: #333;

    margin: auto;

    text-align: center;

    width: 100%;

    height: 10vh;

    background-color: #888;

    display: flex;

    justify-content: center;

    cursor: pointer;

    position: absolute;

    bottom: 1vh;

}

.closeDocs:hover,.printOut:hover,.saveToSystem:hover{

    background-color: black;

    color: black;

    text-shadow: 0 0 .3vw ghostwhite;

}



.mainControl{

    width: 98%;

    display: flex;

    justify-content: center;

    height: 100%;

    font-family: "Arial Black",sans-serif;

    text-align: center;

}

.iconMainControl{

    margin: auto;

    color: deepskyblue;

    padding: .5vw 1vw;

    background-color: rgba(0,0,0,0.5);

    border-radius: .5vw;

    cursor: pointer;

    width: 20%;

    text-align: center;

}

.iconMainControl:hover{

    background-color: rgba(0,0,0,0.7);

}

.iconMainControl:active{

    background-color: rgba(0,0,0,0.9);

    color: black;

    text-shadow: 0 0 .2vw ghostwhite;

}

.appRovStat{

    width: 30%;

    margin: auto;

    text-align: center;

}

.decNOte{

    width: 50vw;

    height: 60vh;

    position: absolute;

    right: 1vw;

    bottom: 9vh;

    animation: showNote .5s;

    z-index: 7;

    background-color: #555;

    box-shadow: -.3vw 0  1vw rgba(0,0,0,0.8);

    border-radius: .5vw;

    border: solid thin white;

    text-align: center;

}

@keyframes showNote {

    from{

        height: .1vh;

        opacity: 0;

        bottom: 9vh;

    }

    to{

        height: 60vh;

        opacity: 1;

    }

}

.noteHead{

    height: 10%;

    background-color: rgba(200,200,200,0.5);

    width: 100%;

    border-radius: .5vw .5vw 0 0;



}

.noteHead td{

    text-align: right;

}

.noteTextArea{

    width: 49.5vw;

    margin: auto;

    height: 70%;

    border: none;

    outline: none;

    resize: none;

    font-family: monospace;

    font-size: 1.3vw;

    background-color: rgba(0,0,0,0.3);

    color: #ddd;

    font-weight: bolder;

}



.decSub{

    height: 17%;

    width: 50%;

    margin: auto;

    border-radius: 0 0 .5vw .5vw;

    font-family: "Arial Black",sans-serif;

    font-size: 2vw; color: deepskyblue;

    text-align: center;

}

.decBot{

    width: 100%;

    text-align: center;

    height: fit-content;

    padding-top: .1vh;

    padding-bottom: 1vh;

    background-color: rgba(0,0,0,0.1);

    cursor: pointer;

    border-radius: 1vw;

}

.decBot:hover{

    background-color: rgba(0,0,0,0.3);

}

.decBot:active{

    background-color: rgba(0,0,0,0.5);

}

.decBotIc{

    cursor: pointer;

    width: 2vw;

    text-align: center;

    font-size: 1.5vw;

    margin-left: .5vw;

    margin-right: .5vw;

    border-radius: .5vw;

}

.decBotIc:hover{

    background-color: rgba(0,0,0,0.3);

    color: deepskyblue;

}

.deleteFileAP{

    color: deepskyblue;

}

.deleteFileAP:hover{



}

.instruction{

    position: absolute;

    left: 0;

    height: fit-content;

    bottom: 10vh;

    width: 20vw;

    background-color: #333;

    animation: instruct 1s;

    box-shadow: 1vw 1vh .5vw rgba(0,0,0,0.6);

    border-radius: 0 1vw 1vw 0;

    border: solid .3rem black;

    border-left: none;

    font-size: 1vw;

    font-family: "Arial Black",sans-serif;

    color: #999;

    padding-left: 1vw;

    padding-top: 1vh;

    padding-bottom: 1vh;



}

@keyframes instruct {

    from{

        width:0;

        opacity: 0;

        font-size: .1vw;

    }

    to{

        width: 20vw;

        opacity: 1;

        font-size: 1vw;

    }

}

.autoHide{

    width:0;

    opacity: 0;

    font-size: .1vw;

    animation: autoHideAn 1s;

}

@keyframes autoHideAn {

    from{

        width: 20vw;

        opacity: 1;

        font-size: 1vw;

    }

    to{

        width:0;

        opacity: 0;

        font-size: .1vw;

    }

}

.docsRBot{

    color: deepskyblue;

    font-size: 1vw;

}

.docsRBot:hover{

    background-color: rgba(0,0,0,0.3);

    transition: .3s;

}

.trackerPanel{

    display: none;

}

.trackerPanelShow{

    display: block;

    height: 30vh;

    width: 100%;

    margin: auto;

    background-color: #333;

    color: #999;

    box-shadow: inset 1vh 0 .5vw black, inset -1vh 0 .5vw black;

    overflow-y: auto;

    animation: showTRack .3s;

}

@keyframes showTRack {

    from{

        opacity: 0;

        height: .1vh;

    }

    to{

        opacity: 1;

        height: 30vh;

    }

}

.mainMesDocs{

    cursor: pointer;

    background-color: #222;

    border: solid thin grey;

}

.mainMesDocs:hover{

    background-color: rgba(0,0,0,0.8);

}

.finDoxCont:hover{

    background-color: rgba(0,0,0,0.5);

}

.finRev{

    border-radius: .5vw;

    cursor: pointer;

    padding-right: 1vw;

    padding-left: 1vw;

}

.finRev:hover{

    background-color: rgba(200,200,200,0.2);

}