@import url('https://fonts.googleapis.com/css?family=Muli');

/* h1, h2, h3, h4, h5, h6, p, label, small, span, input, button, table, tr, thead, th, tbody, td, ul, li, ol, a {
    font-family: 'Muli', sans-serif !important;
} */

body#loginPage * :not(i.icon) {
    font-family: 'Muli', sans-serif !important;
}

/* body#loginPage * :not(i.icon) {
    font-family: 'Open Sans', sans-serif;
} */

.ui.menu .item > i.icon{
    margin-right: 0px !important;
}

#logo_top{
    width: 110px;
}

.table-container .ba-table tbody tr td.disabled {
    background: #ddd !important;
}

.right_segment .ui.header h1 span:after, .right_segment .page_header h1 span:after {
    content: '';
    height: 4px;
    width: 100%;
    background-color: #0c4da2;
    position: absolute;
    left: 0;
    top: 120%;
    border-radius: 60px;
}

body#loginPage:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

body:before {
    content:"";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #efefef;
}

#mainContainer.open_nav_active{
    padding-left: 170px !important;
}
#mainContainer > .ui.container {
    transition: .3s;
}
#mainContainer.open_nav_active > .ui.container {
    transform: scale(0.8);
}

#mainContainer, #mainContainer *{
    transition: all 0.2s;
}
#side_navigation {
    margin-left: 0px !important;
    top: 50px; 
    z-index: 99; 
    position: fixed; 
    width: 44px; 
    border-radius: 0px;
    height: 100%; 
    background-color: #0c4da2;
    overflow: hidden;
    left: 0;
}
#side_navigation a.item {
    border-bottom: 1px solid rgba(255,255,255,0.2) !important;
    padding: 0 !important;
    display: block; 
    white-space: nowrap;
    line-height: 40px !important;
    cursor: pointer
    color:#fff;
} 
#side_navigation a.item span {
    color:#fff;
}
#side_navigation a.item:hover {
    background-color: rgba(0,0,0,0.3)
}
#side_navigation a.item > i.icon{
    color: #fff;
    font-size: 20px;
    padding-left: 7px;
    margin: 0;
    float: left;
    border-right: 1px solid rgba(255,255,255,0.3);
    height: 40px;
    padding: 0 10px;
    width: 44px;
    margin-right: 12px;
}
#side_navigation.open_nav {
    width: 230px !important;
}
#side_navigation.open_nav li a span{
    display: block;
}
#side_navigation li a span{
}

#side_navigation a.item {
    overflow: hidden;
}
#side_navigation.open_nav li i.icon {
    box-shadow: 3px 0 9px rgba(0,0,0,0.4);
}

#dynamicTableModal, 
#updateStatus {
    border-radius: 0px !important;
}

#search_dynamicTableModal_List_Input,
#id_status,
#id_marks {
    border-radius: 0px !important;
}

.border_radius{
    border-radius: 0px !important;
}

#mainContainer #topNavBar {
    background: #fff !important;
    position: fixed;
    margin: 0rem 0em !important;
    box-shadow: none !important;
    border: none !important;
    height: 50px !important;
    border-bottom: 1px solid #ccc !important;
}
.btnAttendance .ui.button {
    height: 150px;
    line-height: 110px;
    font-size: 20px;
}
body#loginPage.pushable > .pusher  {
    background: none !important;
}
.select-info {
    margin-left: 10px;
}
.label.present {
    background-color: #21BA45 !important;
    border-color: #21BA45 !important;
    color: #FFFFFF !important;
}
.label.absent {
    background-color: #DB2828 !important;
    border-color: #DB2828 !important;
    color: #FFFFFF !important;
}
.label.present-late {
    background-color: #F2711C !important;
    border-color: #F2711C !important;
    color: #FFFFFF !important;
}
.linkCol {
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
}
.text-center {
    text-align: center !important;
}
.text-right {
    text-align: right !important;
}
#loginForm {
    position: relative;
    text-align: center;
    margin-top: 30px;
}
#loginForm .ui.button{
    background: #263078 !important;
}
#loginForm img{
    box-shadow: 0 0 10px;
    background: #fff;
    padding: 20px;
    margin-bottom: 0;
    height: 160px;
    width: auto;
    border-radius: 190px;
}

body {
    background: #fff !important;
}
#companyLogo {
    width: 100%;
    text-align: center;
    clear: both;
    font-size: 11px;
    display: inline-block;
    padding: 10px;

}
.list_viewTable_container .dt-button {
    margin-top: 0 !important;    

}
.dt-button {
    margin-top: 19px !important;
}

#mainLogo-nav {
    width: 100%;
    text-align: center;
    float: left;
    clear: both;
    height: 90px;
    font-size: 11px;
    color: #fff !important;
    background: #d23030;
}
#mainLogo-nav a {
    color: #fff !important;

}
#mainLogo-nav {
    background: none !important;
    height: 80px;
}
#mainLogo-nav span{
    font-size: 66px;
    float: left;
    clear: both;
    width: 100%;
    height: 60px;
    line-height: 70px;
    color:#fff !important;
}
#mainLogo-nav .logoTxt{
    width: 100%;
    font-size: 12px;
    background: #263078;
    height: auto;
    line-height: 22px;
}

#mainLogo-nav .crysCampus {
    width: 80%;
    background-size: 100%;
    display: block;
    margin: 10px auto;
    float: none;
    border: 0;
    height: 38px;
}

.crysCampus {
    background: url(../images/BitsWits-logo-2-03.png) no-repeat left top;
    width: 110px;
    height: 25px;
    float: left;
    padding-right: 10px !important;
    background-size: contain;
} 

#loginform_logo {
    background: url(../images/BitsWits-logo-2-03.png) no-repeat left top;
    width: 200px;
    height: 40px;
    vertical-align: middle;
    margin: 0 auto;
    background-size: contain;
    float: none;
}

.schoolLogo {
    font-size: 40px;
    color: #263078;
    line-height: 44px;
}
#mainLogo {
    width: 100%;
    text-align: center;
    clear: both;
    font-size: 11px;
    color: #fff !important;
    background: #b5b5b5;
    vertical-align: top;
    display: inline-block;
    padding: 7px 0 0 0;
}
#mainLogo a {
    color: #fff !important;

}
#mainLogo span{
    font-size: 27px;
    color: #fff !important;
    display: inline-block;
    height: 24px;
    margin: 0;
    padding: 0;
    font-weight: 900;
    border-right: 1px solid #fff;
    padding-right: 15px;
    margin-right: 15px;
    vertical-align: middle;
    padding-top: 1px;

}
#mainLogo small {
    line-height: 22px;
    display: inline-block;
    height: 30px;
    vertical-align: top;
    font-size: 15px;
}
/*

#loginForm:after {
    content:"";
    background: url('../images/newlogo.png') no-repeat !important;
    width: 387px;
    height: 439px;
}
*/
.ui.left.visible.sidebar, .ui.right.visible.sidebar {
    box-shadow: 0px 0px 2px rgba(34, 36, 38, 0.4);
}
.ui.form select, .ui.form input:not([type]), .ui.form input[type="date"], .ui.form input[type="datetime-local"], .ui.form input[type="email"], .ui.form input[type="number"], .ui.form input[type="password"], .ui.form input[type="search"], .ui.form input[type="tel"], .ui.form input[type="time"], .ui.form input[type="text"], .ui.form input[type="file"], .ui.form input[type="url"] {
    border: 1px solid rgba(34, 36, 38, 0.30);
    font-size: 11px !important;
    height: 35px !important;  
}
.leftMenu {
    font-size: 0.9em;
    background: none !important;
}
.leftMenu * {
    color: #333 !important;
}
.leftMenu .title {
    /*border-top: 1px solid rgba(255, 255, 225, 0.3) !important;*/
}
.leftMenu .menuContainer .content {
    padding: 0 !important;
}
.leftMenu .menuContainer {
    position: relative;
    clear: both;
}
.leftMenu .menuContainer.active_page_container a.item.active:after,
.leftMenu .menuContainer.active_page_container:before {
    width: 5px !important;
}
.leftMenu .menuContainer.active_page_container .menuContainer.active_page_container:before {
    width: 0 !important;
}
.menuContainer.nav_submenu .content a.item:hover:after,
.menuContainer.nav_submenu .content .menuContainer.nav_submenu .title.active:before,
.leftMenu .menuContainer.active_page_container a.item.active:after,
.leftMenu .menuContainer.active_page_container:before,
.leftMenu .menuContainer.active_container:before,
.leftMenu .menuContainer:hover:before {
    content: "";
    width: 2px;
    height: 100%;
    position: absolute;
    left: 0px !important;
    top: 0;
    background: #f2711c !important;
    z-index: 9;
}
.leftMenu .menuContainer .title {
    border-bottom: 1px solid rgba(255, 255, 225, 0.3) !important;
    position: relative;
}

.leftMenu .menuContainer .title > a.item{
    position: static !important;
}
.leftMenu .menuContainer:hover .title {
    /*background: rgba(0, 181, 110, 1) !important;*/
}
.menuContainer .content > a.item:hover,
.leftMenu .menuContainer .title:hover {
    background: rgba(0, 0, 0, 0.3) !important;
    color: #fff !important;
}

.leftMenu .ui.header{
    padding-left: 10px;
}
#mainContainer {
    width: 100%;
    background: none !important;
}

.ui.sidebar {
    left: -215px !important;
}

.ui.sidebar .item {
    cursor: pointer;
}

