:root {
    --fontSize-poi: medium;
    --fontSize-robot: large;

    --viewPort-background-Color: #ececec;
    --userMap-background-Color: #ffffff;
    --zIndex-ViewPort: 0;

    --zIndex-Max: 9;

    /*icon Size*/
    --anchor-radius: 10px;
    --anchor-size: calc(var(--anchor-radius) * 2);

    --robot-anchor-radius: 14px;
    --robot-anchor-size: calc(var(--robot-anchor-radius) * 2);

    --cp-icon-radius: 12px;
    --cp-icon-size: calc(var(--cp-icon-radius) * 2);

    --robot-state-icon-radius: 12px;
    --robot-state-icon-size: calc(var(--robot-state-icon-radius) * 2);

    --signTop-Max-Width: 150px;

    --shadow-color: #888888;

    /*image Url for fe*/
    --url-UnknownData: url("timvrcs/POI_unknown.svg");

    --url-single-anchor: url("timvrcs/Anchor_single.svg");
    --url-multiple-anchor: url("timvrcs/Anchor_single.svg");

    --url-poi-type0: url("timvrcs/POI_manager.svg");
    --url-poi-type3: url("timvrcs/POI_EL.svg");
    --url-poi-type4: url("timvrcs/POI_automatic door.svg");
    --url-poi-type60: url("timvrcs/POI_location.svg");
    --url-poi-type100: url("timvrcs/POI_transit.svg");
    --url-poi-type200: url("timvrcs/POI_home.svg");
    --url-poi-type300: url("timvrcs/POI_moving.svg");
    --url-poi-type400: url("timvrcs/POI_charging station.svg");
    --url-poi-type600: url("timvrcs/POI_transit_error.svg");

    --url-robot-type8002: url("timvrcs/Robot_icon_guide.svg");
    --url-robot-type8004: url("timvrcs/Robot_icon_tray.svg");
    --url-robot-type8006: url("timvrcs/Robot_icon_cabinet.svg");
    --url-robot-type8012: url("timvrcs/Robot_icon_guide.svg");
    --url-robot-type8014: url("timvrcs/Robot_icon_tray.svg");
    --url-robot-type8016: url("timvrcs/Robot_icon_cabinet.svg");
    --url-robot-type8020: url("timvrcs/Robot_icon_logistics.svg");
    --url-robot-type8021: url("timvrcs/Robot_icon_logistics.svg");

    --url-robot-state0: url("timvrcs/Robot_status_charge.svg");
    --url-robot-state1: url("timvrcs/Robot_status_run.svg");
    --url-robot-state2: url("timvrcs/Robot_status_error.svg");
    --url-robot-state3: url("timvrcs/Robot_status_standby.svg");
    --url-robot-state4: url("timvrcs/Robot_status_EL.svg");
    --url-robot-state5: url("timvrcs/Robot_status_network-error.svg");


    --url-robot-sub-state0: url("timvrcs/fold.png");
    --url-robot-sub-state1: url("timvrcs/unfold.png");

    --url-robot-home: url("timvrcs/POI_home.svg");
    --url-robot-cs: url("timvrcs/POI_charging station.svg");

    --url-fold-icon: url("timvrcs/fold.png");
    --url-unfold-icon: url("timvrcs/unfold.png");

    --color-set-robot-state0-charge: #11830A;
    --color-set-robot-state1-run: #3068FE;
    --color-set-robot-state2-err: #E03939;
    --color-set-robot-state3-standby: #464646;
    --color-set-robot-state4-el: #7340FF;
    --color-set-robot-state5-nwerr: #E03939;

    --color-set-selected-background: #A50034FF;
    --color-set-selected-text: #FFFFFFFF;

    --thickness-robot-icon-border : 1.5px;
    --thickness-signtop-border : 1.5px;
}

