﻿

.alert-box {
    color: #555;
    border-radius: 10px;
    font-family: Tahoma,Geneva,Arial,sans-serif;
    font-size: 12px;
    padding: 5px;
    margin: 10px;
    background: #e3f7fc;
    border: 1px solid #8ed9f6;
    font-weight: bold;
    text-transform: uppercase;
    text-align: right;
}

input[type="text"], textarea, input[type="password"], input[type="number"], select {
    border-color: #D3D3D3 #C2C2C2 #AFAFAF;
    -ms-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    padding: 5px;
    -moz-resize: none;
    -ms-resize: none;
    -o-resize: none;
    resize: none;
}

    input[type="text"]:hover, textarea:hover, input[type="password"]:hover, input[type="number"]:hover, select:hover {
        background: #FFFFCC;
    }

.bd {
    direction: rtl;
}

.mainTable {
    background-color: #fdfdfd;
    width: 100%;
    direction: rtl;
    /*min-width: 950px*/
}

.timeCell {
    cursor: pointer;
    background-color: Blue;
    color: White;
}

.timeCell2 {
    cursor: pointer;
}

#triggerBackgroundFilter {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    overflow: hidden;
    padding: 0;
    margin: 0;
    background-color: #000;
    -webkit-filter: alpha(opacity=50);
    -moz-filter: alpha(opacity=50);
    -o-filter: alpha(opacity=50);
    filter: alpha(opacity=50);
    -ms-opacity: 0.5;
    opacity: 0.5;
    z-index: 1950;
}

#progressBackgroundFilter {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    overflow: hidden;
    padding: 0;
    margin: 0;
    background-color: #000;
    -webkit-filter: alpha(opacity=50);
    -moz-filter: alpha(opacity=50);
    -o-filter: alpha(opacity=50);
    filter: alpha(opacity=50);
    -ms-opacity: 0.5;
    opacity: 0.5;
    z-index: 950;
}

.progressBackgroundFilter {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    overflow: hidden;
    padding: 0;
    margin: 0;
    background-color: #000;
    -webkit-filter: alpha(opacity=50);
    -moz-filter: alpha(opacity=50);
    -o-filter: alpha(opacity=50);
    filter: alpha(opacity=50);
    -ms-opacity: 0.5;
    opacity: 0.5;
    z-index: 950;
}

#Modalreq {
    position: absolute;
    padding: 10px;
    z-index: 951;
    background-color: #fff;
    border: solid 1px #000;
    width: 55%;
    -moz-min-width: 700px;
    -ms-min-width: 700px;
    -o-min-width: 700px;
    -webkit-min-width: 700px;
    min-width: 700px;
    /*margin-top: 5%;*/
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}

.Modalreq {
    position: absolute;
    padding: 10px;
    z-index: 951;
    background-color: #fff;
    border: solid 1px #000;
    width: 55%;
    -moz-min-width: 700px;
    -ms-min-width: 700px;
    -o-min-width: 700px;
    -webkit-min-width: 700px;
    min-width: 700px;
    margin-top: 5%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}

#processMessage {
    position: fixed;
    top: 17%;
    left: 43%;
    padding: 10px;
    z-index: 1951;
    background-color: #fff;
    border: solid 1px #000;
}

#ModalMessage {
    position: fixed;
    top: 17%;
    left: 30%;
    padding: 10px;
    z-index: 1001;
    background-color: #fff;
    border: solid 1px #000;
}

#BackgroundFilter {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0px;
    right: 0px;
    overflow: hidden;
    padding: 0;
    margin: 0;
    background-color: #000;
    -webkit-filter: alpha(opacity=50);
    -moz-filter: alpha(opacity=50);
    -o-filter: alpha(opacity=50);
    filter: alpha(opacity=50);
    -ms-opacity: 0.5;
    opacity: 0.5;
    z-index: 1003;
}

#ModalMsg {
    position: fixed;
    top: 30%;
    left: 35%;
    padding: 10px;
    z-index: 1004;
    background-color: #fff;
    border: solid 1px #000;
}

.tableInfo TH {
    padding-right: 4px;
    padding-left: 4px;
    padding-bottom: 4px;
    padding-top: 4px;
    font-family: Tahoma, Arial, Helvetica;
}

