/*------------------------------------------------------------------
    1. Font face
-------------------------------------------------------------------*/
@font-face {
    font-family: 'droid';
    src: url('fonts/DroidNaskh-Regular.eot');
    src: local('droid'), local('droid'), url('fonts/DroidNaskh-Regular.ttf') format('truetype');
}


/*------------------------------------------------------------------
    2. Main, Header and footer
-------------------------------------------------------------------*/
#kalimah-settings {
    margin-top: 40px;
    width: 841px;
}

#kalimah-settings-left-logo
{
	display: none;
}
#kalimah-admin-right-panel {
    -webkit-border-radius: 5px;
    -webkit-border-top-left-radius: 0;
    -moz-border-radius: 5px;
    -moz-border-radius-topleft: 0;
    border-radius: 5px;
    border-top-left-radius: 0;
    background-color: #F9F9F9;
    float: left;
    width: 648px;
    border: 1px solid #00409B;
    margin-left: 2px;
    min-height: 870px;
    position: relative;
}

#kalimah-settings-header {
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    border-top-left-radius: 5px;
    border: 1px solid #00409B;
    border-bottom: 1px solid #A3B8D1;
    width: 190px;
    min-height: 200px;
    margin-left: -1px;
}

#kalimah-settings-header h1 {
    color: #5d5d5d;
    font-size: 20px;
    line-height: 20px;
    text-shadow: 1px 1px #e8ecef;
    font-family: OpenSans, "Trebuchet MS";
    margin: 0;
    padding: 10px 15px;
	text-align: center;
}

#kalimah-settings-header > h1:nth-child(2) {
    padding: 0px 5px 25px;
}

#kalimah-settings-left {
    position: relative;
    float: left;
    width: 190px;
    margin-right: -3px;
    background-color: #D5E4F1;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    padding-bottom: 20px;
    border-left: 1px solid #00409B;
    border-bottom: 1px solid #00409B;
    border-right: 1px solid #00409B;
}

#kalimah-settings-menu {
    width: 192px;
    margin-left: -1px;
}

#kalimah-settings-menu ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}

#kalimah-settings-menu ul .kalimah-settings-menu-li {
    border-bottom: 1px solid #A3B8D1;
    border-left: 1px solid #00409B;
    border-right: 1px solid #00409B;
    margin: 0;
    position: relative;
}

#kalimah-settings-menu.animate ul .kalimah-settings-menu-li.clicked,#kalimah-settings-menu ul .kalimah-settings-menu-li.clicked {
    border-right: 1px solid #F9F9F9 !important;
    position: relative;
    background-color: #F9F9F9;
	z-index: 1;
}


#kalimah-settings-menu ul li .kalimah-settings-menu-link {
    background-color: #D5E4F1;
    color: #1d1d1d;
    display: block;
    font-family: KottaOne, "Trebuchet MS";
    font-size: 14px;
    font-weight: 500;
    line-height: 13px;
    padding: 14px 0 13px 45px;
    position: relative;
    text-decoration: none;
    box-shadow: none;
}

#kalimah-settings-menu ul li .kalimah-settings-menu-link .item-icon {
  color: #0d393e;
  font-size: 20px;
  height: 20px;
  left: 9px;
  position: absolute;
  width: 20px;
}

#kalimah-settings-menu ul li .kalimah-settings-menu-link .item-icon.ti {
  font-family: "themify";
}

#kalimah-settings-menu.animate ul li .kalimah-settings-menu-link {
    color: #0A213C;
    display: block;
    font-family: KottaOne, "Trebuchet MS";
    font-size: 14px;
    font-weight: 500;
    line-height: 13px;
    padding: 14px 0 13px 16px;
    position: relative;
    text-decoration: none;
    box-shadow: none;
    transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
}

#kalimah-settings-menu.animate ul li .kalimah-settings-menu-link:focus {
    outline: 0;
    box-shadow: none;
}

#kalimah-settings-menu.animate ul li .kalimah-settings-menu-link:hover,
#kalimah-settings-menu.animate ul li.clicked .kalimah-settings-menu-link {
    color: #1d1d1d;
    box-shadow: none;
    padding-left: 40px;
	
}

#kalimah-settings-menu.animate ul li .kalimah-settings-menu-link .item-icon {
    position: absolute;
    left: 10px;
    top: 10px;
    opacity: 0;
    height: 20px;
    width: 20px;
    transition: all .50s ease-in-out;
    -webkit-transition: all .50s ease-in-out;
    -moz-transition: all .50s ease-in-out;
    -o-transition: all .50s ease-in-out;
}

#kalimah-settings-menu.animate ul li .kalimah-settings-menu-link:hover .item-icon,
#kalimah-settings-menu.animate ul li.clicked .kalimah-settings-menu-link .item-icon {
    opacity: 1;
}

#kalimah-settings-menu ul li .visible {
    background-color: #F9F9F9;
    color: #1d1d1d;
    border-right: 0;
    background-image: none;
}

#kalimah-settings-content {
    width: 100%;
    float: left;
    position: relative;
    padding-bottom: 30px;
    min-height: 700px;
}

#kalimah-settings-content > div  {
    display: none;
    padding: 5px 15px 13px 20px;
}

#kalimah-settings-content .visible {
    display: block;
}

#kalimah-settings-footer {
    border-top: 1px solid #3c6589;
    bottom: 0;
    float: left;
    left: 0;
    padding: 10px 5px;
    position: absolute;
    right: 0;
}

#kalimah-settings-content > div {
    width: 90%;
}



.kalimah-settings-content-box .image-title {
    vertical-align: middle;
    padding-bottom: 25px;
}

.kalimah-settings-content-box .image-title h1 {
    float: left;
    font-family: KottaOne, "Trebuchet MS";
    font-size: 25px;
    margin: 21px 0;
}

.kalimah-settings-content-box .image-title span {
  float: left;
  font-size: 30px;
  margin: 20px;
}

.kalimah-settings-content-box .image-title span.ti {
   font-family: "themify";
}

div#custom-background-image
{
	min-height: auto;
	border: 0 solid black;
}


#TB_overlay
{
	z-index: 1000 !important;
}

#TB_window
{
	width: 500px !important;
	min-height: 600px !important;
	z-index: 1100 !important;
}

#TB_ajaxContent
{
	width: 470px !important;
	min-height: 100% !important;
}


/*------------------------------------------------------------------
    3. Form elements
-------------------------------------------------------------------*/

#kalimah-settings-content .form-title, #post_options .form-title, #page_options .form-title{
    width: 155px;
    float: left;
    padding-top: 6px;
    font-family: OpenSans, "Trebuchet MS";
    font-size: 13px;
}