/*codeToCategory: {*/
/*"8002": RobotMngr.RCTGR_GUIDE, //안내*/
/*"8004": RobotMngr.RCTGR_DELI_TRAY, //배송1.0 - 선반형 배송 로봇*/
/*"8006": RobotMngr.RCTGR_DELI_CABINET, //배송1.0 - 서랍형 배송 로봇*/
/*"8010": RobotMngr.RCTGR_OUTDOOR,//배송 - 실외*/
/*"8012": RobotMngr.RCTGR_GUIDE, //안내2.0*/
/*"8013": RobotMngr.RCTGR_SAFE,       // 안전 로봇   - 아직 정해지지 않음*/
/*"8014": RobotMngr.RCTGR_DELI_TRAY, //배송2.0 - 선반형 배송 로봇*/
/*"8016": RobotMngr.RCTGR_DELI_CABINET,*/
/*"8020" : RobotMngr.RCTGR_LOGISTICS, // 물류로봇 : 견인형*/
/*"8021" : RobotMngr.RCTGR_LOGISTICS, // 물류로봇 : 적재형*/
/*"8030": RobotMngr.RCTGR_DISINFECTION // 살균 로봇*/
/*},*/

.viewPort2d {
    z-index: var(--zIndex-ViewPort);
    cursor: default;
    width: 100%;
    height: 100%;
    background: var(--viewPort-background-Color);
    position: absolute;
    overflow: hidden;
}

.rendererLayer {
    position: absolute;
    left: 0px;
    top: 0px;
    transform-style: preserve-3d;
}

.rendererLayer.robot {
    z-index: 3;
}

.rendererLayer.location {
    z-index: 2;
}

.rendererLayer.paList {
    z-index: 1;
    pointer-events: none;
}

/*CHILD OF PA LSIT*/
.rendererLayer.pa {
    transform-origin: top left;
    pointer-events: none;
}

.rendererLayer.userMap {
    z-index: 0;
    background-color: var(--userMap-background-Color);
}

/*SignTop*/
.viewer_signTop {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5.5px 5.5px;
    padding-left: 1px;
    padding-right: 1px;
    margin-bottom: 5px;
    background-color: rgba(0, 255, 0, 0.9);
    color: #000000;
    filter: drop-shadow(3px 3px 5px var(--shadow-color));
}

.viewer_signTop.location{
    background-color: #FFFFFFE6;
    color: #000000;
}

.viewer_signTop.robot{
    background-color: #FFFFFFE6;
    color: #000000;
}

.viewer_signTop.robot.state0 {
    /*box-shadow: 0 0 0 var(--thickness-signtop-border) var(--color-set-robot-state0-charge) inset;*/
    color: var(--color-set-robot-state0-charge);
}

.viewer_signTop.robot.state1 {
    /*box-shadow: 0 0 0 var(--thickness-signtop-border) var(--color-set-robot-state1-run) inset;*/
    color: var(--color-set-robot-state1-run);
}

.viewer_signTop.robot.state2 {
    /*box-shadow: 0 0 0 var(--thickness-signtop-border) var(--color-set-robot-state2-err) inset;*/
    color: var(--color-set-robot-state2-err);
}

.viewer_signTop.robot.state3 {
    /*box-shadow: 0 0 0 var(--thickness-signtop-border) var(--color-set-robot-state3-standby) inset;*/
    color: var(--color-set-robot-state3-standby);
}

.viewer_signTop.robot.state4 {
    /*box-shadow: 0 0 0 var(--thickness-signtop-border) var(--color-set-robot-state4-el) inset;*/
    color: var(--color-set-robot-state4-el);
}

.viewer_signTop.robot.state5 {
    /*box-shadow: 0 0 0 var(--thickness-signtop-border) var(--color-set-robot-state5-nwerr) inset;*/
    color: var(--color-set-robot-state5-nwerr);
}



/*Sign Top Icon THEME*/
.viewer_signTop_Icon {
    position: relative;
    /*border-radius: 25%;*/
    width: var(--cp-icon-size);
    height: var(--cp-icon-size);
    content: var(--url-UnknownData);
    padding: 2px;

    pointer-events: none;
    -webkit-user-select: none; /* Safari */
    user-select: none; /* Standard syntax */
}

.viewer_signTop_Icon.poi {
}

.viewer_signTop_Icon.poi.type0 {
    content: var(--url-poi-type0);
}

