@charset "UTF-8";

/* 작성자 : FIRSTONE */
:root {
  --color-main: #496fad; /* 러시안 블루 */
  --color-smooth: #8fb6f5; /* 부드러운 흰색 */
  --font-size: 16px;
}

html, body {
  font-family: "Noto Sans KR", "Segoe UI Semibold",verdana, sans-serif;
  font-size: var(--font-size);
}


.noto-sans-kr-500 {
  font-family: "Noto Sans KR", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

h1{font-size:50px} h2{font-size:40px} h3{font-size:30px}  h4{font-size:24px} h5{font-size:18px} h6{font-size:16px}
h1,h2,h3,h4,h5,h6 {
  font-family: "Chiron GoRound TC", sans-serif;
}

.lb-button-menu {
    font-size:var(--font-size) !important;
  font-weight:bold;
  color: gray;
  /*filter: invert(13%) sepia(100%) saturate(6101%) hue-rotate(345deg) brightness(97%) contrast(97%);*/

    &:hover,
    &:focus,
    &:active {color: #2A9AF6; }
}

.qaboxQ {
   border:2px solid DodgerBlue;
   border-radius: 5px;
   margin:10px;
   background-color: DodgerBlue;
   color : #fff;
   width:70%;
   height: auto;
   word-wrap: break-word;
   word-break: break-all;
   padding:5px 20px;
   font-size:14px;
   float:right;
   }

.qaboxA {
   border:2px solid #F2F3F4;
   margin:5px 10px;
   background-color:#fff;
   width:70%;
   height: auto;
   word-wrap: break-word;
   word-break: break-all;
   padding:5px 20px;
   font-size:14px;
   float:left;
   }

.msg-tomato {
   border:2px solid Tomato;
   margin:3px 5px;
   background-color:#fff;
   width:80%;
   height: auto;
   word-wrap: break-word;
   word-break: break-all;
   padding:3px 5px;
   font-size:14px;
   float:left;
   }
.msg-blue {
   border:2px solid DodgerBlue;
   margin:3px 5px;
   background-color:#fff;
   width:80%;
   height: auto;
   word-wrap: break-word;
   word-break: break-all;
   padding:3px 5px;
   font-size:14px;
   float:right;
   }

.lb-button-work {
  border:  1px solid gray;
  border-radius: 5px;
  padding : 5px 10px;
  font-size:var(--font-size) !important;
  background-color: #fff;
  color: gray;

    &:hover,
    &:focus,
    &:active {color: #fff !important;  background-color: rgba(0,0,255,0.8);}
}

  .DodgerBlue-to-white {
    background: linear-gradient(to right, DodgerBlue, white);
	color: white;
	padding: 5px 5px 5px 20px;
  }

.btn-button-work {
  border:  1px solid gray;
  border-radius: 5px;
/*  padding : 5px 10px; */
  font-size:var(--font-size) !important;
  background-color: #fff;
  color: gray;

    &:hover,
    &:focus,
    &:active {color: #fff !important;  background-color: rgba(0,0,255,0.8);}
}

.btn-blue-button {
    border: none;
    border-radius: 10px;
	background-color: rgba(0,0,255,0.3);
    color: #fff;
    font-size: 0.7rem; 
    padding: 5px 20px; 
    text-decoration: none;
    float: right;

    &:hover,
    &:focus,
    &:active {background-color: rgba(0,0,255,0.8);}
}

.gd-blue-down {
     background: linear-gradient(
    to bottom, 
    #8EC5FF 40%, 
    #51A2FF 70%, 
    #155DFC 100%
  );
}

.work_btn {
    border-radius: 5px !important;
    border-color:gray;
    background-image: none  !important;
    background-color: white  !important;
    font-family: 'Segoe UI Semibold', sans-serif !important;
    font-size: 16px !important;
    line-height:16px !important;


	&:hover,
        &:focus,
	&:active {font-weight: bold !important; border-color:red;}

    .x-btn-split-right:after {
	background-color: silver  !important;
	}
   .x-btn-inner  { color: navy; }
}


.round30 {
    border-radius: 30px !important;
}

.bg-gray {
  color: white !important;
    background-color: #C4C4C4  !important;
}

.hv-gray {
    &:hover,
    &:focus,
    &:active {background-color:green; color: white !important; }
}

.hv-blue {
    &:hover,
    &:focus,
    &:active {font-weight: bold; color: blue !important; }
}

.bg-white {
  color: black;
  background-color: #fff;
}

.border-none {
    border:none !important;
    background-image: none  !important;
}

.border-blue {
  border-style: solid !important;
  border-width: 1px !important;
  border-color:blue !important;
    background-image: none  !important;
}

.border-green {
  border-style: solid;
  border-width: 1px;
    border-color:green !important;
    background-image: none  !important;
}

.pd-tb-5 {
   padding-top:5px;
  padding-bottom:5px;
}

.pd-lr-20 {
  padding-left: 20px;
  padding-right: 20px;
}


.noborder_pg .x-panel-body-default {border-style: none !important;}

.CodeMirror-wrapping {width:100%; }
.CodeMirror-line-numbers {font:16px 'Source Sans Pro', sans-serif; line-height:30px;}

.side_open_table {
   border-collapse: collapse;
   border: 1px solid gray;
   border-inline: 0px ; 
   border-top: 2px solid gray;
   border-bottom:  2px solid gray;
  
   th { background-color:#BEE7FA}
   th, td { border-collapse: collapse; border: 1px solid gray; text-align: center; padding: 5px;}
}

.indent1 {
  text-indent: 10px;
}

.lawtip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  cursor: pointer; 
}

.lawtiptext {
  visibility: hidden;
  width: 500px;
  background-color: navy;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 5px 20px;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 1px;
  margin-left: -60px;
}

.lawtiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 20px;
  margin-left: 60px; 
  border-width: 5px;
  border-style: solid;
  border-color: gray transparent transparent transparent;
}

.lawtip:hover .lawtiptext {
  visibility: visible;
}