/* 

Dashboard Template 
http://www.templatemo.com/preview/templatemo_415_dashboard

    1. CSS Imports
    2. General Styles
    3. Sidebar
    4. Charts
    5. Preferences form
    6. Sign in form
    7. tables.html
    8. Bootstrap overrides
    9. Maps
    10. Media Queries
	
--------------------------------------- */

/* 1. CSS Imports
--------------------------------------- */
@import url('https://fonts.googleapis.com/css?family=Open Sans:300,400,700');
@import url(font-awesome.min.css);
@import url(bootstrap.min.css);

/* 2. General Styles
--------------------------------------- */
* { font-family: 'Open Sans', sans-serif; }
body { background-color: rgb(235,235,235); }
h1 { font-size: 24px; }
.btn a {
    color: white;
    text-decoration: none;
}
.logo { display: inline-block; }
.logo h1 {
    font-size: 24px;
    margin: 10px 15px;
}
.templatemo-content-wrapper {
    float: left;
    width: 100%;
}
.templatemo-content {
    margin-left: 235px;
    margin-top: 0px;
    min-height: 600px;
    padding: 25px 20px 0 20px;
    background-color: white;
    overflow-x: hidden;
}
.templatemo-footer {
    clear: both;
    font-size: 13px;
    padding: 8px 0 5px 0;
    text-align: center;
    color: #ccc;
    background-color: #333;
}
.margin-bottom-15 { margin-bottom: 15px; }
.margin-bottom-30 { margin-bottom: 30px; }

.button-group .btn {
    margin: 0 5px;
}

.doc-upload-spacer{
    display: inline-block;
    width: 40px;
}

/* 3. Sidebar
------------------------------------------------------*/
#templatemo_search_box {
    width: 150px;
    display: inline-block;
}
.navbar {
    margin-bottom: 0;
    border-radius: 0;
}
.navbar-header { color: rgb(127,127,127);}
.templatemo-sidebar {
    padding: 0;
    margin-top: 20px;
}
.templatemo-sidebar .templatemo-sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}
.templatemo-sidebar .templatemo-sidebar-menu > li {
    display: block;
    margin: 0;
    padding: 0;
    border: 0px;
}
.templatemo-sidebar .templatemo-sidebar-menu > li > a {
    display: block;
    position: relative;
    margin: 0;
    border: 0px;
    padding: 20px 15px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 300;    
}

.templatemo-sidebar-menu a { color: black; }
.templatemo-sidebar-menu a:hover { text-decoration: none; }
.templatemo-sidebar-menu li.sub .templatemo-submenu { display: none; }
.templatemo-sidebar-menu li.sub.open .templatemo-submenu { display: block; }
.templatemo-submenu { padding-left: 0; }
.templatemo-submenu li {list-style: none;}
.templatemo-submenu li a {
    display: block;
    padding: 20px 15px;
    margin: 0;
}



