@charset "UTF-8";

/* left 영역 시작 */
.mainLeftNavi {
  background-color: #1e4d94;
}
.btn_leftLogo {
  background-image: url(images/deco-left/portal_logo.png);
  background-repeat: no-repeat;
  background-position: center;
  border: 2px solid #1e4d94;
  border-radius: 0px;
  background-color: inherit;

  &:hover {
    border: 2px solid #1e4d94 !important;
    box-shadow: 0 5px 8px rgba(33, 150, 243, 0.25);
  }

  &.cl-focus {
    border: 2px dashed #d81d00 !important;
    box-shadow: 0 5px 8px rgba(33, 150, 243, 0.25);
  }

  &:active {
    background-color: inherit !important;
    background-image: url(images/deco-left/portal_logo.png) !important;
  }
}
.btn_leftLogoDev {
  background-image: url(images/deco-left/portal_logo_dev.png);
  background-repeat: no-repeat;
  background-position: center;
  border: 2px solid #1e4d94;
  border-radius: 0px;
  background-color: inherit;

  &:hover {
    border: 2px solid #1e4d94 !important;
    box-shadow: 0 5px 8px rgba(33, 150, 243, 0.25);
  }

  &.cl-focus {
    border: 2px solid #222 !important;
    box-shadow: 0 5px 8px rgba(33, 150, 243, 0.25);
  }

  &:active {
    background-color: inherit !important;
    background-image: url(images/deco-left/portal_logo_dev.png) !important;
  }
}
.left_search {
  border-top: 1px solid #042e6d;
  background-color: #003876;
}
.btn_left_search,
.btn_left_search.cl-button:not(.cl-disabled).cl-activated,
.btn_left_search.cl-button:not(.cl-disabled):active {
  border: 1px solid #0059a9;
  background-color: #0059a9;
}

.btn_left_search.cl-button:not(.cl-disabled):hover {
  border: 1px solid #0059a9;
  box-shadow: 0 5px 8px rgba(33, 150, 243, 0.25);
  background-color: #047bb2;
}

.btn_left_search.cl-button.cl-focus {
  border: 2px dashed #d81d00 !important;
  box-shadow: 0 5px 8px rgba(33, 150, 243, 0.25);
  background-color: #047bb2;
}

.btn_left_alram,
.btn_left_alram.cl-button:not(.cl-disabled).cl-activated,
.btn_left_alram.cl-button:not(.cl-disabled):active {
  border: 1px solid #0059a9;
  background-color: #0059a9;
}

.btn_left_alram.cl-button:not(.cl-disabled):hover {
  border: 1px solid #0059a9;
  box-shadow: 0 5px 8px rgba(33, 150, 243, 0.25);
  background: #047bb2;
}

.btn_left_alram.cl-button.cl-focus {
  border: 2px dashed #d81d00 !important;
  box-shadow: 0 5px 8px rgba(33, 150, 243, 0.25);
  background: #047bb2;
}
.mainLeftInputSearch {
  border-top: 0px none !important;
  border-right: 0px none !important;
  border-bottom: 0px none !important;
  border-left: 0px none !important;
  color: #fff;
}
.btn_left_search_detail,
.btn_left_search_detail.cl-button:not(.cl-disabled).cl-activated,
.btn_left_search_detail.cl-button:not(.cl-disabled):active {
  background-color: transparent;
  background-image: url("images/deco-left/lnb_search_btn_ic.png");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  border: 0px none !important;
}
.btn_left_search_detail:not(.cl-disabled):hover {
  background-color: transparent;
  background-image: url("images/deco-left/lnb_search_btn_ic.png");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  border: 0px none !important;
  border-bottom: 1px solid #fff !important;
}
.btn_left_search_detail.cl-button.cl-focus {
  background-color: transparent;
  background-image: url("images/deco-left/lnb_search_btn_ic.png");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  border: 0px none !important;
  border-bottom: 1px solid #fff !important;
}

