html {
  position: relative;
  min-height: 100%;
}

.mr {
  margin-right: 5px;
}

.ml {
  margin-left: 5px;
}

body > .container {
    padding: 70px 5px 0 0;
    min-width: 100%;
}

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 26px;
    line-height: 26px;
    background-color: #0c2b41;
    background: linear-gradient(0deg,rgba(6, 22, 46, 1) 0%, rgba(7, 36, 82, 1) 26%, rgba(6, 56, 97, 1) 50%, rgba(7, 80, 125, 1) 75%, rgba(8, 109, 163, 1) 100%);
    /*background-image: url('../images/footerbg.png');*/
    border: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 10px;
    line-height: 30px;
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

@media (min-width: 768px) {
  .footer { font-size: 12px; line-height: 60px; }
}

code {
  font-size: 80%;
}

span.active { 
    font-weight: bold; 
}

div#login { 
    max-width: 35em; 
}

.dash-text {
    font-size: 24px;
    font-weight: bold;
    margin-top: 3px;
    margin-left: 0px !important;
}

.dash-footer {
    height: 50px !important;
    background-color: #062d52b9 !important;
}

.dash-footer-user {
    height: 55px !important;
    background-color: #062d52ed !important;
}

.dash-sysinfo {
    font-size: 14px;
    font-weight: bold;
    text-align: left;
    color: #ffffff;
}

.dash-tab-entries {
    font-size: 18px !important;
    font-weight: bold !important;
    text-align: left;
    color: #ffffff;
}

.dash-tab-entries-act {
    margin-left: 10px !important;
}

.dash-svbg {
    background-color: rgba(17, 88, 159, 0.736) !important;
    padding-top: 10px !important;
    margin-bottom: 0px !important;
}

.dash-svbg-bt {
    margin-bottom: 0px !important;
}

.table.table-dash thead th {
    border-bottom: 2px solid #000000 !important;
    background-color: #0b5dd7d0;
}

.table.table-dash tbody tr:first-child td {
    padding-top: 10px;
}

.table.table-dash tbody tr:last-child td {
    padding-bottom: 10px;
}

.dash-tab-entries-state {
    padding-left: 0px !important;
}

.table-hover {
    background-color:darkred;
}

.entry-sysinfo {
    font-size: 18px !important;
    font-weight: bold !important;
    text-align: left;
    color: #ffffff;
    margin-bottom: 10px !important;
}

.panel-body-dash {
    border-radius: 8px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-color: #000;
    background-color: #165aac5d !important;
}

.table-userdb {
    background-color: #165aac5d !important;
}

.table-carddav {
    background-color: #165aac5d !important;
    color: white;
    font-size: 14px;
}

.body-certificate {
    height: 100% !important;
}

.table-dash {
    font-size: 17px;
    font-weight: bold;
    text-align: left;
    border: 0px solid transparent !important;
    color: white;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    background-color: unset !important;
}

.dash-td {
    padding-left: 20px !important;
    font-size: 17px !important;
    font-weight: bold !important;
}

.dash-td-title {
    font-size: 20px !important;
    font-weight: bold !important;
}

.dash-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.panel-body-dav {
    border-radius: 8px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-color: #000;
    background-color: #165aac5d !important;
}

.backup-title {
    color: #ffffff;    
    background: #17bd6c;
    background: linear-gradient(180deg,rgba(23, 189, 108, 1) 0%, rgba(17, 159, 90, 1) 25%, rgba(13, 128, 57, 1) 50%, rgba(10, 102, 42, 1) 76%, rgba(7, 48, 16, 1) 100%);
    border-radius: 14px !important;  
    box-shadow: 0px 1px 5px 4px rgba(26,131,202,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(26,131,202,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(26,131,202,0.75) !important;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    max-width: 260px !important;
    height: 36px;  
    width: 100% !important;  
    padding: 1px 18px;
    border: 2px solid black !important;
}

.backup-btn {
    display: block;
    padding: 10px 10px;
    margin-top: 1px;
    margin-left: 2px;
    margin-right: -92px;
    font-size: 15px;
    color: #fff;
    background-color: #761947;
    border: 2px solid #062d52;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    height: 42px;
}

.backup-create-btn {
    display: inline-block;
    padding: 10px 10px;
    font-size: 15px;
    font-weight: bold;
    color: #fff;
    background-color: #761947;
    border: 2px solid black;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    height: 42px;
    box-shadow: 2px 2px 4px rgba(1, 4, 18, 0.68) !important;
}

.backup-delete-btn {
    display: inline-block;
    padding: 10px 10px;
    font-size: 15px;
    font-weight: bold;
    color: #fff;
    background-color: #8e1414;
    border: 2px solid black;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    height: 42px;
    margin-left: -12px;
    box-shadow: 2px 2px 4px rgba(1, 4, 18, 0.68) !important;
}

.backup-delete-btn:hover {
    display: inline-block;
    padding: 10px 10px;
    font-size: 15px;
    font-weight: bold;
    color: #fff;
    background-color: #f64242;
    border: 2px solid black;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    height: 42px;
    margin-left: -12px;
    box-shadow: 2px 2px 4px rgba(1, 4, 18, 0.68) !important;
}

.backup-create-db {
    display: inline-block;
    padding: 10px 10px;
    font-size: 15px;
    font-weight: bold;
    color: #fff;
    background-color: #761947;
    border: 2px solid black;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.3s ease;
    height: 42px;
    box-shadow: 2px 2px 4px rgba(1, 4, 18, 0.68) !important;
}

.backup-create-btn:hover,
.backup-create-btn:active,
.backup-create-btn:focus,
.backup-create-db:hover,
.backup-create-db:active,
.backup-create-db:focus {
    background-color: #f18d24;
    border: 2px solid black;
    color: white;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 8px;
    box-shadow: 2px 2px 4px rgba(1, 4, 18, 0.68) !important;
}

.backup-btn:hover,
.backup-btn:focus,
.backup-btn:active,
.backup-full-btn:hover,
.backup-full-btn:active,
.backup-full-btn:focus {
    background-color: #e69138;
    border: 2px solid black;
    color: white;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 8px;
    box-shadow: 2px 2px 4px rgba(1, 4, 18, 0.68) !important;
}

.no-backup-message {
    font-size: 18px;
    color: #ffffff;
    background-color: #f2dede;
    border: 2px solid #010b15;
    padding: 12px;
    border-radius: 14px;
    margin-top: 20px;
    box-shadow: 2px 2px 4px rgba(1, 4, 18, 0.68) !important;
}

.backup-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    padding-left: 10px;
    color: white !important;
}

.backup-table th {
    background-color: #921453;
    background: linear-gradient(180deg,rgba(186, 24, 105, 1) 0%, rgba(146, 20, 83, 1) 26%, rgba(112, 15, 63, 1) 51%, rgba(79, 9, 44, 1) 78%, rgba(38, 3, 21, 1) 100%);    
    font-weight: bold;
    font-size: 17px;
    color: #ffffff;
    text-align: left;
    padding: 0px;
    padding-left: 12px;
    padding-bottom: 6px;
    border: 0px !important;   
    border-bottom: 3px solid black;
    border-top: 1px solid black !important;
    border-left: 2px solid black;
    vertical-align: middle;
}

.backup-header {
    height: 60px;
}

.backup-table td {
    padding: 6px;
    padding-left: 12px;    
    border: 0px !important;
}

.backup-table tr {
    background-color: #1771bfb6 !important;
    font-weight: 550;
    font-size: 16px;
    height: 50px;
    border-bottom: 2px solid black;
}

.backup-table tr:hover {
    background-color: #5e0c36b9 !important;
}

.backup-table-cell {
    color: #ffffff;
}

.backup-table-cell-size {
    width: 111px;
    text-align: center;
}

th.backup-table-cell-bkp {
    background-color: #003463;
    color: #ffffff;
    text-align: center;
}

th.backup-table-cell-nobkp {
    background-color: #0b5394;
    color: #ffffff;
}

.srv-bkp-footer {
    background-color: #003463;
}

body {
    background-color: #0b0228;
    color: #ffffff;
    background-image: url('../images/bodybg.png');
    background-repeat: no-repeat;
    background-size: cover;
/*    background-position: center center;*/
    padding-top: 90px;
}

.nav-tabs {
    background-color: #0a7022;
    border-bottom: 1px solid black !important;
    font-size: 16px;
    font-weight: bold;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
    color: white; 
    background-color: #003463;
}

.table-head-label {
    background-color: #4c051c;    
}

.navbar {
    min-height: 64px;
    max-height: 64px;
    padding: 3px;
    z-index: 1050;
}

.navbar .navbar-header,
.navbar .container {
    height: 100%;
    display: flex;
    align-items: center;
}

.navbar-default {
    background: #0C2B41;
    background: linear-gradient(180deg,rgba(6, 22, 46, 1) 0%, rgba(7, 36, 82, 1) 12%, rgba(7, 80, 125, 1) 33%, rgba(8, 109, 163, 1) 57%, rgba(7, 80, 125, 1) 79%, rgba(10, 62, 97, 1) 91%, rgba(3, 34, 64, 1) 100%);
    background-image: url('../images/headerbg.png');
    border: 0px;
    border-bottom: 3px solid black; 
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;    
}

.navbar-brand {
    position: absolute;
    top: 0;
    right: 0;
    height: 50px;
    padding: 0px 10px 0px 0px;
    margin-top: 0px;
    z-index: 1;
}

.navbar-collapse {
    padding-right: 15px;
    padding-left: 24px;
    border-top: 0px;
}

.navbar-collapse.in {
    overflow-y: unset;
}

.navbar-nav {
    margin: 0px -25px;
    margin-top: -5px;
}

.navbar-default .navbar-nav > li a {
    color: #ffffff;
}

.navbar-default .navbar-nav > li a:hover {
    color: #06c60c;
}

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
    color: #ffffff;
    background-color: #0b5394;
}

.navbar-header a.navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
}

.btn-default {
    color: #ffffff;
    background-color: #0b5394;
    border: 2px solid #082133;
    border-radius: 8px;
    transition: background-color 0.3s ease;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
}

.btn-default:hover, .btn-default:active {
    color: #ffffff;
    background-color: #248132;
    border: 2px solid #082133;
    border-radius: 8px;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
}

.btn-action {
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    height: 30px !important;
    width: 60px !important;
    font-size: 14px;
    font-family: inherit;
    color: #fff;
    background-color: #eb7a10;
    border-radius: 4px;
    cursor: pointer;
    border: none;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
}

.btn-action:hover {
    background-color: #bc1e68;
}

.btn-action-start {
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    height: 24px !important;
    width: 38px !important;
    font-size: 14px;
    font-family: inherit;
    color: #fff;
    background-color: rgb(9, 101, 9);
    border: 2px solid black !important;
    transition: background-color 0.3s ease;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
}

.btn-action-start:hover {
    background-color: rgb(24, 213, 14);
    border: 2px solid #ddefff !important;
    transition: background-color 0.3s ease;
}

.btn-action-stop {
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    height: 24px !important;
    width: 38px !important;
    font-size: 14px;
    font-family: inherit;
    color: #fff;
    background-color: rgb(110, 13, 37);
    border: 2px solid black !important;
    transition: background-color 0.3s ease;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
}

.btn-action-stop:hover {
    background-color: rgb(255, 38, 38);
    border: 2px solid #ddefff !important;
    transition: background-color 0.3s ease;
}

.btn-action-restart {
    all: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    height: 24px !important;
    width: 38px !important;
    font-size: 14px;
    font-family: inherit;
    color: #fff;
    background-color: rgb(235, 126, 16);
    border: 2px solid black !important;
    transition: background-color 0.3s ease;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
}

.btn-action-restart:hover {
    background-color: rgb(31, 150, 235);
    border: 2px solid #ddefff !important;
    transition: background-color 0.3s ease;
}

.svrunning {
    font-size: 15px !important;
    color: #1dff15 !important;
    background-color: #08192498 !important;
    padding: 6px 8px;
    border-radius: 8px;
    border: 2px solid #041536 !important;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
}

.svstop {
    font-size: 15px !important;
    color: #db2019 !important;
    background-color: #0c293b98 !important;
    padding: 6px 8px;
    border-radius: 8px;
    border: 2px solid #041536 !important;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
}

.tab-width {
    width: 108px !important;
    min-width: 108px !important;
}

.btn-dash {
    border: 2px solid black;
    color: white !important;
    background: #0B5394;
    background: linear-gradient(145deg, rgba(11, 83, 148, 1) 0%, rgba(10, 73, 128, 1) 33%, rgba(6, 50, 87, 1) 71%, rgba(8, 49, 89, 1) 100%);
    border-radius: 14px;
    transition: background-color 0.4s ease, color 0.4s ease;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    padding: 12px;
    max-width: 260px !important;
    min-width: 180px !important;  
    width: 100%;
}

.btn-dash:hover {
    background: linear-gradient(145deg, rgba(0, 153, 20, 1) 0%, rgba(0, 117, 14, 1) 37%, rgba(1, 87, 7, 1) 69%, rgba(0, 46, 8, 1) 100%);    
}

.btn-reset {
    color: white;
    display: block;
    width: 320px !important;
    border: 3px solid #041320 !important;
    border-radius: 12px !important;
    transition: background-color 0.3s ease;
    padding-top: 10px !important;
    font-size: 16px !important;
    font-weight: bold;
    margin: 0px auto !important;
    margin-left: 8px;
    height: 50px;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    background-color: #6d1034 !important;
}

.btn-block {
    color: white;
    display: block;
    width: 198px !important;
    border: 3px solid #041320 !important;
    border-radius: 12px !important;
    transition: background-color 0.3s ease;
    padding-top: 12px !important;
    padding-left: 12px !important;
    font-size: 16px !important;
    font-weight: bold;
    margin: 0px auto;
    margin-left: 8px;
    height: 50px;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    background-color: #a11441 !important;
}

.btn-block:hover,
.btn-block:active {
    color: white;
    background-color: #2882e9 !important;
}

.btn-upload {
    color: white;
    background-color: #740c54 !important;
    display: block;
    height: 40px !important;
    max-width: 235px !important;
    min-width: 210px !important;
    padding: 2px 2px;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    transition: background-color 0.3s ease;
    border: 3px solid #000000 !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    margin-top: 5px !important;
}

.btn-upload:hover,
.btn-upload:active {
    color: white;
    background-color: #0e9f21 !important;
}

.btn-genssl {
    color: white;
    background-color: #0578c4 !important;
    display: block;
    height: 42px !important;
    max-width: 180px !important;
    min-width: 160px !important;
    padding: 6px 10px;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    transition: background-color 0.3s ease;
    border: 3px solid #000000 !important;
    border-right: 0px !important;
    border-left: 0px !important;
    border-radius: 0px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    width: 100%;
    margin-left: 2px !important;
    margin-top: 0.2px !important;
}

.btn-genssl:hover,
.btn-genssl:active {
    color: white;
    background-color: #bd610a !important;
    height: 42px !important;
}

.btn-footer {
    color: white;
    background-color: #590538 !important;
    background: linear-gradient(1deg,rgba(46, 5, 24, 1) 0%, rgba(84, 8, 55, 0.96) 26%, rgba(105, 12, 54, 0.91) 51%, rgba(140, 15, 67, 0.81) 78%, rgba(201, 16, 93, 0.85) 100%);
    display: block;
    height: 42px !important;
    max-width: 295px !important;
    min-width: 185px !important;
    padding: 6px 10px;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    transition: background-color 0.3s ease;
    border: 3px solid #000000 !important;
    font-size: 16px !important;
    font-weight: bold !important;
}

.btn-footer:hover,
.btn-footer:active {
    color: white;
    background-color: #7f17c4 !important;
    background: linear-gradient(1deg,rgb(69, 8, 66) 0%, rgba(115, 13, 98, 0.96) 26%, rgba(145, 21, 161, 0.91) 51%, rgba(186, 29, 191, 0.81) 78%, rgba(240, 72, 240, 0.85) 100%);
    height: 42px !important;
}

.btn-save {
    color: white;
    background-color: #045e3a !important;
    display: block;
    height: 42px !important;
    max-width: 235px !important;
    min-width: 205px !important;
    padding: 6px 10px !important;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    transition: background-color 0.3s ease;
    border: 3px solid #000000 !important;
    border-left: 1px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    margin-left: 1px !important;
}

.btn-save:hover,
.btn-save:active {
    color: white;
    background-color: #10ac2d !important;
    height: 42px !important;
}

.btn-yes {
    color: white;
    background-color: #045e3a !important;
    display: block;
    height: 42px !important;
    max-width: 155px !important;
    min-width: 125px !important;
    padding: 8px 10px;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    transition: background-color 0.3s ease;
    border: 3px solid #000000 !important;
    font-size: 16px !important;
    font-weight: bold !important;
}

.btn-yes:hover,
.btn-yes:active {
    color: white;
    background-color: #10ac2d !important;
    height: 42px !important;
}

.btn-container {
    display: flex;
    gap: 4px;
}

.btn-container form {
    margin: 0;
}

.btn-addlist {
    color: white;
    background-color: #086e23 !important;
    background: linear-gradient(1deg,rgba(3, 23, 4, 1) 0%, rgba(14, 84, 8, 0.96) 26%, rgba(14, 105, 12, 0.91) 51%, rgba(15, 140, 34, 0.81) 78%, rgba(18, 191, 15, 0.85) 100%);
    display: block;
    height: 42px !important;
    max-width: 245px !important;
    min-width: 155px !important;
    width: auto !important;
    padding: 6px 10px;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    transition: background-color 0.3s ease;
    border: 3px solid #000000 !important;
    font-size: 16px !important;
    font-weight: bold !important;
    border-left: 0px !important;
    margin-left: 1px !important;
}

.btn-addlist:hover,
.btn-addlist:active {
    color: white;
    background-color: #07bf07 !important;
    background: linear-gradient(1deg,rgba(9, 61, 12, 1) 0%, rgba(21, 115, 13, 0.96) 26%, rgba(21, 143, 19, 0.91) 51%, rgba(23, 191, 48, 0.81) 78%, rgba(50, 232, 46, 0.85) 100%);
    height: 42px !important;
}

.btn-addlist-form {
    color: white;
    background-color: #086e23 !important;
    display: block;
    height: 42px !important;
    max-width: 245px !important;
    min-width: 155px !important;
    width: auto !important;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    transition: background-color 0.3s ease;
    border: 3px solid #000000 !important;
    font-size: 16px !important;
    font-weight: bold !important;
}

.btn-addlist-form:hover,
.btn-addlist-form:active {
    color: white;
    background-color: #07bf07 !important;
    height: 42px !important;
}

.btn-between,
.btn-between:visited {
    color: white;
    background: #0bc8e0;
    background: linear-gradient(179deg,rgba(11, 200, 224, 1) 0%, rgba(8, 157, 194, 1) 26%, rgba(8, 112, 163, 1) 51%, rgba(4, 66, 110, 1) 78%, rgba(5, 25, 59, 1) 100%);
    display: block;
    height: 42px !important;
    max-width: 245px !important;
    min-width: 155px !important;
    width: auto !important;
    padding: 6px 10px;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    transition: background-color 0.3s ease;
    border: 3px solid #000000 !important;
    border-radius: 0px;
    font-size: 16px !important;
    font-weight: bold !important;
    border-left: 0px !important;
    margin-left: 1px !important;
}

.btn-between:hover,
.btn-between:active {
    color: white;
    background: #00d9a3;
    background: linear-gradient(179deg,rgba(0, 217, 163, 1) 0%, rgba(0, 181, 127, 1) 26%, rgba(0, 153, 115, 1) 51%, rgba(4, 110, 78, 1) 78%, rgba(3, 26, 17, 1) 100%);
    height: 42px !important;
}

.btn-create-cal {
    color: white;
    background-color: #086e23 !important;
    background: linear-gradient(155deg,rgba(191, 112, 15, 1) 0%, rgba(140, 76, 11, 1) 25%, rgba(125, 58, 6, 1) 50%, rgba(79, 39, 6, 1) 73%, rgba(43, 23, 4, 1) 100%);
    height: 30px !important;
    max-width: 75px !important;
    min-width: 75px !important;
    width: auto !important;
    padding-top: 1px;
    padding-left: 8px;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    transition: background-color 0.3s ease;
    border: 2px solid #000000 !important;
    border-bottom-left-radius: 0px !important;
    border-top-left-radius: 0px !important;
    font-size: 16px !important;
    font-weight: bold !important;
}

.btn-create-cal:hover,
.btn-create-cal:active {
    color: white;
    background-color: #07bf07 !important;
    background: linear-gradient(155deg,rgb(164, 214, 13) 0%, rgb(106, 163, 15) 25%, rgb(77, 150, 9) 50%, rgb(14, 107, 4) 73%, rgb(6, 46, 2) 100%);
}

.btn-update,
.btn-update:visited {
    display: block;
    height: 38px !important;
    max-width: 150px !important;
    min-width: 135px !important;
    width: auto !important;
    margin-left: 1px !important;
    font-size: 16px !important;
    font-weight: bold !important;           
    color: white;
    background-color: #0b6e2e !important;
    border: 3px solid #000000 !important;
    border-left: 0px !important;        
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    transition: background-color 0.3s ease;
}

.btn-update:hover,
.btn-update:active {
    color: white;
    background-color: #07bf07 !important;
}

.btn-tables-ok,
.btn-tables-ok:visited {
    color: white;
	background-color: #0c6639 !important;
    font-size: 16px !important;
    font-weight: bold !important;    
    border-radius: 8px;
    border-color: black;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;    
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
	transition: background-color 0.3s ease;     
    width: 30px !important;
    max-width: 30px !important;
	height: 32px !important;  
    align-items: center;
    text-align: center;
}

.btn-tables-ok:hover,
.btn-tables-ok:active {
    background-color: #1ac811 !important;
    color: white;    
}

.btn-tables-lock,
.btn-tables-lock:visited {
    color: white;
	background-color: #b3490c !important;
    font-size: 16px !important;
    font-weight: bold !important;    
    border-radius: 8px;
    border-color: black;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;    
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
	transition: background-color 0.3s ease;     
    width: 30px !important;
    max-width: 30px !important;
	height: 32px !important;  
    align-items: center;
    text-align: center;
}

.btn-tables-lock:hover,
.btn-tables-lock:active {
    background-color: #d1830f !important;
    color: white;    
}

.btn-tables-revoke,
.btn-tables-revoke:visited {
    color: white;
	background-color: #5e0808 !important;
    font-size: 16px !important;
    font-weight: bold !important;    
    border-radius: 8px;
    border-color: black;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;    
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
	transition: background-color 0.3s ease;     
    width: 30px !important;
    max-width: 30px !important;
	height: 32px !important;  
    align-items: center;
    text-align: center;
}

.btn-tables-revoke:hover,
.btn-tables-revoke:active {
    background-color: #cd0a21 !important;
    color: white;    
}

.btn-addcde,
.btn-addcde:visited {
    color: white;
	background-color: #0c6639 !important;
    border-radius: 8px;
    border-color: black;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
	transition: background-color 0.3s ease;    
    font-size: 16px !important;
    font-weight: bold !important;    
    display: block;
    width: 30px !important;
    max-width: 30px !important;
	margin-top: 2px !important;
	height: 29px !important;  
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
    align-items: center;
    text-align: center;
}

.btn-addcde:hover, 
.btn-addcde:active {
    background-color: #1ac811 !important;
    color: white;
    border-radius: 8px;
    border-color: black;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
	transition: background-color 0.3s ease;    
    font-size: 16px !important;
    font-weight: bold !important;    
    display: block;
    width: 30px !important;
    max-width: 30px !important;
	margin-top: 2px !important;
	height: 32px !important;  
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
    align-items: center;
    text-align: center;  
}

.btn-plus,
.btn-plus:visited {
    color: white;
	background-color: #0c6639 !important;
    border-radius: 8px;
    border-color: black;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;  
	transition: background-color 0.3s ease;    
    font-size: 16px !important;
    font-weight: bold !important;    
    display: block;
    width: 35px !important;
	height: 35px !important;  
    align-items: center;
    text-align: center;
}

.btn-plus:hover, 
.btn-plus:active {
    background-color: #11c71a !important;
	transition: background-color 0.3s ease;    
}

.btn-plus-dav,
.btn-plus-dav:visited {
    color: white;
	background-color: #0a9659 !important;
    border: 1px solid black !important;
    border-radius: 8px;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
	transition: background-color 0.3s ease;    
    font-size: 16px !important;
    font-weight: bold !important;    
    display: block;
    width: 24px !important;
	height: 24px !important;  
    align-items: center;
    text-align: center;
}

.btn-plus-dav:hover, 
.btn-plus-dav:active {
    background-color: #11c71a !important;
	transition: background-color 0.3s ease;    
}

.btn-delete-dav,
.btn-delete-dav:visited {
    color: white;
	background-color: #800a22 !important;
    border: 1px solid black !important;
    border-radius: 8px;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
	transition: background-color 0.3s ease;    
    font-size: 16px !important;
    font-weight: bold !important;    
    display: block;
    width: 24px !important;
	height: 24px !important;  
    align-items: center;
    text-align: center;
}

.btn-delete-dav:hover, 
.btn-delete-dav:active {
    background-color: #e41111 !important;
	transition: background-color 0.3s ease;    
}


.btn-import-dav,
.btn-import-dav:visited {
    background-color: #9f4576 !important;
	transition: background-color 0.3s ease;     
}

.btn-import-dav:hover,
.btn-import-dav:active {
    background-color: #006400 !important;
	transition: background-color 0.3s ease;     
}

.btn-download-dav,
.btn-download-dav:visited {
	background-color: #1e90ff !important;
	transition: background-color 0.3s ease;    
}

.btn-download-dav:hover, 
.btn-download-dav:active {
    background-color: #11c71a !important;
	transition: background-color 0.3s ease;    
}

.btn-trash,
.btn-trash:visited {
    color: white;
	background-color: #5e0717 !important;
    border-radius: 8px;
    border-color: black;
    box-shadow: 4px 4px 2px rgba(1, 4, 18, 0.68) !important;   
	transition: background-color 0.3s ease;    
    font-size: 16px !important;
    font-weight: bold !important;    
    display: block;
    width: 35px !important;
	height: 35px !important; 
    align-items: center;
    text-align: center;
}