.leftMenu {
    box-shadow: none !important;
}
.ui.table thead  tr th {
    background: #333 !important;
    color: #eee !important;
    border-color: #aaa !important;
}
.errorlist {
    list-style: none;
    padding: 0;
    margin: 0;
    color: #DB2827 !important;
    font-size: 12px !important;
}
div.ms-parent {
    width: 100% !important;
}
.ms-choice {
    height: 35px !important;
    line-height: 38px !important;
    border: 1px solid rgb(222, 222, 222) !important;
}
.ms-choice > div {
    top: 5px !important;
    right: 5px !important;
}
.hide {
    display: none;
}
.ms-drop ul > li label:not(.optgroup ) {
    font-weight: normal;
    display: block;
    white-space: nowrap;
    line-height: 20px;
    padding-left: 18px;
    position: relative;
    float: left;
    width: 100%;
    font-size:11px !important; 
}
.ms-choice > span {
    font-size: 11px;
}
.ms-drop ul > li.ms-select-all.selected label:after,
.ms-drop ul > li.selected label input[type="checkbox"] + span:after {
    content: "\f00c";
    line-height: 15px;
    color: green;
    font-size: 11px;
    font-family: 'Icons';
    text-align: center;
    float: left;
    left: -19px;
    top: 2px;
    width: 14px;
    height: 14px;
    position: absolute;

}

.ms-drop ul > li.selected label input[type="radio"] + span:after {
    content: "";
    background: green;
    border-radius: 10px;
    height: 8px;
    width: 8px;
    float: left;
    left: -16px;
    top: 5px;
    position: absolute;
}
.ms-drop ul > li.ms-select-all label:after {
    left: -1px !important;

}

.ms-drop ul > li label input + span {
    position: relative;

}


.ms-drop ul > li label input {
    opacity: 0;
    float: left;
    width: 0;
    height: 0;
    position: relative;
    margin-left: -15px;
}


.ms-drop ul > li.ms-select-all label:before,
.ms-drop ul > li label input + span:before {
    content: "";
    width: 14px;
    height: 14px;
    border: 1px solid #ccc;
    float: left;
    left: -19px;
    top: 2px;
    position: absolute;
    margin: 0;
    z-index: 9;

}

.ms-drop ul > li.ms-select-all label:before {
    left: -1px !important;

}

.ms-drop ul > li label input[type="radio"] + span:before {
    border-radius: 16px;
}

.ms-drop ul > li.ms-select-all label:before,
.ms-drop ul > li label input[type="checkbox"] + span:before {
    border-radius: 3px;
}





















.groupField + div.ms-parent .ms-drop ul li.group {
    margin-left:0 !important; 
}
.groupField + div.ms-parent .ms-drop ul li {
    margin-left:15px; 
}
#usermenu.visible {
    color: #000 !important;
    background: #fff;
    text-align: left;
}
#usermenu.visible .menu.item {
    background: #fff !important;
    float:left !important;
}
#usermenu .item {
    text-align: left !important;

}


