/* Custom dapps page */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/  
    .custom_dapps h4 {color: #5fabd9; font-size: 22px; margin-bottom: 30px;}
    .custom_dapps p {font-size: 16px;}
    .custom_dapps .fa-color {color: #04dcdd; font-size: 20px; margin-right: 5px;}    
    .custom_dapps .my-custom-dapp a {text-decoration: underline;}
    .custom_dapps .my-custom-dapp a:hover {text-decoration: none;}   

/* simulator */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/   
    .custom_dapp_simulator html {background-color: #ffffff;}
    .custom_dapp_simulator {margin-bottom: 60px;}
    .custom_dapp_simulator .dapp-type-h-style {margin-top: 10px; font-size: 28px;}
    
    .custom_dapp_simulator #simulator-iframe {box-shadow: 0px 5px 30px 4px rgba(25, 25, 28, 0.22); border: none;}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/       
    .custom_dapps_section {
        margin-left: 25px; margin-right: 25px; box-shadow: 0 4px 9px 0 rgba(23,28,33,.06);
        margin-bottom: 100px; padding: 20px 10px 20px; background: #fff; border-radius: 5px;}
    .custom_dapps_section .stepone_custom {display: inline-block; margin-bottom: 20px;}
    .custom_dapps_section .stepone_custom a {text-decoration: underline;}
    .custom_dapps_section .stepone_custom a:hover {text-decoration: none;}
    .stepone_img img {width: 60px; float: left; display: inline-block; margin-right: 20px;}
    .stepone_img  p {margin: 15px 0 10px;}
    
    .cont-page h1 {margin-top: 21px; font-size: 18px; color: #69768c; font-family: sans-serif;}
    .custom_dapps_form .title-step {font-family: 'Ubuntu',sans-serif, Arial; margin-top: 0px; color: #5180b3; font-size: 28px;}    
    .custom_dapps_form .input-group-addon {font-size: 16px;}
    .custom_dapps_form .form-control, #gaspriceModal .form-control, .test-param .form-control {
        background-color: #fbfbfb; background-image: none; outline: 0; border: none; border-radius: 0px;
        border-bottom: 1px solid #ced4da; display: block; -webkit-transition: border linear .2s,box-shadow linear .2s;
        -moz-transition: border linear .2s,box-shadow linear .2s; -o-transition: border linear .2s,box-shadow linear .2s;
        transition: border linear .2s,box-shadow linear .2s; color: #323d4e; font-size: 18px; box-shadow: none;}
    .custom_dapps_table thead {background: #6e7e99; color: #fff;}
    .custom_dapps_table .form-control {border: none; border-radius: 0px; background: none; box-shadow: none; padding: 3px 3px;}
    #step-block3 {padding: 5px;}
    .step-block4-1, .step-block4-2, #step-block5, #step-block6 {padding: 5px;}    
    
    .custom_dapps_table .table>tbody>tr>th {vertical-align: middle; min-width: 60px;}
    .custom_dapps_table .table>tbody>tr>td {vertical-align: middle; min-width: 120px;}
    .custom_dapps_table .table-bordered {border: 1px solid #99a8c061;}
    .custom_dapps_table .btn-danger {margin-top: 0px;}
    
    .options-wrapper {padding:10px 15px;}
    #options-wrapper .form-control:focus, #gaspriceModal .form-control:focus {
        box-shadow: 0 1px 0 0 #2fb2e6 !important; border-bottom: 1px solid #0be1d7; background-color: #f0f6fd; color: #01b4bd;}
    #options-wrapper .form-control {
        background-color: #fbfbfb; background-image: none; outline: 0; border: none; border-radius: 0px;
        border-bottom: 1px solid #ced4da; display: block; -webkit-transition: border linear .2s,box-shadow linear .2s;
        -moz-transition: border linear .2s,box-shadow linear .2s; -o-transition: border linear .2s,box-shadow linear .2s;
        transition: border linear .2s,box-shadow linear .2s; color: #323d4e; font-size: 18px; box-shadow: none;}
    #options-wrapper {padding: 10px 15px;}
    
    .modal .options-modal .btn-block a {color: #fff; text-decoration: none;}   
    
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/       
    @keyframes click-wave {
        0% {height: 40px; width: 40px; opacity: 0.35; position: relative;}
        100% {height: 200px; width: 200px; margin-left: -80px; margin-top: -80px; opacity: 0;}}
    .check-color .option-input {
        outline: none !important;
        -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none;
        position: relative; top: 13.33333px; right: 0; bottom: 0; left: 0; height: 40px; width: 40px;
        transition: all 0.15s ease-out 0s; background: #cbd1d8; border: none; color: #fff; cursor: pointer;
        display: inline-block; margin-right: 0.5rem; outline: none; position: relative; z-index: 1;}
    .check-color .option-input:hover {background: #9faab7;}
    .check-color .option-input:checked {background: #04d5e0;}
    .check-color .option-input:checked::before {
        height: 40px; width: 40px; position: absolute; content: '✔';
        display: inline-block; font-size: 26.66667px; text-align: center; line-height: 40px;}
    .check-color .option-input:checked::after {
        -webkit-animation: click-wave 0.65s; -moz-animation: click-wave 0.65s; animation: click-wave 0.65s; background: #40e0d0;
        content: ''; display: block; position: relative; z-index: 100;}
    .check-color .option-input.radio {border-radius: 50%;}
    .check-color .option-input.radio::after {border-radius: 50%;}     
    .form-check label {font-size: 20px;  color: #1c4f69; font-weight: 500;}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/   

/* Custom dapps page */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/      
    .dapp-type-block .ace_editor {
        width: 800px!important; height: 300px; }
    .custom_dapps_section pre {background-color: #403f3f; color: #f0f3f6; margin-top: 20px;}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/     
    .custom_dapps .save-text h4 {margin-bottom: 10px;}    
    .custom_dapps .save-text p {font-size: 18px;}
    .back-block {padding-bottom: 40px;}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/    
    
/* Common styles */
.markup.comment {color: #af8b58; font-style: italic;}
.markup.equal {color: #ae5e33;}
/* HTML */
.markup.html.doctype {color: grey;}
.markup.html.tag {color: #ffe5ae;}
.markup.html.attr-name {color: #f3f6f9;}
.markup.html.attr-value {color: #a1c261;}
/* CSS */
.markup.css.selector {color: #609dc3;}
.markup.css.property {color: #c4d4e3;}
.markup.css.value {color: #f2f5f8;}
/* JS */
.markup.js.string {color: #a7c561;}
.markup.js.number {color: #649cbf;}
.markup.js.operator {color: #c77033;}
.markup.js.function {color: #ffbf70;}

.params-string-input {background: #323232; border: none; border-bottom: solid 1px #262626; padding: 7px 3px 3px; outline: none!important; min-width: 500px;}
.params-string-input:focus {border-bottom: solid 1px #6b6c41;}

#creation-form .test-param .input-group-addon {font-size: 22px;}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/  
#hackathon-container .custom-title h1 {color: #ffffff; font-size: 42px;}
#hackathon-container .custom-title p {color: #ffffff; font-size: 20px;}
.my-custom-dapps {margin-left: 60px; margin-right: 60px;}
.my-custom-dapp {    
    box-shadow: 0 4px 9px 0 rgba(23,28,33,.06); padding: 20px 10px 20px;  border: solid 1px #e3e3e3;
    background: #fff; min-height: 180px; border-radius: 5px; margin-bottom: 40px;
    -webkit-transition: all 300ms; -moz-transition: all 300ms; -ms-transition: all 300ms;
    -o-transition: all 300ms; transition: all 300ms;}
.my-custom-dapp:hover {   
    -webkit-box-shadow: 0 13px 20px rgba(0,0,0,.24);
    -moz-box-shadow: 0 13px 20px rgba(0,0,0,.24);
    box-shadow: 0 13px 20px rgba(0,0,0,.24);}

.my-custom-dapp .img-left {float: left; display: inline-block;}
.my-custom-dapp img { width: 80px;}
.my-custom-dapp .block-right {display: inline-block; margin-left: 12px;}
.my-custom-dapp h4 {font-family: 'Ubuntu', sans-serif, Arial; color: #406690; font-size: 20px; margin-top: 0px; border-bottom: dotted 1px #8f9092;}

.my-custom-dapp .editpublish a {color: #00bdca; font-family: 'Ubuntu-M', sans-serif, Arial; text-decoration: underline;}
.my-custom-dapp .editpublish a:hover {text-decoration: none;}
.my-custom-dapp .editpublish .fa {margin-right: 10px;}
.my-custom-dapp .editpublish {font-size: 18px;}
.my-custom-dapp .editpublish form button {padding: 0; margin-top: 5px;}
.my-custom-dapp .editpublish p {margin: 15px 0 3px;}
 
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ 

.img-custom-edit {margin-bottom: 30px; box-shadow: 0 11px 36px 0px rgba(62, 63, 63, 0.38);}

@media (max-width: 480px) {
    .custom_dapps_section {margin-left: 0px; margin-right: 0px;}
    .stepone_img img {float: none; margin-bottom: 10px;}
    .my-custom-dapp .img-left {float: none; display: block; margin-bottom: 10px;}
    .my-custom-dapps {margin-left: 15px; margin-right: 15px;}
    .my-custom-dapp {margin-bottom: 20px; margin-top: 20px;}
    .cont-page .overlay {padding: 20px 0 60px;}
}