/*
=========================================================================================================================  
Arabic: ربي يسر ولا تعسر ,و تمم بالخير 
English: O my Lord, make this task easy for me, and do not make it difficult for me and let my affairs end with goodness.
Code Author: Muhammad Muashir uddin
=========================================================================================================================  
*/


*{
    margin: 0;
}
.guide{
    position: relative;
    display: flex;
    width: 580px;
    height: 30px;
    justify-content: center;
    align-items: center;
}
.guideBox{
    position: relative;
    display: flex;
    width: 510px;
    height: 30px;
    align-items: center;
}
#ctrl{
    position: absolute;
    top: 0;
    left: 0;
}
.imgInp{
    display: none;
}
.header {
    color: #ffcc00;
    background-color: #333333;
    font-family: RobotoMedium;
}

body {
    overflow: hidden;
}

.splash {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 10px #999999);
    content: url("../images/splash.png");
}

.app {
    position: absolute;
    background-color: #FFFFFF;
    transform: scale(0);
}

/*===========================
Accordian Style 
=============================*/

.accComp {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 330px;
    background-color: transparent;
    padding: 0px;
    overflow-x: hidden;
    overflow-y: auto;
    /* box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%); */
}

.accordion {
    display: block;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
    font-family: RobotoMedium;
    background-color: #5695d3;
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
    border-radius: 10px 10px 0px 0px;
}

.accordion.active {
    display: block;
    background-color: #007fb1;
}

.accordion:hover {
    background-color: #4578aa;
    border: 1px solid #0081cd;
}

.accpanel {
    background-color: #ffffff;
    overflow: hidden;
    position: relative;
    border-radius: 0px 0px 10px 10px;
    border: 1px solid #aaaaaa;
}
.panelPropCore{
    width: 100%;
    height: 100%;    
}
/*===========================
Accordian Style End
=============================*/

/*
===========================
Navigation Menu Style 
===========================
*/

.navbar {
    overflow: hidden;
    background-color: transparent;
    font-family: Arial, Helvetica, sans-serif;
    height: 26px;
}

.navbar p {
    float: left;
    font-size: 12px;
    color: white;
    text-align: center;
    /* padding: 14px 16px; */
    /* padding: 1px 1px; */
    text-decoration: none;
}

.dropdown {
    float: left;
    overflow: hidden;
    padding-left: 5px;
    /* border-top-left-radius: 5px;
    border-top-right-radius: 5px; */
}