/* Table ======================================================================================================================================*/
.dataTables_length {
    float: left !important;
    width: 200px !important;
    margin-top: 19px ;
    margin-bottom: 10px !important;
}
.dataTables_length select {
    width: 100px !important;
    display: inline !important;
}
.dataTables_filter {
    float: right !important;
    width: 300px !important;
    margin-bottom:10px !important;
}
.table-container .dataTables_filter {
    width: 50% !important;
    display: flex;
    justify-content: flex-end;
}
.table-container .dataTables_filter > label {
    width: 300px !important;
    float: right !important;
    margin-right: 5px;
    display: flex;
    margin-top: 18px;
    align-items: center;  
}
.table-container .dataTables_filter > label > input {
    margin-left: 5px !important;
}
.dataTables_filter a.ui.button {
    margin-top: 19px;
}
table thead.filters-head th .input {
    width: 100%;
}
fieldset > .table-contianer, fieldset > .table-container {
    margin-top: 0;
}
.fixedHeader-floating {
    top: 54px !important;
    border-top: 1px solid #ccc;
}
.fixedHeader-floating.ba-table {
    font-family: Arial;
    width: 100%;
    max-width: 100%;
    text-align: left;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    margin-bottom: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.fixedHeader-floating.ba-table {
    *zoom: 1;
}
.fixedHeader-floating.ba-table:before, .fixedHeader-floating.ba-table:after {
    content: "";
    display: table;
}
.fixedHeader-floating.ba-table:after {
    clear: both;
}
.fixedHeader-floating.ba-table ~ .ui.bodal {
    min-height: 100px;
    max-height: 200px;
}
.fixedHeader-floating.ba-table thead tr {
    border: 0;
    border-top: 1px solid #7c7c7c;
}
.fixedHeader-floating.ba-table thead tr:first-child {
    border-top: 0 !important;
}
.fixedHeader-floating.ba-table thead tr:first-child th:first-child, .fixedHeader-floating.ba-table thead tr:first-child td:first-child {
    -webkit-border-top-left-radius: 6px;
    -moz-border-top-left-radius: 6px;
    -ms-border-top-left-radius: 6px;
    -o-border-top-left-radius: 6px;
}
.fixedHeader-floating.ba-table thead tr:first-child th:last-child, .fixedHeader-floating.ba-table thead tr:first-child td:last-child {
    -webkit-border-top-right-radius: 6px;
    -moz-border-top-right-radius: 6px;
    -ms-border-top-right-radius: 6px;
    -o-border-top-right-radius: 6px;
    border-right: 0px;
}
.fixedHeader-floating.ba-table thead tr th, .fixedHeader-floating.ba-table thead tr td {
    background: #444444;
    padding: 8px;
    color: #fff;
    font-size: 11px;
    border-right: 1px solid #7c7c7c;
    border-bottom: 1px solid #7c7c7c;
    font-weight: bold;
    height: 30px;
    vertical-align: middle;
}
.fixedHeader-floating.ba-table thead tr th a, .fixedHeader-floating.ba-table thead tr td a {
    color: #fff;
    display: block;
}
.fixedHeader-floating.ba-table thead tr th:hover, .fixedHeader-floating.ba-table thead tr td:hover {
    background: #5e5e5e;
}
.fixedHeader-floating.ba-table tbody {
    background: #fff;
}
.fixedHeader-floating.ba-table tbody tr.nagative {
    box-shadow: 0 0 0 #e0b4b4 inset;
    background: #FFE2E2 !important;
    color: #F11E1A !important;
}
.fixedHeader-floating.ba-table tbody tr.nagative td {
    background: #FFE2E2 !important;
    color: #F11E1A !important;
}
.fixedHeader-floating.ba-table tbody tr span.tr-button {
    display: none;
}
.fixedHeader-floating.ba-table tbody tr th {
    font-size: 11px;
    vertical-align: middle;
    min-height: 28px;
    height: 28px;
    padding: 3px 8px;
    background: #686868;
    color: #fff;
    border-right: 1px solid #7c7c7c;
    border-bottom: 1px solid #7c7c7c;
}
.fixedHeader-floating.ba-table tbody tr td {
    padding: 3px 8px;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    color: #2e2e2e;
    font-size: 11px;
    vertical-align: middle;
    min-height: 28px;
    height: 28px;
}
.fixedHeader-floating.ba-table tbody tr td.nagative, .fixedHeader-floating.ba-table tbody tr td.negative {
    background: #FFE2E2 !important;
    color: #F11E1A !important;
}
.fixedHeader-floating.ba-table tbody tr td:last-child {
    border-right: 0;
}
.fixedHeader-floating.ba-table tbody tr td:first-child > .icon.info {
    float: left;
    margin-right: -20px;
    position: relative;
    z-index: 99;
}
.fixedHeader-floating.ba-table tbody tr td:first-child > .icon ~ span {
    padding-left: 20px;
}
.fixedHeader-floating.ba-table tbody tr td > .button {
    padding: 6px 4px;
}
.fixedHeader-floating.ba-table tbody tr td > .button.circular {
    padding: 4px;
}
.fixedHeader-floating.ba-table tbody tr td > .button > .icon {
    font-size: 11px;
}
.fixedHeader-floating.ba-table tbody tr td > .button > .icon.edit {
    margin-top: 1px;
    margin-bottom: -1px;
    margin-left: 1px;
}
.fixedHeader-floating.ba-table tbody tr td .ui.popup small:last-child {
    display: none;
}
.fixedHeader-floating.ba-table tbody tr td > span {
    text-overflow: ellipsis;
    max-width: 130px;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
    height: 14px;
}
.fixedHeader-floating.ba-table tbody tr td > span small:last-child {
    display: none;
}
.fixedHeader-floating.ba-table tbody tr td > span.mini {
    max-width: 100px;
}
.fixedHeader-floating.ba-table tbody tr td > span.mini.micro {
    max-width: 70px;
}
.fixedHeader-floating.ba-table tbody tr td > span.large {
    max-width: 250px;
}
.fixedHeader-floating.ba-table tbody tr td .ui.floating.dropdown .menu {
    left: auto;
    right: 0;
    z-index: 999;
}
.fixedHeader-floating.ba-table tbody tr:nth-child(even) {
    background: #f0f0f0;
}
.fixedHeader-floating.ba-table tbody tr:last-child td, .fixedHeader-floating.ba-table tbody tr:last-child th {
    border-bottom: 0px;
}
.fixedHeader-floating.ba-table tbody tr:last-child td:first-child, .fixedHeader-floating.ba-table tbody tr:last-child th:first-child {
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-bottom-left-radius: 6px;
    -ms-border-bottom-left-radius: 6px;
    -o-border-bottom-left-radius: 6px;
}
.fixedHeader-floating.ba-table tbody tr:last-child td:last-child, .fixedHeader-floating.ba-table tbody tr:last-child th:last-child {
    -webkit-border-bottom-right-radius: 6px;
    -moz-border-bottom-right-radius: 6px;
    -ms-border-bottom-right-radius: 6px;
    -o-border-bottom-right-radius: 6px;
}
.fixedHeader-floating.ba-table tbody > tr:hover {
    background: #f1f1f1;
}
.fixedHeader-floating.ba-table tbody tr:hover div i.icon {
    color: inherit;
}
.table-contianer, .table-container {
    margin-top: -15px;
    width: 100%;
    font-size: 12px;
}
.table-contianer + .ui.column.grid, .table-container + .ui.column.grid {
    margin-top: 0px;
}
.table-contianer, .table-container {
    *zoom: 1;
}
.table-contianer:before, .table-contianer:after, .table-container:before, .table-container:after {
    content: "";
    display: table;
}
.table-contianer:after, .table-container:after {
    clear: both;
}
.table-contianer .ba-table, .table-container .ba-table {
    font-family: Arial;
    width: 100% !important;
    max-width: 100%;
    text-align: left;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    margin-bottom: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-spacing: 0;
    clear: both !important;
}
.table-contianer .ba-table, .table-container .ba-table {
    *zoom: 1;
}
.table-contianer .ba-table:before, .table-contianer .ba-table:after, .table-container .ba-table:before, .table-container .ba-table:after {
    content: "";
    display: table;
}
.table-contianer .ba-table:after, .table-container .ba-table:after {
    clear: both;
}
.table-contianer .ba-table.dataTable.no-footer, .table-container .ba-table.dataTable.no-footer {
    border-bottom: 0;
}
.table-contianer .ba-table#destStandar tbody tr.um, .table-container .ba-table#destStandar tbody tr.um {
    background: #FDE3E3 !important;
}
.table-contianer .ba-table#AMCW tbody tr.badValue, .table-container .ba-table#AMCW tbody tr.badValue {
    background: #FDE3E3 !important;
}
.table-contianer .ba-table ~ .ui.bodal, .table-container .ba-table ~ .ui.bodal {
    min-height: 100px;
    max-height: 200px;
}
.table-contianer .ba-table thead tr, .table-container .ba-table thead tr {
    border: 0;
    border-top: 1px solid #7c7c7c;
}
.table-contianer .ba-table thead tr:first-child, .table-container .ba-table thead tr:first-child {
    border-top: 0 !important;
}
.table-contianer .ba-table thead:first-child tr:first-child th:first-child, .table-contianer .ba-table thead:first-child tr:first-child td:first-child, .table-container .ba-table thead:first-child tr:first-child th:first-child, .table-container .ba-table thead:first-child tr:first-child td:first-child {
    -webkit-border-top-left-radius: 6px;
    -moz-border-top-left-radius: 6px;
    -ms-border-top-left-radius: 6px;
    -o-border-top-left-radius: 6px;
}
.table-contianer .ba-table thead:first-child tr:first-child th:last-child, .table-contianer .ba-table thead:first-child tr:first-child td:last-child, .table-container .ba-table thead:first-child tr:first-child th:last-child, .table-container .ba-table thead:first-child tr:first-child td:last-child {
    -webkit-border-top-right-radius: 6px;
    -moz-border-top-right-radius: 6px;
    -ms-border-top-right-radius: 6px;
    -o-border-top-right-radius: 6px;
    border-right: 0px;
}
.table-contianer .ba-table thead tr th, .table-contianer .ba-table thead tr td, .table-container .ba-table thead tr th, .table-container .ba-table thead tr td {
    background: #444444;
    color: #fff;
    font-size: 14px !important;
    border-right: 1px solid #7c7c7c;
    border-bottom: 1px solid #7c7c7c;
    font-weight: bold;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: middle;
    padding: 5px 7px;
    font-weight: bold !important;
}
.table-contianer .ba-table thead tr th a, .table-contianer .ba-table thead tr td a, .table-container .ba-table thead tr th a, .table-container .ba-table thead tr td a {
    color: #fff;
    display: block;
}
.table-contianer .ba-table thead tr th:hover, .table-contianer .ba-table thead tr td:hover, .table-container .ba-table thead tr th:hover, .table-container .ba-table thead tr td:hover {
    background: #5e5e5e;
}
.table-contianer .ba-table thead tr th:hover, .table-container .ba-table thead tr th:hover {
    background: #0c4da2;
}
.table-contianer .ba-table thead tr th .dropdown .item, .table-container .ba-table thead tr th .dropdown .item {
    font-size: 12px !important;
    line-height: 0.5em !important;
}
.table-contianer .ba-table tbody, .table-container .ba-table tbody {
    background: #fff;
}
.table-contianer .ba-table tbody tr, .table-container .ba-table tbody tr {
    background: none !important;
}
.table-contianer .ba-table tbody tr.nagative, .table-container .ba-table tbody tr.nagative {
    box-shadow: 0 0 0 #e0b4b4 inset;
    background: #FFE2E2 !important;
    color: #F11E1A !important;
}
.table-contianer .ba-table tbody tr.nagative td, .table-container .ba-table tbody tr.nagative td {
    background: #FFE2E2 !important;
    color: #F11E1A !important;
}
.table-contianer .ba-table tbody tr.even.blockedDest, .table-contianer .ba-table tbody tr.odd.blockedDest, .table-container .ba-table tbody tr.even.blockedDest, .table-container .ba-table tbody tr.odd.blockedDest {
    background: #f9bf99 !important;
    color: #9f4509 !important;
}
.table-contianer .ba-table tbody tr.even.LockDest, .table-contianer .ba-table tbody tr.odd.LockDest, .table-container .ba-table tbody tr.even.LockDest, .table-container .ba-table tbody tr.odd.LockDest {
    background: #ffb9b9 !important;
    color: #ff7c7c !important;
}
.table-contianer .ba-table tbody tr.blockedDest, .table-container .ba-table tbody tr.blockedDest {
    background: #f9bf99 !important;
    color: #9f4509 !important;
}
.table-contianer .ba-table tbody tr.LockDest, .table-container .ba-table tbody tr.LockDest {
    background: #ffb9b9 !important;
    color: #ff7c7c !important;
}
.table-contianer .ba-table tbody tr span.tr-button, .table-container .ba-table tbody tr span.tr-button {
    display: none;
}
.table-contianer .ba-table tbody tr th, .table-container .ba-table tbody tr th {
    font-size: 11px;
    vertical-align: middle;
    padding: 5px;
    background: #686868;
    color: #fff;
    border-right: 1px solid #7c7c7c;
    border-bottom: 1px solid #7c7c7c;
}
.table-contianer .ba-table tbody tr td:first-child, 
.table-container .ba-table tbody tr td:first-child {
    border-left: 1px solid #eee;
}
.table-contianer .ba-table tbody tr td:last-child, 
.table-contianer .ba-table tbody tr td:last-child {
    border-right: 1px solid #eee !important;
}
.table-container .ba-table tbody tr td .ui.button.mini {
    padding: 6px 12px !important;
}
.table-contianer .ba-table tbody tr td, .table-container .ba-table tbody tr td {
    padding: 0 7px;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
    color: #2e2e2e;
    font-size: 12px;
    vertical-align: middle;
    white-space: nowrap;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: none !important;
    line-height: 40px;
}
.table-contianer .ba-table tbody tr td.danger-color, .table-container .ba-table tbody tr td.danger-color {
    text-shadow: #F9F9F9 0px 0px 4px;
    background-color: #EBA3A3 !important;
}
.table-contianer .ba-table tbody tr td.tdlink, .table-container .ba-table tbody tr td.tdlink {
    font-weight: bold;
    cursor: pointer;
    text-decoration: underline;
}
.table-contianer .ba-table tbody tr td.tdlink:hover, .table-container .ba-table tbody tr td.tdlink:hover {
    background: #A1C8EF !important;
    text-decoration: none;
}
.table-contianer .ba-table tbody tr td.nagative, .table-contianer .ba-table tbody tr td.negative, .table-container .ba-table tbody tr td.nagative, .table-container .ba-table tbody tr td.negative {
    background: #FFE2E2 !important;
    color: #F11E1A !important;
}
.table-contianer .ba-table tbody tr td:first-child > .icon.info, .table-container .ba-table tbody tr td:first-child > .icon.info {
    float: left;
    margin-right: -20px;
    position: relative;
    z-index: 99;
}
.table-contianer .ba-table tbody tr td:first-child > .icon ~ span, .table-container .ba-table tbody tr td:first-child > .icon ~ span {
    padding-left: 20px;
}
.table-contianer .ba-table tbody tr td > .button.circular, .table-container .ba-table tbody tr td > .button.circular {
    padding: 4px;
}
.table-contianer .ba-table tbody tr td > .button > .icon, .table-container .ba-table tbody tr td > .button > .icon {
    font-size: 11px;
}
.table-contianer .ba-table tbody tr td > .button > .icon.edit, .table-container .ba-table tbody tr td > .button > .icon.edit {
    margin-top: 1px;
    margin-bottom: -1px;
    margin-left: 1px;
}
.table-contianer .ba-table tbody tr td .ui.popup small:last-child, .table-container .ba-table tbody tr td .ui.popup small:last-child {
    display: none;
}
.table-contianer .ba-table tbody tr td > span,
.table-contianer .ba-table tbody tr td span.overhead,
.table-container .ba-table tbody tr td > span,
.table-container .ba-table tbody tr td span.overhead,
.overhead {
    text-overflow: ellipsis;
    max-width: 130px;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
    /*height: 14px;*/
}
.table-contianer .ba-table tbody tr td > span a,
.table-contianer .ba-table tbody tr td span.overhead a,
.table-container .ba-table tbody tr td > span a,
.table-container .ba-table tbody tr td span.overhead a {
    color: #2e2e2e;
    text-decoration: underline;
}
.table-contianer .ba-table tbody tr td > span a:hover,
.table-contianer .ba-table tbody tr td span.overhead a:hover,
.table-container .ba-table tbody tr td > span a:hover,
.table-container .ba-table tbody tr td span.overhead a:hover {
    text-decoration: none;
}
.table-contianer .ba-table tbody tr td > span small:last-child,
.table-contianer .ba-table tbody tr td span.overhead small:last-child,
.table-container .ba-table tbody tr td > span small:last-child,
.table-container .ba-table tbody tr td span.overhead small:last-child {
    display: none;
}
.table-contianer .ba-table tbody tr td > span.mini,
.table-contianer .ba-table tbody tr td span.overhead.mini,
.table-container .ba-table tbody tr td > span.mini,
.table-container .ba-table tbody tr td span.overhead.mini,
.overhead.mini {
    max-width: 125px;
}
.table-contianer .ba-table tbody tr td > span.mini.micro,
.table-contianer .ba-table tbody tr td span.overhead.mini.micro,
.table-container .ba-table tbody tr td > span.mini.micro,
.table-container .ba-table tbody tr td span.overhead.mini.micro,
.overhead.mini.micro {
    max-width: 70px;
}
.table-contianer .ba-table tbody tr td > span.large,
.table-contianer .ba-table tbody tr td span.overhead.large,
.table-container .ba-table tbody tr td > span.large,
.table-container .ba-table tbody tr td span.overhead.large,
.overhead.large {
    max-width: 250px;
}
.table-contianer .ba-table tbody tr td .ui.floating.dropdown .menu,
.table-container .ba-table tbody tr td .ui.floating.dropdown .menu {
    left: auto;
    right: 0;
    z-index: 999;
}
.table-contianer .ba-table tbody tr:last-child td:first-child, .table-contianer .ba-table tbody tr:last-child th:first-child, .table-container .ba-table tbody tr:last-child td:first-child, .table-container .ba-table tbody tr:last-child th:first-child {
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-bottom-left-radius: 6px;
    -ms-border-bottom-left-radius: 6px;
    -o-border-bottom-left-radius: 6px;
}
.table-contianer .ba-table tbody tr:last-child td:last-child, .table-contianer .ba-table tbody tr:last-child th:last-child, .table-container .ba-table tbody tr:last-child td:last-child, .table-container .ba-table tbody tr:last-child th:last-child {
    -webkit-border-bottom-right-radius: 6px;
    -moz-border-bottom-right-radius: 6px;
    -ms-border-bottom-right-radius: 6px;
    -o-border-bottom-right-radius: 6px;
}
.table-contianer .ba-table tbody > tr:hover, .table-container .ba-table tbody > tr:hover {
    background: #f8f8f8 !important;
}
.table-contianer .ba-table tbody tr.depart td, .table-container .ba-table tbody tr.depart td {
    background: #666 !important;
    padding: 0 10px !important;
    color: #fff;
}
@media only screen and (max-width:480px) {
    .table-contianer .ba-table:not(.no-responsive) tbody tr.depart, .table-container .ba-table:not(.no-responsive) tbody tr.depart {
        height: 27px;
    }
    table .overhead {
        width: 100% !important;
        max-width: 100% !important;
    }
}
.table-contianer .ba-table:not(.no-responsive) tbody tr.depart:hover *, .table-container .ba-table:not(.no-responsive) tbody tr.depart:hover * {
    color: white;
}
.table-contianer .pagination, .table-container .pagination {
    float: right;
}
.pagination {
    float: right;
    margin: 0 0 0 0;
}
.pagination ul li {
    margin-left: 5px;
    float: left;
}
.pagination ul li span, .pagination ul li a {
    background: #5e5e5e;
    -webkit-border-radius: 3px !important;
    -moz-border-radius: 3px !important;
    -ms-border-radius: 3px !important;
    -o-border-radius: 3px !important;
    border-radius: 3px !important;
    display: block;
    margin: 0 !important;
    padding: 5px 8px !important;
    text-align: center;
    color: #fff !important;
}
.pagination ul li span.current, .pagination ul li a.current {
    background: #1678c2 !important;
}
.pagination ul li span:hover, .pagination ul li a:hover {
    background: #373737;
}
.pagination ul li.disabled a {
    color: #999999 !important;
}
.table-container .dataTables_wrapper .dataTables_paginate {
    float: right;
    margin: 0 0 0 0;
}
.table-container .dataTables_wrapper .dataTables_paginate a.paginate_button {
    background: #ffffff;
    -webkit-border-radius: 3px !important;
    -moz-border-radius: 3px !important;
    -ms-border-radius: 3px !important;
    -o-border-radius: 3px !important;
    border-radius: 3px !important;
    margin: 0 !important;
    margin-left: 5px !important;
    float: left;
    padding: 5px 8px !important;
    text-align: center;
    color: rgb(0, 0, 0) !important;
    border: 0 !important;
    line-height: 20px !important;
}
.table-container .dataTables_wrapper .dataTables_paginate a.paginate_button.current {
    background: #1678c2 !important;
    border: 0 !important;
}
.table-container .dataTables_wrapper .dataTables_paginate a.paginate_button.current:hover {
    color: #fff !important;
}
.table-container .dataTables_wrapper .dataTables_paginate a.paginate_button:hover {
    background: #373737;
}
.table-container .dataTables_wrapper .dataTables_paginate a.paginate_button.disabled {
    color: #999999 !important;
    background-color: #eeeeee !important;
}
.table-container .dataTables_wrapper .dataTables_paginate .ellipsis {
    display: none !important;
}
table.table {
    background-color: #fff;
}
table.table th {
    height: 30px;
    vertical-align: middle;
    border-bottom: 1px solid #7c7c7c;
    background: #444444 !important;
    color: #fff;
}
table.table th a {
    color: #fff;
}
table.table tbody > tr:hover {
    background: #f1f1f1 !important;
}
table.table tbody tr td {
    height: 28px;
    vertical-align: middle;
}
table.table tbody tr:nth-child(odd) {
    background: #fff;
}
table.table tbody tr:nth-child(odd) td {
    background: none;
}
table.table tbody tr:nth-child(even) {
    background: #f0f0f0 !important;
}
.dataTables_filter {
    float: right;
}