.shortcode-options .form-title
{
	width: 70px;
    float: left;
    padding-top: 12px;
    font-family: OpenSans, "Trebuchet MS";
    font-size: 13px;
}

#kalimah-settings-content .form-bit, #post_options .form-bit, #page_options .form-bit {
    float: left;
    min-width: 350px;
	max-width: 100%;
	padding-top: 6px;
	position: relative;
}

.shortcode-options .form-bit
{
	 float: left;
    min-width: 200px;
	padding-top: 6px;
	position: relative;
}

#kalimah-settings-content input[type="radio"],
#kalimah-settings-content input[type="checkbox"] {
    clear: both;
    float: left;
    margin: 0 !important;
}

#kalimah-settings-content input[data-slider="true"] {
    margin-right: 5px;
}

#kalimah-settings-content label {
    float: left;
    margin-left: 5px;
    margin-bottom: 0px;
    margin-top: 0px;
    font-family: "Trebuchet MS", OpenSans;
    font-size: 13px;
}

#kalimah-settings-content .kalimah-settings-section-start > div {
    width: 100%;
    margin-bottom: 20px;
    clear: both;
}

#kalimah-settings-content .kalimah-settings-softsection-start > div {
    margin-bottom: 20px;
}

#kalimah-settings-content .kalimah-settings-section-start {
    background-color: #E8F2F9;
    border-radius: 5px 5px 5px 5px;
    margin-bottom: 30px !important;
    padding: 0px 10px 5px;
    clear: both;
    transition: background-color .20s ease-in-out;
    -webkit-transition: background-color .20s ease-in-out;
    -moz-transition: background-color .20s ease-in-out;
    -o-transition: background-color .20s ease-in-out;
    border: 1px dashed #004799;
}

#kalimah-settings-content.glow .kalimah-settings-section-start:hover {
    background-color: #FFFFFF !important;
    border: 1px solid #004799;
}

hr {
    border: 0;
    color: #7EBDFC;
    background-color: #7EBDFC;
    height: 1px;
    width: 100%;
    text-align: left;
    margin-bottom: 15px;
}

.kalimah-settings-content-box h2 {
    font-family: OpenSans, "Trebuchet MS";
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px;
    padding-left: 5px;
    padding-top: 0px;
    color: #171E5E;
}

.kalimah-settings-content-box h3 {
    font-family: OpenSans, "Trebuchet MS";
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 10px;
    padding-left: 5px;
    padding-top: 0px;
    color: #171E5E;
}


.form-bit > span.desc {
    clear: both;
    display: block;
    font-size: 10px;
    margin-top: 5px;
    width: 100%;
}


.kalimah-settings-subsection-start {
  background-color: #e8f2f9;
  border-radius: 5px;
  clear: both;
  margin-bottom: 10px !important;
  overflow: hidden;
  padding: 0;
}

.kalimah-settings-subsection-start .options-header {
    background-color: #61A2CE;
    margin-bottom: 0px !important;
    cursor: move;
}

.kalimah-settings-subsection-start .options-box {
  background-color: white;
  border-color: #61a2ce;
  border-style: solid;
  border-width: 0 1px 1px;
  margin-bottom: 10px;
  padding: 10px 0 10px 10px;
  position: relative;
}


