/******************DevExpress CSS Styles**********************************/
.dx-pivotgrid .dx-area-description-cell {
    background-color: #002F87;
}

.dx-pivotgrid-horizontal-headers .dx-expand {
    color: #598FD8 !important;
}

.dx-pivotgrid-vertical-headers .dx-expand {
    color: #65AC50 !important;
}
/****************ADACard CSS**********************/
.dx-flex-card-layout-row-element-DataItem0-0_0,
.dx-flex-card-layout-row-element-DataItem1-0_0,
.dx-flex-card-layout-row-element-DataItem2-0_0,
.dx-flex-card-layout-row-element-DataItem3-0_0,
.dx-flex-card-layout-row-element-DataItem4-0_0,
.dx-flex-card-layout-row-element-DataItem5-0_0,
.dx-flex-card-layout-row-element-DataItem6-0_0
{
    text-overflow: clip !important;
    margin-top: 15px !important;
}
.adaCardContainer {
    border-radius: 0 0 10px 10px !important;
}
#adaDeltaWrapper {
    display: flex;
    flex-direction: column;
    margin-right: 8%;
    align-items: center;
    position: absolute;
    right: 0;
    align-self: self-end;
}

#adaPercentageDiv {
    font-size : smaller;
    color: lightgray;
}

.ADAFilter { /*ADACard Displaying filter name*/
    color: white;
    position: absolute;
    display: flex;
    margin: 0px 5px 0px 5px;
}

.dx-flex-card-layout, .dx-dashboard-cf-style-0-1-card { /*Current Year Attendance Card*/
    background-color: #002f87 !important;
    border-radius: 10px;
}
/****************ADACard End*******************************/
.dx-layout-item {
    background-color: white;
}
.disciplineCards {
    justify-content: flex-start !important;
    text-align: center;
}
.dx-carditem-default-color, .dx-carditem-none-color {
    text-wrap: wrap !important;
    color: white !important;
    font-weight: bold;
}

.dx-pivotgrid .dx-pivotgrid-expanded .dx-expand {
    color: white !important;
}

.dx-datagrid-summary-item {
    color: white !important;
    font-weight: normal !important;
}

.dx-scrollbar-vertical .dx-scrollable-scroll {
    width: 15px;
}

.dx-scrollable-scroll-content {
    background-color: #002f8742 !important;
}

/*Export stop Excel background color*/
.export-button {
    background-color: white !important;
}

.dx-datagrid .dx-header {
    background-color: red !important;
    color: white;
}

.dx-header-row > td {
    background-color: #002F87;
    color: white;
    outline: 0;
}
/*****************Exit Ticket Cards*******************/
.exitTicketCards {
    justify-content: flex-start !important;
    width: max-content !important;
}
/***********Drop-down made with js**************/
.dropdown-container { /*Drop down container for the button and select items*/
    width: 100%;
}

.btn.dropdown-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: none;
    border: 1px solid lightgray;
    border-radius: 0px;
    background-color: white;
    width: 100%;
    text-align: left;
    padding: 0px 0px 0px 10px;
}

.btn.dropdown-toggle:hover {
    border: 1px solid #ADCAE2;
}

.fa-caret-down {
    font-size: 10px;
    padding: 10px 12px;
    border-radius: 3px;
    margin:1px;
}

.fa-caret-down:hover {
    background-color: #e6e6e6;
    /*border-color: transparent;
    padding: 10px 12px;*/
    
}

.custom-devex-dropdown {
    background: #fff;
    width: 100%;
    margin: 0px;
    padding: 7px 9px 8px;
    border-radius: 8px;
}

.custom-devex-dropdown > .dropdown-item {
    color: black !important;
    margin: -10px;
    display: inline-block;
    width: -webkit-fill-available;
    padding: 6px 5px;
    border-radius: 3px;
    margin-bottom: 6px;
}

.custom-devex-dropdown >.dropdown-item:hover {
    text-decoration: none;
    background: #F5F5F5;
}

.dropdown-item.selected {
    background-color: #e5e5e5e5;
}
/* Grid footer row background color */
.dx-datagrid-total-footer {
    background-color: #A4A4A4 !important;
    height:30px !important;
    display:flex;
    align-items:center;
}