body {
    font-family: Tahoma;
    height: 100%;
}


.LinkButton {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}

    .LinkButton:hover {
        color: #fff;
        background-color: #286090;
        border-color: #204d74;
    }

.modalPopup {
    background-color: #ffffdd;
    border-width: 3px;
    border-style: solid;
    border-color: Gray;
    padding: 3px;
    width: 250px;
}

.demoarea {
    padding: 20px;
    background: #FFF url(images/demotop.png) no-repeat left top;
}

A {
    font-family: Tahoma;
    font-size: 8pt;
    color: #000066;
    text-decoration: none;
}

TABLE {
    font-size: 8pt;
    color: #000000;
    text-decoration: none;
}

H1 {
    font-family: Tahoma;
    font-size: 10pt;
    color: #800000;
    text-decoration: none;
    font-weight: 800;
    text-align: center;
    padding-top: 10pt;
    height: 40px;
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#ffecec', EndColorStr='#ffffff');
}

h3 {
    font-family: Tahoma;
    font-size: 10pt;
    color: #800000;
    text-decoration: none;
    font-weight: 800;
    text-align: center;
    height: 40px;
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#ffecec', EndColorStr='#ffffff');
}

h2 {
    border-right: #eeeeee 1px solid;
    padding-right: 20px;
    border-top: #eeeeee 1px solid;
    display: block;
    font-weight: 600;
    font-size: 12px;
    padding-bottom: 3px;
    border-left: #eeeeee 1px solid;
    color: #163357;
    padding-top: 3px;
    border-bottom: #eeeeee 1px solid;
    font-family: Tahoma, Verdana;
    background-color: #f7f7f7;
    /*width: 100%;*/
}

.CopyRight {
    font-size: 9pt;
    color: #808080;
}

.NewsTitle {
    font-family: Tahoma;
    font-size: 10pt;
    text-decoration: none;
    color: #FF9900;
    font-weight: 600;
}

.newsPreTitle {
    font-family: Tahoma;
    font-size: 8pt;
    color: #808080;
    text-decoration: none;
}

.rowAlternative {
    background-color: #F3F3F3;
}

.nLink_2 {
    font-family: Tahoma;
    font-size: 8pt;
    color: #000066;
    text-decoration: none;
}

.nLink {
    font-family: Tahoma;
    font-size: 8pt;
    text-decoration: none;
    color: #800000;
}

.titleText_1 {
    font-size: 8pt;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 600;
    background-color: #B00000;
    padding-top: 5px;
    padding-bottom: 5px;
}

.titleText_2 {
    font-family: Tahoma;
    font-size: 8pt;
    color: #800000;
    text-decoration: none;
    font-weight: 600;
}

.nTextBox {
    font-size: 8pt;
    color: #800000;
    text-decoration: none;
    border: 1px solid #800000;
    padding-top: 1px;
    padding-bottom: 1px;
    font-family: Tahoma;
}

.NormalText {
    font-size: 8pt;
    color: #000000;
    text-decoration: none;
}

.RedDatagrid {
    font-size: 8pt;
    color: #000000;
    text-decoration: none;
}

.DatagridRed {
    font-size: 8pt;
    color: #000000;
    text-decoration: none;
}

    .DatagridRed Caption {
        color: #f5cfcf;
    }

.DatagridRedAlternate {
    background-color: #F3F3F3;
    text-align: center;
    color: #e94949;
}

.DatagridRedItem {
    background-color: White;
    text-align: center;
    color: #e94949;
}

.RedDatagridHeader {
    font-family: Tahoma;
    font-size: 8pt;
    color: #800000;
    text-decoration: none;
    font-weight: 600;
    background-color: #ffecec;
    text-align: center;
}

.RedDatagridAlternate {
    background-color: #F3F3F3;
    text-align: center;
    height: 25px;
}

    .RedDatagridAlternate:hover {
        background-color: #fff5be;
    }

.DGAlternate {
    background-color: #F3F3F3;
}

.DGItem {
    background-color: White;
}

