.close-picer {


    border: 1px solid #fff;


    position: absolute;


    border-radius: 50%;


    width: 25px;


    height: 25px;


    display: -webkit-flex;


    display: flex;


    -webkit-justify-content: center;


    justify-content: center;


    padding-top: 1px;


    font-size: 22px;


    cursor: pointer;


    z-index: 1;


    color: #fff;


    right: 16px;


    top: 6px;


}


.blog-clock-container {


    width: 100%;


    height: 100%;


    border-radius: 4px 4px 4px 4px;


    padding: 4% 0;


}





.clock-container .title-cont {


    background: rgba(3, 201, 169, 0.6);


    color: #595959;


}





.success-db {


    width: 98%;


    background: #2CC36B;


    display: -webkit-flex;


    display: flex;


    -webkit-justify-content: center;


    justify-content: center;


    -webkit-align-items: center;


    align-items: center;


    height: 30px;


}





.error-db {


    width: 98%;


    height: 30px;


    background: #EA6153;


    display: -webkit-flex;


    display: flex;


    -webkit-justify-content: center;


    justify-content: center;


    -webkit-align-items: center;


    align-items: center;


}





/*-------------- backend ---------------*/





.clock-container {


    display: -webkit-flex;


    display: flex;


    -webkit-flex-direction: column;


    flex-direction: column;


    width: calc(100% - 18px);


}





.clock-container > div {


    margin-top: 10px;


    display: -webkit-flex;


    display: flex;


    -webkit-align-items: center;


    align-items: center;


    background: rgba(3, 201, 169, 0.2);


    height: 56px;


}





html body .submit-container {


    -webkit-justify-content: flex-start;


    justify-content: flex-start;


    background: transparent;


}





body .submit-container input {


    background: rgba(3, 201, 169, 0.6);


    border-radius: 3px 3px 3px 3px;


    margin-left: 10%;


    padding: 0 30px;


    cursor: pointer;


    outline: none;


    height: 30px;


    border: none;


}





.clock-container > div > * {


    margin-left: 20px;


}





.clock-container > div > input[type=text] {


    height: 35px;


    border: 1px solid rgba(3, 201, 169, 0.6);


    width: 700px;


    color: #595959;


    border-radius: 3px 3px 3px 3px;


}





.clock-container > div > input[type=checkbox] {


    margin-left: 40px;


}





.clock-container > div > h4 {


    margin-left: 40px;


}





.clock-container .bg-color {


    width: 250px;


    cursor: pointer;


    height: 30px;


    display: -webkit-flex;


    display: flex;


    -webkit-align-items: center;


    align-items: center;


    border: 1px solid rgba(3, 201, 169, 0.6);


    border-radius: 3px 3px 3px 3px;


    overflow: hidden;


}





.clock-container .bg-color .color {


    width: 50px;


    height: 100%;


    background: red;


}





.clock-container .bg-color .title {


    display: -webkit-flex;


    display: flex;


    height: 100%;


    -webkit-align-items: center;


    align-items: center;


    width: calc(100% - 30px);


    -webkit-justify-content: center;


    justify-content: center;


    background: #fff;


}





.clock-container .text-color {


    height: 30px;


    width: 50px;


    cursor: pointer;


    display: -webkit-flex;


    display: flex;


    -webkit-justify-content: center;


    justify-content: center;


    -webkit-align-items: center;


    align-items: center;


    background: red;


}





/*----------- color picer --------------*/





.color-picker-panel {


    top: 0;


    opacity: 0;


    z-index: -1;


    background: #1F232A;


    width: 310px;


    border-radius: 8px;


    position: absolute;


    border: 2px solid #364347;


    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);


}





.color-picker-panel.active {


    z-index: 1;


    opacity: 1;


}





.panel-row {


    position: relative;


    margin: 0 10px 10px;


}


.panel-row:first-child {


    margin-top: 10px;


    margin-bottom: 6px;


}


.panel-row:after {


    content: "";


    display: table;


    clear: both;


}





