/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 9 Jan, 2021, 9:47:26 AM
    Author     : Jawahar
*/

.outer-container{
    cursor:pointer;
    /*padding-left: 10px;
    padding-right:10px;*/
    width:200px;
    height:250px;
    margin:0px auto;
}

@media (min-width:1024px){
    .outer-container{                
        width:125px;
        height:150px;
        overflow:hidden;    
    }    
}

@media (min-width:1366px){
    .outer-container{                
        width:150px;
        height:200px;
        overflow:hidden;    
    }    
}


@media (min-width:1024px){
    .outer-container{                
        width:125px;
        height:150px;
        overflow:hidden;    
    }    
}

@media (min-width:1366px){
    .outer-container{                
        width:150px;
        height:200px;
        overflow:hidden;    
    }    
}

@media (min-width:1466px){
    .outer-container{                
        width:175px;
        height:225px;
        overflow:hidden;    
    }    
}

@media (min-width:1566px){
    .outer-container{                
        width:200px;
        height:250px;
        overflow:hidden;    
    }    
}

@media (min-width:1666px){
    .outer-container{                
        width:225px;
        height:275px;
        overflow:hidden;    
    }    
}

@media (min-width:1766px){
    .outer-container{                
        width:250px;
        height:300px;
        overflow:hidden;    
    }    
}

@media (min-width:1920px){
    .outer-container{                
        width:300px;
        height:400px;
        overflow:hidden;    
    }    
}

.calendar-layout{
    width:100%;
}

.calendar-top-bar{
    width:100%;
    background-color: red;
    color:white;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    text-align: center;
    font-size: 3.5vh;
    line-height: 20px;
    font-size-adjust: 0.58;
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.calendar-body{
    width:100%;
    background-color: white;
    color:black;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;

}

#blur-control-div{
    width:100%;
    height:100%;
    background-color: rgba(255,255,255,0.8);
}

#date-container{
    font-size: 10vh;
    /*line-height: 90px;*/
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

@media (max-width:700px){
    #date-container{
        font-size: 15vh;
        line-height: 120px;
        display:flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }
}