/**
@Date 21-09-27
@Author Dabee-Noh
 */

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

/* 공통 색상 */
:root {
    /*--main : darkorange;*/
    --main : #119DD4;
    --white : #fff;
    --light-gray: #ececec;
    --gray : #e0e0e0;
    --grey : #bdbdbd;
    --dark-gray : #777;
    --black : #111;
}

/* 공통 설정*/
* { margin: 0; padding : 0; }

body { width: 100%; height: 100vh; /*background: var(--gray);*/ font-size: 13px; font-weight: 300; color: var(--black); font-family: 'Noto Sans KR', sans-serif;}


/* 페이지 영역 전체 틀 */
#wrap { width:100%; min-height:603px; clear:both; display:flex; position: relative; }


/* 공통 스타일 */
ul, li { list-style: none;padding: 0;margin: 0; }

button { width: 85px; height: 30px; border: none; border-radius: 5px; color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; background-color: #119DD4; margin-right: 5px;}
button:hover,
button:focus{
    background: white;
    color: black;
    box-shadow: 0 0 5px black;
}
/*.submit { background: darkorange; !important;}*/
.submit { background: #119DD4; !important;}

.cancel { background: #999; !important;}

.submit a, .cancel a, .submit a:hover, .cancel a:hover { color: var(--white); }

input, select { padding: 0.375rem 0.75rem; display : block; box-sizing: border-box; width: 100%; border: 1px solid #cecece; border-radius: 5px; background: #fdfdfd; transition : border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; text-indent: 10px; }

input:focus, select:focus, textarea:focus {
    color: #212529;
    background-color: #fff;
    border: 1px solid #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.25);
}

/* 검색 옵션 INPUT, SELECT 디자인 */
input::placeholder, select{ text-indent: 10px; color: #999; font-weight: 600;}
select option {
    color: #333;
}

col-100 {
    flex: 0 0 auto;
    width: 100%;
}

col-50 {
    flex: 0 0 auto;
    width: 50%;
}


input[type=radio] {vertical-align: -3px;}
input[type=radio], input[type=checkbox] { display: inline; width: 15px; height: 15px; padding: 10px; }
input[type=file] { border: none; background: none; text-indent: 0px; }

a { color: #333; cursor: pointer; text-decoration: none; }


/*a:hover, a.active { color: darkorange; font-weight: 700; }*/
a:hover, a.active { color: #119DD4; font-weight: 700; }

label { width: 200px; margin-right: 5px; }

caption { display: none; }

i { margin-right: 10px; }


/**
사이드 바 영역
*/
.sidebar { width: 220px; min-height: 900px; background: #ececee; font-size: 14px; position: absolute; }

.sidebar li { font-size: 14px; color: #1B1B1B; cursor: pointer; }

/* 상위 카테고리 */
.categories { font-size: 18px; !important; font-weight: 700; background: var(--dark-gray); color: #fff; margin: 0px; cursor: pointer; }

/*.title.active, .title:hover { background: darkorange; }*/
.title.active, .title:hover { background: #119DD4; }

.categories .title {
    font-size: 16px;
    padding: 10px;
    color: white;
    /*background: darkorange;*/
    background: #119DD4;
}

/* 하위 카테고리 */
.sub_title { background: var(--white); display: none; }

.sub_title.active { display: block; }

.sub_title li { font-size: 14px; font-weight: 400; }

.sub_title li.active, .sub_title li:hover { background: var(--gray); }

.sub_title li.active a, .sub_title li:hover a { color: var(--black); font-weight: 700; }

.sub_title li.active a:after { content: ''; width: 0; height: 0; border-top: 5px solid transparent; border-left: 10px solid var(--main); border-bottom: 5px solid transparent; float: left; margin: 5px; }

/**
컨텐츠 영역
 */
.contents { width: 100%; margin-left: 200px; padding: 0 50px; }

.content-inner { margin-top: 20px; width: 100%; height: auto; background: #fff; /*border-radius: 10px;*/ padding-bottom: 100px; }

/* 목록 페이지 - 헤더 영역 */
.content_title { /*background: #666; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom: 3px solid var(--main);
    color: #fff;*/ font-size: 1.5em; font-weight: 600; /*text-indent: 30px;*/ padding-left: 5px; padding-top : 7px; padding-bottom: 5px; }

/* 목록 페이지 - 검색 폼 영역 */
#searchFrm { background :#fff; padding-left: 15px; padding-bottom: 10px; margin-top: 15px; display: flex; justify-content: left; align-items: center;}

.search {
    /*display: flex; */
    align-items: center;
    width: 95%;
}

/* 목록 페이지 - 검색 폼 영역 > 버튼 */
.searchBtnWarp { float: right; margin-right: 45px; }


/* 목록 페이지 - 조회 목록 테이블 영역 */
.list { padding: 20px; margin-top: 10px; width: 98%; text-align: center; border-collapse : collapse; /*margin: 15px;*/ }

.half { width: 425px; }

.list th { padding: 10px; background: #d7d7d7; color: #333; border-bottom: 1px solid #444444; }

.list td { padding: 10px; border-bottom: 1px solid #444444; }

.list td:hover { cursor: pointer; }

/*.list tr:nth-child(even){ background: #ececec; }*/

.list th.checkbox { background: none; !important; }

.table_box { width : 1000px; display: inline-flex; }


/* 목록 페이지 - 푸터 영역 */
.content_footer { width : 100%;  float: right; align-items: center; padding: 0.5rem 2.5rem; display: flex; justify-content: end;}
.paginate { margin-right: 30%; }
.paginate a { font-size: 14px; padding: 10px; }

/* 목록 페이지 - 푸터 영역 > 버튼 */
.btnWrap { float: right; }

.regiForm { padding: 20px; margin-top: 10px; width: 95%; border-collapse : collapse; margin: 15px; }
.regiForm th { text-align: left; background: #ececec; border-bottom: 1px solid #9e9e9e; height: 45px; text-indent: 10px; width: 27%; }
.regiForm td { border-bottom: 1px solid #9e9e9e; justify-content: center; align-items: center; text-indent: 10px; padding: 0.5rem; }
.regiForm input, .regiForm select { color: #333; }

textarea { display: block; width: 100%; border: 1px solid #999; border-radius: 5px; background: #ececee; resize: none; border: 1px solid #cecece;}

.searchLatLng { display: flex; flex-direction: row; align-items: center; }

.searchLatLng div { width: 220px; }

.warning-border { border: 2px solid rgba(255,140,0,0.6); !important; outline: 0 none; transition: border-color .15s ease-in-out;}
input[type=file].warning-border { border: 2px solid rgba(255,140,0,0.6); !important; outline: 0 none; transition: border-color .15s ease-in-out;}

.uuidBar { margin-right: 10px; margin-left: 10px; }

.uuid-input-80 { display: table-cell; table-layout: fixed; width: 100px; vertical-align: middle; }
.input-120 { width: 120px; }
.input-180 { width: 180px; }

/* Start dropdown menu */
.sidebar ul .sub_title {
    /*padding-top: 10px;*/
    /*padding-left: 30px;*/
    display: none;
}
.sidebar ul .sub_title.active {
    display: block;
}

/* 등록, 수정 페이지 폴리곤 색상 정보 표시 */
.polygon-info-red,.polygon-info-blue { display: grid; text-indent: 20px; }
.polygon-info-red:before { position: absolute; content: ''; width: 8px; height: 8px; border : 2px solid rgba(255, 0, 0, 0.5); background: rgba(255, 0, 0, 0.35); }
.polygon-info-blue:before { position: absolute; content: ''; width: 8px; height: 8px; border : 2px solid rgba(0, 0, 255, 0.8); background: rgba(0, 0, 255, 0.35); }


/* 검색 옵션 창 (1) search input 스타일 */
.search-inner { /*position: relative;*/ width: 180px; height: 35px; }

.search-date { display: flex; align-items: center; height: 35px; }

.search-inner input, .search-inner select, .search-inner button { /*position: absolute;*/ top: 0; left: 0; width: 100%; height: 100%; color: #888; background: #ececee; outline: none; border: none; border-radius: 5px; padding: 0 10px 0 25px; margin:0;}

.search-inner input::placeholder{ color: #888; }

.search-inner i { position: absolute; top: 50%; transform: translateY(-40%); left: 15px; color: #888; }

/* search input 스타일 크기 조정 */
.small { width: 90px; height: 25px; }

/* 기간 검색 레이블 영역 */
.search-date-lable { margin-right: 10px; }



/* div sizing 스타일 */
.col-50 { flex: 0 0 auto; width: 50%; }
.col-30 { flex: 0 0 auto;width: 30%; }
.col-24 { flex: 0 0 auto;width: 24%; }
.col-15 { flex: 0 0 auto; width: 15%;}

/* flex grid를 만들기 위한 스타일 (주소로 검색 & 좌표로 검색) */
.grid { display: flex;align-items: center;flex-wrap: wrap; }
.grid>* { margin-right: 1rem;}

/* 검색 영역 > 검색 옵션 input 개수에 따라 유동적으로 사이즈 조절 되도록 스타일 적용 */

.search {
    /*display: flex;*/
    flex-wrap: wrap;
}

.search > div {
    flex-basis: auto;
    margin: 0.25rem;
}

.date-bg-gray {
    width: 300px;
    background: #ececec;
    border-radius: 5px;
}

.sub_title li a {
    display: inline-block; width: calc(100% - 20px); padding: 10px 10px 10px 20px;
}

button a { display: inline-block; width:100%; }

.polygon-warning { position: absolute; transform: translate(80px, -480px); color: red; display: none; color: red; background: rgba(255,255,255, 0.8); padding: 5px 10px; }
.polygon-warning.active { display: initial; }


/* Info Popup Default Style = hidden
author : Dabee Noh
data : 21/11/30
*/

.infoPopup {
    display: none !important;
    /*width: 250px;*/
    background: white;
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: column;
    top: 130px;
    margin-left: 30px;
    border-top-left-radius: 10px; border-top-right-radius: 10px;
}

.infoPopup.active {
    display: block !important;
}

#layerImage_infoPopup {
    top:430px ;
    right: 10% ;
}


.infoPopup_title {
    background: #666;
    border-top-left-radius: 10px; border-top-right-radius: 10px;
    color: #fff; font-size: 14px; font-weight: 600; text-indent: 30px; padding-top : 7px; padding-bottom: 5px;
}

.infoPopup-inner {
    width: 95%;
    padding: 5px;
    font-size: 12px;
}


.infoPopupForm table{
    border-collapse: collapse
}

.infoPopupForm table input {
    width: 100%;
}

.infoPopupForm table th {
    padding: 5px; background: #d7d7d7; color: #333; font-size: 12px;
}

.infoPopupForm table td {
    padding: 5px;
}

/* Map Style */
.map {
    float: right;
    width: 100%;
    height: 100%;
    position: relative;
    /*left: 250px;*/
    /*top: 250px;*/
}
.table {
    width: 100%;
    height: 600px;
}

.infoPopup_footer {
    width: 100%;
    display: flex;
    margin-top: 5px;
    justify-content: center;
}

.infoPopup_footer button {
    margin-right: 10px;
}

/**
range slider style
 */

/* The slider itself */
.rangeSlider {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 100%; /* Full-width */
    height: 25px; /* Specified height */
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}

/* Mouse-over effects */
.rangeSlider:hover {
    opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.rangeSlider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: var(--main); /* Green background */
    cursor: pointer; /* Cursor on hover */
}

.rangeSlider::-moz-range-thumb {
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: var(--main); /* Green background */
    cursor: pointer; /* Cursor on hover */
}

.infoPopup_footer button {
    color : #fff !important;
    font-weight: 600;
}

#thumbnailBox {
    width: 50px;
    height: 50px;
}

.first {
    display: none;
}

.first.active {
    display: flex;
}

.other {
    display: none;
}

.other.active {
    display: flex;
}

/* 사이트 층 설정 - 레이어 생성/삭제 버튼 스타일 */
.addLayerBtnWrap {
    display: none !important;
}

.deleteLayerBtnWrap {
    display: none !important;
}

.addLayerBtnWrap.active {
    display: block !important;
}

.deleteLayerBtnWrap.active {
    display: block !important;
}


/* 매핑 정보 편집/저장 버튼 토글 스타일 */
.submitBtn { display: none; }
.submitBtn.active { display: block; }
.editBtn { display: none; color: black;}
.editBtn.active { display: block; }
.cancelBtn { display: none; color: black;}
.cancelBtn.active { display: block; }
.width100 { width: 100% !important; }
input:disabled { background: #ececec; }

/* map control btn */
.mapControlBtn {
    position: absolute;
    display: flex;
    flex-direction: row;
    z-index: 1;
    margin: 10px 10px 10px 35px;
}

.mapControlBtn div {
    margin-right: 10px;
}

.mapControlBtn button {
    width: 100px;
    height: 30px;
    background: var(--main);
    color: #fff !important;
}

.mapControlBtn button.white{
    background: var(--white) !important;
    color: var(--dark-gray) !important;
}

.mapControlBtn button.gray{
    background: var(--dark-gray) !important;
    color: #fff !important;
}

.mapControlBtn button.small{
    width: 50px;
    height: 30px;
    background: var(--dark-gray) !important;
    color: #fff !important;
}

/* list popup style */

.listPopup {
    display: none !important;
    background: white;
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: column;
    top: 130px;
    margin-left: 30px;
    right: 100px;
    border-top-left-radius: 10px; border-top-right-radius: 10px;
    overflow-y: auto;
    max-height: 300px;
}

.listPopup.active {
    display: block !important;
}

.listPopup_title {
    background: #666;
    border-top-left-radius: 10px; border-top-right-radius: 10px;
    color: #fff; font-size: 14px; font-weight: 600; text-indent: 30px; padding-top : 7px; padding-bottom: 5px;
}

.listPopup-inner {
    padding: 5px;
    font-size: 12px;
}

/* '건물 지도 올리기' info popup footer button toggle style */
.readMode { display: none !important; }
.readMode.active { display: block !important; }
.editMode { display: none !important; }
.editMode.active { display: block !important; }

.readMode button{ width: 60px !important;; }


/* poi info toggle style */
.poiInfo {
    display: none !important;
}

.poiInfo.active {
    display: table-row !important;
}

.test {
    display: none !important;
}

.test.active {
    display: block !important;
}

/* nodelink page warning */
.node-warning, .nodelink-warning { position: absolute; transform: translate(80px, -480px); color: red; display: none; color: red; background: rgba(255,255,255, 0.8); padding: 5px 10px; }
.node-warning.active, .nodelink-warning.active{ display: initial; }

/* noSiteSelectWarning */
.noSiteSelectWarning {
    font-weight: 500;
    color: var(--main);
}

/* floor & image overlay info popup style */
#floorImage_infoPopup {
    top:430px;
    display: none;
}

#floorImage_infoPopup.active {
    display: block !important;
}


/* node link > map control buttons */
#editOn { display: none !important; }
#editOff { display: none !important; }
#editOn.active { display: block !important; }
#editOff.active { display: block !important; }
#nodelink_mapControlBtn { display: none !important; }
#nodelink_mapControlBtn.active { display: flex !important; }

/* node link > info popup */
#nodelink_infoPopup { display: none !important; }
#nodelink_infoPopup.active { display: block !important; }

/* node link > list popup */
#nodelink_listPopup { display: none !important; }
#nodelink_listPopup.active { display: block !important; }

/* edit and save button style */
#editButton {
    color: #1a1d23;
    display: none !important;
}

#editButton.active {
    color: #1a1d23;
    display: inline-block !important;
}

#submitButton {
    background: var(--main);
    display: none !important;
}

#submitButton.active {
    background: var(--main);
    display: inline-block !important;
}

#cancelButton {
    color: #1a1d23;
    display: none !important;
}

#cancelButton.active {
    color: #1a1d23;
    display: inline-block !important;
}

#floorImage { display: none !important; }
#floorImage.active { display: inline-block !important; }

.whiteButton {
    color: #333 !important;
    background: #fff !important;
    border-style: groove;
    border-color: var(--gray) !important;
}

/* 리스트 닫기 상태 */
#showListPopupButton.active {
    background: var(--dark-gray);
}

/* 감시 구역 페이지 > info popup > 이벤트 정보 입력 부분 스타일 */
#monitoringZoneEventTable {
    margin : 5px 0px 0px 0px;
}
#monitoringZoneEventTable input {
    width: 80px;
}

#monitoringZoneEventTable tr{ background: var(--gray); }


/* google map */

#map {
    width: 100%;
    height: 100%;
}
div.fill {
    width: 100%;
    height: 100%;
}

/*#gmap*/
/*{ z-index: 100; }*/
/*#olmap { z-index: 999; }*/

/* edit and save button style */
#editButton {
    color: #1a1d23;
    display: none !important;
}

#editButton.active {
    color: #1a1d23;
    display: inline-block !important;
}

#submitButton {
    background: var(--main);
    display: none !important;
}

#submitButton.active {
    background: var(--main);
    display: inline-block !important;
}

#floorImage { display: none !important; }
#floorImage.active { display: inline-block !important; }

.whiteButton {
    color: #333 !important;
    background: #fff !important;
    border-style: groove;
    border-color: var(--gray) !important;
}

/* 리스트 닫기 상태 */
#showListPopupButton.active {
    background: var(--dark-gray);
}

/* 감시 구역 페이지 > info popup > 이벤트 정보 입력 부분 스타일 */
#monitoringZoneEventTable {
    margin : 5px 0px 0px 0px;
}
#monitoringZoneEventTable input {
    width: 80px;
}

#monitoringZoneEventTable tr{ background: var(--gray); }


/* google map */

#map {
    width: 100%;
    height: 100%;
}
div.fill {
    width: 100%;
    height: 100%;
}