/* ----- 3.1 Switchbox --------*/
.switch {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.switch input[type="checkbox"],
.switch input[type="radio"] {
  display: none;
}
.switch input[type="checkbox"] + span,
.switch input[type="radio"] + span {
  display: block;
  position: relative;
  vertical-align: middle;
  border: 1px solid #e3e3e3;
  border-radius: 15px;
  background-color: #e3e3e3;
  cursor: pointer;
  height: 23px;
  width: 42px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition-property: border, background-color;
  -moz-transition-property: border, background-color;
  transition-property: border, background-color;
}
.switch input[type="checkbox"] + span, .switch input[type="checkbox"] + span:after, .switch input[type="checkbox"] + span:before,
.switch input[type="radio"] + span,
.switch input[type="radio"] + span:after,
.switch input[type="radio"] + span:before {
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.switch input[type="checkbox"] + span:after, .switch input[type="checkbox"] + span:before,
.switch input[type="radio"] + span:after,
.switch input[type="radio"] + span:before {
  display: inherit;
  content: " ";
  background: #ffffff;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform;
}
.switch input[type="checkbox"] + span:before,
.switch input[type="radio"] + span:before {
  border-radius: 15px;
  background-color: #e3e3e3;
  height: 22px;
  width: 42px;
}

.switch input[type="checkbox"] + span:after,
.switch input[type="radio"] + span:after {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 14px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
  height: 20px;
  width: 20px;
}
.switch input[type="checkbox"]:checked + span,
.switch input[type="radio"]:checked + span {
  border-color: #2ecc71;
  background-color: #2ecc71;
}
.switch input[type="checkbox"]:checked + span:before,
.switch input[type="radio"]:checked + span:before {
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}
.switch input[type="checkbox"]:checked + span:after,
.switch input[type="radio"]:checked + span:after {
  -webkit-transform: translateX(20px);
  -moz-transform: translateX(20px);
  -ms-transform: translateX(20px);
  -o-transform: translateX(20px);
  transform: translateX(20px);
}
.switch input[type="checkbox"]:disabled + span, .switch input[type="checkbox"]:disabled:checked + span,
.switch input[type="radio"]:disabled + span,
.switch input[type="radio"]:disabled:checked + span {
  background-color: #e3e3e3;
  border-color: #e3e3e3;
  cursor: default;
  box-shadow: none;
}
.switch input[type="checkbox"]:disabled + span:before, .switch input[type="checkbox"]:disabled:checked + span:before,
.switch input[type="radio"]:disabled + span:before,
.switch input[type="radio"]:disabled:checked + span:before {
  background-color: #e3e3e3;
}
.switch.switch-warning input:checked + span {
  background-color: #e67e22;
  border-color: #e67e22;
  box-shadow: inset 0px 0px 0px 16px #e67e22;
}
.switch.switch-danger input:checked + span {
  background-color: #e74c3c;
  border-color: #e74c3c;
  box-shadow: inset 0px 0px 0px 16px #e74c3c;
}
.switch.switch-info input:checked + span {
  background-color: #3498db;
  border-color: #3498db;
  box-shadow: inset 0px 0px 0px 16px #3498db;
}


/*------------ 3.2 Range -------------------*/
.kalimah-settings-range input[type=range] {
  -webkit-appearance: none;
  margin: 0;
  width: 200px;
  float: left;
  background: transparent;
}
.kalimah-settings-range input[type=range]:focus {
  outline: none;
}

.kalimah-settings-range input[type=range]::-webkit-slider-runnable-track {
  background: #ccc;
  background: -webkit-linear-gradient(top, #bbb, #ddd);
  background: -moz-linear-gradient(top, #bbb, #ddd);
  background: linear-gradient(top, #bbb, #ddd);

  -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
  -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);

  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;

  border: 1px solid #aaa;
  height: 5px;
  -webkit-appearance: none;
}

.kalimah-settings-range input[type=range]::-webkit-slider-thumb {
  background: #8DCA09;
  background: -webkit-linear-gradient(top, #8DCA09, #72A307);
  background: -moz-linear-gradient(top, #8DCA09, #72A307);
  background: linear-gradient(top, #8DCA09, #72A307);

  -webkit-box-shadow: inset 0 2px 2px rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.2);
  -moz-box-shadow: inset 0 2px 2px rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.2);
  box-shadow: inset 0 2px 2px rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.2);

  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;

  border: 1px solid #496805;
  width: 16px;
  height: 16px;
  cursor: pointer;
   -webkit-appearance: none;
   margin-top: -6px;
}

.kalimah-settings-range input[type=range]:focus::-webkit-slider-runnable-track {
/*  background: #367ebd;*/
}
.kalimah-settings-range input[type=range]::-moz-range-track {
  background: #ccc;
  background: -webkit-linear-gradient(top, #bbb, #ddd);
  background: -moz-linear-gradient(top, #bbb, #ddd);
  background: linear-gradient(top, #bbb, #ddd);

  -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
  -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);

  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;

  border: 1px solid #aaa;
  height: 4px;
}
.kalimah-settings-range input[type=range]::-moz-range-thumb {
   background: #8DCA09;
  background: -webkit-linear-gradient(top, #8DCA09, #72A307);
  background: -moz-linear-gradient(top, #8DCA09, #72A307);
  background: linear-gradient(top, #8DCA09, #72A307);

  -webkit-box-shadow: inset 0 2px 2px rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.2);
  -moz-box-shadow: inset 0 2px 2px rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.2);
  box-shadow: inset 0 2px 2px rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.2);

  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;

  border: 1px solid #496805;
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.kalimah-settings-range input[type=range]::-ms-track {
  /*background: #ccc;
  background: -webkit-linear-gradient(top, #bbb, #ddd);
  background: -moz-linear-gradient(top, #bbb, #ddd);
  background: linear-gradient(top, #bbb, #ddd);*/

  -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
  -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);

  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;

  border: 10px solid transparent;
  height: 4px;
}
.kalimah-settings-range input[type=range]::-ms-fill-lower {
 background: #ccc;
  background: -webkit-linear-gradient(top, #bbb, #ddd);
  background: -moz-linear-gradient(top, #bbb, #ddd);
  background: linear-gradient(top, #bbb, #ddd);

  -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
  -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);

  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;

  border: 1px solid transparent;
  height: 4px;
}
.kalimah-settings-range input[type=range]::-ms-fill-upper {
  background: #ccc;
  background: -webkit-linear-gradient(top, #bbb, #ddd);
  background: -moz-linear-gradient(top, #bbb, #ddd);
  background: linear-gradient(top, #bbb, #ddd);

  -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
  -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);

  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;

  border: 1px solid transparent;
  height: 4px;
}
.kalimah-settings-range input[type=range]::-ms-thumb {
  background: #8DCA09;
  background: -webkit-linear-gradient(top, #8DCA09, #72A307);
  background: -moz-linear-gradient(top, #8DCA09, #72A307);
  background: linear-gradient(top, #8DCA09, #72A307);

  -webkit-box-shadow: inset 0 2px 2px rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.2);
  -moz-box-shadow: inset 0 2px 2px rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.2);
  box-shadow: inset 0 2px 2px rgba(255,255,255,0.5), 0 2px 8px rgba(0,0,0,0.2);

  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;

  border: 1px solid #496805;
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.kalimah-settings-range input[type=range]:focus::-ms-fill-lower {
 /* background: #3071a9;*/
}
.kalimah-settings-range input[type=range]:focus::-ms-fill-upper {
 /* background: #367ebd;*/
}

.kalimah-settings-range .data-slider-value {
  float: left;
  padding-right: 3px;
}

.kalimah-settings-range .data-slider-units.multiple span:not(.active)
{
	display: none;
}

.kalimah-settings-range .data-slider-units.multiple
{
	position: relative;
	float: left;
}

.kalimah-settings-range .data-slider-units.multiple span {
  cursor: pointer;
  left: 0;
  position: absolute;
  top: 0;
}

/* ------ 3.3 Checkbox ---------*/
.kalimah-settings-checkbox label {
	  display:block;
	  clear: both;
	  padding: 2px 0;
  }
  
/* ------ 3.4 Radio-switch ---------*/
.kalimah-settings-radio label {
  display:block;
  clear: both;
  padding: 2px 0;
  }
  
  .kalimah-settings-radio-switch input[type=radio] {
  display:none;
  }
  
  .kalimah-settings-radio-switch label {
	margin-left:0px !important;
  }
  
.kalimah-settings-radio-switch  input[type=radio] + span {
    float: left;
    padding: .5em 1em;
    cursor: pointer;
    border: 1px solid #28608f;
    margin-right: -1px;
	margin-left: 0px !important;
    color: #B5C4E4;
    background-color: #428bca;
   }
   
.kalimah-settings-radio-switch input[type=radio] + span:hover {
    background-color: #66A2DA;
   }
   
.kalimah-settings-radio-switch label:first-of-type span{
     -webkit-border-top-left-radius: 5px;
		-webkit-border-bottom-left-radius: 5px;
		-moz-border-radius-topleft: 5px;
		-moz-border-radius-bottomleft: 5px;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
    }
    
.kalimah-settings-radio-switch  label:last-of-type span {
     -webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}
  
.kalimah-settings-radio-switch input[type=radio]:checked + span {
    background-color: #2d70ae;
    font-weight: bold;
	color: white;
}

.kalimah-settings-radio-switch input[type=radio]:checked + span:hover {
    background-color: #66A2DA;
   }
   
   /* ------ 3.5 Image-selector ---------*/
.kalimah-settings-images input[type='radio']
{
	display: none;
}
   .kalimah-settings-images .image-selector {
    border: 2px solid #BFBFBF;
    background-color: #FFFFFF;
    border-radius: 4px 4px 4px 4px;
    cursor: pointer;
    float: left;
    height: 85px;
    width: 85px;
    margin-right: 7px;
	margin-bottom: 7px !important;
    padding: 3px;
}

.kalimah-settings-images .image-selector img{
    height: 100%;
    width: 100%;
}

 /* Instead of using images for layout we would utilice css to create the layout icons*/
.kalimah-settings-images .css-selector {
    border: 2px solid #BFBFBF;
    background-color: #FFFFFF;
    border-radius: 4px 4px 4px 4px;
    cursor: pointer;
    float: left;
    height: 100px;
    width: 130px;
    margin-right: 7px;
	margin-bottom: 7px !important;
    padding: 3px;
}

.kalimah-settings-images .css-selector span{
    display: none;
	height: 100%;
	width: 100%;
}

.kalimah-settings-images .css-selector > div{
    border: 1px solid #BFBFBF;
    background-color: #C6C6C6;
    border-radius: 4px 4px 4px 4px;
    float: left;
    height: 100%;
    width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}



/*------------------------------------------------------------------
    5. Typorgraphy
-------------------------------------------------------------------*/

.kalimah-settings-typography {
    background: white none repeat scroll 0 0;
    border-top: 1px solid;
    padding-left: 5px;
    width: 98% !important;
	/* -webkit-transition: all 0.5s ease-in;
       -moz-transition: all 0.5s ease-in;
        -ms-transition: all 0.5s ease-in;
         -o-transition: all 0.5s ease-in;
            transition: all 0.5s ease-in;*/
}

.kalimah-settings-typography:hover {
    background: #F9F9F9 none repeat scroll 0 0;
    border-top: 1px solid;
    padding-left: 5px;
    width: 98% !important;
}

.kalimah-settings-typography .font-display {
    clear: both;
    padding: 15px 0;
}


.kalimah-settings-typography button {
    display: inline-block;
    margin: 0 10px 0 0;
    padding: 0px;
    font-size: 15px;
    font-family: "Bitter", serif;
    line-height: 1.8;
    appearance: none;
    box-shadow: none;
    border-radius: 0;
    cursor: pointer;
}

.kalimah-settings-typography .format-btns,
.kalimah-settings-typography .color-picker,
.kalimah-settings-typography .font-type {
    float: left;
}

.kalimah-settings-typography button:focus {
    outline: none
}

.kalimah-settings-typography .format-btns > label {
    background: #6496c8;
    /* Old browsers */
    background: -moz-linear-gradient(top, #6496c8 0%, #346392 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6496c8), color-stop(100%, #346392));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #6496c8 0%, #346392 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #6496c8 0%, #346392 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #6496c8 0%, #346392 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #6496c8 0%, #346392 100%);
    /* W3C */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#6496c8', endColorstr='#346392', GradientType=0);
    /* IE6-9 */
    border: medium none;
    border-radius: 5px;
    box-shadow: 0 0 0 1px #27496d inset;
    color: #fff;
    float: left;
    font-size: 16px !important;
    margin-right: 2px !important;
    padding: 7px 11px;
    text-align: center;
    text-shadow: -2px 2px #346392;
    margin: 0 1px !important;
    min-width: 9px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.kalimah-settings-typography .format-btns input {
    display: none;
}

.kalimah-settings-typography .format-btns, .kalimah-settings-typography .font-color {
    height: 35px;
}

.kalimah-settings-typography .format-btns > label:hover,
.kalimah-settings-typography .format-btns > label.hover {
    /*box-shadow: inset 0 0 0 1px #27496d,0 5px 15px #193047;*/
}

.kalimah-settings-typography .format-btns > label:active,
.kalimah-settings-typography .format-btns > label.active {
    box-shadow: inset 0 0 0 1px #27496d, inset 0 5px 30px #193047;
}

.kalimah-settings-typography .bold {
    font-weight: bold;
}

.kalimah-settings-typography .italics {
    font-style: italic;
}

.kalimah-settings-typography .underline {
    text-decoration: underline;
}

.kalimah-settings-typography .form-bit {
    display: block;
    clear: both;
	padding: 10px 0;
	width: 100%;
    position: relative;
}

.kalimah-settings-typography .form-title {
    float: left;
    margin-bottom: 10px;
    font-size: 15px !important;
    width: 98% !important;
}


.kalimah-settings-typography select {
    width: 250px;
    margin-left: 0px;
}

.kalimah-settings-typography .font-size {
    height: 70px;
    width: 70px;
    position: absolute;
    right: 5px;
    top: 5px;
}



.typography-switch {
  float: right;
  margin-right: 15px;
}

/*------------------------------------------------------------------
    6. ColorPicker
-------------------------------------------------------------------*/

.iris-picker .iris-square {
    overflow: hidden;
}

.wp-picker-holder {
    position: absolute;
    z-index: 12;
}

.wp-picker-input-wrap {
    display: none !important;
}

.wp-picker-container .iris-picker {
    border: 1px solid;
}

.wp-picker-container,
.wp-picker-container:active {
    float: left;
    margin-left: 0px;
}

.kalimah-settings-typography .wp-picker-container,
.wp-picker-container:active {
    float: left;
    margin-left: 10px;
}

.dial,
.dial:hover {
    background: transparent none repeat scroll 0 0 !important;
    box-shadow: none !important;
    font-size: 30px !important;
    height: 30px !important;
    margin-top: 20px !important;
}

.wp-color-result::after,
.wp-color-result {
    height: 28px;
    line-height: 28px;
}


/*------------------------------------------------------------------
    10. Responsive
-------------------------------------------------------------------*/
@media only screen and (max-width: 1000px) and (min-width: 601px)
{
	#kalimahform {
	  width: 100%;
	}
	
	#kalimah-settings {
	  margin-top: 5px;
	  width: 100%;
	}
	
	#kalimah-admin-right-panel {
	  border-radius: 5px !important;
	  margin-left: 2px !important;
	  width: 98%;
	  min-height: unset;
	}
	
	#kalimah-settings-left
	{
		width: 40px !important;
		overflow: hidden;
	}
	
	#kalimah-settings-header
	{
		min-height: 50px;
	}
	
	#kalimah-settings-header img {
	  width: 35px;
	}

	#kalimah-settings-header h1 {
	  margin: 4px;
	  padding: 0;
	  text-align: left;
	}

	#kalimah-settings-header h1:nth-child(2) {
		display: none;
	}
	
	#kalimah-admin-right-panel {
	  border-radius: 0 5px 5px !important;
	  margin-left: 2px !important;
	  min-height: unset;
	  overflow: hidden;
	  width: 92%;
	}
	
	#kalimah-settings-menu.animate ul li .kalimah-settings-menu-link {
		transition: unset;
		-webkit-transition: unset;
		-moz-transition: unset;
		-o-transition: unset;
		padding: 18px 0;
	}

	#kalimah-settings-menu.animate ul li .kalimah-settings-menu-link:hover .item-icon, #kalimah-settings-menu.animate ul li.clicked .kalimah-settings-menu-link .item-icon
	{
		opacity: 1 !important;
	}

	#kalimah-settings-menu.animate ul li .kalimah-settings-menu-link .item-icon
	{
		opacity: 1 !important;
	}
	
	#kalimah-settings-menu.animate ul li .kalimah-settings-menu-link span:first-of-type
	{
		display: none;
	}
	
}
@media only screen and (max-width: 600px)
{
	#kalimahform {
	  width: 100%;
	}
	
	#kalimah-settings {
	  margin-top: 5px;
	  width: 100%;
	}
	
	#kalimah-settings-left-logo{
	  display: block;
	}
	
	#kalimah-settings-left-logo > img {
	  float: left;
	  height: 50px;
	  margin: 10px;
	  width: 50px;
	}
	
	#kalimah-settings-left-logo > h1 {
	  float: left;
	  line-height: 30px;
	  margin: 5px;
	  width: calc(100% - 83px);
	}
	#kalimah-admin-right-panel {
	  border-radius: 5px !important;
	  margin-left: 2px !important;
	  width: 98%;
	  min-height: unset;
	}
	
	#kalimah-settings-left
	{
		display: none;
	}
	
	#kalimah-settings-content .form-bit, #post_options .form-bit
	{
		min-width: 100% !important;
	}
	
	#kalimah-settings textarea
	{
		width: 100%;
	}
	
	#kalimah-settings-content > div {
	  width: 98%;
	  padding: 3px 1px 1px 4px;
	}
	
	#wpcontent
	{
		padding: 0 !important;
	}
	
	#kalimah-settings-content > div
	{
		display: block;
	}
	
	.kalimah-settings-content-box > div:not(:first-child)
	{
		display: none !important;
	}
	
	.kalimah-settings-content-box.displayed > div:not(:first-child)
	{
		display: block !important;
	}
	
	.kalimah-settings-content-box .image-title {
	  border-bottom: 1px solid #164e70;
	  clear: both;
	  cursor: pointer;
	  margin-bottom: 5px !important;
	  width: 100%;
	  padding-bottom: 0 !important;
	}
	
	.kalimah-settings-content-box .image-title h1
	{
		font-size: 15px;
		margin: 15px 0 !important;
	}
	
	.kalimah-settings-content-box .image-title span {
	  float: left;
	  margin: 15px;
	  font-size: 20px;
	}
	
	.kalimah-settings-select select[multiple="multiple"] {
	  font-size: 14px !important;
	}

	
	#options-list ul li
	{
		padding: 40px 0 0;
	}
	
	#kalimah-settings-content .kalimah-settings-section-start
	{
		padding: 0 10px;
	}
	
	.kalimah-settings-images .image-selector
	{
		margin-left: 2px !important;
	}
	
	.kalimah-settings-images .css-selector
	{
		width: 120px;
	}
	
	.kalimah-settings-section-start .media_image {
	  max-height: 180px;
	  max-width: 180px;
	}
	
	.reset_values, #submit-button {
	  font-size: 12px !important;
	  padding-bottom: 7px !important;
	  padding-left: 7px !important;
	  padding-top: 7px !important;
	  width: 38% !important;
	}
	
	.kalimah-settings-typography select
	{
		width: 200px;
		float: left;
	}
	


	#response_box {
	  left: 5% !important;
	  top: 20% !important;
	  width: 75% !important;
	}
	
	#kalimah-settings-footer {
		position: relative;
		width: 100%;
		box-sizing: brder-box;
	}
	
	#TB_window {
	  height: 100vh !important;
	  width: 100vw !important;
	  top: 0 !important;
	  left: 0 !important;
	  margin-left: 0 !important;
	  z-index: 100000 !important;
	  min-height: unset !important;
	  
	}
	
	#TB_ajaxContent {
	  box-sizing: border-box;
	  min-height: unset !important;
	  width: 100% !important;
	  padding: 2px;
	  height: 100% !important;
	}
	

}

