@import url("font.css");

.btn.focus, .btn:focus{outline:5px auto -webkit-focus-ring-color}
body{background:#fff;color:#222}
.container{max-width:1280px}
h1, h2, h3, h4, p, ul{margin:0}
ul{list-style:none}
.top-padding{padding-top:62px;min-height:calc(100vh - 33px)}
.cstm-field>label{color:#777;font-size:13px;margin-bottom:8px;display:block}
.form-group{margin-bottom:16px}
.form-control{border-color:#ccc}
.form-control:disabled, .form-control[readonly]{background:rgba(204, 204, 204, 0.2)}


.edit{fill: #3b2db2;overflow: inherit}
#line{opacity:0;transition: all 0.3s ease-in-out}
.edit:hover #line{opacity:1}
#pencil{transition: all .3s ease-in-out;transform-origin: center;transform-box: fill-box}
.edit:hover #pencil{transform: translate(10px, -2px) rotate(-33deg)}

.mail{overflow: inherit;}
.mail-arrow{transition: all .3s ease-in-out;}
.mail:hover .mail-arrow{transform: translate(3px, 0px);}

/************************************ Mailer Repositry **************************************/
.top-head{font-size:18px;margin:20px 0;font-weight:700}
.white-box{padding:22px 24px;box-shadow:0px 5px 20px rgba(102, 128, 255, 0.17);border:1px solid rgba(51, 153, 255, 0.5);border-radius:5px}
.vlnSearch{position:relative}
.vlnSearch>label{font-size:13px;color:#777;margin-bottom:8px;display: block}
.twitter-typeahead{width:100%}
.tt-menu{border:1px solid #e0e0e0;width:100%;border-radius:4px;background:#fff}
.tt-suggestion{cursor:pointer;padding:4px 5px}
.tt-suggestion:hover{background-color:#f8f9fa}
.vlnSearch .mail-search{position:absolute;bottom:8px;left:8px;font-size:18px}
.vlnSearch .twitter-typeahead .form-control{padding-left:32px}

.illu-img{position:absolute;top:-46px;left:100px}
.mailer-create{float:right;background:none;margin-top:-9px; text-transform:capitalize;color:#3399FF}
.mailer-create>i{margin-right:5px;font-size:18px;vertical-align:text-bottom}
.info-icn{font-size:18px;color:#777}
.info-icn:hover{color:#3399FF}
.table{background:#fff;margin:0}
.bulk-table.table tbody tr td{white-space:nowrap;font-size:14px;color:#222;border-top:0;border-bottom:0;padding:10px;border-bottom:1px solid #E0E0E0}
.bulk-table tbody tr.hover{transition:.3s;background-color:#F5F5F5}
.datatableWrapper .DTFC_LeftHeadWrapper, .datatableWrapper .DTFC_LeftBodyWrapper{border-right:1px solid #e0e0e0}
.datatableWrapper .DTFC_RightHeadWrapper, .datatableWrapper .DTFC_RightBodyWrapper{border-left:1px solid #e0e0e0}

.bulk-table.table thead tr th{white-space:nowrap;font-size:14px;color:#222;font-weight:600;background-color:#E6F3FF;border-top:0;border-bottom:0;padding:10px}
.mailer-table{margin-top:24px;border-radius:5px;margin-bottom:24px;box-shadow:0px 5px 20px rgb(102 128 255 / 17%);border:1px solid rgba(51, 153, 255, 0.5)}
/* data table formating */
.btmDom{margin:10px 0;padding:0 26px}
.dataTables_length label::after{content:"\e900";font-family:'mailer' !important;font-size:8px;position:absolute;right:7px;top:10px;cursor:pointer;pointer-events:none;font-weight:600; transform:rotate(90deg)}
.dataTables_length label{border:1px solid #ccc;border-radius:4px;position:relative;margin-bottom:0}
.custom-select{background:#fff} 
.dataTables_length{float:right;margin-right:20px;margin-top:10px}
#DataTables_Table_0_paginate, .dataTables_paginate{float:right;margin-top:10px}
#DataTables_Table_0_info{margin-top:10px}
.dataTables_info{margin-bottom:16px; color:#777777; font-size:12px;vertical-align:sub}
.custom-select-sm{height:calc(1.75em + 0.5rem + 2px);padding-top:.25rem;padding-bottom:.25rem;padding-left:0.5rem;font-size:.875rem;border:0}
.page-item.disabled .page-link{color:#222222; font-size:8px; border-color:#ccc;padding:10px 11px}
.page-item:last-child .page-link{color:#222222; font-size:8px; border-color:#ccc;padding:10px 11px}
.page-item:first-child .page-link{color:#222222; font-size:8px; border-color:#ccc;padding:10px 11px}
.page-item .page-link{color:#222}
.page-item.active .page-link{background-color:#E6F3FF;border-color:#ccc;color:#222;padding:6.5px 11px}
.page-link{padding:.48rem .75rem}
.bulk-table tr th:nth-child(5), .bulk-table tr td:nth-child(5){text-align:center}
.mail-arrrowRight.rotateMinus{transform:rotate(180deg);display:inline-block}
.w-100{width:100%!important}
/* toggle Switch */
.switch{position:relative;display:inline-block;margin:0;top:10px}
.switch input{ opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s;height:7px;width:35px}
.slider:before{position:absolute;content:"";height:15px;width:15px;left:0;bottom:-4px;background-color:#ccc;-webkit-transition:.4s;transition:.4s}
input:checked + .slider{background-color:rgba(115, 204, 7, 0.38)}
input:focus + .slider{box-shadow:0 0 1px #2196F3}
input:checked + .slider:before{-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);background-color:#73CC07}
/* Rounded sliders */
.slider.round{border-radius:4px}
.slider.round:before{border-radius:50%}
.info-ul>li{font-size:14px;color:#222;margin-bottom:16px}
.info-ul>li:last-child{margin-bottom:0}
.info-ul>li>label{display:block;margin-bottom:8px;font-size:13px;color:#777}
#view-info .modal-dialog{max-width:800px}
.modal-header > h4{font-size:16px;font-weight:600}
.empty-screen{ text-align:center;padding-top:150px;padding-bottom:20px}
.empty-screen img{margin-bottom:16px}
.empty-screen p{color:#777}
.empty-screen-pre{padding-top:100px}
.empty-screen-pre .mailer-create{float:none;margin:20px 0}
.editmail{color:#3399FF}

.close span{font-size:14px;font-weight: 600}

/******************************* Update Mailer ***********************************/
.slider1, .slider2, .slider3{width:91px !important;background:#E6F3FF;color:#222;border:1px solid #3399FF;display:inline-block;border-radius:1px;position:absolute;bottom:0;top:0;transition:all .2s linear}
.edTab{display:inline-block;position:relative;border:1px solid #ccc;border-radius:4px}
.edTab>li{float:left;border-right:1px solid #ccc}
.edTab>li:last-child{border-right:0}
.edTab .homeBtn{width:91px;line-height:22px;padding:4px;margin:0;color:#777}
.edTab .homeBtn i{vertical-align:middle}
.edTab li a.active .homeBtn{color:#222;font-weight:600}
.edTab>li>a{display:block;position:relative;text-align:center}
.edTab input[type="radio"]{opacity:0;cursor:pointer;width:100%;position:absolute;height:100%}
.redColor{color:#F44436 !important}
.amberColor{color:#FFC107 !important}
.blueColor{color:#6680FF !important}
.mailTab .homeBtn i{color:#3399FF;font-size:16px}
.note-editor{border:1px solid #ccc}
.note-toolbar-wrapper .btn{padding:3px 6.6px}
.popover-content.note-children-container{display:none}
.update-ul>li{border-bottom:1px solid #E0E0E0;padding-bottom:16px;margin-bottom:16px}
.update-ul>li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.update-ul>li>label{color:#777;font-size:13px;margin-bottom:8px;display:block}
.email-ol{padding:0;margin:0;list-style:none}
.email-ol>li{display:inline-block;margin-bottom:8px;margin-right:20px}
.email-ol>li>span{width:24px;height:24px;line-height:24px; background:#0078D4;text-align:center;display:inline-block;border-radius:50%;text-transform:uppercase;color:#fff}
.attach{color:#EE8800;font-size:16px}
.btn-secondary:disabled{background:none;color:#777}

/******************************* Reports ***********************************/
.breadcrumb{background:none;padding:0;margin:20px 0}
.breadcrumb>li{font-weight:600;margin-left:2px}
.mailReportTab{box-shadow:0px 5px 20px rgba(102, 128, 255, 0.17);border:1px solid rgba(51, 153, 255, 0.5);border-radius:5px}
.mailReportTab>li{border:0}
.slider3{margin-top:2px;height:38px;background:#5CADFF;width:87px !important;border-radius:4px}
.mailReportTab .homeBtn{color:#525252;padding:10px 4px}
.mailReportTab li a.active .homeBtn{color:#fff;font-weight:600}
.btnFilt .btn{padding:5px 16px;margin:0 5px 0 0}
.tbl-elips>span{text-overflow:ellipsis;overflow:hidden;width:64%;white-space:nowrap;display:inline-block;vertical-align:middle}
.tbl-elips>i{vertical-align:middle;cursor:pointer; display:none}
.send-mail{font-size:22px;color:#222}
.mailTbl thead tr th:last-child, .mailTbl tbody tr td:last-child{text-align:center}
.mailTbl tbody tr.hover{transition:.3s;background-color:#F5F5F5}
.mailTbl.table tbody tr.hover td, .mailTbl.table tbody tr.hover td .send-mail{color:#3399FC}
.mailTbl tbody tr.hover i{display:inline-block}
.copy-btn{margin-top:12px;text-align:center}
.copy-btn>button{padding:7px 16px;color:#777;background:none;text-transform:capitalize}
.copy-btn>button>i{font-size:18px;color:#3399FC;vertical-align:text-bottom}
.copy-btn>button:hover>i{color:#fff}
.webui-popover.bottom > .webui-arrow{border-bottom-color:#fff} 
.webui-popover.top > .webui-arrow{border-top-color:#fff}
.webui-popover.right > .webui-arrow{border-right-color:#fff}
.webui-popover.left > .webui-arrow{border-left-color:#fff}
.histryScrll p{max-height:190px;overflow:auto;word-break:break-word}


/************************************************* Template Mover ***************************************/
.dev-qa{margin: 24px 0}
.deva{border: 0;box-shadow: none;border-radius: 0}
.deva li{box-shadow: 0px 5px 20px rgb(102 128 255 / 17%);border: 1px solid rgba(51, 153, 255, 0.5);margin-right: 8px;border-radius: 5px}
.edTab>li:last-child{border-right:1px solid rgba(51, 153, 255, 0.5); }
.deva li a.active .homeBtn{font-weight: 500;color:#fff}
.deva .homeBtn{width: inherit;border-radius: 5px;padding: 11px 24px}
.slider4{background:#3399FF;border-radius: 5px;color:#fff;display:inline-block;position:absolute;bottom:0;top:0;transition:all .2s linear}
.dot-border{border: 1px dashed #3399FC}
.mt16{margin-top: 16px !important}
.devHead{font-size: 16px;font-weight: 700;margin-bottom: 10px}
.ht512{height: 550px; overflow: auto;margin: -22px -24px}
.No-data{padding-top: 160px; text-align: center}
.No-data p{color:#777;margin-top: 15px}
.No-data p span{font-weight: 600;display: block}
input.cstmChekBox{width:16px}
input.cstmChekBox[type='checkbox']:after, input.cstmChekBox[type='radio']:after{font-size:10px;line-height:14px;vertical-align:middle;content:'';display:inline-block;width:16px;height:16px;margin-top:-8px;border:1px solid #ccc;border-radius:2px;background:#fff;text-align:center;cursor:pointer}
input.cstmChekBox[type='checkbox']:checked:after, input.cstmChekBox[type='radio']:checked:after{content:'\e913';border-color:#2196f3;font-family:'mailer' !important;background:#2196f3;color:#fff !important}
input.cstmChekBox[type='radio']:after{border-radius:50%}
input.cstmChekBox[type='radio']:checked:after{content:'';background:rgb(33,150,243);background:radial-gradient(circle, rgba(33,150,243,1) 48%, rgba(255,255,255,1) 52%)}
.devUl>li{border-bottom: 1px solid #e0e0e0;padding:25px}
.devUl>li>div{display: inline-block;vertical-align: middle}
.firstColumn{width: 5%}
.secondColumn{width: 63%}
.secondColumn span{font-weight: 600;font-size: 16px;margin-bottom: 10px}
.secondColumn p{color:#777}
.thirdColumn{width: 30%;text-align: right}
.thirdColumn p{font-weight: 600;margin-bottom: 10px}
.thirdColumn span{border: 1px solid #E0E0E0;border-radius: 2px;font-size: 12px;padding:4px 8px;display: inline-block}
.moveBTn{text-align: center;position: absolute;bottom:-15px;left: 0;right: 0}



.subAllMdl{text-align:center;padding:14px 14px 38px}
.subAllMdl p{font-size:16px;padding-bottom:30px;margin-top:25px;font-weight:600}

.table {width:100% !important}


.dataTables_wrapper .dataTables_length select {
    appearance: none;
    width: 40px
}

.dataTables_length label::after {
    top: 6px
}
.dataTables_wrapper .dataTables_paginate .paginate_button{padding:0}
.pagination{margin:0 0 20px}