@font-face {
    font-family: 'Ubuntu-B';
    src: url('../fonts/Ubuntu-B.ttf');
    src: url('../fonts/Ubuntu-B.ttf') format('truetype'); 
    font-weight: normal; font-style: normal;}
@font-face {
    font-family: 'Ubuntu-L';
    src: url('../fonts/Ubuntu-L.ttf');
    src: url('../fonts/Ubuntu-L.ttf') format('truetype'); 
    font-weight: normal; font-style: normal;}
@font-face {
    font-family: 'Ubuntu-M';
    src: url('../fonts/Ubuntu-M.ttf');
    src: url('../fonts/Ubuntu-M.ttf') format('truetype'); 
    font-weight: normal; font-style: normal;}
@font-face {
    font-family: 'Ubuntu-R';
    src: url('../fonts/Ubuntu-R.ttf');
    src: url('../fonts/Ubuntu-R.ttf') format('truetype'); 
    font-weight: normal; font-style: normal;}  

@font-face {
    font-family: 'menlo';
    src: url('../fonts/menlo.eot');
    src: local('☺'), url('../fonts/menlo.woff') format('woff'), url('../fonts/menlo.ttf') format('truetype'), 
    url('../fonts/menlo.svg') format('svg'), url('../fonts/menlo.eot') format('truetype');
    font-weight: normal; font-style: normal;}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

    html {background-color: #e7edf3;}
    body {font-family: 'Ubuntu-R', sans-serif, Arial; background-color: #f3f6f9; padding-right: 0px !important;}
    #wrapper {padding-left: 0;}
    #page-wrapper {width: 100%; padding: 0; background-color: #efeff1; min-height: 600px;}
    .huge {font-size: 50px; line-height: normal;}
    @media(min-width:768px) {
        #wrapper {padding-left: 220px;}
        #page-wrapper {padding: 0px;}
    }

    :focus {outline: none;}

/* BUTTON */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    .error-pop-up {
        width: 500px; height: 200px; text-align: center; padding-top: 30px; background-color: white;
        border-radius: 10px; position: absolute;
        top: 40px; left: 0; right: 0; bottom: 0; margin: auto; z-index: 999;}
    .error-pop-up .btn {    margin: 20px 5px 10px;}
    .confirm-pop-up {
        height: 300px; text-align: center; padding-top: 30px; background-color: white; border-radius: 10px;
        position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 999;}
    .confirm-pop-up .btn{margin:10px;}
    .confirm-pop-up .btn-danger {
        border-radius: 50px; font-family: 'Ubuntu-M', sans-serif, Arial; font-size: 18px;
        line-height: 22px; color: #ffffff; border-radius: 50px;
        padding: 10px 30px; border: 1px solid #ff5c67; transition: all .4s;
        box-shadow: 0 8px 12px 0 rgba(0, 44, 61, 0.18);}
    .confirm-pop-up .btn-danger:hover, .confirm-pop-up .btn-danger:focus, .confirm-pop-up .btn-danger:active, 
    .confirm-pop-up .btn-danger:active:hover, .confirm-pop-up .btn-danger.active, .confirm-pop-up .btn-danger:active:hover {
        transition: all .6s ease; border: 1px solid #ff5c67; box-shadow: none; color: #ffffff;}
    .confirm-pop-up .btn-block {margin-top: 30px;}
    
    .block-btn .fa {margin-right: 8px;}
    
    .btn-default {        
        margin: 10px 5px; font-size: 16px; line-height: 20px; color: #30a7b7; 
        border-radius: 50px; padding: 10px 28px; background: inherit;
        border: solid 2px #30a7b7; transition: all 0.6s;
        box-shadow: 0 8px 12px 0 rgba(0, 44, 61, 0.18);}
    .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, 
    .open > .dropdown-toggle.btn-default {
        box-shadow: none; outline: none; transition: all .4s ease; border: 2px solid #30a7b7; background: #30a7b7; color: #fff;}    
    
    .btn-customize {        
        margin: 10px 5px; font-size: 16px; line-height: 20px; color: #30a7b7; border-radius: 5px; padding: 8px 15px; background: inherit;
        border: solid 2px #30a7b7; transition: all 0.6s; box-shadow: 0 5px 10px 0 rgba(0, 44, 61, 0.17);}
    .btn-customize:hover, .btn-customize:focus, .btn-customize:active, .btn-customize.active, 
    .open > .dropdown-toggle.btn-customize {
        box-shadow: none; transition: all .4s ease; border: 2px solid #30a7b7; background: #30a7b7; color: #fff;}  
    .btn-customize .fa { margin-right: 10px;}     
    
    .btn-primary {
        font-family: 'Ubuntu-M', sans-serif, Arial; margin: 10px 5px 10px;
        background: #0ac1ca; font-size: 16px; line-height: 20px; color: #ffffff;
        border-radius: 50px; padding: 10px 28px;
        border: 1px solid #0ac1ca; transition: all .4s; box-shadow: 0 8px 12px 0 rgba(0, 44, 61, 0.18);}    
    .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:active:hover
    .btn-primary.active, .open>.dropdown-toggle.btn-primary {
        background: #0cd9e3; transition: all .6s ease; border: 1px solid #0ec3cc; box-shadow: none; color: #ffffff;}

    .btn-create {
        font-family: 'Ubuntu-M', sans-serif, Arial; margin: 10px 5px 10px; letter-spacing: 1px;
        background: #03e0d6; font-size: 18px; line-height: 20px; color: #ffffff;
        border-radius: 50px; padding: 8px 32px; border: 1px solid #03e0d6; transition: all .3s; box-shadow: none;}    
    .btn-create:hover, .btn-create:focus, .btn-create:active, 
    .btn-create.active, .open>.dropdown-toggle.btn-create {
        outline: none !important; background: #0ef5df; transition: all .6s ease; border: 1px solid #40e8c3; color: #ffffff;}   
    
    .dapps-plate .btn-create {
        font-family: 'Ubuntu-M', sans-serif, Arial; margin: 10px 5px 10px;
        background: #f2f8ffe6; font-size: 18px; line-height: 20px; color: #6c7e9c;
        border-radius: 50px; padding: 8px 32px; border: 1px solid #ccccda; transition: all .3s; box-shadow: none;}    
    .dapps-plate .btn-create:hover, .dapps-plate .btn-create:focus, .dapps-plate .btn-create:active, 
    .dapps-plate .btn-create.active, .dapps-plate .open>.dropdown-toggle.btn-create {
        outline: none !important; background: #eaf9ff; transition: all .6s ease; border: 1px solid #838d94; color: #445269;}   
    
    .btn-back-dapp {
        font-family: 'Ubuntu-M', sans-serif, Arial; margin: 10px 5px 10px; background: #09d0a6;
        font-size: 18px; line-height: 22px; color: #ffffff; border-radius: 50px;
        padding: 10px 30px; border: 1px solid #05c79e; transition: all .4s;  box-shadow: 0 5px 9px 0 rgba(0, 44, 61, 0.18);}
    .btn-back-dapp:hover, .btn-back-dapp:focus, .btn-back-dapp:active, .btn-back-dapp:active:hover, .btn-back-dapp:active.focus {
        background: #01e8b8; transition: all .6s ease; border: 1px solid #06ffc8; box-shadow: none; color: #ffffff;}
    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  
    .input-group-btn .btn-primary { 
        padding: 6px 20px; margin: 0; box-shadow: none; background: #42d3e6; border: none;
        border-radius: 4px; color: #ffffff; line-height: inherit; font-size: 16px; }
    .btn-primary.active.focus, .btn-primary.active:focus, btn-primarybtn.focus, .btn-primary:active.focus, 
    .btn-primary:active:focus, .btn-primary:focus{outline: none; outline-offset: none; background: #42d3e6;}   
    
    .btn-danger {color: #ea475c; background-color: #eaf0f7; border-color: #eaf0f7; font-size: 18px;}
    .btn-danger:hover, .btn-danger:active, .btn-danger:focus, .btn-danger:active:hover {
        color: #d8102a; background-color: #eaf0f7; border-color: #eaf0f7; font-size: 18px;}  
    .btn-add {
        white-space: inherit; font-family: 'Ubuntu-R', sans-serif, Arial; margin: 10px 0px 10px;
        background: #42d3e6; font-size: 16px; line-height: 20px; color: #ffffff;
        border-radius: 5px; padding: 8px 15px; border: 1px solid #42d3e6; transition: all .6s; box-shadow: none;}    
    .btn-add:hover, .btn-add:focus, .btn-add:active, 
    .btn-add.active, .open>.dropdown-toggle.btn-add {background: #4fe0f3; transition: all .6s ease; border: 1px solid #45d8eb; color: #ffffff;}    
    .btn-back {
        display: inline; position: absolute; left: 52px; top: 6px; font-size: 20px; line-height: 20px; color: #32637d; border-radius: 0; background: none; }      
    .btn-back:hover, .btn-back:focus, .btn-back:active, 
    .btn-back.active, .open>.dropdown-toggle.btn-back {color: #168bbb;}   
    @media (max-width: 768px) {
       .btn-back {position: inherit;}
    }     
    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

    .header-market-img {     
        min-height: 140px; position: relative; background: #5a6f81 url(../images/header_bg2.jpg) no-repeat center center; background-size: cover;}   
    .header-market .navbar {min-height: 60px; margin-bottom: 0px; border-bottom: 1px solid rgba(255,255,255,.2);} 
    .header-market .navbar .nav {margin-top: 0px;}   
    .header-market h2 {margin-top: 0px; font-size: 34px; color: #fff; padding: 20px 0 20px; font-family: 'Ubuntu-R', sans-serif, Arial; line-height: 1.2;}

    .header-market-dapp {background-color: #485871; position: relative; z-index: 10;}
    .page-content-dapp .navi {
        padding: 20px 0; margin-bottom: 25px; border-bottom: 1px solid rgba(0,0,0,.15);
        font-family: 'Ubuntu-L', sans-serif, Arial; font-size: 18px; color: #9c9fa5;}
    .page-content-dapp .navi a {color: #1b9dcc;}
    .page-content-dapp .navi a:hover {color: #15bbec;}
    .page-content-dapp .navi  span {color: #cfd1d4;}
    .page-content-dapp {margin-bottom: 50px;}    

    .block-caption {background: #ffffff; border-radius: 6px; padding: 10px 15px; box-shadow: 0 4px 9px 0 rgba(23,28,33,.06);}
    .block-caption .icon {float: left; width: 96px; margin: 10px 20px 0 0; border-radius: 20px; overflow: hidden;}
    .block-caption .title-price {color: #ea2558; margin: 15px 0px 10px;}

    .page-content-dapp .caption {margin-left: 120px;}    
    .page-content-dapp .caption h2 {font-size: 38px; margin-top: 10px; margin-bottom: 0; color: #51607a;} 

    .page-content-dapp .descr-dapp {padding: 10px 15px 30px; margin-top: 20px; font-size: 18px; font-family: sans-serif, Arial; line-height: 1.2;}      
    .page-content-dapp .descr-dapp h3 {font-size: 22px; font-family: sans-serif, Arial;}    
    .page-content-dapp .descr-dapp h4 {font-size: 20px; color: #49576f; line-height: 1.4; font-family: sans-serif, Arial;}   
    .page-content-dapp .descr-dapp p { margin: 0 0 20px;}
    .page-content-dapp .descr-dapp li {margin-bottom: 4px;}

    .market-text h1 {font-size: 40px; font-family: 'Ubuntu-L', sans-serif, Arial; margin-bottom: 15px; color: #3e4b52;}
    .market-text h2 {line-height: 1.4; font-size: 22px; color: #777; font-family: 'Ubuntu-L', sans-serif, Arial; margin-bottom: 20px;}
    
    /* simulator dApp */
    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */        
    .phone_device {
        display: block; width: 373px; height: 750px; position: relative;
        background: url(../images/simulator_preview.png) no-repeat 0 0; margin: 10px auto 0;}      
    .phone_device .simulator_preview {
        display: block; width: 320px; height: 568px; position: absolute;
        top: 90px; left: 26px; font-family: Arial,sans-serif; overflow: hidden;}
    .phone_device:after {
        content: ''; display: block; width: 144px; height: 136px;
        background: url(../images/click_try.png) no-repeat 0 0; position: absolute; top: 35%; right: -170px;}  
    .phone_device iframe {padding-bottom: 30px;}    
    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */    

/* Top Navigation */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    .navbar-nav {padding: 0 15px;}
    .navbar-collapse {border-top: none; box-shadow: none;}
    .navbar-nav>li>a {
        font-size: 16px; color: #f3f6f9; padding-top: 20px; padding-bottom: 20px; line-height: 20px; 
        transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease;}
    .navbar-nav>li>a:hover, .navbar-nav>li>a:focus, .navbar-nav>.open>a,.navbar-nav>.open>a:hover,
    .navbar-nav>.open>a:focus {color: #516779; background: #ffffff;}
    .navbar-nav>.open>.dropdown-menu {padding: 0; min-width: 180px; border: none; border-radius: 0;}
    .navbar-nav>.open>.dropdown-menu>li>a {
        font-size: 14px; white-space: normal; color: #516779; padding: 8px 10px;
        transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease;}
    .navbar-nav>.open>.dropdown-menu>li>a:focus, .navbar-nav>.open>.dropdown-menu>li>a:hover{background-color: #eaeef3; outline: none;}
    .navbar-nav .dropdown-menu { background-color: #ffffff; }    

    ul.message-dropdown {padding: 0; max-height: 250px; overflow-x: hidden; overflow-y: auto;}
    li.message-preview {width: 275px; border-bottom: 1px solid rgba(0,0,0,.15);}
    li.message-preview>a {padding-top: 15px; padding-bottom: 15px;}
    li.message-footer {margin: 5px 0;}
    ul.alert-dropdown {width: 220px;}

    .navbar-brand {
        padding: 5px 0px; width: 220px; border-color: #3a3a51; transition: all 0.3s ease; 
        -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease;}

    .navbar-brand .color {color: #06ffc8;}
    .navbar-toggle {border-color: #ffffff5e;}
    .navbar-toggle:focus, .navbar-toggle:hover {border-color: #47c1ae;}
    .navbar-brand img {max-width: 120px;}

    .navbar-nav>li>a {color: #ffffff;}
    .navbar-nav>li .color_but {        
        color:#ffffff; padding: 14px 10px;
        margin: 40px 15px 10px; max-width: 190px; text-transform: uppercase;
        text-align: center; border-left: none !important;}
    .navbar-nav>li .color_but:hover {border-left: none !important;}
    @media (max-width: 768px) { 
      .navbar-nav>li .color_but {margin: 0px 0px 10px; max-width: 160px;}
      }  
    .navbar-nav>.active>a, .navbar-nav>.active>a:focus, .navbar-nav>.active>a:hover {color: #fff;}
    .navbar-nav>li>a {font-size: 16px; transition: all 0.5s ease;-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease;}
    .navbar-nav>li>a:focus, .navbar-nav>li>a:hover {color: #11ffeb; background: #ffffff2b; outline: none;}
    .navbar-toggle .icon-bar {background-color: #fff;} 
    .side-nav {box-shadow: 1px 1px 15px rgba(0,0,0,.1);}

    @media (max-width: 767px) { 
        .navbar-nav>li>a:focus, .navbar-nav>li>a:hover {background: none; outline: none;}
        .navbar-nav>.open>.dropdown-menu>li>a {color: #ffffff; padding: 5px 10px;}
        .navbar-nav>li>a:hover, .navbar-nav>li>a:focus, .navbar-nav>.open>a, .navbar-nav>.open>a:hover, 
        .navbar-nav>.open>a:focus{background: none; color: #ffffff; outline: none;}
        .navbar-nav>.open>.dropdown-menu>li>a:focus, .navbar-nav>.open>.dropdown-menu>li>a:hover {
            background: none; color: #00ffd4; outline: none;}
        .nav>li>a {padding: 10px 5px;}
    }
    
/* category selection */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    .left-bar {
        min-height: 550px; margin-top: 20px; background: #ffffff; border: 1px solid #d9d9d9; 
        -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;}
    .left-bar .categories_block {padding: 10px 15px;}
    .left-bar .categories_block ul {margin: 0; padding: 0; list-style: none;}
    .left-bar .categories_block .left-bar .categories_block .ul-cat .active ah4 {
        font-size: 28px; border-bottom: 1px solid #dedede; padding-bottom: 10px;}
    .left-bar .categories_block .ul-cat .li-cat {padding: 5px 0; float: none;}
    .left-bar .categories_block .ul-cat .li-cat a {
        -webkit-transition: all .4s ease; transition: all .4s ease;
        font-size: 18px; color: #485f6d; border: none; background-color: inherit; padding: 4px 8px; border-radius: 4px; display: inline-block;}
    .left-bar .categories_block .ul-cat .li-cat a:hover {color: #407fa5; text-decoration: none; background: #efeff1;}
    .left-bar .categories_block .ul-cat .active a { 
        background-color: #06e0d6 !important; color: #ffffff; text-decoration: none;}
    .left-bar .categories_block .ul-cat .active a:hover {color: #ffffff; text-decoration: none;}
    .left-bar .categories_block .nav-tabs {border-bottom: none;}
    .left-bar .categories_block h4 {color: #225775; font-size: 26px; padding-bottom: 12px; border-bottom: solid 1px #e1e1e8;}
    
    .left-bar .stylish-input-group {padding: 20px 15px 15px;}
    .stylish-input-group .input-group-addon{background: white !important; }
    .stylish-input-group .form-control{border-right:0; box-shadow:0 0 0;  border-color:#ccc;}
    .stylish-input-group button{border:0; background:transparent;}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* Side Navigation */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    @media(min-width:768px) {
        .side-nav {
            position: fixed; top: 50px; left: 190px; width: 220px; margin-left: -190px; border: none; border-radius: 0;
            overflow-y: auto; background-color: #485871; bottom: 0; overflow-x: hidden; padding-bottom: 40px; font-size: 16px;}
        .side-nav>li>a {width: 220px;}
        .side-nav li a:hover, .side-nav li a:focus {outline: none;}
        .modal .close {position: inherit; color: #70798a;}
    }
    .side-nav>li>ul {padding: 0;}
    .side-nav>li>ul>li>a {display: block; padding: 10px 15px 10px 38px; text-decoration: none; color: #999;}
    .side-nav>li>ul>li>a:hover {color: #fff;}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/    

/* Flot Chart Containers */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    .flot-chart {display: block; height: 400px;}
    .flot-chart-content {width: 100%;height: 100%;}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* Custom Colored Panels */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    .huge {font-size: 40px;}
    .panel-green {border-color: #5cb85c;}
    .panel-green > .panel-heading {border-color: #5cb85c; color: #fff; background-color: #5cb85c;}
    .panel-green > a {color: #5cb85c;}
    .panel-green > a:hover {color: #3d8b3d;}
    .panel-red {border-color: #d9534f;}
    .panel-red > .panel-heading {border-color: #d9534f; color: #fff; background-color: #d9534f;}
    .panel-red > a {color: #d9534f;}
    .panel-red > a:hover {color: #b52b27;}
    .panel-yellow {border-color: #f0ad4e;}
    .panel-yellow > .panel-heading {border-color: #f0ad4e; color: #fff; background-color: #f0ad4e;}
    .panel-yellow > a {color: #f0ad4e;}
    .panel-yellow > a:hover {color: #df8a13;}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* modal */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    .modal-open .modal {overflow-x: hidden; overflow-y: hidden;}
    .modal {top: 35px; overflow-y: auto;}
    .modal a {color: #23527c; text-decoration: underline;}
    .modal a:hover {text-decoration: none;}
    .modal .close {
        font-size: 52px; font-weight: 300; position: absolute;
        top: -43px; right: -40px; color: #fff; text-shadow: none; opacity: 0.7; padding: 0px 7px;}
    .modal .close:hover {opacity: 1; color: #ffffff; outline: none !important;}    
    .modal-open {overflow: auto;}
    @media (min-width: 768px){ .modal-dialog {width: 550px; margin: 50px auto;}   }   
    .modal-header h2 {    
        color: #63b7d8; font-size: 24px; margin: 0 0 10px; padding: 10px 0;
        font-family: 'Ubuntu-M', sans-serif; background: #eef1f3; border-bottom: solid 1px #d2d5e1;}
    .modal-header p {color: #022c3e; font-size: 18px;}
    .modal-header {border-bottom: none; padding: 0;}
    .modal-body {padding: 5px 40px 20px;}
    .form-modal .form-control {
        border-radius: 0; border-bottom: solid 2px #dadada; box-shadow: none; background-color: #fff;
        color: #333; font-size: 16px; height: 40px; -webkit-transition: all .6s ease; transition: all .6s ease}
    .form-modal input {border: none; position: relative; padding: 5px 5px;}
    .form-modal .form-control:focus {
        box-shadow: none; -webkit-transition: all .6s ease; transition: all .6s ease; border-bottom: solid 2px #16e4ef !important;}
    .modal-content {border-right: 0; font-family: 'Ubuntu-R', sans-serif, Arial;}     
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

    .container-fluid#hackathon-container {padding-left: 0; padding-right: 0; background: #f3f6f9;overflow:hidden;}

/* new-dapp.php */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    .container-fluid#hackathon-container.page-content {background-color: #f3f6f9; min-height: 700px;}

    .creation-form {padding-bottom: 15px;}
    .req-color {color: red !important;}
    .dapp-type-block .title-step { margin-top: 0px; margin-bottom: 20px; color: #36799c; font-size: 26px;}
    .dapp-type-block {padding: 10px 40px 10px;}

    #creation-form .input-group-addon {background-color: #eaf0f7; border-color: #eaf0f7; color: #2c6484;}
    #creation-form  #dapp-name-label {
        background-color: #d3ebf5; border-color: #d3ebf5; color: #576f96; font-family: 'Ubuntu-M', sans-serif, Arial;}
    #creation-form .form-control:focus {
        background: #f6fbff; border-color: #f6fbff; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05), 0 0 4px rgba(206, 206, 206, 0.28);}        

    .list-bonus {margin-top: 15px; line-height: 1.6;}    
    .cont-page .overlay {padding: 20px 0 160px;}
    .cont-page .title {margin: 10px 20px 10px;}    
    .cont-page h2 {color: #fff; margin-bottom: 20px; font-size: 56px;}  
    .cont-page {background: #dce3ea; border-bottom: solid 1px #d2d5e1; margin-bottom: 20px;}
 
    #hackathon-container h1 {margin-top: 21px; font-size: 18px; color: #69768c; font-family: sans-serif;}
    #hackathon-container h1 .decor-h {}
    .form-hackathon .title-step {font-family: sans-serif, Arial; margin-top: 0px; color: #36799c; font-size: 22px;}   

    .cont-page .overlay {padding: 20px 0 160px;}
    .cont-page h2 {color: #fff; margin-bottom: 20px; font-size: 56px;}
    .input-group-addon {font-size: 16px;}
    .form-hackathon h4 {color: #124561; font-size: 20px;}
    .form-control {background-color: #fff; font-size: 16px; background-image: none; height: 42px; border: 1px solid #eaf0f7;}
    .dapps-plate {border-bottom: none; margin-top: 20px;}   
    .dapps-plate>li.active>a, .dapps-plate>li.active>a:focus, 
    .dapps-plate>li.active>a:hover {
        color: #6cffb8; cursor: default; background-color: #04547d; background: -webkit-linear-gradient(bottom, #007db5 0%, #054b71 100%);
        background: -o-linear-gradient(bottom, #007db5 0%, #054b71 100%); background: linear-gradient(to top, #007db5 0%, #054b71 100%);
        border: 1px solid #fff; border-bottom-color: #076996;  padding: 10px 30px; text-decoration: underline;}
    
    .dapps-plate .contract_block {
        margin-bottom: 40px; display: inline-block; height: auto; max-width: 340px; border: solid 1px #cac9cc;
        border-radius: 0px; background-color: #79caeb; background: -webkit-linear-gradient(top right, #386c8b, #4c9aca);
        background: -o-linear-gradient(top right, #386c8b, #4c9aca); background: linear-gradient(to bottom left, #386c8b, #4c9aca);
        text-align: center; padding: 0 0 10px;box-shadow: none; min-height: 450px;}
    .dapps-plate .contract_block:hover {
        background-color: #4c9aca; border: solid 1px #709fbb; background: -webkit-linear-gradient(bottom, #4c9aca 0%, #4c9aca 100%);
        background: -o-linear-gradient(bottom, #4c9aca 0%, #4c9aca 100%); background: linear-gradient(to top, #4c9aca 0%, #4c9aca 100%);
        box-shadow: 0 4px 9px 0 rgba(23, 28, 33, 0.18);}        
    .dapps-plate .contract_block h3 {
        font-size: 20px; font-family: 'Ubuntu-M', sans-serif, Arial; line-height: 1.3; 
        text-shadow: 1px 1px 2px #2c3038; color: #affffb; font-weight: 500; margin-top: 10px;}  
    .dapps-plate .contract_block .create {text-transform: uppercase; font-size: 16px; margin: 0 0 5px;}    
    .dapps-plate .contract_block .description {font-size: 14px; min-height: 40px; line-height: 1.4;}  
    .dapps-plate .contract_block .contract_img img {max-width: 100%;}
    .dapps-plate .contract_block .contract_content {margin-top: 10px; min-height: 170px; padding: 0 5px;}
    .contract_block a {line-height: 1.42857143; text-decoration: none; color: #ffffff; font-size: 18px;}
    
    .dapps-plate .product_block {
        transition: all 0.3s ease;-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease;
        margin-bottom: 40px; display: inline-block; height: auto; max-width: 340px; border: solid 1px #cac9cc;
        border-radius: 0px; background-color: #0496a5; background: -webkit-linear-gradient(top right, #02b5bd, #1ffff5);
        background: -o-linear-gradient(top right, #02b5bd, #1ffff5);    background: linear-gradient(to top right, #02b5bd, #1ffff5);
        text-align: center; padding: 0 0 10px;box-shadow: none; min-height: 450px;}
    .dapps-plate .product_block:hover {
        background-color: #4c9aca; border: solid 1px #0fc7ce; background: -webkit-linear-gradient(bottom, #0fc7ce 0%, #0fc7ce 100%);
        background: -o-linear-gradient(bottom, #0fc7ce 0%, #0fc7ce 100%); background: -webkit-linear-gradient(bottom, #0fc7ce 0%, #0fc7ce 100%);
        box-shadow: 0 4px 9px 0 rgba(23, 28, 33, 0.18);}        
    .dapps-plate .product_block h3 {
        font-size: 20px; font-family: 'Ubuntu-M', sans-serif, Arial; line-height: 1.3; 
        text-shadow: 1px 1px 2px #2c3038; color: #fffeb9; font-weight: 500; margin-top: 10px;}  
    .dapps-plate .product_block .create {text-transform: uppercase; font-size: 16px; margin: 0 0 5px;}    
    .dapps-plate .product_block .description {font-size: 14px; min-height: 40px; line-height: 1.4;}  
    .dapps-plate .product_block .contract_img img {max-width: 100%;}
    .dapps-plate .product_block .contract_content {margin-top: 10px; min-height: 170px; padding: 0 5px;}
    .product_block a {line-height: 1.42857143; text-decoration: none; color: #ffffff; font-size: 18px;}
    
    .product_block .price_product {border-top: solid 1px #ffffff9e; padding: 10px 15px;}
    .product_block .price_product span 
        {font-size: 18px; display: block; color: #ccfff8; font-family: 'Ubuntu-M', sans-serif, Arial; letter-spacing: 1px;}
    
    .dapps-plate .category_game .contract_block {background: linear-gradient(to bottom left, #401865, #9a59ef);}
    .dapps-plate .category_game .contract_block:hover { border: solid 1px #846da2;}
    
    .dapps-plate .col-md-3, .dapps-plate .col-md-12 {padding-right: 5px; padding-left: 5px;}
    .category_game .btn-create {background: #0de364; color: #ffffff; border: 1px solid #03ff27;}
    .category_game .btn-create:hover, .category_game .btn-create:focus, .category_game .btn-create:active, 
    .category_game .btn-create.active, .category_game .open>.dropdown-toggle.btn-create {
        background: #29fb7e; outline: none !important;}
    
    .category_name {text-align: left;}
    .category_name h4 {font-size: 30px; margin: 10px 0 20px; line-height: 48px;}
    .category_name .icon_dappscat {background: url(../images/icon_cat.png) no-repeat 0 0;}
    .category_name .icon_game {background: url(../images/icon_game.png) no-repeat 0 0;}
    .category_name .category_icon {display: inline-block; width: 48px; height: 48px; margin-right: 10px;}
    
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

    .form-hackathon .nav>li>a:focus, .form-hackathon .nav>li>a:hover {
        background-color: #206992; text-decoration: underline; background: #206992;color: #6cffb8;}
    .form-hackathon .select-value {display: none !important;}
    .btn-danger {color: #ffffff; background-color: #ff5c67; border-color: #ff5c67; font-size: 20px;}
    .btn-danger:hover, .btn-danger:active, .btn-danger:focus, .btn-danger:active:hover {
        color: #ffffff; background-color: #ff8b93; border-color: #ff7982; font-size: 18px;}
    #creation-form .dapps-plate .dapp-tab>li.active>a, #creation-form .dapps-plate .dapp-tab>li.active>a:focus, 
    #creation-form .dapps-plate .dapp-tab>li.active>a:hover {
        max-height: 127; color: #6effb6; cursor: default; background-color: #0d85a7; background: linear-gradient(to top, #0aadd8 0%, #2ea3ce 100%);
        border: 1px solid #ddd; border-bottom-color: transparent; padding: 10px 30px;}
    #creation-form .dapps-plate .dapp-tab>li>a>p {padding-bottom: 20px;}
    #creation-form .dapps-plates .dapp-tab>li>a {
        margin-bottom: 20px; margin-right: 4px; line-height: 1.42857143; border: 1px solid transparent; border-radius: 8px 8px 0 0; 
        background-color: #175069; background: linear-gradient(to top, #00324e 0%, #206992 100%); text-align: center; 
        text-decoration: underline; padding: 10px 30px; color: #6effb6; font-size: 18px;}
    #creation-form .nav>li>a:focus, #creation-form .nav>li>a:hover {text-decoration: none; background-color: #076996; background: #076996;}

/* my-dapps.php */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    #dapps-list a.inactive {text-align: left; cursor: pointer; font-size: 18px; color: #717e94; background-color: #eaf0f7; border: solid 1px #f3f6f9;}
    #dapps-list a.inactive:hover {background-color: #d3ebf5;}
    .modal .one-settings {margin-bottom: 10px; }
    .modal .one-settings p {font-size: 16px; color:#2c6484; margin: 0 0 5px;}    
    .modal .one-settings .input-group-addon:last-child {border-left: 0; background-color: #eaf0f7; border-color: #eaf0f7;}
    .one-settings .input-lg {font-size: 16px; height: 36px;}
    .form-control {border: 1px solid #eaf0f7;}
    .form-control:focus {border-color: #06ffc8; box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 4px rgba(31, 226, 132, 0.28);}    
    .form-hackathon .btn-me {color: #fff; border: none; font-size: 16px; background: #42d3e6; padding: 8px 10px; line-height: 1.65;}   
    .form-hackathon .btn-me:hover {background: #4fe0f3;}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* FOOTER admin */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    .social {padding-bottom: 10px;}
    .social h4 {color: #858a90; font-size: 18px; font-family: 'Ubuntu-R', sans-serif; }
    .social ul {padding: 0; list-style: none; margin: 10px 0 10px;}
    .admin-footer a {color: #b1b8b9;}
    .admin-footer a:hover {color: #ffffff;}
    .admin-footer .social li {display: inline-block; padding-top: .3em;}
    .admin-footer .social li a {          
        font-size: 26px; display: block; margin: 0 12px; color: #9fa9b5; border: none; -webkit-transition: all .2s ease; transition: all .2s ease;}
    .admin-footer .social li a:hover {color: #e7eef5;}
    .admin-footer {min-height: 80px;background: #2e3439;padding-top: 30px;}
    .admin-footer .copyright-info {color: #858a90; border-top: 1px solid rgba(255,255,255,.1); margin: 15px 0 20px; padding: 15px 0;}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    .switch {position: relative;  display: block;  width: 60px; height: 34px;}
    /* Hide default HTML checkbox */
    .switch input {opacity: 0; width: 0; height: 0;}
    /* The slider */
    .slider {
        position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
        background-color: #ccc; -webkit-transition: .4s; transition: .4s;}
    .slider:before {
        position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px;
        background-color: white; -webkit-transition: .4s; transition: .4s;}
    input:checked + .slider {background-color: #2196F3;}
    input:focus + .slider {box-shadow: 0 0 1px #2196F3;}
    input:checked + .slider:before {-webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px);}
    /* Rounded sliders */
    .slider.round {border-radius: 34px;}
    .slider.round:before {border-radius: 50%;}
 /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
 
/* MEDIA */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    @media (min-width : 1700px) {   }
    @media (min-width : 1400px) {.container {width: 1400px;}}
    @media (max-width : 1690px) {   }
    @media (max-width : 1460px) {   }
    @media (max-width : 1400px) {
        .dapps-plate .contract_block h3 {font-size: 18px;}
    }
    @media (max-width : 1500px) {
        .btn-default {padding: 12px 10px;}
    }   
    @media (max-width : 1200px) and (min-width: 992px) {
        .btn-primary, .btn-default {font-size: 16px;} 
    }
    @media (max-width: 1200px) { 
        .form-hackathon .dapps-plate .contract_block h3 {font-size: 19px; }
    }
    @media (max-width: 992px) { 
        .form-hackathon .dapps-plate>li {float: none; margin-bottom: 0px; display: inline-block;}
        .form-hackathon .dapps-plate .contract_block h3 {font-size: 26px;}
        .dapps-plate .col-md-3, .dapps-plate .col-md-12 {padding-right: 15px; padding-left: 15px;}
        #page-wrapper .container {width: auto; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;}
    }
    @media (max-width: 767px) { 
        .dapp-type-block {padding: 10px 5px 10px;}
        .btn-primary {font-size: 16px;} 
        .back-block {margin-bottom: 15px;}
        .cont-page {margin-bottom: 0px;}
        .modal .close {position: inherit; color: #626873;}
        .market-text h1 {font-size: 32px;}
        .left-bar .categories_block {min-height: auto; text-align: center;}
        .category_name {text-align: center;}        
    }
    @media (max-width: 667px) {
        .phone_device:after {display: none;}
    } 
    @media (max-width: 568px) {
        .form-hackathon {border-radius: 0;}    
    }
    @media (max-width: 480px) {
        .btn-primary {font-size: 16px; padding: 12px 20px;}
        .btn-primary:hover {text-decoration: none;}
        .btn-default {border: none; font-size: 14px; padding: 0; color: #00c382; background: inherit; text-decoration: underline;}
        .btn-default:hover {font-size: 14px; padding: 0; border: none; color: #00c382; background: inherit; text-decoration: none;} 
        .modal-body {padding: 5px 10px 20px;}    
        .creation-form {display: block; margin-bottom: 20px; padding-top: 20px;}
        .form-hackathon .input-group-addon {white-space: inherit;}
        .form-hackathon .form-control {}
        .form-hackathon .title-step {margin-top: 15px;}
        .btn-danger, .form-hackathon .btn-me {border-radius: 0px;}
        .form-hackathon .title-step {margin: 10px 0px 10px;}
        .form-hackathon {margin-left: 0px; margin-right: 0px; margin-bottom: 0px;}
        .cont-page {margin-bottom: 0px;}
        .btn-add {white-space: initial; padding: 8px 8px;}
        .btn-customize {white-space: initial;}
        .header-market h2 {font-size: 22px;}
        .market-text h2 {font-size: 18px;}
        .market-text h1 {font-size: 28px;}
        .navbar-brand {max-width: 150px;}
        .page-content-dapp .caption h2 {font-size: 32px;}
    } 
    @media (max-width: 380px) {
        .page-content-dapp .caption {padding: 0px;}
        .page-content-dapp .caption {margin-left: 0px;}    
        .block-caption .icon {float: none;}
        .phone_device {background: none; margin: 0 auto; position: inherit; height: 650px;}
        .phone_device .simulator_preview {width: 300px; top: 20px; left: 15px; position: inherit;}
    }
    @media (max-width: 320px) {
        .phone_device .simulator_preview {left: 9px;}
    }    
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/