.font-color {
    float: left;
    margin-left: 4px;
    width: 100px;
}

.font-color input {
    width: 95%;
}

#kalimah-settings textarea {
    resize: none;
    transition: all .50s ease-in-out;
    -webkit-transition: all .50s ease-in-out;
    -moz-transition: all .50s ease-in-out;
    -o-transition: all .50s ease-in-out;
    height: 65px;
}

#kalimah-settings textarea:focus {
    height: 200px;
}

.kalimah-widget-section-start > div {
    margin: 15px 0;
}

#menu-to-edit .kalimah-widget-section-start {
    box-sizing: border-box;
    float: left;
    padding-right: 5px;
    width: 100%;
}

.clear {
    clear: both;
}

.clearfix:after {
    clear: both;
    content: ' ';
    display: block;
    font-size: 0;
    line-height: 0;	
    visibility: hidden;
    width: 0;
    height: 0
}





.no-select
{
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.overlay
{
	position: fixed;
	background-color: gray;
	opacity: 0.5;
	height: 100vh;
	width: 100vw;
	top: 0;
}

@charset "UTF-8";
@font-face {
  font-family: "themify";
  src:url("../fonts/themify.eot");
  src:url("../fonts/themify.eot?#iefix") format("embedded-opentype"),
    url("../fonts/themify.woff") format("woff"),
    url("../fonts/themify.ttf") format("truetype"),
    url("../fonts/themify.svg#themify") format("svg");
  font-weight: normal;
  font-style: normal;
}



.kalimah-shortcode-list-container [class^="ti-"]::before, .kalimah-shortcodes-header [class^="ti-"]::before {
  float: left;
  font-family: "themify";
  font-size: 35px;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  left: 30px;
  line-height: 1;
  position: absolute;
  text-transform: none;
  top: 5px;
}

.kalimah-shortcodes-header [class^="ion-"]::before {
  display: inline-block;
  font-family: "Ionicons";
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  padding: 0 5px;
  text-rendering: auto;
  text-transform: none;
}

.thickbox.button i:before
{
	margin: 2px 10px 0 0;
	font-family: "themify";
	font-style: normal;
}

/* Pop container */
#kalimah_shortcodes_popup_container {
  background-color: white;
  bottom: 50px;
  box-sizing: border-box;
  left: 50%;
  overflow: hidden;
  padding: 15px;
  position: fixed;
  top: 50px;
  transform: translateX(-50%);
  width: 500px;
  z-index: 100001;
}

