/* Start PowerSchool CSS Overrides */

#content-main ul li, .modal-dialog ul li {
    list-style-type: none;
    /*margin: 0;*/
}

/* list inside text block desciption to show bullet Overrides */
#formcontainer .description ul li {
    list-style-type: disc;
}

#formcontainer .description ul ul li {
    list-style-type: circle;
}

#formcontainer .description ul ul ul > li {
    list-style-type: square;
}

ul.tabs, .ui-tabs .ui-tabs-nav li {
    margin: 0 0 -1px !important;
}

ol, ul {
    list-style: none outside none;
    list-style-type: none !important;
}

label {
    padding: 0px;
}

hr {
    margin-bottom: 0px !important;
}

.ui-tabs .ui-tabs-panel {
    border: 1px solid #ccc !important;
    border-radius: 8px;
    margin: 10px 20px;
}

/*data validation overrides*/
h6 {
    margin-bottom: 0px !important;
}

.element span[class^="ui-"] {
    width: auto;
    float: inherit;
    display: inline-block;
}

.element em {
    display: inline;
}

h4 span {
    float: none !important;
}

span.event-prop-title {
    font-size: 8pt;
    white-space: normal;
}

h4 {
    border-bottom: medium none !important;
}
/* End PowerSchool CSS Overrides */

.form .ecollect-logo {
    top: 65px;
    z-index: 10;
}

.form .ecollectForm-logo {
    top: 65px;
    z-index: 10;
}

.ecollect-logo-inline {
    background-image: url(/images/formbuilder/Ecollect-Web-Color.png);
    width: 100px;
    display: block;
    float: left;
    height: 35px;
    background-size: 100px;
    margin-inline-start: -10px;
    margin-top: -5px;
    margin-inline-end: 15px;
}

[dir="rtl"] .ecollect-logo-inline {
    float: right;
}

.ecollectForm-logo {
    background-image: url(/images/formbuilder/Logo_Unified-Administration-Ecollect_Forms.png);
    width: 205px;
    display: inline;
    float: right;
    inset-inline-end: 10px;
    position: absolute;
    margin-inline-end: 20px;
    top: 50px;
    height: 45px;
    background-size: 205px;
}

[dir="rtl"] .ecollectForm-logo {
    float: left;
}

.transparent input {
    background-color: #eeeeee !important;
    border-color: #ffffff !important;
}

.transparent input, .transparent label, .transparent p {
    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    /* Safari 1.x */
    -khtml-opacity: 0.5;
    /* Good browsers */
    opacity: 0.5 !important;
}

/* angular-ui overrides  */

h1 {
    font-size: 150% !important;
    font-weight: bold !important;
    margin: 20px !important;
}

h2 {
    font-size: 128% !important;
}

h3, .h3 {
    font-size: 114%;
}

#nav-main h3 {
    font-weight: bold;
    margin: 15px 10px 0;
}

body{
    font-family:Arial,sans-serif;
    font-size:14px;
    line-height:1.5;
}

.element .table {
    width: calc(100% - 40px) !important;
}

.element table {
    background-color: white !important;
}

textarea {
    line-height: 1.1em !important;
}

@font-face {
    font-family: 'Glyphicons Halflings';
    src: url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot");
    src: url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2) format("woff2"), url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff) format("woff"), url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.ttf) format("truetype"), url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format("svg");
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:hover {
    background-color: rgba(48, 161, 238, 0.1) !important;
    color: rgb(51, 51, 51) !important;
    cursor: pointer !important;
}

.dropdown-menu-right {
    inset-inline-start: auto !important;
    inset-inline-end: 0;
}

.dropdown-menu li.title {
    margin-inline-start: 20px !important;
}

.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover {
    background-position: right -11px !important;
}

.select2-container a.select2-search-choice-close {
    background: url("../ext/angular-ui/select2.png") no-repeat scroll right top rgba(0, 0, 0, 0) !important;
}

.select2-container > a, .select2-container > a:hover, .select2-container > a:focus {
    color: black !important;
    text-decoration: none !important;
}

.select2-container .select2-choice {
    background-color: #FFFFFF !important;
    background-image: none;
}

.select2-result-label {
    min-height: 1.5em !important;
}

.select2-search-choice {
    margin: 3px 0 3px !important;
    margin-inline-start: 5px !important;
}

.tooltip.bottom {
    width: 150px;
}

.dropdown-menu {
    font-size: 12px !important;
    padding: 5px 0 !important;
}

ul.dropdown-menu {
    margin: 0 !important;
}

.btn-xs {
    line-height: 1.65 !important;
}

#content-main ol, #content-main ul {
    margin: 10px 0 !important;
}

#content-main .description ol, #content-main .description ul {
    margin: 0 35px 10px !important;
}

.editable .form-control[disabled] {
    background-color: #ffffff !important;
}

.form-control {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset !important;
    background-color: #ffffff !important;
    font-size: 14px !important;
    padding: 6px 12px !important;
    width: inherit !important;
    display: inline !important;
    margin-inline-end: 5px !important;
}

/* enable absolute positioning */
.inner-addon {
    position: relative;
}

/* style icon */
.inner-addon .glyphicon {
    position: absolute !important;
    padding: 10px;
    pointer-events: none;
    font-size: 16pt;
}

/* align icon */
.left-addon .glyphicon  {
    inset-inline-start:  0px;
}

.right-addon .glyphicon {
    inset-inline-end: 10px;
}

/* add padding  */
.left-addon input  {
    padding-inline-start: 30px;
}

.right-addon input {
    padding-inline-end: 30px;
}

/* angular-ui overrides */

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

.fberror {
    font-size: 12px;
    font-weight: bold;
    inset-inline-start: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
    width: 100%;
    display: table;
}

.fberror span.glyphicon {
    font-size: 24pt !important;
    display: table-cell !important;
    width: 5%;
}

.fberror #errortext {
    display: table-cell;
    vertical-align: middle;
}

.panel-footer {
    padding: 10px 15px 40px !important;
}

.fbtitle {
    margin: 20px 20px 0;
}
.fbtitle img {
    float: right;
    width: 50px !important;
}
[dir="rtl"] .fbtitle img {
    float: left;
}

.form {
    margin: 15px !important;
}

.form.editable {
    min-width: 1110px !important;
}