/* This class is to make table responsive which have checkbox in first column */
table.ba-table.responsiveFirstColumn tbody tr:not(.depart):not(.open) {
    padding-left: 30px !important;
}
@media only screen and (max-width:980px) {
    table.ba-table.responsiveFirstColumn tbody tr:not(.depart):not(.open) td:first-child {
        position: absolute !important;
        left: 0 !important;
        width: 32px !important;
        padding: 9px 0px 0 9px !important;
        height: 45px !important;

    }
    
    

        table.ba-table tbody tr:not(.open) td[data-responsive-hide-title="hide"]:before {
            display: none !important;
        }
        table.ba-table tbody tr:not(.open) td[data-responsive-hide-title="hide"] {
            margin-top: 7px;
        }
}
table.ba-table.responsiveFirstColumn tbody tr:not(.depart).open span.tr-button {
    top: -43px !important;
}
@media only screen and (max-width:980px) {
    table.ba-table.responsiveFirstColumn tbody tr:not(.depart).open td:first-child {
        margin-top: 0;
        height: 43px !important;
    }
}
@media only screen and (min-width:981px) {
    table.ba-table tbody tr td.tdhead {
        background: #666 !important;
        color: #fff;
    }
}
@media only screen and (max-width:980px) and (min-width:480px) {
    .table-contianer tbody td, .table-container tbody td {
        display: flex;
        align-items: center;
    }
}
@media only screen and (max-width:980px) {
    a[id$='_toggle_filter'] {
        display: none !important;
    }
    .ba-table thead[class$='_filters'] {
        display: none !important;
    }
    .hide-responsive-all {
        display: none !important;
    }
    .ui.container {
        margin: 0 !important;
    }
    .ui.grid {
        margin: 0;
    }
    .ui.grid .column {
        /*padding: 0 !important;*/
        margin-bottom: 10px;
        margin-top: 0 !important;
    }
    .ui.labeled.icon.button, .ui.labeled.icon.buttons .button {
        padding-left: 46px !important;
        padding-right: 20px !important;
    }
    .table-contianer, .table-container {
        margin-top: 0 !important;
    }
    .table-contianer .ba-table:not(.no-responsive), .table-container .ba-table:not(.no-responsive) {
        background: none !important;
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important;
        float: left;
        width: 100%;
        display: inline;
    }
    .table-contianer .ba-table:not(.no-responsive) thead, .table-container .ba-table:not(.no-responsive) thead {
        display: none;
    }
    .table-contianer .ba-table:not(.no-responsive) tbody, .table-container .ba-table:not(.no-responsive) tbody {
        background: none !important;
        float: left;
        width: 100%;
    }
    .table-contianer .ba-table:not(.no-responsive) tbody tr, .table-container .ba-table:not(.no-responsive) tbody tr {
        position: relative;
        float: left;
        width: 100%;
        margin-bottom: 15px;
        background: #fff;
        height: 37px;
        overflow: hidden;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -ms-border-radius: 6px;
        -o-border-radius: 6px;
        border-radius: 6px;
        -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
        -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
    }
    .table-contianer .ba-table:not(.no-responsive) tbody tr:not(.open) td, .table-container .ba-table:not(.no-responsive) tbody tr:not(.open) td {
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .table-contianer .ba-table:not(.no-responsive) tbody tr td, .table-container .ba-table:not(.no-responsive) tbody tr td {
        float: left;
        border: 0 !important;
        border-bottom: 1px solid #ccc !important;
        min-height: 43px !important;
        /* height: 43px !important; */
        width: 100% !important;
        text-align: left;
        position: relative;
        line-height: 12px;
        vertical-align: middle;
        padding: 0 32px 0 40% !important;
        white-space: normal;
    }
    .table-contianer .ba-table:not(.no-responsive) tbody tr td > span, .table-container .ba-table:not(.no-responsive) tbody tr td > span {
        max-width: 90% !important;
        /*height: 22px;*/
    }
    .table-contianer .ba-table:not(.no-responsive) tbody tr td .button, .table-container .ba-table:not(.no-responsive) tbody tr td .button {
        padding: 9px;
    }
    .table-contianer .ba-table:not(.no-responsive) tbody tr td:first-child i.icon:not(.large):not(.mini), .table-container .ba-table:not(.no-responsive) tbody tr td:first-child i.icon:not(.large):not(.mini) {
        float: left;
        clear: both;
        font-size: 20px;
        margin-right: -10px !important;
        font-size: 13px;
    }
    .table-contianer .ba-table:not(.no-responsive) tbody tr td:before, .table-container .ba-table:not(.no-responsive) tbody tr td:before {
        content: attr(data-title);
        position: absolute;
        left: 10px;
        top: 0;
        height: 37px;
        line-height: 12px;
        font-weight: bold;
        font-size: 12px;
        width: 30%;
        display: flex;
        align-items: center;
    }
    .table-contianer .ba-table:not(.no-responsive) tbody tr:hover, .table-container .ba-table:not(.no-responsive) tbody tr:hover {
        background: #fff;
    }
    .table-contianer .ba-table:not(.no-responsive) tbody tr:hover td:last-child > .ui.button, .table-container .ba-table:not(.no-responsive) tbody tr:hover td:last-child > .ui.button {
    }
    .table-contianer .ba-table:not(.no-responsive) tbody tr:hover td:last-child > .ui.button i.icon:before, .table-container .ba-table:not(.no-responsive) tbody tr:hover td:last-child > .ui.button i.icon:before {
        color: #fff;
    }
    .table-contianer .ba-table:not(.no-responsive) tbody tr span.tr-button, .table-container .ba-table:not(.no-responsive) tbody tr span.tr-button {
        display: block;
        float: left;
        position: absolute;
        width: 30px;
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        top: 0px;
        right: 0px;
        cursor: pointer;
        z-index: 99;
        height: 100%;
        -webkit-border-top-right-radius: 6px;
        -moz-border-top-right-radius: 6px;
        -ms-border-top-right-radius: 6px;
        -o-border-top-right-radius: 6px;
        -webkit-border-bottom-right-radius: 6px;
        -moz-border-bottom-right-radius: 6px;
        -ms-border-bottom-right-radius: 6px;
        -o-border-bottom-right-radius: 6px;
    }
    .table-contianer .ba-table:not(.no-responsive) tbody tr span.tr-button.open, .table-container .ba-table:not(.no-responsive) tbody tr span.tr-button.open {
        -webkit-border-bottom-right-radius: 0;
        -moz-border-bottom-right-radius: 0;
        -ms-border-bottom-right-radius: 0;
        -o-border-bottom-right-radius: 0;
    }
    .table-contianer .ba-table:not(.no-responsive) tbody tr span.tr-button.open:after, .table-container .ba-table:not(.no-responsive) tbody tr span.tr-button.open:after {
        content: "-" !important;
    }
    .table-contianer .ba-table:not(.no-responsive) tbody tr span.tr-button:after, .table-container .ba-table:not(.no-responsive) tbody tr span.tr-button:after {
        content: "+";
        font-size: 18px;
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        text-align: center;
        line-height: 35px;
        font-weight: bold;
    }
    .table-contianer .ba-table:not(.no-responsive) tbody tr.open, .table-container .ba-table:not(.no-responsive) tbody tr.open {
        height: inherit !important;
        overflow: visible;
        background: #fff;
        -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
        -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
    }
    #pagination-table {
        float: left;
        width: 100%;
    }
}
@media only screen and (min-width:481px) {
    .table-contianer .ba-table:not(.no-responsive).responsiveFirstColumn tbody tr:not(.depart):not(.open) td:first-child, .table-container .ba-table:not(.no-responsive).responsiveFirstColumn tbody tr:not(.depart):not(.open) td:first-child {
        margin-top: -7px !important;
    }
}
@media only screen and (max-width:480px) {
    .hide-responsive-mobile {
        display: none;
    }
    .table-contianer .ba-table:not(.no-responsive) tbody tr, .table-container .ba-table:not(.no-responsive) tbody tr {
        height: 44px;
    }
    .table-contianer .ba-table:not(.no-responsive) tbody tr td.text-center, .table-container .ba-table:not(.no-responsive) tbody tr td.text-center {
        text-align: left !important;
    }
    .table-contianer .ba-table:not(.no-responsive) tbody tr td, .table-container .ba-table:not(.no-responsive) tbody tr td {
        height: auto !important;
        min-height: auto !important;
        padding: 5px 32px 8px 10px !important
    }
    .table-contianer .ba-table:not(.no-responsive) tbody tr td:first-child span, .table-container .ba-table:not(.no-responsive) tbody tr td:first-child span {
        float: left;
    }
    .table-contianer .ba-table:not(.no-responsive) tbody tr td span.tr-button:after, .table-container .ba-table:not(.no-responsive) tbody tr td span.tr-button:after {
        line-height: 50px;
    }
    .table-contianer .ba-table:not(.no-responsive) tbody tr td:before, .table-container .ba-table:not(.no-responsive) tbody tr td:before {
        clear: both;
        width: 100%;
        display: block;
        float: none;
        position: static;
        height: auto;
        line-height: normal;
    }
    .table-contianer .ba-table:not(.no-responsive) tbody tr td .ui.floating.dropdown .menu, .table-container .ba-table:not(.no-responsive) tbody tr td .ui.floating.dropdown .menu {
        left: 0;
        right: auto;
    }
}
@media only screen and (max-width:768px) {
    #pagination-table > .column {
        text-align: center;
    }
    #pagination-table > .column .pagination {
        float: none !important;
    }
    .dataTables_wrapper .span6 {
        width: 100%;
        text-align: center;
    }
    .dataTables_wrapper .span6 .dataTables_paginate, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .span6 .right.floated, .dataTables_filter > label {
        float: none;
        margin: 5px auto;
    }
    .dataTables_wrapper {
        width: 100%;
        text-align: center;
    }
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_paginate,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_filter > label,
    .dataTables_wrapper .right.floated {
        float: none !important;
        width: 100% !important;
        text-align: center !important;
    }
    .dataTables_wrapper .dataTables_filter {
        margin-bottom: 20px;
    }
    /*.dataTables_wrapper .dataTables_paginate:before,
    .dataTables_wrapper .dataTables_paginate:after {
        content: " ";
        display: table;
    }
    .dataTables_wrapper .dataTables_paginate:after {
        clear: both;
    }*/
    .table-container .dataTables_wrapper .dataTables_paginate {
        margin-top: 10px !important;
    }
    .dataTables_wrapper .dataTables_paginate a {
        float: none !important;
    }
    .dataTables_wrapper .dataTables_info {
        clear: both;
        float: none;
        display: block;
    }
    
    #side_navigation{
        display: none !important;
    }
    #mainContainer.open_nav_active > .ui.container {
        transform: none !important;
    }
    #mainContainer.open_nav_active > #side_navigation.open_nav{
        display: block !important;
    }
    .right_segment {
        width: 90% !important;
        float: none;
        display: block;
        margin:0 auto;
    }
}

