cronapp-framework-js 3.0.0-SP.1 → 3.0.0-SP.11

package/css/themes/custom/material-round/custom-material-round.css

@@ -44,7 +44,7 @@
     --menuItemIconWidth: 25px;
 
     /* Background */
-    --backgroundColor10: #fbfbfb;
+    --backgroundColor10: #fffef9;
     --backgroundColor20: #f8f8f8;
     --backgroundColor30: #f5f5f5;
     --backgroundColor40: #f2f2f2;
@@ -199,7 +199,7 @@
     --colorLight40: #eadede;
     --colorLight50: #cdc2c2;
     --colorLight60: #dcc8c8;
-    --colorLight70: #807a7a;
+    --colorLight70: #cebaba;
     --textColorLight10: #252525;
     --textColorLight20: #313131;
     --textColorLight30: #3b3b3b;
@@ -241,26 +241,26 @@
     --textColorDark70: #fffffd;
 
     /* Color - Neutral (web e mobile) */
-    --colorNeutral00: #FFFFFF;
-    --colorNeutral10: #F1F1F1;
-    --colorNeutral20: #E3E3E3;
-    --colorNeutral30: #D5D5D5;
-    --colorNeutral40: #C7C7C7;
-    --colorNeutral50: #B9B9B9;
-    --colorNeutral60: #ACACAC;
-    --colorNeutral70: #9E9E9E;
+    --colorNeutral00: #ffffff;
+    --colorNeutral10: #f1f1f1;
+    --colorNeutral20: #e3e3e3;
+    --colorNeutral30: #d5d5d5;
+    --colorNeutral40: #c7c7c7;
+    --colorNeutral50: #b9b9b9;
+    --colorNeutral60: #acacac;
+    --colorNeutral70: #9e9e9e;
     --colorNeutral80: #909090;
     --colorNeutral90: #828282;
     --colorNeutral100: #747474;
     --colorNeutral110: #666666;
-    --colorNeutral120: #5D5D5D;
+    --colorNeutral120: #5d5d5d;
     --colorNeutral130: #535353;
-    --colorNeutral140: #4A4A4A;
+    --colorNeutral140: #4a4a4a;
     --colorNeutral150: #414141;
     --colorNeutral160: #383838;
-    --colorNeutral170: #2E2E2E;
+    --colorNeutral170: #2e2e2e;
     --colorNeutral180: #252525;
-    --colorNeutral190: #1C1C1C;
+    --colorNeutral190: #1c1c1c;
     --colorNeutral200: #131313;
     --colorNeutral210: #090909;
     --colorNeutral220: #000000;
@@ -416,7 +416,49 @@
     border-radius: var(--borderRadiusExtraSmall, 10px);
 }
 
