@font-face { font-family: open-sans;font-style: normal;font-weight: 100;src: url( "../fonts/open-sans/open-sans-light.ttf" ), url( "../fonts/open-sans/open-sans-light.eot" ) format( 'truetype' ); } @font-face { font-family: open-sans;font-style: normal;font-weight: 400;src: url( "../fonts/open-sans/open-sans.ttf" ), url( "../fonts/open-sans/open-sans.eot" ) format( 'truetype' ); } @font-face { font-family: open-sans;font-style: normal;font-weight: 700;src: url( "../fonts/open-sans/open-sans-bold.ttf" ), url( "../fonts/open-sans/open-sans-bold.eot" ) format( 'truetype' ); } @font-face { font-family: open-sans;font-style: italic;font-weight: 100;src: url( "../fonts/open-sans/open-sans-light-italic.ttf" ), url( "../fonts/open-sans/open-sans-light-italic.eot" ) format( 'truetype' ); } @font-face { font-family: open-sans;font-style: italic;font-weight: 400;src: url( "../fonts/open-sans/open-sans-italic.ttf" ), url( "../fonts/open-sans/open-sans-italic.eot" ) format( 'truetype' ); } @font-face { font-family: open-sans;font-style: italic;font-weight: 700;src: url( "../fonts/open-sans/open-sans-bold-italic.ttf" ), url( "../fonts/open-sans/open-sans-bold-italic.eot" ) format( 'truetype' ); } @font-face { font-family: aeroportal;font-style: normal;font-weight: 100;src: url( "../fonts/aeroportal/aeroportal-light.ttf" ), url( "../fonts/aeroportal/aeroportal-light.eot" ) format( 'truetype' ); } @font-face { font-family: aeroportal;font-style: normal;font-weight: 400;src: url( "../fonts/aeroportal/aeroportal.ttf" ), url( "../fonts/aeroportal/aeroportal.eot" ) format( 'truetype' ); } @font-face { font-family: aeroportal;font-style: normal;font-weight: 700;src: url( "../fonts/aeroportal/aeroportal-bold.ttf" ), url( "../fonts/aeroportal/aeroportal-bold.eot" ) format( 'truetype' ); } @font-face { font-family: gotham;font-style: normal;font-weight: 100;src: url( "../fonts/gotham/gotham-light.ttf" ), url( "../fonts/gotham/gotham-light.eot" ) format( 'truetype' ); } @font-face { font-family: gotham;font-style: normal;font-weight: 400;src: url( "../fonts/gotham/gotham.ttf" ), url( "../fonts/gotham/gotham.eot" ) format( 'truetype' ); } @font-face { font-family: gotham;font-style: normal;font-weight: 700;src: url( "../fonts/gotham/gotham-bold.ttf" ), url( "../fonts/gotham/gotham-bold.eot" ) format( 'truetype' ); } @font-face { font-family: gotham;font-style: italic;font-weight: 100;src: url( "../fonts/gotham/gotham-light-italic.ttf" ), url( "../fonts/gotham/gotham-light-italic.eot" ) format( 'truetype' ); } @font-face { font-family: gotham;font-style: italic;font-weight: 400;src: url( "../fonts/gotham/gotham-italic.ttf" ), url( "../fonts/gotham/gotham-italic.eot" ) format( 'truetype' ); } @font-face { font-family: gotham;font-style: italic;font-weight: 700;src: url( "../fonts/gotham/gotham-bold-italic.ttf" ), url( "../fonts/gotham/gotham-bold-italic.eot" ) format( 'truetype' ); } @font-face { font-family: roboto;font-style: normal;font-weight: 100;src: url( "../fonts/roboto/roboto-light.ttf" ), url( "../fonts/roboto/roboto-light.eot" ) format( 'truetype' ); } @font-face { font-family: roboto;font-style: normal;font-weight: 400;src: url( "../fonts/roboto/roboto.ttf" ), url( "../fonts/roboto/roboto.eot" ) format( 'truetype' ); } @font-face { font-family: roboto;font-style: normal;font-weight: 700;src: url( "../fonts/roboto/roboto-bold.ttf" ), url( "../fonts/roboto/roboto-bold.eot" ) format( 'truetype' ); } @font-face { font-family: roboto;font-style: italic;font-weight: 100;src: url( "../fonts/roboto/roboto-light-italic.ttf" ), url( "../fonts/roboto/roboto-light-italic.eot" ) format( 'truetype' ); } @font-face { font-family: roboto;font-style: italic;font-weight: 400;src: url( "../fonts/roboto/roboto-italic.ttf" ), url( "../fonts/roboto/roboto-italic.eot" ) format( 'truetype' ); } @font-face { font-family: roboto;font-style: italic;font-weight: 700;src: url( "../fonts/roboto/roboto-bold-italic.ttf" ), url( "../fonts/roboto/roboto-bold-italic.eot" ) format( 'truetype' ); } @font-face { font-family: brandon;font-style: normal;font-weight: 100;src: url( "../fonts/brandon/brandon-light.ttf" ), url( "../fonts/brandon/brandon-light.eot" ) format( 'truetype' ); } @font-face { font-family: brandon;font-style: normal;font-weight: 400;src: url( "../fonts/brandon/brandon.ttf" ), url( "../fonts/brandon/brandon.eot" ) format( 'truetype' ); } @font-face { font-family: brandon;font-style: normal;font-weight: 700;src: url( "../fonts/brandon/brandon-bold.ttf" ), url( "../fonts/brandon/brandon-bold.eot" ) format( 'truetype' ); } @font-face { font-family: brandon;font-style: italic;font-weight: 100;src: url( "../fonts/brandon/brandon-light-italic.ttf" ), url( "../fonts/brandon/brandon-light-italic.eot" ) format( 'truetype' ); } @font-face { font-family: brandon;font-style: italic;font-weight: 400;src: url( "../fonts/brandon/brandon-italic.ttf" ), url( "../fonts/brandon/brandon-italic.eot" ) format( 'truetype' ); } @font-face { font-family: brandon;font-style: italic;font-weight: 700;src: url( "../fonts/brandon/brandon-bold-italic.ttf" ), url( "../fonts/brandon/brandon-bold-italic.eot" ) format( 'truetype' ); } html,body,div,span,td,tr,th,tbody,thead,tfoot,font,iframe,blockquote,a,pre,img,input,textarea,select,h1,h2,h3,h4,h5,h6,ol,ul,li,p,label,b,i,center,strong,footer,header,section,time,article,code,aside,em,figure,embed,hr,dl,dt,dd,fieldset,nav,sub { margin: 0; padding: 0; border: 0; font: inherit; color: inherit; font-size: inherit; text-decoration: none; font-variant: normal; letter-spacing: inherit; word-spacing: inherit; line-height: inherit; vertical-align: baseline; outline: none; box-sizing: border-box; -webkit-tap-highlight-color: transparent;  } .row { display: block; clear: both;  } .row:after { display: block; width: 100%; height: 0; content: ""; clear: both;  } .col { position: relative; float: left; padding: 0 15px 0 15px;  } .col-np { position: relative; float: left;  } .col-lp-min { padding-left: 15px;  } .col-rp-min { padding-right: 15px;  } .col-tp-min { padding-top: 15px;  } .col-bp-min { padding-bottom: 15px;  } .col-lp-med { padding-left: 25px;  } .col-rp-med { padding-right: 25px;  } .col-tp-med { padding-top: 25px;  } .col-bp-med { padding-bottom: 25px;  } .col-lp-max { padding-left: 40px;  } .col-rp-max { padding-right: 40px;  } .col-tp-max { padding-top: 40px;  } .col-bp-max { padding-bottom: 40px;  } .col-1 { width: 8.33%;  } .col-2 { width: 16.66%;  } .col-3 { width: 25%;  } .col-4 { width: 33.33%;  } .col-5 { width: 41.66%;  } .col-6 { width: 50%;  } .col-7 { width: 58.33%;  } .col-8 { width: 66.66%;  } .col-9 { width: 75%;  } .col-10 { width: 83.33%;  } .col-11 { width: 91.66%;  } .col-12 { width: 100%;  } .calendar { position: fixed; display: none; left: 50%; top: 50%; z-index: 12; width: 258px; margin: 0; padding: 0 0 10px 0; text-transform: uppercase; overflow: hidden; border-radius: 3px; background-color: #ffffff; box-shadow: 2px 5px 20px 0 rgba( 0, 0, 0, 0.2 ), 0 6px 6px 0 rgba( 0, 0, 0, 0.3 ); transform: translate( -50%, -50% );  } .calendar .cal-nav { display: block; width: 100%; height: 50px; margin: 0 0 0 0; padding: 10px 20px 0 20px; line-height: 40px; color: #202b4b; font-size: 14px; text-align: center; background-color: #f5f5f5;  } .calendar .cal-nav div { float: left; font-weight: bold; margin: 0 10px 0 0; cursor: pointer;  } .calendar .cal-nav span { position: relative; display: block; float: right; width: 30px; height: 40px; cursor: pointer; opacity: 0.7;  } .calendar .cal-nav span:after { position: absolute; top: 14px; display: block; width: 8px; height: 8px; border-top: 2px solid #202b4b; content: "";  } .calendar .cal-nav span:not(:last-child):after { right: 5px; border-right: 2px solid #202b4b; transform: rotate( 45deg );  } .calendar .cal-nav span:last-child:after { left: 5px; border-left: 2px solid #202b4b; transform: rotate( -45deg );  } .calendar .cal-nav span:hover { opacity: 1;  } .calendar ol { display: block; width: 100%; height: 40px; margin: 0 0 10px 0; padding: 0 10px 0 10px; list-style-type: none; color: #f58220; background-color: #f5f5f5;  } .calendar ol li { position: relative; float: left; width: 34px; height: 40px; line-height: 40px; margin: 0; padding: 0; font-weight: normal; font-size: 14px; text-align: center;  } .calendar ol li:last-child { border-right: 0;  } .calendar ul { display: block; width: 100%; margin: 0; padding: 0 10px 0 10px; list-style-type: none; background-color: #ffffff;  } .calendar ul:after { display: block; width: 100%; height: 0; clear: both; content: "";  } .calendar ul li { position: relative; float: left; width: 34px; height: 34px; margin: 0; padding: 0; line-height: 34px; font-weight: normal; color: #aaaaaa; font-size: 14px; text-align: center;  } .calendar ul .day { cursor: pointer; font-weight: bold; color: #202b4b; border-radius: 50%;  } .calendar ul .day:hover { color: #000000; background-color: #f0f0f0;  } .calendar ul .sel { color: #ffffff; background-color: #202b4b;  } .calendar ul .today { color: #f58220;  } .calendar .cal-frame { position: absolute; z-index: 12; display: none; top: 60px; left: 0; width: 100%; height: 100%; padding: 40px 5px 0 5px; background-color: #ffffff;  } .calendar .cal-frame:after { display: block; width: 100%; height: 0; clear: both; content: "";  } .calendar .cal-frame span { display: block; float: left; width: 33.33%; padding: 5px;  } .calendar .cal-frame strong { display: block; background-color: #f5f5f5; font-size: 14px; border-radius: 4px; line-height: 34px; font-weight: bold; font-style: normal; text-align: center; color: #202b4b; text-transform: none; cursor: pointer; opacity: 0.8;  } .calendar .cal-frame strong:hover { opacity: 1;  } .calendar .cal-frame .sel strong { background-color: #202b4b; color: #ffffff;  } .calendar .cal-footer { display: block; height: 25px; padding: 5px 0 0 20px; line-height: 15px;  } .calendar .cal-footer span { display: block; float: left; margin: 0 10px 0 0; font-weight: bold; font-size: 12px; color: #202b4b; cursor: pointer;  } .calendar .cal-footer span:hover { color: #f58220;  } .cb,.cbs { position: relative; display: block; width: 20px; height: 20px; cursor: pointer; border-radius: 3px;  } .cb { border: 2px solid #202b4b;  } .cbs { background-color: #202b4b;  } .cbs:after { position: absolute; top: 2px; left: 6px; display: block; width: 5px; height: 10px; content: ""; border-right: 2px solid #ffffff; border-bottom: 2px solid #ffffff; transform: rotate( 40deg );  } .cb:hover { border: 2px solid #303b5b;  } .cbs:hover { background-color: #303b5b;  } #loading { position: fixed; z-index: 15; top: 0; left: 0; display: block; width: 100%; height: 100%; background-color: rgba( 0, 0, 0, 0.2 );  } #loading:before { position: absolute; top: 50%; left: 50%; display: block; width: 80px; height: 80px; margin: -40px -40px; content: ""; border-radius: 50%; border: 5px solid #1865d6; border-top-color: #e14c31; border-right-color: #3fa34d; border-bottom-color: #f5ab30; animation: spinner .6s linear infinite; box-sizing: border-box;  } #popup { position: fixed; z-index: 13; display: none; top: 0; left: 0; width: 100%; height: 100%; padding: 0; background-color: rgba( 0, 0, 0, 0.2 );  } #popup section { position: absolute; top: 50%; left: 50%; display: block; max-width: 600px; width: calc( 100% - 40px ); padding: 0; overflow: hidden; background-color: #ffffff; transform: translate( -50%, -80% );  } #popup header { display: block; height: 55px; padding: 0 0 0 20px; line-height: 50px; color: #2b2e4f; font-size: 18px; font-weight: bold;  } #popup header span { position: relative; display: block; float: right; width: 50px; height: 50px; cursor: pointer;  } #popup header span:before,#popup header span:after { position: absolute; top: 24px; left: 15px; display: block; width: 20px; height: 2px; background-color: #2b2e4f; content: ""; opacity: 0.5;  } #popup header span:before { transform: rotate( -45deg );  } #popup header span:after { transform: rotate( 45deg );  } #popup header span:hover:before,#popup header span:hover:after { opacity: 1;  } #popup .error { border-top: 5px solid #d04030;  } #popup .success { border-top: 5px solid #7cb644;  } #popup .warning { border-top: 5px solid #eea510;  } #popup article { display: block; min-height: 80px; padding: 20px; font-size: 16px; color: #70757a; line-height: 150%; background-color: #ffffff; overflow: hidden; clear: both;  } #popup label { float: left; line-height: 20px;  } #popup .row { display: block; padding: 20px 0 20px 0;  } #popup footer { display: block; height: 80px; margin: 0; padding: 20px 20px 20px 20px; clear: both; border-top: 2px solid #e5e5e7; background-color: #f8f8fa;  } #popup footer span { position: relative; display: block; float: left; min-width: 100px; height: 40px; padding: 0 15px 0 15px; line-height: 36px; font-weight: bold; cursor: pointer; text-align: center; text-transform: uppercase; border-radius: 3px; overflow: hidden; color: #9ba8b0; border: 2px solid #9ba8b0;  } #popup footer span:hover { background-color: #f0f0f0;  } #popup footer span:nth-child( 2 ) { float: right;  } .off,.on { position: relative; display: inline-block; width: 40px; height: 16px; border-radius: 16px; background-color: #969696; cursor: pointer;  } .off:before,.on:before { position: absolute; top: -2px; left: -2px; display: block; width: 20px; height: 20px; content: ""; box-shadow: 0px 3px 1px -2px rgba( 0, 0, 0, 0.2 ), 0px 2px 2px 0px rgba( 0, 0, 0, 0.14 ), 0px 1px 5px 0px rgba( 0, 0, 0, 0.12 ); border-radius: 50%; background-color: #f0f0f0; transition: all 0.1s ease-in-out;  } .on { background-color: #6ac259;  } .on:before { top: -2px; left: 20px; background-color: #579e49;  } .off:after { position: absolute; top: -12px; left: -12px; display: block; width: 40px; height: 40px; content: ""; border-radius: 50%; background-color: rgba( 0, 0, 0, 0.1 ); transition: opacity 0.3s ease-in-out; opacity: 0;  } .on:after { position: absolute; top: -12px; left: 10px; display: block; width: 40px; height: 40px; content: ""; border-radius: 50%; background-color: rgba( 24, 130, 94, 0.3 ); transition: opacity 0.3s ease-in-out; opacity: 0;  } .off:hover:after,.on:hover:after { opacity: 1;  } html {  } body { min-height: 100vh; background-color: #f8f6f7; font-size: 14px; font-family: roboto, helvetica, arial; text-align: left;  } #loadtime { display: none;  } #content { display: block; margin: 0 0 0 80px; padding: 102px 0 0 0;  } strong { font-weight: bold;  } #blacklist { position: absolute; width: 100%; height: 100%; overflow: hidden; text-align: center; background-color: #000000;  } #blacklist h1 { margin: 0 10px 20px 10px; padding: 100px 0 0 0; font-size: 48px; color: #ff0000; line-height: 100%; font-weight: lighter; letter-spacing: 5px;  } #blacklist p { margin: 0 10px 0 10px; font-size: 18px; text-transform: uppercase; color: #ffffff; line-height: 150%; font-weight: lighter;  } #blacklist a:hover { color: #f00000;  } #page-not-found { position: relative; max-width: 320px; margin: 0 auto 0 auto; padding: 50px 0 100px 0;  } #page-not-found img { display: block; width: 240px; height: 240px; margin: 0 auto 0 auto; clear: both; opacity: 0.1;  } #page-not-found h2 { display: block; margin: 0 0 10px 0; clear: both; color: #202b4b; font-size: 30px; text-transform: uppercase; font-weight: bold; text-align: center; opacity: 0.2;  } #page-not-found p { display: block; margin: 0 0 10px 0; clear: both; color: #202b4b; font-size: 14px; line-height: 22px; text-transform: uppercase; font-weight: bold; text-align: center; opacity: 0.5;  } #page-not-found a { color: #c42327; opacity: 1;  } #menu { position: fixed; z-index: 12; top: 0; left: 0; width: 80px; height: 100%; background-color: #020c2e;  } #menu figure { position: relative; display: block; width: 80px; height: 70px; margin: 0 0 0 0; border-bottom: 1px solid #3b3e5f; cursor: pointer;  } #menu img { position: absolute; top: 15px; left: 20px; display: block; width: 40px; height: 40px; border: 2px solid #3b3e5f; border-radius: 50%;  } #menu img:hover { opacity: 1;  } #menu figure:hover { cursor: default; background-color: #f0f0f0;  } #menu figure:hover:after { position: absolute; z-index: 12; bottom: -5px; left: 0; display: block; width: 100%; height: 5px; background-color: #f0f0f0; content: "";  } #menu figure div { position: absolute; z-index: 12; top: 65px; left: 0; display: none; min-width: 200px; list-style: none; background-color: #f0f0f0; white-space: nowrap; border-radius: 0 5px 5px 0; overflow: hidden;  } #menu figure h3 { padding: 20px 20px 5px 20px; font-size: 20px; line-height: 20px;  } #menu figure h4 { margin: 0 20px 20px 20px; font-size: 12px; text-transform: uppercase;  } #menu ol { display: block; list-style: none;  } #menu ol li { display: block; border-top: 1px dotted #d0d0d0;  } #menu ol li a { display: block; padding: 0 20px 0 20px; line-height: 40px; text-transform: uppercase;  } #menu ol li a:hover { background-color: #e0e0e0;  } #menu ol li:last-child { border: 0; color: #ffffff; background-color: #ee2c23;  } #menu ol li:last-child:hover a { background-color: #fe1c13;  } #menu figure:hover div { display: block;  } #menu ul { display: block; list-style: none;  } #menu ul li { position: relative; display: block; width: 80px; height: 70px; color: #a9acae; border-bottom: 1px solid #222c4e; transition: all 0.25s ease-in-out;  } #menu ul li:hover { background-color: #424c6e;  } #menu ul span { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; padding: 0; cursor: pointer; outline: 0;  } #menu ul span:after { position: absolute; bottom: 10px; left: 0; display: block; width: 100%; line-height: 10px; content: attr( data-label ); color: rgba( 255, 255, 255, 0.5 ); font-size: 10px; text-align: center; text-transform: uppercase;  } #menu ul span:before { position: absolute; top: 0; left: 14px; width: 50px; height: 50px; content: ""; background: url( "../images/cp/cp.png" ) no-repeat 0 0; opacity: 0.5; transform: scale( 0.6 );  } #menu ul span:hover { opacity: 1;  } #menu ul .dashboard:before { background-position: -50px 0px;  } #menu ul .news:before { background-position: -100px 0px;  } #menu ul .citizens:before { background-position: -150px 0px;  } #menu ul .services:before { background-position: -200px 0px;  } #menu ul .reports:before { background-position: -250px 0px;  } #menu ul .config:before { background-position: -300px 0px;  } #menu .sel { color: #ffffff; background-color: #222c4e;  } #menu .sel:before { position: absolute; top: -1px; left: 0; display: block; width: 5px; height: calc( 100% + 2px ); background-color: #ed1c24; content: "";  } #menu .sel a:before { opacity: 1;  } #menu .sel span:after { color: #ffffff;  } #submenu { position: fixed; z-index: 9; top: 0; left: 0; display: block; width: 80px; height: 100%; padding: 0 0 0 0;  } #submenu div { position: absolute; z-index: 9; top: 0; left: -200px; display: block; width: 200px; height: 100%; padding: 0; background-color: #222c4e; transition: left 0.4s ease-in-out;  } #submenu .active { left: 80px; opacity: 1;  } #submenu h2 { display: block; margin: 0 0 10px 0; padding: 0 0 0 20px; line-height: 69px; height: 70px; font-size: 20px; color: #ffffff; text-transform: uppercase; border-bottom: 1px dotted #5b5e7f;  } #submenu ol { display: block; list-style: none;  } #submenu ol li { display: block; padding: 0 0 0 0; color: rgba( 255, 255, 255, 0.5 );  } #submenu ol li a,#submenu ol li span { display: block; padding: 10px 20px 10px 20px; font-weight: bold; border-radius: 0px; outline: none; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  } #submenu ol li a:hover,#submenu ol li span:hover { background-color: #424c6e;  } #submenu ol .sel,#submenu ol .sel:hover { color: #ffffff; border-right: 5px solid #ed1c24;  } #header { position: fixed; z-index: 8; top: 20px; left: 100px; display: none; width: calc( 100% - 120px ); height: 62px; background: #ffffff; border: 1px solid #e5e5e5; transition: all .25s ease-in-out; border-radius: 3px;  } #header h1 { position: relative; float: left; display: block; line-height: 60px; margin: 0 0 0 0; padding: 0 20px 0 50px; font-size: 16px; color: #474b55; border-right: 1px solid #e5e5e5;  } #header h1:before { position: absolute; top: 5px; left: 0; display: block; width: 50px; height: 50px; margin: 0 0 0 0; content: ""; background: url( "../images/cp/cp.png" ) no-repeat; transform: scale( 0.6 ); opacity: 0.6;  } #header h1 i { float: left; padding: 0 10px 0 0; font-style: normal;  } #header h1 span { float: left;  } #header .dashboard:before { background-position: -45px -45px;  } #header .publishers:before { background-position: -50px -150px;  } #header .tags:before { background-position: -700px -400px;  } #header .brands:before { background-position: -245px -45px;  } #header .metatypes:before { background-position: -800px -400px;  } #header .templates:before { background-position: -195px -45px;  } #header .locations:before { background-position: -350px -350px;  } #header .users:before { background-position: -300px -350px;  } #header .citizens:before { background-position: -300px -350px;  } #header .prices:before { background-position: -445px -45px;  } #header .orders:before { background-position: -395px -45px;  } #header .invoices:before { background-position: -1400px -400px;  } #header .shipping:before { background-position: -695px -45px;  } #header .shippingrates:before { background-position: -695px -45px;  } #header .shippingzones:before { background-position: -600px -400px;  } #header .transactions:before { background-position: -1300px -400px;  } #header .sites:before { background-position: -1100px -400px;  } #header .coupons:before { background-position: -495px -45px;  } #header .inventory:before { background-position: -900px -400px;  } #header .fastrequests:before { background-position: -1900px -400px;  } #header .warehouses:before { background-position: -1900px -400px;  } #header .partners:before { background-position: -1900px -400px;  } #header .ads:before { background-position: -1600px -400px;  } #header input { float: right; width: 250px; height: 60px; margin: 0 0 0 0; padding: 0 10px 0 10px; line-height: 60px; color: #445566; border-left: 1px solid #e5e5e5; background-color: transparent;  } #header .new { position: relative; float: right; display: block; height: 40px; margin: 10px 10px 0 0; padding: 0 15px 0 15px; line-height: 40px; color: #ffffff; font-weight: bold; font-size: 12px; text-transform: uppercase; background-color: #6ac259; overflow: hidden; border-radius: 3px; cursor: pointer;  } #header .new:before,#header .new:after { position: absolute; display: none; content: ""; background-color: #ffffff;  } #header .new:before { top: 19px; left: 10px; width: 20px; height: 2px;  } #header .new:after { top: 10px; left: 19px; width: 2px; height: 20px;  } #header .new:hover { background-color: #8ae279;  } #header .del { position: relative; float: right; display: block; height: 40px; margin: 10px 10px 0 0; padding: 0 55px 0 15px; line-height: 40px; color: #ffffff; font-weight: bold; font-size: 12px; text-transform: uppercase; background-color: #da2a1a; overflow: hidden; border-radius: 3px; cursor: pointer;  } #header .del:after { position: absolute; top: 0; right: 0; width: 40px; height: 40px; content: ""; background: url( "../images/cp/cp.png" ) -655px -5px #aa200a;  } #header .del:hover { background-color: #ea3a2a;  } #header .del:hover:after { background-color: #ba301a;  } #header .filter { position: relative; float: right; width: 61px; height: 60px; border-left: 1px solid #e5e5e5; cursor: pointer;  } #header .filter span { position: absolute; top: 29px; left: 25px; display: block; width: 10px; height: 2px; background-color: #000000; opacity: 0.5; transition: opacity .25s ease-in-out;  } #header .filter:before,#header .filter:after { position: absolute; display: block; height: 2px; background-color: #000000; content: ""; opacity: 0.5; transition: opacity .25s ease-in-out;  } #header .filter:before { top: 24px; left: 20px; width: 20px;  } #header .filter:after { top: 34px; left: 28px; width: 4px;  } #header .filter:hover span,#header .filter:hover:before,#header .filter:hover:after { opacity: 1;  } #header .cb,#header .cbs { position: relative; display: block; float: left; width: 61px; height: 60px; cursor: pointer; border: 0; border-right: 1px solid #e5e5e5; border-radius: 3px 0 0 3px;  } #header .cb:before { position: absolute; display: block; top: 50%; left: 50%; width: 16px; height: 16px; margin: -10px 0 0 -10px; content: ""; border: 2px solid #2b2e4f; border-radius: 3px;  } #header .cbs:after { top: 22px; left: 26px;  } #header .cb:hover:after { border: 2px solid #4b4e6f;  } #header .actions { position: relative; display: block; float: left; width: 61px; height: 60px; margin: 0; cursor: pointer; border-right: 1px solid #e5e5e5;  } #header .actions:before,#header .actions:after,#header .actions span { position: absolute; left: 28px; display: block; width: 4px; height: 4px; background-color: #000000; content: ""; border-radius: 3px; opacity: 0.5;  } #header .actions:before { top: 20px;  } #header .actions:after { bottom: 20px;  } #header .actions span { top: 28px;  } #header .actions:hover:before,#header .actions:hover:after,#header .actions:hover span { opacity: 1;  } #header .create { position: relative; float: right; width: 60px; height: 60px; border-left: 1px solid #e5e5e5; cursor: pointer;  } #header .create:before { position: absolute; display: block; top: 0; left: 0; width: 60px; height: 60px; content: ""; background: url( "../images/cp/cp.png" ) -95px -145px; opacity: 0.5; transition: opacity .25s ease-in-out;  } #header .create:hover:before { opacity: 1;  } #header .more { position: relative; float: right; width: 60px; height: 60px; border-left: 1px solid #e5e5e5; cursor: pointer;  } #header .more:before { position: absolute; display: block; top: 0; left: 0; width: 60px; height: 60px; content: ""; background: url( "../images/cp/cp.png" ) -545px -195px; opacity: 0.5; transition: opacity .25s ease-in-out;  } #header .more:hover:before { opacity: 1;  } #header .export { position: relative; float: right; width: 60px; height: 60px; border-left: 1px solid #e5e5e5; cursor: pointer;  } #header .export:before { position: absolute; display: block; top: 50%; left: 50%; width: 50px; height: 50px; margin: -25px 0 0 -25px; content: ""; background: url( "../images/cp/cp.png" ) no-repeat -400px -350px; opacity: 0.5; transition: opacity .25s ease-in-out;  } #header .export:hover:before { opacity: 1;  } #header ol { z-index: 8; position: absolute; display: none; top: 61px; left: 0; width: 150px; padding: 10px 0 10px 0; list-style: none; background: #ffffff; box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.4 ), 1px 0 1px rgba( 0, 0, 0, 0.2 ); overflow: hidden; border-radius: 0 0 3px 3px;  } #header ol:after { position: absolute; top: -61px; left: 0; display: block; width: 60px; height: 60px; content: ""; background-color: rgba( 0, 0, 0, 0.1 );  } #header ol li { display: block; padding: 0 0 0 20px; margin: 0; height: 40px; line-height: 40px; color: #2b2e4f; opacity: 1; background: none; border: 0;  } #header ol li:after { display: none;  } #header ol li:hover { background-color: #f0f0f0;  } #mini-form { z-index: 12; position: fixed; display: none; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba( 0, 0, 0, 0.5 ); transition: all .25s ease-in-out;  } #mini-form:after { display: block; width: 100%; height: 0; padding: 0; content: ""; clear: both;  } #mini-form section { position: absolute; top: 50%; left: 50%; display: block; max-width: 600px; width: 100%; border-radius: 3px; transform: translate( -50%, -50% );  } #mini-form header { display: block; height: 50px; padding: 0 0 0 20px; font-size: 18px; line-height: 50px; color: #ffffff; background-color: #2b2e4f;  } #mini-form header span { position: relative; display: block; float: right; width: 51px; height: 50px; cursor: pointer; border-left: 1px solid #3b3e5f;  } #mini-form header span:before,#mini-form header span:after { position: absolute; top: 24px; left: 15px; display: block; width: 20px; height: 2px; background-color: #ffffff; content: "";  } #mini-form header span:before { transform: rotate( -45deg );  } #mini-form header span:after { transform: rotate( 45deg );  } #mini-form header span:hover { background-color: #3b3e5f;  } #mini-form nav { display: block; height: 52px; padding: 0 0 0 20px; background-color: #f8f8fa; border-bottom: 2px solid #e5e5e7;  } #mini-form nav span { position: relative; display: block; float: left; margin: 0 30px 0 0; line-height: 50px; color: #2b2e4f; font-weight: bold; cursor: pointer; text-transform: uppercase;  } #mini-form nav .sel:after { position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background-color: #2b2e4f; content: "";  } #mini-form article { display: none; min-height: 80px; max-height: calc( 100vh - 134px ); padding: 20px 20px 0 20px ; font-size: 16px; background-color: #ffffff; overflow: auto;  } #mini-form article:after { display: block; width: 100%; height: 0; padding: 0; content: ""; clear: both;  } #mini-form .visible { display: block;  } #mini-form .hidden { display: none;  } #mini-form .uppercase { text-transform: uppercase;  } #mini-form .with-tabs article { max-height: calc( 100vh - 184px );  } #mini-form p { display: block; margin: 0 0 20px 0; clear: both; color: #454a4f; color: #707070; line-height: 150%;  } #mini-form label { display: block; margin: 0 0 5px 0; clear: both; line-height: 100%; color: #9da3a8; font-size: 14px; font-weight: bold;  } #mini-form .label-inline { display: inline-block; padding: 0 0 0 20px; line-height: 16px; vertical-align: middle;  } #mini-form em { display: block; max-width: 500px; margin: 0 0 15px 0; line-height: 150%; font-size: 14px; color: #858a8f;  } #mini-form fieldset { position: relative; display: block; max-width: 100%; margin: 0 0 30px 0; clear: both;  } #mini-form article fieldset:last-child { margin: 0 0 20px 0;  } #mini-form fieldset:after { display: block; width: 100%; height: 0; padding: 0; content: ""; clear: both;  } #mini-form .separator { display: block; width: 100%; height: 2px; margin: 0 0 28px 0; background: repeating-linear-gradient( 90deg, #e0e0e0, #e0e0e0 2px, #ffffff 2px, #ffffff 4px ); clear: both;  } #mini-form footer { display: block; height: 82px; margin: 0; padding: 20px 0 20px 0; clear: both; border-top: 2px solid #e5e5e7; background-color: #f8f8fa;  } #mini-form footer span { display: block; float: left; min-width: 90px; height: 40px; padding: 0; margin: 0 0 0 20px; color: #ffffff; line-height: 40px; font-weight: bold; cursor: pointer; text-align: center; text-transform: uppercase; background-color: #6ac259; border-radius: 3px;  } #mini-form footer span:hover { background-color: #8ae279;  } #mini-form footer span:nth-child(2) { float: right; margin: 0 20px 0 0; color: #9ba8b0; background-color: transparent; border: 2px solid #9ba8b0;  } #mini-form footer span:hover:nth-child(2) { background-color: #f0f0f0;  } #mini-form .aci { position: relative; min-height: 44px; overflow: hidden; border: 2px solid #e0e0e0; border-radius: 3px;  } #mini-form .aci span { position: relative; display: block; width: 100%; height: 40px; padding: 0 0 0 10px; line-height: 40px; color: #353535; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none;  } #mini-form .aci:after { position: absolute; top: 0; right: 0; display: block; width: 40px; height: 40px; content: ""; background: url( "../images/cp/cp.png" ) no-repeat -155px -155px; opacity: 0.3; cursor: pointer;  } #mini-form .aci:before { position: absolute; top: 0px; right: 40px; display: block; width: 2px; height: 40px; content: ""; background-color: #e0e0e0;  } #mini-form .aci input { position: absolute; z-index: 6; display: none; top: 62px; left: 20px; width: calc( 100% - 40px ) !important; height: 44px; padding: 10px; color: #666666; border: 2px solid #e0e0e0; border-radius: 3px; clear: both;  } #mini-form .aci ol { display: none; z-index: 5; width: 100%; padding: 84px 0 0 0; overflow: hidden; list-style-type: none; background-color: #ffffff; border-radius: 0 0 3px 3px; border-top: 2px solid #e0e0e0;  } #mini-form .aci li { display: block; line-height: 40px; width: 100%; padding: 0 0 0 10px; color: #666666; cursor: pointer; border-top: 2px dotted #e8e8e8;  } #mini-form .aci li:first-child {  } #mini-form .aci li:hover { background-color: #f7f6f9;  } #mini-form .aci .sel { color: #2b2e4f; background-color: #f7f6f9;  } #mini-form .aciv input { display: block;  } #mini-form .aciv ol { display: block; list-style: none;  } #mini-form .aciv:after { background-position: -205px -155px;  } #mini-form .aciv span { border-bottom: 0;  } #mini-form .acivt input { display: block; top: auto; bottom: 40px;  } #mini-form .acivt ol { display: block; top: auto; bottom: 35px; padding: 0 0 55px 0; border-radius: 3px 3px 0 0; border-bottom: 0; border-top: 1px solid #e0e0e0;  } #mini-form .button { display: inline-block; float: none; min-width: 90px; height: 40px; margin: 0 0 0 0; padding: 0 10px 0 10px; color: #9ba8b0; line-height: 40px; font-weight: bold; cursor: pointer; text-align: center; text-transform: uppercase; background-color: transparent; border: 2px solid #9ba8b0; border-radius: 3px;  } #mini-form .button:hover { background-color: #f0f0f0;  } #mini-form .cbl { display: block; margin: 0 0 0 0; overflow: hidden; clear: both; list-style: none;  } #mini-form .cbl:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #mini-form .cbl li { position: relative; display: block; height: 40px; padding: 0 0 0 40px; overflow: hidden; line-height: 40px; color: #353535;  } #mini-form .cbl .cb,#mini-form .cbl .cbs { position: absolute; top: 10px; left: 0;  } #mini-form .imagefile { position: relative; display: block; width: 100px; height: 100px; background-color: #f5f5f7; border-radius: 4px; border: 2px dashed #e0e0e0; background: no-repeat scroll center center / cover;  } #mini-form .imagefile:before { position: absolute; top: 47px; left: 38px; display: block; width: 20px; height: 2px; content: ""; background-color: #d5d5d7;  } #mini-form .imagefile:after { position: absolute; top: 38px; left: 47px; display: block; width: 2px; height: 20px; content: ""; background-color: #d5d5d7;  } #mini-form .imagefile input { position: absolute; top: 0; left: 0; opacity: 0; width: 100%; height: 100%; overflow: hidden; cursor: pointer;  } #mini-form .imagefile span { position: absolute; top: -10px; right: -10px; display: none; width: 20px; height: 20px; background-color: #ed1c24; border-radius: 50%; cursor: pointer; opacity: 0.7;  } #mini-form .imagefile span:hover { opacity: 1;  } #mini-form .imagefile span:before,#mini-form .imagefile span:after { position: absolute; top: 50%; left: 50%; display: block; width: 2px; height: 12px; margin: -6px 0 0 -1px; content: ""; background-color: #ffffff;  } #mini-form .imagefile span:before { transform: rotate( -45deg );  } #mini-form .imagefile span:after { transform: rotate( 45deg );  } #mini-form .imagefile-available span { display: block;  } #mini-form .imagefile-available:after,#mini-form .imagefile-available:before { display: none;  } #mini-form input,#mini-form textarea { display: block; width: 100%; height: 42px; max-width: 600px; padding: 0 10px 0 10px; line-height: 40px; color: #353535; border: 2px solid #e0e0e0; border-radius: 3px; clear: both; background-color: transparent;  } #mini-form textarea { min-height: 150px; padding: 10px; line-height: 26px; resize: vertical;  } #mini-form textarea:focus,#mini-form input:focus { color: #454545; border: 2px solid #2b2e4f;  } #mini-form .ierror { border: 2px solid #ff374f;  } #mini-form .maci { min-height: 44px; border: 2px solid #e0e0e0; border-radius: 3px;  } #mini-form .maci:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #mini-form .maci input { display: block; float: left; width: 33%; height: 42px; max-width: 600px; padding: 0 10px 0 10px; line-height: 40px; color: #353535; border: 0; clear: none; background-color: transparent;  } #mini-form .maci span { position: relative; display: block; float: left; height: 30px; line-height: 30px; margin: 5px 5px 5px 5px; padding: 0 40px 0 15px; background-color: #f0f0f0; border-radius: 5px; color: #666688; cursor: edit; cursor: pointer;  } #mini-form .maci .edit-color { background-color: #5b5e7f; color: #ffffff;  } #mini-form .maci span > span { position: absolute; top: 5px; right: 10px; display: block; width: 20px; height: 20px; margin: 0; padding: 0; opacity: 0.6; border-radius: 50%; background-color: transparent; cursor: pointer;  } #mini-form .maci span span:hover { opacity: 1; background-color: #ed1c24;  } #mini-form .maci span span:before,#mini-form .maci span span:after { position: absolute; top: 9px; left: 3px; width: 14px; height: 2px; content: ""; background-color: #2b2e4f;  } #mini-form .maci span span:before { transform: rotate( -45deg );  } #mini-form .maci span span:after { transform: rotate( 45deg );  } #mini-form .maci .edit-color span:before,#mini-form .maci .edit-color span:after { background-color: #ffffff;  } #mini-form .maci span span:hover:before,#mini-form .maci span span:hover:after { background-color: #ffffff;  } #mini-form .maci ol { display: none; z-index: 5; width: 100%; padding: 0 0 0 0; overflow: hidden; list-style-type: none; background-color: #ffffff; border-radius: 0 0 3px 3px; border-top: 0 solid #e0e0e0;  } #mini-form .maci li { display: block; line-height: 40px; width: 100%; padding: 0 0 0 10px; color: #666666; cursor: pointer; border-top: 2px dotted #e8e8e8;  } #mini-form .maci li:first-child {  } #mini-form .maci li:hover { background-color: #f7f6f9;  } #mini-form .maci .sel { color: #2b2e4f; background-color: #f7f6f9;  } #mini-form .media { position: relative; display: block; min-height: 154px; background-color: #f5f5f7; border-radius: 4px; border: 2px dashed #e5e5e7;  } #mini-form .media ul { position: relative; display: block; min-height: 150px; padding: 10px; clear: both; overflow: hidden; list-style: none;  } #mini-form .add:before,#mini-form .add:after { position: absolute; top: 50%; left: 50%; display: block; background-color: #e0e0e0; position: absolute; content: "";  } #mini-form .add:before { width: 50px; height: 2px; margin: -1px 0 0 -25px;  } #mini-form .add:after { width: 2px; height: 50px; margin: -25px 0 0 -1px;  } #mini-form .media ul li { position: relative; display: block; float: left; width: 25%; height: 0; padding: 0 0 25% 0; opacity: 0.3;  } #mini-form .media ul li:nth-child(-n+20) { opacity: 1;  } #mini-form .media ul figure { position: absolute; top: 10px; left: 10px; display: block; width: calc( 100% - 20px ); height: calc( 100% - 20px ); cursor: pointer; background-repeat: no-repeat; background-position: center; background-size: cover; border: 2px solid #e5e5e7; border-radius: 4px;  } #mini-form .media ul li span { position: absolute; top: 0; right: 0; width: 20px; height: 20px; background-color: #ed1c24; border-radius: 50%; cursor: pointer; opacity: 0.7;  } #mini-form .media ul li span:hover { opacity: 1;  } #mini-form .media ul li span:before,#mini-form .media ul li span:after { position: absolute; top: 50%; left: 50%; display: block; width: 2px; height: 12px; margin: -6px 0 0 -1px; content: ""; background-color: #ffffff;  } #mini-form .media ul li span:before { transform: rotate( -45deg );  } #mini-form .media ul li span:after { transform: rotate( 45deg );  } #mini-form .media input { position: absolute; top: 100%; left: 0; opacity: 0; width: 10px; height: 10px; overflow: hidden;  } #mini-form .media ul .placeholder { border: 2px dashed #ed1c24; opacity: 0.5;  } #mini-form .media ul .dropcell { border: 2px dashed #6ac259;  } #mini-form .minput { min-height: 44px; border: 2px solid #e0e0e0; border-radius: 3px;  } #mini-form .minput:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #mini-form .minput input { display: block; float: left; width: 33%; height: 42px; max-width: 600px; padding: 0 10px 0 10px; line-height: 40px; color: #353535; border: 0; clear: none; background-color: transparent;  } #mini-form .minput span { position: relative; display: block; float: left; height: 30px; line-height: 30px; margin: 5px 5px 5px 5px; padding: 0 40px 0 15px; background-color: #f0f0f0; border-radius: 5px; color: #666688; cursor: edit; cursor: pointer;  } #mini-form .minput .edit-color { background-color: #5b5e7f; color: #ffffff;  } #mini-form .minput span > span { position: absolute; top: 5px; right: 10px; display: block; width: 20px; height: 20px; margin: 0; padding: 0; opacity: 0.6; border-radius: 50%; background-color: transparent; cursor: pointer;  } #mini-form .minput span span:hover { opacity: 1; background-color: #ed1c24;  } #mini-form .minput span span:before,#mini-form .minput span span:after { position: absolute; top: 9px; left: 3px; width: 14px; height: 2px; content: ""; background-color: #2b2e4f;  } #mini-form .minput span span:before { transform: rotate( -45deg );  } #mini-form .minput span span:after { transform: rotate( 45deg );  } #mini-form .minput .edit-color span:before,#mini-form .minput .edit-color span:after { background-color: #ffffff;  } #mini-form .minput span span:hover:before,#mini-form .minput span span:hover:after { background-color: #ffffff;  } #mini-form .order { position: relative; display: block; margin: 0 0 0 0; padding: 17px 20px 20px 60px; background-color: #f5f7f9; border-radius: 3px; border: 2px solid #e0e0e0;  } #mini-form .order figure { position: absolute; top: 20px; left: 10px; display: block; width: 40px; height: 40px; border-radius: 50%; overflow: hidden;  } #mini-form .order figure img { display: block; width: 100%; height: 100%;  } #mini-form .order p { margin: 0 0 10px 0; clear: both; line-height: 20px; font-weight: bold; color: #7e809c;  } #mini-form .order .remove { position: absolute; bottom: 20px; left: 5px; width: 50px; height: 50px; cursor: pointer; opacity: 0.7;  } #mini-form .order .remove:hover { opacity: 1;  } #mini-form .order .remove:after { position: absolute; top: -25px; right: -25px; display: block; width: 100px; height: 100px; background: url( "../images/cp/cp.png" ) no-repeat -1500px -500px; content: ""; transform: scale( 0.5 );  } #mini-form .select { position: relative; display: block; width: 100%; max-width: 600px; height: 44px; margin: 0; cursor: pointer; background-color: transparent; border: 2px solid #e0e0e0; border-radius: 3px;  } #mini-form .select:after { position: absolute; top: 0; left: 10px; width: calc( 100% - 52px ); padding: 0; content: attr( data-name ); color: #454545; line-height: 40px; text-align: left; white-space: nowrap; overflow: hidden; border-right: 2px solid #e0e0e0; text-overflow: ellipsis;  } #mini-form .select:before { position: absolute; top: 0; right: 0; display: block; width: 40px; height: 40px; content: ""; background: url( "../images/cp/cp.png" ) no-repeat -105px -155px; opacity: 0.3; transform: scale( 1 );  } #mini-form .select select { position: absolute; z-index: 3; top: 0; left: 0; display: block; width: 100%; height: 40px; padding: 0 0 0 10px; font-size: 14px; color: #717478; outline: 0; text-indent: 0.01px; text-overflow: ""; appearance: none; -webkit-appearance: none; -moz-appearance: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: transparent; opacity: 0;  } #mini-form .select select::-ms-expand { display: none;  } #mini-form .select select:focus { background-color: #ffffff; border: 1px solid #d5d5d5;  } #mini-form .select option { line-height: 40px;  } .table { display: block; margin: 0 20px 20px 20px; border: 1px solid #e5e5e5; border-radius: 3px; background-color: #efedee;  } .table header { display: block; height: 50px; padding: 0 0 0 20px; border-bottom: 1px solid #e5e5e5; line-height: 50px; font-weight: bold; color: #98a6ae; font-size: 12px; text-transform: uppercase;  } .table header ol { display: block; height: 50px; list-style: none;  } .table header ol li { display: block; float: left; height: 50px;  } .table header span,.table header a { position: relative; display: inline-block; float: left; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;  } .table header a { padding-right: 50px;  } .table header a:after { position: absolute; top: 0px; right: -10px; float: left; display: block; content: ""; width: 50px; height: 50px; opacity: 0.3; background: url( "../images/cp/cp.png" ) -100px -150px no-repeat; transform: scale( 0.6 );  } .table header .asc:after { background-position: -200px -150px;  } .table header .desc:after { background-position: -150px -150px;  } .table article { position: relative; display: block; height: 80px; margin: 0 0 0 0; padding: 20px 0 20px 20px; background: #ffffff; border-bottom: 1px solid #e5e5e5;  } .table article:first-child {  } .table article:last-child { border-bottom: 0; border-radius: 0 0 3px 3px;  } .table article:hover { background: #f8f6f7;  } .table article div { position: relative; float: left; min-height: 40px;  } .table article div:after {  } .table article div h3,.table article div p,.table article div em { display: block; padding: 0 10px 0 0; overflow: hidden; font-style: normal; white-space: nowrap; text-overflow: ellipsis;  } .table article div h3 { color: #49526f; font-size: 14px; line-height: 40px; font-weight: bold;  } .table article div p { color: #49526f; font-size: 14px; line-height: 20px; font-weight: bold;  } .table article div em { color: #a0a0a0; line-height: 20px; font-size: 12px;  } .table article div a {  } .table article .uppercase { text-transform: uppercase;  } .table article .lowercase { text-transform: lowercase;  } .table article .sec-uppercase em { text-transform: uppercase;  } .table article figure { position: absolute; top: 20px; left: 60px; width: 40px; height: 40px; overflow: hidden; overflow: hidden; border-radius: 3px;  } .table article img { display: block; width: 40px; width: 40px;  } .table article .cb,.table article .cbs { position: absolute; display: block; top: 30px; left: 20px;  } .table article .cbs {  } .table article .cb:hover {  } .table article .cbs:hover {  } .table article .on,.table article .off { display: block; float: left; margin-top: 12px;  } .table article h5 { position: absolute; top: 15px; right: 0; display: block; width: 50px; height: 50px; margin: 0; cursor: pointer; opacity: 0.3;  } .table article h5:before,.table article h5:after,.table article h5 span { position: absolute; left: 23px; display: block; width: 4px; height: 4px; background-color: #000000; content: ""; border-radius: 3px;  } .table article h5:before { top: 15px;  } .table article h5:after { bottom: 15px;  } .table article h5 span { top: 23px;  } .table article h5:hover { opacity: 1;  } .table article ol { position: absolute; z-index: 2; top: -10px; right: 0; display: none; height: 45px; padding: 5px 0 5px 0; list-style: none; background: #2b2e4f; border-radius: 5px;  } .table article ol:after { position: absolute; top: 38px; right: 19px; display: block; width: 12px; height: 12px; margin: 0 0 0 0; content: ""; background-color: #2b2e4f; transform: rotate( -45deg );  } .table article ol li { display: block; float: left; padding: 0 15px 0 15px; line-height: 35px; border-right: 1px solid #3b3e5f; text-transform: uppercase; color: #ffffff; cursor: pointer; font-size: 12px; font-weight: bold;  } .table article ol li:last-child { border: 0;  } .table article ol li:hover { color: #e90606;  } .table article ol a { display: block;  } .table article:before { position: absolute; top: 0; left: 0px; width: 5px; height: 100%; content: "";  } .table article:last-child:before { border-radius: 0 0 0 3px;  } .table .status-1:before { display: block; background-color: #e14c31;  } .table .status-2:before { display: block; background-color: #3fa34d;  } .table .status-3:before { display: block; background-color: #f5ab30;  } .table .status-4:before { display: block; background-color: #1865d6;  } .table .with-cb { padding-left: 60px;  } .table .with-image { padding-left: 70px;  } .table .with-cb-image { padding-left: 130px;  } .table .with-action { padding-right: 50px;  } .table .pagination { display: block; margin: 0 0 0 0; padding: 20px 20px 20px 20px; overflow: auto; clear: both; background-color: #ffffff; border-radius: 0 0 3px 3px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none;  } .table .pagination div { float: left; height: 32px; overflow: hidden; border-radius: 4px; border: 1px solid #e5e5e5;  } .table .pagination span,.table .pagination a { float: left; min-width: 31px; height: 30px; padding: 0 10px 0 10px; margin: 0 0 0 0; color: #7b7e9f; line-height: 30px; font-weight: bold; background-color: #ffffff; border-right: 1px solid #e5e5e5;  } .table .pagination span:first-child,.table .pagination a:first-child {  } .table .pagination span:last-child,.table .pagination a:last-child { border-right: 0;  } .table .pagination a:hover { background-color: #f5f5f5; cursor: pointer;  } .table .pagination span { color: #2b2e4f; background-color: #e5e5e5;  } .table .pagination h4 { float: right; margin: 0; font-weight: bold; font-size: 14px; line-height: 32px; color: #2b2e4f;  } #acc { position: fixed; z-index: 10; top: 0; left: 0; display: none; width: 100%; height: 100%; margin: 0; overflow: auto; background-color: #ffffff; background: url( "../images/web/accounts/bg-1.jpg" ) no-repeat center center / cover #202b4b;  } #acc .back { position: fixed; z-index: 3; top: 20px; left: 20px; display: block; width: 30px; height: 30px; background-image: linear-gradient( transparent 24px, #ffffff 24px, #ffffff 26px, transparent 26px ); opacity: 0.8;  } #acc .back:before,#acc .back:after { position: absolute; top: 24px; left: 0; display: block; width: 20px; height: 2px; background-color: #ffffff; content: ""; transform-origin: 0 0;  } #acc .back:before { transform: rotate( 40deg );  } #acc .back:after { transform: rotate( -40deg );  } #acc .back:hover { opacity: 1;  } #acc aside { position: absolute; top: 50%; left: 10%; display: block; width: 40%; transform: translate3d( 0, -50%, 0 );  } #acc aside:after {  } #acc aside h3 { margin: 0 0 10px 0; color: #c42327; text-align: left; font-size: 44px; font-weight: bold;  } #acc aside p { margin: 0 0 10px 0; color: rgba( 255, 255, 255, 0.8 ); text-align: left; font-size: 22px; font-weight: normal;  } #acc aside br {  } #acc aside .btn { display: inline-block; margin: 0 0 20px 0; padding: 0  15px 0 15px; line-height: 40px; clear: both; color: #ffffff; cursor: pointer; border-radius: 5px 5px 5px 5px; text-align: center; text-transform: uppercase; font-size: 12px; font-weight: bold; background-color: #c42327; letter-spacing: 1px;  } #acc aside .btn:hover { color: #ffffff; background-color: #d43337;  } #acc aside img { display: block; width: 100px; height: 100px; margin: 0 auto 0 auto; border-radius: 5px;  } #acc aside ol { display: block; width: 100%; margin: 0 0 20px 0; list-style: none; text-align: center;  } #acc aside ol:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #acc aside ol li { display: block; float: left; width: 40px; height: 40px; margin: 0 10px 0 -10px; background: url( "../images/web/web.png" ) no-repeat; transform: scale( 0.5 ); opacity: 0.5;  } #acc aside ol li:hover { opacity: 1;  } #acc aside .ig { background-position: -30px -330px;  } #acc aside .fb { background-position: -130px -330px;  } #acc aside .tw { background-position: -230px -330px;  } #acc aside .li { background-position: -330px -330px;  } #acc aside ol a { display: block; width: 40px; height: 40px;  } #acc article { position: absolute; top: 50%; left: 50%; display: block; width: 400px; padding: 30px 0 0 0; border-radius: 5px 5px 6px 6px; background-color: #ffffff; transform: translate3d( -50%, -50%, 0 );  } #acc article header { margin: 0 0 20px 0; border-bottom: 1px solid #e5e5ea;  } #acc article .close { position: absolute; top: 10px; right: 10px; display: block; width: 20px; height: 20px; cursor: pointer;  } #acc article .close:before,#acc article .close:after { position: absolute; top: 0; left: 9px; display: block; width: 2px; height: 20px; background-color: #000000; content: "";  } #acc article .close:before { transform: rotate( -45deg );  } #acc article .close:after { transform: rotate( 45deg );  } #acc article h1 { margin: 0 30px 10px 30px; font-size: 36px; color: #202b4b; line-height: 100%;  } #acc article p { margin: 0 30px 20px 30px; font-size: 14px; line-height: 150%; color: #202b4b;  } #acc article a { color: #c42327;  } #acc article a:hover { color: #e44347;  } #acc article fieldset { display: block; margin: 0 30px 20px 30px; clear: both;  } #acc article fieldset:after { display: block; width: 100%; height: 0; clear: both; content: "";  } #acc article fieldset label { display: block; margin: 0 0 5px 0; clear: both; line-height: 100%; text-transform: uppercase; font-size: 12px; color: #9da3a8; font-weight: bold;  } #acc article fieldset label img { display: block; height: 12px;  } #acc article fieldset .label-inline { float: left; margin: 0; clear: none; font-size: 14px; line-height: 20px; text-transform: none;  } #acc article input { display: block; width: 100%; height: 40px; padding: 0 10px 0 10px; line-height: 38px; background-color: #f0f0f0; color: #202b4b; border: 1px solid #e0e2e4; border-radius: 4px;  } #acc article input:focus { background-color: #e0e2e4; border: 1px solid #d5d7d9;  } #acc footer { display: block; padding: 10px 0 0 0;  } #acc article .submit { display: block; margin: 0 0 0 0; padding: 0 20px 0 20px; line-height: 46px; clear: both; background-color: #c42327; color: #ffffff; cursor: pointer; border-radius: 0 0 5px 5px; text-align: center; font-size: 14px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;  } #acc article .submit:hover { background-color: #d43337;  } #acc .cb,#acc .cbs { float: left; margin: 0 10px 0 0;  } #acc h5 { float: right; line-height: 20px; font-weight: bold;  } @media only screen and ( max-width : 1400px ) {  } @media only screen and ( max-width : 1200px ) {  } @media only screen and ( max-width : 1024px ) { #header h1 { padding:  0 10px 0 10px; font-size:  14px;  } #header h1:before { display:  none;  } #header .new { width:  40px; color:  transparent;  } #header .new:before,#header .new:after { display:  block;  } #acc aside { left:  50px;  }  } @media only screen and ( max-width : 768px ) { #acc aside { position:  relative; top:  0; left:  0; width:  100%; padding:  100px 20px 60px 20px; clear:  both; transform:  none; text-align:  center;  } #acc aside h3 { text-align:  center; font-size:  22px;  } #acc aside p { text-align:  center; font-size:  16px;  } #acc aside br { display:  none;  } #acc aside .btn { margin:  0 auto 0 auto;  } #acc aside img { width:  80px; height:  80px;  } #acc aside ol { text-align:  center;  } #acc aside ol li { display:  inline-block; float:  none; margin:  0 5px 0 5px;  } #acc article fieldset .label-inline { font-size:  12px;  }  } @media only screen and ( max-width : 480px ) { #blacklist h1 { font-size:  30px;  } #acc aside { padding:  100px 20px 40px 20px;  } #acc aside ol { bottom:  0;  } #acc aside ol li { margin:  0 0 0 0;  } #acc article { width:  calc( 100% - 20px );  } #acc article h1 { margin:  0 20px 10px 20px;  } #acc article p { margin:  0 20px 20px 20px;  } #acc article fieldset { margin:  0 20px 20px 20px;  }  } @keyframes spinner { from { transform: rotate( 0deg ); } to { transform: rotate( 360deg ); }  }