.mt10 {
        margin-top: 10px;
    }

    .mt20 {
        margin-top: 20px;
    }

    .mt30 {
        margin-top: 30px;
    }
    
    .mt35 {
        margin-top: 35px;
    }
    .mt40{
        margin-top:40px;
    }
     .mt100 {
        margin-top: 100px;
    }

    .pad100 {
        padding-left: 100px;
    }

    .ml146 {
        margin-left: 40px;
    }
    .bg{
       background-color:#6495ED;
    }
    .ml15{
        margin-left: 15px;
    }
.h45{
    height:45px;
    padding-top:2px;
    border-radius:30px;
}
.w-55{
    width: 55%;
}
.wi55{
    width:55px
}
.wi135{
    width:135px
}
.wi45{
    width:45px
}
.wi35{
    width:35px
}
.wi10{
    width:10%;
}
.padding0{
    padding:0px !important;
}
.margin0{
    margin:0px !important;
}
label {
    font-weight: 500 !important;
    color: #5e6066 !important;
    font-size: 1rem !important;
    margin-bottom: 2px !important;
}

.form-control {
    border: 1px solid #8998bd !important;
    border-radius: 0.25rem;
    /*border-bottom: 0px solid #1b1c1f !important;*/
    background-color: #fff;
}
.form-control:hover {
    border: 1px solid #506ee4 !important;
    border-radius: 0.25rem;
    /*border-bottom: 0px solid #1b1c1f !important;*/
    background-color: #fff;
}
.form-control:focus {
    border: 1px solid #506ee4 !important;
    border-radius: 0.25rem;
    /*border-bottom: 0px solid #1b1c1f !important;*/
    background-color: #fff;
}

/*.page-title-box .page-title {
    font-size: 22px !important;
    margin: 0;
    color: #303e67 !important;
}*/

.page-title-box .page-title {
    font-size: 24px !important;
    margin: 0;
    color: #133088 !important;
}

/*
    line-height: 28px;
*/



