/* MODAL */
.modal {
    padding: 30px!important;
    border-radius:2px!important;
    left: 0;
    top: 0;
    z-index:210!important;
    /* width: 54%!important; */
	min-height: 40%;
	max-height: 80%;
    max-width: 70%!important;
    background-color: #323749!important;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    color:#40BBCD;
    overflow: auto;
}

a#validation{
    float:right;
    color:#40BBCD;
}

div.col-12 .ss-main {
	width: 100% !important;
	margin-bottom: 1em;
}

.forbidden {
    cursor:not-allowed;
}

.alert, .alert-danger, .modal-container .alert-danger {
    display:none;
    background: rgba(208, 38, 36, 0.6) !important;
    /* width: auto; */
    padding: 10px;
	color: #ffffff;
	border: none;
    border-radius: 3px;
}

img.mr-3.logo-edit {
    /* width: 7%; */
    padding: 17px;
}

.modal-container {
    /* position: relative;
    top: 20px;
    left: 50%;
    transform: translate(-50%, 0); */
    background-color: rgba(50,55,73,1);
    /* width: 96%;
    min-height: 400px;
    border-radius: 0.2rem; */
}

/* .modal-container h2 {
    padding-bottom: 15px;
} */
.modal h2 {
    padding-bottom: 15px;
}

.show-modal {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

.had-container{
	width:100%;
	clear:both;
}
.had-container .row{
	margin-bottom:0;
}

.profile_show_form{
	display:inline-block;
	float:left;
	width:80%;
	clear:both;
}
    
.profil-counting{
    display:flex;
    flex-direction:column;
    width:100%;
    font-family: 'maven_proregular';
    font-size:0.875em;
    color:rgba(255,255,255,1);
    /* display:inline-block; */
    margin-bottom:20px;
}
 

h2 {
    margin-top:0;
    /* margin-bottom: 60px; */
    font-family: 'dosis_regular', sans-serif;
    font-size:100%!important;
    line-height:1em;
    text-transform:uppercase;
}

label {
    color: #9F9EA3!important;
}

.modal a.close-modal {
    background-image: url(../../img/assets/icones/close-btn.svg)!important;
    width: 20px!important;
    height: 20px!important;
    top: 30px!important;
    right: 30px!important;
}


.modal a.close-modal:hover {
    background-image: url(../../img/assets/icones/close-btn-hover.svg)!important;
}

.blocker {
    z-index: 200!important;
}
.row-custom, div#user_change_password {
    display:flex;
    flex-direction:row;
    flex-flow:row wrap;
    column-gap: 2rem;
    row-gap: 2rem;
    margin-bottom:30px;
}
.input-field, .select-field, #user_change_password .form-group {
    display:flex;
    flex-direction:column;
    min-width:28%;
    margin-right:20px;
}

.input-field label, .select-field label, .custom-li label {
    position: relative;
    top:0;
    left:0;
}

.input-file-container {
 float:left;
 cursor: pointer;
}

/* Toogle push DSP */
#filter-segment {
    width: 450px!important;
    color:white;
    overflow: visible;
}
div#filter-segment {
    height: 250px;
}
.daterangepicker {
    direction: ltr;
    text-align: left;
    color: black!important;
}
.btn-modal.segment-filter-apply {
    position: absolute;
    bottom: 25px;
    right: 25px;
}

.row-custom-button, .row-custom-text {
    width:100%;
    min-width:100%;
}



.row-custom-button {
 height: 27.5px;
 margin-top:30px;
}


input, select {
    display: block;
}

input[type="email"],
input[type="password"],
input[type="text"],
input[type="file"],
input[type="number"] {
    background-color: #323748 !important;
}


.btn-modal {
    float: right;
}

/* MODAL EDIT WIDGET */
input#dashboard_add_widget_type_st_name{
    width: 230px;
}

 .row, .long-input {
    width: 100%;
}

.row .select-field  {
    width : 30%;
}

.select-field select {
    width : 80%;

}


