/*--------------------------------------

TITLE

---------------------------------------*/

.flatty-header {

    display: flex;

    position: relative;

    align-items: center;

    justify-content: space-between;

    width:100%;

    margin-bottom:20px;

}

.flatty-header img {

    max-width:100px;

    margin-right:20px;

}

.flatty-header h1 {

    position: relative;

    top:-3px;

    font-size:36px;

    font-weight:200;

}

.flatty-header .submit {

    text-align:right;

    margin:0 0 5px 0;

    padding:0;

}

.flatty-header p {

    margin:0;

    font-size:12px;

    font-weight:600;

}

/*--------------------------------------

INTRODUCTION

---------------------------------------*/

.introduction {

    display:block;

    position: relative;

    box-sizing: border-box;

    width:100%;

    max-width:350px;

    margin:50px auto;

}

/*--------------------------------------

ROW - COLUMN

---------------------------------------*/

.flatty-flex {

    display: flex;

    position: relative;

    box-sizing: border-box;

    align-items: center;

}

.flatty-column {

    display: flex;

    flex-direction: column;

    position: relative;

    box-sizing: border-box;

    justify-content: center;

}

.flatty-row {

    display: flex;

    flex-direction: row;

    align-items: center;

    flex-grow:1;

}

.flatty-row.multi-column {

    justify-content:flex-end;

}

.flatty-row.multi-column .flatty-column:first-Child {

    margin-right:30px;

}

.flatty-row.multi-column .flatty-column span {

    font-size:12px;

    font-weight:600;

    margin-bottom:5px;

}

/*--------------------------------------

CONTAINER

---------------------------------------*/

.flatty-container {

    display: flex;

    flex-direction: row;

    flex-wrap: wrap;

    position: relative;

    box-sizing: border-box;

    background-color: #FBF9F9;

    box-shadow: 0 0 60px rgba(0, 0, 0, 0.12);

    margin: 0 0 40px;

    border-radius: 10px;

    overflow: hidden;

}

.flatty-container .flatty-container-title {

    display:flex;

    flex-direction:column;

    position:relative;

    align-items:center;

    justify-content:center;

    padding:20px;

    flex-basis:200px;

    flex-grow:1;

    font-size:20px;

    font-weight: 300;

    color:#fff;

}

.flatty-container .flatty-container-title i.dashicons {

    font-size:30px!important;

    margin-bottom:10px;

}

.flatty-container .flatty-container-content {

    display:flex;

    flex-direction: column;

    position:relative;

    box-sizing:border-box;

    padding:20px;

    justify-content: center;

    flex-basis:500px;

    flex-grow:8;

} 

/*--------------------------------------

OPTION

---------------------------------------*/

.flatty-option {

    display:flex;

    flex-direction:row;

    flex-wrap:wrap;

    justify-content:space-between;

}

/*.flatty-option .flatty-column:nth-child(2) {

    flex-grow: 1;

    flex-basis: 400px;

    align-items: flex-end;

}*/

.flatty-option input[type=radio] {

    flex-grow:0!important;

}

.flatty-option:nth-child(1n+2) {

    padding-top:10px;

    margin-top:10px;

    border-top:solid 1px #eee;

}

.flatty-option label {

    font-size:16px;

    font-weight:600;

    margin-bottom:3px;

}

.flatty-option .flatty-description {

    font-size:12px;

    font-style:italic;

    font-weight:500;

    opacity:.7;

}

.flatty-option .button-remove i {

    width:auto;

    height:auto;

    font-size:30px;

    color:#df3b3b;

    padding-left:5px;

    cursor:pointer;

}



/*--------------------------------------

PREVIEW IMAGES

---------------------------------------*/

.flatty-preview {

    width:145px;

    height:100px;

    border: solid 4px #fff;

    border-radius: 10px;

    margin-right: 20px;

    box-shadow: 0 0 20px #dedede;

}

.flatty-preview.login-light {

    background-image:url("../../imgs/login/light.jpg");

    background-size:cover;

}

.flatty-preview.login-minimal-light {

    background-image:url("../../imgs/login/minimal_light.jpg");

    background-size:cover;

}

.flatty-preview.login-dark {

    background-image:url("../../imgs/login/dark.jpg");

    background-size:cover;

}

.flatty-preview.login-minimal-dark {

    background-image:url("../../imgs/login/minimal_dark.jpg");

    background-size:cover;

}

.flatty-preview.login-custom {

    background-image:url("../../imgs/login/custom.jpg");

    background-size:cover;

}

/*--------------------------------------

OPTION FIELDSET

---------------------------------------*/

.flatty-option fieldset {

    width:100%;

}

fieldset label {

    margin-right:auto;

}

.flatty-option fieldset .flatty-row {

    margin-bottom:10px;

}

/*--------------------------------------

OPTION SUBTITLE

---------------------------------------*/

.flatty-option-subtitle {

    display:block;

    position:relative;

    font-size:16px;

    font-weight:700;

    color:#ccc;

    margin-top: 30px;

    margin-bottom:-10px;

}

/*--------------------------------------

FLATTY BUTTON

---------------------------------------*/

.button.flatty-button {

    padding: 5px 15px;

    font-size: 18px;

    height: auto;

    color: #fff;

    border: none;

    text-shadow: 0px 1px 1px #000;

    box-shadow: 0 5px 10px rgba(0, 0, 0, 0);

    opacity: .8;

}

.button.flatty-button.update {

    background: linear-gradient(45deg, rgb(239, 195, 34) 0%,rgb(195, 109, 37) 100%);

}

.button.flatty-button.preview {

   background: linear-gradient(45deg, #03A9F4 0%,#3F51B5 100%);

}

.button.flatty-button:hover,

.button.flatty-button:active {

    color:#fff;

    opacity: 1;

    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);

}

/*--------------------------------------

COLOR PICKER

---------------------------------------*/

.wp-picker-holder {

    position: absolute;

    bottom: 50px;

    right: 0;

    z-index: 9;

}

.wp-picker-container.wp-picker-active {

    display:flex;

}

.wp-picker-container .wp-color-result {

    margin:0 10px;

}

.wp-picker-container.wp-picker-active .wp-picker-input-wrap {

    display:flex;

}