@font-face {
    font-family: 'RobotoBold';
    src: url('fonts/roboto/Roboto-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'LemonBold';
    src: url('fonts/lemon_milk/LEMONMILK-Bold.otf');
}

@font-face {
    font-family: 'RobotoLightItalic';
    src: url('fonts/roboto/Roboto-LightItalic.ttf') format('truetype');
}
@font-face {
    font-family: 'LemonLightItalic';
    src: url('fonts/lemon_milk/LEMONMILK-LightItalic.otf');
}

@font-face {
    font-family: 'RobotoLight';
    src: url('fonts/roboto/Roboto-Light.ttf') format('truetype');
}
@font-face {
    font-family: 'LemonLight';
    src: url('fonts/lemon_milk/LEMONMILK-Light.otf');
}


body {
    margin: 0%;
    padding: 0%;
    border-radius: 0%;
    border: none;
    overflow: hidden;
    background-color: #444444;
    font-family: 'RobotoBold', 'LemonBold';
}

td {
    max-width: none;
}

.flex {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0%;
    padding: 0%;
}

.body2 {
    justify-content: start;
    align-items: start;
    width: 100%;
}

.header {
    background-color: #444444;
    flex-direction: column;
    width: 5%;
    height: 98vh;
    justify-content: start;
    padding-top: 1vw;

}

.navItem {
    text-decoration: none;
    color: #ffffff;
    font-size: .8vw;
    padding: .2vw;
    margin: 0vw;
    height: 6%;
    width: 70%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1vw;
    margin: .3vw;
}

.navImg {
    width: 2.5vw;
    height: 2.5vw;

}

.navItem:hover {
    background-color: #1A1A1A;
}

.databaseDisplays{
    justify-content: start;
    align-items: start;
    width: 100%;
    flex-wrap: wrap;
    padding: 5vh;
    overflow-y: scroll;
    max-height: 90vh;
}
.databaseDisplays::-webkit-scrollbar{
    display: none;
    width: 0%;
}
.database{
    width: 22vw;
    height: 9vw;
    background-color: #333333;
    margin: 1vw 2vw;
    padding-left: 1vw;
    border-radius: 1vw;
    flex-direction: row;
    align-items: start;
    justify-content: start;
    color: #66B2FF;
    box-shadow: 2px 2px 8px 2px #66B2FF;
    flex-wrap: wrap;
    justify-content: space-between;
}
.databaseCreation{
    width: 22vw;
    height: 9vw;
    background-color: #ffffff;
    margin: 1vw 2vw;
    padding-left: 1vw;
    border-radius: 1vw;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    color: #444444;
    box-shadow: 2px 2px 8px 2px #333333;
}
.databaseTitle{
    font-size: 1.5vw;
    font-family: 'Roboto light', 'Cleon';
    font-weight: 200;
    cursor: pointer;
    margin: 1vw 0vw;
    height: 2.5vw;
    display: flex;
    align-items: center;
}
.databaseTitle:hover{
    text-decoration: underline;
}
.databaseIcon{
    width: 2.5vw;
    height: 2.5vw;
    margin: 1vw;
    cursor: pointer;

}
.databaseOther{
    justify-content: space-between;
    width: 90%;
    margin-top: .7vw;
    font-size: .5vw;
    opacity: .8;
    font-weight: 100;
}
.databaseImage{
    width: 3vw;
    height: 3vw;
    border-radius: 50%;
    cursor: pointer;
}
.databaseOwner{
    font-weight: 100;
    font-family: 'RobotoLightItalic', 'LemonLightItalic';
}
.databaseBody {
    background-color: #333333;
    width: 100%;
    height: 100vh;
    display: flex;
    overflow-y: scroll;
    border-bottom-left-radius: 1%;
}

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

.databaseHeader {
    flex-direction: column;
    justify-content: start;
    width: 7%;
    border-right: solid 1px #ffffff79;
    background-color: #333333;


}

.databaseItem {
    color: #ffffff;
    text-decoration: none;
    height: 5vh;
    width: 90%;
    font-size: .7vw;
    font-weight: 100;
    justify-content: start;
    padding-left: 10%;
    cursor: pointer;
}

.databaseDiv {
    width: 95%;
    overflow-x: scroll;
    position: fixed;
    background-color: #333333;
    right: 0%;
    height: 0%;
    flex-direction: column;
    align-items: start;
    justify-content: start;
}

.databaseDiv::-webkit-scrollbar {
    background: none;
    height: 2vh;
    cursor: pointer;
}
.databaseDiv::-webkit-scrollbar-thumb {
    height: 2vh;
    background-color: #1A1A1A;
    border-radius: 1vw;
}
.dataHeader{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    border-bottom: solid 1px #333333;
}

.tableHeader {
    height: auto;
    width: 98.7%;
    justify-content: space-between;
    padding-left: 0vw;
    overflow-x: scroll;

}

.tableHolder{
    width: 99%;
    padding: 0%;
    justify-content: start;
    height: 100%;
    align-items: start;
}
.tableHeader::-webkit-scrollbar {
    display: none;
    width: 0%;
    height: 0%;
}
.BackButton{
    color: #ffffff;
    font-size: 1.2vw;
    cursor: pointer;
    margin: 0%;
    margin-left: .3vw;
}

.BackButton:hover{
    opacity: .8;
}
.BackButtonSVG{
    width: 2vw;
    height: 2vw;
}
.BackButtonSVG:hover{
    opacity: .8;
}
.table {
    padding: 0vw 1vw;
    font-size: 1vw;
    color: #66B2FF;
    background-color: transparent;
    cursor: pointer;
    opacity: .9;
    font-family: 'RobotoLightItalic', 'LemonLightItalic';
    background: transparent;
    height: 75%;
    border-radius: 0.1%;
}

.table:hover {
    opacity: 1;
}

.BlueBlackBtn {
    color: #66B2FF;
    background-color: #444444;
    border: none;
    padding: .7vw;
    border-radius: 1vw;
    font-size: .8vw;
    margin: .5vw .5vw;
    cursor: pointer;
    box-shadow: 2px 2px 8px 2px rgba(27, 27, 27, .2);
    font-family: 'RobotoBold', 'LemonBold';
}

.BlueBlackBtn:hover {
    transform: scale(102%);
}

.SmlBBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #66b2ff;
    color: #333333;
    font-size: .8vw;
    cursor: pointer;
    width: 90%;
    padding: 5%;
    height: 5vh;
    margin: 0%;
}