select#dashboard_add_widget_type_st_dashboardChart, select#dashboard_add_widget_type_st_type
,#user select, #user input
 {
    width: 200px;
    margin-right: 25px;
}
.logo-edit {
  /* margin-left: 80px;

  height: auto;
  position: relative;
  top: -100px; */
  position: absolute;
  right: 30px;
  width: 80px;
top:0;
}

.container {
    max-width: 100%;
}

#dashboard_add_widget_type_st_clients option,
#dashboard_add_widget_type_st_dashboardChart option,
select#dashboard_add_widget_type_st_type option {
    background-color: #323749;
}

#dashboard_add_widget_type_st_clients option:active,
#dashboard_add_widget_type_st_dashboardChart option:active,
select#dashboard_add_widget_type_st_type option:active {
    background-color: #556258!important;
    outline-color: #323749!important;
}

html:focus, body:focus {
    outline-color: #323749!important;
}
/* #dashboard_add_widget_type_st label{
    margin-top:50px;
} */

select#dashboard_add_widget_type_st_partners {
    height: 100px;
}

/* #modal form > div > div{
	float:left;
} */

/* Custom  user */
#modal form > div#user > div:first-child{
	display:block;
	float:none;
}

div#user_update_password {
    margin-top: 30px;
}

div#user_clients {
    min-width: 200px;
    overflow: hidden;
    max-height: 200px;
    overflow-y: auto;
}

#user_lastname:after { content: \"\"; display: table; clear: both; }

#user_clients input[type="checkbox"] {
    position: relative;
    top: 17px;
    width: 15px!important;
    margin-bottom: 1em;
}

#user_clients label {
    position: relative;
    top: -12px;
    right: -30px;
}


/* Override input type File */
.file-path {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.file-path + .label-input-file {
    font-size: 1.25em;
    font-weight: 700;
    color: white;
    background-color: black!important;
    display: inline-block;
}

.file-path:focus + .label-input-file,
.file-path + .label-input-file:hover {
    background-color: red!important;
}

.file-path + .label-input-file {
	cursor: pointer!important; /* "hand" cursor */
}

.file-path:focus + .label-input-file {
	outline: 1px dotted #000;
	outline: -webkit-focus-ring-color auto 5px;
}

.file-path-wrapper{
    position: relative;
    width: 225px;
}

/* File input https://www.creativejuiz.fr/blog/tutoriels/input-file-personnalise-css-js */
/* styles de base si JS est activé */
.js .input-file-container {
    position: relative;
    width: 160px;
    text-align: left;
    cursor: pointer;

}

label.input-file-trigger {
    color: white!important;
    cursor: pointer;
}

  .js .input-file-trigger {
    border-radius: 2px!important;
    display: block;
    padding: 5px 5px;
    background-color: #40BBCD;
    color: #fff;
    font-size: 1em;
    /* transition: all .4s; */
    text-indent: 10px;
    cursor: pointer;
    margin-top: 15px;
  }

  .js .input-file {
    position: absolute;
    top: 0;
    left: -90px;
    width: 225px;
    /* padding: 14px 0; */
    margin-top:17px;
    opacity: 0;
    cursor: pointer;
  }


  /* quelques styles d'interactions */
  .js .input-file:hover + .input-file-trigger,
  .js .input-file:focus + .input-file-trigger,
  .js .input-file-trigger:hover,
  .js .input-file-trigger:focus {
    background: #34495E;
    color: #39D2B4;
  }

  /* styles du retour visuel */
  .file-return {
    margin: 0;
  }
  .file-return:not(:empty) {
    margin: 1em 0;
  }
  .js .file-return {
    font-style: italic;
    font-size: .9em;
    font-weight: bold;
    float: left;
    margin-top: 21px;
    margin-left: 20px;
        line-height: 4;
  }
  /* on complète l'information d'un contenu textuel
     uniquement lorsque le paragraphe n'est pas vide */
  .js .file-return:not(:empty):before {
    content: "Selected file: ";
    font-style: normal;
    font-weight: normal;
  }

  p.required-field {
    position: relative;
    bottom: -25px;
    color: #9F9EA3!important;
	width: 120px;
}

.yes, .cancel , button.btn-skaze-tools.cancel, button.btn-skaze-tools.yes{
    float: right;

}
.cancel {
    color: #d1d1d1;
    margin-right: 30px;
    border: 1px solid #d1d1d1;
    background-color: transparent;
    font-weight: normal;
    opacity: .7;
}

.input-field.library {
    float: right;
    width: 68%;
    max-width: 60%;
    margin-right: 0px;
}


/* Site */

  .row-custom ul {
      width: 100%!important;
      min-width: 80%!important;
      position: relative;
      top: -18px;
      /* float: left; */
      /* width: 300px!important; */
  }
  .custom-li input, .form-group input {
      width: 98%;
  }
  .custom-li label {
  position: relative;
  top: 15px;
  right: -30px;
}

.custom-li textarea, .form-textarea, #tm_site_tmTags textarea, textarea#tm_library_script, textarea.script  {
  width: 100%;
  background: rgba(10,10,10,0.2);
  border: 1px solid #888;
  color: white;
  border-radius: 3px;
  margin-top: 30px;

}