.viewer_signTop_Icon.poi.type3 {
    content: var(--url-poi-type3);
}

.viewer_signTop_Icon.poi.type4 {
    content: var(--url-poi-type4);
}

.viewer_signTop_Icon.poi.type60 {
    content: var(--url-poi-type60);
}

.viewer_signTop_Icon.poi.type100 {
    content: var(--url-poi-type100);
}

.viewer_signTop_Icon.poi.type200 {
    content: var(--url-poi-type200);
}

.viewer_signTop_Icon.poi.type300 {
    content: var(--url-poi-type300);
}

.viewer_signTop_Icon.poi.type400 {
    content: var(--url-poi-type400);
}

.viewer_signTop_Icon.poi.type600 {
    content: var(--url-poi-type600);
}

.viewer_signTop_Icon.robotState {
    width: var(--robot-state-icon-size);
    height: var(--robot-state-icon-size);
    content: var(--url-UnknownData);
}

.viewer_signTop_Icon.robotState.state0 {
    content: var(--url-robot-state0);
}

.viewer_signTop_Icon.robotState.state1 {
    content: var(--url-robot-state1);
}

.viewer_signTop_Icon.robotState.state2 {
    content: var(--url-robot-state2);
}

.viewer_signTop_Icon.robotState.state3 {
    content: var(--url-robot-state3);
}

.viewer_signTop_Icon.robotState.state4 {
    content: var(--url-robot-state4);
}

.viewer_signTop_Icon.robotState.state5 {
    content: var(--url-robot-state5);
}

.viewer_signTop_Icon.robotState.substate0 {
    content: var(--url-robot-sub-state0);
}

.viewer_signTop_Icon.robotState.substate1 {
    content: var(--url-robot-sub-state1);
}

.viewer_signTop_Icon.robotMisc {
    content: var(--url-UnknownData);
}

.viewer_signTop_Icon.robotMisc.home {
    content: var(--url-robot-home);
}

.viewer_signTop_Icon.robotMisc.cs {
    content: var(--url-robot-cs);
}

.viewer_signTop_Icon.fold {
    content: var(--url-fold-icon);
}

.viewer_signTop_Icon.unfold {
    content: var(--url-unfold-icon);
}


/*SIGN TOP Text*/
.viewer_signTop_Text {
    width: 100%;
    text-align: center;
    font-size: var(--fontSize-poi);
    position: relative;
    display: inline-block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding-right: 3px;
    font-weight: bold;
    pointer-events: none;
    -webkit-user-select: none; /* Safari */
    user-select: none; /* Standard syntax */
}

.viewer_signTop_Text.robot {
    padding-right: 4px;
    font-size: var(--fontSize-robot);
}

/* Child Box of SignTop*/
.viewer_signTop_Children {
    max-width: var(--signTop-Max-Width);
    position: absolute;
    border-radius: 5.5px 5.5px;
    top: calc(-1 * var(--anchor-radius));
    transform-style: preserve-3d;
}

.viewer_signTop_Children:before {
    position: absolute;
    top: 100%;
    content: "";
    pointer-events: none;
    filter: drop-shadow(3px 3px 3px var(--shadow-color));
}

/* Poi Related */
.viewer_signTop_Children.location {

}

.viewer_signTop_Children.location:before {
    left: calc(50% - var(--anchor-radius));
    background-image: var(--url-single-anchor);
    background-size: var(--anchor-size) var(--anchor-size);
    width: var(--anchor-size);
    height: var(--anchor-size);
    content: "";
}


/* robot Related */
.viewer_signTop_Children.robot {
    top: calc(-1 * var(--robot-anchor-radius));
}

.viewer_signTop_Children.robot:before {
    left: calc(50% - var(--robot-anchor-radius));
    background-image: var(--url-UnknownData);
    background-size: var(--robot-anchor-size) var(--robot-anchor-size);
    width: var(--robot-anchor-size);
    height: var(--robot-anchor-size);
}

.viewer_signTop_Children.robot.type8002 {

}

.viewer_signTop_Children.robot.type8004 {

}

