/***********************************************************************
 * Version of 26 May 2025
 ***********************************************************************/

/***********************************************************************
 *
 *
 * Program-generated error messages
 *
 *
 ***********************************************************************/

.sodaerrormsg, p.sodaerrormsg {
    color: var(--soda-error-text-color);
    font-weight: bold;
}

/***********************************************************************
 *
 *
 * Navigation menu display
 *
 *
 ***********************************************************************/

#sodanavmenu {
    display: none;
    position: absolute;
    z-index: 9;
    right: 0em;
    top: 2em;
    background-color: var(--soda-main-background-color);
    width: 12em;
    padding: 1em 0em 1em 0em;
}

#sodanavmenu p {
    margin: 0;
    padding: 0.2em 0.7em 0.2em 0.7em;
    border: none;
}

#sodanavmenu a, #sodanavmenu button {
    color: var(--soda-alt-link-color);
}

#sodanavmenu p a:hover {
    background-color: var(--soda-alt-background-color);
}

.navtip {
    position: relative;
    display: inline-block;
}

.headingtip {
	width: 80%;
}

.tiptext {
    visibility: hidden;
    width: 80%;
    background-color: var(--soda-button-tip-background-color);
    color: var(--soda-button-tip-text-color);
    text-align: center;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    top: 120%;
    opacity: 0;
    transition: opacity 0.3s;
}

.navtip .tiptext {
	width: 9em;
    font-size: 1em;
    padding: 0.3em;
    margin-left: -7em;
}

.navtip:hover .tiptext {
    visibility: visible;
    opacity: 1;
}

/***********************************************************************
 *
 *
 * Help display
 *
 *
 ***********************************************************************/

#sodahelpdiv {
    display: none;
	  position: absolute;
    z-index: 10;
    right: 0em;
    top: 2em;
    color: var(--soda-help-text-color);
    background-color: var(--soda-help-background-color);
    width: 24em;
    padding: 1em 0em 1em 0em;
    box-shadow: 0 0 4px var(--soda-shadow-color);
    cursor: move;
    height: 100vh;
    overflow: auto;
}

#sodahelpdiv>div svg {
  background: var(--soda-help-background-color);
  padding: 5px;
  border-radius: 50%;
  cursor: pointer;
  float: left;
  margin: 0 15px 10px;
}

#sodahelpdiv>div svg:nth-child(2) {
float: right;
}

#sodahelpdiv>div svg:hover {
    background-color: var(--soda-help-background-color);
}

/* Style the buttons that are used to open and close the accordion panel */
.sodaaccordion {
 background-color: var(--soda-help-accordion-color);
 color: var(--soda-main-button-text-color);
 cursor: pointer;
 padding: 18px;
 width: 100%;
 text-align: left;
 border: none;
 outline: none;
 transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.sodaaccordion.active, .sodaaccordion:hover {
 background-color: var(--soda-main-button-background-color);
}

/* Style the accordion panel. Note: hidden by default */
.sodapanel {
 padding: 0 18px;
 background-color: var(--soda-help-background-color);
 display: none;
 overflow: hidden;
}

.sodaaccordion:after {
  /* Unicode character for "plus" sign (+) */
  content: '\00ff0b';
  color: var(--soda-main-button-text-color);
  float: right;
  margin: -8px -8px 0 5px;
  font-size: 1.25rem;
  font-weight: 900;
}

.sodaaccordion.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}

header .sodapanel a{
 color:  var(--soda-link-color);
}

header #sodabuttons .sodapanel img{
  height: auto;
}

header #sodahelpbuttondiv{
  cursor: pointer;
}

/***********************************************************************
 *
 *
 * Menu display
 *
 *
 ***********************************************************************/

#pagemenu {
   clear: both;
}

.sodapagemenucontainerdiv {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   padding-bottom: 12px;
}

.sodanoncurrentpagemenuitemdiv, .sodacurrentpagemenuitemdiv {
   padding: 6px 10px 6px 10px;
}

.sodacurrentpagemenuitemdiv {
   font-weight: bold;
}

#pagemenu .sodanoncurrentpagemenuitemdiv a {
   width: 100%;
   color: var(--soda-contrast-text-color);
}

.menu .sodaviewflex > div {
	flex: none;
}

/***********************************************************************
 *
 *
 * Blocks display
 *
 *
 ***********************************************************************/

.sodablocks {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.sodamovehandle {
    color: var(--soda-heading-color);
}

.sodaeditableblock {
   position: relative;
   min-width: 7em;
   min-height: 3em;
}

.sodablockedittools {
   position: absolute;
   top: 0.5em;
   right: 0.5em;
   width: 8rem;
   z-index: 1;
}

.sodablockedittools .sodablockedittool, .sodablockedittools .sodarowbutton, .sodablockedittools .sodamovehandle {
   width: 2.5rem;
   height: 2.5rem;
   margin-left: 2%;
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 0;
   padding: 0;
   background-color: var(--soda-main-background-color);
}

.sodaimagebutton {
	width: 1em;
	height: 1em;
}

.sodablocksubmit {
   width: 7em;
   margin: auto;
}

.sodablocksubmit .sodablockedittool {
   width: 1.5em;
   margin-left: 1em;
   margin-right: 1em;
   margin-top: 0.5em;
   margin-bottom: 0.5em;
}

.sodablockedittool img {
   width: 100%;
   margin: 0;
}

.sodawidthselect {
   padding-top: 0.5em;
}

#blocksform {
   width: 100%;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;
}

.blockS, .blockL {
   display: block;
   clear: both;
   width: 100%;
   vertical-align: top;
}

@media screen and (min-width: 700px) {

    .blockS {
        width: 48%;
    }
}

.sodaaddmenu{
  display: none;
  position: relative;
  width: 300px;
  list-style: none;
  background: var(--soda-alt-background-color);
  border-radius: 5px;
  padding: 10px;
  top: -30px;
  left: 30px;
  box-shadow: 1px 2px 3px var(--soda-trans9);
}

.sodaaddmenu.active{
  display: block;
}