*, *:before, *:after {
    -moz-box-sizing: border-box;
}

#propertycontainer:before {
    content: attr(data-content);
}

.form.editable #formcontainer:before {
    content: attr(data-content);
}

.form.preview #formcontainer:before {
    content: "Preview Mode"
}

#propertycontainer:before, #formcontainer:before, #propertycontainer .panel-heading {
    color: #BBBBBB;
    font-size: 12px;
    font-weight: bold;
    inset-inline-start: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
}


#propertycontainer {
    min-width: 335px !important;
    max-width: 335px !important;
}

#propertycontainer .constrain {
    width: 98%;
}

#propertycontainer .checkboxTable_Options label {
	margin-left: 12px;
}
[dir="rtl"] #propertycontainer .checkboxTable_Options label {
	margin-right: 12px;
}

#propertycontainer .checkboxTable_Options {
	width: 100%;
	margin: 0 0px 0px;
}

#propertycontainer .checkboxTable_Options tr td label {
	font-weight: normal !important;
}

.propertypanel, .formpanel {
    /*box-shadow: 2px 1px 3px rgba(0, 0, 0, 0.25);*/
}

.propertypanel ul {
    padding-inline-start: 5px;
}

.propertypanel .panel:after {
    clear: both;
}

.propertypanel .panel {
    overflow: visible !important;
}

.panel-heading:hover .actions {
    visibility: visible;
}

.propertypanel .panel-heading {
    padding: 5px !important;
}

.propertypanel h4.panel-title {
    font-size: 14px !important;
}

.propertypanel .collection-columns .panel-heading:hover {
    background-color: #e0f0ff;
}

.sharingoptions > div > span {
    float: left;
    margin: 0 15px -5px !important;
    margin-inline-start: 0 !important;
}

[dir="rtl"] .sharingoptions > div > span {
    float: right;
}

[dir="rtl"] .sharingoptions > div > span {
    float: right;
    margin: 0 15px -5px !important;
    margin-inline-start: 0 !important;
}


.sharingoptions select.sharing {
    width: 95%;
    height: 150px;
}

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

[dir="rtl"] .sharingoptions{
    display: inline-block;
}

.permissions, .sharingoptions label {
    cursor: pointer;
}

.permissions.user.none {
    background: url("/images/formbuilder/user-disable-icon.png") no-repeat scroll center center rgba(0, 0, 0, 0);
}

.permissions.user.read {
    background: url("/images/formbuilder/user-read-icon.png") no-repeat scroll center center rgba(0, 0, 0, 0);
}

.permissions.user.write {
    background: url("/images/formbuilder/user-write-icon.png") no-repeat scroll center center rgba(0, 0, 0, 0);
}

.permissions.user.glyphicon-ban-circle {
    color: red;
}

#propertycontainer.affix {
    position: static;
    width: 300px !important;
    max-height: 650px !important;
    overflow-y: scroll !important;
}

#propertycontainer.affix-bottom {
    position: absolute !important;
}

#propertycontainer, #formcontainer {
    background-color: #FFFFFF;
    border-color: #DDDDDD;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-width: 1px;
    box-shadow: none;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

[dir="rtl"] #propertycontainer {
    float: right;
}

[dir="rtl"] .col-xs-9{
    float: right;
}

[dir="rtl"] .col-md-6{
    width :100%
}

[dir="rtl"] .error-message{    
    padding: 2px 18px 2px 16px;
    background-position: right 4px center; 
}

[dir="rtl"] .tooltip.left .tooltip-arrow {
    top: 50%;
    inset-inline-start: 0px;
    margin-top: -5px;
    border-width: 5px 0px 5px;
    border-inline-end-width: 5px;
    border-inline-end-color: #000;
  }

.form.editable #formcontainer {
   /* margin-left: 300px !important; */
}

.form.editable #formcontainer .element-placeholder {
    background-color: rgba(48, 161, 238, 0.2);
    margin-bottom: 15px;
}

.form.editable #formcontainer .element:after, .form #formcontainer .element:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

#formcontainer .element {
    position: relative;
}

#formcontainer .element label {
    display: table;
}

#formcontainer .element-helper {
    color: #BBBBBB;
    font-size: 12px;
    font-weight: bold;
    inset-inline-start: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
#formcontainer .element-helper img {
    width: 20%;
    float: right;
    opacity: 0.5;
}
[dir="rtl"] #formcontainer .element-helper img {
    float: left;
}

.form.editable #formcontainer .element.selected {
    border-color: rgba(48, 161, 238, 0.8);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(48, 161, 238, 0.6);
    outline: 0 none;
    border-radius: 6px;
    background-color: #E0F0FF;
}

.form.editable #formcontainer .element.dependent {
    border-color: rgba(255, 165, 0, 1);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(255, 165, 0, 1);
    outline: 0 none;
    border-radius: 6px;
    background-color: #ffe4b2;
}

.form.editable #formcontainer  .element:hover:not(.selected) {
    border-color: rgba(48, 161, 238, 0.1);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(48, 161, 238, 0.4);
}

.form.editable #formcontainer .panel-heading.selected {
    border-color: rgba(0, 255, 0, 0.8);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(0, 255, 0, 0.6);
    outline: 0 none;
    background-color: #E5FFE5;
}

.form.editable #formcontainer .panel-heading:hover:not(.selected) {
    cursor: pointer;
    border-color: rgba(0, 255, 0, 0.1);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(0, 255, 0, 0.4);
}

label.disabled {
    color: #666666;
    cursor: not-allowed;
}

a.disabled {
    cursor: not-allowed;
}

.newelements button{
    display: block !important;
    margin-top: 10px !important;
    width: 95%;
    text-align: start !important;
}

#propertycontainer .title {
    font-weight: bold !important;
    padding: 0px !important;
    margin: 10px 0 0 !important;
}

.icon-newwindow {
    color: #428BCA !important;
    cursor: pointer;
    margin-inline-start: 5px;
}

[dir ="rtl"] .glyphicon-new-window{
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    margin-inline-start: -9px;
}

[dir ="rtl"] .custom-data-validation-glyphicon{
    margin-inline-start: 5px;
}

.icon-newwindow:hover, .icon-newwindow:focus {
    color: #4079B2 !important;
    text-decoration: none !important;
}