.dataTables_wrapper .dataTables_info {
    text-align: center !important;
    float: none !important;
    margin-bottom: 15px !important;
}
@media only screen and (max-width:420px) {
    .clearfix .ui.item {
        text-align: center;
    }
    .clearfix .ui.item a {
        margin: 5px auto;
        float: none !important;
    } 
}
.table-container {
    width: 100%;
    /*overflow-x: auto;*/
    /*overflow-y: hidden;*/
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}

@media (max-width: 768px) {
    .right.floated, .right.floated .button, .left.floated, .left.floated .button {
        float: none !important;
        text-align: center;
    }
}

#loader {
    z-index: 1003 !important;
}
/*.ui.sidebar.menuActive {
    z-index: 999;
}*/
footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 998;
}
footer .ui.container {
    margin: 1em;
    align-items: center !important;
    justify-content: flex-end;
}
footer .ui.container span {
    float: left;
    padding-right: 10px;
}
#mainContainer > .ui.container {
    margin-bottom: 0px;
    padding-bottom: 0px !important;
    max-width: 100%;
    width: 85% !important;
}
body:before {
    /* background: #ccc url(../images/BG_CRYSCAMPUS.png) center no-repeat !important; */
    background-color: #fff !important;
    background-size: cover !important;
}
#loginForm #mainLogo {
    float: none;
    border-radius: 0.28571429rem 0.28571429rem 0 0;
}
.table-container table .ui.checkbox{
    display: block !important;
    margin:0 auto !important;
    max-width: 20px !important; 
}

/* adding hight for multiselect Dropdown list */
.ms-drop ul > li label {
    height: 20px;
}

.text_overflow{
    text-overflow: ellipsis;
    max-width: 95%;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}

.ui.comments{
    max-width: 100% !important;
}
.left_comment{
    clear: both;
    max-width: 70% !important;
    min-width: 30% !important;
    background-color: #f5e9e9!important;
    padding-top: 5px !important;
    padding-right: 10px !important;
    padding-bottom: 5px !important;
    padding-left: 10px !important;
    text-align: justify;
    float: left !important;
    margin-bottom: 8px !important;
    color: #333 !important;
    border-radius: 7px;
    box-shadow: 0 3px 9px 0 rgba(54, 56, 62, 0.48);
}
.right_comment{
    clear: both;
    max-width: 70% !important;
    min-width: 30% !important;
    background-color: #daf7c1 !important;
    padding-top: 5px !important;
    padding-right: 10px !important;
    padding-bottom: 5px !important;
    padding-left: 10px !important;
    text-align: justify;
    float: right !important;
    margin-bottom: 8px !important;
    color: #333 !important;
    border-radius: 7px;
    box-shadow: 0 3px 9px 0 rgba(54, 56, 62, 0.48);
}
.ui.comments .comment .text{
    color: #333 !important;
    padding-top: 5px !important;
    font-size: 12px !important;
}

.ui.comments .comment .author{
    color: #615454 !important;
    color: #333 !important;
    font-size: 15px !important;
}
#comment_textarea{
    margin-top: 25px !important;
}

small {
    margin: 0;
    padding: 0;
    line-height: 10px;
    display: block;
    text-transform: uppercase;
    font-size: 10px;
}
.small-text {
    font-size: 12px;
    padding: 0;
    margin: 0;
    line-height: 15px;
}
.large-heading {
    font-size: 22px;
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 0; 
    padding-bottom: 0;
}
div#topNavBar{
    border-radius: 0px !important;
    height: max-content;
}


/* Listview table css*/