/* 회사 정보 페이지 - 관리 사이트 추가/제거를 위한 모달창 스타일 */
#searchManagedSite {
    display: none;
    position: absolute;
    top: 150px;
    right: 250px;
    width: 300px;
    height: 500px;
    background: #FFFFFF;
    border-radius: 10px;
}

#searchManagedSite.active {
    display: block;
}

#searchManagedSite-inner {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

#searchManagedSite-inner div {
    margin-bottom: 20px;
}

#searchManagedSite-inner h3 {
    color: var(--dark-gray);
}

#closeSearchSiteModalButton {
    bottom: 10px;
    position: absolute;
    left: 100px;
}

/* new paging start  */

#paging-box{
    text-align:center;
    margin-top: 30px;
}

#paging-box .page .pageNum{
    font-size: 14px;
    padding: 8px;
    margin: 5px;
    border: 1px solid #cccccc;
}

#paging-box .page .nowPageNum{
    font-size: 14px;
    padding: 8px;
    margin: 5px;
    font-weight: bold;
    border: 1px solid #cccccc;
}

#paging-box .page .pageCaret{
    font-size: 14px;
    padding: 8px 0 8px 8px;
    margin: 5px;
    border: 1px solid #cccccc;
}

/* new paging end  */

/** modal start */
#common-alert-modal.common-alert-modal-overlay {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#common-alert-modal .common-alert-modal-window {
    background: white;
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 13px );
    -webkit-backdrop-filter: blur( 13px );
    border-radius: 10px;
    border: 1px solid black;
    width: 30%;
    height: 30%;
    position: relative;
    top: 100px;
    padding: 10px;
    z-index: 9999;
}
#common-alert-modal .title {
    text-shadow: 1px 1px 2px gray;
    border-bottom: 1px solid black;
}
#common-alert-modal .title h2 {
    display: inline;
}
#common-alert-modal .close-area {
    display: inline;
    float: right;
    padding-right: 10px;
    cursor: pointer;
    text-shadow: 1px 1px 2px gray;
}
#common-alert-modal .content {
    margin-top: 50px;
    padding: 0px 10px;
    text-align: center;
}
#common-alert-modal .btn_area {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/** modal end */

