* {box-sizing: border-box;}
h1 {margin-top:1rem;}

/** CLOSE **/
/* The Close Button */
.ui-close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.ui-close:hover,
.ui-close:focus
{
    color: #000;
    text-decoration: none;
    cursor: pointer;
}


/** BOUTON **/

button:focus {outline:0;}
.ui-button
{
	border-style:none;
	background-color: #ed1b7f;
	padding:.4rem;
	color:#FFFFFF;
	text-transform: uppercase;
	cursor: pointer;
}

.ui-button:hover
{
	background-color: #ed1b7f;
}




/** MODAL **/
.ui-modal
{
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.ui-modal-content
{
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width:700px;
}

/* BOUTON GROUP */
.ui-btn-group button
{
    background-color: #ed1b7f; /* Green background */
    border: 1px none green; /* Green border */
    color: white; /* White text */
    padding: 10px 24px; /* Some padding */
    margin-left:1rem;
    cursor: pointer; /* Pointer/hand icon */
    float: right; /* Float the buttons side by side */
    text-transform:uppercase;
    font-weight: bold
}

.ui-btn-group button:not(:last-child) {
    border-right: none; /* Prevent double borders */
}

/* Clear floats (clearfix hack) */
.ui-btn-group:after {
    content: "";
    clear: both;
    display: table;
}

/* Add a background color on hover */
.ui-btn-group button:hover
{
    background-color: #ed1b7f;
}


/* Dropdown Button */


/* The container <div> - needed to position the dropdown content */
.ui-dropdown
{
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.ui-dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.ui-dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.ui-dropdown-content a:hover {background-color: #f1f1f1}


/*******************************/
/*** INPUT TEXT
/*******************************/

/* TODO */
.ui-input {box-sizing: border-box;}







/********************************/
/** EFFECT 					   **/
/********************************/

.ui-hide {display:none;}
.ui-show {display:block;}

.ui-float-right {float:right;}
.ui-float-left {float:left;}


/********************************/
/** CURSOR                     **/
/********************************/

.ui-waiting {cursor:progress;}


/*******************************************************************/
/** LO
/*******************************************************************/


/*********************************/
/*** PROPERTIES
/*********************************/

.lo-hide {display:none!important;}
.lo-no-margin {margin:0 !important;}
.lo-relative {position:relative!important;}

/*********************************/
/*** IMG CONTAINER
/*********************************/

.lo-img-container
{
    background-color:#FFFFFF;
    border-color:#EEEEEE;
    border-style:solid;
    border-width:1px;
    margin-bottom:1rem;
    padding:.5rem;
    min-height:5rem;
}


/*********************************/
/*** FIELD
/*********************************/

.lo-field { margin-bottom:1rem; }
.lo-field input[type=submit]
{
    box-sizing:border-box;
    margin-top:.3rem;
    padding:.5rem;
    background-color:#2a2a2a;
    border:1px solid #d3d3d3;
    color:#bababa;
    padding:.5rem;
    min-width:7rem;
}

.lo-field input[type=text] {height:2rem;width:100%;min-width:200px;}


/**********************************/
/*** BUTTON
/**********************************/

.lo-button-dark {background-color:#2a2a2a;color:#bababa;} /** comme le bouton input['submit'] **/

.lo-link {border-bottom:solid 1px #2a2a2a;}
.lo-link:hover {border-bottom-color:#ed1b7f;color:#ed1b7f;}


a.lo-button, button.lo-button
{
    box-sizing:border-box;
    margin-top:.3rem;
    background-color:#f7f7f7;
    border:1px solid #d3d3d3;
    padding-left:.5rem;padding-right:.5rem;
    padding-top:.2rem;padding-bottom:.2rem;
    display:inline-block;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-radius:0;
    cursor:pointer;
    font-size:15px;
}

button.lo-button:hover, a.lo-button:hover {background-color:#ed1b7f!important;color:#FFFFFF;}

/**********************************/
/*** BUTTON GROUP
/**********************************/

.lo-button-group {margin-bottom:1rem;}
.lo-button-group a
{
    box-sizing:border-box;
    margin-top:.3rem;
    background-color:#f7f7f7;
    border:1px solid #d3d3d3;
    padding-left:.5rem;padding-right:.5rem;
    padding-top:.2rem;padding-bottom:.2rem;
}

.lo-button-group a:hover {background-color:#ed1b7f!important;color:#FFFFFF;}
.lo-button-group a:hover:not(:.lo-disabled), .lo-button-group a.lo-selected
{
    background-color:#ed1b7f;
    color:#FFFFFF;
}



/**************************************/
/*** TOOLS BAR
/**************************************/

.lo-tools-bar
{
    width:100%;
    border-style:solid;
    border-width:1px;
    border-color:#000000;
    padding:.5rem;
    background-color:#FFFFFF;
    max-width:130px;
}

.lo-tools-bar .lo-separator {height:1rem;width:100%;}
.lo-tools-bar .lo-header {background-color:#CCCCCC;width:100%;height:20px;margin-bottom:.5rem;}
.lo-tools-bar .lo-button-group {width:100%;}
.lo-tools-bar .lo-button-group:last-child {margin-bottom:0;}
.lo-tools-bar .lo-button-group a {width:100%;line-height:100%;}






/*********************************/
/*** INFO
/*********************************/

/** lo-ERROR **/
.lo-info
{
    padding:1rem;
    line-height:130%;
    margin-bottom:2rem;
    max-width:600px;
}

.lo-info h4, .lo-info h3, .lo-info p {margin-top:0;margin-bottom:.5rem;}

.lo-error
{
    background-color:#FFD2D2;
    color: #D8000C;
}

.lo-warming
{
    color: #9F6000;
    background-color: #FEEFB3;
}

/************************************/
/*** IFRAME
/************************************/

iframe.lo-iframe
{
    border-style:none;
    width:100%;
}


.iframe-wrapper
{
    position:relative;
    width:100%;
    height:100vh;
    border-style:solid;
    border-width: 1px;
    border-color:#CCCCCC;
    padding:.5rem;
    box-sizing: border-box;
    background-color:#FFFFFF;
}

.iframe-wrapper.mobile-iframe { width:360px; margin:auto;}
.iframe-wrapper iframe {height:100%;}