.right_segment{
    border-radius: 0px !important;
    width: 100%;
    margin:0 auto;
    margin-top: 90px !important;
}
.right_segment h1{
    font-size: 25px;
    color: #333;
}
.right_segment .ui.header {
    clear:both;
    float: left;
    width: 100%;
    margin-top: 0 !important;
}
table.list_viewTable tbody tr td {
    padding:3px 7px !important;
}
table.list_viewTable thead tr th {
    /*padding: 0px 10px;*/
}
table.list_viewTable{
    border: none !important;    
    border-spacing: 0px 0px !important;
    border-collapse: separate !important;   
    width: 100% !important;   
    box-shadow: none !important;
    border-radius: 0px !important; 
}
table.list_viewTable label{
    font-size: 13px;
    color: #898a94 !important;
}
table.list_viewTable small{
    font-size: 11px !important;
}
table.list_viewTable tbody tr{
    background-color: #fff !important;
}
table.list_viewTable tbody tr:nth-child(even){
    background-color: #fff !important;
}
table.list_viewTable{
    background-color: transparent !important;
    margin-top: 5px !important;
}
table.list_viewTable tr td{
    padding-top: 7px !important;
    padding-bottom: 7px !important;
}
table.list_viewTable thead tr th{
    color: #fff !important;
    border: none;
    border-radius: 0px !important;
    text-align: left;
    font-size: 14px !important;
    border-color: #fff !important;
    font-weight: bold;
}
.table-container table[id].list_viewTable thead.filters-head {
    background: #ccc;
}

/* Action Dots Css */
.action_btn_dots {
    width: 26px !important;
    height: 26px !important;
    display: block !important;
    margin: 0 auto !important;
    border-radius: 130px !important;
}
.action_btn_dots:hover {
    background: #eee !important;
}

.dot, .dot:before, .dot:after {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 20px;
  background-color: #34495e;
}

.dot {
    left: 50%;
    top: 50%;
    margin-left: -1px;
    margin-top: -7px;
}

.dot:before, .dot:after {
  content: "";
}

.dot:before {
  top: 6px;
}

.dot:after {
  top: 12px;
}
.action_btn_dots{
    margin-bottom: 11px;
    background: none !important;
}
#mainSystemLogo {
    padding: 12px;
    height: 48px;
    width: 186px;
    border-right: 1px solid rgba(34, 36, 38, 0.1);
    color: #0c4da2;
    font-weight: bold;
}

.website_data_text,
.no_sentencecase,
div.trumbowyg-editor, div.trumbowyg-editor *,
td[data-title="Short Code"],td[data-title="short code"], td[data-title="Short code"], td[data-title="short Code"], 
td[data-title="shortcode"], td[data-title="ShortCode"], td[data-title="Shortcode"], td[data-title="shortCode"],
td[data-title="Email"], td[data-title="email"], td[data-title="Email Address"], td[data-title="email address"],
td[data-title="Account Id"], td[data-title="account id"], td[data-title="Account Name"], td[data-title="account name"],
td[data-title="Billing Rate"], td[data-title="billing rate"], td[data-title="Gateway Name"], td[data-title="gateway name"], 
td[data-title="Rate Group Name"], td[data-title="rate group name"], td[data-title="Alert Email"], td[data-title="alert email"],
td[data-title="Support Email"], td[data-title="Finance Email"],
td[data-title="Brand Email"], td[data-title="brand email"],
td[data-title="Client Email"], td[data-title="client email"],
td[data-title="Sales Person Email"], td[data-title="sales person email"],
td[data-title="Ref. No"], td[data-title="ref. no"],
td[data-title="Url"], td[data-title="url"] {
    text-transform: none !important;
}
/* #pageTitle,
.sentencecase,
body *:not(input):not(select):not(textarea) {
    text-transform: capitalize !important;
} */
#pageListTitle {
    padding-left:10px; 
    font-size: 12px; 
    display: inline;
    color: #777;
}



.table-container table[id].list_viewTable tbody > tr:last-child td:first-child,
.table-container table[id].list_viewTable tbody > tr:last-child td:last-child {
    border-radius: 0 !important;

}

.table-contianer table[id].list_viewTable,
.table-container table[id].list_viewTable {
    box-shadow: none !important;
    border-radius: 0 !important;
}
.table_overlaping {
    width: 100%;
    overflow: auto;
    margin-bottom: 8px;
}
.list_viewTable_container {
    clear: both;
}
.list_viewTable_container #dynamicTable tr th{
    line-height: 15px !important;
    font-size: 12px !important;
    white-space: nowrap;
}

.list_viewTable_container  span[id$="_input_field_cont"] {
    margin-top: 0 !important;
}
span[id$="_input_field_cont"] {
    left: auto !important;
    right: 0;
    width: auto !important;
    /* max-width: 300px; */
}
span[id$="_input_field_cont"] input[id$="_search_field"] {
    height: 28px !important;
}
.list_viewTable_container  .dataTables_filter,
.list_viewTable_container  .dataTables_length {
    margin:15px 0 15px 0 !important;
    height: 0 !important;
    overflow: hidden;
}

.list_viewTable_container  .dataTables_filter.active,
.list_viewTable_container  .dataTables_length.active {
    height: 35px !important;
}

.list_viewTable_container  .dataTables_filter a.ui.button {
    margin-top: 0 !important;
}
.table-container table[id].list_viewTable thead tr th, 
.table-container table[id].list_viewTable thead tr td {
    /*padding: 0 6px !important;*/
    /*line-height:6px !important;*/
}
.table-container table[id].list_viewTable thead.filters-head tr th {
    padding: 6px !important;
}

.table-container table[id].list_viewTable thead.filters-head tr th .ui.icon.input{
    position: relative;
}
.table-container table[id].list_viewTable thead.filters-head tr th .ui.icon.input .ui.loader{
    left: -17px !important;
    top: 11px;
}

.table-container .tableOuterOverlap ~ .dataTables_paginate,
.table-container table[id].list_viewTable ~ .dataTables_paginate {
    float: none !important;
    margin:0 auto !important;
    display: block !important;
    text-align: center; 

}
.table-container table[id].list_viewTable ~ .dataTables_paginate a,
.table-container .tableOuterOverlap ~ .dataTables_paginate a,
.table-container .tableOuterOverlap ~ .dataTables_paginate span,
.table-container table[id].list_viewTable ~ .dataTables_paginate span {
    float: none !important;
}
.table-container .tableOuterOverlap ~ .dataTables_paginate a.paginate_button:not(.previous):not(.next),
.table-container table[id].list_viewTable ~ .dataTables_paginate a.paginate_button:not(.previous):not(.next) {
    border-radius: 100px !important;
    cursor: pointer !important;
}
.table-container table[id].list_viewTable ~ .dataTables_paginate a.previous,
.table-container .tableOuterOverlap ~ .dataTables_paginate a.previous,
.table-container .tableOuterOverlap ~ .dataTables_paginate a.next,
.table-container table[id].list_viewTable ~ .dataTables_paginate a.next {
    background: #fff !important;
    color:#555 !important;
    cursor: pointer !important;
}

#my_table_paginate a{
    cursor: pointer !important;
}

#select_module_row .ui.card {
    width: auto !important;
    text-align: center !important;
    color: #fff;
    padding: 60px 0;
    text-transform: uppercase;
    font-size: 22px;
    cursor: pointer;
    border-radius: 0px !important;
}
.ui.card.card_styling_1:hover, .ui.card.card_styling_2:hover, .ui.card.card_styling_3:hover{
    opacity: 0.8;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.ui.card.card_styling_1{
    background-color: #f15c27;
}
.ui.card.card_styling_2{
    background-color: #0c4da2;
}
.ui.card.card_styling_3{
    background-color: #00c292;
}
div#related_data{
    margin-top: 20px; 
    display: none; 
}
div#related_data #go_back{
    color: #21ba45 !important;
    font-size: 30px !important;
}

#page_breadcrums {
    float: left;
    clear: both;
    width: 100%;
    margin-bottom:  0px;
    font-size:11px; 
}
#page_breadcrums li {
    float: left;
    color: #1e70bf;
    position: relative;
    margin-right: 20px;
    margin-bottom: 10px;
}
#page_breadcrums li:after {
    content: ">";
    right: -20px;
    top:0;
    position: absolute;
    padding:0 8px
}
#page_breadcrums li:last-child:after {
    display: none;
}

#page_breadcrums li:not(.breadCrum-nolink):hover:before {
    content: "";
    height: 1px;
    display: block;
    width: 100%;
    background: #1e70bf;
    position: absolute;
    top: 100%;
}
#page_breadcrums li:last-child.breadCrum-nolink a{
    color:#555;
    /*cursor: pointer;*/
    font-weight: bold;
}


.page_header {
    float: left;
    width: 100%;
    margin-bottom: 0px;
    clear: both;
}

.page_header h1 {
    float: left;
    margin-bottom: 0;
}
.page_header .ui.button{
    float:right;
    margin-right: 0;
    margin-left: 4px;
    cursor: pointer;
}

/*#tableApp {
    margin-top: 110px !important;
    text-align: center !important;
}
#tableApp strong{
    color: #8a8080 !important;
    font-size: 40px !important;
}
#tableApp span{
    color: #8a8080 !important;
    font-size: 20px !important;
}*/

.tableApp table td .ui.circular.icon.button ,
#tableApp table td .ui.circular.icon.button {
    padding: 6px !important;
}

.tableApp table td .ui.circular.icon.button i.icon ,
#tableApp table td .ui.circular.icon.button i.icon {
    font-size: inherit !important;
}

#dynamicTableModal_ListTag {
    flex-wrap:wrap;
    display: flex;
    margin: 20px 0 0 0;
    padding: 0;
    list-style: none;
}
#dynamicTableModal_ListTag li {
    margin-bottom: 10px !important;
}
#dynamicTableModal_ListTag li > span,
#dynamicTableModal_ListTag li a {
    color: #fff !important;
    display: block;
    padding: 4px 8px;
    background: #1ca21c;
    border-radius: 5px !important;
    border-collapse: collapse;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    margin-right: 5px !important;
    font-size: 12px;
}
#dynamicTableModal_ListTag li a {
    cursor: pointer;
}
#dynamicTableModal_ListTag li:hover a {
    box-shadow: 0 0 8px rgba(0,0,0,0.6);
}