/** participants modal start */
#participants-detail-modal.modal-overlay {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
}
#participants-detail-modal .modal-window {
    background: whitesmoke;
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 13px );
    -webkit-backdrop-filter: blur( 13px );
    border-radius: 10px;
    border: 1px solid black;
    width: 90%;
    height: 100%;
    position: relative;
    top: 100px;
    padding: 10px;
    overflow: scroll;
}
#participants-detail-modal .title {
    padding-left: 10px;
    display: inline;
    text-shadow: 1px 1px 2px gray;
}
#participants-detail-modal .title h2 {
    display: inline;
}
#participants-detail-modal .close-area {
    display: inline;
    float: right;
    padding-right: 10px;
    cursor: pointer;
    text-shadow: 1px 1px 2px gray;
}

#participants-detail-modal .under-close-area {
    display: grid;
    padding-right: 10px;
    cursor: pointer;
    text-shadow: 1px 1px 2px gray;
    justify-content: center;
    color: black;
}

#participants-detail-modal .content {
    margin-top: 20px;
    padding: 0px 10px;
}

#participants-detail-container{
    display: block;
    padding: 5%;
}

#participants-detail-modal .important-box{
    display: grid;
    background: whitesmoke;
    border: 1px solid black;
    width: 98%;
    padding: 1%;
    margin: auto;
}
/** participants modal end */

