/*
select { border: 1px solid #999; background: #fff; color: #333; padding: 3px 4px 3px 1px; height: 30px; margin: 0 5px 0 0; font: 16px Arial, sans-serif; min-width: 267px; }
select optgroup option { padding-left: 20px; }
select:disabled { background: white; color: #888; border: 1px solid #ccc; }
textarea { border: 1px solid #999; background: #fff; color: #555; font: 14px/20px Arial, Sans-Serif; padding: 3px; margin: 0 5px 0 0; width: 500px; }
input.datepicker { border: none; background: none; color: green; font-weight: bold; padding: 0; width: 160px; }
.checkbox { margin: 0 5px 0 0; width: 100px; height: 28px; background: #ececec; border: 1px solid #999; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; position: relative; }
.checkbox input[type=checkbox] { visibility: hidden; }
.checkbox:after { content: 'NO'; font: 16px/28px Tahoma, sans-serif; color: #777; position: absolute; right: 12px; z-index: 0; }
.checkbox:before { content: 'YES'; font: 16px/28px Tahoma, sans-serif; color: #308104; position: absolute; left: 12px; z-index: 0; }
.checkbox label { display: block; width: 47px; height: 24px; border: 1px solid #aaa; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; -o-transition: all .4s ease; -ms-transition: all .4s ease; transition: all .4s ease; cursor: pointer; position: absolute; top: 1px; left: 1px; z-index: 1; background: #fff; }
.checkbox input[type=checkbox]:checked + label { left: 50px; }
.richarea { background: #f2f2f2; padding-top: 1px; border: 1px solid #bbb; }
.richarea > button { padding: 0 8px !important; margin: 3px 0 3px 2px !important; float: left; font: 12px/20px Verdana, Sans-Serif !important; color: #222 !important; background: #fff !important; border: 1px solid #999 !important; border-radius: 0 !important; min-width: 0 !important; text-transform: none !important; }
.richarea > button:hover { background: #ccc !important; cursor: pointer; }
.richarea > div { clear: both; padding: 5px 10px; background: #fff; color: #666; font: 13px/16px Arial, Sans-Serif; min-height: 70px; border-top: 1px solid #bbb; overflow: auto; }
.richarea > div ol { padding: 10px 0 10px 19px; }
.richarea > div ul { padding: 10px 0 10px 15px; }
.richarea > div li { color: #666; font: 13px/18px Arial, Sans-Serif; }
.richarea > div a { color: #d05c04; text-decoration: underline; }
.richarea > div .heading { color: #000; font: bold 20px/16px Arial, Sans-Serif; }
*/

/*
body .form h2 { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin: 20px -20px 0 -15px; }
body .form button { border-radius: 3px; font: 12px Verdana, Sans-Serif; padding: 7px; min-width: 60px; color: #777; background: #f2f2f2; border: 1px solid #ccc; text-transform: uppercase; }
body .form button:hover { background: #fff; cursor: pointer; }
body .form a.button { display: inline; border-radius: 3px; font: 12px Verdana, Sans-Serif; padding: 3px 10px; margin: 15px 0 0 5px; min-width: 60px; text-align: center; color: #777; background: #f2f2f2; border: 1px solid #ccc; text-transform: uppercase; position: relative; }
body .form a.button:hover { background: #fff; cursor: pointer; }
body .form a.button { display: inline; border-radius: 3px; font: 12px Verdana, Sans-Serif; padding: 3px 10px; margin: 15px 0 0 5px; min-width: 60px; text-align: center; color: #777; background: #f2f2f2; border: 1px solid #ccc; text-transform: uppercase; position: relative; }
*/

