/*--- Structural Styling ---*/
.modal-content{
  border-radius: 0!important;
  width: 1024px;
  border: none;
}

.topbar{
  border-bottom: 1px solid #ddd;
}
.topLogo{
  width: 190px!important;
  height: auto !important;
}

/*--------------------------*/
.content-wrapper {
height: 90%;
border: none;
  }
.content-wrapper .row{
border: none !important;
    width: 100%;
    margin: 0!important;
}
.content-wrapper button:hover {
  background-color: #fefefe!important;
}
.modal-header {
  background-color:#fff;
  color:#222;
}
.modal-header, .advertiser-logo{
  padding: 15px;
    border-bottom: 1px solid #e5e5e5;
    width:100%;
}
.modal-body{
 width: 100%;
 padding: 0 10px;
 margin-top: 30px;
}
.modal-header{
  width:100%;
}

.section-wrap{
  display: inline-block;
  vertical-align: top;
  margin: 0;
  border: 1px solid #ddd;
  box-shadow: 0px 3px 13px -2px #ccc;
  border-radius: 5px;
  margin: 0;
  padding: 0;
}
.row-wrap{
  display: flex;
}
.col-wrap-left{
  flex: 5;
  width: 66.66%;
}
.col-wrap-right{
  width: 33.33%;
  flex: 3;
  padding-left: 0;
  margin-top: 25px;
  margin-bottom: 50px;
  height: fit-content;
}
.left-div{
  width: 100%;
  min-height: 100%;
  margin-right: 15px;
  padding: 20px;
  box-sizing: border-box;
}
.right-div{
  width:100%;
  min-height: 100%;
  padding: 0;
}

.logo_wrap{
  display: block;
  width:100%;
  clear: both;
  overflow: hidden;
  margin: 0 0 20px 0;
}
.thumbnail_wrap{
  display: inline-block;
  margin-right:15px;
  width: 100%;
}

.copy_wrap{
  display: inline-block;
  max-height: 687px;
  overflow-y: auto;
  color: #999;
}


.copy_wrap > span{
  font-weight: normal;
  text-align: left;
  line-height: 2em;
}
.copy_wrap, .copy_wrap  p, .copy_wrap  span{
  text-align: left;
}

.asset-title{
  margin: 10px 0 !important;
  color: #222;
  word-break: break-word;
}
.asset-logo{
  position: relative;
  cursor: pointer;
}
.asset-logo > img{
  height: auto !important;
  max-width: 100%;
}
.logo-edit{
  display: none;
  position: absolute;
  right: 0px;
  top: 0;
  width:100%;
  height: 100%;
  cursor: pointer;

}
.asset-logo:hover .logo-edit {
  cursor: pointer;
  display: block;
}

/*--- Form CSS Here---*/
.validation-error {
    color: red;
    font-size: 13px;
}
#loadWrapper{
  overflow-y: auto;
  overflow-x: hidden;
  height: 85%;
  padding: 10px 15px 0px 15px
}
.draggable{
    float: left;
    position: relative;
    width: 90%;
    margin: 5px 20px;
    padding: 5px 0;
    background-color: white;
}
.draggable .form-label{
  width: 100%;
  padding: 5px;
  margin: 0;
  display: inline-block;
  text-align: left;
  vertical-align: top;
  cursor: default;
}
.draggable .form-control{
  display: inline-block;
  width: 50%;
  margin: 0 0 0 20px;
}

.handle{
  cursor: move;
}
.handle:before {
  content: '.';
  position: absolute;
  top: 0;
  right: 0;
  font-size: 10px;
  line-height: 20px;
  color: #999;
  text-shadow: 0 3px #999, 0 6px #999, 3px 0 #999, 3px 3px #999, 3px 6px #999, 0 9px #999, 3px 9px #999 0 12px #999, 3px 12px #999;
}

.ui-sorable-helper {
width: 98%;
height: auto;
  display: inline-block;
border: 1px solid rgba(0,0,0,.1);
background-color: rgba(204,204,204,.4);
border-radius: 3px;
margin: 5px;
  padding: 40px;
}

.downloadWrap{
  margin: 10px 0;
  text-align: center;
/*  font-size: 12px;*/
}
.saveWrap{
  margin: 10px 0;
  padding: 0!important;
}
.saveWrap > button{
  margin: 10px 0 0 10px;
}

