/* ===== 01-GENERAL STYLES  ====== */
body { width:100%; height:100%;	margin:0; padding:0; color:#4d4545; font-size: 16px; font-weight: 300; font-family: 'Roboto', sans-serif; background-color: #fff;}
ul { padding:0;	margin:0px;}
li { list-style:none; }
a {color:#1f3036; text-decoration:none; transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; color:inherit; }
a:hover, 
a:focus { text-decoration:inherit; outline:none; transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; }
a img { border:none; transition: all 0.3s ease 0s; }
img {max-width:100%;}

h1, h2, h3, h4, h5, h6 { margin: 0 0 20px; color: #009cbd; font-weight: 700; font-family: 'Roboto', sans-serif; }
h1 { font-size: 46px; line-height: 50px; color: #ffffff; font-weight: 800; letter-spacing: 1px; }
h2 { font-size: 42px; line-height: 52px; letter-spacing: 1px; text-align: center; }
h3 { font-size: 32px; line-height: 40px; }
h4 { font-size: 24px; line-height: 30px; }
h5 { font-size: 20px; line-height: 22px; }
p { margin: 0 0 15px; font-size: 16px; line-height: 28px; color: #2e2e2e; font-weight: 300; }
body.overflow-y { overflow-y:hidden; }
section { padding: 60px 0; }
.container-fluid { max-width: 1600px; }    

/*======= 02-GLOBAL-STYLES ==========*/
.btn { font-size: 15px; font-weight: 600; color: #ffffff; border: 2px solid #fd703b; background-color: #fd703b; display: inline-block; padding: 8px 11px; line-height: initial; border-radius: 4px;
} }
.btn:hover { background-color: transparent; color: #fd703b; border-color: #fd703b; }
.main-right-block .btn { margin-left: 10px !important; }

/*======= LOGIN ==========*/
.login { display:table; background-color:#fff; width:100%; padding:0; text-align:center; }
.login aside { display: table-cell; float:none; vertical-align: middle; height:100vh; }
.login .left-block { width:38%; /*background-color: #0c1d51;*/ background-color: #20496c; }
.login .left-block figure img { width:100%; }
.login .right-block { width:62%; background-repeat:no-repeat; background-position:center; background-size:cover; position: relative }
.login .right-block:before { content:""; position:absolute; background-color: rgb(0,0,0,0.5); top:0; left:0; width:100%; height:100%; }
.login .login-block { max-width:700px; padding:0 120px; float:right; } 
.login .login-block figure { margin: 0 auto 36px; max-width:300px; width: 100%; }
.login .login-block h3 { font-size:45px; line-height:50px; color:#fff; text-transform:uppercase; }
.login .login-block p { font-family: 'Roboto', sans-serif; margin-bottom: 47px; color: #fff; }
.login .login-block p a { color:#fff; text-decoration:underline; }
.login .login-block p.copy { color:#fff; font-family: 'Montserrat', sans-serif; margin:0; }
.login .login-block p.copy a { text-decoration:none; color:#fff; }
.login .form-group { margin-bottom: 31px; }
.login .form-group .form-control { height:50px; background-color:#eef2f5; border:0; box-shadow:none; border-radius:7px; }
.login .form-group label { font-size:16px; font-weight:500; color:#fff; line-height:20px; font-family: 'Roboto', sans-serif; text-align:left; display:block; letter-spacing:0.5px; margin-bottom: 9px; }
.login .form-group label strong { float:right; color:#background-color: #9ac1e3;; font-weight:500; }
.login .form-group label i { display:inline-block; margin-right: 8px; }
.login .btn { display:block; font-family: 'Roboto', sans-serif; letter-spacing:0.5px; padding: 12px 30px; margin: 42px 0 37px; width: 100%; }
.login h2 { font-size:60px; color:#ffffff; line-height:70px; text-transform:uppercase; margin-bottom: 26px; }
.login .content { max-width:1170px; width:100%; padding:0 140px; position: relative; }
.login .content p { font-size:27px; font-weight:400; color:#ffffff; line-height:36px; }

.socail-icons li { display: inline-block; color: #ffffff; padding: 0 10px; }
.socail-icons li a { display: inline-block; font-size: 21px; color: #ffffff; }

.select-round input { padding: 0; height: initial; width: initial; margin-bottom: 0; display: none; cursor: pointer; }
.select-round label { position: relative; cursor: pointer; font-size: 16px; font-weight: 400; margin: 0; }
.select-round label:before { content: ''; padding: 9px; display: inline-block; position: relative; vertical-align: middle; cursor: pointer; margin-right: 5px; top: 0; border: 1px solid #009cbd; background-color: #fff; border-radius: 4px; } 
.select-round label:after { content: '\f00c'; position: absolute; font-family: fontawesome; left: 0px; top: 3px; visibility: hidden; font-size: 14px; width: 20px; height: 20px; border-radius: 50%; text-align: center; }
.select-round input:checked + label:after { visibility: visible; }

/*======= 05-FOOTER ==========*/
.mobile-toggle { display: none; }

.full-block { padding: 0; display: flex; width: 100%; }
/*.full-block aside { display: table-cell; float: none; vertical-align: top; }*/
.full-block .menu-block { /*background-color: #1e5a76; width: 98px; text-align: center; padding: 18px 0; height:100vh; position:relative;*/ background-color: #1e5a76; width: 110px; text-align: center; padding: 18px 0; height: 100%; position: fixed; z-index: 9; overflow: auto; margin: 0; }
/*.full-block .menu-block:after { content:""; position:absolute; top:100%; left:0; background-color: #1e5a76; width:100%; height:100%; z-index:-1; }*/
.full-block .main-right-block { width: 100%; padding: 60px 15px 0 125px; }
.full-block .menu-block .navbar-nav { float: none; }
.full-block .menu-block figure { margin-bottom: 7px; border-bottom: 1px solid #83b4ca; padding-bottom: 10px; }
.full-block .menu-block figure img { margin-bottom: 9px; width: 45px; }
.full-block .menu-block .navbar-nav li { display: block; font-size: 11px; font-weight: 300; color: #daf1f6; line-height: 18px; text-transform: uppercase; text-align: center; float: none; padding: 11px 0; }
.full-block .menu-block .navbar-nav li:hover { background-color: rgb(255, 255, 255, 0.1); }
.full-block .menu-block .navbar-nav li img { width: 20px; margin-bottom: 3px; }
.full-block .menu-block .navbar-nav li strong { font-weight: 500; display: block; }
.full-block .menu-block .navbar-nav li a { color: #daf1f6; display: inline-block; padding: 0; opacity: 0.8; }
.full-block .menu-block .navbar-nav li:hover a { opacity: 1; }
.full-block .menu-block .submenu { background-color: rgb(28, 98, 125); position: fixed; left: -100% !important; top: 0; z-index: 9; left: 98px; height: 100vh; padding: 40px 30px; text-align: left; transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; }
.full-block .menu-block .submenu.show { left: 98px !important; transition: all 0.5s ease 0s; -ms-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; width:20%; padding: 70px 15px 20px; }
.full-block .menu-block .submenu h4 { font-size: 20px; font-weight: 500; color: #fff; }
.full-block .menu-block .submenu strong { font-size: 18px; font-weight: 500 !important; color: #fff; display: inline-block; margin-bottom: 10px; }
.full-block .menu-block .submenu ul li { text-align: left; padding: 10px 0; font-size: 14px; font-weight: 400; }
.full-block .menu-block .submenu .main-ul { }
.full-block .menu-block .submenu .main-ul .half { padding: 20px 10px; background-color:transparent; }
.full-block .menu-block .submenu .close { font-size: 18px; color: #fff; position: absolute; right: 30px; top: 15px; z-index: 4; opacity: 10; width: 20px; height: 20px; }
.full-block .menu-block .submenu .close::before { position: absolute; content: ' '; height: 15px; width: 2px; top: 3px; background-color: #fff;   transform: rotate(45deg); right:0; }
.full-block .menu-block .submenu .close::after { position: absolute; content: ' '; height: 15px; width: 2px; top: 3px; background-color: #fff; transform: rotate(-45deg); right:0; }

.main-right-block { padding: 0 25px; }
.main-right-block .top-block { display: flex; justify-content: space-between; padding: 10px 30px 10px 0; align-items: center; position: fixed; z-index: 5; background-color: #fff; width: calc(100% - 110px); top:0; }
.main-right-block .top-block h4 { font-size: 22px; font-weight: 400; color: #2e3f50; line-height: 30px; margin:0 }
.main-right-block .map-icons{ display: flex; align-items:center; }
.main-right-block .map-icons .form-control { box-shadow: none; height: 39px; margin-left: 10px; border: 1px solid #aaa; color: #000; }
.main-right-block table { width:100% !important; overflow-x:scroll; border-bottom: 0 !important; }
.main-right-block table tr th { font-size: 15px; font-weight: 500; color: #1e5a76; line-height: 10px; text-transform: uppercase; font-family: 'Roboto', sans-serif; background-color: #d9e4ee; padding: 15px 15px; border: 1px solid #dfe3eb; }
.main-right-block table tr th::before, .main-right-block table tr th::after { color: #000; opacity: unset !important; }
.main-right-block table tr td { font-size: 15px; border-bottom: 1px solid #d1dde5; padding: 8px 15px; font-weight: 400; background-color: #fff; }
.main-right-block table tr td .icon { margin:0 3px; }

.main-right-block table tr td  .pull-right { margin: 0 10px; font-size: 15px; }

#myTable_length, #myTable_filter { display:none; }
.heading-block { display: flex; justify-content: space-between; }
#publish_date {
    background-image: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSbUF8ijoIW-ZFNk-M-KT-J3uUAfl6bNrkTWPcr3tw1HMjqVoFAFcoKRTk);
    display: inline-block;
    background-repeat: no-repeat;
    background-position: right;
    vertical-align: middle;
}

.full-block .main-table-block { display:table; width:100%; }
.full-block #graph_content { display:table-cell; float:none; width:20%; vertical-align:top; }
.full-block #graph { display:table-cell; float:none; width:80%; padding-left:20px; vertical-align:top; }
.full-block #graph_content ul li { border-top:1px solid #dedede; border-left:1px solid #dedede; border-right: 5px solid #aaa; padding: 15px; font-size:16px; font-weight:400; color:#000; }
.full-block #graph_content ul li:nth-child(1) { border-right-color:#00FF00; }
.full-block #graph_content ul li:nth-child(2) { border-right-color:#808000; }
.full-block #graph_content ul li:nth-child(3) { border-right-color:#00FFFF; }
.full-block #graph_content ul li:nth-child(4) { border-right-color:#008080; }
.full-block #graph_content ul li:nth-child(5) { border-right-color:#008000; }
.full-block #graph_content ul li:nth-child(6) { border-right-color:#6495ED; }
.full-block #graph_content ul li:nth-child(7) { border-right-color:#FF0000; }
.full-block #graph_content ul li:nth-child(8) { border-right-color:#800080; }
.full-block #graph_content ul li:nth-child(9) { border-right-color:#FF00FF; }
.full-block #graph_content ul li:last-child { border-bottom:1px solid #dedede; }
.full-block #graph_content ul li strong { display:block; font-size:25px; line-height:30px; }
.full-block #container { height:80vh;  }
.full-block #container #highcharts-hmz9e81-0 { height:100%; }

/* ======== * documents-list * ======== */
.documents-list .main-table-block { display:flex;  }
.documents-list .main-table-block div#myTable_wrapper { width:50%; padding:0 15px; }
.documents-list .main-table-block .detail { width:50%; padding:0 15px; height:90vh; }

/* ======== * attendance * ======== */
.attendance .time-tabel { postion: relative; }
.attendance .time-tabel table tr th { background-color: #f5f8fa; font-size: 16px; font-weight: 700; padding: 15px 15px; text-align: center; }
.attendance .time-tabel table tr th span { display: block; }
.attendance .time-tabel table tr th,
.attendance .time-tabel table tr td { border:0.5px solid #eae8ea; text-align:center; font-size:14px; }
.attendance .time-tabel table tr td { color: #000; font-size: 14px; font-weight:400; width: 50px; }
.attendance .time-tabel table tr td input { font-size:14px; font-weight:400;color: #000; border:0; box-shadow:none; text-align:center; width:100%; }
.attendance .time-tabel table tbody tr th { min-width:160px; }
.attendance .time-tabel table tbody tr th:nth-child(1) { font-weight:500; text-align:right; color: #000; }
.attendance .time-tabel table tbody tr .em-name { font-weight:700 !important; }
.attendance .att_status, 
.attendance .total_time { color: #000; font-weight: 600; }
.attendance .holiday_list { font-size: 15px; font-weight: 500; padding: 15px; }
.attendance .time-tabel { overflow: auto; height: 70vh; width: 100%; }
.attendance .time-tabel table { position: relative; border-collapse: separate; border-spacing: 0; }
.attendance .time-tabel table th, 
.attendance .time-tabel table td { min-width: 50px; width: 50px; padding: 5px; background-color: white;}
.attendance .time-tabel table tbody {height: 90px;}
.attendance .time-tabel table thead {text-align: center;position: sticky;top: 0;z-index: 2;}
.attendance .time-tabel table thead tr th { background-color: #fff; color:#000; }
.attendance .time-tabel table th {text-align: center;position: sticky;top: 0;z-index: 0; }
.attendance .time-tabel table th:nth-child(1) {left: 0;z-index: 3;}
.attendance .time-tabel table td { text-align: center; white-space: pre; }
.attendance .time-tabel table tbody tr th:nth-child(1) { position: sticky; left: 0; z-index: 1; }
.attendance .header { background-color: #c78c00 !important; }
.attendance .emp_details { background-color: #f5f8fa !important; }
.attendance .dates { background-color: #a1e5f6 !important; }
.attendance .weekend { background-color: #f9be2d !important; }
.attendance .holiday { background-color: #f9be2d !important; font-weight:600 !important; }
.attendance .present { background-color: #1ca853 !important; font-weight:600 !important; }
.attendance .leave { background-color: #ff1800 !important; font-weight:600 !important; }
.attendance .halfday { background-color: #5ab1ff !important; font-weight:600 !important; }
.attendance #table-scroll { margin:0 !important; }
.att_mon { color: #000; font-size: 20px; font-weight:700;text-transform:uppercase;}


/* ======== * salaries * ======== */
.salaries .time-tabel table th:nth-child(1) { height:50px; }
.salaries .time-tabel table td { font-weight:600 !important; padding-top:15px !important; }
.salaries .time-tabel { height:90vh; }
.salaries .time-tabel table tr th, 
.salaries .time-tabel table tr td { padding: 0 10px; }
.salaries #table-scroll { margin:0 !important; }


.full-block .order-detail-page { padding: 20px 15px 0 125px; }
.order-details-block { padding: 15px 0; }
.order-details-block .row { margin-top:10px; }
.order-details-block .box { border:2px solid #c3c4c7; padding:15px 20px; margin-bottom:15px; }
.order-details-block h4 { font-size:22px; font-weight:600; color:#000; line-height:26px; margin-bottom:7px; }
.order-details-block h5 { font-size:20px; font-weight:500; color:#000; line-height:24px; margin-bottom: 10px; }
.order-details-block ul li { font-size:16px; line-height:22px; font-weight:400; }
.order-details-block ul li strong { font-weight:500; }
.order-details-block ul li a { color:#2271b1; text-decoration:underline; }
.order-details-block .items-list { text-align:right; padding: 20px 50px 20px 30px; }
.order-details-block .items-list li { padding-bottom: 5px; position:relative; }
.order-details-block .items-list li:last-child { margin-top: 15px; padding-top: 15px; font-weight:700; color:#000; }
.order-details-block .items-list li:last-child::after { content:""; position:absolute; top:0; right:0; height:1px; max-width:800px; width:100%; background-color:#dedede; }
.order-details-block .items-list li strong { padding-left:80px; }
.order-details-block .item-detail { text-align:center; margin-top:20px; }

.order-details-block .table-block { padding:0; }
.responsive-table { border-collapse: collapse; margin: 0; padding: 0; width: 100%; table-layout: fixed; }
.responsive-table th { background-color:#f8f8f8; font-size:16px; line-height:24px; color:#000; font-weight:500; padding:15px; }
.responsive-table td { font-size:16px; font-weight:400; padding:15px; border-bottom:1px solid #dedede; }
.responsive-table tr:last-child td { border-bottom:0; }
.responsive-table th:first-child,
.responsive-table td:first-child { width:75%; }
.responsive-table td .item-list { display:flex; align-items:center; }
.responsive-table td .item-list figure { width:80px; }
.responsive-table td .item-list p { padding-left:20px; margin:0; font-size:14px; line-height:22px; }
.responsive-table td .item-list figure img { width:100%; }
.responsive-table td .item-list figure.addon { width: 3% !important; }

.print_buttons { text-align: right; }
.new_image{ width: 30px;margin-left: 5px; }
.bold-text{ font-weight: 700;color: #1e5a76; }

.highcharts-figure,
.highcharts-data-table table {
/*    min-width: 360px;
    max-width: 800px;
    margin: 1em auto;*/
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    /*max-width: 500px;*/
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}