.dx-row dx-footer-row {
    background-color: #A4A4A4 !important;    
}

/* Media query for screens with a maximum width of 800 pixels */
/*@media only screen and (max-width: 800px) {
    .dx-flex-card-layout-row-element-DataItem0-0_0 {
        font-size: 18px !important;
    }
}*/

/* Media query for screens with a minimum width of 801 pixels and a maximum width of 1199 pixels */
@media only screen and (min-width: 801px) and (max-width: 1199px) {
    .dx-flex-card-layout-row-element-DataItem0-0_0,
    .dx-flex-card-layout-row-element-DataItem1-0_0,
    .dx-flex-card-layout-row-element-DataItem2-0_0,
    .dx-flex-card-layout-row-element-DataItem3-0_0,
    .dx-flex-card-layout-row-element-DataItem4-0_0,
    .dx-flex-card-layout-row-element-DataItem5-0_0,
    .dx-flex-card-layout-row-element-DataItem6-0_0 {
        font-size: 18pt !important;
    }
}

/* Media query for screens with a minimum width of 1200 pixels */
@media only screen and (min-width: 1200px) {
    .dx-flex-card-layout-row-element-DataItem0-0_0,
    .dx-flex-card-layout-row-element-DataItem1-0_0,
    .dx-flex-card-layout-row-element-DataItem2-0_0,
    .dx-flex-card-layout-row-element-DataItem3-0_0,
    .dx-flex-card-layout-row-element-DataItem4-0_0,
    .dx-flex-card-layout-row-element-DataItem5-0_0,
    .dx-flex-card-layout-row-element-DataItem6-0_0 {
        font-size: 24pt !important;
    }
}
/*Changing graph cards look and feel Jorge T.*/
.dx-dashboard-simple-border {
    border-radius: 0 0 10px 10px;
}
.dx-dashboard-group-item-child .dx-dashboard-caption-toolbar .dx-toolbar-items-container {
    background-color: lightgray !important;
    border-radius: 10px 10px 0 0;
}
.dx-dashboard-caption-toolbar .dx-toolbar-item {
    color: black !important;
    padding-left:5px;
}
.dx-item.dx-toolbar-item.dx-toolbar-button {
    padding-left: 15px !important;
}
/*.dx-dashboard-group-item{
    background-color:white !important;
    height: 0 !important;
}*/
/****************************************************************/
/*********************Added by Jorge T**************************/
#pagecontentwrapper {
    padding-top: 85px;
    padding-right: 0px !important;
    padding-bottom: 0px !important;
    padding-left: 0px !important;
}

.lblMessage {
    color: Red;
    background-color: Yellow;
    font-weight: bold;
    font-size: medium;
    font-family: sans-serif;
    box-shadow: 1px 1px 15px 1px yellow
}
.testEnvironmentLabel {
    background: #ff00007a;
    color: white !important;
    margin-left: 15px;
    padding: 4px;
    border-radius: 5px;
    font-weight: bold;
    display:none;
    font-size: larger;
    border: 2px solid red;
}
/*************************CSS for pop ups*************************/
.popup {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    animation: ease-in-out;
}

.popup-content {
    /*Will test new to be more responsive*/
    background-color: #fefefe;
    display: flex;
    max-width: 80%;
    width:fit-content;
    height: auto;
    max-height:70vh;
    border: 1px solid #002f87 !important;
    border-radius: 9px;
    box-shadow: 2px 10px 8px 10px rgba(0, 0, 0, 0.3);
    flex-direction: column;
    margin: 20vh auto;
}
    .popup-content h4{
        margin:0px !important;
    }
    @media screen and (min-width: 768px) {
        .popup-content {
            max-width: 60vw; /* Reduce the maximum width for larger screens */
        }
        .feedbackContainer{
            max-width: 45vw;
        }
    }
    @media screen and (max-width: 768px) {
        .popup-content {
            min-width: 20vw; /* Reduce the maximum width for larger screens */
        }
        .popup-content span {
            font-size: small !important;
        }
    }

    .popup .feedbackContainer {
        background-color: #F5F5F5;
        overflow-y: auto;
    }

