body
{
        overflow-x: hidden;
        font-family:'Noto Sans',sans-serif;
}
.form-control
{
    padding: 15px 45px !important;
}
#list-box > div > p
{
        margin-bottom: 8px !important;
}


body > header > div > div
{
    padding: 0 25px !important;
}
header
{
       background-color: #0074a0;     
}
a:hover {
    color: white;
    text-decoration: none;
}
.display_flex
{
    display:flex;
}
.justify_center
{
    display:flex;
    justify-content: center;
}
.img-div
{
        display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
}
.header-class
        {
            display: flex;
    justify-content: space-between;
        }
        .Logo-img
        {
            display: flex;
                margin: 2px;
        }
        .Logo-img .justify_center img {
                height: 100px;
                    border-radius: 50px;
                    margin-left: 50px;
            }
        
        .Logo-text
        {
                font-family:'Noto Sans',sans-serif;
                      line-height: 21.5px;
                    display: flex;
                flex-direction: column;
                justify-content: center;
        }
        .login-section
        {
               padding: 0px 8px;
                /*background: linear-gradient(to right, #f0f9fe 50%, #ff000000 50%);*/
            /*    background-image: url('imag/bbg.jpg');*/
                    height: 100%; 
    padding: 0 0 22px 0;

        }
        
        .Logo-text  h1
        {
             font-size: 28px !important; 
             font-family:'Noto Sans',sans-serif;
             
             font-weight: bold; 
            padding-top:5px; 
        }
        .list-text img
     {
    width: 18%;
}
        .list-text
        {
            display:flex;
            align-items: baseline;
            font-size: 16px !important;
            font-family:'Noto Sans',sans-serif;
            gap: 5px;
        }
        .listtextbox
        {
                padding: 0 0px !important;
        }
       .list-text > i
        {
            padding: 5px;
        font-size: 18px;
        }
        .note
        {
            font-size: 12px !important;
            font-family:'Noto Sans',sans-serif;
        }
        .box
        {
                display: flex;
            flex-direction: column;
            justify-content: center;
                    margin: 2%;
        }
         .SpanNote
        {
            text-align: left;
            font-weight: bold;
            font-size: 14px;
            color: #07426b !important;
            font-family:'Noto Sans',sans-serif;
        }
        .SpanNote-div
        {
                margin-top: -4px;
                    margin-bottom: 9px;
        }
        
                    .form-section {
                max-width: 500px;
                margin: 0 auto;
                width: 100%;
                box-shadow: 0 0 35px rgb(0 0 0 / 10%);
                text-align: left;
                position: relative;
                z-index: 0;
                    border-radius: 19px;
                        float: right;
                        background-color: white;
                    }
                    .form-card
                    {
                            padding:  6%  6% 1% 6%;
                    }
                .login-inner-form .form-group {
                margin-bottom: 35px;
            }
            .login-inner-form .form-box {
                float: left;
                width: 100%;
                position: relative;
            }
            .login-inner-form .form-box .form-control {
                float: left;
                width: 100%;
                    padding: 13px 15px 13px 51px;
            }
            .login-inner-form .form-box i {
                position: absolute;
                top: 8px;
                left: 0;
                font-size: 23px;
                color: #777575;
                    margin-left: 17px;
            }
            .login-inner-form .checkbox {
                margin-bottom: 35px;
                font-size: 15px;
                margin-top:5px;
            }
            .login-inner-form .form-check {
                float: left;
                margin-bottom: 0;
                margin-left: 2px;

            }
            .form-section .form-check-input {
                width: 18px;
                height: 18px;
                margin-top: 1px;
                position: absolute;
                border: 2px solid #bdbdbd;
                border-radius: 0;
                background-color: #fff;
                margin-left: -22px;
            }
            .login-inner-form .form-check-label {
                padding-left: 5px;
                margin-bottom: 0;
                font-size: 16px;
                color: #535353;
                font-family:'Noto Sans',sans-serif;
            }
            .login-inner-form .checkbox a {
                font-size: 16px;
                color: #535353;
                float: right;
                font-family:'Noto Sans',sans-serif;
            }
            .btn-primary {
                background-color: #4389d5 !important;
                    width: 88px !important;
                height: 37px !important;
                line-height: 1 !important;
            }

            .btn-lg {
                padding: 0 50px;
                line-height: 50px;
                    width: 100%;
                    font-family:'Noto Sans',sans-serif;
            }
            .form-card h3 {
                margin: 0 0 35px;
                font-size: 23px;
                color: #040404;
                font-weight: 400;
                font-family:'Noto Sans',sans-serif;
            }
            .form-section img 
            {
               
            }
            .display_flex
            {
                display:flex;
            }
            .padding-1
            {
               padding:1px !important;  
            }
            .card-noted-body
            {
                    margin: 2%;
            }
            .card-noted-body >  h4
            {
                font-size: 22px;
                color: #2e8dbc;
                    font-weight: bold;
                    font-family:'Noto Sans',sans-serif;
                    padding-left: 18px;

            }
            .notes_list
            {
                    background-color: transparent !important;
                    border-style: none !important;
                        font-family:'Noto Sans',sans-serif;
    text-align: justify;
    font-size: 16px;
        line-height: 1.7;
    
            }
            .login-section img
            {
                width:100%;
                height: 336px;
            }
            .Login-row
            {
                width: 100%;
                margin: -148px 0px 0px 0px;
            }
            .textfont
            {
                font-family:'Noto Sans',sans-serif;
            }
            .listtextbox
            {
                    display: flex;
    flex-direction: row-reverse;
            }
         
                #main
                {
                 display:none;
                }
                header > div 
                {
                        margin-right: 0px !important;
                }
                #closebtn
                {
                    display:none;
                }
                footer
                {
                       display: flex !important;
                        flex-direction: column;
                        align-items: center;
                              background-color: #0074a0;
                }
                .footer-top
                {
                    display: flex;
                    align-items: center;
                    
                }
                .footer-left > p> span
                {
                        font-weight: bold;
                }
               .footer-left
               {
                   
                   text-align: center;
                   padding:5px;
                    display: flex;
                        justify-content: flex-end;
                  font-size: 12px;
                font-family: 'Noto Sans', sans-serif;
               
                  
               }
               .footer-right
               {
                   padding:5px;
                   
               }
               .footer-right > img
               {
                      width: 25%;
               }
               .footer-botoom
               {
                 
               }
               .form-control:hover
               {
                   border-style:solid;
                   border-color:Blue;
               }
               .openbtn
               {
                   border-style: solid;
                    width: 60px;
                    background-color: #000000;
                    color: white;
               }
               .white
               {
                   color:White;
               }
                                    
         .footer-left > p 
         {
             margin-bottom: 10px !important;
         }
       .login-inner-form .checkbox 
        {
            margin-top:5px;
        }