/* ------------------ Checkbox css ------------------ */

.fancy_checkbox {
    position: relative;
    margin-right: 4px !important;
    display: inline-block;
    min-height: 24px !important;
}
.fancy_checkbox input{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 99;
    cursor: pointer;

}
.fancy_checkbox label{
    display: block;
    margin:0; 
}
.fancy_checkbox.disabled:hover input{
    cursor: not-allowed;
}
.fancy_checkbox.disabled .checkbox_style{
    opacity: 0.3;
}
.fancy_checkbox.disabled:after {
    content: "";
    background: red;
    width: 100%;
    height: 100%;
    position:absolute;
    left: 0;
    top: 0;
    opacity: 0;
}
 
.fancy_checkbox .checkbox_label{
    font-size: 12px !important;
    display: inline-block;
    cursor: pointer;
    position: relative;
    white-space: nowrap;
}

.fancy_checkbox .checkbox_label .checkbox_style {
    display: inline-block;
    position: relative;
    background-color: transparent;
    width: 20px;
    height: 20px;
    transform-origin: center;
    border: 2px solid #1790b5;
    border-radius: 50%;
    vertical-align: -6px;
    margin-right: 4px;
    transition: background-color 150ms 200ms, transform 350ms cubic-bezier(0.78, -1.22, 0.17, 1.89);
}

.fancy_checkbox .checkbox_label .checkbox_style:before {
    content: "";
    width: 0px;
    height: 2px;
    border-radius: 2px;
    background: #1790b5;
    position: absolute;
    transform: rotate(45deg);
    top: 8px;
    left: 4px;
    transition: width 50ms ease 50ms;
    transform-origin: 0% 0%;
}

.fancy_checkbox .checkbox_label .checkbox_style:after {
    content: "";
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: #1790b5;
    position: absolute;
    transform: rotate(305deg);
    top: 12px;
    left: 6px;
    transition: width 50ms ease;
    transform-origin: 0% 0%;
}

.fancy_checkbox:hover:not(.disabled) .checkbox_style:before,
.fancy_checkbox:not(.disabled) .checkbox_label:hover .checkbox_style:before {
    width: 5px;
    transition: width 100ms ease;
}

.fancy_checkbox:hover:not(.disabled) .checkbox_style:after,
.fancy_checkbox:not(.disabled) .checkbox_label:hover .checkbox_style:after {
    width: 10px;
    transition: width 150ms ease 100ms;
}

.fancy_checkbox:not(.disabled) input[type="radio"]:not(.toggle_checbox) ,
.fancy_checkbox:not(.disabled) input[type="checkbox"]:not(.toggle_checbox) {
    opacity: 0;
}

.fancy_checkbox input[type="radio"]:checked + .checkbox_style ,
.fancy_checkbox input[type="checkbox"]:checked + .checkbox_style {
    background-color: #1790b5;
    transform: scale(1.15);
}

.fancy_checkbox input[type="radio"]:checked + .checkbox_style:after ,
.fancy_checkbox input[type="checkbox"]:checked + .checkbox_style:after {
    width: 10px;
    background: #fff;
    transition: width 150ms ease 100ms;
}

.fancy_checkbox input[type="radio"]:checked + .checkbox_style:before ,
.fancy_checkbox input[type="checkbox"]:checked + .checkbox_style:before {
    width: 5px;
    background: #fff;
    transition: width 150ms ease 100ms;
}

.fancy_checkbox:hover input[type="radio"]:checked + .checkbox_label .checkbox_style ,
.fancy_checkbox:hover input[type="checkbox"]:checked + .checkbox_label .checkbox_style {
    background-color: #1790b5;
    transform: scale(1.15);
}
.checkbox_label.checkbox .checkbox_style{
    border-radius: 4px !important;

}



table#dataTableView tr,
table#dataTableView th,
table#dataTableView td,
table#dataTableView thead,
table#dataTableView tbody{
    border-radius: 0px !important;
}



/* ----------------- Media Queries ----------------- */

#logo_container_span{
    font-size: 18px !important;
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
}

@media screen and (min-width: 200px) and (max-width: 425px){
    #logo_container_span{
        font-size: 16px !important;
        margin-left: 0px !important;
    }
}

@media screen and (min-width: 768px) {
    #loginForm {
        max-width: 450px;
        vertical-align: middle;
        margin:50px auto 0; 
    }
    .ui.small.vertical.menu {
        width: 212px !important;
    }
/*    #mainContainer.menuActive {
        width: 100%;
        float: left;
    }
    .ui.sidebar.menuActive {
        left: 0 !important;
    }*/
}

@media screen and (max-width: 768px) {

    #dynamicTable_toggle_search{
        width: 8% !important;
    }
    #dynamicTable_datatable-search-ui{
        width: 100% !important;
    }
    #dynamicTable_input_field_cont{
        width: 100% !important;
    }
    #dynamicTable_length label select{
        width: 62% !important;
    }


    .page_header .selected_form{
        width: 100%;
        margin-bottom: 30px;
    }
    .page_header > h1{
        width: 100% !important;
        margin-bottom: 30px !important;
    }
    .page_header{
        text-align: center !important;
    }
    .ui.header{
        width: 100%;
        margin-bottom: 30px;
    }
     .ui.header > h1{
        text-align: center !important;
    }

    #mainContainer.responsiveMenu {
        width: 100%;
        float: left;
    }
    #mainContainer.responsiveMenu > .ui.menu {
        margin-left: 180px !important;
    }
    .ui.sidebar.responsiveMenu {
        left: 0 !important;
    }

    .ui.middle.attached.segment.no_border.segment_spacing{
        height: auto !important;
    }
    h1#mainTitle {
        font-size: 20px !important;
    }
    .right_segment .ui.header h1{
        text-align: left !important;
    }
    .right_segment h1#newHeading, .right_segment h1{
        margin-top: 0px !important;
    }
    #mainContainer.open_nav_active > .ui.container {
        transform: none !important;
    }
    #mainContainer.open_nav_active > .ui.container #newHeading {
        font-size: 15px !important;
    }
    #mainContainer.open_nav_active > #side_navigation.open_nav {
        width: 100% !important;
    }
    #mainContainer.open_nav_active > #side_navigation.open_nav li a span{
        font-size: 11px !important;
    }     
    #mainContainer.open_nav_active > #side_navigation a.item > i.icon{
        width: 30px !important;
        margin-right: 10px !important;
        padding-left: 8px !important;
        font-size: 14px !important;
    }   
    .ui.bottom.segment.attached.center.aligned.no_border{
        margin-bottom: 0px !important;
    } 

    .table-contianer .sa-table:not(.no-responsive) tbody tr, .table-container .sa-table:not(.no-responsive) tbody tr, 
    .table-contianer .sa-table:not(.no-responsive) tbody tr span.tr-button, .table-container .sa-table:not(.no-responsive) tbody tr span.tr-button {
        border-radius: 0px !important;
    }
    .table-contianer .sa-table:not(.no-responsive) tbody tr td:before, .table-container .sa-table:not(.no-responsive) tbody tr td:before{
        margin-bottom: 0px !important;
    }
    .table-contianer .sa-table:not(.no-responsive) tbody tr td span.tr-button:after, .table-container .sa-table:not(.no-responsive) tbody tr td span.tr-button:after{
        line-height: 44px !important;
    }
}

@media screen and (max-width: 980px) {
    .right_segment .ui.header h1 {
        text-align: left !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 980px){
    .right_segment {
        /*margin-left: 70px !important;*/
        width: 90%;
    }
    .ui.container {
        width: 100% !important;
    }
}

@media screen and (min-width: 980px) and (max-width: 1200px){
    .right_segment {
        /*margin-left: 30px !important;*/
    }
}


.ba-table.list_viewTable thead tr th.action_th_row {
    text-align: center !important;
}
td[data-title="Action"],th[aria-label*="Action"] {
    width: 5% !important;
}


/* Drill Down Table Css */

.tableApp table.list_viewTable thead tr th:first-child,
#tableApp table.list_viewTable thead tr th:first-child {
    min-width: 164px !important;
}

.tableApp table.list_viewTable thead tr th,
#tableApp table.list_viewTable thead tr th {
    background: #0c4da2; 

}

.tableApp table.list_viewTable tbody tr td table.list_viewTable thead tr th,
#tableApp table.list_viewTable tbody tr td table.list_viewTable thead tr th {
    background: #adadad; 
}
.tableApp table.list_viewTable tbody tr td table.list_viewTable tbody tr td table.list_viewTable thead tr th,
#tableApp table.list_viewTable tbody tr td table.list_viewTable tbody tr td table.list_viewTable thead tr th {
    background: #0c4da2 !important
}
.tableApp table.list_viewTable tbody tr.active_row,
#tableApp table.list_viewTable tbody tr.active_row {
    background: #dbefff !important
}
.tableApp table.list_viewTable tbody tr.active_row td,
#tableApp table.list_viewTable tbody tr.active_row td {
    font-weight: bold !important;

}


.tableApp table .campus_detail_row > td > div,
#tableApp table .campus_detail_row > td > div,
.tableApp table .program_detail_row > td > div,
#tableApp table .program_detail_row > td > div {
    padding: 10px;
    background: #fff;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.tableApp table .campus_detail_row > td > div,
#tableApp table .campus_detail_row > td > div {
    padding:10px; 
    min-height: 60px;
    position: relative;
}

.tableApp table tbody > tr > td.branch_status > div.ui.button,
#tableApp table tbody > tr > td.branch_status > div.ui.button {
    background: #3184f1;
    color: #fff;
    padding: 6px 12px;
}

.tableApp table tbody > tr.headoffice > td.branch_status > div.ui.button,
#tableApp table tbody > tr.headoffice > td.branch_status > div.ui.button {
    background: #DB2828;
}

