@import url('normalize.css');

/* === 
Except for the @media tags all other code was purely created for the Example views and can be replaced.
 - Also feel free to use bootstrap if you want.
*/

/* ------------- General styling for all device sizes ----------- */
/* Colors */
:root {
    --ag_red: #ED0025;
    --ag_dark_red: #94182A;
    --ag-almost-black: #333333;
    --ag-blue: #328DBB;
    --ag_gray_800: #57595b;
    --ag_gray_700: #808285;
    --ag_gray_600: #949699;
    --ag_gray_500: #A6A8AB;
    --ag_gray_400: #D2D4D5;
    --ag_gray_300: #E7E8E9;
    --ag_gray_250: #e7e9eb;
    --ag_gray_200: #F2F3F3;
    --ag_gray_100: #FAFAFA;
    --ag_fallback: rgb(0,0,0);
    --ag_fullback: rgb(255,255,255);
    --ag_black_opacity_40: rgba(0,0,0,0.4);
    --ag_black_opacity_50: rgba(0,0,0,0.5);
}

/* General */
html, body {
    font-family: Georgia , 'Times New Roman' , Times , serif;
    height: 100%;
    color: var( --ag-almost-black );
    background-color:  var( --ag_gray_200 ); 
}
* {
    box-sizing: border-box;
}

/* Utilities */
.padding_5 {
    padding: 5px;
}
.margin_t_5 {
    margin-top: 5px;
}
.margin_t_10 {
    margin-top: 10px;
}
.margin_l_5 {
    margin-left: 5px;;
}
.margin_l_15 {
    margin-left: 15px;
}
.margin_l_5 {
    margin-left: 5px;
}
.margin_b_5 {
    margin-bottom: 5px;
}
.border_bottom {
    border-bottom: 1px solid var( --ag_gray_400 );
}
.text_small {
    font-size: small;
}
.position_relative {
    position: relative;
}

/* Text */
a {
    text-decoration: none;
    color: var( --ag_gray_100 );
}
.text_center {
    text-align: center;
}
.anchor_normal{
    text-decoration: underline;
    color: var( --ag-almost-black );
}

/* Navbar */
#navbar {
    padding: 0px 20px;
    align-items: center;
    background-color: var( --ag_gray_100 );
    box-shadow:  var( --ag_gray_300 ) 0px 5px 15px;
    height: 50px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.nav_title {
    margin-left: 5px;
}
.nav-link {
    color: white !important;
    display: inline !important;
    background-color: var(--ag_gray_800);
    border-radius: 5px;
    border-bottom: 1px solid var( --ag_red );
}

/* Logo & Icon & Divider */
.icon {
    width: 20px;
    margin: 5px;
    color: var( --ag_gray_100 ) !important;
    fill: white;
}
.logo {
    width: 125px;
}
.vertical_line {
    display: inline-block;
    border-left: 2px solid var( --ag_gray_600 );
    margin: 5px 10px;
    height: 25px;
}

/* Flexbox */
.flex_row_center {
    display: flex;
    flex-direction: row; 
    align-items: center;
}
.ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 14px;
}
.large-label {
    width:100%;
}
.filter_div_export {
    margin: 5px;
}
.filter_div_export > * {
    flex: 45%;
}
.flex_row {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    gap: 6px; 
}
.flex_row_center_wrap {
    gap: 10px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row; 
    align-items: center;
    justify-content: center;
}
.flex_row_between {
    display: flex;
    flex-direction: row; 
    align-items: center;
    justify-content: space-between;
}
.flex_column_center {
    display: flex;
    flex-direction: column; 
    align-items: center;
}
.flex_column_left {
    display: flex;
    flex-direction: column; 
    text-align: left;
}
.full_width_center {
    width: 100%;
    display: flex;
    justify-content: center;
}

.column {
    flex-direction: column;
}

/* Popup */
.popup {
    min-width: 200px;
    max-width: 300px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid var( --ag_gray_400 );
    background-color: var( --ag_gray_100 );
    box-shadow: var( --ag_gray_300 ) 0px 5px 15px;
}
.profile_popup {
    position:absolute;
    z-index: 2;
    top: 40px; 
    right:0px;
}
.export_popup {
    position:absolute;
    z-index: 2;
    top: 0px; 
    right:0px;
}
.profile_button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border: 1px solid var(--ag_gray_500);
    border-radius: 50%;
}
.icon_small {
    width: 15px;
}
#watermark {
    color: var( --ag_red );
    font-size: large;
    font-weight: bold;
}