textarea .script {
   height: 40em;
}
 textarea#tm_library_script {
 height: 20em;
 }
.custom-li, fieldset {
    padding:30px;
    border-radius : 3px;
    border : 1px solid #fff;
    margin-bottom: 20px;
}

span.form-error-message, span.form-error-icon.badge.badge-danger.text-uppercase {
    color: #40BBCD;
}
a.remove-tag {
    position: initial;
    top: 18px;
    /* right: 87%; */
    color: #fff;
    font-size: 1em;
    border: 0.5px solid #fff;
    padding: 2px 4px;
    border-radius: 3px;
    transition: 0.3s;
}

a.remove-tag:hover {
  color: #DD2207;
  border: 0.5px solid #DD2207;
}

#tm_site_token {
    display:none;
}

#user_change_password .form-group {
    min-width: 29%;
    margin-right: 20px;
}

.generator {

	width: 29%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-flow: row wrap;
}

.generator:active {
	 transform: scale(0.9);
}

#user_new_form .generator svg:hover {
	-webkit-filter: drop-shadow(6px 6px 5px rgba(63, 187, 205, 0.4));
	filter: drop-shadow(6px 6px 5px rgba(63, 187, 205, 0.4));
	transition: all 1s cubic-bezier(0.20, -0.20, 0.15, 1.55);
}

.generator svg {
	cursor: pointer;
	position: relative;
	width: 25%;
	height: 100%;
}

/* SlimSelect single */
.ss-main .ss-single-selected {
  border:0;
  border-bottom: dashed 3px rgba(64,187,205,1);
  color : white;
  background: transparent!important;
  border-radius:0;
}

/* Datepicker for modal-segment */
input#datepicker, .select, .datepicker-container label {
    background-color: transparent!important;
     color: rgba(255,255,255,.8);
}

#datepicker {
    border: 0;
    border-bottom: 0.2em dashed #1B7799!important;
    text-align: center;
    padding: .5em;
    margin-bottom: 10px;
    width:100%;
}
/* Raphaël desktop */
@media screen and (min-width:1281px) and (max-width:1441px) {
	.modal {
		min-width: 70% !important;
	}
}

@media only screen and (max-width:1280px) {
  .modal {
      padding: 30px!important;
      border-radius:2px!important;
      position: fixed;
      left: 0;
      top: 0;
      z-index:210!important;
      width: 90.20833333333333%!important;
      max-width: 90.20833333333333%!important;
      /* height: 100%; */
      background-color: #323749!important;
      transform: scale(1.1);
      transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
      color:#40BBCD;
  }
}

/* Less than 768px => Only one column */
@media (max-width:1040px) {
    .left-column,
    .right-column,
    div#layout {
        width: 100%!important;
    }
    div#layout {
        flex-wrap:wrap;
        text-align: center;
    }
    .input-field, .select-field,  #user_change_password .form-group {
  min-width: 100%;
}
.generator {
	width: 100%;
}

.generator svg {
	width:10%;
}
}