.btn_left_keyboard_detail,
.btn_left_keyboard_detail.cl-button:not(.cl-disabled).cl-activated,
.btn_left_keyboard_detail.cl-button:not(.cl-disabled):active {
  background-color: transparent;
  background-image: url("images/deco-left/btn_left_keyboard_ic_white.png");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  border: 0px none !important;
}
.btn_left_keyboard_detail:not(.cl-disabled):hover {
  background-color: transparent;
  background-image: url("images/deco-left/btn_left_keyboard_ic_white.png");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  border: 0px none !important;
  border-bottom: 1px solid #fff !important;
}
.btn_left_keyboard_detail.cl-button.cl-focus {
  background-color: transparent;
  background-image: url("images/deco-left/btn_left_keyboard_ic_white.png");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  border: 0px none !important;
  border-bottom: 1px solid #fff !important;
}

.btn_menuGbn,
.btn_menuGbn:not(.cl-disabled):hover,
.btn_menuGbn:not(.cl-disabled):active,
.btn_menuGbn.cl-disabled {
  color: #ffffff;
  background-color: #1e4d94;
  padding-right: 3px;
  border: 2px solid #1e4d94 !important;
}
.btn_menuGbn.cl-focus {
  color: #ffffff;
  background-color: #1e4d94;
  padding-right: 3px;
  border: 2px dashed #d81d00 !important;
}

.btn_menuGbn_select,
.btn_menuGbn_select:not(.cl-disabled):hover,
.btn_menuGbn_select:not(.cl-disabled):active,
.btn_menuGbn_select.cl-disabled {
  color: #63e6ff;
  background-color: #1e4d94;
  border: 2px solid #1e4d94 !important;
}

.btn_menuGbn_select.cl-focus {
  color: #63e6ff;
  background-color: #1e4d94;
  border: 2px dashed #d81d00 !important;
}

.btn_menuGbn.cl-disabled,
.btn_menuGbn_select.cl-disabled {
  color: #e0e0e0;
  background-color: #1e4d94;
  border: 2px solid #1e4d94 !important;
}
.cl-tree.leftMenuClass .cl-tree-item.cl-selected,
.cl-tree.leftMenuClass .noFolderMenu.cl-tree-item.cl-selected {
  color: #63e6ff;
  background-color: #143d7b;
}
.cl-tree.leftMenuClass .cl-tree-item:not(.cl-disabled):not(.cl-selected).cl-hover,
.cl-tree.leftMenuClass .cl-tree-item:not(.cl-disabled):not(.cl-selected):hover,
.cl-tree.leftMenuClass .noFolderMenu.cl-tree-item:not(.cl-disabled):not(.cl-selected).cl-hover,
.cl-tree.leftMenuClass .noFolderMenu.cl-tree-item:not(.cl-disabled):not(.cl-selected):hover {
  color: #63e6ff;
  background-color: #143d7b;
  /*     border: 2px dashed #D81D00 !important; */
}
.cl-tree.leftMenuClass .cl-tree-item.cl-folder.cl-expanded > .cl-tree-treeicon {
  background-image: url(images/deco-left/tree_dir_active.png);
}
.cl-tree.leftMenuClass .cl-tree-item.cl-folder.cl-collapsed > .cl-tree-treeicon {
  background-image: url(images/deco-left/tree_dir.png);
}
.cl-tree.leftMenuClass .cl-tree-item.cl-selected .cl-tree-itemicon {
  background-image: url(images/deco-left/tree_item.png);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 2px;
}
.cl-tree.leftMenuClass .cl-tree-item:not(.cl-disabled):not(.cl-selected) .cl-tree-itemicon.cl-hover,
.cl-tree.leftMenuClass .cl-tree-item:not(.cl-disabled):not(.cl-selected) .cl-tree-itemicon:hover {
  background-image: url(images/deco-left/tree_item.png);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 2px;
}
.cl-tree.leftMenuClass .sub-items:before {
  position: absolute;
  content: "";
  display: block;
  width: 1px;
  height: calc(100% - 18px);
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  opacity: 13%;
  margin-left: 19px;
}
.cl-tree.leftMenuClass .noFolderMenu.cl-tree-item .cl-tree-itemicon,
.cl-tree.leftMenuClass .noFolderMenu.cl-tree-item.cl-selected .cl-tree-itemicon,
.cl-tree.leftMenuClass .noFolderMenu.cl-tree-item:not(.cl-disabled):not(.cl-selected).cl-hover .cl-tree-itemicon,
.cl-tree.leftMenuClass .noFolderMenu.cl-tree-item:not(.cl-disabled):not(.cl-selected):hover .cl-tree-itemicon {
  background-image: url(images/deco-left/tree_dir_no_sub.png);
  background-size: 11px;
}
.div_noMymenu {
  position: relative;
  margin: 0 0 0 0px;
  width: 190px;
  height: 140px;
  border-radius: 20px;
  background: #143d7b;
  font-size: 15px;
  font-weight: 300;
  color: rgba(255 255 255 / 40%);
  text-align: center;
  vertical-align: middle;
  line-height: 1.3em;
}