.btn-trash:hover, 
.btn-trash:active {
    background-color: #c30e29 !important;
}

.btn-import-start {
    color: white;
    background-color: #086e23 !important;
    border: 3px solid #000000 !important;    
    border-left: 0px !important;
    margin-left: 1px !important;    
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    transition: background-color 0.3s ease;    
    max-width: 200px !important;
    min-width: 155px !important;
    width: auto !important;
    height: 42px !important;
    padding: 9px 10px;
    font-size: 16px !important;
    font-weight: bold !important;
}

.btn-import-start:hover,
.btn-import-start:active {
    color: white;
    background-color: #07bf07 !important;
}

.btn-import-cancel {
    color: white;
    background-color: #931539 !important;
    border: 3px solid #000000 !important;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;    
    font-size: 16px !important;
    font-weight: bold !important;
    text-align: center;    
    max-width: 200px !important;
    min-width: 155px !important;
    width: auto !important;
    height: 42px !important;    
    padding: 10px 10px;
}

.btn-import-cancel:hover,
.btn-import-cancel:active {
    color: white;
    background-color: #fc1437 !important;
}

.btn-progress-resume {
    color: white;
    background-color: #065b1a !important;
    border: 2px solid #000000 !important;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;    
    font-size: 14px !important;
    font-weight: bold !important;
    text-align: center;    
    max-width: 220px !important;
    min-width: 170px !important;
    width: auto !important;
    height: 36px !important;    
    padding: 6px 6px;
}

.btn-progress-resume:hover,
.btn-progress-resume:active {
    color: white;
    background-color: #0baf0b !important;
}

.btn-progress-cancel {
    color: white;
    background-color: #560319 !important;
    border: 2px solid #000000 !important;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;    
    font-size: 14px !important;
    font-weight: bold !important;
    text-align: center;    
    max-width: 200px !important;
    min-width: 150px !important;
    width: auto !important;
    height: 36px !important;    
    padding: 6px 6px;
}

.btn-progress-cancel:hover,
.btn-progress-cancel:active {
    color: white;
    background-color: #fc1437 !important;
}

.btn-cancel-form,
.btn-cancel-form:visited {
    color: white;
    background-color: #931539 !important;
    background: linear-gradient(1deg,rgba(64, 6, 33, 1) 0%, rgba(84, 8, 40, 0.96) 26%, rgba(147, 21, 57, 0.91) 51%, rgba(171, 19, 72, 0.81) 78%, rgba(222, 22, 65, 0.85) 100%);
    display: block;
    height: 42px !important;
    max-width: 285px !important;
    min-width: 155px !important;
    padding-top: 8px !important;
    width: auto !important;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    transition: background-color 0.3s ease;
    border: 3px solid #000000 !important;
    font-size: 16px !important;
    font-weight: bold !important;
}

.btn-cancel-form:hover,
.btn-cancel-form:active {
    color: white;
    background-color: #fc1437 !important;
}

.btn-cancel {
    color: white;
    background-color: #931539 !important;
    background: linear-gradient(1deg,rgba(64, 6, 33, 1) 0%, rgba(84, 8, 40, 0.96) 26%, rgba(147, 21, 57, 0.91) 51%, rgba(171, 19, 72, 0.81) 78%, rgba(222, 22, 65, 0.85) 100%);
    display: block;
    height: 42px !important;
    max-width: 285px !important;
    min-width: 155px !important;
    width: auto !important;
    padding: 8px 8px;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    transition: background-color 0.3s ease;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    border: 3px solid #000000 !important;
    font-size: 16px !important;
    font-weight: bold !important;
}

.btn-cancel:hover,
.btn-cancel:active {
    color: white;
    background-color: #fc1437 !important;
    background: linear-gradient(1deg,rgba(64, 6, 33, 1) 0%, rgba(140, 17, 68, 0.96) 26%, rgba(181, 22, 67, 0.91) 51%, rgba(201, 20, 59, 0.81) 78%, rgba(252, 58, 68, 0.85) 100%);
    height: 42px !important;
}

.btn-exit {
    color: white;
    background: #cc1f50;
    background: linear-gradient(178deg,rgba(204, 31, 80, 1) 0%, rgba(147, 21, 57, 1) 25%, rgba(120, 16, 45, 1) 50%, rgba(79, 9, 29, 1) 76%, rgba(33, 3, 12, 1) 100%);
    height: 40px !important;
    max-width: 285px !important;
    min-width: 165px !important;
    width: auto !important;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    transition: background-color 0.3s ease;
    border: 3px solid #000000 !important;
    font-size: 16px !important;
    font-weight: bold !important;
}

.btn-exit:hover,
.btn-exit:active {
    color: white;
    background-color: #fc1437 !important;
    height: 40px !important;
}

.btn-delcert {
    color: white;
    background-color: #b84b07 !important;
    background: linear-gradient(1deg,rgb(75, 31, 2) 0%, rgba(117, 55, 4, 0.96) 26%, rgba(190, 88, 5, 0.91) 51%, rgba(240, 101, 9, 0.81) 78%, rgba(255, 107, 38, 0.85) 100%);
    display: block;
    height: 42px !important;
    max-width: 285px !important;
    min-width: 175px !important;
    width: auto !important;
    padding: 8px 8px;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    transition: background-color 0.3s ease;
    border: 3px solid #000000 !important;
    font-size: 16px !important;
    font-weight: bold !important;
    margin-right: 0px !important;
}

.btn-delcert:hover,
.btn-delcert:active {
    color: white;
    background-color: #fcaf14 !important;
    background: linear-gradient(1deg,rgb(112, 65, 3) 0%, rgba(155, 95, 4, 0.96) 26%, rgba(221, 145, 5, 0.91) 51%, rgba(245, 155, 21, 0.81) 78%, rgba(255, 197, 38, 0.85) 100%);
}

.btn-cal-export,
.btn-cal-export:visited {
    color: white;
    background-color: #8009c5 !important;
    background: linear-gradient(155deg,rgb(147, 197, 9) 0%, rgb(155, 166, 7) 23%, rgb(110, 117, 6) 44%, rgb(90, 99, 5) 66%, rgb(33, 30, 1) 100%);
    border: 3px solid black !important;
    height: 32px !important;
    max-width: 52px !important;
    min-width: 52px !important;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    transition: background-color 0.3s ease;
    padding-top: 2px;
}

.btn-cal-export:hover,
.btn-cal-export:active {
    color: white;
    background: #a846e0;
    background: linear-gradient(155deg,rgb(87, 170, 242) 0%, rgb(36, 143, 220) 23%, rgb(18, 119, 186) 44%, rgb(13, 63, 155) 66%, rgb(7, 26, 103) 100%);
}

.btn-cal-import,
.btn-cal-import:visited {
    color: white;
    background-color: #8009c5 !important;
    background: linear-gradient(155deg,rgb(9, 197, 172) 0%, rgb(7, 166, 145) 23%, rgb(6, 117, 108) 44%, rgb(5, 99, 75) 66%, rgb(1, 33, 25) 100%);
    border: 2px solid black !important;
    height: 32px !important;
    max-width: 52px !important;
    min-width: 52px !important;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    transition: background-color 0.3s ease;
    padding-top: 2px;
}

.btn-cal-import:hover,
.btn-cal-import:active {
    color: white;
    background: #a846e0;
    background: linear-gradient(155deg,rgb(87, 170, 242) 0%, rgb(36, 143, 220) 23%, rgb(18, 119, 186) 44%, rgb(13, 63, 155) 66%, rgb(7, 26, 103) 100%);
}

.btn-today,
.btn-today:visited {
    color: white;
    background-color: #8009c5 !important;
    background: linear-gradient(155deg,rgba(128, 9, 197, 1) 0%, rgba(107, 7, 166, 1) 23%, rgba(76, 6, 117, 1) 44%, rgba(65, 5, 99, 1) 66%, rgba(21, 1, 33, 1) 100%);
    border: 2px solid black !important;
    height: 35px !important;
    max-width: 115px !important;
    min-width: 115px !important;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    transition: background-color 0.3s ease;
    padding-top: 4px;
    padding-left: 8px;
    font-size: 16px !important;
}

.btn-today:hover,
.btn-today:active {
    color: white;
    background: #a846e0;
    background: linear-gradient(155deg,rgb(87, 170, 242) 0%, rgb(36, 143, 220) 23%, rgb(18, 119, 186) 44%, rgb(13, 63, 155) 66%, rgb(7, 26, 103) 100%);
}

.btn-cal-time,
.btn-cal-time:visited {
    color: white;
    background-color: #8009c5 !important;
    background: linear-gradient(155deg,rgba(128, 9, 197, 1) 0%, rgba(107, 7, 166, 1) 23%, rgba(76, 6, 117, 1) 44%, rgba(65, 5, 99, 1) 66%, rgba(21, 1, 33, 1) 100%);
    border: 2px solid black !important;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
    max-width: 42px !important;
    min-width: 42px !important;
    height: 36px;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    transition: background-color 0.3s ease;
    padding-top: 2px;
    padding-left: 7px;
    font-size: 20px !important;
    margin-top: -4px;
    margin-left: -9px;
}

.btn-cal-time:hover,
.btn-cal-time:active {
    color: white;
    background: #a846e0;
    background: linear-gradient(155deg,rgb(87, 170, 242) 0%, rgb(36, 143, 220) 23%, rgb(18, 119, 186) 44%, rgb(13, 63, 155) 66%, rgb(7, 26, 103) 100%);
}

.btn-page,
.btn-page:visited {
    color: white;
    background-color: #4c22be !important;
    background: linear-gradient(155deg,rgb(84, 41, 204) 0%, rgb(69, 33, 168) 27%, rgb(55, 26, 135) 50%, rgb(39, 18, 99) 77%, rgb(21, 7, 59) 100%);    
    border: 2px solid black !important;
    height: 35px !important;
    max-width: 55px !important;
    min-width: 20px !important;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    transition: background-color 0.3s ease;
    padding-top: 5px;   
}

.btn-page:hover,
.btn-page:active {
    color: white;
    background-color: #8d43d7 !important;
background: linear-gradient(155deg,rgb(158, 86, 245) 0%, rgb(135, 51, 214) 27%, rgb(105, 31, 174) 50%, rgb(78, 20, 148) 77%, rgb(61, 6, 81) 100%);    
}

.btn-page-select,
.btn-page-select:visited {
    color: white;
    background-color: #1d73eb !important;
    border: 2px solid black;
    height: 35px !important;
    max-width: 88px !important;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    transition: background-color 0.3s ease;
}

.btn-page-select:hover,
.btn-page-select:active {
    color: white;
    background-color: #12cd25 !important;
}

.btn-page-nr,
.btn-page-nr:visited {
    color: white;
    background-color: #4c22be !important;
    border: 2px solid #041d2e;
    height: 35px !important;
    max-width: 70px !important;
    min-width: 20px !important;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    transition: background-color 0.3s ease;
}

.btn-page-nr:hover,
.btn-page-nr:active {
    color: white;
    background-color: #6e3bf8 !important;
}

.btn-dkim-ow {
    color: white;
    display: block;
    width: auto !important;
    max-width: 260px !important;
    margin: 0px auto;
    height: 42px;
    border-radius: 8px;
    transition: background-color 0.3s ease;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.68) !important;
    background-color: #8a132f !important;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

.btn-dkim-ow:hover, 
.btn-dkim-ow:active {
    background-color: #ff184a !important;
    color: white;
    display: block;
    width: auto !important;
    max-width: 260px !important;
    margin: 0px auto;
    height: 42px;
    border-radius: 8px;
    border-color: black;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.68) !important;
    transition: background-color 0.3s ease;
}

.btn-addentry,
.btn-addentry:visited {
    background-color: #f05913 !important;
    color: white;
    font-size: 16px !important;
    font-weight: bold;
    box-shadow: 2px 2px 4px rgba(1, 4, 18, 0.68) !important;
    border: 3px solid #000000 !important;
    transition: background-color 0.3s ease;
    display: block;
    width: auto !important;
    max-width: 260px !important;
    min-width: 140px !important;
    margin: 0px auto;
    margin-left: 8px !important;
    height: 42px;
    border-radius: 8px;
    padding: 8px 10px;
}

.btn-addentry:hover, 
.btn-addentry:active {
    background-color: #13b2e3 !important;
}

.btn-left {
    margin-left: 20px !important;
}

.btn-long {
    width: auto !important;
    border-bottom-right-radius: 0px !important;
    border-top-right-radius: 0px !important;
    height: 42px !important;
    background-color: rgb(255, 132, 16);
    transition: background-color 0.3s ease;
}

.btn-long:hover {
    width: auto !important;
    border-bottom-right-radius: 0px !important;
    border-top-right-radius: 0px !important;
    height: 42px !important;
    background-color: rgb(29, 165, 196);
}

.pull-right {
    float: right !important;
    margin-right: 2px;
}

.pull-left {
    float: left !important;
    margin-right: 8px;
    margin-left: -5px;
    margin-top: 3px;
}

.dropdown-wrapper {
    display: flex;
    align-items: center;
    gap: 42px;
    font-size: 15px !important;
}

.dropdown-bkp-db {
    color: white;
    display: flex;
    align-items: center;
    margin-right: 10px;
    font-size: 15px !important;
}

.dropdown-backup {
    color: white;
    display: flex;
    align-items: center;
    gap: 40px;
    margin-top: 15px;
    margin-bottom: 60px;
    font-size: 15px !important;
}

.dropdown-menu {
    color: #0b5394;
    background-color: #1f76e8;
    border: 2px solid #082133;
    border-radius: 8px;
    font-size: 15px !important;
}

.dropdown, .dropup, .dropdown-menu, .dropdowntoggle {
    max-width: 230px;
    min-width: 50px;
    border-radius: 8px;
}

.dropdowntoggle {
    background-color: #0b5394;
    border-radius: 8px;
}

.dropdowntoggle:hover {
    background-color: #48a0ef;
    border-radius: 8px;
    color: white;
}

.dropdown-menu > li:hover {
    color: #3d85c6;
    background-color: #0b5394;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: #25d80e !important;
    text-decoration: none;
    background-color: #0b5394 !important;
    margin-left: 0px;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    color: white !important;
    text-decoration: none;
    background-color: #0b5394;
}

.dropdown-menu>li>a {
    padding: 4px 8px;
    font-weight: bold;
    color: white !important;
}

.dropdown-toggle,
.dropdown-toggle:visited {
    background-color: #236df7 !important;
    max-width: 50px;
    min-width: 50px;
    transition: background-color 0.3s ease;
}

.dropdown-toggle:hover,
.dropdown-toggle:active {
    background-color: #1dad35 !important;
    max-width: 50px;
}

.navbar-nav > li > .dropdown-menu {
    color: white;
    background: #0B5394;
    background: linear-gradient(180deg, rgba(11, 83, 148, 1) 0%, rgba(0, 67, 138, 1) 28%, rgba(10, 56, 130, 1) 50%, rgba(9, 34, 110, 1) 73%, rgba(0, 15, 77, 1) 100%);
    font-size: 15px !important;
    min-width: 160px;
    width: auto !important;
}

td {
    color: #fff;
}

#admin_table tbody tr:hover {
    background-color: #680c3a;
}

#admin_table tbody tr {
    transition: background-color 0.3s ease;
    background-color: #0c5cd4e6;
    color: #fff;
}

.panel-heading {
    height: 54px;
}

.panel-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0px;
    gap: 10px;
    font-size: 18px;
    font-weight: bold;
}

.panel, .panel-default {
    text-decoration: none;
    color: #fff;
    box-shadow: 0 2px 4px rgba(4, 24, 64, 0.75);
    background-image: url('../images/dashbg.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 0px 0px;
    margin: 0px 0px;
    border: 2px solid #03101d;
    border-radius: 8px !important;
}

.panel-default {
    border: 2px solid #03101d;
    border-radius: 8px;
    width: 100%;
}

.panel-default > .panel-heading {
    color: #ffffff;
    background-color: #024d9dd9;
    width: 100%;
    border-top: 0px;
    border-bottom: 2px solid #03101d;
}

.panel-section {
    border-radius: 0px !important;
    background-color: rgba(8, 37, 62, 0.88) !important;    
}

.panel-footer {
    background-color: rgba(0, 20, 66, 0.9);
    padding: 2px 0px;
    border-top: 2px solid #03101d;
    height: 50px !important;
    max-height: 50px !important;
    min-height: 50px !important;
}

.panel-footer-height {
    height: 132px;
    background-color: rgba(17, 50, 111, 0.938);
    padding: 2px 0px;
    border-top: 2px solid #03101d;
}

.panel-default.panel-admin {
    min-width: 804px;
    max-width: 920px;
    width: 100%;
    margin: 0 auto;
    margin-top: -80px;
    border: 0px;
    border-radius: 8px;
    padding: 2px 2px;
    overflow: auto;
    background-color: #0f5393;
}

.panel-default.panel-cron {
    min-width: 920px;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    margin-top: -80px;
    border: 0px;
    border-radius: 8px;
    padding: 2px 2px;
    overflow: auto;
    background-color: #0f5393;
}

.panel-default.panel-domain {
    min-width: 1176px;
    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
    margin-top: -80px;
    border: 0px;
    border-radius: 8px;
    padding: 2px 2px;
    overflow: auto;
}

.panel-default.panel-virtual {
    min-width: 1200px;
    max-width: 1360px;
    width: 100%;
    margin: 0 auto;
    margin-top: -80px;
    border-radius: 8px;
    overflow: hidden;
}

.panel-default.panel-backup {
    min-width: 900px !important;
    max-width: 1176px !important;
    width: 100%;
    margin: 0 auto;
    margin-top: -80px;
    border: 2px solid #03101d;
    border-radius: 8px;
    padding: 2px 2px;
    overflow: auto;
}

.panel-default.panel-sendmail {
    min-width: 500px;
    max-width: 650px;
    width: 100%;
    margin: 0 auto;
    margin-top: -80px;
    border: 2px solid #03101d;
    border-radius: 8px;
    padding: 2px 2px;
    overflow: auto;
}

.panel-default.panel-config {
    min-width: 650px;
    max-width: 850px;
    width: 100%;
    margin: 0 auto;
    margin-top: -80px;
    border: 2px solid #03101d;
    border-radius: 8px;
    padding: 2px 2px;
    overflow: auto;
}

.panel-default.panel-rspamd {
    min-width: 800px;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    margin-top: -80px;
    border: 2px solid #03101d;
    border-radius: 8px;
    padding: 2px 2px;
    overflow: hidden;
    word-break:break-word;    
}

.panel-default.panel-dkim {
    min-width: 802px;
    max-width: 950px;
    width: 100%;
    margin: 0 auto;
    margin-top: -80px;
    border: 2px solid #03101d;
    border-radius: 8px;
    padding: 2px 2px;
    overflow: auto;
}

.panel-default.panel-dkimsigning {
    min-width: 738px;
    max-width: 850px;
    width: 100%;
    margin: 0 auto;
    margin-top: -80px;
    border: 2px solid #03101d;
    border-radius: 8px;
    overflow: auto;
}

.panel-default.panel-dkimgen {
    min-width: 450px;
    max-width: 650px;
    width: 100%;
    margin: 0 auto;
    margin-top: -80px;
    border: 2px solid black;
    border-radius: 8px;
        box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    overflow: auto;
}

.panel-default.panel-dkimgen-output {
    min-width: 250px;
    max-width: 1250px;
    width: 100%;
    margin: 0 auto;
    border: 2px solid black;
    border-radius: 8px;
        box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    overflow: auto;
}

.panel-body-dkim {
    min-height: 250px;
}

.panel-default.panel-certificates {
    min-width: 900px;
    max-width: 1060px;
    width: 100%;
    margin: 0 auto;
    margin-top: -80px;
    border: 2px solid #03101d;
    border-radius: 8px;
    padding: 2px 2px;
    overflow: auto;
}

.panel-body-backup {
    border-radius: 8px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.panel-body-config {
    border-radius: 0px;
    background-color: #570a25 !important;
}

.form-config-general {
    display: flex;
    width: 370px;
    margin-left: 12px;
}

.form-config-quota {
    display: flex;
    width: 250px;
    margin-left: 140px;
}

.form-config-features {
    display: flex;
    width: 350px;
    margin-left: 150px;
}

.form-config-password {
    display: flex;
    width: 350px;
    margin-left: 90px;
}

.form-config-backup {
    display: flex;
    width: 350px;
    margin-left: 8px;
}

.form-config-theme {
    display: flex;
    width: 350px;
    margin-left: 0px;
}

.form-config-mailbox {
    display: flex;
    width: 350px;
    margin-left: 40px;
}

.form-config-domain {
    display: block;
    margin-bottom: 15px;
    margin-left: 120px;
}

.config-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    color: white !important;
}

.config-table th {
    background-color: #921453;
    font-weight: bold;
    font-size: 16px;
    color: #ffffff;
    text-align: left;
    padding: 10px;
    padding-left: 10px;
    border-bottom: 3px solid #010b15;
}

.config-table td {
    padding: 8px;
    border-left: 0px solid #010b15;
    border-right: 0px solid #010b15;
    border-bottom: 0px solid #010b15;
}

.config-table tr {
    background-color: #1771bf !important;
    font-weight: bold;
    font-size: 15px;
    height: 60px;
}

.config-table tr:hover {
    background-color: #5e0c36 !important;
    font-weight: bold;
    font-size: 15px;
}

.panel-default.panel-vhosts {
    max-width: 1010px;
    min-width: 900px;
    margin: 0 auto;
    margin-top: -80px;
    width: 100%;
    overflow: hidden;
    border-color: #000;
}

.panel-default.panel-userdb {
    max-width: 1050px;
    min-width: 700px;
    margin: 0 auto;
    margin-top: -80px;
    width: 100%;
    overflow: auto;
    border-color: #000;
}


.panel-default.panel-dash {
    max-width: 850px;
    min-width: 600px;
    margin: 0 auto;
    margin-top: -80px;
    width: 100%;
    overflow: auto;
    border-color: #000;
}

.panel-default.panel-password {
    max-width: 650px;
    min-width: 400px;
    margin: 0 auto;
    margin-top: -80px;
    width: 100%;
    overflow: auto;
    border-color: #000;
}

.panel-default.panel-app-password {
    max-width: 850px;
    min-width: 550px;
    margin: 0 auto;
    margin-top: -80px;
    width: 100%;
    overflow: auto;
    border-color: #000;
}

.panel-default.panel-user-alias {
    max-width: 650px;
    min-width: 400px;
    margin: 0 auto;
    margin-top: -80px;
    width: 100%;
    overflow: auto;
    border-color: #000;
}

.panel-default.panel-totp {
    max-width: 850px;
    width: 100%;
    margin: 0px auto;
    margin-top: -80px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    line-height: 1.6;
    border: 2px solid #03101d;
    border-radius: 8px;
    padding: 2px 2px;
    overflow: auto;
}

.panel-default.panel-totp-exceptions {
    max-width: 850px;
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    line-height: 1.6;
    margin: 4px auto;
    margin-top: 10px;
    overflow: auto;
}

.panel-default.panel-viewlog {
    min-width: 780px;
    max-width: 940px;
    width: 100%;
    margin: 0 auto;
    margin-top: -80px;
    padding: 2px 2px;
    position: relative;
    overflow: hidden;
    overflow-x: hidden !important;
}

.panel-default.panel-syslog {
    min-width: 550px;
    max-width: auto;
    width: 95%;
    margin: 0 auto;
    margin-top: -80px;
    padding: 2px 2px;
    overflow: auto;
    max-height: calc(100dvh - 114px);
}

.panel-red {
    background-color: #5a0b14 !important;
}

.panel-default.panel-edit-admin {
    max-width: 650px;
    margin: 0 auto;
    margin-top: -80px;
    width: 100%;
    overflow: auto;
}

.panel-default.panel-edit-vhosts {
    max-width: 950px;
    margin: 0 auto;
    margin-top: -80px;
    width: 100%;
    overflow: auto;
}

.panel-default.panel-edit-userdb {
    max-width: 700px;
    margin: 0 auto;
    margin-top: -80px;
    width: 100%;
    overflow: auto;
}

.panel-default.panel-edit-cron {
    max-width: 800px;
    margin: 0 auto;
    margin-top: -80px;
    width: 100%;
    overflow: hidden;
}

.panel-default.panel-edit-domain {
    max-width: 850px;
    margin: 0 auto;
    margin-top: -80px;
    width: 100%;
    overflow: auto;
}

.panel-default.panel-edit-mailbox {
    max-width: 800px;
    margin: 0 auto;
    margin-top: -80px;
    width: 100%;
    overflow: auto;
}

.panel-default.panel-edit-dkim {
    max-width: 820px;
    margin: 0 auto;
    margin-top: -80px;
    width: 100%;
    overflow: auto;
}

.panel-default.panel-edit-backup {
    max-width: 630px !important;
    margin: 0 auto;
    margin-top: -80px;
    width: 100%;
    overflow: auto;
}

.panel-default.panel-edit-certificates {
    max-width: 950px;
    margin: 0 auto;
    margin-top: -80px;
    width: 100%;
    overflow: auto;
}

.panel-default.panel-calendar {
    min-width: 850px !important;
    max-width: 1500px !important;
    max-height: 1020px !important;
    margin: 0 auto;
    margin-top: -80px;
    width: 100%;
    border: 3px solid black !important;
}

.panel-default.panel-carddav {
    min-width: 650px !important;
    max-width: 1050px !important;
    margin: 0 auto;
    margin-top: -90px;
    width: 100%;
    overflow: hidden;
}

.panel-default.panel-dav {
    min-width: 650px !important;
    max-width: 950px !important;
    margin: 0 auto;
    margin-top: -80px;
    width: 100%;
    overflow: hidden;
}

.panel-default.panel-adddav {
    min-width: 550px !important;
    max-width: 650px !important;
    margin: 0 auto;
    margin-top: -80px;
    width: 100%;
    overflow: hidden;
}

.panel-default.panel-edit-config {
    max-width: 700px !important;
    margin: 0 auto;
    margin-top: -80px;
    width: 100%;
    overflow: hidden;
}

.panel-default.panel-edit-config-add {
    max-width: 550px !important;
    margin: 0 auto;
    margin-top: -80px;
    width: 100%;
    overflow: hidden;
}

.panel-default.panel-edit-sieve {
    max-width: 850px !important;
    margin: 0 auto;
    margin-top: -80px;
    width: 100%;
    overflow: hidden;
}

#mailbox_table tbody tr:hover {
    background-color: #199352;
}