.dropdown .dropbtn {
    cursor: pointer;
    font-size: 12px;
    border: none;
    outline: none;
    color: white;
    /* padding: 14px 16px; */
    padding: 6px 6px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.navbar p:hover,
.dropdown:hover .dropbtn,
.dropbtn:focus {
    background-color: #0099ff;
}

.dropdown-content {
    border: 1px solid #dddddd;
    display: none;
    position: absolute;
    background-color: #ffffff;
    min-width: 100px;
    padding-left: 5px;
    padding-right: 5px;
    /* width: fit-content; */
    /* box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); */
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    padding-bottom: 10px;
    z-index: 10;
}

.dropdown-content p {
    float: none;
    color: black;
    padding: 2px 6px;
    margin: 0px;
    text-decoration: none;
    padding: 5px 5px;
    display: block;
    text-align: left;
}

.dropdown-content p:hover {
    background-color: #0099ff;
    color: #FFFFFF;
    cursor: default;
}

.show {
    display: block;
}


/*
=============================
End of Navigation Menu Style 
=============================
*/

.button {
    user-select: none;
    font-family: RobotoMedium;
    font-size: 14px;
    padding: 0px;
    color: #FFFFFF;
    padding: 0px 5px;
    background: #007bff;
    cursor: pointer;
    text-align: center;
    border-radius: 5px;
    opacity: 1;
    border: none;
    /* padding: 5px; */
    padding: 0px;
    padding-left: 8px;
    padding-right: 8px;
}

.disable {
    filter: grayscale(100%);
    opacity: .25;
    pointer-events: none;
}
.disableGray50{
    filter: grayscale(50%);
    pointer-events: none;
}
.disableGray0{    
    pointer-events: none;
}

.popupTitle {
    color: #FF0000;
    font-family: RobotoMedium;
    font-size: 20px;
    font-weight: 700;
}

.popupMessage {
    color: #000000;
    font-family: RobotoMedium;
    font-size: 14px;
}

.label {
    width: auto;
    color: #000000;
    font-family: RobotoMedium;
    font-size: 14px;
}

.sns-value {
    cursor: url("../images/mycursor.svg"), auto;
}

.value {
    color: #0059ff;
    font-family: RobotoMedium;
    font-size: 14px;
    background-color: transparent;
}

.unit {
    padding-left: 0px;
    color: #5f5f5f;
    font-family: RobotoMedium;
    font-size: 14px;
}

.reg-box {
    width: 8px;
    height: 8px;
    /* border: 1px solid #999999; */
    border: 1px solid #007bff;
}


/* TREEVIEW STYLE */
.tv{
    position: relative;
    width: 305px;
    height: 305px;    
}
.tvHeader{
    position: relative;
    display: inline;
}
.tvIcon{
    filter: drop-shadow(2px 2px 2px #aaaaaa);
}
.tvHeaderIcon{    
    /* filter: drop-shadow(2px 2px 2px #aaaaaa); */
    position: relative;
    top: 3px;
    top: 0;
    margin-right: 10px;
}
.tvBox{
    border: 1px solid #cccccc;
    width: 300px;
    height: 270px;
    top: 30px;
    overflow: auto;
    white-space: nowrap;
}
.tvInput{
    width: 100%;
    border: none;
    outline: none;
    top: 2px;
    padding-left: 0;
}
.ul{
    list-style-type: none;
    margin: 0;
    padding: 5px;
}
.li{
    list-style-type: none; 
    display: block;
}
.tvLabel{
    display: inline-block;
    font-family: Roboto;
    font-size: 14px;
    position: relative;
    top: -7px;
    line-height: 15px;
    color: #666666;
    padding-top: 1px;
    padding-bottom: 2px;
    padding-left: 6px;
    padding-right: 6px;
    margin-left: 3px;    
    user-select:  none;
    letter-spacing: 4;
    background: transparent;
    border: none;
    width: auto;    
}

/* END OF TREEVIEW STYLE */

.button:hover {
    background: #0062ca;
    border: none;
}

.popupTitle {
    color: #FF0000;
    font-family: RobotoMedium;
    font-size: 20px;
    font-weight: 700;
}

.popupMessage {
    color: #000000;
    font-family: RobotoMedium;
    font-size: 14px;
}

.label {
    color: #000000;
    font-family: RobotoMedium;
    font-size: 14px;
}

.sns-value {
    cursor: url("../images/mycursor.svg"), auto;
}

.value {
    color: #0059ff;
    font-family: RobotoMedium;
    font-size: 14px;
    background-color: transparent;
}

.unit {
    color: #5f5f5f;
    font-family: RobotoMedium;
    font-size: 14px;
}

.reg-box {
    width: 8px;
    height: 8px;
    border: 1px solid #007bff;
}

/* Menu */
.menu{
    width: auto;
    height: auto;
    position: fixed;
    top: -2px;
    display: flex;
    background: #ff000000;
    justify-content: center;
    align-items: flex-start;
    font-family: Sans-SemiBold;
    font-size: 16px;
    color: #FFFFFF;
    z-index: 2;
}
.menuLabel{    
    cursor: pointer;
    margin: 5px;
    margin-left: 10px;
    margin-right: 25px;
    user-select: none;
}
.submenuBox{
    /* margin-top: 70px; */
    display: none;
    border-radius: 7px;
    border: 1px solid #cccccc;
    padding-top: 10px;
    margin-top: 10px;
    padding-bottom: 10px;
    background: #FFFFFF;
    width: auto;
    height: auto;
    box-shadow: 2px 2px 5px #00000033;
    position: fixed;
}
.submenuLabel{
    padding: 5px 20px 5px 20px;
    margin-bottom: 5px;
    color: #000000;
    background: #ffffff;
    font-family: Sans-SemiBold;
    font-size: 16px;
    cursor: pointer;
}
.submenuLabel:hover{
    background: #5695d3;
    color: #ffffff;
}
.leafMenuBox{
    display: none;
    margin-top: 70px;
    border-radius: 7px;
    padding-top: 10px;
    padding-bottom: 10px;
    background: #FFFFFF;
    width: auto;
    height: auto;
    box-shadow: 5px 5px 15px #00000033;
    position: fixed;
}
.propLabel{
    color: #0070ff;
    font-weight: 600;
    letter-spacing: 1.25px;
    font-family: Roboto;
    font-size: 14px;
    padding-left: 5px;
    user-select: none;
}
.propLabel2{
    color: #333333;
    font-weight: 600;
    letter-spacing: 1.25px;
    font-family: Roboto;
    font-size: 14px;
    padding-left: 0px;
    user-select: none;
}
propInput{
    color: #333333;
    font-weight: 600;
    letter-spacing: 1.25px;
    font-family: Roboto;
    font-size: 14px;
    padding-left: 0px;
    /* user-select: none; */
}
.colorBox{
    display: block;
    width: 12px;
    height: 12px;
    border: 1px solid #cccccc;
    box-shadow: 2px 2px 2px 0px rgb(0 0 0 / 25%);    
}
.commonProp{
    display: block;
}

.setFileName{
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #FFFFFF02;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
}
.filenameBox{    
    background-image: url("assets/images/delete.png");
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    font-family: 'Roboto';
    width: 340px;
    height: 100px;
    border-radius: 10px;
    border: 1px solid #CCCCCC;
    background: #FFFFFF;
    box-shadow: 2px 2px 2px 0px rgb(0 0 0 / 25%);
}

/* width */

::-webkit-scrollbar {
    width: 10px;
}


/* Handle */

::-webkit-scrollbar-thumb {
    background: #dddddd;
    border-radius: 10px;
}


/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
    background: #cccccc;
}

@font-face {
    font-family: RobotoLight;
    src: url(../fonts/Roboto-Light.ttf);
}
@font-face {
    font-family: RobotoMedium;
    src: url(../fonts/Roboto-Medium.ttf);
}
@font-face {
    font-family: Roboto;
    src: url(../fonts/Roboto-Regular.ttf);
}
@font-face {
    font-family: Roboto-Bold;
    src: url(../fonts/Roboto-Bold.ttf);
}
@font-face {
    font-family: Sans-Light;
    src: url(../fonts/OpenSans-Light.ttf);
}
@font-face {
    font-family: Sans-Regular;
    src: url(../fonts/OpenSans-Regular.ttf);
}
@font-face {
    font-family: Sans-SemiBold;
    src: url(../fonts/OpenSans-SemiBold.ttf);
}
@font-face {
    font-family: Sans-Bold;
    src: url(../fonts/OpenSans-Bold.ttf);
}