/** alert modal start */
#alert-modal.alert-modal-overlay {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    z-index: 9999;
}
#alert-modal .alert-modal-window {
    background: whitesmoke;
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 13px );
    -webkit-backdrop-filter: blur( 13px );
    border-radius: 10px;
    border: 1px solid black;
    width: 80%;
    height: 130%;
    position: relative;
    top: 100px;
    padding: 10px;
}
#alert-modal .title {
    padding-left: 10px;
    display: inline;
    text-shadow: 1px 1px 2px gray;
}
#alert-modal .title h2 {
    display: inline;
}
#alert-modal .close-area {
    display: inline;
    float: right;
    padding-right: 10px;
    cursor: pointer;
    text-shadow: 1px 1px 2px gray;
}
#alert-modal .content {
    margin-top: 20px;
    padding: 0px 10px;
}
#alert-container{
    display: block;
    padding: 5%;
}
#alert-box{
    display: grid;
    background: whitesmoke;
    border: 1px solid black;
    width: 70%;
    height: 110%;
    padding: 1%;
    margin: auto;
}
#alert-target {
    background: whitesmoke;
    border: 1px solid black;
    width: 98%;
    height: 100px;
    padding: 1%;
    overflow:scroll;
}
#alert-content {
    background: whitesmoke;
    border: 1px solid black;
    width: 98%;
    height: 70%;
    padding: 1%;
}
/** alert modal end */

.list-link:hover{
    cursor: pointer;
    text-decoration: underline;
}


.button{ line-height: 30px; text-align:center; width: 80px; height: 30px; border: none; border-radius: 5px; color: #fff; font-size: 12px; font-weight: 500; cursor: pointer; background-color: #119DD4; margin-right: 5px;}
.button:hover,
.button:focus{
    background: white;
    color: black;
    box-shadow: 0 0 5px black;
}