/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');
@media all and (-webkit-min-device-pixel-ratio:0) {

    body {
        font-family: "Rajdhani", sans-serif;
        font-weight: 500;
        font-style: normal;
        background-color: rgb(35, 84, 214);
        margin: 0;
        padding: 20px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

    h1, h2 {
        color: #ffffff;
        text-align: center;
    }

    .day-week {
        width: 20%;
        /* height: 100px; */
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        margin: 10px;
        text-align: center;
        line-height: 1.2;
        font-weight: bold;
        float: left;
        float: right;
    }

    .week {
        width: 20%;
        float: left;
        float: right;
    }

    .day-card {
        width: 100%;
        height: 100%;
        max-width: 100px;
        max-height: 100px;
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        margin: 10px;
        text-align: center;
        line-height: 1.2;
        border: 1px solid #ccc;
        border-radius: 10px;
        background-color: rgb(68, 191, 120);
        color: #fff;
        font-weight: bold;
        -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        -webkit-transition: background-color 0.2s, -webkit-transform 0.2s, -webkit-box-shadow 0.2s;
        transition: background-color 0.2s, -webkit-transform 0.2s, -webkit-box-shadow 0.2s;
        -o-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
        transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
        transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s, -webkit-transform 0.2s, -webkit-box-shadow 0.2s;
        cursor: pointer;

        float: left;
        float: right;
        margin-left: auto;
        margin-right: auto;

        padding: 20px;
    }

    .day-card:hover {
        -webkit-transform: translateY(-5px);
            -ms-transform: translateY(-5px);
                transform: translateY(-5px);
        -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
                box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }

    .day-card.blue {
        background-color: rgb(68, 120, 255);
    }

    .timeline {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        margin: 20px 0;
    }

    a {
        text-decoration: none;
        color: rgb(35, 84, 214);
        font-weight: 900;
        background-color: #fff;
        padding: 10px 20px;
        border-radius: 5px;
        -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        -webkit-transition: background-color 0.2s, -webkit-box-shadow 0.2s;
        transition: background-color 0.2s, -webkit-box-shadow 0.2s;
        -o-transition: background-color 0.2s, box-shadow 0.2s;
        transition: background-color 0.2s, box-shadow 0.2s;
        transition: background-color 0.2s, box-shadow 0.2s, -webkit-box-shadow 0.2s;
    }

    a:hover {
        background-color: #0056b3;
        -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
                box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }

    .return {
        -webkit-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
                transform: translate(-50%,-50%);
        position: absolute;
        left: 50%;
        width: 150px;
        height: 40px;
        text-align: center;
        -webkit-transition: 0.5s;
        -o-transition: 0.5s;
        transition: 0.5s;
        border-style: none;
        border-color: #0400ff;
        background-size: 200% auto;
        color: rgb(0, 0, 0);
        -webkit-box-shadow: 0 0 20px #001aff;
                box-shadow: 0 0 20px #001aff;
        border-radius: 10px;
        /* background-image: linear-gradient(to right, #003CC5 0%, #0B63F6 51%, #003CC5 100%); */
        background-color: rgb(255, 149, 0);
        /*bottom: 10%;*/

        font-size: 20px;
        color:#fff;
        margin-bottom: 300px;
        margin-top: 60px;

    }

    .places_btn{
        margin-top: 60px;
        margin-bottom: 40px;
    }

    .return:hover {
        background-position: right center;
    }

    div.user {
        -webkit-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
                transform: translate(-50%,-50%);
        position: relative;
        left: 50%; 
        width: 80%;
        max-width: 60%;
        max-height: 300px;
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        margin-top: 30px;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        text-align: center;
        line-height: 1.2;
        border: 1px solid #ccc;
        border-radius: 10px;
        background-color: rgb(68, 120, 255);
        color: #fff;
        font-weight: bold;
        -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        -webkit-transition: background-color 0.2s, -webkit-transform 0.2s, -webkit-box-shadow 0.2s;
        transition: background-color 0.2s, -webkit-transform 0.2s, -webkit-box-shadow 0.2s;
        -o-transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
        transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s;
        transition: transform 0.2s, background-color 0.2s, box-shadow 0.2s, -webkit-transform 0.2s, -webkit-box-shadow 0.2s;

        padding: 20px;
    /*     float: right;
        margin-left: auto;
        margin-right: auto; */

    }

    input {
        height: 20px;
        width: 200px;
    }

    input[type=text]:focus {
        border: 3px solid #555;
    }

    table {
        display: table;
    }

    .places {
        margin-bottom: 20px;
        color: #fff;
    }

    .login {
        -webkit-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
                transform: translate(-50%,-50%);
        position: absolute;
        left: 50%;
        width: 150px;
        height: 30px;
        text-align: center;
        -webkit-transition: 0.5s;
        -o-transition: 0.5s;
        transition: 0.5s;
        border-style: none;
        border-color: #0400ff;
        background-size: 200% auto;
        color: rgb(0, 0, 0);
        -webkit-box-shadow: 0 0 20px #001aff;
                box-shadow: 0 0 20px #001aff;
        border-radius: 10px;
        /* background-image: linear-gradient(to right, #003CC5 0%, #0B63F6 51%, #003CC5 100%); */
        background-color: rgb(255, 149, 0);
        top: 80%;
        color:#fff;
        font-weight: bold;
    }

    .info{
        display: block;
        height: 40px;
        width: 130px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
    }

    .info-block{
        height: 20px;
        margin-bottom: 5px;
    }

    .info-text {
        display: inline-block;
        width: 100px;
        height: auto;
        font-weight: bold;
        /*     margin-left: 10px;
    */    color:#fff;

    }

    .square {
        display: inline-block;
        width: 20px;
        height: 20px;
        background-color: rgb(68, 191, 120);
    }

    .square-blue {
        display: inline-block;
        background-color: rgb(68, 120, 255);
        width: 20px;
        height: 20px;
    }

    .exit {
        -webkit-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
                transform: translate(-50%,-50%);
        position: absolute;
        left: 50%;
        width: 200px;
        height: 40px;
        text-align: center;
        -webkit-transition: 0.5s;
        -o-transition: 0.5s;
        transition: 0.5s;
        border-style: none;
        border-color: #0400ff;
        background-size: 200% auto;
        color: rgb(0, 0, 0);
        -webkit-box-shadow: 0 0 20px #001aff;
                box-shadow: 0 0 20px #001aff;
        border-radius: 10px;
        /* background-image: linear-gradient(to right, #003CC5 0%, #0B63F6 51%, #003CC5 100%); */
        background-color: rgb(255, 149, 0);
        /*bottom: 10%;*/

        margin-top: 180px;
        color:#fff;
        font-size: 20px;
    }

    .day-week-name{
        text-decoration: none;
        color: #fff;
        font-size: x-large;
        font-weight: 900;
        padding: 10px 20px;
        text-align: center;
        margin-bottom: 10px;
    }

    .day-week-stat{
        text-decoration: none;
        color: #fff;
        font-weight: 900;
        text-align: center;
        margin-bottom: 10px;
    }
    .line{
        margin-bottom: 20px;
     }

    .footer {

        width: 100%;
        height: 40px;
        margin-top: 60px;
    }

    dialog.fill-department {
        margin-top: 80%;
        width: 80%;
        height: 80px;
        background-color: white;
        border-radius: 20px;
        border-color: black;
    }

    .dep-block {
        display: block;
    }

    .department-button {
        float: right;
        clear: right;
    }

    select.department {
        width: 100%;
    }

    .ExcelExport {
        text-decoration: none;
        color: rgb(35, 84, 214);
        font-weight: 900;
        background-color: #fff;
        padding: 10px 20px;
        border-radius: 5px;
        -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        -webkit-transition: background-color 0.2s, -webkit-box-shadow 0.2s;
        transition: background-color 0.2s, -webkit-box-shadow 0.2s;
        -o-transition: background-color 0.2s, box-shadow 0.2s;
        transition: background-color 0.2s, box-shadow 0.2s;
        transition: background-color 0.2s, box-shadow 0.2s, -webkit-box-shadow 0.2s;
        margin-top: 20px;
        border: 0;
    }


}