.btn-gradient-primary {
    background: linear-gradient(14deg, #262a81 0%, rgb(90 99 183 / 60%)) !important;
    color: #fff;
    box-shadow: 0 7px 14px 0 rgb(80 107 228 / 50%);
    border: 1px solid #c540da;
}

.section-heading{
    padding-left:10px;
    color: #133088 !important;
    text-transform:capitalize;
    margin-bottom:20px;
}

.heading-icon{
    color: #133088 !important;
    font-family: 'FontAwesome' !important;
    font-weight: 900 !important;
    font-size: 20px !important;
    margin-top: 11px !important;
    margin-left: 11px !important;

}


/*Tharuni Styles*/

/*Width*/

.wi20{
    width:20%;
}
.wi15{
    width:15%;
}
.wi35{
    width:35px;
}
.wi70{
    width:70px;
}
.wi30{
    width:30%;
}
.wi-40{
    width:40%;
}
.wi60{
    width:60%;
}
.wi100{
    width:100%;
}
.wi-40
{
    width:40%;
}
.display-flex
{
    display:flex;
}

.wi18{
    width:18%;
}
.wi28{
    width:28%;
}
.wi24{
    width:24%;
}
/*Font*/
.f-10{
    font-size:10px;
}
.f-15{
    font-size:15px;
}
/*Padding*/
.pxx-3
{
    padding:0px 3px;
}
.pxx-1{
    padding:0px 1px;
}
.pad100 {
        padding-left: 100px;
    }
/*Backgroud*/
.bg{
       background-color:#6495ED;
    }
/*Styles*/
.h45{
    height:45px;
    padding-top:2px;
    border-radius:30px;
}
.w110{
    width:110px;
}
/*Tharuni Styles*/


.main-menu-inner .topbar-left .logo .logo-lg {
    height:30px !important;
}

.responsive-logo img{
    height:20px;
}


         

          /*iyyappan*/
    
          .today-attence{
              border-bottom: 4px solid #7081b9;
              padding-bottom: 5px;
          }
          .timegreen{
              background-color: green;
              width: 40px;
              height: 40px;
          }
          .timeyellow{
              background-color: yellow;
              width: 40px;
              height: 40px;
          }
          .timered{
              background-color: red;
              width: 40px;
              height: 40px;
          }
          .timediv{
              display: flex;
              justify-content: space-between;
              margin-right:10px;
          }
          .todaytimeyellow{
              background-color:yellow;
          }
           .todaytimegreen{
              background-color:green;
          }
            .todaytimered{
              background-color:red;
          }
           .todaytime1{

          }
            .todaytime2{

          }
          .form-control {
                border: 1px solid #77829f;
                border-radius: 0.25rem;
                border-bottom: 1px solid #77829f;
                -webkit-transition: border-color 0s ease-out;
                transition: border-color 0s ease-out;
                background-color: #fff;
                }

                .table-bordered {
                border: 1px solid #96a2b1;
                }

                .table-bordered th, .table-bordered td {
                border: 1px solid #96a2b1;
                }
                .table td {
                font-weight: 400;
                vertical-align: middle;
                border-color: #96a2b1;
                }




/*button colors*/



/*--SAVE (BLUE)*/

.btn-grad-save {
    background-color: #55b662 !important;
    /*background-image: linear-gradient(to right, #02AAB0 0%, #00CDAC 51%, #02AAB0 100%);*/
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white !important;
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
    /*display: block;*/
    font-weight: 600 !important;
     font-size:15px !important;
        width: 110px !important;
        margin: 3px !important;
}

    .btn-grad-save:hover {
        background-position: right center; /* change the direction of the change here */
        color: #fff !important;
        text-decoration: none;
        font-weight: 600 !important;
    }

         

    /*upload*/
  

.btn-grad-upload {
    background-color: #0071e3;
    /*background-image: linear-gradient(to right, #000428 0%, #004e92 51%, #000428 100%);*/
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white !important;
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
    /*display: block;*/
    font-weight: 600 !important;
     font-size:15px !important;
        width: 110px !important;
        margin: 3px !important;
}

    .btn-grad-upload:hover {
        background-position: right center; /* change the direction of the change here */
        color: #fff !important;
        text-decoration: none;
        font-weight: 600 !important;
    }
         

/*--UPDATE*/




.btn-grad-update {
    background-image: linear-gradient(to right, #0575E6 0%, #021B79 51%, #0575E6 100%);
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white !important;
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
    /*display: block;*/
    font-weight: 600 !important;
     font-size:15px !important;
        width: 110px !important;
        margin: 3px !important;
}

            .btn-grad-update:hover {
                background-position: right center; /* change the direction of the change here */
                color: white !important;
                text-decoration: none;
                font-weight: 600 !important;
            }
         




/*--DELETE */


.btn-grad-delete {
    background-image: linear-gradient(to right, #D31027 0%, #EA384D 51%, #D31027 100%);
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white !important;
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
    /*display: block;*/
    font-weight: 600 !important;
     font-size:15px !important;
        width: 110px !important;
        margin: 3px !important;
}

    .btn-grad-delete:hover {
        background-position: right center; /* change the direction of the change here */
        color: #fff !important;
        text-decoration: none;
        font-weight: 600 !important;
    }
         


/*--CLEAR */
.btn-grad-clear {
    /*background-image: linear-gradient(to right, #D31027 0%, #EA384D 51%, #D31027 100%);*/
    background-color: #f36777 !important;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white !important;
    box-shadow: 0 0 20px #eee;
    /*border-radius: 10px;*/
    /*display: block;*/
    font-weight: 600 !important;
     font-size:15px !important;
        width: 110px !important;
        margin: 3px !important;
}

    .btn-grad-clear:hover {
        background-position: right center; /* change the direction of the change here */
        color: #fff !important;
        text-decoration: none;
        font-weight: 600 !important;
    }

/*--PRINT*/


.btn-grad-print {
    background-image: linear-gradient(to right, #614385 0%, #516395 51%, #614385 100%);
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white !important;
    box-shadow: 0 0 20px #eee;
    /*display: block;*/
    font-weight: 600 !important;
     font-size:15px !important;
        width: 110px !important;
        margin: 3px !important;
}

    .btn-grad-print:hover {
        background-position: right center; /* change the direction of the change here */
        color: white !important;
        text-decoration: none;
        font-weight: 600 !important;
    }

/*--excel*/


.btn-grad-excel {
    background-image: linear-gradient(to right, #76b852 0%, #8DC26F 51%, #76b852 100%);
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white !important;
    box-shadow: 0 0 20px #eee;
    /*display: block;*/
    font-weight: 600 !important;
     font-size:15px !important;
        width: 110px !important;
        margin: 3px !important;
}

    .btn-grad-excel:hover {
        background-position: right center; /* change the direction of the change here */
        color: white !important;
        text-decoration: none;
        font-weight: 600 !important;
    }
/*--LOAD*/

.btn-grad-load {
    background-image: linear-gradient(to right, #000428 0%, #004e92 51%, #000428 100%);
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white !important;
    box-shadow: 0 0 20px #eee;
    /*border-radius: 10px;*/
    /*display: block;*/
    font-weight: 600 !important;
     font-size:15px !important;
        width: 115px !important;
        margin: 3px !important;
}

    .btn-grad-load:hover {
        background-position: right center; /* change the direction of the change here */
        color: white !important;
        text-decoration: none;
        font-weight: 600 !important;
    }

/*common*/
.btn-grad-common {
    background-image: linear-gradient(to right, #005C97 0%, #363795 51%, #005C97 100%);
    /*padding: 10px 25px;*/
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white !important;
    box-shadow: 0 0 20px #eee;
    /*border-radius: 10px;*/
    /*display: block;*/
    font-weight: 600 !important;
     font-size:15px !important;
        margin: 3px !important;
}

    .btn-grad-common:hover {
        background-position: right center; /* change the direction of the change here */
        color: #fff !important;
        text-decoration: none;
        font-weight: 600 !important;
    }
         

    /*create,add*/

.btn-grad-create {
    /*background-image: linear-gradient(to right, #093028 0%, #237A57 51%, #093028 100%);*/
    background-color: #0071e3 !important;
    margin:3px;
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white !important;
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
    /*display: block;*/
    font-weight: 600 !important;
}

    .btn-grad-create:hover {
        background-position: right center; /* change the direction of the change here */
        color: #fff !important;
        text-decoration: none;
        font-weight: 600 !important;
    }
    .btn-grad-link{
        background-image: linear-gradient(to right, #005C97 0%, #363795 51%, #005C97 100%);
       /*background: #4262c1;*/
       cursor: pointer;
       padding: 4px;
       border-radius: 2px;
       color: white;
    }
    .btn-grad-link:hover{
        color:white;
    }
    .button-items-card{
        width:100%;
    }
    .dataTables_filter{
        float:right;
    }
    .pagination{
        float:right;
    }
    .btnicon button{
        margin-right: 2px !important;
        margin-left: 2px !important;
    }
    .boder-white-btn{
        border: 2px solid white !important;
        color: white !important;
    }
    .demo-container{
        width: 100% !important;
    }

     /*datatable*/
    @media only screen and (max-width:426px) {
        .dataTables_length label{
            font-size:12px!important;
        }

        .custom-select {
            padding:0px !important;
            font-size: 13px;
            height:40px !important;
            width:56% !important;
        }
         .dataTables_filter{
               width: 44% !important;
                position: absolute;
                top: -70px;
                right: 0px;
                z-index: 10000;
         }
        .dataTables_filter label{
            font-size:12px !important;
        }
    }
 @media only screen and (max-width:992px){
            .login-card{
                    width: 95% !important;
            }

        }


    /*nav style*/
                .navbacolor {
               background: rgb(182,69,69);
               background: linear-gradient(180deg, rgba(182,69,69,1) 20%, rgba(45,150,204,1) 100%, rgba(243,0,0,1) 100%);
                }
                .navtexcolor {
                    color: #7c0e27 !important;
                }

                .main-menu-inner .menu-body .nav-item .nav-link.active i, .main-menu-inner .menu-body .nav-item .nav-link:hover i, .main-menu-inner .menu-body .nav-item .nav-link.active, .main-menu-inner .menu-body .nav-item .nav-link:hover {
                    color: #7c0e27 !important;
                }
                .page-title-box .page-title {
   
                    color: #7c0e27 !important;
                }
                .heading-icon, .section-heading {
                    color: #7c0e27 !important;
                }
                .modal-content .modal-body p, .modal-content h4 {
                    color: #7c0e27 !important;
                }
    /*nav style*/

      /*LOgin*/

.btn-grad-login {
    background-image: linear-gradient(to right, #ef2c61 0%, #7c0e27 51%, #ef2c61 100%);
    text-align: center;
    text-transform: uppercase;
    transition: 0.5s;
    background-size: 200% auto;
    color: white !important;
    box-shadow: 0 0 20px #eee;
    border-radius: 10px;
 
    font-weight: 600 !important;
    font-size: 15px !important;
    width: 110px !important;
    margin: 3px !important;
}

    .btn-grad-login:hover {
        background-position: right center; /* change the direction of the change here */
        color: white !important;
        text-decoration: none;
        font-weight: 600 !important;
    }

    /*datatable*/
    /*.btn{
        font-size:15px !important;
        width: 110px !important;
        margin: 3px !important;
    }*/

    .dx-row .dx-column-lines .dx-header-row{
        background-color: #eaf0f7 !important;
    }

    .dx-datagrid-rowsview .dx-row {
         border-top: 1px solid transparent;
        border-bottom: 1px solid #ddd !important;
    }

    .dx-header-row td{
        font-weight:500 !important;
    }

    .flat-page .form-group{
        margin-bottom: 5px !important;
    }
    .card-body-hod-remarks{
        margin-bottom: 200px;
    }

    .form-group{
        margin-bottom: 0px !important;
    }
    .remarks-field col-md-6{
        margin: -10px auto;
    }

    .flat-label label{
        font-size: 14px;
    }

    /*table styles*/

       .dataTables_filter {
        float: right;
    }

    .dataTables_paginate {
        float: right;
    }

    #gridContainer {
        height: 440px;
    }

    .options {
        padding: 20px;
        margin-top: 20px;
        background-color: rgba(191, 191, 191, 0.15);
    }

    .caption {
        font-size: 18px;
        font-weight: 500;
    }

    .option {
        margin-top: 10px;
    }

        .option > span {
            margin-right: 10px;
        }

        .option > .dx-selectbox {
            display: inline-block;
            vertical-align: middle;
        }
        .demo-container{
            width: 100% !important;
            height:480px !important;
            margin-bottom: 0px !important;
        }
        .dx-row dx-data-row dx-column-lines{
            border-bottom:#ddd !important;
        }

    .dx-header-row{
        background-color: aliceblue !important;
        color: black;
    }
    .dx-datagrid-nowrap, .dx-datagrid-nowrap .dx-header-row>td>.dx-datagrid-text-content{
        white-space: break-spaces !important;
    }


    .print-option{
        display: flex;
        align-items: center;
        /*flex-direction:row;*/
    }

    .border-white-btn{
        border: 2px solid black !important;
        color: black !important;
        width: 80px !important;
    }
    .leadstatus{
        display:flex;
        flex-wrap:wrap;
        justify-content:space-around;
    }
    .leadstatus .bor{
        border:1px solid #999999;
    }
    .wi115{
        width:115px;
    }
    .exebox{
        width: 30px;
        height: 30px;
        background-color: saddlebrown;
    }
    .todaybox{
        width: 30px;
        height: 30px;
        background-color: yellow;
    }
    .exediv{
        display: flex;
        align-items:center;
    }

    /*mttapp style*/
    .paddrl{
        padding: 0px 10px;
    }
    .titlebg{
        display: flex;
        align-items: center;
        background-color: #e5e5e5;
        color: gray;
        padding: 10px 0px;
        margin: 10px 0px;
    }
    .titlebg p{
        margin-bottom: 0px;
    }
    .createbtn{
        background-color: #34b4eb;
        padding: 5px 15px;
        color: #ffffff;
        border-radius: 10px;
        float: right;
        margin: 10px 0px;
    }
    .submitbtn{
        background-color: #34b4eb;
        padding: 5px 15px;
        color: #ffffff;
        border-radius: 5px;
        float: right;
        border: none;
        outline: none;
        margin: 10px 0px;
    }
    .dangerbtn{
         background-color: #f30000;
        padding: 5px 15px;
        color: #ffffff;
        border-radius: 5px;
        float: right;
        border: none;
        outline: none;
        margin: 10px 0px;
    }
    .content-box{
        border: 1px solid #999999;
        margin-top: 10px;
    }
  
    .hideDiv {
   display: none;
}