.templatemo-sidebar-menu > li.sub.open > a {background-color: #EDDB00;}
.templatemo-sidebar .templatemo-sidebar-menu >li.active, .templatemo-sidebar .templatemo-sidebar-menu>li>a:hover { background-color: rgb(191, 232, 167);}
.templatemo-submenu li.active, .templatemo-submenu li > a:hover {background-color: #EDDB00;}
.templatemo-sidebar .templatemo-sidebar-menu > li > a > i {
    font-size: 16px;
    top: 2px;
    margin-top: 1px;
    margin-left: 1px;
    margin-right: 4px;
    display: inline-block;
    width: 1.25em;
    text-align: center;
}

.templatemo-submenu .submenu_link{
    
    padding-left: 25px;
}

.templatemo-submenu .submenu_link i {margin-right:  7px;}






/* 4. Charts 
--------------------------------------------*/
.templatemo-chart-box {
    display: inline-block;
    text-align: center;
    padding: 20px 30px 30px 0;
}

/* 5. Preferences Form
------------------------------------------*/
#templatemo-preferences-form {
    max-width: 960px;
    margin-bottom: 30px;
}

/* 6. Sign in Form 
--------------------------------------------*/
.templatemo-signin-form {
    max-width: 600px;
    margin: 0 auto;
}
.form-horizontal .form-group {
    margin-right: 0;
    margin-left: 0;
}

/* 7. tables.html
------------------------------------------*/
#templatemo_sort_btn { margin-bottom: 20px; }

.table-adaptive {
  table-layout: fixed;
}

@media screen and (max-width: 767px) {
  .table-adaptive {
    table-layout: auto !important;
  }
}

/* 8. Bootstrap overrides
----------------------------------------------*/
.nav-pills>li>a, .nav-tabs>li>a, .alert, .progress, .panel, .btn, .panel-group .panel, .form-control, .modal-content, .breadcrumb {
    border-radius: 0;
}
.list-group-item:first-child, .panel-heading {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.list-group-item:last-child {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.form-control-feedback { right: 15px; }

/* 9. Maps
------------------------------------------------------*/
.jqvmap-zoomin, .jqvmap-zoomout {
    width: 15px;
    height: 15px;
}
.vmap { height: 400px; }

/* 10. Media Queries
------------------------------------------------------*/
@media screen and (min-width: 992px) {
    .templatemo-sidebar {
        width: 235px;
        float: left;
        position: relative;
        margin-right: -100%;
    }

    .hide-lg-screen {
        display: none !important;
    }
}

@media screen and (max-width: 991px) {
    .navbar.mobile-only {
        display: block !important;

        padding: 0;
        margin-left: 0;
    }

    .navbar-form {
        padding: 0;
        margin-left: 0;
    }
    .navbar-header { float: none; }
    .navbar-toggle { display: block; }

    .hide-mobile {
        display: none !important;
    }

    .templatemo-sidebar {
        border-top: 0 !important;
        margin: 20px;
    }
    .templatemo-sidebar.navbar-collapse.collapse {
        display: none !important;
    }
    .templatemo-sidebar.navbar-collapse.in {
        border-top: 0 !important;
        margin: 20px;
        position: relative;
        overflow: hidden !important;
        overflow-y: auto !important;
        display: block !important;
    }
    .templatemo-content-wrapper { float: none; }
    .templatemo-content { margin: 0; }


    /*.button-group-sm .btn {*/
    /*    display: block; !* Makes the buttons take full width *!*/
    /*    width: 100%;    !* Ensures they span the full width *!*/
    /*    margin-bottom: 10px; !* Adds space between stacked buttons *!*/
    /*}*/

    .button-group{
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .custom-container {
        padding-left: 2px;
        padding-right: 2px;
        font-size: 1.3rem;
    }

    .custom-col{
        padding-left: 2px;
        padding-right: 2px;
        word-wrap: break-word;
        word-break: break-word;
    }

    .mobile-doc-btn {
        display: block;
        margin: 60px auto 0;
    }
    .mobile-doc-upload {
        float: none;
        text-align: center;
        width: 100%;
    }
    .doc-upload-spacer {
        display: none;
    }
}

}

@media screen and (max-width: 600px) {
    .button-group-sm .btn {
        display: block; /* Makes the buttons take full width */
        width: 100%;    /* Ensures they span the full width */
        margin-bottom: 10px; /* Adds space between stacked buttons */
    }

    .find-by input[type="text"],
    .find-by input[type="placeholder"] {
        position: relative;
        top: -3px;
        padding: 4px 6px;
        /*height: 30px;*/
        /*width: 20px;*/
        width: 140px !important;
        margin-right: 12px;
    }

    .find-by .btn {
        position: relative;
        top: -3px;
        padding: 4px 10px;
        /*height: 30px;*/
    }

    .upload-doc-xs {
        display: block;
        margin: 35px auto 0;
        padding: 12px 20px;
    }
}

@media (max-width: 480px) {
    .hide-mobile-xs {
        display: none !important;
    }

    .pull-left-xs {
        float: left !important;
    }

    .pull-right-xs {
        float: right !important;
    }

    .navbar-toggle {
        position: absolute;
        top: 45px;
        right: 5px;
        z-index: 1100;
    }
}

/* form overlays for employee portal */
.is-invalid{
  border-color: #A94442;
}
form .form-error ul.errorlist,
form .form-error-small ul.errorlist{
    list-style:none;
    padding: 0;
    color: #A94442;
}

/*table overlays */
tr.grey_out td{
    color: #AAA;
    text-decoration: line-through;
    font-style: italic;
}
tr.grey_out td.no_line_through{text-decoration: none;}

.remittance-modal h1 {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 26px;
    line-height: 35px;
    color: #25365F;
}

.remittance-modal .modal-header, .remittance-modal .modal-footer {
    border: none;
}

.remittance-modal .btn-cancel {
    width: 142px;
    height: 35px;
    color: #82868C;
}

.remittance-modal .btn-add {
width: 142px;
height: 35px;

/* ICBA Blue */

background: #25365F;
}

a.subsidebar-nav {
    padding: 15px 40px !important;
}

.content-center {
    display: flex; justify-content: center;
}

.remittance-modal {
    text-align: center;
  }
  
  @media screen and (min-width: 768px) { 
    .remittance-modal:before {
      display: inline-block;
      vertical-align: middle;
      content: " ";
      height: 100%;
    }
  }

.remittance-modal .modal-content {
    padding: 10px 20px;
}
.remittance-modal .modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
  }

  .remittance-modal label {
    margin-right: 10px;
    font-weight: 100;
  }

  .custom-file-upload {
    margin-top: 10px;
  }

.heading-color {
    color: #8CB152 !important;
}

.btn-remittance {
    background-color: #8CB152 !important;
    color: #fff;
}

.btn-remittance:hover, .btn-remittance:focus {
    background-color: #8CB152 !important;
    color: #fff;
}

.inner-element {
    color: #25365F;
    font-weight: 700;
}

#attention-remittance-wrapper{
    border: 1px solid #EBEBEB;
}


#attention-remittance-wrapper #attention{
    background: #ededed;
    padding: 10px;
}