.icon-workflow-add:hover {
    background: url("/images/formbuilder/workflow-linked-icon-16x16-orange.png") no-repeat scroll 4px 12px rgba(0, 0, 0, 0);
    text-decoration: none !important;
}

.icon-workflow-add {
    background: url("/images/formbuilder/workflow-unlinked-icon.png") no-repeat scroll 4px 12px rgba(0, 0, 0, 0);
    padding: 10px;
}

.icon-workflow-remove:hover {
    background: url("/images/formbuilder/workflow-unlinked-icon.png") no-repeat scroll 4px 12px rgba(0, 0, 0, 0);
    text-decoration: none !important;
}

.icon-workflow-remove {
    background: url("/images/formbuilder/workflow-linked-icon-16x16-orange.png") no-repeat scroll 4px 12px rgba(0, 0, 0, 0);
    padding: 10px;
}

.icon-translation {
    background: url("/images/formbuilder/Translation-icon.png") no-repeat scroll 4px 10px rgba(0, 0, 0, 0);
    padding: 10px;
}

.icon-translation-rtl{
    margin-top: 9px;
}

[dir="rtl"] .icon-translation-rtl{
    transform: scaleX(-1);
    margin-top: 9px;
}

.choice-icon-translation-rtl{
    transform: scaleX(1);
}

[dir="rtl"] .choice-icon-translation-rtl{
    transform: scaleX(-1);
}

.workflow-linked {
    background: url("/images/formbuilder/workflow-linked-icon.png") no-repeat scroll 4px 12px rgba(0, 0, 0, 0);
    position: absolute;
    inset-inline-end: 10px;
    text-align: end;
    top: 10px;
}

.psfieldcontainer.active, .workflow-container.active {
    opacity: 1;
    margin: 5px 0 0;
    margin-inline-start: 12px;
    height: auto;
}

div[ng-controller="elementProperties"] .psfieldcontainer.active,
div[ng-controller="elementProperties"] .workflow-container.active {
    margin-inline-start: 30px;
}

.non-integrated-fee-workflow-container.active, .custom-integrated-fee-workflow-container.active {
    opacity: 1;
    margin: 5px 0 0;
    margin-inline-start: 19px;
    height: auto;
}

.psfieldcontainer, .workflow-container, .non-integrated-fee-workflow-container, .custom-integrated-fee-workflow-container {
    margin: 0;
    display: block;
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: opacity 350ms ease-out 0s;
}

.importchoices {
    margin-inline-start: 45px;
    font-size: 8pt;
}

.importchoices-dialog .modal-dialog {
    width: 320px;
}

.formoptions-dialog .modal-dialog {
    width: 350px;
    margin: 30px auto;
}

.forcedvalue-dialog .modal-dialog {
    width: 800px;
}

.editor-dialog .modal-dialog {
    width: 700px;
}

.title {
    font-weight: bold !important;
    padding: 0px !important;
    margin-bottom: 0px !important;
}

.response-notifications {
    text-align: center;
    margin-bottom: 5px !important;
    cursor: pointer;
}

.response-notifications.haspending .panel-heading {
    background-color: #fffde7 !important;
}

.response-notifications .pending, .response-notifications .rejected,
.response-notifications .approved, .response-notifications .total, .response-notifications .submitted {
    font-weight:bold;
}

.response-notifications .pending {
    color: #6F6716;
}

.response-notifications .rejected {
    color: #BD2B2B;
}

.response-notifications .approved {
    color: #005900;
}

.response-notifications .total {
    /*color: #124063;*/
}

#formcontainer .description {
    padding-bottom: 5px;
    color: #666666;
}

#formcontainer .description, #formcontainer span label {
    display: block !important;
    font-weight: normal !important;
    margin-bottom: auto !important;
}

#propertycontainer li div label {
    font-weight: normal !important;
}

.delete-row-helper, .delete-row-helper > td {
    background-color: rgba(255, 0, 0, 0.2) !important;
}

.element .collection-edit {
    width: 1%;
    background-color: #ffffff !important;
    border: 1px solid #ffffff !important;
}

.element .collection-row:hover .collection-edit > .actions {
    visibility: visible;
}

.collection-edit .actions {
    position: relative;
    bottom: 0;
    inset-inline-end: 15px;
}

/*HACK for collection table td width*/
.table td {
    width: auto;
}
/*HACK*/

/* Element actions */

.debug-position {
    float:right;
    font-size: 20pt;
}

[dir="rtl"] .debug-position {
    float: left;
}

.form.editable .element.selected > .actions {
    visibility: visible;
}

.actions {
    background: none repeat scroll 0 0 #F5F5F5;
    border: 1px solid #BBBBBB;
    border-radius: 12px;
    bottom: -15px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    line-height: 18px;
    margin: 0 !important;
    min-width: 0 !important;
    padding: 5px 4px 2px !important;
    position: absolute;
    inset-inline-end: -15px;
    text-align: center;
    visibility: hidden;
    width: auto !important;
    z-index: 1000 !important;
}

.actions img {
    cursor: pointer;
    margin: 0 1px;
    vertical-align: inherit !important;
}

.linking:hover {
    background-color: #ffe4b2 !important;
    border-color: rgba(255, 165, 0, 0.8);
    border-radius: 6px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(255, 165, 0, 0.6);
    outline: 0 none;
}

.linking {
    z-index: 10000;
    background-color: #ffffff !important;
    border-color: #ffffff;
    box-shadow: none;
    margin: 5px;
}

#container.pds #fbContent .row .linking {
    z-index: 7999;
}

textarea {
    resize: vertical;
}
/*
input[type="text"], textarea {
    border-color: #7C7C7C #C3C3C3 #DDDDDD;
    border-style: solid;
    border-width: 1px;
    font-family: Helvetica,Arial,sans-serif !important;
    color: #333333;
    font-size: 100% !important;
    margin: 0 !important;
    padding: 2px 0;
}
*/


#propertycontainer input[type="text"] {
    width: 100% !important;
}

#propertycontainer textarea {
    width: 100% !important;
}

#propertycontainer select {
    width: 100% !important;
}



#propertycontainer input[type="checkbox"] + label {
    margin: -20px 0 0;
    margin-inline-start: 12px;
}

[dir="rtl"] #propertycontainer input[type="checkbox"] + label {
    margin: -20px 12px 0;
    margin-inline-start: 12px;
}