body.popup_on::after {
  background-color: rgba(0, 0, 0, 0.6);
  content: " ";
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100000;
}

#kalimah_shortcodes_popup_container .kalimah-shortcodes-header-close {
  cursor: pointer;
  float: left;
  font-size: 22px;
  font-weight: bold;
  padding: 3px 5px;
  position: absolute;
  right: 0;
  top: 0;
  transition: all 0.5s ease 0s;
}

#kalimah_shortcodes_popup_container  .kalimah-shortcodes-header-close:hover {
  color: red;
}

.kalimah-shortcodes-header {
  height: 60px;
  position: relative;
}

.kalimah-shortcodes-header > h1 {
  font-size: 25px;
  line-height: 1;
  width: 100%;
}

.kalimah-shortcodes-header > hr {
  position: absolute;
  top: 45px;
  width: 100%;
}

.kalimah-shortcodes-header > .kalimah-displayed-shortcode span {
	float: left;
}

.kalimah-shortcodes-header .fa::before,
.kalimah-shortcodes-header [class^="ti-"]::before,
.kalimah-shortcodes-header .dashicons {
	float: left;
	font-size: 20px;
	left: unset;
	padding: 4px 11px 0 5px !important;
	position: relative;
	top: 0;
	width: unset;
}


.kalimah-shortcodes-header .kalimah-select-shortcode {
  margin-left: 0px;
  opacity: 1;
  position: absolute;
  transition: all 0.35s ease-in-out 0s;
  z-index: 1;
}

