@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');


/* The overall page layout */
.page-container {
    display: unset ;
    flex-direction: column;
    min-height: 100vh;
    overflow: unset;
}

* {
    box-sizing: border-box;
}

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}

@media only screen and (min-width: 600px) {
    /* For tablets: */
    .col-s-1 {
        width: 8.33%;
    }

    .col-s-2 {
        width: 16.66%;
    }

    .col-s-3 {
        width: 25%;
    }

    .col-s-4 {
        width: 33.33%;
    }

    .col-s-5 {
        width: 41.66%;
    }

    .col-s-6 {
        width: 50%;
    }

    .col-s-7 {
        width: 58.33%;
    }

    .col-s-8 {
        width: 66.66%;
    }

    .col-s-9 {
        width: 75%;
    }

    .col-s-10 {
        width: 83.33%;
    }

    .col-s-11 {
        width: 91.66%;
    }

    .col-s-12 {
        width: 100%;
    }
}

@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {
        width: 8.33%;
    }

    .col-2 {
        width: 16.66%;
    }

    .col-3 {
        width: 25%;
    }

    .col-4 {
        width: 33.33%;
    }

    .col-5 {
        width: 41.66%;
    }

    .col-6 {
        width: 50%;
    }

    .col-7 {
        width: 58.33%;
    }

    .col-8 {
        width: 66.66%;
    }

    .col-9 {
        width: 75%;
    }

    .col-10 {
        width: 83.33%;
    }

    .col-11 {
        width: 91.66%;
    }

    .col-12 {
        width: 100%;
    }
}



body {
}

p {
    color: #4764af;
}

h3.eclipse {

}

navbar-eclipse {
    background-color: #4764af;
    /*position:sticky;*/
    top:20px;
}

sidebar {
    background-color:#4764af;
    opacity:0.0;
}

.eclipseblueback {
    background-color: #4764af;
}


h4.eclipse {
    color:deeppink;
    background-color:lightblue;
    font-size:large;
    text-decoration:blink;
    font-style:italic;
}

container.eclipse {
    background-color:aqua;
}

.eclipselogo {
    max-height:100px;
    width:auto;
}

.eclipsemenu {
    height: 25px;
    background-color: #4764af;
    color:white;
}

.testcol {
    border-color: hotpink;
    border-width: 0px;
    border-style: solid;
    width: 10%;
    background-color: white;
    opacity:1;
}

.eclipsetoprow {
    text-align: center;
    padding: 0px 0;
}

.eclipsecoltoprow {
    padding:0px 0px;
    margin:0px 0px 0px 0px;
    align-content:center;
}

.eclipsebody {
    padding: 10px 0px 0px 0px;
 /*   min-height:600px;*/
    
}

.eclipsefooter {
    background-color: #4764af;
    color:white;
    padding: 10px 0px 0px 0px;
}

.eclipsefooterlogo {
    max-height:100px;
    width:auto;
}


/**/
/*MENU BAR SETTINGS*/
.e-menu-container {
    background-color: #4764af;
    align-content:center;
    text-align:center;
    color:white;
}

    .e-menu-container.e-focused {
        background-color: #f68633;
    }

    .e-menu-container.e-selected {
        background-color: #f68633;
    }

    .e-menu-container.e-hover {
        background-color: #f68633;
    }

.e-menu-item {
    color:white;
}

    .e-menu-item.e-hover {
        background-color: #f68633;
    }


    
    .e-menu-item.e-ul.e-focused.e-hover {
        background-color: #f68633;
        color:white;
    }

    .e-menu-item.e-ul.e-selected {
        background-color: #f68633;
    }

    .e-menu-item.e-selected {
        background-color: #f68633;
    }

    .e-menu-item.e-focused {
        background-color: #f68633;
    }

    .e-menu-container .e-menu .e-menu-item.e-selected {
        background-color: #f68633;
    }

    .e-menu-container .e-ul .e-menu-item {
        color:white;
        background-color: #4764af;
    }

        .e-menu-container .e-ul .e-menu-item.e-focused {
            background-color: #f68633;
        }

.e-menu-wrapper .e-ul .e-menu-item.e-focused,
.e-menu-container .e-ul.e-focused {
    background-color: #f68633;
}

.e-menu-container.e-menu-popup .e-menu-vscroll.e-vscroll .e-scroll-nav:focus {
    background: #f68633;
}


.eclipsesticky {
    position:sticky;
    top:0px;
    z-index:150;
}