.email .action-wrap{
  visibility: hidden;
}

ul#customerPolicy, ul#mlPolicy {
	padding:0px 30px 0px 35px;
	list-style:none;
}

ul#mlPolicy {
	border-top: 1px solid #757575;
    padding-top: 15px;
    margin-top: 15px;
}

ul#customerPolicy  li, ul#mlPolicy li{
	margin-bottom:15px;
}

ul#customerPolicy  li input[type=checkbox] {
	display:none;
}

ul#customerPolicy  li span.customPolicy p {
    margin: 0 0 10px;
}

/*----Inline Editable elements---*/
.form-header{
  position: relative;
  font-weight: 600;
  margin: 0;
  padding: 10px;
  color: #fff;
  background:#0f86de;
  border-radius: 5px 5px 0 0;
}

.form-header.contenteditable:focus, .download-label.contenteditable:focus{
border: 1px solid #ccc;
background:#fff;
color: #222;
}
.form-header.contenteditable:focus:after, .download-label.contenteditable:focus:after{
  content: ' ';
  }
.download-label{
  position: relative;
  font-weight: 600;
  margin: 0;
  padding: 10px;
  background:#249af2;
  max-width: 150px;
  min-width: 90px;
  color: #fff;
  background:#2ea2f8;
  overflow: hidden;
}

.download-label.contenteditable:after{
    position: absolute;
    bottom: 12px;
    right: -15px;
    content: ' ';
    font-weight: normal;
    color: #444;
    }

.download-label.contenteditable:focus + label{
      display: none;
}


/*----- floating-Lable style start -----*/
.floating-label {
  position:relative;
  margin-bottom:10px;
  float: none;
  width: 100%;
}

.floating-input {
  padding:4px 4px;
  display:block;
  width:100%;
  height:30px;
  background-color: transparent;
  border:none;
  border-bottom:1px solid #757575;
  color:   color: #333;
}
.floating-select {
  padding:0;
  display:block;
  width:100%;
  height:30px;
  background-color: transparent;
  border:none;
  border-bottom:1px solid #0f86de;
  position: relative;
  cursor: pointer;
    color: #333;
}
.floating-select > select{
    padding:4px 4px;
     outline:none!important;
     border: none;
     width: 100%;
     -webkit-appearance: none;
     -moz-appearance: none;
     -o-appearance: none;
     appearance: none;
}
.floating-select:before{
  font-family: "Glyphicons Halflings";
  content: "\e252";
  height: 10px;
  line-height: 30px;
  position: absolute;
  right: 3px;
  top: 1px;
  width: 10px;
  pointer-events: none;
  color: #333;
  font-size: 8px;
  }
.floating-input:focus , .floating-select > select:focus {
     outline:none!important;
     border-bottom:1px solid #0f86de;
}

.floating-label > label {
  color:#999;
  /* font-size:14px; */
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:5px;
  -moz-transition:0.2s ease all;
  -webkit-transition:0.2s ease all;
  -o-transition: 0.2s ease all;
  transition:0.2s ease all;

}
.single-checkbox-wrap{
  border-bottom:1px solid #757575;
  position:relative;
  margin-bottom:10px;
  float: left;
  width: 88%;
}

.single-checkbox-wrap > label {
  color:#999;
  font-weight:normal;
  cursor: pointer;
}
/* .form-control.radio-wrap, .form-control.multi-checkbox-wrap{
  border: none;
} */