+.btn.btn-primary {
+    background: var(--colorPrimary40, #68afd9);
+    border-color: transparent;
+    color: var(--textColorPrimary40, #fffef9);
+}
+
+.btn.btn-success:active {
+    background: var(--colorSuccess70, #365c3b);
+}
+
+.btn.btn-info:active {
+    background: var(--colorCalm60, #6593ae);
+}
+
+.k-button.k-warning.active,
+.k-button.k-warning:active,
+.btn.btn-warning.active,
+.btn.btn-warning:active {
+    background: var(--colorWarning60, #ab5e3d);
+}
+
+.btn.btn-stable:active {
+    background: var(--colorStable70, #717171);
+}
+
+.btn.btn-light:hover {
+    color: var(--textColorLight40, #434343);
+    background: var(--colorLight50, #cdc2c2);
+    border-color: transparent;
+    outline: none;
+}
 
+.btn.btn-light:active {
+    background: var(--colorLight70, #cebaba);
+}
+
+.btn.btn-royal:active {
+    background: var(--colorRoyal70, #1a0e2b);
+}
+
+.btn.btn-dark:active {
+    background: var(--colorDark70, #1c1c1c);
+}
 
 .k-button.active,
 .k-button:active,
@@ -467,6 +509,10 @@ textarea.k-textbox:hover {
     margin: 0;
 }
 
+.k-widget.k-multiselect {
+    background: transparent;
+}
+
 .cardinput {
     padding: 0;
 }
@@ -516,7 +562,6 @@ input.k-textbox:hover:focus,
 }
 
 /* Date and Hour */
-
 .bootstrap-datetimepicker-widget .timepicker-hour,
 .bootstrap-datetimepicker-widget .timepicker-minute,
 .bootstrap-datetimepicker-widget .timepicker-second {
@@ -619,8 +664,10 @@ input .k-textbox {
 }
 
 .login-view .reset-password {
-    text-align: right;
-    right: 20px;
+    text-align: end;
+    width: 100%;
+    max-width: 600px;
+    right: 12px;
 }
 
 .login-view input.k-textbox {
@@ -656,7 +703,6 @@ textarea.k-textbox {
     background: var(--backgroundColor, #f2f2f2);
 }
 
-#modalCookies p,
 #modalCookies label,
 .privacy-view .modal-cookies h1 {
     color: var(--textColor40, #434343);
@@ -667,12 +713,7 @@ textarea.k-textbox {
     filter: brightness(0) invert(1);
 }
 
-.navbar-brand>img {
-    filter: brightness(0) invert(1)
-}
-
 /*Backgrounds login*/
-
 .bg-login #container-second {
     background: var(--colorDefault40, #442b69);
 }
@@ -729,7 +770,6 @@ label.labelCollapsibleMenu {
 }
 
 /*Links Colors*/
-
 .color-default {
     color: var(--colorDefault40, #442b69);
 }
@@ -775,6 +815,14 @@ label.labelCollapsibleMenu {
     color: var(--colorWarning50, #dc7144);
 }
 
+.color-danger {
+    color: var(--colorDanger40, #e34646);
+}
+
+.color-danger:hover {
+    color: var(--colorDanger60, #a63333);
+}
+
 .color-light {
     color: var(--colorLight40, #eadede);
 }
@@ -851,7 +899,6 @@ label.labelCollapsibleMenu {
 }
 
 /* Lista Opção*/
-
 .k-radio-label:after,
 .k-radio:checked+.k-radio-label:after,
 .option-default .k-radio-label:after,
@@ -893,7 +940,6 @@ label.labelCollapsibleMenu {
 .option-info .k-radio-label:after,
 .option-info .k-radio:checked+.k-radio-label:after {
     background: var(--colorCalm40, #8ac8ee);
-
 }
 
 .option-info .k-radio:checked+.k-radio-label:before,
@@ -965,9 +1011,7 @@ label.labelCollapsibleMenu {
     background: var(--colorDark40, #343434);
 }
 
-
 /*Checkbox*/
-
 /*Default*/
 .k-checkbox:checked+.k-checkbox-label:before,
 .k-checkbox:indeterminate+.k-checkbox-label:before,
@@ -1064,7 +1108,21 @@ label.labelCollapsibleMenu {
 
 /* Button dynamic image*/
 .dynamic-image-container .btn {
-    background: var(--colorDefault40);
+    background: var(--colorDefault40, #442b69);
+}
+
+.dynamic-image-container {
+    border-style: dashed;
+    border: 1px dashed var(--colorDefault40, #442b69);
+    border-radius: var(--borderRadiusSmallest, 5px);
+    padding: 20px;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    flex-wrap: wrap;
+    text-align: center;
 }
 
 .dynamic-image-container .btn:focus,
@@ -1193,7 +1251,6 @@ label.labelCollapsibleMenu {
 }
 
 /*Agendador*/
-
 .k-scheduler .k-today.k-state-selected,
 .k-scheduler-navigation .k-nav-prev .k-link,
 .k-scheduler .k-state-selected>.k-link,
@@ -1315,7 +1372,6 @@ cron-scheduler .k-link:link,
 }
 
 /* Button edit form*/
-
 .k-edit-form-container .k-edit-buttons .k-scheduler-canceltimezone,
 .k-edit-form-container .k-edit-buttons .k-scheduler-cancel,
 .k-button.k-danger,
@@ -1453,11 +1509,65 @@ span.k-datetimepicker .k-select+.k-select {
 }
 
 /*Modais*/
+.modal-title {
+    margin: 0;
+    line-height: 1.42857143;
+    text-align: center;
+    color: var(--textColor40, #434343);
+    font-weight: 700;
+}
+
+.modal-content {
+    border-radius: 20px;
+    background: var(--backgroundColor10, #fffef9);
+}
+
+.modal-body {
+    position: relative;
+    padding: 15px;
+    text-align: center;
+    color: var(--textColor40, #434343);
+}
 
 .cronapp-icon.cronapp-error {
     color: var(--colorDanger40, #e34646);
 }
 
+.k-dialog-buttongroup .k-button {
+    background: var(--colorDanger40, #e34646);
+    color: var(--textColorDanger40, #fffef9);
+}
+
+.k-dialog-buttongroup .k-button:hover,
+.k-dialog-buttongroup .k-button:focus {
+    background: var(--colorDanger50, #d43131);
+    color: var(--textColorDanger50, #fffef9);
+    box-shadow: unset;
+}
+
+.k-dialog-buttongroup .k-button:active {
+    background: var(--colorDanger70, #7c2626);
+}
+
+#modalTemplateCancel.btn.btn-secondary:active {
+    background: var(--colorDefault70, #25183a);
+    border: unset;
+}
+
+.modal-footer .btn+.btn {
+    margin-bottom: 0;
+    margin-left: 5px;
+    background: var(--colorDanger40, #e34646);
+}
+
+.modal-footer .btn+.btn:hover {
+    background: var(--colorDanger50, #d43131);
+}
+
+.modal-footer .btn+.btn:active {
+    background: var(--colorDanger70, #7c2626);
+}
+
 #modalBodyConfirmDialog .title {
     font-size: var(--textMediumSize, 18px);
     font-weight: 700;
@@ -1475,7 +1585,6 @@ span.k-datetimepicker .k-select+.k-select {
     color: var(--colorDefault40, #442b69);
 }
 
-.k-scheduler-edit-form .k-edit-field .k-button:active,
 .k-edit-form-container .k-edit-buttons .k-primary:active,
 .k-scheduler-edit-form .k-edit-field .k-button.active,
 .k-edit-form-container .k-edit-buttons .k-primary.active,
@@ -1508,4 +1617,39 @@ button.btn.k-button.btn-block.btn-danger.btn-fab {
     border-color: transparent;
     color: var(--textColorDanger40, #fffef9);
     border-radius: 20px;
+}
+
+/*Fonts*/
+
+.h5 {
+    font-size: var(--textNormalSize, 14px);
+    color: var(--textColor40, #434343);
+}
+
+p {
+    font-size: var(--textNormalSize, 12px);
+    color: var(--textColor40, #434343);
+}
+
+/*Modal cookies*/
+.privacy-view .modal-cookies .form-group {
+    margin-bottom: 0;
+    margin-top: 20px;
+    text-align: justify;
+}
+
+#modalCookies .list-group p {
+    margin-top: 5px;
+    text-align: justify;
+}
+
+.privacy-view .modal-cookies .modal-header .close span {
+    font-size: var(--textMediumSize, 16px);
+    color: var(--textColor40, #434343);
+    padding: 0 10px;
+}
+
+#modalCookies p {
+    text-align: justify;
+    color: var(--textColor40, #434343);
 }

package/css/themes/custom/material-round/grid-material-round.css

@@ -164,7 +164,6 @@
 }
 
 /*Buttons*/
-
 .btn.btn-default:focus,
 .btn.btn-default:hover {
     background: var(--colorDefault20, #b9abce);
@@ -310,6 +309,8 @@ thead.k-grid-header th.k-header:last-child {
 
 .k-grid tr td {
     border-radius: 10px;
+    background: var(--backgroundColor10, #fffef9);
+    color: var(--textColor40, #434343);
 }
 
 .carousel-control .glyphicon-chevron-left,
@@ -388,10 +389,13 @@ label {
 
 .k-pager-sizes .k-dropdown-wrap .k-input {
     background: var(--colorDefault40, #487b4e);
-    color: var(--texColorPrimary40, #fffef9);
+    color: var(--textColorPrimary40, #fffef9);
     border-color: var(--colorDefault40, #487b4e);
     border-radius: 10px;
-    margin-left: -4px;
+    text-indent: initial;
+    margin-left: -3px;
+    width: auto;
+    text-align: center;
 }
 
 .k-dropdown-wrap .k-input {
@@ -401,7 +405,6 @@ label {
 .k-state-default>.k-select {
     background: transparent;
     border: unset;
-    margin-right: -2px;
 }
 
 .k-pager-wrap .k-link.k-state-disabled:hover {
@@ -464,16 +467,14 @@ cron-grid .k-tooltip span:before {
 .k-calendar .k-link.k-nav-fast,
 .k-calendar .k-header .k-link.k-nav-next,
 .k-calendar .k-header .k-link.k-nav-prev {
-    background: var(--colorDefault40, #442b69);
-    color: var(--textColorDefault40, #fffef9);
+    background: var(--backgroundColor70, #d9d9d9);
+    color: var(--textColor40, #434343);
     font-size: 12px;
     font-style: normal;
     font-weight: 700;
-
 }
 
 .k-calendar .k-content .k-link {
-    color: white;
     display: block;
     overflow: hidden;
     min-height: 1.8333em;
@@ -482,10 +483,22 @@ cron-grid .k-tooltip span:before {
     color: var(--textColor40, #434343);
 }
 
-.k-calendar-container.k-popup.k-group.k-reset.k-state-border-up {
+.k-calendar-container.k-popup.k-group.k-reset.k-state-border-up,
+.k-calendar .k-header {
     background: var(--backgroundColor70, #d9d9d9);
 }
 
+.k-calendar .k-link {
+    background: var(--backgroundColor10, #fffef9);
+}
+
+.k-calendar .k-footer .k-nav-today {
+    background: var(--backgroundColor70, #d9d9d9);
+}
+
+.k-calendar-container>.k-calendar {
+    background: var(--backgroundColor70, #d9d9d9);
+}
 
 .k-button.k-scheduler-delete {
     background: var(--colorDanger40, #e34646);
@@ -525,6 +538,12 @@ cron-grid .k-tooltip span:before {
     background: var(--colorDefault40, #442b69);
 }
 
+/* Calendar*/
+.k-calendar .k-content,
+.k-calendar .k-content th {
+    text-align: center;
+}
+
 .k-calendar.kstate-selected.k-state-hover.k-link {
     background: var(--colorDefault40, #442b69);
     color: var(--textColorDefault40, #fffef9);
@@ -533,14 +552,39 @@ cron-grid .k-tooltip span:before {
 .k-calendar th {
     background: var(--colorDefault40, #442b69);
     color: var(--textColorDefault40, #fffef9);
+    border: solid 1px #fffef9;
+    border-radius: 5px;
+}
+
+.k-calendar .k-state-selected .k-link {
+    background: var(--colorDefault40, #442b69);
+    color: var(--textColorDefault40, #fffef9);
+    box-shadow: transparent;
+    border: unset;
 }
 
 .k-calendar .k-state-selected.k-state-hover .k-link {
+    background: var(--colorDefault20, #b9abce);
+    color: var(--textColorDefault40, #fffef9);
+    box-shadow: transparent;
+    border: unset;
+}
+
+.k-calendar-container.k-group {
+    border: unset;
+}
+
+td.k-state-focused.k-state-selected {
     background: var(--colorDefault40, #442b69);
     color: var(--textColorDefault40, #fffef9);
     box-shadow: unset;
 }
 
+.k-link-selected {
+    background: var(--colorDefault40, #442b69);
+    color: var(--textColorDefault40, #fffef9);
+}
+
 span.k-icon.k-i-calendar::before,
 .k-i-clock:before {
     color: var(--colorDefault40, #442b69);
@@ -565,6 +609,31 @@ td.k-today {
     box-shadow: unset;
 }
 
-.k-icon k-i-close::before {
+.k-icon k-i-close::before,
+.k-nav-next {
     color: var(--colorDefault40, #442b69);
+}
+
+.k-webkit .k-pager-numbers .k-current-page .k-link {
+    width: 3.2em;
+    padding: 0 0.429em 0 0.714em;
+    border-radius: 4px;
+    border-right: 1px solid #cccccc;
+    color: var(--textColorDefault40, #fffef9);
+}
+
+.k-link .k-state-selected .k-state-focused {
+    background: var(--colorDefault40, #442b69);
+    color: var(--textColorDefault40, #fffef9);
+}
+
+.k-calendar .k-content .k-link:hover,
+.k-scheduler-edit-form .k-edit-field .k-button:hover {
+    background: var(--colorDefault20, #b9abce);
+    color: var(--textColorDefault40, #fffef9);
+}
+
+.k-scheduler-edit-form .k-edit-field .k-button:active {
+    background: var(--colorDefault70, #25183a);
+    color: var(--textColorDefault70, #fffef9);
 }

package/css/themes/custom/navigator/custom-navigator.css

@@ -11,7 +11,9 @@
 }
 
 .crn-navigator-vertical .navbar-default #navbar .navbar-nav li .dropdown-menu a,
-.crn-navigator-vertical .navbar-default #navbar2 .navbar-nav li .dropdown-menu a {
+.crn-navigator-vertical .navbar-default #navbar2 .navbar-nav li .dropdown-menu a,
+.crn-navigator-vertical.navbar-default #navbar .navbar-nav li .dropdown-menu a,
+.crn-navigator-vertical.navbar-default #navbar2 .navbar-nav li .dropdown-menu a {
     color: var(--textColor10, #111111);
     margin: 0;
 }
@@ -40,7 +42,8 @@
         background: var(--colorDefault40, #0f172a);
     }
 
-    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-header {
+    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-header,
+    .crn-navigator-vertical.navbar>.container-fluid>.navbar-header {
         padding-left: 15px;
     }
 
@@ -48,11 +51,13 @@
         width: 100%;
     }
 
-    .crn-navigator-vertical>.navbar>.container-fluid>#navbar {
+    .crn-navigator-vertical>.navbar>.container-fluid>#navbar,
+    .crn-navigator-vertical.navbar>.container-fluid>#navbar {
         width: 100%;
     }
 
-    .crn-navigator-vertical>.navbar>.container-fluid {
+    .crn-navigator-vertical>.navbar>.container-fluid,
+    .crn-navigator-vertical.navbar>.container-fluid {
         padding-right: 0;
         padding-left: 0;
         display: flex;
@@ -63,16 +68,22 @@
     .crn-navigator-vertical>.navbar>.container-fluid .navbar-collapse,
     .crn-navigator-vertical>.navbar>.container-fluid .navbar-header,
     .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse,
-    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-header {
+    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-header,
+    .crn-navigator-vertical.navbar>.container-fluid .navbar-collapse,
+    .crn-navigator-vertical.navbar>.container-fluid .navbar-header,
+    .crn-navigator-vertical.navbar>.container-fluid>.navbar-collapse,
+    .crn-navigator-vertical.navbar>.container-fluid>.navbar-header{
         margin-right: 0;
         margin-left: 0;
     }
 
-    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-header>.navbar-toggle {
+    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-header>.navbar-toggle,
+    .crn-navigator-vertical.navbar>.container-fluid>.navbar-header>.navbar-toggle {
         display: none;
     }
 
-    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse.collapse {
+    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse.collapse,
+    .crn-navigator-vertical.navbar>.container-fluid>.navbar-collapse.collapse {
         padding-right: 0;
         padding-left: 0;
         overflow-x: visible;
@@ -82,7 +93,8 @@
         box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
     }
 
-    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse.in {
+    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse.in,
+    .crn-navigator-vertical.navbar>.container-fluid>.navbar-collapse.in{
         overflow-y: auto;
         display: block;
     }
@@ -94,31 +106,39 @@
         box-shadow: none;
     }
 
-    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav {
+    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav,
+    .crn-navigator-vertical.navbar>.container-fluid>.navbar-collapse>.navbar-nav {
         float: none;
         margin: 0;
     }
 
-    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav .open .dropdown-menu>li>a {
+    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav .open .dropdown-menu>li>a,
+    .crn-navigator-vertical.navbar>.container-fluid>.navbar-collapse>.navbar-nav .open .dropdown-menu>li>a {
         line-height: 20px;
     }
 
     .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav .open .dropdown-menu .dropdown-header,
-    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav .open .dropdown-menu>li>a {
+    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav .open .dropdown-menu>li>a,
+    .crn-navigator-vertical.navbar>.container-fluid>.navbar-collapse>.navbar-nav .open .dropdown-menu .dropdown-header,
+    .crn-navigator-vertical.navbar>.container-fluid>.navbar-collapse>.navbar-nav .open .dropdown-menu>li>a{
         padding: 5px 15px 5px 25px;
     }
 
-    .crn-navigator-vertical .navbar>.container-fluid>.navbar-collapse>.navbar-nav>li>a {
+    .crn-navigator-vertical .navbar>.container-fluid>.navbar-collapse>.navbar-nav>li>a,
+    .crn-navigator-vertical.navbar>.container-fluid>.navbar-collapse>.navbar-nav>li>a{
         padding-top: 15px;
         padding-bottom: 15px;
     }
 
-    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav>li {
+    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav>li,
+    .crn-navigator-vertical.navbar>.container-fluid>.navbar-collapse>.navbar-nav>li{
         float: none;
     }
 
     .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav .open .dropdown-menu,
-    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav .open .dropdown-menu>li>a {
+    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav .open .dropdown-menu>li>a,
+    .crn-navigator-vertical.navbar>.container-fluid>.navbar-collapse>.navbar-nav .open .dropdown-menu,
+    .crn-navigator-vertical.navbar>.container-fluid>.navbar-collapse>.navbar-nav .open .dropdown-menu>li>a {
         position: static;
         float: none;
         width: auto;
@@ -133,31 +153,38 @@
     }
 
     .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav .open .dropdown-menu>li>a:hover,
-    .crn-navigator-vertical>.navbar>.navbar-nav .open .dropdown-menu>li>a:focus {
+    .crn-navigator-vertical>.navbar>.navbar-nav .open .dropdown-menu>li>a:focus,
+    .crn-navigator-vertical.navbar>.container-fluid>.navbar-collapse>.navbar-nav .open .dropdown-menu>li>a:hover,
+    .crn-navigator-vertical.navbar>.navbar-nav .open .dropdown-menu>li>a:focus {
         color: #fff;
         background: #282d57;
     }
 
-    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav .dropdown-menu {
+    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav .dropdown-menu,
+    .crn-navigator-vertical.navbar>.container-fluid>.navbar-collapse>.navbar-nav .dropdown-menu{
         margin-left: 11px;
     }
 
-    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav>.navbar-right {
+    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav>.navbar-right,
+    .crn-navigator-vertical.navbar>.container-fluid>.navbar-collapse>.navbar-nav>.navbar-right {
         float: none !important;
         margin-right: 0;
     }
 
-    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav>.navbar-right .dropdown-menu {
+    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav>.navbar-right .dropdown-menu,
+    .crn-navigator-vertical.navbar>.container-fluid>.navbar-collapse>.navbar-nav>.navbar-right .dropdown-menu {
         left: 0;
         right: 0;
     }
 
-    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav>.navbar-right img {
+    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-collapse>.navbar-nav>.navbar-right img,
+    .crn-navigator-vertical.navbar>.container-fluid>.navbar-collapse>.navbar-nav>.navbar-right img{
         margin-left: 0;
         margin-top: 0;
     }
 
-    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-header>.navbar-brand img {
+    .crn-navigator-vertical>.navbar>.container-fluid>.navbar-header>.navbar-brand img,
+    .crn-navigator-vertical.navbar>.container-fluid>.navbar-header>.navbar-brand img{
         margin-top: 0;
     }
 }