.kalimah-shortcodes-header .kalimah-select-shortcode.animate
{
	opacity: 0;
	z-index: 0;
	margin-left: -10px;
}

.kalimah-shortcodes-header .kalimah-displayed-shortcode
{
	opacity: 0;
	z-index: 0;
	margin-left: 10px;
	transition: all 0.35s ease-in-out 0s;
	position: absolute;
	cursor: pointer;
}

.kalimah-shortcodes-header .kalimah-displayed-shortcode.animate
{
	opacity: 1;
	z-index: 1;
	margin-left: 0px;
}

.kalimah-shortcode-body {
  height: calc(100% - 60px);
  position: relative;
}

.kalimah-shortcode-body *, .kalimah-shortcodes-header * {
	  box-sizing: border-box;
}


.kalimah-shortcode-body .kalimah-search-shortcodes {
  background-color: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07) inset;
  box-sizing: border-box;
  color: #32373c;
  outline: 0 none;
  padding: 10px;
  transition: border-color 50ms ease-in-out 0s;
  width: 99%;
}

.kalimah-shortcode-options {
  background-color: #ededed;
  border: 5px solid #ededed;
  height: 100%;
  left: 110%;
  padding: 11px;
  position: absolute;
  width: 100%;
  transition: all 0.35s linear;
  overflow: auto;
}

.kalimah-shortcodes-settings-icon {
	float: right;
	cursor: pointer;
}


.kalimah-shortcode-options.animate {
  left: 0;
}

.kalimah-shortcode-options > div {
   display: none;
}


.kalimah-shortcode-list-container {
  height: 100%;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  top: 0;
  transition: all 0.35s linear 0s;
  width: 100%;
}

.kalimah-shortcode-list-container.animate {
	left: -110%;
}
/*
.kalimah-shortcodes-list {
  -webkit-columns: 30px 3;
   -moz-columns: 30px 3;
        columns: 30px 3;
  width: 100%;
  height: 400px;
}*/

.kalimah-shortcode-list-container .fa
{
	display: inline;
}

.kalimah-shortcode-list-container li {
  border-radius: 5px;
  cursor: pointer;
  float: left;
  padding: 5px;
  transition: all 0.25s linear 0s;
  width: 33%;
  min-height: 20px;
}

.kalimah-shortcode-list-container li:hover {
  background-color: #CDCDCD;
}

.kalimah-shortcode-list-container li .text {
  float: left;
}

.kalimah-shortcode-list-container .fa::before, .kalimah-shortcode-list-container [class^="ti-"]::before, .kalimah-shortcode-list-container .dashicons {
  float: left;
  font-size: 15px;
  height: 15px;
  left: unset;
  padding: 3px 8px 0 0 !important;
  position: relative;
  top: 0;
}

.kalimah-shortcode-body .kalimah-settings-images .image-selector
{
	height: 50px;
	width: 50px;
	padding: 2px;
	margin-right: 4px;
	margin-bottom: 4px !important;
}

.kalimah-shortcode-body .kalimah-settings-images .image-selector.image-selected
{
	border-width: 3px !important;
}

.kalimah-shortcode-body .kalimah-settings-images .form-bit
{
	max-height: 200px;
}

.kalimah-settings-section-start > div:not(.kalimah-settings-softsection-start) {
  margin: 10px 0;
}

.kalimah-settings-section-start .kalimah-settings-softsection-start
{
  padding: 10px 0;
}

.kalimah-settings-section-start .form-title {
  float: left;
  width: 15%;
  margin-right: 7%;
}

.kalimah-settings-section-start .form-bit {
  float: left;
  max-width: 75%;
  position: relative;
}

.kalimah-settings-section-start .form-bit input[type='text'], .kalimah-settings-section-start .form-bit textarea {
  max-width: 100%;
  padding: 7px 10px;
}

@media only screen and (max-device-width: 600px)
{
	
	.kalimah-shortcode-body
	{
		height: 100% !important;
		display: block !important;;
		flex-direction: row;
		-webkit-flex-direction: row;
	}
	

	.kalimah-shortcode-options
	{
		box-sizing: border-box;
		width: 100% !important;
		border: 0px !important;
	}
	
	.kalimah-shortcode-options .form-bit {
	  min-width: unset !important;
	  width: 100%;
	}
	
	.kalimah-shortcode-options textarea {
	  width: 100% !important;
	}
	
	
}

.kalimah-settings-columns .form-bit {
  clear: both;
  width: 100%;
  max-width: 100%;
}

.kalimah-shortcodes-columns *
{
	-webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* IE/Edge */
  user-select: none;           /* non-prefixed version */
}

.kalimah-shortcodes-columns {
	height: 200px;
	width: 100%;
	border: 5px solid #aaa;
}

.kalimah-shortcodes-columns-single {
	padding: 10px;
	width: 40%;
	height: 200px;
	min-width: 100px;
	white-space: nowrap;
	float: left;
	background: #838383;
	color: white;
	width: 32%;
}