#mailbox_table tbody tr {
    color: #fff;
    background-color: #0c5cd4e6;
    transition: background-color 0.3s ease;
}

.set-bg {
    background-color: #570920f4 !important;
}

.panel-body {
    color: #fff;
    background-color: rgba(8, 38, 78, 0.885);
    padding: 0;
}

.panel-body h4 {
    font-weight: bold;
}

.panel-body > .text-center {
    color: #fff;
    font-weight: bold;
}

.panel-body > .text-center li {
    list-style: none;
}

.panel-add-padding {
    padding-top: 60px;
    padding-bottom: 60px;
}

.panel-add-pading-15 {
    padding-top: 15px;
    padding-bottom: 15px;
}

.panel-add-pading-20 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.panel-add-bottom {
    padding-bottom: 30px;
}

.panel-add-bottom-10 {
    padding-bottom: 10px;
}

.add-top {
    margin-top: 40px;
}

.add-top-login {
    margin-top: 63px !important;    
}


.add-top-5 {
    margin-top: 5px !important;
}

.add-top-10 {
    margin-top: 10px !important;
}

.add-top-15 {
    margin-top: 15px !important;
}

.add-top-20 {
    margin-top: 20px !important;
}

.add-top-30 {
    margin-top: 30px !important;
}

.add-top-40 {
    margin-top: 40px !important;
}

.add-top-50 {
    margin-top: 50px !important;
}

.add-top-60 {
    margin-top: 60px !important;
}

.add-right-4 {
    margin-right: 4px !important;
}

.dash-description {
    font-size: 14px !important;
    font-weight: bold !important;
}

.keep-left {
    margin-left: -55px;
}

.form-input-domain {
    background-color: #1d73eb !important;
    transition: background-color 0.3s ease;
    padding-left: 8px !important;
}

.form-input-domain:hover {
    background-color: #15b332 !important;
}

.form-config {
    color: black;
    font-size: 16px;
    font-weight: bold;
    background-color: #cee9ff;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    padding: 0px 4px;
    height: 30px !important;
    max-width: 340px;
}

.form-control {
    color: #000;
    background-color: #cee9ff !important;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    padding: 0px 0px;
    padding-left: 6px;
    height: 30px !important;
    max-width: 220px;
    font-weight: bold;
}

.form-control:hover {
    color: #111314;
    background-color: #cee9ff !important;
}

.form-control-grow {
    color: #000;
    background-color: #cee9ff !important;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    padding: 0px 0px;
    padding-top: 4px;
    padding-left: 6px;
    max-width: 250px;
    min-width: 250px;
    font-weight: bold;
}

.form-control:hover {
    color: #111314;
    background-color: #cee9ff !important;
}

.form-control-customcss {
    color: #000;
    background-color: #cee9ff !important;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    padding: 2px 8px;
    height: 30px !important;
    max-width: 220px;
    font-weight: bold;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
}

.form-control-customcss:hover {
    color: #2bc619;
    background-color: #cee9ff !important;
}

.form-control-bkpsettings {
    color: #000;
    background-color: #cee9ff !important;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    padding: 0px 4px;
    height: 30px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    font-weight: bold;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
}

.form-control-bkpsettings:hover {
    color: #2bc619;
    background-color: #cee9ff !important;
}

.form-control-scripts {
    color: #000;
    background-color: #cee9ff !important;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    padding: 0px 4px;
    height: 30px !important;
    font-weight: bold;
    min-width: 220px;
    width: 100%;
    max-width: 100%;
    transition: all 0.3s ease;
    resize: none;
    overflow: hidden;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
}

.form-control-scripts:hover {
    color: #2bc619;
    background-color: #cee9ff !important;
}

.form-control-recp {
    color: #ffffff;
    font-size: 16px;
    max-width: 250px !important;
    min-width: 100px !important;
    width: 100%;
    font-weight: bold;
    margin-top: 12px;
    margin-left: 4px;
    overflow: hidden;
}

.form-control-sendmail {
    color: #000000;
    background-color: white;
    font-size: 16px;
    max-width: 380px !important;
    min-width: 250px !important;
    width: 100%;
    font-weight: bold;
    margin-top: 6px;
    margin-left: 0px;
    overflow: hidden;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
}

.form-control-config {
    color: #ffffff;
    background-color: #1179b9;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    padding: 4.5px 6px;
    height: 20px !important;
    max-width: 250px !important;
    min-width: 100px !important;
    width: 100%;
    font-weight: bold;
    overflow: hidden;
}

.form-control-config:hover,
.form-control-config:active {
    color: #ffffff;
    background-color: #133591;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    padding: 4.5px 6px;
    height: 20px !important;
    max-width: 250px !important;
    min-width: 100px !important;
    width: 100%;
    font-weight: bold;
    overflow: hidden;
}

.form-control-cat {
    color: #ffffff;
    background-color: #115ab9 !important;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    padding-left: 8px;
    height: 20px !important;
    max-width: 280px !important;
    min-width: 120px !important;
    font-weight: bold;
    overflow: hidden;
}

.form-control-cat:hover,
.form-control-cat:active {
    color: #ffffff;
    background-color: #6a1235 !important;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    height: 20px !important;
    max-width: 280px !important;
    min-width: 120px !important;
    font-weight: bold;
    overflow: hidden;
}

.form-control-bkp {
    color: white;
    background-color: #137adb !important;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    height: 26px !important;
    max-width: 250px;
    min-width: 110px;
    padding-left: 6px;
    font-weight: bold;
}

.form-control-bkp:hover,
.form-control-bkp:active {
    background-color: #12cd25 !important;
}

.form-control-config-inkey {
    color: black;
    background-color: #cee9ff;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    padding: 0px 4px;
    height: 30px !important;
    max-width: 160px;
    min-width: 110px;
    font-weight: bold;
}

.form-control-config-input {
    color: black;
    background-color: #cee9ff !important;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    padding: 0px 4px;
    height: 30px !important;
    max-width: 336px !important;
    width: 320px;
    min-width: 110px;
    font-weight: bold;
}

.form-control-config-input:hover {
    color: #139629;
    background-color: #cee9ff !important;
}

.form-virt {
    background-color: #116cd3 !important;
    color: #fff !important;
    max-width: 200px;
    margin-left: 10px !important;
    transition: background-color 0.3s ease;
}

.form-virt:hover {
    background-color: #1aad4a !important;
    color: #fff !important;
    max-width: 200px;
    padding-left: 8px !important;
}

.form-control-editconf {
    color: #000000;
    background-color: #ffffff;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    padding: 4px 4px;
    height: 32px;
    max-width: 250px !important;
    min-width: 250px !important;
    width: auto;
    font-weight: bold;
    overflow: hidden;
}

.form-control-editconf:hover,
.form-control-editconf:active {
    color: #2bc619;
    background-color: #ffffff;
}

.form-control-editconf-dd-mailserver {
    color: #000000;
    background-color: #cee9ff !important;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    padding: 4px 4px;
    height: 20px !important;
    max-width: 250px !important;
    min-width: 250px !important;
    width: 100%;
    font-weight: bold;
    overflow: hidden;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
}

.form-control-editconf-dd-mailserver:hover,
.form-control-editconf-dd-mailserver:active {
    color: #2bc619;
    background-color: #ffffff;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    padding: 4px 4px;
    height: 20px !important;
    max-width: 250px !important;
    min-width: 250px !important;
    width: 100%;
    font-weight: bold;
    overflow: hidden;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
}

.form-control-editconf-dd-backup {
    color: #000000;
    background-color: #cee9ff !important;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    padding: 4px 4px;
    height: 20px !important;
    max-width: 250px !important;
    min-width: 250px !important;
    width: 100%;
    font-weight: bold;
    overflow: hidden;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
}

.form-control-editconf-dd-backup:hover,
.form-control-editconf-dd-backup:active {
    color: #2bc619;
    background-color: #ffffff;
    padding: 4px 4px;
    max-width: 250px !important;
    min-width: 250px !important;
    width: 100%;
}

.form-control-editconf-backup {
    color: #000000;
    background-color: #ffffff;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    padding: 4px 4px;
    height: 20px !important;
    max-width: 250px !important;
    min-width: 250px !important;
    width: 100%;
    font-weight: bold;
    overflow: hidden;
}

.form-control-editconf-backup:hover,
.form-control-editconf-backup:active {
    color: #2bc619;
    background-color: #ffffff;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    padding: 4px 4px;
    height: 20px !important;
    max-width: 250px !important;
    min-width: 250px !important;
    width: 100%;
    font-weight: bold;
    overflow: hidden;
}

.form-control-editconf-psize {
    color: #000000;
    background-color: #cee9ff !important;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    padding: 4px 4px;
    height: 20px !important;
    max-width: 300px !important;
    min-width: 250px !important;
    width: auto;
    font-weight: bold;
    overflow: hidden;
}

.form-control-editconf-psize:hover {
    color: #2bc619;
    background-color: #ffffff;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    padding: 4px 4px;
    height: 20px !important;
    max-width: 300px !important;
    min-width: 250px !important;
    width: 100%;
    font-weight: bold;
    overflow: hidden;
}

.form-control-editconf-siteurl,
.form-control-editconf-siteurl:visited {
    color: #000000;
    background-color: #cee9ff !important;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    padding: 4px 4px;
    height: 32px !important;
    max-width: 300px !important;
    min-width: 230px !important;
    width: 100%;
    font-weight: bold;
    overflow: hidden;
}

.form-control-editconf-siteurl:hover {
    color: #2bc619;
    background-color: #ffffff;
}

.form-control-editconf-bkptype,
.form-control-editconf-bkptype:visited {
    color: #000000;
    background-color: #cee9ff !important;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    padding: 4px 4px;
    height: 32px !important;
    max-width: 250px !important;
    min-width: 250px !important;
    width: 100%;
    font-weight: bold;
    overflow: hidden;
}

.form-control-editconf-bkptype:hover {
    color: #2bc619;
    background-color: #ffffff;
}

.form-control-editconf-smtp {
    color: #000000;
    background-color: #cee9ff !important;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    padding: 4px 4px;
    height: 18px !important;
    max-width: 270px !important;
    min-width: 230px !important;
    width: 100%;
    font-weight: bold;
    overflow: hidden;
}

.form-control-editconf-smtp:hover {
    color: #2bc619;
    background-color: #ffffff;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    padding: 4px 4px;
    height: 20px !important;
    max-width: 270px !important;
    min-width: 230px !important;
    width: 100%;
    font-weight: bold;
    overflow: hidden;
}

.form-control-editconf-password {
    color: #000000;
    background-color: #ffffff;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    padding: 4px 4px;
    height: 20px !important;
    max-width: 250px !important;
    min-width: 250px !important;
    width: 100%;
    font-weight: bold;
    overflow: hidden;
}

.form-control-editconf-password:hover {
    color: #18c91d;
    background-color: #ffffff;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    padding: 4px 4px;
    width: 100%;
    font-weight: bold;
    overflow: hidden;
}

.form-control-editconf-smtppassword {
    color: #000000;
    background-color: #ffffff;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    padding: 4px 4px;
    height: 20px !important;
    max-width: 270px !important;
    min-width: 270px !important;
    width: 100%;
    font-weight: bold;
    overflow: hidden;
}

.form-control-editconf-smtppassword:hover {
    color: #18c91d;
    background-color: #ffffff;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    padding: 4px 4px;
    width: 100%;
    font-weight: bold;
    overflow: hidden;
}

.form-control-editconf-mailserver {
    color: #000000;
    background-color: #ffffff;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    padding: 4px 4px;
    height: 18px !important;
    max-width: 250px !important;
    min-width: 250px !important;
    width: 100%;
    font-weight: bold;
    overflow: hidden;
}

.form-control-editconf-mailserver:hover {
    color: #2bc619;
    background-color: #ffffff;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
}

.form-control-editconf-theme {
    color: #000000;
    background-color: #ffffff;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    padding: 4px 4px;
    height: 20px !important;
    max-width: 320px !important;
    min-width: 260px !important;
    width: 100%;
    font-weight: bold;
    overflow: hidden;
}

.form-control-editconf-theme:hover {
    color: #2bc619;
    background-color: #ffffff;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    padding: 4px 4px;
    height: 20px !important;
    max-width: 320px !important;
    min-width: 260px !important;
    width: 100%;
    font-weight: bold;
    overflow: hidden;
}

.form-control-editconf-lang {
    color: #000000;
    background-color: #cee9ff !important;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    padding: 4px 4px;
    height: 20px !important;
    max-width: 300px !important;
    min-width: 250px !important;
    width: auto;
    font-weight: bold;
    overflow: hidden;
}

.form-control-editconf-lang:hover,
.form-control-editconf-lang:active {
    color: #1f9712;
    background-color: #ffffff;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    padding: 4px 4px;
    height: 20px !important;
    max-width: 300px !important;
    min-width: 250px !important;
    width: 100%;
    font-weight: bold;
    overflow: hidden;
}

.form-control-editconf-siteurl {
    color: #000000;
    background-color: #ffffff;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    padding: 4px 4px;
    height: 20px !important;
    max-width: 350px !important;
    min-width: 250px !important;
    width: 100%;
    font-weight: bold;
    overflow: hidden;
}

.form-control-editconf-delimiter {
    color: #000000;
    background-color: #ffffff;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    padding: 4px 4px;
    height: 20px !important;
    max-width: 50px !important;
    min-width: 30px !important;
    width: 100%;
    font-weight: bold;
    overflow: hidden;
}

.form-control-editconf-delimiter:hover {
    color: #2bc619;
    background-color: #ffffff;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    padding: 4px 4px;
    height: 20px !important;
    max-width: 50px !important;
    min-width: 30px !important;
    width: 100%;
    font-weight: bold;
    overflow: hidden;
}

.form-control-editconf-quota {
    color: #000000;
    background-color: #ffffff;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    padding: 4px 4px;
    height: 20px !important;
    max-width: 150px !important;
    min-width: 150px !important;
    width: 100%;
    font-weight: bold;
    overflow: hidden;
}

.form-control-editconf-quota:hover {
    color: #2bc619;
    background-color: #ffffff;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    padding: 4px 4px;
    height: 20px !important;
    max-width: 120px !important;
    min-width: 90px !important;
    width: 100%;
    font-weight: bold;
    overflow: hidden;
}

.form-control-editconf-type {
    color: #000000;
    background-color: #ffffff;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    padding: 4px 4px;
    height: 20px !important;
    max-width: 250px !important;
    min-width: 200px !important;
    width: 100%;
    font-weight: bold;
    overflow: hidden;
}

.form-control-editconf-type:hover {
    color: #2bc619;
    background-color: #ffffff;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    padding: 4px 4px;
    height: 20px !important;
    max-width: 250px !important;
    min-width: 200px !important;
    width: 100%;
    font-weight: bold;
    overflow: hidden;
}

.form-control-editconf-add {
    color: #000000;
    background-color: #ffffff;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    padding: 4px 4px;
    height: 20px !important;
    max-width: 220px !important;
    min-width: 200px !important;
    width: 100%;
    font-weight: bold;
    overflow: hidden;
    margin-top: 6px !important;
}

.form-control-editconf-add:hover,
.form-control-editconf-add:active {
    color: #2bc619;
    background-color: #ffffff;
    font-size: 16px;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    padding: 4px 4px;
    height: 20px !important;
    max-width: 220px !important;
    min-width: 200px !important;
    width: 100%;
    font-weight: bold;
    overflow: hidden;
}

.input-glsearch {
    max-width: 220px !important;
    min-width: 160px !important;
    margin-left: 10px !important;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    border-right: 0px !important;
    height: 35px !important;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
}

button.btn-search {
    padding: 0px 8px;
    padding-top: 0px;
    height: 35px;
    border: 2px solid black;
    border-radius: 14px;
    background-color: #a2006d !important;
    background: linear-gradient(170deg,rgba(209, 19, 146, 1) 0%, rgba(194, 12, 133, 1) 20%, rgba(176, 11, 121, 1) 48%, rgba(117, 1, 90, 1) 78%, rgba(64, 2, 49, 1) 100%);
    transition: background-color 0.6s ease;
    border-left: 0px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
}

button.btn-search:hover,
button.btn-search:active {
    background-color: #20892b !important;
    background: linear-gradient(170deg,rgba(19, 194, 37, 1) 0%, rgba(32, 137, 43, 1) 26%, rgba(19, 102, 29, 1) 53%, rgba(14, 74, 8, 1) 75%, rgba(2, 43, 2, 1) 100%);
}

.nav > li > a:hover,
.nav > li > a:focus {
    text-decoration: none;
    background-color: #0b5394;
}

.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
    background-color: #0b5394;
    border-color: #17324b;
}

.pagination > li > span:focus {
    z-index: 2;
    color: #3d85c6;
    background-color: #a4ff79;
    border-color: #17324b;
}

.pager li > a:hover,
.pager li > a:focus {
    text-decoration: none;
    background-color: #a4ff79;
}

input, textarea {
    font-size: 15px;
    font-weight: bold;
    border-radius: 8px;
    border: 2px solid #02080e;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    min-height: 35px;
    min-width: 230px;
    padding-left: 4px;
    background-color: #cee9ff !important;
}

select {
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    border: 2px solid #02080e;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78);
    min-height: 32px;
    min-width: 100px;
    padding-left: 6px;
    background-color: #fff !important;
}

select:hover {
    background-color: #2db61d;
}

.dav-wrapper {
    display: flex;
    gap: 4px;
    margin-top: 5px !important;    
    align-items: center;
}

.dav-link {
    margin-top: -5px;
}

.input-form-wrapper {
    display: flex;
    gap: 10px;
    margin-top: 0px !important;    
    align-items: center; 
}

.select-wrapper {
    display: flex;
    gap: 10px;
}

.select-title {
    font-size: 18px;
    font-weight: bold;
    align-content: center;
}

.checkbox-label {
    font-size: 16px;
    font-weight: bold;
}

.select-dropdown {
    min-width: 210px !important;
    padding-left: 8px !important;
    min-height: 30px !important;
    height: 30px !important;
    margin-right: -5px !important; 

}

.btn-primary {
    color: white;
    background-color: #185aa5;
    height: 50px;
    max-width: 220px;
    padding: 6px 10px;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    transition: background-color 0.3s ease;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

.btn-primary:hover,
.btn-primary:active {
    color: white;
    background-color: #1fb948;
    height: 50px;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    transition: background-color 0.3s ease;
}

.btn-secondary,
.btn-secondary:visited {
    color: white;
    background-color: #0f785f !important;
    height: 50px !important;
    max-width: 220px !important;
    min-width: 150px !important;
    padding: 6px 10px;
    padding-top: 14px !important;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    transition: background-color 0.3s ease;
    margin-right: -3px;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    color: white;
    background-color: #c9132e !important;
    height: 50px !important;
    max-width: 220px !important;
    min-width: 150px !important;
    padding: 6px 10px;
    padding-top: 14px !important;
    transition: background-color 0.3s ease;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    margin-right: -3px;
}

#overview ul {
    list-style: none;
    padding-left: 0;
}

.navbar-btn,
.navbar-btn:visited {
    border: 2px solid black;
    color: white !important;
    background: #0B5394;
    background: linear-gradient(145deg, rgba(11, 83, 148, 1) 0%, rgba(10, 73, 128, 1) 33%, rgba(6, 50, 87, 1) 71%, rgba(8, 49, 89, 1) 100%);
    border-radius: 8px;
    transition: background-color 0.4s ease, color 0.4s ease;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    margin-top: 8px;
    margin-bottom: 0px;
    max-width: 200px;
}

.navbar-btn:hover, 
.navbar-btn:focus,
.navbar-btn:active {
    background: #009914;
    background: linear-gradient(145deg, rgba(0, 153, 20, 1) 0%, rgba(0, 117, 14, 1) 37%, rgba(1, 87, 7, 1) 69%, rgba(0, 46, 8, 1) 100%);
    border: 2px solid black;
    color: white !important;
    border-radius: 8px;
    transition: background-color 0.4s ease, color 0.4s ease;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    margin-top: 8px;
    margin-bottom: 0px;
    max-width: 200px;
}

.navbar-toggle {
    padding: 9px 10px;
    margin-right: 15px;
    margin-top: 15px;
    margin-bottom: 8px;
    background-color: #0b5394;
    background-image: none;
    border-radius: 8px;
}

.navbar-toggle .menu-label {
    color: #fff;
    font-weight: bold;
    font-size: 20px;
}

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    position: relative;
    border-top: 0px;
    margin-left: 0px;
    z-index: 1050;
}

.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color: #1fa14a;
    border: 2px solid #041d2e;
    border-radius: 8px;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
}

.navbar-default .navbar-toggle {
    border: 2px solid #041d2e;
    border-radius: 8px;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
}

.custom-menu-btn {
    margin-left: 40px;
    margin-top: 12px;
    position: relative;
    z-index: 1050;
    min-width: 146px;
    padding: 10px 10px;
    color: white;
    background-color: #0b5394;
    border: 2px solid #041d2e;
    border-radius: 8px;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    transition: background-color 0.4s ease, color 0.4s ease;
}

a[href="list-virtual.php"].panel-default {
    width: 1300px;
    margin: 0 auto;
}

.list-overview {
    border: 0px;
    height: 75px;
    margin-bottom: 6px;
}

.input-group-btn > .btn {
    margin-top: 1.5px;
    border: 1px solid black;
    border-radius: 8px;
    height: 34px;
}

.indent {
    padding-left: 12px;
    margin-top: 12px;
    font-weight: bold;
    color: #ff8400;
}

.input-group {
    display: flex;
    max-width: 400px;
}

.center-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: left;
}

.backup-wrapper {
    display: flex;
    gap: 10px;
    align-items: center;
}

#login_header_logo {
    width: auto;
    height: 50px;
    margin-top: 3px;
    margin-right: 0px;
    z-index: 100;
}

#login-logo-wrapper {
    position: fixed;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 900;
    text-align: center;
}

.well {
    min-height: 450px;
    min-width: 224px;
    max-width: 510px;
    width: 100%;
    padding: 5px;
    background-color: #112a41;
    border-radius: 12px;
    border: 4px solid black;
    box-shadow: -1px 1px 13px 8px rgba(0,0,0,0.79);
    -webkit-box-shadow: -1px 1px 13px 8px rgba(0,0,0,0.79);
    -moz-box-shadow: -1px 1px 13px 8px rgba(0,0,0,0.79);
    background-image: url('../images/logon.jpg');
    margin: 0 auto;
}

.login-title {
    color: white;
    background-color: rgba(10, 47, 81, 0.873);
    border: 3px solid black;
    border-radius: 8px;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    font-size: 28px;
    font-weight: bold;
    margin: 0 auto;
    text-align: center;
    max-width: 320px;
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 4px;
}

.login-label {
    color: white;
    display: block;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 6px;
}

.login-label-lang {
    font-size: 16px;
    font-weight: bold;
    margin-right: 8px;
}

select#lang {
    background-color: #2064a5 !important;
    color: white !important;
    border: 2px solid black;
    border-radius: 8px;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    padding: 0px 6px;
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    max-width: 320px !important;
    min-width: 220px !important;
    max-height: 32px !important;

}

.login-input-form {
    flex-direction: row;
    align-items: center;
    margin: 0 auto;
    /*margin-bottom: 15px;*/
    max-width: 250px;
    width: 100%;
    border: 0px;
    border-radius: 8px;
}

.login-form-control {
    font-size: 14px;
    font-weight: bold;
    padding: 4px 4px;
    height: 38px !important;
/*    margin-bottom: 15px; */
    max-width: 250px;
    width: 100%;
    color: #000;
    background-color: #cfe2f3;
    border: 3px solid black;
    border-radius: 8px;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
}

.login-center {
    margin: 0 auto;
    text-align: center;
}

.login-container {
    max-width: 700px !important;
    width: 100%;
}

.forgotten-pw {
    font-size: 14px;
    color: #778899;
    margin-top: -6px;
}

.btn-login {
    background-color: #1885e5 !important;
background: linear-gradient(148deg,rgba(24, 133, 229, 1) 0%, rgba(25, 99, 168, 1) 25%, rgba(20, 82, 140, 1) 50%, rgba(10, 46, 87, 1) 75%, rgba(6, 28, 54, 1) 100%);    
    border: 3px solid black !important;
    font-size: 18px !important;
    border-radius: 10px !important;
    min-height: 45px !important;
    font-weight: bold !important;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    transition: background-color 0.3s ease !important;
    padding-top: 8px !important;
    width: 146px !important;
    height: 50px !important;
}

.btn-login:hover,
.btn-login:active {
background: #18e51f;
background: linear-gradient(148deg,rgba(24, 229, 31, 1) 0%, rgba(24, 158, 57, 1) 33%, rgba(17, 120, 41, 1) 58%, rgba(14, 79, 24, 1) 80%, rgba(5, 36, 10, 1) 100%);
    transition: background-color 0.3s ease !important;
}

.text-center {
    margin-top: 10px;
    text-align: center;
    margin-left: 0px;
    z-index: 1000;
}

.text-center-conf {
    color: #68ff64;
    margin-top: -10px;
    margin-bottom: 20px;
    text-align: center;
    margin-left: 0px;
    z-index: 1000;
    font-size: 22px;
    font-weight: bold;
}

.text-footer {
    font-size: 14px !important;
    font-weight: bold !important;
    margin: 0 auto;
    margin-top: -2px;
}

.text-bold {
    font-size: 16px !important;
    font-weight: bold !important;    
}

button {
    padding: 10px 20px;
    font-size: 16px;
    margin-top: 0px;
    cursor: pointer;
    border-radius: 8px;
    border: 3px solid #010b15;
    background-color: #2279c7;
    color: white;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    font-weight: bold;
}

.button:hover, .button:active {
    background-color: #4CAF50;
}

.error {
    color: red;
}

pre {
    max-width: 530px;
    white-space: pre-wrap;
    word-wrap: break-word;
    border: 2px solid black;
    padding: 10px;
    margin-left: 10px;
    text-align: left;
}