.sodaaddmenu li{
  border-bottom: 1px solid var(--soda-border-color);
}

.sodaaddmenu li:last-child{
  border-bottom: None;
}

.sodablockedittools .sodaaddmenu li button{
  width: 100%;
  height: auto;
  padding: 5px;
  margin: 5px 0;
  background-color: transparent;
}

.sodaaddmenu li button:hover{
  color: var(--soda-alt-link-color);
}

/***********************************************************************
 *
 *
 * View display
 *
 *
 ***********************************************************************/

.sodaviewtable {
	border: 0px;
    border-collapse: collapse;
	
}

.sodaviewtable th, .sodaviewtable td {
	border: 0px;
    vertical-align: top;
    padding: 0.3em 0.6em 0.3em 0.6em;
}

.sodaviewtable th {
    border-bottom: 1px solid var(--soda-focus-background-color);
}

.fr-view table td, .fr-view table th {
	border: 1px solid var(--soda-border-color);
}

.fr-view table .sodaaddrow td {
	border: 0px;
}

.sodawrowhead {
    font-weight: bold;
}

button.tablebutton {
    width: 2em;
    height: 2em;
    border: 0;
    padding: 0;
    background-color: transparent;
}

.tablebutton img {
    width: 100%
}

.sodamainaction {
    width: 10em;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.5em;
}

.sodamainaction img {
    width: 100%;
    margin: 0;
}

.sodamainbutton {
    width: 2em;
    height: 2em;
    margin-left: 1em;
    margin-right: 1em;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    background-color: transparent;
}

.sodagallery1field .sodablockedittools {
	position: static;
	width: 4em;
}

.sodarowaction, .sodasegmentactions, .sodasegmenteditorbuttons {
	white-space: nowrap;
}

.sodasegmentactions .navtip {
	white-space: normal;
}

.sodauserbuttoncontainer .sodarowbutton, .sodarowaction .sodarowbutton,
		.sodarowaction .sodamovehandle, .sodasegmentactions .navtip,
		.sodasegmentactions .sodasegmentbutton, .sodasegmentactions .sodamovehandle {
   width: 1rem;
   height: 1rem;
   margin-left: 2%;
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 0;
   padding: 0;
   background-color: var(--soda-main-background-color);
}

.sodasegmenteditorbuttons .sodasegmentbutton {
   width: 2rem;
   height: 2rem;
   margin-left: 2%;
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 0;
   padding: 0;
   background-color: var(--soda-main-background-color);
}

.sodamoveorcopybuttons button {

   width: 5rem;
   height: 2rem;
   margin-left: 2%;
   margin-right: 0;
   margin-top: 1rem;
   margin-bottom: 0;
   padding: 0;
   background-color: var(--soda-main-button-background-color);
   color: var(--soda-main-button-text-color);
   box-shadow: 4px 4px 2px var(--soda-shadow-color);
}

.sodasegmentactions .navtip .tiptext {
	width: 12em;
}

.sodarowaction img, .sodasegmentactions img, .sodasegmenteditorbuttons img {
    width: 100%;
    height: 100%;
    border: 0;
    margin: 0;
}

.sodarowbutton img {
    width: 100%;
    height: 100%;
    border: 0;
    margin: 0;
}

.sodauserbuttoncontainer {
	vertical-align: middle;
}

.sodauserbutton, .sodadisableduserbutton {
	display: inline-block;
	width: 80%;
    margin: auto;
    text-align: center;
	font-size: 0.7em;
    font-weight: bold;
    padding: 1em;
    box-shadow: 4px 4px 2px var(--soda-shadow-color);
}

.sodauserbutton {
    color: var(--soda-main-button-text-color);
    background-color: var(--soda-main-button-background-color);
    cursor: pointer;
}

.sodadisableduserbutton {
    color: var(--soda-main-button-text-color);
    background-color: var(--soda-alt-background-color);
}

.globalerrormsg {
    position: fixed;
    top: 5em;
    left: 5em;
    color: var(--soda-error-text-color);
    background-color: var(--soda-error-background-color);
    font-weight: bold;
    padding: 1em;
    border: 0.2em solid var(--soda-error-text-color);
    z-index: 1;
}

.sodainlinebutton {
    vertical-align: middle;
    width: 1.7em;
    height: 1.7em;
    margin: 0em 1em 0em 1em;
    background-color: transparent;
    border: 0;
    padding: 0;
}

.sodainlinebutton img {
    width: 1.7em;
    height: 1.7em;
    border: 0;
    margin: 0;
}

.sodasegmenteditor {
	position: fixed;
	z-index: 2;
	background-color: var(--soda-main-background-color);
	top: 10em;
	left: 15em;
  /*  right: 15em;*/
	padding: 0.7rem;
}

.sodasegmenteditor .sodasegmenteditorbuttons {
	float: right;
	padding-top: 0.7rem;
}

.sodasegmenteditorbuttons button {
	background-color: var(--soda-main-background-color);
	width: 2rem;
    height: 2rem;
}

.sodasegmenteditor .sodasegmenteditorbuttons button {
	width: 1.5rem;
    height: 1.5rem;
}

.sodaviewflex, .sodamenuflex {
	display:flex;
	flex-wrap:wrap;
	justify-content: center;
	justify-items: center;
	align-items: center;
	align-content: center;
}

.sodaviewflex > div {
	position: relative;
	display:inline-block;
	vertical-align:top;
	padding:1em;
	flex: 1 1 auto;
}

.sodamenuflex > div {
	position: relative;
	display:inline-block;
	vertical-align:top;
	padding:1em;
	flex: none;
}

.sodaviewflex > .sodasegmentactions {
	flex: 0.2 0.2 0px;
}

.sodamenuflex .sodasegment .sodasegmentactions {
	width: 52px;
	margin: auto;
}

/*
       Segment editor definitions
*/

.sodasegmenteditor table{
   width:100%
}

.fr-view .sodasegmenteditor table tr, .fr-view .sodasegmenteditor table td{
  border: none;
}