.btn-eclipse-small {
    background-color: #4764af;
    font-size:smaller;
}

    .btn-eclipse-small:hover {
        background-color: white;
        color: #4764af;
    }

    .eclipseontop {
        position:relative;
        z-index:999;
    }

.eclipsebody {
    position: relative;
    z-index: 10;
}

/*Syncfusion Cards Styling*/
.e-card {
    background-color: rgba(71,100,175,0.2);
    max-width:95%;
    padding-left: 0px;
    margin-bottom: 20px;
    margin-top: 20px;
    margin-left:20px;
    margin-right:20px;
    border:2px solid;
    border-color:#f68633;
    border-radius:25px;
}

.sidebar.eclipse {
    background-image: none;
    background-color: #4764af;
    width: 200px;
}

.navbar-brand {
    background-color: #4764af;
    opacity:1.0;
}


/* MEDIA QUERIES TO SHOW, HIDE AND CHANGE ELEMENTS DEPENDING ON SCREEN SIZE 

*/
/* If the screen size is 600px wide or less, Unhide the element */


@media only screen and (max-width: 600px) {
    div.eclipse_small {
        display:unset;
    }
    div.eclipse_medium
    {
        display: unset;
    }
    div.eclipse_mediumanddown
    {
        display:unset;
    }
    div.eclipse_largeandup
    {
        display:none;
    }
    div.eclipse_large {
        display: none;
    }
    div.eclipse_xlarge {
        display: none;
    }

}

@media only screen and (min-width: 601px) {
    div.eclipse_mediumanddown {
        display: unset;
    }
    div.eclipse_largeandup {
        display: none;
    }
}


/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    div.eclipse_mediumanddown {
        display: unset;
    }
    div.eclipse_largeandup {
        display: none;
    }
}



/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    div.eclipse_mediumanddown {
        display: none;
        z-index: 110;
    }

    div.eclipse_largeandup {
        display: unset;
    }
    
}



/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1201px) {
    div.eclipse_largeandup {
        display: unset;
        align-content:start;
    }
}

/* OPEN ICON STYLING */

.eclipseoi {
    color: #4764af;
    border-radius: 15px;
    margin:0px, 0px, 0px, 0px;
    padding: 0px, 5px, 0px, 0px;
}

.smalloi {
    width:25px;
    height:25px;
    font-size:xx-small;
    text-align:left;
    align-content:flex-start;
    padding-right:15px;
}

.row.overdueheader {
    background-color: #f68633;
    color: white;
    font-size: medium;
    text-align: center;
    text-transform: uppercase;
    border: 2px solid;
    border-color: #f68633;
    border-radius: 25px;
    padding: 5px, 0px, 5px, 0px;
}

.h4.overdueheader {
    color: white;
    font-size: medium;
    text-transform: uppercase;
    font-weight: bold;
}

.row.completedheader {
    background-color: #39b770;
    color: white;
    font-size: medium;
    text-align: center;
    text-transform: uppercase;
    border: 2px solid;
    border-color: #39b770;
    border-radius: 25px;
    padding: 5px, 0px, 5px, 0px;
}

.h4.completedheader {
    color: white;
    font-size: large;
    text-transform: uppercase;
    font-weight: bold;
}

.row.voidedheader {
    background-color: #be4097;
    color: white;
    font-size: large;
    text-align: center;
    text-transform: uppercase;
    border: 2px solid;
    border-color: #be4097;
    border-radius: 25px;
    padding: 5px, 0px, 5px, 0px;
}

.h4.voidedheader {
    color: white;
    font-size: large;
    text-transform: uppercase;
    font-weight: bold;
}



.row.notdueheader {
    background-color: #39b770;
    color: white;
    font-size: large;
    text-align: center;
    text-transform: uppercase;
    border: 2px solid;
    border-color: #39b770;
    border-radius: 25px;
    padding: 5px, 0px, 5px, 0px;
}

.h4.notdueheader {
    color: white;
    font-size: large;
    text-transform: uppercase;
    font-weight: bold;
}

.h4.eclipsecardheader {
    font-size :medium;
}

.eclipselightblue {
    background-color: rgb(71,100,175,0.2);
}

.itemdetail {
    color: #4764af;
    font-size: smaller;
}

.label.eclipsesmall {
    font-size:smaller;
}

.eclipsesmalltableheader {
    font-size:x-small;
    border-bottom:2px solid #4764af;
    border-color:#4764af;
    
}