.SmlBBtn:hover {
    opacity: .9;
}

.dataInsertBtn {
    color: #66B2FF;
    background-color: #444444;
    padding: .4vw;
    margin: 1vw;
    border-radius: 1.5vw;
    font-size: .6vw;
    cursor: pointer;
    border: none;
    outline: none;
    font-family: 'RobotoBold','LemonBold';
    box-shadow: 2px 2px 8px 2px rgba(27, 27, 27, .2);
}

.dataInsertBtn:hover {
    opacity: .8;
}
.bulkInsert {
    color: #66B2FF;
    background-color: #444444;
    padding: .4vw;
    margin: 1vw;
    border-radius: 1.5vw;
    font-size: .6vw;
    cursor: pointer;
    border: none;
    outline: none;
    font-family: 'RobotoBold', 'LemonBold';
    box-shadow: 2px 2px 8px 2px rgba(27, 27, 27, .2);
}
#FavDB{
    padding: .6vw;
    margin: 1vw;
    border-radius: 1.5vw;
    font-size: .6vw;
    background-color: #444444;
    color: #66b2ff;
    border: none;
    cursor: pointer;
}

.bulkInsert:hover {
    opacity: .8;
}

.SVG {
    width: 1.2vw;
    height: 1.2vw;
}

.TableDisplay {
    margin-top: 8vh;
    margin-left: 1%;
    margin-right: 2%;
    padding: .2vw;
    border-collapse: collapse;
    border-spacing: 0;
    color: #66B2FF;
    overflow-x: scroll;
}
.TableDisplay::-webkit-scrollbar{
    background-color: red;
    width: 100%;
    height: 100%;
}

.tableDesc {
    display: flex;
    align-items: center;
    font-size: 1vw;
    background-color: #444444;
    min-width: 10vw;
    height: 4vh;
    width: auto;
    max-width: none;
    padding: .2vw 0vw .2vw .3vw;
    
}

.tableRow {
    margin: 0%;
    padding: 0%;
    margin: 0vw;
    display: flex;
    flex-direction: row;
    width: 100%;
}

.tableData {
    padding-top: .4vw;
    padding-bottom: .3vw;
    padding-left: .25vw;
    min-width: 10vw;
    width: 10vw;
    max-width: 10vw;
    min-height: 3vh;
    max-height: none;
    font-size: .5vw;
    font-family: 'RobotoLight', 'LemonLight';
    border-bottom: solid 1px #444444;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    line-break: strict;
    flex-basis: 100%;
    
}


.tableData:hover {
    background-color: #444444;
}

.tableInput {
    margin: 0%;
    border: none;
    min-height: 3vh + .6vw;
    max-width: 100%;
    background: none;
    color: #66B2FF;
    font-size: .5vw;
    outline: none;
    font-family: 'RobotoLight', 'LemonLight';
    width: 100%;
    min-width: 100%;
}

.tableInput::-webkit-scrollbar{
    display: none;
}
.tableTD::-webkit-scrollbar{
    display: none;
}

.tableTD {
    width: 10vw;
    border-bottom: solid 1px #B22222;
    padding-left: .3vw;
}

.tableID {
    height: 2vw;
    width: 1.5vw;
    font-size: 1.2vw;
    margin: 0%;
    color: #ffffff;
    text-align: center;
}