table.info-1 { width: 100%; }
table.info-1 > tbody > tr > th { background: #fff; padding: 10px 20px; font: bold 14px/14px "Courier New", sans-serif !important; color:#666; border-bottom: 1px solid #bbb; text-transform:uppercase; }
table.info-1 > tbody > tr > td.info-name { background: #f8f8f8; color: #888; font: bold 14px/14px "Courier New", sans-serif !important; padding: 7px 0 5px 0; text-align: center; border-bottom: 1px solid #ccc; text-transform:uppercase; }
table.info-1 > tbody > tr > td.info-value { background: white; color: #000; padding: 15px 20px; font: 14px/14px "Courier New", sans-serif !important; text-align: center; vertical-align:top; border-bottom: 1px solid #ccc; }
table.info-1 > tbody > tr > td.info-value img { border: 1px solid #ccc; max-width: 600px; }
table.info-1 > tbody > tr > th:nth-child(2) { border-left:3px double #bbb; }
table.info-1 > tbody > tr > td:nth-child(2) { border-left:3px double #ccc; }
table.info-1 > tbody > tr:last-child > td { border-bottom:1px solid #bbb; }
table.info-1 > tbody > tr > td > ol > li  {font: 16px/16px "Courier New", sans-serif !important;}
table.info-1 > tbody > tr > td > ol > li > p {font: 16px/16px "Courier New", sans-serif !important;}
table.info-1 > tbody > tr > td > b {font: bold 14px/14px "Courier New", sans-serif !important;}

    ::marker {
        font: bold 16px/16px "Courier New", sans-serif !important;
    }
table.info-2 { width: 100%; }
table.info-2 > tbody > tr > td > p {font: 14px/14px "Courier New", sans-serif !important; margin-bottom: 4px !important;  }
table.info-2 > tbody > tr > td > p strong{font: bold 14px/14px "Courier New", sans-serif !important;  }
table.info-2 > tbody > tr > td > ol > li {font: 16px/16px "Courier New", sans-serif !important; }
table.info-2 > tbody > tr > td > ol > li > h1{font: bold 16px/16px "Courier New", sans-serif !important; color:#000  }
table.info-2 > tbody > tr > td > ol > li > p {font: 16px/16px "Courier New", sans-serif !important;}
table .info-2 > tbody > tr > td > p > a {font: 14px/14px "Courier New", sans-serif !important;}
table.info-2 > tbody > tr > td > h1{font: bold 16px/16px "Courier New", sans-serif !important; color: #000;  }
table.info-2 > tbody > tr > td:nth-child(1) { background: #ddd; color: #000;width: 200px; font: bold 14px/14px "Courier New", sans-serif !important; padding: 7px 0 5px 0; text-align: center; border-bottom: 2px double #fff; text-transform:uppercase; }
table.info-2 > tbody > tr > td:nth-child(2) { background: white; border-bottom: 2px double #ddd; }
table.info-2 > tbody > tr > td:nth-child(2) span.arrow { display: inline-block; width: 0px; height: 0px; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 15px solid #ddd; margin: 8px 0; }
table.info-2 > tbody > tr > td:nth-child(3) { background: white; color: #000; padding: 15px 20px; font:bold 14px/14px "Courier New", sans-serif !important; text-align: center; border-bottom: 2px double #ddd; }
table.info-2 > tbody > tr > td:nth-child(3) img { border: 1px solid #ccc; max-width: 600px; }
table.info-2 > tbody > tr:last-child > td { border-bottom:1px solid #ddd; }

table.info-3 { width: 100%; }
table.info-3 > tbody > tr > th { font: 14px/14px "Courier New", sans-serif !important; text-transform: uppercase; color: #666; padding: 10px 10px; border-top:1px solid #ddd; border-bottom:1px solid #ddd; background: #fff; }
table.info-3 > tbody > tr > th:nth-child(2) { border-left:1px dashed #ddd; }
table.info-3 > tbody > tr > td:nth-child(1) { background: #ddd; color: #000; width: 200px; font: 14px/14px "Courier New", sans-serif !important; padding: 7px 0 5px 0; text-align: center; border-top: 1px solid #fff; text-transform:uppercase; }
table.info-3 > tbody > tr > td:nth-child(2) { background: #fafafa; border-top: 1px solid #ddd; width: 20px; }
table.info-3 > tbody > tr > td:nth-child(2) span.arrow { display: inline-block; width: 0px; height: 0px; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 15px solid #ddd; margin: 8px 0; }
table.info-3 > tbody > tr > td:nth-child(3) { background: #fafafa; color: #000; padding: 15px 20px; font: 14px/14px "Courier New", sans-serif !important; text-align: center; border-top: 1px solid #ddd; }
table.info-3 > tbody > tr > td:nth-child(3) img { border: 1px solid #ccc; }
table.info-3 > tbody > tr:first-child > td { border-top:1px solid #ddd; }
table.info-3 > tbody > tr:last-child > td { border-bottom:1px solid #ddd; font: 14px/14px "Courier New", sans-serif !important; }
table.info-3 > tbody > tr > td > i  {font: 14px/14px "Courier New", sans-serif !important;}
table.info-3 > tbody > tr > td > i > a { font: 14px/14px "Courier New", sans-serif !important;}
table.info-3 > tbody > tr > td > a {font: 14px/14px "Courier New", sans-serif !important;}

table.info-4 { width: 100%; border-bottom:1px solid #ddd; }
table.info-4>tbody>tr>th { font: 14px/14px "Courier New", sans-serif !important; text-transform: uppercase; color: #666; padding: 10px 10px; border-top:1px solid #ddd; border-bottom:1px solid #ddd; background: #fff; }
table.info-4>tbody>tr>th:last-child { border-left:1px dashed #ddd; }
table.info-4>tbody>tr>td:first-child { background: #ddd; color: #000; width: 200px; font: 14px/14px "Courier New", sans-serif !important; padding: 7px 0 5px 0; text-align: center; border-top: 1px solid #fff; text-transform:uppercase; }
table.info-4>tbody>tr>td:last-child { background: #fafafa url(info-arrow.png) left center no-repeat; color: #000; padding: 15px 20px; font: 14px/14px "Courier New", sans-serif !important; text-align: center; border-top: 1px solid #ddd; }
table.info-4>tbody>tr>td:last-child img { border: 1px solid #ccc; }
table.info-4>tbody>tr>td:last-child .large-green { border: 1px solid #ccc; }
table.info-4>tbody>tr:first-child>td { border-top:1px solid #ddd; }


.popup-with-close-option, .popup-confirmation, .popup-notification, .popup-process { height: 100%; width: 100%; background: url(popup-bg.png); position: fixed; top: 0; left: 0; z-index: 1000; display: none; }
    /*
.popup-with-close-option>div { position: absolute; top: 100px; left: 300px;*/ /*border-radius: 5px;*/ /*border: 1px solid #888; min-width: 300px; min-height: 200px; margin: auto; background-color: #f2f2f2; }*/

/*.popup-with-close-option > div h1 { font: 20px Arial, Sans-Serif; text-align: left; color: #444; text-transform: uppercase; padding: 17px 70px 13px 20px; background: #f2f2f2; border-bottom: 1px solid #bbb; }*/

.popup-with-close-option > div .button, .popup-confirmation > div button { display: block; margin: 10px 20px 15px 20px; font: 16px Arial, sans-serif; text-transform: uppercase; text-align: center; color: #555; padding: 6px 20px; border: 1px solid #999; border-radius: 3px; background: #fff; width: initial; min-width: 120px; }
.popup-with-close-option > div .button:hover, .popup-confirmation > div button:hover { color: #000; border-color: #555; background: #ccc; color: #333; cursor: pointer; }

.popup-with-close-option .data-list { margin: 0 0 14px 0; }
.popup-with-close-option .data-list > div:last-child { border-bottom: 1px solid #bbb; }
.popup-with-close-option .data-list > div { background: #fff; }
/*
.popup-with-close-option .data-list > div:hover { background: #fafaf6 !important; cursor: pointer; }*/

/*.popup-with-close-option > div input[type=text], .popup-with-close-option > div input[type=tel], .popup-with-close-option > div input[type=email], .popup-with-close-option > div input[type=password] { border: 1px solid #999; background: #fff; color: #333; font: 16px Arial, Sans-Serif; padding: 3px; height: 22px; margin: 0 10px 10px 20px; min-width: 300px; }*/

.popup-with-close-option > div select { border: 1px solid #999; background: #fff; color: #333; padding: 3px 4px 3px 1px; height: 30px; margin: 0 10px 10px 20px; font: 16px Arial, sans-serif; min-width: 308px; }
.popup-with-close-option > div textarea { border: 1px solid #999; background: #fff; color: #333; font-size: 1.2em; padding: 5px; margin: 0 20px 10px 20px; width: 450px; }
.popup-with-close-option > div label.caption { display: block; margin: 0 20px; }
.popup-with-close-option > div label.caption .required { color: #fa1212; padding: 0 5px; }
.popup-with-close-option > div label.error { color: #fa1212; font: 12px Verdana, sans-serif; margin: 0 20px 0 0; }

.popup-with-close-option>div .popup-close { position: absolute; background-image: url(popup-close.png); background-position: center center; background-repeat: no-repeat; right: -10px; top: -10px; cursor: pointer; width: 60px; height: 60px; }
.popup-with-close-option>div .popup-close:hover { background-image: url(popup-close-hover.png); }

.popup-notification>div { position: absolute; padding: 20px 50px; top: 100px; left: 300px; border: 1px solid #aaa; margin: auto; background-color: white; font: 30px Arial, Sans-Serif; color: #777; text-transform: uppercase; text-align: center; }

.popup-process > div { height: 100%; width: 100%; background: url(popup-process.gif) center center no-repeat; position: fixed; top: 0; left: 0; }

.popup-templates { display: none; }

.popup-with-close-option .select-file .data-grid { height: 100px !important; }
.popup-with-close-option .select-file .data-grid td { border-left: none; border-right: none; }

.popup-with-close-option .data-grid>tbody>tr:last-child>td { border-bottom: none; }
.popup-with-close-option .select-file .popup-files { max-height: 407px; overflow: auto; }
.popup-with-close-option .select-file .data-grid tr .buttons button { cursor: pointer; }
.popup-with-close-option .select-file .data-grid tr:hover .buttons button { display: inline; }

.black { color: #000 !important; }
.blue { color: #0354fb !important; }
.green { color: #439304 !important; }
.grey { color: #aaa !important; }
.orange { color: #b97203 !important; }
.red { color: #fa1212 !important; }
.bold { font-weight: bold !important; }

input[type=text].error { background: #570202 url(invalid-bg.png) right 2px top 1px no-repeat; color: #fff; }
select.error { background: #bd0202 url(invalid-bg.png) right 20px top 3px no-repeat; color: #fef7d6; }
select.error option, .right form.lead-form select.error optgroup { background: #fff; }
*[onclick] { cursor: pointer; }


/* update BP */


.data-list {
    flex: 1 1 auto;
  /*   border-radius: 5px;  
    border: 1px solid #999999;
    margin: 20px;*/
    min-width: 200px;
}
    .data-list ul i.far, .data-list ul i.fas, .data-list ul i.fab {
        font-size: 2em;
        margin-right: 0.2em;
        width: 40px;
        text-align: center;
        height: 40px;
        color: #000;
        line-height: 40px;
    }
header div.portal {
    position: absolute;
    top: 0px;
    right: 0;
    padding: 26px 20px 0 20px;
    background: white;
    height: 24px;
    min-width: 70px;
    border-left: 1px solid #999;
    border-top: none;
    border-bottom: 1px solid #999;
    font: 14px/24px Tahoma, Sans-Serif;
  /*  font:  bold 11px/12px Arial, sans-serif;*/
    color: #666;
    border-radius: 0px 0 0 20px;
    text-transform: uppercase;
    border: none;
}

div.portal div.slide a {
    background:none;
    padding: 10px 0 10px 20px !important;
}
div.portal div.slide a.logout:hover,
div.portal div.slide a.logout,
header div.portal div.slide a.leave,
header div.portal div.slide a.leave:hover,
header div.portal div.slide a.settings
 {
    background:none;
}
.data-list ul {
    display: flex;
    flex-wrap: wrap;
}
.data-list ul li {
    flex: 0 1 20%;
    min-width: 200px;
    /*font-size: 1.1em;*/
    font-size:14px;
    margin: 0;
    padding: 14px 25px;
    list-style: none;
}
    .data-list ul li a {
        width: 100%;
        display: flex;
        align-items: center;
        box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.05);
        padding: 16px 8px;
    }
.data-list ul a:hover span{
	text-decoration: underline;
}
    .data-list ul a:hover i {
        text-decoration: none;
    }


.data-list ul li a:hover * {
    color: #ca6165 !important;
}
/*    .data-list ul li a:hover {
        background-color: #ECECEC;
    }*/
    
    .tools .multibutton {
        /* border-radius: 5px;*/
    }
.tools .multibutton:hover {
    /*border-radius: 5px 5px 0 0;*/
}
table.info-strip>tbody>tr>td.button>a {
    width: 96%;
    display: block;
}
ul.data-tree li a.button,
table.data-grid>tbody>tr>td.button> a {
    padding: 7px 10px;
    background: #f2f2f2;
    border: 1px solid #999999;
   /* border-radius: 5px;*/
    margin: 7px 2px;
    box-sizing: border-box;
    font: 12px/14px Tahoma,sans-serif;
    height: 30px;
    color: #585858;
  /*  display: flex;*/
    flex-direction: column;
    justify-content: center;
    text-transform: uppercase;
}

table.info-strip > tbody > tr > td.button > a {
    padding: 7px 10px;
    background: #f2f2f2;
    border: 1px solid #999999;
  
    margin: 7px 2px;
    box-sizing: border-box;
    font: 12px/14px Tahoma, sans-serif;
    height: 30px;
    color: #585858;
 
    flex-direction: column;
    justify-content: center;
    text-transform: uppercase;
}

ul.data-tree li a.button:hover,
table.info-strip > tbody > tr > td.button > a:hover,
table.data-grid > tbody > tr > td.button:hover {
}
table.info-strip>tbody>tr>td.button {
	background: none;
}
table.data-grid>tbody>tr>td.button {
	background: #f5f2ed;
	background: none;
}

.preview_screen{
    position: absolute;
    right: 43px;
    top: 60px;
    z-index: 1;
}
table.data-grid>tbody>tr>td.button>a{
    padding: 2px 12px !important;
}

.gray_input {
    background-color: #e5e7e9 !important;
}

@media only screen and (max-width: 800px) {
    .data-list ul li{
        flex-grow:1;
    }
}


@media only screen and (max-width: 400px) {
    table.info-2 {width : 400px }
    table.info-1 {width: 400px }
    /*.tools { width: 400px }*/
}