.cancel-message {
    color: red;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

.dkimgen-title {
    color: white;
    font-size: 16px;
    font-weight: bold;
    margin-left: 10px;
}

.dkim-message {
    color: #38f120;
    font-weight: bold;
    font-size: 20px;
    margin-left: 15px;
    margin-top: 10px;
}

.dkim-overwrite {
    color: white;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

.body-title {
    color: white;
    font-size: 18px;
    font-weight: bold;
    margin-left: 16px;
}

.red-text {
    color: rgb(255, 38, 38);
    border-radius: 8px;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
}

.fat-text {
    font-size: 19px;
    font-weight: bold;
}

.body-text {
    font-size: 16px;
    font-weight: 550;
    color: white;
}

.form-text {
    font-size: 18px;
    font-weight: 600;
    color: white;
    margin-left: 12px;  
}

.list-title {
    color: white;
    font-size: 24px;
    font-weight: bold;
    padding-left: 12px;
    margin-top: -5px !important;
}

.frmOverview {
    background-color: rgba(26, 98, 161, 0.658);
    height: 60px;
    padding: 8px;
    padding-left: 12px;
    padding-top: 11px;
    border-bottom: 2px solid #010B14;
    border-radius: 8px;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

.btn-center {
    margin: 0 auto;
}

.panel-heading-title {
    color: white;
    background-color: #0f5393bb;
    border-top: 0px;
    border-bottom: 3px solid #03101d;
    font-size: 22px;
    font-weight: bold;
    align-items: center;
    width: 100%;
    padding-top: 10px;
}

.totp-image {
    background-color: #f0f8ff;
    color: black;
    height: auto;
    text-align: center;
    border: 3px solid #010B14;
    border-radius: 14px;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    margin-left: 16px;
}

.input-password-current {
    background-color: #f0f8ff;
    border: 2px solid #010B14;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 16px;
    color: #333;
    width: 100%;
    max-width: 250px !important;
    min-width: 250px !important;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    margin-left: 15px;
}

.input-totp-current {
    background-color: #f0f8ff;
    border: 2px solid #010B14;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 16px;
    color: #333;
    width: 100%;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    margin-left: 15px !important;
    max-width: 250px;
}

.btn,
.btn:visited {
    color: white;
    border: 2px solid #041d2e;
    font-size: 15px;
    border-radius: 14px;
    font-weight: bold;
    box-shadow: -1px 1px 3px 3px rgba(29,111,227,0.69);
    -webkit-box-shadow: -1px 1px 3px 3px rgba(29,111,227,0.69);
    -moz-box-shadow: -1px 1px 3px 3px rgba(29,111,227,0.69);
    transition: background-color 0.3s ease;
    width: 160px;
}

.btn:hover,
.btn:focus,
.btn:active {
    color: white;
}

.btn-menu,
.btn-menu:visited {
    border: 2px solid black;
    color: white !important;
    background: #0B5394;
    background: linear-gradient(145deg, rgba(11, 83, 148, 1) 0%, rgba(10, 73, 128, 1) 33%, rgba(6, 50, 87, 1) 71%, rgba(8, 49, 89, 1) 100%);
    border-radius: 14px;
    transition: background-color 0.4s ease, color 0.4s ease;
    box-shadow: -1px 1px 3px 3px rgba(29,111,227,0.69);
    -webkit-box-shadow: -1px 1px 3px 3px rgba(29,111,227,0.69);
    -moz-box-shadow: -1px 1px 3px 3px rgba(29,111,227,0.69);
    margin-top: 10.5px;
    margin-bottom: 0px;
    margin-right: 10.5px;
    max-width: 200px;
    height: 45px;
    min-height: 45px;
    padding-top: 10px !important;
}

.btn-menu:hover, 
.btn-menu:focus,
.btn-menu:active {
    background: #009914;
    background: linear-gradient(145deg, rgba(0, 153, 20, 1) 0%, rgba(0, 117, 14, 1) 37%, rgba(1, 87, 7, 1) 69%, rgba(0, 46, 8, 1) 100%);
    max-width: 200px;
}

.btn-menu-logout,
.btn-menu-logout:visited {
    border: 2px solid black;
    color: white !important;
    background: #9e0916;
    background: linear-gradient(145deg, rgba(158, 9, 22, 1) 0%, rgba(122, 4, 16, 1) 33%, rgba(87, 6, 13, 1) 68%, rgba(51, 4, 10, 1) 100%);
    border-radius: 14px;
    transition: background-color 0.4s ease, color 0.4s ease;
    box-shadow: -1px 1px 3px 3px rgba(29,111,227,0.69);
    -webkit-box-shadow: -1px 1px 3px 3px rgba(29,111,227,0.69);
    -moz-box-shadow: -1px 1px 3px 3px rgba(29,111,227,0.69);
    margin-top: 10px;
    margin-bottom: 0px;
    max-width: 200px;
    height: 45px;
    min-height: 45px;
    padding-top: 10px !important;     
}

.btn-menu-logout:hover, 
.btn-menu-logout:focus,
.btn-menu-logout:active {
    background: #FD1E1E;
    background: linear-gradient(145deg, rgba(253, 30, 30, 1) 0%, rgba(166, 0, 17, 1) 33%, rgba(130, 0, 11, 1) 69%, rgba(84, 0, 11, 1) 100%);
    max-width: 200px;
}

.btn-calsel,
.btn-calsel:visited {
    border: 3px solid black;
    color: white !important;
    background: #0B5394;
    background: linear-gradient(155deg,rgb(21, 152, 232) 0%, rgb(11, 88, 185) 25%, rgb(11, 57, 168) 50%, rgb(9, 56, 130) 73%, rgb(5, 23, 74) 100%);
    border-radius: 14px !important;
    transition: background-color 0.4s ease, color 0.4s ease;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    max-width: 120px;
    height: 40px;
    min-height: 40px;
}

.btn-calsel:hover, 
.btn-calsel:focus,
.btn-calsel:active {
    background: #009914;
    background: linear-gradient(155deg,rgba(161, 66, 245, 1) 0%, rgba(108, 26, 189, 1) 25%, rgba(90, 17, 158, 1) 50%, rgba(59, 10, 115, 1) 73%, rgba(36, 5, 64, 1) 100%);
    max-width: 120px;
}

.btn-acton {
    background: #87133e;
    background: linear-gradient(130deg,rgba(135, 19, 62, 1) 1%, rgba(102, 27, 54, 1) 26%, rgba(84, 16, 41, 1) 51%, rgba(61, 9, 28, 1) 78%, rgba(26, 3, 11, 1) 100%);
    border: 2px solid black;
    border-radius: 14px !important;
    font-size: 14px !important;
    font-weight: bold;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    transition: background-color 0.3s ease;
    padding-top: 9px;
    color: white;
    width: 36px;
    height: 34px;
    padding: 6px 0px !important;
}

.btn-acton:hover, 
.btn-acton:active {
    color: #fff;
    background: #ff637a;
    background: linear-gradient(130deg,rgba(255, 99, 122, 1) 0%, rgba(232, 30, 70, 1) 26%, rgba(201, 26, 70, 1) 51%, rgba(181, 27, 50, 1) 74%, rgba(99, 13, 26, 1) 100%);
}

.btn-actoff {
    color: #fff;
    background: #1cbd0d;
    background: linear-gradient(130deg,rgba(28, 189, 13, 1) 1%, rgba(14, 150, 19, 1) 26%, rgba(17, 122, 11, 1) 51%, rgba(7, 89, 21, 1) 78%, rgba(3, 46, 8, 1) 100%);
    border: 2px solid black;
    font-size: 14px;
    border-radius: 14px !important;
    height: 34px;
    font-weight: bold;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    transition: background-color 0.3s ease;
    width: 36px;
    padding: 6px 2px !important;
}

.btn-actoff:hover, 
.btn-actoff:active {
    color: #fff;
    background: #63ff70;
    background: linear-gradient(130deg,rgba(99, 255, 112, 1) 0%, rgba(30, 232, 37, 1) 26%, rgba(29, 201, 26, 1) 51%, rgba(27, 181, 53, 1) 74%, rgba(11, 112, 30, 1) 100%);
}

.btn-danger {
    color: #fff;
    background-color: #690c0c !important;
    background: linear-gradient(356deg,rgba(23, 3, 8, 1) 0%, rgba(84, 8, 21, 1) 22%, rgba(105, 12, 12, 1) 46%, rgba(140, 15, 32, 1) 72%, rgba(194, 14, 47, 1) 100%);
    border: 2px solid black !important;
    padding: 4px 0px;
    width: 102px;
    height: 34px;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    font-size: 14px !important;
    margin-right: 10px;
}

.btn-danger:hover, 
.btn-danger:active {
    color: #fff;
    background: linear-gradient(356deg,rgba(77, 10, 10, 1) 0%, rgba(117, 19, 19, 1) 22%, rgba(179, 29, 29, 1) 46%, rgba(232, 19, 19, 1) 72%, rgba(255, 66, 66, 1) 100%);
    border: 2px solid black !important;
}

.btn-alias {
    color: #fff;
    background: #5310c7;
    background: linear-gradient(177deg,rgba(83, 16, 199, 1) 1%, rgba(64, 14, 150, 1) 26%, rgba(52, 11, 122, 1) 51%, rgba(37, 7, 89, 1) 78%, rgba(20, 3, 46, 1) 100%);
    border: 2px solid black !important;
    border-radius: 14px !important;
    font-size: 14px;
    font-weight: bold;
    max-width: 120px !important;
    min-width: 80px;
    width: 100%;
    height: 34px !important;
    padding: 4px 8px;
}

.btn-alias:hover, 
.btn-alias:active {
    color: #fff;
    background: #983bf5;
    background: linear-gradient(177deg,rgba(152, 59, 245, 1) 0%, rgba(120, 24, 204, 1) 26%, rgba(93, 17, 168, 1) 51%, rgba(76, 15, 145, 1) 74%, rgba(45, 6, 79, 1) 100%);
    height: 34px !important;
}

.btn-addnew {
    color: #fff;
    background: #5310c7;
    background: linear-gradient(177deg,rgb(30, 199, 16) 1%, rgb(14, 150, 35) 26%, rgb(14, 122, 11) 51%, rgb(10, 89, 7) 78%, rgb(10, 46, 3) 100%);
    border: 2px solid black !important;
    border-radius: 14px !important;
    font-size: 14px;
    font-weight: bold;
    max-width: 42px !important;
    min-width: 42px;
    width: 100%;
    height: 36px !important;
    padding: 4px 8px;
}

.btn-addnew:hover, 
.btn-addnew:active {
    color: #fff;
    background: #983bf5;
    background: linear-gradient(177deg,rgb(72, 255, 57) 1%, rgb(12, 200, 41) 26%, rgb(26, 168, 22) 51%, rgb(14, 111, 11) 78%, rgb(19, 77, 8) 100%);
    height: 36px !important;
}

.btn-export {
    color: #fff;
    background: #5310c7;
    background: linear-gradient(177deg,rgb(199, 85, 16) 1%, rgb(150, 78, 14) 26%, rgb(122, 58, 11) 51%, rgb(89, 45, 7) 78%, rgb(46, 21, 3) 100%);
    border: 2px solid black !important;
    border-radius: 14px !important;
    font-size: 14px;
    font-weight: bold;
    max-width: 42px !important;
    min-width: 42px;
    width: 100%;
    height: 36px !important;
    padding: 4px 8px;
}

.btn-export:hover, 
.btn-export:active {
    color: #fff;
    background: #983bf5;
    background: linear-gradient(177deg,rgba(152, 59, 245, 1) 0%, rgba(120, 24, 204, 1) 26%, rgba(93, 17, 168, 1) 51%, rgba(76, 15, 145, 1) 74%, rgba(45, 6, 79, 1) 100%);
    height: 36px !important;
}


.btn-arrows {
    color: #fff;
    background-color: #9932cc !important;
    background: linear-gradient(155deg,rgba(153, 50, 204, 1) 0%, rgba(122, 38, 163, 1) 27%, rgba(95, 26, 130, 1) 50%, rgba(73, 16, 102, 1) 77%, rgba(30, 3, 43, 1) 100%);
    border: 2px solid black !important;
    border-radius: 8px;
    font-size: 14px;
    font-weight: bold;   
    max-width: 44px !important;
    min-width: 44px;
    height: 26px !important;
    padding: 0px 0px;
    box-shadow: 2px 1px 2px 1px rgba(1, 4, 18, 0.80) !important;
    margin-left: 6px;
    margin-right: 6px;
    margin-top: 3.5px;
}

.btn-arrows:active,
.btn-arrows:hover {
    background-color: #bf00ff !important;
    background: linear-gradient(155deg,rgba(20, 197, 224, 1) 0%, rgba(11, 148, 176, 1) 27%, rgba(15, 120, 168, 1) 50%, rgba(15, 72, 148, 1) 77%, rgba(7, 33, 89, 1) 100%);
}

.btn-edit {
    color: #fff;
    background: #0b84e0;
    background: linear-gradient(172deg,rgba(11, 132, 224, 1) 0%, rgba(8, 107, 194, 1) 26%, rgba(8, 75, 163, 1) 51%, rgba(4, 38, 110, 1) 78%, rgba(5, 15, 59, 1) 100%);
    border: 2px solid black !important;
    border-radius: 14px !important;
    font-size: 14px;
    font-weight: bold;
    max-width: 118px !important;
    min-width: 118px !important;
    width: auto !important;
    height: 34px !important;
    padding: 4px 0px;
}

.btn-edit:hover, 
.btn-edit:active {
    color: #fff;
    background: #22f2c9;
    background: linear-gradient(172deg,rgba(34, 242, 201, 1) 0%, rgba(14, 194, 149, 1) 26%, rgba(14, 156, 115, 1) 51%, rgba(8, 130, 73, 1) 78%, rgba(6, 71, 43, 1) 100%);
}

.btn-sieve {
    color: #fff;
    background: #105fc7;
    background: linear-gradient(130deg,rgb(199, 102, 16) 1%, rgb(150, 78, 14) 26%, rgb(122, 42, 11) 51%, rgb(89, 49, 7) 78%, rgb(46, 21, 3) 100%);
    border: 2px solid black !important;
    border-radius: 14px !important;
    font-size: 14px;
    font-weight: bold;
    max-width: 42px !important;
    min-width: 42px;
    width: 100%;
    height: 34px !important;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    margin-left: -12px !important;
}

.btn-sieve:hover, 
.btn-sieve:active {
    color: #fff;
    background: #63beff;
    background: linear-gradient(130deg,rgba(99, 190, 255, 1) 0%, rgba(30, 134, 232, 1) 26%, rgba(26, 105, 201, 1) 51%, rgba(27, 94, 181, 1) 74%, rgba(13, 41, 128, 1) 100%);
}

.confbox {
    margin-left: 2px !important;
    margin-top: 19px !important;
    min-height: 14px;
    min-width: 14px;
    height: 14px;
    width: 14px;
    color: white;
    background-color: #2480e9;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.confbox-edit {
    margin-left: 0px !important;
    margin-top: 11px !important;
    min-height: 14px;
    min-width: 14px;
    height: 14px;
    width: 14px;
    color: white;
    background-color: #2480e9;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.form-group {
    margin-bottom: 10px;
    display: flex;
}

.form-tables {
    display: flex;
    margin-left: 15px;
    margin-bottom: 10px;    
}

.form-horizontal .form-group {
    margin-right: -15px;
    margin-left: 15px;
    margin: 10px auto;
}

.container-fluid {
    padding-left: 5px;
    position: relative;
}

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    line-height: 1.42857143;
    vertical-align: middle;
    border-top: 2px;
    border-color: black;
    color: white;
    font-weight: 550;
    font-size: 14px;
}

a {
    color: white;
    text-decoration: none;
}

a:hover {
    color: #23db1e;
}

.form-control-static {
    margin-left: 15px;
}

.map-item-link { 
    display:block; 
    color:#dcdcdc; 
    text-decoration:none; 
}

.list-group-item.active .map-item-link { color:#fff; }

.map-title { 
    font-size: 13px;
    font-weight:600; 
    margin-bottom:2px; 
}

.map-uri { font-family: monospace; font-size: 11px; opacity: .8; }

/* Editor mit Zeilennummern */
.map-editor-container{
    display:flex;
    align-items:stretch;
    border:1px solid #ccc;
    border-radius:4px;
    overflow:hidden;
}

.map-editor-gutter{
    min-width:30px;
    background:#450164;
    color:white;
    padding:6px 8px;
    text-align:right;
    font-family:monospace;
    line-height:1.4285714286;
    user-select:none;
    overflow:hidden;
    white-space: pre; /* Zeilenumbrüche im Gutter anzeigen */
}

.map-editor{
    border:0;
    border-left:1px solid #ddd;
    border-radius:0;
}

.map-editor-rspamd {
    background-color: #6495ed !important;
    resize:vertical !important;
    font-family:monospace !important;
    line-height:1.53 !important;
    padding:6px 6px !important;
    width:100% !important;
    min-width:400px !important;
    min-height: calc(1.4285714286em * 10 + 16px) !important;
}    

.table-rspamd {
    color: white;
    background-color: #0b5394 !important;
    width: 300px;
    margin-left: 20px;
    border-radius: 12px;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.82) !important;
    padding: 6px; 
}

.label-readonly {
    color:#e80000;
    font-size: 13px;
    font-weight: bold;
    margin-top: -11px !important;
    margin-right: -11px !important;
}

.list-group-item {
    color: white !important;
    background-color: #10528c !important;
    border: 2px solid black;
}

.list-group-item.active {
    background-color: #00bfff !important;    
    color: white !important;    
    border: 2px solid black;
}

.content_logs {
    color: black !important;
    background-color: #0b5394 !important;
}

.form-control.input-sm {
    width: 210px !important;
    max-width: 210px !important;
    min-width: 210px !important;
    height: 30px !important;
    max-height: 30px !important;
}

input#postfix_month.form-control.input-sm, input#postfix_day.form-control.input-sm, input#postfix_hour.form-control.input-sm {
    width: 50px !important;
}

input#postfix_status.form-control.input-sm {
    width: 60px !important;
}

input#postfix_mail_from.form-control.input-sm {
    width: 90px !important;
}

input#postfix_mail_to.form-control.input-sm {
    width: 80px !important;
}

input#postfix_msgid.form-control.input-sm {
    width: 250px !important;
    max-width: 250px !important;
}

.pf_msgid {
    width: 1%;
    max-width: 250px;
    word-wrap: break-word;
    white-space: normal;
}

input#dovecot_month.form-control.input-sm, input#dovecot_day.form-control.input-sm, input#dovecot_hour.form-control.input-sm {
    width: 50px !important;
}

input#auth_month.form-control.input-sm, input#auth_day.form-control.input-sm, input#auth_hour.form-control.input-sm {
    width: 50px !important;
}

button#theme-toggle.btn.btn-default.btn-block.theme-toggle {
    width: 140px;
    background-color: #f6b26b;
    color: white;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
    border-radius: 8px;
    border: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center !important;
    margin: 0 auto;
    height: 50px;
    font-size: 16px;
    padding: 8px 6px;
}

button#theme-toggle.btn.btn-default.btn-block.theme-toggle:hover {
    background-color: #e06666;
}

a#theme-toggle.btn.navbar-btn.theme-toggle {
    border-radius: 8px;
    border: 2px solid black;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}

.theme-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    margin: 8px 5px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.theme-toggle .glyphicon {
    margin-right: 8px;
    font-size: 16px;
}

.input-dkimkey-name, .input-dkimkey-domain {
    text-align: left !important;
    display: block;
    color: black !important;
    margin: 0 auto !important;
    font-size: 16px;
    font-weight: bold;
    max-width: 250px !important;
    margin-left: 10px !important;
    padding-left: 6px !important;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78) !important;
}

.show-name {
    font-size: 16px;
    font-weight: bold;
    margin-top: 8px !important;
}

.name-down {
    margin-top: 14px !important;
    margin-left: 4px;
}

.form-group .control-label + div {
    display: flex;
    align-items: baseline;
    min-height: 30px;
    margin-top: 2px;
}

.form-cert-domain {
    width: 210px !important;
    max-width: 250px !important;
    margin-right: 5px !important;
    margin-bottom: 30px !important;
    transition: color 0.3s ease;
}

.form-cert-domain:active,
.form-cert-domain:hover {
    color: rgb(21, 150, 235);
    padding: 2px 8px;
    transition: color 0.3s ease;
}

.input-field {
    max-width: 250px;
    margin-right: 5px !important;
}

.adddav-label {
    color: #fff;
    flex: 0 0 220px !important;
    text-align: right !important;
    margin-right: 26px;
    margin-top: 2px;
    font-size: 16px;
    font-weight: bold;
    padding-top: 10px !important;
    align-items: center;
    vertical-align: middle;
}

.control-label {
    color: #fff;
    flex: 0 0 170px !important;
    text-align: right !important;
    margin-right: 15px;
    margin-top: 2px;
    font-size: 16px;
    font-weight: bold;
    padding-top: 12px !important;
    align-items: center;
    vertical-align: middle;
}

.control-label-cron {
    color: #fff;
    text-align: right !important;
    margin-right: -12px !important;
    margin-top: -6.5px !important;
    font-size: 16px;
    font-weight: bold;
}

.control-label-admin {
    color: #fff;
    flex: 0 0 215px !important;
    text-align: right !important;
    margin-right: 15px;
    margin-top: 2px;
    font-size: 16px;
    font-weight: bold;
    padding-top: 12px !important;
    align-items: center;
    vertical-align: middle;
}

.control-label-vhosts {
    color: #fff;
    flex: 0 0 260px !important;
    text-align: right !important;
    margin-right: 15px;
    margin-top: 2px;
    font-size: 16px;
    font-weight: bold;
    padding-top: 12px !important;
    align-items: center;
    vertical-align: middle;
}

.control-label-userdb {
    color: #fff;
    flex: 0 0 185px !important;
    text-align: right !important;
    margin-right: 15px;
    margin-top: 2px;
    font-size: 16px;
    font-weight: bold;
    padding-top: 12px !important;
    align-items: center;
    vertical-align: middle;
}

.control-label-backup {
    color: #fff;
    flex: 0 0 210px !important;
    text-align: right !important;
    margin-right: 15px;
    margin-top: 2px;
    font-size: 16px;
    font-weight: bold;
    padding-top: 12px !important;
    align-items: center;
    vertical-align: middle;
}

.control-label-domain {
    color: #fff;
    flex: 0 0 200px !important;
    text-align: right !important;
    margin-right: 15px;
    margin-top: 2px;
    font-size: 16px;
    font-weight: bold;
    padding-top: 12px !important;
    align-items: center;
    vertical-align: middle;
}

.control-label-mailbox {
    color: #fff;
    flex: 0 0 230px !important;
    text-align: right !important;
    margin-right: 15px;
    margin-top: 2px;
    font-size: 16px;
    font-weight: bold;
    padding-top: 12px !important;
    align-items: center;
    vertical-align: middle;
}

.control-label-alias {
    color: #fff;
    flex: 0 0 150px !important;
    text-align: right !important;
    margin-right: 15px;
    margin-top: 2px;
    font-size: 16px;
    font-weight: bold;
    padding-top: 12px !important;
    align-items: center;
    vertical-align: middle;
}

.control-label-fwd {
    color: #fff;
display: flex;
    text-align: center !important;
    margin-right: 12px;
    font-size: 18px;
    font-weight: bold;
    align-items: center;
    vertical-align: middle;
    justify-content: center;
    width: 100%;
}

.control-label-dkim {
    color: #fff;
    flex: 0 0 230px !important;
    text-align: right !important;
    margin-right: 15px;
    margin-top: 2px;
    font-size: 16px;
    font-weight: bold;
    padding-top: 12px !important;
    align-items: center;
    vertical-align: middle;
}

.control-label-dkimsigning {
    color: #fff;
    flex: 0 0 230px !important;
    text-align: right !important;
    margin-right: 15px;
    margin-top: 2px;
    font-size: 16px;
    font-weight: bold;
    padding-top: 12px !important;
    align-items: center;
    vertical-align: middle;
}

.control-label-certificates {
    color: #fff;
    flex: 0 0 305px !important;
    text-align: right !important;
    margin-right: 12px;
    margin-top: 1px;
    font-size: 16px;
    font-weight: bold;
    padding-top: 12px !important;
    align-items: center;
    vertical-align: middle;
}

.control-label-cron {
    color: #fff;
    flex: 0 0 200px !important;
    text-align: right !important;
    margin-right: 15px;
    margin-top: 2px;
    font-size: 16px;
    font-weight: bold;
    padding-top: 12px !important;
    align-items: center;
    vertical-align: middle;
}

.control-label-adminpassword {
    color: #fff;
    flex: 0 0 270px !important;
    text-align: right !important;
    margin-right: 15px;
    margin-top: 2px;
    font-size: 16px;
    font-weight: bold;
    padding-top: 12px !important;
    align-items: center;
    vertical-align: middle;
}

.control-label-totp {
    display: flex;
    color: #fff;
    text-align: right !important;
    font-size: 16px;
    font-weight: bold;
    padding-top: 4px;
    align-items: center;
    margin: 0 auto;
}

.control-label-sieve {
    color: #fff;
    display: flex;
    gap: 10px;
    justify-content: left;
    align-items: center;
    margin-left: 24px !important;
}

.control-label-rules {
    color: #fff;
    display: flex;
    gap: 10px;
    justify-content: left;
    align-items: center;
    margin-left: 12px !important;
}

.control-label-config {
    color: #ffffff;
    flex: 0 0 290px !important;
    text-align: right !important;
    margin-right: 15px;
    margin-top: 2px;
    font-size: 16px;
    font-weight: bold;
    padding-top: 4px !important;
    align-items: center;
    vertical-align: middle;
}

.control-label-config-add {
    color: #fff;
    flex: 0 0 310px !important;
    text-align: right !important;
    margin-right: 15px;
    margin-top: 9px;
    font-size: 20px;
    font-weight: bold;
    align-items: center;
    vertical-align: middle;
}

.control-label-config-type {
    color: #fff;
    text-align: right !important;
    font-size: 20px !important;
    font-weight: bold !important;
    align-items: center;
    margin: 0 auto;
    margin-left: 60px;
}