#attention-remittance-wrapper .note-content{
    color: #D10701;
    font-weight: 400;
    font-size: 11px;
    line-height: 20px;
    padding-left:10px;
    padding-right:10px;
    padding-bottom: 10px;
}

.remittance-wrapper table {
    border: 1px solid #ebebeb;
    width: 100%;
}

.remittance-wrapper table tr {
    border-bottom: 1px solid #ebebeb;
}

.remittance-wrapper table th, .remittance-wrapper table td {
    padding: 5px;
    font-size: 12px;
}



.remittance-heading{
    width: 81px;
    height: 20px;
    display: inline;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #a5a5a5;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.in-progress-heading{
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #25365F;
    flex: none;
    order: 2;
    flex-grow: 0;
}

.main-heading{
    position: absolute;
    /*width: 590px; !*this line*!*/
    /*width:100%;*/
    height: 35px;
    text-align: left;
    display: inline-block;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 26px;
    line-height: 35px;
    color: #000000;
}

.history-main-heading{
    height: 35px;
    text-align: left;
    display: inline-block;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 35px;
    color: #000000;
}

.submit-remittance{
    background: #8CB152;
    padding: 6px 10px;
    gap: 3px;
    width: 163px;
    height: 35px;
    left: 1547px;
    top: 221px;
}

.btn-submit-remittance-link:hover, .btn-submit-remittance-link:focus {
    color: #213562 !important;
}

.submit-remittance:hover, #btn-finalsubmit-remittance:hover,
.submit-remittance:focus, #btn-finalsubmit-remittance:focus {
    background-color: #EBEBEB !important;
    color: #213562 !important; 
    border-color:#213562 ; 
}

.sort-month-dropdown{
    position: absolute;
    text-align: left;
}   

.sort-month-dropdown-text{
    display:block;
    padding: 7px 10px;
    float:left;
    font-weight: 700;
    font-size: 14px;
}


.sort-month-button{
    width: 125px;
    height: 34px;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 19px;
    color: #0B0E1E;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.in-progress-bttn{
    background: white;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px 9px;
    gap: 10px;
    position: absolute;
    width: 87px;
    height: 24px;
    left: 412px;
    top: 282px;
    border: 1px solid #8CB152;
    border-radius: 3px;
}

.in-progress-text{
    width: 69px;
    height: 22px;    
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 12.3462px;
    line-height: 22px;
    text-align: center;
    color: #8CB152;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.hours-worked-in{
    width: 115px;
    height: 20px;
    display: inline-block;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    text-align: right;
    color: #0B0E1E;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.hours-worked-in-value{
    height: 19px;
    display: inline-block;
    /* Regular Bold */
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 19px;
    color: #25365F;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.total-hours{
    width: 90px;
    height: 20px;
    display: inline-block;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    text-align: right;
    color: #0B0E1E;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.total-hours-value{
    width: 54px;
    height: 19px;
    display: inline-block;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 19px;
    color: #25365F;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.subtotal{
    width: 59px;
    height: 20px;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    text-align: right;
    color: #0B0E1E;
    flex: none;
    order: 0;
    display: inline-block;
    flex-grow: 0;
}