.tableEdit {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3vh + .6vw;
    width: 5vw;
    margin: 0%;
    color: #ffffff;
    font-size: .7vw;
}

.addRowBtn {
    color: #66B2FF;
    background-color: #444444;
    padding: .4vw .4vw;
    font-size: .8vw;
    cursor: pointer;
    min-width: 6vw;
    margin: 0% 0% 0% 1vw;
    width: 5vw;
    height: 4vh;
    border: none;
    outline: none;
    border-radius: .1vw;
}

.addRowBtn:hover {
    opacity: .9;
}

.editRowBtn {
    width: 4vw;
    background: #B22222;
    border-radius: 2vw;
    margin-left: 2vw;
    text-align: center;
    color: #ffffff;
    font-size: .8vw;
    height: 80%;
    border: none;
    min-width: 4vw;
}

.editRowBtn:hover {
    transform: scale(0.95);
}

.NewDatabaseModal {
    width: 20%;
    border: solid 2px #1A1A1A;
    outline: none;
    background-color: #444444;
    border-radius: 1vw;
    margin: auto;
    align-items: center;
    justify-content: start;
    flex-direction: column;
    display: none;
}

.NewDatabaseModal::backdrop {
    outline: none;
    background-color: #1A1A1A;
    opacity: .3;
}

dialog {
    overflow-x: hidden;
}

.ModalDiv {
    width: 100%;
    justify-content: center;
}

.ModalH1 {
    color: #66B2FF;
    font-size: 1vw;
    font-weight: 500;
    width: 80%;
    text-align: center;
    margin: 0%;
    margin-top: 2vw;
    margin-bottom: 2vw;
    padding: 0%;
}

.ModalClose {
    color: #66B2FF;
    height: 3.5vh;
    font-size: 3vw;
    font-weight: 100;
    cursor: pointer;
    padding: 1vw;
    position: absolute;
    top: 2%;
    right: 2%;
    z-index: 10;
    transition: 100ms ease-in-out;
}
.ModalClose:hover{
    transform: scale(1.05)
}

.ModalInp {
    color: #66B2FF;
    font-size: 1vw;
    font-weight: 500;
    outline: none;
    margin-top: 3vw;
    background-color: #333333;
    border: none;
    padding: .8vw;
    border-radius: 1.5vw;
}

.ModalInp:focus {
    border: #1A1A1A 1px solid;
}

.ModalBtn {
    color: #66B2FF;
    font-size: 1vw;
    background-color: #333333;
    padding: .2vw .5vw;
    margin-top: 1.5vw;
    margin-bottom: 1vw;
    border-radius: 1vw;
    cursor: pointer;
    width: 60%;
    border: none;
    outline: none;
}

.ModalBtn:hover {
    border: #ffffff 1px solid;
}
.ModalCommit{
    background-color: #66B2FF;
    color: #444444;
    width: 10vw;
    padding: 1vw;
    font-size: .8vw;
    border-radius: 1vw;
    border: none;
    margin: 1vw;
}
.ModalCommit:hover{
    transform: scale(.99);
    opacity: .9;
}
.newTable{
    font-size: 1vw;
    width: 6%;
    padding: .8% 1%;
    text-align: center;
    color: #66B2FF;
    background-color: #444444;
    box-shadow: 2px 2px 8px 2px rgba(27, 27, 27, .2);
    margin: 1%;
    margin-top: 0.4%;
    border-radius: 1vw;
    cursor: pointer;
}
.newTable:hover{
    opacity: .9;
    transform: scale(.95);
}
.NewTableModal {
    width: 30%;
    min-height: 35%;
    border: solid 2px #1A1A1A;
    outline: none;
    background-color: #444444;
    border-radius: 1vw;
    margin: auto;
    align-items: center;
    justify-content: start;
    flex-direction: column;
    display: none;
}

.NewTableModal::backdrop {
    outline: none;
    background-color: #1A1A1A;
    opacity: .3;
}

.ModalSVG {
    width: 1.5vw;
    height: 1.5vw;
}

.ModalBtnText {
    width: 80%;
    font-size: 1vw;
    text-align: center;
}

.newTableRow {
    font-size: 1vw;
    color: #66B2FF;
    width: 35%;
    justify-content: space-around;
    text-decoration: underline;
    cursor: pointer;
    background: none;
    outline: none;
    border: none;
}

.TableForm {
    flex-direction: column;
}

.tableRows {
    flex-direction: column;
    margin-bottom: 3vw;
}

.TableName {
    background-color: #333333;
    border: none;
    outline: none;
    font-size: 1vw;
    padding: .4vw;
    border-radius: .1vw;
    color: #66B2FF;
    margin: 0vw 0vw 2vw 0vw;
}

.TableType {
    background-color: #66B2FF;
    border: none;
    outline: none;
    font-size: 1vw;
    padding: .4vw;
    border-radius: .1vw;
}

.typeOptions {
    background-color: #333333;
    color: #66B2FF;

}