.control-label-config-general {
    color: #fff;
    flex: 0 0 350px !important;
    text-align: right !important;
    margin-right: 15px;
    font-size: 16px;
    font-weight: bold;
    padding-top: 6px !important;
    align-items: center;
    vertical-align: middle;
}

.control-label-config-password {
    color: #fff;
    flex: 0 0 420px !important;
    text-align: right !important;
    margin-right: 15px;
    margin-top: 2px;
    font-size: 16px;
    font-weight: bold;
    padding-top: 4px !important;
    align-items: center;
    vertical-align: middle;
}

.control-label-config-smtp {
    color: #fff;
    flex: 0 0 330px !important;
    text-align: right !important;
    margin-right: 15px;
    margin-top: 2px;
    font-size: 16px;
    font-weight: bold;
    padding-top: 4px !important;
    align-items: center;
    vertical-align: middle;
}

.control-label-config-mailserver {
    color: #fff;
    flex: 0 0 360px !important;
    text-align: right !important;
    margin-right: 15px;
    margin-top: 2px;
    font-size: 16px;
    font-weight: bold;
    padding-top: 4px !important;
    align-items: center;
    vertical-align: middle;
}

.control-label-config-quota {
    color: #fff;
    flex: 0 0 300px !important;
    text-align: right !important;
    margin-right: 15px;
    margin-top: 2px;
    font-size: 16px;
    font-weight: bold;
    padding-top: 4px !important;
    align-items: center;
    vertical-align: middle;
}

.control-label-config-features {
    color: #fff;
    flex: 0 0 290px !important;
    text-align: right !important;
    margin-right: 15px;
    margin-top: 2px;
    font-size: 16px;
    font-weight: bold;
    padding-top: 4px !important;
    align-items: center;
    vertical-align: middle;
    padding: 2px 4px;
}

.control-label-config-backup {
    color: #fff;
    flex: 0 0 322px !important;
    text-align: right !important;
    margin-right: 15px;
    margin-top: 2px;
    font-size: 16px;
    font-weight: bold;
    padding-top: 4px !important;
    align-items: center;
    vertical-align: middle;
}

.control-label-config-theme {
    color: #fff;
    flex: 0 0 318px !important;
    text-align: right !important;
    margin-right: 15px;
    margin-top: 2px;
    font-size: 16px;
    font-weight: bold;
    padding-top: 4px !important;
    align-items: center;
    vertical-align: middle;
}

.control-label-config-syslog {
    color: #5aff1f;
    text-align: center;
    margin-left: 160px;
    margin-bottom: 15px;
    font-size: 22px !important;
    font-weight: bold !important;
    align-items: center;
    vertical-align: middle;
}

.control-label-config-mailbox {
    color: #fff;
    flex: 0 0 310px !important;
    text-align: right !important;
    margin-right: 15px;
    margin-top: 2px;
    font-size: 16px;
    font-weight: bold;
    padding-top: 4px !important;
    align-items: center;
    vertical-align: middle;
}

.control-label-config-domain {
    color: #fff;
    flex: 0 0 314px !important;
    text-align: right !important;
    margin-top: 2px;
    margin-right: 15px;
    font-size: 16px;
    font-weight: bold;
    padding-top: 4px !important;
    align-items: center;
    vertical-align: middle;
}

.control-label-config-webserver {
    color: #fff;
    flex: 0 0 314px !important;
    text-align: right !important;
    margin-top: 2px;
    margin-right: 15px;
    font-size: 16px;
    font-weight: bold;
    padding-top: 4px !important;
    align-items: center;
    vertical-align: middle;
}

.control-label-config-userdb {
    color: #fff;
    flex: 0 0 314px !important;
    text-align: right !important;
    margin-top: 2px;
    margin-right: 15px;
    font-size: 16px;
    font-weight: bold;
    padding-top: 4px !important;
    align-items: center;
    vertical-align: middle;
}

.help-block {
    margin-top: 14px !important;
    margin-right: 5px;
    margin-left: 25px !important;
    margin-bottom: 0px !important;
    max-width: 750px !important;
    color: #ffc87c;
    font-size: 15px;
}

.domainsList {
    display: flex;
    flex-direction: column;
    max-width: 450px !important;
    width: 100%;
    max-height: 250px !important;
    margin-top: 1px !important;
    margin-left: -40px;
    list-style: none;    
}

.checkbox {
    margin-top: 4px !important;
}

.table {
    border-color: #030321 !important;
    border-spacing: 0;
    background-color: #0b5394;
}

.table-dav {
    border-color: #030321 !important;
    border-spacing: 0;
    background-color: #1283d4f1;
    margin-bottom: 0px !important;
    max-width: 950px !important;
}

.table-log {
    color: white;
    border-color: #030321 !important;
    background-color: #137ac3;
    font-size: 16px !important;
    font-weight: bold;
    width: 100%;
}

.table-log tr {
    text-align: left;
    border-bottom: 2px solid #010b15;
}

.table-log td {
    border: 0px;
    padding-left: 5px;
}

.hilightoff {
    color: white;
}

.hilighton {
    color: white;
    background-color: #7e1236;
}

tr.highlightoff {
    padding: 5px !important;
    padding-left: 6px !important;
}

.log-footer {
    color: white;
    background-color: #0f5393;
    border: 0px !important;
    height: 40px;
    margin: 0 auto;
    padding-top: 6px;
    padding-left: 10px;
}

.log-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 14px;
}

.footer-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.show-status {
    margin-left: 23px;
}

.tr-dash {
    border-top: 0px !important;
    border-bottom: 0px !important;
}

tr.header {
    height: 40px;
    background-color: #8e1342;
}

.table>thead>tr>th {
    font-size: 15px;
    font-weight: bold;
}

select.form-control {
/*  width: 250px; */
    display: flex;
}

.db_selection {
    color: white;
    font-size: 18px;
    font-weight: bold;
}

.fm-label {
    display: flex;
    justify-content: right;
    font-size: 18px;
    font-weight: bold;
    color: white;
    margin-right: 100px !important;
    align-items: center;
}

.fm-input {
    margin-top: 0px;
    margin-right: 12px;
    margin-left: 10px;
    width: 200px;
    max-width: 200px;
}

.fm-input-search {
    max-width: 150px !important;
    width: 150px !important;
    padding-left: 10px;
}

.list-label {
    display: flex;
    font-size: 18px;
    font-weight: bold;
    align-items: center;    
}

.label-default {
    background-color: unset;
}

hr {
    border: 0;
    border-top: 2px solid #6fa8dc;
    margin-top: 5px;
}

.row {
    font-size: 16px;
    font-weight: bold;
}

.smxrow {
    font-size: 16px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;  
}

.label-setType {
    margin-left: 18px;
    margin-right: -30px;
    margin-top: -4px;
    font-size: 16px;
    font-weight: bold;
    color: white;
}

.label-setDB {
    margin: 0 auto;
    margin-right: 10px;
    font-size: 16px;
    font-weight: bold;
    color: white;
}

.select-dbcolor {
    color: white;
    font-size: 16px;
    font-weight: bold;
    margin-right: 50px;
    border-radius: 8px;
    border: 2px solid #073763;
    max-width: 180px;
    background-color: #155690;
    padding: 5px;
}

.select-dbcolor:focus,
.select-dbcolor:hover {
    color: white;
    margin-right: 50px;
    border-radius: 8px;
    border: 2px solid #073763;
    max-width: 180px;
    background-color: #4595dc;
    padding: 5px;
}

.select-dbcolor option,
.select-dbcolor option:checked {
    color: white;
    margin-right: 50px;
    border-radius: 8px;
    border: 2px solid #073763;
    max-width: 180px;
    background-color: #6fa8dc;
    padding: 5px;
}

.viewlogs_title {
    margin-top: -40px;
    margin-bottom: 40px;
    font-weight: bold;
}

#log_output {
    width: 100%;
    border-radius: 12px;
    padding: 2px 2px;
    background-color: #123453;
    border: 7px solid #0b2740;
    margin: 0px auto;
    display: block;
    font-family: monospace;
    overflow-y: auto;
    max-height: 100%;
    box-shadow: 0px 2px 2px rgba(5, 23, 39, 0.78) !important;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
}

.pre-log {
    word-wrap: break-word;
    background-color: #030b12;
    color: white;
    font-size: 14px;
    max-width: 100%;
    height: auto;
    margin-top: -6px;
    margin-left: 0px;
    margin-bottom: 5px;
    overflow-y: auto;
    white-space: pre-wrap;
}

#logContainer h2,
#logContainer select {
    display: block;
    min-width: 160px;
    margin-bottom: 20px;
}

.label-reloadTime {
    margin-left: 0px;
    margin-right: -32px;
    margin-top: -4px;
}

.label-setLog {
    margin-left: 0px;
    margin-right: -32px;
    margin-top: 0px;
    margin-bottom: 0px;
}

.label-setLog,
.label-reloadTime {
    font-size: 18px;
    font-weight: bold;
    color: white;
}

.form-input-log {
    color: white;
    background-color: #2791ed !important;
    transition: background-color 0.3s ease;
    padding-left: 10px;
}

.form-input-log:focus,
.form-input-log:hover {
    background-color: #12cd25 !important;
}

.select-logcolor option,
.select-logcolor option:checked {
    background-color: #6fa8dc !important;
}

.glyphicon {
    position: relative;
    display: inline-flex;

}

.theme-icon-container,
.glyphicon-file,
.glyphicon-repeat,
.glyphicon-list, 
.glyphicon-plus, 
.glyphicon-plus-sign,
.glyphicon-trash,
.glyphicon-certificate, 
.glyphicon-share,
.glyphicon-share-alt,
.glyphicon-send,  
.glyphicon-list-alt, 
.glyphicon-inbox, 
.glyphicon-th-list,
.glyphicon-menu-hamburger,
.glyphicon-log-out,
.glyphicon-export,
.glyphicon-th-large,
.glyphicon-hdd,
.glyphicon-cog,
.glyphicon-envelope,
.glyphicon-qrcode,
.glyphicon-barcode,
.glyphicon-backward,
.glyphicon-forward,
.glyphicon-star,
.glyphicon-globe,
.glyphicon-ok-sign,
.glyphicon-th,
.glyphicon-download,
.glyphicon-remove,
.glyphicon-edit,
.glyphicon-play-circle,
.glyphicon-wrench,
.glyphicon-save,
.glyphicon-floppy-save,
.glyphicon-floppy-disk,
.glyphicon-save-file,
.glyphicon-remove-circle,
.glyphicon-calendar,
.glyphicon-import,
.glyphicon-refresh,
.glyphicon-globe,
.glyphicon-tasks,
.glyphicon-user,
.glyphicon-time,
.glyphicon-globe,
.glyphicon-user,
.glyphicon-import,
.glyphicon-export,
.glyphicon-lock,
.glyphicon-cloud-download,
.glyphicon-cloud-upload,
.glyphicon-search,
.glyphicon-home {
    color: white;
align-items: center;
}

.glyphicon-folder-open {
    color: white;
    align-items: center;
    text-align: center;
    margin-top: -6px !important;
    margin-left: 0px;
    padding-top: 0px !important;
}

.glyphicon-ok,
.glyphicon-ban-circle,
.glyphicon-lock {
    padding-top: 0px;
    margin-top: 0px;  
    margin-left: -7px !important;
}

.glyph-left {
    margin-left: -10px !important;
}

.glyph-plus {
    color: white;
    align-items: center;
    text-align: center;
    margin-top: 5px;
}

.glyph-plus-sieve {
    color: white;
    display: flex !important;
    align-items: center !important;
    text-align: center !important;
    margin-top: -5px !important;
    margin-left: -3px !important;
}

.glyph-del-sieve {
    color: white;
    display: flex !important;
    align-items: center !important;
    text-align: center !important;
    margin-top: -3px !important;
    margin-left: -5px !important;
}

textarea.form-control {
    height: auto;
    min-width: 250px !important;
    max-width: 250px !important;
    width: 100%;
}

.form-group-totp {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 16px !important;
    justify-content: center;
    width: 100%;
}

.form-group-totp label {
    width: 200px;
    text-align: right;
    font-weight: bold;
    margin-bottom: 2px;
}

.form-group-totp input,
.form-group-totp .form-control-static {
    flex: 1;
    min-width: 250px;
}

.form-group-totp .help-block {
    margin-left: 185px;
    font-size: 0.9em;
    color: red;
}

.pre-totp {
    display: inline flow-root list-item;
    background-color: #f0f8ff;
    color: black;
    border: 2px solid #010B14;
    border-radius: 14px;
    font-size: 16px;
    width: 100%;
    height: auto;
    line-height: 1.5;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
}

.totp-username {
    text-align: left;
}

.form-group-totp-exc {
    display: flex;
    margin-bottom: 15px;
    margin-left: 80px;
}

.form-config-syslog {
    display: block;
    margin-bottom: 15px;
    margin-left: 55px;
}

.form-group-totp-exc label {
    width: 300px;
    text-align: right;
    font-weight: bold;
    margin-right: 10px;
    margin-top: 4px;
}

a.btn.mr.btn-secondary {
    border: 2px solid #041d2e;
    height: 42px;
    min-width: 120px;
    background-color: #510c21;
    font-weight: bold;
    box-shadow: 2px 2px 4px rgba(1, 4, 18, 0.68) !important;
    transition: background-color 0.3s ease;
    padding-top: 10px;
    color: white;
}

a.btn.mr.btn-secondary:hover, a.btn.mr.btn-secondary:active {
    border: 2px solid #041d2e;
    height: 42px;
    min-width: 120px;
    background-color: #eb4e4e;
    font-weight: bold;
    box-shadow: 2px 2px 4px rgba(1, 4, 18, 0.68) !important;
    transition: background-color 0.3s ease;
    padding-top: 10px;
    color: white;
}

.add-left {
    margin-left: 7.5px;
}

.set-form-text {
    color: white;
    font-size: 18px !important;
    font-weight: bold !important;
    text-align: center !important;
}

.set-center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 230px;
}

.set-center-form {
    display: flex;
    justify-content: center;
    align-items: center;
}

.set-center-inline {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
}

.set-center-cancel {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 45px;
}

.set-center-add {
    display: flex;
    justify-content: center;
    align-items: center;
}

.set-center-add-btn {
    display: flex;
    justify-content: center;
    align-items: center;
}

.set-right {
    display: flex;
    justify-content: right;
    margin-left: 10px;
    margin-right: 10px !important;
}

.set-left-20 {
    margin-left: 20px !important;
}

.set-minusleft-5 {
    margin-left: -5px !important;
}

.set-minusleft-10 {
    margin-left: -10px !important;
}

.table>tbody>tr>td, 
.table>tbody>tr>th, 
.table>tfoot>tr>td, 
.table>tfoot>tr>th, 
.table>thead>tr>td, 
.table>thead>tr>th {
/*    padding: 2px;*/
    border-top: 0px solid #041d2e;
    padding-left: 8px;
    padding-right: 8px;
}

table#card-table.table.table-carddav>thead>tr>td,
table#card-table.table.table-carddav>thead>tr>th {
    padding: 3px;
    padding-left: 8px;
    font-size: 16px !important;
}
table#card-table.table.table-carddav>tbody>tr>td {
    padding: 2px !important;
    padding-left: 8px !important;
}

.form-inline input.form-control-config-custom {
    display: inline-block;
    width: auto;
    min-width: 150px;
    margin: 0 auto;
    vertical-align: middle;
}

.form-inline {
    margin-left: 10px;
    margin-right: 10px;
    vertical-align: middle;
/*    padding: 4px 8px;*/
    line-height: 1.4;
}

.config-key-section-title {
    font-weight: bold;
    text-align: center;
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 1.2em;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
}

.config-key-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.config-key-row input[type="text"] {
    flex: 1 1 200px;
    min-width: 200px;
}

.config-key-row .btn-add {
    flex: 0 0 auto;
    margin-left: 10px;
}

.form-expand-on-focus {
    transition: all 0.2s ease-in-out;
    width: 100%;
    min-height: 32px;
    resize: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.form-expand-on-focus:focus {
    min-height: 100px;
    min-width: 325px !important;
    max-width: 325px !important;
    white-space: normal;
    overflow: auto;
    color: black;
    background-color: white;
    border-color: black;
    box-shadow: 0 0 5px rgba(102,175,233,.6);
}

.input-expand-on-focus {
    transition: all 0.2s ease-in-out;
    width: 100%;
    min-height: 32px;
    min-width: 250px !important;
    resize: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 4px 4px;
}

.input-expand-on-focus:focus {
    min-height: 100px !important;
    min-width: 280px !important;
    white-space: normal;
    overflow: auto;
    color: black;
    background-color: white;
    border-color: black;
    box-shadow: 0 0 5px rgba(102,175,233,.6);
}

.conf-title-label {
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10px;
}

.conf-title-add {
    text-align: left;
    font-weight: bold;
    font-size: 24px;
    margin-top: 5px;
}

.conf-title-gen {
    text-align: left;
    font-weight: bold;
    font-size: 24px;
    margin-top: 4px;
    margin-left: -6px;
}

.conf-title-center {
    text-align: center;
    font-weight: bold;
    font-size: 24px;
    margin-bottom: 10px;
    margin-top: -10px;
}

.conf-table-head {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
    font-size: 15px;
    font-weight: bold;
    text-align: left;
    padding-left: 10px;
    color: white !important;
}

.conf-table-body {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
    font-size: 15px;
    font-weight: bold;
    text-align: left;
    padding-left: 10px;
    color: white !important;
    background-color: #003463;
}

.tr-back {
    background-color: #003463 !important;
}

.conf-syslog {
    padding: 10px;
    margin: 0 auto !important;
    margin-bottom: 20px;
    border-radius: 4px;
}

.conf-syslog-add {
    padding-left: 10px;
    margin-top: -10px;
    border-radius: 4px;
}

.config-key-line {
    display: flex;
    gap: 10px;
    margin-bottom: 4px;
}

.form-control-config-inkey,
.form-control-config-input {
    flex: 1;
}

.config-key-line-labels {
    display: flex;
    margin-bottom: 6px;
    font-weight: bold;
    font-size: 20px;
    color: white;
}

.config-key-left-label,
.config-key-right-label {
    flex: 1;
}

.config-key-left-label {
    margin-left: 2px;
}

.config-key-right-label {
    margin-left: -220px;
}

#backup-progress-container {
    margin-top: 60px;
    padding-top: 22px;
    padding-left: 40px;
    margin-left: 40px;
    max-width: 550px;
    width: 550px;
    border: 2px solid black;
    background-color: #073763;
}

#progress-bar {
    height: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    color: black;
    font-size: 16px;
    transition: width 0.6s ease;
}

#progress-text {
    display: inline-block;
    vertical-align: middle;
    line-height: 24px;
}

#backup-progress-container .progress {
    width: 300px;
    max-width: 100%;
    color: white;
    background-color: #cfe2f3;
}

#backup-progress-container label {
    display: block;
    margin-bottom: 6px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    margin-right: 10px;
}

.userdd {
    background-color: #116cd3 !important;
    height: 28px !important;
    width: 200px !important;
    min-width: 200px !important;
    margin-right: -2px !important;
}

.userdd:hover {
    background-color: #1aad4a !important;
}

.caret {
    max-width: 40px !important;
}

.dropdown-page {
    max-width: 90px !important;
    min-width: 90px !important;
}

.form-control:focus {
    border-color: black !important;
}

.filepicker-body {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;
    font-family: system-ui, sans-serif;
    font-size: 16px;
    background-color: black;
    color: #212529;
    max-width: 410px;
    margin: 0 auto;
}

.filepicker-body h3 {
    font-size: 18px;
    margin-bottom: 6px;
    margin-top: 0px;
    color: white;
}

.selected-label {
    color: #5bc02f;
}

#filepicker-list {
    flex: 1;
    border: 1px solid #0c343d;
    background-color: #0b5394;
    padding: 10px;
    border-radius: 5px;
    overflow-y: auto;
    min-height: 200px;
    box-shadow: 2px 2px 4px rgba(1, 4, 18, 0.68) !important;
}

.filepicker-dir,
.filepicker-file,
.filepicker-back {
    display: block;
    padding: 8px 12px;
    margin-bottom: 2px;
    text-decoration: none;
    border-radius: 3px;
    color: white;
    transition: background-color 0.2s ease;
    cursor: pointer;
}

.filepicker-dir:hover,
.filepicker-file:hover {
    background-color: #7d1942;
    color: white;
}

.filepicker-back:hover {
    color: rgb(26, 230, 26);
}

.filepicker-selected {
    color: white;
    background-color: rgb(30, 150, 230) !important;
    font-weight: bold;
    border-left: 4px solid #0d6efd;
}

.filepicker-back {
    font-weight: bold;
    margin-top: 10px;
    color: white;
}

.filepicker-actions {
    margin-top: 10px;
    text-align: right;
}

.btn-addplus {
    color: white;
    background-color: #0d6efd !important;
    transition: background-color 0.3s ease;
    box-shadow: 2px 2px 4px rgba(1, 4, 18, 0.68) !important;
    border-radius: 0px;
    border-left: 0px;
    width: 33px !important;
    padding: 5px 5px;
    height: 34.5px !important;
    margin-top: 7.3px !important;
    margin-left: -6px !important;
    margin-right: 40px !important;
}

.btn-addplus:active,
.btn-addplus:hover {
    color: white;
    background-color: #06c60c !important;
    transition: background-color 0.3s ease;
    box-shadow: 2px 2px 4px rgba(1, 4, 18, 0.68) !important;
}

.btn-filepicker {
    padding: 0px 0px;
    height: 36.8px !important;
    color: white;
    background-color: #0d6efd !important;
    transition: background-color 0.3s ease;
    box-shadow: 2px 2px 4px rgba(1, 4, 18, 0.68) !important;
    border-radius: 0px;
    border-left: 0px;
    margin-top: -1px;
    width: 33px !important;
}

.btn-filepicker:hover {
    background-color: #06c60c !important;
}

