/*PALET
#e74c3c #c0392b
#3498db #2980b9
#bdc3c7 #ecf0f1
#7f8c8d #95a5a6
#efefef
#f1c40f
#2ecc71

*/



 
/*panel theme*/
.header { border-bottom: 1px solid #eee; }
.logoWrap { height: 45px; width: 100%; margin-bottom: 20px; }
.logoWrap .logo { width: 150px; float: right; } 
.hint-content { /*background-color: #2980B9 !important;*/ font-size: 18px !important; }
.hint-diag { /*border-right-color: #2980B9 !important;*/ }
div.hintContainer div.hint-content p,
div.hintContainer div.hint-content .btn { padding: 18px 20px; background-color: #252525; }
.ticket-closed { font-weight: 200 !important; font-style: italic; }
.btn-blue { padding: 20px 10px !important; background-color: #398BCE !important; }
.btn-blue:hover { background-color: #5098d3 !important; }
.btn-blue:active, .btn-blue.selected { background-color: #27699e !important; }
.btn.small { padding: 4px !important;  }
.btn.thin { font-size: 12px !important;  }
.btn-blue-ghost {  background: #fff; color: #398BCE; padding: 20px 10px; font-weight: 500; font-size: 26px; border: 1px solid #398BCE;  }
.btn-blue-ghost:hover { color: #286da6; border-color: #286da6; }
.btn-red { padding: 20px 10px !important; }
.btn-ghost { padding: 20px 10px !important; background-color: #252525 !important; color: #fff; border-color: #555; }
.btn-ghost:hover { background-color: #000 !important; }
.btn-payout { background: #e74c3c; padding: 5px; color: #fff; font-size: 14px !important; }
.btn-payout:hover { background: #ea6253; }
.btn-payout:active { background: #d22c1a; }
.msg { padding-top: 20px; padding-bottom: 20px; }
.chart-wrap { height: 400px; width: 600px; position: relative; }
.link:hover { text-decoration: underline !important; cursor: pointer !important; }


header h1 { font-size: 26px; color: #444; font-weight: 200;  padding-bottom: 20px; margin-bottom: 40px; border-bottom: 1px solid #eee; }
header h2 { font-size: 28px; color: #444; font-weight: 300; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; cursor: pointer; text-align: left; padding: 5px 10px; padding-bottom: 30px; background-position: 96% 50%; background-size: 25px; }
header h3 { font-size: 36px; color: #444; font-weight: 300; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; cursor: pointer; text-align: left; padding: 5px 10px; padding-bottom: 30px; background-position: 96% 50%; background-size: 25px; }
header h4 { font-size: 26px; color: #777; font-weight: 200; padding-left: 20px; margin-bottom: 5px; }
header h5 { font-size: 26px; color: #fff; font-weight: 200; padding: 5px; margin-bottom: 5px; }
header h6 { font-size: 28px; color: #444; font-weight: 300; padding: 5px 10px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; cursor: pointer; text-align: left; background-position: 96% 50%; background-size: 25px; }
header h2:hover, header h6:hover { color: #398BCE; }
header *.small { font-size: 18px; }
header *.italic { font-style: italic; }

.font.desc { padding: 0 0 20px 20px !important; color: #777; }
.font.small { font-size: 18px; }
.font.extrasmall { font-size: 12px; }


.wrap { background: transparent; }


body { background: #fff; background-size: cover; background-attachment: fixed; font-family:"proxima-nova" !important; }
body, html { height: 100%; }


.containerMain { width: 100%; float: left; /*background-color: #252525;*/ /*background-image: url('images/dark-bg.png');*/ min-height: 100%; position: relative;  }
.containerMain .pages { margin-top: 10px !important; }
.containerMain .mainInner {  margin-top: 50px; padding-bottom: 240px;  }
.containerMain .tabs { min-width: 150px; width: 18%; text-align: center; float: left; }
.containerMain .tabs > ul .alerts { position: absolute; color: #e74c3c; font-size: 14px; font-weight: bold; right: 5px; top: 7px; z-index: 2; min-width: 15px; text-align: center; padding: 5px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; }
.containerMain .tabs > ul.pages > li { padding: 1px; text-align: right; position: relative; }
.containerMain .tabs > ul.pages > li .btn { width: 150px; text-align: left; }
.containerMain .tabs > ul.current-user { width: 150px; float: right; border: 1px solid #eee; position: relative; }
.containerMain .tabs > ul.current-user > li .btn { color: #398BCE; width: 100%; text-align: left;  }
.containerMain .panel { float: left; text-align: center; width: 71%; padding-left: 10%; position: relative; overflow-x: hidden; }
.containerMain .panel .content {/* padding: 20px 0;*/ width: 70%;  }
.containerMain .panel .content header { margin-bottom: 10px; }
.containerMain .panel .content .col { float: left; width: 46%; padding: 0 2%; text-align: right; }
.containerMain .panel .content .col > input { width: 100%; padding-left: 10px; padding-right: 10px; }
.containerMain .panel .content .col .desc { float: left; font-weight: 300; clear: both; width: 200px; text-align: left; font-size: 16px; color: #999; opacity: 0.5; }
.containerMain .panel .content .col .desc strong { color: #3CC05E; font-weight: 300; }
.containerMain .panel .content .containerApp { width: 190px; height: 314px; float: right; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; overflow: hidden }
.containerMain .panel .content .containerApp .bg-app { background-image:  url('images/app.png'); background-size: contain; width: 100%; height: 100%; }
.containerMain .panel .content .col .btn.icon { float: left; padding-left: 50px !important; margin-bottom: 10px; width: 290px; clear: both; text-align: left; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.containerMain .panel .content textarea { width: 96%; padding: 5px 2%; }
.containerMain .panel .tab-page { display: none; }
.containerMain .panel .tab-page.load-slidein { display: block; transform:translateX(500px) translateY(0px); transition:opacity 0ms ease 0s, transform 0ms ease 0s; }
.containerMain .panel .content div.form { width: 600px; float: left; margin: 0 auto; margin-bottom: 50px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.containerMain .panel .content div.form > * { margin-bottom: 5px; }
.containerMain .panel .content div.form.big { width: 500px; }
.containerMain .panel .content div.form .group > input { width: 100%; float: left; margin-bottom: 10px; text-align: center; }
.containerMain .panel .content div.form .group > textarea { margin-bottom: 10px; }
.containerMain .panel .content div.form .group {  }
.containerMain .panel .content div.form .group > ul { margin-top: 50px; }
.containerMain .panel .content div.form .group > li { padding-bottom: 5px;  }
.containerMain .panel .content div.form .group > li .col { color: #777; font-weight: 300; font-size: 24px; }
.containerMain .panel .content div.form .group > li .col span { text-transform: uppercase; padding: 5px; }
.containerMain .panel .content div.form .search {   }
.containerMain .panel .content div.form .search input { margin: 20px 0; padding-left: 10px; padding-right: 10px; }
.containerMain .panel .content div.form .search input[type=button] { float: left; }
.containerMain .panel .content div.form .search input[type=text] { width: 75%; float: right; }
.containerMain .panel .content div.form .search .search-range { width: 35% !important; margin-left: 1.5% !important; }
.containerMain .panel .content div.form ul.containerItems.big > li { float: left; width: 90%; padding-left: 10%; }
.containerMain .panel .content div.form ul.containerItems.big > li > span { float: left; font-size: 22px; font-weight: 300; margin: 20px 0; color: #777; text-overflow: ellipsis; max-width: 290px; text-align: left; }
.containerMain .panel .content div.form ul.containerItems.big > li:hover > span { color: #398BCE; }
.containerMain .panel .content div.form .right { float: right; font-size: 20px; margin-left: 5px; }
.containerMain .panel .content div.form ul.containerItems.big > li > .btn.hover { display: none; }
.containerMain .panel .content div.form ul.containerItems.big > li:hover > .btn.hover { display: inline-block; }
.containerMain .panel .content div.form ul.containerItems.big > li > .btn.edit {  }
.containerMain .panel .content div.form ul.containerItems.big > .form { margin-top: 10px; }
.containerMain .panel .content ul.info { padding-left: 20px; }
.containerMain .panel .content ul.info li { padding: 10px 0; }
.containerMain .panel .content ul.info span { color: #777; font-size: 26px; font-weight: 300; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 5px; }
.containerMain .panel .content ul.info .green { background-color: #7DC374; color: #fff; }
.containerMain .panel .content ul.info .red { background-color: #E74C3C; color: #fff; }
.containerMain .panel .content ul.info .lightgray { background-color: #f9f9f9; color: #E74C3C; }


.containerMain .panel .content .font-green { color: #7DC374 !important; }
.containerMain .panel .content .font-red { color: #E74C3C !important; }
.containerMain .panel .content .grid {  }
.containerMain .panel .content .grid > ul > li { width: 45%; margin-left: 2.5%; margin-bottom: 20px;/* background: #f9f9f9;*/ padding: 20px 0; float: left; }
.containerMain .panel .content .grid > ul > li span { text-align: center; width: 100%; }
.containerMain .panel .content .grid > ul > li span.big { font-size: 40px; font-weight: 300; }
.containerMain .panel .content .table {  }
.containerMain .panel .content .table .title { width: 100%; }
.containerMain .panel .content .table .title span { float: left; padding-top: 10px; padding-bottom: 10px; font-size: 20px; font-weight: 300; color: #444; }
.containerMain .panel .content .table > ul > li { width: 100%; margin-bottom: 1px; background: #f9f9f9; padding: 20px 0; float: left; }
.containerMain .panel .content .table > ul > li.thin { padding: 0 !important; }
.containerMain .panel .content .table > ul > li.desc {  }
.containerMain .panel .content .table > ul > li span { text-align: left; padding-top: 12.5px; padding-bottom: 12.5px; color: #444; font-weight: 300; }
.containerMain .panel .content .table > ul > li span.big { font-size: 40px; }
.containerMain .panel .content .table > ul > li > .column { float: left; }
.byfour .column, .byfour .title > span { width: 20%; padding-left: 5%; text-align: left; }
.bythree .column, .bythree .title > span { width: 28%; padding-left: 5%; text-align: left; }
.bytwo .column, .bytwo .title > span { width: 40%; padding-left: 5%; text-align: left; }
.containerMain .panel .content .table li input { display: none; }
.containerMain .panel .content .table li:hover input { display: inline-block; }
/*.containerMain .panel .tab-page.selected { opacity: 1; }*/
ul.reply { margin-bottom: 20px; }
ul.reply > li { float: left; width: 92%; padding: 5px 4%; background: #f9f9f9; }
ul.reply > li span { float: left; width: 100%; font-size: 24px; color: #444; font-weight: 300; }
ul.reply > li span.message { font-size: 24px; }
ul.reply > li.user span { text-align: left; }
ul.reply > li.support span { text-align: right; }
ul.reply > li span.info { font-size: 14px; font-style: italic; }
.containerEdit { margin: 10px 0; float: left; }





/*.plans { width: 100%; margin: 0 auto; }
.plans > li { width: 40%; float: left; margin: 0 2%; border: 1px solid #7DC374; margin-bottom: 20px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.plans > li > .plansTitle { background-color: #7DC374; color: #fff !important; border-bottom: 10px solid #65b759; padding: 10px; }
.plans > li > .plansTitle > h1 { color: inherit !important; font-size: 50px; }
.plans > li > .plansTitle > h2 { font-weight: 500; color: inherit !important; }
.plans > li > .plansDesc { padding: 20px; background: #fff; }
.plans > li > .plansDesc p { width: 100%; text-align: center; padding: 7px; color: #444; }
.plans > li > .plansBuy { padding: 20px; border-top: 1px dashed #ccc; background: #7DC374; }
.plans > li > .plansBuy .buynow { border: 1px solid #ccc; font-weight: bold; font-size: 23px; padding: 7px; height: 130px; width: 130px; color: #fff; background: transparent; -webkit-border-radius: 300px; -moz-border-radius: 300px; border-radius: 300px; }
.plans > li > .plansBuy .buynow:hover { border-color: transparent; cursor: pointer; background: #fff; color: #7DC374; }*/

.plans { width: 100%;  }
.plans > li { width: 46%; padding: 0 2%;  margin-bottom: 20px; float: left; }
.plans > li > .plansTitle > h1 { color: #7DC374; }
.plans > li > .plansTitle > h2 { border-bottom: 1px solid #eee; color: #444; font-weight: 100; font-size: 14px; }
.plans > li > .plansTitle > h3 { color: #7DC374;  font-size: 14px; font-weight: 100; }
.plans > li > .plansDesc { padding: 5px 0; }
.plans > li > .plansDesc p { color: #444; }
.buynow { border: none; background: #7DC374; cursor: pointer; padding: 5px; color: #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }  
.buynow:hover { background: #5cb450;  }



.footer { position: absolute; right: 0; left: 0; bottom: 0; width: 100%; background: rgba(0,0,0, 0.5); }