/* Close button */
.close {
    position: absolute;
    right: 20px;
    top: 15px;
    width: 32px;
    height: 32px;
    opacity: 0.3;
  }
  .close:hover {
    opacity: 1;
    cursor: pointer;
  }
  .close:before, .close:after {
    position: absolute;
    left: 15px;
    content: ' ';
    height: 25px;
    width: 2px;
    background-color: #333;
  }
  .close:before {
    transform: rotate(45deg);
  }
  .close:after {
    transform: rotate(-45deg);
  }

/* Dashboard Items */
#export_modal {
    position: relative;
}
.filter_div {
    margin: 5px;
}
@media ( min-width: 1025px ) {
    .filters > .filter_div:nth-of-type(2) {
        margin-left:66px;
    }
}
.period_div {
    margin:5px;
}
.period_div.datepicker:first-of-type {
    margin-left:4px;
}
.export_div {
    margin: 5px;
}
.content_div {
    margin: 5px;
}
.item_heading {
    font-weight: bold;
    font-size: large;
}
.filter_label {
    font-style: italic;
    font-size: 15px;
}
.filter_refresh {
    color: var( --ag-blue );
    text-decoration: underline;
    cursor: pointer;
}

/* Form Fields */
.select {
    width: 200px !important;
    height: auto !important;
}

/* Buttons */
.button {
    color: var( --ag_gray_100 );
    background-color: var( --ag_red );
    border: 2px solid var( --ag_red );
    border-radius: 5px;
}
.button:hover {
    border: 2px solid var( --ag_dark_red );
    background-color:var( --ag_dark_red );
    color: var( --ag_gray_100 );
}
.button:disabled {
    background-color: var( --ag_gray_500 ) !important;
    border: 2px solid var( --ag_gray_500 ) !important;
}
.icon_button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 140px;
}
.export_button {
    margin: 5px auto;
    width: 150px;
}
#export_model_buttons .button {
    width: 100px;
}

/* Table */
.table {
    border-collapse: separate;
    width: 100%;
    height: 100%;
    font-size: 13px !important;
}
.table td, .table th, .fixed_side {
    border: 1px solid #ddd;
    text-align: left;
    padding: 8px;
}
.table th {
    border-top: 0px;
    position: sticky;
    top: 0;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 5px;
    background-color:  var( --ag_gray_400 );
    vertical-align: middle;
    text-align: left;
    min-width: 130px;
}
.table tr td:first-child,
.table th:first-child {
    position: sticky;
    left:0;
    z-index: 2;
}
.table th:first-child {
    z-index: 5;
}
.table tr:nth-child( even ){
    background-color: var( --ag_gray_200 );
}
.table tr:nth-child( odd ){
    background-color: var( --ag_gray_100 );
}
.table_body tr:hover {
    background-color: var( --ag_gray_300 );
    z-index: 3;
}
.table_body tr:hover .fixed_side {
    background-color: var( --ag_gray_300 ) !important;
}
.table_body tr:nth-child( even ) .fixed_side {
    background-color: var( --ag_gray_200 );
}
.table_body tr:nth-child( odd ) .fixed_side {
    background-color: var( --ag_gray_100 );
}
.fixed_side {
    border-left: 2px !important;
}
.date_column {
    min-width: 50px !important;
    width: 130px !important;
}
.total_column {
    min-width: 50px !important;
    width: 50px !important;
}
.expandable,
.collapse {
    cursor: pointer;
}
/* Sorting */
.hidden {
    display: none;
}
.sortable:after,
.no_sort:after,
.sort_by_asc:after,
.sort_by_desc:after {
    content: ' ';
    position: relative;
    left: 10px;
    border: 7px solid transparent;
}
.sortable,
.no_sort,
.sort_by_desc,
.sort_by_asc {
    padding-right: 4px;  
    margin: 10px;
}
.no_sort {
    background: url(../icons/remove.svg) no-repeat;
}
.sort_by_asc {
    background: url(../icons/arrow_drop_up.svg) no-repeat;
}
.sort_by_desc {
    background: url(../icons/arrow_drop_down.svg) no-repeat;
}
.sortable_click {
    cursor: pointer;
}
.sortable {
    padding-bottom: 3px;
}