.btn-filepicker-round {
    padding: 0px 0px;
    height: 36.8px !important;
    color: white;
    background-color: #0d6efd !important;
    transition: background-color 0.3s ease;
    box-shadow: 2px 2px 4px rgba(1, 4, 18, 0.68) !important;
    border-radius: 8px;
    border-left: 0px;
    margin-top: -1px;
    width: 33px !important;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.btn-filepicker-round:hover {
    background-color: #06c60c !important;
}

.btn-filepicker-scripts {
    padding: 0px 0px;
    height: 36.8px !important;
    color: white;
    background-color: #0d6efd !important;
    transition: background-color 0.3s ease;
    box-shadow: 2px 2px 4px rgba(1, 4, 18, 0.68) !important;
    border-radius: 8px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-left: 0px;
    margin-top: -1px;
    width: 33px !important;
}

.btn-filepicker-scripts:hover {
    background-color: #06c60c !important;
}

.btn-minus {
    padding: 5px 6px;
    height: 36.8px !important;
    color: white;
    background-color: #761b34 !important;
    transition: background-color 0.3s ease;
    box-shadow: 2px 2px 4px rgba(1, 4, 18, 0.68) !important;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-left: 0px;
    margin-top: -1.4px;
    width: 31px !important;
}

.btn-minus:hover {
    background-color: #dc2121 !important;
}

.btn-filepicker-select {
    padding: 8px 18px;
    margin-left: 2px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    background-color: #2a94f4 !important;
    box-shadow: 2px 2px 4px rgba(1, 4, 18, 0.68) !important;
}

.btn-filepicker-select:hover {
    background-color: #06c60c !important;
}

.btn-filepicker-cancel {
    padding: 8px 18px;
    margin-left: 10px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    background-color: #bb2642 !important;
    box-shadow: 2px 2px 4px rgba(1, 4, 18, 0.68) !important;
}

.btn-filepicker-cancel:hover {
    background-color: #ff3a3a !important;
}

.filepicker-actions button:first-child {
    background-color: #dee2e6;
    color: #212529;
}

.filepicker-actions button:first-child:hover {
    color: rgb(26, 230, 26);
}

.filepicker-actions button:last-child {
    background-color: #0d6efd;
    color: #ffffff;
}

.filepicker-actions button:last-child:hover {
    background-color: #0b5ed7;
}

.relay-host {
    width: 150px !important;
    padding-left: 20px !important;
    margin-right: -20px !important;
}

.relay-toggle {
    margin-left: -10px !important;
    width: 104px !important;
    padding-left: 40px !important;
}

.restore-modal .modal-content {
    height: 100%;
    background-color: rgba(8, 38, 78, 0.815);
    background-image: url('../images/bodybg.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    color: #fff;
    border-radius: 10px;
    min-width: 500px;
    max-width: 500px;
    margin: 0 auto;
    padding: 0;
    border: none;
    display: flex;
    flex-direction: column;
}

.restore-modal .modal-header,
.restore-modal .modal-footer {
    border: none;
    background-color: #0a3762;
    color: #fff;
    padding-left: 10px;
    padding-right: 10px;
}

.restore-modal .modal-title {
    width: 100%;
    text-align: left;
    color: #fff;
    font-weight: bold;
    font-size: 22px;
}

.restore-modal .modal-body {
    padding: 20px 10px 10px 10px;
    width: 100%;
    color: #fff;
    height: 300px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.restore-modal label,
.restore-modal .standard-folder-label,
.restore-modal .restore-hint,
.restore-modal .checkbox-row,
.restore-modal .db-row {
    margin-left: 0 !important;
    align-self: center !important;
    text-align: center;
}

.restore-modal .form-control {
    width: 75%;
    margin-bottom: 10px;
    margin-left: 10px !important;
    min-width: 200px;
    padding: 2px 8px;
    text-align: left;
}

.restore-modal .standard-folder-label {
    margin-bottom: 10px;
    font-size: 18px;
}

.restore-modal .checkbox-row, .restore-modal .db-row {
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
}

.restore-modal .radio-row {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 6px;
    width: 100%;
}

.restore-modal .modal-checkbox {
    margin-left: 2px !important;
    line-height: normal;
    min-height: 16px;
    min-width: 16px;
    height: 16px;
    width: 16px;
    color: white;
    background-color: #2480e9;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}

.restore-modal .btn-restore-yes {
    color: white;
    display: block;
    width: auto !important;
    max-width: 150px !important;
    margin: 0px auto;
    height: 50px;
    border-radius: 8px;
    transition: background-color 0.3s ease;
    box-shadow: 2px 2px 4px rgba(1, 4, 18, 0.68) !important;
    background-color: #1aae41 !important;
    border-top-left-radius: 0px !important;
    border-bottom-left-radius: 0px !important;
}

.restore-modal .btn-restore-yes:hover {
    background: #1958a9;
    color: #fff;
}

.db-row-fixed {
    margin-bottom: 100px;
    position: fixed;
}

.db-check-area {
    min-height: 54px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-top: 130px;
    margin-bottom: 2px;
}

.db-exists-warn {
    min-height: 22px;
    color: #fff;
    font-size: 18px;
    text-align: center;
    font-weight: bold;
    display: block;
    margin-bottom: 12px;
}

.radio-row {
    min-height: 28px;
    margin-bottom: 0;
}

textarea.cert-sni-wrap {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-height: 80px;
}

.btn-row-spaced {
    margin: 15px 0;
    padding-top: 20px;
}

.monospace {
    font-family: monospace;
}

.cert-sni-wrap {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-height: 80px;
    max-width: 720px;
}

.is-hidden {
    display: none;
}

.hidden-inputfile {
    display: none;
    max-width: 210px !important;
    min-width: 210px !important;
}

.hidden-textarea {
    display: none;
}

.inline-help {
    display: inline-block;
    margin-left: 8px;
}

textarea.dkim-autogrow,
textarea.dkim-wrap {
    min-height: 32px;
    line-height: 1.25;
    transition: min-height .15s ease;
    resize: none;
}

textarea.dkim-autogrow:focus {
    min-height: 235px;
    max-height: 500px;
    min-width: 640px !important;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

textarea.dkim-wrap:focus {
    min-height: 190px;
    max-height: 200px;
    min-width: 640px !important;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

textarea.extra-directives-autogrow {
    line-height: 1.25;
    min-height: 3.75em;     /* ~3 Zeilen */
    transition: min-height .15s ease;
    resize: none;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-family: monospace;
}

textarea.extra-directives-autogrow:focus {
    min-height: 25em;
    max-height: 60em;
    min-width: 500px !important;
}

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1040;
}

.modal-overlay.open {
    display: block;
}

.modal-simple {
    display: none;
    position: fixed;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -30%);
    z-index: 1050;
    background: rgb(8, 38, 78);
    border-radius: 6px;
    min-width: 420px;
    min-height: 180px;
    box-shadow: 0 10px 30px rgba(0,0,0,.3);
    color: #fff;
}

.modal-simple.open {
    display: block;
}

.modal-simple .modal-header {
    padding: 18px 18px;
    border-bottom: 1px solid #ddd;
    font-size: 18px;
    font-weight: 600;
}

.modal-simple .modal-body {
    padding: 16px 20px;
    font-size: 15px;
    font-weight: 600;
}

.modal-simple .modal-actions {
    padding: 10px 10px 0;
    text-align: right;
    border-top: 1px solid #eee;
}

@media (max-width: 767px) {

    .navbar-default .navbar-nav .open .dropdown-menu>li>a {
        color: #fff;
        background-color: transparent;
    }

    .navbar-collapse {
        max-width: 200px;
    }

    .navbar-nav {
        max-width: 100px;
    }

    .navbar-nav .open .dropdown-menu {
        position: absolute;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: #0b5394;
        border: 2px solid black;
        border-radius: 8px;
    }

}

@media (max-width: 1317px) {

    .panel-default.panel-admin {
        margin-top: -5px !important;
    }

    .panel-default.panel-domain {
        margin-top: -5px !important;
    }

    .panel-default.panel-virtual {
        margin-top: -5px !important;
    }

    .panel-default.panel-viewlog {
        margin-top: -5px !important;
    }

    .panel-default.panel-rspamd {
        margin-top: -5px !important;
    }

    .panel-default.panel-syslog {
        margin-top: -5px !important;
    }

    .panel-default.panel-backup {
        margin-top: -5px !important;
    }

    .panel-default.panel-carddav {
        margin-top: -5px !important;
    }

    .panel-default.panel-dav {
        margin-top: -5px !important;
    }

    .panel-default.panel-calendar {
        margin-top: -5px !important;
    }

    .panel-default.panel-dkim {
        margin-top: -5px !important;
    }

    .panel-default.panel-dkimsigning {
        margin-top: -5px !important;
    }

    .panel-default.panel-dkimgen {
        margin-top: -5px !important;
    }

    .panel-default.panel-password {
        margin-top: -5px !important;
    }

    .panel-default.panel-app-password {
        margin-top: -5px !important;
    }

    .panel-default.panel-user-alias {
        margin-top: -5px !important;
    }

    .panel-default.panel-totp {
        margin-top: -5px !important;
    }

    .panel-default.panel-totp-exceptions {
        margin-top: -5px !important;
    }    

    .panel-default.panel-vhosts {
        margin-top: -5px !important;
    }

    .panel-default.panel-dash {
        margin-top: -5px !important;
    }

    .panel-default.panel-default.panel-userdb {
        margin-top: -5px !important;
    }

    .panel-default.panel-certificates {
        margin-top: -5px !important;
    }

    .panel-default.panel-cron {
        margin-top: -5px !important;
    }

    .panel-webmail {
        margin-top: -7px !important;
    }

    .panel-default.panel-edit-cron {
        margin-top: -5px !important;
    }

    .panel-default.panel-edit-admin {
        margin-top: -5px !important;
    }

    .panel-default.panel-edit-domain {
        margin-top: -5px !important;
    }

    .panel-default.panel-edit-mailbox {
        margin-top: -5px !important;
    }

    .panel-default.panel-edit-dkim {
        margin-top: -5px !important;
    }

    .panel-default.panel-edit-backup {
        margin-top: -5px !important;
    }

    .panel-default.panel-edit-config {
        margin-top: -5px !important;
    }

    .panel-default.panel-edit-sieve {
        margin-top: -5px !important;
    }

    .panel-default.panel-edit-certificates {
        margin-top: -5px !important;
    }

    .panel-default.panel-edit-vhosts {
        margin-top: -5px !important;
    }

    .panel-default.panel-edit-userdb {
        margin-top: -5px !important;
    }

    .dash-header {
        margin-top: -5px !important;
    }

}

@media (min-width: 768px) {

    .navbar-fixed-top .container-fluid .navbar-collapse {
        font-size: 12px;
    }

    .navbar-fixed-top .container-fluid .navbar-collapse li a {
        padding-left: 5px;
        padding-right: 5px;
    }

    .navbar-fixed-top .container-fluid .navbar-right {
        font-size: 11px;
    }

    .navbar-fixed-top .container-fluid .navbar-right .navbar-btn {
        padding: 5px;
    }

    .navbar-header a.navbar-brand {
        padding: 0;
    }

    .navbar-nav>li>a {
        padding-top: 13px;
        padding-bottom: 13px;
        padding-left: 12px;
        padding-right: 12px;
    }

}

@media (min-width: 992px) {

    .navbar-header a.navbar-brand {
        padding: 0 15px;
    }

    .navbar-fixed-top .container-fluid .navbar-collapse {
        font-size: 14px;
    }

    .navbar-fixed-top .container-fluid .navbar-right {
        font-size: 12px;
        padding-right: 5px;
    }

    .navbar-fixed-top .container-fluid .navbar-collapse li a {
        padding-left: 10px;
        padding-right: 10px;
    }

    .navbar-fixed-top .container-fluid .navbar-right .navbar-btn {
        margin-right: 5px;
        padding: 5px 10px;
    }

    .col-md-6 {
        width: 50%;
    }

}

@media (min-width: 1200px) {

    .navbar-fixed-top .container-fluid .navbar-right a {
        font-size: 14px;
    }

    .navbar-fixed-top .container-fluid .navbar-right .navbar-btn {
        margin-right: 15px;
    }

    .navbar-fixed-top .container-fluid .navbar-collapse li a {
        padding-left: 15px;
        padding-right: 15px;
    }

    .container {
        width: 100%;
    }

}

.certlist {
    margin-top: 10px !important;
}

.docroot {
    font-size: 16px !important;
    font-weight: bold !important;
    margin-top: 14px !important;
    margin-left: 6px !important;
}

/* 2) Allgemein: Klasse aus editform.tpl – falls du Pflichtfelder markieren willst,
      gib den Labels die Klasse .required */
.enable-asterisk .required::after {
  content: " *";
  color: #ffc616;
  font-weight: 700;
  margin-left: 3px;
}

/* 4) Fallback: von JS verwendete Hidden-Helper (nur falls dein Bootstrap die nicht liefert) */
.hidden-xs, .hidden-sm, .hidden-md, .hidden-lg { display: none !important; }

/* ===== Einheitliche 2-Spalten-Ausrichtung für Sieve-Formulare ===== */
.form-group-sieve {
  --label-w: 300px;  /* Breite der Labelspalte */
  --field-w: 450px;  /* Zielbreite der Eingabefeldspalte */

  display: grid;
  grid-template-columns: var(--label-w) minmax(260px, var(--field-w));
  column-gap: 10px;
  align-items: center;
  margin: 12px auto;
  width: calc(var(--label-w) + var(--field-w) + 10px);
  max-width: 100%;
}

.confbox-sieve {
  margin-left: 2px !important;
  margin-top: 2px !important;
  min-height: 14px;
  min-width: 14px;
  height: 14px;
  width: 14px;
  color: white;
  background-color: #2480e9;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.form-control-sieve {
  color: #000;
  background-color: #cee9ff !important;
  font-size: 16px;
  border: 2px solid black;
  border-radius: 8px;
  box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78);
  padding: 2px 8px;
  height: 30px !important;
  max-width: 280px;
  width: 100%;
  font-weight: bold;
  transition: all 0.3s ease;
}
.form-control-sieve:active,
.form-control-sieve:hover {
  color: #111314;
  background-color: #1f8aef !important;
}

.form-control-sieve-entry {
  color: black;
  background-color: #cee9ff !important;
  font-size: 16px;
  border: 2px solid black;
  border-radius: 8px;
  box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78);
  padding: 2px 8px;
  height: 30px !important;
  max-width: 270px;
  width: 270px !important;
  font-weight: bold;
  transition: all 0.3s ease;
}
.form-control-sieve-entry:active,
.form-control-sieve-entry:hover {
  color: #111314;
  background-color: #1f8aef !important;
}

/* Label rechtsbündig */
.control-label-sieve-entry {
  grid-column: 1;
  justify-self: end;
  text-align: right;
  white-space: nowrap;
  margin: 0;
  font-size: 16px !important;
}
/* Nicht-Label = Feldspalte */
.form-group-sieve > :not(.control-label-sieve-entry) {
  grid-column: 2;
}
/* Felder füllen die Spalte */
.form-group-sieve .form-control,
.form-group-sieve .input-group,
.form-group-sieve textarea {
  width: 100%;
  box-sizing: border-box;
}

.sieve-address-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.form-group-sieve .btn {
  grid-column: 2;
  justify-self: start;
  margin-top: 6px;
}

/* Inline-Reihe für Regeln: 3 Spalten nebeneinander */
.form-row-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}
.form-row-3 > * {
  width: 100%;
  max-width: none; /* überschreibt max-width der Eingaben */
}

/* Inline-Reihe für Aktion: 2 Spalten nebeneinander */
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}
.form-row-2 > * {
  width: 100%;
  max-width: none;
}

.form-row-action {
  display: flex;
  gap: 10px;
  width: 100%;
}

/* Mobile Umbruch */
@media (max-width: 640px) {
  .form-group-sieve {
    grid-template-columns: 1fr;
    width: 100%;
  }
  .control-label-sieve-entry {
    grid-column: 1;
    justify-self: start;
    text-align: left;
    margin-bottom: 6px;
  }
  .form-group-sieve > :not(.control-label-sieve-entry) {
    grid-column: 1;
  }
  .form-row-3, .form-row-2 {
    grid-template-columns: 1fr;
  }
}

/* Box & Editor */
.sieve-box { padding: 12px; background-color: rgba(8, 38, 78, 0.815); }
.sieve-code-editor { width: 100% !important; height: 100% !important; max-width: 824px !important; min-width: 600px !important; }
.sieve-editor-textarea {
  font-family: Menlo,Monaco,Consolas,'Courier New',monospace;
  max-width: 824px !important;
  min-width: 600px !important;
  width: 100% !important;
  height: 400px !important;
  color: #000;
  background-color: #cee9ff !important;
  font-size: 16px;
  border: 2px solid black;
  border-radius: 8px;
  box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78);
  padding: 2px 8px;
  font-weight: bold;
}

/* Durations can be adjusted here */
:root {
  --pfa-flash-info-delay: 15s;   /* time visible for info */
  --pfa-flash-error-delay: 25s;  /* time visible for error */
  --pfa-flash-fade-duration: 1s; /* fade animation length */
}


.alert {
    position: fixed;
    top: 0px;
    margin: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 6px;
    max-width: 450px;
    border: 2px solid #071f35;
    border-radius: 8px;
    z-index: 8999;
    border-radius: 8px;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.84);
    border-width: 1px;
    overflow: hidden;    
}

.alert-info {
    font-weight: bold;
    font-size: 18px;
    text-align: left;
    color: white;
    background-color: #2bc134;
    border: 2px solid white;
    z-index: 9000;
    top: 68px;
}

.alert-danger {
    font-weight: bold;
    font-size: 18px;
    text-align: center;    
    color: white;
    background-color: #c63838;
    border: 2px solid white;
    z-index: 9000;
    top: 68px;
}

/* close button placement */
.alert .close {
    position: absolute;
    right: .75rem;
    top: .5rem;
}

/* keyframes for fade + collapse */
@keyframes pfaFlashFadeOut {
    0%   { opacity: 1; }
    85%  { opacity: 0.01; }
    100% { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; border-width: 0; }
}

/* Auto-dismiss timings per type */
.alert-info {
    animation: pfaFlashFadeOut var(--pfa-flash-fade-duration) ease-out var(--pfa-flash-info-delay) forwards;
}

.alert-danger,
.alert-error {
    animation: pfaFlashFadeOut var(--pfa-flash-fade-duration) ease-out var(--pfa-flash-error-delay) forwards;
}

/* Ensure the container doesn't capture pointer events once faded */
.alert[style*="opacity: 0"],
.alert[style*="opacity:0"] {
    pointer-events: none;
}

.vhost-path-box {
    background-color: #38051c;
    margin-bottom: -10px !important;
}

.text-box {
    font-size: 14px !important;
    background-color: #38051c;
    min-height: 200px;
    min-width: 250px;
    width: 100%;
    padding: 5px;
    border-radius: 12px;
    border: 3px solid black;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.68) !important;

}

/* --- Viewlog: Tabelle soll niemals breiter als das Panel sein --- */
.panel-default.panel-viewlog .table-log {
    table-layout: fixed;
    width: 100%;
}

.panel-default.panel-viewlog .table-log th,
.panel-default.panel-viewlog .table-log td {
    vertical-align: middle;
}

/* Spaltenbreiten (passen sich bei kleineren Viewports an, bleiben aber im Panel) */
.panel-default.panel-viewlog .table-log col.col-action  { width: 175px; }
.panel-default.panel-viewlog .table-log col.col-admin   { width: 170px; }
.panel-default.panel-viewlog .table-log col.col-time    { width: 150px; }
.panel-default.panel-viewlog .table-log col.col-actions { width: 122px; }

/* Viewlog: Data-Spalte ohne Ellipsis, mit Zeilenumbruch & Beibehalt von \n */
.panel-default.panel-viewlog .table-log td.log-col-data {
    white-space: pre-wrap;   /* statt normal: behält \n bei, bricht aber um */
    overflow-wrap: anywhere;
    word-break: break-word;
}

.panel-default.panel-viewlog .table-log td:not(.log-col-data),
.panel-default.panel-viewlog .table-log th:not(.log-col-data) {
    overflow: hidden;
    text-overflow: ellipsis;
}

.smx-center-form {
    display: flex;
    align-items: center;
}

.select-label {
    color: #fff;
    text-align: right !important;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 0px !important;
}

/* spacing utilities */
.smx-pt-15 { padding-top: 15px; }
.smx-pt-6  { padding-top: 6px; }
.smx-mb-10 { margin-bottom: 10px; }
.smx-mt-10 { margin-top: 10px; }

/* inline/block helpers */
.smx-inline-block { display: inline-block; }

/* margins */
.smx-mr-6  { margin-right: 6px; }
.smx-mr-12 { margin-right: 12px; }
.smx-ml-6  { margin-left: 6px; }

/* column widths in main list table */
.smx-w-actions-180 { width: 180px; }
.smx-w-actions-240 { width: 240px; }

/* column widths in CREATE TABLE wizard */
.smx-w-col-name     { width: 18%; }
.smx-w-col-type     { width: 16%; }
.smx-w-col-len      { width: 12%; }
.smx-w-col-null     { width: 7%;  }
.smx-w-col-index    { width: 13%; }
.smx-w-col-ai       { width: 7%;  }
.smx-w-col-onupdate { width: 12%; }
.smx-w-col-actions  { width: 6%;  }

/* inputs */
.smx-w-ai-start { width: 130px; }

/* Optional: tighten pagination disabled look in panels (keine Inline-Styles nötig) */
#tables .pagination > li.disabled > a,
#tables .pagination > li.disabled > span {
    pointer-events: none;
    cursor: default;
    opacity: .6;
}

/* === DAV Importer (scoped) === */
.wrap-dav-import { 
    max-width: 800px;
    min-width: 550px;
    margin: 8px auto; 
    padding: 0 14px; 
}

.wrap-dav-import .davimp-h1 { 
    font-size: 14px; 
    display: flex; 
    gap: 8px; 
    align-items: center; 
}

.wrap-dav-import .davimp-h1 code { color: #00ff7f; }

.wrap-dav-import .davimp-tabs { 
    display: flex;
    margin: 2px 0 4px; 
}

.wrap-dav-import .davimp-tab { 
    color: #606878;
    background-color: #062a4e;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.82); 
    border: 2px solid black; 
    border-radius: 8px; 
    padding: 6px 10px; 
    text-decoration: none;     
    font-weight: 600;
}

.wrap-dav-import .davimp-tab.active { 
    color: white;    
    background: #018d0a; 
    border: 2px solid black; 
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.82);        
    font-weight: 600;
}

.wrap-dav-import .davimp-tab:hover {
    background-color: #03c03c;
    color: white;
    transition: background-color 0.3s ease;
}

.wrap-dav-import .flex-spacer { margin-left: auto; }

.wrap-dav-import .card { 
    background-color: #0053ab; 
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.82);
    border: 2px solid black; 
    border-radius: 8px; 
    padding: 10px; 
    margin: 0 0 10px; 
}

.wrap-dav-import .row { 
    display: flex; 
    gap: 12px; 
    flex-wrap: wrap; 
}

.wrap-dav-import .col { flex: 1 1 260px; }

.wrap-dav-import label { 
    display: block; 
    font-size: 14px;
    font-weight: bold;
    color: white; 
}

.wrap-dav-import select,
.wrap-dav-import input[type="text"],
.wrap-dav-import input[type="password"],
.wrap-dav-import input[type="url"] {
    color: black;
    background-color: #9dd2ff !important;
    border: 2px solid black; 
    border-radius: 8px;    
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78);
    max-width: 240px;
    width: 100%; 
    box-sizing: border-box; 
    padding: 6px 6px;  
    margin-top: 6px; 
}

.wrap-dav-import input[type="file"] { 
    color: #414a4c; 
    background-color: #9dd2ff !important;
    border: 2px solid black;
    border-radius: 8px;    
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78);
    max-width: 240px;
    width: 100%; 
    box-sizing: border-box;     
    padding: 6px 6px;
    margin-top: 6px;        
}

.wrap-dav-import .radio-line { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    margin-bottom: 6px; 
}

.wrap-dav-import .targets { margin: 8px 0 0; }

/* Merge-Panel initial verstecken (JS blendet ein/aus) */
.wrap-dav-import #target_merge { display: none; }

.wrap-dav-import .list {
    background: #9dd2ff;    
    border: 2px solid black; 
    border-radius: 8px; 
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78);    
    overflow: auto;
    width: fit-content;
    max-height: 220px;    
    min-width: 240px;
    max-width: 350px;
    margin-top: 6px;
}

.wrap-dav-import .item { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    padding: 6px 4px; 
    border-bottom: 1px solid #eee; 
    cursor: pointer; 
}

.wrap-dav-import .item:last-child { border-bottom: none; }

.wrap-dav-import .item:hover { background: #f2edf0; }

.wrap-dav-import .bold { 
    color: black; 
    font-weight: bold;
    font-size: 15px;
}
.wrap-dav-import .muted { color: #343434; }

.wrap-dav-import .hint { 
    font-size: 14px; 
    color: #ffc87c; 
    margin-top: 4px; 
    font-weight: 450;
}

.wrap-dav-import .hr { 
    height: 2px; 
    background: black; 
    margin: 10px 0; 
}

.wrap-dav-import .actions { 
    display: flex; 
    justify-content: flex-end; 
    margin-top: 10px; 
}

.radio-import {
    height: 16px !important;
    width: 16px !important;
    min-height: 16px !important;
    min-width: 16px !important;
    margin-top: 0px;
    padding-left: 2px !important;
}

.davimp-viewport {
    width: 770px;
    max-width: 770px;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 8px 8px 8px;
    overflow: auto;
    background-color: #001b32bd;
}

@media (max-width: 940px) {
    .davimp-viewport { width: 100vw; height: 100vh; }
}

/* Progress UI */
.imp-progress { 
    display:none; 
    margin:12px 0 8px; 
}

.imp-progress .barwrap {
    position: relative; 
    height: 12px;
    background: #eee; 
    border-radius: 999px; 
    overflow: hidden;
}

.imp-progress .bar {
    position: absolute; left: 0; top:0; bottom:0; width: 0%;
    background: linear-gradient(90deg,rgba(255, 255, 255, 1) 0%, rgba(99, 194, 235, 1) 25%, rgba(57, 137, 212, 1) 50%, rgba(0, 86, 166, 1) 85%, rgba(8, 140, 33, 1) 100%);    
    transition: width .18s linear;
}

.imp-progress .bar.indet {
    width: 40%; left: -40%;
    animation: impMove 1.1s linear infinite;
}

@keyframes impMove {
    from { left:-40%; } to { left:100%; }
}

.imp-progress .status { 
    font-size: 12px; 
    color:#666; 
    margin-top:6px; 
    white-space:pre-line; 
}

.imp-progress .ctrls { 
    margin-top:10px; 
    display:flex; 
    gap:8px; 
}

.imp-progress .ctrls .btn-warn { 
    background:#d9534f; 
    color:#fff; 
}

.radio-wrapper {
    display: flex;
    gap: 10px;
}

.display-block {
    display: block;
    align-content: center;
}

.space-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

/* ===== Header Row: Flex + Wrap ===== */
.panel-calendar .cal-h-row { 
    display:flex; 
    align-items:center; 
    justify-content: space-between;
    width: 100%;
}

.cal-row-label {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    margin-left: 12px;
    margin-top: 15px !important;
    margin-bottom: 15px;
}

/* Sichtbarkeits-Dropdown */
.cal-picker { position:relative; }
.cal-picker-btn { height:32px; }
.cal-picker-menu {
  position:absolute; display:none; z-index:10; min-width:280px; padding:2px;
  background:#fff; border:1px solid #ccc; border-radius:4px; box-shadow:0 2px 8px rgba(0,0,0,.15);
}

.calpick-row {
  display:flex; align-items:center; gap:10px; padding:6px 4px; color:#111;
}

.calpick-row .cd-name { flex:1; }
.calpick-row .cd-color { width:0; height:0; opacity:0; position:absolute; left:-9999px; }
.calpick-row .cd-dot {
  display:inline-block; width:16px; height:16px; border-radius:50%; border:1px solid #999; cursor:pointer;
}

.panel-calendar .panel-heading { position:relative; z-index:1; }
.panel-calendar .panel-body    { position:relative; z-index:0; }

.panel-calendar .cal-h-label { 
    margin:0;
    font-size: 20px;
    font-weight: bold;
    color: white; 
}

.panel-calendar .cal-h-select { 
    min-width: 160px !important;
    max-width: 190px !important;
    width: 100% !important;
    border: 2px solid black !important;
    border-bottom-right-radius: 0px !important;
    border-top-right-radius: 0px !important;
    height: 30px !important;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;    
}

/* ===== Header Controls ===== */
.panel-calendar .cal-h-title {
    display: flex;
    gap:10px;
    align-items: center;
    width: 100%;
}

.panel-calendar .cal-h-nav { 
    display: flex; 
    align-items: center;
}

.panel-calendar .cal-h-range { 
    width: 100%;
    text-align: center; 
    font-weight: 700;
    font-size: 16px;
    padding-left: 12px;
    padding-right: 12px;
}

.panel-calendar .cal-h-views { 
    display: flex; 
    gap: 12px; 
}

.panel-calendar .cal-wrapper {
    display: flex; 
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}

.cal-h-filters {
    display: flex; 
    align-items: center; 
    width: 100%;
    justify-content: space-between;
    background-color: #002eb7;
    height: 40px;
    border-left: 2px solid black;
    border-right: 2px solid black;
}

.cal-filters { 
    display: flex; 
    flex-wrap: nowrap; 
    gap: 10px; 
    width: 100%;
    font-size: 16px;
    align-items: center;
}

.cal-filter-item { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    padding: 4px 6px; 
}

.cal-confbox {
    min-height: 16px;
    min-width: 16px;
    height: 16px;
    width: 16px;
    color: white;
    background-color: #2480e9;
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.35);
    margin-top: 1px !important;
}

.cal-color {
    display: none;
}

.cal-dot { 
    display:inline-block; 
    width: 18px; 
    height: 18px; 
    border-radius: 50%; 
    background: #3a87ad; 
    border: 2px solid white; 
}

.cal-io {
    width: 100%;
    text-align: end;
}

.cal-io .btn { 
    margin-left:4px;
}

.panel-calendar .cal-h-calselect { margin-left:auto; display:flex; align-items:center; gap:8px; } /* (Fallback, falls woanders genutzt) */
.panel-calendar .cal-h-label { margin:0; }
.panel-calendar .cal-h-select { min-width:220px; }

#calendarRoot { 
    width:100%;
    padding: 10px;
    padding-top: 5px;
    padding-bottom: 10px;
    overflow: auto;    
}