.sodasegmenteditor input, .sodasegmenteditor select, .sodasegmenteditor textarea{
   width: 90%;
   padding: 0.5em;
   border-radius: 5px;
   border: 1px solid var(--soda-border-color);
   min-width: auto;
}

.sodasegmenteditor select{
  width: 92%;
}

.sodasegmenteditor input[type="radio"], .sodasegmenteditor input[type="checkbox"] {
  width: auto;
}

.sodasegmenteditor input:focus, .sodasegmenteditor select:focus{
  border-color: var(--soda-alt-border-color);
}

.sodasegmenteditor .sswrowhead{
   width: 20em;
}

@media screen and (max-width: 1150px) {

  .sodasegmenteditor{
    left: 1em;
    right: 1em;
  }
}

/*
        Definitions used by the ImagesRowSpec java class.
*/

.sodagallery2 {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
}

.sodagallery2row {
	position: relative;
	display:inline-block;
	vertical-align:top;
	padding:1em;;
}

.sodagallery1image {
	width: auto;
}

.sodagallery2image {
	min-width: 100%;
    margin-bottom: 0.5em;
}

.sodagallerybutton {
	position: absolute;
	top: 1em;
	right: 1em;
	width: 3em;
    height: 3rem;
    z-index: 1;
	margin: 0;
	padding: 0;
	background-color: var(--soda-main-background-color);
}

.sodagallery2field {
    width: 100%;
}

.sodagallery2addfield {
	position: absolute;
	bottom: 1em;
	width: 100%;
}

.sodagallery2row:first-of-type .sodagallery2addfield{
  bottom : 0 !important;
}

@media screen and (max-width: 400px) {
    .sodagallery2input{
        max-width: 160px;
    }
}

/*
        Definitions used by the ImageDisplayType java class.
*/

.sodaimageinput {
    margin-top: 0.5em;
    margin-bottom: 1em;
}

/***********************************************************************
 *
 *
 * Drag and drop
 *
 *
 ***********************************************************************/

/**
 * Soda drag and drop
 *
 * Version 1.0 2020/02/07
 */

/*
        Definitions setting styles for drag-and-drop.
*/

.sodamovehandle {
	display: inline-block;
}

.sodablockedittools .sodamovehandle {
   width: 29%;
   margin-left: 2%;
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 0;
   padding: 0;
   background-color: var(--soda-main-background-color);
   cursor: grab;
}

.sodamovehandle img {
   width: 100%;
   margin: 0;
}

.ui-sortable-helper{
  z-index: 1000;
  background: var(--soda-alt-background-color);
  box-shadow: 0 3px 4px var(--soda-trans6);
  cursor: "grabbing";
}

/***********************************************************************
 *
 *
 * Forms display
 *
 *
 ***********************************************************************/

textarea {
    resize: both;
    min-width: 36em;
}
.form-rendered #build-wrap {
  display: none;
}

.render-wrap {
  display: none;
}

.form-rendered .render-wrap {
  display: block;
}

#edit-form {
  display: none;
  float: right;
}

.form-rendered #edit-form {
  display: block;
}

.verb_type_name-wrap, .verb_name-wrap{
  display:none !important;
}

/***********************************************************************
 *
 *
 * System page styles
 *
 *
 ***********************************************************************/

.sodasystempagetable {
	border: 0px;
    border-collapse: collapse;
	
}

.sodasystempagetable th, .sodasystempagetable td {
	border: 0px;
    vertical-align: top;
    padding: 0.3em 0.6em 0.3em 0.6em;
}

.sodasystempagetable th {
    border-bottom: 1px solid var(--soda-focus-background-color);
}

/*
       Sodacard definitions
*/

.sodacards{
  justify-content: normal;
}

.fr-view table.sodacards{
  border-collapse: separate !important;
  border-spacing: 1em;
  width: 100%;
}

.sodacard{
  box-shadow: 0 0 4px var(--soda-shadow-color);
  margin: 0.5em 0.5em;
  border-radius: 10px;
}

.sodacard > h3{
  width: 85%;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.sodacard .sodasegmentactions button{
  display: inline-block;
}

.sodacard .sodasegmentactions{
  display: inline-block;
  vertical-align: middle;
}

.sodacardfixedwidth{
  min-width: 10rem;
  max-width: 10rem;
  height: 3rem;
}

.sodacardfixedwidth .sodasegmentactions{
  position: absolute;
  top: 0.5rem;
  right: 0;
  width: 4rem;
}

.sodacardfixedwidth > h3{
  margin-top: 0.8rem;
  width: 100%;
}

.fr-view .sodacards td, .fr-view .sodacards th{
  border: none;
  padding: 10px 0 10px 10px;
  text-align: left;
  vertical-align: middle;
}

/***********************************************************************
 *
 *
 * Froala custom styles
 *
 *
 ***********************************************************************/

.soda-overrelay{
	z-index: 10000000000;
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background: var(--soda-trans8);
}

.soda-loading-icon{
    background: url('/soda/style/images/Ripple-1s-200px.gif') no-repeat;
    background-size: contain;
    position: relative;
    margin: 7% 45%;
    padding: 50px;
}

#insertView-1 img{
	margin: 13px 7px;
    width: 23px;
}

#insertView-1.fr-disabled img{
	opacity: 0.4;
}

.selected-view {
    background: var(--soda-alt-background-color);
}

.sodaview{
	display: inline;
	border: 1px solid red;
}


.fr-popup .soda-title{
    -webkit-box-shadow: 0 1px 3px var(--soda-trans1), 0 1px 1px 1px var(--soda-trans2);
    -moz-box-shadow: 0 1px 3px var(--soda-trans1),0 1px 1px 1px var(--soda-trans2);
    box-shadow: 0 1px 3px var(--soda-trans1), 0 1px 1px 1px var(--soda-trans2);
    padding: 8px 14px;
    white-space: nowrap;
    font-weight: bold;
}

.fr-popup .soda-content, .fr-modal .soda-content{
	text-align: left;
}

.fr-popup .soda-content ul,.fr-modal .soda-content ul{
	list-style: none;
	padding: 0;
}

.fr-popup .soda-content ul li, .fr-modal .soda-content ul li{
	   padding: 10px 15px;
	   background: var(--soda-main-background-color);
}