.multi-checkbox-wrap, .radio-wrap{
  width: 100%;
  border-bottom:1px solid #757575;
  margin-bottom: 10px;
}
.multi-checkbox-wrap > label, .radio-wrap > label, .form-label  > label{
  color:#999;
  font-weight:normal;
 margin: 0 0 5px 0;
  display:block;
  clear: both;
  cursor: pointer;
  width: 100%;
}
.multi-checkbox-wrap input[type=checkbox], .single-checkbox-wrap input[type=checkbox]{
  width: 16px;
  margin: 0 10px 0 0;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  height: 16px;
  vertical-align: middle;
  outline: none;
  cursor: pointer;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfjAwYKIiHYgzUoAAAAAW9yTlQBz6J3mgAAAHBJREFUKM9jLGZlqGNIYZBgwAQvGOYwNDFb9TCUM/AwYAM8DHYMzIzFbxmEMhhUsMjfYZjBwPCOiUGIAas0VFSIiYEAGFUAU/CRgeERVqlHDAwMDB9ZGJYxZE7CbcASZqt9DCIMWgysWCS/McxjKAYALDwTKjt/T7MAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTktMDMtMDZUMTA6MzQ6MzMrMDA6MDCWtMgxAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE5LTAzLTA2VDEwOjM0OjMzKzAwOjAw5+lwjQAAAABJRU5ErkJggg==') no-repeat;
}
.multi-checkbox-wrap input[type=checkbox]:checked, .single-checkbox-wrap input[type=checkbox]:checked{
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAAAdVBMVEWE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1Iiq4a3l9ual36j8/vyy5LTB6cOO2JKg3qT6/fq45rrc893m9ueL14+c3J/4/Pi/6cGJ1o3j9ePk9uX1+/XG68fL7c3///9gPixIAAAAD3RSTlMGhOnqhY+G7fCSkQmU85XoXuKRAAAAAWJLR0QmWgiYtQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB+MDBgojLyYgKW4AAAABb3JOVAHPoneaAAAAXElEQVQY02NgYGTihwNmFgYGVn4UwMbAjirAzsCPBvAJCAiiCggJi8AFRMX4+cUlJBFapKRlZOXkkcxQUFRSVkExVEZQlRhroQIcqHwOBk5UAS4Gbh5eBJeXjxsAAkMPcTsREBcAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTktMDMtMDZUMTA6MzU6NDcrMDA6MDCH/I4FAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE5LTAzLTA2VDEwOjM1OjQ3KzAwOjAw9qE2uQAAAABJRU5ErkJggg==')  no-repeat;
}
.radio-wrap input[type=radio]{
  width: 19px;
  margin: 0 10px 0 0;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  height: 18px;
  vertical-align: middle;
  outline: none;
  cursor: pointer;  background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAASCAQAAAATBS3iAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfjAwsNKhC2oXFCAAAAAW9yTlQBz6J3mgAAATBJREFUKM990rtOVAEQBuBvT+iMCI3WuEgQYyzOGwhLJCaYCM9BVoj6BMZoZXwNLx0rZCGo9ZzCmBAvCy2XAgUfYCw2iJg9/lPOV0zyTyOdppo1744meta8Kzt/Vhp9Vl331D381MO4Eaxrl1/+YtWsty5Y9dK2Q1w2ZcldvyyUXZDiahxERjudn2hHxn6MpSSG4n1kPPgXpRQrkbEZQ0lMR0Z3EEopNiLjdios4pm6PMcihZYTn2vZJydaFJq+OaplP/Q0KSQa/peksGvCaC0ZNW6HQtewm7XslmEbFF7jcS17hFcUPtgyUy0PMtVD0zZ97Jc1FvsDy1qOjL1+Wf3qW964aM0L2w5wxQ1L5s6qP32kSU/cx7HvuOYSVq2UX8/9G1Qz5s1pYkdHp1w/u/I3ThecFcVhPjoAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTktMDMtMTFUMTM6NDI6MTYrMDA6MDBlGdrXAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE5LTAzLTExVDEzOjQyOjE2KzAwOjAwFERiawAAAABJRU5ErkJggg==') no-repeat;
}
.radio-wrap input[type=radio]:checked{
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAASCAMAAACO0hVbAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAAAz1BMVEX///+E1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1IiE1Ij///8VEGsfAAAAQ3RSTlMARpTc25NKKbDvy7go9LQcBvJFIulw6CEEwHF9SHO9Q7sWrq28QpdEA7GvlvEXBXzN/v1H2gKsQb5ydee3HbbwJ5KR6OBeFwAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAAAHdElNRQfjAwsNLBDg+9bEAAAAAW9yTlQBz6J3mgAAANhJREFUGNNVkOtWwjAQhCdQC0QsAYWiqSA3qXKtVRS1Fp33fydC0wrMn0m+c+bs7AIHiVKZdC5c/KtSJWtS1sjLeo7EFT3RUKohPDZbGbq+YbtItNnxjXVveWfM1Towds9eF+jzARgMaTQaAGNOgEdOET4x03MIwRlQni8QMJfAYu4AlEvogq2g1hEQSXXOXmw2Ps2+5jOqFg3f7AzbZXNAm6zLu+n8wa0pG2gdG/vkODTmd467bfnlZ49Wk99xolQS/BQ3AOojMpUyJb3d8YLTXyeKnL/Y/vaDsCbcf3D8NQAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxOS0wMy0xMVQxMzo0NDoxNiswMDowMGgHqpAAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTktMDMtMTFUMTM6NDQ6MTYrMDA6MDAZWhIsAAAAAElFTkSuQmCC') no-repeat;
}