#formcontainer input[type="checkbox"] + label {
    margin: -20px 0 0;
    margin-inline-start: 23px;
}

[dir="rtl"] #formcontainer input[type="checkbox"] + label {
    margin: -23px 19px 0 !important;
    margin-inline-start: 23px !important;
}

#formcontainer input[type="radio"] + label {
    margin: -20px 0 0;
    margin-inline-start: 23px;
}
[dir="rtl"] #formcontainer input[type="radio"] + label {
    margin: -23px 0px 0 !important;
    margin-inline-start: 23px !important;
    text-align: start;
}

[dir="rtl"] .ui-dialog .ui-dialog-title{
    float: right;
}

.ecollection-responder {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.ecollection-container {
    display: grid;
    grid-template-columns: 75% 25%;
    align-items: center;
}

.ecollection-delete {
    text-align: end;
}

.ecollection-delete button {
    padding: 3px 10px;
    margin-inline-end: 10px;
    color: #fff;
    font-weight: bold;
}

@media (max-width: 768px) {
    .ecollection-responder {
        grid-template-columns: 1fr;
    }

    .ecollection-responder .element {
        grid-row: unset !important;
        grid-column: unset !important;
    }
}

@media (max-width: 576px) {
    .ecollection-elements {
        grid-row: 2;
    }

    .ecollection-container {
        grid-auto-flow: row;
        grid-template-columns: 1fr;
    }
    .btn.add-row {
        width: 50%;
    }
}


.editable .sbs {
    height: 100px;
}

.editable .column {
    min-height: 100px;
}

.sbs-responder {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

@media (max-width: 768px) {
    .sbs-responder {
        grid-template-columns: 1fr;
    }

    .sbs-responder .element {
        grid-row: unset !important;
        grid-column: unset !important;
    }
}

.sbs .column {
    width: 33%;
    float: left;
}

[dir="rtl"] .sbs .column {
    float: right;
}

#formcontainer input[type="text"], #formcontainer select {
    width: 30%;
}

input.medium, select.medium {
    width: 50% !important;
}

/* added layout css to cover bug in select2 width */

.sbs-responder .select2-container {
    width: 196px !important;
}

.select2-container {
    width: 30% !important;
}

.element > .medium > .select2-container  {
    width: 50% !important;
}

.element > .large > .select2-container {
    width: 80% !important;
}

/* added layout css to cover bug in select2 width */

input.large, select.large {
    width: 80% !important;
}

#formcontainer textarea {
    height: 6em;
    width: 30%;
}

textarea.medium {
    height: 8em !important;
    width: 50% !important;
}

textarea.large {
    height: 10em !important;
    width: 80% !important;
}

input[disabled], select[disabled] {
    color: #666666 !important;
    opacity: 1 !important;
    /*background-color: white;*/
}

label.choice {
    color: #222222;
    cursor: pointer;
    display: block;
    font-size: 100%;
    font-weight: normal;
    line-height: 130%;
    padding: 0 0 5px;
    text-align: start;
    width: 88%;
}

.otherchoice label {
    display: block !important;
    clear: both;
}

.extras, .choices {
    padding: 0 0 0;
    padding-inline-start: 5px;
}

.extras li, .choices li {
    margin-inline-start: -10px;
    /*white-space: nowrap;*/
}

.choices img {
    cursor: pointer;
}

.propertypanel .choices li {
    border-inline-end: none;
}

.propertypanel .extra-options > li > div {
    margin-top: -10px;
}

/*
.propertypanel .extras > li:nth-child(2n), .propertypanel ul.extras {
    padding-bottom: 7px;
    border-bottom: 3px dotted #E7E7E8;
}
*/

div.notStacked span {
    margin: 0 7px 0 !important;
    margin-inline-start: 0 !important;
    width: auto !important;
    float: left;
}

[dir="rtl"] div.notStacked span {
    float: right;
}

div.threeColumns span {
    margin: 0 5px 0 !important;
    margin-inline-start: 0 !important;
    width: 30% !important;
    float: left;
}

[dir="rtl"] div.threeColumns span {
    float: right;
}

div.twoColumns span {
    margin: 0 5px 0 !important;
    margin-inline-start: 0 !important;
    width: 48% !important;
    float: left;
}

[dir="rtl"] div.twoColumns span {
    float: right;
}

.element section h6 {
    font-size: 14pt !important;
    border-top: 1px dotted #CCCCCC;
    font-weight: normal;
    padding: 12px 0 0;
}

.form.editable .element {
    cursor: pointer;
}

.element {
    word-wrap: break-word;
    /*margin-bottom: 10px;*/
    min-height: 20px;
    padding: 5px 5px 5px;
    border-radius: 6px;
}

span.required {
    color: #FF0000 !important;
    display: inline !important;
    float: none !important;
    font-size: 14pt;
    font-weight: bold;
    margin-inline-start: 5px !important;
    padding: 0;
}

.element label span {
    float: left !important;
    width: auto !important;
}

[dir="rtl"] .element label span {
    float: right !important;
}

.element div span:not(.fc-content span) {
    display: block;
    float: left;
    margin: 0;
    width: 100%;
}

[dir="rtl"] .element div span:not(.fc-content span) {
    float: right !important;
}

[dir="rtl"] .element div span:not(.fc-content span) {
    float: right;
}

.element > .alerttext {
    color: #A94442;
    float: right;
    text-align: end;
}

[dir="rtl"] .element > .alerttext {
    float: left;
}

[dir="rtl"] .element > .alerttext {   
    float: left;
}

.alerttext {
    float: right;
    padding-inline-end: 10px;
    padding-top: 30px;
}

[dir="rtl"] .alerttext {
    float: left;
}


[dir="rtl"] .alerttext {
    float: left;
}


.element .helptext {
    color: #BD2B2B;
}

.form-footer .helptext {
    color: #CA3F3F;
}

.fieldalert.approval {
    color: red;
}

.fieldalert {
    color: #FFA500;
    float: none !important;
    font-size: 0.9em;
    margin: 5px 0 0 !important;
    margin-inline-start: 10px !important;
    display: inline !important;
}

#fblegal {
    float: right;
    margin-top: -20px;
}

[dir="rtl"] #fblegal {
    float: left;
}