.RedDatagridItem {
    background-color: White;
    text-align: center;
    height: 25px;
}

    .RedDatagridItem:hover {
        background-color: #fff5be;
    }

.SelectedDataGridItem {
    background-color: #ffee8f;
    text-align: center;
    height: 25px;
}

.chartDatagridHeader {
    font-family: Tahoma;
    font-size: 8pt;
    text-decoration: none;
    font-weight: 600;
    height: 25px;
    text-align: center;
}

.chartDatagridItem {
    text-align: center;
    height: 25px;
}

.chartDatagridAlternate {
    text-align: center;
    height: 25px;
}


.RedDatagridPager {
    text-align: center;
    color: #800000;
    background-color: #ffecec;
}

.RedDatagridSelected {
    font-weight: 600;
    font-size: 8pt;
    color: #800000;
    font-family: Tahoma;
    background-color: lemonchiffon;
    text-align: center;
    text-decoration: none;
}

.ShakhesIcon {
    font-family: Wingdings;
    font-size: 12px;
}

textarea {
    font-family: tahoma;
}

.marq {
    border: #dcdcdc thin solid;
}


SELECT {
    font-family: Tahoma;
    font-size: 8pt;
}

.TblOne {
    border-top-width: 1px;
    border-right: #c0c0c0 1px solid;
    border-left: #c0c0c0 1px solid;
    border-top-color: #c0c0c0;
    border-bottom: #c0c0c0 1px solid;
}

.TblTwo {
    border-right: #c0c0c0 1px solid;
    border-top: #c0c0c0 1px solid;
    border-left: #c0c0c0 1px solid;
    border-bottom: #c0c0c0 1px solid;
}

.MainForm_admin {
    border-right: silver 1px solid;
    border-top: silver 1px solid;
    border-left: silver 1px solid;
    border-bottom: silver 1px solid;
}

.Search {
    left: 660px;
    position: absolute;
    top: 220px;
}


.NewsTitle {
    font-weight: 600;
    font-size: 10pt;
    color: #0000cc;
}

.NewsBody {
    font-size: 9pt;
    color: #000000;
    text-align: justify;
    text-decoration: none;
}

.NewsInfo {
    font-size: 8pt;
    color: darkgoldenrod;
    text-decoration: none;
}

.MenuNormal a {
    border-right: #FFFFFF 1px solid;
    padding-right: 3px;
    border-top: #FFFFFF 1px solid;
    padding-left: 3px;
    font-weight: 600;
    font-size: 12px;
    padding-bottom: 3px;
    border-left: #FFFFFF 1px solid;
    color: #FFFFFF;
    padding-top: 3px;
    border-bottom: #FFFFFF 1px solid;
    background-color: #C60000;
    text-decoration: none;
}

    .MenuNormal a:hover {
        border-right: #800000 1px solid;
        padding-right: 3px;
        border-top: #800000 1px solid;
        padding-left: 3px;
        font-weight: 600;
        font-size: 12px;
        padding-bottom: 3px;
        border-left: #800000 1px solid;
        color: #B23535;
        padding-top: 3px;
        border-bottom: #800000 1px solid;
        background-color: #FFD7D7;
        text-decoration: none;
    }

INPUT {
    color: #800000;
    text-decoration: none;
    font-family: Tahoma;
    font-size: 8pt;
}

select {
    border: 1px solid lightgrey;
    color: #0000ff;
    background-color: #ffffee;
    margin-bottom: 0px;
}

.Cmb {
    direction: rtl;
    text-align: center;
}



.btn,
.RedDatagridItem td input[type="button"],
.RedDatagridItem td input[type="submit"],
.RedDatagridSelected td input[type="button"],
.RedDatagridSelected td input[type="submit"],
.RedDatagridAlternate td input[type="button"],
.RedDatagridAlternate td input[type="submit"], #popup_ok {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}

    .btn:hover,
    .RedDatagridItem td input[type="button"]:hover,
    .RedDatagridSelected td input[type="button"]:hover,
    .RedDatagridAlternate td input[type="button"]:hover,
    .RedDatagridItem td input[type="submit"]:hover,
    .RedDatagridSelected td input[type="submit"]:hover,
    .RedDatagridAlternate td input[type="submit"]:hover, #popup_ok:hover {
        color: #fff;
        background-color: #286090;
        border-color: #204d74;
    }