.newRow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.RowName {
    background-color: #333333;
    border: none;
    outline: none;
    font-size: 1vw;
    padding: .4vw;
    margin: .5vw;
    border-radius: .1vw;
    color: #66B2FF;
}

.RowCustom {
    background-color: #333333;
    border: none;
    outline: none;
    font-size: 1vw;
    padding: .4vw;
    margin: .5vw;
    border-radius: .1vw;
    color: #66B2FF;
    display: none;
}

.InsertDataModal {
    width: 30%;
    border: solid 2px #1A1A1A;
    outline: none;
    background-color: #444444;
    border-radius: 1vw;
    margin: auto;
    align-items: center;
    justify-content: start;
    flex-direction: column;
    display: none;
}
.InsertDataModal::backdrop {
    background: #1A1A1A;
    opacity: .3;
}

.BulkDataModal {
    width: 30%;
    border: solid 2px #1A1A1A;
    outline: none;
    background-color: #444444;
    border-radius: 1vw;
    margin: auto;
    align-items: center;
    justify-content: start;
    flex-direction: column;
    display: none;
}

.BulkDataModal::backdrop {
    background: #1A1A1A;
    opacity: .3;
}
.BulkArea{
    background-color: #333333;
    border: #1A1A1A 1px solid;
    border-radius: .5vw;
    height: 40vh;
    width: 20vw;
    margin-bottom: 2vh;
    padding: .3vw;
    color: white;
}
.bulkDiv{
    margin-bottom: 1vw;
}
.Bulks{
    display: flex;
    width: 20vw;
    justify-content: space-between;
    align-items: center;
    padding: .2vw;
}
.bulkTable{
    font-size: .8vw;
    color: #66B2FF;
    margin: 0%;
}
.bulkArrow{
    color: #66B2FF;
    font-size: .8vw;
    margin: 0%;
}
.bulkInput{
    background-color: #1A1A1A;
    border: none;
    font-size: .8vw;
    border-radius: .2vw;
    padding: .3vw;
    color: #66B2FF;
}
.bulkTitle{
    color: #ffffff;
    font-size: 1vw;
}
.dataInsertDiv {
    flex-direction: column;
    width: 90%;
}

.dataInsertRow {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-around;
    margin: .3vw;
}

.InsertDataH1 {
    color: #66B2FF;
    width: 30%;
    font-size: .8vw;
}

.InsertDataInp {
    background: #333333;
    border: none;
    outline: none;
    min-width: 30%;
    border-radius: .5vw;
    font-size: .6vw;
    padding: .2vw .2vw;
    padding-left: .5vw;
    color: #66B2FF;
}

.DatabaseUserModal {
    width: 40%;
    border: solid 2px #1A1A1A;
    outline: none;
    background-color: #444444;
    border-radius: 1vw;
    margin: auto;
    align-items: center;
    justify-content: start;
    flex-direction: column;
    display: none;
}

.dbUserInfo {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.divUserDiv {
    width: 30%;
    margin: 1vw;
}

.dbUserRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333333;
    color: #66B2FF;
    padding: 10px 10px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-size: .6vw;
    cursor: pointer;
    position: relative;
    width: 12vw;
}

.dbUserValue {
    margin-right: 10px;
    font-size: 1.2em;

}

.dbUserLabel {
    padding-left: .5vw;
    color: #ffffff;
    font-size: .7vw;
}

.indicatorSVG {
    width: 1vw;
    height: 1vw;
}

.indicator {
    color: lightgreen;
}