.eclipsesmalltableitem {
    align-content:center;
    text-align:center;
    font-size:small;
    color:#4764af;
    

}

.row.workspacecarddheader {
    background-color: #4764af;
    color: white;
    font-size: medium;
    text-align: center;
    text-transform: uppercase;
    border: 2px solid;
    border-color: #4764af;
    border-radius: 25px;
    padding: 5px, 0px, 5px, 0px;
}

.h4.workspacecardheader {
    color: white;
    font-size: large;
    text-transform: uppercase;
    font-weight: bold;
}

/*menu bar*/
.e-menu-header {
    width: 100%;
    background-color: #4764af;
}

.workspacedetailheader {
    writing-mode: vertical-lr;
    text-orientation: mixed;
    font-size: x-small;
    color: #4764af;
}

.workspacedetailside {
    font-size:x-small;
    color:#4764af;
}

.workspacedetail {
    font-size:small;
    text-align:center;
}

.overdueitem {
    color:red;
    font-weight:bold;
    font-size:small;
    
}

table, th, td {
    border: 1px solid #4764af;
}

.eclipsecardheaderbtn {
    color: white;
    align-content: center;
    text-align: center;
    margin-top: 0px;
    border-radius: 25px;
    background-color: #4764af;
    text-overflow: ellipsis;
    transition-duration: 0.4s;
    box-shadow: 0 9px #999;
    
}

    .eclipsecardheaderbtn:hover {
        background-color: white;
        color: #4764af;
        box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    }

    .eclipsecardheaderbtn:active {
        background-color: white;
        box-shadow: 0 5px #666;
        transform: translateY(4px);
        color:#4764af;
    }

.custom-annotation {
    color: white;
    background-color: #4764af;
    height: 20px;
    width: 20px;
    border-radius: 15px;
    padding: 4px 0 0 6px;
    font-weight: bold;
}

.custom-annotation-overdue {
    color: white;
    background-color: #f68633;
    height: 15px;
    width: 15px;
    border-radius: 7px;
    padding: 2px 0 0 2px;
    font-weight: bolder;
    font-size:x-small;
    
}

.custom-annotation-next7 {
    color: white;
    background-color: #4764af;
    height: 15px;
    width: 15px;
    border-radius: 5px;
    padding: 4px 0 0 6px;
    font-weight: bold;
    font-size: x-small;
}

.custom-annotation-total {
    color: white;
    background-color: #39b770;
    height: 15px;
    width: 15px;
    border-radius: 5px;
    padding: 4px 0 0 6px;
    font-weight: bold;
    font-size: x-small;
}

.backblue {
    background-color:#4764af;
}

.backblue20 {
    background-color:rgb(71,100,175,0.2);
}

.e-card .e-card-header {
    /*font-family: cursive;*/
    font-style: italic;
    font-size:large;
    text-align:center;
}

.e-btn {
    background-color:#4764af;
    color:white;
}

    .e-btn:hover {
        background-color: white;
        color: #4764af;
    }

    .e-btn:focus, .e-btn:active {
        background-color: #f68633;
    }


.sf-tab-header .e-tab-wrap:nth-child(1) .e-tab-text sup {
    font-size: 10px;
    vertical-align: super;
}


/*TOAST*/

/* To change color, font family and font size */
.e-toast-container .e-toast .e-toast-message .e-toast-title {
    color: #4764af;
    font-size: 18px;
    font-weight: bold;
    z-index: 9999;
}

/* To change color, font family and font size */
.e-toast-container .e-toast .e-toast-message .e-toast-content {
    color: #4764af;
    font-size: 13px;
    font-weight: normal;
}

/* To change icon color */
.e-toast-container .e-toast .e-toast-icon {
    color: #4764af;
}

/* To change background color */
.e-toast-container .e-toast {
    background-color: lightgrey;
}


/* TESTING AREAS*/

.testing {
    background-color:peachpuff;
    margin:25px;
    border:solid 2px black;
    padding :10px;
}

.eclipsemodal1 {
    z-index: 200;
}

.20p {
    width: 20%;
}

.table-check {
    width:5%;
    background-color:lightgray;
    text-align:center;
}

.table-detailcol {
    width:15%;
    text-align:left;
}

.table-mainhead {
    text-align:center;
    font-size:large;
    background-color:lightblue;
}

.table-subhead {
    text-align:center;
    font-size:larger;
    background-color:lightgray;
}

.table-subitem {
    padding-left:20px;
    
}

.table-top {
    vertical-align:top;
}