.btn-success {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}

    .btn-success:hover {
        color: #fff;
        background-color: #449d44;
        border-color: #398439;
    }

.btn-cancel, #popup_cancel {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #333;
    background-color: #fff;
    border-color: #ccc;
    background-color: #fbfbd5;
}

    .btn-cancel:hover, #popup_cancel:hover {
        color: #333;
        background-color: #fff792;
        border-color: #adadad;
    }

.btn-delete {
    display: inline-block;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}

    .btn-delete:hover {
        color: #fff;
        background-color: #c9302c;
        border-color: #ac2925;
    }

.btnHeader {
    background: white;
    font-family: Tahoma;
    font-size: 8pt;
    border-color: #75B7CB #5D9BB2 #49859D #5E9DB3;
    -ms-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
    max-width: 150px;
    min-height: 30px;
    color: black;
}

    .btnHeader:hover {
        background: linear-gradient(#ced2d8 0%, #eef 100%);
        border: 1px solid #0099CC;
        cursor: pointer;
    }

button {
    border: 1px solid #006;
    background: #ccf;
    font-family: Tahoma;
    font-size: 8pt;
    height: 19px;
}

    button:hover {
        border: 1px solid #0099CC;
        background: #eef;
        cursor: hand;
    }

.btnGrd {
    border: 1px solid #0099CC;
    background: white;
    cursor: pointer;
    height: 19px;
}

    .btnGrd:hover {
        border: 1px solid #006;
        background: #ccf;
        font-family: Tahoma;
        font-size: 8pt;
    }

.btnGrdGroup {
    border: 1px solid #0099CC;
    background: white;
    cursor: default;
}

    .btnGrdGroup:hover {
        border: 1px solid #006;
        background: #ccf;
        font-family: Tahoma;
        font-size: 8pt;
    }

.capt1 {
    background-image: url('../Images/BT.png');
    font-family: Arial;
    font-size: 10pt;
    font-weight: bold;
}

.cap {
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    height: 24px;
    /* background-image: url(../images/Bottom_BG.jpg); */
    border-top: 0px;
    text-align: center;
    color: Yellow;
    font-size: 10pt;
    background-color: #444141;
    border-radius: 3px;
}

    .cap:hover {
        font-family: tahoma;
        color: #aaaaaa;
    }

.dv {
    border: 1px outset #000000;
    width: 400px;
}

table table {
    font-family: Tahoma;
    font-size: 8pt;
    margin-bottom: 0px;
}

.Ddl {
    -moz-min-width: 100px;
    -ms-min-width: 100px;
    -o-min-width: 100px;
    -webkit-min-width: 100px;
    min-width: 100px;
    width: 100px;
}

.EditDevice {
    display: none;
}

.TdLblSty {
    vertical-align: middle;
    text-align: left;
    max-width: 120px;
    white-space: nowrap;
}

.TdEditorSty {
    vertical-align: middle;
    text-align: right;
}


caption {
    /*border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;*/
    height: 24px;
    /* background-image: url(../images/Bottom_BG.jpg); */
    border-top: 0px;
    text-align: center;
    color: Yellow;
    font-size: 10pt;
    /*background-color: #444141;*/
    background-color: #696a6b;
    border-radius: 3px;
}

    caption:hover {
        font-family: tahoma;
        color: #aaaaaa;
    }


.cap1 {
    font-family: Tahoma;
    font-size: 10pt;
    color: #800000;
    text-decoration: none;
    font-weight: 800;
    text-align: center;
    padding-top: 10pt;
    height: 40px;
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#ffecec', EndColorStr='#ffffff');
}

.menu {
    font-family: tahoma;
    background-color: #FFCC99;
    border: thin solid #CC3300;
    color: #FFFFFF;
}

.Captionkartable {
    font-size: 14px;
    text-align: center;
    height: 20px;
    border-bottom-style: solid;
    border-bottom-width: thin;
    border-bottom-color: #000000;
    background-color: #eeeeee;
}

.ParallelApprove {
    background-color: #FFFFEC;
    border-color: #555555;
    border-style: Solid;
    border-width: 2px;
    padding: 5px;
    width: 95%;
    font-weight: bold;
    margin-right: 10px;
    border-radius: 4px;
}

.footer {
    /*position: fixed;*/
    /*display: none;*/ /*بعدا انجام می شود*/
    right: 0;
    bottom: 0;
    left: 0;
    padding: 5px;
    background-color: #efefef;
    text-align: center;
    height: 50px;
    width: 98%;
    margin: 0 auto;
    border: 1px #ddd solid;
    border-radius: 3px;
    min-width: 990px;
}


.footerLogin {
    position: fixed;
    /*display: none;*/ /*بعدا انجام می شود*/
    right: 0;
    bottom: 0;
    left: 0;
    padding: 5px;
    background-color: #efefef;
    text-align: center;
    height: 50px;
    width: 98%;
    margin: 0 auto;
    border: 1px #ddd solid;
    border-radius: 3px;
}

.dateText {
    min-width: 55px;
    width: 80%;
}

.btnGroup {
    display: inline-block;
    border-width: 1px;
    border-style: Solid;
    padding: 5px;
    background-color: lightcyan;
    border-radius: 4px;
}

    .btnGroup:hover {
        background-color: lightblue;
    }

.dropdown {
    position: relative;
    display: inline-block;
    position: relative;
    display: inline-block;
    padding: 5px;
    background: #e3e4e6;
    border: 1px transparent solid;
    border-radius: 3px;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1200;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.desc {
    padding: 15px;
    text-align: center;
}

    .desc:hover {
        background-color: #dddddd;
    }

    .desc .btn-red {
        color: red;
        font-size: 15px;
    }

        .desc .btn-red:hover {
            color: #a22121;
        }





.imgHeader {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    max-width: 128px;
    max-height: 128px;
}

.headerPopup {
    cursor: pointer;
    background-color: #DDDDDD;
    border: solid 1px Gray;
    color: Black;
    text-align: center;
    padding: 5px;
    display: none;
}

.padR5 {
    padding-right: 5px;
}

.padL5 {
    padding-left: 5px;
}

.rightContainer {
    float: right;
    width: 15%;
    vertical-align: top;
    min-height: 860px;
    /*background-image: url(img/sapco.png);*/
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: auto;
}

.lblError {
    color: Red;
    /* font-weight: bold; */
    width: 100%;
    display: inline-block;
    height: 30px;
    vertical-align: middle;
    line-height: 30px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
}

.autoHeight {
    height: auto;
}

.selectedDataFileRow {
    border-bottom: 2px #5858e6 solid;
}

.selectedDataFileCell {
    border: 2px #5858e6 solid;
    animation: blinker 1s linear infinite;
}

.DataFileCell {
    animation: blinker 1s linear infinite;
}

.selectedDataFileCell2 {
    background-color: #5858e6;
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
    50% {
        opacity: 0.6;
    }
}

.left {
    float: left;
}

.right {
    float: right;
}
/***************custom-combobox************************/
.custom-combobox {
    position: relative;
    display: inline-block;
}

    .custom-combobox a {
        margin: 0;
    }

.custom-combobox-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: -1px;
    padding: 0;
}

.custom-combobox-input {
    margin: 0;
    padding: 5px 10px;
    z-index: 50000;
}

.ui-draggable, .ui-droppable {
    background-position: top;
}

.headerDivMaster {
    background-image: url('images/Header.jpg');
    width: 100%;
    -ms-background-repeat: repeat;
    background-repeat: repeat;
    height: 160px;
    min-height: 160px;
    max-height: 160px;
}

.btn-add {
    height: 40px;
    width: 35px;
    border-width: 0px;
    border: 2px solid black;
    border-radius: 5px;
    padding: 4px;
}

    .btn-add:hover {
        background-color: #d8e8de;
    }

.btn-del {
    height: 40px;
    width: 35px;
    border-width: 0px;
    border: 2px solid black;
    border-radius: 5px;
    padding: 4px;
}

    .btn-del:hover {
        background-color: #ff000014;
    }