/* Overflow */
.overflow {
    overflow-x: auto;
    overflow-y: auto;
}
.overflow::-webkit-scrollbar:vertical {
    width: 11px;
}
.overflow::-webkit-scrollbar:horizontal {
    height: 11px;
}
.overflow::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid var( --ag_gray_100 );
    background-color: var( --ag_gray_600 );
}
.overflow::-webkit-scrollbar-track {
    background-color: var( --ag_gray_100 );
    border-radius: 8px;
}
.overflow::-webkit-scrollbar {
    -webkit-appearance: none;
}

/* Loader */
.loader {
    display: none;
    position: absolute;
    border:  4px solid var( --ag_gray_400 );
    border-radius: 50%;
    border-top: 5px solid var( --ag_red );
    width: 30px;
    height: 30px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    top: 40%;
    left: 50%;
    transform: translate( -50%, -50%);
}

/* Modal */
.modal_overlay {
    position: fixed;
    z-index: 15;
    padding-top: 100px;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: var( --ag_fallback );
    background-color: var( --ag_black_opacity_40 );
}
.modal {
    margin: auto;
    max-width: 500px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid var( --ag_gray_400 );
    border-top: 4px solid var( --ag_red );
    background-color: var( --ag_gray_100 );
}
.modal_header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px 20px 20px;
    border-bottom: 1px solid var( --ag_gray_400 );
}
.modal_content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    gap: 10px;
}
.close_button {
    color: var( --ag_gray_700 );
    font-size: 28px;
    font-weight: bold;
}
.close_button:hover, .close_button:focus {
    color: var( --ag_red );
    text-decoration: none;
    cursor: pointer;
}
.login_header {
    display: flex;
    justify-content: center;
    padding: 0px 10px 10px 10px;
    border-bottom: 1px solid var( --ag_gray_400 );
}
.login_title {
    font-size: large;
    font-weight: bold;
}

#export_dates_content {
    margin-left: -10px;
}

/* Progress Bar */
.progress_loader {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.progress_bar {
    display: flex;
    align-items: center;
    width: 400px;
    height: 18px;
    background-color: var( --ag_gray_400 );
    border: 3px solid var(--ag_gray_400);
    border-radius: 25px;
}
.progress_bar span {
    width: 0%;
    height: 100%;
    background-color: var(--ag-blue);
    border-radius: 25px;
}

/* Animations */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotate( 0deg ); }
    100% { -webkit-transform: rotate( 360deg ); }
}
@keyframes spin {
    0% { transform: rotate( 0deg ); }
    100% { transform: rotate( 360deg ); }
}
@-webkit-keyframes rotate {
    100% { -webkit-transform: rotate( 360deg ); }
}
@keyframes rotate {
    100% { transform: rotate( 360deg ); }
}

/* ------------- Device all mobile portrait first ------------- */
#main_content {
    display: flex;
    margin: auto;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding: 40px 60px 40px 60px;
    max-width: 1600px;
    gap: 30px;
}
.dashboard_item {
    display: flex;
    margin: auto;
    padding: 10px;
    flex-direction: column;
    border-top: 4px solid var( --ag_red );
    border-radius: 5px;
    box-shadow: var( --ag_gray_300 ) 0px 5px 15px;
    background-color: var( --ag_gray_100 );
}
.full_item {
    width: 100%;
    height: 100%;
    max-width: 1440px;
    max-height: 820px;
    flex-shrink: 0;
    margin: auto;
}
.half_item {
    width: 100%;
    max-width: 720px;
    height: 300px;
    flex-shrink: 0;
    margin: auto;
}
.quater_item {
    width: 100%;
    max-width: 360px;
    height: 300px;
    flex-shrink: 0;
    margin: auto;
}

/* ------ Device = Mobile (portrait) ------ */
@media ( min-width: 300px ) and ( max-width: 768px ) {
    .loader {
        top: 60%;
    }
}

/* ------ Device = Tablets, Ipads (portrait) ------ */
@media ( min-width: 768px ) and ( max-width: 1024px ) {
    .loader {
        top: 50%;
    }
}

/* ------ Device = Desktops ALL ------ */
@media ( min-width: 1025px ) {
    .full_section {
        width: 100%;
    }
    .half_section {
        width: 50%;
    }
    .quater_section {
        width: 50%;
    }
    .flex_row_center_wrap {
        justify-content: left;
    }
    #btn_comparison {
        margin-left: 85% !important;
    }
}

/* ------ Device = Laptops, Desktops  ------ */
@media ( min-width: 1025px ) and ( max-width: 1480px ) {
}

/* ------ Device = Desktops High res ------ */
@media ( min-width: 1481px ) {
}