.kalimah-shortcodes-columns-splitter {
	width: 2%;
	float: left;
	min-height: 100%;
	cursor: col-resize;
	background: #ffffff;
}

.kalimah-shortcodes-sections-container > div {
  background-color: #428bca;
  color: white;
  margin: 5px 0;
  padding: 5px;
  width: 100%;
}

.kalimah-shortcodes-sections-container > div .delete {
  color: #ff0000;
  cursor: pointer;
  float: right;
  font-size: 25px;
}

.kalimah-shortcodes-sections-container > div .dashicons-yes {
  float: right;
  font-size: 25px;
  margin-left: 5px;
}


.kalimah-shortcodes-sections-container > div .dashicons-yes.selected {
  color: #0006FF;
}

.kalimah-shortcodes-sections-container input[type="radio"]:checked + span {
  color: #1C2777;
  text-shadow: 1px 1px 5px #ffffff;
}

.kalimah-shortcodes-sections-container input[type='radio'] + span {
  color: white;
}

.kalimah-shortcodes-sections-container input[type='radio'] {
  display: none;
}

.kalimah-shortcodes-sections-container input[type='text'] {
  width: 100%;
  display: block;
}

.kalimah_icons_picker_wrapper {
  float: left;
}

.kalimah_icons_picker_wrapper .kalimah_icons_picker
{
	z-index: 10;
	opacity: 0;
	 transition: all 0.5s ease 0s;
}

/* Columns */
.columns_wrapper {
  width: 94%;
}

.single_column_inner {
  align-content: center;
  background-color: lightblue;
  border: 1px solid blue;
  flex-grow: 1;
  float: left;
  font-size: 10px;
  min-height: 30px;
  min-width: 20px;
  padding: 5px;
  text-align: center !important;
  transition: all 0.5s ease 0s;
}

.single_column_seprator {
  align-content: center;
  cursor: w-resize;
  float: left;
  padding: 5px;
  text-align: center;
  width: 15px;
  transition: all 0.5s;
  color: black;
  font-size: 20px;
  font-weight: bold;
  position: relative;
}

.single_column_seprator:hover {
  background-color: gray;
  color: white;
}


.single_column_seprator::before {
  border-left: 1px dashed black;
  bottom: 5px;
  content: " ";
  left: 50%;
  position: absolute;
  top: 5px;
}

.add_column {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  float: left;
  font-family: Verdana;
  font-size: 20px;
  height: 30px;
  justify-content: center;
  padding: 5px;
  text-align: center;
  width: 15px;
}
.columns_container {
  direction: ltr;
  width: 100%;
}
	
.columns_container * {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -khtml-user-select: none;
  /* Konqueror */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  float: left;
  box-sizing: unset;
}

.single_column {
  align-content: stretch;
  align-items: stretch;
  display: flex;
  flex-direction: row;
  position: relative;
  width: 50%;
}

.single_column_delete {
  bottom: -20px;
  font-size: 17px;
  font-weight: bold;
  left: 50%;
  margin-left: -5px;
  opacity: 0;
  position: absolute;
  transition: all 0.5s;
}

.remove_column .single_column_inner {
  background-color: red;
}

.columns_wrapper .single_column:last-of-type .single_column_seprator
{
  visibility: hidden;
}

#pattern_name .form-bit {
  height: 327px;
  overflow: auto;
}



.kalimah-settings-images .css-selector .one-column-widget span:first-of-type {
  background-color: #ededed;
  clear: both;
  display: block;
  float: left;
  height: 100%;
  width: 100%;
}

.kalimah-settings-images .two-columns-widget span:first-of-type, .kalimah-settings-images .two-columns-widget span:nth-of-type(2) {
  background-color: #ededed;
  display: block;
  float: left;
  height: 100%;
  width: 49%;
}

.kalimah-settings-images .two-columns-widget span:first-of-type
{
	border-right: 2px solid #AAAAAA;
}

.kalimah-settings-images .three-columns-widget span:first-of-type, .kalimah-settings-images .three-columns-widget span:nth-of-type(2), .kalimah-settings-images .three-columns-widget span:last-of-type {
  background-color: #ededed;
  display: block;
  float: left;
  height: 100%;
  width: 32%;
}

.kalimah-settings-images .three-columns-widget span:first-of-type, .kalimah-settings-images .three-columns-widget span:nth-of-type(2)
{
	border-right: 2px solid #AAAAAA;
}

.kalimah-settings-images .four-columns-widget span:first-of-type, .kalimah-settings-images .four-columns-widget span:nth-of-type(2), .kalimah-settings-images .four-columns-widget span:nth-of-type(3), .kalimah-settings-images .four-columns-widget span:last-of-type {
  background-color: #ededed;
  display: block;
  float: left;
  height: 100%;
  width: 23.6%;
}

.kalimah-settings-images .four-columns-widget span:first-of-type, .kalimah-settings-images .four-columns-widget span:nth-of-type(2), .kalimah-settings-images .four-columns-widget span:nth-of-type(3)
{
	border-right: 2px solid #AAAAAA;
}


.kalimah-settings-images .form-bit {
    margin: 10px 0;
    max-height: 315px;
    overflow-y: auto;
}

.kalimah-settings-images input[type="radio"] {
    display: none;
}

.image-selected {
    border: 4px solid #EA9A3F !important;
    -webkit-border-radius: 5px;
    border-radius: 4px;
    padding: 1px !important;
}

.kalimah-settings-section-start .media_image {
  border-radius: 5px 0 0 5px;
  float: left;
  height: 100%;
  margin: 0;
  max-width: 180px;
  opacity: 0;
  position: relative;
  width: 100%;
  z-index: 5;
  transition: all 0.5s;
}

.kalimah-settings-media .kalimah-settings-media-image-multiple {
  position: relative;
}

.kalimah-settings-media[data-multiple="true"] .kalimah-settings-media-image {
  display: none;
}

.kalimah-settings-media[data-multiple="false"] .kalimah-settings-media-image-multiple {
  display: none;
}