.div_myMenuTool {
  background-color: #1a4689;
  border: 1px solid #143a73;
}
.btn_mymenu_add {
  color: #fff;
  background: url(images/deco-left/mymenu_add_ic.png) 12px 50% no-repeat;
}
.btn_mymenu_add:not(.cl-disabled):hover,
.btn_mymenu_add:not(.cl-disabled):active,
.btn_mymenu_add:focus,
.btn_mymenu_add.cl-focus {
  color: #63e6ff;
  background: url(images/deco-left/mymenu_add_ic.png) 12px 50% no-repeat;
}

.btn_mymenu_del {
  color: #fff;
  background: url(images/deco-left/mymenu_del_ic.png) 12px 50% no-repeat;
}
.btn_mymenu_del:not(.cl-disabled):hover,
.btn_mymenu_del:not(.cl-disabled):active,
.btn_mymenu_del:focus,
.btn_mymenu_del.cl-focus {
  color: #63e6ff;
  background: url(images/deco-left/mymenu_del_ic.png) 12px 50% no-repeat;
}
.btn_mymenu_del:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 15px;
  background: #103163;
  transform: translateY(-50%);
}
.div_menuTool {
  border-top: 1px solid rgba(255 255 255 / 20%);
}
.btn_tree_open {
  background: url(images/deco-left/group_add_ic.png) no-repeat 50% 50%;
  border: 2px solid transparent;
}
.btn_tree_open:not(.cl-disabled):hover,
.btn_tree_open:not(.cl-disabled):active {
  background: url(images/deco-left/group_add_ic_act.png) no-repeat 50% 50%;
  border: 2px solid transparent;
}
.btn_tree_open:focus,
.btn_tree_open.cl-focus {
  background: url(images/deco-left/group_add_ic_act.png) no-repeat 50% 50%;
  border: 2px dashed #d81d00 !important;
}
.btn_tree_fold {
  background: url(images/deco-left/group_del_ic.png) no-repeat 50% 50%;
  border: 2px solid transparent;
  margin-top: 2px;
}
.btn_tree_fold:not(.cl-disabled):hover,
.btn_tree_fold:not(.cl-disabled):active {
  background: url(images/deco-left/group_del_ic_act.png) no-repeat 50% 50%;
  border: 2px solid transparent;
}
.btn_tree_fold:focus,
.btn_tree_fold.cl-focus {
  background: url(images/deco-left/group_del_ic_act.png) no-repeat 50% 50%;
  border: 2px dashed #d81d00 !important;
}
.btn_setting {
  background: url(images/deco-left/lnb_set_ic.png) no-repeat 50% 50%;
  border: 2px solid transparent;
}
.btn_setting:not(.cl-disabled):hover,
.btn_setting:not(.cl-disabled):active {
  background: url(images/deco-left/lnb_set_ic_act.png) no-repeat 50% 50%;
  border: 2px solid transparent;
}
.btn_setting:focus,
.btn_setting.cl-focus {
  background: url(images/deco-left/lnb_set_ic_act.png) no-repeat 50% 50%;
  border: 2px dashed #d81d00 !important;
}