.formaction:hover {
    color: #333333;
}

.formaction {
    color: #DDDDDD;
    cursor: pointer;
    margin: 2px;
}

.formactions {
    position: absolute;
    inset-inline-end: 18px;
    top: 2px;
}

.languageSwitchDropdown {
    width: 165px  !important;
}

/* CHARTS */

/* overrides */
.ecollect .sr-only {
    position: inherit !important;
}

.progress-fb {
    margin-bottom: 1px !important;
}
/* overrides */

.chart-item {
    margin-bottom: 25px;
    border: 1px dashed #DDDDDD;
    border-radius: 4px;
    padding: 15px;
    position: relative;
}

.row-header {
    background-color: #F5F5F5;
    border-color: #DDDDDD;
    display: table;
    width: 100%;
    font-weight: bold;
    margin-bottom: 2px;
    padding: 1px;
}

.row-header .col1 {
    width: 30%;
    float: left;
}

[dir="rtl"] .row-header .col1 {
    float: right;
}

.row-header .col2 {
    width: 60%;
    float: left;
}

[dir="rtl"] .row-header .col2 {
    float: right;
}

.row-header .col3 {
    width: 10%;
    float: left;
}

[dir="rtl"] .row-header .col3 {
    float: right;
}

.row-bar {
    display: table !important;
    width: 100%;
}

.col-response.text {
    width: 90%;
}

.col-response {
    display: table;
    float: left;
    width: 30%;
    word-wrap: break-word;
    word-break: break-all !important;
}

[dir="rtl"] .col-response {
    float: right;
}

.response-label {
    font-weight: normal !important;
    margin-inline-start: 5px;
}

.col-bar {
    display: table;
    float: left;
    width: 60%;
}

[dir="rtl"] .col-bar {
    float: right;
}

.col-totals {
    display: table;
    padding-inline-start: 10px;
}

.responder-text:hover {
    color: #333333;
}

.responder-text {
    color: #DDDDDD;
    cursor: pointer;
}

.row-footer {
    border-top: 1px solid #DDDDDD;
}

.row-footer .col1 {
    float: left;
    text-align: end;
    width: 90%;
    font-weight: bold;
}

[dir="rtl"] .row-footer .col1 {
    float: right;
}

.row-footer .col2 {
    padding-inline-start: 10px;
    width: 10%;
    font-wieght: bold;
}

.hidden {
    display: none;
}

.chartaction:hover {
    color: #333333;
}

.chartaction {
    color: #DDDDDD;
    cursor: pointer;
    margin: 2px;
}

.chartactions {
    position: absolute;
    inset-inline-end: 6px;
    top: 2px;
}

.color0, .defaultblue {
    background: #428bca !important;
}
.color1, .red {
    background-color: #D03A11 !important;
}
.color2, .green {
    background-color: #679904 !important;
}
.color3, .orange {
    background-color: #C34D01 !important;
}
.color4, .yellow {
    background-color: #B99306 !important;
}
.color5, .blue {
    background-color: #3A7B9F !important;
}
.color6, .pink {
    background-color: #A60F2F !important;
}
.color7, .purple {
    background-color: #704882 !important;
}
.color8, .lightblue {
    background-color: #428BCA !important;
}

.spinner {
    position: absolute;
    inset-inline-end: 10px;
    text-align: end;
    top: 10px;
}

.spinner > div {
    width: 18px;
    height: 18px;
    background-color: #428BCA;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
    animation: bouncedelay 1.4s infinite ease-in-out;
    /* Prevent first frame from flickering when animation starts */
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@-webkit-keyframes bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0.0) }
    40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
    0%, 80%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    }
    40% {
      transform: scale(1.0);
      -webkit-transform: scale(1.0);
    }
}

#importform {
    position: relative;
    top: 20px;
}

.overlay {
    background-color: rgba(1, 1, 1, 0.7);
    bottom: 0;
    inset-inline-start: 0;
    position: fixed;
    inset-inline-end: 0;
    top: 0;
    z-index: 9999;
}

#container.pds #fbContent .row .overlay {
    background-color: rgba(1, 1, 1, 0.7);
    bottom: 0;
    inset-inline-start: 0;
    position: sticky;
    inset-inline-end: 0;
    top: 0;
    min-height: 100vh;
    z-index: 7998;
    margin: 0 -15px -15px;
}

#overlayfooter {
    width: 100%;
    height: 80px;
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    overflow: hidden;
    text-align: center;
    z-index: 999999;
}

#container.pds #fbContent .row .overlay #overlayfooter {
    position: sticky;
    z-index: 7999;
}

#overlaytext {
    color: #ffffff;
    font-size: 22pt;
    font-weight: bold;
    display: inline-block;
    margin: 10px 10px 0;
    margin-inline-start: 0;
    padding: 5px 10px
}

.caret.tight {
    margin-bottom: 5px;
    margin-inline-start: -2px !important;
    cursor: pointer;
}

.modal-body.tight {
    padding: 5px !important;
}

/* NOTE: This archive class is using the OLD meaning of the word archive, meaning a response audit trail.*/
.SavedRes {
    background-color: #c9f3d0 !important;
}

.SavedRes .data {
    color: #108411 !important;
    font-weight: bold;
    float: right;
    padding-inline-end: 30px;
}

[dir="rtl"] .SavedRes .data {
    float: left;
}

[dir="rtl"] #loading .ui-progressbar-overlay{
    animation-direction: reverse !important;
}

.statusResSave {
    margin-inline-end: 0px !important;
}

/* NOTE: This archive class is using the OLD meaning of the word archive, meaning a response audit trail.*/
.archive {
    background-color: #f2dede !important;
}

.archive .data {
    color: #a94442 !important;
    font-weight: bold;
    text-align: end;
    padding-inline-end: 10px;
    word-wrap: break-word;
}


/* This is using the NEW meaning of the word archived, meaning a response before a form reset */
.is-archived {
    background-color: #ECF0FB !important;
}
.is-archived.archive {
    background-color: #f2dede !important;
}

.approving .form-header, .approving .form-footer {
    background-color: #fff9c4 !important;
    border: none !important;
}

.approving .panel-body, .approving .collection-edit, .form-list table tr.pending {
    background-color: #fffde7 !important;
    border: none !important;
}