.subtotal-value{
    width: 77px;
    height: 19px;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 19px;
    display: inline-block;
    color: #25365F;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.gst{
    width: 61px;
    height: 20px;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
    text-align: right;
    color: #0B0E1E;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.gst-value{
    width: 65px;
    height: 19px;
    font-family: 'Open Sans';
    font-style: normal;
    display: inline-block;
    font-weight: 700;
    font-size: 14px;
    line-height: 19px;
    color: #25365F;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.total{
    width: 35px;
    height: 20px;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
    text-align: right;
    color: #0B0E1E;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.total-value{
    width: 65px;
    height: 19px;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 19px;
    color: #25365F;
    flex: none;
    display: inline-block;
    order: 0;
    flex-grow: 0;
}

.blue-bttn-row{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 13px;
    position: absolute;
    /* top: 380px; */
}

.bulk-add-hrs{margin: 0px 5px;}
.upload-from-excel{margin: 0px 5px;}
.populate-hrs{margin: 0px 5px;}

.sortby-component{
    left:5px;top:-34px;margin-top: 59px;
}

.find-by{
    /* margin-top: 19px; */
}

.processed-box{
    height: 30px;
}

.processed-text{
    width: 63px;
    height: 22px;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-size: 12.3462px;
    line-height: 22px;
    text-align: center;
    color: #82868C;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.export-bttn{
    background: #25365F;
    margin-top: 25px;
    width:85px;
}

.export-bttn-new-employee{
    background: #25365F;
    margin-top: 30px;
    margin-left: 10px;
    width:85px;
}

.sortby-history{
    left:5px;top:25px;
}

.sortby-history-filter{
    left:-1px;top:25px;
}

.findby-history{
    margin-top: 22px;
}

.filterby-history{
    left:-7px;top:25px;
}

.div-width-50 {
    width: 50%;
}

.custom-file-upload {
    width: 142px;
    height: 35px;
    left: 192px;
    top: 138px;

    background: #EBEBEB;
    /* ICBA Blue */

    border: 1px solid #25365F;
}

.remittance-history-wrapper tr {
    cursor: pointer;
}

.remittance-wrapper .dataTables_scrollHeadInner,
.remittance-wrapper .dataTables_scrollHeadInner table {
    width: 100% !important;
}

.line-height-30 {
    line-height: 30px;
}

.line-height-42 {
    line-height: 42px;
}

.hours_earned_cls {
    width: 60px;
}

.remittance-panel #search_employee {
    width: 150px;
}

.margin-top-15 {
    margin-top: 15px;
}

.hide {
    display: none;
}

.show {
    display: block;
}

.inherit-top-left {
    top: inherit;
    left: inherit;
}

.margin-left-300 {
    margin-top: 300px;
}

.nowrap {
    white-space: nowrap;
}

.margin-top-30 {
    margin-top: 30px;
}

.width-60 {
    width: 60px;
}

.height-18 {
    height: 18px;
    margin-right: 0px;
}

.err_msg {
    color: red;
    font-weight: bold;
    font-size: larger
}

.lb-remitance {
    display: inline-block;
    width: 120px;
}

.remittance-main-div {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

td.coverage_box {width: 75px;}
td.class_greyed {background-color: #CCC; color: #777;}
td.class_off {background-color: pink; color: red; font-weight: bold;}
td.class_on {background-color: lightgreen; color: darkgreen; font-weight: bold;}

/* loading gif styles */
#loading {
    background: rgba(255,255,255,0.5) url('/static/images/loading.gif') no-repeat center center;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
    z-index: 999;
    visibility: hidden;
}

/*Employees Search Bar*/
#search-row .form-data {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}
#search-row .form-data input { flex: 1 1 auto; min-width: 0; }

@media (max-width: 767px) {
  #search-row .form-data { flex-direction: column; align-items: stretch; }
  #search-row .form-data button { width: 100%; margin-top: 6px; }
  #search-row .text-right { text-align: left !important; }
}


.panel {
    border: 1px solid #ccc;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
}
.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.panel-content {
    display: none;
    margin-top: 10px;
}
.toggle-btn {
    font-size: 20px;
    cursor: pointer;
}

.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: 1000;
}
.toast.show {
    opacity: 1;
}
.opt-benefit-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-bottom: 10px;
}

.opt-benefit-quote {
    font-weight: bold;
    font-size: 14px;
}

.opt-benefit-quote-hr {
    border: none;
    height: 1px;
    background-color: #000;
    width: 95%;
    margin: 10px auto; /* centers the line */
}