.IpDiv {
    width: 60%;
    padding: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.IpInp {
    font-size: 1vw;
    border-radius: 1vw;
    padding: .7vw;
    background-color: #333333;
    border: #1A1A1A solid 1px;
    outline: none;

}

.IpLabel {
    width: 60%;
    font-size: 1vw;
    padding-left: 2vw;
    color: #66B2FF;
}

.Ipbtn {
    width: 60%;
    margin: 5%;
    border: none;
    background-color: #66B2FF;
    font-size: 1vw;
    padding: .5vw;
    border-radius: 1vw;
}

.Ipbtn:hover {
    opacity: .9;
    border: solid white 1px;
}


.AppendTableModal {
    width: 30%;
    border: solid 2px #1A1A1A;
    outline: none;
    background-color: #444444;
    border-radius: 1vw;
    margin: auto;
    align-items: center;
    justify-content: start;
    flex-direction: column;
    display: none;
}

.dbBtnHolders {
    justify-content: start;
}

.styleBlueBlack {
    color: #66B2FF;
    background-color: #444444;
    padding: .4vw;
    margin: 1vw;
    border-radius: 1.5vw;
    font-size: .6vw;
    cursor: pointer;
    border: none;
    outline: none;
    font-family: 'RobotoBold', 'LemonBold';
    box-shadow: 2px 2px 8px 2px rgba(27, 27, 27, .2);
}

.styleBlueBlack:hover {
    opacity: .8;
}

.ModifyTable {
    width: 50%;
    border: solid 2px #1A1A1A;
    outline: none;
    background-color: #444444;
    border-radius: 1vw;
    margin: auto;
    align-items: center;
    justify-content: start;
    flex-direction: column;
    display: none;
    padding-bottom: 1vw;
}

.ModifyHolder {
    width: 80%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: start;
}

.modifyDiv {
    justify-content: center;
    width: 30%;
    position: relative;
    margin: .5vw;
    border-radius: .3vw;
}

.modifySeparator {
    flex-direction: column;
}

.modifyH1 {
    color: #ffffff;
    font-size: 1.3vw;
}

.modifySelect {
    background-color: #1A1A1A;
    color: #66B2FF;
    padding: .5vw;
    border-radius: .4vw;
    margin: 1vw;
    font-size: 1.3vw;
}

.modifyBtnDiv {
    display: flex;
    position: absolute;
    border-radius: .3vw;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    transition: background-color 300ms ease-in-out;
    z-index: 10;
    justify-content: center;
    align-items: center;
}

.modifyDiv:hover .modifyBtnDiv {
    background-color: rgba(0, 0, 0, 0.7);
}

.modifyBtn {
    background-color: #B22222;
    font-size: .8vw;
    border: none;
    outline: none;
    margin: 1vw;
    padding: .6vw;
    border-radius: 1vw;
    cursor: pointer;
    opacity: 0;
    transition: 300ms ease-in-out;
    ;
}
.modifyDiv:hover .modifyBtn {
    opacity: 1;
}

.tblRemoveDiv {
    width: 100%;
    margin-top: 3vw;
}

.removeTbl {
    background-color: #B22222;
    color: #ffffff;
    font-size: 1vw;
    padding: .7vw;
    border-radius: 1vw;
    border: none;
    outline: none;
    cursor: pointer;
    transition: 100ms ease-in-out;
}
.removeTbl:hover{
    transform: scale(.95);
}


/* CONSOLE TAB */
.consoleDiv{
    align-items: start;
}
#consoleOutput, #consoleError{
    margin: 1vw;
    background-color: #333333;
    width: 30vw;
    height: 80vh;
    color: #ffffff;
    overflow-y: scroll;
    padding: 2vw;
    border-radius: 1vw;
    position: relative;
}
#consoleOutput::-webkit-scrollbar, #consoleError::-webkit-scrollbar{
    background: none;
    border-radius: 1vw;
}
#consoleOutput::-webkit-scrollbar-thumb, #consoleError::-webkit-scrollbar-thumb{
    background-color: #ffffff;
    border-radius: 3vw;
    width: 1vw;
}
.consoleLine{
    font-size: .6vw;
    color: #66B2FF;
}
.consoleError{
    font-size: .7vw;
    color: red;
    margin-top: 1vh;
    padding: .5vw;
}
.consoleError:hover{
    background-color: #333333;
    border: red solid 1px;
}
.errReset{
    position: fixed;
    top: 4vw;
    width: 5vw;
    height: 3vh;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    overflow: hidden;
    border-bottom-left-radius: 1vw;
    border-bottom-right-radius: 1vw;
    opacity: .3;
    cursor: pointer;
    
}
.errReset:hover{
    opacity: 1;
    background-color: rgba(255, 255, 255, .8);
}
.errButton{
    margin-top: 1vw;
    background: #66B2FF;
    padding: .7vw;
    font-size: .5vw;
    border-radius: .5vw;
    border: none;
    transition: 100ms;
    cursor: pointer;
    color: #1A1A1A;
    border: solid 1px #1A1A1A;
}
.errButton:hover{
    transform: scale(105%);
    border: solid 1px #333333;
}
.errIndic{
    margin: 0%;
    color: #333333;
    transform: rotate(-90deg) ;
    transition: 300ms;
    padding: .4vw;
    margin-top: -.4vw;
    font-size: 1vw;
}
#consoleBtns{
    margin-top: 1.5vw;
    display: flex;
    width: 22vw;
    flex-wrap: wrap;
    flex-direction: row;
    background-color: #333333;
    border-radius: .2vw;
    min-height: 10vh;
    justify-content: space-between;
}
#serverStatus{
    width: 40%;
    margin: .5vw;
    color: #ffffff;
}
#status{
    width: 40%;
    margin: .5vw;
    display: flex;
    justify-content: end;
    flex-direction: row;
    flex-wrap: nowrap;
    color: #ffffff;
}
.statusIndic{
    margin: 0%;
    width: .5vw;
    height: .5vw;
    background-color: #1A1A1A;
    border-radius: 50%;
}
#statusText{
    margin: 0%;
    margin-right: .2vw;
    font-size: 1.1vw;
}