.panel-header {


    background: #15191C;


    padding: 8px;


    margin: 0 -10px 10px;


    text-align: center;


}





.swatch {


    display: inline-block;


    width: 32px;


    height: 32px;


    background: #ccc;


    border-radius: 4px;


    margin-left: 4px;


    margin-bottom: 4px;


    box-sizing: border-box;


    border: 2px solid #364347;


    cursor: pointer;


}





.default-swatches {


    width: 212px;


}


.default-swatches .swatch:nth-child(6n + 1) {


    margin-left: 0;


}





.color-cursor {


    border-radius: 100%;


    background: #ccc;


    box-sizing: border-box;


    position: absolute;


    pointer-events: none;


    z-index: 2;


    border: 2px solid #fff;


    transition: all .2s ease;


}


.color-cursor.dragging {


    transition: none;


}


.color-cursor#spectrum-cursor {


    width: 30px;


    height: 30px;


    margin-left: -15px;


    margin-top: -15px;


    top: 0;


    left: 0;


}


.color-cursor#hue-cursor {


    top: 0;


    left: 50%;


    height: 20px;


    width: 20px;


    margin-top: -10px;


    margin-left: -10px;


    pointer-events: none;


}





.spectrum-map {


    position: relative;


    width: 212px;


    height: 200px;


    overflow: hidden;


}





#spectrum-canvas {


    position: absolute;


    width: 100%;


    height: 100%;


    top: 0;


    left: 0;


    right: 0;


    bottom: 0;


    background: #ccc;


}


.hue-map {


    position: absolute;


    top: 5px;


    bottom: 5px;


    right: 29px;


    width: 10px;


}





#hue-canvas {


    border-radius: 8px;


    position: absolute;


    top: 0;


    right: 0;


    bottom: 0;


    left: 0;


    width: 100%;


    height: 100%;


    background: #ccc;


}





.button {


    background: #2A3137;


    border: 0;


    border-radius: 4px;


    color: #8B949A;


    font-size: 1rem;


    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);


    outline: none;


    cursor: pointer;


    padding: 4px;


}


.button:active {


    background: #262c31;


}


.button.eyedropper {


    position: absolute;


    right: 0;


    top: 0;


    width: 68px;


    height: 68px;


    display: block;


}


.button.add-swatch {


    display: block;


    width: 170px;


    margin: 10px auto 0;


}


.button.mode-toggle {


    position: absolute;


    top: 0;


    right: 0;


    width: 68px;


    height: 30px;


}





.value-fields {


    display: none;


    align-items: center;


}


.value-fields.active {


    display: flex;


}


.value-fields .field-label {


    margin-right: 6px;


}


.value-fields .field-input {


    background: #15191C;


    border: 1px solid #364347;


    box-sizing: border-box;


    border-radius: 2px;


    line-height: 38px;


    padding: 0 4px;


    text-align: center;


    color: #8B949A;


    font-size: 1rem;


    display: block;


}





.rgb-fields .field-group {


    display: flex;


    align-items: center;


}


.rgb-fields .field-input {


    width: 42px;


    margin-right: 10px;


}





.hex-field .field-input {


    width: 170px;


}





.color-indicator {


    display: inline-block;


    vertical-align: middle;


    margin-right: 10px;


    width: 20px;


    height: 20px;


    border-radius: 4px;


    background: #ccc;


}





input::-webkit-outer-spin-button,


input::-webkit-inner-spin-button {


    /* display: none; <- Crashes Chrome on hover */


    -webkit-appearance: none;


    margin: 0;


    /* <-- Apparently some margin are still there even though it's hidden */


}




.clock-container > div ol {
    display: block;
    font-size: 14px;
    font-weight: 600;
}

.clock-container > div ol li {
    float: left;
    margin-bottom: 0;
    margin-left: 20px;
    width: 100%;
}


.clock-container > div.displays{
   display: block;
    height: auto;
    padding-bottom: 20px;	
}


body .submit-container input{
	margin-left:0;
}

#shorrtcode_generated{
	font-weight:bold;
}