/*
 * Designed by Toonni Lomio
 * Copyright 2018 http://Ai.Advws.org
 * Licensed Advws PLC.
 *
/* //////////////////////////////////////////////////////////////// */

/*Font*/
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
@import url('https://fonts.googleapis.com/css?family=Mukta:200,300,400,700');
@import url('https://fonts.googleapis.com/css?family=Pridi:300,400,600');

/*Global*/
body { font-family:'Mukta','Pridi'; font-size:16px; font-weight:400;}
/*ColorTheme*/
.text-blue { color:#0aacd5;} .bg-blue { background-color:#0aacd5;}
.text-orange { color:#fe9712;} .bg-orange { background-color:#fe9712;}
.text-red { color:#f5291b;} .bg-red { background-color:#f5291b;}
.text-gray { color:#797777;} .bg-gray { background-color:#bec8d2;}
.text-green { color:#28a745;} .bg-green { background-color:#28a745;}
.text-green-lemon { color:#63d03a;} .bg-green-lemon { background-color:#63d03a;}

/* Edit Text */
.text-warning { color: #FF9C01 !important; }
/*Button*/
.btn { cursor:pointer;}
.btn:hover { box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.08);}
.btn-sm { vertical-align: baseline;}
.btn-xs { font-size:14px; padding:1px 3px;}
.btn-blue { border: 1px solid #099dc2; border-radius: 3px; background-color: #0aacd5; color:#fff !important; transition:.2s;} 
.btn-blue:hover { box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.08); background-color: #099dc2; color:#fff; transition:.1s;}
.btn-orange { border: 1px solid #fb7901; border-radius: 3px; background-color: #fe8312; color:#fff !important; transition:.2s;} 
.btn-orange:hover { box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.08); background-color: #fb7901; color:#fff; transition:.1s;}
.btn-red { border: 1px solid #b02a08; border-radius: 3px; background-color: #d5330a; color:#fff !important; transition:.2s;} 
.btn-red:hover { box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.08); background-color: #b02a08; color:#fff; transition:.1s;}
.btn-standard { border: 1px solid #d2d8dd; border-radius: 3px; background-color: #fff; color:#111; transition:.2s;}
.btn-standard:hover { box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.08); color:#0aacd5; transition:.1s;}
.btn-silverGradient { background: linear-gradient(to bottom,#f7f8fa,#e7e9ec); border:1px solid; border-color: #adb1b8 #a2a6ac #8d9096;}
.btn-silver { background: #f7f8fa; border:1px solid; border-color: #adb1b8 #a2a6ac #8d9096;}
.btn-silver:hover { background:#e5e9ee; border-color: #a2a6ac #979aa1 #82858a;}

/*Alert*/
.alert { font-size:16px; line-height:20px; padding:10px 10px 7px 20px;}
.alert button.close { padding:0; height:20px; width:20px; text-align:center; position:inherit; float:right; margin-top:-3px; cursor:pointer; }
.alert button.close>i.ti { font-size:18px; line-height:20px; width:20px; margin:0 auto; transition:.3s; color:#28a745); }
.alert button.close:hover>i.ti { transition:.2s; color:#111;}
.alert a.link { cursor:pointer; font-weight:bold; color:#111; font-size:18px; transition:.3s;}
.alert a.link:hover { color:#0aacd5; transition:.1s;}
.alert-green { color:#28a745; border:1px solid rgba(0,207,47,1); background-color:rgba(0,207,47,0.1);}
.alert-danger { color:#f5291b; border:1px solid rgba(245,41,27,0.3); background-color:rgba(245,41,27,0.1);}
.alert-warning { color:#fe9712; border:1px solid rgba(245,150,27,0.3); background-color:rgba(245,150,27,0.1);}

/*PageTemplate*/
aside.left-menu { width:240px; border-right: solid 1px #dee5ec; background-color: #f7f8f9;}
div.main-page { width:calc(100% - 250px); padding-left:35px; padding-right:25px;}
div.main-content { padding-top:0;}

/*Header*/
header>nav { position: fixed; width:100%; z-index: 1; background-color: #ffffff; height:60px; transition: background-color 0.4s; box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .15);}
/*Navbar-Brand*/
a.navbar-brand { padding-top:5px; padding-bottom:0;}
a.navbar-brand>strong { display:block; width:100%; color:#888; font-size:25px; line-height:25px; transition:.3s;}
a.navbar-brand>small { display:block; width:100%; color:#999; font-size:11px; }
a.navbar-brand:hover>strong { color:#111; transition:.3s;}
.site-icon { width:35px; height:35px; margin-right:5px; display:inline-block; float:left; background-color: #bbb; background-repeat:no-repeat; background-size:cover; 
	-webkit-mask-image: url(/images/icon_atom_head.svg); mask-image: url(/images/icon_atom_head.svg);}
/*Navbar-Collapse*/
.navbar-collapse { display: inline-block; float: left; flex-basis: unset;}
ul.navbar-nav { display: inline-block; float: left;}
ul.navbar-nav>li.nav-item { color:#888; display: list-item; width: fit-content; float: left;}
ul.navbar-nav>li.nav-item>a.nav-link { color:#333; font-size:16px; padding:10px 15px; transition:.3s;}
ul.navbar-nav>li.nav-item>a.nav-link:hover { color:#0aacd5; transition:.1s;}
/*Navbar-Active*/
ul.navbar-nav>li.nav-item.active>a.nav-link { font-weight:bold; color:#111; }
/*Navbar-Monitor*/
header>nav.navbar-monitor { height:35px; box-shadow: 0 1px 10px 0px rgba(0, 0, 0, .15);}
.navbar-monitor .col-pagetitle { height:25px; margin-top:-2px;}
.navbar-monitor .col-pagetitle a.backward {}
.navbar-monitor a.navbar-brand { padding-top:3px;}
.navbar-monitor ul.navbar-nav>li.nav-item>a.nav-link { padding:5px 15px; font-size:13px; line-height:16px;}
.navbar-monitor ul.navbar-pagetitle { font-size:13px;}
.navbar-monitor ul.navbar-pagetitle li { margin-right:10px; line-height:26px; border-right:2px solid rgba(0,0,0,0.05); padding-right:10px;}
.navbar-monitor ul.navbar-pagetitle li:last-child() { border:none;}
.navbar-monitor ul.navbar-pagetitle li.robot-profile { }
.navbar-monitor ul.navbar-pagetitle li.robot-profile .robotimg { display:inline-block; width:25px; height:25px; overflow:hidden; border-radius:25%; float:left; margin-right:10px; margin-top: -1px;}
.navbar-monitor ul.navbar-pagetitle li.robot-profile .robotimg img { width:25px; height:25px;}
.navbar-monitor ul.navbar-pagetitle li.robot-profile .robotname { display:inline-block; line-height:25px; float:left; color:#111; font-size:18px; font-weight:600;}
.navbar-monitor ul.navbar-pagetitle li.nav-item label { display:inline-flex; float:left; margin-right:5px;}
.navbar-monitor ul.navbar-pagetitle li.nav-item label>i { margin-right:2px;}
.navbar-monitor ul.navbar-pagetitle li.nav-item select { height:24px; padding: 0 0 0 3px; line-height: 13px; font-size: 13px;}

/*Sidebar*/
/*Sidebar-User*/
div.sidebar-userinfo { font-family:'Roboto'; width: 100%; height: 90px; padding: 0 0 0 20px; box-sizing: border-box; 
	display: -webkit-flex;  display: flex; -webkit-align-items: center; align-items: center; }
div.sidebar-userinfo>div.userinfo-img { height: 40px; width: 40px; min-width: 40px; border-radius: 50%; overflow: hidden; margin-right: 10px; }
div.sidebar-userinfo>div.userinfo-img>img { width:100%;}
div.sidebar-userinfo>div.userinfo-details { display:block;}
div.sidebar-userinfo>div.userinfo-details>.welcome-message { font-size:13px; color:#999; line-height:15px;}
div.sidebar-userinfo>div.userinfo-details>.user-name { font-size:16px; color:#111; font-weight:bold;}
div.sidebar-userinfo>a.userinfo-setting { width: 40px; height: 40px; margin-left: auto; position: relative; color:#6c7985; text-decoration:none; transition:.3s;}
div.sidebar-userinfo>a.userinfo-setting>i.font-icon { position:absolute; top:15px; right:15px;}
div.sidebar-userinfo>a.userinfo-setting:hover { color:#1b1e21; transition:.1s;}
/*Sidebar-Nav*/
ul.sidebar-nav { list-style:none; padding:0; text-align:left;}
ul.sidebar-nav>li.nav-item { color:#888;}
ul.sidebar-nav>li.nav-item>a.nav-link { padding:15px 20px; color:#333; font-size:18px; line-height:20px; transition:.3s; cursor:pointer; border-top: solid 1px #dee5ec;}
ul.sidebar-nav>li.nav-item>a.nav-link:hover { color:#0aacd5; transition:.1s;}
ul.sidebar-nav>li.nav-item>a.nav-link>small { display:block; width:100%; font-size:13px; line-height:15px; color:#aaa; padding-top:3px; text-transform:capitalize;}
/*Sidebar-Nav Active*/
ul.sidebar-nav>li.nav-item.active>a.nav-link { font-weight:400; color:#111; transition:.2s; background-color:#fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .15) inset; }
/*Sidebar-Nav Disable*/
ul.sidebar-nav>li.nav-item>a.nav-link.disable { cursor: default; opacity:.3;}
ul.sidebar-nav>li.nav-item>a.nav-link.disable:hover { color:#333;}

/*Breadcrumb*/
nav.breadcrumb {}
ol.breadcrumb { background-color: transparent; padding:15px 0 5px; margin-bottom:5px;}
ol.breadcrumb>li.breadcrumb-item { font-size:13px; text-transform:capitalize;}
.breadcrumb-item+.breadcrumb-item::before { content: ">";}
ol.breadcrumb>li.breadcrumb-item>a { text-decoration:none; color:#0aacd5; transition:.3s;}
ol.breadcrumb>li.breadcrumb-item>a:hover { color:#111; transition:.1s;}

/* Main View ///////////////////////////////////////////////////////////////////////////////////////*/
div.mainview { padding:15px 0 30px;}
div.mainview .col-pagetitle { margin-bottom:30px; min-height:55px; transition:.3s;}
.col-pagetitle a.backward { width: 25px; height: 100%;  float: left; border: 1px solid #dee5ec; border-left: none; border-radius: 0 3px 3px 0; margin-right: 15px;
    display: -webkit-flex; display: flex; -webkit-align-items: center;  align-items: center; cursor: pointer; transition:.3s;}
.col-pagetitle a.backward>i { color:#9b9b9b; margin-left:5px; font-size:13px; transition:.3s;}
.col-pagetitle a.backward:hover { box-shadow: 5px 0px 10px -2px rgba(0, 0, 0, 0.08); border-color: #d7d7d7; transition:.2s;}
.col-pagetitle a.backward:hover>i { color:#0aacd5; margin-left:0px; font-size:13px; transition:.2s;}
.col-pagetitle h1 { font-size:25px; font-weight:bold; color:#111; margin-bottom:0;}
.col-pagetitle h1>.fa-quote-left, .col-pagetitle h1>.fa-quote-right { font-size:13px; vertical-align:top; color:#aaa;}
.col-pagetitle h1 small { font-size:14px; font-weight:400; margin-left:15px;}
.col-pagetitle .show-text {  float:left; width:fit-content;}
.col-pagetitle .show-img { width:55px; margin:0 10px 0 0; min-height:55px; background-color:#f7f8f9; border-radius:30%; float:left; text-align:center;}
.col-pagetitle .show-img img { width:100%; border-radius:30%;}
.col-pagetitle .show-img i.imgIcon { font-size:35px; line-height:55px; margin:0 auto;}
.col-pagetitle .subtitle { font-size:14px; font-weight:300; margin-bottom:0;}
.col-pagetitle .subtitle>span { border-left:1px solid #ddd; margin-left:5px; padding-left:10px; }
.col-pagetitle .subtitle>span:first-child { border-left: none; margin-left:0; padding-left:0;}
.col-pagetitle .badge-xs { font-size:12px; font-weight:300;}
.col-addition { font-size:13px; font-weight:300;}
.col-addition .label { vertical-align:text-top;}
.col-addition .btn>.fa { margin-right:5px; vertical-align:baseline;}
.col-addition .btn-toggle.active { box-shadow:none !important;}
.col-addition .btn-toggle.active { background-color:#0aacd5; color:#fff; border:1px solid #099dc2;}
.col-addition .btn-toggle.active:hover { background-color:#0aacd5; color:#fff; border:1px solid #099dc2;}
.col-addition .btn-toggle { background: #f7f8fa; border:1px solid; border-color: #adb1b8 #a2a6ac #8d9096; margin-bottom:0; padding:2px 8px;}
.col-addition .btn-toggle:hover { background:#e5e9ee; border-color: #a2a6ac #979aa1 #82858a;}

/*Table*/
table.listsTB {}
table.listsTB>thead {}
table.listsTB>thead>tr {}
table.listsTB>thead>tr>th { font-size:15px; font-weight:300; color:#999; border-top:none; padding:8px 8px; }
table.listsTB>tbody {}
table.listsTB>tbody>tr {}
table.listsTB>tbody>tr>th,
table.listsTB>tbody>tr>td { font-size:14px; font-weight:300; color:#000; line-height:30px; padding:2px 8px; vertical-align:baseline;}
table.listsTB>tbody>tr>th { color:#ccc; }
table.listsTB>tbody>tr:hover { background-color:rgba(255,215,0,0.1);}
table.listsTB>tbody>tr>td .btn-xs { padding:3px 6px; vertical-align:baseline; font-size:14px; font-weight:300; line-height: 17px;}
table.listsTB>tbody>tr>td .badge { padding:3px 6px; vertical-align:baseline; font-size:14px; font-weight:300; line-height: 17px;}

table.listsTB .linkName { font-size:16px; font-weight:300; color:#111; text-decoration:none; cursor:pointer; transition:.3s;}
table.listsTB .linkName:hover { color:#0aacd5; text-decoration: underline; transition:.2s;}

/*Gridbox*/
a.btn-gridbox { width:100%; min-height:328px; background-color:#fff; text-align:center; transition:.3s;}
a.btn-gridbox i.ti { display:block; width:60px; height:60px; margin:0 auto; border-radius:50%; padding-left: 1px; padding-top: 18px;  transition:.3s;
	 background-color:#0aacd5;  color:#fff; font-size:25px; margin-top:105px; }
a.btn-gridbox div { display:block; width:100%; font-size:18px; color:#111; margin-top:15px; transition:.3s;}
a.btn-gridbox:hover { background-color:#0aacd5; box-shadow: 0 6px 17px 0 rgba(0, 0, 0, .1); transition:.6s;}
a.btn-gridbox:hover i.ti  { background-color:#fff; color:#0aacd5; font-size:25px; margin-top:90px;  transition:.2s;}
a.btn-gridbox:hover div { color:#fff; transition:.2s;}
.gridbox { display:inline; width:100%;}
.gridbox .gridbox-item { display:inline-block; float:left; padding:0 15px 15px 0; width:230px; }
.gridbox .gridbox-wrap { border: solid 1px #dee5ec; border-radius: 3px; min-height:330px; transition:.3s;}
.gridbox .gridbox-wrap:hover { box-shadow: 0 6px 17px 0 rgba(0, 0, 0, .1); transition:.5s;}
.gridbox .gridbox-wrap .gridbox-header { padding:10px; background-color:#fff; text-align:center; position:relative; height:185px;}
.gridbox .gridbox-wrap .gridbox-body { padding:10px; background-color:#f7f8f9; transition:.3s;}
.gridbox .gridbox-wrap .gridbox-footer { padding:10px; }
.gridbox .gridbox-wrap:hover .gridbox-body { background-color:#e1e4e8; box-shadow: 0px 3px 13px -6px rgba(0,0,0,0.05) inset; transition:.5s; }
.gridbox .gridbox-wrap div.show-id { position:absolute; top:5px; right:5px; border-radius:3px; 
	background-color:#f7f8f9; color:#999; font-size:13px; line-height:16px; padding:2px 5px; text-align:center; }
.gridbox .gridbox-wrap div.show-status { position:absolute; top:5px; left:5px; }
.gridbox .gridbox-wrap div.show-status .badge { font-weight:300; font-size:13px; line-height:16px; border-radius: 9px; padding:2px 8px;}
.gridbox .gridbox-wrap div.show-img { width:80px; margin:25px auto 15px; min-height:80px; background-color:#f7f8f9; border-radius:30%; transition:.3s;}
.gridbox .gridbox-wrap:hover div.show-img { margin-top:20px; transition:.2s;}
.gridbox .gridbox-wrap h3.show-name { color:#111; font-size:20px; font-weight:bold; transition:.3s;}
.gridbox .gridbox-wrap:hover h3.show-name { color:#0aacd5; transition:.2s;}
.gridbox .gridbox-wrap div.show-time { position:absolute; bottom:-2px; left:10px; color:#ccc; font-size:11px; font-family:'Roboto'; margin-bottom:5px;}
.gridbox .btn-block+.btn-block { margin-top:0;}

/*Modal*/
.modal {}
.modal-content { border-radius:3px; border:1px solid #979797;}
.modal-header { position:relative;}
.modal-header a.backward { width: 25px; height: 55px;  float: left; border: 1px solid #dee5ec; border-left: none; border-radius: 0 3px 3px 0; margin-right: 15px;
    display: -webkit-flex; -webkit-align-items: center;  align-items: center; cursor: pointer; transition:.3s; display: flex; display:none; }
.modal-header a.backward>i { color:#9b9b9b; margin-left:5px; font-size:13px; transition:.3s;}
.modal-header a.backward:hover { box-shadow: 5px 0px 10px -2px rgba(0, 0, 0, 0.08); border-color: #d7d7d7; transition:.2s;}
.modal-header a.backward:hover>i { color:#0aacd5; margin-left:0px; font-size:13px; transition:.2s;}
.modal-header .modal-thumb { width: 55px; margin: 0 10px 0 0; min-height: 55px; background-color: #f7f8f9; border-radius: 30%; float: left; text-align:center;}
.modal-header .modal-thumb>i { width:100%; border-radius:30%; margin:0 auto; line-height:55px; color:#d7d7d7;}
.modal-header .modal-title { display:inline-block; width:calc(100% - 60px); float:left; padding-top:1px;}
.modal-header .modal-title h5 { font-size:25px; font-weight:bold; color:#111; text-align:left; margin-bottom:0;}
.modal-header .modal-title .subtitle { font-size:14px; font-weight:300; color:#212529; margin-left:0; margin-bottom:0; display:flex; width:100%; margin-top:0;}
.modal-header .modal-title .close { position:absolute; right:10px; top:10px; cursor:pointer; font-size:16px;}

/*Tabs*/
.nav-tabs { border-bottom:1px solid #979797; margin-left:2px;} 
.nav-tabs>.nav-item { width:20%; } 
.nav-tabs>.nav-item>a.nav-link { font-size:14px; font-weight:300; border-color: #dee5ec #dee5ec #979797; border-radius:0; min-height: 50px; line-height:30px; border-left:none; margin-left:-2px;
	display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; background-color:#fff; color:#9b9b9b; transition:.3s;} 
.nav-tabs>.nav-item>a.nav-link:hover { color:#0aacd5;}
.nav-tabs>.nav-item>a.nav-link:first-child { border-left:1px solid #dee5ec;}
.nav-tabs>.nav-item>a.nav-link.active { color: #495057; background-color: #fff; border-left:1px solid; border-color: #979797 #979797 #fff; border-radius:0; transition:.2s;}
.tab-content { margin-top:30px;}

/*Form*/
.alert-display {}
a.quick-edit { cursor:text;}
a.quick-edit>i { font-size:16px; margin-left:15px; color:#bec8d2; transition:.3s;}
a.quick-edit:hover>i { color:#111; transition:.2s;}
a.quick-edit>input { padding: 0; font-weight: bolder; font-size: 25px; height: 28px; width:fit-content;}
.formAdvws { position:relative;}
.formAdvws .form-topClose { position: absolute; right:-2px; top:-24px; height:24px; border-radius:6px 6px 0 0; padding:0 10px; border-bottom:2px solid #0aacd5;
	background-color:#333; color:#fff; font-size:13px; font-weight:300; line-height:24px; cursor:pointer; transition:.3s;}
.formAdvws .form-topClose:hover { background-color:#e60400; transition:.2s;}
.formAdvws .form-topic { border-bottom:1px solid #dee5ec; margin-bottom:15px;}
.formAdvws .form-topic .topic { display:block; width:100%; border-left:4px solid #0aacd5; padding:3px 10px 0; font-size:21px; line-height:26px; margin:30px 0 5px;}
.formAdvws .form-topic .topic>small { font-size:13px; font-weight:300; color:#9b9b9b; margin-left:10px;}
.formAdvws .form-group.row .col { margin-bottom:15px;}
.formAdvws .form-group.row h6 { font-size:16px; font-weight:400; line-height:26px;}
.formAdvws .form-group.row label { display:block; width:100%; padding-top:3px; padding-bottom:0; font-size:16px; line-height:22px; font-weight:400; color:#111; }
.formAdvws .form-group.row label.col-form-label { text-align:left; float:left; display:inline-block; width:fit-content; margin-right:10px;}
.formAdvws .form-group.row label>small { display:block; width:100%; font-size:13px; line-height:13px; font-weight:300; padding:0; color:#9b9b9b;}
.formAdvws .form-group.row label>.en { display:block; width:100%; font-size:13px; line-height:13px; font-weight:300; padding:0; color:#9b9b9b;}
.formAdvws .form-group.row input { font-size: 21px; padding: 5px 10px 3px; float:left;}
.formAdvws .form-group.row input[type=number] { text-align:right;}
.formAdvws .form-group.row .unit { display:inline-block; float:left; padding:3px 10px 0; color:#9b9b9b;}
.formAdvws .form-group.row .unit>small { display:block; width:100%; font-size:13px; line-height:13px; font-weight:300; padding:0;}
.formAdvws .form-button { border-top:4px double #dee5ec; margin-top:50px; padding-top:25px; display:flex;} /*box-shadow: 0px -20px 30px -20px rgba(0, 0, 0, 0.1); */
.formAdvws .form-button button.btn { font-size:14px; font-weight:300;}
.formAdvws .form-button>:not(:first-child) { margin-left:5px;}
.formAdvws .form-button>:not(:last-child) { margin-right:5px;}
.formAdvws code { background-color:#f6f6f6; color:#099dc2; padding:5px 10px;}
.formBorder { border:2px solid #0aacd5; margin-bottom:30px; padding:15px; padding-top:25px; border-radius:0 0 5px 5px; box-shadow:0 2px 12px -5px rgba(0,0,0,0.3); position: relative;}
.formBorder .form-title { position: absolute; left:-2px; top:-26px; background-color:#0aacd5; color:#fff; padding:3px 10px; border-radius:0; font-size:13px; line-height:20px; font-weight:300;}

/*Card*/
/*Card-Network*/
.col-pagetitle .topicDisplay { border-left:2px solid #dee5ec; margin-left:15px; padding-left:15px; float:left; width:fit-content;}
.col-pagetitle .topicDisplay>h1 { max-width:300px; height:30px; overflow:hidden;}
.col-pagetitle .topicSelected { color:#ff9700;}

.card {}
.card-network {}
.card-network .card-head { position:relative; text-align:center; display:block;}

.card-network .selected-option { position:absolute; top:12px; left:-2px; padding:10px 10px 10px 5px; background-color:rgba(255,255,255,0.9); z-index:9; border-radius:0 6px 6px 0; 
	font-size:13px; min-width:50px; text-align:left; border:1px solid #ddd; border-left:2px solid #fff; box-shadow:3px 2px 9px rgba(0,0,0,.1);}
.card-network .selected-option button.btn-block { }
.card-network .selected-option button.btn-block+.btn-block { margin-top:5px;}
.card-network .selected-option button.btn-block { font-size:13px; padding-top:7px; font-weight:300; line-height:14px; }
.card-network .selected-option button.btn-block:focus { box-shadow:none;}
.card-network .selected-option button>i.ti { font-size:13px; vertical-align:baseline;}
.card-network .selected-option ul.extra { border-top:1px solid #dee5ec; margin-top:5px;}
.card-network .selected-option ul.extra>li { border-bottom:1px dotted #dee5ec; padding:5px 3px; margin-bottom:0; }

.card-network .network-tools { position:absolute; top:-2px; right:-2px; padding:5px 5px 10px 10px; background-color:rgba(255,255,255,0.9); z-index:9; border-radius:0 0 0 6px; font-size:13px;
	border:1px solid #ddd; border-top:2px solid #fff; border-right:2px solid #fff; box-shadow:-3px 3px 9px rgba(0,0,0,.1);}
.card-network .network-tools .btn-tool { padding:5px 10px; font-size:13px; line-height:13px; height:25px; margin:0; background-color:#fe8312; border-color:#fb7901; color:#fff; transition:.3s;}
.card-network .network-tools .btn-tool:hover { background-color:#fb7901; transition:.2s;}
.card-network .network-tools .btn-tool:focus { box-shadow:none;}
.card-network .network-tools .label-tool { color:#fff; background-color:#999; padding:3px 5px; border-radius:3px; width:50px; text-align:center; display:inline-block; transition:.3s;}
.card-network .network-tools .label-tool.unlock { background-color:#28a745; transition:.2s;}

.card-network .card-body { padding:0; border:1px solid #dee5ec;}
.card-network .card-body #mytopicnetwork { width: 100%; min-width:600px; background-color:#fff; z-index:3; box-shadow:0 0 80px -25px rgba(0,0,0,0.6) inset;}
.card-network .card-foot {}

/*Page Monitor ///////////////////////////////////////////////////////////////////////////////////////*/
body.monitor { }
body.monitor .col-option { }
body.monitor .col-option>div { float:left; display:inline-block; padding-right:15px; margin-right:15px; border-right:1px dotted #e9e9e9;}
body.monitor .col-option>div label { font-size:13px; display:block; width:100%; margin-bottom:5px;}
body.monitor .col-option>div select { font-size:13px; float:left; width:fit-content; padding:0 5px; display:inline-block; line-height:13px; height:25px !important; margin-right:5px;}
body.monitor .col-option>div span.unit { font-size:13px; color:#9b9b9b; display:inline-block; float:left; width:fit-content; line-height:25px;}
.chat-area { }
.chat-area .col { padding:0; border-top:1px solid #ccc;}
.chat-area .col-header { display:table; width:100%; text-align:center; border-bottom:1px solid #e2e2e2; line-height:32px; padding-top:3px; position:relative;}
.chat-area .col-header>a { position:absolute; left:9px;}
.chat-area .col-header>a i { margin-right:5px; float:left; align-items:center; padding-top: 5px; font-size: 19px; color:#0aacd5; transition:.3s;}
.chat-area .col-header>a:hover i { color:#111; transition:.2s;}
.chat-area .col-header>h5 { display:inline; font-size:13px;}
/*Setup*/
.chat-area .col-header>h6 { display:inline-block; float:left; margin-right:5px; margin-bottom:2px; padding-top:2px; padding-left:8px; padding-right:15px; border-right:1px solid #ccc;
	font-size:14px; font-weight:600; line-height:28px; color:#111; }
.chat-area .col-header>h6>i { font-size:14px; font-weight:300; color:#aaa; margin-right:2px;}
.chat-area .col-header>h6>.windowchat_image { height:20px; width:20px; }
.chat-area .col-header .setup-item { display:inline-block; float:left; margin-top:3px;}
.setup-item { border-right: 1px dotted #ccc; padding:0 5px; margin-right:5px; padding-top:0px;}
.setup-item a { position:inherit; left:inherit;}
.setup-item label { display:inline-block; float:left; margin-right:5px; margin-bottom:0; font-size:12px; line-height:24px; color:#999;}
.setup-item a.btn { display:inline-block; float:left; padding:1px 10px; font-size:12px; line-height:20px;}
/*Greeter*/
.greeter {}
.greeter.active .chatboxwrap { background-color: rgba(0,0,0,0.05);}
.greeter .chatboxwrap { height:64px; align-items: center; padding-left:9px; display:flex; text-decoration:none; cursor:pointer; transition:.3s;}
.greeter .chatboxwrap:hover { background-color:rgba(255,215,0,0.08); transition:.2s;}
.greeter .chatboxwrap:hover .option i.fa-cog { opacity:.5; transition:.2s;}
.greeter .chatboxwrap:hover .option i.fa-cog:hover{ opacity:.9; }

.greeter .picture { align-items: center; display: flex; justify-content: center; height:50px; width:50px; margin-right:9px; position: relative;}
.greeter .picture .cover { align-items: center; display: flex; justify-content: center; overflow: hidden; height:50px; width:50px; border-radius: 50%; }
.greeter .picture .cover>img { object-fit: cover; height:50px; width:50px;}
.greeter .picture .autoLearn { width:20px; height:20px; position:absolute; bottom:0; right:3px; z-index:9; border-radius: 50%; text-align:center; opacity:1; transition:.3s; }
.greeter .picture .autoLearn .icon-svg { width:16px; height:16px; margin-top:-4px;} 
.greeter .picture .autoLearn .icon-svg-bg { width:16px; height:16px; background-color: #fff; background-repeat:no-repeat; background-size:cover; 
	-webkit-mask-image: url(/images/icon_lightbulb.svg); mask-image: url(/images/icon_lightbulb.svg);}
.greeter .picture .autoLearn .animate-blink { animation: blink 1s infinite;}
 @keyframes blink{ 0%{opacity: 0;} 25%{opacity: 0.25;} 50%{opacity: 1;} 75%{ opacity: 1;} 100%{opacity: 1;} }
.greeter .picture .autoLearn.active { background-color:#28a745; } /*#63d03a*/
.greeter .picture .autoLearn.pause { background-color:#ff9000; }
.greeter .picture .autoLearn .fa-spin { color:#fff; margin:0 auto; font-size:12px; vertical-align:middle; margin-top:-4px;}

.greeter .option { flex: 1 1 auto; justify-content: center; min-width: 0; padding: 0 12px 0 0; line-height:16px; width:calc(100% - 50px);}
.greeter .option .name { flex: 1 1 0%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color:#000; justify-content: space-between; padding-top:5px;}
.greeter .option .name .monitorheader { flex: 1 1 0%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.greeter .option .name .chatuser_displayName { width:calc(100% - 80px); overflow:hidden; display:inline-flex;}
.greeter .option .name .time { flex: 1 1 0%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display:inline;}
.greeter .option .name .time>abbr { color:#aaa; font-size:13px; font-weight:300; float:right; text-decoration:none !important;}
.greeter .option .lastchat { color:#999; font-size:14px; font-weight:300; line-height:20px; padding-top:5px; width:calc(100% - 18px); height:24px; float:left;}


/*BoxChat*/
.box-chat { font-family:Tahoma; width: 100%; }
.box-chat .chatcontent { border-top:none; padding-right:0; padding:3px; padding-top:20px;}
.box-chat .box-chat-list .user-img { align-items: center; border-radius: 50%; display: flex; justify-content: center; overflow: hidden; height:30px; width:30px; float:left; margin-right:5px;}
.box-chat .box-chat-list .user-img>img { object-fit: cover; height:30px; width:30px;}
.box-chat .box-left { width: calc(100% - 35px); display:table; margin-bottom:3px; padding-right:30px;}
.box-chat .box-left .msg-left { font-size:14px; line-height:20px; font-weight:300; margin-right:5px; float: left; position: initial; position:relative;
	padding: 5px 10px; border-radius: 10px 10px 10px 0; background-color: #f1f0f0; color:#000; width: auto; display: inline-block; }
.box-chat .box-left .time-left { font-size:10px; color:#aaa; text-align:left; padding-top:3px;}
.box-chat .box-right { width: 100%; display:table; margin-bottom:3px; padding-left:30px;}
.box-chat .box-right .msg-right { font-size:14px; line-height:20px; font-weight:300; margin-left:5px; float: right; position: initial; position:relative;
	padding: 5px 10px; border-radius: 10px 10px 0 10px; background-color: #28a745; color:#fff; width: auto; display: inline-block; }
.box-chat .box-right .time-right { font-size:10px; color:#aaa; text-align:right; padding-top:1px;}
.box-chat .box-right .time-right>span { display:block; width:100%; font-size:10px; line-height:10px; text-align:right; color:#28a745;}

.box-chat .msg-box .time-tooltip { opacity:0; transition:.2s; position:absolute; top:-20px; z-index:9; width:115px;
	padding:2px 5px 3px; border-radius:3px; background-color:#111; color:#fff; font-size:11px; font-weight:300; line-height:12px; }
.box-chat .msg-box .time-tooltip:after { font-family: 'FontAwesome'; content: "\f0d7"; color:#111; position: absolute; bottom:-6px; font-size: 16px;}
.box-chat .msg-box:hover>.time-tooltip { opacity:1; transition:.1s;}
.box-chat .msg-left .time-tooltip { left:0; }
.box-chat .msg-left .time-tooltip:after { left:3px; }
.box-chat .msg-right .time-tooltip { right:0; }
.box-chat .msg-right .time-tooltip:after { right:3px; }

/*BoxWrite*/
.box-write { border-top:1px solid #e2e2e2; height:100px; padding:0;}
.box-write .box-write-top { width:100%; display:block; padding:2px 0; background-color:#f6f6f6; border-bottom:1px solid #e7e7e7;}
.box-write .box-write-top .show-icons { width:calc(100%); display:inline-block; border-top:1px solid #e7e7e7; padding:3px 3px;}
.box-write .box-write-top .show-icons .btn-sm { padding:5px 6px;}
.box-write .box-write-top .show-icons .btn-icon { background-color:rgba(255,255,255,0.5); padding:3px; line-height:23px; transition:.2s;}
.box-write .box-write-top .show-icons .btn-icon:hover { background-color:rgba(255,255,255,1); border: 1px solid rgba(0,0,0,0.1); transition:.1s;}
.box-write .box-write-top .show-icons .btn-icon>i { font-size:23px; line-height:20px; vertical-align:text-top; color:rgba(0,0,0,0.3); transition:.2s;}
.box-write .box-write-top .show-icons .btn-icon:hover>i { color:#28a745; transition:.1s;}
.box-write .box-write-left { width:calc(100% - 100px); display:inline-block; float:left; padding:0px;}
.box-write .box-write-left .replytextchat { font-size:14px; font-weight:300; line-height:16px; text-align:left; border:none; color:#000; padding:10px; width:100%;}
.box-write .box-write-left .replytextchat::placeholder { font-family:'Mukta','Pridi'; color:#bbb;}
.box-write .box-write-left .replytextchat:focus { outline-width: 0;}
.box-write .box-write-right { width:100px; display:inline-block; float:right;}
.box-write .box-write-right .btn-block { font-family:'Mukta','Pridi'; border-radius:0; font-size:18px; text-shadow:0 0 3px rgba(0,0,0,0.3);}
.box-write .box-write-right .btn-block>b { display:block; font-size:48px; line-height:36px; font-weight:600; padding-top:5px;}
.box-write .box-write-bottom { width:100%; display:table; padding:2px 5px 5px; background-color:#f6f6f6; border-top:1px solid #e7e7e7; overflow:hidden;}
.box-write .box-write-bottom .badge { background:#f48b12; color:#fff; font-weight:300; font-size:12px; padding: 4px 8px 5px;}
.box-write .box-write-bottom .clockcounter { color:red;}
/*TextAreaSpace*/
.box-write .box-write-left .replytextchat { height:87px;}
.box-write .box-write-right .btn-block { height:87px;}
/*TopicNetwork*/
body.monitor #mytopicnetwork {border:none;}
/*Monitor-Footer*/
body.monitor .monitor-footer { height:30px; background-color:#e7e7e7; border-top:1px solid #ccc; position:fixed; bottom:0; display: table; width:100%;}


/*FileEJS view_topic_tree*/
#view_topictree { }
#view_topictree .col { padding:5px 0;}
#view_topictree span.topic_name { font-size:28px; font-weight:bold; color:#0aacd5;} 


/*Footer*/
footer { margin-top: auto; display:block; color:#6a6a6a;}
div.footer { padding: 0px 20px; height: 60px; border-top: solid 1px #dee5ec; font-size:13px; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center;}
div.footer>div { margin-right:15px;}
.copyright { color:#bec8d2;}
.designed { color:#6a6a6a;}
.designed a { color:#111; text-transform:uppercase; transition:.3s;}
.designed a:hover { text-decoration:none; color:#0aacd5; transition:.1s;}


/* custom  */ 
.btn-topic-pack { margin-right: 5px; margin-bottom: 5px; }
.small-gray {  
    font-size: 13px;
    font-weight: 400;
    color: #827f7f;    
}
    
.small-orange {  
    font-size: 13px;
    font-weight: 400;
    color: #ff4500;   
}    
.font-orange { color: #fe9712; }
.display-block { display: block;}
.display-inline-block { display: inline-block; } 


.tooltips_info { color:#d7e3f0; }

.th_header { background-color: #eff5fa; }

#table_blue_gray {
 /* font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; */
  border-collapse: collapse;
  width: 100%;
}

#table_blue_gray td, #table_blue_gray  th {
  border: 1px solid #ddd;
  padding: 8px;
}

#table_blue_gray tr:nth-child(even){background-color: #f2f2f259; /*#f2f2f2; */}

#table_blue_gray tr:hover {background-color: #eee;}

#table_blue_gray th {
/*  padding-top: 12px; */
/*  padding-bottom: 12px; */
  text-align: left;
  background-color: #eff5fa;
/*  color: white; */
}