.btn.active { 
    background:#03c03c; 
    background: linear-gradient(155deg,rgba(28, 217, 63, 1) 0%, rgba(15, 163, 42, 1) 25%, rgba(11, 150, 9, 1) 50%, rgba(21, 107, 4, 1) 73%, rgba(11, 46, 2, 1) 100%);
    color: white;
    border: 3px solid black;
    border-radius: 14px;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78);     
}

.btn.active:hover {
    background: #17bf36;
    background: linear-gradient(155deg,rgba(99, 255, 118, 1) 0%, rgba(23, 255, 46, 1) 23%, rgba(11, 212, 34, 1) 47%, rgba(13, 166, 31, 1) 68%, rgba(6, 105, 19, 1) 86%, rgba(5, 74, 5, 1) 100%);
}

/* ===== Monatsansicht ===== */
.cal-month { display:grid; grid-template-columns: repeat(7, 1fr); gap:6px; }

.cal-weekdays { 
    grid-column:1 / -1; 
    display:grid; 
    grid-template-columns: repeat(7, 1fr); 
    gap:6px;
    line-height: 1.1;
}

.cal-weekdays div { 
    text-align: center; 
    font-weight: bold; 
    padding: 4px 0; 
    margin-bottom: 2px;
    margin-top: 3px;
    background: linear-gradient(165deg,rgba(27, 164, 42, 1) 0%, rgba(21, 134, 33, 1) 26%, rgba(14, 105, 25, 1) 50%, rgba(10, 82, 18, 1) 69%, rgba(3, 48, 9, 1) 88%, rgba(2, 31, 2, 1) 100%);
    color: #fff; 
    border-radius: 12px; 
    border: 2px solid black;
    font-size: 18px; 
    box-shadow: 0px 0px 5px 4px rgba(40,188,235,0.68);
    -webkit-box-shadow: 0px 0px 5px 4px rgba(40,188,235,0.68);
    -moz-box-shadow: 0px 0px 5px 4px rgba(40,188,235,0.68);
}

/* 50% kleinere Zellen */
.cal-mcell { 
    border: 2px solid black; 
    background: linear-gradient(155deg,rgb(97, 189, 255) 0%, rgb(66, 171, 236) 36%, rgb(45, 125, 200) 62%, rgb(28, 93, 198) 83%, rgb(34, 83, 181) 100%);
    color: #fff; 
    min-height: 140px;
    max-height: 140px !important;
    height: 100% !important;
    min-width: 140px !important;
    border-radius: 6px; 
    padding: 6px; 
    display: flex; 
    flex-direction: column; 
    position: relative; 
    transition: background .15s, box-shadow .15s;
    box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -webkit-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important;
    -moz-box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.75) !important; 
}

.cal-mcell.cal-mcell-out { opacity:.58; }

.cal-mcell:hover { 
    background: #0e4a90;
    background: linear-gradient(155deg,rgba(97, 255, 197, 1) 0%, rgba(31, 204, 149, 1) 35%, rgba(28, 176, 164, 1) 62%, rgba(20, 133, 145, 1) 83%, rgba(17, 92, 112, 1) 100%);
    box-shadow: inset 0 0 0 3px rgba(0,255,25,.65); 
}

.cal-mcell.selected { 
    background: linear-gradient(155deg,rgb(169, 253, 222) 0%, rgb(103, 255, 199) 31%, rgb(87, 242, 154) 56%, rgb(16, 187, 125) 78%, rgb(14, 134, 80) 100%);
    box-shadow: inset 0 0 0 3px rgba(247, 255, 0, 0.8);
}

.cal-mcell.cal-today { box-shadow: inset 0 0 0 3px #FFA735; }

.cal-mcell.cal-today:hover {
    background: linear-gradient(155deg,rgba(97, 255, 197, 1) 0%, rgba(31, 204, 149, 1) 35%, rgba(28, 176, 164, 1) 62%, rgba(20, 133, 145, 1) 83%, rgba(17, 92, 112, 1) 100%);
    box-shadow:inset 0 0 0 2px #BF5A11;
} 

/* Kopf + Events */
.cal-mcell .cal-date { 
    font-weight: 700; 
    font-size: 13px; 
    margin-bottom: 4px; 
    opacity: .9; 
    line-height:1; 
}

.cal-mcell .cal-events { 
    display: flex; 
    flex-direction: column; 
    gap: 4px; 
    overflow: auto; 
    max-height: calc(100% - 18px); 
}

.cal-ev { 
    background: #9dd2ff; 
    color: #000; 
    border-radius: 4px; 
    padding: 3px 5px; 
    font-size: 12px; 
    cursor: grab; 
    /*border: 1px solid #000; */
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

.cal-ev.allday { opacity:.95; }
.cal-ev.recurring { background:#ffe39d; }
.cal-ev, .allday-pill, .ev-block { border-left:4px solid transparent; }

/* Drop-Target */
.cal-mcell.drop-target { outline:3px dashed #03c03c; }

:root { --hour-h: 30px; }

.cal-timegrid { 
    display:flex; 
    gap:6px; 
    overflow: auto;    
}

.cal-times { 
    width: 44px;
    margin-top: 45px;
    margin-right: 5px;
}

.cal-times .t {
    height: var(--hour-h); 
    font-size: 18px;
    font-weight: 600;
    color: #fff; 
    opacity: .9;
}

.cal-main { 
    flex: 1;
    display: flex;
    flex-direction: column;
}

.allday-grid { 
    display: grid;
    gap: 6px;
    margin-bottom: 5px;
}

/* Tagesansicht: linksbündig (gewünscht) */
.allday-grid.day .cal-weekday-label {
  text-align: left;
}

/* Kleine optische Harmonisierung zu deinen Buttons/Panels */
.allday-grid .allday-pill.recurring,
.cal-month .cal-ev.recurring,
.ev-block.recurring {
  box-shadow: 2px 2px 4px rgba(1, 4, 18, 0.5);
  border: 2px solid #041d2e;
}

.allday-grid.week { 
    grid-template-columns: repeat(7, 1fr);
}

.allday-grid.day  { 
    grid-template-columns: 1fr; 
}

.allday-slot { 
    position: relative; 
    overflow: visible; 
}

.allday-pill { 
    position: relative; 
    background: #9dd2ff; 
    color: #000; 
    border: 2px solid #000; 
    border-radius: 14px; 
    padding: 2px 8px; 
    font-size: 14px; 
    margin: 2px; 
    cursor: grab; 
    display: flex; 
    justify-content: center;
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis;
}

.allday-pill.recurring { background:#ffe39d; }

.cont-left::before, .cont-right::after { 
    /*content:""; */
    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: 8px; 
    background: repeating-linear-gradient(45deg, rgba(0,0,0,.25), rgba(0,0,0,.25) 4px, transparent 4px, transparent 8px); 
}

.cont-left::before { 
    left: -8px; 
    border-top-left-radius: 6px; 
    border-bottom-left-radius: 6px; 
}

.cont-right::after { 
    right: -8px; 
    border-top-right-radius: 6px; 
    border-bottom-right-radius: 6px; 
}

.allday-pill.cont-left::before { content: ""; position: absolute; left: -6px; top: 50%; transform: translateY(-50%); border-top: 6px solid transparent; border-bottom: 6px solid transparent; opacity: .6; }
.allday-pill.cont-right::after { content: ""; position: absolute; right: -6px; top: 50%; transform: translateY(-50%); border-top: 6px solid transparent; border-bottom: 6px solid transparent; opacity: .6; }

/* Tages-Spalten */
.cal-days { display:grid; gap:6px; }
.cal-days.week { grid-template-columns: repeat(7, 1fr); }
.cal-days.day  { grid-template-columns: 1fr; }

.cal-weekdays-head { 
    display: grid; 
    grid-template-columns: 60px repeat(7, 1fr); 
    gap: 0; 
    font-weight: 600; 
    padding: 4px 0; 
}

.cal-weekdays-head .hcell { 
    text-align: center; 
}



.modal-card label.muted { opacity: .55; }

.time-col { 
    position: relative; 
    border: 2px solid black; 
    background: #0a3e7a; 
    border-radius: 8px; 
    height: calc(24 * var(--hour-h)); 
}

.time-col .slot-lines { 
    position:absolute; 
    inset:0; 
    background: repeating-linear-gradient(to bottom, rgb(0, 0, 0) 0, rgba(2, 1, 17, 0.36) 2px, transparent 2px, transparent var(--hour-h));
}

/* Eventblöcke */
.ev-wrap { position:absolute; inset:0; }

.ev-block { 
    position: absolute; 
    min-height: 24px;
    padding: 2px 6px;
    background: #9dd2ff; 
    border-radius: 6px; 
    font-size: 14px; 
    font-weight: 500;
    cursor: grab; 
    overflow: hidden;
    color: #000;
    border: 2px solid #000;
    box-shadow: 2px 2px 4px rgba(1, 4, 18, 0.5);    
}

.ev-block.recurring { 
    background: #ffe39d; 
}

.ev-block .resize-handle { 
    position: absolute; 
    left: 0; 
    right: 0; 
    height: 6px; 
    cursor: ns-resize;
    background: rgba(0,0,0,.12);
}

.ev-block .resize-handle.top { top:-2px; }
.ev-block .resize-handle.bot { bottom:-2px; }

/* Auswahl-Rechteck */
.sel-rect { position:absolute; background:rgba(3,192,60,.25); outline:2px dashed #03c03c; pointer-events:none; }

/* ===== Modal ===== */
#evModal { position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; align-items:center; justify-content:center; z-index:9999; }

#evModal .modal-card { 
    width: 600px; 
    max-width: 95vw; 
    background-image: url('../images/logon.jpg') !important;
    background:#0053ab; 
    color:#fff; 
    border:2px solid #000; 
    border-radius:10px; 
    box-shadow: 2px 2px 8px rgba(1,4,18,.8); 
    padding:12px; 
}

#evModal .modal-title { font-weight:700; font-size:20px; margin-bottom:6px; }
#evModal label { font-weight:700; margin-top:6px; }
#evModal input, #evModal textarea, #evModal select { width:100%; color:#000; background:#9dd2ff; border:2px solid #000; }
#evModal .row { display:flex; gap:8px; }
#evModal .row .f1 { flex:1; padding-left: 10px; padding-right: 10px;}
#evModal .actions { display:flex; gap:8px; justify-content:flex-end; margin-top:10px; }
#evModal .danger { background:#d9534f; color:#fff; border:none; padding:8px 10px; border-radius:6px; }
#evModal .primary{ background:#03c03c; color:#000; border:none; padding:8px 10px; border-radius:6px; }
#evModal .ghost  { background:#eee; color:#000; border:none; padding:8px 10px; }
#evModal .note   { font-size:12px; color:#ffc87c; margin-top:6px; }
#evModal .inline { display:flex; align-items:center; gap:8px; }
#evModal .rrule-ex { font-weight:400; }

.panel-cron .list-filters .list-label {
    display: inline-block;
    margin-left: 10px;
}

.panel-cron .panel-body-cron { padding-top: 10px; }
.table-cron .cron-sched { font-weight: 600; margin-bottom: 4px; }
.table-cron .cron-cmd { font-weight: 600; }

.table-cron .cron-raw { 
    display: inline-block; 
    font-size: 16px;
    font-weight: 600;
    opacity: 0.85; 
}

.cron-row .form-control { 
    display: inline-block; 
    vertical-align: middle; 
    margin-right: 8px; 
}

.cron-row .builder { display:none; }

.cron-help { 
    margin-top: 8px;
    margin-bottom: 10px;
    font-size: 14px; 
    opacity: .8; 
}


.btn-active  { pointer-events: auto; }
.btn-inactive{ pointer-events: auto; }
.cron-command-input { 
    width: 420px; 
    max-width: 100%;
    min-width: 420px;
}

/* =========================
   Ergänzungen: Kalender-Header + Combo
   ========================= */

/* Kombi-Dropdown (Kalenderauswahl / Sichtbarkeit / Farbe) */
#calCombo { position: relative; }
#btnCalCombo.btn-calendar {
  height: 32px;
  line-height: 1.1;
  font-weight: 700;
  border: 3px solid black;
  border-radius: 12px;
  box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78);
  background: linear-gradient(155deg, rgba(97,189,255,1) 0%, rgba(30,145,217,1) 36%, rgba(21,101,176,1) 62%, rgba(10,70,166,1) 83%, rgba(12,42,102,1) 100%);
  color: #fff;
  padding: 4px 10px;
}
#btnCalCombo.btn-calendar:hover {
  background: linear-gradient(155deg, rgba(97,255,197,1) 0%, rgba(31,204,149,1) 35%, rgba(28,176,164,1) 62%, rgba(20,133,145,1) 83%, rgba(17,92,112,1) 100%);
}

#calComboMenu.dropdown-menu {
  position: absolute;
  display: none;
  z-index: 1000;
  min-width: 320px;
  padding: 8px;
  background: #fff;
  border: 2px solid #000;
  border-radius: 10px;
  box-shadow: 2px 2px 8px rgba(1,4,18,.8);
}

#calComboMenu .calpick-row { cursor: pointer; }
#calComboMenu .calpick-row:hover {
  background: rgba(0, 0, 0, .05);
  border-radius: 6px;
}

/* Checkbox in der Combo */
#calComboMenu .cd-filter {
  min-width: 16px; min-height: 16px; width: 16px; height: 16px;
  box-shadow: 0 0 0 2px rgba(0,0,0,.35);
}

/* Aktiver Kalender-Name im Button (Text truncation fallback) */
#calCombo #calComboActiveName {
    display: inline-block;
    max-width: 220px;
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap;
    padding: 0px;
    margin-top: -4px;
    font-size: 17px;
    font-weight: bold;
}

.btn.btn-cal-import input[type="file"] { display: none; }

/* View-Buttons (Monat/Woche/Tag) angleichen */
.btn.btn-calendar.js-view {
  height: 32px;
  font-weight: 700;
  border: 3px solid black;
  border-radius: 12px;
  box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78);
  background: linear-gradient(155deg, rgba(97,189,255,1) 0%, rgba(30,145,217,1) 36%, rgba(21,101,176,1) 62%, rgba(10,70,166,1) 83%, rgba(12,42,102,1) 100%);
  color: #fff;
}
.btn.btn-calendar.js-view:hover { filter: brightness(1.05); }

/* Nav-Buttons (Zurück/Weiter/Heute) angleichen */


/* Mini-Button im Modal (⏱) */
#evModal .btn.btn-xs {
  height: 28px;
  line-height: 1;
  padding: 2px 8px;
  font-size: 12px;
  border: 2px solid #000;
  border-radius: 8px;
  background: #9dd2ff;
  color: #000;
}

#seriesChoice, #seriesDeleteChoice {
  position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.5);
  z-index: 2500;
}

.series-card {
  width: 520px; max-width: 95vw;
  background: #0053ab;
  color:#fff; border:2px solid #000; border-radius: 10px;
  box-shadow: 2px 2px 8px rgba(1,4,18,.8); padding: 12px;
  background-image: url('../images/logon.jpg') !important;
}

.series-card .title { font-weight:700; font-size:20px; margin-bottom:8px; }
.series-card .msg   { font-size:15px; margin-bottom:12px; }
.series-card .actions { display:flex; gap:8px; justify-content:flex-end; }
.series-card .btn { border: 3px solid black; border-radius: 12px; box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78); }
.series-card .btn-cancel { background: #eee; color:#000; }
.series-card .btn-all    { background: linear-gradient(155deg,rgba(99,255,118,1) 0%, rgba(23,255,46,1) 23%, rgba(11,212,34,1) 47%, rgba(13,166,31,1) 68%, rgba(6,105,19,1) 86%, rgba(5,74,5,1) 100%); color:#000; }
.series-card .btn-one    { background: linear-gradient(155deg,rgba(97,189,255,1) 0%, rgba(30,145,217,1) 36%, rgba(21,101,176,1) 62%, rgba(10,70,166,1) 83%, rgba(12,42,102,1) 100%); color:#fff; }


/* =========================
   Ergänzungen: Zeit-Auswahlmenü (⏱)
   ========================= */
.time-menu {
    position: absolute;
    z-index: 3000 !important;
    min-width: 90px;
    max-height: 240px;
    overflow: auto;
    background: #024D9D;
    background: linear-gradient(176deg,rgba(0, 33, 66, 1) 0%, rgba(11, 48, 99, 1) 24%, rgba(2, 77, 157, 0.82) 50%, rgba(10, 49, 122, 1) 75%, rgba(4, 35, 61, 1) 100%);
    border: 2px solid #000;
    border-radius: 10px;
    box-shadow: 2px 2px 8px rgba(1,4,18,.8);
    align-items: center;
    text-align: center;
    margin-left: -46px;
}

.time-menu > div {
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 6px;
    font-weight: 600;
}

.time-menu > div:hover {
    background: linear-gradient(94deg,rgba(6, 46, 32, 1) 0%, rgba(0, 66, 33, 0.9) 16%, rgba(11, 99, 55, 0.84) 38%, rgba(13, 158, 71, 0.69) 66%, rgba(11, 181, 65, 0.41) 100%);
}

/* =========================
   Ergänzungen: Grid/Spalten
   ========================= */
/* Labels in der All-Day-Zeile (Woche/Tag) */
.allday-grid.week .cal-weekday-label,
.allday-grid.day .cal-weekday-label {
    color: #ffffff;
    border: 2px solid;
    border-radius: 14px !important;
    font-weight: bold;
    display: flex;
    justify-content: center;
    padding: 4px 6px;
    margin-top: 2px;
    margin-bottom: 2px;
    box-shadow: 0px 0px 4px 4px rgba(40,188,235,0.68);
    -webkit-box-shadow: 0px 0px 4px 4px rgba(40,188,235,0.68);
    -moz-box-shadow: 0px 0px 4px 4px rgba(40,188,235,0.68);    
}

.cal-weekday-label {
    background: linear-gradient(165deg, rgba(27,164,42,1) 0%, rgba(21,134,33,1) 26%, rgba(14,105,25,1) 50%, rgba(10,82,18,1) 69%, rgba(3,48,9,1) 88%, rgba(2,31,2,1) 100%);

}

/* Monats-Pills angleichen (dezent Rahmen) */
.cal-ev {
  border: 2px solid #000;
  box-shadow: 2px 2px 4px rgba(1, 4, 18, 0.5);
}

/* Auswahl-Rechteck beim Aufziehen in Tag/Woche etwas sichtbarer */
.sel-rect {
  background: rgba(3,192,60,.25);
  outline: 3px dashed #03c03c;
  border-radius: 6px;
}

/* =========================
   Responsives Feintuning
   ========================= */
@media (max-width: 1024px) {
  #calCombo #calComboActiveName { max-width: 160px; }
  .panel-calendar .cal-h-title { flex-wrap: wrap; }
}

@media (max-width: 720px) {
  .panel-calendar .cal-h-views { flex-wrap: wrap; }
  .panel-calendar .cal-wrapper { width: 100%; }
  #calComboMenu.dropdown-menu { min-width: 260px; }
  .cal-weekdays div { font-size: 16px; }
  .cal-mcell { min-height: 84px; }
}

/* =========================
   Sicherheit: Z-Index-Layer
   ========================= */
.panel-calendar .panel-heading { z-index: 5; position: relative; }
#calComboMenu.dropdown-menu,
.time-menu { z-index: 1100; }
#evModal { z-index: 2000; }


/* =================
   Pandex Webmail
   ================= */

.panel-webmail {
  background: #0f2436;
  border: 1px solid #1c2f40;
  color: #dbe7ef;
  max-width: 100%;
  width: 100%;
  margin-top: -92px;
  display: flex;
  flex-direction: column;
  height: 70vh; /* Fallback – tatsächliche Höhe per JS */
}

.panel-webmail * { box-sizing: border-box; }

.panel-webmail .panel-heading {
  background: #142f4a;
  color: #fff;
  border: 2px solid #000;
  font-size: 22px;
  font-weight: 700;
}

.panel-webmail .panel-body-webmail {
  flex: 1 1 auto;
  min-height: 0; /* wichtig fürs Scroll-Verhalten */
  background-image: url('../images/pdxmail.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.wm-compose-to {
    min-width: 280px;
    width: 100%;
}

.wm-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  gap: 20px;
}

.wm-title-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
}

.page-webmail { overflow-y: hidden; }

/* ---- 3-Spalten-Layout + Splitter ---- */
.panel-webmail .wm-layout {
  display: flex;
  height: 100%;
  min-height: 0;
  gap: 0;
}

.panel-webmail .wm-splitter {
    width: 6px;
    cursor: col-resize;
    background: linear-gradient(90deg,rgba(14, 95, 176, 1) 0%, rgba(8, 62, 128, 1) 37%, rgba(10, 45, 107, 1) 64%, rgba(4, 31, 74, 1) 84%, rgba(0, 12, 31, 1) 100%);
    transition: background .25s ease;
    border-top: 2px solid black;
    border-right: 1px solid black;
}
.panel-webmail .wm-splitter:hover,
.panel-webmail .wm-splitter.dragging {
    background: linear-gradient(90deg,rgba(43, 149, 255, 1) 0%, rgba(6, 93, 199, 1) 45%, rgba(9, 68, 171, 1) 70%, rgba(1, 35, 89, 1) 89%, rgba(1, 20, 51, 1) 100%);
    border-top: 2px solid black;
    border-right: 1px solid black;    
}

.panel-webmail .wm-sidebar {
    width: 100% !important;
    min-width: 250px !important;
    max-width: 310px !important;
    border-left: 1px solid #000;
    display: flex;
    flex-direction: column;
}

.panel-webmail .wm-sidebar-hd {
    font-weight: 600;
    padding: 8px 8px;
    color: #cfe6ff;
    border-bottom: 3px solid black;
    height: 56px;
    background-color: #510979c4;
    border-top: 2px solid black;
    background-image: url('../images/webmailbg.png');    
}

.panel-webmail .wm-sidebar-ft {
    border-top: 2px solid #000;
}

.wm-sidebar-ftform {
    display: flex;
    justify-content: center;   /* horizontal */
    align-items: center;       /* vertikal   */
    min-height: 32px;         /* Demo-Höhe der Box */
    padding: 2px;
    padding-top: 4px;   
}

.panel-webmail .wm-folder-list {
    overflow: auto;
    flex: 1 1 auto;
    min-height: 0;
    background-color: #02125185;
    font-size: 15px;
    font-weight: 600;
    min-width: 200px;
    padding: 1px 0 0 8px;
    list-style: none;
    margin: 0;
    margin-top: 3px;
}

/* Zeilencontainer im Tree */
.panel-webmail .wm-folder-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Toggle für Unterordner (Chevron) */
.panel-webmail .wm-folder-toggle {
    cursor: pointer;
    width: 14px;
    text-align: center;
    opacity: .9;
    margin-top: -8px; /* optische Zentrierung zur Textlinie */
}

/* Linkzeile */
.panel-webmail .wm-folder-link {
    display: flex;
    align-items: center;
    gap: 2px;
    width: 100%;
    color: #cde1f2;
    text-decoration: none;
    padding: 0px 0px 0px 6px;
    height: 32px;
    border-bottom: 2px solid #2a73e669;
}

.panel-webmail .wm-folder-link .glyphicon { 
    margin-right: 12px; 
    opacity: .9; 
}

.panel-webmail .wm-folder-name {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap; 
    overflow: initial; 
    /*text-overflow: ellipsis;*/
    display: inline-block;
    max-width: 180px;
}

/* Badge rechtsbündig + Styling */
.panel-webmail .wm-badge{
    background: #ab00db;
    color: #fff;
    border-radius: 16px;
    align-items: center;
    display: flex;
    height: 25px;
    max-height: 25px;
    width: auto;
    min-width: 25px;
    max-width: 50px;
    vertical-align: middle;
    border: 2px solid #000;
    box-shadow: 1px 1px 2px 1px rgba(1, 4, 18, 0.78);
}

.panel-webmail .wm-badge:hover {
    background:#ff4500 /* wie bisher – wirkt gegen lange Namen */
}

/* Active/Hover-Zustand wie zuvor */
.panel-webmail .wm-folder-list > li.active > .wm-folder-item > .wm-folder-link,
.panel-webmail .wm-folder-list > li > .wm-folder-item > .wm-folder-link:hover {
    background: #06592a;
    color: #fff;
    box-shadow: 1px 1px 2px 1px rgba(27,117,196,0.77);
    border-radius: 0;
    border-top-right-radius: 1px;
    border-bottom-right-radius: 14px;
    border-right: 3px solid #000;
    border-bottom: 2px solid #000200;
    font-size: 15px;
}

/* Children-Liste (eingerückt + gestrichelte Leiste) */
.panel-webmail .wm-folder-children {
    display: none;
    margin-left: 12px;
    padding-left: 10px;
    list-style: none;
}
.panel-webmail .wm-folder-expanded > .wm-folder-children { 
    display: block;
}

/* =========================================================
   Center: Toolbar + Nachrichtenliste + Pager
   ========================================================= */
.panel-webmail .wm-center {
    flex: 1 1 auto;
    min-width: 600px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.panel-webmail .wm-toolbar {
    display: flex;
    flex-wrap: wrap; 
    align-items: center;
    padding: 0 6px;    
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    border-top: 2px solid #000;
    border-bottom: 3px solid black;
    background-color: #510979c4;
    background-image: url('../images/webmailbg.png');
}

.wm-toolbar-top {
    display: flex;
    align-items:center;
    margin-top: -1px;
    margin-left: 0px;
    width: 100%;
}

.wm-dd-buttons {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    gap: 20px;
    margin-top: 0px;
}

.wm-dd .dropdown-menu > li > a { cursor:pointer; }

.wm-form-inline {
    line-height: 1.4;
    display:flex;
    align-items:center;
    margin-top: 1.5px;
}

.wm-input-sm {
    width: 245px !important;
    max-width: 245px !important;
    min-width: 245px !important;
    height: 30px !important;
    max-height: 30px !important;    
}

.panel-webmail .wm-search { 
    flex: 1 1 auto; 
    display: flex; 
    align-items: center; 
    gap: 6px;
    max-width: 200px !important;
}

.panel-webmail .wm-search .form-control {
    border: 2px solid #000;
    border-right: 0px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    min-height: 32px;  
    max-height: 32px; 
    min-width: 130px; 
    margin-top: 0px; 
    margin-left: 0px;
}

.wm-search-q {
    border: 2px solid black; 
    border-top-left-radius: 8px; 
    border-bottom-left-radius: 8px; 
    max-height: 32px; 
    min-height: 32px;
    margin-top: 0px;     
}

.panel-webmail .wm-search .btn-search {
    min-height: 31.5px; 
    max-height: 31.5px;
    margin-top: 0px; 
}

/* Aktionen (rechts in Toolbar) */
.panel-webmail .wm-actions button {
    margin-left: 4px;
    margin-top: -5px;
    border: 2px solid #000;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.78);
}
.webmail-wrapper {
    display: flex;
    gap: 2.5px;
    margin-top: 3px !important;
    align-items: center;
    align-content: center;
}
.user-wrapper { display: flex; align-items: center; align-content: center; }

/* ---- Nachrichtenliste ---- */
.panel-webmail .wm-list {
    overflow: hidden;
    background: #011137d4;
    display: flex;
    flex-direction: column;
    border: 1px solid #000;
    min-height: 0;
    flex: 1 1 auto;
    border-left: 1px solid #002eb7;
    border-bottom: 2px solid black;
}

/* Header – sortierbar, Flex-Spalten */
.panel-webmail .wm-list-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: #181bca;
    color: white;
    font-weight: 600;
    font-size: 16px;
    border-bottom: 2px solid #000;
    flex: 0 0 auto;
}

.panel-webmail .wm-list-header .sortable {
    cursor: pointer;
    user-select: none;
    display: flex; 
    align-items: center; 
    gap: 6px;
}

.panel-webmail .wm-list-header .sort-ind { font-size: 10px; opacity: .9; }
.wm-list .sort-ind.glyphicon { margin-left: 4px; }

/* Spaltenbreiten – Header wie Body */
.panel-webmail .wm-col-sel { 
    width: 28px; 
    min-width: 28px; 
    display: flex; 
    align-items: center; 
    /*justify-content: center; */
}

/* message collums */
.panel-webmail .wm-col-subj { 
    flex: 1 1 auto; 
    min-width: 0; 
}

.panel-webmail .wm-col-from { 
    width: 22%; 
    min-width: 150px; 
}

.panel-webmail .wm-col-date { 
    width: 20%; 
    min-width: 160px; 
    text-align: right; 
    padding-right: 6px;
    padding-left: 12.5px; 
}

/* Body – Scrollbereich */
.panel-webmail .wm-list-body {
    flex: 1 1 auto;
    max-height: none;
    overflow: auto;
}

/* Zeilen (Flex wie Header) */
.panel-webmail .wm-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 2px solid #02091e4f;
    cursor: pointer;
    color: white;
    font-size: 14px;
    font-weight: 400;
}
.panel-webmail .wm-row:hover { filter: brightness(1.06); }

/* Ungelesen */
.panel-webmail .wm-unseen .wm-col-subj { 
    font-weight: 700; 
    font-style: italic;    
}

.panel-webmail .wm-unseen .wm-subj-from {
    color: white;
    font-weight: 600 !important;
}

/* Selektions-Highlight */
.panel-webmail .wm-row.wm-selected { background-color: #5e0c36 !important; }

/* Pager */
.panel-webmail .wm-pager {
    margin: 3px 0 4px 8px;
    flex: 0 0 auto;
    font-size: 15px;
    font-weight: bold;
    height: 33.5px;
}

.wm-pager-wrapper {
    display: flex;
}

.wm-page-info {
    align-items: center;
    align-content: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
}

/* =========================================================
   Preview (rechte Spalte)
   ========================================================= */
.panel-webmail .wm-preview {
    width: 34%;
    min-width: 250px;
    border-top: 2px solid #000;
    border-radius: 4px;
    margin-left: 0;
    display: flex;
    flex-direction: column;
    background: #0d2233;
    min-height: 0;
    background-image: url('../images/pdxmail.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.panel-webmail .wm-preview-hd {
    background-color: #510979c4;
    border-bottom: 3px solid #010309;
    padding: 2px;
    height: 54px;
    min-height: 54px;
    max-height: 54px;
    background-image: url('../images/webmailbg.png');    
}

.panel-webmail .wm-preview-subject {
    color: #fff;
    font-size: 16px;
    font-weight: bold;   
}

.panel-webmail .wm-preview-subject-title {
    padding-left: 12px;
    font-size: 16px;
    font-weight: 600; 
    color: #fff;
}

.panel-webmail .wm-preview-subject-box {
    height: 32px;
    background-color: #004951e5;
    padding-top: 4px;
}

.panel-webmail .wm-meta {
    color: white;
    background: #181bca;    
    display: grid;
    grid-template-columns: 1fr 300px 214px;
    gap: 4px 10px;
    font-size: 16px;
    font-weight: bold;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 12px;
    border-bottom: 2px solid black;
    border-top: 1px solid black;  
}

.panel-webmail .wm-preview-body {
    flex: 1 1 auto;
    overflow: auto;
    background-color: #04142dd4;
    color: white;
}

.panel-webmail #wm-html { 
    width: 100%; 
    height: 100%; 
    border: 0; 
    color: white;
}

pre#wm-plain {
    background-color: #04142dd4;
    max-width: 100% !important;
    max-height: 100% !important;
    margin-left: 0px !important;
    border: 0px !important;
    font-size: 15px !important;
    font-weight: 500;
}

.panel-webmail #wm-plain { 
    padding: 10px; 
    white-space: 
    pre-wrap; 
    color: #e1edf6; 
}