.display {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
right:15px;
background-color: rgba(0, 0, 0, 0.7);
display: none;
z-index: 1001 !important;
        }

.display2 {
background-color: transparent;

display: block;
width: auto;
height:auto;
z-index: 1001;
top: 30%  !important;
left: 25% ;
right:25%;
position: fixed;
padding-left:100px;
margin-right:20%;

        }

.display.show {
visibility: visible;
-webkit-animation: fadeIn1s;
animation: fadeIn1s;
        }
#divLoader
        {
width: 100%;
height: 100%;
text-align:center;

        }
.lblForModal
        {
z-index:10012;
font-size:large;
font-weight: bold;
color: Black;
        }
         #divMsgForError .display2 {
              background-color: transparent;
              
              display: block;
              width: 50%;
              height:50%;
              z-index: 1001;
              top: 35%;
              left: 35%;
              position: fixed;
              padding-left: 10px;
              margin: auto;
              
        }
          #displayModalMessageForError .display {
              height: 100%;
              width: 100%;
              position: fixed;
              top: 0;
              left: 0;
              background-color: rgba(0, 0, 0, 0.7);
              display: none;
              z-index: 100 !important;
        }
         #divLoader3
        {
             width:800px;
            height:350px;
            text-align:center;
            z-index: 10011;
            border:1px solid #67809F;
            background-color: White;
            border-radius:;
            vertical-align: middle;      
       }
       .display {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.7);