.kalimah-settings-media .kalimah-settings-media-image-multiple .upload-btn::after {
  content: "";
  cursor: pointer;
  font-family: ionicons;
  font-size: 16px;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.kalimah-settings-media .kalimah-settings-media-image-multiple > input {
  padding-right: 25px !important;
}

.kalimah-settings-media .kalimah-settings-media-image {
  background-color: #dddddd;
  border: 2px solid #aaa8a8;
  border-radius: 5px 0 0 5px;
  float: left;
  height: 100px;
  padding: 1px;
  position: relative;
  width: 137px;
}

.kalimah-settings-media .kalimah-settings-media-image-icon {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
}

.kalimah-settings-media .kalimah-settings-media-image-icon::before
{
  color: rgba(136, 136, 136, 0.59);
  content: "";
  font-family: fontawesome;
  font-size: 80px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}

.kalimah-settings-media .kalimah-settings-media-image .remove_media_image {
  border: 2px solid gray;
  border-radius: 0 0 5px;
  bottom: -2px;
  color: white;
  cursor: pointer;
  float: left;
  height: calc(50% + 3px);
  left: 100%;
  opacity: 0.8;
  position: absolute;
  width: 35px;
}

.kalimah-settings-media .kalimah-settings-media-image .remove_media_image:hover {
	opacity: 1;
}

.kalimah-settings-media .kalimah-settings-media-image .remove_media_image:active {
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.4);
}

.kalimah-settings-media .kalimah-settings-media-image .remove_media_image::after {
  color: #6a6767;
  content: "";
  font-family: fontawesome;
  font-size: 15px;
  left: 0;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

.kalimah-settings-media .kalimah-settings-media-image .upload-btn {
  border: 2px solid gray;
  border-radius: 0 5px 0 0;
  cursor: pointer;
  height: calc(50% + 3px);
  left: 100%;
  margin: 0;
  opacity: 0.8;
  position: absolute;
  top: -2px;
  transition: all 0.5s ease 0s;
  width: 35px;
}

.kalimah-settings-media .kalimah-settings-media-image .upload-btn:hover {
  opacity: 1;
}


.kalimah-settings-media .kalimah-settings-media-image .upload-btn:active {
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.4);
}


.kalimah-settings-media .kalimah-settings-media-image .upload-btn::after {
  color: #6a6767;
  content: "";
  font-family: dashicons;
  font-size: 20px;
  left: 0;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

.single_column_inner > textarea {
  box-sizing: padding-box;
  width: 100% !important;
}


.kalimah-box {
  border: 1px solid;
  border-radius: 0.5em;
  font-size: 17px;
  left: calc(50% - 150px);
  line-height: 25px;
  max-width: 100%;
  padding: 10px;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 300px;
  font-weight: bold;
}

.kalimah-box.success {
    background: #e2f2cb none repeat scroll 0 0;
    border-color: #d1e4b7;
}

.kalimah-box.success > span:first-child::before {
  font-size: 23px;
}

.kalimah-box.success > span:first-child {
  margin: 0 10px;
}

.kalimah-settings-submit input {
  background-color: #428bca;
  border: 1px solid #1f4b6f;
  border-radius: 5px;
  color: white;
  cursor: pointer;
  float: right;
  opacity: 0.9;
  padding: 6px 30px;
  transition: all 0.2s ease 0s;
}

.kalimah-settings-submit input:hover {
  background-color: #28608f;
  opacity: 1;
}

.kalimah-shortcodes-sections .add_section {
  background-color: rgba(162, 162, 162, 0.46);
  border-left: 1px solid #9d9d9d;
  bottom: 2px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-size: 25px;
  justify-content: center;
  padding: 5px;
  position: absolute;
  right: 0;
  top: 2px;
}

.add_section_wrapper {
  position: relative;
  width: 100%;
}

.add_section_wrapper input {
  padding-right: 50px !important;
  width: 100%;
}

.kalimah-shortcodes-sections .add_section:active {
  background-color: #d7d7d7;
  box-shadow: 0 0 0 black;
}

/* Google maps autocomplete*/
.pac-container.pac-logo
{
	z-index: 10000;
}


.kalimah-shortcode-list-container span[class^="ion-"]::before {
  float: left;
  font-size: 18px;
  line-height: unset !important;
  padding-right: 5px;
}

/* Dropdown */
.kalimah-settings-select select[multiple="multiple"] option {
	outline: medium none !important;
  padding: 5px;
  cursor: pointer;
  }

 .kalimah-settings-select select[multiple="multiple"] option:checked {
	 background: green linear-gradient(0deg, green 0%, green 100%);
	 color: white;
}
  
.kalimah-settings-select select[multiple="multiple"] option:checked::before {
  content: "";
  float: right;
  font-family: "FontAwesome";
  right: 25px;
  color: white;
}

.kalimah-settings-select select[multiple="multiple"]  {
	 padding: 0;
	 min-width: 200px;
	 max-width: 100%;
}

/* Color picker*/
.colpick
{
	z-index: 100002 !important;
}

/* Icon picker icon*/
.kalimah-shortcodes-sections-container .kalimah_icons_picker_wrapper > span {
  font-size: 17px !important;
  height: 25px !important;
  margin: 1px 5px 1px 0;
  padding: 0 !important;
  width: 25px !important;
}

/* Button */
.kalimah-shortcodes-button {
  align-content: center;
  background-color: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(142, 142, 142, 0.28);
  border-radius: 2px;
  box-shadow: 0 0 1px rgba(101, 101, 101, 0.42);
  color: rgba(0, 0, 0, 0.63);
  cursor: pointer;
  display: flex;
  flex-direction: row;
  float: right;
  justify-content: center;
  padding: 4px;
}

.kalimah-shortcodes-button-text {
  align-content: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.kalimah-shortcodes-button:hover {
  border: 1px solid rgba(0, 0, 0, 0.34);
}

.kalimah-shortcodes-button:active {
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.69) inset;
}

/*Typorgraphy */
.kalimah-shortcodes-typography .format-btns > label {
  background-color: #3a84b1;
  border: 1px solid #235769;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(30, 70, 125, 0.7);
  color: white;
  cursor: pointer;
  float: left;
  font-weight: bold;
  height: 30px;
  line-height: 28px;
  margin: 2px;
  text-align: center;
  transition: all 0.5s ease 0s;
  width: 30px;
}

.kalimah-shortcodes-typography .format-btns input[type="checkbox"] {
  display: none;
}

.kalimah-shortcodes-typography .format-btns input[type="checkbox"]:checked + label {
  background-color: #22638b;
  box-shadow: 0 0 5px #162151 inset;
}

.kalimah-shortcodes-typography-strikethrough
{
	text-decoration: line-through;
}

.kalimah-shortcodes-typography .format-btns,
.kalimah-shortcodes-typography .font-type{
  display: block;
  float: left;
  margin-bottom: 7px;
  width: 100%;
}

.kalimah-shortcodes-typography .font-type select {
  width: 100%;
}

#typography-shortcode .kalimah-settings-textarea textarea {
  width: 100%;
  font-size: 20px;
}