.rejected .form-header, .rejected .form-footer {
    background-color: #ff7f7f !important;
    border: none !important;
}

.rejected .panel-body, .rejected .collection-edit, .form-list table tr.rejected {
    background-color: #ffb2b2 !important;
    border: none !important;
}

.form-list table tr.blank {
    visibility: visible !important;
}

.form-list table tr td:nth-child(2) {
    white-space: nowrap;
}

.form-footer .dropdown-menu {
    width: 475px;
}

.form-footer .dropdown-menu a {
    white-space: normal;
}

.approver-list {
    float: left;
    font-weight: bold;
    margin-inline-end: 20px;
    clear: both;
    color: #ff9719;
}

[dir="rtl"] .approver-list {
    float: right;
}

.approval-option {
    background-color: #ffff00;
}

.jumpto .dropdown-menu {
    max-height: 250px;
    overflow: auto;
}

.validation-accordion .panel-heading {
    padding: 6px !important;
}

.fb-btn-group > .form-control:first-child {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    margin-inline-end: 0 !important;
}

[dir="rtl"] .fb-btn-group > .form-control:first-child {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    margin-inline-end: 0 !important;
}

.fb-input-group-btn {
    display: inline;
    position: relative;
    white-space: nowrap;
}

.fb-input-group-btn:last-child > .btn {
    margin-inline-start: -4.3px;
    width:auto !important;
}

.fb-input-group-btn .btn {
    margin-bottom: 0px !important;

}

.fb-input-group-btn:last-child > .btn {
    border-top-left-radius: 0;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 0;
}

[dir="rtl"] .fb-input-group-btn:last-child > .btn {
    border-top-left-radius: 4px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 4px;
}

.w3-progress-container {
    background-color: #f1f1f1;
    float: right;
    height: 10px;
    margin: 10px;
    position: relative;
    width: 150px;
}

[dir="rtl"] .w3-progress-container {
    float: left;
}

.fc-unthemed .fc-today {
    background: #fcf8e3 none repeat scroll 0 0 !important;
}

.fc-view-container table {
    margin: 0px !important;
}

.fc-view-container thead th {
    background: none !important;
    color: #333333 !important;
    font-weight: normal !important;
}

.fc-axis {
    width: 42px !important;
}

.fc-view-container {
    background-color: white;
}

.fc-view-container table {
    background-color: rgba(0, 0, 0, 0) !important;
}

.fc-view-container tbody td:not(.fc-today, .fc-widget-header) {
    background-color: rgba(0, 0, 0, 0) !important;
}

table table tbody tr:nth-child(2n+1) > td {
    background-color: rgba(0, 0, 0, 0) !important;
}

.fc-view-container th:first-of-type:not(.right) {
    text-align: center !important;
}

.fc-ltr .fc-list-heading-alt, .fc-rtl .fc-list-heading-main {
    float: right !important;
    width: auto !important;
}

[dir="rtl"] .fc-ltr .fc-list-heading-alt, .fc-rtl .fc-list-heading-main {
    float: left !important;
}

.fc-ltr .fc-list-heading-main {
    float: left;
    width: auto !important;
}

[dir="rtl"] .fc-ltr .fc-list-heading-main {
    float: right;
}

.fc-view-container div span:not(.fc-event-dot, .fc-list-heading-alt) {
    display: inline !important;
    float: none !important;
}

.fc-event-dot {
    border-radius: 5px !important;
    display: inline-block !important;
    height: 10px !important;
    width: 10px !important;
    float: none !important;
}

.fc-toolbar button:hover {
    background-image: none !important;    
}

.padding.bottom {
    padding-bottom: 10px;
}

.sweet-alert h2 {
    color: #575757;
    display: block !important;
    font-size: 30px !important;
    font-weight: 600 !important;
    line-height: 40px !important;
    margin: 25px 0;
    padding: 0;
    position: relative;
    text-align: center;
    text-transform: none;
}

.sweet-alert button {
    background-image: none !important;
}

.filteredby {
    color: #22b600;
    font-size: 14pt;
    font-weight: bold;
}

@font-face {
    font-family: 'Glyphicons Halflings';
    src: url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot");
    src: url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2) format("woff2"), url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff) format("woff"), url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.ttf) format("truetype"), url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format("svg"); }

.response-list  {
    display: block; }

.bootstrap .response-list li {
    list-style: none; }

.bootstrap .response-list  > .list-group {
    width: 100%;
    margin: 0;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd; }

.bootstrap .response-list  .list-group-item.active a {
    color: lightblue; }

.bootstrap .response-list  .modal {
    background: rgba(0, 0, 0, 0.4);
    opacity: 1;
    display: block; }
.bootstrap .response-list  .modal h4.modal-title {
    position: initial;
    padding: 0;
    border-bottom: none;
    display: inline; }
.bootstrap .response-list  .modal.fade .modal-dialog {
    transform: translate(0, 0); }
[dir="rtl"] .bootstrap .response-list  .modal.fade .modal-dialog {
    transform: translate(-0, 0);
}
.bootstrap .response-list  .modal.ng-enter, .bootstrap .response-list  .modal.ng-leave.ng-leave-active {
    opacity: 0;
    transition: opacity .15s linear; }
.bootstrap .response-list  .modal.ng-enter .modal-dialog, .bootstrap .response-list  .modal.ng-leave.ng-leave-active .modal-dialog {
    transition: transform .3s ease-out;
    transform: translate(0, -25%); }
[dir="rtl"] .bootstrap .response-list  .modal.ng-enter .modal-dialog, .bootstrap .response-list  .modal.ng-leave.ng-leave-active .modal-dialog {
    transform: translate(-0, -25%);
}
.bootstrap .response-list  .modal.ng-enter.ng-enter-active, .bootstrap .response-list  .modal.ng-leave {
    opacity: 1;
    transition: opacity .15s linear; }
.bootstrap .response-list  .modal.ng-enter.ng-enter-active .modal-dialog, .bootstrap .response-list  .modal.ng-leave .modal-dialog {
    transition: transform .3s ease-out;
    transform: translate(0, 0); }
[dir="rtl"] .bootstrap .response-list  .modal.ng-enter.ng-enter-active .modal-dialog, .bootstrap .response-list  .modal.ng-leave .modal-dialog {
    transform: translate(-0, 0);
}