#sessionPopup > .popup-content, 
#hintContainer{
    justify-content: space-between;
}

.popup-header {
    text-align: center;
    background-color: #002f87;
    border-bottom: 4px solid #ffc22d;
    color: white;
    margin: 0;
    padding: 0px 10px;
    border-radius: 6px 6px 0px 0px;
    display: grid;
    grid-auto-flow: column;
    align-items: center;
}

    .popup-header > h4 {
        margin: 0px !important;
    }
    .popup-header img {
        height: 50px !important;
    }

.popup .welcomeHeader {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
}

    .popup .welcomeHeader > h4 {
        margin: 0 auto !important;
    }

#helpHeader,
#profileHeader,
#feedbackHeader {
    text-align: left !important;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 0px;
    display: flex;
    justify-content: space-between;
    padding: 15px;
}

.popup-header-warning {
    font-weight: bold;
    background-color: #ffc22d;
    border-bottom: 2px solid #002f87;
    color: #002f87;
    margin: 0;
    padding: 8px;
    border-radius: 6px 6px 0px 0px;
}

.popup-header-buttons {
    background-color: transparent;
    border: none;
    /*position: absolute;
    right: 0;
    margin: 15px;*/
    color: white;
}

.popup-body {
    overflow-y: auto;
    overflow-x: clip;
    margin: 10px;
}

.popup-footer {
    display: flex;
    justify-content: space-between;
    margin: 10px;
}
/*************************End CSS for pop ups*************************/
.btn { /*Other buttons besides pop up buttons*/
    margin-right: 10px;
    box-shadow: 1px 2px 2px 1px #808080;
    margin-top: 10px;
}

.btn:focus, .btn:active:focus {
    outline: none;
}

.btn-success:focus{ /*overrides the bootstrap default of deep pink*/
    color:white !important;
}

.iconIMG {
    height: 20px;
    width: 20px;
}

.highlight {
    font-weight: normal; /* Normal font weight, initial state for drop down menu items */
}

.highlight:hover {
    font-weight: bold; /* Bold font weight on hover (drop down menu items)*/
    background-color: gray;
}

.dropdownItem {
    padding: 5px 0px 5px 0px !important;
}

span img {
    width: 100% !important;
    max-width: 500px !important;
    position: relative;
    text-align: center !important;
    display: block;
    margin: 0 auto;
}

.search {
    width: 60%;
    border: 2px solid #002f87;
    padding: 5px;
    border-radius: 5px
}

img {
    max-width: 100%;
    height: auto;
}

video {
    width: 100%;
    height: auto;
    min-width: 300px;
    padding-right: 10px;
}
.fa-play{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    background: #000000ab;
    font-size: xx-large;
    border-radius: 27px;
    padding: 7px 10px 7px 15px;
    display: none;
}
.fa-play:active{
    background:black;
    color:lightgray;
}

.carousel-inner > .item > img {
    width: 100% !important;
    max-width: 1350px;
}
/*************************CSS for carousel for helpful hints pop up*************************/
.carousel-control:hover,
.carousel-control {
    color: #002f87;
    position: absolute;
    opacity: 1.0;
    padding-left: 20px;
    width: 0%;
}

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
    display: block;
    background-color: none;
}

.carousel-indicators {
    position: absolute;
    top: 100%;
}

.carousel-indicators-fixed {
    position: relative;
    bottom: 20%;
    left: 0;
    right: 0;
}

.carousel-indicators li {
    background-color: black;
}

.carousel-indicators .active {
    background-color: #696969;
}
/*************************End of CSS for helpful hints pop up*************************/
.flex-container {
    display: flex;
    /* Optional properties to control alignment, direction, etc. */
}

.flex-item {
    flex: 1 1 auto; /* flex-grow: 1, flex-shrink: 1, flex-basis: auto */
    /* Other styling properties */
}

/*************************CSS for Dashboard Theme*************************/
.btn-info,
.btn-info:focus,
.btn-info:active:hover {
    background-color: #002f87 !important;
    border-color: #002f87 !important;
}