.fr-popup .soda-content ul li:nth-child(even), .fr-modal .soda-content ul li:nth-child(even){
	   background: var(--soda-alt-background-color);
}

.fr-popup .soda-content ul li a, .fr-modal .soda-content ul li a{
	       color: var(--soda-popup-link-color);
}

.fr-popup .soda-content ul li a:hover, .fr-modal .soda-content ul li a:hover{
	       color: var(--soda-link-color);
}

.fr-modal .soda-content ul li img{
    vertical-align: middle;
    margin-right: 15px;
}
.fr-popup .soda-content .selected-access-level{
	background-color: var(--soda-selection-color) !important;
}
.fr-popup .soda-content .selected-access-level a{
	color: var(--soda-contrast-text-color) !important;
}

.fr-view .fr-img-caption .fr-img-wrap .fr-inner{
	margin-top: 0.5em;
	padding: 5px 5px 10px;
}

.fr-view .fr-img-caption .fr-img-wrap a .fr-inner{
	display: block;
}

/*************************************/

.sodaviewspec{
	margin: auto;
	text-align: center;
	clear: both;
}

.soda-modal-btn-wrapper{
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
position: absolute;
bottom: 0px;
right: 48px;
}

.soda-modal-remove{
	padding: 12px;
width: 20px;
font-size: 16px;
cursor: pointer;
line-height: 18px;
color: var(--soda-popup-text-color);
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
position: static;
-webkit-transition: color .2s ease 0s;
-moz-transition: color .2s ease 0s;
-ms-transition: color .2s ease 0s;
-o-transition: color .2s ease 0s;
margin-top: 8px;
}


.soda-modal-back{
		padding: 10px;
    width: 20px;
    font-size: 16px;
    cursor: pointer;
    line-height: 18px;
    color: var(--soda-popup-text-color);
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
		height: 20px;
		border-radius: 5px;
		bottom: 5px;
		position: relative;
		-webkit-transition: color .2s ease 0s;
    -moz-transition: color .2s ease 0s;
    -ms-transition: color .2s ease 0s;
    -o-transition: color .2s ease 0s;
}

.fr-element table.sodaviewspec td, .fr-element table.sodaviewspec th {
	width: 25em;
	border-color: var(--soda-border-color);
	border-left-color: var(--soda-border- );
	border-left-width: 2px;
	border-bottom-width: 0;
	border-right-width: 0;
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.fr-element table.sodaviewspec td:first-child , .fr-element table.sodaviewspec th:first-child  {
	border-left-width: 0;
}


.fr-element table.sodaviewspec td {
	cursor: pointer;
	background: var(--soda-focus-background-color);
	color: var(--soda-contrast-text-color);
	-webkit-transition: all .15s;
	transition: all .15s;
	-webkit-box-shadow: 0 1px 3px var(--soda-trans7);
	box-shadow: 0 1px 3px var(--soda-trans7);
	padding: 12px 0;
}

.fr-element table.sodaviewspec td:hover{
	background: var(--soda-selection-color);
	-webkit-box-shadow: inset 0 1px 6px var(--soda-trans7);
	box-shadow: inset 0 1px 6px var(--soda-trans7);
}

.fr-element table.sodaviewspec th {
    background: var(--soda-alt-background-color);
    padding: 9px;
}

.fr-toolbar .soda-modal-btn-wrapper .fr-command.fr-btn {
	height: 100%;
	width: 45px;
}

.fr-toolbar .soda-modal-btn-wrapper .fr-command.fr-btn i{
	padding: 3px 0px;
	width: 20px;
	font-size: 16px;
}

#soda-image-name{
	margin: 5px 15px 0;
	width: 90%;
}

.fr-popup .fr-buttons{
	margin-bottom: 2px;
}

.fr-qi-helper a.fr-btn.fr-floating-btn[data-cmd="insertView"] img{
	width: 22px;
	vertical-align: middle;
	margin-bottom: 12px;
}

.soda-modal-btn-wrapper #insertImage-1{
	background: var(--soda-main-background-color);
	height: 38px;
	width: 38px;
	float: none;
	margin: 0;
	top: 9px;
}

.soda-modal-btn-wrapper #insertImage-1:hover{
background: var(--soda-main-background-color);
}

.soda-modal-btn-wrapper #insertImage-1 i{
	width: 20px;
	font-size: 16px;
	cursor: pointer;
	line-height: 18px;
	color: var(--soda-popup-text-color);
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	position: static;
	-webkit-transition: color .2s ease 0s;
	-moz-transition: color .2s ease 0s;
	-ms-transition: color .2s ease 0s;
	-o-transition: color .2s ease 0s;
}

.fr-box .fr-toolbar.soda-modal-on{
	background: transparent;
	border: 0;
	box-shadow: none;
	z-index: 2147483642 !important;
}

.fr-box .fr-toolbar.soda-modal-on>*{
	display: none;
	border: 0;
}

.fr-box .fr-toolbar.soda-modal-on .fr-popup.fr-active{
	display: block;
	border-top: 5px solid var(--soda-alt-border-color);
}

.fr-view img.fr-dii {
	vertical-align: text-bottom;
}

.fr-view img.fr-dii.fr-fil {
	margin: 5px 1em 5px 0;
}

.fr-view img.fr-dii.fr-fir {
	margin: 5px 0 5px 1em;
}

.fr-view span.fr-img-caption.fr-dii {
	margin: 0 1em 0 1em;
}

.fr-view span.fr-img-caption.fr-dii.fr-fil {
	margin: 5px 1em 5px 0;
}

.fr-view span.fr-img-caption.fr-dii.fr-fir {
	margin: 5px 0 5px 1em;
}

.fr-qi-helper a.fr-btn.fr-floating-btn i{
	position: relative;
	bottom: 5px;
}

#draftDialog.si-modal .si-modal-wrapper{
	max-width: 450px;
}

#draftDialog.si-modal .si-modal-wrapper .si-modal-head .si-modal-head-line {
    height: 84px;
}