body.uiContMax .response-list  > .list-group {
    max-height: calc(100vh - 340px); }

.response-list  .table {
    margin: 0 !important; }
.response-list  th {
    background: transparent;
    margin-top: none !important;
    text-align: start; }

.select2-result-label-red{
    color: #ee0303 !important;
}

.select2-result-cursor{
    cursor: auto !important;
}

.select2-input-width{
    width: 312px !important;
}

body.uiContMax .response-list  .panel-body {
    max-height: calc(100vh - 270px); }

.payment{   
    font-style: italic;
    color: grey;
    margin-inline-start: 27px;
    font-size:smaller;
}

.shift-right{
    margin-inline-start: 20px;
}

.label-style{
    font-weight:normal !important;
}

.textareaCounter { 
    display:none; 
}

/*Autocomplete list button*/
.list-button{
    position: relative;
    padding: 9.1px 11.2px;
    margin-top: -1.5px;
    border-radius: 1px;
}

.save-for-later {
    background-color: #3B763B !important;
}

.warning-button {
    background-color: #9d6600 !important;
}

.register-button {
    background-color: #2F5E2F !important;
}

.drop-button {
    background-color: #6F2A28 !important;
}

.sweet-alert p {
    color: #3E3E3E !important;
}

.sweet-alert button.cancel {
    background-color: #626262 !important;
}

/*Date picker icon*/
.ui-datepicker-trigger {
    margin-inline-start: 5px;
}

/* Hide the Mobile Submit/Save for Later buttons on regular screen size */
.mobile-submit-btn-show {
    display: none !important;
}

.mobile-submit-btn-hide {
    display: block !important;
}

.submit-family-modal {
    display: none;
    width: 400px;
}

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

    /* for input element with autocomplete */
    .element >.text-container > .fb-btn-group > .form-control {
        width: calc(13vw) !important;
    }

    /* for input element with datepicker */
    .element >.text-container > .dpWrapper> .form-control {
        width: calc(13vw)!important;
    }

    /* for dropdown element */
    .element >.dropdown-container > .select2-container {
        width: 11vw !important;
    }
    
    /* for X button styling*/
    #bottomButtonDesktop {        
        vertical-align: middle;           
    }        
}

/* Changes start to make container width within screen with different device widths */
@media only screen and (max-width:576px) {
    .form {
        margin: 10px !important;
    }
    
    .fbtabs {
        display: none;
    }

    .response-notifications {
        margin-inline-start: -15px;
        margin-inline-end: -15px;
    }

    .formpanel {
        border-color: white;
        margin-inline-start: -15px;
        margin-inline-end: -15px;
    }

    .form-footer.panel-footer {
        border-color: white;
        background-color: white;
        padding: 10px 0px 40px !important;
    }

    .panel-body.mobile-view {
        padding: 0px;
        margin-inline-start: -5px;
        width: 101.75% !important;
    }
}

@media only screen and (max-width:374px) {
    body {
        overflow-x: hidden;
    }

    .form {        
        width: 92vw;
    }

    .panel-body.mobile-view {
        width: 102.5% !important;
    }
}

@media only screen and (min-width:375px) and (max-width:410px) {
    .form {
        width: 93vw;
    }

    .panel-body.mobile-view {
        width: 102.75% !important;
    }
}

@media only screen and (min-width:411px) and (max-width:450px) {
    .form {
        width: 94vw;
    }

    .panel-body.mobile-view {
        width: 102.5% !important;
    }
}
/* Changes end to make container width within screen with different device widths */


/* minimum width given to individual element in collection*/
@media only screen and (min-width:769px) and (max-width:992px) {        
    .collection-container,.ecollection-column {
        min-width:calc(20vw) !important;
    }   
}

@media only screen and (min-width:993px) {
    .collection-container,.ecollection-column {
        min-width:calc(15vw) !important;
    }
    
    /* for input element with autocomplete */
    .element >.text-container > .fb-btn-group > .form-control {
        width: calc(10vw) !important;
    }

    /* for input element with datepicker */
    .element >.text-container > .dpWrapper> .form-control {
        width: calc(10vw)!important;
    }
}
/************************************************************/

/*Mobile View Changes start here*/
@media only screen and (max-width: 576px) {
    body {
       margin: 0;
       padding: 0;      
    }
    /* for input element with autocomplete */
    #formcontainer .element >.textbox-class,.text-container > .fb-btn-group > .form-control {
        width: calc(100% - 38px) !important;
    }

    /* for input element with datepicker */
    #formcontainer .element >.textbox-class > .dpWrapper> .form-control {
        width: calc(100% - 38px) !important;
    }
    /* for only input element */
    #formcontainer .element >.textbox-class > .form-control {
        width: 100% !important;
    }

    /* for single line and all input type text elements*/
     #formcontainer .element .textBoxWidthWithCustomValidation {
        width: calc(100% - 38px) !important;
    }

    #formcontainer .textBoxWidth {
        width: 100% !important; 
    }
  
     /* for paragraph and all multi line text fields*/
    #formcontainer textarea {
       width: 100% !important;      
    }

    /* for dropdown, race element, multi choice and all dropdown fields*/
    .sbs-responder .select2-container,
    .select2-container {
        width: 100% !important;       
     }

     .element > .medium > .select2-container  {
        width: 100% !important;
    }
    
    .element > .large > .select2-container {
        width: 100% !important;
    }

    /* for radio buttons, checkboxes and all elements for which multiple layouts can be set*/
     #formcontainer .element label span {
        width: auto !important;
    }

     div.twoColumns span {
        width: 100% !important;       
     }
     div.threeColumns span {
        width: 100% !important;       
     }
     div.notStacked span {
        width: 100% !important;       
     }
     /**************************************************************************************/

     /*lock icon for pin/password field should not be shown in mobile view*/
     .right-addon input {
        width: 100% !important;     
     }
     .right-addon .glyphicon{
         display: none !important;
     }

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

     /*Auto complete list close button*/
     .mobile-class {
        float:inherit !important;
     }

     /* Auto Complete icon*/
     .list-button {
        height:34px;
     }

     /* Change the padding for the panel-body from 15 to 10 in case of mobile*/
     .mobile-view {
         padding: 10px;
     }

     /* Change otter box of Submit/Save for Later to 100% of screen width in case of mobile*/
     .mobile-footer-btn-otter {
         width: 100% !important;
     }

     /* Change Save for Later button to 100% of screen width in case of mobile*/
     .mobile-save-btn {
         width: 100% !important;
     }

     /* Change Submit button to 100% of screen width in case of mobile*/
     .mobile-submit-btn {
         width: 100% !important;
     }

     /* Hide/Show the submit for once text base on screen width */
     .nonMobile-submit-once {
         display: none !important;
     }

     .mobile-submit-once {
         display: inline !important;
     }

     /* Show the Mobile Submit/Save for Later buttons on regular screen size */
     .mobile-submit-btn-show {
         display: block !important;
     }

     .nonMobile-submit-btn-hide {
         display: none !important;
     }

     .panel-footer {
         padding: 10px 15px 40px !important;
     }

     .panel-footer-two {
         padding: 10px 15px 80px !important;
     }

     .panel-footer-three {
         padding: 10px 15px 120px !important;
     }

     .submit-family-modal {
         display: none;
         width: 100%;
     }
     /* for input element with datepicker */
     #formcontainer .element >.text-container > .dpWrapper> .form-control {
        width: calc(87%)!important;
     }


     .formactions {
         width: 100% !important;
         position: sticky;
     }

     .languageSwitchDropdown {
         width: 98% !important;
         margin-bottom: 10px !important;
     }

     .SavedRes .data {
         color: #108411 !important;
         font-weight: bold;
         float: none !important;
         padding-inline-end: 0px !important;
     }

     .statusResSave {
         margin-inline-end: 0px !important;
     }

    .archive .data {
        text-align: start;
    }
 }

