﻿#CTDesc{
    height: 300px;
}
#TemplateTableTitle{
    color:black;
    font-weight:600;
    font-size:20px;
}
.search-box1 {
    display: flex;
    justify-content: space-between;
    padding-top:20px;
    padding-left:20px;
    flex-wrap:wrap;
}
#SearchGroup{
   justify-content:end
}
#SearchGroup,#FilterGroup{
    display:flex;
/*    flex-wrap:wrap;
*/
}
#SearchBox {
width:100%;
border-radius:5px;
margin-right:5px;
}

#ViewIcon {
    font-size: 2em; /* Change the font size to make the icon larger */
    color:limegreen; /* Change the color to green */
}

#LeaveCards {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    flex-wrap: wrap;
}
#btnGroup {
    display: flex;
    flex-wrap: wrap;
justify-content:flex-end;
 column-gap: 2px
}

@media screen and (max-width: 768px) {
    #SearchBox {
        width: 100%
    }
    .search-box1{
        padding-left:0px;
    }
   #SearchGroup,#FilterGroup{
       justify-content:space-between;
       margin-top:10px;
   }
   #LeaveCards{
       justify-content:center;
   }
}
@media screen and (max-width: 490px) {

    #SearchBox {
        width: 100%;
        margin-inline:5px;
    }
    #btnGroup {
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }
        #btnGroup > button {
            margin-top:10px;
        }


}
@media screen and (max-width: 355px) {

    #SearchBox {
        width: 100%
    }

}
.card .card-header {
    padding: 0px 0px;
    border-bottom: none;
}
#IndividualContent, #GroupContent, #ThirdPartyContent {
    display: flex;
    flex-wrap: wrap
}
.hidden {
    display: none;
}
#ERDFilter{
/*    min-width:100px;
*/}

#ReportList>a{
    margin-bottom:10px;
    color:black;

}
#ReportList>a:hover{
    color:orangered;
    font-weight:600
}
#LIstRep{
    margin-left:20px;
}

#SickLeaveHead {
    background-color: #559416;
}
#SickLeaveHead,#VacationLeaveHead,#AccidentalLeaveHead,#AccidentalLeaveHead,#PersonalLeaveHead {
    display: flex;
    justify-content: center;
    color:white;
    font-weight:600
}
#VacationLeaveBody {
    background-color: #B2D4F3;
}
#AccidentalLeaveHead { 
    background-color: #B53269F2;
}
#AccidentalLeaveBody {
    background-color: #F0ACB0;
}
#PersonalLeaveHead {
    background-color: #D88A14;
}

#PersonalLeaveBody {
    background-color: #D5DD70;
}
#VacationLeaveHead {
    background-color: #159AB7;
}
    #SickLeaveBody {
        background-color: #B8DBCF;
    }
#SickLeaveBody, #VacationLeaveBody,#AccidentalLeaveBody,#PersonalLeaveBody{
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom-left-radius:8px;
    border-bottom-right-radius:8px;
}



#leftNum{
    font-size:40px;
}
#rightNum{
    font-size:64px;
}
#MiddleSep{
    font-size:52px;
    color:white;
    align-items:center;
    margin-inline:5px;
}
#LeaveCard {
    transition: transform 0.2s ease;
    width: 200px;
    border-radius:10px;
}
    #LeaveCard:hover {
        animation: rotateYBackAndForth 1s ease-in-out;
    }

@keyframes rotateYBackAndForth {
    0% {
        transform: rotateZ(-3deg);
    }

    50% {
        transform: rotateZ(3deg);
    }

    100% {
        transform: rotateZ(-3deg);
    }
}
#EmergencyLabel{
    padding-top:0px;
}
#EmergDiV{
    margin-top:auto;
}
input [type="checkbox"] {
    transform: scale(2);
}
#TemplateTableTitle{
    margin-top:15px;
}
.table th {
    background-color: #FFEBCD;
}
#FlexDiv {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap
}

    #FlexDiv > button {
        margin: 10px;
    }