display: none;
z-index: 1000;
}

.display2 {
background-color: transparent;

display: block;
width: auto;
height:auto;
z-index: 1001;
top: 40%;
left: 45%;
position: fixed;
padding-left: 10px;
margin: auto;

}

.display.show {
visibility: visible;
-webkit-animation: fadeIn1s;
animation: fadeIn1s;
}
#divLoader
{
width: 100%;
height: 100%;
text-align:center;

}
.lblForModal
{
z-index:10012;
font-size:large;
font-weight: bold;
color: White;
}
        
#displayModalMessageError.display {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.7);
display: none;
z-index: 1000;
}

#divMsgError.display2 {
background-color: transparent;
              
display: block;
width: 30%;
height:30%;
z-index: 1001;
top: 35%;
left: 18%;
position: fixed;
padding-left: 10px;
margin: auto;
              
}

#displayModalMessageError.display .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}     
#divError
{
width:481px;
height:341px;
text-align:center;
z-index: 10011;
border:1px solid #67809F;
background-color: White;
border-radius:;
vertical-align: middle;            
}
#displayModalMessagePass.display {
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.7);
display: none;
z-index: 1000;
}

#divMsgPass.display2 {
background-color: transparent;
              
display: block;
width: 30%;
height:30%;
z-index: 1001;
top: 30%;
left: 32%;
position: fixed;
padding-left: 10px;
margin: auto;
              
}

#displayModalMessagePass.display .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}     
#divPass
{
width:617px;
height:220px;
text-align:center;
z-index: 10011;
border:1px solid #67809F;
background-color: White;
border-radius:;
vertical-align: middle;            
}

           @media only screen and (min-width: 768px) and (max-width: 1200px) 
            {
                
                .listtextbox 
                {
                    display: flex;
                    flex-direction: row !important;
                      padding: 0 0 !important;
                }
                #list-box > div:nth-child(4)
                {
                    width: 250px;
                }
                .Logo-img
                {
                    padding: 0px 0px 0px 19px !important;
                }
                .Logo-text > h5 > span
                {
                    font-size: 16px;
                }
                .footer-right > img
                 {
                    width: 64%;
                }
                .footer-left
               {
                   margin-left: 40px !important;
                  
               }
                .Logo-text
                {
                    margin-left: 29px;
                }
               
               
            }

              @media only screen and (min-width: 320px) and (max-width: 767px)
              {
               
                  .Logo-text h1
                  {
                      font-size: 14px !important;
                  }
                  .img-div
                  {
                      padding:1px !important;
                      width: 32% !important;
                      
                  }
                  .Logo-img .justify_center img {
                        height: 54px;
                        margin-left: 9px;
                    }
                    h5 span {
                            font-size: 14px !important;
                        }
                        .header-class
                        {
                                display: flex;
                                flex-direction: column;
                        }
                        .list-text-box
                        {
                            display:flex !important;
                        }
                        .listtextbox
                        {
                                padding: 0px !important;
                        }
                        .login-container
                        {
                                display: flex;
                                flex-direction: column-reverse;
                        }
                        .card-notes
                        {
                                margin-top: 7%;
                        }
                         .backgroundimg
                            {
                                height:250px;
                            }
                            .Login-row {
                                width: 100%;
                              
                            }
                            .form-card h3 {
                                margin: 0 0 11px;
                                font-size: 23px;
                                color: #040404;
                                font-weight: 400;
                            }
                            .login-inner-form .form-group {
                                margin-bottom: 16px;
                            }
                            .SpanNote-div {
                                margin-top: -8px;
                            }
                            #main
                            {
                             display:block;
                                 margin-right: -22px;

                            }
                             #closebtn
                            {
                                display:block !important;
                                    font-size: 36px;
                                float: right;
                                margin-top: -20px;
                                margin-right: -8px;
                            }
                     .footer-right > img
                     {
                         width: 50% !important;
                     }
                     .footer-right
                     {
                          display: contents;
                     }
                      .footer-left
                       {
                           margin-left: 0px !important;
                       }
                       .footer-top
                       {
                               display: contents;
                       }
                       .Logo-img {
                            margin-left: -23px;
                        }
                            
                          
                          }