/*Mobile View Changes for response history dialog on top of form page*/
@media only screen and (max-width: 370px) {
    .formoptions-dialog .modal-dialog {
        width: auto !important;
        margin: 30px auto !important;
        padding: 0px 10px;
    }
}

.green-btn{
    background-color: #3B763B !important;
}

#successMsgDiv {
    color: #333333;
    margin-bottom: 1%;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 27px;
    word-break: break-word;
}

.successDiv{
	flex-direction: row;
	display: flex;
	margin-left: auto !important;
	margin-right: auto !important;
	width: 85%;
	background: #E5F7DE;
	box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
	border-bottom: 3px solid #2aaf2a;
}

.checkmarkStyle{
	margin: 1% 2%;
}

.successMsgOuterDiv{
	flex-grow: 9;
	margin: 1% 0%;
}

.closeIconStyle{
	flex-grow: 0.5;
	margin: 1% 1%;
}

.icon-size{
	width: 21.67px;
	height: 21.67px;
	vertical-align: bottom;
}

.submitted-icon{
	fill: #3E8D21;
	mix-blend-mode: normal;
}

.notStarted-icon{
	fill: #F5691D;
}

.pending-icon{
	fill: #0075DB;
	mix-blend-mode: normal;
}

.rejected-icon{
	fill: #CB1010;
	mix-blend-mode: normal;
}

.started-icon{
	fill: #F5691D;
	transform: rotate(135deg);
	mix-blend-mode: normal;
}

.status-text-color{
	color: #000000;
}

div.sisDAwidth{
	width: 100% !important;
}

table.noBorderNoSpacing {
	border: 0px;
	padding:0; 
	margin:0;
	border-collapse: collapse;
	width: 100%;
}

select#pendingSchoolId {
	margin-inline-start: 25px; 
	width: 91% !important;
}

div#sharingOptions_sharedWithBox {
	margin-inline-end: 40px;
	border-width: 1px;
	border-style: solid;
	border-color: #9d9d9d;
	height: 130px;
	overflow: auto;
	width: 100%;
}

td#approvalLinkIcon {
	width: 8%;
}

#propertycontainer input[ng-model="element.field.name"],
#propertycontainer input[ng-model="element.workflow.value"] {
	width: 84% !important;
}

#propertycontainer .psfieldcontainer a[data-field-list] {
    margin-inline-start: 5px;
}

[dir="rtl"] #propertycontainer .psfieldcontainer a[data-field-list] {
    margin-inline-start: -5px;
}

#propertycontainer label[for="field"] {
	padding-top: 5px;
}

#propertycontainer ul.choices input[type="text"] {
	width: 67% !important;
}

#propertycontainer ul.choices input[id^="fieldholder"] {
	width: 90% !important;
	margin-bottom: 5px;
}

#propertycontainer ul.choices div.psfieldcontainer {
	margin-inline-start: 17px;
}

#propertycontainer ul.choices li {
	margin-bottom: 5px;
}

[dir="rtl"] #propertycontainer a[class^="icon-workflow"] {
	padding-right: 23px;
	padding-left: 0px;
}

#propertycontainer ul.choices input[type="text"].sisDAprop {
    width: 90% !important;
}

#propertycontainer input[type="text"].sisDAprop {
    width: 90% !important;
}

[dir="rtl"] #propertycontainer a.icon-workflow-fees {
	padding-right: 18px;
	padding-left: 0px;
}

#propertycontainer .custom-integrated-fee-workflow-container input[type="text"] {
	width: 84% !important;
  }

#propertycontainer .non-integrated-fee-workflow-container input[type="text"] {
	width: 86% !important;
}

select#responseDropdown {
	width: 95%;
	max-width: 95%
}

div#propertycontainer #publish_open_date_only,
div#propertycontainer #publish_open_time_only,
div#propertycontainer #publish_close_date_only,
div#propertycontainer #publish_close_time_only {
    width: 43% !important;
}

div#propertycontainer .eventDateTimeInputWidth {
    width: 40% !important;
}

div.formoptions-dialog div.modal-dialog:has( select#responseDropdown ) {
	width: 80% !important;
}

@media (max-width: 576px) {
    /* For Hijri Title */
    .hijri-toggle-active {
        display: none !important;
    }
    /* For Hijri Views (Month, List, Week) */
    .fc-view-container div span:not(.fc-event-dot, .fc-list-heading-alt).hijri-toggle-active {
        display: none !important;
    }
    /* For Hijri Toggle */
    .hijriToggleDiv{
        display: none !important;
    }
    /* For Hijri dates in the calendar modals */
    span[ng-if="event.enableHijriDates"] {
        display: none !important;
    }
}

#default-search-input {
    color: initial;
}