#draftDialog.si-modal .si-modal-wrapper .si-modal-head h4{
	float: none;
	line-height: 1.4;
}

#draftDialog .soda-button{
	border: 1px solid var(--soda-border-color);
	background: var(--soda-alt-background-color);
	font-weight: bold;
	color: var(--soda-popup-text-color);
	cursor: pointer;
	padding: .4em 1em;
	border-radius: 15px;
	display: block;
	margin: 10px auto;
}

/* fr custom style v3.0.1 */
.soda-overrelay{
	z-index: 10000000000;
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background: var(--soda-trans8);
}

.soda-loading-icon{
    background: url('/soda/style/images/Ripple-1s-200px.gif') no-repeat;
    background-size: contain;
    position: relative;
    margin: 7% 45%;
    padding: 50px;
}

#insertView-1 img{
	margin: 13px 7px;
    width: 23px;
}

#insertView-1.fr-disabled img{
	opacity: 0.4;
}

.sodaview{
	display: inline;
	border: 1px solid var(--soda-border-color);
}


.fr-popup .soda-title{
    -webkit-box-shadow: 0 1px 3px var(--soda-trans1), 0 1px 1px 1px var(--soda-trans2);
    -moz-box-shadow: 0 1px 3px var(--soda-trans1),0 1px 1px 1px var(--soda-trans2);
    box-shadow: 0 1px 3px var(--soda-trans1), 0 1px 1px 1px var(--soda-trans2);
    padding: 8px 14px;
    white-space: nowrap;
    font-weight: bold;
}

.fr-popup .soda-content, .fr-modal .soda-content{
	text-align: left;
}

.fr-popup .soda-content ul,.fr-modal .soda-content ul{
	list-style: none;
	padding: 0;
}

.fr-popup .soda-content ul li, .fr-modal .soda-content ul li{
	   padding: 10px 15px;
	   background: var(--soda-main-background-color);
}

.fr-popup .soda-content ul li:nth-child(even), .fr-modal .soda-content ul li:nth-child(even){
	   background: var(--soda-alt-background-color);
}

.fr-popup .soda-content ul li a, .fr-modal .soda-content ul li a{
	       color: var(--soda-popup-link-color);
}

.fr-popup .soda-content ul li a:hover, .fr-modal .soda-content ul li a:hover{
	       color: var(--soda-link-color);
}

.fr-modal .soda-content ul li img{
    vertical-align: middle;
    margin-right: 15px;
}
.fr-popup .soda-content .selected-access-level{
	background-color: var(--soda-selection-color) !important;
}
.fr-popup .soda-content .selected-access-level a{
	color: var(--soda-contrast-text-color) !important;
}

.fr-view .fr-img-caption .fr-img-wrap .fr-inner{
	margin-top: 0.5em;
	padding: 5px 5px 10px;
}

.fr-view .fr-img-caption .fr-img-wrap a .fr-inner{
	display: block;
}

/*************************************/

.sodaviewspec{
	margin: auto;
	text-align: center;
	clear: both;
}

.soda-modal-btn-wrapper{
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
position: absolute;
bottom: 0px;
right: 48px;
}

.soda-modal-remove{
	padding: 12px;
width: 20px;
font-size: 16px;
cursor: pointer;
line-height: 18px;
color: var(--soda-popup-text-color);
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
position: static;
-webkit-transition: color .2s ease 0s;
-moz-transition: color .2s ease 0s;
-ms-transition: color .2s ease 0s;
-o-transition: color .2s ease 0s;
margin-top: 8px;
}


.soda-modal-back{
		padding: 10px;
    width: 20px;
    font-size: 16px;
    cursor: pointer;
    line-height: 18px;
    color: var(--soda-popup-text-color);
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
		height: 20px;
		border-radius: 5px;
		bottom: 5px;
		position: relative;
		-webkit-transition: color .2s ease 0s;
    -moz-transition: color .2s ease 0s;
    -ms-transition: color .2s ease 0s;
    -o-transition: color .2s ease 0s;
}

.fr-element table.sodaviewspec td, .fr-element table.sodaviewspec th {
	width: 25em;
	border-color: var(--soda-border-color);
	border-left-color: var(--soda-contrast-border-color);
	border-left-width: 2px;
	border-bottom-width: 0;
	border-right-width: 0;
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.fr-element table.sodaviewspec td:first-child , .fr-element table.sodaviewspec th:first-child  {
	border-left-width: 0;
}


.fr-element table.sodaviewspec td {
	cursor: pointer;
	background: var(--soda-focus-background-color);
	color: var(--soda-contrast-text-color);
	-webkit-transition: all .15s;
	transition: all .15s;
	-webkit-box-shadow: 0 1px 3px var(--soda-trans7);
	box-shadow: 0 1px 3px var(--soda-trans7);
	padding: 12px 0;
}

.fr-element table.sodaviewspec td:hover{
	background: var(--soda-selection-color);
	-webkit-box-shadow: inset 0 1px 6px var(--soda-trans7);
	box-shadow: inset 0 1px 6px var(--soda-trans7);
}

.fr-element table.sodaviewspec th {
    background: var(--soda-alt-background-color);
    padding: 9px;
}

.fr-toolbar .soda-modal-btn-wrapper .fr-command.fr-btn {
	height: 100%;
	width: 45px;
}

.fr-toolbar .soda-modal-btn-wrapper .fr-command.fr-btn i{
	padding: 3px 0px;
	width: 20px;
	font-size: 16px;
}

#soda-image-name{
	margin: 5px 15px 0;
	width: 90%;
}

.fr-popup .fr-buttons{
	margin-bottom: 2px;
}

.fr-qi-helper a.fr-btn.fr-floating-btn[data-cmd="insertView"] img{
	width: 22px;
	vertical-align: middle;
	margin-bottom: 12px;
}

.soda-modal-btn-wrapper #insertImage-1{
	background: var(--soda-main-background-color);
	height: 38px;
	width: 38px;
	float: none;
	margin: 0;
	top: 9px;
}

.soda-modal-btn-wrapper #insertImage-1:hover{
background: var(--soda-main-background-color);
}