.btn-info:hover {
    background-color: #002f87d1 !important;
    border-color: #002f87d1 !important;
/*    box-shadow:1px 2px 5px 2px #002f87; //blue shadow to focus
*/}

.btn-logout {
    background-color: #ffd200 !important;
    border-color: #ffd200 !important;
    color: #002f87 !important;
    box-shadow: none;
    font-weight: bold;
}

.btn-logout:hover {
    background-color: #a78a03 !important;
    border-color: #a78a03 !important;
    color: #021b4b !important;
}

.smallDashboardButton {
    margin: 0;
    padding: 3px;
    margin-right: 8px;
}

.smallDashboardButton1 {
    margin: 10px;
    padding: 3px;
    /*margin-right: 8px;*/
}
.smallDashboardButton2 {
    margin: 0px;
    padding: 2px;
    /*margin-left: 8px*/;
}

.fa-trash-can {
    margin-left: 50%;
    color: #e70501db;
}
.fa-trash-can:hover {
    color: #ff6b65;
}
.fa-trash-can:active {
    color: #9d0400;
}

.saisdBannerTheme {
    color: white !important;
    padding: 5% 0px 0px 5px;
    font-size: 24px;
    font-weight: bold;
    padding-left: 10px;
}

.saisdThemeHeader {
    background-color: #002f87 !important;
    border-bottom: 4px solid #ffc22d !important;
    margin-bottom: 0px !important;
}

.saisdTextTheme {
    background-color: #002f87 !important;
    color: white !important;
}

.saisdTable-header {
    background-color: #002f87 !important;
    color: white;
}
/*******WidgetsCustomization.js DashboardViewer****************/
.ion-md-switch,
.ion-md-menu{
    font-size:x-large !important;
    padding-left:10px;
}

/********* Feed back***************/

/*ul.navbar-nav li a #feedbackLink .feedback-icon {
    width: 40px !important;
    height: 40px !important;
    display: inline-block;
}*/
/* Set responsive styles */

.table {
    width: 100%;
    /*border-collapse: collapse;*/ /* Collapse borders */
}

    .table td {
        padding: 10px; /* Add padding to table cells */
        /*border: 1px solid #ddd;*/ /* Add border */
    }

/* Set textarea to 100% width */
#w3review {
    width: 100%;
    resize: vertical; /* Allow vertical resizing */
}

/* Media query for small screens */
@media screen and (max-width: 600px) {
    .table td {
        display: block;
        width: 100%;
    }
} 

.resetFeedback-colors{
    color:black;
    background-color:white;
}

.message-success {
    color: white;
    background-color: green;
    border-radius: 5px;
    padding: 3px 10px;
}

.message-error {
    color: white;
    background-color: rgba(255, 0, 0, 0.5);
    border-radius: 5px;
    padding: 3px 10px;
}

.message-warning {
    margin: 10px;
    color: red;
    background-color: #ffff8afa;
    width: fit-content;
    border-radius: 4px;
    padding: 4px;
}

.tippy-box[data-theme~='saisd'] {
    background-color: #F8F7F7;
    color: black;
}

.table1 {
    border-collapse: collapse;
    width: 100%;
}

.table1 th,
.table1 td {
    border: 1px solid lightgray;
    padding: 8px;
}
    
.table1 th {
    background-color: lightgray;
}


/*.dropdown-menu li {
    position: relative;
}

.dropdown-menu .dropdown-submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: -5px;
}

.dropdown-menu .dropdown-submenu-left {
    right: 100%;
    left: auto;
}

.dropdown-menu > li:hover > .dropdown-submenu {
    display: block;
}*/

.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}

.dropdown-submenu {
    position: relative;
    padding-right:0px !important;
    padding-top:0px !important;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    padding:0px;
    margin:0px;
}

/* rotate caret on hover */
.dropdown-menu > li > a:hover:after {
    text-decoration: underline;
    transform: rotate(-90deg);
} 

/* Legends*/
.dxc-item{
    font-size:11px !important;
}

.helpDescription {
   font: 14px 'Segoe UI', Arial, sans-serif; 
   display: flex; 
   flex-direction: column; 
   gap: 8px; 
   max-width: 400px; padding: 4px
}