.viewer_signTop_Children.robot.type8006 {

}

.viewer_signTop_Children.robot.type8012 {

}

.viewer_signTop_Children.robot.type8014 {

}

.viewer_signTop_Children.robot.type8016 {

}

.viewer_signTop_Children.robot.type8020 {

}

.viewer_signTop_Children.robot.type8021 {

}

.viewer_signTop_Children.robot.type8002:before {
    background-image: var(--url-robot-type8002);
}

.viewer_signTop_Children.robot.type8004:before {
    background-image: var(--url-robot-type8004);
}

.viewer_signTop_Children.robot.type8006:before {
    background-image: var(--url-robot-type8006);
}

.viewer_signTop_Children.robot.type8012:before {
    background-image: var(--url-robot-type8012);
}

.viewer_signTop_Children.robot.type8014:before {
    background-image: var(--url-robot-type8014);
}

.viewer_signTop_Children.robot.type8016:before {
    background-image: var(--url-robot-type8016);
}

.viewer_signTop_Children.robot.type8020:before {
    background-image: var(--url-robot-type8020);
}

.viewer_signTop_Children.robot.type8021:before {
    background-image: var(--url-robot-type8021);
}

/*Events*/
.viewer_signTop_Children:hover {
    z-index: var(--zIndex-Max);
}

.viewer_signTop_Children:hover::before {

}

.viewer_signTop:hover {
    background-color: var(--color-set-selected-background) !important;
    color: var(--color-set-selected-text) !important;
}

/* Addtional Class */
.viewer_additionClass_SignTopChildren_Selected {
    z-index: var(--zIndex-Max);
}

.viewer_additionClass_SignTopChildren_Selected:before {
    /*filter: drop-shadow(0px 0px 5px var(--color-set-selected-background));*/
}

.viewer_additionClass_SignTop_Selected {
    background-color: var(--color-set-selected-background) !important;
    color: var(--color-set-selected-text) !important;
}


.viewer_additionClass_SignTopChildren_robot_outline {
    /*background-color: #2AC873;*/
    filter: drop-shadow(0px 0px 2px #000000);
}

.viewer_additionClass_SignTopChildren_robot_state0 {
}

.viewer_additionClass_SignTopChildren_robot_state0:before {
    border-radius: 50% 50%;
    box-shadow: 0 0 0 var(--thickness-signtop-border) var(--color-set-robot-state0-charge) inset;
}

.viewer_additionClass_SignTopChildren_robot_state1 {
}

.viewer_additionClass_SignTopChildren_robot_state1:before {
    border-radius: 50% 50%;
    box-shadow: 0 0 0 var(--thickness-signtop-border) var(--color-set-robot-state1-run) inset;
}

.viewer_additionClass_SignTopChildren_robot_state2 {
}

.viewer_additionClass_SignTopChildren_robot_state2:before {
    border-radius: 50% 50%;
    box-shadow: 0 0 0 var(--thickness-signtop-border) var(--color-set-robot-state2-err) inset;
}

.viewer_additionClass_SignTopChildren_robot_state3 {
}

.viewer_additionClass_SignTopChildren_robot_state3:before {
    border-radius: 50% 50%;
    box-shadow: 0 0 0 var(--thickness-signtop-border) var(--color-set-robot-state3-standby) inset;
}

.viewer_additionClass_SignTopChildren_robot_state4 {
}

.viewer_additionClass_SignTopChildren_robot_state4:before {
    border-radius: 50% 50%;
    box-shadow: 0 0 0 var(--thickness-signtop-border) var(--color-set-robot-state4-el) inset;
}

.viewer_additionClass_SignTopChildren_robot_state5 {
}

.viewer_additionClass_SignTopChildren_robot_state5:before {
    border-radius: 50% 50%;
    box-shadow: 0 0 0 var(--thickness-signtop-border) var(--color-set-robot-state5-nwerr) inset;
}


.testSingleGridText {
    width: 100%;
    z-index: 99;
    position: absolute;
    background-color: #FFFFFFAA;
    color : #FF00FF;
    text-align: center;
    font-size: xx-large;
}