.consoleOpt{
    background-color: #66B2FF;
    border: none;
    outline: none;
    font-size: 1vw;
    border-radius: .2vw;
    margin: .5vw;
    padding: .5vw;
    font-family: 'RobotoBold', 'LemonBold';
    height: 4vh;
    cursor: pointer;
    width: 45%;
}
#start{
    background-color: rgb(54, 201, 54);
}
#stop{
    background-color: #d32c2c;
}
#rerun{
    color: #ffffff;
    background-color: #1A1A1A;
}
#restart{
    background-color: #444444;
    color: #ffffff;
}
#visitSite{
    width: 100%;
    background-color: #66B2FF;
    color: white;
    font-size: 1vw;
    margin: .5vw;
    margin-top: 1vw;
    padding: .5vw;
    cursor: pointer;
    border: none;
    outline: none;
    border-radius: .2vw;    
    text-align: center;
    text-decoration: none;
}
#visitSite:hover{
    transform: scale(99%);
    opacity: .8;
}
#Settings{
    width: 100%;
    background-color: gray;
    color: white;
    font-size: 1vw;
    margin: .5vw;
    padding: .5vw;
    cursor: pointer;
    border: none;
    outline: none;
    border-radius: .2vw;
}
#Settings:hover{
    transform: scale(99%);
    opacity: .8;
}
.settingsText{
    font-size: 1vw;
    margin: 0%;
}
.settingsArrow{
    width: 1vw;
    height: 1vw;
    transform: rotate(180deg);
}
.settingsDiv{
    width: 100%;
    color: white;
    font-size: 1vw;
    margin: .5vw;
    margin-top: 0vw;
    cursor: pointer;
    border: none;
    outline: none;
    border-radius: .2vw;
    height: auto;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    transition: 300ms ease-out;

}
.settingsTitle, .settingsTitleHalf{
    width: 94%;
    text-align: left;
    font-size: .7vw;
    margin-top: 1vw;
    padding: 2%;
    padding-bottom: 0%;
}
.settingsTitleHalf{
    width: 44%;
}
.SettingsInputs, .SettingsInputsHalf{
    width: 96%;
    background-color: #444444;
    color: #ffffff;
    padding: 3%;
    padding-right: 0%;
    font-size: .7vw;
    border: none;
    outline: none;
    border-radius: .2vw;
}
.SettingsInputsHalf{
    width: 46%;
}
.settingsSave{
    width: 100%;
    background-color: #ffffff;
    color: #1A1A1A;
    padding: .5vw;
    border-radius: .2vw;
    margin-top: .5vw;
    font-size: 1vw;
    cursor: pointer;
    transition: 100ms ease;
}
.settingsSave:hover{
    transform: scale(99%);
    opacity: .8;
}

.settingsDelete{
    width: 100%;
    background-color: #d32c2c;
    color: #ffffff;
    border: none;
    padding: .5vw;
    border-radius: .2vw;
    margin-top: 2vw;
    font-size: 1vw;
    cursor: pointer;
}
.settingsDelete:hover{
    transform: scale(99%);
    opacity: .8;
}
.loadingSVG{
    width: 2vw;
    height: 2vw;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.consoleOpt:hover{
    opacity: .8;
    transform: scale(99%);
}

.ConsoleHeader{
    width: 110%;
    height: 3vw;
    justify-content: start;
}
.project{
    margin: 0%;
    min-width: 5vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-left: solid #ffffff 1px;
    border-right: solid #ffffff 1px;
    height: 2vw;
    padding: .5vw;
    cursor: pointer;
    color: #66B2FF;
    font-size: 1vw;
}

.projectTitle{
    font-size: 1vw;
    margin: 0%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.projectIndicator{
    margin: 0%;
    font-size: 1vw;
    transform: rotate(-90deg);
    color: #444444;
}
.project:hover {
    background: #333333;
}
.projectHover{
    background: #1A1A1A;
}
.newServerIcon{
    width: 1.2vw;
    height: 1.2vw;
}
.ServerDiv{
    position: absolute;
    margin-top: 1.5vw;
    display: flex;
    width: 22vw;
    flex-wrap: wrap;
    flex-direction: row;
    background-color: #333333;
    border-radius: .2vw;
    min-height: 10vh;
    justify-content: center;
    left: 77%;
    top: 6%;
    color: #ffffff;
    padding-bottom: 1vw;
    height: 85%;
}
.ServerDesc, .ServerDescHalf{
    width: 90%;
    text-align: left;
    font-size: .7vw;
    margin-top: 1vw;
    padding: 2%;
    padding-bottom: 0%;
    color: #ffffff;
}
.ServerDescHalf{
    width: 44%;
}
.ServerInput, .ServerInputHalf{
    width: 88%;
    background-color: #444444;
    color: #66B2FF;
    padding: 3%;
    padding-left: 2%;
    padding-right: 2%;
    font-size: .7vw;
    border: none;
    outline: none;
    border-radius: .2vw;
}
.ServerInputHalf{
    width: 40%;
    margin: .6vw;
    margin-top: 0%;
    margin-bottom: 0%;
}
.ServerCreate{
    margin-top: 1vw;
    width: 90%;
    background-color: #66B2FF;
    color: #1A1A1A;
    padding: .5vw;
    border-radius: .2vw;
    border: none;
    font-size: .8vw;
}
.ServerCreate:hover{
    transform: scale(99%);
    opacity: .8;
}
.loginDiv{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 0vw 3vw;
    width: 100%;
}
.loginForm{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #333333;
    height: 50vh;
    padding: 2vw;
    font-size: 1vw;
    border-radius: 1vw;
    box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.5);
}
.loginInput{
    margin: .3vw;
    width: 15vw;
    padding: 1vw;
    border-radius: .2vw;
    padding-bottom: 1vw;
    border: none;
    outline: none;
    background-color: #1A1A1A;
    color: #66B2FF;
    font-size: .7vw;
}
#login-button{
    margin-top: 1vw;
    width: 17vw;
    background-color: #66B2FF;
    padding: 1vw;
    border-radius: .2vw;
    border: none;
    font-size: .7vw;
    cursor: pointer;
}
#login-button:hover{
    opacity: .8;
    transform: scale(99%);
}
#google-button{
    margin-top: 3vw;
    width: 17vw;
    padding: 1vw;
    border-radius: .2vw;
    border: none;
    font-size: .7vw;
    cursor: pointer;
    background-color: #ffffff;  
    display: flex;
    align-items: center;
    justify-content: center;
}
.loginImg{
    width: 1.2vw;
    height: 1.2vw;
    margin-right: 1vw;
}
#google-button:hover{
    opacity: .8;
    transform: scale(99%);
}