.tableApp tr.sub_table_row > td,
#tableApp tr.sub_table_row > td {
    padding: 0 !important;
}
.tableApp div.sub_table_container,
#tableApp div.sub_table_container {
    margin-top: 0 !important;
    min-height: 60px;
    position: relative;
}
.tableApp div.sub_table_container .program_detail_btn,
#tableApp div.sub_table_container .program_detail_btn{ 
    display: none !important;
}
.tableApp div.sub_table_container .row_custom_link,
#tableApp div.sub_table_container .row_custom_link{ 
    float: none;
}






.action_btn_dots:hover {
    background: none !important;
}
.row_custom_link {
    float: left;    
    margin-right: 2px;
}

.row_custom_link span i.icon{
    cursor: pointer;
}
.row_custom_link .action_btn_dots {
    margin-top: 0px !important;
}

a.dynamicTableColumnModal {
    cursor: pointer;
    padding-left:12px !important; 
    padding-right:12px !important; 
}



.ui.toggle.checkbox.gender .box:hover:before,
.ui.toggle.checkbox.gender label:hover:before,
.ui.toggle.checkbox.gender input:focus ~ label:before,
.ui.toggle.checkbox.gender input:focus ~ .box:before,
.ui.toggle.checkbox.gender .box:before, 
.ui.toggle.checkbox.gender label:before {
    background: #e607df !important;
}

.ui.toggle.checkbox.gender input:checked ~ .box:before, 
.ui.toggle.checkbox.gender input:checked ~ label:before {
    background: #0d71bb !important;

}

.ui.toggle.checkbox.gender input:hover:checked ~ .box:before,
.ui.toggle.checkbox.gender input:focus:checked ~ .box:before, 
.ui.toggle.checkbox.gender input:hover:checked ~ label:before,
.ui.toggle.checkbox.gender input:focus:checked ~ label:before {
    background: #0d71bb !important;
}
#homework_id_modal {
    overflow: auto;
    height: 200px;
    display: block;
    border: 1px solid #ccc;
    padding: 10px;
}
#homework_id_modal ul,
#homework_id ul,
.modalFormSummary ul,
.trumbowyg-editor ul{
    list-style: inherit !important;
}
#homework_id_modal ol,
#homework_id ol,
.modalFormSummary ol,
.trumbowyg-editor ol{
    list-style: decimal;
}
#homework_id_modal ul li, #homework_id_modal ol li,
#homework_id ul li, #homework_id ol li,
.modalFormSummary ul li, .modalFormSummary ol li,
.trumbowyg-editor ul li, .trumbowyg-editor ol li {
    margin-left: 20px !important; 
}


/*=============================================================================================================*/
/*Left Navigation #side_nav*/
#mainContainer.menuActive > .ui.menu {
    position: relative;
    z-index: 9;
}
.image_white {
    filter: brightness(0) invert(1);
    color: #fff;
    font-size: 20px;
    padding-left: 7px;
    margin: 0;
    float: left;
    border-right: 1px solid rgba(255,255,255,0.3);
    padding: 0 10px;
    width: 44px;
    margin-right: 12px;
}
.fc-event.present {
    background-color: #198f35;
    border-color: #198f35;
}
.fc-event.absent {
    background-color: #b21e1e;
    border-color: #b21e1e;
}
#loader {
    position: fixed;
    z-index: 1001;
}
.ui.inverted.dimmer {
    background-color: rgba(255, 255, 255, 0.2);
}
.menuContainer.nav_submenu .content .menuContainer.nav_submenu:before {
    width: 0 !important;
}

.menuContainer.nav_submenu .content .menuContainer.nav_submenu .content {
    margin-left:35px !important;
}

.menuContainer.nav_submenu .content .menuContainer.nav_submenu .title {
    margin-left:35px !important;
    padding-left: 15px !important;
}
.menuContainer.nav_submenu .content a.item {
    margin-left:35px !important;
    padding-left: 15px !important;
}
.menuContainer.nav_submenu .content .menuContainer.nav_submenu .content a.item {
    margin-left:15px !important;
    padding-left: 15px !important;
}
.menuContainer.nav_submenu .content .menuContainer.nav_submenu .content a.item.sub {
    margin-left: 10px !important;
    padding-left: 10px !important;
}
.menuContainer .menuContainer > .title {
    padding-left: 8px !important;
}
.icon.left_icons { 
    margin-left: 0px !important;
    margin-top: 0px !important;
    font-size: 21px !important;
    width: 44px !important;
    height: 40px !important;
    text-align: center;
    padding: 0 !important;
}
.left_icons {
    margin-top: 5px !important;
    position: absolute;
    padding-left: 11px !important;
    color: #fff !important;
    left: -1px;
    padding-top: 0;
    line-height: 33px;
    width: 1.8em !important;
    text-align: center;
    font-size: 18px !important;
    top: 0;
    max-width: 100% !important;
    max-height: 100% !important;
}
.right_icons {
    color: #fff !important;
    position: absolute;
    right: 10px;
    top: 15px;
    transition: all 3s;
}
#side_nav.ui.left.sidebar.small.vertical.menu.menuNotActive  {
    background-color: #0c4da2 !important;
    margin-top: 50px !important;
    width: 44px !important;
    white-space: nowrap;
    overflow: hidden;
    left: 0px !important;
    top: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    visibility: visible;
    transition: all 0.3s;
    padding-bottom: 60px;
}
#side_nav.ui.left.sidebar.small.vertical.menu.menuActive{
    transition: all 0.3s;
    background-color: #0c4da2 !important;
    margin-top: 50px !important;
    width: 231px !important;
    white-space: nowrap;
    overflow: hidden;
    left: 0px !important;
    top: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
    visibility: visible;
    padding-bottom: 60px;
}
#side_nav.ui.left.sidebar.small.vertical.menu.menuNotActive .right_icons {
    right: -2000px;
    transition: all 3s;
}
.leftMenu .title {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    padding-right: 0px !important;
    position: relative;
    line-height: 36px;
}
.title, .content a, .title div{
    color: #fff !important;
}
.menuContainer > .title a {
    padding-left: 0px !important;
}
.menuContainer > .title {
    padding-left: 44px !important;
}
.menuContainer .sub_menu_content {
    margin-left: 30px !important;
}
.menuContainer .sub_menu_content a{
    margin-left: 30px !important;
}




@media only screen and (max-width:980px) {
    #side_nav.ui.left.sidebar.small.vertical.menu.menuNotActive  {
        left: -45px !important;
    }

    #mainContainer > .ui.container {
        width: 100% !important;
        max-width: 100% !important;
    }
}
/*=============================================================================================================*/






.blue_heading_style {
    background-color: #0c4da2 !important;
    color: #fff !important;
    border-radius: 0px !important;
}

/* multiSelect Dropdown Error Showing */
.error .ms-choice{
    background: #FFF6F6;
    border-color: #E0B4B4;
    color: #9F3A38;
    border-radius: '';
    box-shadow: none;
}


/*fms*/

.table_link_list{
    font-weight: bold !important;
    border-bottom: 1px solid black !important;
    font-size: 14px !important;
}

/* #overlay {
    position: fixed;
    visibility: hidden;
    opacity:0;
    width: 100%;
    height: 100%;
    top: 51px;
    left: 231px;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
    transition:visibility 0.3s linear,opacity 0.3s linear;
}

#mainContainer.open_nav_active #overlay {
    visibility: visible;
    opacity:1;
} */

@font-face {
    font-family: "Raleway";
    src: url("../font/Raleway.ttf");
}

#filterAccordion {
    width: 100%;
    transition: none !important;
}

.accordionTitle{
    background-color: #275694 !important;
    color: #ffffff !important;
    border-radius: 0px !important;
    padding: 10px !important;
}

#filterAccordion .ui.segment {
    border: none !important;
}

#filterAccordion .content {
    transition: none !important;
}

#context-msg {
    position: fixed;
    right: 10px;
    top: 55px;
    background-color: #2f96b4;
    z-index: 1;
}

#context-msg  .header {
    color: #ffffff;
}

.table-style-two .ba-table {
    /*border-collapse: collapse !important;*/
}
.table-style-two .ba-table thead:first-child {
    display: none;
}
.table-style-two .ba-table thead tr,
.table-style-two .ba-table tbody tr {

    display: flex;        
    box-shadow: 0 0 4px 0px rgba(0,0,0,0.3);
    /*border:1px solid #eee;*/
    border-radius: 3px;
    margin-bottom: 15px;
}
.table-style-two .ba-table thead tr th,
.table-style-two .ba-table tbody tr td, 
.table-style-two .ba-table tbody tr td {
    border:0 !important;
    padding:15px !important; 
    flex: 1;
    font-size: 13px !important;
}

.table-style-two .ba-table tbody tr td:not(td[data-title="Action"]), 
.table-style-two .ba-table tbody tr td:not(td[data-title="Action"]) {
    text-overflow: ellipsis;
    overflow: hidden;
    padding-right: 10px !important;
}
.table-style-two .ba-table td[data-title="Action"] .action_btn_dots {
    float: right !important;
}
.table-style-two .ba-table td[data-title="Action"]:before {
    display: none !important
}
.table-style-two .ba-table tbody tr td:before {
    content: attr(data-title);
    display: block;
    margin: 0;
    padding: 0;
    font-weight: bold;
    color: #4897fd;
    text-transform: uppercase;
    font-size: 9px !important;
    line-height: 7px;
}
.table-style-two  table.list_viewTable thead tr th {
    background: #2185d0 !important;
}
td[data-title="Status"] .label {
    font-size: 12px !important;
    padding: 7px 14px;
    margin: 4px 0 5px 0;
}
@media only screen and (max-width: 980px){
    #dynamicTable [data-tooltip="View"]:before {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: none;
        background: none !important;
        -webkit-transform: none !important;
        transform: none !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
    }
    #dynamicTable [data-tooltip="View"]:hover:before{
        -webkit-transform: none !important;
        transform: none !important;
    }
    #dynamicTable [data-position="bottom center"][data-tooltip="View"]:after {
        left: 42% !important;
        top: 65% !important;
    }
    .menu.transition.visible {
        z-index: 100 !important;
    }
}