.soda-modal-btn-wrapper #insertImage-1 i{
	width: 20px;
	font-size: 16px;
	cursor: pointer;
	line-height: 18px;
	color:var(--soda-popup-text-color);
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	position: static;
	-webkit-transition: color .2s ease 0s;
	-moz-transition: color .2s ease 0s;
	-ms-transition: color .2s ease 0s;
	-o-transition: color .2s ease 0s;
}

.fr-box .fr-toolbar.soda-modal-on{
	background: transparent;
	border: 0;
	box-shadow: none;
	z-index: 2147483642 !important;
}

.fr-box .fr-toolbar.soda-modal-on>*{
	display: none;
	border: 0;
}

.fr-box .fr-toolbar.soda-modal-on .fr-popup.fr-active{
	display: block;
	border-top: 5px solid var(--soda-alt-border-color);
}

.fr-view img.fr-dii {
	vertical-align: text-bottom;
}

.fr-view img.fr-dii.fr-fil {
	margin: 5px 1em 5px 0;
}

.fr-view img.fr-dii.fr-fir {
	margin: 5px 0 5px 1em;
}

.fr-view span.fr-img-caption.fr-dii {
	margin: 0 1em 0 1em;
}

.fr-view span.fr-img-caption.fr-dii.fr-fil {
	margin: 5px 1em 5px 0;
}

.fr-view span.fr-img-caption.fr-dii.fr-fir {
	margin: 5px 0 5px 1em;
}

.fr-qi-helper a.fr-btn.fr-floating-btn i{
	position: relative;
	bottom: 5px;
}

#draftDialog.si-modal .si-modal-wrapper{
	max-width: 450px;
}

#draftDialog.si-modal .si-modal-wrapper .si-modal-head .si-modal-head-line {
    height: 84px;
}

#draftDialog.si-modal .si-modal-wrapper .si-modal-head h4{
	float: none;
	line-height: 1.4;
}

/***********************************************************************
 *
 *
 * Image upload
 *
 *
 ***********************************************************************/

/**
 * Soda selecting image
 * 
 * Version 2.0 2020/02/21
 * 
 * Compatible with Froala v 3.x
 */

.si-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--soda-overlay-background-color);
  -webkit-opacity: 0.5;
  -moz-opacity: 0.5;
  opacity: 0.5;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  z-index: 2147483639
}


.si-modal {
    color: var(--soda-popup-text-color);
    font-family: Arial, Helvetica, sans-serif;
    position: fixed;
    overflow-x: auto;
    overflow-y: scroll;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    z-index: 900000000;
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    line-height: 1.2;
    background-color: var(--soda-trans3);
}

.si-modal.si-middle .si-modal-wrapper {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    position: absolute
}

.si-modal .si-modal-wrapper {
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    background-clip: padding-box;
    margin: 20px auto;
    display: inline-block;
    background: var(--soda-main-background-color);
    min-width: 300px;
    -webkit-box-shadow: 0 3px 5px -1px var(--soda-trans5),0 6px 10px 0 var(--soda-trans4),0 1px 18px 0 var(--soda-trans1);
    -moz-box-shadow: 0 3px 5px -1px var(--soda-trans5),0 6px 10px 0 var(--soda-trans4),0 1px 18px 0 var(--soda-trans1);
    box-shadow: 0 3px 5px -1px var(--soda-trans5),0 6px 10px 0 var(--soda-trans4),0 1px 18px 0 var(--soda-trans1);
    border: 0;
    overflow: hidden;
    width: 90%;
    position: relative
}

@media (min-width: 768px) and (max-width: 991px) {
    .si-modal .si-modal-wrapper {
        margin:30px auto;
        width: 70%
    }
}

@media (min-width: 992px) {
    .si-modal .si-modal-wrapper {
        margin:50px auto;
        width: 960px
    }
}

.si-modal .si-modal-wrapper .si-modal-head {
    background: var(--soda-main-background-color);
    overflow: hidden;
    position: absolute;
    width: 100%;
    min-height: 42px;
    z-index: 3;
    border-bottom: solid var(--soda-border-color) 1px;
    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -ms-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s
}

.si-modal .si-modal-wrapper .si-modal-head .si-modal-head-line {
    height: 56px;
    padding: 0 10px
}