.panel-webmail #wm-error { margin: 8px; }

/* =========================================================
   Compose-Dialog
   ========================================================= */
.wm-compose-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 1050;
    display: none;
}

.wm-compose-dialog {
    position: absolute; top: 5%; left: 50%;
    transform: translateX(-50%);
    width: 92%; max-width: 980px;
    background: #0d2233;
    border: 1px solid #1c2f40;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,.6);
}

.wm-compose-header {
    padding: 10px 12px;
    border-bottom: 1px solid #1c2f40;
    color: #eaf4ff;
    background-color: #0a2762 !important; 
    font-weight: 700;
    display: flex; align-items: center; justify-content: space-between;
}

.wm-compose-close { background: transparent; border: 0; color: #cfe6ff; font-size: 20px; line-height: 1; }

.wm-compose-body { padding: 12px; }

.wm-compose-footer {
    padding: 10px 12px; 
    border-top: 1px solid #1c2f40;
    display: flex; 
    gap: 8px; 
    justify-content: 
    space-between; 
    align-items: center;
}

.wm-compose-row {
    margin-bottom: 8px;
    display: flex; align-items: center; gap: 8px;
    color: #fff;
}

.wm-compose-row label { 
    min-width: 70px; 
    margin: 0;
    font-size: 16px;
}

.wm-compose-row input[type=text] { flex: 1 1 auto; }
.wm-compose-editor {
    width: 100% !important;
    min-height: 260px;
    max-width: 960px !important;
    color: #000;
}

.wm-attach-text {
    color: black;
}

.wm-attach-hidden { display: none; }

.wm-attach-list, 
.wm-fwd-attach-list {
    list-style: none; 
    padding: 0; 
    margin: 8px 0 0 78px;
    max-height: 140px; 
    overflow: auto;
}

.wm-attach-list li, .wm-fwd-attach-list li {
    display: flex; 
    align-items: center; 
    justify-content: space-between;
    background: #10293f; 
    margin-bottom: 4px; 
    padding: 6px 8px; 
    border-radius: 8px;
}

.wm-small-note { 
    color: #9fc5ff; 
    margin-left: 80px;  font-size: 14px;
    font-size: 16px;
    font-weight: 500;
}

.panel-webmail .hidden { display: none !important; }

.list-group-item.active > .badge,
.nav-pills > .active > a > .badge {
    color: #000;
    background-color: #ff7e20;
}

/* Responsives Tuning (Preview einklappen bei schmalen Layouts) */
@media (max-width: 980px) {
  .panel-webmail .wm-preview { display: none; }
  .panel-webmail .wm-splitter#wm-split-right { display: none; }
}

.panel-webmail .wm-col-sel input[type="checkbox"] {
    margin: 0;
    width: 16px; 
    height: 16px; 
    min-width: 16px; 
    min-height: 16px;
    cursor: pointer;
    color: white;
    background-color: #2480e9 !important;
    box-shadow: 1px 1px 1px rgba(17, 16, 16, 0.85);    
}

.wm-confbox {
    margin-left: 2.5px !important;
    width: 16px; 
    height: 16px; 
    min-width: 16px;   font-size: 14px;
    min-height: 16px;
    cursor: pointer;    
    color: white;
    background-color: #2480e9 !important;
    box-shadow: 1px 1px 1px rgba(17, 16, 16, 0.85);
}

.wm-confbox-folder {
    margin-left: 20px !important;
    margin-top: 0px !important;
    min-height: 16px;
    min-width: 16px;
    height: 16px;
    width: 16px;
    cursor: pointer;    
    color: white;
    background-color: #2480e9 !important;
    box-shadow: 1px 1px 1px rgba(17, 16, 16, 0.85);
}

.wm-row.dragging { opacity: .6; }

.wm-folder-link.drop-target { 
    outline: 2px dashed #45ffa8; 
    background: #06592a; 
}

.wm-msg-actions { 
    display:flex; 
    gap:20px; 
    justify-content:flex-start; 
    margin-top: 2px;
    margin-bottom:4px; 
}

.wm-msg-actions .btn { padding: 3px 8px; }

.wm-flagged .wm-col-subj::before { content:"★ "; }

.wm-folders-overlay {
    position: fixed; 
    inset: 0; 
    background: rgba(0,0,0,.35);
    display: none; 
    align-items: center; 
    justify-content: center; 
    z-index: 1050;
}

.wm-folders-dialog {
    background: #0b3e64;
    border-radius: 6px; 
    min-width: 420px; 
    max-width: 640px;
    box-shadow: 0 12px 24px rgba(0,0,0,.25);
}

.wm-folders-header, 
.wm-folders-footer { 
    padding: 10px 12px; 
    border-bottom: 1px solid #ddd; 
}

.wm-folders-footer { 
    border-top: 1px solid #ddd; 
    border-bottom: 0; 
    display:flex; 
    justify-content:flex-end; 
    gap:8px; 
}

.wm-folders-body { 
    padding: 10px 12px; 
    max-height: 60vh; 
    overflow:auto; 
}

.wm-folder-toggle-row { 
    display:flex; 
    align-items:center; 
    gap:10px; 
    padding:6px 0; 
}

.wm-folder-toggle-row small { opacity:.7; }      

/* --- Webmail: zweizeilige Listenansicht (Von über Betreff) --- */
.wm-list .wm-list-header .wm-col-from { display:none; }             /* Header-Spalte "Von" ausblenden */
.wm-list .wm-row .wm-col-from { display:none; }                      /* Daten-Spalte "Von" ausblenden */

.wm-list .wm-row .wm-col-subj { display:flex; flex-direction:column; }
.wm-list .wm-row .wm-subj-from { font-weight:450; line-height:1.2; }

.wm-list .wm-row .wm-subj-subject { 
    line-height:1.2; 
    opacity:.9;
}

.wm-list .wm-row .wm-col-date { text-align:right; padding-right:12px; }

#wm-preview { min-width: 480px; }

/* ——— 2-zeilige Nachrichtenliste (Von über Betreff) ——— */
.wm-list .wm-col-from { display:none; } /* separate From-Spalte ausblenden */
.wm-list .wm-col-subj { line-height:1.2; }
.wm-list .wm-subj-from { font-weight:600; opacity:.9; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wm-list .wm-subj-subject { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.wm-quota-line {
    font-size:13px;
    opacity:.85;
    margin-bottom:4px;
    color:#dbe7ef;
}

.wm-quota-bar { width:100%; height:6px; background:#eee; border-radius:3px; overflow:hidden; }
.wm-quota-fill { height:6px; width:0%; background:#5cb85c; transition:width .25s ease; }

/* ——— Einstellungen Modal ——— */
.wm-settings-overlay { 
    position:fixed; 
    inset:0; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    background:rgba(0,0,0,.3); 
    z-index:9998; 
}

.wm-settings-dialog { 
    width:720px; 
    max-width:95vw; 
    color: white;    
    background:#000039; 
    border-radius:12px; 
    box-shadow:0 8px 20px rgba(0,0,0,.25); 
}

.wm-settings-header { 
    padding:10px 12px; 
    border-bottom:1px solid #ddd; 
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
    background-color: #0a2762 !important;
}

.wm-settings-close { 
    background:none; 
    border:0; 
    font-size:22px; 
    line-height:1; 
    cursor:pointer; 
}

.wm-settings-body { 
    padding:12px; 
    max-height:70vh; 
    overflow:auto; 
}

.wm-settings-title {
    font-size: 18px;
    font-weight: bold;
}

.wm-settings-section { 
    margin-bottom:14px;
}

.panel-webmail .wm-list .cell {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* Splitter während Drag */
.wm-splitter.dragging { cursor: col-resize; }

/* A11y Fokus-States im Panel */
.panel-webmail a:focus,
.panel-webmail button:focus,
.panel-webmail input:focus {
    outline:2px solid #45ffa8;
    outline-offset:1px;
}

/* --- Falls die Submenüs in der Toolbar Bootstrap-"dropdown-submenu" sind --- */
.dropdown-menu { overflow: visible !important; } /* nichts wegclippen */
.dropdown-submenu { position: relative; }
.dropdown-submenu > .dropdown-menu {
    top: -4px; 
    left: 100%;
    margin-top: 0; 
    margin-left: -1px;
}

.dropdown-submenu:hover > .dropdown-menu { display: block; }

/* ——— Kontextmenüs ——— */
.wm-ctx { 
    position: absolute;
    z-index: 20000;
    min-width: 220px;
    background: linear-gradient(179deg,rgba(0, 37, 105, 1) 0%, rgba(12, 53, 130, 1) 20%, rgba(5, 60, 163, 1) 48%, rgba(0, 35, 102, 1) 77%, rgba(3, 24, 56, 1) 99%);
    border: 2px solid white;
    border-radius: 10px; 
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.71);
    font-weight: bold;
}

.wm-ctx-list { 
    position: relative;
    list-style:none; 
    padding: 4px 0;
    margin: 0;
}

.wm-ctx-item, 
.wm-ctx-sub { 
    position: relative;
    white-space: nowrap;
    cursor: pointer;
    padding: 4px 14px;
}

.wm-ctx-item:hover, 
.wm-ctx-sub:hover > .wm-ctx-label { 
    background: #003366; 
}

.wm-ctx-divider { 
    height:2px; 
    margin:4px 0; 
    background:#e5e5e5;
}

.wm-ctx-caret { 
    float:right; 
    opacity:.6; 
}

.wm-ctx-submenu { 
    display: none;
    position: absolute;
    list-style: none;
    background: linear-gradient(179deg,rgba(0, 37, 105, 1) 0%, rgba(12, 53, 130, 1) 20%, rgba(5, 60, 163, 1) 48%, rgba(0, 35, 102, 1) 77%, rgba(3, 24, 56, 1) 99%);
    border: 2px solid white;
    border-radius: 10px;
    border-top-left-radius: 0px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.71);    
    top: 0; 
    left: 100%;
    margin-left: 0px;
    margin-top: -6px;
    min-width: 220px;
    padding: 4px 0;
    z-index: 10061;
    max-height: calc(100vh - 24px);   /* Fixe Obergrenze */
    overflow-y: auto;  
    overscroll-behavior: contain;   
}

.wm-ctx-sub { position:relative; }
.wm-ctx-sub:hover > .wm-ctx-submenu { display:block; }
.wm-ctx-sub.open > .wm-ctx-submenu{ display:block; }

.wm-ctx-sub .wm-ctx-label::after {
    content:'▶';
    position:absolute;
    right:5px; top:50%;
    transform:translateY(-50%);
}

.btn-webmail-actions {
    width: 100% !important;
    color: #ffffff;
    background: #0047AB;
    background: linear-gradient(145deg, rgba(0, 71, 171, 1) 0%, rgba(3, 56, 135, 1) 37%, rgba(12, 54, 122, 1) 69%, rgba(0, 29, 79, 1) 100%);
    border: 2px solid #000304;   
    border-radius: 14px;
    transition: background-color 0.3s ease;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.86) !important;
    padding: 0px 2px;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;    
    height: 42px;
    min-height: 42px;
    max-height: 42px;    
}

.btn-webmail-more {
    width: 100% !important;
    color: #ffffff;
    background: #0047AB;
    background: linear-gradient(145deg, rgba(0, 71, 171, 1) 0%, rgba(3, 56, 135, 1) 37%, rgba(12, 54, 122, 1) 69%, rgba(0, 29, 79, 1) 100%);
    border: 2px solid #000304;   
    border-radius: 14px;
    transition: background-color 0.3s ease;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.86) !important;
    padding: 0px 2px;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;    
    height: 42px;
    min-height: 42px;
    max-height: 42px;    
}

.btn-webmail-actions:hover,
.btn-webmail-actions:active,
.btn-webmail-more:hover,
.btn-webmail-more:active {
    background: #009914;
    background: linear-gradient(145deg, rgba(0, 153, 20, 1) 0%, rgba(0, 117, 14, 1) 37%, rgba(1, 87, 7, 1) 69%, rgba(0, 46, 8, 1) 100%);     
}


.btn-webmail-select {
    width: 100% !important;
    color: #ffffff;
    background: #0047AB;
    background: linear-gradient(145deg, rgba(0, 71, 171, 1) 0%, rgba(3, 56, 135, 1) 37%, rgba(12, 54, 122, 1) 69%, rgba(0, 29, 79, 1) 100%);
    border: 2px solid #000304;   
    border-radius: 14px;
    transition: background-color 0.3s ease;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.86) !important;
    padding: 0px 2px;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;    
    height: 42px;
    min-height: 42px;
    max-height: 42px;
}

.btn-webmail-select:hover,
.btn-webmail-select:active {
    background: #009914;
    background: linear-gradient(145deg, rgba(0, 153, 20, 1) 0%, rgba(0, 117, 14, 1) 37%, rgba(1, 87, 7, 1) 69%, rgba(0, 46, 8, 1) 100%);
    border: 2px solid #000304;   
    border-radius: 14px;
}

.btn-webmail-folder {
    color: #ffffff;
    background: #0047AB;
    background: linear-gradient(145deg, rgba(0, 71, 171, 1) 0%, rgba(3, 56, 135, 1) 37%, rgba(12, 54, 122, 1) 69%, rgba(0, 29, 79, 1) 100%);
    transition: background-color 0.3s ease;
    border: 2px solid #000304;   
    border-radius: 14px;
    transition: background-color 0.3s ease;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.86) !important;
    padding: 0px 2px;
    height: 42px;
    min-height: 42px;
    max-height: 42px;
    min-width: 52px !important;    
    max-width: 52px;
    width: 100% !important;
}

.btn-webmail-folder:hover {
    background: #009914;
    background: linear-gradient(145deg, rgba(0, 153, 20, 1) 0%, rgba(0, 117, 14, 1) 37%, rgba(1, 87, 7, 1) 69%, rgba(0, 46, 8, 1) 100%);   
}

.btn-webmail-attach {
    min-width: 130px !important;
    width: 100% !important;
    color: #ffffff;
    background: #0047AB;
    background: linear-gradient(145deg, rgba(0, 71, 171, 1) 0%, rgba(3, 56, 135, 1) 37%, rgba(12, 54, 122, 1) 69%, rgba(0, 29, 79, 1) 100%);
    border: 2px solid #000304;   
    border-radius: 8px;
    transition: background-color 0.3s ease;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.86) !important;
    padding: 2px 2px;
    height: 40px;
    min-height: 40px;
    max-height: 40px;     
}

.btn-webmail-draft {
    color: white;
    background: #0047AB;
    background: linear-gradient(145deg, rgba(0, 71, 171, 1) 0%, rgba(3, 56, 135, 1) 37%, rgba(12, 54, 122, 1) 69%, rgba(0, 29, 79, 1) 100%);
    display: block;
    height: 42px !important;
    max-width: 295px !important;
    min-width: 185px !important;
    margin-left: -10px !important;
    box-shadow: 2px 2px 4px 2px rgba(1, 4, 18, 0.86) !important;
    transition: background-color 0.3s ease;
    border: 3px solid #000000 !important;
    border-radius: 0px !important;
    font-size: 16px !important;
    font-weight: bold !important;
}

.btn-webmail-draft:hover,
.btn-webmail-draft:active {
    color: white;
    background-color: #1e90ff !important;
    height: 42px !important;
}

.btn-webmail-text {
    font-size: 15px;
    font-weight: bold;
    color: white;
}

.smxbutton {
    cursor: pointer;
    position: relative;
    padding: 2px;
    border-radius: 8px;
    border: 0;
    text-shadow: 2px 1.5px #000a;
    background: linear-gradient(#4bf, #08f, #00599b);
    box-shadow: 0px 0px 6px 4px rgba(0, 39, 134, 0.78) !important;
    transition: 0.3s all;
}

.smxbutton:active,
.smxbutton:hover {
    box-shadow: 0px 0px 6px 4px rgba(99, 144, 255, 0.89) !important;
    background: linear-gradient(#36c40e, #17aa0b, #216a00);
}

.smxbutton:active .inner::after {
    box-shadow: inset 0px 2px 8px -2px #000a;
}

.smxbutton-text {
    position: relative;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    transition: inherit;
    text-align: center;
}

.inner {
    position: relative;
    inset: 0px;
    padding: 10px;
    border-radius: 6px;
    background: radial-gradient(circle at 50% 100%, #06b7b7ba 10%, #30f8f800 55%),linear-gradient(#00144f, #0a77b9);
    overflow: hidden;
    transition: inherit;
    width: 160px;
    height: 50px;
    text-align: center;
}

.inner:hover {
    background: radial-gradient(circle at 50% 100%, #a3ff00ba 10%, #0a14ac05 55%),linear-gradient(#010242, #0ab92e);
}

.inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(-65deg, #0000 40%, #fff7 50%, #0000 70%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: thing 3s ease infinite;
}

.inner::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    transition: inherit;
    box-shadow: inset 0px 2px 8px -2px #0000;
}

.top-white {
    position: absolute;
    border-radius: inherit;
    inset: 0 -6em;
    background: radial-gradient( circle at 50% -270%, #e6e8ff 45%, #8e9aca66 60%, #23d7ea05 60% );
    transition: inherit;
}

.smxtop-white {
    position: absolute;
    border-radius: inherit;
    inset: 0 -4em;
    background: radial-gradient( circle at 50% -270%, #4b97cea8 45%, #2954ff0d 60%, #23d7ea05 60% );
    transition: inherit;
}

.smxtitle-center {
    display: flex;
    align-content: center;
    align-items: center;
    text-align: center;
    justify-content: center;
    width: 100%;
    margin-top: 10px;
}

.smxtitle {
    position: relative;
    padding: 2px;
    border-radius: 12px;
    border: 0;
    text-shadow: 2px 1.5px #000a;
    background: linear-gradient(#4bf, #08f, #00599b);
    box-shadow: 0px 0px 6px 4px rgba(0, 39, 134, 0.78) !important;
    transition: 0.3s all;
    max-width: 284px;
}

.smxtitle-text {
    position: relative;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    transition: inherit;
    text-align: center;
}

.inner-title {
    position: relative;
    inset: 0px;
    padding: 10px;
    border-radius: 12px;
    background: radial-gradient(circle at 50% 100%, #0611b7c4 10%, #05204221 55%),linear-gradient(#00144f, #0a4eb9d9);
    overflow: hidden;
    transition: inherit;
    width: 280px;
    height: 50px;
    text-align: center;
}

@keyframes thing {
  0% {
    background-position: 130%;
    opacity: 1;
  }

  to {
    background-position: -166%;
    opacity: 0;
  }
}

#card-table tbody tr { border-bottom: 1px solid black; }

.carddav-toolbar { 
    margin-bottom: -2px;
    margin-top: -4px;
    border-bottom: 2px solid black;
    display: flex; 
    align-items: center;
    margin-left: 2px;
}

.carddav-info { 
    flex:1; 
    padding:5px; 
    font-weight:bold;
    font-size: 16px;
}

.carddav-actions { padding:5px; }

.modal .form-group label { font-weight: normal; }


.carddav-header-flex {
    display: flex;
    align-items: center;
    gap: 10px;
}

.carddav-header-left  { flex: 1; min-width: 200px; }
.carddav-header-center{ flex: 1; text-align: center; font-weight: 600; }
.carddav-header-right { flex: 1; text-align: right; }

#card-table tbody tr { border-bottom: 2px solid black; }

.btn-arrows[disabled] { opacity: .3; cursor: default; }
        
.wm-page-info { 
    display:inline-block; 
    min-width: 90px; 
    text-align:center; 
}

.modal .form-group label { font-weight: normal; }

.carddav-search { 
    max-width: 360px; 
    display:flex; 
    gap:6px; 
    align-items:center;
    height: 30px;
}

.carddav-search input[type="text"] { height: 34px; }

.quota {
z-index:99;
height:14px;
position: absolute;
}

.quota_text {
  z-index:100;
  text-align: center;
  font-size: 12px;
  color: #666;
  cursor: default;
  position: absolute;
  width:120px;
  height:16px;
  margin-top:-17px;
  padding-top: 0px;
}

.quota_bg { background-color: white; z-index:98; width:122px; height:16px;margin-top:-1px;margin-left:-1px;   border: 1px solid #999;}
.quota_no_border { border:none; margin:0; }
.quota_high { background: url(../images/quota-colors.png) repeat-x 0 -28px #f90509; }
.quota_mid  { background: url(../images/quota-colors.png) repeat-x 0 -14px #e3e909; }
.quota_low  { background: url(../images/quota-colors.png) repeat-x 0 0px #05f905; }
.quota_text_high { color: white; }
.quota_text_mid { color: #666; }
.quota_text_low { color: #666; }

.f1 {
    margin-bottom: 10px;
}