.floating-input:focus ~ label{
  top:-18px;
  font-size: 0.8em;
  color:#0f86de;
}
.floating-input:not(:placeholder-shown) ~ label {
  top:-18px;
  font-size: 0.8em;
  color:#0f86de;
}

.floating-select ~ label{
  top:-18px;
  font-size: 0.8em;
  color:#0f86de;
}
.floating-select:not([value=""]):valid ~ label {
  top:-18px;
  font-size: 0.8em;
  color:#0f86de;
}


.floating-textarea {
   min-height: 30px;
   max-height: 260px;
   overflow:hidden;
  overflow-x: hidden;
}

.highlight {
  position:absolute;
  height:50%;
  width:100%;
  top:15%;
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
.floating-input:focus ~ .highlight , .floating-select > select:focus  ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  -o-animation: inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* animation */
@-webkit-keyframes inputHighlighter {
	from { background:#0f86de; }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:#0f86de; }
  to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:#0f86de; }
  to 	{ width:0; background:transparent; }
}

.hideUI > .floating-label, .hideUI > .multi-checkbox-wrap, .hideUI > .single-checkbox-wrap, .hideUI > .radio-wrap,.hideUI .asset-logo,  .hideUI img{
  pointer-events: none;
    opacity: 0.7;
 }

/*For country state hybrid field*/
.floating-input.state-field-hide, .floating-select.state-field-hide{
  display: none!important;
}

/*---- floating-Lable style end ----*/

/*--- Common Classes ---*/
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.no-padding{
  padding: 0!important;
}
.removeUI{
  display: none!important;
}
/*.error {
  margin-bottom: 10px;
color: red;
display: none;
}*/

/*
.hideUI *:not([data-id]){
  opacity: 0.7;
}
*/

.download-btn{
  background:#0eaeff;
  color: #fff;
}
.footer{
    color: #ccc;
}


/*--- Thank You Page ---*/
.thanks-wrap{
   border: 1px solid #ddd;
   margin: 30px 0;
   color: #5ebbff;
    box-shadow: 0px 3px 13px -2px #ccc;
}
.thanks-wrap h1{
   font-size: 36px;
   font-weight: 600;
   font-size: 40px;
   font-weight: 600;
}
.icon-tick{
   font-size: 12em;
}
.padding-large{
   padding: 30px;
}
.padding-medium{
   padding: 20px!important;
}
.padding-small{
   padding: 10px;
}

.edit-container {
   display: flex;
   flex-direction: column;
   align-items: center;
}

/* .padding-medium {
	 margin: 0 10%;
} */

.edit-copyright {
  margin-left: 15% !important;
}

.asset-thumbnail {
  float: left;
  margin: 0 30px 20px 0;
}

/*--- Media Query for small Screen---*/

@media only screen
and (min-device-width : 320px)
and (max-device-width : 747px) {

  .col-wrap-right{
        width: 100%;
    }
    .col-wrap-left{
      width: 100%;
    }
    [class*="col-md-"] {
    padding: 0;
    }

      .container-fluid{
        padding: 0;
    }

    .modal-body {
    padding: 0;
    margin-top: 30px;
    }
    .row-wrap{
  display: block;
}
    .right-div{
        margin: 30px 0 0 0;
    }
    .asset-logo > img{
      max-width: 100%!important;
    }
	.left-div .thumbnail_wrap .asset_thumb > img {
      width:100% !important;
    }
	.asset-logo {
      float: none !important;
      margin: 0;
	}
	.thumbnail_wrap{
	  float: none;
      width: 100%;
      margin: 0;
	}
}


/*---- floating-Lable select box style  ----*/

.select-length{
  width: calc(97% - 30px) !important;
}

.floating-select-label{
  font-size: 0.8em;
  color: #0f86de !important;
}

@media only screen
and (min-device-width : 748px) {
  .left-div .thumbnail_wrap .asset_thumb > img{
    max-width: 300px !important;
    height: auto !important;
  }
}