.dashboard{
    height: 100vh;
    width: 100%;
    background-color: #333333;
    overflow-y: scroll;
}
.DashTitle{
    margin: 0%;
    margin-left: 1vw;
    margin-top: 1.5vw;
    font-size: 1.5vw;
    color: #ffffff;
}
.DashContent{
    display: flex;
}
.DashConsoleTitle{
    margin-left: 2vw;
    color: #66B2FF;
    font-size: 1.5vw;
}
.DashConsole{
    margin: 1vw;
    background-color: #1A1A1A;
    width: 30vw;
    height: 75vh;
    color: #ffffff;
    overflow-y: scroll;
    padding: 2vw;
    border-radius: 1vw;
    position: relative;

}
.DashConsole::-webkit-scrollbar{
    background: none;
    border-radius: 1vw;
}
.DashConsole::-webkit-scrollbar-thumb{
    background-color: #ffffff;
    border-radius: 3vw;
    width: 1vw;
}
.DashDatabasesTitle{
    color: #66B2FF;
    font-size: 1.5vw;
}
.DashDatabaseContainer{
    width: 50vw;
    display: flex;
    align-items: start;
    flex-direction: column;
    background-color: none;
    margin-left: 1vw;
    margin-right: 3vw;
    justify-content: start;
    height: 100%;
    border-radius: 1vw;
    overflow-x: scroll;
    overflow-y: hidden;
    transform: rotateX(180deg);
    margin-bottom: 5vw;
    padding: .5vw;


}
.DashDatabases{
    display: flex;
    align-items: center;
    flex-direction: column;
    
}
.DashDatabase{
    border-collapse: collapse;
    border-spacing: 0;
    color: #66B2FF;
    overflow-x: scroll;
    border-radius: 1vw;
    transform: rotateX(180deg);
    width: 100%;
    height: 100%;
}
.DashDatabaseContainer::-webkit-scrollbar{
    background: none;
}
.DashDatabaseContainer::-webkit-scrollbar-thumb{
    background: #66B2FF;
    border-radius: 1vw;
}
.DashDatabase::-webkit-scrollbar{
    background: none;
    border-radius: 1vw;
    border-radius: 1vw;
}
.DashDatabase::-webkit-scrollbar-thumb{
    background-color: #ffffff;
    border-radius: 3vw;
    width: 1vw;
}
.DashDatabaseDesc{
    font-size: 1vw;
    color: #66B2FF;
    border-radius: 5vw;
    background: #333333;
    color: #ffffff;
}
.DashDatabaseName{
    width: 10vw;
    max-width: 10vw;
    height: 2vh;
    font-size: 1.3vw;
    padding: .5vw;
}
.DashDatabaseRow{
    font-size: 1vw;
    color: #66B2FF;
    padding: .5vw;
    padding-top: vw;
    height: auto;
}
.DashDatabaseRowItem{
    width: 10vw;
    max-width: 10vw;
    height: 2vh;
    font-size: 1vw;
    color: #ffffff;
    padding: .5vw;
    border-bottom: solid #333333 1px;
    padding-top: 1vw;
}
.filesBody{
    width: 100%;
}
.filesHeader{
    display: flex;
    align-items: center;
}
.fileInputMed{
    height: 1vw;
    width: 13vw;
    background-color: #333333;
    border: 1px solid #1A1A1A;
    border-radius: .2vw;
    color: white;
    outline: none;
    padding: .2vw;
    margin: .5vw;
    font-size: .7vw;
    
}
.fileNavigation{
    color: white;
    font-size: 1.2vw;
    margin: .5vw;
    display: flex;
    cursor: default;
}
.fileNavItem{
    cursor: pointer;
    margin: 0%;
    padding: 0%;
}
.fileDiv{
    background-color: #333333;
    color: #66B2FF;
    width: 60%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .3vw;
    padding: .4vw;
}
.fileIcon{
    width: 1.4vw;
    height: 1.4vw;
    background-color: #66B2FF;
    color: #333333;
    padding: .2vw;
    border-radius: .3vw;
    cursor: pointer;
}
.fileIcon:hover{
    opacity: .8;
}
.folderIcon{
    width: 1.4vw;
    height: 1.4vw;
    padding: .2vw;
    border-radius: .3vw;
    cursor: pointer;
}
.folderIcon:hover{
    opacity: .8;
}
#file{
    display: none;
}
#filename, #folderName{
    display: none;
}
.uploadButton{
    background-color: #66B2FF;
    color: #333333;
    outline: none;
    border: none;
    display: none;
    align-items: center;
    padding: .2vw .3vw;
    border-radius: .2vw;
    font-size: .7vw;
    cursor: pointer;
    margin-left: 2vw;
}
.uploadButton:hover{
    opacity: .8;
}