/* Sub nav */
#sub_navbar {
    background-color: var( --ag_gray_200 );
    box-shadow: var( --ag_gray_300 ) 0px 5px 15px;
    padding: 0px 20px;
    align-items: center;
    height: 32px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
   
}
.nav_ul {
    margin: 0;
    padding: 0px;
    position: static;
    overflow: hidden;
    font-weight: bold;
    display: inherit;
}
.nav-link:hover
{
    background-color: var( --ag_gray_200 );
    border-radius: 5px 5px 0px 0px;
    color: var( --ag-almost-black ) !important;
}
.nav_ul a {
    display: block;
    padding: 5px 10px;
    text-decoration: none;
    margin-right: 10px;
    /* margin-left: -1px; */
    white-space: nowrap;
}
.nav_logo {
    float: right !important;
    font-weight: normal !important;
    padding-top: 6px;
    cursor: default;
}
.nav_logo_image {
    height:16px;
    width:85px;
    margin-top:4px;
}
.nav_logo_text {
    margin-top: 0px; 
    font-size:small;
}
.active {
    background-color: var( --ag_gray_250 ) !important;
    color: var( --ag-almost-black ) !important;
    border-radius: 5px 5px 0px 0px;
    border-top: 1px solid var( --ag_red );
    border-left: 1px solid var( --ag_red );
    border-right: 1px solid var( --ag_red );
    margin-top: 0px; 
    height:33px;
    border-bottom:0px;
}
.active::after {
    height:30px;
    border-bottom:0px;
}
 #sub_navbar {
    height: 33px;
    border-bottom: 1px solid var( --ag_red );
}


/*********************************************/

/* Attendance Report */
.selection_wrapper {
    margin-left: auto;
    margin-right: auto;
    width: 60%;
}
.selection {
    margin-top: 10px;
}
.date_wrapper {
    display: inline;
}
.datepicker {
    font-size: 13px;
    border: 1px solid var( --ag_gray_400 );
    padding: 5px;
    width: 232px;
    text-align: center;
    cursor: pointer;
    z-index: 10;
    border-radius: 5px;
}
.chosen-container-multi .chosen-choices {
    border-radius: 5px !important;
}
@media ( min-width: 1500px ) {
    .text.datepicker:first-of-type {
        margin-left: 76px;
    }
    .btn_criteria:first-of-type {
        margin-left: 9px;
    }
}
.btn_criteria {
    background-color: var( --ag_red );
    color: white;
    border: 0px !important;
    font: inherit;
    border-radius: 5px;
    width: 169px;
    line-height: 29px;
}
.btn_criteria:hover {
    background-color: var( --ag_dark_red );
}
#comparison_table_wrapper {
    margin-top: 10px;
}
.chosen-container {
    width: 254px !important;
}
#login_error {
    text-align: center;
    color: red;
}
.btn_super_user {
    background-color: var( --ag-blue );
    border: 2px solid var( --ag-blue );
}
.btn_super_user:hover {
    background-color: #1d526d;
    border: 2px solid #1d526d;
}
.sub_header_text {
    font-size: 10px;
}
.ui-tooltip-content {
    font-size: 10px;
}
.ui-datepicker {
    z-index: 16 !important;
}
.min_width_165 {
    min-width: 165px !important;
}
.ui-spinner:first-child {
    margin-left: 55px;
}
.ui-spinner {
    width: 120px;
    margin-left: 50px;
    margin-bottom: 2%;
}
.ui-spinner-input {
    padding: 2% 10% !important;
}
#day_spinner_label {
    margin-right: 9px;
}
.input_wrapper {
    padding-left: 23%;
    padding-top: 5%;
}
.input_label {
    font-size: large;
}
#btn_save_threshold,#btn_upload_attendance {
    margin-left: 18%;
    margin-top: 5%;
    padding: 10px 25px;
}
.red_highlight {
    background-color: rgba( 255, 0, 0, 0.4 ) !important;
}
.red_highlight:hover {
    background-color: var( --ag_gray_300 ) !important;
}
#upload_attendance_label {
    margin-left: 10%;
}
#upload_attendance_files {
    margin-left: 15%;
}
.secondary_header_text {
    font-size: xx-small;
}
.bold_text {
    font-weight: bold !important;
}
.new_label {
    background-color: var( --ag_red);
    color: white;
    padding: 3px;
    bottom: 2px;
    right: 3px;
    font-size: x-small;
    position: relative;
    border-radius:5px;
}
#percentage_disclaimer {
    font-size: small;
    padding-left: 7px;
    display: none;
}