.si-modal .si-modal-wrapper .si-modal-head .si-modal-close {
  margin: 10px 15px;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 32px;
  width: 33px;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

.si-modal .si-modal-wrapper .si-modal-head .si-modal-close:hover {
    background: var(--soda-main-background-color);
}

.si-modal .si-modal-wrapper .si-modal-head h4 {
    font-size: 20px;
    padding: 19px 10px;
    margin: 0;
    font-weight: 400;
    line-height: 18px;
    display: inline-block;
    float: left
}

.si-modal-wrapper .si-modal-head i:hover{
  background: var(--soda-main-background-color);
}

.si-modal .si-modal-wrapper div.si-modal-body {
    height: 100%;
    min-height: 150px;
    overflow: hidden;
    padding-bottom: 20px
}

.si-modal .si-modal-wrapper div.si-modal-body:focus {
    outline: 0
}

.si-modal .si-modal-wrapper div.si-modal-body button.si-command {
    height: 36px;
    line-height: 1;
    color: var(--soda-popup-alt-text-color);
    padding: 10px;
    cursor: pointer;
    text-decoration: none;
    border: none;
    background: none;
    font-size: 16px;
    outline: none;
    -webkit-transition: background 0.2s ease 0s;
    -moz-transition: background 0.2s ease 0s;
    -ms-transition: background 0.2s ease 0s;
    -o-transition: background 0.2s ease 0s;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

.si-modal .si-modal-wrapper div.si-modal-body button.si-command+button {
    margin-left: 24px;
}

.si-modal .si-modal-wrapper div.si-modal-body button.si-command:hover,.si-modal .si-modal-wrapper div.si-modal-body button.si-command:focus {
    background: var(--soda-main-background-color);
    color: var(--soda-popup-alt-text-color);
}

.si-modal .si-modal-wrapper div.si-modal-body button.si-command:active {
    background: var(--soda-alt-background-color);
    color: var(--soda-popup-alt-text-color);
}

.si-modal .si-modal-wrapper div.si-modal-body button::-moz-focus-inner {
    border: 0
}

.si-desktop .si-modal-wrapper .si-modal-head i:hover {
    background: var(--soda-main-background-color);
}

/*popup*/

.si-popup {
    position: absolute;
    display: none;
    color: var(--soda-popup-text-color);
    background: var(--soda-main-background-color);
    -webkit-box-shadow: 0 3px 5px -1px var(--soda-trans5),0 6px 10px 0 var(--soda-trans4),0 1px 18px 0 var(--soda-trans1);
    -moz-box-shadow: 0 3px 5px -1px var(--soda-trans5),0 6px 10px 0 var(--soda-trans4),0 1px 18px 0 var(--soda-trans1);
    box-shadow: 0 3px 5px -1px var(--soda-trans5),0 6px 10px 0 var(--soda-trans4),0 1px 18px 0 var(--soda-trans1);
    font-family: Arial, Helvetica, sans-serif;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    margin-top: 10px;
    z-index: 2147483635;
    text-align: left;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    text-rendering: optimizelegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.2
}

.si-popup .si-icon {
    text-align: center;
    vertical-align: middle;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    font-weight: 400;
    box-sizing: content-box;
    padding: 6px
}

.si-popup .si-icon-container {
    padding: 20px;
    max-height: 200px;
    overflow: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

@supports not (-ms-high-contrast: none) {
    .si-popup .si-icon-container {
        grid-template-columns: repeat(auto-fill, minmax(36px, 36px));
        display: grid
    }
}

@media (min-width: 768px) {
    .si-popup .si-icon-container {
        min-width:276px
    }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .si-popup .si-icon-container {
        display: inline-flex;
        -ms-flex-flow: row wrap
    }
}

@media screen and (-ms-high-contrast: active) and (max-width: 768px), (-ms-high-contrast: none) and (max-width: 768px) {
    .si-popup .si-icon-container {
        width:236px
    }
}

.si-popup .si-input-focus {
    background: var(--soda-main-background-color)
}

.si-popup.si-above {
    margin-top: -10px;
    border-top: 0
}

.si-popup.si-active {
    display: block
}

.si-popup.si-hidden {
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
}

.si-popup.si-empty {
    display: none !important
}

.si-popup .si-hs {
    display: block !important
}

.si-popup .si-hs.si-hidden {
    display: none !important
}

.si-popup .si-input-line {
    position: relative;
    padding: 15px 0
}

.si-popup .si-input-line input[type="text"],.si-popup .si-input-line textarea {
    width: 100%;
    margin-bottom: 1px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: solid 1px var(--soda-border-color);
    color: var(--soda-popup-text-color);
    font-size: 14px;
    background: var(--soda-main-background-color);
    position: relative;
    z-index: 2;
    padding: 4px 12px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: border 0.5s, padding 0.5s;
    -moz-transition: border 0.5s, padding 0.5s;
    -ms-transition: border 0.5s, padding 0.5s;
    -o-transition: border 0.5s, padding 0.5s
}

.si-popup .si-input-line input[type="text"]:hover,.si-popup .si-input-line textarea:hover {
    border: solid 1px var(--soda-alt-border-color);
}

.si-popup .si-input-line input[type="text"]:focus,.si-popup .si-input-line textarea:focus {
    border: solid 2px var(--soda-popup-alt-text-color);
    padding: 3px 11px
}

.si-popup .si-input-line input[type="text"] {
    height: 46px
}

.si-popup .si-input-line input+label,.si-popup .si-input-line textarea+label {
    position: absolute;
    top: 29px;
    left: 12px;
    font-size: 14px;
    color: var(--soda-popup-text-color);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    z-index: 3;
    display: block;
    background: var(--soda-main-background-color);
    padding: 0;
    cursor: text
}

.si-popup .si-input-line input.si-not-empty+label,.si-popup .si-input-line textarea.si-not-empty+label {
    color: var(--soda-popup-text-color);
    width: auto;
    left: 4px;
    padding: 0 4px;
    font-size: 11px;
    top: 9px
}

.si-popup input,.si-popup textarea {
    user-select: text;
    -o-user-select: text;
    -moz-user-select: text;
    -khtml-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    outline: none
}

.si-popup textarea {
    resize: none
}

.si-popup .si-buttons {
    white-space: nowrap;
    line-height: 0
}

.si-popup .si-buttons .si-btn {
    margin-left: 4px;
    margin-right: 4px;
    display: inline-block;
    float: none
}

.si-popup .si-buttons .si-btn i {
    float: left
}

.si-popup .si-buttons .si-separator {
    display: inline-block;
    float: none
}

.si-popup .si-buttons.si-tabs {
    border-radius: 6px 6px 0 0;
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    background-color: var(--soda-main-background-color);
    overflow: hidden
}

@media (max-width: 768px) {
    .si-popup .si-buttons.si-tabs.si-tabs-scroll {
        overflow:scroll;
        overflow-y: hidden;
        width: 276px
    }
}

.si-popup .si-buttons:not(.si-tabs) {
    padding: 5px
}

.si-popup .si-layer {
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    width: 195px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 20px;
    display: none
}

@media (min-width: 768px) {
    .si-popup .si-layer {
        width:260px
    }
}

.si-popup .si-layer.si-active {
    display: inline-block
}

.si-popup .si-action-buttons {
    z-index: 7;
    height: 36px;
    text-align: right
}

.si-popup .si-action-buttons button.si-command {
    height: 36px;
    line-height: 1;
    color: var(--soda-popup-alt-text-color);
    padding: 10px;
    cursor: pointer;
    text-decoration: none;
    border: none;
    background: none;
    font-size: 16px;
    outline: none;
    -webkit-transition: background 0.2s ease 0s;
    -moz-transition: background 0.2s ease 0s;
    -ms-transition: background 0.2s ease 0s;
    -o-transition: background 0.2s ease 0s;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box
}

.si-popup .si-action-buttons button.si-command+button {
    margin-left: 24px
}

.si-popup .si-action-buttons button.si-command:hover,.si-popup .si-action-buttons button.si-command:focus {
    background: var(--soda-main-background-color);
    color: var(--soda-popup-alt-text-color)
}

.si-popup .si-action-buttons button.si-command:active {
    background: var(--soda-alt-background-color);
    color: var(--soda-popup-alt-text-color)
}

.si-popup .si-action-buttons button::-moz-focus-inner {
    border: 0
}

.si-text-edit-layer {
    width: 250px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block!important
}

.si-image-overlay {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2147483640;
    display: none
}

.si-popup .si-image-upload-layer {
    border: dashed 2px var(--soda-border-color);
    padding: 25px 0;
    margin: 20px;
    position: relative;
    font-size: 14px;
    letter-spacing: 1px;
    line-height: 140%;
    text-align: center
}

.si-popup .si-image-upload-layer:hover {
    background: var(--soda-main-background-color);
}

.si-popup .si-image-upload-layer.si-drop {
    background: var(--soda-main-background-color);
    border-color: var(--soda-popup-alt-text-color);
}

.si-popup .si-image-upload-layer .si-form {
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2147483640;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important
}

.si-popup .si-image-upload-layer .si-form input {
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 500%;
    height: 100%;
    margin: 0;
    font-size: 400px
}

.si-popup .si-image-progress-bar-layer>h3 {
    font-size: 16px;
    margin: 10px 0;
    font-weight: normal
}

.si-popup .si-image-progress-bar-layer>div.si-action-buttons {
    display: none
}

.si-popup .si-image-progress-bar-layer>div.si-loader {
    background: var(--soda-alt-background-color);
    height: 10px;
    width: 100%;
    margin-top: 20px;
    overflow: hidden;
    position: relative
}

.si-popup .si-image-progress-bar-layer>div.si-loader span {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--soda-popup-alt-text-color);
    -webkit-transition: width 0.2s ease 0s;
    -moz-transition: width 0.2s ease 0s;
    -ms-transition: width 0.2s ease 0s;
    -o-transition: width 0.2s ease 0s
}

.si-popup .si-image-progress-bar-layer>div.si-loader.si-indeterminate span {
    width: 30% !important;
    position: absolute;
    top: 0;
    -webkit-animation: loading 2s linear infinite;
    -moz-animation: loading 2s linear infinite;
    -o-animation: loading 2s linear infinite;
    animation: loading 2s linear infinite
}

.si-popup .si-image-progress-bar-layer.si-error>div.si-loader {
    display: none
}

.si-popup .si-image-progress-bar-layer.si-error>div.si-action-buttons {
    display: block
}

.si-image-size-layer .si-image-group .si-input-line {
    width: calc(50% - 5px);
    display: inline-block
}

.si-image-size-layer .si-image-group .si-input-line+.si-input-line {
    margin-left: 10px
}

.si-uploading {
    -webkit-opacity: 0.4;
    -moz-opacity: 0.4;
    opacity: 0.4;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"
}

@-webkit-keyframes loading {
    from {
        left: -25%
    }

    to {
        left: 100%
    }
}

@-moz-keyframes loading {
    from {
        left: -25%
    }

    to {
        left: 100%
    }
}

@-o-keyframes loading {
    from {
        left: -25%
    }

    to {
        left: 100%
    }
}

@keyframes loading {
    from {
        left: -25%
    }

    to {
        left: 100%
    }
}


/* siom Custom style*/

.si-popup .soda-title{
    -webkit-box-shadow: 0 1px 3px var(--soda-trans1), 0 1px 1px 1px var(--soda-trans2);
    -moz-box-shadow: 0 1px 3px var(--soda-trans1),0 1px 1px 1px var(--soda-trans2);
    box-shadow: 0 1px 3px var(--soda-trans1), 0 1px 1px 1px var(--soda-trans2);
    padding: 8px 14px;
    white-space: nowrap;
    font-weight: bold;
}

.si-popup .soda-content, .si-modal .soda-content{
	text-align: left;
}

.si-popup .soda-content ul,.si-modal .soda-content ul{
	list-style: none;
	padding: 0;
}

.si-modal .soda-content{
  padding: 10px 20px;
  margin-top: 77px;
}

.si-modal .soda-content ul {
	   margin: -30px;
}

.si-popup .soda-content ul li, .si-modal .soda-content ul li{
	   padding: 10px 15px;
	   background: var(--soda-main-background-color);
}

.si-popup .soda-content ul li:nth-child(even), .si-modal .soda-content ul li:nth-child(even){
	   background: var(--soda-alt-background-color);
}

.si-popup .soda-content ul li a, .si-modal .soda-content ul li a{
	       color: var(--soda-popup-link-color);
}

.si-modal .soda-content ul li a{
        padding: 15px;
}

.si-popup .soda-content ul li a:hover, .si-modal .soda-content ul li a:hover{
	       color: var(--soda-link-color);
}

.si-modal .soda-content ul li img{
    vertical-align: middle;
    margin-right: 15px;
}

.si-popup .soda-content .selected-access-level{
	background-color: var(--soda-selection-color) !important;
}
.si-popup .soda-content .selected-access-level a{
	color: var(--soda-contrast-text-color) !important;
}



.soda-modal-btn-wrapper #si-insertImage{
      background: var(--soda-main-background-color);
      margin: 0;
      width: 40px;
      border-radius: 4px;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      height: 40px;
}

.soda-modal-btn-wrapper #si-insertImage:hover{
  background: var(--soda-main-background-color);
}

.soda-modal-btn-wrapper #si-insertImage:focus{
  outline: none;
}

.soda-modal-btn-wrapper #si-insertImage i{
  width: 20px;
	font-size: 16px;
	cursor: pointer;
	line-height: 18px;
	color: var(--soda-popup-text-color);
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	position: static;
	-webkit-transition: color .2s ease 0s;
	-moz-transition: color .2s ease 0s;
	-ms-transition: color .2s ease 0s;
	-o-transition: color .2s ease 0s;
}