#fileCover{
    background-color: #333333;
    color: #ffffff;
    border: none;
    outline: none;
    padding: .47vw;
    font-size: .6vw;
    margin: .7vw;
    border-radius: .3vw;
    cursor: pointer;
    display: none;
}
#fileCover:hover{
    opacity: .8;
}
.fileSelected{
    font-size: .7vw;
    color: #66B2FF;
    display: none;
}
.fileName{
    width: 30%;
    overflow: hidden;
}
.filenameInput{
    width: 30%;
    overflow: hidden;
    border: solid 1px #66B2FF;
    background-color: #444444;
    padding: .3vw;
    color: #66B2FF;
    margin-right: 10%;
    display: none;
}
.filenameInput:focus{
    outline: none;
}
.secretFilePath{
    display: none;
}
.fileOwner{
    width: 50%;
    overflow: hidden;
}
.fileuploadDate{
    width: 10%;
    overflow: hidden;
}
.shareHeader{
    position: absolute;
    top: 0%;
    padding-top: 1vw;
    padding-bottom: 2vw;
    height: 3.5vh;
    color: #66B2FF;
}
.fileShareModal{
    display: none;
    margin: auto;
    flex-direction: column;
    background-color: #444444;
    outline: none;
    border: solid 1px #66B2FF;
    border-radius: 1vw;
    height: 33vh;
    width: 20vw;
}
.shareHeader{
    width: 100%;
}
.shareTitle{
    margin: auto;
    font-size: 1.2vw;
}
.shareClose{
    font-size: 2vw;
    font-weight: 100;
    position: absolute;
    right: 5%;
    cursor: pointer;
}
.shareFileTitle{
    color: white;
    font-size: .8vw;
    width: 14vw;
}
.shareDropdown{
    height: 1.5vw;
    width: 15vw;
    background-color: #333333;
    border: 1px solid #1A1A1A;
    border-radius: .2vw;
    color: white;
    outline: none;
    padding: .2vw;
    margin: .5vw;
    font-size: .7vw;
}
#shareButtons{
    color: white;
    display: flex;
    justify-content: space-between;
    width: 15vw;
    padding-top: 1vh;
}
#user{
    width: 14.5vw;
}
.sendBtn{
    color: white;
    background-color: #66B2FF;
    outline: none;
    border: none;
    padding: .3vw;
    font-size: 1vw;
    border-radius: .5vw;
    width: 7vw;
}
.shareManage{
    color: #1A1A1A;
    background: none;
    outline: none;
    border: none;
    font-size: .5vw;
    cursor: pointer;
}
.smallSVG{
    width: 1.2vw;
    height: 1.2vw;
    margin-left: .2vw;
    cursor: pointer;
}
.customMenu{
    width: 8vw;
    height: max-content;
    position: absolute;
    border: none;
    outline: none;
    margin: 0%;
    padding: .1% .1% .1% .1%;
    border-radius: 2% 2% 5% 2%;
}
.customMenu::backdrop{
    background: rgba(0, 0, 0, .01);
}
.customeMenuAlign{
    width: 100%;
}
.CMitem{
    width: 88%;
    justify-content: space-between;
    padding: 4% 4%;
    margin: 2% 2% 0% 2%;
}
.CMitem:hover{
    background-color: #eeeeee;
}
.CMText{
    font-size: .7vw;
    font-weight: lighter;
    margin: 0%;
    padding: 0%;
    color: #444444;
    opacity: .8;
}
.CMSVG{
    width: .8vw;
    height: .8vw;
    opacity: .8;
    color: #444444;
}